diff --git a/.claude/commands/create-frontend-release.md b/.claude/commands/create-frontend-release.md
index 38ed14651..f16189d42 100644
--- a/.claude/commands/create-frontend-release.md
+++ b/.claude/commands/create-frontend-release.md
@@ -458,15 +458,15 @@ echo "Workflow triggered. Waiting for PR creation..."
 3. **IMMEDIATELY CHECK**: Did release workflow trigger?
    ```bash
    sleep 10
-   gh run list --workflow=release.yaml --limit=1
+   gh run list --workflow=release-draft-create.yaml --limit=1
    ```
-4. **For Minor/Major Version Releases**: The create-release-candidate-branch workflow will automatically:
+4. **For Minor/Major Version Releases**: The release-branch-create workflow will automatically:
    - Create a `core/x.yy` branch for the PREVIOUS minor version
    - Apply branch protection rules
    - Document the feature freeze policy
    ```bash
    # Monitor branch creation (for minor/major releases)
-   gh run list --workflow=create-release-candidate-branch.yaml --limit=1
+   gh run list --workflow=release-branch-create.yaml --limit=1
    ```
 4. If workflow didn't trigger due to [skip ci]:
    ```bash
@@ -477,7 +477,7 @@ echo "Workflow triggered. Waiting for PR creation..."
    ```
 5. If workflow triggered, monitor execution:
    ```bash
-   WORKFLOW_RUN_ID=$(gh run list --workflow=release.yaml --limit=1 --json databaseId --jq '.[0].databaseId')
+   WORKFLOW_RUN_ID=$(gh run list --workflow=release-draft-create.yaml --limit=1 --json databaseId --jq '.[0].databaseId')
    gh run watch ${WORKFLOW_RUN_ID}
    ```
 
diff --git a/.claude/commands/create-hotfix-release.md b/.claude/commands/create-hotfix-release.md
index f35a8ad23..cc9c37ef5 100644
--- a/.claude/commands/create-hotfix-release.md
+++ b/.claude/commands/create-hotfix-release.md
@@ -246,7 +246,7 @@ For each commit:
 3. Merge the PR: `gh pr merge --merge`
 4. Monitor release workflow:
    ```bash
-   gh run list --workflow=release.yaml --limit=1
+   gh run list --workflow=release-draft-create.yaml --limit=1
    gh run watch
    ```
 5. Track progress:
diff --git a/.env_example b/.env_example
index 520521fe0..b77b87bc0 100644
--- a/.env_example
+++ b/.env_example
@@ -5,6 +5,10 @@ PLAYWRIGHT_TEST_URL=http://localhost:5173
 
 # Proxy target of the local development server
 # Note: localhost:8188 does not work.
+# Cloud auto-detection: Setting this to any *.comfy.org URL automatically enables
+# cloud mode (DISTRIBUTION=cloud) without needing to set DISTRIBUTION separately.
+# Examples: https://testcloud.comfy.org/, https://stagingcloud.comfy.org/,
+#           https://pr-123.testenvs.comfy.org/, https://cloud.comfy.org/
 DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 
 # Allow dev server access from remote IP addresses.
@@ -19,10 +23,10 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 # Whether to enable minification of the frontend code.
 ENABLE_MINIFY=true
 
-# Whether to disable proxying the `/templates` route. If true, allows you to 
-# serve templates from the ComfyUI_frontend/public/templates folder (for 
-# locally testing changes to templates). When false or nonexistent, the 
-# templates are served via the normal method from the server's python site 
+# Whether to disable proxying the `/templates` route. If true, allows you to
+# serve templates from the ComfyUI_frontend/public/templates folder (for
+# locally testing changes to templates). When false or nonexistent, the
+# templates are served via the normal method from the server's python site
 # packages.
 DISABLE_TEMPLATES_PROXY=false
 
@@ -33,3 +37,8 @@ DISABLE_VUE_PLUGINS=false
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
+
+# Sentry ENV vars replace with real ones for debugging
+# SENTRY_AUTH_TOKEN=private-token # get from sentry
+# SENTRY_ORG=comfy-org
+# SENTRY_PROJECT=cloud-frontend-staging
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 06139b08a..3c9750e0f 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -25,3 +25,6 @@ e3bb29ceb8174b8bbca9e48ec7d42cd540f40efa
 
 # [refactor] Improve updates/notifications domain organization (#5590)
 27ab355f9c73415dc39f4d3f512b02308f847801
+
+# Migrate Tailwind styles to design-system package
+9f19d8fb4bd22518879343b49c05634dca777df0
diff --git a/.gitattributes b/.gitattributes
index 0f538ae76..39d7f722c 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -7,6 +7,7 @@
 *.json text eol=lf
 *.mjs text eol=lf
 *.mts text eol=lf
+*.snap text eol=lf
 *.ts text eol=lf
 *.vue text eol=lf
 *.yaml text eol=lf
diff --git a/.github/workflows/README.md b/.github/workflows/README.md
new file mode 100644
index 000000000..f62e91eda
--- /dev/null
+++ b/.github/workflows/README.md
@@ -0,0 +1,21 @@
+# GitHub Workflows
+
+## Naming Convention
+
+Workflow files follow a consistent naming pattern: `<prefix>-<descriptive-name>.yaml`
+
+### Category Prefixes
+
+| Prefix     | Purpose                             | Example                              |
+| ---------- | ----------------------------------- | ------------------------------------ |
+| `ci-`      | Testing, linting, validation        | `ci-tests-e2e.yaml`                  |
+| `release-` | Version management, publishing      | `release-version-bump.yaml`          |
+| `pr-`      | PR automation (triggered by labels) | `pr-claude-review.yaml`              |
+| `api-`     | External Api type generation        | `api-update-registry-api-types.yaml` |
+| `i18n-`    | Internationalization updates        | `i18n-update-core.yaml`              |
+
+## Documentation
+
+Each workflow file contains comments explaining its purpose, triggers, and behavior. For specific details about what each workflow does, refer to the comments at the top of each `.yaml` file.
+
+For GitHub Actions documentation, see [Events that trigger workflows](https://docs.github.com/en/actions/writing-workflows/choosing-when-your-workflow-runs/events-that-trigger-workflows).
diff --git a/.github/workflows/update-electron-types.yaml b/.github/workflows/api-update-electron-api-types.yaml
similarity index 82%
rename from .github/workflows/update-electron-types.yaml
rename to .github/workflows/api-update-electron-api-types.yaml
index 45d959b86..c25742118 100644
--- a/.github/workflows/update-electron-types.yaml
+++ b/.github/workflows/api-update-electron-api-types.yaml
@@ -1,4 +1,5 @@
-name: Update Electron Types
+name: 'Api: Update Electron API Types'
+description: 'When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   workflow_dispatch:
@@ -25,15 +26,6 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-          key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            electron-types-tools-cache-${{ runner.os }}-
-
       - name: Update electron types
         run: pnpm install --workspace-root @comfyorg/comfyui-electron-types@latest
 
diff --git a/.github/workflows/update-comfyui-manager-api-types.yaml b/.github/workflows/api-update-manager-api-types.yaml
similarity index 85%
rename from .github/workflows/update-comfyui-manager-api-types.yaml
rename to .github/workflows/api-update-manager-api-types.yaml
index 7e307dfda..4961ae9d2 100644
--- a/.github/workflows/update-comfyui-manager-api-types.yaml
+++ b/.github/workflows/api-update-manager-api-types.yaml
@@ -1,4 +1,5 @@
-name: Update ComfyUI-Manager API Types
+name: 'Api: Update Manager API Types'
+description: 'When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger
@@ -30,26 +31,9 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            update-manager-tools-cache-${{ runner.os }}-
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Cache ComfyUI-Manager repository
-        uses: actions/cache@v4
-        with:
-          path: ComfyUI-Manager
-          key: comfyui-manager-repo-${{ runner.os }}-${{ github.run_id }}
-          restore-keys: |
-            comfyui-manager-repo-${{ runner.os }}-
-
       - name: Checkout ComfyUI-Manager repository
         uses: actions/checkout@v5
         with:
diff --git a/.github/workflows/update-comfy-registry-api-types.yaml b/.github/workflows/api-update-registry-api-types.yaml
similarity index 85%
rename from .github/workflows/update-comfy-registry-api-types.yaml
rename to .github/workflows/api-update-registry-api-types.yaml
index 41a4db9ab..41a3d0a7a 100644
--- a/.github/workflows/update-comfy-registry-api-types.yaml
+++ b/.github/workflows/api-update-registry-api-types.yaml
@@ -1,4 +1,5 @@
-name: Update Comfy Registry API Types
+name: 'Api: Update Registry API Types'
+description: 'When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger
@@ -29,26 +30,9 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            update-registry-tools-cache-${{ runner.os }}-
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Cache comfy-api repository
-        uses: actions/cache@v4
-        with:
-          path: comfy-api
-          key: comfy-api-repo-${{ runner.os }}-${{ github.run_id }}
-          restore-keys: |
-            comfy-api-repo-${{ runner.os }}-
-
       - name: Checkout comfy-api repository
         uses: actions/checkout@v5
         with:
diff --git a/.github/workflows/validate-json.yaml b/.github/workflows/ci-json-validation.yaml
similarity index 63%
rename from .github/workflows/validate-json.yaml
rename to .github/workflows/ci-json-validation.yaml
index 2986d23ed..0d8c9392f 100644
--- a/.github/workflows/validate-json.yaml
+++ b/.github/workflows/ci-json-validation.yaml
@@ -1,4 +1,5 @@
-name: Validate JSON
+name: "CI: JSON Validation"
+description: "Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq"
 
 on:
   push:
diff --git a/.github/workflows/lint-and-format.yaml b/.github/workflows/ci-lint-format.yaml
similarity index 84%
rename from .github/workflows/lint-and-format.yaml
rename to .github/workflows/ci-lint-format.yaml
index 62956cadb..6ebfd8d38 100644
--- a/.github/workflows/lint-and-format.yaml
+++ b/.github/workflows/ci-lint-format.yaml
@@ -1,4 +1,5 @@
-name: Lint and Format
+name: "CI: Lint Format"
+description: "Linting and code formatting validation for pull requests"
 
 on:
   pull_request:
@@ -32,27 +33,15 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            .eslintcache
-            tsconfig.tsbuildinfo
-            .prettierCache
-            .knip-cache
-          key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js,mts}', '*.config.*', '.eslintrc.*', '.prettierrc.*', 'tsconfig.json') }}
-          restore-keys: |
-            lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            lint-format-cache-${{ runner.os }}-
-            ci-tools-cache-${{ runner.os }}-
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
 
+      - name: Run Stylelint with auto-fix
+        run: pnpm stylelint:fix
+
       - name: Run Prettier with auto-format
         run: pnpm format
 
@@ -77,6 +66,7 @@ jobs:
       - name: Final validation
         run: |
           pnpm lint
+          pnpm stylelint
           pnpm format:check
           pnpm knip
 
diff --git a/.github/workflows/devtools-python-check.yaml b/.github/workflows/ci-python-validation.yaml
similarity index 82%
rename from .github/workflows/devtools-python-check.yaml
rename to .github/workflows/ci-python-validation.yaml
index f0893e99d..698f467bf 100644
--- a/.github/workflows/devtools-python-check.yaml
+++ b/.github/workflows/ci-python-validation.yaml
@@ -1,4 +1,5 @@
-name: Devtools Python Check
+name: "CI: Python Validation"
+description: "Validates Python code in tools/devtools directory"
 
 on:
   pull_request:
diff --git a/.github/workflows/ci-size-data.yaml b/.github/workflows/ci-size-data.yaml
new file mode 100644
index 000000000..a21c93110
--- /dev/null
+++ b/.github/workflows/ci-size-data.yaml
@@ -0,0 +1,52 @@
+name: "CI: Size Data"
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  collect:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Collect size data
+        run: node scripts/size-collect.js
+
+      - name: Save PR number & base branch
+        if: ${{ github.event_name == 'pull_request' }}
+        run: |
+          echo ${{ github.event.number }} > ./temp/size/number.txt
+          echo ${{ github.base_ref }} > ./temp/size/base.txt
+
+      - name: Upload size data
+        uses: actions/upload-artifact@v4
+        with:
+          name: size-data
+          path: temp/size
diff --git a/.github/workflows/pr-playwright-deploy-forks.yaml b/.github/workflows/ci-tests-e2e-forks.yaml
similarity index 95%
rename from .github/workflows/pr-playwright-deploy-forks.yaml
rename to .github/workflows/ci-tests-e2e-forks.yaml
index 660fee77f..5d3767f8e 100644
--- a/.github/workflows/pr-playwright-deploy-forks.yaml
+++ b/.github/workflows/ci-tests-e2e-forks.yaml
@@ -1,8 +1,9 @@
-name: PR Playwright Deploy (Forks)
+name: "CI: Tests E2E (Deploy for Forks)"
+description: "Deploys test results from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:
-    workflows: ["Tests CI"]
+    workflows: ["CI: Tests E2E"]
     types: [requested, completed]
 
 env:
diff --git a/.github/workflows/tests-ci.yaml b/.github/workflows/ci-tests-e2e.yaml
similarity index 98%
rename from .github/workflows/tests-ci.yaml
rename to .github/workflows/ci-tests-e2e.yaml
index 0d33ecf19..690417a04 100644
--- a/.github/workflows/tests-ci.yaml
+++ b/.github/workflows/ci-tests-e2e.yaml
@@ -1,4 +1,5 @@
-name: Tests CI
+name: "CI: Tests E2E"
+description: "End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages"
 
 on:
   push:
diff --git a/.github/workflows/pr-storybook-deploy-forks.yaml b/.github/workflows/ci-tests-storybook-forks.yaml
similarity index 95%
rename from .github/workflows/pr-storybook-deploy-forks.yaml
rename to .github/workflows/ci-tests-storybook-forks.yaml
index da27867c4..083a85f1d 100644
--- a/.github/workflows/pr-storybook-deploy-forks.yaml
+++ b/.github/workflows/ci-tests-storybook-forks.yaml
@@ -1,8 +1,9 @@
-name: PR Storybook Deploy (Forks)
+name: "CI: Tests Storybook (Deploy for Forks)"
+description: "Deploys Storybook previews from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:
-    workflows: ['Storybook and Chromatic CI']
+    workflows: ["CI: Tests Storybook"]
     types: [requested, completed]
 
 env:
diff --git a/.github/workflows/storybook-and-chromatic-ci.yaml b/.github/workflows/ci-tests-storybook.yaml
similarity index 85%
rename from .github/workflows/storybook-and-chromatic-ci.yaml
rename to .github/workflows/ci-tests-storybook.yaml
index bfac96530..77dcf5210 100644
--- a/.github/workflows/storybook-and-chromatic-ci.yaml
+++ b/.github/workflows/ci-tests-storybook.yaml
@@ -1,6 +1,5 @@
-name: Storybook and Chromatic CI
-
-# - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
+name: "CI: Tests Storybook"
+description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
 
 on:
   workflow_dispatch: # Allow manual triggering
@@ -51,19 +50,6 @@ jobs:
           node-version: '20'
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            storybook-static
-            tsconfig.tsbuildinfo
-          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
-          restore-keys: |
-            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            storybook-cache-${{ runner.os }}-
-            storybook-tools-cache-${{ runner.os }}-
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
@@ -116,19 +102,6 @@ jobs:
           node-version: '20'
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            storybook-static
-            tsconfig.tsbuildinfo
-          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
-          restore-keys: |
-            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            storybook-cache-${{ runner.os }}-
-            storybook-tools-cache-${{ runner.os }}-
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
diff --git a/.github/workflows/vitest-tests.yaml b/.github/workflows/ci-tests-unit.yaml
similarity index 55%
rename from .github/workflows/vitest-tests.yaml
rename to .github/workflows/ci-tests-unit.yaml
index 394145188..2f4417594 100644
--- a/.github/workflows/vitest-tests.yaml
+++ b/.github/workflows/ci-tests-unit.yaml
@@ -1,4 +1,5 @@
-name: Vitest Tests
+name: "CI: Tests Unit"
+description: "Unit and component testing with Vitest"
 
 on:
   push:
@@ -28,19 +29,6 @@ jobs:
           node-version: "lts/*"
           cache: "pnpm"
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            coverage
-            .vitest-cache
-          key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
-          restore-keys: |
-            vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            vitest-cache-${{ runner.os }}-
-            test-tools-cache-${{ runner.os }}-
-
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
diff --git a/.github/workflows/update-locales.yaml b/.github/workflows/i18n-update-core.yaml
similarity index 94%
rename from .github/workflows/update-locales.yaml
rename to .github/workflows/i18n-update-core.yaml
index f38113835..8a20af4c0 100644
--- a/.github/workflows/update-locales.yaml
+++ b/.github/workflows/i18n-update-core.yaml
@@ -1,4 +1,5 @@
-name: Update Locales
+name: "i18n: Update Core"
+description: "Generates and updates translations for core ComfyUI components using OpenAI"
 
 on:
   # Manual dispatch for urgent translation updates  
diff --git a/.github/workflows/update-locales-for-given-custom-node-repository.yaml b/.github/workflows/i18n-update-custom-nodes.yaml
similarity index 98%
rename from .github/workflows/update-locales-for-given-custom-node-repository.yaml
rename to .github/workflows/i18n-update-custom-nodes.yaml
index b9d1b33b9..61076f031 100644
--- a/.github/workflows/update-locales-for-given-custom-node-repository.yaml
+++ b/.github/workflows/i18n-update-custom-nodes.yaml
@@ -1,4 +1,4 @@
-name: Update Locales for given custom node repository
+name: i18n Update Custom Nodes
 
 on:
   workflow_dispatch:
diff --git a/.github/workflows/update-node-definitions-locales.yaml b/.github/workflows/i18n-update-nodes.yaml
similarity index 97%
rename from .github/workflows/update-node-definitions-locales.yaml
rename to .github/workflows/i18n-update-nodes.yaml
index ce991d09e..0b9f1534d 100644
--- a/.github/workflows/update-node-definitions-locales.yaml
+++ b/.github/workflows/i18n-update-nodes.yaml
@@ -1,4 +1,4 @@
-name: Update Node Definitions Locales
+name: i18n Update Nodes
 
 on:
   workflow_dispatch:
diff --git a/.github/workflows/auto-backport.yaml b/.github/workflows/pr-backport.yaml
similarity index 53%
rename from .github/workflows/auto-backport.yaml
rename to .github/workflows/pr-backport.yaml
index 20eadc0c9..8729c5d57 100644
--- a/.github/workflows/auto-backport.yaml
+++ b/.github/workflows/pr-backport.yaml
@@ -1,4 +1,4 @@
-name: Auto Backport
+name: PR Backport
 
 on:
   pull_request_target:
@@ -69,70 +69,139 @@ jobs:
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
-      - name: Check if backports already exist
-        id: check-existing
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+      - name: Collect backport targets
+        id: targets
         run: |
-          # Check for existing backport PRs for this PR number
-          EXISTING_BACKPORTS=$(gh pr list --state all --search "backport-${PR_NUMBER}-to" --json title,headRefName,baseRefName | jq -r '.[].headRefName')
-          
-          if [ -z "$EXISTING_BACKPORTS" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-          
-          # For manual triggers with force_rerun, proceed anyway
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ] && [ "${{ inputs.force_rerun }}" = "true" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            echo "::warning::Force rerun requested - existing backports will be updated"
-            exit 0
-          fi
-          
-          echo "Found existing backport PRs:"
-          echo "$EXISTING_BACKPORTS"
-          echo "skip=true" >> $GITHUB_OUTPUT
-          echo "::warning::Backport PRs already exist for PR #${PR_NUMBER}, skipping to avoid duplicates"
+          TARGETS=()
+          declare -A SEEN=()
 
-      - name: Extract version labels
-        if: steps.check-existing.outputs.skip != 'true'
-        id: versions
-        run: |
-          # Extract version labels (e.g., "1.24", "1.22")
-          VERSIONS=""
-          
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            # For manual triggers, get labels from the PR
             LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
           else
-            # For automatic triggers, extract from PR event
             LABELS='${{ toJSON(github.event.pull_request.labels) }}'
             LABELS=$(echo "$LABELS" | jq -r '.[].name')
           fi
-          
-          for label in $LABELS; do
-            # Match version labels like "1.24" (major.minor only)
-            if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
-              # Validate the branch exists before adding to list
-              if git ls-remote --exit-code origin "core/${label}" >/dev/null 2>&1; then
-                VERSIONS="${VERSIONS}${label} "
-              else
-                echo "::warning::Label '${label}' found but branch 'core/${label}' does not exist"
-              fi
-            fi
-          done
 
-          if [ -z "$VERSIONS" ]; then
-            echo "::error::No version labels found (e.g., 1.24, 1.22)"
+          add_target() {
+            local label="$1"
+            local target="$2"
+
+            if [ -z "$target" ]; then
+              return
+            fi
+
+            target=$(echo "$target" | xargs)
+
+            if [ -z "$target" ] || [ -n "${SEEN[$target]}" ]; then
+              return
+            fi
+
+            if git ls-remote --exit-code origin "$target" >/dev/null 2>&1; then
+              TARGETS+=("$target")
+              SEEN["$target"]=1
+            else
+              echo "::warning::Label '${label}' references missing branch '${target}'"
+            fi
+          }
+
+          while IFS= read -r label; do
+            [ -z "$label" ] && continue
+
+            if [[ "$label" =~ ^branch:(.+)$ ]]; then
+              add_target "$label" "${BASH_REMATCH[1]}"
+            elif [[ "$label" =~ ^backport:(.+)$ ]]; then
+              add_target "$label" "${BASH_REMATCH[1]}"
+            elif [[ "$label" =~ ^core\/([0-9]+)\.([0-9]+)$ ]]; then
+              SAFE_MAJOR="${BASH_REMATCH[1]}"
+              SAFE_MINOR="${BASH_REMATCH[2]}"
+              add_target "$label" "core/${SAFE_MAJOR}.${SAFE_MINOR}"
+            elif [[ "$label" =~ ^cloud\/([0-9]+)\.([0-9]+)$ ]]; then
+              SAFE_MAJOR="${BASH_REMATCH[1]}"
+              SAFE_MINOR="${BASH_REMATCH[2]}"
+              add_target "$label" "cloud/${SAFE_MAJOR}.${SAFE_MINOR}"
+            elif [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
+              add_target "$label" "core/${label}"
+            fi
+          done <<< "$LABELS"
+
+          if [ "${#TARGETS[@]}" -eq 0 ]; then
+            echo "::error::No backport targets found (use labels like '1.24' or 'branch:release/hotfix')"
             exit 1
           fi
 
-          echo "versions=${VERSIONS}" >> $GITHUB_OUTPUT
-          echo "Found version labels: ${VERSIONS}"
+          echo "targets=${TARGETS[*]}" >> $GITHUB_OUTPUT
+          echo "Found backport targets: ${TARGETS[*]}"
+
+      - name: Filter already backported targets
+        id: filter-targets
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          FORCE_RERUN_INPUT: >-
+            ${{ github.event_name == 'workflow_dispatch' && inputs.force_rerun
+            || 'false' }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: >-
+            ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number
+            || github.event.pull_request.number }}
+        run: |
+          set -euo pipefail
+
+          REQUESTED_TARGETS="${{ steps.targets.outputs.targets }}"
+          if [ -z "$REQUESTED_TARGETS" ]; then
+            echo "skip=true" >> $GITHUB_OUTPUT
+            echo "pending-targets=" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+
+          FORCE_RERUN=false
+          if [ "$EVENT_NAME" = "workflow_dispatch" ] && [ "$FORCE_RERUN_INPUT" = "true" ]; then
+            FORCE_RERUN=true
+          fi
+
+          mapfile -t EXISTING_BRANCHES < <(
+            git ls-remote --heads origin "backport-${PR_NUMBER}-to-*" || true
+          )
+
+          PENDING=()
+          SKIPPED=()
+
+          for target in $REQUESTED_TARGETS; do
+            SAFE_TARGET=$(echo "$target" | tr '/' '-')
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
+
+            if [ "$FORCE_RERUN" = true ]; then
+              PENDING+=("$target")
+              continue
+            fi
+
+            if printf '%s\n' "${EXISTING_BRANCHES[@]:-}" |
+              grep -Fq "refs/heads/${BACKPORT_BRANCH}"; then
+              SKIPPED+=("$target")
+            else
+              PENDING+=("$target")
+            fi
+          done
+
+          SKIPPED_JOINED="${SKIPPED[*]:-}"
+          PENDING_JOINED="${PENDING[*]:-}"
+
+          echo "already-exists=${SKIPPED_JOINED}" >> $GITHUB_OUTPUT
+          echo "pending-targets=${PENDING_JOINED}" >> $GITHUB_OUTPUT
+
+          if [ -z "$PENDING_JOINED" ]; then
+            echo "skip=true" >> $GITHUB_OUTPUT
+            if [ -n "$SKIPPED_JOINED" ]; then
+              echo "::warning::Backport branches already exist for: ${SKIPPED_JOINED}"
+            fi
+          else
+            echo "skip=false" >> $GITHUB_OUTPUT
+            if [ -n "$SKIPPED_JOINED" ]; then
+              echo "::notice::Skipping already backported targets: ${SKIPPED_JOINED}"
+            fi
+          fi
 
       - name: Backport commits
-        if: steps.check-existing.outputs.skip != 'true'
+        if: steps.filter-targets.outputs.skip != 'true'
         id: backport
         env:
           PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
@@ -150,16 +219,25 @@ jobs:
             MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
           fi
 
-          for version in ${{ steps.versions.outputs.versions }}; do
-            echo "::group::Backporting to core/${version}"
+          for target in ${{ steps.filter-targets.outputs.pending-targets }}; do
+            TARGET_BRANCH="${target}"
+            SAFE_TARGET=$(echo "$TARGET_BRANCH" | tr '/' '-')
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
 
-            TARGET_BRANCH="core/${version}"
-            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${version}"
+            echo "::group::Backporting to ${TARGET_BRANCH}"
 
             # Fetch target branch (fail if doesn't exist)
             if ! git fetch origin "${TARGET_BRANCH}"; then
               echo "::error::Target branch ${TARGET_BRANCH} does not exist"
-              FAILED="${FAILED}${version}:branch-missing "
+              FAILED="${FAILED}${TARGET_BRANCH}:branch-missing "
+              echo "::endgroup::"
+              continue
+            fi
+
+            # Check if commit already exists on target branch
+            if git branch -r --contains "${MERGE_COMMIT}" | grep -q "origin/${TARGET_BRANCH}"; then
+              echo "::notice::Commit ${MERGE_COMMIT} already exists on ${TARGET_BRANCH}, skipping backport"
+              FAILED="${FAILED}${TARGET_BRANCH}:already-exists "
               echo "::endgroup::"
               continue
             fi
@@ -170,7 +248,7 @@ jobs:
             # Try cherry-pick
             if git cherry-pick "${MERGE_COMMIT}"; then
               git push origin "${BACKPORT_BRANCH}"
-              SUCCESS="${SUCCESS}${version}:${BACKPORT_BRANCH} "
+              SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
               echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
               # Return to main (keep the branch, we need it for PR)
               git checkout main
@@ -180,7 +258,7 @@ jobs:
               git cherry-pick --abort
 
               echo "::error::Cherry-pick failed due to conflicts"
-              FAILED="${FAILED}${version}:conflicts:${CONFLICTS} "
+              FAILED="${FAILED}${TARGET_BRANCH}:conflicts:${CONFLICTS} "
 
               # Clean up the failed branch
               git checkout main
@@ -198,7 +276,7 @@ jobs:
           fi
 
       - name: Create PR for each successful backport
-        if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
+        if: steps.filter-targets.outputs.skip != 'true' && steps.backport.outputs.success
         env:
           GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
           PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
@@ -214,13 +292,13 @@ jobs:
           fi
           
           for backport in ${{ steps.backport.outputs.success }}; do
-            IFS=':' read -r version branch <<< "${backport}"
+            IFS=':' read -r target branch <<< "${backport}"
 
             if PR_URL=$(gh pr create \
-              --base "core/${version}" \
+              --base "${target}" \
               --head "${branch}" \
-              --title "[backport ${version}] ${PR_TITLE}" \
-              --body "Backport of #${PR_NUMBER} to \`core/${version}\`"$'\n\n'"Automatically created by backport workflow." \
+              --title "[backport ${target}] ${PR_TITLE}" \
+              --body "Backport of #${PR_NUMBER} to \`${target}\`"$'\n\n'"Automatically created by backport workflow." \
               --label "backport" 2>&1); then
 
               # Extract PR number from URL
@@ -230,14 +308,14 @@ jobs:
                 gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
               fi
             else
-              echo "::error::Failed to create PR for ${version}: ${PR_URL}"
+              echo "::error::Failed to create PR for ${target}: ${PR_URL}"
               # Still try to comment on the original PR about the failure
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`core/${version}\`. Please create the PR manually from branch \`${branch}\`"
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`${target}\`. Please create the PR manually from branch \`${branch}\`"
             fi
           done
 
       - name: Comment on failures
-        if: steps.check-existing.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
+        if: steps.filter-targets.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
@@ -253,16 +331,25 @@ jobs:
           fi
 
           for failure in ${{ steps.backport.outputs.failed }}; do
-            IFS=':' read -r version reason conflicts <<< "${failure}"
+            IFS=':' read -r target reason conflicts <<< "${failure}"
 
             if [ "${reason}" = "branch-missing" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`core/${version}\` does not exist"
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist"
+
+            elif [ "${reason}" = "already-exists" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
 
             elif [ "${reason}" = "conflicts" ]; then
               # Convert comma-separated conflicts back to newlines for display
               CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
 
-              COMMENT_BODY="@${PR_AUTHOR} Backport to \`core/${version}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`core/${version}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`${target}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`${target}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
               gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
             fi
           done
+
+      - name: Remove needs-backport label
+        if: steps.filter-targets.outputs.skip != 'true' && success()
+        run: gh pr edit ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }} --remove-label "needs-backport"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/claude-pr-review.yml b/.github/workflows/pr-claude-review.yaml
similarity index 62%
rename from .github/workflows/claude-pr-review.yml
rename to .github/workflows/pr-claude-review.yaml
index 76a9eb0f3..e4684af07 100644
--- a/.github/workflows/claude-pr-review.yml
+++ b/.github/workflows/pr-claude-review.yaml
@@ -1,4 +1,5 @@
-name: Claude PR Review
+name: "PR: Claude Review"
+description: "AI-powered code review triggered by adding the 'claude-review' label to a PR"
 
 permissions:
   contents: read
@@ -16,39 +17,9 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  wait-for-ci:
+  claude-review:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'claude-review'
-    outputs:
-      should-proceed: ${{ steps.check-status.outputs.proceed }}
-    steps:
-      - name: Wait for other CI checks
-        uses: lewagon/wait-on-check-action@e106e5c43e8ca1edea6383a39a01c5ca495fd812
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          check-regexp: '^(lint-and-format|test|playwright-tests)'
-          wait-interval: 30
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-      
-      - name: Check if we should proceed
-        id: check-status
-        run: |
-          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format")) | {name, conclusion}')
-
-          if echo "$CHECK_RUNS" | grep -Eq '"conclusion": "(failure|cancelled|timed_out|action_required)"'; then
-            echo "Some CI checks failed - skipping Claude review"
-            echo "proceed=false" >> $GITHUB_OUTPUT
-          else
-            echo "All CI checks passed - proceeding with Claude review"
-            echo "proceed=true" >> $GITHUB_OUTPUT
-          fi
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  claude-review:
-    needs: wait-for-ci
-    if: needs.wait-for-ci.outputs.should-proceed == 'true'
-    runs-on: ubuntu-latest
     timeout-minutes: 30
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/pr-size-report.yaml b/.github/workflows/pr-size-report.yaml
new file mode 100644
index 000000000..968888aa9
--- /dev/null
+++ b/.github/workflows/pr-size-report.yaml
@@ -0,0 +1,104 @@
+name: "PR: Size Report"
+
+on:
+  workflow_run:
+    workflows: ['CI: Size Data']
+    types:
+      - completed
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: 'PR number to report on'
+        required: true
+        type: number
+      run_id:
+        description: 'Size data workflow run ID'
+        required: true
+        type: string
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      (
+        (github.event_name == 'workflow_run' &&
+         github.event.workflow_run.event == 'pull_request' &&
+         github.event.workflow_run.conclusion == 'success') ||
+        github.event_name == 'workflow_dispatch'
+      )
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Download size data
+        uses: dawidd6/action-download-artifact@v11
+        with:
+          name: size-data
+          run_id: ${{ github.event_name == 'workflow_dispatch' && inputs.run_id || github.event.workflow_run.id }}
+          path: temp/size
+
+      - name: Set PR number
+        id: pr-number
+        run: |
+          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
+            echo "content=${{ inputs.pr_number }}" >> $GITHUB_OUTPUT
+          else
+            echo "content=$(cat temp/size/number.txt)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Set base branch
+        id: pr-base
+        run: |
+          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
+            echo "content=main" >> $GITHUB_OUTPUT
+          else
+            echo "content=$(cat temp/size/base.txt)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Download previous size data
+        uses: dawidd6/action-download-artifact@v11
+        with:
+          branch: ${{ steps.pr-base.outputs.content }}
+          workflow: ci-size-data.yaml
+          event: push
+          name: size-data
+          path: temp/size-prev
+          if_no_artifact_found: warn
+
+      - name: Generate size report
+        run: node scripts/size-report.js > size-report.md
+
+      - name: Read size report
+        id: size-report
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./size-report.md
+
+      - name: Create or update PR comment
+        uses: actions-cool/maintain-one-comment@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ steps.pr-number.outputs.content }}
+          body: |
+            ${{ steps.size-report.outputs.content }}
+            <!-- COMFYUI_FRONTEND_SIZE -->
+          body-include: '<!-- COMFYUI_FRONTEND_SIZE -->'
diff --git a/.github/workflows/pr-update-playwright-expectations.yaml b/.github/workflows/pr-update-playwright-expectations.yaml
new file mode 100644
index 000000000..a01362466
--- /dev/null
+++ b/.github/workflows/pr-update-playwright-expectations.yaml
@@ -0,0 +1,309 @@
+# Setting test expectation screenshots for Playwright
+name: "PR: Update Playwright Expectations"
+
+on:
+  pull_request:
+    types: [labeled]
+  issue_comment:
+    types: [created]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    if: >
+      ( github.event_name == 'pull_request' && github.event.label.name == 'New Browser Test Expectations' ) ||
+      ( github.event.issue.pull_request &&
+        github.event_name == 'issue_comment' &&
+        (
+          github.event.comment.author_association == 'OWNER' ||
+          github.event.comment.author_association == 'MEMBER' ||
+          github.event.comment.author_association == 'COLLABORATOR'
+        ) &&
+        startsWith(github.event.comment.body, '/update-playwright') )
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
+      pr-number: ${{ steps.pr-info.outputs.pr-number }}
+      branch: ${{ steps.pr-info.outputs.branch }}
+      comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
+    steps:
+      - name: Get PR info
+        id: pr-info
+        run: |
+          echo "pr-number=${{ github.event.number || github.event.issue.number }}" >> $GITHUB_OUTPUT
+          echo "branch=$(gh pr view ${{ github.event.number || github.event.issue.number }} --repo ${{ github.repository }} --json headRefName --jq '.headRefName')" >> $GITHUB_OUTPUT
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Find Update Comment
+        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
+        id: "find-update-comment"
+        with:
+          issue-number: ${{ steps.pr-info.outputs.pr-number }}
+          comment-author: "github-actions[bot]"
+          body-includes: "Updating Playwright Expectations"
+
+      - name: Add Starting Reaction
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
+        with:
+          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
+          issue-number: ${{ steps.pr-info.outputs.pr-number }}
+          body: |
+            Updating Playwright Expectations
+          edit-mode: replace
+          reactions: eyes
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ steps.pr-info.outputs.branch }}
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+        with:
+          include_build_step: true
+      # Save expensive build artifacts (Python env, built frontend, node_modules)
+      # Source code will be checked out fresh in sharded jobs
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
+      - name: Save cache
+        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          path: |
+            ComfyUI
+            dist
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+
+  # Sharded snapshot updates
+  update-snapshots-sharded:
+    needs: setup
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    steps:
+      # Checkout source code fresh (not cached)
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ needs.setup.outputs.branch }}
+
+      # Restore expensive build artifacts from setup job
+      - name: Restore cached artifacts
+        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          fail-on-cache-miss: true
+          path: |
+            ComfyUI
+            dist
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - name: Setup ComfyUI server (from cache)
+        uses: ./.github/actions/setup-comfyui-server
+        with:
+          launch_server: true
+
+      - name: Setup nodejs, pnpm, reuse built frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
+
+      # Run sharded tests with snapshot updates
+      - name: Update snapshots (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+        id: playwright-tests
+        run: pnpm exec playwright test --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        continue-on-error: true
+
+      # Identify and stage only changed snapshot files
+      - name: Stage changed snapshot files
+        id: changed-snapshots
+        run: |
+          echo "=========================================="
+          echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
+          echo "=========================================="
+          
+          # Get list of changed snapshot files
+          changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
+          
+          if [ -z "$changed_files" ]; then
+            echo "No snapshot changes in this shard"
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+          
+          echo "✓ Found changed files:"
+          echo "$changed_files"
+          file_count=$(echo "$changed_files" | wc -l)
+          echo "Count: $file_count"
+          echo "has-changes=true" >> $GITHUB_OUTPUT
+          echo ""
+          
+          # Create staging directory
+          mkdir -p /tmp/changed_snapshots_shard
+          
+          # Copy only changed files, preserving directory structure
+          # Strip 'browser_tests/' prefix to avoid double nesting
+          echo "Copying changed files to staging directory..."
+          while IFS= read -r file; do
+            # Remove 'browser_tests/' prefix
+            file_without_prefix="${file#browser_tests/}"
+            # Create parent directories
+            mkdir -p "/tmp/changed_snapshots_shard/$(dirname "$file_without_prefix")"
+            # Copy file
+            cp "$file" "/tmp/changed_snapshots_shard/$file_without_prefix"
+            echo "  → $file_without_prefix"
+          done <<< "$changed_files"
+          
+          echo ""
+          echo "Staged files for upload:"
+          find /tmp/changed_snapshots_shard -type f
+
+      # Upload ONLY the changed files from this shard
+      - name: Upload changed snapshots
+        uses: actions/upload-artifact@v4
+        if: steps.changed-snapshots.outputs.has-changes == 'true'
+        with:
+          name: snapshots-shard-${{ matrix.shardIndex }}
+          path: /tmp/changed_snapshots_shard/
+          retention-days: 1
+
+      - name: Upload test report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-shard-${{ matrix.shardIndex }}
+          path: ./playwright-report/
+          retention-days: 30
+
+  # Merge snapshots and commit
+  merge-and-commit:
+    needs: [setup, update-snapshots-sharded]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ needs.setup.outputs.branch }}
+
+      # Download all changed snapshot files from shards
+      - name: Download snapshot artifacts
+        uses: actions/download-artifact@v4
+        with:
+          pattern: snapshots-shard-*
+          path: ./downloaded-snapshots
+          merge-multiple: false
+
+      - name: List downloaded files
+        run: |
+          echo "=========================================="
+          echo "DOWNLOADED SNAPSHOT FILES"
+          echo "=========================================="
+          find ./downloaded-snapshots -type f
+          echo ""
+          echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
+
+      # Merge only the changed files into browser_tests
+      - name: Merge changed snapshots
+        run: |
+          set -euo pipefail
+
+          echo "=========================================="
+          echo "MERGING CHANGED SNAPSHOTS"
+          echo "=========================================="
+
+          # Verify target directory exists
+          if [ ! -d "browser_tests" ]; then
+            echo "::error::Target directory 'browser_tests' does not exist"
+            exit 1
+          fi
+
+          merged_count=0
+
+          # For each shard's changed files, copy them directly
+          for shard_dir in ./downloaded-snapshots/snapshots-shard-*/; do
+            if [ ! -d "$shard_dir" ]; then
+              continue
+            fi
+
+            shard_name=$(basename "$shard_dir")
+            file_count=$(find "$shard_dir" -type f | wc -l)
+            
+            if [ "$file_count" -eq 0 ]; then
+              echo "  $shard_name: no files"
+              continue
+            fi
+
+            echo "Processing $shard_name ($file_count file(s))..."
+            
+            # Copy files directly, preserving directory structure
+            # Since files are already in correct structure (no browser_tests/ prefix), just copy them all
+            cp -v -r "$shard_dir"* browser_tests/ 2>&1 | sed 's/^/  /'
+            
+            merged_count=$((merged_count + 1))
+            echo "  ✓ Merged"
+            echo ""
+          done
+
+          echo "=========================================="
+          echo "MERGE COMPLETE"
+          echo "=========================================="
+          echo "Shards merged: $merged_count"
+
+      - name: Show changes
+        run: |
+          echo "=========================================="
+          echo "CHANGES SUMMARY"
+          echo "=========================================="
+          echo ""
+          echo "Changed files in browser_tests:"
+          git diff --name-only browser_tests/ | head -20 || echo "No changes"
+          echo ""
+          echo "Total changes:"
+          git diff --name-only browser_tests/ | wc -l || echo "0"
+
+      - name: Commit updated expectations
+        id: commit
+        run: |
+          git config --global user.name 'github-actions'
+          git config --global user.email 'github-actions@github.com'
+          
+          if git diff --quiet browser_tests/; then
+            echo "No changes to commit"
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+          
+          echo "=========================================="
+          echo "COMMITTING CHANGES"
+          echo "=========================================="
+          
+          echo "has-changes=true" >> $GITHUB_OUTPUT
+          
+          git add browser_tests/
+          git commit -m "[automated] Update test expectations"
+          
+          echo "Pushing to ${{ needs.setup.outputs.branch }}..."
+          git push origin ${{ needs.setup.outputs.branch }}
+          
+          echo "✓ Commit and push successful"
+
+      - name: Add Done Reaction
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
+        if: github.event_name == 'issue_comment' && steps.commit.outputs.has-changes == 'true'
+        with:
+          comment-id: ${{ needs.setup.outputs.comment-id }}
+          issue-number: ${{ needs.setup.outputs.pr-number }}
+          reactions: +1
+          reactions-edit-mode: replace
+
+      - name: Remove New Browser Test Expectations label
+        if: always() && github.event_name == 'pull_request'
+        run: gh pr edit ${{ needs.setup.outputs.pr-number }} --remove-label "New Browser Test Expectations"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/.github/workflows/publish-desktop-ui.yaml b/.github/workflows/publish-desktop-ui.yaml
index 92324d2f5..d2741d792 100644
--- a/.github/workflows/publish-desktop-ui.yaml
+++ b/.github/workflows/publish-desktop-ui.yaml
@@ -44,6 +44,7 @@ jobs:
       contents: read
     env:
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+      ENABLE_MINIFY: 'true'
     steps:
       - name: Validate inputs
         env:
@@ -160,20 +161,6 @@ jobs:
           echo "publish_dir=$PUBLISH_DIR" >> "$GITHUB_OUTPUT"
           echo "name=$NAME" >> "$GITHUB_OUTPUT"
 
-      - name: Pack (preview only)
-        shell: bash
-        working-directory: ${{ steps.pkg.outputs.publish_dir }}
-        run: |
-          set -euo pipefail
-          npm pack --json | tee pack-result.json
-
-      - name: Upload package tarball artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: desktop-ui-npm-tarball-${{ inputs.version }}
-          path: ${{ steps.pkg.outputs.publish_dir }}/*.tgz
-          if-no-files-found: error
-
       - name: Check if version already on npm
         id: check_npm
         env:
diff --git a/.github/workflows/create-release-branch.yaml b/.github/workflows/release-branch-create.yaml
similarity index 59%
rename from .github/workflows/create-release-branch.yaml
rename to .github/workflows/release-branch-create.yaml
index 7891a845d..434100ff3 100644
--- a/.github/workflows/create-release-branch.yaml
+++ b/.github/workflows/release-branch-create.yaml
@@ -1,4 +1,4 @@
-name: Create Release Branch
+name: Release Branch Create
 
 on:
   pull_request:
@@ -69,6 +69,9 @@ jobs:
           echo "prev_version=$PREV_VERSION" >> $GITHUB_OUTPUT
           echo "prev_minor=$PREV_MINOR" >> $GITHUB_OUTPUT
 
+          BASE_COMMIT=$(git rev-parse HEAD)
+          echo "base_commit=$BASE_COMMIT" >> $GITHUB_OUTPUT
+
           # Get previous major version for comparison
           PREV_MAJOR=$(echo $PREV_VERSION | cut -d. -f1)
 
@@ -87,13 +90,13 @@ jobs:
           elif [[ "$MAJOR" -gt "$PREV_MAJOR" && "$MINOR" == "0" && "$PATCH" == "0" ]]; then
             # Major version bump (e.g., 1.99.x → 2.0.0)
             echo "is_minor_bump=true" >> $GITHUB_OUTPUT
-            BRANCH_NAME="core/${PREV_MAJOR}.${PREV_MINOR}"
-            echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
+            BRANCH_BASE="${PREV_MAJOR}.${PREV_MINOR}"
+            echo "branch_base=$BRANCH_BASE" >> $GITHUB_OUTPUT
           elif [[ "$MAJOR" == "$PREV_MAJOR" && "$MINOR" -gt "$PREV_MINOR" && "$PATCH" == "0" ]]; then
             # Minor version bump (e.g., 1.23.x → 1.24.0)
             echo "is_minor_bump=true" >> $GITHUB_OUTPUT
-            BRANCH_NAME="core/${MAJOR}.${PREV_MINOR}"
-            echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
+            BRANCH_BASE="${MAJOR}.${PREV_MINOR}"
+            echo "branch_base=$BRANCH_BASE" >> $GITHUB_OUTPUT
           else
             echo "is_minor_bump=false" >> $GITHUB_OUTPUT
           fi
@@ -101,64 +104,97 @@ jobs:
           # Return to main branch
           git checkout main
 
-      - name: Create release branch
+      - name: Create release branches
+        id: create_branches
         if: steps.check_version.outputs.is_minor_bump == 'true'
         run: |
-          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
+          BRANCH_BASE="${{ steps.check_version.outputs.branch_base }}"
+          PREV_VERSION="${{ steps.check_version.outputs.prev_version }}"
 
-          # Check if branch already exists
-          if git ls-remote --heads origin "$BRANCH_NAME" | grep -q "$BRANCH_NAME"; then
-            echo "⚠️  Branch $BRANCH_NAME already exists, skipping creation"
-            echo "branch_exists=true" >> $GITHUB_ENV
-            exit 0
-          else
-            echo "branch_exists=false" >> $GITHUB_ENV
+          if [[ -z "$BRANCH_BASE" ]]; then
+            echo "::error::Branch base not set; unable to determine release branches"
+            exit 1
           fi
 
-          # Create branch from the commit BEFORE the version bump
-          # This ensures the release branch has the previous minor version
-          git checkout -b "$BRANCH_NAME" HEAD^1
+          BASE_COMMIT="${{ steps.check_version.outputs.base_commit }}"
 
-          # Push the new branch
-          git push origin "$BRANCH_NAME"
+          if [[ -z "$BASE_COMMIT" ]]; then
+            echo "::error::Base commit not provided; cannot create release branches"
+            exit 1
+          fi
 
-          echo "✅ Created release branch: $BRANCH_NAME"
-          echo "This branch is now in feature freeze and will only receive:"
-          echo "- Bug fixes"
-          echo "- Critical security patches"
-          echo "- Documentation updates"
+          RESULTS_FILE=$(mktemp)
+          trap 'rm -f "$RESULTS_FILE"' EXIT
 
+          for PREFIX in core cloud; do
+            BRANCH_NAME="${PREFIX}/${BRANCH_BASE}"
+
+            if git ls-remote --exit-code --heads origin \
+              "$BRANCH_NAME" >/dev/null 2>&1; then
+              echo "⚠️  Branch $BRANCH_NAME already exists"
+              echo "ℹ️  Skipping creation for $BRANCH_NAME"
+              STATUS="exists"
+            else
+              # Create branch from the commit BEFORE the version bump
+              if ! git push origin "$BASE_COMMIT:refs/heads/$BRANCH_NAME"; then
+                echo "::error::Failed to push release branch $BRANCH_NAME"
+                exit 1
+              fi
+              echo "✅ Created release branch: $BRANCH_NAME"
+              STATUS="created"
+            fi
+
+            echo "$BRANCH_NAME|$STATUS|$PREV_VERSION" >> "$RESULTS_FILE"
+          done
+
+          {
+            echo "results<<'EOF'"
+            cat "$RESULTS_FILE"
+            echo "EOF"
+          } >> $GITHUB_OUTPUT
 
       - name: Post summary
         if: steps.check_version.outputs.is_minor_bump == 'true'
         run: |
-          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
-          PREV_VERSION="${{ steps.check_version.outputs.prev_version }}"
           CURRENT_VERSION="${{ steps.check_version.outputs.current_version }}"
+          RESULTS="${{ steps.create_branches.outputs.results }}"
 
-          if [[ "${{ env.branch_exists }}" == "true" ]]; then
+          if [[ -z "$RESULTS" ]]; then
             cat >> $GITHUB_STEP_SUMMARY << EOF
-          ## 🌿 Release Branch Already Exists
+          ## 🌿 Release Branch Summary
 
-          The release branch for the previous minor version already exists:
-          EOF
-          else
-            cat >> $GITHUB_STEP_SUMMARY << EOF
-          ## 🌿 Release Branch Created
-
-          A new release branch has been created for the previous minor version:
+          Release branch creation skipped; no eligible branches were found.
           EOF
+            exit 0
           fi
 
           cat >> $GITHUB_STEP_SUMMARY << EOF
+          ## 🌿 Release Branch Summary
 
-          - **Branch**: \`$BRANCH_NAME\`
-          - **Version**: \`$PREV_VERSION\` (feature frozen)
           - **Main branch**: \`$CURRENT_VERSION\` (active development)
 
+          ### Branch Status
+          EOF
+
+          while IFS='|' read -r BRANCH STATUS PREV_VERSION; do
+            if [[ "$STATUS" == "created" ]]; then
+              cat >> $GITHUB_STEP_SUMMARY << EOF
+
+          - \`$BRANCH\` created from version \`$PREV_VERSION\`
+          EOF
+            else
+              cat >> $GITHUB_STEP_SUMMARY << EOF
+
+          - \`$BRANCH\` already existed (based on version \`$PREV_VERSION\`)
+          EOF
+            fi
+          done <<< "$RESULTS"
+
+          cat >> $GITHUB_STEP_SUMMARY << EOF
+
           ### Branch Policy
 
-          The \`$BRANCH_NAME\` branch is now in **feature freeze** and will only accept:
+          Release branches are feature-frozen and only accept:
           - 🐛 Bug fixes
           - 🔒 Security patches
           - 📚 Documentation updates
@@ -167,9 +203,9 @@ jobs:
 
           ### Backporting Changes
 
-          To backport a fix to this release branch:
+          To backport a fix:
           1. Create your fix on \`main\` first
-          2. Cherry-pick to \`$BRANCH_NAME\`
-          3. Create a PR targeting \`$BRANCH_NAME\`
-          4. Use the \`Release\` label on the PR
+          2. Cherry-pick to the target release branch
+          3. Create a PR targeting that branch
+          4. Apply the matching \`core/x.y\` or \`cloud/x.y\` label
           EOF
diff --git a/.github/workflows/create-release-draft.yaml b/.github/workflows/release-draft-create.yaml
similarity index 90%
rename from .github/workflows/create-release-draft.yaml
rename to .github/workflows/release-draft-create.yaml
index c359e3da4..749523104 100644
--- a/.github/workflows/create-release-draft.yaml
+++ b/.github/workflows/release-draft-create.yaml
@@ -1,4 +1,4 @@
-name: Create Release Draft
+name: Release Draft Create
 
 on:
   pull_request:
@@ -28,16 +28,6 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            tsconfig.tsbuildinfo
-          key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            release-tools-cache-${{ runner.os }}-
-
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
@@ -55,6 +45,7 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
+          ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
         run: |
           pnpm install --frozen-lockfile
@@ -126,7 +117,7 @@ jobs:
 
   publish_types:
     needs: build
-    uses: ./.github/workflows/publish-frontend-types.yaml
+    uses: ./.github/workflows/release-npm-types.yaml
     with:
       version: ${{ needs.build.outputs.version }}
       ref: ${{ github.event.pull_request.merge_commit_sha }}
diff --git a/.github/workflows/publish-frontend-types.yaml b/.github/workflows/release-npm-types.yaml
similarity index 99%
rename from .github/workflows/publish-frontend-types.yaml
rename to .github/workflows/release-npm-types.yaml
index 142a22a93..23f0cc016 100644
--- a/.github/workflows/publish-frontend-types.yaml
+++ b/.github/workflows/release-npm-types.yaml
@@ -1,4 +1,4 @@
-name: Publish Frontend Types
+name: Release NPM Types
 
 on:
   workflow_dispatch:
diff --git a/.github/workflows/create-dev-pypi-package.yaml b/.github/workflows/release-pypi-dev.yaml
similarity index 86%
rename from .github/workflows/create-dev-pypi-package.yaml
rename to .github/workflows/release-pypi-dev.yaml
index b592a8371..868321759 100644
--- a/.github/workflows/create-dev-pypi-package.yaml
+++ b/.github/workflows/release-pypi-dev.yaml
@@ -1,4 +1,4 @@
-name: Create Dev PyPI Package
+name: Release PyPI Dev
 
 on:
   workflow_dispatch:
@@ -25,17 +25,6 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            dist
-            tsconfig.tsbuildinfo
-          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            dev-release-tools-cache-${{ runner.os }}-
-
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
@@ -44,6 +33,7 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
+          ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
         run: |
           pnpm install --frozen-lockfile
diff --git a/.github/workflows/version-bump.yaml b/.github/workflows/release-version-bump.yaml
similarity index 63%
rename from .github/workflows/version-bump.yaml
rename to .github/workflows/release-version-bump.yaml
index 4073729db..30254c6aa 100644
--- a/.github/workflows/version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -1,4 +1,5 @@
-name: Version Bump
+name: "Release: Version Bump"
+description: "Manual workflow to increment package version with semantic versioning support"
 
 on:
   workflow_dispatch:
@@ -14,6 +15,11 @@ on:
         required: false
         default: ''
         type: string
+      branch:
+        description: 'Base branch to bump (e.g., main, core/1.29, core/1.30)'
+        required: true
+        default: 'main'
+        type: string
 
 jobs:
   bump-version:
@@ -25,6 +31,24 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
+        with:
+          ref: ${{ github.event.inputs.branch }}
+          fetch-depth: 0
+
+      - name: Validate branch exists
+        run: |
+          BRANCH="${{ github.event.inputs.branch }}"
+          if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
+            echo "❌ Branch '$BRANCH' does not exist"
+            echo ""
+            echo "Available core branches:"
+            git branch -r | grep 'origin/core/' | sed 's/.*origin\//  - /' || echo "  (none found)"
+            echo ""
+            echo "Main branch:"
+            echo "  - main"
+            exit 1
+          fi
+          echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -35,7 +59,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-          cache: 'pnpm'
 
       - name: Bump version
         id: bump-version
@@ -58,7 +81,9 @@ jobs:
           title: ${{ steps.bump-version.outputs.NEW_VERSION }}
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
+
+            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: main
+          base: ${{ github.event.inputs.branch }}
           labels: |
             Release
diff --git a/.github/workflows/update-playwright-expectations.yaml b/.github/workflows/update-playwright-expectations.yaml
deleted file mode 100644
index 61d5051d4..000000000
--- a/.github/workflows/update-playwright-expectations.yaml
+++ /dev/null
@@ -1,108 +0,0 @@
-# Setting test expectation screenshots for Playwright
-name: Update Playwright Expectations
-
-on:
-  pull_request:
-    types: [labeled]
-  issue_comment:
-    types: [created]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    if: >
-      ( github.event_name == 'pull_request' && github.event.label.name == 'New Browser Test Expectations' ) ||
-      ( github.event.issue.pull_request && 
-        github.event_name == 'issue_comment' &&
-        (
-          github.event.comment.author_association == 'OWNER' ||
-          github.event.comment.author_association == 'MEMBER' ||
-          github.event.comment.author_association == 'COLLABORATOR'
-        ) &&
-        startsWith(github.event.comment.body, '/update-playwright') )
-    steps:
-      - name: Find Update Comment
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
-        id: "find-update-comment"
-        with:
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          comment-author: "github-actions[bot]"
-          body-includes: "Updating Playwright Expectations"
-
-      - name: Add Starting Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
-        with:
-          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          body: |
-            Updating Playwright Expectations
-          edit-mode: replace
-          reactions: eyes
-
-      - name: Get Branch SHA
-        id: "get-branch"
-        run: echo ::set-output name=branch::$(gh pr view $PR_NO --repo $REPO --json headRefName --jq '.headRefName')
-        env:
-          REPO: ${{ github.repository }}
-          PR_NO: ${{ github.event.number || github.event.issue.number }}
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Initial Checkout
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ steps.get-branch.outputs.branch }}
-      - name: Setup Frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-      - name: Setup ComfyUI Server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-      - name: Run Playwright tests and update snapshots
-        id: playwright-tests
-        run: pnpm exec playwright test --update-snapshots
-        continue-on-error: true
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: playwright-report
-          path: ./playwright-report/
-          retention-days: 30
-      - name: Debugging info
-        run: |
-          echo "PR: ${{ github.event.issue.number }}"
-          echo "Branch: ${{ steps.get-branch.outputs.branch }}"
-          git status
-      - name: Commit updated expectations
-        run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-          git add browser_tests
-          if git diff --cached --quiet; then
-            echo "No changes to commit"
-          else
-            git commit -m "[automated] Update test expectations"
-            git push origin ${{ steps.get-branch.outputs.branch }}
-          fi
-
-      - name: Add Done Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
-        if: github.event_name == 'issue_comment'
-        with:
-          comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
-          issue-number: ${{ github.event.number || github.event.issue.number }}
-          reactions: +1
-          reactions-edit-mode: replace
-
-      - name: Remove New Browser Test Expectations label
-        if: always() && github.event_name == 'pull_request'
-        run: gh pr edit ${{ github.event.pull_request.number }} --remove-label "New Browser Test Expectations"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/version-bump-desktop-ui.yaml b/.github/workflows/version-bump-desktop-ui.yaml
index 6d5d01c67..123cdbd9b 100644
--- a/.github/workflows/version-bump-desktop-ui.yaml
+++ b/.github/workflows/version-bump-desktop-ui.yaml
@@ -14,6 +14,11 @@ on:
         required: false
         default: ''
         type: string
+      branch:
+        description: 'Base branch to bump (e.g., main, core/1.29, core/1.30)'
+        required: true
+        default: 'main'
+        type: string
 
 jobs:
   bump-version-desktop-ui:
@@ -26,8 +31,25 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
+          ref: ${{ github.event.inputs.branch }}
+          fetch-depth: 0
           persist-credentials: false
 
+      - name: Validate branch exists
+        run: |
+          BRANCH="${{ github.event.inputs.branch }}"
+          if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
+            echo "❌ Branch '$BRANCH' does not exist"
+            echo ""
+            echo "Available core branches:"
+            git branch -r | grep 'origin/core/' | sed 's/.*origin\//  - /' || echo "  (none found)"
+            echo ""
+            echo "Main branch:"
+            echo "  - main"
+            exit 1
+          fi
+          echo "✅ Branch '$BRANCH' exists"
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
@@ -64,8 +86,10 @@ jobs:
           title: desktop-ui ${{ steps.bump-version.outputs.NEW_VERSION }}
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment for @comfyorg/desktop-ui to ${{ steps.bump-version.outputs.NEW_VERSION }}
+
+            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: desktop-ui-version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: main
+          base: ${{ github.event.inputs.branch }}
           labels: |
             Release
 
diff --git a/.github/workflows/weekly-docs-check.yaml b/.github/workflows/weekly-docs-check.yaml
new file mode 100644
index 000000000..c67e4adcb
--- /dev/null
+++ b/.github/workflows/weekly-docs-check.yaml
@@ -0,0 +1,144 @@
+name: "Weekly Documentation Check"
+description: "Automated weekly documentation accuracy check and update via Claude"
+
+permissions:
+  contents: write
+  pull-requests: write
+  id-token: write
+
+on:
+  schedule:
+    # Run every Monday at 9 AM UTC
+    - cron: '0 9 * * 1'
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
+jobs:
+  docs-check:
+    runs-on: ubuntu-latest
+    timeout-minutes: 45
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+          ref: main
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Install dependencies for analysis tools
+        run: |
+          # Check if packages are already available locally
+          if ! pnpm list typescript @vue/compiler-sfc >/dev/null 2>&1; then
+            echo "Installing TypeScript and Vue compiler globally..."
+            pnpm install -g typescript @vue/compiler-sfc
+          else
+            echo "TypeScript and Vue compiler already available locally"
+          fi
+
+      - name: Run Claude Documentation Review
+        uses: anthropics/claude-code-action@v1.0.6
+        with:
+          prompt: |
+            Is all documentation still 100% accurate?
+
+            INSTRUCTIONS:
+            1. Fact-check all documentation against the current codebase
+            2. Look for:
+               - Outdated API references
+               - Deprecated functions or components still documented
+               - Missing documentation for new features
+               - Incorrect code examples
+               - Broken internal references
+               - Configuration examples that no longer work
+               - Documentation that contradicts actual implementation
+            3. Update any inaccurate or outdated documentation
+            4. Add documentation for significant undocumented features
+            5. Ensure all code examples are valid and tested against current code
+
+            Focus on these key areas:
+            - docs/**/*.md (all documentation files)
+            - CLAUDE.md (project guidelines)
+            - README.md files throughout the repository
+            - .claude/commands/*.md (Claude command documentation)
+
+            Make changes directly to the documentation files as needed.
+            DO NOT modify any source code files unless absolutely necessary for documentation accuracy.
+
+            After making all changes, create a comprehensive PR message summary:
+            1. Write a detailed PR body to /tmp/pr-body-${{ github.run_id }}.md in markdown format
+            2. Include:
+               - ## Summary section with bullet points of what was changed
+               - ## Changes Made section with details organized by category
+               - ## Review Notes section with any important context
+            3. Be specific about which files were updated and why
+            4. If no changes were needed, write a brief message stating documentation is up to date
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          claude_args: "--max-turns 256 --allowedTools 'Bash(git status),Bash(git diff),Bash(git log),Bash(pnpm:*),Bash(npm:*),Bash(node:*),Bash(tsc:*),Bash(echo:*),Read,Write,Edit,Glob,Grep'"
+        continue-on-error: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Check for changes
+        id: check_changes
+        run: |
+          if git diff --quiet && git diff --cached --quiet; then
+            echo "has_changes=false" >> $GITHUB_OUTPUT
+            echo "No documentation changes needed"
+          else
+            echo "has_changes=true" >> $GITHUB_OUTPUT
+            echo "Documentation changes detected"
+          fi
+
+      - name: Create default PR body if not generated
+        if: steps.check_changes.outputs.has_changes == 'true'
+        run: |
+          if [ ! -f /tmp/pr-body-${{ github.run_id }}.md ]; then
+            cat > /tmp/pr-body-${{ github.run_id }}.md <<'EOF'
+          ## Automated Documentation Review
+
+          This PR contains documentation updates identified by the weekly automated review.
+
+          ### Review Process
+          - Automated fact-checking against current codebase
+          - Verification of code examples and API references
+          - Detection of outdated or missing documentation
+
+          ### What was checked
+          - All markdown documentation in `docs/`
+          - Project guidelines in `CLAUDE.md`
+          - README files throughout the repository
+          - Claude command documentation in `.claude/commands/`
+
+          **Note**: This is an automated PR. Please review all changes carefully before merging.
+
+          🤖 Generated by weekly documentation check workflow
+          EOF
+          fi
+
+      - name: Create or Update Pull Request
+        if: steps.check_changes.outputs.has_changes == 'true'
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: 'docs: weekly documentation accuracy update'
+          branch: docs/weekly-update
+          delete-branch: true
+          title: 'docs: Weekly Documentation Update'
+          body-path: /tmp/pr-body-${{ github.run_id }}.md
+          labels: |
+            documentation
+            automated
+          draft: true
diff --git a/.gitignore b/.gitignore
index 8f69ce164..3e400ba39 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ yarn.lock
 .stylelintcache
 
 node_modules
+.pnpm-store
 dist
 dist-ssr
 *.local
@@ -78,7 +79,7 @@ templates_repo/
 vite.config.mts.timestamp-*.mjs
 
 # Linux core dumps
-./core
+/core
 
 *storybook.log
 storybook-static
@@ -92,3 +93,6 @@ storybook-static
 .github/instructions/nx.instructions.md
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
+
+# Weekly docs check output
+/output.txt
diff --git a/.husky/pre-push b/.husky/pre-push
index ec1fc17d0..dcb556451 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
 
 # Run Knip with cache via package script
-pnpm knip
+pnpm knip 1>&2
 
diff --git a/.prettierrc b/.prettierrc
index 07c5ccc22..aa43a43ac 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,12 +7,5 @@
   "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,
-  "overrides": [
-    {
-      "files": "*.{js,cjs,mjs,ts,cts,mts,tsx,vue}",
-      "options": {
-        "plugins": ["@trivago/prettier-plugin-sort-imports"]
-      }
-    }
-  ]
+  "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"]
 }
diff --git a/CLAUDE.md b/CLAUDE.md
index 0b187fbfc..4866c2dce 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -62,6 +62,11 @@ Key Nx features:
 
 ## Project Philosophy
 
+- Follow good software engineering principles
+  - YAGNI
+  - AHA
+  - DRY
+  - SOLID
 - Clean, stable public APIs
 - Domain-driven design
 - Thousands of users and extensions
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f1c9341d5..6c84779ff 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -43,7 +43,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
    ```
 
 3. Configure environment (optional):
-   Create a `.env` file in the project root based on the provided [.env.example](.env.example) file.
+   Create a `.env` file in the project root based on the provided [.env_example](.env_example) file.
 
    **Note about ports**: By default, the dev server expects the ComfyUI backend at `localhost:8188`. If your ComfyUI instance runs on a different port, update this in your `.env` file.
 
@@ -325,4 +325,4 @@ If you have questions about contributing:
 - Ask in our [Discord](https://discord.com/invite/comfyorg)
 - Open a new issue for clarification
 
-Thank you for contributing to ComfyUI Frontend!
\ No newline at end of file
+Thank you for contributing to ComfyUI Frontend!
diff --git a/apps/desktop-ui/index.html b/apps/desktop-ui/index.html
index 5cb34ffc2..3020c67bf 100644
--- a/apps/desktop-ui/index.html
+++ b/apps/desktop-ui/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>ComfyUI Desktop</title>
+    <title>ComfyUI</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
   </head>
   <body>
diff --git a/apps/desktop-ui/package.json b/apps/desktop-ui/package.json
index 686d35233..0aa47e320 100644
--- a/apps/desktop-ui/package.json
+++ b/apps/desktop-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/desktop-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "nx": {
     "tags": [
diff --git a/apps/desktop-ui/src/components/install/GpuPicker.vue b/apps/desktop-ui/src/components/install/GpuPicker.vue
index 0a8cac0a9..98dddb762 100644
--- a/apps/desktop-ui/src/components/install/GpuPicker.vue
+++ b/apps/desktop-ui/src/components/install/GpuPicker.vue
@@ -1,17 +1,17 @@
 <template>
   <div
-    class="grid grid-rows-[1fr_auto_auto_1fr] w-full max-w-3xl mx-auto h-[40rem] select-none"
+    class="mx-auto grid h-[40rem] w-full max-w-3xl grid-rows-[1fr_auto_auto_1fr] select-none"
   >
-    <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+    <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
       {{ $t('install.gpuPicker.title') }}
     </h2>
 
     <!-- GPU Selection buttons - takes up remaining space and centers content -->
-    <div class="flex-1 flex gap-8 justify-center items-center">
+    <div class="flex flex-1 items-center justify-center gap-8">
       <!-- Apple Metal / NVIDIA -->
       <HardwareOption
         v-if="platform === 'darwin'"
-        :image-path="'/assets/images/apple-mps-logo.png'"
+        :image-path="'./assets/images/apple-mps-logo.png'"
         placeholder-text="Apple Metal"
         subtitle="Apple Metal"
         :value="'mps'"
@@ -21,7 +21,7 @@
       />
       <HardwareOption
         v-else
-        :image-path="'/assets/images/nvidia-logo-square.jpg'"
+        :image-path="'./assets/images/nvidia-logo-square.jpg'"
         placeholder-text="NVIDIA"
         :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
         :value="'nvidia'"
@@ -47,17 +47,17 @@
       />
     </div>
 
-    <div class="pt-12 px-24 h-16">
+    <div class="h-16 px-24 pt-12">
       <div v-show="showRecommendedBadge" class="flex items-center gap-2">
         <Tag
           :value="$t('install.gpuPicker.recommended')"
-          class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
+          class="rounded-full bg-neutral-300 px-2 py-[1px] text-sm font-bold text-neutral-900"
         />
-        <i class="icon-[lucide--badge-check] text-neutral-300 text-lg" />
+        <i class="icon-[lucide--badge-check] text-lg text-neutral-300" />
       </div>
     </div>
 
-    <div class="text-neutral-300 px-24">
+    <div class="px-24 text-neutral-300">
       <p v-show="descriptionText" class="leading-relaxed">
         {{ descriptionText }}
       </p>
diff --git a/apps/desktop-ui/src/components/maintenance/TaskCard.vue b/apps/desktop-ui/src/components/maintenance/TaskCard.vue
index 1287169ce..e7d24d100 100644
--- a/apps/desktop-ui/src/components/maintenance/TaskCard.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskCard.vue
@@ -1,23 +1,23 @@
 <template>
   <div
-    class="task-div max-w-48 min-h-52 grid relative"
+    class="task-div relative grid min-h-52 max-w-48"
     :class="{ 'opacity-75': isLoading }"
   >
     <Card
-      class="max-w-48 relative h-full overflow-hidden"
+      class="relative h-full max-w-48 overflow-hidden"
       :class="{ 'opacity-65': runner.state !== 'error' }"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
         <i
           v-if="runner.state === 'error'"
-          class="pi pi-exclamation-triangle text-red-500 absolute m-2 top-0 -right-14 opacity-15"
+          class="pi pi-exclamation-triangle absolute top-0 -right-14 m-2 text-red-500 opacity-15"
           style="font-size: 10rem"
         />
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="object-contain w-full h-full opacity-25 pt-4 px-4"
+          class="h-full w-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -27,7 +27,7 @@
         {{ description }}
       </template>
       <template #footer>
-        <div class="flex gap-4 mt-1">
+        <div class="mt-1 flex gap-4">
           <Button
             :icon="task.button?.icon"
             :label="task.button?.text"
@@ -73,7 +73,7 @@ defineEmits<{
 // Bindings
 const description = computed(() =>
   runner.value.state === 'error'
-    ? props.task.errorDescription ?? props.task.shortDescription
+    ? (props.task.errorDescription ?? props.task.shortDescription)
     : props.task.shortDescription
 )
 
diff --git a/apps/desktop-ui/src/i18n.ts b/apps/desktop-ui/src/i18n.ts
index f9d6eab37..5f0739db7 100644
--- a/apps/desktop-ui/src/i18n.ts
+++ b/apps/desktop-ui/src/i18n.ts
@@ -1,67 +1,163 @@
-import arCommands from '@frontend-locales/ar/commands.json' with { type: 'json' }
-import ar from '@frontend-locales/ar/main.json' with { type: 'json' }
-import arNodes from '@frontend-locales/ar/nodeDefs.json' with { type: 'json' }
-import arSettings from '@frontend-locales/ar/settings.json' with { type: 'json' }
+// Import only English locale eagerly as the default/fallback
+// ESLint cannot statically resolve dynamic imports with path aliases (@frontend-locales/*),
+// but these are properly configured in tsconfig.json and resolved by Vite at build time.
+// eslint-disable-next-line import-x/no-unresolved
 import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
+// eslint-disable-next-line import-x/no-unresolved
 import en from '@frontend-locales/en/main.json' with { type: 'json' }
+// eslint-disable-next-line import-x/no-unresolved
 import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
+// eslint-disable-next-line import-x/no-unresolved
 import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
-import esCommands from '@frontend-locales/es/commands.json' with { type: 'json' }
-import es from '@frontend-locales/es/main.json' with { type: 'json' }
-import esNodes from '@frontend-locales/es/nodeDefs.json' with { type: 'json' }
-import esSettings from '@frontend-locales/es/settings.json' with { type: 'json' }
-import frCommands from '@frontend-locales/fr/commands.json' with { type: 'json' }
-import fr from '@frontend-locales/fr/main.json' with { type: 'json' }
-import frNodes from '@frontend-locales/fr/nodeDefs.json' with { type: 'json' }
-import frSettings from '@frontend-locales/fr/settings.json' with { type: 'json' }
-import jaCommands from '@frontend-locales/ja/commands.json' with { type: 'json' }
-import ja from '@frontend-locales/ja/main.json' with { type: 'json' }
-import jaNodes from '@frontend-locales/ja/nodeDefs.json' with { type: 'json' }
-import jaSettings from '@frontend-locales/ja/settings.json' with { type: 'json' }
-import koCommands from '@frontend-locales/ko/commands.json' with { type: 'json' }
-import ko from '@frontend-locales/ko/main.json' with { type: 'json' }
-import koNodes from '@frontend-locales/ko/nodeDefs.json' with { type: 'json' }
-import koSettings from '@frontend-locales/ko/settings.json' with { type: 'json' }
-import ruCommands from '@frontend-locales/ru/commands.json' with { type: 'json' }
-import ru from '@frontend-locales/ru/main.json' with { type: 'json' }
-import ruNodes from '@frontend-locales/ru/nodeDefs.json' with { type: 'json' }
-import ruSettings from '@frontend-locales/ru/settings.json' with { type: 'json' }
-import trCommands from '@frontend-locales/tr/commands.json' with { type: 'json' }
-import tr from '@frontend-locales/tr/main.json' with { type: 'json' }
-import trNodes from '@frontend-locales/tr/nodeDefs.json' with { type: 'json' }
-import trSettings from '@frontend-locales/tr/settings.json' with { type: 'json' }
-import zhTWCommands from '@frontend-locales/zh-TW/commands.json' with { type: 'json' }
-import zhTW from '@frontend-locales/zh-TW/main.json' with { type: 'json' }
-import zhTWNodes from '@frontend-locales/zh-TW/nodeDefs.json' with { type: 'json' }
-import zhTWSettings from '@frontend-locales/zh-TW/settings.json' with { type: 'json' }
-import zhCommands from '@frontend-locales/zh/commands.json' with { type: 'json' }
-import zh from '@frontend-locales/zh/main.json' with { type: 'json' }
-import zhNodes from '@frontend-locales/zh/nodeDefs.json' with { type: 'json' }
-import zhSettings from '@frontend-locales/zh/settings.json' with { type: 'json' }
 import { createI18n } from 'vue-i18n'
 
-function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
+function buildLocale<
+  M extends Record<string, unknown>,
+  N extends Record<string, unknown>,
+  C extends Record<string, unknown>,
+  S extends Record<string, unknown>
+>(main: M, nodes: N, commands: C, settings: S) {
   return {
     ...main,
     nodeDefs: nodes,
     commands: commands,
     settings: settings
-  }
+  } as M & { nodeDefs: N; commands: C; settings: S }
 }
 
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings),
-  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
-  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
-  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
-  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
-  ko: buildLocale(ko, koNodes, koCommands, koSettings),
-  fr: buildLocale(fr, frNodes, frCommands, frSettings),
-  es: buildLocale(es, esNodes, esCommands, esSettings),
-  ar: buildLocale(ar, arNodes, arCommands, arSettings),
-  tr: buildLocale(tr, trNodes, trCommands, trSettings)
+// Locale loader map - dynamically import locales only when needed
+// ESLint cannot statically resolve these dynamic imports, but they are valid at build time
+/* eslint-disable import-x/no-unresolved */
+const localeLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('@frontend-locales/ar/main.json'),
+  es: () => import('@frontend-locales/es/main.json'),
+  fr: () => import('@frontend-locales/fr/main.json'),
+  ja: () => import('@frontend-locales/ja/main.json'),
+  ko: () => import('@frontend-locales/ko/main.json'),
+  ru: () => import('@frontend-locales/ru/main.json'),
+  tr: () => import('@frontend-locales/tr/main.json'),
+  zh: () => import('@frontend-locales/zh/main.json'),
+  'zh-TW': () => import('@frontend-locales/zh-TW/main.json')
 }
 
+const nodeDefsLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('@frontend-locales/ar/nodeDefs.json'),
+  es: () => import('@frontend-locales/es/nodeDefs.json'),
+  fr: () => import('@frontend-locales/fr/nodeDefs.json'),
+  ja: () => import('@frontend-locales/ja/nodeDefs.json'),
+  ko: () => import('@frontend-locales/ko/nodeDefs.json'),
+  ru: () => import('@frontend-locales/ru/nodeDefs.json'),
+  tr: () => import('@frontend-locales/tr/nodeDefs.json'),
+  zh: () => import('@frontend-locales/zh/nodeDefs.json'),
+  'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json')
+}
+
+const commandsLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('@frontend-locales/ar/commands.json'),
+  es: () => import('@frontend-locales/es/commands.json'),
+  fr: () => import('@frontend-locales/fr/commands.json'),
+  ja: () => import('@frontend-locales/ja/commands.json'),
+  ko: () => import('@frontend-locales/ko/commands.json'),
+  ru: () => import('@frontend-locales/ru/commands.json'),
+  tr: () => import('@frontend-locales/tr/commands.json'),
+  zh: () => import('@frontend-locales/zh/commands.json'),
+  'zh-TW': () => import('@frontend-locales/zh-TW/commands.json')
+}
+
+const settingsLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('@frontend-locales/ar/settings.json'),
+  es: () => import('@frontend-locales/es/settings.json'),
+  fr: () => import('@frontend-locales/fr/settings.json'),
+  ja: () => import('@frontend-locales/ja/settings.json'),
+  ko: () => import('@frontend-locales/ko/settings.json'),
+  ru: () => import('@frontend-locales/ru/settings.json'),
+  tr: () => import('@frontend-locales/tr/settings.json'),
+  zh: () => import('@frontend-locales/zh/settings.json'),
+  'zh-TW': () => import('@frontend-locales/zh-TW/settings.json')
+}
+
+// Track which locales have been loaded
+const loadedLocales = new Set<string>(['en'])
+
+// Track locales currently being loaded to prevent race conditions
+const loadingLocales = new Map<string, Promise<void>>()
+
+/**
+ * Dynamically load a locale and its associated files (nodeDefs, commands, settings)
+ */
+export async function loadLocale(locale: string): Promise<void> {
+  if (loadedLocales.has(locale)) {
+    return
+  }
+
+  // If already loading, return the existing promise to prevent duplicate loads
+  const existingLoad = loadingLocales.get(locale)
+  if (existingLoad) {
+    return existingLoad
+  }
+
+  const loader = localeLoaders[locale]
+  const nodeDefsLoader = nodeDefsLoaders[locale]
+  const commandsLoader = commandsLoaders[locale]
+  const settingsLoader = settingsLoaders[locale]
+
+  if (!loader || !nodeDefsLoader || !commandsLoader || !settingsLoader) {
+    console.warn(`Locale "${locale}" is not supported`)
+    return
+  }
+
+  // Create and track the loading promise
+  const loadPromise = (async () => {
+    try {
+      const [main, nodes, commands, settings] = await Promise.all([
+        loader(),
+        nodeDefsLoader(),
+        commandsLoader(),
+        settingsLoader()
+      ])
+
+      const messages = buildLocale(
+        main.default,
+        nodes.default,
+        commands.default,
+        settings.default
+      )
+
+      i18n.global.setLocaleMessage(locale, messages as LocaleMessages)
+      loadedLocales.add(locale)
+    } catch (error) {
+      console.error(`Failed to load locale "${locale}":`, error)
+      throw error
+    } finally {
+      // Clean up the loading promise once complete
+      loadingLocales.delete(locale)
+    }
+  })()
+
+  loadingLocales.set(locale, loadPromise)
+  return loadPromise
+}
+
+// Only include English in the initial bundle
+const messages = {
+  en: buildLocale(en, enNodes, enCommands, enSettings)
+}
+
+// Type for locale messages - inferred from the English locale structure
+type LocaleMessages = typeof messages.en
+
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2
   legacy: false,
diff --git a/apps/desktop-ui/src/views/ServerStartView.vue b/apps/desktop-ui/src/views/ServerStartView.vue
index b7d1f4eac..3dc6cceaa 100644
--- a/apps/desktop-ui/src/views/ServerStartView.vue
+++ b/apps/desktop-ui/src/views/ServerStartView.vue
@@ -66,17 +66,6 @@
               @click="troubleshoot"
             />
           </div>
-
-          <div class="text-center">
-            <button
-              v-if="!terminalVisible"
-              class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-2 mx-auto"
-              @click="terminalVisible = true"
-            >
-              <i class="pi pi-search"></i>
-              {{ $t('serverStart.showTerminal') }}
-            </button>
-          </div>
         </div>
 
         <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
diff --git a/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png b/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
new file mode 100644
index 000000000..4dc0b3f43
Binary files /dev/null and b/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png b/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
new file mode 100644
index 000000000..2676f31eb
Binary files /dev/null and b/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
new file mode 100644
index 000000000..cea542a4f
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
new file mode 100644
index 000000000..1b4771e31
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
new file mode 100644
index 000000000..ed2e63d04
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
new file mode 100644
index 000000000..391dd7637
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
new file mode 100644
index 000000000..4ed230307
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
new file mode 100644
index 000000000..077e34405
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
new file mode 100644
index 000000000..d0235f54b
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
new file mode 100644
index 000000000..e4155c01f
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
new file mode 100644
index 000000000..c5d0151f1
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
new file mode 100644
index 000000000..7b1d91b3d
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
new file mode 100644
index 000000000..26eb49e5c
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
new file mode 100644
index 000000000..94d12be43
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
new file mode 100644
index 000000000..e91d3a5fd
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
new file mode 100644
index 000000000..088ec907c
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
new file mode 100644
index 000000000..6dabeb42e
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
new file mode 100644
index 000000000..e04cb92a7
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
new file mode 100644
index 000000000..6f5e35a1c
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
new file mode 100644
index 000000000..9adde1602
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
new file mode 100644
index 000000000..4cc3ebe2c
Binary files /dev/null and b/browser_tests/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index d46b31a98..8059fb4cb 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -46,6 +46,10 @@ class ComfyMenu {
       .nth(0)
   }
 
+  get buttons() {
+    return this.sideToolbar.locator('.side-bar-button')
+  }
+
   get nodeLibraryTab() {
     this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
     return this._nodeLibraryTab
@@ -1653,7 +1657,8 @@ export const comfyPageFixture = base.extend<{
         'Comfy.userId': userId,
         // Set tutorial completed to true to avoid loading the tutorial workflow.
         'Comfy.TutorialCompleted': true,
-        'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize
+        'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize,
+        'Comfy.VueNodes.AutoScaleLayout': false
       })
     } catch (e) {
       console.error(e)
diff --git a/browser_tests/fixtures/components/Topbar.ts b/browser_tests/fixtures/components/Topbar.ts
index 6d0cd1fb3..804793963 100644
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -7,7 +7,7 @@ export class Topbar {
 
   constructor(public readonly page: Page) {
     this.menuLocator = page.locator('.comfy-command-menu')
-    this.menuTrigger = page.locator('.comfyui-logo-wrapper')
+    this.menuTrigger = page.locator('.comfy-menu-button-wrapper')
   }
 
   async getTabNames(): Promise<string[]> {
@@ -105,7 +105,7 @@ export class Topbar {
    * Close the topbar menu by clicking outside
    */
   async closeTopbarMenu() {
-    await this.page.locator('body').click({ position: { x: 10, y: 10 } })
+    await this.page.locator('body').click({ position: { x: 300, y: 10 } })
     await expect(this.menuLocator).not.toBeVisible()
   }
 
diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts
index 0449d05e4..5533fcaaa 100644
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -503,7 +503,7 @@ export class NodeReference {
       for (const position of clickPositions) {
         // Clear any selection first
         await this.comfyPage.canvas.click({
-          position: { x: 50, y: 50 },
+          position: { x: 250, y: 250 },
           force: true
         })
         await this.comfyPage.nextFrame()
diff --git a/browser_tests/helpers/actionbar.ts b/browser_tests/helpers/actionbar.ts
index f37de855a..89d5e73ad 100644
--- a/browser_tests/helpers/actionbar.ts
+++ b/browser_tests/helpers/actionbar.ts
@@ -13,7 +13,7 @@ export class ComfyActionbar {
 
   async isDocked() {
     const className = await this.root.getAttribute('class')
-    return className?.includes('is-docked') ?? false
+    return className?.includes('static') ?? false
   }
 }
 
diff --git a/browser_tests/tests/actionbar.spec.ts b/browser_tests/tests/actionbar.spec.ts
index b23e4466d..bd086b461 100644
--- a/browser_tests/tests/actionbar.spec.ts
+++ b/browser_tests/tests/actionbar.spec.ts
@@ -116,9 +116,10 @@ test.describe('Actionbar', () => {
   test('Can dock actionbar into top menu', async ({ comfyPage }) => {
     await comfyPage.page.dragAndDrop(
       '.actionbar .drag-handle',
-      '.comfyui-menu',
+      '.actionbar-container',
       {
-        targetPosition: { x: 0, y: 0 }
+        targetPosition: { x: 50, y: 20 },
+        force: true
       }
     )
     expect(await comfyPage.actionbar.isDocked()).toBe(true)
diff --git a/browser_tests/tests/dialog.spec.ts b/browser_tests/tests/dialog.spec.ts
index 7459acf58..9ccd4cd67 100644
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -301,7 +301,9 @@ test.describe('Settings', () => {
 })
 
 test.describe('Support', () => {
-  test('Should open external zendesk link', async ({ comfyPage }) => {
+  test('Should open external zendesk link with OSS tag', async ({
+    comfyPage
+  }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     const pagePromise = comfyPage.page.context().waitForEvent('page')
     await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
@@ -309,6 +311,10 @@ test.describe('Support', () => {
 
     await newPage.waitForLoadState('networkidle')
     await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
+
+    const url = new URL(newPage.url())
+    expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
+
     await newPage.close()
   })
 })
diff --git a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
index cb8e7c17f..765aa1126 100644
Binary files a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png and b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
index 382a7d03f..ed1732e67 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
index 8a87725f3..16f7fcc64 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png differ
diff --git a/browser_tests/tests/groupNode.spec.ts b/browser_tests/tests/groupNode.spec.ts
index 9a2310231..5bbda7b03 100644
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -233,6 +233,7 @@ test.describe('Group Node', () => {
     }
 
     const isRegisteredNodeDefStore = async (comfyPage: ComfyPage) => {
+      await comfyPage.menu.nodeLibraryTab.open()
       const groupNodesFolderCt = await comfyPage.menu.nodeLibraryTab
         .getFolder(GROUP_NODE_CATEGORY)
         .count()
@@ -253,8 +254,6 @@ test.describe('Group Node', () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.loadWorkflow(WORKFLOW_NAME)
-      await comfyPage.menu.nodeLibraryTab.open()
-
       groupNode = await comfyPage.getFirstNodeRef()
       if (!groupNode)
         throw new Error(`Group node not found in workflow ${WORKFLOW_NAME}`)
diff --git a/browser_tests/tests/interaction.spec.ts b/browser_tests/tests/interaction.spec.ts
index d1afc696f..454b56ccf 100644
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -792,10 +792,19 @@ test.describe('Viewport settings', () => {
 
     await comfyPage.menu.topbar.saveWorkflow('Workflow A')
     await comfyPage.nextFrame()
-    const screenshotA = (await comfyPage.canvas.screenshot()).toString('base64')
 
     // Save workflow as a new file, then zoom out before screen shot
     await comfyPage.menu.topbar.saveWorkflowAs('Workflow B')
+
+    await comfyPage.nextFrame()
+    const tabA = comfyPage.menu.topbar.getWorkflowTab('Workflow A')
+    await changeTab(tabA)
+
+    const screenshotA = (await comfyPage.canvas.screenshot()).toString('base64')
+
+    const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
+    await changeTab(tabB)
+
     await comfyMouse.move(comfyPage.emptySpace)
     for (let i = 0; i < 4; i++) {
       await comfyMouse.wheel(0, 60)
@@ -807,9 +816,6 @@ test.describe('Viewport settings', () => {
     // Ensure that the screenshots are different due to zoom level
     expect(screenshotB).not.toBe(screenshotA)
 
-    const tabA = comfyPage.menu.topbar.getWorkflowTab('Workflow A')
-    const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
-
     // Go back to Workflow A
     await changeTab(tabA)
     expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png
index eb4903bf8..f58f43895 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png
index 8f347b607..1d8908e17 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/tests/menu.spec.ts b/browser_tests/tests/menu.spec.ts
index fa46778a4..2c3ffb3d4 100644
--- a/browser_tests/tests/menu.spec.ts
+++ b/browser_tests/tests/menu.spec.ts
@@ -8,9 +8,7 @@ test.describe('Menu', () => {
   })
 
   test('Can register sidebar tab', async ({ comfyPage }) => {
-    const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
-      (el) => el.children.length
-    )
+    const initialChildrenCount = await comfyPage.menu.buttons.count()
 
     await comfyPage.page.evaluate(async () => {
       window['app'].extensionManager.registerSidebarTab({
@@ -26,9 +24,7 @@ test.describe('Menu', () => {
     })
     await comfyPage.nextFrame()
 
-    const newChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
-      (el) => el.children.length
-    )
+    const newChildrenCount = await comfyPage.menu.buttons.count()
     expect(newChildrenCount).toBe(initialChildrenCount + 1)
   })
 
diff --git a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png
index 6975bdeae..d1617f599 100644
Binary files a/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png and b/browser_tests/tests/nodeBadge.spec.ts-snapshots/node-badge-unknown-color-palette-chromium-linux.png differ
diff --git a/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png b/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png
index 509067e9f..c511957c4 100644
Binary files a/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png and b/browser_tests/tests/noteNode.spec.ts-snapshots/note-nodes-chromium-linux.png differ
diff --git a/browser_tests/tests/recordAudio.spec.ts b/browser_tests/tests/recordAudio.spec.ts
new file mode 100644
index 000000000..cc0ac3684
--- /dev/null
+++ b/browser_tests/tests/recordAudio.spec.ts
@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Record Audio Node', () => {
+  test('should add a record audio node and take a screenshot', async ({
+    comfyPage
+  }) => {
+    // Open the search box by double clicking on the canvas
+    await comfyPage.doubleClickCanvas()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+
+    // Search for and add the RecordAudio node
+    await comfyPage.searchBox.fillAndSelectFirstNode('RecordAudio')
+    await comfyPage.nextFrame()
+
+    // Verify the RecordAudio node was added
+    const recordAudioNodes = await comfyPage.getNodeRefsByType('RecordAudio')
+    expect(recordAudioNodes.length).toBe(1)
+
+    // Take a screenshot of the canvas with the RecordAudio node
+    await expect(comfyPage.canvas).toHaveScreenshot('record_audio_node.png')
+  })
+})
diff --git a/browser_tests/tests/recordAudio.spec.ts-snapshots/record-audio-node-chromium-linux.png b/browser_tests/tests/recordAudio.spec.ts-snapshots/record-audio-node-chromium-linux.png
new file mode 100644
index 000000000..3a838d19c
Binary files /dev/null and b/browser_tests/tests/recordAudio.spec.ts-snapshots/record-audio-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
index 2dca958d5..5d503a0e7 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
index ac2f2b066..cffe23ed1 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png
index 562ec32e6..5cd2eacc4 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png
index ac2f2b066..cffe23ed1 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png
index bcc9e7e30..1fc54d81d 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png
index ce3118790..dd636783b 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
index b5583be8f..36dddbb83 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
index 2091d962f..a27406c39 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
index f1b14b491..44c553cbb 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
index e4edbc459..00574325f 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
index 49d875ac2..ae210142d 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
index b3dd3c9e3..f7727feb9 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
index f923dd0f4..30ffa4e0b 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
index c55cf2f89..ff5b860c4 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
index 051c2e3ee..610b15f1a 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
index 62d043713..9b4208896 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
index 625caa9af..c7ea9a72e 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
index 465a9e7c0..6eaf27c95 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
index 60ab7ea0d..49b4a78d0 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
index dd727958e..736b89872 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
index 2d67ca99f..7074bbc2d 100644
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
@@ -9,6 +9,9 @@ const BYPASS_CLASS = /before:bg-bypass\/60/
 test.describe('Vue Node Bypass', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Minimap.Visible', false)
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
     await comfyPage.vueNodes.waitForNodes()
   })
 
@@ -20,6 +23,7 @@ test.describe('Vue Node Bypass', () => {
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'vue-node-bypassed-state.png'
     )
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
index b0d14bfa8..fa66f6cd1 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
index d75aaa7ad..eb8c0b8cb 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
index ca65a1de1..f7ff7c7a7 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
index 0485a92d4..25ffc18d3 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
index f8c94aba5..cfe0ba1b3 100644
--- a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
@@ -23,10 +23,10 @@ test.describe('Vue Nodes - LOD', () => {
 
     const vueNodesContainer = comfyPage.vueNodes.nodes
     const textboxesInNodes = vueNodesContainer.getByRole('textbox')
-    const buttonsInNodes = vueNodesContainer.getByRole('button')
+    const comboboxesInNodes = vueNodesContainer.getByRole('combobox')
 
     await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(buttonsInNodes.first()).toBeVisible()
+    await expect(comboboxesInNodes.first()).toBeVisible()
 
     await comfyPage.zoom(120, 10)
     await comfyPage.nextFrame()
@@ -34,7 +34,7 @@ test.describe('Vue Nodes - LOD', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
 
     await expect(textboxesInNodes.first()).toBeHidden()
-    await expect(buttonsInNodes.first()).toBeHidden()
+    await expect(comboboxesInNodes.first()).toBeHidden()
 
     await comfyPage.zoom(-120, 10)
     await comfyPage.nextFrame()
@@ -43,6 +43,6 @@ test.describe('Vue Nodes - LOD', () => {
       'vue-nodes-lod-inactive.png'
     )
     await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(buttonsInNodes.first()).toBeVisible()
+    await expect(comboboxesInNodes.first()).toBeVisible()
   })
 })
diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png
index 795cc4c8d..a1c8b6d5c 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png
index c00eddccf..cdb700eb6 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png
index e2552e33b..df9ee2c93 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
index 4018175b1..c47f1b2fe 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
index 1c4bacd6d..4526b2708 100644
Binary files a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png and b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ
diff --git a/build/plugins/comfyAPIPlugin.ts b/build/plugins/comfyAPIPlugin.ts
index 5b7f4bec4..3e9a9e5b9 100644
--- a/build/plugins/comfyAPIPlugin.ts
+++ b/build/plugins/comfyAPIPlugin.ts
@@ -6,6 +6,34 @@ interface ShimResult {
   exports: string[]
 }
 
+const SKIP_WARNING_FILES = new Set(['scripts/app', 'scripts/api'])
+
+/** Files that will be removed in v1.34 */
+const DEPRECATED_FILES = [
+  'scripts/ui',
+  'extensions/core/maskEditorOld',
+  'extensions/core/groupNode'
+] as const
+
+function getWarningMessage(
+  fileKey: string,
+  shimFileName: string
+): string | null {
+  if (SKIP_WARNING_FILES.has(fileKey)) {
+    return null
+  }
+
+  const isDeprecated = DEPRECATED_FILES.some((deprecatedPath) =>
+    fileKey.startsWith(deprecatedPath)
+  )
+
+  if (isDeprecated) {
+    return `[ComfyUI Deprecated] Importing from "${shimFileName}" is deprecated and will be removed in v1.34.`
+  }
+
+  return `[ComfyUI Notice] "${shimFileName}" is an internal module, not part of the public API. Future updates may break this import.`
+}
+
 function isLegacyFile(id: string): boolean {
   return (
     id.endsWith('.ts') &&
@@ -63,12 +91,22 @@ export function comfyAPIPlugin(isDev: boolean): Plugin {
           const relativePath = path.relative(path.join(projectRoot, 'src'), id)
           const shimFileName = relativePath.replace(/\.ts$/, '.js')
 
-          const shimComment = `// Shim for ${relativePath}\n`
+          let shimContent = `// Shim for ${relativePath}\n`
+
+          const fileKey = relativePath.replace(/\.ts$/, '').replace(/\\/g, '/')
+          const warningMessage = getWarningMessage(fileKey, shimFileName)
+
+          if (warningMessage) {
+            // It will only display once because it is at the root of the file.
+            shimContent += `console.warn('${warningMessage}');\n`
+          }
+
+          shimContent += result.exports.join('')
 
           this.emitFile({
             type: 'asset',
             fileName: shimFileName,
-            source: shimComment + result.exports.join('')
+            source: shimContent
           })
         }
 
diff --git a/eslint.config.ts b/eslint.config.ts
index 4e19eba2e..6681d2126 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,10 +1,10 @@
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
 import pluginJs from '@eslint/js'
 import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
+import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
-import tailwind from 'eslint-plugin-tailwindcss'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfig } from 'eslint/config'
@@ -23,14 +23,17 @@ const commonGlobals = {
 } as const
 
 const settings = {
-  'import/resolver': {
-    typescript: true,
-    node: true
-  },
-  tailwindcss: {
-    config: `${import.meta.dirname}/packages/design-system/src/css/style.css`,
-    functions: ['cn', 'clsx', 'tw']
-  }
+  'import-x/resolver-next': [
+    createTypeScriptImportResolver({
+      alwaysTryTypes: true,
+      project: [
+        './tsconfig.json',
+        './apps/*/tsconfig.json',
+        './packages/*/tsconfig.json'
+      ],
+      noWarnOnMultipleProjects: true
+    })
+  ]
 } as const
 
 const commonParserOptions = {
@@ -67,11 +70,8 @@ export default defineConfig([
         ...commonParserOptions,
         projectService: {
           allowDefaultProject: [
-            'vite.config.mts',
             'vite.electron.config.mts',
-            'vite.types.config.mts',
-            'playwright.config.ts',
-            'playwright.i18n.config.ts'
+            'vite.types.config.mts'
           ]
         }
       }
@@ -92,7 +92,6 @@ export default defineConfig([
   // Difference in typecheck on CI vs Local
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore Bad types in the plugin
-  tailwind.configs['flat/recommended'],
   pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
   storybook.configs['flat/recommended'],
@@ -124,7 +123,6 @@ export default defineConfig([
       'import-x/no-relative-packages': 'error',
       'unused-imports/no-unused-imports': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
-      'tailwindcss/no-custom-classname': 'off', // TODO: fix
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
@@ -249,5 +247,17 @@ export default defineConfig([
     rules: {
       'no-console': 'off'
     }
+  },
+  {
+    files: ['scripts/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    },
+    rules: {
+      '@typescript-eslint/no-floating-promises': 'off',
+      'no-console': 'off'
+    }
   }
 ])
diff --git a/global.d.ts b/global.d.ts
index 73019099a..059e47732 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -5,6 +5,19 @@ declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
 declare const __USE_PROD_CONFIG__: boolean
 
+interface Window {
+  __CONFIG__: {
+    mixpanel_token?: string
+    subscription_required?: boolean
+    server_health_alert?: {
+      message: string
+      tooltip?: string
+      severity?: 'info' | 'warning' | 'error'
+      badge?: string
+    }
+  }
+}
+
 interface Navigator {
   /**
    * Used by the electron API.  This is a WICG non-standard API, but is guaranteed to exist in Electron.
diff --git a/knip.config.ts b/knip.config.ts
index 0ed7361e2..a77574f97 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -12,6 +12,10 @@ const config: KnipConfig = {
       ],
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
     },
+    'apps/desktop-ui': {
+      entry: ['src/main.ts', 'src/i18n.ts'],
+      project: ['src/**/*.{js,ts,vue}']
+    },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
@@ -30,9 +34,7 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Dev
-    '@trivago/prettier-plugin-sort-imports'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated manager types
diff --git a/lint-staged.config.js b/lint-staged.config.js
index 0f3808700..5283d261e 100644
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -8,8 +8,10 @@ export default {
 }
 
 function formatAndEslint(fileNames) {
+  // Convert absolute paths to relative paths for better ESLint resolution
+  const relativePaths = fileNames.map((f) => f.replace(process.cwd() + '/', ''))
   return [
-    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
-    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
+    `pnpm exec eslint --cache --fix ${relativePaths.join(' ')}`,
+    `pnpm exec prettier --cache --write ${relativePaths.join(' ')}`
   ]
 }
diff --git a/package.json b/package.json
index 9f1aeff9e..f9edb1851 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.29.2",
+  "version": "1.32.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -13,6 +13,8 @@
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
     "build:analyze": "cross-env ANALYZE_BUNDLE=true pnpm build",
     "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build",
+    "size:collect": "node scripts/size-collect.js",
+    "size:report": "node scripts/size-report.js",
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
     "dev:electron": "nx serve --config vite.electron.config.mts",
@@ -41,7 +43,8 @@
     "test:browser": "pnpm exec nx e2e",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
-    "zipdist": "node scripts/zipdist.js"
+    "zipdist": "node scripts/zipdist.js",
+    "clean": "nx reset"
   },
   "devDependencies": {
     "@eslint/js": "catalog:",
@@ -53,12 +56,13 @@
     "@nx/vite": "catalog:",
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
+    "@prettier/plugin-oxc": "catalog:",
+    "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
     "@trivago/prettier-plugin-sort-imports": "catalog:",
-    "@types/eslint-plugin-tailwindcss": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -75,7 +79,6 @@
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-storybook": "catalog:",
-    "eslint-plugin-tailwindcss": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
     "fs-extra": "^11.2.0",
@@ -86,9 +89,13 @@
     "jsdom": "catalog:",
     "knip": "catalog:",
     "lint-staged": "catalog:",
+    "markdown-table": "catalog:",
+    "mixpanel-browser": "catalog:",
     "nx": "catalog:",
+    "picocolors": "catalog:",
     "postcss-html": "catalog:",
     "prettier": "catalog:",
+    "pretty-bytes": "catalog:",
     "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
     "stylelint": "catalog:",
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 769f52d55..95084d28f 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -9,29 +9,18 @@
 
 @config '../../tailwind.config.ts';
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --fg-color: #fff;
-    --bg-color: #202020;
-    --content-bg: #4e4e4e;
-    --content-fg: #fff;
-    --content-hover-bg: #222;
-    --content-hover-fg: #fff;
-  }
-}
-
 @theme {
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
-  /* Spacing */
-  --spacing-xs: 8px;
+  --text-xxxs: 0.5625rem;
+  --text-xxxs--line-height: calc(1 / 0.5625);
 
   /* Font Families */
   --font-inter: 'Inter', sans-serif;
 
   /* Palette Colors */
-  --color-charcoal-100: #171718;
+  --color-charcoal-100: #55565e;
   --color-charcoal-200: #494a50;
   --color-charcoal-300: #3c3d42;
   --color-charcoal-400: #313235;
@@ -42,42 +31,60 @@
 
   --color-neutral-550: #636363;
 
-  --color-stone-100: #828282;
-  --color-stone-200: #444444;
-  --color-stone-300: #bbbbbb;
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
 
   --color-ivory-100: #fdfbfa;
   --color-ivory-200: #faf9f5;
   --color-ivory-300: #f0eee6;
 
-  --color-gray-100: #f3f3f3;
-  --color-gray-200: #e9e9e9;
-  --color-gray-300: #e1e1e1;
-  --color-gray-400: #d9d9d9;
-  --color-gray-500: #c5c5c5;
-  --color-gray-600: #b4b4b4;
-  --color-gray-700: #a0a0a0;
-  --color-gray-800: #8a8a8a;
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
 
   --color-sand-100: #e1ded5;
-  --color-sand-200: #d6cfc2;
+  --color-sand-200: #fff7d5;
   --color-sand-300: #888682;
-
-  --color-pure-white: #ffffff;
+  --color-sand-400: #eed7ac;
 
   --color-slate-100: #9c9eab;
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
 
-  --color-brand-yellow: #f0ff41;
-  --color-brand-blue: #172dd7;
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+
+  --color-azure-300: #78bae9;
+  --color-azure-400: #31b9f4;
+  --color-azure-600: #0b8ce9;
+
+  --color-cobalt-800: #185a8b;
+
+  --color-jade-400: #47e469;
+  --color-jade-600: #00cd72;
+
+  --color-gold-400: #fcbf64;
+  --color-gold-500: #fdab34;
+  --color-gold-600: #fd9903;
+
+  --color-coral-500: #f75951;
+  --color-coral-600: #e04e48;
+  --color-coral-700: #b33a3a;
+
+  --color-magenta-300: #ceaac9;
+  --color-magenta-700: #6a246a;
 
-  --color-blue-100: #0b8ce9;
-  --color-blue-200: #31b9f4;
-  --color-success-100: #00cd72;
-  --color-success-200: #47e469;
-  --color-warning-100: #fd9903;
-  --color-warning-200: #fcbf64;
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
@@ -89,28 +96,31 @@
   --color-error: #962a2a;
 
   --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
-  --text-xxxs: 0.5625rem;
-  --text-xxxs--line-height: calc(1 / 0.5625);
 
-  --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
-  --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
-  --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
+  --color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
+  --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
+  --color-modal-tag: rgb(from var(--color-smoke-400) r g b/ 0.4);
   --color-alpha-charcoal-600-30: color-mix(
     in srgb,
     var(--color-charcoal-600) 30%,
     transparent
   );
-  --color-alpha-stone-100-20: color-mix(
+  --color-alpha-ash-500-20: color-mix(
     in srgb,
-    var(--color-stone-100) 20%,
+    var(--color-ash-500) 20%,
     transparent
   );
-  --color-alpha-gray-500-50: color-mix(
+  --color-alpha-smoke-500-50: color-mix(
     in srgb,
-    var(--color-gray-500) 50%,
+    var(--color-smoke-500) 50%,
     transparent
   );
+  --color-alpha-smoke-500-20: #c5c5c533;
+  --color-alpha-smoke-400-40: #d9d9d966;
+  --color-alpha-azure-600-30: #0b8ce94d;
+  --color-alpha-magenta-700-60: #6a246a99;
+  --color-alpha-magenta-300-60: #ceaac999;
 
   /* PrimeVue pulled colors */
   --color-muted: var(--p-text-muted-color);
@@ -144,6 +154,13 @@
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
 
+  --button-surface: var(--color-white);
+  --button-surface-contrast: var(--color-black);
+
+  --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
+
+  --modal-card-button-surface: var(--color-smoke-300);
+
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
   --code-bg-color: rgb(96 165 250 / 0.2);
@@ -153,30 +170,36 @@
 
   --accent-primary: var(--color-charcoal-700);
   --backdrop: var(--color-white);
-  --button-hover-surface: var(--color-gray-200);
-  --button-active-surface: var(--color-gray-400);
+
+  --button-hover-surface: var(--color-smoke-200);
+  --button-active-surface: var(--color-smoke-400);
+  --button-icon: var(--color-smoke-600);
+
   --dialog-surface: var(--color-neutral-200);
-  --interface-menu-component-surface-hovered: var(--color-gray-200);
-  --interface-menu-component-surface-selected: var(--color-gray-400);
-  --interface-menu-keybind-surface-default: var(--color-gray-500);
-  --interface-panel-surface: var(--color-pure-white);
-  --interface-stroke: var(--color-gray-300);
-  --nav-background: var(--color-pure-white);
-  --node-border: var(--color-gray-300);
-  --node-component-border: var(--color-gray-400);
-  --node-component-disabled: var(--color-alpha-stone-100-20);
+
+  --interface-menu-component-surface-hovered: var(--color-smoke-200);
+  --interface-menu-component-surface-selected: var(--color-smoke-400);
+  --interface-menu-keybind-surface-default: var(--color-smoke-500);
+  --interface-panel-surface: var(--color-white);
+  --interface-stroke: var(--color-smoke-300);
+
+  --nav-background: var(--color-white);
+
+  --node-border: var(--color-smoke-300);
+  --node-component-border: var(--color-smoke-400);
+  --node-component-disabled: var(--color-alpha-ash-500-20);
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
-  --node-component-header-icon: var(--color-stone-200);
+  --node-component-header-icon: var(--color-ash-800);
   --node-component-header-surface: var(--color-white);
   --node-component-outline: var(--color-black);
-  --node-component-ring: rgb(from var(--color-gray-500) r g b / 50%);
+  --node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
   --node-component-slot-dot-outline-opacity-mult: 1;
   --node-component-slot-dot-outline-opacity: 5%;
   --node-component-slot-dot-outline: var(--color-black);
-  --node-component-slot-text: var(--color-stone-200);
-  --node-component-surface-highlight: var(--color-stone-100);
-  --node-component-surface-hovered: var(--color-gray-200);
+  --node-component-slot-text: var(--color-ash-800);
+  --node-component-surface-highlight: var(--color-ash-500);
+  --node-component-surface-hovered: var(--color-smoke-200);
   --node-component-surface-selected: var(--color-charcoal-200);
   --node-component-surface: var(--color-white);
   --node-component-tooltip: var(--color-charcoal-700);
@@ -188,37 +211,90 @@
   );
   --node-component-widget-skeleton-surface: var(--color-zinc-300);
   --node-divider: var(--color-sand-100);
-  --node-icon-disabled: var(--color-alpha-gray-500-50);
-  --node-stroke: var(--color-gray-400);
+  --node-icon-disabled: var(--color-alpha-smoke-500-50);
+  --node-stroke: var(--color-smoke-400);
   --node-stroke-selected: var(--color-accent-primary);
   --node-stroke-error: var(--color-error);
-  --node-stroke-executing: var(--color-blue-100);
-  --text-secondary: var(--color-stone-100);
+  --node-stroke-executing: var(--color-azure-600);
+
+  --text-secondary: var(--color-ash-500);
   --text-primary: var(--color-charcoal-700);
-  --input-surface: rgba(0, 0, 0, 0.15);
+  --input-surface: rgb(0 0 0 / 0.15);
+
+  /* Semantic tokens - light mode */
+  --muted-foreground: var(--color-charcoal-200);
+  --base-foreground: var(--color-charcoal-800);
+  --brand-yellow: var(--color-electric-400);
+  --brand-blue: var(--color-sapphire-700);
+  --secondary-background: var(--color-smoke-200);
+  --secondary-background-hover: var(--color-smoke-400);
+  --secondary-background-selected: var(--color-smoke-600);
+  --base-background: var(--color-white);
+  --primary-background: var(--color-azure-400);
+  --primary-background-hover: var(--color-cobalt-800);
+  --destructive-background: var(--color-coral-500);
+  --destructive-background-hover: var(--color-coral-600);
+  --inverted-background-hover: var(--color-charcoal-600);
+  --warning-background: var(--color-gold-400);
+  --warning-background-hover: var(--color-gold-500);
+  --border-default: var(--color-smoke-600);
+  --border-subtle: var(--color-smoke-400);
+  --muted-background: var(--color-smoke-700);
+  --accent-background: var(--color-smoke-800);
+
+  /* Default UI element color palette variables */
+   --palette-contrast-mix-color: #fff;
+   --palette-interface-panel-surface: var(--comfy-menu-bg);
+   --palette-interface-stroke: color-mix(in srgb, var(--interface-panel-surface) 75.5%, var(--contrast-mix-color));
+
+   --palette-interface-panel-box-shadow: 1px 1px 8px 0 rgb(0 0 0 / 0.4);
+   --palette-interface-panel-drop-shadow: 1px 1px 4px rgb(0 0 0 / 0.4);
+   --palette-interface-panel-hover-surface: color-mix(in srgb, var(--interface-panel-surface) 92.5%, var(--contrast-mix-color));
+   --palette-interface-panel-selected-surface: color-mix(in srgb, var(--interface-panel-surface) 87.5%, var(--contrast-mix-color));
+   --palette-interface-button-hover-surface:  color-mix(in srgb, var(--interface-panel-surface) 82%, var(--contrast-mix-color));
+
 }
 
 .dark-theme {
-  --accent-primary: var(--color-pure-white);
+  --fg-color: #fff;
+  --bg-color: #202020;
+  --content-bg: #4e4e4e;
+  --content-fg: #fff;
+  --content-hover-bg: #222;
+  --content-hover-fg: #fff;
+
+  --accent-primary: var(--color-white);
   --backdrop: var(--color-neutral-900);
+
+  --button-surface: var(--color-charcoal-600);
+  --button-surface-contrast: var(--color-white);
   --button-hover-surface: var(--color-charcoal-600);
   --button-active-surface: var(--color-charcoal-600);
+  --button-icon: var(--color-smoke-800);
+
+  --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
+
+  --modal-card-button-surface: var(--color-charcoal-300);
+
   --dialog-surface: var(--color-neutral-700);
+
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
   --interface-menu-component-surface-selected: var(--color-charcoal-300);
   --interface-menu-keybind-surface-default: var(--color-charcoal-200);
-  --interface-panel-surface: var(--color-charcoal-100);
+  --interface-panel-surface: var(--color-charcoal-800);
   --interface-stroke: var(--color-charcoal-400);
-  --nav-background: var(--color-charcoal-100);
+
+  --nav-background: var(--color-charcoal-800);
+
   --node-border: var(--color-charcoal-500);
-  --node-component-border: var(--color-stone-200);
+  --node-component-border: var(--color-ash-800);
   --node-component-border-error: var(--color-danger-100);
   --node-component-border-executing: var(--color-blue-500);
   --node-component-border-selected: var(--color-charcoal-200);
   --node-component-header-icon: var(--color-slate-300);
   --node-component-header-surface: var(--color-charcoal-800);
   --node-component-outline: var(--color-white);
-  --node-component-ring: rgb(var(--color-gray-500) / 20%);
+  --node-component-ring: rgb(var(--color-smoke-500) / 20%);
   --node-component-slot-dot-outline-opacity: 10%;
   --node-component-slot-dot-outline: var(--color-white);
   --node-component-slot-text: var(--color-slate-200);
@@ -232,24 +308,58 @@
   --node-component-widget-skeleton-surface: var(--color-zinc-800);
   --node-component-disabled: var(--color-alpha-charcoal-600-30);
   --node-divider: var(--color-charcoal-500);
-  --node-icon-disabled: var(--color-alpha-stone-100-20);
-  --node-stroke: var(--color-stone-200);
-  --node-stroke-selected: var(--color-pure-white);
+  --node-icon-disabled: var(--color-alpha-ash-500-20);
+  --node-stroke: var(--color-ash-800);
+  --node-stroke-selected: var(--color-white);
   --node-stroke-error: var(--color-error);
-  --node-stroke-executing: var(--color-blue-100);
+  --node-stroke-executing: var(--color-azure-600);
+
   --text-secondary: var(--color-slate-100);
-  --text-primary: var(--color-pure-white);
-  --input-surface: rgba(130, 130, 130, 0.1);
+  --text-primary: var(--color-white);
+
+  --input-surface: rgb(130 130 130 / 0.1);
+
+  /* Semantic tokens - dark mode */
+  --muted-foreground: var(--color-smoke-800);
+  --base-foreground: var(--color-white);
+  --brand-yellow: var(--color-electric-400);
+  --brand-blue: var(--color-sapphire-700);
+  --secondary-background: var(--color-charcoal-600);
+  --secondary-background-hover: var(--color-charcoal-400);
+  --secondary-background-selected: var(--color-charcoal-200);
+  --base-background: var(--color-charcoal-800);
+  --primary-background: var(--color-azure-600);
+  --primary-background-hover: var(--color-azure-400);
+  --destructive-background: var(--color-coral-700);
+  --destructive-background-hover: var(--color-coral-600);
+  --inverted-background-hover: var(--color-smoke-200);
+  --warning-background: var(--color-gold-600);
+  --warning-background-hover: var(--color-gold-500);
+  --border-default: var(--color-charcoal-200);
+  --border-subtle: var(--color-charcoal-300);
+  --muted-background: var(--color-charcoal-100);
+  --accent-background: var(--color-charcoal-100);
 }
 
 @theme inline {
   --color-backdrop: var(--backdrop);
-  --color-button-hover-surface: var(--button-hover-surface);
   --color-button-active-surface: var(--button-active-surface);
+  --color-button-hover-surface: var(--button-hover-surface);
+  --color-button-icon: var(--button-icon);
+  --color-button-surface: var(--button-surface);
+  --color-button-surface-contrast: var(--button-surface-contrast);
+  --color-subscription-button-gradient: var(--subscription-button-gradient);
+  --color-modal-card-button-surface: var(--modal-card-button-surface);
   --color-dialog-surface: var(--dialog-surface);
-  --color-interface-menu-component-surface-hovered: var(--interface-menu-component-surface-hovered);
-  --color-interface-menu-component-surface-selected: var(--interface-menu-component-surface-selected);
-  --color-interface-menu-keybind-surface-default: var(--interface-menu-keybind-surface-default);
+  --color-interface-menu-component-surface-hovered: var(
+    --interface-menu-component-surface-hovered
+  );
+  --color-interface-menu-component-surface-selected: var(
+    --interface-menu-component-surface-selected
+  );
+  --color-interface-menu-keybind-surface-default: var(
+    --interface-menu-keybind-surface-default
+  );
   --color-interface-panel-surface: var(--interface-panel-surface);
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
@@ -295,6 +405,27 @@
   --color-text-secondary: var(--text-secondary);
   --color-text-primary: var(--text-primary);
   --color-input-surface: var(--input-surface);
+
+  /* Semantic tokens */
+  --color-base-foreground: var(--base-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-base-background: var(--base-background);
+  --color-secondary-background: var(--secondary-background);
+  --color-secondary-background-hover: var(--secondary-background-hover);
+  --color-secondary-background-selected: var(--secondary-background-selected);
+  --color-primary-background: var(--primary-background);
+  --color-primary-background-hover: var(--primary-background-hover);
+  --color-destructive-background: var(--destructive-background);
+  --color-destructive-background-hover: var(--destructive-background-hover);
+  --color-inverted-background-hover: var(--inverted-background-hover);
+  --color-warning-background: var(--warning-background);
+  --color-warning-background-hover: var(--warning-background-hover);
+  --color-border-default: var(--border-default);
+  --color-border-subtle: var(--border-subtle);
+  --color-muted-background: var(--muted-background);
+  --color-accent-background: var(--accent-background);
+  --color-brand-yellow: var(--brand-yellow);
+  --color-brand-blue: var(--brand-blue);
 }
 
 @custom-variant dark-theme {
@@ -313,7 +444,41 @@
   }
 }
 
-/* Everything below here to be cleaned up over time. */
+/* ===================== Scrollbar Utilities (Tailwind) =====================
+   Usage: Add `scrollbar-custom` class to scrollable containers.
+   The scrollbar styling adapts to light/dark theme automatically.
+============================================================================ */
+
+@utility scrollbar-custom {
+  overflow-y: auto;
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--dialog-surface) transparent;
+
+  /* WebKit */
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--dialog-surface);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--dialog-surface);
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+/* =================== End Custom Scrollbar (cross-browser) =================== */
+
+/* Everthing below here to be cleaned up over time. */
 
 body {
   width: 100vw;
@@ -344,36 +509,40 @@ body {
 .comfy-markdown {
   /* We assign the textarea and the Tiptap editor to the same CSS grid area to stack them on top of one another. */
   display: grid;
-}
+  & > textarea,
+  .tiptap {
+    grid-area: 1 / 1 / 2 / 2;
+  }
 
-.comfy-markdown > textarea {
-  grid-area: 1 / 1 / 2 / 2;
-}
+  & > textarea {
+    opacity: 0;
+    pointer-events: none;
+  }
 
-.comfy-markdown .tiptap {
-  grid-area: 1 / 1 / 2 / 2;
-  background-color: var(--comfy-input-bg);
-  color: var(--input-text);
-  overflow: hidden;
-  overflow-y: auto;
-  resize: none;
-  border: none;
-  box-sizing: border-box;
-  font-size: var(--comfy-textarea-font-size);
-  height: 100%;
-  padding: 0.5em;
-}
+  &.editing {
+    & > textarea {
+      opacity: 1;
+      pointer-events: all;
+    }
 
-.comfy-markdown.editing .tiptap {
-  display: none;
-}
+    .tiptap {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
 
-.comfy-markdown .tiptap :first-child {
-  margin-top: 0;
-}
+  .tiptap {
+    overflow-y: auto;
+    font-size: var(--comfy-textarea-font-size);
 
-.comfy-markdown .tiptap :last-child {
-  margin-bottom: 0;
+    :first-child {
+      margin-top: 0;
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .comfy-markdown .tiptap blockquote {
@@ -1050,31 +1219,6 @@ audio.comfy-audio.empty-audio-widget {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
 
-/* Load3d styles */
-.comfy-load-3d,
-.comfy-load-3d-animation,
-.comfy-preview-3d,
-.comfy-preview-3d-animation {
-  display: flex;
-  flex-direction: column;
-  background: transparent;
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.comfy-load-3d canvas,
-.comfy-load-3d-animation canvas,
-.comfy-preview-3d canvas,
-.comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas {
-  display: flex;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-/* End of Load3d styles */
-
 /* [Desktop] Electron window specific styles */
 .app-drag {
   app-region: drag;
@@ -1128,7 +1272,7 @@ audio.comfy-audio.empty-audio-widget {
 }
 
 .isLOD .lg-node-header {
-  border-radius: 0px;
+  border-radius: 0;
   pointer-events: none;
 }
 
diff --git a/packages/design-system/src/icons/image-ai-edit.svg b/packages/design-system/src/icons/image-ai-edit.svg
new file mode 100644
index 000000000..437669d6d
--- /dev/null
+++ b/packages/design-system/src/icons/image-ai-edit.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 9.99996L11.9427 7.94263C11.6926 7.69267 11.3536 7.55225 11 7.55225C10.6464 7.55225 10.3074 7.69267 10.0573 7.94263L9 9M8 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.51377 12.671L4.77612 14.3921C4.67222 14.6346 4.32853 14.6346 4.22463 14.3921L3.48699 12.671C3.45664 12.6002 3.40022 12.5437 3.32942 12.5134L1.60825 11.7757C1.36581 11.6718 1.36581 11.3282 1.60825 11.2243L3.32942 10.4866C3.40022 10.4563 3.45664 10.3998 3.48699 10.329L4.22463 8.60787C4.32853 8.36544 4.67222 8.36544 4.77612 8.60787L5.51377 10.329C5.54411 10.3998 5.60053 10.4563 5.67134 10.4866L7.39251 11.2243C7.63494 11.3282 7.63494 11.6718 7.39251 11.7757L5.67134 12.5134C5.60053 12.5437 5.54411 12.6002 5.51377 12.671Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5 5H5.0001" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/packages/design-system/src/icons/mask.svg b/packages/design-system/src/icons/mask.svg
index 1e1a6d97c..4993ab52b 100644
--- a/packages/design-system/src/icons/mask.svg
+++ b/packages/design-system/src/icons/mask.svg
@@ -1,14 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" fill="none">
   <g clip-path="url(#clip0_704_2695)">
-    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="#9C9EAB" stroke-width="1.3"/>
-    <path d="M6.5 5.5L10 2" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M8 8L12.5 3.5" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="square"/>
-    <path d="M10.5 9.5L14 6" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="currentColor" stroke-width="1.3"/>
+    <path d="M6.5 5.5L10 2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M8 8L12.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="square"/>
+    <path d="M10.5 9.5L14 6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
   </g>
   <defs>
     <clipPath id="clip0_704_2695">
       <rect width="16" height="16" fill="white"/>
     </clipPath>
   </defs>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/design-system/src/icons/pin.svg b/packages/design-system/src/icons/pin.svg
new file mode 100644
index 000000000..a837563ee
--- /dev/null
+++ b/packages/design-system/src/icons/pin.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.13727 11.2201L6.27454 14.4398" stroke="var(--pin-color, var(--color-smoke-800, #8a8a8a))" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M6.28085 6.68385C6.21652 6.92342 6.08664 7.1403 5.9058 7.31009C5.72497 7.47989 5.50035 7.59587 5.25721 7.645L3.95569 7.91742C3.71254 7.96655 3.48793 8.08253 3.30709 8.25233C3.12626 8.42212 2.99637 8.639 2.93204 8.87857L2.80091 9.36797C2.75515 9.53876 2.7791 9.72073 2.86751 9.87385C2.95591 10.027 3.10153 10.1387 3.27231 10.1845L10.9997 12.255C11.1705 12.3008 11.3525 12.2768 11.5056 12.1884C11.6587 12.1 11.7705 11.9544 11.8162 11.7836L11.9474 11.2942C12.0114 11.0546 12.0074 10.8018 11.9357 10.5643C11.864 10.3269 11.7274 10.1141 11.5414 9.95001L10.5505 9.06333C10.3645 8.89921 10.2279 8.68646 10.1562 8.44899C10.0845 8.21153 10.0805 7.95877 10.1446 7.71913L10.7933 5.29787C10.8391 5.12709 10.9508 4.98148 11.1039 4.89307C11.2571 4.80466 11.439 4.78071 11.6098 4.82647C11.9514 4.91799 12.3153 4.87008 12.6216 4.69327C12.9278 4.51646 13.1513 4.22523 13.2428 3.88366C13.3343 3.54209 13.2864 3.17815 13.1096 2.8719C12.9328 2.56566 12.6416 2.34219 12.3 2.25067L7.1484 0.870299C6.80683 0.778775 6.44289 0.826689 6.13665 1.0035C5.8304 1.18031 5.60694 1.47154 5.51541 1.81311C5.42389 2.15468 5.4718 2.51862 5.64861 2.82487C5.82542 3.13111 6.11665 3.35458 6.45822 3.4461C6.62901 3.49186 6.77462 3.6036 6.86302 3.75672C6.95143 3.90984 6.97539 4.09181 6.92962 4.2626L6.28085 6.68385Z" fill="var(--handle-color, var(--color-gold-600, #fd9903))" />
+</svg>
\ No newline at end of file
diff --git a/packages/design-system/tailwind.config.ts b/packages/design-system/tailwind.config.ts
index 6c22baece..62b611426 100644
--- a/packages/design-system/tailwind.config.ts
+++ b/packages/design-system/tailwind.config.ts
@@ -4,6 +4,13 @@ import { addDynamicIconSelectors } from '@iconify/tailwind'
 import { iconCollection } from './src/iconCollection'
 
 export default {
+  theme: {
+    extend: {
+      boxShadow: {
+        interface: 'var(--interface-panel-box-shadow)'
+      }
+    }
+  },
   plugins: [
     addDynamicIconSelectors({
       iconSets: {
diff --git a/packages/registry-types/src/comfyRegistryTypes.ts b/packages/registry-types/src/comfyRegistryTypes.ts
index 32dc4f675..f23e79286 100644
--- a/packages/registry-types/src/comfyRegistryTypes.ts
+++ b/packages/registry-types/src/comfyRegistryTypes.ts
@@ -4,19466 +4,21027 @@
  */
 
 export interface paths {
-  '/users': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Get information about the calling user. */
-    get: operations['getUser']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Search for customers
-     * @description Search for customers by email, name, Stripe ID, or Metronome ID.
-     */
-    get: operations['searchCustomers']
-    put?: never
-    /**
-     * Create a new customer
-     * @description Creates a new customer using the provided token. No request body is needed as user information is extracted from the token.
-     */
-    post: operations['createCustomer']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/me': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get authenticated customer details
-     * @description Returns details about the currently authenticated customer based on their JWT token.
-     */
-    get: operations['getAuthenticatedCustomer']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/{customer_id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get a customer by ID
-     * @description Returns details about a customer by their ID.
-     */
-    get: operations['getCustomerById']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/api-keys': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** List all API keys for a customer */
-    get: operations['listCustomerAPIKeys']
-    put?: never
-    /** Create a new API key for a customer */
-    post: operations['createCustomerAPIKey']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/api-keys/{api_key_id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    post?: never
-    /** Delete an API key for a customer */
-    delete: operations['deleteCustomerAPIKey']
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/credit': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Initiates a Credit Purchase. */
-    post: operations['InitiateCreditPurchase']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/billing': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Access customer billing portal
-     * @description Creates a session for the customer to access their billing portal where they can manage subscriptions, payment methods, and view invoices.
-     */
-    post: operations['AccessBillingPortal']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/usage': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Get customer's usage
-     * @description Returns the customer's as a dashboard URL.
-     */
-    post: operations['GetCustomerUsage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/balance': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get customer's remaining balance
-     * @description Returns the customer's current remaining balance in microamount and its currency.
-     */
-    get: operations['GetCustomerBalance']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/{customer_id}/balance': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get customer's remaining balance by ID
-     * @description Returns the specified customer's current remaining balance in microamount and its currency.
-     */
-    get: operations['GetCustomerBalanceById']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/storage': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Store a resource for a customer
-     * @description Store a resource for a customer. Resource will have a 24 hour expiry. The signed URL will be generated for the specified file path.
-     */
-    post: operations['createCustomerStorageResource']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/{customer_id}/events': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Get events related to customer */
-    get: operations['GetCustomerEventsById']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/customers/events': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Get events related to customer */
-    get: operations['GetCustomerEvents']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/upload-artifact': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Receive artifacts (output files) from the ComfyUI GitHub Action
-     * @description Receive artifacts (output files) from the ComfyUI GitHub Action
-     */
-    post: {
-      parameters: {
-        query?: never
-        header?: never
-        path?: never
-        cookie?: never
-      }
-      requestBody: {
-        content: {
-          'application/json': {
-            /** @description Repository name */
-            repo: string
-            /** @description Unique identifier for the job */
-            job_id: string
-            /** @description Unique identifier for the run */
-            run_id: string
-            /** @description Operating system used in the run */
-            os: string
-            /** @description Cuda version. */
-            cuda_version?: string
-            /** @description The name of the bucket where the output files are stored */
-            bucket_name?: string
-            /** @description A comma separated string that contains GCS path(s) to output files. eg. gs://bucket-name/output, gs://bucket-name/output2 */
-            output_files_gcs_paths?: string
-            /** @description The path to ComfyUI logs. eg. gs://bucket-name/logs */
-            comfy_logs_gcs_path?: string
-            /** @description The flags used in the comfy run */
-            comfy_run_flags?: string
-            commit_hash: string
-            /** @description The time of the commit in the format of "YYYY-MM-DDTHH:MM:SSZ" (2016-10-10T00:00:00Z) */
-            commit_time: string
-            /** @description The commit message */
-            commit_message: string
-            /** @description The name of the workflow */
-            workflow_name: string
-            branch_name: string
+    "/users": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get information about the calling user. */
+        get: operations["getUser"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Search for customers
+         * @description Search for customers by email, name, Stripe ID, or Metronome ID.
+         */
+        get: operations["searchCustomers"];
+        put?: never;
+        /**
+         * Create a new customer
+         * @description Creates a new customer using the provided token. No request body is needed as user information is extracted from the token.
+         */
+        post: operations["createCustomer"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/me": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get authenticated customer details
+         * @description Returns details about the currently authenticated customer based on their JWT token.
+         */
+        get: operations["getAuthenticatedCustomer"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/{customer_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get a customer by ID
+         * @description Returns details about a customer by their ID.
+         */
+        get: operations["getCustomerById"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/api-keys": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List all API keys for a customer */
+        get: operations["listCustomerAPIKeys"];
+        put?: never;
+        /** Create a new API key for a customer */
+        post: operations["createCustomerAPIKey"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/api-keys/{api_key_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        /** Delete an API key for a customer */
+        delete: operations["deleteCustomerAPIKey"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/credit": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Initiates a Credit Purchase. */
+        post: operations["InitiateCreditPurchase"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/billing": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Access customer billing portal
+         * @description Creates a session for the customer to access their billing portal where they can manage subscriptions, payment methods, and view invoices.
+         */
+        post: operations["AccessBillingPortal"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/cloud-subscription-checkout": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create cloud subscription checkout session
+         * @description Creates a cloud subscription checkout session for $20/month with automatic billing
+         */
+        post: operations["createCloudSubscriptionCheckout"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/cloud-subscription-status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Check cloud subscription status
+         * @description Check if the customer has an active cloud subscription
+         */
+        get: operations["GetCloudSubscriptionStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/usage": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Get customer's usage
+         * @description Returns the customer's as a dashboard URL.
+         */
+        post: operations["GetCustomerUsage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/balance": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get customer's remaining balance
+         * @description Returns the customer's current remaining balance in microamount and its currency, with separate breakdowns for prepaid commits and cloud credits.
+         */
+        get: operations["GetCustomerBalance"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/{customer_id}/balance": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get customer's remaining balance by ID
+         * @description Returns the specified customer's current remaining balance in microamount and its currency, with separate breakdowns for prepaid commits and cloud credits.
+         */
+        get: operations["GetCustomerBalanceById"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/storage": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Store a resource for a customer
+         * @description Store a resource for a customer. Resource will have a 24 hour expiry. The signed URL will be generated for the specified file path.
+         */
+        post: operations["createCustomerStorageResource"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/{customer_id}/events": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get events related to customer */
+        get: operations["GetCustomerEventsById"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/customers/events": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get events related to customer */
+        get: operations["GetCustomerEvents"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/upload-artifact": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Receive artifacts (output files) from the ComfyUI GitHub Action
+         * @description Receive artifacts (output files) from the ComfyUI GitHub Action
+         */
+        post: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody: {
+                content: {
+                    "application/json": {
+                        /** @description Repository name */
+                        repo: string;
+                        /** @description Unique identifier for the job */
+                        job_id: string;
+                        /** @description Unique identifier for the run */
+                        run_id: string;
+                        /** @description Operating system used in the run */
+                        os: string;
+                        /** @description Cuda version. */
+                        cuda_version?: string;
+                        /** @description The name of the bucket where the output files are stored */
+                        bucket_name?: string;
+                        /** @description A comma separated string that contains GCS path(s) to output files. eg. gs://bucket-name/output, gs://bucket-name/output2 */
+                        output_files_gcs_paths?: string;
+                        /** @description The path to ComfyUI logs. eg. gs://bucket-name/logs */
+                        comfy_logs_gcs_path?: string;
+                        /** @description The flags used in the comfy run */
+                        comfy_run_flags?: string;
+                        commit_hash: string;
+                        /** @description The time of the commit in the format of "YYYY-MM-DDTHH:MM:SSZ" (2016-10-10T00:00:00Z) */
+                        commit_time: string;
+                        /** @description The commit message */
+                        commit_message: string;
+                        /** @description The name of the workflow */
+                        workflow_name: string;
+                        branch_name: string;
+                        /**
+                         * Format: int64
+                         * @description The start time of the job as a Unix timestamp.
+                         */
+                        start_time: number;
+                        /**
+                         * Format: int64
+                         * @description The end time of the job as a Unix timestamp.
+                         */
+                        end_time: number;
+                        /** @description The average amount of VRAM used in the run. */
+                        avg_vram?: number;
+                        /** @description The peak amount of VRAM used in the run. */
+                        peak_vram?: number;
+                        /** @description The pull request number */
+                        pr_number: string;
+                        /** @description The author of the commit */
+                        author: string;
+                        /** @description The user who triggered the job */
+                        job_trigger_user: string;
+                        /** @description The python version used in the run */
+                        python_version: string;
+                        /** @description The pytorch version used in the run */
+                        pytorch_version?: string;
+                        machine_stats?: components["schemas"]["MachineStats"];
+                        status: components["schemas"]["WorkflowRunStatus"];
+                    };
+                };
+            };
+            responses: {
+                /** @description Successfully received the artifact details */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            message?: string;
+                        };
+                    };
+                };
+                /** @description Invalid request */
+                400: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+                /** @description Internal server error */
+                500: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/gitcommit": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Retrieve CI data for a given commit
+         * @description Returns all runs, jobs, job results, and storage files associated with a given commit.
+         */
+        get: {
+            parameters: {
+                query?: {
+                    /** @description The ID of the commit to fetch data for. */
+                    commitId?: string;
+                    /** @description The operating system to filter the CI data by. */
+                    operatingSystem?: string;
+                    /** @description The name of the workflow to filter the CI data by. */
+                    workflowName?: string;
+                    /** @description The branch of the gitcommit to filter the CI data by. */
+                    branch?: string;
+                    /** @description The page number to retrieve. */
+                    page?: number;
+                    /** @description The number of items to include per page. */
+                    pageSize?: number;
+                    /** @description The repo to filter by. */
+                    repoName?: string;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description An object containing runs, jobs, job results, and storage files */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            jobResults?: components["schemas"]["ActionJobResult"][];
+                            totalNumberOfPages?: number;
+                        };
+                    };
+                };
+                /** @description Commit not found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+                /** @description Internal server error */
+                500: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/gitcommitsummary": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Retrieve a summary of git commits
+         * @description Returns a summary of git commits, including status, start time, and end time.
+         */
+        get: {
+            parameters: {
+                query?: {
+                    /** @description The repository name to filter the git commits by. */
+                    repoName?: string;
+                    /** @description The branch name to filter the git commits by. */
+                    branchName?: string;
+                    /** @description The page number to retrieve. */
+                    page?: number;
+                    /** @description The number of items to include per page. */
+                    pageSize?: number;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description Successfully retrieved git commit summaries */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            commitSummaries?: components["schemas"]["GitCommitSummary"][];
+                            totalNumberOfPages?: number;
+                        };
+                    };
+                };
+                /** @description Internal server error */
+                500: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            message?: string;
+                        };
+                    };
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/workflowresult/{workflowResultId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve a specific commit by ID */
+        get: operations["getWorkflowResult"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/branch": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Retrieve all distinct branches for a given repo
+         * @description Returns all branches for a given repo.
+         */
+        get: {
+            parameters: {
+                query: {
+                    /** @description The repo to filter by. */
+                    repo_name: string;
+                };
+                header?: never;
+                path?: never;
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                /** @description An array of branches */
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json": {
+                            branches?: string[];
+                        };
+                    };
+                };
+                /** @description Repo not found */
+                404: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+                /** @description Internal server error */
+                500: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content?: never;
+                };
+            };
+        };
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/users/publishers/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve all publishers for a given user */
+        get: operations["listPublishersForUser"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/permissions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve permissions the user has for a given publisher */
+        get: operations["getPermissionOnPublisher"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/validate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Validate if a publisher username is available
+         * @description Checks if the publisher username is already taken.
+         */
+        get: operations["validatePublisher"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve all publishers */
+        get: operations["listPublishers"];
+        put?: never;
+        /** Create a new publisher */
+        post: operations["createPublisher"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve a publisher by ID */
+        get: operations["getPublisher"];
+        /** Update a publisher */
+        put: operations["updatePublisher"];
+        post?: never;
+        /** Delete a publisher */
+        delete: operations["deletePublisher"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/ban": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Ban a publisher */
+        post: operations["BanPublisher"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes/{nodeId}/claim-my-node": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Claim nodeId into publisherId for the authenticated publisher
+         * @description This endpoint allows a publisher to claim an unclaimed node that they own the repo, which is identified by the nodeId. The unclaimed node's repository must be owned by the authenticated user.
+         */
+        post: operations["claimMyNode"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes/v2": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve all nodes */
+        get: operations["listNodesForPublisherV2"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve all nodes */
+        get: operations["listNodesForPublisher"];
+        put?: never;
+        /** Create a new custom node */
+        post: operations["createNode"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes/{nodeId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /** Update a specific node */
+        put: operations["updateNode"];
+        post?: never;
+        /** Delete a specific node */
+        delete: operations["deleteNode"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes/{nodeId}/permissions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve permissions the user has for a given publisher */
+        get: operations["getPermissionOnPublisherNodes"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes/{nodeId}/versions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Publish a new version of a node */
+        post: operations["publishNodeVersion"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes/{nodeId}/versions/{versionId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /**
+         * Update changelog and deprecation status of a node version
+         * @description Update only the changelog and deprecated status of a specific version of a node.
+         */
+        put: operations["updateNodeVersion"];
+        post?: never;
+        /** Unpublish (delete) a specific version of a node */
+        delete: operations["deleteNodeVersion"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/nodes/{nodeId}/ban": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Ban a publisher's Node */
+        post: operations["BanPublisherNode"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/tokens": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve all personal access tokens for a publisher */
+        get: operations["listPersonalAccessTokens"];
+        put?: never;
+        /** Create a new personal access token */
+        post: operations["createPersonalAccessToken"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/publishers/{publisherId}/tokens/{tokenId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        /** Delete a specific personal access token */
+        delete: operations["deletePersonalAccessToken"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/search": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Retrieves a list of nodes
+         * @description Returns a paginated list of nodes across all publishers.
+         */
+        get: operations["searchNodes"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/reindex": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Reindex all nodes for searching. */
+        post: operations["reindexNodes"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/update-github-stars": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update GitHub stars for nodes */
+        post: operations["updateGithubStars"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Retrieves a list of nodes
+         * @description Returns a paginated list of nodes across all publishers.
+         */
+        get: operations["listAllNodes"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/comfy-nodes/{comfyNodeName}/node": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Retrieve a node by ComfyUI node name
+         * @description Returns the node that contains a ComfyUI node with the specified name
+         */
+        get: operations["getNodeByComfyNodeName"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Retrieve a specific node by ID
+         * @description Returns the details of a specific node.
+         */
+        get: operations["getNode"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}/reviews": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Add review to a specific version of a node */
+        post: operations["postNodeReview"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}/install": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Returns a node version to be installed.
+         * @description Retrieves the node data for installation, either the latest or a specific version.
+         */
+        get: operations["installNode"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}/translations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create Node Translations */
+        post: operations["CreateNodeTranslations"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}/versions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List all versions of a node */
+        get: operations["listNodeVersions"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}/versions/{versionId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve a specific version of a node */
+        get: operations["getNodeVersion"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/bulk/nodes/versions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Retrieve multiple node versions in a single request */
+        post: operations["getBulkNodeVersions"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/versions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List all node versions given some filters. */
+        get: operations["listAllNodeVersions"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/nodes": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new custom node using admin priviledge */
+        post: operations["adminCreateNode"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/nodes/{nodeId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /**
+         * Admin Update Node
+         * @description Only admins can update a node with admin privileges.
+         */
+        put: operations["adminUpdateNode"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/nodes/{nodeId}/versions/{versionNumber}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /**
+         * Admin Update Node Version Status
+         * @description Only admins can approve a node version.
+         */
+        put: operations["adminUpdateNodeVersion"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/releases": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get release notes
+         * @description Fetch release notes from Strapi with caching
+         */
+        get: operations["getReleaseNotes"];
+        put?: never;
+        /**
+         * Process Github release webhook
+         * @description Webhook endpoint to process Github release events and generate release notes
+         */
+        post: operations["processReleaseWebhook"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/security-scan": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Security Scan
+         * @description Pull all pending node versions and conduct security scans.
+         */
+        get: operations["securityScan"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}/versions/{version}/comfy-nodes": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                nodeId: string;
+                version: string;
+            };
+            cookie?: never;
+        };
+        /** list comfy-nodes for node version */
+        get: operations["ListComfyNodes"];
+        put?: never;
+        /** create comfy-nodes for certain node */
+        post: operations["CreateComfyNodes"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/nodes/{nodeId}/versions/{version}/comfy-nodes/{comfyNodeName}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** get specify comfy-node based on its id */
+        get: operations["GetComfyNode"];
+        /** Update a specific comfy-node */
+        put: operations["UpdateComfyNode"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/comfy-nodes": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** list all comfy-nodes */
+        get: operations["ListAllComfyNodes"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/comfy-nodes/backfill": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** trigger comfy nodes backfill */
+        post: operations["ComfyNodesBackfill"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/dummy": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Dummy proxy
+         * @description Dummy proxy endpoint that returns a simple string
+         */
+        post: operations["dummyProxy"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/minimax/video_generation": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to Minimax for video generation
+         * @description Forwards video generation requests to Minimax's API and returns the task ID for asynchronous processing.
+         */
+        post: operations["minimaxVideoGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/minimax/query/video_generation": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Query status of a Minimax video generation task
+         * @description Proxies a request to Minimax to check the status of a video generation task
+         */
+        get: operations["getMinimaxVideoGeneration"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/minimax/files/retrieve": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Retrieve download URL for a Minimax file
+         * @description Proxies a request to Minimax to get the download URL for a file
+         */
+        post: operations["retrieveMinimaxFile"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ideogram/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to Ideogram for image generation
+         * @description Forwards image generation requests to Ideogram's API and returns the results.
+         */
+        post: operations["ideogramGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ideogram/ideogram-v3/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to Ideogram for image generation
+         * @description Forwards image generation requests to Ideogram's API and returns the results.
+         */
+        post: operations["ideogramV3Generate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ideogram/ideogram-v3/edit": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to Ideogram for image editing
+         * @description Forwards image editing requests to Ideogram's API and returns the results.
+         */
+        post: operations["ideogramV3Edit"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ideogram/ideogram-v3/remix": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Remix an image using a prompt */
+        post: operations["ideogramV3Remix"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ideogram/ideogram-v3/reframe": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Reframe an image to a chosen resolution */
+        post: operations["ideogramV3Reframe"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ideogram/ideogram-v3/replace-background": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Replace background of an image using a prompt */
+        post: operations["ideogramV3ReplaceBackground"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/account/costs": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Resource Package Information */
+        get: operations["klingQueryResourcePackages"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/text2video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Task List */
+        get: operations["klingText2VideoQueryTaskList"];
+        put?: never;
+        /** KlingAI Create Video from Text */
+        post: operations["klingCreateVideoFromText"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/text2video/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Task */
+        get: operations["klingText2VideoQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/image2video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Image2Video Task List */
+        get: operations["klingImage2VideoQueryTaskList"];
+        put?: never;
+        /** KlingAI Create Video from Image */
+        post: operations["klingCreateVideoFromImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/image2video/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Image2Video Task */
+        get: operations["klingImage2VideoQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/video-extend": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Video-Extend Task List */
+        get: operations["klingVideoExtendQueryTaskList"];
+        put?: never;
+        /** KlingAI Extend Video Duration */
+        post: operations["klingExtendVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/video-extend/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Video-Extend Task */
+        get: operations["klingVideoExtendQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/lip-sync": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Lip-Sync Task List */
+        get: operations["klingLipSyncQueryTaskList"];
+        put?: never;
+        /** KlingAI Create Lip-Sync Video */
+        post: operations["klingCreateLipSyncVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/lip-sync/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Lip-Sync Task */
+        get: operations["klingLipSyncQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/effects": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Video Effects Task List */
+        get: operations["klingVideoEffectsQueryTaskList"];
+        put?: never;
+        /** KlingAI Create Video Effects Task */
+        post: operations["klingCreateVideoEffects"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/videos/effects/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Video Effects Task */
+        get: operations["klingVideoEffectsQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/images/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Image Generation Task List */
+        get: operations["klingImageGenerationsQueryTaskList"];
+        put?: never;
+        /** KlingAI Create Image Generation Task */
+        post: operations["klingCreateImageGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/images/generations/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Image Generation Task */
+        get: operations["klingImageGenerationsQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/images/kolors-virtual-try-on": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Virtual Try-On Task List */
+        get: operations["klingVirtualTryOnQueryTaskList"];
+        put?: never;
+        /** KlingAI Create Virtual Try-On Task */
+        post: operations["klingCreateVirtualTryOn"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/images/kolors-virtual-try-on/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Virtual Try-On Task */
+        get: operations["klingVirtualTryOnQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ltx/v1/text-to-video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * LTX Video Generate Video from Text
+         * @description Generate a video from a text prompt using LTX Video AI models
+         */
+        post: operations["ltxCreateVideoFromText"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/ltx/v1/image-to-video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * LTX Video Generate Video from Image
+         * @description Transform a static image into a dynamic video using LTX Video AI models
+         */
+        post: operations["ltxCreateVideoFromImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-kontext-pro/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to BFL Flux Kontext Pro for image editing
+         * @description Forwards image editing requests to BFL's Flux Kontext Pro API and returns the results.
+         */
+        post: operations["bflFluxKontextProGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-kontext-max/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to BFL Flux Kontext Max for image editing
+         * @description Forwards image editing requests to BFL's Flux Kontext Max API and returns the results.
+         */
+        post: operations["bflFluxKontextMaxGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-pro-1.1/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to BFL Flux Pro 1.1 for image generation
+         * @description Forwards image generation requests to BFL's Flux Pro 1.1 API and returns the results.
+         */
+        post: operations["bflFluxPro1_1Generate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-pro-1.1-ultra/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to BFL Flux Pro 1.1 Ultra for image generation
+         * @description Forwards image generation requests to BFL's Flux Pro 1.1 Ultra API and returns the results.
+         */
+        post: operations["bflFluxProGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-pro-1.0-expand/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Expand an image by adding pixels on any side.
+         * @description Submits an image expansion task that adds the specified number of pixels to any combination of sides (top, bottom, left, right) while maintaining context.
+         */
+        post: operations["BFLExpand_v1_flux_pro_1_0_expand_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-pro-1.0-fill/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate an image with FLUX.1 Fill [pro] using an input image and mask.
+         * @description Submits an image generation task with the FLUX.1 Fill [pro] model using an input image and mask. Mask can be applied to alpha channel or submitted as a separate image.
+         */
+        post: operations["BFLFill_v1_flux_pro_1_0_fill_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-pro-1.0-canny/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate an image with FLUX.1 Canny [pro] using a control image.
+         * @description Submits an image generation task with FLUX.1 Canny [pro].
+         */
+        post: operations["BFLPro_canny_v1_flux_pro_1_0_canny_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/bfl/flux-pro-1.0-depth/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate an image with FLUX.1 Depth [pro] using a control image.
+         * @description Submits an image generation task with FLUX.1 Depth [pro].
+         */
+        post: operations["BFLPro_depth_v1_flux_pro_1_0_depth_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/luma/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create a generation
+         * @description Initiate a new generation with the provided prompt
+         */
+        post: operations["lumaCreateGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/luma/generations/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get a generation
+         * @description Retrieve details of a specific generation by its ID
+         */
+        get: operations["lumaGetGeneration"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/luma/generations/image": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate an image
+         * @description Generate an image with the provided prompt
+         */
+        post: operations["lumaGenerateImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pixverse/video/text/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate video from text prompt. */
+        post: operations["PixverseGenerateTextVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pixverse/video/img/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate video from image. */
+        post: operations["PixverseGenerateImageVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pixverse/video/transition/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate transition video between two images. */
+        post: operations["PixverseGenerateTransitionVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pixverse/image/upload": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Upload an image to the server. */
+        post: operations["PixverseUploadImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pixverse/video/result/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get the result of a video generation. */
+        get: operations["PixverseGetVideoResult"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/webhook/metronome/zero-balance": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** receive alert on remaining balance is 0 */
+        post: operations["metronomeZeroBalance"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/webhook/stripe/invoice-status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Handle Stripe invoice.paid webhook event */
+        post: operations["StripeInvoiceStatus"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/webhook/stripe/subscription": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Handle Stripe subscription webhook events */
+        post: operations["StripeSubscriptionWebhook"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/image_generation": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to Recraft for image generation
+         * @description Forwards image generation requests to Recraft's API and returns the generated images.
+         */
+        post: operations["recraftImageGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/images/vectorize": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Vectorize an image */
+        post: operations["recraftVectorize"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/images/crispUpscale": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Upscale an image */
+        post: operations["recraftCrispUpscale"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/images/removeBackground": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Remove background from an image */
+        post: operations["recraftRemoveBackground"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/images/imageToImage": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate image from image and prompt */
+        post: operations["RecraftImageToImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/images/inpaint": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Inpaint Image */
+        post: operations["RecraftInpaintImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/images/replaceBackground": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Replace Background */
+        post: operations["RecraftReplaceBackground"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/recraft/images/creativeUpscale": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Creative Upscale */
+        post: operations["RecraftCreativeUpscale"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/runway/image_to_video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Runway Image to Video Generation
+         * @description Converts an image to a video using Runway's API
+         */
+        post: operations["runwayImageToVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/runway/tasks/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Runway Task Status
+         * @description Get the status and output of a Runway task
+         */
+        get: operations["runwayGetTaskStatus"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/runway/text_to_image": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Runway Text to Image Generation
+         * @description Generates an image from text using Runway's API
+         */
+        post: operations["runwayTextToImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/veo/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate a video from a text prompt and optional image. Deprecated. Use /proxy/veo/{modelId}/generate instead. */
+        post: operations["veoGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/veo/poll": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Poll the status of a Veo prediction operation. Deprecated. Use /proxy/veo/{modelId}/generate instead. */
+        post: operations["veoPoll"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/veo/{modelId}/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate a video from a text prompt and optional image */
+        post: operations["veoGenerateNew"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/veo/{modelId}/poll": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Poll the status of a Veo prediction operation */
+        post: operations["veoPollNew"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/openai/v1/responses": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["createOpenAIResponse"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/openai/v1/responses/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieves a model response with the given ID. */
+        get: operations["getOpenAIResponse"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/openai/images/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate an image using OpenAI's models */
+        post: operations["openAIGenerateImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/openai/images/edits": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Edit an image using OpenAI's DALL-E model */
+        post: operations["openAIEditImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/openai/v1/videos": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a video using OpenAI's Sora model */
+        post: operations["openAICreateVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/openai/v1/videos/{video_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Retrieve a video */
+        get: operations["openAIGetVideo"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/openai/v1/videos/{video_id}/content": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Download video content */
+        get: operations["openAIDownloadVideoContent"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/generate/pikadditions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate Pikadditions */
+        post: operations["PikaGenerate_pikadditions_generate_pikadditions_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/generate/pikaswaps": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate Pikaswaps
+         * @description Exactly one of `modifyRegionMask` and `modifyRegionRoi` must be provided.
+         */
+        post: operations["PikaGenerate_pikaswaps_generate_pikaswaps_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/generate/pikaffects": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Generate Pikaffects
+         * @description Generate a video with a specific Pikaffect. Supported Pikaffects: Cake-ify, Crumble, Crush, Decapitate, Deflate, Dissolve, Explode, Eye-pop, Inflate, Levitate, Melt, Peel, Poke, Squish, Ta-da, Tear
+         */
+        post: operations["PikaGenerate_pikaffects_generate_pikaffects_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/generate/2.2/t2v": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate 2 2 T2V */
+        post: operations["PikaGenerate_2_2_t2v_generate_2_2_t2v_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/generate/2.2/pikaframes": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate 2 2 Keyframe */
+        post: operations["PikaGenerate_2_2_keyframe_generate_2_2_pikaframes_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/generate/2.2/pikascenes": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate 2 2 C2V */
+        post: operations["PikaGenerate_2_2_c2v_generate_2_2_pikascenes_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/generate/2.2/i2v": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate 2 2 I2V */
+        post: operations["PikaGenerate_2_2_i2v_generate_2_2_i2v_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/pika/videos/{video_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Video */
+        get: operations["PikaGet_video_videos__video_id__get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/stable-image/generate/ultra": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Stable Image Ultra
+         * @description Our most advanced text to image generation service, Stable Image Ultra creates the highest quality images with unprecedented prompt understanding. Ultra excels in typography, complex compositions, dynamic lighting, vibrant hues, and overall cohesion and structure of an art piece. Made from the most advanced models, including Stable Diffusion 3.5, Ultra offers the best of the Stable Diffusion ecosystem. ### Try it out Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=yXhs626oZdr1) ### How to use Please invoke this endpoint with a `POST` request. The headers of the request must include an API key in the `authorization` field. The body of the request must be `multipart/form-data`.  The accept header should be set to one of the following: - `image/*` to receive the image in the format specified by the `output_format` parameter. - `application/json` to receive the image in the format specified by the `output_format` parameter, but encoded to base64 in a JSON response. The only required parameter is the `prompt` field, which should contain the text prompt for the image generation. The body of the request should include: - `prompt` - text to generate the image from The body may optionally include: - `image` - the image to use as the starting point for the generation - `strength` - controls how much influence the `image` parameter has on the output image - `aspect_ratio` - the aspect ratio of the output image - `negative_prompt` - keywords of what you **do not** wish to see in the output image - `seed` - the randomness seed to use for the generation - `output_format` - the the format of the output image > **Note:** for the full list of optional parameters, please see the request schema below. ### Output The resolution of the generated image will be 1 megapixel. The default resolution is 1024x1024. ### Credits The Ultra service uses 8 credits per successful result. You will not be charged for failed results.
+         */
+        post: operations["StabilityImageGenrationUltra"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/stable-image/generate/sd3": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Stable Diffusion 3.5
+         * @description Generate using Stable Diffusion 3.5 models, Stability AI latest base model:
+         *
+         *     - **Stable Diffusion 3.5 Large**: At 8 billion parameters, with superior quality and
+         *
+         *
+         *
+         *       prompt adherence, this base model is the most powerful in the Stable Diffusion
+         *       family. This model is ideal for professional use cases at 1 megapixel resolution.
+         *
+         *     - **Stable Diffusion 3.5 Large Turbo**: A distilled version of Stable Diffusion 3.5 Large.
+         *
+         *
+         *
+         *       SD3.5 Large Turbo generates high-quality images with exceptional prompt adherence
+         *       in just 4 steps, making it considerably faster than Stable Diffusion 3.5 Large.
+         *
+         *     - **Stable Diffusion 3.5 Medium**: With 2.5 billion parameters, the model delivers an
+         *
+         *
+         *
+         *       optimal balance between prompt accuracy and image quality, making it an efficient
+         *       choice for fast high-performance image generation.
+         *
+         *     Read more about the model capabilities [here](https://stability.ai/news/introducing-stable-diffusion-3-5).
+         *
+         *     As of April 17, 2025, we have deprecated the Stable Diffusion 3.0 APIs and will be automatically
+         *     re-routing calls to Stable Diffusion 3.0 models to Stable Diffusion 3.5 APIs at no extra cost.
+         *     You can read more in the [release notes](/docs/release-notes#api-deprecation-notice).
+         *
+         *     ### Try it out
+         *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/SD3_API.ipynb)
+         *
+         *     ### How to use
+         *     Please invoke this endpoint with a `POST` request.
+         *
+         *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
+         *     `multipart/form-data`.  The accept header should be set to one of the following:
+         *     - `image/*` to receive the image in the format specified by the `output_format` parameter.
+         *     - `application/json` to receive the image encoded as base64 in a JSON response.
+         *
+         *     #### **Generating with a prompt**
+         *     Commonly referred to as **text-to-image**, this mode generates an image from text alone. While the only required
+         *     parameter is the `prompt`, it also supports an `aspect_ratio` parameter which can be used to control the
+         *     aspect ratio of the generated image.
+         *
+         *     #### **Generating with a prompt *and* an image**
+         *     Commonly referred to as **image-to-image**, this mode also generates an image from text but uses an existing image as the
+         *     starting point. The required parameters are:
+         *     - `prompt` - text to generate the image from
+         *     - `image` - the image to use as the starting point for the generation
+         *     - `strength` - controls how much influence the `image` parameter has on the output image
+         *     - `mode` - must be set to `image-to-image`
+         *
+         *     > **Note:** maximum request size is 10MiB.
+         *
+         *     #### **Optional Parameters:**
+         *     Both modes support the following optional parameters:
+         *     - `model` - the model to use (SD3.5 Large, SD3.5 Large Turbo, SD3.5 Medium)
+         *     - `output_format` - the the format of the output image
+         *     - `seed` - the randomness seed to use for the generation
+         *     - `negative_prompt` - keywords of what you **do not** wish to see in the output image
+         *     - `cfg_scale` - controls how strictly the diffusion process adheres to the prompt text
+         *     - `style_preset` - guides the image model towards a particular style
+         *
+         *     > **Note:** for more details about these parameters please see the request schema below.
+         *
+         *     ### Output
+         *     The resolution of the generated image will be 1MP. The default resolution is 1024x1024.
+         *
+         *     ### Credits
+         *     - **SD 3.5 Large**: Flat rate of 6.5 credits per successful generation.
+         *     - **SD 3.5 Large Turbo**: Flat rate of 4 credits per successful generation.
+         *     - **SD 3.5 Medium**: Flat rate of 3.5 credits per successful generation.
+         *
+         *     As always, you will not be charged for failed generations.
+         */
+        post: operations["StabilityImageGenrationSD3"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/stable-image/upscale/conservative": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Conservative
+         * @description Takes images between 64x64 and 1 megapixel and upscales them all the way to 4K resolution. Put more generally, it can upscale images ~20-40x times while preserving all aspects. Conservative Upscale minimizes alterations to the image and should not be used to reimagine an image.
+         *
+         *     ### Try it out
+         *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=t1Q4w2uvvza0)
+         *
+         *     ### How to use
+         *
+         *     Please invoke this endpoint with a `POST` request.
+         *
+         *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
+         *     `multipart/form-data`, and the `accept` header should be set to one of the following:
+         *
+         *
+         *
+         *       - `image/*` to receive the image in the format specified by the `output_format` parameter.
+         *       - `application/json` to receive the image encoded as base64 in a JSON response.
+         *
+         *     The body of the request must include:
+         *     - `image`
+         *     - `prompt`
+         *
+         *     Optionally, the body of the request may also include:
+         *     - `negative_prompt`
+         *     - `seed`
+         *     - `output_format`
+         *     - `creativity`
+         *
+         *     > **Note:** for more details about these parameters please see the request schema below.
+         *
+         *     ### Output
+         *     The resolution of the generated image will be 4 megapixels.
+         *
+         *     ### Credits
+         *     Flat rate of 25 credits per successful generation.  You will not be charged for failed generations.
+         */
+        post: operations["StabilityImageGenrationUpscaleConservative"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/stable-image/upscale/creative": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Creative Upscale (async)
+         * @description Takes images between 64x64 and 1 megapixel and upscales them all the way to **4K** resolution.  Put more
+         *     generally, it can upscale images ~20-40x times while preserving, and often enhancing, quality.
+         *     Creative Upscale **works best on highly degraded images and is not for photos of 1mp or above** as it performs
+         *     heavy reimagining (controlled by creativity scale).
+         *
+         *     ### Try it out
+         *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=QXxi9tfI425t)
+         *
+         *
+         *     ### How to use
+         *     Please invoke this endpoint with a `POST` request.
+         *
+         *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
+         *     `multipart/form-data`.
+         *
+         *     The body of the request should include:
+         *     - `image`
+         *     - `prompt`
+         *
+         *     The body may optionally include:
+         *     - `seed`
+         *     - `negative_prompt`
+         *     - `output_format`
+         *     - `creativity`
+         *     - `style_preset`
+         *
+         *     > **Note:** for more details about these parameters please see the request schema below.
+         *
+         *     ### Results
+         *     After invoking this endpoint with the required parameters, use the `id` in the response to poll for results at the
+         *     [results/{id} endpoint](#tag/Results/paths/~1v2beta~1results~1%7Bid%7D/get).  Rate-limiting or other errors may occur if you poll more than once every 10 seconds.
+         *
+         *     ### Credits
+         *     Flat rate of 25 credits per successful generation.  You will not be charged for failed generations.
+         */
+        post: operations["StabilityImageGenrationUpscaleCreative"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/stable-image/upscale/fast": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Fast
+         * @description Our Fast Upscaler service enhances image resolution by 4x using predictive and generative AI. This lightweight and fast service (processing in ~1 second) is ideal for enhancing the quality of compressed images, making it suitable for social media posts and other applications.
+         *
+         *     ### Try it out
+         *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=t1Q4w2uvvza0)
+         *
+         *     ### How to use
+         *
+         *     Please invoke this endpoint with a `POST` request.
+         *
+         *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
+         *     `multipart/form-data`, and the `accept` header should be set to one of the following:
+         *
+         *
+         *
+         *       - `image/*` to receive the image in the format specified by the `output_format` parameter.
+         *       - `application/json` to receive the image encoded as base64 in a JSON response.
+         *
+         *     The body of the request must include:
+         *     - `image`
+         *
+         *     Optionally, the body of the request may also include:
+         *     - `output_format`
+         *
+         *     > **Note:** for more details about these parameters please see the request schema below.
+         *
+         *     ### Output
+         *     The resolution of the generated image is 4 times that of the input image with a maximum size of 16 megapixels.
+         *
+         *     ### Credits
+         *     Flat rate of 1 credit per successful generation. You will not be charged for failed generations.
+         */
+        post: operations["StabilityImageGenerationUpscaleFast"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/results/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Result
+         * @description Get the result of a generation
+         */
+        get: operations["StabilityGetResult"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/audio/stable-audio-2/text-to-audio": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Proxy request to Stable Audio 2.5 for text-to-audio generation */
+        post: operations["stableAudio25TextToAudio"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/audio/stable-audio-2/audio-to-audio": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Proxy request to Stable Audio for audio-to-audio transformation */
+        post: operations["stableAudio25AudioToAudio"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/stability/v2beta/audio/stable-audio-2/inpaint": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Proxy request to Stable Audio 2.5 for audio inpainting */
+        post: operations["stableAudio25Inpaint"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vertexai/gemini/{model}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate content using a specified model. */
+        post: operations["GeminiGenerateContent"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vertexai/imagen/{model}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description image generation model */
+                model: "imagen-3.0-generate-002" | "imagen-3.0-generate-001" | "imagen-3.0-fast-generate-001" | "imagegeneration@006" | "imagegeneration@005" | "imagegeneration@002";
+            };
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Generate images from a text prompt */
+        post: operations["ImagenGenerateImages"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tripo/v2/openapi/task/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Task Status */
+        get: operations["tripoGetTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tripo/v2/openapi/upload": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Upload File for 3D Generation */
+        post: operations["tripoUploadFile"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tripo/v2/openapi/task": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create 3D Generation Task */
+        post: operations["tripoCreateTask"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/tripo/v2/openapi/user/balance": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Query Account Balance */
+        get: operations["tripoGetBalance"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/rodin/api/v2/rodin": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create 3D generate Task using Rodin API. */
+        post: operations["rodinGenerate3DAsset"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/rodin/api/v2/status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Check Rodin 3D Generate Status. */
+        post: operations["rodinCheckStatus"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/rodin/api/v2/download": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Get rodin 3D Assets download list. */
+        post: operations["rodinDownload"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/moonvalley/prompts/{prompt_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Prompt Details */
+        get: operations["MoonvalleyGetPrompt"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/moonvalley/prompts/text-to-video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create Text to Video Prompt */
+        post: operations["MoonvalleyTextToVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/moonvalley/prompts/text-to-image": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create Text to Image Prompt */
+        post: operations["MoonvalleyTextToImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/moonvalley/prompts/image-to-video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create Image to Video Prompt */
+        post: operations["MoonvalleyImageToVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/moonvalley/prompts/video-to-video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create Video to Video Prompt */
+        post: operations["MoonvalleyVideoToVideo"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/moonvalley/prompts/video-to-video/resize": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Resize a video */
+        post: operations["MoonvalleyVideoToVideoResize"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/moonvalley/uploads": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Upload Files */
+        post: operations["MoonvalleyUpload"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vidu/img2video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ViduImg2Video"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vidu/reference2video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ViduReference2Video"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vidu/start-end2video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ViduStartEnd2Video"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vidu/text2video": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ViduText2Video"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/vidu/tasks/{id}/creations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["ViduGetCreations"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/byteplus/api/v3/images/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["byteplusImageGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/byteplus/api/v3/contents/generations/tasks": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["byteplusVideoGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/byteplus/api/v3/contents/generations/tasks/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["byteplusVideoGenerationQuery"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wan/api/v1/services/aigc/video-generation/video-synthesis": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["wanVideoGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wan/api/v1/services/aigc/text2image/image-synthesis": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["wanImageGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wan/api/v1/services/aigc/image2image/image-synthesis": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["wanImage2ImageGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/wan/api/v1/tasks/{task_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["wanTaskQueryProxy"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+}
+export type webhooks = Record<string, never>;
+export interface components {
+    schemas: {
+        ClaimMyNodeRequest: {
+            /** @description GitHub token to verify if the user owns the repo of the node */
+            GH_TOKEN: string;
+        };
+        BulkNodeVersionsRequest: {
+            /** @description List of node ID and version pairs to retrieve */
+            node_versions: components["schemas"]["NodeVersionIdentifier"][];
+        };
+        NodeVersionIdentifier: {
+            /** @description The unique identifier of the node */
+            node_id: string;
+            /** @description The version of the node */
+            version: string;
+        };
+        BulkNodeVersionsResponse: {
+            /** @description List of retrieved node versions with their status */
+            node_versions: components["schemas"]["BulkNodeVersionResult"][];
+        };
+        BulkNodeVersionResult: {
+            /** @description The node and version identifier */
+            identifier: components["schemas"]["NodeVersionIdentifier"];
+            /**
+             * @description Status of the retrieval operation
+             * @enum {string}
+             */
+            status: "success" | "not_found" | "error";
+            /** @description The retrieved node version data (only present if status is success) */
+            node_version?: components["schemas"]["NodeVersion"];
+            /** @description Error message if retrieval failed (only present if status is error) */
+            error_message?: string;
+        };
+        PersonalAccessToken: {
+            /**
+             * Format: uuid
+             * @description Unique identifier for the GitCommit
+             */
+            id?: string;
+            /** @description Required. The name of the token. Can be a simple description. */
+            name?: string;
+            /** @description Optional. A more detailed description of the token's intended use. */
+            description?: string;
+            /**
+             * Format: date-time
+             * @description [Output Only]The date and time the token was created.
+             */
+            createdAt?: string;
+            /** @description [Output Only]. The personal access token. Only returned during creation. */
+            token?: string;
+        };
+        GitCommit: {
+            /**
+             * Format: uuid
+             * @description Unique identifier for the GitCommit
+             */
+            id?: string;
+            /** @description The hash of the commit */
+            commit_hash?: string;
+            /** @description The name of the commit */
+            commit_name?: string;
+            /** @description The branch where the commit was made */
+            branch_name?: string;
+            /** @description The author of the commit */
+            author?: string;
+            /**
+             * Format: date-time
+             * @description The timestamp when the commit was made
+             */
+            timestamp?: string;
+        };
+        GitCommitSummary: {
+            /** @description The hash of the commit */
+            commit_hash?: string;
+            /** @description The name of the commit */
+            commit_name?: string;
+            /** @description The branch where the commit was made */
+            branch_name?: string;
+            /** @description The author of the commit */
+            author?: string;
+            /**
+             * Format: date-time
+             * @description The timestamp when the commit was made
+             */
+            timestamp?: string;
+            /** @description A map of operating system to status pairs */
+            status_summary?: {
+                [key: string]: string;
+            };
+        };
+        User: {
+            /** @description The unique id for this user. */
+            id?: string;
+            /** @description The email address for this user. */
+            email?: string;
+            /** @description The name for this user. */
+            name?: string;
+            /** @description Indicates if the user is approved. */
+            isApproved?: boolean;
+            /** @description Indicates if the user has admin privileges. */
+            isAdmin?: boolean;
+        };
+        PublisherUser: {
+            /** @description The unique id for this user. */
+            id?: string;
+            /** @description The email address for this user. */
+            email?: string;
+            /** @description The name for this user. */
+            name?: string;
+        };
+        ErrorResponse: {
+            error: string;
+            message: string;
+        };
+        RunwayTextToImageRequest: {
+            /** @description Text prompt for the image generation */
+            promptText: string;
+            /**
+             * @description Model to use for generation
+             * @enum {string}
+             */
+            model: "gen4_image";
+            /** @description The resolution (aspect ratio) of the output image */
+            ratio: components["schemas"]["RunwayTextToImageAspectRatioEnum"];
+            /** @description Array of reference images to guide the generation */
+            referenceImages?: {
+                /** @description A HTTPS URL or data URI containing an encoded image */
+                uri?: string;
+            }[];
+        };
+        ActionJobResult: {
+            /**
+             * Format: uuid
+             * @description Unique identifier for the job result
+             */
+            id?: string;
+            /** @description Name of the workflow */
+            workflow_name?: string;
+            /** @description Operating system used */
+            operating_system?: string;
+            /** @description PyTorch version used */
+            python_version?: string;
+            /** @description PyTorch version used */
+            pytorch_version?: string;
+            /** @description Identifier of the run this result belongs to */
+            action_run_id?: string;
+            /** @description Identifier of the job this result belongs to */
+            action_job_id?: string;
+            /** @description CUDA version used */
+            cuda_version?: string;
+            /** @description Name of the relevant git branch */
+            branch_name?: string;
+            /** @description The hash of the commit */
+            commit_hash?: string;
+            /** @description The ID of the commit */
+            commit_id?: string;
+            /**
+             * Format: int64
+             * @description The Unix timestamp when the commit was made
+             */
+            commit_time?: number;
+            /** @description The message of the commit */
+            commit_message?: string;
+            /** @description The comfy run flags. E.g. `--low-vram` */
+            comfy_run_flags?: string;
+            /** @description The repository name */
+            git_repo?: string;
+            /** @description The pull request number */
+            pr_number?: string;
             /**
              * Format: int64
              * @description The start time of the job as a Unix timestamp.
              */
-            start_time: number
+            start_time?: number;
             /**
              * Format: int64
              * @description The end time of the job as a Unix timestamp.
              */
-            end_time: number
-            /** @description The average amount of VRAM used in the run. */
-            avg_vram?: number
-            /** @description The peak amount of VRAM used in the run. */
-            peak_vram?: number
-            /** @description The pull request number */
-            pr_number: string
+            end_time?: number;
+            /** @description The average VRAM used by the job */
+            avg_vram?: number;
+            /** @description The peak VRAM used by the job */
+            peak_vram?: number;
+            /** @description The user who triggered the job. */
+            job_trigger_user?: string;
             /** @description The author of the commit */
-            author: string
-            /** @description The user who triggered the job */
-            job_trigger_user: string
-            /** @description The python version used in the run */
-            python_version: string
-            /** @description The pytorch version used in the run */
-            pytorch_version?: string
-            machine_stats?: components['schemas']['MachineStats']
-            status: components['schemas']['WorkflowRunStatus']
-          }
-        }
-      }
-      responses: {
-        /** @description Successfully received the artifact details */
-        200: {
-          headers: {
-            [name: string]: unknown
-          }
-          content: {
-            'application/json': {
-              message?: string
-            }
-          }
-        }
-        /** @description Invalid request */
-        400: {
-          headers: {
-            [name: string]: unknown
-          }
-          content?: never
-        }
-        /** @description Internal server error */
-        500: {
-          headers: {
-            [name: string]: unknown
-          }
-          content?: never
-        }
-      }
-    }
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/gitcommit': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Retrieve CI data for a given commit
-     * @description Returns all runs, jobs, job results, and storage files associated with a given commit.
-     */
-    get: {
-      parameters: {
-        query?: {
-          /** @description The ID of the commit to fetch data for. */
-          commitId?: string
-          /** @description The operating system to filter the CI data by. */
-          operatingSystem?: string
-          /** @description The name of the workflow to filter the CI data by. */
-          workflowName?: string
-          /** @description The branch of the gitcommit to filter the CI data by. */
-          branch?: string
-          /** @description The page number to retrieve. */
-          page?: number
-          /** @description The number of items to include per page. */
-          pageSize?: number
-          /** @description The repo to filter by. */
-          repoName?: string
-        }
-        header?: never
-        path?: never
-        cookie?: never
-      }
-      requestBody?: never
-      responses: {
-        /** @description An object containing runs, jobs, job results, and storage files */
-        200: {
-          headers: {
-            [name: string]: unknown
-          }
-          content: {
-            'application/json': {
-              jobResults?: components['schemas']['ActionJobResult'][]
-              totalNumberOfPages?: number
-            }
-          }
-        }
-        /** @description Commit not found */
-        404: {
-          headers: {
-            [name: string]: unknown
-          }
-          content?: never
-        }
-        /** @description Internal server error */
-        500: {
-          headers: {
-            [name: string]: unknown
-          }
-          content?: never
-        }
-      }
-    }
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/gitcommitsummary': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Retrieve a summary of git commits
-     * @description Returns a summary of git commits, including status, start time, and end time.
-     */
-    get: {
-      parameters: {
-        query?: {
-          /** @description The repository name to filter the git commits by. */
-          repoName?: string
-          /** @description The branch name to filter the git commits by. */
-          branchName?: string
-          /** @description The page number to retrieve. */
-          page?: number
-          /** @description The number of items to include per page. */
-          pageSize?: number
-        }
-        header?: never
-        path?: never
-        cookie?: never
-      }
-      requestBody?: never
-      responses: {
-        /** @description Successfully retrieved git commit summaries */
-        200: {
-          headers: {
-            [name: string]: unknown
-          }
-          content: {
-            'application/json': {
-              commitSummaries?: components['schemas']['GitCommitSummary'][]
-              totalNumberOfPages?: number
-            }
-          }
-        }
-        /** @description Internal server error */
-        500: {
-          headers: {
-            [name: string]: unknown
-          }
-          content: {
-            'application/json': {
-              message?: string
-            }
-          }
-        }
-      }
-    }
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/workflowresult/{workflowResultId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve a specific commit by ID */
-    get: operations['getWorkflowResult']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/branch': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Retrieve all distinct branches for a given repo
-     * @description Returns all branches for a given repo.
-     */
-    get: {
-      parameters: {
-        query: {
-          /** @description The repo to filter by. */
-          repo_name: string
-        }
-        header?: never
-        path?: never
-        cookie?: never
-      }
-      requestBody?: never
-      responses: {
-        /** @description An array of branches */
-        200: {
-          headers: {
-            [name: string]: unknown
-          }
-          content: {
-            'application/json': {
-              branches?: string[]
-            }
-          }
-        }
-        /** @description Repo not found */
-        404: {
-          headers: {
-            [name: string]: unknown
-          }
-          content?: never
-        }
-        /** @description Internal server error */
-        500: {
-          headers: {
-            [name: string]: unknown
-          }
-          content?: never
-        }
-      }
-    }
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/users/publishers/': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve all publishers for a given user */
-    get: operations['listPublishersForUser']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/permissions': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve permissions the user has for a given publisher */
-    get: operations['getPermissionOnPublisher']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/validate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Validate if a publisher username is available
-     * @description Checks if the publisher username is already taken.
-     */
-    get: operations['validatePublisher']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve all publishers */
-    get: operations['listPublishers']
-    put?: never
-    /** Create a new publisher */
-    post: operations['createPublisher']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve a publisher by ID */
-    get: operations['getPublisher']
-    /** Update a publisher */
-    put: operations['updatePublisher']
-    post?: never
-    /** Delete a publisher */
-    delete: operations['deletePublisher']
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/ban': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Ban a publisher */
-    post: operations['BanPublisher']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes/{nodeId}/claim-my-node': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Claim nodeId into publisherId for the authenticated publisher
-     * @description This endpoint allows a publisher to claim an unclaimed node that they own the repo, which is identified by the nodeId. The unclaimed node's repository must be owned by the authenticated user.
-     *
-     */
-    post: operations['claimMyNode']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes/v2': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve all nodes */
-    get: operations['listNodesForPublisherV2']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve all nodes */
-    get: operations['listNodesForPublisher']
-    put?: never
-    /** Create a new custom node */
-    post: operations['createNode']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes/{nodeId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    /** Update a specific node */
-    put: operations['updateNode']
-    post?: never
-    /** Delete a specific node */
-    delete: operations['deleteNode']
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes/{nodeId}/permissions': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve permissions the user has for a given publisher */
-    get: operations['getPermissionOnPublisherNodes']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes/{nodeId}/versions': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Publish a new version of a node */
-    post: operations['publishNodeVersion']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes/{nodeId}/versions/{versionId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    /**
-     * Update changelog and deprecation status of a node version
-     * @description Update only the changelog and deprecated status of a specific version of a node.
-     */
-    put: operations['updateNodeVersion']
-    post?: never
-    /** Unpublish (delete) a specific version of a node */
-    delete: operations['deleteNodeVersion']
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/nodes/{nodeId}/ban': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Ban a publisher's Node */
-    post: operations['BanPublisherNode']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/tokens': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve all personal access tokens for a publisher */
-    get: operations['listPersonalAccessTokens']
-    put?: never
-    /** Create a new personal access token */
-    post: operations['createPersonalAccessToken']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/publishers/{publisherId}/tokens/{tokenId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    post?: never
-    /** Delete a specific personal access token */
-    delete: operations['deletePersonalAccessToken']
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/search': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Retrieves a list of nodes
-     * @description Returns a paginated list of nodes across all publishers.
-     */
-    get: operations['searchNodes']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/reindex': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Reindex all nodes for searching. */
-    post: operations['reindexNodes']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/update-github-stars': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Update GitHub stars for nodes */
-    post: operations['updateGithubStars']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Retrieves a list of nodes
-     * @description Returns a paginated list of nodes across all publishers.
-     */
-    get: operations['listAllNodes']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/comfy-nodes/{comfyNodeName}/node': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Retrieve a node by ComfyUI node name
-     * @description Returns the node that contains a ComfyUI node with the specified name
-     */
-    get: operations['getNodeByComfyNodeName']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Retrieve a specific node by ID
-     * @description Returns the details of a specific node.
-     */
-    get: operations['getNode']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}/reviews': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Add review to a specific version of a node */
-    post: operations['postNodeReview']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}/install': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Returns a node version to be installed.
-     * @description Retrieves the node data for installation, either the latest or a specific version.
-     */
-    get: operations['installNode']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}/translations': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create Node Translations */
-    post: operations['CreateNodeTranslations']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}/versions': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** List all versions of a node */
-    get: operations['listNodeVersions']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}/versions/{versionId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieve a specific version of a node */
-    get: operations['getNodeVersion']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/bulk/nodes/versions': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Retrieve multiple node versions in a single request */
-    post: operations['getBulkNodeVersions']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/versions': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** List all node versions given some filters. */
-    get: operations['listAllNodeVersions']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/admin/nodes': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create a new custom node using admin privilege */
-    post: operations['adminCreateNode']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/admin/nodes/{nodeId}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    /**
-     * Admin Update Node
-     * @description Only admins can update a node with admin privileges.
-     */
-    put: operations['adminUpdateNode']
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/admin/nodes/{nodeId}/versions/{versionNumber}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    /**
-     * Admin Update Node Version Status
-     * @description Only admins can approve a node version.
-     */
-    put: operations['adminUpdateNodeVersion']
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/releases': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get release notes
-     * @description Fetch release notes from Strapi with caching
-     */
-    get: operations['getReleaseNotes']
-    put?: never
-    /**
-     * Process Github release webhook
-     * @description Webhook endpoint to process Github release events and generate release notes
-     */
-    post: operations['processReleaseWebhook']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/security-scan': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Security Scan
-     * @description Pull all pending node versions and conduct security scans.
-     */
-    get: operations['securityScan']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}/versions/{version}/comfy-nodes': {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        nodeId: string
-        version: string
-      }
-      cookie?: never
-    }
-    /** list comfy-nodes for certain node */
-    get: operations['ListComfyNodes']
-    put?: never
-    /** create comfy-nodes for certain node */
-    post: operations['CreateComfyNodes']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/nodes/{nodeId}/versions/{version}/comfy-nodes/{comfyNodeName}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** get specify comfy-node based on its id */
-    get: operations['GetComfyNode']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/comfy-nodes/backfill': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** trigger comfy nodes backfill */
-    post: operations['ComfyNodesBackfill']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/dummy': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Dummy proxy
-     * @description Dummy proxy endpoint that returns a simple string
-     */
-    post: operations['dummyProxy']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/minimax/video_generation': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to Minimax for video generation
-     * @description Forwards video generation requests to Minimax's API and returns the task ID for asynchronous processing.
-     */
-    post: operations['minimaxVideoGeneration']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/minimax/query/video_generation': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Query status of a Minimax video generation task
-     * @description Proxies a request to Minimax to check the status of a video generation task
-     */
-    get: operations['getMinimaxVideoGeneration']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/minimax/files/retrieve': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Retrieve download URL for a Minimax file
-     * @description Proxies a request to Minimax to get the download URL for a file
-     */
-    post: operations['retrieveMinimaxFile']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/ideogram/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to Ideogram for image generation
-     * @description Forwards image generation requests to Ideogram's API and returns the results.
-     */
-    post: operations['ideogramGenerate']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/ideogram/ideogram-v3/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to Ideogram for image generation
-     * @description Forwards image generation requests to Ideogram's API and returns the results.
-     */
-    post: operations['ideogramV3Generate']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/ideogram/ideogram-v3/edit': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to Ideogram for image editing
-     * @description Forwards image editing requests to Ideogram's API and returns the results.
-     */
-    post: operations['ideogramV3Edit']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/ideogram/ideogram-v3/remix': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Remix an image using a prompt */
-    post: operations['ideogramV3Remix']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/ideogram/ideogram-v3/reframe': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Reframe an image to a chosen resolution */
-    post: operations['ideogramV3Reframe']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/ideogram/ideogram-v3/replace-background': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Replace background of an image using a prompt */
-    post: operations['ideogramV3ReplaceBackground']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/account/costs': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Resource Package Information */
-    get: operations['klingQueryResourcePackages']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/text2video': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Task List */
-    get: operations['klingText2VideoQueryTaskList']
-    put?: never
-    /** KlingAI Create Video from Text */
-    post: operations['klingCreateVideoFromText']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/text2video/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Single Task */
-    get: operations['klingText2VideoQuerySingleTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/image2video': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Image2Video Task List */
-    get: operations['klingImage2VideoQueryTaskList']
-    put?: never
-    /** KlingAI Create Video from Image */
-    post: operations['klingCreateVideoFromImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/image2video/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Single Image2Video Task */
-    get: operations['klingImage2VideoQuerySingleTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/video-extend': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Video-Extend Task List */
-    get: operations['klingVideoExtendQueryTaskList']
-    put?: never
-    /** KlingAI Extend Video Duration */
-    post: operations['klingExtendVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/video-extend/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Single Video-Extend Task */
-    get: operations['klingVideoExtendQuerySingleTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/lip-sync': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Lip-Sync Task List */
-    get: operations['klingLipSyncQueryTaskList']
-    put?: never
-    /** KlingAI Create Lip-Sync Video */
-    post: operations['klingCreateLipSyncVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/lip-sync/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Single Lip-Sync Task */
-    get: operations['klingLipSyncQuerySingleTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/effects': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Video Effects Task List */
-    get: operations['klingVideoEffectsQueryTaskList']
-    put?: never
-    /** KlingAI Create Video Effects Task */
-    post: operations['klingCreateVideoEffects']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/videos/effects/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Single Video Effects Task */
-    get: operations['klingVideoEffectsQuerySingleTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/images/generations': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Image Generation Task List */
-    get: operations['klingImageGenerationsQueryTaskList']
-    put?: never
-    /** KlingAI Create Image Generation Task */
-    post: operations['klingCreateImageGeneration']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/images/generations/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Single Image Generation Task */
-    get: operations['klingImageGenerationsQuerySingleTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/images/kolors-virtual-try-on': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Virtual Try-On Task List */
-    get: operations['klingVirtualTryOnQueryTaskList']
-    put?: never
-    /** KlingAI Create Virtual Try-On Task */
-    post: operations['klingCreateVirtualTryOn']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/kling/v1/images/kolors-virtual-try-on/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** KlingAI Query Single Virtual Try-On Task */
-    get: operations['klingVirtualTryOnQuerySingleTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-kontext-pro/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to BFL Flux Kontext Pro for image editing
-     * @description Forwards image editing requests to BFL's Flux Kontext Pro API and returns the results.
-     */
-    post: operations['bflFluxKontextProGenerate']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-kontext-max/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to BFL Flux Kontext Max for image editing
-     * @description Forwards image editing requests to BFL's Flux Kontext Max API and returns the results.
-     */
-    post: operations['bflFluxKontextMaxGenerate']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-pro-1.1/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to BFL Flux Pro 1.1 for image generation
-     * @description Forwards image generation requests to BFL's Flux Pro 1.1 API and returns the results.
-     */
-    post: operations['bflFluxPro1_1Generate']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-pro-1.1-ultra/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to BFL Flux Pro 1.1 Ultra for image generation
-     * @description Forwards image generation requests to BFL's Flux Pro 1.1 Ultra API and returns the results.
-     */
-    post: operations['bflFluxProGenerate']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-pro-1.0-expand/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Expand an image by adding pixels on any side.
-     * @description Submits an image expansion task that adds the specified number of pixels to any combination of sides (top, bottom, left, right) while maintaining context.
-     */
-    post: operations['BFLExpand_v1_flux_pro_1_0_expand_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-pro-1.0-fill/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Generate an image with FLUX.1 Fill [pro] using an input image and mask.
-     * @description Submits an image generation task with the FLUX.1 Fill [pro] model using an input image and mask. Mask can be applied to alpha channel or submitted as a separate image.
-     */
-    post: operations['BFLFill_v1_flux_pro_1_0_fill_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-pro-1.0-canny/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Generate an image with FLUX.1 Canny [pro] using a control image.
-     * @description Submits an image generation task with FLUX.1 Canny [pro].
-     */
-    post: operations['BFLPro_canny_v1_flux_pro_1_0_canny_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/bfl/flux-pro-1.0-depth/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Generate an image with FLUX.1 Depth [pro] using a control image.
-     * @description Submits an image generation task with FLUX.1 Depth [pro].
-     */
-    post: operations['BFLPro_depth_v1_flux_pro_1_0_depth_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/luma/generations': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Create a generation
-     * @description Initiate a new generation with the provided prompt
-     */
-    post: operations['lumaCreateGeneration']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/luma/generations/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get a generation
-     * @description Retrieve details of a specific generation by its ID
-     */
-    get: operations['lumaGetGeneration']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/luma/generations/image': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Generate an image
-     * @description Generate an image with the provided prompt
-     */
-    post: operations['lumaGenerateImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pixverse/video/text/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate video from text prompt. */
-    post: operations['PixverseGenerateTextVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pixverse/video/img/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate video from image. */
-    post: operations['PixverseGenerateImageVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pixverse/video/transition/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate transition video between two images. */
-    post: operations['PixverseGenerateTransitionVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pixverse/image/upload': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Upload an image to the server. */
-    post: operations['PixverseUploadImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pixverse/video/result/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Get the result of a video generation. */
-    get: operations['PixverseGetVideoResult']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/webhook/metronome/zero-balance': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** receive alert on remaining balance is 0 */
-    post: operations['metronomeZeroBalance']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/webhook/stripe/invoice-status': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Handle Stripe checkout.session.completed webhook event */
-    post: operations['StripeInvoiceStatus']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/image_generation': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Proxy request to Recraft for image generation
-     * @description Forwards image generation requests to Recraft's API and returns the generated images.
-     */
-    post: operations['recraftImageGeneration']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/images/vectorize': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Vectorize an image */
-    post: operations['recraftVectorize']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/images/crispUpscale': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Upscale an image */
-    post: operations['recraftCrispUpscale']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/images/removeBackground': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Remove background from an image */
-    post: operations['recraftRemoveBackground']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/images/imageToImage': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate image from image and prompt */
-    post: operations['RecraftImageToImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/images/inpaint': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Inpaint Image */
-    post: operations['RecraftInpaintImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/images/replaceBackground': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Replace Background */
-    post: operations['RecraftReplaceBackground']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/recraft/images/creativeUpscale': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Creative Upscale */
-    post: operations['RecraftCreativeUpscale']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/runway/image_to_video': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Runway Image to Video Generation
-     * @description Converts an image to a video using Runway's API
-     */
-    post: operations['runwayImageToVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/runway/tasks/{task_id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get Runway Task Status
-     * @description Get the status and output of a Runway task
-     */
-    get: operations['runwayGetTaskStatus']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/runway/text_to_image': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Runway Text to Image Generation
-     * @description Generates an image from text using Runway's API
-     */
-    post: operations['runwayTextToImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/veo/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate a video from a text prompt and optional image. Deprecated. Use /proxy/veo/{modelId}/generate instead. */
-    post: operations['veoGenerate']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/veo/poll': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Poll the status of a Veo prediction operation. Deprecated. Use /proxy/veo/{modelId}/generate instead. */
-    post: operations['veoPoll']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/veo/{modelId}/generate': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate a video from a text prompt and optional image */
-    post: operations['veoGenerateNew']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/veo/{modelId}/poll': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Poll the status of a Veo prediction operation */
-    post: operations['veoPollNew']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/openai/v1/responses': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    post: operations['createOpenAIResponse']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/openai/v1/responses/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Retrieves a model response with the given ID.
-     *      */
-    get: operations['getOpenAIResponse']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/openai/images/generations': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate an image using OpenAI's models */
-    post: operations['openAIGenerateImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/openai/images/edits': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Edit an image using OpenAI's DALL-E model */
-    post: operations['openAIEditImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/generate/pikadditions': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate Pikadditions */
-    post: operations['PikaGenerate_pikadditions_generate_pikadditions_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/generate/pikaswaps': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Generate Pikaswaps
-     * @description Exactly one of `modifyRegionMask` and `modifyRegionRoi` must be provided.
-     */
-    post: operations['PikaGenerate_pikaswaps_generate_pikaswaps_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/generate/pikaffects': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Generate Pikaffects
-     * @description Generate a video with a specific Pikaffect. Supported Pikaffects: Cake-ify, Crumble, Crush, Decapitate, Deflate, Dissolve, Explode, Eye-pop, Inflate, Levitate, Melt, Peel, Poke, Squish, Ta-da, Tear
-     */
-    post: operations['PikaGenerate_pikaffects_generate_pikaffects_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/generate/2.2/t2v': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate 2 2 T2V */
-    post: operations['PikaGenerate_2_2_t2v_generate_2_2_t2v_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/generate/2.2/pikaframes': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate 2 2 Keyframe */
-    post: operations['PikaGenerate_2_2_keyframe_generate_2_2_pikaframes_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/generate/2.2/pikascenes': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate 2 2 C2V */
-    post: operations['PikaGenerate_2_2_c2v_generate_2_2_pikascenes_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/generate/2.2/i2v': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate 2 2 I2V */
-    post: operations['PikaGenerate_2_2_i2v_generate_2_2_i2v_post']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/pika/videos/{video_id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Get Video */
-    get: operations['PikaGet_video_videos__video_id__get']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/stability/v2beta/stable-image/generate/ultra': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Stable Image Ultra
-     * @description Our most advanced text to image generation service, Stable Image Ultra creates the highest quality images with unprecedented prompt understanding. Ultra excels in typography, complex compositions, dynamic lighting, vibrant hues, and overall cohesion and structure of an art piece. Made from the most advanced models, including Stable Diffusion 3.5, Ultra offers the best of the Stable Diffusion ecosystem. ### Try it out Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=yXhs626oZdr1) ### How to use Please invoke this endpoint with a `POST` request. The headers of the request must include an API key in the `authorization` field. The body of the request must be `multipart/form-data`.  The accept header should be set to one of the following: - `image/*` to receive the image in the format specified by the `output_format` parameter. - `application/json` to receive the image in the format specified by the `output_format` parameter, but encoded to base64 in a JSON response. The only required parameter is the `prompt` field, which should contain the text prompt for the image generation. The body of the request should include: - `prompt` - text to generate the image from The body may optionally include: - `image` - the image to use as the starting point for the generation - `strength` - controls how much influence the `image` parameter has on the output image - `aspect_ratio` - the aspect ratio of the output image - `negative_prompt` - keywords of what you **do not** wish to see in the output image - `seed` - the randomness seed to use for the generation - `output_format` - the the format of the output image > **Note:** for the full list of optional parameters, please see the request schema below. ### Output The resolution of the generated image will be 1 megapixel. The default resolution is 1024x1024. ### Credits The Ultra service uses 8 credits per successful result. You will not be charged for failed results.
-     */
-    post: operations['StabilityImageGenrationUltra']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/stability/v2beta/stable-image/generate/sd3': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Stable Diffusion 3.5
-     * @description Generate using Stable Diffusion 3.5 models, Stability AI latest base model:
-     *
-     *     - **Stable Diffusion 3.5 Large**: At 8 billion parameters, with superior quality and
-     *
-     *
-     *
-     *       prompt adherence, this base model is the most powerful in the Stable Diffusion
-     *       family. This model is ideal for professional use cases at 1 megapixel resolution.
-     *
-     *     - **Stable Diffusion 3.5 Large Turbo**: A distilled version of Stable Diffusion 3.5 Large.
-     *
-     *
-     *
-     *       SD3.5 Large Turbo generates high-quality images with exceptional prompt adherence
-     *       in just 4 steps, making it considerably faster than Stable Diffusion 3.5 Large.
-     *
-     *     - **Stable Diffusion 3.5 Medium**: With 2.5 billion parameters, the model delivers an
-     *
-     *
-     *
-     *       optimal balance between prompt accuracy and image quality, making it an efficient
-     *       choice for fast high-performance image generation.
-     *
-     *     Read more about the model capabilities [here](https://stability.ai/news/introducing-stable-diffusion-3-5).
-     *
-     *     As of April 17, 2025, we have deprecated the Stable Diffusion 3.0 APIs and will be automatically
-     *     re-routing calls to Stable Diffusion 3.0 models to Stable Diffusion 3.5 APIs at no extra cost.
-     *     You can read more in the [release notes](/docs/release-notes#api-deprecation-notice).
-     *
-     *     ### Try it out
-     *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/SD3_API.ipynb)
-     *
-     *     ### How to use
-     *     Please invoke this endpoint with a `POST` request.
-     *
-     *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
-     *     `multipart/form-data`.  The accept header should be set to one of the following:
-     *     - `image/*` to receive the image in the format specified by the `output_format` parameter.
-     *     - `application/json` to receive the image encoded as base64 in a JSON response.
-     *
-     *     #### **Generating with a prompt**
-     *     Commonly referred to as **text-to-image**, this mode generates an image from text alone. While the only required
-     *     parameter is the `prompt`, it also supports an `aspect_ratio` parameter which can be used to control the
-     *     aspect ratio of the generated image.
-     *
-     *     #### **Generating with a prompt *and* an image**
-     *     Commonly referred to as **image-to-image**, this mode also generates an image from text but uses an existing image as the
-     *     starting point. The required parameters are:
-     *     - `prompt` - text to generate the image from
-     *     - `image` - the image to use as the starting point for the generation
-     *     - `strength` - controls how much influence the `image` parameter has on the output image
-     *     - `mode` - must be set to `image-to-image`
-     *
-     *     > **Note:** maximum request size is 10MiB.
-     *
-     *     #### **Optional Parameters:**
-     *     Both modes support the following optional parameters:
-     *     - `model` - the model to use (SD3.5 Large, SD3.5 Large Turbo, SD3.5 Medium)
-     *     - `output_format` - the the format of the output image
-     *     - `seed` - the randomness seed to use for the generation
-     *     - `negative_prompt` - keywords of what you **do not** wish to see in the output image
-     *     - `cfg_scale` - controls how strictly the diffusion process adheres to the prompt text
-     *     - `style_preset` - guides the image model towards a particular style
-     *
-     *     > **Note:** for more details about these parameters please see the request schema below.
-     *
-     *     ### Output
-     *     The resolution of the generated image will be 1MP. The default resolution is 1024x1024.
-     *
-     *     ### Credits
-     *     - **SD 3.5 Large**: Flat rate of 6.5 credits per successful generation.
-     *     - **SD 3.5 Large Turbo**: Flat rate of 4 credits per successful generation.
-     *     - **SD 3.5 Medium**: Flat rate of 3.5 credits per successful generation.
-     *
-     *     As always, you will not be charged for failed generations.
-     */
-    post: operations['StabilityImageGenrationSD3']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/stability/v2beta/stable-image/upscale/conservative': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Conservative
-     * @description Takes images between 64x64 and 1 megapixel and upscales them all the way to 4K resolution. Put more generally, it can upscale images ~20-40x times while preserving all aspects. Conservative Upscale minimizes alterations to the image and should not be used to reimagine an image.
-     *
-     *     ### Try it out
-     *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=t1Q4w2uvvza0)
-     *
-     *     ### How to use
-     *
-     *     Please invoke this endpoint with a `POST` request.
-     *
-     *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
-     *     `multipart/form-data`, and the `accept` header should be set to one of the following:
-     *
-     *
-     *
-     *       - `image/*` to receive the image in the format specified by the `output_format` parameter.
-     *       - `application/json` to receive the image encoded as base64 in a JSON response.
-     *
-     *     The body of the request must include:
-     *     - `image`
-     *     - `prompt`
-     *
-     *     Optionally, the body of the request may also include:
-     *     - `negative_prompt`
-     *     - `seed`
-     *     - `output_format`
-     *     - `creativity`
-     *
-     *     > **Note:** for more details about these parameters please see the request schema below.
-     *
-     *     ### Output
-     *     The resolution of the generated image will be 4 megapixels.
-     *
-     *     ### Credits
-     *     Flat rate of 25 credits per successful generation.  You will not be charged for failed generations.
-     */
-    post: operations['StabilityImageGenrationUpscaleConservative']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/stability/v2beta/stable-image/upscale/creative': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Creative Upscale (async)
-     * @description Takes images between 64x64 and 1 megapixel and upscales them all the way to **4K** resolution.  Put more
-     *     generally, it can upscale images ~20-40x times while preserving, and often enhancing, quality.
-     *     Creative Upscale **works best on highly degraded images and is not for photos of 1mp or above** as it performs
-     *     heavy reimagining (controlled by creativity scale).
-     *
-     *     ### Try it out
-     *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=QXxi9tfI425t)
-     *
-     *
-     *     ### How to use
-     *     Please invoke this endpoint with a `POST` request.
-     *
-     *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
-     *     `multipart/form-data`.
-     *
-     *     The body of the request should include:
-     *     - `image`
-     *     - `prompt`
-     *
-     *     The body may optionally include:
-     *     - `seed`
-     *     - `negative_prompt`
-     *     - `output_format`
-     *     - `creativity`
-     *     - `style_preset`
-     *
-     *     > **Note:** for more details about these parameters please see the request schema below.
-     *
-     *     ### Results
-     *     After invoking this endpoint with the required parameters, use the `id` in the response to poll for results at the
-     *     [results/{id} endpoint](#tag/Results/paths/~1v2beta~1results~1%7Bid%7D/get).  Rate-limiting or other errors may occur if you poll more than once every 10 seconds.
-     *
-     *     ### Credits
-     *     Flat rate of 25 credits per successful generation.  You will not be charged for failed generations.
-     */
-    post: operations['StabilityImageGenrationUpscaleCreative']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/stability/v2beta/stable-image/upscale/fast': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /**
-     * Fast
-     * @description Our Fast Upscaler service enhances image resolution by 4x using predictive and generative AI. This lightweight and fast service (processing in ~1 second) is ideal for enhancing the quality of compressed images, making it suitable for social media posts and other applications.
-     *
-     *     ### Try it out
-     *     Grab your [API key](https://platform.stability.ai/account/keys) and head over to [![Open Google Colab](https://platform.stability.ai/svg/google-colab.svg)](https://colab.research.google.com/github/stability-ai/stability-sdk/blob/main/nbs/Stable_Image_API_Public.ipynb#scrollTo=t1Q4w2uvvza0)
-     *
-     *     ### How to use
-     *
-     *     Please invoke this endpoint with a `POST` request.
-     *
-     *     The headers of the request must include an API key in the `authorization` field. The body of the request must be
-     *     `multipart/form-data`, and the `accept` header should be set to one of the following:
-     *
-     *
-     *
-     *       - `image/*` to receive the image in the format specified by the `output_format` parameter.
-     *       - `application/json` to receive the image encoded as base64 in a JSON response.
-     *
-     *     The body of the request must include:
-     *     - `image`
-     *
-     *     Optionally, the body of the request may also include:
-     *     - `output_format`
-     *
-     *     > **Note:** for more details about these parameters please see the request schema below.
-     *
-     *     ### Output
-     *     The resolution of the generated image is 4 times that of the input image with a maximum size of 16 megapixels.
-     *
-     *     ### Credits
-     *     Flat rate of 1 credit per successful generation. You will not be charged for failed generations.
-     */
-    post: operations['StabilityImageGenerationUpscaleFast']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/stability/v2beta/results/{id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /**
-     * Get Result
-     * @description Get the result of a generation
-     */
-    get: operations['StabilityGetResult']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/vertexai/gemini/{model}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate content using a specified model. */
-    post: operations['GeminiGenerateContent']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/vertexai/imagen/{model}': {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description image generation model */
-        model:
-          | 'imagen-3.0-generate-002'
-          | 'imagen-3.0-generate-001'
-          | 'imagen-3.0-fast-generate-001'
-          | 'imagegeneration@006'
-          | 'imagegeneration@005'
-          | 'imagegeneration@002'
-      }
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Generate images from a text prompt */
-    post: operations['ImagenGenerateImages']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/tripo/v2/openapi/task/{task_id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Get Task Status */
-    get: operations['tripoGetTask']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/tripo/v2/openapi/upload': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Upload File for 3D Generation */
-    post: operations['tripoUploadFile']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/tripo/v2/openapi/task': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create 3D Generation Task */
-    post: operations['tripoCreateTask']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/tripo/v2/openapi/user/balance': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Query Account Balance */
-    get: operations['tripoGetBalance']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/rodin/api/v2/rodin': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create 3D generate Task using Rodin API. */
-    post: operations['rodinGenerate3DAsset']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/rodin/api/v2/status': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Check Rodin 3D Generate Status. */
-    post: operations['rodinCheckStatus']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/rodin/api/v2/download': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Get rodin 3D Assets download list. */
-    post: operations['rodinDownload']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/moonvalley/prompts/{prompt_id}': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** Get Prompt Details */
-    get: operations['MoonvalleyGetPrompt']
-    put?: never
-    post?: never
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/moonvalley/prompts/text-to-video': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create Text to Video Prompt */
-    post: operations['MoonvalleyTextToVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/moonvalley/prompts/text-to-image': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create Text to Image Prompt */
-    post: operations['MoonvalleyTextToImage']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/moonvalley/prompts/image-to-video': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create Image to Video Prompt */
-    post: operations['MoonvalleyImageToVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/moonvalley/prompts/video-to-video': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Create Video to Video Prompt */
-    post: operations['MoonvalleyVideoToVideo']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/moonvalley/prompts/video-to-video/resize': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Resize a video */
-    post: operations['MoonvalleyVideoToVideoResize']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-  '/proxy/moonvalley/uploads': {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    get?: never
-    put?: never
-    /** Upload Files */
-    post: operations['MoonvalleyUpload']
-    delete?: never
-    options?: never
-    head?: never
-    patch?: never
-    trace?: never
-  }
-}
-export type webhooks = Record<string, never>
-export interface components {
-  schemas: {
-    ClaimMyNodeRequest: {
-      /** @description GitHub token to verify if the user owns the repo of the node */
-      GH_TOKEN: string
-    }
-    BulkNodeVersionsRequest: {
-      /** @description List of node ID and version pairs to retrieve */
-      node_versions: components['schemas']['NodeVersionIdentifier'][]
-    }
-    NodeVersionIdentifier: {
-      /** @description The unique identifier of the node */
-      node_id: string
-      /** @description The version of the node */
-      version: string
-    }
-    BulkNodeVersionsResponse: {
-      /** @description List of retrieved node versions with their status */
-      node_versions: components['schemas']['BulkNodeVersionResult'][]
-    }
-    BulkNodeVersionResult: {
-      /** @description The node and version identifier */
-      identifier: components['schemas']['NodeVersionIdentifier']
-      /**
-       * @description Status of the retrieval operation
-       * @enum {string}
-       */
-      status: 'success' | 'not_found' | 'error'
-      /** @description The retrieved node version data (only present if status is success) */
-      node_version?: components['schemas']['NodeVersion']
-      /** @description Error message if retrieval failed (only present if status is error) */
-      error_message?: string
-    }
-    PersonalAccessToken: {
-      /**
-       * Format: uuid
-       * @description Unique identifier for the GitCommit
-       */
-      id?: string
-      /** @description Required. The name of the token. Can be a simple description. */
-      name?: string
-      /** @description Optional. A more detailed description of the token's intended use. */
-      description?: string
-      /**
-       * Format: date-time
-       * @description [Output Only]The date and time the token was created.
-       */
-      createdAt?: string
-      /** @description [Output Only]. The personal access token. Only returned during creation. */
-      token?: string
-    }
-    GitCommit: {
-      /**
-       * Format: uuid
-       * @description Unique identifier for the GitCommit
-       */
-      id?: string
-      /** @description The hash of the commit */
-      commit_hash?: string
-      /** @description The name of the commit */
-      commit_name?: string
-      /** @description The branch where the commit was made */
-      branch_name?: string
-      /** @description The author of the commit */
-      author?: string
-      /**
-       * Format: date-time
-       * @description The timestamp when the commit was made
-       */
-      timestamp?: string
-    }
-    GitCommitSummary: {
-      /** @description The hash of the commit */
-      commit_hash?: string
-      /** @description The name of the commit */
-      commit_name?: string
-      /** @description The branch where the commit was made */
-      branch_name?: string
-      /** @description The author of the commit */
-      author?: string
-      /**
-       * Format: date-time
-       * @description The timestamp when the commit was made
-       */
-      timestamp?: string
-      /** @description A map of operating system to status pairs */
-      status_summary?: {
-        [key: string]: string
-      }
-    }
-    User: {
-      /** @description The unique id for this user. */
-      id?: string
-      /** @description The email address for this user. */
-      email?: string
-      /** @description The name for this user. */
-      name?: string
-      /** @description Indicates if the user is approved. */
-      isApproved?: boolean
-      /** @description Indicates if the user has admin privileges. */
-      isAdmin?: boolean
-    }
-    PublisherUser: {
-      /** @description The unique id for this user. */
-      id?: string
-      /** @description The email address for this user. */
-      email?: string
-      /** @description The name for this user. */
-      name?: string
-    }
-    ErrorResponse: {
-      error: string
-      message: string
-    }
-    RunwayTextToImageRequest: {
-      /** @description Text prompt for the image generation */
-      promptText: string
-      /**
-       * @description Model to use for generation
-       * @enum {string}
-       */
-      model: 'gen4_image'
-      /** @description The resolution (aspect ratio) of the output image */
-      ratio: components['schemas']['RunwayTextToImageAspectRatioEnum']
-      /** @description Array of reference images to guide the generation */
-      referenceImages?: {
-        /** @description A HTTPS URL or data URI containing an encoded image */
-        uri?: string
-      }[]
-    }
-    ActionJobResult: {
-      /**
-       * Format: uuid
-       * @description Unique identifier for the job result
-       */
-      id?: string
-      /** @description Name of the workflow */
-      workflow_name?: string
-      /** @description Operating system used */
-      operating_system?: string
-      /** @description PyTorch version used */
-      python_version?: string
-      /** @description PyTorch version used */
-      pytorch_version?: string
-      /** @description Identifier of the run this result belongs to */
-      action_run_id?: string
-      /** @description Identifier of the job this result belongs to */
-      action_job_id?: string
-      /** @description CUDA version used */
-      cuda_version?: string
-      /** @description Name of the relevant git branch */
-      branch_name?: string
-      /** @description The hash of the commit */
-      commit_hash?: string
-      /** @description The ID of the commit */
-      commit_id?: string
-      /**
-       * Format: int64
-       * @description The Unix timestamp when the commit was made
-       */
-      commit_time?: number
-      /** @description The message of the commit */
-      commit_message?: string
-      /** @description The comfy run flags. E.g. `--low-vram` */
-      comfy_run_flags?: string
-      /** @description The repository name */
-      git_repo?: string
-      /** @description The pull request number */
-      pr_number?: string
-      /**
-       * Format: int64
-       * @description The start time of the job as a Unix timestamp.
-       */
-      start_time?: number
-      /**
-       * Format: int64
-       * @description The end time of the job as a Unix timestamp.
-       */
-      end_time?: number
-      /** @description The average VRAM used by the job */
-      avg_vram?: number
-      /** @description The peak VRAM used by the job */
-      peak_vram?: number
-      /** @description The user who triggered the job. */
-      job_trigger_user?: string
-      /** @description The author of the commit */
-      author?: string
-      machine_stats?: components['schemas']['MachineStats']
-      status?: components['schemas']['WorkflowRunStatus']
-      storage_file?: components['schemas']['StorageFile']
-    }
-    StorageFile: {
-      /**
-       * Format: uuid
-       * @description Unique identifier for the storage file
-       */
-      id?: string
-      /** @description Path to the file in storage */
-      file_path?: string
-      /** @description Public URL */
-      public_url?: string
-    }
-    Publisher: {
-      name?: string
-      /** @description The unique identifier for the publisher. It's akin to a username. Should be lowercase. */
-      id?: string
-      description?: string
-      website?: string
-      support?: string
-      source_code_repo?: string
-      /** @description URL to the publisher's logo. */
-      logo?: string
-      /**
-       * Format: date-time
-       * @description The date and time the publisher was created.
-       */
-      createdAt?: string
-      /** @description A list of members in the publisher. */
-      members?: components['schemas']['PublisherMember'][]
-      /** @description The status of the publisher. */
-      status?: components['schemas']['PublisherStatus']
-    }
-    PublisherMember: {
-      /** @description The unique identifier for the publisher member. */
-      id?: string
-      /** @description The user associated with this publisher member. */
-      user?: components['schemas']['PublisherUser']
-      /** @description The role of the user in the publisher. */
-      role?: string
-    }
-    Node: {
-      /** @description The unique identifier of the node. */
-      id?: string
-      /** @description The display name of the node. */
-      name?: string
-      /** @description The category of the node. */
-      category?: string
-      description?: string
-      author?: string
-      /** @description The path to the LICENSE file in the node's repository. */
-      license?: string
-      /** @description URL to the node's icon. */
-      icon?: string
-      /** @description URL to the node's repository. */
-      repository?: string
-      tags?: string[]
-      /** @description List of operating systems that this node supports */
-      supported_os?: string[]
-      /** @description List of accelerators (e.g. CUDA, DirectML, ROCm) that this node supports */
-      supported_accelerators?: string[]
-      /** @description Supported versions of ComfyUI */
-      supported_comfyui_version?: string
-      /** @description Supported versions of ComfyUI frontend */
-      supported_comfyui_frontend_version?: string
-      /** @description The latest version of the node. */
-      latest_version?: components['schemas']['NodeVersion']
-      /** @description The average rating of the node. */
-      rating?: number
-      /** @description The number of downloads of the node. */
-      downloads?: number
-      /** @description The publisher of the node. */
-      publisher?: components['schemas']['Publisher']
-      /** @description The status of the node. */
-      status?: components['schemas']['NodeStatus']
-      /** @description The status detail of the node. */
-      status_detail?: string
-      /** @description Translations of node metadata in different languages. */
-      translations?: {
-        [key: string]: {
-          [key: string]: unknown
-        }
-      }
-      /** @description A numerical value representing the node's search ranking, used for sorting search results. */
-      search_ranking?: number
-      /** @description A list of Comfy node names that are preempted by this node. */
-      preempted_comfy_node_names?: string[]
-      /** @description URL to the node's banner. */
-      banner_url?: string
-      /** @description Number of stars on the GitHub repository. */
-      github_stars?: number
-      /**
-       * Format: date-time
-       * @description The date and time when the node was created
-       */
-      created_at?: string
-    }
-    NodeVersion: {
-      id?: string
-      /** @description The version identifier, following semantic versioning. Must be unique for the node. */
-      version?: string
-      /**
-       * Format: date-time
-       * @description The date and time the version was created.
-       */
-      createdAt?: string
-      /** @description Summary of changes made in this version */
-      changelog?: string
-      /** @description A list of pip dependencies required by the node. */
-      dependencies?: string[]
-      /** @description [Output Only] URL to download this version of the node */
-      downloadUrl?: string
-      /** @description Indicates if this version is deprecated. */
-      deprecated?: boolean
-      /** @description The status of the node version. */
-      status?: components['schemas']['NodeVersionStatus']
-      /** @description The reason for the status change. */
-      status_reason?: string
-      /** @description The unique identifier of the node. */
-      node_id?: string
-      /** @description The status of comfy node extraction process. */
-      comfy_node_extract_status?: string
-      /** @description Supported versions of ComfyUI */
-      supported_comfyui_version?: string
-      /** @description Supported versions of ComfyUI frontend */
-      supported_comfyui_frontend_version?: string
-      /** @description List of operating systems that this node supports */
-      supported_os?: string[]
-      /** @description List of accelerators (e.g. CUDA, DirectML, ROCm) that this node supports */
-      supported_accelerators?: string[]
-    }
-    ComfyNode: {
-      /** @description Unique identifier for the node */
-      comfy_node_name?: string
-      /** @description UI category where the node is listed, used for grouping nodes. */
-      category?: string
-      /** @description Brief description of the node's functionality or purpose. */
-      description?: string
-      /** @description Defines input parameters */
-      input_types?: string
-      /** @description Indicates if the node is deprecated. Deprecated nodes are hidden in the UI. */
-      deprecated?: boolean
-      /** @description Indicates if the node is experimental, subject to changes or removal. */
-      experimental?: boolean
-      /** @description Boolean values indicating if each output is a list. */
-      output_is_list?: boolean[]
-      /** @description Names of the outputs for clarity in workflows. */
-      return_names?: string
-      /** @description Specifies the types of outputs produced by the node. */
-      return_types?: string
-      /** @description Name of the entry-point function to execute the node. */
-      function?: string
-    }
-    ComfyNodeCloudBuildInfo: {
-      project_id?: string
-      project_number?: string
-      location?: string
-      build_id?: string
-    }
-    Error: {
-      /** @description A clear and concise description of the error. */
-      message?: string
-      /** @description Optional detailed information about the error or hints for resolving it. */
-      details?: string[]
-    }
-    NodeVersionUpdateRequest: {
-      /** @description The changelog describing the version changes. */
-      changelog?: string
-      /** @description Whether the version is deprecated. */
-      deprecated?: boolean
-    }
-    /** @enum {string} */
-    NodeStatus: 'NodeStatusActive' | 'NodeStatusDeleted' | 'NodeStatusBanned'
-    /** @enum {string} */
-    NodeVersionStatus:
-      | 'NodeVersionStatusActive'
-      | 'NodeVersionStatusDeleted'
-      | 'NodeVersionStatusBanned'
-      | 'NodeVersionStatusPending'
-      | 'NodeVersionStatusFlagged'
-    /** @enum {string} */
-    PublisherStatus: 'PublisherStatusActive' | 'PublisherStatusBanned'
-    /** @enum {string} */
-    WorkflowRunStatus:
-      | 'WorkflowRunStatusStarted'
-      | 'WorkflowRunStatusFailed'
-      | 'WorkflowRunStatusCompleted'
-    MachineStats: {
-      /** @description Name of the machine. */
-      machine_name?: string
-      /** @description The operating system version. eg. Ubuntu Linux 20.04 */
-      os_version?: string
-      /** @description The GPU type. eg. NVIDIA Tesla K80 */
-      gpu_type?: string
-      /** @description Total CPU on the machine. */
-      cpu_capacity?: string
-      /** @description Initial CPU available before the job starts. */
-      initial_cpu?: string
-      /** @description Total memory on the machine. */
-      memory_capacity?: string
-      /** @description Initial RAM available before the job starts. */
-      initial_ram?: string
-      /** @description Time series of VRAM usage. */
-      vram_time_series?: Record<string, never>
-      /** @description Total disk capacity on the machine. */
-      disk_capacity?: string
-      /** @description Initial disk available before the job starts. */
-      initial_disk?: string
-      /** @description The pip freeze output */
-      pip_freeze?: string
-    }
-    Customer: {
-      /** @description The firebase UID of the user */
-      id: string
-      /** @description The email address for this user */
-      email?: string
-      /** @description The name for this user */
-      name?: string
-      /**
-       * Format: date-time
-       * @description The date and time the user was created
-       */
-      createdAt?: string
-      /**
-       * Format: date-time
-       * @description The date and time the user was last updated
-       */
-      updatedAt?: string
-      /** @description Whether the user is an admin */
-      is_admin?: boolean
-      /** @description The Stripe customer ID */
-      stripe_id?: string
-      /** @description The Metronome customer ID */
-      metronome_id?: string
-      /** @description Whether the user has funds */
-      has_fund?: boolean
-    }
-    AuditLog: {
-      /** @description the type of the event */
-      event_type?: string
-      /** @description the id of the event */
-      event_id?: string
-      /** @description data related to the event */
-      params?: {
-        [key: string]: unknown
-      }
-      /**
-       * Format: date-time
-       * @description The date and time the event was created
-       */
-      createdAt?: string
-    }
-    IdeogramV3Request: {
-      /** @description The text prompt for image generation */
-      prompt: string
-      /** @description Seed value for reproducible generation */
-      seed?: number
-      /**
-       * @description Image resolution in format WxH
-       * @example 1280x800
-       */
-      resolution?: string
-      /**
-       * @description Aspect ratio in format WxH
-       * @example 1x3
-       */
-      aspect_ratio?: string
-      rendering_speed: components['schemas']['RenderingSpeed']
-      /**
-       * @description Whether to enable magic prompt enhancement
-       * @enum {string}
-       */
-      magic_prompt?: 'ON' | 'OFF'
-      /** @description Text prompt specifying what to avoid in the generation */
-      negative_prompt?: string
-      /** @description Number of images to generate */
-      num_images?: number
-      color_palette?: {
-        /**
-         * @description Name of the color palette
-         * @example PASTEL
-         */
-        name: string
-      }
-      /** @description Array of style codes in hexadecimal format */
-      style_codes?: string[]
-      /**
-       * @description The type of style to apply
-       * @enum {string}
-       */
-      style_type?: 'GENERAL'
-      /** @description Array of reference image URLs or identifiers */
-      style_reference_images?: string[]
-    }
-    IdeogramV3EditRequest: {
-      /**
-       * Format: binary
-       * @description The image being edited (max size 10MB); only JPEG, WebP and PNG formats are supported at this time.
-       */
-      image?: string
-      /**
-       * Format: binary
-       * @description A black and white image of the same size as the image being edited (max size 10MB). Black regions in the mask should match up with the regions of the image that you would like to edit; only JPEG, WebP and PNG formats are supported at this time.
-       */
-      mask?: string
-      /** @description The prompt used to describe the edited result. */
-      prompt: string
-      /** @description Determine if MagicPrompt should be used in generating the request or not. */
-      magic_prompt?: string
-      /** @description The number of images to generate. */
-      num_images?: number
-      /** @description Random seed. Set for reproducible generation. */
-      seed?: number
-      rendering_speed: components['schemas']['RenderingSpeed']
-      /** @description A color palette for generation, must EITHER be specified via one of the presets (name) or explicitly via hexadecimal representations of the color with optional weights (members). Not supported by V_1, V_1_TURBO, V_2A and V_2A_TURBO models. */
-      color_palette?: components['schemas']['IdeogramColorPalette']
-      /** @description A list of 8 character hexadecimal codes representing the style of the image. Cannot be used in conjunction with style_reference_images or style_type. */
-      style_codes?: string[]
-      /** @description A set of images to use as style references (maximum total size 10MB across all style references). The images should be in JPEG, PNG or WebP format. */
-      style_reference_images?: string[]
-    }
-    /** @description A color palette specification that can either use a preset name or explicit color definitions with weights */
-    IdeogramColorPalette:
-      | {
-          /** @description Name of the preset color palette */
-          name: string
-        }
-      | {
-          /** @description Array of color definitions with optional weights */
-          members: {
-            /** @description Hexadecimal color code */
-            color?: string
-            /** @description Optional weight for the color (0-1) */
-            weight?: number
-          }[]
-        }
-    /** @description Parameters for the Ideogram generation proxy request. Based on Ideogram's API. */
-    IdeogramGenerateRequest: {
-      /** @description The image generation request parameters. */
-      image_request: {
-        /** @description Required. The prompt to use to generate the image. */
-        prompt: string
-        /** @description Optional. The aspect ratio (e.g., 'ASPECT_16_9', 'ASPECT_1_1'). Cannot be used with resolution. Defaults to 'ASPECT_1_1' if unspecified. */
-        aspect_ratio?: string
-        /** @description The model used (e.g., 'V_2', 'V_2A_TURBO') */
-        model: string
-        /** @description Optional. MagicPrompt usage ('AUTO', 'ON', 'OFF'). */
-        magic_prompt_option?: string
-        /**
-         * Format: int64
-         * @description Optional. A number between 0 and 2147483647.
-         */
-        seed?: number
-        /** @description Optional. Style type ('AUTO', 'GENERAL', 'REALISTIC', 'DESIGN', 'RENDER_3D', 'ANIME'). Only for models V_2 and above. */
-        style_type?: string
-        /** @description Optional. Description of what to exclude. Only for V_1, V_1_TURBO, V_2, V_2_TURBO. */
-        negative_prompt?: string
-        /**
-         * @description Optional. Number of images to generate (1-8). Defaults to 1.
-         * @default 1
-         */
-        num_images: number
-        /** @description Optional. Resolution (e.g., 'RESOLUTION_1024_1024'). Only for model V_2. Cannot be used with aspect_ratio. */
-        resolution?: string
-        /** @description Optional. Color palette object. Only for V_2, V_2_TURBO. */
-        color_palette?: {
-          [key: string]: unknown
-        }
-      }
-    }
-    /** @description Response from the Ideogram image generation API. */
-    IdeogramGenerateResponse: {
-      /**
-       * Format: date-time
-       * @description Timestamp when the generation was created.
-       */
-      created?: string
-      /** @description Array of generated image information. */
-      data?: {
-        /** @description The prompt used to generate this image. */
-        prompt?: string
-        /** @description The resolution of the generated image (e.g., '1024x1024'). */
-        resolution?: string
-        /** @description Indicates whether the image is considered safe. */
-        is_image_safe?: boolean
-        /** @description The seed value used for this generation. */
-        seed?: number
-        /** @description URL to the generated image. */
-        url?: string
-        /** @description The style type used for generation (e.g., 'REALISTIC', 'ANIME'). */
-        style_type?: string
-      }[]
-    }
-    IdeogramV3RemixRequest: {
-      /** Format: binary */
-      image?: string
-      prompt: string
-      /** @default 50 */
-      image_weight: number
-      seed?: number
-      resolution?: string
-      aspect_ratio?: string
-      /** @enum {string} */
-      rendering_speed?: 'TURBO' | 'DEFAULT' | 'QUALITY'
-      /** @enum {string} */
-      magic_prompt?: 'AUTO' | 'ON' | 'OFF'
-      negative_prompt?: string
-      num_images?: number
-      color_palette?: Record<string, never>
-      style_codes?: string[]
-      /** @enum {string} */
-      style_type?: 'AUTO' | 'GENERAL' | 'REALISTIC' | 'DESIGN'
-      style_reference_images?: string[]
-    }
-    IdeogramV3IdeogramResponse: {
-      /** Format: date-time */
-      created?: string
-      data?: {
-        prompt?: string
-        resolution?: string
-        is_image_safe?: boolean
-        seed?: number
-        url?: string
-        style_type?: string
-      }[]
-    }
-    IdeogramV3ReframeRequest: {
-      /** Format: binary */
-      image?: string
-      resolution: string
-      num_images?: number
-      seed?: number
-      /** @enum {string} */
-      rendering_speed?: 'TURBO' | 'DEFAULT' | 'QUALITY'
-      color_palette?: Record<string, never>
-      style_codes?: string[]
-      style_reference_images?: string[]
-    }
-    IdeogramV3ReplaceBackgroundRequest: {
-      /** Format: binary */
-      image?: string
-      prompt: string
-      /** @enum {string} */
-      magic_prompt?: 'AUTO' | 'ON' | 'OFF'
-      num_images?: number
-      seed?: number
-      /** @enum {string} */
-      rendering_speed?: 'TURBO' | 'DEFAULT' | 'QUALITY'
-      color_palette?: Record<string, never>
-      style_codes?: string[]
-      style_reference_images?: string[]
-    }
-    /**
-     * @description Task Status
-     * @enum {string}
-     */
-    KlingTaskStatus: 'submitted' | 'processing' | 'succeed' | 'failed'
-    /**
-     * @description Model Name
-     * @default kling-v1
-     * @enum {string}
-     */
-    KlingTextToVideoModelName: 'kling-v1' | 'kling-v1-6'
-    /**
-     * @description Model Name
-     * @default kling-v2-master
-     * @enum {string}
-     */
-    KlingVideoGenModelName:
-      | 'kling-v1'
-      | 'kling-v1-5'
-      | 'kling-v1-6'
-      | 'kling-v2-master'
-    /**
-     * @description Video generation mode. std: Standard Mode, which is cost-effective. pro: Professional Mode, generates videos with longer duration but higher quality output.
-     * @default std
-     * @enum {string}
-     */
-    KlingVideoGenMode: 'std' | 'pro'
-    /**
-     * @description Video aspect ratio
-     * @default 16:9
-     * @enum {string}
-     */
-    KlingVideoGenAspectRatio: '16:9' | '9:16' | '1:1'
-    /**
-     * @description Video length in seconds
-     * @default 5
-     * @enum {string}
-     */
-    KlingVideoGenDuration: '5' | '10'
-    /**
-     * Format: float
-     * @description Flexibility in video generation. The higher the value, the lower the model's degree of flexibility, and the stronger the relevance to the user's prompt.
-     * @default 0.5
-     */
-    KlingVideoGenCfgScale: number
-    KlingCameraControl: {
-      type?: components['schemas']['KlingCameraControlType']
-      config?: components['schemas']['KlingCameraConfig']
-    }
-    /**
-     * @description Predefined camera movements type. simple: Customizable camera movement. down_back: Camera descends and moves backward. forward_up: Camera moves forward and tilts up. right_turn_forward: Rotate right and move forward. left_turn_forward: Rotate left and move forward.
-     * @enum {string}
-     */
-    KlingCameraControlType:
-      | 'simple'
-      | 'down_back'
-      | 'forward_up'
-      | 'right_turn_forward'
-      | 'left_turn_forward'
-    KlingCameraConfig: {
-      /** @description Controls camera's movement along horizontal axis (x-axis). Negative indicates left, positive indicates right. */
-      horizontal?: number
-      /** @description Controls camera's movement along vertical axis (y-axis). Negative indicates downward, positive indicates upward. */
-      vertical?: number
-      /** @description Controls camera's rotation in vertical plane (x-axis). Negative indicates downward rotation, positive indicates upward rotation. */
-      pan?: number
-      /** @description Controls camera's rotation in horizontal plane (y-axis). Negative indicates left rotation, positive indicates right rotation. */
-      tilt?: number
-      /** @description Controls camera's rolling amount (z-axis). Negative indicates counterclockwise, positive indicates clockwise. */
-      roll?: number
-      /** @description Controls change in camera's focal length. Negative indicates narrower field of view, positive indicates wider field of view. */
-      zoom?: number
-    }
-    KlingVideoResult: {
-      /** @description Generated video ID */
-      id?: string
-      /**
-       * Format: uri
-       * @description URL for generated video
-       */
-      url?: string
-      /** @description Total video duration */
-      duration?: string
-    }
-    /**
-     * @description Method of Transmitting Audio Files for Lip-Sync. Required when mode is audio2video.
-     * @enum {string}
-     */
-    KlingAudioUploadType: 'file' | 'url'
-    /**
-     * @description Video Generation Mode. text2video: Text-to-video generation mode; audio2video: Audio-to-video generation mode
-     * @enum {string}
-     */
-    KlingLipSyncMode: 'text2video' | 'audio2video'
-    /**
-     * @description The voice language corresponds to the Voice ID.
-     * @default en
-     * @enum {string}
-     */
-    KlingLipSyncVoiceLanguage: 'zh' | 'en'
-    /**
-     * @description Scene Name. Dual-character Effects (hug, kiss, heart_gesture).
-     * @enum {string}
-     */
-    KlingDualCharacterEffectsScene: 'hug' | 'kiss' | 'heart_gesture'
-    /**
-     * @description Scene Name. Single Image Effects (bloombloom, dizzydizzy, fuzzyfuzzy, squish, expansion).
-     * @enum {string}
-     */
-    KlingSingleImageEffectsScene:
-      | 'bloombloom'
-      | 'dizzydizzy'
-      | 'fuzzyfuzzy'
-      | 'squish'
-      | 'expansion'
-    /**
-     * @description Model Name. Can be kling-v1, kling-v1-5, or kling-v1-6.
-     * @default kling-v1
-     * @enum {string}
-     */
-    KlingCharacterEffectModelName: 'kling-v1' | 'kling-v1-5' | 'kling-v1-6'
-    /**
-     * @description Model Name. Only kling-v1-6 is supported for single image effects.
-     * @enum {string}
-     */
-    KlingSingleImageEffectModelName: 'kling-v1-6'
-    /**
-     * @description Video Length in seconds. Only 5-second videos are supported.
-     * @enum {string}
-     */
-    KlingSingleImageEffectDuration: '5'
-    KlingDualCharacterImages: string[]
-    /**
-     * @description Aspect ratio of the generated images
-     * @default 16:9
-     * @enum {string}
-     */
-    KlingImageGenAspectRatio:
-      | '16:9'
-      | '9:16'
-      | '1:1'
-      | '4:3'
-      | '3:4'
-      | '3:2'
-      | '2:3'
-      | '21:9'
-    /**
-     * @description Image reference type
-     * @enum {string}
-     */
-    KlingImageGenImageReferenceType: 'subject' | 'face'
-    /**
-     * @description Model Name
-     * @default kling-v1
-     * @enum {string}
-     */
-    KlingImageGenModelName: 'kling-v1' | 'kling-v1-5' | 'kling-v2'
-    KlingImageResult: {
-      /** @description Image Number (0-9) */
-      index?: number
-      /**
-       * Format: uri
-       * @description URL for generated image
-       */
-      url?: string
-    }
-    /**
-     * @description Model Name
-     * @default kolors-virtual-try-on-v1
-     * @enum {string}
-     */
-    KlingVirtualTryOnModelName:
-      | 'kolors-virtual-try-on-v1'
-      | 'kolors-virtual-try-on-v1-5'
-    KlingText2VideoRequest: {
-      model_name?: components['schemas']['KlingTextToVideoModelName']
-      /** @description Positive text prompt */
-      prompt?: string
-      /** @description Negative text prompt */
-      negative_prompt?: string
-      cfg_scale?: components['schemas']['KlingVideoGenCfgScale']
-      mode?: components['schemas']['KlingVideoGenMode']
-      camera_control?: components['schemas']['KlingCameraControl']
-      aspect_ratio?: components['schemas']['KlingVideoGenAspectRatio']
-      duration?: components['schemas']['KlingVideoGenDuration']
-      /**
-       * Format: uri
-       * @description The callback notification address
-       */
-      callback_url?: string
-      /** @description Customized Task ID */
-      external_task_id?: string
-    }
-    KlingText2VideoResponse: {
-      /** @description Error code */
-      code?: number
-      /** @description Error message */
-      message?: string
-      /** @description Request ID */
-      request_id?: string
-      data?: {
-        /** @description Task ID */
-        task_id?: string
-        task_status?: components['schemas']['KlingTaskStatus']
-        task_info?: {
-          external_task_id?: string
-        }
-        /** @description Task creation time */
-        created_at?: number
-        /** @description Task update time */
-        updated_at?: number
-        task_result?: {
-          videos?: components['schemas']['KlingVideoResult'][]
-        }
-      }
-    }
-    KlingImage2VideoRequest: {
-      model_name?: components['schemas']['KlingVideoGenModelName']
-      /** @description Reference Image - URL or Base64 encoded string, cannot exceed 10MB, resolution not less than 300*300px, aspect ratio between 1:2.5 ~ 2.5:1. Base64 should not include data:image prefix. */
-      image?: string
-      /** @description Reference Image - End frame control. URL or Base64 encoded string, cannot exceed 10MB, resolution not less than 300*300px. Base64 should not include data:image prefix. */
-      image_tail?: string
-      /** @description Positive text prompt */
-      prompt?: string
-      /** @description Negative text prompt */
-      negative_prompt?: string
-      cfg_scale?: components['schemas']['KlingVideoGenCfgScale']
-      mode?: components['schemas']['KlingVideoGenMode']
-      /** @description Static Brush Application Area (Mask image created by users using the motion brush). The aspect ratio must match the input image. */
-      static_mask?: string
-      /** @description Dynamic Brush Configuration List (up to 6 groups). For 5-second videos, trajectory length must not exceed 77 coordinates. */
-      dynamic_masks?: {
-        /**
-         * Format: uri
-         * @description Dynamic Brush Application Area (Mask image created by users using the motion brush). The aspect ratio must match the input image.
-         */
-        mask?: string
-        trajectories?: {
-          /** @description The horizontal coordinate of trajectory point. Based on bottom-left corner of image as origin (0,0). */
-          x?: number
-          /** @description The vertical coordinate of trajectory point. Based on bottom-left corner of image as origin (0,0). */
-          y?: number
-        }[]
-      }[]
-      camera_control?: components['schemas']['KlingCameraControl']
-      aspect_ratio?: components['schemas']['KlingVideoGenAspectRatio']
-      duration?: components['schemas']['KlingVideoGenDuration']
-      /**
-       * Format: uri
-       * @description The callback notification address. Server will notify when the task status changes.
-       */
-      callback_url?: string
-      /** @description Customized Task ID. Must be unique within a single user account. */
-      external_task_id?: string
-    }
-    KlingImage2VideoResponse: {
-      /** @description Error code */
-      code?: number
-      /** @description Error message */
-      message?: string
-      /** @description Request ID */
-      request_id?: string
-      data?: {
-        /** @description Task ID */
-        task_id?: string
-        task_status?: components['schemas']['KlingTaskStatus']
-        task_info?: {
-          external_task_id?: string
-        }
-        /** @description Task creation time */
-        created_at?: number
-        /** @description Task update time */
-        updated_at?: number
-        task_result?: {
-          videos?: components['schemas']['KlingVideoResult'][]
-        }
-      }
-    }
-    KlingVideoExtendRequest: {
-      /** @description The ID of the video to be extended. Supports videos generated by text-to-video, image-to-video, and previous video extension operations. Cannot exceed 3 minutes total duration after extension. */
-      video_id?: string
-      /** @description Positive text prompt for guiding the video extension */
-      prompt?: string
-      /** @description Negative text prompt for elements to avoid in the extended video */
-      negative_prompt?: string
-      cfg_scale?: components['schemas']['KlingVideoGenCfgScale']
-      /**
-       * Format: uri
-       * @description The callback notification address. Server will notify when the task status changes.
-       */
-      callback_url?: string
-    }
-    KlingVideoExtendResponse: {
-      /** @description Error code */
-      code?: number
-      /** @description Error message */
-      message?: string
-      /** @description Request ID */
-      request_id?: string
-      data?: {
-        /** @description Task ID */
-        task_id?: string
-        task_status?: components['schemas']['KlingTaskStatus']
-        task_info?: {
-          external_task_id?: string
-        }
-        /** @description Task creation time */
-        created_at?: number
-        /** @description Task update time */
-        updated_at?: number
-        task_result?: {
-          videos?: components['schemas']['KlingVideoResult'][]
-        }
-      }
-    }
-    KlingLipSyncInputObject: {
-      /** @description The ID of the video generated by Kling AI. Only supports 5-second and 10-second videos generated within the last 30 days. */
-      video_id?: string
-      /** @description Get link for uploaded video. Video files support .mp4/.mov, file size does not exceed 100MB, video length between 2-10s. */
-      video_url?: string
-      mode: components['schemas']['KlingLipSyncMode']
-      /** @description Text Content for Lip-Sync Video Generation. Required when mode is text2video. Maximum length is 120 characters. */
-      text?: string
-      /** @description Voice ID. Required when mode is text2video. The system offers a variety of voice options to choose from. */
-      voice_id?: string
-      voice_language?: components['schemas']['KlingLipSyncVoiceLanguage']
-      /**
-       * @description Speech Rate. Valid range: 0.8~2.0, accurate to one decimal place.
-       * @default 1
-       */
-      voice_speed: number
-      audio_type?: components['schemas']['KlingAudioUploadType']
-      /** @description Local Path of Audio File. Supported formats: .mp3/.wav/.m4a/.aac, maximum file size of 5MB. Base64 code. */
-      audio_file?: string
-      /** @description Audio File Download URL. Supported formats: .mp3/.wav/.m4a/.aac, maximum file size of 5MB. */
-      audio_url?: string
-    }
-    KlingLipSyncRequest: {
-      input: components['schemas']['KlingLipSyncInputObject']
-      /**
-       * Format: uri
-       * @description The callback notification address. Server will notify when the task status changes.
-       */
-      callback_url?: string
-    }
-    KlingLipSyncResponse: {
-      /** @description Error code */
-      code?: number
-      /** @description Error message */
-      message?: string
-      /** @description Request ID */
-      request_id?: string
-      data?: {
-        /** @description Task ID */
-        task_id?: string
-        task_status?: components['schemas']['KlingTaskStatus']
-        task_info?: {
-          external_task_id?: string
-        }
-        /** @description Task creation time */
-        created_at?: number
-        /** @description Task update time */
-        updated_at?: number
-        task_result?: {
-          videos?: components['schemas']['KlingVideoResult'][]
-        }
-      }
-    }
-    KlingVideoEffectsRequest: {
-      effect_scene:
-        | components['schemas']['KlingDualCharacterEffectsScene']
-        | components['schemas']['KlingSingleImageEffectsScene']
-      input: components['schemas']['KlingVideoEffectsInput']
-      /**
-       * Format: uri
-       * @description The callback notification address for the result of this task.
-       */
-      callback_url?: string
-      /** @description Customized Task ID. Must be unique within a single user account. */
-      external_task_id?: string
-    }
-    KlingVideoEffectsInput:
-      | components['schemas']['KlingSingleImageEffectInput']
-      | components['schemas']['KlingDualCharacterEffectInput']
-    KlingSingleImageEffectInput: {
-      model_name: components['schemas']['KlingSingleImageEffectModelName']
-      /** @description Reference Image. URL or Base64 encoded string (without data:image prefix). File size cannot exceed 10MB, resolution not less than 300*300px, aspect ratio between 1:2.5 ~ 2.5:1. */
-      image: string
-      duration: components['schemas']['KlingSingleImageEffectDuration']
-    }
-    KlingDualCharacterEffectInput: {
-      model_name?: components['schemas']['KlingCharacterEffectModelName']
-      mode?: components['schemas']['KlingVideoGenMode']
-      images: components['schemas']['KlingDualCharacterImages']
-      duration: components['schemas']['KlingVideoGenDuration']
-    }
-    KlingVideoEffectsResponse: {
-      /** @description Error code */
-      code?: number
-      /** @description Error message */
-      message?: string
-      /** @description Request ID */
-      request_id?: string
-      data?: {
-        /** @description Task ID */
-        task_id?: string
-        task_status?: components['schemas']['KlingTaskStatus']
-        task_info?: {
-          external_task_id?: string
-        }
-        /** @description Task creation time */
-        created_at?: number
-        /** @description Task update time */
-        updated_at?: number
-        task_result?: {
-          videos?: components['schemas']['KlingVideoResult'][]
-        }
-      }
-    }
-    KlingImageGenerationsRequest: {
-      model_name?: components['schemas']['KlingImageGenModelName']
-      /** @description Positive text prompt */
-      prompt: string
-      /** @description Negative text prompt */
-      negative_prompt?: string
-      /** @description Reference Image - Base64 encoded string or image URL */
-      image?: string
-      image_reference?: components['schemas']['KlingImageGenImageReferenceType']
-      /**
-       * @description Reference intensity for user-uploaded images
-       * @default 0.5
-       */
-      image_fidelity: number
-      /**
-       * @description Subject reference similarity
-       * @default 0.45
-       */
-      human_fidelity: number
-      /**
-       * @description Number of generated images
-       * @default 1
-       */
-      n: number
-      aspect_ratio?: components['schemas']['KlingImageGenAspectRatio']
-      /**
-       * Format: uri
-       * @description The callback notification address
-       */
-      callback_url?: string
-    }
-    KlingImageGenerationsResponse: {
-      /** @description Error code */
-      code?: number
-      /** @description Error message */
-      message?: string
-      /** @description Request ID */
-      request_id?: string
-      data?: {
-        /** @description Task ID */
-        task_id?: string
-        task_status?: components['schemas']['KlingTaskStatus']
-        /** @description Task status information */
-        task_status_msg?: string
-        /** @description Task creation time */
-        created_at?: number
-        /** @description Task update time */
-        updated_at?: number
-        task_result?: {
-          images?: components['schemas']['KlingImageResult'][]
-        }
-      }
-    }
-    KlingVirtualTryOnRequest: {
-      model_name?: components['schemas']['KlingVirtualTryOnModelName']
-      /** @description Reference human image - Base64 encoded string or image URL */
-      human_image: string
-      /** @description Reference clothing image - Base64 encoded string or image URL */
-      cloth_image?: string
-      /**
-       * Format: uri
-       * @description The callback notification address
-       */
-      callback_url?: string
-    }
-    KlingVirtualTryOnResponse: {
-      /** @description Error code */
-      code?: number
-      /** @description Error message */
-      message?: string
-      /** @description Request ID */
-      request_id?: string
-      data?: {
-        /** @description Task ID */
-        task_id?: string
-        task_status?: components['schemas']['KlingTaskStatus']
-        /** @description Task status information */
-        task_status_msg?: string
-        /** @description Task creation time */
-        created_at?: number
-        /** @description Task update time */
-        updated_at?: number
-        task_result?: {
-          images?: components['schemas']['KlingImageResult'][]
-        }
-      }
-    }
-    KlingResourcePackageResponse: {
-      /** @description Error code; 0 indicates success */
-      code?: number
-      /** @description Error information */
-      message?: string
-      /** @description Request ID, generated by the system, used to track requests and troubleshoot problems */
-      request_id?: string
-      data?: {
-        /** @description Error code; 0 indicates success */
-        code?: number
-        /** @description Error information */
-        msg?: string
-        /** @description Resource package list */
-        resource_pack_subscribe_infos?: {
-          /** @description Resource package name */
-          resource_pack_name?: string
-          /** @description Resource package ID */
-          resource_pack_id?: string
-          /**
-           * @description Resource package type (decreasing_total=decreasing total, constant_period=constant periodicity)
-           * @enum {string}
-           */
-          resource_pack_type?: 'decreasing_total' | 'constant_period'
-          /**
-           * Format: float
-           * @description Total quantity
-           */
-          total_quantity?: number
-          /**
-           * Format: float
-           * @description Remaining quantity (updated with a 12-hour delay)
-           */
-          remaining_quantity?: number
-          /**
-           * Format: int64
-           * @description Purchase time, Unix timestamp in ms
-           */
-          purchase_time?: number
-          /**
-           * Format: int64
-           * @description Effective time, Unix timestamp in ms
-           */
-          effective_time?: number
-          /**
-           * Format: int64
-           * @description Expiration time, Unix timestamp in ms
-           */
-          invalid_time?: number
-          /**
-           * @description Resource Package Status
-           * @enum {string}
-           */
-          status?: 'toBeOnline' | 'online' | 'expired' | 'runOut'
-        }[]
-      }
-    }
-    StripeEvent: {
-      id: string
-      /** @enum {string} */
-      object: 'event'
-      api_version?: string
-      created?: number
-      data: {
-        object?: components['schemas']['StripePaymentIntent']
-      }
-      livemode?: boolean
-      pending_webhooks?: number
-      request?: components['schemas']['StripeRequestInfo']
-      /** @enum {string} */
-      type: 'payment_intent.succeeded'
-    }
-    StripeRequestInfo: {
-      id?: string | null
-      idempotency_key?: string | null
-    }
-    StripePaymentIntent: {
-      id?: string
-      /** @enum {string} */
-      object?: 'payment_intent'
-      amount?: number
-      amount_capturable?: number
-      amount_details?: components['schemas']['StripeAmountDetails']
-      amount_received?: number
-      application?: string | null
-      application_fee_amount?: number | null
-      automatic_payment_methods?: unknown
-      canceled_at?: number | null
-      cancellation_reason?: string | null
-      capture_method?: string
-      charges?: components['schemas']['StripeChargeList']
-      client_secret?: string
-      confirmation_method?: string
-      created?: number
-      currency?: string
-      customer?: string | null
-      description?: string | null
-      invoice?: string | null
-      last_payment_error?: unknown
-      latest_charge?: string
-      livemode?: boolean
-      metadata?: Record<string, never>
-      next_action?: unknown
-      on_behalf_of?: unknown
-      payment_method?: string
-      payment_method_configuration_details?: unknown
-      payment_method_options?: components['schemas']['StripePaymentMethodOptions']
-      payment_method_types?: string[]
-      processing?: unknown
-      receipt_email?: string | null
-      review?: unknown
-      setup_future_usage?: unknown
-      shipping?: components['schemas']['StripeShipping']
-      source?: unknown
-      statement_descriptor?: unknown
-      statement_descriptor_suffix?: unknown
-      status?: string
-      transfer_data?: unknown
-      transfer_group?: unknown
-    }
-    StripeAmountDetails: {
-      tip?: Record<string, never>
-    }
-    StripeChargeList: {
-      object?: string
-      data?: components['schemas']['StripeCharge'][]
-      has_more?: boolean
-      total_count?: number
-      url?: string
-    }
-    StripeCharge: {
-      id?: string
-      /** @enum {string} */
-      object?: 'charge'
-      amount?: number
-      amount_captured?: number
-      amount_refunded?: number
-      application?: string | null
-      application_fee?: string | null
-      application_fee_amount?: number | null
-      balance_transaction?: string | null
-      billing_details?: components['schemas']['StripeBillingDetails']
-      calculated_statement_descriptor?: string
-      captured?: boolean
-      created?: number
-      currency?: string
-      customer?: string | null
-      description?: string | null
-      destination?: unknown
-      dispute?: unknown
-      disputed?: boolean
-      failure_balance_transaction?: unknown
-      failure_code?: unknown
-      failure_message?: unknown
-      fraud_details?: Record<string, never>
-      invoice?: unknown
-      livemode?: boolean
-      metadata?: Record<string, never>
-      on_behalf_of?: unknown
-      order?: unknown
-      outcome?: components['schemas']['StripeOutcome']
-      paid?: boolean
-      payment_intent?: string
-      payment_method?: string
-      payment_method_details?: components['schemas']['StripePaymentMethodDetails']
-      radar_options?: Record<string, never>
-      receipt_email?: string | null
-      receipt_number?: string | null
-      receipt_url?: string
-      refunded?: boolean
-      refunds?: components['schemas']['StripeRefundList']
-      review?: unknown
-      shipping?: components['schemas']['StripeShipping']
-      source?: unknown
-      source_transfer?: unknown
-      statement_descriptor?: unknown
-      statement_descriptor_suffix?: unknown
-      status?: string
-      transfer_data?: unknown
-      transfer_group?: unknown
-    }
-    StripeBillingDetails: {
-      address?: components['schemas']['StripeAddress']
-      email?: string | null
-      name?: string | null
-      phone?: string | null
-      tax_id?: unknown
-    }
-    StripeAddress: {
-      city?: string | null
-      country?: string | null
-      line1?: string | null
-      line2?: string | null
-      postal_code?: string | null
-      state?: string | null
-    }
-    StripeOutcome: {
-      advice_code?: unknown
-      network_advice_code?: unknown
-      network_decline_code?: unknown
-      network_status?: string
-      reason?: unknown
-      risk_level?: string
-      risk_score?: number
-      seller_message?: string
-      type?: string
-    }
-    StripePaymentMethodDetails: {
-      card?: components['schemas']['StripeCardDetails']
-      type?: string
-    }
-    StripeCardDetails: {
-      amount_authorized?: number
-      authorization_code?: unknown
-      brand?: string
-      checks?: {
-        address_line1_check?: unknown
-        address_postal_code_check?: unknown
-        cvc_check?: string
-      }
-      country?: string
-      exp_month?: number
-      exp_year?: number
-      extended_authorization?: {
-        status?: string
-      }
-      fingerprint?: string
-      funding?: string
-      incremental_authorization?: {
-        status?: string
-      }
-      installments?: unknown
-      last4?: string
-      mandate?: unknown
-      multicapture?: {
-        status?: string
-      }
-      network?: string
-      network_token?: {
-        used?: boolean
-      }
-      network_transaction_id?: string
-      overcapture?: {
-        maximum_amount_capturable?: number
-        status?: string
-      }
-      regulated_status?: string
-      three_d_secure?: unknown
-      wallet?: unknown
-    }
-    StripeRefundList: {
-      object?: string
-      data?: Record<string, never>[]
-      has_more?: boolean
-      total_count?: number
-      url?: string
-    }
-    StripePaymentMethodOptions: {
-      card?: {
-        installments?: unknown
-        mandate_options?: unknown
-        network?: unknown
-        request_three_d_secure?: string
-      }
-    }
-    StripeShipping: {
-      address?: components['schemas']['StripeAddress']
-      carrier?: string | null
-      name?: string
-      phone?: string | null
-      tracking_number?: string | null
-    }
-    /** @description Parameters for the Minimax video generation proxy request. */
-    MinimaxVideoGenerationRequest: {
-      /**
-       * @description Required. ID of model. Options: T2V-01-Director, I2V-01-Director, S2V-01, I2V-01, I2V-01-live, T2V-01
-       * @enum {string}
-       */
-      model:
-        | 'T2V-01-Director'
-        | 'I2V-01-Director'
-        | 'S2V-01'
-        | 'I2V-01'
-        | 'I2V-01-live'
-        | 'T2V-01'
-      /** @description Description of the video. Should be less than 2000 characters. Supports camera movement instructions in [brackets]. */
-      prompt?: string
-      /**
-       * @description If true (default), the model will automatically optimize the prompt. Set to false for more precise control.
-       * @default true
-       */
-      prompt_optimizer: boolean
-      /** @description URL or base64 encoding of the first frame image. Required when model is I2V-01, I2V-01-Director, or I2V-01-live. */
-      first_frame_image?: string
-      /** @description Only available when model is S2V-01. The model will generate a video based on the subject uploaded through this parameter. */
-      subject_reference?: {
-        /** @description URL or base64 encoding of the subject reference image. */
-        image?: string
-        /** @description URL or base64 encoding of the mask for the subject reference image. */
-        mask?: string
-      }[]
-      /** @description Optional. URL to receive real-time status updates about the video generation task. */
-      callback_url?: string
-    }
-    /** @description Common response structure used by Minimax APIs */
-    MinimaxBaseResponse: {
-      /** @description Status code. 0 indicates success, other values indicate errors. */
-      status_code: number
-      /** @description Specific error details or success message. */
-      status_msg: string
-    }
-    /** @description Response from the Minimax video generation API. */
-    MinimaxVideoGenerationResponse: {
-      /** @description The task ID for the asynchronous video generation task. */
-      task_id: string
-      base_resp: components['schemas']['MinimaxBaseResponse']
-    }
-    /** @description Response from retrieving a Minimax file download URL. */
-    MinimaxFileRetrieveResponse: {
-      file: {
-        /** @description Unique identifier for the file */
-        file_id?: number
-        /** @description File size in bytes */
-        bytes?: number
-        /** @description Unix timestamp when the file was created, in seconds */
-        created_at?: number
-        /** @description The name of the file */
-        filename?: string
-        /** @description The purpose of using the file */
-        purpose?: string
-        /** @description The URL to download the video */
-        download_url?: string
-      }
-      base_resp: components['schemas']['MinimaxBaseResponse']
-    }
-    /** @description Response from querying a Minimax video generation task status. */
-    MinimaxTaskResultResponse: {
-      /** @description The task ID being queried. */
-      task_id: string
-      /**
-       * @description Task status: 'Queueing' (in queue), 'Preparing' (task is preparing), 'Processing' (generating), 'Success' (task completed successfully), or 'Fail' (task failed).
-       * @enum {string}
-       */
-      status: 'Queueing' | 'Preparing' | 'Processing' | 'Success' | 'Fail'
-      /** @description After the task status changes to Success, this field returns the file ID corresponding to the generated video. */
-      file_id?: string
-      base_resp: components['schemas']['MinimaxBaseResponse']
-    }
-    BFLFluxKontextProGenerateRequest: {
-      /** @description The text prompt describing what to edit on the image */
-      prompt: string
-      /** @description Base64 encoded image to be edited */
-      input_image: string
-      /**
-       * @description Number of inference steps
-       * @default 50
-       */
-      steps: number
-      /**
-       * @description The guidance scale for generation
-       * @default 3
-       */
-      guidance: number
-    }
-    BFLFluxKontextProGenerateResponse: {
-      /** @description Job ID for tracking */
-      id: string
-      /** @description URL to poll for results */
-      polling_url: string
-    }
-    BFLFluxKontextMaxGenerateRequest: {
-      /** @description The text prompt describing what to edit on the image */
-      prompt: string
-      /** @description Base64 encoded image to be edited */
-      input_image: string
-      /**
-       * @description Number of inference steps
-       * @default 50
-       */
-      steps: number
-      /**
-       * @description The guidance scale for generation
-       * @default 3
-       */
-      guidance: number
-    }
-    BFLFluxKontextMaxGenerateResponse: {
-      /** @description Job ID for tracking */
-      id: string
-      /** @description URL to poll for results */
-      polling_url: string
-    }
-    BFLFluxPro1_1GenerateRequest: {
-      /** @description The main text prompt for image generation */
-      prompt: string
-      /** @description Optional image prompt */
-      image_prompt?: string
-      /** @description Width of the generated image */
-      width: number
-      /** @description Height of the generated image */
-      height: number
-      /** @description Whether to use prompt upsampling */
-      prompt_upsampling?: boolean
-      /** @description Random seed for reproducibility */
-      seed?: number
-      /** @description Safety tolerance level */
-      safety_tolerance?: number
-      /**
-       * @description Output image format
-       * @enum {string}
-       */
-      output_format?: 'jpeg' | 'png'
-      /** @description Optional webhook URL for async processing */
-      webhook_url?: string
-      /** @description Optional webhook secret for async processing */
-      webhook_secret?: string
-    }
-    BFLFluxPro1_1GenerateResponse: {
-      /** @description Job ID for tracking */
-      id: string
-      /** @description URL to poll for results */
-      polling_url: string
-    }
-    /** @description Request body for the BFL Flux Pro 1.1 Ultra image generation API. */
-    BFLFluxProGenerateRequest: {
-      /** @description The text prompt for image generation. */
-      prompt: string
-      /** @description The negative prompt for image generation. */
-      negative_prompt?: string
-      /** @description The width of the image to generate. */
-      width: number
-      /** @description The height of the image to generate. */
-      height: number
-      /** @description The number of inference steps. */
-      num_inference_steps?: number
-      /** @description The guidance scale for generation. */
-      guidance_scale?: number
-      /** @description The seed value for reproducibility. */
-      seed?: number
-      /** @description The number of images to generate. */
-      num_images?: number
-    }
-    /** @description Response from the BFL Flux Pro 1.1 Ultra image generation API. */
-    BFLFluxProGenerateResponse: {
-      /** @description The unique identifier for the generation task. */
-      id: string
-      /** @description URL to poll for the generation result. */
-      polling_url: string
-    }
-    /** @description Response from the BFL Flux Pro 1.1 Ultra status check API. */
-    BFLFluxProStatusResponse: {
-      /** @description The unique identifier for the generation task. */
-      id: string
-      /** @description The status of the task. */
-      status: components['schemas']['BFLStatus']
-      /** @description The result of the task (null if not completed). */
-      result?: Record<string, never> | null
-      /**
-       * Format: float
-       * @description The progress of the task (0.0 to 1.0).
-       */
-      progress: number
-      /** @description Additional details about the task (null if not available). */
-      details?: Record<string, never> | null
-    }
-    /**
-     * @description Possible statuses for a BFL Flux Pro generation task.
-     * @example Ready
-     * @enum {string}
-     */
-    BFLStatus:
-      | 'Task not found'
-      | 'Pending'
-      | 'Request Moderated'
-      | 'Content Moderated'
-      | 'Ready'
-      | 'Error'
-    /** FluxProFillInputs */
-    BFLFluxProFillInputs: {
-      /**
-       * Image
-       * @description A Base64-encoded string representing the image you wish to modify. Can contain alpha mask if desired.
-       */
-      image: string
-      /**
-       * Mask
-       * @description A Base64-encoded string representing a mask for the areas you want to modify in the image. The mask should be the same dimensions as the image and in black and white. Black areas (0%) indicate no modification, while white areas (100%) specify areas for inpainting. Optional if you provide an alpha mask in the original image. Validation: The endpoint verifies that the dimensions of the mask match the original image.
-       */
-      mask?: string
-      /**
-       * Prompt
-       * @description The description of the changes you want to make. This text guides the inpainting process, allowing you to specify features, styles, or modifications for the masked area.
-       * @default
-       * @example ein fantastisches bild
-       */
-      prompt: string
-      /**
-       * Steps
-       * @description Number of steps for the image generation process
-       * @default 50
-       * @example 50
-       */
-      steps: number
-      /**
-       * Prompt Upsampling
-       * @description Whether to perform upsampling on the prompt. If active, automatically modifies the prompt for more creative generation
-       * @default false
-       */
-      prompt_upsampling: boolean
-      /**
-       * Seed
-       * @description Optional seed for reproducibility
-       */
-      seed?: number
-      /**
-       * Guidance
-       * @description Guidance strength for the image generation process
-       * @default 60
-       */
-      guidance: number
-      /**
-       * @description Output format for the generated image. Can be 'jpeg' or 'png'.
-       * @default jpeg
-       */
-      output_format: components['schemas']['BFLOutputFormat']
-      /**
-       * Safety Tolerance
-       * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
-       * @default 2
-       * @example 2
-       */
-      safety_tolerance: number
-      /**
-       * Webhook Url
-       * @description URL to receive webhook notifications
-       */
-      webhook_url?: string
-      /**
-       * Webhook Secret
-       * @description Optional secret for webhook signature verification
-       */
-      webhook_secret?: string
-    }
-    /** AsyncResponse */
-    BFLAsyncResponse: {
-      /** Id */
-      id: string
-      /** Polling Url */
-      polling_url: string
-    }
-    /** AsyncWebhookResponse */
-    BFLAsyncWebhookResponse: {
-      /** Id */
-      id: string
-      /** Status */
-      status: string
-      /** Webhook Url */
-      webhook_url: string
-    }
-    /** HTTPValidationError */
-    BFLHTTPValidationError: {
-      /** Detail */
-      detail?: components['schemas']['BFLValidationError'][]
-    }
-    /** FluxProExpandInputs */
-    BFLFluxProExpandInputs: {
-      /**
-       * Image
-       * @description A Base64-encoded string representing the image you wish to expand.
-       */
-      image: string
-      /**
-       * Top
-       * @description Number of pixels to expand at the top of the image
-       * @default 0
-       */
-      top: number
-      /**
-       * Bottom
-       * @description Number of pixels to expand at the bottom of the image
-       * @default 0
-       */
-      bottom: number
-      /**
-       * Left
-       * @description Number of pixels to expand on the left side of the image
-       * @default 0
-       */
-      left: number
-      /**
-       * Right
-       * @description Number of pixels to expand on the right side of the image
-       * @default 0
-       */
-      right: number
-      /**
-       * Prompt
-       * @description The description of the changes you want to make. This text guides the expansion process, allowing you to specify features, styles, or modifications for the expanded areas.
-       * @default
-       * @example ein fantastisches bild
-       */
-      prompt: string
-      /**
-       * Steps
-       * @description Number of steps for the image generation process
-       * @default 50
-       * @example 50
-       */
-      steps: number
-      /**
-       * Prompt Upsampling
-       * @description Whether to perform upsampling on the prompt. If active, automatically modifies the prompt for more creative generation
-       * @default false
-       */
-      prompt_upsampling: boolean
-      /**
-       * Seed
-       * @description Optional seed for reproducibility
-       */
-      seed?: number
-      /**
-       * Guidance
-       * @description Guidance strength for the image generation process
-       * @default 60
-       */
-      guidance: number
-      /**
-       * @description Output format for the generated image. Can be 'jpeg' or 'png'.
-       * @default jpeg
-       */
-      output_format: components['schemas']['BFLOutputFormat']
-      /**
-       * Safety Tolerance
-       * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
-       * @default 2
-       * @example 2
-       */
-      safety_tolerance: number
-      /**
-       * Webhook Url
-       * @description URL to receive webhook notifications
-       */
-      webhook_url?: string
-      /**
-       * Webhook Secret
-       * @description Optional secret for webhook signature verification
-       */
-      webhook_secret?: string
-    }
-    /** CannyInputs */
-    BFLCannyInputs: {
-      /**
-       * Prompt
-       * @description Text prompt for image generation
-       * @example ein fantastisches bild
-       */
-      prompt: string
-      /**
-       * Control Image
-       * @description Base64 encoded image to use as control input if no preprocessed image is provided
-       */
-      control_image?: string
-      /**
-       * Preprocessed Image
-       * @description Optional pre-processed image that will bypass the control preprocessing step
-       */
-      preprocessed_image?: string
-      /**
-       * Canny Low Threshold
-       * @description Low threshold for Canny edge detection
-       * @default 50
-       */
-      canny_low_threshold: number
-      /**
-       * Canny High Threshold
-       * @description High threshold for Canny edge detection
-       * @default 200
-       */
-      canny_high_threshold: number
-      /**
-       * Prompt Upsampling
-       * @description Whether to perform upsampling on the prompt
-       * @default false
-       */
-      prompt_upsampling: boolean
-      /**
-       * Seed
-       * @description Optional seed for reproducibility
-       * @example 42
-       */
-      seed?: number
-      /**
-       * Steps
-       * @description Number of steps for the image generation process
-       * @default 50
-       */
-      steps: number
-      /**
-       * @description Output format for the generated image. Can be 'jpeg' or 'png'.
-       * @default jpeg
-       */
-      output_format: components['schemas']['BFLOutputFormat']
-      /**
-       * Guidance
-       * @description Guidance strength for the image generation process
-       * @default 30
-       */
-      guidance: number
-      /**
-       * Safety Tolerance
-       * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
-       * @default 2
-       */
-      safety_tolerance: number
-      /**
-       * Webhook Url
-       * @description URL to receive webhook notifications
-       */
-      webhook_url?: string
-      /**
-       * Webhook Secret
-       * @description Optional secret for webhook signature verification
-       */
-      webhook_secret?: string
-    }
-    /** DepthInputs */
-    BFLDepthInputs: {
-      /**
-       * Prompt
-       * @description Text prompt for image generation
-       * @example ein fantastisches bild
-       */
-      prompt: string
-      /**
-       * Control Image
-       * @description Base64 encoded image to use as control input
-       */
-      control_image?: string
-      /**
-       * Preprocessed Image
-       * @description Optional pre-processed image that will bypass the control preprocessing step
-       */
-      preprocessed_image?: string
-      /**
-       * Prompt Upsampling
-       * @description Whether to perform upsampling on the prompt
-       * @default false
-       */
-      prompt_upsampling: boolean
-      /**
-       * Seed
-       * @description Optional seed for reproducibility
-       * @example 42
-       */
-      seed?: number
-      /**
-       * Steps
-       * @description Number of steps for the image generation process
-       * @default 50
-       */
-      steps: number
-      /**
-       * @description Output format for the generated image. Can be 'jpeg' or 'png'.
-       * @default jpeg
-       */
-      output_format: components['schemas']['BFLOutputFormat']
-      /**
-       * Guidance
-       * @description Guidance strength for the image generation process
-       * @default 15
-       */
-      guidance: number
-      /**
-       * Safety Tolerance
-       * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
-       * @default 2
-       */
-      safety_tolerance: number
-      /**
-       * Webhook Url
-       * @description URL to receive webhook notifications
-       */
-      webhook_url?: string
-      /**
-       * Webhook Secret
-       * @description Optional secret for webhook signature verification
-       */
-      webhook_secret?: string
-    }
-    /**
-     * OutputFormat
-     * @enum {string}
-     */
-    BFLOutputFormat: 'jpeg' | 'png'
-    /** ValidationError */
-    BFLValidationError: {
-      /** Location */
-      loc: (string | number)[]
-      /** Message */
-      msg: string
-      /** Error Type */
-      type: string
-    }
-    /** @description Parameters for the Recraft image generation proxy request. */
-    RecraftImageGenerationRequest: {
-      /** @description The text prompt describing the image to generate */
-      prompt: string
-      /** @description The model to use for generation (e.g., "recraftv3") */
-      model: string
-      /** @description The style to apply to the generated image (e.g., "digital_illustration") */
-      style?: string
-      /** @description The style ID to apply to the generated image (e.g., "123e4567-e89b-12d3-a456-426614174000"). If style_id is provided, style should not be provided. */
-      style_id?: string
-      /** @description The size of the generated image (e.g., "1024x1024") */
-      size: string
-      /** @description The controls for the generated image */
-      controls?: {
-        /** @description Defines artistic tone of your image. At a simple level, the person looks straight at the camera in a static and clean style. Dynamic and eccentric levels introduce movement and creativity. */
-        artistic_level?: number | null
-        /** @description An array of preferable colors */
-        colors?: components['schemas']['RGBColor'][]
-        /** @description Use given color as a desired background color */
-        background_color?: components['schemas']['RGBColor']
-        /** @description Do not embed text layouts */
-        no_text?: boolean
-      }
-      /** @description The number of images to generate */
-      n: number
-    }
-    /** @description Response from the Recraft image generation API. */
-    RecraftImageGenerationResponse: {
-      /** @description Unix timestamp when the generation was created */
-      created: number
-      /** @description Number of credits used for the generation */
-      credits: number
-      /** @description Array of generated image information */
-      data: {
-        /** @description Unique identifier for the generated image */
-        image_id?: string
-        /** @description URL to access the generated image */
-        url?: string
-      }[]
-    }
-    RecraftImageFeatures: {
-      nsfw_score?: number
-    }
-    RecraftTextLayoutItem: {
-      bbox: number[][]
-      text: string
-    }
-    RecraftImageColor: {
-      rgb?: number[]
-      std?: number[]
-      weight?: number
-    }
-    /** @enum {string} */
-    RecraftImageStyle:
-      | 'digital_illustration'
-      | 'icon'
-      | 'realistic_image'
-      | 'vector_illustration'
-    /** @enum {string} */
-    RecraftImageSubStyle:
-      | '2d_art_poster'
-      | '3d'
-      | '80s'
-      | 'glow'
-      | 'grain'
-      | 'hand_drawn'
-      | 'infantile_sketch'
-      | 'kawaii'
-      | 'pixel_art'
-      | 'psychedelic'
-      | 'seamless'
-      | 'voxel'
-      | 'watercolor'
-      | 'broken_line'
-      | 'colored_outline'
-      | 'colored_shapes'
-      | 'colored_shapes_gradient'
-      | 'doodle_fill'
-      | 'doodle_offset_fill'
-      | 'offset_fill'
-      | 'outline-solid'
-      | 'outline_gradient'
-      | 'uneven_fill'
-      | '70s'
-      | 'cartoon'
-      | 'doodle_line_art'
-      | 'engraving'
-      | 'flat_2'
-      | 'kawaii'
-      | 'line_art'
-      | 'linocut'
-      | 'seamless'
-      | 'b_and_w'
-      | 'enterprise'
-      | 'hard_flash'
-      | 'hdr'
-      | 'motion_blur'
-      | 'natural_light'
-      | 'studio_portrait'
-      | 'line_circuit'
-      | '2d_art_poster_2'
-      | 'engraving_color'
-      | 'flat_air_art'
-      | 'hand_drawn_outline'
-      | 'handmade_3d'
-      | 'stickers_drawings'
-      | 'plastic'
-      | 'pictogram'
-    /** @enum {string} */
-    RecraftTransformModel:
-      | 'refm1'
-      | 'recraft20b'
-      | 'recraftv2'
-      | 'recraftv3'
-      | 'flux1_1pro'
-      | 'flux1dev'
-      | 'imagen3'
-      | 'hidream_i1_dev'
-    /** @enum {string} */
-    RecraftImageFormat: 'webp' | 'png'
-    /** @enum {string} */
-    RecraftResponseFormat: 'url' | 'b64_json'
-    RecraftImage: {
-      b64_json?: string
-      features?: components['schemas']['RecraftImageFeatures']
-      /** Format: uuid */
-      image_id: string
-      revised_prompt?: string
-      url?: string
-    }
-    RecraftUserControls: {
-      artistic_level?: number
-      background_color?: components['schemas']['RecraftImageColor']
-      colors?: components['schemas']['RecraftImageColor'][]
-      no_text?: boolean
-    }
-    RecraftTextLayout: components['schemas']['RecraftTextLayoutItem'][]
-    RecraftProcessImageRequest: {
-      /** Format: binary */
-      image: string
-      image_format?: components['schemas']['RecraftImageFormat']
-      response_format?: components['schemas']['RecraftResponseFormat']
-    }
-    RecraftProcessImageResponse: {
-      created: number
-      credits: number
-      image: components['schemas']['RecraftImage']
-    }
-    RecraftImageToImageRequest: {
-      block_nsfw?: boolean
-      calculate_features?: boolean
-      controls?: components['schemas']['RecraftUserControls']
-      /** Format: binary */
-      image: string
-      image_format?: components['schemas']['RecraftImageFormat']
-      model?: components['schemas']['RecraftTransformModel']
-      n?: number
-      negative_prompt?: string
-      prompt: string
-      response_format?: components['schemas']['RecraftResponseFormat']
-      strength: number
-      style?: components['schemas']['RecraftImageStyle']
-      /** Format: uuid */
-      style_id?: string
-      substyle?: components['schemas']['RecraftImageSubStyle']
-      text_layout?: components['schemas']['RecraftTextLayout']
-    }
-    RecraftGenerateImageResponse: {
-      created: number
-      credits: number
-      data: components['schemas']['RecraftImage'][]
-    }
-    RecraftTransformImageWithMaskRequest: {
-      block_nsfw?: boolean
-      calculate_features?: boolean
-      /** Format: binary */
-      image: string
-      image_format?: components['schemas']['RecraftImageFormat']
-      /** Format: binary */
-      mask: string
-      model?: components['schemas']['RecraftTransformModel']
-      n?: number
-      negative_prompt?: string
-      prompt: string
-      response_format?: components['schemas']['RecraftResponseFormat']
-      style?: components['schemas']['RecraftImageStyle']
-      /** Format: uuid */
-      style_id?: string
-      substyle?: components['schemas']['RecraftImageSubStyle']
-      text_layout?: components['schemas']['RecraftTextLayout']
-    }
-    KlingErrorResponse: {
-      /** @description - 1000: Authentication failed
-       *     - 1001: Authorization is empty
-       *     - 1002: Authorization is invalid
-       *     - 1003: Authorization is not yet valid
-       *     - 1004: Authorization has expired
-       *     - 1100: Account exception
-       *     - 1101: Account in arrears (postpaid scenario)
-       *     - 1102: Resource pack depleted or expired (prepaid scenario)
-       *     - 1103: Unauthorized access to requested resource
-       *     - 1200: Invalid request parameters
-       *     - 1201: Invalid parameters
-       *     - 1202: Invalid request method
-       *     - 1203: Requested resource does not exist
-       *     - 1300: Trigger platform strategy
-       *     - 1301: Trigger content security policy
-       *     - 1302: API request too frequent
-       *     - 1303: Concurrency/QPS exceeds limit
-       *     - 1304: Trigger IP whitelist policy
-       *     - 5000: Internal server error
-       *     - 5001: Service temporarily unavailable
-       *     - 5002: Server internal timeout
-       *      */
-      code: number
-      /** @description Human-readable error message */
-      message: string
-      /** @description Request ID for tracking and troubleshooting */
-      request_id: string
-    }
-    TripoTask: {
-      task_id: string
-      type: string
-      /** @enum {string} */
-      status:
-        | 'queued'
-        | 'running'
-        | 'success'
-        | 'failed'
-        | 'cancelled'
-        | 'unknown'
-        | 'banned'
-        | 'expired'
-      input: Record<string, never>
-      output: {
-        model?: string
-        base_model?: string
-        pbr_model?: string
-        rendered_image?: string
-        riggable?: boolean
+            author?: string;
+            machine_stats?: components["schemas"]["MachineStats"];
+            status?: components["schemas"]["WorkflowRunStatus"];
+            storage_file?: components["schemas"]["StorageFile"];
+        };
+        StorageFile: {
+            /**
+             * Format: uuid
+             * @description Unique identifier for the storage file
+             */
+            id?: string;
+            /** @description Path to the file in storage */
+            file_path?: string;
+            /** @description Public URL */
+            public_url?: string;
+        };
+        Publisher: {
+            name?: string;
+            /** @description The unique identifier for the publisher. It's akin to a username. Should be lowercase. */
+            id?: string;
+            description?: string;
+            website?: string;
+            support?: string;
+            source_code_repo?: string;
+            /** @description URL to the publisher's logo. */
+            logo?: string;
+            /**
+             * Format: date-time
+             * @description The date and time the publisher was created.
+             */
+            createdAt?: string;
+            /** @description A list of members in the publisher. */
+            members?: components["schemas"]["PublisherMember"][];
+            /** @description The status of the publisher. */
+            status?: components["schemas"]["PublisherStatus"];
+        };
+        PublisherMember: {
+            /** @description The unique identifier for the publisher member. */
+            id?: string;
+            /** @description The user associated with this publisher member. */
+            user?: components["schemas"]["PublisherUser"];
+            /** @description The role of the user in the publisher. */
+            role?: string;
+        };
+        Node: {
+            /** @description The unique identifier of the node. */
+            id?: string;
+            /** @description The display name of the node. */
+            name?: string;
+            /**
+             * @deprecated
+             * @description DEPRECATED: The category of the node. Use 'tags' field instead. This field will be removed in a future version.
+             */
+            category?: string;
+            description?: string;
+            author?: string;
+            /** @description The path to the LICENSE file in the node's repository. */
+            license?: string;
+            /** @description URL to the node's icon. */
+            icon?: string;
+            /** @description URL to the node's repository. */
+            repository?: string;
+            tags?: string[];
+            /** @description Admin-only tags for security warnings and admin metadata */
+            tags_admin?: string[];
+            /** @description List of operating systems that this node supports */
+            supported_os?: string[];
+            /** @description List of accelerators (e.g. CUDA, DirectML, ROCm) that this node supports */
+            supported_accelerators?: string[];
+            /** @description Supported versions of ComfyUI */
+            supported_comfyui_version?: string;
+            /** @description Supported versions of ComfyUI frontend */
+            supported_comfyui_frontend_version?: string;
+            /** @description The latest version of the node. */
+            latest_version?: components["schemas"]["NodeVersion"];
+            /** @description The average rating of the node. */
+            rating?: number;
+            /** @description The number of downloads of the node. */
+            downloads?: number;
+            /** @description The publisher of the node. */
+            publisher?: components["schemas"]["Publisher"];
+            /** @description The status of the node. */
+            status?: components["schemas"]["NodeStatus"];
+            /** @description The status detail of the node. */
+            status_detail?: string;
+            /** @description Translations of node metadata in different languages. */
+            translations?: {
+                [key: string]: {
+                    [key: string]: unknown;
+                };
+            };
+            /** @description A numerical value representing the node's search ranking, used for sorting search results. */
+            search_ranking?: number;
+            /** @description A list of Comfy node names that are preempted by this node. */
+            preempted_comfy_node_names?: string[];
+            /** @description URL to the node's banner. */
+            banner_url?: string;
+            /** @description Number of stars on the GitHub repository. */
+            github_stars?: number;
+            /**
+             * Format: date-time
+             * @description The date and time when the node was created
+             */
+            created_at?: string;
+        };
+        NodeVersion: {
+            id?: string;
+            /** @description The version identifier, following semantic versioning. Must be unique for the node. */
+            version?: string;
+            /**
+             * Format: date-time
+             * @description The date and time the version was created.
+             */
+            createdAt?: string;
+            /** @description Summary of changes made in this version */
+            changelog?: string;
+            /** @description A list of pip dependencies required by the node. */
+            dependencies?: string[];
+            /** @description [Output Only] URL to download this version of the node */
+            downloadUrl?: string;
+            /** @description Indicates if this version is deprecated. */
+            deprecated?: boolean;
+            /** @description The status of the node version. */
+            status?: components["schemas"]["NodeVersionStatus"];
+            status_reason?: string;
+            tags?: string[];
+            /** @description Admin-only tags for security warnings and admin metadata */
+            tags_admin?: string[];
+            /** @description The unique identifier of the node. */
+            node_id?: string;
+            /** @description The status of comfy node extraction process. */
+            comfy_node_extract_status?: string;
+            /** @description Supported versions of ComfyUI */
+            supported_comfyui_version?: string;
+            /** @description Supported versions of ComfyUI frontend */
+            supported_comfyui_frontend_version?: string;
+            /** @description List of operating systems that this node supports */
+            supported_os?: string[];
+            /** @description List of accelerators (e.g. CUDA, DirectML, ROCm) that this node supports */
+            supported_accelerators?: string[];
+        };
+        ComfyNode: {
+            /** @description Unique identifier for the node */
+            comfy_node_name?: string;
+            /** @description UI category where the node is listed, used for grouping nodes. */
+            category?: string;
+            /** @description Brief description of the node's functionality or purpose. */
+            description?: string;
+            /** @description Defines input parameters */
+            input_types?: string;
+            /** @description Indicates if the node is deprecated. Deprecated nodes are hidden in the UI. */
+            deprecated?: boolean;
+            /** @description Indicates if the node is experimental, subject to changes or removal. */
+            experimental?: boolean;
+            /** @description Boolean values indicating if each output is a list. */
+            output_is_list?: boolean[];
+            /** @description Names of the outputs for clarity in workflows. */
+            return_names?: string;
+            /** @description Specifies the types of outputs produced by the node. */
+            return_types?: string;
+            /** @description Name of the entry-point function to execute the node. */
+            function?: string;
+            /** @description The policy associated with the comfy node. */
+            policy?: components["schemas"]["ComfyNodePolicy"];
+        };
+        ComfyNodeCloudBuildInfo: {
+            project_id?: string;
+            project_number?: string;
+            location?: string;
+            build_id?: string;
+        };
+        Error: {
+            /** @description A clear and concise description of the error. */
+            message?: string;
+            /** @description Optional detailed information about the error or hints for resolving it. */
+            details?: string[];
+        };
+        NodeVersionUpdateRequest: {
+            /** @description The changelog describing the version changes. */
+            changelog?: string;
+            /** @description Whether the version is deprecated. */
+            deprecated?: boolean;
+        };
         /** @enum {string} */
-        topology?: 'bip' | 'quad'
-      }
-      progress: number
-      create_time: number
-    }
-    TripoSuccessTask: {
-      /** @enum {integer} */
-      code: 0
-      data: {
-        /** @description used for getTask */
-        task_id: string
-      }
-    }
-    TripoBalance: {
-      balance: number
-      frozen: number
-    }
-    TripoErrorResponse: {
-      /** @enum {integer} */
-      code: 1001 | 2000 | 2001 | 2002 | 2003 | 2004 | 2006 | 2007 | 2008 | 2010
-      message: string
-      suggestion: string
-    }
-    /**
-     * @description Standard success code for Tripo API responses. Typically 0 for success.
-     * @example 0
-     */
-    TripoResponseSuccessCode: number
-    /**
-     * @description The type of the Tripo task, specifically for text-to-model operations.
-     * @example text_to_model
-     * @enum {string}
-     */
-    TripoTextToModel: 'text_to_model'
-    /**
-     * @description Version of the Tripo model.
-     * @example v2.5-20250123
-     * @enum {string}
-     */
-    TripoModelVersion: 'v2.5-20250123' | 'v2.0-20240919' | 'v1.4-20240625'
-    /**
-     * @description Style for the Tripo model generation.
-     * @example object:clay
-     * @enum {string}
-     */
-    TripoModelStyle:
-      | 'person:person2cartoon'
-      | 'animal:venom'
-      | 'object:clay'
-      | 'object:steampunk'
-      | 'object:christmas'
-      | 'object:barbie'
-      | 'gold'
-      | 'ancient_bronze'
-    /**
-     * @description Task type for Tripo image-to-model generation.
-     * @example image_to_model
-     * @enum {string}
-     */
-    TripoImageToModel: 'image_to_model'
-    /**
-     * @description Task type for Tripo multiview-to-model generation.
-     * @example multiview_to_model
-     * @enum {string}
-     */
-    TripoMultiviewToModel: 'multiview_to_model'
-    /**
-     * @description Mode for multiview generation, specifying view orientation.
-     * @example LEFT
-     * @enum {string}
-     */
-    TripoMultiviewMode: 'LEFT' | 'RIGHT'
-    /** @enum {string} */
-    TripoTextureQuality: 'standard' | 'detailed'
-    /** @enum {string} */
-    TripoTextureAlignment: 'original_image' | 'geometry'
-    /**
-     * @default default
-     * @enum {string}
-     */
-    TripoOrientation: 'align_image' | 'default'
-    /** @enum {string} */
-    TripoTypeTextureModel: 'texture_model'
-    /** @enum {string} */
-    TripoTypeRefineModel: 'refine_model'
-    /** @enum {string} */
-    TripoTypeAnimatePrerigcheck: 'animate_prerigcheck'
-    /** @enum {string} */
-    TripoTypeAnimateRig: 'animate_rig'
-    /** @enum {string} */
-    TripoStandardFormat: 'glb' | 'fbx'
-    /** @enum {string} */
-    TripoTopology: 'bip' | 'quad'
-    /** @enum {string} */
-    TripoSpec: 'mixamo' | 'tripo'
-    /** @enum {string} */
-    TripoTypeAnimateRetarget: 'animate_retarget'
-    /** @enum {string} */
-    TripoAnimation:
-      | 'preset:idle'
-      | 'preset:walk'
-      | 'preset:climb'
-      | 'preset:jump'
-      | 'preset:run'
-      | 'preset:slash'
-      | 'preset:shoot'
-      | 'preset:hurt'
-      | 'preset:fall'
-      | 'preset:turn'
-    /** @enum {string} */
-    TripoTypeStylizeModel: 'stylize_model'
-    /** @enum {string} */
-    TripoStylizeOptions: 'lego' | 'voxel' | 'voronoi' | 'minecraft'
-    /** @enum {string} */
-    TripoTypeConvertModel: 'convert_model'
-    /** @enum {string} */
-    TripoConvertFormat: 'GLTF' | 'USDZ' | 'FBX' | 'OBJ' | 'STL' | '3MF'
-    /** @enum {string} */
-    TripoTextureFormat:
-      | 'BMP'
-      | 'DPX'
-      | 'HDR'
-      | 'JPEG'
-      | 'OPEN_EXR'
-      | 'PNG'
-      | 'TARGA'
-      | 'TIFF'
-      | 'WEBP'
-    /**
-     * @description The aspect ratio of the generation
-     * @default 16:9
-     * @example 16:9
-     * @enum {string}
-     */
-    LumaAspectRatio: '1:1' | '16:9' | '9:16' | '4:3' | '3:4' | '21:9' | '9:21'
-    /**
-     * @description The keyframes of the generation
-     * @example {
-     *       "frame0": {
-     *         "type": "image",
-     *         "url": "https://example.com/image.jpg"
-     *       },
-     *       "frame1": {
-     *         "type": "generation",
-     *         "id": "123e4567-e89b-12d3-a456-426614174000"
-     *       }
-     *     }
-     */
-    LumaKeyframes: {
-      frame0?: components['schemas']['LumaKeyframe']
-      frame1?: components['schemas']['LumaKeyframe']
-    }
-    /**
-     * @description The video model used for the generation
-     * @default ray-2
-     * @example ray-2
-     * @enum {string}
-     */
-    LumaVideoModel: 'ray-2' | 'ray-flash-2' | 'ray-1-6'
-    LumaVideoModelOutputResolution: ('540p' | '720p' | '1080p' | '4k') | string
-    LumaVideoModelOutputDuration: ('5s' | '9s') | string
-    /**
-     * @description The image model used for the generation
-     * @default photon-1
-     * @enum {string}
-     */
-    LumaImageModel: 'photon-1' | 'photon-flash-1'
-    /** @description The image reference object */
-    LumaImageRef: {
-      /**
-       * Format: uri
-       * @description The URL of the image reference
-       */
-      url?: string
-      /** @description The weight of the image reference */
-      weight?: number
-    }
-    /** @description The image identity object */
-    LumaImageIdentity: {
-      /** @description The URLs of the image identity */
-      images?: string[]
-    }
-    /** @description The modify image reference object */
-    LumaModifyImageRef: {
-      /**
-       * Format: uri
-       * @description The URL of the image reference
-       */
-      url?: string
-      /** @description The weight of the modify image reference */
-      weight?: number
-    }
-    /**
-     * @description The generation reference object
-     * @example {
-     *       "type": "generation",
-     *       "id": "123e4567-e89b-12d3-a456-426614174003"
-     *     }
-     */
-    LumaGenerationReference: {
-      /**
-       * @description discriminator enum property added by openapi-typescript
-       * @enum {string}
-       */
-      type: 'generation'
-      /**
-       * Format: uuid
-       * @description The ID of the generation
-       */
-      id: string
-    }
-    /**
-     * @description The image object
-     * @example {
-     *       "type": "image",
-     *       "url": "https://example.com/image.jpg"
-     *     }
-     */
-    LumaImageReference: {
-      /**
-       * @description discriminator enum property added by openapi-typescript
-       * @enum {string}
-       */
-      type: 'image'
-      /**
-       * Format: uri
-       * @description The URL of the image
-       */
-      url: string
-    }
-    /** @description A keyframe can be either a Generation reference, an Image, or a Video */
-    LumaKeyframe:
-      | components['schemas']['LumaGenerationReference']
-      | components['schemas']['LumaImageReference']
-    /** @enum {string} */
-    LumaGenerationType: 'video' | 'image'
-    /**
-     * @description The state of the generation
-     * @example completed
-     * @enum {string}
-     */
-    LumaState: 'queued' | 'dreaming' | 'completed' | 'failed'
-    /** @description The assets of the generation */
-    LumaAssets: {
-      /**
-       * Format: uri
-       * @description The URL of the video
-       */
-      video?: string
-      /**
-       * Format: uri
-       * @description The URL of the image
-       */
-      image?: string
-      /**
-       * Format: uri
-       * @description The URL of the progress video
-       */
-      progress_video?: string
-    }
-    /** @description The generation request object */
-    LumaGenerationRequest: {
-      /**
-       * @default video
-       * @enum {string}
-       */
-      generation_type: 'video'
-      /** @description The prompt of the generation */
-      prompt: string
-      aspect_ratio: components['schemas']['LumaAspectRatio']
-      /** @description Whether to loop the video */
-      loop?: boolean
-      keyframes?: components['schemas']['LumaKeyframes']
-      /**
-       * Format: uri
-       * @description The callback URL of the generation, a POST request with Generation object will be sent to the callback URL when the generation is dreaming, completed, or failed
-       */
-      callback_url?: string
-      model: components['schemas']['LumaVideoModel']
-      resolution: components['schemas']['LumaVideoModelOutputResolution']
-      duration: components['schemas']['LumaVideoModelOutputDuration']
-    }
-    /** @description The image generation request object */
-    LumaImageGenerationRequest: {
-      /**
-       * @default image
-       * @enum {string}
-       */
-      generation_type: 'image'
-      model?: components['schemas']['LumaImageModel']
-      /** @description The prompt of the generation */
-      prompt?: string
-      aspect_ratio?: components['schemas']['LumaAspectRatio']
-      /**
-       * Format: uri
-       * @description The callback URL for the generation
-       */
-      callback_url?: string
-      image_ref?: components['schemas']['LumaImageRef'][]
-      style_ref?: components['schemas']['LumaImageRef'][]
-      character_ref?: {
-        identity0?: components['schemas']['LumaImageIdentity']
-      }
-      modify_image_ref?: components['schemas']['LumaModifyImageRef']
-    }
-    /** @description The upscale generation request object */
-    LumaUpscaleVideoGenerationRequest: {
-      /**
-       * @default upscale_video
-       * @enum {string}
-       */
-      generation_type: 'upscale_video'
-      resolution?: components['schemas']['LumaVideoModelOutputResolution']
-      /**
-       * Format: uri
-       * @description The callback URL for the upscale
-       */
-      callback_url?: string
-    }
-    /** @description The audio generation request object */
-    LumaAudioGenerationRequest: {
-      /**
-       * @default add_audio
-       * @enum {string}
-       */
-      generation_type: 'add_audio'
-      /** @description The prompt of the audio */
-      prompt?: string
-      /** @description The negative prompt of the audio */
-      negative_prompt?: string
-      /**
-       * Format: uri
-       * @description The callback URL for the audio
-       */
-      callback_url?: string
-    }
-    /**
-     * @description The error object
-     * @example {
-     *       "detail": "Invalid API key is provided"
-     *     }
-     */
-    LumaError: {
-      /** @description The error message */
-      detail?: string
-    }
-    /**
-     * @description The generation response object
-     * @example {
-     *       "id": "123e4567-e89b-12d3-a456-426614174000",
-     *       "state": "completed",
-     *       "failure_reason": null,
-     *       "created_at": "2023-06-01T12:00:00Z",
-     *       "assets": {
-     *         "video": "https://example.com/video.mp4"
-     *       },
-     *       "model": "ray-2",
-     *       "request": {
-     *         "prompt": "A serene lake surrounded by mountains at sunset",
-     *         "aspect_ratio": "16:9",
-     *         "loop": true,
-     *         "keyframes": {
-     *           "frame0": {
-     *             "type": "image",
-     *             "url": "https://example.com/image.jpg"
-     *           },
-     *           "frame1": {
-     *             "type": "generation",
-     *             "id": "123e4567-e89b-12d3-a456-426614174000"
-     *           }
-     *         }
-     *       }
-     *     }
-     */
-    LumaGeneration: {
-      /**
-       * Format: uuid
-       * @description The ID of the generation
-       */
-      id?: string
-      generation_type?: components['schemas']['LumaGenerationType']
-      state?: components['schemas']['LumaState']
-      /** @description The reason for the state of the generation */
-      failure_reason?: string
-      /**
-       * Format: date-time
-       * @description The date and time when the generation was created
-       */
-      created_at?: string
-      assets?: components['schemas']['LumaAssets']
-      /** @description The model used for the generation */
-      model?: string
-      /** @description The request of the generation */
-      request?:
-        | components['schemas']['LumaGenerationRequest']
-        | components['schemas']['LumaImageGenerationRequest']
-        | components['schemas']['LumaUpscaleVideoGenerationRequest']
-        | components['schemas']['LumaAudioGenerationRequest']
-    }
-    PixverseTextVideoRequest: {
-      /** @enum {string} */
-      aspect_ratio: '16:9' | '4:3' | '1:1' | '3:4' | '9:16'
-      /** @enum {integer} */
-      duration: 5 | 8
-      /** @enum {string} */
-      model: 'v3.5'
-      /** @enum {string} */
-      motion_mode?: 'normal' | 'fast'
-      negative_prompt?: string
-      prompt: string
-      /** @enum {string} */
-      quality: '360p' | '540p' | '720p' | '1080p'
-      seed?: number
-      /** @enum {string} */
-      style?: 'anime' | '3d_animation' | 'clay' | 'comic' | 'cyberpunk'
-      template_id?: number
-      water_mark?: boolean
-    }
-    PixverseVideoResponse: {
-      ErrCode?: number
-      ErrMsg?: string
-      Resp?: {
-        video_id?: number
-      }
-    }
-    PixverseImageUploadResponse: {
-      ErrCode?: number
-      ErrMsg?: string
-      Resp?: {
-        img_id?: number
-      }
-    }
-    PixverseImageVideoRequest: {
-      img_id: number
-      /** @enum {string} */
-      model: 'v3.5'
-      prompt: string
-      /** @enum {integer} */
-      duration: 5 | 8
-      /** @enum {string} */
-      quality: '360p' | '540p' | '720p' | '1080p'
-      /** @enum {string} */
-      motion_mode?: 'normal' | 'fast'
-      seed?: number
-      /** @enum {string} */
-      style?: 'anime' | '3d_animation' | 'clay' | 'comic' | 'cyberpunk'
-      template_id?: number
-      water_mark?: boolean
-    }
-    PixverseTransitionVideoRequest: {
-      first_frame_img: number
-      last_frame_img: number
-      /** @enum {string} */
-      model: 'v3.5'
-      /** @enum {integer} */
-      duration: 5 | 8
-      /** @enum {string} */
-      quality: '360p' | '540p' | '720p' | '1080p'
-      /** @enum {string} */
-      motion_mode: 'normal' | 'fast'
-      seed: number
-      prompt: string
-      /** @enum {string} */
-      style?: 'anime' | '3d_animation' | 'clay' | 'comic' | 'cyberpunk'
-      template_id?: number
-      water_mark?: boolean
-    }
-    PixverseVideoResultResponse: {
-      ErrCode?: number
-      ErrMsg?: string
-      Resp?: {
-        create_time?: string
-        id?: number
-        modify_time?: string
-        negative_prompt?: string
-        outputHeight?: number
-        outputWidth?: number
-        prompt?: string
-        resolution_ratio?: number
-        seed?: number
-        size?: number
-        /**
-         * @description Video generation status codes:
-         *     * 1 - Generation successful
-         *     * 5 - Generating
-         *     * 6 - Deleted
-         *     * 7 - Contents moderation failed
-         *     * 8 - Generation failed
-         *
-         * @enum {integer}
-         */
-        status?: 1 | 5 | 6 | 7 | 8
-        style?: string
-        url?: string
-      }
-    }
-    Veo2GenVidRequest: {
-      instances?: {
-        /** @description Text description of the video */
-        prompt: string
-        /** @description Optional image to guide video generation */
-        image?: {
-          /** Format: byte */
-          bytesBase64Encoded?: string
-          gcsUri?: string
-          mimeType?: string
-        } & (unknown | unknown)
-      }[]
-      parameters?: {
-        /** @example 16:9 */
-        aspectRatio?: string
-        negativePrompt?: string
+        NodeStatus: "NodeStatusActive" | "NodeStatusDeleted" | "NodeStatusBanned";
         /** @enum {string} */
-        personGeneration?: 'ALLOW' | 'BLOCK'
-        sampleCount?: number
-        /** Format: uint32 */
-        seed?: number
-        /** @description Optional Cloud Storage URI to upload the video */
-        storageUri?: string
-        durationSeconds?: number
-        enhancePrompt?: boolean
-      }
-    }
-    Veo2GenVidResponse: {
-      /**
-       * @description Operation resource name
-       * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/a1b07c8e-7b5a-4aba-bb34-3e1ccb8afcc8
-       */
-      name: string
-    }
-    Veo2GenVidPollRequest: {
-      /**
-       * @description Full operation name (from predict response)
-       * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/OPERATION_ID
-       */
-      operationName: string
-    }
-    Veo2GenVidPollResponse: {
-      name?: string
-      done?: boolean
-      /** @description The actual prediction response if done is true */
-      response?: {
-        /** @example type.googleapis.com/cloud.ai.large_models.vision.GenerateVideoResponse */
-        '@type'?: string
-        /** @description Count of media filtered by responsible AI policies */
-        raiMediaFilteredCount?: number
-        /** @description Reasons why media was filtered by responsible AI policies */
-        raiMediaFilteredReasons?: string[]
-        videos?: {
-          /** @description Cloud Storage URI of the video */
-          gcsUri?: string
-          /** @description Base64-encoded video content */
-          bytesBase64Encoded?: string
-          /** @description Video MIME type */
-          mimeType?: string
-        }[]
-      }
-      /** @description Error details if operation failed */
-      error?: {
-        /** @description Error code */
-        code?: number
-        /** @description Error message */
-        message?: string
-      }
-    }
-    VeoGenVidRequest: {
-      instances?: {
-        /** @description Text description of the video */
-        prompt: string
-        /** @description Optional image to guide video generation */
-        image?: {
-          /** Format: byte */
-          bytesBase64Encoded?: string
-          gcsUri?: string
-          mimeType?: string
-        } & (unknown | unknown)
-      }[]
-      parameters?: {
-        /** @example 16:9 */
-        aspectRatio?: string
-        negativePrompt?: string
+        ComfyNodePolicy: "ComfyNodePolicyActive" | "ComfyNodePolicyBanned" | "ComfyNodePolicyLocalOnly";
+        ComfyNodeUpdateRequest: {
+            /** @description UI category where the node is listed, used for grouping nodes. */
+            category?: string;
+            /** @description Brief description of the node's functionality or purpose. */
+            description?: string;
+            /** @description Defines input parameters */
+            input_types?: string;
+            /** @description Indicates if the node is deprecated. Deprecated nodes are hidden in the UI. */
+            deprecated?: boolean;
+            /** @description Indicates if the node is experimental, subject to changes or removal. */
+            experimental?: boolean;
+            /** @description Boolean values indicating if each output is a list. */
+            output_is_list?: boolean[];
+            /** @description Names of the outputs for clarity in workflows. */
+            return_names?: string;
+            /** @description Specifies the types of outputs produced by the node. */
+            return_types?: string;
+            /** @description Name of the entry-point function to execute the node. */
+            function?: string;
+            /** @description The policy associated with the comfy node. */
+            policy?: components["schemas"]["ComfyNodePolicy"];
+        };
         /** @enum {string} */
-        personGeneration?: 'ALLOW' | 'BLOCK'
-        sampleCount?: number
-        /** Format: uint32 */
-        seed?: number
-        /** @description Optional Cloud Storage URI to upload the video */
-        storageUri?: string
-        durationSeconds?: number
-        enhancePrompt?: boolean
-      }
-    }
-    VeoGenVidResponse: {
-      /**
-       * @description Operation resource name
-       * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/a1b07c8e-7b5a-4aba-bb34-3e1ccb8afcc8
-       */
-      name: string
-    }
-    VeoGenVidPollRequest: {
-      /**
-       * @description Full operation name (from predict response)
-       * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/OPERATION_ID
-       */
-      operationName: string
-    }
-    VeoGenVidPollResponse: {
-      name?: string
-      done?: boolean
-      /** @description The actual prediction response if done is true */
-      response?: {
-        /** @example type.googleapis.com/cloud.ai.large_models.vision.GenerateVideoResponse */
-        '@type'?: string
-        /** @description Count of media filtered by responsible AI policies */
-        raiMediaFilteredCount?: number
-        /** @description Reasons why media was filtered by responsible AI policies */
-        raiMediaFilteredReasons?: string[]
-        videos?: {
-          /** @description Cloud Storage URI of the video */
-          gcsUri?: string
-          /** @description Base64-encoded video content */
-          bytesBase64Encoded?: string
-          /** @description Video MIME type */
-          mimeType?: string
-        }[]
-      }
-      /** @description Error details if operation failed */
-      error?: {
-        /** @description Error code */
-        code?: number
-        /** @description Error message */
-        message?: string
-      }
-    }
-    RunwayImageToVideoRequest: {
-      promptImage: components['schemas']['RunwayPromptImageObject']
-      /**
-       * Format: int64
-       * @description Random seed for generation
-       */
-      seed: number
-      /** @description Model to use for generation */
-      model: components['schemas']['RunwayModelEnum']
-      /** @description Text prompt for the generation */
-      promptText?: string
-      /** @description The number of seconds of duration for the output video. */
-      duration: components['schemas']['RunwayDurationEnum']
-      /** @description The resolution (aspect ratio) of the output video. Allowable values depend on the selected model. 1280:768 and 768:1280 are only supported for gen3a_turbo. */
-      ratio: components['schemas']['RunwayAspectRatioEnum']
-    }
-    RunwayImageToVideoResponse: {
-      /** @description Task ID */
-      id?: string
-    }
-    RunwayTextToImageResponse: {
-      /** @description Task ID */
-      id?: string
-    }
-    RunwayTaskStatusResponse: {
-      /** @description Task ID */
-      id: string
-      /** @description Task status */
-      status: components['schemas']['RunwayTaskStatusEnum']
-      /**
-       * Format: date-time
-       * @description Task creation timestamp
-       */
-      createdAt: string
-      /** @description Array of output video URLs */
-      output?: string[]
-      /**
-       * Format: float
-       * @description Float value between 0 and 1 representing the progress of the task. Only available if status is RUNNING.
-       */
-      progress?: number
-    }
-    /**
-     * @description Possible statuses for a Runway task.
-     * @enum {string}
-     */
-    RunwayTaskStatusEnum:
-      | 'SUCCEEDED'
-      | 'RUNNING'
-      | 'FAILED'
-      | 'PENDING'
-      | 'CANCELLED'
-      | 'THROTTLED'
-    /**
-     * @description Available Runway models for generation.
-     * @enum {string}
-     */
-    RunwayModelEnum: 'gen4_turbo' | 'gen3a_turbo'
-    /** @description Represents an image with its position in the video sequence. */
-    RunwayPromptImageDetailedObject: {
-      /** @description A HTTPS URL or data URI containing an encoded image. */
-      uri: string
-      /**
-       * @description The position of the image in the output video. 'last' is currently supported for gen3a_turbo only.
-       * @enum {string}
-       */
-      position: 'first' | 'last'
-    }
-    /** @enum {integer} */
-    RunwayDurationEnum: 5 | 10
-    /** @enum {string} */
-    RunwayAspectRatioEnum:
-      | '1280:720'
-      | '720:1280'
-      | '1104:832'
-      | '832:1104'
-      | '960:960'
-      | '1584:672'
-      | '1280:768'
-      | '768:1280'
-    /** @enum {string} */
-    RunwayTextToImageAspectRatioEnum:
-      | '1920:1080'
-      | '1080:1920'
-      | '1024:1024'
-      | '1360:768'
-      | '1080:1080'
-      | '1168:880'
-      | '1440:1080'
-      | '1080:1440'
-      | '1808:768'
-      | '2112:912'
-    /** @description Image(s) to use for the video generation. Can be a single URI or an array of image objects with positions. */
-    RunwayPromptImageObject:
-      | string
-      | components['schemas']['RunwayPromptImageDetailedObject'][]
-    OpenAIImageGenerationResponse: {
-      data?: {
-        /** @description Base64 encoded image data */
-        b64_json?: string
-        /** @description URL of the image */
-        url?: string
-        /** @description Revised prompt */
-        revised_prompt?: string
-      }[]
-      usage?: {
-        input_tokens?: number
-        input_tokens_details?: {
-          text_tokens?: number
-          image_tokens?: number
-        }
-        output_tokens?: number
-        total_tokens?: number
-      }
-    }
-    OpenAIImageGenerationRequest: {
-      /**
-       * @description The model to use for image generation
-       * @example dall-e-3
-       */
-      model?: string
-      /**
-       * @description A text description of the desired image
-       * @example Draw a rocket in front of a blackhole in deep space
-       */
-      prompt: string
-      /**
-       * @description The number of images to generate (1-10). Only 1 supported for dall-e-3.
-       * @example 1
-       */
-      n?: number
-      /**
-       * @description The quality of the generated image
-       * @example high
-       * @enum {string}
-       */
-      quality?: 'low' | 'medium' | 'high' | 'standard' | 'hd'
-      /**
-       * @description Size of the image (e.g., 1024x1024, 1536x1024, auto)
-       * @example 1024x1536
-       */
-      size?: string
-      /**
-       * @description Format of the output image
-       * @example png
-       * @enum {string}
-       */
-      output_format?: 'png' | 'webp' | 'jpeg'
-      /**
-       * @description Compression level for JPEG or WebP (0-100)
-       * @example 100
-       */
-      output_compression?: number
-      /**
-       * @description Content moderation setting
-       * @example auto
-       * @enum {string}
-       */
-      moderation?: 'low' | 'auto'
-      /**
-       * @description Background transparency
-       * @example opaque
-       * @enum {string}
-       */
-      background?: 'transparent' | 'opaque'
-      /**
-       * @description Response format of image data
-       * @example b64_json
-       * @enum {string}
-       */
-      response_format?: 'url' | 'b64_json'
-      /**
-       * @description Style of the image (only for dall-e-3)
-       * @example vivid
-       * @enum {string}
-       */
-      style?: 'vivid' | 'natural'
-      /**
-       * @description A unique identifier for end-user monitoring
-       * @example user-1234
-       */
-      user?: string
-    }
-    OpenAIImageEditRequest: {
-      /**
-       * @description The model to use for image editing
-       * @example gpt-image-1
-       */
-      model: string
-      /**
-       * @description A text description of the desired edit
-       * @example Give the rocketship rainbow coloring
-       */
-      prompt: string
-      /**
-       * @description The number of images to generate
-       * @example 1
-       */
-      n?: number
-      /**
-       * @description The quality of the edited image
-       * @example low
-       */
-      quality?: string
-      /**
-       * @description Size of the output image
-       * @example 1024x1024
-       */
-      size?: string
-      /**
-       * @description Format of the output image
-       * @example png
-       * @enum {string}
-       */
-      output_format?: 'png' | 'webp' | 'jpeg'
-      /**
-       * @description Compression level for JPEG or WebP (0-100)
-       * @example 100
-       */
-      output_compression?: number
-      /**
-       * @description Content moderation setting
-       * @example auto
-       * @enum {string}
-       */
-      moderation?: 'low' | 'auto'
-      /**
-       * @description Background transparency
-       * @example opaque
-       */
-      background?: string
-      /**
-       * @description A unique identifier for end-user monitoring
-       * @example user-1234
-       */
-      user?: string
-    }
-    CustomerStorageResourceResponse: {
-      /** @description The signed URL to use for downloading the file from the specified path */
-      download_url?: string
-      /** @description The signed URL to use for uploading the file to the specified path */
-      upload_url?: string
-      /**
-       * Format: date-time
-       * @description When the signed URL will expire
-       */
-      expires_at?: string
-      /** @description Whether an existing file with the same hash was found */
-      existing_file?: boolean
-    }
-    /** @enum {string} */
-    Pikaffect:
-      | 'Cake-ify'
-      | 'Crumble'
-      | 'Crush'
-      | 'Decapitate'
-      | 'Deflate'
-      | 'Dissolve'
-      | 'Explode'
-      | 'Eye-pop'
-      | 'Inflate'
-      | 'Levitate'
-      | 'Melt'
-      | 'Peel'
-      | 'Poke'
-      | 'Squish'
-      | 'Ta-da'
-      | 'Tear'
-    /** Body_generate_pikaffects_generate_pikaffects_post */
-    PikaBody_generate_pikaffects_generate_pikaffects_post: {
-      /**
-       * Image
-       * Format: binary
-       */
-      image?: string
-      /** Pikaffect */
-      pikaffect?: components['schemas']['Pikaffect']
-      /** Prompttext */
-      promptText?: string
-      /** Negativeprompt */
-      negativePrompt?: string
-      /** Seed */
-      seed?: number
-    }
-    /** GenerateResponse */
-    PikaGenerateResponse: {
-      /** Video Id */
-      video_id: string
-    }
-    /** HTTPValidationError */
-    PikaHTTPValidationError: {
-      /** Detail */
-      detail?: components['schemas']['PikaValidationError'][]
-    }
-    /** Body_generate_pikadditions_generate_pikadditions_post */
-    PikaBody_generate_pikadditions_generate_pikadditions_post: {
-      /**
-       * Video
-       * Format: binary
-       */
-      video?: string
-      /**
-       * Image
-       * Format: binary
-       */
-      image?: string
-      /** Prompttext */
-      promptText?: string
-      /** Negativeprompt */
-      negativePrompt?: string
-      /** Seed */
-      seed?: number
-    }
-    /** Body_generate_pikaswaps_generate_pikaswaps_post */
-    PikaBody_generate_pikaswaps_generate_pikaswaps_post: {
-      /**
-       * Video
-       * Format: binary
-       */
-      video?: string
-      /** Image */
-      image?: string
-      /** Prompttext */
-      promptText?: string
-      /**
-       * Modifyregionmask
-       * @description A mask image that specifies the region to modify, where the mask is white and the background is black
-       */
-      modifyRegionMask?: string
-      /**
-       * Modifyregionroi
-       * @description Plaintext description of the object / region to modify
-       */
-      modifyRegionRoi?: string
-      /** Negativeprompt */
-      negativePrompt?: string
-      /** Seed */
-      seed?: number
-    }
-    /** Body_generate_2_2_t2v_generate_2_2_t2v_post */
-    PikaBody_generate_2_2_t2v_generate_2_2_t2v_post: {
-      /** Prompttext */
-      promptText: string
-      /** Negativeprompt */
-      negativePrompt?: string | null
-      /** Seed */
-      seed?: number | null
-      /** Resolution */
-      resolution?: components['schemas']['PikaResolutionEnum']
-      /** Duration */
-      duration?: components['schemas']['PikaDurationEnum']
-      /**
-       * Aspectratio
-       * Format: float
-       * @description Aspect ratio (width / height)
-       * @default 1.7777777777777777
-       */
-      aspectRatio: number
-    }
-    /** Body_generate_2_2_i2v_generate_2_2_i2v_post */
-    PikaBody_generate_2_2_i2v_generate_2_2_i2v_post: {
-      /**
-       * Image
-       * Format: binary
-       */
-      image?: string | null
-      /** Prompttext */
-      promptText?: string | null
-      /** Negativeprompt */
-      negativePrompt?: string | null
-      /** Seed */
-      seed?: number | null
-      /** Resolution */
-      resolution?: components['schemas']['PikaResolutionEnum']
-      /** Duration */
-      duration?: components['schemas']['PikaDurationEnum']
-    }
-    /** Body_generate_2_2_c2v_generate_2_2_pikascenes_post */
-    PikaBody_generate_2_2_c2v_generate_2_2_pikascenes_post: {
-      /** Images */
-      images?: string[]
-      /**
-       * Ingredientsmode
-       * @enum {string}
-       */
-      ingredientsMode: 'creative' | 'precise'
-      /** Prompttext */
-      promptText?: string
-      /** Negativeprompt */
-      negativePrompt?: string
-      /** Seed */
-      seed?: number
-      /**
-       * Resolution
-       * @default 1080p
-       */
-      resolution: string
-      /**
-       * Duration
-       * @default 5
-       */
-      duration: number
-      /**
-       * Aspectratio
-       * @description Aspect ratio (width / height)
-       */
-      aspectRatio?: number
-    }
-    /** Body_generate_2_2_keyframe_generate_2_2_pikaframes_post */
-    PikaBody_generate_2_2_keyframe_generate_2_2_pikaframes_post: {
-      /**
-       * Keyframes
-       * @description Array of keyframe images
-       */
-      keyFrames?: string[]
-      /** Prompttext */
-      promptText: string
-      /** Negativeprompt */
-      negativePrompt?: string
-      /** Seed */
-      seed?: number
-      /** Resolution */
-      resolution?: components['schemas']['PikaResolutionEnum']
-      /** Duration */
-      duration?: number
-    }
-    /** VideoResponse */
-    PikaVideoResponse: {
-      /** Id */
-      id: string
-      /**
-       * Status
-       * @description The status of the video
-       */
-      status: components['schemas']['PikaStatusEnum']
-      /**
-       * Url
-       * @default null
-       */
-      url: string | null
-      /**
-       * Progress
-       * @default null
-       */
-      progress: number | null
-    }
-    /** @enum {string} */
-    PikaStatusEnum: 'queued' | 'started' | 'finished'
-    /** ValidationError */
-    PikaValidationError: {
-      /** Location */
-      loc: (string | number)[]
-      /** Message */
-      msg: string
-      /** Error Type */
-      type: string
-    }
-    /**
-     * @default 1080p
-     * @enum {string}
-     */
-    PikaResolutionEnum: '1080p' | '720p'
-    /**
-     * @default 5
-     * @enum {integer}
-     */
-    PikaDurationEnum: 5 | 10
-    /**
-     * @description RGB color values
-     * @example {
-     *       "rgb": [
-     *         255,
-     *         0,
-     *         0
-     *       ]
-     *     }
-     */
-    RGBColor: {
-      rgb: number[]
-    }
-    /** @example {
-     *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
-     *       "name": "internal_error",
-     *       "errors": [
-     *         "An unexpected server error has occurred, please try again later."
-     *       ]
-     *     } */
-    StabilityError: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       *
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       {
-       *         "some-field": "is required"
-       *       }
-       *     ]
-       */
-      errors: string[]
-    }
-    /**
-     * @description The name of your application, used to help us communicate app-specific debugging or moderation issues to you.
-     * @example my-awesome-app
-     */
-    StabilityStabilityClientID: string
-    /**
-     * @description A unique identifier for your end user. Used to help us communicate user-specific debugging or moderation issues to you. Feel free to obfuscate this value to protect user privacy.
-     * @example DiscordUser#9999
-     */
-    StabilityStabilityClientUserID: string
-    /**
-     * @description The version of your application, used to help us communicate version-specific debugging or moderation issues to you.
-     * @example 1.2.1
-     */
-    StabilityStabilityClientVersion: string
-    /**
-     * @description Your request was flagged by our content moderation system.
-     * @example {
-     *       "id": "ed14db44362126aab3cbd25cca51ffe3",
-     *       "name": "content_moderation",
-     *       "errors": [
-     *         "Your request was flagged by our content moderation system, as a result your request was denied and you were not charged."
-     *       ]
-     *     }
-     */
-    StabilityContentModerationResponse: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Our content moderation system has flagged some part of your request and subsequently denied it.  You were not charged for this request.  While this may at times be frustrating, it is necessary to maintain the integrity of our platform and ensure a safe experience for all users. If you would like to provide feedback, please use the [Support Form](https://kb.stability.ai/knowledge-base/kb-tickets/new).
-       * @enum {string}
-       */
-      name: 'content_moderation'
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    ImagenGenerateImageRequest: {
-      instances: components['schemas']['ImagenImageGenerationInstance'][]
-      parameters: components['schemas']['ImagenImageGenerationParameters']
-    }
-    ImagenGenerateImageResponse: {
-      predictions?: components['schemas']['ImagenImagePrediction'][]
-    }
-    ImagenImageGenerationInstance: {
-      /** @description Text prompt for image generation */
-      prompt: string
-    }
-    ImagenImageGenerationParameters: {
-      sampleCount?: number
-      /** Format: uint32 */
-      seed?: number
-      addWatermark?: boolean
-      /** @enum {string} */
-      aspectRatio?: '1:1' | '9:16' | '16:9' | '3:4' | '4:3'
-      enhancePrompt?: boolean
-      includeRaiReason?: boolean
-      includeSafetyAttributes?: boolean
-      outputOptions?: components['schemas']['ImagenOutputOptions']
-      /** @enum {string} */
-      personGeneration?: 'dont_allow' | 'allow_adult' | 'allow_all'
-      /** @enum {string} */
-      safetySetting?: 'block_most' | 'block_some' | 'block_few' | 'block_fewest'
-      /** Format: uri */
-      storageUri?: string
-    }
-    ImagenImagePrediction: {
-      /** @description MIME type of the generated image */
-      mimeType?: string
-      /** @description Enhanced or rewritten prompt used to generate this image */
-      prompt?: string
-      /**
-       * Format: byte
-       * @description Base64-encoded image content
-       */
-      bytesBase64Encoded?: string
-    }
-    ImagenOutputOptions: {
-      /** @enum {string} */
-      mimeType?: 'image/png' | 'image/jpeg'
-      compressionQuality?: number
-    }
-    /**
-     * @description The rendering speed setting that controls the trade-off between generation speed and quality
-     * @default BALANCED
-     * @enum {string}
-     */
-    RenderingSpeed: 'BALANCED' | 'TURBO' | 'QUALITY'
-    /**
-     * @description Controls the likelihood of creating additional details not heavily conditioned by the init image.
-     * @default 0.35
-     */
-    StabilityCreativity: number
-    /**
-     * @description The `id` of a generation, typically used for async generations, that can be used to check the status of the generation or retrieve the result.
-     * @example a6dc6c6e20acda010fe14d71f180658f2896ed9b4ec25aa99a6ff06c796987c4
-     */
-    StabilityGenerationID: string
-    StabilityImageGenerationSD3_Request: {
-      /** @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines
-       *     elements, colors, and subjects will lead to better results. */
-      prompt: string
-      /**
-       * GenerationMode
-       * @description Controls whether this is a text-to-image or image-to-image generation, which affects which parameters are required:
-       *     - **text-to-image** requires only the `prompt` parameter
-       *     - **image-to-image** requires the `prompt`, `image`, and `strength` parameters
-       * @default text-to-image
-       * @enum {string}
-       */
-      mode: 'text-to-image' | 'image-to-image'
-      /**
-       * Format: binary
-       * @description The image to use as the starting point for the generation.
-       *
-       *     Supported formats:
-       *
-       *
-       *
-       *       - jpeg
-       *       - png
-       *       - webp
-       *
-       *     Supported dimensions:
-       *
-       *
-       *
-       *       - Every side must be at least 64 pixels
-       *
-       *     > **Important:** This parameter is only valid for **image-to-image** requests.
-       */
-      image?: string
-      /** @description Sometimes referred to as _denoising_, this parameter controls how much influence the
-       *     `image` parameter has on the generated image.  A value of 0 would yield an image that
-       *     is identical to the input.  A value of 1 would be as if you passed in no image at all.
-       *
-       *     > **Important:** This parameter is only valid for **image-to-image** requests. */
-      strength?: number
-      /**
-       * @description Controls the aspect ratio of the generated image. Defaults to 1:1.
-       *
-       *     > **Important:** This parameter is only valid for **text-to-image** requests.
-       * @default 1:1
-       * @enum {string}
-       */
-      aspect_ratio:
-        | '21:9'
-        | '16:9'
-        | '3:2'
-        | '5:4'
-        | '1:1'
-        | '4:5'
-        | '2:3'
-        | '9:16'
-        | '9:21'
-      /**
-       * @description The model to use for generation.
-       *
-       *     - `sd3.5-large` requires 6.5 credits per generation
-       *     - `sd3.5-large-turbo` requires 4 credits per generation
-       *     - `sd3.5-medium` requires 3.5 credits per generation
-       *     - As of the April 17, 2025, `sd3-large`, `sd3-large-turbo` and `sd3-medium`
-       *
-       *
-       *
-       *       are re-routed to their `sd3.5-[model version]` equivalent, at the same price.
-       * @default sd3.5-large
-       * @enum {string}
-       */
-      model: 'sd3.5-large' | 'sd3.5-large-turbo' | 'sd3.5-medium'
-      /**
-       * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
-       * @default 0
-       */
-      seed: number
-      /**
-       * @description Dictates the `content-type` of the generated image.
-       * @default png
-       * @enum {string}
-       */
-      output_format: 'png' | 'jpeg'
-      /**
-       * @description Guides the image model towards a particular style.
-       * @enum {string}
-       */
-      style_preset?:
-        | 'enhance'
-        | 'anime'
-        | 'photographic'
-        | 'digital-art'
-        | 'comic-book'
-        | 'fantasy-art'
-        | 'line-art'
-        | 'analog-film'
-        | 'neon-punk'
-        | 'isometric'
-        | 'low-poly'
-        | 'origami'
-        | 'modeling-compound'
-        | 'cinematic'
-        | '3d-model'
-        | 'pixel-art'
-        | 'tile-texture'
-      /** @description Keywords of what you **do not** wish to see in the output image.
-       *     This is an advanced feature. */
-      negative_prompt?: string
-      /** @description How strictly the diffusion process adheres to the prompt text (higher values keep your image closer to your prompt). The _Large_ and _Medium_ models use a default of `4`. The _Turbo_ model uses a default of `1`. */
-      cfg_scale?: number
-    }
-    StabilityImageGenrationSD3_Response_200: {
-      /**
-       * @description The generated image, encoded to base64.
-       * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-       */
-      image: string
-      /**
-       * @description The seed used as random noise for this generation.
-       * @default 0
-       * @example 343940597
-       */
-      seed: number
-      /**
-       * @description The reason the generation finished.
-       *
-       *     - `SUCCESS` = successful generation.
-       *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-       *     policy and has been blurred as a result.
-       * @example SUCCESS
-       * @enum {string}
-       */
-      finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-    }
-    StabilityImageGenrationSD3_Response_400: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
-     *       "name": "payload_too_large",
-     *       "errors": [
-     *         "body: payloads cannot be larger than 10MiB in size"
-     *       ]
-     *     } */
-    StabilityImageGenrationSD3_Response_413: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityImageGenrationSD3_Response_422: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "rate_limit_exceeded",
-     *       "name": "rate_limit_exceeded",
-     *       "errors": [
-     *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
-     *       ]
-     *     } */
-    StabilityImageGenrationSD3_Response_429: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
-     *       "name": "internal_error",
-     *       "errors": [
-     *         "An unexpected server error has occurred, please try again later."
-     *       ]
-     *     } */
-    StabilityImageGenrationSD3_Response_500: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityImageGenrationUpscaleConservative_Request: {
-      /**
-       * Format: binary
-       * @description The image you wish to upscale.
-       *
-       *     Supported Formats:
-       *     - jpeg
-       *     - png
-       *     - webp
-       *
-       *     Validation Rules:
-       *     - Every side must be at least 64 pixels
-       *     - Total pixel count must be between 4,096 and 9,437,184 pixels
-       *     - The aspect ratio must be between 1:2.5 and 2.5:1
-       * @example ./some/image.png
-       */
-      image: string
-      /** @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines
-       *     elements, colors, and subjects will lead to better results.
-       *
-       *     To control the weight of a given word use the format `(word:weight)`,
-       *     where `word` is the word you'd like to control the weight of and `weight`
-       *     is a value between 0 and 1. For example: `The sky was a crisp (blue:0.3) and (green:0.8)`
-       *     would convey a sky that was blue and green, but more green than blue. */
-      prompt: string
-      /** @description A blurb of text describing what you **do not** wish to see in the output image.
-       *     This is an advanced feature. */
-      negative_prompt?: string
-      /**
-       * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
-       * @default 0
-       */
-      seed: number
-      /**
-       * @description Dictates the `content-type` of the generated image.
-       * @default png
-       * @enum {string}
-       */
-      output_format: 'jpeg' | 'png' | 'webp'
-      creativity?: components['schemas']['StabilityCreativity']
-    }
-    StabilityImageGenrationUpscaleConservative_Response_200: {
-      /**
-       * @description The generated image, encoded to base64.
-       * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-       */
-      image: string
-      /**
-       * @description The seed used as random noise for this generation.
-       * @default 0
-       * @example 343940597
-       */
-      seed: number
-      /**
-       * @description The reason the generation finished.
-       *
-       *     - `SUCCESS` = successful generation.
-       *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-       *     policy and has been blurred as a result.
-       * @example SUCCESS
-       * @enum {string}
-       */
-      finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-    }
-    StabilityImageGenrationUpscaleConservative_Response_400: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
-     *       "name": "payload_too_large",
-     *       "errors": [
-     *         "body: payloads cannot be larger than 10MiB in size"
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleConservative_Response_413: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityImageGenrationUpscaleConservative_Response_422: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "rate_limit_exceeded",
-     *       "name": "rate_limit_exceeded",
-     *       "errors": [
-     *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleConservative_Response_429: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
-     *       "name": "internal_error",
-     *       "errors": [
-     *         "An unexpected server error has occurred, please try again later."
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleConservative_Response_500: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityImageGenrationUpscaleCreative_Request: {
-      /**
-       * Format: binary
-       * @description The image you wish to upscale.
-       *
-       *     Supported Formats:
-       *     - jpeg
-       *     - png
-       *     - webp
-       *
-       *     Validation Rules:
-       *     - Every side must be at least 64 pixels
-       *     - Total pixel count must be between 4,096 and 1,048,576 pixels
-       * @example ./some/image.png
-       */
-      image: string
-      /** @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines
-       *     elements, colors, and subjects will lead to better results.
-       *
-       *     To control the weight of a given word use the format `(word:weight)`,
-       *     where `word` is the word you'd like to control the weight of and `weight`
-       *     is a value between 0 and 1. For example: `The sky was a crisp (blue:0.3) and (green:0.8)`
-       *     would convey a sky that was blue and green, but more green than blue. */
-      prompt: string
-      /** @description A blurb of text describing what you **do not** wish to see in the output image.
-       *     This is an advanced feature. */
-      negative_prompt?: string
-      /**
-       * @description Dictates the `content-type` of the generated image.
-       * @default png
-       * @enum {string}
-       */
-      output_format: 'jpeg' | 'png' | 'webp'
-      /**
-       * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
-       * @default 0
-       */
-      seed: number
-      /**
-       * @description Indicates how creative the model should be when upscaling an image.
-       *     Higher values will result in more details being added to the image during upscaling.
-       * @default 0.3
-       */
-      creativity: number
-      /**
-       * @description Guides the image model towards a particular style.
-       * @enum {string}
-       */
-      style_preset?:
-        | 'enhance'
-        | 'anime'
-        | 'photographic'
-        | 'digital-art'
-        | 'comic-book'
-        | 'fantasy-art'
-        | 'line-art'
-        | 'analog-film'
-        | 'neon-punk'
-        | 'isometric'
-        | 'low-poly'
-        | 'origami'
-        | 'modeling-compound'
-        | 'cinematic'
-        | '3d-model'
-        | 'pixel-art'
-        | 'tile-texture'
-    }
-    StabilityImageGenrationUpscaleCreative_Response_200: {
-      id: components['schemas']['StabilityGenerationID']
-    }
-    StabilityImageGenrationUpscaleCreative_Response_400: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
-     *       "name": "payload_too_large",
-     *       "errors": [
-     *         "body: payloads cannot be larger than 10MiB in size"
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleCreative_Response_413: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityImageGenrationUpscaleCreative_Response_422: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "rate_limit_exceeded",
-     *       "name": "rate_limit_exceeded",
-     *       "errors": [
-     *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleCreative_Response_429: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
-     *       "name": "internal_error",
-     *       "errors": [
-     *         "An unexpected server error has occurred, please try again later."
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleCreative_Response_500: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityImageGenrationUpscaleFast_Request: {
-      /**
-       * Format: binary
-       * @description The image you wish to upscale.
-       *
-       *     Supported Formats:
-       *     - jpeg
-       *     - png
-       *     - webp
-       *
-       *     Validation Rules:
-       *     - Width must be between 32 and 1,536 pixels
-       *     - Height must be between 32 and 1,536 pixels
-       *     - Total pixel count must be between 1,024 and 1,048,576 pixels
-       * @example ./some/image.png
-       */
-      image: string
-      /**
-       * @description Dictates the `content-type` of the generated image.
-       * @default png
-       * @enum {string}
-       */
-      output_format: 'jpeg' | 'png' | 'webp'
-    }
-    StabilityImageGenrationUpscaleFast_Response_200: {
-      /**
-       * @description The generated image, encoded to base64.
-       * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-       */
-      image: string
-      /**
-       * @description The seed used as random noise for this generation.
-       * @default 0
-       * @example 343940597
-       */
-      seed: number
-      /**
-       * @description The reason the generation finished.
-       *
-       *     - `SUCCESS` = successful generation.
-       *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-       *     policy and has been blurred as a result.
-       * @example SUCCESS
-       * @enum {string}
-       */
-      finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-    }
-    StabilityImageGenrationUpscaleFast_Response_400: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
-     *       "name": "payload_too_large",
-     *       "errors": [
-     *         "body: payloads cannot be larger than 10MiB in size"
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleFast_Response_413: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityImageGenrationUpscaleFast_Response_422: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @example {
-     *       "id": "rate_limit_exceeded",
-     *       "name": "rate_limit_exceeded",
-     *       "errors": [
-     *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleFast_Response_429: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    StabilityGetResultResponse_202: {
-      /** @enum {string} */
-      status?: 'in-progress'
-      /**
-       * @description The ID of the generation result.
-       * @example 1234567890
-       */
-      id?: string
-    }
-    APIKey: {
-      id?: string
-      name?: string
-      description?: string
-      key_prefix?: string
-      /** Format: date-time */
-      created_at?: string
-    }
-    APIKeyWithPlaintext: components['schemas']['APIKey'] & {
-      /** @description The full API key (only returned at creation) */
-      plaintext_key?: string
-    }
-    GeminiGenerateContentRequest: {
-      contents: components['schemas']['GeminiContent'][]
-      tools?: components['schemas']['GeminiTool'][]
-      safetySettings?: components['schemas']['GeminiSafetySetting'][]
-      generationConfig?: components['schemas']['GeminiGenerationConfig']
-      systemInstruction?: components['schemas']['GeminiSystemInstructionContent']
-      videoMetadata?: components['schemas']['GeminiVideoMetadata']
-    }
-    GeminiGenerateContentResponse: {
-      candidates?: components['schemas']['GeminiCandidate'][]
-      promptFeedback?: components['schemas']['GeminiPromptFeedback']
-      usageMetadata?: components['schemas']['GeminiUsageMetadata']
-    }
-    GeminiUsageMetadata: {
-      /** @description Number of tokens in the request. When cachedContent is set, this is still the total effective prompt size meaning this includes the number of tokens in the cached content. */
-      promptTokenCount?: number
-      /** @description Number of tokens in the response(s). */
-      candidatesTokenCount?: number
-      /** @description Number of tokens present in tool-use prompt(s). */
-      toolUsePromptTokenCount?: number
-      /** @description Number of tokens present in thoughts output. */
-      thoughtsTokenCount?: number
-      /** @description Output only. Number of tokens in the cached part in the input (the cached content). */
-      cachedContentTokenCount?: number
-      /** @description Breakdown of prompt tokens by modality. */
-      promptTokensDetails?: components['schemas']['ModalityTokenCount'][]
-      /** @description Breakdown of candidate tokens by modality. */
-      candidatesTokensDetails?: components['schemas']['ModalityTokenCount'][]
-    }
-    ModalityTokenCount: {
-      modality?: components['schemas']['Modality']
-      /** @description Number of tokens for the given modality. */
-      tokenCount?: number
-    }
-    /**
-     * @description Type of input or output content modality.
-     * @enum {string}
-     */
-    Modality:
-      | 'MODALITY_UNSPECIFIED'
-      | 'TEXT'
-      | 'IMAGE'
-      | 'VIDEO'
-      | 'AUDIO'
-      | 'DOCUMENT'
-    /** @description Available for gemini-2.0-flash and gemini-2.0-flash-lite. Instructions for the model to steer it toward better performance. For example, "Answer as concisely as possible" or "Don't use technical terms in your response". The text strings count toward the token limit. The role field of systemInstruction is ignored and doesn't affect the performance of the model. Note: Only text should be used in parts and content in each part should be in a separate paragraph.
-     *      */
-    GeminiSystemInstructionContent: {
-      /**
-       * @description The identity of the entity that creates the message. The following values are supported: user: This indicates that the message is sent by a real person, typically a user-generated message. model: This indicates that the message is generated by the model. The model value is used to insert messages from the model into the conversation during multi-turn conversations. For non-multi-turn conversations, this field can be left blank or unset.
-       *
-       * @example user
-       * @enum {string}
-       */
-      role: 'user' | 'model'
-      /** @description A list of ordered parts that make up a single message. Different parts may have different IANA MIME types. For limits on the inputs, such as the maximum number of tokens or the number of images, see the model specifications on the Google models page.
-       *      */
-      parts: components['schemas']['GeminiTextPart'][]
-    }
-    /** @description The content of the current conversation with the model. For single-turn queries, this is a single instance. For multi-turn queries, this is a repeated field that contains conversation history and the latest request.
-     *      */
-    GeminiContent: {
-      /**
-       * @example user
-       * @enum {string}
-       */
-      role: 'user' | 'model'
-      parts: components['schemas']['GeminiPart'][]
-    }
-    /** @description A piece of code that enables the system to interact with external systems to perform an action, or set of actions, outside of knowledge and scope of the model. See Function calling.
-     *      */
-    GeminiTool: {
-      functionDeclarations?: components['schemas']['GeminiFunctionDeclaration'][]
-    }
-    /** @description Per request settings for blocking unsafe content. Enforced on GenerateContentResponse.candidates.
-     *      */
-    GeminiSafetySetting: {
-      category: components['schemas']['GeminiSafetyCategory']
-      threshold: components['schemas']['GeminiSafetyThreshold']
-    }
-    /** @enum {string} */
-    GeminiSafetyCategory:
-      | 'HARM_CATEGORY_SEXUALLY_EXPLICIT'
-      | 'HARM_CATEGORY_HATE_SPEECH'
-      | 'HARM_CATEGORY_HARASSMENT'
-      | 'HARM_CATEGORY_DANGEROUS_CONTENT'
-    /** @enum {string} */
-    GeminiSafetyThreshold:
-      | 'OFF'
-      | 'BLOCK_NONE'
-      | 'BLOCK_LOW_AND_ABOVE'
-      | 'BLOCK_MEDIUM_AND_ABOVE'
-      | 'BLOCK_ONLY_HIGH'
-    GeminiGenerationConfig: {
-      /**
-       * Format: float
-       * @description The temperature is used for sampling during response generation, which occurs when topP and topK are applied. Temperature controls the degree of randomness in token selection. Lower temperatures are good for prompts that require a less open-ended or creative response, while higher temperatures can lead to more diverse or creative results. A temperature of 0 means that the highest probability tokens are always selected. In this case, responses for a given prompt are mostly deterministic, but a small amount of variation is still possible. If the model returns a response that's too generic, too short, or the model gives a fallback response, try increasing the temperature
-       *
-       * @default 1
-       */
-      temperature: number
-      /**
-       * Format: float
-       * @description If specified, nucleus sampling is used.
-       *     Top-P changes how the model selects tokens for output. Tokens are selected from the most (see top-K) to least probable until the sum of their probabilities equals the top-P value. For example, if tokens A, B, and C have a probability of 0.3, 0.2, and 0.1 and the top-P value is 0.5, then the model will select either A or B as the next token by using temperature and excludes C as a candidate.
-       *     Specify a lower value for less random responses and a higher value for more random responses.
-       *
-       * @default 0.95
-       */
-      topP: number
-      /**
-       * @description Top-K changes how the model selects tokens for output. A top-K of 1 means the next selected token is the most probable among all tokens in the model's vocabulary. A top-K of 3 means that the next token is selected from among the 3 most probable tokens by using temperature.
-       *
-       * @default 40
-       * @example 40
-       */
-      topK: number
-      /**
-       * @description Maximum number of tokens that can be generated in the response. A token is approximately 4 characters. 100 tokens correspond to roughly 60-80 words.
-       *
-       * @example 2048
-       */
-      maxOutputTokens?: number
-      /**
-       * @description When seed is fixed to a specific value, the model makes a best effort to provide the same response for repeated requests. Deterministic output isn't guaranteed. Also, changing the model or parameter settings, such as the temperature, can cause variations in the response even when you use the same seed value. By default, a random seed value is used. Available for the following models:, gemini-2.5-flash-preview-04-1, gemini-2.5-pro-preview-05-0, gemini-2.0-flash-lite-00, gemini-2.0-flash-001
-       *
-       * @example 343940597
-       */
-      seed?: number
-      stopSequences?: string[]
-    }
-    /** @description For video input, the start and end offset of the video in Duration format. For example, to specify a 10 second clip starting at 1:00, set "startOffset": { "seconds": 60 } and "endOffset": { "seconds": 70 }. The metadata should only be specified while the video data is presented in inlineData or fileData.
-     *      */
-    GeminiVideoMetadata: {
-      startOffset?: components['schemas']['GeminiOffset']
-      endOffset?: components['schemas']['GeminiOffset']
-    }
-    /** @description Represents a duration offset for video timeline positions.
-     *      */
-    GeminiOffset: {
-      /**
-       * @description Signed seconds of the span of time. Must be from -315,576,000,000 to +315,576,000,000 inclusive.
-       *
-       * @example 60
-       */
-      seconds?: number
-      /**
-       * @description Signed fractions of a second at nanosecond resolution. Negative second values with fractions must still have non-negative nanos values.
-       *
-       * @example 0
-       */
-      nanos?: number
-    }
-    GeminiCandidate: {
-      content?: components['schemas']['GeminiContent']
-      finishReason?: string
-      safetyRatings?: components['schemas']['GeminiSafetyRating'][]
-      citationMetadata?: components['schemas']['GeminiCitationMetadata']
-    }
-    /**
-     * @description The media type of the file specified in the data or fileUri fields. Acceptable values include the following. For gemini-2.0-flash-lite and gemini-2.0-flash, the maximum length of an audio file is 8.4 hours and the maximum length of a video file (without audio) is one hour. For more information, see Gemini audio and video requirements. Text files must be UTF-8 encoded. The contents of the text file count toward the token limit. There is no limit on image resolution.
-     * @enum {string}
-     */
-    GeminiMimeType:
-      | 'application/pdf'
-      | 'audio/mpeg'
-      | 'audio/mp3'
-      | 'audio/wav'
-      | 'image/png'
-      | 'image/jpeg'
-      | 'image/webp'
-      | 'text/plain'
-      | 'video/mov'
-      | 'video/mpeg'
-      | 'video/mp4'
-      | 'video/mpg'
-      | 'video/avi'
-      | 'video/wmv'
-      | 'video/mpegps'
-      | 'video/flv'
-    GeminiPromptFeedback: {
-      safetyRatings?: components['schemas']['GeminiSafetyRating'][]
-      blockReason?: string
-      blockReasonMessage?: string
-    }
-    GeminiTextPart: {
-      /**
-       * @description A text prompt or code snippet.
-       * @example Answer as concisely as possible
-       */
-      text?: string
-    }
-    GeminiPart: {
-      /**
-       * @description A text prompt or code snippet.
-       * @example Write a story about a robot learning to paint
-       */
-      text?: string
-      inlineData?: components['schemas']['GeminiInlineData']
-    }
-    GeminiFunctionDeclaration: {
-      name: string
-      description?: string
-      /** @description JSON schema for the function parameters */
-      parameters: Record<string, never>
-    }
-    GeminiSafetyRating: {
-      category?: components['schemas']['GeminiSafetyCategory']
-      /**
-       * @description The probability that the content violates the specified safety category
-       * @enum {string}
-       */
-      probability?: 'NEGLIGIBLE' | 'LOW' | 'MEDIUM' | 'HIGH' | 'UNKNOWN'
-    }
-    GeminiCitationMetadata: {
-      citations?: components['schemas']['GeminiCitation'][]
-    }
-    /** @description Inline data in raw bytes. For gemini-2.0-flash-lite and gemini-2.0-flash, you can specify up to 3000 images by using inlineData.
-     *      */
-    GeminiInlineData: {
-      mimeType?: components['schemas']['GeminiMimeType']
-      /**
-       * Format: byte
-       * @description The base64 encoding of the image, PDF, or video to include inline in the prompt. When including media inline, you must also specify the media type (mimeType) of the data. Size limit: 20MB
-       *
-       */
-      data?: string
-    }
-    GeminiCitation: {
-      startIndex?: number
-      endIndex?: number
-      uri?: string
-      title?: string
-      license?: string
-      /** Format: date */
-      publicationDate?: string
-      authors?: string[]
-    }
-    Rodin3DGenerateRequest: {
-      /** @description The reference images to generate 3D Assets. */
-      images: string
-      /** @description Seed. */
-      seed?: number
-      tier?: components['schemas']['RodinTierType']
-      material?: components['schemas']['RodinMaterialType']
-      quality?: components['schemas']['RodinQualityType']
-      mesh_mode?: components['schemas']['RodinMeshModeType']
-    }
-    /**
-     * @description Rodin Tier para options
-     * @enum {string}
-     */
-    RodinTierType: 'Regular' | 'Sketch' | 'Detail' | 'Smooth'
-    /**
-     * @description Rodin Material para options
-     * @enum {string}
-     */
-    RodinMaterialType: 'PBR' | 'Shaded'
-    /**
-     * @description Rodin Quality para options
-     * @enum {string}
-     */
-    RodinQualityType: 'extra-low' | 'low' | 'medium' | 'high'
-    /**
-     * @description Rodin Mesh_Mode para options
-     * @enum {string}
-     */
-    RodinMeshModeType: 'Quad' | 'Raw'
-    Rodin3DCheckStatusRequest: {
-      /** @description subscription from generate endpoint */
-      subscription_key: string
-    }
-    Rodin3DDownloadRequest: {
-      /** @description Task UUID */
-      task_uuid: string
-    }
-    Rodin3DGenerateResponse: {
-      /** @description message */
-      message?: string
-      /** @description prompt */
-      prompt?: string
-      /** @description Time */
-      submit_time?: string
-      /** @description Task UUID */
-      uuid?: string
-      jobs?: components['schemas']['RodinGenerateJobsData']
-    }
-    RodinGenerateJobsData: {
-      /** @description subjobs uuid. */
-      uuids?: string[]
-      /** @description Subscription Key. */
-      subscription_key?: string
-    }
-    Rodin3DCheckStatusResponse: {
-      /** @description Details for the generation status. */
-      jobs?: components['schemas']['RodinCheckStatusJobItem'][]
-    }
-    RodinCheckStatusJobItem: {
-      /** @description sub uuid */
-      uuid?: string
-      status?: components['schemas']['RodinStatusOptions']
-    }
-    /** @enum {string} */
-    RodinStatusOptions: 'Done' | 'Failed' | 'Generating' | 'Waiting'
-    Rodin3DDownloadResponse: {
-      list?: components['schemas']['RodinResourceItem'][]
-    }
-    RodinResourceItem: {
-      /** @description Download url */
-      url?: string
-      /** @description File name */
-      name?: string
-    }
-    CreateAPIKeyRequest: {
-      name: string
-      description?: string
-    }
-    /** @example {
-     *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
-     *       "name": "internal_error",
-     *       "errors": [
-     *         "An unexpected server error has occurred, please try again later."
-     *       ]
-     *     } */
-    StabilityImageGenrationUpscaleFast_Response_500: {
-      /**
-       * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
-       *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
-       * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-       */
-      id: string
-      /**
-       * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-       * @example bad_request
-       */
-      name: string
-      /**
-       * @description One or more error messages indicating what went wrong.
-       * @example [
-       *       "some-field: is required"
-       *     ]
-       */
-      errors: string[]
-    }
-    /** @description Common properties for model responses */
-    ModelResponseProperties: {
-      /** @description The model used to generate the response */
-      model?: string
-      /** @description Instructions for the model on how to generate the response */
-      instructions?: string
-      /** @description Maximum number of tokens to generate */
-      max_output_tokens?: number
-      /**
-       * @description Controls randomness in the response
-       * @default 1
-       */
-      temperature: number
-      /**
-       * @description Controls diversity of the response via nucleus sampling
-       * @default 1
-       */
-      top_p: number
-      /**
-       * @description How to handle truncation of the response
-       * @default disabled
-       * @enum {string}
-       */
-      truncation: 'disabled' | 'auto'
-    }
-    /**
-     * Input file
-     * @description A file input to the model.
-     */
-    InputFileContent: {
-      /**
-       * @description The type of the input item. Always `input_file`.
-       * @default input_file
-       * @enum {string}
-       */
-      type: 'input_file'
-      /** @description The ID of the file to be sent to the model. */
-      file_id?: string
-      /** @description The name of the file to be sent to the model. */
-      filename?: string
-      /** @description The content of the file to be sent to the model.
-       *      */
-      file_data?: string
-    }
-    ResponseProperties: {
-      /** @description The unique ID of the previous response to the model. Use this to
-       *     create multi-turn conversations. Learn more about
-       *     [conversation state](/docs/guides/conversation-state).
-       *      */
-      previous_response_id?: string
-      /** @description Model ID used to generate the response, like `gpt-4o` or `o3`. OpenAI
-       *     offers a wide range of models with different capabilities, performance
-       *     characteristics, and price points. Refer to the [model guide](/docs/models)
-       *     to browse and compare available models.
-       *      */
-      model?: components['schemas']['OpenAIModels']
-      reasoning?: components['schemas']['Reasoning']
-      /** @description An upper bound for the number of tokens that can be generated for a response, including visible output tokens and [reasoning tokens](/docs/guides/reasoning).
-       *      */
-      max_output_tokens?: number
-      /** @description Inserts a system (or developer) message as the first item in the model's context.
-       *
-       *     When using along with `previous_response_id`, the instructions from a previous
-       *     response will not be carried over to the next response. This makes it simple
-       *     to swap out system (or developer) messages in new responses.
-       *      */
-      instructions?: string
-      text?: {
-        format?: components['schemas']['TextResponseFormatConfiguration']
-      }
-      tools?: components['schemas']['Tool'][]
-      /** @description How the model should select which tool (or tools) to use when generating
-       *     a response. See the `tools` parameter to see how to specify which tools
-       *     the model can call.
-       *      */
-      tool_choice?:
-        | components['schemas']['ToolChoiceOptions']
-        | components['schemas']['ToolChoiceTypes']
-        | components['schemas']['ToolChoiceFunction']
-      /**
-       * @description The truncation strategy to use for the model response.
-       *     - `auto`: If the context of this response and previous ones exceeds
-       *       the model's context window size, the model will truncate the
-       *       response to fit the context window by dropping input items in the
-       *       middle of the conversation.
-       *     - `disabled` (default): If a model response will exceed the context window
-       *       size for a model, the request will fail with a 400 error.
-       *
-       * @default disabled
-       * @enum {string}
-       */
-      truncation: 'auto' | 'disabled'
-    }
-    /** @description An object specifying the format that the model must output.
-     *
-     *     Configuring `{ "type": "json_schema" }` enables Structured Outputs,
-     *     which ensures the model will match your supplied JSON schema. Learn more in the
-     *     [Structured Outputs guide](/docs/guides/structured-outputs).
-     *
-     *     The default format is `{ "type": "text" }` with no additional options.
-     *
-     *     **Not recommended for gpt-4o and newer models:**
-     *
-     *     Setting to `{ "type": "json_object" }` enables the older JSON mode, which
-     *     ensures the message the model generates is valid JSON. Using `json_schema`
-     *     is preferred for models that support it.
-     *      */
-    TextResponseFormatConfiguration:
-      | components['schemas']['ResponseFormatText']
-      | components['schemas']['TextResponseFormatJsonSchema']
-      | components['schemas']['ResponseFormatJsonObject']
-    /**
-     * JSON object
-     * @description JSON object response format. An older method of generating JSON responses.
-     *     Using `json_schema` is recommended for models that support it. Note that the
-     *     model will not generate JSON without a system or user message instructing it
-     *     to do so.
-     *
-     */
-    ResponseFormatJsonObject: {
-      /**
-       * @description The type of response format being defined. Always `json_object`.
-       * @enum {string}
-       */
-      type: 'json_object'
-    }
-    /**
-     * JSON schema
-     * @description JSON Schema response format. Used to generate structured JSON responses.
-     *     Learn more about [Structured Outputs](/docs/guides/structured-outputs).
-     *
-     */
-    ResponseFormatJsonSchema: {
-      /** @default json_schema */
-      type: string
-      /**
-       * JSON schema
-       * @description Structured Outputs configuration options, including a JSON Schema.
-       *
-       */
-      json_schema: {
-        /** @description A description of what the response format is for, used by the model to
-         *     determine how to respond in the format.
-         *      */
-        description?: string
-        /** @description The name of the response format. Must be a-z, A-Z, 0-9, or contain
-         *     underscores and dashes, with a maximum length of 64.
-         *      */
-        name: string
-        schema?: components['schemas']['ResponseFormatJsonSchemaSchema']
+        NodeVersionStatus: "NodeVersionStatusActive" | "NodeVersionStatusDeleted" | "NodeVersionStatusBanned" | "NodeVersionStatusPending" | "NodeVersionStatusFlagged";
+        /** @enum {string} */
+        PublisherStatus: "PublisherStatusActive" | "PublisherStatusBanned";
+        /** @enum {string} */
+        WorkflowRunStatus: "WorkflowRunStatusStarted" | "WorkflowRunStatusFailed" | "WorkflowRunStatusCompleted";
+        MachineStats: {
+            /** @description Name of the machine. */
+            machine_name?: string;
+            /** @description The operating system version. eg. Ubuntu Linux 20.04 */
+            os_version?: string;
+            /** @description The GPU type. eg. NVIDIA Tesla K80 */
+            gpu_type?: string;
+            /** @description Total CPU on the machine. */
+            cpu_capacity?: string;
+            /** @description Initial CPU available before the job starts. */
+            initial_cpu?: string;
+            /** @description Total memory on the machine. */
+            memory_capacity?: string;
+            /** @description Initial RAM available before the job starts. */
+            initial_ram?: string;
+            /** @description Time series of VRAM usage. */
+            vram_time_series?: Record<string, never>;
+            /** @description Total disk capacity on the machine. */
+            disk_capacity?: string;
+            /** @description Initial disk available before the job starts. */
+            initial_disk?: string;
+            /** @description The pip freeze output */
+            pip_freeze?: string;
+        };
+        Customer: {
+            /** @description The firebase UID of the user */
+            id: string;
+            /** @description The email address for this user */
+            email?: string;
+            /** @description The name for this user */
+            name?: string;
+            /**
+             * Format: date-time
+             * @description The date and time the user was created
+             */
+            createdAt?: string;
+            /**
+             * Format: date-time
+             * @description The date and time the user was last updated
+             */
+            updatedAt?: string;
+            /** @description Whether the user is an admin */
+            is_admin?: boolean;
+            /** @description The Stripe customer ID */
+            stripe_id?: string;
+            /** @description The Metronome customer ID */
+            metronome_id?: string;
+            /** @description Whether the user has funds */
+            has_fund?: boolean;
+        };
+        CustomerAdmin: {
+            /** @description The firebase UID of the user */
+            id: string;
+            /** @description The email address for this user */
+            email?: string;
+            /** @description The name for this user */
+            name?: string;
+            /**
+             * Format: date-time
+             * @description The date and time the user was created
+             */
+            createdAt?: string;
+            /**
+             * Format: date-time
+             * @description The date and time the user was last updated
+             */
+            updatedAt?: string;
+            /** @description Whether the user is an admin */
+            is_admin?: boolean;
+            /** @description The Stripe customer ID */
+            stripe_id?: string;
+            /** @description The Metronome customer ID */
+            metronome_id?: string;
+            /** @description Whether the user has funds */
+            has_fund?: boolean;
+            /** @description Whether the customer has an active cloud subscription */
+            cloud_subscription_is_active?: boolean;
+            /** @description The active subscription ID if one exists */
+            cloud_subscription_subscription_id?: string | null;
+            /**
+             * Format: date-time
+             * @description The next renewal date for the subscription (ISO 8601 format)
+             */
+            cloud_subscription_renewal_date?: string | null;
+            /**
+             * Format: date-time
+             * @description The date when the subscription is set to end (ISO 8601 format)
+             */
+            cloud_subscription_end_date?: string | null;
+        };
+        AuditLog: {
+            /** @description the type of the event */
+            event_type?: string;
+            /** @description the id of the event */
+            event_id?: string;
+            /** @description data related to the event */
+            params?: {
+                [key: string]: unknown;
+            };
+            /**
+             * Format: date-time
+             * @description The date and time the event was created
+             */
+            createdAt?: string;
+        };
+        IdeogramV3Request: {
+            /** @description The text prompt for image generation */
+            prompt: string;
+            /** @description Seed value for reproducible generation */
+            seed?: number;
+            /**
+             * @description Image resolution in format WxH
+             * @example 1280x800
+             */
+            resolution?: string;
+            /**
+             * @description Aspect ratio in format WxH
+             * @example 1x3
+             */
+            aspect_ratio?: string;
+            rendering_speed: components["schemas"]["RenderingSpeed"];
+            /**
+             * @description Whether to enable magic prompt enhancement
+             * @enum {string}
+             */
+            magic_prompt?: "ON" | "OFF";
+            /** @description Text prompt specifying what to avoid in the generation */
+            negative_prompt?: string;
+            /** @description Number of images to generate */
+            num_images?: number;
+            color_palette?: {
+                /**
+                 * @description Name of the color palette
+                 * @example PASTEL
+                 */
+                name: string;
+            };
+            /** @description Array of style codes in hexadecimal format */
+            style_codes?: string[];
+            style_type?: components["schemas"]["IdeogramStyleType"];
+            /** @description Array of reference image URLs or identifiers */
+            style_reference_images?: string[];
+            /** @description Generations with character reference are subject to the character reference pricing. A set of images to use as character references (maximum total size 10MB across all character references), currently only supports 1 character reference image. The images should be in JPEG, PNG or WebP format. */
+            character_reference_images?: string[];
+            /** @description Optional masks for character reference images. When provided, must match the number of character_reference_images. Each mask should be a grayscale image of the same dimensions as the corresponding character reference image. The images should be in JPEG, PNG or WebP format. */
+            character_reference_images_mask?: string[];
+        };
+        IdeogramV3EditRequest: {
+            /**
+             * Format: binary
+             * @description The image being edited (max size 10MB); only JPEG, WebP and PNG formats are supported at this time.
+             */
+            image?: string;
+            /**
+             * Format: binary
+             * @description A black and white image of the same size as the image being edited (max size 10MB). Black regions in the mask should match up with the regions of the image that you would like to edit; only JPEG, WebP and PNG formats are supported at this time.
+             */
+            mask?: string;
+            /** @description The prompt used to describe the edited result. */
+            prompt: string;
+            /** @description Determine if MagicPrompt should be used in generating the request or not. */
+            magic_prompt?: string;
+            /** @description The number of images to generate. */
+            num_images?: number;
+            /** @description Random seed. Set for reproducible generation. */
+            seed?: number;
+            rendering_speed: components["schemas"]["RenderingSpeed"];
+            style_type?: components["schemas"]["IdeogramStyleType"];
+            /** @description A color palette for generation, must EITHER be specified via one of the presets (name) or explicitly via hexadecimal representations of the color with optional weights (members). Not supported by V_1, V_1_TURBO, V_2A and V_2A_TURBO models. */
+            color_palette?: components["schemas"]["IdeogramColorPalette"];
+            /** @description A list of 8 character hexadecimal codes representing the style of the image. Cannot be used in conjunction with style_reference_images or style_type. */
+            style_codes?: string[];
+            /** @description A set of images to use as style references (maximum total size 10MB across all style references). The images should be in JPEG, PNG or WebP format. */
+            style_reference_images?: string[];
+            /** @description Generations with character reference are subject to the character reference pricing. A set of images to use as character references (maximum total size 10MB across all character references), currently only supports 1 character reference image. The images should be in JPEG, PNG or WebP format. */
+            character_reference_images?: string[];
+            /** @description Optional masks for character reference images. When provided, must match the number of character_reference_images. Each mask should be a grayscale image of the same dimensions as the corresponding character reference image. The images should be in JPEG, PNG or WebP format. */
+            character_reference_images_mask?: string[];
+        };
+        /** @description A color palette specification that can either use a preset name or explicit color definitions with weights */
+        IdeogramColorPalette: {
+            /** @description Name of the preset color palette */
+            name: string;
+        } | {
+            /** @description Array of color definitions with optional weights */
+            members: {
+                /** @description Hexadecimal color code */
+                color?: string;
+                /** @description Optional weight for the color (0-1) */
+                weight?: number;
+            }[];
+        };
+        /** @description Parameters for the Ideogram generation proxy request. Based on Ideogram's API. */
+        IdeogramGenerateRequest: {
+            /** @description The image generation request parameters. */
+            image_request: {
+                /** @description Required. The prompt to use to generate the image. */
+                prompt: string;
+                /** @description Optional. The aspect ratio (e.g., 'ASPECT_16_9', 'ASPECT_1_1'). Cannot be used with resolution. Defaults to 'ASPECT_1_1' if unspecified. */
+                aspect_ratio?: string;
+                /** @description The model used (e.g., 'V_2', 'V_2A_TURBO') */
+                model: string;
+                /** @description Optional. MagicPrompt usage ('AUTO', 'ON', 'OFF'). */
+                magic_prompt_option?: string;
+                /**
+                 * Format: int64
+                 * @description Optional. A number between 0 and 2147483647.
+                 */
+                seed?: number;
+                /** @description Optional. Style type ('AUTO', 'GENERAL', 'REALISTIC', 'DESIGN', 'RENDER_3D', 'ANIME'). Only for models V_2 and above. */
+                style_type?: string;
+                /** @description Optional. Description of what to exclude. Only for V_1, V_1_TURBO, V_2, V_2_TURBO. */
+                negative_prompt?: string;
+                /**
+                 * @description Optional. Number of images to generate (1-8). Defaults to 1.
+                 * @default 1
+                 */
+                num_images: number;
+                /** @description Optional. Resolution (e.g., 'RESOLUTION_1024_1024'). Only for model V_2. Cannot be used with aspect_ratio. */
+                resolution?: string;
+                /** @description Optional. Color palette object. Only for V_2, V_2_TURBO. */
+                color_palette?: {
+                    [key: string]: unknown;
+                };
+            };
+        };
+        /** @description Response from the Ideogram image generation API. */
+        IdeogramGenerateResponse: {
+            /**
+             * Format: date-time
+             * @description Timestamp when the generation was created.
+             */
+            created?: string;
+            /** @description Array of generated image information. */
+            data?: {
+                /** @description The prompt used to generate this image. */
+                prompt?: string;
+                /** @description The resolution of the generated image (e.g., '1024x1024'). */
+                resolution?: string;
+                /** @description Indicates whether the image is considered safe. */
+                is_image_safe?: boolean;
+                /** @description The seed value used for this generation. */
+                seed?: number;
+                /** @description URL to the generated image. */
+                url?: string;
+                /** @description The style type used for generation (e.g., 'REALISTIC', 'ANIME'). */
+                style_type?: string;
+            }[];
+        };
+        IdeogramV3RemixRequest: {
+            /** Format: binary */
+            image?: string;
+            prompt: string;
+            /** @default 50 */
+            image_weight: number;
+            seed?: number;
+            resolution?: string;
+            aspect_ratio?: string;
+            rendering_speed?: components["schemas"]["RenderingSpeed"];
+            /** @enum {string} */
+            magic_prompt?: "AUTO" | "ON" | "OFF";
+            negative_prompt?: string;
+            num_images?: number;
+            color_palette?: Record<string, never>;
+            style_codes?: string[];
+            style_type?: components["schemas"]["IdeogramStyleType"];
+            style_reference_images?: string[];
+            /** @description Generations with character reference are subject to the character reference pricing. A set of images to use as character references (maximum total size 10MB across all character references), currently only supports 1 character reference image. The images should be in JPEG, PNG or WebP format. */
+            character_reference_images?: string[];
+            /** @description Optional masks for character reference images. When provided, must match the number of character_reference_images. Each mask should be a grayscale image of the same dimensions as the corresponding character reference image. The images should be in JPEG, PNG or WebP format. */
+            character_reference_images_mask?: string[];
+        };
+        IdeogramV3IdeogramResponse: {
+            /** Format: date-time */
+            created?: string;
+            data?: {
+                prompt?: string;
+                resolution?: string;
+                is_image_safe?: boolean;
+                seed?: number;
+                url?: string;
+                style_type?: string;
+            }[];
+        };
+        IdeogramV3ReframeRequest: {
+            /** Format: binary */
+            image?: string;
+            resolution: string;
+            num_images?: number;
+            seed?: number;
+            rendering_speed?: components["schemas"]["RenderingSpeed"];
+            color_palette?: Record<string, never>;
+            style_codes?: string[];
+            style_reference_images?: string[];
+        };
+        IdeogramV3ReplaceBackgroundRequest: {
+            /** Format: binary */
+            image?: string;
+            prompt: string;
+            /** @enum {string} */
+            magic_prompt?: "AUTO" | "ON" | "OFF";
+            num_images?: number;
+            seed?: number;
+            rendering_speed?: components["schemas"]["RenderingSpeed"];
+            color_palette?: Record<string, never>;
+            style_codes?: string[];
+            style_reference_images?: string[];
+        };
         /**
-         * @description Whether to enable strict schema adherence when generating the output.
-         *     If set to true, the model will always follow the exact schema defined
-         *     in the `schema` field. Only a subset of JSON Schema is supported when
-         *     `strict` is `true`. To learn more, read the [Structured Outputs
-         *     guide](/docs/guides/structured-outputs).
-         *
-         * @default false
+         * @description Task Status
+         * @enum {string}
          */
-        strict: boolean
-      }
-    }
-    /**
-     * JSON schema
-     * @description The schema for the response format, described as a JSON Schema object.
-     *     Learn how to build JSON schemas [here](https://json-schema.org/).
-     *
-     */
-    ResponseFormatJsonSchemaSchema: {
-      [key: string]: unknown
-    }
-    /**
-     * Text
-     * @description Default response format. Used to generate text responses.
-     *
-     */
-    ResponseFormatText: {
-      /**
-       * @description The type of response format being defined. Always `text`.
-       * @enum {string}
-       */
-      type: 'text'
-    }
-    /**
-     * JSON schema
-     * @description JSON Schema response format. Used to generate structured JSON responses.
-     *     Learn more about [Structured Outputs](/docs/guides/structured-outputs).
-     *
-     */
-    TextResponseFormatJsonSchema: {
-      /**
-       * @description The type of response format being defined. Always `json_schema`.
-       * @enum {string}
-       */
-      type: 'json_schema'
-      /** @description A description of what the response format is for, used by the model to
-       *     determine how to respond in the format.
-       *      */
-      description?: string
-      /** @description The name of the response format. Must be a-z, A-Z, 0-9, or contain
-       *     underscores and dashes, with a maximum length of 64.
-       *      */
-      name: string
-      schema: components['schemas']['ResponseFormatJsonSchemaSchema']
-      /**
-       * @description Whether to enable strict schema adherence when generating the output.
-       *     If set to true, the model will always follow the exact schema defined
-       *     in the `schema` field. Only a subset of JSON Schema is supported when
-       *     `strict` is `true`. To learn more, read the [Structured Outputs
-       *     guide](/docs/guides/structured-outputs).
-       *
-       * @default false
-       */
-      strict: boolean
-    }
-    /**
-     * Reasoning
-     * @description **o-series models only**
-     *
-     *     Configuration options for
-     *     [reasoning models](https://platform.openai.com/docs/guides/reasoning).
-     *
-     */
-    Reasoning: {
-      effort?: components['schemas']['ReasoningEffort']
-      /**
-       * @description A summary of the reasoning performed by the model. This can be
-       *     useful for debugging and understanding the model's reasoning process.
-       *     One of `auto`, `concise`, or `detailed`.
-       *
-       * @enum {string}
-       */
-      summary?: 'auto' | 'concise' | 'detailed'
-      /**
-       * @deprecated
-       * @description **Deprecated:** use `summary` instead.
-       *
-       *     A summary of the reasoning performed by the model. This can be
-       *     useful for debugging and understanding the model's reasoning process.
-       *     One of `auto`, `concise`, or `detailed`.
-       *
-       * @enum {string}
-       */
-      generate_summary?: 'auto' | 'concise' | 'detailed'
-    }
-    /**
-     * @description **o-series models only**
-     *
-     *     Constrains effort on reasoning for
-     *     [reasoning models](https://platform.openai.com/docs/guides/reasoning).
-     *     Currently supported values are `low`, `medium`, and `high`. Reducing
-     *     reasoning effort can result in faster responses and fewer tokens used
-     *     on reasoning in a response.
-     *
-     * @default medium
-     * @enum {string}
-     */
-    ReasoningEffort: 'low' | 'medium' | 'high'
-    /**
-     * Web search preview
-     * @description This tool searches the web for relevant results to use in a response. Learn more about the [web search tool](https://platform.openai.com/docs/guides/tools-web-search).
-     */
-    WebSearchPreviewTool: {
-      /**
-       * @description The type of the web search tool. One of `web_search_preview` or `web_search_preview_2025_03_11`. (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'WebSearchPreviewTool'
-      /**
-       * @description High level guidance for the amount of context window space to use for the search. One of `low`, `medium`, or `high`. `medium` is the default.
-       * @enum {string}
-       */
-      search_context_size?: 'low' | 'medium' | 'high'
-    }
-    /**
-     * Computer use preview
-     * @description A tool that controls a virtual computer. Learn more about the [computer tool](https://platform.openai.com/docs/guides/tools-computer-use).
-     */
-    ComputerUsePreviewTool: {
-      /**
-       * @description The type of the computer use tool. Always `computer_use_preview`. (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'ComputerUsePreviewTool'
-      /**
-       * @description The type of computer environment to control.
-       * @enum {string}
-       */
-      environment: 'windows' | 'mac' | 'linux' | 'ubuntu' | 'browser'
-      /** @description The width of the computer display. */
-      display_width: number
-      /** @description The height of the computer display. */
-      display_height: number
-    }
-    Tool:
-      | components['schemas']['FileSearchTool']
-      | components['schemas']['FunctionTool']
-      | components['schemas']['WebSearchPreviewTool']
-      | components['schemas']['ComputerUsePreviewTool']
-    /** @description Emitted when an error occurs. */
-    ResponseErrorEvent: {
-      /**
-       * @description The type of the event. Always `error`.
-       *
-       * @enum {string}
-       */
-      type: 'error'
-      /** @description The error code.
-       *      */
-      code: string
-      /** @description The error message.
-       *      */
-      message: string
-      /** @description The error parameter.
-       *      */
-      param: string
-    }
-    /** @description Emitted when a new output item is added. */
-    ResponseOutputItemAddedEvent: {
-      /**
-       * @description The type of the event. Always `response.output_item.added`.
-       *
-       * @enum {string}
-       */
-      type: 'response.output_item.added'
-      /** @description The index of the output item that was added.
-       *      */
-      output_index: number
-      /** @description The output item that was added.
-       *      */
-      item: components['schemas']['OutputItem']
-    }
-    /** @description Emitted when an output item is marked done. */
-    ResponseOutputItemDoneEvent: {
-      /**
-       * @description The type of the event. Always `response.output_item.done`.
-       *
-       * @enum {string}
-       */
-      type: 'response.output_item.done'
-      /** @description The index of the output item that was marked done.
-       *      */
-      output_index: number
-      /** @description The output item that was marked done.
-       *      */
-      item: components['schemas']['OutputItem']
-    }
-    /**
-     * Function tool
-     * @description Use this option to force the model to call a specific function.
-     *
-     */
-    ToolChoiceFunction: {
-      /**
-       * @description For function calling, the type is always `function`.
-       * @enum {string}
-       */
-      type: 'function'
-      /** @description The name of the function to call. */
-      name: string
-    }
-    /**
-     * Tool choice mode
-     * @description Controls which (if any) tool is called by the model.
-     *
-     *     `none` means the model will not call any tool and instead generates a message.
-     *
-     *     `auto` means the model can pick between generating a message or calling one or
-     *     more tools.
-     *
-     *     `required` means the model must call one or more tools.
-     *
-     * @enum {string}
-     */
-    ToolChoiceOptions: 'none' | 'auto' | 'required'
-    /**
-     * Hosted tool
-     * @description Indicates that the model should use a built-in tool to generate a response.
-     *     [Learn more about built-in tools](/docs/guides/tools).
-     *
-     */
-    ToolChoiceTypes: {
-      /**
-       * @description The type of hosted tool the model should to use. Learn more about
-       *     [built-in tools](/docs/guides/tools).
-       *
-       *     Allowed values are:
-       *     - `file_search`
-       *     - `web_search_preview`
-       *     - `computer_use_preview`
-       *
-       * @enum {string}
-       */
-      type:
-        | 'file_search'
-        | 'web_search_preview'
-        | 'computer_use_preview'
-        | 'web_search_preview_2025_03_11'
-    }
-    /** @description An event that is emitted when a response fails.
-     *      */
-    ResponseFailedEvent: {
-      /**
-       * @description The type of the event. Always `response.failed`.
-       *
-       * @enum {string}
-       */
-      type: 'response.failed'
-      /** @description The response that failed.
-       *      */
-      response: components['schemas']['OpenAIResponse']
-    }
-    /** @description Emitted when the response is in progress. */
-    ResponseInProgressEvent: {
-      /**
-       * @description The type of the event. Always `response.in_progress`.
-       *
-       * @enum {string}
-       */
-      type: 'response.in_progress'
-      /** @description The response that is in progress.
-       *      */
-      response: components['schemas']['OpenAIResponse']
-    }
-    /** @description An event that is emitted when a response finishes as incomplete.
-     *      */
-    ResponseIncompleteEvent: {
-      /**
-       * @description The type of the event. Always `response.incomplete`.
-       *
-       * @enum {string}
-       */
-      type: 'response.incomplete'
-      /** @description The response that was incomplete.
-       *      */
-      response: components['schemas']['OpenAIResponse']
-    }
-    /** @description An event that is emitted when a response is created. */
-    ResponseCreatedEvent: {
-      /**
-       * @description The type of the event. Always `response.created`.
-       * @enum {string}
-       */
-      type: 'response.created'
-      /** @description The response that was created. */
-      response: components['schemas']['OpenAIResponse']
-    }
-    /** @description Emitted when the model response is complete. */
-    ResponseCompletedEvent: {
-      /**
-       * @description The type of the event. Always `response.completed`.
-       * @enum {string}
-       */
-      type: 'response.completed'
-      /** @description Properties of the completed response. */
-      response: components['schemas']['OpenAIResponse']
-    }
-    /** @description Emitted when a new content part is added. */
-    ResponseContentPartAddedEvent: {
-      /**
-       * @description The type of the event. Always `response.content_part.added`.
-       * @enum {string}
-       */
-      type: 'response.content_part.added'
-      /** @description The ID of the output item that the content part was added to. */
-      item_id: string
-      /** @description The index of the output item that the content part was added to. */
-      output_index: number
-      /** @description The index of the content part that was added. */
-      content_index: number
-      /** @description The content part that was added. */
-      part: components['schemas']['OutputContent']
-    }
-    /** @description Emitted when a content part is done. */
-    ResponseContentPartDoneEvent: {
-      /**
-       * @description The type of the event. Always `response.content_part.done`.
-       * @enum {string}
-       */
-      type: 'response.content_part.done'
-      /** @description The ID of the output item that the content part was added to. */
-      item_id: string
-      /** @description The index of the output item that the content part was added to. */
-      output_index: number
-      /** @description The index of the content part that is done. */
-      content_index: number
-      /** @description The content part that is done. */
-      part: components['schemas']['OutputContent']
-    }
-    ResponseTool:
-      | components['schemas']['WebSearchTool']
-      | components['schemas']['FileSearchTool']
-      | components['schemas']['FunctionTool']
-    WebSearchTool: {
-      /**
-       * @description The type of tool
-       * @enum {string}
-       */
-      type: 'web_search'
-      /** @description Optional list of domains to restrict search to */
-      domains?: string[]
-    }
-    FileSearchTool: {
-      /**
-       * @description The type of tool (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'FileSearchTool'
-      /** @description IDs of vector stores to search in */
-      vector_store_ids: string[]
-    }
-    FunctionTool: {
-      /**
-       * @description The type of tool (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'FunctionTool'
-      /** @description Name of the function */
-      name: string
-      /** @description Description of what the function does */
-      description?: string
-      /** @description JSON Schema object describing the function parameters */
-      parameters: Record<string, never>
-    }
-    OutputItem:
-      | components['schemas']['OutputMessage']
-      | components['schemas']['FileSearchToolCall']
-      | components['schemas']['FunctionToolCall']
-      | components['schemas']['WebSearchToolCall']
-      | components['schemas']['ComputerToolCall']
-      | components['schemas']['ReasoningItem']
-    /**
-     * Web search tool call
-     * @description The results of a web search tool call. See the
-     *     [web search guide](/docs/guides/tools-web-search) for more information.
-     *
-     */
-    WebSearchToolCall: {
-      /** @description The unique ID of the web search tool call.
-       *      */
-      id: string
-      /**
-       * @description The type of the web search tool call. Always `web_search_call`.
-       *      (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'WebSearchToolCall'
-      /**
-       * @description The status of the web search tool call.
-       *
-       * @enum {string}
-       */
-      status: 'in_progress' | 'searching' | 'completed' | 'failed'
-    }
-    /**
-     * File search tool call
-     * @description The results of a file search tool call. See the
-     *     [file search guide](/docs/guides/tools-file-search) for more information.
-     *
-     */
-    FileSearchToolCall: {
-      /** @description The unique ID of the file search tool call.
-       *      */
-      id: string
-      /**
-       * @description The type of the file search tool call. Always `file_search_call`.
-       *      (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'FileSearchToolCall'
-      /**
-       * @description The status of the file search tool call. One of `in_progress`,
-       *     `searching`, `incomplete` or `failed`,
-       *
-       * @enum {string}
-       */
-      status:
-        | 'in_progress'
-        | 'searching'
-        | 'completed'
-        | 'incomplete'
-        | 'failed'
-      /** @description The queries used to search for files.
-       *      */
-      queries: string[]
-      /** @description The results of the file search tool call.
-       *      */
-      results?: {
-        /** @description The unique ID of the file.
-         *      */
-        file_id?: string
-        /** @description The text that was retrieved from the file.
-         *      */
-        text?: string
-        /** @description The name of the file.
-         *      */
-        filename?: string
+        KlingTaskStatus: "submitted" | "processing" | "succeed" | "failed";
+        /**
+         * @description Model Name
+         * @default kling-v1
+         * @enum {string}
+         */
+        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo";
+        /**
+         * @description Model Name
+         * @default kling-v2-master
+         * @enum {string}
+         */
+        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo";
+        /**
+         * @description Video generation mode. std: Standard Mode, which is cost-effective. pro: Professional Mode, generates videos with longer duration but higher quality output.
+         * @default std
+         * @enum {string}
+         */
+        KlingVideoGenMode: "std" | "pro";
+        /**
+         * @description Video aspect ratio
+         * @default 16:9
+         * @enum {string}
+         */
+        KlingVideoGenAspectRatio: "16:9" | "9:16" | "1:1";
+        /**
+         * @description Video length in seconds
+         * @default 5
+         * @enum {string}
+         */
+        KlingVideoGenDuration: "5" | "10";
         /**
          * Format: float
-         * @description The relevance score of the file - a value between 0 and 1.
-         *
+         * @description Flexibility in video generation. The higher the value, the lower the model's degree of flexibility, and the stronger the relevance to the user's prompt.
+         * @default 0.5
          */
-        score?: number
-      }[]
-    }
-    /**
-     * Function tool call
-     * @description A tool call to run a function. See the
-     *     [function calling guide](/docs/guides/function-calling) for more information.
-     *
-     */
-    FunctionToolCall: {
-      /** @description The unique ID of the function tool call.
-       *      */
-      id?: string
-      /**
-       * @description The type of the function tool call. Always `function_call`.
-       *
-       * @enum {string}
-       */
-      type: 'function_call'
-      /** @description The unique ID of the function tool call generated by the model.
-       *      */
-      call_id: string
-      /** @description The name of the function to run.
-       *      */
-      name: string
-      /** @description A JSON string of the arguments to pass to the function.
-       *      */
-      arguments: string
-      /**
-       * @description The status of the item. One of `in_progress`, `completed`, or
-       *     `incomplete`. Populated when items are returned via API.
-       *
-       * @enum {string}
-       */
-      status?: 'in_progress' | 'completed' | 'incomplete'
-    }
-    OutputMessage: {
-      /**
-       * @description The type of output item (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'OutputMessage'
-      /**
-       * @description The role of the message
-       * @enum {string}
-       */
-      role: 'assistant'
-      /** @description The content of the message */
-      content: components['schemas']['OutputContent'][]
-    }
-    OutputContent:
-      | components['schemas']['OutputTextContent']
-      | components['schemas']['OutputAudioContent']
-    OutputTextContent: {
-      /**
-       * @description The type of output content
-       * @enum {string}
-       */
-      type: 'output_text'
-      /** @description The text content */
-      text: string
-    }
-    OutputAudioContent: {
-      /**
-       * @description The type of output content
-       * @enum {string}
-       */
-      type: 'output_audio'
-      /** @description Base64-encoded audio data */
-      data: string
-      /** @description Transcript of the audio */
-      transcript: string
-    }
-    /** @description Represents token usage details including input tokens, output tokens,
-     *     a breakdown of output tokens, and the total tokens used.
-     *      */
-    ResponseUsage: {
-      /** @description The number of input tokens. */
-      input_tokens: number
-      /** @description A detailed breakdown of the input tokens. */
-      input_tokens_details: {
-        /** @description The number of tokens that were retrieved from the cache.
-         *     [More on prompt caching](/docs/guides/prompt-caching).
-         *      */
-        cached_tokens: number
-      }
-      /** @description The number of output tokens. */
-      output_tokens: number
-      /** @description A detailed breakdown of the output tokens. */
-      output_tokens_details: {
-        /** @description The number of reasoning tokens. */
-        reasoning_tokens: number
-      }
-      /** @description The total number of tokens used. */
-      total_tokens: number
-    }
-    /** @description A response from the model */
-    OpenAIResponse: components['schemas']['ModelResponseProperties'] &
-      components['schemas']['ResponseProperties'] & {
-        /** @description Unique identifier for this Response. */
-        id?: string
+        KlingVideoGenCfgScale: number;
+        KlingCameraControl: {
+            type?: components["schemas"]["KlingCameraControlType"];
+            config?: components["schemas"]["KlingCameraConfig"];
+        };
         /**
-         * @description The object type of this resource - always set to `response`.
+         * @description Predefined camera movements type. simple: Customizable camera movement. down_back: Camera descends and moves backward. forward_up: Camera moves forward and tilts up. right_turn_forward: Rotate right and move forward. left_turn_forward: Rotate left and move forward.
          * @enum {string}
          */
-        object?: 'response'
+        KlingCameraControlType: "simple" | "down_back" | "forward_up" | "right_turn_forward" | "left_turn_forward";
+        KlingCameraConfig: {
+            /** @description Controls camera's movement along horizontal axis (x-axis). Negative indicates left, positive indicates right. */
+            horizontal?: number;
+            /** @description Controls camera's movement along vertical axis (y-axis). Negative indicates downward, positive indicates upward. */
+            vertical?: number;
+            /** @description Controls camera's rotation in vertical plane (x-axis). Negative indicates downward rotation, positive indicates upward rotation. */
+            pan?: number;
+            /** @description Controls camera's rotation in horizontal plane (y-axis). Negative indicates left rotation, positive indicates right rotation. */
+            tilt?: number;
+            /** @description Controls camera's rolling amount (z-axis). Negative indicates counterclockwise, positive indicates clockwise. */
+            roll?: number;
+            /** @description Controls change in camera's focal length. Negative indicates narrower field of view, positive indicates wider field of view. */
+            zoom?: number;
+        };
+        KlingVideoResult: {
+            /** @description Generated video ID */
+            id?: string;
+            /**
+             * Format: uri
+             * @description URL for generated video
+             */
+            url?: string;
+            /** @description Total video duration */
+            duration?: string;
+        };
         /**
-         * @description The status of the response generation. One of `completed`, `failed`, `in_progress`, or `incomplete`.
+         * @description Method of Transmitting Audio Files for Lip-Sync. Required when mode is audio2video.
          * @enum {string}
          */
-        status?: 'completed' | 'failed' | 'in_progress' | 'incomplete'
-        /** @description Unix timestamp (in seconds) of when this Response was created. */
-        created_at?: number
-        error?: components['schemas']['ResponseError']
-        /** @description Details about why the response is incomplete.
-         *      */
-        incomplete_details?: {
-          /**
-           * @description The reason why the response is incomplete.
-           * @enum {string}
-           */
-          reason?: 'max_output_tokens' | 'content_filter'
-        } | null
-        /** @description An array of content items generated by the model.
-         *
-         *     - The length and order of items in the `output` array is dependent
-         *       on the model's response.
-         *     - Rather than accessing the first item in the `output` array and
-         *       assuming it's an `assistant` message with the content generated by
-         *       the model, you might consider using the `output_text` property where
-         *       supported in SDKs.
-         *      */
-        output?: components['schemas']['OutputItem'][]
-        /** @description SDK-only convenience property that contains the aggregated text output
-         *     from all `output_text` items in the `output` array, if any are present.
-         *     Supported in the Python and JavaScript SDKs.
-         *      */
-        output_text?: string | null
-        usage?: components['schemas']['ResponseUsage']
+        KlingAudioUploadType: "file" | "url";
         /**
-         * @description Whether to allow the model to run tool calls in parallel.
-         *
-         * @default true
-         */
-        parallel_tool_calls: boolean
-      }
-    /** @description An error object returned when the model fails to generate a Response. */
-    ResponseError: {
-      code: components['schemas']['ResponseErrorCode']
-      /** @description A human-readable description of the error. */
-      message: string
-    }
-    /**
-     * @description The error code for the response.
-     * @enum {string}
-     */
-    ResponseErrorCode:
-      | 'server_error'
-      | 'rate_limit_exceeded'
-      | 'invalid_prompt'
-      | 'vector_store_timeout'
-      | 'invalid_image'
-      | 'invalid_image_format'
-      | 'invalid_base64_image'
-      | 'invalid_image_url'
-      | 'image_too_large'
-      | 'image_too_small'
-      | 'image_parse_error'
-      | 'image_content_policy_violation'
-      | 'invalid_image_mode'
-      | 'image_file_too_large'
-      | 'unsupported_image_media_type'
-      | 'empty_image_file'
-      | 'failed_to_download_image'
-      | 'image_file_not_found'
-    /** @description Events that can be emitted during response streaming */
-    OpenAIResponseStreamEvent:
-      | components['schemas']['ResponseCreatedEvent']
-      | components['schemas']['ResponseInProgressEvent']
-      | components['schemas']['ResponseCompletedEvent']
-      | components['schemas']['ResponseFailedEvent']
-      | components['schemas']['ResponseIncompleteEvent']
-      | components['schemas']['ResponseOutputItemAddedEvent']
-      | components['schemas']['ResponseOutputItemDoneEvent']
-      | components['schemas']['ResponseContentPartAddedEvent']
-      | components['schemas']['ResponseContentPartDoneEvent']
-      | components['schemas']['ResponseErrorEvent']
-    InputMessage: {
-      /** @enum {string} */
-      type?: 'message'
-      /** @enum {string} */
-      role?: 'user' | 'system' | 'developer'
-      /** @enum {string} */
-      status?: 'in_progress' | 'completed' | 'incomplete'
-      content?: components['schemas']['InputMessageContentList']
-    }
-    /**
-     * Input item content list
-     * @description A list of one or many input items to the model, containing different content
-     *     types.
-     *
-     */
-    InputMessageContentList: components['schemas']['InputContent'][]
-    InputContent:
-      | components['schemas']['InputTextContent']
-      | components['schemas']['InputImageContent']
-      | components['schemas']['InputFileContent']
-    /**
-     * Input text
-     * @description A text input to the model.
-     */
-    InputTextContent: {
-      /**
-       * @description The type of the input item. Always `input_text`.
-       * @default input_text
-       * @enum {string}
-       */
-      type: 'input_text'
-      /** @description The text input to the model. */
-      text: string
-    }
-    /**
-     * Input image
-     * @description An image input to the model. Learn about [image inputs](/docs/guides/vision).
-     */
-    InputImageContent: {
-      /**
-       * @description The type of the input item. Always `input_image`.
-       * @default input_image
-       * @enum {string}
-       */
-      type: 'input_image'
-      /** @description The URL of the image to be sent to the model. A fully qualified URL or base64 encoded image in a data URL. */
-      image_url?: string
-      /** @description The ID of the file to be sent to the model. */
-      file_id?: string
-      /**
-       * @description The detail level of the image to be sent to the model. One of `high`, `low`, or `auto`. Defaults to `auto`.
-       * @enum {string}
-       */
-      detail: 'low' | 'high' | 'auto'
-    }
-    InputMessageResource: components['schemas']['InputMessage'] & {
-      /** @description The unique ID of the message input.
-       *      */
-      id: string
-    } & {
-      /**
-       * @description discriminator enum property added by openapi-typescript
-       * @enum {string}
-       */
-      type: 'InputMessageResource'
-    }
-    /** @description Content item used to generate a response.
-     *      */
-    ItemResource:
-      | components['schemas']['InputMessageResource']
-      | components['schemas']['OutputMessage']
-      | components['schemas']['FileSearchToolCall']
-      | components['schemas']['ComputerToolCall']
-      | components['schemas']['WebSearchToolCall']
-      | components['schemas']['FunctionToolCallResource']
-    FunctionToolCallResource: components['schemas']['FunctionToolCall'] & {
-      /** @description The unique ID of the function tool call.
-       *      */
-      id: string
-    } & {
-      /**
-       * @description discriminator enum property added by openapi-typescript
-       * @enum {string}
-       */
-      type: 'FunctionToolCallResource'
-    }
-    /**
-     * Computer tool call
-     * @description A tool call to a computer use tool. See the
-     *     [computer use guide](/docs/guides/tools-computer-use) for more information.
-     *
-     */
-    ComputerToolCall: {
-      /**
-       * @description The type of the computer call. Always `computer_call`. (enum property replaced by openapi-typescript)
-       * @enum {string}
-       */
-      type: 'ComputerToolCall'
-      /** @description The unique ID of the computer call. */
-      id: string
-      /** @description An identifier used when responding to the tool call with output.
-       *      */
-      call_id: string
-      action: Record<string, never>
-      /**
-       * @description The status of the item. One of `in_progress`, `completed`, or
-       *     `incomplete`. Populated when items are returned via API.
-       *
-       * @enum {string}
-       */
-      status: 'in_progress' | 'completed' | 'incomplete'
-    }
-    /** @description A list of Response items. */
-    ResponseItemList: {
-      /**
-       * @description The type of object returned, must be `list`.
-       * @enum {string}
-       */
-      object: 'list'
-      /** @description A list of items used to generate this response. */
-      data: components['schemas']['ItemResource'][]
-      /** @description Whether there are more items available. */
-      has_more: boolean
-      /** @description The ID of the first item in the list. */
-      first_id: string
-      /** @description The ID of the last item in the list. */
-      last_id: string
-    }
-    /**
-     * @description Specify additional output data to include in the model response. Currently
-     *     supported values are:
-     *     - `file_search_call.results`: Include the search results of
-     *       the file search tool call.
-     *     - `message.input_image.image_url`: Include image urls from the input message.
-     *     - `computer_call_output.output.image_url`: Include image urls from the computer call output.
-     *
-     * @enum {string}
-     */
-    Includable:
-      | 'file_search_call.results'
-      | 'message.input_image.image_url'
-      | 'computer_call_output.output.image_url'
-    CreateModelResponseProperties: components['schemas']['ModelResponseProperties']
-    InputItem:
-      | components['schemas']['EasyInputMessage']
-      | components['schemas']['Item']
-    /** @description Content item used to generate a response.
-     *      */
-    Item:
-      | components['schemas']['InputMessage']
-      | components['schemas']['OutputMessage']
-      | components['schemas']['FileSearchToolCall']
-      | components['schemas']['ComputerToolCall']
-      | components['schemas']['WebSearchToolCall']
-      | components['schemas']['FunctionToolCall']
-      | components['schemas']['ReasoningItem']
-    /**
-     * Reasoning
-     * @description A description of the chain of thought used by a reasoning model while generating
-     *     a response.
-     *
-     */
-    ReasoningItem: {
-      /**
-       * @description The type of the object. Always `reasoning`.
-       *
-       * @enum {string}
-       */
-      type: 'reasoning'
-      /** @description The unique identifier of the reasoning content.
-       *      */
-      id: string
-      /** @description Reasoning text contents.
-       *      */
-      summary: {
-        /**
-         * @description The type of the object. Always `summary_text`.
-         *
+         * @description Video Generation Mode. text2video: Text-to-video generation mode; audio2video: Audio-to-video generation mode
          * @enum {string}
          */
-        type: 'summary_text'
-        /** @description A short summary of the reasoning used by the model when generating
-         *     the response.
-         *      */
-        text: string
-      }[]
-      /**
-       * @description The status of the item. One of `in_progress`, `completed`, or
-       *     `incomplete`. Populated when items are returned via API.
-       *
-       * @enum {string}
-       */
-      status?: 'in_progress' | 'completed' | 'incomplete'
-    }
-    /**
-     * Input message
-     * @description A message input to the model with a role indicating instruction following
-     *     hierarchy. Instructions given with the `developer` or `system` role take
-     *     precedence over instructions given with the `user` role. Messages with the
-     *     `assistant` role are presumed to have been generated by the model in previous
-     *     interactions.
-     *
-     */
-    EasyInputMessage: {
-      /**
-       * @description The role of the message input. One of `user`, `assistant`, `system`, or
-       *     `developer`.
-       *
-       * @enum {string}
-       */
-      role: 'user' | 'assistant' | 'system' | 'developer'
-      /** @description Text, image, or audio input to the model, used to generate a response.
-       *     Can also contain previous assistant responses.
-       *      */
-      content: string | components['schemas']['InputMessageContentList']
-      /**
-       * @description The type of the message input. Always `message`.
-       *
-       * @enum {string}
-       */
-      type?: 'message'
-    }
-    OpenAICreateResponse: components['schemas']['CreateModelResponseProperties'] &
-      components['schemas']['ResponseProperties'] & {
-        /** @description Text, image, or file inputs to the model, used to generate a response.
+        KlingLipSyncMode: "text2video" | "audio2video";
+        /**
+         * @description The voice language corresponds to the Voice ID.
+         * @default en
+         * @enum {string}
+         */
+        KlingLipSyncVoiceLanguage: "zh" | "en";
+        /**
+         * @description Scene Name. Dual-character Effects (hug, kiss, heart_gesture).
+         * @enum {string}
+         */
+        KlingDualCharacterEffectsScene: "hug" | "kiss" | "heart_gesture";
+        /**
+         * @description Scene Name. Single Image Effects (bloombloom, dizzydizzy, fuzzyfuzzy, squish, expansion).
+         * @enum {string}
+         */
+        KlingSingleImageEffectsScene: "bloombloom" | "dizzydizzy" | "fuzzyfuzzy" | "squish" | "expansion";
+        /**
+         * @description Model Name. Can be kling-v1, kling-v1-5, or kling-v1-6.
+         * @default kling-v1
+         * @enum {string}
+         */
+        KlingCharacterEffectModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6";
+        /**
+         * @description Model Name. Only kling-v1-6 is supported for single image effects.
+         * @enum {string}
+         */
+        KlingSingleImageEffectModelName: "kling-v1-6";
+        /**
+         * @description Video Length in seconds. Only 5-second videos are supported.
+         * @enum {string}
+         */
+        KlingSingleImageEffectDuration: "5";
+        KlingDualCharacterImages: string[];
+        /**
+         * @description Aspect ratio of the generated images
+         * @default 16:9
+         * @enum {string}
+         */
+        KlingImageGenAspectRatio: "16:9" | "9:16" | "1:1" | "4:3" | "3:4" | "3:2" | "2:3" | "21:9";
+        /**
+         * @description Image reference type
+         * @enum {string}
+         */
+        KlingImageGenImageReferenceType: "subject" | "face";
+        /**
+         * @description Model Name
+         * @default kling-v1
+         * @enum {string}
+         */
+        KlingImageGenModelName: "kling-v1" | "kling-v1-5" | "kling-v2";
+        KlingImageResult: {
+            /** @description Image Number (0-9) */
+            index?: number;
+            /**
+             * Format: uri
+             * @description URL for generated image
+             */
+            url?: string;
+        };
+        /**
+         * @description Model Name
+         * @default kolors-virtual-try-on-v1
+         * @enum {string}
+         */
+        KlingVirtualTryOnModelName: "kolors-virtual-try-on-v1" | "kolors-virtual-try-on-v1-5";
+        KlingText2VideoRequest: {
+            model_name?: components["schemas"]["KlingTextToVideoModelName"];
+            /** @description Positive text prompt */
+            prompt?: string;
+            /** @description Negative text prompt */
+            negative_prompt?: string;
+            cfg_scale?: components["schemas"]["KlingVideoGenCfgScale"];
+            mode?: components["schemas"]["KlingVideoGenMode"];
+            camera_control?: components["schemas"]["KlingCameraControl"];
+            aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
+            duration?: components["schemas"]["KlingVideoGenDuration"];
+            /**
+             * Format: uri
+             * @description The callback notification address
+             */
+            callback_url?: string;
+            /** @description Customized Task ID */
+            external_task_id?: string;
+        };
+        KlingText2VideoResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                task_info?: {
+                    external_task_id?: string;
+                };
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    videos?: components["schemas"]["KlingVideoResult"][];
+                };
+            };
+        };
+        KlingImage2VideoRequest: {
+            model_name?: components["schemas"]["KlingVideoGenModelName"];
+            /** @description Reference Image - URL or Base64 encoded string, cannot exceed 10MB, resolution not less than 300*300px, aspect ratio between 1:2.5 ~ 2.5:1. Base64 should not include data:image prefix. */
+            image?: string;
+            /** @description Reference Image - End frame control. URL or Base64 encoded string, cannot exceed 10MB, resolution not less than 300*300px. Base64 should not include data:image prefix. */
+            image_tail?: string;
+            /** @description Positive text prompt */
+            prompt?: string;
+            /** @description Negative text prompt */
+            negative_prompt?: string;
+            cfg_scale?: components["schemas"]["KlingVideoGenCfgScale"];
+            mode?: components["schemas"]["KlingVideoGenMode"];
+            /** @description Static Brush Application Area (Mask image created by users using the motion brush). The aspect ratio must match the input image. */
+            static_mask?: string;
+            /** @description Dynamic Brush Configuration List (up to 6 groups). For 5-second videos, trajectory length must not exceed 77 coordinates. */
+            dynamic_masks?: {
+                /**
+                 * Format: uri
+                 * @description Dynamic Brush Application Area (Mask image created by users using the motion brush). The aspect ratio must match the input image.
+                 */
+                mask?: string;
+                trajectories?: {
+                    /** @description The horizontal coordinate of trajectory point. Based on bottom-left corner of image as origin (0,0). */
+                    x?: number;
+                    /** @description The vertical coordinate of trajectory point. Based on bottom-left corner of image as origin (0,0). */
+                    y?: number;
+                }[];
+            }[];
+            camera_control?: components["schemas"]["KlingCameraControl"];
+            aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
+            duration?: components["schemas"]["KlingVideoGenDuration"];
+            /**
+             * Format: uri
+             * @description The callback notification address. Server will notify when the task status changes.
+             */
+            callback_url?: string;
+            /** @description Customized Task ID. Must be unique within a single user account. */
+            external_task_id?: string;
+        };
+        KlingImage2VideoResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                task_info?: {
+                    external_task_id?: string;
+                };
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    videos?: components["schemas"]["KlingVideoResult"][];
+                };
+            };
+        };
+        KlingVideoExtendRequest: {
+            /** @description The ID of the video to be extended. Supports videos generated by text-to-video, image-to-video, and previous video extension operations. Cannot exceed 3 minutes total duration after extension. */
+            video_id?: string;
+            /** @description Positive text prompt for guiding the video extension */
+            prompt?: string;
+            /** @description Negative text prompt for elements to avoid in the extended video */
+            negative_prompt?: string;
+            cfg_scale?: components["schemas"]["KlingVideoGenCfgScale"];
+            /**
+             * Format: uri
+             * @description The callback notification address. Server will notify when the task status changes.
+             */
+            callback_url?: string;
+        };
+        KlingVideoExtendResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                task_info?: {
+                    external_task_id?: string;
+                };
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    videos?: components["schemas"]["KlingVideoResult"][];
+                };
+            };
+        };
+        KlingLipSyncInputObject: {
+            /** @description The ID of the video generated by Kling AI. Only supports 5-second and 10-second videos generated within the last 30 days. */
+            video_id?: string;
+            /** @description Get link for uploaded video. Video files support .mp4/.mov, file size does not exceed 100MB, video length between 2-10s. */
+            video_url?: string;
+            mode: components["schemas"]["KlingLipSyncMode"];
+            /** @description Text Content for Lip-Sync Video Generation. Required when mode is text2video. Maximum length is 120 characters. */
+            text?: string;
+            /** @description Voice ID. Required when mode is text2video. The system offers a variety of voice options to choose from. */
+            voice_id?: string;
+            voice_language?: components["schemas"]["KlingLipSyncVoiceLanguage"];
+            /**
+             * @description Speech Rate. Valid range: 0.8~2.0, accurate to one decimal place.
+             * @default 1
+             */
+            voice_speed: number;
+            audio_type?: components["schemas"]["KlingAudioUploadType"];
+            /** @description Local Path of Audio File. Supported formats: .mp3/.wav/.m4a/.aac, maximum file size of 5MB. Base64 code. */
+            audio_file?: string;
+            /** @description Audio File Download URL. Supported formats: .mp3/.wav/.m4a/.aac, maximum file size of 5MB. */
+            audio_url?: string;
+        };
+        KlingLipSyncRequest: {
+            input: components["schemas"]["KlingLipSyncInputObject"];
+            /**
+             * Format: uri
+             * @description The callback notification address. Server will notify when the task status changes.
+             */
+            callback_url?: string;
+        };
+        KlingLipSyncResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                task_info?: {
+                    external_task_id?: string;
+                };
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    videos?: components["schemas"]["KlingVideoResult"][];
+                };
+            };
+        };
+        KlingVideoEffectsRequest: {
+            effect_scene: components["schemas"]["KlingDualCharacterEffectsScene"] | components["schemas"]["KlingSingleImageEffectsScene"];
+            input: components["schemas"]["KlingVideoEffectsInput"];
+            /**
+             * Format: uri
+             * @description The callback notification address for the result of this task.
+             */
+            callback_url?: string;
+            /** @description Customized Task ID. Must be unique within a single user account. */
+            external_task_id?: string;
+        };
+        KlingVideoEffectsInput: components["schemas"]["KlingSingleImageEffectInput"] | components["schemas"]["KlingDualCharacterEffectInput"];
+        KlingSingleImageEffectInput: {
+            model_name: components["schemas"]["KlingSingleImageEffectModelName"];
+            /** @description Reference Image. URL or Base64 encoded string (without data:image prefix). File size cannot exceed 10MB, resolution not less than 300*300px, aspect ratio between 1:2.5 ~ 2.5:1. */
+            image: string;
+            duration: components["schemas"]["KlingSingleImageEffectDuration"];
+        };
+        KlingDualCharacterEffectInput: {
+            model_name?: components["schemas"]["KlingCharacterEffectModelName"];
+            mode?: components["schemas"]["KlingVideoGenMode"];
+            images: components["schemas"]["KlingDualCharacterImages"];
+            duration: components["schemas"]["KlingVideoGenDuration"];
+        };
+        KlingVideoEffectsResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                task_info?: {
+                    external_task_id?: string;
+                };
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    videos?: components["schemas"]["KlingVideoResult"][];
+                };
+            };
+        };
+        KlingImageGenerationsRequest: {
+            model_name?: components["schemas"]["KlingImageGenModelName"];
+            /** @description Positive text prompt */
+            prompt: string;
+            /** @description Negative text prompt */
+            negative_prompt?: string;
+            /** @description Reference Image - Base64 encoded string or image URL */
+            image?: string;
+            image_reference?: components["schemas"]["KlingImageGenImageReferenceType"];
+            /**
+             * @description Reference intensity for user-uploaded images
+             * @default 0.5
+             */
+            image_fidelity: number;
+            /**
+             * @description Subject reference similarity
+             * @default 0.45
+             */
+            human_fidelity: number;
+            /**
+             * @description Number of generated images
+             * @default 1
+             */
+            n: number;
+            aspect_ratio?: components["schemas"]["KlingImageGenAspectRatio"];
+            /**
+             * Format: uri
+             * @description The callback notification address
+             */
+            callback_url?: string;
+        };
+        KlingImageGenerationsResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                /** @description Task status information */
+                task_status_msg?: string;
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    images?: components["schemas"]["KlingImageResult"][];
+                };
+            };
+        };
+        KlingVirtualTryOnRequest: {
+            model_name?: components["schemas"]["KlingVirtualTryOnModelName"];
+            /** @description Reference human image - Base64 encoded string or image URL */
+            human_image: string;
+            /** @description Reference clothing image - Base64 encoded string or image URL */
+            cloth_image?: string;
+            /**
+             * Format: uri
+             * @description The callback notification address
+             */
+            callback_url?: string;
+        };
+        KlingVirtualTryOnResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                /** @description Task status information */
+                task_status_msg?: string;
+                /** @description Task creation time */
+                created_at?: number;
+                /** @description Task update time */
+                updated_at?: number;
+                task_result?: {
+                    images?: components["schemas"]["KlingImageResult"][];
+                };
+            };
+        };
+        KlingResourcePackageResponse: {
+            /** @description Error code; 0 indicates success */
+            code?: number;
+            /** @description Error information */
+            message?: string;
+            /** @description Request ID, generated by the system, used to track requests and troubleshoot problems */
+            request_id?: string;
+            data?: {
+                /** @description Error code; 0 indicates success */
+                code?: number;
+                /** @description Error information */
+                msg?: string;
+                /** @description Resource package list */
+                resource_pack_subscribe_infos?: {
+                    /** @description Resource package name */
+                    resource_pack_name?: string;
+                    /** @description Resource package ID */
+                    resource_pack_id?: string;
+                    /**
+                     * @description Resource package type (decreasing_total=decreasing total, constant_period=constant periodicity)
+                     * @enum {string}
+                     */
+                    resource_pack_type?: "decreasing_total" | "constant_period";
+                    /**
+                     * Format: float
+                     * @description Total quantity
+                     */
+                    total_quantity?: number;
+                    /**
+                     * Format: float
+                     * @description Remaining quantity (updated with a 12-hour delay)
+                     */
+                    remaining_quantity?: number;
+                    /**
+                     * Format: int64
+                     * @description Purchase time, Unix timestamp in ms
+                     */
+                    purchase_time?: number;
+                    /**
+                     * Format: int64
+                     * @description Effective time, Unix timestamp in ms
+                     */
+                    effective_time?: number;
+                    /**
+                     * Format: int64
+                     * @description Expiration time, Unix timestamp in ms
+                     */
+                    invalid_time?: number;
+                    /**
+                     * @description Resource Package Status
+                     * @enum {string}
+                     */
+                    status?: "toBeOnline" | "online" | "expired" | "runOut";
+                }[];
+            };
+        };
+        LTXText2VideoRequest: {
+            /** @description Text prompt describing the desired video content */
+            prompt: string;
+            /**
+             * @description Model to use for generation
+             * @enum {string}
+             */
+            model: "ltx-2-fast" | "ltx-2-pro";
+            /**
+             * @description Video duration in seconds
+             * @enum {integer}
+             */
+            duration: 6 | 8 | 10;
+            /**
+             * @description Output video resolution
+             * @enum {string}
+             */
+            resolution: "1920x1080" | "2560x1440" | "3840x2160";
+            /**
+             * @description Frame rate in frames per second
+             * @default 25
+             * @enum {integer}
+             */
+            fps: 25 | 50;
+            /**
+             * @description Generate audio for the video
+             * @default true
+             */
+            generate_audio: boolean;
+        };
+        LTXImage2VideoRequest: {
+            /** @description Image to be used as the first frame of the video (HTTPS URL or base64 data URI) */
+            image_uri: string;
+            /** @description Text description of how the image should be animated */
+            prompt: string;
+            /**
+             * @description Model to use for generation
+             * @enum {string}
+             */
+            model: "ltx-2-fast" | "ltx-2-pro";
+            /**
+             * @description Video duration in seconds
+             * @enum {integer}
+             */
+            duration: 6 | 8 | 10;
+            /**
+             * @description Output video resolution
+             * @enum {string}
+             */
+            resolution: "1920x1080" | "2560x1440" | "3840x2160";
+            /**
+             * @description Frame rate in frames per second
+             * @default 25
+             * @enum {integer}
+             */
+            fps: 25 | 50;
+            /**
+             * @description Generate audio for the video
+             * @default true
+             */
+            generate_audio: boolean;
+        };
+        StripeEvent: {
+            id: string;
+            /** @enum {string} */
+            object: "event";
+            data: {
+                object?: Record<string, never>;
+            };
+            /** @enum {string} */
+            type: "invoice.paid";
+        };
+        /** @description Parameters for the Minimax video generation proxy request. */
+        MinimaxVideoGenerationRequest: {
+            /**
+             * @description Required. ID of model. Options: MiniMax-Hailuo-02, T2V-01-Director, I2V-01-Director, S2V-01, I2V-01, I2V-01-live, T2V-01
+             * @enum {string}
+             */
+            model: "MiniMax-Hailuo-02" | "T2V-01-Director" | "I2V-01-Director" | "S2V-01" | "I2V-01" | "I2V-01-live" | "T2V-01";
+            /** @description Description of the video. Should be less than 2000 characters. Supports camera movement instructions in [brackets]. */
+            prompt?: string;
+            /**
+             * @description If true (default), the model will automatically optimize the prompt. Set to false for more precise control.
+             * @default true
+             */
+            prompt_optimizer: boolean;
+            /** @description URL or base64 encoding of the first frame image. Required when model is I2V-01, I2V-01-Director, or I2V-01-live. */
+            first_frame_image?: string;
+            /** @description Only available when model is S2V-01. The model will generate a video based on the subject uploaded through this parameter. */
+            subject_reference?: {
+                /** @description URL or base64 encoding of the subject reference image. */
+                image?: string;
+                /** @description URL or base64 encoding of the mask for the subject reference image. */
+                mask?: string;
+            }[];
+            /** @description Optional. URL to receive real-time status updates about the video generation task. */
+            callback_url?: string;
+            /**
+             * @description Video length in seconds. Only available for MiniMax-Hailuo-02
+             * @default 6
+             * @enum {integer}
+             */
+            duration: 6 | 10;
+            /**
+             * @description Video resolution. Only available for MiniMax-Hailuo-02.
+             * @default 768P
+             * @enum {string}
+             */
+            resolution: "768P" | "1080P";
+        };
+        /** @description Common response structure used by Minimax APIs */
+        MinimaxBaseResponse: {
+            /** @description Status code. 0 indicates success, other values indicate errors. */
+            status_code: number;
+            /** @description Specific error details or success message. */
+            status_msg: string;
+        };
+        /** @description Response from the Minimax video generation API. */
+        MinimaxVideoGenerationResponse: {
+            /** @description The task ID for the asynchronous video generation task. */
+            task_id: string;
+            base_resp: components["schemas"]["MinimaxBaseResponse"];
+        };
+        /** @description Response from retrieving a Minimax file download URL. */
+        MinimaxFileRetrieveResponse: {
+            file: {
+                /** @description Unique identifier for the file */
+                file_id?: number;
+                /** @description File size in bytes */
+                bytes?: number;
+                /** @description Unix timestamp when the file was created, in seconds */
+                created_at?: number;
+                /** @description The name of the file */
+                filename?: string;
+                /** @description The purpose of using the file */
+                purpose?: string;
+                /** @description The URL to download the video */
+                download_url?: string;
+            };
+            base_resp: components["schemas"]["MinimaxBaseResponse"];
+        };
+        /** @description Response from querying a Minimax video generation task status. */
+        MinimaxTaskResultResponse: {
+            /** @description The task ID being queried. */
+            task_id: string;
+            /**
+             * @description Task status: 'Queueing' (in queue), 'Preparing' (task is preparing), 'Processing' (generating), 'Success' (task completed successfully), or 'Fail' (task failed).
+             * @enum {string}
+             */
+            status: "Queueing" | "Preparing" | "Processing" | "Success" | "Fail";
+            /** @description After the task status changes to Success, this field returns the file ID corresponding to the generated video. */
+            file_id?: string;
+            base_resp: components["schemas"]["MinimaxBaseResponse"];
+        };
+        BFLFluxKontextProGenerateRequest: {
+            /** @description The text prompt describing what to edit on the image */
+            prompt: string;
+            /** @description Base64 encoded image to be edited */
+            input_image: string;
+            /**
+             * @description Number of inference steps
+             * @default 50
+             */
+            steps: number;
+            /**
+             * @description The guidance scale for generation
+             * @default 3
+             */
+            guidance: number;
+        };
+        BFLFluxKontextProGenerateResponse: {
+            /** @description Job ID for tracking */
+            id: string;
+            /** @description URL to poll for results */
+            polling_url: string;
+        };
+        BFLFluxKontextMaxGenerateRequest: {
+            /** @description The text prompt describing what to edit on the image */
+            prompt: string;
+            /** @description Base64 encoded image to be edited */
+            input_image: string;
+            /**
+             * @description Number of inference steps
+             * @default 50
+             */
+            steps: number;
+            /**
+             * @description The guidance scale for generation
+             * @default 3
+             */
+            guidance: number;
+        };
+        BFLFluxKontextMaxGenerateResponse: {
+            /** @description Job ID for tracking */
+            id: string;
+            /** @description URL to poll for results */
+            polling_url: string;
+        };
+        BFLFluxPro1_1GenerateRequest: {
+            /** @description The main text prompt for image generation */
+            prompt: string;
+            /** @description Optional image prompt */
+            image_prompt?: string;
+            /** @description Width of the generated image */
+            width: number;
+            /** @description Height of the generated image */
+            height: number;
+            /** @description Whether to use prompt upsampling */
+            prompt_upsampling?: boolean;
+            /** @description Random seed for reproducibility */
+            seed?: number;
+            /** @description Safety tolerance level */
+            safety_tolerance?: number;
+            /**
+             * @description Output image format
+             * @enum {string}
+             */
+            output_format?: "jpeg" | "png";
+            /** @description Optional webhook URL for async processing */
+            webhook_url?: string;
+            /** @description Optional webhook secret for async processing */
+            webhook_secret?: string;
+        };
+        BFLFluxPro1_1GenerateResponse: {
+            /** @description Job ID for tracking */
+            id: string;
+            /** @description URL to poll for results */
+            polling_url: string;
+        };
+        /** @description Request body for the BFL Flux Pro 1.1 Ultra image generation API. */
+        BFLFluxProGenerateRequest: {
+            /** @description The text prompt for image generation. */
+            prompt: string;
+            /** @description The negative prompt for image generation. */
+            negative_prompt?: string;
+            /** @description The width of the image to generate. */
+            width: number;
+            /** @description The height of the image to generate. */
+            height: number;
+            /** @description The number of inference steps. */
+            num_inference_steps?: number;
+            /** @description The guidance scale for generation. */
+            guidance_scale?: number;
+            /** @description The seed value for reproducibility. */
+            seed?: number;
+            /** @description The number of images to generate. */
+            num_images?: number;
+        };
+        /** @description Response from the BFL Flux Pro 1.1 Ultra image generation API. */
+        BFLFluxProGenerateResponse: {
+            /** @description The unique identifier for the generation task. */
+            id: string;
+            /** @description URL to poll for the generation result. */
+            polling_url: string;
+        };
+        /** @description Response from the BFL Flux Pro 1.1 Ultra status check API. */
+        BFLFluxProStatusResponse: {
+            /** @description The unique identifier for the generation task. */
+            id: string;
+            /** @description The status of the task. */
+            status: components["schemas"]["BFLStatus"];
+            /** @description The result of the task (null if not completed). */
+            result?: Record<string, never> | null;
+            /**
+             * Format: float
+             * @description The progress of the task (0.0 to 1.0).
+             */
+            progress: number;
+            /** @description Additional details about the task (null if not available). */
+            details?: Record<string, never> | null;
+        };
+        /**
+         * @description Possible statuses for a BFL Flux Pro generation task.
+         * @example Ready
+         * @enum {string}
+         */
+        BFLStatus: "Task not found" | "Pending" | "Request Moderated" | "Content Moderated" | "Ready" | "Error";
+        /** FluxProFillInputs */
+        BFLFluxProFillInputs: {
+            /**
+             * Image
+             * @description A Base64-encoded string representing the image you wish to modify. Can contain alpha mask if desired.
+             */
+            image: string;
+            /**
+             * Mask
+             * @description A Base64-encoded string representing a mask for the areas you want to modify in the image. The mask should be the same dimensions as the image and in black and white. Black areas (0%) indicate no modification, while white areas (100%) specify areas for inpainting. Optional if you provide an alpha mask in the original image. Validation: The endpoint verifies that the dimensions of the mask match the original image.
+             */
+            mask?: string;
+            /**
+             * Prompt
+             * @description The description of the changes you want to make. This text guides the inpainting process, allowing you to specify features, styles, or modifications for the masked area.
+             * @default
+             * @example ein fantastisches bild
+             */
+            prompt: string;
+            /**
+             * Steps
+             * @description Number of steps for the image generation process
+             * @default 50
+             * @example 50
+             */
+            steps: number;
+            /**
+             * Prompt Upsampling
+             * @description Whether to perform upsampling on the prompt. If active, automatically modifies the prompt for more creative generation
+             * @default false
+             */
+            prompt_upsampling: boolean;
+            /**
+             * Seed
+             * @description Optional seed for reproducibility
+             */
+            seed?: number;
+            /**
+             * Guidance
+             * @description Guidance strength for the image generation process
+             * @default 60
+             */
+            guidance: number;
+            /**
+             * @description Output format for the generated image. Can be 'jpeg' or 'png'.
+             * @default jpeg
+             */
+            output_format: components["schemas"]["BFLOutputFormat"];
+            /**
+             * Safety Tolerance
+             * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
+             * @default 2
+             * @example 2
+             */
+            safety_tolerance: number;
+            /**
+             * Webhook Url
+             * @description URL to receive webhook notifications
+             */
+            webhook_url?: string;
+            /**
+             * Webhook Secret
+             * @description Optional secret for webhook signature verification
+             */
+            webhook_secret?: string;
+        };
+        /** AsyncResponse */
+        BFLAsyncResponse: {
+            /** Id */
+            id: string;
+            /** Polling Url */
+            polling_url: string;
+        };
+        /** AsyncWebhookResponse */
+        BFLAsyncWebhookResponse: {
+            /** Id */
+            id: string;
+            /** Status */
+            status: string;
+            /** Webhook Url */
+            webhook_url: string;
+        };
+        /** HTTPValidationError */
+        BFLHTTPValidationError: {
+            /** Detail */
+            detail?: components["schemas"]["BFLValidationError"][];
+        };
+        /** FluxProExpandInputs */
+        BFLFluxProExpandInputs: {
+            /**
+             * Image
+             * @description A Base64-encoded string representing the image you wish to expand.
+             */
+            image: string;
+            /**
+             * Top
+             * @description Number of pixels to expand at the top of the image
+             * @default 0
+             */
+            top: number;
+            /**
+             * Bottom
+             * @description Number of pixels to expand at the bottom of the image
+             * @default 0
+             */
+            bottom: number;
+            /**
+             * Left
+             * @description Number of pixels to expand on the left side of the image
+             * @default 0
+             */
+            left: number;
+            /**
+             * Right
+             * @description Number of pixels to expand on the right side of the image
+             * @default 0
+             */
+            right: number;
+            /**
+             * Prompt
+             * @description The description of the changes you want to make. This text guides the expansion process, allowing you to specify features, styles, or modifications for the expanded areas.
+             * @default
+             * @example ein fantastisches bild
+             */
+            prompt: string;
+            /**
+             * Steps
+             * @description Number of steps for the image generation process
+             * @default 50
+             * @example 50
+             */
+            steps: number;
+            /**
+             * Prompt Upsampling
+             * @description Whether to perform upsampling on the prompt. If active, automatically modifies the prompt for more creative generation
+             * @default false
+             */
+            prompt_upsampling: boolean;
+            /**
+             * Seed
+             * @description Optional seed for reproducibility
+             */
+            seed?: number;
+            /**
+             * Guidance
+             * @description Guidance strength for the image generation process
+             * @default 60
+             */
+            guidance: number;
+            /**
+             * @description Output format for the generated image. Can be 'jpeg' or 'png'.
+             * @default jpeg
+             */
+            output_format: components["schemas"]["BFLOutputFormat"];
+            /**
+             * Safety Tolerance
+             * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
+             * @default 2
+             * @example 2
+             */
+            safety_tolerance: number;
+            /**
+             * Webhook Url
+             * @description URL to receive webhook notifications
+             */
+            webhook_url?: string;
+            /**
+             * Webhook Secret
+             * @description Optional secret for webhook signature verification
+             */
+            webhook_secret?: string;
+        };
+        /** CannyInputs */
+        BFLCannyInputs: {
+            /**
+             * Prompt
+             * @description Text prompt for image generation
+             * @example ein fantastisches bild
+             */
+            prompt: string;
+            /**
+             * Control Image
+             * @description Base64 encoded image to use as control input if no preprocessed image is provided
+             */
+            control_image?: string;
+            /**
+             * Preprocessed Image
+             * @description Optional pre-processed image that will bypass the control preprocessing step
+             */
+            preprocessed_image?: string;
+            /**
+             * Canny Low Threshold
+             * @description Low threshold for Canny edge detection
+             * @default 50
+             */
+            canny_low_threshold: number;
+            /**
+             * Canny High Threshold
+             * @description High threshold for Canny edge detection
+             * @default 200
+             */
+            canny_high_threshold: number;
+            /**
+             * Prompt Upsampling
+             * @description Whether to perform upsampling on the prompt
+             * @default false
+             */
+            prompt_upsampling: boolean;
+            /**
+             * Seed
+             * @description Optional seed for reproducibility
+             * @example 42
+             */
+            seed?: number;
+            /**
+             * Steps
+             * @description Number of steps for the image generation process
+             * @default 50
+             */
+            steps: number;
+            /**
+             * @description Output format for the generated image. Can be 'jpeg' or 'png'.
+             * @default jpeg
+             */
+            output_format: components["schemas"]["BFLOutputFormat"];
+            /**
+             * Guidance
+             * @description Guidance strength for the image generation process
+             * @default 30
+             */
+            guidance: number;
+            /**
+             * Safety Tolerance
+             * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
+             * @default 2
+             */
+            safety_tolerance: number;
+            /**
+             * Webhook Url
+             * @description URL to receive webhook notifications
+             */
+            webhook_url?: string;
+            /**
+             * Webhook Secret
+             * @description Optional secret for webhook signature verification
+             */
+            webhook_secret?: string;
+        };
+        /** DepthInputs */
+        BFLDepthInputs: {
+            /**
+             * Prompt
+             * @description Text prompt for image generation
+             * @example ein fantastisches bild
+             */
+            prompt: string;
+            /**
+             * Control Image
+             * @description Base64 encoded image to use as control input
+             */
+            control_image?: string;
+            /**
+             * Preprocessed Image
+             * @description Optional pre-processed image that will bypass the control preprocessing step
+             */
+            preprocessed_image?: string;
+            /**
+             * Prompt Upsampling
+             * @description Whether to perform upsampling on the prompt
+             * @default false
+             */
+            prompt_upsampling: boolean;
+            /**
+             * Seed
+             * @description Optional seed for reproducibility
+             * @example 42
+             */
+            seed?: number;
+            /**
+             * Steps
+             * @description Number of steps for the image generation process
+             * @default 50
+             */
+            steps: number;
+            /**
+             * @description Output format for the generated image. Can be 'jpeg' or 'png'.
+             * @default jpeg
+             */
+            output_format: components["schemas"]["BFLOutputFormat"];
+            /**
+             * Guidance
+             * @description Guidance strength for the image generation process
+             * @default 15
+             */
+            guidance: number;
+            /**
+             * Safety Tolerance
+             * @description Tolerance level for input and output moderation. Between 0 and 6, 0 being most strict, 6 being least strict.
+             * @default 2
+             */
+            safety_tolerance: number;
+            /**
+             * Webhook Url
+             * @description URL to receive webhook notifications
+             */
+            webhook_url?: string;
+            /**
+             * Webhook Secret
+             * @description Optional secret for webhook signature verification
+             */
+            webhook_secret?: string;
+        };
+        /**
+         * OutputFormat
+         * @enum {string}
+         */
+        BFLOutputFormat: "jpeg" | "png";
+        /** ValidationError */
+        BFLValidationError: {
+            /** Location */
+            loc: (string | number)[];
+            /** Message */
+            msg: string;
+            /** Error Type */
+            type: string;
+        };
+        /** @description Parameters for the Recraft image generation proxy request. */
+        RecraftImageGenerationRequest: {
+            /** @description The text prompt describing the image to generate */
+            prompt: string;
+            /** @description The model to use for generation (e.g., "recraftv3") */
+            model: string;
+            /** @description The style to apply to the generated image (e.g., "digital_illustration") */
+            style?: string;
+            /** @description The style ID to apply to the generated image (e.g., "123e4567-e89b-12d3-a456-426614174000"). If style_id is provided, style should not be provided. */
+            style_id?: string;
+            /** @description The size of the generated image (e.g., "1024x1024") */
+            size: string;
+            /** @description The controls for the generated image */
+            controls?: {
+                /** @description Defines artistic tone of your image. At a simple level, the person looks straight at the camera in a static and clean style. Dynamic and eccentric levels introduce movement and creativity. */
+                artistic_level?: number | null;
+                /** @description An array of preferable colors */
+                colors?: components["schemas"]["RGBColor"][];
+                /** @description Use given color as a desired background color */
+                background_color?: components["schemas"]["RGBColor"];
+                /** @description Do not embed text layouts */
+                no_text?: boolean;
+            };
+            /** @description The number of images to generate */
+            n: number;
+        };
+        /** @description Response from the Recraft image generation API. */
+        RecraftImageGenerationResponse: {
+            /** @description Unix timestamp when the generation was created */
+            created: number;
+            /** @description Number of credits used for the generation */
+            credits: number;
+            /** @description Array of generated image information */
+            data: {
+                /** @description Unique identifier for the generated image */
+                image_id?: string;
+                /** @description URL to access the generated image */
+                url?: string;
+            }[];
+        };
+        RecraftImageFeatures: {
+            nsfw_score?: number;
+        };
+        RecraftTextLayoutItem: {
+            bbox: number[][];
+            text: string;
+        };
+        RecraftImageColor: {
+            rgb?: number[];
+            std?: number[];
+            weight?: number;
+        };
+        /** @enum {string} */
+        RecraftImageStyle: "digital_illustration" | "icon" | "realistic_image" | "vector_illustration";
+        /** @enum {string} */
+        RecraftImageSubStyle: "2d_art_poster" | "3d" | "80s" | "glow" | "grain" | "hand_drawn" | "infantile_sketch" | "kawaii" | "pixel_art" | "psychedelic" | "seamless" | "voxel" | "watercolor" | "broken_line" | "colored_outline" | "colored_shapes" | "colored_shapes_gradient" | "doodle_fill" | "doodle_offset_fill" | "offset_fill" | "outline" | "outline_gradient" | "uneven_fill" | "70s" | "cartoon" | "doodle_line_art" | "engraving" | "flat_2" | "kawaii" | "line_art" | "linocut" | "seamless" | "b_and_w" | "enterprise" | "hard_flash" | "hdr" | "motion_blur" | "natural_light" | "studio_portrait" | "line_circuit" | "2d_art_poster_2" | "engraving_color" | "flat_air_art" | "hand_drawn_outline" | "handmade_3d" | "stickers_drawings" | "plastic" | "pictogram";
+        /** @enum {string} */
+        RecraftTransformModel: "refm1" | "recraft20b" | "recraftv2" | "recraftv3" | "flux1_1pro" | "flux1dev" | "imagen3" | "hidream_i1_dev";
+        /** @enum {string} */
+        RecraftImageFormat: "webp" | "png";
+        /** @enum {string} */
+        RecraftResponseFormat: "url" | "b64_json";
+        RecraftImage: {
+            b64_json?: string;
+            features?: components["schemas"]["RecraftImageFeatures"];
+            /** Format: uuid */
+            image_id: string;
+            revised_prompt?: string;
+            url?: string;
+        };
+        RecraftUserControls: {
+            artistic_level?: number;
+            background_color?: components["schemas"]["RecraftImageColor"];
+            colors?: components["schemas"]["RecraftImageColor"][];
+            no_text?: boolean;
+        };
+        RecraftTextLayout: components["schemas"]["RecraftTextLayoutItem"][];
+        RecraftProcessImageRequest: {
+            /** Format: binary */
+            image: string;
+            image_format?: components["schemas"]["RecraftImageFormat"];
+            response_format?: components["schemas"]["RecraftResponseFormat"];
+        };
+        RecraftProcessImageResponse: {
+            created: number;
+            credits: number;
+            image: components["schemas"]["RecraftImage"];
+        };
+        RecraftImageToImageRequest: {
+            block_nsfw?: boolean;
+            calculate_features?: boolean;
+            controls?: components["schemas"]["RecraftUserControls"];
+            /** Format: binary */
+            image: string;
+            image_format?: components["schemas"]["RecraftImageFormat"];
+            model?: components["schemas"]["RecraftTransformModel"];
+            n?: number;
+            negative_prompt?: string;
+            prompt: string;
+            response_format?: components["schemas"]["RecraftResponseFormat"];
+            strength: number;
+            style?: components["schemas"]["RecraftImageStyle"];
+            /** Format: uuid */
+            style_id?: string;
+            substyle?: components["schemas"]["RecraftImageSubStyle"];
+            text_layout?: components["schemas"]["RecraftTextLayout"];
+        };
+        RecraftGenerateImageResponse: {
+            created: number;
+            credits: number;
+            data: components["schemas"]["RecraftImage"][];
+        };
+        RecraftTransformImageWithMaskRequest: {
+            block_nsfw?: boolean;
+            calculate_features?: boolean;
+            /** Format: binary */
+            image: string;
+            image_format?: components["schemas"]["RecraftImageFormat"];
+            /** Format: binary */
+            mask: string;
+            model?: components["schemas"]["RecraftTransformModel"];
+            n?: number;
+            negative_prompt?: string;
+            prompt: string;
+            response_format?: components["schemas"]["RecraftResponseFormat"];
+            style?: components["schemas"]["RecraftImageStyle"];
+            /** Format: uuid */
+            style_id?: string;
+            substyle?: components["schemas"]["RecraftImageSubStyle"];
+            text_layout?: components["schemas"]["RecraftTextLayout"];
+        };
+        KlingErrorResponse: {
+            /**
+             * @description - 1000: Authentication failed
+             *     - 1001: Authorization is empty
+             *     - 1002: Authorization is invalid
+             *     - 1003: Authorization is not yet valid
+             *     - 1004: Authorization has expired
+             *     - 1100: Account exception
+             *     - 1101: Account in arrears (postpaid scenario)
+             *     - 1102: Resource pack depleted or expired (prepaid scenario)
+             *     - 1103: Unauthorized access to requested resource
+             *     - 1200: Invalid request parameters
+             *     - 1201: Invalid parameters
+             *     - 1202: Invalid request method
+             *     - 1203: Requested resource does not exist
+             *     - 1300: Trigger platform strategy
+             *     - 1301: Trigger content security policy
+             *     - 1302: API request too frequent
+             *     - 1303: Concurrency/QPS exceeds limit
+             *     - 1304: Trigger IP whitelist policy
+             *     - 5000: Internal server error
+             *     - 5001: Service temporarily unavailable
+             *     - 5002: Server internal timeout
+             */
+            code: number;
+            /** @description Human-readable error message */
+            message: string;
+            /** @description Request ID for tracking and troubleshooting */
+            request_id: string;
+        };
+        TripoTask: {
+            task_id: string;
+            type: string;
+            /** @enum {string} */
+            status: "queued" | "running" | "success" | "failed" | "cancelled" | "unknown" | "banned" | "expired";
+            input: Record<string, never>;
+            output: {
+                model?: string;
+                base_model?: string;
+                pbr_model?: string;
+                rendered_image?: string;
+                riggable?: boolean;
+                /** @enum {string} */
+                topology?: "bip" | "quad";
+            };
+            progress: number;
+            create_time: number;
+        };
+        TripoSuccessTask: {
+            /** @enum {integer} */
+            code: 0;
+            data: {
+                /** @description used for getTask */
+                task_id: string;
+            };
+        };
+        TripoBalance: {
+            balance: number;
+            frozen: number;
+        };
+        TripoErrorResponse: {
+            /** @enum {integer} */
+            code: 1001 | 2000 | 2001 | 2002 | 2003 | 2004 | 2006 | 2007 | 2008 | 2010;
+            message: string;
+            suggestion: string;
+        };
+        /**
+         * @description Standard success code for Tripo API responses. Typically 0 for success.
+         * @example 0
+         */
+        TripoResponseSuccessCode: number;
+        /**
+         * @description The type of the Tripo task, specifically for text-to-model operations.
+         * @example text_to_model
+         * @enum {string}
+         */
+        TripoTextToModel: "text_to_model";
+        /**
+         * @description Version of the Tripo model.
+         * @example v2.5-20250123
+         * @enum {string}
+         */
+        TripoModelVersion: "v2.5-20250123" | "v2.0-20240919" | "v1.4-20240625";
+        /**
+         * @description Style for the Tripo model generation.
+         * @example object:clay
+         * @enum {string}
+         */
+        TripoModelStyle: "person:person2cartoon" | "animal:venom" | "object:clay" | "object:steampunk" | "object:christmas" | "object:barbie" | "gold" | "ancient_bronze";
+        /**
+         * @description Task type for Tripo image-to-model generation.
+         * @example image_to_model
+         * @enum {string}
+         */
+        TripoImageToModel: "image_to_model";
+        /**
+         * @description Task type for Tripo multiview-to-model generation.
+         * @example multiview_to_model
+         * @enum {string}
+         */
+        TripoMultiviewToModel: "multiview_to_model";
+        /**
+         * @description Mode for multiview generation, specifying view orientation.
+         * @example LEFT
+         * @enum {string}
+         */
+        TripoMultiviewMode: "LEFT" | "RIGHT";
+        /** @enum {string} */
+        TripoTextureQuality: "standard" | "detailed";
+        /** @enum {string} */
+        TripoTextureAlignment: "original_image" | "geometry";
+        /**
+         * @default default
+         * @enum {string}
+         */
+        TripoOrientation: "align_image" | "default";
+        /** @enum {string} */
+        TripoTypeTextureModel: "texture_model";
+        /** @enum {string} */
+        TripoTypeRefineModel: "refine_model";
+        /** @enum {string} */
+        TripoTypeAnimatePrerigcheck: "animate_prerigcheck";
+        /** @enum {string} */
+        TripoTypeAnimateRig: "animate_rig";
+        /** @enum {string} */
+        TripoStandardFormat: "glb" | "fbx";
+        /** @enum {string} */
+        TripoTopology: "bip" | "quad";
+        /** @enum {string} */
+        TripoSpec: "mixamo" | "tripo";
+        /** @enum {string} */
+        TripoTypeAnimateRetarget: "animate_retarget";
+        /** @enum {string} */
+        TripoAnimation: "preset:idle" | "preset:walk" | "preset:climb" | "preset:jump" | "preset:run" | "preset:slash" | "preset:shoot" | "preset:hurt" | "preset:fall" | "preset:turn";
+        /** @enum {string} */
+        TripoTypeStylizeModel: "stylize_model";
+        /** @enum {string} */
+        TripoStylizeOptions: "lego" | "voxel" | "voronoi" | "minecraft";
+        /** @enum {string} */
+        TripoTypeConvertModel: "convert_model";
+        /** @enum {string} */
+        TripoConvertFormat: "GLTF" | "USDZ" | "FBX" | "OBJ" | "STL" | "3MF";
+        /** @enum {string} */
+        TripoTextureFormat: "BMP" | "DPX" | "HDR" | "JPEG" | "OPEN_EXR" | "PNG" | "TARGA" | "TIFF" | "WEBP";
+        /**
+         * @description The aspect ratio of the generation
+         * @default 16:9
+         * @example 16:9
+         * @enum {string}
+         */
+        LumaAspectRatio: "1:1" | "16:9" | "9:16" | "4:3" | "3:4" | "21:9" | "9:21";
+        /**
+         * @description The keyframes of the generation
+         * @example {
+         *       "frame0": {
+         *         "type": "image",
+         *         "url": "https://example.com/image.jpg"
+         *       },
+         *       "frame1": {
+         *         "type": "generation",
+         *         "id": "123e4567-e89b-12d3-a456-426614174000"
+         *       }
+         *     }
+         */
+        LumaKeyframes: {
+            frame0?: components["schemas"]["LumaKeyframe"];
+            frame1?: components["schemas"]["LumaKeyframe"];
+        };
+        /**
+         * @description The video model used for the generation
+         * @default ray-2
+         * @example ray-2
+         * @enum {string}
+         */
+        LumaVideoModel: "ray-2" | "ray-flash-2" | "ray-1-6";
+        LumaVideoModelOutputResolution: ("540p" | "720p" | "1080p" | "4k") | string;
+        LumaVideoModelOutputDuration: ("5s" | "9s") | string;
+        /**
+         * @description The image model used for the generation
+         * @default photon-1
+         * @enum {string}
+         */
+        LumaImageModel: "photon-1" | "photon-flash-1";
+        /** @description The image reference object */
+        LumaImageRef: {
+            /**
+             * Format: uri
+             * @description The URL of the image reference
+             */
+            url?: string;
+            /** @description The weight of the image reference */
+            weight?: number;
+        };
+        /** @description The image identity object */
+        LumaImageIdentity: {
+            /** @description The URLs of the image identity */
+            images?: string[];
+        };
+        /** @description The modify image reference object */
+        LumaModifyImageRef: {
+            /**
+             * Format: uri
+             * @description The URL of the image reference
+             */
+            url?: string;
+            /** @description The weight of the modify image reference */
+            weight?: number;
+        };
+        /**
+         * @description The generation reference object
+         * @example {
+         *       "type": "generation",
+         *       "id": "123e4567-e89b-12d3-a456-426614174003"
+         *     }
+         */
+        LumaGenerationReference: {
+            /**
+             * @description discriminator enum property added by openapi-typescript
+             * @enum {string}
+             */
+            type: "generation";
+            /**
+             * Format: uuid
+             * @description The ID of the generation
+             */
+            id: string;
+        };
+        /**
+         * @description The image object
+         * @example {
+         *       "type": "image",
+         *       "url": "https://example.com/image.jpg"
+         *     }
+         */
+        LumaImageReference: {
+            /**
+             * @description discriminator enum property added by openapi-typescript
+             * @enum {string}
+             */
+            type: "image";
+            /**
+             * Format: uri
+             * @description The URL of the image
+             */
+            url: string;
+        };
+        /** @description A keyframe can be either a Generation reference, an Image, or a Video */
+        LumaKeyframe: components["schemas"]["LumaGenerationReference"] | components["schemas"]["LumaImageReference"];
+        /** @enum {string} */
+        LumaGenerationType: "video" | "image";
+        /**
+         * @description The state of the generation
+         * @example completed
+         * @enum {string}
+         */
+        LumaState: "queued" | "dreaming" | "completed" | "failed";
+        /** @description The assets of the generation */
+        LumaAssets: {
+            /**
+             * Format: uri
+             * @description The URL of the video
+             */
+            video?: string;
+            /**
+             * Format: uri
+             * @description The URL of the image
+             */
+            image?: string;
+            /**
+             * Format: uri
+             * @description The URL of the progress video
+             */
+            progress_video?: string;
+        };
+        /** @description The generation request object */
+        LumaGenerationRequest: {
+            /**
+             * @default video
+             * @enum {string}
+             */
+            generation_type: "video";
+            /** @description The prompt of the generation */
+            prompt: string;
+            aspect_ratio: components["schemas"]["LumaAspectRatio"];
+            /** @description Whether to loop the video */
+            loop?: boolean;
+            keyframes?: components["schemas"]["LumaKeyframes"];
+            /**
+             * Format: uri
+             * @description The callback URL of the generation, a POST request with Generation object will be sent to the callback URL when the generation is dreaming, completed, or failed
+             */
+            callback_url?: string;
+            model: components["schemas"]["LumaVideoModel"];
+            resolution: components["schemas"]["LumaVideoModelOutputResolution"];
+            duration: components["schemas"]["LumaVideoModelOutputDuration"];
+        };
+        /** @description The image generation request object */
+        LumaImageGenerationRequest: {
+            /**
+             * @default image
+             * @enum {string}
+             */
+            generation_type: "image";
+            model?: components["schemas"]["LumaImageModel"];
+            /** @description The prompt of the generation */
+            prompt?: string;
+            aspect_ratio?: components["schemas"]["LumaAspectRatio"];
+            /**
+             * Format: uri
+             * @description The callback URL for the generation
+             */
+            callback_url?: string;
+            image_ref?: components["schemas"]["LumaImageRef"][];
+            style_ref?: components["schemas"]["LumaImageRef"][];
+            character_ref?: {
+                identity0?: components["schemas"]["LumaImageIdentity"];
+            };
+            modify_image_ref?: components["schemas"]["LumaModifyImageRef"];
+        };
+        /** @description The upscale generation request object */
+        LumaUpscaleVideoGenerationRequest: {
+            /**
+             * @default upscale_video
+             * @enum {string}
+             */
+            generation_type: "upscale_video";
+            resolution?: components["schemas"]["LumaVideoModelOutputResolution"];
+            /**
+             * Format: uri
+             * @description The callback URL for the upscale
+             */
+            callback_url?: string;
+        };
+        /** @description The audio generation request object */
+        LumaAudioGenerationRequest: {
+            /**
+             * @default add_audio
+             * @enum {string}
+             */
+            generation_type: "add_audio";
+            /** @description The prompt of the audio */
+            prompt?: string;
+            /** @description The negative prompt of the audio */
+            negative_prompt?: string;
+            /**
+             * Format: uri
+             * @description The callback URL for the audio
+             */
+            callback_url?: string;
+        };
+        /**
+         * @description The error object
+         * @example {
+         *       "detail": "Invalid API key is provided"
+         *     }
+         */
+        LumaError: {
+            /** @description The error message */
+            detail?: string;
+        };
+        /**
+         * @description The generation response object
+         * @example {
+         *       "id": "123e4567-e89b-12d3-a456-426614174000",
+         *       "state": "completed",
+         *       "failure_reason": null,
+         *       "created_at": "2023-06-01T12:00:00Z",
+         *       "assets": {
+         *         "video": "https://example.com/video.mp4"
+         *       },
+         *       "model": "ray-2",
+         *       "request": {
+         *         "prompt": "A serene lake surrounded by mountains at sunset",
+         *         "aspect_ratio": "16:9",
+         *         "loop": true,
+         *         "keyframes": {
+         *           "frame0": {
+         *             "type": "image",
+         *             "url": "https://example.com/image.jpg"
+         *           },
+         *           "frame1": {
+         *             "type": "generation",
+         *             "id": "123e4567-e89b-12d3-a456-426614174000"
+         *           }
+         *         }
+         *       }
+         *     }
+         */
+        LumaGeneration: {
+            /**
+             * Format: uuid
+             * @description The ID of the generation
+             */
+            id?: string;
+            generation_type?: components["schemas"]["LumaGenerationType"];
+            state?: components["schemas"]["LumaState"];
+            /** @description The reason for the state of the generation */
+            failure_reason?: string;
+            /**
+             * Format: date-time
+             * @description The date and time when the generation was created
+             */
+            created_at?: string;
+            assets?: components["schemas"]["LumaAssets"];
+            /** @description The model used for the generation */
+            model?: string;
+            /** @description The request of the generation */
+            request?: components["schemas"]["LumaGenerationRequest"] | components["schemas"]["LumaImageGenerationRequest"] | components["schemas"]["LumaUpscaleVideoGenerationRequest"] | components["schemas"]["LumaAudioGenerationRequest"];
+        };
+        PixverseTextVideoRequest: {
+            /** @enum {string} */
+            aspect_ratio: "16:9" | "4:3" | "1:1" | "3:4" | "9:16";
+            /** @enum {integer} */
+            duration: 5 | 8;
+            /** @enum {string} */
+            model: "v3.5";
+            /** @enum {string} */
+            motion_mode?: "normal" | "fast";
+            negative_prompt?: string;
+            prompt: string;
+            /** @enum {string} */
+            quality: "360p" | "540p" | "720p" | "1080p";
+            seed?: number;
+            /** @enum {string} */
+            style?: "anime" | "3d_animation" | "clay" | "comic" | "cyberpunk";
+            template_id?: number;
+            water_mark?: boolean;
+        };
+        PixverseVideoResponse: {
+            ErrCode?: number;
+            ErrMsg?: string;
+            Resp?: {
+                video_id?: number;
+            };
+        };
+        PixverseImageUploadResponse: {
+            ErrCode?: number;
+            ErrMsg?: string;
+            Resp?: {
+                img_id?: number;
+            };
+        };
+        PixverseImageVideoRequest: {
+            img_id: number;
+            /** @enum {string} */
+            model: "v3.5";
+            prompt: string;
+            /** @enum {integer} */
+            duration: 5 | 8;
+            /** @enum {string} */
+            quality: "360p" | "540p" | "720p" | "1080p";
+            /** @enum {string} */
+            motion_mode?: "normal" | "fast";
+            seed?: number;
+            /** @enum {string} */
+            style?: "anime" | "3d_animation" | "clay" | "comic" | "cyberpunk";
+            template_id?: number;
+            water_mark?: boolean;
+        };
+        PixverseTransitionVideoRequest: {
+            first_frame_img: number;
+            last_frame_img: number;
+            /** @enum {string} */
+            model: "v3.5";
+            /** @enum {integer} */
+            duration: 5 | 8;
+            /** @enum {string} */
+            quality: "360p" | "540p" | "720p" | "1080p";
+            /** @enum {string} */
+            motion_mode: "normal" | "fast";
+            seed: number;
+            prompt: string;
+            /** @enum {string} */
+            style?: "anime" | "3d_animation" | "clay" | "comic" | "cyberpunk";
+            template_id?: number;
+            water_mark?: boolean;
+        };
+        PixverseVideoResultResponse: {
+            ErrCode?: number;
+            ErrMsg?: string;
+            Resp?: {
+                create_time?: string;
+                id?: number;
+                modify_time?: string;
+                negative_prompt?: string;
+                outputHeight?: number;
+                outputWidth?: number;
+                prompt?: string;
+                resolution_ratio?: number;
+                seed?: number;
+                size?: number;
+                /**
+                 * @description Video generation status codes:
+                 *     * 1 - Generation successful
+                 *     * 5 - Generating
+                 *     * 6 - Deleted
+                 *     * 7 - Contents moderation failed
+                 *     * 8 - Generation failed
+                 * @enum {integer}
+                 */
+                status?: 1 | 5 | 6 | 7 | 8;
+                style?: string;
+                url?: string;
+            };
+        };
+        Veo2GenVidRequest: {
+            instances?: {
+                /** @description Text description of the video */
+                prompt: string;
+                /** @description Optional image to guide video generation */
+                image?: {
+                    /** Format: byte */
+                    bytesBase64Encoded?: string;
+                    gcsUri?: string;
+                    mimeType?: string;
+                } & (unknown | unknown);
+            }[];
+            parameters?: {
+                /** @example 16:9 */
+                aspectRatio?: string;
+                negativePrompt?: string;
+                /** @enum {string} */
+                personGeneration?: "ALLOW" | "BLOCK";
+                sampleCount?: number;
+                /** Format: uint32 */
+                seed?: number;
+                /** @description Optional Cloud Storage URI to upload the video */
+                storageUri?: string;
+                durationSeconds?: number;
+                enhancePrompt?: boolean;
+            };
+        };
+        Veo2GenVidResponse: {
+            /**
+             * @description Operation resource name
+             * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/a1b07c8e-7b5a-4aba-bb34-3e1ccb8afcc8
+             */
+            name: string;
+        };
+        Veo2GenVidPollRequest: {
+            /**
+             * @description Full operation name (from predict response)
+             * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/OPERATION_ID
+             */
+            operationName: string;
+        };
+        Veo2GenVidPollResponse: {
+            name?: string;
+            done?: boolean;
+            /** @description The actual prediction response if done is true */
+            response?: {
+                /** @example type.googleapis.com/cloud.ai.large_models.vision.GenerateVideoResponse */
+                "@type"?: string;
+                /** @description Count of media filtered by responsible AI policies */
+                raiMediaFilteredCount?: number;
+                /** @description Reasons why media was filtered by responsible AI policies */
+                raiMediaFilteredReasons?: string[];
+                videos?: {
+                    /** @description Cloud Storage URI of the video */
+                    gcsUri?: string;
+                    /** @description Base64-encoded video content */
+                    bytesBase64Encoded?: string;
+                    /** @description Video MIME type */
+                    mimeType?: string;
+                }[];
+            };
+            /** @description Error details if operation failed */
+            error?: {
+                /** @description Error code */
+                code?: number;
+                /** @description Error message */
+                message?: string;
+            };
+        };
+        VeoGenVidRequest: {
+            instances?: {
+                /** @description Text description of the video */
+                prompt: string;
+                /** @description Optional image to guide video generation */
+                image?: {
+                    /** Format: byte */
+                    bytesBase64Encoded?: string;
+                    gcsUri?: string;
+                    mimeType?: string;
+                } & (unknown | unknown);
+            }[];
+            parameters?: {
+                /** @example 16:9 */
+                aspectRatio?: string;
+                negativePrompt?: string;
+                /** @enum {string} */
+                personGeneration?: "ALLOW" | "BLOCK";
+                sampleCount?: number;
+                /** Format: uint32 */
+                seed?: number;
+                /** @description Optional Cloud Storage URI to upload the video */
+                storageUri?: string;
+                durationSeconds?: number;
+                enhancePrompt?: boolean;
+                /** @description Generate audio for the video. Only supported by veo 3 models. */
+                generateAudio?: boolean;
+            };
+        };
+        VeoGenVidResponse: {
+            /**
+             * @description Operation resource name
+             * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/a1b07c8e-7b5a-4aba-bb34-3e1ccb8afcc8
+             */
+            name: string;
+        };
+        VeoGenVidPollRequest: {
+            /**
+             * @description Full operation name (from predict response)
+             * @example projects/PROJECT_ID/locations/us-central1/publishers/google/models/MODEL_ID/operations/OPERATION_ID
+             */
+            operationName: string;
+        };
+        VeoGenVidPollResponse: {
+            name?: string;
+            done?: boolean;
+            /** @description The actual prediction response if done is true */
+            response?: {
+                /** @example type.googleapis.com/cloud.ai.large_models.vision.GenerateVideoResponse */
+                "@type"?: string;
+                /** @description Count of media filtered by responsible AI policies */
+                raiMediaFilteredCount?: number;
+                /** @description Reasons why media was filtered by responsible AI policies */
+                raiMediaFilteredReasons?: string[];
+                videos?: {
+                    /** @description Cloud Storage URI of the video */
+                    gcsUri?: string;
+                    /** @description Base64-encoded video content */
+                    bytesBase64Encoded?: string;
+                    /** @description Video MIME type */
+                    mimeType?: string;
+                }[];
+            };
+            /** @description Error details if operation failed */
+            error?: {
+                /** @description Error code */
+                code?: number;
+                /** @description Error message */
+                message?: string;
+            };
+        };
+        RunwayImageToVideoRequest: {
+            promptImage: components["schemas"]["RunwayPromptImageObject"];
+            /**
+             * Format: int64
+             * @description Random seed for generation
+             */
+            seed: number;
+            /** @description Model to use for generation */
+            model: components["schemas"]["RunwayModelEnum"];
+            /** @description Text prompt for the generation */
+            promptText?: string;
+            /** @description The number of seconds of duration for the output video. */
+            duration: components["schemas"]["RunwayDurationEnum"];
+            /** @description The resolution (aspect ratio) of the output video. Allowable values depend on the selected model. 1280:768 and 768:1280 are only supported for gen3a_turbo. */
+            ratio: components["schemas"]["RunwayAspectRatioEnum"];
+        };
+        RunwayImageToVideoResponse: {
+            /** @description Task ID */
+            id?: string;
+        };
+        RunwayTextToImageResponse: {
+            /** @description Task ID */
+            id?: string;
+        };
+        RunwayTaskStatusResponse: {
+            /** @description Task ID */
+            id: string;
+            /** @description Task status */
+            status: components["schemas"]["RunwayTaskStatusEnum"];
+            /**
+             * Format: date-time
+             * @description Task creation timestamp
+             */
+            createdAt: string;
+            /** @description Array of output video URLs */
+            output?: string[];
+            /**
+             * Format: float
+             * @description Float value between 0 and 1 representing the progress of the task. Only available if status is RUNNING.
+             */
+            progress?: number;
+        };
+        /**
+         * @description Possible statuses for a Runway task.
+         * @enum {string}
+         */
+        RunwayTaskStatusEnum: "SUCCEEDED" | "RUNNING" | "FAILED" | "PENDING" | "CANCELLED" | "THROTTLED";
+        /**
+         * @description Available Runway models for generation.
+         * @enum {string}
+         */
+        RunwayModelEnum: "gen4_turbo" | "gen3a_turbo";
+        /** @description Represents an image with its position in the video sequence. */
+        RunwayPromptImageDetailedObject: {
+            /** @description A HTTPS URL or data URI containing an encoded image. */
+            uri: string;
+            /**
+             * @description The position of the image in the output video. 'last' is currently supported for gen3a_turbo only.
+             * @enum {string}
+             */
+            position: "first" | "last";
+        };
+        /** @enum {integer} */
+        RunwayDurationEnum: 5 | 10;
+        /** @enum {string} */
+        RunwayAspectRatioEnum: "1280:720" | "720:1280" | "1104:832" | "832:1104" | "960:960" | "1584:672" | "1280:768" | "768:1280";
+        /** @enum {string} */
+        RunwayTextToImageAspectRatioEnum: "1920:1080" | "1080:1920" | "1024:1024" | "1360:768" | "1080:1080" | "1168:880" | "1440:1080" | "1080:1440" | "1808:768" | "2112:912";
+        /** @description Image(s) to use for the video generation. Can be a single URI or an array of image objects with positions. */
+        RunwayPromptImageObject: string | components["schemas"]["RunwayPromptImageDetailedObject"][];
+        OpenAIImageGenerationResponse: {
+            data?: {
+                /** @description Base64 encoded image data */
+                b64_json?: string;
+                /** @description URL of the image */
+                url?: string;
+                /** @description Revised prompt */
+                revised_prompt?: string;
+            }[];
+            usage?: {
+                input_tokens?: number;
+                input_tokens_details?: {
+                    text_tokens?: number;
+                    image_tokens?: number;
+                };
+                output_tokens?: number;
+                total_tokens?: number;
+            };
+        };
+        OpenAIImageGenerationRequest: {
+            /**
+             * @description The model to use for image generation
+             * @example dall-e-3
+             */
+            model?: string;
+            /**
+             * @description A text description of the desired image
+             * @example Draw a rocket in front of a blackhole in deep space
+             */
+            prompt: string;
+            /**
+             * @description The number of images to generate (1-10). Only 1 supported for dall-e-3.
+             * @example 1
+             */
+            n?: number;
+            /**
+             * @description The quality of the generated image
+             * @example high
+             * @enum {string}
+             */
+            quality?: "low" | "medium" | "high" | "standard" | "hd";
+            /**
+             * @description Size of the image (e.g., 1024x1024, 1536x1024, auto)
+             * @example 1024x1536
+             */
+            size?: string;
+            /**
+             * @description Format of the output image
+             * @example png
+             * @enum {string}
+             */
+            output_format?: "png" | "webp" | "jpeg";
+            /**
+             * @description Compression level for JPEG or WebP (0-100)
+             * @example 100
+             */
+            output_compression?: number;
+            /**
+             * @description Content moderation setting
+             * @example auto
+             * @enum {string}
+             */
+            moderation?: "low" | "auto";
+            /**
+             * @description Background transparency
+             * @example opaque
+             * @enum {string}
+             */
+            background?: "transparent" | "opaque";
+            /**
+             * @description Response format of image data
+             * @example b64_json
+             * @enum {string}
+             */
+            response_format?: "url" | "b64_json";
+            /**
+             * @description Style of the image (only for dall-e-3)
+             * @example vivid
+             * @enum {string}
+             */
+            style?: "vivid" | "natural";
+            /**
+             * @description A unique identifier for end-user monitoring
+             * @example user-1234
+             */
+            user?: string;
+        };
+        OpenAIImageEditRequest: {
+            /**
+             * @description The model to use for image editing
+             * @example gpt-image-1
+             */
+            model: string;
+            /**
+             * @description A text description of the desired edit
+             * @example Give the rocketship rainbow coloring
+             */
+            prompt: string;
+            /**
+             * @description The number of images to generate
+             * @example 1
+             */
+            n?: number;
+            /**
+             * @description The quality of the edited image
+             * @example low
+             */
+            quality?: string;
+            /**
+             * @description Size of the output image
+             * @example 1024x1024
+             */
+            size?: string;
+            /**
+             * @description Format of the output image
+             * @example png
+             * @enum {string}
+             */
+            output_format?: "png" | "webp" | "jpeg";
+            /**
+             * @description Compression level for JPEG or WebP (0-100)
+             * @example 100
+             */
+            output_compression?: number;
+            /**
+             * @description Content moderation setting
+             * @example auto
+             * @enum {string}
+             */
+            moderation?: "low" | "auto";
+            /**
+             * @description Background transparency
+             * @example opaque
+             */
+            background?: string;
+            /**
+             * @description A unique identifier for end-user monitoring
+             * @example user-1234
+             */
+            user?: string;
+        };
+        OpenAIVideoCreateRequest: {
+            /**
+             * @description Text prompt that describes the video to generate
+             * @example A calico cat playing a piano on stage
+             */
+            prompt: string;
+            /**
+             * Format: binary
+             * @description Optional image or video reference that guides generation
+             */
+            input_reference?: string;
+            /**
+             * @description The video generation model to use
+             * @default sora-2
+             * @enum {string}
+             */
+            model: "sora-2" | "sora-2-pro";
+            /**
+             * @description Clip duration in seconds
+             * @default 4
+             * @enum {string}
+             */
+            seconds: "4" | "8" | "12";
+            /**
+             * @description Output resolution formatted as width x height
+             * @default 720x1280
+             * @enum {string}
+             */
+            size: "720x1280" | "1280x720" | "1024x1792" | "1792x1024";
+        };
+        OpenAIVideoJob: {
+            /**
+             * @description Unique identifier for the video job
+             * @example video_123
+             */
+            id?: string;
+            /**
+             * @description The object type, which is always video
+             * @example video
+             * @enum {string}
+             */
+            object?: "video";
+            /**
+             * @description The video generation model that produced the job
+             * @example sora-2
+             */
+            model?: string;
+            /**
+             * @description Current lifecycle status of the video job
+             * @example queued
+             * @enum {string}
+             */
+            status?: "queued" | "in_progress" | "completed" | "failed";
+            /**
+             * @description Approximate completion percentage for the generation task
+             * @example 0
+             */
+            progress?: number;
+            /**
+             * @description Unix timestamp (seconds) for when the job was created
+             * @example 1712697600
+             */
+            created_at?: number;
+            /**
+             * @description Unix timestamp (seconds) for when the job completed, if finished
+             * @example 1712698600
+             */
+            completed_at?: number;
+            /**
+             * @description Unix timestamp (seconds) for when the downloadable assets expire, if set
+             * @example 1712784000
+             */
+            expires_at?: number;
+            /**
+             * @description The resolution of the generated video
+             * @example 1024x1808
+             */
+            size?: string;
+            /**
+             * @description Duration of the generated clip in seconds
+             * @example 8
+             */
+            seconds?: string;
+            /**
+             * @description Quality of the generated video
+             * @example standard
+             */
+            quality?: string;
+            /**
+             * @description Identifier of the source video if this video is a remix
+             * @example video_456
+             */
+            remixed_from_video_id?: string;
+            /** @description Error payload that explains why generation failed, if applicable */
+            error?: {
+                /** @description Error code */
+                code?: string;
+                /** @description Human-readable error message */
+                message?: string;
+            };
+        };
+        CustomerStorageResourceResponse: {
+            /** @description The signed URL to use for downloading the file from the specified path */
+            download_url?: string;
+            /** @description The signed URL to use for uploading the file to the specified path */
+            upload_url?: string;
+            /**
+             * Format: date-time
+             * @description When the signed URL will expire
+             */
+            expires_at?: string;
+            /** @description Whether an existing file with the same hash was found */
+            existing_file?: boolean;
+        };
+        /** @enum {string} */
+        Pikaffect: "Cake-ify" | "Crumble" | "Crush" | "Decapitate" | "Deflate" | "Dissolve" | "Explode" | "Eye-pop" | "Inflate" | "Levitate" | "Melt" | "Peel" | "Poke" | "Squish" | "Ta-da" | "Tear";
+        /** Body_generate_pikaffects_generate_pikaffects_post */
+        PikaBody_generate_pikaffects_generate_pikaffects_post: {
+            /**
+             * Image
+             * Format: binary
+             */
+            image?: string;
+            /** Pikaffect */
+            pikaffect?: components["schemas"]["Pikaffect"];
+            /** Prompttext */
+            promptText?: string;
+            /** Negativeprompt */
+            negativePrompt?: string;
+            /** Seed */
+            seed?: number;
+        };
+        /** GenerateResponse */
+        PikaGenerateResponse: {
+            /** Video Id */
+            video_id: string;
+        };
+        /** HTTPValidationError */
+        PikaHTTPValidationError: {
+            /** Detail */
+            detail?: components["schemas"]["PikaValidationError"][];
+        };
+        /** Body_generate_pikadditions_generate_pikadditions_post */
+        PikaBody_generate_pikadditions_generate_pikadditions_post: {
+            /**
+             * Video
+             * Format: binary
+             */
+            video?: string;
+            /**
+             * Image
+             * Format: binary
+             */
+            image?: string;
+            /** Prompttext */
+            promptText?: string;
+            /** Negativeprompt */
+            negativePrompt?: string;
+            /** Seed */
+            seed?: number;
+        };
+        /** Body_generate_pikaswaps_generate_pikaswaps_post */
+        PikaBody_generate_pikaswaps_generate_pikaswaps_post: {
+            /**
+             * Video
+             * Format: binary
+             */
+            video?: string;
+            /** Image */
+            image?: string;
+            /** Prompttext */
+            promptText?: string;
+            /**
+             * Modifyregionmask
+             * @description A mask image that specifies the region to modify, where the mask is white and the background is black
+             */
+            modifyRegionMask?: string;
+            /**
+             * Modifyregionroi
+             * @description Plaintext description of the object / region to modify
+             */
+            modifyRegionRoi?: string;
+            /** Negativeprompt */
+            negativePrompt?: string;
+            /** Seed */
+            seed?: number;
+        };
+        /** Body_generate_2_2_t2v_generate_2_2_t2v_post */
+        PikaBody_generate_2_2_t2v_generate_2_2_t2v_post: {
+            /** Prompttext */
+            promptText: string;
+            /** Negativeprompt */
+            negativePrompt?: string | null;
+            /** Seed */
+            seed?: number | null;
+            /** Resolution */
+            resolution?: components["schemas"]["PikaResolutionEnum"];
+            /** Duration */
+            duration?: components["schemas"]["PikaDurationEnum"];
+            /**
+             * Aspectratio
+             * Format: float
+             * @description Aspect ratio (width / height)
+             * @default 1.7777777777777777
+             */
+            aspectRatio: number;
+        };
+        /** Body_generate_2_2_i2v_generate_2_2_i2v_post */
+        PikaBody_generate_2_2_i2v_generate_2_2_i2v_post: {
+            /**
+             * Image
+             * Format: binary
+             */
+            image?: string | null;
+            /** Prompttext */
+            promptText?: string | null;
+            /** Negativeprompt */
+            negativePrompt?: string | null;
+            /** Seed */
+            seed?: number | null;
+            /** Resolution */
+            resolution?: components["schemas"]["PikaResolutionEnum"];
+            /** Duration */
+            duration?: components["schemas"]["PikaDurationEnum"];
+        };
+        /** Body_generate_2_2_c2v_generate_2_2_pikascenes_post */
+        PikaBody_generate_2_2_c2v_generate_2_2_pikascenes_post: {
+            /** Images */
+            images?: string[];
+            /**
+             * Ingredientsmode
+             * @enum {string}
+             */
+            ingredientsMode: "creative" | "precise";
+            /** Prompttext */
+            promptText?: string;
+            /** Negativeprompt */
+            negativePrompt?: string;
+            /** Seed */
+            seed?: number;
+            /**
+             * Resolution
+             * @default 1080p
+             */
+            resolution: string;
+            /**
+             * Duration
+             * @default 5
+             */
+            duration: number;
+            /**
+             * Aspectratio
+             * @description Aspect ratio (width / height)
+             */
+            aspectRatio?: number;
+        };
+        /** Body_generate_2_2_keyframe_generate_2_2_pikaframes_post */
+        PikaBody_generate_2_2_keyframe_generate_2_2_pikaframes_post: {
+            /**
+             * Keyframes
+             * @description Array of keyframe images
+             */
+            keyFrames?: string[];
+            /** Prompttext */
+            promptText: string;
+            /** Negativeprompt */
+            negativePrompt?: string;
+            /** Seed */
+            seed?: number;
+            /** Resolution */
+            resolution?: components["schemas"]["PikaResolutionEnum"];
+            /** Duration */
+            duration?: number;
+        };
+        /** VideoResponse */
+        PikaVideoResponse: {
+            /** Id */
+            id: string;
+            /**
+             * Status
+             * @description The status of the video
+             */
+            status: components["schemas"]["PikaStatusEnum"];
+            /**
+             * Url
+             * @default null
+             */
+            url: string | null;
+            /**
+             * Progress
+             * @default null
+             */
+            progress: number | null;
+        };
+        /** @enum {string} */
+        PikaStatusEnum: "queued" | "started" | "finished";
+        /** ValidationError */
+        PikaValidationError: {
+            /** Location */
+            loc: (string | number)[];
+            /** Message */
+            msg: string;
+            /** Error Type */
+            type: string;
+        };
+        /**
+         * @default 1080p
+         * @enum {string}
+         */
+        PikaResolutionEnum: "1080p" | "720p";
+        /**
+         * @default 5
+         * @enum {integer}
+         */
+        PikaDurationEnum: 5 | 10;
+        /**
+         * @description RGB color values
+         * @example {
+         *       "rgb": [
+         *         255,
+         *         0,
+         *         0
+         *       ]
+         *     }
+         */
+        RGBColor: {
+            rgb: number[];
+        };
+        /**
+         * @example {
+         *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
+         *       "name": "internal_error",
+         *       "errors": [
+         *         "An unexpected server error has occurred, please try again later."
+         *       ]
+         *     }
+         */
+        StabilityError: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       {
+             *         "some-field": "is required"
+             *       }
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @description The name of your application, used to help us communicate app-specific debugging or moderation issues to you.
+         * @example my-awesome-app
+         */
+        StabilityStabilityClientID: string;
+        /**
+         * @description A unique identifier for your end user. Used to help us communicate user-specific debugging or moderation issues to you. Feel free to obfuscate this value to protect user privacy.
+         * @example DiscordUser#9999
+         */
+        StabilityStabilityClientUserID: string;
+        /**
+         * @description The version of your application, used to help us communicate version-specific debugging or moderation issues to you.
+         * @example 1.2.1
+         */
+        StabilityStabilityClientVersion: string;
+        /**
+         * @description Your request was flagged by our content moderation system.
+         * @example {
+         *       "id": "ed14db44362126aab3cbd25cca51ffe3",
+         *       "name": "content_moderation",
+         *       "errors": [
+         *         "Your request was flagged by our content moderation system, as a result your request was denied and you were not charged."
+         *       ]
+         *     }
+         */
+        StabilityContentModerationResponse: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Our content moderation system has flagged some part of your request and subsequently denied it.  You were not charged for this request.  While this may at times be frustrating, it is necessary to maintain the integrity of our platform and ensure a safe experience for all users. If you would like to provide feedback, please use the [Support Form](https://kb.stability.ai/knowledge-base/kb-tickets/new).
+             * @enum {string}
+             */
+            name: "content_moderation";
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        ImagenGenerateImageRequest: {
+            instances: components["schemas"]["ImagenImageGenerationInstance"][];
+            parameters: components["schemas"]["ImagenImageGenerationParameters"];
+        };
+        ImagenGenerateImageResponse: {
+            predictions?: components["schemas"]["ImagenImagePrediction"][];
+        };
+        ImagenImageGenerationInstance: {
+            /** @description Text prompt for image generation */
+            prompt: string;
+        };
+        ImagenImageGenerationParameters: {
+            sampleCount?: number;
+            /** Format: uint32 */
+            seed?: number;
+            addWatermark?: boolean;
+            /** @enum {string} */
+            aspectRatio?: "1:1" | "9:16" | "16:9" | "3:4" | "4:3";
+            enhancePrompt?: boolean;
+            includeRaiReason?: boolean;
+            includeSafetyAttributes?: boolean;
+            outputOptions?: components["schemas"]["ImagenOutputOptions"];
+            /** @enum {string} */
+            personGeneration?: "dont_allow" | "allow_adult" | "allow_all";
+            /** @enum {string} */
+            safetySetting?: "block_most" | "block_some" | "block_few" | "block_fewest";
+            /** Format: uri */
+            storageUri?: string;
+        };
+        ImagenImagePrediction: {
+            /** @description MIME type of the generated image */
+            mimeType?: string;
+            /** @description Enhanced or rewritten prompt used to generate this image */
+            prompt?: string;
+            /**
+             * Format: byte
+             * @description Base64-encoded image content
+             */
+            bytesBase64Encoded?: string;
+        };
+        ImagenOutputOptions: {
+            /** @enum {string} */
+            mimeType?: "image/png" | "image/jpeg";
+            compressionQuality?: number;
+        };
+        /**
+         * @description The rendering speed setting that controls the trade-off between generation speed and quality
+         * @default DEFAULT
+         * @enum {string}
+         */
+        RenderingSpeed: "DEFAULT" | "TURBO" | "QUALITY";
+        /**
+         * @default GENERAL
+         * @enum {string}
+         */
+        IdeogramStyleType: "AUTO" | "GENERAL" | "REALISTIC" | "DESIGN" | "FICTION";
+        /**
+         * @description Controls the likelihood of creating additional details not heavily conditioned by the init image.
+         * @default 0.35
+         */
+        StabilityCreativity: number;
+        /**
+         * @description The `id` of a generation, typically used for async generations, that can be used to check the status of the generation or retrieve the result.
+         * @example a6dc6c6e20acda010fe14d71f180658f2896ed9b4ec25aa99a6ff06c796987c4
+         */
+        StabilityGenerationID: string;
+        StabilityImageGenerationSD3_Request: {
+            /**
+             * @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines
+             *     elements, colors, and subjects will lead to better results.
+             */
+            prompt: string;
+            /**
+             * GenerationMode
+             * @description Controls whether this is a text-to-image or image-to-image generation, which affects which parameters are required:
+             *     - **text-to-image** requires only the `prompt` parameter
+             *     - **image-to-image** requires the `prompt`, `image`, and `strength` parameters
+             * @default text-to-image
+             * @enum {string}
+             */
+            mode: "text-to-image" | "image-to-image";
+            /**
+             * Format: binary
+             * @description The image to use as the starting point for the generation.
+             *
+             *     Supported formats:
+             *
+             *
+             *
+             *       - jpeg
+             *       - png
+             *       - webp
+             *
+             *     Supported dimensions:
+             *
+             *
+             *
+             *       - Every side must be at least 64 pixels
+             *
+             *     > **Important:** This parameter is only valid for **image-to-image** requests.
+             */
+            image?: string;
+            /**
+             * @description Sometimes referred to as _denoising_, this parameter controls how much influence the
+             *     `image` parameter has on the generated image.  A value of 0 would yield an image that
+             *     is identical to the input.  A value of 1 would be as if you passed in no image at all.
+             *
+             *     > **Important:** This parameter is only valid for **image-to-image** requests.
+             */
+            strength?: number;
+            /**
+             * @description Controls the aspect ratio of the generated image. Defaults to 1:1.
+             *
+             *     > **Important:** This parameter is only valid for **text-to-image** requests.
+             * @default 1:1
+             * @enum {string}
+             */
+            aspect_ratio: "21:9" | "16:9" | "3:2" | "5:4" | "1:1" | "4:5" | "2:3" | "9:16" | "9:21";
+            /**
+             * @description The model to use for generation.
+             *
+             *     - `sd3.5-large` requires 6.5 credits per generation
+             *     - `sd3.5-large-turbo` requires 4 credits per generation
+             *     - `sd3.5-medium` requires 3.5 credits per generation
+             *     - As of the April 17, 2025, `sd3-large`, `sd3-large-turbo` and `sd3-medium`
+             *
+             *
+             *
+             *       are re-routed to their `sd3.5-[model version]` equivalent, at the same price.
+             * @default sd3.5-large
+             * @enum {string}
+             */
+            model: "sd3.5-large" | "sd3.5-large-turbo" | "sd3.5-medium";
+            /**
+             * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
+             * @default 0
+             */
+            seed: number;
+            /**
+             * @description Dictates the `content-type` of the generated image.
+             * @default png
+             * @enum {string}
+             */
+            output_format: "png" | "jpeg";
+            /**
+             * @description Guides the image model towards a particular style.
+             * @enum {string}
+             */
+            style_preset?: "enhance" | "anime" | "photographic" | "digital-art" | "comic-book" | "fantasy-art" | "line-art" | "analog-film" | "neon-punk" | "isometric" | "low-poly" | "origami" | "modeling-compound" | "cinematic" | "3d-model" | "pixel-art" | "tile-texture";
+            /**
+             * @description Keywords of what you **do not** wish to see in the output image.
+             *     This is an advanced feature.
+             */
+            negative_prompt?: string;
+            /** @description How strictly the diffusion process adheres to the prompt text (higher values keep your image closer to your prompt). The _Large_ and _Medium_ models use a default of `4`. The _Turbo_ model uses a default of `1`. */
+            cfg_scale?: number;
+        };
+        StabilityImageGenrationSD3_Response_200: {
+            /**
+             * @description The generated image, encoded to base64.
+             * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+             */
+            image: string;
+            /**
+             * @description The seed used as random noise for this generation.
+             * @default 0
+             * @example 343940597
+             */
+            seed: number;
+            /**
+             * @description The reason the generation finished.
+             *
+             *     - `SUCCESS` = successful generation.
+             *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+             *     policy and has been blurred as a result.
+             * @example SUCCESS
+             * @enum {string}
+             */
+            finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+        };
+        StabilityImageGenrationSD3_Response_400: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
+         *       "name": "payload_too_large",
+         *       "errors": [
+         *         "body: payloads cannot be larger than 10MiB in size"
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationSD3_Response_413: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityImageGenrationSD3_Response_422: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "rate_limit_exceeded",
+         *       "name": "rate_limit_exceeded",
+         *       "errors": [
+         *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationSD3_Response_429: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
+         *       "name": "internal_error",
+         *       "errors": [
+         *         "An unexpected server error has occurred, please try again later."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationSD3_Response_500: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityImageGenrationUpscaleConservative_Request: {
+            /**
+             * Format: binary
+             * @description The image you wish to upscale.
+             *
+             *     Supported Formats:
+             *     - jpeg
+             *     - png
+             *     - webp
+             *
+             *     Validation Rules:
+             *     - Every side must be at least 64 pixels
+             *     - Total pixel count must be between 4,096 and 9,437,184 pixels
+             *     - The aspect ratio must be between 1:2.5 and 2.5:1
+             * @example ./some/image.png
+             */
+            image: string;
+            /**
+             * @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines
+             *     elements, colors, and subjects will lead to better results.
+             *
+             *     To control the weight of a given word use the format `(word:weight)`,
+             *     where `word` is the word you'd like to control the weight of and `weight`
+             *     is a value between 0 and 1. For example: `The sky was a crisp (blue:0.3) and (green:0.8)`
+             *     would convey a sky that was blue and green, but more green than blue.
+             */
+            prompt: string;
+            /**
+             * @description A blurb of text describing what you **do not** wish to see in the output image.
+             *     This is an advanced feature.
+             */
+            negative_prompt?: string;
+            /**
+             * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
+             * @default 0
+             */
+            seed: number;
+            /**
+             * @description Dictates the `content-type` of the generated image.
+             * @default png
+             * @enum {string}
+             */
+            output_format: "jpeg" | "png" | "webp";
+            creativity?: components["schemas"]["StabilityCreativity"];
+        };
+        StabilityImageGenrationUpscaleConservative_Response_200: {
+            /**
+             * @description The generated image, encoded to base64.
+             * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+             */
+            image: string;
+            /**
+             * @description The seed used as random noise for this generation.
+             * @default 0
+             * @example 343940597
+             */
+            seed: number;
+            /**
+             * @description The reason the generation finished.
+             *
+             *     - `SUCCESS` = successful generation.
+             *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+             *     policy and has been blurred as a result.
+             * @example SUCCESS
+             * @enum {string}
+             */
+            finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+        };
+        StabilityImageGenrationUpscaleConservative_Response_400: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
+         *       "name": "payload_too_large",
+         *       "errors": [
+         *         "body: payloads cannot be larger than 10MiB in size"
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleConservative_Response_413: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityImageGenrationUpscaleConservative_Response_422: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "rate_limit_exceeded",
+         *       "name": "rate_limit_exceeded",
+         *       "errors": [
+         *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleConservative_Response_429: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
+         *       "name": "internal_error",
+         *       "errors": [
+         *         "An unexpected server error has occurred, please try again later."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleConservative_Response_500: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityImageGenrationUpscaleCreative_Request: {
+            /**
+             * Format: binary
+             * @description The image you wish to upscale.
+             *
+             *     Supported Formats:
+             *     - jpeg
+             *     - png
+             *     - webp
+             *
+             *     Validation Rules:
+             *     - Every side must be at least 64 pixels
+             *     - Total pixel count must be between 4,096 and 1,048,576 pixels
+             * @example ./some/image.png
+             */
+            image: string;
+            /**
+             * @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines
+             *     elements, colors, and subjects will lead to better results.
+             *
+             *     To control the weight of a given word use the format `(word:weight)`,
+             *     where `word` is the word you'd like to control the weight of and `weight`
+             *     is a value between 0 and 1. For example: `The sky was a crisp (blue:0.3) and (green:0.8)`
+             *     would convey a sky that was blue and green, but more green than blue.
+             */
+            prompt: string;
+            /**
+             * @description A blurb of text describing what you **do not** wish to see in the output image.
+             *     This is an advanced feature.
+             */
+            negative_prompt?: string;
+            /**
+             * @description Dictates the `content-type` of the generated image.
+             * @default png
+             * @enum {string}
+             */
+            output_format: "jpeg" | "png" | "webp";
+            /**
+             * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
+             * @default 0
+             */
+            seed: number;
+            /**
+             * @description Indicates how creative the model should be when upscaling an image.
+             *     Higher values will result in more details being added to the image during upscaling.
+             * @default 0.3
+             */
+            creativity: number;
+            /**
+             * @description Guides the image model towards a particular style.
+             * @enum {string}
+             */
+            style_preset?: "enhance" | "anime" | "photographic" | "digital-art" | "comic-book" | "fantasy-art" | "line-art" | "analog-film" | "neon-punk" | "isometric" | "low-poly" | "origami" | "modeling-compound" | "cinematic" | "3d-model" | "pixel-art" | "tile-texture";
+        };
+        StabilityImageGenrationUpscaleCreative_Response_200: {
+            id: components["schemas"]["StabilityGenerationID"];
+        };
+        StabilityImageGenrationUpscaleCreative_Response_400: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
+         *       "name": "payload_too_large",
+         *       "errors": [
+         *         "body: payloads cannot be larger than 10MiB in size"
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleCreative_Response_413: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityImageGenrationUpscaleCreative_Response_422: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "rate_limit_exceeded",
+         *       "name": "rate_limit_exceeded",
+         *       "errors": [
+         *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleCreative_Response_429: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
+         *       "name": "internal_error",
+         *       "errors": [
+         *         "An unexpected server error has occurred, please try again later."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleCreative_Response_500: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityImageGenrationUpscaleFast_Request: {
+            /**
+             * Format: binary
+             * @description The image you wish to upscale.
+             *
+             *     Supported Formats:
+             *     - jpeg
+             *     - png
+             *     - webp
+             *
+             *     Validation Rules:
+             *     - Width must be between 32 and 1,536 pixels
+             *     - Height must be between 32 and 1,536 pixels
+             *     - Total pixel count must be between 1,024 and 1,048,576 pixels
+             * @example ./some/image.png
+             */
+            image: string;
+            /**
+             * @description Dictates the `content-type` of the generated image.
+             * @default png
+             * @enum {string}
+             */
+            output_format: "jpeg" | "png" | "webp";
+        };
+        StabilityImageGenrationUpscaleFast_Response_200: {
+            /**
+             * @description The generated image, encoded to base64.
+             * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+             */
+            image: string;
+            /**
+             * @description The seed used as random noise for this generation.
+             * @default 0
+             * @example 343940597
+             */
+            seed: number;
+            /**
+             * @description The reason the generation finished.
+             *
+             *     - `SUCCESS` = successful generation.
+             *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+             *     policy and has been blurred as a result.
+             * @example SUCCESS
+             * @enum {string}
+             */
+            finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+        };
+        StabilityImageGenrationUpscaleFast_Response_400: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "4212a4b66fbe1cedca4bf2133d35dca5",
+         *       "name": "payload_too_large",
+         *       "errors": [
+         *         "body: payloads cannot be larger than 10MiB in size"
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleFast_Response_413: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityImageGenrationUpscaleFast_Response_422: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /**
+         * @example {
+         *       "id": "rate_limit_exceeded",
+         *       "name": "rate_limit_exceeded",
+         *       "errors": [
+         *         "You have exceeded the rate limit of 150 requests within a 10 second period, and have been timed out for 60 seconds."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleFast_Response_429: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        StabilityGetResultResponse_202: {
+            /** @enum {string} */
+            status?: "in-progress";
+            /**
+             * @description The ID of the generation result.
+             * @example 1234567890
+             */
+            id?: string;
+        };
+        APIKey: {
+            id?: string;
+            name?: string;
+            description?: string;
+            key_prefix?: string;
+            /** Format: date-time */
+            created_at?: string;
+        };
+        APIKeyWithPlaintext: components["schemas"]["APIKey"] & {
+            /** @description The full API key (only returned at creation) */
+            plaintext_key?: string;
+        };
+        GeminiGenerateContentRequest: {
+            contents: components["schemas"]["GeminiContent"][];
+            tools?: components["schemas"]["GeminiTool"][];
+            safetySettings?: components["schemas"]["GeminiSafetySetting"][];
+            generationConfig?: components["schemas"]["GeminiGenerationConfig"];
+            systemInstruction?: components["schemas"]["GeminiSystemInstructionContent"];
+            videoMetadata?: components["schemas"]["GeminiVideoMetadata"];
+        };
+        GeminiGenerateContentResponse: {
+            candidates?: components["schemas"]["GeminiCandidate"][];
+            promptFeedback?: components["schemas"]["GeminiPromptFeedback"];
+            usageMetadata?: components["schemas"]["GeminiUsageMetadata"];
+        };
+        GeminiUsageMetadata: {
+            /** @description Number of tokens in the request. When cachedContent is set, this is still the total effective prompt size meaning this includes the number of tokens in the cached content. */
+            promptTokenCount?: number;
+            /** @description Number of tokens in the response(s). */
+            candidatesTokenCount?: number;
+            /** @description Number of tokens present in tool-use prompt(s). */
+            toolUsePromptTokenCount?: number;
+            /** @description Number of tokens present in thoughts output. */
+            thoughtsTokenCount?: number;
+            /** @description Output only. Number of tokens in the cached part in the input (the cached content). */
+            cachedContentTokenCount?: number;
+            /** @description Breakdown of prompt tokens by modality. */
+            promptTokensDetails?: components["schemas"]["ModalityTokenCount"][];
+            /** @description Breakdown of candidate tokens by modality. */
+            candidatesTokensDetails?: components["schemas"]["ModalityTokenCount"][];
+        };
+        ModalityTokenCount: {
+            modality?: components["schemas"]["Modality"];
+            /** @description Number of tokens for the given modality. */
+            tokenCount?: number;
+        };
+        /**
+         * @description Type of input or output content modality.
+         * @enum {string}
+         */
+        Modality: "MODALITY_UNSPECIFIED" | "TEXT" | "IMAGE" | "VIDEO" | "AUDIO" | "DOCUMENT";
+        /** @description Available for gemini-2.0-flash and gemini-2.0-flash-lite. Instructions for the model to steer it toward better performance. For example, "Answer as concisely as possible" or "Don't use technical terms in your response". The text strings count toward the token limit. The role field of systemInstruction is ignored and doesn't affect the performance of the model. Note: Only text should be used in parts and content in each part should be in a separate paragraph. */
+        GeminiSystemInstructionContent: {
+            /**
+             * @description The identity of the entity that creates the message. The following values are supported: user: This indicates that the message is sent by a real person, typically a user-generated message. model: This indicates that the message is generated by the model. The model value is used to insert messages from the model into the conversation during multi-turn conversations. For non-multi-turn conversations, this field can be left blank or unset.
+             * @example user
+             * @enum {string}
+             */
+            role: "user" | "model";
+            /** @description A list of ordered parts that make up a single message. Different parts may have different IANA MIME types. For limits on the inputs, such as the maximum number of tokens or the number of images, see the model specifications on the Google models page. */
+            parts: components["schemas"]["GeminiTextPart"][];
+        };
+        /** @description The content of the current conversation with the model. For single-turn queries, this is a single instance. For multi-turn queries, this is a repeated field that contains conversation history and the latest request. */
+        GeminiContent: {
+            /**
+             * @example user
+             * @enum {string}
+             */
+            role: "user" | "model";
+            parts: components["schemas"]["GeminiPart"][];
+        };
+        /** @description A piece of code that enables the system to interact with external systems to perform an action, or set of actions, outside of knowledge and scope of the model. See Function calling. */
+        GeminiTool: {
+            functionDeclarations?: components["schemas"]["GeminiFunctionDeclaration"][];
+        };
+        /** @description Per request settings for blocking unsafe content. Enforced on GenerateContentResponse.candidates. */
+        GeminiSafetySetting: {
+            category: components["schemas"]["GeminiSafetyCategory"];
+            threshold: components["schemas"]["GeminiSafetyThreshold"];
+        };
+        /** @enum {string} */
+        GeminiSafetyCategory: "HARM_CATEGORY_SEXUALLY_EXPLICIT" | "HARM_CATEGORY_HATE_SPEECH" | "HARM_CATEGORY_HARASSMENT" | "HARM_CATEGORY_DANGEROUS_CONTENT";
+        /** @enum {string} */
+        GeminiSafetyThreshold: "OFF" | "BLOCK_NONE" | "BLOCK_LOW_AND_ABOVE" | "BLOCK_MEDIUM_AND_ABOVE" | "BLOCK_ONLY_HIGH";
+        GeminiGenerationConfig: {
+            /**
+             * Format: float
+             * @description The temperature is used for sampling during response generation, which occurs when topP and topK are applied. Temperature controls the degree of randomness in token selection. Lower temperatures are good for prompts that require a less open-ended or creative response, while higher temperatures can lead to more diverse or creative results. A temperature of 0 means that the highest probability tokens are always selected. In this case, responses for a given prompt are mostly deterministic, but a small amount of variation is still possible. If the model returns a response that's too generic, too short, or the model gives a fallback response, try increasing the temperature
+             * @default 1
+             */
+            temperature: number;
+            /**
+             * Format: float
+             * @description If specified, nucleus sampling is used.
+             *     Top-P changes how the model selects tokens for output. Tokens are selected from the most (see top-K) to least probable until the sum of their probabilities equals the top-P value. For example, if tokens A, B, and C have a probability of 0.3, 0.2, and 0.1 and the top-P value is 0.5, then the model will select either A or B as the next token by using temperature and excludes C as a candidate.
+             *     Specify a lower value for less random responses and a higher value for more random responses.
+             * @default 0.95
+             */
+            topP: number;
+            /**
+             * @description Top-K changes how the model selects tokens for output. A top-K of 1 means the next selected token is the most probable among all tokens in the model's vocabulary. A top-K of 3 means that the next token is selected from among the 3 most probable tokens by using temperature.
+             * @default 40
+             * @example 40
+             */
+            topK: number;
+            /**
+             * @description Maximum number of tokens that can be generated in the response. A token is approximately 4 characters. 100 tokens correspond to roughly 60-80 words.
+             * @example 2048
+             */
+            maxOutputTokens?: number;
+            /**
+             * @description When seed is fixed to a specific value, the model makes a best effort to provide the same response for repeated requests. Deterministic output isn't guaranteed. Also, changing the model or parameter settings, such as the temperature, can cause variations in the response even when you use the same seed value. By default, a random seed value is used. Available for the following models:, gemini-2.5-flash, gemini-2.5-pro, gemini-2.5-flash-preview-04-1, gemini-2.5-pro-preview-05-0, gemini-2.0-flash-lite-00, gemini-2.0-flash-001
+             * @example 343940597
+             */
+            seed?: number;
+            stopSequences?: string[];
+            responseModalities?: ("TEXT" | "IMAGE")[];
+            /** @description Configuration for image generation */
+            imageConfig?: {
+                /** @description Aspect ratio for generated images */
+                aspectRatio?: string;
+            };
+        };
+        /** @description For video input, the start and end offset of the video in Duration format. For example, to specify a 10 second clip starting at 1:00, set "startOffset": { "seconds": 60 } and "endOffset": { "seconds": 70 }. The metadata should only be specified while the video data is presented in inlineData or fileData. */
+        GeminiVideoMetadata: {
+            startOffset?: components["schemas"]["GeminiOffset"];
+            endOffset?: components["schemas"]["GeminiOffset"];
+        };
+        /** @description Represents a duration offset for video timeline positions. */
+        GeminiOffset: {
+            /**
+             * @description Signed seconds of the span of time. Must be from -315,576,000,000 to +315,576,000,000 inclusive.
+             * @example 60
+             */
+            seconds?: number;
+            /**
+             * @description Signed fractions of a second at nanosecond resolution. Negative second values with fractions must still have non-negative nanos values.
+             * @example 0
+             */
+            nanos?: number;
+        };
+        GeminiCandidate: {
+            content?: components["schemas"]["GeminiContent"];
+            finishReason?: string;
+            safetyRatings?: components["schemas"]["GeminiSafetyRating"][];
+            citationMetadata?: components["schemas"]["GeminiCitationMetadata"];
+        };
+        /**
+         * @description The media type of the file specified in the data or fileUri fields. Acceptable values include the following. For gemini-2.0-flash-lite and gemini-2.0-flash, the maximum length of an audio file is 8.4 hours and the maximum length of a video file (without audio) is one hour. For more information, see Gemini audio and video requirements. Text files must be UTF-8 encoded. The contents of the text file count toward the token limit. There is no limit on image resolution.
+         * @enum {string}
+         */
+        GeminiMimeType: "application/pdf" | "audio/mpeg" | "audio/mp3" | "audio/wav" | "image/png" | "image/jpeg" | "image/webp" | "text/plain" | "video/mov" | "video/mpeg" | "video/mp4" | "video/mpg" | "video/avi" | "video/wmv" | "video/mpegps" | "video/flv";
+        GeminiPromptFeedback: {
+            safetyRatings?: components["schemas"]["GeminiSafetyRating"][];
+            blockReason?: string;
+            blockReasonMessage?: string;
+        };
+        GeminiTextPart: {
+            /**
+             * @description A text prompt or code snippet.
+             * @example Answer as concisely as possible
+             */
+            text?: string;
+        };
+        GeminiPart: {
+            /**
+             * @description A text prompt or code snippet.
+             * @example Write a story about a robot learning to paint
+             */
+            text?: string;
+            inlineData?: components["schemas"]["GeminiInlineData"];
+        };
+        GeminiFunctionDeclaration: {
+            name: string;
+            description?: string;
+            /** @description JSON schema for the function parameters */
+            parameters: Record<string, never>;
+        };
+        GeminiSafetyRating: {
+            category?: components["schemas"]["GeminiSafetyCategory"];
+            /**
+             * @description The probability that the content violates the specified safety category
+             * @enum {string}
+             */
+            probability?: "NEGLIGIBLE" | "LOW" | "MEDIUM" | "HIGH" | "UNKNOWN";
+        };
+        GeminiCitationMetadata: {
+            citations?: components["schemas"]["GeminiCitation"][];
+        };
+        /** @description Inline data in raw bytes. For gemini-2.0-flash-lite and gemini-2.0-flash, you can specify up to 3000 images by using inlineData. */
+        GeminiInlineData: {
+            mimeType?: components["schemas"]["GeminiMimeType"];
+            /**
+             * Format: byte
+             * @description The base64 encoding of the image, PDF, or video to include inline in the prompt. When including media inline, you must also specify the media type (mimeType) of the data. Size limit: 20MB
+             */
+            data?: string;
+        };
+        GeminiCitation: {
+            startIndex?: number;
+            endIndex?: number;
+            uri?: string;
+            title?: string;
+            license?: string;
+            /** Format: date */
+            publicationDate?: string;
+            authors?: string[];
+        };
+        Rodin3DGenerateRequest: {
+            /** @description The reference images to generate 3D Assets. */
+            images: string;
+            /** @description Seed. */
+            seed?: number;
+            tier?: components["schemas"]["RodinTierType"];
+            material?: components["schemas"]["RodinMaterialType"];
+            quality?: components["schemas"]["RodinQualityType"];
+            mesh_mode?: components["schemas"]["RodinMeshModeType"];
+        };
+        /**
+         * @description Rodin Tier para options
+         * @enum {string}
+         */
+        RodinTierType: "Regular" | "Sketch" | "Detail" | "Smooth";
+        /**
+         * @description Rodin Material para options
+         * @enum {string}
+         */
+        RodinMaterialType: "PBR" | "Shaded";
+        /**
+         * @description Rodin Quality para options
+         * @enum {string}
+         */
+        RodinQualityType: "extra-low" | "low" | "medium" | "high";
+        /**
+         * @description Rodin Mesh_Mode para options
+         * @enum {string}
+         */
+        RodinMeshModeType: "Quad" | "Raw";
+        Rodin3DCheckStatusRequest: {
+            /** @description subscription from generate endpoint */
+            subscription_key: string;
+        };
+        Rodin3DDownloadRequest: {
+            /** @description Task UUID */
+            task_uuid: string;
+        };
+        Rodin3DGenerateResponse: {
+            /** @description message */
+            message?: string;
+            /** @description prompt */
+            prompt?: string;
+            /** @description Time */
+            submit_time?: string;
+            /** @description Task UUID */
+            uuid?: string;
+            jobs?: components["schemas"]["RodinGenerateJobsData"];
+        };
+        RodinGenerateJobsData: {
+            /** @description subjobs uuid. */
+            uuids?: string[];
+            /** @description Subscription Key. */
+            subscription_key?: string;
+        };
+        Rodin3DCheckStatusResponse: {
+            /** @description Details for the generation status. */
+            jobs?: components["schemas"]["RodinCheckStatusJobItem"][];
+        };
+        RodinCheckStatusJobItem: {
+            /** @description sub uuid */
+            uuid?: string;
+            status?: components["schemas"]["RodinStatusOptions"];
+        };
+        /** @enum {string} */
+        RodinStatusOptions: "Done" | "Failed" | "Generating" | "Waiting";
+        Rodin3DDownloadResponse: {
+            list?: components["schemas"]["RodinResourceItem"][];
+        };
+        RodinResourceItem: {
+            /** @description Download url */
+            url?: string;
+            /** @description File name */
+            name?: string;
+        };
+        CreateAPIKeyRequest: {
+            name: string;
+            description?: string;
+        };
+        /**
+         * @example {
+         *       "id": "2a1b2d4eafe2bc6ab4cd4d5c6133f513",
+         *       "name": "internal_error",
+         *       "errors": [
+         *         "An unexpected server error has occurred, please try again later."
+         *       ]
+         *     }
+         */
+        StabilityImageGenrationUpscaleFast_Response_500: {
+            /**
+             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new)
+             *     you file, as it will greatly assist us in diagnosing the root cause of the problem.
+             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+             */
+            id: string;
+            /**
+             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+             * @example bad_request
+             */
+            name: string;
+            /**
+             * @description One or more error messages indicating what went wrong.
+             * @example [
+             *       "some-field: is required"
+             *     ]
+             */
+            errors: string[];
+        };
+        /** @description Request parameters for Stable Audio 2.5 text-to-audio generation */
+        StableAudio25TextToAudioRequest: {
+            /** @description What you wish the output audio to be. A strong, descriptive prompt that clearly defines instruments, moods, styles, and genre will lead to better results. */
+            prompt: string;
+            /**
+             * @description Controls the duration in seconds of the generated audio.
+             * @default 190
+             */
+            duration: number;
+            /**
+             * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass 0 to use a random seed.)
+             * @default 0
+             */
+            seed: number;
+            /**
+             * @description Controls the number of sampling steps. For stable-audio-2.5 accepts steps between 4 and 8 (defaults to 8).
+             * @default 8
+             */
+            steps: number;
+            /**
+             * @description How strictly the diffusion process adheres to the prompt text (higher values make your audio closer to your prompt). Defaults to 1 for stable-audio-2.5.
+             * @default 1
+             */
+            cfg_scale: number;
+            model: components["schemas"]["StableAudio25Model"];
+            output_format?: components["schemas"]["StableAudio25OutputFormat"];
+        };
+        /** @description Request parameters for Stable Audio audio-to-audio transformation */
+        StableAudio25AudioToAudioRequest: {
+            /** @description What you wish the output audio to be. A strong, descriptive prompt that clearly defines instruments, moods, styles, and genre will lead to better results. */
+            prompt: string;
+            /**
+             * Format: binary
+             * @description The audio to be used as the starting point for the generation. Supported formats - mp3, wav. Audio must be between 6 and 190 seconds long.
+             */
+            audio: string;
+            /**
+             * @description Controls the duration in seconds of the generated audio.
+             * @default 190
+             */
+            duration: number;
+            /**
+             * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass 0 to use a random seed.)
+             * @default 0
+             */
+            seed: number;
+            /**
+             * @description Controls the number of sampling steps. For stable-audio-2.5 accepts steps between 4 and 8 (defaults to 8).
+             * @default 8
+             */
+            steps: number;
+            /** @description How strictly the diffusion process adheres to the prompt text (higher values make your audio closer to your prompt). Defaults to 7 for stable-audio-2 and 1 for stable-audio-2.5. */
+            cfg_scale?: number;
+            model: components["schemas"]["StableAudio25Model"];
+            output_format?: components["schemas"]["StableAudio25OutputFormat"];
+            /**
+             * @description Controls how much influence the audio parameter has on the generated audio. A value of 0 would yield audio that is identical to the input. A value of 1 would be as if you passed in no audio at all. Minimum value for stable-audio-2.5 is 0.01.
+             * @default 1
+             */
+            strength: number;
+        };
+        /** @description Request parameters for Stable Audio 2.5 audio inpainting */
+        StableAudio25InpaintRequest: {
+            /** @description What you wish the output audio to be. A strong, descriptive prompt that clearly defines instruments, moods, styles, and genre will lead to better results. */
+            prompt: string;
+            /**
+             * Format: binary
+             * @description The audio to be used as the starting point for the generation. Supported formats - mp3, wav. Audio must be between 6 and 190 seconds long.
+             */
+            audio: string;
+            /**
+             * @description Controls the duration in seconds of the generated audio.
+             * @default 190
+             */
+            duration: number;
+            /**
+             * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass 0 to use a random seed.)
+             * @default 0
+             */
+            seed: number;
+            /**
+             * @description Controls the number of sampling steps.
+             * @default 8
+             */
+            steps: number;
+            output_format?: components["schemas"]["StableAudio25OutputFormat"];
+            /**
+             * @description Start time in seconds for the audio segment to be inpainted.
+             * @default 30
+             */
+            mask_start: number;
+            /**
+             * @description End time in seconds for the audio segment to be inpainted.
+             * @default 190
+             */
+            mask_end: number;
+        };
+        /** @description Response from Stable Audio 2.5 audio generation */
+        StableAudio25AudioResponse: {
+            /** @description Unique identifier for the generation request */
+            id?: string;
+            /**
+             * Format: byte
+             * @description Base64-encoded audio data
+             */
+            audio?: string;
+            /**
+             * @description Reason for completion
+             * @enum {string}
+             */
+            finish_reason?: "SUCCESS" | "ERROR" | "CONTENT_FILTERED";
+        };
+        /**
+         * @description The model to use for generation
+         * @enum {string}
+         */
+        StableAudio25Model: "stable-audio-2.5";
+        /**
+         * @description Dictates the content-type of the generated audio
+         * @enum {string}
+         */
+        StableAudio25OutputFormat: "mp3" | "wav";
+        /** @description Common properties for model responses */
+        ModelResponseProperties: {
+            /** @description The model used to generate the response */
+            model?: string;
+            /** @description Instructions for the model on how to generate the response */
+            instructions?: string;
+            /** @description Maximum number of tokens to generate */
+            max_output_tokens?: number;
+            /**
+             * @description Controls randomness in the response
+             * @default 1
+             */
+            temperature: number;
+            /**
+             * @description Controls diversity of the response via nucleus sampling
+             * @default 1
+             */
+            top_p: number;
+            /**
+             * @description How to handle truncation of the response
+             * @default disabled
+             * @enum {string}
+             */
+            truncation: "disabled" | "auto";
+        };
+        /**
+         * Input file
+         * @description A file input to the model.
+         */
+        InputFileContent: {
+            /**
+             * @description The type of the input item. Always `input_file`.
+             * @default input_file
+             * @enum {string}
+             */
+            type: "input_file";
+            /** @description The ID of the file to be sent to the model. */
+            file_id?: string;
+            /** @description The name of the file to be sent to the model. */
+            filename?: string;
+            /** @description The content of the file to be sent to the model. */
+            file_data?: string;
+        };
+        ResponseProperties: {
+            /**
+             * @description The unique ID of the previous response to the model. Use this to
+             *     create multi-turn conversations. Learn more about
+             *     [conversation state](/docs/guides/conversation-state).
+             */
+            previous_response_id?: string;
+            /**
+             * @description Model ID used to generate the response, like `gpt-4o` or `o3`. OpenAI
+             *     offers a wide range of models with different capabilities, performance
+             *     characteristics, and price points. Refer to the [model guide](/docs/models)
+             *     to browse and compare available models.
+             */
+            model?: components["schemas"]["OpenAIModels"];
+            reasoning?: components["schemas"]["Reasoning"];
+            /** @description An upper bound for the number of tokens that can be generated for a response, including visible output tokens and [reasoning tokens](/docs/guides/reasoning). */
+            max_output_tokens?: number;
+            /**
+             * @description Inserts a system (or developer) message as the first item in the model's context.
+             *
+             *     When using along with `previous_response_id`, the instructions from a previous
+             *     response will not be carried over to the next response. This makes it simple
+             *     to swap out system (or developer) messages in new responses.
+             */
+            instructions?: string;
+            text?: {
+                format?: components["schemas"]["TextResponseFormatConfiguration"];
+            };
+            tools?: components["schemas"]["Tool"][];
+            /**
+             * @description How the model should select which tool (or tools) to use when generating
+             *     a response. See the `tools` parameter to see how to specify which tools
+             *     the model can call.
+             */
+            tool_choice?: components["schemas"]["ToolChoiceOptions"] | components["schemas"]["ToolChoiceTypes"] | components["schemas"]["ToolChoiceFunction"];
+            /**
+             * @description The truncation strategy to use for the model response.
+             *     - `auto`: If the context of this response and previous ones exceeds
+             *       the model's context window size, the model will truncate the
+             *       response to fit the context window by dropping input items in the
+             *       middle of the conversation.
+             *     - `disabled` (default): If a model response will exceed the context window
+             *       size for a model, the request will fail with a 400 error.
+             * @default disabled
+             * @enum {string}
+             */
+            truncation: "auto" | "disabled";
+        };
+        /**
+         * @description An object specifying the format that the model must output.
          *
-         *     Learn more:
-         *     - [Text inputs and outputs](/docs/guides/text)
-         *     - [Image inputs](/docs/guides/images)
-         *     - [File inputs](/docs/guides/pdf-files)
-         *     - [Conversation state](/docs/guides/conversation-state)
-         *     - [Function calling](/docs/guides/function-calling)
-         *      */
-        input: string | components['schemas']['InputItem'][]
-        /** @description Specify additional output data to include in the model response. Currently
+         *     Configuring `{ "type": "json_schema" }` enables Structured Outputs,
+         *     which ensures the model will match your supplied JSON schema. Learn more in the
+         *     [Structured Outputs guide](/docs/guides/structured-outputs).
+         *
+         *     The default format is `{ "type": "text" }` with no additional options.
+         *
+         *     **Not recommended for gpt-4o and newer models:**
+         *
+         *     Setting to `{ "type": "json_object" }` enables the older JSON mode, which
+         *     ensures the message the model generates is valid JSON. Using `json_schema`
+         *     is preferred for models that support it.
+         */
+        TextResponseFormatConfiguration: components["schemas"]["ResponseFormatText"] | components["schemas"]["TextResponseFormatJsonSchema"] | components["schemas"]["ResponseFormatJsonObject"];
+        /**
+         * JSON object
+         * @description JSON object response format. An older method of generating JSON responses.
+         *     Using `json_schema` is recommended for models that support it. Note that the
+         *     model will not generate JSON without a system or user message instructing it
+         *     to do so.
+         */
+        ResponseFormatJsonObject: {
+            /**
+             * @description The type of response format being defined. Always `json_object`.
+             * @enum {string}
+             */
+            type: "json_object";
+        };
+        /**
+         * JSON schema
+         * @description JSON Schema response format. Used to generate structured JSON responses.
+         *     Learn more about [Structured Outputs](/docs/guides/structured-outputs).
+         */
+        ResponseFormatJsonSchema: {
+            /** @default json_schema */
+            type: string;
+            /**
+             * JSON schema
+             * @description Structured Outputs configuration options, including a JSON Schema.
+             */
+            json_schema: {
+                /**
+                 * @description A description of what the response format is for, used by the model to
+                 *     determine how to respond in the format.
+                 */
+                description?: string;
+                /**
+                 * @description The name of the response format. Must be a-z, A-Z, 0-9, or contain
+                 *     underscores and dashes, with a maximum length of 64.
+                 */
+                name: string;
+                schema?: components["schemas"]["ResponseFormatJsonSchemaSchema"];
+                /**
+                 * @description Whether to enable strict schema adherence when generating the output.
+                 *     If set to true, the model will always follow the exact schema defined
+                 *     in the `schema` field. Only a subset of JSON Schema is supported when
+                 *     `strict` is `true`. To learn more, read the [Structured Outputs
+                 *     guide](/docs/guides/structured-outputs).
+                 * @default false
+                 */
+                strict: boolean;
+            };
+        };
+        /**
+         * JSON schema
+         * @description The schema for the response format, described as a JSON Schema object.
+         *     Learn how to build JSON schemas [here](https://json-schema.org/).
+         */
+        ResponseFormatJsonSchemaSchema: {
+            [key: string]: unknown;
+        };
+        /**
+         * Text
+         * @description Default response format. Used to generate text responses.
+         */
+        ResponseFormatText: {
+            /**
+             * @description The type of response format being defined. Always `text`.
+             * @enum {string}
+             */
+            type: "text";
+        };
+        /**
+         * JSON schema
+         * @description JSON Schema response format. Used to generate structured JSON responses.
+         *     Learn more about [Structured Outputs](/docs/guides/structured-outputs).
+         */
+        TextResponseFormatJsonSchema: {
+            /**
+             * @description The type of response format being defined. Always `json_schema`.
+             * @enum {string}
+             */
+            type: "json_schema";
+            /**
+             * @description A description of what the response format is for, used by the model to
+             *     determine how to respond in the format.
+             */
+            description?: string;
+            /**
+             * @description The name of the response format. Must be a-z, A-Z, 0-9, or contain
+             *     underscores and dashes, with a maximum length of 64.
+             */
+            name: string;
+            schema: components["schemas"]["ResponseFormatJsonSchemaSchema"];
+            /**
+             * @description Whether to enable strict schema adherence when generating the output.
+             *     If set to true, the model will always follow the exact schema defined
+             *     in the `schema` field. Only a subset of JSON Schema is supported when
+             *     `strict` is `true`. To learn more, read the [Structured Outputs
+             *     guide](/docs/guides/structured-outputs).
+             * @default false
+             */
+            strict: boolean;
+        };
+        /**
+         * Reasoning
+         * @description **o-series models only**
+         *
+         *     Configuration options for
+         *     [reasoning models](https://platform.openai.com/docs/guides/reasoning).
+         */
+        Reasoning: {
+            effort?: components["schemas"]["ReasoningEffort"];
+            /**
+             * @description A summary of the reasoning performed by the model. This can be
+             *     useful for debugging and understanding the model's reasoning process.
+             *     One of `auto`, `concise`, or `detailed`.
+             * @enum {string}
+             */
+            summary?: "auto" | "concise" | "detailed";
+            /**
+             * @deprecated
+             * @description **Deprecated:** use `summary` instead.
+             *
+             *     A summary of the reasoning performed by the model. This can be
+             *     useful for debugging and understanding the model's reasoning process.
+             *     One of `auto`, `concise`, or `detailed`.
+             * @enum {string}
+             */
+            generate_summary?: "auto" | "concise" | "detailed";
+        };
+        /**
+         * @description **o-series models only**
+         *
+         *     Constrains effort on reasoning for
+         *     [reasoning models](https://platform.openai.com/docs/guides/reasoning).
+         *     Currently supported values are `low`, `medium`, and `high`. Reducing
+         *     reasoning effort can result in faster responses and fewer tokens used
+         *     on reasoning in a response.
+         * @default medium
+         * @enum {string}
+         */
+        ReasoningEffort: "low" | "medium" | "high";
+        /**
+         * Web search preview
+         * @description This tool searches the web for relevant results to use in a response. Learn more about the [web search tool](https://platform.openai.com/docs/guides/tools-web-search).
+         */
+        WebSearchPreviewTool: {
+            /**
+             * @description The type of the web search tool. One of `web_search_preview` or `web_search_preview_2025_03_11`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "WebSearchPreviewTool";
+            /**
+             * @description High level guidance for the amount of context window space to use for the search. One of `low`, `medium`, or `high`. `medium` is the default.
+             * @enum {string}
+             */
+            search_context_size?: "low" | "medium" | "high";
+        };
+        /**
+         * Computer use preview
+         * @description A tool that controls a virtual computer. Learn more about the [computer tool](https://platform.openai.com/docs/guides/tools-computer-use).
+         */
+        ComputerUsePreviewTool: {
+            /**
+             * @description The type of the computer use tool. Always `computer_use_preview`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "ComputerUsePreviewTool";
+            /**
+             * @description The type of computer environment to control.
+             * @enum {string}
+             */
+            environment: "windows" | "mac" | "linux" | "ubuntu" | "browser";
+            /** @description The width of the computer display. */
+            display_width: number;
+            /** @description The height of the computer display. */
+            display_height: number;
+        };
+        Tool: components["schemas"]["FileSearchTool"] | components["schemas"]["FunctionTool"] | components["schemas"]["WebSearchPreviewTool"] | components["schemas"]["ComputerUsePreviewTool"];
+        /** @description Emitted when an error occurs. */
+        ResponseErrorEvent: {
+            /**
+             * @description The type of the event. Always `error`.
+             * @enum {string}
+             */
+            type: "error";
+            /** @description The error code. */
+            code: string;
+            /** @description The error message. */
+            message: string;
+            /** @description The error parameter. */
+            param: string;
+        };
+        /** @description Emitted when a new output item is added. */
+        ResponseOutputItemAddedEvent: {
+            /**
+             * @description The type of the event. Always `response.output_item.added`.
+             * @enum {string}
+             */
+            type: "response.output_item.added";
+            /** @description The index of the output item that was added. */
+            output_index: number;
+            /** @description The output item that was added. */
+            item: components["schemas"]["OutputItem"];
+        };
+        /** @description Emitted when an output item is marked done. */
+        ResponseOutputItemDoneEvent: {
+            /**
+             * @description The type of the event. Always `response.output_item.done`.
+             * @enum {string}
+             */
+            type: "response.output_item.done";
+            /** @description The index of the output item that was marked done. */
+            output_index: number;
+            /** @description The output item that was marked done. */
+            item: components["schemas"]["OutputItem"];
+        };
+        /**
+         * Function tool
+         * @description Use this option to force the model to call a specific function.
+         */
+        ToolChoiceFunction: {
+            /**
+             * @description For function calling, the type is always `function`.
+             * @enum {string}
+             */
+            type: "function";
+            /** @description The name of the function to call. */
+            name: string;
+        };
+        /**
+         * Tool choice mode
+         * @description Controls which (if any) tool is called by the model.
+         *
+         *     `none` means the model will not call any tool and instead generates a message.
+         *
+         *     `auto` means the model can pick between generating a message or calling one or
+         *     more tools.
+         *
+         *     `required` means the model must call one or more tools.
+         * @enum {string}
+         */
+        ToolChoiceOptions: "none" | "auto" | "required";
+        /**
+         * Hosted tool
+         * @description Indicates that the model should use a built-in tool to generate a response.
+         *     [Learn more about built-in tools](/docs/guides/tools).
+         */
+        ToolChoiceTypes: {
+            /**
+             * @description The type of hosted tool the model should to use. Learn more about
+             *     [built-in tools](/docs/guides/tools).
+             *
+             *     Allowed values are:
+             *     - `file_search`
+             *     - `web_search_preview`
+             *     - `computer_use_preview`
+             * @enum {string}
+             */
+            type: "file_search" | "web_search_preview" | "computer_use_preview" | "web_search_preview_2025_03_11";
+        };
+        /** @description An event that is emitted when a response fails. */
+        ResponseFailedEvent: {
+            /**
+             * @description The type of the event. Always `response.failed`.
+             * @enum {string}
+             */
+            type: "response.failed";
+            /** @description The response that failed. */
+            response: components["schemas"]["OpenAIResponse"];
+        };
+        /** @description Emitted when the response is in progress. */
+        ResponseInProgressEvent: {
+            /**
+             * @description The type of the event. Always `response.in_progress`.
+             * @enum {string}
+             */
+            type: "response.in_progress";
+            /** @description The response that is in progress. */
+            response: components["schemas"]["OpenAIResponse"];
+        };
+        /** @description An event that is emitted when a response finishes as incomplete. */
+        ResponseIncompleteEvent: {
+            /**
+             * @description The type of the event. Always `response.incomplete`.
+             * @enum {string}
+             */
+            type: "response.incomplete";
+            /** @description The response that was incomplete. */
+            response: components["schemas"]["OpenAIResponse"];
+        };
+        /** @description An event that is emitted when a response is created. */
+        ResponseCreatedEvent: {
+            /**
+             * @description The type of the event. Always `response.created`.
+             * @enum {string}
+             */
+            type: "response.created";
+            /** @description The response that was created. */
+            response: components["schemas"]["OpenAIResponse"];
+        };
+        /** @description Emitted when the model response is complete. */
+        ResponseCompletedEvent: {
+            /**
+             * @description The type of the event. Always `response.completed`.
+             * @enum {string}
+             */
+            type: "response.completed";
+            /** @description Properties of the completed response. */
+            response: components["schemas"]["OpenAIResponse"];
+        };
+        /** @description Emitted when a new content part is added. */
+        ResponseContentPartAddedEvent: {
+            /**
+             * @description The type of the event. Always `response.content_part.added`.
+             * @enum {string}
+             */
+            type: "response.content_part.added";
+            /** @description The ID of the output item that the content part was added to. */
+            item_id: string;
+            /** @description The index of the output item that the content part was added to. */
+            output_index: number;
+            /** @description The index of the content part that was added. */
+            content_index: number;
+            /** @description The content part that was added. */
+            part: components["schemas"]["OutputContent"];
+        };
+        /** @description Emitted when a content part is done. */
+        ResponseContentPartDoneEvent: {
+            /**
+             * @description The type of the event. Always `response.content_part.done`.
+             * @enum {string}
+             */
+            type: "response.content_part.done";
+            /** @description The ID of the output item that the content part was added to. */
+            item_id: string;
+            /** @description The index of the output item that the content part was added to. */
+            output_index: number;
+            /** @description The index of the content part that is done. */
+            content_index: number;
+            /** @description The content part that is done. */
+            part: components["schemas"]["OutputContent"];
+        };
+        ResponseTool: components["schemas"]["WebSearchTool"] | components["schemas"]["FileSearchTool"] | components["schemas"]["FunctionTool"];
+        WebSearchTool: {
+            /**
+             * @description The type of tool
+             * @enum {string}
+             */
+            type: "web_search";
+            /** @description Optional list of domains to restrict search to */
+            domains?: string[];
+        };
+        FileSearchTool: {
+            /**
+             * @description The type of tool (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "FileSearchTool";
+            /** @description IDs of vector stores to search in */
+            vector_store_ids: string[];
+        };
+        FunctionTool: {
+            /**
+             * @description The type of tool (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "FunctionTool";
+            /** @description Name of the function */
+            name: string;
+            /** @description Description of what the function does */
+            description?: string;
+            /** @description JSON Schema object describing the function parameters */
+            parameters: Record<string, never>;
+        };
+        OutputItem: components["schemas"]["OutputMessage"] | components["schemas"]["FileSearchToolCall"] | components["schemas"]["FunctionToolCall"] | components["schemas"]["WebSearchToolCall"] | components["schemas"]["ComputerToolCall"] | components["schemas"]["ReasoningItem"];
+        /**
+         * Web search tool call
+         * @description The results of a web search tool call. See the
+         *     [web search guide](/docs/guides/tools-web-search) for more information.
+         */
+        WebSearchToolCall: {
+            /** @description The unique ID of the web search tool call. */
+            id: string;
+            /**
+             * @description The type of the web search tool call. Always `web_search_call`.
+             *      (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "WebSearchToolCall";
+            /**
+             * @description The status of the web search tool call.
+             * @enum {string}
+             */
+            status: "in_progress" | "searching" | "completed" | "failed";
+        };
+        /**
+         * File search tool call
+         * @description The results of a file search tool call. See the
+         *     [file search guide](/docs/guides/tools-file-search) for more information.
+         */
+        FileSearchToolCall: {
+            /** @description The unique ID of the file search tool call. */
+            id: string;
+            /**
+             * @description The type of the file search tool call. Always `file_search_call`.
+             *      (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "FileSearchToolCall";
+            /**
+             * @description The status of the file search tool call. One of `in_progress`,
+             *     `searching`, `incomplete` or `failed`,
+             * @enum {string}
+             */
+            status: "in_progress" | "searching" | "completed" | "incomplete" | "failed";
+            /** @description The queries used to search for files. */
+            queries: string[];
+            /** @description The results of the file search tool call. */
+            results?: {
+                /** @description The unique ID of the file. */
+                file_id?: string;
+                /** @description The text that was retrieved from the file. */
+                text?: string;
+                /** @description The name of the file. */
+                filename?: string;
+                /**
+                 * Format: float
+                 * @description The relevance score of the file - a value between 0 and 1.
+                 */
+                score?: number;
+            }[];
+        };
+        /**
+         * Function tool call
+         * @description A tool call to run a function. See the
+         *     [function calling guide](/docs/guides/function-calling) for more information.
+         */
+        FunctionToolCall: {
+            /** @description The unique ID of the function tool call. */
+            id?: string;
+            /**
+             * @description The type of the function tool call. Always `function_call`.
+             * @enum {string}
+             */
+            type: "function_call";
+            /** @description The unique ID of the function tool call generated by the model. */
+            call_id: string;
+            /** @description The name of the function to run. */
+            name: string;
+            /** @description A JSON string of the arguments to pass to the function. */
+            arguments: string;
+            /**
+             * @description The status of the item. One of `in_progress`, `completed`, or
+             *     `incomplete`. Populated when items are returned via API.
+             * @enum {string}
+             */
+            status?: "in_progress" | "completed" | "incomplete";
+        };
+        OutputMessage: {
+            /**
+             * @description The type of output item (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "OutputMessage";
+            /**
+             * @description The role of the message
+             * @enum {string}
+             */
+            role: "assistant";
+            /** @description The content of the message */
+            content: components["schemas"]["OutputContent"][];
+        };
+        OutputContent: components["schemas"]["OutputTextContent"] | components["schemas"]["OutputAudioContent"];
+        OutputTextContent: {
+            /**
+             * @description The type of output content
+             * @enum {string}
+             */
+            type: "output_text";
+            /** @description The text content */
+            text: string;
+        };
+        OutputAudioContent: {
+            /**
+             * @description The type of output content
+             * @enum {string}
+             */
+            type: "output_audio";
+            /** @description Base64-encoded audio data */
+            data: string;
+            /** @description Transcript of the audio */
+            transcript: string;
+        };
+        /**
+         * @description Represents token usage details including input tokens, output tokens,
+         *     a breakdown of output tokens, and the total tokens used.
+         */
+        ResponseUsage: {
+            /** @description The number of input tokens. */
+            input_tokens: number;
+            /** @description A detailed breakdown of the input tokens. */
+            input_tokens_details: {
+                /**
+                 * @description The number of tokens that were retrieved from the cache.
+                 *     [More on prompt caching](/docs/guides/prompt-caching).
+                 */
+                cached_tokens: number;
+            };
+            /** @description The number of output tokens. */
+            output_tokens: number;
+            /** @description A detailed breakdown of the output tokens. */
+            output_tokens_details: {
+                /** @description The number of reasoning tokens. */
+                reasoning_tokens: number;
+            };
+            /** @description The total number of tokens used. */
+            total_tokens: number;
+        };
+        /** @description A response from the model */
+        OpenAIResponse: components["schemas"]["ModelResponseProperties"] & components["schemas"]["ResponseProperties"] & {
+            /** @description Unique identifier for this Response. */
+            id?: string;
+            /**
+             * @description The object type of this resource - always set to `response`.
+             * @enum {string}
+             */
+            object?: "response";
+            /**
+             * @description The status of the response generation. One of `completed`, `failed`, `in_progress`, or `incomplete`.
+             * @enum {string}
+             */
+            status?: "completed" | "failed" | "in_progress" | "incomplete";
+            /** @description Unix timestamp (in seconds) of when this Response was created. */
+            created_at?: number;
+            error?: components["schemas"]["ResponseError"];
+            /** @description Details about why the response is incomplete. */
+            incomplete_details?: {
+                /**
+                 * @description The reason why the response is incomplete.
+                 * @enum {string}
+                 */
+                reason?: "max_output_tokens" | "content_filter";
+            } | null;
+            /**
+             * @description An array of content items generated by the model.
+             *
+             *     - The length and order of items in the `output` array is dependent
+             *       on the model's response.
+             *     - Rather than accessing the first item in the `output` array and
+             *       assuming it's an `assistant` message with the content generated by
+             *       the model, you might consider using the `output_text` property where
+             *       supported in SDKs.
+             */
+            output?: components["schemas"]["OutputItem"][];
+            /**
+             * @description SDK-only convenience property that contains the aggregated text output
+             *     from all `output_text` items in the `output` array, if any are present.
+             *     Supported in the Python and JavaScript SDKs.
+             */
+            output_text?: string | null;
+            usage?: components["schemas"]["ResponseUsage"];
+            /**
+             * @description Whether to allow the model to run tool calls in parallel.
+             * @default true
+             */
+            parallel_tool_calls: boolean;
+        };
+        /** @description An error object returned when the model fails to generate a Response. */
+        ResponseError: {
+            code: components["schemas"]["ResponseErrorCode"];
+            /** @description A human-readable description of the error. */
+            message: string;
+        };
+        /**
+         * @description The error code for the response.
+         * @enum {string}
+         */
+        ResponseErrorCode: "server_error" | "rate_limit_exceeded" | "invalid_prompt" | "vector_store_timeout" | "invalid_image" | "invalid_image_format" | "invalid_base64_image" | "invalid_image_url" | "image_too_large" | "image_too_small" | "image_parse_error" | "image_content_policy_violation" | "invalid_image_mode" | "image_file_too_large" | "unsupported_image_media_type" | "empty_image_file" | "failed_to_download_image" | "image_file_not_found";
+        /** @description Events that can be emitted during response streaming */
+        OpenAIResponseStreamEvent: components["schemas"]["ResponseCreatedEvent"] | components["schemas"]["ResponseInProgressEvent"] | components["schemas"]["ResponseCompletedEvent"] | components["schemas"]["ResponseFailedEvent"] | components["schemas"]["ResponseIncompleteEvent"] | components["schemas"]["ResponseOutputItemAddedEvent"] | components["schemas"]["ResponseOutputItemDoneEvent"] | components["schemas"]["ResponseContentPartAddedEvent"] | components["schemas"]["ResponseContentPartDoneEvent"] | components["schemas"]["ResponseErrorEvent"];
+        InputMessage: {
+            /** @enum {string} */
+            type?: "message";
+            /** @enum {string} */
+            role?: "user" | "system" | "developer";
+            /** @enum {string} */
+            status?: "in_progress" | "completed" | "incomplete";
+            content?: components["schemas"]["InputMessageContentList"];
+        };
+        /**
+         * Input item content list
+         * @description A list of one or many input items to the model, containing different content
+         *     types.
+         */
+        InputMessageContentList: components["schemas"]["InputContent"][];
+        InputContent: components["schemas"]["InputTextContent"] | components["schemas"]["InputImageContent"] | components["schemas"]["InputFileContent"];
+        /**
+         * Input text
+         * @description A text input to the model.
+         */
+        InputTextContent: {
+            /**
+             * @description The type of the input item. Always `input_text`.
+             * @default input_text
+             * @enum {string}
+             */
+            type: "input_text";
+            /** @description The text input to the model. */
+            text: string;
+        };
+        /**
+         * Input image
+         * @description An image input to the model. Learn about [image inputs](/docs/guides/vision).
+         */
+        InputImageContent: {
+            /**
+             * @description The type of the input item. Always `input_image`.
+             * @default input_image
+             * @enum {string}
+             */
+            type: "input_image";
+            /** @description The URL of the image to be sent to the model. A fully qualified URL or base64 encoded image in a data URL. */
+            image_url?: string;
+            /** @description The ID of the file to be sent to the model. */
+            file_id?: string;
+            /**
+             * @description The detail level of the image to be sent to the model. One of `high`, `low`, or `auto`. Defaults to `auto`.
+             * @enum {string}
+             */
+            detail: "low" | "high" | "auto";
+        };
+        InputMessageResource: components["schemas"]["InputMessage"] & {
+            /** @description The unique ID of the message input. */
+            id: string;
+        } & {
+            /**
+             * @description discriminator enum property added by openapi-typescript
+             * @enum {string}
+             */
+            type: "InputMessageResource";
+        };
+        /** @description Content item used to generate a response. */
+        ItemResource: components["schemas"]["InputMessageResource"] | components["schemas"]["OutputMessage"] | components["schemas"]["FileSearchToolCall"] | components["schemas"]["ComputerToolCall"] | components["schemas"]["WebSearchToolCall"] | components["schemas"]["FunctionToolCallResource"];
+        FunctionToolCallResource: components["schemas"]["FunctionToolCall"] & {
+            /** @description The unique ID of the function tool call. */
+            id: string;
+        } & {
+            /**
+             * @description discriminator enum property added by openapi-typescript
+             * @enum {string}
+             */
+            type: "FunctionToolCallResource";
+        };
+        /**
+         * Computer tool call
+         * @description A tool call to a computer use tool. See the
+         *     [computer use guide](/docs/guides/tools-computer-use) for more information.
+         */
+        ComputerToolCall: {
+            /**
+             * @description The type of the computer call. Always `computer_call`. (enum property replaced by openapi-typescript)
+             * @enum {string}
+             */
+            type: "ComputerToolCall";
+            /** @description The unique ID of the computer call. */
+            id: string;
+            /** @description An identifier used when responding to the tool call with output. */
+            call_id: string;
+            action: Record<string, never>;
+            /**
+             * @description The status of the item. One of `in_progress`, `completed`, or
+             *     `incomplete`. Populated when items are returned via API.
+             * @enum {string}
+             */
+            status: "in_progress" | "completed" | "incomplete";
+        };
+        /** @description A list of Response items. */
+        ResponseItemList: {
+            /**
+             * @description The type of object returned, must be `list`.
+             * @enum {string}
+             */
+            object: "list";
+            /** @description A list of items used to generate this response. */
+            data: components["schemas"]["ItemResource"][];
+            /** @description Whether there are more items available. */
+            has_more: boolean;
+            /** @description The ID of the first item in the list. */
+            first_id: string;
+            /** @description The ID of the last item in the list. */
+            last_id: string;
+        };
+        /**
+         * @description Specify additional output data to include in the model response. Currently
          *     supported values are:
          *     - `file_search_call.results`: Include the search results of
          *       the file search tool call.
          *     - `message.input_image.image_url`: Include image urls from the input message.
          *     - `computer_call_output.output.image_url`: Include image urls from the computer call output.
-         *      */
-        include?: components['schemas']['Includable'][] | null
-        usage?: components['schemas']['ResponseUsage']
-        /**
-         * @description Whether to allow the model to run tool calls in parallel.
-         *
-         * @default true
+         * @enum {string}
          */
-        parallel_tool_calls: boolean | null
+        Includable: "file_search_call.results" | "message.input_image.image_url" | "computer_call_output.output.image_url";
+        CreateModelResponseProperties: components["schemas"]["ModelResponseProperties"];
+        InputItem: components["schemas"]["EasyInputMessage"] | components["schemas"]["Item"];
+        /** @description Content item used to generate a response. */
+        Item: components["schemas"]["InputMessage"] | components["schemas"]["OutputMessage"] | components["schemas"]["FileSearchToolCall"] | components["schemas"]["ComputerToolCall"] | components["schemas"]["WebSearchToolCall"] | components["schemas"]["FunctionToolCall"] | components["schemas"]["ReasoningItem"];
         /**
-         * @description Whether to store the generated model response for later retrieval via
-         *     API.
-         *
-         * @default true
+         * Reasoning
+         * @description A description of the chain of thought used by a reasoning model while generating
+         *     a response.
          */
-        store: boolean | null
+        ReasoningItem: {
+            /**
+             * @description The type of the object. Always `reasoning`.
+             * @enum {string}
+             */
+            type: "reasoning";
+            /** @description The unique identifier of the reasoning content. */
+            id: string;
+            /** @description Reasoning text contents. */
+            summary: {
+                /**
+                 * @description The type of the object. Always `summary_text`.
+                 * @enum {string}
+                 */
+                type: "summary_text";
+                /**
+                 * @description A short summary of the reasoning used by the model when generating
+                 *     the response.
+                 */
+                text: string;
+            }[];
+            /**
+             * @description The status of the item. One of `in_progress`, `completed`, or
+             *     `incomplete`. Populated when items are returned via API.
+             * @enum {string}
+             */
+            status?: "in_progress" | "completed" | "incomplete";
+        };
         /**
-         * @description If set to true, the model response data will be streamed to the client
-         *     as it is generated using [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#Event_stream_format).
-         *     See the [Streaming section below](/docs/api-reference/responses-streaming)
-         *     for more information.
-         *
-         * @default false
+         * Input message
+         * @description A message input to the model with a role indicating instruction following
+         *     hierarchy. Instructions given with the `developer` or `system` role take
+         *     precedence over instructions given with the `user` role. Messages with the
+         *     `assistant` role are presumed to have been generated by the model in previous
+         *     interactions.
          */
-        stream: boolean | null
-      }
-    /** @enum {string} */
-    OpenAIModels:
-      | 'gpt-4'
-      | 'gpt-4-0314'
-      | 'gpt-4-0613'
-      | 'gpt-4-32k'
-      | 'gpt-4-32k-0314'
-      | 'gpt-4-32k-0613'
-      | 'gpt-4-0125-preview'
-      | 'gpt-4-turbo'
-      | 'gpt-4-turbo-2024-04-09'
-      | 'gpt-4-turbo-preview'
-      | 'gpt-4-1106-preview'
-      | 'gpt-4-vision-preview'
-      | 'gpt-3.5-turbo'
-      | 'gpt-3.5-turbo-16k'
-      | 'gpt-3.5-turbo-0301'
-      | 'gpt-3.5-turbo-0613'
-      | 'gpt-3.5-turbo-1106'
-      | 'gpt-3.5-turbo-0125'
-      | 'gpt-3.5-turbo-16k-0613'
-      | 'gpt-4.1'
-      | 'gpt-4.1-mini'
-      | 'gpt-4.1-nano'
-      | 'gpt-4.1-2025-04-14'
-      | 'gpt-4.1-mini-2025-04-14'
-      | 'gpt-4.1-nano-2025-04-14'
-      | 'o1'
-      | 'o1-mini'
-      | 'o1-preview'
-      | 'o1-pro'
-      | 'o1-2024-12-17'
-      | 'o1-preview-2024-09-12'
-      | 'o1-mini-2024-09-12'
-      | 'o1-pro-2025-03-19'
-      | 'o3'
-      | 'o3-mini'
-      | 'o3-2025-04-16'
-      | 'o3-mini-2025-01-31'
-      | 'o4-mini'
-      | 'o4-mini-2025-04-16'
-      | 'gpt-4o'
-      | 'gpt-4o-mini'
-      | 'gpt-4o-2024-11-20'
-      | 'gpt-4o-2024-08-06'
-      | 'gpt-4o-2024-05-13'
-      | 'gpt-4o-mini-2024-07-18'
-      | 'gpt-4o-audio-preview'
-      | 'gpt-4o-audio-preview-2024-10-01'
-      | 'gpt-4o-audio-preview-2024-12-17'
-      | 'gpt-4o-mini-audio-preview'
-      | 'gpt-4o-mini-audio-preview-2024-12-17'
-      | 'gpt-4o-search-preview'
-      | 'gpt-4o-mini-search-preview'
-      | 'gpt-4o-search-preview-2025-03-11'
-      | 'gpt-4o-mini-search-preview-2025-03-11'
-      | 'computer-use-preview'
-      | 'computer-use-preview-2025-03-11'
-      | 'chatgpt-4o-latest'
-    MoonvalleyTextToVideoInferenceParams: {
-      /**
-       * @description Height of the generated video in pixels
-       * @default 1080
-       */
-      height: number
-      /**
-       * @description Width of the generated video in pixels
-       * @default 1920
-       */
-      width: number
-      /**
-       * @description Number of frames to generate
-       * @default 64
-       */
-      num_frames: number
-      /**
-       * @description Frames per second of the generated video
-       * @default 24
-       */
-      fps: number
-      /**
-       * Format: float
-       * @description Guidance scale for generation control
-       * @default 10
-       */
-      guidance_scale: number
-      /** @description Random seed for generation (default: random) */
-      seed?: number
-      /**
-       * @description Number of denoising steps
-       * @default 80
-       */
-      steps: number
-      /**
-       * @description Whether to use timestep transformation
-       * @default true
-       */
-      use_timestep_transform: boolean
-      /**
-       * Format: float
-       * @description Shift value for generation control
-       * @default 3
-       */
-      shift_value: number
-      /**
-       * @description Whether to use guidance scheduling
-       * @default true
-       */
-      use_guidance_schedule: boolean
-      /**
-       * @description Whether to add quality guidance
-       * @default true
-       */
-      add_quality_guidance: boolean
-      /**
-       * Format: float
-       * @description CLIP value for generation control
-       * @default 3
-       */
-      clip_value: number
-      /**
-       * @description Whether to use negative prompts
-       * @default false
-       */
-      use_negative_prompts: boolean
-      /** @description Negative prompt text */
-      negative_prompt?: string
-      /**
-       * @description Number of warmup steps (calculated based on num_frames)
-       * @default 0
-       */
-      warmup_steps: number
-      /**
-       * @description Number of cooldown steps (calculated based on num_frames)
-       * @default 75
-       */
-      cooldown_steps: number
-      /**
-       * Format: float
-       * @description Caching coefficient for optimization
-       * @default 0.3
-       */
-      caching_coefficient: number
-      /**
-       * @description Number of caching warmup steps
-       * @default 3
-       */
-      caching_warmup: number
-      /**
-       * @description Number of caching cooldown steps
-       * @default 3
-       */
-      caching_cooldown: number
-      /**
-       * @description Index of the conditioning frame
-       * @default 0
-       */
-      conditioning_frame_index: number
-    }
-    MoonvalleyVideoToVideoInferenceParams: {
-      /**
-       * Format: float
-       * @description Guidance scale for generation control
-       * @default 15
-       */
-      guidance_scale: number
-      /** @description Random seed for generation (default: random) */
-      seed?: number
-      /**
-       * @description Number of denoising steps
-       * @default 80
-       */
-      steps: number
-      /**
-       * @description Whether to use timestep transformation
-       * @default true
-       */
-      use_timestep_transform: boolean
-      /**
-       * Format: float
-       * @description Shift value for generation control
-       * @default 3
-       */
-      shift_value: number
-      /**
-       * @description Whether to use guidance scheduling
-       * @default true
-       */
-      use_guidance_schedule: boolean
-      /**
-       * @description Whether to add quality guidance
-       * @default true
-       */
-      add_quality_guidance: boolean
-      /**
-       * Format: float
-       * @description CLIP value for generation control
-       * @default 3
-       */
-      clip_value: number
-      /**
-       * @description Whether to use negative prompts
-       * @default false
-       */
-      use_negative_prompts: boolean
-      /** @description Negative prompt text */
-      negative_prompt?: string
-      /**
-       * @description Number of warmup steps (calculated based on num_frames)
-       * @default 24
-       */
-      warmup_steps: number
-      /**
-       * @description Number of cooldown steps (calculated based on num_frames)
-       * @default 36
-       */
-      cooldown_steps: number
-      /**
-       * Format: float
-       * @description Caching coefficient for optimization
-       * @default 0.3
-       */
-      caching_coefficient: number
-      /**
-       * @description Number of caching warmup steps
-       * @default 3
-       */
-      caching_warmup: number
-      /**
-       * @description Number of caching cooldown steps
-       * @default 3
-       */
-      caching_cooldown: number
-      /**
-       * @description Index of the conditioning frame
-       * @default 0
-       */
-      conditioning_frame_index: number
-    }
-    MoonvalleyTextToImageRequest: {
-      prompt_text?: string
-      image_url?: string
-      inference_params?: components['schemas']['MoonvalleyTextToVideoInferenceParams']
-      webhook_url?: string
-    }
-    MoonvalleyTextToVideoRequest: {
-      prompt_text?: string
-      image_url?: string
-      inference_params?: components['schemas']['MoonvalleyTextToVideoInferenceParams']
-      webhook_url?: string
-    }
-    MoonvalleyVideoToVideoRequest: {
-      /** @description Describes the video to generate */
-      prompt_text: string
-      /** @description Url to control video */
-      video_url: string
-      /**
-       * @description Supported types for video control
-       * @enum {string}
-       */
-      control_type: 'motion_control' | 'pose_control'
-      /** @description Parameters for video-to-video generation inference */
-      inference_params?: components['schemas']['MoonvalleyVideoToVideoInferenceParams']
-      /** @description Optional webhook URL for notifications */
-      webhook_url?: string
-    }
-    MoonvalleyPromptResponse: {
-      id?: string
-      status?: string
-      prompt_text?: string
-      output_url?: string
-      inference_params?: Record<string, never>
-      model_params?: Record<string, never>
-      meta?: Record<string, never>
-      frame_conditioning?: Record<string, never>
-      error?: Record<string, never>
-    }
-    MoonvalleyImageToVideoRequest: components['schemas']['MoonvalleyTextToVideoRequest'] & {
-      keyframes?: {
-        [key: string]: {
-          image_url?: string
-        }
-      }
-    }
-    MoonvalleyResizeVideoRequest: components['schemas']['MoonvalleyVideoToVideoRequest'] & {
-      frame_position?: number[]
-      frame_resolution?: number[]
-      scale?: number[]
-    }
-    MoonvalleyUploadFileRequest: {
-      /** Format: binary */
-      file?: string
-    }
-    MoonvalleyUploadFileResponse: {
-      access_url?: string
-    }
-    /** @description GitHub release webhook payload based on official webhook documentation */
-    GithubReleaseWebhook: {
-      /**
-       * @description The action performed on the release
-       * @enum {string}
-       */
-      action:
-        | 'published'
-        | 'unpublished'
-        | 'created'
-        | 'edited'
-        | 'deleted'
-        | 'prereleased'
-        | 'released'
-      /** @description The release object */
-      release: {
-        /** @description The ID of the release */
-        id: number
-        /** @description The node ID of the release */
-        node_id: string
-        /** @description The API URL of the release */
-        url: string
-        /** @description The HTML URL of the release */
-        html_url: string
-        /** @description The URL to the release assets */
-        assets_url?: string
-        /** @description The URL to upload release assets */
-        upload_url?: string
-        /** @description The tag name of the release */
-        tag_name: string
-        /** @description The branch or commit the release was created from */
-        target_commitish: string
-        /** @description The name of the release */
-        name?: string | null
-        /** @description The release notes/body */
-        body?: string | null
-        /** @description Whether the release is a draft */
-        draft: boolean
-        /** @description Whether the release is a prerelease */
-        prerelease: boolean
-        /**
-         * Format: date-time
-         * @description When the release was created
-         */
-        created_at: string
-        /**
-         * Format: date-time
-         * @description When the release was published
-         */
-        published_at?: string | null
-        author: components['schemas']['GithubUser']
-        /** @description URL to the tarball */
-        tarball_url: string
-        /** @description URL to the zipball */
-        zipball_url: string
-        /** @description Array of release assets */
-        assets: components['schemas']['GithubReleaseAsset'][]
-      }
-      repository: components['schemas']['GithubRepository']
-      sender: components['schemas']['GithubUser']
-      organization?: components['schemas']['GithubOrganization']
-      installation?: components['schemas']['GithubInstallation']
-      enterprise?: components['schemas']['GithubEnterprise']
-    }
-    /** @description A GitHub user */
-    GithubUser: {
-      /** @description The user's login name */
-      login: string
-      /** @description The user's ID */
-      id: number
-      /** @description The user's node ID */
-      node_id: string
-      /** @description URL to the user's avatar */
-      avatar_url: string
-      /** @description The user's gravatar ID */
-      gravatar_id?: string | null
-      /** @description The API URL of the user */
-      url: string
-      /** @description The HTML URL of the user */
-      html_url: string
-      /**
-       * @description The type of user
-       * @enum {string}
-       */
-      type: 'Bot' | 'User' | 'Organization'
-      /** @description Whether the user is a site admin */
-      site_admin: boolean
-    }
-    /** @description A GitHub repository */
-    GithubRepository: {
-      /** @description The repository ID */
-      id: number
-      /** @description The repository node ID */
-      node_id: string
-      /** @description The name of the repository */
-      name: string
-      /** @description The full name of the repository (owner/repo) */
-      full_name: string
-      /** @description Whether the repository is private */
-      private: boolean
-      owner: components['schemas']['GithubUser']
-      /** @description The HTML URL of the repository */
-      html_url: string
-      /** @description The repository description */
-      description?: string | null
-      /** @description Whether the repository is a fork */
-      fork: boolean
-      /** @description The API URL of the repository */
-      url: string
-      /** @description The clone URL of the repository */
-      clone_url: string
-      /** @description The git URL of the repository */
-      git_url: string
-      /** @description The SSH URL of the repository */
-      ssh_url: string
-      /** @description The default branch of the repository */
-      default_branch: string
-      /**
-       * Format: date-time
-       * @description When the repository was created
-       */
-      created_at: string
-      /**
-       * Format: date-time
-       * @description When the repository was last updated
-       */
-      updated_at: string
-      /**
-       * Format: date-time
-       * @description When the repository was last pushed to
-       */
-      pushed_at: string
-    }
-    /** @description A GitHub release asset */
-    GithubReleaseAsset: {
-      /** @description The asset ID */
-      id: number
-      /** @description The asset node ID */
-      node_id: string
-      /** @description The name of the asset */
-      name: string
-      /** @description The label of the asset */
-      label?: string | null
-      /** @description The content type of the asset */
-      content_type: string
-      /**
-       * @description The state of the asset
-       * @enum {string}
-       */
-      state: 'uploaded' | 'open'
-      /** @description The size of the asset in bytes */
-      size: number
-      /** @description The number of downloads */
-      download_count: number
-      /**
-       * Format: date-time
-       * @description When the asset was created
-       */
-      created_at: string
-      /**
-       * Format: date-time
-       * @description When the asset was last updated
-       */
-      updated_at: string
-      /** @description The browser download URL */
-      browser_download_url: string
-      uploader: components['schemas']['GithubUser']
-    }
-    /** @description A GitHub organization */
-    GithubOrganization: {
-      /** @description The organization's login name */
-      login: string
-      /** @description The organization ID */
-      id: number
-      /** @description The organization node ID */
-      node_id: string
-      /** @description The API URL of the organization */
-      url: string
-      /** @description The API URL of the organization's repositories */
-      repos_url: string
-      /** @description The API URL of the organization's events */
-      events_url: string
-      /** @description The API URL of the organization's hooks */
-      hooks_url: string
-      /** @description The API URL of the organization's issues */
-      issues_url: string
-      /** @description The API URL of the organization's members */
-      members_url: string
-      /** @description The API URL of the organization's public members */
-      public_members_url: string
-      /** @description URL to the organization's avatar */
-      avatar_url: string
-      /** @description The organization description */
-      description?: string | null
-    }
-    /** @description A GitHub App installation */
-    GithubInstallation: {
-      /** @description The installation ID */
-      id: number
-      account: components['schemas']['GithubUser']
-      /**
-       * @description Repository selection for the installation
-       * @enum {string}
-       */
-      repository_selection: 'selected' | 'all'
-      /** @description The API URL for access tokens */
-      access_tokens_url: string
-      /** @description The API URL for repositories */
-      repositories_url: string
-      /** @description The HTML URL of the installation */
-      html_url: string
-      /** @description The GitHub App ID */
-      app_id: number
-      /** @description The target ID */
-      target_id: number
-      /** @description The target type */
-      target_type: string
-      /** @description The installation permissions */
-      permissions: Record<string, never>
-      /** @description The events the installation subscribes to */
-      events: string[]
-      /**
-       * Format: date-time
-       * @description When the installation was created
-       */
-      created_at: string
-      /**
-       * Format: date-time
-       * @description When the installation was last updated
-       */
-      updated_at: string
-      /** @description The single file name if applicable */
-      single_file_name?: string | null
-    }
-    /** @description A GitHub enterprise */
-    GithubEnterprise: {
-      /** @description The enterprise ID */
-      id: number
-      /** @description The enterprise slug */
-      slug: string
-      /** @description The enterprise name */
-      name: string
-      /** @description The enterprise node ID */
-      node_id: string
-      /** @description URL to the enterprise avatar */
-      avatar_url: string
-      /** @description The enterprise description */
-      description?: string | null
-      /** @description The enterprise website URL */
-      website_url?: string | null
-      /** @description The HTML URL of the enterprise */
-      html_url: string
-      /**
-       * Format: date-time
-       * @description When the enterprise was created
-       */
-      created_at: string
-      /**
-       * Format: date-time
-       * @description When the enterprise was last updated
-       */
-      updated_at: string
-    }
-    ReleaseNote: {
-      /** @description Unique identifier for the release note */
-      id: number
-      /**
-       * @description The project this release note belongs to
-       * @enum {string}
-       */
-      project: 'comfyui' | 'comfyui_frontend' | 'desktop'
-      /** @description The version of the release */
-      version: string
-      /**
-       * @description The attention level for this release
-       * @enum {string}
-       */
-      attention: 'low' | 'medium' | 'high'
-      /** @description The content of the release note in markdown format */
-      content: string
-      /**
-       * Format: date-time
-       * @description When the release note was published
-       */
-      published_at: string
-    }
-  }
-  responses: never
-  parameters: {
-    /** @description Unique UUID for each request. */
-    PixverseAiTraceId: string
-  }
-  requestBodies: never
-  headers: never
-  pathItems: never
+        EasyInputMessage: {
+            /**
+             * @description The role of the message input. One of `user`, `assistant`, `system`, or
+             *     `developer`.
+             * @enum {string}
+             */
+            role: "user" | "assistant" | "system" | "developer";
+            /**
+             * @description Text, image, or audio input to the model, used to generate a response.
+             *     Can also contain previous assistant responses.
+             */
+            content: string | components["schemas"]["InputMessageContentList"];
+            /**
+             * @description The type of the message input. Always `message`.
+             * @enum {string}
+             */
+            type?: "message";
+        };
+        OpenAICreateResponse: components["schemas"]["CreateModelResponseProperties"] & components["schemas"]["ResponseProperties"] & {
+            /**
+             * @description Text, image, or file inputs to the model, used to generate a response.
+             *
+             *     Learn more:
+             *     - [Text inputs and outputs](/docs/guides/text)
+             *     - [Image inputs](/docs/guides/images)
+             *     - [File inputs](/docs/guides/pdf-files)
+             *     - [Conversation state](/docs/guides/conversation-state)
+             *     - [Function calling](/docs/guides/function-calling)
+             */
+            input: string | components["schemas"]["InputItem"][];
+            /**
+             * @description Specify additional output data to include in the model response. Currently
+             *     supported values are:
+             *     - `file_search_call.results`: Include the search results of
+             *       the file search tool call.
+             *     - `message.input_image.image_url`: Include image urls from the input message.
+             *     - `computer_call_output.output.image_url`: Include image urls from the computer call output.
+             */
+            include?: components["schemas"]["Includable"][] | null;
+            usage?: components["schemas"]["ResponseUsage"];
+            /**
+             * @description Whether to allow the model to run tool calls in parallel.
+             * @default true
+             */
+            parallel_tool_calls: boolean | null;
+            /**
+             * @description Whether to store the generated model response for later retrieval via
+             *     API.
+             * @default true
+             */
+            store: boolean | null;
+            /**
+             * @description If set to true, the model response data will be streamed to the client
+             *     as it is generated using [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#Event_stream_format).
+             *     See the [Streaming section below](/docs/api-reference/responses-streaming)
+             *     for more information.
+             * @default false
+             */
+            stream: boolean | null;
+        };
+        /** @enum {string} */
+        OpenAIModels: "gpt-4" | "gpt-4-0314" | "gpt-4-0613" | "gpt-4-32k" | "gpt-4-32k-0314" | "gpt-4-32k-0613" | "gpt-4-0125-preview" | "gpt-4-turbo" | "gpt-4-turbo-2024-04-09" | "gpt-4-turbo-preview" | "gpt-4-1106-preview" | "gpt-4-vision-preview" | "gpt-3.5-turbo" | "gpt-3.5-turbo-16k" | "gpt-3.5-turbo-0301" | "gpt-3.5-turbo-0613" | "gpt-3.5-turbo-1106" | "gpt-3.5-turbo-0125" | "gpt-3.5-turbo-16k-0613" | "gpt-4.1" | "gpt-4.1-mini" | "gpt-4.1-nano" | "gpt-4.1-2025-04-14" | "gpt-4.1-mini-2025-04-14" | "gpt-4.1-nano-2025-04-14" | "o1" | "o1-mini" | "o1-preview" | "o1-pro" | "o1-2024-12-17" | "o1-preview-2024-09-12" | "o1-mini-2024-09-12" | "o1-pro-2025-03-19" | "o3" | "o3-mini" | "o3-2025-04-16" | "o3-mini-2025-01-31" | "o4-mini" | "o4-mini-2025-04-16" | "gpt-4o" | "gpt-4o-mini" | "gpt-4o-2024-11-20" | "gpt-4o-2024-08-06" | "gpt-4o-2024-05-13" | "gpt-4o-mini-2024-07-18" | "gpt-4o-audio-preview" | "gpt-4o-audio-preview-2024-10-01" | "gpt-4o-audio-preview-2024-12-17" | "gpt-4o-mini-audio-preview" | "gpt-4o-mini-audio-preview-2024-12-17" | "gpt-4o-search-preview" | "gpt-4o-mini-search-preview" | "gpt-4o-search-preview-2025-03-11" | "gpt-4o-mini-search-preview-2025-03-11" | "computer-use-preview" | "computer-use-preview-2025-03-11" | "gpt-5" | "gpt-5-mini" | "gpt-5-nano" | "chatgpt-4o-latest";
+        MoonvalleyTextToVideoInferenceParams: {
+            /**
+             * @description Height of the generated video in pixels
+             * @default 1080
+             */
+            height: number;
+            /**
+             * @description Width of the generated video in pixels
+             * @default 1920
+             */
+            width: number;
+            /**
+             * Format: float
+             * @description Guidance scale for generation control
+             * @default 10
+             */
+            guidance_scale: number;
+            /**
+             * @description Random seed for generation (default: random)
+             * @default 9
+             */
+            seed: number;
+            /**
+             * @description Number of denoising steps
+             * @default 80
+             */
+            steps: number;
+            /**
+             * @description Whether to use negative prompts
+             * @default true
+             */
+            use_negative_prompts: boolean;
+            /** @description Negative prompt text */
+            negative_prompt?: string;
+        };
+        MoonvalleyVideoToVideoInferenceParams: {
+            /**
+             * Format: float
+             * @description Guidance scale for generation control
+             * @default 10
+             */
+            guidance_scale: number;
+            /**
+             * @description Random seed for generation (default: random)
+             * @default 9
+             */
+            seed: number;
+            /**
+             * @description Number of denoising steps
+             * @default 80
+             */
+            steps: number;
+            /**
+             * @description Whether to use negative prompts
+             * @default true
+             */
+            use_negative_prompts: boolean;
+            /** @description Negative prompt text */
+            negative_prompt?: string;
+            control_params?: {
+                /**
+                 * Format: int32
+                 * @description Intensity of motion control
+                 * @default 6
+                 */
+                motion_intensity: number;
+            };
+        };
+        MoonvalleyTextToImageRequest: {
+            prompt_text?: string;
+            image_url?: string;
+            inference_params?: components["schemas"]["MoonvalleyTextToVideoInferenceParams"];
+            webhook_url?: string;
+        };
+        MoonvalleyTextToVideoRequest: {
+            prompt_text?: string;
+            image_url?: string;
+            inference_params?: components["schemas"]["MoonvalleyTextToVideoInferenceParams"];
+            webhook_url?: string;
+        };
+        MoonvalleyVideoToVideoRequest: {
+            /** @description Describes the video to generate */
+            prompt_text: string;
+            /** @description Url to control video */
+            video_url: string;
+            /**
+             * @description Supported types for video control
+             * @enum {string}
+             */
+            control_type: "motion_control" | "pose_control";
+            /** @description Url to control image */
+            image_url?: string;
+            /** @description Parameters for video-to-video generation inference */
+            inference_params?: components["schemas"]["MoonvalleyVideoToVideoInferenceParams"];
+            /** @description Optional webhook URL for notifications */
+            webhook_url?: string;
+        };
+        MoonvalleyPromptResponse: {
+            id?: string;
+            status?: string;
+            prompt_text?: string;
+            output_url?: string;
+            inference_params?: Record<string, never>;
+            model_params?: Record<string, never>;
+            meta?: Record<string, never>;
+            frame_conditioning?: Record<string, never>;
+            error?: Record<string, never>;
+        };
+        MoonvalleyImageToVideoRequest: components["schemas"]["MoonvalleyTextToVideoRequest"] & {
+            keyframes?: {
+                [key: string]: {
+                    image_url?: string;
+                };
+            };
+        };
+        MoonvalleyResizeVideoRequest: components["schemas"]["MoonvalleyVideoToVideoRequest"] & {
+            frame_position?: number[];
+            frame_resolution?: number[];
+            scale?: number[];
+        };
+        MoonvalleyUploadFileRequest: {
+            /** Format: binary */
+            file?: string;
+        };
+        MoonvalleyUploadFileResponse: {
+            access_url?: string;
+        };
+        /** @description GitHub release webhook payload based on official webhook documentation */
+        GithubReleaseWebhook: {
+            /**
+             * @description The action performed on the release
+             * @enum {string}
+             */
+            action: "published" | "unpublished" | "created" | "edited" | "deleted" | "prereleased" | "released";
+            /** @description The release object */
+            release: {
+                /** @description The ID of the release */
+                id: number;
+                /** @description The node ID of the release */
+                node_id: string;
+                /** @description The API URL of the release */
+                url: string;
+                /** @description The HTML URL of the release */
+                html_url: string;
+                /** @description The URL to the release assets */
+                assets_url?: string;
+                /** @description The URL to upload release assets */
+                upload_url?: string;
+                /** @description The tag name of the release */
+                tag_name: string;
+                /** @description The branch or commit the release was created from */
+                target_commitish: string;
+                /** @description The name of the release */
+                name?: string | null;
+                /** @description The release notes/body */
+                body?: string | null;
+                /** @description Whether the release is a draft */
+                draft: boolean;
+                /** @description Whether the release is a prerelease */
+                prerelease: boolean;
+                /**
+                 * Format: date-time
+                 * @description When the release was created
+                 */
+                created_at: string;
+                /**
+                 * Format: date-time
+                 * @description When the release was published
+                 */
+                published_at?: string | null;
+                author: components["schemas"]["GithubUser"];
+                /** @description URL to the tarball */
+                tarball_url: string;
+                /** @description URL to the zipball */
+                zipball_url: string;
+                /** @description Array of release assets */
+                assets: components["schemas"]["GithubReleaseAsset"][];
+            };
+            repository: components["schemas"]["GithubRepository"];
+            sender: components["schemas"]["GithubUser"];
+            organization?: components["schemas"]["GithubOrganization"];
+            installation?: components["schemas"]["GithubInstallation"];
+            enterprise?: components["schemas"]["GithubEnterprise"];
+        };
+        /** @description A GitHub user */
+        GithubUser: {
+            /** @description The user's login name */
+            login: string;
+            /** @description The user's ID */
+            id: number;
+            /** @description The user's node ID */
+            node_id: string;
+            /** @description URL to the user's avatar */
+            avatar_url: string;
+            /** @description The user's gravatar ID */
+            gravatar_id?: string | null;
+            /** @description The API URL of the user */
+            url: string;
+            /** @description The HTML URL of the user */
+            html_url: string;
+            /**
+             * @description The type of user
+             * @enum {string}
+             */
+            type: "Bot" | "User" | "Organization";
+            /** @description Whether the user is a site admin */
+            site_admin: boolean;
+        };
+        /** @description A GitHub repository */
+        GithubRepository: {
+            /** @description The repository ID */
+            id: number;
+            /** @description The repository node ID */
+            node_id: string;
+            /** @description The name of the repository */
+            name: string;
+            /** @description The full name of the repository (owner/repo) */
+            full_name: string;
+            /** @description Whether the repository is private */
+            private: boolean;
+            owner: components["schemas"]["GithubUser"];
+            /** @description The HTML URL of the repository */
+            html_url: string;
+            /** @description The repository description */
+            description?: string | null;
+            /** @description Whether the repository is a fork */
+            fork: boolean;
+            /** @description The API URL of the repository */
+            url: string;
+            /** @description The clone URL of the repository */
+            clone_url: string;
+            /** @description The git URL of the repository */
+            git_url: string;
+            /** @description The SSH URL of the repository */
+            ssh_url: string;
+            /** @description The default branch of the repository */
+            default_branch: string;
+            /**
+             * Format: date-time
+             * @description When the repository was created
+             */
+            created_at: string;
+            /**
+             * Format: date-time
+             * @description When the repository was last updated
+             */
+            updated_at: string;
+            /**
+             * Format: date-time
+             * @description When the repository was last pushed to
+             */
+            pushed_at: string;
+        };
+        /** @description A GitHub release asset */
+        GithubReleaseAsset: {
+            /** @description The asset ID */
+            id: number;
+            /** @description The asset node ID */
+            node_id: string;
+            /** @description The name of the asset */
+            name: string;
+            /** @description The label of the asset */
+            label?: string | null;
+            /** @description The content type of the asset */
+            content_type: string;
+            /**
+             * @description The state of the asset
+             * @enum {string}
+             */
+            state: "uploaded" | "open";
+            /** @description The size of the asset in bytes */
+            size: number;
+            /** @description The number of downloads */
+            download_count: number;
+            /**
+             * Format: date-time
+             * @description When the asset was created
+             */
+            created_at: string;
+            /**
+             * Format: date-time
+             * @description When the asset was last updated
+             */
+            updated_at: string;
+            /** @description The browser download URL */
+            browser_download_url: string;
+            uploader: components["schemas"]["GithubUser"];
+        };
+        /** @description A GitHub organization */
+        GithubOrganization: {
+            /** @description The organization's login name */
+            login: string;
+            /** @description The organization ID */
+            id: number;
+            /** @description The organization node ID */
+            node_id: string;
+            /** @description The API URL of the organization */
+            url: string;
+            /** @description The API URL of the organization's repositories */
+            repos_url: string;
+            /** @description The API URL of the organization's events */
+            events_url: string;
+            /** @description The API URL of the organization's hooks */
+            hooks_url: string;
+            /** @description The API URL of the organization's issues */
+            issues_url: string;
+            /** @description The API URL of the organization's members */
+            members_url: string;
+            /** @description The API URL of the organization's public members */
+            public_members_url: string;
+            /** @description URL to the organization's avatar */
+            avatar_url: string;
+            /** @description The organization description */
+            description?: string | null;
+        };
+        /** @description A GitHub App installation */
+        GithubInstallation: {
+            /** @description The installation ID */
+            id: number;
+            account: components["schemas"]["GithubUser"];
+            /**
+             * @description Repository selection for the installation
+             * @enum {string}
+             */
+            repository_selection: "selected" | "all";
+            /** @description The API URL for access tokens */
+            access_tokens_url: string;
+            /** @description The API URL for repositories */
+            repositories_url: string;
+            /** @description The HTML URL of the installation */
+            html_url: string;
+            /** @description The GitHub App ID */
+            app_id: number;
+            /** @description The target ID */
+            target_id: number;
+            /** @description The target type */
+            target_type: string;
+            /** @description The installation permissions */
+            permissions: Record<string, never>;
+            /** @description The events the installation subscribes to */
+            events: string[];
+            /**
+             * Format: date-time
+             * @description When the installation was created
+             */
+            created_at: string;
+            /**
+             * Format: date-time
+             * @description When the installation was last updated
+             */
+            updated_at: string;
+            /** @description The single file name if applicable */
+            single_file_name?: string | null;
+        };
+        /** @description A GitHub enterprise */
+        GithubEnterprise: {
+            /** @description The enterprise ID */
+            id: number;
+            /** @description The enterprise slug */
+            slug: string;
+            /** @description The enterprise name */
+            name: string;
+            /** @description The enterprise node ID */
+            node_id: string;
+            /** @description URL to the enterprise avatar */
+            avatar_url: string;
+            /** @description The enterprise description */
+            description?: string | null;
+            /** @description The enterprise website URL */
+            website_url?: string | null;
+            /** @description The HTML URL of the enterprise */
+            html_url: string;
+            /**
+             * Format: date-time
+             * @description When the enterprise was created
+             */
+            created_at: string;
+            /**
+             * Format: date-time
+             * @description When the enterprise was last updated
+             */
+            updated_at: string;
+        };
+        ReleaseNote: {
+            /** @description Unique identifier for the release note */
+            id: number;
+            /**
+             * @description The project this release note belongs to
+             * @enum {string}
+             */
+            project: "comfyui" | "comfyui_frontend" | "desktop";
+            /** @description The version of the release */
+            version: string;
+            /**
+             * @description The attention level for this release
+             * @enum {string}
+             */
+            attention: "low" | "medium" | "high";
+            /** @description The content of the release note in markdown format */
+            content: string;
+            /**
+             * Format: date-time
+             * @description When the release note was published
+             */
+            published_at: string;
+        };
+        ViduCreation: {
+            id?: string;
+            url?: string;
+            cover_url?: string;
+            watermarked_url?: string;
+            moderation_url?: string[];
+        };
+        /** @enum {string} */
+        ViduState: "created" | "processing" | "queueing" | "success" | "failed";
+        ViduGetCreationsReply: {
+            state?: components["schemas"]["ViduState"];
+            err_code?: string;
+            creations?: components["schemas"]["ViduCreation"][];
+            id?: string;
+        };
+        ViduTaskReply: {
+            task_id: string;
+            state: components["schemas"]["ViduState"];
+            model?: string;
+            /** @enum {string} */
+            style?: "general" | "anime";
+            prompt?: string;
+            images?: string[];
+            /** Format: int32 */
+            duration?: number;
+            /** Format: int32 */
+            seed?: number;
+            aspect_ratio?: string;
+            resolution?: string;
+            /** @enum {string} */
+            movement_amplitude?: "auto" | "small" | "medium" | "large";
+            /** Format: date-time */
+            created_at?: string;
+            /** Format: int32 */
+            credits: number;
+        };
+        ViduTaskRequest: {
+            model?: string;
+            /** @enum {string} */
+            style?: "general" | "anime";
+            prompt?: string;
+            images?: string[];
+            /** Format: int32 */
+            duration?: number;
+            /** Format: int32 */
+            seed?: number;
+            aspect_ratio?: string;
+            resolution?: string;
+            /** @enum {string} */
+            movement_amplitude?: "auto" | "small" | "medium" | "large";
+            enhance?: boolean;
+            callback_url?: string;
+            /** Format: int32 */
+            priority?: number;
+        };
+        BytePlusImageGenerationRequest: {
+            /** @enum {string} */
+            model: "seedream-3-0-t2i-250415" | "seededit-3-0-i2i-250628" | "seedream-4-0-250828";
+            /** @description Text description for image generation or transformation */
+            prompt: string;
+            /**
+             * @description Only seedream-4.0 and seededit-3.0-i2i support this parameter.
+             *
+             *     Enter the Base64 encoding or an accessible URL of the image to edit. Among the models, bytedance-seedream-4.0 supports inputting a single image or multiple images (see the multi-image blending example), while bytedance-seededit-3.0-i2 only supports single-image input.
+             *
+             *     • Image URL: Make sure that the image URL is accessible.
+             *     • Base64 encoding: The format must be data:image/<image format>;base64,<Base64 encoding>. Note: <image format> must be in lowercase, e.g., data:image/png;base64,<base64_image>.
+             *
+             *     An input image must meet the following requirements:
+             *     • Image format: jpeg, png
+             *     • Aspect ratio (width/height): In the range [1/3, 3]
+             *     • Width and height (px): > 14
+             *     • Size: No more than 10 MB
+             */
+            image?: string | string[];
+            /**
+             * @description "seedream-3-0-t2i-250415": Specifies the dimensions (width x height in pixels) of the generated image. Must be between [512x512, 2048x2048]
+             *     "seededit-3-0-i2i-250628": The width and height pixels of the generated image. Currently only supports adaptive.
+             *     "seedream-4-0-250828": Set the specification for the generated image. Two methods are available but cannot be used together.
+             *       Method 1 | Example: Specify the resolution of the generated image, and describe its aspect ratio, shape, or purpose in the prompt using natural language, let the model ultimately determine the final image width and height.
+             *         Optional values: 1K, 2K, 4K
+             *       Method 2 | Example: Specify the width and height of the generated image in pixels:
+             *         Default value: 2048x2048
+             *         The value range of total pixels: [1024x1024, 4096x4096]
+             *         The aspect ratio value range: [1/16, 16]
+             */
+            size?: string;
+            /**
+             * @description Specifies the format of the generated image returned in the response
+             * @default url
+             * @enum {string}
+             */
+            response_format: "url" | "b64_json";
+            /**
+             * @description Random seed to control the stochasticity of image generation. Range: [-1, 2147483647]. If not specified, a seed will be automatically generated. To reproduce the same output, use the same seed value.
+             * @default -1
+             */
+            seed: number;
+            /**
+             * @description Controls whether to disable the batch generation feature. This parameter is only supported on seedream-4.0. Valid values:
+             *     auto: In automatic mode, the model automatically determines whether to return multiple images and how many images it will contain based on the user's prompt.
+             *     disabled: Disables batch generation feature. The model will only generate one image.
+             */
+            sequential_image_generation?: string;
+            /**
+             * @description Only seedream-4.0 supports this parameter.
+             *     Configuration for the batch image generation feature. This parameter is only effective when sequential_image_generation is set to auto.
+             */
+            sequential_image_generation_options?: {
+                /**
+                 * @description Specifies the maximum number of images to generate in this request. Number of input reference images + Number of generated images ≤ 15.
+                 * @default 15
+                 */
+                max_images: number;
+            };
+            /**
+             * Format: float
+             * @description Controls how closely the output image aligns with the input prompt. Range [1, 10]. Higher values result in stronger prompt adherence. Default 2.5 for seedream-3-0-t2i-250415 and 5.5 for seededit-3-0-i2i-250628
+             */
+            guidance_scale?: number;
+            /**
+             * @description Specifies whether to add a watermark to the generated image. false = No watermark, true = Adds watermark with 'AI generated' label
+             * @default true
+             */
+            watermark: boolean;
+        };
+        BytePlusImageGenerationResponse: {
+            /**
+             * @description The model ID used for the request
+             * @example seedream-3-0-t2i-250415
+             */
+            model?: string;
+            /** @description Unix timestamp (in seconds) indicating the time when the request was created */
+            created?: number;
+            /** @description Contains information about the generated image(s) */
+            data?: {
+                /**
+                 * Format: uri
+                 * @description URL for image download (if response_format is "url")
+                 */
+                url?: string;
+                /** @description Base64-encoded image data (if response_format is "b64_json") */
+                b64_json?: string;
+            }[];
+            usage?: {
+                /** @description Number of images generated by the model */
+                generated_images?: number;
+                /** @description The number of tokens used for the picture generated by the model. */
+                output_tokens?: number;
+                /** @description The total number of tokens consumed by this request. */
+                total_tokens?: number;
+            };
+            /** @description Error information (if any) */
+            error?: {
+                /** @description Error code */
+                code?: string;
+                /** @description Error message */
+                message?: string;
+            };
+        };
+        BytePlusVideoGenerationRequest: {
+            /**
+             * @description The ID of the model to call. Available models include seedance-1-0-pro-250528, seedance-1-0-lite-t2v-250428, seedance-1-0-lite-i2v-250428
+             * @enum {string}
+             */
+            model: "seedance-1-0-pro-250528" | "seedance-1-0-lite-t2v-250428" | "seedance-1-0-lite-i2v-250428";
+            /** @description The input content for the model to generate a video */
+            content: components["schemas"]["BytePlusVideoGenerationContent"][];
+            /**
+             * Format: uri
+             * @description Callback notification address for the result of this generation task
+             */
+            callback_url?: string;
+        };
+        BytePlusVideoGenerationContent: {
+            /**
+             * @description The type of the input content
+             * @enum {string}
+             */
+            type: "text" | "image_url";
+            /**
+             * @description The input text information for the model. Includes text prompt and optional parameters.
+             *
+             *     Text prompt (required): Description of the video to be generated using Chinese and English characters.
+             *
+             *     Parameters (optional): Add --[parameters] after the text prompt to control video specifications:
+             *     - --resolution (--rs): 480p, 720p, 1080p (default: 720p)
+             *     - --ratio (--rt): 21:9, 16:9, 4:3, 1:1, 3:4, 9:16, 9:21, adaptive (default: 16:9 or adaptive)
+             *     - --duration (--dur): 3-12 seconds (default: 5)
+             *     - --framepersecond (--fps): 24 (default: 24)
+             *     - --watermark (--wm): true/false (default: false)
+             *     - --seed (--seed): -1 to 2^32-1 (default: -1)
+             *     - --camerafixed (--cf): true/false (default: false)
+             *
+             *     Example: "A beautiful landscape --ratio 16:9 --resolution 720p --duration 5"
+             */
+            text?: string;
+            image_url?: {
+                /**
+                 * @description Image content for image-to-video generation (when type is "image")
+                 *     Image URL: Make sure that the image URL is accessible.
+                 *     Base64-encoded content: Format must be data:image/<format>;base64,<content>
+                 */
+                url?: string;
+            };
+        };
+        BytePlusVideoGenerationResponse: {
+            /** @description The ID of the video generation task */
+            id: string;
+        };
+        BytePlusVideoGenerationQueryResponse: {
+            /** @description The ID of the video generation task */
+            id?: string;
+            /** @description The name and version of the model used by the task */
+            model?: string;
+            /**
+             * @description The state of the task
+             * @enum {string}
+             */
+            status?: "queued" | "running" | "cancelled" | "succeeded" | "failed";
+            /** @description The error information. If the task succeeds, null is returned. If the task fails, the error information is returned. */
+            error?: {
+                /** @description The error code */
+                code?: string;
+                /** @description The error message */
+                message?: string;
+            } | null;
+            /** @description The time when the task was created. The value is a UNIX timestamp in seconds. */
+            created_at?: number;
+            /** @description The time when the task was last updated. The value is a UNIX timestamp in seconds. */
+            updated_at?: number;
+            /** @description The output after the video generation task is completed, which contains the download URL of the output video. */
+            content?: {
+                /** @description The URL of the output video. For security purposes, the output video is cleared after 24 hours. */
+                video_url?: string;
+            };
+            /** @description The token usage for the request */
+            usage?: {
+                /** @description The number of tokens generated by the model */
+                completion_tokens?: number;
+                /** @description For the video generation model, the number of input tokens is not calculated and defaults to 0. Therefore, total_tokens = completion_tokens. */
+                total_tokens?: number;
+            };
+        };
+        WanVideoGenerationRequest: {
+            /**
+             * @description The ID of the model to call
+             * @enum {string}
+             */
+            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview";
+            /** @description Enter basic information, such as prompt words, etc. */
+            input: {
+                /** @description Text prompt words. Support Chinese and English, length not exceeding 800 characters */
+                prompt: string;
+                /** @description Reverse prompt words are used to describe content that you do not want to see in the video screen */
+                negative_prompt?: string;
+                /** @description Audio file download URL. Supported formats: mp3 and wav. */
+                audio_url?: string;
+                /** @description First frame image URL or Base64 encoded data. Required for I2V models. Image formats: JPEG, JPG, PNG, BMP, WEBP. Resolution: 360-2000 pixels. File size: max 10MB. */
+                img_url?: string;
+                /** @description Video effect template name. Optional. Currently supported: squish, flying, carousel. When used, prompt parameter is ignored. */
+                template?: string;
+            };
+            /** @description Video processing parameters */
+            parameters?: {
+                /** @description Used to specify the video resolution in the format of 宽*高. Supported resolutions vary by model (for T2V models) */
+                size?: string;
+                /**
+                 * @description Resolution level for I2V models. Supported values vary by model: 480P, 720P, 1080P
+                 * @enum {string}
+                 */
+                resolution?: "480P" | "720P" | "1080P";
+                /**
+                 * @description The duration of the video generated, in seconds
+                 * @default 5
+                 * @enum {integer}
+                 */
+                duration?: 5 | 10;
+                /**
+                 * @description Is it enabled prompt intelligent rewriting. Default is true
+                 * @default true
+                 */
+                prompt_extend?: boolean;
+                /** @description Random number seed, used to control the randomness of the model generated content */
+                seed?: number;
+                /**
+                 * @description Whether to add a watermark logo, the watermark is located in the lower right corner
+                 * @default false
+                 */
+                watermark?: boolean;
+                /**
+                 * @description Whether to add audio to the video
+                 * @default true
+                 */
+                audio?: boolean;
+            };
+        };
+        WanVideoGenerationResponse: {
+            output: {
+                /** @description Task ID */
+                task_id: string;
+                /**
+                 * @description Task status
+                 * @enum {string}
+                 */
+                task_status: "PENDING" | "RUNNING" | "SUCCEEDED" | "FAILED" | "CANCELED" | "UNKNOWN";
+            };
+            /** @description Unique request identifier */
+            request_id: string;
+            /** @description The error code for the failed request (not returned if request is successful) */
+            code?: string;
+            /** @description Detailed information about the failed request (not returned if request is successful) */
+            message?: string;
+        };
+        WanTaskQueryResponse: {
+            /** @description Unique request identifier */
+            request_id: string;
+            output: {
+                /** @description Task ID */
+                task_id: string;
+                /**
+                 * @description Task status
+                 * @enum {string}
+                 */
+                task_status: "PENDING" | "RUNNING" | "SUCCEEDED" | "FAILED" | "CANCELED" | "UNKNOWN";
+                /** @description Task submission time */
+                submit_time?: string;
+                /** @description Task execution time */
+                scheduled_time?: string;
+                /** @description Task completion time */
+                end_time?: string;
+                /** @description Video URL for completed video generation tasks. Link validity period 24 hours */
+                video_url?: string;
+                /** @description Audio URL for I2V tasks with audio generation */
+                check_audio?: string;
+                /** @description Original input prompt (for video tasks) */
+                orig_prompt?: string;
+                /** @description Actual prompt after intelligent rewriting (for video tasks) */
+                actual_prompt?: string;
+                /** @description List of task results for image generation tasks */
+                results?: {
+                    /** @description Original input prompt */
+                    orig_prompt?: string;
+                    /** @description Actual prompt after intelligent rewriting (if enabled) */
+                    actual_prompt?: string;
+                    /** @description Generated image URL address */
+                    url?: string;
+                    /** @description Image error code (returned when some tasks fail) */
+                    code?: string;
+                    /** @description Image error information (returned when some tasks fail) */
+                    message?: string;
+                }[];
+                /** @description Task result statistics for image generation tasks */
+                task_metrics?: {
+                    /** @description Total number of tasks */
+                    TOTAL?: number;
+                    /** @description Number of successful tasks */
+                    SUCCEEDED?: number;
+                    /** @description Number of failed tasks */
+                    FAILED?: number;
+                };
+                /** @description The error code for the failed request (not returned if request is successful) */
+                code?: string;
+                /** @description Detailed information about the failed request (not returned if request is successful) */
+                message?: string;
+            };
+            /** @description Output information statistics. Only successful results are counted */
+            usage?: {
+                /** @description Duration of generated video in seconds (T2V tasks) */
+                video_duration?: number;
+                /** @description Video resolution ratio (T2V tasks) */
+                video_ratio?: string;
+                /** @description Number of generated videos (T2V tasks) */
+                video_count?: number;
+                /** @description Duration of generated video in seconds (I2V tasks) */
+                duration?: number;
+                /** @description Video resolution level (I2V tasks) */
+                SR?: number;
+                /** @description Image resolution (T2I tasks) */
+                size?: string;
+                /** @description Number of generated images (T2I tasks) */
+                image_count?: number;
+            };
+        };
+        WanImageGenerationRequest: {
+            /**
+             * @description The ID of the model to call for text-to-image generation
+             * @enum {string}
+             */
+            model: "wan2.5-t2i-preview";
+            /** @description Enter basic information, such as prompt words, etc. */
+            input: {
+                /** @description Positive prompt words to describe expected image elements and visual features. Support Chinese and English, length not exceeding 800 characters */
+                prompt: string;
+                /** @description Reverse prompt words to describe content that you do not want to see in the image */
+                negative_prompt?: string;
+            };
+            /** @description Image processing parameters */
+            parameters?: {
+                /**
+                 * @description Output image resolution. Default is 1024*1024. Pixel range [512, 1440], up to 200 megapixels
+                 * @default 1024*1024
+                 */
+                size?: string;
+                /**
+                 * @description Number of generated images. Range 1-4, default is 4
+                 * @default 4
+                 */
+                n?: number;
+                /** @description Random number seed to control randomness. Range [0, 2147483647] */
+                seed?: number;
+                /**
+                 * @description Enable prompt intelligent rewriting. Default is true
+                 * @default true
+                 */
+                prompt_extend?: boolean;
+                /**
+                 * @description Whether to add watermark logo in lower right corner
+                 * @default false
+                 */
+                watermark?: boolean;
+            };
+        };
+        WanImageGenerationResponse: {
+            output: {
+                /** @description Task ID */
+                task_id: string;
+                /**
+                 * @description Task status
+                 * @enum {string}
+                 */
+                task_status: "PENDING" | "RUNNING" | "SUCCEEDED" | "FAILED" | "CANCELED" | "UNKNOWN";
+            };
+            /** @description Unique request identifier */
+            request_id: string;
+            /** @description The error code for the failed request (not returned if request is successful) */
+            code?: string;
+            /** @description Detailed information about the failed request (not returned if request is successful) */
+            message?: string;
+        };
+        WanImage2ImageGenerationRequest: {
+            /**
+             * @description The ID of the model to call for image-to-image generation
+             * @enum {string}
+             */
+            model: "wan2.5-i2i-preview";
+            /** @description Enter basic information, such as prompt words, images, etc. */
+            input: {
+                /** @description Positive prompt words to describe expected image elements and visual features. Support Chinese and English, length not exceeding 2000 characters */
+                prompt: string;
+                /** @description Array of image URLs for image-to-image generation */
+                images: string[];
+                /** @description Reverse prompt words to describe content that you do not want to see in the image */
+                negative_prompt?: string;
+            };
+            /** @description Image processing parameters */
+            parameters?: {
+                /**
+                 * @description Output image resolution. Default is 1280*1280. Width and height must be between 384 and 5000 pixels.
+                 * @default 1280*1280
+                 */
+                size?: string;
+                /**
+                 * @description Number of generated images. Range 1-4, default is 1
+                 * @default 1
+                 */
+                n?: number;
+                /** @description Random number seed to control randomness. Range [0, 2147483647] */
+                seed?: number;
+                /**
+                 * @description Whether to add watermark logo in lower right corner
+                 * @default false
+                 */
+                watermark?: boolean;
+            };
+        };
+        WanImage2ImageGenerationResponse: {
+            output: {
+                /** @description Task ID */
+                task_id: string;
+                /**
+                 * @description Task status
+                 * @enum {string}
+                 */
+                task_status: "PENDING" | "RUNNING" | "SUCCEEDED" | "FAILED" | "CANCELED" | "UNKNOWN";
+            };
+            /** @description Unique request identifier */
+            request_id: string;
+            /** @description The error code for the failed request (not returned if request is successful) */
+            code?: string;
+            /** @description Detailed information about the failed request (not returned if request is successful) */
+            message?: string;
+        };
+    };
+    responses: never;
+    parameters: {
+        /** @description Unique UUID for each request. */
+        PixverseAiTraceId: string;
+    };
+    requestBodies: never;
+    headers: never;
+    pathItems: never;
 }
-export type $defs = Record<string, never>
+export type $defs = Record<string, never>;
 export interface operations {
-  getUser: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['User']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not Found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  searchCustomers: {
-    parameters: {
-      query?: {
-        /** @description Email address to search for */
-        email?: string
-        /** @description Customer name to search for */
-        name?: string
-        /** @description Stripe customer ID to search for */
-        stripe_id?: string
-        /** @description Metronome customer ID to search for\ */
-        metronome_id?: string
-        /** @description Page number to retrieve */
-        page?: number
-        /** @description Number of customers to return per page */
-        limit?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Customers matching the search criteria */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description Current page number */
-            page?: number
-            /** @description Number of customers per page */
-            limit?: number
-            /** @description Total number of pages available */
-            totalPages?: number
-            customers?: components['schemas']['Customer'][]
-            /** @description Total number of matching customers */
-            total?: number
-          }
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden - insufficient permissions */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  createCustomer: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Customer already exists */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Customer']
-        }
-      }
-      /** @description Customer created successfully */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Customer']
-        }
-      }
-      /** @description Invalid request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getAuthenticatedCustomer: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Customer details retrieved successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Customer']
-        }
-      }
-      /** @description Unauthorized or invalid token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getCustomerById: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        customer_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Customer details retrieved successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            customer?: components['schemas']['Customer']
-          }
-        }
-      }
-      /** @description Unauthorized or invalid token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listCustomerAPIKeys: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description List of API keys */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            api_keys?: components['schemas']['APIKey'][]
-          }
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  createCustomerAPIKey: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['CreateAPIKeyRequest']
-      }
-    }
-    responses: {
-      /** @description API key created */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            api_key?: components['schemas']['APIKeyWithPlaintext']
-          }
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer or API key not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  deleteCustomerAPIKey: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        api_key_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description API key deleted */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer or API key not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  InitiateCreditPurchase: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': {
-          /**
-           * Format: int64
-           * @description the amount of the checkout transaction in micro value
-           */
-          amount_micros: number
-          /** @description the currency used in the checkout transaction */
-          currency: string
-        }
-      }
-    }
-    responses: {
-      /** @description Customer Checkout created successfully */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description the url to redirect the customer */
-            checkout_url?: string
-          }
-        }
-      }
-      /** @description Bad request, invalid token or user already exists */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized or invalid token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  AccessBillingPortal: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'application/json': {
-          /** @description Optional URL to redirect the customer after they're done with the billing portal */
-          return_url?: string
-        }
-      }
-    }
-    responses: {
-      /** @description Billing portal session created successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description The URL to redirect the customer to the billing portal */
-            billing_portal_url?: string
-          }
-        }
-      }
-      /** @description Bad request, invalid input */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized or invalid token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  GetCustomerUsage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description The dashboard URL for the customer's usage */
-            url?: string
-          }
-        }
-      }
-      /** @description Unauthorized or invalid token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  GetCustomerBalance: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Customer balance retrieved successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
+    getUser: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["User"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    searchCustomers: {
+        parameters: {
+            query?: {
+                /** @description Email address to search for */
+                email?: string;
+                /** @description Customer name to search for */
+                name?: string;
+                /** @description Stripe customer ID to search for */
+                stripe_id?: string;
+                /** @description Metronome customer ID to search for\ */
+                metronome_id?: string;
+                /** @description Page number to retrieve */
+                page?: number;
+                /** @description Number of customers to return per page */
+                limit?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Customers matching the search criteria */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Number of customers per page */
+                        limit?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                        customers?: components["schemas"]["Customer"][];
+                        /** @description Total number of matching customers */
+                        total?: number;
+                    };
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden - insufficient permissions */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    createCustomer: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Customer already exists */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Customer"];
+                };
+            };
+            /** @description Customer created successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Customer"];
+                };
+            };
+            /** @description Invalid request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getAuthenticatedCustomer: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Customer details retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Customer"];
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getCustomerById: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                customer_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Customer details retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        customer?: components["schemas"]["CustomerAdmin"];
+                    };
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listCustomerAPIKeys: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description List of API keys */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        api_keys?: components["schemas"]["APIKey"][];
+                    };
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    createCustomerAPIKey: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateAPIKeyRequest"];
+            };
+        };
+        responses: {
+            /** @description API key created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        api_key?: components["schemas"]["APIKeyWithPlaintext"];
+                    };
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer or API key not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    deleteCustomerAPIKey: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                api_key_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description API key deleted */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer or API key not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    InitiateCreditPurchase: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    /**
+                     * Format: int64
+                     * @description the amount of the checkout transaction in micro value
+                     */
+                    amount_micros: number;
+                    /** @description the currency used in the checkout transaction */
+                    currency: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Customer Checkout created successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description the url to redirect the customer */
+                        checkout_url?: string;
+                    };
+                };
+            };
+            /** @description Bad request, invalid token or user already exists */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    AccessBillingPortal: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "application/json": {
+                    /** @description Optional URL to redirect the customer after they're done with the billing portal */
+                    return_url?: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Billing portal session created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description The URL to redirect the customer to the billing portal */
+                        billing_portal_url?: string;
+                    };
+                };
+            };
+            /** @description Bad request, invalid input */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    createCloudSubscriptionCheckout: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Subscription checkout session created successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description The URL to redirect the customer to complete subscription */
+                        checkout_url?: string;
+                    };
+                };
+            };
+            /** @description Bad request, invalid input */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GetCloudSubscriptionStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Cloud subscription status retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Whether the customer has an active cloud subscription */
+                        is_active?: boolean;
+                        /** @description The active subscription ID if one exists */
+                        subscription_id?: string | null;
+                        /**
+                         * Format: date-time
+                         * @description The next renewal date for the subscription (ISO 8601 format)
+                         */
+                        renewal_date?: string | null;
+                        /**
+                         * Format: date-time
+                         * @description The date when the subscription is set to end (ISO 8601 format)
+                         */
+                        end_date?: string | null;
+                    };
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GetCustomerUsage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description The dashboard URL for the customer's usage */
+                        url?: string;
+                    };
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GetCustomerBalance: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Customer balance retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /**
+                         * Format: double
+                         * @description The total remaining balance in microamount (1/1,000,000 of the currency unit)
+                         */
+                        amount_micros: number;
+                        /**
+                         * Format: double
+                         * @description The remaining balance from prepaid commits in microamount
+                         */
+                        prepaid_balance_micros?: number;
+                        /**
+                         * Format: double
+                         * @description The remaining balance from cloud credits in microamount
+                         */
+                        cloud_credit_balance_micros?: number;
+                        /** @description The currency code (e.g., "usd") */
+                        currency: string;
+                    };
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GetCustomerBalanceById: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the customer whose balance to retrieve */
+                customer_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Customer balance retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /**
+                         * Format: double
+                         * @description The total remaining balance in microamount (1/1,000,000 of the currency unit)
+                         */
+                        amount_micros: number;
+                        /**
+                         * Format: double
+                         * @description The remaining balance from prepaid commits in microamount
+                         */
+                        prepaid_balance_micros?: number;
+                        /**
+                         * Format: double
+                         * @description The remaining balance from cloud credits in microamount
+                         */
+                        cloud_credit_balance_micros?: number;
+                        /** @description The currency code (e.g., "usd") */
+                        currency: string;
+                    };
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized or invalid token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Customer not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    createCustomerStorageResource: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    /** @description The desired name of the file (e.g., 'profile.jpg') */
+                    file_name: string;
+                    /** @description The content type of the file (e.g., 'image/png') */
+                    content_type?: string;
+                    /** @description The hash of the file. If provided, an existing file with the same hash may be returned. */
+                    file_hash?: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Signed URL generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CustomerStorageResourceResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GetCustomerEventsById: {
+        parameters: {
+            query?: {
+                /** @description Page number of the nodes list */
+                page?: number;
+                /** @description Number of nodes to return per page */
+                limit?: number;
+                /** @description Event type to filter */
+                filter?: string;
+            };
+            header?: never;
+            path: {
+                customer_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A paginated list of nodes */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Total number of events available */
+                        total?: number;
+                        events?: components["schemas"]["AuditLog"][];
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Maximum number of nodes per page */
+                        limit?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                    };
+                };
+            };
+            /** @description Invalid input, object invalid */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GetCustomerEvents: {
+        parameters: {
+            query?: {
+                /** @description Page number of the nodes list */
+                page?: number;
+                /** @description Number of nodes to return per page */
+                limit?: number;
+                /** @description Event type to filter */
+                filter?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A paginated list of nodes */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Total number of events available */
+                        total?: number;
+                        events?: components["schemas"]["AuditLog"][];
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Maximum number of nodes per page */
+                        limit?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                    };
+                };
+            };
+            /** @description Invalid input, object invalid */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getWorkflowResult: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                workflowResultId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Commit details */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ActionJobResult"];
+                };
+            };
+            /** @description Commit not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listPublishersForUser: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A list of publishers */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Publisher"][];
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getPermissionOnPublisher: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A list of permissions */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        canEdit?: boolean;
+                    };
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    validatePublisher: {
+        parameters: {
+            query: {
+                /** @description The publisher username to validate. */
+                username: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Username validation result */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description True if the username is available, false otherwise. */
+                        isAvailable?: boolean;
+                    };
+                };
+            };
+            /** @description Invalid input, such as missing username in the query. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listPublishers: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A list of publishers */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Publisher"][];
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    createPublisher: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Publisher"];
+            };
+        };
+        responses: {
+            /** @description Publisher created successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Publisher"];
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getPublisher: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Publisher retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Publisher"];
+                };
+            };
+            /** @description Publisher not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    updatePublisher: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Publisher"];
+            };
+        };
+        responses: {
+            /** @description Publisher updated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Publisher"];
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Publisher not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    deletePublisher: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Publisher deleted successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Publisher not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    BanPublisher: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Publisher Banned Successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Publisher not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    claimMyNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ClaimMyNodeRequest"];
+            };
+        };
+        responses: {
+            /** @description Node claimed successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
             /**
-             * Format: double
-             * @description The remaining balance in microamount (1/1,000,000 of the currency unit)
+             * @description Forbidden - various authorization and permission issues
+             *     Includes:
+             *     - The authenticated user does not have permission to claim the node
+             *     - The node is already claimed by another publisher
+             *     - The GH_TOKEN is invalid
+             *     - The repository is not owned by the authenticated GitHub user
              */
-            amount_micros: number
-            /** @description The currency code (e.g., "usd") */
-            currency: string
-          }
-        }
-      }
-      /** @description Unauthorized or invalid token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  GetCustomerBalanceById: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description The ID of the customer whose balance to retrieve */
-        customer_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Customer balance retrieved successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /**
-             * Format: double
-             * @description The remaining balance in microamount (1/1,000,000 of the currency unit)
-             */
-            amount_micros: number
-            /** @description The currency code (e.g., "usd") */
-            currency: string
-          }
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized or invalid token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Customer not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  createCustomerStorageResource: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': {
-          /** @description The desired name of the file (e.g., 'profile.jpg') */
-          file_name: string
-          /** @description The content type of the file (e.g., 'image/png') */
-          content_type?: string
-          /** @description The hash of the file. If provided, an existing file with the same hash may be returned. */
-          file_hash?: string
-        }
-      }
-    }
-    responses: {
-      /** @description Signed URL generated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['CustomerStorageResourceResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  GetCustomerEventsById: {
-    parameters: {
-      query?: {
-        /** @description Page number of the nodes list */
-        page?: number
-        /** @description Number of nodes to return per page */
-        limit?: number
-        /** @description Event type to filter */
-        filter?: string
-      }
-      header?: never
-      path: {
-        customer_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A paginated list of nodes */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description Total number of events available */
-            total?: number
-            events?: components['schemas']['AuditLog'][]
-            /** @description Current page number */
-            page?: number
-            /** @description Maximum number of nodes per page */
-            limit?: number
-            /** @description Total number of pages available */
-            totalPages?: number
-          }
-        }
-      }
-      /** @description Invalid input, object invalid */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  GetCustomerEvents: {
-    parameters: {
-      query?: {
-        /** @description Page number of the nodes list */
-        page?: number
-        /** @description Number of nodes to return per page */
-        limit?: number
-        /** @description Event type to filter */
-        filter?: string
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A paginated list of nodes */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description Total number of events available */
-            total?: number
-            events?: components['schemas']['AuditLog'][]
-            /** @description Current page number */
-            page?: number
-            /** @description Maximum number of nodes per page */
-            limit?: number
-            /** @description Total number of pages available */
-            totalPages?: number
-          }
-        }
-      }
-      /** @description Invalid input, object invalid */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getWorkflowResult: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        workflowResultId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Commit details */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ActionJobResult']
-        }
-      }
-      /** @description Commit not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listPublishersForUser: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A list of publishers */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Publisher'][]
-        }
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getPermissionOnPublisher: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A list of permissions */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            canEdit?: boolean
-          }
-        }
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  validatePublisher: {
-    parameters: {
-      query: {
-        /** @description The publisher username to validate. */
-        username: string
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Username validation result */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description True if the username is available, false otherwise. */
-            isAvailable?: boolean
-          }
-        }
-      }
-      /** @description Invalid input, such as missing username in the query. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listPublishers: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A list of publishers */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Publisher'][]
-        }
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  createPublisher: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Publisher']
-      }
-    }
-    responses: {
-      /** @description Publisher created successfully */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Publisher']
-        }
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getPublisher: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Publisher retrieved successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Publisher']
-        }
-      }
-      /** @description Publisher not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  updatePublisher: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Publisher']
-      }
-    }
-    responses: {
-      /** @description Publisher updated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Publisher']
-        }
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Publisher not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  deletePublisher: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Publisher deleted successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Publisher not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  BanPublisher: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Publisher Banned Successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Publisher not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  claimMyNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['ClaimMyNodeRequest']
-      }
-    }
-    responses: {
-      /** @description Node claimed successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden - various authorization and permission issues
-       *     Includes:
-       *     - The authenticated user does not have permission to claim the node
-       *     - The node is already claimed by another publisher
-       *     - The GH_TOKEN is invalid
-       *     - The repository is not owned by the authenticated GitHub user
-       *      */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Too many requests - GitHub API rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Service unavailable - GitHub API is currently unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listNodesForPublisherV2: {
-    parameters: {
-      query?: {
-        /** @description Number of nodes to return per page */
-        include_banned?: boolean
-        /** @description Page number of the nodes list */
-        page?: number
-        /** @description Number of nodes to return per page */
-        limit?: number
-      }
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description List of all nodes */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description Total number of nodes available */
-            total?: number
-            nodes?: components['schemas']['Node'][]
-            /** @description Current page number */
-            page?: number
-            /** @description Maximum number of nodes per page */
-            limit?: number
-            /** @description Total number of pages available */
-            totalPages?: number
-          }
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listNodesForPublisher: {
-    parameters: {
-      query?: {
-        /** @description Number of nodes to return per page */
-        include_banned?: boolean
-      }
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description List of all nodes */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node'][]
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  createNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Node']
-      }
-    }
-    responses: {
-      /** @description Node created successfully */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node']
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  updateNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Node']
-      }
-    }
-    responses: {
-      /** @description Node updated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node']
-        }
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Node not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  deleteNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Node deleted successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Node not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getPermissionOnPublisherNodes: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A list of permissions */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            canEdit?: boolean
-          }
-        }
-      }
-      /** @description Bad request, invalid input data */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  publishNodeVersion: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': {
-          personal_access_token: string
-          node_version: components['schemas']['NodeVersion']
-          node: components['schemas']['Node']
-        }
-      }
-    }
-    responses: {
-      /** @description New version published successfully */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description The signed URL to upload the node version token. */
-            signedUrl?: string
-            node_version?: components['schemas']['NodeVersion']
-          }
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  updateNodeVersion: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-        versionId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['NodeVersionUpdateRequest']
-      }
-    }
-    responses: {
-      /** @description Version updated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['NodeVersion']
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  deleteNodeVersion: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-        versionId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Version unpublished (deleted) successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Version does not belong to the publisher */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Error']
-        }
-      }
-      /** @description Version not found */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  BanPublisherNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Node Banned Successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Publisher or Node not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listPersonalAccessTokens: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description List of all personal access tokens */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PersonalAccessToken'][]
-        }
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description No tokens found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  createPersonalAccessToken: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['PersonalAccessToken']
-      }
-    }
-    responses: {
-      /** @description Token created successfully */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description The newly created personal access token. */
-            token?: string
-          }
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  deletePersonalAccessToken: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        publisherId: string
-        tokenId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Token deleted successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Token not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  searchNodes: {
-    parameters: {
-      query?: {
-        /** @description Page number of the nodes list */
-        page?: number
-        /** @description Number of nodes to return per page */
-        limit?: number
-        /** @description Keyword to search the nodes */
-        search?: string
-        /** @description Keyword to search the nodes by repository URL */
-        repository_url_search?: string
-        /** @description Keyword to search the nodes by comfy node name */
-        comfy_node_search?: string
-        /** @description Filter nodes by supported operating systems */
-        supported_os?: string
-        /** @description Filter nodes by supported accelerator */
-        supported_accelerator?: string
-        /** @description Number of nodes to return per page */
-        include_banned?: boolean
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A paginated list of nodes */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description Total number of nodes available */
-            total?: number
-            nodes?: components['schemas']['Node'][]
-            /** @description Current page number */
-            page?: number
-            /** @description Maximum number of nodes per page */
-            limit?: number
-            /** @description Total number of pages available */
-            totalPages?: number
-          }
-        }
-      }
-      /** @description Invalid input, object invalid */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  reindexNodes: {
-    parameters: {
-      query?: {
-        /** @description Maximum number of nodes to send to algolia at a time */
-        max_batch?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Reindex completed successfully. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad request. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  updateGithubStars: {
-    parameters: {
-      query?: {
-        /** @description Maximum number of nodes to update in one batch */
-        max_batch?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Update GithubStars request triggered successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad request. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listAllNodes: {
-    parameters: {
-      query?: {
-        /** @description Page number of the nodes list */
-        page?: number
-        /** @description Number of nodes to return per page */
-        limit?: number
-        /** @description Filter nodes by supported operating systems */
-        supported_os?: string
-        /** @description Filter nodes by supported accelerator */
-        supported_accelerator?: string
-        /** @description Number of nodes to return per page */
-        include_banned?: boolean
-        /** @description Retrieve nodes created or updated after this timestamp (ISO 8601 format) */
-        timestamp?: string
-        /** @description Whether to fetch fresh result from database or use cached one if false */
-        latest?: boolean
-        /** @description Database column to use as ascending ordering. Add `;desc` as suffix on each column for descending sort */
-        sort?: string[]
-        /** @description node_id to use as filter */
-        node_id?: string[]
-        /** @description Comfy UI version */
-        comfyui_version?: string
-        /** @description The platform requesting the nodes */
-        form_factor?: string
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description A paginated list of nodes */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description Total number of nodes available */
-            total?: number
-            nodes?: components['schemas']['Node'][]
-            /** @description Current page number */
-            page?: number
-            /** @description Maximum number of nodes per page */
-            limit?: number
-            /** @description Total number of pages available */
-            totalPages?: number
-          }
-        }
-      }
-      /** @description Invalid input, object invalid */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getNodeByComfyNodeName: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description The name of the ComfyUI node */
-        comfyNodeName: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Node details */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node']
-        }
-      }
-      /** @description No node found containing the specified ComfyUI node name */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getNode: {
-    parameters: {
-      query?: {
-        /** @description Whether to include the translation or not */
-        include_translations?: boolean
-      }
-      header?: never
-      path: {
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Node details */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node']
-        }
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Node not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  postNodeReview: {
-    parameters: {
-      query: {
-        /** @description number of star given to the node version */
-        star: number
-      }
-      header?: never
-      path: {
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Detailed information about a specific node */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Node version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Error']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  installNode: {
-    parameters: {
-      query?: {
-        /** @description Specific version of the node to retrieve. If omitted, the latest version is returned. */
-        version?: string
-      }
-      header?: never
-      path: {
-        /** @description The unique identifier of the node. */
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Node data returned successfully. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['NodeVersion']
-        }
-      }
-      /** @description Invalid input, such as a bad version format. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Node not found. */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  CreateNodeTranslations: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description The unique identifier of the node. */
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': {
-          data?: {
-            [key: string]: {
-              [key: string]: unknown
-            }
-          }
-        }
-      }
-    }
-    responses: {
-      /** @description Detailed information about a specific node */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Node version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Error']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listNodeVersions: {
-    parameters: {
-      query?: {
-        statuses?: components['schemas']['NodeVersionStatus'][]
-        include_status_reason?: boolean
-      }
-      header?: never
-      path: {
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description List of all node versions */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['NodeVersion'][]
-        }
-      }
-      /** @description Node banned */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Node not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Error']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getNodeVersion: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        nodeId: string
-        /** @description The version of the node. (Not a UUID). */
-        versionId: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Detailed information about a specific node version */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['NodeVersion']
-        }
-      }
-      /** @description Node version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Error']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getBulkNodeVersions: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BulkNodeVersionsRequest']
-      }
-    }
-    responses: {
-      /** @description Successfully retrieved node versions */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BulkNodeVersionsResponse']
-        }
-      }
-      /** @description Bad request, invalid input */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  listAllNodeVersions: {
-    parameters: {
-      query?: {
-        nodeId?: string
-        statuses?: components['schemas']['NodeVersionStatus'][]
-        include_status_reason?: boolean
-        /** @description The page number to retrieve. */
-        page?: number
-        /** @description The number of items to include per page. */
-        pageSize?: number
-        /** @description search for status_reason, case insensitive */
-        status_reason?: string
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description List of all node versions */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /** @description Total number of node versions available */
-            total?: number
-            versions?: components['schemas']['NodeVersion'][]
-            /** @description Current page number */
-            page?: number
-            /** @description Maximum number of node versions per page. Maximum is 100. */
-            pageSize?: number
-            /** @description Total number of pages available */
-            totalPages?: number
-          }
-        }
-      }
-      /** @description Invalid input, object invalid */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Node banned */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  adminCreateNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Node']
-      }
-    }
-    responses: {
-      /** @description Node created successfully */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node']
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Duplicate error. */
-      409: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  adminUpdateNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        nodeId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Node']
-      }
-    }
-    responses: {
-      /** @description Node updated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Node']
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Node not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  adminUpdateNodeVersion: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        nodeId: string
-        versionNumber: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': {
-          status?: components['schemas']['NodeVersionStatus']
-          /** @description The reason for the status change. */
-          status_reason?: string
-          /** @description Supported versions of ComfyUI frontend */
-          supported_comfyui_frontend_version?: string
-          /** @description Supported versions of ComfyUI */
-          supported_comfyui_version?: string
-          /** @description List of operating systems that this node supports */
-          supported_os?: string[]
-          /** @description List of accelerators (e.g. CUDA, DirectML, ROCm) that this node supports */
-          supported_accelerators?: string[]
-        }
-      }
-    }
-    responses: {
-      /** @description Version updated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['NodeVersion']
-        }
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getReleaseNotes: {
-    parameters: {
-      query: {
-        /** @description The project to get release notes for */
-        project: 'comfyui' | 'comfyui_frontend' | 'desktop'
-        /** @description The current version to filter release notes */
-        current_version?: string
-        /** @description The locale for the release notes */
-        locale?: 'en' | 'es' | 'fr' | 'ja' | 'ko' | 'ru' | 'zh'
-        /** @description The platform requesting the release notes */
-        form_factor?: string
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Release notes retrieved successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ReleaseNote'][]
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  processReleaseWebhook: {
-    parameters: {
-      query?: never
-      header: {
-        /** @description The name of the event that triggered the delivery */
-        'X-GitHub-Event': 'release'
-        /** @description A globally unique identifier (GUID) to identify the event */
-        'X-GitHub-Delivery': string
-        /** @description The unique identifier of the webhook */
-        'X-GitHub-Hook-ID': string
-        /** @description HMAC hex digest of the request body using SHA-256 hash function */
-        'X-Hub-Signature-256'?: string
-        /** @description The type of resource where the webhook was created */
-        'X-GitHub-Hook-Installation-Target-Type'?: string
-        /** @description The unique identifier of the resource where the webhook was created */
-        'X-GitHub-Hook-Installation-Target-ID'?: string
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['GithubReleaseWebhook']
-      }
-    }
-    responses: {
-      /** @description Webhook processed successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Validation failed or endpoint has been spammed */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  securityScan: {
-    parameters: {
-      query?: {
-        minAge?: string
-        minSecurityScanAge?: string
-        maxNodes?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Scan completed successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  ListComfyNodes: {
-    parameters: {
-      query?: {
-        /** @description The page number to retrieve. */
-        page?: number
-        /** @description The number of items to include per page. */
-        limit?: number
-      }
-      header?: never
-      path: {
-        nodeId: string
-        version: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Comy Nodes obtained successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            comfy_nodes?: components['schemas']['ComfyNode'][]
-            totalNumberOfPages?: number
-          }
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  CreateComfyNodes: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        nodeId: string
-        version: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': {
-          success?: boolean
-          status?: string
-          reason?: string
-          cloud_build_info?: components['schemas']['ComfyNodeCloudBuildInfo']
-          nodes?: {
-            [key: string]: components['schemas']['ComfyNode']
-          }
-        }
-      }
-    }
-    responses: {
-      /** @description Comy Nodes created successfully */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Existing Comfy Nodes exists */
-      409: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  GetComfyNode: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        nodeId: string
-        version: string
-        comfyNodeName: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Comy Nodes created successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ComfyNode']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Version not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  ComfyNodesBackfill: {
-    parameters: {
-      query?: {
-        max_node?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Backfill triggered */
-      204: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad request, invalid input data. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  dummyProxy: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'application/json': {
-          message?: string
-        }
-      }
-    }
-    responses: {
-      /** @description Reindex completed successfully. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  minimaxVideoGeneration: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['MinimaxVideoGenerationRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from Minimax proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MinimaxVideoGenerationResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or Minimax) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with Minimax) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (Minimax took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  getMinimaxVideoGeneration: {
-    parameters: {
-      query: {
-        /** @description The task ID to be queried */
-        task_id: string
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response with task status */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MinimaxTaskResultResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or Minimax) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with Minimax) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (Minimax took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  retrieveMinimaxFile: {
-    parameters: {
-      query: {
-        /** @description Unique identifier for the file, obtained from the generation response */
-        file_id: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response with file download URL */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MinimaxFileRetrieveResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or Minimax) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with Minimax) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (Minimax took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  ideogramGenerate: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['IdeogramGenerateRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from Ideogram proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['IdeogramGenerateResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or Ideogram) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with Ideogram) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (Ideogram took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  ideogramV3Generate: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Parameters for Ideogram V3 image generation */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['IdeogramV3Request']
-      }
-    }
-    responses: {
-      /** @description Successful response from Ideogram proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['IdeogramGenerateResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  ideogramV3Edit: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Parameters for Ideogram V3 image editing */
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['IdeogramV3EditRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from Ideogram proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['IdeogramGenerateResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Prompt or Initial Image failed the safety checks. */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Rate limit exceeded (either from proxy or Ideogram) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  ideogramV3Remix: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['IdeogramV3RemixRequest']
-      }
-    }
-    responses: {
-      /** @description Remix generated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['IdeogramV3IdeogramResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unprocessable Entity */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Too Many Requests */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  ideogramV3Reframe: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['IdeogramV3ReframeRequest']
-      }
-    }
-    responses: {
-      /** @description Reframed image successfully returned */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['IdeogramV3IdeogramResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unprocessable Entity */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Too Many Requests */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  ideogramV3ReplaceBackground: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['IdeogramV3ReplaceBackgroundRequest']
-      }
-    }
-    responses: {
-      /** @description Background replaced successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['IdeogramV3IdeogramResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unprocessable Entity */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Too Many Requests */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  klingQueryResourcePackages: {
-    parameters: {
-      query: {
-        start_time: number
-        end_time: number
-        resource_pack_name?: string
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingResourcePackageResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingText2VideoQueryTaskList: {
-    parameters: {
-      query?: {
-        /** @description Page number */
-        pageNum?: number
-        /** @description Data volume per page */
-        pageSize?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingText2VideoResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingCreateVideoFromText: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Create task for generating video from text */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['KlingText2VideoRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingText2VideoResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingText2VideoQuerySingleTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Task ID or external_task_id */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingText2VideoResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingImage2VideoQueryTaskList: {
-    parameters: {
-      query?: {
-        /** @description Page number */
-        pageNum?: number
-        /** @description Data volume per page */
-        pageSize?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingImage2VideoResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingCreateVideoFromImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Create task for generating video from image */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['KlingImage2VideoRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingImage2VideoResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingImage2VideoQuerySingleTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Task ID or external_task_id */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingImage2VideoResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingVideoExtendQueryTaskList: {
-    parameters: {
-      query?: {
-        /** @description Page number */
-        pageNum?: number
-        /** @description Data volume per page */
-        pageSize?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVideoExtendResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingExtendVideo: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Create task for extending video duration */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['KlingVideoExtendRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVideoExtendResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingVideoExtendQuerySingleTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Task ID */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVideoExtendResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingLipSyncQueryTaskList: {
-    parameters: {
-      query?: {
-        /** @description Page number */
-        pageNum?: number
-        /** @description Data volume per page */
-        pageSize?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingLipSyncResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingCreateLipSyncVideo: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Create task for generating lip-sync video */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['KlingLipSyncRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingLipSyncResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingLipSyncQuerySingleTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Task ID or external_task_id */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingLipSyncResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingVideoEffectsQueryTaskList: {
-    parameters: {
-      query?: {
-        /** @description Page number */
-        pageNum?: number
-        /** @description Data volume per page */
-        pageSize?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVideoEffectsResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingCreateVideoEffects: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Create task for generating video with effects */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['KlingVideoEffectsRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVideoEffectsResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingVideoEffectsQuerySingleTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Task ID or external_task_id */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVideoEffectsResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingImageGenerationsQueryTaskList: {
-    parameters: {
-      query?: {
-        /** @description Page number */
-        pageNum?: number
-        /** @description Data volume per page */
-        pageSize?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingImageGenerationsResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingCreateImageGeneration: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Create task for generating images */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['KlingImageGenerationsRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingImageGenerationsResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingImageGenerationsQuerySingleTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Task ID */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingImageGenerationsResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingVirtualTryOnQueryTaskList: {
-    parameters: {
-      query?: {
-        /** @description Page number */
-        pageNum?: number
-        /** @description Data volume per page */
-        pageSize?: number
-      }
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVirtualTryOnResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingCreateVirtualTryOn: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description Create task for virtual try-on of clothing on human images */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['KlingVirtualTryOnRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVirtualTryOnResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  klingVirtualTryOnQuerySingleTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Task ID */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response (Request successful) */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingVirtualTryOnResponse']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['KlingErrorResponse']
-        }
-      }
-    }
-  }
-  bflFluxKontextProGenerate: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLFluxKontextProGenerateRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from BFL Flux Kontext Pro proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLFluxKontextProGenerateResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or BFL) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with BFL) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (BFL took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  bflFluxKontextMaxGenerate: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLFluxKontextMaxGenerateRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from BFL Flux Kontext Max proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLFluxKontextMaxGenerateResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or BFL) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with BFL) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (BFL took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  bflFluxPro1_1Generate: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLFluxPro1_1GenerateRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from BFL Flux Pro proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLFluxPro1_1GenerateResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or BFL) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with BFL) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (BFL took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  bflFluxProGenerate: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLFluxProGenerateRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from BFL Flux Pro proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLFluxProGenerateResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded (either from proxy or BFL) */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with BFL) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (BFL took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  BFLExpand_v1_flux_pro_1_0_expand_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLFluxProExpandInputs']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json':
-            | components['schemas']['BFLAsyncResponse']
-            | components['schemas']['BFLAsyncWebhookResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLHTTPValidationError']
-        }
-      }
-    }
-  }
-  BFLFill_v1_flux_pro_1_0_fill_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLFluxProFillInputs']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json':
-            | components['schemas']['BFLAsyncResponse']
-            | components['schemas']['BFLAsyncWebhookResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLHTTPValidationError']
-        }
-      }
-    }
-  }
-  BFLPro_canny_v1_flux_pro_1_0_canny_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLCannyInputs']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json':
-            | components['schemas']['BFLAsyncResponse']
-            | components['schemas']['BFLAsyncWebhookResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLHTTPValidationError']
-        }
-      }
-    }
-  }
-  BFLPro_depth_v1_flux_pro_1_0_depth_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['BFLDepthInputs']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json':
-            | components['schemas']['BFLAsyncResponse']
-            | components['schemas']['BFLAsyncWebhookResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['BFLHTTPValidationError']
-        }
-      }
-    }
-  }
-  lumaCreateGeneration: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description The generation request object */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['LumaGenerationRequest']
-      }
-    }
-    responses: {
-      /** @description Generation created */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['LumaGeneration']
-        }
-      }
-      /** @description Error */
-      default: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['LumaError']
-        }
-      }
-    }
-  }
-  lumaGetGeneration: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description The ID of the generation */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Generation found */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['LumaGeneration']
-        }
-      }
-      /** @description Error */
-      default: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['LumaError']
-        }
-      }
-    }
-  }
-  lumaGenerateImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    /** @description The image generation request object */
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['LumaImageGenerationRequest']
-      }
-    }
-    responses: {
-      /** @description Image generated */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['LumaGeneration']
-        }
-      }
-      /** @description Error */
-      default: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['LumaError']
-        }
-      }
-    }
-  }
-  PixverseGenerateTextVideo: {
-    parameters: {
-      query?: never
-      header: {
-        /** @description Unique UUID for each request. */
-        'Ai-trace-id': components['parameters']['PixverseAiTraceId']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['PixverseTextVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Success */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PixverseVideoResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  PixverseGenerateImageVideo: {
-    parameters: {
-      query?: never
-      header: {
-        /** @description Unique UUID for each request. */
-        'Ai-trace-id': components['parameters']['PixverseAiTraceId']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['PixverseImageVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Success */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PixverseVideoResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  PixverseGenerateTransitionVideo: {
-    parameters: {
-      query?: never
-      header: {
-        /** @description Unique UUID for each request. */
-        'Ai-trace-id': components['parameters']['PixverseAiTraceId']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['PixverseTransitionVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Success */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PixverseVideoResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  PixverseUploadImage: {
-    parameters: {
-      query?: never
-      header: {
-        /** @description Unique UUID for each request. */
-        'Ai-trace-id': components['parameters']['PixverseAiTraceId']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': {
-          /** Format: binary */
-          image?: string
-        }
-      }
-    }
-    responses: {
-      /** @description Image uploaded */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PixverseImageUploadResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  PixverseGetVideoResult: {
-    parameters: {
-      query?: never
-      header: {
-        /** @description Unique UUID for each request. */
-        'Ai-trace-id': components['parameters']['PixverseAiTraceId']
-      }
-      path: {
-        id: number
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Result fetched */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PixverseVideoResultResponse']
-        }
-      }
-    }
-  }
-  metronomeZeroBalance: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': {
-          /** @description the id of the webhook */
-          id: string
-          /** @description the type of the webhook */
-          type: string
-          properties: {
-            /** @description the metronome customer id */
-            customer_id?: string
-            /** @description the customer remaining balance */
-            remaining_balance?: number
-          }
-        }
-      }
-    }
-    responses: {
-      /** @description Webhook processed successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['IdeogramGenerateResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  StripeInvoiceStatus: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['StripeEvent']
-      }
-    }
-    responses: {
-      /** @description Webhook processed successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  recraftImageGeneration: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['RecraftImageGenerationRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response from Recraft proxy */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RecraftImageGenerationResponse']
-        }
-      }
-      /** @description Bad Request (invalid input to proxy) */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal Server Error (proxy or upstream issue) */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Bad Gateway (error communicating with Recraft) */
-      502: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Gateway Timeout (Recraft took too long to respond) */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  recraftVectorize: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': {
-          /**
-           * Format: binary
-           * @description Image file to process
-           */
-          file: string
-        }
-      }
-    }
-    responses: {
-      /** @description Background removed successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RecraftImageGenerationResponse']
-        }
-      }
-      /** @description Bad request - Invalid parameters or file */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized - Invalid or missing API token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  recraftCrispUpscale: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': {
-          /**
-           * Format: binary
-           * @description Image file to process
-           */
-          file: string
-        }
-      }
-    }
-    responses: {
-      /** @description Background removed successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RecraftImageGenerationResponse']
-        }
-      }
-      /** @description Bad request - Invalid parameters or file */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized - Invalid or missing API token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  recraftRemoveBackground: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': {
-          /**
-           * Format: binary
-           * @description Image file to process
-           */
-          file: string
-        }
-      }
-    }
-    responses: {
-      /** @description Background removed successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            image?: {
-              /**
-               * Format: uri
-               * @description URL of the processed image
-               */
-              url?: string
-            }
-          }
-        }
-      }
-      /** @description Bad request - Invalid parameters or file */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized - Invalid or missing API token */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  RecraftImageToImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['RecraftImageToImageRequest']
-      }
-    }
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RecraftGenerateImageResponse']
-        }
-      }
-    }
-  }
-  RecraftInpaintImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['RecraftTransformImageWithMaskRequest']
-      }
-    }
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RecraftGenerateImageResponse']
-        }
-      }
-    }
-  }
-  RecraftReplaceBackground: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['RecraftTransformImageWithMaskRequest']
-      }
-    }
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RecraftGenerateImageResponse']
-        }
-      }
-    }
-  }
-  RecraftCreativeUpscale: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['RecraftProcessImageRequest']
-      }
-    }
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RecraftProcessImageResponse']
-        }
-      }
-    }
-  }
-  runwayImageToVideo: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['RunwayImageToVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RunwayImageToVideoResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  runwayGetTaskStatus: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description ID of the task to check */
-        task_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RunwayTaskStatusResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Task not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  runwayTextToImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['RunwayTextToImageRequest']
-      }
-    }
-    responses: {
-      /** @description Successful response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['RunwayTextToImageResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  veoGenerate: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Veo2GenVidRequest']
-      }
-    }
-    responses: {
-      /** @description Video generation successful */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Veo2GenVidResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  veoPoll: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['Veo2GenVidPollRequest']
-      }
-    }
-    responses: {
-      /** @description Operation status and result */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Veo2GenVidPollResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Operation not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  veoGenerateNew: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description The ID of the model to use for generation */
-        modelId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['VeoGenVidRequest']
-      }
-    }
-    responses: {
-      /** @description Video generation successful */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['VeoGenVidResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  veoPollNew: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description The ID of the model to use for generation */
-        modelId: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['VeoGenVidPollRequest']
-      }
-    }
-    responses: {
-      /** @description Operation status and result */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['VeoGenVidPollResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Operation not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  createOpenAIResponse: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['OpenAICreateResponse']
-      }
-    }
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['OpenAIResponse']
-          'text/event-stream': components['schemas']['OpenAIResponseStreamEvent']
-        }
-      }
-    }
-  }
-  getOpenAIResponse: {
-    parameters: {
-      query?: {
-        /** @description Additional fields to include in the response. See the `include`
-         *     parameter for Response creation above for more information.
-         *      */
-        include?: components['schemas']['Includable'][]
-      }
-      header?: never
-      path: {
-        /** @description The ID of the response to retrieve. */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['OpenAIResponse']
-        }
-      }
-    }
-  }
-  openAIGenerateImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['OpenAIImageGenerationRequest']
-      }
-    }
-    responses: {
-      /** @description Image generated successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['OpenAIImageGenerationResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  openAIEditImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['OpenAIImageEditRequest']
-      }
-    }
-    responses: {
-      /** @description Image edited successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['OpenAIImageGenerationResponse']
-        }
-      }
-      /** @description Bad request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Payment Required */
-      402: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ErrorResponse']
-        }
-      }
-    }
-  }
-  PikaGenerate_pikadditions_generate_pikadditions_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['PikaBody_generate_pikadditions_generate_pikadditions_post']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaGenerateResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  PikaGenerate_pikaswaps_generate_pikaswaps_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['PikaBody_generate_pikaswaps_generate_pikaswaps_post']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaGenerateResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  PikaGenerate_pikaffects_generate_pikaffects_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['PikaBody_generate_pikaffects_generate_pikaffects_post']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaGenerateResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  PikaGenerate_2_2_t2v_generate_2_2_t2v_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/x-www-form-urlencoded': components['schemas']['PikaBody_generate_2_2_t2v_generate_2_2_t2v_post']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaGenerateResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  PikaGenerate_2_2_keyframe_generate_2_2_pikaframes_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['PikaBody_generate_2_2_keyframe_generate_2_2_pikaframes_post']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaGenerateResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  PikaGenerate_2_2_c2v_generate_2_2_pikascenes_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['PikaBody_generate_2_2_c2v_generate_2_2_pikascenes_post']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaGenerateResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  PikaGenerate_2_2_i2v_generate_2_2_i2v_post: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['PikaBody_generate_2_2_i2v_generate_2_2_i2v_post']
-      }
-    }
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaGenerateResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  PikaGet_video_videos__video_id__get: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        video_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Successful Response */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaVideoResponse']
-        }
-      }
-      /** @description Validation Error */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['PikaHTTPValidationError']
-        }
-      }
-    }
-  }
-  StabilityImageGenrationUltra: {
-    parameters: {
-      query?: never
-      header: {
-        authorization: string
-        'content-type': string
-        accept?: 'image/*' | 'application/json'
-        'stability-client-id'?: components['schemas']['StabilityStabilityClientID']
-        'stability-client-user-id'?: components['schemas']['StabilityStabilityClientUserID']
-        'stability-client-version'?: components['schemas']['StabilityStabilityClientVersion']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': {
-          /** @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines elements, colors, and subjects will lead to better results. To control the weight of a given word use the format `(word:weight)`, where `word` is the word you'd like to control the weight of and `weight` is a value between 0 and 1. For example: `The sky was a crisp (blue:0.3) and (green:0.8)` would convey a sky that was blue and green, but more green than blue. */
-          prompt: string
-          /** @description A blurb of text describing what you **do not** wish to see in the output image. This is an advanced feature. */
-          negative_prompt?: string
-          /**
-           * @description Controls the aspect ratio of the generated image.
-           * @default 1:1
-           * @enum {string}
-           */
-          aspect_ratio?:
-            | '21:9'
-            | '16:9'
-            | '3:2'
-            | '5:4'
-            | '1:1'
-            | '4:5'
-            | '2:3'
-            | '9:16'
-            | '9:21'
-          /**
-           * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
-           * @default 0
-           */
-          seed?: number
-          /**
-           * @description Dictates the `content-type` of the generated image.
-           * @default png
-           * @enum {string}
-           */
-          output_format?: 'jpeg' | 'png' | 'webp'
-          /**
-           * Format: binary
-           * @description The image to use as the starting point for the generation. > **Important:** The `strength` parameter is required when `image` is provided. Supported Formats: - jpeg - png - webp Validation Rules: - Width must be between 64 and 16,384 pixels - Height must be between 64 and 16,384 pixels - Total pixel count must be at least 4,096 pixels
-           * @example ./some/image.png
-           */
-          image?: string
-          /**
-           * @description Guides the image model towards a particular style.
-           * @enum {string}
-           */
-          style_preset?:
-            | 'enhance'
-            | 'anime'
-            | 'photographic'
-            | 'digital-art'
-            | 'comic-book'
-            | 'fantasy-art'
-            | 'line-art'
-            | 'analog-film'
-            | 'neon-punk'
-            | 'isometric'
-            | 'low-poly'
-            | 'origami'
-            | 'modeling-compound'
-            | 'cinematic'
-            | '3d-model'
-            | 'pixel-art'
-            | 'tile-texture'
-          /** @description Sometimes referred to as _denoising_, this parameter controls how much influence the
-           *     `image` parameter has on the generated image.  A value of 0 would yield an image that
-           *     is identical to the input.  A value of 1 would be as if you passed in no image at all.
-           *
-           *     > **Important:** This parameter is required when `image` is provided. */
-          strength?: number
-        }
-      }
-    }
-    responses: {
-      /** @description Generation was successful. */
-      200: {
-        headers: {
-          /** @description A unique identifier for this request. */
-          'x-request-id'?: string
-          /** @description The format of the generated image.
-           *       To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`. */
-          'content-type'?: string
-          /** @description Indicates the reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result. > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`. */
-          'finish-reason'?: 'SUCCESS' | 'CONTENT_FILTERED'
-          /**
-           * @description The seed used as random noise for this generation. > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
-           * @example 343940597
-           */
-          seed?: string
-          [name: string]: unknown
-        }
-        content: {
-          /** @example The bytes of the generated jpeg */
-          'image/jpeg': string
-          'application/json; type=image/jpeg': {
-            /**
-             * @description The generated image, encoded to base64.
-             * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-             */
-            image: string
-            /**
-             * @description The seed used as random noise for this generation.
-             * @default 0
-             * @example 343940597
-             */
-            seed: number
-            /**
-             * @description The reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result.
-             * @example SUCCESS
-             * @enum {string}
-             */
-            finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-          }
-          /** @example The bytes of the generated png */
-          'image/png': string
-          'application/json; type=image/png': {
-            /**
-             * @description The generated image, encoded to base64.
-             * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-             */
-            image: string
-            /**
-             * @description The seed used as random noise for this generation.
-             * @default 0
-             * @example 343940597
-             */
-            seed: number
-            /**
-             * @description The reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result.
-             * @example SUCCESS
-             * @enum {string}
-             */
-            finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-          }
-          /** @example The bytes of the generated webp */
-          'image/webp': string
-          'application/json; type=image/webp': {
-            /**
-             * @description The generated image, encoded to base64.
-             * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-             */
-            image: string
-            /**
-             * @description The seed used as random noise for this generation.
-             * @default 0
-             * @example 343940597
-             */
-            seed: number
-            /**
-             * @description The reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result.
-             * @example SUCCESS
-             * @enum {string}
-             */
-            finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-          }
-        }
-      }
-      /** @description Invalid parameter(s), see the `errors` field for details. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /**
-             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
-             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-             */
-            id: string
-            /**
-             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-             * @example bad_request
-             */
-            name: string
-            /**
-             * @description One or more error messages indicating what went wrong.
-             * @example [
-             *       "some-field: is required"
-             *     ]
-             */
-            errors: string[]
-          }
-        }
-      }
-      /** @description Your request was flagged by our content moderation system. */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityContentModerationResponse']
-        }
-      }
-      /** @description Your request was larger than 10MiB. */
-      413: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /**
-             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
-             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-             */
-            id: string
-            /**
-             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-             * @example bad_request
-             */
-            name: string
-            /**
-             * @description One or more error messages indicating what went wrong.
-             * @example [
-             *       "some-field: is required"
-             *     ]
-             */
-            errors: string[]
-          }
-        }
-      }
-      /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /**
-             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
-             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-             */
-            id: string
-            /**
-             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-             * @example bad_request
-             */
-            name: string
-            /**
-             * @description One or more error messages indicating what went wrong.
-             * @example [
-             *       "some-field: is required"
-             *     ]
-             */
-            errors: string[]
-          }
-        }
-      }
-      /** @description You have made more than 150 requests in 10 seconds. */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /**
-             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
-             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-             */
-            id: string
-            /**
-             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-             * @example bad_request
-             */
-            name: string
-            /**
-             * @description One or more error messages indicating what went wrong.
-             * @example [
-             *       "some-field: is required"
-             *     ]
-             */
-            errors: string[]
-          }
-        }
-      }
-      /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            /**
-             * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
-             * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
-             */
-            id: string
-            /**
-             * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
-             * @example bad_request
-             */
-            name: string
-            /**
-             * @description One or more error messages indicating what went wrong.
-             * @example [
-             *       "some-field: is required"
-             *     ]
-             */
-            errors: string[]
-          }
-        }
-      }
-    }
-  }
-  StabilityImageGenrationSD3: {
-    parameters: {
-      query?: never
-      header: {
-        authorization: string
-        'content-type': string
-        accept?: 'image/*' | 'application/json'
-        'stability-client-id'?: components['schemas']['StabilityStabilityClientID']
-        'stability-client-user-id'?: components['schemas']['StabilityStabilityClientUserID']
-        'stability-client-version'?: components['schemas']['StabilityStabilityClientVersion']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['StabilityImageGenerationSD3_Request']
-      }
-    }
-    responses: {
-      /** @description Generation was successful. */
-      200: {
-        headers: {
-          /** @description A unique identifier for this request. */
-          'x-request-id'?: string
-          /** @description The format of the generated image.
-           *
-           *      To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`. */
-          'content-type'?: string
-          /** @description Indicates the reason the generation finished.
-           *
-           *     - `SUCCESS` = successful generation.
-           *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-           *     policy and has been blurred as a result.
-           *
-           *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`. */
-          'finish-reason'?: 'SUCCESS' | 'CONTENT_FILTERED'
-          /**
-           * @description The seed used as random noise for this generation.
-           *
-           *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
-           * @example 343940597
-           */
-          seed?: string
-          [name: string]: unknown
-        }
-        content: {
-          /** @example The bytes of the generated png */
-          'image/png': string
-          'application/json; type=image/png': components['schemas']['StabilityImageGenrationSD3_Response_200']
-          /** @example The bytes of the generated jpeg */
-          'image/jpeg': string
-          'application/json; type=image/jpeg': components['schemas']['StabilityImageGenrationSD3_Response_200']
-        }
-      }
-      /** @description Invalid parameter(s), see the `errors` field for details. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationSD3_Response_400']
-        }
-      }
-      /** @description Your request was flagged by our content moderation system. */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityContentModerationResponse']
-        }
-      }
-      /** @description Your request was larger than 10MiB. */
-      413: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationSD3_Response_413']
-        }
-      }
-      /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationSD3_Response_422']
-        }
-      }
-      /** @description You have made more than 150 requests in 10 seconds. */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationSD3_Response_429']
-        }
-      }
-      /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationSD3_Response_500']
-        }
-      }
-    }
-  }
-  StabilityImageGenrationUpscaleConservative: {
-    parameters: {
-      query?: never
-      header: {
-        authorization: string
-        'content-type': string
-        accept?: 'image/*' | 'application/json'
-        'stability-client-id'?: components['schemas']['StabilityStabilityClientID']
-        'stability-client-user-id'?: components['schemas']['StabilityStabilityClientUserID']
-        'stability-client-version'?: components['schemas']['StabilityStabilityClientVersion']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['StabilityImageGenrationUpscaleConservative_Request']
-      }
-    }
-    responses: {
-      /** @description Upscale was successful. */
-      200: {
-        headers: {
-          /** @description A unique identifier for this request. */
-          'x-request-id'?: string
-          /** @description The format of the generated image.
-           *
-           *      To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`. */
-          'content-type'?: string
-          /** @description Indicates the reason the generation finished.
-           *
-           *     - `SUCCESS` = successful generation.
-           *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-           *     policy and has been blurred as a result.
-           *
-           *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`. */
-          'finish-reason'?: 'SUCCESS' | 'CONTENT_FILTERED'
-          /**
-           * @description The seed used as random noise for this generation.
-           *
-           *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
-           * @example 343940597
-           */
-          seed?: string
-          [name: string]: unknown
-        }
-        content: {
-          /** @example The bytes of the generated jpeg */
-          'image/jpeg': string
-          'application/json; type=image/jpeg': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_200']
-          /** @example The bytes of the generated png */
-          'image/png': string
-          'application/json; type=image/png': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_200']
-          /** @example The bytes of the generated webp */
-          'image/webp': string
-          'application/json; type=image/webp': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_200']
-        }
-      }
-      /** @description Invalid parameter(s), see the `errors` field for details. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_400']
-        }
-      }
-      /** @description Your request was flagged by our content moderation system. */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityContentModerationResponse']
-        }
-      }
-      /** @description Your request was larger than 10MiB. */
-      413: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_413']
-        }
-      }
-      /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_422']
-        }
-      }
-      /** @description You have made more than 150 requests in 10 seconds. */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_429']
-        }
-      }
-      /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleConservative_Response_500']
-        }
-      }
-    }
-  }
-  StabilityImageGenrationUpscaleCreative: {
-    parameters: {
-      query?: never
-      header: {
-        authorization: string
-        'content-type': string
-        'stability-client-id'?: components['schemas']['StabilityStabilityClientID']
-        'stability-client-user-id'?: components['schemas']['StabilityStabilityClientUserID']
-        'stability-client-version'?: components['schemas']['StabilityStabilityClientVersion']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['StabilityImageGenrationUpscaleCreative_Request']
-      }
-    }
-    responses: {
-      /** @description Upscale was started. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleCreative_Response_200']
-        }
-      }
-      /** @description Invalid parameter(s), see the `errors` field for details. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleCreative_Response_400']
-        }
-      }
-      /** @description Your request was flagged by our content moderation system. */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityContentModerationResponse']
-        }
-      }
-      /** @description Your request was larger than 10MiB. */
-      413: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleCreative_Response_413']
-        }
-      }
-      /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleCreative_Response_422']
-        }
-      }
-      /** @description You have made more than 150 requests in 10 seconds. */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleCreative_Response_429']
-        }
-      }
-      /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleCreative_Response_500']
-        }
-      }
-    }
-  }
-  StabilityImageGenerationUpscaleFast: {
-    parameters: {
-      query?: never
-      header: {
-        authorization: string
-        'content-type': string
-        accept?: 'image/*' | 'application/json'
-        'stability-client-id'?: components['schemas']['StabilityStabilityClientID']
-        'stability-client-user-id'?: components['schemas']['StabilityStabilityClientUserID']
-        'stability-client-version'?: components['schemas']['StabilityStabilityClientVersion']
-      }
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': components['schemas']['StabilityImageGenrationUpscaleFast_Request']
-      }
-    }
-    responses: {
-      /** @description Upscale was successful. */
-      200: {
-        headers: {
-          /** @description A unique identifier for this request. */
-          'x-request-id'?: string
-          /** @description The format of the generated image.
-           *
-           *      To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`. */
-          'content-type'?: string
-          /** @description Indicates the reason the generation finished.
-           *
-           *     - `SUCCESS` = successful generation.
-           *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-           *     policy and has been blurred as a result.
-           *
-           *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`. */
-          'finish-reason'?: 'SUCCESS' | 'CONTENT_FILTERED'
-          /**
-           * @description The seed used as random noise for this generation.
-           *
-           *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
-           * @example 343940597
-           */
-          seed?: string
-          [name: string]: unknown
-        }
-        content: {
-          /** @example The bytes of the generated jpeg */
-          'image/jpeg': string
-          'application/json; type=image/jpeg': components['schemas']['StabilityImageGenrationUpscaleFast_Response_200']
-          /** @example The bytes of the generated png */
-          'image/png': string
-          'application/json; type=image/png': components['schemas']['StabilityImageGenrationUpscaleFast_Response_200']
-          /** @example The bytes of the generated webp */
-          'image/webp': string
-          'application/json; type=image/webp': components['schemas']['StabilityImageGenrationUpscaleFast_Response_200']
-        }
-      }
-      /** @description Invalid parameter(s), see the `errors` field for details. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleFast_Response_400']
-        }
-      }
-      /** @description Your request was flagged by our content moderation system. */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityContentModerationResponse']
-        }
-      }
-      /** @description Your request was larger than 10MiB. */
-      413: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleFast_Response_413']
-        }
-      }
-      /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
-      422: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleFast_Response_422']
-        }
-      }
-      /** @description You have made more than 150 requests in 10 seconds. */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleFast_Response_429']
-        }
-      }
-      /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityImageGenrationUpscaleFast_Response_500']
-        }
-      }
-    }
-  }
-  StabilityGetResult: {
-    parameters: {
-      query?: never
-      header?: {
-        /** @description Set to image/* to receive image bytes. */
-        Accept?: string
-      }
-      path: {
-        /** @description The ID of the generation result to retrieve. */
-        id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description The generated image as JPEG bytes. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'image/jpeg': string
-          'application/json; type=image/jpeg': {
-            /**
-             * @description The generated image, encoded to base64.
-             * @example AAAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-             */
-            image: string
-            /**
-             * @description The seed used as random noise for this generation.
-             * @default 0
-             * @example 343940597
-             */
-            seed: number
-            /**
-             * @description The reason the generation finished.
-             *
-             *     - `SUCCESS` = successful generation.
-             *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-             *       policy and has been blurred as a result.
-             * @example SUCCESS
-             * @enum {string}
-             */
-            finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-          }
-          /** @example The bytes of the generated png */
-          'image/png': string
-          'application/json; type=image/png': {
-            /**
-             * @description The generated image, encoded to base64.
-             * @example AAAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-             */
-            image: string
-            /**
-             * @description The seed used as random noise for this generation.
-             * @default 0
-             * @example 343940597
-             */
-            seed: number
-            /**
-             * @description The reason the generation finished.
-             *
-             *     - `SUCCESS` = successful generation.
-             *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-             *       policy and has been blurred as a result.
-             * @example SUCCESS
-             * @enum {string}
-             */
-            finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-          }
-          /** @example The bytes of the generated webp */
-          'image/webp': string
-          'application/json; type=image/webp': {
-            /**
-             * @description The generated image, encoded to base64.
-             * @example AAAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
-             */
-            image: string
-            /**
-             * @description The seed used as random noise for this generation.
-             * @default 0
-             * @example 343940597
-             */
-            seed: number
-            /**
-             * @description The reason the generation finished.
-             *
-             *     - `SUCCESS` = successful generation.
-             *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
-             *       policy and has been blurred as a result.
-             * @example SUCCESS
-             * @enum {string}
-             */
-            finish_reason: 'SUCCESS' | 'CONTENT_FILTERED'
-          }
-        }
-      }
-      /** @description The generation is still in progress. */
-      202: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityGetResultResponse_202']
-        }
-      }
-      /** @description Invalid result ID. */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityError']
-        }
-      }
-      /** @description Result not found. */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityError']
-        }
-      }
-      /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['StabilityError']
-        }
-      }
-    }
-  }
-  GeminiGenerateContent: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description Full resource name of the model. */
-        model: string
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['GeminiGenerateContentRequest']
-      }
-    }
-    responses: {
-      /** @description Generated content response. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['GeminiGenerateContentResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not Found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal Server Error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  ImagenGenerateImages: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        /** @description image generation model */
-        model:
-          | 'imagen-3.0-generate-002'
-          | 'imagen-3.0-generate-001'
-          | 'imagen-3.0-fast-generate-001'
-          | 'imagegeneration@006'
-          | 'imagegeneration@005'
-          | 'imagegeneration@002'
-      }
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['ImagenGenerateImageRequest']
-      }
-    }
-    responses: {
-      /** @description Successful image generation */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['ImagenGenerateImageResponse']
-        }
-      }
-      /** @description Client error */
-      '4XX': {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Server error */
-      '5XX': {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  tripoGetTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        task_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Request successful */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            code: components['schemas']['TripoResponseSuccessCode']
-            data: components['schemas']['TripoTask']
-          }
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-    }
-  }
-  tripoUploadFile: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'multipart/form-data': {
-          /** Format: binary */
-          file: string
-        }
-      }
-    }
-    responses: {
-      /** @description Request successful */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            code: components['schemas']['TripoResponseSuccessCode']
-            data: {
-              image_token: string
-            }
-          }
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-    }
-  }
-  tripoCreateTask: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: {
-      content: {
-        'application/json':
-          | {
-              type: components['schemas']['TripoTextToModel']
-              prompt: string
-              negative_prompt?: string
-              model_version?: components['schemas']['TripoModelVersion']
-              face_limit?: number
-              /** @default true */
-              texture?: boolean
-              /** @default true */
-              pbr?: boolean
-              text_seed?: number
-              model_seed?: number
-              texture_seed?: number
-              /** @default standard */
-              texture_quality?: components['schemas']['TripoTextureQuality']
-              style?: components['schemas']['TripoModelStyle']
-              /** @default false */
-              auto_size?: boolean
-              /** @default false */
-              quad?: boolean
-            }
-          | {
-              type: components['schemas']['TripoImageToModel']
-              file: {
-                type: string
-                file_token: string
-              }
-              model_version?: components['schemas']['TripoModelVersion']
-              face_limit?: number
-              /** @default true */
-              texture?: boolean
-              /** @default true */
-              pbr?: boolean
-              model_seed?: number
-              texture_seed?: number
-              /** @default standard */
-              texture_quality?: components['schemas']['TripoTextureQuality']
-              /** @default original_image */
-              texture_alignment?: components['schemas']['TripoTextureAlignment']
-              style?: components['schemas']['TripoModelStyle']
-              /** @default false */
-              auto_size?: boolean
-              /** @default default */
-              orientation?: components['schemas']['TripoOrientation']
-              /** @default false */
-              quad?: boolean
-            }
-          | {
-              type: components['schemas']['TripoMultiviewToModel']
-              files: {
-                type: string
-                file_token: string
-              }[]
-              mode?: components['schemas']['TripoMultiviewMode']
-              model_version?: components['schemas']['TripoModelVersion']
-              /** @default false */
-              orthographic_projection?: boolean
-              face_limit?: number
-              /** @default true */
-              texture?: boolean
-              /** @default true */
-              pbr?: boolean
-              model_seed?: number
-              texture_seed?: number
-              /** @default standard */
-              texture_quality?: components['schemas']['TripoTextureQuality']
-              /** @default original_image */
-              texture_alignment?: components['schemas']['TripoTextureAlignment']
-              /** @default false */
-              auto_size?: boolean
-              /** @default default */
-              orientation?: components['schemas']['TripoOrientation']
-              /** @default false */
-              quad?: boolean
-            }
-          | {
-              type: components['schemas']['TripoTypeTextureModel']
-              /** @default true */
-              texture?: boolean
-              /** @default true */
-              pbr?: boolean
-              model_seed?: number
-              texture_seed?: number
-              texture_quality?: components['schemas']['TripoTextureQuality']
-              /** @default original_image */
-              texture_alignment?: components['schemas']['TripoTextureAlignment']
-              original_model_task_id: string
-            }
-          | {
-              type: components['schemas']['TripoTypeRefineModel']
-              draft_model_task_id: string
-            }
-          | {
-              type: components['schemas']['TripoTypeAnimatePrerigcheck']
-              original_model_task_id: string
-            }
-          | {
-              type: components['schemas']['TripoTypeAnimateRig']
-              original_model_task_id: string
-              /** @default glb */
-              out_format?: components['schemas']['TripoStandardFormat']
-              topology?: components['schemas']['TripoTopology']
-              /** @default tripo */
-              spec?: components['schemas']['TripoSpec']
-            }
-          | {
-              type: components['schemas']['TripoTypeAnimateRetarget']
-              original_model_task_id: string
-              /** @default glb */
-              out_format?: components['schemas']['TripoStandardFormat']
-              animation: components['schemas']['TripoAnimation']
-              /** @default true */
-              bake_animation?: boolean
-            }
-          | {
-              type: components['schemas']['TripoTypeStylizeModel']
-              style: components['schemas']['TripoStylizeOptions']
-              original_model_task_id: string
-              /** @default 80 */
-              block_size?: number
-            }
-          | {
-              type: components['schemas']['TripoTypeConvertModel']
-              format: components['schemas']['TripoConvertFormat']
-              original_model_task_id: string
-              /** @default false */
-              quad?: boolean
-              /** @default false */
-              force_symmetry?: boolean
-              /** @default 10000 */
-              face_limit?: number
-              /** @default false */
-              flatten_bottom?: boolean
-              /** @default 0.01 */
-              flatten_bottom_threshold?: number
-              /** @default 4096 */
-              texture_size?: number
-              /** @default JPEG */
-              texture_format?: components['schemas']['TripoTextureFormat']
-              /** @default false */
-              pivot_to_center_bottom?: boolean
-            }
-      }
-    }
-    responses: {
-      /** @description Request successful */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoSuccessTask']
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-    }
-  }
-  tripoGetBalance: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Request successful */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': {
-            code: components['schemas']['TripoResponseSuccessCode']
-            data: components['schemas']['TripoBalance']
-          }
-        }
-      }
-      /** @description Invalid request parameters */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Authentication failed */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Unauthorized access to requested resource */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Resource not found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Account exception or Rate limit exceeded */
-      429: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Internal server error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Service temporarily unavailable */
-      503: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-      /** @description Server timeout */
-      504: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['TripoErrorResponse']
-        }
-      }
-    }
-  }
-  rodinGenerate3DAsset: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['Rodin3DGenerateRequest']
-      }
-    }
-    responses: {
-      /** @description 3D generate Task submitted successfully. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Rodin3DGenerateResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not Found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal Server Error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  rodinCheckStatus: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['Rodin3DCheckStatusRequest']
-      }
-    }
-    responses: {
-      /** @description Get the status of the 3D Assets generation. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Rodin3DCheckStatusResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not Found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal Server Error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  rodinDownload: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['Rodin3DDownloadRequest']
-      }
-    }
-    responses: {
-      /** @description Get the download list for the Rodin 3D Assets. */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['Rodin3DDownloadResponse']
-        }
-      }
-      /** @description Bad Request */
-      400: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Unauthorized */
-      401: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Forbidden */
-      403: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Not Found */
-      404: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-      /** @description Internal Server Error */
-      500: {
-        headers: {
-          [name: string]: unknown
-        }
-        content?: never
-      }
-    }
-  }
-  MoonvalleyGetPrompt: {
-    parameters: {
-      query?: never
-      header?: never
-      path: {
-        prompt_id: string
-      }
-      cookie?: never
-    }
-    requestBody?: never
-    responses: {
-      /** @description Prompt details retrieved */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MoonvalleyPromptResponse']
-        }
-      }
-    }
-  }
-  MoonvalleyTextToVideo: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['MoonvalleyTextToVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Prompt created */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MoonvalleyPromptResponse']
-        }
-      }
-    }
-  }
-  MoonvalleyTextToImage: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['MoonvalleyTextToImageRequest']
-      }
-    }
-    responses: {
-      /** @description Prompt created */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MoonvalleyPromptResponse']
-        }
-      }
-    }
-  }
-  MoonvalleyImageToVideo: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['MoonvalleyImageToVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Prompt created */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MoonvalleyPromptResponse']
-        }
-      }
-    }
-  }
-  MoonvalleyVideoToVideo: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['MoonvalleyVideoToVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Prompt created */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MoonvalleyPromptResponse']
-        }
-      }
-    }
-  }
-  MoonvalleyVideoToVideoResize: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['MoonvalleyResizeVideoRequest']
-      }
-    }
-    responses: {
-      /** @description Prompt created */
-      201: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MoonvalleyPromptResponse']
-        }
-      }
-    }
-  }
-  MoonvalleyUpload: {
-    parameters: {
-      query?: never
-      header?: never
-      path?: never
-      cookie?: never
-    }
-    requestBody: {
-      content: {
-        'multipart/form-data': components['schemas']['MoonvalleyUploadFileRequest']
-      }
-    }
-    responses: {
-      /** @description File uploaded successfully */
-      200: {
-        headers: {
-          [name: string]: unknown
-        }
-        content: {
-          'application/json': components['schemas']['MoonvalleyUploadFileResponse']
-        }
-      }
-    }
-  }
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Too many requests - GitHub API rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Service unavailable - GitHub API is currently unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listNodesForPublisherV2: {
+        parameters: {
+            query?: {
+                /** @description Number of nodes to return per page */
+                include_banned?: boolean;
+                /** @description Page number of the nodes list */
+                page?: number;
+                /** @description Number of nodes to return per page */
+                limit?: number;
+            };
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description List of all nodes */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Total number of nodes available */
+                        total?: number;
+                        nodes?: components["schemas"]["Node"][];
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Maximum number of nodes per page */
+                        limit?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                    };
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listNodesForPublisher: {
+        parameters: {
+            query?: {
+                /** @description Number of nodes to return per page */
+                include_banned?: boolean;
+            };
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description List of all nodes */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"][];
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    createNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Node"];
+            };
+        };
+        responses: {
+            /** @description Node created successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"];
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    updateNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Node"];
+            };
+        };
+        responses: {
+            /** @description Node updated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"];
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Node not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    deleteNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Node deleted successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Node not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getPermissionOnPublisherNodes: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A list of permissions */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        canEdit?: boolean;
+                    };
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    publishNodeVersion: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    personal_access_token: string;
+                    node_version: components["schemas"]["NodeVersion"];
+                    node: components["schemas"]["Node"];
+                };
+            };
+        };
+        responses: {
+            /** @description New version published successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description The signed URL to upload the node version token. */
+                        signedUrl?: string;
+                        node_version?: components["schemas"]["NodeVersion"];
+                    };
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    updateNodeVersion: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+                versionId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["NodeVersionUpdateRequest"];
+            };
+        };
+        responses: {
+            /** @description Version updated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["NodeVersion"];
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    deleteNodeVersion: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+                versionId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Version unpublished (deleted) successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Version does not belong to the publisher */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Version not found */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    BanPublisherNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Node Banned Successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Publisher or Node not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listPersonalAccessTokens: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description List of all personal access tokens */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PersonalAccessToken"][];
+                };
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description No tokens found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    createPersonalAccessToken: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["PersonalAccessToken"];
+            };
+        };
+        responses: {
+            /** @description Token created successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description The newly created personal access token. */
+                        token?: string;
+                    };
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    deletePersonalAccessToken: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                publisherId: string;
+                tokenId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Token deleted successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Token not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    searchNodes: {
+        parameters: {
+            query?: {
+                /** @description Page number of the nodes list */
+                page?: number;
+                /** @description Number of nodes to return per page */
+                limit?: number;
+                /** @description Keyword to search the nodes */
+                search?: string;
+                /** @description Keyword to search the nodes by repository URL */
+                repository_url_search?: string;
+                /** @description Keyword to search the nodes by comfy node name */
+                comfy_node_search?: string;
+                /** @description Filter nodes by supported operating systems */
+                supported_os?: string;
+                /** @description Filter nodes by supported accelerator */
+                supported_accelerator?: string;
+                /** @description Number of nodes to return per page */
+                include_banned?: boolean;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A paginated list of nodes */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Total number of nodes available */
+                        total?: number;
+                        nodes?: components["schemas"]["Node"][];
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Maximum number of nodes per page */
+                        limit?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                    };
+                };
+            };
+            /** @description Invalid input, object invalid */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    reindexNodes: {
+        parameters: {
+            query?: {
+                /** @description Maximum number of nodes to send to algolia at a time */
+                max_batch?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Reindex completed successfully. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad request. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    updateGithubStars: {
+        parameters: {
+            query?: {
+                /** @description Maximum number of nodes to update in one batch */
+                max_batch?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Update GithubStars request triggered successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad request. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listAllNodes: {
+        parameters: {
+            query?: {
+                /** @description Page number of the nodes list */
+                page?: number;
+                /** @description Number of nodes to return per page */
+                limit?: number;
+                /** @description Filter nodes by supported operating systems */
+                supported_os?: string;
+                /** @description Filter nodes by supported accelerator */
+                supported_accelerator?: string;
+                /** @description Number of nodes to return per page */
+                include_banned?: boolean;
+                /** @description Retrieve nodes created or updated after this timestamp (ISO 8601 format) */
+                timestamp?: string;
+                /** @description Whether to fetch fresh result from database or use cached one if false */
+                latest?: boolean;
+                /** @description Database column to use as ascending ordering. Add `;desc` as suffix on each column for descending sort */
+                sort?: string[];
+                /** @description node_id to use as filter */
+                node_id?: string[];
+                /** @description Comfy UI version */
+                comfyui_version?: string;
+                /** @description The platform requesting the nodes */
+                form_factor?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description A paginated list of nodes */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Total number of nodes available */
+                        total?: number;
+                        nodes?: components["schemas"]["Node"][];
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Maximum number of nodes per page */
+                        limit?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                    };
+                };
+            };
+            /** @description Invalid input, object invalid */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getNodeByComfyNodeName: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The name of the ComfyUI node */
+                comfyNodeName: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Node details */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"];
+                };
+            };
+            /** @description No node found containing the specified ComfyUI node name */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getNode: {
+        parameters: {
+            query?: {
+                /** @description Whether to include the translation or not */
+                include_translations?: boolean;
+            };
+            header?: never;
+            path: {
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Node details */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"];
+                };
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Node not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    postNodeReview: {
+        parameters: {
+            query: {
+                /** @description number of star given to the node version */
+                star: number;
+            };
+            header?: never;
+            path: {
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Detailed information about a specific node */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Node version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    installNode: {
+        parameters: {
+            query?: {
+                /** @description Specific version of the node to retrieve. If omitted, the latest version is returned. */
+                version?: string;
+            };
+            header?: never;
+            path: {
+                /** @description The unique identifier of the node. */
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Node data returned successfully. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["NodeVersion"];
+                };
+            };
+            /** @description Invalid input, such as a bad version format. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Node not found. */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    CreateNodeTranslations: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The unique identifier of the node. */
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    data?: {
+                        [key: string]: {
+                            [key: string]: unknown;
+                        };
+                    };
+                };
+            };
+        };
+        responses: {
+            /** @description Detailed information about a specific node */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Node version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listNodeVersions: {
+        parameters: {
+            query?: {
+                statuses?: components["schemas"]["NodeVersionStatus"][];
+                include_status_reason?: boolean;
+            };
+            header?: never;
+            path: {
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description List of all node versions */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["NodeVersion"][];
+                };
+            };
+            /** @description Node banned */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Node not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getNodeVersion: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                nodeId: string;
+                /** @description The version of the node. (Not a UUID). */
+                versionId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Detailed information about a specific node version */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["NodeVersion"];
+                };
+            };
+            /** @description Node version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getBulkNodeVersions: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BulkNodeVersionsRequest"];
+            };
+        };
+        responses: {
+            /** @description Successfully retrieved node versions */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BulkNodeVersionsResponse"];
+                };
+            };
+            /** @description Bad request, invalid input */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    listAllNodeVersions: {
+        parameters: {
+            query?: {
+                nodeId?: string;
+                statuses?: components["schemas"]["NodeVersionStatus"][];
+                include_status_reason?: boolean;
+                /** @description The page number to retrieve. */
+                page?: number;
+                /** @description The number of items to include per page. */
+                pageSize?: number;
+                /** @description search for status_reason, case insensitive */
+                status_reason?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description List of all node versions */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Total number of node versions available */
+                        total?: number;
+                        versions?: components["schemas"]["NodeVersion"][];
+                        /** @description Current page number */
+                        page?: number;
+                        /** @description Maximum number of node versions per page. Maximum is 100. */
+                        pageSize?: number;
+                        /** @description Total number of pages available */
+                        totalPages?: number;
+                    };
+                };
+            };
+            /** @description Invalid input, object invalid */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Node banned */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    adminCreateNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Node"];
+            };
+        };
+        responses: {
+            /** @description Node created successfully */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"];
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Duplicate error. */
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    adminUpdateNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                nodeId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Node"];
+            };
+        };
+        responses: {
+            /** @description Node updated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Node"];
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Node not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    adminUpdateNodeVersion: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                nodeId: string;
+                versionNumber: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    status?: components["schemas"]["NodeVersionStatus"];
+                    /** @description The reason for the status change. */
+                    status_reason?: string;
+                    /** @description Supported versions of ComfyUI frontend */
+                    supported_comfyui_frontend_version?: string;
+                    /** @description Supported versions of ComfyUI */
+                    supported_comfyui_version?: string;
+                    /** @description List of operating systems that this node supports */
+                    supported_os?: string[];
+                    /** @description List of accelerators (e.g. CUDA, DirectML, ROCm) that this node supports */
+                    supported_accelerators?: string[];
+                };
+            };
+        };
+        responses: {
+            /** @description Version updated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["NodeVersion"];
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getReleaseNotes: {
+        parameters: {
+            query: {
+                /** @description The project to get release notes for */
+                project: "comfyui" | "comfyui_frontend" | "desktop";
+                /** @description The current version to filter release notes */
+                current_version?: string;
+                /** @description The locale for the release notes */
+                locale?: "en" | "es" | "fr" | "ja" | "ko" | "ru" | "zh";
+                /** @description The platform requesting the release notes */
+                form_factor?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Release notes retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ReleaseNote"][];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    processReleaseWebhook: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description The name of the event that triggered the delivery */
+                "X-GitHub-Event": "release";
+                /** @description A globally unique identifier (GUID) to identify the event */
+                "X-GitHub-Delivery": string;
+                /** @description The unique identifier of the webhook */
+                "X-GitHub-Hook-ID": string;
+                /** @description HMAC hex digest of the request body using SHA-256 hash function */
+                "X-Hub-Signature-256"?: string;
+                /** @description The type of resource where the webhook was created */
+                "X-GitHub-Hook-Installation-Target-Type"?: string;
+                /** @description The unique identifier of the resource where the webhook was created */
+                "X-GitHub-Hook-Installation-Target-ID"?: string;
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["GithubReleaseWebhook"];
+            };
+        };
+        responses: {
+            /** @description Webhook processed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Validation failed or endpoint has been spammed */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    securityScan: {
+        parameters: {
+            query?: {
+                minAge?: string;
+                minSecurityScanAge?: string;
+                maxNodes?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Scan completed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ListComfyNodes: {
+        parameters: {
+            query?: {
+                /** @description The page number to retrieve. */
+                page?: number;
+                /** @description The number of items to include per page. */
+                limit?: number;
+            };
+            header?: never;
+            path: {
+                nodeId: string;
+                version: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Comy Nodes obtained successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        comfy_nodes?: components["schemas"]["ComfyNode"][];
+                        totalNumberOfPages?: number;
+                    };
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    CreateComfyNodes: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                nodeId: string;
+                version: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    success?: boolean;
+                    status?: string;
+                    reason?: string;
+                    cloud_build_info?: components["schemas"]["ComfyNodeCloudBuildInfo"];
+                    nodes?: {
+                        [key: string]: components["schemas"]["ComfyNode"];
+                    };
+                };
+            };
+        };
+        responses: {
+            /** @description Comy Nodes created successfully */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Existing Comfy Nodes exists */
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GetComfyNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                nodeId: string;
+                version: string;
+                comfyNodeName: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Comy Nodes created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ComfyNode"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Version not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    UpdateComfyNode: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                nodeId: string;
+                version: string;
+                comfyNodeName: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ComfyNodeUpdateRequest"];
+            };
+        };
+        responses: {
+            /** @description Comfy Node updated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ComfyNode"];
+                };
+            };
+            /** @description Bad request, invalid input data */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description ComfyNode not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ListAllComfyNodes: {
+        parameters: {
+            query?: {
+                pageSize?: number;
+                /** @description Page number (1-based indexing) */
+                page?: number;
+                /** @description Filter by node ID */
+                node_id?: string;
+                /** @description Filter by node version */
+                node_version?: string;
+                /** @description Filter by ComfyUI node name */
+                comfy_node_name?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        comfy_nodes?: components["schemas"]["ComfyNode"][];
+                        /** @description Total number of comfy nodes */
+                        total?: number;
+                    };
+                };
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ComfyNodesBackfill: {
+        parameters: {
+            query?: {
+                max_node?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Backfill triggered */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad request, invalid input data. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    dummyProxy: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "application/json": {
+                    message?: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Reindex completed successfully. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    minimaxVideoGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MinimaxVideoGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Minimax proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MinimaxVideoGenerationResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or Minimax) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with Minimax) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (Minimax took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    getMinimaxVideoGeneration: {
+        parameters: {
+            query: {
+                /** @description The task ID to be queried */
+                task_id: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response with task status */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MinimaxTaskResultResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or Minimax) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with Minimax) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (Minimax took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    retrieveMinimaxFile: {
+        parameters: {
+            query: {
+                /** @description Unique identifier for the file, obtained from the generation response */
+                file_id: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response with file download URL */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MinimaxFileRetrieveResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or Minimax) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with Minimax) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (Minimax took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ideogramGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["IdeogramGenerateRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Ideogram proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["IdeogramGenerateResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or Ideogram) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with Ideogram) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (Ideogram took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ideogramV3Generate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Parameters for Ideogram V3 image generation */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["IdeogramV3Request"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Ideogram proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["IdeogramGenerateResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ideogramV3Edit: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Parameters for Ideogram V3 image editing */
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["IdeogramV3EditRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Ideogram proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["IdeogramGenerateResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Prompt or Initial Image failed the safety checks. */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Rate limit exceeded (either from proxy or Ideogram) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ideogramV3Remix: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["IdeogramV3RemixRequest"];
+            };
+        };
+        responses: {
+            /** @description Remix generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["IdeogramV3IdeogramResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unprocessable Entity */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Too Many Requests */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    ideogramV3Reframe: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["IdeogramV3ReframeRequest"];
+            };
+        };
+        responses: {
+            /** @description Reframed image successfully returned */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["IdeogramV3IdeogramResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unprocessable Entity */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Too Many Requests */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    ideogramV3ReplaceBackground: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["IdeogramV3ReplaceBackgroundRequest"];
+            };
+        };
+        responses: {
+            /** @description Background replaced successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["IdeogramV3IdeogramResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unprocessable Entity */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Too Many Requests */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    klingQueryResourcePackages: {
+        parameters: {
+            query: {
+                start_time: number;
+                end_time: number;
+                resource_pack_name?: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingResourcePackageResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingText2VideoQueryTaskList: {
+        parameters: {
+            query?: {
+                /** @description Page number */
+                pageNum?: number;
+                /** @description Data volume per page */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingText2VideoResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingCreateVideoFromText: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating video from text */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingText2VideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingText2VideoResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingText2VideoQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID or external_task_id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingText2VideoResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingImage2VideoQueryTaskList: {
+        parameters: {
+            query?: {
+                /** @description Page number */
+                pageNum?: number;
+                /** @description Data volume per page */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingImage2VideoResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingCreateVideoFromImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating video from image */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingImage2VideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingImage2VideoResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingImage2VideoQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID or external_task_id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingImage2VideoResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingVideoExtendQueryTaskList: {
+        parameters: {
+            query?: {
+                /** @description Page number */
+                pageNum?: number;
+                /** @description Data volume per page */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVideoExtendResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingExtendVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for extending video duration */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingVideoExtendRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVideoExtendResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingVideoExtendQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVideoExtendResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingLipSyncQueryTaskList: {
+        parameters: {
+            query?: {
+                /** @description Page number */
+                pageNum?: number;
+                /** @description Data volume per page */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingLipSyncResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingCreateLipSyncVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating lip-sync video */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingLipSyncRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingLipSyncResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingLipSyncQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID or external_task_id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingLipSyncResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingVideoEffectsQueryTaskList: {
+        parameters: {
+            query?: {
+                /** @description Page number */
+                pageNum?: number;
+                /** @description Data volume per page */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVideoEffectsResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingCreateVideoEffects: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating video with effects */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingVideoEffectsRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVideoEffectsResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingVideoEffectsQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID or external_task_id */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVideoEffectsResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingImageGenerationsQueryTaskList: {
+        parameters: {
+            query?: {
+                /** @description Page number */
+                pageNum?: number;
+                /** @description Data volume per page */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingImageGenerationsResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingCreateImageGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating images */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingImageGenerationsRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingImageGenerationsResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingImageGenerationsQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingImageGenerationsResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingVirtualTryOnQueryTaskList: {
+        parameters: {
+            query?: {
+                /** @description Page number */
+                pageNum?: number;
+                /** @description Data volume per page */
+                pageSize?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVirtualTryOnResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingCreateVirtualTryOn: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for virtual try-on of clothing on human images */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingVirtualTryOnRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVirtualTryOnResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingVirtualTryOnQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingVirtualTryOnResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    ltxCreateVideoFromText: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create video from text prompt */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["LTXText2VideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "video/mp4": string;
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    ltxCreateVideoFromImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create video from image */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["LTXImage2VideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "video/mp4": string;
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    bflFluxKontextProGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLFluxKontextProGenerateRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from BFL Flux Kontext Pro proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLFluxKontextProGenerateResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or BFL) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with BFL) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (BFL took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    bflFluxKontextMaxGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLFluxKontextMaxGenerateRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from BFL Flux Kontext Max proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLFluxKontextMaxGenerateResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or BFL) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with BFL) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (BFL took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    bflFluxPro1_1Generate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLFluxPro1_1GenerateRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from BFL Flux Pro proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLFluxPro1_1GenerateResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or BFL) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with BFL) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (BFL took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    bflFluxProGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLFluxProGenerateRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from BFL Flux Pro proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLFluxProGenerateResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or BFL) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with BFL) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (BFL took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    BFLExpand_v1_flux_pro_1_0_expand_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLFluxProExpandInputs"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLAsyncResponse"] | components["schemas"]["BFLAsyncWebhookResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLHTTPValidationError"];
+                };
+            };
+        };
+    };
+    BFLFill_v1_flux_pro_1_0_fill_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLFluxProFillInputs"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLAsyncResponse"] | components["schemas"]["BFLAsyncWebhookResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLHTTPValidationError"];
+                };
+            };
+        };
+    };
+    BFLPro_canny_v1_flux_pro_1_0_canny_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLCannyInputs"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLAsyncResponse"] | components["schemas"]["BFLAsyncWebhookResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLHTTPValidationError"];
+                };
+            };
+        };
+    };
+    BFLPro_depth_v1_flux_pro_1_0_depth_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLDepthInputs"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLAsyncResponse"] | components["schemas"]["BFLAsyncWebhookResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLHTTPValidationError"];
+                };
+            };
+        };
+    };
+    lumaCreateGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description The generation request object */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["LumaGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Generation created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaGeneration"];
+                };
+            };
+            /** @description Error */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaError"];
+                };
+            };
+        };
+    };
+    lumaGetGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the generation */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Generation found */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaGeneration"];
+                };
+            };
+            /** @description Error */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaError"];
+                };
+            };
+        };
+    };
+    lumaGenerateImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description The image generation request object */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["LumaImageGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Image generated */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaGeneration"];
+                };
+            };
+            /** @description Error */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaError"];
+                };
+            };
+        };
+    };
+    PixverseGenerateTextVideo: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Unique UUID for each request. */
+                "Ai-trace-id": components["parameters"]["PixverseAiTraceId"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["PixverseTextVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Success */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PixverseVideoResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    PixverseGenerateImageVideo: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Unique UUID for each request. */
+                "Ai-trace-id": components["parameters"]["PixverseAiTraceId"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["PixverseImageVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Success */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PixverseVideoResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    PixverseGenerateTransitionVideo: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Unique UUID for each request. */
+                "Ai-trace-id": components["parameters"]["PixverseAiTraceId"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["PixverseTransitionVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Success */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PixverseVideoResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    PixverseUploadImage: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Unique UUID for each request. */
+                "Ai-trace-id": components["parameters"]["PixverseAiTraceId"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": {
+                    /** Format: binary */
+                    image?: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Image uploaded */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PixverseImageUploadResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    PixverseGetVideoResult: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Unique UUID for each request. */
+                "Ai-trace-id": components["parameters"]["PixverseAiTraceId"];
+            };
+            path: {
+                id: number;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Result fetched */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PixverseVideoResultResponse"];
+                };
+            };
+        };
+    };
+    metronomeZeroBalance: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    /** @description the id of the webhook */
+                    id: string;
+                    /** @description the type of the webhook */
+                    type: string;
+                    properties: {
+                        /** @description the metronome customer id */
+                        customer_id?: string;
+                        /** @description the customer remaining balance */
+                        remaining_balance?: number;
+                    };
+                };
+            };
+        };
+        responses: {
+            /** @description Webhook processed succesfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["IdeogramGenerateResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    StripeInvoiceStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["StripeEvent"];
+            };
+        };
+        responses: {
+            /** @description Webhook processed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    StripeSubscriptionWebhook: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": Record<string, never>;
+            };
+        };
+        responses: {
+            /** @description Webhook processed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    recraftImageGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["RecraftImageGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Recraft proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftImageGenerationResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with Recraft) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (Recraft took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    recraftVectorize: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": {
+                    /**
+                     * Format: binary
+                     * @description Image file to process
+                     */
+                    file: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Background removed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftImageGenerationResponse"];
+                };
+            };
+            /** @description Bad request - Invalid parameters or file */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized - Invalid or missing API token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    recraftCrispUpscale: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": {
+                    /**
+                     * Format: binary
+                     * @description Image file to process
+                     */
+                    file: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Background removed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftImageGenerationResponse"];
+                };
+            };
+            /** @description Bad request - Invalid parameters or file */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized - Invalid or missing API token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    recraftRemoveBackground: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": {
+                    /**
+                     * Format: binary
+                     * @description Image file to process
+                     */
+                    file: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Background removed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        image?: {
+                            /**
+                             * Format: uri
+                             * @description URL of the processed image
+                             */
+                            url?: string;
+                        };
+                    };
+                };
+            };
+            /** @description Bad request - Invalid parameters or file */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized - Invalid or missing API token */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    RecraftImageToImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["RecraftImageToImageRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftGenerateImageResponse"];
+                };
+            };
+        };
+    };
+    RecraftInpaintImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["RecraftTransformImageWithMaskRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftGenerateImageResponse"];
+                };
+            };
+        };
+    };
+    RecraftReplaceBackground: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["RecraftTransformImageWithMaskRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftGenerateImageResponse"];
+                };
+            };
+        };
+    };
+    RecraftCreativeUpscale: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["RecraftProcessImageRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RecraftProcessImageResponse"];
+                };
+            };
+        };
+    };
+    runwayImageToVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["RunwayImageToVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RunwayImageToVideoResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    runwayGetTaskStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description ID of the task to check */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RunwayTaskStatusResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Task not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    runwayTextToImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["RunwayTextToImageRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RunwayTextToImageResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    veoGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Veo2GenVidRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generation successful */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Veo2GenVidResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    veoPoll: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Veo2GenVidPollRequest"];
+            };
+        };
+        responses: {
+            /** @description Operation status and result */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Veo2GenVidPollResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Operation not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    veoGenerateNew: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the model to use for generation */
+                modelId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["VeoGenVidRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generation successful */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["VeoGenVidResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    veoPollNew: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the model to use for generation */
+                modelId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["VeoGenVidPollRequest"];
+            };
+        };
+        responses: {
+            /** @description Operation status and result */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["VeoGenVidPollResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Operation not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    createOpenAIResponse: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["OpenAICreateResponse"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["OpenAIResponse"];
+                    "text/event-stream": components["schemas"]["OpenAIResponseStreamEvent"];
+                };
+            };
+        };
+    };
+    getOpenAIResponse: {
+        parameters: {
+            query?: {
+                /**
+                 * @description Additional fields to include in the response. See the `include`
+                 *     parameter for Response creation above for more information.
+                 */
+                include?: components["schemas"]["Includable"][];
+            };
+            header?: never;
+            path: {
+                /** @description The ID of the response to retrieve. */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["OpenAIResponse"];
+                };
+            };
+        };
+    };
+    openAIGenerateImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["OpenAIImageGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Image generated successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["OpenAIImageGenerationResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    openAIEditImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["OpenAIImageEditRequest"];
+            };
+        };
+        responses: {
+            /** @description Image edited successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["OpenAIImageGenerationResponse"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    openAICreateVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["OpenAIVideoCreateRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generation job created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["OpenAIVideoJob"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    openAIGetVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The identifier of the video to retrieve */
+                video_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Video job details */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["OpenAIVideoJob"];
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Video not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    openAIDownloadVideoContent: {
+        parameters: {
+            query?: {
+                /** @description Which downloadable asset to return */
+                variant?: string;
+            };
+            header?: never;
+            path: {
+                /** @description The identifier of the video whose media to download */
+                video_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Video content stream */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "video/mp4": string;
+                };
+            };
+            /** @description Bad request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Video not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    PikaGenerate_pikadditions_generate_pikadditions_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["PikaBody_generate_pikadditions_generate_pikadditions_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaGenerateResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    PikaGenerate_pikaswaps_generate_pikaswaps_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["PikaBody_generate_pikaswaps_generate_pikaswaps_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaGenerateResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    PikaGenerate_pikaffects_generate_pikaffects_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["PikaBody_generate_pikaffects_generate_pikaffects_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaGenerateResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    PikaGenerate_2_2_t2v_generate_2_2_t2v_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/x-www-form-urlencoded": components["schemas"]["PikaBody_generate_2_2_t2v_generate_2_2_t2v_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaGenerateResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    PikaGenerate_2_2_keyframe_generate_2_2_pikaframes_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["PikaBody_generate_2_2_keyframe_generate_2_2_pikaframes_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaGenerateResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    PikaGenerate_2_2_c2v_generate_2_2_pikascenes_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["PikaBody_generate_2_2_c2v_generate_2_2_pikascenes_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaGenerateResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    PikaGenerate_2_2_i2v_generate_2_2_i2v_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["PikaBody_generate_2_2_i2v_generate_2_2_i2v_post"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaGenerateResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    PikaGet_video_videos__video_id__get: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                video_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaVideoResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PikaHTTPValidationError"];
+                };
+            };
+        };
+    };
+    StabilityImageGenrationUltra: {
+        parameters: {
+            query?: never;
+            header: {
+                authorization: string;
+                "content-type": string;
+                accept?: "image/*" | "application/json";
+                "stability-client-id"?: components["schemas"]["StabilityStabilityClientID"];
+                "stability-client-user-id"?: components["schemas"]["StabilityStabilityClientUserID"];
+                "stability-client-version"?: components["schemas"]["StabilityStabilityClientVersion"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": {
+                    /** @description What you wish to see in the output image. A strong, descriptive prompt that clearly defines elements, colors, and subjects will lead to better results. To control the weight of a given word use the format `(word:weight)`, where `word` is the word you'd like to control the weight of and `weight` is a value between 0 and 1. For example: `The sky was a crisp (blue:0.3) and (green:0.8)` would convey a sky that was blue and green, but more green than blue. */
+                    prompt: string;
+                    /** @description A blurb of text describing what you **do not** wish to see in the output image. This is an advanced feature. */
+                    negative_prompt?: string;
+                    /**
+                     * @description Controls the aspect ratio of the generated image.
+                     * @default 1:1
+                     * @enum {string}
+                     */
+                    aspect_ratio?: "21:9" | "16:9" | "3:2" | "5:4" | "1:1" | "4:5" | "2:3" | "9:16" | "9:21";
+                    /**
+                     * @description A specific value that is used to guide the 'randomness' of the generation. (Omit this parameter or pass `0` to use a random seed.)
+                     * @default 0
+                     */
+                    seed?: number;
+                    /**
+                     * @description Dictates the `content-type` of the generated image.
+                     * @default png
+                     * @enum {string}
+                     */
+                    output_format?: "jpeg" | "png" | "webp";
+                    /**
+                     * Format: binary
+                     * @description The image to use as the starting point for the generation. > **Important:** The `strength` parameter is required when `image` is provided. Supported Formats: - jpeg - png - webp Validation Rules: - Width must be between 64 and 16,384 pixels - Height must be between 64 and 16,384 pixels - Total pixel count must be at least 4,096 pixels
+                     * @example ./some/image.png
+                     */
+                    image?: string;
+                    /**
+                     * @description Guides the image model towards a particular style.
+                     * @enum {string}
+                     */
+                    style_preset?: "enhance" | "anime" | "photographic" | "digital-art" | "comic-book" | "fantasy-art" | "line-art" | "analog-film" | "neon-punk" | "isometric" | "low-poly" | "origami" | "modeling-compound" | "cinematic" | "3d-model" | "pixel-art" | "tile-texture";
+                    /**
+                     * @description Sometimes referred to as _denoising_, this parameter controls how much influence the
+                     *     `image` parameter has on the generated image.  A value of 0 would yield an image that
+                     *     is identical to the input.  A value of 1 would be as if you passed in no image at all.
+                     *
+                     *     > **Important:** This parameter is required when `image` is provided.
+                     */
+                    strength?: number;
+                };
+            };
+        };
+        responses: {
+            /** @description Generation was successful. */
+            200: {
+                headers: {
+                    /** @description A unique identifier for this request. */
+                    "x-request-id"?: string;
+                    /**
+                     * @description The format of the generated image.
+                     *       To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`.
+                     */
+                    "content-type"?: string;
+                    /** @description Indicates the reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result. > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`. */
+                    "finish-reason"?: "SUCCESS" | "CONTENT_FILTERED";
+                    /**
+                     * @description The seed used as random noise for this generation. > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
+                     * @example 343940597
+                     */
+                    seed?: string;
+                    [name: string]: unknown;
+                };
+                content: {
+                    /** @example The bytes of the generated jpeg */
+                    "image/jpeg": string;
+                    "application/json; type=image/jpeg": {
+                        /**
+                         * @description The generated image, encoded to base64.
+                         * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+                         */
+                        image: string;
+                        /**
+                         * @description The seed used as random noise for this generation.
+                         * @default 0
+                         * @example 343940597
+                         */
+                        seed: number;
+                        /**
+                         * @description The reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result.
+                         * @example SUCCESS
+                         * @enum {string}
+                         */
+                        finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+                    };
+                    /** @example The bytes of the generated png */
+                    "image/png": string;
+                    "application/json; type=image/png": {
+                        /**
+                         * @description The generated image, encoded to base64.
+                         * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+                         */
+                        image: string;
+                        /**
+                         * @description The seed used as random noise for this generation.
+                         * @default 0
+                         * @example 343940597
+                         */
+                        seed: number;
+                        /**
+                         * @description The reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result.
+                         * @example SUCCESS
+                         * @enum {string}
+                         */
+                        finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+                    };
+                    /** @example The bytes of the generated webp */
+                    "image/webp": string;
+                    "application/json; type=image/webp": {
+                        /**
+                         * @description The generated image, encoded to base64.
+                         * @example AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+                         */
+                        image: string;
+                        /**
+                         * @description The seed used as random noise for this generation.
+                         * @default 0
+                         * @example 343940597
+                         */
+                        seed: number;
+                        /**
+                         * @description The reason the generation finished. - `SUCCESS` = successful generation. - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation policy and has been blurred as a result.
+                         * @example SUCCESS
+                         * @enum {string}
+                         */
+                        finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+                    };
+                };
+            };
+            /** @description Invalid parameter(s), see the `errors` field for details. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /**
+                         * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
+                         * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+                         */
+                        id: string;
+                        /**
+                         * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+                         * @example bad_request
+                         */
+                        name: string;
+                        /**
+                         * @description One or more error messages indicating what went wrong.
+                         * @example [
+                         *       "some-field: is required"
+                         *     ]
+                         */
+                        errors: string[];
+                    };
+                };
+            };
+            /** @description Your request was flagged by our content moderation system. */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityContentModerationResponse"];
+                };
+            };
+            /** @description Your request was larger than 10MiB. */
+            413: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /**
+                         * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
+                         * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+                         */
+                        id: string;
+                        /**
+                         * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+                         * @example bad_request
+                         */
+                        name: string;
+                        /**
+                         * @description One or more error messages indicating what went wrong.
+                         * @example [
+                         *       "some-field: is required"
+                         *     ]
+                         */
+                        errors: string[];
+                    };
+                };
+            };
+            /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /**
+                         * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
+                         * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+                         */
+                        id: string;
+                        /**
+                         * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+                         * @example bad_request
+                         */
+                        name: string;
+                        /**
+                         * @description One or more error messages indicating what went wrong.
+                         * @example [
+                         *       "some-field: is required"
+                         *     ]
+                         */
+                        errors: string[];
+                    };
+                };
+            };
+            /** @description You have made more than 150 requests in 10 seconds. */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /**
+                         * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
+                         * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+                         */
+                        id: string;
+                        /**
+                         * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+                         * @example bad_request
+                         */
+                        name: string;
+                        /**
+                         * @description One or more error messages indicating what went wrong.
+                         * @example [
+                         *       "some-field: is required"
+                         *     ]
+                         */
+                        errors: string[];
+                    };
+                };
+            };
+            /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /**
+                         * @description A unique identifier associated with this error. Please include this in any [support tickets](https://kb.stability.ai/knowledge-base/kb-tickets/new) you file, as it will greatly assist us in diagnosing the root cause of the problem.
+                         * @example a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4
+                         */
+                        id: string;
+                        /**
+                         * @description Short-hand name for an error, useful for discriminating between errors with the same status code.
+                         * @example bad_request
+                         */
+                        name: string;
+                        /**
+                         * @description One or more error messages indicating what went wrong.
+                         * @example [
+                         *       "some-field: is required"
+                         *     ]
+                         */
+                        errors: string[];
+                    };
+                };
+            };
+        };
+    };
+    StabilityImageGenrationSD3: {
+        parameters: {
+            query?: never;
+            header: {
+                authorization: string;
+                "content-type": string;
+                accept?: "image/*" | "application/json";
+                "stability-client-id"?: components["schemas"]["StabilityStabilityClientID"];
+                "stability-client-user-id"?: components["schemas"]["StabilityStabilityClientUserID"];
+                "stability-client-version"?: components["schemas"]["StabilityStabilityClientVersion"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["StabilityImageGenerationSD3_Request"];
+            };
+        };
+        responses: {
+            /** @description Generation was successful. */
+            200: {
+                headers: {
+                    /** @description A unique identifier for this request. */
+                    "x-request-id"?: string;
+                    /**
+                     * @description The format of the generated image.
+                     *
+                     *      To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`.
+                     */
+                    "content-type"?: string;
+                    /**
+                     * @description Indicates the reason the generation finished.
+                     *
+                     *     - `SUCCESS` = successful generation.
+                     *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+                     *     policy and has been blurred as a result.
+                     *
+                     *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`.
+                     */
+                    "finish-reason"?: "SUCCESS" | "CONTENT_FILTERED";
+                    /**
+                     * @description The seed used as random noise for this generation.
+                     *
+                     *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
+                     * @example 343940597
+                     */
+                    seed?: string;
+                    [name: string]: unknown;
+                };
+                content: {
+                    /** @example The bytes of the generated png */
+                    "image/png": string;
+                    "application/json; type=image/png": components["schemas"]["StabilityImageGenrationSD3_Response_200"];
+                    /** @example The bytes of the generated jpeg */
+                    "image/jpeg": string;
+                    "application/json; type=image/jpeg": components["schemas"]["StabilityImageGenrationSD3_Response_200"];
+                };
+            };
+            /** @description Invalid parameter(s), see the `errors` field for details. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationSD3_Response_400"];
+                };
+            };
+            /** @description Your request was flagged by our content moderation system. */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityContentModerationResponse"];
+                };
+            };
+            /** @description Your request was larger than 10MiB. */
+            413: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationSD3_Response_413"];
+                };
+            };
+            /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationSD3_Response_422"];
+                };
+            };
+            /** @description You have made more than 150 requests in 10 seconds. */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationSD3_Response_429"];
+                };
+            };
+            /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationSD3_Response_500"];
+                };
+            };
+        };
+    };
+    StabilityImageGenrationUpscaleConservative: {
+        parameters: {
+            query?: never;
+            header: {
+                authorization: string;
+                "content-type": string;
+                accept?: "image/*" | "application/json";
+                "stability-client-id"?: components["schemas"]["StabilityStabilityClientID"];
+                "stability-client-user-id"?: components["schemas"]["StabilityStabilityClientUserID"];
+                "stability-client-version"?: components["schemas"]["StabilityStabilityClientVersion"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["StabilityImageGenrationUpscaleConservative_Request"];
+            };
+        };
+        responses: {
+            /** @description Upscale was successful. */
+            200: {
+                headers: {
+                    /** @description A unique identifier for this request. */
+                    "x-request-id"?: string;
+                    /**
+                     * @description The format of the generated image.
+                     *
+                     *      To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`.
+                     */
+                    "content-type"?: string;
+                    /**
+                     * @description Indicates the reason the generation finished.
+                     *
+                     *     - `SUCCESS` = successful generation.
+                     *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+                     *     policy and has been blurred as a result.
+                     *
+                     *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`.
+                     */
+                    "finish-reason"?: "SUCCESS" | "CONTENT_FILTERED";
+                    /**
+                     * @description The seed used as random noise for this generation.
+                     *
+                     *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
+                     * @example 343940597
+                     */
+                    seed?: string;
+                    [name: string]: unknown;
+                };
+                content: {
+                    /** @example The bytes of the generated jpeg */
+                    "image/jpeg": string;
+                    "application/json; type=image/jpeg": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_200"];
+                    /** @example The bytes of the generated png */
+                    "image/png": string;
+                    "application/json; type=image/png": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_200"];
+                    /** @example The bytes of the generated webp */
+                    "image/webp": string;
+                    "application/json; type=image/webp": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_200"];
+                };
+            };
+            /** @description Invalid parameter(s), see the `errors` field for details. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_400"];
+                };
+            };
+            /** @description Your request was flagged by our content moderation system. */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityContentModerationResponse"];
+                };
+            };
+            /** @description Your request was larger than 10MiB. */
+            413: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_413"];
+                };
+            };
+            /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_422"];
+                };
+            };
+            /** @description You have made more than 150 requests in 10 seconds. */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_429"];
+                };
+            };
+            /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleConservative_Response_500"];
+                };
+            };
+        };
+    };
+    StabilityImageGenrationUpscaleCreative: {
+        parameters: {
+            query?: never;
+            header: {
+                authorization: string;
+                "content-type": string;
+                "stability-client-id"?: components["schemas"]["StabilityStabilityClientID"];
+                "stability-client-user-id"?: components["schemas"]["StabilityStabilityClientUserID"];
+                "stability-client-version"?: components["schemas"]["StabilityStabilityClientVersion"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["StabilityImageGenrationUpscaleCreative_Request"];
+            };
+        };
+        responses: {
+            /** @description Upscale was started. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleCreative_Response_200"];
+                };
+            };
+            /** @description Invalid parameter(s), see the `errors` field for details. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleCreative_Response_400"];
+                };
+            };
+            /** @description Your request was flagged by our content moderation system. */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityContentModerationResponse"];
+                };
+            };
+            /** @description Your request was larger than 10MiB. */
+            413: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleCreative_Response_413"];
+                };
+            };
+            /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleCreative_Response_422"];
+                };
+            };
+            /** @description You have made more than 150 requests in 10 seconds. */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleCreative_Response_429"];
+                };
+            };
+            /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleCreative_Response_500"];
+                };
+            };
+        };
+    };
+    StabilityImageGenerationUpscaleFast: {
+        parameters: {
+            query?: never;
+            header: {
+                authorization: string;
+                "content-type": string;
+                accept?: "image/*" | "application/json";
+                "stability-client-id"?: components["schemas"]["StabilityStabilityClientID"];
+                "stability-client-user-id"?: components["schemas"]["StabilityStabilityClientUserID"];
+                "stability-client-version"?: components["schemas"]["StabilityStabilityClientVersion"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["StabilityImageGenrationUpscaleFast_Request"];
+            };
+        };
+        responses: {
+            /** @description Upscale was successful. */
+            200: {
+                headers: {
+                    /** @description A unique identifier for this request. */
+                    "x-request-id"?: string;
+                    /**
+                     * @description The format of the generated image.
+                     *
+                     *      To receive the bytes of the image directly, specify `image/*` in the accept header. To receive the bytes base64 encoded inside of a JSON payload, specify `application/json`.
+                     */
+                    "content-type"?: string;
+                    /**
+                     * @description Indicates the reason the generation finished.
+                     *
+                     *     - `SUCCESS` = successful generation.
+                     *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+                     *     policy and has been blurred as a result.
+                     *
+                     *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `finish_reason`.
+                     */
+                    "finish-reason"?: "SUCCESS" | "CONTENT_FILTERED";
+                    /**
+                     * @description The seed used as random noise for this generation.
+                     *
+                     *     > **NOTE:** This header is absent on JSON encoded responses because it is present in the body as `seed`.
+                     * @example 343940597
+                     */
+                    seed?: string;
+                    [name: string]: unknown;
+                };
+                content: {
+                    /** @example The bytes of the generated jpeg */
+                    "image/jpeg": string;
+                    "application/json; type=image/jpeg": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_200"];
+                    /** @example The bytes of the generated png */
+                    "image/png": string;
+                    "application/json; type=image/png": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_200"];
+                    /** @example The bytes of the generated webp */
+                    "image/webp": string;
+                    "application/json; type=image/webp": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_200"];
+                };
+            };
+            /** @description Invalid parameter(s), see the `errors` field for details. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_400"];
+                };
+            };
+            /** @description Your request was flagged by our content moderation system. */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityContentModerationResponse"];
+                };
+            };
+            /** @description Your request was larger than 10MiB. */
+            413: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_413"];
+                };
+            };
+            /** @description Your request was well-formed, but rejected. See the `errors` field for details. */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_422"];
+                };
+            };
+            /** @description You have made more than 150 requests in 10 seconds. */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_429"];
+                };
+            };
+            /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityImageGenrationUpscaleFast_Response_500"];
+                };
+            };
+        };
+    };
+    StabilityGetResult: {
+        parameters: {
+            query?: never;
+            header?: {
+                /** @description Set to image/* to receive image bytes. */
+                Accept?: string;
+            };
+            path: {
+                /** @description The ID of the generation result to retrieve. */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description The generated image as JPEG bytes. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "image/jpeg": string;
+                    "application/json; type=image/jpeg": {
+                        /**
+                         * @description The generated image, encoded to base64.
+                         * @example AAAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+                         */
+                        image: string;
+                        /**
+                         * @description The seed used as random noise for this generation.
+                         * @default 0
+                         * @example 343940597
+                         */
+                        seed: number;
+                        /**
+                         * @description The reason the generation finished.
+                         *
+                         *     - `SUCCESS` = successful generation.
+                         *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+                         *       policy and has been blurred as a result.
+                         * @example SUCCESS
+                         * @enum {string}
+                         */
+                        finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+                    };
+                    /** @example The bytes of the generated png */
+                    "image/png": string;
+                    "application/json; type=image/png": {
+                        /**
+                         * @description The generated image, encoded to base64.
+                         * @example AAAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+                         */
+                        image: string;
+                        /**
+                         * @description The seed used as random noise for this generation.
+                         * @default 0
+                         * @example 343940597
+                         */
+                        seed: number;
+                        /**
+                         * @description The reason the generation finished.
+                         *
+                         *     - `SUCCESS` = successful generation.
+                         *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+                         *       policy and has been blurred as a result.
+                         * @example SUCCESS
+                         * @enum {string}
+                         */
+                        finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+                    };
+                    /** @example The bytes of the generated webp */
+                    "image/webp": string;
+                    "application/json; type=image/webp": {
+                        /**
+                         * @description The generated image, encoded to base64.
+                         * @example AAAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1...
+                         */
+                        image: string;
+                        /**
+                         * @description The seed used as random noise for this generation.
+                         * @default 0
+                         * @example 343940597
+                         */
+                        seed: number;
+                        /**
+                         * @description The reason the generation finished.
+                         *
+                         *     - `SUCCESS` = successful generation.
+                         *     - `CONTENT_FILTERED` = successful generation, however the output violated our content moderation
+                         *       policy and has been blurred as a result.
+                         * @example SUCCESS
+                         * @enum {string}
+                         */
+                        finish_reason: "SUCCESS" | "CONTENT_FILTERED";
+                    };
+                };
+            };
+            /** @description The generation is still in progress. */
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityGetResultResponse_202"];
+                };
+            };
+            /** @description Invalid result ID. */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityError"];
+                };
+            };
+            /** @description Result not found. */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityError"];
+                };
+            };
+            /** @description An internal error occurred. If the problem persists [contact support](https://kb.stability.ai/knowledge-base/kb-tickets/new). */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StabilityError"];
+                };
+            };
+        };
+    };
+    stableAudio25TextToAudio: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["StableAudio25TextToAudioRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Stable Audio proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StableAudio25AudioResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    stableAudio25AudioToAudio: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["StableAudio25AudioToAudioRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Stable Audio proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StableAudio25AudioResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    stableAudio25Inpaint: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["StableAudio25InpaintRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from Stable Audio proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["StableAudio25AudioResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    GeminiGenerateContent: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Full resource name of the model. */
+                model: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["GeminiGenerateContentRequest"];
+            };
+        };
+        responses: {
+            /** @description Generated content response. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GeminiGenerateContentResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    ImagenGenerateImages: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description image generation model */
+                model: "imagen-3.0-generate-002" | "imagen-3.0-generate-001" | "imagen-3.0-fast-generate-001" | "imagegeneration@006" | "imagegeneration@005" | "imagegeneration@002";
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ImagenGenerateImageRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful image generation */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImagenGenerateImageResponse"];
+                };
+            };
+            /** @description Client error */
+            "4XX": {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Server error */
+            "5XX": {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    tripoGetTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Request successful */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        code: components["schemas"]["TripoResponseSuccessCode"];
+                        data: components["schemas"]["TripoTask"];
+                    };
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+        };
+    };
+    tripoUploadFile: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": {
+                    /** Format: binary */
+                    file: string;
+                };
+            };
+        };
+        responses: {
+            /** @description Request successful */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        code: components["schemas"]["TripoResponseSuccessCode"];
+                        data: {
+                            image_token: string;
+                        };
+                    };
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+        };
+    };
+    tripoCreateTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "application/json": {
+                    type: components["schemas"]["TripoTextToModel"];
+                    prompt: string;
+                    negative_prompt?: string;
+                    model_version?: components["schemas"]["TripoModelVersion"];
+                    face_limit?: number;
+                    /** @default true */
+                    texture?: boolean;
+                    /** @default true */
+                    pbr?: boolean;
+                    text_seed?: number;
+                    model_seed?: number;
+                    texture_seed?: number;
+                    /** @default standard */
+                    texture_quality?: components["schemas"]["TripoTextureQuality"];
+                    style?: components["schemas"]["TripoModelStyle"];
+                    /** @default false */
+                    auto_size?: boolean;
+                    /** @default false */
+                    quad?: boolean;
+                } | {
+                    type: components["schemas"]["TripoImageToModel"];
+                    file: {
+                        type: string;
+                        file_token: string;
+                    };
+                    model_version?: components["schemas"]["TripoModelVersion"];
+                    face_limit?: number;
+                    /** @default true */
+                    texture?: boolean;
+                    /** @default true */
+                    pbr?: boolean;
+                    model_seed?: number;
+                    texture_seed?: number;
+                    /** @default standard */
+                    texture_quality?: components["schemas"]["TripoTextureQuality"];
+                    /** @default original_image */
+                    texture_alignment?: components["schemas"]["TripoTextureAlignment"];
+                    style?: components["schemas"]["TripoModelStyle"];
+                    /** @default false */
+                    auto_size?: boolean;
+                    /** @default default */
+                    orientation?: components["schemas"]["TripoOrientation"];
+                    /** @default false */
+                    quad?: boolean;
+                } | {
+                    type: components["schemas"]["TripoMultiviewToModel"];
+                    files: {
+                        type: string;
+                        file_token: string;
+                    }[];
+                    mode?: components["schemas"]["TripoMultiviewMode"];
+                    model_version?: components["schemas"]["TripoModelVersion"];
+                    /** @default false */
+                    orthographic_projection?: boolean;
+                    face_limit?: number;
+                    /** @default true */
+                    texture?: boolean;
+                    /** @default true */
+                    pbr?: boolean;
+                    model_seed?: number;
+                    texture_seed?: number;
+                    /** @default standard */
+                    texture_quality?: components["schemas"]["TripoTextureQuality"];
+                    /** @default original_image */
+                    texture_alignment?: components["schemas"]["TripoTextureAlignment"];
+                    /** @default false */
+                    auto_size?: boolean;
+                    /** @default default */
+                    orientation?: components["schemas"]["TripoOrientation"];
+                    /** @default false */
+                    quad?: boolean;
+                } | {
+                    type: components["schemas"]["TripoTypeTextureModel"];
+                    /** @default true */
+                    texture?: boolean;
+                    /** @default true */
+                    pbr?: boolean;
+                    model_seed?: number;
+                    texture_seed?: number;
+                    texture_quality?: components["schemas"]["TripoTextureQuality"];
+                    /** @default original_image */
+                    texture_alignment?: components["schemas"]["TripoTextureAlignment"];
+                    original_model_task_id: string;
+                } | {
+                    type: components["schemas"]["TripoTypeRefineModel"];
+                    draft_model_task_id: string;
+                } | {
+                    type: components["schemas"]["TripoTypeAnimatePrerigcheck"];
+                    original_model_task_id: string;
+                } | {
+                    type: components["schemas"]["TripoTypeAnimateRig"];
+                    original_model_task_id: string;
+                    /** @default glb */
+                    out_format?: components["schemas"]["TripoStandardFormat"];
+                    topology?: components["schemas"]["TripoTopology"];
+                    /** @default tripo */
+                    spec?: components["schemas"]["TripoSpec"];
+                } | {
+                    type: components["schemas"]["TripoTypeAnimateRetarget"];
+                    original_model_task_id: string;
+                    /** @default glb */
+                    out_format?: components["schemas"]["TripoStandardFormat"];
+                    animation: components["schemas"]["TripoAnimation"];
+                    /** @default true */
+                    bake_animation?: boolean;
+                } | {
+                    type: components["schemas"]["TripoTypeStylizeModel"];
+                    style: components["schemas"]["TripoStylizeOptions"];
+                    original_model_task_id: string;
+                    /** @default 80 */
+                    block_size?: number;
+                } | {
+                    type: components["schemas"]["TripoTypeConvertModel"];
+                    format: components["schemas"]["TripoConvertFormat"];
+                    original_model_task_id: string;
+                    /** @default false */
+                    quad?: boolean;
+                    /** @default false */
+                    force_symmetry?: boolean;
+                    /** @default 10000 */
+                    face_limit?: number;
+                    /** @default false */
+                    flatten_bottom?: boolean;
+                    /** @default 0.01 */
+                    flatten_bottom_threshold?: number;
+                    /** @default 4096 */
+                    texture_size?: number;
+                    /** @default JPEG */
+                    texture_format?: components["schemas"]["TripoTextureFormat"];
+                    /** @default false */
+                    pivot_to_center_bottom?: boolean;
+                };
+            };
+        };
+        responses: {
+            /** @description Request successful */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoSuccessTask"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+        };
+    };
+    tripoGetBalance: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Request successful */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        code: components["schemas"]["TripoResponseSuccessCode"];
+                        data: components["schemas"]["TripoBalance"];
+                    };
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TripoErrorResponse"];
+                };
+            };
+        };
+    };
+    rodinGenerate3DAsset: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["Rodin3DGenerateRequest"];
+            };
+        };
+        responses: {
+            /** @description 3D generate Task submitted successfully. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Rodin3DGenerateResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    rodinCheckStatus: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["Rodin3DCheckStatusRequest"];
+            };
+        };
+        responses: {
+            /** @description Get the status of the 3D Assets generation. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Rodin3DCheckStatusResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    rodinDownload: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["Rodin3DDownloadRequest"];
+            };
+        };
+        responses: {
+            /** @description Get the download list for the Rodin 3D Assets. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Rodin3DDownloadResponse"];
+                };
+            };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Internal Server Error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    MoonvalleyGetPrompt: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                prompt_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Prompt details retrieved */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MoonvalleyPromptResponse"];
+                };
+            };
+        };
+    };
+    MoonvalleyTextToVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MoonvalleyTextToVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Prompt created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MoonvalleyPromptResponse"];
+                };
+            };
+        };
+    };
+    MoonvalleyTextToImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MoonvalleyTextToImageRequest"];
+            };
+        };
+        responses: {
+            /** @description Prompt created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MoonvalleyPromptResponse"];
+                };
+            };
+        };
+    };
+    MoonvalleyImageToVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MoonvalleyImageToVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Prompt created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MoonvalleyPromptResponse"];
+                };
+            };
+        };
+    };
+    MoonvalleyVideoToVideo: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MoonvalleyVideoToVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Prompt created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MoonvalleyPromptResponse"];
+                };
+            };
+        };
+    };
+    MoonvalleyVideoToVideoResize: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["MoonvalleyResizeVideoRequest"];
+            };
+        };
+        responses: {
+            /** @description Prompt created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MoonvalleyPromptResponse"];
+                };
+            };
+        };
+    };
+    MoonvalleyUpload: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["MoonvalleyUploadFileRequest"];
+            };
+        };
+        responses: {
+            /** @description File uploaded successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["MoonvalleyUploadFileResponse"];
+                };
+            };
+        };
+    };
+    ViduImg2Video: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ViduTaskRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ViduTaskReply"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    ViduReference2Video: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ViduTaskRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ViduTaskReply"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    ViduStartEnd2Video: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ViduTaskRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ViduTaskReply"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    ViduText2Video: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ViduTaskRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ViduTaskReply"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    ViduGetCreations: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ViduGetCreationsReply"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Error"];
+                };
+            };
+        };
+    };
+    byteplusImageGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BytePlusImageGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Image generation completed successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BytePlusImageGenerationResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    byteplusVideoGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BytePlusVideoGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generation task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BytePlusVideoGenerationResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    byteplusVideoGenerationQuery: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the video generation task to query */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Video generation task information retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BytePlusVideoGenerationQueryResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wanVideoGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["WanVideoGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Video generation task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WanVideoGenerationResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wanImageGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["WanImageGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Image generation task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WanImageGenerationResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wanImage2ImageGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["WanImage2ImageGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Image-to-image generation task created successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WanImage2ImageGenerationResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
+    wanTaskQueryProxy: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the generation task to query */
+                task_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Generation task information retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["WanTaskQueryResponse"];
+                };
+            };
+            /** @description Error 4xx/5xx */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
 }
diff --git a/packages/shared-frontend-utils/src/formatUtil.ts b/packages/shared-frontend-utils/src/formatUtil.ts
index 658498f1f..cb1a0d1a3 100644
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -474,3 +474,68 @@ export function formatDuration(milliseconds: number): string {
 
   return parts.join(' ')
 }
+
+const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'] as const
+const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
+const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
+const THREE_D_EXTENSIONS = ['obj', 'fbx', 'gltf', 'glb'] as const
+
+const MEDIA_TYPES = ['image', 'video', 'audio', '3D'] as const
+type MediaType = (typeof MEDIA_TYPES)[number]
+
+// Type guard helper for checking array membership
+type ImageExtension = (typeof IMAGE_EXTENSIONS)[number]
+type VideoExtension = (typeof VIDEO_EXTENSIONS)[number]
+type AudioExtension = (typeof AUDIO_EXTENSIONS)[number]
+type ThreeDExtension = (typeof THREE_D_EXTENSIONS)[number]
+
+/**
+ * Truncates a filename while preserving the extension
+ * @param filename The filename to truncate
+ * @param maxLength Maximum length for the filename without extension
+ * @returns Truncated filename with extension preserved
+ */
+export function truncateFilename(
+  filename: string,
+  maxLength: number = 20
+): string {
+  if (!filename || filename.length <= maxLength) {
+    return filename
+  }
+
+  const lastDotIndex = filename.lastIndexOf('.')
+  const nameWithoutExt =
+    lastDotIndex > -1 ? filename.substring(0, lastDotIndex) : filename
+  const extension = lastDotIndex > -1 ? filename.substring(lastDotIndex) : ''
+
+  // If the name without extension is short enough, return as is
+  if (nameWithoutExt.length <= maxLength) {
+    return filename
+  }
+
+  // Calculate how to split the truncation
+  const halfLength = Math.floor((maxLength - 3) / 2) // -3 for '...'
+  const start = nameWithoutExt.substring(0, halfLength)
+  const end = nameWithoutExt.substring(nameWithoutExt.length - halfLength)
+
+  return `${start}...${end}${extension}`
+}
+
+/**
+ * Determines the media type from a filename's extension (singular form)
+ * @param filename The filename to analyze
+ * @returns The media type: 'image', 'video', 'audio', or '3D'
+ */
+export function getMediaTypeFromFilename(filename: string): MediaType {
+  if (!filename) return 'image'
+  const ext = filename.split('.').pop()?.toLowerCase()
+  if (!ext) return 'image'
+
+  // Type-safe array includes check using type assertion
+  if (IMAGE_EXTENSIONS.includes(ext as ImageExtension)) return 'image'
+  if (VIDEO_EXTENSIONS.includes(ext as VideoExtension)) return 'video'
+  if (AUDIO_EXTENSIONS.includes(ext as AudioExtension)) return 'audio'
+  if (THREE_D_EXTENSIONS.includes(ext as ThreeDExtension)) return '3D'
+
+  return 'image'
+}
diff --git a/packages/tailwind-utils/README.md b/packages/tailwind-utils/README.md
index 5f315600b..35c725e88 100644
--- a/packages/tailwind-utils/README.md
+++ b/packages/tailwind-utils/README.md
@@ -14,7 +14,7 @@ import { cn } from '@comfyorg/tailwind-utils'
 
 // Use with conditional classes (ternary)
 <button
-  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-500')"
+  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-smoke-500')"
 />
 ```
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de05d7d7e..9fde29d3e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,15 +12,9 @@ catalogs:
     '@eslint/js':
       specifier: ^9.35.0
       version: 9.35.0
-    '@iconify-json/lucide':
-      specifier: ^1.1.178
-      version: 1.2.66
     '@iconify/json':
       specifier: ^2.2.380
       version: 2.2.380
-    '@iconify/tailwind':
-      specifier: ^1.1.3
-      version: 1.2.0
     '@intlify/eslint-plugin-vue-i18n':
       specifier: ^4.1.0
       version: 4.1.0
@@ -45,6 +39,9 @@ catalogs:
     '@playwright/test':
       specifier: ^1.52.0
       version: 1.52.0
+    '@prettier/plugin-oxc':
+      specifier: ^0.0.4
+      version: 0.0.4
     '@primeuix/forms':
       specifier: 0.0.2
       version: 0.0.2
@@ -66,6 +63,9 @@ catalogs:
     '@primevue/themes':
       specifier: ^4.2.5
       version: 4.2.5
+    '@sentry/vite-plugin':
+      specifier: ^4.6.0
+      version: 4.6.0
     '@sentry/vue':
       specifier: ^8.48.0
       version: 8.48.0
@@ -84,9 +84,6 @@ catalogs:
     '@trivago/prettier-plugin-sort-imports':
       specifier: ^5.2.0
       version: 5.2.2
-    '@types/eslint-plugin-tailwindcss':
-      specifier: ^3.17.0
-      version: 3.17.0
     '@types/fs-extra':
       specifier: ^11.0.4
       version: 11.0.4
@@ -150,9 +147,6 @@ catalogs:
     eslint-plugin-storybook:
       specifier: ^9.1.6
       version: 9.1.6
-    eslint-plugin-tailwindcss:
-      specifier: 4.0.0-beta.0
-      version: 4.0.0-beta.0
     eslint-plugin-unused-imports:
       specifier: ^4.2.0
       version: 4.2.0
@@ -183,9 +177,18 @@ catalogs:
     lint-staged:
       specifier: ^15.2.7
       version: 15.2.7
+    markdown-table:
+      specifier: ^3.0.4
+      version: 3.0.4
+    mixpanel-browser:
+      specifier: ^2.71.0
+      version: 2.71.0
     nx:
       specifier: 21.4.1
       version: 21.4.1
+    picocolors:
+      specifier: ^1.1.1
+      version: 1.1.1
     pinia:
       specifier: ^2.1.7
       version: 2.2.2
@@ -193,8 +196,11 @@ catalogs:
       specifier: ^1.8.0
       version: 1.8.0
     prettier:
-      specifier: ^3.3.2
-      version: 3.3.2
+      specifier: ^3.6.2
+      version: 3.6.2
+    pretty-bytes:
+      specifier: ^7.1.0
+      version: 7.1.0
     primeicons:
       specifier: ^7.0.0
       version: 7.0.0
@@ -254,7 +260,7 @@ catalogs:
       version: 3.5.13
     vue-component-type-helpers:
       specifier: ^3.0.7
-      version: 3.1.0
+      version: 3.1.1
     vue-eslint-parser:
       specifier: ^10.2.0
       version: 10.2.0
@@ -476,7 +482,7 @@ importers:
         version: 21.4.1(@babel/traverse@7.28.3)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/storybook':
         specifier: 'catalog:'
-        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
+        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
       '@nx/vite':
         specifier: 'catalog:'
         version: 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vitest@3.2.4)
@@ -486,24 +492,27 @@ importers:
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.52.0
+      '@prettier/plugin-oxc':
+        specifier: 'catalog:'
+        version: 0.0.4
+      '@sentry/vite-plugin':
+        specifier: 'catalog:'
+        version: 4.6.0
       '@storybook/addon-docs':
         specifier: 'catalog:'
-        version: 9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+        version: 9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
       '@storybook/vue3':
         specifier: 'catalog:'
-        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
+        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
       '@storybook/vue3-vite':
         specifier: 'catalog:'
-        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))
+        version: 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))
       '@tailwindcss/vite':
         specifier: 'catalog:'
         version: 4.1.12(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       '@trivago/prettier-plugin-sort-imports':
         specifier: 'catalog:'
-        version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.3.2)
-      '@types/eslint-plugin-tailwindcss':
-        specifier: 'catalog:'
-        version: 3.17.0
+        version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.6.2)
       '@types/fs-extra':
         specifier: 'catalog:'
         version: 11.0.4
@@ -548,13 +557,10 @@ importers:
         version: 4.16.1(@typescript-eslint/utils@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint@9.35.0(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: 'catalog:'
-        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2)
+        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.6.2)
       eslint-plugin-storybook:
         specifier: 'catalog:'
-        version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
-      eslint-plugin-tailwindcss:
-        specifier: 'catalog:'
-        version: 4.0.0-beta.0(tailwindcss@4.1.12)
+        version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
       eslint-plugin-unused-imports:
         specifier: 'catalog:'
         version: 4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))
@@ -585,21 +591,33 @@ importers:
       lint-staged:
         specifier: 'catalog:'
         version: 15.2.7
+      markdown-table:
+        specifier: 'catalog:'
+        version: 3.0.4
+      mixpanel-browser:
+        specifier: 'catalog:'
+        version: 2.71.0
       nx:
         specifier: 'catalog:'
         version: 21.4.1
+      picocolors:
+        specifier: 'catalog:'
+        version: 1.1.1
       postcss-html:
         specifier: 'catalog:'
         version: 1.8.0
       prettier:
         specifier: 'catalog:'
-        version: 3.3.2
+        version: 3.6.2
+      pretty-bytes:
+        specifier: 'catalog:'
+        version: 7.1.0
       rollup-plugin-visualizer:
         specifier: 'catalog:'
         version: 6.0.4(rollup@4.22.4)
       storybook:
         specifier: 'catalog:'
-        version: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+        version: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       stylelint:
         specifier: 'catalog:'
         version: 16.24.0(typescript@5.9.2)
@@ -647,7 +665,7 @@ importers:
         version: 3.2.4(@types/debug@4.1.12)(@types/node@20.14.10)(@vitest/ui@3.2.4)(happy-dom@15.11.0)(jsdom@26.1.0)(lightningcss@1.30.1)(terser@5.39.2)
       vue-component-type-helpers:
         specifier: 'catalog:'
-        version: 3.1.0
+        version: 3.1.1
       vue-eslint-parser:
         specifier: 'catalog:'
         version: 10.2.0(eslint@9.35.0(jiti@2.4.2))
@@ -2183,6 +2201,21 @@ packages:
   '@microsoft/tsdoc@0.15.1':
     resolution: {integrity: sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==}
 
+  '@mixpanel/rrdom@2.0.0-alpha.18.2':
+    resolution: {integrity: sha512-vX/tbnS14ZzzatC7vOyvAm9tOLU8tof0BuppBlphzEx1YHTSw8DQiAmyAc0AmXidchLV0W+cUHV/WsehPLh2hQ==}
+
+  '@mixpanel/rrweb-snapshot@2.0.0-alpha.18.2':
+    resolution: {integrity: sha512-2kSnjZZ3QZ9zOz/isOt8s54mXUUDgXk/u0eEi/rE0xBWDeuA0NHrBcqiMc+w4F/yWWUpo5F5zcuPeYpc6ufAsw==}
+
+  '@mixpanel/rrweb-types@2.0.0-alpha.18.2':
+    resolution: {integrity: sha512-ucIYe1mfJ2UksvXW+d3bOySTB2/0yUSqQJlUydvbBz6OO2Bhq3nJHyLXV9ExkgUMZm1ZyDcvvmNUd1+5tAXlpA==}
+
+  '@mixpanel/rrweb-utils@2.0.0-alpha.18.2':
+    resolution: {integrity: sha512-OomKIB6GTx5xvCLJ7iic2khT/t/tnCJUex13aEqsbSqIT/UzUUsqf+LTrgUK5ex+f6odmkCNjre2y5jvpNqn+g==}
+
+  '@mixpanel/rrweb@2.0.0-alpha.18.2':
+    resolution: {integrity: sha512-J3dVTEu6Z4p8di7y9KKvUooNuBjX97DdG6XGWoPEPi07A9512h9M8MEtvlY3mK0PGfuC0Mz5Pv/Ws6gjGYfKQg==}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -2309,6 +2342,98 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
+  '@oxc-parser/binding-android-arm64@0.74.0':
+    resolution: {integrity: sha512-lgq8TJq22eyfojfa2jBFy2m66ckAo7iNRYDdyn9reXYA3I6Wx7tgGWVx1JAp1lO+aUiqdqP/uPlDaETL9tqRcg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.74.0':
+    resolution: {integrity: sha512-xbY/io/hkARggbpYEMFX6CwFzb7f4iS6WuBoBeZtdqRWfIEi7sm/uYWXfyVeB8uqOATvJ07WRFC2upI8PSI83g==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.74.0':
+    resolution: {integrity: sha512-FIj2gAGtFaW0Zk+TnGyenMUoRu1ju+kJ/h71D77xc1owOItbFZFGa+4WSVck1H8rTtceeJlK+kux+vCjGFCl9Q==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.74.0':
+    resolution: {integrity: sha512-W1I+g5TJg0TRRMHgEWNWsTIfe782V3QuaPgZxnfPNmDMywYdtlzllzclBgaDq6qzvZCCQc/UhvNb37KWTCTj8A==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.74.0':
+    resolution: {integrity: sha512-gxqkyRGApeVI8dgvJ19SYe59XASW3uVxF1YUgkE7peW/XIg5QRAOVTFKyTjI9acYuK1MF6OJHqx30cmxmZLtiQ==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.74.0':
+    resolution: {integrity: sha512-jpnAUP4Fa93VdPPDzxxBguJmldj/Gpz7wTXKFzpAueqBMfZsy9KNC+0qT2uZ9HGUDMzNuKw0Se3bPCpL/gfD2Q==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.74.0':
+    resolution: {integrity: sha512-fcWyM7BNfCkHqIf3kll8fJctbR/PseL4RnS2isD9Y3FFBhp4efGAzhDaxIUK5GK7kIcFh1P+puIRig8WJ6IMVQ==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.74.0':
+    resolution: {integrity: sha512-AMY30z/C77HgiRRJX7YtVUaelKq1ex0aaj28XoJu4SCezdS8i0IftUNTtGS1UzGjGZB8zQz5SFwVy4dRu4GLwg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.74.0':
+    resolution: {integrity: sha512-/RZAP24TgZo4vV/01TBlzRqs0R7E6xvatww4LnmZEBBulQBU/SkypDywfriFqWuFoa61WFXPV7sLcTjJGjim/w==}
+    engines: {node: '>=20.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.74.0':
+    resolution: {integrity: sha512-620J1beNAlGSPBD+Msb3ptvrwxu04B8iULCH03zlf0JSLy/5sqlD6qBs0XUVkUJv1vbakUw1gfVnUQqv0UTuEg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.74.0':
+    resolution: {integrity: sha512-WBFgQmGtFnPNzHyLKbC1wkYGaRIBxXGofO0+hz1xrrkPgbxbJS1Ukva1EB8sPaVBBQ52Bdc2GjLSp721NWRvww==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-musl@0.74.0':
+    resolution: {integrity: sha512-y4mapxi0RGqlp3t6Sm+knJlAEqdKDYrEue2LlXOka/F2i4sRN0XhEMPiSOB3ppHmvK4I2zY2XBYTsX1Fel0fAg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-wasm32-wasi@0.74.0':
+    resolution: {integrity: sha512-yDS9bRDh5ymobiS2xBmjlrGdUuU61IZoJBaJC5fELdYT5LJNBXlbr3Yc6m2PWfRJwkH6Aq5fRvxAZ4wCbkGa8w==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.74.0':
+    resolution: {integrity: sha512-XFWY52Rfb4N5wEbMCTSBMxRkDLGbAI9CBSL24BIDywwDJMl31gHEVlmHdCDRoXAmanCI6gwbXYTrWe0HvXJ7Aw==}
+    engines: {node: '>=20.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.74.0':
+    resolution: {integrity: sha512-1D3x6iU2apLyfTQHygbdaNbX3nZaHu4yaXpD7ilYpoLo7f0MX0tUuoDrqJyJrVGqvyXgc0uz4yXz9tH9ZZhvvg==}
+    engines: {node: '>=20.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.74.0':
+    resolution: {integrity: sha512-KOw/RZrVlHGhCXh1RufBFF7Nuo7HdY5w1lRJukM/igIl6x9qtz8QycDvZdzb4qnHO7znrPyo2sJrFJK2eKHgfQ==}
+
   '@oxc-resolver/binding-android-arm-eabi@11.6.1':
     resolution: {integrity: sha512-Ma/kg29QJX1Jzelv0Q/j2iFuUad1WnjgPjpThvjqPjpOyLjCUaiFCCnshhmWjyS51Ki1Iol3fjf1qAzObf8GIA==}
     cpu: [arm]
@@ -2442,6 +2567,10 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@prettier/plugin-oxc@0.0.4':
+    resolution: {integrity: sha512-UGXe+g/rSRbglL0FOJiar+a+nUrst7KaFmsg05wYbKiInGWP6eAj/f8A2Uobgo5KxEtb2X10zeflNH6RK2xeIQ==}
+    engines: {node: '>=14'}
+
   '@primeuix/forms@0.0.2':
     resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
     engines: {node: '>=12.11.0'}
@@ -2643,14 +2772,78 @@ packages:
     resolution: {integrity: sha512-csILVupc5RkrsTrncuUTGmlB56FQSFjXPYWG8I8yBTGlXEJ+o8oTuF6+55R4vbw3EIzBveXWi4kEBbnQlXW/eg==}
     engines: {node: '>=14.18'}
 
+  '@sentry/babel-plugin-component-annotate@4.6.0':
+    resolution: {integrity: sha512-3soTX50JPQQ51FSbb4qvNBf4z/yP7jTdn43vMTp9E4IxvJ9HKJR7OEuKkCMszrZmWsVABXl02msqO7QisePdiQ==}
+    engines: {node: '>= 14'}
+
   '@sentry/browser@8.48.0':
     resolution: {integrity: sha512-fuuVULB5/1vI8NoIwXwR3xwhJJqk+y4RdSdajExGF7nnUDBpwUJyXsmYJnOkBO+oLeEs58xaCpotCKiPUNnE3g==}
     engines: {node: '>=14.18'}
 
+  '@sentry/bundler-plugin-core@4.6.0':
+    resolution: {integrity: sha512-Fub2XQqrS258jjS8qAxLLU1k1h5UCNJ76i8m4qZJJdogWWaF8t00KnnTyp9TEDJzrVD64tRXS8+HHENxmeUo3g==}
+    engines: {node: '>= 14'}
+
+  '@sentry/cli-darwin@2.57.0':
+    resolution: {integrity: sha512-v1wYQU3BcCO+Z3OVxxO+EnaW4oQhuOza6CXeYZ0z5ftza9r0QQBLz3bcZKTVta86xraNm0z8GDlREwinyddOxQ==}
+    engines: {node: '>=10'}
+    os: [darwin]
+
+  '@sentry/cli-linux-arm64@2.57.0':
+    resolution: {integrity: sha512-Kh1jTsMV5Fy/RvB381N/woXe1qclRMqsG6kM3Gq6m6afEF/+k3PyQdNW3HXAola6d63EptokLtxPG2xjWQ+w9Q==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-arm@2.57.0':
+    resolution: {integrity: sha512-uNHB8xyygqfMd1/6tFzl9NUkuVefg7jdZtM/vVCQVaF/rJLWZ++Wms+LLhYyKXKN8yd7J9wy7kTEl4Qu4jWbGQ==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-i686@2.57.0':
+    resolution: {integrity: sha512-EYXghoK/tKd0zqz+KD/ewXXE3u1HLCwG89krweveytBy/qw7M5z58eFvw+iGb1Vnbl1f/fRD0G4E0AbEsPfmpg==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-linux-x64@2.57.0':
+    resolution: {integrity: sha512-CyZrP/ssHmAPLSzfd4ydy7icDnwmDD6o3QjhkWwVFmCd+9slSBMQxpIqpamZmrWE6X4R+xBRbSUjmdoJoZ5yMw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux, freebsd, android]
+
+  '@sentry/cli-win32-arm64@2.57.0':
+    resolution: {integrity: sha512-wji/GGE4Lh5I/dNCsuVbg6fRvttvZRG6db1yPW1BSvQRh8DdnVy1CVp+HMqSq0SRy/S4z60j2u+m4yXMoCL+5g==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@sentry/cli-win32-i686@2.57.0':
+    resolution: {integrity: sha512-hWvzyD7bTPh3b55qvJ1Okg3Wbl0Km8xcL6KvS7gfBl6uss+I6RldmQTP0gJKdHSdf/QlJN1FK0b7bLnCB3wHsg==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [win32]
+
+  '@sentry/cli-win32-x64@2.57.0':
+    resolution: {integrity: sha512-QWYV/Y0sbpDSTyA4XQBOTaid4a6H2Iwa1Z8UI+qNxFlk0ADSEgIqo2NrRHDU8iRnghTkecQNX1NTt/7mXN3f/A==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@sentry/cli@2.57.0':
+    resolution: {integrity: sha512-oC4HPrVIX06GvUTgK0i+WbNgIA9Zl5YEcwf9N4eWFJJmjonr2j4SML9Hn2yNENbUWDgwepy4MLod3P8rM4bk/w==}
+    engines: {node: '>= 10'}
+    hasBin: true
+
   '@sentry/core@8.48.0':
     resolution: {integrity: sha512-VGwYgTfLpvJ5LRO5A+qWo1gpo6SfqaGXL9TOzVgBucAdpzbrYHpZ87sEarDVq/4275uk1b0S293/mfsskFczyw==}
     engines: {node: '>=14.18'}
 
+  '@sentry/vite-plugin@4.6.0':
+    resolution: {integrity: sha512-fMR2d+EHwbzBa0S1fp45SNUTProxmyFBp+DeBWWQOSP9IU6AH6ea2rqrpMAnp/skkcdW4z4LSRrOEpMZ5rWXLw==}
+    engines: {node: '>= 14'}
+
   '@sentry/vue@8.48.0':
     resolution: {integrity: sha512-hqm9X7hz1vMQQB1HBYezrDBQihZk6e/MxWIG1wMJoClcBnD1Sh7y+D36UwaQlR4Gr/Ftiz+Bb0DxuAYHoUS4ow==}
     engines: {node: '>=14.18'}
@@ -3002,6 +3195,9 @@ packages:
   '@types/chai@5.2.2':
     resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
+  '@types/css-font-loading-module@0.0.7':
+    resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -3011,9 +3207,6 @@ packages:
   '@types/diff-match-patch@1.0.36':
     resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
 
-  '@types/eslint-plugin-tailwindcss@3.17.0':
-    resolution: {integrity: sha512-ucQGf2YIdTcndYcxRU3UdZgmhUHsOlbIF4BaRtl0op+7k2JmqM2i3aXZ6XIcfZgVq1ZKov7VM5c/BR81ukmkyg==}
-
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -3500,6 +3693,9 @@ packages:
   '@webgpu/types@0.1.51':
     resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
 
+  '@xstate/fsm@1.6.5':
+    resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
+
   '@xterm/addon-fit@0.10.0':
     resolution: {integrity: sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==}
     peerDependencies:
@@ -3554,6 +3750,10 @@ packages:
     resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
     engines: {node: '>= 10.0.0'}
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -3782,6 +3982,10 @@ packages:
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -4549,12 +4753,6 @@ packages:
       eslint: '>=8'
       storybook: ^9.1.6
 
-  eslint-plugin-tailwindcss@4.0.0-beta.0:
-    resolution: {integrity: sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA==}
-    engines: {node: '>=18.12.0'}
-    peerDependencies:
-      tailwindcss: ^3.4.0 || ^4.0.0
-
   eslint-plugin-unused-imports@4.2.0:
     resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==}
     peerDependencies:
@@ -4829,6 +5027,9 @@ packages:
     resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
     engines: {node: '>=14.14'}
 
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -4892,9 +5093,6 @@ packages:
   get-tsconfig@4.10.1:
     resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
 
-  get-tsconfig@4.7.5:
-    resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
-
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -4912,6 +5110,10 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
+  glob@9.3.5:
+    resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
@@ -5041,6 +5243,10 @@ packages:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -5726,6 +5932,10 @@ packages:
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
+  magic-string@0.30.8:
+    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
+    engines: {node: '>=12'}
+
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
@@ -5946,6 +6156,10 @@ packages:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
 
+  minimatch@8.0.4:
+    resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.1:
     resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -5961,6 +6175,10 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@4.2.8:
+    resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==}
+    engines: {node: '>=8'}
+
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -5972,6 +6190,9 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
+  mixpanel-browser@2.71.0:
+    resolution: {integrity: sha512-jKmDXe68/oQFgk/9ns9Z36bA0CJ31PH8Y77XTLLGfJvhsUPbvu+7Se9e281NejZF6+OMqx7cE+zFxToozYyNrA==}
+
   mkdirp@3.0.1:
     resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
     engines: {node: '>=10'}
@@ -5999,11 +6220,6 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@3.3.8:
-    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
   nanoid@5.1.5:
     resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
     engines: {node: ^18 || >=20}
@@ -6163,6 +6379,10 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
+  oxc-parser@0.74.0:
+    resolution: {integrity: sha512-2tDN/ttU8WE6oFh8EzKNam7KE7ZXSG5uXmvX85iNzxdJfMssDWcj3gpYzZi1E04XuE7m3v1dVWl/8BE886vPGw==}
+    engines: {node: '>=20.0.0'}
+
   oxc-resolver@11.6.1:
     resolution: {integrity: sha512-WQgmxevT4cM5MZ9ioQnEwJiHpPzbvntV5nInGAKo9NQZzegcOonHvcVcnkYqld7bTG35UFHEKeF7VwwsmA3cZg==}
 
@@ -6351,10 +6571,6 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.5.1:
-    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -6367,11 +6583,15 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier@3.3.2:
-    resolution: {integrity: sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==}
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-bytes@7.1.0:
+    resolution: {integrity: sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==}
+    engines: {node: '>=20'}
+
   pretty-format@27.5.1:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -6398,6 +6618,10 @@ packages:
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
   promise@7.3.1:
     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
 
@@ -7013,11 +7237,6 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
-  tailwind-api-utils@1.0.3:
-    resolution: {integrity: sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ==}
-    peerDependencies:
-      tailwindcss: ^3.3.0 || ^4.0.0 || ^4.0.0-beta
-
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
@@ -7302,6 +7521,9 @@ packages:
       '@nuxt/kit':
         optional: true
 
+  unplugin@1.0.1:
+    resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
+
   unplugin@1.16.1:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
@@ -7473,12 +7695,12 @@ packages:
   vue-component-type-helpers@2.2.12:
     resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
 
-  vue-component-type-helpers@3.1.0:
-    resolution: {integrity: sha512-cC1pYNRZkSS1iCvdlaMbbg2sjDwxX098FucEjtz9Yig73zYjWzQsnMe5M9H8dRNv55hAIDGUI29hF2BEUA4FMQ==}
-
   vue-component-type-helpers@3.1.1:
     resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==}
 
+  vue-component-type-helpers@3.1.2:
+    resolution: {integrity: sha512-ch3/SKBtxdZq18vsEntiGCdSszCRNfhX5QaTxjSacCAXLlNQRXfXo+ANjoQEYJMsJOJy1/vHF6Tkc4s85MS+zw==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -7575,6 +7797,13 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
+  webpack-sources@3.3.3:
+    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
+    engines: {node: '>=10.13.0'}
+
+  webpack-virtual-modules@0.5.0:
+    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
+
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
@@ -9492,6 +9721,29 @@ snapshots:
 
   '@microsoft/tsdoc@0.15.1': {}
 
+  '@mixpanel/rrdom@2.0.0-alpha.18.2':
+    dependencies:
+      '@mixpanel/rrweb-snapshot': 2.0.0-alpha.18.2
+
+  '@mixpanel/rrweb-snapshot@2.0.0-alpha.18.2':
+    dependencies:
+      postcss: 8.5.6
+
+  '@mixpanel/rrweb-types@2.0.0-alpha.18.2': {}
+
+  '@mixpanel/rrweb-utils@2.0.0-alpha.18.2': {}
+
+  '@mixpanel/rrweb@2.0.0-alpha.18.2':
+    dependencies:
+      '@mixpanel/rrdom': 2.0.0-alpha.18.2
+      '@mixpanel/rrweb-snapshot': 2.0.0-alpha.18.2
+      '@mixpanel/rrweb-types': 2.0.0-alpha.18.2
+      '@mixpanel/rrweb-utils': 2.0.0-alpha.18.2
+      '@types/css-font-loading-module': 0.0.7
+      '@xstate/fsm': 1.6.5
+      base64-arraybuffer: 1.0.2
+      mitt: 3.0.1
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.4.5
@@ -9668,7 +9920,7 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)':
+  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)':
     dependencies:
       '@nx/cypress': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/devkit': 21.4.1(nx@21.4.1)
@@ -9676,7 +9928,7 @@ snapshots:
       '@nx/js': 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.9.2)
       semver: 7.7.2
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       tslib: 2.8.1
     transitivePeerDependencies:
       - '@babel/traverse'
@@ -9732,6 +9984,55 @@ snapshots:
 
   '@one-ini/wasm@0.1.1': {}
 
+  '@oxc-parser/binding-android-arm64@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.74.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.74.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.74.0':
+    optional: true
+
+  '@oxc-project/types@0.74.0': {}
+
   '@oxc-resolver/binding-android-arm-eabi@11.6.1':
     optional: true
 
@@ -9827,6 +10128,10 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@prettier/plugin-oxc@0.0.4':
+    dependencies:
+      oxc-parser: 0.74.0
+
   '@primeuix/forms@0.0.2':
     dependencies:
       '@primeuix/utils': 0.3.2
@@ -10005,6 +10310,8 @@ snapshots:
       '@sentry-internal/browser-utils': 8.48.0
       '@sentry/core': 8.48.0
 
+  '@sentry/babel-plugin-component-annotate@4.6.0': {}
+
   '@sentry/browser@8.48.0':
     dependencies:
       '@sentry-internal/browser-utils': 8.48.0
@@ -10013,8 +10320,74 @@ snapshots:
       '@sentry-internal/replay-canvas': 8.48.0
       '@sentry/core': 8.48.0
 
+  '@sentry/bundler-plugin-core@4.6.0':
+    dependencies:
+      '@babel/core': 7.27.1
+      '@sentry/babel-plugin-component-annotate': 4.6.0
+      '@sentry/cli': 2.57.0
+      dotenv: 16.6.1
+      find-up: 5.0.0
+      glob: 9.3.5
+      magic-string: 0.30.8
+      unplugin: 1.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@sentry/cli-darwin@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-arm64@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-arm@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-i686@2.57.0':
+    optional: true
+
+  '@sentry/cli-linux-x64@2.57.0':
+    optional: true
+
+  '@sentry/cli-win32-arm64@2.57.0':
+    optional: true
+
+  '@sentry/cli-win32-i686@2.57.0':
+    optional: true
+
+  '@sentry/cli-win32-x64@2.57.0':
+    optional: true
+
+  '@sentry/cli@2.57.0':
+    dependencies:
+      https-proxy-agent: 5.0.1
+      node-fetch: 2.7.0
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      which: 2.0.2
+    optionalDependencies:
+      '@sentry/cli-darwin': 2.57.0
+      '@sentry/cli-linux-arm': 2.57.0
+      '@sentry/cli-linux-arm64': 2.57.0
+      '@sentry/cli-linux-i686': 2.57.0
+      '@sentry/cli-linux-x64': 2.57.0
+      '@sentry/cli-win32-arm64': 2.57.0
+      '@sentry/cli-win32-i686': 2.57.0
+      '@sentry/cli-win32-x64': 2.57.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/core@8.48.0': {}
 
+  '@sentry/vite-plugin@4.6.0':
+    dependencies:
+      '@sentry/bundler-plugin-core': 4.6.0
+      unplugin: 1.0.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/vue@8.48.0(pinia@2.2.2(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
       '@sentry/browser': 8.48.0
@@ -10027,29 +10400,29 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
+  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@19.1.9)(react@19.1.1)
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
       '@storybook/icons': 1.4.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/builder-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))':
+  '@storybook/builder-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      '@storybook/csf-plugin': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       ts-dedent: 2.2.0
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
 
-  '@storybook/csf-plugin@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
+  '@storybook/csf-plugin@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
     dependencies:
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -10059,19 +10432,19 @@ snapshots:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
-  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
+  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))':
     dependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
 
-  '@storybook/vue3-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
+  '@storybook/vue3-vite@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
-      '@storybook/builder-vite': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
-      '@storybook/vue3': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
+      '@storybook/builder-vite': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      '@storybook/vue3': 9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))
       find-package-json: 1.2.0
       magic-string: 0.30.19
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       typescript: 5.9.2
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
       vue-component-meta: 2.2.12(typescript@5.9.2)
@@ -10079,13 +10452,13 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  '@storybook/vue3@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))':
+  '@storybook/vue3@9.1.1(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.1.1
+      vue-component-type-helpers: 3.1.2
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -10347,7 +10720,7 @@ snapshots:
       '@tiptap/extension-text-style': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
       '@tiptap/pm': 2.10.4
 
-  '@trivago/prettier-plugin-sort-imports@5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.3.2)':
+  '@trivago/prettier-plugin-sort-imports@5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.6.2)':
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -10355,7 +10728,7 @@ snapshots:
       '@babel/types': 7.28.4
       javascript-natural-sort: 0.7.1
       lodash: 4.17.21
-      prettier: 3.3.2
+      prettier: 3.6.2
     optionalDependencies:
       '@vue/compiler-sfc': 3.5.13
     transitivePeerDependencies:
@@ -10380,6 +10753,8 @@ snapshots:
     dependencies:
       '@types/deep-eql': 4.0.2
 
+  '@types/css-font-loading-module@0.0.7': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -10388,8 +10763,6 @@ snapshots:
 
   '@types/diff-match-patch@1.0.36': {}
 
-  '@types/eslint-plugin-tailwindcss@3.17.0': {}
-
   '@types/estree@1.0.5': {}
 
   '@types/estree@1.0.8': {}
@@ -10973,6 +11346,8 @@ snapshots:
 
   '@webgpu/types@0.1.51': {}
 
+  '@xstate/fsm@1.6.5': {}
+
   '@xterm/addon-fit@0.10.0(@xterm/xterm@5.5.0)':
     dependencies:
       '@xterm/xterm': 5.5.0
@@ -11012,6 +11387,12 @@ snapshots:
 
   address@1.2.2: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   agent-base@7.1.4: {}
 
   agentkeepalive@4.6.0:
@@ -11289,6 +11670,8 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
+  base64-arraybuffer@1.0.2: {}
+
   base64-js@1.5.1: {}
 
   better-opn@3.0.2:
@@ -12133,32 +12516,24 @@ snapshots:
       - supports-color
     optional: true
 
-  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2):
+  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.6.2):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
-      prettier: 3.3.2
+      prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.35.0(jiti@2.4.2))
 
-  eslint-plugin-storybook@9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2):
+  eslint-plugin-storybook@9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       eslint: 9.35.0(jiti@2.4.2)
-      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-tailwindcss@4.0.0-beta.0(tailwindcss@4.1.12):
-    dependencies:
-      fast-glob: 3.3.3
-      postcss: 8.5.6
-      synckit: 0.11.11
-      tailwind-api-utils: 1.0.3(tailwindcss@4.1.12)
-      tailwindcss: 4.1.12
-
   eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
@@ -12517,6 +12892,8 @@ snapshots:
       jsonfile: 6.2.0
       universalify: 2.0.1
 
+  fs.realpath@1.0.0: {}
+
   fsevents@2.3.2:
     optional: true
 
@@ -12585,10 +12962,6 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  get-tsconfig@4.7.5:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -12615,6 +12988,13 @@ snapshots:
       package-json-from-dist: 1.0.0
       path-scurry: 2.0.0
 
+  glob@9.3.5:
+    dependencies:
+      fs.realpath: 1.0.0
+      minimatch: 8.0.4
+      minipass: 4.2.8
+      path-scurry: 1.11.1
+
   global-directory@4.0.1:
     dependencies:
       ini: 4.1.1
@@ -12745,6 +13125,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -13434,6 +13821,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magic-string@0.30.8:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.28.4
@@ -13839,6 +14230,10 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimatch@8.0.4:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.1:
     dependencies:
       brace-expansion: 2.0.2
@@ -13853,6 +14248,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@4.2.8: {}
+
   minipass@7.1.2: {}
 
   minizlib@3.0.2:
@@ -13861,6 +14258,10 @@ snapshots:
 
   mitt@3.0.1: {}
 
+  mixpanel-browser@2.71.0:
+    dependencies:
+      '@mixpanel/rrweb': 2.0.0-alpha.18.2
+
   mkdirp@3.0.1: {}
 
   mlly@1.8.0:
@@ -13883,8 +14284,6 @@ snapshots:
 
   nanoid@3.3.11: {}
 
-  nanoid@3.3.8: {}
-
   nanoid@5.1.5: {}
 
   napi-postinstall@0.3.3: {}
@@ -14105,6 +14504,26 @@ snapshots:
       safe-push-apply: 1.0.0
     optional: true
 
+  oxc-parser@0.74.0:
+    dependencies:
+      '@oxc-project/types': 0.74.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm64': 0.74.0
+      '@oxc-parser/binding-darwin-arm64': 0.74.0
+      '@oxc-parser/binding-darwin-x64': 0.74.0
+      '@oxc-parser/binding-freebsd-x64': 0.74.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.74.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.74.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.74.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.74.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.74.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.74.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.74.0
+      '@oxc-parser/binding-linux-x64-musl': 0.74.0
+      '@oxc-parser/binding-wasm32-wasi': 0.74.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.74.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.74.0
+
   oxc-resolver@11.6.1:
     dependencies:
       napi-postinstall: 0.3.3
@@ -14264,14 +14683,14 @@ snapshots:
     dependencies:
       htmlparser2: 8.0.2
       js-tokens: 9.0.1
-      postcss: 8.5.1
-      postcss-safe-parser: 6.0.0(postcss@8.5.1)
+      postcss: 8.5.6
+      postcss-safe-parser: 6.0.0(postcss@8.5.6)
 
   postcss-resolve-nested-selector@0.1.6: {}
 
-  postcss-safe-parser@6.0.0(postcss@8.5.1):
+  postcss-safe-parser@6.0.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.1
+      postcss: 8.5.6
 
   postcss-safe-parser@7.0.1(postcss@8.5.6):
     dependencies:
@@ -14289,12 +14708,6 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.5.1:
-    dependencies:
-      nanoid: 3.3.8
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
@@ -14307,7 +14720,9 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier@3.3.2: {}
+  prettier@3.6.2: {}
+
+  pretty-bytes@7.1.0: {}
 
   pretty-format@27.5.1:
     dependencies:
@@ -14340,6 +14755,8 @@ snapshots:
 
   process-nextick-args@2.0.1: {}
 
+  progress@2.0.3: {}
+
   promise@7.3.1:
     dependencies:
       asap: 2.0.6
@@ -14984,7 +15401,7 @@ snapshots:
       internal-slot: 1.1.0
     optional: true
 
-  storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)):
+  storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.6.4
@@ -14999,7 +15416,7 @@ snapshots:
       semver: 7.7.2
       ws: 8.18.3
     optionalDependencies:
-      prettier: 3.3.2
+      prettier: 3.6.2
     transitivePeerDependencies:
       - '@testing-library/dom'
       - bufferutil
@@ -15188,13 +15605,6 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwind-api-utils@1.0.3(tailwindcss@4.1.12):
-    dependencies:
-      enhanced-resolve: 5.18.3
-      jiti: 2.5.1
-      local-pkg: 1.1.2
-      tailwindcss: 4.1.12
-
   tailwind-merge@2.6.0: {}
 
   tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):
@@ -15321,7 +15731,7 @@ snapshots:
   tsx@4.19.4:
     dependencies:
       esbuild: 0.25.5
-      get-tsconfig: 4.7.5
+      get-tsconfig: 4.10.1
     optionalDependencies:
       fsevents: 2.3.3
 
@@ -15486,6 +15896,13 @@ snapshots:
       - rollup
       - supports-color
 
+  unplugin@1.0.1:
+    dependencies:
+      acorn: 8.15.0
+      chokidar: 3.6.0
+      webpack-sources: 3.3.3
+      webpack-virtual-modules: 0.5.0
+
   unplugin@1.16.1:
     dependencies:
       acorn: 8.15.0
@@ -15673,7 +16090,7 @@ snapshots:
   vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.5.1
+      postcss: 8.5.6
       rollup: 4.22.4
     optionalDependencies:
       '@types/node': 20.14.10
@@ -15738,10 +16155,10 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
-  vue-component-type-helpers@3.1.0: {}
-
   vue-component-type-helpers@3.1.1: {}
 
+  vue-component-type-helpers@3.1.2: {}
+
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       vue: 3.5.13(typescript@5.9.2)
@@ -15834,6 +16251,10 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
+  webpack-sources@3.3.3: {}
+
+  webpack-virtual-modules@0.5.0: {}
+
   webpack-virtual-modules@0.6.2: {}
 
   websocket-driver@0.7.4:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 10eadc424..c64337b06 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -16,6 +16,7 @@ catalog:
   '@nx/vite': 21.4.1
   '@pinia/testing': ^0.1.5
   '@playwright/test': ^1.52.0
+  '@prettier/plugin-oxc': ^0.0.4
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
   '@primeuix/utils': ^0.3.2
@@ -23,13 +24,13 @@ catalog:
   '@primevue/forms': ^4.2.5
   '@primevue/icons': 4.2.5
   '@primevue/themes': ^4.2.5
+  '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^8.48.0
   '@storybook/addon-docs': ^9.1.1
   '@storybook/vue3': ^9.1.1
   '@storybook/vue3-vite': ^9.1.1
   '@tailwindcss/vite': ^4.1.12
   '@trivago/prettier-plugin-sort-imports': ^5.2.0
-  '@types/eslint-plugin-tailwindcss': ^3.17.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^20.14.8
@@ -51,7 +52,6 @@ catalog:
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-prettier: ^5.5.4
   eslint-plugin-storybook: ^9.1.6
-  eslint-plugin-tailwindcss: 4.0.0-beta.0
   eslint-plugin-unused-imports: ^4.2.0
   eslint-plugin-vue: ^10.4.0
   firebase: ^11.6.0
@@ -62,10 +62,14 @@ catalog:
   jsdom: ^26.1.0
   knip: ^5.62.0
   lint-staged: ^15.2.7
+  markdown-table: ^3.0.4
+  mixpanel-browser: ^2.71.0
   nx: 21.4.1
+  picocolors: ^1.1.1
   pinia: ^2.1.7
   postcss-html: ^1.8.0
-  prettier: ^3.3.2
+  prettier: ^3.6.2
+  pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
   rollup-plugin-visualizer: ^6.0.4
@@ -98,9 +102,6 @@ catalog:
 
 cleanupUnusedCatalogs: true
 
-overrides:
-  '@types/eslint': '-'
-
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs
@@ -111,7 +112,11 @@ onlyBuiltDependencies:
   - '@playwright/browser-chromium'
   - '@playwright/browser-firefox'
   - '@playwright/browser-webkit'
+  - '@sentry/cli'
   - '@tailwindcss/oxide'
   - esbuild
   - nx
   - oxc-resolver
+
+overrides:
+  '@types/eslint': '-'
diff --git a/public/assets/images/cloud-subscription.webm b/public/assets/images/cloud-subscription.webm
new file mode 100644
index 000000000..ec81ab6d1
Binary files /dev/null and b/public/assets/images/cloud-subscription.webm differ
diff --git a/public/assets/images/comfy-cloud-logo.svg b/public/assets/images/comfy-cloud-logo.svg
new file mode 100644
index 000000000..4a701878c
--- /dev/null
+++ b/public/assets/images/comfy-cloud-logo.svg
@@ -0,0 +1,4 @@
+<svg width="186" height="40" viewBox="0 0 186 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M120.657 39.9998C119.874 39.9998 119.243 39.712 118.831 39.1672C118.408 38.6071 118.297 37.8256 118.528 37.0233L119.955 32.0604C120.427 30.4193 122.15 29.0843 123.796 29.0843H126.995C127.376 29.0843 127.71 28.8331 127.815 28.4686L128.367 26.5493C128.441 26.2923 128.389 26.0161 128.228 25.8027C128.067 25.5896 127.815 25.4643 127.547 25.4643L120.536 25.4655C120.496 25.4601 120.46 25.4576 120.42 25.4576H118.057C117.275 25.4576 116.643 25.1698 116.231 24.625C115.808 24.0649 115.698 23.2834 115.929 22.4816L116.204 21.5232C116.278 21.2666 116.226 20.9904 116.065 20.777C115.904 20.564 115.652 20.4386 115.384 20.4386H114.479C114.099 20.4386 113.764 20.6898 113.66 21.0548L113.249 22.4816C112.778 24.1226 111.055 25.4576 109.409 25.4576H106.218C105.838 25.4576 105.504 25.708 105.398 26.0717L104.491 29.2014C104.487 29.2134 104.477 29.2454 104.474 29.2574L103.179 33.7296C103.173 33.7449 103.165 33.7695 103.161 33.7853L102.224 37.0225C101.752 38.6648 100.029 39.9998 98.3834 39.9998H93.4068C92.624 39.9998 91.9925 39.712 91.5809 39.1672C91.1577 38.6075 91.0473 37.826 91.278 37.0238L95.4491 22.5958C95.4543 22.5808 95.4639 22.5509 95.4684 22.5356L95.7599 21.5241C95.834 21.2675 95.7828 20.9909 95.6217 20.7774C95.4605 20.564 95.2082 20.4386 94.9404 20.4386H94.0448C93.6648 20.4386 93.3308 20.6894 93.2255 21.0532L91.4098 27.327C91.4044 27.3424 91.3965 27.3673 91.3921 27.3827L90.7069 29.7508C90.235 31.3935 88.5121 32.7289 86.8663 32.7289H81.8897C81.1067 32.7289 80.4752 32.4411 80.0636 31.8964C79.6405 31.3358 79.53 30.5543 79.7609 29.7525L82.785 19.2817C82.8591 19.0251 82.8079 18.7486 82.6469 18.5347C82.4858 18.3213 82.2335 18.1959 81.9655 18.1959H81.0644C80.6841 18.1959 80.3497 18.4471 80.2448 18.8117L78.9554 23.2892C78.9502 23.3042 78.9423 23.3287 78.9379 23.344L77.0822 29.7508C76.6096 31.3935 74.8868 32.7289 73.2412 32.7289H68.2646C67.4818 32.7289 66.8503 32.4411 66.4387 31.8964C66.0154 31.3362 65.9051 30.5547 66.1358 29.7525L67.5628 24.7895C67.5682 24.7745 67.5759 24.7509 67.5803 24.7355L69.1623 19.273C69.2367 19.0164 69.1857 18.7394 69.0247 18.526C68.8636 18.3125 68.611 18.1867 68.3431 18.1867H67.4505C67.0706 18.1867 66.7366 18.4375 66.6313 18.8013L66.502 19.2481C66.4974 19.2609 66.4876 19.2913 66.4838 19.3041L63.5741 29.3467C63.5697 29.36 63.5591 29.3924 63.5554 29.4057L63.4561 29.7541C62.9847 31.3935 61.2618 32.7289 59.616 32.7289H54.6394C53.8566 32.7289 53.2251 32.4411 52.8136 31.8963C52.3903 31.3362 52.2799 30.5547 52.5106 29.7524L52.7849 28.7982C52.8587 28.5416 52.8073 28.2655 52.6462 28.052C52.4851 27.839 52.2329 27.7136 51.9652 27.7136H51.0633C50.6835 27.7136 50.3494 27.964 50.244 28.3281L49.832 29.7508C49.3596 31.3935 47.6367 32.7289 45.9909 32.7289H42.7657C42.3853 32.7289 42.0507 32.9801 41.946 33.3447L40.8881 37.0233C40.4165 38.6648 38.6937 39.9997 37.0477 39.9997H32.0711C31.2881 39.9997 30.6566 39.712 30.245 39.1672C29.8218 38.607 29.7114 37.8255 29.9423 37.0233L30.8651 33.8135C30.9389 33.5569 30.8875 33.2808 30.7264 33.0673C30.5653 32.8543 30.3131 32.7289 30.0454 32.7289H27.3894C26.6068 32.7289 25.9753 32.4411 25.5633 31.8963C25.1402 31.3362 25.0296 30.5547 25.2604 29.7528L25.5348 28.7982C25.6085 28.5416 25.557 28.2655 25.3959 28.052C25.2348 27.839 24.9827 27.7136 24.7149 27.7136H23.8103C23.4299 27.7136 23.0955 27.9648 22.9906 28.3294L22.5812 29.7524C22.1095 31.3939 20.3866 32.7289 18.7408 32.7289L11.9242 32.7409L6.93303 32.7413C6.15022 32.7413 5.51874 32.4536 5.10714 31.9088C4.68408 31.3486 4.57352 30.5671 4.80424 29.7653L5.73091 26.5426C5.8048 26.2856 5.75338 26.0095 5.59225 25.796C5.43111 25.583 5.17899 25.4576 4.91122 25.4576H2.24691C1.4641 25.4576 0.83262 25.1698 0.421025 24.625C-0.00203944 24.0649 -0.112603 23.2834 0.118117 22.4816L2.59903 13.884C2.60359 13.8711 2.61382 13.8387 2.61775 13.8259L3.41868 11.0566C3.42597 11.0367 3.4322 11.0172 3.43804 10.9968L3.65332 10.2473C4.12508 8.60628 5.84774 7.27087 7.49352 7.27087H10.6813C11.0616 7.27087 11.3962 7.01966 11.501 6.65509L12.5551 2.98933C13.0269 1.34786 14.7497 0.0128838 16.3957 0.0128838L23.2278 0H28.2033C28.9861 0 29.6176 0.28778 30.0292 0.832556C30.4524 1.39272 30.5628 2.17421 30.3321 2.97645L28.9051 7.93985C28.4331 9.58089 26.7102 10.9159 25.0644 10.9159L18.2324 10.9283H15.046C14.6658 10.9283 14.3314 11.1795 14.2263 11.5437L12.8207 16.4216C12.8155 16.4369 12.8076 16.4615 12.8032 16.4768L11.5701 20.7355C11.4955 20.9926 11.5467 21.2695 11.7083 21.4834C11.8694 21.6964 12.1216 21.8218 12.3893 21.8218C12.39 21.8218 16.9039 21.8131 16.9039 21.8131H21.8794C22.6622 21.8131 23.2937 22.1009 23.7053 22.6456C24.1286 23.2058 24.2389 23.9873 24.0082 24.7895L23.724 25.7787C23.6501 26.0353 23.7016 26.3114 23.8627 26.5248C24.0238 26.7379 24.276 26.8633 24.5437 26.8633H25.4484C25.8285 26.8633 26.1629 26.6121 26.2681 26.2479L26.8046 24.3864C26.8098 24.371 28.795 17.5199 28.795 17.5199C29.2672 15.8772 30.99 14.5423 32.636 14.5423H35.8127C36.1931 14.5423 36.5277 14.291 36.6324 13.926L37.6873 10.2565C38.1595 8.6155 39.8826 7.2801 41.5282 7.2801H46.5045C47.2874 7.2801 47.9188 7.56788 48.3304 8.11265C48.7537 8.67282 48.8643 9.45431 48.6336 10.2561L47.7131 13.4576C47.6392 13.7142 47.6906 13.9904 47.8518 14.2038C48.0129 14.4169 48.265 14.5423 48.5328 14.5423H51.2377C52.0205 14.5423 52.652 14.83 53.0636 15.3748C53.4869 15.935 53.5973 16.7165 53.3664 17.5187L50.9831 25.7778C50.909 26.0345 50.9602 26.311 51.1213 26.5245C51.2823 26.7379 51.5346 26.8633 51.8026 26.8633H52.6987C53.0786 26.8633 53.4128 26.6125 53.5182 26.2483L54.6401 22.3667C54.6441 22.3551 54.6541 22.3239 54.6576 22.3123L57.5676 12.2693C57.573 12.2535 57.5811 12.2281 57.5857 12.2124L58.1533 10.2487C58.6255 8.60641 60.3483 7.271 61.9941 7.271H73.7802C74.5628 7.271 75.1943 7.55916 75.6061 8.10398C76.0294 8.66372 76.14 9.44521 75.9093 10.247L74.9861 13.4573C74.9122 13.7143 74.9637 13.9904 75.1248 14.2034C75.2859 14.4169 75.538 14.5423 75.8058 14.5423H76.7354C77.1158 14.5423 77.4504 14.2911 77.5551 13.9265L78.6103 10.2566C79.0822 8.61555 80.8051 7.28014 82.4509 7.28014H87.4275C88.2103 7.28014 88.8418 7.56792 89.2534 8.1127C89.6766 8.67286 89.787 9.45435 89.5563 10.2566L88.636 13.4577C88.5621 13.7143 88.6136 13.9904 88.7747 14.2039C88.9358 14.4169 89.188 14.5423 89.4557 14.5423H92.113C92.8958 14.5423 93.5272 14.8301 93.9388 15.3749C94.3619 15.935 94.4725 16.7165 94.2417 17.5183L93.9586 18.5037C93.8847 18.7603 93.9361 19.0364 94.0972 19.2499C94.2584 19.4629 94.5105 19.5883 94.7783 19.5883H95.6798C96.0595 19.5883 96.3935 19.3379 96.4991 18.9742L99.0284 10.2492C99.5006 8.60602 101.223 7.27104 102.869 7.27104H106.069C106.449 7.27104 106.783 7.01983 106.888 6.65526L107.946 2.97662C108.418 1.33515 110.141 0.000170083 111.787 0.000170083H116.763C117.546 0.000170083 118.178 0.28795 118.59 0.832726C119.013 1.39289 119.123 2.17438 118.892 2.97662L117.465 7.94002C116.993 9.58107 115.271 10.916 113.625 10.916H110.425C110.045 10.916 109.71 11.1673 109.606 11.5323L109.052 13.4577C108.978 13.7143 109.029 13.9905 109.191 14.2039C109.352 14.4169 109.604 14.5423 109.872 14.5423H112.548C113.33 14.5423 113.962 14.8301 114.374 15.3749C114.797 15.9346 114.907 16.7161 114.676 17.5184L114.393 18.5037C114.319 18.7604 114.371 19.0365 114.532 19.2499C114.693 19.463 114.945 19.5884 115.213 19.5884H116.118C116.498 19.5884 116.832 19.338 116.937 18.9738L119.463 10.2492C119.936 8.60645 121.658 7.27104 123.304 7.27104H128.281C129.064 7.27104 129.695 7.55882 130.107 8.1036C130.53 8.66377 130.64 9.44525 130.409 10.2475L128.163 18.0374C128.157 18.0528 128.15 18.0773 128.145 18.0931L127.904 18.9265C127.83 19.1835 127.881 19.4601 128.042 19.6735C128.203 19.8869 128.456 20.0123 128.724 20.0123H129.614C129.994 20.0123 130.328 19.7615 130.433 19.3978L133.08 10.2492C133.552 8.60649 135.275 7.27108 136.921 7.27108H141.898C142.68 7.27108 143.312 7.55925 143.724 8.10406C144.147 8.66381 144.257 9.4453 144.027 10.2475L138.392 29.7518C137.92 31.3941 136.197 32.7291 134.551 32.7291H131.352C130.971 32.7291 130.637 32.9803 130.532 33.3449L129.474 37.0236C129.002 38.665 127.279 40 125.634 40L120.657 39.9998ZM40.1893 18.1959C39.8093 18.1959 39.4752 18.4467 39.3698 18.8109L36.7146 27.9985C36.6405 28.2551 36.6915 28.5317 36.8526 28.7451C37.0138 28.9589 37.2661 29.0844 37.5341 29.0844H38.4349C38.8149 29.0844 39.1491 28.8336 39.2544 28.4694L41.9096 19.2818C41.9837 19.0252 41.9327 18.7486 41.7716 18.5352C41.6104 18.3213 41.3581 18.1959 41.0902 18.1959H40.1893Z" fill="#F0FF41"/>
+<path d="M176.686 32.7331C176.428 32.7331 176.22 32.6381 176.083 32.4582C175.944 32.2734 175.907 32.0156 175.984 31.7506L176.454 30.1129C176.459 30.1021 176.467 30.0801 176.47 30.0689L176.686 29.3128C176.691 29.3015 176.7 29.2775 176.704 29.2658L176.918 28.513C176.924 28.5005 176.932 28.4794 176.936 28.4665L177.15 27.7132C177.155 27.7024 177.163 27.6808 177.166 27.6696L177.382 26.9135C177.388 26.9002 177.395 26.8824 177.399 26.8682L177.614 26.1138C177.619 26.103 177.627 26.0806 177.63 26.0693L177.846 25.314C177.85 25.3032 177.858 25.2812 177.862 25.27L178.078 24.5143C178.083 24.5022 178.091 24.4815 178.094 24.469L178.309 23.7145C178.314 23.7033 178.323 23.6797 178.326 23.668L178.541 22.9143C178.697 22.3733 179.266 21.9327 179.809 21.9327H181.451C181.465 21.9348 181.507 21.9373 181.507 21.9373L183.707 21.9356C183.965 21.9356 184.174 22.0307 184.31 22.2105C184.449 22.3953 184.486 22.6531 184.41 22.9177L184.105 23.9774C184.081 24.0621 184.098 24.153 184.151 24.2236C184.204 24.2937 184.287 24.3353 184.376 24.3353H185.259C185.517 24.3353 185.726 24.4304 185.861 24.6102C186.001 24.795 186.038 25.0524 185.961 25.3173L185.491 26.9551C185.486 26.9655 185.472 27.0016 185.469 27.0128L185.256 27.754C185.252 27.7644 185.238 27.8005 185.235 27.8117L185.022 28.5525C185.017 28.5629 185.003 28.6007 185 28.6119L184.788 29.3514C184.632 29.8933 184.063 30.3339 183.52 30.3339H182.464C182.339 30.3339 182.228 30.4169 182.194 30.5373L181.845 31.7506C181.689 32.2925 181.121 32.7331 180.577 32.7331L176.686 32.7331ZM181.608 25.5378C181.482 25.5378 181.372 25.6209 181.337 25.7413L181.219 26.1528C181.213 26.1644 181.206 26.1835 181.203 26.196L180.987 26.9526C180.982 26.9634 180.973 26.9866 180.97 26.9982L180.755 27.7523C180.75 27.7631 180.742 27.7868 180.738 27.798L180.523 28.552C180.518 28.5641 180.511 28.5832 180.507 28.5956L180.456 28.7733C180.432 28.858 180.449 28.949 180.503 29.0192C180.556 29.0893 180.639 29.1309 180.727 29.1309H181.027C181.152 29.1309 181.263 29.0478 181.297 28.9274L181.646 27.7136C181.651 27.7033 181.664 27.6667 181.667 27.6555L181.881 26.9147C181.885 26.9044 181.899 26.8682 181.902 26.857L182.115 26.1162C182.12 26.105 182.132 26.071 182.136 26.0585L182.183 25.8958C182.207 25.8111 182.19 25.7201 182.137 25.6495C182.084 25.5794 182.001 25.5378 181.912 25.5378H181.608ZM167.693 32.7331C167.435 32.7331 167.227 32.6381 167.091 32.4582C166.951 32.2734 166.915 32.0156 166.991 31.7506L167.462 30.1129C167.466 30.1025 167.476 30.0764 167.479 30.0652L167.81 28.9133C167.814 28.9025 167.825 28.8747 167.828 28.8634L168.158 27.7136C168.162 27.7028 168.173 27.675 168.176 27.6638L168.505 26.514C168.511 26.502 168.519 26.4787 168.523 26.4663L168.853 25.3144C168.858 25.3036 168.868 25.2762 168.871 25.265L169.201 24.1143C169.206 24.1023 169.216 24.0778 169.219 24.0653L169.549 22.9147C169.704 22.3732 170.273 21.9326 170.816 21.9326H172.458C172.713 21.9326 172.927 22.0302 173.061 22.2075C173.201 22.3923 173.237 22.6497 173.161 22.9147L172.69 24.5524C172.685 24.5628 172.676 24.5894 172.673 24.6002L172.342 25.752C172.338 25.7624 172.328 25.7906 172.324 25.8014L171.994 26.9521C171.989 26.9641 171.979 26.9907 171.975 27.0032L171.646 28.1517C171.642 28.163 171.632 28.1903 171.628 28.202L171.465 28.7734C171.441 28.8581 171.458 28.949 171.511 29.0192C171.564 29.0894 171.647 29.1309 171.736 29.1309H172.032C172.158 29.1309 172.268 29.0479 172.303 28.9274L172.422 28.5135C172.426 28.5027 172.435 28.4798 172.438 28.4686L172.654 27.7133C172.659 27.7012 172.667 27.6801 172.671 27.6672L172.886 26.9135C172.891 26.9015 172.899 26.8807 172.903 26.8678L173.118 26.1138C173.122 26.103 173.131 26.0797 173.134 26.0685L173.35 25.314C173.355 25.302 173.363 25.2812 173.366 25.2688L173.581 24.5143C173.586 24.5035 173.594 24.4819 173.597 24.4707L173.813 23.7146C173.818 23.7038 173.826 23.6818 173.829 23.6706L174.045 22.9144C174.201 22.3733 174.769 21.9328 175.313 21.9328H176.955C177.213 21.9328 177.421 22.0279 177.557 22.2077C177.697 22.3925 177.734 22.6499 177.657 22.9148L177.186 24.5526C177.182 24.5634 177.174 24.5845 177.171 24.5958L176.954 25.3528C176.949 25.3644 176.943 25.3827 176.939 25.3951L176.722 26.1529C176.717 26.1645 176.71 26.1837 176.707 26.1961L176.491 26.9527C176.486 26.9635 176.477 26.9868 176.474 26.9984L176.259 27.7524C176.254 27.7632 176.245 27.7865 176.242 27.7981L176.027 28.5522C176.022 28.5642 176.015 28.5829 176.011 28.5957L175.795 29.3519C175.791 29.3627 175.783 29.3843 175.779 29.3955L175.563 30.1516C175.559 30.1624 175.551 30.184 175.547 30.1952L175.331 30.9513C175.327 30.9621 175.319 30.985 175.315 30.9962L175.099 31.7511C174.944 32.2926 174.375 32.7332 173.832 32.7332L167.693 32.7331ZM158.701 32.7331C158.443 32.7331 158.234 32.6381 158.098 32.4582C157.959 32.2734 157.922 32.0156 157.998 31.7506L158.469 30.1129C158.474 30.1021 158.483 30.0776 158.486 30.066L158.701 29.3127C158.707 29.3007 158.713 29.2824 158.717 29.2699L158.933 28.513C158.938 28.5013 158.945 28.4822 158.949 28.4698L159.165 27.7132C159.171 27.6999 159.178 27.6821 159.182 27.6679L159.397 26.9134C159.402 26.9022 159.41 26.8794 159.414 26.8678L159.629 26.1137C159.634 26.1017 159.642 26.0813 159.645 26.0685L159.861 25.314C159.866 25.302 159.874 25.2808 159.877 25.2679L160.093 24.5142C160.098 24.5022 160.106 24.481 160.109 24.4681L160.325 23.7144C160.329 23.7036 160.337 23.6817 160.34 23.6704L160.556 22.9143C160.712 22.3732 161.281 21.9327 161.824 21.9327H167.962C168.217 21.9327 168.431 22.0302 168.565 22.2076C168.704 22.3924 168.741 22.6498 168.665 22.9147L168.194 24.5524C168.188 24.5645 168.181 24.5848 168.177 24.5977L167.962 25.3526C167.958 25.3617 167.95 25.3846 167.947 25.3941L167.73 26.1524C167.724 26.1648 167.716 26.1869 167.712 26.1997L167.498 26.9525C167.492 26.965 167.485 26.9853 167.481 26.9982L167.266 27.7523C167.261 27.7631 167.253 27.7863 167.249 27.7979L167.034 28.552C167.03 28.5624 167.022 28.5835 167.019 28.5948L166.802 29.3518C166.797 29.3634 166.791 29.3804 166.787 29.3929L166.57 30.1515C166.565 30.1636 166.557 30.1847 166.554 30.1976L166.338 30.9513C166.333 30.9633 166.325 30.9845 166.322 30.9974L166.107 31.7511C165.951 32.2925 165.383 32.7331 164.839 32.7331H158.701ZM163.623 25.5349C163.498 25.5349 163.387 25.618 163.353 25.7384L163.234 26.1524C163.228 26.1644 163.221 26.1848 163.217 26.1976L163.001 26.9525C162.996 26.9646 162.989 26.9853 162.985 26.9982L162.77 27.7523C162.764 27.7643 162.757 27.7842 162.753 27.7967L162.538 28.552C162.533 28.5628 162.526 28.584 162.522 28.5952L162.472 28.7738C162.447 28.858 162.465 28.949 162.518 29.0192C162.571 29.0893 162.654 29.1309 162.742 29.1309H163.04C163.165 29.1309 163.276 29.0478 163.31 28.9274L163.429 28.5134C163.435 28.5014 163.443 28.4789 163.447 28.4661L163.661 27.7133C163.666 27.702 163.675 27.6796 163.678 27.668L163.893 26.9135C163.898 26.9027 163.907 26.8795 163.91 26.8679L164.125 26.1138C164.131 26.1018 164.138 26.081 164.142 26.0681L164.192 25.8921C164.216 25.8074 164.199 25.7164 164.145 25.6462C164.092 25.5761 164.009 25.535 163.921 25.535L163.623 25.5349ZM151.134 32.7331C150.876 32.7331 150.668 32.6381 150.532 32.4582C150.392 32.2734 150.356 32.0156 150.432 31.7506L150.903 30.1129C150.908 30.1009 150.916 30.0801 150.92 30.0673L151.135 29.3128C151.14 29.3003 151.148 29.2791 151.152 29.2662L151.367 28.513C151.372 28.5018 151.38 28.4785 151.383 28.4673L151.598 27.7133C151.603 27.7025 151.612 27.6801 151.615 27.6688L151.83 26.9135C151.835 26.9027 151.843 26.8811 151.846 26.8699L152.062 26.1138C152.067 26.103 152.075 26.0818 152.078 26.0706L152.294 25.314C152.299 25.3032 152.307 25.2804 152.31 25.2691L152.526 24.5142C152.531 24.5038 152.538 24.4827 152.541 24.4714L152.758 23.7144C152.763 23.7024 152.771 23.682 152.774 23.6692L152.99 22.9143C153.145 22.3732 153.714 21.9327 154.257 21.9327H155.899C156.158 21.9327 156.366 22.0277 156.502 22.2076C156.641 22.3924 156.678 22.6498 156.602 22.9147L156.131 24.5524C156.126 24.5637 156.117 24.5873 156.114 24.599L155.899 25.3526C155.894 25.363 155.887 25.3842 155.883 25.3954L155.667 26.1528C155.662 26.1636 155.654 26.1869 155.65 26.1985L155.435 26.9525C155.43 26.965 155.422 26.9857 155.418 26.9986L155.203 27.7523C155.199 27.7635 155.19 27.7851 155.187 27.7967L154.971 28.5521C154.966 28.5641 154.958 28.5849 154.955 28.5973L154.905 28.7734C154.881 28.8581 154.898 28.949 154.951 29.0192C155.004 29.0894 155.087 29.1309 155.175 29.1309H156.883C157.141 29.1309 157.349 29.226 157.485 29.4058C157.625 29.5906 157.661 29.848 157.585 30.113L157.114 31.7507C156.959 32.2926 156.39 32.7331 155.847 32.7331H151.134ZM142.142 32.7331C141.884 32.7331 141.675 32.6381 141.539 32.4582C141.4 32.2734 141.363 32.0156 141.439 31.7506L141.91 30.1129C141.916 30.1009 141.924 30.0781 141.928 30.0652L142.142 29.3128C142.147 29.3015 142.156 29.2783 142.159 29.2671L142.374 28.513C142.379 28.5022 142.387 28.4798 142.39 28.4686L142.606 27.7133C142.612 27.7008 142.62 27.6796 142.623 27.6667L142.838 26.9135C142.842 26.9027 142.85 26.8811 142.854 26.8699L143.07 26.1138C143.076 26.1005 143.083 26.0826 143.086 26.0685L143.302 25.314C143.306 25.3032 143.315 25.2804 143.318 25.2692L143.534 24.5143C143.538 24.5035 143.546 24.4815 143.549 24.4703L143.765 23.7145C143.77 23.7042 143.777 23.6834 143.78 23.6726L143.997 22.9144C144.153 22.3733 144.721 21.9327 145.264 21.9327H151.403C151.661 21.9327 151.87 22.0278 152.005 22.2076C152.145 22.3924 152.182 22.6499 152.106 22.9148L151.635 24.5525C151.479 25.0944 150.91 25.535 150.367 25.535H147.064C146.939 25.535 146.828 25.618 146.794 25.7384L146.675 26.1524C146.67 26.1632 146.661 26.1869 146.658 26.1985L146.443 26.9526C146.437 26.9646 146.43 26.9833 146.427 26.9962L146.211 27.7523C146.206 27.7635 146.197 27.7876 146.193 27.7992L145.979 28.5521C145.974 28.5633 145.966 28.5853 145.963 28.5965L145.912 28.7734C145.888 28.8581 145.905 28.949 145.958 29.0192C146.011 29.0894 146.095 29.1309 146.183 29.1309H149.316C149.575 29.1309 149.783 29.226 149.919 29.4058C150.058 29.5906 150.095 29.848 150.019 30.113L149.548 31.7507C149.392 32.2926 148.824 32.7331 148.28 32.7331H142.142Z" fill="#F0FF41"/>
+</svg>
diff --git a/public/assets/images/og-image.png b/public/assets/images/og-image.png
new file mode 100644
index 000000000..df2de857a
Binary files /dev/null and b/public/assets/images/og-image.png differ
diff --git a/scripts/bundle-categories.js b/scripts/bundle-categories.js
new file mode 100644
index 000000000..a0848888a
--- /dev/null
+++ b/scripts/bundle-categories.js
@@ -0,0 +1,130 @@
+// @ts-check
+/**
+ * Bundle categorization configuration
+ *
+ * This file defines how bundles are categorized in size reports.
+ * Categories help identify which parts of the application are growing.
+ */
+
+/**
+ * @typedef {Object} BundleCategory
+ * @property {string} name - Display name of the category
+ * @property {string} description - Description of what this category includes
+ * @property {RegExp[]} patterns - Regex patterns to match bundle files
+ * @property {number} order - Sort order for display (lower = first)
+ */
+
+/** @type {BundleCategory[]} */
+export const BUNDLE_CATEGORIES = [
+  {
+    name: 'App Entry Points',
+    description: 'Main entry bundles and manifests',
+    patterns: [/^index-.*\.js$/i, /^manifest-.*\.js$/i],
+    order: 1
+  },
+  {
+    name: 'Graph Workspace',
+    description: 'Graph editor runtime, canvas, workflow orchestration',
+    patterns: [
+      /Graph(View|State)?-.*\.js$/i,
+      /(Canvas|Workflow|History|NodeGraph|Compositor)-.*\.js$/i
+    ],
+    order: 2
+  },
+  {
+    name: 'Views & Navigation',
+    description: 'Top-level views, pages, and routed surfaces',
+    patterns: [/.*(View|Page|Layout|Screen|Route)-.*\.js$/i],
+    order: 3
+  },
+  {
+    name: 'Panels & Settings',
+    description: 'Configuration panels, inspectors, and settings screens',
+    patterns: [/.*(Panel|Settings|Config|Preferences|Manager)-.*\.js$/i],
+    order: 4
+  },
+  {
+    name: 'User & Accounts',
+    description: 'Authentication, profile, and account management bundles',
+    patterns: [
+      /.*((User(Panel|Select|Auth|Account|Profile|Settings|Preferences|Manager|List|Menu|Modal))|Account|Auth|Profile|Login|Signup|Password).*-.+\.js$/i
+    ],
+    order: 5
+  },
+  {
+    name: 'Editors & Dialogs',
+    description: 'Modals, dialogs, drawers, and in-app editors',
+    patterns: [/.*(Modal|Dialog|Drawer|Editor)-.*\.js$/i],
+    order: 6
+  },
+  {
+    name: 'UI Components',
+    description: 'Reusable component library chunks',
+    patterns: [
+      /.*(Button|Avatar|Badge|Dropdown|Tabs|Table|List|Card|Form|Input|Toggle|Menu|Toolbar|Sidebar)-.*\.js$/i,
+      /.*\.vue_vue_type_script_setup_true_lang-.*\.js$/i
+    ],
+    order: 7
+  },
+  {
+    name: 'Data & Services',
+    description: 'Stores, services, APIs, and repositories',
+    patterns: [/.*(Service|Store|Api|Repository)-.*\.js$/i],
+    order: 8
+  },
+  {
+    name: 'Utilities & Hooks',
+    description: 'Helpers, composables, and utility bundles',
+    patterns: [
+      /.*(Util|Utils|Helper|Composable|Hook)-.*\.js$/i,
+      /use[A-Z].*\.js$/
+    ],
+    order: 9
+  },
+  {
+    name: 'Vendor & Third-Party',
+    description: 'External libraries and shared vendor chunks',
+    patterns: [
+      /^(chunk|vendor|prime|three|lodash|chart|firebase|yjs|axios|uuid)-.*\.js$/i
+    ],
+    order: 10
+  },
+  {
+    name: 'Other',
+    description: 'Bundles that do not match a named category',
+    patterns: [/.*/],
+    order: 99
+  }
+]
+
+/**
+ * Categorize a bundle file based on its name
+ *
+ * @param {string} fileName - The bundle file name (e.g., "assets/GraphView-BnV6iF9h.js")
+ * @returns {string} - The category name
+ */
+export function categorizeBundle(fileName) {
+  // Extract just the file name without path
+  const baseName = fileName.split('/').pop() || fileName
+
+  // Find the first matching category
+  for (const category of BUNDLE_CATEGORIES) {
+    for (const pattern of category.patterns) {
+      if (pattern.test(baseName)) {
+        return category.name
+      }
+    }
+  }
+
+  return 'Other'
+}
+
+/**
+ * Get category metadata by name
+ *
+ * @param {string} categoryName - The category name
+ * @returns {BundleCategory | undefined} - The category metadata
+ */
+export function getCategoryMetadata(categoryName) {
+  return BUNDLE_CATEGORIES.find((cat) => cat.name === categoryName)
+}
diff --git a/scripts/size-collect.js b/scripts/size-collect.js
new file mode 100644
index 000000000..f2c839ff4
--- /dev/null
+++ b/scripts/size-collect.js
@@ -0,0 +1,90 @@
+// @ts-check
+import { existsSync } from 'node:fs'
+import { mkdir, readFile, readdir, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+import pico from 'picocolors'
+import prettyBytes from 'pretty-bytes'
+
+import { categorizeBundle } from './bundle-categories.js'
+
+const distDir = path.resolve('dist')
+const sizeDir = path.resolve('temp/size')
+
+/**
+ * @typedef {Object} SizeResult
+ * @property {string} file
+ * @property {string} category
+ * @property {number} size
+ * @property {number} gzip
+ * @property {number} brotli
+ */
+
+run()
+
+/**
+ * Main function to collect bundle size data
+ */
+async function run() {
+  if (!existsSync(distDir)) {
+    console.error(pico.red('Error: dist directory does not exist'))
+    console.error(pico.yellow('Please run "pnpm build" first'))
+    process.exit(1)
+  }
+
+  console.log(pico.blue('\nCollecting bundle size data...\n'))
+
+  // Collect main bundle files from dist/assets
+  const assetsDir = path.join(distDir, 'assets')
+  const bundles = []
+
+  if (existsSync(assetsDir)) {
+    const files = await readdir(assetsDir)
+    const jsFiles = files.filter(
+      (file) => file.endsWith('.js') && !file.includes('legacy')
+    )
+
+    for (const file of jsFiles) {
+      const filePath = path.join(assetsDir, file)
+      const content = await readFile(filePath, 'utf-8')
+      const size = Buffer.byteLength(content)
+      const gzip = gzipSync(content).length
+      const brotli = brotliCompressSync(content).length
+      const fileName = `assets/${file}`
+      const category = categorizeBundle(fileName)
+
+      bundles.push({
+        file: fileName,
+        category,
+        size,
+        gzip,
+        brotli
+      })
+
+      console.log(
+        `${pico.green(file)} ${pico.dim(`[${category}]`)} - ` +
+          `Size: ${prettyBytes(size)} / ` +
+          `Gzip: ${prettyBytes(gzip)} / ` +
+          `Brotli: ${prettyBytes(brotli)}`
+      )
+    }
+  }
+
+  // Create temp/size directory
+  await mkdir(sizeDir, { recursive: true })
+
+  // Write individual bundle files
+  for (const bundle of bundles) {
+    const fileName = bundle.file.replace(/[/\\]/g, '_').replace('.js', '.json')
+    await writeFile(
+      path.join(sizeDir, fileName),
+      JSON.stringify(bundle, null, 2),
+      'utf-8'
+    )
+  }
+
+  console.log(
+    pico.green(`\n✓ Collected size data for ${bundles.length} bundles\n`)
+  )
+  console.log(pico.blue(`Data saved to: ${sizeDir}\n`))
+}
diff --git a/scripts/size-report.js b/scripts/size-report.js
new file mode 100644
index 000000000..b6d2a0d6a
--- /dev/null
+++ b/scripts/size-report.js
@@ -0,0 +1,569 @@
+// @ts-check
+import { markdownTable } from 'markdown-table'
+import { existsSync } from 'node:fs'
+import { readdir } from 'node:fs/promises'
+import path from 'node:path'
+import prettyBytes from 'pretty-bytes'
+
+import { getCategoryMetadata } from './bundle-categories.js'
+
+/**
+ * @typedef {Object} SizeMetrics
+ * @property {number} size
+ * @property {number} gzip
+ * @property {number} brotli
+ */
+
+/**
+ * @typedef {Object} SizeResult
+ * @property {number} size
+ * @property {number} gzip
+ * @property {number} brotli
+ */
+
+/**
+ * @typedef {SizeResult & { file: string, category?: string }} BundleResult
+ */
+
+/**
+ * @typedef {'added' | 'removed' | 'increased' | 'decreased' | 'unchanged'} BundleStatus
+ */
+
+/**
+ * @typedef {Object} BundleDiff
+ * @property {string} fileName
+ * @property {BundleResult | undefined} curr
+ * @property {BundleResult | undefined} prev
+ * @property {SizeMetrics} diff
+ * @property {BundleStatus} status
+ */
+
+/**
+ * @typedef {Object} CountSummary
+ * @property {number} added
+ * @property {number} removed
+ * @property {number} increased
+ * @property {number} decreased
+ * @property {number} unchanged
+ */
+
+/**
+ * @typedef {Object} CategoryReport
+ * @property {string} name
+ * @property {string | undefined} description
+ * @property {number} order
+ * @property {{ current: SizeMetrics, baseline: SizeMetrics, diff: SizeMetrics }} metrics
+ * @property {CountSummary} counts
+ * @property {BundleDiff[]} bundles
+ */
+
+/**
+ * @typedef {Object} BundleReport
+ * @property {CategoryReport[]} categories
+ * @property {{ currentBundles: number, baselineBundles: number, metrics: { current: SizeMetrics, baseline: SizeMetrics, diff: SizeMetrics }, counts: CountSummary }} overall
+ * @property {boolean} hasBaseline
+ */
+
+const currDir = path.resolve('temp/size')
+const prevDir = path.resolve('temp/size-prev')
+
+run()
+
+/**
+ * Main entry for generating the size report
+ */
+async function run() {
+  if (!existsSync(currDir)) {
+    console.error('Error: temp/size directory does not exist')
+    console.error('Please run "pnpm size:collect" first')
+    process.exit(1)
+  }
+
+  const report = await buildBundleReport()
+  const output = renderReport(report)
+  process.stdout.write(output)
+}
+
+/**
+ * Build bundle comparison data from current and baseline artifacts
+ * @returns {Promise<BundleReport>}
+ */
+async function buildBundleReport() {
+  /**
+   * @param {string[]} files
+   * @returns {string[]}
+   */
+  const filterFiles = (files) => files.filter((file) => file.endsWith('.json'))
+
+  const currFiles = filterFiles(await readdir(currDir))
+  const baselineFiles = existsSync(prevDir)
+    ? filterFiles(await readdir(prevDir))
+    : []
+  const fileList = new Set([...currFiles, ...baselineFiles])
+
+  /** @type {Map<string, CategoryReport>} */
+  const categories = new Map()
+
+  const overall = {
+    currentBundles: 0,
+    baselineBundles: 0,
+    metrics: {
+      current: createMetrics(),
+      baseline: createMetrics(),
+      diff: createMetrics()
+    },
+    counts: createCounts()
+  }
+
+  for (const file of fileList) {
+    const currPath = path.resolve(currDir, file)
+    const prevPath = path.resolve(prevDir, file)
+
+    const curr = await importJSON(currPath)
+    const prev = await importJSON(prevPath)
+    const fileName = curr?.file || prev?.file
+    if (!fileName) continue
+
+    const categoryName = curr?.category || prev?.category || 'Other'
+    const category = ensureCategoryEntry(categories, categoryName)
+
+    const currMetrics = toMetrics(curr)
+    const baselineMetrics = toMetrics(prev)
+    const diffMetrics = subtractMetrics(currMetrics, baselineMetrics)
+    const status = getStatus(curr, prev, diffMetrics.size)
+
+    if (curr) {
+      overall.currentBundles++
+    }
+    if (prev) {
+      overall.baselineBundles++
+    }
+
+    addMetrics(overall.metrics.current, currMetrics)
+    addMetrics(overall.metrics.baseline, baselineMetrics)
+    addMetrics(overall.metrics.diff, diffMetrics)
+    incrementStatus(overall.counts, status)
+
+    addMetrics(category.metrics.current, currMetrics)
+    addMetrics(category.metrics.baseline, baselineMetrics)
+    addMetrics(category.metrics.diff, diffMetrics)
+    incrementStatus(category.counts, status)
+
+    category.bundles.push({
+      fileName,
+      curr,
+      prev,
+      diff: diffMetrics,
+      status
+    })
+  }
+
+  const sortedCategories = Array.from(categories.values()).sort(
+    (a, b) => a.order - b.order
+  )
+
+  return {
+    categories: sortedCategories,
+    overall,
+    hasBaseline: baselineFiles.length > 0
+  }
+}
+
+/**
+ * Render the complete report in markdown
+ * @param {BundleReport} report
+ * @returns {string}
+ */
+function renderReport(report) {
+  const parts = ['## Bundle Size Report\n']
+
+  parts.push(renderSummary(report))
+
+  if (report.categories.length > 0) {
+    const glance = renderCategoryGlance(report)
+    if (glance) {
+      parts.push('\n' + glance)
+    }
+    parts.push('\n' + renderCategoryDetails(report))
+  }
+
+  return (
+    parts
+      .join('\n')
+      .replace(/\n{3,}/g, '\n\n')
+      .trimEnd() + '\n'
+  )
+}
+
+/**
+ * Render overall summary bullets
+ * @param {BundleReport} report
+ * @returns {string}
+ */
+function renderSummary(report) {
+  const { overall, hasBaseline } = report
+  const lines = ['**Summary**']
+
+  const rawLineParts = [
+    `- Raw size: ${prettyBytes(overall.metrics.current.size)}`
+  ]
+  if (hasBaseline) {
+    rawLineParts.push(`baseline ${prettyBytes(overall.metrics.baseline.size)}`)
+    rawLineParts.push(`— ${formatDiffIndicator(overall.metrics.diff.size)}`)
+  }
+  lines.push(rawLineParts.join(' '))
+
+  const gzipLineParts = [`- Gzip: ${prettyBytes(overall.metrics.current.gzip)}`]
+  if (hasBaseline) {
+    gzipLineParts.push(`baseline ${prettyBytes(overall.metrics.baseline.gzip)}`)
+    gzipLineParts.push(`— ${formatDiffIndicator(overall.metrics.diff.gzip)}`)
+  }
+  lines.push(gzipLineParts.join(' '))
+
+  const brotliLineParts = [
+    `- Brotli: ${prettyBytes(overall.metrics.current.brotli)}`
+  ]
+  if (hasBaseline) {
+    brotliLineParts.push(
+      `baseline ${prettyBytes(overall.metrics.baseline.brotli)}`
+    )
+    brotliLineParts.push(
+      `— ${formatDiffIndicator(overall.metrics.diff.brotli)}`
+    )
+  }
+  lines.push(brotliLineParts.join(' '))
+
+  const bundleStats = [`${overall.currentBundles} current`]
+  if (hasBaseline) {
+    bundleStats.push(`${overall.baselineBundles} baseline`)
+  }
+
+  const statusParts = []
+  if (overall.counts.added) statusParts.push(`${overall.counts.added} added`)
+  if (overall.counts.removed)
+    statusParts.push(`${overall.counts.removed} removed`)
+  if (overall.counts.increased)
+    statusParts.push(`${overall.counts.increased} grew`)
+  if (overall.counts.decreased)
+    statusParts.push(`${overall.counts.decreased} shrank`)
+
+  let bundlesLine = `- Bundles: ${bundleStats.join(' • ')}`
+  if (statusParts.length > 0) {
+    bundlesLine += ` • ${statusParts.join(' / ')}`
+  }
+  lines.push(bundlesLine)
+
+  if (!hasBaseline) {
+    lines.push(
+      '_Baseline artifact not found; showing current bundle sizes only._'
+    )
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Render a compact category glance line
+ * @param {BundleReport} report
+ * @returns {string}
+ */
+function renderCategoryGlance(report) {
+  const { categories, hasBaseline } = report
+  const relevant = categories.filter(
+    (category) =>
+      category.metrics.current.size > 0 ||
+      (hasBaseline && category.metrics.baseline.size > 0)
+  )
+
+  if (relevant.length === 0) return ''
+
+  const sorted = relevant.slice().sort((a, b) => {
+    if (hasBaseline) {
+      return (
+        Math.abs(b.metrics.diff.size) - Math.abs(a.metrics.diff.size) ||
+        b.metrics.current.size - a.metrics.current.size
+      )
+    }
+    return b.metrics.current.size - a.metrics.current.size
+  })
+
+  const limit = 6
+  const trimmed = sorted.slice(0, limit)
+  const parts = trimmed.map((category) => {
+    const currentStr = prettyBytes(category.metrics.current.size)
+    if (hasBaseline) {
+      return `${category.name} ${formatDiffIndicator(category.metrics.diff.size)} (${currentStr})`
+    }
+    return `${category.name} ${currentStr}`
+  })
+
+  if (sorted.length > limit) {
+    parts.push(`+ ${sorted.length - limit} more`)
+  }
+
+  return `**Category Glance**\n${parts.join(' · ')}`
+}
+
+/**
+ * Render per-category detail tables wrapped in collapsible sections
+ * @param {BundleReport} report
+ * @returns {string}
+ */
+function renderCategoryDetails(report) {
+  const lines = ['<details>', '<summary>Per-category breakdown</summary>', '']
+
+  for (const category of report.categories) {
+    lines.push(renderCategoryBlock(category, report.hasBaseline))
+    lines.push('')
+  }
+
+  if (report.categories.length > 0) {
+    lines.pop()
+  }
+
+  lines.push('</details>')
+  return lines.join('\n')
+}
+
+/**
+ * Render a single category block with its table
+ * @param {CategoryReport} category
+ * @param {boolean} hasBaseline
+ * @returns {string}
+ */
+function renderCategoryBlock(category, hasBaseline) {
+  const lines = ['<details>']
+  const currentStr = prettyBytes(category.metrics.current.size)
+  const summaryParts = [`<summary>${category.name} — ${currentStr}`]
+
+  if (hasBaseline) {
+    summaryParts.push(
+      ` (baseline ${prettyBytes(category.metrics.baseline.size)}) • ${formatDiffIndicator(category.metrics.diff.size)}`
+    )
+  }
+
+  summaryParts.push('</summary>')
+  lines.push(summaryParts.join(''))
+  lines.push('')
+
+  if (category.description) {
+    lines.push(`_${category.description}_`)
+    lines.push('')
+  }
+
+  if (category.bundles.length === 0) {
+    lines.push('No bundles matched this category.\n')
+    lines.push('</details>\n')
+    return lines.join('\n')
+  }
+
+  const headers = hasBaseline
+    ? ['File', 'Before', 'After', 'Δ Raw', 'Δ Gzip', 'Δ Brotli']
+    : ['File', 'Size', 'Gzip', 'Brotli']
+
+  const rows = category.bundles
+    .slice()
+    .sort((a, b) => {
+      const diffMagnitude = Math.abs(b.diff.size) - Math.abs(a.diff.size)
+      if (diffMagnitude !== 0) return diffMagnitude
+      return a.fileName.localeCompare(b.fileName)
+    })
+    .map((bundle) => {
+      if (hasBaseline) {
+        return [
+          formatFileLabel(bundle),
+          formatSize(bundle.prev?.size),
+          formatSize(bundle.curr?.size),
+          formatDiffIndicator(bundle.diff.size),
+          formatDiffIndicator(bundle.diff.gzip),
+          formatDiffIndicator(bundle.diff.brotli)
+        ]
+      }
+
+      return [
+        formatFileLabel(bundle),
+        formatSize(bundle.curr?.size),
+        formatSize(bundle.curr?.gzip),
+        formatSize(bundle.curr?.brotli)
+      ]
+    })
+
+  lines.push(markdownTable([headers, ...rows]))
+  lines.push('')
+
+  const statusParts = []
+  if (category.counts.added) statusParts.push(`${category.counts.added} added`)
+  if (category.counts.removed)
+    statusParts.push(`${category.counts.removed} removed`)
+  if (category.counts.increased)
+    statusParts.push(`${category.counts.increased} grew`)
+  if (category.counts.decreased)
+    statusParts.push(`${category.counts.decreased} shrank`)
+
+  if (statusParts.length > 0) {
+    lines.push(`_Status:_ ${statusParts.join(' / ')}`)
+    lines.push('')
+  }
+
+  lines.push('</details>')
+  return lines.join('\n')
+}
+
+/**
+ * Ensure a category entry exists in the map
+ * @param {Map<string, CategoryReport>} categories
+ * @param {string} categoryName
+ * @returns {CategoryReport}
+ */
+function ensureCategoryEntry(categories, categoryName) {
+  if (!categories.has(categoryName)) {
+    const meta = getCategoryMetadata(categoryName)
+    categories.set(categoryName, {
+      name: categoryName,
+      description: meta?.description,
+      order: meta?.order ?? 99,
+      metrics: {
+        current: createMetrics(),
+        baseline: createMetrics(),
+        diff: createMetrics()
+      },
+      counts: createCounts(),
+      bundles: []
+    })
+  }
+  // @ts-expect-error - ensured by check above
+  return categories.get(categoryName)
+}
+
+/**
+ * Convert bundle result to metrics
+ * @param {BundleResult | undefined} bundle
+ * @returns {SizeMetrics}
+ */
+function toMetrics(bundle) {
+  if (!bundle) return createMetrics()
+  return {
+    size: bundle.size,
+    gzip: bundle.gzip,
+    brotli: bundle.brotli
+  }
+}
+
+/**
+ * Create an empty metrics object
+ * @returns {SizeMetrics}
+ */
+function createMetrics() {
+  return { size: 0, gzip: 0, brotli: 0 }
+}
+
+/**
+ * Add source metrics into target metrics
+ * @param {SizeMetrics} target
+ * @param {SizeMetrics} source
+ */
+function addMetrics(target, source) {
+  target.size += source.size
+  target.gzip += source.gzip
+  target.brotli += source.brotli
+}
+
+/**
+ * Subtract baseline metrics from current metrics
+ * @param {SizeMetrics} current
+ * @param {SizeMetrics} baseline
+ * @returns {SizeMetrics}
+ */
+function subtractMetrics(current, baseline) {
+  return {
+    size: current.size - baseline.size,
+    gzip: current.gzip - baseline.gzip,
+    brotli: current.brotli - baseline.brotli
+  }
+}
+
+/**
+ * Create an empty counts object
+ * @returns {CountSummary}
+ */
+function createCounts() {
+  return { added: 0, removed: 0, increased: 0, decreased: 0, unchanged: 0 }
+}
+
+/**
+ * Increment status counters
+ * @param {CountSummary} counts
+ * @param {BundleStatus} status
+ */
+function incrementStatus(counts, status) {
+  counts[status] += 1
+}
+
+/**
+ * Determine bundle status for reporting
+ * @param {BundleResult | undefined} curr
+ * @param {BundleResult | undefined} prev
+ * @param {number} sizeDiff
+ * @returns {BundleStatus}
+ */
+function getStatus(curr, prev, sizeDiff) {
+  if (curr && prev) {
+    if (sizeDiff > 0) return 'increased'
+    if (sizeDiff < 0) return 'decreased'
+    return 'unchanged'
+  }
+  if (curr && !prev) return 'added'
+  if (!curr && prev) return 'removed'
+  return 'unchanged'
+}
+
+/**
+ * Format file label with status hints
+ * @param {BundleDiff} bundle
+ * @returns {string}
+ */
+function formatFileLabel(bundle) {
+  if (bundle.status === 'added') {
+    return `**${bundle.fileName}** _(new)_`
+  }
+  if (bundle.status === 'removed') {
+    return `~~${bundle.fileName}~~ _(removed)_`
+  }
+  return bundle.fileName
+}
+
+/**
+ * Format size for table output
+ * @param {number | undefined} value
+ * @returns {string}
+ */
+function formatSize(value) {
+  if (value === undefined) return '—'
+  return prettyBytes(value)
+}
+
+/**
+ * Format a diff with an indicator emoji
+ * @param {number} diff
+ * @returns {string}
+ */
+function formatDiffIndicator(diff) {
+  if (diff > 0) {
+    return `:red_circle: +${prettyBytes(diff)}`
+  }
+  if (diff < 0) {
+    return `:green_circle: -${prettyBytes(Math.abs(diff))}`
+  }
+  return ':white_circle: 0 B'
+}
+
+/**
+ * Import JSON data if it exists
+ * @template T
+ * @param {string} filePath
+ * @returns {Promise<T | undefined>}
+ */
+async function importJSON(filePath) {
+  if (!existsSync(filePath)) return undefined
+  return (await import(filePath, { with: { type: 'json' } })).default
+}
diff --git a/src/App.vue b/src/App.vue
index c0c9fdd20..a2bd28fdd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,7 +42,6 @@ const showContextMenu = (event: MouseEvent) => {
 }
 
 onMounted(() => {
-  // @ts-expect-error fixme ts strict error
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
   if (isElectron()) {
diff --git a/src/assets/palettes/dark.json b/src/assets/palettes/dark.json
index 508ec5804..e64a775cc 100644
--- a/src/assets/palettes/dark.json
+++ b/src/assets/palettes/dark.json
@@ -52,7 +52,7 @@
     "comfy_base": {
       "fg-color": "#fff",
       "bg-color": "#202020",
-      "comfy-menu-bg": "#353535",
+      "comfy-menu-bg": "#11141a",
       "comfy-menu-secondary-bg": "#303030",
       "comfy-input-bg": "#222",
       "input-text": "#ddd",
diff --git a/src/assets/palettes/light.json b/src/assets/palettes/light.json
index fcacbd282..37d1048d9 100644
--- a/src/assets/palettes/light.json
+++ b/src/assets/palettes/light.json
@@ -53,7 +53,7 @@
     "comfy_base": {
       "fg-color": "#222",
       "bg-color": "#DDD",
-      "comfy-menu-bg": "#F5F5F5",
+      "comfy-menu-bg": "#FFFFFF",
       "comfy-menu-hover-bg": "#ccc",
       "comfy-menu-secondary-bg": "#EEE",
       "comfy-input-bg": "#C9C9C9",
@@ -68,7 +68,12 @@
       "content-fg": "#222",
       "content-hover-bg": "#adadad",
       "content-hover-fg": "#222",
-      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem"
+      "bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem",
+      "interface-panel-box-shadow": "1px 1px 8px 0 rgba(0, 0, 0, 0.2)",
+      "interface-panel-drop-shadow": "1px 1px 4px rgba(0, 0, 0, 0.4)",
+      "interface-panel-hover-surface": "var(--color-gray-200)",
+      "interface-panel-selected-surface": "color-mix(in srgb, var(--interface-panel-surface) 78%, var(--contrast-mix-color))",
+      "contrast-mix-color": "#000"
     }
   }
 }
diff --git a/src/base/common/downloadUtil.ts b/src/base/common/downloadUtil.ts
index 307a3e35b..4462dd1a7 100644
--- a/src/base/common/downloadUtil.ts
+++ b/src/base/common/downloadUtil.ts
@@ -1,29 +1,64 @@
 /**
  * Utility functions for downloading files
  */
+import { isCloud } from '@/platform/distribution/types'
 
 // Constants
 const DEFAULT_DOWNLOAD_FILENAME = 'download.png'
 
+/**
+ * Trigger a download by creating a temporary anchor element
+ * @param href - The URL or blob URL to download
+ * @param filename - The filename to suggest to the browser
+ */
+function triggerLinkDownload(href: string, filename: string): void {
+  const link = document.createElement('a')
+  link.href = href
+  link.download = filename
+  link.style.display = 'none'
+
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
 /**
  * Download a file from a URL by creating a temporary anchor element
  * @param url - The URL of the file to download (must be a valid URL string)
  * @param filename - Optional filename override (will use URL filename or default if not provided)
  * @throws {Error} If the URL is invalid or empty
  */
-export const downloadFile = (url: string, filename?: string): void => {
+export function downloadFile(url: string, filename?: string): void {
   if (!url || typeof url !== 'string' || url.trim().length === 0) {
     throw new Error('Invalid URL provided for download')
   }
-  const link = document.createElement('a')
-  link.href = url
-  link.download =
+
+  const inferredFilename =
     filename || extractFilenameFromUrl(url) || DEFAULT_DOWNLOAD_FILENAME
 
-  // Trigger download
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+  if (isCloud) {
+    // Assets from cross-origin (e.g., GCS) cannot be downloaded this way
+    void downloadViaBlobFetch(url, inferredFilename).catch((error) => {
+      console.error('Failed to download file', error)
+    })
+    return
+  }
+
+  triggerLinkDownload(url, inferredFilename)
+}
+
+/**
+ * Download a Blob by creating a temporary object URL and anchor element
+ * @param filename - The filename to suggest to the browser
+ * @param blob - The Blob to download
+ */
+export function downloadBlob(filename: string, blob: Blob): void {
+  const url = URL.createObjectURL(blob)
+
+  triggerLinkDownload(url, filename)
+
+  // Revoke on the next microtask to give the browser time to start the download
+  queueMicrotask(() => URL.revokeObjectURL(url))
 }
 
 /**
@@ -39,3 +74,15 @@ const extractFilenameFromUrl = (url: string): string | null => {
     return null
   }
 }
+
+const downloadViaBlobFetch = async (
+  href: string,
+  filename: string
+): Promise<void> => {
+  const response = await fetch(href)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${href}: ${response.status}`)
+  }
+  const blob = await response.blob()
+  downloadBlob(filename, blob)
+}
diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 6e3cd5842..1bb9e89c7 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -1,48 +1,88 @@
 <template>
-  <Splitter
-    :key="sidebarStateKey"
-    class="splitter-overlay-root splitter-overlay"
-    :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
-    :state-key="sidebarStateKey"
-    state-storage="local"
-  >
-    <SplitterPanel
-      v-show="sidebarPanelVisible"
-      v-if="sidebarLocation === 'left'"
-      class="side-bar-panel"
-      :min-size="10"
-      :size="20"
-    >
-      <slot name="side-bar-panel" />
-    </SplitterPanel>
+  <div class="splitter-overlay-root pointer-events-none flex flex-col">
+    <slot name="workflow-tabs" />
+
+    <div
+      class="pointer-events-none flex flex-1 overflow-hidden"
+      :class="{
+        'flex-row': sidebarLocation === 'left',
+        'flex-row-reverse': sidebarLocation === 'right'
+      }"
+    >
+      <div class="side-toolbar-container">
+        <slot name="side-toolbar" />
+      </div>
 
-    <SplitterPanel :size="100">
       <Splitter
-        class="splitter-overlay max-w-full"
-        layout="vertical"
-        :pt:gutter="bottomPanelVisible ? '' : 'hidden'"
-        state-key="bottom-panel-splitter"
+        key="main-splitter-stable"
+        class="splitter-overlay flex-1 overflow-hidden"
+        :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
+        :state-key="sidebarStateKey || 'main-splitter'"
         state-storage="local"
       >
-        <SplitterPanel class="graph-canvas-panel relative">
-          <slot name="graph-canvas-panel" />
+        <SplitterPanel
+          v-if="sidebarLocation === 'left'"
+          class="side-bar-panel pointer-events-auto"
+          :min-size="10"
+          :size="20"
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'left'
+                ? 'flex'
+                : 'none'
+          }"
+        >
+          <slot
+            v-if="sidebarPanelVisible && sidebarLocation === 'left'"
+            name="side-bar-panel"
+          />
         </SplitterPanel>
-        <SplitterPanel v-show="bottomPanelVisible" class="bottom-panel">
-          <slot name="bottom-panel" />
+
+        <SplitterPanel :size="80" class="flex flex-col">
+          <slot name="topmenu" :sidebar-panel-visible="sidebarPanelVisible" />
+
+          <Splitter
+            class="splitter-overlay splitter-overlay-bottom mr-1 mb-1 ml-1 flex-1"
+            layout="vertical"
+            :pt:gutter="
+              'rounded-tl-lg rounded-tr-lg ' +
+              (bottomPanelVisible ? '' : 'hidden')
+            "
+            state-key="bottom-panel-splitter"
+            state-storage="local"
+          >
+            <SplitterPanel class="graph-canvas-panel relative">
+              <slot name="graph-canvas-panel" />
+            </SplitterPanel>
+            <SplitterPanel
+              v-show="bottomPanelVisible"
+              class="bottom-panel pointer-events-auto rounded-lg"
+            >
+              <slot name="bottom-panel" />
+            </SplitterPanel>
+          </Splitter>
+        </SplitterPanel>
+
+        <SplitterPanel
+          v-if="sidebarLocation === 'right'"
+          class="side-bar-panel pointer-events-auto"
+          :min-size="10"
+          :size="20"
+          :style="{
+            display:
+              sidebarPanelVisible && sidebarLocation === 'right'
+                ? 'flex'
+                : 'none'
+          }"
+        >
+          <slot
+            v-if="sidebarPanelVisible && sidebarLocation === 'right'"
+            name="side-bar-panel"
+          />
         </SplitterPanel>
       </Splitter>
-    </SplitterPanel>
-
-    <SplitterPanel
-      v-show="sidebarPanelVisible"
-      v-if="sidebarLocation === 'right'"
-      class="side-bar-panel"
-      :min-size="10"
-      :size="20"
-    >
-      <slot name="side-bar-panel" />
-    </SplitterPanel>
-  </Splitter>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -74,7 +114,11 @@ const activeSidebarTabId = computed(
 )
 
 const sidebarStateKey = computed(() => {
-  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
+  if (unifiedWidth.value) {
+    return 'unified-sidebar'
+  }
+  // When no tab is active, use a default key to maintain state
+  return activeSidebarTabId.value ?? 'default-sidebar'
 })
 </script>
 
@@ -93,12 +137,17 @@ const sidebarStateKey = computed(() => {
 
 .side-bar-panel {
   background-color: var(--bg-color);
-  pointer-events: auto;
 }
 
 .bottom-panel {
-  background-color: var(--bg-color);
-  pointer-events: auto;
+  background-color: var(--comfy-menu-bg);
+  border: 1px solid var(--p-panel-border-color);
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.splitter-overlay-bottom :deep(.p-splitter-gutter) {
+  transform: translateY(5px);
 }
 
 .splitter-overlay {
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index d0856362f..467561b54 100644
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     v-show="workspaceState.focusMode"
-    class="comfy-menu-hamburger no-drag"
-    :style="positionCSS"
+    class="comfy-menu-hamburger no-drag top-0 right-0"
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
@@ -15,14 +14,13 @@
       @click="exitFocusMode"
       @contextmenu="showNativeSystemMenu"
     />
-    <div v-show="menuSetting !== 'Bottom'" class="window-actions-spacer" />
+    <div class="window-actions-spacer" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import type { CSSProperties } from 'vue'
-import { computed, watchEffect } from 'vue'
+import { watchEffect } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
@@ -45,15 +43,6 @@ watchEffect(() => {
     app.ui.menuContainer.style.display = 'block'
   }
 })
-
-const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
-const positionCSS = computed<CSSProperties>(() =>
-  // 'Bottom' menuSetting shows the hamburger button in the bottom right corner
-  // 'Disabled', 'Top' menuSetting shows the hamburger button in the top right corner
-  menuSetting.value === 'Bottom'
-    ? { bottom: '0px', right: '0px' }
-    : { top: '0px', right: '0px' }
-)
 </script>
 
 <style scoped>
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
new file mode 100644
index 000000000..f04bfa248
--- /dev/null
+++ b/src/components/TopMenuSection.vue
@@ -0,0 +1,52 @@
+<template>
+  <div v-if="!workspaceStore.focusMode" class="ml-2 flex pt-1">
+    <div class="min-w-0 flex-1">
+      <SubgraphBreadcrumb />
+    </div>
+
+    <div
+      class="actionbar-container pointer-events-auto mx-1 flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 shadow-interface"
+    >
+      <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+      <div
+        ref="legacyCommandsContainerRef"
+        class="[&:not(:has(*>*:not(:empty)))]:hidden"
+      ></div>
+      <ComfyActionbar />
+      <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
+      <LoginButton v-else-if="isDesktop" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
+import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
+import LoginButton from '@/components/topbar/LoginButton.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { app } from '@/scripts/app'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isElectron } from '@/utils/envUtil'
+
+const workspaceStore = useWorkspaceStore()
+const { isLoggedIn } = useCurrentUser()
+const isDesktop = isElectron()
+
+// Maintain support for legacy topbar elements attached by custom scripts
+const legacyCommandsContainerRef = ref<HTMLElement>()
+onMounted(() => {
+  if (legacyCommandsContainerRef.value) {
+    app.menu.element.style.width = 'fit-content'
+    legacyCommandsContainerRef.value.appendChild(app.menu.element)
+  }
+})
+</script>
+
+<style scoped>
+.actionbar-container {
+  background-color: var(--comfy-menu-bg);
+}
+</style>
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 6844f9a36..dbcc492ee 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -1,50 +1,64 @@
 <template>
-  <Panel
-    class="actionbar w-fit"
-    :style="style"
-    :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
-  >
-    <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span
-        ref="dragHandleRef"
-        :class="
-          cn(
-            'drag-handle cursor-grab w-3 h-max mr-2',
-            isDragging && 'cursor-grabbing'
-          )
-        "
-      />
-      <ComfyQueueButton />
+  <div class="flex h-full items-center">
+    <div
+      v-if="isDragging && !isDocked"
+      :class="actionbarClass"
+      @mouseenter="onMouseEnterDropZone"
+      @mouseleave="onMouseLeaveDropZone"
+    >
+      {{ t('actionbar.dockToTop') }}
     </div>
-  </Panel>
+
+    <Panel
+      class="pointer-events-auto z-1000"
+      :style="style"
+      :class="panelClass"
+      :pt="{
+        header: { class: 'hidden' },
+        content: { class: isDocked ? 'p-0' : 'p-1' }
+      }"
+    >
+      <div ref="panelRef" class="flex items-center select-none">
+        <span
+          ref="dragHandleRef"
+          :class="
+            cn(
+              'drag-handle cursor-grab w-3 h-max mr-2',
+              isDragging && 'cursor-grabbing'
+            )
+          "
+        />
+
+        <ComfyRunButton />
+      </div>
+    </Panel>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {
   useDraggable,
-  useElementBounding,
-  useEventBus,
   useEventListener,
   useLocalStorage,
   watchDebounced
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import type { Ref } from 'vue'
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
+import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { cn } from '@/utils/tailwindUtil'
 
-import ComfyQueueButton from './ComfyQueueButton.vue'
+import ComfyRunButton from './ComfyRunButton'
 
 const settingsStore = useSettingStore()
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
-
 const visible = computed(() => position.value !== 'Disabled')
 
-const topMenuRef = inject<Ref<HTMLDivElement | null>>('topMenuRef')
+const tabContainer = document.querySelector('.workflow-tabs-container')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
 const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
@@ -63,11 +77,9 @@ const {
   containerElement: document.body,
   onMove: (event) => {
     // Prevent dragging the menu over the top of the tabs
-    if (position.value === 'Top') {
-      const minY = topMenuRef?.value?.getBoundingClientRect().top ?? 40
-      if (event.y < minY) {
-        event.y = minY
-      }
+    const minY = tabContainer?.getBoundingClientRect().bottom ?? 40
+    if (event.y < minY) {
+      event.y = minY
     }
   }
 })
@@ -121,6 +133,15 @@ watch(visible, async (newVisible) => {
   }
 })
 
+/**
+ * Track run button handle drag start using mousedown on the drag handle.
+ */
+useEventListener(dragHandleRef, 'mousedown', () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'actionbar_run_handle_drag_start'
+  })
+})
+
 const lastDragState = ref({
   x: x.value,
   y: y.value,
@@ -202,68 +223,54 @@ const adjustMenuPosition = () => {
 
 useEventListener(window, 'resize', adjustMenuPosition)
 
-const topMenuBounds = useElementBounding(topMenuRef)
-const overlapThreshold = 20 // pixels
-const isOverlappingWithTopMenu = computed(() => {
-  if (!panelRef.value) {
-    return false
+// Drop zone state
+const isMouseOverDropZone = ref(false)
+
+// Mouse event handlers for self-contained drop zone
+const onMouseEnterDropZone = () => {
+  if (isDragging.value) {
+    isMouseOverDropZone.value = true
   }
-  const { height } = panelRef.value.getBoundingClientRect()
-  const actionbarBottom = y.value + height
-  const topMenuBottom = topMenuBounds.bottom.value
+}
 
-  const overlapPixels =
-    Math.min(actionbarBottom, topMenuBottom) -
-    Math.max(y.value, topMenuBounds.top.value)
-  return overlapPixels > overlapThreshold
-})
+const onMouseLeaveDropZone = () => {
+  if (isDragging.value) {
+    isMouseOverDropZone.value = false
+  }
+}
 
-watch(isDragging, (newIsDragging) => {
-  if (!newIsDragging) {
-    // Stop dragging
-    isDocked.value = isOverlappingWithTopMenu.value
+// Handle drag state changes
+watch(isDragging, (dragging) => {
+  if (dragging) {
+    // Starting to drag - undock if docked
+    if (isDocked.value) {
+      isDocked.value = false
+    }
   } else {
-    // Start dragging
-    isDocked.value = false
+    // Stopped dragging - dock if mouse is over drop zone
+    if (isMouseOverDropZone.value) {
+      isDocked.value = true
+    }
+    // Reset drop zone state
+    isMouseOverDropZone.value = false
   }
 })
-
-const eventBus = useEventBus<string>('topMenu')
-watch([isDragging, isOverlappingWithTopMenu], ([dragging, overlapping]) => {
-  eventBus.emit('updateHighlight', {
-    isDragging: dragging,
-    isOverlapping: overlapping
-  })
-})
+const actionbarClass = computed(() =>
+  cn(
+    'w-[265px] border-dashed border-blue-500 opacity-80',
+    'm-1.5 flex items-center justify-center self-stretch',
+    'rounded-md before:w-50 before:-ml-50 before:h-full',
+    isMouseOverDropZone.value &&
+      'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
+  )
+)
+const panelClass = computed(() =>
+  cn(
+    'actionbar pointer-events-auto z1000',
+    isDragging.value && 'select-none pointer-events-none',
+    isDocked.value
+      ? 'p-0 static mr-2 border-none bg-transparent'
+      : 'fixed shadow-interface'
+  )
+)
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.actionbar {
-  pointer-events: all;
-  position: fixed;
-  z-index: 1000;
-}
-
-.actionbar.is-docked {
-  position: static;
-  @apply bg-transparent border-none p-0;
-}
-
-.actionbar.is-dragging {
-  user-select: none;
-}
-
-:deep(.p-panel-content) {
-  @apply p-1;
-}
-
-.is-docked :deep(.p-panel-content) {
-  @apply p-0;
-}
-
-:deep(.p-panel-header) {
-  display: none;
-}
-</style>
diff --git a/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue b/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue
new file mode 100644
index 000000000..c0cda19bf
--- /dev/null
+++ b/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue
@@ -0,0 +1,19 @@
+<template>
+  <component
+    :is="currentButton"
+    :key="isActiveSubscription ? 'queue' : 'subscribe'"
+  />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import ComfyQueueButton from '@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue'
+import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+
+const { isActiveSubscription } = useSubscription()
+
+const currentButton = computed(() =>
+  isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton
+)
+</script>
diff --git a/src/components/actionbar/ComfyQueueButton.vue b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
similarity index 62%
rename from src/components/actionbar/ComfyQueueButton.vue
rename to src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
index b290fecc3..8907ecf44 100644
--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -8,7 +8,7 @@
         showDelay: 600
       }"
       class="comfyui-queue-button"
-      :label="activeQueueModeMenuItem.label"
+      :label="String(activeQueueModeMenuItem?.label ?? '')"
       severity="primary"
       size="small"
       :model="queueModeMenuItems"
@@ -33,7 +33,7 @@
             value: item.tooltip,
             showDelay: 600
           }"
-          :label="String(item.label)"
+          :label="String(item.label ?? '')"
           :icon="item.icon"
           :severity="item.key === queueMode ? 'primary' : 'secondary'"
           size="small"
@@ -82,10 +82,13 @@
 import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
+import type { MenuItem } from 'primevue/menuitem'
 import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import {
   useQueuePendingTaskCountStore,
@@ -93,43 +96,58 @@ import {
 } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
-import BatchCountEdit from './BatchCountEdit.vue'
+import BatchCountEdit from '../BatchCountEdit.vue'
 
 const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
-const { mode: queueMode } = storeToRefs(useQueueSettingsStore())
+const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
 const { t } = useI18n()
-const queueModeMenuItemLookup = computed(() => ({
-  disabled: {
-    key: 'disabled',
-    label: t('menu.run'),
-    tooltip: t('menu.disabledTooltip'),
-    command: () => {
-      queueMode.value = 'disabled'
-    }
-  },
-  instant: {
-    key: 'instant',
-    label: `${t('menu.run')} (${t('menu.instant')})`,
-    tooltip: t('menu.instantTooltip'),
-    command: () => {
-      queueMode.value = 'instant'
-    }
-  },
-  change: {
-    key: 'change',
-    label: `${t('menu.run')} (${t('menu.onChange')})`,
-    tooltip: t('menu.onChangeTooltip'),
-    command: () => {
-      queueMode.value = 'change'
+const queueModeMenuItemLookup = computed(() => {
+  const items: Record<string, MenuItem> = {
+    disabled: {
+      key: 'disabled',
+      label: t('menu.run'),
+      tooltip: t('menu.disabledTooltip'),
+      command: () => {
+        queueMode.value = 'disabled'
+      }
+    },
+    change: {
+      key: 'change',
+      label: `${t('menu.run')} (${t('menu.onChange')})`,
+      tooltip: t('menu.onChangeTooltip'),
+      command: () => {
+        useTelemetry()?.trackUiButtonClicked({
+          button_id: 'queue_mode_option_run_on_change_selected'
+        })
+        queueMode.value = 'change'
+      }
     }
   }
-}))
+  if (!isCloud) {
+    items.instant = {
+      key: 'instant',
+      label: `${t('menu.run')} (${t('menu.instant')})`,
+      tooltip: t('menu.instantTooltip'),
+      command: () => {
+        useTelemetry()?.trackUiButtonClicked({
+          button_id: 'queue_mode_option_run_instant_selected'
+        })
+        queueMode.value = 'instant'
+      }
+    }
+  }
+  return items
+})
 
-const activeQueueModeMenuItem = computed(
-  () => queueModeMenuItemLookup.value[queueMode.value]
-)
+const activeQueueModeMenuItem = computed(() => {
+  // Fallback to disabled mode if current mode is not available (e.g., instant mode in cloud)
+  return (
+    queueModeMenuItemLookup.value[queueMode.value] ||
+    queueModeMenuItemLookup.value.disabled
+  )
+})
 const queueModeMenuItems = computed(() =>
   Object.values(queueModeMenuItemLookup.value)
 )
@@ -141,11 +159,23 @@ const hasPendingTasks = computed(
 
 const commandStore = useCommandStore()
 const queuePrompt = async (e: Event) => {
-  const commandId =
-    'shiftKey' in e && e.shiftKey
-      ? 'Comfy.QueuePromptFront'
-      : 'Comfy.QueuePrompt'
-  await commandStore.execute(commandId)
+  const isShiftPressed = 'shiftKey' in e && e.shiftKey
+  const commandId = isShiftPressed
+    ? 'Comfy.QueuePromptFront'
+    : 'Comfy.QueuePrompt'
+
+  if (batchCount.value > 1) {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'queue_run_multiple_batches_submitted'
+    })
+  }
+
+  await commandStore.execute(commandId, {
+    metadata: {
+      subscribe_to_run: false,
+      trigger_source: 'button'
+    }
+  })
 }
 </script>
 
diff --git a/src/components/actionbar/ComfyRunButton/index.ts b/src/components/actionbar/ComfyRunButton/index.ts
new file mode 100644
index 000000000..1ee49963e
--- /dev/null
+++ b/src/components/actionbar/ComfyRunButton/index.ts
@@ -0,0 +1,7 @@
+import { defineAsyncComponent } from 'vue'
+
+import { isCloud } from '@/platform/distribution/types'
+
+export default isCloud && window.__CONFIG__?.subscription_required
+  ? defineAsyncComponent(() => import('./CloudRunButtonWrapper.vue'))
+  : defineAsyncComponent(() => import('./ComfyQueueButton.vue'))
diff --git a/src/components/bottomPanel/BottomPanel.vue b/src/components/bottomPanel/BottomPanel.vue
index cffa74f76..f1705d0af 100644
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/src/components/bottomPanel/BottomPanel.vue
@@ -3,17 +3,42 @@
     <Tabs
       :key="$i18n.locale"
       v-model:value="bottomPanelStore.activeBottomPanelTabId"
+      style="--p-tabs-tablist-background: var(--comfy-menu-bg)"
     >
-      <TabList pt:tab-list="border-none">
+      <TabList
+        pt:tab-list="border-none h-full flex items-center py-2 border-b-1 border-solid"
+        class="bg-transparent"
+      >
         <div class="flex w-full justify-between">
           <div class="tabs-container">
             <Tab
               v-for="tab in bottomPanelStore.bottomPanelTabs"
               :key="tab.id"
               :value="tab.id"
-              class="border-none p-3"
+              class="m-1 mx-2 border-none"
+              :class="{
+                'tab-list-single-item':
+                  bottomPanelStore.bottomPanelTabs.length === 1
+              }"
+              :pt:root="
+                (x: TabPassThroughMethodOptions) => ({
+                  class: {
+                    'p-3 rounded-lg': true,
+                    'pointer-events-none':
+                      bottomPanelStore.bottomPanelTabs.length === 1
+                  },
+                  style: {
+                    color: 'var(--fg-color)',
+                    backgroundColor:
+                      !x.context.active ||
+                      bottomPanelStore.bottomPanelTabs.length === 1
+                        ? ''
+                        : 'var(--bg-color)'
+                  }
+                })
+              "
             >
-              <span class="font-bold">
+              <span class="font-normal">
                 {{ getTabDisplayTitle(tab) }}
               </span>
             </Tab>
@@ -56,6 +81,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Tab from 'primevue/tab'
+import type { TabPassThroughMethodOptions } from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import Tabs from 'primevue/tabs'
 import { computed } from 'vue'
@@ -95,3 +121,9 @@ const closeBottomPanel = () => {
   bottomPanelStore.activePanel = null
 }
 </script>
+
+<style scoped>
+:deep(.p-tablist-active-bar) {
+  display: none;
+}
+</style>
diff --git a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
index f32357c48..1983a4c4c 100644
--- a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
@@ -64,7 +64,6 @@ const terminalCreated = (
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
   overflow-y: hidden;
 }
 </style>
diff --git a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
index 20a518a6d..65e84da31 100644
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full bg-black">
+  <div class="h-full w-full bg-transparent">
     <p v-if="errorMessage" class="p-4 text-center">
       {{ errorMessage }}
     </p>
@@ -94,7 +94,6 @@ const terminalCreated = (
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
   overflow-y: hidden;
 }
 </style>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index fb218ab1e..6795ee97d 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -1,12 +1,13 @@
 <template>
   <div
-    class="subgraph-breadcrumb w-auto"
+    class="subgraph-breadcrumb w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
     }"
     :style="{
-      '--p-breadcrumb-gap': `${ITEM_GAP}px`,
+      '--p-breadcrumb-gap': `0px`,
+      '--p-breadcrumb-item-margin': `${ITEM_GAP / 2}px`,
       '--p-breadcrumb-item-min-width': `${MIN_WIDTH}px`,
       '--p-breadcrumb-item-padding': `${ITEM_PADDING}px`,
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
@@ -14,9 +15,10 @@
   >
     <Breadcrumb
       ref="breadcrumbRef"
-      class="bg-transparent p-0"
+      class="w-fit rounded-lg p-0"
       :model="items"
-      aria-label="Graph navigation"
+      :pt="{ item: { class: 'pointer-events-auto' } }"
+      :aria-label="$t('g.graphNavigation')"
     >
       <template #item="{ item }">
         <SubgraphBreadcrumbItem
@@ -38,6 +40,7 @@ import { computed, onUpdated, ref, watch } from 'vue'
 
 import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbItem.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
+import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
@@ -71,6 +74,9 @@ const items = computed(() => {
   const items = navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
     label: subgraph.name,
     command: () => {
+      useTelemetry()?.trackUiButtonClicked({
+        button_id: 'breadcrumb_subgraph_item_selected'
+      })
       const canvas = useCanvasStore().getCanvas()
       if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
@@ -95,6 +101,9 @@ const home = computed(() => ({
   key: 'root',
   isBlueprint: isBlueprint.value,
   command: () => {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'breadcrumb_subgraph_root_selected'
+    })
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
@@ -174,30 +183,65 @@ onUpdated(() => {
   @apply overflow-hidden;
 }
 
+:deep(.p-breadcrumb) {
+  width: 100%;
+  background-color: transparent;
+}
+
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center rounded-lg overflow-hidden;
+  @apply flex items-center overflow-hidden;
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
   /* Collapse middle items first */
   flex-shrink: 10000;
 }
 
+:deep(.p-breadcrumb-separator) {
+  display: flex;
+  padding: 0 var(--p-breadcrumb-item-margin);
+}
+
+:deep(.p-breadcrumb-item-link) {
+  padding: 0
+    calc(var(--p-breadcrumb-item-margin) + var(--p-breadcrumb-item-padding));
+}
+
+:deep(.p-breadcrumb-separator),
+:deep(.p-breadcrumb-item) {
+  @apply h-12;
+  border-top: 1px solid var(--interface-stroke);
+  border-bottom: 1px solid var(--interface-stroke);
+  background-color: var(--comfy-menu-bg);
+}
+
 :deep(.p-breadcrumb-item:has(.p-breadcrumb-item-link-icon-visible)) {
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem + 20px);
 }
 
 :deep(.p-breadcrumb-item:first-child) {
+  @apply rounded-l-lg;
   /* Then collapse the root workflow */
   flex-shrink: 5000;
+  border-left: 1px solid var(--interface-stroke);
+
+  .p-breadcrumb-item-link {
+    padding-left: var(--p-breadcrumb-item-padding);
+  }
 }
 
 :deep(.p-breadcrumb-item:last-child) {
+  @apply rounded-r-lg;
   /* Then collapse the active item */
   flex-shrink: 1;
+  border-right: 1px solid var(--interface-stroke);
 }
 
-:deep(.p-breadcrumb-item:hover),
-:deep(.p-breadcrumb-item:has(.p-breadcrumb-item-link-menu-visible)) {
-  background-color: color-mix(in srgb, var(--fg-color) 10%, transparent);
+:deep(.p-breadcrumb-item-link:hover),
+:deep(.p-breadcrumb-item-link-menu-visible) {
+  background-color: color-mix(
+    in srgb,
+    var(--fg-color) 10%,
+    var(--comfy-menu-bg)
+  ) !important;
   color: var(--fg-color);
 }
 </style>
@@ -214,7 +258,7 @@ onUpdated(() => {
   .p-breadcrumb-item:nth-last-child(3),
   .p-breadcrumb-separator:nth-last-child(2),
   .p-breadcrumb-item:nth-last-child(1) {
-    @apply block;
+    @apply flex;
   }
 }
 </style>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index c48afc676..a0c405971 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -5,8 +5,9 @@
       value: item.label,
       showDelay: 512
     }"
+    draggable="false"
     href="#"
-    class="p-breadcrumb-item-link cursor-pointer"
+    class="p-breadcrumb-item-link h-12 cursor-pointer px-2"
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
@@ -15,7 +16,7 @@
     }"
     @click="handleClick"
   >
-    <span class="p-breadcrumb-item-label">{{ item.label }}</span>
+    <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
     <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
   </a>
@@ -26,7 +27,7 @@
     :popup="true"
     :pt="{
       root: {
-        style: 'background-color: var(--comfy-menu-secondary-bg)'
+        style: 'background-color: var(--comfy-menu-bg)'
       },
       itemLink: {
         class: 'py-2'
@@ -38,7 +39,7 @@
     ref="itemInputRef"
     v-model="itemLabel"
     class="fixed z-10000 px-2 py-2 text-[.8rem]"
-    @blur="inputBlur(true)"
+    @blur="inputBlur(false)"
     @click.stop
     @keydown.enter="inputBlur(true)"
     @keydown.esc="inputBlur(false)"
@@ -240,7 +241,6 @@ const inputBlur = async (doRename: boolean) => {
 
 .p-breadcrumb-item-link {
   @apply overflow-hidden;
-  padding: var(--p-breadcrumb-item-padding);
 }
 
 .p-breadcrumb-item-label {
diff --git a/src/components/card/CardTop.vue b/src/components/card/CardTop.vue
index 6d26d5336..fb3a528b6 100644
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -54,7 +54,7 @@ const {
 }>()
 
 const topStyle = computed(() => {
-  const baseClasses = 'relative p-0'
+  const baseClasses = 'relative p-0 overflow-hidden'
 
   const ratioClasses = {
     square: 'aspect-square',
diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 625df22a0..9ed0a92b4 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -21,6 +21,8 @@
       @keyup.enter="blurInputElement"
       @keyup.escape="cancelEditing"
       @click.stop
+      @pointerdown.stop.capture
+      @pointermove.stop.capture
     />
   </div>
 </template>
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index 0e7703f13..661c5ceb8 100644
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -3,14 +3,14 @@
     <div class="flex items-center gap-2">
       <div
         class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
-        :class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
+        :class="{ 'bg-smoke-100 dark-theme:bg-smoke-800': !modelValue }"
       >
         <img
           v-if="modelValue"
           :src="modelValue"
           class="max-h-full max-w-full object-contain"
         />
-        <i v-else class="pi pi-image text-xl text-gray-400" />
+        <i v-else class="pi pi-image text-xl text-smoke-400" />
       </div>
 
       <div class="flex flex-col gap-2">
diff --git a/src/components/common/UserAvatar.test.ts b/src/components/common/UserAvatar.test.ts
index d844277b9..0c6b26e4e 100644
--- a/src/components/common/UserAvatar.test.ts
+++ b/src/components/common/UserAvatar.test.ts
@@ -56,7 +56,7 @@ describe('UserAvatar', () => {
     const avatar = wrapper.findComponent(Avatar)
     expect(avatar.exists()).toBe(true)
     expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
   })
 
   it('renders with default icon when provided photo Url is null', () => {
@@ -67,7 +67,7 @@ describe('UserAvatar', () => {
     const avatar = wrapper.findComponent(Avatar)
     expect(avatar.exists()).toBe(true)
     expect(avatar.props('image')).toBeNull()
-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
   })
 
   it('falls back to icon when image fails to load', async () => {
@@ -82,7 +82,7 @@ describe('UserAvatar', () => {
     avatar.vm.$emit('error')
     await nextTick()
 
-    expect(avatar.props('icon')).toBe('pi pi-user')
+    expect(avatar.props('icon')).toBe('icon-[lucide--user]')
   })
 
   it('uses provided ariaLabel', () => {
diff --git a/src/components/common/UserAvatar.vue b/src/components/common/UserAvatar.vue
index 8fce43d10..08f9a32da 100644
--- a/src/components/common/UserAvatar.vue
+++ b/src/components/common/UserAvatar.vue
@@ -1,7 +1,9 @@
 <template>
   <Avatar
+    class="bg-gray-200 dark-theme:bg-[var(--interface-panel-selected-surface)]"
     :image="photoUrl ?? undefined"
-    :icon="hasAvatar ? undefined : 'pi pi-user'"
+    :icon="hasAvatar ? undefined : 'icon-[lucide--user]'"
+    :pt:icon:class="{ 'size-4': !hasAvatar }"
     shape="circle"
     :aria-label="ariaLabel ?? $t('auth.login.userAvatar')"
     @error="handleImageError"
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index c64a8e19d..84e50bf62 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -36,53 +36,55 @@
     </template>
 
     <template #contentFilter>
-      <div class="relative flex flex-wrap gap-2 px-6 pt-2 pb-4">
-        <!-- Model Filter -->
-        <MultiSelect
-          v-model="selectedModelObjects"
-          v-model:search-query="modelSearchText"
-          class="w-[250px]"
-          :label="modelFilterLabel"
-          :options="modelOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--cpu]" />
-          </template>
-        </MultiSelect>
+      <div class="relative flex flex-wrap justify-between gap-2 px-6 pb-4">
+        <div class="flex flex-wrap gap-2">
+          <!-- Model Filter -->
+          <MultiSelect
+            v-model="selectedModelObjects"
+            v-model:search-query="modelSearchText"
+            class="w-[250px]"
+            :label="modelFilterLabel"
+            :options="modelOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--cpu]" />
+            </template>
+          </MultiSelect>
 
-        <!-- Use Case Filter -->
-        <MultiSelect
-          v-model="selectedUseCaseObjects"
-          :label="useCaseFilterLabel"
-          :options="useCaseOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--target]" />
-          </template>
-        </MultiSelect>
+          <!-- Use Case Filter -->
+          <MultiSelect
+            v-model="selectedUseCaseObjects"
+            :label="useCaseFilterLabel"
+            :options="useCaseOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--target]" />
+            </template>
+          </MultiSelect>
 
-        <!-- License Filter -->
-        <MultiSelect
-          v-model="selectedLicenseObjects"
-          :label="licenseFilterLabel"
-          :options="licenseOptions"
-          :show-search-box="true"
-          :show-selected-count="true"
-          :show-clear-button="true"
-        >
-          <template #icon>
-            <i class="icon-[lucide--file-text]" />
-          </template>
-        </MultiSelect>
+          <!-- Runs On Filter -->
+          <MultiSelect
+            v-model="selectedRunsOnObjects"
+            :label="runsOnFilterLabel"
+            :options="runsOnOptions"
+            :show-search-box="true"
+            :show-selected-count="true"
+            :show-clear-button="true"
+          >
+            <template #icon>
+              <i class="icon-[lucide--server]" />
+            </template>
+          </MultiSelect>
+        </div>
 
         <!-- Sort Options -->
-        <div class="absolute right-5">
+        <div>
           <SingleSelect
             v-model="sortBy"
             :label="$t('templateWorkflows.sorting', 'Sort by')"
@@ -144,7 +146,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
           >
             <template #top>
               <CardTop ratio="landscape">
@@ -178,7 +180,7 @@
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
             @mouseenter="hoveredTemplate = template.name"
             @mouseleave="hoveredTemplate = null"
             @click="onLoadWorkflow(template)"
@@ -323,7 +325,7 @@
             size="compact"
             variant="ghost"
             rounded="lg"
-            class="hover:bg-white dark-theme:hover:bg-zinc-800"
+            class="hover:bg-base-background"
           >
             <template #top>
               <CardTop ratio="square">
@@ -380,7 +382,7 @@
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -401,6 +403,8 @@ import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
@@ -410,10 +414,34 @@ import { createGridStyle } from '@/utils/gridUtil'
 
 const { t } = useI18n()
 
-const { onClose } = defineProps<{
+const { onClose: originalOnClose } = defineProps<{
   onClose: () => void
 }>()
 
+// Track session time for telemetry
+const sessionStartTime = ref<number>(0)
+const templateWasSelected = ref(false)
+
+onMounted(() => {
+  sessionStartTime.value = Date.now()
+})
+
+// Wrap onClose to track session end
+const onClose = () => {
+  if (isCloud) {
+    const timeSpentSeconds = Math.floor(
+      (Date.now() - sessionStartTime.value) / 1000
+    )
+
+    useTelemetry()?.trackTemplateLibraryClosed({
+      template_selected: templateWasSelected.value,
+      time_spent_seconds: timeSpentSeconds
+    })
+  }
+
+  originalOnClose()
+}
+
 provide(OnCloseKey, onClose)
 
 // Workflow templates store and composable
@@ -500,12 +528,12 @@ const {
   searchQuery,
   selectedModels,
   selectedUseCases,
-  selectedLicenses,
+  selectedRunsOn,
   sortBy,
   filteredTemplates,
   availableModels,
   availableUseCases,
-  availableLicenses,
+  availableRunsOn,
   filteredCount,
   totalCount,
   resetFilters
@@ -533,15 +561,15 @@ const selectedUseCaseObjects = computed({
   }
 })
 
-const selectedLicenseObjects = computed({
+const selectedRunsOnObjects = computed({
   get() {
-    return selectedLicenses.value.map((license) => ({
-      name: license,
-      value: license
+    return selectedRunsOn.value.map((runsOn) => ({
+      name: runsOn,
+      value: runsOn
     }))
   },
   set(value: { name: string; value: string }[]) {
-    selectedLicenses.value = value.map((item) => item.value)
+    selectedRunsOn.value = value.map((item) => item.value)
   }
 })
 
@@ -574,10 +602,10 @@ const useCaseOptions = computed(() =>
   }))
 )
 
-const licenseOptions = computed(() =>
-  availableLicenses.value.map((license) => ({
-    name: license,
-    value: license
+const runsOnOptions = computed(() =>
+  availableRunsOn.value.map((runsOn) => ({
+    name: runsOn,
+    value: runsOn
   }))
 )
 
@@ -606,14 +634,14 @@ const useCaseFilterLabel = computed(() => {
   }
 })
 
-const licenseFilterLabel = computed(() => {
-  if (selectedLicenseObjects.value.length === 0) {
-    return t('templateWorkflows.licenseFilter', 'License')
-  } else if (selectedLicenseObjects.value.length === 1) {
-    return selectedLicenseObjects.value[0].name
+const runsOnFilterLabel = computed(() => {
+  if (selectedRunsOnObjects.value.length === 0) {
+    return t('templateWorkflows.runsOnFilter', 'Runs On')
+  } else if (selectedRunsOnObjects.value.length === 1) {
+    return selectedRunsOnObjects.value[0].name
   } else {
-    return t('templateWorkflows.licensesSelected', {
-      count: selectedLicenseObjects.value.length
+    return t('templateWorkflows.runsOnSelected', {
+      count: selectedRunsOnObjects.value.length
     })
   }
 })
@@ -680,7 +708,7 @@ watch(
     sortBy,
     selectedModels,
     selectedUseCases,
-    selectedLicenses
+    selectedRunsOn
   ],
   () => {
     resetPagination()
@@ -698,6 +726,7 @@ const onLoadWorkflow = async (template: any) => {
       template.name,
       getEffectiveSourceModule(template)
     )
+    templateWasSelected.value = true
     onClose()
   } finally {
     loadingTemplate.value = null
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index 97b0a18d3..c709540c5 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -61,6 +61,7 @@ import { useI18n } from 'vue-i18n'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useTelemetry } from '@/platform/telemetry'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
@@ -86,18 +87,33 @@ const repoOwner = 'comfyanonymous'
 const repoName = 'ComfyUI'
 const reportContent = ref('')
 const reportOpen = ref(false)
+/**
+ * Open the error report content and track telemetry.
+ */
 const showReport = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'error_dialog_show_report_clicked'
+  })
   reportOpen.value = true
 }
 const toast = useToast()
 const { t } = useI18n()
 const systemStatsStore = useSystemStatsStore()
+const telemetry = useTelemetry()
 
 const title = computed<string>(
   () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
 )
 
+/**
+ * Open contact support flow from error dialog and track telemetry.
+ */
 const showContactSupport = async () => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'error_dialog'
+  })
   await useCommandStore().execute('Comfy.ContactSupport')
 }
 
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index c97104bdd..85a3e81ac 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -46,7 +46,12 @@
           : $t('manager.installAllMissingNodes')
       "
     />
-    <Button label="Open Manager" size="small" outlined @click="openManager" />
+    <Button
+      :label="$t('g.openManager')"
+      size="small"
+      outlined
+      @click="openManager"
+    />
   </div>
 </template>
 
diff --git a/src/components/dialog/content/SignInContent.vue b/src/components/dialog/content/SignInContent.vue
index a6bb0e890..19da83125 100644
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -89,7 +89,7 @@
           <img
             src="/assets/images/comfy-logo-mono.svg"
             class="mr-2 h-5 w-5"
-            alt="Comfy"
+            :alt="$t('g.comfy')"
           />
           {{ t('auth.login.useApiKey') }}
         </Button>
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index 402df3ac0..f134aba5e 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -43,8 +43,10 @@ import Tag from 'primevue/tag'
 import { onBeforeUnmount, ref } from 'vue'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
 
 const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
 
 const {
   amount,
@@ -61,8 +63,11 @@ const didClickBuyNow = ref(false)
 const loading = ref(false)
 
 const handleBuyNow = async () => {
+  const creditAmount = editable ? customAmount.value : amount
+  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+
   loading.value = true
-  await authActions.purchaseCredits(editable ? customAmount.value : amount)
+  await authActions.purchaseCredits(creditAmount)
   loading.value = false
   didClickBuyNow.value = true
 }
diff --git a/src/components/dialog/content/error/FindIssueButton.vue b/src/components/dialog/content/error/FindIssueButton.vue
index e4c32b471..20f4f6489 100644
--- a/src/components/dialog/content/error/FindIssueButton.vue
+++ b/src/components/dialog/content/error/FindIssueButton.vue
@@ -11,6 +11,8 @@
 import Button from 'primevue/button'
 import { computed } from 'vue'
 
+import { useTelemetry } from '@/platform/telemetry'
+
 const props = defineProps<{
   errorMessage: string
   repoOwner: string
@@ -19,7 +21,13 @@ const props = defineProps<{
 
 const queryString = computed(() => props.errorMessage + ' is:issue')
 
+/**
+ * Open GitHub issues search and track telemetry.
+ */
 const openGitHubIssues = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'error_dialog_find_existing_issues_clicked'
+  })
   const query = encodeURIComponent(queryString.value)
   const url = `https://github.com/${props.repoOwner}/${props.repoName}/issues?q=${query}`
   window.open(url, '_blank')
diff --git a/src/components/dialog/content/setting/CreditsPanel.vue b/src/components/dialog/content/setting/CreditsPanel.vue
index fd1c537d7..614312ad4 100644
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -15,7 +15,7 @@
           <UserCredit text-class="text-3xl font-bold" />
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
-            v-else
+            v-else-if="isActiveSubscription"
             :label="$t('credits.purchaseCredits')"
             :loading="loading"
             @click="handlePurchaseCreditsClick"
@@ -92,6 +92,13 @@
           icon="pi pi-question-circle"
           @click="handleFaqClick"
         />
+        <Button
+          :label="$t('subscription.partnerNodesCredits')"
+          text
+          severity="secondary"
+          icon="pi pi-question-circle"
+          @click="handleOpenPartnerNodesInfo"
+        />
         <Button
           :label="$t('credits.messageSupport')"
           text
@@ -116,6 +123,8 @@ import { computed, ref, watch } from 'vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -132,6 +141,8 @@ const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
 const commandStore = useCommandStore()
+const telemetry = useTelemetry()
+const { isActiveSubscription } = useSubscription()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 
@@ -153,6 +164,8 @@ watch(
 )
 
 const handlePurchaseCreditsClick = () => {
+  // Track purchase credits entry from Settings > Credits panel
+  useTelemetry()?.trackAddApiCreditButtonClicked()
   dialogService.showTopUpCreditsDialog()
 }
 
@@ -161,6 +174,11 @@ const handleCreditsHistoryClick = async () => {
 }
 
 const handleMessageSupport = async () => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'credits_panel'
+  })
   await commandStore.execute('Comfy.ContactSupport')
 }
 
@@ -168,5 +186,12 @@ const handleFaqClick = () => {
   window.open('https://docs.comfy.org/tutorials/api-nodes/faq', '_blank')
 }
 
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    '_blank'
+  )
+}
+
 const creditHistory = ref<CreditHistoryItemData[]>([])
 </script>
diff --git a/src/components/dialog/content/setting/KeybindingPanel.vue b/src/components/dialog/content/setting/KeybindingPanel.vue
index 6117d5ea8..861ec9bc6 100644
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -89,7 +89,7 @@
           ref="keybindingInput"
           class="mb-2 text-center"
           :model-value="newBindingKeyCombo?.toString() ?? ''"
-          placeholder="Press keys for new binding"
+          :placeholder="$t('g.pressKeysForNewBinding')"
           autocomplete="off"
           fluid
           @keydown.stop.prevent="captureKeybinding"
diff --git a/src/components/dialog/content/setting/UsageLogsTable.vue b/src/components/dialog/content/setting/UsageLogsTable.vue
index ba7065870..f73158a93 100644
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -50,7 +50,7 @@
                 <div class="font-semibold">
                   {{ data.params?.api_name || 'API' }}
                 </div>
-                <div class="text-sm text-gray-400">
+                <div class="text-sm text-smoke-400">
                   {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
                 </div>
               </div>
@@ -96,6 +96,7 @@ import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import { useTelemetry } from '@/platform/telemetry'
 import type { AuditLog } from '@/services/customerEventsService'
 import {
   EventType,
@@ -159,6 +160,9 @@ const loadEvents = async () => {
       if (response.totalPages) {
         pagination.value.totalPages = response.totalPages
       }
+
+      // Check if a pending top-up has completed
+      useTelemetry()?.checkForCompletedTopup(response.events)
     } else {
       error.value = customerEventService.error.value || 'Failed to load events'
     }
diff --git a/src/components/dialog/content/setting/UserPanel.vue b/src/components/dialog/content/setting/UserPanel.vue
index b18a6b37c..bdaa1400d 100644
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -67,10 +67,10 @@
           />
           <Button
             v-if="!isApiKeyLogin"
-            class="w-32"
+            class="w-fit"
+            variant="text"
             severity="danger"
             :label="$t('auth.deleteAccount.deleteAccount')"
-            icon="pi pi-trash"
             @click="handleDeleteAccount"
           />
         </div>
@@ -78,7 +78,7 @@
 
       <!-- Login Section -->
       <div v-else class="flex flex-col gap-4">
-        <p class="text-gray-600">
+        <p class="text-smoke-600">
           {{ $t('auth.login.title') }}
         </p>
 
diff --git a/src/components/dialog/content/signin/SignUpForm.vue b/src/components/dialog/content/signin/SignUpForm.vue
index e59b2e461..90a526363 100644
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -27,28 +27,6 @@
 
     <PasswordFields />
 
-    <!-- Personal Data Consent Checkbox -->
-    <FormField
-      v-slot="$field"
-      name="personalDataConsent"
-      class="flex items-center gap-2"
-    >
-      <Checkbox
-        input-id="comfy-org-sign-up-personal-data-consent"
-        :binary="true"
-        :invalid="$field.invalid"
-      />
-      <label
-        for="comfy-org-sign-up-personal-data-consent"
-        class="text-base font-medium opacity-80"
-      >
-        {{ t('auth.signup.personalDataConsentLabel') }}
-      </label>
-      <small v-if="$field.error" class="-mt-4 text-red-500">{{
-        $field.error.message
-      }}</small>
-    </FormField>
-
     <!-- Submit Button -->
     <Button
       type="submit"
@@ -63,7 +41,6 @@ import type { FormSubmitEvent } from '@primevue/forms'
 import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
 import InputText from 'primevue/inputtext'
 import { useI18n } from 'vue-i18n'
 
diff --git a/src/components/dialog/header/ComfyOrgHeader.vue b/src/components/dialog/header/ComfyOrgHeader.vue
index 8a8a0afa2..d4fc3a458 100644
--- a/src/components/dialog/header/ComfyOrgHeader.vue
+++ b/src/components/dialog/header/ComfyOrgHeader.vue
@@ -3,7 +3,7 @@
   <div class="px-2 py-4">
     <img
       src="/assets/images/comfy-logo-single.svg"
-      alt="ComfyOrg Logo"
+      :alt="$t('g.comfyOrgLogoAlt')"
       width="32"
       height="32"
     />
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index a9819b491..a8ecbaab2 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -2,28 +2,48 @@
   <!-- Load splitter overlay only after comfyApp is ready. -->
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
-  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady && betaMenuEnabled">
-    <template v-if="!workspaceStore.focusMode" #side-bar-panel>
+  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
+    <template v-if="showUI" #workflow-tabs>
+      <TryVueNodeBanner />
+      <div
+        v-if="workflowTabsPosition === 'Topbar'"
+        class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
+      >
+        <!-- Native drag area for Electron -->
+        <div
+          v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
+          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
+        />
+        <div class="flex h-full items-center">
+          <WorkflowTabs />
+          <TopbarBadges />
+        </div>
+      </div>
+    </template>
+    <template v-if="showUI" #side-toolbar>
       <SideToolbar />
     </template>
-    <template v-if="!workspaceStore.focusMode" #bottom-panel>
+    <template v-if="showUI" #side-bar-panel>
+      <div
+        class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
+      >
+        <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
+      </div>
+    </template>
+    <template v-if="showUI" #topmenu>
+      <TopMenuSection />
+    </template>
+    <template v-if="showUI" #bottom-panel>
       <BottomPanel />
     </template>
     <template #graph-canvas-panel>
-      <div class="pointer-events-auto absolute top-0 left-0 w-auto max-w-full">
-        <SecondRowWorkflowTabs
-          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
-        />
-      </div>
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
-
       <MiniMap
-        v-if="comfyAppReady && minimapEnabled"
+        v-if="comfyAppReady && minimapEnabled && showUI"
         class="pointer-events-auto"
       />
     </template>
   </LiteGraphCanvasSplitterOverlay>
-  <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
   <canvas
     id="graph-canvas"
     ref="canvasRef"
@@ -81,7 +101,9 @@ import {
 } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
+import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
+import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
@@ -90,7 +112,8 @@ import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeOptions from '@/components/graph/selectionToolbox/NodeOptions.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
-import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
@@ -129,6 +152,9 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isNativeWindow } from '@/utils/envUtil'
+
+import TryVueNodeBanner from '../topbar/TryVueNodeBanner.vue'
 
 const emit = defineEmits<{
   ready: []
@@ -160,6 +186,12 @@ const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
 const selectionToolboxEnabled = computed(() =>
   settingStore.get('Comfy.Canvas.SelectionToolbox')
 )
+const activeSidebarTab = computed(() => {
+  return workspaceStore.sidebarTab.activeSidebarTab
+})
+const showUI = computed(
+  () => !workspaceStore.focusMode && betaMenuEnabled.value
+)
 
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 
@@ -392,9 +424,7 @@ onMounted(async () => {
       throw error
     }
   }
-  CORE_SETTINGS.forEach((setting) => {
-    settingStore.addSetting(setting)
-  })
+  CORE_SETTINGS.forEach(settingStore.addSetting)
 
   await newUserService().initializeIfNewUser(settingStore)
 
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index b4172cdcc..eb665a249 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -10,8 +10,10 @@
     ></div>
 
     <ButtonGroup
-      class="absolute right-2 bottom-2 z-[1200] flex-row gap-1 border-[1px] border-node-border bg-interface-panel-surface p-2"
-      :style="stringifiedMinimapStyles.buttonGroupStyles"
+      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-[var(--interface-stroke)] bg-interface-panel-surface p-2"
+      :style="{
+        ...stringifiedMinimapStyles.buttonGroupStyles
+      }"
       @wheel="canvasInteractions.handleWheel"
     >
       <CanvasModeSelector
@@ -61,7 +63,7 @@
         data-testid="toggle-minimap-button"
         :style="stringifiedMinimapStyles.buttonStyles"
         :class="minimapButtonClass"
-        @click="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
+        @click="onMinimapToggleClick"
       >
         <template #icon>
           <i class="icon-[lucide--map] h-4 w-4" />
@@ -82,7 +84,7 @@
         :aria-label="linkVisibilityAriaLabel"
         data-testid="toggle-link-visibility-button"
         :style="stringifiedMinimapStyles.buttonStyles"
-        @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
+        @click="onLinkVisibilityToggleClick"
       >
         <template #icon>
           <i class="icon-[lucide--route-off] h-4 w-4" />
@@ -101,6 +103,7 @@ import { useI18n } from 'vue-i18n'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
@@ -218,6 +221,26 @@ onMounted(() => {
   canvasStore.initScaleSync()
 })
 
+/**
+ * Track minimap toggle button click and execute the command.
+ */
+const onMinimapToggleClick = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_menu_minimap_toggle_clicked'
+  })
+  void commandStore.execute('Comfy.Canvas.ToggleMinimap')
+}
+
+/**
+ * Track hide/show links button click and execute the command.
+ */
+const onLinkVisibilityToggleClick = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_menu_hide_links_toggle_clicked'
+  })
+  void commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')
+}
+
 onBeforeUnmount(() => {
   canvasStore.cleanupScaleSync()
 })
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index 8170cdf95..19cb7a315 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="visible"
-    class="absolute right-2 bottom-[66px] z-1300 flex w-[250px] justify-center border-0! bg-inherit!"
+    class="absolute right-0 bottom-[62px] z-1300 flex w-[250px] justify-center border-0! bg-inherit!"
   >
     <div
       class="w-4/5 rounded-lg border border-node-border bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
@@ -148,6 +148,6 @@ watch(
 </script>
 <style>
 .zoomInputContainer:focus-within {
-  border: 1px solid var(--color-pure-white);
+  border: 1px solid var(--color-white);
 }
 </style>
diff --git a/src/components/graph/selectionToolbox/BypassButton.test.ts b/src/components/graph/selectionToolbox/BypassButton.test.ts
index c966e180a..1f8a5d34f 100644
--- a/src/components/graph/selectionToolbox/BypassButton.test.ts
+++ b/src/components/graph/selectionToolbox/BypassButton.test.ts
@@ -92,7 +92,7 @@ describe('BypassButton', () => {
     const button = wrapper.find('button')
 
     expect(button.classes()).not.toContain(
-      'dark-theme:[&:not(:active)]:!bg-[#262729]'
+      'dark-theme:[&:not(:active)]:!bg-charcoal-600'
     )
   })
 
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 84882a285..00c4fbe39 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -7,11 +7,11 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:bg-[#E7E6E6] hover:dark-theme:bg-charcoal-600"
+    class="hover:bg-secondary-background"
     @click="toggleBypass"
   >
     <template #icon>
-      <i class="icon-[lucide--ban] h-4 w-4" />
+      <i class="icon-[lucide--redo-dot] h-4 w-4" />
     </template>
   </Button>
 </template>
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index e37568a4d..8e5666b34 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -4,7 +4,7 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="size-8 bg-[#31B9F4] !p-0 dark-theme:bg-[#0B8CE9]"
+    class="size-8 bg-azure-400 !p-0 dark-theme:bg-azure-600"
     text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue
index cb771c1f0..ed0e8e6cb 100644
--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -7,7 +7,7 @@
     data-testid="info-button"
     text
     severity="secondary"
-    @click="toggleHelp"
+    @click="onInfoClick"
   >
     <i class="icon-[lucide--info] h-4 w-4" />
   </Button>
@@ -17,6 +17,17 @@
 import Button from 'primevue/button'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useTelemetry } from '@/platform/telemetry'
 
 const { showNodeHelp: toggleHelp } = useSelectionState()
+
+/**
+ * Track node info button click and toggle node help.
+ */
+const onInfoClick = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'selection_toolbox_node_info_opened'
+  })
+  toggleHelp()
+}
 </script>
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index 57e6595d7..fb1f8c01a 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="option.type === 'divider'"
-    class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
+    class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
   />
   <div
     v-else
@@ -27,9 +27,9 @@
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
       :class="{
-        'rounded-4xl bg-[#31B9F4] dark-theme:bg-[#0B8CE9]':
+        'rounded-4xl bg-azure-400 dark-theme:bg-azure-600':
           option.badge === 'new',
-        'rounded-4xl bg-[#9C9EAB] dark-theme:bg-[#000]':
+        'rounded-4xl bg-slate-100 dark-theme:bg-black':
           option.badge === 'deprecated',
         'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
       }"
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index fd376df97..12c1a8571 100644
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -20,15 +20,15 @@
         :key="subOption.label"
         :class="
           isColorSubmenu
-            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            ? 'w-7 h-7 flex items-center justify-center hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
         "
         :title="subOption.label"
         @click="handleSubmenuClick(subOption)"
       >
         <div
           v-if="subOption.color"
-          class="h-5 w-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
+          class="h-5 w-5 rounded-full border border-smoke-300 dark-theme:border-zinc-600"
           :style="{ backgroundColor: subOption.color }"
         />
         <template v-else-if="!subOption.color">
diff --git a/src/components/graph/selectionToolbox/VerticalDivider.vue b/src/components/graph/selectionToolbox/VerticalDivider.vue
index 0d5587fb2..ac6768a2c 100644
--- a/src/components/graph/selectionToolbox/VerticalDivider.vue
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -1,3 +1,5 @@
 <template>
-  <div class="h-6 w-px self-center bg-gray-300/10 dark-theme:bg-gray-600/10" />
+  <div
+    class="h-6 w-px self-center bg-smoke-300/10 dark-theme:bg-smoke-600/10"
+  />
 </template>
diff --git a/src/components/graph/widgets/ChatHistoryWidget.vue b/src/components/graph/widgets/ChatHistoryWidget.vue
index 05c251511..37bb8a266 100644
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -13,7 +13,7 @@
       >
         <div class="mb-1 flex justify-end">
           <div
-            class="max-w-[80%] rounded-xl bg-gray-300 px-4 py-1 text-right dark-theme:bg-gray-800"
+            class="max-w-[80%] rounded-xl bg-smoke-300 px-4 py-1 text-right dark-theme:bg-smoke-800"
           >
             <div class="text-[12px] break-words">{{ item.prompt }}</div>
           </div>
@@ -26,7 +26,7 @@
             "
             text
             rounded
-            class="h-4! w-4! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
+            class="h-4! w-4! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
             pt:icon:class="text-xs!"
             :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
             :aria-label="
@@ -75,7 +75,7 @@ let promptInput = findPromptInput()
 const previousPromptInput = ref<string | null>(null)
 
 const getPreviousResponseId = (index: number) =>
-  index > 0 ? parsedHistory.value[index - 1]?.response_id ?? '' : ''
+  index > 0 ? (parsedHistory.value[index - 1]?.response_id ?? '') : ''
 
 const storePromptInput = () => {
   promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index e28920018..f20aac370 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -143,8 +143,8 @@ onMounted(() => {
     widget.options.selectOn ?? ['focus', 'click'],
     () => {
       const lgCanvas = canvasStore.canvas
-      lgCanvas?.selectNode(widget.node)
-      lgCanvas?.bringToFront(widget.node)
+      lgCanvas?.selectNode(widgetState.widget.node)
+      lgCanvas?.bringToFront(widgetState.widget.node)
     }
   )
 })
diff --git a/src/components/graph/widgets/MultiSelectWidget.vue b/src/components/graph/widgets/MultiSelectWidget.vue
index 611743385..14936fca3 100644
--- a/src/components/graph/widgets/MultiSelectWidget.vue
+++ b/src/components/graph/widgets/MultiSelectWidget.vue
@@ -8,6 +8,9 @@
       :max-selected-labels="3"
       :display="display"
       class="w-full"
+      :pt="{
+        dropdownIcon: 'text-button-icon'
+      }"
     />
   </div>
 </template>
diff --git a/src/components/graph/widgets/TextPreviewWidget.vue b/src/components/graph/widgets/TextPreviewWidget.vue
index 33ab74874..68c2c0955 100644
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/src/components/graph/widgets/TextPreviewWidget.vue
@@ -27,7 +27,33 @@ const props = defineProps<{
 
 const executionStore = useExecutionStore()
 const isParentNodeExecuting = ref(true)
-const formattedText = computed(() => nl2br(linkifyHtml(modelValue.value)))
+const formattedText = computed(() => {
+  const src = modelValue.value
+  // Turn [[label|url]] into placeholders to avoid interfering with linkifyHtml
+  const tokens: { label: string; url: string }[] = []
+  const holed = src.replace(
+    /\[\[([^|\]]+)\|([^\]]+)\]\]/g,
+    (_m, label, url) => {
+      tokens.push({ label: String(label), url: String(url) })
+      return `__LNK${tokens.length - 1}__`
+    }
+  )
+
+  // Keep current behavior (auto-link bare URLs + \n -> <br>)
+  let html = nl2br(linkifyHtml(holed))
+
+  // Restore placeholders as <a>...</a> (minimal escaping + http default)
+  html = html.replace(/__LNK(\d+)__/g, (_m, i) => {
+    const { label, url } = tokens[+i]
+    const safeHref = url.replace(/"/g, '&quot;')
+    const safeLabel = label.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    return /^https?:\/\//i.test(url)
+      ? `<a href="${safeHref}" target="_blank" rel="noopener noreferrer">${safeLabel}</a>`
+      : safeLabel
+  })
+
+  return html
+})
 
 let parentNodeId: NodeId | null = null
 onMounted(() => {
diff --git a/src/components/graph/widgets/chatHistory/CopyButton.vue b/src/components/graph/widgets/chatHistory/CopyButton.vue
index 933a1b921..4a44d05ce 100644
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ b/src/components/graph/widgets/chatHistory/CopyButton.vue
@@ -5,7 +5,7 @@
     "
     text
     rounded
-    class="h-4! w-6! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
+    class="h-4! w-6! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
     pt:icon:class="text-xs!"
     :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
     :aria-label="
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index bfa1cbc96..e028a3eb1 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="help-center-menu" role="menu" aria-label="Help Center Menu">
+  <div
+    class="help-center-menu"
+    role="menu"
+    :aria-label="$t('helpCenter.helpFeedback')"
+  >
     <!-- Main Menu Items -->
     <nav class="help-menu-section" role="menubar">
       <button
@@ -68,7 +72,11 @@
       <h3 class="section-description">{{ $t('helpCenter.whatsNew') }}</h3>
 
       <!-- Release Items -->
-      <div v-if="hasReleases" role="group" aria-label="Recent releases">
+      <div
+        v-if="hasReleases"
+        role="group"
+        :aria-label="$t('helpCenter.recentReleases')"
+      >
         <article
           v-for="release in releaseStore.recentReleases"
           :key="release.id || release.version"
@@ -130,13 +138,14 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -188,6 +197,7 @@ const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
+const telemetry = useTelemetry()
 
 // Emits
 const emit = defineEmits<{
@@ -199,6 +209,7 @@ const isSubmenuVisible = ref(false)
 const submenuRef = ref<HTMLElement | null>(null)
 const submenuStyle = ref<CSSProperties>({})
 let hoverTimeout: number | null = null
+const openedAt = ref<number>(Date.now())
 
 // Computed
 const hasReleases = computed(() => releaseStore.releases.length > 0)
@@ -218,6 +229,7 @@ const moreItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.desktopUserGuide'),
       visible: isElectron(),
       action: () => {
+        trackResourceClick('docs', true)
         const docsUrl =
           electronAPI().getPlatform() === 'darwin'
             ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
@@ -273,6 +285,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-book',
       label: t('helpCenter.docs'),
       action: () => {
+        trackResourceClick('docs', true)
         openExternalLink(EXTERNAL_LINKS.DOCS)
         emit('close')
       }
@@ -283,6 +296,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-discord',
       label: 'Discord',
       action: () => {
+        trackResourceClick('discord', true)
         openExternalLink(EXTERNAL_LINKS.DISCORD)
         emit('close')
       }
@@ -293,6 +307,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-github',
       label: t('helpCenter.github'),
       action: () => {
+        trackResourceClick('github', true)
         openExternalLink(EXTERNAL_LINKS.GITHUB)
         emit('close')
       }
@@ -303,6 +318,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: 'pi pi-question-circle',
       label: t('helpCenter.helpFeedback'),
       action: () => {
+        trackResourceClick('help_feedback', false)
         void commandStore.execute('Comfy.ContactSupport')
         emit('close')
       }
@@ -318,6 +334,7 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.managerExtension'),
       showRedDot: shouldShowManagerRedDot.value,
       action: async () => {
+        trackResourceClick('manager', false)
         await useManagerState().openManager({
           initialTab: ManagerTab.All,
           showToastOnLegacyError: false
@@ -341,6 +358,23 @@ const menuItems = computed<MenuItem[]>(() => {
 })
 
 // Utility Functions
+const trackResourceClick = (
+  resourceType:
+    | 'docs'
+    | 'discord'
+    | 'github'
+    | 'help_feedback'
+    | 'manager'
+    | 'release_notes',
+  isExternal: boolean
+): void => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: resourceType,
+    is_external: isExternal,
+    source: 'help_center'
+  })
+}
+
 const openExternalLink = (url: string): void => {
   window.open(url, '_blank', 'noopener,noreferrer')
 }
@@ -496,6 +530,7 @@ const onReinstall = (): void => {
 }
 
 const onReleaseClick = (release: ReleaseNote): void => {
+  trackResourceClick('release_notes', true)
   void releaseStore.handleShowChangelog(release.version)
   const versionAnchor = formatVersionAnchor(release.version)
   const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
@@ -504,6 +539,7 @@ const onReleaseClick = (release: ReleaseNote): void => {
 }
 
 const onUpdate = (_: ReleaseNote): void => {
+  trackResourceClick('docs', true)
   openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
   emit('close')
 }
@@ -518,10 +554,16 @@ const getChangelogUrl = (): string => {
 
 // Lifecycle
 onMounted(async () => {
+  telemetry?.trackHelpCenterOpened({ source: 'sidebar' })
   if (!hasReleases.value) {
     await releaseStore.fetchReleases()
   }
 })
+
+onBeforeUnmount(() => {
+  const timeSpentSeconds = Math.round((Date.now() - openedAt.value) / 1000)
+  telemetry?.trackHelpCenterClosed({ time_spent_seconds: timeSpentSeconds })
+})
 </script>
 
 <style scoped>
diff --git a/src/components/icons/ComfyLogo.vue b/src/components/icons/ComfyLogo.vue
new file mode 100644
index 000000000..493e2275d
--- /dev/null
+++ b/src/components/icons/ComfyLogo.vue
@@ -0,0 +1,37 @@
+<template>
+  <svg
+    :class="iconClass"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.8193 0.600586C15.1248 0.600586 15.3296 0.70893 15.459 0.881836C15.5914 1.05888 15.6471 1.33774 15.5527 1.66895L14.8037 4.30176C14.7063 4.64386 14.4729 4.97024 14.1641 5.21191C13.8544 5.45415 13.496 5.58984 13.1699 5.58984H13.1689L9.5791 5.59668H7.90625C7.52654 5.59668 7.19496 5.84986 7.09082 6.21289L5.69434 11.0889C5.63007 11.3133 5.66134 11.5534 5.77734 11.7529L5.83203 11.8359C5.99177 12.0491 6.24252 12.1758 6.50977 12.1758H6.51074L8.88281 12.1709H11.4971C11.7643 12.171 11.9541 12.254 12.084 12.3906L12.1357 12.4521C12.2685 12.6295 12.3249 12.9089 12.2305 13.2402L11.4805 15.8721C11.383 16.2144 11.1498 16.5415 10.8408 16.7832C10.5314 17.0252 10.1736 17.161 9.84766 17.1611H9.84668L6.25684 17.168H3.64258C3.33762 17.1679 3.13349 17.0588 3.00391 16.8857C2.87135 16.7087 2.81482 16.43 2.90918 16.0986L3.39551 14.3887C3.46841 14.1327 3.41794 13.8576 3.25879 13.6445V13.6436C3.09901 13.4303 2.84745 13.3037 2.58008 13.3037H1.18066C0.875088 13.3037 0.670398 13.1953 0.541016 13.0225C0.408483 12.8451 0.351891 12.5655 0.446289 12.2344L2.11914 6.38965L2.30371 5.74707V5.74609C2.40139 5.40341 2.63456 5.07671 2.94336 4.83496C3.25302 4.59258 3.61143 4.45705 3.9375 4.45703H5.6123C5.94484 4.45703 6.24083 4.26316 6.37891 3.9707L6.42773 3.83984L6.98145 1.89551C7.07894 1.55317 7.31212 1.22614 7.62109 0.984375C7.93074 0.742127 8.2892 0.606445 8.61523 0.606445H8.61621L12.1982 0.600586H14.8193Z"
+      v-bind="attributes"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+  mode?: 'outline' | 'fill'
+}
+const {
+  size = 16,
+  color = 'currentColor',
+  mode = 'outline',
+  class: className
+} = defineProps<Props>()
+const iconClass = computed(() => className || '')
+const attributes = computed(() => ({
+  stroke: mode === 'outline' ? color : undefined,
+  strokeWidth: mode === 'outline' ? 1 : undefined,
+  fill: mode === 'fill' ? color : 'none'
+}))
+</script>
diff --git a/src/components/input/MultiSelect.accessibility.stories.ts b/src/components/input/MultiSelect.accessibility.stories.ts
index 716bfab0f..3decd2a21 100644
--- a/src/components/input/MultiSelect.accessibility.stories.ts
+++ b/src/components/input/MultiSelect.accessibility.stories.ts
@@ -119,12 +119,12 @@ export const KeyboardNavigationDemo: Story = {
     },
     template: `
       <div class="space-y-4 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
             Use your keyboard to navigate this MultiSelect:
           </p>
-          <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
+          <ol class="text-sm text-smoke-600 list-decimal list-inside space-y-1">
             <li><strong>Tab</strong> to focus the dropdown</li>
             <li><strong>Enter/Space</strong> to open dropdown</li>
             <li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -134,11 +134,11 @@ export const KeyboardNavigationDemo: Story = {
         </div>
 
         <div class="space-y-2">
-          <label class="block text-sm font-medium text-gray-700">
+          <label class="block text-sm font-medium text-smoke-700">
             Select Frameworks (Keyboard Navigation Test)
           </label>
           <MultiSelect v-bind="args" class="w-80" />
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-smoke-500">
             Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
           </p>
         </div>
@@ -186,10 +186,10 @@ export const ScreenReaderFriendly: Story = {
       <div class="space-y-6 p-4">
         <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-gray-600 mb-2">
+          <p class="text-sm text-smoke-600 mb-2">
             These dropdowns have proper ARIA attributes and labels for screen readers:
           </p>
-          <ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
+          <ul class="text-sm text-smoke-600 list-disc list-inside space-y-1">
             <li><code>role="combobox"</code> identifies as dropdown</li>
             <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
             <li><code>aria-expanded</code> shows open/closed state</li>
@@ -200,7 +200,7 @@ export const ScreenReaderFriendly: Story = {
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">
+            <label class="block text-sm font-medium text-smoke-700">
               Color Preferences
             </label>
             <MultiSelect
@@ -211,13 +211,13 @@ export const ScreenReaderFriendly: Story = {
               :show-clear-button="true"
               class="w-full"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               {{ selectedColors.length }} color(s) selected
             </p>
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">
+            <label class="block text-sm font-medium text-smoke-700">
               Size Preferences
             </label>
             <MultiSelect
@@ -228,7 +228,7 @@ export const ScreenReaderFriendly: Story = {
               :show-search-box="true"
               class="w-full"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               {{ selectedSizes.length }} size(s) selected
             </p>
           </div>
@@ -259,25 +259,25 @@ export const FocusManagement: Story = {
       <div class="space-y-4 p-4">
         <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
             Test focus behavior with multiple form elements:
           </p>
         </div>
 
         <div class="space-y-4">
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
               Before MultiSelect
             </label>
             <input
               type="text"
               placeholder="Previous field"
-              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
               MultiSelect (Test Focus Ring)
             </label>
             <MultiSelect
@@ -290,13 +290,13 @@ export const FocusManagement: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 mb-1">
               After MultiSelect
             </label>
             <input
               type="text"
               placeholder="Next field"
-              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
@@ -307,7 +307,7 @@ export const FocusManagement: Story = {
           </button>
         </div>
 
-        <div class="text-sm text-gray-600 mt-4">
+        <div class="text-sm text-smoke-600 mt-4">
           <strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
         </div>
       </div>
@@ -319,7 +319,7 @@ export const AccessibilityChecklist: Story = {
   render: () => ({
     template: `
       <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
           <h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -366,9 +366,9 @@ export const AccessibilityChecklist: Story = {
             </div>
           </div>
 
-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
             <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-300">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-300">
               Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
               If you can successfully navigate and make selections, the accessibility implementation is working!
             </p>
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 1469d0f86..851439a3a 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -62,7 +62,7 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
+      <span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
         {{ label }}
       </span>
       <span
@@ -242,8 +242,8 @@ const pt = computed(() => ({
     )
   },
   listContainer: () => ({
-    style: { maxHeight: listMaxHeight },
-    class: 'overflow-y-auto scrollbar-hide'
+    style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
+    class: 'scrollbar-custom'
   }),
   list: {
     class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
diff --git a/src/components/input/SingleSelect.accessibility.stories.ts b/src/components/input/SingleSelect.accessibility.stories.ts
index cc58466d1..b671ae59c 100644
--- a/src/components/input/SingleSelect.accessibility.stories.ts
+++ b/src/components/input/SingleSelect.accessibility.stories.ts
@@ -101,12 +101,12 @@ export const KeyboardNavigationDemo: Story = {
     },
     template: `
       <div class="space-y-6 p-4">
-        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
             Use your keyboard to navigate these SingleSelect dropdowns:
           </p>
-          <ol class="text-sm text-gray-600 dark-theme:text-gray-300 list-decimal list-inside space-y-1">
+          <ol class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-decimal list-inside space-y-1">
             <li><strong>Tab</strong> to focus the dropdown</li>
             <li><strong>Enter/Space</strong> to open dropdown</li>
             <li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -117,7 +117,7 @@ export const KeyboardNavigationDemo: Story = {
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
               Sort Order
             </label>
             <SingleSelect
@@ -126,13 +126,13 @@ export const KeyboardNavigationDemo: Story = {
               label="Choose sort order"
               class="w-full"
             />
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-smoke-500">
               Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
             </p>
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
               Task Priority (With Icon)
             </label>
             <SingleSelect
@@ -147,7 +147,7 @@ export const KeyboardNavigationDemo: Story = {
                 </svg>
               </template>
             </SingleSelect>
-            <p class="text-xs text-gray-500">
+            <p class="text-xs text-smoke-500">
               Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
             </p>
           </div>
@@ -191,10 +191,10 @@ export const ScreenReaderFriendly: Story = {
       <div class="space-y-6 p-4">
         <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
           <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-2">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-2">
             These dropdowns have proper ARIA attributes and labels for screen readers:
           </p>
-          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 list-disc list-inside space-y-1">
+          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-disc list-inside space-y-1">
             <li><code>role="combobox"</code> identifies as dropdown</li>
             <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
             <li><code>aria-expanded</code> shows open/closed state</li>
@@ -205,7 +205,7 @@ export const ScreenReaderFriendly: Story = {
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="language-label">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="language-label">
               Preferred Language
             </label>
             <SingleSelect
@@ -215,13 +215,13 @@ export const ScreenReaderFriendly: Story = {
               class="w-full"
               aria-labelledby="language-label"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
             </p>
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="theme-label">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="theme-label">
               Interface Theme
             </label>
             <SingleSelect
@@ -231,7 +231,7 @@ export const ScreenReaderFriendly: Story = {
               class="w-full"
               aria-labelledby="theme-label"
             />
-            <p class="text-xs text-gray-500" aria-live="polite">
+            <p class="text-xs text-smoke-500" aria-live="polite">
               Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
             </p>
           </div>
@@ -239,7 +239,7 @@ export const ScreenReaderFriendly: Story = {
 
         <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
           <h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
-          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 space-y-1">
+          <ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 space-y-1">
             <li>• Listen for role announcements when focusing</li>
             <li>• Verify dropdown state changes are announced</li>
             <li>• Check that selected values are spoken clearly</li>
@@ -299,7 +299,7 @@ export const FormIntegration: Story = {
       <div class="max-w-2xl mx-auto p-6">
         <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
           <h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
-          <p class="text-sm text-gray-600 dark-theme:text-gray-300">
+          <p class="text-sm text-smoke-600 dark-theme:text-smoke-300">
             Test keyboard navigation through a complete form with SingleSelect components.
             Tab order should be logical and all elements should be accessible.
           </p>
@@ -307,19 +307,19 @@ export const FormIntegration: Story = {
 
         <form @submit.prevent="handleSubmit" class="space-y-6">
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Title *
             </label>
             <input
               type="text"
               required
               placeholder="Enter a title"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Category *
             </label>
             <SingleSelect
@@ -332,7 +332,7 @@ export const FormIntegration: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Status
             </label>
             <SingleSelect
@@ -344,7 +344,7 @@ export const FormIntegration: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Assignee
             </label>
             <SingleSelect
@@ -356,13 +356,13 @@ export const FormIntegration: Story = {
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+            <label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
               Description
             </label>
             <textarea
               rows="4"
               placeholder="Enter description"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
@@ -375,16 +375,16 @@ export const FormIntegration: Story = {
             </button>
             <button
               type="button"
-              class="px-4 py-2 bg-gray-300 dark-theme:bg-gray-600 text-gray-700 dark-theme:text-gray-200 rounded-md hover:bg-gray-400 dark-theme:hover:bg-gray-500 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+              class="px-4 py-2 bg-smoke-300 dark-theme:bg-smoke-600 text-smoke-700 dark-theme:text-smoke-200 rounded-md hover:bg-smoke-400 dark-theme:hover:bg-smoke-500 focus:ring-2 focus:ring-smoke-500 focus:ring-offset-2"
             >
               Cancel
             </button>
           </div>
         </form>
 
-        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg">
+        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg">
           <h4 class="font-semibold mb-2">Current Form Data:</h4>
-          <pre class="text-xs text-gray-600 dark-theme:text-gray-300">{{ JSON.stringify(formData, null, 2) }}</pre>
+          <pre class="text-xs text-smoke-600 dark-theme:text-smoke-300">{{ JSON.stringify(formData, null, 2) }}</pre>
         </div>
       </div>
     `
@@ -395,7 +395,7 @@ export const AccessibilityChecklist: Story = {
   render: () => ({
     template: `
       <div class="max-w-4xl mx-auto p-6 space-y-6">
-        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
           <h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -442,9 +442,9 @@ export const AccessibilityChecklist: Story = {
             </div>
           </div>
 
-          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
             <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
               Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
               If you can successfully navigate and make selections, the accessibility implementation is working!
             </p>
@@ -452,7 +452,7 @@ export const AccessibilityChecklist: Story = {
 
           <div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
             <h4 class="font-semibold mb-2">⚡ Performance Note</h4>
-            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+            <p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
               These accessibility features are built into the component with minimal performance impact.
               The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
             </p>
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index f611d61ff..21814b520 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -26,11 +26,11 @@
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-zinc-700 dark-theme:text-gray-200"
+          class="text-zinc-700 dark-theme:text-smoke-200"
         >
           {{ getLabel(slotProps.value) }}
         </span>
-        <span v-else class="text-zinc-700 dark-theme:text-gray-200">
+        <span v-else class="text-zinc-700 dark-theme:text-smoke-200">
           {{ label }}
         </span>
       </div>
@@ -106,7 +106,7 @@ const getLabel = (val: string | null | undefined) => {
   if (val == null) return label ?? ''
   if (!options) return label ?? ''
   const found = options.find((o) => o.value === val)
-  return found ? found.name : label ?? ''
+  return found ? found.name : (label ?? '')
 }
 
 // Extract complex style logic from template
@@ -158,8 +158,8 @@ const pt = computed(() => ({
     )
   },
   listContainer: () => ({
-    style: `max-height: ${listMaxHeight}`,
-    class: 'overflow-y-auto scrollbar-hide'
+    style: `max-height: min(${listMaxHeight}, 50vh)`,
+    class: 'scrollbar-custom'
   }),
   list: {
     class:
diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
index 7b6e68a75..a525481d4 100644
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -1,71 +1,48 @@
 <template>
   <div
-    class="relative h-full w-full"
+    class="widget-expands relative h-full w-full"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
   >
     <Load3DScene
+      v-if="node"
       ref="load3DSceneRef"
-      :node="node"
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :light-intensity="lightIntensity"
-      :fov="fov"
-      :camera-type="cameraType"
-      :show-preview="showPreview"
-      :background-image="backgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      :edge-threshold="edgeThreshold"
-      @material-mode-change="listenMaterialModeChange"
-      @background-color-change="listenBackgroundColorChange"
-      @light-intensity-change="listenLightIntensityChange"
-      @fov-change="listenFOVChange"
-      @camera-type-change="listenCameraTypeChange"
-      @show-grid-change="listenShowGridChange"
-      @show-preview-change="listenShowPreviewChange"
-      @background-image-change="listenBackgroundImageChange"
-      @up-direction-change="listenUpDirectionChange"
-      @edge-threshold-change="listenEdgeThresholdChange"
-      @recording-status-change="listenRecordingStatusChange"
-    />
-    <Load3DControls
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :show-preview="showPreview"
-      :light-intensity="lightIntensity"
-      :show-light-intensity-button="showLightIntensityButton"
-      :fov="fov"
-      :show-f-o-v-button="showFOVButton"
-      :show-preview-button="showPreviewButton"
-      :camera-type="cameraType"
-      :has-background-image="hasBackgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      :edge-threshold="edgeThreshold"
-      @update-background-image="handleBackgroundImageUpdate"
-      @switch-camera="switchCamera"
-      @toggle-grid="toggleGrid"
-      @update-background-color="handleBackgroundColorChange"
-      @update-light-intensity="handleUpdateLightIntensity"
-      @toggle-preview="togglePreview"
-      @update-f-o-v="handleUpdateFOV"
-      @update-up-direction="handleUpdateUpDirection"
-      @update-material-mode="handleUpdateMaterialMode"
-      @update-edge-threshold="handleUpdateEdgeThreshold"
-      @export-model="handleExportModel"
+      :initialize-load3d="initializeLoad3d"
+      :cleanup="cleanup"
+      :loading="loading"
+      :loading-message="loadingMessage"
+      :on-model-drop="isPreview ? undefined : handleModelDrop"
+      :is-preview="isPreview"
     />
+    <div class="pointer-events-none absolute top-0 left-0 h-full w-full">
+      <Load3DControls
+        v-model:scene-config="sceneConfig"
+        v-model:model-config="modelConfig"
+        v-model:camera-config="cameraConfig"
+        v-model:light-config="lightConfig"
+        @update-background-image="handleBackgroundImageUpdate"
+        @export-model="handleExportModel"
+      />
+      <AnimationControls
+        v-if="animations && animations.length > 0"
+        v-model:animations="animations"
+        v-model:playing="playing"
+        v-model:selected-speed="selectedSpeed"
+        v-model:selected-animation="selectedAnimation"
+      />
+    </div>
     <div
-      v-if="enable3DViewer"
+      v-if="enable3DViewer && node"
       class="pointer-events-auto absolute top-12 right-2 z-20"
     >
-      <ViewerControls :node="node" />
+      <ViewerControls :node="node as LGraphNode" />
     </div>
 
     <div
-      v-if="showRecordingControls"
+      v-if="!isPreview"
       class="pointer-events-auto absolute right-2 z-20"
       :class="{
         'top-12': !enable3DViewer,
@@ -73,10 +50,9 @@
       }"
     >
       <RecordingControls
-        :node="node"
-        :is-recording="isRecording"
-        :has-recording="hasRecording"
-        :recording-duration="recordingDuration"
+        v-model:is-recording="isRecording"
+        v-model:has-recording="hasRecording"
+        v-model:recording-duration="recordingDuration"
         @start-recording="handleStartRecording"
         @stop-recording="handleStopRecording"
         @export-recording="handleExportRecording"
@@ -87,250 +63,79 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed, onMounted, ref } from 'vue'
+import type { Ref } from 'vue'
 
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
+import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
-import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import type {
-  CameraType,
-  Load3DNodeType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
+import { useLoad3d } from '@/composables/useLoad3d'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { app } from '@/scripts/app'
 import type { ComponentWidget } from '@/scripts/domWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-const { t } = useI18n()
-const { widget } = defineProps<{
-  widget: ComponentWidget<string[]>
+const props = defineProps<{
+  widget: ComponentWidget<string[]> | SimplifiedWidget
+  nodeId?: NodeId
 }>()
 
-const inputSpec = widget.inputSpec as CustomInputSpec
+function isComponentWidget(
+  widget: ComponentWidget<string[]> | SimplifiedWidget
+): widget is ComponentWidget<string[]> {
+  return 'node' in widget && widget.node !== undefined
+}
 
-const node = widget.node
-const type = inputSpec.type as Load3DNodeType
+const node = ref<LGraphNode | null>(null)
+
+if (isComponentWidget(props.widget)) {
+  node.value = props.widget.node
+} else if (props.nodeId) {
+  onMounted(() => {
+    node.value = app.rootGraph?.getNodeById(props.nodeId!) || null
+  })
+}
 
-const backgroundColor = ref('#000000')
-const showGrid = ref(true)
-const showPreview = ref(false)
-const lightIntensity = ref(5)
-const showLightIntensityButton = ref(true)
-const fov = ref(75)
-const showFOVButton = ref(true)
-const cameraType = ref<CameraType>('perspective')
-const hasBackgroundImage = ref(false)
-const backgroundImage = ref('')
-const upDirection = ref<UpDirection>('original')
-const materialMode = ref<MaterialMode>('original')
-const edgeThreshold = ref(85)
 const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
-const isRecording = ref(false)
-const hasRecording = ref(false)
-const recordingDuration = ref(0)
-const showRecordingControls = ref(!inputSpec.isPreview)
+
+const {
+  // configs
+  sceneConfig,
+  modelConfig,
+  cameraConfig,
+  lightConfig,
+
+  // other state
+  isRecording,
+  isPreview,
+  hasRecording,
+  recordingDuration,
+  animations,
+  playing,
+  selectedSpeed,
+  selectedAnimation,
+  loading,
+  loadingMessage,
+
+  // Methods
+  initializeLoad3d,
+  handleMouseEnter,
+  handleMouseLeave,
+  handleStartRecording,
+  handleStopRecording,
+  handleExportRecording,
+  handleClearRecording,
+  handleBackgroundImageUpdate,
+  handleExportModel,
+  handleModelDrop,
+  cleanup
+} = useLoad3d(node as Ref<LGraphNode | null>)
+
 const enable3DViewer = computed(() =>
   useSettingStore().get('Comfy.Load3D.3DViewerEnable')
 )
-
-const showPreviewButton = computed(() => {
-  return !type.includes('Preview')
-})
-
-const handleMouseEnter = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.updateStatusMouseOnScene(true)
-  }
-}
-
-const handleMouseLeave = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.updateStatusMouseOnScene(false)
-  }
-}
-
-const handleStartRecording = async () => {
-  if (load3DSceneRef.value?.load3d) {
-    await load3DSceneRef.value.load3d.startRecording()
-    isRecording.value = true
-  }
-}
-
-const handleStopRecording = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.stopRecording()
-    isRecording.value = false
-    recordingDuration.value = load3DSceneRef.value.load3d.getRecordingDuration()
-    hasRecording.value = recordingDuration.value > 0
-  }
-}
-
-const handleExportRecording = () => {
-  if (load3DSceneRef.value?.load3d) {
-    const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
-    const filename = `${timestamp}-scene-recording.mp4`
-    load3DSceneRef.value.load3d.exportRecording(filename)
-  }
-}
-
-const handleClearRecording = () => {
-  if (load3DSceneRef.value?.load3d) {
-    load3DSceneRef.value.load3d.clearRecording()
-    hasRecording.value = false
-    recordingDuration.value = 0
-  }
-}
-
-const switchCamera = () => {
-  cameraType.value =
-    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
-
-  showFOVButton.value = cameraType.value === 'perspective'
-
-  node.properties['Camera Type'] = cameraType.value
-}
-
-const togglePreview = (value: boolean) => {
-  showPreview.value = value
-
-  node.properties['Show Preview'] = showPreview.value
-}
-
-const toggleGrid = (value: boolean) => {
-  showGrid.value = value
-
-  node.properties['Show Grid'] = showGrid.value
-}
-
-const handleUpdateLightIntensity = (value: number) => {
-  lightIntensity.value = value
-
-  node.properties['Light Intensity'] = lightIntensity.value
-}
-
-const handleBackgroundImageUpdate = async (file: File | null) => {
-  if (!file) {
-    hasBackgroundImage.value = false
-    backgroundImage.value = ''
-    node.properties['Background Image'] = ''
-    return
-  }
-
-  const resourceFolder = (node.properties['Resource Folder'] as string) || ''
-
-  const subfolder = resourceFolder.trim() ? `3d/${resourceFolder.trim()}` : '3d'
-
-  backgroundImage.value = await Load3dUtils.uploadFile(file, subfolder)
-
-  node.properties['Background Image'] = backgroundImage.value
-}
-
-const handleUpdateFOV = (value: number) => {
-  fov.value = value
-
-  node.properties['FOV'] = fov.value
-}
-
-const handleUpdateEdgeThreshold = (value: number) => {
-  edgeThreshold.value = value
-
-  node.properties['Edge Threshold'] = edgeThreshold.value
-}
-
-const handleBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-
-  node.properties['Background Color'] = value
-}
-
-const handleUpdateUpDirection = (value: UpDirection) => {
-  upDirection.value = value
-
-  node.properties['Up Direction'] = value
-}
-
-const handleUpdateMaterialMode = (value: MaterialMode) => {
-  materialMode.value = value
-
-  node.properties['Material Mode'] = value
-}
-
-const handleExportModel = async (format: string) => {
-  if (!load3DSceneRef.value?.load3d) {
-    useToastStore().addAlert(t('toastMessages.no3dSceneToExport'))
-    return
-  }
-
-  try {
-    await load3DSceneRef.value.load3d.exportModel(format)
-  } catch (error) {
-    console.error('Error exporting model:', error)
-    useToastStore().addAlert(
-      t('toastMessages.failedToExportModel', {
-        format: format.toUpperCase()
-      })
-    )
-  }
-}
-
-const listenMaterialModeChange = (mode: MaterialMode) => {
-  materialMode.value = mode
-
-  showLightIntensityButton.value = mode === 'original'
-}
-
-const listenUpDirectionChange = (value: UpDirection) => {
-  upDirection.value = value
-}
-
-const listenEdgeThresholdChange = (value: number) => {
-  edgeThreshold.value = value
-}
-
-const listenRecordingStatusChange = (value: boolean) => {
-  isRecording.value = value
-
-  if (!value && load3DSceneRef.value?.load3d) {
-    recordingDuration.value = load3DSceneRef.value.load3d.getRecordingDuration()
-    hasRecording.value = recordingDuration.value > 0
-  }
-}
-
-const listenBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-}
-
-const listenLightIntensityChange = (value: number) => {
-  lightIntensity.value = value
-}
-
-const listenFOVChange = (value: number) => {
-  fov.value = value
-}
-
-const listenCameraTypeChange = (value: CameraType) => {
-  cameraType.value = value
-  showFOVButton.value = cameraType.value === 'perspective'
-}
-
-const listenShowGridChange = (value: boolean) => {
-  showGrid.value = value
-}
-
-const listenShowPreviewChange = (value: boolean) => {
-  showPreview.value = value
-}
-
-const listenBackgroundImageChange = (value: string) => {
-  backgroundImage.value = value
-
-  if (backgroundImage.value && backgroundImage.value !== '') {
-    hasBackgroundImage.value = true
-  }
-}
 </script>
diff --git a/src/components/load3d/Load3DAnimation.vue b/src/components/load3d/Load3DAnimation.vue
deleted file mode 100644
index 4c8fc1a39..000000000
--- a/src/components/load3d/Load3DAnimation.vue
+++ /dev/null
@@ -1,336 +0,0 @@
-<template>
-  <div
-    class="relative h-full w-full"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-  >
-    <Load3DAnimationScene
-      ref="load3DAnimationSceneRef"
-      :node="node"
-      :input-spec="inputSpec"
-      :background-color="backgroundColor"
-      :show-grid="showGrid"
-      :light-intensity="lightIntensity"
-      :fov="fov"
-      :camera-type="cameraType"
-      :show-preview="showPreview"
-      :show-f-o-v-button="showFOVButton"
-      :show-light-intensity-button="showLightIntensityButton"
-      :playing="playing"
-      :selected-speed="selectedSpeed"
-      :selected-animation="selectedAnimation"
-      :background-image="backgroundImage"
-      :up-direction="upDirection"
-      :material-mode="materialMode"
-      @material-mode-change="listenMaterialModeChange"
-      @background-color-change="listenBackgroundColorChange"
-      @light-intensity-change="listenLightIntensityChange"
-      @fov-change="listenFOVChange"
-      @camera-type-change="listenCameraTypeChange"
-      @show-grid-change="listenShowGridChange"
-      @show-preview-change="listenShowPreviewChange"
-      @background-image-change="listenBackgroundImageChange"
-      @animation-list-change="animationListChange"
-      @up-direction-change="listenUpDirectionChange"
-      @recording-status-change="listenRecordingStatusChange"
-    />
-    <div class="pointer-events-none absolute top-0 left-0 h-full w-full">
-      <Load3DControls
-        :input-spec="inputSpec"
-        :background-color="backgroundColor"
-        :show-grid="showGrid"
-        :show-preview="showPreview"
-        :light-intensity="lightIntensity"
-        :show-light-intensity-button="showLightIntensityButton"
-        :fov="fov"
-        :show-f-o-v-button="showFOVButton"
-        :show-preview-button="showPreviewButton"
-        :camera-type="cameraType"
-        :has-background-image="hasBackgroundImage"
-        :up-direction="upDirection"
-        :material-mode="materialMode"
-        @update-background-image="handleBackgroundImageUpdate"
-        @switch-camera="switchCamera"
-        @toggle-grid="toggleGrid"
-        @update-background-color="handleBackgroundColorChange"
-        @update-light-intensity="handleUpdateLightIntensity"
-        @toggle-preview="togglePreview"
-        @update-f-o-v="handleUpdateFOV"
-        @update-up-direction="handleUpdateUpDirection"
-        @update-material-mode="handleUpdateMaterialMode"
-      />
-      <Load3DAnimationControls
-        :animations="animations"
-        :playing="playing"
-        @toggle-play="togglePlay"
-        @speed-change="speedChange"
-        @animation-change="animationChange"
-      />
-    </div>
-    <div
-      v-if="showRecordingControls"
-      class="pointer-events-auto absolute top-12 right-2 z-20"
-    >
-      <RecordingControls
-        :node="node"
-        :is-recording="isRecording"
-        :has-recording="hasRecording"
-        :recording-duration="recordingDuration"
-        @start-recording="handleStartRecording"
-        @stop-recording="handleStopRecording"
-        @export-recording="handleExportRecording"
-        @clear-recording="handleClearRecording"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import Load3DAnimationControls from '@/components/load3d/Load3DAnimationControls.vue'
-import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
-import Load3DControls from '@/components/load3d/Load3DControls.vue'
-import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
-import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import type {
-  AnimationItem,
-  CameraType,
-  Load3DAnimationNodeType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { ComponentWidget } from '@/scripts/domWidget'
-
-const { widget } = defineProps<{
-  widget: ComponentWidget<string[]>
-}>()
-
-const inputSpec = widget.inputSpec as CustomInputSpec
-
-const node = widget.node
-const type = inputSpec.type as Load3DAnimationNodeType
-
-const backgroundColor = ref('#000000')
-const showGrid = ref(true)
-const showPreview = ref(false)
-const lightIntensity = ref(5)
-const showLightIntensityButton = ref(true)
-const fov = ref(75)
-const showFOVButton = ref(true)
-const cameraType = ref<'perspective' | 'orthographic'>('perspective')
-const hasBackgroundImage = ref(false)
-
-const animations = ref<AnimationItem[]>([])
-const playing = ref(false)
-const selectedSpeed = ref(1)
-const selectedAnimation = ref(0)
-const backgroundImage = ref('')
-
-const isRecording = ref(false)
-const hasRecording = ref(false)
-const recordingDuration = ref(0)
-const showRecordingControls = ref(!inputSpec.isPreview)
-
-const showPreviewButton = computed(() => {
-  return !type.includes('Preview')
-})
-
-const load3DAnimationSceneRef = ref<InstanceType<
-  typeof Load3DAnimationScene
-> | null>(null)
-
-const handleMouseEnter = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.updateStatusMouseOnScene(true)
-  }
-}
-
-const handleMouseLeave = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.updateStatusMouseOnScene(false)
-  }
-}
-
-const handleStartRecording = async () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    await sceneRef.load3d.startRecording()
-    isRecording.value = true
-  }
-}
-
-const handleStopRecording = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.stopRecording()
-    isRecording.value = false
-    recordingDuration.value = sceneRef.load3d.getRecordingDuration()
-    hasRecording.value = recordingDuration.value > 0
-  }
-}
-
-const handleExportRecording = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
-    const filename = `${timestamp}-animation-recording.mp4`
-    sceneRef.load3d.exportRecording(filename)
-  }
-}
-
-const handleClearRecording = () => {
-  const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-  if (sceneRef?.load3d) {
-    sceneRef.load3d.clearRecording()
-    hasRecording.value = false
-    recordingDuration.value = 0
-  }
-}
-
-const listenRecordingStatusChange = (value: boolean) => {
-  isRecording.value = value
-
-  if (!value) {
-    const sceneRef = load3DAnimationSceneRef.value?.load3DSceneRef
-    if (sceneRef?.load3d) {
-      recordingDuration.value = sceneRef.load3d.getRecordingDuration()
-      hasRecording.value = recordingDuration.value > 0
-    }
-  }
-}
-
-const switchCamera = () => {
-  cameraType.value =
-    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
-
-  showFOVButton.value = cameraType.value === 'perspective'
-
-  node.properties['Camera Type'] = cameraType.value
-}
-
-const togglePreview = (value: boolean) => {
-  showPreview.value = value
-
-  node.properties['Show Preview'] = showPreview.value
-}
-
-const toggleGrid = (value: boolean) => {
-  showGrid.value = value
-
-  node.properties['Show Grid'] = showGrid.value
-}
-
-const handleUpdateLightIntensity = (value: number) => {
-  lightIntensity.value = value
-
-  node.properties['Light Intensity'] = lightIntensity.value
-}
-
-const handleBackgroundImageUpdate = async (file: File | null) => {
-  if (!file) {
-    hasBackgroundImage.value = false
-    backgroundImage.value = ''
-    node.properties['Background Image'] = ''
-    return
-  }
-
-  const resourceFolder = (node.properties['Resource Folder'] as string) || ''
-
-  const subfolder = resourceFolder.trim() ? `3d/${resourceFolder.trim()}` : '3d'
-
-  backgroundImage.value = await Load3dUtils.uploadFile(file, subfolder)
-
-  node.properties['Background Image'] = backgroundImage.value
-}
-
-const handleUpdateFOV = (value: number) => {
-  fov.value = value
-
-  node.properties['FOV'] = fov.value
-}
-
-const materialMode = ref<MaterialMode>('original')
-const upDirection = ref<UpDirection>('original')
-
-const handleUpdateUpDirection = (value: UpDirection) => {
-  upDirection.value = value
-
-  node.properties['Up Direction'] = value
-}
-
-const handleUpdateMaterialMode = (value: MaterialMode) => {
-  materialMode.value = value
-
-  node.properties['Material Mode'] = value
-}
-
-const handleBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-
-  node.properties['Background Color'] = value
-}
-
-const togglePlay = (value: boolean) => {
-  playing.value = value
-}
-
-const speedChange = (value: number) => {
-  selectedSpeed.value = value
-}
-
-const animationChange = (value: number) => {
-  selectedAnimation.value = value
-}
-
-const animationListChange = (value: any) => {
-  animations.value = value
-}
-
-const listenMaterialModeChange = (mode: MaterialMode) => {
-  materialMode.value = mode
-
-  showLightIntensityButton.value = mode === 'original'
-}
-
-const listenUpDirectionChange = (value: UpDirection) => {
-  upDirection.value = value
-}
-
-const listenBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-}
-
-const listenLightIntensityChange = (value: number) => {
-  lightIntensity.value = value
-}
-
-const listenFOVChange = (value: number) => {
-  fov.value = value
-}
-
-const listenCameraTypeChange = (value: CameraType) => {
-  cameraType.value = value
-
-  showFOVButton.value = cameraType.value === 'perspective'
-}
-
-const listenShowGridChange = (value: boolean) => {
-  showGrid.value = value
-}
-
-const listenShowPreviewChange = (value: boolean) => {
-  showPreview.value = value
-}
-
-const listenBackgroundImageChange = (value: string) => {
-  backgroundImage.value = value
-
-  if (backgroundImage.value && backgroundImage.value !== '') {
-    hasBackgroundImage.value = true
-  }
-}
-</script>
diff --git a/src/components/load3d/Load3DAnimationScene.vue b/src/components/load3d/Load3DAnimationScene.vue
deleted file mode 100644
index 38cbd7169..000000000
--- a/src/components/load3d/Load3DAnimationScene.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <Load3DScene
-    ref="load3DSceneRef"
-    :node="node"
-    :input-spec="inputSpec"
-    :background-color="backgroundColor"
-    :show-grid="showGrid"
-    :light-intensity="lightIntensity"
-    :fov="fov"
-    :camera-type="cameraType"
-    :show-preview="showPreview"
-    :extra-listeners="animationListeners"
-    :background-image="backgroundImage"
-    :up-direction="upDirection"
-    :material-mode="materialMode"
-    @material-mode-change="listenMaterialModeChange"
-    @background-color-change="listenBackgroundColorChange"
-    @light-intensity-change="listenLightIntensityChange"
-    @fov-change="listenFOVChange"
-    @camera-type-change="listenCameraTypeChange"
-    @show-grid-change="listenShowGridChange"
-    @show-preview-change="listenShowPreviewChange"
-    @recording-status-change="listenRecordingStatusChange"
-  />
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-import Load3DScene from '@/components/load3d/Load3DScene.vue'
-import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-
-const props = defineProps<{
-  node: any
-  inputSpec: CustomInputSpec
-  backgroundColor: string
-  showGrid: boolean
-  lightIntensity: number
-  fov: number
-  cameraType: CameraType
-  showPreview: boolean
-  materialMode: MaterialMode
-  upDirection: UpDirection
-  showFOVButton: boolean
-  showLightIntensityButton: boolean
-  playing: boolean
-  selectedSpeed: number
-  selectedAnimation: number
-  backgroundImage: string
-}>()
-
-const node = ref(props.node)
-const backgroundColor = ref(props.backgroundColor)
-const showPreview = ref(props.showPreview)
-const fov = ref(props.fov)
-const lightIntensity = ref(props.lightIntensity)
-const cameraType = ref(props.cameraType)
-const showGrid = ref(props.showGrid)
-const upDirection = ref(props.upDirection)
-const materialMode = ref(props.materialMode)
-const showFOVButton = ref(props.showFOVButton)
-const showLightIntensityButton = ref(props.showLightIntensityButton)
-const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
-
-watch(
-  () => props.cameraType,
-  (newValue) => {
-    cameraType.value = newValue
-  }
-)
-
-watch(
-  () => props.showGrid,
-  (newValue) => {
-    showGrid.value = newValue
-  }
-)
-
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    backgroundColor.value = newValue
-  }
-)
-
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    lightIntensity.value = newValue
-  }
-)
-
-watch(
-  () => props.fov,
-  (newValue) => {
-    fov.value = newValue
-  }
-)
-
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    upDirection.value = newValue
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    materialMode.value = newValue
-  }
-)
-
-watch(
-  () => props.showPreview,
-  (newValue) => {
-    showPreview.value = newValue
-  }
-)
-
-watch(
-  () => props.playing,
-  (newValue) => {
-    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
-    load3d?.toggleAnimation(newValue)
-  }
-)
-
-watch(
-  () => props.selectedSpeed,
-  (newValue) => {
-    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
-    load3d?.setAnimationSpeed(newValue)
-  }
-)
-
-watch(
-  () => props.selectedAnimation,
-  (newValue) => {
-    const load3d = load3DSceneRef.value?.load3d as Load3dAnimation | null
-    load3d?.updateSelectedAnimation(newValue)
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'animationListChange', animationList: string): void
-  (e: 'materialModeChange', materialMode: MaterialMode): void
-  (e: 'backgroundColorChange', color: string): void
-  (e: 'lightIntensityChange', lightIntensity: number): void
-  (e: 'fovChange', fov: number): void
-  (e: 'cameraTypeChange', cameraType: CameraType): void
-  (e: 'showGridChange', showGrid: boolean): void
-  (e: 'showPreviewChange', showPreview: boolean): void
-  (e: 'upDirectionChange', direction: UpDirection): void
-  (e: 'recording-status-change', status: boolean): void
-}>()
-
-const listenMaterialModeChange = (mode: MaterialMode) => {
-  materialMode.value = mode
-
-  showLightIntensityButton.value = mode === 'original'
-}
-
-const listenBackgroundColorChange = (value: string) => {
-  backgroundColor.value = value
-}
-
-const listenLightIntensityChange = (value: number) => {
-  lightIntensity.value = value
-}
-
-const listenFOVChange = (value: number) => {
-  fov.value = value
-}
-
-const listenCameraTypeChange = (value: CameraType) => {
-  cameraType.value = value
-
-  showFOVButton.value = cameraType.value === 'perspective'
-}
-
-const listenShowGridChange = (value: boolean) => {
-  showGrid.value = value
-}
-
-const listenShowPreviewChange = (value: boolean) => {
-  showPreview.value = value
-}
-
-const listenRecordingStatusChange = (value: boolean) => {
-  emit('recording-status-change', value)
-}
-
-const animationListeners = {
-  animationListChange: (newValue: any) => {
-    emit('animationListChange', newValue)
-  }
-}
-
-defineExpose({
-  load3DSceneRef
-})
-</script>
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index 21a4dc0b0..d8e977fce 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -1,6 +1,10 @@
 <template>
   <div
-    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-gray-700/30"
+    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+    @wheel.stop
   >
     <div class="show-menu relative">
       <Button class="p-button-rounded p-button-text" @click="toggleMenu">
@@ -16,83 +20,61 @@
             v-for="category in availableCategories"
             :key="category"
             class="p-button-text flex w-full items-center justify-start"
-            :class="{ 'bg-gray-600': activeCategory === category }"
+            :class="{ 'bg-smoke-600': activeCategory === category }"
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)" />
-            <span class="text-white">{{ t(categoryLabels[category]) }}</span>
+            <span class="whitespace-nowrap text-white">{{
+              $t(categoryLabels[category])
+            }}</span>
           </Button>
         </div>
       </div>
     </div>
 
-    <div v-show="activeCategory" class="rounded-lg bg-gray-700/30">
+    <div v-show="activeCategory" class="rounded-lg bg-smoke-700/30">
       <SceneControls
-        v-if="activeCategory === 'scene'"
+        v-if="showSceneControls"
         ref="sceneControlsRef"
-        :background-color="backgroundColor"
-        :show-grid="showGrid"
-        :has-background-image="hasBackgroundImage"
-        @toggle-grid="handleToggleGrid"
-        @update-background-color="handleBackgroundColorChange"
+        v-model:show-grid="sceneConfig!.showGrid"
+        v-model:background-color="sceneConfig!.backgroundColor"
+        v-model:background-image="sceneConfig!.backgroundImage"
         @update-background-image="handleBackgroundImageUpdate"
       />
 
       <ModelControls
-        v-if="activeCategory === 'model'"
+        v-if="showModelControls"
         ref="modelControlsRef"
-        :input-spec="inputSpec"
-        :up-direction="upDirection"
-        :material-mode="materialMode"
-        :edge-threshold="edgeThreshold"
-        @update-up-direction="handleUpdateUpDirection"
-        @update-material-mode="handleUpdateMaterialMode"
-        @update-edge-threshold="handleUpdateEdgeThreshold"
+        v-model:material-mode="modelConfig!.materialMode"
+        v-model:up-direction="modelConfig!.upDirection"
       />
 
       <CameraControls
-        v-if="activeCategory === 'camera'"
+        v-if="showCameraControls"
         ref="cameraControlsRef"
-        :camera-type="cameraType"
-        :fov="fov"
-        :show-f-o-v-button="showFOVButton"
-        @switch-camera="switchCamera"
-        @update-f-o-v="handleUpdateFOV"
+        v-model:camera-type="cameraConfig!.cameraType"
+        v-model:fov="cameraConfig!.fov"
       />
 
       <LightControls
-        v-if="activeCategory === 'light'"
+        v-if="showLightControls"
         ref="lightControlsRef"
-        :light-intensity="lightIntensity"
-        :show-light-intensity-button="showLightIntensityButton"
-        @update-light-intensity="handleUpdateLightIntensity"
+        v-model:light-intensity="lightConfig!.intensity"
+        v-model:material-mode="modelConfig!.materialMode"
       />
 
       <ExportControls
-        v-if="activeCategory === 'export'"
+        v-if="showExportControls"
         ref="exportControlsRef"
         @export-model="handleExportModel"
       />
     </div>
-    <div v-if="showPreviewButton">
-      <Button class="p-button-rounded p-button-text" @click="togglePreview">
-        <i
-          v-tooltip.right="{ value: t('load3d.previewOutput'), showDelay: 300 }"
-          :class="[
-            'pi',
-            showPreview ? 'pi-eye' : 'pi-eye-slash',
-            'text-lg text-white'
-          ]"
-        />
-      </Button>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
 import ExportControls from '@/components/load3d/controls/ExportControls.vue'
@@ -100,31 +82,16 @@ import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
 import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
+  CameraConfig,
+  LightConfig,
+  ModelConfig,
+  SceneConfig
 } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
-const vTooltip = Tooltip
-
-const props = defineProps<{
-  inputSpec: CustomInputSpec
-  backgroundColor: string
-  showGrid: boolean
-  showPreview: boolean
-  lightIntensity: number
-  showLightIntensityButton: boolean
-  fov: number
-  showFOVButton: boolean
-  showPreviewButton: boolean
-  cameraType: CameraType
-  hasBackgroundImage?: boolean
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold?: number
-}>()
+const sceneConfig = defineModel<SceneConfig>('sceneConfig')
+const modelConfig = defineModel<ModelConfig>('modelConfig')
+const cameraConfig = defineModel<CameraConfig>('cameraConfig')
+const lightConfig = defineModel<LightConfig>('lightConfig')
 
 const isMenuOpen = ref(false)
 const activeCategory = ref<string>('scene')
@@ -137,15 +104,26 @@ const categoryLabels: Record<string, string> = {
 }
 
 const availableCategories = computed(() => {
-  const baseCategories = ['scene', 'model', 'camera', 'light']
-
-  if (!props.inputSpec.isAnimation) {
-    return [...baseCategories, 'export']
-  }
-
-  return baseCategories
+  return ['scene', 'model', 'camera', 'light', 'export']
 })
 
+const showSceneControls = computed(
+  () => activeCategory.value === 'scene' && !!sceneConfig.value
+)
+const showModelControls = computed(
+  () => activeCategory.value === 'model' && !!modelConfig.value
+)
+const showCameraControls = computed(
+  () => activeCategory.value === 'camera' && !!cameraConfig.value
+)
+const showLightControls = computed(
+  () =>
+    activeCategory.value === 'light' &&
+    !!lightConfig.value &&
+    !!modelConfig.value
+)
+const showExportControls = computed(() => activeCategory.value === 'export')
+
 const toggleMenu = () => {
   isMenuOpen.value = !isMenuOpen.value
 }
@@ -168,73 +146,14 @@ const getCategoryIcon = (category: string) => {
 }
 
 const emit = defineEmits<{
-  (e: 'switchCamera'): void
-  (e: 'toggleGrid', value: boolean): void
-  (e: 'updateBackgroundColor', color: string): void
-  (e: 'updateLightIntensity', value: number): void
-  (e: 'updateFOV', value: number): void
-  (e: 'togglePreview', value: boolean): void
   (e: 'updateBackgroundImage', file: File | null): void
-  (e: 'updateUpDirection', direction: UpDirection): void
-  (e: 'updateMaterialMode', mode: MaterialMode): void
-  (e: 'updateEdgeThreshold', value: number): void
   (e: 'exportModel', format: string): void
 }>()
 
-const backgroundColor = ref(props.backgroundColor)
-const showGrid = ref(props.showGrid)
-const showPreview = ref(props.showPreview)
-const lightIntensity = ref(props.lightIntensity)
-const upDirection = ref(props.upDirection || 'original')
-const materialMode = ref(props.materialMode || 'original')
-const showLightIntensityButton = ref(props.showLightIntensityButton)
-const fov = ref(props.fov)
-const showFOVButton = ref(props.showFOVButton)
-const showPreviewButton = ref(props.showPreviewButton)
-const hasBackgroundImage = ref(props.hasBackgroundImage)
-const edgeThreshold = ref(props.edgeThreshold)
-
-const switchCamera = () => {
-  emit('switchCamera')
-}
-
-const togglePreview = () => {
-  showPreview.value = !showPreview.value
-  emit('togglePreview', showPreview.value)
-}
-
-const handleToggleGrid = (value: boolean) => {
-  emit('toggleGrid', value)
-}
-
-const handleBackgroundColorChange = (value: string) => {
-  emit('updateBackgroundColor', value)
-}
-
 const handleBackgroundImageUpdate = (file: File | null) => {
   emit('updateBackgroundImage', file)
 }
 
-const handleUpdateUpDirection = (direction: UpDirection) => {
-  emit('updateUpDirection', direction)
-}
-
-const handleUpdateMaterialMode = (mode: MaterialMode) => {
-  emit('updateMaterialMode', mode)
-}
-
-const handleUpdateEdgeThreshold = (value: number) => {
-  emit('updateEdgeThreshold', value)
-}
-
-const handleUpdateLightIntensity = (value: number) => {
-  emit('updateLightIntensity', value)
-}
-
-const handleUpdateFOV = (value: number) => {
-  emit('updateFOV', value)
-}
-
 const handleExportModel = (format: string) => {
   emit('exportModel', format)
 }
@@ -247,101 +166,6 @@ const closeSlider = (e: MouseEvent) => {
   }
 }
 
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    if (newValue) {
-      upDirection.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    backgroundColor.value = newValue
-  }
-)
-
-watch(
-  () => props.fov,
-  (newValue) => {
-    fov.value = newValue
-  }
-)
-
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    lightIntensity.value = newValue
-  }
-)
-
-watch(
-  () => props.showFOVButton,
-  (newValue) => {
-    showFOVButton.value = newValue
-  }
-)
-
-watch(
-  () => props.showLightIntensityButton,
-  (newValue) => {
-    showLightIntensityButton.value = newValue
-  }
-)
-
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    upDirection.value = newValue
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    materialMode.value = newValue
-  }
-)
-
-watch(
-  () => props.showPreviewButton,
-  (newValue) => {
-    showPreviewButton.value = newValue
-  }
-)
-
-watch(
-  () => props.showPreview,
-  (newValue) => {
-    showPreview.value = newValue
-  }
-)
-
-watch(
-  () => props.hasBackgroundImage,
-  (newValue) => {
-    hasBackgroundImage.value = newValue
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    if (newValue) {
-      materialMode.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.edgeThreshold,
-  (newValue) => {
-    edgeThreshold.value = newValue
-  }
-)
-
 onMounted(() => {
   document.addEventListener('click', closeSlider)
 })
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
index 111ee0116..acc1a21cd 100644
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -1,238 +1,72 @@
 <template>
-  <div ref="container" class="comfy-load-3d relative h-full w-full">
-    <LoadingOverlay ref="loadingOverlayRef" />
+  <div
+    ref="container"
+    class="relative h-full w-full"
+    data-capture-wheel="true"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+    @mousedown.stop
+    @mousemove.stop
+    @mouseup.stop
+    @contextmenu.stop.prevent
+    @dragover.prevent.stop="handleDragOver"
+    @dragleave.stop="handleDragLeave"
+    @drop.prevent.stop="handleDrop"
+  >
+    <LoadingOverlay
+      ref="loadingOverlayRef"
+      :loading="loading"
+      :loading-message="loadingMessage"
+    />
+    <div
+      v-if="!isPreview && isDragging"
+      class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+    >
+      <div
+        class="rounded-lg border-2 border-dashed border-blue-400 bg-blue-500/20 px-6 py-4 text-lg font-medium text-blue-100"
+      >
+        {{ dragMessage }}
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
-import type Load3d from '@/extensions/core/load3d/Load3d'
-import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { useLoad3dService } from '@/services/load3dService'
+import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 
 const props = defineProps<{
-  node: LGraphNode
-  inputSpec: CustomInputSpec
-  backgroundColor: string
-  showGrid: boolean
-  lightIntensity: number
-  fov: number
-  cameraType: CameraType
-  showPreview: boolean
-  backgroundImage: string
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold?: number
-  extraListeners?: Record<string, (value: any) => void>
+  initializeLoad3d: (containerRef: HTMLElement) => Promise<void>
+  cleanup: () => void
+  loading: boolean
+  loadingMessage: string
+  onModelDrop?: (file: File) => void | Promise<void>
+  isPreview: boolean
 }>()
 
 const container = ref<HTMLElement | null>(null)
-const node = ref(props.node)
-const load3d = ref<Load3d | Load3dAnimation | null>(null)
 const loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | null>(null)
 
-const eventConfig = {
-  materialModeChange: (value: string) =>
-    emit('materialModeChange', value as MaterialMode),
-  backgroundColorChange: (value: string) =>
-    emit('backgroundColorChange', value),
-  lightIntensityChange: (value: number) => emit('lightIntensityChange', value),
-  fovChange: (value: number) => emit('fovChange', value),
-  cameraTypeChange: (value: string) =>
-    emit('cameraTypeChange', value as CameraType),
-  showGridChange: (value: boolean) => emit('showGridChange', value),
-  showPreviewChange: (value: boolean) => emit('showPreviewChange', value),
-  backgroundImageChange: (value: string) =>
-    emit('backgroundImageChange', value),
-  backgroundImageLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.loadingBackgroundImage')),
-  backgroundImageLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  upDirectionChange: (value: string) =>
-    emit('upDirectionChange', value as UpDirection),
-  edgeThresholdChange: (value: number) => emit('edgeThresholdChange', value),
-  modelLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.loadingModel')),
-  modelLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  materialLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.switchingMaterialMode')),
-  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  exportLoadingStart: (message: string) => {
-    loadingOverlayRef.value?.startLoading(message || t('load3d.exportingModel'))
-  },
-  exportLoadingEnd: () => {
-    loadingOverlayRef.value?.endLoading()
-  },
-  recordingStatusChange: (value: boolean) =>
-    emit('recordingStatusChange', value)
-} as const
-
-watch(
-  () => props.showPreview,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.togglePreview(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.cameraType,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.toggleCamera(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.fov,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setFOV(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setLightIntensity(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.showGrid,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.toggleGrid(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setBackgroundColor(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.backgroundImage,
-  async (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      await rawLoad3d.setBackgroundImage(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setUpDirection(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setMaterialMode(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.edgeThreshold,
-  (newValue) => {
-    if (load3d.value && newValue) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setEdgeThreshold(newValue)
-    }
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'materialModeChange', materialMode: MaterialMode): void
-  (e: 'backgroundColorChange', color: string): void
-  (e: 'lightIntensityChange', lightIntensity: number): void
-  (e: 'fovChange', fov: number): void
-  (e: 'cameraTypeChange', cameraType: CameraType): void
-  (e: 'showGridChange', showGrid: boolean): void
-  (e: 'showPreviewChange', showPreview: boolean): void
-  (e: 'backgroundImageChange', backgroundImage: string): void
-  (e: 'upDirectionChange', upDirection: UpDirection): void
-  (e: 'edgeThresholdChange', threshold: number): void
-  (e: 'recordingStatusChange', status: boolean): void
-}>()
-
-const handleEvents = (action: 'add' | 'remove') => {
-  if (!load3d.value) return
-
-  Object.entries(eventConfig).forEach(([event, handler]) => {
-    const method = `${action}EventListener` as const
-    load3d.value?.[method](event, handler)
+const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
+  useLoad3dDrag({
+    onModelDrop: async (file) => {
+      if (props.onModelDrop) {
+        await props.onModelDrop(file)
+      }
+    },
+    disabled: computed(() => props.isPreview)
   })
 
-  if (props.extraListeners) {
-    Object.entries(props.extraListeners).forEach(([event, handler]) => {
-      const method = `${action}EventListener` as const
-      load3d.value?.[method](event, handler)
-    })
-  }
-}
-
 onMounted(() => {
   if (container.value) {
-    load3d.value = useLoad3dService().registerLoad3d(
-      node.value as LGraphNode,
-      container.value,
-      props.inputSpec
-    )
+    void props.initializeLoad3d(container.value)
   }
-  handleEvents('add')
 })
 
 onUnmounted(() => {
-  handleEvents('remove')
-  useLoad3dService().removeLoad3d(node.value as LGraphNode)
-})
-
-defineExpose({
-  load3d
+  props.cleanup()
 })
 </script>
diff --git a/src/components/load3d/Load3dViewerContent.vue b/src/components/load3d/Load3dViewerContent.vue
index 0099fee7d..fc7ef6869 100644
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -9,9 +9,22 @@
     <div ref="mainContentRef" class="relative flex-1">
       <div
         ref="containerRef"
-        class="comfy-load-3d-viewer absolute h-full w-full"
+        class="absolute h-full w-full"
         @resize="viewer.handleResize"
+        @dragover.prevent.stop="handleDragOver"
+        @dragleave.stop="handleDragLeave"
+        @drop.prevent.stop="handleDrop"
       />
+      <div
+        v-if="isDragging"
+        class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      >
+        <div
+          class="rounded-lg border-2 border-dashed border-blue-400 bg-blue-500/20 px-6 py-4 text-lg font-medium text-blue-100"
+        >
+          {{ dragMessage }}
+        </div>
+      </div>
     </div>
 
     <div class="flex w-72 flex-col">
@@ -75,6 +88,7 @@ import ExportControls from '@/components/load3d/controls/viewer/ViewerExportCont
 import LightControls from '@/components/load3d/controls/viewer/ViewerLightControls.vue'
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
+import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
@@ -92,6 +106,14 @@ const mutationObserver = ref<MutationObserver | null>(null)
 
 const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
 
+const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
+  useLoad3dDrag({
+    onModelDrop: async (file) => {
+      await viewer.handleModelDrop(file)
+    },
+    disabled: viewer.isPreview
+  })
+
 onMounted(async () => {
   const source = useLoad3dService().getLoad3d(props.node)
   if (source && containerRef.value) {
diff --git a/src/components/load3d/LoadingOverlay.vue b/src/components/load3d/LoadingOverlay.vue
index e7e358203..d5094f9b0 100644
--- a/src/components/load3d/LoadingOverlay.vue
+++ b/src/components/load3d/LoadingOverlay.vue
@@ -1,8 +1,8 @@
 <template>
   <Transition name="fade">
     <div
-      v-if="modelLoading"
-      class="absolute inset-0 z-50 flex items-center justify-center bg-black/50"
+      v-if="loading"
+      class="bg-opacity-50 absolute inset-0 z-50 flex items-center justify-center bg-black"
     >
       <div class="flex flex-col items-center">
         <div class="spinner" />
@@ -15,29 +15,10 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
-
-import { t } from '@/i18n'
-
-const modelLoading = ref(false)
-const loadingMessage = ref('')
-
-const startLoading = async (message?: string) => {
-  loadingMessage.value = message || t('load3d.loadingModel')
-  modelLoading.value = true
-
-  await nextTick()
-}
-
-const endLoading = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 100))
-  modelLoading.value = false
-}
-
-defineExpose({
-  startLoading,
-  endLoading
-})
+defineProps<{
+  loading: boolean
+  loadingMessage: string
+}>()
 </script>
 
 <style scoped>
diff --git a/src/components/load3d/Load3DAnimationControls.vue b/src/components/load3d/controls/AnimationControls.vue
similarity index 57%
rename from src/components/load3d/Load3DAnimationControls.vue
rename to src/components/load3d/controls/AnimationControls.vue
index 7ac3af4b9..c9d57c0d2 100644
--- a/src/components/load3d/Load3DAnimationControls.vue
+++ b/src/components/load3d/controls/AnimationControls.vue
@@ -15,7 +15,6 @@
       option-label="name"
       option-value="value"
       class="w-24"
-      @change="speedChange"
     />
 
     <Select
@@ -24,7 +23,6 @@
       option-label="name"
       option-value="index"
       class="w-32"
-      @change="animationChange"
     />
   </div>
 </template>
@@ -32,23 +30,13 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Select from 'primevue/select'
-import { ref, watch } from 'vue'
 
-const props = defineProps<{
-  animations: Array<{ name: string; index: number }>
-  playing: boolean
-}>()
+type Animation = { name: string; index: number }
 
-const emit = defineEmits<{
-  (e: 'togglePlay', value: boolean): void
-  (e: 'speedChange', value: number): void
-  (e: 'animationChange', value: number): void
-}>()
-
-const animations = ref(props.animations)
-const playing = ref(props.playing)
-const selectedSpeed = ref(1)
-const selectedAnimation = ref(0)
+const animations = defineModel<Animation[]>('animations')
+const playing = defineModel<boolean>('playing')
+const selectedSpeed = defineModel<number>('selectedSpeed')
+const selectedAnimation = defineModel<number>('selectedAnimation')
 
 const speedOptions = [
   { name: '0.1x', value: 0.1 },
@@ -58,24 +46,7 @@ const speedOptions = [
   { name: '2x', value: 2 }
 ]
 
-watch(
-  () => props.animations,
-  (newVal) => {
-    animations.value = newVal
-  }
-)
-
 const togglePlay = () => {
   playing.value = !playing.value
-
-  emit('togglePlay', playing.value)
-}
-
-const speedChange = () => {
-  emit('speedChange', selectedSpeed.value)
-}
-
-const animationChange = () => {
-  emit('animationChange', selectedAnimation.value)
 }
 </script>
diff --git a/src/components/load3d/controls/CameraControls.vue b/src/components/load3d/controls/CameraControls.vue
index b45fa7e6d..66e00cb48 100644
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/src/components/load3d/controls/CameraControls.vue
@@ -3,7 +3,7 @@
     <Button class="p-button-rounded p-button-text" @click="switchCamera">
       <i
         v-tooltip.right="{
-          value: t('load3d.switchCamera'),
+          value: $t('load3d.switchCamera'),
           showDelay: 300
         }"
         :class="['pi', getCameraIcon, 'text-lg text-white']"
@@ -12,7 +12,7 @@
     <div v-if="showFOVButton" class="show-fov relative">
       <Button class="p-button-rounded p-button-text" @click="toggleFOV">
         <i
-          v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
+          v-tooltip.right="{ value: $t('load3d.fov'), showDelay: 300 }"
           class="pi pi-expand text-lg text-white"
         />
       </Button>
@@ -21,83 +21,37 @@
         class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
         style="width: 150px"
       >
-        <Slider
-          v-model="fov"
-          class="w-full"
-          :min="10"
-          :max="150"
-          :step="1"
-          @change="updateFOV"
-        />
+        <Slider v-model="fov" class="w-full" :min="10" :max="150" :step="1" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 import Slider from 'primevue/slider'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 
-const vTooltip = Tooltip
-
-const props = defineProps<{
-  cameraType: CameraType
-  fov: number
-  showFOVButton: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'switchCamera'): void
-  (e: 'updateFOV', value: number): void
-}>()
-
-const cameraType = ref(props.cameraType)
-const fov = ref(props.fov)
-const showFOVButton = ref(props.showFOVButton)
 const showFOV = ref(false)
 
-watch(
-  () => props.fov,
-  (newValue) => {
-    fov.value = newValue
-  }
-)
-
-watch(
-  () => props.showFOVButton,
-  (newValue) => {
-    showFOVButton.value = newValue
-  }
-)
-
-watch(
-  () => props.cameraType,
-  (newValue) => {
-    cameraType.value = newValue
-  }
-)
-
-const switchCamera = () => {
-  emit('switchCamera')
-}
+const cameraType = defineModel<CameraType>('cameraType')
+const fov = defineModel<number>('fov')
+const showFOVButton = computed(() => cameraType.value === 'perspective')
+const getCameraIcon = computed(() => {
+  return cameraType.value === 'perspective' ? 'pi-camera' : 'pi-camera'
+})
 
 const toggleFOV = () => {
   showFOV.value = !showFOV.value
 }
 
-const updateFOV = () => {
-  emit('updateFOV', fov.value)
+const switchCamera = () => {
+  cameraType.value =
+    cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
 }
 
-const getCameraIcon = computed(() => {
-  return props.cameraType === 'perspective' ? 'pi-camera' : 'pi-camera'
-})
-
 const closeCameraSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 
diff --git a/src/components/load3d/controls/ExportControls.vue b/src/components/load3d/controls/ExportControls.vue
index 8e6bde5ea..3e7f26f53 100644
--- a/src/components/load3d/controls/ExportControls.vue
+++ b/src/components/load3d/controls/ExportControls.vue
@@ -7,7 +7,7 @@
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.exportModel'),
+            value: $t('load3d.exportModel'),
             showDelay: 300
           }"
           class="pi pi-download text-lg text-white"
@@ -33,14 +33,9 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 import { onMounted, onUnmounted, ref } from 'vue'
 
-import { t } from '@/i18n'
-
-const vTooltip = Tooltip
-
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()
diff --git a/src/components/load3d/controls/LightControls.vue b/src/components/load3d/controls/LightControls.vue
index 487ea5ef9..1c662af85 100644
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -7,7 +7,7 @@
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.lightIntensity'),
+            value: $t('load3d.lightIntensity'),
             showDelay: 300
           }"
           class="pi pi-sun text-lg text-white"
@@ -24,7 +24,6 @@
           :min="lightIntensityMinimum"
           :max="lightIntensityMaximum"
           :step="lightAdjustmentIncrement"
-          @change="updateLightIntensity"
         />
       </div>
     </div>
@@ -32,27 +31,19 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 import Slider from 'primevue/slider'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import { t } from '@/i18n'
+import type { MaterialMode } from '@/extensions/core/load3d/interfaces'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
-const vTooltip = Tooltip
+const lightIntensity = defineModel<number>('lightIntensity')
+const materialMode = defineModel<MaterialMode>('materialMode')
 
-const props = defineProps<{
-  lightIntensity: number
-  showLightIntensityButton: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateLightIntensity', value: number): void
-}>()
-
-const lightIntensity = ref(props.lightIntensity)
-const showLightIntensityButton = ref(props.showLightIntensityButton)
+const showLightIntensityButton = computed(
+  () => materialMode.value === 'original'
+)
 const showLightIntensity = ref(false)
 
 const lightIntensityMaximum = useSettingStore().get(
@@ -65,28 +56,10 @@ const lightAdjustmentIncrement = useSettingStore().get(
   'Comfy.Load3D.LightAdjustmentIncrement'
 )
 
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    lightIntensity.value = newValue
-  }
-)
-
-watch(
-  () => props.showLightIntensityButton,
-  (newValue) => {
-    showLightIntensityButton.value = newValue
-  }
-)
-
 const toggleLightIntensity = () => {
   showLightIntensity.value = !showLightIntensity.value
 }
 
-const updateLightIntensity = () => {
-  emit('updateLightIntensity', lightIntensity.value)
-}
-
 const closeLightSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 
diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue
index ac8f11053..eae0092e9 100644
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -22,7 +22,7 @@
             :class="{ 'bg-blue-500': upDirection === direction }"
             @click="selectUpDirection(direction)"
           >
-            {{ formatOption(direction) }}
+            {{ direction.toUpperCase() }}
           </Button>
         </div>
       </div>
@@ -49,7 +49,7 @@
           <Button
             v-for="mode in materialModes"
             :key="mode"
-            class="p-button-text text-white"
+            class="p-button-text whitespace-nowrap text-white"
             :class="{ 'bg-blue-500': materialMode === mode }"
             @click="selectMaterialMode(mode)"
           >
@@ -58,75 +58,24 @@
         </div>
       </div>
     </div>
-
-    <div v-if="materialMode === 'lineart'" class="show-edge-threshold relative">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="toggleEdgeThreshold"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.edgeThreshold'),
-            showDelay: 300
-          }"
-          class="pi pi-sliders-h text-lg text-white"
-        />
-      </Button>
-      <div
-        v-show="showEdgeThreshold"
-        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
-        style="width: 150px"
-      >
-        <label class="mb-1 block text-xs text-white"
-          >{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
-        >
-        <Slider
-          v-model="edgeThreshold"
-          class="w-full"
-          :min="0"
-          :max="120"
-          :step="1"
-          @change="updateEdgeThreshold"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import Slider from 'primevue/slider'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
-const vTooltip = Tooltip
+const materialMode = defineModel<MaterialMode>('materialMode')
+const upDirection = defineModel<UpDirection>('upDirection')
 
-const props = defineProps<{
-  inputSpec: CustomInputSpec
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold?: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateUpDirection', direction: UpDirection): void
-  (e: 'updateMaterialMode', mode: MaterialMode): void
-  (e: 'updateEdgeThreshold', value: number): void
-}>()
-
-const upDirection = ref(props.upDirection || 'original')
-const materialMode = ref(props.materialMode || 'original')
-const edgeThreshold = ref(props.edgeThreshold || 85)
 const showUpDirection = ref(false)
 const showMaterialMode = ref(false)
-const showEdgeThreshold = ref(false)
 
 const upDirections: UpDirection[] = [
   'original',
@@ -146,65 +95,26 @@ const materialModes = computed(() => {
     //'depth' disable for now
   ]
 
-  if (!props.inputSpec.isAnimation && !props.inputSpec.isPreview) {
-    modes.push('lineart')
-  }
-
   return modes
 })
 
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    if (newValue) {
-      upDirection.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    if (newValue) {
-      materialMode.value = newValue
-    }
-  }
-)
-
-watch(
-  () => props.edgeThreshold,
-  (newValue) => {
-    // @ts-expect-error fixme ts strict error
-    edgeThreshold.value = newValue
-  }
-)
-
 const toggleUpDirection = () => {
   showUpDirection.value = !showUpDirection.value
   showMaterialMode.value = false
-  showEdgeThreshold.value = false
 }
 
 const selectUpDirection = (direction: UpDirection) => {
   upDirection.value = direction
-  emit('updateUpDirection', direction)
   showUpDirection.value = false
 }
 
-const formatOption = (option: string) => {
-  if (option === 'original') return 'Original'
-  return option.toUpperCase()
-}
-
 const toggleMaterialMode = () => {
   showMaterialMode.value = !showMaterialMode.value
   showUpDirection.value = false
-  showEdgeThreshold.value = false
 }
 
 const selectMaterialMode = (mode: MaterialMode) => {
   materialMode.value = mode
-  emit('updateMaterialMode', mode)
   showMaterialMode.value = false
 }
 
@@ -212,16 +122,6 @@ const formatMaterialMode = (mode: MaterialMode) => {
   return t(`load3d.materialModes.${mode}`)
 }
 
-const toggleEdgeThreshold = () => {
-  showEdgeThreshold.value = !showEdgeThreshold.value
-  showUpDirection.value = false
-  showMaterialMode.value = false
-}
-
-const updateEdgeThreshold = () => {
-  emit('updateEdgeThreshold', edgeThreshold.value)
-}
-
 const closeSceneSlider = (e: MouseEvent) => {
   const target = e.target as HTMLElement
 
@@ -232,10 +132,6 @@ const closeSceneSlider = (e: MouseEvent) => {
   if (!target.closest('.show-material-mode')) {
     showMaterialMode.value = false
   }
-
-  if (!target.closest('.show-edge-threshold')) {
-    showEdgeThreshold.value = false
-  }
 }
 
 onMounted(() => {
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index f37f2b6ae..7bc79ebc3 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -1,18 +1,6 @@
 <template>
-  <div class="relative rounded-lg bg-gray-700/30">
+  <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
-      <Button
-        class="p-button-rounded p-button-text"
-        @click="resizeNodeMatchOutput"
-      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.resizeNodeMatchOutput'),
-            showDelay: 300
-          }"
-          class="pi pi-window-maximize text-lg text-white"
-        />
-      </Button>
       <Button
         class="p-button-rounded p-button-text"
         :class="{
@@ -24,8 +12,8 @@
         <i
           v-tooltip.right="{
             value: isRecording
-              ? t('load3d.stopRecording')
-              : t('load3d.startRecording'),
+              ? $t('load3d.stopRecording')
+              : $t('load3d.startRecording'),
             showDelay: 300
           }"
           :class="[
@@ -39,11 +27,11 @@
       <Button
         v-if="hasRecording && !isRecording"
         class="p-button-rounded p-button-text"
-        @click="exportRecording"
+        @click="handleExportRecording"
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.exportRecording'),
+            value: $t('load3d.exportRecording'),
             showDelay: 300
           }"
           class="pi pi-download text-lg text-white"
@@ -53,11 +41,11 @@
       <Button
         v-if="hasRecording && !isRecording"
         class="p-button-rounded p-button-text"
-        @click="clearRecording"
+        @click="handleClearRecording"
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.clearRecording'),
+            value: $t('load3d.clearRecording'),
             showDelay: 300
           }"
           class="pi pi-trash text-lg text-white"
@@ -65,7 +53,7 @@
       </Button>
 
       <div
-        v-if="recordingDuration > 0 && !isRecording"
+        v-if="recordingDuration && recordingDuration > 0 && !isRecording"
         class="mt-1 text-center text-xs text-white"
       >
         {{ formatDuration(recordingDuration) }}
@@ -75,21 +63,11 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
-import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useLoad3dService } from '@/services/load3dService'
-
-const vTooltip = Tooltip
-
-const { hasRecording, isRecording, node, recordingDuration } = defineProps<{
-  hasRecording: boolean
-  isRecording: boolean
-  node: LGraphNode
-  recordingDuration: number
-}>()
+const hasRecording = defineModel<boolean>('hasRecording')
+const isRecording = defineModel<boolean>('isRecording')
+const recordingDuration = defineModel<number>('recordingDuration')
 
 const emit = defineEmits<{
   (e: 'startRecording'): void
@@ -98,49 +76,19 @@ const emit = defineEmits<{
   (e: 'clearRecording'): void
 }>()
 
-const resizeNodeMatchOutput = () => {
-  const outputWidth = node.widgets?.find((w) => w.name === 'width')
-  const outputHeight = node.widgets?.find((w) => w.name === 'height')
-
-  if (outputWidth && outputHeight && outputHeight.value && outputWidth.value) {
-    const [oldWidth, oldHeight] = node.size
-
-    const scene = node.widgets?.find((w) => w.name === 'image')
-
-    const sceneHeight = scene?.computedHeight
-
-    if (sceneHeight) {
-      const sceneWidth = oldWidth - 20
-
-      const outputRatio = Number(outputHeight.value) / Number(outputWidth.value)
-      const expectSceneHeight = sceneWidth * outputRatio
-
-      node.setSize([oldWidth, oldHeight + (expectSceneHeight - sceneHeight)])
-
-      node.graph?.setDirtyCanvas(true, true)
-
-      const load3d = useLoad3dService().getLoad3d(node as LGraphNode)
-
-      if (load3d) {
-        load3d.refreshViewport()
-      }
-    }
-  }
-}
-
 const toggleRecording = () => {
-  if (isRecording) {
+  if (isRecording.value) {
     emit('stopRecording')
   } else {
     emit('startRecording')
   }
 }
 
-const exportRecording = () => {
+const handleExportRecording = () => {
   emit('exportRecording')
 }
 
-const clearRecording = () => {
+const handleClearRecording = () => {
   emit('clearRecording')
 }
 
diff --git a/src/components/load3d/controls/SceneControls.vue b/src/components/load3d/controls/SceneControls.vue
index d212e43d4..b0fa98f21 100644
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -6,7 +6,7 @@
       @click="toggleGrid"
     >
       <i
-        v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
+        v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
         class="pi pi-table text-lg text-white"
       />
     </Button>
@@ -15,7 +15,7 @@
       <Button class="p-button-rounded p-button-text" @click="openColorPicker">
         <i
           v-tooltip.right="{
-            value: t('load3d.backgroundColor'),
+            value: $t('load3d.backgroundColor'),
             showDelay: 300
           }"
           class="pi pi-palette text-lg text-white"
@@ -36,7 +36,7 @@
       <Button class="p-button-rounded p-button-text" @click="openImagePicker">
         <i
           v-tooltip.right="{
-            value: t('load3d.uploadBackgroundImage'),
+            value: $t('load3d.uploadBackgroundImage'),
             showDelay: 300
           }"
           class="pi pi-image text-lg text-white"
@@ -58,7 +58,7 @@
       >
         <i
           v-tooltip.right="{
-            value: t('load3d.removeBackgroundImage'),
+            value: $t('load3d.removeBackgroundImage'),
             showDelay: 300
           }"
           class="pi pi-times text-lg text-white"
@@ -69,60 +69,29 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
-import { ref, watch } from 'vue'
-
-import { t } from '@/i18n'
-
-const vTooltip = Tooltip
-
-const props = defineProps<{
-  backgroundColor: string
-  showGrid: boolean
-  hasBackgroundImage?: boolean
-}>()
+import { computed, ref } from 'vue'
 
 const emit = defineEmits<{
-  (e: 'toggleGrid', value: boolean): void
-  (e: 'updateBackgroundColor', color: string): void
   (e: 'updateBackgroundImage', file: File | null): void
 }>()
 
-const backgroundColor = ref(props.backgroundColor)
-const showGrid = ref(props.showGrid)
-const hasBackgroundImage = ref(props.hasBackgroundImage)
+const showGrid = defineModel<boolean>('showGrid')
+const backgroundColor = defineModel<string>('backgroundColor')
+const backgroundImage = defineModel<string>('backgroundImage')
+const hasBackgroundImage = computed(
+  () => backgroundImage.value && backgroundImage.value !== ''
+)
+
 const colorPickerRef = ref<HTMLInputElement | null>(null)
 const imagePickerRef = ref<HTMLInputElement | null>(null)
 
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    backgroundColor.value = newValue
-  }
-)
-
-watch(
-  () => props.showGrid,
-  (newValue) => {
-    showGrid.value = newValue
-  }
-)
-
-watch(
-  () => props.hasBackgroundImage,
-  (newValue) => {
-    hasBackgroundImage.value = newValue
-  }
-)
-
 const toggleGrid = () => {
   showGrid.value = !showGrid.value
-  emit('toggleGrid', showGrid.value)
 }
 
 const updateBackgroundColor = (color: string) => {
-  emit('updateBackgroundColor', color)
+  backgroundColor.value = color
 }
 
 const openColorPicker = () => {
diff --git a/src/components/load3d/controls/ViewerControls.vue b/src/components/load3d/controls/ViewerControls.vue
index 2930aea0b..eaa70abab 100644
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-gray-700/30">
+  <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
       <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
         <i
@@ -15,7 +15,6 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
@@ -24,8 +23,6 @@ import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const vTooltip = Tooltip
-
 const { node } = defineProps<{
   node: LGraphNode
 }>()
diff --git a/src/components/load3d/controls/viewer/ViewerCameraControls.vue b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
index 94dd8b932..a251e80d0 100644
--- a/src/components/load3d/controls/viewer/ViewerCameraControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
@@ -14,7 +14,13 @@
 
   <div v-if="showFOVButton" class="space-y-4">
     <label>{{ t('load3d.fov') }}</label>
-    <Slider v-model="fov" :min="10" :max="150" :step="1" aria-label="fov" />
+    <Slider
+      v-model="fov"
+      :min="10"
+      :max="150"
+      :step="1"
+      :aria-label="t('load3d.fov')"
+    />
   </div>
 </template>
 
diff --git a/src/components/load3d/controls/viewer/ViewerExportControls.vue b/src/components/load3d/controls/viewer/ViewerExportControls.vue
index 6164e5bb0..048fc3db5 100644
--- a/src/components/load3d/controls/viewer/ViewerExportControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerExportControls.vue
@@ -8,7 +8,7 @@
   </Select>
 
   <Button severity="secondary" text rounded @click="exportModel(exportFormat)">
-    {{ t('load3d.export') }}
+    {{ $t('load3d.export') }}
   </Button>
 </template>
 
@@ -17,8 +17,6 @@ import Button from 'primevue/button'
 import Select from 'primevue/select'
 import { ref } from 'vue'
 
-import { t } from '@/i18n'
-
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()
diff --git a/src/components/load3d/controls/viewer/ViewerLightControls.vue b/src/components/load3d/controls/viewer/ViewerLightControls.vue
index e4cbcdb0c..bfd1e8faa 100644
--- a/src/components/load3d/controls/viewer/ViewerLightControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerLightControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <label>{{ t('load3d.lightIntensity') }}</label>
+  <label>{{ $t('load3d.lightIntensity') }}</label>
 
   <Slider
     v-model="lightIntensity"
@@ -13,7 +13,6 @@
 <script setup lang="ts">
 import Slider from 'primevue/slider'
 
-import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 
 const lightIntensity = defineModel<number>('lightIntensity')
diff --git a/src/components/load3d/controls/viewer/ViewerModelControls.vue b/src/components/load3d/controls/viewer/ViewerModelControls.vue
index ca8f26364..24ba78808 100644
--- a/src/components/load3d/controls/viewer/ViewerModelControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerModelControls.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4">
     <div>
-      <label>{{ t('load3d.upDirection') }}</label>
+      <label>{{ $t('load3d.upDirection') }}</label>
       <Select
         v-model="upDirection"
         :options="upDirectionOptions"
@@ -11,7 +11,7 @@
     </div>
 
     <div>
-      <label>{{ t('load3d.materialMode') }}</label>
+      <label>{{ $t('load3d.materialMode') }}</label>
       <Select
         v-model="materialMode"
         :options="materialModeOptions"
diff --git a/src/components/load3d/controls/viewer/ViewerSceneControls.vue b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
index 3cabcc7be..0e374ff91 100644
--- a/src/components/load3d/controls/viewer/ViewerSceneControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
@@ -2,7 +2,7 @@
   <div class="space-y-4">
     <div v-if="!hasBackgroundImage">
       <label>
-        {{ t('load3d.backgroundColor') }}
+        {{ $t('load3d.backgroundColor') }}
       </label>
       <input v-model="backgroundColor" type="color" class="w-full" />
     </div>
@@ -10,14 +10,14 @@
     <div>
       <Checkbox v-model="showGrid" input-id="showGrid" binary name="showGrid" />
       <label for="showGrid" class="pl-2">
-        {{ t('load3d.showGrid') }}
+        {{ $t('load3d.showGrid') }}
       </label>
     </div>
 
     <div v-if="!hasBackgroundImage">
       <Button
         severity="secondary"
-        :label="t('load3d.uploadBackgroundImage')"
+        :label="$t('load3d.uploadBackgroundImage')"
         icon="pi pi-image"
         class="w-full"
         @click="openImagePicker"
@@ -34,7 +34,7 @@
     <div v-if="hasBackgroundImage" class="space-y-2">
       <Button
         severity="secondary"
-        :label="t('load3d.removeBackgroundImage')"
+        :label="$t('load3d.removeBackgroundImage')"
         icon="pi pi-times"
         class="w-full"
         @click="removeBackgroundImage"
@@ -48,8 +48,6 @@ import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import { ref } from 'vue'
 
-import { t } from '@/i18n'
-
 const backgroundColor = defineModel<string>('backgroundColor')
 const showGrid = defineModel<boolean>('showGrid')
 
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 56e6a43d4..956147472 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -35,6 +35,7 @@
     </Dialog>
 
     <AutoCompletePlus
+      ref="autoCompletePlus"
       :model-value="filters"
       class="comfy-vue-node-search-box z-10 grow"
       scroll-height="40vh"
@@ -42,7 +43,6 @@
       :input-id="inputId"
       append-to="self"
       :suggestions="suggestions"
-      :min-length="0"
       :delay="100"
       :loading="!nodeFrequencyStore.isLoaded"
       complete-on-focus
@@ -51,7 +51,7 @@
       multiple
       :option-label="'display_name'"
       @complete="search($event.query)"
-      @option-select="emit('addNode', $event.value)"
+      @option-select="onAddNode($event.value)"
       @focused-option-changed="setHoverSuggestion($event)"
     >
       <template #option="{ option }">
@@ -78,6 +78,7 @@
 </template>
 
 <script setup lang="ts">
+import { debounce } from 'es-toolkit/compat'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import { computed, nextTick, onMounted, ref } from 'vue'
@@ -88,6 +89,7 @@ import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
@@ -96,6 +98,7 @@ import SearchFilterChip from '../common/SearchFilterChip.vue'
 
 const settingStore = useSettingStore()
 const { t } = useI18n()
+const telemetry = useTelemetry()
 
 const enableNodePreview = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview')
@@ -106,6 +109,7 @@ const { filters, searchLimit = 64 } = defineProps<{
   searchLimit?: number
 }>()
 
+const autoCompletePlus = ref()
 const nodeSearchFilterVisible = ref(false)
 const inputId = `comfy-vue-node-search-box-input-${Math.random()}`
 const suggestions = ref<ComfyNodeDefImpl[]>([])
@@ -117,6 +121,14 @@ const placeholder = computed(() => {
 
 const nodeDefStore = useNodeDefStore()
 const nodeFrequencyStore = useNodeFrequencyStore()
+
+// Debounced search tracking (500ms as per implementation plan)
+const debouncedTrackSearch = debounce((query: string) => {
+  if (query.trim()) {
+    telemetry?.trackNodeSearch({ query })
+  }
+}, 500)
+
 const search = (query: string) => {
   const queryIsEmpty = query === '' && filters.length === 0
   currentQuery.value = query
@@ -127,10 +139,22 @@ const search = (query: string) => {
           limit: searchLimit
         })
       ]
+
+  // Track search queries with debounce
+  debouncedTrackSearch(query)
 }
 
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
 
+// Track node selection and emit addNode event
+const onAddNode = (nodeDef: ComfyNodeDefImpl) => {
+  telemetry?.trackNodeSearchResultSelected({
+    node_type: nodeDef.name,
+    last_query: currentQuery.value
+  })
+  emit('addNode', nodeDef)
+}
+
 let inputElement: HTMLInputElement | null = null
 const reFocusInput = async () => {
   inputElement ??= document.getElementById(inputId) as HTMLInputElement
@@ -140,7 +164,13 @@ const reFocusInput = async () => {
   }
 }
 
-onMounted(reFocusInput)
+onMounted(() => {
+  inputElement ??= document.getElementById(inputId) as HTMLInputElement
+  if (inputElement) inputElement.focus()
+  autoCompletePlus.value.hide = () => search('')
+  search('')
+  autoCompletePlus.value.show()
+})
 const onAddFilter = (
   filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
 ) => {
diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/sidebar/ComfyMenuButton.vue
similarity index 77%
rename from src/components/topbar/CommandMenubar.vue
rename to src/components/sidebar/ComfyMenuButton.vue
index 36aa56948..d2168ae0a 100644
--- a/src/components/topbar/CommandMenubar.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -1,30 +1,30 @@
 <template>
   <div
-    class="comfyui-logo-wrapper mr-2 flex cursor-pointer items-center justify-center rounded-md p-1"
+    v-tooltip="{
+      value: t('sideToolbar.labels.menu'),
+      showDelay: 300,
+      hideDelay: 300
+    }"
+    class="comfy-menu-button-wrapper flex shrink-0 cursor-pointer flex-col items-center justify-center p-2 transition-colors"
     :class="{
-      'comfyui-logo-menu-visible': menuRef?.visible
+      'comfy-menu-button-active': menuRef?.visible
     }"
-    :style="{
-      minWidth: isLargeSidebar ? '4rem' : 'auto'
-    }"
-    @click="menuRef?.toggle($event)"
+    @click="onLogoMenuClick($event)"
   >
-    <img
-      src="/assets/images/comfy-logo-mono.svg"
-      alt="ComfyUI Logo"
-      class="comfyui-logo h-7"
-      @contextmenu="showNativeSystemMenu"
-    />
-    <i class="pi pi-angle-down ml-1 text-[10px]" />
+    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-black">
+      <ComfyLogo
+        alt="ComfyUI Logo"
+        class="comfyui-logo h-[18px] w-[18px] text-white"
+        mode="fill"
+      />
+    </div>
   </div>
+
   <TieredMenu
     ref="menuRef"
     :model="translatedItems"
     :popup="true"
     class="comfy-command-menu"
-    :class="{
-      'comfy-command-menu-top': isTopMenu
-    }"
     @show="onMenuShow"
   >
     <template #item="{ item, props }">
@@ -48,7 +48,7 @@
           v-else-if="
             item.icon && item.comfyCommand?.id !== 'Comfy.NewBlankWorkflow'
           "
-          class="p-menubar-item-icon"
+          class="p-menubar-item-icon text-sm"
           :class="item.icon"
         />
         <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
@@ -67,8 +67,6 @@
       </a>
     </template>
   </TieredMenu>
-
-  <SubgraphBreadcrumb />
 </template>
 
 <script setup lang="ts">
@@ -78,38 +76,41 @@ import type { TieredMenuMethods, TieredMenuState } from 'primevue/tieredmenu'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
+import ComfyLogo from '@/components/icons/ComfyLogo.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { showNativeSystemMenu } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const menuItemStore = useMenuItemStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
-const menuItemsStore = useMenuItemStore()
-const commandStore = useCommandStore()
 const dialogStore = useDialogStore()
-const settingStore = useSettingStore()
-const { t } = useI18n()
-
 const managerState = useManagerState()
 
 const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
-const isLargeSidebar = computed(
-  () => settingStore.get('Comfy.Sidebar.Size') !== 'small'
-)
-const isTopMenu = computed(() => settingStore.get('Comfy.UseNewMenu') === 'Top')
+
+const telemetry = useTelemetry()
+
+function onLogoMenuClick(event: MouseEvent) {
+  telemetry?.trackUiButtonClicked({
+    button_id: 'sidebar_comfy_menu_opened'
+  })
+  menuRef.value?.toggle(event)
+}
 
 const translateMenuItem = (item: MenuItem): MenuItem => {
   const label = typeof item.label === 'function' ? item.label() : item.label
@@ -168,13 +169,18 @@ const extraMenuItems = computed(() => [
     key: 'browse-templates',
     label: t('menuLabels.Browse Templates'),
     icon: 'icon-[comfy--template]',
-    command: () => commandStore.execute('Comfy.BrowseTemplates')
+    command: () => useWorkflowTemplateSelectorDialog().show('menu')
   },
   {
     key: 'settings',
     label: t('g.settings'),
     icon: 'mdi mdi-cog-outline',
-    command: () => showSettings()
+    command: () => {
+      telemetry?.trackUiButtonClicked({
+        button_id: 'sidebar_settings_menu_opened'
+      })
+      showSettings()
+    }
   },
   {
     key: 'manage-extensions',
@@ -185,7 +191,7 @@ const extraMenuItems = computed(() => [
 ])
 
 const translatedItems = computed(() => {
-  const items = menuItemsStore.menuItems.map(translateMenuItem)
+  const items = menuItemStore.menuItems.map(translateMenuItem)
   let helpIndex = items.findIndex((item) => item.key === 'Help')
   let helpItem: MenuItem | undefined
 
@@ -272,16 +278,24 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
   return (
     item.parentPath &&
     (item.parentPath === 'theme' ||
-      menuItemsStore.menuItemHasActiveStateChildren[item.parentPath])
+      menuItemStore.menuItemHasActiveStateChildren[item.parentPath])
   )
 }
 </script>
 
 <style scoped>
-@reference '../../assets/css/style.css';
+.comfy-menu-button-wrapper {
+  width: var(--sidebar-width);
+  height: var(--sidebar-item-height);
+}
 
-:deep(.p-menubar-submenu.dropdown-direction-up) {
-  @apply top-auto bottom-full flex-col-reverse;
+.comfy-menu-button-wrapper:hover {
+  background: var(--interface-panel-hover-surface);
+}
+
+.comfy-menu-button-active,
+.comfy-menu-button-active:hover {
+  background: var(--interface-panel-selected-surface);
 }
 
 .keybinding-tag {
@@ -289,11 +303,6 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
   border-color: var(--p-content-border-color);
   border-style: solid;
 }
-
-.comfyui-logo-menu-visible,
-.comfyui-logo-wrapper:hover {
-  background-color: color-mix(in srgb, var(--fg-color) 10%, transparent);
-}
 </style>
 
 <style>
@@ -309,22 +318,8 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
     transparent
   );
 }
+
 .comfy-command-menu ul {
-  background-color: var(--comfy-menu-secondary-bg) !important;
-}
-.comfy-command-menu-top .p-tieredmenu-submenu {
-  left: calc(100% + 15px) !important;
-  top: -4px !important;
-}
-@media (max-height: 700px) {
-  .comfy-command-menu .p-tieredmenu-submenu {
-    @apply absolute max-h-[90vh] overflow-y-auto;
-  }
-  /* Help (last) submenu upward offset in compact mode */
-  .p-tieredmenu-root-list
-    > .p-tieredmenu-item:last-of-type
-    .p-tieredmenu-submenu {
-    top: -188px !important;
-  }
+  background-color: var(--comfy-menu-bg) !important;
 }
 </style>
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index b7a33b7b0..a635a2188 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -1,48 +1,71 @@
 <template>
-  <teleport :to="teleportTarget">
-    <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
-      <SidebarIcon
-        v-for="tab in tabs"
-        :key="tab.id"
-        :icon="tab.icon"
-        :icon-badge="tab.iconBadge"
-        :tooltip="tab.tooltip"
-        :tooltip-suffix="getTabTooltipSuffix(tab)"
-        :label="tab.label || tab.title"
-        :is-small="isSmall"
-        :selected="tab.id === selectedTab?.id"
-        :class="tab.id + '-tab-button'"
-        @click="onTabClick(tab)"
-      />
-      <SidebarTemplatesButton />
-      <div class="side-tool-bar-end">
-        <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
-        <SidebarHelpCenterIcon />
-        <SidebarBottomPanelToggleButton />
-        <SidebarShortcutsToggleButton />
-      </div>
-    </nav>
-  </teleport>
-  <div
-    v-if="selectedTab"
-    class="sidebar-content-container h-full overflow-x-hidden overflow-y-auto"
+  <nav
+    ref="sideToolbarRef"
+    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2"
+    :class="{
+      'small-sidebar': isSmall,
+      'connected-sidebar': isConnected,
+      'floating-sidebar': !isConnected,
+      'overflowing-sidebar': isOverflowing,
+      'border-r border-[var(--interface-stroke)] shadow-interface': isConnected
+    }"
   >
-    <ExtensionSlot :extension="selectedTab" />
-  </div>
+    <div
+      ref="contentMeasureRef"
+      :class="
+        isOverflowing
+          ? 'side-tool-bar-container overflow-y-auto'
+          : 'flex flex-col h-full'
+      "
+    >
+      <div ref="topToolbarRef" :class="groupClasses">
+        <ComfyMenuButton />
+        <SidebarIcon
+          v-for="tab in tabs"
+          :key="tab.id"
+          :icon="tab.icon"
+          :icon-badge="tab.iconBadge"
+          :tooltip="tab.tooltip"
+          :tooltip-suffix="getTabTooltipSuffix(tab)"
+          :label="tab.label || tab.title"
+          :is-small="isSmall"
+          :selected="tab.id === selectedTab?.id"
+          :class="tab.id + '-tab-button'"
+          @click="onTabClick(tab)"
+        />
+        <SidebarTemplatesButton />
+      </div>
+
+      <div ref="bottomToolbarRef" class="mt-auto" :class="groupClasses">
+        <SidebarLogoutIcon
+          v-if="userStore.isMultiUserServer"
+          :is-small="isSmall"
+        />
+        <SidebarHelpCenterIcon :is-small="isSmall" />
+        <SidebarBottomPanelToggleButton :is-small="isSmall" />
+        <SidebarShortcutsToggleButton :is-small="isSmall" />
+      </div>
+    </div>
+  </nav>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { debounce } from 'es-toolkit/compat'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'
@@ -53,24 +76,63 @@ const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const userStore = useUserStore()
 const commandStore = useCommandStore()
-
-const teleportTarget = computed(() =>
-  settingStore.get('Comfy.Sidebar.Location') === 'left'
-    ? '.comfyui-body-left'
-    : '.comfyui-body-right'
-)
+const canvasStore = useCanvasStore()
+const sideToolbarRef = ref<HTMLElement>()
+const contentMeasureRef = ref<HTMLElement>()
+const topToolbarRef = ref<HTMLElement>()
+const bottomToolbarRef = ref<HTMLElement>()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+const sidebarStyle = computed(() => settingStore.get('Comfy.Sidebar.Style'))
+const isConnected = computed(
+  () =>
+    selectedTab.value ||
+    isOverflowing.value ||
+    sidebarStyle.value === 'connected'
+)
 
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
 
-const onTabClick = async (item: SidebarTabExtension) =>
+/**
+ * Handle sidebar tab icon click.
+ * - Emits UI button telemetry for known tabs
+ * - Delegates to the corresponding toggle command
+ */
+const onTabClick = async (item: SidebarTabExtension) => {
+  const telemetry = useTelemetry()
+
+  const isNodeLibraryTab = item.id === 'node-library'
+  const isModelLibraryTab = item.id === 'model-library'
+  const isWorkflowsTab = item.id === 'workflows'
+  const isAssetsTab = item.id === 'assets'
+
+  if (isNodeLibraryTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_node_library_selected'
+    })
+  else if (isModelLibraryTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_model_library_selected'
+    })
+  else if (isWorkflowsTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_workflows_selected'
+    })
+  else if (isAssetsTab)
+    telemetry?.trackUiButtonClicked({
+      button_id: 'sidebar_tab_assets_media_selected'
+    })
+
   await commandStore.commands
     .find((cmd) => cmd.id === `Workspace.ToggleSidebarTab.${item.id}`)
     ?.function?.()
+}
 
 const keybindingStore = useKeybindingStore()
 const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
@@ -79,6 +141,68 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   )
   return keybinding ? ` (${keybinding.combo.toString()})` : ''
 }
+
+const isOverflowing = ref(false)
+const groupClasses = computed(() =>
+  cn(
+    'sidebar-item-group pointer-events-auto flex flex-col items-center overflow-hidden flex-shrink-0' +
+      (isConnected.value ? '' : ' rounded-lg shadow-interface')
+  )
+)
+
+const ENTER_OVERFLOW_MARGIN = 20
+const EXIT_OVERFLOW_MARGIN = 50
+
+const checkOverflow = debounce(() => {
+  if (!sideToolbarRef.value || !topToolbarRef.value || !bottomToolbarRef.value)
+    return
+
+  const containerHeight = sideToolbarRef.value.clientHeight
+  const topHeight = topToolbarRef.value.scrollHeight
+  const bottomHeight = bottomToolbarRef.value.scrollHeight
+  const contentHeight = topHeight + bottomHeight
+
+  if (isOverflowing.value) {
+    isOverflowing.value = containerHeight < contentHeight + EXIT_OVERFLOW_MARGIN
+  } else {
+    isOverflowing.value =
+      containerHeight < contentHeight + ENTER_OVERFLOW_MARGIN
+  }
+}, 16)
+
+onMounted(() => {
+  if (!sideToolbarRef.value) return
+
+  const overflowObserver = useResizeObserver(
+    sideToolbarRef.value,
+    checkOverflow
+  )
+
+  checkOverflow()
+
+  onBeforeUnmount(() => {
+    overflowObserver.stop()
+  })
+
+  watch(
+    [isSmall, sidebarLocation],
+    async () => {
+      if (canvasStore.canvas) {
+        if (sidebarLocation.value === 'left') {
+          await nextTick()
+          canvasStore.canvas.fpsInfoLocation = [
+            sideToolbarRef.value?.getBoundingClientRect()?.right,
+            null
+          ]
+        } else {
+          canvasStore.canvas.fpsInfoLocation = null
+        }
+        canvasStore.canvas.setDirty(false, true)
+      }
+    },
+    { immediate: true }
+  )
+})
 </script>
 
 <style>
@@ -88,36 +212,64 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
  * but need to reference sidebar dimensions for proper positioning.
  */
 :root {
-  --sidebar-width: 4rem;
+  --sidebar-padding: 4px;
   --sidebar-icon-size: 1rem;
+
+  --sidebar-default-floating-width: 48px;
+  --sidebar-default-connected-width: calc(
+    var(--sidebar-default-floating-width) + var(--sidebar-padding) * 2
+  );
+  --sidebar-default-item-height: 56px;
+
+  --sidebar-small-floating-width: 48px;
+  --sidebar-small-connected-width: calc(
+    var(--sidebar-small-floating-width) + var(--sidebar-padding) * 2
+  );
+  --sidebar-small-item-height: 48px;
+
+  --sidebar-width: var(--sidebar-default-floating-width);
+  --sidebar-item-height: var(--sidebar-default-item-height);
 }
 
 :root:has(.side-tool-bar-container.small-sidebar) {
-  --sidebar-width: 2.5rem;
+  --sidebar-width: var(--sidebar-small-floating-width);
+  --sidebar-item-height: var(--sidebar-small-item-height);
+}
+
+:root:has(.side-tool-bar-container.connected-sidebar) {
+  --sidebar-width: var(--sidebar-default-connected-width);
+}
+
+:root:has(.side-tool-bar-container.small-sidebar.connected-sidebar) {
+  --sidebar-width: var(--sidebar-small-connected-width);
 }
 </style>
 
 <style scoped>
-.side-tool-bar-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+@reference "tailwindcss";
 
-  width: var(--sidebar-width);
-  height: 100%;
-
-  background-color: var(--comfy-menu-secondary-bg);
-  color: var(--fg-color);
-  box-shadow: var(--bar-shadow);
+.floating-sidebar {
+  padding: var(--sidebar-padding);
 }
 
-.side-tool-bar-container.small-sidebar {
-  --sidebar-width: 2.5rem;
-  --sidebar-icon-size: 1rem;
+.floating-sidebar .sidebar-item-group {
+  border-color: var(--p-panel-border-color);
 }
 
-.side-tool-bar-end {
-  align-self: flex-end;
-  margin-top: auto;
+.connected-sidebar {
+  padding: var(--sidebar-padding) 0;
+  background-color: var(--comfy-menu-bg);
+}
+
+.sidebar-item-group {
+  background-color: var(--comfy-menu-bg);
+  border: 1px solid transparent;
+}
+
+.overflowing-sidebar :deep(.comfy-menu-button-wrapper) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--comfy-menu-bg);
 }
 </style>
diff --git a/src/components/sidebar/SidebarBottomPanelToggleButton.vue b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
index c51d9df89..8ed0d9ee7 100644
--- a/src/components/sidebar/SidebarBottomPanelToggleButton.vue
+++ b/src/components/sidebar/SidebarBottomPanelToggleButton.vue
@@ -1,8 +1,9 @@
 <template>
   <SidebarIcon
+    :label="$t('sideToolbar.labels.console')"
     :tooltip="$t('menu.toggleBottomPanel')"
     :selected="bottomPanelStore.activePanel == 'terminal'"
-    @click="bottomPanelStore.toggleBottomPanel"
+    @click="toggleConsole"
   >
     <template #icon>
       <i-ph:terminal-bold />
@@ -11,9 +12,20 @@
 </template>
 
 <script setup lang="ts">
+import { useTelemetry } from '@/platform/telemetry'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
 const bottomPanelStore = useBottomPanelStore()
+
+/**
+ * Toggle console bottom panel and track UI button click.
+ */
+const toggleConsole = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_bottom_panel_console_toggled'
+  })
+  bottomPanelStore.toggleBottomPanel()
+}
 </script>
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index e72389022..b8d8cea39 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -3,8 +3,10 @@
     <SidebarIcon
       icon="pi pi-question-circle"
       class="comfy-help-center-btn"
+      :label="$t('menu.help')"
       :tooltip="$t('sideToolbar.helpCenter')"
       :icon-badge="shouldShowRedDot ? '•' : ''"
+      :is-small="isSmall"
       @click="toggleHelpCenter"
     />
 
@@ -16,7 +18,7 @@
         :class="{
           'sidebar-left': sidebarLocation === 'left',
           'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
+          'small-sidebar': isSmall
         }"
       >
         <HelpCenterMenuContent @close="closeHelpCenter" />
@@ -29,7 +31,7 @@
         :class="{
           'sidebar-left': sidebarLocation === 'left',
           'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
+          'small-sidebar': isSmall
         }"
       />
     </Teleport>
@@ -40,7 +42,7 @@
         :class="{
           'sidebar-left': sidebarLocation === 'left',
           'sidebar-right': sidebarLocation === 'right',
-          'small-sidebar': sidebarSize === 'small'
+          'small-sidebar': isSmall
         }"
         @whats-new-dismissed="handleWhatsNewDismissed"
       />
@@ -59,10 +61,11 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, toRefs } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
@@ -87,6 +90,11 @@ const { showNodeConflictDialog } = useDialogService()
 const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =
   useConflictAcknowledgment()
 
+const props = defineProps<{
+  isSmall: boolean
+}>()
+const { isSmall } = toRefs(props)
+
 // Use either release red dot or conflict red dot
 const shouldShowRedDot = computed((): boolean => {
   const releaseRedDot = showReleaseRedDot.value
@@ -97,9 +105,13 @@ const sidebarLocation = computed(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 
-const sidebarSize = computed(() => settingStore.get('Comfy.Sidebar.Size'))
-
+/**
+ * Toggle Help Center and track UI button click.
+ */
 const toggleHelpCenter = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_help_center_toggled'
+  })
   helpCenterStore.toggle()
 }
 
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index e09ab5baa..b740a070b 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -8,10 +8,8 @@
     text
     :pt="{
       root: {
-        class: `side-bar-button ${
-          selected
-            ? 'p-button-primary side-bar-button-selected'
-            : 'p-button-secondary'
+        class: `side-bar-button p-button-secondary ${
+          selected ? 'side-bar-button-selected' : ''
         }`,
         'aria-label': computedTooltip
       }
@@ -76,7 +74,7 @@ const emit = defineEmits<{
   (e: 'click', event: MouseEvent): void
 }>()
 const overlayValue = computed(() =>
-  typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
+  typeof iconBadge === 'function' ? (iconBadge() ?? '') : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
 const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
@@ -87,9 +85,17 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
   font-size: var(--sidebar-icon-size) !important;
 }
 
+.side-bar-button-selected {
+  background-color: var(--interface-panel-selected-surface);
+  color: var(--content-hover-fg);
+}
+.side-bar-button:hover {
+  background-color: var(--interface-panel-hover-surface);
+  color: var(--content-hover-fg);
+}
+
 .side-bar-button-selected .side-bar-button-icon {
   font-size: var(--sidebar-icon-size) !important;
-  font-weight: 700;
 }
 </style>
 
@@ -98,8 +104,9 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 
 .side-bar-button {
   width: var(--sidebar-width);
-  height: calc(var(--sidebar-width) + 0.5rem);
+  height: var(--sidebar-item-height);
   border-radius: 0;
+  flex-shrink: 0;
 }
 
 .side-tool-bar-end .side-bar-button {
diff --git a/src/components/sidebar/SidebarLogoutIcon.vue b/src/components/sidebar/SidebarLogoutIcon.vue
index db89817a7..098a897bb 100644
--- a/src/components/sidebar/SidebarLogoutIcon.vue
+++ b/src/components/sidebar/SidebarLogoutIcon.vue
@@ -1,5 +1,10 @@
 <template>
-  <SidebarIcon icon="pi pi-sign-out" :tooltip="tooltip" @click="logout" />
+  <SidebarIcon
+    icon="pi pi-sign-out"
+    :tooltip="tooltip"
+    :label="$t('sideToolbar.logout')"
+    @click="logout"
+  />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/sidebar/SidebarShortcutsToggleButton.vue b/src/components/sidebar/SidebarShortcutsToggleButton.vue
index 6fb6e66bf..73f8cbe21 100644
--- a/src/components/sidebar/SidebarShortcutsToggleButton.vue
+++ b/src/components/sidebar/SidebarShortcutsToggleButton.vue
@@ -1,5 +1,6 @@
 <template>
   <SidebarIcon
+    :label="$t('shortcuts.shortcuts')"
     :tooltip="tooltipText"
     :selected="isShortcutsPanelVisible"
     @click="toggleShortcutsPanel"
@@ -14,6 +15,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
@@ -33,7 +35,13 @@ const tooltipText = computed(
   () => `${t('shortcuts.keyboardShortcuts')} (${formatKeySequence(command)})`
 )
 
+/**
+ * Toggle keyboard shortcuts panel and track UI button click.
+ */
 const toggleShortcutsPanel = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_shortcuts_panel_toggled'
+  })
   bottomPanelStore.togglePanel('shortcuts')
 }
 </script>
diff --git a/src/components/sidebar/SidebarTemplatesButton.vue b/src/components/sidebar/SidebarTemplatesButton.vue
index e6c9e8f48..f0224cfab 100644
--- a/src/components/sidebar/SidebarTemplatesButton.vue
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -12,19 +12,25 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
+import { useTelemetry } from '@/platform/telemetry'
 
 import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
-const commandStore = useCommandStore()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
 
+/**
+ * Open templates dialog from sidebar and track UI button click.
+ */
 const openTemplates = () => {
-  void commandStore.execute('Comfy.BrowseTemplates')
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_templates_dialog_opened'
+  })
+  useWorkflowTemplateSelectorDialog().show('sidebar')
 }
 </script>
diff --git a/src/components/sidebar/tabs/AssetSidebarTemplate.vue b/src/components/sidebar/tabs/AssetSidebarTemplate.vue
new file mode 100644
index 000000000..f7de9022d
--- /dev/null
+++ b/src/components/sidebar/tabs/AssetSidebarTemplate.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="flex h-full flex-col bg-interface-panel-surface"
+    :class="props.class"
+  >
+    <div>
+      <div
+        v-if="slots.top"
+        class="flex min-h-12 items-center border-b border-interface-stroke px-4 py-2"
+      >
+        <slot name="top" />
+      </div>
+      <div v-if="slots.header" class="px-4">
+        <slot name="header" />
+      </div>
+    </div>
+    <!-- h-0 to force scrollpanel to grow -->
+    <ScrollPanel class="h-0 grow">
+      <slot name="body" />
+    </ScrollPanel>
+    <div v-if="slots.footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { useSlots } from 'vue'
+
+const props = defineProps<{
+  class?: string
+}>()
+
+const slots = useSlots()
+</script>
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
new file mode 100644
index 000000000..16fc147e5
--- /dev/null
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -0,0 +1,398 @@
+<template>
+  <AssetsSidebarTemplate>
+    <template #top>
+      <span v-if="!isInFolderView" class="font-bold">
+        {{ $t('sideToolbar.mediaAssets') }}
+      </span>
+      <div v-else class="flex w-full items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <span class="font-bold">{{ $t('Job ID') }}:</span>
+          <span class="text-sm">{{ folderPromptId?.substring(0, 8) }}</span>
+          <button
+            class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0"
+            role="button"
+            @click="copyJobId"
+          >
+            <i class="mb-1 icon-[lucide--copy] text-sm"></i>
+          </button>
+        </div>
+        <div>
+          <span>{{ formattedExecutionTime }}</span>
+        </div>
+      </div>
+    </template>
+    <template #header>
+      <!-- Job Detail View Header -->
+      <div v-if="isInFolderView" class="pt-4 pb-2">
+        <IconTextButton
+          :label="$t('sideToolbar.backToAssets')"
+          type="secondary"
+          @click="exitFolderView"
+        >
+          <template #icon>
+            <i class="icon-[lucide--arrow-left] size-4" />
+          </template>
+        </IconTextButton>
+      </div>
+      <!-- Normal Tab View -->
+      <TabList v-else v-model="activeTab" class="pt-4 pb-1">
+        <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
+        <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
+      </TabList>
+    </template>
+    <template #body>
+      <div v-if="displayAssets.length" class="relative size-full">
+        <VirtualGrid
+          v-if="displayAssets.length"
+          :items="mediaAssetsWithKey"
+          :grid-style="{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            padding: '0.5rem',
+            gap: '0.5rem'
+          }"
+        >
+          <template #item="{ item }">
+            <MediaAssetCard
+              :asset="item"
+              :selected="isSelected(item.id)"
+              :show-output-count="shouldShowOutputCount(item)"
+              :output-count="getOutputCount(item)"
+              :show-delete-button="!isInFolderView"
+              @click="handleAssetSelect(item)"
+              @zoom="handleZoomClick(item)"
+              @output-count-click="enterFolderView(item)"
+              @asset-deleted="refreshAssets"
+            />
+          </template>
+        </VirtualGrid>
+        <div v-else-if="loading">
+          <ProgressSpinner
+            class="absolute left-1/2 w-[50px] -translate-x-1/2"
+          />
+        </div>
+        <div v-else>
+          <NoResultsPlaceholder
+            icon="pi pi-info-circle"
+            :title="
+              $t(
+                activeTab === 'input'
+                  ? 'sideToolbar.noImportedFiles'
+                  : 'sideToolbar.noGeneratedFiles'
+              )
+            "
+            :message="$t('sideToolbar.noFilesFoundMessage')"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div
+        v-if="hasSelection && activeTab === 'output'"
+        class="flex h-18 w-full items-center justify-between px-4"
+      >
+        <div>
+          <TextButton
+            v-if="isHoveringSelectionCount"
+            :label="$t('mediaAsset.selection.deselectAll')"
+            type="transparent"
+            @click="handleDeselectAll"
+            @mouseleave="isHoveringSelectionCount = false"
+          />
+          <span
+            v-else
+            role="button"
+            tabindex="0"
+            :aria-label="$t('mediaAsset.selection.deselectAll')"
+            class="cursor-pointer px-3 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
+            @mouseenter="isHoveringSelectionCount = true"
+            @keydown.enter="handleDeselectAll"
+            @keydown.space.prevent="handleDeselectAll"
+          >
+            {{
+              $t('mediaAsset.selection.selectedCount', { count: selectedCount })
+            }}
+          </span>
+        </div>
+        <div class="flex gap-2">
+          <IconTextButton
+            v-if="!isInFolderView"
+            :label="$t('mediaAsset.selection.deleteSelected')"
+            type="secondary"
+            icon-position="right"
+            @click="handleDeleteSelected"
+          >
+            <template #icon>
+              <i class="icon-[lucide--trash-2] size-4" />
+            </template>
+          </IconTextButton>
+          <IconTextButton
+            :label="$t('mediaAsset.selection.downloadSelected')"
+            type="secondary"
+            icon-position="right"
+            @click="handleDownloadSelected"
+          >
+            <template #icon>
+              <i class="icon-[lucide--download] size-4" />
+            </template>
+          </IconTextButton>
+        </div>
+      </div>
+    </template>
+  </AssetsSidebarTemplate>
+  <ResultGallery
+    v-model:active-index="galleryActiveIndex"
+    :all-gallery-items="galleryItems"
+  />
+</template>
+
+<script setup lang="ts">
+import ProgressSpinner from 'primevue/progressspinner'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import Tab from '@/components/tab/Tab.vue'
+import TabList from '@/components/tab/TabList.vue'
+import { t } from '@/i18n'
+import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
+import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
+import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
+import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { ResultItemImpl } from '@/stores/queueStore'
+import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
+
+import AssetsSidebarTemplate from './AssetSidebarTemplate.vue'
+
+const activeTab = ref<'input' | 'output'>('output')
+const folderPromptId = ref<string | null>(null)
+const folderExecutionTime = ref<number | undefined>(undefined)
+const isInFolderView = computed(() => folderPromptId.value !== null)
+
+const getOutputCount = (item: AssetItem): number => {
+  const count = item.user_metadata?.outputCount
+  return typeof count === 'number' && count > 0 ? count : 0
+}
+
+const shouldShowOutputCount = (item: AssetItem): boolean => {
+  if (activeTab.value !== 'output' || isInFolderView.value) {
+    return false
+  }
+  return getOutputCount(item) > 1
+}
+
+const formattedExecutionTime = computed(() => {
+  if (!folderExecutionTime.value) return ''
+  return formatDuration(folderExecutionTime.value * 1000)
+})
+
+const toast = useToast()
+
+const inputAssets = useMediaAssets('input')
+const outputAssets = useMediaAssets('output')
+
+// Asset selection
+const {
+  isSelected,
+  handleAssetClick,
+  hasSelection,
+  selectedCount,
+  clearSelection,
+  getSelectedAssets,
+  activate: activateSelection,
+  deactivate: deactivateSelection
+} = useAssetSelection()
+
+const { downloadMultipleAssets, deleteMultipleAssets } = useMediaAssetActions()
+
+// Hover state for selection count
+const isHoveringSelectionCount = ref(false)
+
+const currentAssets = computed(() =>
+  activeTab.value === 'input' ? inputAssets : outputAssets
+)
+const loading = computed(() => currentAssets.value.loading.value)
+const error = computed(() => currentAssets.value.error.value)
+const mediaAssets = computed(() => currentAssets.value.media.value)
+
+const galleryActiveIndex = ref(-1)
+const currentGalleryAssetId = ref<string | null>(null)
+
+const folderAssets = ref<AssetItem[]>([])
+
+const displayAssets = computed(() => {
+  if (isInFolderView.value) {
+    return folderAssets.value
+  }
+  return mediaAssets.value
+})
+
+watch(displayAssets, (newAssets) => {
+  if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
+    const newIndex = newAssets.findIndex(
+      (asset) => asset.id === currentGalleryAssetId.value
+    )
+    if (newIndex !== -1) {
+      galleryActiveIndex.value = newIndex
+    }
+  }
+})
+
+watch(galleryActiveIndex, (index) => {
+  if (index === -1) {
+    currentGalleryAssetId.value = null
+  }
+})
+
+const galleryItems = computed(() => {
+  return displayAssets.value.map((asset) => {
+    const mediaType = getMediaTypeFromFilename(asset.name)
+    const resultItem = new ResultItemImpl({
+      filename: asset.name,
+      subfolder: '',
+      type: 'output',
+      nodeId: '0',
+      mediaType: mediaType === 'image' ? 'images' : mediaType
+    })
+
+    Object.defineProperty(resultItem, 'url', {
+      get() {
+        return asset.preview_url || ''
+      },
+      configurable: true
+    })
+
+    return resultItem
+  })
+})
+
+// Add key property for VirtualGrid
+const mediaAssetsWithKey = computed(() => {
+  return displayAssets.value.map((asset) => ({
+    ...asset,
+    key: asset.id
+  }))
+})
+
+const refreshAssets = async () => {
+  await currentAssets.value.fetchMediaList()
+  if (error.value) {
+    console.error('Failed to refresh assets:', error.value)
+  }
+}
+
+watch(
+  activeTab,
+  () => {
+    clearSelection()
+    void refreshAssets()
+  },
+  { immediate: true }
+)
+
+const handleAssetSelect = (asset: AssetItem) => {
+  const index = displayAssets.value.findIndex((a) => a.id === asset.id)
+  handleAssetClick(asset, index, displayAssets.value)
+}
+
+const handleZoomClick = (asset: AssetItem) => {
+  currentGalleryAssetId.value = asset.id
+  const index = displayAssets.value.findIndex((a) => a.id === asset.id)
+  if (index !== -1) {
+    galleryActiveIndex.value = index
+  }
+}
+
+const enterFolderView = (asset: AssetItem) => {
+  const metadata = getOutputAssetMetadata(asset.user_metadata)
+  if (!metadata) {
+    console.warn('Invalid output asset metadata')
+    return
+  }
+
+  const { promptId, allOutputs, executionTimeInSeconds } = metadata
+
+  if (!promptId || !Array.isArray(allOutputs) || allOutputs.length === 0) {
+    console.warn('Missing required folder view data')
+    return
+  }
+
+  folderPromptId.value = promptId
+  folderExecutionTime.value = executionTimeInSeconds
+
+  folderAssets.value = allOutputs.map((output) => ({
+    id: `${output.nodeId}-${output.filename}`,
+    name: output.filename,
+    size: 0,
+    created_at: asset.created_at,
+    tags: ['output'],
+    preview_url: output.url,
+    user_metadata: {
+      promptId,
+      nodeId: output.nodeId,
+      subfolder: output.subfolder,
+      executionTimeInSeconds,
+      workflow: metadata.workflow
+    }
+  }))
+}
+
+const exitFolderView = () => {
+  folderPromptId.value = null
+  folderExecutionTime.value = undefined
+  folderAssets.value = []
+  clearSelection()
+}
+
+onMounted(() => {
+  activateSelection()
+})
+
+onUnmounted(() => {
+  deactivateSelection()
+})
+
+const handleDeselectAll = () => {
+  clearSelection()
+  isHoveringSelectionCount.value = false
+}
+
+const copyJobId = async () => {
+  if (folderPromptId.value) {
+    try {
+      await navigator.clipboard.writeText(folderPromptId.value)
+      toast.add({
+        severity: 'success',
+        summary: t('mediaAsset.jobIdToast.copied'),
+        detail: t('mediaAsset.jobIdToast.jobIdCopied'),
+        life: 2000
+      })
+    } catch (error) {
+      toast.add({
+        severity: 'error',
+        summary: t('mediaAsset.jobIdToast.error'),
+        detail: t('mediaAsset.jobIdToast.jobIdCopyFailed'),
+        life: 3000
+      })
+    }
+  }
+}
+
+const handleDownloadSelected = () => {
+  const selectedAssets = getSelectedAssets(displayAssets.value)
+  downloadMultipleAssets(selectedAssets)
+  clearSelection()
+}
+
+const handleDeleteSelected = async () => {
+  const selectedAssets = getSelectedAssets(displayAssets.value)
+  await deleteMultipleAssets(selectedAssets)
+  clearSelection()
+}
+</script>
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 9e1219c2f..cbe4980af 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -104,6 +104,7 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
@@ -206,7 +207,9 @@ const menuItems = computed<MenuItem[]>(() => {
       label: t('g.loadWorkflow'),
       icon: 'pi pi-file-export',
       command: () => menuTargetTask.value?.loadWorkflow(app),
-      disabled: !menuTargetTask.value?.workflow
+      disabled: isCloud
+        ? !menuTargetTask.value?.isHistory
+        : !menuTargetTask.value?.workflow
     },
     {
       label: t('g.goToNode'),
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
index 538023336..ca7574cf6 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -16,7 +16,7 @@
       <ProgressSpinner
         v-if="isLoading"
         class="m-auto"
-        aria-label="Loading help"
+        :aria-label="$t('g.loading')"
       />
       <!-- Markdown fetched successfully -->
       <div
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index fb52d8c85..edba96e05 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -59,7 +59,7 @@
 
     <teleport v-if="isHovered" to="#node-library-node-preview-container">
       <div class="node-lib-node-preview" :style="nodePreviewStyle">
-        <NodePreview ref="previewRef" :node-def="nodeDef" />
+        <NodePreview :node-def="nodeDef" />
       </div>
     </teleport>
   </div>
@@ -132,11 +132,12 @@ function deleteBlueprint() {
   void useSubgraphStore().deleteBlueprint(props.node.data.name)
 }
 
-const previewRef = ref<InstanceType<typeof NodePreview> | null>(null)
 const nodePreviewStyle = ref<CSSProperties>({
-  position: 'absolute',
+  position: 'fixed',
   top: '0px',
-  left: '0px'
+  left: '0px',
+  pointerEvents: 'none',
+  zIndex: 1001
 })
 
 const handleNodeHover = async () => {
@@ -144,19 +145,15 @@ const handleNodeHover = async () => {
   if (!hoverTarget) return
 
   const targetRect = hoverTarget.getBoundingClientRect()
+  const margin = 40
 
-  const previewHeight = previewRef.value?.$el.offsetHeight || 0
-  const availableSpaceBelow = window.innerHeight - targetRect.bottom
-
-  nodePreviewStyle.value.top =
-    previewHeight > availableSpaceBelow
-      ? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px`
-      : `${targetRect.top - 40}px`
-  if (sidebarLocation.value === 'left') {
-    nodePreviewStyle.value.left = `${targetRect.right}px`
-  } else {
-    nodePreviewStyle.value.left = `${targetRect.left - 400}px`
-  }
+  nodePreviewStyle.value.top = `${targetRect.top}px`
+  nodePreviewStyle.value.left =
+    sidebarLocation.value === 'left'
+      ? `${targetRect.right + margin}px`
+      : `${targetRect.left - margin}px`
+  nodePreviewStyle.value.transform =
+    sidebarLocation.value === 'right' ? 'translateX(-100%)' : undefined
 }
 
 const container = ref<HTMLElement | null>(null)
diff --git a/src/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue
index 288b684db..a67c7eb7f 100644
--- a/src/components/sidebar/tabs/queue/TaskItem.vue
+++ b/src/components/sidebar/tabs/queue/TaskItem.vue
@@ -100,9 +100,9 @@ const coverResult = flatOutputs.length
 // Using `==` instead of `===` because NodeId can be a string or a number
 const node: ComfyNode | null =
   flatOutputs.length && props.task.workflow
-    ? props.task.workflow.nodes.find(
+    ? (props.task.workflow.nodes.find(
         (n: ComfyNode) => n.id == coverResult?.nodeId
-      ) ?? null
+      ) ?? null)
     : null
 const progressPreviewBlobUrl = ref('')
 
diff --git a/src/components/tab/Tab.vue b/src/components/tab/Tab.vue
new file mode 100644
index 000000000..ecdc24e2a
--- /dev/null
+++ b/src/components/tab/Tab.vue
@@ -0,0 +1,48 @@
+<template>
+  <button
+    :id="tabId"
+    :class="tabClasses"
+    role="tab"
+    :aria-selected="isActive"
+    :aria-controls="panelId"
+    :tabindex="0"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { computed, inject } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { value, panelId } = defineProps<{
+  value: string
+  panelId?: string
+}>()
+
+const currentValue = inject<Ref<string>>('tabs-value')
+const updateValue = inject<(value: string) => void>('tabs-update')
+
+const tabId = computed(() => `tab-${value}`)
+const isActive = computed(() => currentValue?.value === value)
+
+const tabClasses = computed(() => {
+  return cn(
+    // Base styles from TextButton
+    'flex items-center justify-center shrink-0',
+    'px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200',
+    'outline-hidden border-none',
+    // State styles with semantic tokens
+    isActive.value
+      ? 'bg-interface-menu-component-surface-hovered text-text-primary text-bold'
+      : 'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
+  )
+})
+
+const handleClick = () => {
+  updateValue?.(value)
+}
+</script>
diff --git a/src/components/tab/TabList.stories.ts b/src/components/tab/TabList.stories.ts
new file mode 100644
index 000000000..96ae14cc4
--- /dev/null
+++ b/src/components/tab/TabList.stories.ts
@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Tab from './Tab.vue'
+import TabList from './TabList.vue'
+
+const meta: Meta<typeof TabList> = {
+  title: 'Components/Tab/TabList',
+  component: TabList,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The currently selected tab value'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref(args.modelValue || 'tab1')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  }),
+  args: {
+    modelValue: 'tab1'
+  }
+}
+
+export const ManyTabs: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('tab1')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="tab1">Dashboard</Tab>
+        <Tab value="tab2">Analytics</Tab>
+        <Tab value="tab3">Reports</Tab>
+        <Tab value="tab4">Settings</Tab>
+        <Tab value="tab5">Profile</Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  })
+}
+
+export const WithIcons: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('home')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="home">
+          <i class="pi pi-home mr-2"></i>
+          Home
+        </Tab>
+        <Tab value="users">
+          <i class="pi pi-users mr-2"></i>
+          Users
+        </Tab>
+        <Tab value="settings">
+          <i class="pi pi-cog mr-2"></i>
+          Settings
+        </Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  })
+}
+
+export const LongLabels: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('overview')
+      return { activeTab }
+    },
+    template: `
+      <TabList v-model="activeTab">
+        <Tab value="overview">Project Overview</Tab>
+        <Tab value="documentation">Documentation & Guides</Tab>
+        <Tab value="deployment">Deployment Settings</Tab>
+        <Tab value="monitoring">Monitoring & Analytics</Tab>
+      </TabList>
+      <div class="mt-4 p-4 border rounded">
+        Selected tab: {{ activeTab }}
+      </div>
+    `
+  })
+}
+
+export const Interactive: Story = {
+  render: () => ({
+    components: { TabList, Tab },
+    setup() {
+      const activeTab = ref('input')
+      const handleTabChange = (value: string) => {
+        console.log('Tab changed to:', value)
+      }
+      return { activeTab, handleTabChange }
+    },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <h3 class="text-sm font-semibold mb-2">Example: Media Assets</h3>
+          <TabList v-model="activeTab" @update:model-value="handleTabChange">
+            <Tab value="input">Imported</Tab>
+            <Tab value="output">Generated</Tab>
+          </TabList>
+        </div>
+        
+        <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded">
+          <div v-if="activeTab === 'input'">
+            <p>Showing imported assets...</p>
+          </div>
+          <div v-else-if="activeTab === 'output'">
+            <p>Showing generated assets...</p>
+          </div>
+        </div>
+        
+        <div class="text-sm text-gray-600">
+          Current tab value: <code>{{ activeTab }}</code>
+        </div>
+      </div>
+    `
+  })
+}
diff --git a/src/components/tab/TabList.vue b/src/components/tab/TabList.vue
new file mode 100644
index 000000000..9ef559acb
--- /dev/null
+++ b/src/components/tab/TabList.vue
@@ -0,0 +1,17 @@
+<template>
+  <div role="tablist" class="flex w-full items-center gap-2 pb-1">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue'
+
+const modelValue = defineModel<string>({ required: true })
+
+// Provide for child Tab components
+provide('tabs-value', modelValue)
+provide('tabs-update', (value: string) => {
+  modelValue.value = value
+})
+</script>
diff --git a/src/components/toast/GlobalToast.vue b/src/components/toast/GlobalToast.vue
index c60524a48..1955afe65 100644
--- a/src/components/toast/GlobalToast.vue
+++ b/src/components/toast/GlobalToast.vue
@@ -64,8 +64,9 @@ function updateToastPosition() {
 
   styleElement.textContent = `
     .p-toast.p-component.p-toast-top-right {
-      top: ${rect.top + 20}px !important;
+      top: ${rect.top + 100}px !important;
       right: ${window.innerWidth - (rect.left + rect.width) + 20}px !important;
+       z-index: 10000 !important;
     }
   `
 }
diff --git a/src/components/toast/VueNodesMigrationToast.vue b/src/components/toast/VueNodesMigrationToast.vue
new file mode 100644
index 000000000..ae86f74e6
--- /dev/null
+++ b/src/components/toast/VueNodesMigrationToast.vue
@@ -0,0 +1,48 @@
+<template>
+  <Toast
+    group="vue-nodes-migration"
+    position="bottom-center"
+    class="w-auto"
+    @close="handleClose"
+  >
+    <template #message>
+      <div class="flex flex-auto items-center justify-between gap-4">
+        <span class="whitespace-nowrap">{{
+          t('vueNodesMigration.message')
+        }}</span>
+        <Button
+          class="whitespace-nowrap"
+          size="small"
+          :label="t('vueNodesMigration.button')"
+          text
+          @click="handleOpenSettings"
+        />
+      </div>
+    </template>
+  </Toast>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue'
+import Button from 'primevue/button'
+import Toast from 'primevue/toast'
+import { useI18n } from 'vue-i18n'
+
+import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
+import { useDialogService } from '@/services/dialogService'
+
+const { t } = useI18n()
+const toast = useToast()
+const dialogService = useDialogService()
+const isDismissed = useVueNodesMigrationDismissed()
+
+const handleOpenSettings = () => {
+  dialogService.showSettingsDialog()
+  toast.removeGroup('vue-nodes-migration')
+  isDismissed.value = true
+}
+
+const handleClose = () => {
+  isDismissed.value = true
+}
+</script>
diff --git a/src/components/topbar/CloudBadge.vue b/src/components/topbar/CloudBadge.vue
new file mode 100644
index 000000000..93772f7f4
--- /dev/null
+++ b/src/components/topbar/CloudBadge.vue
@@ -0,0 +1,38 @@
+<template>
+  <TopbarBadge
+    :badge="cloudBadge"
+    :display-mode="displayMode"
+    :reverse-order="reverseOrder"
+    :no-padding="noPadding"
+    :background-color="backgroundColor"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
+
+import TopbarBadge from './TopbarBadge.vue'
+
+withDefaults(
+  defineProps<{
+    displayMode?: 'full' | 'compact' | 'icon-only'
+    reverseOrder?: boolean
+    noPadding?: boolean
+    backgroundColor?: string
+  }>(),
+  {
+    displayMode: 'full',
+    reverseOrder: false,
+    noPadding: false,
+    backgroundColor: 'var(--comfy-menu-bg)'
+  }
+)
+
+const cloudBadge = computed<TopbarBadgeType>(() => ({
+  label: t('g.beta'),
+  text: 'Comfy Cloud'
+}))
+</script>
diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index 1d92552e1..f41efc2bf 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -3,16 +3,18 @@
   <div>
     <Button
       v-if="isLoggedIn"
-      class="user-profile-button p-1"
+      class="user-profile-button p-1 hover:bg-transparent"
       severity="secondary"
       text
-      aria-label="user profile"
+      :aria-label="$t('g.currentUser')"
       @click="popover?.toggle($event)"
     >
-      <div class="flex items-center rounded-full bg-(--p-content-background)">
+      <div
+        class="flex items-center gap-1 rounded-full hover:bg-[var(--interface-button-hover-surface)]"
+      >
         <UserAvatar :photo-url="photoURL" />
 
-        <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.5rem' }" />
+        <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.6rem' }" />
       </div>
     </Button>
 
diff --git a/src/components/topbar/CurrentUserPopover.test.ts b/src/components/topbar/CurrentUserPopover.test.ts
index a7e965b21..1ad2321da 100644
--- a/src/components/topbar/CurrentUserPopover.test.ts
+++ b/src/components/topbar/CurrentUserPopover.test.ts
@@ -69,6 +69,24 @@ vi.mock('@/services/dialogService', () => ({
   }))
 }))
 
+// Mock the firebaseAuthStore
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: vi.fn(() => ({
+    getAuthHeader: vi
+      .fn()
+      .mockResolvedValue({ Authorization: 'Bearer mock-token' })
+  }))
+}))
+
+// Mock the useSubscription composable
+const mockFetchStatus = vi.fn().mockResolvedValue(undefined)
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: vi.fn(() => ({
+    isActiveSubscription: { value: true },
+    fetchStatus: mockFetchStatus
+  }))
+}))
+
 // Mock UserAvatar component
 vi.mock('@/components/common/UserAvatar.vue', () => ({
   default: {
@@ -89,6 +107,15 @@ vi.mock('@/components/common/UserCredit.vue', () => ({
   }
 }))
 
+vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
+  default: {
+    name: 'SubscribeButtonMock',
+    render() {
+      return h('div', 'Subscribe Button')
+    }
+  }
+}))
+
 describe('CurrentUserPopover', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -121,9 +148,9 @@ describe('CurrentUserPopover', () => {
   it('renders logout button with correct props', () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (second one)
+    // Find all buttons and get the logout button (last button)
     const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[1]
+    const logoutButton = buttons[4]
 
     // Check that logout button has correct props
     expect(logoutButton.props('label')).toBe('Log Out')
@@ -133,9 +160,9 @@ describe('CurrentUserPopover', () => {
   it('opens user settings and emits close event when settings button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the settings button (first one)
+    // Find all buttons and get the settings button (third button)
     const buttons = wrapper.findAllComponents(Button)
-    const settingsButton = buttons[0]
+    const settingsButton = buttons[2]
 
     // Click the settings button
     await settingsButton.trigger('click')
@@ -151,9 +178,9 @@ describe('CurrentUserPopover', () => {
   it('calls logout function and emits close event when logout button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (second one)
+    // Find all buttons and get the logout button (last button)
     const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[1]
+    const logoutButton = buttons[4]
 
     // Click the logout button
     await logoutButton.trigger('click')
@@ -169,16 +196,16 @@ describe('CurrentUserPopover', () => {
   it('opens API pricing docs and emits close event when API pricing button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the API pricing button (third one now)
+    // Find all buttons and get the Partner Nodes info button (first one)
     const buttons = wrapper.findAllComponents(Button)
-    const apiPricingButton = buttons[2]
+    const partnerNodesButton = buttons[0]
 
-    // Click the API pricing button
-    await apiPricingButton.trigger('click')
+    // Click the Partner Nodes button
+    await partnerNodesButton.trigger('click')
 
     // Verify window.open was called with the correct URL
     expect(window.open).toHaveBeenCalledWith(
-      'https://docs.comfy.org/tutorials/api-nodes/pricing',
+      'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
       '_blank'
     )
 
@@ -190,9 +217,9 @@ describe('CurrentUserPopover', () => {
   it('opens top-up dialog and emits close event when top-up button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the top-up button (last one)
+    // Find all buttons and get the top-up button (second one)
     const buttons = wrapper.findAllComponents(Button)
-    const topUpButton = buttons[buttons.length - 1]
+    const topUpButton = buttons[1]
 
     // Click the top-up button
     await topUpButton.trigger('click')
diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue
index 7fda0fa2f..d11418e5e 100644
--- a/src/components/topbar/CurrentUserPopover.vue
+++ b/src/components/topbar/CurrentUserPopover.vue
@@ -23,6 +23,38 @@
       </div>
     </div>
 
+    <div v-if="isActiveSubscription" class="flex items-center justify-between">
+      <div class="flex flex-col gap-1">
+        <UserCredit text-class="text-2xl" />
+        <Button
+          :label="$t('subscription.partnerNodesCredits')"
+          severity="secondary"
+          text
+          size="small"
+          class="pl-6 p-0 h-auto justify-start"
+          :pt="{
+            root: {
+              class: 'hover:bg-transparent active:bg-transparent'
+            }
+          }"
+          @click="handleOpenPartnerNodesInfo"
+        />
+      </div>
+      <Button
+        :label="$t('credits.topUp.topUp')"
+        severity="secondary"
+        size="small"
+        @click="handleTopUp"
+      />
+    </div>
+    <SubscribeButton
+      v-else
+      :label="$t('subscription.subscribeToComfyCloud')"
+      size="small"
+      variant="gradient"
+      @subscribed="handleSubscribed"
+    />
+
     <Divider class="my-2" />
 
     <Button
@@ -35,6 +67,17 @@
       @click="handleOpenUserSettings"
     />
 
+    <Button
+      v-if="isActiveSubscription"
+      class="justify-start"
+      :label="$t(planSettingsLabel)"
+      icon="pi pi-receipt"
+      text
+      fluid
+      severity="secondary"
+      @click="handleOpenPlanAndCreditsSettings"
+    />
+
     <Divider class="my-2" />
 
     <Button
@@ -46,30 +89,6 @@
       severity="secondary"
       @click="handleLogout"
     />
-
-    <Divider class="my-2" />
-
-    <Button
-      class="justify-start"
-      :label="$t('credits.apiPricing')"
-      icon="pi pi-external-link"
-      text
-      fluid
-      severity="secondary"
-      @click="handleOpenApiPricing"
-    />
-
-    <Divider class="my-2" />
-
-    <div class="flex w-full flex-col gap-2 p-2">
-      <div class="text-sm text-muted">
-        {{ $t('credits.yourCreditBalance') }}
-      </div>
-      <div class="flex items-center justify-between">
-        <UserCredit text-class="text-2xl" />
-        <Button :label="$t('credits.topUp.topUp')" @click="handleTopUp" />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -82,35 +101,63 @@ import UserAvatar from '@/components/common/UserAvatar.vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 
 const emit = defineEmits<{
   close: []
 }>()
 
+const planSettingsLabel = isCloud
+  ? 'settingsCategories.PlanCredits'
+  : 'settingsCategories.Credits'
+
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
+const { isActiveSubscription, fetchStatus } = useSubscription()
 
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')
   emit('close')
 }
 
+const handleOpenPlanAndCreditsSettings = () => {
+  if (isCloud) {
+    dialogService.showSettingsDialog('subscription')
+  } else {
+    dialogService.showSettingsDialog('credits')
+  }
+
+  emit('close')
+}
+
 const handleTopUp = () => {
+  // Track purchase credits entry from avatar popover
+  useTelemetry()?.trackAddApiCreditButtonClicked()
   dialogService.showTopUpCreditsDialog()
   emit('close')
 }
 
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    '_blank'
+  )
+  emit('close')
+}
+
 const handleLogout = async () => {
   await handleSignOut()
   emit('close')
 }
 
-const handleOpenApiPricing = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
-  emit('close')
+const handleSubscribed = async () => {
+  await fetchStatus()
 }
 
 onMounted(() => {
diff --git a/src/components/topbar/LoginButton.vue b/src/components/topbar/LoginButton.vue
new file mode 100644
index 000000000..924dcace5
--- /dev/null
+++ b/src/components/topbar/LoginButton.vue
@@ -0,0 +1,85 @@
+<template>
+  <Button
+    v-if="!isLoggedIn"
+    outlined
+    rounded
+    severity="secondary"
+    class="size-8 border-black/50 bg-transparent text-black hover:bg-[var(--interface-panel-hover-surface)] dark-theme:border-white/50 dark-theme:text-white"
+    @click="handleSignIn()"
+    @mouseenter="showPopover"
+    @mouseleave="hidePopover"
+  >
+    <template #icon>
+      <i class="icon-[lucide--user] size-4" />
+    </template>
+  </Button>
+  <Popover
+    ref="popoverRef"
+    class="p-2"
+    @mouseout="hidePopover"
+    @mouseover="cancelHidePopover"
+  >
+    <div>
+      <div class="mb-1">{{ t('auth.loginButton.tooltipHelp') }}</div>
+      <a
+        href="https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes"
+        target="_blank"
+        class="text-neutral-500 hover:text-primary"
+        >{{ t('auth.loginButton.tooltipLearnMore') }}</a
+      >
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { ref } from 'vue'
+
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { t } from '@/i18n'
+
+const { isLoggedIn, handleSignIn } = useCurrentUser()
+const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+let showTimeout: ReturnType<typeof setTimeout> | null = null
+
+const showPopover = (event: Event) => {
+  // Clear any existing timeouts
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+  if (showTimeout) {
+    clearTimeout(showTimeout)
+    showTimeout = null
+  }
+
+  showTimeout = setTimeout(() => {
+    if (popoverRef.value) {
+      popoverRef.value.show(event, event.target as HTMLElement)
+    }
+  }, 200)
+}
+
+const cancelHidePopover = () => {
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+}
+
+const hidePopover = () => {
+  // Clear show timeout if mouse leaves before popover appears
+  if (showTimeout) {
+    clearTimeout(showTimeout)
+    showTimeout = null
+  }
+
+  hideTimeout = setTimeout(() => {
+    if (popoverRef.value) {
+      popoverRef.value.hide()
+    }
+  }, 150) // Minimal delay to allow moving to popover
+}
+</script>
diff --git a/src/components/topbar/SecondRowWorkflowTabs.vue b/src/components/topbar/SecondRowWorkflowTabs.vue
deleted file mode 100644
index 777f4944a..000000000
--- a/src/components/topbar/SecondRowWorkflowTabs.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="w-auto max-w-full">
-    <WorkflowTabs />
-  </div>
-</template>
-
-<script setup lang="ts">
-import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-</script>
-
-<style scoped>
-:deep(.workflow-tabs) {
-  background-color: var(--comfy-menu-bg);
-}
-</style>
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
deleted file mode 100644
index 8e9bf015f..000000000
--- a/src/components/topbar/TopMenubar.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <div>
-    <div
-      v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="z-1001 flex h-9.5 w-full content-end"
-      style="background: var(--border-color)"
-    >
-      <WorkflowTabs />
-      <TopbarBadges />
-    </div>
-    <div
-      v-show="showTopMenu"
-      ref="topMenuRef"
-      class="comfyui-menu flex items-center bg-gray-100"
-      :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
-    >
-      <CommandMenubar />
-      <div class="app-drag h-full min-w-0 grow"></div>
-      <div
-        ref="menuRight"
-        class="comfyui-menu-right flex-shrink-1 overflow-auto"
-      />
-      <Actionbar />
-      <CurrentUserButton class="shrink-0" />
-    </div>
-
-    <!-- Virtual top menu for native window (drag handle) -->
-    <div
-      v-show="isNativeWindow() && !showTopMenu"
-      class="app-drag fixed top-0 left-0 h-(--comfy-topbar-height) w-full"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useEventBus } from '@vueuse/core'
-import { computed, onMounted, provide, ref } from 'vue'
-
-import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
-import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
-import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
-import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { app } from '@/scripts/app'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
-
-import TopbarBadges from './TopbarBadges.vue'
-
-const workspaceState = useWorkspaceStore()
-const settingStore = useSettingStore()
-const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
-const betaMenuEnabled = computed(() => menuSetting.value !== 'Disabled')
-const showTopMenu = computed(
-  () => betaMenuEnabled.value && !workspaceState.focusMode
-)
-const workflowTabsPosition = computed(() =>
-  settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
-)
-
-const menuRight = ref<HTMLDivElement | null>(null)
-// Menu-right holds legacy topbar elements attached by custom scripts
-onMounted(() => {
-  if (menuRight.value) {
-    app.menu.element.style.width = 'fit-content'
-    menuRight.value.appendChild(app.menu.element)
-  }
-})
-
-const topMenuRef = ref<HTMLDivElement | null>(null)
-provide('topMenuRef', topMenuRef)
-const eventBus = useEventBus<string>('topMenu')
-const isDropZone = ref(false)
-const isDroppable = ref(false)
-eventBus.on((event: string, payload: any) => {
-  if (event === 'updateHighlight') {
-    isDropZone.value = payload.isDragging
-    isDroppable.value = payload.isOverlapping && payload.isDragging
-  }
-})
-
-onMounted(() => {
-  if (isElectron()) {
-    electronAPI().changeTheme({
-      height: topMenuRef.value?.getBoundingClientRect().height ?? 0
-    })
-  }
-})
-</script>
-
-<style scoped>
-.comfyui-menu {
-  width: 100vw;
-  height: var(--comfy-topbar-height);
-  background: var(--comfy-menu-bg);
-  color: var(--fg-color);
-  box-shadow: var(--bar-shadow);
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 0.8em;
-  box-sizing: border-box;
-  z-index: 1000;
-  order: 0;
-  grid-column: 1/-1;
-}
-
-.comfyui-menu.dropzone {
-  background: var(--p-highlight-background);
-}
-
-.comfyui-menu.dropzone-active {
-  background: var(--p-highlight-background-focus);
-}
-
-:deep(.p-menubar-item-label) {
-  line-height: revert;
-}
-
-.comfyui-logo {
-  user-select: none;
-  cursor: default;
-  filter: invert(0);
-}
-
-.dark-theme .comfyui-logo {
-  filter: invert(1);
-}
-
-.comfyui-menu-button-hide {
-  background-color: var(--comfy-menu-secondary-bg);
-  border-left: 1px solid var(--border-color);
-}
-</style>
-
-<style>
-.comfyui-menu-right::-webkit-scrollbar {
-  max-height: 5px;
-}
-
-.comfyui-menu-right:hover::-webkit-scrollbar {
-  cursor: grab;
-}
-
-.comfyui-menu-right::-webkit-scrollbar-track {
-  background: color-mix(in srgb, var(--border-color) 60%, transparent);
-}
-
-.comfyui-menu-right:hover::-webkit-scrollbar-track {
-  background: color-mix(in srgb, var(--border-color) 80%, transparent);
-}
-
-.comfyui-menu-right::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--fg-color) 30%, transparent);
-}
-
-.comfyui-menu-right::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--fg-color) 80%, transparent);
-}
-</style>
diff --git a/src/components/topbar/TopbarBadge.test.ts b/src/components/topbar/TopbarBadge.test.ts
new file mode 100644
index 000000000..ffb8abdcd
--- /dev/null
+++ b/src/components/topbar/TopbarBadge.test.ts
@@ -0,0 +1,231 @@
+import { mount } from '@vue/test-utils'
+import Popover from 'primevue/popover'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
+
+import TopbarBadge from './TopbarBadge.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {}
+  }
+})
+
+describe('TopbarBadge', () => {
+  const exampleBadge: TopbarBadgeType = {
+    text: 'Test Badge',
+    label: 'BETA',
+    variant: 'info'
+  }
+
+  const mountTopbarBadge = (
+    badge: Partial<TopbarBadgeType> = {},
+    displayMode: 'full' | 'compact' | 'icon-only' = 'full'
+  ) => {
+    return mount(TopbarBadge, {
+      global: {
+        plugins: [PrimeVue, i18n],
+        directives: { tooltip: Tooltip },
+        components: { Popover }
+      },
+      props: {
+        badge: { ...exampleBadge, ...badge },
+        displayMode
+      }
+    })
+  }
+
+  describe('full display mode', () => {
+    it('renders all badge elements (icon, label, text)', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Comfy Cloud',
+          label: 'BETA',
+          icon: 'pi pi-cloud'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-cloud').exists()).toBe(true)
+      expect(wrapper.text()).toContain('BETA')
+      expect(wrapper.text()).toContain('Comfy Cloud')
+    })
+
+    it('renders without icon when not provided', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Test',
+          label: 'NEW'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('i').exists()).toBe(false)
+      expect(wrapper.text()).toContain('NEW')
+      expect(wrapper.text()).toContain('Test')
+    })
+  })
+
+  describe('compact display mode', () => {
+    it('renders icon and label but not text', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Hidden Text',
+          label: 'BETA',
+          icon: 'pi pi-cloud'
+        },
+        'compact'
+      )
+
+      expect(wrapper.find('.pi-cloud').exists()).toBe(true)
+      expect(wrapper.text()).toContain('BETA')
+      expect(wrapper.text()).not.toContain('Hidden Text')
+    })
+
+    it('opens popover on click', async () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Full Text',
+          label: 'ALERT'
+        },
+        'compact'
+      )
+
+      const clickableArea = wrapper.find('[class*="flex h-full"]')
+      await clickableArea.trigger('click')
+
+      const popover = wrapper.findComponent(Popover)
+      expect(popover.exists()).toBe(true)
+    })
+  })
+
+  describe('icon-only display mode', () => {
+    it('renders only icon', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Hidden Text',
+          label: 'BETA',
+          icon: 'pi pi-cloud'
+        },
+        'icon-only'
+      )
+
+      expect(wrapper.find('.pi-cloud').exists()).toBe(true)
+      expect(wrapper.text()).not.toContain('BETA')
+      expect(wrapper.text()).not.toContain('Hidden Text')
+    })
+
+    it('renders label when no icon provided', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Hidden Text',
+          label: 'NEW'
+        },
+        'icon-only'
+      )
+
+      expect(wrapper.text()).toContain('NEW')
+      expect(wrapper.text()).not.toContain('Hidden Text')
+    })
+  })
+
+  describe('badge variants', () => {
+    it('applies error variant styles', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Error Message',
+          label: 'ERROR',
+          variant: 'error'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.bg-danger-100').exists()).toBe(true)
+      expect(wrapper.find('.text-danger-100').exists()).toBe(true)
+    })
+
+    it('applies warning variant styles', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Warning Message',
+          label: 'WARN',
+          variant: 'warning'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.bg-gold-600').exists()).toBe(true)
+      expect(wrapper.find('.text-gold-600').exists()).toBe(true)
+    })
+
+    it('uses default error icon for error variant', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Error',
+          variant: 'error'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-exclamation-circle').exists()).toBe(true)
+    })
+
+    it('uses default warning icon for warning variant', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Warning',
+          variant: 'warning'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-exclamation-triangle').exists()).toBe(true)
+    })
+  })
+
+  describe('popover', () => {
+    it('includes popover component in compact and icon-only modes', () => {
+      const compactWrapper = mountTopbarBadge({}, 'compact')
+      const iconOnlyWrapper = mountTopbarBadge({}, 'icon-only')
+      const fullWrapper = mountTopbarBadge({}, 'full')
+
+      expect(compactWrapper.findComponent(Popover).exists()).toBe(true)
+      expect(iconOnlyWrapper.findComponent(Popover).exists()).toBe(true)
+      expect(fullWrapper.findComponent(Popover).exists()).toBe(false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles badge with only text', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Simple Badge'
+        },
+        'full'
+      )
+
+      expect(wrapper.text()).toContain('Simple Badge')
+      expect(wrapper.find('i').exists()).toBe(false)
+    })
+
+    it('handles custom icon override', () => {
+      const wrapper = mountTopbarBadge(
+        {
+          text: 'Custom',
+          variant: 'error',
+          icon: 'pi pi-custom-icon'
+        },
+        'full'
+      )
+
+      expect(wrapper.find('.pi-custom-icon').exists()).toBe(true)
+      expect(wrapper.find('.pi-exclamation-circle').exists()).toBe(false)
+    })
+  })
+})
diff --git a/src/components/topbar/TopbarBadge.vue b/src/components/topbar/TopbarBadge.vue
index 4ec12dffc..83dd43527 100644
--- a/src/components/topbar/TopbarBadge.vue
+++ b/src/components/topbar/TopbarBadge.vue
@@ -1,20 +1,229 @@
 <template>
-  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
+  <!-- Icon-only mode with Popover -->
+  <div
+    v-if="displayMode === 'icon-only'"
+    class="relative inline-flex h-full shrink-0 items-center justify-center px-2"
+    :class="clickableClasses"
+    :style="menuBackgroundStyle"
+    @click="togglePopover"
+  >
+    <i
+      v-if="iconClass"
+      :class="['shrink-0 text-base', iconClass, iconColorClass]"
+    />
     <div
-      v-if="badge.label"
-      class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
+      v-else-if="badge.label"
+      class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+      :class="labelClasses"
     >
       {{ badge.label }}
     </div>
-    <div class="font-inter text-sm font-extrabold text-slate-100">
+    <div v-else class="size-2 shrink-0 rounded-full" :class="dotClasses" />
+    <Popover
+      ref="popover"
+      append-to="body"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="popoverPt"
+    >
+      <div class="flex max-w-xs min-w-40 flex-col gap-2 p-3">
+        <div
+          v-if="badge.label"
+          class="w-fit rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+          :class="labelClasses"
+        >
+          {{ badge.label }}
+        </div>
+        <div class="text-sm font-inter">{{ badge.text }}</div>
+        <div v-if="badge.tooltip" class="text-xs">
+          {{ badge.tooltip }}
+        </div>
+      </div>
+    </Popover>
+  </div>
+
+  <!-- Compact mode: Icon + Label only with Popover -->
+  <div
+    v-else-if="displayMode === 'compact'"
+    class="relative inline-flex h-full"
+    :style="menuBackgroundStyle"
+  >
+    <div
+      class="flex h-full shrink-0 items-center gap-2 whitespace-nowrap"
+      :class="[
+        { 'flex-row-reverse': reverseOrder },
+        noPadding ? '' : 'px-3',
+        clickableClasses
+      ]"
+      @click="togglePopover"
+    >
+      <i
+        v-if="iconClass"
+        :class="['shrink-0 text-base', iconClass, iconColorClass]"
+      />
+      <div
+        v-if="badge.label"
+        class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+        :class="labelClasses"
+      >
+        {{ badge.label }}
+      </div>
+    </div>
+    <Popover
+      ref="popover"
+      append-to="body"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="popoverPt"
+    >
+      <div class="flex max-w-xs min-w-40 flex-col gap-2 p-3">
+        <div
+          v-if="badge.label"
+          class="w-fit rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+          :class="labelClasses"
+        >
+          {{ badge.label }}
+        </div>
+        <div class="text-sm font-inter">{{ badge.text }}</div>
+        <div v-if="badge.tooltip" class="text-xs">
+          {{ badge.tooltip }}
+        </div>
+      </div>
+    </Popover>
+  </div>
+
+  <!-- Full mode: Icon + Label + Text -->
+  <div
+    v-else
+    v-tooltip="badge.tooltip"
+    class="flex h-full shrink-0 items-center gap-2 whitespace-nowrap"
+    :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : 'px-3']"
+    :style="menuBackgroundStyle"
+  >
+    <i
+      v-if="iconClass"
+      :class="['shrink-0 text-base', iconClass, iconColorClass]"
+    />
+    <div
+      v-if="badge.label"
+      class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+      :class="labelClasses"
+    >
+      {{ badge.label }}
+    </div>
+    <div class="font-inter text-sm" :class="textClasses">
       {{ badge.text }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import type { TopbarBadge } from '@/types/comfy'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
 
-defineProps<{
-  badge: TopbarBadge
-}>()
+import type { TopbarBadge } from '@/types/comfy'
+import { cn } from '@/utils/tailwindUtil'
+
+const props = withDefaults(
+  defineProps<{
+    badge: TopbarBadge
+    displayMode?: 'full' | 'compact' | 'icon-only'
+    reverseOrder?: boolean
+    noPadding?: boolean
+    backgroundColor?: string
+  }>(),
+  {
+    displayMode: 'full',
+    reverseOrder: false,
+    noPadding: false,
+    backgroundColor: 'var(--comfy-menu-bg)'
+  }
+)
+
+const popover = ref<InstanceType<typeof Popover>>()
+
+const togglePopover = (event: Event) => {
+  popover.value?.toggle(event)
+}
+
+const variant = computed(() => props.badge.variant ?? 'info')
+
+const menuBackgroundStyle = computed(() => ({
+  backgroundColor: props.backgroundColor
+}))
+
+const labelClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'bg-danger-100 text-white'
+    case 'warning':
+      return 'bg-gold-600 text-black'
+    case 'info':
+    default:
+      return 'bg-white text-black'
+  }
+})
+
+const textClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'text-danger-100'
+    case 'warning':
+      return 'text-gold-600'
+    case 'info':
+    default:
+      return 'text-text-primary'
+  }
+})
+
+const iconColorClass = computed(() => textClasses.value)
+
+const iconClass = computed(() => {
+  if (props.badge.icon) {
+    return props.badge.icon
+  }
+  switch (variant.value) {
+    case 'error':
+      return 'pi pi-exclamation-circle'
+    case 'warning':
+      return 'pi pi-exclamation-triangle'
+    case 'info':
+    default:
+      return undefined
+  }
+})
+
+const clickableClasses = 'cursor-pointer transition-opacity hover:opacity-80'
+
+const dotClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'bg-danger-100'
+    case 'warning':
+      return 'bg-gold-600'
+    case 'info':
+    default:
+      return 'bg-slate-100'
+  }
+})
+
+const popoverPt = computed(() => ({
+  root: {
+    class: cn('absolute z-50')
+  },
+  content: {
+    class: cn(
+      'mt-1 rounded-lg',
+      'bg-white dark-theme:bg-zinc-800',
+      'text-neutral dark-theme:text-white',
+      'shadow-lg',
+      'border border-zinc-200 dark-theme:border-zinc-700'
+    )
+  }
+}))
 </script>
diff --git a/src/components/topbar/TopbarBadges.vue b/src/components/topbar/TopbarBadges.vue
index 381b4d13c..301973960 100644
--- a/src/components/topbar/TopbarBadges.vue
+++ b/src/components/topbar/TopbarBadges.vue
@@ -1,17 +1,44 @@
 <template>
-  <div class="flex">
+  <div class="flex h-full shrink-0 items-center">
     <TopbarBadge
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
+      :display-mode="displayMode"
+      :reverse-order="reverseOrder"
+      :no-padding="noPadding"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { computed } from 'vue'
+
 import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
 
+withDefaults(
+  defineProps<{
+    reverseOrder?: boolean
+    noPadding?: boolean
+  }>(),
+  {
+    reverseOrder: false,
+    noPadding: false
+  }
+)
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isXl = breakpoints.greaterOrEqual('xl')
+const isLg = breakpoints.greaterOrEqual('lg')
+
+const displayMode = computed<'full' | 'compact' | 'icon-only'>(() => {
+  if (isXl.value) return 'full'
+  if (isLg.value) return 'compact'
+  return 'icon-only'
+})
+
 const topbarBadgeStore = useTopbarBadgeStore()
 </script>
diff --git a/src/components/topbar/TryVueNodeBanner.vue b/src/components/topbar/TryVueNodeBanner.vue
new file mode 100644
index 000000000..30035904e
--- /dev/null
+++ b/src/components/topbar/TryVueNodeBanner.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="showVueNodesBanner"
+    class="pointer-events-auto relative w-full h-10 bg-gradient-to-r from-blue-600 to-blue-700 flex items-center justify-center px-4"
+  >
+    <div class="flex items-center">
+      <i class="icon-[lucide--sparkles]"></i>
+      <span class="pl-2">{{ $t('vueNodesBanner.message') }}</span>
+      <Button
+        class="cursor-pointer bg-transparent rounded h-7 px-3 border border-white text-white ml-4 text-xs"
+        @click="handleTryItOut"
+      >
+        {{ $t('vueNodesBanner.tryItOut') }}
+      </Button>
+    </div>
+    <Button
+      class="cursor-pointer bg-transparent border-0 outline-0 grid place-items-center absolute right-4"
+      unstyled
+      @click="handleDismiss"
+    >
+      <i class="w-5 h-5 icon-[lucide--x]"></i>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const STORAGE_KEY = 'vueNodesBannerDismissed'
+
+const settingStore = useSettingStore()
+const bannerDismissed = useLocalStorage(STORAGE_KEY, false)
+
+const vueNodesEnabled = computed(() => {
+  try {
+    return settingStore.get('Comfy.VueNodes.Enabled') ?? false
+  } catch {
+    return false
+  }
+})
+
+const showVueNodesBanner = computed(() => {
+  if (vueNodesEnabled.value) {
+    return false
+  }
+
+  if (bannerDismissed.value) {
+    return false
+  }
+
+  return true
+})
+
+const handleDismiss = (): void => {
+  bannerDismissed.value = true
+}
+
+const handleTryItOut = async (): Promise<void> => {
+  try {
+    await settingStore.set('Comfy.VueNodes.Enabled', true)
+  } catch (error) {
+    console.error('Failed to enable Vue nodes:', error)
+  } finally {
+    handleDismiss()
+  }
+}
+</script>
diff --git a/src/components/topbar/WorkflowTabPopover.vue b/src/components/topbar/WorkflowTabPopover.vue
index 4ef41f22b..27b113e73 100644
--- a/src/components/topbar/WorkflowTabPopover.vue
+++ b/src/components/topbar/WorkflowTabPopover.vue
@@ -1,19 +1,15 @@
 <template>
   <div
     ref="positionRef"
-    class="absolute left-1/2 -translate-x-1/2"
-    :class="positions.positioner"
+    class="absolute bottom-0 left-1/2 -translate-x-1/2"
   ></div>
   <Popover
     ref="popoverRef"
     append-to="body"
     :pt="{
       root: {
-        class: 'workflow-popover-fade fit-content ' + positions.root,
-        'data-popover-id': id,
-        style: {
-          transform: positions.active
-        }
+        class: 'workflow-popover-fade fit-content',
+        'data-popover-id': id
       }
     }"
     @mouseenter="cancelHidePopover"
@@ -39,9 +35,7 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { computed, nextTick, ref, toRefs, useId } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
+import { nextTick, ref, toRefs, useId } from 'vue'
 
 const POPOVER_WIDTH = 250
 
@@ -53,29 +47,6 @@ interface Props {
 
 const props = defineProps<Props>()
 const { thumbnailUrl, isActiveTab } = toRefs(props)
-
-const settingStore = useSettingStore()
-const positions = computed<{
-  positioner: string
-  root?: string
-  active?: string
-}>(() => {
-  if (
-    settingStore.get('Comfy.Workflow.WorkflowTabsPosition') === 'Topbar' &&
-    settingStore.get('Comfy.UseNewMenu') === 'Bottom'
-  ) {
-    return {
-      positioner: 'top-0',
-      root: 'p-popover-flipped',
-      active: isActiveTab.value ? 'translateY(-100%)' : undefined
-    }
-  }
-
-  return {
-    positioner: 'bottom-0'
-  }
-})
-
 const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
 const positionRef = ref<HTMLElement | null>(null)
 let hideTimeout: ReturnType<typeof setTimeout> | null = null
@@ -174,7 +145,7 @@ defineExpose({
 .workflow-preview-content {
   @apply flex flex-col rounded-xl overflow-hidden;
   max-width: var(--popover-width);
-  background-color: var(--comfy-menu-secondary-bg);
+  background-color: var(--comfy-menu-bg);
   color: var(--fg-color);
 }
 
@@ -184,11 +155,7 @@ defineExpose({
 
 .workflow-preview-thumbnail img {
   @apply shadow-md;
-  background-color: color-mix(
-    in srgb,
-    var(--comfy-menu-secondary-bg) 70%,
-    black
-  );
+  background-color: color-mix(in srgb, var(--comfy-menu-bg) 70%, black);
 }
 
 .dark-theme .workflow-preview-thumbnail img {
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 0d7362988..b30298b1e 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,6 +1,7 @@
 <template>
   <div
-    class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden"
+    ref="containerRef"
+    class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden border-b border-[var(--interface-stroke)] shadow-interface"
     :class="{ 'workflow-tabs-container-desktop': isDesktop }"
   >
     <Button
@@ -13,7 +14,6 @@
       @mousedown="whileMouseDown($event, () => scroll(-1))"
     />
     <ScrollPanel
-      ref="scrollPanelRef"
       class="no-drag overflow-hidden"
       :pt:content="{
         class: 'p-0 w-full flex',
@@ -63,10 +63,7 @@
       @click="() => commandStore.execute('Comfy.NewBlankWorkflow')"
     />
     <ContextMenu ref="menu" :model="contextMenuItems" />
-    <div
-      v-if="menuSetting !== 'Bottom' && isDesktop"
-      class="window-actions-spacer app-drag shrink-0"
-    />
+    <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
   </div>
 </template>
 
@@ -77,11 +74,11 @@ import ContextMenu from 'primevue/contextmenu'
 import ScrollPanel from 'primevue/scrollpanel'
 import SelectButton from 'primevue/selectbutton'
 import { computed, nextTick, onUpdated, ref, watch } from 'vue'
+import type { WatchStopHandle } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import {
@@ -108,18 +105,16 @@ const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
 const workflowBookmarkStore = useWorkflowBookmarkStore()
-const settingStore = useSettingStore()
 const workflowService = useWorkflowService()
 
 const rightClickedTab = ref<WorkflowOption | undefined>()
 const menu = ref()
-const scrollPanelRef = ref()
+const containerRef = ref<HTMLElement | null>(null)
 const showOverflowArrows = ref(false)
 const leftArrowEnabled = ref(false)
 const rightArrowEnabled = ref(false)
 
 const isDesktop = isElectron()
-const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
 
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
   value: workflow.path,
@@ -227,75 +222,98 @@ const handleWheel = (event: WheelEvent) => {
   })
 }
 
+const scrollContent = computed(
+  () =>
+    (containerRef.value?.querySelector(
+      '.p-scrollpanel-content'
+    ) as HTMLElement | null) ?? null
+)
+
 const scroll = (direction: number) => {
-  const scrollElement = scrollPanelRef.value.$el.querySelector(
-    '.p-scrollpanel-content'
-  ) as HTMLElement
-  scrollElement.scrollBy({ left: direction * 20 })
+  const el = scrollContent.value
+  if (!el) return
+  el.scrollBy({ left: direction * 20 })
+}
+
+const ensureActiveTabVisible = async (
+  options: { waitForDom?: boolean } = {}
+) => {
+  if (!selectedWorkflow.value) return
+
+  if (options.waitForDom !== false) {
+    await nextTick()
+  }
+
+  const containerElement = containerRef.value
+  if (!containerElement) return
+
+  const activeTabElement = containerElement.querySelector(
+    '.p-togglebutton-checked'
+  )
+  if (!activeTabElement) return
+
+  activeTabElement.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 
 // Scroll to active offscreen tab when opened
 watch(
   () => workflowStore.activeWorkflow,
-  async () => {
-    if (!selectedWorkflow.value) return
-
-    await nextTick()
-
-    const activeTabElement = document.querySelector('.p-togglebutton-checked')
-    if (!activeTabElement || !scrollPanelRef.value) return
-
-    const container = scrollPanelRef.value.$el.querySelector(
-      '.p-scrollpanel-content'
-    )
-    if (!container) return
-
-    const tabRect = activeTabElement.getBoundingClientRect()
-    const containerRect = container.getBoundingClientRect()
-
-    const offsetLeft = tabRect.left - containerRect.left
-    const offsetRight = tabRect.right - containerRect.right
-
-    if (offsetRight > 0) {
-      container.scrollBy({ left: offsetRight })
-    } else if (offsetLeft < 0) {
-      container.scrollBy({ left: offsetLeft })
-    }
+  () => {
+    void ensureActiveTabVisible()
   },
   { immediate: true }
 )
 
-const scrollContent = computed(
-  () =>
-    scrollPanelRef.value?.$el.querySelector(
-      '.p-scrollpanel-content'
-    ) as HTMLElement
-)
 let overflowObserver: ReturnType<typeof useOverflowObserver> | null = null
-let overflowWatch: ReturnType<typeof watch> | null = null
-watch(scrollContent, (value) => {
-  const scrollState = useScroll(value)
+let stopArrivedWatch: WatchStopHandle | null = null
+let stopOverflowWatch: WatchStopHandle | null = null
 
-  watch(scrollState.arrivedState, () => {
-    leftArrowEnabled.value = !scrollState.arrivedState.left
-    rightArrowEnabled.value = !scrollState.arrivedState.right
-  })
+watch(
+  scrollContent,
+  (el, _prev, onCleanup) => {
+    stopArrivedWatch?.()
+    stopOverflowWatch?.()
+    overflowObserver?.dispose()
 
-  overflowObserver?.dispose()
-  overflowWatch?.stop()
-  overflowObserver = useOverflowObserver(value)
-  overflowWatch = watch(
-    overflowObserver.isOverflowing,
-    (value) => {
-      showOverflowArrows.value = value
-      void nextTick(() => {
-        // Force a new check after arrows are updated
-        scrollState.measure()
-      })
-    },
-    { immediate: true }
-  )
-})
+    if (!el) return
+
+    const scrollState = useScroll(el)
+
+    stopArrivedWatch = watch(
+      [
+        () => scrollState.arrivedState.left,
+        () => scrollState.arrivedState.right
+      ],
+      ([atLeft, atRight]) => {
+        leftArrowEnabled.value = !atLeft
+        rightArrowEnabled.value = !atRight
+      },
+      { immediate: true }
+    )
+
+    overflowObserver = useOverflowObserver(el)
+    stopOverflowWatch = watch(
+      overflowObserver.isOverflowing,
+      (isOverflow) => {
+        showOverflowArrows.value = isOverflow
+        if (!isOverflow) return
+        void nextTick(() => {
+          // Force a new check after arrows are updated
+          scrollState.measure()
+          void ensureActiveTabVisible({ waitForDom: false })
+        })
+      },
+      { immediate: true }
+    )
+
+    onCleanup(() => {
+      stopArrivedWatch?.()
+      stopOverflowWatch?.()
+      overflowObserver?.dispose()
+    })
+  },
+  { immediate: true }
+)
 
 onUpdated(() => {
   if (!overflowObserver?.disposed.value) {
@@ -308,7 +326,7 @@ onUpdated(() => {
 @reference '../../assets/css/style.css';
 
 .workflow-tabs-container {
-  background-color: var(--comfy-menu-secondary-bg);
+  background-color: var(--comfy-menu-bg);
 }
 
 :deep(.p-togglebutton) {
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index d89413316..7f25880e3 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -17,7 +17,11 @@
 
     <template #header-right-area>
       <div class="flex gap-2">
-        <IconTextButton type="primary" label="Upload Model" @click="() => {}">
+        <IconTextButton
+          type="primary"
+          :label="$t('g.upload')"
+          @click="() => {}"
+        >
           <template #icon>
             <i class="icon-[lucide--upload]" />
           </template>
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index e2e8f49e7..23b87cc0c 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -133,7 +133,7 @@ const toggleRightPanel = () => {
 const layoutClasses = cn(
   'base-widget-layout',
   'rounded-2xl overflow-hidden relative',
-  'bg-gray-50 dark-theme:bg-gray-800'
+  'bg-gray-50 dark-theme:bg-smoke-800'
 )
 
 const rightPanelButtonClasses = computed(() => {
@@ -150,7 +150,7 @@ const closeButtonClasses = cn(
 
 const mainContainerClasses = cn(
   'flex-1 flex',
-  'bg-gray-100 dark-theme:bg-neutral-900'
+  'bg-smoke-100 dark-theme:bg-neutral-900'
 )
 
 const headerClasses = cn(
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 655ccb0ee..46b810b13 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -3,8 +3,8 @@
     class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors"
     :class="
       active
-        ? 'bg-gray-400 dark-theme:bg-charcoal-300 text-neutral'
-        : 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
+        ? 'bg-smoke-400 dark-theme:bg-charcoal-300 text-neutral'
+        : 'text-neutral hover:bg-smoke-100 dark-theme:hover:bg-charcoal-300'
     "
     role="button"
     @click="onClick"
diff --git a/src/composables/auth/useCurrentUser.ts b/src/composables/auth/useCurrentUser.ts
index 37b9e4866..cc5634cae 100644
--- a/src/composables/auth/useCurrentUser.ts
+++ b/src/composables/auth/useCurrentUser.ts
@@ -1,5 +1,5 @@
 import { whenever } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { t } from '@/i18n'
@@ -37,6 +37,15 @@ export const useCurrentUser = () => {
   const onUserResolved = (callback: (user: AuthUserInfo) => void) =>
     whenever(resolvedUserInfo, callback, { immediate: true })
 
+  const onTokenRefreshed = (callback: () => void) =>
+    whenever(() => authStore.tokenRefreshTrigger, callback)
+
+  const onUserLogout = (callback: () => void) => {
+    watch(resolvedUserInfo, (user) => {
+      if (!user) callback()
+    })
+  }
+
   const userDisplayName = computed(() => {
     if (isApiKeyLogin.value) {
       return apiKeyStore.currentUser?.name
@@ -133,6 +142,8 @@ export const useCurrentUser = () => {
     handleSignOut,
     handleSignIn,
     handleDeleteAccount,
-    onUserResolved
+    onUserResolved,
+    onTokenRefreshed,
+    onUserLogout
   }
 }
diff --git a/src/composables/auth/useFirebaseAuthActions.ts b/src/composables/auth/useFirebaseAuthActions.ts
index 52ac27e1c..eed7eb021 100644
--- a/src/composables/auth/useFirebaseAuthActions.ts
+++ b/src/composables/auth/useFirebaseAuthActions.ts
@@ -1,9 +1,15 @@
 import { FirebaseError } from 'firebase/app'
+import { AuthErrorCodes } from 'firebase/auth'
 import { ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { usdToMicros } from '@/utils/formatUtil'
 
@@ -51,6 +57,15 @@ export const useFirebaseAuthActions = () => {
       detail: t('auth.signOut.successDetail'),
       life: 5000
     })
+
+    if (isCloud) {
+      try {
+        window.location.href = '/cloud/login'
+      } catch (error) {
+        // needed for local development until we bring in cloud login pages.
+        window.location.reload()
+      }
+    }
   }, reportError)
 
   const sendPasswordReset = wrapWithErrorHandlingAsync(
@@ -67,6 +82,9 @@ export const useFirebaseAuthActions = () => {
   )
 
   const purchaseCredits = wrapWithErrorHandlingAsync(async (amount: number) => {
+    const { isActiveSubscription } = useSubscription()
+    if (!isActiveSubscription.value) return
+
     const response = await authStore.initiateCreditPurchase({
       amount_micros: usdToMicros(amount),
       currency: 'usd'
@@ -80,7 +98,7 @@ export const useFirebaseAuthActions = () => {
       )
     }
 
-    // Go to Stripe checkout page
+    useTelemetry()?.startTopupTracking()
     window.open(response.checkout_url, '_blank')
   }, reportError)
 
@@ -97,7 +115,9 @@ export const useFirebaseAuthActions = () => {
   }, reportError)
 
   const fetchBalance = wrapWithErrorHandlingAsync(async () => {
-    return await authStore.fetchBalance()
+    const result = await authStore.fetchBalance()
+    // Top-up completion tracking happens in UsageLogsTable when events are fetched
+    return result
   }, reportError)
 
   const signInWithGoogle = wrapWithErrorHandlingAsync(async () => {
@@ -122,6 +142,47 @@ export const useFirebaseAuthActions = () => {
     reportError
   )
 
+  /**
+   * Recovery strategy for Firebase auth/requires-recent-login errors.
+   * Prompts user to reauthenticate and retries the operation after successful login.
+   */
+  const createReauthenticationRecovery = <
+    TArgs extends unknown[],
+    TReturn
+  >(): ErrorRecoveryStrategy<TArgs, TReturn> => {
+    const dialogService = useDialogService()
+
+    return {
+      shouldHandle: (error: unknown) =>
+        error instanceof FirebaseError &&
+        error.code === AuthErrorCodes.CREDENTIAL_TOO_OLD_LOGIN_AGAIN,
+
+      recover: async (
+        _error: unknown,
+        retry: (...args: TArgs) => Promise<TReturn> | TReturn,
+        args: TArgs
+      ) => {
+        const confirmed = await dialogService.confirm({
+          title: t('auth.reauthRequired.title'),
+          message: t('auth.reauthRequired.message'),
+          type: 'default'
+        })
+
+        if (!confirmed) {
+          return
+        }
+
+        await authStore.logout()
+
+        const signedIn = await dialogService.showSignInDialog()
+
+        if (signedIn) {
+          await retry(...args)
+        }
+      }
+    }
+  }
+
   const updatePassword = wrapWithErrorHandlingAsync(
     async (newPassword: string) => {
       await authStore.updatePassword(newPassword)
@@ -132,18 +193,25 @@ export const useFirebaseAuthActions = () => {
         life: 5000
       })
     },
-    reportError
+    reportError,
+    undefined,
+    [createReauthenticationRecovery<[string], void>()]
   )
 
-  const deleteAccount = wrapWithErrorHandlingAsync(async () => {
-    await authStore.deleteAccount()
-    toastStore.add({
-      severity: 'success',
-      summary: t('auth.deleteAccount.success'),
-      detail: t('auth.deleteAccount.successDetail'),
-      life: 5000
-    })
-  }, reportError)
+  const deleteAccount = wrapWithErrorHandlingAsync(
+    async () => {
+      await authStore.deleteAccount()
+      toastStore.add({
+        severity: 'success',
+        summary: t('auth.deleteAccount.success'),
+        detail: t('auth.deleteAccount.successDetail'),
+        life: 5000
+      })
+    },
+    reportError,
+    undefined,
+    [createReauthenticationRecovery<[], void>()]
+  )
 
   return {
     logout,
@@ -157,6 +225,7 @@ export const useFirebaseAuthActions = () => {
     signUpWithEmail,
     updatePassword,
     deleteAccount,
-    accessError
+    accessError,
+    reportError
   }
 }
diff --git a/src/composables/canvas/useSelectionToolboxPosition.ts b/src/composables/canvas/useSelectionToolboxPosition.ts
index 3be0a4bbe..426604f82 100644
--- a/src/composables/canvas/useSelectionToolboxPosition.ts
+++ b/src/composables/canvas/useSelectionToolboxPosition.ts
@@ -5,7 +5,11 @@ import type { Ref } from 'vue'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
-import { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphGroup,
+  LGraphNode,
+  LiteGraph
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
@@ -95,8 +99,12 @@ export function useSelectionToolboxPosition(
       } else {
         // Fallback to LiteGraph bounds for regular nodes or non-string IDs
         if (item instanceof LGraphNode || item instanceof LGraphGroup) {
-          const bounds = item.getBounding()
-          allBounds.push([bounds[0], bounds[1], bounds[2], bounds[3]] as const)
+          allBounds.push([
+            item.pos[0],
+            item.pos[1] - LiteGraph.NODE_TITLE_HEIGHT,
+            item.size[0],
+            item.size[1] + LiteGraph.NODE_TITLE_HEIGHT
+          ])
         }
       }
     }
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index 522c06ef1..2e9c54a2c 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -20,6 +20,7 @@ import type { WidgetValue } from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
+  LGraphBadge,
   LGraphNode,
   LGraphTriggerAction,
   LGraphTriggerEvent,
@@ -51,6 +52,8 @@ export interface VueNodeData {
   mode: number
   selected: boolean
   executing: boolean
+  apiNode?: boolean
+  badges?: (LGraphBadge | (() => LGraphBadge))[]
   subgraphId?: string | null
   widgets?: SafeWidgetData[]
   inputs?: INodeInputSlot[]
@@ -117,7 +120,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   }
 
   // Extract safe data from LiteGraph node for Vue consumption
-  const extractVueNodeData = (node: LGraphNode): VueNodeData => {
+  function extractVueNodeData(node: LGraphNode): VueNodeData {
     // Determine subgraph ID - null for root graph, string for subgraphs
     const subgraphId =
       node.graph && 'id' in node.graph && node.graph !== node.graph.rootGraph
@@ -126,14 +129,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     // Extract safe widget data
     const slotMetadata = new Map<string, WidgetSlotMetadata>()
 
-    node.inputs?.forEach((input, index) => {
-      if (!input?.widget?.name) return
-      slotMetadata.set(input.widget.name, {
-        index,
-        linked: input.link != null
-      })
-    })
-
     const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
     Object.defineProperty(node, 'widgets', {
       get() {
@@ -144,8 +139,15 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       }
     })
 
-    const safeWidgets = reactiveComputed<SafeWidgetData[]>(
-      () =>
+    const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
+      node.inputs?.forEach((input, index) => {
+        if (!input?.widget?.name) return
+        slotMetadata.set(input.widget.name, {
+          index,
+          linked: input.link != null
+        })
+      })
+      return (
         node.widgets?.map((widget) => {
           try {
             // TODO: Use widget.getReactiveData() once TypeScript types are updated
@@ -183,7 +185,8 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
             }
           }
         }) ?? []
-    )
+      )
+    })
 
     const nodeType =
       node.type ||
@@ -192,6 +195,9 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       node.constructor?.name ||
       'Unknown'
 
+    const apiNode = node.constructor?.nodeData?.api_node ?? false
+    const badges = node.badges
+
     return {
       id: String(node.id),
       title: typeof node.title === 'string' ? node.title : '',
@@ -200,6 +206,8 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       selected: node.selected || false,
       executing: false, // Will be updated separately based on execution state
       subgraphId,
+      apiNode,
+      badges,
       hasErrors: !!node.has_errors,
       widgets: safeWidgets,
       inputs: node.inputs ? [...node.inputs] : undefined,
diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts
index cfcee1d44..d2c8cf678 100644
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -4,14 +4,15 @@ import { shallowRef, watch } from 'vue'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
-import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
-import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
+import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
 import { app as comfyApp } from '@/scripts/app'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
@@ -21,8 +22,8 @@ function useVueNodeLifecycleIndividual() {
   const nodeManager = shallowRef<GraphNodeManager | null>(null)
 
   const { startSync } = useLayoutSync()
-  const linkSyncManager = useLinkLayoutSync()
-  const slotSyncManager = useSlotLayoutSync()
+
+  const isVueNodeToastDismissed = useVueNodesMigrationDismissed()
 
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
@@ -62,10 +63,6 @@ function useVueNodeLifecycleIndividual() {
 
     // Initialize layout sync (one-way: Layout Store → LiteGraph)
     startSync(canvasStore.canvas)
-
-    if (comfyApp.canvas) {
-      linkSyncManager.start(comfyApp.canvas)
-    }
   }
 
   const disposeNodeManagerAndSyncs = () => {
@@ -77,17 +74,25 @@ function useVueNodeLifecycleIndividual() {
       /* empty */
     }
     nodeManager.value = null
-
-    linkSyncManager.stop()
   }
 
   // Watch for Vue nodes enabled state changes
   watch(
     () => shouldRenderVueNodes.value && Boolean(comfyApp.canvas?.graph),
-    (enabled) => {
+    (enabled, wasEnabled) => {
       if (enabled) {
         initializeNodeManager()
+        ensureCorrectLayoutScale()
+
+        if (!wasEnabled && !isVueNodeToastDismissed.value) {
+          useToastStore().add({
+            group: 'vue-nodes-migration',
+            severity: 'info',
+            life: 0
+          })
+        }
       } else {
+        comfyApp.canvas?.setDirty(true, true)
         disposeNodeManagerAndSyncs()
       }
     },
@@ -96,25 +101,14 @@ function useVueNodeLifecycleIndividual() {
 
   // Consolidated watch for slot layout sync management
   watch(
-    [() => canvasStore.canvas, () => shouldRenderVueNodes.value],
-    ([canvas, vueMode], [, oldVueMode]) => {
+    () => shouldRenderVueNodes.value,
+    (vueMode, oldVueMode) => {
       const modeChanged = vueMode !== oldVueMode
 
       // Clear stale slot layouts when switching modes
       if (modeChanged) {
         layoutStore.clearAllSlotLayouts()
       }
-
-      // Switching to Vue
-      if (vueMode) {
-        slotSyncManager.stop()
-      }
-
-      // Switching to LG
-      const shouldRun = Boolean(canvas?.graph) && !vueMode
-      if (shouldRun && canvas) {
-        slotSyncManager.attemptStart(canvas as LGraphCanvas)
-      }
     },
     { immediate: true, flush: 'sync' }
   )
@@ -152,8 +146,6 @@ function useVueNodeLifecycleIndividual() {
       nodeManager.value.cleanup()
       nodeManager.value = null
     }
-    slotSyncManager.stop()
-    linkSyncManager.stop()
   }
 
   return {
diff --git a/src/composables/graph/useWidgetValue.ts b/src/composables/graph/useWidgetValue.ts
index b7f648d46..87658f83f 100644
--- a/src/composables/graph/useWidgetValue.ts
+++ b/src/composables/graph/useWidgetValue.ts
@@ -125,7 +125,7 @@ export function useNumberWidgetValue(
     transform: (value: number | number[]) => {
       // Handle PrimeVue Slider which can emit number | number[]
       if (Array.isArray(value)) {
-        return value.length > 0 ? value[0] ?? 0 : 0
+        return value.length > 0 ? (value[0] ?? 0) : 0
       }
       return Number(value) || 0
     }
diff --git a/src/composables/node/useNodeAnimatedImage.ts b/src/composables/node/useNodeAnimatedImage.ts
index ac2e9b161..a785e5cbf 100644
--- a/src/composables/node/useNodeAnimatedImage.ts
+++ b/src/composables/node/useNodeAnimatedImage.ts
@@ -1,8 +1,7 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { ANIM_PREVIEW_WIDGET } from '@/scripts/app'
-import { createImageHost } from '@/scripts/ui/imagePreview'
-import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
+import { isDOMWidget } from '@/scripts/domWidget'
 
 /**
  * Composable for handling animated image previews in nodes
@@ -20,38 +19,38 @@ export function useNodeAnimatedImage() {
       (w) => w.name === ANIM_PREVIEW_WIDGET
     )
 
+    node.imgs[0].classList.value = 'block size-full object-contain'
     if (widgetIdx > -1) {
       // Replace content in existing widget
-      const widget = node.widgets[widgetIdx] as IWidget & {
-        options: { host: ReturnType<typeof createImageHost> }
-      }
-      widget.options.host.updateImages(node.imgs)
+      const widget = node.widgets[widgetIdx]
+      if (!isDOMWidget(widget)) return
+      widget.element.replaceChildren(node.imgs[0])
     } else {
       // Create new widget
-      const host = createImageHost(node)
-      // @ts-expect-error host is not a standard DOM widget option.
-      const widget = node.addDOMWidget(ANIM_PREVIEW_WIDGET, 'img', host.el, {
-        host,
-        // @ts-expect-error `getHeight` of image host returns void instead of number.
-        getHeight: host.getHeight,
-        onDraw: host.onDraw,
+      const element = document.createElement('div')
+      element.appendChild(node.imgs[0])
+      const widget = node.addDOMWidget(ANIM_PREVIEW_WIDGET, 'img', element, {
         hideOnZoom: false
-      }) as IWidget & {
-        options: { host: ReturnType<typeof createImageHost> }
-      }
+      })
+      node.overIndex = 0
+
+      // Add event listeners for canvas interactions
+      const { handleWheel, handlePointer, forwardEventToCanvas } =
+        useCanvasInteractions()
+      node.imgs[0].style.pointerEvents = 'none'
+      element.addEventListener('wheel', handleWheel)
+      element.addEventListener('pointermove', handlePointer)
+      element.addEventListener('pointerup', handlePointer)
+      element.addEventListener(
+        'pointerdown',
+        (e) => {
+          return e.button !== 2 ? handlePointer(e) : forwardEventToCanvas(e)
+        },
+        true
+      )
+
       widget.serialize = false
       widget.serializeValue = () => undefined
-      widget.options.host.updateImages(node.imgs)
-      widget.computeLayoutSize = () => {
-        const img = widget.options.host.getCurrentImage()
-        if (!img) return { minHeight: 0, minWidth: 0 }
-
-        return fitDimensionsToNodeWidth(
-          img.naturalWidth,
-          img.naturalHeight,
-          node.size?.[0] || 0
-        )
-      }
     }
   }
 
diff --git a/src/composables/node/useNodeBadge.ts b/src/composables/node/useNodeBadge.ts
index 04dacb29b..30c4487a3 100644
--- a/src/composables/node/useNodeBadge.ts
+++ b/src/composables/node/useNodeBadge.ts
@@ -2,6 +2,7 @@ import _ from 'es-toolkit/compat'
 import { computed, onMounted, watch } from 'vue'
 
 import { useNodePricing } from '@/composables/node/useNodePricing'
+import { usePriceBadge } from '@/composables/node/usePriceBadge'
 import { useComputedWithWidgetWatch } from '@/composables/node/useWatchWidget'
 import { BadgePosition, LGraphBadge } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -12,7 +13,6 @@ import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { NodeBadgeMode } from '@/types/nodeSource'
-import { adjustColor } from '@/utils/colorUtil'
 
 /**
  * Add LGraphBadge to LGraphNode based on settings.
@@ -27,6 +27,7 @@ export const useNodeBadge = () => {
   const settingStore = useSettingStore()
   const extensionStore = useExtensionStore()
   const colorPaletteStore = useColorPaletteStore()
+  const priceBadge = usePriceBadge()
 
   const nodeSourceBadgeMode = computed(
     () =>
@@ -86,10 +87,10 @@ export const useNodeBadge = () => {
                   ? `#${node.id}`
                   : '',
                 badgeTextVisible(nodeDef, nodeLifeCycleBadgeMode.value)
-                  ? nodeDef?.nodeLifeCycleBadgeText ?? ''
+                  ? (nodeDef?.nodeLifeCycleBadgeText ?? '')
                   : '',
                 badgeTextVisible(nodeDef, nodeSourceBadgeMode.value)
-                  ? nodeDef?.nodeSource?.badgeText ?? ''
+                  ? (nodeDef?.nodeSource?.badgeText ?? '')
                   : ''
               ]
                 .filter((s) => s.length > 0)
@@ -118,29 +119,7 @@ export const useNodeBadge = () => {
           let creditsBadge
           const createBadge = () => {
             const price = nodePricing.getNodeDisplayPrice(node)
-
-            const isLightTheme =
-              colorPaletteStore.completedActivePalette.light_theme
-            return new LGraphBadge({
-              text: price,
-              iconOptions: {
-                unicode: '\ue96b',
-                fontFamily: 'PrimeIcons',
-                color: isLightTheme
-                  ? adjustColor('#FABC25', { lightness: 0.5 })
-                  : '#FABC25',
-                bgColor: isLightTheme
-                  ? adjustColor('#654020', { lightness: 0.5 })
-                  : '#654020',
-                fontSize: 8
-              },
-              fgColor:
-                colorPaletteStore.completedActivePalette.colors.litegraph_base
-                  .BADGE_FG_COLOR,
-              bgColor: isLightTheme
-                ? adjustColor('#8D6932', { lightness: 0.5 })
-                : '#8D6932'
-            })
+            return priceBadge.getCreditsBadge(price)
           }
 
           if (hasDynamicPricing) {
@@ -162,6 +141,23 @@ export const useNodeBadge = () => {
 
           node.badges.push(() => creditsBadge.value)
         }
+      },
+      init() {
+        app.canvas.canvas.addEventListener<'litegraph:set-graph'>(
+          'litegraph:set-graph',
+          () => {
+            for (const node of app.canvas.graph?.nodes ?? [])
+              priceBadge.updateSubgraphCredits(node)
+          }
+        )
+        app.canvas.canvas.addEventListener<'subgraph-converted'>(
+          'subgraph-converted',
+          (e) => priceBadge.updateSubgraphCredits(e.detail.subgraphNode)
+        )
+      },
+      afterConfigureGraph() {
+        for (const node of app.canvas.graph?.nodes ?? [])
+          priceBadge.updateSubgraphCredits(node)
       }
     })
   })
diff --git a/src/composables/node/useNodeImageUpload.ts b/src/composables/node/useNodeImageUpload.ts
index 21a4d7f72..96d450c1d 100644
--- a/src/composables/node/useNodeImageUpload.ts
+++ b/src/composables/node/useNodeImageUpload.ts
@@ -5,6 +5,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { useAssetsStore } from '@/stores/assetsStore'
 
 const PASTED_IMAGE_EXPIRY_MS = 2000
 
@@ -37,6 +38,13 @@ const uploadFile = async (
   }
 
   const data = await resp.json()
+
+  // Update AssetsStore input assets when files are uploaded to input folder
+  if (formFields.type === 'input' || (!formFields.type && !isPasted)) {
+    const assetsStore = useAssetsStore()
+    await assetsStore.updateInputs()
+  }
+
   return data.subfolder ? `${data.subfolder}/${data.name}` : data.name
 }
 
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index c1eedd3fe..d1ae22169 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -169,6 +169,46 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
     : `$${minCost.toFixed(2)}-$${maxCost.toFixed(2)}/Run`
 }
 
+const ltxvPricingCalculator = (node: LGraphNode): string => {
+  const modelWidget = node.widgets?.find(
+    (w) => w.name === 'model'
+  ) as IComboWidget
+  const durationWidget = node.widgets?.find(
+    (w) => w.name === 'duration'
+  ) as IComboWidget
+  const resolutionWidget = node.widgets?.find(
+    (w) => w.name === 'resolution'
+  ) as IComboWidget
+
+  const fallback = '$0.04-0.24/second'
+  if (!modelWidget || !durationWidget || !resolutionWidget) return fallback
+
+  const model = String(modelWidget.value).toLowerCase()
+  const resolution = String(resolutionWidget.value).toLowerCase()
+  const seconds = parseFloat(String(durationWidget.value))
+  const priceByModel: Record<string, Record<string, number>> = {
+    'ltx-2 (pro)': {
+      '1920x1080': 0.06,
+      '2560x1440': 0.12,
+      '3840x2160': 0.24
+    },
+    'ltx-2 (fast)': {
+      '1920x1080': 0.04,
+      '2560x1440': 0.08,
+      '3840x2160': 0.16
+    }
+  }
+
+  const modelTable = priceByModel[model]
+  if (!modelTable) return fallback
+
+  const pps = modelTable[resolution]
+  if (!pps) return fallback
+
+  const cost = (pps * seconds).toFixed(2)
+  return `$${cost}/Run`
+}
+
 // ---- constants ----
 const SORA_SIZES = {
   BASIC: new Set(['720x1280', '1280x720']),
@@ -1647,7 +1687,7 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
             ? '720p'
             : resolutionStr.includes('480')
               ? '480p'
-              : resolutionStr.match(/^\s*(\d{3,4}p)/)?.[1] ?? ''
+              : (resolutionStr.match(/^\s*(\d{3,4}p)/)?.[1] ?? '')
 
         const pricePerSecond: Record<string, number> = {
           '480p': 0.05,
@@ -1694,6 +1734,12 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     },
     WanImageToImageApi: {
       displayPrice: '$0.03/Run'
+    },
+    LtxvApiTextToVideo: {
+      displayPrice: ltxvPricingCalculator
+    },
+    LtxvApiImageToVideo: {
+      displayPrice: ltxvPricingCalculator
     }
   }
 
@@ -1796,7 +1842,9 @@ export const useNodePricing = () => {
       ByteDanceFirstLastFrameNode: ['model', 'duration', 'resolution'],
       ByteDanceImageReferenceNode: ['model', 'duration', 'resolution'],
       WanTextToVideoApi: ['duration', 'size'],
-      WanImageToVideoApi: ['duration', 'resolution']
+      WanImageToVideoApi: ['duration', 'resolution'],
+      LtxvApiTextToVideo: ['model', 'duration', 'resolution'],
+      LtxvApiImageToVideo: ['model', 'duration', 'resolution']
     }
     return widgetMap[nodeType] || []
   }
diff --git a/src/composables/node/usePriceBadge.ts b/src/composables/node/usePriceBadge.ts
new file mode 100644
index 000000000..963ca8b4a
--- /dev/null
+++ b/src/composables/node/usePriceBadge.ts
@@ -0,0 +1,69 @@
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { adjustColor } from '@/utils/colorUtil'
+
+export const usePriceBadge = () => {
+  function updateSubgraphCredits(node: LGraphNode) {
+    if (!node.isSubgraphNode()) return
+    node.badges = node.badges.filter((b) => !isCreditsBadge(b))
+    const newBadges = collectCreditsBadges(node.subgraph)
+    if (newBadges.length > 1) {
+      node.badges.push(getCreditsBadge('Partner Nodes x ' + newBadges.length))
+    } else {
+      node.badges.push(...newBadges)
+    }
+  }
+  function collectCreditsBadges(
+    graph: LGraph,
+    visited: Set<string> = new Set()
+  ): (LGraphBadge | (() => LGraphBadge))[] {
+    if (visited.has(graph.id)) return []
+    visited.add(graph.id)
+    const badges = []
+    for (const node of graph.nodes) {
+      badges.push(
+        ...(node.isSubgraphNode()
+          ? collectCreditsBadges(node.subgraph, visited)
+          : node.badges.filter((b) => isCreditsBadge(b)))
+      )
+    }
+    return badges
+  }
+
+  function isCreditsBadge(badge: LGraphBadge | (() => LGraphBadge)): boolean {
+    return (
+      (typeof badge === 'function' ? badge() : badge).icon?.unicode === '\ue96b'
+    )
+  }
+
+  const colorPaletteStore = useColorPaletteStore()
+  function getCreditsBadge(price: string): LGraphBadge {
+    const isLightTheme = colorPaletteStore.completedActivePalette.light_theme
+    return new LGraphBadge({
+      text: price,
+      iconOptions: {
+        unicode: '\ue96b',
+        fontFamily: 'PrimeIcons',
+        color: isLightTheme
+          ? adjustColor('#FABC25', { lightness: 0.5 })
+          : '#FABC25',
+        bgColor: isLightTheme
+          ? adjustColor('#654020', { lightness: 0.5 })
+          : '#654020',
+        fontSize: 8
+      },
+      fgColor:
+        colorPaletteStore.completedActivePalette.colors.litegraph_base
+          .BADGE_FG_COLOR,
+      bgColor: isLightTheme
+        ? adjustColor('#8D6932', { lightness: 0.5 })
+        : '#8D6932'
+    })
+  }
+  return {
+    getCreditsBadge,
+    updateSubgraphCredits
+  }
+}
diff --git a/src/composables/sidebarTabs/useAssetsSidebarTab.ts b/src/composables/sidebarTabs/useAssetsSidebarTab.ts
new file mode 100644
index 000000000..ce3753173
--- /dev/null
+++ b/src/composables/sidebarTabs/useAssetsSidebarTab.ts
@@ -0,0 +1,16 @@
+import { markRaw } from 'vue'
+
+import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+export const useAssetsSidebarTab = (): SidebarTabExtension => {
+  return {
+    id: 'assets',
+    icon: 'icon-[comfy--image-ai-edit]',
+    title: 'sideToolbar.assets',
+    tooltip: 'sideToolbar.assets',
+    label: 'sideToolbar.labels.assets',
+    component: markRaw(AssetsSidebarTab),
+    type: 'vue'
+  }
+}
diff --git a/src/composables/useContextMenuTranslation.ts b/src/composables/useContextMenuTranslation.ts
index 1fd851420..cfcf5c809 100644
--- a/src/composables/useContextMenuTranslation.ts
+++ b/src/composables/useContextMenuTranslation.ts
@@ -1,4 +1,5 @@
 import { st, te } from '@/i18n'
+import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
 import type {
   IContextMenuOptions,
   IContextMenuValue,
@@ -6,18 +7,40 @@ import type {
   IWidget
 } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 /**
  * Add translation for litegraph context menu.
  */
 export const useContextMenuTranslation = () => {
-  const f = LGraphCanvas.prototype.getCanvasMenuOptions
+  // Install compatibility layer BEFORE any extensions load
+  legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+  const { getCanvasMenuOptions } = LGraphCanvas.prototype
   const getCanvasCenterMenuOptions = function (
     this: LGraphCanvas,
-    ...args: Parameters<typeof f>
+    ...args: Parameters<typeof getCanvasMenuOptions>
   ) {
-    const res = f.apply(this, args) as ReturnType<typeof f>
+    const res: IContextMenuValue[] = getCanvasMenuOptions.apply(this, args)
+
+    // Add items from new extension API
+    const newApiItems = app.collectCanvasMenuItems(this)
+    for (const item of newApiItems) {
+      res.push(item)
+    }
+
+    // Add legacy monkey-patched items
+    const legacyItems = legacyMenuCompat.extractLegacyItems(
+      'getCanvasMenuOptions',
+      this,
+      ...args
+    )
+    for (const item of legacyItems) {
+      res.push(item)
+    }
+
+    // Translate all items
     for (const item of res) {
       if (item?.content) {
         item.content = st(`contextMenu.${item.content}`, item.content)
@@ -28,6 +51,33 @@ export const useContextMenuTranslation = () => {
 
   LGraphCanvas.prototype.getCanvasMenuOptions = getCanvasCenterMenuOptions
 
+  legacyMenuCompat.registerWrapper(
+    'getCanvasMenuOptions',
+    getCanvasCenterMenuOptions,
+    getCanvasMenuOptions,
+    LGraphCanvas.prototype
+  )
+
+  // Wrap getNodeMenuOptions to add new API items
+  const nodeMenuFn = LGraphCanvas.prototype.getNodeMenuOptions
+  const getNodeMenuOptionsWithExtensions = function (
+    this: LGraphCanvas,
+    ...args: Parameters<typeof nodeMenuFn>
+  ) {
+    const res = nodeMenuFn.apply(this, args)
+
+    // Add items from new extension API
+    const node = args[0]
+    const newApiItems = app.collectNodeMenuItems(node)
+    for (const item of newApiItems) {
+      res.push(item)
+    }
+
+    return res
+  }
+
+  LGraphCanvas.prototype.getNodeMenuOptions = getNodeMenuOptionsWithExtensions
+
   function translateMenus(
     values: readonly (IContextMenuValue | string | null)[] | undefined,
     options: IContextMenuOptions
diff --git a/src/composables/useCopy.ts b/src/composables/useCopy.ts
index d24e7603c..b2455fef8 100644
--- a/src/composables/useCopy.ts
+++ b/src/composables/useCopy.ts
@@ -1,6 +1,12 @@
 import { useEventListener } from '@vueuse/core'
 
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { shouldIgnoreCopyPaste } from '@/workbench/eventHelpers'
+
+const clipboardHTMLWrapper = [
+  '<meta charset="utf-8"><div><span data-metadata="',
+  '"></span></div><span style="white-space:pre-wrap;">Text</span>'
+]
 
 /**
  * Adds a handler on copy that serializes selected nodes to JSON
@@ -9,28 +15,19 @@ export const useCopy = () => {
   const canvasStore = useCanvasStore()
 
   useEventListener(document, 'copy', (e) => {
-    if (!(e.target instanceof Element)) {
-      return
-    }
-    if (
-      (e.target instanceof HTMLTextAreaElement &&
-        e.target.type === 'textarea') ||
-      (e.target instanceof HTMLInputElement && e.target.type === 'text')
-    ) {
+    if (shouldIgnoreCopyPaste(e.target)) {
       // Default system copy
       return
     }
-    const isTargetInGraph =
-      e.target.classList.contains('litegraph') ||
-      e.target.classList.contains('graph-canvas-container') ||
-      e.target.id === 'graph-canvas'
-
     // copy nodes and clear clipboard
     const canvas = canvasStore.canvas
-    if (isTargetInGraph && canvas?.selectedItems) {
-      canvas.copyToClipboard()
+    if (canvas?.selectedItems) {
+      const serializedData = canvas.copyToClipboard()
       // clearData doesn't remove images from clipboard
-      e.clipboardData?.setData('text', ' ')
+      e.clipboardData?.setData(
+        'text/html',
+        clipboardHTMLWrapper.join(btoa(serializedData))
+      )
       e.preventDefault()
       e.stopImmediatePropagation()
       return false
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 63069862e..8893edc1a 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -6,7 +6,8 @@ import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
 } from '@/constants/coreColorPalettes'
-import { promoteRecommendedWidgets } from '@/core/graph/subgraph/proxyWidgetUtils'
+import { tryToggleWidgetPromotion } from '@/core/graph/subgraph/proxyWidgetUtils'
+import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
 import { t } from '@/i18n'
 import {
   LGraphEventMode,
@@ -19,7 +20,10 @@ import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
 import { isCloud } from '@/platform/distribution/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
+import type { ExecutionTriggerSource } from '@/platform/telemetry/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -58,6 +62,8 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 
 import { useWorkflowTemplateSelectorDialog } from './useWorkflowTemplateSelectorDialog'
 
+const { isActiveSubscription, showSubscriptionDialog } = useSubscription()
+
 const moveSelectedNodesVersionAdded = '1.22.2'
 
 export function useCoreCommands(): ComfyCommand[] {
@@ -69,6 +75,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const toastStore = useToastStore()
   const canvasStore = useCanvasStore()
   const executionStore = useExecutionStore()
+  const telemetry = useTelemetry()
 
   const bottomPanelStore = useBottomPanelStore()
 
@@ -97,7 +104,14 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'New Blank Workflow',
       menubarLabel: 'New',
       category: 'essentials' as const,
-      function: () => workflowService.loadBlankWorkflow()
+      function: async () => {
+        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        await workflowService.loadBlankWorkflow()
+        telemetry?.trackWorkflowCreated({
+          workflow_type: 'blank',
+          previous_workflow_had_nodes: previousWorkflowHadNodes
+        })
+      }
     },
     {
       id: 'Comfy.OpenWorkflow',
@@ -113,7 +127,14 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.LoadDefaultWorkflow',
       icon: 'pi pi-code',
       label: 'Load Default Workflow',
-      function: () => workflowService.loadDefaultWorkflow()
+      function: async () => {
+        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        await workflowService.loadDefaultWorkflow()
+        telemetry?.trackWorkflowCreated({
+          workflow_type: 'default',
+          previous_workflow_had_nodes: previousWorkflowHadNodes
+        })
+      }
     },
     {
       id: 'Comfy.SaveWorkflow',
@@ -447,8 +468,20 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Queue Prompt',
       versionAdded: '1.3.7',
       category: 'essentials' as const,
-      function: async () => {
+      function: async (metadata?: {
+        subscribe_to_run?: boolean
+        trigger_source?: ExecutionTriggerSource
+      }) => {
+        useTelemetry()?.trackRunButton(metadata)
+        if (!isActiveSubscription.value) {
+          showSubscriptionDialog()
+          return
+        }
+
         const batchCount = useQueueSettingsStore().batchCount
+
+        useTelemetry()?.trackWorkflowExecution()
+
         await app.queuePrompt(0, batchCount)
       }
     },
@@ -458,8 +491,20 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Queue Prompt (Front)',
       versionAdded: '1.3.7',
       category: 'essentials' as const,
-      function: async () => {
+      function: async (metadata?: {
+        subscribe_to_run?: boolean
+        trigger_source?: ExecutionTriggerSource
+      }) => {
+        useTelemetry()?.trackRunButton(metadata)
+        if (!isActiveSubscription.value) {
+          showSubscriptionDialog()
+          return
+        }
+
         const batchCount = useQueueSettingsStore().batchCount
+
+        useTelemetry()?.trackWorkflowExecution()
+
         await app.queuePrompt(-1, batchCount)
       }
     },
@@ -468,7 +513,16 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-play',
       label: 'Queue Selected Output Nodes',
       versionAdded: '1.19.6',
-      function: async () => {
+      function: async (metadata?: {
+        subscribe_to_run?: boolean
+        trigger_source?: ExecutionTriggerSource
+      }) => {
+        useTelemetry()?.trackRunButton(metadata)
+        if (!isActiveSubscription.value) {
+          showSubscriptionDialog()
+          return
+        }
+
         const batchCount = useQueueSettingsStore().batchCount
         const selectedNodes = getSelectedNodes()
         const selectedOutputNodes = filterOutputNodes(selectedNodes)
@@ -486,6 +540,17 @@ export function useCoreCommands(): ComfyCommand[] {
         // Get execution IDs for all selected output nodes and their descendants
         const executionIds =
           getExecutionIdsForSelectedNodes(selectedOutputNodes)
+
+        if (executionIds.length === 0) {
+          toastStore.add({
+            severity: 'error',
+            summary: t('toastMessages.failedToQueue'),
+            detail: t('toastMessages.failedExecutionPathResolution'),
+            life: 3000
+          })
+          return
+        }
+        useTelemetry()?.trackWorkflowExecution()
         await app.queuePrompt(0, batchCount, executionIds)
       }
     },
@@ -691,6 +756,11 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'ComfyUI Issues',
       versionAdded: '1.5.5',
       function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'github',
+          is_external: true,
+          source: 'menu'
+        })
         window.open(
           'https://github.com/comfyanonymous/ComfyUI/issues',
           '_blank'
@@ -704,6 +774,11 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'ComfyUI Docs',
       versionAdded: '1.5.5',
       function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'docs',
+          is_external: true,
+          source: 'menu'
+        })
         window.open('https://docs.comfy.org/', '_blank')
       }
     },
@@ -714,6 +789,11 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'Comfy-Org Discord',
       versionAdded: '1.5.5',
       function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'discord',
+          is_external: true,
+          source: 'menu'
+        })
         window.open('https://www.comfy.org/discord', '_blank')
       }
     },
@@ -790,6 +870,11 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'ComfyUI Forum',
       versionAdded: '1.8.2',
       function: () => {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'help_feedback',
+          is_external: true,
+          source: 'menu'
+        })
         window.open('https://forum.comfy.org/', '_blank')
       }
     },
@@ -909,7 +994,7 @@ export function useCoreCommands(): ComfyCommand[] {
     },
     {
       id: 'Comfy.Graph.ConvertToSubgraph',
-      icon: 'pi pi-sitemap',
+      icon: 'icon-[lucide--shrink]',
       label: 'Convert Selection to Subgraph',
       versionAdded: '1.20.1',
       category: 'essentials' as const,
@@ -931,16 +1016,14 @@ export function useCoreCommands(): ComfyCommand[] {
 
         const { node } = res
         canvas.select(node)
-        promoteRecommendedWidgets(node)
         canvasStore.updateSelectedItems()
       }
     },
     {
       id: 'Comfy.Graph.UnpackSubgraph',
-      icon: 'pi pi-sitemap',
+      icon: 'icon-[lucide--expand]',
       label: 'Unpack the selected Subgraph',
-      versionAdded: '1.20.1',
-      category: 'essentials' as const,
+      versionAdded: '1.26.3',
       function: () => {
         const canvas = canvasStore.getCanvas()
         const graph = canvas.subgraph ?? canvas.graph
@@ -952,6 +1035,20 @@ export function useCoreCommands(): ComfyCommand[] {
         graph.unpackSubgraph(subgraphNode)
       }
     },
+    {
+      id: 'Comfy.Graph.EditSubgraphWidgets',
+      label: 'Edit Subgraph Widgets',
+      icon: 'icon-[lucide--settings-2]',
+      versionAdded: '1.28.5',
+      function: showSubgraphNodeDialog
+    },
+    {
+      id: 'Comfy.Graph.ToggleWidgetPromotion',
+      icon: 'icon-[lucide--arrow-left-right]',
+      label: 'Toggle promotion of hovered widget',
+      versionAdded: '1.30.1',
+      function: tryToggleWidgetPromotion
+    },
     {
       id: 'Comfy.OpenManagerDialog',
       icon: 'mdi mdi-puzzle-outline',
diff --git a/src/composables/useErrorHandling.ts b/src/composables/useErrorHandling.ts
index 91cf0df32..9dce59340 100644
--- a/src/composables/useErrorHandling.ts
+++ b/src/composables/useErrorHandling.ts
@@ -1,6 +1,54 @@
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
+/**
+ * Strategy for recovering from specific error conditions.
+ * Allows operations to be retried after resolving the error condition.
+ *
+ * @template TArgs - The argument types of the operation to be retried
+ * @template TReturn - The return type of the operation
+ *
+ * @example
+ * ```typescript
+ * const networkRecovery: ErrorRecoveryStrategy = {
+ *   shouldHandle: (error) => error instanceof NetworkError,
+ *   recover: async (error, retry) => {
+ *     await waitForNetwork()
+ *     await retry()
+ *   }
+ * }
+ * ```
+ */
+export interface ErrorRecoveryStrategy<
+  TArgs extends unknown[] = unknown[],
+  TReturn = unknown
+> {
+  /**
+   * Determines if this strategy should handle the given error.
+   * @param error - The error to check
+   * @returns true if this strategy can handle the error
+   */
+  shouldHandle: (error: unknown) => boolean
+
+  /**
+   * Attempts to recover from the error and retry the operation.
+   * This function is responsible for:
+   * 1. Resolving the error condition (e.g., reauthentication, network reconnect)
+   * 2. Calling retry() to re-execute the original operation
+   * 3. Handling the retry result (success or failure)
+   *
+   * @param error - The error that occurred
+   * @param retry - Function to retry the original operation
+   * @param args - Original arguments passed to the operation
+   * @returns Promise that resolves when recovery completes (whether successful or not)
+   */
+  recover: (
+    error: unknown,
+    retry: (...args: TArgs) => Promise<TReturn> | TReturn,
+    args: TArgs
+  ) => Promise<void>
+}
+
 export function useErrorHandling() {
   const toast = useToastStore()
   const toastErrorHandler = (error: unknown) => {
@@ -13,9 +61,9 @@ export function useErrorHandling() {
   }
 
   const wrapWithErrorHandling =
-    <TArgs extends any[], TReturn>(
+    <TArgs extends unknown[], TReturn>(
       action: (...args: TArgs) => TReturn,
-      errorHandler?: (error: any) => void,
+      errorHandler?: (error: unknown) => void,
       finallyHandler?: () => void
     ) =>
     (...args: TArgs): TReturn | undefined => {
@@ -29,15 +77,27 @@ export function useErrorHandling() {
     }
 
   const wrapWithErrorHandlingAsync =
-    <TArgs extends any[], TReturn>(
+    <TArgs extends unknown[], TReturn>(
       action: (...args: TArgs) => Promise<TReturn> | TReturn,
-      errorHandler?: (error: any) => void,
-      finallyHandler?: () => void
+      errorHandler?: (error: unknown) => void,
+      finallyHandler?: () => void,
+      recoveryStrategies: ErrorRecoveryStrategy<TArgs, TReturn>[] = []
     ) =>
     async (...args: TArgs): Promise<TReturn | undefined> => {
       try {
         return await action(...args)
       } catch (e) {
+        for (const strategy of recoveryStrategies) {
+          if (strategy.shouldHandle(e)) {
+            try {
+              await strategy.recover(e, action, args)
+              return
+            } catch (recoveryError) {
+              console.error('Recovery strategy failed:', recoveryError)
+            }
+          }
+        }
+
         ;(errorHandler ?? toastErrorHandler)(e)
       } finally {
         finallyHandler?.()
diff --git a/src/composables/useLoad3d.ts b/src/composables/useLoad3d.ts
new file mode 100644
index 000000000..bbcebbde6
--- /dev/null
+++ b/src/composables/useLoad3d.ts
@@ -0,0 +1,536 @@
+import { toRef } from '@vueuse/core'
+import type { MaybeRef } from '@vueuse/core'
+import { nextTick, ref, toRaw, watch } from 'vue'
+
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import type {
+  AnimationItem,
+  CameraConfig,
+  CameraType,
+  LightConfig,
+  MaterialMode,
+  ModelConfig,
+  SceneConfig,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
+import { useLoad3dService } from '@/services/load3dService'
+
+type Load3dReadyCallback = (load3d: Load3d) => void
+export const nodeToLoad3dMap = new Map<LGraphNode, Load3d>()
+const pendingCallbacks = new Map<LGraphNode, Load3dReadyCallback[]>()
+
+export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
+  const nodeRef = toRef(nodeOrRef)
+  let load3d: Load3d | null = null
+
+  const sceneConfig = ref<SceneConfig>({
+    showGrid: true,
+    backgroundColor: '#000000',
+    backgroundImage: ''
+  })
+
+  const modelConfig = ref<ModelConfig>({
+    upDirection: 'original',
+    materialMode: 'original'
+  })
+
+  const cameraConfig = ref<CameraConfig>({
+    cameraType: 'perspective',
+    fov: 75
+  })
+
+  const lightConfig = ref<LightConfig>({
+    intensity: 5
+  })
+
+  const isRecording = ref(false)
+  const hasRecording = ref(false)
+  const recordingDuration = ref(0)
+
+  const animations = ref<AnimationItem[]>([])
+  const playing = ref(false)
+  const selectedSpeed = ref(1)
+  const selectedAnimation = ref(0)
+  const loading = ref(false)
+  const loadingMessage = ref('')
+  const isPreview = ref(false)
+
+  const initializeLoad3d = async (containerRef: HTMLElement) => {
+    const rawNode = toRaw(nodeRef.value)
+    if (!containerRef || !rawNode) return
+
+    const node = rawNode as LGraphNode
+
+    try {
+      load3d = new Load3d(containerRef, {
+        node
+      })
+
+      const widthWidget = node.widgets?.find((w) => w.name === 'width')
+      const heightWidget = node.widgets?.find((w) => w.name === 'height')
+
+      if (!(widthWidget && heightWidget)) {
+        isPreview.value = true
+      }
+
+      await restoreConfigurationsFromNode(node)
+
+      node.onMouseEnter = function () {
+        load3d?.refreshViewport()
+
+        load3d?.updateStatusMouseOnNode(true)
+      }
+
+      node.onMouseLeave = function () {
+        load3d?.updateStatusMouseOnNode(false)
+      }
+
+      node.onResize = function () {
+        load3d?.handleResize()
+      }
+
+      node.onDrawBackground = function () {
+        if (load3d) {
+          load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
+        }
+      }
+
+      node.onRemoved = function () {
+        useLoad3dService().removeLoad3d(node)
+        pendingCallbacks.delete(node)
+      }
+
+      nodeToLoad3dMap.set(node, load3d)
+
+      const callbacks = pendingCallbacks.get(node)
+
+      if (callbacks && load3d) {
+        callbacks.forEach((callback) => {
+          if (load3d) {
+            callback(load3d)
+          }
+        })
+        pendingCallbacks.delete(node)
+      }
+
+      handleEvents('add')
+    } catch (error) {
+      console.error('Error initializing Load3d:', error)
+      useToastStore().addAlert(t('toastMessages.failedToInitializeLoad3d'))
+    }
+  }
+
+  const restoreConfigurationsFromNode = async (node: LGraphNode) => {
+    if (!load3d) return
+
+    // Restore configs - watchers will handle applying them to the Three.js scene
+    const savedSceneConfig = node.properties['Scene Config'] as SceneConfig
+    if (savedSceneConfig) {
+      sceneConfig.value = savedSceneConfig
+    }
+
+    const savedModelConfig = node.properties['Model Config'] as ModelConfig
+    if (savedModelConfig) {
+      modelConfig.value = savedModelConfig
+    }
+
+    const savedCameraConfig = node.properties['Camera Config'] as CameraConfig
+    const cameraStateToRestore = savedCameraConfig?.state
+
+    if (savedCameraConfig) {
+      cameraConfig.value = savedCameraConfig
+    }
+
+    const savedLightConfig = node.properties['Light Config'] as LightConfig
+    if (savedLightConfig) {
+      lightConfig.value = savedLightConfig
+    }
+
+    const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+    if (modelWidget?.value) {
+      const modelUrl = getModelUrl(modelWidget.value as string)
+      if (modelUrl) {
+        loading.value = true
+        loadingMessage.value = t('load3d.reloadingModel')
+        try {
+          await load3d.loadModel(modelUrl)
+
+          if (cameraStateToRestore) {
+            await nextTick()
+            load3d.setCameraState(cameraStateToRestore)
+          }
+        } catch (error) {
+          console.error('Failed to reload model:', error)
+          useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+        } finally {
+          loading.value = false
+          loadingMessage.value = ''
+        }
+      }
+    } else if (cameraStateToRestore) {
+      load3d.setCameraState(cameraStateToRestore)
+    }
+  }
+
+  const getModelUrl = (modelPath: string): string | null => {
+    if (!modelPath) return null
+
+    try {
+      if (modelPath.startsWith('http')) {
+        return modelPath
+      }
+
+      const [subfolder, filename] = Load3dUtils.splitFilePath(modelPath)
+      return api.apiURL(
+        Load3dUtils.getResourceURL(
+          subfolder,
+          filename,
+          isPreview.value ? 'output' : 'input'
+        )
+      )
+    } catch (error) {
+      console.error('Failed to construct model URL:', error)
+      return null
+    }
+  }
+
+  const waitForLoad3d = (callback: Load3dReadyCallback) => {
+    const rawNode = toRaw(nodeRef.value)
+    if (!rawNode) return
+
+    const node = rawNode as LGraphNode
+    const existingInstance = nodeToLoad3dMap.get(node)
+
+    if (existingInstance) {
+      callback(existingInstance)
+
+      return
+    }
+
+    if (!pendingCallbacks.has(node)) {
+      pendingCallbacks.set(node, [])
+    }
+
+    pendingCallbacks.get(node)!.push(callback)
+  }
+
+  watch(
+    sceneConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Scene Config'] = newValue
+        load3d.toggleGrid(newValue.showGrid)
+        load3d.setBackgroundColor(newValue.backgroundColor)
+        void load3d.setBackgroundImage(newValue.backgroundImage || '')
+      }
+    },
+    { deep: true }
+  )
+
+  watch(
+    modelConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Model Config'] = newValue
+        load3d.setUpDirection(newValue.upDirection)
+        load3d.setMaterialMode(newValue.materialMode)
+      }
+    },
+    { deep: true }
+  )
+
+  watch(
+    cameraConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Camera Config'] = newValue
+        load3d.toggleCamera(newValue.cameraType)
+        load3d.setFOV(newValue.fov)
+      }
+    },
+    { deep: true }
+  )
+
+  watch(
+    lightConfig,
+    (newValue) => {
+      if (load3d && nodeRef.value) {
+        nodeRef.value.properties['Light Config'] = newValue
+        load3d.setLightIntensity(newValue.intensity)
+      }
+    },
+    { deep: true }
+  )
+
+  watch(playing, (newValue) => {
+    if (load3d) {
+      load3d.toggleAnimation(newValue)
+    }
+  })
+
+  watch(selectedSpeed, (newValue) => {
+    if (load3d && newValue) {
+      load3d.setAnimationSpeed(newValue)
+    }
+  })
+
+  watch(selectedAnimation, (newValue) => {
+    if (load3d && newValue !== undefined) {
+      load3d.updateSelectedAnimation(newValue)
+    }
+  })
+
+  const handleMouseEnter = () => {
+    load3d?.updateStatusMouseOnScene(true)
+  }
+
+  const handleMouseLeave = () => {
+    load3d?.updateStatusMouseOnScene(false)
+  }
+
+  const handleStartRecording = async () => {
+    if (load3d) {
+      await load3d.startRecording()
+      isRecording.value = true
+    }
+  }
+
+  const handleStopRecording = () => {
+    if (load3d) {
+      load3d.stopRecording()
+      isRecording.value = false
+      recordingDuration.value = load3d.getRecordingDuration()
+      hasRecording.value = recordingDuration.value > 0
+    }
+  }
+
+  const handleExportRecording = () => {
+    if (load3d) {
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
+      const filename = `${timestamp}-scene-recording.mp4`
+      load3d.exportRecording(filename)
+    }
+  }
+
+  const handleClearRecording = () => {
+    if (load3d) {
+      load3d.clearRecording()
+      hasRecording.value = false
+      recordingDuration.value = 0
+    }
+  }
+
+  const handleBackgroundImageUpdate = async (file: File | null) => {
+    if (!file) {
+      sceneConfig.value.backgroundImage = ''
+      await load3d?.setBackgroundImage('')
+      return
+    }
+
+    const resourceFolder =
+      (nodeRef.value?.properties['Resource Folder'] as string) || ''
+
+    const subfolder = resourceFolder.trim()
+      ? `3d/${resourceFolder.trim()}`
+      : '3d'
+
+    const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+    sceneConfig.value.backgroundImage = uploadedPath
+    await load3d?.setBackgroundImage(uploadedPath)
+  }
+
+  const handleExportModel = async (format: string) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dSceneToExport'))
+      return
+    }
+
+    try {
+      await load3d.exportModel(format)
+    } catch (error) {
+      console.error('Error exporting model:', error)
+      useToastStore().addAlert(
+        t('toastMessages.failedToExportModel', {
+          format: format.toUpperCase()
+        })
+      )
+    }
+  }
+
+  const handleModelDrop = async (file: File) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dScene'))
+      return
+    }
+
+    const node = toRaw(nodeRef.value)
+    if (!node) return
+
+    try {
+      const resourceFolder =
+        (node.properties['Resource Folder'] as string) || ''
+
+      const subfolder = resourceFolder.trim()
+        ? `3d/${resourceFolder.trim()}`
+        : '3d'
+
+      loading.value = true
+      loadingMessage.value = t('load3d.uploadingModel')
+
+      const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+
+      if (!uploadedPath) {
+        useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+        return
+      }
+
+      const modelUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(uploadedPath),
+          isPreview.value ? 'output' : 'input'
+        )
+      )
+
+      loadingMessage.value = t('load3d.loadingModel')
+      await load3d.loadModel(modelUrl)
+
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+
+      if (modelWidget) {
+        const options = modelWidget.options as { values?: string[] } | undefined
+        if (options?.values && !options.values.includes(uploadedPath)) {
+          options.values.push(uploadedPath)
+        }
+        modelWidget.value = uploadedPath
+      }
+    } catch (error) {
+      console.error('Model drop failed:', error)
+      useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+    } finally {
+      loading.value = false
+      loadingMessage.value = ''
+    }
+  }
+
+  const eventConfig = {
+    materialModeChange: (value: string) => {
+      modelConfig.value.materialMode = value as MaterialMode
+    },
+    backgroundColorChange: (value: string) => {
+      sceneConfig.value.backgroundColor = value
+    },
+    lightIntensityChange: (value: number) => {
+      lightConfig.value.intensity = value
+    },
+    fovChange: (value: number) => {
+      cameraConfig.value.fov = value
+    },
+    cameraTypeChange: (value: string) => {
+      cameraConfig.value.cameraType = value as CameraType
+    },
+    showGridChange: (value: boolean) => {
+      sceneConfig.value.showGrid = value
+    },
+    upDirectionChange: (value: string) => {
+      modelConfig.value.upDirection = value as UpDirection
+    },
+    backgroundImageChange: (value: string) => {
+      sceneConfig.value.backgroundImage = value
+    },
+    backgroundImageLoadingStart: () => {
+      loadingMessage.value = t('load3d.loadingBackgroundImage')
+      loading.value = true
+    },
+    backgroundImageLoadingEnd: () => {
+      loadingMessage.value = ''
+      loading.value = false
+    },
+    modelLoadingStart: () => {
+      loadingMessage.value = t('load3d.loadingModel')
+      loading.value = true
+    },
+    modelLoadingEnd: () => {
+      loadingMessage.value = ''
+      loading.value = false
+    },
+    exportLoadingStart: (message: string) => {
+      loadingMessage.value = message || t('load3d.exportingModel')
+      loading.value = true
+    },
+    exportLoadingEnd: () => {
+      loadingMessage.value = ''
+      loading.value = false
+    },
+    recordingStatusChange: (value: boolean) => {
+      isRecording.value = value
+
+      if (!value && load3d) {
+        recordingDuration.value = load3d.getRecordingDuration()
+        hasRecording.value = recordingDuration.value > 0
+      }
+    },
+    animationListChange: (newValue: any) => {
+      animations.value = newValue
+    }
+  } as const
+
+  const handleEvents = (action: 'add' | 'remove') => {
+    Object.entries(eventConfig).forEach(([event, handler]) => {
+      const method = `${action}EventListener` as const
+      load3d?.[method](event, handler)
+    })
+  }
+
+  const cleanup = () => {
+    handleEvents('remove')
+
+    const rawNode = toRaw(nodeRef.value)
+    if (!rawNode) return
+
+    const node = rawNode as LGraphNode
+    if (nodeToLoad3dMap.get(node) === load3d) {
+      nodeToLoad3dMap.delete(node)
+    }
+
+    load3d?.remove()
+    load3d = null
+  }
+
+  return {
+    // state
+    load3d,
+    sceneConfig,
+    modelConfig,
+    cameraConfig,
+    lightConfig,
+    isRecording,
+    isPreview,
+    hasRecording,
+    recordingDuration,
+    animations,
+    playing,
+    selectedSpeed,
+    selectedAnimation,
+    loading,
+    loadingMessage,
+
+    // Methods
+    initializeLoad3d,
+    waitForLoad3d,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleStartRecording,
+    handleStopRecording,
+    handleExportRecording,
+    handleClearRecording,
+    handleBackgroundImageUpdate,
+    handleExportModel,
+    handleModelDrop,
+    cleanup
+  }
+}
diff --git a/src/composables/useLoad3dDrag.ts b/src/composables/useLoad3dDrag.ts
new file mode 100644
index 000000000..d7d5ea7f0
--- /dev/null
+++ b/src/composables/useLoad3dDrag.ts
@@ -0,0 +1,70 @@
+import { computed, ref, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+import { SUPPORTED_EXTENSIONS } from '@/extensions/core/load3d/interfaces'
+import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+
+interface UseLoad3dDragOptions {
+  onModelDrop: (file: File) => void | Promise<void>
+  disabled?: MaybeRefOrGetter<boolean>
+}
+
+export function useLoad3dDrag(options: UseLoad3dDragOptions) {
+  const isDragging = ref(false)
+  const dragMessage = ref('')
+
+  const isDisabled = computed(() => toValue(options.disabled) ?? false)
+
+  function isValidModelFile(file: File): boolean {
+    const fileName = file.name.toLowerCase()
+    const extension = fileName.substring(fileName.lastIndexOf('.'))
+    return SUPPORTED_EXTENSIONS.has(extension)
+  }
+
+  function handleDragOver(event: DragEvent) {
+    if (isDisabled.value) return
+
+    if (!event.dataTransfer) return
+
+    const hasFiles = event.dataTransfer.types.includes('Files')
+
+    if (!hasFiles) return
+
+    isDragging.value = true
+    event.dataTransfer.dropEffect = 'copy'
+    dragMessage.value = t('load3d.dropToLoad')
+  }
+
+  function handleDragLeave() {
+    isDragging.value = false
+  }
+
+  async function handleDrop(event: DragEvent) {
+    isDragging.value = false
+
+    if (isDisabled.value) return
+
+    if (!event.dataTransfer) return
+
+    const files = Array.from(event.dataTransfer.files)
+
+    if (files.length === 0) return
+
+    const modelFile = files.find(isValidModelFile)
+
+    if (modelFile) {
+      await options.onModelDrop(modelFile)
+    } else {
+      useToastStore().addAlert(t('load3d.unsupportedFileType'))
+    }
+  }
+
+  return {
+    isDragging,
+    dragMessage,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop
+  }
+}
diff --git a/src/composables/useLoad3dViewer.ts b/src/composables/useLoad3dViewer.ts
index 203db8f1b..fdf3fc760 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -10,6 +10,7 @@ import type {
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
 import { useLoad3dService } from '@/services/load3dService'
 
 interface Load3dViewerState {
@@ -22,7 +23,6 @@ interface Load3dViewerState {
   backgroundImage: string
   upDirection: UpDirection
   materialMode: MaterialMode
-  edgeThreshold: number
 }
 
 export const useLoad3dViewer = (node: LGraphNode) => {
@@ -35,8 +35,8 @@ export const useLoad3dViewer = (node: LGraphNode) => {
   const hasBackgroundImage = ref(false)
   const upDirection = ref<UpDirection>('original')
   const materialMode = ref<MaterialMode>('original')
-  const edgeThreshold = ref(85)
   const needApplyChanges = ref(true)
+  const isPreview = ref(false)
 
   let load3d: Load3d | null = null
   let sourceLoad3d: Load3d | null = null
@@ -50,8 +50,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     cameraState: null,
     backgroundImage: '',
     upDirection: 'original',
-    materialMode: 'original',
-    edgeThreshold: 85
+    materialMode: 'original'
   })
 
   watch(backgroundColor, (newColor) => {
@@ -149,18 +148,6 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     }
   })
 
-  watch(edgeThreshold, (newValue) => {
-    if (!load3d) return
-    try {
-      load3d.setEdgeThreshold(Number(newValue))
-    } catch (error) {
-      console.error('Error updating edge threshold:', error)
-      useToastStore().addAlert(
-        t('toastMessages.failedToUpdateEdgeThreshold', { threshold: newValue })
-      )
-    }
-  })
-
   const initializeViewer = async (
     containerRef: HTMLElement,
     source: Load3d
@@ -178,34 +165,52 @@ export const useLoad3dViewer = (node: LGraphNode) => {
 
       await useLoad3dService().copyLoad3dState(source, load3d)
 
-      const sourceCameraType = source.getCurrentCameraType()
       const sourceCameraState = source.getCameraState()
 
-      cameraType.value = sourceCameraType
-      backgroundColor.value = source.sceneManager.currentBackgroundColor
-      showGrid.value = source.sceneManager.gridHelper.visible
-      lightIntensity.value = (node.properties['Light Intensity'] as number) || 1
+      const sceneConfig = node.properties['Scene Config'] as any
+      const modelConfig = node.properties['Model Config'] as any
+      const cameraConfig = node.properties['Camera Config'] as any
+      const lightConfig = node.properties['Light Config'] as any
 
-      const backgroundInfo = source.sceneManager.getCurrentBackgroundInfo()
-      if (
-        backgroundInfo.type === 'image' &&
-        node.properties['Background Image']
-      ) {
-        backgroundImage.value = node.properties['Background Image'] as string
-        hasBackgroundImage.value = true
+      isPreview.value = node.type === 'Preview3D'
+
+      if (sceneConfig) {
+        backgroundColor.value =
+          sceneConfig.backgroundColor ||
+          source.sceneManager.currentBackgroundColor
+        showGrid.value =
+          sceneConfig.showGrid ?? source.sceneManager.gridHelper.visible
+
+        const backgroundInfo = source.sceneManager.getCurrentBackgroundInfo()
+        if (backgroundInfo.type === 'image' && sceneConfig.backgroundImage) {
+          backgroundImage.value = sceneConfig.backgroundImage
+          hasBackgroundImage.value = true
+        } else {
+          backgroundImage.value = ''
+          hasBackgroundImage.value = false
+        }
+      }
+
+      if (cameraConfig) {
+        cameraType.value =
+          cameraConfig.cameraType || source.getCurrentCameraType()
+        fov.value =
+          cameraConfig.fov || source.cameraManager.perspectiveCamera.fov
+      }
+
+      if (lightConfig) {
+        lightIntensity.value = lightConfig.intensity || 1
       } else {
-        backgroundImage.value = ''
-        hasBackgroundImage.value = false
+        lightIntensity.value = 1
       }
 
-      if (sourceCameraType === 'perspective') {
-        fov.value = source.cameraManager.perspectiveCamera.fov
+      if (modelConfig) {
+        upDirection.value =
+          modelConfig.upDirection || source.modelManager.currentUpDirection
+        materialMode.value =
+          modelConfig.materialMode || source.modelManager.materialMode
       }
 
-      upDirection.value = source.modelManager.currentUpDirection
-      materialMode.value = source.modelManager.materialMode
-      edgeThreshold.value = (node.properties['Edge Threshold'] as number) || 85
-
       initialState.value = {
         backgroundColor: backgroundColor.value,
         showGrid: showGrid.value,
@@ -215,8 +220,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
         cameraState: sourceCameraState,
         backgroundImage: backgroundImage.value,
         upDirection: upDirection.value,
-        materialMode: materialMode.value,
-        edgeThreshold: edgeThreshold.value
+        materialMode: materialMode.value
       }
 
       const width = node.widgets?.find((w) => w.name === 'width')
@@ -267,16 +271,31 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     needApplyChanges.value = false
 
     if (nodeValue.properties) {
-      nodeValue.properties['Background Color'] =
-        initialState.value.backgroundColor
-      nodeValue.properties['Show Grid'] = initialState.value.showGrid
-      nodeValue.properties['Camera Type'] = initialState.value.cameraType
-      nodeValue.properties['FOV'] = initialState.value.fov
-      nodeValue.properties['Light Intensity'] =
-        initialState.value.lightIntensity
-      nodeValue.properties['Camera Info'] = initialState.value.cameraState
-      nodeValue.properties['Background Image'] =
-        initialState.value.backgroundImage
+      nodeValue.properties['Scene Config'] = {
+        showGrid: initialState.value.showGrid,
+        backgroundColor: initialState.value.backgroundColor,
+        backgroundImage: initialState.value.backgroundImage
+      }
+
+      nodeValue.properties['Camera Config'] = {
+        cameraType: initialState.value.cameraType,
+        fov: initialState.value.fov
+      }
+
+      nodeValue.properties['Light Config'] = {
+        intensity: initialState.value.lightIntensity
+      }
+
+      nodeValue.properties['Model Config'] = {
+        upDirection: initialState.value.upDirection,
+        materialMode: initialState.value.materialMode
+      }
+
+      const currentCameraConfig = nodeValue.properties['Camera Config'] as any
+      nodeValue.properties['Camera Config'] = {
+        ...currentCameraConfig,
+        state: initialState.value.cameraState
+      }
     }
   }
 
@@ -287,20 +306,31 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     const nodeValue = node
 
     if (nodeValue.properties) {
-      nodeValue.properties['Background Color'] = backgroundColor.value
-      nodeValue.properties['Show Grid'] = showGrid.value
-      nodeValue.properties['Camera Type'] = cameraType.value
-      nodeValue.properties['FOV'] = fov.value
-      nodeValue.properties['Light Intensity'] = lightIntensity.value
-      nodeValue.properties['Camera Info'] = viewerCameraState
-      nodeValue.properties['Background Image'] = backgroundImage.value
+      nodeValue.properties['Scene Config'] = {
+        showGrid: showGrid.value,
+        backgroundColor: backgroundColor.value,
+        backgroundImage: backgroundImage.value
+      }
+
+      nodeValue.properties['Camera Config'] = {
+        cameraType: cameraType.value,
+        fov: fov.value,
+        state: viewerCameraState
+      }
+
+      nodeValue.properties['Light Config'] = {
+        intensity: lightIntensity.value
+      }
+
+      nodeValue.properties['Model Config'] = {
+        upDirection: upDirection.value,
+        materialMode: materialMode.value
+      }
     }
 
     await useLoad3dService().copyLoad3dState(load3d, sourceLoad3d)
 
-    if (backgroundImage.value) {
-      await sourceLoad3d.setBackgroundImage(backgroundImage.value)
-    }
+    await sourceLoad3d.setBackgroundImage(backgroundImage.value)
 
     sourceLoad3d.forceRender()
 
@@ -341,6 +371,49 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     }
   }
 
+  const handleModelDrop = async (file: File) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dScene'))
+      return
+    }
+
+    try {
+      const resourceFolder =
+        (node.properties['Resource Folder'] as string) || ''
+      const subfolder = resourceFolder.trim()
+        ? `3d/${resourceFolder.trim()}`
+        : '3d'
+
+      const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+
+      if (!uploadedPath) {
+        useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+        return
+      }
+
+      const modelUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(uploadedPath),
+          'input'
+        )
+      )
+
+      await load3d.loadModel(modelUrl)
+
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      if (modelWidget) {
+        const options = modelWidget.options as { values?: string[] } | undefined
+        if (options?.values && !options.values.includes(uploadedPath)) {
+          options.values.push(uploadedPath)
+        }
+        modelWidget.value = uploadedPath
+      }
+    } catch (error) {
+      console.error('Model drop failed:', error)
+      useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+    }
+  }
+
   const cleanup = () => {
     load3d?.remove()
     load3d = null
@@ -358,8 +431,8 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     hasBackgroundImage,
     upDirection,
     materialMode,
-    edgeThreshold,
     needApplyChanges,
+    isPreview,
 
     // Methods
     initializeViewer,
@@ -371,6 +444,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     applyChanges,
     refreshViewport,
     handleBackgroundImageUpdate,
+    handleModelDrop,
     cleanup
   }
 }
diff --git a/src/composables/usePaste.ts b/src/composables/usePaste.ts
index c04901951..551065f0d 100644
--- a/src/composables/usePaste.ts
+++ b/src/composables/usePaste.ts
@@ -7,6 +7,22 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
+import { shouldIgnoreCopyPaste } from '@/workbench/eventHelpers'
+
+function pasteClipboardItems(data: DataTransfer): boolean {
+  const rawData = data.getData('text/html')
+  const match = rawData.match(/data-metadata="([A-Za-z0-9+/=]+)"/)?.[1]
+  if (!match) return false
+  try {
+    useCanvasStore()
+      .getCanvas()
+      ._deserializeItems(JSON.parse(atob(match)), {})
+    return true
+  } catch (err) {
+    console.error(err)
+  }
+  return false
+}
 
 /**
  * Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
@@ -38,15 +54,10 @@ export const usePaste = () => {
   }
 
   useEventListener(document, 'paste', async (e) => {
-    const isTargetInGraph =
-      e.target instanceof Element &&
-      (e.target.classList.contains('litegraph') ||
-        e.target.classList.contains('graph-canvas-container') ||
-        e.target.id === 'graph-canvas')
-
-    // If the target is not in the graph, we don't want to handle the paste event
-    if (!isTargetInGraph) return
-
+    if (shouldIgnoreCopyPaste(e.target)) {
+      // Default system copy
+      return
+    }
     // ctrl+shift+v is used to paste nodes with connections
     // this is handled by litegraph
     if (workspaceStore.shiftDown) return
@@ -109,6 +120,7 @@ export const usePaste = () => {
         return
       }
     }
+    if (pasteClipboardItems(data)) return
 
     // No image found. Look for node data
     data = data.getData('text/plain')
diff --git a/src/composables/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index c22abb57b..4d399e757 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -1,9 +1,11 @@
 import { refDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
+import { useTelemetry } from '@/platform/telemetry'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { debounce } from 'es-toolkit/compat'
 
 export function useTemplateFiltering(
   templates: Ref<TemplateInfo[]> | TemplateInfo[]
@@ -11,7 +13,7 @@ export function useTemplateFiltering(
   const searchQuery = ref('')
   const selectedModels = ref<string[]>([])
   const selectedUseCases = ref<string[]>([])
-  const selectedLicenses = ref<string[]>([])
+  const selectedRunsOn = ref<string[]>([])
   const sortBy = ref<
     | 'default'
     | 'alphabetical'
@@ -61,8 +63,8 @@ export function useTemplateFiltering(
     return Array.from(tagSet).sort()
   })
 
-  const availableLicenses = computed(() => {
-    return ['Open Source', 'Closed Source (API Nodes)']
+  const availableRunsOn = computed(() => {
+    return ['ComfyUI', 'External or Remote API']
   })
 
   const debouncedSearchQuery = refDebounced(searchQuery, 50)
@@ -106,30 +108,42 @@ export function useTemplateFiltering(
     })
   })
 
-  const filteredByLicenses = computed(() => {
-    if (selectedLicenses.value.length === 0) {
+  const filteredByRunsOn = computed(() => {
+    if (selectedRunsOn.value.length === 0) {
       return filteredByUseCases.value
     }
 
     return filteredByUseCases.value.filter((template) => {
-      // Check if template has API in its tags or name (indicating it's a closed source API node)
-      const isApiTemplate =
-        template.tags?.includes('API') ||
-        template.name?.toLowerCase().includes('api_')
+      // Use openSource field to determine where template runs
+      // openSource === false -> External/Remote API
+      // openSource !== false -> ComfyUI (includes true and undefined)
+      const isExternalAPI = template.openSource === false
+      const isComfyUI = template.openSource !== false
 
-      return selectedLicenses.value.some((selectedLicense) => {
-        if (selectedLicense === 'Closed Source (API Nodes)') {
-          return isApiTemplate
-        } else if (selectedLicense === 'Open Source') {
-          return !isApiTemplate
+      return selectedRunsOn.value.some((selectedRunsOn) => {
+        if (selectedRunsOn === 'External or Remote API') {
+          return isExternalAPI
+        } else if (selectedRunsOn === 'ComfyUI') {
+          return isComfyUI
         }
         return false
       })
     })
   })
 
+  const getVramMetric = (template: TemplateInfo) => {
+    if (
+      typeof template.vram === 'number' &&
+      Number.isFinite(template.vram) &&
+      template.vram > 0
+    ) {
+      return template.vram
+    }
+    return Number.POSITIVE_INFINITY
+  }
+
   const sortedTemplates = computed(() => {
-    const templates = [...filteredByLicenses.value]
+    const templates = [...filteredByRunsOn.value]
 
     switch (sortBy.value) {
       case 'alphabetical':
@@ -145,9 +159,21 @@ export function useTemplateFiltering(
           return dateB.getTime() - dateA.getTime()
         })
       case 'vram-low-to-high':
-        // TODO: Implement VRAM sorting when VRAM data is available
-        // For now, keep original order
-        return templates
+        return templates.sort((a, b) => {
+          const vramA = getVramMetric(a)
+          const vramB = getVramMetric(b)
+
+          if (vramA === vramB) {
+            const nameA = a.title || a.name || ''
+            const nameB = b.title || b.name || ''
+            return nameA.localeCompare(nameB)
+          }
+
+          if (vramA === Number.POSITIVE_INFINITY) return 1
+          if (vramB === Number.POSITIVE_INFINITY) return -1
+
+          return vramA - vramB
+        })
       case 'model-size-low-to-high':
         return templates.sort((a: any, b: any) => {
           const sizeA =
@@ -170,7 +196,7 @@ export function useTemplateFiltering(
     searchQuery.value = ''
     selectedModels.value = []
     selectedUseCases.value = []
-    selectedLicenses.value = []
+    selectedRunsOn.value = []
     sortBy.value = 'default'
   }
 
@@ -182,26 +208,58 @@ export function useTemplateFiltering(
     selectedUseCases.value = selectedUseCases.value.filter((t) => t !== tag)
   }
 
-  const removeLicenseFilter = (license: string) => {
-    selectedLicenses.value = selectedLicenses.value.filter((l) => l !== license)
+  const removeRunsOnFilter = (runsOn: string) => {
+    selectedRunsOn.value = selectedRunsOn.value.filter((r) => r !== runsOn)
   }
 
   const filteredCount = computed(() => filteredTemplates.value.length)
   const totalCount = computed(() => templatesArray.value.length)
 
+  // Template filter tracking (debounced to avoid excessive events)
+  const debouncedTrackFilterChange = debounce(() => {
+    useTelemetry()?.trackTemplateFilterChanged({
+      search_query: searchQuery.value || undefined,
+      selected_models: selectedModels.value,
+      selected_use_cases: selectedUseCases.value,
+      selected_runs_on: selectedRunsOn.value,
+      sort_by: sortBy.value,
+      filtered_count: filteredCount.value,
+      total_count: totalCount.value
+    })
+  }, 500)
+
+  // Watch for filter changes and track them
+  watch(
+    [searchQuery, selectedModels, selectedUseCases, selectedRunsOn, sortBy],
+    () => {
+      // Only track if at least one filter is active (to avoid tracking initial state)
+      const hasActiveFilters =
+        searchQuery.value.trim() !== '' ||
+        selectedModels.value.length > 0 ||
+        selectedUseCases.value.length > 0 ||
+        selectedRunsOn.value.length > 0 ||
+        sortBy.value !== 'default'
+
+      if (hasActiveFilters) {
+        debouncedTrackFilterChange()
+      }
+    },
+    { deep: true }
+  )
+
   return {
     // State
     searchQuery,
     selectedModels,
     selectedUseCases,
-    selectedLicenses,
+    selectedRunsOn,
     sortBy,
 
     // Computed
     filteredTemplates,
     availableModels,
     availableUseCases,
-    availableLicenses,
+    availableRunsOn,
     filteredCount,
     totalCount,
 
@@ -209,6 +267,6 @@ export function useTemplateFiltering(
     resetFilters,
     removeModelFilter,
     removeUseCaseFilter,
-    removeLicenseFilter
+    removeRunsOnFilter
   }
 }
diff --git a/src/composables/useVueNodesMigrationDismissed.ts b/src/composables/useVueNodesMigrationDismissed.ts
new file mode 100644
index 000000000..1d72760fc
--- /dev/null
+++ b/src/composables/useVueNodesMigrationDismissed.ts
@@ -0,0 +1,8 @@
+import { createSharedComposable, useLocalStorage } from '@vueuse/core'
+
+// Browser storage events don't fire in the same tab, so separate
+// useLocalStorage() calls create isolated reactive refs. Use shared
+// composable to ensure all components use the same ref instance.
+export const useVueNodesMigrationDismissed = createSharedComposable(() =>
+  useLocalStorage('comfy.vueNodesMigration.dismissed', false)
+)
diff --git a/src/composables/useWorkflowTemplateSelectorDialog.ts b/src/composables/useWorkflowTemplateSelectorDialog.ts
index ca05ffb1d..db2993698 100644
--- a/src/composables/useWorkflowTemplateSelectorDialog.ts
+++ b/src/composables/useWorkflowTemplateSelectorDialog.ts
@@ -1,4 +1,5 @@
 import WorkflowTemplateSelectorDialog from '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -12,7 +13,9 @@ export const useWorkflowTemplateSelectorDialog = () => {
     dialogStore.closeDialog({ key: DIALOG_KEY })
   }
 
-  function show() {
+  function show(source: 'sidebar' | 'menu' | 'command' = 'command') {
+    useTelemetry()?.trackTemplateLibraryOpened({ source })
+
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
       component: WorkflowTemplateSelectorDialog,
diff --git a/src/config/subscriptionPricesConfig.ts b/src/config/subscriptionPricesConfig.ts
new file mode 100644
index 000000000..46e8b4597
--- /dev/null
+++ b/src/config/subscriptionPricesConfig.ts
@@ -0,0 +1 @@
+export const MONTHLY_SUBSCRIPTION_PRICE = 20
diff --git a/src/core/graph/subgraph/SubgraphNode.vue b/src/core/graph/subgraph/SubgraphNode.vue
index e40bdeef2..7be5246f2 100644
--- a/src/core/graph/subgraph/SubgraphNode.vue
+++ b/src/core/graph/subgraph/SubgraphNode.vue
@@ -17,6 +17,7 @@ import {
   matchesPropertyItem,
   matchesWidgetItem,
   promoteWidget,
+  pruneDisconnected,
   widgetItemToProperty
 } from '@/core/graph/subgraph/proxyWidgetUtils'
 import type { WidgetItem } from '@/core/graph/subgraph/proxyWidgetUtils'
@@ -235,6 +236,7 @@ watchDebounced(
 )
 onMounted(() => {
   setDraggableState()
+  if (activeNode.value) pruneDisconnected(activeNode.value)
 })
 onBeforeUnmount(() => {
   draggableList.value?.dispose()
@@ -255,7 +257,7 @@ onBeforeUnmount(() => {
         {{ $t('subgraphStore.shown') }}
       </div>
       <a
-        class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
+        class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
         @click.stop="hideAll"
       >
         {{ $t('subgraphStore.hideAll') }}</a
@@ -280,7 +282,7 @@ onBeforeUnmount(() => {
         {{ $t('subgraphStore.hidden') }}
       </div>
       <a
-        class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
+        class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
         @click.stop="showAll"
       >
         {{ $t('subgraphStore.showAll') }}</a
diff --git a/src/core/graph/subgraph/proxyWidget.ts b/src/core/graph/subgraph/proxyWidget.ts
index 26d3d8870..ef04bd76b 100644
--- a/src/core/graph/subgraph/proxyWidget.ts
+++ b/src/core/graph/subgraph/proxyWidget.ts
@@ -1,4 +1,7 @@
-import { demoteWidget } from '@/core/graph/subgraph/proxyWidgetUtils'
+import {
+  demoteWidget,
+  promoteRecommendedWidgets
+} from '@/core/graph/subgraph/proxyWidgetUtils'
 import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
 import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
 import type {
@@ -45,9 +48,12 @@ type Overlay = Partial<IBaseWidget> & {
  * on the linked widget
  */
 type ProxyWidget = IBaseWidget & { _overlay: Overlay }
-function isProxyWidget(w: IBaseWidget): w is ProxyWidget {
+export function isProxyWidget(w: IBaseWidget): w is ProxyWidget {
   return (w as { _overlay?: Overlay })?._overlay?.isProxyWidget ?? false
 }
+export function isDisconnectedWidget(w: ProxyWidget) {
+  return w instanceof disconnectedWidget.constructor
+}
 
 export function registerProxyWidgets(canvas: LGraphCanvas) {
   //NOTE: canvasStore hasn't been initialized yet
@@ -62,6 +68,10 @@ export function registerProxyWidgets(canvas: LGraphCanvas) {
       }
     }
   })
+  canvas.canvas.addEventListener<'subgraph-converted'>(
+    'subgraph-converted',
+    (e) => promoteRecommendedWidgets(e.detail.subgraphNode)
+  )
   SubgraphNode.prototype.onConfigure = onConfigure
 }
 
@@ -158,7 +168,11 @@ function resolveLinkedWidget(
   const { graph, nodeId, widgetName } = overlay
   const n = getNodeByExecutionId(graph, nodeId)
   if (!n) return [undefined, undefined]
-  return [n, n.widgets?.find((w: IBaseWidget) => w.name === widgetName)]
+  const widget = n.widgets?.find((w: IBaseWidget) => w.name === widgetName)
+  //Slightly hacky. Force recursive resolution of nested widgets
+  if (widget && isProxyWidget(widget) && isDisconnectedWidget(widget))
+    widget.computedHeight = 20
+  return [n, widget]
 }
 
 function newProxyFromOverlay(subgraphNode: SubgraphNode, overlay: Overlay) {
diff --git a/src/core/graph/subgraph/proxyWidgetUtils.ts b/src/core/graph/subgraph/proxyWidgetUtils.ts
index 0c2e9bc23..27961e54d 100644
--- a/src/core/graph/subgraph/proxyWidgetUtils.ts
+++ b/src/core/graph/subgraph/proxyWidgetUtils.ts
@@ -1,11 +1,18 @@
 import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
 import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
+import {
+  isProxyWidget,
+  isDisconnectedWidget
+} from '@/core/graph/subgraph/proxyWidget'
+import { t } from '@/i18n'
 import type {
   IContextMenuValue,
   LGraphNode
 } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 
@@ -63,7 +70,15 @@ function getParentNodes(): SubgraphNode[] {
   //or by adding a new event for parent listeners to collect from
   const { navigationStack } = useSubgraphNavigationStore()
   const subgraph = navigationStack.at(-1)
-  if (!subgraph) throw new Error("Can't promote widget when not in subgraph")
+  if (!subgraph) {
+    useToastStore().add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: t('subgraphStore.promoteOutsideSubgraph'),
+      life: 2000
+    })
+    return []
+  }
   const parentGraph = navigationStack.at(-2) ?? subgraph.rootGraph
   return parentGraph.nodes.filter(
     (node): node is SubgraphNode =>
@@ -96,6 +111,21 @@ export function addWidgetPromotionOptions(
     })
   }
 }
+export function tryToggleWidgetPromotion() {
+  const canvas = useCanvasStore().getCanvas()
+  const [x, y] = canvas.graph_mouse
+  const node = canvas.graph?.getNodeOnPos(x, y, canvas.visible_nodes)
+  if (!node) return
+  const widget = node.getWidgetOnPos(x, y, true)
+  const parents = getParentNodes()
+  if (!parents.length || !widget) return
+  const promotableParents = parents.filter(
+    (s) => !getProxyWidgets(s).some(matchesPropertyItem([node, widget]))
+  )
+  if (promotableParents.length > 0)
+    promoteWidget(node, widget, promotableParents)
+  else demoteWidget(node, widget, parents)
+}
 const recommendedNodes = [
   'CLIPTextEncode',
   'LoadImage',
@@ -135,4 +165,12 @@ export function promoteRecommendedWidgets(subgraphNode: SubgraphNode) {
   const proxyWidgets: ProxyWidgetsProperty =
     filteredWidgets.map(widgetItemToProperty)
   subgraphNode.properties.proxyWidgets = proxyWidgets
+  subgraphNode.computeSize(subgraphNode.size)
+}
+
+export function pruneDisconnected(subgraphNode: SubgraphNode) {
+  subgraphNode.properties.proxyWidgets = subgraphNode.widgets
+    .filter(isProxyWidget)
+    .filter((w) => !isDisconnectedWidget(w))
+    .map((w) => [w._overlay.nodeId, w._overlay.widgetName])
 }
diff --git a/src/extensions/core/cloudBadge.ts b/src/extensions/core/cloudBadge.ts
deleted file mode 100644
index 5f2b569fa..000000000
--- a/src/extensions/core/cloudBadge.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { t } from '@/i18n'
-import { isCloud } from '@/platform/distribution/types'
-import { useExtensionService } from '@/services/extensionService'
-
-useExtensionService().registerExtension({
-  name: 'Comfy.CloudBadge',
-  // Only show badge when running in cloud environment
-  topbarBadges: isCloud
-    ? [
-        {
-          label: t('g.beta'),
-          text: 'Comfy Cloud'
-        }
-      ]
-    : undefined
-})
diff --git a/src/extensions/core/cloudBadges.ts b/src/extensions/core/cloudBadges.ts
new file mode 100644
index 000000000..45f658717
--- /dev/null
+++ b/src/extensions/core/cloudBadges.ts
@@ -0,0 +1,36 @@
+import { computed } from 'vue'
+
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { t } from '@/i18n'
+import { useExtensionService } from '@/services/extensionService'
+import type { TopbarBadge } from '@/types/comfy'
+
+const badges = computed<TopbarBadge[]>(() => {
+  const result: TopbarBadge[] = []
+
+  // Add server health alert first (if present)
+  const alert = remoteConfig.value.server_health_alert
+  if (alert) {
+    result.push({
+      text: alert.message,
+      label: alert.badge,
+      variant: alert.severity ?? 'error',
+      tooltip: alert.tooltip
+    })
+  }
+
+  // Always add cloud badge last (furthest right)
+  result.push({
+    label: t('g.beta'),
+    text: 'Comfy Cloud'
+  })
+
+  return result
+})
+
+useExtensionService().registerExtension({
+  name: 'Comfy.Cloud.Badges',
+  get topbarBadges() {
+    return badges.value
+  }
+})
diff --git a/src/extensions/core/cloudRemoteConfig.ts b/src/extensions/core/cloudRemoteConfig.ts
new file mode 100644
index 000000000..a40ac401b
--- /dev/null
+++ b/src/extensions/core/cloudRemoteConfig.ts
@@ -0,0 +1,15 @@
+import { loadRemoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { useExtensionService } from '@/services/extensionService'
+
+/**
+ * Cloud-only extension that polls for remote config updates
+ * Initial config load happens in main.ts before any other imports
+ */
+useExtensionService().registerExtension({
+  name: 'Comfy.Cloud.RemoteConfig',
+
+  setup: async () => {
+    // Poll for config updates every 30 seconds
+    setInterval(() => void loadRemoteConfig(), 30000)
+  }
+})
diff --git a/src/extensions/core/cloudSessionCookie.ts b/src/extensions/core/cloudSessionCookie.ts
new file mode 100644
index 000000000..fc9ffcb80
--- /dev/null
+++ b/src/extensions/core/cloudSessionCookie.ts
@@ -0,0 +1,25 @@
+import { useSessionCookie } from '@/platform/auth/session/useSessionCookie'
+import { useExtensionService } from '@/services/extensionService'
+
+/**
+ * Cloud-only extension that manages session cookies for authentication.
+ * Creates session cookie on login, refreshes it when token refreshes, and deletes on logout.
+ */
+useExtensionService().registerExtension({
+  name: 'Comfy.Cloud.SessionCookie',
+
+  onAuthUserResolved: async () => {
+    const { createSession } = useSessionCookie()
+    await createSession()
+  },
+
+  onAuthTokenRefreshed: async () => {
+    const { createSession } = useSessionCookie()
+    await createSession()
+  },
+
+  onAuthUserLogout: async () => {
+    const { deleteSession } = useSessionCookie()
+    await deleteSession()
+  }
+})
diff --git a/src/extensions/core/cloudSubscription.ts b/src/extensions/core/cloudSubscription.ts
new file mode 100644
index 000000000..a483a6d46
--- /dev/null
+++ b/src/extensions/core/cloudSubscription.ts
@@ -0,0 +1,26 @@
+import { watch } from 'vue'
+
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useExtensionService } from '@/services/extensionService'
+
+/**
+ * Cloud-only extension that enforces active subscription requirement
+ */
+useExtensionService().registerExtension({
+  name: 'Comfy.Cloud.Subscription',
+
+  setup: async () => {
+    const { isLoggedIn } = useCurrentUser()
+    const { requireActiveSubscription } = useSubscription()
+
+    const checkSubscriptionStatus = () => {
+      if (!isLoggedIn.value) return
+      void requireActiveSubscription()
+    }
+
+    watch(() => isLoggedIn.value, checkSubscriptionStatus, {
+      immediate: true
+    })
+  }
+})
diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts
index df063ed0b..5b4146c2d 100644
--- a/src/extensions/core/groupNode.ts
+++ b/src/extensions/core/groupNode.ts
@@ -1,10 +1,10 @@
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
 import { t } from '@/i18n'
 import { type NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
 import {
   type ExecutableLGraphNode,
   type ExecutionId,
-  LGraphCanvas,
   LGraphNode,
   LiteGraph,
   SubgraphNode
@@ -542,7 +542,7 @@ export class GroupNodeConfig {
         primitiveConfig
       )
       primitiveConfig[1] =
-        config?.customConfig ?? inputs[inputName][1]
+        (config?.customConfig ?? inputs[inputName][1])
           ? { ...inputs[inputName][1] }
           : {}
 
@@ -1630,57 +1630,6 @@ export class GroupNodeHandler {
   }
 }
 
-function addConvertToGroupOptions() {
-  // @ts-expect-error fixme ts strict error
-  function addConvertOption(options, index) {
-    const selected = Object.values(app.canvas.selected_nodes ?? {})
-    const disabled =
-      selected.length < 2 ||
-      selected.find((n) => GroupNodeHandler.isGroupNode(n))
-    options.splice(index, null, {
-      content: `Convert to Group Node (Deprecated)`,
-      disabled,
-      callback: convertSelectedNodesToGroupNode
-    })
-  }
-
-  // @ts-expect-error fixme ts strict error
-  function addManageOption(options, index) {
-    const groups = app.graph.extra?.groupNodes
-    const disabled = !groups || !Object.keys(groups).length
-    options.splice(index, null, {
-      content: `Manage Group Nodes`,
-      disabled,
-      callback: () => manageGroupNodes()
-    })
-  }
-
-  // Add to canvas
-  const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
-  LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-    // @ts-expect-error fixme ts strict error
-    const options = getCanvasMenuOptions.apply(this, arguments)
-    const index = options.findIndex((o) => o?.content === 'Add Group')
-    const insertAt = index === -1 ? options.length - 1 : index + 2
-    addConvertOption(options, insertAt)
-    addManageOption(options, insertAt + 1)
-    return options
-  }
-
-  // Add to nodes
-  const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
-  LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
-    // @ts-expect-error fixme ts strict error
-    const options = getNodeMenuOptions.apply(this, arguments)
-    if (!GroupNodeHandler.isGroupNode(node)) {
-      const index = options.findIndex((o) => o?.content === 'Properties')
-      const insertAt = index === -1 ? options.length - 1 : index
-      addConvertOption(options, insertAt)
-    }
-    return options
-  }
-}
-
 const replaceLegacySeparators = (nodes: ComfyNode[]): void => {
   for (const node of nodes) {
     if (typeof node.type === 'string' && node.type.startsWith('workflow/')) {
@@ -1718,6 +1667,9 @@ async function convertSelectedNodesToGroupNode() {
   return await GroupNodeHandler.fromNodes(nodes)
 }
 
+const convertDisabled = (selected: LGraphNode[]) =>
+  selected.length < 2 || !!selected.find((n) => GroupNodeHandler.isGroupNode(n))
+
 function ungroupSelectedGroupNodes() {
   const nodes = Object.values(app.canvas.selected_nodes ?? {})
   for (const node of nodes) {
@@ -1742,21 +1694,22 @@ const ext: ComfyExtension = {
       label: 'Convert selected nodes to group node',
       icon: 'pi pi-sitemap',
       versionAdded: '1.3.17',
-      function: convertSelectedNodesToGroupNode
+      function: () => convertSelectedNodesToGroupNode()
     },
     {
       id: 'Comfy.GroupNode.UngroupSelectedGroupNodes',
       label: 'Ungroup selected group nodes',
       icon: 'pi pi-sitemap',
       versionAdded: '1.3.17',
-      function: ungroupSelectedGroupNodes
+      function: () => ungroupSelectedGroupNodes()
     },
     {
       id: 'Comfy.GroupNode.ManageGroupNodes',
       label: 'Manage group nodes',
       icon: 'pi pi-cog',
       versionAdded: '1.3.17',
-      function: manageGroupNodes
+      function: (...args: unknown[]) =>
+        manageGroupNodes(args[0] as string | undefined)
     }
   ],
   keybindings: [
@@ -1776,8 +1729,46 @@ const ext: ComfyExtension = {
       }
     }
   ],
-  setup() {
-    addConvertToGroupOptions()
+
+  getCanvasMenuItems(canvas): IContextMenuValue[] {
+    const items: IContextMenuValue[] = []
+    const selected = Object.values(canvas.selected_nodes ?? {})
+    const convertEnabled = !convertDisabled(selected)
+
+    items.push({
+      content: `Convert to Group Node (Deprecated)`,
+      disabled: !convertEnabled,
+      // @ts-expect-error fixme ts strict error - async callback
+      callback: () => convertSelectedNodesToGroupNode()
+    })
+
+    const groups = canvas.graph?.extra?.groupNodes
+    const manageDisabled = !groups || !Object.keys(groups).length
+    items.push({
+      content: `Manage Group Nodes`,
+      disabled: manageDisabled,
+      callback: () => manageGroupNodes()
+    })
+
+    return items
+  },
+
+  getNodeMenuItems(node): IContextMenuValue[] {
+    if (GroupNodeHandler.isGroupNode(node)) {
+      return []
+    }
+
+    const selected = Object.values(app.canvas.selected_nodes ?? {})
+    const convertEnabled = !convertDisabled(selected)
+
+    return [
+      {
+        content: `Convert to Group Node (Deprecated)`,
+        disabled: !convertEnabled,
+        // @ts-expect-error fixme ts strict error - async callback
+        callback: () => convertSelectedNodesToGroupNode()
+      }
+    ]
   },
   async beforeConfigureGraph(
     graphData: ComfyWorkflowJSON,
diff --git a/src/extensions/core/groupNodeManage.ts b/src/extensions/core/groupNodeManage.ts
index 355af0ccd..8e52ffccc 100644
--- a/src/extensions/core/groupNodeManage.ts
+++ b/src/extensions/core/groupNodeManage.ts
@@ -553,8 +553,8 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
     this.element.replaceChildren(outer)
     this.changeGroup(
       type
-        ? groupNodes.find((g) => `${PREFIX}${SEPARATOR}${g}` === type) ??
-            groupNodes[0]
+        ? (groupNodes.find((g) => `${PREFIX}${SEPARATOR}${g}` === type) ??
+            groupNodes[0])
         : groupNodes[0]
     )
     this.element.showModal()
diff --git a/src/extensions/core/groupOptions.ts b/src/extensions/core/groupOptions.ts
index 5d49e0444..7e3240bcf 100644
--- a/src/extensions/core/groupOptions.ts
+++ b/src/extensions/core/groupOptions.ts
@@ -1,8 +1,14 @@
-import type { Positionable } from '@/lib/litegraph/src/interfaces'
-import { LGraphGroup } from '@/lib/litegraph/src/litegraph'
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  IContextMenuValue,
+  Positionable
+} from '@/lib/litegraph/src/interfaces'
+import {
+  LGraphCanvas,
+  LGraphGroup,
+  type LGraphNode
+} from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import type { ComfyExtension } from '@/types/comfy'
 
 import { app } from '../../scripts/app'
 
@@ -16,220 +22,218 @@ function addNodesToGroup(group: LGraphGroup, items: Iterable<Positionable>) {
   group.resizeTo([...group.children, ...items], padding)
 }
 
-app.registerExtension({
+const ext: ComfyExtension = {
   name: 'Comfy.GroupOptions',
-  setup() {
-    const orig = LGraphCanvas.prototype.getCanvasMenuOptions
-    // graph_mouse
-    LGraphCanvas.prototype.getCanvasMenuOptions = function (
-      this: LGraphCanvas
-    ) {
-      // @ts-expect-error fixme ts strict error
-      const options = orig.apply(this, arguments)
-      // @ts-expect-error fixme ts strict error
-      const group = this.graph.getGroupOnPos(
-        this.graph_mouse[0],
-        this.graph_mouse[1]
-      )
-      if (!group) {
-        if (this.selectedItems.size > 0) {
-          options.push({
-            content: 'Add Group For Selected Nodes',
-            callback: () => {
-              const group = new LGraphGroup()
-              addNodesToGroup(group, this.selectedItems)
-              // @ts-expect-error fixme ts strict error
-              this.graph.add(group)
-              // @ts-expect-error fixme ts strict error
-              this.graph.change()
 
-              group.recomputeInsideNodes()
+  getCanvasMenuItems(canvas: LGraphCanvas): IContextMenuValue[] {
+    const items: IContextMenuValue[] = []
+
+    // @ts-expect-error fixme ts strict error
+    const group = canvas.graph.getGroupOnPos(
+      canvas.graph_mouse[0],
+      canvas.graph_mouse[1]
+    )
+
+    if (!group) {
+      if (canvas.selectedItems.size > 0) {
+        items.push({
+          content: 'Add Group For Selected Nodes',
+          callback: () => {
+            const group = new LGraphGroup()
+            addNodesToGroup(group, canvas.selectedItems)
+            // @ts-expect-error fixme ts strict error
+            canvas.graph.add(group)
+            // @ts-expect-error fixme ts strict error
+            canvas.graph.change()
+
+            group.recomputeInsideNodes()
+          }
+        })
+      }
+
+      return items
+    }
+
+    // Group nodes aren't recomputed until the group is moved, this ensures the nodes are up-to-date
+    group.recomputeInsideNodes()
+    const nodesInGroup = group.nodes
+
+    items.push({
+      content: 'Add Selected Nodes To Group',
+      disabled: !canvas.selectedItems?.size,
+      callback: () => {
+        addNodesToGroup(group, canvas.selectedItems)
+        // @ts-expect-error fixme ts strict error
+        canvas.graph.change()
+      }
+    })
+
+    // No nodes in group, return default options
+    if (nodesInGroup.length === 0) {
+      return items
+    } else {
+      // Add a separator between the default options and the group options
+      // @ts-expect-error fixme ts strict error
+      items.push(null)
+    }
+
+    // Check if all nodes are the same mode
+    let allNodesAreSameMode = true
+    for (let i = 1; i < nodesInGroup.length; i++) {
+      if (nodesInGroup[i].mode !== nodesInGroup[0].mode) {
+        allNodesAreSameMode = false
+        break
+      }
+    }
+
+    items.push({
+      content: 'Fit Group To Nodes',
+      callback: () => {
+        group.recomputeInsideNodes()
+        const padding = useSettingStore().get(
+          'Comfy.GroupSelectedNodes.Padding'
+        )
+        group.resizeTo(group.children, padding)
+        // @ts-expect-error fixme ts strict error
+        canvas.graph.change()
+      }
+    })
+
+    items.push({
+      content: 'Select Nodes',
+      callback: () => {
+        canvas.selectNodes(nodesInGroup)
+        // @ts-expect-error fixme ts strict error
+        canvas.graph.change()
+        canvas.canvas.focus()
+      }
+    })
+
+    // Modes
+    // 0: Always
+    // 1: On Event
+    // 2: Never
+    // 3: On Trigger
+    // 4: Bypass
+    // If all nodes are the same mode, add a menu option to change the mode
+    if (allNodesAreSameMode) {
+      const mode = nodesInGroup[0].mode
+      switch (mode) {
+        case 0:
+          // All nodes are always, option to disable, and bypass
+          items.push({
+            content: 'Set Group Nodes to Never',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 2)
+              }
+            }
+          })
+          items.push({
+            content: 'Bypass Group Nodes',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 4)
+              }
+            }
+          })
+          break
+        case 2:
+          // All nodes are never, option to enable, and bypass
+          items.push({
+            content: 'Set Group Nodes to Always',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 0)
+              }
+            }
+          })
+          items.push({
+            content: 'Bypass Group Nodes',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 4)
+              }
+            }
+          })
+          break
+        case 4:
+          // All nodes are bypass, option to enable, and disable
+          items.push({
+            content: 'Set Group Nodes to Always',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 0)
+              }
+            }
+          })
+          items.push({
+            content: 'Set Group Nodes to Never',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 2)
+              }
+            }
+          })
+          break
+        default:
+          // All nodes are On Trigger or On Event(Or other?), option to disable, set to always, or bypass
+          items.push({
+            content: 'Set Group Nodes to Always',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 0)
+              }
+            }
+          })
+          items.push({
+            content: 'Set Group Nodes to Never',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 2)
+              }
+            }
+          })
+          items.push({
+            content: 'Bypass Group Nodes',
+            callback: () => {
+              for (const node of nodesInGroup) {
+                setNodeMode(node, 4)
+              }
             }
           })
-        }
-
-        return options
-      }
-
-      // Group nodes aren't recomputed until the group is moved, this ensures the nodes are up-to-date
-      group.recomputeInsideNodes()
-      const nodesInGroup = group.nodes
-
-      options.push({
-        content: 'Add Selected Nodes To Group',
-        disabled: !this.selectedItems?.size,
-        callback: () => {
-          addNodesToGroup(group, this.selectedItems)
-          // @ts-expect-error fixme ts strict error
-          this.graph.change()
-        }
-      })
-
-      // No nodes in group, return default options
-      if (nodesInGroup.length === 0) {
-        return options
-      } else {
-        // Add a separator between the default options and the group options
-        // @ts-expect-error fixme ts strict error
-        options.push(null)
-      }
-
-      // Check if all nodes are the same mode
-      let allNodesAreSameMode = true
-      for (let i = 1; i < nodesInGroup.length; i++) {
-        if (nodesInGroup[i].mode !== nodesInGroup[0].mode) {
-          allNodesAreSameMode = false
           break
-        }
       }
-
-      options.push({
-        content: 'Fit Group To Nodes',
+    } else {
+      // Nodes are not all the same mode, add a menu option to change the mode to always, never, or bypass
+      items.push({
+        content: 'Set Group Nodes to Always',
         callback: () => {
-          group.recomputeInsideNodes()
-          const padding = useSettingStore().get(
-            'Comfy.GroupSelectedNodes.Padding'
-          )
-          group.resizeTo(group.children, padding)
-          // @ts-expect-error fixme ts strict error
-          this.graph.change()
+          for (const node of nodesInGroup) {
+            setNodeMode(node, 0)
+          }
         }
       })
-
-      options.push({
-        content: 'Select Nodes',
+      items.push({
+        content: 'Set Group Nodes to Never',
         callback: () => {
-          this.selectNodes(nodesInGroup)
-          // @ts-expect-error fixme ts strict error
-          this.graph.change()
-          this.canvas.focus()
+          for (const node of nodesInGroup) {
+            setNodeMode(node, 2)
+          }
         }
       })
-
-      // Modes
-      // 0: Always
-      // 1: On Event
-      // 2: Never
-      // 3: On Trigger
-      // 4: Bypass
-      // If all nodes are the same mode, add a menu option to change the mode
-      if (allNodesAreSameMode) {
-        const mode = nodesInGroup[0].mode
-        switch (mode) {
-          case 0:
-            // All nodes are always, option to disable, and bypass
-            options.push({
-              content: 'Set Group Nodes to Never',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 2)
-                }
-              }
-            })
-            options.push({
-              content: 'Bypass Group Nodes',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 4)
-                }
-              }
-            })
-            break
-          case 2:
-            // All nodes are never, option to enable, and bypass
-            options.push({
-              content: 'Set Group Nodes to Always',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 0)
-                }
-              }
-            })
-            options.push({
-              content: 'Bypass Group Nodes',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 4)
-                }
-              }
-            })
-            break
-          case 4:
-            // All nodes are bypass, option to enable, and disable
-            options.push({
-              content: 'Set Group Nodes to Always',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 0)
-                }
-              }
-            })
-            options.push({
-              content: 'Set Group Nodes to Never',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 2)
-                }
-              }
-            })
-            break
-          default:
-            // All nodes are On Trigger or On Event(Or other?), option to disable, set to always, or bypass
-            options.push({
-              content: 'Set Group Nodes to Always',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 0)
-                }
-              }
-            })
-            options.push({
-              content: 'Set Group Nodes to Never',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 2)
-                }
-              }
-            })
-            options.push({
-              content: 'Bypass Group Nodes',
-              callback: () => {
-                for (const node of nodesInGroup) {
-                  setNodeMode(node, 4)
-                }
-              }
-            })
-            break
+      items.push({
+        content: 'Bypass Group Nodes',
+        callback: () => {
+          for (const node of nodesInGroup) {
+            setNodeMode(node, 4)
+          }
         }
-      } else {
-        // Nodes are not all the same mode, add a menu option to change the mode to always, never, or bypass
-        options.push({
-          content: 'Set Group Nodes to Always',
-          callback: () => {
-            for (const node of nodesInGroup) {
-              setNodeMode(node, 0)
-            }
-          }
-        })
-        options.push({
-          content: 'Set Group Nodes to Never',
-          callback: () => {
-            for (const node of nodesInGroup) {
-              setNodeMode(node, 2)
-            }
-          }
-        })
-        options.push({
-          content: 'Bypass Group Nodes',
-          callback: () => {
-            for (const node of nodesInGroup) {
-              setNodeMode(node, 4)
-            }
-          }
-        })
-      }
-
-      return options
+      })
     }
+
+    return items
   }
-})
+}
+
+app.registerExtension(ext)
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index 011502f44..a11a61abb 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -24,6 +24,13 @@ import './uploadImage'
 import './webcamCapture'
 import './widgetInputs'
 
+// Cloud-only extensions - tree-shaken in OSS builds
 if (isCloud) {
-  import('./cloudBadge')
+  await import('./cloudRemoteConfig')
+  await import('./cloudBadges')
+  await import('./cloudSessionCookie')
+
+  if (window.__CONFIG__?.subscription_required) {
+    await import('./cloudSubscription')
+  }
 }
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
index c2d8b5d69..143054c65 100644
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -1,12 +1,14 @@
 import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
-import Load3DAnimation from '@/components/load3d/Load3DAnimation.vue'
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
+import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
 import type { IStringWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -18,6 +20,18 @@ import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 import { isLoad3dNode } from '@/utils/litegraphUtil'
 
+const inputSpecLoad3D: CustomInputSpec = {
+  name: 'image',
+  type: 'Load3D',
+  isPreview: false
+}
+
+const inputSpecPreview3D: CustomInputSpec = {
+  name: 'image',
+  type: 'Preview3D',
+  isPreview: true
+}
+
 async function handleModelUpload(files: FileList, node: any) {
   if (!files?.length) return
 
@@ -46,7 +60,13 @@ async function handleModelUpload(files: FileList, node: any) {
       )
     )
 
-    await useLoad3dService().getLoad3d(node)?.loadModel(modelUrl)
+    useLoad3d(node).waitForLoad3d((load3d) => {
+      try {
+        load3d.loadModel(modelUrl)
+      } catch (error) {
+        useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+      }
+    })
 
     if (uploadPath && modelWidget) {
       if (!modelWidget.options?.values?.includes(uploadPath)) {
@@ -103,16 +123,6 @@ useExtensionService().registerExtension({
       defaultValue: true,
       experimental: true
     },
-    {
-      id: 'Comfy.Load3D.ShowPreview',
-      category: ['3D', 'Scene', 'Initial Preview Visibility'],
-      name: 'Initial Preview Visibility',
-      tooltip:
-        'Controls whether the preview screen is visible by default when a new 3D widget is created. This default can still be toggled individually for each widget after creation.',
-      type: 'boolean',
-      defaultValue: true,
-      experimental: true
-    },
     {
       id: 'Comfy.Load3D.BackgroundColor',
       category: ['3D', 'Scene', 'Initial Background Color'],
@@ -257,7 +267,9 @@ useExtensionService().registerExtension({
         )
 
         node.addWidget('button', 'clear', 'clear', () => {
-          useLoad3dService().getLoad3d(node)?.clearModel()
+          useLoad3d(node).waitForLoad3d((load3d) => {
+            load3d.clearModel()
+          })
 
           const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
           if (modelWidget) {
@@ -265,21 +277,16 @@ useExtensionService().registerExtension({
           }
         })
 
-        const inputSpec: CustomInputSpec = {
-          name: 'image',
-          type: 'Load3D',
-          isAnimation: false,
-          isPreview: false
-        }
-
         const widget = new ComponentWidgetImpl({
-          node,
-          name: inputSpec.name,
+          node: node,
+          name: 'image',
           component: Load3D,
-          inputSpec,
+          inputSpec: inputSpecLoad3D,
           options: {}
         })
 
+        widget.type = 'load3D'
+
         addWidget(node, widget)
 
         return { widget }
@@ -287,6 +294,16 @@ useExtensionService().registerExtension({
     }
   },
 
+  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+    // Only show menu items for Load3D nodes
+    if (node.constructor.comfyClass !== 'Load3D') return []
+
+    const load3d = useLoad3dService().getLoad3d(node)
+    if (!load3d) return []
+
+    return createExportMenuItems(load3d)
+  },
+
   async nodeCreated(node) {
     if (node.constructor.comfyClass !== 'Load3D') return
 
@@ -296,8 +313,9 @@ useExtensionService().registerExtension({
 
     await nextTick()
 
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
-      let cameraState = node.properties['Camera Info']
+    useLoad3d(node).waitForLoad3d((load3d) => {
+      const cameraConfig = node.properties['Camera Config'] as any
+      const cameraState = cameraConfig?.state
 
       const config = new Load3DConfiguration(load3d)
 
@@ -307,159 +325,36 @@ useExtensionService().registerExtension({
       const sceneWidget = node.widgets?.find((w) => w.name === 'image')
 
       if (modelWidget && width && height && sceneWidget) {
-        config.configure('input', modelWidget, cameraState, width, height)
+        const settings = {
+          loadFolder: 'input',
+          modelWidget: modelWidget,
+          cameraState: cameraState,
+          width: width,
+          height: height
+        }
+        config.configure(settings)
 
         sceneWidget.serializeValue = async () => {
-          node.properties['Camera Info'] = load3d.getCameraState()
-
-          load3d.stopRecording()
-
-          const {
-            scene: imageData,
-            mask: maskData,
-            normal: normalData,
-            lineart: lineartData
-          } = await load3d.captureScene(
-            width.value as number,
-            height.value as number
-          )
-
-          const [data, dataMask, dataNormal, dataLineart] = await Promise.all([
-            Load3dUtils.uploadTempImage(imageData, 'scene'),
-            Load3dUtils.uploadTempImage(maskData, 'scene_mask'),
-            Load3dUtils.uploadTempImage(normalData, 'scene_normal'),
-            Load3dUtils.uploadTempImage(lineartData, 'scene_lineart')
-          ])
-
-          load3d.handleResize()
-
-          const returnVal = {
-            image: `threed/${data.name} [temp]`,
-            mask: `threed/${dataMask.name} [temp]`,
-            normal: `threed/${dataNormal.name} [temp]`,
-            lineart: `threed/${dataLineart.name} [temp]`,
-            camera_info: node.properties['Camera Info'],
-            recording: ''
+          const currentLoad3d = nodeToLoad3dMap.get(node)
+          if (!currentLoad3d) {
+            console.error('No load3d instance found for node')
+            return null
           }
 
-          const recordingData = load3d.getRecordingData()
-
-          if (recordingData) {
-            const [recording] = await Promise.all([
-              Load3dUtils.uploadTempImage(recordingData, 'recording', 'mp4')
-            ])
-
-            returnVal['recording'] = `threed/${recording.name} [temp]`
+          const cameraConfig = (node.properties['Camera Config'] as any) || {
+            cameraType: currentLoad3d.getCurrentCameraType(),
+            fov: currentLoad3d.cameraManager.perspectiveCamera.fov
           }
+          cameraConfig.state = currentLoad3d.getCameraState()
+          node.properties['Camera Config'] = cameraConfig
 
-          return returnVal
-        }
-      }
-    })
-  }
-})
-
-useExtensionService().registerExtension({
-  name: 'Comfy.Load3DAnimation',
-
-  getCustomWidgets() {
-    return {
-      LOAD_3D_ANIMATION(node) {
-        const fileInput = createFileInput('.gltf,.glb,.fbx', false)
-
-        node.properties['Resource Folder'] = ''
-
-        fileInput.onchange = async () => {
-          await handleModelUpload(fileInput.files!, node)
-        }
-
-        node.addWidget('button', 'upload 3d model', 'upload3dmodel', () => {
-          fileInput.click()
-        })
-
-        const resourcesInput = createFileInput('*', true)
-
-        resourcesInput.onchange = async () => {
-          await handleResourcesUpload(resourcesInput.files!, node)
-          resourcesInput.value = ''
-        }
-
-        node.addWidget(
-          'button',
-          'upload extra resources',
-          'uploadExtraResources',
-          () => {
-            resourcesInput.click()
-          }
-        )
-
-        node.addWidget('button', 'clear', 'clear', () => {
-          useLoad3dService().getLoad3d(node)?.clearModel()
-
-          const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
-          if (modelWidget) {
-            modelWidget.value = ''
-          }
-        })
-
-        const inputSpec: CustomInputSpec = {
-          name: 'image',
-          type: 'Load3DAnimation',
-          isAnimation: true,
-          isPreview: false
-        }
-
-        const widget = new ComponentWidgetImpl({
-          node,
-          name: inputSpec.name,
-          component: Load3DAnimation,
-          inputSpec,
-          options: {}
-        })
-
-        addWidget(node, widget)
-
-        return { widget }
-      }
-    }
-  },
-
-  async nodeCreated(node) {
-    if (node.constructor.comfyClass !== 'Load3DAnimation') return
-
-    const [oldWidth, oldHeight] = node.size
-
-    node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 700)])
-
-    await nextTick()
-
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
-      const sceneWidget = node.widgets?.find((w) => w.name === 'image')
-      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
-      let cameraState = node.properties['Camera Info']
-      const width = node.widgets?.find((w) => w.name === 'width')
-      const height = node.widgets?.find((w) => w.name === 'height')
-
-      if (modelWidget && width && height && sceneWidget && load3d) {
-        const config = new Load3DConfiguration(load3d)
-
-        config.configure('input', modelWidget, cameraState, width, height)
-
-        sceneWidget.serializeValue = async () => {
-          node.properties['Camera Info'] = load3d.getCameraState()
-
-          const load3dAnimation = load3d as Load3dAnimation
-          load3dAnimation.toggleAnimation(false)
-
-          if (load3dAnimation.isRecording()) {
-            load3dAnimation.stopRecording()
-          }
+          currentLoad3d.stopRecording()
 
           const {
             scene: imageData,
             mask: maskData,
             normal: normalData
-          } = await load3dAnimation.captureScene(
+          } = await currentLoad3d.captureScene(
             width.value as number,
             height.value as number
           )
@@ -470,17 +365,19 @@ useExtensionService().registerExtension({
             Load3dUtils.uploadTempImage(normalData, 'scene_normal')
           ])
 
-          load3dAnimation.handleResize()
+          currentLoad3d.handleResize()
 
           const returnVal = {
             image: `threed/${data.name} [temp]`,
             mask: `threed/${dataMask.name} [temp]`,
             normal: `threed/${dataNormal.name} [temp]`,
-            camera_info: node.properties['Camera Info'],
+            camera_info:
+              (node.properties['Camera Config'] as any)?.state || null,
             recording: ''
           }
 
-          const recordingData = load3dAnimation.getRecordingData()
+          const recordingData = currentLoad3d.getRecordingData()
+
           if (recordingData) {
             const [recording] = await Promise.all([
               Load3dUtils.uploadTempImage(recordingData, 'recording', 'mp4')
@@ -505,24 +402,29 @@ useExtensionService().registerExtension({
     }
   },
 
+  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+    // Only show menu items for Preview3D nodes
+    if (node.constructor.comfyClass !== 'Preview3D') return []
+
+    const load3d = useLoad3dService().getLoad3d(node)
+    if (!load3d) return []
+
+    return createExportMenuItems(load3d)
+  },
+
   getCustomWidgets() {
     return {
       PREVIEW_3D(node) {
-        const inputSpec: CustomInputSpec = {
-          name: 'image',
-          type: 'Preview3D',
-          isAnimation: false,
-          isPreview: true
-        }
-
         const widget = new ComponentWidgetImpl({
           node,
-          name: inputSpec.name,
+          name: inputSpecPreview3D.name,
           component: Load3D,
-          inputSpec,
+          inputSpec: inputSpecPreview3D,
           options: {}
         })
 
+        widget.type = 'load3D'
+
         addWidget(node, widget)
 
         return { widget }
@@ -541,7 +443,7 @@ useExtensionService().registerExtension({
 
     const onExecuted = node.onExecuted
 
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
+    useLoad3d(node).waitForLoad3d((load3d) => {
       const config = new Load3DConfiguration(load3d)
 
       const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
@@ -552,9 +454,16 @@ useExtensionService().registerExtension({
         if (lastTimeModelFile) {
           modelWidget.value = lastTimeModelFile
 
-          const cameraState = node.properties['Camera Info']
+          const cameraConfig = node.properties['Camera Config'] as any
+          const cameraState = cameraConfig?.state
 
-          config.configure('output', modelWidget, cameraState)
+          const settings = {
+            loadFolder: 'output',
+            modelWidget: modelWidget,
+            cameraState: cameraState
+          }
+
+          config.configure(settings)
         }
 
         node.onExecuted = function (message: any) {
@@ -569,98 +478,24 @@ useExtensionService().registerExtension({
           }
 
           let cameraState = message.result[1]
+          let bgImagePath = message.result[2]
 
           modelWidget.value = filePath.replaceAll('\\', '/')
 
           node.properties['Last Time Model File'] = modelWidget.value
 
-          config.configure('output', modelWidget, cameraState)
-        }
-      }
-    })
-  }
-})
-
-useExtensionService().registerExtension({
-  name: 'Comfy.Preview3DAnimation',
-
-  async beforeRegisterNodeDef(_nodeType, nodeData) {
-    if ('Preview3DAnimation' === nodeData.name) {
-      // @ts-expect-error InputSpec is not typed correctly
-      nodeData.input.required.image = ['PREVIEW_3D_ANIMATION']
-    }
-  },
-
-  getCustomWidgets() {
-    return {
-      PREVIEW_3D_ANIMATION(node) {
-        const inputSpec: CustomInputSpec = {
-          name: 'image',
-          type: 'Preview3DAnimation',
-          isAnimation: true,
-          isPreview: true
-        }
-
-        const widget = new ComponentWidgetImpl({
-          node,
-          name: inputSpec.name,
-          component: Load3DAnimation,
-          inputSpec,
-          options: {}
-        })
-
-        addWidget(node, widget)
-
-        return { widget }
-      }
-    }
-  },
-
-  async nodeCreated(node) {
-    if (node.constructor.comfyClass !== 'Preview3DAnimation') return
-
-    const [oldWidth, oldHeight] = node.size
-
-    node.setSize([Math.max(oldWidth, 300), Math.max(oldHeight, 550)])
-
-    await nextTick()
-
-    const onExecuted = node.onExecuted
-
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
-      const config = new Load3DConfiguration(load3d)
-
-      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
-
-      if (modelWidget) {
-        const lastTimeModelFile = node.properties['Last Time Model File']
-
-        if (lastTimeModelFile) {
-          modelWidget.value = lastTimeModelFile
-
-          const cameraState = node.properties['Camera Info']
-
-          config.configure('output', modelWidget, cameraState)
-        }
-
-        node.onExecuted = function (message: any) {
-          onExecuted?.apply(this, arguments as any)
-
-          let filePath = message.result[0]
-
-          if (!filePath) {
-            const msg = t('toastMessages.unableToGetModelFilePath')
-            console.error(msg)
-            useToastStore().addAlert(msg)
+          const settings = {
+            loadFolder: 'output',
+            modelWidget: modelWidget,
+            cameraState: cameraState,
+            bgImagePath: bgImagePath
           }
 
-          let cameraState = message.result[1]
+          config.configure(settings)
 
-          modelWidget.value = filePath.replaceAll('\\', '/')
-
-          node.properties['Last Time Model File'] = modelWidget.value
-
-          config.configure('output', modelWidget, cameraState)
+          if (bgImagePath) {
+            load3d.setBackgroundImage(bgImagePath)
+          }
         }
       }
     })
diff --git a/src/extensions/core/load3d/AnimationManager.ts b/src/extensions/core/load3d/AnimationManager.ts
index 542edfdc2..a451da8cd 100644
--- a/src/extensions/core/load3d/AnimationManager.ts
+++ b/src/extensions/core/load3d/AnimationManager.ts
@@ -15,14 +15,9 @@ export class AnimationManager implements AnimationManagerInterface {
   animationSpeed: number = 1.0
 
   private eventManager: EventManagerInterface
-  private getCurrentModel: () => THREE.Object3D | null
 
-  constructor(
-    eventManager: EventManagerInterface,
-    getCurrentModel: () => THREE.Object3D | null
-  ) {
+  constructor(eventManager: EventManagerInterface) {
     this.eventManager = eventManager
-    this.getCurrentModel = getCurrentModel
   }
 
   init(): void {}
@@ -52,23 +47,24 @@ export class AnimationManager implements AnimationManagerInterface {
     let animations: THREE.AnimationClip[] = []
     if (model.animations?.length > 0) {
       animations = model.animations
-    } else if (originalModel && 'animations' in originalModel) {
+    } else if (
+      originalModel &&
+      'animations' in originalModel &&
+      Array.isArray(originalModel.animations)
+    ) {
       animations = originalModel.animations
     }
 
     if (animations.length > 0) {
       this.animationClips = animations
-      if (model.type === 'Scene') {
-        this.currentAnimation = new THREE.AnimationMixer(model)
-      } else {
-        this.currentAnimation = new THREE.AnimationMixer(
-          this.getCurrentModel()!
-        )
-      }
+
+      this.currentAnimation = new THREE.AnimationMixer(model)
 
       if (this.animationClips.length > 0) {
         this.updateSelectedAnimation(0)
       }
+    } else {
+      this.animationClips = []
     }
 
     this.updateAnimationList()
diff --git a/src/extensions/core/load3d/CameraManager.ts b/src/extensions/core/load3d/CameraManager.ts
index 624ce6882..39d98a22c 100644
--- a/src/extensions/core/load3d/CameraManager.ts
+++ b/src/extensions/core/load3d/CameraManager.ts
@@ -82,7 +82,17 @@ export class CameraManager implements CameraManagerInterface {
 
     if (this.controls) {
       this.controls.addEventListener('end', () => {
-        this.nodeStorage.storeNodeProperty('Camera Info', this.getCameraState())
+        const cameraState = this.getCameraState()
+
+        const cameraConfig = this.nodeStorage.loadNodeProperty(
+          'Camera Config',
+          {
+            cameraType: this.getCurrentCameraType(),
+            fov: this.perspectiveCamera.fov
+          }
+        )
+        cameraConfig.state = cameraState
+        this.nodeStorage.storeNodeProperty('Camera Config', cameraConfig)
       })
     }
   }
diff --git a/src/extensions/core/load3d/ControlsManager.ts b/src/extensions/core/load3d/ControlsManager.ts
index ab28b7698..aae6d2ab3 100644
--- a/src/extensions/core/load3d/ControlsManager.ts
+++ b/src/extensions/core/load3d/ControlsManager.ts
@@ -24,13 +24,14 @@ export class ControlsManager implements ControlsManagerInterface {
     this.nodeStorage = nodeStorage
     this.camera = camera
 
-    this.controls = new OrbitControls(camera, renderer.domElement)
+    const container = renderer.domElement.parentElement || renderer.domElement
+    this.controls = new OrbitControls(camera, container)
     this.controls.enableDamping = true
   }
 
   init(): void {
     this.controls.addEventListener('end', () => {
-      this.nodeStorage.storeNodeProperty('Camera Info', {
+      const cameraState = {
         position: this.camera.position.clone(),
         target: this.controls.target.clone(),
         zoom:
@@ -41,7 +42,17 @@ export class ControlsManager implements ControlsManagerInterface {
           this.camera instanceof THREE.PerspectiveCamera
             ? 'perspective'
             : 'orthographic'
+      }
+
+      const cameraConfig = this.nodeStorage.loadNodeProperty('Camera Config', {
+        cameraType: cameraState.cameraType,
+        fov:
+          this.camera instanceof THREE.PerspectiveCamera
+            ? (this.camera as THREE.PerspectiveCamera).fov
+            : 75
       })
+      cameraConfig.state = cameraState
+      this.nodeStorage.storeNodeProperty('Camera Config', cameraConfig)
     })
   }
 
diff --git a/src/extensions/core/load3d/LightingManager.ts b/src/extensions/core/load3d/LightingManager.ts
index 384df3110..198edf59d 100644
--- a/src/extensions/core/load3d/LightingManager.ts
+++ b/src/extensions/core/load3d/LightingManager.ts
@@ -7,6 +7,7 @@ import {
 
 export class LightingManager implements LightingManagerInterface {
   lights: THREE.Light[] = []
+  currentIntensity: number = 3
   private scene: THREE.Scene
   private eventManager: EventManagerInterface
 
@@ -58,6 +59,7 @@ export class LightingManager implements LightingManagerInterface {
   }
 
   setLightIntensity(intensity: number): void {
+    this.currentIntensity = intensity
     this.lights.forEach((light) => {
       if (light instanceof THREE.DirectionalLight) {
         if (light === this.lights[1]) {
diff --git a/src/extensions/core/load3d/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts
index 235ce7279..2ef176ff7 100644
--- a/src/extensions/core/load3d/Load3DConfiguration.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -1,9 +1,24 @@
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import type {
+  CameraConfig,
+  LightConfig,
+  ModelConfig,
+  SceneConfig
+} from '@/extensions/core/load3d/interfaces'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 
+type Load3DConfigurationSettings = {
+  loadFolder: string
+  modelWidget: IBaseWidget
+  cameraState?: any
+  width?: IBaseWidget
+  height?: IBaseWidget
+  bgImagePath?: string
+}
+
 class Load3DConfiguration {
   constructor(private load3d: Load3d) {}
 
@@ -12,22 +27,17 @@ class Load3DConfiguration {
     this.setupDefaultProperties()
   }
 
-  configure(
-    loadFolder: 'input' | 'output',
-    modelWidget: IBaseWidget,
-    cameraState?: any,
-    width: IBaseWidget | null = null,
-    height: IBaseWidget | null = null
-  ) {
-    this.setupModelHandling(modelWidget, loadFolder, cameraState)
-    this.setupTargetSize(width, height)
-    this.setupDefaultProperties()
+  configure(setting: Load3DConfigurationSettings) {
+    this.setupModelHandling(
+      setting.modelWidget,
+      setting.loadFolder,
+      setting.cameraState
+    )
+    this.setupTargetSize(setting.width, setting.height)
+    this.setupDefaultProperties(setting.bgImagePath)
   }
 
-  private setupTargetSize(
-    width: IBaseWidget | null,
-    height: IBaseWidget | null
-  ) {
+  private setupTargetSize(width?: IBaseWidget, height?: IBaseWidget) {
     if (width && height) {
       this.load3d.setTargetSize(width.value as number, height.value as number)
 
@@ -41,10 +51,7 @@ class Load3DConfiguration {
     }
   }
 
-  private setupModelHandlingForSaveMesh(
-    filePath: string,
-    loadFolder: 'input' | 'output'
-  ) {
+  private setupModelHandlingForSaveMesh(filePath: string, loadFolder: string) {
     const onModelWidgetUpdate = this.createModelUpdateHandler(loadFolder)
 
     if (filePath) {
@@ -54,7 +61,7 @@ class Load3DConfiguration {
 
   private setupModelHandling(
     modelWidget: IBaseWidget,
-    loadFolder: 'input' | 'output',
+    loadFolder: string,
     cameraState?: any
   ) {
     const onModelWidgetUpdate = this.createModelUpdateHandler(
@@ -65,63 +72,119 @@ class Load3DConfiguration {
       onModelWidgetUpdate(modelWidget.value)
     }
 
-    modelWidget.callback = (value: string | number | boolean | object) => {
-      this.load3d.node.properties['Texture'] = undefined
+    const originalCallback = modelWidget.callback
 
+    let currentValue = modelWidget.value
+    Object.defineProperty(modelWidget, 'value', {
+      get() {
+        return currentValue
+      },
+      set(newValue) {
+        currentValue = newValue
+        if (modelWidget.callback && newValue !== undefined && newValue !== '') {
+          modelWidget.callback(newValue)
+        }
+      },
+      enumerable: true,
+      configurable: true
+    })
+
+    modelWidget.callback = (value: string | number | boolean | object) => {
       onModelWidgetUpdate(value)
+
+      if (originalCallback) {
+        originalCallback(value)
+      }
     }
   }
 
-  private setupDefaultProperties() {
-    const cameraType = this.load3d.loadNodeProperty(
-      'Camera Type',
-      useSettingStore().get('Comfy.Load3D.CameraType')
-    )
-    this.load3d.toggleCamera(cameraType)
+  private setupDefaultProperties(bgImagePath?: string) {
+    const sceneConfig = this.loadSceneConfig()
+    this.applySceneConfig(sceneConfig, bgImagePath)
 
-    const showGrid = this.load3d.loadNodeProperty(
-      'Show Grid',
-      useSettingStore().get('Comfy.Load3D.ShowGrid')
-    )
+    const cameraConfig = this.loadCameraConfig()
+    this.applyCameraConfig(cameraConfig)
 
-    this.load3d.toggleGrid(showGrid)
-
-    const showPreview = this.load3d.loadNodeProperty(
-      'Show Preview',
-      useSettingStore().get('Comfy.Load3D.ShowPreview')
-    )
-
-    this.load3d.togglePreview(showPreview)
-
-    const bgColor = this.load3d.loadNodeProperty(
-      'Background Color',
-      '#' + useSettingStore().get('Comfy.Load3D.BackgroundColor')
-    )
-
-    this.load3d.setBackgroundColor(bgColor)
-
-    const lightIntensity: number = Number(
-      this.load3d.loadNodeProperty(
-        'Light Intensity',
-        useSettingStore().get('Comfy.Load3D.LightIntensity')
-      )
-    )
-
-    this.load3d.setLightIntensity(lightIntensity)
-
-    const fov: number = Number(this.load3d.loadNodeProperty('FOV', 35))
-
-    this.load3d.setFOV(fov)
-
-    const backgroundImage = this.load3d.loadNodeProperty('Background Image', '')
-
-    this.load3d.setBackgroundImage(backgroundImage)
+    const lightConfig = this.loadLightConfig()
+    this.applyLightConfig(lightConfig)
   }
 
-  private createModelUpdateHandler(
-    loadFolder: 'input' | 'output',
-    cameraState?: any
-  ) {
+  private loadSceneConfig(): SceneConfig {
+    const defaultConfig: SceneConfig = {
+      showGrid: useSettingStore().get('Comfy.Load3D.ShowGrid'),
+      backgroundColor:
+        '#' + useSettingStore().get('Comfy.Load3D.BackgroundColor'),
+      backgroundImage: ''
+    }
+
+    const config = this.load3d.loadNodeProperty('Scene Config', defaultConfig)
+    this.load3d.node.properties['Scene Config'] = config
+    return config
+  }
+
+  private loadCameraConfig(): CameraConfig {
+    const defaultConfig: CameraConfig = {
+      cameraType: useSettingStore().get('Comfy.Load3D.CameraType'),
+      fov: 35
+    }
+
+    const config = this.load3d.loadNodeProperty('Camera Config', defaultConfig)
+    this.load3d.node.properties['Camera Config'] = config
+    return config
+  }
+
+  private loadLightConfig(): LightConfig {
+    const defaultConfig: LightConfig = {
+      intensity: useSettingStore().get('Comfy.Load3D.LightIntensity')
+    }
+
+    const config = this.load3d.loadNodeProperty('Light Config', defaultConfig)
+    this.load3d.node.properties['Light Config'] = config
+    return config
+  }
+
+  private loadModelConfig(): ModelConfig {
+    const defaultConfig: ModelConfig = {
+      upDirection: 'original',
+      materialMode: 'original'
+    }
+
+    const config = this.load3d.loadNodeProperty('Model Config', defaultConfig)
+    this.load3d.node.properties['Model Config'] = config
+    return config
+  }
+
+  private applySceneConfig(config: SceneConfig, bgImagePath?: string) {
+    this.load3d.toggleGrid(config.showGrid)
+    this.load3d.setBackgroundColor(config.backgroundColor)
+    if (config.backgroundImage) {
+      if (bgImagePath && bgImagePath != config.backgroundImage) {
+        return
+      }
+
+      this.load3d.setBackgroundImage(config.backgroundImage)
+    }
+  }
+
+  private applyCameraConfig(config: CameraConfig) {
+    this.load3d.toggleCamera(config.cameraType)
+    this.load3d.setFOV(config.fov)
+
+    if (config.state) {
+      this.load3d.setCameraState(config.state)
+    }
+  }
+
+  private applyLightConfig(config: LightConfig) {
+    this.load3d.setLightIntensity(config.intensity)
+  }
+
+  private applyModelConfig(config: ModelConfig) {
+    this.load3d.setUpDirection(config.upDirection)
+    this.load3d.setMaterialMode(config.materialMode)
+  }
+
+  private createModelUpdateHandler(loadFolder: string, cameraState?: any) {
     let isFirstLoad = true
     return async (value: string | number | boolean | object) => {
       if (!value) return
@@ -139,25 +202,8 @@ class Load3DConfiguration {
 
       await this.load3d.loadModel(modelUrl, filename)
 
-      const upDirection = this.load3d.loadNodeProperty(
-        'Up Direction',
-        'original'
-      )
-
-      this.load3d.setUpDirection(upDirection)
-
-      const materialMode = this.load3d.loadNodeProperty(
-        'Material Mode',
-        'original'
-      )
-
-      this.load3d.setMaterialMode(materialMode)
-
-      const edgeThreshold: number = Number(
-        this.load3d.loadNodeProperty('Edge Threshold', 85)
-      )
-
-      this.load3d.setEdgeThreshold(edgeThreshold)
+      const modelConfig = this.loadModelConfig()
+      this.applyModelConfig(modelConfig)
 
       if (isFirstLoad && cameraState && typeof cameraState === 'object') {
         try {
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 0b4c4f307..d26375f6a 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -1,8 +1,8 @@
 import * as THREE from 'three'
 
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 
+import { AnimationManager } from './AnimationManager'
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
 import { EventManager } from './EventManager'
@@ -10,7 +10,6 @@ import { LightingManager } from './LightingManager'
 import { LoaderManager } from './LoaderManager'
 import { ModelExporter } from './ModelExporter'
 import { NodeStorage } from './NodeStorage'
-import { PreviewManager } from './PreviewManager'
 import { RecordingManager } from './RecordingManager'
 import { SceneManager } from './SceneManager'
 import { SceneModelManager } from './SceneModelManager'
@@ -22,12 +21,14 @@ import {
   type MaterialMode,
   type UpDirection
 } from './interfaces'
+import { app } from '@/scripts/app'
 
 class Load3d {
   renderer: THREE.WebGLRenderer
   protected clock: THREE.Clock
   protected animationFrameId: number | null = null
   node: LGraphNode
+  private loadingPromise: Promise<void> | null = null
 
   eventManager: EventManager
   nodeStorage: NodeStorage
@@ -36,10 +37,10 @@ class Load3d {
   controlsManager: ControlsManager
   lightingManager: LightingManager
   viewHelperManager: ViewHelperManager
-  previewManager: PreviewManager
   loaderManager: LoaderManager
   modelManager: SceneModelManager
   recordingManager: RecordingManager
+  animationManager: AnimationManager
 
   STATUS_MOUSE_ON_NODE: boolean
   STATUS_MOUSE_ON_SCENE: boolean
@@ -51,11 +52,17 @@ class Load3d {
   targetAspectRatio: number = 1
   isViewerMode: boolean = false
 
+  // Context menu tracking
+  private rightMouseDownX: number = 0
+  private rightMouseDownY: number = 0
+  private rightMouseMoved: boolean = false
+  private readonly dragThreshold: number = 5
+  private contextMenuAbortController: AbortController | null = null
+
   constructor(
     container: Element | HTMLElement,
     options: Load3DOptions = {
-      node: {} as LGraphNode,
-      inputSpec: {} as CustomInputSpec
+      node: {} as LGraphNode
     }
   ) {
     this.node = options.node || ({} as LGraphNode)
@@ -76,6 +83,7 @@ class Load3d {
     this.renderer.setClearColor(0x282828)
     this.renderer.autoClear = false
     this.renderer.outputColorSpace = THREE.SRGBColorSpace
+    this.renderer.domElement.classList.add('flex', '!h-full', '!w-full')
     container.appendChild(this.renderer.domElement)
 
     this.eventManager = new EventManager()
@@ -115,27 +123,12 @@ class Load3d {
       this.nodeStorage
     )
 
-    this.previewManager = new PreviewManager(
-      this.sceneManager.scene,
-      this.getActiveCamera.bind(this),
-      this.getControls.bind(this),
-      () => this.renderer,
-      this.eventManager,
-      this.sceneManager.backgroundScene,
-      this.sceneManager.backgroundCamera
-    )
-
-    if (options.disablePreview) {
-      this.previewManager.togglePreview(false)
-    }
-
     this.modelManager = new SceneModelManager(
       this.sceneManager.scene,
       this.renderer,
       this.eventManager,
       this.getActiveCamera.bind(this),
-      this.setupCamera.bind(this),
-      options
+      this.setupCamera.bind(this)
     )
 
     this.loaderManager = new LoaderManager(this.modelManager, this.eventManager)
@@ -145,25 +138,24 @@ class Load3d {
       this.renderer,
       this.eventManager
     )
+
+    this.animationManager = new AnimationManager(this.eventManager)
     this.sceneManager.init()
     this.cameraManager.init()
     this.controlsManager.init()
     this.lightingManager.init()
     this.loaderManager.init()
-    this.loaderManager.init()
+    this.animationManager.init()
 
     this.viewHelperManager.createViewHelper(container)
     this.viewHelperManager.init()
 
-    if (options && !options.inputSpec?.isPreview) {
-      this.previewManager.createCapturePreview(container)
-      this.previewManager.init()
-    }
-
     this.STATUS_MOUSE_ON_NODE = false
     this.STATUS_MOUSE_ON_SCENE = false
     this.STATUS_MOUSE_ON_VIEWER = false
 
+    this.initContextMenu()
+
     this.handleResize()
     this.startAnimation()
 
@@ -172,13 +164,76 @@ class Load3d {
     }, 100)
   }
 
+  /**
+   * Initialize context menu on the Three.js canvas
+   * Detects right-click vs right-drag to show menu only on click
+   */
+  private initContextMenu(): void {
+    const canvas = this.renderer.domElement
+
+    this.contextMenuAbortController = new AbortController()
+    const { signal } = this.contextMenuAbortController
+
+    const mousedownHandler = (e: MouseEvent) => {
+      if (e.button === 2) {
+        this.rightMouseDownX = e.clientX
+        this.rightMouseDownY = e.clientY
+        this.rightMouseMoved = false
+      }
+    }
+
+    const mousemoveHandler = (e: MouseEvent) => {
+      if (e.buttons === 2) {
+        const dx = Math.abs(e.clientX - this.rightMouseDownX)
+        const dy = Math.abs(e.clientY - this.rightMouseDownY)
+
+        if (dx > this.dragThreshold || dy > this.dragThreshold) {
+          this.rightMouseMoved = true
+        }
+      }
+    }
+
+    const contextmenuHandler = (e: MouseEvent) => {
+      if (this.isViewerMode) return
+
+      const dx = Math.abs(e.clientX - this.rightMouseDownX)
+      const dy = Math.abs(e.clientY - this.rightMouseDownY)
+      const wasDragging =
+        this.rightMouseMoved ||
+        dx > this.dragThreshold ||
+        dy > this.dragThreshold
+
+      this.rightMouseMoved = false
+
+      if (wasDragging) {
+        return
+      }
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      this.showNodeContextMenu(e)
+    }
+
+    canvas.addEventListener('mousedown', mousedownHandler, { signal })
+    canvas.addEventListener('mousemove', mousemoveHandler, { signal })
+    canvas.addEventListener('contextmenu', contextmenuHandler, { signal })
+  }
+
+  private showNodeContextMenu(event: MouseEvent): void {
+    const menuOptions = app.canvas.getNodeMenuOptions(this.node)
+
+    new LiteGraph.ContextMenu(menuOptions, {
+      event,
+      title: this.node.type,
+      extra: this.node
+    })
+  }
+
   getEventManager(): EventManager {
     return this.eventManager
   }
 
-  getNodeStorage(): NodeStorage {
-    return this.nodeStorage
-  }
   getSceneManager(): SceneManager {
     return this.sceneManager
   }
@@ -194,9 +249,6 @@ class Load3d {
   getViewHelperManager(): ViewHelperManager {
     return this.viewHelperManager
   }
-  getPreviewManager(): PreviewManager {
-    return this.previewManager
-  }
   getLoaderManager(): LoaderManager {
     return this.loaderManager
   }
@@ -209,15 +261,12 @@ class Load3d {
 
   forceRender(): void {
     const delta = this.clock.getDelta()
+    this.animationManager.update(delta)
     this.viewHelperManager.update(delta)
     this.controlsManager.update()
 
     this.renderMainScene()
 
-    if (this.previewManager.showPreview) {
-      this.previewManager.renderPreview()
-    }
-
     this.resetViewport()
 
     if (this.viewHelperManager.viewHelper.render) {
@@ -231,7 +280,18 @@ class Load3d {
     const containerWidth = this.renderer.domElement.clientWidth
     const containerHeight = this.renderer.domElement.clientHeight
 
-    if (this.isViewerMode) {
+    const widthWidget = this.node.widgets?.find((w) => w.name === 'width')
+    const heightWidget = this.node.widgets?.find((w) => w.name === 'height')
+    const shouldMaintainAspectRatio =
+      (widthWidget && heightWidget) || this.isViewerMode
+
+    if (shouldMaintainAspectRatio) {
+      if (widthWidget && heightWidget) {
+        this.targetWidth = widthWidget.value as number
+        this.targetHeight = heightWidget.value as number
+        this.targetAspectRatio = this.targetWidth / this.targetHeight
+      }
+
       const containerAspectRatio = containerWidth / containerHeight
 
       let renderWidth: number
@@ -261,6 +321,7 @@ class Load3d {
       const renderAspectRatio = renderWidth / renderHeight
       this.cameraManager.updateAspectRatio(renderAspectRatio)
     } else {
+      // Preview3D: fill the entire container
       this.renderer.setViewport(0, 0, containerWidth, containerHeight)
       this.renderer.setScissor(0, 0, containerWidth, containerHeight)
       this.renderer.setScissorTest(true)
@@ -303,15 +364,12 @@ class Load3d {
       }
 
       const delta = this.clock.getDelta()
+      this.animationManager.update(delta)
       this.viewHelperManager.update(delta)
       this.controlsManager.update()
 
       this.renderMainScene()
 
-      if (this.previewManager.showPreview) {
-        this.previewManager.renderPreview()
-      }
-
       this.resetViewport()
 
       if (this.viewHelperManager.viewHelper.render) {
@@ -370,7 +428,7 @@ class Load3d {
           await ModelExporter.exportOBJ(model, filename, originalURL)
           break
         case 'stl':
-          await ModelExporter.exportSTL(model, filename), originalURL
+          ;(await ModelExporter.exportSTL(model, filename), originalURL)
           break
         default:
           throw new Error(`Unsupported export format: ${format}`)
@@ -388,44 +446,54 @@ class Load3d {
   setBackgroundColor(color: string): void {
     this.sceneManager.setBackgroundColor(color)
 
-    this.previewManager.setPreviewBackgroundColor(color)
-
     this.forceRender()
   }
 
   async setBackgroundImage(uploadPath: string): Promise<void> {
     await this.sceneManager.setBackgroundImage(uploadPath)
 
-    this.previewManager.updateBackgroundTexture(
-      this.sceneManager.backgroundTexture
-    )
-
     if (
-      this.isViewerMode &&
       this.sceneManager.backgroundTexture &&
       this.sceneManager.backgroundMesh
     ) {
       const containerWidth = this.renderer.domElement.clientWidth
       const containerHeight = this.renderer.domElement.clientHeight
-      const containerAspectRatio = containerWidth / containerHeight
 
-      let renderWidth: number
-      let renderHeight: number
+      // Calculate the actual render area based on target aspect ratio
+      const widthWidget = this.node.widgets?.find((w) => w.name === 'width')
+      const heightWidget = this.node.widgets?.find((w) => w.name === 'height')
+      const shouldMaintainAspectRatio =
+        (widthWidget && heightWidget) || this.isViewerMode
 
-      if (containerAspectRatio > this.targetAspectRatio) {
-        renderHeight = containerHeight
-        renderWidth = renderHeight * this.targetAspectRatio
+      if (shouldMaintainAspectRatio) {
+        const containerAspectRatio = containerWidth / containerHeight
+
+        let renderWidth: number
+        let renderHeight: number
+
+        if (containerAspectRatio > this.targetAspectRatio) {
+          renderHeight = containerHeight
+          renderWidth = renderHeight * this.targetAspectRatio
+        } else {
+          renderWidth = containerWidth
+          renderHeight = renderWidth / this.targetAspectRatio
+        }
+
+        this.sceneManager.updateBackgroundSize(
+          this.sceneManager.backgroundTexture,
+          this.sceneManager.backgroundMesh,
+          renderWidth,
+          renderHeight
+        )
       } else {
-        renderWidth = containerWidth
-        renderHeight = renderWidth / this.targetAspectRatio
+        // For Preview3D mode without aspect ratio constraints
+        this.sceneManager.updateBackgroundSize(
+          this.sceneManager.backgroundTexture,
+          this.sceneManager.backgroundMesh,
+          containerWidth,
+          containerHeight
+        )
       }
-
-      this.sceneManager.updateBackgroundSize(
-        this.sceneManager.backgroundTexture,
-        this.sceneManager.backgroundMesh,
-        renderWidth,
-        renderHeight
-      )
     }
 
     this.forceRender()
@@ -434,10 +502,6 @@ class Load3d {
   removeBackgroundImage(): void {
     this.sceneManager.removeBackgroundImage()
 
-    this.previewManager.setPreviewBackgroundColor(
-      this.sceneManager.currentBackgroundColor
-    )
-
     this.forceRender()
   }
 
@@ -479,28 +543,49 @@ class Load3d {
     this.forceRender()
   }
 
-  setEdgeThreshold(threshold: number): void {
-    this.modelManager.setEdgeThreshold(threshold)
-    this.forceRender()
-  }
-
   setMaterialMode(mode: MaterialMode): void {
     this.modelManager.setMaterialMode(mode)
     this.forceRender()
   }
 
   async loadModel(url: string, originalFileName?: string): Promise<void> {
+    if (this.loadingPromise) {
+      try {
+        await this.loadingPromise
+      } catch (e) {}
+    }
+
+    this.loadingPromise = this._loadModelInternal(url, originalFileName)
+    return this.loadingPromise
+  }
+
+  private async _loadModelInternal(
+    url: string,
+    originalFileName?: string
+  ): Promise<void> {
     this.cameraManager.reset()
     this.controlsManager.reset()
-    this.modelManager.reset()
+    this.modelManager.clearModel()
+    this.animationManager.dispose()
 
     await this.loaderManager.loadModel(url, originalFileName)
 
+    // Auto-detect and setup animations if present
+    if (this.modelManager.currentModel) {
+      this.animationManager.setupModelAnimations(
+        this.modelManager.currentModel,
+        this.modelManager.originalModel
+      )
+    }
+
     this.handleResize()
     this.forceRender()
+
+    this.loadingPromise = null
   }
 
   clearModel(): void {
+    this.animationManager.dispose()
     this.modelManager.clearModel()
     this.forceRender()
   }
@@ -515,16 +600,10 @@ class Load3d {
     this.forceRender()
   }
 
-  togglePreview(showPreview: boolean): void {
-    this.previewManager.togglePreview(showPreview)
-    this.forceRender()
-  }
-
   setTargetSize(width: number, height: number): void {
     this.targetWidth = width
     this.targetHeight = height
     this.targetAspectRatio = width / height
-    this.previewManager.setTargetSize(width, height)
     this.forceRender()
   }
 
@@ -542,7 +621,7 @@ class Load3d {
   }
 
   handleResize(): void {
-    const parentElement = this.renderer?.domElement?.parentElement
+    const parentElement = this.renderer?.domElement
 
     if (!parentElement) {
       console.warn('Parent element not found')
@@ -552,7 +631,20 @@ class Load3d {
     const containerWidth = parentElement.clientWidth
     const containerHeight = parentElement.clientHeight
 
-    if (this.isViewerMode) {
+    // Check if we have width/height widgets (Load3D nodes) or if it's viewer mode
+    const widthWidget = this.node.widgets?.find((w) => w.name === 'width')
+    const heightWidget = this.node.widgets?.find((w) => w.name === 'height')
+    const shouldMaintainAspectRatio =
+      (widthWidget && heightWidget) || this.isViewerMode
+
+    if (shouldMaintainAspectRatio) {
+      // Load3D or viewer mode: maintain aspect ratio
+      if (widthWidget && heightWidget) {
+        this.targetWidth = widthWidget.value as number
+        this.targetHeight = heightWidget.value as number
+        this.targetAspectRatio = this.targetWidth / this.targetHeight
+      }
+
       const containerAspectRatio = containerWidth / containerHeight
       let renderWidth: number
       let renderHeight: number
@@ -565,16 +657,16 @@ class Load3d {
         renderHeight = renderWidth / this.targetAspectRatio
       }
 
+      this.renderer.setSize(containerWidth, containerHeight)
       this.cameraManager.handleResize(renderWidth, renderHeight)
       this.sceneManager.handleResize(renderWidth, renderHeight)
     } else {
+      // Preview3D: use container dimensions directly
+      this.renderer.setSize(containerWidth, containerHeight)
       this.cameraManager.handleResize(containerWidth, containerHeight)
       this.sceneManager.handleResize(containerWidth, containerHeight)
     }
 
-    this.renderer.setSize(containerWidth, containerHeight)
-
-    this.previewManager.handleResize()
     this.forceRender()
   }
 
@@ -589,7 +681,10 @@ class Load3d {
   public async startRecording(): Promise<void> {
     this.viewHelperManager.visibleViewHelper(false)
 
-    return this.recordingManager.startRecording()
+    return this.recordingManager.startRecording(
+      this.targetWidth,
+      this.targetHeight
+    )
   }
 
   public stopRecording(): void {
@@ -620,7 +715,29 @@ class Load3d {
     this.recordingManager.clearRecording()
   }
 
+  // Animation methods
+  public setAnimationSpeed(speed: number): void {
+    this.animationManager.setAnimationSpeed(speed)
+  }
+
+  public updateSelectedAnimation(index: number): void {
+    this.animationManager.updateSelectedAnimation(index)
+  }
+
+  public toggleAnimation(play?: boolean): void {
+    this.animationManager.toggleAnimation(play)
+  }
+
+  public hasAnimations(): boolean {
+    return this.animationManager.animationClips.length > 0
+  }
+
   public remove(): void {
+    if (this.contextMenuAbortController) {
+      this.contextMenuAbortController.abort()
+      this.contextMenuAbortController = null
+    }
+
     this.renderer.forceContextLoss()
     const canvas = this.renderer.domElement
     const event = new Event('webglcontextlost', {
@@ -638,10 +755,10 @@ class Load3d {
     this.controlsManager.dispose()
     this.lightingManager.dispose()
     this.viewHelperManager.dispose()
-    this.previewManager.dispose()
     this.loaderManager.dispose()
     this.modelManager.dispose()
     this.recordingManager.dispose()
+    this.animationManager.dispose()
 
     this.renderer.dispose()
     this.renderer.domElement.remove()
diff --git a/src/extensions/core/load3d/Load3dAnimation.ts b/src/extensions/core/load3d/Load3dAnimation.ts
deleted file mode 100644
index 82ff2c099..000000000
--- a/src/extensions/core/load3d/Load3dAnimation.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as THREE from 'three'
-
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-
-import { AnimationManager } from './AnimationManager'
-import Load3d from './Load3d'
-import { type Load3DOptions } from './interfaces'
-
-class Load3dAnimation extends Load3d {
-  private animationManager: AnimationManager
-
-  constructor(
-    container: Element | HTMLElement,
-    options: Load3DOptions = {
-      node: {} as LGraphNode
-    }
-  ) {
-    super(container, options)
-
-    this.animationManager = new AnimationManager(
-      this.eventManager,
-      this.getCurrentModel.bind(this)
-    )
-
-    this.animationManager.init()
-
-    this.overrideAnimationLoop()
-  }
-
-  private overrideAnimationLoop(): void {
-    if (this.animationFrameId !== null) {
-      cancelAnimationFrame(this.animationFrameId)
-    }
-
-    const animate = () => {
-      this.animationFrameId = requestAnimationFrame(animate)
-
-      if (!this.isActive()) {
-        return
-      }
-
-      const delta = this.clock.getDelta()
-
-      this.animationManager.update(delta)
-
-      this.viewHelperManager.update(delta)
-
-      this.controlsManager.update()
-
-      this.renderMainScene()
-
-      if (this.previewManager.showPreview) {
-        this.previewManager.renderPreview()
-      }
-
-      this.resetViewport()
-
-      if (this.viewHelperManager.viewHelper.render) {
-        this.viewHelperManager.viewHelper.render(this.renderer)
-      }
-    }
-
-    animate()
-  }
-
-  override async loadModel(
-    url: string,
-    originalFileName?: string
-  ): Promise<void> {
-    await super.loadModel(url, originalFileName)
-
-    if (this.modelManager.currentModel) {
-      this.animationManager.setupModelAnimations(
-        this.modelManager.currentModel,
-        this.modelManager.originalModel
-      )
-    }
-  }
-
-  override clearModel(): void {
-    this.animationManager.dispose()
-    super.clearModel()
-  }
-
-  updateAnimationList(): void {
-    this.animationManager.updateAnimationList()
-  }
-
-  setAnimationSpeed(speed: number): void {
-    this.animationManager.setAnimationSpeed(speed)
-  }
-
-  updateSelectedAnimation(index: number): void {
-    this.animationManager.updateSelectedAnimation(index)
-  }
-
-  toggleAnimation(play?: boolean): void {
-    this.animationManager.toggleAnimation(play)
-  }
-
-  get isAnimationPlaying(): boolean {
-    return this.animationManager.isAnimationPlaying
-  }
-
-  get animationSpeed(): number {
-    return this.animationManager.animationSpeed
-  }
-
-  get selectedAnimationIndex(): number {
-    return this.animationManager.selectedAnimationIndex
-  }
-
-  get animationClips(): THREE.AnimationClip[] {
-    return this.animationManager.animationClips
-  }
-
-  get animationActions(): THREE.AnimationAction[] {
-    return this.animationManager.animationActions
-  }
-
-  get currentAnimation(): THREE.AnimationMixer | null {
-    return this.animationManager.currentAnimation
-  }
-
-  override remove(): void {
-    this.animationManager.dispose()
-    super.remove()
-  }
-}
-
-export default Load3dAnimation
diff --git a/src/extensions/core/load3d/ModelExporter.ts b/src/extensions/core/load3d/ModelExporter.ts
index bf677ba44..f3ff3a443 100644
--- a/src/extensions/core/load3d/ModelExporter.ts
+++ b/src/extensions/core/load3d/ModelExporter.ts
@@ -3,6 +3,7 @@ import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter'
 import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter'
 
+import { downloadBlob } from '@/base/common/downloadUtil'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
@@ -38,13 +39,7 @@ export class ModelExporter {
     try {
       const response = await fetch(url)
       const blob = await response.blob()
-
-      const link = document.createElement('a')
-      link.href = URL.createObjectURL(blob)
-      link.download = desiredFilename
-      link.click()
-
-      URL.revokeObjectURL(link.href)
+      downloadBlob(desiredFilename, blob)
     } catch (error) {
       console.error('Error downloading from URL:', error)
       useToastStore().addAlert(t('toastMessages.failedToDownloadFile'))
@@ -152,19 +147,11 @@ export class ModelExporter {
 
   private static saveArrayBuffer(buffer: ArrayBuffer, filename: string): void {
     const blob = new Blob([buffer], { type: 'application/octet-stream' })
-    const link = document.createElement('a')
-    link.href = URL.createObjectURL(blob)
-    link.download = filename
-    link.click()
-    URL.revokeObjectURL(link.href)
+    downloadBlob(filename, blob)
   }
 
   private static saveString(text: string, filename: string): void {
     const blob = new Blob([text], { type: 'text/plain' })
-    const link = document.createElement('a')
-    link.href = URL.createObjectURL(blob)
-    link.download = filename
-    link.click()
-    URL.revokeObjectURL(link.href)
+    downloadBlob(filename, blob)
   }
 }
diff --git a/src/extensions/core/load3d/PreviewManager.ts b/src/extensions/core/load3d/PreviewManager.ts
deleted file mode 100644
index 36cd2b325..000000000
--- a/src/extensions/core/load3d/PreviewManager.ts
+++ /dev/null
@@ -1,416 +0,0 @@
-import * as THREE from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-import {
-  type EventManagerInterface,
-  type PreviewManagerInterface
-} from './interfaces'
-
-export class PreviewManager implements PreviewManagerInterface {
-  previewCamera: THREE.Camera
-  previewContainer: HTMLDivElement = null!
-  showPreview: boolean = true
-  previewWidth: number = 120
-
-  private targetWidth: number = 1024
-  private targetHeight: number = 1024
-  private scene: THREE.Scene
-  private getActiveCamera: () => THREE.Camera
-  private getControls: () => OrbitControls
-  private eventManager: EventManagerInterface
-
-  private getRenderer: () => THREE.WebGLRenderer
-
-  private previewBackgroundScene: THREE.Scene
-  private previewBackgroundCamera: THREE.OrthographicCamera
-  private previewBackgroundMesh: THREE.Mesh | null = null
-  private previewBackgroundTexture: THREE.Texture | null = null
-
-  private previewBackgroundColorMaterial: THREE.MeshBasicMaterial | null = null
-  private currentBackgroundColor: THREE.Color = new THREE.Color(0x282828)
-
-  constructor(
-    scene: THREE.Scene,
-    getActiveCamera: () => THREE.Camera,
-    getControls: () => OrbitControls,
-    getRenderer: () => THREE.WebGLRenderer,
-    eventManager: EventManagerInterface,
-    backgroundScene: THREE.Scene,
-    backgroundCamera: THREE.OrthographicCamera
-  ) {
-    this.scene = scene
-    this.getActiveCamera = getActiveCamera
-    this.getControls = getControls
-    this.getRenderer = getRenderer
-    this.eventManager = eventManager
-
-    this.previewCamera = this.getActiveCamera().clone()
-
-    this.previewBackgroundScene = backgroundScene.clone()
-    this.previewBackgroundCamera = backgroundCamera.clone()
-
-    this.initPreviewBackgroundScene()
-  }
-
-  private initPreviewBackgroundScene(): void {
-    const planeGeometry = new THREE.PlaneGeometry(2, 2)
-
-    this.previewBackgroundColorMaterial = new THREE.MeshBasicMaterial({
-      color: this.currentBackgroundColor.clone(),
-      transparent: false,
-      depthWrite: false,
-      depthTest: false,
-      side: THREE.DoubleSide
-    })
-
-    this.previewBackgroundMesh = new THREE.Mesh(
-      planeGeometry,
-      this.previewBackgroundColorMaterial
-    )
-    this.previewBackgroundMesh.position.set(0, 0, 0)
-    this.previewBackgroundScene.add(this.previewBackgroundMesh)
-  }
-
-  init(): void {}
-
-  dispose(): void {
-    if (this.previewBackgroundTexture) {
-      this.previewBackgroundTexture.dispose()
-    }
-
-    if (this.previewBackgroundColorMaterial) {
-      this.previewBackgroundColorMaterial.dispose()
-    }
-
-    if (this.previewBackgroundMesh) {
-      this.previewBackgroundMesh.geometry.dispose()
-      if (this.previewBackgroundMesh.material instanceof THREE.Material) {
-        this.previewBackgroundMesh.material.dispose()
-      }
-    }
-  }
-
-  createCapturePreview(container: Element | HTMLElement): void {
-    this.previewContainer = document.createElement('div')
-    this.previewContainer.style.cssText = `
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.2);
-      display: block;
-      transition: border-color 0.1s ease;
-    `
-
-    const MIN_PREVIEW_WIDTH = 120
-    const MAX_PREVIEW_WIDTH = 240
-
-    this.previewContainer.addEventListener('wheel', (event) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      const delta = event.deltaY
-      const oldWidth = this.previewWidth
-
-      if (delta > 0) {
-        this.previewWidth = Math.max(MIN_PREVIEW_WIDTH, this.previewWidth - 10)
-      } else {
-        this.previewWidth = Math.min(MAX_PREVIEW_WIDTH, this.previewWidth + 10)
-      }
-
-      if (
-        oldWidth !== this.previewWidth &&
-        (this.previewWidth === MIN_PREVIEW_WIDTH ||
-          this.previewWidth === MAX_PREVIEW_WIDTH)
-      ) {
-        this.flashPreviewBorder()
-      }
-
-      this.updatePreviewSize()
-    })
-
-    this.previewContainer.style.display = this.showPreview ? 'block' : 'none'
-
-    container.appendChild(this.previewContainer)
-
-    this.updatePreviewSize()
-  }
-
-  flashPreviewBorder(): void {
-    const originalBorder = this.previewContainer.style.border
-    const originalBoxShadow = this.previewContainer.style.boxShadow
-
-    this.previewContainer.style.border = '2px solid rgba(255, 255, 255, 0.8)'
-    this.previewContainer.style.boxShadow = '0 0 8px rgba(255, 255, 255, 0.5)'
-
-    setTimeout(() => {
-      this.previewContainer.style.border = originalBorder
-      this.previewContainer.style.boxShadow = originalBoxShadow
-    }, 100)
-  }
-
-  updatePreviewSize(): void {
-    if (!this.previewContainer) return
-
-    const previewHeight =
-      (this.previewWidth * this.targetHeight) / this.targetWidth
-
-    this.previewContainer.style.width = `${this.previewWidth}px`
-    this.previewContainer.style.height = `${previewHeight}px`
-  }
-
-  getPreviewViewport(): {
-    left: number
-    bottom: number
-    width: number
-    height: number
-  } | null {
-    if (!this.showPreview || !this.previewContainer) {
-      return null
-    }
-
-    const renderer = this.getRenderer()
-    const canvas = renderer.domElement
-
-    const containerRect = this.previewContainer.getBoundingClientRect()
-    const canvasRect = canvas.getBoundingClientRect()
-
-    if (
-      containerRect.bottom < canvasRect.top ||
-      containerRect.top > canvasRect.bottom ||
-      containerRect.right < canvasRect.left ||
-      containerRect.left > canvasRect.right
-    ) {
-      return null
-    }
-
-    const width = parseFloat(this.previewContainer.style.width)
-    const height = parseFloat(this.previewContainer.style.height)
-
-    const left = this.getRenderer().domElement.clientWidth - width
-
-    const bottom = 0
-
-    return { left, bottom, width, height }
-  }
-
-  renderPreview(): void {
-    const viewport = this.getPreviewViewport()
-    if (!viewport) return
-
-    const renderer = this.getRenderer()
-
-    const originalClearColor = renderer.getClearColor(new THREE.Color())
-    const originalClearAlpha = renderer.getClearAlpha()
-
-    if (
-      !this.previewCamera ||
-      (this.getActiveCamera() instanceof THREE.PerspectiveCamera &&
-        !(this.previewCamera instanceof THREE.PerspectiveCamera)) ||
-      (this.getActiveCamera() instanceof THREE.OrthographicCamera &&
-        !(this.previewCamera instanceof THREE.OrthographicCamera))
-    ) {
-      this.previewCamera = this.getActiveCamera().clone()
-    }
-
-    this.previewCamera.position.copy(this.getActiveCamera().position)
-    this.previewCamera.rotation.copy(this.getActiveCamera().rotation)
-
-    const aspect = this.targetWidth / this.targetHeight
-
-    if (this.getActiveCamera() instanceof THREE.OrthographicCamera) {
-      const activeOrtho = this.getActiveCamera() as THREE.OrthographicCamera
-      const previewOrtho = this.previewCamera as THREE.OrthographicCamera
-
-      const frustumHeight =
-        (activeOrtho.top - activeOrtho.bottom) / activeOrtho.zoom
-
-      const frustumWidth = frustumHeight * aspect
-
-      previewOrtho.top = frustumHeight / 2
-      previewOrtho.left = -frustumWidth / 2
-      previewOrtho.right = frustumWidth / 2
-      previewOrtho.bottom = -frustumHeight / 2
-      previewOrtho.zoom = 1
-
-      previewOrtho.updateProjectionMatrix()
-    } else {
-      const activePerspective =
-        this.getActiveCamera() as THREE.PerspectiveCamera
-      const previewPerspective = this.previewCamera as THREE.PerspectiveCamera
-
-      previewPerspective.fov = activePerspective.fov
-      previewPerspective.zoom = activePerspective.zoom
-      previewPerspective.aspect = aspect
-
-      previewPerspective.updateProjectionMatrix()
-    }
-
-    this.previewCamera.lookAt(this.getControls().target)
-
-    renderer.setViewport(
-      viewport.left,
-      viewport.bottom,
-      viewport.width,
-      viewport.height
-    )
-    renderer.setScissor(
-      viewport.left,
-      viewport.bottom,
-      viewport.width,
-      viewport.height
-    )
-
-    renderer.setClearColor(0x000000, 0)
-    renderer.clear()
-
-    this.renderPreviewBackground(renderer)
-
-    renderer.render(this.scene, this.previewCamera)
-
-    renderer.setClearColor(originalClearColor, originalClearAlpha)
-  }
-
-  private renderPreviewBackground(renderer: THREE.WebGLRenderer): void {
-    if (this.previewBackgroundMesh) {
-      const currentToneMapping = renderer.toneMapping
-      const currentExposure = renderer.toneMappingExposure
-
-      renderer.toneMapping = THREE.NoToneMapping
-      renderer.render(this.previewBackgroundScene, this.previewBackgroundCamera)
-
-      renderer.toneMapping = currentToneMapping
-      renderer.toneMappingExposure = currentExposure
-    }
-  }
-
-  setPreviewBackgroundColor(color: string | number | THREE.Color): void {
-    this.currentBackgroundColor.set(color)
-
-    if (!this.previewBackgroundMesh || !this.previewBackgroundColorMaterial) {
-      this.initPreviewBackgroundScene()
-    }
-
-    this.previewBackgroundColorMaterial!.color.copy(this.currentBackgroundColor)
-
-    if (this.previewBackgroundMesh) {
-      this.previewBackgroundMesh.material = this.previewBackgroundColorMaterial!
-    }
-
-    if (this.previewBackgroundTexture) {
-      this.previewBackgroundTexture.dispose()
-      this.previewBackgroundTexture = null
-    }
-  }
-
-  togglePreview(showPreview: boolean): void {
-    this.showPreview = showPreview
-    if (this.previewContainer) {
-      this.previewContainer.style.display = this.showPreview ? 'block' : 'none'
-    }
-
-    this.eventManager.emitEvent('showPreviewChange', showPreview)
-  }
-
-  setTargetSize(width: number, height: number): void {
-    const oldAspect = this.targetWidth / this.targetHeight
-
-    this.targetWidth = width
-    this.targetHeight = height
-
-    this.updatePreviewSize()
-
-    const newAspect = width / height
-    if (Math.abs(oldAspect - newAspect) > 0.001) {
-      this.updateBackgroundSize(
-        this.previewBackgroundTexture,
-        this.previewBackgroundMesh,
-        width,
-        height
-      )
-    }
-
-    if (this.previewCamera) {
-      if (this.previewCamera instanceof THREE.PerspectiveCamera) {
-        this.previewCamera.aspect = width / height
-        this.previewCamera.updateProjectionMatrix()
-      } else if (this.previewCamera instanceof THREE.OrthographicCamera) {
-        const frustumSize = 10
-        const aspect = width / height
-        this.previewCamera.left = (-frustumSize * aspect) / 2
-        this.previewCamera.right = (frustumSize * aspect) / 2
-        this.previewCamera.updateProjectionMatrix()
-      }
-    }
-  }
-
-  handleResize(): void {
-    this.updatePreviewSize()
-  }
-
-  updateBackgroundTexture(texture: THREE.Texture | null): void {
-    if (texture) {
-      if (this.previewBackgroundTexture) {
-        this.previewBackgroundTexture.dispose()
-      }
-
-      this.previewBackgroundTexture = texture
-
-      if (this.previewBackgroundMesh) {
-        const imageMaterial = new THREE.MeshBasicMaterial({
-          map: texture,
-          transparent: true,
-          depthWrite: false,
-          depthTest: false,
-          side: THREE.DoubleSide
-        })
-
-        if (
-          this.previewBackgroundMesh.material instanceof THREE.Material &&
-          this.previewBackgroundMesh.material !==
-            this.previewBackgroundColorMaterial
-        ) {
-          this.previewBackgroundMesh.material.dispose()
-        }
-
-        this.previewBackgroundMesh.material = imageMaterial
-        this.previewBackgroundMesh.position.set(0, 0, 0)
-
-        this.updateBackgroundSize(
-          this.previewBackgroundTexture,
-          this.previewBackgroundMesh,
-          this.targetWidth,
-          this.targetHeight
-        )
-      }
-    } else {
-      this.setPreviewBackgroundColor(this.currentBackgroundColor)
-    }
-  }
-
-  private updateBackgroundSize(
-    backgroundTexture: THREE.Texture | null,
-    backgroundMesh: THREE.Mesh | null,
-    targetWidth: number,
-    targetHeight: number
-  ): void {
-    if (!backgroundTexture || !backgroundMesh) return
-
-    const material = backgroundMesh.material as THREE.MeshBasicMaterial
-
-    if (!material.map) return
-
-    const imageAspect =
-      backgroundTexture.image.width / backgroundTexture.image.height
-    const targetAspect = targetWidth / targetHeight
-
-    if (imageAspect > targetAspect) {
-      backgroundMesh.scale.set(imageAspect / targetAspect, 1, 1)
-    } else {
-      backgroundMesh.scale.set(1, targetAspect / imageAspect, 1)
-    }
-
-    material.needsUpdate = true
-  }
-
-  reset(): void {}
-}
diff --git a/src/extensions/core/load3d/RecordingManager.ts b/src/extensions/core/load3d/RecordingManager.ts
index 679fa9c5d..f5416c59d 100644
--- a/src/extensions/core/load3d/RecordingManager.ts
+++ b/src/extensions/core/load3d/RecordingManager.ts
@@ -1,5 +1,7 @@
 import * as THREE from 'three'
 
+import { downloadBlob } from '@/base/common/downloadUtil'
+
 import { type EventManagerInterface } from './interfaces'
 
 export class RecordingManager {
@@ -14,6 +16,8 @@ export class RecordingManager {
   private recordingStartTime: number = 0
   private recordingDuration: number = 0
   private recordingCanvas: HTMLCanvasElement | null = null
+  private recordingContext: CanvasRenderingContext2D | null = null
+  private animationFrameId: number | null = null
 
   constructor(
     scene: THREE.Scene,
@@ -48,13 +52,70 @@ export class RecordingManager {
     this.scene.add(this.recordingIndicator)
   }
 
-  public async startRecording(): Promise<void> {
+  public async startRecording(
+    targetWidth?: number,
+    targetHeight?: number
+  ): Promise<void> {
     if (this.isRecording) {
       return
     }
 
     try {
-      this.recordingCanvas = this.renderer.domElement
+      const sourceCanvas = this.renderer.domElement
+      const sourceWidth = sourceCanvas.width
+      const sourceHeight = sourceCanvas.height
+
+      const recordWidth = targetWidth || sourceWidth
+      const recordHeight = targetHeight || sourceHeight
+
+      this.recordingCanvas = document.createElement('canvas')
+      this.recordingCanvas.width = recordWidth
+      this.recordingCanvas.height = recordHeight
+      this.recordingContext = this.recordingCanvas.getContext('2d', {
+        alpha: false
+      })
+
+      if (!this.recordingContext) {
+        throw new Error('Failed to get 2D context for recording canvas')
+      }
+
+      const sourceAspectRatio = sourceWidth / sourceHeight
+      const targetAspectRatio = recordWidth / recordHeight
+
+      let sx = 0,
+        sy = 0,
+        sw = sourceWidth,
+        sh = sourceHeight
+
+      if (Math.abs(sourceAspectRatio - targetAspectRatio) > 0.01) {
+        if (sourceAspectRatio > targetAspectRatio) {
+          sw = sourceHeight * targetAspectRatio
+          sx = (sourceWidth - sw) / 2
+        } else {
+          sh = sourceWidth / targetAspectRatio
+          sy = (sourceHeight - sh) / 2
+        }
+      }
+
+      const captureFrame = () => {
+        if (!this.isRecording || !this.recordingContext) {
+          return
+        }
+
+        this.recordingContext.drawImage(
+          sourceCanvas,
+          sx,
+          sy,
+          sw,
+          sh,
+          0,
+          0,
+          recordWidth,
+          recordHeight
+        )
+
+        this.animationFrameId = requestAnimationFrame(captureFrame)
+      }
 
       this.recordingStream = this.recordingCanvas.captureStream(30)
 
@@ -80,6 +141,11 @@ export class RecordingManager {
         this.isRecording = false
         this.recordingStream = null
 
+        if (this.animationFrameId !== null) {
+          cancelAnimationFrame(this.animationFrameId)
+          this.animationFrameId = null
+        }
+
         this.eventManager.emitEvent('recordingStopped', {
           duration: this.recordingDuration,
           hasRecording: this.recordedChunks.length > 0
@@ -94,6 +160,8 @@ export class RecordingManager {
       this.isRecording = true
       this.recordingStartTime = Date.now()
 
+      captureFrame()
+
       this.eventManager.emitEvent('recordingStarted', null)
     } catch (error) {
       console.error('Error starting recording:', error)
@@ -108,10 +176,18 @@ export class RecordingManager {
 
     this.recordingDuration = (Date.now() - this.recordingStartTime) / 1000
 
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId)
+      this.animationFrameId = null
+    }
+
     this.mediaRecorder.stop()
     if (this.recordingStream) {
       this.recordingStream.getTracks().forEach((track) => track.stop())
     }
+
+    this.recordingCanvas = null
+    this.recordingContext = null
   }
 
   public getIsRecording(): boolean {
@@ -149,17 +225,7 @@ export class RecordingManager {
 
     try {
       const blob = new Blob(this.recordedChunks, { type: 'video/webm' })
-
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      document.body.appendChild(a)
-      a.style.display = 'none'
-      a.href = url
-      a.download = filename
-      a.click()
-
-      window.URL.revokeObjectURL(url)
-      document.body.removeChild(a)
+      downloadBlob(filename, blob)
 
       this.eventManager.emitEvent('recordingExported', null)
     } catch (error) {
@@ -175,9 +241,17 @@ export class RecordingManager {
   }
 
   public dispose(): void {
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId)
+      this.animationFrameId = null
+    }
+
     this.stopRecording()
     this.clearRecording()
 
+    this.recordingCanvas = null
+    this.recordingContext = null
+
     if (this.recordingIndicator) {
       this.scene.remove(this.recordingIndicator)
       ;(this.recordingIndicator.material as THREE.SpriteMaterial).map?.dispose()
diff --git a/src/extensions/core/load3d/SceneManager.ts b/src/extensions/core/load3d/SceneManager.ts
index 722e4f439..2a05ed181 100644
--- a/src/extensions/core/load3d/SceneManager.ts
+++ b/src/extensions/core/load3d/SceneManager.ts
@@ -134,9 +134,20 @@ export class SceneManager implements SceneManagerInterface {
 
     this.eventManager.emitEvent('backgroundImageLoadingStart', null)
 
-    let imageUrl = Load3dUtils.getResourceURL(
-      ...Load3dUtils.splitFilePath(uploadPath)
-    )
+    let type = 'input'
+    let pathParts = Load3dUtils.splitFilePath(uploadPath)
+    let subfolder = pathParts[0]
+    let filename = pathParts[1]
+
+    if (subfolder === 'temp') {
+      type = 'temp'
+      pathParts = ['', filename]
+    } else if (subfolder === 'output') {
+      type = 'output'
+      pathParts = ['', filename]
+    }
+
+    let imageUrl = Load3dUtils.getResourceURL(...pathParts, type)
 
     if (!imageUrl.startsWith('/api')) {
       imageUrl = '/api' + imageUrl
@@ -184,8 +195,8 @@ export class SceneManager implements SceneManagerInterface {
       this.updateBackgroundSize(
         this.backgroundTexture,
         this.backgroundMesh,
-        this.renderer.domElement.width,
-        this.renderer.domElement.height
+        this.renderer.domElement.clientWidth,
+        this.renderer.domElement.clientHeight
       )
 
       this.eventManager.emitEvent('backgroundImageChange', uploadPath)
@@ -268,7 +279,7 @@ export class SceneManager implements SceneManagerInterface {
   captureScene(
     width: number,
     height: number
-  ): Promise<{ scene: string; mask: string; normal: string; lineart: string }> {
+  ): Promise<{ scene: string; mask: string; normal: string }> {
     return new Promise(async (resolve, reject) => {
       try {
         const originalWidth = this.renderer.domElement.width
@@ -359,60 +370,9 @@ export class SceneManager implements SceneManagerInterface {
           }
         })
 
-        let lineartModel: THREE.Group | null = null
-
-        const originalSceneVisible: Map<THREE.Object3D, boolean> = new Map()
-
-        this.scene.traverse((child) => {
-          if (child instanceof THREE.Group && child.name === 'lineartModel') {
-            lineartModel = child as THREE.Group
-          }
-
-          if (
-            child instanceof THREE.Mesh &&
-            !(child.parent?.name === 'lineartModel')
-          ) {
-            originalSceneVisible.set(child, child.visible)
-
-            child.visible = false
-          }
-        })
-
         this.renderer.setClearColor(0xffffff, 1)
         this.renderer.clear()
 
-        if (lineartModel !== null) {
-          lineartModel = lineartModel as THREE.Group
-
-          const originalLineartVisibleMap: Map<THREE.Object3D, boolean> =
-            new Map()
-
-          lineartModel.traverse((child: THREE.Object3D) => {
-            if (child instanceof THREE.Mesh) {
-              originalLineartVisibleMap.set(child, child.visible)
-
-              child.visible = true
-            }
-          })
-
-          const originalLineartVisible = lineartModel.visible
-          lineartModel.visible = true
-
-          this.renderer.render(this.scene, this.getActiveCamera())
-
-          lineartModel.visible = originalLineartVisible
-
-          originalLineartVisibleMap.forEach((visible, object) => {
-            object.visible = visible
-          })
-        }
-
-        const lineartData = this.renderer.domElement.toDataURL('image/png')
-
-        originalSceneVisible.forEach((visible, object) => {
-          object.visible = visible
-        })
-
         this.gridHelper.visible = gridVisible
 
         this.renderer.setClearColor(originalClearColor, originalClearAlpha)
@@ -424,8 +384,7 @@ export class SceneManager implements SceneManagerInterface {
         resolve({
           scene: sceneData,
           mask: maskData,
-          normal: normalData,
-          lineart: lineartData
+          normal: normalData
         })
       } catch (error) {
         reject(error)
diff --git a/src/extensions/core/load3d/SceneModelManager.ts b/src/extensions/core/load3d/SceneModelManager.ts
index 94f597bf2..aef82dcd9 100644
--- a/src/extensions/core/load3d/SceneModelManager.ts
+++ b/src/extensions/core/load3d/SceneModelManager.ts
@@ -1,18 +1,8 @@
 import * as THREE from 'three'
-import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
-import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2'
-import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry'
 import { type GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils'
 
-import { ColoredShadowMaterial } from './conditional-lines/ColoredShadowMaterial'
-import { ConditionalEdgesGeometry } from './conditional-lines/ConditionalEdgesGeometry'
-import { ConditionalEdgesShader } from './conditional-lines/ConditionalEdgesShader.js'
-import { ConditionalLineMaterial } from './conditional-lines/Lines2/ConditionalLineMaterial'
-import { ConditionalLineSegmentsGeometry } from './conditional-lines/Lines2/ConditionalLineSegmentsGeometry'
 import {
   type EventManagerInterface,
-  type Load3DOptions,
   type MaterialMode,
   type ModelManagerInterface,
   type UpDirection
@@ -45,25 +35,13 @@ export class SceneModelManager implements ModelManagerInterface {
   private eventManager: EventManagerInterface
   private activeCamera: THREE.Camera
   private setupCamera: (size: THREE.Vector3) => void
-  private lineartModel: THREE.Group
-  private createLineartModel: boolean = false
-
-  LIGHT_MODEL = 0xffffff
-  LIGHT_LINES = 0x455a64
-
-  conditionalModel: THREE.Object3D | null = null
-  edgesModel: THREE.Object3D | null = null
-  backgroundModel: THREE.Object3D | null = null
-  shadowModel: THREE.Object3D | null = null
-  depthModel: THREE.Object3D | null = null
 
   constructor(
     scene: THREE.Scene,
     renderer: THREE.WebGLRenderer,
     eventManager: EventManagerInterface,
     getActiveCamera: () => THREE.Camera,
-    setupCamera: (size: THREE.Vector3) => void,
-    options: Load3DOptions
+    setupCamera: (size: THREE.Vector3) => void
   ) {
     this.scene = scene
     this.renderer = renderer
@@ -72,14 +50,6 @@ export class SceneModelManager implements ModelManagerInterface {
     this.setupCamera = setupCamera
     this.textureLoader = new THREE.TextureLoader()
 
-    if (
-      options &&
-      !options.inputSpec?.isPreview &&
-      !options.inputSpec?.isAnimation
-    ) {
-      this.createLineartModel = true
-    }
-
     this.normalMaterial = new THREE.MeshNormalMaterial({
       flatShading: false,
       side: THREE.DoubleSide,
@@ -101,10 +71,6 @@ export class SceneModelManager implements ModelManagerInterface {
     })
 
     this.standardMaterial = this.createSTLMaterial()
-
-    this.lineartModel = new THREE.Group()
-
-    this.lineartModel.name = 'lineartModel'
   }
 
   init(): void {}
@@ -120,8 +86,6 @@ export class SceneModelManager implements ModelManagerInterface {
       this.appliedTexture.dispose()
       this.appliedTexture = null
     }
-
-    this.disposeLineartModel()
   }
 
   createSTLMaterial(): THREE.MeshStandardMaterial {
@@ -134,360 +98,6 @@ export class SceneModelManager implements ModelManagerInterface {
     })
   }
 
-  disposeLineartModel(): void {
-    this.disposeEdgesModel()
-    this.disposeShadowModel()
-    this.disposeBackgroundModel()
-    this.disposeDepthModel()
-    this.disposeConditionalModel()
-  }
-
-  disposeEdgesModel(): void {
-    if (this.edgesModel) {
-      if (this.edgesModel.parent) {
-        this.edgesModel.parent.remove(this.edgesModel)
-      }
-
-      this.edgesModel.traverse((child) => {
-        if (child instanceof THREE.Mesh) {
-          if (Array.isArray(child.material)) {
-            child.material.forEach((m) => m.dispose())
-          } else {
-            child.material.dispose()
-          }
-        }
-      })
-    }
-  }
-
-  initEdgesModel() {
-    this.disposeEdgesModel()
-
-    if (!this.currentModel) {
-      return
-    }
-
-    this.edgesModel = this.currentModel.clone()
-    this.lineartModel.add(this.edgesModel)
-
-    const meshes: THREE.Mesh[] = []
-
-    this.edgesModel.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        meshes.push(child)
-      }
-    })
-
-    for (const key in meshes) {
-      const mesh = meshes[key]
-      const parent = mesh.parent
-
-      let lineGeom = new THREE.EdgesGeometry(mesh.geometry, 85)
-
-      const line = new THREE.LineSegments(
-        lineGeom,
-        new THREE.LineBasicMaterial({ color: this.LIGHT_LINES })
-      )
-      line.position.copy(mesh.position)
-      line.scale.copy(mesh.scale)
-      line.rotation.copy(mesh.rotation)
-
-      const thickLineGeom = new LineSegmentsGeometry().fromEdgesGeometry(
-        lineGeom
-      )
-      const thickLines = new LineSegments2(
-        thickLineGeom,
-        new LineMaterial({ color: this.LIGHT_LINES, linewidth: 13 })
-      )
-      thickLines.position.copy(mesh.position)
-      thickLines.scale.copy(mesh.scale)
-      thickLines.rotation.copy(mesh.rotation)
-
-      parent?.remove(mesh)
-      parent?.add(line)
-      parent?.add(thickLines)
-    }
-
-    this.edgesModel.traverse((child) => {
-      if (
-        child instanceof THREE.Mesh &&
-        child.material &&
-        child.material.resolution
-      ) {
-        this.renderer.getSize(child.material.resolution)
-        child.material.resolution.multiplyScalar(window.devicePixelRatio)
-        child.material.linewidth = 1
-      }
-    })
-  }
-
-  setEdgeThreshold(threshold: number): void {
-    if (!this.edgesModel || !this.currentModel) {
-      return
-    }
-
-    const linesToRemove: THREE.Object3D[] = []
-    this.edgesModel.traverse((child) => {
-      if (
-        child instanceof THREE.LineSegments ||
-        child instanceof LineSegments2
-      ) {
-        linesToRemove.push(child)
-      }
-    })
-
-    for (const line of linesToRemove) {
-      if (line.parent) {
-        line.parent.remove(line)
-      }
-    }
-
-    const meshes: THREE.Mesh[] = []
-    this.currentModel.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        meshes.push(child)
-      }
-    })
-
-    for (const mesh of meshes) {
-      const meshClone = mesh.clone()
-
-      let lineGeom = new THREE.EdgesGeometry(meshClone.geometry, threshold)
-
-      const line = new THREE.LineSegments(
-        lineGeom,
-        new THREE.LineBasicMaterial({ color: this.LIGHT_LINES })
-      )
-      line.position.copy(mesh.position)
-      line.scale.copy(mesh.scale)
-      line.rotation.copy(mesh.rotation)
-
-      const thickLineGeom = new LineSegmentsGeometry().fromEdgesGeometry(
-        lineGeom
-      )
-      const thickLines = new LineSegments2(
-        thickLineGeom,
-        new LineMaterial({ color: this.LIGHT_LINES, linewidth: 13 })
-      )
-      thickLines.position.copy(mesh.position)
-      thickLines.scale.copy(mesh.scale)
-      thickLines.rotation.copy(mesh.rotation)
-
-      this.edgesModel.add(line)
-      this.edgesModel.add(thickLines)
-    }
-
-    this.edgesModel.traverse((child) => {
-      if (
-        child instanceof THREE.Mesh &&
-        child.material &&
-        child.material.resolution
-      ) {
-        this.renderer.getSize(child.material.resolution)
-        child.material.resolution.multiplyScalar(window.devicePixelRatio)
-        child.material.linewidth = 1
-      }
-    })
-    this.eventManager.emitEvent('edgeThresholdChange', threshold)
-  }
-
-  disposeBackgroundModel(): void {
-    if (this.backgroundModel) {
-      if (this.backgroundModel.parent) {
-        this.backgroundModel.parent.remove(this.backgroundModel)
-      }
-
-      this.backgroundModel.traverse((child) => {
-        if (child instanceof THREE.Mesh) {
-          child.material.dispose()
-        }
-      })
-    }
-  }
-
-  disposeShadowModel(): void {
-    if (this.shadowModel) {
-      if (this.shadowModel.parent) {
-        this.shadowModel.parent.remove(this.shadowModel)
-      }
-
-      this.shadowModel.traverse((child) => {
-        if (child instanceof THREE.Mesh) {
-          child.material.dispose()
-        }
-      })
-    }
-  }
-
-  disposeDepthModel(): void {
-    if (this.depthModel) {
-      if (this.depthModel.parent) {
-        this.depthModel.parent.remove(this.depthModel)
-      }
-
-      this.depthModel.traverse((child) => {
-        if (child instanceof THREE.Mesh) {
-          child.material.dispose()
-        }
-      })
-    }
-  }
-
-  disposeConditionalModel(): void {
-    if (this.conditionalModel) {
-      if (this.conditionalModel.parent) {
-        this.conditionalModel.parent.remove(this.conditionalModel)
-      }
-
-      this.conditionalModel.traverse((child) => {
-        if (child instanceof THREE.Mesh) {
-          child.material.dispose()
-        }
-      })
-    }
-  }
-
-  initBackgroundModel() {
-    this.disposeBackgroundModel()
-    this.disposeShadowModel()
-    this.disposeDepthModel()
-
-    if (!this.currentModel) {
-      return
-    }
-
-    this.backgroundModel = this.currentModel.clone()
-    this.backgroundModel.visible = true
-    this.backgroundModel.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.material = new THREE.MeshBasicMaterial({
-          color: this.LIGHT_MODEL
-        })
-        child.material.polygonOffset = true
-        child.material.polygonOffsetFactor = 1
-        child.material.polygonOffsetUnits = 1
-        child.renderOrder = 2
-        child.material.transparent = false
-        child.material.opacity = 0.25
-      }
-    })
-
-    this.lineartModel.add(this.backgroundModel)
-
-    this.shadowModel = this.currentModel.clone()
-
-    // TODO this has some error, need to fix later
-    this.shadowModel.visible = false
-
-    this.shadowModel.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.material = new ColoredShadowMaterial({
-          color: this.LIGHT_MODEL,
-          shininess: 1.0
-        })
-        child.material.polygonOffset = true
-        child.material.polygonOffsetFactor = 1
-        child.material.polygonOffsetUnits = 1
-        child.receiveShadow = true
-        child.renderOrder = 2
-      }
-    })
-
-    this.lineartModel.add(this.shadowModel)
-
-    this.depthModel = this.currentModel.clone()
-    this.depthModel.visible = true
-    this.depthModel.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.material = new THREE.MeshBasicMaterial({
-          color: this.LIGHT_MODEL
-        })
-        child.material.polygonOffset = true
-        child.material.polygonOffsetFactor = 1
-        child.material.polygonOffsetUnits = 1
-        child.material.colorWrite = false
-        child.renderOrder = 1
-      }
-    })
-
-    this.lineartModel.add(this.depthModel)
-  }
-
-  initConditionalModel() {
-    this.disposeConditionalModel()
-
-    if (!this.currentModel) {
-      return
-    }
-
-    this.conditionalModel = this.currentModel.clone()
-    this.lineartModel.add(this.conditionalModel)
-    this.conditionalModel.visible = true
-
-    const meshes: THREE.Mesh[] = []
-
-    this.conditionalModel.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        meshes.push(child)
-      }
-    })
-
-    for (const key in meshes) {
-      const mesh = meshes[key]
-      const parent = mesh.parent
-
-      const mergedGeom = mesh.geometry.clone()
-      for (const key in mergedGeom.attributes) {
-        if (key !== 'position') {
-          mergedGeom.deleteAttribute(key)
-        }
-      }
-
-      const lineGeom = new ConditionalEdgesGeometry(mergeVertices(mergedGeom))
-      const material = new THREE.ShaderMaterial(ConditionalEdgesShader)
-      material.uniforms.diffuse.value.set(this.LIGHT_LINES)
-
-      const line = new THREE.LineSegments(lineGeom, material)
-      line.position.copy(mesh.position)
-      line.scale.copy(mesh.scale)
-      line.rotation.copy(mesh.rotation)
-
-      const thickLineGeom =
-        new ConditionalLineSegmentsGeometry().fromConditionalEdgesGeometry(
-          lineGeom
-        )
-
-      const conditionalLineMaterial = new ConditionalLineMaterial({
-        color: this.LIGHT_LINES,
-        linewidth: 2
-      })
-
-      const thickLines = new LineSegments2(
-        thickLineGeom,
-        conditionalLineMaterial
-      )
-      thickLines.position.copy(mesh.position)
-      thickLines.scale.copy(mesh.scale)
-      thickLines.rotation.copy(mesh.rotation)
-
-      parent?.remove(mesh)
-      parent?.add(line)
-      parent?.add(thickLines)
-    }
-
-    this.conditionalModel.traverse((child) => {
-      if (
-        child instanceof THREE.Mesh &&
-        child.material &&
-        child.material.resolution
-      ) {
-        this.renderer.getSize(child.material.resolution)
-        child.material.resolution.multiplyScalar(window.devicePixelRatio)
-        child.material.linewidth = 1
-      }
-    })
-  }
-
   setMaterialMode(mode: MaterialMode): void {
     if (!this.currentModel || mode === this.materialMode) {
       return
@@ -502,11 +112,7 @@ export class SceneModelManager implements ModelManagerInterface {
     }
 
     if (this.currentModel) {
-      this.currentModel.visible = mode !== 'lineart'
-    }
-
-    if (this.lineartModel) {
-      this.lineartModel.visible = mode === 'lineart'
+      this.currentModel.visible = true
     }
 
     this.currentModel.traverse((child) => {
@@ -649,6 +255,7 @@ export class SceneModelManager implements ModelManagerInterface {
 
   reset(): void {
     this.currentModel = null
+    this.originalModel = null
     this.originalRotation = null
     this.currentUpDirection = 'original'
     this.setMaterialMode('original')
@@ -699,20 +306,6 @@ export class SceneModelManager implements ModelManagerInterface {
     this.setupModelMaterials(model)
 
     this.setupCamera(size)
-
-    if (this.createLineartModel) {
-      this.setupLineartModel()
-    }
-  }
-
-  setupLineartModel(): void {
-    this.scene.add(this.lineartModel)
-
-    this.initEdgesModel()
-    this.initBackgroundModel()
-    this.initConditionalModel()
-
-    this.lineartModel.visible = false
   }
 
   setOriginalModel(model: THREE.Object3D | THREE.BufferGeometry | GLTF): void {
@@ -730,7 +323,6 @@ export class SceneModelManager implements ModelManagerInterface {
 
     if (this.originalRotation) {
       this.currentModel.rotation.copy(this.originalRotation)
-      this.lineartModel.rotation.copy(this.originalRotation)
     }
 
     switch (direction) {
@@ -755,8 +347,6 @@ export class SceneModelManager implements ModelManagerInterface {
         break
     }
 
-    this.lineartModel.rotation.copy(this.currentModel.rotation)
-
     this.eventManager.emitEvent('upDirectionChange', direction)
   }
 }
diff --git a/src/extensions/core/load3d/ViewHelperManager.ts b/src/extensions/core/load3d/ViewHelperManager.ts
index f68e5e0cb..8906a3426 100644
--- a/src/extensions/core/load3d/ViewHelperManager.ts
+++ b/src/extensions/core/load3d/ViewHelperManager.ts
@@ -74,7 +74,7 @@ export class ViewHelperManager implements ViewHelperManagerInterface {
       this.viewHelper.update(delta)
 
       if (!this.viewHelper.animating) {
-        this.nodeStorage.storeNodeProperty('Camera Info', {
+        const cameraState = {
           position: this.getActiveCamera().position.clone(),
           target: this.getControls().target.clone(),
           zoom:
@@ -85,7 +85,20 @@ export class ViewHelperManager implements ViewHelperManagerInterface {
             this.getActiveCamera() instanceof THREE.PerspectiveCamera
               ? 'perspective'
               : 'orthographic'
-        })
+        }
+
+        const cameraConfig = this.nodeStorage.loadNodeProperty(
+          'Camera Config',
+          {
+            cameraType: cameraState.cameraType,
+            fov:
+              this.getActiveCamera() instanceof THREE.PerspectiveCamera
+                ? (this.getActiveCamera() as THREE.PerspectiveCamera).fov
+                : 75
+          }
+        )
+        cameraConfig.state = cameraState
+        this.nodeStorage.storeNodeProperty('Camera Config', cameraConfig)
       }
     }
   }
diff --git a/src/extensions/core/load3d/conditional-lines/ColoredShadowMaterial.js b/src/extensions/core/load3d/conditional-lines/ColoredShadowMaterial.js
deleted file mode 100644
index 16784283b..000000000
--- a/src/extensions/core/load3d/conditional-lines/ColoredShadowMaterial.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
-Taken from: https://github.com/gkjohnson/threejs-sandbox/tree/master/conditional-lines
-under MIT license
- */
-import { Color, ShaderLib, ShaderMaterial, UniformsUtils } from 'three'
-
-export class ColoredShadowMaterial extends ShaderMaterial {
-  get color() {
-    return this.uniforms.diffuse.value
-  }
-
-  get shadowColor() {
-    return this.uniforms.shadowColor.value
-  }
-
-  set shininess(v) {
-    this.uniforms.shininess.value = v
-  }
-  get shininess() {
-    return this.uniforms.shininess.value
-  }
-
-  constructor(options) {
-    super({
-      uniforms: UniformsUtils.merge([
-        ShaderLib.phong.uniforms,
-        {
-          shadowColor: {
-            value: new Color(0xff0000)
-          }
-        }
-      ]),
-      vertexShader: `
-				#define PHONG
-				varying vec3 vViewPosition;
-				#ifndef FLAT_SHADED
-					varying vec3 vNormal;
-				#endif
-				#include <common>
-				#include <uv_pars_vertex>
-				#include <uv2_pars_vertex>
-				#include <displacementmap_pars_vertex>
-				#include <envmap_pars_vertex>
-				#include <color_pars_vertex>
-				#include <fog_pars_vertex>
-				#include <morphtarget_pars_vertex>
-				#include <skinning_pars_vertex>
-				#include <shadowmap_pars_vertex>
-				#include <logdepthbuf_pars_vertex>
-				#include <clipping_planes_pars_vertex>
-				void main() {
-					#include <uv_vertex>
-					#include <uv2_vertex>
-					#include <color_vertex>
-					#include <beginnormal_vertex>
-					#include <morphnormal_vertex>
-					#include <skinbase_vertex>
-					#include <skinnormal_vertex>
-					#include <defaultnormal_vertex>
-				#ifndef FLAT_SHADED
-					vNormal = normalize( transformedNormal );
-				#endif
-					#include <begin_vertex>
-					#include <morphtarget_vertex>
-					#include <skinning_vertex>
-					#include <displacementmap_vertex>
-					#include <project_vertex>
-					#include <logdepthbuf_vertex>
-					#include <clipping_planes_vertex>
-					vViewPosition = - mvPosition.xyz;
-					#include <worldpos_vertex>
-					#include <envmap_vertex>
-					#include <shadowmap_vertex>
-					#include <fog_vertex>
-				}
-			`,
-      fragmentShader: `
-				#define PHONG
-				uniform vec3 diffuse;
-				uniform vec3 emissive;
-				uniform vec3 specular;
-				uniform float shininess;
-				uniform float opacity;
-				uniform vec3 shadowColor;
-				#include <common>
-				#include <packing>
-				#include <dithering_pars_fragment>
-				#include <color_pars_fragment>
-				#include <uv_pars_fragment>
-				#include <uv2_pars_fragment>
-				#include <map_pars_fragment>
-				#include <alphamap_pars_fragment>
-				#include <aomap_pars_fragment>
-				#include <lightmap_pars_fragment>
-				#include <emissivemap_pars_fragment>
-				#include <envmap_common_pars_fragment>
-				#include <envmap_pars_fragment>
-				#include <cube_uv_reflection_fragment>
-				#include <fog_pars_fragment>
-				#include <bsdfs>
-				#include <lights_pars_begin>
-				#include <lights_phong_pars_fragment>
-				#include <shadowmap_pars_fragment>
-				#include <bumpmap_pars_fragment>
-				#include <normalmap_pars_fragment>
-				#include <specularmap_pars_fragment>
-				#include <logdepthbuf_pars_fragment>
-				#include <clipping_planes_pars_fragment>
-				void main() {
-					#include <clipping_planes_fragment>
-					vec4 diffuseColor = vec4( 1.0, 1.0, 1.0, opacity );
-					ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
-					vec3 totalEmissiveRadiance = emissive;
-					#include <logdepthbuf_fragment>
-					#include <map_fragment>
-					#include <color_fragment>
-					#include <alphamap_fragment>
-					#include <alphatest_fragment>
-					#include <specularmap_fragment>
-					#include <normal_fragment_begin>
-					#include <normal_fragment_maps>
-					#include <emissivemap_fragment>
-					#include <lights_phong_fragment>
-					#include <lights_fragment_begin>
-					#include <lights_fragment_maps>
-					#include <lights_fragment_end>
-					#include <aomap_fragment>
-					vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
-					#include <envmap_fragment>
-
-					gl_FragColor = vec4( outgoingLight, diffuseColor.a );
-					#include <tonemapping_fragment>
-					#include <fog_fragment>
-					#include <premultiplied_alpha_fragment>
-					#include <dithering_fragment>
-
-					gl_FragColor.rgb = mix(
-						shadowColor.rgb,
-						diffuse.rgb,
-						min( gl_FragColor.r, 1.0 )
-					);
-
-				}
-
-			`
-    })
-
-    Object.defineProperties(this, {
-      opacity: {
-        set(v) {
-          this.uniforms.opacity.value = v
-        },
-
-        get() {
-          return this.uniforms.opacity.value
-        }
-      }
-    })
-
-    this.setValues(options)
-    this.lights = true
-  }
-}
diff --git a/src/extensions/core/load3d/conditional-lines/ConditionalEdgesGeometry.js b/src/extensions/core/load3d/conditional-lines/ConditionalEdgesGeometry.js
deleted file mode 100644
index 5b08afc33..000000000
--- a/src/extensions/core/load3d/conditional-lines/ConditionalEdgesGeometry.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
-Taken from: https://github.com/gkjohnson/threejs-sandbox/tree/master/conditional-lines
-under MIT license
- */
-import { BufferAttribute, BufferGeometry, Triangle, Vector3 } from 'three'
-
-const vec0 = new Vector3()
-const vec1 = new Vector3()
-const vec2 = new Vector3()
-const vec3 = new Vector3()
-const vec4 = new Vector3()
-
-const triangle0 = new Triangle()
-const triangle1 = new Triangle()
-const normal0 = new Vector3()
-const normal1 = new Vector3()
-export class ConditionalEdgesGeometry extends BufferGeometry {
-  constructor(geometry) {
-    super()
-
-    const edgeInfo = {}
-
-    const position = geometry.attributes.position
-    let index
-    if (geometry.index) {
-      index = geometry.index
-    } else {
-      const arr = new Array(position.count / 3).fill().map((_, i) => i)
-      index = new BufferAttribute(new Uint32Array(arr), 1, false)
-    }
-
-    for (let i = 0, l = index.count; i < l; i += 3) {
-      const indices = [index.getX(i + 0), index.getX(i + 1), index.getX(i + 2)]
-
-      for (let j = 0; j < 3; j++) {
-        const index0 = indices[j]
-        const index1 = indices[(j + 1) % 3]
-
-        const hash = `${index0}_${index1}`
-        const reverseHash = `${index1}_${index0}`
-        if (reverseHash in edgeInfo) {
-          edgeInfo[reverseHash].controlIndex1 = indices[(j + 2) % 3]
-          edgeInfo[reverseHash].tri1 = i / 3
-        } else {
-          edgeInfo[hash] = {
-            index0,
-            index1,
-
-            controlIndex0: indices[(j + 2) % 3],
-            controlIndex1: null,
-
-            tri0: i / 3,
-            tri1: null
-          }
-        }
-      }
-    }
-
-    const edgePositions = []
-    const edgeDirections = []
-    const edgeControl0 = []
-    const edgeControl1 = []
-    for (const key in edgeInfo) {
-      const { index0, index1, controlIndex0, controlIndex1, tri0, tri1 } =
-        edgeInfo[key]
-
-      if (controlIndex1 === null) {
-        continue
-      }
-
-      triangle0.a.fromBufferAttribute(position, index.getX(tri0 * 3 + 0))
-      triangle0.b.fromBufferAttribute(position, index.getX(tri0 * 3 + 1))
-      triangle0.c.fromBufferAttribute(position, index.getX(tri0 * 3 + 2))
-
-      triangle1.a.fromBufferAttribute(position, index.getX(tri1 * 3 + 0))
-      triangle1.b.fromBufferAttribute(position, index.getX(tri1 * 3 + 1))
-      triangle1.c.fromBufferAttribute(position, index.getX(tri1 * 3 + 2))
-
-      triangle0.getNormal(normal0).normalize()
-      triangle1.getNormal(normal1).normalize()
-
-      if (normal0.dot(normal1) < 0.01) {
-        continue
-      }
-
-      // positions
-      vec0.fromBufferAttribute(position, index0)
-      vec1.fromBufferAttribute(position, index1)
-
-      // direction
-      vec2.subVectors(vec0, vec1)
-
-      // control positions
-      vec3.fromBufferAttribute(position, controlIndex0)
-      vec4.fromBufferAttribute(position, controlIndex1)
-
-      // create arrays
-      edgePositions.push(vec0.x, vec0.y, vec0.z)
-      edgeDirections.push(vec2.x, vec2.y, vec2.z)
-      edgeControl0.push(vec3.x, vec3.y, vec3.z)
-      edgeControl1.push(vec4.x, vec4.y, vec4.z)
-
-      edgePositions.push(vec1.x, vec1.y, vec1.z)
-      edgeDirections.push(vec2.x, vec2.y, vec2.z)
-      edgeControl0.push(vec3.x, vec3.y, vec3.z)
-      edgeControl1.push(vec4.x, vec4.y, vec4.z)
-    }
-
-    this.setAttribute(
-      'position',
-      new BufferAttribute(new Float32Array(edgePositions), 3, false)
-    )
-    this.setAttribute(
-      'direction',
-      new BufferAttribute(new Float32Array(edgeDirections), 3, false)
-    )
-    this.setAttribute(
-      'control0',
-      new BufferAttribute(new Float32Array(edgeControl0), 3, false)
-    )
-    this.setAttribute(
-      'control1',
-      new BufferAttribute(new Float32Array(edgeControl1), 3, false)
-    )
-  }
-}
diff --git a/src/extensions/core/load3d/conditional-lines/ConditionalEdgesShader.js b/src/extensions/core/load3d/conditional-lines/ConditionalEdgesShader.js
deleted file mode 100644
index f5ca16f93..000000000
--- a/src/extensions/core/load3d/conditional-lines/ConditionalEdgesShader.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
-Taken from: https://github.com/gkjohnson/threejs-sandbox/tree/master/conditional-lines
-under MIT license
- */
-import { Color } from 'three'
-
-export const ConditionalEdgesShader = {
-  uniforms: {
-    diffuse: {
-      value: new Color()
-    },
-
-    opacity: {
-      value: 1.0
-    }
-  },
-
-  vertexShader: /* glsl */ `
-		attribute vec3 control0;
-		attribute vec3 control1;
-		attribute vec3 direction;
-
-		#include <common>
-		#include <color_pars_vertex>
-		#include <fog_pars_vertex>
-		#include <logdepthbuf_pars_vertex>
-		#include <clipping_planes_pars_vertex>
-		void main() {
-
-			#include <color_vertex>
-
-			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-			gl_Position = projectionMatrix * mvPosition;
-
-			// Transform the line segment ends and control points into camera clip space
-			vec4 c0 = projectionMatrix * modelViewMatrix * vec4( control0, 1.0 );
-			vec4 c1 = projectionMatrix * modelViewMatrix * vec4( control1, 1.0 );
-			vec4 p0 = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-			vec4 p1 = projectionMatrix * modelViewMatrix * vec4( position + direction, 1.0 );
-
-			c0 /= c0.w;
-			c1 /= c1.w;
-			p0 /= p0.w;
-			p1 /= p1.w;
-
-			// Get the direction of the segment and an orthogonal vector
-			vec2 dir = p1.xy - p0.xy;
-			vec2 norm = vec2( -dir.y, dir.x );
-
-			// Get control point directions from the line
-			vec2 c0dir = c0.xy - p1.xy;
-			vec2 c1dir = c1.xy - p1.xy;
-
-			// If the vectors to the controls points are pointed in different directions away
-			// from the line segment then the line should not be drawn.
-			float d0 = dot( normalize( norm ), normalize( c0dir ) );
-			float d1 = dot( normalize( norm ), normalize( c1dir ) );
-			float discardFlag = float( sign( d0 ) != sign( d1 ) );
-			gl_Position = discardFlag > 0.5 ? c0 : gl_Position;
-
-			#include <logdepthbuf_vertex>
-			#include <clipping_planes_vertex>
-			#include <fog_vertex>
-
-		}
-	`,
-
-  fragmentShader: /* glsl */ `
-		uniform vec3 diffuse;
-		uniform float opacity;
-
-		#include <common>
-		#include <color_pars_fragment>
-		#include <fog_pars_fragment>
-		#include <logdepthbuf_pars_fragment>
-		#include <clipping_planes_pars_fragment>
-		void main() {
-
-			#include <clipping_planes_fragment>
-
-			vec3 outgoingLight = vec3( 0.0 );
-			vec4 diffuseColor = vec4( diffuse, opacity );
-
-			#include <logdepthbuf_fragment>
-			#include <color_fragment>
-
-			outgoingLight = diffuseColor.rgb; // simple shader
-			gl_FragColor = vec4( outgoingLight, diffuseColor.a );
-
-			#include <tonemapping_fragment>
-			#include <fog_fragment>
-			#include <premultiplied_alpha_fragment>
-
-		}
-	`
-}
diff --git a/src/extensions/core/load3d/conditional-lines/Lines2/ConditionalLineMaterial.js b/src/extensions/core/load3d/conditional-lines/Lines2/ConditionalLineMaterial.js
deleted file mode 100644
index 8b1473526..000000000
--- a/src/extensions/core/load3d/conditional-lines/Lines2/ConditionalLineMaterial.js
+++ /dev/null
@@ -1,379 +0,0 @@
-/*
-Taken from: https://github.com/gkjohnson/threejs-sandbox/tree/master/conditional-lines
-under MIT license
- */
-import { ShaderMaterial, UniformsLib, UniformsUtils, Vector2 } from 'three'
-import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
-
-/**
- * parameters = {
- *  color: <hex>,
- *  linewidth: <float>,
- *  dashed: <boolean>,
- *  dashScale: <float>,
- *  dashSize: <float>,
- *  gapSize: <float>,
- *  resolution: <Vector2>, // to be set by renderer
- * }
- */
-
-const uniforms = {
-  linewidth: { value: 1 },
-  resolution: { value: new Vector2(1, 1) },
-  dashScale: { value: 1 },
-  dashSize: { value: 1 },
-  gapSize: { value: 1 }, // todo FIX - maybe change to totalSize
-  opacity: { value: 1 }
-}
-
-const shader = {
-  uniforms: UniformsUtils.merge([
-    UniformsLib.common,
-    UniformsLib.fog,
-    uniforms
-  ]),
-
-  vertexShader: /* glsl */ `
-		#include <common>
-		#include <color_pars_vertex>
-		#include <fog_pars_vertex>
-		#include <logdepthbuf_pars_vertex>
-		#include <clipping_planes_pars_vertex>
-
-		uniform float linewidth;
-		uniform vec2 resolution;
-
-		attribute vec3 control0;
-		attribute vec3 control1;
-		attribute vec3 direction;
-
-		attribute vec3 instanceStart;
-		attribute vec3 instanceEnd;
-
-		attribute vec3 instanceColorStart;
-		attribute vec3 instanceColorEnd;
-
-		varying vec2 vUv;
-
-		#ifdef USE_DASH
-
-			uniform float dashScale;
-			attribute float instanceDistanceStart;
-			attribute float instanceDistanceEnd;
-			varying float vLineDistance;
-
-		#endif
-
-		void trimSegment( const in vec4 start, inout vec4 end ) {
-
-			// trim end segment so it terminates between the camera plane and the near plane
-
-			// conservative estimate of the near plane
-			float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
-			float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
-			float nearEstimate = - 0.5 * b / a;
-
-			float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
-
-			end.xyz = mix( start.xyz, end.xyz, alpha );
-
-		}
-
-		void main() {
-
-			#ifdef USE_COLOR
-
-				vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;
-
-			#endif
-
-			#ifdef USE_DASH
-
-				vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
-
-			#endif
-
-			float aspect = resolution.x / resolution.y;
-
-			vUv = uv;
-
-			// camera space
-			vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
-			vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
-
-			// special case for perspective projection, and segments that terminate either in, or behind, the camera plane
-			// clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
-			// but we need to perform ndc-space calculations in the shader, so we must address this issue directly
-			// perhaps there is a more elegant solution -- WestLangley
-
-			bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column
-
-			if ( perspective ) {
-
-				if ( start.z < 0.0 && end.z >= 0.0 ) {
-
-					trimSegment( start, end );
-
-				} else if ( end.z < 0.0 && start.z >= 0.0 ) {
-
-					trimSegment( end, start );
-
-				}
-
-			}
-
-			// clip space
-			vec4 clipStart = projectionMatrix * start;
-			vec4 clipEnd = projectionMatrix * end;
-
-			// ndc space
-			vec2 ndcStart = clipStart.xy / clipStart.w;
-			vec2 ndcEnd = clipEnd.xy / clipEnd.w;
-
-			// direction
-			vec2 dir = ndcEnd - ndcStart;
-
-			// account for clip-space aspect ratio
-			dir.x *= aspect;
-			dir = normalize( dir );
-
-			// perpendicular to dir
-			vec2 offset = vec2( dir.y, - dir.x );
-
-			// undo aspect ratio adjustment
-			dir.x /= aspect;
-			offset.x /= aspect;
-
-			// sign flip
-			if ( position.x < 0.0 ) offset *= - 1.0;
-
-			// endcaps
-			if ( position.y < 0.0 ) {
-
-				offset += - dir;
-
-			} else if ( position.y > 1.0 ) {
-
-				offset += dir;
-
-			}
-
-			// adjust for linewidth
-			offset *= linewidth;
-
-			// adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
-			offset /= resolution.y;
-
-			// select end
-			vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
-
-			// back to clip space
-			offset *= clip.w;
-
-			clip.xy += offset;
-
-			gl_Position = clip;
-
-			vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation
-
-			#include <logdepthbuf_vertex>
-			#include <clipping_planes_vertex>
-			#include <fog_vertex>
-
-			// conditional logic
-			// Transform the line segment ends and control points into camera clip space
-			vec4 c0 = projectionMatrix * modelViewMatrix * vec4( control0, 1.0 );
-			vec4 c1 = projectionMatrix * modelViewMatrix * vec4( control1, 1.0 );
-			vec4 p0 = projectionMatrix * modelViewMatrix * vec4( instanceStart, 1.0 );
-			vec4 p1 = projectionMatrix * modelViewMatrix * vec4( instanceStart + direction, 1.0 );
-
-			c0 /= c0.w;
-			c1 /= c1.w;
-			p0 /= p0.w;
-			p1 /= p1.w;
-
-			// Get the direction of the segment and an orthogonal vector
-			vec2 segDir = p1.xy - p0.xy;
-			vec2 norm = vec2( - segDir.y, segDir.x );
-
-			// Get control point directions from the line
-			vec2 c0dir = c0.xy - p1.xy;
-			vec2 c1dir = c1.xy - p1.xy;
-
-			// If the vectors to the controls points are pointed in different directions away
-			// from the line segment then the line should not be drawn.
-			float d0 = dot( normalize( norm ), normalize( c0dir ) );
-			float d1 = dot( normalize( norm ), normalize( c1dir ) );
-			float discardFlag = float( sign( d0 ) != sign( d1 ) );
-			gl_Position = discardFlag > 0.5 ? c0 : gl_Position;
-			// end conditional line logic
-
-		}
-		`,
-
-  fragmentShader: /* glsl */ `
-		uniform vec3 diffuse;
-		uniform float opacity;
-
-		#ifdef USE_DASH
-
-			uniform float dashSize;
-			uniform float gapSize;
-
-		#endif
-
-		varying float vLineDistance;
-
-		#include <common>
-		#include <color_pars_fragment>
-		#include <fog_pars_fragment>
-		#include <logdepthbuf_pars_fragment>
-		#include <clipping_planes_pars_fragment>
-
-		varying vec2 vUv;
-
-		void main() {
-
-			#include <clipping_planes_fragment>
-
-			#ifdef USE_DASH
-
-				if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps
-
-				if ( mod( vLineDistance, dashSize + gapSize ) > dashSize ) discard; // todo - FIX
-
-			#endif
-
-			if ( abs( vUv.y ) > 1.0 ) {
-
-				float a = vUv.x;
-				float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
-				float len2 = a * a + b * b;
-
-				if ( len2 > 1.0 ) discard;
-
-			}
-
-			vec4 diffuseColor = vec4( diffuse, opacity );
-
-			#include <logdepthbuf_fragment>
-			#include <color_fragment>
-
-			gl_FragColor = vec4( diffuseColor.rgb, diffuseColor.a );
-
-			#include <tonemapping_fragment>
-			#include <fog_fragment>
-			#include <premultiplied_alpha_fragment>
-
-		}
-		`
-}
-
-class ConditionalLineMaterial extends LineMaterial {
-  constructor(parameters) {
-    super({
-      type: 'ConditionalLineMaterial',
-
-      uniforms: UniformsUtils.clone(shader.uniforms),
-
-      vertexShader: shader.vertexShader,
-      fragmentShader: shader.fragmentShader,
-
-      clipping: true // required for clipping support
-    })
-
-    this.dashed = false
-
-    Object.defineProperties(this, {
-      color: {
-        enumerable: true,
-
-        get: function () {
-          return this.uniforms.diffuse.value
-        },
-
-        set: function (value) {
-          this.uniforms.diffuse.value = value
-        }
-      },
-
-      linewidth: {
-        enumerable: true,
-
-        get: function () {
-          return this.uniforms.linewidth.value
-        },
-
-        set: function (value) {
-          this.uniforms.linewidth.value = value
-        }
-      },
-
-      dashScale: {
-        enumerable: true,
-
-        get: function () {
-          return this.uniforms.dashScale.value
-        },
-
-        set: function (value) {
-          this.uniforms.dashScale.value = value
-        }
-      },
-
-      dashSize: {
-        enumerable: true,
-
-        get: function () {
-          return this.uniforms.dashSize.value
-        },
-
-        set: function (value) {
-          this.uniforms.dashSize.value = value
-        }
-      },
-
-      gapSize: {
-        enumerable: true,
-
-        get: function () {
-          return this.uniforms.gapSize.value
-        },
-
-        set: function (value) {
-          this.uniforms.gapSize.value = value
-        }
-      },
-
-      opacity: {
-        enumerable: true,
-
-        get: function () {
-          return this.uniforms.opacity.value
-        },
-
-        set: function (value) {
-          this.uniforms.opacity.value = value
-        }
-      },
-
-      resolution: {
-        enumerable: true,
-
-        get: function () {
-          return this.uniforms.resolution.value
-        },
-
-        set: function (value) {
-          this.uniforms.resolution.value.copy(value)
-        }
-      }
-    })
-
-    this.setValues(parameters)
-  }
-}
-
-ConditionalLineMaterial.prototype.isConditionalLineMaterial = true
-
-export { ConditionalLineMaterial }
diff --git a/src/extensions/core/load3d/conditional-lines/Lines2/ConditionalLineSegmentsGeometry.js b/src/extensions/core/load3d/conditional-lines/Lines2/ConditionalLineSegmentsGeometry.js
deleted file mode 100644
index 74e148003..000000000
--- a/src/extensions/core/load3d/conditional-lines/Lines2/ConditionalLineSegmentsGeometry.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-Taken from: https://github.com/gkjohnson/threejs-sandbox/tree/master/conditional-lines
-under MIT license
- */
-import * as THREE from 'three'
-import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js'
-
-export class ConditionalLineSegmentsGeometry extends LineSegmentsGeometry {
-  fromConditionalEdgesGeometry(geometry) {
-    super.fromEdgesGeometry(geometry)
-
-    const { direction, control0, control1 } = geometry.attributes
-
-    this.setAttribute(
-      'direction',
-      new THREE.InterleavedBufferAttribute(
-        new THREE.InstancedInterleavedBuffer(direction.array, 6, 1),
-        3,
-        0
-      )
-    )
-
-    this.setAttribute(
-      'control0',
-      new THREE.InterleavedBufferAttribute(
-        new THREE.InstancedInterleavedBuffer(control0.array, 6, 1),
-        3,
-        0
-      )
-    )
-
-    this.setAttribute(
-      'control1',
-      new THREE.InterleavedBufferAttribute(
-        new THREE.InstancedInterleavedBuffer(control1.array, 6, 1),
-        3,
-        0
-      )
-    )
-
-    return this
-  }
-}
diff --git a/src/extensions/core/load3d/exportMenuHelper.ts b/src/extensions/core/load3d/exportMenuHelper.ts
new file mode 100644
index 000000000..d87146cc3
--- /dev/null
+++ b/src/extensions/core/load3d/exportMenuHelper.ts
@@ -0,0 +1,59 @@
+import { t } from '@/i18n'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import Load3d from '@/extensions/core/load3d/Load3d'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+
+const EXPORT_FORMATS = [
+  { label: 'GLB', value: 'glb' },
+  { label: 'OBJ', value: 'obj' },
+  { label: 'STL', value: 'stl' }
+] as const
+
+/**
+ * Creates export menu items for a 3D node using the new extension API.
+ * Returns an array of context menu items including a separator and export submenu.
+ */
+export function createExportMenuItems(
+  load3d: Load3d
+): (IContextMenuValue | null)[] {
+  return [
+    null, // Separator
+    {
+      content: 'Save',
+      has_submenu: true,
+      callback: (_value, _options, event, prev_menu) => {
+        const submenuOptions: IContextMenuValue[] = EXPORT_FORMATS.map(
+          (format) => ({
+            content: format.label,
+            callback: () => {
+              void (async () => {
+                try {
+                  await load3d.exportModel(format.value)
+                  useToastStore().add({
+                    severity: 'success',
+                    summary: t('toastMessages.exportSuccess', {
+                      format: format.label
+                    })
+                  })
+                } catch (error) {
+                  console.error('Export failed:', error)
+                  useToastStore().addAlert(
+                    t('toastMessages.failedToExportModel', {
+                      format: format.label
+                    })
+                  )
+                }
+              })()
+            }
+          })
+        )
+
+        new LiteGraph.ContextMenu(submenuOptions, {
+          event,
+          parentMenu: prev_menu
+        })
+      }
+    }
+  ]
+}
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 967465a9d..8a97d189e 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -10,16 +10,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
-export type Load3DNodeType = 'Load3D' | 'Preview3D'
-
-export type Load3DAnimationNodeType = 'Load3DAnimation' | 'Preview3DAnimation'
-
-export type MaterialMode =
-  | 'original'
-  | 'normal'
-  | 'wireframe'
-  | 'depth'
-  | 'lineart'
+export type MaterialMode = 'original' | 'normal' | 'wireframe' | 'depth'
 export type UpDirection = 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
 export type CameraType = 'perspective' | 'orthographic'
 
@@ -30,6 +21,27 @@ export interface CameraState {
   cameraType: CameraType
 }
 
+export interface SceneConfig {
+  showGrid: boolean
+  backgroundColor: string
+  backgroundImage?: string
+}
+
+export interface ModelConfig {
+  upDirection: UpDirection
+  materialMode: MaterialMode
+}
+
+export interface CameraConfig {
+  cameraType: CameraType
+  fov: number
+  state?: CameraState
+}
+
+export interface LightConfig {
+  intensity: number
+}
+
 export interface EventCallback {
   (data?: any): void
 }
@@ -45,7 +57,6 @@ export interface CaptureResult {
   scene: string
   mask: string
   normal: string
-  lineart: string
 }
 
 interface BaseManager {
@@ -101,26 +112,6 @@ export interface ViewHelperManagerInterface extends BaseManager {
   handleResize(): void
 }
 
-export interface PreviewManagerInterface extends BaseManager {
-  previewCamera: THREE.Camera
-  previewContainer: HTMLDivElement
-  showPreview: boolean
-  previewWidth: number
-  createCapturePreview(container: Element | HTMLElement): void
-  updatePreviewSize(): void
-  togglePreview(showPreview: boolean): void
-  setTargetSize(width: number, height: number): void
-  handleResize(): void
-  updateBackgroundTexture(texture: THREE.Texture | null): void
-  getPreviewViewport(): {
-    left: number
-    bottom: number
-    width: number
-    height: number
-  } | null
-  renderPreview(): void
-}
-
 export interface EventManagerInterface {
   addEventListener(event: string, callback: EventCallback): void
   removeEventListener(event: string, callback: EventCallback): void
@@ -185,3 +176,11 @@ export interface LoaderManagerInterface {
   dispose(): void
   loadModel(url: string, originalFileName?: string): Promise<void>
 }
+
+export const SUPPORTED_EXTENSIONS = new Set([
+  '.gltf',
+  '.glb',
+  '.obj',
+  '.fbx',
+  '.stl'
+])
diff --git a/src/extensions/core/maskeditor.ts b/src/extensions/core/maskeditor.ts
index f8dc58524..dd51be475 100644
--- a/src/extensions/core/maskeditor.ts
+++ b/src/extensions/core/maskeditor.ts
@@ -1,5406 +1,13 @@
-import QuickLRU from '@alloc/quick-lru'
-import { debounce } from 'es-toolkit/compat'
 import _ from 'es-toolkit/compat'
 
-import { t } from '@/i18n'
-
-import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 import { ComfyApp } from '../../scripts/app'
-import { $el, ComfyDialog } from '../../scripts/ui'
-import { getStorageValue, setStorageValue } from '../../scripts/utils'
-import { hexToRgb } from '../../utils/colorUtil'
-import { parseToRgb } from '../../utils/colorUtil'
 import { ClipspaceDialog } from './clipspace'
-import {
-  imageLayerFilenamesByTimestamp,
-  imageLayerFilenamesIfApplicable
-} from './maskEditorLayerFilenames'
+import { MaskEditorDialog } from './maskeditor/MaskEditorDialog'
 import { MaskEditorDialogOld } from './maskEditorOld'
 
-var styles = `
-  #maskEditorContainer {
-    display: fixed;
-  }
-  #maskEditor_brush {
-    position: absolute;
-    backgroundColor: transparent;
-    z-index: 8889;
-    pointer-events: none;
-    border-radius: 50%;
-    overflow: visible;
-    outline: 1px dashed black;
-    box-shadow: 0 0 0 1px white;
-  }
-  #maskEditor_brushPreviewGradient {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    display: none;
-  }
-  #maskEditor {
-    display: block;
-    width: 100%;
-    height: 100vh;
-    left: 0;
-    z-index: 8888;
-    position: fixed;
-    background: rgba(50,50,50,0.75);
-    backdrop-filter: blur(10px);
-    overflow: hidden;
-    user-select: none;
-    --mask-editor-top-bar-height: 44px;
-  }
-  #maskEditor_sidePanelContainer {
-    height: 100%;
-    width: 220px;
-    z-index: 8888;
-    display: flex;
-    flex-direction: column;
-  }
-  #maskEditor_sidePanel {
-    background: var(--comfy-menu-bg);
-    height: 100%;
-    display: flex;
-    align-items: center;
-    overflow-y: auto;
-    width: 220px;
-    padding: 0 10px;
-  }
-  #maskEditor_sidePanelContent {
-    width: 100%;
-  }
-  #maskEditor_sidePanelShortcuts {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    margin-top: 10px;
-    gap: 10px;
-    justify-content: center;
-  }
-  .maskEditor_sidePanelIconButton {
-    width: 40px;
-    height: 40px;
-    pointer-events: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: background-color 0.1s;
-  }
-  .maskEditor_sidePanelIconButton:hover {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-  #maskEditor_sidePanelBrushSettings {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    width: 100%;
-    padding: 10px;
-  }
-  .maskEditor_sidePanelTitle {
-    text-align: center;
-    font-size: 15px;
-    font-family: sans-serif;
-    color: var(--descrip-text);
-    margin-top: 10px;
-  }
-  #maskEditor_sidePanelBrushShapeContainer {
-    display: flex;
-    width: 180px;
-    height: 50px;
-    border: 1px solid var(--border-color);
-    pointer-events: auto;
-    background: rgba(0, 0, 0, 0.2);
-  }
-  #maskEditor_sidePanelBrushShapeCircle {
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    border: 1px solid var(--border-color);
-    pointer-events: auto;
-    transition: background 0.1s;
-    margin-left: 7.5px;
-  }
-  .maskEditor_sidePanelBrushRange {
-    width: 180px;
-    -webkit-appearance: none;
-    appearance: none;
-    background: transparent;
-    cursor: pointer;
-  }
-  .maskEditor_sidePanelBrushRange::-webkit-slider-thumb {
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    cursor: grab;
-    margin-top: -8px;
-    background: var(--p-surface-700);
-    border: 1px solid var(--border-color);
-  }
-  .maskEditor_sidePanelBrushRange::-moz-range-thumb {
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    cursor: grab;
-    background: var(--p-surface-800);
-    border: 1px solid var(--border-color);
-  }
-  .maskEditor_sidePanelBrushRange::-webkit-slider-runnable-track {
-    background: var(--p-surface-700);
-    height: 3px;
-  }
-  .maskEditor_sidePanelBrushRange::-moz-range-track {
-    background: var(--p-surface-700);
-    height: 3px;
-  }
-
-  #maskEditor_sidePanelBrushShapeSquare {
-    width: 35px;
-    height: 35px;
-    margin: 5px;
-    border: 1px solid var(--border-color);
-    pointer-events: auto;
-    transition: background 0.1s;
-  }
-
-  .maskEditor_brushShape_dark {
-    background: transparent;
-  }
-
-  .maskEditor_brushShape_dark:hover {
-    background: var(--p-surface-900);
-  }
-
-  .maskEditor_brushShape_light {
-    background: transparent;
-  }
-
-  .maskEditor_brushShape_light:hover {
-    background: var(--comfy-menu-bg);
-  }
-
-  #maskEditor_sidePanelImageLayerSettings {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    width: 100%;
-    align-items: center;
-  }
-  .maskEditor_sidePanelLayer {
-    display: flex;
-    width: 100%;
-    height: 50px;
-  }
-  .maskEditor_sidePanelLayerVisibilityContainer {
-    width: 50px;
-    height: 50px;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .maskEditor_sidePanelVisibilityToggle {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    pointer-events: auto;
-  }
-  .maskEditor_sidePanelLayerIconContainer {
-    width: 60px;
-    height: 50px;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    fill: var(--input-text);
-  }
-  .maskEditor_sidePanelLayerIconContainer svg {
-    width: 30px;
-    height: 30px;
-  }
-  #maskEditor_sidePanelMaskLayerBlendingContainer {
-    width: 80px;
-    height: 50px;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  #maskEditor_sidePanelMaskLayerBlendingSelect {
-    width: 80px;
-    height: 30px;
-    border: 1px solid var(--border-color);
-    background-color: rgba(0, 0, 0, 0.2);
-    color: var(--input-text);
-    font-family: sans-serif;
-    font-size: 15px;
-    pointer-events: auto;
-    transition: background-color border 0.1s;
-  }
-  #maskEditor_sidePanelClearCanvasButton:hover {
-    background-color: var(--p-overlaybadge-outline-color);
-    border: none;
-  }
-  #maskEditor_sidePanelClearCanvasButton {
-    width: 180px;
-    height: 30px;
-    border: none;
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--border-color);
-    color: var(--input-text);
-    font-family: sans-serif;
-    font-size: 15px;
-    pointer-events: auto;
-    transition: background-color 0.1s;
-  }
-  #maskEditor_sidePanelClearCanvasButton:hover {
-    background-color: var(--p-overlaybadge-outline-color);
-  }
-  #maskEditor_sidePanelHorizontalButtonContainer {
-    display: flex;
-    gap: 10px;
-    height: 40px;
-  }
-  .maskEditor_sidePanelBigButton {
-    width: 85px;
-    height: 30px;
-    border: none;
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--border-color);
-    color: var(--input-text);
-    font-family: sans-serif;
-    font-size: 15px;
-    pointer-events: auto;
-    transition: background-color border 0.1s;
-  }
-  .maskEditor_sidePanelBigButton:hover {
-    background-color: var(--p-overlaybadge-outline-color);
-    border: none;
-  }
-  #maskEditor_toolPanel {
-    height: 100%;
-    width: 4rem;
-    z-index: 8888;
-    background: var(--comfy-menu-bg);
-    display: flex;
-    flex-direction: column;
-  }
-  .maskEditor_toolPanelContainer {
-    width: 4rem;
-    height: 4rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    transition: background-color 0.2s;
-  }
-  .maskEditor_toolPanelContainerSelected svg {
-    fill: var(--p-button-text-primary-color) !important;
-  }
-  .maskEditor_toolPanelContainerSelected .maskEditor_toolPanelIndicator {
-    display: block;
-  }
-  .maskEditor_toolPanelContainer svg {
-    width: 75%;
-    aspect-ratio: 1/1;
-    fill: var(--p-button-text-secondary-color);
-  }
-
-  .maskEditor_toolPanelContainerDark:hover {
-    background-color: var(--p-surface-800);
-  }
-
-  .maskEditor_toolPanelContainerLight:hover {
-    background-color: var(--p-surface-300);
-  }
-
-  .maskEditor_toolPanelIndicator {
-    display: none;
-    height: 100%;
-    width: 4px;
-    position: absolute;
-    left: 0;
-    background: var(--p-button-text-primary-color);
-  }
-  #maskEditor_sidePanelPaintBucketSettings {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    width: 100%;
-    padding: 10px;
-  }
-  #canvasBackground {
-    background: white;
-    width: 100%;
-    height: 100%;
-  }
-  #maskEditor_sidePanelButtonsContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin-top: 10px;
-  }
-  .maskEditor_sidePanelSeparator {
-    width: 100%;
-    height: 2px;
-    background: var(--border-color);
-    margin-top: 1.5em;
-    margin-bottom: 5px;
-  }
-  #maskEditor_pointerZone {
-    width: calc(100% - 4rem - 220px);
-    height: 100%;
-  }
-  #maskEditor_uiContainer {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 8888;
-    display: flex;
-    flex-direction: column;
-  }
-  #maskEditorCanvasContainer {
-    position: absolute;
-    width: 1000px;
-    height: 667px;
-    left: 359px;
-    top: 280px;
-  }
-  #imageCanvas {
-    width: 100%;
-    height: 100%;
-  }
-  #maskCanvas {
-    width: 100%;
-    height: 100%;
-  }
-  #maskEditor_uiHorizontalContainer {
-    width: 100%;
-    height: calc(100% - var(--mask-editor-top-bar-height));
-    display: flex;
-  }
-  #maskEditor_topBar {
-    display: flex;
-    height: var(--mask-editor-top-bar-height);
-    align-items: center;
-    background: var(--comfy-menu-bg);
-    shrink: 0;
-  }
-  #maskEditor_topBarTitle {
-    margin: 0;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-    font-size: 1.2em;
-  }
-  #maskEditor_topBarButtonContainer {
-    display: flex;
-    gap: 10px;
-    margin-right: 0.5rem;
-    position: absolute;
-    right: 0;
-    width: 100%;
-  }
-  #maskEditor_topBarShortcutsContainer {
-    display: flex;
-    gap: 10px;
-    margin-left: 5px;
-  }
-
-  .maskEditor_topPanelIconButton_dark {
-    width: 50px;
-    height: 30px;
-    pointer-events: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: background-color 0.1s;
-    background: var(--p-surface-800);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-  }
-
-  .maskEditor_topPanelIconButton_dark:hover {
-      background-color: var(--p-surface-900);
-  }
-
-  .maskEditor_topPanelIconButton_dark svg {
-    width: 25px;
-    height: 25px;
-    pointer-events: none;
-    fill: var(--input-text);
-  }
-
-  .maskEditor_topPanelIconButton_light {
-    width: 50px;
-    height: 30px;
-    pointer-events: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: background-color 0.1s;
-    background: var(--comfy-menu-bg);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-  }
-
-  .maskEditor_topPanelIconButton_light:hover {
-      background-color: var(--p-surface-300);
-  }
-
-  .maskEditor_topPanelIconButton_light svg {
-    width: 25px;
-    height: 25px;
-    pointer-events: none;
-    fill: var(--input-text);
-  }
-
-  .maskEditor_topPanelButton_dark {
-    height: 30px;
-    background: var(--p-surface-800);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-    color: var(--input-text);
-    font-family: sans-serif;
-    pointer-events: auto;
-    transition: 0.1s;
-    width: 60px;
-  }
-
-  .maskEditor_topPanelButton_dark:hover {
-    background-color: var(--p-surface-900);
-  }
-
-  .maskEditor_topPanelButton_light {
-    height: 30px;
-    background: var(--comfy-menu-bg);
-    border: 1px solid var(--p-form-field-border-color);
-    border-radius: 10px;
-    color: var(--input-text);
-    font-family: sans-serif;
-    pointer-events: auto;
-    transition: 0.1s;
-    width: 60px;
-  }
-
-  .maskEditor_topPanelButton_light:hover {
-    background-color: var(--p-surface-300);
-  }
-
-
-  #maskEditor_sidePanelColorSelectSettings {
-    flex-direction: column;
-  }
-
-  .maskEditor_sidePanel_paintBucket_Container {
-    width: 180px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .maskEditor_sidePanel_colorSelect_Container {
-    display: flex;
-    width: 180px;
-    align-items: center;
-    gap: 5px;
-    height: 30px;
-  }
-
-  #maskEditor_sidePanelVisibilityToggle {
-    position: absolute;
-    right: 0;
-  }
-
-  #maskEditor_sidePanelColorSelectMethodSelect {
-    position: absolute;
-    right: 0;
-    height: 30px;
-    border-radius: 0;
-    border: 1px solid var(--border-color);
-    background: rgba(0,0,0,0.2);
-  }
-
-  #maskEditor_sidePanelVisibilityToggle {
-    position: absolute;
-    right: 0;
-  }
-
-  .maskEditor_sidePanel_colorSelect_tolerance_container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin-bottom: 10px;
-  }
-
-  .maskEditor_sidePanelContainerColumn {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding-bottom: 12px;
-  }
-
-  .maskEditor_sidePanelContainerRow {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    min-height: 24px;
-    position: relative;
-  }
-
-  .maskEditor_accent_bg_dark {
-    background: var(--p-surface-800);
-  }
-
-  .maskEditor_accent_bg_very_dark {
-    background: var(--p-surface-900);
-  }
-
-  .maskEditor_accent_bg_light {
-    background: var(--p-surface-300);
-  }
-
-  .maskEditor_accent_bg_very_light {
-    background: var(--comfy-menu-bg);
-  }
-
-  #maskEditor_paintBucketSettings {
-    display: none;
-  }
-
-  #maskEditor_colorSelectSettings {
-    display: none;
-  }
-
-  .maskEditor_sidePanelToggleContainer {
-    cursor: pointer;
-    display: inline-block;
-    position: absolute;
-    right: 0;
-  }
-
-  .maskEditor_toggle_bg_dark {
-    background: var(--p-surface-700);
-  }
-
-  .maskEditor_toggle_bg_light {
-    background: var(--p-surface-300);
-  }
-
-  .maskEditor_sidePanelToggleSwitch {
-    display: inline-block;
-    border-radius: 16px;
-    width: 40px;
-    height: 24px;
-    position: relative;
-    vertical-align: middle;
-    transition: background 0.25s;
-  }
-  .maskEditor_sidePanelToggleSwitch:before, .maskEditor_sidePanelToggleSwitch:after {
-    content: "";
-  }
-  .maskEditor_sidePanelToggleSwitch:before {
-    display: block;
-    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
-    border-radius: 50%;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    transition: ease 0.2s;
-  }
-  .maskEditor_sidePanelToggleContainer:hover .maskEditor_sidePanelToggleSwitch:before {
-    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
-  }
-  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch {
-    background: var(--p-button-text-primary-color);
-  }
-  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_toggle_bg_dark:before {
-    background: var(--p-surface-900);
-  }
-  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_toggle_bg_light:before {
-    background: var(--comfy-menu-bg);
-  }
-  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch:before {
-    left: 20px;
-  }
-
-  .maskEditor_sidePanelToggleCheckbox {
-    position: absolute;
-    visibility: hidden;
-  }
-
-  .maskEditor_sidePanelDropdown_dark {
-    border: 1px solid var(--p-form-field-border-color);
-    background: var(--p-surface-900);
-    height: 24px;
-    padding-left: 5px;
-    padding-right: 5px;
-    border-radius: 6px;
-    transition: background 0.1s;
-  }
-
-  .maskEditor_sidePanelDropdown_dark option {
-    background: var(--p-surface-900);
-  }
-
-  .maskEditor_sidePanelDropdown_dark:focus {
-    outline: 1px solid var(--p-button-text-primary-color);
-  }
-
-  .maskEditor_sidePanelDropdown_dark option:hover {
-    background: white;
-  }
-  .maskEditor_sidePanelDropdown_dark option:active {
-    background: var(--p-highlight-background);
-  }
-
-  .maskEditor_sidePanelDropdown_light {
-    border: 1px solid var(--p-form-field-border-color);
-    background: var(--comfy-menu-bg);
-    height: 24px;
-    padding-left: 5px;
-    padding-right: 5px;
-    border-radius: 6px;
-    transition: background 0.1s;
-  }
-
-  .maskEditor_sidePanelDropdown_light option {
-    background: var(--comfy-menu-bg);
-  }
-
-  .maskEditor_sidePanelDropdown_light:focus {
-    outline: 1px solid var(--p-surface-300);
-  }
-
-  .maskEditor_sidePanelDropdown_light option:hover {
-    background: white;
-  }
-  .maskEditor_sidePanelDropdown_light option:active {
-    background: var(--p-surface-300);
-  }
-
-  .maskEditor_layerRow {
-    height: 50px;
-    width: 100%;
-    border-radius: 10px;
-  }
-
-  .maskEditor_sidePanelLayerPreviewContainer {
-    width: 40px;
-    height: 30px;
-  }
-
-  .maskEditor_sidePanelLayerPreviewContainer > svg{
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    fill: var(--p-surface-100);
-  }
-
-  #maskEditor_sidePanelImageLayerImage {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-
-  .maskEditor_sidePanelSubTitle {
-    text-align: left;
-    font-size: 12px;
-    font-family: sans-serif;
-    color: var(--descrip-text);
-  }
-
-  .maskEditor_containerDropdown {
-    position: absolute;
-    right: 0;
-  }
-
-  .maskEditor_sidePanelLayerCheckbox {
-    margin-left: 15px;
-  }
-
-  .maskEditor_toolPanelZoomIndicator {
-    width: 4rem;
-    height: 4rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-    color: var(--p-button-text-secondary-color);
-    position: absolute;
-    bottom: 0;
-    transition: background-color 0.2s;
-  }
-
-  #maskEditor_toolPanelDimensionsText {
-    font-size: 12px;
-  }
-
-  #maskEditor_topBarSaveButton {
-    background: var(--p-primary-color) !important;
-    color: var(--p-button-primary-color) !important;
-  }
-
-  #maskEditor_topBarSaveButton:hover {
-    background: var(--p-primary-hover-color) !important;
-  }
-
-`
-
-var styleSheet = document.createElement('style')
-styleSheet.type = 'text/css'
-styleSheet.innerText = styles
-document.head.appendChild(styleSheet)
-
-enum BrushShape {
-  Arc = 'arc',
-  Rect = 'rect'
-}
-
-enum Tools {
-  MaskPen = 'pen',
-  PaintPen = 'rgbPaint',
-  Eraser = 'eraser',
-  MaskBucket = 'paintBucket',
-  MaskColorFill = 'colorSelect'
-}
-
-const allTools = [
-  Tools.MaskPen,
-  Tools.PaintPen,
-  Tools.Eraser,
-  Tools.MaskBucket,
-  Tools.MaskColorFill
-]
-
-const allImageLayers = ['mask', 'rgb'] as const
-type ImageLayer = (typeof allImageLayers)[number]
-
-interface ToolInternalSettings {
-  container: HTMLElement
-  cursor?: string
-  newActiveLayerOnSet?: ImageLayer
-}
-
-enum CompositionOperation {
-  SourceOver = 'source-over',
-  DestinationOut = 'destination-out'
-}
-
-enum MaskBlendMode {
-  Black = 'black',
-  White = 'white',
-  Negative = 'negative'
-}
-
-enum ColorComparisonMethod {
-  Simple = 'simple',
-  HSL = 'hsl',
-  LAB = 'lab'
-}
-
-interface Point {
-  x: number
-  y: number
-}
-
-interface Offset {
-  x: number
-  y: number
-}
-
-interface Brush {
-  type: BrushShape
-  size: number
-  opacity: number
-  hardness: number
-  smoothingPrecision: number
-}
-
-const saveBrushToCache = debounce(function (key: string, brush: Brush): void {
-  try {
-    const brushString = JSON.stringify(brush)
-    setStorageValue(key, brushString)
-  } catch (error) {
-    console.error('Failed to save brush to cache:', error)
-  }
-}, 300)
-
-function loadBrushFromCache(key: string): Brush | null {
-  try {
-    const brushString = getStorageValue(key)
-    if (brushString) {
-      const brush = JSON.parse(brushString) as Brush
-      console.log('Loaded brush from cache:', brush)
-      return brush
-    } else {
-      console.log('No brush found in cache.')
-      return null
-    }
-  } catch (error) {
-    console.error('Failed to load brush from cache:', error)
-    return null
-  }
-}
-
-type Callback = (data?: any) => void
-
-class MaskEditorDialog extends ComfyDialog {
-  static instance: MaskEditorDialog | null = null
-
-  //new
-  private uiManager!: UIManager
-  // @ts-expect-error unused variable
-  private toolManager!: ToolManager
-  // @ts-expect-error unused variable
-  private panAndZoomManager!: PanAndZoomManager
-  // @ts-expect-error unused variable
-  private brushTool!: BrushTool
-  private paintBucketTool!: PaintBucketTool
-  private colorSelectTool!: ColorSelectTool
-  private canvasHistory!: CanvasHistory
-  private messageBroker!: MessageBroker
-  private keyboardManager!: KeyboardManager
-
-  private rootElement!: HTMLElement
-  private imageURL!: string
-
-  private isLayoutCreated: boolean = false
-  private isOpen: boolean = false
-
-  //variables needed?
-  last_display_style: string | null = null
-
-  constructor() {
-    super()
-    this.rootElement = $el(
-      'div.maskEditor_hidden',
-      { parent: document.body },
-      []
-    )
-
-    this.element = this.rootElement
-  }
-
-  static getInstance() {
-    if (!ComfyApp.clipspace || !ComfyApp.clipspace.imgs) {
-      throw new Error('No clipspace images found')
-    }
-    const currentSrc =
-      ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src
-
-    if (
-      !MaskEditorDialog.instance ||
-      currentSrc !== MaskEditorDialog.instance.imageURL
-    ) {
-      if (MaskEditorDialog.instance) MaskEditorDialog.instance.destroy()
-      MaskEditorDialog.instance = new MaskEditorDialog()
-      MaskEditorDialog.instance.imageURL = currentSrc
-    }
-    return MaskEditorDialog.instance
-  }
-
-  override async show() {
-    this.cleanup()
-    if (!this.isLayoutCreated) {
-      // layout
-      this.messageBroker = new MessageBroker()
-      this.canvasHistory = new CanvasHistory(this, 20)
-      this.paintBucketTool = new PaintBucketTool(this)
-      this.brushTool = new BrushTool(this)
-      this.panAndZoomManager = new PanAndZoomManager(this)
-      this.toolManager = new ToolManager(this)
-      this.keyboardManager = new KeyboardManager(this)
-      this.uiManager = new UIManager(this.rootElement, this)
-      this.colorSelectTool = new ColorSelectTool(this)
-
-      // replacement of onClose hook since close is not real close
-      const self = this
-      const observer = new MutationObserver(function (mutations) {
-        mutations.forEach(function (mutation) {
-          if (
-            mutation.type === 'attributes' &&
-            mutation.attributeName === 'style'
-          ) {
-            if (
-              self.last_display_style &&
-              self.last_display_style != 'none' &&
-              self.element.style.display == 'none'
-            ) {
-              //self.brush.style.display = 'none'
-              ComfyApp.onClipspaceEditorClosed()
-            }
-
-            self.last_display_style = self.element.style.display
-          }
-        })
-      })
-
-      const config = { attributes: true }
-      observer.observe(this.rootElement, config)
-
-      this.isLayoutCreated = true
-
-      await this.uiManager.setlayout()
-    }
-
-    //this.zoomAndPanManager.reset()
-
-    this.rootElement.id = 'maskEditor'
-    this.rootElement.style.display = 'flex'
-    this.element.style.display = 'flex'
-    await this.uiManager.initUI()
-    this.paintBucketTool.initPaintBucketTool()
-    this.colorSelectTool.initColorSelectTool()
-    await this.canvasHistory.saveInitialState()
-    this.isOpen = true
-    if (ComfyApp.clipspace && ComfyApp.clipspace.imgs) {
-      this.uiManager.setSidebarImage()
-    }
-    this.keyboardManager.addListeners()
-  }
-
-  private cleanup() {
-    // Remove all maskEditor elements
-    const maskEditors = document.querySelectorAll('[id^="maskEditor"]')
-    maskEditors.forEach((element) => element.remove())
-
-    // Remove brush elements specifically
-    const brushElements = document.querySelectorAll('#maskEditor_brush')
-    brushElements.forEach((element) => element.remove())
-  }
-
-  destroy() {
-    this.isLayoutCreated = false
-    this.isOpen = false
-    this.canvasHistory.clearStates()
-    this.keyboardManager.removeListeners()
-    this.cleanup()
-    this.close()
-    MaskEditorDialog.instance = null
-  }
-
-  isOpened() {
-    return this.isOpen
-  }
-
-  async save() {
-    const imageCanvas = this.uiManager.getImgCanvas()
-    const maskCanvas = this.uiManager.getMaskCanvas()
-    const maskCanvasCtx = getCanvas2dContext(maskCanvas)
-    const paintCanvas = this.uiManager.getRgbCanvas()
-    const image = this.uiManager.getImage()
-
-    try {
-      await ensureImageFullyLoaded(maskCanvas.toDataURL())
-    } catch (error) {
-      console.error('Error loading mask image:', error)
-      return
-    }
-
-    const unrefinedMaskImageData = maskCanvasCtx.getImageData(
-      0,
-      0,
-      maskCanvas.width,
-      maskCanvas.height
-    )
-
-    const refinedMaskOnlyData = new ImageData(
-      removeImageRgbValuesAndInvertAlpha(unrefinedMaskImageData.data),
-      unrefinedMaskImageData.width,
-      unrefinedMaskImageData.height
-    )
-
-    // We create an undisplayed copy so as not to alter the original--displayed--canvas
-    const [refinedMaskCanvas, refinedMaskCanvasCtx] =
-      createCanvasCopy(maskCanvas)
-    refinedMaskCanvasCtx.globalCompositeOperation =
-      CompositionOperation.SourceOver
-    refinedMaskCanvasCtx.putImageData(refinedMaskOnlyData, 0, 0)
-
-    const timestamp = Math.round(performance.now())
-    const filenames = imageLayerFilenamesByTimestamp(timestamp)
-    const refs = {
-      maskedImage: toRef(filenames.maskedImage),
-      paint: toRef(filenames.paint),
-      paintedImage: toRef(filenames.paintedImage),
-      paintedMaskedImage: toRef(filenames.paintedMaskedImage)
-    }
-
-    const [paintedImageCanvas] = combineOriginalImageAndPaint({
-      originalImage: imageCanvas,
-      paint: paintCanvas
-    })
-
-    replaceClipspaceImages(refs.paintedMaskedImage, [refs.paint])
-
-    const originalImageUrl = new URL(image.src)
-
-    this.uiManager.setBrushOpacity(0)
-
-    const originalImageFilename = originalImageUrl.searchParams.get('filename')
-    if (!originalImageFilename)
-      throw new Error(
-        "Expected original image URL to have a `filename` query parameter, but couldn't find it."
-      )
-
-    const originalImageRef: Partial<Ref> = {
-      filename: originalImageFilename,
-      subfolder: originalImageUrl.searchParams.get('subfolder') ?? undefined,
-      type: originalImageUrl.searchParams.get('type') ?? undefined
-    }
-
-    const mkFormData = (
-      blob: Blob,
-      filename: string,
-      originalImageRefOverride?: Partial<Ref>
-    ) => {
-      const formData = new FormData()
-      formData.append('image', blob, filename)
-      formData.append(
-        'original_ref',
-        JSON.stringify(originalImageRefOverride ?? originalImageRef)
-      )
-      formData.append('type', 'input')
-      formData.append('subfolder', 'clipspace')
-      return formData
-    }
-
-    const canvasToFormData = (
-      canvas: HTMLCanvasElement,
-      filename: string,
-      originalImageRefOverride?: Partial<Ref>
-    ) => {
-      const blob = this.dataURLToBlob(canvas.toDataURL())
-      return mkFormData(blob, filename, originalImageRefOverride)
-    }
-
-    const formDatas = {
-      // Note: this canvas only contains mask data (no image), but during the upload process, the backend combines the mask with the original_image. Refer to the backend repo's `server.py`, search for `@routes.post("/upload/mask")`
-      maskedImage: canvasToFormData(refinedMaskCanvas, filenames.maskedImage),
-      paint: canvasToFormData(paintCanvas, filenames.paint),
-      paintedImage: canvasToFormData(
-        paintedImageCanvas,
-        filenames.paintedImage
-      ),
-      paintedMaskedImage: canvasToFormData(
-        refinedMaskCanvas,
-        filenames.paintedMaskedImage,
-        refs.paintedImage
-      )
-    }
-
-    this.uiManager.setSaveButtonText(t('g.saving'))
-    this.uiManager.setSaveButtonEnabled(false)
-    this.keyboardManager.removeListeners()
-
-    try {
-      await this.uploadMask(
-        refs.maskedImage,
-        formDatas.maskedImage,
-        'selectedIndex'
-      )
-      await this.uploadImage(refs.paint, formDatas.paint)
-      await this.uploadImage(refs.paintedImage, formDatas.paintedImage, false)
-
-      // IMPORTANT: We using `uploadMask` here, because the backend combines the mask with the painted image during the upload process. We do NOT want to combine the mask with the original image on the frontend, because the spec for CanvasRenderingContext2D does not allow for setting pixels to transparent while preserving their RGB values.
-      // See: <https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData#data_loss_due_to_browser_optimization>
-      // It is possible that WebGL contexts can achieve this, but WebGL is extremely complex, and the backend functionality is here for this purpose!
-      // Refer to the backend repo's `server.py`, search for `@routes.post("/upload/mask")`
-      await this.uploadMask(
-        refs.paintedMaskedImage,
-        formDatas.paintedMaskedImage,
-        'combinedIndex'
-      )
-
-      ComfyApp.onClipspaceEditorSave()
-      this.destroy()
-    } catch (error) {
-      console.error('Error during upload:', error)
-      this.uiManager.setSaveButtonText(t('g.save'))
-      this.uiManager.setSaveButtonEnabled(true)
-      this.keyboardManager.addListeners()
-    }
-  }
-
-  getMessageBroker() {
-    return this.messageBroker
-  }
-
-  // Helper function to convert a data URL to a Blob object
-  private dataURLToBlob(dataURL: string) {
-    const parts = dataURL.split(';base64,')
-    const contentType = parts[0].split(':')[1]
-    const byteString = atob(parts[1])
-    const arrayBuffer = new ArrayBuffer(byteString.length)
-    const uint8Array = new Uint8Array(arrayBuffer)
-    for (let i = 0; i < byteString.length; i++) {
-      uint8Array[i] = byteString.charCodeAt(i)
-    }
-    return new Blob([arrayBuffer], { type: contentType })
-  }
-
-  private async uploadImage(
-    filepath: Ref,
-    formData: FormData,
-    isPaintLayer = true
-  ) {
-    const success = await requestWithRetries(() =>
-      api.fetchApi('/upload/image', {
-        method: 'POST',
-        body: formData
-      })
-    )
-    if (!success) {
-      throw new Error('Upload failed.')
-    }
-
-    if (!isPaintLayer) {
-      ClipspaceDialog.invalidatePreview()
-      return success
-    }
-    try {
-      const paintedIndex = ComfyApp.clipspace?.paintedIndex
-      if (ComfyApp.clipspace?.imgs && paintedIndex !== undefined) {
-        // Create and set new image
-        const newImage = new Image()
-        newImage.crossOrigin = 'anonymous'
-        newImage.src = mkFileUrl({ ref: filepath, preview: true })
-        ComfyApp.clipspace.imgs[paintedIndex] = newImage
-
-        // Update images array if it exists
-        if (ComfyApp.clipspace.images) {
-          ComfyApp.clipspace.images[paintedIndex] = filepath
-        }
-      }
-    } catch (err) {
-      console.warn('Failed to update clipspace image:', err)
-    }
-    ClipspaceDialog.invalidatePreview()
-  }
-
-  private async uploadMask(
-    filepath: Ref,
-    formData: FormData,
-    clipspaceLocation: 'selectedIndex' | 'combinedIndex'
-  ) {
-    const success = await requestWithRetries(() =>
-      api.fetchApi('/upload/mask', {
-        method: 'POST',
-        body: formData
-      })
-    )
-    if (!success) {
-      throw new Error('Upload failed.')
-    }
-
-    try {
-      const nameOfIndexToSaveTo = (
-        {
-          selectedIndex: 'selectedIndex',
-          combinedIndex: 'combinedIndex'
-        } as const
-      )[clipspaceLocation]
-      if (!nameOfIndexToSaveTo) return
-      const indexToSaveTo = ComfyApp.clipspace?.[nameOfIndexToSaveTo]
-      if (!ComfyApp.clipspace?.imgs || indexToSaveTo === undefined) return
-      // Create and set new image
-      const newImage = new Image()
-      newImage.crossOrigin = 'anonymous'
-      newImage.src = mkFileUrl({ ref: filepath, preview: true })
-      ComfyApp.clipspace.imgs[indexToSaveTo] = newImage
-
-      // Update images array if it exists
-      if (ComfyApp.clipspace.images) {
-        ComfyApp.clipspace.images[indexToSaveTo] = filepath
-      }
-    } catch (err) {
-      console.warn('Failed to update clipspace image:', err)
-    }
-    ClipspaceDialog.invalidatePreview()
-  }
-}
-
-class CanvasHistory {
-  // @ts-expect-error unused variable
-  private maskEditor!: MaskEditorDialog
-  private messageBroker!: MessageBroker
-
-  private canvas!: HTMLCanvasElement
-  private ctx!: CanvasRenderingContext2D
-  private rgbCanvas!: HTMLCanvasElement
-  private rgbCtx!: CanvasRenderingContext2D
-  private states: { mask: ImageData; rgb: ImageData }[] = []
-  private currentStateIndex: number = -1
-  private maxStates: number = 20
-  private initialized: boolean = false
-
-  constructor(maskEditor: MaskEditorDialog, maxStates = 20) {
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-    this.maxStates = maxStates
-    this.createListeners()
-  }
-
-  private async pullCanvas() {
-    this.canvas = await this.messageBroker.pull('maskCanvas')
-    this.ctx = await this.messageBroker.pull('maskCtx')
-    this.rgbCanvas = await this.messageBroker.pull('rgbCanvas')
-    this.rgbCtx = await this.messageBroker.pull('rgbCtx')
-  }
-
-  private createListeners() {
-    this.messageBroker.subscribe('saveState', () => this.saveState())
-    this.messageBroker.subscribe('undo', () => this.undo())
-    this.messageBroker.subscribe('redo', () => this.redo())
-  }
-
-  clearStates() {
-    this.states = []
-    this.currentStateIndex = -1
-    this.initialized = false
-  }
-
-  async saveInitialState() {
-    await this.pullCanvas()
-    if (
-      !this.canvas.width ||
-      !this.canvas.height ||
-      !this.rgbCanvas.width ||
-      !this.rgbCanvas.height
-    ) {
-      // Canvas not ready yet, defer initialization
-      requestAnimationFrame(() => this.saveInitialState())
-      return
-    }
-
-    this.clearStates()
-    const maskState = this.ctx.getImageData(
-      0,
-      0,
-      this.canvas.width,
-      this.canvas.height
-    )
-    const rgbState = this.rgbCtx.getImageData(
-      0,
-      0,
-      this.rgbCanvas.width,
-      this.rgbCanvas.height
-    )
-    this.states.push({ mask: maskState, rgb: rgbState })
-    this.currentStateIndex = 0
-    this.initialized = true
-  }
-
-  saveState() {
-    // Ensure we have an initial state
-    if (!this.initialized || this.currentStateIndex === -1) {
-      this.saveInitialState()
-      return
-    }
-
-    this.states = this.states.slice(0, this.currentStateIndex + 1)
-    const maskState = this.ctx.getImageData(
-      0,
-      0,
-      this.canvas.width,
-      this.canvas.height
-    )
-    const rgbState = this.rgbCtx.getImageData(
-      0,
-      0,
-      this.rgbCanvas.width,
-      this.rgbCanvas.height
-    )
-    this.states.push({ mask: maskState, rgb: rgbState })
-    this.currentStateIndex++
-
-    if (this.states.length > this.maxStates) {
-      this.states.shift()
-      this.currentStateIndex--
-    }
-  }
-
-  undo() {
-    if (this.states.length > 1 && this.currentStateIndex > 0) {
-      this.currentStateIndex--
-      this.restoreState(this.states[this.currentStateIndex])
-    } else {
-      alert('No more undo states available')
-    }
-  }
-
-  redo() {
-    if (
-      this.states.length > 1 &&
-      this.currentStateIndex < this.states.length - 1
-    ) {
-      this.currentStateIndex++
-      this.restoreState(this.states[this.currentStateIndex])
-    } else {
-      alert('No more redo states available')
-    }
-  }
-
-  restoreState(state: { mask: ImageData; rgb: ImageData }) {
-    if (state && this.initialized) {
-      this.ctx.putImageData(state.mask, 0, 0)
-      this.rgbCtx.putImageData(state.rgb, 0, 0)
-    }
-  }
-}
-
-class PaintBucketTool {
-  maskEditor: MaskEditorDialog
-  messageBroker: MessageBroker
-
-  private canvas!: HTMLCanvasElement
-  private ctx!: CanvasRenderingContext2D
-  private width: number | null = null
-  private height: number | null = null
-  private imageData: ImageData | null = null
-  private data: Uint8ClampedArray | null = null
-  private tolerance: number = 5
-  private fillOpacity: number = 255 // Add opacity property (default 100%)
-
-  constructor(maskEditor: MaskEditorDialog) {
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-    this.createListeners()
-    this.addPullTopics()
-  }
-
-  initPaintBucketTool() {
-    this.pullCanvas()
-  }
-
-  private async pullCanvas() {
-    this.canvas = await this.messageBroker.pull('maskCanvas')
-    this.ctx = await this.messageBroker.pull('maskCtx')
-  }
-
-  private createListeners() {
-    this.messageBroker.subscribe(
-      'setPaintBucketTolerance',
-      (tolerance: number) => this.setTolerance(tolerance)
-    )
-
-    this.messageBroker.subscribe('paintBucketFill', (point: Point) =>
-      this.floodFill(point)
-    )
-
-    this.messageBroker.subscribe('invert', () => this.invertMask())
-
-    // Add new listener for opacity setting
-    this.messageBroker.subscribe('setFillOpacity', (opacity: number) =>
-      this.setFillOpacity(opacity)
-    )
-  }
-
-  private addPullTopics() {
-    this.messageBroker.createPullTopic(
-      'getTolerance',
-      async () => this.tolerance
-    )
-    // Add pull topic for fillOpacity
-    this.messageBroker.createPullTopic(
-      'getFillOpacity',
-      async () => (this.fillOpacity / 255) * 100
-    )
-  }
-
-  // Add method to set opacity
-  setFillOpacity(opacity: number): void {
-    // Convert from percentage (0-100) to alpha value (0-255)
-    this.fillOpacity = Math.floor((opacity / 100) * 255)
-  }
-
-  private getPixel(x: number, y: number): number {
-    return this.data![(y * this.width! + x) * 4 + 3]
-  }
-
-  private setPixel(
-    x: number,
-    y: number,
-    alpha: number,
-    color: { r: number; g: number; b: number }
-  ): void {
-    const index = (y * this.width! + x) * 4
-    this.data![index] = color.r // R
-    this.data![index + 1] = color.g // G
-    this.data![index + 2] = color.b // B
-    this.data![index + 3] = alpha // A
-  }
-
-  private shouldProcessPixel(
-    currentAlpha: number,
-    targetAlpha: number,
-    tolerance: number,
-    isFillMode: boolean
-  ): boolean {
-    if (currentAlpha === -1) return false
-
-    if (isFillMode) {
-      // Fill mode: process pixels that are empty/similar to target
-      return (
-        currentAlpha !== 255 &&
-        Math.abs(currentAlpha - targetAlpha) <= tolerance
-      )
-    } else {
-      // Erase mode: process pixels that are filled/similar to target
-      return (
-        currentAlpha === 255 ||
-        Math.abs(currentAlpha - targetAlpha) <= tolerance
-      )
-    }
-  }
-
-  private async floodFill(point: Point): Promise<void> {
-    let startX = Math.floor(point.x)
-    let startY = Math.floor(point.y)
-    this.width = this.canvas.width
-    this.height = this.canvas.height
-
-    if (
-      startX < 0 ||
-      startX >= this.width ||
-      startY < 0 ||
-      startY >= this.height
-    ) {
-      return
-    }
-
-    this.imageData = this.ctx.getImageData(0, 0, this.width, this.height)
-    this.data = this.imageData.data
-
-    const targetAlpha = this.getPixel(startX, startY)
-    const isFillMode = targetAlpha !== 255 // Determine mode based on clicked pixel
-
-    if (targetAlpha === -1) return
-
-    const maskColor = await this.messageBroker.pull('getMaskColor')
-    const stack: Array<[number, number]> = []
-    const visited = new Uint8Array(this.width * this.height)
-
-    if (
-      this.shouldProcessPixel(
-        targetAlpha,
-        targetAlpha,
-        this.tolerance,
-        isFillMode
-      )
-    ) {
-      stack.push([startX, startY])
-    }
-
-    while (stack.length > 0) {
-      const [x, y] = stack.pop()!
-      const visitedIndex = y * this.width + x
-
-      if (visited[visitedIndex]) continue
-
-      const currentAlpha = this.getPixel(x, y)
-      if (
-        !this.shouldProcessPixel(
-          currentAlpha,
-          targetAlpha,
-          this.tolerance,
-          isFillMode
-        )
-      ) {
-        continue
-      }
-
-      visited[visitedIndex] = 1
-      // Set alpha to fillOpacity for fill mode, 0 for erase mode
-      this.setPixel(x, y, isFillMode ? this.fillOpacity : 0, maskColor)
-
-      // Check neighbors
-      const checkNeighbor = (nx: number, ny: number) => {
-        if (nx < 0 || nx >= this.width! || ny < 0 || ny >= this.height!) return
-        if (!visited[ny * this.width! + nx]) {
-          const alpha = this.getPixel(nx, ny)
-          if (
-            this.shouldProcessPixel(
-              alpha,
-              targetAlpha,
-              this.tolerance,
-              isFillMode
-            )
-          ) {
-            stack.push([nx, ny])
-          }
-        }
-      }
-
-      checkNeighbor(x - 1, y) // Left
-      checkNeighbor(x + 1, y) // Right
-      checkNeighbor(x, y - 1) // Up
-      checkNeighbor(x, y + 1) // Down
-    }
-
-    this.ctx.putImageData(this.imageData, 0, 0)
-    this.imageData = null
-    this.data = null
-  }
-
-  setTolerance(tolerance: number): void {
-    this.tolerance = tolerance
-  }
-
-  getTolerance(): number {
-    return this.tolerance
-  }
-
-  //invert mask
-
-  private invertMask() {
-    const imageData = this.ctx.getImageData(
-      0,
-      0,
-      this.canvas.width,
-      this.canvas.height
-    )
-    const data = imageData.data
-
-    // Find first non-transparent pixel to get mask color
-    let maskR = 0,
-      maskG = 0,
-      maskB = 0
-    for (let i = 0; i < data.length; i += 4) {
-      if (data[i + 3] > 0) {
-        maskR = data[i]
-        maskG = data[i + 1]
-        maskB = data[i + 2]
-        break
-      }
-    }
-
-    // Process each pixel
-    for (let i = 0; i < data.length; i += 4) {
-      const alpha = data[i + 3]
-      // Invert alpha channel (0 becomes 255, 255 becomes 0)
-      data[i + 3] = 255 - alpha
-
-      // If this was originally transparent (now opaque), fill with mask color
-      if (alpha === 0) {
-        data[i] = maskR
-        data[i + 1] = maskG
-        data[i + 2] = maskB
-      }
-    }
-
-    this.ctx.putImageData(imageData, 0, 0)
-    this.messageBroker.publish('saveState')
-  }
-}
-
-class ColorSelectTool {
-  // @ts-expect-error unused variable
-  private maskEditor!: MaskEditorDialog
-  private messageBroker!: MessageBroker
-  private width: number | null = null
-  private height: number | null = null
-  private canvas!: HTMLCanvasElement
-  private maskCTX!: CanvasRenderingContext2D
-  private imageCTX!: CanvasRenderingContext2D
-  private maskData: Uint8ClampedArray | null = null
-  private imageData: Uint8ClampedArray | null = null
-  private tolerance: number = 20
-  private livePreview: boolean = false
-  private lastPoint: Point | null = null
-  private colorComparisonMethod: ColorComparisonMethod =
-    ColorComparisonMethod.Simple
-  private applyWholeImage: boolean = false
-  private maskBoundry: boolean = false
-  private maskTolerance: number = 0
-  private selectOpacity: number = 255 // Add opacity property (default 100%)
-
-  constructor(maskEditor: MaskEditorDialog) {
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-    this.createListeners()
-    this.addPullTopics()
-  }
-
-  async initColorSelectTool() {
-    await this.pullCanvas()
-  }
-
-  private async pullCanvas() {
-    this.canvas = await this.messageBroker.pull('imgCanvas')
-    this.maskCTX = await this.messageBroker.pull('maskCtx')
-    this.imageCTX = await this.messageBroker.pull('imageCtx')
-  }
-
-  private createListeners() {
-    this.messageBroker.subscribe('colorSelectFill', (point: Point) =>
-      this.fillColorSelection(point)
-    )
-    this.messageBroker.subscribe(
-      'setColorSelectTolerance',
-      (tolerance: number) => this.setTolerance(tolerance)
-    )
-    this.messageBroker.subscribe('setLivePreview', (livePreview: boolean) =>
-      this.setLivePreview(livePreview)
-    )
-    this.messageBroker.subscribe(
-      'setColorComparisonMethod',
-      (method: ColorComparisonMethod) => this.setComparisonMethod(method)
-    )
-
-    this.messageBroker.subscribe('clearLastPoint', () => this.clearLastPoint())
-
-    this.messageBroker.subscribe('setWholeImage', (applyWholeImage: boolean) =>
-      this.setApplyWholeImage(applyWholeImage)
-    )
-
-    this.messageBroker.subscribe('setMaskBoundary', (maskBoundry: boolean) =>
-      this.setMaskBoundary(maskBoundry)
-    )
-
-    this.messageBroker.subscribe('setMaskTolerance', (maskTolerance: number) =>
-      this.setMaskTolerance(maskTolerance)
-    )
-
-    // Add new listener for opacity setting
-    this.messageBroker.subscribe('setSelectionOpacity', (opacity: number) =>
-      this.setSelectOpacity(opacity)
-    )
-  }
-
-  private async addPullTopics() {
-    this.messageBroker.createPullTopic(
-      'getLivePreview',
-      async () => this.livePreview
-    )
-  }
-
-  private getPixel(x: number, y: number): { r: number; g: number; b: number } {
-    const index = (y * this.width! + x) * 4
-    return {
-      r: this.imageData![index],
-      g: this.imageData![index + 1],
-      b: this.imageData![index + 2]
-    }
-  }
-
-  private getMaskAlpha(x: number, y: number): number {
-    return this.maskData![(y * this.width! + x) * 4 + 3]
-  }
-
-  private isPixelInRange(
-    pixel: { r: number; g: number; b: number },
-    target: { r: number; g: number; b: number }
-  ): boolean {
-    switch (this.colorComparisonMethod) {
-      case ColorComparisonMethod.Simple:
-        return this.isPixelInRangeSimple(pixel, target)
-      case ColorComparisonMethod.HSL:
-        return this.isPixelInRangeHSL(pixel, target)
-      case ColorComparisonMethod.LAB:
-        return this.isPixelInRangeLab(pixel, target)
-      default:
-        return this.isPixelInRangeSimple(pixel, target)
-    }
-  }
-
-  private isPixelInRangeSimple(
-    pixel: { r: number; g: number; b: number },
-    target: { r: number; g: number; b: number }
-  ): boolean {
-    //calculate the euclidean distance between the two colors
-    const distance = Math.sqrt(
-      Math.pow(pixel.r - target.r, 2) +
-        Math.pow(pixel.g - target.g, 2) +
-        Math.pow(pixel.b - target.b, 2)
-    )
-    return distance <= this.tolerance
-  }
-
-  private isPixelInRangeHSL(
-    pixel: { r: number; g: number; b: number },
-    target: { r: number; g: number; b: number }
-  ): boolean {
-    // Convert RGB to HSL
-    const pixelHSL = this.rgbToHSL(pixel.r, pixel.g, pixel.b)
-    const targetHSL = this.rgbToHSL(target.r, target.g, target.b)
-
-    // Compare mainly hue and saturation, be more lenient with lightness
-    const hueDiff = Math.abs(pixelHSL.h - targetHSL.h)
-    const satDiff = Math.abs(pixelHSL.s - targetHSL.s)
-    const lightDiff = Math.abs(pixelHSL.l - targetHSL.l)
-
-    const distance = Math.sqrt(
-      Math.pow((hueDiff / 360) * 255, 2) +
-        Math.pow((satDiff / 100) * 255, 2) +
-        Math.pow((lightDiff / 100) * 255, 2)
-    )
-    return distance <= this.tolerance
-  }
-
-  private rgbToHSL(
-    r: number,
-    g: number,
-    b: number
-  ): { h: number; s: number; l: number } {
-    r /= 255
-    g /= 255
-    b /= 255
-
-    const max = Math.max(r, g, b)
-    const min = Math.min(r, g, b)
-    let h = 0,
-      s = 0,
-      l = (max + min) / 2
-
-    if (max !== min) {
-      const d = max - min
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0)
-          break
-        case g:
-          h = (b - r) / d + 2
-          break
-        case b:
-          h = (r - g) / d + 4
-          break
-      }
-      h /= 6
-    }
-
-    return {
-      h: h * 360,
-      s: s * 100,
-      l: l * 100
-    }
-  }
-
-  private isPixelInRangeLab(
-    pixel: { r: number; g: number; b: number },
-    target: { r: number; g: number; b: number }
-  ): boolean {
-    const pixelLab = this.rgbToLab(pixel)
-    const targetLab = this.rgbToLab(target)
-
-    // Calculate Delta E (CIE76 formula)
-    const deltaE = Math.sqrt(
-      Math.pow(pixelLab.l - targetLab.l, 2) +
-        Math.pow(pixelLab.a - targetLab.a, 2) +
-        Math.pow(pixelLab.b - targetLab.b, 2)
-    )
-
-    const normalizedDeltaE = (deltaE / 100) * 255
-    return normalizedDeltaE <= this.tolerance
-  }
-
-  private rgbToLab(rgb: { r: number; g: number; b: number }): {
-    l: number
-    a: number
-    b: number
-  } {
-    // First convert RGB to XYZ
-    let r = rgb.r / 255
-    let g = rgb.g / 255
-    let b = rgb.b / 255
-
-    r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92
-    g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92
-    b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92
-
-    r *= 100
-    g *= 100
-    b *= 100
-
-    const x = r * 0.4124 + g * 0.3576 + b * 0.1805
-    const y = r * 0.2126 + g * 0.7152 + b * 0.0722
-    const z = r * 0.0193 + g * 0.1192 + b * 0.9505
-
-    // Then XYZ to Lab
-    const xn = 95.047
-    const yn = 100.0
-    const zn = 108.883
-
-    const xyz = [x / xn, y / yn, z / zn]
-    for (let i = 0; i < xyz.length; i++) {
-      xyz[i] =
-        xyz[i] > 0.008856 ? Math.pow(xyz[i], 1 / 3) : 7.787 * xyz[i] + 16 / 116
-    }
-
-    return {
-      l: 116 * xyz[1] - 16,
-      a: 500 * (xyz[0] - xyz[1]),
-      b: 200 * (xyz[1] - xyz[2])
-    }
-  }
-
-  private setPixel(
-    x: number,
-    y: number,
-    alpha: number,
-    color: { r: number; g: number; b: number }
-  ): void {
-    const index = (y * this.width! + x) * 4
-    this.maskData![index] = color.r // R
-    this.maskData![index + 1] = color.g // G
-    this.maskData![index + 2] = color.b // B
-    this.maskData![index + 3] = alpha // A
-  }
-
-  async fillColorSelection(point: Point) {
-    this.width = this.canvas.width
-    this.height = this.canvas.height
-    this.lastPoint = point
-
-    // Get image data
-    const maskData = this.maskCTX.getImageData(0, 0, this.width, this.height)
-    this.maskData = maskData.data
-    this.imageData = this.imageCTX.getImageData(
-      0,
-      0,
-      this.width,
-      this.height
-    ).data
-
-    if (this.applyWholeImage) {
-      // Process entire image
-      const targetPixel = this.getPixel(
-        Math.floor(point.x),
-        Math.floor(point.y)
-      )
-      const maskColor = await this.messageBroker.pull('getMaskColor')
-
-      // Use TypedArrays for better performance
-      const width = this.width!
-      const height = this.height!
-
-      // Process in chunks for better performance
-      const CHUNK_SIZE = 10000
-      for (let i = 0; i < width * height; i += CHUNK_SIZE) {
-        const endIndex = Math.min(i + CHUNK_SIZE, width * height)
-        for (let pixelIndex = i; pixelIndex < endIndex; pixelIndex++) {
-          const x = pixelIndex % width
-          const y = Math.floor(pixelIndex / width)
-          if (this.isPixelInRange(this.getPixel(x, y), targetPixel)) {
-            this.setPixel(x, y, this.selectOpacity, maskColor) // Use selectOpacity instead of 255
-          }
-        }
-        // Allow UI updates between chunks
-        await new Promise((resolve) => setTimeout(resolve, 0))
-      }
-    } else {
-      // Original flood fill logic
-      let startX = Math.floor(point.x)
-      let startY = Math.floor(point.y)
-
-      if (
-        startX < 0 ||
-        startX >= this.width ||
-        startY < 0 ||
-        startY >= this.height
-      ) {
-        return
-      }
-
-      const pixel = this.getPixel(startX, startY)
-
-      const stack: Array<[number, number]> = []
-      const visited = new Uint8Array(this.width * this.height)
-
-      stack.push([startX, startY])
-      const maskColor = await this.messageBroker.pull('getMaskColor')
-
-      while (stack.length > 0) {
-        const [x, y] = stack.pop()!
-        const visitedIndex = y * this.width + x
-
-        if (
-          visited[visitedIndex] ||
-          !this.isPixelInRange(this.getPixel(x, y), pixel)
-        ) {
-          continue
-        }
-
-        visited[visitedIndex] = 1
-        this.setPixel(x, y, this.selectOpacity, maskColor) // Use selectOpacity instead of 255
-
-        // Inline direction checks for better performance
-        if (
-          x > 0 &&
-          !visited[y * this.width + (x - 1)] &&
-          this.isPixelInRange(this.getPixel(x - 1, y), pixel)
-        ) {
-          if (
-            !this.maskBoundry ||
-            255 - this.getMaskAlpha(x - 1, y) > this.maskTolerance
-          ) {
-            stack.push([x - 1, y])
-          }
-        }
-        if (
-          x < this.width - 1 &&
-          !visited[y * this.width + (x + 1)] &&
-          this.isPixelInRange(this.getPixel(x + 1, y), pixel)
-        ) {
-          if (
-            !this.maskBoundry ||
-            255 - this.getMaskAlpha(x + 1, y) > this.maskTolerance
-          ) {
-            stack.push([x + 1, y])
-          }
-        }
-        if (
-          y > 0 &&
-          !visited[(y - 1) * this.width + x] &&
-          this.isPixelInRange(this.getPixel(x, y - 1), pixel)
-        ) {
-          if (
-            !this.maskBoundry ||
-            255 - this.getMaskAlpha(x, y - 1) > this.maskTolerance
-          ) {
-            stack.push([x, y - 1])
-          }
-        }
-        if (
-          y < this.height - 1 &&
-          !visited[(y + 1) * this.width + x] &&
-          this.isPixelInRange(this.getPixel(x, y + 1), pixel)
-        ) {
-          if (
-            !this.maskBoundry ||
-            255 - this.getMaskAlpha(x, y + 1) > this.maskTolerance
-          ) {
-            stack.push([x, y + 1])
-          }
-        }
-      }
-    }
-
-    this.maskCTX.putImageData(maskData, 0, 0)
-    this.messageBroker.publish('saveState')
-    this.maskData = null
-    this.imageData = null
-  }
-  setTolerance(tolerance: number): void {
-    this.tolerance = tolerance
-
-    if (this.lastPoint && this.livePreview) {
-      this.messageBroker.publish('undo')
-      this.fillColorSelection(this.lastPoint)
-    }
-  }
-
-  setLivePreview(livePreview: boolean): void {
-    this.livePreview = livePreview
-  }
-
-  setComparisonMethod(method: ColorComparisonMethod): void {
-    this.colorComparisonMethod = method
-
-    if (this.lastPoint && this.livePreview) {
-      this.messageBroker.publish('undo')
-      this.fillColorSelection(this.lastPoint)
-    }
-  }
-
-  clearLastPoint() {
-    this.lastPoint = null
-  }
-
-  setApplyWholeImage(applyWholeImage: boolean): void {
-    this.applyWholeImage = applyWholeImage
-  }
-
-  setMaskBoundary(maskBoundry: boolean): void {
-    this.maskBoundry = maskBoundry
-  }
-
-  setMaskTolerance(maskTolerance: number): void {
-    this.maskTolerance = maskTolerance
-  }
-
-  // Add method to set opacity
-  setSelectOpacity(opacity: number): void {
-    // Convert from percentage (0-100) to alpha value (0-255)
-    this.selectOpacity = Math.floor((opacity / 100) * 255)
-
-    // Update preview if applicable
-    if (this.lastPoint && this.livePreview) {
-      this.messageBroker.publish('undo')
-      this.fillColorSelection(this.lastPoint)
-    }
-  }
-}
-
-class BrushTool {
-  brushSettings: Brush //this saves the current brush settings
-  maskBlendMode: MaskBlendMode
-
-  isDrawing: boolean = false
-  isDrawingLine: boolean = false
-  lineStartPoint: Point | null = null
-  smoothingPrecision: number = 10
-  smoothingCordsArray: Point[] = []
-  smoothingLastDrawTime!: Date
-  maskCtx: CanvasRenderingContext2D | null = null
-  rgbCtx: CanvasRenderingContext2D | null = null
-  initialDraw: boolean = true
-
-  private static brushTextureCache = new QuickLRU<string, HTMLCanvasElement>({
-    maxSize: 8 // Reasonable limit for brush texture variations?
-  })
-
-  brushStrokeCanvas: HTMLCanvasElement | null = null
-  brushStrokeCtx: CanvasRenderingContext2D | null = null
-
-  private static readonly SMOOTHING_MAX_STEPS = 30
-  private static readonly SMOOTHING_MIN_STEPS = 2
-
-  //brush adjustment
-  isBrushAdjusting: boolean = false
-  brushPreviewGradient: HTMLElement | null = null
-  initialPoint: Point | null = null
-  useDominantAxis: boolean = false
-  brushAdjustmentSpeed: number = 1.0
-
-  maskEditor: MaskEditorDialog
-  messageBroker: MessageBroker
-
-  private rgbColor: string = '#FF0000' // Default color
-  private activeLayer: ImageLayer = 'mask'
-
-  constructor(maskEditor: MaskEditorDialog) {
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-    this.createListeners()
-    this.addPullTopics()
-
-    this.useDominantAxis = app.extensionManager.setting.get(
-      'Comfy.MaskEditor.UseDominantAxis'
-    )
-    this.brushAdjustmentSpeed = app.extensionManager.setting.get(
-      'Comfy.MaskEditor.BrushAdjustmentSpeed'
-    )
-
-    const cachedBrushSettings = loadBrushFromCache('maskeditor_brush_settings')
-    if (cachedBrushSettings) {
-      this.brushSettings = cachedBrushSettings
-    } else {
-      this.brushSettings = {
-        type: BrushShape.Arc,
-        size: 10,
-        opacity: 0.7,
-        hardness: 1,
-        smoothingPrecision: 10
-      }
-    }
-
-    this.maskBlendMode = MaskBlendMode.Black
-  }
-
-  private createListeners() {
-    //setters
-    this.messageBroker.subscribe('setBrushSize', (size: number) =>
-      this.setBrushSize(size)
-    )
-    this.messageBroker.subscribe('setBrushOpacity', (opacity: number) =>
-      this.setBrushOpacity(opacity)
-    )
-    this.messageBroker.subscribe('setBrushHardness', (hardness: number) =>
-      this.setBrushHardness(hardness)
-    )
-    this.messageBroker.subscribe('setBrushShape', (type: BrushShape) =>
-      this.setBrushType(type)
-    )
-    this.messageBroker.subscribe(
-      'setActiveLayer',
-      (layer: ImageLayer) => (this.activeLayer = layer)
-    )
-    this.messageBroker.subscribe(
-      'setBrushSmoothingPrecision',
-      (precision: number) => this.setBrushSmoothingPrecision(precision)
-    )
-    this.messageBroker.subscribe('setRGBColor', (color: string) => {
-      this.rgbColor = color
-    })
-    //brush adjustment
-    this.messageBroker.subscribe(
-      'brushAdjustmentStart',
-      (event: PointerEvent) => this.startBrushAdjustment(event)
-    )
-    this.messageBroker.subscribe('brushAdjustment', (event: PointerEvent) =>
-      this.handleBrushAdjustment(event)
-    )
-    //drawing
-    this.messageBroker.subscribe('drawStart', (event: PointerEvent) =>
-      this.startDrawing(event)
-    )
-    this.messageBroker.subscribe('draw', (event: PointerEvent) =>
-      this.handleDrawing(event)
-    )
-    this.messageBroker.subscribe('drawEnd', (event: PointerEvent) =>
-      this.drawEnd(event)
-    )
-  }
-
-  private addPullTopics() {
-    this.messageBroker.createPullTopic(
-      'brushSize',
-      async () => this.brushSettings.size
-    )
-    this.messageBroker.createPullTopic(
-      'brushOpacity',
-      async () => this.brushSettings.opacity
-    )
-    this.messageBroker.createPullTopic(
-      'brushHardness',
-      async () => this.brushSettings.hardness
-    )
-    this.messageBroker.createPullTopic(
-      'brushType',
-      async () => this.brushSettings.type
-    )
-    this.messageBroker.createPullTopic(
-      'brushSmoothingPrecision',
-      async () => this.brushSettings.smoothingPrecision
-    )
-    this.messageBroker.createPullTopic(
-      'maskBlendMode',
-      async () => this.maskBlendMode
-    )
-    this.messageBroker.createPullTopic(
-      'brushSettings',
-      async () => this.brushSettings
-    )
-  }
-
-  private async createBrushStrokeCanvas() {
-    if (this.brushStrokeCanvas !== null) {
-      return
-    }
-
-    const maskCanvas = await this.messageBroker.pull('maskCanvas')
-    const canvas = document.createElement('canvas')
-    canvas.width = maskCanvas.width
-    canvas.height = maskCanvas.height
-
-    this.brushStrokeCanvas = canvas
-    this.brushStrokeCtx = canvas.getContext('2d')!
-  }
-
-  private async startDrawing(event: PointerEvent) {
-    this.isDrawing = true
-    let compositionOp: CompositionOperation
-    let currentTool = await this.messageBroker.pull('currentTool')
-    let coords = { x: event.offsetX, y: event.offsetY }
-    let coords_canvas = await this.messageBroker.pull('screenToCanvas', coords)
-    await this.createBrushStrokeCanvas()
-
-    //set drawing mode
-    if (currentTool === Tools.Eraser || event.buttons == 2) {
-      compositionOp = CompositionOperation.DestinationOut //eraser
-    } else {
-      compositionOp = CompositionOperation.SourceOver //pen
-    }
-
-    if (event.shiftKey && this.lineStartPoint) {
-      this.isDrawingLine = true
-      this.drawLine(this.lineStartPoint, coords_canvas, compositionOp)
-    } else {
-      this.isDrawingLine = false
-      this.init_shape(compositionOp)
-      this.draw_shape(coords_canvas)
-    }
-    this.lineStartPoint = coords_canvas
-    this.smoothingCordsArray = [coords_canvas] //used to smooth the drawing line
-    this.smoothingLastDrawTime = new Date()
-  }
-
-  private async handleDrawing(event: PointerEvent) {
-    var diff = performance.now() - this.smoothingLastDrawTime.getTime()
-    let coords = { x: event.offsetX, y: event.offsetY }
-    let coords_canvas = await this.messageBroker.pull('screenToCanvas', coords)
-    let currentTool = await this.messageBroker.pull('currentTool')
-
-    if (diff > 20 && !this.isDrawing)
-      requestAnimationFrame(() => {
-        this.init_shape(CompositionOperation.SourceOver)
-        this.draw_shape(coords_canvas)
-        this.smoothingCordsArray.push(coords_canvas)
-      })
-    else
-      requestAnimationFrame(() => {
-        if (currentTool === Tools.Eraser || event.buttons == 2) {
-          this.init_shape(CompositionOperation.DestinationOut)
-        } else {
-          this.init_shape(CompositionOperation.SourceOver)
-        }
-
-        //use drawWithSmoothing for better performance or change step in drawWithBetterSmoothing
-        this.drawWithBetterSmoothing(coords_canvas)
-      })
-
-    this.smoothingLastDrawTime = new Date()
-  }
-
-  private async drawEnd(event: PointerEvent) {
-    const coords = { x: event.offsetX, y: event.offsetY }
-    const coords_canvas = await this.messageBroker.pull(
-      'screenToCanvas',
-      coords
-    )
-
-    if (this.isDrawing) {
-      this.isDrawing = false
-      this.messageBroker.publish('saveState')
-      this.lineStartPoint = coords_canvas
-      this.initialDraw = true
-    }
-  }
-
-  private clampSmoothingPrecision(value: number): number {
-    return Math.min(Math.max(value, 1), 100)
-  }
-
-  private drawWithBetterSmoothing(point: Point) {
-    // Add current point to the smoothing array
-    if (!this.smoothingCordsArray) {
-      this.smoothingCordsArray = []
-    }
-    const opacityConstant = 1 / (1 + Math.exp(3))
-    const interpolatedOpacity =
-      1 / (1 + Math.exp(-6 * (this.brushSettings.opacity - 0.5))) -
-      opacityConstant
-
-    this.smoothingCordsArray.push(point)
-
-    // Keep a moving window of points for the spline
-    const POINTS_NR = 5
-    if (this.smoothingCordsArray.length < POINTS_NR) {
-      return
-    }
-
-    // Calculate total length more efficiently
-    let totalLength = 0
-    const points = this.smoothingCordsArray
-    const len = points.length - 1
-
-    // Use local variables for better performance
-    let dx, dy
-    for (let i = 0; i < len; i++) {
-      dx = points[i + 1].x - points[i].x
-      dy = points[i + 1].y - points[i].y
-      totalLength += Math.sqrt(dx * dx + dy * dy)
-    }
-
-    const maxSteps = BrushTool.SMOOTHING_MAX_STEPS
-    const minSteps = BrushTool.SMOOTHING_MIN_STEPS
-
-    const smoothing = this.clampSmoothingPrecision(
-      this.brushSettings.smoothingPrecision
-    )
-    const normalizedSmoothing = (smoothing - 1) / 99 // Convert to 0-1 range
-
-    // Optionality to use exponential curve
-    const stepNr = Math.round(
-      Math.round(minSteps + (maxSteps - minSteps) * normalizedSmoothing)
-    )
-
-    // Calculate step distance capped by brush size
-    const distanceBetweenPoints = totalLength / stepNr
-
-    let interpolatedPoints = points
-
-    if (stepNr > 0) {
-      //this calculation needs to be improved
-      interpolatedPoints = this.generateEquidistantPoints(
-        this.smoothingCordsArray,
-        distanceBetweenPoints // Distance between interpolated points
-      )
-    }
-
-    if (!this.initialDraw) {
-      // Remove the first 3 points from the array to avoid drawing the same points twice
-      const spliceIndex = interpolatedPoints.findIndex(
-        (point) =>
-          point.x === this.smoothingCordsArray[2].x &&
-          point.y === this.smoothingCordsArray[2].y
-      )
-
-      if (spliceIndex !== -1) {
-        interpolatedPoints = interpolatedPoints.slice(spliceIndex + 1)
-      }
-    }
-
-    // Draw all interpolated points
-    for (const point of interpolatedPoints) {
-      this.draw_shape(point, interpolatedOpacity)
-    }
-
-    if (!this.initialDraw) {
-      // initially draw on all 5 points, then remove the first 3 points to go into 2 new, 3 old points cycle
-      this.smoothingCordsArray = this.smoothingCordsArray.slice(2)
-    } else {
-      this.initialDraw = false
-    }
-  }
-
-  private async drawLine(
-    p1: Point,
-    p2: Point,
-    compositionOp: CompositionOperation
-  ) {
-    const brush_size = await this.messageBroker.pull('brushSize')
-    const distance = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2)
-    const steps = Math.ceil(
-      distance / ((brush_size / this.brushSettings.smoothingPrecision) * 4)
-    ) // Adjust for smoother lines
-    const interpolatedOpacity =
-      1 / (1 + Math.exp(-6 * (this.brushSettings.opacity - 0.5))) -
-      1 / (1 + Math.exp(3))
-    this.init_shape(compositionOp)
-
-    for (let i = 0; i <= steps; i++) {
-      const t = i / steps
-      const x = p1.x + (p2.x - p1.x) * t
-      const y = p1.y + (p2.y - p1.y) * t
-      const point = { x: x, y: y }
-      this.draw_shape(point, interpolatedOpacity)
-    }
-  }
-
-  //brush adjustment
-
-  private async startBrushAdjustment(event: PointerEvent) {
-    event.preventDefault()
-    const coords = { x: event.offsetX, y: event.offsetY }
-    let coords_canvas = await this.messageBroker.pull('screenToCanvas', coords)
-    this.messageBroker.publish('setBrushPreviewGradientVisibility', true)
-    this.initialPoint = coords_canvas
-    this.isBrushAdjusting = true
-    return
-  }
-
-  private async handleBrushAdjustment(event: PointerEvent) {
-    const coords = { x: event.offsetX, y: event.offsetY }
-    const brushDeadZone = 5
-    let coords_canvas = await this.messageBroker.pull('screenToCanvas', coords)
-
-    const delta_x = coords_canvas.x - this.initialPoint!.x
-    const delta_y = coords_canvas.y - this.initialPoint!.y
-
-    const effectiveDeltaX = Math.abs(delta_x) < brushDeadZone ? 0 : delta_x
-    const effectiveDeltaY = Math.abs(delta_y) < brushDeadZone ? 0 : delta_y
-
-    // New dominant axis logic
-    let finalDeltaX = effectiveDeltaX
-    let finalDeltaY = effectiveDeltaY
-
-    console.log(this.useDominantAxis)
-
-    if (this.useDominantAxis) {
-      // New setting flag
-      const ratio = Math.abs(effectiveDeltaX) / Math.abs(effectiveDeltaY)
-      const threshold = 2.0 // Configurable threshold
-
-      if (ratio > threshold) {
-        finalDeltaY = 0 // X is dominant
-      } else if (ratio < 1 / threshold) {
-        finalDeltaX = 0 // Y is dominant
-      }
-    }
-
-    const cappedDeltaX = Math.max(-100, Math.min(100, finalDeltaX))
-    const cappedDeltaY = Math.max(-100, Math.min(100, finalDeltaY))
-
-    // Rest of the function remains the same
-    const newSize = Math.max(
-      1,
-      Math.min(
-        100,
-        this.brushSettings.size! +
-          (cappedDeltaX / 35) * this.brushAdjustmentSpeed
-      )
-    )
-
-    const newHardness = Math.max(
-      0,
-      Math.min(
-        1,
-        this.brushSettings!.hardness -
-          (cappedDeltaY / 4000) * this.brushAdjustmentSpeed
-      )
-    )
-
-    this.brushSettings.size = newSize
-    this.brushSettings.hardness = newHardness
-
-    this.messageBroker.publish('updateBrushPreview')
-  }
-
-  //helper functions
-
-  private async draw_shape(point: Point, overrideOpacity?: number) {
-    const brushSettings: Brush = this.brushSettings
-    const maskCtx = this.maskCtx || (await this.messageBroker.pull('maskCtx'))
-    const rgbCtx = this.rgbCtx || (await this.messageBroker.pull('rgbCtx'))
-    const brushType = await this.messageBroker.pull('brushType')
-    const maskColor = await this.messageBroker.pull('getMaskColor')
-    const size = brushSettings.size
-    const brushSettingsSliderOpacity = brushSettings.opacity
-    const opacity =
-      overrideOpacity == undefined
-        ? brushSettingsSliderOpacity
-        : overrideOpacity
-    const hardness = brushSettings.hardness
-    const x = point.x
-    const y = point.y
-
-    const brushRadius = size
-    const isErasing = maskCtx.globalCompositeOperation === 'destination-out'
-    const currentTool = await this.messageBroker.pull('currentTool')
-
-    // Helper function to get or create cached brush texture
-    const getCachedBrushTexture = (
-      radius: number,
-      hardness: number,
-      color: string,
-      opacity: number
-    ): HTMLCanvasElement => {
-      const cacheKey = `${radius}_${hardness}_${color}_${opacity}`
-
-      if (BrushTool.brushTextureCache.has(cacheKey)) {
-        return BrushTool.brushTextureCache.get(cacheKey)!
-      }
-
-      const tempCanvas = document.createElement('canvas')
-      const tempCtx = tempCanvas.getContext('2d')!
-      const size = radius * 2
-      tempCanvas.width = size
-      tempCanvas.height = size
-
-      const centerX = size / 2
-      const centerY = size / 2
-      const hardRadius = radius * hardness
-
-      const imageData = tempCtx.createImageData(size, size)
-      const data = imageData.data
-      const { r, g, b } = parseToRgb(color)
-
-      // Pre-calculate values to avoid repeated computations
-      const fadeRange = radius - hardRadius
-
-      for (let y = 0; y < size; y++) {
-        const dy = y - centerY
-        for (let x = 0; x < size; x++) {
-          const dx = x - centerX
-          const index = (y * size + x) * 4
-
-          // Calculate square distance (Chebyshev distance)
-          const distFromEdge = Math.max(Math.abs(dx), Math.abs(dy))
-
-          let pixelOpacity = 0
-          if (distFromEdge <= hardRadius) {
-            pixelOpacity = opacity
-          } else if (distFromEdge <= radius) {
-            const fadeProgress = (distFromEdge - hardRadius) / fadeRange
-            pixelOpacity = opacity * (1 - fadeProgress)
-          }
-
-          data[index] = r
-          data[index + 1] = g
-          data[index + 2] = b
-          data[index + 3] = pixelOpacity * 255
-        }
-      }
-
-      tempCtx.putImageData(imageData, 0, 0)
-
-      // Cache the texture
-      BrushTool.brushTextureCache.set(cacheKey, tempCanvas)
-
-      return tempCanvas
-    }
-
-    // RGB brush logic
-    if (
-      this.activeLayer === 'rgb' &&
-      (currentTool === Tools.Eraser || currentTool === Tools.PaintPen)
-    ) {
-      const rgbaColor = this.formatRgba(this.rgbColor, opacity)
-
-      if (brushType === BrushShape.Rect && hardness < 1) {
-        const brushTexture = getCachedBrushTexture(
-          brushRadius,
-          hardness,
-          rgbaColor,
-          opacity
-        )
-        rgbCtx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
-        return
-      }
-
-      // For max hardness, use solid fill to avoid anti-aliasing
-      if (hardness === 1) {
-        rgbCtx.fillStyle = rgbaColor
-        rgbCtx.beginPath()
-        if (brushType === BrushShape.Rect) {
-          rgbCtx.rect(
-            x - brushRadius,
-            y - brushRadius,
-            brushRadius * 2,
-            brushRadius * 2
-          )
-        } else {
-          rgbCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
-        }
-        rgbCtx.fill()
-        return
-      }
-
-      // For soft brushes, use gradient
-      let gradient = rgbCtx.createRadialGradient(x, y, 0, x, y, brushRadius)
-      gradient.addColorStop(0, rgbaColor)
-      gradient.addColorStop(
-        hardness,
-        this.formatRgba(this.rgbColor, opacity * 0.5)
-      )
-      gradient.addColorStop(1, this.formatRgba(this.rgbColor, 0))
-
-      rgbCtx.fillStyle = gradient
-      rgbCtx.beginPath()
-      if (brushType === BrushShape.Rect) {
-        rgbCtx.rect(
-          x - brushRadius,
-          y - brushRadius,
-          brushRadius * 2,
-          brushRadius * 2
-        )
-      } else {
-        rgbCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
-      }
-      rgbCtx.fill()
-      return
-    }
-
-    // Mask brush logic
-    if (brushType === BrushShape.Rect && hardness < 1) {
-      const baseColor = isErasing
-        ? `rgba(255, 255, 255, ${opacity})`
-        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
-
-      const brushTexture = getCachedBrushTexture(
-        brushRadius,
-        hardness,
-        baseColor,
-        opacity
-      )
-      maskCtx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
-      return
-    }
-
-    // For max hardness, use solid fill to avoid anti-aliasing
-    if (hardness === 1) {
-      const solidColor = isErasing
-        ? `rgba(255, 255, 255, ${opacity})`
-        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
-
-      maskCtx.fillStyle = solidColor
-      maskCtx.beginPath()
-      if (brushType === BrushShape.Rect) {
-        maskCtx.rect(
-          x - brushRadius,
-          y - brushRadius,
-          brushRadius * 2,
-          brushRadius * 2
-        )
-      } else {
-        maskCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
-      }
-      maskCtx.fill()
-      return
-    }
-
-    // For soft brushes, use gradient
-    let gradient = maskCtx.createRadialGradient(x, y, 0, x, y, brushRadius)
-
-    if (isErasing) {
-      gradient.addColorStop(0, `rgba(255, 255, 255, ${opacity})`)
-      gradient.addColorStop(hardness, `rgba(255, 255, 255, ${opacity * 0.5})`)
-      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`)
-    } else {
-      gradient.addColorStop(
-        0,
-        `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
-      )
-      gradient.addColorStop(
-        hardness,
-        `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity * 0.5})`
-      )
-      gradient.addColorStop(
-        1,
-        `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, 0)`
-      )
-    }
-
-    maskCtx.fillStyle = gradient
-    maskCtx.beginPath()
-    if (brushType === BrushShape.Rect) {
-      maskCtx.rect(
-        x - brushRadius,
-        y - brushRadius,
-        brushRadius * 2,
-        brushRadius * 2
-      )
-    } else {
-      maskCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
-    }
-    maskCtx.fill()
-  }
-
-  private formatRgba(hex: string, alpha: number): string {
-    const { r, g, b } = hexToRgb(hex)
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`
-  }
-
-  private async init_shape(compositionOperation: CompositionOperation) {
-    const maskBlendMode = await this.messageBroker.pull('maskBlendMode')
-    const maskCtx = this.maskCtx || (await this.messageBroker.pull('maskCtx'))
-    const rgbCtx = this.rgbCtx || (await this.messageBroker.pull('rgbCtx'))
-
-    maskCtx.beginPath()
-    rgbCtx.beginPath()
-
-    // For both contexts, set the composite operation based on the passed parameter
-    // This ensures right-click always works for erasing
-    if (compositionOperation == CompositionOperation.SourceOver) {
-      maskCtx.fillStyle = maskBlendMode
-      maskCtx.globalCompositeOperation = CompositionOperation.SourceOver
-      rgbCtx.globalCompositeOperation = CompositionOperation.SourceOver
-    } else if (compositionOperation == CompositionOperation.DestinationOut) {
-      maskCtx.globalCompositeOperation = CompositionOperation.DestinationOut
-      rgbCtx.globalCompositeOperation = CompositionOperation.DestinationOut
-    }
-  }
-
-  private generateEquidistantPoints(
-    points: Point[],
-    distance: number
-  ): Point[] {
-    const result: Point[] = []
-    const cumulativeDistances: number[] = [0]
-
-    // Calculate cumulative distances between points
-    for (let i = 1; i < points.length; i++) {
-      const dx = points[i].x - points[i - 1].x
-      const dy = points[i].y - points[i - 1].y
-      const dist = Math.hypot(dx, dy)
-      cumulativeDistances[i] = cumulativeDistances[i - 1] + dist
-    }
-
-    const totalLength = cumulativeDistances[cumulativeDistances.length - 1]
-    const numPoints = Math.floor(totalLength / distance)
-
-    for (let i = 0; i <= numPoints; i++) {
-      const targetDistance = i * distance
-      let idx = 0
-
-      // Find the segment where the target distance falls
-      while (
-        idx < cumulativeDistances.length - 1 &&
-        cumulativeDistances[idx + 1] < targetDistance
-      ) {
-        idx++
-      }
-
-      if (idx >= points.length - 1) {
-        result.push(points[points.length - 1])
-        continue
-      }
-
-      const d0 = cumulativeDistances[idx]
-      const d1 = cumulativeDistances[idx + 1]
-      const t = (targetDistance - d0) / (d1 - d0)
-
-      const x = points[idx].x + t * (points[idx + 1].x - points[idx].x)
-      const y = points[idx].y + t * (points[idx + 1].y - points[idx].y)
-
-      result.push({ x, y })
-    }
-
-    return result
-  }
-
-  private setBrushSize(size: number) {
-    this.brushSettings.size = size
-    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
-  }
-
-  private setBrushOpacity(opacity: number) {
-    this.brushSettings.opacity = opacity
-    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
-  }
-
-  private setBrushHardness(hardness: number) {
-    this.brushSettings.hardness = hardness
-    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
-  }
-
-  private setBrushType(type: BrushShape) {
-    this.brushSettings.type = type
-    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
-  }
-
-  private setBrushSmoothingPrecision(precision: number) {
-    this.brushSettings.smoothingPrecision = precision
-    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
-  }
-}
-
-class UIManager {
-  private rootElement: HTMLElement
-  private brush!: HTMLDivElement
-  private brushPreviewGradient!: HTMLDivElement
-  private maskCtx!: CanvasRenderingContext2D
-  private rgbCtx!: CanvasRenderingContext2D
-  private imageCtx!: CanvasRenderingContext2D
-  private maskCanvas!: HTMLCanvasElement
-  private rgbCanvas!: HTMLCanvasElement
-  private imgCanvas!: HTMLCanvasElement
-  private brushSettingsHTML!: HTMLDivElement
-  private paintBucketSettingsHTML!: HTMLDivElement
-  private colorSelectSettingsHTML!: HTMLDivElement
-  // @ts-expect-error unused variable
-  private maskOpacitySlider!: HTMLInputElement
-  private brushHardnessSlider!: HTMLInputElement
-  private brushSizeSlider!: HTMLInputElement
-  // @ts-expect-error unused variable
-  private brushOpacitySlider!: HTMLInputElement
-  private sidebarImage!: HTMLImageElement
-  private saveButton!: HTMLButtonElement
-  private toolPanel!: HTMLDivElement
-  // @ts-expect-error unused variable
-  private sidePanel!: HTMLDivElement
-  private pointerZone!: HTMLDivElement
-  private canvasBackground!: HTMLDivElement
-  private canvasContainer!: HTMLDivElement
-  private image!: HTMLImageElement
-  private paint_image!: HTMLImageElement
-  private imageURL!: URL
-  private darkMode: boolean = true
-  private maskLayerContainer: HTMLElement | null = null
-  private paintLayerContainer: HTMLElement | null = null
-
-  private createColorPicker(): HTMLInputElement {
-    const colorPicker = document.createElement('input')
-    colorPicker.type = 'color'
-    colorPicker.id = 'maskEditor_colorPicker'
-    colorPicker.value = '#FF0000' // Default color
-    colorPicker.addEventListener('input', (event) => {
-      const color = (event.target as HTMLInputElement).value
-      this.messageBroker.publish('setRGBColor', color)
-    })
-    return colorPicker
-  }
-
-  private maskEditor: MaskEditorDialog
-  private messageBroker: MessageBroker
-
-  private mask_opacity: number = 0.8
-  private maskBlendMode: MaskBlendMode = MaskBlendMode.Black
-
-  private zoomTextHTML!: HTMLSpanElement
-  private dimensionsTextHTML!: HTMLSpanElement
-
-  constructor(rootElement: HTMLElement, maskEditor: MaskEditorDialog) {
-    this.rootElement = rootElement
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-    this.addListeners()
-    this.addPullTopics()
-  }
-
-  addListeners() {
-    this.messageBroker.subscribe('updateBrushPreview', async () =>
-      this.updateBrushPreview()
-    )
-
-    this.messageBroker.subscribe(
-      'paintBucketCursor',
-      (isPaintBucket: boolean) => this.handlePaintBucketCursor(isPaintBucket)
-    )
-
-    this.messageBroker.subscribe('panCursor', (isPan: boolean) =>
-      this.handlePanCursor(isPan)
-    )
-
-    this.messageBroker.subscribe('setBrushVisibility', (isVisible: boolean) =>
-      this.setBrushVisibility(isVisible)
-    )
-
-    this.messageBroker.subscribe(
-      'setBrushPreviewGradientVisibility',
-      (isVisible: boolean) => this.setBrushPreviewGradientVisibility(isVisible)
-    )
-
-    this.messageBroker.subscribe('updateCursor', () => this.updateCursor())
-
-    this.messageBroker.subscribe('setZoomText', (text: string) =>
-      this.setZoomText(text)
-    )
-  }
-
-  addPullTopics() {
-    this.messageBroker.createPullTopic(
-      'maskCanvas',
-      async () => this.maskCanvas
-    )
-    this.messageBroker.createPullTopic('maskCtx', async () => this.maskCtx)
-    this.messageBroker.createPullTopic('imageCtx', async () => this.imageCtx)
-    this.messageBroker.createPullTopic('imgCanvas', async () => this.imgCanvas)
-    this.messageBroker.createPullTopic('rgbCtx', async () => this.rgbCtx)
-    this.messageBroker.createPullTopic('rgbCanvas', async () => this.rgbCanvas)
-    this.messageBroker.createPullTopic(
-      'screenToCanvas',
-      async (coords: Point) => this.screenToCanvas(coords)
-    )
-    this.messageBroker.createPullTopic(
-      'getCanvasContainer',
-      async () => this.canvasContainer
-    )
-    this.messageBroker.createPullTopic('getMaskColor', async () =>
-      this.getMaskColor()
-    )
-  }
-
-  async setlayout() {
-    this.detectLightMode()
-    var user_ui = await this.createUI()
-    var canvasContainer = this.createBackgroundUI()
-
-    var brush = await this.createBrush()
-    await this.setBrushBorderRadius()
-    this.setBrushOpacity(1)
-    this.rootElement.appendChild(canvasContainer)
-    this.rootElement.appendChild(user_ui)
-    document.body.appendChild(brush)
-  }
-
-  private async createUI() {
-    var ui_container = document.createElement('div')
-    ui_container.id = 'maskEditor_uiContainer'
-
-    var top_bar = await this.createTopBar()
-
-    var ui_horizontal_container = document.createElement('div')
-    ui_horizontal_container.id = 'maskEditor_uiHorizontalContainer'
-
-    var side_panel_container = await this.createSidePanel()
-
-    var pointer_zone = this.createPointerZone()
-
-    var tool_panel = this.createToolPanel()
-
-    ui_horizontal_container.appendChild(tool_panel)
-    ui_horizontal_container.appendChild(pointer_zone)
-    ui_horizontal_container.appendChild(side_panel_container)
-
-    ui_container.appendChild(top_bar)
-    ui_container.appendChild(ui_horizontal_container)
-
-    return ui_container
-  }
-
-  private createBackgroundUI() {
-    const canvasContainer = document.createElement('div')
-    canvasContainer.id = 'maskEditorCanvasContainer'
-
-    const imgCanvas = document.createElement('canvas')
-    imgCanvas.id = 'imageCanvas'
-
-    const maskCanvas = document.createElement('canvas')
-    maskCanvas.id = 'maskCanvas'
-
-    const rgbCanvas = document.createElement('canvas')
-    rgbCanvas.id = 'rgbCanvas'
-
-    const canvas_background = document.createElement('div')
-    canvas_background.id = 'canvasBackground'
-
-    canvasContainer.appendChild(imgCanvas)
-    canvasContainer.appendChild(rgbCanvas)
-    canvasContainer.appendChild(maskCanvas)
-    canvasContainer.appendChild(canvas_background)
-
-    // prepare content
-    this.imgCanvas = imgCanvas!
-    this.rgbCanvas = rgbCanvas!
-    this.maskCanvas = maskCanvas!
-    this.canvasContainer = canvasContainer!
-    this.canvasBackground = canvas_background!
-
-    let maskCtx = maskCanvas!.getContext('2d', { willReadFrequently: true })
-    if (maskCtx) {
-      this.maskCtx = maskCtx
-    }
-    let rgbCtx = rgbCanvas.getContext('2d', { willReadFrequently: true })
-    if (rgbCtx) {
-      this.rgbCtx = rgbCtx
-    }
-    let imgCtx = imgCanvas!.getContext('2d', { willReadFrequently: true })
-    if (imgCtx) {
-      this.imageCtx = imgCtx
-    }
-    this.setEventHandler()
-
-    //remove styling and move to css file
-
-    this.imgCanvas.style.position = 'absolute'
-    this.rgbCanvas.style.position = 'absolute'
-    this.maskCanvas.style.position = 'absolute'
-
-    this.imgCanvas.style.top = '200'
-    this.imgCanvas.style.left = '0'
-
-    this.rgbCanvas.style.top = this.imgCanvas.style.top
-    this.rgbCanvas.style.left = this.imgCanvas.style.left
-
-    this.maskCanvas.style.top = this.imgCanvas.style.top
-    this.maskCanvas.style.left = this.imgCanvas.style.left
-
-    const maskCanvasStyle = this.getMaskCanvasStyle()
-    this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode
-    this.maskCanvas.style.opacity = maskCanvasStyle.opacity.toString()
-
-    return canvasContainer
-  }
-
-  async setBrushBorderRadius() {
-    const brushSettings = await this.messageBroker.pull('brushSettings')
-
-    if (brushSettings.type === BrushShape.Rect) {
-      this.brush.style.borderRadius = '0%'
-      // @ts-expect-error
-      this.brush.style.MozBorderRadius = '0%'
-      // @ts-expect-error
-      this.brush.style.WebkitBorderRadius = '0%'
-    } else {
-      this.brush.style.borderRadius = '50%'
-      // @ts-expect-error
-      this.brush.style.MozBorderRadius = '50%'
-      // @ts-expect-error
-      this.brush.style.WebkitBorderRadius = '50%'
-    }
-  }
-
-  async initUI() {
-    this.saveButton.innerText = t('g.save')
-    this.saveButton.disabled = false
-
-    await this.setImages(this.imgCanvas) //probably change method to initImageCanvas
-  }
-
-  private async createSidePanel() {
-    const sidePanelWrapper = this.createContainer(true)
-    const side_panel = document.createElement('div')
-    sidePanelWrapper.id = 'maskEditor_sidePanel'
-    side_panel.id = 'maskEditor_sidePanelContent'
-
-    const brush_settings = await this.createBrushSettings()
-    brush_settings.id = 'maskEditor_brushSettings'
-    this.brushSettingsHTML = brush_settings
-
-    const paint_bucket_settings = await this.createPaintBucketSettings()
-    paint_bucket_settings.id = 'maskEditor_paintBucketSettings'
-    this.paintBucketSettingsHTML = paint_bucket_settings
-
-    const color_select_settings = await this.createColorSelectSettings()
-    color_select_settings.id = 'maskEditor_colorSelectSettings'
-    this.colorSelectSettingsHTML = color_select_settings
-
-    const image_layer_settings = await this.createImageLayerSettings()
-
-    const separator = this.createSeparator()
-
-    side_panel.appendChild(brush_settings)
-    side_panel.appendChild(paint_bucket_settings)
-    side_panel.appendChild(color_select_settings)
-    side_panel.appendChild(separator)
-    side_panel.appendChild(image_layer_settings)
-    sidePanelWrapper.appendChild(side_panel)
-
-    return sidePanelWrapper
-  }
-
-  private async createBrushSettings() {
-    const shapeColor = this.darkMode
-      ? 'maskEditor_brushShape_dark'
-      : 'maskEditor_brushShape_light'
-    const brush_settings_container = this.createContainer(true)
-
-    const brush_settings_title = this.createHeadline(
-      t('maskEditor.Brush Settings')
-    )
-
-    const brush_shape_outer_container = this.createContainer(true)
-
-    const brush_shape_title = this.createContainerTitle(
-      t('maskEditor.Brush Shape')
-    )
-
-    const brush_shape_container = this.createContainer(false)
-
-    const accentColor = this.darkMode
-      ? 'maskEditor_accent_bg_dark'
-      : 'maskEditor_accent_bg_light'
-
-    brush_shape_container.classList.add(accentColor)
-    brush_shape_container.classList.add('maskEditor_layerRow')
-
-    const circle_shape = document.createElement('div')
-    circle_shape.id = 'maskEditor_sidePanelBrushShapeCircle'
-    circle_shape.classList.add(shapeColor)
-    circle_shape.addEventListener('click', () => {
-      this.messageBroker.publish('setBrushShape', BrushShape.Arc)
-      this.setBrushBorderRadius()
-      circle_shape.style.background = 'var(--p-button-text-primary-color)'
-      square_shape.style.background = ''
-    })
-
-    const square_shape = document.createElement('div')
-    square_shape.id = 'maskEditor_sidePanelBrushShapeSquare'
-    square_shape.classList.add(shapeColor)
-    square_shape.addEventListener('click', () => {
-      this.messageBroker.publish('setBrushShape', BrushShape.Rect)
-      this.setBrushBorderRadius()
-      square_shape.style.background = 'var(--p-button-text-primary-color)'
-      circle_shape.style.background = ''
-    })
-
-    if (
-      (await this.messageBroker.pull('brushSettings')).type === BrushShape.Arc
-    ) {
-      circle_shape.style.background = 'var(--p-button-text-primary-color)'
-      square_shape.style.background = ''
-    } else {
-      circle_shape.style.background = ''
-      square_shape.style.background = 'var(--p-button-text-primary-color)'
-    }
-
-    brush_shape_container.appendChild(circle_shape)
-    brush_shape_container.appendChild(square_shape)
-
-    brush_shape_outer_container.appendChild(brush_shape_title)
-    brush_shape_outer_container.appendChild(brush_shape_container)
-
-    const thicknesSliderObj = this.createSlider(
-      t('maskEditor.Thickness'),
-      1,
-      100,
-      1,
-      (await this.messageBroker.pull('brushSettings')).size,
-      (_, value) => {
-        this.messageBroker.publish('setBrushSize', parseInt(value))
-        this.updateBrushPreview()
-      }
-    )
-    this.brushSizeSlider = thicknesSliderObj.slider
-
-    const opacitySliderObj = this.createSlider(
-      t('maskEditor.Opacity'),
-      0,
-      1,
-      0.01,
-      (await this.messageBroker.pull('brushSettings')).opacity,
-      (_, value) => {
-        this.messageBroker.publish('setBrushOpacity', parseFloat(value))
-        this.updateBrushPreview()
-      }
-    )
-    this.brushOpacitySlider = opacitySliderObj.slider
-
-    const hardnessSliderObj = this.createSlider(
-      t('maskEditor.Hardness'),
-      0,
-      1,
-      0.01,
-      (await this.messageBroker.pull('brushSettings')).hardness,
-      (_, value) => {
-        this.messageBroker.publish('setBrushHardness', parseFloat(value))
-        this.updateBrushPreview()
-      }
-    )
-    this.brushHardnessSlider = hardnessSliderObj.slider
-
-    const brushSmoothingPrecisionSliderObj = this.createSlider(
-      t('maskEditor.Smoothing Precision'),
-      1,
-      100,
-      1,
-      (await this.messageBroker.pull('brushSettings')).smoothingPrecision,
-      (_, value) => {
-        this.messageBroker.publish(
-          'setBrushSmoothingPrecision',
-          parseInt(value)
-        )
-      }
-    )
-
-    const resetBrushSettingsButton = document.createElement('button')
-    resetBrushSettingsButton.id = 'resetBrushSettingsButton'
-    resetBrushSettingsButton.innerText = t('maskEditor.Reset to Default')
-
-    resetBrushSettingsButton.addEventListener('click', () => {
-      this.messageBroker.publish('setBrushShape', BrushShape.Arc)
-      this.messageBroker.publish('setBrushSize', 20)
-      this.messageBroker.publish('setBrushOpacity', 1)
-      this.messageBroker.publish('setBrushHardness', 1)
-      this.messageBroker.publish('setBrushSmoothingPrecision', 60)
-
-      circle_shape.style.background = 'var(--p-button-text-primary-color)'
-      square_shape.style.background = ''
-
-      thicknesSliderObj.slider.value = '20'
-      opacitySliderObj.slider.value = '1'
-      hardnessSliderObj.slider.value = '1'
-      brushSmoothingPrecisionSliderObj.slider.value = '60'
-
-      this.setBrushBorderRadius()
-      this.updateBrushPreview()
-    })
-
-    brush_settings_container.appendChild(brush_settings_title)
-    brush_settings_container.appendChild(resetBrushSettingsButton)
-    brush_settings_container.appendChild(brush_shape_outer_container)
-
-    // Create a new container for the color picker and its title
-    const color_picker_container = this.createContainer(true)
-
-    // Add the color picker title
-    const colorPickerTitle = document.createElement('span')
-    colorPickerTitle.innerText = 'Color Selector'
-    colorPickerTitle.classList.add('maskEditor_sidePanelSubTitle') // Mimic brush shape title style
-    color_picker_container.appendChild(colorPickerTitle)
-
-    // Add the color picker
-    const colorPicker = this.createColorPicker()
-    color_picker_container.appendChild(colorPicker)
-
-    // Add the color picker container to the main settings container
-    brush_settings_container.appendChild(color_picker_container)
-
-    brush_settings_container.appendChild(thicknesSliderObj.container)
-    brush_settings_container.appendChild(opacitySliderObj.container)
-    brush_settings_container.appendChild(hardnessSliderObj.container)
-    brush_settings_container.appendChild(
-      brushSmoothingPrecisionSliderObj.container
-    )
-
-    return brush_settings_container
-  }
-
-  private async createPaintBucketSettings() {
-    const paint_bucket_settings_container = this.createContainer(true)
-
-    const paint_bucket_settings_title = this.createHeadline(
-      t('maskEditor.Paint Bucket Settings')
-    )
-
-    const tolerance = await this.messageBroker.pull('getTolerance')
-    const paintBucketToleranceSliderObj = this.createSlider(
-      t('maskEditor.Tolerance'),
-      0,
-      255,
-      1,
-      tolerance,
-      (_, value) => {
-        this.messageBroker.publish('setPaintBucketTolerance', parseInt(value))
-      }
-    )
-
-    // Add new slider for fill opacity
-    const fillOpacity = (await this.messageBroker.pull('getFillOpacity')) || 100
-    const fillOpacitySliderObj = this.createSlider(
-      t('maskEditor.Fill Opacity'),
-      0,
-      100,
-      1,
-      fillOpacity,
-      (_, value) => {
-        this.messageBroker.publish('setFillOpacity', parseInt(value))
-      }
-    )
-
-    paint_bucket_settings_container.appendChild(paint_bucket_settings_title)
-    paint_bucket_settings_container.appendChild(
-      paintBucketToleranceSliderObj.container
-    )
-    // Add the new opacity slider to the UI
-    paint_bucket_settings_container.appendChild(fillOpacitySliderObj.container)
-
-    return paint_bucket_settings_container
-  }
-
-  private async createColorSelectSettings() {
-    const color_select_settings_container = this.createContainer(true)
-
-    const color_select_settings_title = this.createHeadline(
-      t('maskEditor.Color Select Settings')
-    )
-
-    var tolerance = await this.messageBroker.pull('getTolerance')
-    const colorSelectToleranceSliderObj = this.createSlider(
-      t('maskEditor.Tolerance'),
-      0,
-      255,
-      1,
-      tolerance,
-      (_, value) => {
-        this.messageBroker.publish('setColorSelectTolerance', parseInt(value))
-      }
-    )
-
-    // Add new slider for selection opacity
-    const selectionOpacitySliderObj = this.createSlider(
-      t('maskEditor.Selection Opacity'),
-      0,
-      100,
-      1,
-      100, // Default to 100%
-      (_, value) => {
-        this.messageBroker.publish('setSelectionOpacity', parseInt(value))
-      }
-    )
-
-    const livePreviewToggle = this.createToggle(
-      t('maskEditor.Live Preview'),
-      (_, value) => {
-        this.messageBroker.publish('setLivePreview', value)
-      }
-    )
-
-    const wholeImageToggle = this.createToggle(
-      t('maskEditor.Apply to Whole Image'),
-      (_, value) => {
-        this.messageBroker.publish('setWholeImage', value)
-      }
-    )
-
-    const methodOptions = Object.values(ColorComparisonMethod)
-    const methodSelect = this.createDropdown(
-      t('maskEditor.Method'),
-      methodOptions,
-      (_, value) => {
-        this.messageBroker.publish('setColorComparisonMethod', value)
-      }
-    )
-
-    const maskBoundaryToggle = this.createToggle(
-      t('maskEditor.Stop at mask'),
-      (_, value) => {
-        this.messageBroker.publish('setMaskBoundary', value)
-      }
-    )
-
-    const maskToleranceSliderObj = this.createSlider(
-      t('maskEditor.Mask Tolerance'),
-      0,
-      255,
-      1,
-      0,
-      (_, value) => {
-        this.messageBroker.publish('setMaskTolerance', parseInt(value))
-      }
-    )
-
-    color_select_settings_container.appendChild(color_select_settings_title)
-    color_select_settings_container.appendChild(
-      colorSelectToleranceSliderObj.container
-    )
-    // Add the new opacity slider to the UI
-    color_select_settings_container.appendChild(
-      selectionOpacitySliderObj.container
-    )
-    color_select_settings_container.appendChild(livePreviewToggle)
-    color_select_settings_container.appendChild(wholeImageToggle)
-    color_select_settings_container.appendChild(methodSelect)
-    color_select_settings_container.appendChild(maskBoundaryToggle)
-    color_select_settings_container.appendChild(
-      maskToleranceSliderObj.container
-    )
-
-    return color_select_settings_container
-  }
-
-  activeLayer: 'mask' | 'rgb' = 'mask'
-  layerButtons: Record<ImageLayer, HTMLButtonElement> = {
-    mask: (() => {
-      const btn = document.createElement('button')
-      btn.style.fontSize = '12px'
-      return btn
-    })(),
-    rgb: (() => {
-      const btn = document.createElement('button')
-      btn.style.fontSize = '12px'
-      return btn
-    })()
-  }
-  updateButtonsVisibility() {
-    allImageLayers.forEach((layer) => {
-      const button = this.layerButtons[layer]
-      if (layer === this.activeLayer) {
-        button.style.opacity = '0.5'
-        button.disabled = true
-      } else {
-        button.style.opacity = '1'
-        button.disabled = false
-      }
-    })
-  }
-
-  async updateLayerButtonsForTool() {
-    const currentTool = await this.messageBroker.pull('currentTool')
-    const isEraserTool = currentTool === Tools.Eraser
-
-    // Show/hide buttons based on whether eraser tool is active
-    Object.values(this.layerButtons).forEach((button) => {
-      if (isEraserTool) {
-        button.style.display = 'block'
-      } else {
-        button.style.display = 'none'
-      }
-    })
-  }
-
-  async setActiveLayer(layer: 'mask' | 'rgb') {
-    this.messageBroker.publish('setActiveLayer', layer)
-    this.activeLayer = layer
-    this.updateButtonsVisibility()
-    const currentTool = await this.messageBroker.pull('currentTool')
-    const maskOnlyTools = [Tools.MaskPen, Tools.MaskBucket, Tools.MaskColorFill]
-    if (maskOnlyTools.includes(currentTool) && layer === 'rgb') {
-      this.setToolTo(Tools.PaintPen)
-    }
-    if (currentTool === Tools.PaintPen && layer === 'mask') {
-      this.setToolTo(Tools.MaskPen)
-    }
-    this.updateActiveLayerHighlight()
-  }
-
-  updateActiveLayerHighlight() {
-    // Remove blue border from all containers
-    if (this.maskLayerContainer) {
-      this.maskLayerContainer.style.border = 'none'
-    }
-    if (this.paintLayerContainer) {
-      this.paintLayerContainer.style.border = 'none'
-    }
-
-    // Add blue border to active layer container
-    if (this.activeLayer === 'mask' && this.maskLayerContainer) {
-      this.maskLayerContainer.style.border = '2px solid #007acc'
-    } else if (this.activeLayer === 'rgb' && this.paintLayerContainer) {
-      this.paintLayerContainer.style.border = '2px solid #007acc'
-    }
-  }
-
-  private async createImageLayerSettings() {
-    const accentColor = this.darkMode
-      ? 'maskEditor_accent_bg_dark'
-      : 'maskEditor_accent_bg_light'
-
-    const image_layer_settings_container = this.createContainer(true)
-
-    const image_layer_settings_title = this.createHeadline(
-      t('maskEditor.Layers')
-    )
-
-    // Add a new container for layer selection
-    const layer_selection_container = this.createContainer(false)
-    layer_selection_container.classList.add(accentColor)
-    layer_selection_container.classList.add('maskEditor_layerRow')
-
-    this.layerButtons.mask.innerText = 'Activate Layer'
-    this.layerButtons.mask.addEventListener('click', async () => {
-      this.setActiveLayer('mask')
-    })
-
-    this.layerButtons.rgb.innerText = 'Activate Layer'
-    this.layerButtons.rgb.addEventListener('click', async () => {
-      this.setActiveLayer('rgb')
-    })
-
-    // Initially hide the buttons (they'll be shown when eraser tool is selected)
-    this.layerButtons.mask.style.display = 'none'
-    this.layerButtons.rgb.style.display = 'none'
-
-    this.setActiveLayer('mask')
-
-    // 1. MASK LAYER CONTAINER
-    const mask_layer_title = this.createContainerTitle('Mask Layer')
-    const mask_layer_container = this.createContainer(false)
-    mask_layer_container.classList.add(accentColor)
-    mask_layer_container.classList.add('maskEditor_layerRow')
-
-    const mask_layer_visibility_checkbox = document.createElement('input')
-    mask_layer_visibility_checkbox.setAttribute('type', 'checkbox')
-    mask_layer_visibility_checkbox.checked = true
-    mask_layer_visibility_checkbox.classList.add(
-      'maskEditor_sidePanelLayerCheckbox'
-    )
-    mask_layer_visibility_checkbox.addEventListener('change', (event) => {
-      if (!(event.target as HTMLInputElement)!.checked) {
-        this.maskCanvas.style.opacity = '0'
-      } else {
-        this.maskCanvas.style.opacity = String(this.mask_opacity)
-      }
-    })
-
-    var mask_layer_image_container = document.createElement('div')
-    mask_layer_image_container.classList.add(
-      'maskEditor_sidePanelLayerPreviewContainer'
-    )
-    mask_layer_image_container.innerHTML =
-      '<svg viewBox="0 0 20 20" style="">   <path class="cls-1" d="M1.31,5.32v9.36c0,.55.45,1,1,1h15.38c.55,0,1-.45,1-1V5.32c0-.55-.45-1-1-1H2.31c-.55,0-1,.45-1,1ZM11.19,13.44c-2.91.94-5.57-1.72-4.63-4.63.34-1.05,1.19-1.9,2.24-2.24,2.91-.94,5.57,1.72,4.63,4.63-.34,1.05-1.19-1.9-2.24,2.24Z"/> </svg>'
-
-    // Add checkbox, image container, and activate button to mask layer container
-    mask_layer_container.appendChild(mask_layer_visibility_checkbox)
-    mask_layer_container.appendChild(mask_layer_image_container)
-    mask_layer_container.appendChild(this.layerButtons.mask)
-
-    // Store reference to container for highlighting
-    this.maskLayerContainer = mask_layer_container
-
-    // 2. MASK BLENDING OPTIONS CONTAINER
-    const mask_blending_options_title = this.createContainerTitle(
-      'Mask Blending Options'
-    )
-    const mask_blending_options_container = this.createContainer(false)
-    // mask_blending_options_container.classList.add(accentColor)
-    mask_blending_options_container.classList.add('maskEditor_layerRow')
-    mask_blending_options_container.style.marginTop = '-9px'
-    mask_blending_options_container.style.marginBottom = '-6px'
-    var blending_options = ['black', 'white', 'negative']
-    const sidePanelDropdownAccent = this.darkMode
-      ? 'maskEditor_sidePanelDropdown_dark'
-      : 'maskEditor_sidePanelDropdown_light'
-
-    var mask_layer_dropdown = document.createElement('select')
-    mask_layer_dropdown.classList.add(sidePanelDropdownAccent)
-    blending_options.forEach((option) => {
-      var option_element = document.createElement('option')
-      option_element.value = option
-      option_element.innerText = option
-      mask_layer_dropdown.appendChild(option_element)
-
-      if (option == this.maskBlendMode) {
-        option_element.selected = true
-      }
-    })
-
-    mask_layer_dropdown.addEventListener('change', (event) => {
-      const selectedValue = (event.target as HTMLSelectElement)
-        .value as MaskBlendMode
-      this.maskBlendMode = selectedValue
-      this.updateMaskColor()
-    })
-
-    // Center the dropdown in its container
-    // mask_blending_options_container.style.display = 'flex'
-    // mask_blending_options_container.style.justifyContent = 'center'
-    mask_blending_options_container.appendChild(mask_layer_dropdown)
-
-    // 3. MASK OPACITY SLIDER
-    const mask_layer_opacity_sliderObj = this.createSlider(
-      t('maskEditor.Mask Opacity'),
-      0.0,
-      1.0,
-      0.01,
-      this.mask_opacity,
-      (_, value) => {
-        this.mask_opacity = parseFloat(value)
-        this.maskCanvas.style.opacity = String(this.mask_opacity)
-
-        if (this.mask_opacity == 0) {
-          mask_layer_visibility_checkbox.checked = false
-        } else {
-          mask_layer_visibility_checkbox.checked = true
-        }
-      }
-    )
-    this.maskOpacitySlider = mask_layer_opacity_sliderObj.slider
-
-    // 4. PAINT LAYER CONTAINER
-    const paint_layer_title = this.createContainerTitle('Paint Layer')
-    const paint_layer_container = this.createContainer(false)
-    paint_layer_container.classList.add(accentColor)
-    paint_layer_container.classList.add('maskEditor_layerRow')
-
-    const paint_layer_checkbox = document.createElement('input')
-    paint_layer_checkbox.setAttribute('type', 'checkbox')
-    paint_layer_checkbox.classList.add('maskEditor_sidePanelLayerCheckbox')
-    paint_layer_checkbox.checked = true
-    paint_layer_checkbox.addEventListener('change', (event) => {
-      if (!(event.target as HTMLInputElement)!.checked) {
-        this.rgbCanvas.style.opacity = '0'
-      } else {
-        this.rgbCanvas.style.opacity = '1'
-      }
-    })
-
-    const paint_layer_image_container = document.createElement('div')
-    paint_layer_image_container.classList.add(
-      'maskEditor_sidePanelLayerPreviewContainer'
-    )
-    paint_layer_image_container.innerHTML = `
-      <svg viewBox="0 0 20 20">
-        <path class="cls-1" d="M 17 6.965 c 0 0.235 -0.095 0.47 -0.275 0.655 l -6.51 6.52 c -0.045 0.035 -0.09 0.075 -0.135 0.11 c -0.035 -0.695 -0.605 -1.24 -1.305 -1.245 c 0.035 -0.06 0.08 -0.12 0.135 -0.17 l 6.52 -6.52 c 0.36 -0.36 0.945 -0.36 1.3 0 c 0.175 0.175 0.275 0.415 0.275 0.65 Z"/>
-        <path class="cls-1" d="M 9.82 14.515 c 0 2.23 -3.23 1.59 -4.82 0 c 1.65 -0.235 2.375 -1.29 3.53 -1.29 c 0.715 0 1.29 0.58 1.29 1.29 Z"/>
-      </svg>
-    `
-
-    paint_layer_container.appendChild(paint_layer_checkbox)
-    paint_layer_container.appendChild(paint_layer_image_container)
-    paint_layer_container.appendChild(this.layerButtons.rgb)
-
-    // Store reference to container for highlighting
-    this.paintLayerContainer = paint_layer_container
-
-    // 5. BASE IMAGE LAYER CONTAINER
-    const base_image_layer_title = this.createContainerTitle('Base Image Layer')
-    const base_image_layer_container = this.createContainer(false)
-    base_image_layer_container.classList.add(accentColor)
-    base_image_layer_container.classList.add('maskEditor_layerRow')
-
-    const base_image_layer_visibility_checkbox = document.createElement('input')
-    base_image_layer_visibility_checkbox.setAttribute('type', 'checkbox')
-    base_image_layer_visibility_checkbox.classList.add(
-      'maskEditor_sidePanelLayerCheckbox'
-    )
-    base_image_layer_visibility_checkbox.checked = true
-    base_image_layer_visibility_checkbox.addEventListener('change', (event) => {
-      if (!(event.target as HTMLInputElement)!.checked) {
-        this.imgCanvas.style.opacity = '0'
-      } else {
-        this.imgCanvas.style.opacity = '1'
-      }
-    })
-
-    const base_image_layer_image_container = document.createElement('div')
-    base_image_layer_image_container.classList.add(
-      'maskEditor_sidePanelLayerPreviewContainer'
-    )
-
-    const base_image_layer_image = document.createElement('img')
-    base_image_layer_image.id = 'maskEditor_sidePanelImageLayerImage'
-    base_image_layer_image.src =
-      ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src ??
-      ''
-    this.sidebarImage = base_image_layer_image
-
-    base_image_layer_image_container.appendChild(base_image_layer_image)
-
-    base_image_layer_container.appendChild(base_image_layer_visibility_checkbox)
-    base_image_layer_container.appendChild(base_image_layer_image_container)
-
-    // APPEND ALL CONTAINERS IN ORDER
-    image_layer_settings_container.appendChild(image_layer_settings_title)
-    image_layer_settings_container.appendChild(
-      mask_layer_opacity_sliderObj.container
-    )
-    image_layer_settings_container.appendChild(mask_blending_options_title)
-    image_layer_settings_container.appendChild(mask_blending_options_container)
-    image_layer_settings_container.appendChild(mask_layer_title)
-    image_layer_settings_container.appendChild(mask_layer_container)
-    image_layer_settings_container.appendChild(paint_layer_title)
-    image_layer_settings_container.appendChild(paint_layer_container)
-    image_layer_settings_container.appendChild(base_image_layer_title)
-    image_layer_settings_container.appendChild(base_image_layer_container)
-
-    // Initialize the active layer highlighting
-    this.updateActiveLayerHighlight()
-
-    // Initialize button visibility based on current tool
-    this.updateLayerButtonsForTool()
-
-    return image_layer_settings_container
-  }
-
-  // Method to be called when tool changes
-  async onToolChange() {
-    await this.updateLayerButtonsForTool()
-  }
-
-  private createHeadline(title: string) {
-    var headline = document.createElement('h3')
-    headline.classList.add('maskEditor_sidePanelTitle')
-    headline.innerText = title
-
-    return headline
-  }
-
-  private createContainer(flexDirection: boolean) {
-    var container = document.createElement('div')
-    if (flexDirection) {
-      container.classList.add('maskEditor_sidePanelContainerColumn')
-    } else {
-      container.classList.add('maskEditor_sidePanelContainerRow')
-    }
-
-    return container
-  }
-
-  private createContainerTitle(title: string) {
-    var container_title = document.createElement('span')
-    container_title.classList.add('maskEditor_sidePanelSubTitle')
-    container_title.innerText = title
-
-    return container_title
-  }
-
-  private createSlider(
-    title: string,
-    min: number,
-    max: number,
-    step: number,
-    value: number,
-    callback: (event: Event, value: string) => void
-  ) {
-    var slider_container = this.createContainer(true)
-    var slider_title = this.createContainerTitle(title)
-    var slider = document.createElement('input')
-    slider.classList.add('maskEditor_sidePanelBrushRange')
-    slider.setAttribute('type', 'range')
-    slider.setAttribute('min', String(min))
-    slider.setAttribute('max', String(max))
-    slider.setAttribute('step', String(step))
-    slider.setAttribute('value', String(value))
-    slider.addEventListener('input', (event) => {
-      callback(event, (event.target as HTMLInputElement).value)
-    })
-    slider_container.appendChild(slider_title)
-    slider_container.appendChild(slider)
-
-    return { container: slider_container, slider: slider }
-  }
-
-  private createToggle(
-    title: string,
-    callback: (event: Event, value: boolean) => void
-  ) {
-    var outer_Container = this.createContainer(false)
-    var toggle_title = this.createContainerTitle(title)
-
-    var toggle_container = document.createElement('label')
-    toggle_container.classList.add('maskEditor_sidePanelToggleContainer')
-
-    var toggle_checkbox = document.createElement('input')
-    toggle_checkbox.setAttribute('type', 'checkbox')
-    toggle_checkbox.classList.add('maskEditor_sidePanelToggleCheckbox')
-    toggle_checkbox.addEventListener('change', (event) => {
-      callback(event, (event.target as HTMLInputElement).checked)
-    })
-
-    var toggleAccentColor = this.darkMode
-      ? 'maskEditor_toggle_bg_dark'
-      : 'maskEditor_toggle_bg_light'
-
-    var toggle_switch = document.createElement('div')
-    toggle_switch.classList.add('maskEditor_sidePanelToggleSwitch')
-    toggle_switch.classList.add(toggleAccentColor)
-
-    toggle_container.appendChild(toggle_checkbox)
-    toggle_container.appendChild(toggle_switch)
-
-    outer_Container.appendChild(toggle_title)
-    outer_Container.appendChild(toggle_container)
-
-    return outer_Container
-  }
-
-  private createDropdown(
-    title: string,
-    options: string[],
-    callback: (event: Event, value: string) => void
-  ) {
-    const sidePanelDropdownAccent = this.darkMode
-      ? 'maskEditor_sidePanelDropdown_dark'
-      : 'maskEditor_sidePanelDropdown_light'
-    var dropdown_container = this.createContainer(false)
-    var dropdown_title = this.createContainerTitle(title)
-
-    var dropdown = document.createElement('select')
-    dropdown.classList.add(sidePanelDropdownAccent)
-    dropdown.classList.add('maskEditor_containerDropdown')
-
-    options.forEach((option) => {
-      var option_element = document.createElement('option')
-      option_element.value = option
-      option_element.innerText = option
-      dropdown.appendChild(option_element)
-    })
-
-    dropdown.addEventListener('change', (event) => {
-      callback(event, (event.target as HTMLSelectElement).value)
-    })
-
-    dropdown_container.appendChild(dropdown_title)
-    dropdown_container.appendChild(dropdown)
-
-    return dropdown_container
-  }
-
-  private createSeparator() {
-    var separator = document.createElement('div')
-    separator.classList.add('maskEditor_sidePanelSeparator')
-
-    return separator
-  }
-
-  //----------------
-
-  private async createTopBar() {
-    const buttonAccentColor = this.darkMode
-      ? 'maskEditor_topPanelButton_dark'
-      : 'maskEditor_topPanelButton_light'
-
-    const iconButtonAccentColor = this.darkMode
-      ? 'maskEditor_topPanelIconButton_dark'
-      : 'maskEditor_topPanelIconButton_light'
-
-    var top_bar = document.createElement('div')
-    top_bar.id = 'maskEditor_topBar'
-
-    var top_bar_title_container = document.createElement('div')
-    top_bar_title_container.id = 'maskEditor_topBarTitleContainer'
-
-    var top_bar_title = document.createElement('h1')
-    top_bar_title.id = 'maskEditor_topBarTitle'
-    top_bar_title.innerText = 'ComfyUI'
-
-    top_bar_title_container.appendChild(top_bar_title)
-
-    var top_bar_shortcuts_container = document.createElement('div')
-    top_bar_shortcuts_container.id = 'maskEditor_topBarShortcutsContainer'
-
-    var top_bar_undo_button = document.createElement('div')
-    top_bar_undo_button.id = 'maskEditor_topBarUndoButton'
-    top_bar_undo_button.classList.add(iconButtonAccentColor)
-    top_bar_undo_button.innerHTML =
-      '<svg viewBox="0 0 15 15"><path d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"></path> </svg>'
-
-    top_bar_undo_button.addEventListener('click', () => {
-      this.messageBroker.publish('undo')
-    })
-
-    var top_bar_redo_button = document.createElement('div')
-    top_bar_redo_button.id = 'maskEditor_topBarRedoButton'
-    top_bar_redo_button.classList.add(iconButtonAccentColor)
-    top_bar_redo_button.innerHTML =
-      '<svg viewBox="0 0 15 15"> <path class="cls-1" d="M6.23,12.18c-1.97,0-3.58-1.61-3.58-3.58,0-2.11,1.71-3.58,4.17-3.58h3.98l-1.43-1.43c-.18-.18-.18-.47,0-.64.18-.18.46-.18.64,0l2.21,2.21c.09.09.13.2.13.32s-.05.24-.13.32l-2.21,2.21c-.18.18-.47.18-.64,0-.18-.18-.18-.47,0-.64l1.43-1.43h-3.98c-1.92,0-3.26,1.1-3.26,2.67,0,1.47,1.2,2.67,2.67,2.67.25,0,.46.2.46.46s-.2.46-.46.46Z"/></svg>'
-
-    top_bar_redo_button.addEventListener('click', () => {
-      this.messageBroker.publish('redo')
-    })
-
-    var top_bar_invert_button = document.createElement('button')
-    top_bar_invert_button.id = 'maskEditor_topBarInvertButton'
-    top_bar_invert_button.classList.add(buttonAccentColor)
-    top_bar_invert_button.innerText = t('maskEditor.Invert')
-    top_bar_invert_button.addEventListener('click', () => {
-      this.messageBroker.publish('invert')
-    })
-
-    var top_bar_clear_button = document.createElement('button')
-    top_bar_clear_button.id = 'maskEditor_topBarClearButton'
-    top_bar_clear_button.classList.add(buttonAccentColor)
-    top_bar_clear_button.innerText = t('maskEditor.Clear')
-
-    top_bar_clear_button.addEventListener('click', () => {
-      this.maskCtx.clearRect(
-        0,
-        0,
-        this.maskCanvas.width,
-        this.maskCanvas.height
-      )
-      this.rgbCtx.clearRect(0, 0, this.rgbCanvas.width, this.rgbCanvas.height)
-      this.messageBroker.publish('saveState')
-    })
-
-    var top_bar_save_button = document.createElement('button')
-    top_bar_save_button.id = 'maskEditor_topBarSaveButton'
-    top_bar_save_button.classList.add(buttonAccentColor)
-    top_bar_save_button.innerText = t('g.save')
-    this.saveButton = top_bar_save_button
-
-    top_bar_save_button.addEventListener('click', () => {
-      this.maskEditor.save()
-    })
-
-    var top_bar_cancel_button = document.createElement('button')
-    top_bar_cancel_button.id = 'maskEditor_topBarCancelButton'
-    top_bar_cancel_button.classList.add(buttonAccentColor)
-    top_bar_cancel_button.innerText = t('g.cancel')
-
-    top_bar_cancel_button.addEventListener('click', () => {
-      this.maskEditor.destroy()
-    })
-
-    top_bar_shortcuts_container.appendChild(top_bar_undo_button)
-    top_bar_shortcuts_container.appendChild(top_bar_redo_button)
-    top_bar_shortcuts_container.appendChild(top_bar_invert_button)
-    top_bar_shortcuts_container.appendChild(top_bar_clear_button)
-    top_bar_shortcuts_container.appendChild(top_bar_save_button)
-    top_bar_shortcuts_container.appendChild(top_bar_cancel_button)
-
-    top_bar.appendChild(top_bar_title_container)
-    top_bar.appendChild(top_bar_shortcuts_container)
-
-    return top_bar
-  }
-
-  toolElements: HTMLElement[] = []
-  toolSettings: Record<Tools, ToolInternalSettings> = {
-    [Tools.MaskPen]: {
-      container: document.createElement('div'),
-      newActiveLayerOnSet: 'mask'
-    },
-    [Tools.Eraser]: {
-      container: document.createElement('div')
-    },
-    [Tools.PaintPen]: {
-      container: document.createElement('div'),
-      newActiveLayerOnSet: 'rgb'
-    },
-    [Tools.MaskBucket]: {
-      container: document.createElement('div'),
-      cursor: "url('/cursor/paintBucket.png') 30 25, auto",
-      newActiveLayerOnSet: 'mask'
-    },
-    [Tools.MaskColorFill]: {
-      container: document.createElement('div'),
-      cursor: "url('/cursor/colorSelect.png') 15 25, auto",
-      newActiveLayerOnSet: 'mask'
-    }
-  }
-
-  setToolTo(tool: Tools) {
-    this.messageBroker.publish('setTool', tool)
-    for (let toolElement of this.toolElements) {
-      if (toolElement != this.toolSettings[tool].container) {
-        toolElement.classList.remove('maskEditor_toolPanelContainerSelected')
-      } else {
-        toolElement.classList.add('maskEditor_toolPanelContainerSelected')
-        this.brushSettingsHTML.style.display = 'flex'
-        this.colorSelectSettingsHTML.style.display = 'none'
-        this.paintBucketSettingsHTML.style.display = 'none'
-      }
-    }
-    if (tool === Tools.MaskColorFill) {
-      this.brushSettingsHTML.style.display = 'none'
-      this.colorSelectSettingsHTML.style.display = 'flex'
-      this.paintBucketSettingsHTML.style.display = 'none'
-    } else if (tool === Tools.MaskBucket) {
-      this.brushSettingsHTML.style.display = 'none'
-      this.colorSelectSettingsHTML.style.display = 'none'
-      this.paintBucketSettingsHTML.style.display = 'flex'
-    } else {
-      this.brushSettingsHTML.style.display = 'flex'
-      this.colorSelectSettingsHTML.style.display = 'none'
-      this.paintBucketSettingsHTML.style.display = 'none'
-    }
-    this.messageBroker.publish('setTool', tool)
-    this.onToolChange()
-    const newActiveLayer = this.toolSettings[tool].newActiveLayerOnSet
-    if (newActiveLayer) {
-      this.setActiveLayer(newActiveLayer)
-    }
-    const cursor = this.toolSettings[tool].cursor
-    this.pointerZone.style.cursor = cursor ?? 'none'
-    if (cursor) {
-      this.brush.style.opacity = '0'
-    }
-  }
-
-  private createToolPanel() {
-    var tool_panel = document.createElement('div')
-    tool_panel.id = 'maskEditor_toolPanel'
-    this.toolPanel = tool_panel
-    var toolPanelHoverAccent = this.darkMode
-      ? 'maskEditor_toolPanelContainerDark'
-      : 'maskEditor_toolPanelContainerLight'
-
-    this.toolElements = []
-    // mask pen tool
-    const setupToolContainer = (tool: Tools) => {
-      this.toolSettings[tool].container = document.createElement('div')
-      this.toolSettings[tool].container.classList.add(
-        'maskEditor_toolPanelContainer'
-      )
-      if (tool == Tools.MaskPen)
-        this.toolSettings[tool].container.classList.add(
-          'maskEditor_toolPanelContainerSelected'
-        )
-      this.toolSettings[tool].container.classList.add(toolPanelHoverAccent)
-      this.toolSettings[tool].container.innerHTML = iconsHtml[tool]
-      this.toolElements.push(this.toolSettings[tool].container)
-      this.toolSettings[tool].container.addEventListener('click', () => {
-        this.setToolTo(tool)
-      })
-      const activeIndicator = document.createElement('div')
-      activeIndicator.classList.add('maskEditor_toolPanelIndicator')
-      this.toolSettings[tool].container.appendChild(activeIndicator)
-      tool_panel.appendChild(this.toolSettings[tool].container)
-    }
-    allTools.forEach(setupToolContainer)
-
-    const setupZoomIndicatorContainer = () => {
-      var toolPanel_zoomIndicator = document.createElement('div')
-      toolPanel_zoomIndicator.classList.add('maskEditor_toolPanelZoomIndicator')
-      toolPanel_zoomIndicator.classList.add(toolPanelHoverAccent)
-
-      var toolPanel_zoomText = document.createElement('span')
-      toolPanel_zoomText.id = 'maskEditor_toolPanelZoomText'
-      toolPanel_zoomText.innerText = '100%'
-      this.zoomTextHTML = toolPanel_zoomText
-
-      var toolPanel_DimensionsText = document.createElement('span')
-      toolPanel_DimensionsText.id = 'maskEditor_toolPanelDimensionsText'
-      toolPanel_DimensionsText.innerText = ' '
-      this.dimensionsTextHTML = toolPanel_DimensionsText
-
-      toolPanel_zoomIndicator.appendChild(toolPanel_zoomText)
-      toolPanel_zoomIndicator.appendChild(toolPanel_DimensionsText)
-
-      toolPanel_zoomIndicator.addEventListener('click', () => {
-        this.messageBroker.publish('resetZoom')
-      })
-      tool_panel.appendChild(toolPanel_zoomIndicator)
-    }
-    setupZoomIndicatorContainer()
-
-    return tool_panel
-  }
-
-  private createPointerZone() {
-    const pointer_zone = document.createElement('div')
-    pointer_zone.id = 'maskEditor_pointerZone'
-
-    this.pointerZone = pointer_zone
-
-    pointer_zone.addEventListener('pointerdown', (event: PointerEvent) => {
-      this.messageBroker.publish('pointerDown', event)
-    })
-
-    pointer_zone.addEventListener('pointermove', (event: PointerEvent) => {
-      this.messageBroker.publish('pointerMove', event)
-    })
-
-    pointer_zone.addEventListener('pointerup', (event: PointerEvent) => {
-      this.messageBroker.publish('pointerUp', event)
-    })
-
-    pointer_zone.addEventListener('pointerleave', () => {
-      this.brush.style.opacity = '0'
-      this.pointerZone.style.cursor = ''
-    })
-
-    pointer_zone.addEventListener('touchstart', (event: TouchEvent) => {
-      this.messageBroker.publish('handleTouchStart', event)
-    })
-
-    pointer_zone.addEventListener('touchmove', (event: TouchEvent) => {
-      this.messageBroker.publish('handleTouchMove', event)
-    })
-
-    pointer_zone.addEventListener('touchend', (event: TouchEvent) => {
-      this.messageBroker.publish('handleTouchEnd', event)
-    })
-
-    pointer_zone.addEventListener('wheel', (event) =>
-      this.messageBroker.publish('wheel', event)
-    )
-
-    pointer_zone.addEventListener('pointerenter', async () => {
-      this.updateCursor()
-    })
-
-    return pointer_zone
-  }
-
-  async screenToCanvas(clientPoint: Point): Promise<Point> {
-    // Get the zoom ratio
-    const zoomRatio = await this.messageBroker.pull('zoomRatio')
-
-    // Get the bounding rectangles for both canvases
-    const maskCanvasRect = this.maskCanvas.getBoundingClientRect()
-    const rgbCanvasRect = this.rgbCanvas.getBoundingClientRect()
-
-    // Check which canvas is currently being used for drawing
-    const currentTool = await this.messageBroker.pull('currentTool')
-    const isUsingRGBCanvas = currentTool === Tools.PaintPen
-
-    // Use the appropriate canvas rect based on the current tool
-    const canvasRect = isUsingRGBCanvas ? rgbCanvasRect : maskCanvasRect
-
-    // Calculate the offset between pointer zone and canvas
-    const offsetX = clientPoint.x - canvasRect.left + this.toolPanel.clientWidth
-    const offsetY = clientPoint.y - canvasRect.top + 44 // 44 is the height of the top menu
-
-    // Adjust for zoom ratio
-    const x = offsetX / zoomRatio
-    const y = offsetY / zoomRatio
-
-    return { x: x, y: y }
-  }
-
-  private setEventHandler() {
-    this.maskCanvas.addEventListener('contextmenu', (event: Event) => {
-      event.preventDefault()
-    })
-
-    this.rgbCanvas.addEventListener('contextmenu', (event: Event) => {
-      event.preventDefault()
-    })
-
-    this.rootElement.addEventListener('contextmenu', (event: Event) => {
-      event.preventDefault()
-    })
-
-    this.rootElement.addEventListener('dragstart', (event) => {
-      if (event.ctrlKey) {
-        event.preventDefault()
-      }
-    })
-  }
-
-  private async createBrush() {
-    var brush = document.createElement('div')
-    await this.messageBroker.pull('brushSettings')
-    brush.id = 'maskEditor_brush'
-
-    var brush_preview_gradient = document.createElement('div')
-    brush_preview_gradient.id = 'maskEditor_brushPreviewGradient'
-
-    brush.appendChild(brush_preview_gradient)
-
-    this.brush = brush
-    this.brushPreviewGradient = brush_preview_gradient
-
-    return brush
-  }
-
-  async setImages(imgCanvas: HTMLCanvasElement) {
-    const imgCtx = imgCanvas.getContext('2d', { willReadFrequently: true })
-    const maskCtx = this.maskCtx
-    const maskCanvas = this.maskCanvas
-
-    const rgbCanvas = this.rgbCanvas
-
-    imgCtx!.clearRect(0, 0, this.imgCanvas.width, this.imgCanvas.height)
-    maskCtx.clearRect(0, 0, this.maskCanvas.width, this.maskCanvas.height)
-
-    const mainImageUrl =
-      ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src
-
-    // original image load
-    if (!mainImageUrl) {
-      throw new Error(
-        'Unable to access image source - clipspace or image is null'
-      )
-    }
-
-    const mainImageFilename =
-      new URL(mainImageUrl).searchParams.get('filename') ?? undefined
-
-    let combinedImageFilename: string | null | undefined
-    if (
-      ComfyApp.clipspace?.combinedIndex !== undefined &&
-      ComfyApp.clipspace?.imgs &&
-      ComfyApp.clipspace.combinedIndex < ComfyApp.clipspace.imgs.length &&
-      ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex]?.src
-    ) {
-      combinedImageFilename = new URL(
-        ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src
-      ).searchParams.get('filename')
-    } else {
-      combinedImageFilename = undefined
-    }
-
-    const imageLayerFilenames =
-      mainImageFilename !== undefined
-        ? imageLayerFilenamesIfApplicable(
-            combinedImageFilename ?? mainImageFilename
-          )
-        : undefined
-
-    const inputUrls = {
-      baseImagePlusMask: imageLayerFilenames?.maskedImage
-        ? mkFileUrl({ ref: toRef(imageLayerFilenames.maskedImage) })
-        : mainImageUrl,
-      paintLayer: imageLayerFilenames?.paint
-        ? mkFileUrl({ ref: toRef(imageLayerFilenames.paint) })
-        : undefined
-    }
-
-    const alpha_url = new URL(inputUrls.baseImagePlusMask)
-    alpha_url.searchParams.delete('channel')
-    alpha_url.searchParams.delete('preview')
-    alpha_url.searchParams.set('channel', 'a')
-    let mask_image: HTMLImageElement = await this.loadImage(alpha_url)
-
-    const rgb_url = new URL(inputUrls.baseImagePlusMask)
-    this.imageURL = rgb_url
-    rgb_url.searchParams.delete('channel')
-    rgb_url.searchParams.set('channel', 'rgb')
-    this.image = new Image()
-
-    this.image = await new Promise<HTMLImageElement>((resolve, reject) => {
-      const img = new Image()
-      img.crossOrigin = 'anonymous'
-      img.onload = () => resolve(img)
-      img.onerror = reject
-      img.src = rgb_url.toString()
-    })
-
-    if (inputUrls.paintLayer) {
-      const paintURL = new URL(inputUrls.paintLayer)
-      this.paint_image = new Image()
-      this.paint_image = await new Promise<HTMLImageElement>(
-        (resolve, reject) => {
-          const img = new Image()
-          img.crossOrigin = 'anonymous'
-          img.onload = () => resolve(img)
-          img.onerror = reject
-          img.src = paintURL.toString()
-        }
-      )
-    }
-
-    maskCanvas.width = this.image.width
-    maskCanvas.height = this.image.height
-
-    rgbCanvas.width = this.image.width
-    rgbCanvas.height = this.image.height
-
-    this.dimensionsTextHTML.innerText = `${this.image.width}x${this.image.height}`
-
-    await this.invalidateCanvas(this.image, mask_image, this.paint_image)
-    this.messageBroker.publish('initZoomPan', [this.image, this.rootElement])
-  }
-
-  async invalidateCanvas(
-    orig_image: HTMLImageElement,
-    mask_image: HTMLImageElement,
-    paint_image: HTMLImageElement
-  ) {
-    this.imgCanvas.width = orig_image.width
-    this.imgCanvas.height = orig_image.height
-
-    this.maskCanvas.width = orig_image.width
-    this.maskCanvas.height = orig_image.height
-
-    this.rgbCanvas.width = orig_image.width
-    this.rgbCanvas.height = orig_image.height
-
-    let imgCtx = this.imgCanvas.getContext('2d', { willReadFrequently: true })
-    let maskCtx = this.maskCanvas.getContext('2d', {
-      willReadFrequently: true
-    })
-    let rgbCtx = this.rgbCanvas.getContext('2d', {
-      willReadFrequently: true
-    })
-
-    imgCtx!.drawImage(orig_image, 0, 0, orig_image.width, orig_image.height)
-    if (paint_image) {
-      rgbCtx!.drawImage(
-        paint_image,
-        0,
-        0,
-        paint_image.width,
-        paint_image.height
-      )
-    }
-    await this.prepare_mask(
-      mask_image,
-      this.maskCanvas,
-      maskCtx!,
-      await this.getMaskColor()
-    )
-  }
-
-  private async prepare_mask(
-    image: HTMLImageElement,
-    maskCanvas: HTMLCanvasElement,
-    maskCtx: CanvasRenderingContext2D,
-    maskColor: { r: number; g: number; b: number }
-  ) {
-    // paste mask data into alpha channel
-    maskCtx.drawImage(image, 0, 0, maskCanvas.width, maskCanvas.height)
-    const maskData = maskCtx.getImageData(
-      0,
-      0,
-      maskCanvas.width,
-      maskCanvas.height
-    )
-
-    // invert mask
-    for (let i = 0; i < maskData.data.length; i += 4) {
-      const alpha = maskData.data[i + 3]
-      maskData.data[i] = maskColor.r
-      maskData.data[i + 1] = maskColor.g
-      maskData.data[i + 2] = maskColor.b
-      maskData.data[i + 3] = 255 - alpha
-    }
-
-    maskCtx.globalCompositeOperation = 'source-over'
-    maskCtx.putImageData(maskData, 0, 0)
-  }
-
-  private async updateMaskColor() {
-    // update mask canvas css styles
-    const maskCanvasStyle = this.getMaskCanvasStyle()
-    this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode
-    this.maskCanvas.style.opacity = maskCanvasStyle.opacity.toString()
-
-    // update mask canvas rgb colors
-    const maskColor = await this.getMaskColor()
-    this.maskCtx.fillStyle = `rgb(${maskColor.r}, ${maskColor.g}, ${maskColor.b})`
-
-    //set canvas background color
-    this.setCanvasBackground()
-
-    const maskData = this.maskCtx.getImageData(
-      0,
-      0,
-      this.maskCanvas.width,
-      this.maskCanvas.height
-    )
-    for (let i = 0; i < maskData.data.length; i += 4) {
-      maskData.data[i] = maskColor.r
-      maskData.data[i + 1] = maskColor.g
-      maskData.data[i + 2] = maskColor.b
-    }
-    this.maskCtx.putImageData(maskData, 0, 0)
-  }
-
-  getMaskCanvasStyle() {
-    if (this.maskBlendMode === MaskBlendMode.Negative) {
-      return {
-        mixBlendMode: 'difference',
-        opacity: '1'
-      }
-    } else {
-      return {
-        mixBlendMode: 'initial',
-        opacity: this.mask_opacity
-      }
-    }
-  }
-
-  private detectLightMode() {
-    this.darkMode = document.body.classList.contains('dark-theme')
-  }
-
-  private loadImage(imagePath: URL): Promise<HTMLImageElement> {
-    return new Promise((resolve, reject) => {
-      const image = new Image() as HTMLImageElement
-      image.crossOrigin = 'anonymous'
-      image.onload = function () {
-        resolve(image)
-      }
-      image.onerror = function (error) {
-        reject(error)
-      }
-      image.src = imagePath.href
-    })
-  }
-
-  async updateBrushPreview() {
-    const cursorPoint = await this.messageBroker.pull('cursorPoint')
-    const pan_offset = await this.messageBroker.pull('panOffset')
-    const brushSettings = await this.messageBroker.pull('brushSettings')
-    const zoom_ratio = await this.messageBroker.pull('zoomRatio')
-    const centerX = cursorPoint.x + pan_offset.x
-    const centerY = cursorPoint.y + pan_offset.y
-    const brush = this.brush
-    const hardness = brushSettings.hardness
-
-    // Now that brush size is constant, preview is simple
-    const brushRadius = brushSettings.size * zoom_ratio
-    const previewSize = brushRadius * 2
-
-    this.brushSizeSlider.value = String(brushSettings.size)
-    this.brushHardnessSlider.value = String(hardness)
-
-    brush.style.width = previewSize + 'px'
-    brush.style.height = previewSize + 'px'
-    brush.style.left = centerX - brushRadius + 'px'
-    brush.style.top = centerY - brushRadius + 'px'
-
-    if (hardness === 1) {
-      this.brushPreviewGradient.style.background = 'rgba(255, 0, 0, 0.5)'
-      return
-    }
-
-    // Simplified gradient - hardness controls where the fade starts
-    const midStop = hardness * 100
-    const outerStop = 100
-
-    this.brushPreviewGradient.style.background = `
-      radial-gradient(
-        circle,
-        rgba(255, 0, 0, 0.5) 0%,
-        rgba(255, 0, 0, 0.25) ${midStop}%,
-        rgba(255, 0, 0, 0) ${outerStop}%
-      )
-    `
-  }
-
-  getMaskBlendMode() {
-    return this.maskBlendMode
-  }
-
-  setSidebarImage() {
-    this.sidebarImage.src = this.imageURL.href
-  }
-
-  async getMaskColor() {
-    if (this.maskBlendMode === MaskBlendMode.Black) {
-      return { r: 0, g: 0, b: 0 }
-    }
-    if (this.maskBlendMode === MaskBlendMode.White) {
-      return { r: 255, g: 255, b: 255 }
-    }
-    if (this.maskBlendMode === MaskBlendMode.Negative) {
-      // negative effect only works with white color
-      return { r: 255, g: 255, b: 255 }
-    }
-
-    return { r: 0, g: 0, b: 0 }
-  }
-
-  async getMaskFillStyle() {
-    const maskColor = await this.getMaskColor()
-
-    return 'rgb(' + maskColor.r + ',' + maskColor.g + ',' + maskColor.b + ')'
-  }
-
-  async setCanvasBackground() {
-    if (this.maskBlendMode === MaskBlendMode.White) {
-      this.canvasBackground.style.background = 'black'
-    } else {
-      this.canvasBackground.style.background = 'white'
-    }
-  }
-
-  getMaskCanvas() {
-    return this.maskCanvas
-  }
-
-  getImgCanvas() {
-    return this.imgCanvas
-  }
-
-  getRgbCanvas() {
-    return this.rgbCanvas
-  }
-
-  getImage() {
-    return this.image
-  }
-
-  setBrushOpacity(opacity: number) {
-    this.brush.style.opacity = String(opacity)
-  }
-
-  setSaveButtonEnabled(enabled: boolean) {
-    this.saveButton.disabled = !enabled
-  }
-
-  setSaveButtonText(text: string) {
-    this.saveButton.innerText = text
-  }
-
-  handlePaintBucketCursor(isPaintBucket: boolean) {
-    if (isPaintBucket) {
-      this.pointerZone.style.cursor =
-        "url('/cursor/paintBucket.png') 30 25, auto"
-    } else {
-      this.pointerZone.style.cursor = 'none'
-    }
-  }
-
-  handlePanCursor(isPanning: boolean) {
-    if (isPanning) {
-      this.pointerZone.style.cursor = 'grabbing'
-    } else {
-      this.pointerZone.style.cursor = 'none'
-    }
-  }
-
-  setBrushVisibility(visible: boolean) {
-    this.brush.style.opacity = visible ? '1' : '0'
-  }
-
-  setBrushPreviewGradientVisibility(visible: boolean) {
-    this.brushPreviewGradient.style.display = visible ? 'block' : 'none'
-  }
-
-  async updateCursor() {
-    const currentTool = await this.messageBroker.pull('currentTool')
-    if (currentTool === Tools.MaskBucket) {
-      this.pointerZone.style.cursor =
-        "url('/cursor/paintBucket.png') 30 25, auto"
-      this.setBrushOpacity(0)
-    } else if (currentTool === Tools.MaskColorFill) {
-      this.pointerZone.style.cursor =
-        "url('/cursor/colorSelect.png') 15 25, auto"
-      this.setBrushOpacity(0)
-    } else {
-      this.pointerZone.style.cursor = 'none'
-      this.setBrushOpacity(1)
-    }
-
-    this.updateBrushPreview()
-    this.setBrushPreviewGradientVisibility(false)
-  }
-
-  setZoomText(zoomText: string) {
-    this.zoomTextHTML.innerText = zoomText
-  }
-
-  setDimensionsText(dimensionsText: string) {
-    this.dimensionsTextHTML.innerText = dimensionsText
-  }
-}
-
-class ToolManager {
-  maskEditor: MaskEditorDialog
-  messageBroker: MessageBroker
-  mouseDownPoint: Point | null = null
-
-  currentTool: Tools = Tools.MaskPen
-  isAdjustingBrush: boolean = false // is user adjusting brush size or hardness with alt + right mouse button
-
-  constructor(maskEditor: MaskEditorDialog) {
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-    this.addListeners()
-    this.addPullTopics()
-  }
-
-  private addListeners() {
-    this.messageBroker.subscribe('setTool', async (tool: Tools) => {
-      this.setTool(tool)
-    })
-
-    this.messageBroker.subscribe('pointerDown', async (event: PointerEvent) => {
-      this.handlePointerDown(event)
-    })
-
-    this.messageBroker.subscribe('pointerMove', async (event: PointerEvent) => {
-      this.handlePointerMove(event)
-    })
-
-    this.messageBroker.subscribe('pointerUp', async (event: PointerEvent) => {
-      this.handlePointerUp(event)
-    })
-
-    this.messageBroker.subscribe('wheel', async (event: WheelEvent) => {
-      this.handleWheelEvent(event)
-    })
-  }
-
-  private async addPullTopics() {
-    this.messageBroker.createPullTopic('currentTool', async () =>
-      this.getCurrentTool()
-    )
-  }
-
-  //tools
-
-  setTool(tool: Tools) {
-    this.currentTool = tool
-
-    if (tool != Tools.MaskColorFill) {
-      this.messageBroker.publish('clearLastPoint')
-    }
-  }
-
-  getCurrentTool() {
-    return this.currentTool
-  }
-
-  private async handlePointerDown(event: PointerEvent) {
-    event.preventDefault()
-    if (event.pointerType == 'touch') return
-
-    var isSpacePressed = await this.messageBroker.pull('isKeyPressed', ' ')
-
-    // Pan canvas
-    if (event.buttons === 4 || (event.buttons === 1 && isSpacePressed)) {
-      this.messageBroker.publish('panStart', event)
-      this.messageBroker.publish('setBrushVisibility', false)
-      return
-    }
-
-    // RGB painting
-    if (this.currentTool === Tools.PaintPen && event.button === 0) {
-      this.messageBroker.publish('drawStart', event)
-      this.messageBroker.publish('saveState')
-      return
-    }
-
-    // RGB painting
-    if (this.currentTool === Tools.PaintPen && event.buttons === 1) {
-      this.messageBroker.publish('draw', event)
-      return
-    }
-
-    //paint bucket
-    if (this.currentTool === Tools.MaskBucket && event.button === 0) {
-      const offset = { x: event.offsetX, y: event.offsetY }
-      const coords_canvas = await this.messageBroker.pull(
-        'screenToCanvas',
-        offset
-      )
-      this.messageBroker.publish('paintBucketFill', coords_canvas)
-      this.messageBroker.publish('saveState')
-      return
-    }
-
-    if (this.currentTool === Tools.MaskColorFill && event.button === 0) {
-      const offset = { x: event.offsetX, y: event.offsetY }
-      const coords_canvas = await this.messageBroker.pull(
-        'screenToCanvas',
-        offset
-      )
-      this.messageBroker.publish('colorSelectFill', coords_canvas)
-      return
-    }
-
-    // (brush resize/change hardness) Check for alt + right mouse button
-    if (event.altKey && event.button === 2) {
-      this.isAdjustingBrush = true
-      this.messageBroker.publish('brushAdjustmentStart', event)
-      return
-    }
-
-    var isDrawingTool = [Tools.MaskPen, Tools.Eraser, Tools.PaintPen].includes(
-      this.currentTool
-    )
-    //drawing
-    if ([0, 2].includes(event.button) && isDrawingTool) {
-      this.messageBroker.publish('drawStart', event)
-      return
-    }
-  }
-
-  private async handlePointerMove(event: PointerEvent) {
-    event.preventDefault()
-    if (event.pointerType == 'touch') return
-    const newCursorPoint = { x: event.clientX, y: event.clientY }
-    this.messageBroker.publish('cursorPoint', newCursorPoint)
-
-    var isSpacePressed = await this.messageBroker.pull('isKeyPressed', ' ')
-    this.messageBroker.publish('updateBrushPreview')
-
-    //move the canvas
-    if (event.buttons === 4 || (event.buttons === 1 && isSpacePressed)) {
-      this.messageBroker.publish('panMove', event)
-      return
-    }
-
-    //prevent drawing with other tools
-
-    var isDrawingTool = [Tools.MaskPen, Tools.Eraser, Tools.PaintPen].includes(
-      this.currentTool
-    )
-    if (!isDrawingTool) return
-
-    // alt + right mouse button hold brush adjustment
-    if (
-      this.isAdjustingBrush &&
-      (this.currentTool === Tools.MaskPen ||
-        this.currentTool === Tools.Eraser) &&
-      event.altKey &&
-      event.buttons === 2
-    ) {
-      this.messageBroker.publish('brushAdjustment', event)
-      return
-    }
-
-    //draw with pen or eraser
-    if (event.buttons == 1 || event.buttons == 2) {
-      this.messageBroker.publish('draw', event)
-      return
-    }
-  }
-
-  private handlePointerUp(event: PointerEvent) {
-    this.messageBroker.publish('panCursor', false)
-    if (event.pointerType === 'touch') return
-    this.messageBroker.publish('updateCursor')
-    this.isAdjustingBrush = false
-    this.messageBroker.publish('drawEnd', event)
-    this.mouseDownPoint = null
-  }
-
-  private handleWheelEvent(event: WheelEvent) {
-    this.messageBroker.publish('zoom', event)
-    const newCursorPoint = { x: event.clientX, y: event.clientY }
-    this.messageBroker.publish('cursorPoint', newCursorPoint)
-  }
-}
-
-class PanAndZoomManager {
-  maskEditor: MaskEditorDialog
-  messageBroker: MessageBroker
-
-  DOUBLE_TAP_DELAY: number = 300
-  lastTwoFingerTap: number = 0
-
-  isTouchZooming: boolean = false
-  lastTouchZoomDistance: number = 0
-  lastTouchMidPoint: Point = { x: 0, y: 0 }
-  lastTouchPoint: Point = { x: 0, y: 0 }
-
-  zoom_ratio: number = 1
-  interpolatedZoomRatio: number = 1
-  pan_offset: Offset = { x: 0, y: 0 }
-
-  mouseDownPoint: Point | null = null
-  initialPan: Offset = { x: 0, y: 0 }
-
-  canvasContainer: HTMLElement | null = null
-  maskCanvas: HTMLCanvasElement | null = null
-  rgbCanvas: HTMLCanvasElement | null = null
-  rootElement: HTMLElement | null = null
-
-  image: HTMLImageElement | null = null
-  imageRootWidth: number = 0
-  imageRootHeight: number = 0
-
-  cursorPoint: Point = { x: 0, y: 0 }
-  penPointerIdList: number[] = []
-
-  constructor(maskEditor: MaskEditorDialog) {
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-
-    this.addListeners()
-    this.addPullTopics()
-  }
-
-  private addListeners() {
-    this.messageBroker.subscribe(
-      'initZoomPan',
-      async (args: [HTMLImageElement, HTMLElement]) => {
-        await this.initializeCanvasPanZoom(args[0], args[1])
-      }
-    )
-
-    this.messageBroker.subscribe('panStart', async (event: PointerEvent) => {
-      this.handlePanStart(event)
-    })
-
-    this.messageBroker.subscribe('panMove', async (event: PointerEvent) => {
-      this.handlePanMove(event)
-    })
-
-    this.messageBroker.subscribe('zoom', async (event: WheelEvent) => {
-      this.zoom(event)
-    })
-
-    this.messageBroker.subscribe('cursorPoint', async (point: Point) => {
-      this.updateCursorPosition(point)
-    })
-
-    this.messageBroker.subscribe('pointerDown', async (event: PointerEvent) => {
-      if (event.pointerType === 'pen')
-        this.penPointerIdList.push(event.pointerId)
-    })
-
-    this.messageBroker.subscribe('pointerUp', async (event: PointerEvent) => {
-      if (event.pointerType === 'pen') {
-        const index = this.penPointerIdList.indexOf(event.pointerId)
-        if (index > -1) this.penPointerIdList.splice(index, 1)
-      }
-    })
-
-    this.messageBroker.subscribe(
-      'handleTouchStart',
-      async (event: TouchEvent) => {
-        this.handleTouchStart(event)
-      }
-    )
-
-    this.messageBroker.subscribe(
-      'handleTouchMove',
-      async (event: TouchEvent) => {
-        this.handleTouchMove(event)
-      }
-    )
-
-    this.messageBroker.subscribe(
-      'handleTouchEnd',
-      async (event: TouchEvent) => {
-        this.handleTouchEnd(event)
-      }
-    )
-
-    this.messageBroker.subscribe('resetZoom', async () => {
-      if (this.interpolatedZoomRatio === 1) return
-      await this.smoothResetView()
-    })
-  }
-
-  private addPullTopics() {
-    this.messageBroker.createPullTopic(
-      'cursorPoint',
-      async () => this.cursorPoint
-    )
-    this.messageBroker.createPullTopic('zoomRatio', async () => this.zoom_ratio)
-    this.messageBroker.createPullTopic('panOffset', async () => this.pan_offset)
-  }
-
-  handleTouchStart(event: TouchEvent) {
-    event.preventDefault()
-
-    // for pen device, if drawing with pen, do not move the canvas
-    if (this.penPointerIdList.length > 0) return
-
-    this.messageBroker.publish('setBrushVisibility', false)
-    if (event.touches.length === 2) {
-      const currentTime = new Date().getTime()
-      const tapTimeDiff = currentTime - this.lastTwoFingerTap
-
-      if (tapTimeDiff < this.DOUBLE_TAP_DELAY) {
-        // Double tap detected
-        this.handleDoubleTap()
-        this.lastTwoFingerTap = 0 // Reset to prevent triple-tap
-      } else {
-        this.lastTwoFingerTap = currentTime
-
-        // Existing two-finger touch logic
-        this.isTouchZooming = true
-        this.lastTouchZoomDistance = this.getTouchDistance(event.touches)
-        const midpoint = this.getTouchMidpoint(event.touches)
-        this.lastTouchMidPoint = midpoint
-      }
-    } else if (event.touches.length === 1) {
-      this.lastTouchPoint = {
-        x: event.touches[0].clientX,
-        y: event.touches[0].clientY
-      }
-    }
-  }
-
-  async handleTouchMove(event: TouchEvent) {
-    event.preventDefault()
-
-    // for pen device, if drawing with pen, do not move the canvas
-    if (this.penPointerIdList.length > 0) return
-
-    this.lastTwoFingerTap = 0
-    if (this.isTouchZooming && event.touches.length === 2) {
-      // Handle zooming
-      const newDistance = this.getTouchDistance(event.touches)
-      const zoomFactor = newDistance / this.lastTouchZoomDistance
-      const oldZoom = this.zoom_ratio
-      this.zoom_ratio = Math.max(
-        0.2,
-        Math.min(10.0, this.zoom_ratio * zoomFactor)
-      )
-      const newZoom = this.zoom_ratio
-
-      // Calculate the midpoint of the two touches
-      const midpoint = this.getTouchMidpoint(event.touches)
-
-      // Handle panning - calculate the movement of the midpoint
-      if (this.lastTouchMidPoint) {
-        const deltaX = midpoint.x - this.lastTouchMidPoint.x
-        const deltaY = midpoint.y - this.lastTouchMidPoint.y
-
-        // Apply the pan
-        this.pan_offset.x += deltaX
-        this.pan_offset.y += deltaY
-      }
-
-      // Get touch position relative to the container
-      if (this.maskCanvas === null) {
-        this.maskCanvas = await this.messageBroker.pull('maskCanvas')
-      }
-      const rect = this.maskCanvas!.getBoundingClientRect()
-      const touchX = midpoint.x - rect.left
-      const touchY = midpoint.y - rect.top
-
-      // Calculate new pan position based on zoom
-      const scaleFactor = newZoom / oldZoom
-      this.pan_offset.x += touchX - touchX * scaleFactor
-      this.pan_offset.y += touchY - touchY * scaleFactor
-
-      this.invalidatePanZoom()
-      this.lastTouchZoomDistance = newDistance
-      this.lastTouchMidPoint = midpoint
-    } else if (event.touches.length === 1) {
-      // Handle single touch pan
-      this.handleSingleTouchPan(event.touches[0])
-    }
-  }
-
-  handleTouchEnd(event: TouchEvent) {
-    event.preventDefault()
-
-    const lastTouch = event.touches[0]
-    // if all touches are removed, lastTouch will be null
-    if (lastTouch) {
-      this.lastTouchPoint = {
-        x: lastTouch.clientX,
-        y: lastTouch.clientY
-      }
-    } else {
-      this.isTouchZooming = false
-      this.lastTouchMidPoint = { x: 0, y: 0 }
-    }
-  }
-
-  private getTouchDistance(touches: TouchList) {
-    const dx = touches[0].clientX - touches[1].clientX
-    const dy = touches[0].clientY - touches[1].clientY
-    return Math.sqrt(dx * dx + dy * dy)
-  }
-
-  private getTouchMidpoint(touches: TouchList) {
-    return {
-      x: (touches[0].clientX + touches[1].clientX) / 2,
-      y: (touches[0].clientY + touches[1].clientY) / 2
-    }
-  }
-
-  private async handleSingleTouchPan(touch: Touch) {
-    if (this.lastTouchPoint === null) {
-      this.lastTouchPoint = { x: touch.clientX, y: touch.clientY }
-      return
-    }
-
-    const deltaX = touch.clientX - this.lastTouchPoint.x
-    const deltaY = touch.clientY - this.lastTouchPoint.y
-
-    this.pan_offset.x += deltaX
-    this.pan_offset.y += deltaY
-
-    await this.invalidatePanZoom()
-
-    this.lastTouchPoint = { x: touch.clientX, y: touch.clientY }
-  }
-
-  private updateCursorPosition(clientPoint: Point) {
-    var cursorX = clientPoint.x - this.pan_offset.x
-    var cursorY = clientPoint.y - this.pan_offset.y
-
-    this.cursorPoint = { x: cursorX, y: cursorY }
-  }
-
-  //prob redundant
-  handleDoubleTap() {
-    this.messageBroker.publish('undo')
-    // Add any additional logic needed after undo
-  }
-
-  async zoom(event: WheelEvent) {
-    // Store original cursor position
-    const cursorPoint = { x: event.clientX, y: event.clientY }
-
-    // zoom canvas
-    const oldZoom = this.zoom_ratio
-    const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9
-    this.zoom_ratio = Math.max(
-      0.2,
-      Math.min(10.0, this.zoom_ratio * zoomFactor)
-    )
-    const newZoom = this.zoom_ratio
-
-    const maskCanvas = await this.messageBroker.pull('maskCanvas')
-
-    // Get mouse position relative to the container
-    const rect = maskCanvas.getBoundingClientRect()
-    const mouseX = cursorPoint.x - rect.left
-    const mouseY = cursorPoint.y - rect.top
-
-    console.log(oldZoom, newZoom)
-    // Calculate new pan position
-    const scaleFactor = newZoom / oldZoom
-    this.pan_offset.x += mouseX - mouseX * scaleFactor
-    this.pan_offset.y += mouseY - mouseY * scaleFactor
-
-    // Update pan and zoom immediately
-    await this.invalidatePanZoom()
-
-    const newImageWidth = maskCanvas.clientWidth
-
-    const zoomRatio = newImageWidth / this.imageRootWidth
-
-    this.interpolatedZoomRatio = zoomRatio
-
-    this.messageBroker.publish('setZoomText', `${Math.round(zoomRatio * 100)}%`)
-
-    // Update cursor position with new pan values
-    this.updateCursorPosition(cursorPoint)
-
-    // Update brush preview after pan/zoom is complete
-    requestAnimationFrame(() => {
-      this.messageBroker.publish('updateBrushPreview')
-    })
-  }
-
-  private async smoothResetView(duration: number = 500) {
-    // Store initial state
-    const startZoom = this.zoom_ratio
-    const startPan = { ...this.pan_offset }
-
-    // Panel dimensions
-    const sidePanelWidth = 220
-    const toolPanelWidth = 64
-    const topBarHeight = 44
-
-    // Calculate available space
-    const availableWidth =
-      this.rootElement!.clientWidth - sidePanelWidth - toolPanelWidth
-    const availableHeight = this.rootElement!.clientHeight - topBarHeight
-
-    // Calculate target zoom
-    const zoomRatioWidth = availableWidth / this.image!.width
-    const zoomRatioHeight = availableHeight / this.image!.height
-    const targetZoom = Math.min(zoomRatioWidth, zoomRatioHeight)
-
-    // Calculate final dimensions
-    const aspectRatio = this.image!.width / this.image!.height
-    let finalWidth = 0
-    let finalHeight = 0
-
-    // Calculate target pan position
-    const targetPan = { x: toolPanelWidth, y: topBarHeight }
-
-    if (zoomRatioHeight > zoomRatioWidth) {
-      finalWidth = availableWidth
-      finalHeight = finalWidth / aspectRatio
-      targetPan.y = (availableHeight - finalHeight) / 2 + topBarHeight
-    } else {
-      finalHeight = availableHeight
-      finalWidth = finalHeight * aspectRatio
-      targetPan.x = (availableWidth - finalWidth) / 2 + toolPanelWidth
-    }
-
-    const startTime = performance.now()
-    const animate = (currentTime: number) => {
-      const elapsed = currentTime - startTime
-      const progress = Math.min(elapsed / duration, 1)
-      // Cubic easing out for smooth deceleration
-      const eased = 1 - Math.pow(1 - progress, 3)
-
-      // Calculate intermediate zoom and pan values
-      const currentZoom = startZoom + (targetZoom - startZoom) * eased
-
-      this.zoom_ratio = currentZoom
-      this.pan_offset.x = startPan.x + (targetPan.x - startPan.x) * eased
-      this.pan_offset.y = startPan.y + (targetPan.y - startPan.y) * eased
-
-      this.invalidatePanZoom()
-
-      const interpolatedZoomRatio = startZoom + (1.0 - startZoom) * eased
-
-      this.messageBroker.publish(
-        'setZoomText',
-        `${Math.round(interpolatedZoomRatio * 100)}%`
-      )
-
-      if (progress < 1) {
-        requestAnimationFrame(animate)
-      }
-    }
-
-    requestAnimationFrame(animate)
-    this.interpolatedZoomRatio = 1.0
-  }
-
-  async initializeCanvasPanZoom(
-    image: HTMLImageElement,
-    rootElement: HTMLElement
-  ) {
-    // Get side panel width
-    let sidePanelWidth = 220
-    const toolPanelWidth = 64
-    let topBarHeight = 44
-
-    this.rootElement = rootElement
-
-    // Calculate available width accounting for both side panels
-    let availableWidth =
-      rootElement.clientWidth - sidePanelWidth - toolPanelWidth
-    let availableHeight = rootElement.clientHeight - topBarHeight
-
-    let zoomRatioWidth = availableWidth / image.width
-    let zoomRatioHeight = availableHeight / image.height
-
-    let aspectRatio = image.width / image.height
-
-    let finalWidth = 0
-    let finalHeight = 0
-
-    let pan_offset: Offset = { x: toolPanelWidth, y: topBarHeight }
-
-    if (zoomRatioHeight > zoomRatioWidth) {
-      finalWidth = availableWidth
-      finalHeight = finalWidth / aspectRatio
-      pan_offset.y = (availableHeight - finalHeight) / 2 + topBarHeight
-    } else {
-      finalHeight = availableHeight
-      finalWidth = finalHeight * aspectRatio
-      pan_offset.x = (availableWidth - finalWidth) / 2 + toolPanelWidth
-    }
-
-    if (this.image === null) {
-      this.image = image
-    }
-
-    this.imageRootWidth = finalWidth
-    this.imageRootHeight = finalHeight
-
-    this.zoom_ratio = Math.min(zoomRatioWidth, zoomRatioHeight)
-    this.pan_offset = pan_offset
-
-    this.penPointerIdList = []
-
-    await this.invalidatePanZoom()
-  }
-
-  async invalidatePanZoom() {
-    // Single validation check upfront
-    if (
-      !this.image?.width ||
-      !this.image?.height ||
-      !this.pan_offset ||
-      !this.zoom_ratio
-    ) {
-      console.warn('Missing required properties for pan/zoom')
-      return
-    }
-
-    // Now TypeScript knows these are non-null
-    const raw_width = this.image.width * this.zoom_ratio
-    const raw_height = this.image.height * this.zoom_ratio
-
-    // Get canvas container
-    this.canvasContainer ??=
-      await this.messageBroker?.pull('getCanvasContainer')
-    if (!this.canvasContainer) return
-
-    // Apply styles
-    Object.assign(this.canvasContainer.style, {
-      width: `${raw_width}px`,
-      height: `${raw_height}px`,
-      left: `${this.pan_offset.x}px`,
-      top: `${this.pan_offset.y}px`
-    })
-
-    this.rgbCanvas = await this.messageBroker.pull('rgbCanvas')
-    if (this.rgbCanvas) {
-      // Ensure the canvas has the proper dimensions
-      if (
-        this.rgbCanvas.width !== this.image.width ||
-        this.rgbCanvas.height !== this.image.height
-      ) {
-        this.rgbCanvas.width = this.image.width
-        this.rgbCanvas.height = this.image.height
-      }
-
-      // Make sure the style dimensions match the container
-      this.rgbCanvas.style.width = `${raw_width}px`
-      this.rgbCanvas.style.height = `${raw_height}px`
-    }
-  }
-
-  private handlePanStart(event: PointerEvent) {
-    this.messageBroker.pull('screenToCanvas', {
-      x: event.offsetX,
-      y: event.offsetY
-    })
-    this.mouseDownPoint = { x: event.clientX, y: event.clientY }
-    this.messageBroker.publish('panCursor', true)
-    this.initialPan = this.pan_offset
-    return
-  }
-
-  private handlePanMove(event: PointerEvent) {
-    if (this.mouseDownPoint === null) throw new Error('mouseDownPoint is null')
-
-    let deltaX = this.mouseDownPoint.x - event.clientX
-    let deltaY = this.mouseDownPoint.y - event.clientY
-
-    let pan_x = this.initialPan.x - deltaX
-    let pan_y = this.initialPan.y - deltaY
-
-    this.pan_offset = { x: pan_x, y: pan_y }
-
-    this.invalidatePanZoom()
-  }
-}
-
-class MessageBroker {
-  private pushTopics: Record<string, Callback[]> = {}
-  private pullTopics: Record<string, (data?: any) => Promise<any>> = {}
-
-  constructor() {
-    this.registerListeners()
-  }
-
-  // Push
-
-  private registerListeners() {
-    // Register listeners
-    this.createPushTopic('panStart')
-    this.createPushTopic('paintBucketFill')
-    this.createPushTopic('saveState')
-    this.createPushTopic('brushAdjustmentStart')
-    this.createPushTopic('drawStart')
-    this.createPushTopic('panMove')
-    this.createPushTopic('updateBrushPreview')
-    this.createPushTopic('brushAdjustment')
-    this.createPushTopic('draw')
-    this.createPushTopic('paintBucketCursor')
-    this.createPushTopic('panCursor')
-    this.createPushTopic('drawEnd')
-    this.createPushTopic('zoom')
-    this.createPushTopic('undo')
-    this.createPushTopic('redo')
-    this.createPushTopic('cursorPoint')
-    this.createPushTopic('panOffset')
-    this.createPushTopic('zoomRatio')
-    this.createPushTopic('getMaskCanvas')
-    this.createPushTopic('getCanvasContainer')
-    this.createPushTopic('screenToCanvas')
-    this.createPushTopic('isKeyPressed')
-    this.createPushTopic('isCombinationPressed')
-    this.createPushTopic('setPaintBucketTolerance')
-    this.createPushTopic('setBrushSize')
-    this.createPushTopic('setBrushHardness')
-    this.createPushTopic('setBrushOpacity')
-    this.createPushTopic('setBrushShape')
-    this.createPushTopic('initZoomPan')
-    this.createPushTopic('setTool')
-    this.createPushTopic('setActiveLayer')
-    this.createPushTopic('pointerDown')
-    this.createPushTopic('pointerMove')
-    this.createPushTopic('pointerUp')
-    this.createPushTopic('wheel')
-    this.createPushTopic('initPaintBucketTool')
-    this.createPushTopic('setBrushVisibility')
-    this.createPushTopic('setBrushPreviewGradientVisibility')
-    this.createPushTopic('handleTouchStart')
-    this.createPushTopic('handleTouchMove')
-    this.createPushTopic('handleTouchEnd')
-    this.createPushTopic('colorSelectFill')
-    this.createPushTopic('setColorSelectTolerance')
-    this.createPushTopic('setLivePreview')
-    this.createPushTopic('updateCursor')
-    this.createPushTopic('setColorComparisonMethod')
-    this.createPushTopic('clearLastPoint')
-    this.createPushTopic('setWholeImage')
-    this.createPushTopic('setMaskBoundary')
-    this.createPushTopic('setMaskTolerance')
-    this.createPushTopic('setBrushSmoothingPrecision')
-    this.createPushTopic('setZoomText')
-    this.createPushTopic('resetZoom')
-    this.createPushTopic('invert')
-    this.createPushTopic('setRGBColor')
-    this.createPushTopic('paintedurl')
-    this.createPushTopic('setSelectionOpacity')
-    this.createPushTopic('setFillOpacity')
-  }
-
-  /**
-   * Creates a new push topic (listener is notified)
-   *
-   * @param {string} topicName - The name of the topic to create.
-   * @throws {Error} If the topic already exists.
-   */
-  createPushTopic(topicName: string) {
-    if (this.topicExists(this.pushTopics, topicName)) {
-      throw new Error('Topic already exists')
-    }
-    this.pushTopics[topicName] = []
-  }
-
-  /**
-   * Subscribe a callback function to the given topic.
-   *
-   * @param {string} topicName - The name of the topic to subscribe to.
-   * @param {Callback} callback - The callback function to be subscribed.
-   * @throws {Error} If the topic does not exist.
-   */
-  subscribe(topicName: string, callback: Callback) {
-    if (!this.topicExists(this.pushTopics, topicName)) {
-      throw new Error(`Topic "${topicName}" does not exist!`)
-    }
-    this.pushTopics[topicName].push(callback)
-  }
-
-  /**
-   * Removes a callback function from the list of subscribers for a given topic.
-   *
-   * @param {string} topicName - The name of the topic to unsubscribe from.
-   * @param {Callback} callback - The callback function to remove from the subscribers list.
-   * @throws {Error} If the topic does not exist in the list of topics.
-   */
-  unsubscribe(topicName: string, callback: Callback) {
-    if (!this.topicExists(this.pushTopics, topicName)) {
-      throw new Error('Topic does not exist')
-    }
-    const index = this.pushTopics[topicName].indexOf(callback)
-    if (index > -1) {
-      this.pushTopics[topicName].splice(index, 1)
-    }
-  }
-
-  /**
-   * Publishes data to a specified topic with variable number of arguments.
-   * @param {string} topicName - The name of the topic to publish to.
-   * @param {...any[]} args - Variable number of arguments to pass to subscribers
-   * @throws {Error} If the specified topic does not exist.
-   */
-  publish(topicName: string, ...args: any[]) {
-    if (!this.topicExists(this.pushTopics, topicName)) {
-      throw new Error(`Topic "${topicName}" does not exist!`)
-    }
-
-    this.pushTopics[topicName].forEach((callback) => {
-      callback(...args)
-    })
-  }
-
-  // Pull
-
-  /**
-   * Creates a new pull topic (listener must request data)
-   *
-   * @param {string} topicName - The name of the topic to create.
-   * @param {() => Promise<any>} callBack - The callback function to be called when data is requested.
-   * @throws {Error} If the topic already exists.
-   */
-  createPullTopic(topicName: string, callBack: (data?: any) => Promise<any>) {
-    if (this.topicExists(this.pullTopics, topicName)) {
-      throw new Error('Topic already exists')
-    }
-    this.pullTopics[topicName] = callBack
-  }
-
-  /**
-   * Requests data from a specified pull topic.
-   * @param {string} topicName - The name of the topic to request data from.
-   * @returns {Promise<any>} - The data from the pull topic.
-   * @throws {Error} If the specified topic does not exist.
-   */
-  async pull(topicName: string, data?: any): Promise<any> {
-    if (!this.topicExists(this.pullTopics, topicName)) {
-      throw new Error('Topic does not exist')
-    }
-
-    const callBack = this.pullTopics[topicName]
-    try {
-      const result = await callBack(data)
-      return result
-    } catch (error) {
-      console.error(`Error pulling data from topic "${topicName}":`, error)
-      throw error
-    }
-  }
-
-  // Helper Methods
-
-  /**
-   * Checks if a topic exists in the given topics object.
-   * @param {Record<string, any>} topics - The topics object to check.
-   * @param {string} topicName - The name of the topic to check.
-   * @returns {boolean} - True if the topic exists, false otherwise.
-   */
-  private topicExists(topics: Record<string, any>, topicName: string): boolean {
-    return topics.hasOwnProperty(topicName)
-  }
-}
-
-class KeyboardManager {
-  private keysDown: string[] = []
-
-  // @ts-expect-error unused variable
-  private maskEditor: MaskEditorDialog
-  private messageBroker: MessageBroker
-
-  // Bound functions, for use in addListeners and removeListeners
-  private handleKeyDownBound = this.handleKeyDown.bind(this)
-  private handleKeyUpBound = this.handleKeyUp.bind(this)
-  private clearKeysBound = this.clearKeys.bind(this)
-
-  constructor(maskEditor: MaskEditorDialog) {
-    this.maskEditor = maskEditor
-    this.messageBroker = maskEditor.getMessageBroker()
-    this.addPullTopics()
-  }
-
-  private addPullTopics() {
-    // isKeyPressed
-    this.messageBroker.createPullTopic('isKeyPressed', (key: string) =>
-      Promise.resolve(this.isKeyDown(key))
-    )
-  }
-
-  addListeners() {
-    document.addEventListener('keydown', this.handleKeyDownBound)
-    document.addEventListener('keyup', this.handleKeyUpBound)
-    window.addEventListener('blur', this.clearKeysBound)
-  }
-
-  removeListeners() {
-    document.removeEventListener('keydown', this.handleKeyDownBound)
-    document.removeEventListener('keyup', this.handleKeyUpBound)
-    window.removeEventListener('blur', this.clearKeysBound)
-  }
-
-  private clearKeys() {
-    this.keysDown = []
-  }
-
-  private handleKeyDown(event: KeyboardEvent) {
-    if (!this.keysDown.includes(event.key)) {
-      this.keysDown.push(event.key)
-    }
-    if ((event.ctrlKey || event.metaKey) && !event.altKey) {
-      const key = event.key.toUpperCase()
-      // Redo: Ctrl + Y, or Ctrl + Shift + Z
-      if ((key === 'Y' && !event.shiftKey) || (key == 'Z' && event.shiftKey)) {
-        this.messageBroker.publish('redo')
-      } else if (key === 'Z' && !event.shiftKey) {
-        this.messageBroker.publish('undo')
-      }
-    }
-  }
-
-  private handleKeyUp(event: KeyboardEvent) {
-    this.keysDown = this.keysDown.filter((key) => key !== event.key)
-  }
-
-  private isKeyDown(key: string) {
-    return this.keysDown.includes(key)
-  }
-}
+// Import styles to inject into document
+import './maskeditor/styles'
 
 // Function to open the mask editor
 function openMaskEditor(): void {
@@ -5536,169 +143,3 @@ const changeBrushSize = async (sizeChanger: (oldSize: number) => number) => {
   messageBroker.publish('setBrushSize', newBrushSize)
   messageBroker.publish('updateBrushPreview')
 }
-
-const requestWithRetries = async (
-  mkRequest: () => Promise<Response>,
-  maxRetries: number = 3
-): Promise<{ success: boolean }> => {
-  let attempt = 0
-  let success = false
-  while (attempt < maxRetries && !success) {
-    try {
-      const response = await mkRequest()
-      if (response.ok) {
-        success = true
-      } else {
-        console.log('Failed to upload mask:', response)
-      }
-    } catch (error) {
-      console.error(`Upload attempt ${attempt + 1} failed:`, error)
-      attempt++
-      if (attempt < maxRetries) {
-        console.log('Retrying upload...')
-      } else {
-        console.log('Max retries reached. Upload failed.')
-      }
-    }
-  }
-  return { success }
-}
-
-const isAlphaValue = (index: number) => index % 4 === 3
-
-const removeImageRgbValuesAndInvertAlpha = (imageData: Uint8ClampedArray) =>
-  imageData.map((val, i) => (isAlphaValue(i) ? 255 - val : 0))
-
-type Ref = { filename: string; subfolder?: string; type?: string }
-
-/**
- * Note: the images' positions are important here. What the positions mean is hardcoded in `src/scripts/app.ts` in the `copyToClipspace` method.
- * - `newMainOutput` should be the fully composited image: base image + mask (in the alpha channel) + paint.
- * - The first array element of `extraImagesShownButNotOutputted` should be JUST the paint layer, with a transparent background.
- * - It is possible to add more images in the clipspace array, but is not useful currently.
- * With this configuration, the MaskEditor will properly load the paint layer separately from the base image, ensuring it is editable.
- * */
-const replaceClipspaceImages = (
-  newMainOutput: Ref,
-  otherImagesInClipspace?: Ref[]
-) => {
-  try {
-    if (!ComfyApp?.clipspace?.widgets?.length) return
-    const firstImageWidgetIndex = ComfyApp.clipspace.widgets.findIndex(
-      (obj) => obj?.name === 'image'
-    )
-    const firstImageWidget = ComfyApp.clipspace.widgets[firstImageWidgetIndex]
-    if (!firstImageWidget) return
-
-    ComfyApp!.clipspace!.widgets![firstImageWidgetIndex].value = newMainOutput
-
-    otherImagesInClipspace?.forEach((extraImage, extraImageIndex) => {
-      const extraImageWidgetIndex = firstImageWidgetIndex + extraImageIndex + 1
-      ComfyApp!.clipspace!.widgets![extraImageWidgetIndex].value = extraImage
-    })
-  } catch (err) {
-    console.warn('Failed to set widget value:', err)
-  }
-}
-
-const ensureImageFullyLoaded = (src: string) =>
-  new Promise<void>((resolve, reject) => {
-    const maskImage = new Image()
-    maskImage.src = src
-    maskImage.onload = () => resolve()
-    maskImage.onerror = reject
-  })
-
-const createCanvasCopy = (
-  canvas: HTMLCanvasElement
-): [HTMLCanvasElement, CanvasRenderingContext2D] => {
-  const newCanvas = document.createElement('canvas')
-  const newCanvasCtx = getCanvas2dContext(newCanvas)
-  newCanvas.width = canvas.width
-  newCanvas.height = canvas.height
-  newCanvasCtx.clearRect(0, 0, canvas.width, canvas.height)
-  newCanvasCtx.drawImage(
-    canvas,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-    0,
-    0,
-    canvas.width,
-    canvas.height
-  )
-  return [newCanvas, newCanvasCtx]
-}
-
-const getCanvas2dContext = (
-  canvas: HTMLCanvasElement
-): CanvasRenderingContext2D => {
-  const ctx = canvas.getContext('2d', { willReadFrequently: true })
-  // Safe with the way we use canvases
-  if (!ctx) throw new Error('Failed to get 2D context from canvas')
-  return ctx
-}
-
-const combineOriginalImageAndPaint = (
-  canvases: Record<'originalImage' | 'paint', HTMLCanvasElement>
-): [HTMLCanvasElement, CanvasRenderingContext2D] => {
-  const { originalImage, paint } = canvases
-  const [resultCanvas, resultCanvasCtx] = createCanvasCopy(originalImage)
-  resultCanvasCtx.drawImage(paint, 0, 0)
-  return [resultCanvas, resultCanvasCtx]
-}
-
-const iconsHtml: Record<Tools, string> = {
-  [Tools.MaskPen]: `
-    <svg viewBox="0 0 44 44">
-      <path class="cls-1" d="M10.97,15.98v14.04c0,.825.675,1.5,1.5,1.5h23.07c.825,0,1.5-.675,1.5-1.5V15.98c0-.825-.675-1.5-1.5-1.5H12.47c-.825,0-1.5.675-1.5,1.5ZM25.79,28.16c-4.365,1.41-8.355-2.58-6.945-6.945.51-1.575,1.785-2.85,3.36-3.36,4.365-1.41,8.355,2.58,6.945,6.945-.51,1.575-1.785,2.85-3.36,3.36Z"/>
-    </svg>
-  `,
-  [Tools.Eraser]: `
-    <svg viewBox="0 0 44 44">
-      <g>
-        <rect class="cls-2" x="16.68" y="10" width="10.63" height="24" rx="1.16" ry="1.16" transform="translate(22 -9.11) rotate(45)"/>
-        <path class="cls-1" d="M17.27,34.27c-.42,0-.85-.16-1.17-.48l-5.88-5.88c-.31-.31-.48-.73-.48-1.17s.17-.86.48-1.17l15.34-15.34c.62-.62,1.72-.62,2.34,0l5.88,5.88c.65.65.65,1.7,0,2.34l-15.34,15.34c-.32.32-.75.48-1.17.48ZM26.73,10.73c-.18,0-.34.07-.46.19l-15.34,15.34c-.12.12-.19.29-.19.46s.07.34.19.46l5.88,5.88c.26.26.67.26.93,0l15.34-15.34c.26-.26.26-.67,0-.93l-5.88-5.88c-.12-.12-.29-.19-.46-.19Z"/>
-      </g>
-      <path class="cls-3" d="M20.33,11.03h8.32c.64,0,1.16.52,1.16,1.16v15.79h-10.63v-15.79c0-.64.52-1.16,1.16-1.16Z" transform="translate(20.97 -11.61) rotate(45)"/>
-    </svg>
-  `,
-  [Tools.MaskBucket]: `
-    <svg viewBox="0 0 44 44">
-      <path class="cls-1" d="M33.4,21.76l-11.42,11.41-.04.05c-.61.61-1.6.61-2.21,0l-8.91-8.91c-.61-.61-.61-1.6,0-2.21l.04-.05.3-.29h22.24Z"/>
-      <path class="cls-1" d="M20.83,34.17c-.55,0-1.07-.21-1.46-.6l-8.91-8.91c-.8-.8-.8-2.11,0-2.92l11.31-11.31c.8-.8,2.11-.8,2.92,0l8.91,8.91c.39.39.6.91.6,1.46s-.21,1.07-.6,1.46l-11.31,11.31c-.39.39-.91.6-1.46.6ZM23.24,10.83c-.27,0-.54.1-.75.31l-11.31,11.31c-.41.41-.41,1.09,0,1.5l8.91,8.91c.4.4,1.1.4,1.5,0l11.31-11.31c.2-.2.31-.47.31-.75s-.11-.55-.31-.75l-8.91-8.91c-.21-.21-.48-.31-.75-.31Z"/>
-      <path class="cls-1" d="M34.28,26.85c0,.84-.68,1.52-1.52,1.52s-1.52-.68-1.52-1.52,1.52-2.86,1.52-2.86c0,0,1.52,2.02,1.52,2.86Z"/>
-    </svg>
-  `,
-  [Tools.MaskColorFill]: `
-    <svg viewBox="0 0 44 44">
-      <path class="cls-1" d="M30.29,13.72c-1.09-1.1-2.85-1.09-3.94,0l-2.88,2.88-.75-.75c-.2-.19-.51-.19-.71,0-.19.2-.19.51,0,.71l1.4,1.4-9.59,9.59c-.35.36-.54.82-.54,1.32,0,.14,0,.28.05.41-.05.04-.1.08-.15.13-.39.39-.39,1.01,0,1.4.38.39,1.01.39,1.4,0,.04-.04.08-.09.11-.13.14.04.3.06.45.06.5,0,.97-.19,1.32-.55l9.59-9.59,1.38,1.38c.1.09.22.14.35.14s.26-.05.35-.14c.2-.2.2-.52,0-.71l-.71-.72,2.88-2.89c1.08-1.08,1.08-2.85-.01-3.94ZM19.43,25.82h-2.46l7.15-7.15,1.23,1.23-5.92,5.92Z"/>
-    </svg>
-  `,
-  [Tools.PaintPen]: `
-    <svg viewBox="0 0 44 44">
-      <path class="cls-1" d="M34,13.93c0,.47-.19.94-.55,1.31l-13.02,13.04c-.09.07-.18.15-.27.22-.07-1.39-1.21-2.48-2.61-2.49.07-.12.16-.24.27-.34l13.04-13.04c.72-.72,1.89-.72,2.6,0,.35.35.55.83.55,1.3Z"/>
-      <path class="cls-1" d="M19.64,29.03c0,4.46-6.46,3.18-9.64,0,3.3-.47,4.75-2.58,7.06-2.58,1.43,0,2.58,1.16,2.58,2.58Z"/>
-    </svg>
-  `
-}
-
-const toRef = (filename: string): Ref => ({
-  filename,
-  subfolder: 'clipspace',
-  type: 'input'
-})
-
-const mkFileUrl = (props: { ref: Ref; preview?: boolean }) => {
-  const pathPlusQueryParams = api.apiURL(
-    '/view?' +
-      new URLSearchParams(props.ref).toString() +
-      app.getPreviewFormatParam() +
-      app.getRandParam()
-  )
-  const imageElement = new Image()
-  imageElement.src = pathPlusQueryParams
-  const fullyResolvedUrl = imageElement.src
-  return fullyResolvedUrl
-}
diff --git a/src/extensions/core/maskeditor/CanvasHistory.ts b/src/extensions/core/maskeditor/CanvasHistory.ts
new file mode 100644
index 000000000..11a3b7894
--- /dev/null
+++ b/src/extensions/core/maskeditor/CanvasHistory.ts
@@ -0,0 +1,131 @@
+import type { MaskEditorDialog } from './MaskEditorDialog'
+import type { MessageBroker } from './managers/MessageBroker'
+
+export class CanvasHistory {
+  // @ts-expect-error unused variable
+  private maskEditor!: MaskEditorDialog
+  private messageBroker!: MessageBroker
+
+  private canvas!: HTMLCanvasElement
+  private ctx!: CanvasRenderingContext2D
+  private rgbCanvas!: HTMLCanvasElement
+  private rgbCtx!: CanvasRenderingContext2D
+  private states: { mask: ImageData; rgb: ImageData }[] = []
+  private currentStateIndex: number = -1
+  private maxStates: number = 20
+  private initialized: boolean = false
+
+  constructor(maskEditor: MaskEditorDialog, maxStates = 20) {
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+    this.maxStates = maxStates
+    this.createListeners()
+  }
+
+  private async pullCanvas() {
+    this.canvas = await this.messageBroker.pull('maskCanvas')
+    this.ctx = await this.messageBroker.pull('maskCtx')
+    this.rgbCanvas = await this.messageBroker.pull('rgbCanvas')
+    this.rgbCtx = await this.messageBroker.pull('rgbCtx')
+  }
+
+  private createListeners() {
+    this.messageBroker.subscribe('saveState', () => this.saveState())
+    this.messageBroker.subscribe('undo', () => this.undo())
+    this.messageBroker.subscribe('redo', () => this.redo())
+  }
+
+  clearStates() {
+    this.states = []
+    this.currentStateIndex = -1
+    this.initialized = false
+  }
+
+  async saveInitialState() {
+    await this.pullCanvas()
+    if (
+      !this.canvas.width ||
+      !this.canvas.height ||
+      !this.rgbCanvas.width ||
+      !this.rgbCanvas.height
+    ) {
+      // Canvas not ready yet, defer initialization
+      requestAnimationFrame(() => this.saveInitialState())
+      return
+    }
+
+    this.clearStates()
+    const maskState = this.ctx.getImageData(
+      0,
+      0,
+      this.canvas.width,
+      this.canvas.height
+    )
+    const rgbState = this.rgbCtx.getImageData(
+      0,
+      0,
+      this.rgbCanvas.width,
+      this.rgbCanvas.height
+    )
+    this.states.push({ mask: maskState, rgb: rgbState })
+    this.currentStateIndex = 0
+    this.initialized = true
+  }
+
+  saveState() {
+    // Ensure we have an initial state
+    if (!this.initialized || this.currentStateIndex === -1) {
+      this.saveInitialState()
+      return
+    }
+
+    this.states = this.states.slice(0, this.currentStateIndex + 1)
+    const maskState = this.ctx.getImageData(
+      0,
+      0,
+      this.canvas.width,
+      this.canvas.height
+    )
+    const rgbState = this.rgbCtx.getImageData(
+      0,
+      0,
+      this.rgbCanvas.width,
+      this.rgbCanvas.height
+    )
+    this.states.push({ mask: maskState, rgb: rgbState })
+    this.currentStateIndex++
+
+    if (this.states.length > this.maxStates) {
+      this.states.shift()
+      this.currentStateIndex--
+    }
+  }
+
+  undo() {
+    if (this.states.length > 1 && this.currentStateIndex > 0) {
+      this.currentStateIndex--
+      this.restoreState(this.states[this.currentStateIndex])
+    } else {
+      alert('No more undo states available')
+    }
+  }
+
+  redo() {
+    if (
+      this.states.length > 1 &&
+      this.currentStateIndex < this.states.length - 1
+    ) {
+      this.currentStateIndex++
+      this.restoreState(this.states[this.currentStateIndex])
+    } else {
+      alert('No more redo states available')
+    }
+  }
+
+  restoreState(state: { mask: ImageData; rgb: ImageData }) {
+    if (state && this.initialized) {
+      this.ctx.putImageData(state.mask, 0, 0)
+      this.rgbCtx.putImageData(state.rgb, 0, 0)
+    }
+  }
+}
diff --git a/src/extensions/core/maskeditor/MaskEditorDialog.ts b/src/extensions/core/maskeditor/MaskEditorDialog.ts
new file mode 100644
index 000000000..1362069aa
--- /dev/null
+++ b/src/extensions/core/maskeditor/MaskEditorDialog.ts
@@ -0,0 +1,404 @@
+import { t } from '@/i18n'
+import { api } from '../../../scripts/api'
+import { ComfyApp } from '../../../scripts/app'
+import { $el, ComfyDialog } from '../../../scripts/ui'
+import { ClipspaceDialog } from '../clipspace'
+import { imageLayerFilenamesByTimestamp } from './utils/maskEditorLayerFilenames'
+import { CanvasHistory } from './CanvasHistory'
+import { CompositionOperation } from './types'
+import type { Ref } from './types'
+import {
+  UIManager,
+  ToolManager,
+  PanAndZoomManager,
+  KeyboardManager,
+  MessageBroker
+} from './managers'
+import { BrushTool, PaintBucketTool, ColorSelectTool } from './tools'
+import {
+  ensureImageFullyLoaded,
+  removeImageRgbValuesAndInvertAlpha,
+  createCanvasCopy,
+  getCanvas2dContext,
+  combineOriginalImageAndPaint,
+  toRef,
+  mkFileUrl,
+  requestWithRetries,
+  replaceClipspaceImages
+} from './utils'
+
+export class MaskEditorDialog extends ComfyDialog {
+  static instance: MaskEditorDialog | null = null
+
+  //new
+  private uiManager!: UIManager
+  // @ts-expect-error unused variable
+  private toolManager!: ToolManager
+  // @ts-expect-error unused variable
+  private panAndZoomManager!: PanAndZoomManager
+  // @ts-expect-error unused variable
+  private brushTool!: BrushTool
+  private paintBucketTool!: PaintBucketTool
+  private colorSelectTool!: ColorSelectTool
+  private canvasHistory!: CanvasHistory
+  private messageBroker!: MessageBroker
+  private keyboardManager!: KeyboardManager
+
+  private rootElement!: HTMLElement
+  private imageURL!: string
+
+  private isLayoutCreated: boolean = false
+  private isOpen: boolean = false
+
+  //variables needed?
+  last_display_style: string | null = null
+
+  constructor() {
+    super()
+    this.rootElement = $el(
+      'div.maskEditor_hidden',
+      { parent: document.body },
+      []
+    )
+
+    this.element = this.rootElement
+  }
+
+  static getInstance() {
+    if (!ComfyApp.clipspace || !ComfyApp.clipspace.imgs) {
+      throw new Error('No clipspace images found')
+    }
+    const currentSrc =
+      ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src
+
+    if (
+      !MaskEditorDialog.instance ||
+      currentSrc !== MaskEditorDialog.instance.imageURL
+    ) {
+      if (MaskEditorDialog.instance) MaskEditorDialog.instance.destroy()
+      MaskEditorDialog.instance = new MaskEditorDialog()
+      MaskEditorDialog.instance.imageURL = currentSrc
+    }
+    return MaskEditorDialog.instance
+  }
+
+  override async show() {
+    this.cleanup()
+    if (!this.isLayoutCreated) {
+      // layout
+      this.messageBroker = new MessageBroker()
+      this.canvasHistory = new CanvasHistory(this, 20)
+      this.paintBucketTool = new PaintBucketTool(this)
+      this.brushTool = new BrushTool(this)
+      this.panAndZoomManager = new PanAndZoomManager(this)
+      this.toolManager = new ToolManager(this)
+      this.keyboardManager = new KeyboardManager(this)
+      this.uiManager = new UIManager(this.rootElement, this)
+      this.colorSelectTool = new ColorSelectTool(this)
+
+      // replacement of onClose hook since close is not real close
+      const self = this
+      const observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'style'
+          ) {
+            if (
+              self.last_display_style &&
+              self.last_display_style != 'none' &&
+              self.element.style.display == 'none'
+            ) {
+              //self.brush.style.display = 'none'
+              ComfyApp.onClipspaceEditorClosed()
+            }
+
+            self.last_display_style = self.element.style.display
+          }
+        })
+      })
+
+      const config = { attributes: true }
+      observer.observe(this.rootElement, config)
+
+      this.isLayoutCreated = true
+
+      await this.uiManager.setlayout()
+    }
+
+    //this.zoomAndPanManager.reset()
+
+    this.rootElement.id = 'maskEditor'
+    this.rootElement.style.display = 'flex'
+    this.element.style.display = 'flex'
+    await this.uiManager.initUI()
+    this.paintBucketTool.initPaintBucketTool()
+    this.colorSelectTool.initColorSelectTool()
+    await this.canvasHistory.saveInitialState()
+    this.isOpen = true
+    if (ComfyApp.clipspace && ComfyApp.clipspace.imgs) {
+      this.uiManager.setSidebarImage()
+    }
+    this.keyboardManager.addListeners()
+  }
+
+  private cleanup() {
+    // Remove all maskEditor elements
+    const maskEditors = document.querySelectorAll('[id^="maskEditor"]')
+    maskEditors.forEach((element) => element.remove())
+
+    // Remove brush elements specifically
+    const brushElements = document.querySelectorAll('#maskEditor_brush')
+    brushElements.forEach((element) => element.remove())
+  }
+
+  destroy() {
+    this.isLayoutCreated = false
+    this.isOpen = false
+    this.canvasHistory.clearStates()
+    this.keyboardManager.removeListeners()
+    this.cleanup()
+    this.close()
+    MaskEditorDialog.instance = null
+  }
+
+  isOpened() {
+    return this.isOpen
+  }
+
+  async save() {
+    const imageCanvas = this.uiManager.getImgCanvas()
+    const maskCanvas = this.uiManager.getMaskCanvas()
+    const maskCanvasCtx = getCanvas2dContext(maskCanvas)
+    const paintCanvas = this.uiManager.getRgbCanvas()
+    const image = this.uiManager.getImage()
+
+    try {
+      await ensureImageFullyLoaded(maskCanvas.toDataURL())
+    } catch (error) {
+      console.error('Error loading mask image:', error)
+      return
+    }
+
+    const unrefinedMaskImageData = maskCanvasCtx.getImageData(
+      0,
+      0,
+      maskCanvas.width,
+      maskCanvas.height
+    )
+
+    const refinedMaskOnlyData = new ImageData(
+      removeImageRgbValuesAndInvertAlpha(unrefinedMaskImageData.data),
+      unrefinedMaskImageData.width,
+      unrefinedMaskImageData.height
+    )
+
+    // We create an undisplayed copy so as not to alter the original--displayed--canvas
+    const [refinedMaskCanvas, refinedMaskCanvasCtx] =
+      createCanvasCopy(maskCanvas)
+    refinedMaskCanvasCtx.globalCompositeOperation =
+      CompositionOperation.SourceOver
+    refinedMaskCanvasCtx.putImageData(refinedMaskOnlyData, 0, 0)
+
+    const timestamp = Math.round(performance.now())
+    const filenames = imageLayerFilenamesByTimestamp(timestamp)
+    const refs = {
+      maskedImage: toRef(filenames.maskedImage),
+      paint: toRef(filenames.paint),
+      paintedImage: toRef(filenames.paintedImage),
+      paintedMaskedImage: toRef(filenames.paintedMaskedImage)
+    }
+
+    const [paintedImageCanvas] = combineOriginalImageAndPaint({
+      originalImage: imageCanvas,
+      paint: paintCanvas
+    })
+
+    replaceClipspaceImages(refs.paintedMaskedImage, [refs.paint])
+
+    const originalImageUrl = new URL(image.src)
+
+    this.uiManager.setBrushOpacity(0)
+
+    const originalImageFilename = originalImageUrl.searchParams.get('filename')
+    if (!originalImageFilename)
+      throw new Error(
+        "Expected original image URL to have a `filename` query parameter, but couldn't find it."
+      )
+
+    const originalImageRef: Partial<Ref> = {
+      filename: originalImageFilename,
+      subfolder: originalImageUrl.searchParams.get('subfolder') ?? undefined,
+      type: originalImageUrl.searchParams.get('type') ?? undefined
+    }
+
+    const mkFormData = (
+      blob: Blob,
+      filename: string,
+      originalImageRefOverride?: Partial<Ref>
+    ) => {
+      const formData = new FormData()
+      formData.append('image', blob, filename)
+      formData.append(
+        'original_ref',
+        JSON.stringify(originalImageRefOverride ?? originalImageRef)
+      )
+      formData.append('type', 'input')
+      formData.append('subfolder', 'clipspace')
+      return formData
+    }
+
+    const canvasToFormData = (
+      canvas: HTMLCanvasElement,
+      filename: string,
+      originalImageRefOverride?: Partial<Ref>
+    ) => {
+      const blob = this.dataURLToBlob(canvas.toDataURL())
+      return mkFormData(blob, filename, originalImageRefOverride)
+    }
+
+    const formDatas = {
+      // Note: this canvas only contains mask data (no image), but during the upload process, the backend combines the mask with the original_image. Refer to the backend repo's `server.py`, search for `@routes.post("/upload/mask")`
+      maskedImage: canvasToFormData(refinedMaskCanvas, filenames.maskedImage),
+      paint: canvasToFormData(paintCanvas, filenames.paint),
+      paintedImage: canvasToFormData(
+        paintedImageCanvas,
+        filenames.paintedImage
+      ),
+      paintedMaskedImage: canvasToFormData(
+        refinedMaskCanvas,
+        filenames.paintedMaskedImage,
+        refs.paintedImage
+      )
+    }
+
+    this.uiManager.setSaveButtonText(t('g.saving'))
+    this.uiManager.setSaveButtonEnabled(false)
+    this.keyboardManager.removeListeners()
+
+    try {
+      await this.uploadMask(
+        refs.maskedImage,
+        formDatas.maskedImage,
+        'selectedIndex'
+      )
+      await this.uploadImage(refs.paint, formDatas.paint)
+      await this.uploadImage(refs.paintedImage, formDatas.paintedImage, false)
+
+      // IMPORTANT: We using `uploadMask` here, because the backend combines the mask with the painted image during the upload process. We do NOT want to combine the mask with the original image on the frontend, because the spec for CanvasRenderingContext2D does not allow for setting pixels to transparent while preserving their RGB values.
+      // See: <https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData#data_loss_due_to_browser_optimization>
+      // It is possible that WebGL contexts can achieve this, but WebGL is extremely complex, and the backend functionality is here for this purpose!
+      // Refer to the backend repo's `server.py`, search for `@routes.post("/upload/mask")`
+      await this.uploadMask(
+        refs.paintedMaskedImage,
+        formDatas.paintedMaskedImage,
+        'combinedIndex'
+      )
+
+      ComfyApp.onClipspaceEditorSave()
+      this.destroy()
+    } catch (error) {
+      console.error('Error during upload:', error)
+      this.uiManager.setSaveButtonText(t('g.save'))
+      this.uiManager.setSaveButtonEnabled(true)
+      this.keyboardManager.addListeners()
+    }
+  }
+
+  getMessageBroker() {
+    return this.messageBroker
+  }
+
+  // Helper function to convert a data URL to a Blob object
+  private dataURLToBlob(dataURL: string) {
+    const parts = dataURL.split(';base64,')
+    const contentType = parts[0].split(':')[1]
+    const byteString = atob(parts[1])
+    const arrayBuffer = new ArrayBuffer(byteString.length)
+    const uint8Array = new Uint8Array(arrayBuffer)
+    for (let i = 0; i < byteString.length; i++) {
+      uint8Array[i] = byteString.charCodeAt(i)
+    }
+    return new Blob([arrayBuffer], { type: contentType })
+  }
+
+  private async uploadImage(
+    filepath: Ref,
+    formData: FormData,
+    isPaintLayer = true
+  ) {
+    const success = await requestWithRetries(() =>
+      api.fetchApi('/upload/image', {
+        method: 'POST',
+        body: formData
+      })
+    )
+    if (!success) {
+      throw new Error('Upload failed.')
+    }
+
+    if (!isPaintLayer) {
+      ClipspaceDialog.invalidatePreview()
+      return success
+    }
+    try {
+      const paintedIndex = ComfyApp.clipspace?.paintedIndex
+      if (ComfyApp.clipspace?.imgs && paintedIndex !== undefined) {
+        // Create and set new image
+        const newImage = new Image()
+        newImage.crossOrigin = 'anonymous'
+        newImage.src = mkFileUrl({ ref: filepath, preview: true })
+        ComfyApp.clipspace.imgs[paintedIndex] = newImage
+
+        // Update images array if it exists
+        if (ComfyApp.clipspace.images) {
+          ComfyApp.clipspace.images[paintedIndex] = filepath
+        }
+      }
+    } catch (err) {
+      console.warn('Failed to update clipspace image:', err)
+    }
+    ClipspaceDialog.invalidatePreview()
+  }
+
+  private async uploadMask(
+    filepath: Ref,
+    formData: FormData,
+    clipspaceLocation: 'selectedIndex' | 'combinedIndex'
+  ) {
+    const success = await requestWithRetries(() =>
+      api.fetchApi('/upload/mask', {
+        method: 'POST',
+        body: formData
+      })
+    )
+    if (!success) {
+      throw new Error('Upload failed.')
+    }
+
+    try {
+      const nameOfIndexToSaveTo = (
+        {
+          selectedIndex: 'selectedIndex',
+          combinedIndex: 'combinedIndex'
+        } as const
+      )[clipspaceLocation]
+      if (!nameOfIndexToSaveTo) return
+      const indexToSaveTo = ComfyApp.clipspace?.[nameOfIndexToSaveTo]
+      if (!ComfyApp.clipspace?.imgs || indexToSaveTo === undefined) return
+      // Create and set new image
+      const newImage = new Image()
+      newImage.crossOrigin = 'anonymous'
+      newImage.src = mkFileUrl({ ref: filepath, preview: true })
+      ComfyApp.clipspace.imgs[indexToSaveTo] = newImage
+
+      // Update images array if it exists
+      if (ComfyApp.clipspace.images) {
+        ComfyApp.clipspace.images[indexToSaveTo] = filepath
+      }
+    } catch (err) {
+      console.warn('Failed to update clipspace image:', err)
+    }
+    ClipspaceDialog.invalidatePreview()
+  }
+}
diff --git a/src/extensions/core/maskeditor/constants.ts b/src/extensions/core/maskeditor/constants.ts
new file mode 100644
index 000000000..e352422f3
--- /dev/null
+++ b/src/extensions/core/maskeditor/constants.ts
@@ -0,0 +1,36 @@
+import { Tools } from './types'
+
+export const iconsHtml: Record<Tools, string> = {
+  [Tools.MaskPen]: `
+    <svg viewBox="0 0 44 44">
+      <path class="cls-1" d="M10.97,15.98v14.04c0,.825.675,1.5,1.5,1.5h23.07c.825,0,1.5-.675,1.5-1.5V15.98c0-.825-.675-1.5-1.5-1.5H12.47c-.825,0-1.5.675-1.5,1.5ZM25.79,28.16c-4.365,1.41-8.355-2.58-6.945-6.945.51-1.575,1.785-2.85,3.36-3.36,4.365-1.41,8.355,2.58,6.945,6.945-.51,1.575-1.785,2.85-3.36,3.36Z"/>
+    </svg>
+  `,
+  [Tools.Eraser]: `
+    <svg viewBox="0 0 44 44">
+      <g>
+        <rect class="cls-2" x="16.68" y="10" width="10.63" height="24" rx="1.16" ry="1.16" transform="translate(22 -9.11) rotate(45)"/>
+        <path class="cls-1" d="M17.27,34.27c-.42,0-.85-.16-1.17-.48l-5.88-5.88c-.31-.31-.48-.73-.48-1.17s.17-.86.48-1.17l15.34-15.34c.62-.62,1.72-.62,2.34,0l5.88,5.88c.65.65.65,1.7,0,2.34l-15.34,15.34c-.32.32-.75.48-1.17.48ZM26.73,10.73c-.18,0-.34.07-.46.19l-15.34,15.34c-.12.12-.19.29-.19.46s.07.34.19.46l5.88,5.88c.26.26.67.26.93,0l15.34-15.34c.26-.26.26-.67,0-.93l-5.88-5.88c-.12-.12-.29-.19-.46-.19Z"/>
+      </g>
+      <path class="cls-3" d="M20.33,11.03h8.32c.64,0,1.16.52,1.16,1.16v15.79h-10.63v-15.79c0-.64.52-1.16,1.16-1.16Z" transform="translate(20.97 -11.61) rotate(45)"/>
+    </svg>
+  `,
+  [Tools.MaskBucket]: `
+    <svg viewBox="0 0 44 44">
+      <path class="cls-1" d="M33.4,21.76l-11.42,11.41-.04.05c-.61.61-1.6.61-2.21,0l-8.91-8.91c-.61-.61-.61-1.6,0-2.21l.04-.05.3-.29h22.24Z"/>
+      <path class="cls-1" d="M20.83,34.17c-.55,0-1.07-.21-1.46-.6l-8.91-8.91c-.8-.8-.8-2.11,0-2.92l11.31-11.31c.8-.8,2.11-.8,2.92,0l8.91,8.91c.39.39.6.91.6,1.46s-.21,1.07-.6,1.46l-11.31,11.31c-.39.39-.91.6-1.46.6ZM23.24,10.83c-.27,0-.54.1-.75.31l-11.31,11.31c-.41.41-.41,1.09,0,1.5l8.91,8.91c.4.4,1.1.4,1.5,0l11.31-11.31c.2-.2.31-.47.31-.75s-.11-.55-.31-.75l-8.91-8.91c-.21-.21-.48-.31-.75-.31Z"/>
+      <path class="cls-1" d="M34.28,26.85c0,.84-.68,1.52-1.52,1.52s-1.52-.68-1.52-1.52,1.52-2.86,1.52-2.86c0,0,1.52,2.02,1.52,2.86Z"/>
+    </svg>
+  `,
+  [Tools.MaskColorFill]: `
+    <svg viewBox="0 0 44 44">
+      <path class="cls-1" d="M30.29,13.72c-1.09-1.1-2.85-1.09-3.94,0l-2.88,2.88-.75-.75c-.2-.19-.51-.19-.71,0-.19.2-.19.51,0,.71l1.4,1.4-9.59,9.59c-.35.36-.54.82-.54,1.32,0,.14,0,.28.05.41-.05.04-.1.08-.15.13-.39.39-.39,1.01,0,1.4.38.39,1.01.39,1.4,0,.04-.04.08-.09.11-.13.14.04.3.06.45.06.5,0,.97-.19,1.32-.55l9.59-9.59,1.38,1.38c.1.09.22.14.35.14s.26-.05.35-.14c.2-.2.2-.52,0-.71l-.71-.72,2.88-2.89c1.08-1.08,1.08-2.85-.01-3.94ZM19.43,25.82h-2.46l7.15-7.15,1.23,1.23-5.92,5.92Z"/>
+    </svg>
+  `,
+  [Tools.PaintPen]: `
+    <svg viewBox="0 0 44 44">
+      <path class="cls-1" d="M34,13.93c0,.47-.19.94-.55,1.31l-13.02,13.04c-.09.07-.18.15-.27.22-.07-1.39-1.21-2.48-2.61-2.49.07-.12.16-.24.27-.34l13.04-13.04c.72-.72,1.89-.72,2.6,0,.35.35.55.83.55,1.3Z"/>
+      <path class="cls-1" d="M19.64,29.03c0,4.46-6.46,3.18-9.64,0,3.3-.47,4.75-2.58,7.06-2.58,1.43,0,2.58,1.16,2.58,2.58Z"/>
+    </svg>
+  `
+}
diff --git a/src/extensions/core/maskeditor/managers/KeyboardManager.ts b/src/extensions/core/maskeditor/managers/KeyboardManager.ts
new file mode 100644
index 000000000..2e95767aa
--- /dev/null
+++ b/src/extensions/core/maskeditor/managers/KeyboardManager.ts
@@ -0,0 +1,67 @@
+import type { MaskEditorDialog } from '../MaskEditorDialog'
+import type { MessageBroker } from './MessageBroker'
+
+export class KeyboardManager {
+  private keysDown: string[] = []
+
+  // @ts-expect-error unused variable
+  private maskEditor: MaskEditorDialog
+  private messageBroker: MessageBroker
+
+  // Bound functions, for use in addListeners and removeListeners
+  private handleKeyDownBound = this.handleKeyDown.bind(this)
+  private handleKeyUpBound = this.handleKeyUp.bind(this)
+  private clearKeysBound = this.clearKeys.bind(this)
+
+  constructor(maskEditor: MaskEditorDialog) {
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+    this.addPullTopics()
+  }
+
+  private addPullTopics() {
+    // isKeyPressed
+    this.messageBroker.createPullTopic('isKeyPressed', (key: string) =>
+      Promise.resolve(this.isKeyDown(key))
+    )
+  }
+
+  addListeners() {
+    document.addEventListener('keydown', this.handleKeyDownBound)
+    document.addEventListener('keyup', this.handleKeyUpBound)
+    window.addEventListener('blur', this.clearKeysBound)
+  }
+
+  removeListeners() {
+    document.removeEventListener('keydown', this.handleKeyDownBound)
+    document.removeEventListener('keyup', this.handleKeyUpBound)
+    window.removeEventListener('blur', this.clearKeysBound)
+  }
+
+  private clearKeys() {
+    this.keysDown = []
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    if (!this.keysDown.includes(event.key)) {
+      this.keysDown.push(event.key)
+    }
+    if ((event.ctrlKey || event.metaKey) && !event.altKey) {
+      const key = event.key.toUpperCase()
+      // Redo: Ctrl + Y, or Ctrl + Shift + Z
+      if ((key === 'Y' && !event.shiftKey) || (key == 'Z' && event.shiftKey)) {
+        this.messageBroker.publish('redo')
+      } else if (key === 'Z' && !event.shiftKey) {
+        this.messageBroker.publish('undo')
+      }
+    }
+  }
+
+  private handleKeyUp(event: KeyboardEvent) {
+    this.keysDown = this.keysDown.filter((key) => key !== event.key)
+  }
+
+  private isKeyDown(key: string) {
+    return this.keysDown.includes(key)
+  }
+}
diff --git a/src/extensions/core/maskeditor/managers/MessageBroker.ts b/src/extensions/core/maskeditor/managers/MessageBroker.ts
new file mode 100644
index 000000000..5841243b1
--- /dev/null
+++ b/src/extensions/core/maskeditor/managers/MessageBroker.ts
@@ -0,0 +1,183 @@
+import type { Callback } from '../types'
+
+export class MessageBroker {
+  private pushTopics: Record<string, Callback[]> = {}
+  private pullTopics: Record<string, (data?: any) => Promise<any>> = {}
+
+  constructor() {
+    this.registerListeners()
+  }
+
+  // Push
+
+  private registerListeners() {
+    // Register listeners
+    this.createPushTopic('panStart')
+    this.createPushTopic('paintBucketFill')
+    this.createPushTopic('saveState')
+    this.createPushTopic('brushAdjustmentStart')
+    this.createPushTopic('drawStart')
+    this.createPushTopic('panMove')
+    this.createPushTopic('updateBrushPreview')
+    this.createPushTopic('brushAdjustment')
+    this.createPushTopic('draw')
+    this.createPushTopic('paintBucketCursor')
+    this.createPushTopic('panCursor')
+    this.createPushTopic('drawEnd')
+    this.createPushTopic('zoom')
+    this.createPushTopic('undo')
+    this.createPushTopic('redo')
+    this.createPushTopic('cursorPoint')
+    this.createPushTopic('panOffset')
+    this.createPushTopic('zoomRatio')
+    this.createPushTopic('getMaskCanvas')
+    this.createPushTopic('getCanvasContainer')
+    this.createPushTopic('screenToCanvas')
+    this.createPushTopic('isKeyPressed')
+    this.createPushTopic('isCombinationPressed')
+    this.createPushTopic('setPaintBucketTolerance')
+    this.createPushTopic('setBrushSize')
+    this.createPushTopic('setBrushHardness')
+    this.createPushTopic('setBrushOpacity')
+    this.createPushTopic('setBrushShape')
+    this.createPushTopic('initZoomPan')
+    this.createPushTopic('setTool')
+    this.createPushTopic('setActiveLayer')
+    this.createPushTopic('pointerDown')
+    this.createPushTopic('pointerMove')
+    this.createPushTopic('pointerUp')
+    this.createPushTopic('wheel')
+    this.createPushTopic('initPaintBucketTool')
+    this.createPushTopic('setBrushVisibility')
+    this.createPushTopic('setBrushPreviewGradientVisibility')
+    this.createPushTopic('handleTouchStart')
+    this.createPushTopic('handleTouchMove')
+    this.createPushTopic('handleTouchEnd')
+    this.createPushTopic('colorSelectFill')
+    this.createPushTopic('setColorSelectTolerance')
+    this.createPushTopic('setLivePreview')
+    this.createPushTopic('updateCursor')
+    this.createPushTopic('setColorComparisonMethod')
+    this.createPushTopic('clearLastPoint')
+    this.createPushTopic('setWholeImage')
+    this.createPushTopic('setMaskBoundary')
+    this.createPushTopic('setMaskTolerance')
+    this.createPushTopic('setBrushSmoothingPrecision')
+    this.createPushTopic('setZoomText')
+    this.createPushTopic('resetZoom')
+    this.createPushTopic('invert')
+    this.createPushTopic('setRGBColor')
+    this.createPushTopic('paintedurl')
+    this.createPushTopic('setSelectionOpacity')
+    this.createPushTopic('setFillOpacity')
+  }
+
+  /**
+   * Creates a new push topic (listener is notified)
+   *
+   * @param {string} topicName - The name of the topic to create.
+   * @throws {Error} If the topic already exists.
+   */
+  createPushTopic(topicName: string) {
+    if (this.topicExists(this.pushTopics, topicName)) {
+      throw new Error('Topic already exists')
+    }
+    this.pushTopics[topicName] = []
+  }
+
+  /**
+   * Subscribe a callback function to the given topic.
+   *
+   * @param {string} topicName - The name of the topic to subscribe to.
+   * @param {Callback} callback - The callback function to be subscribed.
+   * @throws {Error} If the topic does not exist.
+   */
+  subscribe(topicName: string, callback: Callback) {
+    if (!this.topicExists(this.pushTopics, topicName)) {
+      throw new Error(`Topic "${topicName}" does not exist!`)
+    }
+    this.pushTopics[topicName].push(callback)
+  }
+
+  /**
+   * Removes a callback function from the list of subscribers for a given topic.
+   *
+   * @param {string} topicName - The name of the topic to unsubscribe from.
+   * @param {Callback} callback - The callback function to remove from the subscribers list.
+   * @throws {Error} If the topic does not exist in the list of topics.
+   */
+  unsubscribe(topicName: string, callback: Callback) {
+    if (!this.topicExists(this.pushTopics, topicName)) {
+      throw new Error('Topic does not exist')
+    }
+    const index = this.pushTopics[topicName].indexOf(callback)
+    if (index > -1) {
+      this.pushTopics[topicName].splice(index, 1)
+    }
+  }
+
+  /**
+   * Publishes data to a specified topic with variable number of arguments.
+   * @param {string} topicName - The name of the topic to publish to.
+   * @param {...any[]} args - Variable number of arguments to pass to subscribers
+   * @throws {Error} If the specified topic does not exist.
+   */
+  publish(topicName: string, ...args: any[]) {
+    if (!this.topicExists(this.pushTopics, topicName)) {
+      throw new Error(`Topic "${topicName}" does not exist!`)
+    }
+
+    this.pushTopics[topicName].forEach((callback) => {
+      callback(...args)
+    })
+  }
+
+  // Pull
+
+  /**
+   * Creates a new pull topic (listener must request data)
+   *
+   * @param {string} topicName - The name of the topic to create.
+   * @param {() => Promise<any>} callBack - The callback function to be called when data is requested.
+   * @throws {Error} If the topic already exists.
+   */
+  createPullTopic(topicName: string, callBack: (data?: any) => Promise<any>) {
+    if (this.topicExists(this.pullTopics, topicName)) {
+      throw new Error('Topic already exists')
+    }
+    this.pullTopics[topicName] = callBack
+  }
+
+  /**
+   * Requests data from a specified pull topic.
+   * @param {string} topicName - The name of the topic to request data from.
+   * @returns {Promise<any>} - The data from the pull topic.
+   * @throws {Error} If the specified topic does not exist.
+   */
+  async pull(topicName: string, data?: any): Promise<any> {
+    if (!this.topicExists(this.pullTopics, topicName)) {
+      throw new Error('Topic does not exist')
+    }
+
+    const callBack = this.pullTopics[topicName]
+    try {
+      const result = await callBack(data)
+      return result
+    } catch (error) {
+      console.error(`Error pulling data from topic "${topicName}":`, error)
+      throw error
+    }
+  }
+
+  // Helper Methods
+
+  /**
+   * Checks if a topic exists in the given topics object.
+   * @param {Record<string, any>} topics - The topics object to check.
+   * @param {string} topicName - The name of the topic to check.
+   * @returns {boolean} - True if the topic exists, false otherwise.
+   */
+  private topicExists(topics: Record<string, any>, topicName: string): boolean {
+    return topics.hasOwnProperty(topicName)
+  }
+}
diff --git a/src/extensions/core/maskeditor/managers/PanAndZoomManager.ts b/src/extensions/core/maskeditor/managers/PanAndZoomManager.ts
new file mode 100644
index 000000000..c37c3edf7
--- /dev/null
+++ b/src/extensions/core/maskeditor/managers/PanAndZoomManager.ts
@@ -0,0 +1,496 @@
+import type { MaskEditorDialog, Point, Offset } from '../types'
+import { MessageBroker } from './MessageBroker'
+
+export class PanAndZoomManager {
+  maskEditor: MaskEditorDialog
+  messageBroker: MessageBroker
+
+  DOUBLE_TAP_DELAY: number = 300
+  lastTwoFingerTap: number = 0
+
+  isTouchZooming: boolean = false
+  lastTouchZoomDistance: number = 0
+  lastTouchMidPoint: Point = { x: 0, y: 0 }
+  lastTouchPoint: Point = { x: 0, y: 0 }
+
+  zoom_ratio: number = 1
+  interpolatedZoomRatio: number = 1
+  pan_offset: Offset = { x: 0, y: 0 }
+
+  mouseDownPoint: Point | null = null
+  initialPan: Offset = { x: 0, y: 0 }
+
+  canvasContainer: HTMLElement | null = null
+  maskCanvas: HTMLCanvasElement | null = null
+  rgbCanvas: HTMLCanvasElement | null = null
+  rootElement: HTMLElement | null = null
+
+  image: HTMLImageElement | null = null
+  imageRootWidth: number = 0
+  imageRootHeight: number = 0
+
+  cursorPoint: Point = { x: 0, y: 0 }
+  penPointerIdList: number[] = []
+
+  constructor(maskEditor: MaskEditorDialog) {
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+
+    this.addListeners()
+    this.addPullTopics()
+  }
+
+  private addListeners() {
+    this.messageBroker.subscribe(
+      'initZoomPan',
+      async (args: [HTMLImageElement, HTMLElement]) => {
+        await this.initializeCanvasPanZoom(args[0], args[1])
+      }
+    )
+
+    this.messageBroker.subscribe('panStart', async (event: PointerEvent) => {
+      this.handlePanStart(event)
+    })
+
+    this.messageBroker.subscribe('panMove', async (event: PointerEvent) => {
+      this.handlePanMove(event)
+    })
+
+    this.messageBroker.subscribe('zoom', async (event: WheelEvent) => {
+      this.zoom(event)
+    })
+
+    this.messageBroker.subscribe('cursorPoint', async (point: Point) => {
+      this.updateCursorPosition(point)
+    })
+
+    this.messageBroker.subscribe('pointerDown', async (event: PointerEvent) => {
+      if (event.pointerType === 'pen')
+        this.penPointerIdList.push(event.pointerId)
+    })
+
+    this.messageBroker.subscribe('pointerUp', async (event: PointerEvent) => {
+      if (event.pointerType === 'pen') {
+        const index = this.penPointerIdList.indexOf(event.pointerId)
+        if (index > -1) this.penPointerIdList.splice(index, 1)
+      }
+    })
+
+    this.messageBroker.subscribe(
+      'handleTouchStart',
+      async (event: TouchEvent) => {
+        this.handleTouchStart(event)
+      }
+    )
+
+    this.messageBroker.subscribe(
+      'handleTouchMove',
+      async (event: TouchEvent) => {
+        this.handleTouchMove(event)
+      }
+    )
+
+    this.messageBroker.subscribe(
+      'handleTouchEnd',
+      async (event: TouchEvent) => {
+        this.handleTouchEnd(event)
+      }
+    )
+
+    this.messageBroker.subscribe('resetZoom', async () => {
+      if (this.interpolatedZoomRatio === 1) return
+      await this.smoothResetView()
+    })
+  }
+
+  private addPullTopics() {
+    this.messageBroker.createPullTopic(
+      'cursorPoint',
+      async () => this.cursorPoint
+    )
+    this.messageBroker.createPullTopic('zoomRatio', async () => this.zoom_ratio)
+    this.messageBroker.createPullTopic('panOffset', async () => this.pan_offset)
+  }
+
+  handleTouchStart(event: TouchEvent) {
+    event.preventDefault()
+
+    // for pen device, if drawing with pen, do not move the canvas
+    if (this.penPointerIdList.length > 0) return
+
+    this.messageBroker.publish('setBrushVisibility', false)
+    if (event.touches.length === 2) {
+      const currentTime = new Date().getTime()
+      const tapTimeDiff = currentTime - this.lastTwoFingerTap
+
+      if (tapTimeDiff < this.DOUBLE_TAP_DELAY) {
+        // Double tap detected
+        this.handleDoubleTap()
+        this.lastTwoFingerTap = 0 // Reset to prevent triple-tap
+      } else {
+        this.lastTwoFingerTap = currentTime
+
+        // Existing two-finger touch logic
+        this.isTouchZooming = true
+        this.lastTouchZoomDistance = this.getTouchDistance(event.touches)
+        const midpoint = this.getTouchMidpoint(event.touches)
+        this.lastTouchMidPoint = midpoint
+      }
+    } else if (event.touches.length === 1) {
+      this.lastTouchPoint = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      }
+    }
+  }
+
+  async handleTouchMove(event: TouchEvent) {
+    event.preventDefault()
+
+    // for pen device, if drawing with pen, do not move the canvas
+    if (this.penPointerIdList.length > 0) return
+
+    this.lastTwoFingerTap = 0
+    if (this.isTouchZooming && event.touches.length === 2) {
+      // Handle zooming
+      const newDistance = this.getTouchDistance(event.touches)
+      const zoomFactor = newDistance / this.lastTouchZoomDistance
+      const oldZoom = this.zoom_ratio
+      this.zoom_ratio = Math.max(
+        0.2,
+        Math.min(10.0, this.zoom_ratio * zoomFactor)
+      )
+      const newZoom = this.zoom_ratio
+
+      // Calculate the midpoint of the two touches
+      const midpoint = this.getTouchMidpoint(event.touches)
+
+      // Handle panning - calculate the movement of the midpoint
+      if (this.lastTouchMidPoint) {
+        const deltaX = midpoint.x - this.lastTouchMidPoint.x
+        const deltaY = midpoint.y - this.lastTouchMidPoint.y
+
+        // Apply the pan
+        this.pan_offset.x += deltaX
+        this.pan_offset.y += deltaY
+      }
+
+      // Get touch position relative to the container
+      if (this.maskCanvas === null) {
+        this.maskCanvas = await this.messageBroker.pull('maskCanvas')
+      }
+      const rect = this.maskCanvas!.getBoundingClientRect()
+      const touchX = midpoint.x - rect.left
+      const touchY = midpoint.y - rect.top
+
+      // Calculate new pan position based on zoom
+      const scaleFactor = newZoom / oldZoom
+      this.pan_offset.x += touchX - touchX * scaleFactor
+      this.pan_offset.y += touchY - touchY * scaleFactor
+
+      this.invalidatePanZoom()
+      this.lastTouchZoomDistance = newDistance
+      this.lastTouchMidPoint = midpoint
+    } else if (event.touches.length === 1) {
+      // Handle single touch pan
+      this.handleSingleTouchPan(event.touches[0])
+    }
+  }
+
+  handleTouchEnd(event: TouchEvent) {
+    event.preventDefault()
+
+    const lastTouch = event.touches[0]
+    // if all touches are removed, lastTouch will be null
+    if (lastTouch) {
+      this.lastTouchPoint = {
+        x: lastTouch.clientX,
+        y: lastTouch.clientY
+      }
+    } else {
+      this.isTouchZooming = false
+      this.lastTouchMidPoint = { x: 0, y: 0 }
+    }
+  }
+
+  private getTouchDistance(touches: TouchList) {
+    const dx = touches[0].clientX - touches[1].clientX
+    const dy = touches[0].clientY - touches[1].clientY
+    return Math.sqrt(dx * dx + dy * dy)
+  }
+
+  private getTouchMidpoint(touches: TouchList) {
+    return {
+      x: (touches[0].clientX + touches[1].clientX) / 2,
+      y: (touches[0].clientY + touches[1].clientY) / 2
+    }
+  }
+
+  private async handleSingleTouchPan(touch: Touch) {
+    if (this.lastTouchPoint === null) {
+      this.lastTouchPoint = { x: touch.clientX, y: touch.clientY }
+      return
+    }
+
+    const deltaX = touch.clientX - this.lastTouchPoint.x
+    const deltaY = touch.clientY - this.lastTouchPoint.y
+
+    this.pan_offset.x += deltaX
+    this.pan_offset.y += deltaY
+
+    await this.invalidatePanZoom()
+
+    this.lastTouchPoint = { x: touch.clientX, y: touch.clientY }
+  }
+
+  private updateCursorPosition(clientPoint: Point) {
+    var cursorX = clientPoint.x - this.pan_offset.x
+    var cursorY = clientPoint.y - this.pan_offset.y
+
+    this.cursorPoint = { x: cursorX, y: cursorY }
+  }
+
+  //prob redundant
+  handleDoubleTap() {
+    this.messageBroker.publish('undo')
+    // Add any additional logic needed after undo
+  }
+
+  async zoom(event: WheelEvent) {
+    // Store original cursor position
+    const cursorPoint = { x: event.clientX, y: event.clientY }
+
+    // zoom canvas
+    const oldZoom = this.zoom_ratio
+    const zoomFactor = event.deltaY < 0 ? 1.1 : 0.9
+    this.zoom_ratio = Math.max(
+      0.2,
+      Math.min(10.0, this.zoom_ratio * zoomFactor)
+    )
+    const newZoom = this.zoom_ratio
+
+    const maskCanvas = await this.messageBroker.pull('maskCanvas')
+
+    // Get mouse position relative to the container
+    const rect = maskCanvas.getBoundingClientRect()
+    const mouseX = cursorPoint.x - rect.left
+    const mouseY = cursorPoint.y - rect.top
+
+    console.log(oldZoom, newZoom)
+    // Calculate new pan position
+    const scaleFactor = newZoom / oldZoom
+    this.pan_offset.x += mouseX - mouseX * scaleFactor
+    this.pan_offset.y += mouseY - mouseY * scaleFactor
+
+    // Update pan and zoom immediately
+    await this.invalidatePanZoom()
+
+    const newImageWidth = maskCanvas.clientWidth
+
+    const zoomRatio = newImageWidth / this.imageRootWidth
+
+    this.interpolatedZoomRatio = zoomRatio
+
+    this.messageBroker.publish('setZoomText', `${Math.round(zoomRatio * 100)}%`)
+
+    // Update cursor position with new pan values
+    this.updateCursorPosition(cursorPoint)
+
+    // Update brush preview after pan/zoom is complete
+    requestAnimationFrame(() => {
+      this.messageBroker.publish('updateBrushPreview')
+    })
+  }
+
+  private async smoothResetView(duration: number = 500) {
+    // Store initial state
+    const startZoom = this.zoom_ratio
+    const startPan = { ...this.pan_offset }
+
+    // Panel dimensions
+    const sidePanelWidth = 220
+    const toolPanelWidth = 64
+    const topBarHeight = 44
+
+    // Calculate available space
+    const availableWidth =
+      this.rootElement!.clientWidth - sidePanelWidth - toolPanelWidth
+    const availableHeight = this.rootElement!.clientHeight - topBarHeight
+
+    // Calculate target zoom
+    const zoomRatioWidth = availableWidth / this.image!.width
+    const zoomRatioHeight = availableHeight / this.image!.height
+    const targetZoom = Math.min(zoomRatioWidth, zoomRatioHeight)
+
+    // Calculate final dimensions
+    const aspectRatio = this.image!.width / this.image!.height
+    let finalWidth = 0
+    let finalHeight = 0
+
+    // Calculate target pan position
+    const targetPan = { x: toolPanelWidth, y: topBarHeight }
+
+    if (zoomRatioHeight > zoomRatioWidth) {
+      finalWidth = availableWidth
+      finalHeight = finalWidth / aspectRatio
+      targetPan.y = (availableHeight - finalHeight) / 2 + topBarHeight
+    } else {
+      finalHeight = availableHeight
+      finalWidth = finalHeight * aspectRatio
+      targetPan.x = (availableWidth - finalWidth) / 2 + toolPanelWidth
+    }
+
+    const startTime = performance.now()
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      // Cubic easing out for smooth deceleration
+      const eased = 1 - Math.pow(1 - progress, 3)
+
+      // Calculate intermediate zoom and pan values
+      const currentZoom = startZoom + (targetZoom - startZoom) * eased
+
+      this.zoom_ratio = currentZoom
+      this.pan_offset.x = startPan.x + (targetPan.x - startPan.x) * eased
+      this.pan_offset.y = startPan.y + (targetPan.y - startPan.y) * eased
+
+      this.invalidatePanZoom()
+
+      const interpolatedZoomRatio = startZoom + (1.0 - startZoom) * eased
+
+      this.messageBroker.publish(
+        'setZoomText',
+        `${Math.round(interpolatedZoomRatio * 100)}%`
+      )
+
+      if (progress < 1) {
+        requestAnimationFrame(animate)
+      }
+    }
+
+    requestAnimationFrame(animate)
+    this.interpolatedZoomRatio = 1.0
+  }
+
+  async initializeCanvasPanZoom(
+    image: HTMLImageElement,
+    rootElement: HTMLElement
+  ) {
+    // Get side panel width
+    let sidePanelWidth = 220
+    const toolPanelWidth = 64
+    let topBarHeight = 44
+
+    this.rootElement = rootElement
+
+    // Calculate available width accounting for both side panels
+    let availableWidth =
+      rootElement.clientWidth - sidePanelWidth - toolPanelWidth
+    let availableHeight = rootElement.clientHeight - topBarHeight
+
+    let zoomRatioWidth = availableWidth / image.width
+    let zoomRatioHeight = availableHeight / image.height
+
+    let aspectRatio = image.width / image.height
+
+    let finalWidth = 0
+    let finalHeight = 0
+
+    let pan_offset: Offset = { x: toolPanelWidth, y: topBarHeight }
+
+    if (zoomRatioHeight > zoomRatioWidth) {
+      finalWidth = availableWidth
+      finalHeight = finalWidth / aspectRatio
+      pan_offset.y = (availableHeight - finalHeight) / 2 + topBarHeight
+    } else {
+      finalHeight = availableHeight
+      finalWidth = finalHeight * aspectRatio
+      pan_offset.x = (availableWidth - finalWidth) / 2 + toolPanelWidth
+    }
+
+    if (this.image === null) {
+      this.image = image
+    }
+
+    this.imageRootWidth = finalWidth
+    this.imageRootHeight = finalHeight
+
+    this.zoom_ratio = Math.min(zoomRatioWidth, zoomRatioHeight)
+    this.pan_offset = pan_offset
+
+    this.penPointerIdList = []
+
+    await this.invalidatePanZoom()
+  }
+
+  async invalidatePanZoom() {
+    // Single validation check upfront
+    if (
+      !this.image?.width ||
+      !this.image?.height ||
+      !this.pan_offset ||
+      !this.zoom_ratio
+    ) {
+      console.warn('Missing required properties for pan/zoom')
+      return
+    }
+
+    // Now TypeScript knows these are non-null
+    const raw_width = this.image.width * this.zoom_ratio
+    const raw_height = this.image.height * this.zoom_ratio
+
+    // Get canvas container
+    this.canvasContainer ??=
+      await this.messageBroker?.pull('getCanvasContainer')
+    if (!this.canvasContainer) return
+
+    // Apply styles
+    Object.assign(this.canvasContainer.style, {
+      width: `${raw_width}px`,
+      height: `${raw_height}px`,
+      left: `${this.pan_offset.x}px`,
+      top: `${this.pan_offset.y}px`
+    })
+
+    this.rgbCanvas = await this.messageBroker.pull('rgbCanvas')
+    if (this.rgbCanvas) {
+      // Ensure the canvas has the proper dimensions
+      if (
+        this.rgbCanvas.width !== this.image.width ||
+        this.rgbCanvas.height !== this.image.height
+      ) {
+        this.rgbCanvas.width = this.image.width
+        this.rgbCanvas.height = this.image.height
+      }
+
+      // Make sure the style dimensions match the container
+      this.rgbCanvas.style.width = `${raw_width}px`
+      this.rgbCanvas.style.height = `${raw_height}px`
+    }
+  }
+
+  private handlePanStart(event: PointerEvent) {
+    this.messageBroker.pull('screenToCanvas', {
+      x: event.offsetX,
+      y: event.offsetY
+    })
+    this.mouseDownPoint = { x: event.clientX, y: event.clientY }
+    this.messageBroker.publish('panCursor', true)
+    this.initialPan = this.pan_offset
+    return
+  }
+
+  private handlePanMove(event: PointerEvent) {
+    if (this.mouseDownPoint === null) throw new Error('mouseDownPoint is null')
+
+    let deltaX = this.mouseDownPoint.x - event.clientX
+    let deltaY = this.mouseDownPoint.y - event.clientY
+
+    let pan_x = this.initialPan.x - deltaX
+    let pan_y = this.initialPan.y - deltaY
+
+    this.pan_offset = { x: pan_x, y: pan_y }
+
+    this.invalidatePanZoom()
+  }
+}
diff --git a/src/extensions/core/maskeditor/managers/ToolManager.ts b/src/extensions/core/maskeditor/managers/ToolManager.ts
new file mode 100644
index 000000000..37933c758
--- /dev/null
+++ b/src/extensions/core/maskeditor/managers/ToolManager.ts
@@ -0,0 +1,182 @@
+import type { MaskEditorDialog, Point } from '../types'
+import { Tools } from '../types'
+import { MessageBroker } from './MessageBroker'
+
+export class ToolManager {
+  maskEditor: MaskEditorDialog
+  messageBroker: MessageBroker
+  mouseDownPoint: Point | null = null
+
+  currentTool: Tools = Tools.MaskPen
+  isAdjustingBrush: boolean = false // is user adjusting brush size or hardness with alt + right mouse button
+
+  constructor(maskEditor: MaskEditorDialog) {
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+    this.addListeners()
+    this.addPullTopics()
+  }
+
+  private addListeners() {
+    this.messageBroker.subscribe('setTool', async (tool: Tools) => {
+      this.setTool(tool)
+    })
+
+    this.messageBroker.subscribe('pointerDown', async (event: PointerEvent) => {
+      this.handlePointerDown(event)
+    })
+
+    this.messageBroker.subscribe('pointerMove', async (event: PointerEvent) => {
+      this.handlePointerMove(event)
+    })
+
+    this.messageBroker.subscribe('pointerUp', async (event: PointerEvent) => {
+      this.handlePointerUp(event)
+    })
+
+    this.messageBroker.subscribe('wheel', async (event: WheelEvent) => {
+      this.handleWheelEvent(event)
+    })
+  }
+
+  private async addPullTopics() {
+    this.messageBroker.createPullTopic('currentTool', async () =>
+      this.getCurrentTool()
+    )
+  }
+
+  //tools
+
+  setTool(tool: Tools) {
+    this.currentTool = tool
+
+    if (tool != Tools.MaskColorFill) {
+      this.messageBroker.publish('clearLastPoint')
+    }
+  }
+
+  getCurrentTool() {
+    return this.currentTool
+  }
+
+  private async handlePointerDown(event: PointerEvent) {
+    event.preventDefault()
+    if (event.pointerType == 'touch') return
+
+    var isSpacePressed = await this.messageBroker.pull('isKeyPressed', ' ')
+
+    // Pan canvas
+    if (event.buttons === 4 || (event.buttons === 1 && isSpacePressed)) {
+      this.messageBroker.publish('panStart', event)
+      this.messageBroker.publish('setBrushVisibility', false)
+      return
+    }
+
+    // RGB painting
+    if (this.currentTool === Tools.PaintPen && event.button === 0) {
+      this.messageBroker.publish('drawStart', event)
+      this.messageBroker.publish('saveState')
+      return
+    }
+
+    // RGB painting
+    if (this.currentTool === Tools.PaintPen && event.buttons === 1) {
+      this.messageBroker.publish('draw', event)
+      return
+    }
+
+    //paint bucket
+    if (this.currentTool === Tools.MaskBucket && event.button === 0) {
+      const offset = { x: event.offsetX, y: event.offsetY }
+      const coords_canvas = await this.messageBroker.pull(
+        'screenToCanvas',
+        offset
+      )
+      this.messageBroker.publish('paintBucketFill', coords_canvas)
+      this.messageBroker.publish('saveState')
+      return
+    }
+
+    if (this.currentTool === Tools.MaskColorFill && event.button === 0) {
+      const offset = { x: event.offsetX, y: event.offsetY }
+      const coords_canvas = await this.messageBroker.pull(
+        'screenToCanvas',
+        offset
+      )
+      this.messageBroker.publish('colorSelectFill', coords_canvas)
+      return
+    }
+
+    // (brush resize/change hardness) Check for alt + right mouse button
+    if (event.altKey && event.button === 2) {
+      this.isAdjustingBrush = true
+      this.messageBroker.publish('brushAdjustmentStart', event)
+      return
+    }
+
+    var isDrawingTool = [Tools.MaskPen, Tools.Eraser, Tools.PaintPen].includes(
+      this.currentTool
+    )
+    //drawing
+    if ([0, 2].includes(event.button) && isDrawingTool) {
+      this.messageBroker.publish('drawStart', event)
+      return
+    }
+  }
+
+  private async handlePointerMove(event: PointerEvent) {
+    event.preventDefault()
+    if (event.pointerType == 'touch') return
+    const newCursorPoint = { x: event.clientX, y: event.clientY }
+    this.messageBroker.publish('cursorPoint', newCursorPoint)
+
+    var isSpacePressed = await this.messageBroker.pull('isKeyPressed', ' ')
+    this.messageBroker.publish('updateBrushPreview')
+
+    //move the canvas
+    if (event.buttons === 4 || (event.buttons === 1 && isSpacePressed)) {
+      this.messageBroker.publish('panMove', event)
+      return
+    }
+
+    //prevent drawing with other tools
+
+    var isDrawingTool = [Tools.MaskPen, Tools.Eraser, Tools.PaintPen].includes(
+      this.currentTool
+    )
+    if (!isDrawingTool) return
+
+    // alt + right mouse button hold brush adjustment
+    if (
+      this.isAdjustingBrush &&
+      (this.currentTool === Tools.MaskPen ||
+        this.currentTool === Tools.Eraser) &&
+      event.altKey &&
+      event.buttons === 2
+    ) {
+      this.messageBroker.publish('brushAdjustment', event)
+      return
+    }
+
+    //draw with pen or eraser
+    if (event.buttons == 1 || event.buttons == 2) {
+      this.messageBroker.publish('draw', event)
+      return
+    }
+  }
+
+  private handlePointerUp(event: PointerEvent) {
+    this.messageBroker.publish('panCursor', false)
+    if (event.pointerType === 'touch') return
+    this.messageBroker.publish('updateCursor')
+    this.isAdjustingBrush = false
+    this.messageBroker.publish('drawEnd', event)
+    this.mouseDownPoint = null
+  }
+
+  private handleWheelEvent(event: WheelEvent) {
+    this.messageBroker.publish('zoom', event)
+    const newCursorPoint = { x: event.clientX, y: event.clientY }
+    this.messageBroker.publish('cursorPoint', newCursorPoint)
+  }
+}
diff --git a/src/extensions/core/maskeditor/managers/UIManager.ts b/src/extensions/core/maskeditor/managers/UIManager.ts
new file mode 100644
index 000000000..2ecdfbafd
--- /dev/null
+++ b/src/extensions/core/maskeditor/managers/UIManager.ts
@@ -0,0 +1,1737 @@
+import { t } from '@/i18n'
+import { ComfyApp } from '@/scripts/app'
+import type {
+  MaskEditorDialog,
+  ImageLayer,
+  Point,
+  ToolInternalSettings
+} from '../types'
+import { MessageBroker } from './MessageBroker'
+import {
+  BrushShape,
+  ColorComparisonMethod,
+  MaskBlendMode,
+  Tools,
+  allImageLayers,
+  allTools
+} from '../types'
+import { iconsHtml } from '../constants'
+import { imageLayerFilenamesIfApplicable, mkFileUrl, toRef } from '../utils'
+
+export class UIManager {
+  private rootElement: HTMLElement
+  private brush!: HTMLDivElement
+  private brushPreviewGradient!: HTMLDivElement
+  private maskCtx!: CanvasRenderingContext2D
+  private rgbCtx!: CanvasRenderingContext2D
+  private imageCtx!: CanvasRenderingContext2D
+  private maskCanvas!: HTMLCanvasElement
+  private rgbCanvas!: HTMLCanvasElement
+  private imgCanvas!: HTMLCanvasElement
+  private brushSettingsHTML!: HTMLDivElement
+  private paintBucketSettingsHTML!: HTMLDivElement
+  private colorSelectSettingsHTML!: HTMLDivElement
+  // @ts-expect-error unused variable
+  private maskOpacitySlider!: HTMLInputElement
+  private brushHardnessSlider!: HTMLInputElement
+  private brushSizeSlider!: HTMLInputElement
+  // @ts-expect-error unused variable
+  private brushOpacitySlider!: HTMLInputElement
+  private sidebarImage!: HTMLImageElement
+  private saveButton!: HTMLButtonElement
+  private toolPanel!: HTMLDivElement
+  // @ts-expect-error unused variable
+  private sidePanel!: HTMLDivElement
+  private pointerZone!: HTMLDivElement
+  private canvasBackground!: HTMLDivElement
+  private canvasContainer!: HTMLDivElement
+  private image!: HTMLImageElement
+  private paint_image!: HTMLImageElement
+  private imageURL!: URL
+  private darkMode: boolean = true
+  private maskLayerContainer: HTMLElement | null = null
+  private paintLayerContainer: HTMLElement | null = null
+
+  private createColorPicker(): HTMLInputElement {
+    const colorPicker = document.createElement('input')
+    colorPicker.type = 'color'
+    colorPicker.id = 'maskEditor_colorPicker'
+    colorPicker.value = '#FF0000' // Default color
+    colorPicker.addEventListener('input', (event) => {
+      const color = (event.target as HTMLInputElement).value
+      this.messageBroker.publish('setRGBColor', color)
+    })
+    return colorPicker
+  }
+
+  private maskEditor: MaskEditorDialog
+  private messageBroker: MessageBroker
+
+  private mask_opacity: number = 0.8
+  private maskBlendMode: MaskBlendMode = MaskBlendMode.Black
+
+  private zoomTextHTML!: HTMLSpanElement
+  private dimensionsTextHTML!: HTMLSpanElement
+
+  constructor(rootElement: HTMLElement, maskEditor: MaskEditorDialog) {
+    this.rootElement = rootElement
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+    this.addListeners()
+    this.addPullTopics()
+  }
+
+  addListeners() {
+    this.messageBroker.subscribe('updateBrushPreview', async () =>
+      this.updateBrushPreview()
+    )
+
+    this.messageBroker.subscribe(
+      'paintBucketCursor',
+      (isPaintBucket: boolean) => this.handlePaintBucketCursor(isPaintBucket)
+    )
+
+    this.messageBroker.subscribe('panCursor', (isPan: boolean) =>
+      this.handlePanCursor(isPan)
+    )
+
+    this.messageBroker.subscribe('setBrushVisibility', (isVisible: boolean) =>
+      this.setBrushVisibility(isVisible)
+    )
+
+    this.messageBroker.subscribe(
+      'setBrushPreviewGradientVisibility',
+      (isVisible: boolean) => this.setBrushPreviewGradientVisibility(isVisible)
+    )
+
+    this.messageBroker.subscribe('updateCursor', () => this.updateCursor())
+
+    this.messageBroker.subscribe('setZoomText', (text: string) =>
+      this.setZoomText(text)
+    )
+  }
+
+  addPullTopics() {
+    this.messageBroker.createPullTopic(
+      'maskCanvas',
+      async () => this.maskCanvas
+    )
+    this.messageBroker.createPullTopic('maskCtx', async () => this.maskCtx)
+    this.messageBroker.createPullTopic('imageCtx', async () => this.imageCtx)
+    this.messageBroker.createPullTopic('imgCanvas', async () => this.imgCanvas)
+    this.messageBroker.createPullTopic('rgbCtx', async () => this.rgbCtx)
+    this.messageBroker.createPullTopic('rgbCanvas', async () => this.rgbCanvas)
+    this.messageBroker.createPullTopic(
+      'screenToCanvas',
+      async (coords: Point) => this.screenToCanvas(coords)
+    )
+    this.messageBroker.createPullTopic(
+      'getCanvasContainer',
+      async () => this.canvasContainer
+    )
+    this.messageBroker.createPullTopic('getMaskColor', async () =>
+      this.getMaskColor()
+    )
+  }
+
+  async setlayout() {
+    this.detectLightMode()
+    var user_ui = await this.createUI()
+    var canvasContainer = this.createBackgroundUI()
+
+    var brush = await this.createBrush()
+    await this.setBrushBorderRadius()
+    this.setBrushOpacity(1)
+    this.rootElement.appendChild(canvasContainer)
+    this.rootElement.appendChild(user_ui)
+    document.body.appendChild(brush)
+  }
+
+  private async createUI() {
+    var ui_container = document.createElement('div')
+    ui_container.id = 'maskEditor_uiContainer'
+
+    var top_bar = await this.createTopBar()
+
+    var ui_horizontal_container = document.createElement('div')
+    ui_horizontal_container.id = 'maskEditor_uiHorizontalContainer'
+
+    var side_panel_container = await this.createSidePanel()
+
+    var pointer_zone = this.createPointerZone()
+
+    var tool_panel = this.createToolPanel()
+
+    ui_horizontal_container.appendChild(tool_panel)
+    ui_horizontal_container.appendChild(pointer_zone)
+    ui_horizontal_container.appendChild(side_panel_container)
+
+    ui_container.appendChild(top_bar)
+    ui_container.appendChild(ui_horizontal_container)
+
+    return ui_container
+  }
+
+  private createBackgroundUI() {
+    const canvasContainer = document.createElement('div')
+    canvasContainer.id = 'maskEditorCanvasContainer'
+
+    const imgCanvas = document.createElement('canvas')
+    imgCanvas.id = 'imageCanvas'
+
+    const maskCanvas = document.createElement('canvas')
+    maskCanvas.id = 'maskCanvas'
+
+    const rgbCanvas = document.createElement('canvas')
+    rgbCanvas.id = 'rgbCanvas'
+
+    const canvas_background = document.createElement('div')
+    canvas_background.id = 'canvasBackground'
+
+    canvasContainer.appendChild(imgCanvas)
+    canvasContainer.appendChild(rgbCanvas)
+    canvasContainer.appendChild(maskCanvas)
+    canvasContainer.appendChild(canvas_background)
+
+    // prepare content
+    this.imgCanvas = imgCanvas!
+    this.rgbCanvas = rgbCanvas!
+    this.maskCanvas = maskCanvas!
+    this.canvasContainer = canvasContainer!
+    this.canvasBackground = canvas_background!
+
+    let maskCtx = maskCanvas!.getContext('2d', { willReadFrequently: true })
+    if (maskCtx) {
+      this.maskCtx = maskCtx
+    }
+    let rgbCtx = rgbCanvas.getContext('2d', { willReadFrequently: true })
+    if (rgbCtx) {
+      this.rgbCtx = rgbCtx
+    }
+    let imgCtx = imgCanvas!.getContext('2d', { willReadFrequently: true })
+    if (imgCtx) {
+      this.imageCtx = imgCtx
+    }
+    this.setEventHandler()
+
+    //remove styling and move to css file
+
+    this.imgCanvas.style.position = 'absolute'
+    this.rgbCanvas.style.position = 'absolute'
+    this.maskCanvas.style.position = 'absolute'
+
+    this.imgCanvas.style.top = '200'
+    this.imgCanvas.style.left = '0'
+
+    this.rgbCanvas.style.top = this.imgCanvas.style.top
+    this.rgbCanvas.style.left = this.imgCanvas.style.left
+
+    this.maskCanvas.style.top = this.imgCanvas.style.top
+    this.maskCanvas.style.left = this.imgCanvas.style.left
+
+    const maskCanvasStyle = this.getMaskCanvasStyle()
+    this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode
+    this.maskCanvas.style.opacity = maskCanvasStyle.opacity.toString()
+
+    return canvasContainer
+  }
+
+  async setBrushBorderRadius() {
+    const brushSettings = await this.messageBroker.pull('brushSettings')
+
+    if (brushSettings.type === BrushShape.Rect) {
+      this.brush.style.borderRadius = '0%'
+      // @ts-expect-error
+      this.brush.style.MozBorderRadius = '0%'
+      // @ts-expect-error
+      this.brush.style.WebkitBorderRadius = '0%'
+    } else {
+      this.brush.style.borderRadius = '50%'
+      // @ts-expect-error
+      this.brush.style.MozBorderRadius = '50%'
+      // @ts-expect-error
+      this.brush.style.WebkitBorderRadius = '50%'
+    }
+  }
+
+  async initUI() {
+    this.saveButton.innerText = t('g.save')
+    this.saveButton.disabled = false
+
+    await this.setImages(this.imgCanvas) //probably change method to initImageCanvas
+  }
+
+  private async createSidePanel() {
+    const sidePanelWrapper = this.createContainer(true)
+    const side_panel = document.createElement('div')
+    sidePanelWrapper.id = 'maskEditor_sidePanel'
+    side_panel.id = 'maskEditor_sidePanelContent'
+
+    const brush_settings = await this.createBrushSettings()
+    brush_settings.id = 'maskEditor_brushSettings'
+    this.brushSettingsHTML = brush_settings
+
+    const paint_bucket_settings = await this.createPaintBucketSettings()
+    paint_bucket_settings.id = 'maskEditor_paintBucketSettings'
+    this.paintBucketSettingsHTML = paint_bucket_settings
+
+    const color_select_settings = await this.createColorSelectSettings()
+    color_select_settings.id = 'maskEditor_colorSelectSettings'
+    this.colorSelectSettingsHTML = color_select_settings
+
+    const image_layer_settings = await this.createImageLayerSettings()
+
+    const separator = this.createSeparator()
+
+    side_panel.appendChild(brush_settings)
+    side_panel.appendChild(paint_bucket_settings)
+    side_panel.appendChild(color_select_settings)
+    side_panel.appendChild(separator)
+    side_panel.appendChild(image_layer_settings)
+    sidePanelWrapper.appendChild(side_panel)
+
+    return sidePanelWrapper
+  }
+
+  private async createBrushSettings() {
+    const shapeColor = this.darkMode
+      ? 'maskEditor_brushShape_dark'
+      : 'maskEditor_brushShape_light'
+    const brush_settings_container = this.createContainer(true)
+
+    const brush_settings_title = this.createHeadline(
+      t('maskEditor.Brush Settings')
+    )
+
+    const brush_shape_outer_container = this.createContainer(true)
+
+    const brush_shape_title = this.createContainerTitle(
+      t('maskEditor.Brush Shape')
+    )
+
+    const brush_shape_container = this.createContainer(false)
+
+    const accentColor = this.darkMode
+      ? 'maskEditor_accent_bg_dark'
+      : 'maskEditor_accent_bg_light'
+
+    brush_shape_container.classList.add(accentColor)
+    brush_shape_container.classList.add('maskEditor_layerRow')
+
+    const circle_shape = document.createElement('div')
+    circle_shape.id = 'maskEditor_sidePanelBrushShapeCircle'
+    circle_shape.classList.add(shapeColor)
+    circle_shape.addEventListener('click', () => {
+      this.messageBroker.publish('setBrushShape', BrushShape.Arc)
+      this.setBrushBorderRadius()
+      circle_shape.style.background = 'var(--p-button-text-primary-color)'
+      square_shape.style.background = ''
+    })
+
+    const square_shape = document.createElement('div')
+    square_shape.id = 'maskEditor_sidePanelBrushShapeSquare'
+    square_shape.classList.add(shapeColor)
+    square_shape.addEventListener('click', () => {
+      this.messageBroker.publish('setBrushShape', BrushShape.Rect)
+      this.setBrushBorderRadius()
+      square_shape.style.background = 'var(--p-button-text-primary-color)'
+      circle_shape.style.background = ''
+    })
+
+    if (
+      (await this.messageBroker.pull('brushSettings')).type === BrushShape.Arc
+    ) {
+      circle_shape.style.background = 'var(--p-button-text-primary-color)'
+      square_shape.style.background = ''
+    } else {
+      circle_shape.style.background = ''
+      square_shape.style.background = 'var(--p-button-text-primary-color)'
+    }
+
+    brush_shape_container.appendChild(circle_shape)
+    brush_shape_container.appendChild(square_shape)
+
+    brush_shape_outer_container.appendChild(brush_shape_title)
+    brush_shape_outer_container.appendChild(brush_shape_container)
+
+    const thicknesSliderObj = this.createSlider(
+      t('maskEditor.Thickness'),
+      1,
+      100,
+      1,
+      (await this.messageBroker.pull('brushSettings')).size,
+      (_, value) => {
+        this.messageBroker.publish('setBrushSize', parseInt(value))
+        this.updateBrushPreview()
+      }
+    )
+    this.brushSizeSlider = thicknesSliderObj.slider
+
+    const opacitySliderObj = this.createSlider(
+      t('maskEditor.Opacity'),
+      0,
+      1,
+      0.01,
+      (await this.messageBroker.pull('brushSettings')).opacity,
+      (_, value) => {
+        this.messageBroker.publish('setBrushOpacity', parseFloat(value))
+        this.updateBrushPreview()
+      }
+    )
+    this.brushOpacitySlider = opacitySliderObj.slider
+
+    const hardnessSliderObj = this.createSlider(
+      t('maskEditor.Hardness'),
+      0,
+      1,
+      0.01,
+      (await this.messageBroker.pull('brushSettings')).hardness,
+      (_, value) => {
+        this.messageBroker.publish('setBrushHardness', parseFloat(value))
+        this.updateBrushPreview()
+      }
+    )
+    this.brushHardnessSlider = hardnessSliderObj.slider
+
+    const brushSmoothingPrecisionSliderObj = this.createSlider(
+      t('maskEditor.Smoothing Precision'),
+      1,
+      100,
+      1,
+      (await this.messageBroker.pull('brushSettings')).smoothingPrecision,
+      (_, value) => {
+        this.messageBroker.publish(
+          'setBrushSmoothingPrecision',
+          parseInt(value)
+        )
+      }
+    )
+
+    const resetBrushSettingsButton = document.createElement('button')
+    resetBrushSettingsButton.id = 'resetBrushSettingsButton'
+    resetBrushSettingsButton.innerText = t('maskEditor.Reset to Default')
+
+    resetBrushSettingsButton.addEventListener('click', () => {
+      this.messageBroker.publish('setBrushShape', BrushShape.Arc)
+      this.messageBroker.publish('setBrushSize', 20)
+      this.messageBroker.publish('setBrushOpacity', 1)
+      this.messageBroker.publish('setBrushHardness', 1)
+      this.messageBroker.publish('setBrushSmoothingPrecision', 60)
+
+      circle_shape.style.background = 'var(--p-button-text-primary-color)'
+      square_shape.style.background = ''
+
+      thicknesSliderObj.slider.value = '20'
+      opacitySliderObj.slider.value = '1'
+      hardnessSliderObj.slider.value = '1'
+      brushSmoothingPrecisionSliderObj.slider.value = '60'
+
+      this.setBrushBorderRadius()
+      this.updateBrushPreview()
+    })
+
+    brush_settings_container.appendChild(brush_settings_title)
+    brush_settings_container.appendChild(resetBrushSettingsButton)
+    brush_settings_container.appendChild(brush_shape_outer_container)
+
+    // Create a new container for the color picker and its title
+    const color_picker_container = this.createContainer(true)
+
+    // Add the color picker title
+    const colorPickerTitle = document.createElement('span')
+    colorPickerTitle.innerText = 'Color Selector'
+    colorPickerTitle.classList.add('maskEditor_sidePanelSubTitle') // Mimic brush shape title style
+    color_picker_container.appendChild(colorPickerTitle)
+
+    // Add the color picker
+    const colorPicker = this.createColorPicker()
+    color_picker_container.appendChild(colorPicker)
+
+    // Add the color picker container to the main settings container
+    brush_settings_container.appendChild(color_picker_container)
+
+    brush_settings_container.appendChild(thicknesSliderObj.container)
+    brush_settings_container.appendChild(opacitySliderObj.container)
+    brush_settings_container.appendChild(hardnessSliderObj.container)
+    brush_settings_container.appendChild(
+      brushSmoothingPrecisionSliderObj.container
+    )
+
+    return brush_settings_container
+  }
+
+  private async createPaintBucketSettings() {
+    const paint_bucket_settings_container = this.createContainer(true)
+
+    const paint_bucket_settings_title = this.createHeadline(
+      t('maskEditor.Paint Bucket Settings')
+    )
+
+    const tolerance = await this.messageBroker.pull('getTolerance')
+    const paintBucketToleranceSliderObj = this.createSlider(
+      t('maskEditor.Tolerance'),
+      0,
+      255,
+      1,
+      tolerance,
+      (_, value) => {
+        this.messageBroker.publish('setPaintBucketTolerance', parseInt(value))
+      }
+    )
+
+    // Add new slider for fill opacity
+    const fillOpacity = (await this.messageBroker.pull('getFillOpacity')) || 100
+    const fillOpacitySliderObj = this.createSlider(
+      t('maskEditor.Fill Opacity'),
+      0,
+      100,
+      1,
+      fillOpacity,
+      (_, value) => {
+        this.messageBroker.publish('setFillOpacity', parseInt(value))
+      }
+    )
+
+    paint_bucket_settings_container.appendChild(paint_bucket_settings_title)
+    paint_bucket_settings_container.appendChild(
+      paintBucketToleranceSliderObj.container
+    )
+    // Add the new opacity slider to the UI
+    paint_bucket_settings_container.appendChild(fillOpacitySliderObj.container)
+
+    return paint_bucket_settings_container
+  }
+
+  private async createColorSelectSettings() {
+    const color_select_settings_container = this.createContainer(true)
+
+    const color_select_settings_title = this.createHeadline(
+      t('maskEditor.Color Select Settings')
+    )
+
+    var tolerance = await this.messageBroker.pull('getTolerance')
+    const colorSelectToleranceSliderObj = this.createSlider(
+      t('maskEditor.Tolerance'),
+      0,
+      255,
+      1,
+      tolerance,
+      (_, value) => {
+        this.messageBroker.publish('setColorSelectTolerance', parseInt(value))
+      }
+    )
+
+    // Add new slider for selection opacity
+    const selectionOpacitySliderObj = this.createSlider(
+      t('maskEditor.Selection Opacity'),
+      0,
+      100,
+      1,
+      100, // Default to 100%
+      (_, value) => {
+        this.messageBroker.publish('setSelectionOpacity', parseInt(value))
+      }
+    )
+
+    const livePreviewToggle = this.createToggle(
+      t('maskEditor.Live Preview'),
+      (_, value) => {
+        this.messageBroker.publish('setLivePreview', value)
+      }
+    )
+
+    const wholeImageToggle = this.createToggle(
+      t('maskEditor.Apply to Whole Image'),
+      (_, value) => {
+        this.messageBroker.publish('setWholeImage', value)
+      }
+    )
+
+    const methodOptions = Object.values(ColorComparisonMethod)
+    const methodSelect = this.createDropdown(
+      t('maskEditor.Method'),
+      methodOptions,
+      (_, value) => {
+        this.messageBroker.publish('setColorComparisonMethod', value)
+      }
+    )
+
+    const maskBoundaryToggle = this.createToggle(
+      t('maskEditor.Stop at mask'),
+      (_, value) => {
+        this.messageBroker.publish('setMaskBoundary', value)
+      }
+    )
+
+    const maskToleranceSliderObj = this.createSlider(
+      t('maskEditor.Mask Tolerance'),
+      0,
+      255,
+      1,
+      0,
+      (_, value) => {
+        this.messageBroker.publish('setMaskTolerance', parseInt(value))
+      }
+    )
+
+    color_select_settings_container.appendChild(color_select_settings_title)
+    color_select_settings_container.appendChild(
+      colorSelectToleranceSliderObj.container
+    )
+    // Add the new opacity slider to the UI
+    color_select_settings_container.appendChild(
+      selectionOpacitySliderObj.container
+    )
+    color_select_settings_container.appendChild(livePreviewToggle)
+    color_select_settings_container.appendChild(wholeImageToggle)
+    color_select_settings_container.appendChild(methodSelect)
+    color_select_settings_container.appendChild(maskBoundaryToggle)
+    color_select_settings_container.appendChild(
+      maskToleranceSliderObj.container
+    )
+
+    return color_select_settings_container
+  }
+
+  activeLayer: 'mask' | 'rgb' = 'mask'
+  layerButtons: Record<ImageLayer, HTMLButtonElement> = {
+    mask: (() => {
+      const btn = document.createElement('button')
+      btn.style.fontSize = '12px'
+      return btn
+    })(),
+    rgb: (() => {
+      const btn = document.createElement('button')
+      btn.style.fontSize = '12px'
+      return btn
+    })()
+  }
+  updateButtonsVisibility() {
+    allImageLayers.forEach((layer) => {
+      const button = this.layerButtons[layer]
+      if (layer === this.activeLayer) {
+        button.style.opacity = '0.5'
+        button.disabled = true
+      } else {
+        button.style.opacity = '1'
+        button.disabled = false
+      }
+    })
+  }
+
+  async updateLayerButtonsForTool() {
+    const currentTool = await this.messageBroker.pull('currentTool')
+    const isEraserTool = currentTool === Tools.Eraser
+
+    // Show/hide buttons based on whether eraser tool is active
+    Object.values(this.layerButtons).forEach((button) => {
+      if (isEraserTool) {
+        button.style.display = 'block'
+      } else {
+        button.style.display = 'none'
+      }
+    })
+  }
+
+  async setActiveLayer(layer: 'mask' | 'rgb') {
+    this.messageBroker.publish('setActiveLayer', layer)
+    this.activeLayer = layer
+    this.updateButtonsVisibility()
+    const currentTool = await this.messageBroker.pull('currentTool')
+    const maskOnlyTools = [Tools.MaskPen, Tools.MaskBucket, Tools.MaskColorFill]
+    if (maskOnlyTools.includes(currentTool) && layer === 'rgb') {
+      this.setToolTo(Tools.PaintPen)
+    }
+    if (currentTool === Tools.PaintPen && layer === 'mask') {
+      this.setToolTo(Tools.MaskPen)
+    }
+    this.updateActiveLayerHighlight()
+  }
+
+  updateActiveLayerHighlight() {
+    // Remove blue border from all containers
+    if (this.maskLayerContainer) {
+      this.maskLayerContainer.style.border = 'none'
+    }
+    if (this.paintLayerContainer) {
+      this.paintLayerContainer.style.border = 'none'
+    }
+
+    // Add blue border to active layer container
+    if (this.activeLayer === 'mask' && this.maskLayerContainer) {
+      this.maskLayerContainer.style.border = '2px solid #007acc'
+    } else if (this.activeLayer === 'rgb' && this.paintLayerContainer) {
+      this.paintLayerContainer.style.border = '2px solid #007acc'
+    }
+  }
+
+  private async createImageLayerSettings() {
+    const accentColor = this.darkMode
+      ? 'maskEditor_accent_bg_dark'
+      : 'maskEditor_accent_bg_light'
+
+    const image_layer_settings_container = this.createContainer(true)
+
+    const image_layer_settings_title = this.createHeadline(
+      t('maskEditor.Layers')
+    )
+
+    // Add a new container for layer selection
+    const layer_selection_container = this.createContainer(false)
+    layer_selection_container.classList.add(accentColor)
+    layer_selection_container.classList.add('maskEditor_layerRow')
+
+    this.layerButtons.mask.innerText = 'Activate Layer'
+    this.layerButtons.mask.addEventListener('click', async () => {
+      this.setActiveLayer('mask')
+    })
+
+    this.layerButtons.rgb.innerText = 'Activate Layer'
+    this.layerButtons.rgb.addEventListener('click', async () => {
+      this.setActiveLayer('rgb')
+    })
+
+    // Initially hide the buttons (they'll be shown when eraser tool is selected)
+    this.layerButtons.mask.style.display = 'none'
+    this.layerButtons.rgb.style.display = 'none'
+
+    this.setActiveLayer('mask')
+
+    // 1. MASK LAYER CONTAINER
+    const mask_layer_title = this.createContainerTitle('Mask Layer')
+    const mask_layer_container = this.createContainer(false)
+    mask_layer_container.classList.add(accentColor)
+    mask_layer_container.classList.add('maskEditor_layerRow')
+
+    const mask_layer_visibility_checkbox = document.createElement('input')
+    mask_layer_visibility_checkbox.setAttribute('type', 'checkbox')
+    mask_layer_visibility_checkbox.checked = true
+    mask_layer_visibility_checkbox.classList.add(
+      'maskEditor_sidePanelLayerCheckbox'
+    )
+    mask_layer_visibility_checkbox.addEventListener('change', (event) => {
+      if (!(event.target as HTMLInputElement)!.checked) {
+        this.maskCanvas.style.opacity = '0'
+      } else {
+        this.maskCanvas.style.opacity = String(this.mask_opacity)
+      }
+    })
+
+    var mask_layer_image_container = document.createElement('div')
+    mask_layer_image_container.classList.add(
+      'maskEditor_sidePanelLayerPreviewContainer'
+    )
+    mask_layer_image_container.innerHTML =
+      '<svg viewBox="0 0 20 20" style="">   <path class="cls-1" d="M1.31,5.32v9.36c0,.55.45,1,1,1h15.38c.55,0,1-.45,1-1V5.32c0-.55-.45-1-1-1H2.31c-.55,0-1,.45-1,1ZM11.19,13.44c-2.91.94-5.57-1.72-4.63-4.63.34-1.05,1.19-1.9,2.24-2.24,2.91-.94,5.57,1.72,4.63,4.63-.34,1.05-1.19-1.9-2.24,2.24Z"/> </svg>'
+
+    // Add checkbox, image container, and activate button to mask layer container
+    mask_layer_container.appendChild(mask_layer_visibility_checkbox)
+    mask_layer_container.appendChild(mask_layer_image_container)
+    mask_layer_container.appendChild(this.layerButtons.mask)
+
+    // Store reference to container for highlighting
+    this.maskLayerContainer = mask_layer_container
+
+    // 2. MASK BLENDING OPTIONS CONTAINER
+    const mask_blending_options_title = this.createContainerTitle(
+      'Mask Blending Options'
+    )
+    const mask_blending_options_container = this.createContainer(false)
+    // mask_blending_options_container.classList.add(accentColor)
+    mask_blending_options_container.classList.add('maskEditor_layerRow')
+    mask_blending_options_container.style.marginTop = '-9px'
+    mask_blending_options_container.style.marginBottom = '-6px'
+    var blending_options = ['black', 'white', 'negative']
+    const sidePanelDropdownAccent = this.darkMode
+      ? 'maskEditor_sidePanelDropdown_dark'
+      : 'maskEditor_sidePanelDropdown_light'
+
+    var mask_layer_dropdown = document.createElement('select')
+    mask_layer_dropdown.classList.add(sidePanelDropdownAccent)
+    blending_options.forEach((option) => {
+      var option_element = document.createElement('option')
+      option_element.value = option
+      option_element.innerText = option
+      mask_layer_dropdown.appendChild(option_element)
+
+      if (option == this.maskBlendMode) {
+        option_element.selected = true
+      }
+    })
+
+    mask_layer_dropdown.addEventListener('change', (event) => {
+      const selectedValue = (event.target as HTMLSelectElement)
+        .value as MaskBlendMode
+      this.maskBlendMode = selectedValue
+      this.updateMaskColor()
+    })
+
+    // Center the dropdown in its container
+    // mask_blending_options_container.style.display = 'flex'
+    // mask_blending_options_container.style.justifyContent = 'center'
+    mask_blending_options_container.appendChild(mask_layer_dropdown)
+
+    // 3. MASK OPACITY SLIDER
+    const mask_layer_opacity_sliderObj = this.createSlider(
+      t('maskEditor.Mask Opacity'),
+      0.0,
+      1.0,
+      0.01,
+      this.mask_opacity,
+      (_, value) => {
+        this.mask_opacity = parseFloat(value)
+        this.maskCanvas.style.opacity = String(this.mask_opacity)
+
+        if (this.mask_opacity == 0) {
+          mask_layer_visibility_checkbox.checked = false
+        } else {
+          mask_layer_visibility_checkbox.checked = true
+        }
+      }
+    )
+    this.maskOpacitySlider = mask_layer_opacity_sliderObj.slider
+
+    // 4. PAINT LAYER CONTAINER
+    const paint_layer_title = this.createContainerTitle('Paint Layer')
+    const paint_layer_container = this.createContainer(false)
+    paint_layer_container.classList.add(accentColor)
+    paint_layer_container.classList.add('maskEditor_layerRow')
+
+    const paint_layer_checkbox = document.createElement('input')
+    paint_layer_checkbox.setAttribute('type', 'checkbox')
+    paint_layer_checkbox.classList.add('maskEditor_sidePanelLayerCheckbox')
+    paint_layer_checkbox.checked = true
+    paint_layer_checkbox.addEventListener('change', (event) => {
+      if (!(event.target as HTMLInputElement)!.checked) {
+        this.rgbCanvas.style.opacity = '0'
+      } else {
+        this.rgbCanvas.style.opacity = '1'
+      }
+    })
+
+    const paint_layer_image_container = document.createElement('div')
+    paint_layer_image_container.classList.add(
+      'maskEditor_sidePanelLayerPreviewContainer'
+    )
+    paint_layer_image_container.innerHTML = `
+      <svg viewBox="0 0 20 20">
+        <path class="cls-1" d="M 17 6.965 c 0 0.235 -0.095 0.47 -0.275 0.655 l -6.51 6.52 c -0.045 0.035 -0.09 0.075 -0.135 0.11 c -0.035 -0.695 -0.605 -1.24 -1.305 -1.245 c 0.035 -0.06 0.08 -0.12 0.135 -0.17 l 6.52 -6.52 c 0.36 -0.36 0.945 -0.36 1.3 0 c 0.175 0.175 0.275 0.415 0.275 0.65 Z"/>
+        <path class="cls-1" d="M 9.82 14.515 c 0 2.23 -3.23 1.59 -4.82 0 c 1.65 -0.235 2.375 -1.29 3.53 -1.29 c 0.715 0 1.29 0.58 1.29 1.29 Z"/>
+      </svg>
+    `
+
+    paint_layer_container.appendChild(paint_layer_checkbox)
+    paint_layer_container.appendChild(paint_layer_image_container)
+    paint_layer_container.appendChild(this.layerButtons.rgb)
+
+    // Store reference to container for highlighting
+    this.paintLayerContainer = paint_layer_container
+
+    // 5. BASE IMAGE LAYER CONTAINER
+    const base_image_layer_title = this.createContainerTitle('Base Image Layer')
+    const base_image_layer_container = this.createContainer(false)
+    base_image_layer_container.classList.add(accentColor)
+    base_image_layer_container.classList.add('maskEditor_layerRow')
+
+    const base_image_layer_visibility_checkbox = document.createElement('input')
+    base_image_layer_visibility_checkbox.setAttribute('type', 'checkbox')
+    base_image_layer_visibility_checkbox.classList.add(
+      'maskEditor_sidePanelLayerCheckbox'
+    )
+    base_image_layer_visibility_checkbox.checked = true
+    base_image_layer_visibility_checkbox.addEventListener('change', (event) => {
+      if (!(event.target as HTMLInputElement)!.checked) {
+        this.imgCanvas.style.opacity = '0'
+      } else {
+        this.imgCanvas.style.opacity = '1'
+      }
+    })
+
+    const base_image_layer_image_container = document.createElement('div')
+    base_image_layer_image_container.classList.add(
+      'maskEditor_sidePanelLayerPreviewContainer'
+    )
+
+    const base_image_layer_image = document.createElement('img')
+    base_image_layer_image.id = 'maskEditor_sidePanelImageLayerImage'
+    base_image_layer_image.src =
+      ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src ??
+      ''
+    this.sidebarImage = base_image_layer_image
+
+    base_image_layer_image_container.appendChild(base_image_layer_image)
+
+    base_image_layer_container.appendChild(base_image_layer_visibility_checkbox)
+    base_image_layer_container.appendChild(base_image_layer_image_container)
+
+    // APPEND ALL CONTAINERS IN ORDER
+    image_layer_settings_container.appendChild(image_layer_settings_title)
+    image_layer_settings_container.appendChild(
+      mask_layer_opacity_sliderObj.container
+    )
+    image_layer_settings_container.appendChild(mask_blending_options_title)
+    image_layer_settings_container.appendChild(mask_blending_options_container)
+    image_layer_settings_container.appendChild(mask_layer_title)
+    image_layer_settings_container.appendChild(mask_layer_container)
+    image_layer_settings_container.appendChild(paint_layer_title)
+    image_layer_settings_container.appendChild(paint_layer_container)
+    image_layer_settings_container.appendChild(base_image_layer_title)
+    image_layer_settings_container.appendChild(base_image_layer_container)
+
+    // Initialize the active layer highlighting
+    this.updateActiveLayerHighlight()
+
+    // Initialize button visibility based on current tool
+    this.updateLayerButtonsForTool()
+
+    return image_layer_settings_container
+  }
+
+  // Method to be called when tool changes
+  async onToolChange() {
+    await this.updateLayerButtonsForTool()
+  }
+
+  private createHeadline(title: string) {
+    var headline = document.createElement('h3')
+    headline.classList.add('maskEditor_sidePanelTitle')
+    headline.innerText = title
+
+    return headline
+  }
+
+  private createContainer(flexDirection: boolean) {
+    var container = document.createElement('div')
+    if (flexDirection) {
+      container.classList.add('maskEditor_sidePanelContainerColumn')
+    } else {
+      container.classList.add('maskEditor_sidePanelContainerRow')
+    }
+
+    return container
+  }
+
+  private createContainerTitle(title: string) {
+    var container_title = document.createElement('span')
+    container_title.classList.add('maskEditor_sidePanelSubTitle')
+    container_title.innerText = title
+
+    return container_title
+  }
+
+  private createSlider(
+    title: string,
+    min: number,
+    max: number,
+    step: number,
+    value: number,
+    callback: (event: Event, value: string) => void
+  ) {
+    var slider_container = this.createContainer(true)
+    var slider_title = this.createContainerTitle(title)
+    var slider = document.createElement('input')
+    slider.classList.add('maskEditor_sidePanelBrushRange')
+    slider.setAttribute('type', 'range')
+    slider.setAttribute('min', String(min))
+    slider.setAttribute('max', String(max))
+    slider.setAttribute('step', String(step))
+    slider.setAttribute('value', String(value))
+    slider.addEventListener('input', (event) => {
+      callback(event, (event.target as HTMLInputElement).value)
+    })
+    slider_container.appendChild(slider_title)
+    slider_container.appendChild(slider)
+
+    return { container: slider_container, slider: slider }
+  }
+
+  private createToggle(
+    title: string,
+    callback: (event: Event, value: boolean) => void
+  ) {
+    var outer_Container = this.createContainer(false)
+    var toggle_title = this.createContainerTitle(title)
+
+    var toggle_container = document.createElement('label')
+    toggle_container.classList.add('maskEditor_sidePanelToggleContainer')
+
+    var toggle_checkbox = document.createElement('input')
+    toggle_checkbox.setAttribute('type', 'checkbox')
+    toggle_checkbox.classList.add('maskEditor_sidePanelToggleCheckbox')
+    toggle_checkbox.addEventListener('change', (event) => {
+      callback(event, (event.target as HTMLInputElement).checked)
+    })
+
+    var toggleAccentColor = this.darkMode
+      ? 'maskEditor_toggle_bg_dark'
+      : 'maskEditor_toggle_bg_light'
+
+    var toggle_switch = document.createElement('div')
+    toggle_switch.classList.add('maskEditor_sidePanelToggleSwitch')
+    toggle_switch.classList.add(toggleAccentColor)
+
+    toggle_container.appendChild(toggle_checkbox)
+    toggle_container.appendChild(toggle_switch)
+
+    outer_Container.appendChild(toggle_title)
+    outer_Container.appendChild(toggle_container)
+
+    return outer_Container
+  }
+
+  private createDropdown(
+    title: string,
+    options: string[],
+    callback: (event: Event, value: string) => void
+  ) {
+    const sidePanelDropdownAccent = this.darkMode
+      ? 'maskEditor_sidePanelDropdown_dark'
+      : 'maskEditor_sidePanelDropdown_light'
+    var dropdown_container = this.createContainer(false)
+    var dropdown_title = this.createContainerTitle(title)
+
+    var dropdown = document.createElement('select')
+    dropdown.classList.add(sidePanelDropdownAccent)
+    dropdown.classList.add('maskEditor_containerDropdown')
+
+    options.forEach((option) => {
+      var option_element = document.createElement('option')
+      option_element.value = option
+      option_element.innerText = option
+      dropdown.appendChild(option_element)
+    })
+
+    dropdown.addEventListener('change', (event) => {
+      callback(event, (event.target as HTMLSelectElement).value)
+    })
+
+    dropdown_container.appendChild(dropdown_title)
+    dropdown_container.appendChild(dropdown)
+
+    return dropdown_container
+  }
+
+  private createSeparator() {
+    var separator = document.createElement('div')
+    separator.classList.add('maskEditor_sidePanelSeparator')
+
+    return separator
+  }
+
+  //----------------
+
+  private async createTopBar() {
+    const buttonAccentColor = this.darkMode
+      ? 'maskEditor_topPanelButton_dark'
+      : 'maskEditor_topPanelButton_light'
+
+    const iconButtonAccentColor = this.darkMode
+      ? 'maskEditor_topPanelIconButton_dark'
+      : 'maskEditor_topPanelIconButton_light'
+
+    var top_bar = document.createElement('div')
+    top_bar.id = 'maskEditor_topBar'
+
+    var top_bar_title_container = document.createElement('div')
+    top_bar_title_container.id = 'maskEditor_topBarTitleContainer'
+
+    var top_bar_title = document.createElement('h1')
+    top_bar_title.id = 'maskEditor_topBarTitle'
+    top_bar_title.innerText = 'ComfyUI'
+
+    top_bar_title_container.appendChild(top_bar_title)
+
+    var top_bar_shortcuts_container = document.createElement('div')
+    top_bar_shortcuts_container.id = 'maskEditor_topBarShortcutsContainer'
+
+    var top_bar_undo_button = document.createElement('div')
+    top_bar_undo_button.id = 'maskEditor_topBarUndoButton'
+    top_bar_undo_button.classList.add(iconButtonAccentColor)
+    top_bar_undo_button.innerHTML =
+      '<svg viewBox="0 0 15 15"><path d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"></path> </svg>'
+
+    top_bar_undo_button.addEventListener('click', () => {
+      this.messageBroker.publish('undo')
+    })
+
+    var top_bar_redo_button = document.createElement('div')
+    top_bar_redo_button.id = 'maskEditor_topBarRedoButton'
+    top_bar_redo_button.classList.add(iconButtonAccentColor)
+    top_bar_redo_button.innerHTML =
+      '<svg viewBox="0 0 15 15"> <path class="cls-1" d="M6.23,12.18c-1.97,0-3.58-1.61-3.58-3.58,0-2.11,1.71-3.58,4.17-3.58h3.98l-1.43-1.43c-.18-.18-.18-.47,0-.64.18-.18.46-.18.64,0l2.21,2.21c.09.09.13.2.13.32s-.05.24-.13.32l-2.21,2.21c-.18.18-.47.18-.64,0-.18-.18-.18-.47,0-.64l1.43-1.43h-3.98c-1.92,0-3.26,1.1-3.26,2.67,0,1.47,1.2,2.67,2.67,2.67.25,0,.46.2.46.46s-.2.46-.46.46Z"/></svg>'
+
+    top_bar_redo_button.addEventListener('click', () => {
+      this.messageBroker.publish('redo')
+    })
+
+    var top_bar_invert_button = document.createElement('button')
+    top_bar_invert_button.id = 'maskEditor_topBarInvertButton'
+    top_bar_invert_button.classList.add(buttonAccentColor)
+    top_bar_invert_button.innerText = t('maskEditor.Invert')
+    top_bar_invert_button.addEventListener('click', () => {
+      this.messageBroker.publish('invert')
+    })
+
+    var top_bar_clear_button = document.createElement('button')
+    top_bar_clear_button.id = 'maskEditor_topBarClearButton'
+    top_bar_clear_button.classList.add(buttonAccentColor)
+    top_bar_clear_button.innerText = t('maskEditor.Clear')
+
+    top_bar_clear_button.addEventListener('click', () => {
+      this.maskCtx.clearRect(
+        0,
+        0,
+        this.maskCanvas.width,
+        this.maskCanvas.height
+      )
+      this.rgbCtx.clearRect(0, 0, this.rgbCanvas.width, this.rgbCanvas.height)
+      this.messageBroker.publish('saveState')
+    })
+
+    var top_bar_save_button = document.createElement('button')
+    top_bar_save_button.id = 'maskEditor_topBarSaveButton'
+    top_bar_save_button.classList.add(buttonAccentColor)
+    top_bar_save_button.innerText = t('g.save')
+    this.saveButton = top_bar_save_button
+
+    top_bar_save_button.addEventListener('click', () => {
+      this.maskEditor.save()
+    })
+
+    var top_bar_cancel_button = document.createElement('button')
+    top_bar_cancel_button.id = 'maskEditor_topBarCancelButton'
+    top_bar_cancel_button.classList.add(buttonAccentColor)
+    top_bar_cancel_button.innerText = t('g.cancel')
+
+    top_bar_cancel_button.addEventListener('click', () => {
+      this.maskEditor.destroy()
+    })
+
+    top_bar_shortcuts_container.appendChild(top_bar_undo_button)
+    top_bar_shortcuts_container.appendChild(top_bar_redo_button)
+    top_bar_shortcuts_container.appendChild(top_bar_invert_button)
+    top_bar_shortcuts_container.appendChild(top_bar_clear_button)
+    top_bar_shortcuts_container.appendChild(top_bar_save_button)
+    top_bar_shortcuts_container.appendChild(top_bar_cancel_button)
+
+    top_bar.appendChild(top_bar_title_container)
+    top_bar.appendChild(top_bar_shortcuts_container)
+
+    return top_bar
+  }
+
+  toolElements: HTMLElement[] = []
+  toolSettings: Record<Tools, ToolInternalSettings> = {
+    [Tools.MaskPen]: {
+      container: document.createElement('div'),
+      newActiveLayerOnSet: 'mask'
+    },
+    [Tools.Eraser]: {
+      container: document.createElement('div')
+    },
+    [Tools.PaintPen]: {
+      container: document.createElement('div'),
+      newActiveLayerOnSet: 'rgb'
+    },
+    [Tools.MaskBucket]: {
+      container: document.createElement('div'),
+      cursor: "url('/cursor/paintBucket.png') 30 25, auto",
+      newActiveLayerOnSet: 'mask'
+    },
+    [Tools.MaskColorFill]: {
+      container: document.createElement('div'),
+      cursor: "url('/cursor/colorSelect.png') 15 25, auto",
+      newActiveLayerOnSet: 'mask'
+    }
+  }
+
+  setToolTo(tool: Tools) {
+    this.messageBroker.publish('setTool', tool)
+    for (let toolElement of this.toolElements) {
+      if (toolElement != this.toolSettings[tool].container) {
+        toolElement.classList.remove('maskEditor_toolPanelContainerSelected')
+      } else {
+        toolElement.classList.add('maskEditor_toolPanelContainerSelected')
+        this.brushSettingsHTML.style.display = 'flex'
+        this.colorSelectSettingsHTML.style.display = 'none'
+        this.paintBucketSettingsHTML.style.display = 'none'
+      }
+    }
+    if (tool === Tools.MaskColorFill) {
+      this.brushSettingsHTML.style.display = 'none'
+      this.colorSelectSettingsHTML.style.display = 'flex'
+      this.paintBucketSettingsHTML.style.display = 'none'
+    } else if (tool === Tools.MaskBucket) {
+      this.brushSettingsHTML.style.display = 'none'
+      this.colorSelectSettingsHTML.style.display = 'none'
+      this.paintBucketSettingsHTML.style.display = 'flex'
+    } else {
+      this.brushSettingsHTML.style.display = 'flex'
+      this.colorSelectSettingsHTML.style.display = 'none'
+      this.paintBucketSettingsHTML.style.display = 'none'
+    }
+    this.messageBroker.publish('setTool', tool)
+    this.onToolChange()
+    const newActiveLayer = this.toolSettings[tool].newActiveLayerOnSet
+    if (newActiveLayer) {
+      this.setActiveLayer(newActiveLayer)
+    }
+    const cursor = this.toolSettings[tool].cursor
+    this.pointerZone.style.cursor = cursor ?? 'none'
+    if (cursor) {
+      this.brush.style.opacity = '0'
+    }
+  }
+
+  private createToolPanel() {
+    var tool_panel = document.createElement('div')
+    tool_panel.id = 'maskEditor_toolPanel'
+    this.toolPanel = tool_panel
+    var toolPanelHoverAccent = this.darkMode
+      ? 'maskEditor_toolPanelContainerDark'
+      : 'maskEditor_toolPanelContainerLight'
+
+    this.toolElements = []
+    // mask pen tool
+    const setupToolContainer = (tool: Tools) => {
+      this.toolSettings[tool].container = document.createElement('div')
+      this.toolSettings[tool].container.classList.add(
+        'maskEditor_toolPanelContainer'
+      )
+      if (tool == Tools.MaskPen)
+        this.toolSettings[tool].container.classList.add(
+          'maskEditor_toolPanelContainerSelected'
+        )
+      this.toolSettings[tool].container.classList.add(toolPanelHoverAccent)
+      this.toolSettings[tool].container.innerHTML = iconsHtml[tool]
+      this.toolElements.push(this.toolSettings[tool].container)
+      this.toolSettings[tool].container.addEventListener('click', () => {
+        this.setToolTo(tool)
+      })
+      const activeIndicator = document.createElement('div')
+      activeIndicator.classList.add('maskEditor_toolPanelIndicator')
+      this.toolSettings[tool].container.appendChild(activeIndicator)
+      tool_panel.appendChild(this.toolSettings[tool].container)
+    }
+    allTools.forEach(setupToolContainer)
+
+    const setupZoomIndicatorContainer = () => {
+      var toolPanel_zoomIndicator = document.createElement('div')
+      toolPanel_zoomIndicator.classList.add('maskEditor_toolPanelZoomIndicator')
+      toolPanel_zoomIndicator.classList.add(toolPanelHoverAccent)
+
+      var toolPanel_zoomText = document.createElement('span')
+      toolPanel_zoomText.id = 'maskEditor_toolPanelZoomText'
+      toolPanel_zoomText.innerText = '100%'
+      this.zoomTextHTML = toolPanel_zoomText
+
+      var toolPanel_DimensionsText = document.createElement('span')
+      toolPanel_DimensionsText.id = 'maskEditor_toolPanelDimensionsText'
+      toolPanel_DimensionsText.innerText = ' '
+      this.dimensionsTextHTML = toolPanel_DimensionsText
+
+      toolPanel_zoomIndicator.appendChild(toolPanel_zoomText)
+      toolPanel_zoomIndicator.appendChild(toolPanel_DimensionsText)
+
+      toolPanel_zoomIndicator.addEventListener('click', () => {
+        this.messageBroker.publish('resetZoom')
+      })
+      tool_panel.appendChild(toolPanel_zoomIndicator)
+    }
+    setupZoomIndicatorContainer()
+
+    return tool_panel
+  }
+
+  private createPointerZone() {
+    const pointer_zone = document.createElement('div')
+    pointer_zone.id = 'maskEditor_pointerZone'
+
+    this.pointerZone = pointer_zone
+
+    pointer_zone.addEventListener('pointerdown', (event: PointerEvent) => {
+      this.messageBroker.publish('pointerDown', event)
+    })
+
+    pointer_zone.addEventListener('pointermove', (event: PointerEvent) => {
+      this.messageBroker.publish('pointerMove', event)
+    })
+
+    pointer_zone.addEventListener('pointerup', (event: PointerEvent) => {
+      this.messageBroker.publish('pointerUp', event)
+    })
+
+    pointer_zone.addEventListener('pointerleave', () => {
+      this.brush.style.opacity = '0'
+      this.pointerZone.style.cursor = ''
+    })
+
+    pointer_zone.addEventListener('touchstart', (event: TouchEvent) => {
+      this.messageBroker.publish('handleTouchStart', event)
+    })
+
+    pointer_zone.addEventListener('touchmove', (event: TouchEvent) => {
+      this.messageBroker.publish('handleTouchMove', event)
+    })
+
+    pointer_zone.addEventListener('touchend', (event: TouchEvent) => {
+      this.messageBroker.publish('handleTouchEnd', event)
+    })
+
+    pointer_zone.addEventListener('wheel', (event) =>
+      this.messageBroker.publish('wheel', event)
+    )
+
+    pointer_zone.addEventListener('pointerenter', async () => {
+      this.updateCursor()
+    })
+
+    return pointer_zone
+  }
+
+  async screenToCanvas(clientPoint: Point): Promise<Point> {
+    // Get the zoom ratio
+    const zoomRatio = await this.messageBroker.pull('zoomRatio')
+
+    // Get the bounding rectangles for both canvases
+    const maskCanvasRect = this.maskCanvas.getBoundingClientRect()
+    const rgbCanvasRect = this.rgbCanvas.getBoundingClientRect()
+
+    // Check which canvas is currently being used for drawing
+    const currentTool = await this.messageBroker.pull('currentTool')
+    const isUsingRGBCanvas = currentTool === Tools.PaintPen
+
+    // Use the appropriate canvas rect based on the current tool
+    const canvasRect = isUsingRGBCanvas ? rgbCanvasRect : maskCanvasRect
+
+    // Calculate the offset between pointer zone and canvas
+    const offsetX = clientPoint.x - canvasRect.left + this.toolPanel.clientWidth
+    const offsetY = clientPoint.y - canvasRect.top + 44 // 44 is the height of the top menu
+
+    // Adjust for zoom ratio
+    const x = offsetX / zoomRatio
+    const y = offsetY / zoomRatio
+
+    return { x: x, y: y }
+  }
+
+  private setEventHandler() {
+    this.maskCanvas.addEventListener('contextmenu', (event: Event) => {
+      event.preventDefault()
+    })
+
+    this.rgbCanvas.addEventListener('contextmenu', (event: Event) => {
+      event.preventDefault()
+    })
+
+    this.rootElement.addEventListener('contextmenu', (event: Event) => {
+      event.preventDefault()
+    })
+
+    this.rootElement.addEventListener('dragstart', (event) => {
+      if (event.ctrlKey) {
+        event.preventDefault()
+      }
+    })
+  }
+
+  private async createBrush() {
+    var brush = document.createElement('div')
+    await this.messageBroker.pull('brushSettings')
+    brush.id = 'maskEditor_brush'
+
+    var brush_preview_gradient = document.createElement('div')
+    brush_preview_gradient.id = 'maskEditor_brushPreviewGradient'
+
+    brush.appendChild(brush_preview_gradient)
+
+    this.brush = brush
+    this.brushPreviewGradient = brush_preview_gradient
+
+    return brush
+  }
+
+  async setImages(imgCanvas: HTMLCanvasElement) {
+    const imgCtx = imgCanvas.getContext('2d', { willReadFrequently: true })
+    const maskCtx = this.maskCtx
+    const maskCanvas = this.maskCanvas
+
+    const rgbCanvas = this.rgbCanvas
+
+    imgCtx!.clearRect(0, 0, this.imgCanvas.width, this.imgCanvas.height)
+    maskCtx.clearRect(0, 0, this.maskCanvas.width, this.maskCanvas.height)
+
+    const mainImageUrl =
+      ComfyApp.clipspace?.imgs?.[ComfyApp.clipspace?.selectedIndex ?? 0]?.src
+
+    // original image load
+    if (!mainImageUrl) {
+      throw new Error(
+        'Unable to access image source - clipspace or image is null'
+      )
+    }
+
+    const mainImageFilename =
+      new URL(mainImageUrl).searchParams.get('filename') ?? undefined
+
+    let combinedImageFilename: string | null | undefined
+    if (
+      ComfyApp.clipspace?.combinedIndex !== undefined &&
+      ComfyApp.clipspace?.imgs &&
+      ComfyApp.clipspace.combinedIndex < ComfyApp.clipspace.imgs.length &&
+      ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex]?.src
+    ) {
+      combinedImageFilename = new URL(
+        ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src
+      ).searchParams.get('filename')
+    } else {
+      combinedImageFilename = undefined
+    }
+
+    const imageLayerFilenames =
+      mainImageFilename !== undefined
+        ? imageLayerFilenamesIfApplicable(
+            combinedImageFilename ?? mainImageFilename
+          )
+        : undefined
+
+    const inputUrls = {
+      baseImagePlusMask: imageLayerFilenames?.maskedImage
+        ? mkFileUrl({ ref: toRef(imageLayerFilenames.maskedImage) })
+        : mainImageUrl,
+      paintLayer: imageLayerFilenames?.paint
+        ? mkFileUrl({ ref: toRef(imageLayerFilenames.paint) })
+        : undefined
+    }
+
+    const alpha_url = new URL(inputUrls.baseImagePlusMask)
+    alpha_url.searchParams.delete('channel')
+    alpha_url.searchParams.delete('preview')
+    alpha_url.searchParams.set('channel', 'a')
+    let mask_image: HTMLImageElement = await this.loadImage(alpha_url)
+
+    const rgb_url = new URL(inputUrls.baseImagePlusMask)
+    this.imageURL = rgb_url
+    rgb_url.searchParams.delete('channel')
+    rgb_url.searchParams.set('channel', 'rgb')
+    this.image = new Image()
+
+    this.image = await new Promise<HTMLImageElement>((resolve, reject) => {
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      img.onload = () => resolve(img)
+      img.onerror = reject
+      img.src = rgb_url.toString()
+    })
+
+    if (inputUrls.paintLayer) {
+      const paintURL = new URL(inputUrls.paintLayer)
+      this.paint_image = new Image()
+      this.paint_image = await new Promise<HTMLImageElement>(
+        (resolve, reject) => {
+          const img = new Image()
+          img.crossOrigin = 'anonymous'
+          img.onload = () => resolve(img)
+          img.onerror = reject
+          img.src = paintURL.toString()
+        }
+      )
+    }
+
+    maskCanvas.width = this.image.width
+    maskCanvas.height = this.image.height
+
+    rgbCanvas.width = this.image.width
+    rgbCanvas.height = this.image.height
+
+    this.dimensionsTextHTML.innerText = `${this.image.width}x${this.image.height}`
+
+    await this.invalidateCanvas(this.image, mask_image, this.paint_image)
+    this.messageBroker.publish('initZoomPan', [this.image, this.rootElement])
+  }
+
+  async invalidateCanvas(
+    orig_image: HTMLImageElement,
+    mask_image: HTMLImageElement,
+    paint_image: HTMLImageElement
+  ) {
+    this.imgCanvas.width = orig_image.width
+    this.imgCanvas.height = orig_image.height
+
+    this.maskCanvas.width = orig_image.width
+    this.maskCanvas.height = orig_image.height
+
+    this.rgbCanvas.width = orig_image.width
+    this.rgbCanvas.height = orig_image.height
+
+    let imgCtx = this.imgCanvas.getContext('2d', { willReadFrequently: true })
+    let maskCtx = this.maskCanvas.getContext('2d', {
+      willReadFrequently: true
+    })
+    let rgbCtx = this.rgbCanvas.getContext('2d', {
+      willReadFrequently: true
+    })
+
+    imgCtx!.drawImage(orig_image, 0, 0, orig_image.width, orig_image.height)
+    if (paint_image) {
+      rgbCtx!.drawImage(
+        paint_image,
+        0,
+        0,
+        paint_image.width,
+        paint_image.height
+      )
+    }
+    await this.prepare_mask(
+      mask_image,
+      this.maskCanvas,
+      maskCtx!,
+      await this.getMaskColor()
+    )
+  }
+
+  private async prepare_mask(
+    image: HTMLImageElement,
+    maskCanvas: HTMLCanvasElement,
+    maskCtx: CanvasRenderingContext2D,
+    maskColor: { r: number; g: number; b: number }
+  ) {
+    // paste mask data into alpha channel
+    maskCtx.drawImage(image, 0, 0, maskCanvas.width, maskCanvas.height)
+    const maskData = maskCtx.getImageData(
+      0,
+      0,
+      maskCanvas.width,
+      maskCanvas.height
+    )
+
+    // invert mask
+    for (let i = 0; i < maskData.data.length; i += 4) {
+      const alpha = maskData.data[i + 3]
+      maskData.data[i] = maskColor.r
+      maskData.data[i + 1] = maskColor.g
+      maskData.data[i + 2] = maskColor.b
+      maskData.data[i + 3] = 255 - alpha
+    }
+
+    maskCtx.globalCompositeOperation = 'source-over'
+    maskCtx.putImageData(maskData, 0, 0)
+  }
+
+  private async updateMaskColor() {
+    // update mask canvas css styles
+    const maskCanvasStyle = this.getMaskCanvasStyle()
+    this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode
+    this.maskCanvas.style.opacity = maskCanvasStyle.opacity.toString()
+
+    // update mask canvas rgb colors
+    const maskColor = await this.getMaskColor()
+    this.maskCtx.fillStyle = `rgb(${maskColor.r}, ${maskColor.g}, ${maskColor.b})`
+
+    //set canvas background color
+    this.setCanvasBackground()
+
+    const maskData = this.maskCtx.getImageData(
+      0,
+      0,
+      this.maskCanvas.width,
+      this.maskCanvas.height
+    )
+    for (let i = 0; i < maskData.data.length; i += 4) {
+      maskData.data[i] = maskColor.r
+      maskData.data[i + 1] = maskColor.g
+      maskData.data[i + 2] = maskColor.b
+    }
+    this.maskCtx.putImageData(maskData, 0, 0)
+  }
+
+  getMaskCanvasStyle() {
+    if (this.maskBlendMode === MaskBlendMode.Negative) {
+      return {
+        mixBlendMode: 'difference',
+        opacity: '1'
+      }
+    } else {
+      return {
+        mixBlendMode: 'initial',
+        opacity: this.mask_opacity
+      }
+    }
+  }
+
+  private detectLightMode() {
+    this.darkMode = document.body.classList.contains('dark-theme')
+  }
+
+  private loadImage(imagePath: URL): Promise<HTMLImageElement> {
+    return new Promise((resolve, reject) => {
+      const image = new Image() as HTMLImageElement
+      image.crossOrigin = 'anonymous'
+      image.onload = function () {
+        resolve(image)
+      }
+      image.onerror = function (error) {
+        reject(error)
+      }
+      image.src = imagePath.href
+    })
+  }
+
+  async updateBrushPreview() {
+    const cursorPoint = await this.messageBroker.pull('cursorPoint')
+    const pan_offset = await this.messageBroker.pull('panOffset')
+    const brushSettings = await this.messageBroker.pull('brushSettings')
+    const zoom_ratio = await this.messageBroker.pull('zoomRatio')
+    const centerX = cursorPoint.x + pan_offset.x
+    const centerY = cursorPoint.y + pan_offset.y
+    const brush = this.brush
+    const hardness = brushSettings.hardness
+
+    // Now that brush size is constant, preview is simple
+    const brushRadius = brushSettings.size * zoom_ratio
+    const previewSize = brushRadius * 2
+
+    this.brushSizeSlider.value = String(brushSettings.size)
+    this.brushHardnessSlider.value = String(hardness)
+
+    brush.style.width = previewSize + 'px'
+    brush.style.height = previewSize + 'px'
+    brush.style.left = centerX - brushRadius + 'px'
+    brush.style.top = centerY - brushRadius + 'px'
+
+    if (hardness === 1) {
+      this.brushPreviewGradient.style.background = 'rgba(255, 0, 0, 0.5)'
+      return
+    }
+
+    // Simplified gradient - hardness controls where the fade starts
+    const midStop = hardness * 100
+    const outerStop = 100
+
+    this.brushPreviewGradient.style.background = `
+      radial-gradient(
+        circle,
+        rgba(255, 0, 0, 0.5) 0%,
+        rgba(255, 0, 0, 0.25) ${midStop}%,
+        rgba(255, 0, 0, 0) ${outerStop}%
+      )
+    `
+  }
+
+  getMaskBlendMode() {
+    return this.maskBlendMode
+  }
+
+  setSidebarImage() {
+    this.sidebarImage.src = this.imageURL.href
+  }
+
+  async getMaskColor() {
+    if (this.maskBlendMode === MaskBlendMode.Black) {
+      return { r: 0, g: 0, b: 0 }
+    }
+    if (this.maskBlendMode === MaskBlendMode.White) {
+      return { r: 255, g: 255, b: 255 }
+    }
+    if (this.maskBlendMode === MaskBlendMode.Negative) {
+      // negative effect only works with white color
+      return { r: 255, g: 255, b: 255 }
+    }
+
+    return { r: 0, g: 0, b: 0 }
+  }
+
+  async getMaskFillStyle() {
+    const maskColor = await this.getMaskColor()
+
+    return 'rgb(' + maskColor.r + ',' + maskColor.g + ',' + maskColor.b + ')'
+  }
+
+  async setCanvasBackground() {
+    if (this.maskBlendMode === MaskBlendMode.White) {
+      this.canvasBackground.style.background = 'black'
+    } else {
+      this.canvasBackground.style.background = 'white'
+    }
+  }
+
+  getMaskCanvas() {
+    return this.maskCanvas
+  }
+
+  getImgCanvas() {
+    return this.imgCanvas
+  }
+
+  getRgbCanvas() {
+    return this.rgbCanvas
+  }
+
+  getImage() {
+    return this.image
+  }
+
+  setBrushOpacity(opacity: number) {
+    this.brush.style.opacity = String(opacity)
+  }
+
+  setSaveButtonEnabled(enabled: boolean) {
+    this.saveButton.disabled = !enabled
+  }
+
+  setSaveButtonText(text: string) {
+    this.saveButton.innerText = text
+  }
+
+  handlePaintBucketCursor(isPaintBucket: boolean) {
+    if (isPaintBucket) {
+      this.pointerZone.style.cursor =
+        "url('/cursor/paintBucket.png') 30 25, auto"
+    } else {
+      this.pointerZone.style.cursor = 'none'
+    }
+  }
+
+  handlePanCursor(isPanning: boolean) {
+    if (isPanning) {
+      this.pointerZone.style.cursor = 'grabbing'
+    } else {
+      this.pointerZone.style.cursor = 'none'
+    }
+  }
+
+  setBrushVisibility(visible: boolean) {
+    this.brush.style.opacity = visible ? '1' : '0'
+  }
+
+  setBrushPreviewGradientVisibility(visible: boolean) {
+    this.brushPreviewGradient.style.display = visible ? 'block' : 'none'
+  }
+
+  async updateCursor() {
+    const currentTool = await this.messageBroker.pull('currentTool')
+    if (currentTool === Tools.MaskBucket) {
+      this.pointerZone.style.cursor =
+        "url('/cursor/paintBucket.png') 30 25, auto"
+      this.setBrushOpacity(0)
+    } else if (currentTool === Tools.MaskColorFill) {
+      this.pointerZone.style.cursor =
+        "url('/cursor/colorSelect.png') 15 25, auto"
+      this.setBrushOpacity(0)
+    } else {
+      this.pointerZone.style.cursor = 'none'
+      this.setBrushOpacity(1)
+    }
+
+    this.updateBrushPreview()
+    this.setBrushPreviewGradientVisibility(false)
+  }
+
+  setZoomText(zoomText: string) {
+    this.zoomTextHTML.innerText = zoomText
+  }
+
+  setDimensionsText(dimensionsText: string) {
+    this.dimensionsTextHTML.innerText = dimensionsText
+  }
+}
diff --git a/src/extensions/core/maskeditor/managers/index.ts b/src/extensions/core/maskeditor/managers/index.ts
new file mode 100644
index 000000000..dc04c0bb0
--- /dev/null
+++ b/src/extensions/core/maskeditor/managers/index.ts
@@ -0,0 +1,5 @@
+export { UIManager } from './UIManager'
+export { ToolManager } from './ToolManager'
+export { PanAndZoomManager } from './PanAndZoomManager'
+export { KeyboardManager } from './KeyboardManager'
+export { MessageBroker } from './MessageBroker'
diff --git a/src/extensions/core/maskeditor/styles.ts b/src/extensions/core/maskeditor/styles.ts
new file mode 100644
index 000000000..b212280ea
--- /dev/null
+++ b/src/extensions/core/maskeditor/styles.ts
@@ -0,0 +1,738 @@
+const styles = `
+  #maskEditorContainer {
+    display: fixed;
+  }
+  #maskEditor_brush {
+    position: absolute;
+    backgroundColor: transparent;
+    z-index: 8889;
+    pointer-events: none;
+    border-radius: 50%;
+    overflow: visible;
+    outline: 1px dashed black;
+    box-shadow: 0 0 0 1px white;
+  }
+  #maskEditor_brushPreviewGradient {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    display: none;
+  }
+  #maskEditor {
+    display: block;
+    width: 100%;
+    height: 100vh;
+    left: 0;
+    z-index: 8888;
+    position: fixed;
+    background: rgba(50,50,50,0.75);
+    backdrop-filter: blur(10px);
+    overflow: hidden;
+    user-select: none;
+    --mask-editor-top-bar-height: 44px;
+  }
+  #maskEditor_sidePanelContainer {
+    height: 100%;
+    width: 220px;
+    z-index: 8888;
+    display: flex;
+    flex-direction: column;
+  }
+  #maskEditor_sidePanel {
+    background: var(--comfy-menu-bg);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    overflow-y: auto;
+    width: 220px;
+    padding: 0 10px;
+  }
+  #maskEditor_sidePanelContent {
+    width: 100%;
+  }
+  #maskEditor_sidePanelShortcuts {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin-top: 10px;
+    gap: 10px;
+    justify-content: center;
+  }
+  .maskEditor_sidePanelIconButton {
+    width: 40px;
+    height: 40px;
+    pointer-events: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.1s;
+  }
+  .maskEditor_sidePanelIconButton:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+  #maskEditor_sidePanelBrushSettings {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    padding: 10px;
+  }
+  .maskEditor_sidePanelTitle {
+    text-align: center;
+    font-size: 15px;
+    font-family: sans-serif;
+    color: var(--descrip-text);
+    margin-top: 10px;
+  }
+  #maskEditor_sidePanelBrushShapeContainer {
+    display: flex;
+    width: 180px;
+    height: 50px;
+    border: 1px solid var(--border-color);
+    pointer-events: auto;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  #maskEditor_sidePanelBrushShapeCircle {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    pointer-events: auto;
+    transition: background 0.1s;
+    margin-left: 7.5px;
+  }
+  .maskEditor_sidePanelBrushRange {
+    width: 180px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+  .maskEditor_sidePanelBrushRange::-webkit-slider-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    cursor: grab;
+    margin-top: -8px;
+    background: var(--p-surface-700);
+    border: 1px solid var(--border-color);
+  }
+  .maskEditor_sidePanelBrushRange::-moz-range-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    cursor: grab;
+    background: var(--p-surface-800);
+    border: 1px solid var(--border-color);
+  }
+  .maskEditor_sidePanelBrushRange::-webkit-slider-runnable-track {
+    background: var(--p-surface-700);
+    height: 3px;
+  }
+  .maskEditor_sidePanelBrushRange::-moz-range-track {
+    background: var(--p-surface-700);
+    height: 3px;
+  }
+
+  #maskEditor_sidePanelBrushShapeSquare {
+    width: 35px;
+    height: 35px;
+    margin: 5px;
+    border: 1px solid var(--border-color);
+    pointer-events: auto;
+    transition: background 0.1s;
+  }
+
+  .maskEditor_brushShape_dark {
+    background: transparent;
+  }
+
+  .maskEditor_brushShape_dark:hover {
+    background: var(--p-surface-900);
+  }
+
+  .maskEditor_brushShape_light {
+    background: transparent;
+  }
+
+  .maskEditor_brushShape_light:hover {
+    background: var(--comfy-menu-bg);
+  }
+
+  #maskEditor_sidePanelImageLayerSettings {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    align-items: center;
+  }
+  .maskEditor_sidePanelLayer {
+    display: flex;
+    width: 100%;
+    height: 50px;
+  }
+  .maskEditor_sidePanelLayerVisibilityContainer {
+    width: 50px;
+    height: 50px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .maskEditor_sidePanelVisibilityToggle {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    pointer-events: auto;
+  }
+  .maskEditor_sidePanelLayerIconContainer {
+    width: 60px;
+    height: 50px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    fill: var(--input-text);
+  }
+  .maskEditor_sidePanelLayerIconContainer svg {
+    width: 30px;
+    height: 30px;
+  }
+  #maskEditor_sidePanelMaskLayerBlendingContainer {
+    width: 80px;
+    height: 50px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #maskEditor_sidePanelMaskLayerBlendingSelect {
+    width: 80px;
+    height: 30px;
+    border: 1px solid var(--border-color);
+    background-color: rgba(0, 0, 0, 0.2);
+    color: var(--input-text);
+    font-family: sans-serif;
+    font-size: 15px;
+    pointer-events: auto;
+    transition: background-color border 0.1s;
+  }
+  #maskEditor_sidePanelClearCanvasButton:hover {
+    background-color: var(--p-overlaybadge-outline-color);
+    border: none;
+  }
+  #maskEditor_sidePanelClearCanvasButton {
+    width: 180px;
+    height: 30px;
+    border: none;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--border-color);
+    color: var(--input-text);
+    font-family: sans-serif;
+    font-size: 15px;
+    pointer-events: auto;
+    transition: background-color 0.1s;
+  }
+  #maskEditor_sidePanelClearCanvasButton:hover {
+    background-color: var(--p-overlaybadge-outline-color);
+  }
+  #maskEditor_sidePanelHorizontalButtonContainer {
+    display: flex;
+    gap: 10px;
+    height: 40px;
+  }
+  .maskEditor_sidePanelBigButton {
+    width: 85px;
+    height: 30px;
+    border: none;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--border-color);
+    color: var(--input-text);
+    font-family: sans-serif;
+    font-size: 15px;
+    pointer-events: auto;
+    transition: background-color border 0.1s;
+  }
+  .maskEditor_sidePanelBigButton:hover {
+    background-color: var(--p-overlaybadge-outline-color);
+    border: none;
+  }
+  #maskEditor_toolPanel {
+    height: 100%;
+    width: 4rem;
+    z-index: 8888;
+    background: var(--comfy-menu-bg);
+    display: flex;
+    flex-direction: column;
+  }
+  .maskEditor_toolPanelContainer {
+    width: 4rem;
+    height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    transition: background-color 0.2s;
+  }
+  .maskEditor_toolPanelContainerSelected svg {
+    fill: var(--p-button-text-primary-color) !important;
+  }
+  .maskEditor_toolPanelContainerSelected .maskEditor_toolPanelIndicator {
+    display: block;
+  }
+  .maskEditor_toolPanelContainer svg {
+    width: 75%;
+    aspect-ratio: 1/1;
+    fill: var(--p-button-text-secondary-color);
+  }
+
+  .maskEditor_toolPanelContainerDark:hover {
+    background-color: var(--p-surface-800);
+  }
+
+  .maskEditor_toolPanelContainerLight:hover {
+    background-color: var(--p-surface-300);
+  }
+
+  .maskEditor_toolPanelIndicator {
+    display: none;
+    height: 100%;
+    width: 4px;
+    position: absolute;
+    left: 0;
+    background: var(--p-button-text-primary-color);
+  }
+  #maskEditor_sidePanelPaintBucketSettings {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    padding: 10px;
+  }
+  #canvasBackground {
+    background: white;
+    width: 100%;
+    height: 100%;
+  }
+  #maskEditor_sidePanelButtonsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+  }
+  .maskEditor_sidePanelSeparator {
+    width: 100%;
+    height: 2px;
+    background: var(--border-color);
+    margin-top: 1.5em;
+    margin-bottom: 5px;
+  }
+  #maskEditor_pointerZone {
+    width: calc(100% - 4rem - 220px);
+    height: 100%;
+  }
+  #maskEditor_uiContainer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 8888;
+    display: flex;
+    flex-direction: column;
+  }
+  #maskEditorCanvasContainer {
+    position: absolute;
+    width: 1000px;
+    height: 667px;
+    left: 359px;
+    top: 280px;
+  }
+  #imageCanvas {
+    width: 100%;
+    height: 100%;
+  }
+  #maskCanvas {
+    width: 100%;
+    height: 100%;
+  }
+  #maskEditor_uiHorizontalContainer {
+    width: 100%;
+    height: calc(100% - var(--mask-editor-top-bar-height));
+    display: flex;
+  }
+  #maskEditor_topBar {
+    display: flex;
+    height: var(--mask-editor-top-bar-height);
+    align-items: center;
+    background: var(--comfy-menu-bg);
+    shrink: 0;
+  }
+  #maskEditor_topBarTitle {
+    margin: 0;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+    font-size: 1.2em;
+  }
+  #maskEditor_topBarButtonContainer {
+    display: flex;
+    gap: 10px;
+    margin-right: 0.5rem;
+    position: absolute;
+    right: 0;
+    width: 100%;
+  }
+  #maskEditor_topBarShortcutsContainer {
+    display: flex;
+    gap: 10px;
+    margin-left: 5px;
+  }
+
+  .maskEditor_topPanelIconButton_dark {
+    width: 50px;
+    height: 30px;
+    pointer-events: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.1s;
+    background: var(--p-surface-800);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+  }
+
+  .maskEditor_topPanelIconButton_dark:hover {
+      background-color: var(--p-surface-900);
+  }
+
+  .maskEditor_topPanelIconButton_dark svg {
+    width: 25px;
+    height: 25px;
+    pointer-events: none;
+    fill: var(--input-text);
+  }
+
+  .maskEditor_topPanelIconButton_light {
+    width: 50px;
+    height: 30px;
+    pointer-events: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.1s;
+    background: var(--comfy-menu-bg);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+  }
+
+  .maskEditor_topPanelIconButton_light:hover {
+      background-color: var(--p-surface-300);
+  }
+
+  .maskEditor_topPanelIconButton_light svg {
+    width: 25px;
+    height: 25px;
+    pointer-events: none;
+    fill: var(--input-text);
+  }
+
+  .maskEditor_topPanelButton_dark {
+    height: 30px;
+    background: var(--p-surface-800);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+    color: var(--input-text);
+    font-family: sans-serif;
+    pointer-events: auto;
+    transition: 0.1s;
+    width: 60px;
+  }
+
+  .maskEditor_topPanelButton_dark:hover {
+    background-color: var(--p-surface-900);
+  }
+
+  .maskEditor_topPanelButton_light {
+    height: 30px;
+    background: var(--comfy-menu-bg);
+    border: 1px solid var(--p-form-field-border-color);
+    border-radius: 10px;
+    color: var(--input-text);
+    font-family: sans-serif;
+    pointer-events: auto;
+    transition: 0.1s;
+    width: 60px;
+  }
+
+  .maskEditor_topPanelButton_light:hover {
+    background-color: var(--p-surface-300);
+  }
+
+
+  #maskEditor_sidePanelColorSelectSettings {
+    flex-direction: column;
+  }
+
+  .maskEditor_sidePanel_paintBucket_Container {
+    width: 180px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .maskEditor_sidePanel_colorSelect_Container {
+    display: flex;
+    width: 180px;
+    align-items: center;
+    gap: 5px;
+    height: 30px;
+  }
+
+  #maskEditor_sidePanelVisibilityToggle {
+    position: absolute;
+    right: 0;
+  }
+
+  #maskEditor_sidePanelColorSelectMethodSelect {
+    position: absolute;
+    right: 0;
+    height: 30px;
+    border-radius: 0;
+    border: 1px solid var(--border-color);
+    background: rgba(0,0,0,0.2);
+  }
+
+  #maskEditor_sidePanelVisibilityToggle {
+    position: absolute;
+    right: 0;
+  }
+
+  .maskEditor_sidePanel_colorSelect_tolerance_container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .maskEditor_sidePanelContainerColumn {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  .maskEditor_sidePanelContainerRow {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    min-height: 24px;
+    position: relative;
+  }
+
+  .maskEditor_accent_bg_dark {
+    background: var(--p-surface-800);
+  }
+
+  .maskEditor_accent_bg_very_dark {
+    background: var(--p-surface-900);
+  }
+
+  .maskEditor_accent_bg_light {
+    background: var(--p-surface-300);
+  }
+
+  .maskEditor_accent_bg_very_light {
+    background: var(--comfy-menu-bg);
+  }
+
+  #maskEditor_paintBucketSettings {
+    display: none;
+  }
+
+  #maskEditor_colorSelectSettings {
+    display: none;
+  }
+
+  .maskEditor_sidePanelToggleContainer {
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    right: 0;
+  }
+
+  .maskEditor_toggle_bg_dark {
+    background: var(--p-surface-700);
+  }
+
+  .maskEditor_toggle_bg_light {
+    background: var(--p-surface-300);
+  }
+
+  .maskEditor_sidePanelToggleSwitch {
+    display: inline-block;
+    border-radius: 16px;
+    width: 40px;
+    height: 24px;
+    position: relative;
+    vertical-align: middle;
+    transition: background 0.25s;
+  }
+  .maskEditor_sidePanelToggleSwitch:before, .maskEditor_sidePanelToggleSwitch:after {
+    content: "";
+  }
+  .maskEditor_sidePanelToggleSwitch:before {
+    display: block;
+    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    transition: ease 0.2s;
+  }
+  .maskEditor_sidePanelToggleContainer:hover .maskEditor_sidePanelToggleSwitch:before {
+    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+  }
+  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch {
+    background: var(--p-button-text-primary-color);
+  }
+  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_toggle_bg_dark:before {
+    background: var(--p-surface-900);
+  }
+  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_toggle_bg_light:before {
+    background: var(--comfy-menu-bg);
+  }
+  .maskEditor_sidePanelToggleCheckbox:checked + .maskEditor_sidePanelToggleSwitch:before {
+    left: 20px;
+  }
+
+  .maskEditor_sidePanelToggleCheckbox {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  .maskEditor_sidePanelDropdown_dark {
+    border: 1px solid var(--p-form-field-border-color);
+    background: var(--p-surface-900);
+    height: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 6px;
+    transition: background 0.1s;
+  }
+
+  .maskEditor_sidePanelDropdown_dark option {
+    background: var(--p-surface-900);
+  }
+
+  .maskEditor_sidePanelDropdown_dark:focus {
+    outline: 1px solid var(--p-button-text-primary-color);
+  }
+
+  .maskEditor_sidePanelDropdown_dark option:hover {
+    background: white;
+  }
+  .maskEditor_sidePanelDropdown_dark option:active {
+    background: var(--p-highlight-background);
+  }
+
+  .maskEditor_sidePanelDropdown_light {
+    border: 1px solid var(--p-form-field-border-color);
+    background: var(--comfy-menu-bg);
+    height: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 6px;
+    transition: background 0.1s;
+  }
+
+  .maskEditor_sidePanelDropdown_light option {
+    background: var(--comfy-menu-bg);
+  }
+
+  .maskEditor_sidePanelDropdown_light:focus {
+    outline: 1px solid var(--p-surface-300);
+  }
+
+  .maskEditor_sidePanelDropdown_light option:hover {
+    background: white;
+  }
+  .maskEditor_sidePanelDropdown_light option:active {
+    background: var(--p-surface-300);
+  }
+
+  .maskEditor_layerRow {
+    height: 50px;
+    width: 100%;
+    border-radius: 10px;
+  }
+
+  .maskEditor_sidePanelLayerPreviewContainer {
+    width: 40px;
+    height: 30px;
+  }
+
+  .maskEditor_sidePanelLayerPreviewContainer > svg{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    fill: var(--p-surface-100);
+  }
+
+  #maskEditor_sidePanelImageLayerImage {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .maskEditor_sidePanelSubTitle {
+    text-align: left;
+    font-size: 12px;
+    font-family: sans-serif;
+    color: var(--descrip-text);
+  }
+
+  .maskEditor_containerDropdown {
+    position: absolute;
+    right: 0;
+  }
+
+  .maskEditor_sidePanelLayerCheckbox {
+    margin-left: 15px;
+  }
+
+  .maskEditor_toolPanelZoomIndicator {
+    width: 4rem;
+    height: 4rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    color: var(--p-button-text-secondary-color);
+    position: absolute;
+    bottom: 0;
+    transition: background-color 0.2s;
+  }
+
+  #maskEditor_toolPanelDimensionsText {
+    font-size: 12px;
+  }
+
+  #maskEditor_topBarSaveButton {
+    background: var(--p-primary-color) !important;
+    color: var(--p-button-primary-color) !important;
+  }
+
+  #maskEditor_topBarSaveButton:hover {
+    background: var(--p-primary-hover-color) !important;
+  }
+
+`
+
+// Inject styles into document
+const styleSheet = document.createElement('style')
+styleSheet.type = 'text/css'
+styleSheet.innerText = styles
+document.head.appendChild(styleSheet)
diff --git a/src/extensions/core/maskeditor/tools/BrushTool.ts b/src/extensions/core/maskeditor/tools/BrushTool.ts
new file mode 100644
index 000000000..c2ba8139d
--- /dev/null
+++ b/src/extensions/core/maskeditor/tools/BrushTool.ts
@@ -0,0 +1,779 @@
+import QuickLRU from '@alloc/quick-lru'
+import { hexToRgb, parseToRgb } from '@/utils/colorUtil'
+import { app } from '@/scripts/app'
+import {
+  BrushShape,
+  CompositionOperation,
+  MaskBlendMode,
+  Tools,
+  type Brush,
+  type ImageLayer,
+  type Point
+} from '../types'
+import { loadBrushFromCache, saveBrushToCache } from '../utils/brushCache'
+
+// Forward declaration for MessageBroker type
+interface MessageBroker {
+  subscribe(topic: string, callback: (data?: any) => void): void
+  publish(topic: string, data?: any): void
+  pull<T>(topic: string, data?: any): Promise<T>
+  createPullTopic(topic: string, callback: (data?: any) => Promise<any>): void
+}
+
+// Forward declaration for MaskEditorDialog type
+interface MaskEditorDialog {
+  getMessageBroker(): MessageBroker
+}
+
+class BrushTool {
+  brushSettings: Brush //this saves the current brush settings
+  maskBlendMode: MaskBlendMode
+
+  isDrawing: boolean = false
+  isDrawingLine: boolean = false
+  lineStartPoint: Point | null = null
+  smoothingPrecision: number = 10
+  smoothingCordsArray: Point[] = []
+  smoothingLastDrawTime!: Date
+  maskCtx: CanvasRenderingContext2D | null = null
+  rgbCtx: CanvasRenderingContext2D | null = null
+  initialDraw: boolean = true
+
+  private static brushTextureCache = new QuickLRU<string, HTMLCanvasElement>({
+    maxSize: 8 // Reasonable limit for brush texture variations?
+  })
+
+  brushStrokeCanvas: HTMLCanvasElement | null = null
+  brushStrokeCtx: CanvasRenderingContext2D | null = null
+
+  private static readonly SMOOTHING_MAX_STEPS = 30
+  private static readonly SMOOTHING_MIN_STEPS = 2
+
+  //brush adjustment
+  isBrushAdjusting: boolean = false
+  brushPreviewGradient: HTMLElement | null = null
+  initialPoint: Point | null = null
+  useDominantAxis: boolean = false
+  brushAdjustmentSpeed: number = 1.0
+
+  maskEditor: MaskEditorDialog
+  messageBroker: MessageBroker
+
+  private rgbColor: string = '#FF0000' // Default color
+  private activeLayer: ImageLayer = 'mask'
+
+  constructor(maskEditor: MaskEditorDialog) {
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+    this.createListeners()
+    this.addPullTopics()
+
+    this.useDominantAxis = app.extensionManager.setting.get(
+      'Comfy.MaskEditor.UseDominantAxis'
+    )
+    this.brushAdjustmentSpeed = app.extensionManager.setting.get(
+      'Comfy.MaskEditor.BrushAdjustmentSpeed'
+    )
+
+    const cachedBrushSettings = loadBrushFromCache('maskeditor_brush_settings')
+    if (cachedBrushSettings) {
+      this.brushSettings = cachedBrushSettings
+    } else {
+      this.brushSettings = {
+        type: BrushShape.Arc,
+        size: 10,
+        opacity: 0.7,
+        hardness: 1,
+        smoothingPrecision: 10
+      }
+    }
+
+    this.maskBlendMode = MaskBlendMode.Black
+  }
+
+  private createListeners() {
+    //setters
+    this.messageBroker.subscribe('setBrushSize', (size: number) =>
+      this.setBrushSize(size)
+    )
+    this.messageBroker.subscribe('setBrushOpacity', (opacity: number) =>
+      this.setBrushOpacity(opacity)
+    )
+    this.messageBroker.subscribe('setBrushHardness', (hardness: number) =>
+      this.setBrushHardness(hardness)
+    )
+    this.messageBroker.subscribe('setBrushShape', (type: BrushShape) =>
+      this.setBrushType(type)
+    )
+    this.messageBroker.subscribe(
+      'setActiveLayer',
+      (layer: ImageLayer) => (this.activeLayer = layer)
+    )
+    this.messageBroker.subscribe(
+      'setBrushSmoothingPrecision',
+      (precision: number) => this.setBrushSmoothingPrecision(precision)
+    )
+    this.messageBroker.subscribe('setRGBColor', (color: string) => {
+      this.rgbColor = color
+    })
+    //brush adjustment
+    this.messageBroker.subscribe(
+      'brushAdjustmentStart',
+      (event: PointerEvent) => this.startBrushAdjustment(event)
+    )
+    this.messageBroker.subscribe('brushAdjustment', (event: PointerEvent) =>
+      this.handleBrushAdjustment(event)
+    )
+    //drawing
+    this.messageBroker.subscribe('drawStart', (event: PointerEvent) =>
+      this.startDrawing(event)
+    )
+    this.messageBroker.subscribe('draw', (event: PointerEvent) =>
+      this.handleDrawing(event)
+    )
+    this.messageBroker.subscribe('drawEnd', (event: PointerEvent) =>
+      this.drawEnd(event)
+    )
+  }
+
+  private addPullTopics() {
+    this.messageBroker.createPullTopic(
+      'brushSize',
+      async () => this.brushSettings.size
+    )
+    this.messageBroker.createPullTopic(
+      'brushOpacity',
+      async () => this.brushSettings.opacity
+    )
+    this.messageBroker.createPullTopic(
+      'brushHardness',
+      async () => this.brushSettings.hardness
+    )
+    this.messageBroker.createPullTopic(
+      'brushType',
+      async () => this.brushSettings.type
+    )
+    this.messageBroker.createPullTopic(
+      'brushSmoothingPrecision',
+      async () => this.brushSettings.smoothingPrecision
+    )
+    this.messageBroker.createPullTopic(
+      'maskBlendMode',
+      async () => this.maskBlendMode
+    )
+    this.messageBroker.createPullTopic(
+      'brushSettings',
+      async () => this.brushSettings
+    )
+  }
+
+  private async createBrushStrokeCanvas() {
+    if (this.brushStrokeCanvas !== null) {
+      return
+    }
+
+    const maskCanvas =
+      await this.messageBroker.pull<HTMLCanvasElement>('maskCanvas')
+    const canvas = document.createElement('canvas')
+    canvas.width = maskCanvas.width
+    canvas.height = maskCanvas.height
+
+    this.brushStrokeCanvas = canvas
+    this.brushStrokeCtx = canvas.getContext('2d')!
+  }
+
+  private async startDrawing(event: PointerEvent) {
+    this.isDrawing = true
+    let compositionOp: CompositionOperation
+    let currentTool = await this.messageBroker.pull('currentTool')
+    let coords = { x: event.offsetX, y: event.offsetY }
+    let coords_canvas = await this.messageBroker.pull<Point>(
+      'screenToCanvas',
+      coords
+    )
+    await this.createBrushStrokeCanvas()
+
+    //set drawing mode
+    if (currentTool === Tools.Eraser || event.buttons == 2) {
+      compositionOp = CompositionOperation.DestinationOut //eraser
+    } else {
+      compositionOp = CompositionOperation.SourceOver //pen
+    }
+
+    if (event.shiftKey && this.lineStartPoint) {
+      this.isDrawingLine = true
+      this.drawLine(this.lineStartPoint, coords_canvas, compositionOp)
+    } else {
+      this.isDrawingLine = false
+      this.init_shape(compositionOp)
+      this.draw_shape(coords_canvas)
+    }
+    this.lineStartPoint = coords_canvas
+    this.smoothingCordsArray = [coords_canvas] //used to smooth the drawing line
+    this.smoothingLastDrawTime = new Date()
+  }
+
+  private async handleDrawing(event: PointerEvent) {
+    var diff = performance.now() - this.smoothingLastDrawTime.getTime()
+    let coords = { x: event.offsetX, y: event.offsetY }
+    let coords_canvas = await this.messageBroker.pull<Point>(
+      'screenToCanvas',
+      coords
+    )
+    let currentTool = await this.messageBroker.pull('currentTool')
+
+    if (diff > 20 && !this.isDrawing)
+      requestAnimationFrame(() => {
+        this.init_shape(CompositionOperation.SourceOver)
+        this.draw_shape(coords_canvas)
+        this.smoothingCordsArray.push(coords_canvas)
+      })
+    else
+      requestAnimationFrame(() => {
+        if (currentTool === Tools.Eraser || event.buttons == 2) {
+          this.init_shape(CompositionOperation.DestinationOut)
+        } else {
+          this.init_shape(CompositionOperation.SourceOver)
+        }
+
+        //use drawWithSmoothing for better performance or change step in drawWithBetterSmoothing
+        this.drawWithBetterSmoothing(coords_canvas)
+      })
+
+    this.smoothingLastDrawTime = new Date()
+  }
+
+  private async drawEnd(event: PointerEvent) {
+    const coords = { x: event.offsetX, y: event.offsetY }
+    const coords_canvas = await this.messageBroker.pull<Point>(
+      'screenToCanvas',
+      coords
+    )
+
+    if (this.isDrawing) {
+      this.isDrawing = false
+      this.messageBroker.publish('saveState')
+      this.lineStartPoint = coords_canvas
+      this.initialDraw = true
+    }
+  }
+
+  private clampSmoothingPrecision(value: number): number {
+    return Math.min(Math.max(value, 1), 100)
+  }
+
+  private drawWithBetterSmoothing(point: Point) {
+    // Add current point to the smoothing array
+    if (!this.smoothingCordsArray) {
+      this.smoothingCordsArray = []
+    }
+    const opacityConstant = 1 / (1 + Math.exp(3))
+    const interpolatedOpacity =
+      1 / (1 + Math.exp(-6 * (this.brushSettings.opacity - 0.5))) -
+      opacityConstant
+
+    this.smoothingCordsArray.push(point)
+
+    // Keep a moving window of points for the spline
+    const POINTS_NR = 5
+    if (this.smoothingCordsArray.length < POINTS_NR) {
+      return
+    }
+
+    // Calculate total length more efficiently
+    let totalLength = 0
+    const points = this.smoothingCordsArray
+    const len = points.length - 1
+
+    // Use local variables for better performance
+    let dx, dy
+    for (let i = 0; i < len; i++) {
+      dx = points[i + 1].x - points[i].x
+      dy = points[i + 1].y - points[i].y
+      totalLength += Math.sqrt(dx * dx + dy * dy)
+    }
+
+    const maxSteps = BrushTool.SMOOTHING_MAX_STEPS
+    const minSteps = BrushTool.SMOOTHING_MIN_STEPS
+
+    const smoothing = this.clampSmoothingPrecision(
+      this.brushSettings.smoothingPrecision
+    )
+    const normalizedSmoothing = (smoothing - 1) / 99 // Convert to 0-1 range
+
+    // Optionality to use exponential curve
+    const stepNr = Math.round(
+      Math.round(minSteps + (maxSteps - minSteps) * normalizedSmoothing)
+    )
+
+    // Calculate step distance capped by brush size
+    const distanceBetweenPoints = totalLength / stepNr
+
+    let interpolatedPoints = points
+
+    if (stepNr > 0) {
+      //this calculation needs to be improved
+      interpolatedPoints = this.generateEquidistantPoints(
+        this.smoothingCordsArray,
+        distanceBetweenPoints // Distance between interpolated points
+      )
+    }
+
+    if (!this.initialDraw) {
+      // Remove the first 3 points from the array to avoid drawing the same points twice
+      const spliceIndex = interpolatedPoints.findIndex(
+        (point) =>
+          point.x === this.smoothingCordsArray[2].x &&
+          point.y === this.smoothingCordsArray[2].y
+      )
+
+      if (spliceIndex !== -1) {
+        interpolatedPoints = interpolatedPoints.slice(spliceIndex + 1)
+      }
+    }
+
+    // Draw all interpolated points
+    for (const point of interpolatedPoints) {
+      this.draw_shape(point, interpolatedOpacity)
+    }
+
+    if (!this.initialDraw) {
+      // initially draw on all 5 points, then remove the first 3 points to go into 2 new, 3 old points cycle
+      this.smoothingCordsArray = this.smoothingCordsArray.slice(2)
+    } else {
+      this.initialDraw = false
+    }
+  }
+
+  private async drawLine(
+    p1: Point,
+    p2: Point,
+    compositionOp: CompositionOperation
+  ) {
+    const brush_size = await this.messageBroker.pull<number>('brushSize')
+    const distance = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2)
+    const steps = Math.ceil(
+      distance / ((brush_size / this.brushSettings.smoothingPrecision) * 4)
+    ) // Adjust for smoother lines
+    const interpolatedOpacity =
+      1 / (1 + Math.exp(-6 * (this.brushSettings.opacity - 0.5))) -
+      1 / (1 + Math.exp(3))
+    this.init_shape(compositionOp)
+
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps
+      const x = p1.x + (p2.x - p1.x) * t
+      const y = p1.y + (p2.y - p1.y) * t
+      const point = { x: x, y: y }
+      this.draw_shape(point, interpolatedOpacity)
+    }
+  }
+
+  //brush adjustment
+
+  private async startBrushAdjustment(event: PointerEvent) {
+    event.preventDefault()
+    const coords = { x: event.offsetX, y: event.offsetY }
+    let coords_canvas = await this.messageBroker.pull<Point>(
+      'screenToCanvas',
+      coords
+    )
+    this.messageBroker.publish('setBrushPreviewGradientVisibility', true)
+    this.initialPoint = coords_canvas
+    this.isBrushAdjusting = true
+    return
+  }
+
+  private async handleBrushAdjustment(event: PointerEvent) {
+    const coords = { x: event.offsetX, y: event.offsetY }
+    const brushDeadZone = 5
+    let coords_canvas = await this.messageBroker.pull<Point>(
+      'screenToCanvas',
+      coords
+    )
+
+    const delta_x = coords_canvas.x - this.initialPoint!.x
+    const delta_y = coords_canvas.y - this.initialPoint!.y
+
+    const effectiveDeltaX = Math.abs(delta_x) < brushDeadZone ? 0 : delta_x
+    const effectiveDeltaY = Math.abs(delta_y) < brushDeadZone ? 0 : delta_y
+
+    // New dominant axis logic
+    let finalDeltaX = effectiveDeltaX
+    let finalDeltaY = effectiveDeltaY
+
+    console.log(this.useDominantAxis)
+
+    if (this.useDominantAxis) {
+      // New setting flag
+      const ratio = Math.abs(effectiveDeltaX) / Math.abs(effectiveDeltaY)
+      const threshold = 2.0 // Configurable threshold
+
+      if (ratio > threshold) {
+        finalDeltaY = 0 // X is dominant
+      } else if (ratio < 1 / threshold) {
+        finalDeltaX = 0 // Y is dominant
+      }
+    }
+
+    const cappedDeltaX = Math.max(-100, Math.min(100, finalDeltaX))
+    const cappedDeltaY = Math.max(-100, Math.min(100, finalDeltaY))
+
+    // Rest of the function remains the same
+    const newSize = Math.max(
+      1,
+      Math.min(
+        100,
+        this.brushSettings.size! +
+          (cappedDeltaX / 35) * this.brushAdjustmentSpeed
+      )
+    )
+
+    const newHardness = Math.max(
+      0,
+      Math.min(
+        1,
+        this.brushSettings!.hardness -
+          (cappedDeltaY / 4000) * this.brushAdjustmentSpeed
+      )
+    )
+
+    this.brushSettings.size = newSize
+    this.brushSettings.hardness = newHardness
+
+    this.messageBroker.publish('updateBrushPreview')
+  }
+
+  //helper functions
+
+  private async draw_shape(point: Point, overrideOpacity?: number) {
+    const brushSettings: Brush = this.brushSettings
+    const maskCtx =
+      this.maskCtx ||
+      (await this.messageBroker.pull<CanvasRenderingContext2D>('maskCtx'))
+    const rgbCtx =
+      this.rgbCtx ||
+      (await this.messageBroker.pull<CanvasRenderingContext2D>('rgbCtx'))
+    const brushType = await this.messageBroker.pull('brushType')
+    const maskColor = await this.messageBroker.pull<{
+      r: number
+      g: number
+      b: number
+    }>('getMaskColor')
+    const size = brushSettings.size
+    const brushSettingsSliderOpacity = brushSettings.opacity
+    const opacity =
+      overrideOpacity == undefined
+        ? brushSettingsSliderOpacity
+        : overrideOpacity
+    const hardness = brushSettings.hardness
+    const x = point.x
+    const y = point.y
+
+    const brushRadius = size
+    const isErasing = maskCtx.globalCompositeOperation === 'destination-out'
+    const currentTool = await this.messageBroker.pull('currentTool')
+
+    // Helper function to get or create cached brush texture
+    const getCachedBrushTexture = (
+      radius: number,
+      hardness: number,
+      color: string,
+      opacity: number
+    ): HTMLCanvasElement => {
+      const cacheKey = `${radius}_${hardness}_${color}_${opacity}`
+
+      if (BrushTool.brushTextureCache.has(cacheKey)) {
+        return BrushTool.brushTextureCache.get(cacheKey)!
+      }
+
+      const tempCanvas = document.createElement('canvas')
+      const tempCtx = tempCanvas.getContext('2d')!
+      const size = radius * 2
+      tempCanvas.width = size
+      tempCanvas.height = size
+
+      const centerX = size / 2
+      const centerY = size / 2
+      const hardRadius = radius * hardness
+
+      const imageData = tempCtx.createImageData(size, size)
+      const data = imageData.data
+      const { r, g, b } = parseToRgb(color)
+
+      // Pre-calculate values to avoid repeated computations
+      const fadeRange = radius - hardRadius
+
+      for (let y = 0; y < size; y++) {
+        const dy = y - centerY
+        for (let x = 0; x < size; x++) {
+          const dx = x - centerX
+          const index = (y * size + x) * 4
+
+          // Calculate square distance (Chebyshev distance)
+          const distFromEdge = Math.max(Math.abs(dx), Math.abs(dy))
+
+          let pixelOpacity = 0
+          if (distFromEdge <= hardRadius) {
+            pixelOpacity = opacity
+          } else if (distFromEdge <= radius) {
+            const fadeProgress = (distFromEdge - hardRadius) / fadeRange
+            pixelOpacity = opacity * (1 - fadeProgress)
+          }
+
+          data[index] = r
+          data[index + 1] = g
+          data[index + 2] = b
+          data[index + 3] = pixelOpacity * 255
+        }
+      }
+
+      tempCtx.putImageData(imageData, 0, 0)
+
+      // Cache the texture
+      BrushTool.brushTextureCache.set(cacheKey, tempCanvas)
+
+      return tempCanvas
+    }
+
+    // RGB brush logic
+    if (
+      this.activeLayer === 'rgb' &&
+      (currentTool === Tools.Eraser || currentTool === Tools.PaintPen)
+    ) {
+      const rgbaColor = this.formatRgba(this.rgbColor, opacity)
+
+      if (brushType === BrushShape.Rect && hardness < 1) {
+        const brushTexture = getCachedBrushTexture(
+          brushRadius,
+          hardness,
+          rgbaColor,
+          opacity
+        )
+        rgbCtx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
+        return
+      }
+
+      // For max hardness, use solid fill to avoid anti-aliasing
+      if (hardness === 1) {
+        rgbCtx.fillStyle = rgbaColor
+        rgbCtx.beginPath()
+        if (brushType === BrushShape.Rect) {
+          rgbCtx.rect(
+            x - brushRadius,
+            y - brushRadius,
+            brushRadius * 2,
+            brushRadius * 2
+          )
+        } else {
+          rgbCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
+        }
+        rgbCtx.fill()
+        return
+      }
+
+      // For soft brushes, use gradient
+      let gradient = rgbCtx.createRadialGradient(x, y, 0, x, y, brushRadius)
+      gradient.addColorStop(0, rgbaColor)
+      gradient.addColorStop(
+        hardness,
+        this.formatRgba(this.rgbColor, opacity * 0.5)
+      )
+      gradient.addColorStop(1, this.formatRgba(this.rgbColor, 0))
+
+      rgbCtx.fillStyle = gradient
+      rgbCtx.beginPath()
+      if (brushType === BrushShape.Rect) {
+        rgbCtx.rect(
+          x - brushRadius,
+          y - brushRadius,
+          brushRadius * 2,
+          brushRadius * 2
+        )
+      } else {
+        rgbCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
+      }
+      rgbCtx.fill()
+      return
+    }
+
+    // Mask brush logic
+    if (brushType === BrushShape.Rect && hardness < 1) {
+      const baseColor = isErasing
+        ? `rgba(255, 255, 255, ${opacity})`
+        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
+
+      const brushTexture = getCachedBrushTexture(
+        brushRadius,
+        hardness,
+        baseColor,
+        opacity
+      )
+      maskCtx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
+      return
+    }
+
+    // For max hardness, use solid fill to avoid anti-aliasing
+    if (hardness === 1) {
+      const solidColor = isErasing
+        ? `rgba(255, 255, 255, ${opacity})`
+        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
+
+      maskCtx.fillStyle = solidColor
+      maskCtx.beginPath()
+      if (brushType === BrushShape.Rect) {
+        maskCtx.rect(
+          x - brushRadius,
+          y - brushRadius,
+          brushRadius * 2,
+          brushRadius * 2
+        )
+      } else {
+        maskCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
+      }
+      maskCtx.fill()
+      return
+    }
+
+    // For soft brushes, use gradient
+    let gradient = maskCtx.createRadialGradient(x, y, 0, x, y, brushRadius)
+
+    if (isErasing) {
+      gradient.addColorStop(0, `rgba(255, 255, 255, ${opacity})`)
+      gradient.addColorStop(hardness, `rgba(255, 255, 255, ${opacity * 0.5})`)
+      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`)
+    } else {
+      gradient.addColorStop(
+        0,
+        `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
+      )
+      gradient.addColorStop(
+        hardness,
+        `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity * 0.5})`
+      )
+      gradient.addColorStop(
+        1,
+        `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, 0)`
+      )
+    }
+
+    maskCtx.fillStyle = gradient
+    maskCtx.beginPath()
+    if (brushType === BrushShape.Rect) {
+      maskCtx.rect(
+        x - brushRadius,
+        y - brushRadius,
+        brushRadius * 2,
+        brushRadius * 2
+      )
+    } else {
+      maskCtx.arc(x, y, brushRadius, 0, Math.PI * 2, false)
+    }
+    maskCtx.fill()
+  }
+
+  private formatRgba(hex: string, alpha: number): string {
+    const { r, g, b } = hexToRgb(hex)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+
+  private async init_shape(compositionOperation: CompositionOperation) {
+    const maskBlendMode =
+      await this.messageBroker.pull<MaskBlendMode>('maskBlendMode')
+    const maskCtx =
+      this.maskCtx ||
+      (await this.messageBroker.pull<CanvasRenderingContext2D>('maskCtx'))
+    const rgbCtx =
+      this.rgbCtx ||
+      (await this.messageBroker.pull<CanvasRenderingContext2D>('rgbCtx'))
+
+    maskCtx.beginPath()
+    rgbCtx.beginPath()
+
+    // For both contexts, set the composite operation based on the passed parameter
+    // This ensures right-click always works for erasing
+    if (compositionOperation == CompositionOperation.SourceOver) {
+      maskCtx.fillStyle = maskBlendMode
+      maskCtx.globalCompositeOperation = CompositionOperation.SourceOver
+      rgbCtx.globalCompositeOperation = CompositionOperation.SourceOver
+    } else if (compositionOperation == CompositionOperation.DestinationOut) {
+      maskCtx.globalCompositeOperation = CompositionOperation.DestinationOut
+      rgbCtx.globalCompositeOperation = CompositionOperation.DestinationOut
+    }
+  }
+
+  private generateEquidistantPoints(
+    points: Point[],
+    distance: number
+  ): Point[] {
+    const result: Point[] = []
+    const cumulativeDistances: number[] = [0]
+
+    // Calculate cumulative distances between points
+    for (let i = 1; i < points.length; i++) {
+      const dx = points[i].x - points[i - 1].x
+      const dy = points[i].y - points[i - 1].y
+      const dist = Math.hypot(dx, dy)
+      cumulativeDistances[i] = cumulativeDistances[i - 1] + dist
+    }
+
+    const totalLength = cumulativeDistances[cumulativeDistances.length - 1]
+    const numPoints = Math.floor(totalLength / distance)
+
+    for (let i = 0; i <= numPoints; i++) {
+      const targetDistance = i * distance
+      let idx = 0
+
+      // Find the segment where the target distance falls
+      while (
+        idx < cumulativeDistances.length - 1 &&
+        cumulativeDistances[idx + 1] < targetDistance
+      ) {
+        idx++
+      }
+
+      if (idx >= points.length - 1) {
+        result.push(points[points.length - 1])
+        continue
+      }
+
+      const d0 = cumulativeDistances[idx]
+      const d1 = cumulativeDistances[idx + 1]
+      const t = (targetDistance - d0) / (d1 - d0)
+
+      const x = points[idx].x + t * (points[idx + 1].x - points[idx].x)
+      const y = points[idx].y + t * (points[idx + 1].y - points[idx].y)
+
+      result.push({ x, y })
+    }
+
+    return result
+  }
+
+  private setBrushSize(size: number) {
+    this.brushSettings.size = size
+    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
+  }
+
+  private setBrushOpacity(opacity: number) {
+    this.brushSettings.opacity = opacity
+    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
+  }
+
+  private setBrushHardness(hardness: number) {
+    this.brushSettings.hardness = hardness
+    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
+  }
+
+  private setBrushType(type: BrushShape) {
+    this.brushSettings.type = type
+    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
+  }
+
+  private setBrushSmoothingPrecision(precision: number) {
+    this.brushSettings.smoothingPrecision = precision
+    saveBrushToCache('maskeditor_brush_settings', this.brushSettings)
+  }
+}
+
+export { BrushTool }
diff --git a/src/extensions/core/maskeditor/tools/ColorSelectTool.ts b/src/extensions/core/maskeditor/tools/ColorSelectTool.ts
new file mode 100644
index 000000000..81706cd67
--- /dev/null
+++ b/src/extensions/core/maskeditor/tools/ColorSelectTool.ts
@@ -0,0 +1,464 @@
+import { ColorComparisonMethod, type Point } from '../types'
+
+// Forward declaration for MessageBroker type
+interface MessageBroker {
+  subscribe(topic: string, callback: (data?: any) => void): void
+  publish(topic: string, data?: any): void
+  pull<T>(topic: string, data?: any): Promise<T>
+  createPullTopic(topic: string, callback: (data?: any) => Promise<any>): void
+}
+
+// Forward declaration for MaskEditorDialog type
+interface MaskEditorDialog {
+  getMessageBroker(): MessageBroker
+}
+
+class ColorSelectTool {
+  // @ts-expect-error unused variable
+  private maskEditor!: MaskEditorDialog
+  private messageBroker!: MessageBroker
+  private width: number | null = null
+  private height: number | null = null
+  private canvas!: HTMLCanvasElement
+  private maskCTX!: CanvasRenderingContext2D
+  private imageCTX!: CanvasRenderingContext2D
+  private maskData: Uint8ClampedArray | null = null
+  private imageData: Uint8ClampedArray | null = null
+  private tolerance: number = 20
+  private livePreview: boolean = false
+  private lastPoint: Point | null = null
+  private colorComparisonMethod: ColorComparisonMethod =
+    ColorComparisonMethod.Simple
+  private applyWholeImage: boolean = false
+  private maskBoundry: boolean = false
+  private maskTolerance: number = 0
+  private selectOpacity: number = 255 // Add opacity property (default 100%)
+
+  constructor(maskEditor: MaskEditorDialog) {
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+    this.createListeners()
+    this.addPullTopics()
+  }
+
+  async initColorSelectTool() {
+    await this.pullCanvas()
+  }
+
+  private async pullCanvas() {
+    this.canvas = await this.messageBroker.pull('imgCanvas')
+    this.maskCTX = await this.messageBroker.pull('maskCtx')
+    this.imageCTX = await this.messageBroker.pull('imageCtx')
+  }
+
+  private createListeners() {
+    this.messageBroker.subscribe('colorSelectFill', (point: Point) =>
+      this.fillColorSelection(point)
+    )
+    this.messageBroker.subscribe(
+      'setColorSelectTolerance',
+      (tolerance: number) => this.setTolerance(tolerance)
+    )
+    this.messageBroker.subscribe('setLivePreview', (livePreview: boolean) =>
+      this.setLivePreview(livePreview)
+    )
+    this.messageBroker.subscribe(
+      'setColorComparisonMethod',
+      (method: ColorComparisonMethod) => this.setComparisonMethod(method)
+    )
+
+    this.messageBroker.subscribe('clearLastPoint', () => this.clearLastPoint())
+
+    this.messageBroker.subscribe('setWholeImage', (applyWholeImage: boolean) =>
+      this.setApplyWholeImage(applyWholeImage)
+    )
+
+    this.messageBroker.subscribe('setMaskBoundary', (maskBoundry: boolean) =>
+      this.setMaskBoundary(maskBoundry)
+    )
+
+    this.messageBroker.subscribe('setMaskTolerance', (maskTolerance: number) =>
+      this.setMaskTolerance(maskTolerance)
+    )
+
+    // Add new listener for opacity setting
+    this.messageBroker.subscribe('setSelectionOpacity', (opacity: number) =>
+      this.setSelectOpacity(opacity)
+    )
+  }
+
+  private async addPullTopics() {
+    this.messageBroker.createPullTopic(
+      'getLivePreview',
+      async () => this.livePreview
+    )
+  }
+
+  private getPixel(x: number, y: number): { r: number; g: number; b: number } {
+    const index = (y * this.width! + x) * 4
+    return {
+      r: this.imageData![index],
+      g: this.imageData![index + 1],
+      b: this.imageData![index + 2]
+    }
+  }
+
+  private getMaskAlpha(x: number, y: number): number {
+    return this.maskData![(y * this.width! + x) * 4 + 3]
+  }
+
+  private isPixelInRange(
+    pixel: { r: number; g: number; b: number },
+    target: { r: number; g: number; b: number }
+  ): boolean {
+    switch (this.colorComparisonMethod) {
+      case ColorComparisonMethod.Simple:
+        return this.isPixelInRangeSimple(pixel, target)
+      case ColorComparisonMethod.HSL:
+        return this.isPixelInRangeHSL(pixel, target)
+      case ColorComparisonMethod.LAB:
+        return this.isPixelInRangeLab(pixel, target)
+      default:
+        return this.isPixelInRangeSimple(pixel, target)
+    }
+  }
+
+  private isPixelInRangeSimple(
+    pixel: { r: number; g: number; b: number },
+    target: { r: number; g: number; b: number }
+  ): boolean {
+    //calculate the euclidean distance between the two colors
+    const distance = Math.sqrt(
+      Math.pow(pixel.r - target.r, 2) +
+        Math.pow(pixel.g - target.g, 2) +
+        Math.pow(pixel.b - target.b, 2)
+    )
+    return distance <= this.tolerance
+  }
+
+  private isPixelInRangeHSL(
+    pixel: { r: number; g: number; b: number },
+    target: { r: number; g: number; b: number }
+  ): boolean {
+    // Convert RGB to HSL
+    const pixelHSL = this.rgbToHSL(pixel.r, pixel.g, pixel.b)
+    const targetHSL = this.rgbToHSL(target.r, target.g, target.b)
+
+    // Compare mainly hue and saturation, be more lenient with lightness
+    const hueDiff = Math.abs(pixelHSL.h - targetHSL.h)
+    const satDiff = Math.abs(pixelHSL.s - targetHSL.s)
+    const lightDiff = Math.abs(pixelHSL.l - targetHSL.l)
+
+    const distance = Math.sqrt(
+      Math.pow((hueDiff / 360) * 255, 2) +
+        Math.pow((satDiff / 100) * 255, 2) +
+        Math.pow((lightDiff / 100) * 255, 2)
+    )
+    return distance <= this.tolerance
+  }
+
+  private rgbToHSL(
+    r: number,
+    g: number,
+    b: number
+  ): { h: number; s: number; l: number } {
+    r /= 255
+    g /= 255
+    b /= 255
+
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    let h = 0,
+      s = 0,
+      l = (max + min) / 2
+
+    if (max !== min) {
+      const d = max - min
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0)
+          break
+        case g:
+          h = (b - r) / d + 2
+          break
+        case b:
+          h = (r - g) / d + 4
+          break
+      }
+      h /= 6
+    }
+
+    return {
+      h: h * 360,
+      s: s * 100,
+      l: l * 100
+    }
+  }
+
+  private isPixelInRangeLab(
+    pixel: { r: number; g: number; b: number },
+    target: { r: number; g: number; b: number }
+  ): boolean {
+    const pixelLab = this.rgbToLab(pixel)
+    const targetLab = this.rgbToLab(target)
+
+    // Calculate Delta E (CIE76 formula)
+    const deltaE = Math.sqrt(
+      Math.pow(pixelLab.l - targetLab.l, 2) +
+        Math.pow(pixelLab.a - targetLab.a, 2) +
+        Math.pow(pixelLab.b - targetLab.b, 2)
+    )
+
+    const normalizedDeltaE = (deltaE / 100) * 255
+    return normalizedDeltaE <= this.tolerance
+  }
+
+  private rgbToLab(rgb: { r: number; g: number; b: number }): {
+    l: number
+    a: number
+    b: number
+  } {
+    // First convert RGB to XYZ
+    let r = rgb.r / 255
+    let g = rgb.g / 255
+    let b = rgb.b / 255
+
+    r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92
+    g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92
+    b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92
+
+    r *= 100
+    g *= 100
+    b *= 100
+
+    const x = r * 0.4124 + g * 0.3576 + b * 0.1805
+    const y = r * 0.2126 + g * 0.7152 + b * 0.0722
+    const z = r * 0.0193 + g * 0.1192 + b * 0.9505
+
+    // Then XYZ to Lab
+    const xn = 95.047
+    const yn = 100.0
+    const zn = 108.883
+
+    const xyz = [x / xn, y / yn, z / zn]
+    for (let i = 0; i < xyz.length; i++) {
+      xyz[i] =
+        xyz[i] > 0.008856 ? Math.pow(xyz[i], 1 / 3) : 7.787 * xyz[i] + 16 / 116
+    }
+
+    return {
+      l: 116 * xyz[1] - 16,
+      a: 500 * (xyz[0] - xyz[1]),
+      b: 200 * (xyz[1] - xyz[2])
+    }
+  }
+
+  private setPixel(
+    x: number,
+    y: number,
+    alpha: number,
+    color: { r: number; g: number; b: number }
+  ): void {
+    const index = (y * this.width! + x) * 4
+    this.maskData![index] = color.r // R
+    this.maskData![index + 1] = color.g // G
+    this.maskData![index + 2] = color.b // B
+    this.maskData![index + 3] = alpha // A
+  }
+
+  async fillColorSelection(point: Point) {
+    this.width = this.canvas.width
+    this.height = this.canvas.height
+    this.lastPoint = point
+
+    // Get image data
+    const maskData = this.maskCTX.getImageData(0, 0, this.width, this.height)
+    this.maskData = maskData.data
+    this.imageData = this.imageCTX.getImageData(
+      0,
+      0,
+      this.width,
+      this.height
+    ).data
+
+    if (this.applyWholeImage) {
+      // Process entire image
+      const targetPixel = this.getPixel(
+        Math.floor(point.x),
+        Math.floor(point.y)
+      )
+      const maskColor = await this.messageBroker.pull<{
+        r: number
+        g: number
+        b: number
+      }>('getMaskColor')
+
+      // Use TypedArrays for better performance
+      const width = this.width!
+      const height = this.height!
+
+      // Process in chunks for better performance
+      const CHUNK_SIZE = 10000
+      for (let i = 0; i < width * height; i += CHUNK_SIZE) {
+        const endIndex = Math.min(i + CHUNK_SIZE, width * height)
+        for (let pixelIndex = i; pixelIndex < endIndex; pixelIndex++) {
+          const x = pixelIndex % width
+          const y = Math.floor(pixelIndex / width)
+          if (this.isPixelInRange(this.getPixel(x, y), targetPixel)) {
+            this.setPixel(x, y, this.selectOpacity, maskColor) // Use selectOpacity instead of 255
+          }
+        }
+        // Allow UI updates between chunks
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      }
+    } else {
+      // Original flood fill logic
+      let startX = Math.floor(point.x)
+      let startY = Math.floor(point.y)
+
+      if (
+        startX < 0 ||
+        startX >= this.width ||
+        startY < 0 ||
+        startY >= this.height
+      ) {
+        return
+      }
+
+      const pixel = this.getPixel(startX, startY)
+
+      const stack: Array<[number, number]> = []
+      const visited = new Uint8Array(this.width * this.height)
+
+      stack.push([startX, startY])
+      const maskColor = await this.messageBroker.pull<{
+        r: number
+        g: number
+        b: number
+      }>('getMaskColor')
+
+      while (stack.length > 0) {
+        const [x, y] = stack.pop()!
+        const visitedIndex = y * this.width + x
+
+        if (
+          visited[visitedIndex] ||
+          !this.isPixelInRange(this.getPixel(x, y), pixel)
+        ) {
+          continue
+        }
+
+        visited[visitedIndex] = 1
+        this.setPixel(x, y, this.selectOpacity, maskColor) // Use selectOpacity instead of 255
+
+        // Inline direction checks for better performance
+        if (
+          x > 0 &&
+          !visited[y * this.width + (x - 1)] &&
+          this.isPixelInRange(this.getPixel(x - 1, y), pixel)
+        ) {
+          if (
+            !this.maskBoundry ||
+            255 - this.getMaskAlpha(x - 1, y) > this.maskTolerance
+          ) {
+            stack.push([x - 1, y])
+          }
+        }
+        if (
+          x < this.width - 1 &&
+          !visited[y * this.width + (x + 1)] &&
+          this.isPixelInRange(this.getPixel(x + 1, y), pixel)
+        ) {
+          if (
+            !this.maskBoundry ||
+            255 - this.getMaskAlpha(x + 1, y) > this.maskTolerance
+          ) {
+            stack.push([x + 1, y])
+          }
+        }
+        if (
+          y > 0 &&
+          !visited[(y - 1) * this.width + x] &&
+          this.isPixelInRange(this.getPixel(x, y - 1), pixel)
+        ) {
+          if (
+            !this.maskBoundry ||
+            255 - this.getMaskAlpha(x, y - 1) > this.maskTolerance
+          ) {
+            stack.push([x, y - 1])
+          }
+        }
+        if (
+          y < this.height - 1 &&
+          !visited[(y + 1) * this.width + x] &&
+          this.isPixelInRange(this.getPixel(x, y + 1), pixel)
+        ) {
+          if (
+            !this.maskBoundry ||
+            255 - this.getMaskAlpha(x, y + 1) > this.maskTolerance
+          ) {
+            stack.push([x, y + 1])
+          }
+        }
+      }
+    }
+
+    this.maskCTX.putImageData(maskData, 0, 0)
+    this.messageBroker.publish('saveState')
+    this.maskData = null
+    this.imageData = null
+  }
+  setTolerance(tolerance: number): void {
+    this.tolerance = tolerance
+
+    if (this.lastPoint && this.livePreview) {
+      this.messageBroker.publish('undo')
+      this.fillColorSelection(this.lastPoint)
+    }
+  }
+
+  setLivePreview(livePreview: boolean): void {
+    this.livePreview = livePreview
+  }
+
+  setComparisonMethod(method: ColorComparisonMethod): void {
+    this.colorComparisonMethod = method
+
+    if (this.lastPoint && this.livePreview) {
+      this.messageBroker.publish('undo')
+      this.fillColorSelection(this.lastPoint)
+    }
+  }
+
+  clearLastPoint() {
+    this.lastPoint = null
+  }
+
+  setApplyWholeImage(applyWholeImage: boolean): void {
+    this.applyWholeImage = applyWholeImage
+  }
+
+  setMaskBoundary(maskBoundry: boolean): void {
+    this.maskBoundry = maskBoundry
+  }
+
+  setMaskTolerance(maskTolerance: number): void {
+    this.maskTolerance = maskTolerance
+  }
+
+  // Add method to set opacity
+  setSelectOpacity(opacity: number): void {
+    // Convert from percentage (0-100) to alpha value (0-255)
+    this.selectOpacity = Math.floor((opacity / 100) * 255)
+
+    // Update preview if applicable
+    if (this.lastPoint && this.livePreview) {
+      this.messageBroker.publish('undo')
+      this.fillColorSelection(this.lastPoint)
+    }
+  }
+}
+
+export { ColorSelectTool }
diff --git a/src/extensions/core/maskeditor/tools/PaintBucketTool.ts b/src/extensions/core/maskeditor/tools/PaintBucketTool.ts
new file mode 100644
index 000000000..abff4e6b8
--- /dev/null
+++ b/src/extensions/core/maskeditor/tools/PaintBucketTool.ts
@@ -0,0 +1,265 @@
+import type { Point } from '../types'
+
+// Forward declaration for MessageBroker type
+interface MessageBroker {
+  subscribe(topic: string, callback: (data?: any) => void): void
+  publish(topic: string, data?: any): void
+  pull<T>(topic: string, data?: any): Promise<T>
+  createPullTopic(topic: string, callback: (data?: any) => Promise<any>): void
+}
+
+// Forward declaration for MaskEditorDialog type
+interface MaskEditorDialog {
+  getMessageBroker(): MessageBroker
+}
+
+class PaintBucketTool {
+  maskEditor: MaskEditorDialog
+  messageBroker: MessageBroker
+
+  private canvas!: HTMLCanvasElement
+  private ctx!: CanvasRenderingContext2D
+  private width: number | null = null
+  private height: number | null = null
+  private imageData: ImageData | null = null
+  private data: Uint8ClampedArray | null = null
+  private tolerance: number = 5
+  private fillOpacity: number = 255 // Add opacity property (default 100%)
+
+  constructor(maskEditor: MaskEditorDialog) {
+    this.maskEditor = maskEditor
+    this.messageBroker = maskEditor.getMessageBroker()
+    this.createListeners()
+    this.addPullTopics()
+  }
+
+  initPaintBucketTool() {
+    this.pullCanvas()
+  }
+
+  private async pullCanvas() {
+    this.canvas = await this.messageBroker.pull('maskCanvas')
+    this.ctx = await this.messageBroker.pull('maskCtx')
+  }
+
+  private createListeners() {
+    this.messageBroker.subscribe(
+      'setPaintBucketTolerance',
+      (tolerance: number) => this.setTolerance(tolerance)
+    )
+
+    this.messageBroker.subscribe('paintBucketFill', (point: Point) =>
+      this.floodFill(point)
+    )
+
+    this.messageBroker.subscribe('invert', () => this.invertMask())
+
+    // Add new listener for opacity setting
+    this.messageBroker.subscribe('setFillOpacity', (opacity: number) =>
+      this.setFillOpacity(opacity)
+    )
+  }
+
+  private addPullTopics() {
+    this.messageBroker.createPullTopic(
+      'getTolerance',
+      async () => this.tolerance
+    )
+    // Add pull topic for fillOpacity
+    this.messageBroker.createPullTopic(
+      'getFillOpacity',
+      async () => (this.fillOpacity / 255) * 100
+    )
+  }
+
+  // Add method to set opacity
+  setFillOpacity(opacity: number): void {
+    // Convert from percentage (0-100) to alpha value (0-255)
+    this.fillOpacity = Math.floor((opacity / 100) * 255)
+  }
+
+  private getPixel(x: number, y: number): number {
+    return this.data![(y * this.width! + x) * 4 + 3]
+  }
+
+  private setPixel(
+    x: number,
+    y: number,
+    alpha: number,
+    color: { r: number; g: number; b: number }
+  ): void {
+    const index = (y * this.width! + x) * 4
+    this.data![index] = color.r // R
+    this.data![index + 1] = color.g // G
+    this.data![index + 2] = color.b // B
+    this.data![index + 3] = alpha // A
+  }
+
+  private shouldProcessPixel(
+    currentAlpha: number,
+    targetAlpha: number,
+    tolerance: number,
+    isFillMode: boolean
+  ): boolean {
+    if (currentAlpha === -1) return false
+
+    if (isFillMode) {
+      // Fill mode: process pixels that are empty/similar to target
+      return (
+        currentAlpha !== 255 &&
+        Math.abs(currentAlpha - targetAlpha) <= tolerance
+      )
+    } else {
+      // Erase mode: process pixels that are filled/similar to target
+      return (
+        currentAlpha === 255 ||
+        Math.abs(currentAlpha - targetAlpha) <= tolerance
+      )
+    }
+  }
+
+  private async floodFill(point: Point): Promise<void> {
+    let startX = Math.floor(point.x)
+    let startY = Math.floor(point.y)
+    this.width = this.canvas.width
+    this.height = this.canvas.height
+
+    if (
+      startX < 0 ||
+      startX >= this.width ||
+      startY < 0 ||
+      startY >= this.height
+    ) {
+      return
+    }
+
+    this.imageData = this.ctx.getImageData(0, 0, this.width, this.height)
+    this.data = this.imageData.data
+
+    const targetAlpha = this.getPixel(startX, startY)
+    const isFillMode = targetAlpha !== 255 // Determine mode based on clicked pixel
+
+    if (targetAlpha === -1) return
+
+    const maskColor = await this.messageBroker.pull<{
+      r: number
+      g: number
+      b: number
+    }>('getMaskColor')
+    const stack: Array<[number, number]> = []
+    const visited = new Uint8Array(this.width * this.height)
+
+    if (
+      this.shouldProcessPixel(
+        targetAlpha,
+        targetAlpha,
+        this.tolerance,
+        isFillMode
+      )
+    ) {
+      stack.push([startX, startY])
+    }
+
+    while (stack.length > 0) {
+      const [x, y] = stack.pop()!
+      const visitedIndex = y * this.width + x
+
+      if (visited[visitedIndex]) continue
+
+      const currentAlpha = this.getPixel(x, y)
+      if (
+        !this.shouldProcessPixel(
+          currentAlpha,
+          targetAlpha,
+          this.tolerance,
+          isFillMode
+        )
+      ) {
+        continue
+      }
+
+      visited[visitedIndex] = 1
+      // Set alpha to fillOpacity for fill mode, 0 for erase mode
+      this.setPixel(x, y, isFillMode ? this.fillOpacity : 0, maskColor)
+
+      // Check neighbors
+      const checkNeighbor = (nx: number, ny: number) => {
+        if (nx < 0 || nx >= this.width! || ny < 0 || ny >= this.height!) return
+        if (!visited[ny * this.width! + nx]) {
+          const alpha = this.getPixel(nx, ny)
+          if (
+            this.shouldProcessPixel(
+              alpha,
+              targetAlpha,
+              this.tolerance,
+              isFillMode
+            )
+          ) {
+            stack.push([nx, ny])
+          }
+        }
+      }
+
+      checkNeighbor(x - 1, y) // Left
+      checkNeighbor(x + 1, y) // Right
+      checkNeighbor(x, y - 1) // Up
+      checkNeighbor(x, y + 1) // Down
+    }
+
+    this.ctx.putImageData(this.imageData, 0, 0)
+    this.imageData = null
+    this.data = null
+  }
+
+  setTolerance(tolerance: number): void {
+    this.tolerance = tolerance
+  }
+
+  getTolerance(): number {
+    return this.tolerance
+  }
+
+  //invert mask
+
+  private invertMask() {
+    const imageData = this.ctx.getImageData(
+      0,
+      0,
+      this.canvas.width,
+      this.canvas.height
+    )
+    const data = imageData.data
+
+    // Find first non-transparent pixel to get mask color
+    let maskR = 0,
+      maskG = 0,
+      maskB = 0
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] > 0) {
+        maskR = data[i]
+        maskG = data[i + 1]
+        maskB = data[i + 2]
+        break
+      }
+    }
+
+    // Process each pixel
+    for (let i = 0; i < data.length; i += 4) {
+      const alpha = data[i + 3]
+      // Invert alpha channel (0 becomes 255, 255 becomes 0)
+      data[i + 3] = 255 - alpha
+
+      // If this was originally transparent (now opaque), fill with mask color
+      if (alpha === 0) {
+        data[i] = maskR
+        data[i + 1] = maskG
+        data[i + 2] = maskB
+      }
+    }
+
+    this.ctx.putImageData(imageData, 0, 0)
+    this.messageBroker.publish('saveState')
+  }
+}
+
+export { PaintBucketTool }
diff --git a/src/extensions/core/maskeditor/tools/index.ts b/src/extensions/core/maskeditor/tools/index.ts
new file mode 100644
index 000000000..c1d38cd8d
--- /dev/null
+++ b/src/extensions/core/maskeditor/tools/index.ts
@@ -0,0 +1,3 @@
+export { PaintBucketTool } from './PaintBucketTool'
+export { ColorSelectTool } from './ColorSelectTool'
+export { BrushTool } from './BrushTool'
diff --git a/src/extensions/core/maskeditor/types.ts b/src/extensions/core/maskeditor/types.ts
new file mode 100644
index 000000000..35ca1e251
--- /dev/null
+++ b/src/extensions/core/maskeditor/types.ts
@@ -0,0 +1,75 @@
+export enum BrushShape {
+  Arc = 'arc',
+  Rect = 'rect'
+}
+
+export enum Tools {
+  MaskPen = 'pen',
+  PaintPen = 'rgbPaint',
+  Eraser = 'eraser',
+  MaskBucket = 'paintBucket',
+  MaskColorFill = 'colorSelect'
+}
+
+export const allTools = [
+  Tools.MaskPen,
+  Tools.PaintPen,
+  Tools.Eraser,
+  Tools.MaskBucket,
+  Tools.MaskColorFill
+]
+
+export const allImageLayers = ['mask', 'rgb'] as const
+export type ImageLayer = (typeof allImageLayers)[number]
+
+export interface ToolInternalSettings {
+  container: HTMLElement
+  cursor?: string
+  newActiveLayerOnSet?: ImageLayer
+}
+
+export enum CompositionOperation {
+  SourceOver = 'source-over',
+  DestinationOut = 'destination-out'
+}
+
+export enum MaskBlendMode {
+  Black = 'black',
+  White = 'white',
+  Negative = 'negative'
+}
+
+export enum ColorComparisonMethod {
+  Simple = 'simple',
+  HSL = 'hsl',
+  LAB = 'lab'
+}
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Offset {
+  x: number
+  y: number
+}
+
+export interface Brush {
+  type: BrushShape
+  size: number
+  opacity: number
+  hardness: number
+  smoothingPrecision: number
+}
+
+export type Callback = (data?: any) => void
+
+export type Ref = { filename: string; subfolder?: string; type?: string }
+
+// Forward declaration for MaskEditorDialog
+export interface MaskEditorDialog {
+  getMessageBroker(): any // Will be MessageBroker, but avoiding circular dependency
+  save(): void
+  destroy(): void
+}
diff --git a/src/extensions/core/maskeditor/utils/brushCache.ts b/src/extensions/core/maskeditor/utils/brushCache.ts
new file mode 100644
index 000000000..d29e8eb2d
--- /dev/null
+++ b/src/extensions/core/maskeditor/utils/brushCache.ts
@@ -0,0 +1,32 @@
+import { debounce } from 'es-toolkit/compat'
+import { getStorageValue, setStorageValue } from '@/scripts/utils'
+import type { Brush } from '../types'
+
+export const saveBrushToCache = debounce(function (
+  key: string,
+  brush: Brush
+): void {
+  try {
+    const brushString = JSON.stringify(brush)
+    setStorageValue(key, brushString)
+  } catch (error) {
+    console.error('Failed to save brush to cache:', error)
+  }
+}, 300)
+
+export function loadBrushFromCache(key: string): Brush | null {
+  try {
+    const brushString = getStorageValue(key)
+    if (brushString) {
+      const brush = JSON.parse(brushString) as Brush
+      console.log('Loaded brush from cache:', brush)
+      return brush
+    } else {
+      console.log('No brush found in cache.')
+      return null
+    }
+  } catch (error) {
+    console.error('Failed to load brush from cache:', error)
+    return null
+  }
+}
diff --git a/src/extensions/core/maskeditor/utils/canvas.ts b/src/extensions/core/maskeditor/utils/canvas.ts
new file mode 100644
index 000000000..099f83953
--- /dev/null
+++ b/src/extensions/core/maskeditor/utils/canvas.ts
@@ -0,0 +1,39 @@
+export const getCanvas2dContext = (
+  canvas: HTMLCanvasElement
+): CanvasRenderingContext2D => {
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  // Safe with the way we use canvases
+  if (!ctx) throw new Error('Failed to get 2D context from canvas')
+  return ctx
+}
+
+export const createCanvasCopy = (
+  canvas: HTMLCanvasElement
+): [HTMLCanvasElement, CanvasRenderingContext2D] => {
+  const newCanvas = document.createElement('canvas')
+  const newCanvasCtx = getCanvas2dContext(newCanvas)
+  newCanvas.width = canvas.width
+  newCanvas.height = canvas.height
+  newCanvasCtx.clearRect(0, 0, canvas.width, canvas.height)
+  newCanvasCtx.drawImage(
+    canvas,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+    0,
+    0,
+    canvas.width,
+    canvas.height
+  )
+  return [newCanvas, newCanvasCtx]
+}
+
+export const combineOriginalImageAndPaint = (
+  canvases: Record<'originalImage' | 'paint', HTMLCanvasElement>
+): [HTMLCanvasElement, CanvasRenderingContext2D] => {
+  const { originalImage, paint } = canvases
+  const [resultCanvas, resultCanvasCtx] = createCanvasCopy(originalImage)
+  resultCanvasCtx.drawImage(paint, 0, 0)
+  return [resultCanvas, resultCanvasCtx]
+}
diff --git a/src/extensions/core/maskeditor/utils/clipspace.ts b/src/extensions/core/maskeditor/utils/clipspace.ts
new file mode 100644
index 000000000..78684e3dd
--- /dev/null
+++ b/src/extensions/core/maskeditor/utils/clipspace.ts
@@ -0,0 +1,32 @@
+import { ComfyApp } from '@/scripts/app'
+import type { Ref } from '../types'
+
+/**
+ * Note: the images' positions are important here. What the positions mean is hardcoded in `src/scripts/app.ts` in the `copyToClipspace` method.
+ * - `newMainOutput` should be the fully composited image: base image + mask (in the alpha channel) + paint.
+ * - The first array element of `extraImagesShownButNotOutputted` should be JUST the paint layer, with a transparent background.
+ * - It is possible to add more images in the clipspace array, but is not useful currently.
+ * With this configuration, the MaskEditor will properly load the paint layer separately from the base image, ensuring it is editable.
+ * */
+export const replaceClipspaceImages = (
+  newMainOutput: Ref,
+  otherImagesInClipspace?: Ref[]
+) => {
+  try {
+    if (!ComfyApp?.clipspace?.widgets?.length) return
+    const firstImageWidgetIndex = ComfyApp.clipspace.widgets.findIndex(
+      (obj) => obj?.name === 'image'
+    )
+    const firstImageWidget = ComfyApp.clipspace.widgets[firstImageWidgetIndex]
+    if (!firstImageWidget) return
+
+    ComfyApp!.clipspace!.widgets![firstImageWidgetIndex].value = newMainOutput
+
+    otherImagesInClipspace?.forEach((extraImage, extraImageIndex) => {
+      const extraImageWidgetIndex = firstImageWidgetIndex + extraImageIndex + 1
+      ComfyApp!.clipspace!.widgets![extraImageWidgetIndex].value = extraImage
+    })
+  } catch (err) {
+    console.warn('Failed to set widget value:', err)
+  }
+}
diff --git a/src/extensions/core/maskeditor/utils/image.ts b/src/extensions/core/maskeditor/utils/image.ts
new file mode 100644
index 000000000..5f6a02b40
--- /dev/null
+++ b/src/extensions/core/maskeditor/utils/image.ts
@@ -0,0 +1,62 @@
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import type { Ref } from '../types'
+
+export const ensureImageFullyLoaded = (src: string) =>
+  new Promise<void>((resolve, reject) => {
+    const maskImage = new Image()
+    maskImage.src = src
+    maskImage.onload = () => resolve()
+    maskImage.onerror = reject
+  })
+
+const isAlphaValue = (index: number) => index % 4 === 3
+
+export const removeImageRgbValuesAndInvertAlpha = (
+  imageData: Uint8ClampedArray
+) => imageData.map((val, i) => (isAlphaValue(i) ? 255 - val : 0))
+
+export const toRef = (filename: string): Ref => ({
+  filename,
+  subfolder: 'clipspace',
+  type: 'input'
+})
+
+export const mkFileUrl = (props: { ref: Ref; preview?: boolean }) => {
+  const pathPlusQueryParams = api.apiURL(
+    '/view?' +
+      new URLSearchParams(props.ref).toString() +
+      app.getPreviewFormatParam() +
+      app.getRandParam()
+  )
+  const imageElement = new Image()
+  imageElement.src = pathPlusQueryParams
+  return imageElement.src
+}
+
+export const requestWithRetries = async (
+  mkRequest: () => Promise<Response>,
+  maxRetries: number = 3
+): Promise<{ success: boolean }> => {
+  let attempt = 0
+  let success = false
+  while (attempt < maxRetries && !success) {
+    try {
+      const response = await mkRequest()
+      if (response.ok) {
+        success = true
+      } else {
+        console.log('Failed to upload mask:', response)
+      }
+    } catch (error) {
+      console.error(`Upload attempt ${attempt + 1} failed:`, error)
+      attempt++
+      if (attempt < maxRetries) {
+        console.log('Retrying upload...')
+      } else {
+        console.log('Max retries reached. Upload failed.')
+      }
+    }
+  }
+  return { success }
+}
diff --git a/src/extensions/core/maskeditor/utils/index.ts b/src/extensions/core/maskeditor/utils/index.ts
new file mode 100644
index 000000000..ca443922b
--- /dev/null
+++ b/src/extensions/core/maskeditor/utils/index.ts
@@ -0,0 +1,14 @@
+export {
+  toRef,
+  mkFileUrl,
+  ensureImageFullyLoaded,
+  removeImageRgbValuesAndInvertAlpha,
+  requestWithRetries
+} from './image'
+export { imageLayerFilenamesIfApplicable } from './maskEditorLayerFilenames'
+export {
+  getCanvas2dContext,
+  createCanvasCopy,
+  combineOriginalImageAndPaint
+} from './canvas'
+export { replaceClipspaceImages } from './clipspace'
diff --git a/src/extensions/core/maskEditorLayerFilenames.ts b/src/extensions/core/maskeditor/utils/maskEditorLayerFilenames.ts
similarity index 100%
rename from src/extensions/core/maskEditorLayerFilenames.ts
rename to src/extensions/core/maskeditor/utils/maskEditorLayerFilenames.ts
diff --git a/src/extensions/core/nodeTemplates.ts b/src/extensions/core/nodeTemplates.ts
index 5737ba54d..c16ebed72 100644
--- a/src/extensions/core/nodeTemplates.ts
+++ b/src/extensions/core/nodeTemplates.ts
@@ -1,7 +1,10 @@
+import { downloadBlob } from '@/base/common/downloadUtil'
 import { t } from '@/i18n'
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogService } from '@/services/dialogService'
+import type { ComfyExtension } from '@/types/comfy'
 import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
 import { api } from '../../scripts/api'
@@ -145,18 +148,7 @@ class ManageTemplates extends ComfyDialog {
 
     const json = JSON.stringify({ templates: this.templates }, null, 2) // convert the data to a JSON string
     const blob = new Blob([json], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const a = $el('a', {
-      href: url,
-      download: 'node_templates.json',
-      style: { display: 'none' },
-      parent: document.body
-    })
-    a.click()
-    setTimeout(function () {
-      a.remove()
-      window.URL.revokeObjectURL(url)
-    }, 0)
+    downloadBlob('node_templates.json', blob)
   }
 
   override show() {
@@ -298,19 +290,9 @@ class ManageTemplates extends ComfyDialog {
                       const blob = new Blob([json], {
                         type: 'application/json'
                       })
-                      const url = URL.createObjectURL(blob)
-                      const a = $el('a', {
-                        href: url,
-                        // @ts-expect-error fixme ts strict error
-                        download: (nameInput.value || t.name) + '.json',
-                        style: { display: 'none' },
-                        parent: document.body
-                      })
-                      a.click()
-                      setTimeout(function () {
-                        a.remove()
-                        window.URL.revokeObjectURL(url)
-                      }, 0)
+                      // @ts-expect-error fixme ts strict error
+                      const name = (nameInput.value || t.name) + '.json'
+                      downloadBlob(name, blob)
                     }
                   }),
                   $el('button', {
@@ -348,110 +330,107 @@ class ManageTemplates extends ComfyDialog {
   }
 }
 
-app.registerExtension({
+const manage = new ManageTemplates()
+
+// @ts-expect-error fixme ts strict error
+const clipboardAction = async (cb) => {
+  // We use the clipboard functions but dont want to overwrite the current user clipboard
+  // Restore it after we've run our callback
+  const old = localStorage.getItem('litegrapheditor_clipboard')
+  await cb()
+  // @ts-expect-error fixme ts strict error
+  localStorage.setItem('litegrapheditor_clipboard', old)
+}
+
+const ext: ComfyExtension = {
   name: id,
-  setup() {
-    const manage = new ManageTemplates()
+
+  getCanvasMenuItems(_canvas: LGraphCanvas): IContextMenuValue[] {
+    const items: IContextMenuValue[] = []
 
     // @ts-expect-error fixme ts strict error
-    const clipboardAction = async (cb) => {
-      // We use the clipboard functions but dont want to overwrite the current user clipboard
-      // Restore it after we've run our callback
-      const old = localStorage.getItem('litegrapheditor_clipboard')
-      await cb()
-      // @ts-expect-error fixme ts strict error
-      localStorage.setItem('litegrapheditor_clipboard', old)
-    }
+    items.push(null)
+    items.push({
+      content: `Save Selected as Template`,
+      disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
+      callback: async () => {
+        const name = await useDialogService().prompt({
+          title: t('nodeTemplates.saveAsTemplate'),
+          message: t('nodeTemplates.enterName'),
+          defaultValue: ''
+        })
+        if (!name?.trim()) return
 
-    const orig = LGraphCanvas.prototype.getCanvasMenuOptions
-    LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-      // @ts-expect-error fixme ts strict error
-      const options = orig.apply(this, arguments)
+        clipboardAction(() => {
+          app.canvas.copyToClipboard()
+          let data = localStorage.getItem('litegrapheditor_clipboard')
+          data = JSON.parse(data || '{}')
+          const nodeIds = Object.keys(app.canvas.selected_nodes)
+          for (let i = 0; i < nodeIds.length; i++) {
+            const node = app.graph.getNodeById(nodeIds[i])
+            const nodeData = node?.constructor.nodeData
 
-      // @ts-expect-error fixme ts strict error
-      options.push(null)
-      options.push({
-        content: `Save Selected as Template`,
-        disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
-        // @ts-expect-error fixme ts strict error
-        callback: async () => {
-          const name = await useDialogService().prompt({
-            title: t('nodeTemplates.saveAsTemplate'),
-            message: t('nodeTemplates.enterName'),
-            defaultValue: ''
-          })
-          if (!name?.trim()) return
-
-          clipboardAction(() => {
-            app.canvas.copyToClipboard()
-            let data = localStorage.getItem('litegrapheditor_clipboard')
-            // @ts-expect-error fixme ts strict error
-            data = JSON.parse(data)
-            const nodeIds = Object.keys(app.canvas.selected_nodes)
-            for (let i = 0; i < nodeIds.length; i++) {
-              const node = app.graph.getNodeById(nodeIds[i])
-              const nodeData = node?.constructor.nodeData
-
-              let groupData = GroupNodeHandler.getGroupData(node)
-              if (groupData) {
-                groupData = groupData.nodeData
+            let groupData = GroupNodeHandler.getGroupData(node)
+            if (groupData) {
+              groupData = groupData.nodeData
+              // @ts-expect-error
+              if (!data.groupNodes) {
                 // @ts-expect-error
-                if (!data.groupNodes) {
-                  // @ts-expect-error
-                  data.groupNodes = {}
-                }
-                if (nodeData == null) throw new TypeError('nodeData is not set')
-                // @ts-expect-error
-                data.groupNodes[nodeData.name] = groupData
-                // @ts-expect-error
-                data.nodes[i].type = nodeData.name
+                data.groupNodes = {}
               }
+              if (nodeData == null) throw new TypeError('nodeData is not set')
+              // @ts-expect-error
+              data.groupNodes[nodeData.name] = groupData
+              // @ts-expect-error
+              data.nodes[i].type = nodeData.name
             }
+          }
 
-            manage.templates.push({
-              name,
-              data: JSON.stringify(data)
-            })
-            manage.store()
+          manage.templates.push({
+            name,
+            data: JSON.stringify(data)
+          })
+          manage.store()
+        })
+      }
+    })
+
+    // Map each template to a menu item
+    const subItems = manage.templates.map((t) => {
+      return {
+        content: t.name,
+        callback: () => {
+          clipboardAction(async () => {
+            const data = JSON.parse(t.data)
+            await GroupNodeConfig.registerFromWorkflow(data.groupNodes, {})
+
+            // Check for old clipboard format
+            if (!data.reroutes) {
+              deserialiseAndCreate(t.data, app.canvas)
+            } else {
+              localStorage.setItem('litegrapheditor_clipboard', t.data)
+              app.canvas.pasteFromClipboard()
+            }
           })
         }
-      })
+      }
+    })
 
-      // Map each template to a menu item
-      const subItems = manage.templates.map((t) => {
-        return {
-          content: t.name,
-          callback: () => {
-            clipboardAction(async () => {
-              const data = JSON.parse(t.data)
-              await GroupNodeConfig.registerFromWorkflow(data.groupNodes, {})
+    // @ts-expect-error fixme ts strict error
+    subItems.push(null, {
+      content: 'Manage',
+      callback: () => manage.show()
+    })
 
-              // Check for old clipboard format
-              if (!data.reroutes) {
-                deserialiseAndCreate(t.data, app.canvas)
-              } else {
-                localStorage.setItem('litegrapheditor_clipboard', t.data)
-                app.canvas.pasteFromClipboard()
-              }
-            })
-          }
-        }
-      })
+    items.push({
+      content: 'Node Templates',
+      submenu: {
+        options: subItems
+      }
+    })
 
-      // @ts-expect-error fixme ts strict error
-      subItems.push(null, {
-        content: 'Manage',
-        callback: () => manage.show()
-      })
-
-      options.push({
-        content: 'Node Templates',
-        submenu: {
-          options: subItems
-        }
-      })
-
-      return options
-    }
+    return items
   }
-})
+}
+
+app.registerExtension(ext)
diff --git a/src/extensions/core/saveMesh.ts b/src/extensions/core/saveMesh.ts
index 3c84cf942..0955fe4cc 100644
--- a/src/extensions/core/saveMesh.ts
+++ b/src/extensions/core/saveMesh.ts
@@ -1,12 +1,22 @@
 import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
+import { useLoad3d } from '@/composables/useLoad3d'
+import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
 import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 
+const inputSpec: CustomInputSpec = {
+  name: 'image',
+  type: 'Preview3D',
+  isPreview: true
+}
+
 useExtensionService().registerExtension({
   name: 'Comfy.SaveGLB',
 
@@ -20,13 +30,6 @@ useExtensionService().registerExtension({
   getCustomWidgets() {
     return {
       PREVIEW_3D(node) {
-        const inputSpec: CustomInputSpec = {
-          name: 'image',
-          type: 'Preview3D',
-          isAnimation: false,
-          isPreview: true
-        }
-
         const widget = new ComponentWidgetImpl({
           node,
           name: inputSpec.name,
@@ -35,6 +38,8 @@ useExtensionService().registerExtension({
           options: {}
         })
 
+        widget.type = 'load3D'
+
         addWidget(node, widget)
 
         return { widget }
@@ -42,6 +47,16 @@ useExtensionService().registerExtension({
     }
   },
 
+  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+    // Only show menu items for SaveGLB nodes
+    if (node.constructor.comfyClass !== 'SaveGLB') return []
+
+    const load3d = useLoad3dService().getLoad3d(node)
+    if (!load3d) return []
+
+    return createExportMenuItems(load3d)
+  },
+
   async nodeCreated(node) {
     if (node.constructor.comfyClass !== 'SaveGLB') return
 
@@ -58,19 +73,19 @@ useExtensionService().registerExtension({
 
       const fileInfo = message['3d'][0]
 
-      const load3d = useLoad3dService().getLoad3d(node)
+      useLoad3d(node).waitForLoad3d((load3d) => {
+        const modelWidget = node.widgets?.find((w) => w.name === 'image')
 
-      const modelWidget = node.widgets?.find((w) => w.name === 'image')
+        if (load3d && modelWidget) {
+          const filePath = fileInfo['subfolder'] + '/' + fileInfo['filename']
 
-      if (load3d && modelWidget) {
-        const filePath = fileInfo['subfolder'] + '/' + fileInfo['filename']
+          modelWidget.value = filePath
 
-        modelWidget.value = filePath
+          const config = new Load3DConfiguration(load3d)
 
-        const config = new Load3DConfiguration(load3d)
-
-        config.configureForSaveMesh(fileInfo['type'], filePath)
-      }
+          config.configureForSaveMesh(fileInfo['type'], filePath)
+        }
+      })
     }
   }
 })
diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
index d6bec005a..cd2ff97e1 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -253,7 +253,7 @@ app.registerExtension({
         audio.setAttribute('name', 'media')
         const audioUIWidget: DOMWidget<HTMLAudioElement, string> =
           node.addDOMWidget(inputName, /* name=*/ 'audioUI', audio)
-        audioUIWidget.options.canvasOnly = true
+        audioUIWidget.options.canvasOnly = false
 
         let mediaRecorder: MediaRecorder | null = null
         let isRecording = false
@@ -376,10 +376,12 @@ app.registerExtension({
               mediaRecorder.stop()
             }
           },
-          { serialize: false, canvasOnly: true }
+          { serialize: false, canvasOnly: false }
         )
 
         recordWidget.label = t('g.startRecording')
+        // Override the type for Vue rendering while keeping 'button' for LiteGraph
+        recordWidget.type = 'audiorecord'
 
         const originalOnRemoved = node.onRemoved
         node.onRemoved = function () {
diff --git a/src/i18n.ts b/src/i18n.ts
index 38a8dfe95..d3e34245c 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,68 +1,159 @@
 import { createI18n } from 'vue-i18n'
 
-import arCommands from './locales/ar/commands.json' with { type: 'json' }
-import ar from './locales/ar/main.json' with { type: 'json' }
-import arNodes from './locales/ar/nodeDefs.json' with { type: 'json' }
-import arSettings from './locales/ar/settings.json' with { type: 'json' }
+// ESLint cannot statically resolve dynamic imports with relative paths in template strings,
+// but these are valid ES module imports that Vite processes correctly at build time.
+
+// Import only English locale eagerly as the default/fallback
 import enCommands from './locales/en/commands.json' with { type: 'json' }
 import en from './locales/en/main.json' with { type: 'json' }
 import enNodes from './locales/en/nodeDefs.json' with { type: 'json' }
 import enSettings from './locales/en/settings.json' with { type: 'json' }
-import esCommands from './locales/es/commands.json' with { type: 'json' }
-import es from './locales/es/main.json' with { type: 'json' }
-import esNodes from './locales/es/nodeDefs.json' with { type: 'json' }
-import esSettings from './locales/es/settings.json' with { type: 'json' }
-import frCommands from './locales/fr/commands.json' with { type: 'json' }
-import fr from './locales/fr/main.json' with { type: 'json' }
-import frNodes from './locales/fr/nodeDefs.json' with { type: 'json' }
-import frSettings from './locales/fr/settings.json' with { type: 'json' }
-import jaCommands from './locales/ja/commands.json' with { type: 'json' }
-import ja from './locales/ja/main.json' with { type: 'json' }
-import jaNodes from './locales/ja/nodeDefs.json' with { type: 'json' }
-import jaSettings from './locales/ja/settings.json' with { type: 'json' }
-import koCommands from './locales/ko/commands.json' with { type: 'json' }
-import ko from './locales/ko/main.json' with { type: 'json' }
-import koNodes from './locales/ko/nodeDefs.json' with { type: 'json' }
-import koSettings from './locales/ko/settings.json' with { type: 'json' }
-import ruCommands from './locales/ru/commands.json' with { type: 'json' }
-import ru from './locales/ru/main.json' with { type: 'json' }
-import ruNodes from './locales/ru/nodeDefs.json' with { type: 'json' }
-import ruSettings from './locales/ru/settings.json' with { type: 'json' }
-import trCommands from './locales/tr/commands.json' with { type: 'json' }
-import tr from './locales/tr/main.json' with { type: 'json' }
-import trNodes from './locales/tr/nodeDefs.json' with { type: 'json' }
-import trSettings from './locales/tr/settings.json' with { type: 'json' }
-import zhTWCommands from './locales/zh-TW/commands.json' with { type: 'json' }
-import zhTW from './locales/zh-TW/main.json' with { type: 'json' }
-import zhTWNodes from './locales/zh-TW/nodeDefs.json' with { type: 'json' }
-import zhTWSettings from './locales/zh-TW/settings.json' with { type: 'json' }
-import zhCommands from './locales/zh/commands.json' with { type: 'json' }
-import zh from './locales/zh/main.json' with { type: 'json' }
-import zhNodes from './locales/zh/nodeDefs.json' with { type: 'json' }
-import zhSettings from './locales/zh/settings.json' with { type: 'json' }
 
-function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
+function buildLocale<
+  M extends Record<string, unknown>,
+  N extends Record<string, unknown>,
+  C extends Record<string, unknown>,
+  S extends Record<string, unknown>
+>(main: M, nodes: N, commands: C, settings: S) {
   return {
     ...main,
     nodeDefs: nodes,
     commands: commands,
     settings: settings
-  }
+  } as M & { nodeDefs: N; commands: C; settings: S }
 }
 
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings),
-  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
-  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
-  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
-  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
-  ko: buildLocale(ko, koNodes, koCommands, koSettings),
-  fr: buildLocale(fr, frNodes, frCommands, frSettings),
-  es: buildLocale(es, esNodes, esCommands, esSettings),
-  ar: buildLocale(ar, arNodes, arCommands, arSettings),
-  tr: buildLocale(tr, trNodes, trCommands, trSettings)
+// Locale loader map - dynamically import locales only when needed
+const localeLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('./locales/ar/main.json'),
+  es: () => import('./locales/es/main.json'),
+  fr: () => import('./locales/fr/main.json'),
+  ja: () => import('./locales/ja/main.json'),
+  ko: () => import('./locales/ko/main.json'),
+  ru: () => import('./locales/ru/main.json'),
+  tr: () => import('./locales/tr/main.json'),
+  zh: () => import('./locales/zh/main.json'),
+  'zh-TW': () => import('./locales/zh-TW/main.json')
 }
 
+const nodeDefsLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('./locales/ar/nodeDefs.json'),
+  es: () => import('./locales/es/nodeDefs.json'),
+  fr: () => import('./locales/fr/nodeDefs.json'),
+  ja: () => import('./locales/ja/nodeDefs.json'),
+  ko: () => import('./locales/ko/nodeDefs.json'),
+  ru: () => import('./locales/ru/nodeDefs.json'),
+  tr: () => import('./locales/tr/nodeDefs.json'),
+  zh: () => import('./locales/zh/nodeDefs.json'),
+  'zh-TW': () => import('./locales/zh-TW/nodeDefs.json')
+}
+
+const commandsLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('./locales/ar/commands.json'),
+  es: () => import('./locales/es/commands.json'),
+  fr: () => import('./locales/fr/commands.json'),
+  ja: () => import('./locales/ja/commands.json'),
+  ko: () => import('./locales/ko/commands.json'),
+  ru: () => import('./locales/ru/commands.json'),
+  tr: () => import('./locales/tr/commands.json'),
+  zh: () => import('./locales/zh/commands.json'),
+  'zh-TW': () => import('./locales/zh-TW/commands.json')
+}
+
+const settingsLoaders: Record<
+  string,
+  () => Promise<{ default: Record<string, unknown> }>
+> = {
+  ar: () => import('./locales/ar/settings.json'),
+  es: () => import('./locales/es/settings.json'),
+  fr: () => import('./locales/fr/settings.json'),
+  ja: () => import('./locales/ja/settings.json'),
+  ko: () => import('./locales/ko/settings.json'),
+  ru: () => import('./locales/ru/settings.json'),
+  tr: () => import('./locales/tr/settings.json'),
+  zh: () => import('./locales/zh/settings.json'),
+  'zh-TW': () => import('./locales/zh-TW/settings.json')
+}
+
+// Track which locales have been loaded
+const loadedLocales = new Set<string>(['en'])
+
+// Track locales currently being loaded to prevent race conditions
+const loadingLocales = new Map<string, Promise<void>>()
+
+/**
+ * Dynamically load a locale and its associated files (nodeDefs, commands, settings)
+ */
+export async function loadLocale(locale: string): Promise<void> {
+  if (loadedLocales.has(locale)) {
+    return
+  }
+
+  // If already loading, return the existing promise to prevent duplicate loads
+  const existingLoad = loadingLocales.get(locale)
+  if (existingLoad) {
+    return existingLoad
+  }
+
+  const loader = localeLoaders[locale]
+  const nodeDefsLoader = nodeDefsLoaders[locale]
+  const commandsLoader = commandsLoaders[locale]
+  const settingsLoader = settingsLoaders[locale]
+
+  if (!loader || !nodeDefsLoader || !commandsLoader || !settingsLoader) {
+    console.warn(`Locale "${locale}" is not supported`)
+    return
+  }
+
+  // Create and track the loading promise
+  const loadPromise = (async () => {
+    try {
+      const [main, nodes, commands, settings] = await Promise.all([
+        loader(),
+        nodeDefsLoader(),
+        commandsLoader(),
+        settingsLoader()
+      ])
+
+      const messages = buildLocale(
+        main.default,
+        nodes.default,
+        commands.default,
+        settings.default
+      )
+
+      i18n.global.setLocaleMessage(locale, messages as LocaleMessages)
+      loadedLocales.add(locale)
+    } catch (error) {
+      console.error(`Failed to load locale "${locale}":`, error)
+      throw error
+    } finally {
+      // Clean up the loading promise once complete
+      loadingLocales.delete(locale)
+    }
+  })()
+
+  loadingLocales.set(locale, loadPromise)
+  return loadPromise
+}
+
+// Only include English in the initial bundle
+const messages = {
+  en: buildLocale(en, enNodes, enCommands, enSettings)
+}
+
+// Type for locale messages - inferred from the English locale structure
+type LocaleMessages = typeof messages.en
+
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2
   legacy: false,
diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
index 7f32a7c52..3a5ce49f4 100644
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -223,15 +223,15 @@ export class LGraph
   /** Internal only.  Not required for serialisation; calculated on deserialise. */
   #lastFloatingLinkId: number = 0
 
-  #floatingLinks: Map<LinkId, LLink> = new Map()
+  private readonly floatingLinksInternal: Map<LinkId, LLink> = new Map()
   get floatingLinks(): ReadonlyMap<LinkId, LLink> {
-    return this.#floatingLinks
+    return this.floatingLinksInternal
   }
 
-  #reroutes = new Map<RerouteId, Reroute>()
+  private readonly reroutesInternal = new Map<RerouteId, Reroute>()
   /** All reroutes in this graph. */
   public get reroutes(): Map<RerouteId, Reroute> {
-    return this.#reroutes
+    return this.reroutesInternal
   }
 
   get rootGraph(): LGraph {
@@ -340,7 +340,7 @@ export class LGraph
 
     this._links.clear()
     this.reroutes.clear()
-    this.#floatingLinks.clear()
+    this.floatingLinksInternal.clear()
 
     this.#lastFloatingLinkId = 0
 
@@ -1268,7 +1268,7 @@ export class LGraph
     if (link.id === -1) {
       link.id = ++this.#lastFloatingLinkId
     }
-    this.#floatingLinks.set(link.id, link)
+    this.floatingLinksInternal.set(link.id, link)
 
     const slot =
       link.target_id !== -1
@@ -1291,7 +1291,7 @@ export class LGraph
   }
 
   removeFloatingLink(link: LLink): void {
-    this.#floatingLinks.delete(link.id)
+    this.floatingLinksInternal.delete(link.id)
 
     const slot =
       link.target_id !== -1
@@ -1665,7 +1665,7 @@ export class LGraph
         continue
       }
 
-      const input = subgraphNode.findInputSlotByType(link.type, true, true)
+      const input = subgraphNode.inputs[i - 1]
       outputNode.connectSlots(output, subgraphNode, input, link.parentId)
     }
 
@@ -1710,6 +1710,14 @@ export class LGraph
 
     subgraphNode._setConcreteSlots()
     subgraphNode.arrange()
+    this.canvasAction((c) =>
+      c.canvas.dispatchEvent(
+        new CustomEvent('subgraph-converted', {
+          bubbles: true,
+          detail: { subgraphNode: subgraphNode as SubgraphNode }
+        })
+      )
+    )
     return { subgraph, node: subgraphNode as SubgraphNode }
   }
 
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index c8424ee6b..8c902527e 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -86,7 +86,11 @@ import {
   RenderShape,
   TitleMode
 } from './types/globalEnums'
-import type { ClipboardItems, SubgraphIO } from './types/serialisation'
+import type {
+  ClipboardItems,
+  ISerialisedNode,
+  SubgraphIO
+} from './types/serialisation'
 import type { NeverNever, PickNevers } from './types/utility'
 import type { IBaseWidget } from './types/widgets'
 import { alignNodes, distributeNodes, getBoundaryNodes } from './utils/arrange'
@@ -312,6 +316,14 @@ export class LGraphCanvas
     }
   }
 
+  /**
+   * The location of the fps info widget. Leaving an element unset will use the default position for that element.
+   */
+  fpsInfoLocation:
+    | [x: number | null | undefined, y: number | null | undefined]
+    | null
+    | undefined
+
   /** Dispatches a custom event on the canvas. */
   dispatch<T extends keyof NeverNever<LGraphCanvasEventMap>>(
     type: T,
@@ -1254,7 +1266,7 @@ export class LGraphCanvas
       if (!node) return
 
       // TODO: This is a static method, so the below "that" appears broken.
-      if (v.callback) v.callback.call(this, node, v, e, prev)
+      if (v.callback) void v.callback.call(this, node, v, e, prev)
 
       if (!v.value) return
 
@@ -1764,47 +1776,24 @@ export class LGraphCanvas
     menu: ContextMenu,
     node: LGraphNode
   ): void {
-    const { graph } = node
-    if (!graph) throw new NullGraphError()
-    graph.beforeChange()
-
-    const newSelected = new Set<LGraphNode>()
-
-    const fApplyMultiNode = function (
-      node: LGraphNode,
-      newNodes: Set<LGraphNode>
-    ): void {
-      if (node.clonable === false) return
-
-      const newnode = node.clone()
-      if (!newnode) return
-
-      newnode.pos = [node.pos[0] + 5, node.pos[1] + 5]
-      if (!node.graph) throw new NullGraphError()
-
-      node.graph.add(newnode)
-      newNodes.add(newnode)
-    }
-
     const canvas = LGraphCanvas.active_canvas
-    if (
-      !canvas.selected_nodes ||
-      Object.keys(canvas.selected_nodes).length <= 1
-    ) {
-      fApplyMultiNode(node, newSelected)
-    } else {
-      for (const i in canvas.selected_nodes) {
-        fApplyMultiNode(canvas.selected_nodes[i], newSelected)
-      }
+    const nodes = canvas.selectedItems.size ? canvas.selectedItems : [node]
+
+    // Find top-left-most boundary
+    let offsetX = Infinity
+    let offsetY = Infinity
+    for (const item of nodes) {
+      if (item.pos == null)
+        throw new TypeError(
+          'Invalid node encountered on clone.  `pos` was null.'
+        )
+      if (item.pos[0] < offsetX) offsetX = item.pos[0]
+      if (item.pos[1] < offsetY) offsetY = item.pos[1]
     }
 
-    if (newSelected.size) {
-      canvas.selectNodes([...newSelected])
-    }
-
-    graph.afterChange()
-
-    canvas.setDirty(true, true)
+    canvas._deserializeItems(canvas._serializeItems(nodes), {
+      position: [offsetX + 5, offsetY + 5]
+    })
   }
 
   /**
@@ -2180,7 +2169,7 @@ export class LGraphCanvas
     }
   }
 
-  processMouseDown(e: PointerEvent): void {
+  processMouseDown(e: MouseEvent): void {
     if (
       this.dragZoomEnabled &&
       e.ctrlKey &&
@@ -2369,48 +2358,29 @@ export class LGraphCanvas
 
     // clone node ALT dragging
     if (
+      !LiteGraph.vueNodesMode &&
       LiteGraph.alt_drag_do_clone_nodes &&
       e.altKey &&
       !e.ctrlKey &&
       node &&
       this.allow_interaction
     ) {
-      let newType = node.type
+      const items = this._deserializeItems(this._serializeItems([node]), {
+        position: node.pos
+      })
+      const cloned = items?.created[0] as LGraphNode | undefined
+      if (!cloned) return
 
-      if (node instanceof SubgraphNode) {
-        const cloned = node.subgraph.clone().asSerialisable()
+      cloned.pos[0] += 5
+      cloned.pos[1] += 5
 
-        const subgraph = graph.createSubgraph(cloned)
-        subgraph.configure(cloned)
-        newType = subgraph.id
-      }
-
-      const node_data = node.clone()?.serialize()
-      if (node_data?.type != null) {
-        // Ensure the cloned node is configured against the correct type (especially for SubgraphNodes)
-        node_data.type = newType
-        const cloned = LiteGraph.createNode(newType)
-        if (cloned) {
-          cloned.configure(node_data)
-          cloned.pos[0] += 5
-          cloned.pos[1] += 5
-
-          if (this.allow_dragnodes) {
-            pointer.onDragStart = (pointer) => {
-              graph.add(cloned, false)
-              this.#startDraggingItems(cloned, pointer)
-            }
-            pointer.onDragEnd = (e) => this.#processDraggedItems(e)
-          } else {
-            // TODO: Check if before/after change are necessary here.
-            graph.beforeChange()
-            graph.add(cloned, false)
-            graph.afterChange()
-          }
-
-          return
+      if (this.allow_dragnodes) {
+        pointer.onDragStart = (pointer) => {
+          this.#startDraggingItems(cloned, pointer)
         }
+        pointer.onDragEnd = (e) => this.#processDraggedItems(e)
       }
+      return
     }
 
     // Node clicked
@@ -2667,6 +2637,12 @@ export class LGraphCanvas
     ctrlOrMeta: boolean,
     node: LGraphNode
   ): void {
+    // In Vue nodes mode, Vue components own all node-level interactions
+    // Skip LiteGraph handling to prevent dual event processing
+    if (LiteGraph.vueNodesMode) {
+      return
+    }
+
     const { pointer, graph, linkConnector } = this
     if (!graph) throw new NullGraphError()
 
@@ -2696,7 +2672,7 @@ export class LGraphCanvas
       ): boolean {
         const outputLinks = [
           ...(output.links ?? []),
-          ...[...(output._floatingLinks ?? new Set())]
+          ...(output._floatingLinks ?? new Set())
         ]
         return outputLinks.some(
           (linkId) =>
@@ -2786,7 +2762,7 @@ export class LGraphCanvas
     // Widget
     const widget = node.getWidgetOnPos(x, y)
     if (widget) {
-      this.#processWidgetClick(e, node, widget)
+      this.processWidgetClick(e, node, widget)
       this.node_widget = [node, widget]
     } else {
       // Node background
@@ -2966,13 +2942,12 @@ export class LGraphCanvas
     this.dirty_canvas = true
   }
 
-  #processWidgetClick(
+  processWidgetClick(
     e: CanvasPointerEvent,
     node: LGraphNode,
-    widget: IBaseWidget
+    widget: IBaseWidget,
+    pointer = this.pointer
   ) {
-    const { pointer } = this
-
     // Custom widget - CanvasPointer
     if (typeof widget.onPointerDown === 'function') {
       const handled = widget.onPointerDown(pointer, node, this)
@@ -3853,11 +3828,10 @@ export class LGraphCanvas
    * When called without parameters, it copies {@link selectedItems}.
    * @param items The items to copy.  If nullish, all selected items are copied.
    */
-  copyToClipboard(items?: Iterable<Positionable>): void {
-    localStorage.setItem(
-      'litegrapheditor_clipboard',
-      JSON.stringify(this._serializeItems(items))
-    )
+  copyToClipboard(items?: Iterable<Positionable>): string {
+    const serializedData = JSON.stringify(this._serializeItems(items))
+    localStorage.setItem('litegrapheditor_clipboard', serializedData)
+    return serializedData
   }
 
   emitEvent(detail: LGraphCanvasEventMap['litegraph:canvas']): void {
@@ -3893,6 +3867,7 @@ export class LGraphCanvas
     if (!data) return
     return this._deserializeItems(JSON.parse(data), options)
   }
+
   _deserializeItems(
     parsed: ClipboardItems,
     options: IPasteFromClipboardOptions
@@ -3909,6 +3884,7 @@ export class LGraphCanvas
     const { graph } = this
     if (!graph) throw new NullGraphError()
     graph.beforeChange()
+    this.emitBeforeChange()
 
     // Parse & initialise
     parsed.nodes ??= []
@@ -3948,17 +3924,26 @@ export class LGraphCanvas
     const { created, nodes, links, reroutes } = results
 
     // const failedNodes: ISerialisedNode[] = []
+    const subgraphIdMap: Record<string, string> = {}
+    // SubgraphV2: Remove always-clone behaviour
+    //Update subgraph ids
+    for (const subgraphInfo of parsed.subgraphs)
+      subgraphInfo.id = subgraphIdMap[subgraphInfo.id] = createUuidv4()
+    const allNodeInfo: ISerialisedNode[] = [
+      parsed.nodes ? [parsed.nodes] : [],
+      parsed.subgraphs ? parsed.subgraphs.map((s) => s.nodes ?? []) : []
+    ].flat(2)
+    for (const nodeInfo of allNodeInfo)
+      if (nodeInfo.type in subgraphIdMap)
+        nodeInfo.type = subgraphIdMap[nodeInfo.type]
 
     // Subgraphs
     for (const info of parsed.subgraphs) {
-      // SubgraphV2: Remove always-clone behaviour
-      const originalId = info.id
-      info.id = createUuidv4()
-
       const subgraph = graph.createSubgraph(info)
-      subgraph.configure(info)
-      results.subgraphs.set(originalId, subgraph)
+      results.subgraphs.set(info.id, subgraph)
     }
+    for (const info of parsed.subgraphs)
+      results.subgraphs.get(info.id)?.configure(info)
 
     // Groups
     for (const info of parsed.groups) {
@@ -3970,17 +3955,6 @@ export class LGraphCanvas
       created.push(group)
     }
 
-    // Update subgraph ids with nesting
-    function updateSubgraphIds(nodes: { type: string }[]) {
-      for (const info of nodes) {
-        const subgraph = results.subgraphs.get(info.type)
-        if (!subgraph) continue
-        info.type = subgraph.id
-        updateSubgraphIds(subgraph.nodes)
-      }
-    }
-    updateSubgraphIds(parsed.nodes)
-
     // Nodes
     for (const info of parsed.nodes) {
       const node = info.type == null ? null : LiteGraph.createNode(info.type)
@@ -4078,6 +4052,7 @@ export class LGraphCanvas
     this.selectItems(created)
 
     graph.afterChange()
+    this.emitAfterChange()
 
     return results
   }
@@ -4698,7 +4673,8 @@ export class LGraphCanvas
 
     // info widget
     if (this.show_info) {
-      this.renderInfo(ctx, area ? area[0] : 0, area ? area[1] : 0)
+      const pos = this.fpsInfoLocation ?? area
+      this.renderInfo(ctx, pos?.[0] ?? 0, pos?.[1] ?? 0)
     }
 
     if (graph) {
@@ -4873,9 +4849,9 @@ export class LGraphCanvas
   /** Get the target snap / highlight point in graph space */
   #getHighlightPosition(): Readonly<Point> {
     return LiteGraph.snaps_for_comfy
-      ? this.linkConnector.state.snapLinksPos ??
+      ? (this.linkConnector.state.snapLinksPos ??
           this._highlight_pos ??
-          this.graph_mouse
+          this.graph_mouse)
       : this.graph_mouse
   }
 
@@ -8025,7 +8001,7 @@ export class LGraphCanvas
     }
   }
 
-  getCanvasMenuOptions(): IContextMenuValue<string>[] {
+  getCanvasMenuOptions(): IContextMenuValue[] {
     let options: IContextMenuValue<string>[]
     if (this.getMenuOptions) {
       options = this.getMenuOptions()
diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts
index b0642e469..23326e24f 100644
--- a/src/lib/litegraph/src/LGraphNode.ts
+++ b/src/lib/litegraph/src/LGraphNode.ts
@@ -151,7 +151,7 @@ interface DrawTitleTextOptions extends DrawTitleOptions {
   default_title_color: string
 }
 
-interface DrawTitleBoxOptions extends DrawTitleOptions {
+export interface DrawTitleBoxOptions extends DrawTitleOptions {
   box_size?: number
 }
 
@@ -2467,7 +2467,7 @@ export class LGraphNode
       }
     }
 
-    return doNotUseOccupied ? -1 : occupiedSlot ?? -1
+    return doNotUseOccupied ? -1 : (occupiedSlot ?? -1)
   }
 
   /**
@@ -2569,7 +2569,12 @@ export class LGraphNode
   findInputByType(
     type: ISlotType
   ): { index: number; slot: INodeInputSlot } | undefined {
-    return findFreeSlotOfType(this.inputs, type, (input) => input.link == null)
+    return findFreeSlotOfType(
+      this.inputs,
+      type,
+      (input) =>
+        input.link == null || !!this.graph?.getLink(input.link)?._dragging
+    )
   }
 
   /**
@@ -3680,7 +3685,7 @@ export class LGraphNode
         }
         ctx.font = savedFont // Restore font after button measurements
         if (buttonsWidth > 0) {
-          buttonsWidth += 10 // Extra margin before buttons
+          buttonsWidth -= 20 // Reduce by empty padding
           availableWidth -= buttonsWidth
         }
       }
diff --git a/src/lib/litegraph/src/LLink.ts b/src/lib/litegraph/src/LLink.ts
index 2d7d5122f..2403af36b 100644
--- a/src/lib/litegraph/src/LLink.ts
+++ b/src/lib/litegraph/src/LLink.ts
@@ -312,7 +312,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
     const inputNode =
       this.target_id === -1
         ? undefined
-        : network.getNodeById(this.target_id) ?? undefined
+        : (network.getNodeById(this.target_id) ?? undefined)
     const input = inputNode?.inputs[this.target_slot]
     const subgraphInput = this.originIsIoNode
       ? network.inputNode?.slots[this.origin_slot]
@@ -324,7 +324,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
     const outputNode =
       this.origin_id === -1
         ? undefined
-        : network.getNodeById(this.origin_id) ?? undefined
+        : (network.getNodeById(this.origin_id) ?? undefined)
     const output = outputNode?.outputs[this.origin_slot]
     const subgraphOutput = this.targetIsIoNode
       ? network.outputNode?.slots[this.target_slot]
@@ -418,18 +418,6 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    * If `input` or `output`, reroutes will not be automatically removed, and retain a connection to the input or output, respectively.
    */
   disconnect(network: LinkNetwork, keepReroutes?: 'input' | 'output'): void {
-    // Clean up the target node's input slot
-    if (this.target_id !== -1) {
-      const targetNode = network.getNodeById(this.target_id)
-      if (targetNode) {
-        const targetInput = targetNode.inputs?.[this.target_slot]
-        if (targetInput && targetInput.link === this.id) {
-          targetInput.link = null
-          targetNode.setDirtyCanvas?.(true, false)
-        }
-      }
-    }
-
     const reroutes = LLink.getReroutes(network, this)
 
     const lastReroute = reroutes.at(-1)
diff --git a/src/lib/litegraph/src/Reroute.ts b/src/lib/litegraph/src/Reroute.ts
index 348289709..6436df532 100644
--- a/src/lib/litegraph/src/Reroute.ts
+++ b/src/lib/litegraph/src/Reroute.ts
@@ -51,31 +51,31 @@ export class Reroute
   }
 
   /** The network this reroute belongs to.  Contains all valid links and reroutes. */
-  #network: WeakRef<LinkNetwork>
+  private readonly network: WeakRef<LinkNetwork>
 
-  #parentId?: RerouteId
+  private parentIdInternal?: RerouteId
   public get parentId(): RerouteId | undefined {
-    return this.#parentId
+    return this.parentIdInternal
   }
 
   /** Ignores attempts to create an infinite loop. @inheritdoc */
   public set parentId(value) {
     if (value === this.id) return
     if (this.getReroutes() === null) return
-    this.#parentId = value
+    this.parentIdInternal = value
   }
 
   public get parent(): Reroute | undefined {
-    return this.#network.deref()?.getReroute(this.#parentId)
+    return this.network.deref()?.getReroute(this.parentIdInternal)
   }
 
   /** This property is only defined on the last reroute of a floating reroute chain (closest to input end). */
   floating?: FloatingRerouteSlot
 
-  #pos: Point = [0, 0]
+  private readonly posInternal: Point = [0, 0]
   /** @inheritdoc */
   get pos(): Point {
-    return this.#pos
+    return this.posInternal
   }
 
   set pos(value: Point) {
@@ -83,14 +83,14 @@ export class Reroute
       throw new TypeError(
         'Reroute.pos is an x,y point, and expects an indexable with at least two values.'
       )
-    this.#pos[0] = value[0]
-    this.#pos[1] = value[1]
+    this.posInternal[0] = value[0]
+    this.posInternal[1] = value[1]
   }
 
   /** @inheritdoc */
   get boundingRect(): ReadOnlyRect {
     const { radius } = Reroute
-    const [x, y] = this.#pos
+    const [x, y] = this.posInternal
     return [x - radius, y - radius, 2 * radius, 2 * radius]
   }
 
@@ -98,11 +98,11 @@ export class Reroute
    * Slightly over-sized rectangle, guaranteed to contain the entire surface area for hover detection.
    * Eliminates most hover positions using an extremely cheap check.
    */
-  get #hoverArea(): ReadOnlyRect {
+  private get hoverArea(): ReadOnlyRect {
     const xOffset = 2 * Reroute.slotOffset
     const yOffset = 2 * Math.max(Reroute.radius, Reroute.slotRadius)
 
-    const [x, y] = this.#pos
+    const [x, y] = this.posInternal
     return [x - xOffset, y - yOffset, 2 * xOffset, 2 * yOffset]
   }
 
@@ -149,35 +149,35 @@ export class Reroute
    * Used to ensure reroute angles are only executed once per frame.
    * @todo Calculate on change instead.
    */
-  #lastRenderTime: number = -Infinity
+  private lastRenderTime: number = -Infinity
 
-  #inputSlot = new RerouteSlot(this, true)
-  #outputSlot = new RerouteSlot(this, false)
+  private readonly inputSlot = new RerouteSlot(this, true)
+  private readonly outputSlot = new RerouteSlot(this, false)
 
   get isSlotHovered(): boolean {
     return this.isInputHovered || this.isOutputHovered
   }
 
   get isInputHovered(): boolean {
-    return this.#inputSlot.hovering
+    return this.inputSlot.hovering
   }
 
   get isOutputHovered(): boolean {
-    return this.#outputSlot.hovering
+    return this.outputSlot.hovering
   }
 
   get firstLink(): LLink | undefined {
     const linkId = this.linkIds.values().next().value
     return linkId === undefined
       ? undefined
-      : this.#network.deref()?.links.get(linkId)
+      : this.network.deref()?.links.get(linkId)
   }
 
   get firstFloatingLink(): LLink | undefined {
     const linkId = this.floatingLinkIds.values().next().value
     return linkId === undefined
       ? undefined
-      : this.#network.deref()?.floatingLinks.get(linkId)
+      : this.network.deref()?.floatingLinks.get(linkId)
   }
 
   /** @inheritdoc */
@@ -205,7 +205,7 @@ export class Reroute
     linkIds?: Iterable<LinkId>,
     floatingLinkIds?: Iterable<LinkId>
   ) {
-    this.#network = new WeakRef(network)
+    this.network = new WeakRef(network)
     this.parentId = parentId
     if (pos) this.pos = pos
     this.linkIds = new Set(linkIds)
@@ -261,15 +261,15 @@ export class Reroute
    */
   getReroutes(visited = new Set<Reroute>()): Reroute[] | null {
     // No parentId - last in the chain
-    if (this.#parentId === undefined) return [this]
+    if (this.parentIdInternal === undefined) return [this]
     // Invalid chain - looped
     if (visited.has(this)) return null
     visited.add(this)
 
-    const parent = this.#network.deref()?.reroutes.get(this.#parentId)
+    const parent = this.network.deref()?.reroutes.get(this.parentIdInternal)
     // Invalid parent (or network) - drop silently to recover
     if (!parent) {
-      this.#parentId = undefined
+      this.parentIdInternal = undefined
       return [this]
     }
 
@@ -288,14 +288,14 @@ export class Reroute
     withParentId: RerouteId,
     visited = new Set<Reroute>()
   ): Reroute | null | undefined {
-    if (this.#parentId === withParentId) return this
+    if (this.parentIdInternal === withParentId) return this
     if (visited.has(this)) return null
     visited.add(this)
-    if (this.#parentId === undefined) return
+    if (this.parentIdInternal === undefined) return
 
-    return this.#network
+    return this.network
       .deref()
-      ?.reroutes.get(this.#parentId)
+      ?.reroutes.get(this.parentIdInternal)
       ?.findNextReroute(withParentId, visited)
   }
 
@@ -309,7 +309,7 @@ export class Reroute
     const link = this.firstLink ?? this.firstFloatingLink
     if (!link) return
 
-    const node = this.#network.deref()?.getNodeById(link.origin_id)
+    const node = this.network.deref()?.getNodeById(link.origin_id)
     if (!node) return
 
     return {
@@ -325,7 +325,7 @@ export class Reroute
   findTargetInputs():
     | { node: LGraphNode; input: INodeInputSlot; link: LLink }[]
     | undefined {
-    const network = this.#network.deref()
+    const network = this.network.deref()
     if (!network) return
 
     const results: {
@@ -363,7 +363,7 @@ export class Reroute
    * @returns An array of floating links
    */
   getFloatingLinks(from: 'input' | 'output'): LLink[] | undefined {
-    const floatingLinks = this.#network.deref()?.floatingLinks
+    const floatingLinks = this.network.deref()?.floatingLinks
     if (!floatingLinks) return
 
     const idProp = from === 'input' ? 'origin_id' : 'target_id'
@@ -387,7 +387,7 @@ export class Reroute
     output: INodeOutputSlot,
     index: number
   ) {
-    const network = this.#network.deref()
+    const network = this.network.deref()
     const floatingOutLinks = this.getFloatingLinks('output')
     if (!floatingOutLinks)
       throw new Error('[setFloatingLinkOrigin]: Invalid network.')
@@ -411,15 +411,15 @@ export class Reroute
 
   /** @inheritdoc */
   move(deltaX: number, deltaY: number) {
-    const previousPos = { x: this.#pos[0], y: this.#pos[1] }
-    this.#pos[0] += deltaX
-    this.#pos[1] += deltaY
+    const previousPos = { x: this.posInternal[0], y: this.posInternal[1] }
+    this.posInternal[0] += deltaX
+    this.posInternal[1] += deltaY
 
     // Update Layout Store with new position
     layoutMutations.setSource(LayoutSource.Canvas)
     layoutMutations.moveReroute(
       this.id,
-      { x: this.#pos[0], y: this.#pos[1] },
+      { x: this.posInternal[0], y: this.posInternal[1] },
       previousPos
     )
   }
@@ -441,7 +441,7 @@ export class Reroute
   }
 
   removeFloatingLink(linkId: LinkId) {
-    const network = this.#network.deref()
+    const network = this.network.deref()
     if (!network) return
 
     const floatingLink = network.floatingLinks.get(linkId)
@@ -462,7 +462,7 @@ export class Reroute
    * @remarks Does not remove the link from the network.
    */
   removeLink(link: LLink) {
-    const network = this.#network.deref()
+    const network = this.network.deref()
     if (!network) return
 
     const floatingLink = network.floatingLinks.get(link.id)
@@ -474,7 +474,7 @@ export class Reroute
   }
 
   remove() {
-    const network = this.#network.deref()
+    const network = this.network.deref()
     if (!network) return
 
     network.removeReroute(this.id)
@@ -486,8 +486,8 @@ export class Reroute
     linkStart: Point
   ): void {
     // Ensure we run once per render
-    if (!(lastRenderTime > this.#lastRenderTime)) return
-    this.#lastRenderTime = lastRenderTime
+    if (!(lastRenderTime > this.lastRenderTime)) return
+    this.lastRenderTime = lastRenderTime
 
     const { id, pos: thisPos } = this
 
@@ -509,14 +509,14 @@ export class Reroute
     sum /= angles.length
 
     const originToReroute = Math.atan2(
-      this.#pos[1] - linkStart[1],
-      this.#pos[0] - linkStart[0]
+      this.posInternal[1] - linkStart[1],
+      this.posInternal[0] - linkStart[0]
     )
     let diff = (originToReroute - sum) * 0.5
     if (Math.abs(diff) > Math.PI * 0.5) diff += Math.PI
     const dist = Math.min(
       Reroute.maxSplineOffset,
-      distance(linkStart, this.#pos) * 0.25
+      distance(linkStart, this.posInternal) * 0.25
     )
 
     // Store results
@@ -604,8 +604,8 @@ export class Reroute
    * @param ctx The canvas context to draw on.
    */
   drawSlots(ctx: CanvasRenderingContext2D): void {
-    this.#inputSlot.draw(ctx)
-    this.#outputSlot.draw(ctx)
+    this.inputSlot.draw(ctx)
+    this.outputSlot.draw(ctx)
   }
 
   drawHighlight(ctx: CanvasRenderingContext2D, colour: CanvasColour): void {
@@ -629,8 +629,8 @@ export class Reroute
    * @returns `true` if any changes require a redraw.
    */
   updateVisibility(pos: Point): boolean {
-    const input = this.#inputSlot
-    const output = this.#outputSlot
+    const input = this.inputSlot
+    const output = this.outputSlot
     input.dirty = false
     output.dirty = false
 
@@ -642,8 +642,8 @@ export class Reroute
     const showEither = showInput || showOutput
 
     // Check if even in the vicinity
-    if (showEither && isPointInRect(pos, this.#hoverArea)) {
-      const outlineOnly = this.#contains(pos)
+    if (showEither && isPointInRect(pos, this.hoverArea)) {
+      const outlineOnly = this.contains(pos)
 
       if (showInput) input.update(pos, outlineOnly)
       if (showOutput) output.update(pos, outlineOnly)
@@ -656,8 +656,8 @@ export class Reroute
 
   /** Prevents rendering of the input and output slots. */
   hideSlots() {
-    this.#inputSlot.hide()
-    this.#outputSlot.hide()
+    this.inputSlot.hide()
+    this.outputSlot.hide()
   }
 
   /**
@@ -666,10 +666,10 @@ export class Reroute
    * @returns `true` if {@link pos} is within the reroute's radius.
    */
   containsPoint(pos: Point): boolean {
-    return isPointInRect(pos, this.#hoverArea) && this.#contains(pos)
+    return isPointInRect(pos, this.hoverArea) && this.contains(pos)
   }
 
-  #contains(pos: Point): boolean {
+  private contains(pos: Point): boolean {
     return distance(this.pos, pos) <= Reroute.radius
   }
 
@@ -692,47 +692,47 @@ export class Reroute
  */
 class RerouteSlot {
   /** The reroute that the slot belongs to. */
-  readonly #reroute: Reroute
+  private readonly reroute: Reroute
 
-  readonly #offsetMultiplier: 1 | -1
+  private readonly offsetMultiplier: 1 | -1
   /** Centre point of this slot. */
   get pos(): Point {
-    const [x, y] = this.#reroute.pos
-    return [x + Reroute.slotOffset * this.#offsetMultiplier, y]
+    const [x, y] = this.reroute.pos
+    return [x + Reroute.slotOffset * this.offsetMultiplier, y]
   }
 
   /** Whether any changes require a redraw. */
   dirty: boolean = false
 
-  #hovering = false
+  private hoveringInternal = false
   /** Whether the pointer is hovering over the slot itself. */
   get hovering() {
-    return this.#hovering
+    return this.hoveringInternal
   }
 
   set hovering(value) {
-    if (!Object.is(this.#hovering, value)) {
-      this.#hovering = value
+    if (!Object.is(this.hoveringInternal, value)) {
+      this.hoveringInternal = value
       this.dirty = true
     }
   }
 
-  #showOutline = false
+  private showOutlineInternal = false
   /** Whether the slot outline / faint background is visible. */
   get showOutline() {
-    return this.#showOutline
+    return this.showOutlineInternal
   }
 
   set showOutline(value) {
-    if (!Object.is(this.#showOutline, value)) {
-      this.#showOutline = value
+    if (!Object.is(this.showOutlineInternal, value)) {
+      this.showOutlineInternal = value
       this.dirty = true
     }
   }
 
   constructor(reroute: Reroute, isInput: boolean) {
-    this.#reroute = reroute
-    this.#offsetMultiplier = isInput ? -1 : 1
+    this.reroute = reroute
+    this.offsetMultiplier = isInput ? -1 : 1
   }
 
   /**
@@ -771,7 +771,7 @@ class RerouteSlot {
     if (!showOutline) return
 
     try {
-      ctx.fillStyle = hovering ? this.#reroute.colour : 'rgba(127,127,127,0.3)'
+      ctx.fillStyle = hovering ? this.reroute.colour : 'rgba(127,127,127,0.3)'
       ctx.strokeStyle = 'rgb(0,0,0,0.5)'
       ctx.lineWidth = 1
 
diff --git a/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts b/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts
index f056ef687..e98c59d87 100644
--- a/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts
+++ b/src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts
@@ -137,7 +137,9 @@ export class ToInputFromIoNodeLink implements RenderLink {
   }
   disconnect(): boolean {
     if (!this.existingLink) return false
-    this.existingLink.disconnect(this.network, 'input')
+    const { input, inputNode } = this.existingLink.resolve(this.network)
+    if (!inputNode || !input) return false
+    this.node._disconnectNodeInput(inputNode, input, this.existingLink)
     return true
   }
 }
diff --git a/src/lib/litegraph/src/contextMenuCompat.ts b/src/lib/litegraph/src/contextMenuCompat.ts
new file mode 100644
index 000000000..5d2cd09ad
--- /dev/null
+++ b/src/lib/litegraph/src/contextMenuCompat.ts
@@ -0,0 +1,148 @@
+import type { LGraphCanvas } from './LGraphCanvas'
+import type { IContextMenuValue } from './interfaces'
+
+/**
+ * Simple compatibility layer for legacy getCanvasMenuOptions and getNodeMenuOptions monkey patches.
+ * To disable legacy support, set ENABLE_LEGACY_SUPPORT = false
+ */
+const ENABLE_LEGACY_SUPPORT = true
+
+type ContextMenuValueProvider = (...args: unknown[]) => IContextMenuValue[]
+
+class LegacyMenuCompat {
+  private originalMethods = new Map<string, ContextMenuValueProvider>()
+  private hasWarned = new Set<string>()
+  private currentExtension: string | null = null
+  private isExtracting = false
+  private readonly wrapperMethods = new Map<string, ContextMenuValueProvider>()
+  private readonly preWrapperMethods = new Map<
+    string,
+    ContextMenuValueProvider
+  >()
+  private readonly wrapperInstalled = new Map<string, boolean>()
+
+  /**
+   * Set the name of the extension that is currently being set up.
+   * This allows us to track which extension is monkey-patching.
+   * @param extensionName The name of the extension
+   */
+  setCurrentExtension(extensionName: string | null) {
+    this.currentExtension = extensionName
+  }
+
+  /**
+   * Register a wrapper method that should NOT be treated as a legacy monkey-patch.
+   * @param methodName The method name
+   * @param wrapperFn The wrapper function
+   * @param preWrapperFn The method that existed before the wrapper
+   * @param prototype The prototype to verify wrapper installation
+   */
+  registerWrapper(
+    methodName: keyof LGraphCanvas,
+    wrapperFn: ContextMenuValueProvider,
+    preWrapperFn: ContextMenuValueProvider,
+    prototype?: LGraphCanvas
+  ) {
+    this.wrapperMethods.set(methodName, wrapperFn)
+    this.preWrapperMethods.set(methodName, preWrapperFn)
+    const isInstalled = prototype && prototype[methodName] === wrapperFn
+    this.wrapperInstalled.set(methodName, !!isInstalled)
+  }
+
+  /**
+   * Install compatibility layer to detect monkey-patching
+   * @param prototype The prototype to install on
+   * @param methodName The method name to track
+   */
+  install(prototype: LGraphCanvas, methodName: keyof LGraphCanvas) {
+    if (!ENABLE_LEGACY_SUPPORT) return
+
+    const originalMethod = prototype[methodName]
+    this.originalMethods.set(methodName, originalMethod)
+
+    let currentImpl = originalMethod
+
+    Object.defineProperty(prototype, methodName, {
+      get() {
+        return currentImpl
+      },
+      set: (newImpl: ContextMenuValueProvider) => {
+        const fnKey = `${methodName}:${newImpl.toString().slice(0, 100)}`
+        if (!this.hasWarned.has(fnKey) && this.currentExtension) {
+          this.hasWarned.add(fnKey)
+
+          console.warn(
+            `%c[DEPRECATED]%c Monkey-patching ${methodName} is deprecated. (Extension: "${this.currentExtension}")\n` +
+              `Please use the new context menu API instead.\n\n` +
+              `See: https://docs.comfy.org/custom-nodes/js/context-menu-migration`,
+            'color: orange; font-weight: bold',
+            'color: inherit'
+          )
+        }
+        currentImpl = newImpl
+      }
+    })
+  }
+
+  /**
+   * Extract items that were added by legacy monkey patches
+   * @param methodName The method name that was monkey-patched
+   * @param context The context to call methods with
+   * @param args Arguments to pass to the methods
+   * @returns Array of menu items added by monkey patches
+   */
+  extractLegacyItems(
+    methodName: keyof LGraphCanvas,
+    context: LGraphCanvas,
+    ...args: unknown[]
+  ): IContextMenuValue[] {
+    if (!ENABLE_LEGACY_SUPPORT) return []
+    if (this.isExtracting) return []
+
+    const originalMethod = this.originalMethods.get(methodName)
+    if (!originalMethod) return []
+
+    try {
+      this.isExtracting = true
+
+      const originalItems = originalMethod.apply(context, args) as
+        | IContextMenuValue[]
+        | undefined
+      if (!originalItems) return []
+
+      const currentMethod = context.constructor.prototype[methodName]
+      if (!currentMethod || currentMethod === originalMethod) return []
+
+      const registeredWrapper = this.wrapperMethods.get(methodName)
+      if (registeredWrapper && currentMethod === registeredWrapper) return []
+
+      const preWrapperMethod = this.preWrapperMethods.get(methodName)
+      const wrapperWasInstalled = this.wrapperInstalled.get(methodName)
+
+      const shouldSkipWrapper =
+        preWrapperMethod &&
+        wrapperWasInstalled &&
+        currentMethod !== preWrapperMethod
+
+      const methodToCall = shouldSkipWrapper ? preWrapperMethod : currentMethod
+
+      const patchedItems = methodToCall.apply(context, args) as
+        | IContextMenuValue[]
+        | undefined
+      if (!patchedItems) return []
+
+      if (patchedItems.length > originalItems.length) {
+        return patchedItems.slice(originalItems.length) as IContextMenuValue[]
+      }
+
+      return []
+    } catch (e) {
+      console.error('[Context Menu Compat] Failed to extract legacy items:', e)
+      return []
+    } finally {
+      this.isExtracting = false
+    }
+  }
+}
+
+export const legacyMenuCompat = new LegacyMenuCompat()
diff --git a/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts b/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts
index 1c25e862c..ff226c4df 100644
--- a/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts
+++ b/src/lib/litegraph/src/infrastructure/LGraphCanvasEventMap.ts
@@ -21,6 +21,11 @@ export interface LGraphCanvasEventMap {
     fromNode: SubgraphNode
   }
 
+  /** Dispatched after a group of items has been converted to a subgraph*/
+  'subgraph-converted': {
+    subgraphNode: SubgraphNode
+  }
+
   'litegraph:canvas':
     | { subType: 'before-change' | 'after-change' }
     | {
diff --git a/src/lib/litegraph/src/interfaces.ts b/src/lib/litegraph/src/interfaces.ts
index f4b4888b9..3ab56a112 100644
--- a/src/lib/litegraph/src/interfaces.ts
+++ b/src/lib/litegraph/src/interfaces.ts
@@ -393,7 +393,7 @@ export interface IContextMenuOptions<TValue = unknown, TExtra = unknown>
     event?: MouseEvent,
     previous_menu?: ContextMenu<TValue>,
     extra?: unknown
-  ): void | boolean
+  ): void | boolean | Promise<void | boolean>
 }
 
 export interface IContextMenuValue<
@@ -416,7 +416,7 @@ export interface IContextMenuValue<
     event?: MouseEvent,
     previous_menu?: ContextMenu<TValue>,
     extra?: TExtra
-  ): void | boolean
+  ): void | boolean | Promise<void | boolean>
 }
 
 interface IContextMenuSubmenu<TValue = unknown>
diff --git a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
index f041376f6..2dea0ebcd 100644
--- a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
+++ b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
@@ -294,25 +294,21 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
       // Fallback check for nodes performing link redirection
       const virtualLink = this.node.getInputLink(slot)
       if (virtualLink) {
-        const outputNode = this.graph.getNodeById(virtualLink.origin_id)
-        if (!outputNode)
+        const { inputNode } = virtualLink.resolve(this.graph)
+        if (!inputNode)
           throw new InvalidLinkError(
             `Virtual node failed to resolve parent [${this.id}] slot [${slot}]`
           )
 
-        const outputNodeExecutionId = [
+        const inputNodeExecutionId = [
           ...this.subgraphNodePath,
-          outputNode.id
+          inputNode.id
         ].join(':')
-        const outputNodeDto = this.nodesByExecutionId.get(outputNodeExecutionId)
-        if (!outputNodeDto)
-          throw new Error(`No output node DTO found for id [${outputNode.id}]`)
+        const inputNodeDto = this.nodesByExecutionId.get(inputNodeExecutionId)
+        if (!inputNodeDto)
+          throw new Error(`No input node DTO found for id [${inputNode.id}]`)
 
-        return outputNodeDto.resolveOutput(
-          virtualLink.origin_slot,
-          type,
-          visited
-        )
+        return inputNodeDto.resolveInput(virtualLink.target_slot, visited, type)
       }
 
       // Virtual nodes without a matching input should be discarded.
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
index 216448f99..cb0b10200 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
@@ -2,6 +2,7 @@ import type { BaseLGraph, LGraph } from '@/lib/litegraph/src/LGraph'
 import type { LGraphButton } from '@/lib/litegraph/src/LGraphButton'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { DrawTitleBoxOptions } from '@/lib/litegraph/src/LGraphNode'
 import { LLink } from '@/lib/litegraph/src/LLink'
 import type { ResolvedConnection } from '@/lib/litegraph/src/LLink'
 import { RecursionError } from '@/lib/litegraph/src/infrastructure/RecursionError'
@@ -9,6 +10,7 @@ import type {
   ISubgraphInput,
   IWidgetLocator
 } from '@/lib/litegraph/src/interfaces'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type {
   INodeInputSlot,
   ISlotType,
@@ -32,6 +34,10 @@ import { ExecutableNodeDTO } from './ExecutableNodeDTO'
 import type { ExecutableLGraphNode, ExecutionId } from './ExecutableNodeDTO'
 import type { SubgraphInput } from './SubgraphInput'
 
+const workflowSvg = new Image()
+workflowSvg.src =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-width='1.3' d='M9.18613 3.09999H6.81377M9.18613 12.9H7.55288c-3.08678 0-5.35171-2.99581-4.60305-6.08843l.3054-1.26158M14.7486 2.1721l-.5931 2.45c-.132.54533-.6065.92789-1.1508.92789h-2.2993c-.77173 0-1.33797-.74895-1.1508-1.5221l.5931-2.45c.132-.54533.6065-.9279 1.1508-.9279h2.2993c.7717 0 1.3379.74896 1.1508 1.52211Zm-8.3033 0-.59309 2.45c-.13201.54533-.60646.92789-1.15076.92789H2.4021c-.7717 0-1.33793-.74895-1.15077-1.5221l.59309-2.45c.13201-.54533.60647-.9279 1.15077-.9279h2.29935c.77169 0 1.33792.74896 1.15076 1.52211Zm8.3033 9.8-.5931 2.45c-.132.5453-.6065.9279-1.1508.9279h-2.2993c-.77173 0-1.33797-.749-1.1508-1.5221l.5931-2.45c.132-.5453.6065-.9279 1.1508-.9279h2.2993c.7717 0 1.3379.7489 1.1508 1.5221Z'/%3E%3C/svg%3E %3C/svg%3E"
+
 /**
  * An instance of a {@link Subgraph}, displayed as a node on the containing (parent) graph.
  */
@@ -540,6 +546,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
     // Clean up all promoted widgets
     for (const widget of this.widgets) {
+      if ('isProxyWidget' in widget && widget.isProxyWidget) continue
       this.subgraph.events.dispatch('widget-demoted', {
         widget,
         subgraphNode: this
@@ -555,6 +562,31 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
       }
     }
   }
+  override drawTitleBox(
+    ctx: CanvasRenderingContext2D,
+    {
+      scale,
+      low_quality = false,
+      title_height = LiteGraph.NODE_TITLE_HEIGHT,
+      box_size = 10
+    }: DrawTitleBoxOptions
+  ): void {
+    if (this.onDrawTitleBox) {
+      this.onDrawTitleBox(ctx, title_height, this.renderingSize, scale)
+      return
+    }
+    ctx.save()
+    ctx.fillStyle = '#3b82f6'
+    ctx.beginPath()
+    ctx.roundRect(6, -24.5, 22, 20, 5)
+    ctx.fill()
+    if (!low_quality) {
+      ctx.translate(25, 23)
+      ctx.scale(-1.5, 1.5)
+      ctx.drawImage(workflowSvg, 0, -title_height, box_size, box_size)
+    }
+    ctx.restore()
+  }
 
   /**
    * Synchronizes widget values from this SubgraphNode instance to the
@@ -587,4 +619,17 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     // Call parent serialize method
     return super.serialize()
   }
+  override clone() {
+    const clone = super.clone()
+    // force reasign so domWidgets reset ownership
+    // eslint-disable-next-line  no-self-assign
+    this.properties.proxyWidgets = this.properties.proxyWidgets
+
+    //TODO: Consider deep cloning subgraphs here.
+    //It's the safest place to prevent creation of linked subgraphs
+    //But the frequency of clone().serialize() calls is likely to result in
+    //pollution of rootGraph.subgraphs
+
+    return clone
+  }
 }
diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts
index 02111acef..5bdbc7dcb 100644
--- a/src/lib/litegraph/src/types/widgets.ts
+++ b/src/lib/litegraph/src/types/widgets.ts
@@ -79,7 +79,6 @@ export type IWidget =
   | ISelectButtonWidget
   | ITextareaWidget
   | IAssetWidget
-  | IAudioRecordWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -228,11 +227,6 @@ export interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
   value: string
 }
 
-export interface IAudioRecordWidget extends IBaseWidget<string, 'audiorecord'> {
-  type: 'audiorecord'
-  value: string
-}
-
 export interface IAssetWidget
   extends IBaseWidget<string, 'asset', IWidgetOptions<string[]>> {
   type: 'asset'
@@ -363,6 +357,14 @@ export interface IBaseWidget<
     lowQuality?: boolean
   ): void
 
+  /**
+   * Compatibility method for widgets implementing the draw
+   * method when displayed in non-canvas renderers.
+   * Set by the current renderer implementation.
+   * When called, performs a draw operation.
+   */
+  triggerDraw?: () => void
+
   /**
    * Compute the size of the widget. Overrides {@link IBaseWidget.computeSize}.
    * @param width The width of the widget.
diff --git a/src/lib/litegraph/src/widgets/BaseWidget.ts b/src/lib/litegraph/src/widgets/BaseWidget.ts
index 966a6f486..b5fc11984 100644
--- a/src/lib/litegraph/src/widgets/BaseWidget.ts
+++ b/src/lib/litegraph/src/widgets/BaseWidget.ts
@@ -140,6 +140,7 @@ export abstract class BaseWidget<TWidget extends IBaseWidget = IBaseWidget>
       displayValue,
       // @ts-expect-error Prevent naming conflicts with custom nodes.
       labelBaseline,
+      promoted,
       ...safeValues
     } = widget
 
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 58da8a575..2e8f964f8 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -693,7 +693,6 @@
       "perspective": "منظور"
     },
     "clearRecording": "مسح التسجيل",
-    "edgeThreshold": "عتبة الحواف",
     "export": "تصدير",
     "exportModel": "تصدير النموذج",
     "exportRecording": "تصدير التسجيل",
@@ -706,7 +705,6 @@
     "materialMode": "وضع المادة",
     "materialModes": {
       "depth": "العمق",
-      "lineart": "رسم الخطوط",
       "normal": "عادي",
       "original": "أصلي",
       "wireframe": "إطار سلكي"
@@ -1526,310 +1524,6 @@
       "searchPlaceholder": "بحث..."
     },
     "sorting": "ترتيب حسب",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin: من صورة إلى نموذج",
-        "api_rodin_multiview_to_model": "Rodin: من عدة زوايا إلى نموذج",
-        "api_tripo_image_to_model": "Tripo: من صورة إلى نموذج",
-        "api_tripo_multiview_to_model": "Tripo: من عدة زوايا إلى نموذج",
-        "api_tripo_text_to_model": "Tripo: من نص إلى نموذج"
-      },
-      "Area Composition": {
-        "area_composition": "تكوين المناطق",
-        "area_composition_square_area_for_subject": "تكوين المناطق - مربع الموضوع"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE-Step v1 تحرير M2M",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 من نص إلى موسيقى آلية",
-        "audio_ace_step_1_t2a_song": "ACE-Step v1 من نص إلى أغنية",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "توليد الصور",
-        "embedding_example": "تضمين",
-        "gligen_textbox_example": "صندوق نص Gligen",
-        "image2image": "صورة إلى صورة",
-        "inpaint_example": "إعادة التلوين",
-        "inpaint_model_outpainting": "التوسيع",
-        "lora": "LoRA",
-        "lora_multiple": "عدة LoRA"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "ControlNet الوضعية مرورين",
-        "controlnet_example": "ControlNet الرسومات التخطيطية",
-        "depth_controlnet": "ControlNet العمق",
-        "depth_t2i_adapter": "محول T2I للعمق",
-        "mixing_controlnets": "دمج ControlNet"
-      },
-      "Flux": {
-        "flux_canny_model_example": "نموذج Flux كاني",
-        "flux_depth_lora_example": "عمق Flux LoRA",
-        "flux_dev_checkpoint_example": "Flux تطوير fp8",
-        "flux_dev_full_text_to_image": "Flux تطوير كامل من نص إلى صورة",
-        "flux_fill_inpaint_example": "Flux إعادة تلوين",
-        "flux_fill_outpaint_example": "Flux توسيع",
-        "flux_kontext_dev_basic": "Flux Kontext تطوير (أساسي)",
-        "flux_kontext_dev_grouped": "Flux Kontext تطوير (مجموعات)",
-        "flux_redux_model_example": "نموذج Flux Redux",
-        "flux_schnell": "Flux سريع fp8",
-        "flux_schnell_full_text_to_image": "Flux سريع كامل من نص إلى صورة"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 كامل",
-        "hidream_i1_dev": "HiDream I1 تطوير",
-        "hidream_i1_fast": "HiDream I1 سريع",
-        "hidream_i1_full": "HiDream I1 كامل",
-        "image_chroma_text_to_image": "Chroma من نص إلى صورة",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B من نص إلى صورة",
-        "image_lotus_depth_v1_1": "Lotus عمق",
-        "image_omnigen2_image_edit": "OmniGen2 تعديل الصور",
-        "image_omnigen2_t2i": "OmniGen2 من نص إلى صورة",
-        "sd3_5_large_blur": "SD3.5 ضباب كبير",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 كاني كبير مع ControlNet",
-        "sd3_5_large_depth": "SD3.5 عمق كبير",
-        "sd3_5_simple_example": "SD3.5 بسيط",
-        "sdxl_refiner_prompt_example": "SDXL تحسين العبارات",
-        "sdxl_revision_text_prompts": "SDXL مراجعة العبارات النصية",
-        "sdxl_revision_zero_positive": "SDXL مراجعة صفر إيجابي",
-        "sdxl_simple_example": "SDXL بسيط",
-        "sdxlturbo_example": "SDXL Turbo"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext ماكس",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext إدخال صور متعددة",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext برو",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]: من نص إلى صورة",
-        "api_ideogram_v3_t2i": "Ideogram V3: من نص إلى صورة",
-        "api_luma_photon_i2i": "Luma Photon: من صورة إلى صورة",
-        "api_luma_photon_style_ref": "Luma Photon: مرجع الأسلوب",
-        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 إعادة التلوين",
-        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 من نص إلى صورة",
-        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 من نص إلى صورة",
-        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 من صورة إلى صورة",
-        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 إعادة التلوين",
-        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 مدخلات متعددة",
-        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 من نص إلى صورة",
-        "api_recraft_image_gen_with_color_control": "Recraft: توليد الصور مع تحكم اللون",
-        "api_recraft_image_gen_with_style_control": "Recraft: توليد الصور مع تحكم الأسلوب",
-        "api_recraft_vector_gen": "Recraft: توليد المتجهات",
-        "api_runway_reference_to_image": "Runway: من مرجع إلى صورة",
-        "api_runway_text_to_image": "Runway: من نص إلى صورة",
-        "api_stability_ai_i2i": "Stability AI: من صورة إلى صورة",
-        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 من صورة إلى صورة",
-        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 من نص إلى صورة",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: صورة مستقرة ألترا من نص إلى صورة"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini: محادثة",
-        "api_openai_chat": "OpenAI: محادثة"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGAN سير العمل",
-        "hiresfix_latent_workflow": "تكبير",
-        "latent_upscale_different_prompt_model": "تكبير كامن مع نموذج عبارات مختلف"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan فيديو نص إلى فيديو",
-        "image_to_video": "SVD من صورة إلى فيديو",
-        "image_to_video_wan": "Wan 2.1 من صورة إلى فيديو",
-        "ltxv_image_to_video": "LTXV من صورة إلى فيديو",
-        "ltxv_text_to_video": "LTXV من نص إلى فيديو",
-        "mochi_text_to_video_example": "Mochi من نص إلى فيديو",
-        "text_to_video_wan": "Wan 2.1 من نص إلى فيديو",
-        "txt_to_image_to_video": "SVD من نص إلى صورة إلى فيديو",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B فيديو إلى العالم 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 كاميرا ممتعة 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 كاميرا ممتعة 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE من المرجع إلى فيديو",
-        "video_wan_vace_14B_t2v": "Wan VACE من نص إلى فيديو",
-        "video_wan_vace_14B_v2v": "Wan VACE فيديو تحكم",
-        "video_wan_vace_flf2v": "Wan VACE الإطار الأول والأخير",
-        "video_wan_vace_inpainting": "Wan VACE إعادة التلوين الداخلي",
-        "video_wan_vace_outpainting": "Wan VACE التوسيع الخارجي",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 تحكم نت",
-        "wan2_1_fun_inp": "Wan 2.1 إعادة التلوين"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax: من صورة إلى فيديو",
-        "api_hailuo_minimax_t2v": "MiniMax: من نص إلى فيديو",
-        "api_kling_effects": "Kling: تأثيرات الفيديو",
-        "api_kling_flf": "Kling: FLF2V",
-        "api_kling_i2v": "Kling: من صورة إلى فيديو",
-        "api_luma_i2v": "Luma: من صورة إلى فيديو",
-        "api_luma_t2v": "Luma: من نص إلى فيديو",
-        "api_moonvalley_image_to_video": "Moonvalley: من صورة إلى فيديو",
-        "api_moonvalley_text_to_video": "Moonvalley: من نص إلى فيديو",
-        "api_pika_i2v": "Pika: من صورة إلى فيديو",
-        "api_pika_scene": "Pika المشاهد: من صور إلى فيديو",
-        "api_pixverse_i2v": "PixVerse: من صورة إلى فيديو",
-        "api_pixverse_t2v": "PixVerse: من نص إلى فيديو",
-        "api_pixverse_template_i2v": "PixVerse القوالب: من صورة إلى فيديو",
-        "api_runway_first_last_frame": "Runway: الإطار الأول والأخير إلى فيديو",
-        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo من صورة إلى فيديو",
-        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo من صورة إلى فيديو",
-        "api_veo2_i2v": "Veo2: من صورة إلى فيديو"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "إنشاء نماذج ثلاثية الأبعاد من صور فردية باستخدام Hunyuan3D 2.0.",
-        "3d_hunyuan3d_multiview_to_model": "إنشاء نماذج ثلاثية الأبعاد من عدة زوايا باستخدام Hunyuan3D 2.0 MV.",
-        "3d_hunyuan3d_multiview_to_model_turbo": "إنشاء نماذج ثلاثية الأبعاد من عدة زوايا باستخدام Hunyuan3D 2.0 MV Turbo.",
-        "stable_zero123_example": "إنشاء مشاهد ثلاثية الأبعاد من صور فردية باستخدام Stable Zero123."
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "إنشاء نماذج ثلاثية الأبعاد مفصلة من صور فردية باستخدام Rodin AI.",
-        "api_rodin_multiview_to_model": "نحت نماذج ثلاثية الأبعاد شاملة باستخدام إعادة بناء متعددة الزوايا من Rodin.",
-        "api_tripo_image_to_model": "إنشاء أصول ثلاثية الأبعاد احترافية من صور ثنائية الأبعاد باستخدام محرك Tripo.",
-        "api_tripo_multiview_to_model": "بناء نماذج ثلاثية الأبعاد من عدة زوايا باستخدام ماسح Tripo المتقدم.",
-        "api_tripo_text_to_model": "تصميم أشياء ثلاثية الأبعاد من الوصف النصي باستخدام نمذجة Tripo المدفوعة بالنص."
-      },
-      "Area Composition": {
-        "area_composition": "إنشاء صور عبر التحكم في التكوين ضمن مناطق محددة.",
-        "area_composition_square_area_for_subject": "إنشاء صور بوضع ثابت للموضوع باستخدام تكوين المناطق."
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "تحرير الأغاني الموجودة لتغيير الأسلوب والكلمات باستخدام ACE-Step v1 M2M.",
-        "audio_ace_step_1_t2a_instrumentals": "إنشاء موسيقى آلية من نصوص باستخدام ACE-Step v1.",
-        "audio_ace_step_1_t2a_song": "إنشاء أغاني بصوت غنائي من نصوص مع دعم التعدد اللغوي وتخصيص الأسلوب باستخدام ACE-Step v1.",
-        "audio_stable_audio_example": "إنشاء صوت من نصوص باستخدام Stable Audio."
-      },
-      "Basics": {
-        "default": "إنشاء صور من نصوص الإرشادات.",
-        "embedding_example": "إنشاء صور باستخدام الانعكاس النصي لأنماط متسقة.",
-        "gligen_textbox_example": "إنشاء صور مع وضع دقيق للأشياء باستخدام مربعات النص.",
-        "image2image": "تحويل الصور الموجودة باستخدام نصوص الإرشادات.",
-        "inpaint_example": "تعديل أجزاء محددة من الصور بسلاسة.",
-        "inpaint_model_outpainting": "تمديد الصور خارج حدودها الأصلية.",
-        "lora": "إنشاء صور باستخدام نماذج LoRA لأنماط أو مواضيع متخصصة.",
-        "lora_multiple": "إنشاء صور عبر دمج عدة نماذج LoRA."
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "إنشاء صور موجهة بإشارات وضعية باستخدام ControlNet.",
-        "controlnet_example": "إنشاء صور موجهة برموز مرجعية مرسومة باستخدام ControlNet.",
-        "depth_controlnet": "إنشاء صور موجهة بمعلومات العمق باستخدام ControlNet.",
-        "depth_t2i_adapter": "إنشاء صور موجهة بمعلومات العمق باستخدام محول T2I.",
-        "mixing_controlnets": "إنشاء صور بدمج عدة نماذج ControlNet."
-      },
-      "Flux": {
-        "flux_canny_model_example": "إنشاء صور موجهة بالكشف عن الحواف باستخدام Flux Canny.",
-        "flux_depth_lora_example": "إنشاء صور موجهة بمعلومات العمق باستخدام Flux LoRA.",
-        "flux_dev_checkpoint_example": "إنشاء صور باستخدام نسخة Flux Dev fp8 المضغوطة. مناسبة لأجهزة ذات VRAM محدود، تتطلب ملف نموذج واحد فقط، لكن جودة الصورة أقل قليلاً من النسخة الكاملة.",
-        "flux_dev_full_text_to_image": "إنشاء صور عالية الجودة مع نسخة Flux Dev الكاملة. تحتاج VRAM أكبر وعدة ملفات نموذج، لكنها توفر أفضل قدرة على اتباع النص وجودة الصور.",
-        "flux_fill_inpaint_example": "ملء أجزاء مفقودة من الصور باستخدام Flux inpainting.",
-        "flux_fill_outpaint_example": "تمديد الصور خارج الحدود باستخدام Flux outpainting.",
-        "flux_kontext_dev_basic": "تعديل الصور باستخدام Flux Kontext مع رؤية كاملة للعُقد، مثالي لتعلم سير العمل.",
-        "flux_kontext_dev_grouped": "نسخة مبسطة من Flux Kontext مع عُقد مجمعة لمساحة عمل أنظف.",
-        "flux_redux_model_example": "إنشاء صور عبر نقل الأسلوب من صور مرجعية باستخدام Flux Redux.",
-        "flux_schnell": "إنشاء صور بسرعة مع نسخة Flux Schnell fp8 المضغوطة. مثالية للأجهزة منخفضة الأداء، تتطلب 4 خطوات فقط لإنشاء الصور.",
-        "flux_schnell_full_text_to_image": "إنشاء صور بسرعة مع نسخة Flux Schnell الكاملة. تستخدم ترخيص Apache2.0، تحتاج 4 خطوات فقط مع جودة صور جيدة."
-      },
-      "Image": {
-        "hidream_e1_full": "تحرير الصور مع HiDream E1 - نموذج احترافي لتحرير الصور باستخدام اللغة الطبيعية.",
-        "hidream_i1_dev": "إنشاء صور مع HiDream I1 Dev - نسخة متوازنة مع 28 خطوة استدلال، مناسبة لأجهزة متوسطة الأداء.",
-        "hidream_i1_fast": "إنشاء صور بسرعة مع HiDream I1 Fast - نسخة خفيفة مع 16 خطوة استدلال، مثالية للمعاينات السريعة على أجهزة منخفضة الأداء.",
-        "hidream_i1_full": "إنشاء صور مع HiDream I1 Full - نسخة كاملة مع 50 خطوة استدلال لأعلى جودة.",
-        "image_chroma_text_to_image": "Chroma معدلة من Flux وتحوي بعض التغييرات في البنية.",
-        "image_cosmos_predict2_2B_t2i": "إنشاء صور باستخدام Cosmos-Predict2 2B T2I بدقة فيزيائية عالية وتفاصيل غنية.",
-        "image_lotus_depth_v1_1": "تشغيل Lotus Depth في ComfyUI لتقدير عمق أحادي بدون تدريب مسبق مع احتفاظ عالي بالتفاصيل.",
-        "image_omnigen2_image_edit": "تحرير الصور باستخدام تعليمات اللغة الطبيعية مع دعم متقدم للصور والنصوص في OmniGen2.",
-        "image_omnigen2_t2i": "إنشاء صور عالية الجودة من نصوص باستخدام نموذج OmniGen2 الموحد متعدد الأنماط 7B ذو البنية ذات المسارين.",
-        "sd3_5_large_blur": "إنشاء صور موجهة باستخدام صور مرجعية ضبابية باستخدام SD 3.5.",
-        "sd3_5_large_canny_controlnet_example": "إنشاء صور موجهة بالكشف عن الحواف باستخدام SD 3.5 Canny ControlNet.",
-        "sd3_5_large_depth": "إنشاء صور موجهة بمعلومات العمق باستخدام SD 3.5.",
-        "sd3_5_simple_example": "إنشاء صور باستخدام SD 3.5.",
-        "sdxl_refiner_prompt_example": "تحسين صور SDXL باستخدام نماذج التكرير.",
-        "sdxl_revision_text_prompts": "إنشاء صور بنقل مفاهيم من صور مرجعية باستخدام SDXL Revision.",
-        "sdxl_revision_zero_positive": "إنشاء صور باستخدام نصوص وصور مرجعية مع SDXL Revision.",
-        "sdxl_simple_example": "إنشاء صور عالية الجودة باستخدام SDXL.",
-        "sdxlturbo_example": "إنشاء صور في خطوة واحدة باستخدام SDXL Turbo."
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "تعديل الصور باستخدام Flux.1 Kontext max image.",
-        "api_bfl_flux_1_kontext_multiple_images_input": "إدخال عدة صور وتعديلها باستخدام Flux.1 Kontext.",
-        "api_bfl_flux_1_kontext_pro_image": "تعديل الصور باستخدام Flux.1 Kontext pro image.",
-        "api_bfl_flux_pro_t2i": "إنشاء صور مع اتباع ممتاز للنص وجودة بصرية باستخدام FLUX.1 Pro.",
-        "api_ideogram_v3_t2i": "إنشاء صور ذات جودة احترافية مع محاذاة ممتازة للنص، الواقعية الفوتوغرافية، ودعم النصوص باستخدام Ideogram V3.",
-        "api_luma_photon_i2i": "توجيه إنشاء الصور باستخدام مزيج من الصور والنص.",
-        "api_luma_photon_style_ref": "إنشاء صور بدمج مرجعيات الأسلوب مع تحكم دقيق باستخدام Luma Photon.",
-        "api_openai_dall_e_2_inpaint": "تعديل الصور باستخدام تقنيات inpainting مع OpenAI Dall-E 2 API.",
-        "api_openai_dall_e_2_t2i": "إنشاء صور من نصوص باستخدام OpenAI Dall-E 2 API.",
-        "api_openai_dall_e_3_t2i": "إنشاء صور من نصوص باستخدام OpenAI Dall-E 3 API.",
-        "api_openai_image_1_i2i": "إنشاء صور من صور مدخلة باستخدام OpenAI GPT Image 1 API.",
-        "api_openai_image_1_inpaint": "تعديل الصور باستخدام تقنيات inpainting مع OpenAI GPT Image 1 API.",
-        "api_openai_image_1_multi_inputs": "إنشاء صور من مدخلات متعددة باستخدام OpenAI GPT Image 1 API.",
-        "api_openai_image_1_t2i": "إنشاء صور من نصوص باستخدام OpenAI GPT Image 1 API.",
-        "api_recraft_image_gen_with_color_control": "إنشاء صور مع لوحات ألوان مخصصة ومرئيات خاصة بالعلامة التجارية باستخدام Recraft.",
-        "api_recraft_image_gen_with_style_control": "التحكم في الأسلوب باستخدام أمثلة بصرية، محاذاة المواقع، وضبط دقيق للكائنات. تخزين ومشاركة الأنماط لضمان تناسق العلامة التجارية.",
-        "api_recraft_vector_gen": "إنشاء صور فيكتور عالية الجودة من نصوص باستخدام مولد الفكتور AI الخاص بـ Recraft.",
-        "api_runway_reference_to_image": "إنشاء صور جديدة بناءً على أنماط وتراكيب مرجعية باستخدام Runway AI.",
-        "api_runway_text_to_image": "إنشاء صور عالية الجودة من نصوص باستخدام نموذج Runway AI.",
-        "api_stability_ai_i2i": "تحويل الصور مع إنشاء عالي الجودة باستخدام Stability AI، مثالي للتحرير المهني ونقل الأسلوب.",
-        "api_stability_ai_sd3_5_i2i": "إنشاء صور عالية الجودة مع اتباع ممتاز للنص. مثالي للاستخدامات المهنية بدقة 1 ميجابكسل.",
-        "api_stability_ai_sd3_5_t2i": "إنشاء صور عالية الجودة مع اتباع ممتاز للنص. مثالي للاستخدامات المهنية بدقة 1 ميجابكسل.",
-        "api_stability_ai_stable_image_ultra_t2i": "إنشاء صور عالية الجودة مع اتباع ممتاز للنص. مثالي للاستخدامات المهنية بدقة 1 ميجابكسل."
-      },
-      "LLM API": {
-        "api_google_gemini": "اختبر الذكاء الاصطناعي متعدد الوسائط من Google مع قدرات التفكير لدى Gemini.",
-        "api_openai_chat": "التفاعل مع نماذج اللغة المتقدمة من OpenAI للمحادثات الذكية."
-      },
-      "Upscaling": {
-        "esrgan_example": "تكبير الصور باستخدام نماذج ESRGAN لتعزيز الجودة.",
-        "hiresfix_esrgan_workflow": "تكبير الصور باستخدام نماذج ESRGAN خلال خطوات التوليد الوسيطة.",
-        "hiresfix_latent_workflow": "تكبير الصور بتحسين الجودة في الفضاء الكامن.",
-        "latent_upscale_different_prompt_model": "تكبير الصور مع تغيير العبارات المستخدمة عبر مراحل التوليد."
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "إنشاء فيديوهات من نصوص باستخدام نموذج Hunyuan.",
-        "image_to_video": "إنشاء فيديوهات من صور ثابتة.",
-        "image_to_video_wan": "إنشاء فيديوهات من صور باستخدام Wan 2.1.",
-        "ltxv_image_to_video": "إنشاء فيديوهات من صور ثابتة.",
-        "ltxv_text_to_video": "إنشاء فيديوهات من نصوص.",
-        "mochi_text_to_video_example": "إنشاء فيديوهات من نصوص باستخدام نموذج Mochi.",
-        "text_to_video_wan": "إنشاء فيديوهات من نصوص باستخدام Wan 2.1.",
-        "txt_to_image_to_video": "إنشاء فيديوهات عن طريق إنشاء صور من النصوص أولاً.",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "إنشاء فيديوهات باستخدام Cosmos-Predict2 2B Video2World، بإنتاج محاكاة فيديو بدقة فيزيائية عالية وجودة فائقة ومتسقة.",
-        "video_wan2_1_fun_camera_v1_1_14B": "إنشاء فيديوهات عالية الجودة مع تحكم متقدم بالكاميرا باستخدام النموذج الكامل 14B.",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "إنشاء فيديوهات ديناميكية مع حركات كاميرا سينمائية باستخدام نموذج Wan 2.1 Fun Camera 1.3B.",
-        "video_wan_vace_14B_ref2v": "إنشاء فيديوهات تطابق أسلوب ومحتوى صورة مرجعية. مثالي لإنشاء فيديوهات متناسقة الأسلوب.",
-        "video_wan_vace_14B_t2v": "تحويل أوصاف نصية إلى فيديوهات عالية الجودة. يدعم دقة 480p و720p مع نموذج VACE-14B.",
-        "video_wan_vace_14B_v2v": "إنشاء فيديوهات بالتحكم في فيديوهات الإدخال والصور المرجعية باستخدام Wan VACE.",
-        "video_wan_vace_flf2v": "إنشاء انتقالات فيديو سلسة عبر تحديد الإطارات الأولى والأخيرة. يدعم تسلسل إطارات مفتاحية مخصصة.",
-        "video_wan_vace_inpainting": "تعديل مناطق محددة في الفيديو مع الحفاظ على المحتوى المحيط. مثالي لإزالة أو استبدال الأجسام.",
-        "video_wan_vace_outpainting": "إنشاء فيديوهات ممتدة عبر توسيع حجم الفيديو باستخدام Wan VACE outpainting.",
-        "wan2_1_flf2v_720_f16": "إنشاء فيديوهات بالتحكم في الإطارات الأولى والأخيرة باستخدام Wan 2.1 FLF2V.",
-        "wan2_1_fun_control": "إنشاء فيديوهات موجهة بالتحكم بالوضع، العمق، والحواف باستخدام Wan 2.1 ControlNet.",
-        "wan2_1_fun_inp": "إنشاء فيديوهات من الإطارات الأولى والأخيرة باستخدام Wan 2.1 inpainting."
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "إنشاء فيديوهات مصقولة من الصور والنصوص مع دمج CGI باستخدام MiniMax.",
-        "api_hailuo_minimax_t2v": "إنشاء فيديوهات عالية الجودة مباشرة من نصوص. استكشف قدرات MiniMax المتقدمة لإنشاء سرد بصري متنوع مع تأثيرات CGI احترافية وعناصر أسلوبية لإحياء وصفك.",
-        "api_kling_effects": "إنشاء فيديوهات ديناميكية بتطبيق تأثيرات بصرية على الصور باستخدام Kling.",
-        "api_kling_flf": "إنشاء فيديوهات عبر التحكم في الإطارات الأولى والأخيرة.",
-        "api_kling_i2v": "إنشاء فيديوهات مع اتباع ممتاز للنصوص للحركات والتعابير وحركات الكاميرا باستخدام Kling.",
-        "api_luma_i2v": "تحويل الصور الثابتة إلى رسوم متحركة عالية الجودة بشكل فوري.",
-        "api_luma_t2v": "يمكن إنشاء فيديوهات عالية الجودة باستخدام نصوص بسيطة.",
-        "api_moonvalley_image_to_video": "إنشاء فيديوهات سينمائية بدقة 1080p من صور عبر نموذج مدرب حصريًا على بيانات مرخصة.",
-        "api_moonvalley_text_to_video": "إنشاء فيديوهات سينمائية بدقة 1080p من نصوص عبر نموذج مدرب حصريًا على بيانات مرخصة.",
-        "api_pika_i2v": "إنشاء فيديوهات متحركة سلسة من صورة ثابتة واحدة باستخدام Pika AI.",
-        "api_pika_scene": "إنشاء فيديوهات تدمج عدة صور مدخلة باستخدام Pika Scenes.",
-        "api_pixverse_i2v": "إنشاء فيديوهات ديناميكية من الصور الثابتة مع الحركة والتأثيرات باستخدام PixVerse.",
-        "api_pixverse_t2v": "إنشاء فيديوهات مع تفسير دقيق للنصوص وديناميكية فيديو مذهلة.",
-        "api_pixverse_template_i2v": "إنشاء فيديوهات ديناميكية من الصور الثابتة مع الحركة والتأثيرات باستخدام PixVerse.",
-        "api_runway_first_last_frame": "إنشاء انتقالات فيديو سلسة بين إطارين رئيسيين بدقة Runway.",
-        "api_runway_gen3a_turbo_image_to_video": "إنشاء فيديوهات سينمائية من صور ثابتة باستخدام Runway Gen3a Turbo.",
-        "api_runway_gen4_turo_image_to_video": "إنشاء فيديوهات ديناميكية من الصور باستخدام Runway Gen4 Turbo.",
-        "api_veo2_i2v": "إنشاء فيديوهات من الصور باستخدام Google Veo2 API."
-      }
-    },
     "title": "ابدأ باستخدام قالب",
     "useCasesSelected": "{count} حالات استخدام"
   },
diff --git a/src/locales/ar/nodeDefs.json b/src/locales/ar/nodeDefs.json
index 73f2a3285..f61f58466 100644
--- a/src/locales/ar/nodeDefs.json
+++ b/src/locales/ar/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "توليد صورة باستخدام صورة تحكم (كاني).",
-    "display_name": "Flux.1 صورة تحكم كاني",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "عتبة_كاني_العالية",
-        "tooltip": "عتبة عالية لكشف حواف كاني؛ تُتجاهل إذا كانت skip_processing مفعلة."
-      },
-      "canny_low_threshold": {
-        "name": "عتبة_كاني_المنخفضة",
-        "tooltip": "عتبة منخفضة لكشف حواف كاني؛ تُتجاهل إذا كانت skip_processing مفعلة."
-      },
-      "control_after_generate": {
-        "name": "التحكم بعد التوليد"
-      },
-      "control_image": {
-        "name": "صورة_التحكم"
-      },
-      "guidance": {
-        "name": "الإرشاد",
-        "tooltip": "قوة الإرشاد لعملية توليد الصورة"
-      },
-      "prompt": {
-        "name": "الوصف",
-        "tooltip": "الوصف المطلوب لتوليد الصورة"
-      },
-      "prompt_upsampling": {
-        "name": "تحسين_الوصف",
-        "tooltip": "ما إذا كان يجب تحسين الوصف. إذا تم تفعيله، يتم تعديل الوصف تلقائيًا للحصول على توليد إبداعي أكثر، لكن النتائج غير حتمية (نفس البذرة لن تنتج نفس النتيجة بالضبط)."
-      },
-      "seed": {
-        "name": "البذرة",
-        "tooltip": "البذرة العشوائية المستخدمة لإنشاء الضجيج."
-      },
-      "skip_preprocessing": {
-        "name": "تخطي_المعالجة_المسبقة",
-        "tooltip": "ما إذا كان يجب تخطي المعالجة المسبقة؛ اجعلها True إذا كانت صورة التحكم معالجة بالفعل بالكاني، و False إذا كانت صورة خام."
-      },
-      "steps": {
-        "name": "الخطوات",
-        "tooltip": "عدد الخطوات في عملية توليد الصورة"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "توليد صورة باستخدام صورة تحكم (العمق).",
-    "display_name": "Flux.1 صورة تحكم العمق",
-    "inputs": {
-      "control_after_generate": {
-        "name": "التحكم بعد التوليد"
-      },
-      "control_image": {
-        "name": "صورة_التحكم"
-      },
-      "guidance": {
-        "name": "الإرشاد",
-        "tooltip": "قوة الإرشاد لعملية توليد الصورة"
-      },
-      "prompt": {
-        "name": "الوصف",
-        "tooltip": "الوصف المطلوب لتوليد الصورة"
-      },
-      "prompt_upsampling": {
-        "name": "تحسين_الوصف",
-        "tooltip": "ما إذا كان يجب تحسين الوصف. إذا تم تفعيله، يتم تعديل الوصف تلقائيًا للحصول على توليد إبداعي أكثر، لكن النتائج غير حتمية (نفس البذرة لن تنتج نفس النتيجة بالضبط)."
-      },
-      "seed": {
-        "name": "البذرة",
-        "tooltip": "البذرة العشوائية المستخدمة لإنشاء الضجيج."
-      },
-      "skip_preprocessing": {
-        "name": "تخطي_المعالجة_المسبقة",
-        "tooltip": "ما إذا كان يجب تخطي المعالجة المسبقة؛ اجعلها True إذا كانت صورة التحكم معالجة بالفعل بالعمق، و False إذا كانت صورة خام."
-      },
-      "steps": {
-        "name": "الخطوات",
-        "tooltip": "عدد الخطوات في عملية توليد الصورة"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "توسيع الصورة بناءً على الوصف.",
     "display_name": "Flux.1 توسيع الصورة",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "تحميل ثلاثي الأبعاد - حركة",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "الارتفاع"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "ملف النموذج"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "العرض"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "معلومات الكاميرا"
       },
-      "image": {
-        "name": "الصورة"
-      },
       "model_file": {
         "name": "ملف النموذج"
       }
diff --git a/src/locales/ar/settings.json b/src/locales/ar/settings.json
index e713eabb3..807190016 100644
--- a/src/locales/ar/settings.json
+++ b/src/locales/ar/settings.json
@@ -155,10 +155,6 @@
     "name": "رؤية الشبكة الابتدائية",
     "tooltip": "يتحكم في ظهور الشبكة بشكل افتراضي عند إنشاء عنصر ثلاثي الأبعاد جديد."
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "رؤية المعاينة الابتدائية",
-    "tooltip": "يتحكم في ظهور شاشة المعاينة بشكل افتراضي عند إنشاء عنصر ثلاثي الأبعاد جديد."
-  },
   "Comfy_Locale": {
     "name": "اللغة"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "استخدام القائمة الجديدة",
     "options": {
-      "Bottom": "أسفل",
       "Disabled": "معطل",
       "Top": "أعلى"
     },
@@ -384,8 +379,7 @@
     "name": "موضع تبويبات سير العمل المفتوحة",
     "options": {
       "Sidebar": "الشريط الجانبي",
-      "Topbar": "شريط الأعلى",
-      "Topbar (2nd-row)": "شريط الأعلى (الصف الثاني)"
+      "Topbar": "شريط الأعلى"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/en/commands.json b/src/locales/en/commands.json
index 5c222186a..6499144bf 100644
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -128,6 +128,9 @@
   "Comfy_Graph_ConvertToSubgraph": {
     "label": "Convert Selection to Subgraph"
   },
+  "Comfy_Graph_EditSubgraphWidgets": {
+    "label": "Edit Subgraph Widgets"
+  },
   "Comfy_Graph_ExitSubgraph": {
     "label": "Exit Subgraph"
   },
@@ -137,6 +140,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Group Selected Nodes"
   },
+  "Comfy_Graph_ToggleWidgetPromotion": {
+    "label": "Toggle promotion of hovered widget"
+  },
   "Comfy_Graph_UnpackSubgraph": {
     "label": "Unpack the selected Subgraph"
   },
@@ -299,6 +305,10 @@
   "Workspace_ToggleFocusMode": {
     "label": "Toggle Focus Mode"
   },
+  "Workspace_ToggleSidebarTab_assets": {
+    "label": "Toggle Assets Sidebar",
+    "tooltip": "Assets"
+  },
   "Workspace_ToggleSidebarTab_model-library": {
     "label": "Toggle Model Library Sidebar",
     "tooltip": "Model Library"
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index c5ac3ca34..1492d3b80 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -36,6 +36,8 @@
     "import": "Import",
     "loadAllFolders": "Load All Folders",
     "logoAlt": "ComfyUI Logo",
+    "comfyOrgLogoAlt": "ComfyOrg Logo",
+    "comfy": "Comfy",
     "refresh": "Refresh",
     "refreshNode": "Refresh Node",
     "terminal": "Terminal",
@@ -60,6 +62,10 @@
     "icon": "Icon",
     "color": "Color",
     "error": "Error",
+    "resizeFromBottomRight": "Resize from bottom-right corner",
+    "resizeFromTopRight": "Resize from top-right corner",
+    "resizeFromBottomLeft": "Resize from bottom-left corner",
+    "resizeFromTopLeft": "Resize from top-left corner",
     "info": "Node Info",
     "bookmark": "Save to Library",
     "moreOptions": "More Options",
@@ -88,6 +94,11 @@
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
+    "pressKeysForNewBinding": "Press keys for new binding",
+    "defaultBanner": "default banner",
+    "enableOrDisablePack": "Enable or disable pack",
+    "openManager": "Open Manager",
+    "graphNavigation": "Graph navigation",
     "dropYourFileOr": "Drop your file or",
     "back": "Back",
     "next": "Next",
@@ -169,6 +180,10 @@
     "title": "Title",
     "edit": "Edit",
     "copy": "Copy",
+    "copyJobId": "Copy Job ID",
+    "copied": "Copied",
+    "jobIdCopied": "Job ID copied to clipboard",
+    "failedToCopyJobId": "Failed to copy job ID",
     "imageUrl": "Image URL",
     "clear": "Clear",
     "clearAll": "Clear all",
@@ -588,6 +603,9 @@
     "nodeLibrary": "Node Library",
     "workflows": "Workflows",
     "templates": "Templates",
+    "assets": "Assets",
+    "mediaAssets": "Media Assets",
+    "backToAssets": "Back to all assets",
     "labels": {
       "queue": "Queue",
       "nodes": "Nodes",
@@ -658,6 +676,7 @@
     "whatsNew": "What's New?",
     "clickToLearnMore": "Click to learn more →",
     "loadingReleases": "Loading releases...",
+    "recentReleases": "Recent releases",
     "noRecentReleases": "No recent releases",
     "updateAvailable": "Update",
     "desktopUserGuide": "Desktop User Guide",
@@ -730,7 +749,10 @@
       "Image API": "Image API",
       "Video API": "Video API",
       "LLM API": "LLM API",
-      "All": "All Templates"
+      "All": "All Templates",
+      "Extensions": "Extensions",
+      "Partner Nodes": "Partner Nodes",
+      "Generation Type": "Generation Type"
     },
     "templateDescription": {
       "Basics": {
@@ -1046,7 +1068,8 @@
     "modelFilter": "Model Filter",
     "modelsSelected": "{count} Models",
     "useCasesSelected": "{count} Use Cases",
-    "licensesSelected": "{count} Licenses",
+    "runsOnSelected": "{count} Runs On",
+    "runsOnFilter": "Runs on",
     "resultsCount": "Showing {count} of {total} templates",
     "sort": {
       "recommended": "Recommended",
@@ -1056,6 +1079,9 @@
       "vramLowToHigh": "VRAM Usage (Low to High)",
       "modelSizeLowToHigh": "Model Size (Low to High)",
       "default": "Default"
+    },
+    "error": {
+      "templateNotFound": "Template \"{templateName}\" not found"
     }
   },
   "graphCanvasMenu": {
@@ -1100,6 +1126,7 @@
     "overwriteBlueprintTitle": "Overwrite existing blueprint?",
     "overwriteBlueprint": "Saving will overwrite the current blueprint with your changes",
     "blueprintName": "Subgraph name",
+    "promoteOutsideSubgraph": "Can't promote widget when not in subgraph",
     "publish": "Publish Subgraph",
     "publishSuccess": "Saved to Nodes Library",
     "publishSuccessMessage": "You can find your subgraph blueprint in the nodes library under \"Subgraph Blueprints\"",
@@ -1210,9 +1237,11 @@
     "Export": "Export",
     "Export (API)": "Export (API)",
     "Convert Selection to Subgraph": "Convert Selection to Subgraph",
+    "Edit Subgraph Widgets": "Edit Subgraph Widgets",
     "Exit Subgraph": "Exit Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
+    "Toggle promotion of hovered widget": "Toggle promotion of hovered widget",
     "Unpack the selected Subgraph": "Unpack the selected Subgraph",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
     "Manage group nodes": "Manage group nodes",
@@ -1267,6 +1296,7 @@
     "Toggle Essential Bottom Panel": "Toggle Essential Bottom Panel",
     "Toggle View Controls Bottom Panel": "Toggle View Controls Bottom Panel",
     "Focus Mode": "Focus Mode",
+    "Assets": "Assets",
     "Model Library": "Model Library",
     "Node Library": "Node Library",
     "Queue Panel": "Queue Panel",
@@ -1321,7 +1351,7 @@
     "UV": "UV",
     "ContextMenu": "Context Menu",
     "Reroute": "Reroute",
-    "Load 3D": "Load 3D",
+    "Load 3D": "Load 3D & Animation",
     "Camera": "Camera",
     "Scene": "Scene",
     "3D": "3D",
@@ -1332,7 +1362,9 @@
     "Notification Preferences": "Notification Preferences",
     "3DViewer": "3DViewer",
     "Vue Nodes": "Vue Nodes",
-    "Canvas Navigation": "Canvas Navigation"
+    "Canvas Navigation": "Canvas Navigation",
+    "PlanCredits": "Plan & Credits",
+    "VueNodes": "Vue Nodes"
   },
   "serverConfigItems": {
     "listen": {
@@ -1523,6 +1555,7 @@
     "operations": "operations",
     "training": "training",
     "lotus": "lotus",
+    "LTXV": "LTXV",
     "Luma": "Luma",
     "MiniMax": "MiniMax",
     "model_specific": "model_specific",
@@ -1705,6 +1738,7 @@
     "export": "Export",
     "exportModel": "Export Model",
     "exportingModel": "Exporting model...",
+    "reloadingModel": "Reloading model...",
     "uploadTexture": "Upload Texture",
     "applyingTexture": "Applying Texture...",
     "materialModes": {
@@ -1743,10 +1777,13 @@
   "toastMessages": {
     "nothingToQueue": "Nothing to queue",
     "pleaseSelectOutputNodes": "Please select output nodes",
+    "failedToQueue": "Failed to queue",
+    "failedExecutionPathResolution": "Could not resolve path to selected nodes",
     "no3dScene": "No 3D scene to apply texture",
     "failedToApplyTexture": "Failed to apply texture",
     "no3dSceneToExport": "No 3D scene to export",
     "failedToExportModel": "Failed to export model as {format}",
+    "exportSuccess": "Successfully exported model as {format}",
     "fileLoadError": "Unable to find workflow in {fileName}",
     "dropFileError": "Unable to process dropped item: {error}",
     "interrupted": "Execution has been interrupted",
@@ -1772,12 +1809,17 @@
     "failedToInitiateCreditPurchase": "Failed to initiate credit purchase: {error}",
     "failedToAccessBillingPortal": "Failed to access billing portal: {error}",
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
+    "failedToFetchSubscription": "Failed to fetch subscription status: {error}",
+    "failedToInitiateSubscription": "Failed to initiate subscription: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
     "nothingSelected": "Nothing selected",
     "cannotCreateSubgraph": "Cannot create subgraph",
     "failedToConvertToSubgraph": "Failed to convert items to subgraph",
-    "failedToInitializeLoad3dViewer": "Failed to initialize 3D Viewer"
+    "failedToInitializeLoad3dViewer": "Failed to initialize 3D Viewer",
+    "failedToLoadBackgroundImage": "Failed to load background image",
+    "failedToLoadModel": "Failed to load 3D model",
+    "modelLoadedSuccessfully": "3D model loaded successfully"
   },
   "auth": {
     "apiKey": {
@@ -1815,7 +1857,12 @@
       "confirmPasswordLabel": "Confirm Password",
       "confirmPasswordPlaceholder": "Enter the same password again",
       "forgotPassword": "Forgot password?",
-      "loginButton": "Log in",
+      "passwordResetInstructions": "Enter your email address and we'll send you a link to reset your password.",
+      "sendResetLink": "Send reset link",
+      "backToLogin": "Back to login",
+      "didntReceiveEmail": "Didn't receive an email? Contact us at",
+      "passwordResetError": "Failed to send password reset email. Please try again.",
+      "loginButton": "Sign in",
       "orContinueWith": "Or continue with",
       "loginWithGoogle": "Log in with Google",
       "loginWithGithub": "Log in with Github",
@@ -1852,6 +1899,20 @@
       "success": "Password Updated",
       "successDetail": "Your password has been updated successfully"
     },
+    "errors": {
+      "auth/invalid-email": "Please enter a valid email address.",
+      "auth/user-disabled": "This account has been disabled. Please contact support.",
+      "auth/user-not-found": "No account found with this email. Would you like to create a new account?",
+      "auth/wrong-password": "The password you entered is incorrect. Please try again.",
+      "auth/email-already-in-use": "An account with this email already exists. Try signing in instead.",
+      "auth/weak-password": "Password is too weak. Please use a stronger password with at least 6 characters.",
+      "auth/too-many-requests": "Too many login attempts. Please wait a moment and try again.",
+      "auth/operation-not-allowed": "This sign-in method is not currently supported.",
+      "auth/invalid-credential": "Invalid login credentials. Please check your email and password.",
+      "auth/network-request-failed": "Network error. Please check your connection and try again.",
+      "auth/popup-closed-by-user": "Sign-in was cancelled. Please try again.",
+      "auth/cancelled-popup-request": "Sign-in was cancelled. Please try again."
+    },
     "deleteAccount": {
       "deleteAccount": "Delete Account",
       "confirmTitle": "Delete Account",
@@ -1860,6 +1921,16 @@
       "cancel": "Cancel",
       "success": "Account Deleted",
       "successDetail": "Your account has been successfully deleted."
+    },
+    "reauthRequired": {
+      "title": "Re-authentication Required",
+      "message": "For security reasons, this action requires you to sign in again. Would you like to proceed?",
+      "confirm": "Sign In Again",
+      "cancel": "Cancel"
+    },
+    "loginButton": {
+      "tooltipHelp": "Login to be able to use \"API Nodes\"",
+      "tooltipLearnMore": "Learn more..."
     }
   },
   "validation": {
@@ -1908,6 +1979,46 @@
     "added": "Added",
     "accountInitialized": "Account initialized"
   },
+  "subscription": {
+    "title": "Subscription",
+    "titleUnsubscribed": "Subscribe to Comfy Cloud",
+    "comfyCloud": "Comfy Cloud",
+    "beta": "BETA",
+    "perMonth": "USD / month",
+    "renewsDate": "Renews {date}",
+    "expiresDate": "Expires {date}",
+    "manageSubscription": "Manage subscription",
+    "partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
+    "partnerNodesDescription": "For running commercial/proprietary models",
+    "totalCredits": "Total credits",
+    "viewUsageHistory": "View usage history",
+    "addApiCredits": "Add API credits",
+    "addCredits": "Add credits",
+    "monthlyCreditsRollover": "These credits will rollover to the next month",
+    "monthlyBonusDescription": "Monthly credit bonus",
+    "prepaidDescription": "Pre-paid credits",
+    "prepaidCreditsInfo": "Credits purchased separately that don't expire",
+    "nextBillingCycle": "next billing cycle",
+    "yourPlanIncludes": "Your plan includes:",
+    "viewMoreDetails": "View more details",
+    "learnMore": "Learn more",
+    "messageSupport": "Message support",
+    "invoiceHistory": "Invoice history",
+    "benefits": {
+      "benefit1": "Monthly credits for Partner Nodes — top up when needed",
+      "benefit2": "Up to 30 min runtime per job"
+    },
+    "required": {
+      "title": "Subscribe to",
+      "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
+      "subscribe": "Subscribe"
+    },
+    "subscribeToRun": "Subscribe",
+    "subscribeToRunFull": "Subscribe to Run",
+    "subscribeNow": "Subscribe Now",
+    "subscribeToComfyCloud": "Subscribe to Comfy Cloud",
+    "partnerNodesCredits": "Partner Nodes credits"
+  },
   "userSettings": {
     "title": "User Settings",
     "name": "Name",
@@ -1963,6 +2074,7 @@
     "enterNewName": "Enter new name"
   },
   "shortcuts": {
+    "shortcuts": "Shortcuts",
     "essentials": "Essential",
     "viewControls": "View Controls",
     "manageShortcuts": "Manage Shortcuts",
@@ -1983,6 +2095,128 @@
     "renderBypassState": "Render Bypass State",
     "renderErrorState": "Render Error State"
   },
+  "cloudOnboarding": {
+    "survey": {
+      "title": "Cloud Survey",
+      "placeholder": "Survey questions placeholder",
+      "steps": {
+        "familiarity": "How familiar are you with ComfyUI?",
+        "purpose": "What will you primarily use ComfyUI for?",
+        "industry": "What's your primary industry?",
+        "making": "What do you plan on making?"
+      },
+      "questions": {
+        "familiarity": "How familiar are you with ComfyUI?",
+        "purpose": "What will you primarily use ComfyUI for?",
+        "industry": "What's your primary industry?",
+        "making": "What do you plan on making?"
+      },
+      "options": {
+        "familiarity": {
+          "new": "New to ComfyUI (never used it before)",
+          "starting": "Just getting started (following tutorials)",
+          "basics": "Comfortable with basics",
+          "advanced": "Advanced user (custom workflows)",
+          "expert": "Expert (help others)"
+        },
+        "purpose": {
+          "personal": "Personal projects / hobby",
+          "community": "Community contributions (nodes, workflows, etc.)",
+          "client": "Client work (freelance)",
+          "inhouse": "My own workplace (in-house)",
+          "research": "Academic research"
+        },
+        "industry": {
+          "film_tv_animation": "Film, TV, & animation",
+          "gaming": "Gaming",
+          "marketing": "Marketing & advertising",
+          "architecture": "Architecture",
+          "product_design": "Product & graphic design",
+          "fine_art": "Fine art & illustration",
+          "software": "Software & technology",
+          "education": "Education",
+          "other": "Other",
+          "otherPlaceholder": "Please specify"
+        },
+        "making": {
+          "images": "Images",
+          "video": "Video & animation",
+          "3d": "3D assets",
+          "audio": "Audio / music",
+          "custom_nodes": "Custom nodes & workflows"
+        }
+      }
+    },
+    "forgotPassword": {
+      "title": "Forgot Password",
+      "instructions": "Enter your email address and we'll send you a link to reset your password.",
+      "emailLabel": "Email",
+      "emailPlaceholder": "Enter your email",
+      "sendResetLink": "Send reset link",
+      "backToLogin": "Back to login",
+      "didntReceiveEmail": "Didn't receive an email? Contact us at",
+      "passwordResetSent": "Password reset email sent",
+      "passwordResetError": "Failed to send password reset email. Please try again.",
+      "emailRequired": "Email is required"
+    },
+    "privateBeta": {
+      "title": "Cloud is currently in private beta",
+      "desc": "Sign in to join the waitlist. We’ll notify you when it’s your turn. Already been notified? Sign in start using Cloud."
+    },
+    "start": {
+      "title": "start creating in seconds",
+      "desc": "Zero setup required. Works on any device.",
+      "explain": "Generate multiple outputs at once. Share workflows with ease.",
+      "learnAboutButton": "Learn about Cloud",
+      "wantToRun": "Want to run ComfyUI locally instead?",
+      "download": "Download ComfyUI"
+    },
+    "checkingStatus": "Checking your account status...",
+    "retrying": "Retrying...",
+    "retry": "Try Again",
+    "authTimeout": {
+      "title": "Connection Taking Too Long",
+      "message": "We're having trouble connecting to ComfyUI Cloud. This could be due to a slow connection or temporary service issue.",
+      "restart": "Sign Out & Try Again",
+      "troubleshooting": "Common causes:",
+      "causes": [
+        "Corporate firewall or proxy blocking authentication services",
+        "VPN or network restrictions",
+        "Browser extensions interfering with requests",
+        "Regional network limitations",
+        "Try a different browser or network"
+      ],
+      "technicalDetails": "Technical Details",
+      "helpText": "Need help? Contact",
+      "supportLink": "support"
+    }
+  },
+  "cloudFooter_needHelp": "Need Help?",
+  "cloudStart_title": "start creating in seconds",
+  "cloudStart_desc": "Zero setup required. Works on any device.",
+  "cloudStart_explain": "Generate multiple outputs at once. Share workflows with ease.",
+  "cloudStart_learnAboutButton": "Learn about Cloud",
+  "cloudStart_wantToRun": "Want to run ComfyUI locally instead?",
+  "cloudStart_download": "Download ComfyUI",
+  "cloudWaitlist_questionsText": "Questions? Contact us",
+  "cloudWaitlist_contactLink": "here",
+  "cloudSorryContactSupport_title": "Sorry, contact support",
+  "cloudPrivateBeta_title": "Cloud is currently in private beta",
+  "cloudPrivateBeta_desc": "Sign in to join the waitlist. We'll notify you when it's your turn. Already been notified? Sign in start using Cloud.",
+  "cloudForgotPassword_title": "Forgot Password",
+  "cloudForgotPassword_instructions": "Enter your email address and we'll send you a link to reset your password.",
+  "cloudForgotPassword_emailLabel": "Email",
+  "cloudForgotPassword_emailPlaceholder": "Enter your email",
+  "cloudForgotPassword_sendResetLink": "Send reset link",
+  "cloudForgotPassword_backToLogin": "Back to login",
+  "cloudForgotPassword_didntReceiveEmail": "Didn't receive an email?",
+  "cloudForgotPassword_emailRequired": "Email is required",
+  "cloudForgotPassword_passwordResetSent": "Password reset sent",
+  "cloudForgotPassword_passwordResetError": "Failed to send password reset email",
+  "cloudSurvey_steps_familiarity": "How familiar are you with ComfyUI?",
+  "cloudSurvey_steps_purpose": "What will you primarily use ComfyUI for?",
+  "cloudSurvey_steps_industry": "What's your primary industry?",
+  "cloudSurvey_steps_making": "What do you plan on making?",
   "assetBrowser": {
     "assets": "Assets",
     "browseAssets": "Browse Assets",
@@ -2002,7 +2236,39 @@
     "sortAZ": "A-Z",
     "sortZA": "Z-A",
     "sortRecent": "Recent",
-    "sortPopular": "Popular"
+    "sortPopular": "Popular",
+    "ariaLabel": {
+      "assetCard": "{name} - {type} asset",
+      "loadingAsset": "Loading asset"
+    }
+  },
+  "mediaAsset": {
+    "deleteAssetTitle": "Delete this asset?",
+    "deleteAssetDescription": "This asset will be permanently removed.",
+    "deleteSelectedTitle": "Delete selected assets?",
+    "deleteSelectedDescription": "{count} asset(s) will be permanently removed.",
+    "assetDeletedSuccessfully": "Asset deleted successfully",
+    "deletingImportedFilesCloudOnly": "Deleting imported files is only supported in cloud version",
+    "failedToDeleteAsset": "Failed to delete asset",
+    "jobIdToast": {
+      "jobIdCopied": "Job ID copied to clipboard",
+      "jobIdCopyFailed": "Failed to copy Job ID",
+      "copied": "Copied",
+      "error": "Error"
+    },
+    "selection": {
+      "selectedCount": "Assets Selected: {count}",
+      "deselectAll": "Deselect all",
+      "downloadSelected": "Download",
+      "deleteSelected": "Delete",
+      "downloadStarted": "Downloading {count} files...",
+      "downloadsStarted": "Started downloading {count} file(s)",
+      "assetsDeletedSuccessfully": "{count} asset(s) deleted successfully",
+      "failedToDeleteAssets": "Failed to delete selected assets"
+    }
+  },
+  "actionbar": {
+    "dockToTop": "Dock to top"
   },
   "desktopDialogs": {
     "": {
@@ -2012,5 +2278,13 @@
         "Close": "Close"
       }
     }
+  },
+  "vueNodesMigration": {
+    "message": "Prefer the classic node design?",
+    "button": "Open Settings"
+  },
+  "vueNodesBanner": {
+    "message": "Nodes just got a new look and feel",
+    "tryItOut": "Try it out"
   }
 }
\ No newline at end of file
diff --git a/src/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json
index 87780e516..81930c80f 100644
--- a/src/locales/en/nodeDefs.json
+++ b/src/locales/en/nodeDefs.json
@@ -1532,10 +1532,12 @@
     },
     "outputs": {
       "0": {
-        "name": "positive"
+        "name": "positive",
+        "tooltip": null
       },
       "1": {
-        "name": "negative"
+        "name": "negative",
+        "tooltip": null
       }
     }
   },
@@ -2367,96 +2369,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "display_name": "Flux.1 Canny Control Image",
-    "description": "Generate image using a control image (canny).",
-    "inputs": {
-      "control_image": {
-        "name": "control_image"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Prompt for the image generation"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Whether to perform upsampling on the prompt. If active, automatically modifies the prompt for more creative generation, but results are nondeterministic (same seed will not produce exactly the same result)."
-      },
-      "canny_low_threshold": {
-        "name": "canny_low_threshold",
-        "tooltip": "Low threshold for Canny edge detection; ignored if skip_processing is True"
-      },
-      "canny_high_threshold": {
-        "name": "canny_high_threshold",
-        "tooltip": "High threshold for Canny edge detection; ignored if skip_processing is True"
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Whether to skip preprocessing; set to True if control_image already is canny-fied, False if it is a raw image."
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Guidance strength for the image generation process"
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Number of steps for the image generation process"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "The random seed used for creating the noise."
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "display_name": "Flux.1 Depth Control Image",
-    "description": "Generate image using a control image (depth).",
-    "inputs": {
-      "control_image": {
-        "name": "control_image"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Prompt for the image generation"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Whether to perform upsampling on the prompt. If active, automatically modifies the prompt for more creative generation, but results are nondeterministic (same seed will not produce exactly the same result)."
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Whether to skip preprocessing; set to True if control_image already is depth-ified, False if it is a raw image."
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Guidance strength for the image generation process"
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Number of steps for the image generation process"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "The random seed used for creating the noise."
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      }
-    },
-    "outputs": {
-      "0": {
-        "tooltip": null
-      }
-    }
-  },
   "FluxProExpandNode": {
     "display_name": "Flux.1 Expand Image",
     "description": "Outpaints image based on prompt.",
@@ -2688,6 +2600,14 @@
       "control_after_generate": {
         "name": "control after generate"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "tooltip": null
+      }
     }
   },
   "GeminiInputFiles": {
@@ -2702,6 +2622,11 @@
         "name": "GEMINI_INPUT_FILES",
         "tooltip": "An optional additional file(s) to batch together with the file loaded from this node. Allows chaining of input files so that a single message can include multiple input files."
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "GeminiNode": {
@@ -2739,6 +2664,11 @@
       "control_after_generate": {
         "name": "control after generate"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "GetImageSize": {
@@ -5016,6 +4946,70 @@
       }
     }
   },
+  "LtxvApiImageToVideo": {
+    "display_name": "LTXV Image To Video",
+    "description": "Professional-quality videos with customizable duration and resolution based on start image.",
+    "inputs": {
+      "image": {
+        "name": "image",
+        "tooltip": "First frame to be used for the video."
+      },
+      "model": {
+        "name": "model"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "duration": {
+        "name": "duration"
+      },
+      "resolution": {
+        "name": "resolution"
+      },
+      "fps": {
+        "name": "fps"
+      },
+      "generate_audio": {
+        "name": "generate_audio",
+        "tooltip": "When true, the generated video will include AI-generated audio matching the scene."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "LtxvApiTextToVideo": {
+    "display_name": "LTXV Text To Video",
+    "description": "Professional-quality videos with customizable duration and resolution.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "prompt": {
+        "name": "prompt"
+      },
+      "duration": {
+        "name": "duration"
+      },
+      "resolution": {
+        "name": "resolution"
+      },
+      "fps": {
+        "name": "fps"
+      },
+      "generate_audio": {
+        "name": "generate_audio",
+        "tooltip": "When true, the generated video will include AI-generated audio matching the scene."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "LTXVConditioning": {
     "display_name": "LTXVConditioning",
     "inputs": {
@@ -5164,7 +5158,7 @@
   },
   "LumaConceptsNode": {
     "display_name": "Luma Concepts",
-    "description": "Holds one or more Camera Concepts for use with Luma Text to Video and Luma Image to Video nodes.",
+    "description": "Camera Concepts for use with Luma Text to Video and Luma Image to Video nodes.",
     "inputs": {
       "concept1": {
         "name": "concept1"
@@ -5468,7 +5462,7 @@
   },
   "MinimaxImageToVideoNode": {
     "display_name": "MiniMax Image to Video",
-    "description": "Generates videos synchronously based on an image and prompt, and optional parameters using MiniMax's API.",
+    "description": "Generates videos synchronously based on an image and prompt, and optional parameters.",
     "inputs": {
       "image": {
         "name": "image",
@@ -5498,7 +5492,7 @@
   },
   "MinimaxTextToVideoNode": {
     "display_name": "MiniMax Text to Video",
-    "description": "Generates videos synchronously based on a prompt, and optional parameters using MiniMax's API.",
+    "description": "Generates videos synchronously based on a prompt, and optional parameters.",
     "inputs": {
       "prompt_text": {
         "name": "prompt_text",
@@ -9033,7 +9027,8 @@
     },
     "outputs": {
       "0": {
-        "name": "recraft_color"
+        "name": "recraft_color",
+        "tooltip": null
       }
     }
   },
@@ -9050,7 +9045,8 @@
     },
     "outputs": {
       "0": {
-        "name": "recraft_controls"
+        "name": "recraft_controls",
+        "tooltip": null
       }
     }
   },
@@ -9061,6 +9057,11 @@
       "image": {
         "name": "image"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "RecraftCrispUpscaleNode": {
@@ -9070,6 +9071,11 @@
       "image": {
         "name": "image"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "RecraftImageInpaintingNode": {
@@ -9104,6 +9110,11 @@
       "control_after_generate": {
         "name": "control after generate"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "RecraftImageToImageNode": {
@@ -9143,6 +9154,11 @@
       "control_after_generate": {
         "name": "control after generate"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "RecraftRemoveBackgroundNode": {
@@ -9152,6 +9168,14 @@
       "image": {
         "name": "image"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "tooltip": null
+      }
     }
   },
   "RecraftReplaceBackgroundNode": {
@@ -9183,6 +9207,11 @@
       "control_after_generate": {
         "name": "control after generate"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "RecraftStyleV3DigitalIllustration": {
@@ -9195,7 +9224,8 @@
     },
     "outputs": {
       "0": {
-        "name": "recraft_style"
+        "name": "recraft_style",
+        "tooltip": null
       }
     }
   },
@@ -9210,7 +9240,8 @@
     },
     "outputs": {
       "0": {
-        "name": "recraft_style"
+        "name": "recraft_style",
+        "tooltip": null
       }
     }
   },
@@ -9224,7 +9255,8 @@
     },
     "outputs": {
       "0": {
-        "name": "recraft_style"
+        "name": "recraft_style",
+        "tooltip": null
       }
     }
   },
@@ -9238,7 +9270,8 @@
     },
     "outputs": {
       "0": {
-        "name": "recraft_style"
+        "name": "recraft_style",
+        "tooltip": null
       }
     }
   },
@@ -9276,6 +9309,11 @@
       "control_after_generate": {
         "name": "control after generate"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "RecraftTextToVectorNode": {
@@ -9312,6 +9350,11 @@
       "control_after_generate": {
         "name": "control after generate"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "RecraftVectorizeImageNode": {
@@ -9321,6 +9364,11 @@
       "image": {
         "name": "image"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "ReferenceLatent": {
@@ -10247,6 +10295,38 @@
       }
     }
   },
+  "ScaleROPE": {
+    "display_name": "ScaleROPE",
+    "description": "Scale and shift the ROPE of the model.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "scale_x": {
+        "name": "scale_x"
+      },
+      "shift_x": {
+        "name": "shift_x"
+      },
+      "scale_y": {
+        "name": "scale_y"
+      },
+      "shift_y": {
+        "name": "shift_y"
+      },
+      "scale_t": {
+        "name": "scale_t"
+      },
+      "shift_t": {
+        "name": "shift_t"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "SD_4XUpscale_Conditioning": {
     "display_name": "SD_4XUpscale_Conditioning",
     "inputs": {
@@ -10373,6 +10453,11 @@
       "type": {
         "name": "type"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "SkipLayerGuidanceDiT": {
@@ -11289,6 +11374,29 @@
       }
     }
   },
+  "TemporalScoreRescaling": {
+    "display_name": "TSR - Temporal Score Rescaling",
+    "description": "[Post-CFG Function]\nTSR - Temporal Score Rescaling (2510.01184)\n\nRescaling the model's score or noise to steer the sampling diversity.\n",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "tsr_k": {
+        "name": "tsr_k",
+        "tooltip": "Controls the rescaling strength.\nLower k produces more detailed results; higher k produces smoother results in image generation. Setting k = 1 disables rescaling."
+      },
+      "tsr_sigma": {
+        "name": "tsr_sigma",
+        "tooltip": "Controls how early rescaling takes effect.\nLarger values take effect earlier."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "patched_model",
+        "tooltip": null
+      }
+    }
+  },
   "TextEncodeAceStepAudio": {
     "display_name": "TextEncodeAceStepAudio",
     "inputs": {
@@ -11632,10 +11740,12 @@
     },
     "outputs": {
       "0": {
-        "name": "model_file"
+        "name": "model_file",
+        "tooltip": null
       },
       "1": {
-        "name": "model task_id"
+        "name": "model task_id",
+        "tooltip": null
       }
     }
   },
@@ -11688,10 +11798,12 @@
     },
     "outputs": {
       "0": {
-        "name": "model_file"
+        "name": "model_file",
+        "tooltip": null
       },
       "1": {
-        "name": "model task_id"
+        "name": "model task_id",
+        "tooltip": null
       }
     }
   },
@@ -11706,10 +11818,12 @@
     },
     "outputs": {
       "0": {
-        "name": "model_file"
+        "name": "model_file",
+        "tooltip": null
       },
       "1": {
-        "name": "model task_id"
+        "name": "model task_id",
+        "tooltip": null
       }
     }
   },
@@ -11725,10 +11839,12 @@
     },
     "outputs": {
       "0": {
-        "name": "model_file"
+        "name": "model_file",
+        "tooltip": null
       },
       "1": {
-        "name": "retarget task_id"
+        "name": "retarget task_id",
+        "tooltip": null
       }
     }
   },
@@ -11741,10 +11857,12 @@
     },
     "outputs": {
       "0": {
-        "name": "model_file"
+        "name": "model_file",
+        "tooltip": null
       },
       "1": {
-        "name": "rig task_id"
+        "name": "rig task_id",
+        "tooltip": null
       }
     }
   },
@@ -11790,10 +11908,12 @@
     },
     "outputs": {
       "0": {
-        "name": "model_file"
+        "name": "model_file",
+        "tooltip": null
       },
       "1": {
-        "name": "model task_id"
+        "name": "model task_id",
+        "tooltip": null
       }
     }
   },
@@ -11821,10 +11941,12 @@
     },
     "outputs": {
       "0": {
-        "name": "model_file"
+        "name": "model_file",
+        "tooltip": null
       },
       "1": {
-        "name": "model task_id"
+        "name": "model task_id",
+        "tooltip": null
       }
     }
   },
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index aedc4e740..5a131fbaf 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -170,10 +170,6 @@
     "name": "Initial Grid Visibility",
     "tooltip": "Controls whether the grid is visible by default when a new 3D widget is created. This default can still be toggled individually for each widget after creation."
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "Initial Preview Visibility",
-    "tooltip": "Controls whether the preview screen is visible by default when a new 3D widget is created. This default can still be toggled individually for each widget after creation."
-  },
   "Comfy_Locale": {
     "name": "Language"
   },
@@ -330,6 +326,13 @@
       "small": "small"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "Sidebar style",
+    "options": {
+      "floating": "floating",
+      "connected": "connected"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "Unified sidebar width"
   },
@@ -351,13 +354,20 @@
     "tooltip": "Menu bar position. On mobile devices, the menu is always shown at the top.",
     "options": {
       "Disabled": "Disabled",
-      "Top": "Top",
-      "Bottom": "Bottom"
+      "Top": "Top"
     }
   },
   "Comfy_Validation_Workflows": {
     "name": "Validate workflows"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "Auto-scale layout (Vue nodes)",
+    "tooltip": "Automatically scale node positions when switching to Vue rendering to prevent overlap"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Modern Node Design (Vue Nodes)",
+    "tooltip": "Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Widget control mode",
     "tooltip": "Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.",
@@ -402,8 +412,7 @@
     "name": "Opened workflows position",
     "options": {
       "Sidebar": "Sidebar",
-      "Topbar": "Topbar",
-      "Topbar (2nd-row)": "Topbar (2nd-row)"
+      "Topbar": "Topbar"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index 64a722adc..31453f044 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -693,7 +693,6 @@
       "perspective": "Perspectiva"
     },
     "clearRecording": "Borrar grabación",
-    "edgeThreshold": "Umbral de borde",
     "export": "Exportar",
     "exportModel": "Exportar modelo",
     "exportRecording": "Exportar grabación",
@@ -706,7 +705,6 @@
     "materialMode": "Modo de material",
     "materialModes": {
       "depth": "Profundidad",
-      "lineart": "Dibujo lineal",
       "normal": "Normal",
       "original": "Original",
       "wireframe": "Malla"
@@ -1523,310 +1521,6 @@
       "searchPlaceholder": "Buscar..."
     },
     "sorting": "Ordenar por",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo",
-        "stable_zero123_example": "Estable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin: Imagen a Modelo",
-        "api_rodin_multiview_to_model": "Rodin: Multivista a Modelo",
-        "api_tripo_image_to_model": "Tripo: Imagen a Modelo",
-        "api_tripo_multiview_to_model": "Tripo: Multivista a Modelo",
-        "api_tripo_text_to_model": "Tripo: Texto a Modelo"
-      },
-      "Area Composition": {
-        "area_composition": "Composición de Área",
-        "area_composition_square_area_for_subject": "Composición de Área Cuadrada para el Sujeto"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 Edición M2M",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 Texto a Música Instrumental",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 Texto a Canción",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "Generación de Imagen",
-        "embedding_example": "Incrustación",
-        "gligen_textbox_example": "Caja de Texto Gligen",
-        "image2image": "Imagen a Imagen",
-        "inpaint_example": "Inpaint",
-        "inpaint_model_outpainting": "Outpaint",
-        "lora": "LoRA",
-        "lora_multiple": "LoRA Múltiple"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "ControlNet de Pose 2 Pasadas",
-        "controlnet_example": "ControlNet de Garabato",
-        "depth_controlnet": "ControlNet de Profundidad",
-        "depth_t2i_adapter": "Adaptador de Profundidad T2I",
-        "mixing_controlnets": "Mezcla de ControlNets"
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Canny Model",
-        "flux_depth_lora_example": "Flux Depth LoRA",
-        "flux_dev_checkpoint_example": "Flux Dev fp8",
-        "flux_dev_full_text_to_image": "Flux Dev texto a imagen completo",
-        "flux_fill_inpaint_example": "Flux Inpaint",
-        "flux_fill_outpaint_example": "Flux Outpaint",
-        "flux_kontext_dev_basic": "Flux Kontext Dev (Básico)",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev (Agrupado)",
-        "flux_redux_model_example": "Flux Redux Model",
-        "flux_schnell": "Flux Schnell fp8",
-        "flux_schnell_full_text_to_image": "Flux Schnell texto a imagen completo"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 Completo",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Rápido",
-        "hidream_i1_full": "HiDream I1 Completo",
-        "image_chroma_text_to_image": "Chroma texto a imagen",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
-        "image_lotus_depth_v1_1": "Lotus Depth",
-        "image_omnigen2_image_edit": "OmniGen2 Edición de Imagen",
-        "image_omnigen2_t2i": "OmniGen2 Texto a Imagen",
-        "sd3_5_large_blur": "SD3.5 Grande Desenfoque",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 Grande Canny ControlNet",
-        "sd3_5_large_depth": "SD3.5 Grande Profundidad",
-        "sd3_5_simple_example": "SD3.5 Simple",
-        "sdxl_refiner_prompt_example": "SDXL Refinador de Solicitud",
-        "sdxl_revision_text_prompts": "SDXL Revisión de Solicitud de Texto",
-        "sdxl_revision_zero_positive": "SDXL Revisión Cero Positivo",
-        "sdxl_simple_example": "SDXL Simple",
-        "sdxlturbo_example": "SDXL Turbo"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext Entrada de Múltiples Imágenes",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]: Texto a Imagen",
-        "api_ideogram_v3_t2i": "Ideogram V3: Texto a Imagen",
-        "api_luma_photon_i2i": "Luma Photon: Imagen a Imagen",
-        "api_luma_photon_style_ref": "Luma Photon: Referencia de Estilo",
-        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 Rellenar",
-        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 Texto a Imagen",
-        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 Texto a Imagen",
-        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 Imagen a Imagen",
-        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 Rellenar",
-        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 Múltiples Entradas",
-        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 Texto a Imagen",
-        "api_recraft_image_gen_with_color_control": "Recraft: Generación de Imagen con Control de Color",
-        "api_recraft_image_gen_with_style_control": "Recraft: Generación de Imagen con Control de Estilo",
-        "api_recraft_vector_gen": "Recraft: Generación de Vectores",
-        "api_runway_reference_to_image": "Runway: Referencia a Imagen",
-        "api_runway_text_to_image": "Runway: Texto a Imagen",
-        "api_stability_ai_i2i": "Stability AI: Imagen a Imagen",
-        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 Imagen a Imagen",
-        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 Texto a Imagen",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra Texto a Imagen"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini: Chat",
-        "api_openai_chat": "OpenAI: Chat"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "Flujo de Trabajo HiresFix ESRGAN",
-        "hiresfix_latent_workflow": "Ampliación",
-        "latent_upscale_different_prompt_model": "Ampliación Latente Modelo de Solicitud Diferente"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan Video Texto a Video",
-        "image_to_video": "SVD Imagen a Video",
-        "image_to_video_wan": "Wan 2.1 Imagen a Video",
-        "ltxv_image_to_video": "LTXV Imagen a Video",
-        "ltxv_text_to_video": "LTXV Texto a Video",
-        "mochi_text_to_video_example": "Mochi Texto a Video",
-        "text_to_video_wan": "Wan 2.1 Texto a Video",
-        "txt_to_image_to_video": "SVD Texto a Imagen a Video",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE Referencia a Video",
-        "video_wan_vace_14B_t2v": "Wan VACE Texto a Video",
-        "video_wan_vace_14B_v2v": "Wan VACE Control Video",
-        "video_wan_vace_flf2v": "Wan VACE Primer-Ultimo Fotograma",
-        "video_wan_vace_inpainting": "Wan VACE Inpainting",
-        "video_wan_vace_outpainting": "Wan VACE Outpainting",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet",
-        "wan2_1_fun_inp": "Wan 2.1 Inpainting"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax: Imagen a Video",
-        "api_hailuo_minimax_t2v": "MiniMax: Texto a Video",
-        "api_kling_effects": "Kling: Efectos de Video",
-        "api_kling_flf": "Kling: FLF2V",
-        "api_kling_i2v": "Kling: Imagen a Video",
-        "api_luma_i2v": "Luma: Imagen a Video",
-        "api_luma_t2v": "Luma: Texto a Video",
-        "api_moonvalley_image_to_video": "Moonvalley: Imagen a Video",
-        "api_moonvalley_text_to_video": "Moonvalley: Texto a Video",
-        "api_pika_i2v": "Pika: Imagen a Video",
-        "api_pika_scene": "Pika Escenas: Imágenes a Video",
-        "api_pixverse_i2v": "PixVerse: Imagen a Video",
-        "api_pixverse_t2v": "PixVerse: Texto a Video",
-        "api_pixverse_template_i2v": "PixVerse Plantillas: Imagen a Video",
-        "api_runway_first_last_frame": "Runway: Primer Último Fotograma a Video",
-        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo Imagen a Video",
-        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo Imagen a Video",
-        "api_veo2_i2v": "Veo2: Imagen a Video"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Genera modelos 3D a partir de imágenes individuales usando Hunyuan3D 2.0.",
-        "3d_hunyuan3d_multiview_to_model": "Genera modelos 3D a partir de múltiples vistas usando Hunyuan3D 2.0 MV.",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Genera modelos 3D a partir de múltiples vistas usando Hunyuan3D 2.0 MV Turbo.",
-        "stable_zero123_example": "Genera vistas 3D a partir de imágenes individuales usando Stable Zero123."
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Genera modelos 3D detallados a partir de una sola foto usando Rodin AI.",
-        "api_rodin_multiview_to_model": "Esculpe modelos 3D completos usando reconstrucción multivista de Rodin.",
-        "api_tripo_image_to_model": "Genera activos 3D profesionales a partir de imágenes 2D usando el motor Tripo.",
-        "api_tripo_multiview_to_model": "Construye modelos 3D a partir de múltiples ángulos con el escáner avanzado de Tripo.",
-        "api_tripo_text_to_model": "Crea objetos 3D a partir de descripciones con modelado basado en texto de Tripo."
-      },
-      "Area Composition": {
-        "area_composition": "Genera imágenes controlando la composición con áreas definidas.",
-        "area_composition_square_area_for_subject": "Genera imágenes con colocación consistente del sujeto usando composición de áreas."
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "Edita canciones existentes para cambiar el estilo y la letra usando ACE-Step v1 M2M.",
-        "audio_ace_step_1_t2a_instrumentals": "Genera música instrumental a partir de texto usando ACE-Step v1.",
-        "audio_ace_step_1_t2a_song": "Genera canciones con voz a partir de texto usando ACE-Step v1, soportando múltiples idiomas y personalización de estilo.",
-        "audio_stable_audio_example": "Genera audio a partir de descripciones de texto usando Stable Audio."
-      },
-      "Basics": {
-        "default": "Genera imágenes a partir de descripciones de texto.",
-        "embedding_example": "Genera imágenes usando inversión textual para estilos consistentes.",
-        "gligen_textbox_example": "Genera imágenes con colocación precisa de objetos usando cajas de texto.",
-        "image2image": "Transforma imágenes existentes usando indicaciones de texto.",
-        "inpaint_example": "Edita partes específicas de imágenes de manera fluida.",
-        "inpaint_model_outpainting": "Extiende imágenes más allá de sus límites originales.",
-        "lora": "Genera imágenes con modelos LoRA para estilos o temas especializados.",
-        "lora_multiple": "Genera imágenes combinando múltiples modelos LoRA."
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "Genera imágenes guiadas por referencias de pose usando ControlNet.",
-        "controlnet_example": "Genera imágenes guiadas por imágenes de garabato usando ControlNet.",
-        "depth_controlnet": "Genera imágenes guiadas por información de profundidad usando ControlNet.",
-        "depth_t2i_adapter": "Genera imágenes guiadas por información de profundidad usando el adaptador T2I.",
-        "mixing_controlnets": "Genera imágenes combinando múltiples modelos ControlNet."
-      },
-      "Flux": {
-        "flux_canny_model_example": "Genera imágenes guiadas por detección de bordes usando Flux Canny.",
-        "flux_depth_lora_example": "Genera imágenes guiadas por información de profundidad usando Flux LoRA.",
-        "flux_dev_checkpoint_example": "Genera imágenes usando la versión cuantizada fp8 de Flux Dev. Ideal para dispositivos con poca VRAM, solo requiere un archivo de modelo, pero la calidad es ligeramente inferior a la versión completa.",
-        "flux_dev_full_text_to_image": "Genera imágenes de alta calidad con la versión completa de Flux Dev. Requiere más VRAM y múltiples archivos de modelo, pero ofrece la mejor adherencia a la indicación y calidad de imagen.",
-        "flux_fill_inpaint_example": "Rellena partes faltantes de imágenes usando inpainting de Flux.",
-        "flux_fill_outpaint_example": "Extiende imágenes más allá de los límites usando outpainting de Flux.",
-        "flux_kontext_dev_basic": "Edita imágenes usando Flux Kontext con visibilidad total de nodos, ideal para aprender el flujo de trabajo.",
-        "flux_kontext_dev_grouped": "Versión simplificada de Flux Kontext con nodos agrupados para un espacio de trabajo más limpio.",
-        "flux_redux_model_example": "Genera imágenes transfiriendo el estilo de imágenes de referencia usando Flux Redux.",
-        "flux_schnell": "Genera imágenes rápidamente con la versión cuantizada fp8 de Flux Schnell. Perfecto para hardware de gama baja, solo requiere 4 pasos.",
-        "flux_schnell_full_text_to_image": "Genera imágenes rápidamente con la versión completa de Flux Schnell. Licencia Apache2.0, solo requiere 4 pasos manteniendo buena calidad."
-      },
-      "Image": {
-        "hidream_e1_full": "Edita imágenes con HiDream E1 - Modelo profesional de edición de imágenes por lenguaje natural.",
-        "hidream_i1_dev": "Genera imágenes con HiDream I1 Dev - Versión equilibrada con 28 pasos de inferencia, adecuada para hardware medio.",
-        "hidream_i1_fast": "Genera imágenes rápidamente con HiDream I1 Fast - Versión ligera con 16 pasos, ideal para previsualizaciones rápidas.",
-        "hidream_i1_full": "Genera imágenes con HiDream I1 Full - Versión completa con 50 pasos para la máxima calidad.",
-        "image_chroma_text_to_image": "Chroma está modificado de Flux y tiene algunos cambios en la arquitectura.",
-        "image_cosmos_predict2_2B_t2i": "Genera imágenes con Cosmos-Predict2 2B T2I, logrando generación física precisa, alta fidelidad y gran detalle.",
-        "image_lotus_depth_v1_1": "Ejecuta Lotus Depth en ComfyUI para estimación de profundidad monocular eficiente y detallada.",
-        "image_omnigen2_image_edit": "Edita imágenes con instrucciones en lenguaje natural usando las avanzadas capacidades de edición de imagen y soporte de texto de OmniGen2.",
-        "image_omnigen2_t2i": "Genera imágenes de alta calidad a partir de texto usando el modelo multimodal unificado 7B de OmniGen2 con arquitectura de doble vía.",
-        "sd3_5_large_blur": "Genera imágenes guiadas por imágenes de referencia borrosas usando SD 3.5.",
-        "sd3_5_large_canny_controlnet_example": "Genera imágenes guiadas por detección de bordes usando SD 3.5 Canny ControlNet.",
-        "sd3_5_large_depth": "Genera imágenes guiadas por información de profundidad usando SD 3.5.",
-        "sd3_5_simple_example": "Genera imágenes usando SD 3.5.",
-        "sdxl_refiner_prompt_example": "Mejora imágenes SDXL usando modelos refinadores.",
-        "sdxl_revision_text_prompts": "Genera imágenes transfiriendo conceptos de imágenes de referencia usando SDXL Revision.",
-        "sdxl_revision_zero_positive": "Genera imágenes usando tanto indicaciones de texto como imágenes de referencia con SDXL Revision.",
-        "sdxl_simple_example": "Genera imágenes de alta calidad usando SDXL.",
-        "sdxlturbo_example": "Genera imágenes en un solo paso usando SDXL Turbo."
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "Edita imágenes con Flux.1 Kontext max image.",
-        "api_bfl_flux_1_kontext_multiple_images_input": "Introduce múltiples imágenes y edítalas con Flux.1 Kontext.",
-        "api_bfl_flux_1_kontext_pro_image": "Edita imágenes con Flux.1 Kontext pro image.",
-        "api_bfl_flux_pro_t2i": "Genera imágenes con excelente seguimiento de indicaciones y calidad visual usando FLUX.1 Pro.",
-        "api_ideogram_v3_t2i": "Genera imágenes de calidad profesional con excelente alineación de indicaciones, fotorrealismo y renderizado de texto usando Ideogram V3.",
-        "api_luma_photon_i2i": "Guía la generación de imágenes usando una combinación de imágenes e indicaciones.",
-        "api_luma_photon_style_ref": "Genera imágenes combinando referencias de estilo con control preciso usando Luma Photon.",
-        "api_openai_dall_e_2_inpaint": "Edita imágenes usando inpainting con la API OpenAI Dall-E 2.",
-        "api_openai_dall_e_2_t2i": "Genera imágenes a partir de texto usando la API OpenAI Dall-E 2.",
-        "api_openai_dall_e_3_t2i": "Genera imágenes a partir de texto usando la API OpenAI Dall-E 3.",
-        "api_openai_image_1_i2i": "Genera imágenes a partir de imágenes usando la API OpenAI GPT Image 1.",
-        "api_openai_image_1_inpaint": "Edita imágenes usando inpainting con la API OpenAI GPT Image 1.",
-        "api_openai_image_1_multi_inputs": "Genera imágenes a partir de múltiples entradas usando la API OpenAI GPT Image 1.",
-        "api_openai_image_1_t2i": "Genera imágenes a partir de texto usando la API OpenAI GPT Image 1.",
-        "api_recraft_image_gen_with_color_control": "Genera imágenes con paletas de color personalizadas y visuales de marca usando Recraft.",
-        "api_recraft_image_gen_with_style_control": "Controla el estilo con ejemplos visuales, alinea la posición y ajusta objetos. Guarda y comparte estilos para consistencia de marca.",
-        "api_recraft_vector_gen": "Genera imágenes vectoriales de alta calidad a partir de texto usando el generador de vectores IA de Recraft.",
-        "api_runway_reference_to_image": "Genera nuevas imágenes basadas en estilos y composiciones de referencia con Runway.",
-        "api_runway_text_to_image": "Genera imágenes de alta calidad a partir de texto usando el modelo IA de Runway.",
-        "api_stability_ai_i2i": "Transforma imágenes con generación de alta calidad usando Stability AI, ideal para edición profesional y transferencia de estilo.",
-        "api_stability_ai_sd3_5_i2i": "Genera imágenes de alta calidad con excelente adherencia a la indicación. Perfecto para uso profesional a 1 megapíxel.",
-        "api_stability_ai_sd3_5_t2i": "Genera imágenes de alta calidad con excelente adherencia a la indicación. Perfecto para uso profesional a 1 megapíxel.",
-        "api_stability_ai_stable_image_ultra_t2i": "Genera imágenes de alta calidad con excelente adherencia a la indicación. Perfecto para uso profesional a 1 megapíxel."
-      },
-      "LLM API": {
-        "api_google_gemini": "Experimenta la IA multimodal de Google con las capacidades de razonamiento de Gemini.",
-        "api_openai_chat": "Interactúa con los avanzados modelos de lenguaje de OpenAI para conversaciones inteligentes."
-      },
-      "Upscaling": {
-        "esrgan_example": "Escala imágenes usando modelos ESRGAN para mejorar la calidad.",
-        "hiresfix_esrgan_workflow": "Escala imágenes usando modelos ESRGAN durante pasos intermedios.",
-        "hiresfix_latent_workflow": "Escala imágenes mejorando la calidad en el espacio latente.",
-        "latent_upscale_different_prompt_model": "Escala imágenes cambiando las indicaciones entre pasadas."
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Genera videos a partir de texto usando el modelo Hunyuan.",
-        "image_to_video": "Genera videos a partir de imágenes fijas.",
-        "image_to_video_wan": "Genera videos a partir de imágenes usando Wan 2.1.",
-        "ltxv_image_to_video": "Genera videos a partir de imágenes fijas.",
-        "ltxv_text_to_video": "Genera videos a partir de texto.",
-        "mochi_text_to_video_example": "Genera videos a partir de texto usando el modelo Mochi.",
-        "text_to_video_wan": "Genera videos a partir de texto usando Wan 2.1.",
-        "txt_to_image_to_video": "Genera videos creando primero imágenes a partir de texto.",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Genera videos con Cosmos-Predict2 2B Video2World, logrando simulaciones físicas precisas, alta fidelidad y consistencia.",
-        "video_wan2_1_fun_camera_v1_1_14B": "Genera videos de alta calidad con control avanzado de cámara usando el modelo completo de 14B.",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Genera videos dinámicos con movimientos de cámara cinematográficos usando Wan 2.1 Fun Camera 1.3B.",
-        "video_wan_vace_14B_ref2v": "Crea videos que coinciden con el estilo y contenido de una imagen de referencia.",
-        "video_wan_vace_14B_t2v": "Transforma descripciones de texto en videos de alta calidad. Soporta 480p y 720p con el modelo VACE-14B.",
-        "video_wan_vace_14B_v2v": "Genera videos controlando videos de entrada e imágenes de referencia usando Wan VACE.",
-        "video_wan_vace_flf2v": "Genera transiciones suaves definiendo fotogramas iniciales y finales. Soporta secuencias de fotogramas personalizadas.",
-        "video_wan_vace_inpainting": "Edita regiones específicas en videos preservando el contenido circundante.",
-        "video_wan_vace_outpainting": "Genera videos extendidos expandiendo el tamaño usando Wan VACE outpainting.",
-        "wan2_1_flf2v_720_f16": "Genera videos controlando primer y último fotograma usando Wan 2.1 FLF2V.",
-        "wan2_1_fun_control": "Genera videos guiados por pose, profundidad y bordes usando Wan 2.1 ControlNet.",
-        "wan2_1_fun_inp": "Genera videos a partir de fotogramas iniciales y finales usando Wan 2.1 inpainting."
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "Genera videos refinados a partir de imágenes y texto con integración CGI usando MiniMax.",
-        "api_hailuo_minimax_t2v": "Genera videos de alta calidad directamente desde texto. Explora las capacidades avanzadas de IA de MiniMax para crear narrativas visuales diversas con efectos CGI profesionales.",
-        "api_kling_effects": "Genera videos dinámicos aplicando efectos visuales a imágenes usando Kling.",
-        "api_kling_flf": "Genera videos controlando los primeros y últimos fotogramas.",
-        "api_kling_i2v": "Genera videos con excelente adherencia a la indicación para acciones, expresiones y movimientos de cámara usando Kling.",
-        "api_luma_i2v": "Convierte imágenes estáticas en animaciones mágicas de alta calidad al instante.",
-        "api_luma_t2v": "Genera videos de alta calidad usando indicaciones simples.",
-        "api_moonvalley_image_to_video": "Genera videos cinematográficos 1080p a partir de una imagen usando un modelo entrenado solo con datos licenciados.",
-        "api_moonvalley_text_to_video": "Genera videos cinematográficos 1080p a partir de texto usando un modelo entrenado solo con datos licenciados.",
-        "api_pika_i2v": "Genera videos animados suaves a partir de imágenes estáticas usando Pika AI.",
-        "api_pika_scene": "Genera videos que incorporan múltiples imágenes de entrada usando Pika Scenes.",
-        "api_pixverse_i2v": "Genera videos dinámicos a partir de imágenes estáticas con movimiento y efectos usando PixVerse.",
-        "api_pixverse_t2v": "Genera videos con interpretación precisa de indicaciones y dinámica visual impresionante.",
-        "api_pixverse_template_i2v": "Genera videos dinámicos a partir de imágenes estáticas con movimiento y efectos usando PixVerse.",
-        "api_runway_first_last_frame": "Genera transiciones de video suaves entre dos fotogramas clave con precisión de Runway.",
-        "api_runway_gen3a_turbo_image_to_video": "Genera videos cinematográficos a partir de imágenes estáticas usando Runway Gen3a Turbo.",
-        "api_runway_gen4_turo_image_to_video": "Genera videos dinámicos a partir de imágenes usando Runway Gen4 Turbo.",
-        "api_veo2_i2v": "Genera videos a partir de imágenes usando la API Google Veo2."
-      }
-    },
     "title": "Comienza con una Plantilla",
     "useCasesSelected": "{count} casos de uso"
   },
diff --git a/src/locales/es/nodeDefs.json b/src/locales/es/nodeDefs.json
index 89ee8d791..813c9c76a 100644
--- a/src/locales/es/nodeDefs.json
+++ b/src/locales/es/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "Genera una imagen usando una imagen de control (canny).",
-    "display_name": "Flux.1 Imagen de Control Canny",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny_high_threshold",
-        "tooltip": "Umbral alto para la detección de bordes Canny; se ignora si skip_processing es True"
-      },
-      "canny_low_threshold": {
-        "name": "canny_low_threshold",
-        "tooltip": "Umbral bajo para la detección de bordes Canny; se ignora si skip_processing es True"
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Fuerza de la guía para el proceso de generación de la imagen"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Prompt para la generación de la imagen"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Indica si se debe realizar upsampling en el prompt. Si está activo, modifica automáticamente el prompt para una generación más creativa, pero los resultados son no deterministas (la misma semilla no producirá exactamente el mismo resultado)."
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "La semilla aleatoria utilizada para crear el ruido."
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Indica si se debe omitir el preprocesamiento; establecer en True si control_image ya está canny-fied, False si es una imagen sin procesar."
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Número de pasos para el proceso de generación de la imagen"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "Genera una imagen usando una imagen de control (profundidad).",
-    "display_name": "Flux.1 Control de Profundidad de Imagen",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Fuerza de la guía para el proceso de generación de imagen"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Prompt para la generación de la imagen"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Indica si se realiza upsampling en el prompt. Si está activo, modifica automáticamente el prompt para una generación más creativa, pero los resultados no son deterministas (la misma semilla no producirá exactamente el mismo resultado)."
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "La semilla aleatoria utilizada para crear el ruido."
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Indica si se omite el preprocesamiento; establece en True si control_image ya tiene profundidad, False si es una imagen sin procesar."
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Número de pasos para el proceso de generación de imagen"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "Expande la imagen según el prompt.",
     "display_name": "Flux.1 Expandir imagen",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "Cargar 3D - Animación",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "alto"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "archivo_modelo"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "ancho"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "camera_info"
       },
-      "image": {
-        "name": "imagen"
-      },
       "model_file": {
         "name": "archivo_modelo"
       }
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index 00745b140..cb6a9436c 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -155,10 +155,6 @@
     "name": "Mostrar Cuadrícula",
     "tooltip": "Cambiar para mostrar cuadrícula por defecto"
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "Mostrar Previsualización",
-    "tooltip": "Cambiar para mostrar previsualización por defecto"
-  },
   "Comfy_Locale": {
     "name": "Idioma"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "Usar nuevo menú",
     "options": {
-      "Bottom": "Abajo",
       "Disabled": "Deshabilitado",
       "Top": "Arriba"
     },
@@ -384,8 +379,7 @@
     "name": "Posición de los flujos de trabajo abiertos",
     "options": {
       "Sidebar": "Barra lateral",
-      "Topbar": "Barra superior",
-      "Topbar (2nd-row)": "Barra superior (2ª fila)"
+      "Topbar": "Barra superior"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 6215a797f..b56f5d932 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -693,7 +693,6 @@
       "perspective": "Perspective"
     },
     "clearRecording": "Effacer l'enregistrement",
-    "edgeThreshold": "Seuil de Bordure",
     "export": "Exportation",
     "exportModel": "Exportation du modèle",
     "exportRecording": "Exporter l'enregistrement",
@@ -706,7 +705,6 @@
     "materialMode": "Mode Matériel",
     "materialModes": {
       "depth": "Profondeur",
-      "lineart": "Dessin au trait",
       "normal": "Normal",
       "original": "Original",
       "wireframe": "Fil de fer"
@@ -1523,310 +1521,6 @@
       "searchPlaceholder": "Rechercher..."
     },
     "sorting": "Trier par",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D Multivue",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D Turbo",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin : Image vers Modèle",
-        "api_rodin_multiview_to_model": "Rodin : Multivue vers Modèle",
-        "api_tripo_image_to_model": "Tripo : Image vers Modèle",
-        "api_tripo_multiview_to_model": "Tripo : Multivue vers Modèle",
-        "api_tripo_text_to_model": "Tripo : Texte vers Modèle"
-      },
-      "Area Composition": {
-        "area_composition": "Composition de Zone",
-        "area_composition_square_area_for_subject": "Composition de Zone Carrée pour le Sujet"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 Édition M2M",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 Texte vers Musique Instrumentale",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 Texte vers Chanson",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "Génération d'Image",
-        "embedding_example": "Intégration",
-        "gligen_textbox_example": "Boîte de Texte Gligen",
-        "image2image": "Image à Image",
-        "inpaint_example": "Inpaint",
-        "inpaint_model_outpainting": "Outpainting",
-        "lora": "LoRA",
-        "lora_multiple": "LoRA Multiple"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "2 Passes Pose Worship",
-        "controlnet_example": "ControlNet",
-        "depth_controlnet": "Profondeur ControlNet",
-        "depth_t2i_adapter": "Adaptateur Profondeur T2I",
-        "mixing_controlnets": "Mélange de ControlNets"
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Canny Model",
-        "flux_depth_lora_example": "Flux Depth LoRA",
-        "flux_dev_checkpoint_example": "Flux Dev fp8",
-        "flux_dev_full_text_to_image": "Flux Dev texte vers image complet",
-        "flux_fill_inpaint_example": "Flux Inpaint",
-        "flux_fill_outpaint_example": "Flux Outpaint",
-        "flux_kontext_dev_basic": "Flux Kontext Dev (Basique)",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev (Groupé)",
-        "flux_redux_model_example": "Flux Redux Model",
-        "flux_schnell": "Flux Schnell fp8",
-        "flux_schnell_full_text_to_image": "Flux Schnell texte vers image complet"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 Complet",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Rapide",
-        "hidream_i1_full": "HiDream I1 Complet",
-        "image_chroma_text_to_image": "Chroma texte vers image",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
-        "image_lotus_depth_v1_1": "Lotus Depth",
-        "image_omnigen2_image_edit": "OmniGen2 Édition d'Image",
-        "image_omnigen2_t2i": "OmniGen2 Texte vers Image",
-        "sd3_5_large_blur": "SD3.5 Grand Flou",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 Grand Canny ControlNet",
-        "sd3_5_large_depth": "SD3.5 Grande Profondeur",
-        "sd3_5_simple_example": "SD3.5 Simple",
-        "sdxl_refiner_prompt_example": "SDXL Refiner Prompt",
-        "sdxl_revision_text_prompts": "Révisions de Texte SDXL",
-        "sdxl_revision_zero_positive": "Révision Zéro Positive SDXL",
-        "sdxl_simple_example": "SDXL Simple",
-        "sdxlturbo_example": "SDXL Turbo"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext Entrée Multi-Images",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro] : Texte vers Image",
-        "api_ideogram_v3_t2i": "Ideogram V3 : Texte vers Image",
-        "api_luma_photon_i2i": "Luma Photon : Image vers Image",
-        "api_luma_photon_style_ref": "Luma Photon : Référence de Style",
-        "api_openai_dall_e_2_inpaint": "OpenAI : Dall-E 2 Inpainting",
-        "api_openai_dall_e_2_t2i": "OpenAI : Dall-E 2 Texte vers Image",
-        "api_openai_dall_e_3_t2i": "OpenAI : Dall-E 3 Texte vers Image",
-        "api_openai_image_1_i2i": "OpenAI : GPT-Image-1 Image vers Image",
-        "api_openai_image_1_inpaint": "OpenAI : GPT-Image-1 Inpainting",
-        "api_openai_image_1_multi_inputs": "OpenAI : GPT-Image-1 Entrées Multiples",
-        "api_openai_image_1_t2i": "OpenAI : GPT-Image-1 Texte vers Image",
-        "api_recraft_image_gen_with_color_control": "Recraft : Génération d’Image avec Contrôle des Couleurs",
-        "api_recraft_image_gen_with_style_control": "Recraft : Génération d’Image avec Contrôle du Style",
-        "api_recraft_vector_gen": "Recraft : Génération de Vecteur",
-        "api_runway_reference_to_image": "Runway : Référence vers Image",
-        "api_runway_text_to_image": "Runway : Texte vers Image",
-        "api_stability_ai_i2i": "Stability AI : Image vers Image",
-        "api_stability_ai_sd3_5_i2i": "Stability AI : SD3.5 Image vers Image",
-        "api_stability_ai_sd3_5_t2i": "Stability AI : SD3.5 Texte vers Image",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI : Stable Image Ultra Texte vers Image"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini : Chat",
-        "api_openai_chat": "OpenAI : Chat"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "Flux de Travail ESRGAN HiresFix",
-        "hiresfix_latent_workflow": "Flux de Travail Latent HiresFix",
-        "latent_upscale_different_prompt_model": "Modèle d'Agrandissement Latent Différent Prompt"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan Texte vers Vidéo",
-        "image_to_video": "SVD Image vers Vidéo",
-        "image_to_video_wan": "Wan 2.1 Image vers Vidéo",
-        "ltxv_image_to_video": "LTXV Image vers Vidéo",
-        "ltxv_text_to_video": "LTXV Texte vers Vidéo",
-        "mochi_text_to_video_example": "Mochi Texte vers Vidéo",
-        "text_to_video_wan": "Wan 2.1 Texte vers Vidéo",
-        "txt_to_image_to_video": "SVD Texte vers Image vers Vidéo",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE Référence vers Vidéo",
-        "video_wan_vace_14B_t2v": "Wan VACE Texte vers Vidéo",
-        "video_wan_vace_14B_v2v": "Wan VACE Contrôle Vidéo",
-        "video_wan_vace_flf2v": "Wan VACE Premier-Dernier Frame",
-        "video_wan_vace_inpainting": "Wan VACE Inpainting",
-        "video_wan_vace_outpainting": "Wan VACE Outpainting",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet",
-        "wan2_1_fun_inp": "Wan 2.1 Inpainting"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax : Image vers Vidéo",
-        "api_hailuo_minimax_t2v": "MiniMax : Texte vers Vidéo",
-        "api_kling_effects": "Kling : Effets Vidéo",
-        "api_kling_flf": "Kling : FLF2V",
-        "api_kling_i2v": "Kling : Image vers Vidéo",
-        "api_luma_i2v": "Luma : Image vers Vidéo",
-        "api_luma_t2v": "Luma : Texte vers Vidéo",
-        "api_moonvalley_image_to_video": "Moonvalley : Image vers Vidéo",
-        "api_moonvalley_text_to_video": "Moonvalley : Texte vers Vidéo",
-        "api_pika_i2v": "Pika : Image vers Vidéo",
-        "api_pika_scene": "Pika Scènes : Images vers Vidéo",
-        "api_pixverse_i2v": "PixVerse : Image vers Vidéo",
-        "api_pixverse_t2v": "PixVerse : Texte vers Vidéo",
-        "api_pixverse_template_i2v": "PixVerse Templates : Image vers Vidéo",
-        "api_runway_first_last_frame": "Runway : Premier Dernier Frame vers Vidéo",
-        "api_runway_gen3a_turbo_image_to_video": "Runway : Gen3a Turbo Image vers Vidéo",
-        "api_runway_gen4_turo_image_to_video": "Runway : Gen4 Turbo Image vers Vidéo",
-        "api_veo2_i2v": "Veo2 : Image vers Vidéo"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Générez des modèles 3D à partir d'images uniques avec Hunyuan3D 2.0.",
-        "3d_hunyuan3d_multiview_to_model": "Générez des modèles 3D à partir de plusieurs vues avec Hunyuan3D 2.0 MV.",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Générez des modèles 3D à partir de plusieurs vues avec Hunyuan3D 2.0 MV Turbo.",
-        "stable_zero123_example": "Générez des vues 3D à partir d'images uniques avec Stable Zero123."
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Générez des modèles 3D détaillés à partir d'une seule photo avec Rodin AI.",
-        "api_rodin_multiview_to_model": "Sculptez des modèles 3D complets à partir de plusieurs vues avec Rodin.",
-        "api_tripo_image_to_model": "Générez des assets 3D professionnels à partir d'images 2D avec Tripo.",
-        "api_tripo_multiview_to_model": "Construisez des modèles 3D à partir de multiples angles avec le scanner avancé de Tripo.",
-        "api_tripo_text_to_model": "Créez des objets 3D à partir de descriptions textuelles avec Tripo."
-      },
-      "Area Composition": {
-        "area_composition": "Générez des images en contrôlant la composition avec des zones définies.",
-        "area_composition_square_area_for_subject": "Générez des images avec un placement cohérent du sujet grâce à la composition de zones."
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "Éditez des chansons existantes pour changer le style et les paroles avec ACE-Step v1 M2M.",
-        "audio_ace_step_1_t2a_instrumentals": "Générez de la musique instrumentale à partir de texte avec ACE-Step v1.",
-        "audio_ace_step_1_t2a_song": "Générez des chansons avec voix à partir de texte avec ACE-Step v1, supportant plusieurs langues et la personnalisation du style.",
-        "audio_stable_audio_example": "Générez de l'audio à partir de descriptions textuelles avec Stable Audio."
-      },
-      "Basics": {
-        "default": "Générez des images à partir de descriptions textuelles.",
-        "embedding_example": "Générez des images avec inversion textuelle pour des styles cohérents.",
-        "gligen_textbox_example": "Générez des images avec un placement précis des objets grâce à des zones de texte.",
-        "image2image": "Transformez des images existantes à l'aide de prompts textuels.",
-        "inpaint_example": "Modifiez de façon transparente des parties spécifiques d'une image.",
-        "inpaint_model_outpainting": "Étendez les images au-delà de leurs limites d'origine.",
-        "lora": "Générez des images avec des modèles LoRA pour des styles ou sujets spécialisés.",
-        "lora_multiple": "Générez des images en combinant plusieurs modèles LoRA."
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "Générez des images guidées par des références de pose avec ControlNet.",
-        "controlnet_example": "Générez des images guidées par des images de gribouillage avec ControlNet.",
-        "depth_controlnet": "Générez des images guidées par la profondeur avec ControlNet.",
-        "depth_t2i_adapter": "Générez des images guidées par la profondeur avec l'adaptateur T2I.",
-        "mixing_controlnets": "Générez des images en combinant plusieurs modèles ControlNet."
-      },
-      "Flux": {
-        "flux_canny_model_example": "Générez des images guidées par détection de contours avec Flux Canny.",
-        "flux_depth_lora_example": "Générez des images guidées par la profondeur avec Flux LoRA.",
-        "flux_dev_checkpoint_example": "Générez des images avec la version quantifiée fp8 de Flux Dev. Idéal pour les appareils à faible VRAM, nécessite un seul fichier modèle, mais la qualité d'image est légèrement inférieure à la version complète.",
-        "flux_dev_full_text_to_image": "Générez des images de haute qualité avec la version complète de Flux Dev. Nécessite plus de VRAM et plusieurs fichiers modèles, mais offre la meilleure fidélité au prompt et la meilleure qualité d'image.",
-        "flux_fill_inpaint_example": "Complétez les parties manquantes d'une image avec Flux inpainting.",
-        "flux_fill_outpaint_example": "Étendez les images au-delà des limites avec Flux outpainting.",
-        "flux_kontext_dev_basic": "Éditez des images avec Flux Kontext (tous les nœuds visibles), parfait pour apprendre le workflow.",
-        "flux_kontext_dev_grouped": "Version simplifiée de Flux Kontext avec des nœuds groupés pour un espace de travail plus propre.",
-        "flux_redux_model_example": "Générez des images en transférant le style d'images de référence avec Flux Redux.",
-        "flux_schnell": "Générez rapidement des images avec la version quantifiée fp8 de Flux Schnell. Parfait pour le matériel bas de gamme, nécessite seulement 4 étapes.",
-        "flux_schnell_full_text_to_image": "Générez rapidement des images avec la version complète de Flux Schnell. Licence Apache2.0, seulement 4 étapes tout en maintenant une bonne qualité."
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 - Modèle professionnel d'édition d'image par langage naturel.",
-        "hidream_i1_dev": "HiDream I1 Dev - Version équilibrée avec 28 étapes d'inférence, adaptée au matériel intermédiaire.",
-        "hidream_i1_fast": "HiDream I1 Fast - Version légère avec 16 étapes, idéale pour des aperçus rapides sur du matériel bas de gamme.",
-        "hidream_i1_full": "HiDream I1 Full - Version complète avec 50 étapes pour une qualité maximale.",
-        "image_chroma_text_to_image": "Chroma est une version modifiée de Flux avec quelques changements d'architecture.",
-        "image_cosmos_predict2_2B_t2i": "Générez des images avec Cosmos-Predict2 2B T2I, pour une génération physique précise, haute fidélité et riche en détails.",
-        "image_lotus_depth_v1_1": "Exécutez Lotus Depth dans ComfyUI pour une estimation de profondeur monoculaire efficace et détaillée.",
-        "image_omnigen2_image_edit": "Éditez des images avec des instructions en langage naturel grâce aux capacités avancées d'édition d'image et de texte d'OmniGen2.",
-        "image_omnigen2_t2i": "Générez des images de haute qualité à partir de texte avec le modèle multimodal unifié 7B d'OmniGen2 et une architecture à double voie.",
-        "sd3_5_large_blur": "Générez des images guidées par des images de référence floues avec SD 3.5.",
-        "sd3_5_large_canny_controlnet_example": "Générez des images guidées par détection de contours avec SD 3.5 Canny ControlNet.",
-        "sd3_5_large_depth": "Générez des images guidées par la profondeur avec SD 3.5.",
-        "sd3_5_simple_example": "Générez des images avec SD 3.5.",
-        "sdxl_refiner_prompt_example": "Améliorez les images SDXL avec des modèles de raffinement.",
-        "sdxl_revision_text_prompts": "Générez des images en transférant des concepts d'images de référence avec SDXL Revision.",
-        "sdxl_revision_zero_positive": "Générez des images en utilisant à la fois des prompts textuels et des images de référence avec SDXL Revision.",
-        "sdxl_simple_example": "Générez des images de haute qualité avec SDXL.",
-        "sdxlturbo_example": "Générez des images en une seule étape avec SDXL Turbo."
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "Éditez des images avec Flux.1 Kontext max image.",
-        "api_bfl_flux_1_kontext_multiple_images_input": "Entrez plusieurs images et éditez-les avec Flux.1 Kontext.",
-        "api_bfl_flux_1_kontext_pro_image": "Éditez des images avec Flux.1 Kontext pro image.",
-        "api_bfl_flux_pro_t2i": "Générez des images avec un excellent suivi de prompt et une qualité visuelle avec FLUX.1 Pro.",
-        "api_ideogram_v3_t2i": "Générez des images de qualité professionnelle avec un excellent alignement prompt-image, du photoréalisme et du rendu de texte avec Ideogram V3.",
-        "api_luma_photon_i2i": "Guidez la génération d'image en combinant images et prompt.",
-        "api_luma_photon_style_ref": "Générez des images en combinant des références de style avec un contrôle précis avec Luma Photon.",
-        "api_openai_dall_e_2_inpaint": "Éditez des images avec inpainting avec l'API OpenAI Dall-E 2.",
-        "api_openai_dall_e_2_t2i": "Générez des images à partir de texte avec l'API OpenAI Dall-E 2.",
-        "api_openai_dall_e_3_t2i": "Générez des images à partir de texte avec l'API OpenAI Dall-E 3.",
-        "api_openai_image_1_i2i": "Générez des images à partir d'images avec l'API OpenAI GPT Image 1.",
-        "api_openai_image_1_inpaint": "Éditez des images avec inpainting avec l'API OpenAI GPT Image 1.",
-        "api_openai_image_1_multi_inputs": "Générez des images à partir de plusieurs entrées avec l'API OpenAI GPT Image 1.",
-        "api_openai_image_1_t2i": "Générez des images à partir de texte avec l'API OpenAI GPT Image 1.",
-        "api_recraft_image_gen_with_color_control": "Générez des images avec des palettes de couleurs personnalisées et des visuels de marque avec Recraft.",
-        "api_recraft_image_gen_with_style_control": "Contrôlez le style avec des exemples visuels, alignez le positionnement et affinez les objets. Stockez et partagez des styles pour une cohérence de marque.",
-        "api_recraft_vector_gen": "Générez des images vectorielles de haute qualité à partir de texte avec le générateur vectoriel IA de Recraft.",
-        "api_runway_reference_to_image": "Générez de nouvelles images basées sur des styles et des compositions de référence avec Runway.",
-        "api_runway_text_to_image": "Générez des images de haute qualité à partir de texte avec le modèle IA de Runway.",
-        "api_stability_ai_i2i": "Transformez des images avec une génération de haute qualité avec Stability AI, idéal pour l'édition professionnelle et le transfert de style.",
-        "api_stability_ai_sd3_5_i2i": "Générez des images de haute qualité avec une excellente fidélité au prompt. Parfait pour un usage professionnel à 1 mégapixel.",
-        "api_stability_ai_sd3_5_t2i": "Générez des images de haute qualité avec une excellente fidélité au prompt. Parfait pour un usage professionnel à 1 mégapixel.",
-        "api_stability_ai_stable_image_ultra_t2i": "Générez des images de haute qualité avec une excellente fidélité au prompt. Parfait pour un usage professionnel à 1 mégapixel."
-      },
-      "LLM API": {
-        "api_google_gemini": "Découvrez l'IA multimodale de Google avec les capacités de raisonnement de Gemini.",
-        "api_openai_chat": "Discutez avec les modèles de langage avancés d'OpenAI pour des conversations intelligentes."
-      },
-      "Upscaling": {
-        "esrgan_example": "Agrandissez les images avec des modèles ESRGAN pour améliorer la qualité.",
-        "hiresfix_esrgan_workflow": "Agrandissez les images avec des modèles ESRGAN lors des étapes intermédiaires.",
-        "hiresfix_latent_workflow": "Agrandissez les images en améliorant la qualité dans l'espace latent.",
-        "latent_upscale_different_prompt_model": "Agrandissez les images en changeant les prompts entre les passes."
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Générez des vidéos à partir de texte avec le modèle Hunyuan.",
-        "image_to_video": "Générez des vidéos à partir d'images fixes.",
-        "image_to_video_wan": "Générez des vidéos à partir d'images avec Wan 2.1.",
-        "ltxv_image_to_video": "Générez des vidéos à partir d'images fixes.",
-        "ltxv_text_to_video": "Générez des vidéos à partir de texte.",
-        "mochi_text_to_video_example": "Générez des vidéos à partir de texte avec le modèle Mochi.",
-        "text_to_video_wan": "Générez des vidéos à partir de texte avec Wan 2.1.",
-        "txt_to_image_to_video": "Générez des vidéos en créant d'abord des images à partir de texte.",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Générez des vidéos avec Cosmos-Predict2 2B Video2World, pour des simulations physiques précises, haute fidélité et cohérentes.",
-        "video_wan2_1_fun_camera_v1_1_14B": "Générez des vidéos de haute qualité avec un contrôle avancé de la caméra avec le modèle complet 14B.",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Générez des vidéos dynamiques avec des mouvements de caméra cinématographiques avec Wan 2.1 Fun Camera 1.3B.",
-        "video_wan_vace_14B_ref2v": "Créez des vidéos qui correspondent au style et au contenu d'une image de référence.",
-        "video_wan_vace_14B_t2v": "Transformez des descriptions textuelles en vidéos de haute qualité. Prend en charge 480p et 720p avec le modèle VACE-14B.",
-        "video_wan_vace_14B_v2v": "Générez des vidéos en contrôlant des vidéos d'entrée et des images de référence avec Wan VACE.",
-        "video_wan_vace_flf2v": "Générez des transitions vidéo fluides en définissant les images de début et de fin. Prend en charge les séquences d'images personnalisées.",
-        "video_wan_vace_inpainting": "Éditez des régions spécifiques dans des vidéos tout en préservant le contenu environnant.",
-        "video_wan_vace_outpainting": "Générez des vidéos étendues en agrandissant la taille avec Wan VACE outpainting.",
-        "wan2_1_flf2v_720_f16": "Générez des vidéos en contrôlant la première et la dernière image avec Wan 2.1 FLF2V.",
-        "wan2_1_fun_control": "Générez des vidéos guidées par la pose, la profondeur et les contours avec Wan 2.1 ControlNet.",
-        "wan2_1_fun_inp": "Générez des vidéos à partir d'images de début et de fin avec Wan 2.1 inpainting."
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "Générez des vidéos raffinées à partir d'images et de texte avec intégration CGI avec MiniMax.",
-        "api_hailuo_minimax_t2v": "Générez des vidéos de haute qualité directement à partir de texte. Découvrez les capacités avancées de MiniMax pour créer des récits visuels variés avec des effets CGI professionnels.",
-        "api_kling_effects": "Générez des vidéos dynamiques en appliquant des effets visuels à des images avec Kling.",
-        "api_kling_flf": "Générez des vidéos en contrôlant les premières et dernières images.",
-        "api_kling_i2v": "Générez des vidéos avec une excellente fidélité au prompt pour les actions, expressions et mouvements de caméra avec Kling.",
-        "api_luma_i2v": "Transformez des images statiques en animations magiques de haute qualité instantanément.",
-        "api_luma_t2v": "Générez des vidéos de haute qualité à partir de prompts simples.",
-        "api_moonvalley_image_to_video": "Générez des vidéos cinématographiques 1080p à partir d'une image avec un modèle entraîné uniquement sur des données sous licence.",
-        "api_moonvalley_text_to_video": "Générez des vidéos cinématographiques 1080p à partir de texte avec un modèle entraîné uniquement sur des données sous licence.",
-        "api_pika_i2v": "Générez des vidéos animées fluides à partir d'images fixes avec Pika AI.",
-        "api_pika_scene": "Générez des vidéos qui incorporent plusieurs images d'entrée avec Pika Scenes.",
-        "api_pixverse_i2v": "Générez des vidéos dynamiques à partir d'images fixes avec mouvement et effets avec PixVerse.",
-        "api_pixverse_t2v": "Générez des vidéos avec une interprétation précise du prompt et une dynamique visuelle impressionnante.",
-        "api_pixverse_template_i2v": "Générez des vidéos dynamiques à partir d'images fixes avec mouvement et effets avec PixVerse.",
-        "api_runway_first_last_frame": "Générez des transitions vidéo fluides entre deux images clés avec la précision de Runway.",
-        "api_runway_gen3a_turbo_image_to_video": "Générez des vidéos cinématographiques à partir d'images fixes avec Runway Gen3a Turbo.",
-        "api_runway_gen4_turo_image_to_video": "Générez des vidéos dynamiques à partir d'images avec Runway Gen4 Turbo.",
-        "api_veo2_i2v": "Générez des vidéos à partir d'images avec l'API Google Veo2."
-      }
-    },
     "title": "Commencez avec un modèle",
     "useCasesSelected": "{count} Cas d'usage"
   },
diff --git a/src/locales/fr/nodeDefs.json b/src/locales/fr/nodeDefs.json
index 440adcc01..9a8305574 100644
--- a/src/locales/fr/nodeDefs.json
+++ b/src/locales/fr/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "Générer une image en utilisant une image de contrôle (canny).",
-    "display_name": "Flux.1 Image de Contrôle Canny",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny_high_threshold",
-        "tooltip": "Seuil haut pour la détection de contours Canny ; ignoré si skip_processing est à True"
-      },
-      "canny_low_threshold": {
-        "name": "canny_low_threshold",
-        "tooltip": "Seuil bas pour la détection de contours Canny ; ignoré si skip_processing est à True"
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Intensité de la guidance pour le processus de génération d'image"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Invite pour la génération d'image"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Indique s'il faut effectuer un suréchantillonnage sur l'invite. Si activé, modifie automatiquement l'invite pour une génération plus créative, mais les résultats sont non déterministes (la même graine ne produira pas exactement le même résultat)."
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "La graine aléatoire utilisée pour créer le bruit."
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Indique s'il faut ignorer le prétraitement ; mettre à True si control_image est déjà canny-fiée, à False si c'est une image brute."
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Nombre d'étapes pour le processus de génération d'image"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "Générer une image en utilisant une image de contrôle (profondeur).",
-    "display_name": "Flux.1 Contrôle de Profondeur Image",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Intensité de la guidance pour le processus de génération d'image"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Invite pour la génération d'image"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Indique s'il faut effectuer un suréchantillonnage sur l'invite. Si activé, modifie automatiquement l'invite pour une génération plus créative, mais les résultats sont non déterministes (la même graine ne produira pas exactement le même résultat)."
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "La graine aléatoire utilisée pour créer le bruit."
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Indique s'il faut ignorer le prétraitement ; mettez sur True si control_image est déjà en profondeur, False si c'est une image brute."
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Nombre d'étapes pour le processus de génération d'image"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "Étend l’image selon le prompt.",
     "display_name": "Flux.1 Élargir l’image",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "Charger 3D - Animation",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "hauteur"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "fichier_modèle"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "largeur"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "informations_camera"
       },
-      "image": {
-        "name": "image"
-      },
       "model_file": {
         "name": "fichier_modèle"
       }
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index 8072c9d30..b208c7aa0 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -155,10 +155,6 @@
     "name": "Afficher la Grille",
     "tooltip": "Basculer pour afficher la grille par défaut"
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "Afficher l'Aperçu",
-    "tooltip": "Basculer pour afficher l'aperçu par défaut"
-  },
   "Comfy_Locale": {
     "name": "Langue"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "Utiliser le nouveau menu",
     "options": {
-      "Bottom": "Bas",
       "Disabled": "Désactivé",
       "Top": "Haut"
     },
@@ -384,8 +379,7 @@
     "name": "Position des flux de travail ouverts",
     "options": {
       "Sidebar": "Barre latérale",
-      "Topbar": "Barre supérieure",
-      "Topbar (2nd-row)": "Barre supérieure (2ème rangée)"
+      "Topbar": "Barre supérieure"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 742b489bc..d0234db3e 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -693,7 +693,6 @@
       "perspective": "パースペクティブ"
     },
     "clearRecording": "録画をクリア",
-    "edgeThreshold": "エッジ閾値",
     "export": "エクスポート",
     "exportModel": "モデルをエクスポート",
     "exportRecording": "録画をエクスポート",
@@ -706,7 +705,6 @@
     "materialMode": "マテリアルモード",
     "materialModes": {
       "depth": "深度",
-      "lineart": "線画",
       "normal": "ノーマル",
       "original": "オリジナル",
       "wireframe": "ワイヤーフレーム"
@@ -1523,310 +1521,6 @@
       "searchPlaceholder": "検索..."
     },
     "sorting": "並び替え",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3Dマルチビュー",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3Dターボ",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin:画像からモデルへ",
-        "api_rodin_multiview_to_model": "Rodin:マルチビューからモデルへ",
-        "api_tripo_image_to_model": "Tripo:画像からモデルへ",
-        "api_tripo_multiview_to_model": "Tripo:マルチビューからモデルへ",
-        "api_tripo_text_to_model": "Tripo:テキストからモデルへ"
-      },
-      "Area Composition": {
-        "area_composition": "エリア構成",
-        "area_composition_square_area_for_subject": "主題のためのエリア構成スクエア"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 M2M編集",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1テキストからインスト音楽",
-        "audio_ace_step_1_t2a_song": "ACE Step v1テキストから歌",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "画像生成",
-        "embedding_example": "埋め込み",
-        "gligen_textbox_example": "Gligenテキストボックス",
-        "image2image": "画像から画像へ",
-        "inpaint_example": "Inpaint",
-        "inpaint_model_outpainting": "Outpainting",
-        "lora": "LoRA",
-        "lora_multiple": "LoRA複数"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "2 Pass Pose Worship",
-        "controlnet_example": "Scribble ControlNet",
-        "depth_controlnet": "Depth ControlNet",
-        "depth_t2i_adapter": "Depth T2Iアダプタ",
-        "mixing_controlnets": "ControlNetsの混合"
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Cannyモデル",
-        "flux_depth_lora_example": "Flux Depth LoRA",
-        "flux_dev_checkpoint_example": "Flux Dev fp8",
-        "flux_dev_full_text_to_image": "Flux Devフルテキストから画像へ",
-        "flux_fill_inpaint_example": "Flux Inpaint",
-        "flux_fill_outpaint_example": "Flux Outpaint",
-        "flux_kontext_dev_basic": "Flux Kontext Dev（ベーシック）",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev（グループ化）",
-        "flux_redux_model_example": "Flux Reduxモデル",
-        "flux_schnell": "Flux Schnell fp8",
-        "flux_schnell_full_text_to_image": "Flux Schnellフルテキストから画像へ"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 Full",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Fast",
-        "hidream_i1_full": "HiDream I1 Full",
-        "image_chroma_text_to_image": "Chromaテキストから画像へ",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
-        "image_lotus_depth_v1_1": "Lotus Depth",
-        "image_omnigen2_image_edit": "OmniGen2画像編集",
-        "image_omnigen2_t2i": "OmniGen2テキストから画像へ",
-        "sd3_5_large_blur": "SD3.5ラージブラー",
-        "sd3_5_large_canny_controlnet_example": "SD3.5ラージキャニーコントロールネット",
-        "sd3_5_large_depth": "SD3.5ラージデプス",
-        "sd3_5_simple_example": "SD3.5シンプル",
-        "sdxl_refiner_prompt_example": "SDXLリファイナープロンプト",
-        "sdxl_revision_text_prompts": "SDXLリビジョンテキストプロンプト",
-        "sdxl_revision_zero_positive": "SDXLリビジョンゼロポジティブ",
-        "sdxl_simple_example": "SDXLシンプル",
-        "sdxlturbo_example": "SDXLターボ"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext複数画像入力",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]:テキストから画像へ",
-        "api_ideogram_v3_t2i": "Ideogram V3:テキストから画像へ",
-        "api_luma_photon_i2i": "Luma Photon:画像から画像へ",
-        "api_luma_photon_style_ref": "Luma Photon:スタイル参照",
-        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2インペイント",
-        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2テキストから画像へ",
-        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3テキストから画像へ",
-        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1画像から画像へ",
-        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1インペイント",
-        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1複数入力",
-        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1テキストから画像へ",
-        "api_recraft_image_gen_with_color_control": "Recraft:カラーコントロール画像生成",
-        "api_recraft_image_gen_with_style_control": "Recraft:スタイルコントロール画像生成",
-        "api_recraft_vector_gen": "Recraft:ベクター生成",
-        "api_runway_reference_to_image": "Runway:リファレンスから画像へ",
-        "api_runway_text_to_image": "Runway:テキストから画像へ",
-        "api_stability_ai_i2i": "Stability AI:画像から画像へ",
-        "api_stability_ai_sd3_5_i2i": "Stability AI:SD3.5画像から画像へ",
-        "api_stability_ai_sd3_5_t2i": "Stability AI:SD3.5テキストから画像へ",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI:Stable Image Ultraテキストから画像へ"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini:チャット",
-        "api_openai_chat": "OpenAI:チャット"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGANワークフロー",
-        "hiresfix_latent_workflow": "HiresFix Latentワークフロー",
-        "latent_upscale_different_prompt_model": "Latent Upscale異なるプロンプトモデル"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuanビデオテキストからビデオへ",
-        "image_to_video": "SVD画像からビデオへ",
-        "image_to_video_wan": "Wan 2.1画像からビデオへ",
-        "ltxv_image_to_video": "LTXV画像からビデオへ",
-        "ltxv_text_to_video": "LTXVテキストからビデオへ",
-        "mochi_text_to_video_example": "Mochiテキストからビデオへ",
-        "text_to_video_wan": "Wan 2.1テキストからビデオへ",
-        "txt_to_image_to_video": "SVDテキストから画像へ、画像からビデオへ",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACEリファレンスからビデオへ",
-        "video_wan_vace_14B_t2v": "Wan VACEテキストからビデオへ",
-        "video_wan_vace_14B_v2v": "Wan VACEコントロールビデオ",
-        "video_wan_vace_flf2v": "Wan VACEファースト-ラストフレーム",
-        "video_wan_vace_inpainting": "Wan VACEインペインティング",
-        "video_wan_vace_outpainting": "Wan VACEアウトペインティング",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet",
-        "wan2_1_fun_inp": "Wan 2.1インペインティング"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax:画像から動画へ",
-        "api_hailuo_minimax_t2v": "MiniMax:テキストから動画へ",
-        "api_kling_effects": "Kling:ビデオエフェクト",
-        "api_kling_flf": "Kling:FLF2V",
-        "api_kling_i2v": "Kling:画像から動画へ",
-        "api_luma_i2v": "Luma:画像から動画へ",
-        "api_luma_t2v": "Luma:テキストから動画へ",
-        "api_moonvalley_image_to_video": "Moonvalley:画像からビデオへ",
-        "api_moonvalley_text_to_video": "Moonvalley:テキストからビデオへ",
-        "api_pika_i2v": "Pika:画像から動画へ",
-        "api_pika_scene": "Pikaシーン:画像から動画へ",
-        "api_pixverse_i2v": "PixVerse:画像から動画へ",
-        "api_pixverse_t2v": "PixVerse:テキストから動画へ",
-        "api_pixverse_template_i2v": "PixVerse Templates:画像から動画へ",
-        "api_runway_first_last_frame": "Runway:ファーストラストフレームから動画へ",
-        "api_runway_gen3a_turbo_image_to_video": "Runway:Gen3a Turbo画像から動画へ",
-        "api_runway_gen4_turo_image_to_video": "Runway:Gen4 Turbo画像から動画へ",
-        "api_veo2_i2v": "Veo2:画像から動画へ"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0で単一画像から3Dモデルを生成します。",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MVで複数ビューから3Dモデルを生成します。",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turboで複数ビューから3Dモデルを生成します。",
-        "stable_zero123_example": "Stable Zero123で単一画像から3Dビューを生成します。"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin AIで1枚の写真から高精細3Dモデルを生成します。",
-        "api_rodin_multiview_to_model": "Rodinで複数視点から3Dモデルを再構築します。",
-        "api_tripo_image_to_model": "Tripoエンジンで2D画像からプロ品質3Dアセットを生成します。",
-        "api_tripo_multiview_to_model": "Tripoの高度なスキャナーで複数角度から3Dモデルを構築します。",
-        "api_tripo_text_to_model": "Tripoでテキスト説明から3Dオブジェクトを作成します。"
-      },
-      "Area Composition": {
-        "area_composition": "エリアで画像構成をコントロールします。",
-        "area_composition_square_area_for_subject": "エリア構成で被写体の配置を一貫させます。"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE-Step v1 M2Mで既存楽曲のスタイルや歌詞を編集します。",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1でテキストからインスト音楽を生成します。",
-        "audio_ace_step_1_t2a_song": "ACE-Step v1でテキストからボーカル付き楽曲を生成。多言語・スタイルカスタマイズ対応。",
-        "audio_stable_audio_example": "テキスト説明から音声を生成します。"
-      },
-      "Basics": {
-        "default": "テキスト説明から画像を生成します。",
-        "embedding_example": "テキスト反転で一貫したスタイルの画像を生成します。",
-        "gligen_textbox_example": "テキストボックスでオブジェクトの位置を正確に指定して画像を生成します。",
-        "image2image": "テキストプロンプトを使って既存の画像を変換します。",
-        "inpaint_example": "画像の特定部分をシームレスに編集します。",
-        "inpaint_model_outpainting": "画像を元の境界を超えて拡張します。",
-        "lora": "LoRAモデルで特定のスタイルやテーマの画像を生成します。",
-        "lora_multiple": "複数のLoRAモデルを組み合わせて画像を生成します。"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "ポーズ参照で画像を生成します。",
-        "controlnet_example": "落書き参照画像で画像生成をガイドします。",
-        "depth_controlnet": "深度情報で画像生成をガイドします。",
-        "depth_t2i_adapter": "T2Iアダプターで素早く深度認識画像を生成します。",
-        "mixing_controlnets": "複数のControlNetモデルを組み合わせて画像を生成します。"
-      },
-      "Flux": {
-        "flux_canny_model_example": "エッジ検出でFlux画像生成をガイドします。",
-        "flux_depth_lora_example": "深度情報でFlux LoRA画像生成をガイドします。",
-        "flux_dev_checkpoint_example": "Flux Dev fp8量子化版で画像生成。低VRAMデバイス向け、モデルファイル1つでOK、画質はフル版よりやや低め。",
-        "flux_dev_full_text_to_image": "Flux Devフル版で高品質画像生成。大きなVRAMと複数モデルファイルが必要ですが、プロンプト追従性・画質ともに最高です。",
-        "flux_fill_inpaint_example": "Fluxで画像の欠損部分を補完します。",
-        "flux_fill_outpaint_example": "Fluxで画像を元の枠を超えて拡張します。",
-        "flux_kontext_dev_basic": "Flux Kontext（全ノード表示）で画像を編集。ワークフロー学習に最適です。",
-        "flux_kontext_dev_grouped": "ノードをグループ化したFlux Kontext。作業スペースがすっきりします。",
-        "flux_redux_model_example": "参照画像のスタイルを転送し、Flux Reduxで新しい画像を生成します。",
-        "flux_schnell": "Flux Schnell fp8量子化版で高速画像生成。低スペック向け、4ステップで完了。",
-        "flux_schnell_full_text_to_image": "Flux Schnellフル版で高速かつ高品質な画像生成。Apache2.0ライセンス、4ステップで完了。"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 - プロ向け自然言語画像編集モデル。",
-        "hidream_i1_dev": "HiDream I1 Dev - 28ステップ推論のバランス型。中程度のハードウェア向け。",
-        "hidream_i1_fast": "HiDream I1 Fast - 16ステップの軽量版。低スペックでも高速プレビュー可能。",
-        "hidream_i1_full": "HiDream I1 Full - 50ステップのフル版。最高画質。",
-        "image_chroma_text_to_image": "ChromaはFluxをベースに構造を一部変更したモデルです。",
-        "image_cosmos_predict2_2B_t2i": "Cosmos-Predict2 2B T2Iで物理的に正確で高精細・高忠実度な画像を生成します。",
-        "image_lotus_depth_v1_1": "ComfyUIでLotus Depthを実行し、高精細な単眼深度推定を実現します。",
-        "image_omnigen2_image_edit": "OmniGen2の高度な画像編集・テキスト描画機能で自然言語指示による画像編集が可能です。",
-        "image_omnigen2_t2i": "OmniGen2の統合7Bマルチモーダルモデルとデュアルパス構造で高品質な画像をテキストから生成します。",
-        "sd3_5_large_blur": "SD 3.5でぼかし参照画像を使って画像生成をガイドします。",
-        "sd3_5_large_canny_controlnet_example": "SD 3.5 Canny ControlNetでエッジ検出を使って画像生成をガイドします。",
-        "sd3_5_large_depth": "SD 3.5で深度情報を使って画像生成をガイドします。",
-        "sd3_5_simple_example": "SD 3.5で画像を生成します。",
-        "sdxl_refiner_prompt_example": "RefinerモデルでSDXL画像を強化します。",
-        "sdxl_revision_text_prompts": "参照画像のコンセプトを転送し、SDXL Revisionで画像生成をガイドします。",
-        "sdxl_revision_zero_positive": "テキストプロンプトと参照画像を組み合わせてSDXL Revisionで画像生成します。",
-        "sdxl_simple_example": "SDXLで高品質な画像を生成します。",
-        "sdxlturbo_example": "SDXL Turboでワンステップ画像生成。"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "Flux.1 Kontext max imageで画像を編集します。",
-        "api_bfl_flux_1_kontext_multiple_images_input": "複数画像を入力し、Flux.1 Kontextで編集します。",
-        "api_bfl_flux_1_kontext_pro_image": "Flux.1 Kontext pro imageで画像を編集します。",
-        "api_bfl_flux_pro_t2i": "FLUX.1 Proで優れたプロンプト追従性と画質の画像を生成します。",
-        "api_ideogram_v3_t2i": "Ideogram V3でプロンプト整合性・フォトリアリズム・テキスト描画に優れたプロ品質画像を生成します。",
-        "api_luma_photon_i2i": "画像とプロンプトを組み合わせて画像生成をガイドします。",
-        "api_luma_photon_style_ref": "Luma Photonでスタイル参照をブレンドし、正確にコントロールします。",
-        "api_openai_dall_e_2_inpaint": "OpenAI Dall-E 2 APIでインペイントを行います。",
-        "api_openai_dall_e_2_t2i": "OpenAI Dall-E 2 APIでテキストから画像を生成します。",
-        "api_openai_dall_e_3_t2i": "OpenAI Dall-E 3 APIでテキストから画像を生成します。",
-        "api_openai_image_1_i2i": "OpenAI GPT Image 1 APIで画像から画像を生成します。",
-        "api_openai_image_1_inpaint": "OpenAI GPT Image 1 APIでインペイントを行います。",
-        "api_openai_image_1_multi_inputs": "OpenAI GPT Image 1 APIで複数入力から画像を生成します。",
-        "api_openai_image_1_t2i": "OpenAI GPT Image 1 APIでテキストから画像を生成します。",
-        "api_recraft_image_gen_with_color_control": "Recraftでカスタムカラーパレットやブランドビジュアルの画像を生成します。",
-        "api_recraft_image_gen_with_style_control": "ビジュアル例でスタイル・位置合わせ・オブジェクト微調整を制御。スタイル保存・共有でブランド一貫性を実現。",
-        "api_recraft_vector_gen": "RecraftのAIベクター生成でテキストから高品質ベクター画像を生成します。",
-        "api_runway_reference_to_image": "RunwayのAIで参照スタイル・構図から新しい画像を生成します。",
-        "api_runway_text_to_image": "RunwayのAIモデルでテキストから高品質画像を生成します。",
-        "api_stability_ai_i2i": "Stability AIで高品質な画像変換。プロ編集やスタイル転送に最適。",
-        "api_stability_ai_sd3_5_i2i": "Stability AI SD3.5で高品質・高プロンプト追従性の画像変換。1メガピクセル対応。",
-        "api_stability_ai_sd3_5_t2i": "Stability AI SD3.5で高品質・高プロンプト追従性の画像を生成。1メガピクセル対応。",
-        "api_stability_ai_stable_image_ultra_t2i": "高品質・高プロンプト追従性の画像を生成。1メガピクセルでプロ用途に最適。"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google GeminiのマルチモーダルAIと推論能力を体験できます。",
-        "api_openai_chat": "OpenAIの高度な言語モデルとインテリジェントな会話を楽しめます。"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGANモデルで画像をアップスケールします。",
-        "hiresfix_esrgan_workflow": "中間ステップでESRGANモデルを使って画像をアップスケールします。",
-        "hiresfix_latent_workflow": "latent空間で画像品質を向上させます。",
-        "latent_upscale_different_prompt_model": "アップスケールしつつ各パスでプロンプトを変更します。"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuanモデルでテキストから動画を生成します。",
-        "image_to_video": "静止画像から動画を生成します。",
-        "image_to_video_wan": "Wan 2.1で画像から動画を生成します。",
-        "ltxv_image_to_video": "静止画像から動画を生成します。",
-        "ltxv_text_to_video": "テキストから動画を生成します。",
-        "mochi_text_to_video_example": "Mochiモデルでテキストから動画を生成します。",
-        "text_to_video_wan": "Wan 2.1でテキストから動画を生成します。",
-        "txt_to_image_to_video": "まず画像を生成し、それを動画に変換します。",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos-Predict2 2B Video2Worldで物理的に正確・高忠実度・一貫性のある動画を生成します。",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14Bで高度なカメラ制御の高品質動画を生成します。",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3Bで映画的なカメラワークの動画を生成します。",
-        "video_wan_vace_14B_ref2v": "Wan VACEで参照画像のスタイル・内容に合った動画を生成します。",
-        "video_wan_vace_14B_t2v": "Wan VACE-14Bでテキストから高品質な動画を生成。480p/720p対応。",
-        "video_wan_vace_14B_v2v": "Wan VACEで入力動画や参照画像をコントロールして新しい動画を生成します。",
-        "video_wan_vace_flf2v": "Wan VACEで開始・終了フレームを指定し、滑らかな動画遷移を生成します。",
-        "video_wan_vace_inpainting": "Wan VACEで動画の特定領域を編集し、周囲の内容を保持します。",
-        "video_wan_vace_outpainting": "Wan VACEのアウトペイントで動画サイズを拡張します。",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2Vで最初と最後のフレームを制御して720p動画を生成します。",
-        "wan2_1_fun_control": "Wan 2.1 ControlNetでポーズ・深度・エッジ制御による動画生成。",
-        "wan2_1_fun_inp": "Wan 2.1で開始・終了フレームから動画を生成します。"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMaxで画像＋テキストからCGI統合の洗練動画を生成します。",
-        "api_hailuo_minimax_t2v": "MiniMaxでテキストから高品質動画を直接生成。CGI効果や多彩なスタイルに対応。",
-        "api_kling_effects": "Klingで画像にビジュアルエフェクトを適用し、ダイナミックな動画を生成します。",
-        "api_kling_flf": "Klingで最初と最後のフレームを制御して動画を生成します。",
-        "api_kling_i2v": "Klingでアクション・表情・カメラワークのプロンプト追従性に優れた動画を生成します。",
-        "api_luma_i2v": "Lumaで静止画像から高品質アニメーションを瞬時に生成します。",
-        "api_luma_t2v": "Lumaでシンプルなプロンプトから高品質動画を生成します。",
-        "api_moonvalley_image_to_video": "Moonvalleyで画像から1080p映画品質動画を生成。学習データは全てライセンス済み。",
-        "api_moonvalley_text_to_video": "Moonvalleyでテキストから1080p映画品質動画を生成。学習データは全てライセンス済み。",
-        "api_pika_i2v": "Pika AIで静止画像から滑らかなアニメ動画を生成します。",
-        "api_pika_scene": "Pika Scenesで複数画像を組み込んだ動画を生成します。",
-        "api_pixverse_i2v": "PixVerseで静止画像から動きやエフェクトのあるダイナミック動画を生成します。",
-        "api_pixverse_t2v": "PixVerseでプロンプト解釈が正確でダイナミックな動画を生成します。",
-        "api_pixverse_template_i2v": "PixVerseで静止画像から動きやエフェクトのあるダイナミック動画を生成します。",
-        "api_runway_first_last_frame": "Runwayで2つのキーフレーム間を滑らかに遷移する動画を生成します。",
-        "api_runway_gen3a_turbo_image_to_video": "Runway Gen3a Turboで静止画像から映画品質動画を生成します。",
-        "api_runway_gen4_turo_image_to_video": "Runway Gen4 Turboで画像からダイナミックな動画を生成します。",
-        "api_veo2_i2v": "Google Veo2 APIで画像から動画を生成します。"
-      }
-    },
     "title": "テンプレートを利用して開始",
     "useCasesSelected": "{count}件のユースケース"
   },
diff --git a/src/locales/ja/nodeDefs.json b/src/locales/ja/nodeDefs.json
index 868d26540..b8fd06011 100644
--- a/src/locales/ja/nodeDefs.json
+++ b/src/locales/ja/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "コントロール画像（canny）を使用して画像を生成します。",
-    "display_name": "Flux.1 Canny コントロール画像",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny_high_threshold",
-        "tooltip": "Cannyエッジ検出の高しきい値。skip_processingがTrueの場合は無視されます。"
-      },
-      "canny_low_threshold": {
-        "name": "canny_low_threshold",
-        "tooltip": "Cannyエッジ検出の低しきい値。skip_processingがTrueの場合は無視されます。"
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "画像生成プロセスのガイダンス強度"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "画像生成のためのプロンプト"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "プロンプトのアップサンプリングを行うかどうか。有効にすると、より創造的な生成のためにプロンプトが自動的に修正されますが、結果は非決定的になります（同じシードでも全く同じ結果にはなりません）。"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "ノイズ生成に使用されるランダムシード。"
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "前処理をスキップするかどうか。control_imageがすでにcanny化されている場合はTrue、生の画像の場合はFalseに設定してください。"
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "画像生成プロセスのステップ数"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "コントロール画像（深度）を使用して画像を生成します。",
-    "display_name": "Flux.1 デプスコントロール画像",
-    "inputs": {
-      "control_after_generate": {
-        "name": "生成後コントロール"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "ガイダンス",
-        "tooltip": "画像生成プロセスのガイダンス強度"
-      },
-      "prompt": {
-        "name": "プロンプト",
-        "tooltip": "画像生成のためのプロンプト"
-      },
-      "prompt_upsampling": {
-        "name": "プロンプトアップサンプリング",
-        "tooltip": "プロンプトにアップサンプリングを行うかどうか。有効にすると、より創造的な生成のためにプロンプトが自動的に修正されますが、結果は非決定的になります（同じシードでも全く同じ結果にはなりません）。"
-      },
-      "seed": {
-        "name": "シード",
-        "tooltip": "ノイズ生成に使用されるランダムシード。"
-      },
-      "skip_preprocessing": {
-        "name": "前処理をスキップ",
-        "tooltip": "前処理をスキップするかどうか。control_imageがすでに深度化されている場合はTrue、生の画像の場合はFalseに設定してください。"
-      },
-      "steps": {
-        "name": "ステップ数",
-        "tooltip": "画像生成プロセスのステップ数"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "プロンプトに基づいて画像をアウトペイントします。",
     "display_name": "Flux.1 画像拡張",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "3D読み込み - アニメーション",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "高さ"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "モデルファイル"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "幅"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "カメラ情報"
       },
-      "image": {
-        "name": "画像"
-      },
       "model_file": {
         "name": "モデルファイル"
       }
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index 81967d210..1b7af44eb 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -155,10 +155,6 @@
     "name": "グリッドを表示",
     "tooltip": "デフォルトでグリッドを表示するには切り替えます"
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "プレビューを表示",
-    "tooltip": "デフォルトでプレビューを表示するには切り替えます"
-  },
   "Comfy_Locale": {
     "name": "言語"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "新しいメニューを使用",
     "options": {
-      "Bottom": "下",
       "Disabled": "無効",
       "Top": "上"
     },
@@ -384,8 +379,7 @@
     "name": "開いているワークフローの位置",
     "options": {
       "Sidebar": "サイドバー",
-      "Topbar": "トップバー",
-      "Topbar (2nd-row)": "トップバー（2行目）"
+      "Topbar": "トップバー"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 243b0d83a..7fd53b3b5 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -693,7 +693,6 @@
       "perspective": "원근법"
     },
     "clearRecording": "녹화 지우기",
-    "edgeThreshold": "엣지 임계값",
     "export": "내보내기",
     "exportModel": "모델 내보내기",
     "exportRecording": "녹화 내보내기",
@@ -706,7 +705,6 @@
     "materialMode": "재질 모드",
     "materialModes": {
       "depth": "깊이",
-      "lineart": "라인아트",
       "normal": "노멀(normal)",
       "original": "원본",
       "wireframe": "와이어프레임"
@@ -1523,310 +1521,6 @@
       "searchPlaceholder": "검색..."
     },
     "sorting": "정렬 기준",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV 터보",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin: 이미지 → 모델",
-        "api_rodin_multiview_to_model": "Rodin: 다중뷰 → 모델",
-        "api_tripo_image_to_model": "Tripo: 이미지 → 모델",
-        "api_tripo_multiview_to_model": "Tripo: 다중뷰 → 모델",
-        "api_tripo_text_to_model": "Tripo: 텍스트 → 모델"
-      },
-      "Area Composition": {
-        "area_composition": "영역 구성",
-        "area_composition_square_area_for_subject": "주제용 사각형 영역 구성"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 M2M 편집",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 텍스트 → 연주곡",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 텍스트 → 노래",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "이미지 생성",
-        "embedding_example": "임베딩",
-        "gligen_textbox_example": "글리젠 텍스트박스",
-        "image2image": "이미지 → 이미지",
-        "inpaint_example": "인페인트",
-        "inpaint_model_outpainting": "아웃페인팅",
-        "lora": "LoRA",
-        "lora_multiple": "다중 LoRA"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "포즈 컨트롤넷 2패스",
-        "controlnet_example": "스크리블 컨트롤넷",
-        "depth_controlnet": "깊이 컨트롤넷",
-        "depth_t2i_adapter": "깊이 T2I 어댑터",
-        "mixing_controlnets": "컨트롤넷 혼합"
-      },
-      "Flux": {
-        "flux_canny_model_example": "FLUX 캐니 모델",
-        "flux_depth_lora_example": "FLUX 깊이 로라",
-        "flux_dev_checkpoint_example": "FLUX Dev fp8",
-        "flux_dev_full_text_to_image": "FLUX Dev 전체 텍스트 투 이미지",
-        "flux_fill_inpaint_example": "FLUX 인페인트",
-        "flux_fill_outpaint_example": "FLUX 아웃페인트",
-        "flux_kontext_dev_basic": "FLUX Kontext Dev(기본)",
-        "flux_kontext_dev_grouped": "FLUX Kontext Dev(그룹화)",
-        "flux_redux_model_example": "FLUX Redux 모델",
-        "flux_schnell": "FLUX Schnell fp8",
-        "flux_schnell_full_text_to_image": "FLUX Schnell Full 텍스트 → 이미지"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 Full",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Fast",
-        "hidream_i1_full": "HiDream I1 Full",
-        "image_chroma_text_to_image": "Chroma 텍스트 → 이미지",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
-        "image_lotus_depth_v1_1": "Lotus Depth",
-        "image_omnigen2_image_edit": "OmniGen2 이미지 편집",
-        "image_omnigen2_t2i": "OmniGen2 텍스트 → 이미지",
-        "sd3_5_large_blur": "SD3.5 Large 블러",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 Large 캐니 컨트롤넷",
-        "sd3_5_large_depth": "SD3.5 Large 깊이",
-        "sd3_5_simple_example": "SD3.5 간단 예제",
-        "sdxl_refiner_prompt_example": "SDXL Refiner 프롬프트",
-        "sdxl_revision_text_prompts": "SDXL Revision 텍스트 프롬프트",
-        "sdxl_revision_zero_positive": "SDXL Revision Zero Positive",
-        "sdxl_simple_example": "SDXL 간단 예제",
-        "sdxlturbo_example": "SDXL 터보"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL FLUX.1 Kontext 맥스",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL FLUX.1 Kontext 다중 이미지 입력",
-        "api_bfl_flux_1_kontext_pro_image": "BFL FLUX.1 Kontext 프로",
-        "api_bfl_flux_pro_t2i": "BFL FLUX[Pro]: 텍스트 → 이미지",
-        "api_ideogram_v3_t2i": "Ideogram V3: 텍스트 → 이미지",
-        "api_luma_photon_i2i": "Luma Photon: 이미지 → 이미지",
-        "api_luma_photon_style_ref": "Luma Photon: 스타일 참조",
-        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 인페인트",
-        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 텍스트 → 이미지",
-        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 텍스트 → 이미지",
-        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 이미지 → 이미지",
-        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 인페인트",
-        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 멀티 입력",
-        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 텍스트 → 이미지",
-        "api_recraft_image_gen_with_color_control": "Recraft: 색상 제어 이미지 생성",
-        "api_recraft_image_gen_with_style_control": "Recraft: 스타일 제어 이미지 생성",
-        "api_recraft_vector_gen": "Recraft: 벡터 생성",
-        "api_runway_reference_to_image": "Runway: 참조 → 이미지",
-        "api_runway_text_to_image": "Runway: 텍스트 → 이미지",
-        "api_stability_ai_i2i": "Stability AI: 이미지 → 이미지",
-        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 이미지 → 이미지",
-        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 텍스트 → 이미지",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra 텍스트 → 이미지"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini: 채팅",
-        "api_openai_chat": "OpenAI: 채팅"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGAN 워크플로",
-        "hiresfix_latent_workflow": "이미지 확대",
-        "latent_upscale_different_prompt_model": "잠재 이미지 확대 다른 프롬프트 모델"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan 비디오 텍스트 → 비디오",
-        "image_to_video": "SVD 이미지 → 비디오",
-        "image_to_video_wan": "Wan 2.1 이미지 → 비디오",
-        "ltxv_image_to_video": "LTXV 이미지 → 비디오",
-        "ltxv_text_to_video": "LTXV 텍스트 → 비디오",
-        "mochi_text_to_video_example": "Mochi 텍스트 → 비디오",
-        "text_to_video_wan": "Wan 2.1 텍스트 → 비디오",
-        "txt_to_image_to_video": "SVD 텍스트 → 이미지 → 비디오",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE 참조 → 비디오",
-        "video_wan_vace_14B_t2v": "Wan VACE 텍스트 → 비디오",
-        "video_wan_vace_14B_v2v": "Wan VACE 컨트롤 비디오",
-        "video_wan_vace_flf2v": "Wan VACE 첫-마지막 프레임",
-        "video_wan_vace_inpainting": "Wan VACE 인페인팅",
-        "video_wan_vace_outpainting": "Wan VACE 아웃페인팅",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 컨트롤넷",
-        "wan2_1_fun_inp": "Wan 2.1 인페인팅"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax: 이미지 → 비디오",
-        "api_hailuo_minimax_t2v": "MiniMax: 텍스트 → 비디오",
-        "api_kling_effects": "Kling: 비디오 효과",
-        "api_kling_flf": "Kling: FLF2V",
-        "api_kling_i2v": "Kling: 이미지 → 비디오",
-        "api_luma_i2v": "Luma: 이미지 → 비디오",
-        "api_luma_t2v": "Luma: 텍스트 → 비디오",
-        "api_moonvalley_image_to_video": "Moonvalley: 이미지 → 비디오",
-        "api_moonvalley_text_to_video": "Moonvalley: 텍스트 → 비디오",
-        "api_pika_i2v": "Pika: 이미지 → 비디오",
-        "api_pika_scene": "Pika 장면: 이미지 → 비디오",
-        "api_pixverse_i2v": "PixVerse: 이미지 → 비디오",
-        "api_pixverse_t2v": "PixVerse: 텍스트 → 비디오",
-        "api_pixverse_template_i2v": "PixVerse 템플릿: 이미지 → 비디오",
-        "api_runway_first_last_frame": "Runway: 첫-마지막 프레임 → 비디오",
-        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo 이미지 → 비디오",
-        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo 이미지 → 비디오",
-        "api_veo2_i2v": "Veo2: 이미지 → 비디오"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0으로 단일 이미지에서 3D 모델을 생성합니다.",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV로 여러 뷰에서 3D 모델을 생성합니다.",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo로 여러 뷰에서 3D 모델을 생성합니다.",
-        "stable_zero123_example": "Stable Zero123으로 단일 이미지에서 3D 뷰를 생성합니다."
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin AI로 단일 사진에서 정밀한 3D 모델을 생성합니다.",
-        "api_rodin_multiview_to_model": "Rodin의 다각도 재구성으로 종합적인 3D 모델을 만듭니다.",
-        "api_tripo_image_to_model": "Tripo 엔진으로 2D 이미지에서 전문가용 3D 에셋을 생성합니다.",
-        "api_tripo_multiview_to_model": "Tripo의 고급 스캐너로 여러 각도에서 3D 모델을 만듭니다.",
-        "api_tripo_text_to_model": "Tripo의 텍스트 기반 모델링으로 설명에서 3D 객체를 만듭니다."
-      },
-      "Area Composition": {
-        "area_composition": "정의된 영역으로 구성을 제어하여 이미지를 생성합니다.",
-        "area_composition_square_area_for_subject": "일관된 피사체 배치를 위해 영역 구성을 활용해 이미지를 생성합니다."
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE-Step v1 M2M으로 기존 곡의 스타일과 가사를 변경합니다.",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1로 텍스트 프롬프트에서 연주곡을 생성합니다.",
-        "audio_ace_step_1_t2a_song": "ACE-Step v1로 텍스트 프롬프트에서 노래(보컬 포함)를 생성하며, 다국어 및 스타일 커스터마이징을 지원합니다.",
-        "audio_stable_audio_example": "Stable Audio로 텍스트 프롬프트에서 오디오를 생성합니다."
-      },
-      "Basics": {
-        "default": "텍스트 프롬프트로 이미지를 생성합니다.",
-        "embedding_example": "일관된 스타일을 위해 텍스트 인버전을 사용하여 이미지를 생성합니다.",
-        "gligen_textbox_example": "텍스트 박스를 사용해 객체의 위치를 정밀하게 지정하여 이미지를 생성합니다.",
-        "image2image": "텍스트 프롬프트를 사용하여 기존 이미지를 변환합니다.",
-        "inpaint_example": "이미지의 특정 부분을 자연스럽게 편집합니다.",
-        "inpaint_model_outpainting": "이미지를 원래 경계 너머로 확장합니다.",
-        "lora": "특정 스타일이나 주제를 위한 LoRA 모델로 이미지를 생성합니다.",
-        "lora_multiple": "여러 LoRA 모델을 결합하여 이미지를 생성합니다."
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "컨트롤넷으로 포즈 참조를 활용해 이미지를 생성합니다.",
-        "controlnet_example": "컨트롤넷으로 스크리블 참조 이미지를 활용해 이미지를 생성합니다.",
-        "depth_controlnet": "컨트롤넷으로 깊이 정보를 활용해 이미지를 생성합니다.",
-        "depth_t2i_adapter": "T2I 어댑터로 깊이 정보를 활용해 이미지를 생성합니다.",
-        "mixing_controlnets": "여러 컨트롤넷 모델을 결합해 이미지를 생성합니다."
-      },
-      "Flux": {
-        "flux_canny_model_example": "FLUX 캐니 컨트롤넷으로 에지 감지에 따라 이미지를 생성합니다.",
-        "flux_depth_lora_example": "FLUX LoRA로 깊이 정보를 활용해 이미지를 생성합니다.",
-        "flux_dev_checkpoint_example": "FLUX Dev fp8 양자화 버전으로 이미지를 생성합니다. VRAM이 제한된 장치에 적합하며, 모델 파일 하나만 필요하지만 화질은 전체 버전보다 약간 낮습니다.",
-        "flux_dev_full_text_to_image": "FLUX Dev 전체 버전으로 고품질 이미지를 생성합니다. 더 많은 VRAM과 여러 모델 파일이 필요하지만, 최고의 프롬프트 반영력과 화질을 제공합니다.",
-        "flux_fill_inpaint_example": "FLUX 인페인팅으로 이미지의 누락된 부분을 채웁니다.",
-        "flux_fill_outpaint_example": "FFLUXlux 아웃페인팅으로 이미지를 경계 너머로 확장합니다.",
-        "flux_kontext_dev_basic": "FLUX Kontext의 전체 노드 표시로 이미지를 편집합니다. 워크플로 학습에 적합합니다.",
-        "flux_kontext_dev_grouped": "노드가 그룹화된 FLUX Kontext의 간소화 버전으로 작업 공간이 더 깔끔합니다.",
-        "flux_redux_model_example": "FLUX Redux로 참조 이미지의 스타일을 전송하여 이미지를 생성합니다.",
-        "flux_schnell": "FLUX Schnell fp8 양자화 버전으로 이미지를 빠르게 생성합니다. 저사양 하드웨어에 이상적이며, 4단계만으로 이미지를 생성할 수 있습니다.",
-        "flux_schnell_full_text_to_image": "FLUX Schnell Full 버전을 이용해 이미지를 빠르게 생성합니다. Apache2.0 라이선스를 사용하며, 4단계만으로 좋은 화질을 유지합니다."
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 - 전문적인 자연어 이미지 편집 모델로 이미지를 편집합니다.",
-        "hidream_i1_dev": "HiDream I1 Dev - 28 스텝의 균형 잡힌 버전으로, 중간급 하드웨어에 적합합니다.",
-        "hidream_i1_fast": "HiDream I1 Fast - 16 스텝의 경량 버전으로, 저사양 하드웨어에서 빠른 미리보기에 적합합니다.",
-        "hidream_i1_full": "HiDream I1 Full - 50 스텝의 완전 버전으로, 최고의 품질을 제공합니다.",
-        "image_chroma_text_to_image": "Chroma는 FLUX에서 수정된 모델로, 아키텍처에 일부 변화가 있습니다.",
-        "image_cosmos_predict2_2B_t2i": "Cosmos-Predict2 2B T2I로 물리적으로 정확하고 고해상도, 디테일이 풍부한 이미지를 생성합니다.",
-        "image_lotus_depth_v1_1": "Lotus Depth로 고효율 단안 깊이 추정 및 디테일 보존이 뛰어난 zero-shot 이미지를 생성합니다.",
-        "image_omnigen2_image_edit": "OmniGen2의 고급 이미지 편집 기능과 텍스트 렌더링 지원으로 자연어 지시로 이미지를 편집합니다.",
-        "image_omnigen2_t2i": "OmniGen2의 통합 7B 멀티모달 모델과 듀얼 패스 아키텍처로 텍스트 프롬프트에서 고품질 이미지를 생성합니다.",
-        "sd3_5_large_blur": "SD 3.5로 흐릿한 참조 이미지를 활용해 이미지를 생성합니다.",
-        "sd3_5_large_canny_controlnet_example": "SD 3.5 캐니 컨트롤넷으로 에지 감지에 따라 이미지를 생성합니다.",
-        "sd3_5_large_depth": "SD 3.5로 깊이 정보를 활용해 이미지를 생성합니다.",
-        "sd3_5_simple_example": "SD 3.5로 이미지를 생성합니다.",
-        "sdxl_refiner_prompt_example": "SDXL Refiner 모델로 이미지를 향상시킵니다.",
-        "sdxl_revision_text_prompts": "SDXL Revision으로 참조 이미지의 개념을 전송하여 이미지를 생성합니다.",
-        "sdxl_revision_zero_positive": "SDXL Revision으로 텍스트 프롬프트와 참조 이미지를 함께 사용해 이미지를 생성합니다.",
-        "sdxl_simple_example": "SDXL로 고품질 이미지를 생성합니다.",
-        "sdxlturbo_example": "SDXL Turbo로 한 번에 이미지를 생성합니다."
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "FLUX.1 Kontext 맥스 이미지로 이미지를 편집합니다.",
-        "api_bfl_flux_1_kontext_multiple_images_input": "여러 이미지를 입력하고 FLUX.1 Kontext로 편집합니다.",
-        "api_bfl_flux_1_kontext_pro_image": "FLUX.1 Kontext 프로 이미지로 이미지를 편집합니다.",
-        "api_bfl_flux_pro_t2i": "FLUX.1 Pro로 뛰어난 프롬프트 반영과 시각적 품질로 이미지를 생성합니다.",
-        "api_ideogram_v3_t2i": "Ideogram V3로 뛰어난 프롬프트 일치, 포토리얼리즘, 텍스트 렌더링으로 전문가 수준의 이미지를 생성합니다.",
-        "api_luma_photon_i2i": "이미지와 프롬프트를 조합하여 이미지 생성을 가이드합니다.",
-        "api_luma_photon_style_ref": "Luma Photon으로 스타일 참조를 혼합하여 정밀하게 제어하며 이미지를 생성합니다.",
-        "api_openai_dall_e_2_inpaint": "OpenAI Dall-E 2 API로 인페인팅을 통해 이미지를 편집합니다.",
-        "api_openai_dall_e_2_t2i": "OpenAI Dall-E 2 API로 텍스트 프롬프트에서 이미지를 생성합니다.",
-        "api_openai_dall_e_3_t2i": "OpenAI Dall-E 3 API로 텍스트 프롬프트에서 이미지를 생성합니다.",
-        "api_openai_image_1_i2i": "OpenAI GPT Image 1 API로 입력 이미지에서 이미지를 생성합니다.",
-        "api_openai_image_1_inpaint": "OpenAI GPT Image 1 API로 인페인팅을 통해 이미지를 편집합니다.",
-        "api_openai_image_1_multi_inputs": "OpenAI GPT Image 1 API로 여러 입력에서 이미지를 생성합니다.",
-        "api_openai_image_1_t2i": "OpenAI GPT Image 1 API로 텍스트 프롬프트에서 이미지를 생성합니다.",
-        "api_recraft_image_gen_with_color_control": "Recraft로 맞춤 색상 팔레트와 브랜드 비주얼로 이미지를 생성합니다.",
-        "api_recraft_image_gen_with_style_control": "시각적 예시로 스타일을 제어하고, 위치를 맞추며, 객체를 미세 조정합니다. 스타일을 저장 및 공유하여 브랜드 일관성을 유지할 수 있습니다.",
-        "api_recraft_vector_gen": "Recraft의 AI 벡터 생성기로 텍스트 프롬프트에서 고품질 벡터 이미지를 생성합니다.",
-        "api_runway_reference_to_image": "Runway의 AI로 참조 스타일과 구성을 기반으로 새 이미지를 생성합니다.",
-        "api_runway_text_to_image": "Runway의 AI 모델로 텍스트 프롬프트에서 고품질 이미지를 생성합니다.",
-        "api_stability_ai_i2i": "Stability AI로 고품질 이미지 변환 및 스타일 전환을 지원합니다.",
-        "api_stability_ai_sd3_5_i2i": "1M 픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다.",
-        "api_stability_ai_sd3_5_t2i": "1M 픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다.",
-        "api_stability_ai_stable_image_ultra_t2i": "1M 픽셀 해상도에서 전문가용 고품질 이미지를 생성합니다. 프롬프트 반영이 우수합니다."
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini의 멀티모달 AI와 추론 능력을 경험하세요.",
-        "api_openai_chat": "OpenAI의 고급 언어 모델과 대화하세요."
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN 모델로 이미지 품질을 향상합니다.",
-        "hiresfix_esrgan_workflow": "중간 생성 단계에서 ESRGAN 모델로 이미지를 확대합니다.",
-        "hiresfix_latent_workflow": "잠재 이미지의 확대 방식으로 이미지 품질을 향상합니다.",
-        "latent_upscale_different_prompt_model": "여러 번의 생성 패스에서 프롬프트를 변경하며 이미지를 확대합니다."
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan 모델로 텍스트 프롬프트에서 비디오를 생성합니다.",
-        "image_to_video": "정지 이미지로부터 비디오를 생성합니다.",
-        "image_to_video_wan": "Wan 2.1로 이미지에서 비디오를 생성합니다.",
-        "ltxv_image_to_video": "정지 이미지로부터 비디오를 생성합니다.",
-        "ltxv_text_to_video": "텍스트 프롬프트로 비디오를 생성합니다.",
-        "mochi_text_to_video_example": "Mochi 모델로 텍스트 프롬프트에서 비디오를 생성합니다.",
-        "text_to_video_wan": "Wan 2.1로 텍스트 프롬프트에서 비디오를 생성합니다.",
-        "txt_to_image_to_video": "텍스트 프롬프트로 이미지를 생성한 후 비디오로 변환합니다.",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos-Predict2 2B Video2World로 물리적으로 정확하고 고해상도, 일관성 있는 비디오 시뮬레이션을 생성합니다.",
-        "video_wan2_1_fun_camera_v1_1_14B": "14B 전체 모델로 고급 카메라 제어가 가능한 고품질 비디오를 생성합니다.",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B 모델로 시네마틱 카메라 움직임이 있는 동적 비디오를 생성합니다.",
-        "video_wan_vace_14B_ref2v": "참조 이미지의 스타일과 내용을 일치시키는 비디오를 생성합니다.",
-        "video_wan_vace_14B_t2v": "VACE-14B 모델로 480p 및 720p 고품질 비디오를 생성합니다.",
-        "video_wan_vace_14B_v2v": "Wan VACE로 입력 비디오와 참조 이미지를 제어하여 비디오를 생성합니다.",
-        "video_wan_vace_flf2v": "시작 및 종료 프레임을 정의하여 부드러운 비디오 전환을 생성합니다. 사용자 지정 키프레임 시퀀스를 지원합니다.",
-        "video_wan_vace_inpainting": "특정 영역을 편집하면서 주변 내용을 보존하는 비디오를 생성합니다. 객체 제거 또는 교체에 적합합니다.",
-        "video_wan_vace_outpainting": "Wan VACE 아웃페인팅으로 비디오 크기를 확장하여 비디오를 생성합니다.",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V로 첫 프레임과 마지막 프레임을 제어하여 비디오를 생성합니다.",
-        "wan2_1_fun_control": "Wan 2.1 컨트롤넷으로 포즈, 깊이, 에지 제어로 적용해 비디오를 생성합니다.",
-        "wan2_1_fun_inp": "Wan 2.1 인페인팅으로 시작 및 종료 프레임에서 비디오를 생성합니다."
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax로 이미지와 텍스트에서 CGI 통합된 정교한 비디오를 생성합니다.",
-        "api_hailuo_minimax_t2v": "MiniMax의 고급 AI로 텍스트 프롬프트에서 고품질 비디오를 직접 생성합니다. 다양한 스타일과 전문 CGI 효과로 창의적인 비주얼을 만듭니다.",
-        "api_kling_effects": "Kling으로 이미지에 시각 효과를 적용해 동적 비디오를 생성합니다.",
-        "api_kling_flf": "첫 프레임과 마지막 프레임을 제어하여 비디오를 생성합니다.",
-        "api_kling_i2v": "Kling으로 동작, 표정, 카메라 움직임에 대한 프롬프트 반영이 뛰어난 비디오를 생성합니다.",
-        "api_luma_i2v": "정지 이미지를 즉시 고품질 애니메이션으로 만듭니다.",
-        "api_luma_t2v": "간단한 프롬프트로 고품질 비디오를 생성합니다.",
-        "api_moonvalley_image_to_video": "라이선스 데이터로만 학습된 모델로 이미지를 사용해 시네마틱 1080p 비디오를 생성합니다.",
-        "api_moonvalley_text_to_video": "라이선스 데이터로만 학습된 모델로 텍스트 프롬프트에서 시네마틱 1080p 비디오를 생성합니다.",
-        "api_pika_i2v": "Pika AI로 단일 정지 이미지에서 부드러운 애니메이션 비디오를 생성합니다.",
-        "api_pika_scene": "Pika Scenes로 여러 입력 이미지를 포함하는 비디오를 생성합니다.",
-        "api_pixverse_i2v": "PixVerse로 정지 이미지에서 모션과 효과가 있는 동적 비디오를 생성합니다.",
-        "api_pixverse_t2v": "정확한 프롬프트 해석과 놀라운 비디오 다이내믹스로 비디오를 생성합니다.",
-        "api_pixverse_template_i2v": "PixVerse로 정지 이미지에서 모션과 효과가 있는 동적 비디오를 생성합니다.",
-        "api_runway_first_last_frame": "Runway로 두 키프레임 사이의 부드러운 비디오 전환을 생성합니다.",
-        "api_runway_gen3a_turbo_image_to_video": "Runway Gen3a Turbo로 정지 이미지에서 시네마틱 비디오를 생성합니다.",
-        "api_runway_gen4_turo_image_to_video": "Runway Gen4 Turbo로 이미지에서 동적 비디오를 생성합니다.",
-        "api_veo2_i2v": "Google Veo2 API로 이미지에서 비디오를 생성합니다."
-      }
-    },
     "title": "템플릿으로 시작하기",
     "useCasesSelected": "{count}개 사용 사례"
   },
diff --git a/src/locales/ko/nodeDefs.json b/src/locales/ko/nodeDefs.json
index 0d85e6b4d..d4b794636 100644
--- a/src/locales/ko/nodeDefs.json
+++ b/src/locales/ko/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "컨트롤 이미지(canny)를 사용하여 이미지를 생성합니다.",
-    "display_name": "Flux.1 캐니 제어 이미지",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny 상한 임계값",
-        "tooltip": "윤곽선이 뚜렷할수록 선으로 인식되며, 이 값은 그 상한 임계값입니다. skip_processing이 True이면 무시됩니다."
-      },
-      "canny_low_threshold": {
-        "name": "canny 하한 임계값",
-        "tooltip": "덜 뚜렷한 윤곽선도 강한 선과 연결되면 표시되며, 이 값은 그 하한 임계값입니다. skip_processing이 True이면 무시됩니다."
-      },
-      "control_after_generate": {
-        "name": "생성 후 제어"
-      },
-      "control_image": {
-        "name": "제어 이미지"
-      },
-      "guidance": {
-        "name": "가이던스",
-        "tooltip": "이미지 생성 과정의 가이던스 강도"
-      },
-      "prompt": {
-        "name": "프롬프트",
-        "tooltip": "이미지 생성을 위한 프롬프트"
-      },
-      "prompt_upsampling": {
-        "name": "프롬프트 업샘플링",
-        "tooltip": "프롬프트 업샘플링을 수행할지 여부입니다. 활성화 시, 더 창의적인 생성을 위해 프롬프트가 자동으로 수정되지만 결과는 비결정적입니다(같은 시드여도 정확히 같은 결과가 나오지 않습니다)."
-      },
-      "seed": {
-        "name": "시드",
-        "tooltip": "노이즈 생성을 위해 사용되는 랜덤 시드입니다."
-      },
-      "skip_preprocessing": {
-        "name": "전처리 건너뛰기",
-        "tooltip": "전처리를 건너뛸지 여부입니다. 제어 이미지가 이미 캐니 처리된 이미지라면 True, 원본 이미지라면 False로 설정하세요."
-      },
-      "steps": {
-        "name": "스텝 수",
-        "tooltip": "이미지 생성 과정의 단계 수"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "제어 이미지(깊이)를 사용하여 이미지를 생성합니다.",
-    "display_name": "Flux.1 깊이 제어 이미지",
-    "inputs": {
-      "control_after_generate": {
-        "name": "생성 후 제어"
-      },
-      "control_image": {
-        "name": "제어 이미지"
-      },
-      "guidance": {
-        "name": "가이던스",
-        "tooltip": "이미지 생성 과정의 가이던스 강도"
-      },
-      "prompt": {
-        "name": "프롬프트",
-        "tooltip": "이미지 생성을 위한 프롬프트"
-      },
-      "prompt_upsampling": {
-        "name": "프롬프트 업샘플링",
-        "tooltip": "프롬프트에 업샘플링을 수행할지 여부입니다. 활성화하면 프롬프트가 자동으로 더 창의적인 생성이 가능하도록 수정되지만, 결과는 비결정적입니다(같은 시드라도 정확히 같은 결과가 나오지 않습니다)."
-      },
-      "seed": {
-        "name": "시드",
-        "tooltip": "노이즈 생성을 위해 사용되는 랜덤 시드입니다."
-      },
-      "skip_preprocessing": {
-        "name": "전처리 건너뛰기",
-        "tooltip": "전처리를 건너뛸지 여부입니다. 제어 이미지가 이미 깊이화된 이미지라면 True로, 원본 이미지라면 False로 설정하세요."
-      },
-      "steps": {
-        "name": "스텝 수",
-        "tooltip": "이미지 생성 과정의 스텝 수"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "프롬프트를 기반으로 이미지의 바깥 영역을 확장합니다.",
     "display_name": "Flux.1 이미지 확장",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "3D 불러오기 - 애니메이션",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "높이"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "모델 파일"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "너비"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "카메라 정보"
       },
-      "image": {
-        "name": "이미지"
-      },
       "model_file": {
         "name": "모델 파일"
       }
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index 66c83b3b5..c64353488 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -155,10 +155,6 @@
     "name": "그리드 표시",
     "tooltip": "기본적으로 그리드를 표시하도록 전환"
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "미리보기 표시",
-    "tooltip": "기본적으로 미리보기를 표시하도록 전환"
-  },
   "Comfy_Locale": {
     "name": "언어"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "새 메뉴 사용",
     "options": {
-      "Bottom": "하단",
       "Disabled": "비활성화",
       "Top": "상단"
     },
@@ -384,8 +379,7 @@
     "name": "열린 워크플로 위치",
     "options": {
       "Sidebar": "사이드바",
-      "Topbar": "상단바",
-      "Topbar (2nd-row)": "상단바 (2번째 행)"
+      "Topbar": "상단바"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index ed987f3fc..2cbefcb7f 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -693,7 +693,6 @@
       "perspective": "Перспектива"
     },
     "clearRecording": "Очистить запись",
-    "edgeThreshold": "Пороговое значение края",
     "export": "Экспорт",
     "exportModel": "Экспорт модели",
     "exportRecording": "Экспортировать запись",
@@ -706,7 +705,6 @@
     "materialMode": "Режим Материала",
     "materialModes": {
       "depth": "Глубина",
-      "lineart": "Лайнарт",
       "normal": "Нормальный",
       "original": "Оригинал",
       "wireframe": "Каркас"
@@ -1523,310 +1521,6 @@
       "searchPlaceholder": "Поиск..."
     },
     "sorting": "Сортировать по",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D Многовидовой",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D Турбо",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin: изображение в модель",
-        "api_rodin_multiview_to_model": "Rodin: многовидовой в модель",
-        "api_tripo_image_to_model": "Tripo: изображение в модель",
-        "api_tripo_multiview_to_model": "Tripo: многовидовой в модель",
-        "api_tripo_text_to_model": "Tripo: текст в модель"
-      },
-      "Area Composition": {
-        "area_composition": "Композиция области",
-        "area_composition_square_area_for_subject": "Композиция области квадратной области для субъекта"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 M2M редактирование",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 текст в инструментальную музыку",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 текст в песню",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "Генерация изображений",
-        "embedding_example": "Встраивание",
-        "gligen_textbox_example": "Gligen Textbox",
-        "image2image": "Изображение в изображение",
-        "inpaint_example": "Inpaint",
-        "inpaint_model_outpainting": "Outpainting",
-        "lora": "LoRA",
-        "lora_multiple": "LoRA Multiple"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "2 Pass Pose Worship",
-        "controlnet_example": "Scribble ControlNet",
-        "depth_controlnet": "Depth ControlNet",
-        "depth_t2i_adapter": "Depth T2I Adapter",
-        "mixing_controlnets": "Mixing ControlNets"
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Canny Model",
-        "flux_depth_lora_example": "Flux Depth LoRA",
-        "flux_dev_checkpoint_example": "Flux Dev fp8",
-        "flux_dev_full_text_to_image": "Flux Dev полный текст в изображение",
-        "flux_fill_inpaint_example": "Flux Inpaint",
-        "flux_fill_outpaint_example": "Flux Outpaint",
-        "flux_kontext_dev_basic": "Flux Kontext Dev (Базовый)",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev (Групповой)",
-        "flux_redux_model_example": "Flux Redux Model",
-        "flux_schnell": "Flux Schnell fp8",
-        "flux_schnell_full_text_to_image": "Flux Schnell полный текст в изображение"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 Full",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Fast",
-        "hidream_i1_full": "HiDream I1 Full",
-        "image_chroma_text_to_image": "Chroma текст в изображение",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
-        "image_lotus_depth_v1_1": "Lotus Depth",
-        "image_omnigen2_image_edit": "OmniGen2 редактирование изображения",
-        "image_omnigen2_t2i": "OmniGen2 текст в изображение",
-        "sd3_5_large_blur": "SD3.5 Большое размытие",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 Большой Canny ControlNet",
-        "sd3_5_large_depth": "SD3.5 Большая глубина",
-        "sd3_5_simple_example": "SD3.5 Простой",
-        "sdxl_refiner_prompt_example": "SDXL Уточняющий запрос",
-        "sdxl_revision_text_prompts": "SDXL Редактирование текстовых запросов",
-        "sdxl_revision_zero_positive": "SDXL Редактирование нулевого положительного",
-        "sdxl_simple_example": "SDXL Простой",
-        "sdxlturbo_example": "SDXL Turbo"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext несколько изображений",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]: текст в изображение",
-        "api_ideogram_v3_t2i": "Ideogram V3: текст в изображение",
-        "api_luma_photon_i2i": "Luma Photon: изображение в изображение",
-        "api_luma_photon_style_ref": "Luma Photon: стиль по образцу",
-        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 дорисовка",
-        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 текст в изображение",
-        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 текст в изображение",
-        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 изображение в изображение",
-        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 дорисовка",
-        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 несколько входов",
-        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 текст в изображение",
-        "api_recraft_image_gen_with_color_control": "Recraft: генерация изображения с управлением цветом",
-        "api_recraft_image_gen_with_style_control": "Recraft: генерация изображения с управлением стилем",
-        "api_recraft_vector_gen": "Recraft: генерация векторного изображения",
-        "api_runway_reference_to_image": "Runway: референс в изображение",
-        "api_runway_text_to_image": "Runway: текст в изображение",
-        "api_stability_ai_i2i": "Stability AI: изображение в изображение",
-        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 изображение в изображение",
-        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 текст в изображение",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra текст в изображение"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini: чат",
-        "api_openai_chat": "OpenAI: чат"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGAN Workflow",
-        "hiresfix_latent_workflow": "HiresFix Latent Workflow",
-        "latent_upscale_different_prompt_model": "Latent Upscale Different Prompt Model"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan видео текст в видео",
-        "image_to_video": "SVD изображение в видео",
-        "image_to_video_wan": "Wan 2.1 изображение в видео",
-        "ltxv_image_to_video": "LTXV изображение в видео",
-        "ltxv_text_to_video": "LTXV текст в видео",
-        "mochi_text_to_video_example": "Mochi текст в видео",
-        "text_to_video_wan": "Wan 2.1 текст в видео",
-        "txt_to_image_to_video": "SVD текст в изображение в видео",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE референс в видео",
-        "video_wan_vace_14B_t2v": "Wan VACE текст в видео",
-        "video_wan_vace_14B_v2v": "Wan VACE контроль видео",
-        "video_wan_vace_flf2v": "Wan VACE первый-последний кадр",
-        "video_wan_vace_inpainting": "Wan VACE Inpainting",
-        "video_wan_vace_outpainting": "Wan VACE Outpainting",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet",
-        "wan2_1_fun_inp": "Wan 2.1 Inpainting"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax: изображение в видео",
-        "api_hailuo_minimax_t2v": "MiniMax: текст в видео",
-        "api_kling_effects": "Kling: видеоэффекты",
-        "api_kling_flf": "Kling: FLF2V",
-        "api_kling_i2v": "Kling: изображение в видео",
-        "api_luma_i2v": "Luma: изображение в видео",
-        "api_luma_t2v": "Luma: текст в видео",
-        "api_moonvalley_image_to_video": "Moonvalley: изображение в видео",
-        "api_moonvalley_text_to_video": "Moonvalley: текст в видео",
-        "api_pika_i2v": "Pika: изображение в видео",
-        "api_pika_scene": "Pika Scenes: изображения в видео",
-        "api_pixverse_i2v": "PixVerse: изображение в видео",
-        "api_pixverse_t2v": "PixVerse: текст в видео",
-        "api_pixverse_template_i2v": "PixVerse Templates: изображение в видео",
-        "api_runway_first_last_frame": "Runway: первый последний кадр в видео",
-        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo изображение в видео",
-        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo изображение в видео",
-        "api_veo2_i2v": "Veo2: изображение в видео"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Генерируйте 3D-модели по одному изображению с помощью Hunyuan3D 2.0.",
-        "3d_hunyuan3d_multiview_to_model": "Генерируйте 3D-модели по нескольким видам с помощью Hunyuan3D 2.0 MV.",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Генерируйте 3D-модели по нескольким видам с помощью Hunyuan3D 2.0 MV Turbo.",
-        "stable_zero123_example": "Генерируйте 3D-виды по одному изображению с помощью Stable Zero123."
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Генерируйте детализированные 3D-модели по одной фотографии с помощью Rodin AI.",
-        "api_rodin_multiview_to_model": "Создавайте полные 3D-модели по нескольким видам с помощью Rodin.",
-        "api_tripo_image_to_model": "Генерируйте профессиональные 3D-ассеты по 2D-изображениям с помощью Tripo.",
-        "api_tripo_multiview_to_model": "Создавайте 3D-модели по нескольким ракурсам с помощью продвинутого сканера Tripo.",
-        "api_tripo_text_to_model": "Создавайте 3D-объекты по текстовым описаниям с помощью Tripo."
-      },
-      "Area Composition": {
-        "area_composition": "Генерируйте изображения, управляя композицией с помощью определённых областей.",
-        "area_composition_square_area_for_subject": "Генерируйте изображения с постоянным размещением объекта с помощью композиции областей."
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "Редактируйте существующие песни, меняя стиль и текст с помощью ACE-Step v1 M2M.",
-        "audio_ace_step_1_t2a_instrumentals": "Генерируйте инструментальную музыку по тексту с помощью ACE-Step v1.",
-        "audio_ace_step_1_t2a_song": "Генерируйте песни с вокалом по тексту с помощью ACE-Step v1, поддержка разных языков и стилей.",
-        "audio_stable_audio_example": "Генерируйте аудио по текстовым описаниям с помощью Stable Audio."
-      },
-      "Basics": {
-        "default": "Генерируйте изображения по текстовым описаниям.",
-        "embedding_example": "Генерируйте изображения с помощью текстовой инверсии для единых стилей.",
-        "gligen_textbox_example": "Генерируйте изображения с точным размещением объектов с помощью текстовых блоков.",
-        "image2image": "Преобразуйте существующие изображения с помощью текстовых подсказок.",
-        "inpaint_example": "Редактируйте отдельные части изображений без швов.",
-        "inpaint_model_outpainting": "Расширяйте изображения за пределы их исходных границ.",
-        "lora": "Генерируйте изображения с помощью моделей LoRA для специализированных стилей или объектов.",
-        "lora_multiple": "Генерируйте изображения, комбинируя несколько моделей LoRA."
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "Генерируйте изображения по референсам поз с помощью ControlNet.",
-        "controlnet_example": "Генерируйте изображения, используя референсы-каракулы с помощью ControlNet.",
-        "depth_controlnet": "Генерируйте изображения, используя информацию о глубине с помощью ControlNet.",
-        "depth_t2i_adapter": "Генерируйте изображения, используя информацию о глубине с помощью адаптера T2I.",
-        "mixing_controlnets": "Генерируйте изображения, комбинируя несколько моделей ControlNet."
-      },
-      "Flux": {
-        "flux_canny_model_example": "Генерируйте изображения, используя детекцию границ с помощью Flux Canny.",
-        "flux_depth_lora_example": "Генерируйте изображения, используя информацию о глубине с помощью Flux LoRA.",
-        "flux_dev_checkpoint_example": "Генерируйте изображения с помощью Flux Dev fp8 (квантованная версия). Подходит для устройств с ограниченной VRAM, требуется только один файл модели, но качество немного ниже, чем у полной версии.",
-        "flux_dev_full_text_to_image": "Генерируйте высококачественные изображения с помощью полной версии Flux Dev. Требуется больше VRAM и несколько файлов моделей, но обеспечивается лучшее следование подсказкам и качество.",
-        "flux_fill_inpaint_example": "Заполняйте отсутствующие части изображений с помощью Flux inpainting.",
-        "flux_fill_outpaint_example": "Расширяйте изображения за пределы исходных границ с помощью Flux outpainting.",
-        "flux_kontext_dev_basic": "Редактируйте изображения с помощью Flux Kontext (все узлы видимы), идеально для изучения рабочего процесса.",
-        "flux_kontext_dev_grouped": "Упрощённая версия Flux Kontext с группированными узлами для более чистого рабочего пространства.",
-        "flux_redux_model_example": "Генерируйте изображения, перенося стиль с референсных изображений с помощью Flux Redux.",
-        "flux_schnell": "Быстро генерируйте изображения с помощью Flux Schnell fp8 (квантованная версия). Идеально для слабого железа, требуется всего 4 шага.",
-        "flux_schnell_full_text_to_image": "Быстро генерируйте изображения с помощью полной версии Flux Schnell. Лицензия Apache2.0, всего 4 шага при хорошем качестве."
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 — профессиональная модель для редактирования изображений на естественном языке.",
-        "hidream_i1_dev": "HiDream I1 Dev — сбалансированная версия (28 шагов), подходит для среднего железа.",
-        "hidream_i1_fast": "HiDream I1 Fast — облегчённая версия (16 шагов), быстрая генерация на слабых ПК.",
-        "hidream_i1_full": "HiDream I1 Full — полная версия (50 шагов), максимальное качество.",
-        "image_chroma_text_to_image": "Chroma — модифицированная версия Flux с изменённой архитектурой.",
-        "image_cosmos_predict2_2B_t2i": "Генерируйте изображения с помощью Cosmos-Predict2 2B T2I — физически точная, высокодетализированная генерация.",
-        "image_lotus_depth_v1_1": "Используйте Lotus Depth в ComfyUI для эффективной и детализированной оценки глубины по одному изображению.",
-        "image_omnigen2_image_edit": "Редактируйте изображения с помощью естественно-языковых инструкций и расширенных возможностей OmniGen2.",
-        "image_omnigen2_t2i": "Генерируйте высококачественные изображения по тексту с помощью унифицированной 7B мультимодальной модели OmniGen2 с двухпутевой архитектурой.",
-        "sd3_5_large_blur": "Генерируйте изображения, используя размытые референсы с помощью SD 3.5.",
-        "sd3_5_large_canny_controlnet_example": "Генерируйте изображения, используя детекцию границ с помощью SD 3.5 Canny ControlNet.",
-        "sd3_5_large_depth": "Генерируйте изображения, используя информацию о глубине с помощью SD 3.5.",
-        "sd3_5_simple_example": "Генерируйте изображения с помощью SD 3.5.",
-        "sdxl_refiner_prompt_example": "Улучшайте изображения SDXL с помощью моделей-улучшателей (refiner).",
-        "sdxl_revision_text_prompts": "Передавайте концепции с референсных изображений для генерации с помощью SDXL Revision.",
-        "sdxl_revision_zero_positive": "Генерируйте изображения, используя текстовые подсказки и референсы с помощью SDXL Revision.",
-        "sdxl_simple_example": "Генерируйте высококачественные изображения с помощью SDXL.",
-        "sdxlturbo_example": "Генерируйте изображения за один шаг с помощью SDXL Turbo."
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "Редактируйте изображения с помощью Flux.1 Kontext max image.",
-        "api_bfl_flux_1_kontext_multiple_images_input": "Вводите несколько изображений и редактируйте их с помощью Flux.1 Kontext.",
-        "api_bfl_flux_1_kontext_pro_image": "Редактируйте изображения с помощью Flux.1 Kontext pro image.",
-        "api_bfl_flux_pro_t2i": "Генерируйте изображения с отличным следованием подсказкам и качеством с помощью FLUX.1 Pro.",
-        "api_ideogram_v3_t2i": "Генерируйте профессиональные изображения с отличным соответствием подсказкам, фотореализмом и рендерингом текста с помощью Ideogram V3.",
-        "api_luma_photon_i2i": "Управляйте генерацией изображений с помощью комбинации изображений и подсказки.",
-        "api_luma_photon_style_ref": "Генерируйте изображения, смешивая стили с точным контролем с помощью Luma Photon.",
-        "api_openai_dall_e_2_inpaint": "Редактируйте изображения с помощью инпейнта в OpenAI Dall-E 2 API.",
-        "api_openai_dall_e_2_t2i": "Генерируйте изображения по тексту с помощью OpenAI Dall-E 2 API.",
-        "api_openai_dall_e_3_t2i": "Генерируйте изображения по тексту с помощью OpenAI Dall-E 3 API.",
-        "api_openai_image_1_i2i": "Генерируйте изображения по изображениям с помощью OpenAI GPT Image 1 API.",
-        "api_openai_image_1_inpaint": "Редактируйте изображения с помощью инпейнта в OpenAI GPT Image 1 API.",
-        "api_openai_image_1_multi_inputs": "Генерируйте изображения по нескольким входам с помощью OpenAI GPT Image 1 API.",
-        "api_openai_image_1_t2i": "Генерируйте изображения по тексту с помощью OpenAI GPT Image 1 API.",
-        "api_recraft_image_gen_with_color_control": "Генерируйте изображения с пользовательскими палитрами и фирменными визуалами с помощью Recraft.",
-        "api_recraft_image_gen_with_style_control": "Контролируйте стиль с помощью визуальных примеров, выравнивайте объекты и настраивайте детали. Сохраняйте и делитесь стилями для брендовой целостности.",
-        "api_recraft_vector_gen": "Генерируйте векторные изображения высокого качества по тексту с помощью AI-генератора Recraft.",
-        "api_runway_reference_to_image": "Генерируйте новые изображения на основе стиля и композиции референса с помощью Runway.",
-        "api_runway_text_to_image": "Генерируйте изображения высокого качества по тексту с помощью модели Runway AI.",
-        "api_stability_ai_i2i": "Преобразуйте изображения с высоким качеством с помощью Stability AI, идеально для профессионального редактирования и передачи стиля.",
-        "api_stability_ai_sd3_5_i2i": "Генерируйте изображения высокого качества с отличным следованием подсказкам. Идеально для профессионального использования при разрешении 1 мегапиксель.",
-        "api_stability_ai_sd3_5_t2i": "Генерируйте изображения высокого качества с отличным следованием подсказкам. Идеально для профессионального использования при разрешении 1 мегапиксель.",
-        "api_stability_ai_stable_image_ultra_t2i": "Генерируйте изображения высокого качества с отличным следованием подсказкам. Идеально для профессионального использования при разрешении 1 мегапиксель."
-      },
-      "LLM API": {
-        "api_google_gemini": "Испытайте мультимодальный ИИ Google с возможностями рассуждения Gemini.",
-        "api_openai_chat": "Общайтесь с продвинутыми языковыми моделями OpenAI для интеллектуальных диалогов."
-      },
-      "Upscaling": {
-        "esrgan_example": "Увеличивайте изображения с помощью моделей ESRGAN для повышения качества.",
-        "hiresfix_esrgan_workflow": "Увеличивайте изображения с помощью моделей ESRGAN на промежуточных этапах.",
-        "hiresfix_latent_workflow": "Увеличивайте изображения, улучшая качество в латентном пространстве.",
-        "latent_upscale_different_prompt_model": "Увеличивайте изображения, меняя подсказки между проходами."
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Генерируйте видео по тексту с помощью модели Hunyuan.",
-        "image_to_video": "Генерируйте видео по статичным изображениям.",
-        "image_to_video_wan": "Генерируйте видео по изображениям с помощью Wan 2.1.",
-        "ltxv_image_to_video": "Генерируйте видео по статичным изображениям.",
-        "ltxv_text_to_video": "Генерируйте видео по тексту.",
-        "mochi_text_to_video_example": "Генерируйте видео по тексту с помощью модели Mochi.",
-        "text_to_video_wan": "Генерируйте видео по тексту с помощью Wan 2.1.",
-        "txt_to_image_to_video": "Сначала создайте изображения по тексту, затем преобразуйте их в видео.",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Генерируйте видео с помощью Cosmos-Predict2 2B Video2World — физически точные, высокодетализированные и последовательные симуляции.",
-        "video_wan2_1_fun_camera_v1_1_14B": "Генерируйте видео высокого качества с расширенным управлением камерой с помощью полной модели 14B.",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Генерируйте динамичные видео с кинематографическим движением камеры с помощью Wan 2.1 Fun Camera 1.3B.",
-        "video_wan_vace_14B_ref2v": "Создавайте видео, соответствующие стилю и содержанию референсного изображения.",
-        "video_wan_vace_14B_t2v": "Преобразуйте текстовые описания в видео высокого качества. Поддержка 480p и 720p с моделью VACE-14B.",
-        "video_wan_vace_14B_v2v": "Генерируйте видео, управляя входными видео и референсами с помощью Wan VACE.",
-        "video_wan_vace_flf2v": "Создавайте плавные переходы, задавая начальный и конечный кадры. Поддержка пользовательских последовательностей ключевых кадров.",
-        "video_wan_vace_inpainting": "Редактируйте отдельные области видео, сохраняя окружающее содержимое.",
-        "video_wan_vace_outpainting": "Генерируйте расширенные видео, увеличивая размер с помощью Wan VACE outpainting.",
-        "wan2_1_flf2v_720_f16": "Генерируйте видео, контролируя первый и последний кадры с помощью Wan 2.1 FLF2V.",
-        "wan2_1_fun_control": "Генерируйте видео, управляя позой, глубиной и границами с помощью Wan 2.1 ControlNet.",
-        "wan2_1_fun_inp": "Генерируйте видео по начальному и конечному кадрам с помощью Wan 2.1 inpainting."
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "Генерируйте изысканные видео по изображениям и тексту с CGI-интеграцией с помощью MiniMax.",
-        "api_hailuo_minimax_t2v": "Генерируйте высококачественные видео напрямую по тексту. Используйте возможности MiniMax для создания разнообразных визуальных историй с профессиональными CGI-эффектами.",
-        "api_kling_effects": "Генерируйте динамичные видео, применяя визуальные эффекты к изображениям с помощью Kling.",
-        "api_kling_flf": "Генерируйте видео, контролируя первый и последний кадры.",
-        "api_kling_i2v": "Генерируйте видео с отличным следованием подсказкам для действий, эмоций и движений камеры с помощью Kling.",
-        "api_luma_i2v": "Преобразуйте статичные изображения в волшебные анимации высокого качества.",
-        "api_luma_t2v": "Генерируйте высококачественные видео по простым подсказкам.",
-        "api_moonvalley_image_to_video": "Генерируйте кинематографические видео 1080p по изображению с помощью модели, обученной только на лицензированных данных.",
-        "api_moonvalley_text_to_video": "Генерируйте кинематографические видео 1080p по тексту с помощью модели, обученной только на лицензированных данных.",
-        "api_pika_i2v": "Генерируйте плавные анимированные видео по одному изображению с помощью Pika AI.",
-        "api_pika_scene": "Генерируйте видео, включающие несколько входных изображений, с помощью Pika Scenes.",
-        "api_pixverse_i2v": "Генерируйте динамичные видео по статичным изображениям с движением и эффектами с помощью PixVerse.",
-        "api_pixverse_t2v": "Генерируйте видео с точной интерпретацией подсказок и впечатляющей динамикой.",
-        "api_pixverse_template_i2v": "Генерируйте динамичные видео по статичным изображениям с движением и эффектами с помощью PixVerse.",
-        "api_runway_first_last_frame": "Генерируйте плавные переходы между двумя ключевыми кадрами с помощью Runway.",
-        "api_runway_gen3a_turbo_image_to_video": "Генерируйте кинематографические видео по статичным изображениям с помощью Runway Gen3a Turbo.",
-        "api_runway_gen4_turo_image_to_video": "Генерируйте динамичные видео по изображениям с помощью Runway Gen4 Turbo.",
-        "api_veo2_i2v": "Генерируйте видео по изображениям с помощью Google Veo2 API."
-      }
-    },
     "title": "Начните с шаблона",
     "useCasesSelected": "{count} вариантов использования"
   },
diff --git a/src/locales/ru/nodeDefs.json b/src/locales/ru/nodeDefs.json
index 036b13cff..8de1c57ff 100644
--- a/src/locales/ru/nodeDefs.json
+++ b/src/locales/ru/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "Генерировать изображение с использованием контрольного изображения (canny).",
-    "display_name": "Flux.1 Canny контрольное изображение",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny_high_threshold",
-        "tooltip": "Верхний порог для детектирования границ Canny; игнорируется, если skip_processing установлен в True"
-      },
-      "canny_low_threshold": {
-        "name": "canny_low_threshold",
-        "tooltip": "Нижний порог для детектирования границ Canny; игнорируется, если skip_processing установлен в True"
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Сила направляющего сигнала для процесса генерации изображения"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Промпт для генерации изображения"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Выполнять ли апсемплинг промпта. Если активно, автоматически изменяет промпт для более креативной генерации, но результаты будут недетерминированными (одинаковое зерно не даст точно такой же результат)."
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "Случайное зерно, используемое для создания шума."
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Пропускать ли предварительную обработку; установите True, если control_image уже обработано Canny, False — если это исходное изображение."
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Количество шагов для процесса генерации изображения"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "Генерировать изображение с использованием контрольного изображения (глубина).",
-    "display_name": "Flux.1 Контроль изображения по глубине",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "Сила направляющего сигнала для процесса генерации изображения"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "Промпт для генерации изображения"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "Выполнять ли апсемплинг промпта. Если активно, автоматически изменяет промпт для более креативной генерации, но результаты будут недетерминированными (одинаковое зерно не даст точно такой же результат)."
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "Случайное зерно, используемое для создания шума."
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "Пропустить ли предварительную обработку; установите True, если control_image уже содержит глубину, False — если это исходное изображение."
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "Количество шагов для процесса генерации изображения"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "Дорисовывает изображение на основе запроса.",
     "display_name": "Flux.1 Расширить изображение",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "Загрузить 3D - Анимация",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "высота"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "файл_модели"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "ширина"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "camera_info"
       },
-      "image": {
-        "name": "изображение"
-      },
       "model_file": {
         "name": "файл_модели"
       }
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index 778ae7a2b..14344c7b5 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -155,10 +155,6 @@
     "name": "Показать сетку",
     "tooltip": "Переключиться, чтобы показывать сетку по умолчанию"
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "Показать предварительный просмотр",
-    "tooltip": "Переключиться, чтобы показывать предварительный просмотр по умолчанию"
-  },
   "Comfy_Locale": {
     "name": "Язык"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "Использовать новое меню",
     "options": {
-      "Bottom": "Внизу",
       "Disabled": "Отключено",
       "Top": "Вверху"
     },
@@ -384,8 +379,7 @@
     "name": "Положение открытых рабочих процессов",
     "options": {
       "Sidebar": "Боковая панель",
-      "Topbar": "Верхняя панель",
-      "Topbar (2nd-row)": "Топбар (2-й ряд)"
+      "Topbar": "Верхняя панель"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/tr/main.json b/src/locales/tr/main.json
index 8377b9d8b..22ecffca4 100644
--- a/src/locales/tr/main.json
+++ b/src/locales/tr/main.json
@@ -693,7 +693,6 @@
       "perspective": "Perspektif"
     },
     "clearRecording": "Kaydı Temizle",
-    "edgeThreshold": "Kenar Eşiği",
     "export": "Dışa Aktar",
     "exportModel": "Modeli Dışa Aktar",
     "exportRecording": "Kaydı Dışa Aktar",
@@ -706,7 +705,6 @@
     "materialMode": "Malzeme Modu",
     "materialModes": {
       "depth": "Derinlik",
-      "lineart": "Çizgi Sanatı",
       "normal": "Normal",
       "original": "Orijinal",
       "wireframe": "Tel Kafes"
@@ -1521,310 +1519,6 @@
       "searchPlaceholder": "Ara..."
     },
     "sorting": "Sıralama ölçütü",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin: Görüntüden Modele",
-        "api_rodin_multiview_to_model": "Rodin: Çoklu Görüntüden Modele",
-        "api_tripo_image_to_model": "Tripo: Görüntüden Modele",
-        "api_tripo_multiview_to_model": "Tripo: Çoklu Görüntüden Modele",
-        "api_tripo_text_to_model": "Tripo: Metinden Modele"
-      },
-      "Area Composition": {
-        "area_composition": "Alan Kompozisyonu",
-        "area_composition_square_area_for_subject": "Konu İçin Kare Alan Kompozisyonu"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 M2M Düzenleme",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 Metinden Enstrümantal Müziğe",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 Metinden Şarkıya",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "Görüntü Oluşturma",
-        "embedding_example": "Gömme",
-        "gligen_textbox_example": "Gligen Metin Kutusu",
-        "image2image": "Görüntüden Görüntüye",
-        "inpaint_example": "Inpaint",
-        "inpaint_model_outpainting": "Outpaint",
-        "lora": "LoRA",
-        "lora_multiple": "Çoklu LoRA"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "Poz ControlNet 2 Geçiş",
-        "controlnet_example": "Karalama ControlNet",
-        "depth_controlnet": "Derinlik ControlNet",
-        "depth_t2i_adapter": "Derinlik T2I Adaptörü",
-        "mixing_controlnets": "ControlNet'leri Karıştırma"
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Canny Modeli",
-        "flux_depth_lora_example": "Flux Derinlik LoRA",
-        "flux_dev_checkpoint_example": "Flux Dev fp8",
-        "flux_dev_full_text_to_image": "Flux Dev metinden görüntüye tam",
-        "flux_fill_inpaint_example": "Flux Inpaint",
-        "flux_fill_outpaint_example": "Flux Outpaint",
-        "flux_kontext_dev_basic": "Flux Kontext Dev(Temel)",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev(Gruplandırılmış)",
-        "flux_redux_model_example": "Flux Redux Modeli",
-        "flux_schnell": "Flux Schnell fp8",
-        "flux_schnell_full_text_to_image": "Flux Schnell metinden görüntüye tam"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 Tam",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Hızlı",
-        "hidream_i1_full": "HiDream I1 Tam",
-        "image_chroma_text_to_image": "Chroma metinden görüntüye",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
-        "image_lotus_depth_v1_1": "Lotus Derinlik",
-        "image_omnigen2_image_edit": "OmniGen2 Görüntü Düzenleme",
-        "image_omnigen2_t2i": "OmniGen2 Metinden Görüntüye",
-        "sd3_5_large_blur": "SD3.5 Büyük Bulanıklık",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 Büyük Canny ControlNet",
-        "sd3_5_large_depth": "SD3.5 Büyük Derinlik",
-        "sd3_5_simple_example": "SD3.5 Basit",
-        "sdxl_refiner_prompt_example": "SDXL İyileştirici İstem",
-        "sdxl_revision_text_prompts": "SDXL Revizyon Metin İstemleri",
-        "sdxl_revision_zero_positive": "SDXL Revizyon Sıfır Pozitif",
-        "sdxl_simple_example": "SDXL Basit",
-        "sdxlturbo_example": "SDXL Turbo"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext Çoklu Görüntü Girişi",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]: Metinden Görüntüye",
-        "api_ideogram_v3_t2i": "Ideogram V3: Metinden Görüntüye",
-        "api_luma_photon_i2i": "Luma Photon: Görüntüden Görüntüye",
-        "api_luma_photon_style_ref": "Luma Photon: Stil Referansı",
-        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 Inpaint",
-        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 Metinden Görüntüye",
-        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 Metinden Görüntüye",
-        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 Görüntüden Görüntüye",
-        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 Inpaint",
-        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 Çoklu Girişler",
-        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 Metinden Görüntüye",
-        "api_recraft_image_gen_with_color_control": "Recraft: Renk Kontrollü Görüntü Oluşturma",
-        "api_recraft_image_gen_with_style_control": "Recraft: Stil Kontrollü Görüntü Oluşturma",
-        "api_recraft_vector_gen": "Recraft: Vektör Oluşturma",
-        "api_runway_reference_to_image": "Runway: Referanstan Görüntüye",
-        "api_runway_text_to_image": "Runway: Metinden Görüntüye",
-        "api_stability_ai_i2i": "Stability AI: Görüntüden Görüntüye",
-        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 Görüntüden Görüntüye",
-        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 Metinden Görüntüye",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra Metinden Görüntüye"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini: Sohbet",
-        "api_openai_chat": "OpenAI: Sohbet"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGAN İş Akışı",
-        "hiresfix_latent_workflow": "Yükseltme",
-        "latent_upscale_different_prompt_model": "Farklı İstem Modeliyle Gizli Yükseltme"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan Video Metinden Videoya",
-        "image_to_video": "SVD Görüntüden Videoya",
-        "image_to_video_wan": "Wan 2.1 Görüntüden Videoya",
-        "ltxv_image_to_video": "LTXV Görüntüden Videoya",
-        "ltxv_text_to_video": "LTXV Metinden Videoya",
-        "mochi_text_to_video_example": "Mochi Metinden Videoya",
-        "text_to_video_wan": "Wan 2.1 Metinden Videoya",
-        "txt_to_image_to_video": "SVD Metinden Görüntüye, Görüntüden Videoya",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE Referanstan Videoya",
-        "video_wan_vace_14B_t2v": "Wan VACE Metinden Videoya",
-        "video_wan_vace_14B_v2v": "Wan VACE Kontrol Videosu",
-        "video_wan_vace_flf2v": "Wan VACE İlk-Son Kare",
-        "video_wan_vace_inpainting": "Wan VACE Inpainting",
-        "video_wan_vace_outpainting": "Wan VACE Outpainting",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet",
-        "wan2_1_fun_inp": "Wan 2.1 Inpainting"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax: Görüntüden Videoya",
-        "api_hailuo_minimax_t2v": "MiniMax: Metinden Videoya",
-        "api_kling_effects": "Kling: Video Efektleri",
-        "api_kling_flf": "Kling: FLF2V",
-        "api_kling_i2v": "Kling: Görüntüden Videoya",
-        "api_luma_i2v": "Luma: Görüntüden Videoya",
-        "api_luma_t2v": "Luma: Metinden Videoya",
-        "api_moonvalley_image_to_video": "Moonvalley: Görüntüden Videoya",
-        "api_moonvalley_text_to_video": "Moonvalley: Metinden Videoya",
-        "api_pika_i2v": "Pika: Görüntüden Videoya",
-        "api_pika_scene": "Pika Sahneleri: Görüntülerden Videoya",
-        "api_pixverse_i2v": "PixVerse: Görüntüden Videoya",
-        "api_pixverse_t2v": "PixVerse: Metinden Videoya",
-        "api_pixverse_template_i2v": "PixVerse Şablonları: Görüntüden Videoya",
-        "api_runway_first_last_frame": "Runway: İlk Son Kareden Videoya",
-        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo Görüntüden Videoya",
-        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo Görüntüden Videoya",
-        "api_veo2_i2v": "Veo2: Görüntüden Videoya"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0 kullanarak tek görüntülerden 3D modeller oluşturun.",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV kullanarak birden fazla görünümden 3D modeller oluşturun.",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo kullanarak birden fazla görünümden 3D modeller oluşturun.",
-        "stable_zero123_example": "Stable Zero123 kullanarak tek görüntülerden 3D görünümler oluşturun."
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin AI kullanarak tek fotoğraflardan ayrıntılı 3D modeller oluşturun.",
-        "api_rodin_multiview_to_model": "Rodin'in çok açılı yeniden yapılandırmasını kullanarak kapsamlı 3D modeller oluşturun.",
-        "api_tripo_image_to_model": "Tripo motorunu kullanarak 2D görüntülerden profesyonel 3D varlıklar oluşturun.",
-        "api_tripo_multiview_to_model": "Tripo'nun gelişmiş tarayıcısı ile birden fazla açıdan 3D modeller oluşturun.",
-        "api_tripo_text_to_model": "Tripo'nun metin odaklı modellemesi ile açıklamalardan 3D nesneler oluşturun."
-      },
-      "Area Composition": {
-        "area_composition": "Tanımlanmış alanlarla kompozisyonu kontrol ederek görüntüler oluşturun.",
-        "area_composition_square_area_for_subject": "Alan kompozisyonu kullanarak tutarlı konu yerleşimi ile görüntüler oluşturun."
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE-Step v1 M2M kullanarak mevcut şarkıları stil ve şarkı sözlerini değiştirmek için düzenleyin.",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 kullanarak metin istemlerinden enstrümantal müzik oluşturun.",
-        "audio_ace_step_1_t2a_song": "ACE-Step v1 kullanarak metin istemlerinden vokalli şarkılar oluşturun, çok dilli ve stil özelleştirmesini destekler.",
-        "audio_stable_audio_example": "Stable Audio kullanarak metin istemlerinden ses oluşturun."
-      },
-      "Basics": {
-        "default": "Metin istemlerinden görüntüler oluşturun.",
-        "embedding_example": "Tutarlı stiller için metinsel ters çevirme kullanarak görüntüler oluşturun.",
-        "gligen_textbox_example": "Metin kutuları kullanarak hassas nesne yerleşimi ile görüntüler oluşturun.",
-        "image2image": "Mevcut görüntüleri metin istemleri kullanarak dönüştürün.",
-        "inpaint_example": "Görüntülerin belirli kısımlarını sorunsuz bir şekilde düzenleyin.",
-        "inpaint_model_outpainting": "Görüntüleri orijinal sınırlarının ötesine genişletin.",
-        "lora": "Özelleştirilmiş stiller veya konular için LoRA modelleriyle görüntüler oluşturun.",
-        "lora_multiple": "Birden fazla LoRA modelini birleştirerek görüntüler oluşturun."
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "ControlNet kullanarak poz referanslarıyla yönlendirilen görüntüler oluşturun.",
-        "controlnet_example": "ControlNet kullanarak karalama referans görüntüleriyle yönlendirilen görüntüler oluşturun.",
-        "depth_controlnet": "ControlNet kullanarak derinlik bilgisiyle yönlendirilen görüntüler oluşturun.",
-        "depth_t2i_adapter": "T2I adaptörü kullanarak derinlik bilgisiyle yönlendirilen görüntüler oluşturun.",
-        "mixing_controlnets": "Birden fazla ControlNet modelini birleştirerek görüntüler oluşturun."
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Canny kullanarak kenar algılama ile yönlendirilen görüntüler oluşturun.",
-        "flux_depth_lora_example": "Flux LoRA kullanarak derinlik bilgisi ile yönlendirilen görüntüler oluşturun.",
-        "flux_dev_checkpoint_example": "Flux Dev fp8 nicelenmiş sürümünü kullanarak görüntüler oluşturun. Sınırlı VRAM'e sahip cihazlar için uygundur, yalnızca bir model dosyası gerektirir, ancak görüntü kalitesi tam sürümden biraz daha düşüktür.",
-        "flux_dev_full_text_to_image": "Flux Dev tam sürümüyle yüksek kaliteli görüntüler oluşturun. Daha büyük VRAM ve birden fazla model dosyası gerektirir, ancak en iyi istem takip yeteneğini ve görüntü kalitesini sağlar.",
-        "flux_fill_inpaint_example": "Flux inpainting kullanarak görüntülerin eksik kısımlarını doldurun.",
-        "flux_fill_outpaint_example": "Flux outpainting kullanarak görüntüleri sınırların ötesine genişletin.",
-        "flux_kontext_dev_basic": "İş akışını öğrenmek için mükemmel olan tam düğüm görünürlüğü ile Flux Kontext kullanarak görüntüyü düzenleyin.",
-        "flux_kontext_dev_grouped": "Daha temiz bir çalışma alanı için gruplandırılmış düğümlerle Flux Kontext'in basitleştirilmiş sürümü.",
-        "flux_redux_model_example": "Flux Redux kullanarak referans görüntülerden stil aktararak görüntüler oluşturun.",
-        "flux_schnell": "Flux Schnell fp8 nicelenmiş sürümüyle hızlı bir şekilde görüntüler oluşturun. Düşük donanımlar için idealdir, görüntü oluşturmak için yalnızca 4 adım gerektirir.",
-        "flux_schnell_full_text_to_image": "Flux Schnell tam sürümüyle hızlı bir şekilde görüntüler oluşturun. Apache2.0 lisansını kullanır, iyi görüntü kalitesini korurken görüntü oluşturmak için yalnızca 4 adım gerektirir."
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 ile görüntüleri düzenleyin - profesyonel doğal dil görüntü düzenleme modeli.",
-        "hidream_i1_dev": "HiDream I1 Dev ile görüntüler oluşturun - orta sınıf donanımlar için uygun olan 28 çıkarım adımlı dengeli sürüm.",
-        "hidream_i1_fast": "HiDream I1 Fast ile hızlı bir şekilde görüntüler oluşturun - düşük donanımlarda hızlı önizlemeler için ideal olan 16 çıkarım adımlı hafif sürüm.",
-        "hidream_i1_full": "HiDream I1 Full ile görüntüler oluşturun - en yüksek kalitede çıktı için 50 çıkarım adımlı tam sürüm.",
-        "image_chroma_text_to_image": "Chroma, flux'tan değiştirilmiştir ve mimaride bazı değişiklikler vardır.",
-        "image_cosmos_predict2_2B_t2i": "Fiziksel olarak doğru, yüksek sadakatli ve ayrıntı zengini görüntü oluşturma sağlayan Cosmos-Predict2 2B T2I ile görüntüler oluşturun.",
-        "image_lotus_depth_v1_1": "Yüksek ayrıntı koruması ile sıfır atışlı, verimli tek gözlü derinlik tahmini için ComfyUI'de Lotus Depth'i çalıştırın.",
-        "image_omnigen2_image_edit": "OmniGen2'nin gelişmiş görüntü düzenleme yetenekleri ve metin oluşturma desteğiyle doğal dil talimatlarıyla görüntüleri düzenleyin.",
-        "image_omnigen2_t2i": "OmniGen2'nin çift yollu mimariye sahip birleşik 7B çok modlu modeliyle metin istemlerinden yüksek kaliteli görüntüler oluşturun.",
-        "sd3_5_large_blur": "SD 3.5 kullanarak bulanık referans görüntülerle yönlendirilen görüntüler oluşturun.",
-        "sd3_5_large_canny_controlnet_example": "SD 3.5 Canny ControlNet kullanarak kenar algılama ile yönlendirilen görüntüler oluşturun.",
-        "sd3_5_large_depth": "SD 3.5 kullanarak derinlik bilgisi ile yönlendirilen görüntüler oluşturun.",
-        "sd3_5_simple_example": "SD 3.5 kullanarak görüntüler oluşturun.",
-        "sdxl_refiner_prompt_example": "İyileştirici modeller kullanarak SDXL görüntülerini geliştirin.",
-        "sdxl_revision_text_prompts": "SDXL Revision kullanarak referans görüntülerden kavramlar aktararak görüntüler oluşturun.",
-        "sdxl_revision_zero_positive": "SDXL Revision ile hem metin istemleri hem de referans görüntüleri kullanarak görüntüler oluşturun.",
-        "sdxl_simple_example": "SDXL kullanarak yüksek kaliteli görüntüler oluşturun.",
-        "sdxlturbo_example": "SDXL Turbo kullanarak tek adımda görüntüler oluşturun."
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "Görüntüleri Flux.1 Kontext max görüntü ile düzenleyin.",
-        "api_bfl_flux_1_kontext_multiple_images_input": "Birden fazla görüntü girin ve bunları Flux.1 Kontext ile düzenleyin.",
-        "api_bfl_flux_1_kontext_pro_image": "Görüntüleri Flux.1 Kontext pro görüntü ile düzenleyin.",
-        "api_bfl_flux_pro_t2i": "FLUX.1 Pro kullanarak mükemmel istem takibi ve görsel kalite ile görüntüler oluşturun.",
-        "api_ideogram_v3_t2i": "Ideogram V3 kullanarak mükemmel istem hizalaması, fotogerçekçilik ve metin oluşturma ile profesyonel kalitede görüntüler oluşturun.",
-        "api_luma_photon_i2i": "Görüntüleri ve istemleri bir arada kullanarak görüntü oluşturmayı yönlendirin.",
-        "api_luma_photon_style_ref": "Luma Photon kullanarak stil referanslarını hassas kontrolle birleştirerek görüntüler oluşturun.",
-        "api_openai_dall_e_2_inpaint": "OpenAI Dall-E 2 API'si ile inpainting kullanarak görüntüleri düzenleyin.",
-        "api_openai_dall_e_2_t2i": "OpenAI Dall-E 2 API'sini kullanarak metin istemlerinden görüntüler oluşturun.",
-        "api_openai_dall_e_3_t2i": "OpenAI Dall-E 3 API'sini kullanarak metin istemlerinden görüntüler oluşturun.",
-        "api_openai_image_1_i2i": "OpenAI GPT Image 1 API'sini kullanarak giriş görüntülerinden görüntüler oluşturun.",
-        "api_openai_image_1_inpaint": "OpenAI GPT Image 1 API'si ile inpainting kullanarak görüntüleri düzenleyin.",
-        "api_openai_image_1_multi_inputs": "OpenAI GPT Image 1 API'sini kullanarak birden fazla girişten görüntüler oluşturun.",
-        "api_openai_image_1_t2i": "OpenAI GPT Image 1 API'sini kullanarak metin istemlerinden görüntüler oluşturun.",
-        "api_recraft_image_gen_with_color_control": "Recraft kullanarak özel renk paletleri ve markaya özgü görsellerle görüntüler oluşturun.",
-        "api_recraft_image_gen_with_style_control": "Görsel örneklerle stili kontrol edin, konumu hizalayın ve nesneleri ince ayar yapın. Mükemmel marka tutarlılığı için stilleri saklayın ve paylaşın.",
-        "api_recraft_vector_gen": "Recraft'ın yapay zeka vektör oluşturucusunu kullanarak metin istemlerinden yüksek kaliteli vektör görüntüler oluşturun.",
-        "api_runway_reference_to_image": "Runway'in yapay zekası ile referans stillere ve kompozisyonlara dayalı yeni görüntüler oluşturun.",
-        "api_runway_text_to_image": "Runway'in yapay zeka modelini kullanarak metin istemlerinden yüksek kaliteli görüntüler oluşturun.",
-        "api_stability_ai_i2i": "Stability AI kullanarak yüksek kaliteli üretimle görüntüleri dönüştürün, profesyonel düzenleme ve stil aktarımı için mükemmel.",
-        "api_stability_ai_sd3_5_i2i": "Mükemmel istem uyumu ile yüksek kaliteli görüntüler oluşturun. 1 megapiksel çözünürlükte profesyonel kullanım durumları için mükemmel.",
-        "api_stability_ai_sd3_5_t2i": "Mükemmel istem uyumu ile yüksek kaliteli görüntüler oluşturun. 1 megapiksel çözünürlükte profesyonel kullanım durumları için mükemmel.",
-        "api_stability_ai_stable_image_ultra_t2i": "Mükemmel istem uyumu ile yüksek kaliteli görüntüler oluşturun. 1 megapiksel çözünürlükte profesyonel kullanım durumları için mükemmel."
-      },
-      "LLM API": {
-        "api_google_gemini": "Gemini'nin akıl yürütme yetenekleriyle Google'ın çok modlu yapay zekasını deneyimleyin.",
-        "api_openai_chat": "Akıllı konuşmalar için OpenAI'nin gelişmiş dil modelleriyle etkileşime geçin."
-      },
-      "Upscaling": {
-        "esrgan_example": "Kaliteyi artırmak için ESRGAN modellerini kullanarak görüntüleri yükseltin.",
-        "hiresfix_esrgan_workflow": "Ara üretim adımları sırasında ESRGAN modellerini kullanarak görüntüleri yükseltin.",
-        "hiresfix_latent_workflow": "Gizli alanda kaliteyi artırarak görüntüleri yükseltin.",
-        "latent_upscale_different_prompt_model": "Üretim geçişleri boyunca istemleri değiştirirken görüntüleri yükseltin."
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan modelini kullanarak metin istemlerinden videolar oluşturun.",
-        "image_to_video": "Hareketsiz görüntülerden videolar oluşturun.",
-        "image_to_video_wan": "Wan 2.1 kullanarak görüntülerden videolar oluşturun.",
-        "ltxv_image_to_video": "Hareketsiz görüntülerden videolar oluşturun.",
-        "ltxv_text_to_video": "Metin istemlerinden videolar oluşturun.",
-        "mochi_text_to_video_example": "Mochi modelini kullanarak metin istemlerinden videolar oluşturun.",
-        "text_to_video_wan": "Wan 2.1 kullanarak metin istemlerinden videolar oluşturun.",
-        "txt_to_image_to_video": "Önce metin istemlerinden görüntüler oluşturarak videolar oluşturun.",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Fiziksel olarak doğru, yüksek sadakatli ve tutarlı video simülasyonları oluşturan Cosmos-Predict2 2B Video2World ile videolar oluşturun.",
-        "video_wan2_1_fun_camera_v1_1_14B": "Tam 14B modelini kullanarak gelişmiş kamera kontrolü ile yüksek kaliteli videolar oluşturun",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B modelini kullanarak sinematik kamera hareketleriyle dinamik videolar oluşturun.",
-        "video_wan_vace_14B_ref2v": "Bir referans görüntünün stili ve içeriğiyle eşleşen videolar oluşturun. Stil tutarlı video oluşturma için mükemmel.",
-        "video_wan_vace_14B_t2v": "Metin açıklamalarını yüksek kaliteli videolara dönüştürün. VACE-14B modeliyle hem 480p hem de 720p'yi destekler.",
-        "video_wan_vace_14B_v2v": "Wan VACE kullanarak giriş videolarını ve referans görüntülerini kontrol ederek videolar oluşturun.",
-        "video_wan_vace_flf2v": "Başlangıç ve bitiş karelerini tanımlayarak pürüzsüz video geçişleri oluşturun. Özel anahtar kare dizilerini destekler.",
-        "video_wan_vace_inpainting": "Çevredeki içeriği korurken videolardaki belirli bölgeleri düzenleyin. Nesne kaldırma veya değiştirme için harika.",
-        "video_wan_vace_outpainting": "Wan VACE outpainting kullanarak video boyutunu genişleterek uzatılmış videolar oluşturun.",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V kullanarak ilk ve son kareleri kontrol ederek videolar oluşturun.",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet kullanarak poz, derinlik ve kenar kontrolleriyle yönlendirilen videolar oluşturun.",
-        "wan2_1_fun_inp": "Wan 2.1 inpainting kullanarak başlangıç ve bitiş karelerinden videolar oluşturun."
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax kullanarak CGI entegrasyonu ile görüntülerden ve metinden rafine videolar oluşturun.",
-        "api_hailuo_minimax_t2v": "Doğrudan metin istemlerinden yüksek kaliteli videolar oluşturun. Açıklamalarınızı hayata geçirmek için profesyonel CGI efektleri ve stilistik unsurlarla çeşitli görsel anlatılar oluşturmak için MiniMax'in gelişmiş yapay zeka yeteneklerini keşfedin.",
-        "api_kling_effects": "Kling kullanarak görüntülere görsel efektler uygulayarak dinamik videolar oluşturun.",
-        "api_kling_flf": "İlk ve son kareleri kontrol ederek videolar oluşturun.",
-        "api_kling_i2v": "Kling kullanarak eylemler, ifadeler ve kamera hareketleri için mükemmel istem uyumu ile videolar oluşturun.",
-        "api_luma_i2v": "Statik görüntüleri alın ve anında sihirli yüksek kaliteli animasyonlar oluşturun.",
-        "api_luma_t2v": "Basit istemler kullanılarak yüksek kaliteli videolar oluşturulabilir.",
-        "api_moonvalley_image_to_video": "Yalnızca lisanslı veriler üzerinde eğitilmiş bir model aracılığıyla bir görüntü ile sinematik, 1080p videolar oluşturun.",
-        "api_moonvalley_text_to_video": "Yalnızca lisanslı veriler üzerinde eğitilmiş bir model aracılığıyla metin istemlerinden sinematik, 1080p videolar oluşturun.",
-        "api_pika_i2v": "Pika AI kullanarak tek bir statik görüntüden pürüzsüz animasyonlu videolar oluşturun.",
-        "api_pika_scene": "Pika Scenes kullanarak birden fazla giriş görüntüsü içeren videolar oluşturun.",
-        "api_pixverse_i2v": "PixVerse kullanarak hareket ve efektlerle statik görüntülerden dinamik videolar oluşturun.",
-        "api_pixverse_t2v": "Doğru istem yorumlaması ve çarpıcı video dinamikleri ile videolar oluşturun.",
-        "api_pixverse_template_i2v": "PixVerse kullanarak hareket ve efektlerle statik görüntülerden dinamik videolar oluşturun.",
-        "api_runway_first_last_frame": "Runway'in hassasiyeti ile iki anahtar kare arasında pürüzsüz video geçişleri oluşturun.",
-        "api_runway_gen3a_turbo_image_to_video": "Runway Gen3a Turbo kullanarak statik görüntülerden sinematik videolar oluşturun.",
-        "api_runway_gen4_turo_image_to_video": "Runway Gen4 Turbo kullanarak görüntülerden dinamik videolar oluşturun.",
-        "api_veo2_i2v": "Google Veo2 API'sini kullanarak görüntülerden videolar oluşturun."
-      }
-    },
     "title": "Bir Şablonla Başlayın",
     "useCasesSelected": "{count} Kullanım Senaryosu"
   },
diff --git a/src/locales/tr/nodeDefs.json b/src/locales/tr/nodeDefs.json
index 51cf123ca..7f3a1f60f 100644
--- a/src/locales/tr/nodeDefs.json
+++ b/src/locales/tr/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "Bir kontrol görüntüsü (canny) kullanarak görüntü oluşturun.",
-    "display_name": "Flux.1 Canny Kontrol Görüntüsü",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny_yüksek_eşik",
-        "tooltip": "Canny kenar algılama için yüksek eşik; skip_processing True ise yoksayılır"
-      },
-      "canny_low_threshold": {
-        "name": "canny_düşük_eşik",
-        "tooltip": "Canny kenar algılama için düşük eşik; skip_processing True ise yoksayılır"
-      },
-      "control_after_generate": {
-        "name": "oluşturduktan sonra kontrol et"
-      },
-      "control_image": {
-        "name": "kontrol_görüntüsü"
-      },
-      "guidance": {
-        "name": "rehberlik",
-        "tooltip": "Görüntü oluşturma süreci için rehberlik gücü"
-      },
-      "prompt": {
-        "name": "istem",
-        "tooltip": "Görüntü oluşturma istemi"
-      },
-      "prompt_upsampling": {
-        "name": "istem_yükseltme",
-        "tooltip": "İstem üzerinde yükseltme yapılıp yapılmayacağı. Etkinse, daha yaratıcı üretim için istemi otomatik olarak değiştirir, ancak sonuçlar belirleyici değildir (aynı tohum tam olarak aynı sonucu vermez)."
-      },
-      "seed": {
-        "name": "tohum",
-        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
-      },
-      "skip_preprocessing": {
-        "name": "ön_işlemeyi_atla",
-        "tooltip": "Ön işlemenin atlanıp atlanmayacağı; kontrol_görüntüsü zaten canny'lenmişse True, ham bir görüntü ise False olarak ayarlayın."
-      },
-      "steps": {
-        "name": "adımlar",
-        "tooltip": "Görüntü oluşturma süreci için adım sayısı"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "Bir kontrol görüntüsü (derinlik) kullanarak görüntü oluşturun.",
-    "display_name": "Flux.1 Derinlik Kontrol Görüntüsü",
-    "inputs": {
-      "control_after_generate": {
-        "name": "oluşturduktan sonra kontrol et"
-      },
-      "control_image": {
-        "name": "kontrol_görüntüsü"
-      },
-      "guidance": {
-        "name": "rehberlik",
-        "tooltip": "Görüntü oluşturma süreci için rehberlik gücü"
-      },
-      "prompt": {
-        "name": "istem",
-        "tooltip": "Görüntü oluşturma istemi"
-      },
-      "prompt_upsampling": {
-        "name": "istem_yükseltme",
-        "tooltip": "İstem üzerinde yükseltme yapılıp yapılmayacağı. Etkinse, daha yaratıcı üretim için istemi otomatik olarak değiştirir, ancak sonuçlar belirleyici değildir (aynı tohum tam olarak aynı sonucu vermez)."
-      },
-      "seed": {
-        "name": "tohum",
-        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
-      },
-      "skip_preprocessing": {
-        "name": "ön_işlemeyi_atla",
-        "tooltip": "Ön işlemenin atlanıp atlanmayacağı; kontrol_görüntüsü zaten derinliklendirilmişse True, ham bir görüntü ise False olarak ayarlayın."
-      },
-      "steps": {
-        "name": "adımlar",
-        "tooltip": "Görüntü oluşturma süreci için adım sayısı"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "İsteme göre görüntüyü dışa doğru boyar.",
     "display_name": "Flux.1 Görüntüyü Genişlet",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "3D Yükle - Animasyon",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "yükseklik"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "model_dosyası"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "genişlik"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "kamera_bilgisi"
       },
-      "image": {
-        "name": "görüntü"
-      },
       "model_file": {
         "name": "model_dosyası"
       }
diff --git a/src/locales/tr/settings.json b/src/locales/tr/settings.json
index 5d5cae196..f71c9b0bb 100644
--- a/src/locales/tr/settings.json
+++ b/src/locales/tr/settings.json
@@ -155,10 +155,6 @@
     "name": "Başlangıç Izgara Görünürlüğü",
     "tooltip": "Yeni bir 3D widget oluşturulduğunda ızgaranın varsayılan olarak görünür olup olmadığını kontrol eder. Bu varsayılan, oluşturulduktan sonra her widget için ayrı ayrı değiştirilebilir."
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "Başlangıç Önizleme Görünürlüğü",
-    "tooltip": "Yeni bir 3D widget oluşturulduğunda önizleme ekranının varsayılan olarak görünür olup olmadığını kontrol eder. Bu varsayılan, oluşturulduktan sonra her widget için ayrı ayrı değiştirilebilir."
-  },
   "Comfy_Locale": {
     "name": "Dil"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "Yeni menüyü kullan",
     "options": {
-      "Bottom": "Alt",
       "Disabled": "Devre dışı",
       "Top": "Üst"
     },
@@ -384,8 +379,7 @@
     "name": "Açılan iş akışları konumu",
     "options": {
       "Sidebar": "Kenar Çubuğu",
-      "Topbar": "Üst Çubuk",
-      "Topbar (2nd-row)": "Üst Çubuk (2. sıra)"
+      "Topbar": "Üst Çubuk"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index d5f648bd7..fd041cfc9 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -693,7 +693,6 @@
       "perspective": "透視"
     },
     "clearRecording": "清除錄影",
-    "edgeThreshold": "邊緣閾值",
     "export": "匯出",
     "exportModel": "匯出模型",
     "exportRecording": "匯出錄影",
@@ -706,7 +705,6 @@
     "materialMode": "材質模式",
     "materialModes": {
       "depth": "深度",
-      "lineart": "線條藝術",
       "normal": "一般",
       "original": "原始",
       "wireframe": "線框"
@@ -1523,310 +1521,6 @@
       "searchPlaceholder": "搜尋..."
     },
     "sorting": "排序依據",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
-        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV",
-        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin：圖片轉模型",
-        "api_rodin_multiview_to_model": "Rodin：多視角轉模型",
-        "api_tripo_image_to_model": "Tripo：圖片轉模型",
-        "api_tripo_multiview_to_model": "Tripo：多視角轉模型",
-        "api_tripo_text_to_model": "Tripo：文字轉模型"
-      },
-      "Area Composition": {
-        "area_composition": "區域合成",
-        "area_composition_square_area_for_subject": "主體區域一致合成"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 M2M 編輯",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 文字轉純樂器音樂",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 文字轉歌曲",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "圖片生成",
-        "embedding_example": "Embedding",
-        "gligen_textbox_example": "Gligen Textbox",
-        "image2image": "圖片轉圖片",
-        "inpaint_example": "Inpaint",
-        "inpaint_model_outpainting": "外延",
-        "lora": "LoRA",
-        "lora_multiple": "多重LoRA"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "Pose ControlNet 2 Pass",
-        "controlnet_example": "Scribble ControlNet",
-        "depth_controlnet": "Depth ControlNet",
-        "depth_t2i_adapter": "Depth T2I Adapter",
-        "mixing_controlnets": "Mixing ControlNets"
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Canny Model",
-        "flux_depth_lora_example": "Flux Depth LoRA",
-        "flux_dev_checkpoint_example": "Flux Dev fp8",
-        "flux_dev_full_text_to_image": "Flux Dev 完整文字轉圖",
-        "flux_fill_inpaint_example": "Flux Inpaint",
-        "flux_fill_outpaint_example": "Flux Outpaint",
-        "flux_kontext_dev_basic": "Flux Kontext Dev（基礎）",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev（組合版）",
-        "flux_redux_model_example": "Flux Redux Model",
-        "flux_schnell": "Flux Schnell fp8",
-        "flux_schnell_full_text_to_image": "Flux Schnell 完整文字轉圖"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 完整版",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Fast",
-        "hidream_i1_full": "HiDream I1 Full",
-        "image_chroma_text_to_image": "Chroma 文字轉圖",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B 文字轉圖",
-        "image_lotus_depth_v1_1": "Lotus Depth",
-        "image_omnigen2_image_edit": "OmniGen2 圖片編輯",
-        "image_omnigen2_t2i": "OmniGen2 文字轉圖",
-        "sd3_5_large_blur": "SD3.5 Large Blur",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 Large Canny ControlNet",
-        "sd3_5_large_depth": "SD3.5 Large Depth",
-        "sd3_5_simple_example": "SD3.5 Simple",
-        "sdxl_refiner_prompt_example": "SDXL Refiner Prompt",
-        "sdxl_revision_text_prompts": "SDXL Revision Text Prompts",
-        "sdxl_revision_zero_positive": "SDXL Revision Zero Positive",
-        "sdxl_simple_example": "SDXL Simple",
-        "sdxlturbo_example": "SDXL Turbo"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext 多圖輸入",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
-        "api_bfl_flux_pro_t2i": "BFL Flux 1.1[pro] Ultra Text to Image",
-        "api_ideogram_v3_t2i": "Ideogram V3 Text to Image",
-        "api_luma_photon_i2i": "Luma Photon Image to Image",
-        "api_luma_photon_style_ref": "Luma Photon Style Reference",
-        "api_openai_dall_e_2_inpaint": "OpenAI：Dall-E 2 修補",
-        "api_openai_dall_e_2_t2i": "OpenAI：Dall-E 2 文字轉圖",
-        "api_openai_dall_e_3_t2i": "OpenAI：Dall-E 3 文字轉圖",
-        "api_openai_image_1_i2i": "OpenAI Image-1 Image to Image",
-        "api_openai_image_1_inpaint": "OpenAI Image-1 Inpaint",
-        "api_openai_image_1_multi_inputs": "OpenAI Image-1 Multi Inputs",
-        "api_openai_image_1_t2i": "OpenAI Image-1 Text to Image",
-        "api_recraft_image_gen_with_color_control": "Recraft Color Control Image Generation",
-        "api_recraft_image_gen_with_style_control": "Recraft Style Control Image Generation",
-        "api_recraft_vector_gen": "Recraft Vector Generation",
-        "api_runway_reference_to_image": "Runway：參考圖轉圖",
-        "api_runway_text_to_image": "Runway：文字轉圖",
-        "api_stability_ai_i2i": "Stability AI：圖轉圖",
-        "api_stability_ai_sd3_5_i2i": "Stability AI：SD3.5 圖轉圖",
-        "api_stability_ai_sd3_5_t2i": "Stability AI：SD3.5 文字轉圖",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI：Stable Image Ultra 文字轉圖"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini：聊天",
-        "api_openai_chat": "OpenAI：聊天"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGAN Workflow",
-        "hiresfix_latent_workflow": "Upscale",
-        "latent_upscale_different_prompt_model": "Latent Upscale Different Prompt Model"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan Video Text to Video",
-        "image_to_video": "SVD Image to Video",
-        "image_to_video_wan": "Wan 2.1 Image to Video",
-        "ltxv_image_to_video": "LTXV Image to Video",
-        "ltxv_text_to_video": "LTXV Text to Video",
-        "mochi_text_to_video_example": "Mochi Text to Video",
-        "text_to_video_wan": "Wan 2.1 Text to Video",
-        "txt_to_image_to_video": "SVD Text to Image to Video",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE 參考圖轉影片",
-        "video_wan_vace_14B_t2v": "Wan VACE 文字轉影片",
-        "video_wan_vace_14B_v2v": "Wan VACE 控制影片",
-        "video_wan_vace_flf2v": "Wan VACE 首尾影格",
-        "video_wan_vace_inpainting": "Wan VACE 修補",
-        "video_wan_vace_outpainting": "Wan VACE 外延",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet",
-        "wan2_1_fun_inp": "Wan 2.1 Inpainting"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax Image to Video",
-        "api_hailuo_minimax_t2v": "MiniMax：文字轉影片",
-        "api_kling_effects": "Kling：影片特效",
-        "api_kling_flf": "Kling：首尾影格",
-        "api_kling_i2v": "Kling Image to Video",
-        "api_luma_i2v": "Luma Image to Video",
-        "api_luma_t2v": "Luma：文字轉影片",
-        "api_moonvalley_image_to_video": "Moonvalley：圖片轉影片",
-        "api_moonvalley_text_to_video": "Moonvalley：文字轉影片",
-        "api_pika_i2v": "Pika：圖片轉影片",
-        "api_pika_scene": "Pika Scenes: Images to Video",
-        "api_pixverse_i2v": "PixVerse：圖片轉影片",
-        "api_pixverse_t2v": "PixVerse Text to Video",
-        "api_pixverse_template_i2v": "PixVerse Template Effects: Image to Video",
-        "api_runway_first_last_frame": "Runway：首尾影格轉影片",
-        "api_runway_gen3a_turbo_image_to_video": "Runway：Gen3a Turbo 圖片轉影片",
-        "api_runway_gen4_turo_image_to_video": "Runway：Gen4 Turbo 圖片轉影片",
-        "api_veo2_i2v": "Veo2 Image to Video"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "使用 Hunyuan3D 2.0，單張圖片生成 3D 模型。",
-        "3d_hunyuan3d_multiview_to_model": "使用 Hunyuan3D 2.0 MV，多視角生成 3D 模型。",
-        "3d_hunyuan3d_multiview_to_model_turbo": "使用 Hunyuan3D 2.0 MV Turbo，多視角快速生成 3D 模型。",
-        "stable_zero123_example": "由單張圖片產生 3D 視角。"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "使用 Rodin AI，單張照片生成細緻 3D 模型。",
-        "api_rodin_multiview_to_model": "利用 Rodin 多角度重建，雕塑完整 3D 模型。",
-        "api_tripo_image_to_model": "使用 Tripo 引擎，將 2D 圖片生成專業 3D 素材。",
-        "api_tripo_multiview_to_model": "利用 Tripo 進階掃描，從多角度建立 3D 模型。",
-        "api_tripo_text_to_model": "用 Tripo 文字驅動建模，創作 3D 物件。"
-      },
-      "Area Composition": {
-        "area_composition": "以區域控制圖片構圖。",
-        "area_composition_square_area_for_subject": "建立主體一致擺放。"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "使用 ACE-Step v1 M2M，編輯現有歌曲，變更風格與歌詞。",
-        "audio_ace_step_1_t2a_instrumentals": "使用 ACE-Step v1，根據文字提示產生純樂器音樂。",
-        "audio_ace_step_1_t2a_song": "使用 ACE-Step v1，根據文字提示產生含人聲歌曲，支援多語言與風格自訂。",
-        "audio_stable_audio_example": "使用 Stable Audio，根據文字提示產生音訊。"
-      },
-      "Basics": {
-        "default": "根據文字描述產生圖片。",
-        "embedding_example": "使用文字反轉技術以保持風格一致。",
-        "gligen_textbox_example": "指定物件的位置與大小。",
-        "image2image": "使用文字提示轉換現有圖片。",
-        "inpaint_example": "無縫編輯圖片的特定區域。",
-        "inpaint_model_outpainting": "將影像延伸至原始邊界之外。",
-        "lora": "套用 LoRA 模型以獲得特殊風格或主題。",
-        "lora_multiple": "結合多個 LoRA 模型創造獨特效果。"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "由姿勢參考產生圖片。",
-        "controlnet_example": "以參考圖控制圖片生成。",
-        "depth_controlnet": "產生深度感知圖片。",
-        "depth_t2i_adapter": "使用 T2I adapter 快速產生深度感知圖片。",
-        "mixing_controlnets": "結合多個 ControlNet 模型。"
-      },
-      "Flux": {
-        "flux_canny_model_example": "從邊緣偵測產生圖片。",
-        "flux_depth_lora_example": "結合深度感知 LoRA 產生圖片。",
-        "flux_dev_checkpoint_example": "使用 Flux 開發模型產生圖片。",
-        "flux_dev_full_text_to_image": "使用 Flux Dev 完整版本產生高品質影像。需較大 VRAM 與多個模型檔案，但能提供最佳提示遵循能力與影像品質。",
-        "flux_fill_inpaint_example": "填補圖片缺失區域。",
-        "flux_fill_outpaint_example": "使用 Flux 外延技術延伸圖片。",
-        "flux_kontext_dev_basic": "使用 Flux Kontext 編輯影像，完整節點可見，適合學習工作流程。",
-        "flux_kontext_dev_grouped": "Flux Kontext 精簡版，節點分組，工作區更整潔。",
-        "flux_redux_model_example": "從參考圖片轉移風格，指引 Flux 生成圖片。",
-        "flux_schnell": "使用 Flux Schnell 快速產生圖片。",
-        "flux_schnell_full_text_to_image": "使用 Flux Schnell 完整版快速產生影像。採用 Apache2.0 授權，僅需 4 步驟即可生成並維持良好畫質。"
-      },
-      "Image": {
-        "hidream_e1_full": "使用 HiDream E1 編輯圖片。",
-        "hidream_i1_dev": "使用 HiDream I1 Dev 產生圖片。",
-        "hidream_i1_fast": "使用 HiDream I1 快速產生圖片。",
-        "hidream_i1_full": "使用 HiDream I1 產生圖片。",
-        "image_chroma_text_to_image": "Chroma 由 flux 修改而來，架構上有部分變動。",
-        "image_cosmos_predict2_2B_t2i": "使用 Cosmos-Predict2 2B T2I 產生物理精確、高保真且細節豐富的影像。",
-        "image_lotus_depth_v1_1": "在 ComfyUI 執行 Lotus Depth，進行零樣本、高效率的單眼深度估測，保留高細節。",
-        "image_omnigen2_image_edit": "利用 OmniGen2 進階影像編輯能力與文字渲染支援，透過自然語言指令編輯影像。",
-        "image_omnigen2_t2i": "使用 OmniGen2 的統一 7B 多模態模型與雙路架構，根據文字提示產生高品質影像。",
-        "sd3_5_large_blur": "使用 SD 3.5 由模糊參考圖產生圖片。",
-        "sd3_5_large_canny_controlnet_example": "使用邊緣偵測搭配 SD 3.5 指引圖片生成。",
-        "sd3_5_large_depth": "使用 SD 3.5 產生深度感知圖片。",
-        "sd3_5_simple_example": "使用 SD 3.5 產生圖片。",
-        "sdxl_refiner_prompt_example": "使用精煉器增強 SDXL 輸出。",
-        "sdxl_revision_text_prompts": "將參考圖概念轉移至 SDXL 生成流程。",
-        "sdxl_revision_zero_positive": "結合文字提示與參考圖指引 SDXL 生成圖片。",
-        "sdxl_simple_example": "使用 SDXL 產生高品質圖片。",
-        "sdxlturbo_example": "使用 SDXL Turbo 一步產生圖片。"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "使用 Flux.1 Kontext max 編輯圖片。",
-        "api_bfl_flux_1_kontext_multiple_images_input": "輸入多張圖片並用 Flux.1 Kontext 編輯。",
-        "api_bfl_flux_1_kontext_pro_image": "使用 Flux.1 Kontext pro 編輯圖片。",
-        "api_bfl_flux_pro_t2i": "使用 FLUX.1 [pro] 產生優異提示遵循、視覺品質、細節與多樣化圖片。",
-        "api_ideogram_v3_t2i": "產生高品質圖片與提示對齊、寫實感與文字渲染。可製作專業標誌、宣傳海報、登陸頁概念、產品攝影等。輕鬆打造複雜背景、精確光影與真實環境細節的空間構圖。",
-        "api_luma_photon_i2i": "結合圖片與提示指引圖片生成。",
-        "api_luma_photon_style_ref": "精確控制套用與混合風格參考。Luma Photon 捕捉每張參考圖的精髓，讓你結合不同視覺元素並維持專業品質。",
-        "api_openai_dall_e_2_inpaint": "使用 OpenAI Dall-E 2 API 進行圖片修補編輯。",
-        "api_openai_dall_e_2_t2i": "使用 OpenAI Dall-E 2 API，根據文字提示產生圖片。",
-        "api_openai_dall_e_3_t2i": "使用 OpenAI Dall-E 3 API，根據文字提示產生圖片。",
-        "api_openai_image_1_i2i": "使用 GPT Image 1 API 由圖片產生圖片。",
-        "api_openai_image_1_inpaint": "使用 GPT Image 1 API 修補圖片。",
-        "api_openai_image_1_multi_inputs": "使用 GPT Image 1 API 多重輸入產生圖片。",
-        "api_openai_image_1_t2i": "使用 GPT Image 1 API 根據文字描述產生圖片。",
-        "api_recraft_image_gen_with_color_control": "建立自訂調色盤以多圖共用，或為每張照片手動挑選顏色。配合品牌色彩，打造專屬視覺風格。",
-        "api_recraft_image_gen_with_style_control": "以視覺範例控制風格、對齊位置並微調物件。儲存並分享風格，確保品牌一致性。",
-        "api_recraft_vector_gen": "從文字提示生成向量圖，Recraft AI 向量生成器可產出最佳品質的標誌、海報、圖示、廣告、橫幅與模型。以高品質 SVG 完善設計，數秒內為你的應用或網站創建品牌向量插圖。",
-        "api_runway_reference_to_image": "利用 Runway AI，根據參考風格與構圖產生新圖片。",
-        "api_runway_text_to_image": "使用 Runway AI 模型，根據文字提示產生高品質圖片。",
-        "api_stability_ai_i2i": "使用 Stability AI 進行高品質圖片生成，適合專業編輯與風格轉換。",
-        "api_stability_ai_sd3_5_i2i": "產生高品質、極佳提示遵循度的圖片。1 百萬像素解析度，專業用途首選。",
-        "api_stability_ai_sd3_5_t2i": "產生高品質、極佳提示遵循度的圖片。1 百萬像素解析度，專業用途首選。",
-        "api_stability_ai_stable_image_ultra_t2i": "產生高品質、極佳提示遵循度的圖片。1 百萬像素解析度，專業用途首選。"
-      },
-      "LLM API": {
-        "api_google_gemini": "體驗 Google Gemini 多模態 AI 與推理能力。",
-        "api_openai_chat": "與 OpenAI 進階語言模型互動，展開智慧對話。"
-      },
-      "Upscaling": {
-        "esrgan_example": "使用放大模型提升圖片品質。",
-        "hiresfix_esrgan_workflow": "在中間步驟使用放大模型。",
-        "hiresfix_latent_workflow": "在 latent 空間提升圖片品質。",
-        "latent_upscale_different_prompt_model": "跨多次處理放大並更換提示。"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "使用 Hunyuan 模型產生影片。",
-        "image_to_video": "將圖片轉換為動畫影片。",
-        "image_to_video_wan": "快速將圖片轉換為影片。",
-        "ltxv_image_to_video": "將靜態圖片轉換為影片。",
-        "ltxv_text_to_video": "根據文字描述產生影片。",
-        "mochi_text_to_video_example": "使用 Mochi 模型產生影片。",
-        "text_to_video_wan": "快速將文字描述轉換為影片。",
-        "txt_to_image_to_video": "先由文字產生圖片，再轉換為影片。",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "使用 Cosmos-Predict2 2B Video2World 產生物理精確、高保真且一致的影片模擬。",
-        "video_wan2_1_fun_camera_v1_1_14B": "使用完整 14B 模型，進階鏡頭控制產生高品質影片。",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "使用 Wan 2.1 Fun Camera 1.3B 模型，產生具電影感鏡頭運動的動態影片。",
-        "video_wan_vace_14B_ref2v": "根據參考圖片產生風格與內容一致的影片。適合風格一致的影片生成。",
-        "video_wan_vace_14B_t2v": "將文字描述轉換為高品質影片。支援 480p 與 720p，採用 VACE-14B 模型。",
-        "video_wan_vace_14B_v2v": "透過控制輸入影片與參考圖片，使用 Wan VACE 產生影片。",
-        "video_wan_vace_flf2v": "自訂起始與結束畫面，產生平滑影片過渡。支援自定義關鍵影格序列。",
-        "video_wan_vace_inpainting": "編輯影片中特定區域，同時保留周圍內容。適合物件移除或替換。",
-        "video_wan_vace_outpainting": "使用 Wan VACE 外延功能，擴展影片尺寸產生延伸影片。",
-        "wan2_1_flf2v_720_f16": "透過控制首尾影格產生影片。",
-        "wan2_1_fun_control": "以姿勢、深度、邊緣等控制影片生成。",
-        "wan2_1_fun_inp": "從起始與結束影格產生影片。"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "結合圖片與文字產生精緻影片，支援 CGI 整合與流行 AI 擁抱等特效。多種影片風格與主題任你選擇，滿足創意需求。",
-        "api_hailuo_minimax_t2v": "直接從文字提示產生高品質影片。探索 MiniMax 進階 AI，打造多元視覺敘事，專業 CGI 效果與風格元素，讓描述栩栩如生。",
-        "api_kling_effects": "使用 Kling 將視覺特效套用於圖片，產生動態影片。",
-        "api_kling_flf": "透過控制首尾畫面產生影片。",
-        "api_kling_i2v": "產生動作、表情、鏡頭移動等提示遵循度高的影片。支援複雜連續動作提示，讓你成為導演。",
-        "api_luma_i2v": "將靜態圖片即時轉換為高品質動畫。",
-        "api_luma_t2v": "只需簡單提示，即可產生高品質影片。",
-        "api_moonvalley_image_to_video": "透過專為授權資料訓練的模型，使用圖片產生電影級 1080p 影片。",
-        "api_moonvalley_text_to_video": "透過專為授權資料訓練的模型，根據文字提示產生電影級 1080p 影片。",
-        "api_pika_i2v": "使用 Pika AI，將單張靜態圖片轉為流暢動畫影片。",
-        "api_pika_scene": "將多張圖片作為素材，產生融合所有圖片的影片。",
-        "api_pixverse_i2v": "使用 PixVerse，將靜態圖片轉為具動態與特效的影片。",
-        "api_pixverse_t2v": "根據提示精確解讀並產生動態出色的影片。",
-        "api_pixverse_template_i2v": "將靜態圖片轉換為具動態與特效的影片。",
-        "api_runway_first_last_frame": "利用 Runway 精準控制，於兩個關鍵影格間產生平滑影片過渡。",
-        "api_runway_gen3a_turbo_image_to_video": "使用 Runway Gen3a Turbo，將靜態圖片轉為電影感影片。",
-        "api_runway_gen4_turo_image_to_video": "使用 Runway Gen4 Turbo，將圖片轉為動態影片。",
-        "api_veo2_i2v": "使用 Google Veo2 API 由圖片產生影片。"
-      }
-    },
     "title": "從範本開始",
     "useCasesSelected": "{count} 個使用案例"
   },
diff --git a/src/locales/zh-TW/nodeDefs.json b/src/locales/zh-TW/nodeDefs.json
index 131d4b5ec..944ba4f4a 100644
--- a/src/locales/zh-TW/nodeDefs.json
+++ b/src/locales/zh-TW/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "使用控制影像（canny）產生圖片。",
-    "display_name": "Flux.1 Canny 控制影像",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny_high_threshold",
-        "tooltip": "Canny 邊緣偵測的高閾值；若 skip_processing 為 True 則忽略"
-      },
-      "canny_low_threshold": {
-        "name": "canny_low_threshold",
-        "tooltip": "Canny 邊緣偵測的低閾值；若 skip_processing 為 True 則忽略"
-      },
-      "control_after_generate": {
-        "name": "生成後控制"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "圖片生成過程的引導強度"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "圖片生成提示詞"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "是否對提示詞進行向上採樣。如果啟用，會自動修改提示詞以產生更具創意的結果，但結果將不具決定性（相同種子不會產生完全相同的結果）。"
-      },
-      "seed": {
-        "name": "種子",
-        "tooltip": "用於產生雜訊的隨機種子。"
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "是否跳過前處理；若 control_image 已經是 canny 處理過的，請設為 True，若是原始圖片則設為 False。"
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "圖片生成過程的步數"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "使用控制影像（深度）生成影像。",
-    "display_name": "Flux.1 深度控制影像",
-    "inputs": {
-      "control_after_generate": {
-        "name": "生成後控制"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "引導強度",
-        "tooltip": "影像生成過程的引導強度"
-      },
-      "prompt": {
-        "name": "提示詞",
-        "tooltip": "用於影像生成的提示詞"
-      },
-      "prompt_upsampling": {
-        "name": "提示詞向上採樣",
-        "tooltip": "是否對提示詞進行向上採樣。啟用時，會自動修改提示詞以產生更具創意的生成結果，但結果具有不確定性（相同種子不會產生完全相同的結果）。"
-      },
-      "seed": {
-        "name": "種子",
-        "tooltip": "用於產生雜訊的隨機種子。"
-      },
-      "skip_preprocessing": {
-        "name": "跳過前處理",
-        "tooltip": "是否跳過前處理；如果 control_image 已經是深度化影像請設為 True，若為原始影像請設為 False。"
-      },
-      "steps": {
-        "name": "步驟數",
-        "tooltip": "影像生成過程的步數"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "根據提示詞對影像進行外擴。",
     "display_name": "Flux.1 擴展影像",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "載入 3D - 動畫",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "高度"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "模型檔案"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "寬度"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "camera_info"
       },
-      "image": {
-        "name": "影像"
-      },
       "model_file": {
         "name": "model_file"
       }
diff --git a/src/locales/zh-TW/settings.json b/src/locales/zh-TW/settings.json
index 3ab903fc3..fcc977b81 100644
--- a/src/locales/zh-TW/settings.json
+++ b/src/locales/zh-TW/settings.json
@@ -155,10 +155,6 @@
     "name": "初始網格可見性",
     "tooltip": "控制在建立新的 3D 元件時，網格是否預設可見。此預設值在建立後仍可針對每個元件單獨切換。"
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "初始預覽可見性",
-    "tooltip": "控制當新建 3D 元件時，預覽畫面預設是否顯示。此預設值在元件建立後仍可針對每個元件單獨切換。"
-  },
   "Comfy_Locale": {
     "name": "語言"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "使用新選單",
     "options": {
-      "Bottom": "下方",
       "Disabled": "停用",
       "Top": "上方"
     },
@@ -384,8 +379,7 @@
     "name": "已開啟工作流程的位置",
     "options": {
       "Sidebar": "側邊欄",
-      "Topbar": "頂部欄",
-      "Topbar (2nd-row)": "頂部欄（第二列）"
+      "Topbar": "頂部欄"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index afb037f5e..704388e13 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -693,7 +693,6 @@
       "perspective": "透视"
     },
     "clearRecording": "清除录制",
-    "edgeThreshold": "边缘阈值",
     "export": "导出",
     "exportModel": "导出模型",
     "exportRecording": "导出录制",
@@ -706,7 +705,6 @@
     "materialMode": "材质模式",
     "materialModes": {
       "depth": "深度",
-      "lineart": "线稿",
       "normal": "法线",
       "original": "原始",
       "wireframe": "线框"
@@ -1526,310 +1524,6 @@
       "searchPlaceholder": "搜索..."
     },
     "sorting": "排序方式",
-    "template": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "混元3D 2.0 图生模型",
-        "3d_hunyuan3d_multiview_to_model": "混元3D 2.0 多视图模型生成",
-        "3d_hunyuan3d_multiview_to_model_turbo": "混元3D 2.0 多视图模型生成 Turbo",
-        "stable_zero123_example": "Stable Zero123"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin：图生模型",
-        "api_rodin_multiview_to_model": "Rodin：多视图模型生成",
-        "api_tripo_image_to_model": "Tripo：图生模型",
-        "api_tripo_multiview_to_model": "Tripo：多视图模型生成",
-        "api_tripo_text_to_model": "Tripo：文生模型"
-      },
-      "Area Composition": {
-        "area_composition": "区域条件控制",
-        "area_composition_square_area_for_subject": "区域件控制生成"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "ACE Step v1 歌曲风格/歌词编辑",
-        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 文生器乐",
-        "audio_ace_step_1_t2a_song": "ACE Step v1 文生歌曲",
-        "audio_stable_audio_example": "Stable Audio"
-      },
-      "Basics": {
-        "default": "文生图(默认)",
-        "embedding_example": "文本嵌入模型",
-        "gligen_textbox_example": "Gligen文本框",
-        "image2image": "图生图",
-        "inpaint_example": "局部重绘",
-        "inpaint_model_outpainting": "图像外扩",
-        "lora": "LoRA",
-        "lora_multiple": "多重LoRA"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "姿态 ControlNet 二次采样",
-        "controlnet_example": "涂鸦 ControlNet",
-        "depth_controlnet": "深度 ControlNet",
-        "depth_t2i_adapter": "深度 T2I 适配器",
-        "mixing_controlnets": "混合 ControlNet"
-      },
-      "Flux": {
-        "flux_canny_model_example": "Flux Canny Model",
-        "flux_depth_lora_example": "Flux Depth LoRA",
-        "flux_dev_checkpoint_example": "Flux Dev fp8 文生图",
-        "flux_dev_full_text_to_image": "Flux Dev 全量文生图",
-        "flux_fill_inpaint_example": "Flux 局部重绘",
-        "flux_fill_outpaint_example": "Flux 扩图",
-        "flux_kontext_dev_basic": "Flux Kontext Dev（基础）",
-        "flux_kontext_dev_grouped": "Flux Kontext Dev（组）",
-        "flux_redux_model_example": "Flux Redux Model",
-        "flux_schnell": "Flux Schnell fp8 文生图",
-        "flux_schnell_full_text_to_image": "Flux Schnell 全量文生图"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 Full",
-        "hidream_i1_dev": "HiDream I1 Dev",
-        "hidream_i1_fast": "HiDream I1 Fast",
-        "hidream_i1_full": "HiDream I1 Full",
-        "image_chroma_text_to_image": "Chroma 文生图",
-        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B 文生图",
-        "image_lotus_depth_v1_1": "Lotus Depth",
-        "image_omnigen2_image_edit": "OmniGen2 图像编辑",
-        "image_omnigen2_t2i": "OmniGen2 文生图",
-        "sd3_5_large_blur": "SD3.5 Large 模糊",
-        "sd3_5_large_canny_controlnet_example": "SD3.5 Large Canny 控制网",
-        "sd3_5_large_depth": "SD3.5 Large 深度",
-        "sd3_5_simple_example": "SD3.5 简单版本",
-        "sdxl_refiner_prompt_example": "SDXL Refiner提示",
-        "sdxl_revision_text_prompts": "SDXL修订文本提示",
-        "sdxl_revision_zero_positive": "SDXL修订零正",
-        "sdxl_simple_example": "SDXL简单版本",
-        "sdxlturbo_example": "SDXL Turbo"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
-        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext 多图输入",
-        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
-        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]：文生图",
-        "api_ideogram_v3_t2i": "Ideogram V3：文生图",
-        "api_luma_photon_i2i": "Luma Photon：图生图",
-        "api_luma_photon_style_ref": "Luma Photon：风格参考",
-        "api_openai_dall_e_2_inpaint": "OpenAI：Dall-E 2 局部修复",
-        "api_openai_dall_e_2_t2i": "OpenAI：Dall-E 2 文生图",
-        "api_openai_dall_e_3_t2i": "OpenAI：Dall-E 3 文生图",
-        "api_openai_image_1_i2i": "OpenAI：GPT-Image-1 图生图",
-        "api_openai_image_1_inpaint": "OpenAI：GPT-Image-1 局部重绘",
-        "api_openai_image_1_multi_inputs": "OpenAI：GPT-Image-1 多输入",
-        "api_openai_image_1_t2i": "OpenAI：GPT-Image-1 文生图",
-        "api_recraft_image_gen_with_color_control": "Recraft：颜色控制图像生成",
-        "api_recraft_image_gen_with_style_control": "Recraft：风格控制图像生成",
-        "api_recraft_vector_gen": "Recraft：矢量生成",
-        "api_runway_reference_to_image": "Runway：参考图到图像",
-        "api_runway_text_to_image": "Runway：文生图",
-        "api_stability_ai_i2i": "Stability AI：图生图",
-        "api_stability_ai_sd3_5_i2i": "Stability AI：SD3.5 图生图",
-        "api_stability_ai_sd3_5_t2i": "Stability AI：SD3.5 文生图",
-        "api_stability_ai_stable_image_ultra_t2i": "Stability AI：Stable Image Ultra 文生图"
-      },
-      "LLM API": {
-        "api_google_gemini": "Google Gemini：对话",
-        "api_openai_chat": "OpenAI：对话"
-      },
-      "Upscaling": {
-        "esrgan_example": "ESRGAN",
-        "hiresfix_esrgan_workflow": "HiresFix ESRGAN放大",
-        "hiresfix_latent_workflow": "HiresFix 潜空间放大",
-        "latent_upscale_different_prompt_model": "潜空间放大二次采样"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "混元视频文生视频",
-        "image_to_video": "图生视频",
-        "image_to_video_wan": "Wan 2.1 图生视频",
-        "ltxv_image_to_video": "LTXV图生视频",
-        "ltxv_text_to_video": "LTXV文生视频",
-        "mochi_text_to_video_example": "Mochi文生视频",
-        "text_to_video_wan": "Wan 2.1 文生视频",
-        "txt_to_image_to_video": "文生图转视频",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
-        "video_wan_vace_14B_ref2v": "Wan VACE 参考视频生成",
-        "video_wan_vace_14B_t2v": "Wan VACE 文生视频",
-        "video_wan_vace_14B_v2v": "Wan VACE 控制视频",
-        "video_wan_vace_flf2v": "Wan VACE 首尾帧",
-        "video_wan_vace_inpainting": "Wan VACE Inpainting",
-        "video_wan_vace_outpainting": "Wan VACE 视频外扩",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet",
-        "wan2_1_fun_inp": "Wan 2.1 局部重绘"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax：图生视频",
-        "api_hailuo_minimax_t2v": "MiniMax：文生视频",
-        "api_kling_effects": "Kling：视频特效",
-        "api_kling_flf": "Kling：首尾帧",
-        "api_kling_i2v": "Kling：图生视频",
-        "api_luma_i2v": "Luma：图生视频",
-        "api_luma_t2v": "Luma：文生视频",
-        "api_moonvalley_image_to_video": "Moonvalley：图生视频",
-        "api_moonvalley_text_to_video": "Moonvalley：文生视频",
-        "api_pika_i2v": "Pika：图生视频",
-        "api_pika_scene": "Pika 场景：多图视频生成",
-        "api_pixverse_i2v": "PixVerse：图生视频",
-        "api_pixverse_t2v": "PixVerse：文本到视频",
-        "api_pixverse_template_i2v": "PixVerse特效：图生视频",
-        "api_runway_first_last_frame": "Runway：首尾帧视频sheng c",
-        "api_runway_gen3a_turbo_image_to_video": "Runway：Gen3a Turbo 图生视频",
-        "api_runway_gen4_turo_image_to_video": "Runway：Gen4 Turbo 图生视频",
-        "api_veo2_i2v": "Veo2：图生视频"
-      }
-    },
-    "templateDescription": {
-      "3D": {
-        "3d_hunyuan3d_image_to_model": "使用 Hunyuan3D 2.0 单图生成 3D 模型。",
-        "3d_hunyuan3d_multiview_to_model": "使用 Hunyuan3D 2.0 MV 多视角生成 3D 模型。",
-        "3d_hunyuan3d_multiview_to_model_turbo": "使用 Hunyuan3D 2.0 MV Turbo 多视角生成 3D 模型。",
-        "stable_zero123_example": "通过单张图像生成 3D 视图。"
-      },
-      "3D API": {
-        "api_rodin_image_to_model": "Rodin AI 单张照片生成高细节 3D 资产。",
-        "api_rodin_multiview_to_model": "Rodin 多视图重建完整 3D 资产。",
-        "api_tripo_image_to_model": "Tripo 2D 图像生成专业的 3D 资产。",
-        "api_tripo_multiview_to_model": "Tripo 多视角生成 3D 资产。",
-        "api_tripo_text_to_model": "Tripo 文本描述生成 3D 物体。"
-      },
-      "Area Composition": {
-        "area_composition": "通过区域控制图像构图。",
-        "area_composition_square_area_for_subject": "通过区域构成实现主体位置一致性。"
-      },
-      "Audio": {
-        "audio_ace_step_1_m2m_editing": "使用 ACE-Step v1 M2M 编辑现有歌曲风格和歌词。",
-        "audio_ace_step_1_t2a_instrumentals": "使用 ACE-Step v1 根据文本生成器乐音乐。",
-        "audio_ace_step_1_t2a_song": "使用 ACE-Step v1 根据文本生成带人声的歌曲，支持多语言和风格定制。",
-        "audio_stable_audio_example": "根据文本描述生成音频。"
-      },
-      "Basics": {
-        "default": "根据文本描述生成图像。",
-        "embedding_example": "使用文本反演模型实现风格一致性。",
-        "gligen_textbox_example": "通过文本框精确控制物体位置生成图像。",
-        "image2image": "使用文本提示转换现有图像。",
-        "inpaint_example": "无缝编辑图像的特定部分。",
-        "inpaint_model_outpainting": "将图像扩展到原始边界之外。",
-        "lora": "应用 LoRA 模型以实现特定风格或主题。",
-        "lora_multiple": "组合多个 LoRA 模型以获得独特效果。"
-      },
-      "ControlNet": {
-        "2_pass_pose_worship": "通过姿态参考生成图像。",
-        "controlnet_example": "通过涂鸦参考图像引导生成。",
-        "depth_controlnet": "通过深度信息引导生成图像。",
-        "depth_t2i_adapter": "使用 T2I 适配器快速生成深度感知图像。",
-        "mixing_controlnets": "组合多个 ControlNet 模型生成图像。"
-      },
-      "Flux": {
-        "flux_canny_model_example": "通过边缘检测引导 Flux 生成图像。",
-        "flux_depth_lora_example": "通过深度信息引导 Flux LoRA 生成图像。",
-        "flux_dev_checkpoint_example": "使用 Flux Dev fp8 量化版生成图像，适合显存有限设备，仅需一个模型文件，画质略低于完整版。",
-        "flux_dev_full_text_to_image": "使用 Flux Dev 完整版生成高质量图像，需要更大显存和多个模型文件，提示遵循性和画质最佳。",
-        "flux_fill_inpaint_example": "使用 Flux 修复图像缺失区域。",
-        "flux_fill_outpaint_example": "使用 Flux 将图像外扩生成更大尺寸的图片",
-        "flux_kontext_dev_basic": "使用 Flux Kontext（基础版）编辑图像，适合了解节点组合",
-        "flux_kontext_dev_grouped": "使用 Flux Kontext 组节点版本，简洁封装版适合快速复用",
-        "flux_redux_model_example": "通过参考图像风格迁移，使用 Flux Redux 生成新图像。",
-        "flux_schnell": "使用 Flux Schnell fp8 量化版快速生成图像，适合低端硬件，仅需4步即可生成。",
-        "flux_schnell_full_text_to_image": "使用 Flux Schnell 完整版快速生成图像，Apache2.0 许可，仅需4步，兼顾速度和画质。"
-      },
-      "Image": {
-        "hidream_e1_full": "HiDream E1 - 专业级自然语言图像编辑模型。",
-        "hidream_i1_dev": "HiDream I1 Dev - 28 步推理，适合中端硬件，平衡速度与质量。",
-        "hidream_i1_fast": "HiDream I1 Fast - 16 步推理，适合低端硬件快速预览。",
-        "hidream_i1_full": "HiDream I1 Full - 50 步推理，画质最佳。",
-        "image_chroma_text_to_image": "Chroma 基于 Flux 改进，架构有所变化。",
-        "image_cosmos_predict2_2B_t2i": "使用 Cosmos-Predict2 2B T2I 生成物理真实、高保真、细节丰富的图像。",
-        "image_lotus_depth_v1_1": "在 ComfyUI 中运行 Lotus Depth，实现高效、细节丰富的单目深度估计。",
-        "image_omnigen2_image_edit": "使用 OmniGen2 高级图像编辑和文本渲染能力，通过自然语言指令编辑图片。",
-        "image_omnigen2_t2i": "使用 OmniGen2 统一 7B 多模态模型和双路径架构，根据文本生成高质量图像。",
-        "sd3_5_large_blur": "使用 SD 3.5 通过模糊参考图像引导生成图像。",
-        "sd3_5_large_canny_controlnet_example": "使用 SD 3.5 Canny ControlNet 通过边缘检测引导生成图像。",
-        "sd3_5_large_depth": "使用 SD 3.5 通过深度信息引导生成图像。",
-        "sd3_5_simple_example": "使用 SD 3.5 生成图像。",
-        "sdxl_refiner_prompt_example": "使用 Refiner 模型提升 SDXL 图像质量。",
-        "sdxl_revision_text_prompts": "通过参考图像概念迁移，使用 SDXL Revision 生成图像。",
-        "sdxl_revision_zero_positive": "结合文本提示和参考图像，使用 SDXL Revision 生成图像。",
-        "sdxl_simple_example": "使用 SDXL 生成高质量图像。",
-        "sdxlturbo_example": "使用 SDXL Turbo 一步生成图像。"
-      },
-      "Image API": {
-        "api_bfl_flux_1_kontext_max_image": "使用 Flux.1 Kontext max image 编辑图像。",
-        "api_bfl_flux_1_kontext_multiple_images_input": "多图输入，使用 Flux.1 Kontext 编辑。",
-        "api_bfl_flux_1_kontext_pro_image": "使用 Flux.1 Kontext pro image 编辑图像。",
-        "api_bfl_flux_pro_t2i": "使用 FLUX.1 Pro 生成高质量、提示遵循性强的图像。",
-        "api_ideogram_v3_t2i": "Ideogram V3 高质量、提示对齐、照片级真实感和文本渲染。",
-        "api_luma_photon_i2i": "结合图像和提示词引导生成。",
-        "api_luma_photon_style_ref": "融合风格参考，精确控制，保持专业品质。",
-        "api_openai_dall_e_2_inpaint": "OpenAI Dall-E 2 API 局部修复。",
-        "api_openai_dall_e_2_t2i": "OpenAI Dall-E 2 API 文本生成图像。",
-        "api_openai_dall_e_3_t2i": "OpenAI Dall-E 3 API 文本生成图像。",
-        "api_openai_image_1_i2i": "OpenAI GPT Image 1 API 图生图。",
-        "api_openai_image_1_inpaint": "OpenAI GPT Image 1 API 局部修复。",
-        "api_openai_image_1_multi_inputs": "OpenAI GPT Image 1 API 多输入生成图像。",
-        "api_openai_image_1_t2i": "OpenAI GPT Image 1 API 文本生成图像。",
-        "api_recraft_image_gen_with_color_control": "自定义调色板，打造品牌专属视觉风格。",
-        "api_recraft_image_gen_with_style_control": "通过视觉示例控制风格、对齐位置、微调物体，实现品牌一致性。",
-        "api_recraft_vector_gen": "通过文本生成高质量矢量图像，适用于 logo、海报等。",
-        "api_runway_reference_to_image": "Runway AI 参考风格和构图生成新图像。",
-        "api_runway_text_to_image": "使用 Runway AI 文本生成高质量图像。",
-        "api_stability_ai_i2i": "Stability AI 高质量图生图，适合专业编辑和风格迁移。",
-        "api_stability_ai_sd3_5_i2i": "Stability AI SD3.5 图生图，分辨率达 1 兆像素。",
-        "api_stability_ai_sd3_5_t2i": "Stability AI SD3.5 文本生成高质量图像，分辨率达 1 兆像素。",
-        "api_stability_ai_stable_image_ultra_t2i": "生成高质量、提示遵循性极佳的图像，适合专业场景，分辨率达 1 兆像素。"
-      },
-      "LLM API": {
-        "api_google_gemini": "体验 Google Gemini 多模态推理能力。",
-        "api_openai_chat": "与 OpenAI 高级语言模型智能对话。"
-      },
-      "Upscaling": {
-        "esrgan_example": "使用 ESRGAN 超分模型提升图像质量。",
-        "hiresfix_esrgan_workflow": "在中间步骤使用 ESRGAN 超分提升图像质量。",
-        "hiresfix_latent_workflow": "在潜空间提升图像质量。",
-        "latent_upscale_different_prompt_model": "放大图像并在不同阶段更换提示词。"
-      },
-      "Video": {
-        "hunyuan_video_text_to_video": "Hunyuan 文本转视频。",
-        "image_to_video": "静态图像转视频。",
-        "image_to_video_wan": "Wan 2.1 图像转视频。",
-        "ltxv_image_to_video": "LTXV 静态图像转视频。",
-        "ltxv_text_to_video": "LTXV 文本转视频。",
-        "mochi_text_to_video_example": "Mochi 文本转视频。",
-        "text_to_video_wan": "Wan 2.1 文本转视频。",
-        "txt_to_image_to_video": "先生成图像再转为视频。",
-        "video_cosmos_predict2_2B_video2world_480p_16fps": "使用 Cosmos-Predict2 2B Video2World 生成物理真实、高保真、一致性强的视频。",
-        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B，支持高级镜头控制。",
-        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B，生成动态镜头运动视频。",
-        "video_wan_vace_14B_ref2v": "Wan VACE 参考图风格一致性视频生成。",
-        "video_wan_vace_14B_t2v": "Wan VACE-14B 文本转视频，支持 480p 和 720p。",
-        "video_wan_vace_14B_v2v": "Wan VACE 控制输入视频和参考图生成新视频。",
-        "video_wan_vace_flf2v": "Wan VACE 首尾帧，支持自定义关键帧序列，实现平滑过渡。",
-        "video_wan_vace_inpainting": "Wan VACE 局部编辑，保留周围内容，适合物体移除或替换。",
-        "video_wan_vace_outpainting": "Wan VACE 外扩，扩展视频尺寸。",
-        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V，控制首尾帧生成 720p 视频。",
-        "wan2_1_fun_control": "Wan 2.1 ControlNet，姿态、深度、边缘等控制视频生成。",
-        "wan2_1_fun_inp": "Wan 2.1 起始帧和结束帧生成视频。"
-      },
-      "Video API": {
-        "api_hailuo_minimax_i2v": "MiniMax 图像+文本生成精致视频，支持 CGI 效果。",
-        "api_hailuo_minimax_t2v": "MiniMax 文本生成高质量视频，支持 CGI 效果和多样风格。",
-        "api_kling_effects": "Kling 应用视觉特效生成动态视频。",
-        "api_kling_flf": "Kling 控制首尾帧生成视频。",
-        "api_kling_i2v": "Kling 高提示遵循性，支持动作、表情、镜头运动等。",
-        "api_luma_i2v": "Luma 静态图像一键生成高质量动画。",
-        "api_luma_t2v": "Luma 简单提示生成高质量视频。",
-        "api_moonvalley_image_to_video": "Moonvalley 图像生成 1080p 电影级视频，训练数据全部为授权内容。",
-        "api_moonvalley_text_to_video": "Moonvalley 文本生成 1080p 电影级视频，训练数据全部为授权内容。",
-        "api_pika_i2v": "Pika AI 单张图像生成流畅动画视频。",
-        "api_pika_scene": "Pika Scenes 多图融合生成视频。",
-        "api_pixverse_i2v": "PixVerse 静态图像生成动态特效视频。",
-        "api_pixverse_t2v": "PixVerse 高还原度、动态效果出色的视频生成。",
-        "api_pixverse_template_i2v": "PixVerse 静态图像生成动态特效视频。",
-        "api_runway_first_last_frame": "Runway 精准控制首尾帧生成平滑过渡视频。",
-        "api_runway_gen3a_turbo_image_to_video": "Runway Gen3a Turbo 静态图像生成电影级视频。",
-        "api_runway_gen4_turo_image_to_video": "Runway Gen4 Turbo 图像生成动态视频。",
-        "api_veo2_i2v": "Google Veo2 API 图像生成视频。"
-      }
-    },
     "title": "从模板开始",
     "useCasesSelected": "已选 {count} 个用例"
   },
diff --git a/src/locales/zh/nodeDefs.json b/src/locales/zh/nodeDefs.json
index 4b7fd427f..bc6a60d94 100644
--- a/src/locales/zh/nodeDefs.json
+++ b/src/locales/zh/nodeDefs.json
@@ -1449,86 +1449,6 @@
       }
     }
   },
-  "FluxProCannyNode": {
-    "description": "使用控制图像（canny）生成图像。",
-    "display_name": "Flux.1 Canny 控制图像",
-    "inputs": {
-      "canny_high_threshold": {
-        "name": "canny_high_threshold",
-        "tooltip": "Canny 边缘检测的高阈值；如果 skip_processing 为 True，则忽略"
-      },
-      "canny_low_threshold": {
-        "name": "canny_low_threshold",
-        "tooltip": "Canny 边缘检测的低阈值；如果 skip_processing 为 True，则忽略"
-      },
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "图像生成过程中的引导强度"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "用于图像生成的提示词"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "是否对提示词进行上采样。如果启用，将自动修改提示词以获得更具创意的生成，但结果是非确定性的（相同种子不会产生完全相同的结果）。"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "用于生成噪声的随机种子。"
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "是否跳过预处理；如果 control_image 已经是 canny 处理后的图像，则设为 True，如果是原始图像则设为 False。"
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "图像生成过程的步数"
-      }
-    }
-  },
-  "FluxProDepthNode": {
-    "description": "使用控制图像（深度）生成图像。",
-    "display_name": "Flux.1 深度控制图像",
-    "inputs": {
-      "control_after_generate": {
-        "name": "control after generate"
-      },
-      "control_image": {
-        "name": "control_image"
-      },
-      "guidance": {
-        "name": "guidance",
-        "tooltip": "图像生成过程中的引导强度"
-      },
-      "prompt": {
-        "name": "prompt",
-        "tooltip": "用于图像生成的提示词"
-      },
-      "prompt_upsampling": {
-        "name": "prompt_upsampling",
-        "tooltip": "是否对提示词进行上采样。启用后会自动修改提示词以获得更具创意的生成，但结果具有不确定性（相同种子不会产生完全相同的结果）。"
-      },
-      "seed": {
-        "name": "seed",
-        "tooltip": "用于生成噪声的随机种子。"
-      },
-      "skip_preprocessing": {
-        "name": "skip_preprocessing",
-        "tooltip": "是否跳过预处理；如果 control_image 已经是深度图像则设为 True，如果是原始图像则设为 False。"
-      },
-      "steps": {
-        "name": "steps",
-        "tooltip": "图像生成过程的步数"
-      }
-    }
-  },
   "FluxProExpandNode": {
     "description": "根据提示词对图像进行外扩。",
     "display_name": "Flux.1 扩展图像",
@@ -3441,8 +3361,6 @@
   "Load3DAnimation": {
     "display_name": "加载3D动画",
     "inputs": {
-      "clear": {
-      },
       "height": {
         "name": "高度"
       },
@@ -3452,8 +3370,6 @@
       "model_file": {
         "name": "模型文件"
       },
-      "upload 3d model": {
-      },
       "width": {
         "name": "宽度"
       }
@@ -6432,9 +6348,6 @@
       "camera_info": {
         "name": "相机信息"
       },
-      "image": {
-        "name": "图像"
-      },
       "model_file": {
         "name": "模型文件"
       }
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index 3f2415ec3..43b303e1d 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -155,10 +155,6 @@
     "name": "显示网格",
     "tooltip": "默认显示网格开关"
   },
-  "Comfy_Load3D_ShowPreview": {
-    "name": "显示预览",
-    "tooltip": "默认显示预览开关"
-  },
   "Comfy_Locale": {
     "name": "语言"
   },
@@ -334,7 +330,6 @@
   "Comfy_UseNewMenu": {
     "name": "使用新菜单",
     "options": {
-      "Bottom": "底部",
       "Disabled": "禁用",
       "Top": "顶部"
     },
@@ -384,8 +379,7 @@
     "name": "已打开工作流的位置",
     "options": {
       "Sidebar": "侧边栏",
-      "Topbar": "顶部栏",
-      "Topbar (2nd-row)": "顶部栏 (第二行)"
+      "Topbar": "顶部栏"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {
diff --git a/src/main.ts b/src/main.ts
index b15d4067f..e063bc18c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,6 +20,19 @@ import App from './App.vue'
 import './assets/css/style.css'
 import { i18n } from './i18n'
 
+/**
+ * CRITICAL: Load remote config FIRST for cloud builds to ensure
+ * window.__CONFIG__is available for all modules during initialization
+ */
+import { isCloud } from '@/platform/distribution/types'
+
+if (isCloud) {
+  const { loadRemoteConfig } = await import(
+    '@/platform/remoteConfig/remoteConfig'
+  )
+  await loadRemoteConfig()
+}
+
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
     // @ts-expect-error fixme ts strict error
@@ -36,11 +49,18 @@ Sentry.init({
   dsn: __SENTRY_DSN__,
   enabled: __SENTRY_ENABLED__,
   release: __COMFYUI_FRONTEND_VERSION__,
-  integrations: [],
-  autoSessionTracking: false,
-  defaultIntegrations: false,
   normalizeDepth: 8,
-  tracesSampleRate: 0
+  tracesSampleRate: isCloud ? 1.0 : 0,
+  replaysSessionSampleRate: 0,
+  replaysOnErrorSampleRate: 0,
+  // Only set these for non-cloud builds
+  ...(isCloud
+    ? {}
+    : {
+        integrations: [],
+        autoSessionTracking: false,
+        defaultIntegrations: false
+      })
 })
 app.directive('tooltip', Tooltip)
 app
@@ -68,4 +88,5 @@ app
     firebaseApp,
     modules: [VueFireAuth()]
   })
-  .mount('#vue-app')
+
+app.mount('#vue-app')
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 7723667db..9c5604acd 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -30,13 +30,13 @@ defineProps<{
 function getBadgeColor(type: AssetBadge['type']): string {
   switch (type) {
     case 'type':
-      return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
+      return 'bg-azure-600/90 dark-theme:bg-azure-600/80'
     case 'base':
-      return 'bg-success-100/90 dark-theme:bg-success-100/80'
+      return 'bg-jade-600/90 dark-theme:bg-jade-600/80'
     case 'size':
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+      return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
     default:
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+      return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
   }
 }
 </script>
diff --git a/src/platform/assets/components/AssetBrowserModal.stories.ts b/src/platform/assets/components/AssetBrowserModal.stories.ts
index cad836ae3..e1d8b7b34 100644
--- a/src/platform/assets/components/AssetBrowserModal.stories.ts
+++ b/src/platform/assets/components/AssetBrowserModal.stories.ts
@@ -70,7 +70,7 @@ export const Default: Story = {
       }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -111,7 +111,7 @@ export const SingleAssetType: Story = {
       return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
@@ -154,7 +154,7 @@ export const NoLeftPanel: Story = {
       return { ...args, onAssetSelect, onClose, assets: mockAssets }
     },
     template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
         <AssetBrowserModal
           :node-type="nodeType"
           :input-name="inputName"
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index d0fe01a72..dccd36208 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -40,6 +40,7 @@
     <template #content>
       <AssetGrid
         :assets="filteredAssets"
+        :loading="isLoading"
         @asset-select="handleAssetSelectAndEmit"
       />
     </template>
@@ -47,7 +48,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { useAsyncState } from '@vueuse/core'
+import { computed, provide, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/input/SearchBox.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
@@ -57,6 +60,9 @@ import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+import { formatCategoryLabel } from '@/platform/assets/utils/categoryLabel'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { OnCloseKey } from '@/types/widgetTypes'
 
 const props = defineProps<{
@@ -65,10 +71,12 @@ const props = defineProps<{
   onSelect?: (asset: AssetItem) => void
   onClose?: () => void
   showLeftPanel?: boolean
-  assets?: AssetItem[]
   title?: string
+  assetType?: string
 }>()
 
+const { t } = useI18n()
+
 const emit = defineEmits<{
   'asset-select': [asset: AssetDisplayItem]
   close: []
@@ -76,18 +84,73 @@ const emit = defineEmits<{
 
 provide(OnCloseKey, props.onClose ?? (() => {}))
 
+const fetchAssets = async () => {
+  if (props.nodeType) {
+    return (await assetService.getAssetsForNodeType(props.nodeType)) ?? []
+  }
+
+  if (props.assetType) {
+    return (await assetService.getAssetsByTag(props.assetType)) ?? []
+  }
+
+  return []
+}
+
+const {
+  state: fetchedAssets,
+  isLoading,
+  execute
+} = useAsyncState<AssetItem[]>(fetchAssets, [], { immediate: false })
+
+watch(
+  () => [props.nodeType, props.assetType],
+  async () => {
+    await execute()
+  },
+  { immediate: true }
+)
+
 const {
   searchQuery,
   selectedCategory,
   availableCategories,
-  contentTitle,
   categoryFilteredAssets,
   filteredAssets,
   updateFilters
-} = useAssetBrowser(props.assets)
+} = useAssetBrowser(fetchedAssets)
+
+const modelToNodeStore = useModelToNodeStore()
+
+const primaryCategoryTag = computed(() => {
+  const assets = fetchedAssets.value ?? []
+  const tagFromAssets = assets
+    .map((asset) => asset.tags?.find((tag) => tag !== 'models'))
+    .find((tag): tag is string => typeof tag === 'string' && tag.length > 0)
+
+  if (tagFromAssets) return tagFromAssets
+
+  if (props.nodeType) {
+    const mapped = modelToNodeStore.getCategoryForNodeType(props.nodeType)
+    if (mapped) return mapped
+  }
+
+  if (props.assetType) return props.assetType
+
+  return 'models'
+})
+
+const activeCategoryTag = computed(() => {
+  if (selectedCategory.value !== 'all') {
+    return selectedCategory.value
+  }
+  return primaryCategoryTag.value
+})
 
 const displayTitle = computed(() => {
-  return props.title ?? contentTitle.value
+  if (props.title) return props.title
+
+  const label = formatCategoryLabel(activeCategoryTag.value)
+  return t('assetBrowser.allCategory', { category: label })
 })
 
 const shouldShowLeftPanel = computed(() => {
diff --git a/src/platform/assets/components/AssetCard.stories.ts b/src/platform/assets/components/AssetCard.stories.ts
index 2915a219a..e85f47fbb 100644
--- a/src/platform/assets/components/AssetCard.stories.ts
+++ b/src/platform/assets/components/AssetCard.stories.ts
@@ -12,7 +12,6 @@ const createAssetData = (
   ...baseAsset,
   description:
     'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
-  formattedSize: '2.1 GB',
   badges: [
     { label: 'checkpoints', type: 'type' },
     { label: '2.1 GB', type: 'size' }
@@ -34,7 +33,7 @@ const meta: Meta<typeof AssetCard> = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900"><story /></div>'
     })
   ]
 }
@@ -50,7 +49,7 @@ export const Interactive: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -71,7 +70,7 @@ export const NonInteractive: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -94,7 +93,7 @@ export const WithPreviewImage: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -116,7 +115,7 @@ export const FallbackGradient: Story = {
   decorators: [
     () => ({
       template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
     })
   ],
   parameters: {
@@ -204,7 +203,7 @@ export const EdgeCases: Story = {
       return { edgeCases }
     },
     template: `
-      <div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-gray-900">
+      <div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-smoke-900">
         <AssetCard
           v-for="asset in edgeCases"
           :key="asset.id"
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index dd35b4fc1..c9e8688fa 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -16,7 +16,7 @@
       />
       <div
         v-else
-        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-400 via-gray-800 to-charcoal-400"
+        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
       ></div>
       <AssetBadgeGroup :badges="asset.badges" />
     </div>
@@ -24,11 +24,11 @@
       <div>
         <h3
           :id="titleId"
+          v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
           :class="
             cn(
               'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
-              'text-slate-800',
-              'dark-theme:text-white'
+              'text-base-foreground'
             )
           "
         >
@@ -36,25 +36,21 @@
         </h3>
         <p
           :id="descId"
+          v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
           :class="
             cn(
               'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
-              'text-stone-100',
+              'text-ash-500',
               'dark-theme:text-slate-100'
             )
           "
-          :title="asset.description"
         >
           {{ asset.description }}
         </p>
       </div>
       <div
         :class="
-          cn(
-            'flex gap-4 text-xs',
-            'text-stone-400',
-            'dark-theme:text-stone-300'
-          )
+          cn('flex gap-4 text-xs', 'text-stone-400', 'dark-theme:text-ash-300')
         "
       >
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
@@ -80,6 +76,7 @@ import { computed, useId } from 'vue'
 
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
@@ -87,9 +84,15 @@ const props = defineProps<{
   interactive?: boolean
 }>()
 
+const settingStore = useSettingStore()
+
 const titleId = useId()
 const descId = useId()
 
+const tooltipDelay = computed<number>(() =>
+  settingStore.get('LiteGraph.Node.TooltipDelay')
+)
+
 const { error } = useImage({
   src: props.asset.preview_url ?? '',
   alt: props.asset.name
@@ -106,7 +109,7 @@ const cardClasses = computed(() => {
   ]
 
   if (!props.interactive) {
-    return cn(...base, 'bg-gray-100 dark-theme:bg-charcoal-800')
+    return cn(...base, 'bg-smoke-100 dark-theme:bg-charcoal-800')
   }
 
   return cn(
@@ -114,10 +117,10 @@ const cardClasses = computed(() => {
     'group',
     'appearance-none bg-transparent p-0 m-0',
     'font-inherit text-inherit outline-none cursor-pointer text-left',
-    'bg-gray-100 dark-theme:bg-charcoal-800',
-    'hover:bg-gray-200 dark-theme:hover:bg-charcoal-600',
+    'bg-smoke-100 dark-theme:bg-charcoal-800',
+    'hover:bg-secondary-background',
     'border-none',
-    'focus:outline-solid outline-blue-100 outline-4'
+    'focus:outline-solid outline-azure-600 outline-4'
   )
 })
 
diff --git a/src/platform/assets/components/AssetFilterBar.stories.ts b/src/platform/assets/components/AssetFilterBar.stories.ts
index a4f48794a..f1d377db7 100644
--- a/src/platform/assets/components/AssetFilterBar.stories.ts
+++ b/src/platform/assets/components/AssetFilterBar.stories.ts
@@ -27,10 +27,10 @@ const meta: Meta<typeof AssetFilterBar> = {
     () => ({
       template: `
         <div class="min-h-screen bg-white dark-theme:bg-charcoal-900">
-          <div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-gray-200 dark-theme:border-charcoal-600">
+          <div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-smoke-200 dark-theme:border-charcoal-600">
             <story />
           </div>
-          <div class="p-6 text-sm text-gray-600 dark-theme:text-gray-400">
+          <div class="p-6 text-sm text-smoke-600 dark-theme:text-smoke-400">
             <p>Filter bar with proper chrome styling showing contextual background and borders.</p>
           </div>
         </div>
@@ -222,7 +222,7 @@ export const CategorySwitchingReactivity: Story = {
               'px-4 py-2 rounded border',
               selectedCategory === 'all'
                 ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
+                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
             ]"
           >
             All (.safetensors + .pt, sd15 + sdxl)
@@ -233,7 +233,7 @@ export const CategorySwitchingReactivity: Story = {
               'px-4 py-2 rounded border',
               selectedCategory === 'checkpoints'
                 ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
+                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
             ]"
           >
             Checkpoints (.safetensors, sd15 + sdxl)
@@ -244,7 +244,7 @@ export const CategorySwitchingReactivity: Story = {
               'px-4 py-2 rounded border',
               selectedCategory === 'loras'
                 ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
+                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
             ]"
           >
             LoRAs (.pt, sd15 only)
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 2bf77461c..beeeabe39 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -23,7 +23,7 @@
       :class="
         cn(
           'col-span-full flex flex-col items-center justify-center py-16',
-          'text-stone-300 dark-theme:text-stone-200'
+          'text-ash-300 dark-theme:text-ash-800'
         )
       "
     >
@@ -37,12 +37,12 @@
     <!-- Loading state -->
     <div
       v-if="loading"
-      class="col-span-full flex items-center justify-center py-16"
+      class="col-span-full flex items-center justify-center py-20"
     >
       <i
         class="icon-[lucide--loader]"
         :class="
-          cn('size-6 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
+          cn('size-12 animate-spin', 'text-ash-300 dark-theme:text-ash-800')
         "
       />
     </div>
diff --git a/src/platform/assets/components/Media3DBottom.vue b/src/platform/assets/components/Media3DBottom.vue
index 4d3c15c0b..44f043da0 100644
--- a/src/platform/assets/components/Media3DBottom.vue
+++ b/src/platform/assets/components/Media3DBottom.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ fileName }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center gap-2 text-xs text-zinc-400">
       <span>{{ formatSize(asset.size) }}</span>
     </div>
@@ -18,6 +13,7 @@ import { computed } from 'vue'
 import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/components/Media3DTop.vue b/src/platform/assets/components/Media3DTop.vue
index 535e5de6c..b765f5f72 100644
--- a/src/platform/assets/components/Media3DTop.vue
+++ b/src/platform/assets/components/Media3DTop.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="relative h-full w-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded">
     <div
-      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex size-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
     >
       <i
         class="icon-[lucide--box] text-3xl text-zinc-600 dark-theme:text-zinc-200"
diff --git a/src/platform/assets/components/MediaAssetActions.vue b/src/platform/assets/components/MediaAssetActions.vue
deleted file mode 100644
index 73144d4d2..000000000
--- a/src/platform/assets/components/MediaAssetActions.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <IconGroup>
-    <IconButton size="sm" @click="handleDelete">
-      <i class="icon-[lucide--trash-2] size-4" />
-    </IconButton>
-    <IconButton size="sm" @click="handleDownload">
-      <i class="icon-[lucide--download] size-4" />
-    </IconButton>
-    <MoreButton
-      size="sm"
-      @menu-opened="emit('menuStateChanged', true)"
-      @menu-closed="emit('menuStateChanged', false)"
-    >
-      <template #default="{ close }">
-        <MediaAssetMoreMenu :close="close" />
-      </template>
-    </MoreButton>
-  </IconGroup>
-</template>
-
-<script setup lang="ts">
-import { inject } from 'vue'
-
-import IconButton from '@/components/button/IconButton.vue'
-import IconGroup from '@/components/button/IconGroup.vue'
-import MoreButton from '@/components/button/MoreButton.vue'
-
-import { useMediaAssetActions } from '../composables/useMediaAssetActions'
-import { MediaAssetKey } from '../schemas/mediaAssetSchema'
-import MediaAssetMoreMenu from './MediaAssetMoreMenu.vue'
-
-const emit = defineEmits<{
-  menuStateChanged: [isOpen: boolean]
-}>()
-
-const { asset } = inject(MediaAssetKey)!
-const actions = useMediaAssetActions()
-
-const handleDelete = () => {
-  if (asset.value) {
-    actions.deleteAsset(asset.value.id)
-  }
-}
-
-const handleDownload = () => {
-  if (asset.value) {
-    actions.downloadAsset(asset.value.id)
-  }
-}
-</script>
diff --git a/src/platform/assets/components/MediaAssetCard.stories.ts b/src/platform/assets/components/MediaAssetCard.stories.ts
index 231b86a9b..d7ccc8ac0 100644
--- a/src/platform/assets/components/MediaAssetCard.stories.ts
+++ b/src/platform/assets/components/MediaAssetCard.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 
 import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
-import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import type { AssetItem } from '../schemas/assetSchema'
 import MediaAssetCard from './MediaAssetCard.vue'
 
 const meta: Meta<typeof MediaAssetCard> = {
@@ -28,10 +28,6 @@ const meta: Meta<typeof MediaAssetCard> = {
     })
   ],
   argTypes: {
-    context: {
-      control: 'select',
-      options: ['input', 'output']
-    },
     loading: {
       control: 'boolean'
     }
@@ -53,19 +49,20 @@ const SAMPLE_MEDIA = {
   audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
 }
 
-const sampleAsset: AssetMeta = {
+const sampleAsset: AssetItem = {
   id: 'asset-1',
   name: 'sample-image.png',
-  kind: 'image',
-  duration: 3345,
   size: 2048576,
-  created_at: Date.now().toString(),
-  src: SAMPLE_MEDIA.image1,
-  dimensions: {
-    width: 1920,
-    height: 1080
-  },
-  tags: []
+  created_at: new Date().toISOString(),
+  preview_url: SAMPLE_MEDIA.image1,
+  tags: ['input'],
+  user_metadata: {
+    duration: 3345,
+    dimensions: {
+      width: 1920,
+      height: 1080
+    }
+  }
 }
 
 export const ImageAsset: Story = {
@@ -75,7 +72,6 @@ export const ImageAsset: Story = {
     })
   ],
   args: {
-    context: { type: 'output', outputCount: 3 },
     asset: sampleAsset,
     loading: false
   }
@@ -88,19 +84,18 @@ export const VideoAsset: Story = {
     })
   ],
   args: {
-    context: { type: 'input' },
     asset: {
       ...sampleAsset,
       id: 'asset-2',
       name: 'Big_Buck_Bunny.mp4',
-      kind: 'video',
       size: 10485760,
-      duration: 13425,
-      preview_url: SAMPLE_MEDIA.videoThumbnail, // Poster image
-      src: SAMPLE_MEDIA.video, // Actual video file
-      dimensions: {
-        width: 1280,
-        height: 720
+      preview_url: SAMPLE_MEDIA.videoThumbnail,
+      user_metadata: {
+        duration: 13425,
+        dimensions: {
+          width: 1280,
+          height: 720
+        }
       }
     }
   }
@@ -113,16 +108,15 @@ export const Model3DAsset: Story = {
     })
   ],
   args: {
-    context: { type: 'input' },
     asset: {
       ...sampleAsset,
       id: 'asset-3',
       name: 'Asset-3d-model.glb',
-      kind: '3D',
       size: 7340032,
-      src: '',
-      dimensions: undefined,
-      duration: 18023
+      preview_url: '',
+      user_metadata: {
+        duration: 18023
+      }
     }
   }
 }
@@ -134,16 +128,15 @@ export const AudioAsset: Story = {
     })
   ],
   args: {
-    context: { type: 'input' },
     asset: {
       ...sampleAsset,
-      id: 'asset-3',
+      id: 'asset-4',
       name: 'SoundHelix-Song.mp3',
-      kind: 'audio',
       size: 5242880,
-      src: SAMPLE_MEDIA.audio,
-      dimensions: undefined,
-      duration: 23180
+      preview_url: SAMPLE_MEDIA.audio,
+      user_metadata: {
+        duration: 23180
+      }
     }
   }
 }
@@ -155,7 +148,6 @@ export const LoadingState: Story = {
     })
   ],
   args: {
-    context: { type: 'input' },
     asset: sampleAsset,
     loading: true
   }
@@ -168,7 +160,6 @@ export const LongFileName: Story = {
     })
   ],
   args: {
-    context: { type: 'input' },
     asset: {
       ...sampleAsset,
       name: 'very-long-file-name-that-should-be-truncated-in-the-ui-to-prevent-overflow.png'
@@ -183,7 +174,6 @@ export const SelectedState: Story = {
     })
   ],
   args: {
-    context: { type: 'output', outputCount: 2 },
     asset: sampleAsset,
     selected: true
   }
@@ -196,21 +186,20 @@ export const WebMVideo: Story = {
     })
   ],
   args: {
-    context: { type: 'input' },
     asset: {
       id: 'asset-webm',
       name: 'animated-clip.webm',
-      kind: 'video',
       size: 3145728,
-      created_at: Date.now().toString(),
-      preview_url: SAMPLE_MEDIA.image1, // Poster image
-      src: 'https://www.w3schools.com/html/movie.mp4', // Actual video
-      duration: 620,
-      dimensions: {
-        width: 640,
-        height: 360
-      },
-      tags: []
+      created_at: new Date().toISOString(),
+      preview_url: SAMPLE_MEDIA.image1,
+      tags: ['input'],
+      user_metadata: {
+        duration: 620,
+        dimensions: {
+          width: 640,
+          height: 360
+        }
+      }
     }
   }
 }
@@ -222,20 +211,20 @@ export const GifAnimation: Story = {
     })
   ],
   args: {
-    context: { type: 'input' },
     asset: {
       id: 'asset-gif',
       name: 'animation.gif',
-      kind: 'image',
       size: 1572864,
-      duration: 1345,
-      created_at: Date.now().toString(),
-      src: 'https://media.giphy.com/media/3o7aCTPPm4OHfRLSH6/giphy.gif',
-      dimensions: {
-        width: 480,
-        height: 270
-      },
-      tags: []
+      created_at: new Date().toISOString(),
+      preview_url: 'https://media.giphy.com/media/3o7aCTPPm4OHfRLSH6/giphy.gif',
+      tags: ['input'],
+      user_metadata: {
+        duration: 1345,
+        dimensions: {
+          width: 480,
+          height: 270
+        }
+      }
     }
   }
 }
@@ -244,83 +233,89 @@ export const GridLayout: Story = {
   render: () => ({
     components: { MediaAssetCard },
     setup() {
-      const assets: AssetMeta[] = [
+      const assets: AssetItem[] = [
         {
           id: 'grid-1',
           name: 'image-file.jpg',
-          kind: 'image',
           size: 2097152,
-          duration: 4500,
-          created_at: Date.now().toString(),
-          src: SAMPLE_MEDIA.image1,
-          dimensions: { width: 1920, height: 1080 },
-          tags: []
+          created_at: new Date().toISOString(),
+          preview_url: SAMPLE_MEDIA.image1,
+          tags: ['input'],
+          user_metadata: {
+            duration: 4500,
+            dimensions: { width: 1920, height: 1080 }
+          }
         },
         {
           id: 'grid-2',
           name: 'image-file.jpg',
-          kind: 'image',
           size: 2097152,
-          duration: 4500,
-          created_at: Date.now().toString(),
-          src: SAMPLE_MEDIA.image2,
-          dimensions: { width: 1920, height: 1080 },
-          tags: []
+          created_at: new Date().toISOString(),
+          preview_url: SAMPLE_MEDIA.image2,
+          tags: ['input'],
+          user_metadata: {
+            duration: 4500,
+            dimensions: { width: 1920, height: 1080 }
+          }
         },
         {
           id: 'grid-3',
           name: 'video-file.mp4',
-          kind: 'video',
           size: 10485760,
-          duration: 13425,
-          created_at: Date.now().toString(),
-          preview_url: SAMPLE_MEDIA.videoThumbnail, // Poster image
-          src: SAMPLE_MEDIA.video, // Actual video
-          dimensions: { width: 1280, height: 720 },
-          tags: []
+          created_at: new Date().toISOString(),
+          preview_url: SAMPLE_MEDIA.videoThumbnail,
+          tags: ['input'],
+          user_metadata: {
+            duration: 13425,
+            dimensions: { width: 1280, height: 720 }
+          }
         },
         {
           id: 'grid-4',
           name: 'audio-file.mp3',
-          kind: 'audio',
           size: 5242880,
-          duration: 180,
-          created_at: Date.now().toString(),
-          src: SAMPLE_MEDIA.audio,
-          tags: []
+          created_at: new Date().toISOString(),
+          preview_url: SAMPLE_MEDIA.audio,
+          tags: ['input'],
+          user_metadata: {
+            duration: 180
+          }
         },
         {
           id: 'grid-5',
           name: 'animation.gif',
-          kind: 'image',
           size: 3145728,
-          duration: 1345,
-          created_at: Date.now().toString(),
-          src: 'https://media.giphy.com/media/l0HlNaQ6gWfllcjDO/giphy.gif',
-          dimensions: { width: 480, height: 360 },
-          tags: []
+          created_at: new Date().toISOString(),
+          preview_url:
+            'https://media.giphy.com/media/l0HlNaQ6gWfllcjDO/giphy.gif',
+          tags: ['input'],
+          user_metadata: {
+            duration: 1345,
+            dimensions: { width: 480, height: 360 }
+          }
         },
         {
           id: 'grid-6',
           name: 'Asset-3d-model.glb',
-          kind: '3D',
           size: 7340032,
-          src: '',
-          dimensions: undefined,
-          duration: 18023,
-          created_at: Date.now().toString(),
-          tags: []
+          preview_url: '',
+          created_at: new Date().toISOString(),
+          tags: ['input'],
+          user_metadata: {
+            duration: 18023
+          }
         },
         {
           id: 'grid-7',
           name: 'image-file.jpg',
-          kind: 'image',
           size: 2097152,
-          duration: 4500,
-          created_at: Date.now().toString(),
-          src: SAMPLE_MEDIA.image3,
-          dimensions: { width: 1920, height: 1080 },
-          tags: []
+          created_at: new Date().toISOString(),
+          preview_url: SAMPLE_MEDIA.image3,
+          tags: ['input'],
+          user_metadata: {
+            duration: 4500,
+            dimensions: { width: 1920, height: 1080 }
+          }
         }
       ]
       return { assets }
@@ -330,7 +325,6 @@ export const GridLayout: Story = {
         <MediaAssetCard
           v-for="asset in assets"
           :key="asset.id"
-          :context="{ type: Math.random() > 0.5 ? 'input' : 'output', outputCount: Math.floor(Math.random() * 5) }"
           :asset="asset"
         />
       </div>
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index 1681dcf3e..aa51b964c 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -3,16 +3,18 @@
     ref="cardContainerRef"
     role="button"
     :aria-label="
-      asset ? `${asset.name} - ${asset.kind} asset` : 'Loading asset'
+      asset
+        ? $t('assetBrowser.ariaLabel.assetCard', {
+            name: asset.name,
+            type: fileKind
+          })
+        : $t('assetBrowser.ariaLabel.loadingAsset')
     "
     :tabindex="loading ? -1 : 0"
     size="mini"
     variant="ghost"
     rounded="lg"
     :class="containerClasses"
-    @click="handleCardClick"
-    @keydown.enter="handleCardClick"
-    @keydown.space.prevent="handleCardClick"
   >
     <template #top>
       <CardTop
@@ -28,59 +30,68 @@
         </template>
 
         <!-- Content based on asset type -->
-        <template v-else-if="asset">
+        <template v-else-if="asset && adaptedAsset">
           <component
-            :is="getTopComponent(asset.kind)"
-            :asset="asset"
-            :context="context"
+            :is="getTopComponent(fileKind)"
+            :asset="adaptedAsset"
+            :context="{ type: assetType }"
             @view="handleZoomClick"
-            @download="actions.downloadAsset(asset!.id)"
-            @play="actions.playAsset(asset!.id)"
+            @download="actions.downloadAsset()"
+            @play="actions.playAsset(asset.id)"
             @video-playing-state-changed="isVideoPlaying = $event"
             @video-controls-changed="showVideoControls = $event"
+            @image-loaded="handleImageLoaded"
           />
         </template>
 
-        <!-- Actions overlay (top-left) - show on hover or when menu is open -->
-        <template v-if="showActionsOverlay" #top-left>
-          <MediaAssetActions
-            @menu-state-changed="isMenuOpen = $event"
-            @mouseenter="handleOverlayMouseEnter"
-            @mouseleave="handleOverlayMouseLeave"
-          />
-        </template>
-
-        <!-- Zoom button (top-right) - show on hover for all media types -->
-        <template v-if="showZoomOverlay" #top-right>
-          <IconButton
-            size="sm"
-            @click.stop="handleZoomClick"
-            @mouseenter="handleOverlayMouseEnter"
-            @mouseleave="handleOverlayMouseLeave"
-          >
-            <i class="icon-[lucide--zoom-in] size-4" />
-          </IconButton>
-        </template>
-
-        <!-- Duration/Format chips (bottom-left) - show on hover even when playing -->
-        <template v-if="showDurationChips" #bottom-left>
-          <div
-            class="flex flex-wrap items-center gap-1"
-            @mouseenter="handleOverlayMouseEnter"
-            @mouseleave="handleOverlayMouseLeave"
-          >
-            <SquareChip variant="light" :label="formattedDuration" />
+        <!-- Top-left slot: Duration/Format chips OR Media actions -->
+        <template #top-left>
+          <!-- Duration/Format chips - show when not hovered and not playing -->
+          <div v-if="showStaticChips" class="flex flex-wrap items-center gap-1">
+            <SquareChip
+              v-if="formattedDuration"
+              variant="light"
+              :label="formattedDuration"
+            />
             <SquareChip v-if="fileFormat" variant="light" :label="fileFormat" />
           </div>
+
+          <!-- Media actions - show on hover or when playing -->
+          <IconGroup v-else-if="showActionsOverlay">
+            <IconButton
+              size="sm"
+              @click.stop="handleZoomClick"
+              @mouseenter="handleOverlayMouseEnter"
+              @mouseleave="handleOverlayMouseLeave"
+            >
+              <i class="icon-[lucide--zoom-in] size-4" />
+            </IconButton>
+            <MoreButton
+              size="sm"
+              @menu-opened="isMenuOpen = true"
+              @menu-closed="isMenuOpen = false"
+              @mouseenter="handleOverlayMouseEnter"
+              @mouseleave="handleOverlayMouseLeave"
+            >
+              <template #default="{ close }">
+                <MediaAssetMoreMenu
+                  :close="close"
+                  :show-delete-button="showDeleteButton"
+                  @inspect="handleZoomClick"
+                  @asset-deleted="handleAssetDelete"
+                />
+              </template>
+            </MoreButton>
+          </IconGroup>
         </template>
 
-        <!-- Output count (bottom-right) - show on hover even when playing -->
-        <template v-if="showOutputCount" #bottom-right>
+        <!-- Output count (top-right) -->
+        <template v-if="showOutputCount" #top-right>
           <IconTextButton
             type="secondary"
             size="sm"
-            :label="context?.outputCount?.toString() ?? '0'"
-            @click.stop="actions.openMoreOutputs(asset?.id || '')"
+            :label="String(outputCount)"
+            @click.stop="handleOutputCountClick"
             @mouseenter="handleOverlayMouseEnter"
             @mouseleave="handleOverlayMouseLeave"
           >
@@ -107,11 +118,11 @@
         </template>
 
         <!-- Content based on asset type -->
-        <template v-else-if="asset">
+        <template v-else-if="asset && adaptedAsset">
           <component
-            :is="getBottomComponent(asset.kind)"
-            :asset="asset"
-            :context="context"
+            :is="getBottomComponent(fileKind)"
+            :asset="adaptedAsset"
+            :context="{ type: assetType }"
           />
         </template>
       </CardBottom>
@@ -124,23 +135,22 @@ import { useElementHover } from '@vueuse/core'
 import { computed, defineAsyncComponent, provide, ref, toRef } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
+import IconGroup from '@/components/button/IconGroup.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
+import MoreButton from '@/components/button/MoreButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
-import { formatDuration } from '@/utils/formatUtil'
+import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
+import { getAssetType } from '../composables/media/assetMappers'
 import { useMediaAssetActions } from '../composables/useMediaAssetActions'
-import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
-import type {
-  AssetContext,
-  AssetMeta,
-  MediaKind
-} from '../schemas/mediaAssetSchema'
+import type { AssetItem } from '../schemas/assetSchema'
+import type { MediaKind } from '../schemas/mediaAssetSchema'
 import { MediaAssetKey } from '../schemas/mediaAssetSchema'
-import MediaAssetActions from './MediaAssetActions.vue'
+import MediaAssetMoreMenu from './MediaAssetMoreMenu.vue'
 
 const mediaComponents = {
   top: {
@@ -165,11 +175,26 @@ function getBottomComponent(kind: MediaKind) {
   return mediaComponents.bottom[kind] || mediaComponents.bottom.image
 }
 
-const { context, asset, loading, selected } = defineProps<{
-  context: AssetContext
-  asset?: AssetMeta
+const {
+  asset,
+  loading,
+  selected,
+  showOutputCount,
+  outputCount,
+  showDeleteButton
+} = defineProps<{
+  asset?: AssetItem
   loading?: boolean
   selected?: boolean
+  showOutputCount?: boolean
+  outputCount?: number
+  showDeleteButton?: boolean
+}>()
+
+const emit = defineEmits<{
+  zoom: [asset: AssetItem]
+  'output-count-click': []
+  'asset-deleted': []
 }>()
 
 const cardContainerRef = ref<HTMLElement>()
@@ -179,14 +204,44 @@ const isMenuOpen = ref(false)
 const showVideoControls = ref(false)
 const isOverlayHovered = ref(false)
 
+// Store actual image dimensions
+const imageDimensions = ref<{ width: number; height: number } | undefined>()
+
 const isHovered = useElementHover(cardContainerRef)
 
 const actions = useMediaAssetActions()
-const galleryStore = useMediaAssetGalleryStore()
+
+// Get asset type from tags
+const assetType = computed(() => {
+  return getAssetType(asset?.tags)
+})
+
+// Determine file type from extension
+const fileKind = computed((): MediaKind => {
+  return getMediaTypeFromFilename(asset?.name || '') as MediaKind
+})
+
+// Adapt AssetItem to legacy AssetMeta format for existing components
+const adaptedAsset = computed(() => {
+  if (!asset) return undefined
+  return {
+    id: asset.id,
+    name: asset.name,
+    kind: fileKind.value,
+    src: asset.preview_url || '',
+    size: asset.size,
+    tags: asset.tags || [],
+    created_at: asset.created_at,
+    duration: asset.user_metadata?.duration
+      ? Number(asset.user_metadata.duration)
+      : undefined,
+    dimensions: imageDimensions.value
+  }
+})
 
 provide(MediaAssetKey, {
-  asset: toRef(() => asset),
-  context: toRef(() => context),
+  asset: toRef(() => adaptedAsset.value),
+  context: toRef(() => ({ type: assetType.value })),
   isVideoPlaying,
   showVideoControls
 })
@@ -201,8 +256,16 @@ const containerClasses = computed(() =>
 )
 
 const formattedDuration = computed(() => {
-  if (!asset?.duration) return ''
-  return formatDuration(asset.duration)
+  // Check for execution time first (from history API)
+  const executionTime = asset?.user_metadata?.executionTimeInSeconds
+  if (executionTime !== undefined && executionTime !== null) {
+    return `${Number(executionTime).toFixed(2)}s`
+  }
+
+  // Fall back to duration for media files
+  const duration = asset?.user_metadata?.duration
+  if (!duration) return ''
+  return formatDuration(Number(duration))
 })
 
 const fileFormat = computed(() => {
@@ -212,10 +275,10 @@ const fileFormat = computed(() => {
 })
 
 const durationChipClasses = computed(() => {
-  if (asset?.kind === 'audio') {
+  if (fileKind.value === 'audio') {
     return '-translate-y-11'
   }
-  if (asset?.kind === 'video' && showVideoControls.value) {
+  if (fileKind.value === 'video' && showVideoControls.value) {
     return '-translate-y-16'
   }
   return ''
@@ -225,43 +288,24 @@ const isCardOrOverlayHovered = computed(
   () => isHovered.value || isOverlayHovered.value || isMenuOpen.value
 )
 
-const showHoverActions = computed(
-  () => !loading && !!asset && isCardOrOverlayHovered.value
+// Show static chips when NOT hovered and NOT playing (normal state)
+const showStaticChips = computed(
+  () =>
+    !loading &&
+    !!asset &&
+    !isCardOrOverlayHovered.value &&
+    !isVideoPlaying.value &&
+    (formattedDuration.value || fileFormat.value)
 )
 
+// Show action overlay when hovered OR playing
 const showActionsOverlay = computed(
-  () =>
-    showHoverActions.value &&
-    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
-)
-
-const showZoomOverlay = computed(
-  () =>
-    showHoverActions.value &&
-    asset?.kind !== '3D' &&
-    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
-)
-
-const showDurationChips = computed(
   () =>
     !loading &&
-    asset?.duration &&
-    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
+    !!asset &&
+    (isCardOrOverlayHovered.value || isVideoPlaying.value)
 )
 
-const showOutputCount = computed(
-  () =>
-    !loading &&
-    context?.outputCount &&
-    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
-)
-
-const handleCardClick = () => {
-  if (asset) {
-    actions.selectAsset(asset)
-  }
-}
-
 const handleOverlayMouseEnter = () => {
   isOverlayHovered.value = true
 }
@@ -272,7 +316,19 @@ const handleOverlayMouseLeave = () => {
 
 const handleZoomClick = () => {
   if (asset) {
-    galleryStore.openSingle(asset)
+    emit('zoom', asset)
   }
 }
+
+const handleImageLoaded = (width: number, height: number) => {
+  imageDimensions.value = { width, height }
+}
+
+const handleOutputCountClick = () => {
+  emit('output-count-click')
+}
+
+const handleAssetDelete = () => {
+  emit('asset-deleted')
+}
 </script>
diff --git a/src/platform/assets/components/MediaAssetMoreMenu.vue b/src/platform/assets/components/MediaAssetMoreMenu.vue
index 62f793aa2..9f7242603 100644
--- a/src/platform/assets/components/MediaAssetMoreMenu.vue
+++ b/src/platform/assets/components/MediaAssetMoreMenu.vue
@@ -3,7 +3,6 @@
     <IconTextButton
       v-if="asset?.kind !== '3D'"
       type="transparent"
-      class="dark-theme:text-white"
       label="Inspect asset"
       @click="handleInspect"
     >
@@ -13,8 +12,8 @@
     </IconTextButton>
 
     <IconTextButton
+      v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
       label="Add to current workflow"
       @click="handleAddToWorkflow"
     >
@@ -23,23 +22,17 @@
       </template>
     </IconTextButton>
 
-    <IconTextButton
-      type="transparent"
-      class="dark-theme:text-white"
-      label="Download"
-      @click="handleDownload"
-    >
+    <IconTextButton type="transparent" label="Download" @click="handleDownload">
       <template #icon>
         <i class="icon-[lucide--download] size-4" />
       </template>
     </IconTextButton>
 
-    <MediaAssetButtonDivider />
+    <MediaAssetButtonDivider v-if="showWorkflowOptions" />
 
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
       label="Open as workflow in new tab"
       @click="handleOpenWorkflow"
     >
@@ -51,7 +44,6 @@
     <IconTextButton
       v-if="showWorkflowOptions"
       type="transparent"
-      class="dark-theme:text-white"
       label="Export workflow"
       @click="handleExportWorkflow"
     >
@@ -60,11 +52,11 @@
       </template>
     </IconTextButton>
 
-    <MediaAssetButtonDivider v-if="showWorkflowOptions" />
+    <MediaAssetButtonDivider v-if="showWorkflowOptions && showCopyJobId" />
 
     <IconTextButton
+      v-if="showCopyJobId"
       type="transparent"
-      class="dark-theme:text-white"
       label="Copy job ID"
       @click="handleCopyJobId"
     >
@@ -73,11 +65,11 @@
       </template>
     </IconTextButton>
 
-    <MediaAssetButtonDivider />
+    <MediaAssetButtonDivider v-if="showCopyJobId && shouldShowDeleteButton" />
 
     <IconTextButton
+      v-if="shouldShowDeleteButton"
       type="transparent"
-      class="dark-theme:text-white"
       label="Delete"
       @click="handleDelete"
     >
@@ -92,26 +84,46 @@
 import { computed, inject } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
+import { isCloud } from '@/platform/distribution/types'
 
 import { useMediaAssetActions } from '../composables/useMediaAssetActions'
-import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
 import { MediaAssetKey } from '../schemas/mediaAssetSchema'
 import MediaAssetButtonDivider from './MediaAssetButtonDivider.vue'
 
-const { close } = defineProps<{
+const { close, showDeleteButton } = defineProps<{
   close: () => void
+  showDeleteButton?: boolean
+}>()
+
+const emit = defineEmits<{
+  inspect: []
+  'asset-deleted': []
 }>()
 
 const { asset, context } = inject(MediaAssetKey)!
 const actions = useMediaAssetActions()
-const galleryStore = useMediaAssetGalleryStore()
 
-const showWorkflowOptions = computed(() => context.value.type)
+const assetType = computed(() => {
+  return asset.value?.tags?.[0] || context.value?.type || 'output'
+})
+
+const showWorkflowOptions = computed(() => assetType.value === 'output')
+
+// Only show Copy Job ID for output assets (not for imported/input assets)
+const showCopyJobId = computed(() => {
+  return assetType.value !== 'input'
+})
+
+const shouldShowDeleteButton = computed(() => {
+  const propAllows = showDeleteButton ?? true
+  const typeAllows =
+    assetType.value === 'output' || (assetType.value === 'input' && isCloud)
+
+  return propAllows && typeAllows
+})
 
 const handleInspect = () => {
-  if (asset.value) {
-    galleryStore.openSingle(asset.value)
-  }
+  emit('inspect')
   close()
 }
 
@@ -124,7 +136,7 @@ const handleAddToWorkflow = () => {
 
 const handleDownload = () => {
   if (asset.value) {
-    actions.downloadAsset(asset.value.id)
+    actions.downloadAsset()
   }
   close()
 }
@@ -143,17 +155,21 @@ const handleExportWorkflow = () => {
   close()
 }
 
-const handleCopyJobId = () => {
+const handleCopyJobId = async () => {
   if (asset.value) {
-    actions.copyAssetUrl(asset.value.id)
+    await actions.copyJobId()
   }
   close()
 }
 
-const handleDelete = () => {
-  if (asset.value) {
-    actions.deleteAsset(asset.value.id)
+const handleDelete = async () => {
+  if (!asset.value) return
+
+  close() // Close the menu first
+
+  const success = await actions.confirmDelete(asset.value)
+  if (success) {
+    emit('asset-deleted')
   }
-  close()
 }
 </script>
diff --git a/src/platform/assets/components/MediaAudioBottom.vue b/src/platform/assets/components/MediaAudioBottom.vue
index 9b9e103fa..82373c282 100644
--- a/src/platform/assets/components/MediaAudioBottom.vue
+++ b/src/platform/assets/components/MediaAudioBottom.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ fileName }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center gap-2 text-xs text-zinc-400">
       <span>{{ formatSize(asset.size) }}</span>
     </div>
@@ -18,6 +13,7 @@ import { computed } from 'vue'
 import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/components/MediaAudioTop.vue b/src/platform/assets/components/MediaAudioTop.vue
index 038aaf290..7b82f23b9 100644
--- a/src/platform/assets/components/MediaAudioTop.vue
+++ b/src/platform/assets/components/MediaAudioTop.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="relative h-full w-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded">
     <div
-      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex size-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
     >
       <i
         class="icon-[lucide--music] text-3xl text-zinc-600 dark-theme:text-zinc-200"
diff --git a/src/platform/assets/components/MediaImageBottom.vue b/src/platform/assets/components/MediaImageBottom.vue
index 295c5bd6e..640228990 100644
--- a/src/platform/assets/components/MediaImageBottom.vue
+++ b/src/platform/assets/components/MediaImageBottom.vue
@@ -1,13 +1,10 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ fileName }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center text-xs text-zinc-400">
-      <span>{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span>
+      <span v-if="asset.dimensions"
+        >{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span
+      >
     </div>
   </div>
 </template>
@@ -18,6 +15,7 @@ import { computed } from 'vue'
 import { getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/components/MediaImageTop.vue b/src/platform/assets/components/MediaImageTop.vue
index 40adba435..f2a7686d2 100644
--- a/src/platform/assets/components/MediaImageTop.vue
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -1,27 +1,44 @@
 <template>
-  <div class="relative h-full w-full overflow-hidden rounded">
-    <LazyImage
-      v-if="asset.src"
+  <div
+    class="relative size-full overflow-hidden rounded bg-zinc-200 dark-theme:bg-zinc-700/50"
+  >
+    <img
+      v-if="!error"
       :src="asset.src"
       :alt="asset.name"
-      :container-class="'aspect-square'"
-      :image-class="'w-full h-full object-cover'"
+      class="size-full object-contain"
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex size-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
     >
-      <i class="pi pi-image text-3xl text-gray-400" />
+      <i class="pi pi-image text-3xl text-smoke-400" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import LazyImage from '@/components/common/LazyImage.vue'
+import { useImage, whenever } from '@vueuse/core'
 
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
 
 const { asset } = defineProps<{
   asset: AssetMeta
 }>()
+
+const emit = defineEmits<{
+  'image-loaded': [width: number, height: number]
+}>()
+
+const { state, error, isReady } = useImage({
+  src: asset.src ?? '',
+  alt: asset.name
+})
+
+whenever(
+  () =>
+    isReady.value && state.value?.naturalWidth && state.value?.naturalHeight,
+  () =>
+    emit('image-loaded', state.value!.naturalWidth, state.value!.naturalHeight)
+)
 </script>
diff --git a/src/platform/assets/components/MediaTitle.vue b/src/platform/assets/components/MediaTitle.vue
new file mode 100644
index 000000000..7ad9999af
--- /dev/null
+++ b/src/platform/assets/components/MediaTitle.vue
@@ -0,0 +1,21 @@
+<template>
+  <h3
+    class="m-0 line-clamp-1 text-sm font-bold text-base-foreground"
+    :title="fullName"
+  >
+    {{ displayName }}
+  </h3>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { truncateFilename } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  fileName: string
+}>()
+
+const fullName = computed(() => props.fileName)
+const displayName = computed(() => truncateFilename(props.fileName))
+</script>
diff --git a/src/platform/assets/components/MediaVideoBottom.vue b/src/platform/assets/components/MediaVideoBottom.vue
index 295c5bd6e..f3586f8a3 100644
--- a/src/platform/assets/components/MediaVideoBottom.vue
+++ b/src/platform/assets/components/MediaVideoBottom.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ fileName }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center text-xs text-zinc-400">
-      <span>{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span>
+      <span>{{ formatSize(asset.size) }}</span>
     </div>
   </div>
 </template>
@@ -15,9 +10,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { getFilenameDetails } from '@/utils/formatUtil'
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/components/MediaVideoTop.vue b/src/platform/assets/components/MediaVideoTop.vue
index 2477de99d..a923b1b84 100644
--- a/src/platform/assets/components/MediaVideoTop.vue
+++ b/src/platform/assets/components/MediaVideoTop.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative h-full w-full overflow-hidden rounded bg-black"
+    class="relative size-full overflow-hidden rounded bg-black"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
   >
@@ -9,7 +9,7 @@
       :controls="shouldShowControls"
       preload="none"
       :poster="asset.preview_url"
-      class="relative h-full w-full object-contain"
+      class="relative size-full object-contain"
       @click.stop
       @play="onVideoPlay"
       @pause="onVideoPause"
diff --git a/src/platform/assets/composables/media/IAssetsProvider.ts b/src/platform/assets/composables/media/IAssetsProvider.ts
new file mode 100644
index 000000000..76d9eb522
--- /dev/null
+++ b/src/platform/assets/composables/media/IAssetsProvider.ts
@@ -0,0 +1,29 @@
+import type { Ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+/**
+ * Interface for media assets providers
+ * Defines the common API for both cloud and internal file implementations
+ */
+export interface IAssetsProvider {
+  /** Current media assets */
+  media: Ref<AssetItem[]>
+
+  /** Loading state indicator */
+  loading: Ref<boolean>
+
+  /** Error state */
+  error: Ref<unknown>
+
+  /**
+   * Fetch list of media assets
+   * @returns Promise resolving to array of AssetItem
+   */
+  fetchMediaList: () => Promise<AssetItem[]>
+
+  /**
+   * Refresh the media list (alias for fetchMediaList)
+   */
+  refresh: () => Promise<AssetItem[]>
+}
diff --git a/src/platform/assets/composables/media/assetMappers.ts b/src/platform/assets/composables/media/assetMappers.ts
new file mode 100644
index 000000000..c3f37ecbe
--- /dev/null
+++ b/src/platform/assets/composables/media/assetMappers.ts
@@ -0,0 +1,73 @@
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetContext } from '@/platform/assets/schemas/mediaAssetSchema'
+import { api } from '@/scripts/api'
+import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
+
+/**
+ * Extract asset type from tags array
+ * @param tags The tags array from AssetItem
+ * @returns The asset type ('input' or 'output')
+ */
+export function getAssetType(tags?: string[]): AssetContext['type'] {
+  const tag = tags?.[0]
+  if (tag === 'output') return 'output'
+  return 'input'
+}
+
+/**
+ * Maps a TaskItemImpl output to an AssetItem format
+ * @param taskItem The task item containing execution data
+ * @param output The output from the task
+ * @param useDisplayName Whether to truncate the filename for display
+ * @returns AssetItem formatted object
+ */
+export function mapTaskOutputToAssetItem(
+  taskItem: TaskItemImpl,
+  output: ResultItemImpl
+): AssetItem {
+  const metadata: OutputAssetMetadata = {
+    promptId: taskItem.promptId,
+    nodeId: output.nodeId,
+    subfolder: output.subfolder,
+    executionTimeInSeconds: taskItem.executionTimeInSeconds,
+    format: output.format,
+    workflow: taskItem.workflow
+  }
+
+  return {
+    id: taskItem.promptId,
+    name: output.filename,
+    size: 0,
+    created_at: taskItem.executionStartTimestamp
+      ? new Date(taskItem.executionStartTimestamp).toISOString()
+      : new Date().toISOString(),
+    tags: ['output'],
+    preview_url: output.url,
+    user_metadata: metadata
+  }
+}
+
+/**
+ * Maps input directory file to AssetItem format
+ * @param filename The filename
+ * @param index File index for unique ID
+ * @param directory The directory type
+ * @returns AssetItem formatted object
+ */
+export function mapInputFileToAssetItem(
+  filename: string,
+  index: number,
+  directory: 'input' | 'output' = 'input'
+): AssetItem {
+  return {
+    id: `${directory}-${index}-${filename}`,
+    name: filename,
+    size: 0,
+    created_at: new Date().toISOString(),
+    tags: [directory],
+    preview_url: api.apiURL(
+      `/view?filename=${encodeURIComponent(filename)}&type=${directory}`
+    )
+  }
+}
diff --git a/src/platform/assets/composables/media/useAssetsApi.ts b/src/platform/assets/composables/media/useAssetsApi.ts
new file mode 100644
index 000000000..5309b5e75
--- /dev/null
+++ b/src/platform/assets/composables/media/useAssetsApi.ts
@@ -0,0 +1,46 @@
+import { computed } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useAssetsStore } from '@/stores/assetsStore'
+
+/**
+ * Composable for fetching media assets from cloud environment
+ * Uses AssetsStore for centralized state management
+ */
+export function useAssetsApi(directory: 'input' | 'output') {
+  const assetsStore = useAssetsStore()
+
+  const media = computed(() =>
+    directory === 'input' ? assetsStore.inputAssets : assetsStore.historyAssets
+  )
+
+  const loading = computed(() =>
+    directory === 'input'
+      ? assetsStore.inputLoading
+      : assetsStore.historyLoading
+  )
+
+  const error = computed(() =>
+    directory === 'input' ? assetsStore.inputError : assetsStore.historyError
+  )
+
+  const fetchMediaList = async (): Promise<AssetItem[]> => {
+    if (directory === 'input') {
+      await assetsStore.updateInputs()
+      return assetsStore.inputAssets
+    } else {
+      await assetsStore.updateHistory()
+      return assetsStore.historyAssets
+    }
+  }
+
+  const refresh = () => fetchMediaList()
+
+  return {
+    media,
+    loading,
+    error,
+    fetchMediaList,
+    refresh
+  }
+}
diff --git a/src/platform/assets/composables/media/useInternalFilesApi.ts b/src/platform/assets/composables/media/useInternalFilesApi.ts
new file mode 100644
index 000000000..89c1e71b4
--- /dev/null
+++ b/src/platform/assets/composables/media/useInternalFilesApi.ts
@@ -0,0 +1,46 @@
+import { computed } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useAssetsStore } from '@/stores/assetsStore'
+
+/**
+ * Composable for fetching media assets from local environment
+ * Uses AssetsStore for centralized state management
+ */
+export function useInternalFilesApi(directory: 'input' | 'output') {
+  const assetsStore = useAssetsStore()
+
+  const media = computed(() =>
+    directory === 'input' ? assetsStore.inputAssets : assetsStore.historyAssets
+  )
+
+  const loading = computed(() =>
+    directory === 'input'
+      ? assetsStore.inputLoading
+      : assetsStore.historyLoading
+  )
+
+  const error = computed(() =>
+    directory === 'input' ? assetsStore.inputError : assetsStore.historyError
+  )
+
+  const fetchMediaList = async (): Promise<AssetItem[]> => {
+    if (directory === 'input') {
+      await assetsStore.updateInputs()
+      return assetsStore.inputAssets
+    } else {
+      await assetsStore.updateHistory()
+      return assetsStore.historyAssets
+    }
+  }
+
+  const refresh = () => fetchMediaList()
+
+  return {
+    media,
+    loading,
+    error,
+    fetchMediaList,
+    refresh
+  }
+}
diff --git a/src/platform/assets/composables/media/useMediaAssets.ts b/src/platform/assets/composables/media/useMediaAssets.ts
new file mode 100644
index 000000000..46bb6111b
--- /dev/null
+++ b/src/platform/assets/composables/media/useMediaAssets.ts
@@ -0,0 +1,15 @@
+import { isCloud } from '@/platform/distribution/types'
+
+import type { IAssetsProvider } from './IAssetsProvider'
+import { useAssetsApi } from './useAssetsApi'
+import { useInternalFilesApi } from './useInternalFilesApi'
+
+/**
+ * Factory function that returns the appropriate media assets implementation
+ * based on the current distribution (cloud vs internal)
+ * @param directory - The directory to fetch assets from
+ * @returns IAssetsProvider implementation
+ */
+export function useMediaAssets(directory: 'input' | 'output'): IAssetsProvider {
+  return isCloud ? useAssetsApi(directory) : useInternalFilesApi(directory)
+}
diff --git a/src/platform/assets/composables/useAssetBrowser.ts b/src/platform/assets/composables/useAssetBrowser.ts
index a33bfcdd2..28d32a900 100644
--- a/src/platform/assets/composables/useAssetBrowser.ts
+++ b/src/platform/assets/composables/useAssetBrowser.ts
@@ -1,4 +1,7 @@
 import { computed, ref } from 'vue'
+import type { Ref } from 'vue'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 
 import { d, t } from '@/i18n'
 import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vue'
@@ -7,7 +10,6 @@ import {
   getAssetBaseModel,
   getAssetDescription
 } from '@/platform/assets/utils/assetMetadataUtils'
-import { formatSize } from '@/utils/formatUtil'
 
 function filterByCategory(category: string) {
   return (asset: AssetItem) => {
@@ -15,19 +17,6 @@ function filterByCategory(category: string) {
   }
 }
 
-function filterByQuery(query: string) {
-  return (asset: AssetItem) => {
-    if (!query) return true
-    const lowerQuery = query.toLowerCase()
-    const description = getAssetDescription(asset)
-    return (
-      asset.name.toLowerCase().includes(lowerQuery) ||
-      (description && description.toLowerCase().includes(lowerQuery)) ||
-      asset.tags.some((tag) => tag.toLowerCase().includes(lowerQuery))
-    )
-  }
-}
-
 function filterByFileFormats(formats: string[]) {
   return (asset: AssetItem) => {
     if (formats.length === 0) return true
@@ -54,7 +43,6 @@ type AssetBadge = {
 // Display properties for transformed assets
 export interface AssetDisplayItem extends AssetItem {
   description: string
-  formattedSize: string
   badges: AssetBadge[]
   stats: {
     formattedDate?: string
@@ -67,7 +55,10 @@ export interface AssetDisplayItem extends AssetItem {
  * Asset Browser composable
  * Manages search, filtering, asset transformation and selection logic
  */
-export function useAssetBrowser(assets: AssetItem[] = []) {
+export function useAssetBrowser(
+  assetsSource: Ref<AssetItem[] | undefined> = ref<AssetItem[] | undefined>([])
+) {
+  const assets = computed<AssetItem[]>(() => assetsSource.value ?? [])
   // State
   const searchQuery = ref('')
   const selectedCategory = ref('all')
@@ -85,9 +76,6 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
       getAssetDescription(asset) ||
       `${typeTag || t('assetBrowser.unknown')} model`
 
-    // Format file size
-    const formattedSize = formatSize(asset.size)
-
     // Create badges from tags and metadata
     const badges: AssetBadge[] = []
 
@@ -105,9 +93,6 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
       })
     }
 
-    // Size badge
-    badges.push({ label: formattedSize, type: 'size' })
-
     // Create display stats from API data
     const stats = {
       formattedDate: d(new Date(asset.created_at), { dateStyle: 'short' }),
@@ -118,16 +103,16 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
     return {
       ...asset,
       description,
-      formattedSize,
       badges,
       stats
     }
   }
 
   const availableCategories = computed(() => {
-    const categories = assets
-      .filter((asset) => asset.tags[0] === 'models' && asset.tags[1])
+    const categories = assets.value
+      .filter((asset) => asset.tags[0] === 'models')
       .map((asset) => asset.tags[1])
+      .filter((tag): tag is string => typeof tag === 'string' && tag.length > 0)
 
     const uniqueCategories = Array.from(new Set(categories))
       .sort()
@@ -161,17 +146,39 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
 
   // Category-filtered assets for filter options (before search/format/base model filters)
   const categoryFilteredAssets = computed(() => {
-    return assets.filter(filterByCategory(selectedCategory.value))
+    return assets.value.filter(filterByCategory(selectedCategory.value))
   })
 
+  const fuseOptions: UseFuseOptions<AssetItem> = {
+    fuseOptions: {
+      keys: [
+        { name: 'name', weight: 0.4 },
+        { name: 'tags', weight: 0.3 }
+      ],
+      threshold: 0.4, // Higher threshold for typo tolerance (0.0 = exact, 1.0 = match all)
+      ignoreLocation: true, // Search anywhere in the string, not just at the beginning
+      includeScore: true
+    },
+    matchAllWhenSearchEmpty: true
+  }
+
+  const { results: fuseResults } = useFuse(
+    searchQuery,
+    categoryFilteredAssets,
+    fuseOptions
+  )
+
+  const searchFiltered = computed(() =>
+    fuseResults.value.map((result) => result.item)
+  )
+
   const filteredAssets = computed(() => {
-    const filtered = categoryFilteredAssets.value
-      .filter(filterByQuery(searchQuery.value))
+    const filtered = searchFiltered.value
       .filter(filterByFileFormats(filters.value.fileFormats))
       .filter(filterByBaseModels(filters.value.baseModels))
 
-    // Sort assets
-    filtered.sort((a, b) => {
+    const sortedAssets = [...filtered]
+    sortedAssets.sort((a, b) => {
       switch (filters.value.sortBy) {
         case 'name-desc':
           return b.name.localeCompare(a.name)
@@ -188,7 +195,7 @@ export function useAssetBrowser(assets: AssetItem[] = []) {
     })
 
     // Transform to display format
-    return filtered.map(transformAssetForDisplay)
+    return sortedAssets.map(transformAssetForDisplay)
   })
 
   function updateFilters(newFilters: FilterState) {
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.stories.ts b/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
index c72cbccc8..970a4c437 100644
--- a/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
+++ b/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
@@ -91,12 +91,12 @@ const DialogDemoComponent = {
             >
               Change Current Model
             </button>
-            <p class="text-sm text-gray-600 mt-1">
+            <p class="text-sm text-smoke-600 mt-1">
               Opens with "realistic_vision_v5.safetensors" as current value
             </p>
           </div>
 
-          <div class="mt-8 p-4 bg-gray-100 rounded">
+          <div class="mt-8 p-4 bg-smoke-100 rounded">
             <h4 class="font-semibold mb-2">Instructions:</h4>
             <ul class="text-sm space-y-1">
               <li>• Click any button to open the Asset Browser dialog</li>
@@ -154,9 +154,9 @@ export const Demo: Story = {
         <DialogDemoComponent />
 
         <!-- Code Example Section -->
-        <div class="p-8 border-t border-gray-200 bg-gray-50">
+        <div class="p-8 border-t border-smoke-200 bg-gray-50">
           <h2 class="text-2xl font-bold mb-4">Code Example</h2>
-          <p class="text-gray-600 mb-4">
+          <p class="text-smoke-600 mb-4">
             This is how you would use the composable in your component:
           </p>
           <div class="bg-white p-4 rounded-lg border shadow-sm">
@@ -182,7 +182,7 @@ export default {
   }
 }</code></pre>
           </div>
-          <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
+          <div class="mt-4 p-3 bg-blue-50 border border-azure-400 rounded">
             <p class="text-sm text-blue-800">
               <strong>💡 Try it:</strong> Use the interactive buttons above to see this code in action!
             </p>
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.ts b/src/platform/assets/composables/useAssetBrowserDialog.ts
index de0b4fc60..41c4c011d 100644
--- a/src/platform/assets/composables/useAssetBrowserDialog.ts
+++ b/src/platform/assets/composables/useAssetBrowserDialog.ts
@@ -1,7 +1,5 @@
-import { t } from '@/i18n'
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { assetService } from '@/platform/assets/services/assetService'
 import { useDialogStore } from '@/stores/dialogStore'
 import type { DialogComponentProps } from '@/stores/dialogStore'
 
@@ -51,33 +49,6 @@ export const useAssetBrowserDialog = () => {
       dialogStore.closeDialog({ key: dialogKey })
     }
 
-    const assets: AssetItem[] = await assetService
-      .getAssetsForNodeType(props.nodeType)
-      .catch((error) => {
-        console.error(
-          'Failed to fetch assets for node type:',
-          props.nodeType,
-          error
-        )
-        return []
-      })
-
-    // Extract node type category from first asset's tags (e.g., "loras", "checkpoints")
-    // Tags are ordered: ["models", "loras"] so take the second tag
-    const nodeTypeCategory =
-      assets[0]?.tags?.find((tag) => tag !== 'models') ?? 'models'
-
-    const acronyms = new Set(['VAE', 'CLIP', 'GLIGEN'])
-    const categoryLabel = nodeTypeCategory
-      .split('_')
-      .map((word) => {
-        const uc = word.toUpperCase()
-        return acronyms.has(uc) ? uc : word
-      })
-      .join(' ')
-
-    const title = t('assetBrowser.allCategory', { category: categoryLabel })
-
     dialogStore.showDialog({
       key: dialogKey,
       component: AssetBrowserModal,
@@ -85,8 +56,6 @@ export const useAssetBrowserDialog = () => {
         nodeType: props.nodeType,
         inputName: props.inputName,
         currentValue: props.currentValue,
-        assets,
-        title,
         onSelect: handleAssetSelected,
         onClose: () => dialogStore.closeDialog({ key: dialogKey })
       },
@@ -100,25 +69,12 @@ export const useAssetBrowserDialog = () => {
       dialogStore.closeDialog({ key: dialogKey })
     }
 
-    const assets = await assetService
-      .getAssetsByTag(options.assetType)
-      .catch((error) => {
-        console.error(
-          'Failed to fetch assets for tag:',
-          options.assetType,
-          error
-        )
-        return []
-      })
-
     dialogStore.showDialog({
       key: dialogKey,
       component: AssetBrowserModal,
       props: {
-        nodeType: undefined,
-        inputName: undefined,
-        assets,
         showLeftPanel: true,
+        assetType: options.assetType,
         title: options.title,
         onSelect: handleAssetSelected,
         onClose: () => dialogStore.closeDialog({ key: dialogKey })
diff --git a/src/platform/assets/composables/useAssetSelection.ts b/src/platform/assets/composables/useAssetSelection.ts
new file mode 100644
index 000000000..5848b9d8f
--- /dev/null
+++ b/src/platform/assets/composables/useAssetSelection.ts
@@ -0,0 +1,129 @@
+import { useKeyModifier } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
+
+export function useAssetSelection() {
+  const selectionStore = useAssetSelectionStore()
+
+  // Track whether the asset selection is active (e.g., when sidebar is open)
+  const isActive = ref<boolean>(true)
+
+  // Key modifiers - raw values
+  const shiftKeyRaw = useKeyModifier('Shift')
+  const ctrlKeyRaw = useKeyModifier('Control')
+  const metaKeyRaw = useKeyModifier('Meta')
+
+  // Only respond to key modifiers when active
+  const shiftKey = computed(() => isActive.value && shiftKeyRaw.value)
+  const ctrlKey = computed(() => isActive.value && ctrlKeyRaw.value)
+  const metaKey = computed(() => isActive.value && metaKeyRaw.value)
+  const cmdOrCtrlKey = computed(() => ctrlKey.value || metaKey.value)
+
+  /**
+   * Handle asset click with modifier keys for selection
+   * @param asset The clicked asset
+   * @param index The index of the clicked asset in the current list
+   * @param allAssets All assets in the current view for range selection
+   */
+  function handleAssetClick(
+    asset: AssetItem,
+    index: number,
+    allAssets: AssetItem[]
+  ) {
+    // Input validation
+    if (!asset?.id || index < 0 || index >= allAssets.length) {
+      console.warn('Invalid asset selection parameters')
+      return
+    }
+
+    const assetId = asset.id
+
+    // Shift + Click: Range selection
+    if (shiftKey.value && selectionStore.lastSelectedIndex >= 0) {
+      const start = Math.min(selectionStore.lastSelectedIndex, index)
+      const end = Math.max(selectionStore.lastSelectedIndex, index)
+
+      // Batch operation for better performance
+      const rangeIds = allAssets.slice(start, end + 1).map((a) => a.id)
+      const existingIds = Array.from(selectionStore.selectedAssetIds)
+      const combinedIds = [...new Set([...existingIds, ...rangeIds])]
+
+      // Single update instead of multiple forEach operations
+      selectionStore.setSelection(combinedIds)
+
+      // Don't update lastSelectedIndex for shift selection
+      return
+    }
+
+    // Ctrl/Cmd + Click: Toggle individual selection
+    if (cmdOrCtrlKey.value) {
+      selectionStore.toggleSelection(assetId)
+      selectionStore.setLastSelectedIndex(index)
+      return
+    }
+
+    // Normal Click: Single selection
+    selectionStore.clearSelection()
+    selectionStore.addToSelection(assetId)
+    selectionStore.setLastSelectedIndex(index)
+  }
+
+  /**
+   * Select all assets in the current view
+   */
+  function selectAll(allAssets: AssetItem[]) {
+    const allIds = allAssets.map((a) => a.id)
+    selectionStore.setSelection(allIds)
+    if (allAssets.length > 0) {
+      selectionStore.setLastSelectedIndex(allAssets.length - 1)
+    }
+  }
+
+  /**
+   * Get the actual asset objects for selected IDs
+   */
+  function getSelectedAssets(allAssets: AssetItem[]): AssetItem[] {
+    return allAssets.filter((asset) => selectionStore.isSelected(asset.id))
+  }
+
+  /**
+   * Activate key event listeners (when sidebar opens)
+   */
+  function activate() {
+    isActive.value = true
+  }
+
+  /**
+   * Deactivate key event listeners (when sidebar closes)
+   */
+  function deactivate() {
+    isActive.value = false
+    // Reset selection state to ensure clean state when deactivated
+    selectionStore.reset()
+  }
+
+  return {
+    // Selection state
+    selectedIds: computed(() => selectionStore.selectedAssetIds),
+    selectedCount: computed(() => selectionStore.selectedCount),
+    hasSelection: computed(() => selectionStore.hasSelection),
+    isSelected: (assetId: string) => selectionStore.isSelected(assetId),
+
+    // Selection actions
+    handleAssetClick,
+    selectAll,
+    clearSelection: () => selectionStore.clearSelection(),
+    getSelectedAssets,
+    reset: () => selectionStore.reset(),
+
+    // Lifecycle management
+    activate,
+    deactivate,
+
+    // Key states (for UI feedback)
+    shiftKey,
+    cmdOrCtrlKey
+  }
+}
diff --git a/src/platform/assets/composables/useAssetSelectionStore.ts b/src/platform/assets/composables/useAssetSelectionStore.ts
new file mode 100644
index 000000000..08edb7bf8
--- /dev/null
+++ b/src/platform/assets/composables/useAssetSelectionStore.ts
@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useAssetSelectionStore = defineStore('assetSelection', () => {
+  // State
+  const selectedAssetIds = ref<Set<string>>(new Set())
+  const lastSelectedIndex = ref<number>(-1)
+
+  // Getters
+  const selectedCount = computed(() => selectedAssetIds.value.size)
+  const hasSelection = computed(() => selectedAssetIds.value.size > 0)
+  const selectedIdsArray = computed(() => Array.from(selectedAssetIds.value))
+
+  // Actions
+  function addToSelection(assetId: string) {
+    selectedAssetIds.value.add(assetId)
+  }
+
+  function removeFromSelection(assetId: string) {
+    selectedAssetIds.value.delete(assetId)
+  }
+
+  function setSelection(assetIds: string[]) {
+    // Only update if there's an actual change to prevent unnecessary re-renders
+    const newSet = new Set(assetIds)
+    if (
+      newSet.size !== selectedAssetIds.value.size ||
+      !assetIds.every((id) => selectedAssetIds.value.has(id))
+    ) {
+      selectedAssetIds.value = newSet
+    }
+  }
+
+  function clearSelection() {
+    selectedAssetIds.value.clear()
+    lastSelectedIndex.value = -1
+  }
+
+  function toggleSelection(assetId: string) {
+    if (isSelected(assetId)) {
+      removeFromSelection(assetId)
+    } else {
+      addToSelection(assetId)
+    }
+  }
+
+  function isSelected(assetId: string): boolean {
+    return selectedAssetIds.value.has(assetId)
+  }
+
+  function setLastSelectedIndex(index: number) {
+    lastSelectedIndex.value = index
+  }
+
+  // Reset function for cleanup
+  function reset() {
+    selectedAssetIds.value.clear()
+    lastSelectedIndex.value = -1
+  }
+
+  return {
+    // State
+    selectedAssetIds: computed(() => selectedAssetIds.value),
+    lastSelectedIndex: computed(() => lastSelectedIndex.value),
+
+    // Getters
+    selectedCount,
+    hasSelection,
+    selectedIdsArray,
+
+    // Actions
+    addToSelection,
+    removeFromSelection,
+    setSelection,
+    clearSelection,
+    toggleSelection,
+    isSelected,
+    setLastSelectedIndex,
+    reset
+  }
+})
diff --git a/src/platform/assets/composables/useMediaAssetActions.ts b/src/platform/assets/composables/useMediaAssetActions.ts
index 8a3166393..0ccc82225 100644
--- a/src/platform/assets/composables/useMediaAssetActions.ts
+++ b/src/platform/assets/composables/useMediaAssetActions.ts
@@ -1,29 +1,222 @@
 /* eslint-disable no-console */
-import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import { useToast } from 'primevue/usetoast'
+import { inject } from 'vue'
+
+import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
+import { downloadFile } from '@/base/common/downloadUtil'
+import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { api } from '@/scripts/api'
+import { getOutputAssetMetadata } from '../schemas/assetMetadataSchema'
+import { useAssetsStore } from '@/stores/assetsStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import type { AssetItem } from '../schemas/assetSchema'
+import { MediaAssetKey } from '../schemas/mediaAssetSchema'
+import { assetService } from '../services/assetService'
 
 export function useMediaAssetActions() {
-  const selectAsset = (asset: AssetMeta) => {
-    console.log('Asset selected:', asset)
+  const toast = useToast()
+  const dialogStore = useDialogStore()
+  const mediaContext = inject(MediaAssetKey, null)
+
+  const downloadAsset = () => {
+    const asset = mediaContext?.asset.value
+    if (!asset) return
+
+    try {
+      const assetType = asset.tags?.[0] || 'output'
+      const filename = asset.name
+      const downloadUrl = api.apiURL(
+        `/view?filename=${encodeURIComponent(filename)}&type=${assetType}`
+      )
+
+      downloadFile(downloadUrl, filename)
+
+      toast.add({
+        severity: 'success',
+        summary: t('g.success'),
+        detail: t('g.downloadStarted'),
+        life: 2000
+      })
+    } catch (error) {
+      toast.add({
+        severity: 'error',
+        summary: t('g.error'),
+        detail: t('g.failedToDownloadImage'),
+        life: 3000
+      })
+    }
   }
 
-  const downloadAsset = (assetId: string) => {
-    console.log('Downloading asset:', assetId)
+  /**
+   * Download multiple assets at once
+   * @param assets Array of assets to download
+   */
+  const downloadMultipleAssets = (assets: AssetItem[]) => {
+    if (!assets || assets.length === 0) return
+
+    try {
+      assets.forEach((asset) => {
+        const assetType = asset.tags?.[0] || 'output'
+        const filename = asset.name
+        const downloadUrl = api.apiURL(
+          `/view?filename=${encodeURIComponent(filename)}&type=${assetType}`
+        )
+        downloadFile(downloadUrl, filename)
+      })
+
+      toast.add({
+        severity: 'success',
+        summary: t('g.success'),
+        detail: t('mediaAsset.selection.downloadsStarted', {
+          count: assets.length
+        }),
+        life: 2000
+      })
+    } catch (error) {
+      console.error('Failed to download assets:', error)
+      toast.add({
+        severity: 'error',
+        summary: t('g.error'),
+        detail: t('g.failedToDownloadImage'),
+        life: 3000
+      })
+    }
   }
 
-  const deleteAsset = (assetId: string) => {
-    console.log('Deleting asset:', assetId)
+  /**
+   * Show confirmation dialog and delete asset if confirmed
+   * @param asset The asset to delete
+   * @returns true if the asset was deleted, false otherwise
+   */
+  const confirmDelete = async (asset: AssetItem): Promise<boolean> => {
+    const assetType = asset.tags?.[0] || 'output'
+
+    return new Promise((resolve) => {
+      dialogStore.showDialog({
+        key: 'delete-asset-confirmation',
+        title: t('mediaAsset.deleteAssetTitle'),
+        component: ConfirmationDialogContent,
+        props: {
+          message: t('mediaAsset.deleteAssetDescription'),
+          type: 'delete',
+          itemList: [asset.name],
+          onConfirm: async () => {
+            const success = await deleteAsset(asset, assetType)
+            resolve(success)
+          },
+          onCancel: () => {
+            resolve(false)
+          }
+        }
+      })
+    })
+  }
+
+  const deleteAsset = async (asset: AssetItem, assetType: string) => {
+    const assetsStore = useAssetsStore()
+
+    try {
+      if (assetType === 'output') {
+        // For output files, delete from history
+        const promptId =
+          asset.id || getOutputAssetMetadata(asset.user_metadata)?.promptId
+        if (!promptId) {
+          throw new Error('Unable to extract prompt ID from asset')
+        }
+
+        await api.deleteItem('history', promptId)
+
+        // Update history assets in store after deletion
+        await assetsStore.updateHistory()
+
+        toast.add({
+          severity: 'success',
+          summary: t('g.success'),
+          detail: t('mediaAsset.assetDeletedSuccessfully'),
+          life: 2000
+        })
+        return true
+      } else {
+        // For input files, only allow deletion in cloud environment
+        if (!isCloud) {
+          toast.add({
+            severity: 'warn',
+            summary: t('g.warning'),
+            detail: t('mediaAsset.deletingImportedFilesCloudOnly'),
+            life: 3000
+          })
+          return false
+        }
+
+        // In cloud environment, use the assets API to delete
+        await assetService.deleteAsset(asset.id)
+
+        // Update input assets in store after deletion
+        await assetsStore.updateInputs()
+
+        toast.add({
+          severity: 'success',
+          summary: t('g.success'),
+          detail: t('mediaAsset.assetDeletedSuccessfully'),
+          life: 2000
+        })
+        return true
+      }
+    } catch (error) {
+      console.error('Failed to delete asset:', error)
+      toast.add({
+        severity: 'error',
+        summary: t('g.error'),
+        detail:
+          error instanceof Error
+            ? error.message
+            : t('mediaAsset.failedToDeleteAsset'),
+        life: 3000
+      })
+      return false
+    }
   }
 
   const playAsset = (assetId: string) => {
     console.log('Playing asset:', assetId)
   }
 
-  const copyAssetUrl = (assetId: string) => {
-    console.log('Copy asset URL:', assetId)
-  }
+  const copyJobId = async () => {
+    const asset = mediaContext?.asset.value
+    if (!asset) return
 
-  const copyJobId = (jobId: string) => {
-    console.log('Copy job ID:', jobId)
+    // Get promptId from metadata instead of parsing the ID string
+    const metadata = getOutputAssetMetadata(asset.user_metadata)
+    const promptId = metadata?.promptId
+
+    if (!promptId) {
+      toast.add({
+        severity: 'warn',
+        summary: t('g.warning'),
+        detail: 'No job ID found for this asset',
+        life: 2000
+      })
+      return
+    }
+
+    try {
+      await navigator.clipboard.writeText(promptId)
+      toast.add({
+        severity: 'success',
+        summary: t('g.success'),
+        detail: t('mediaAsset.jobIdToast.jobIdCopied'),
+        life: 2000
+      })
+    } catch (error) {
+      toast.add({
+        severity: 'error',
+        summary: t('g.error'),
+        detail: t('mediaAsset.jobIdToast.jobIdCopyFailed'),
+        life: 3000
+      })
+    }
   }
 
   const addWorkflow = (assetId: string) => {
@@ -42,12 +235,86 @@ export function useMediaAssetActions() {
     console.log('Opening more outputs for asset:', assetId)
   }
 
+  /**
+   * Delete multiple assets with confirmation dialog
+   * @param assets Array of assets to delete
+   */
+  const deleteMultipleAssets = async (assets: AssetItem[]) => {
+    if (!assets || assets.length === 0) return
+
+    const assetsStore = useAssetsStore()
+
+    return new Promise<void>((resolve) => {
+      dialogStore.showDialog({
+        key: 'delete-multiple-assets-confirmation',
+        title: t('mediaAsset.deleteSelectedTitle'),
+        component: ConfirmationDialogContent,
+        props: {
+          message: t('mediaAsset.deleteSelectedDescription', {
+            count: assets.length
+          }),
+          type: 'delete',
+          itemList: assets.map((asset) => asset.name),
+          onConfirm: async () => {
+            try {
+              // Delete all assets
+              await Promise.all(
+                assets.map(async (asset) => {
+                  const assetType = asset.tags?.[0] || 'output'
+                  if (assetType === 'output') {
+                    const promptId =
+                      asset.id ||
+                      getOutputAssetMetadata(asset.user_metadata)?.promptId
+                    if (promptId) {
+                      await api.deleteItem('history', promptId)
+                    }
+                  } else if (isCloud) {
+                    await assetService.deleteAsset(asset.id)
+                  }
+                })
+              )
+
+              // Update stores after deletions
+              await assetsStore.updateHistory()
+              if (assets.some((a) => a.tags?.[0] === 'input')) {
+                await assetsStore.updateInputs()
+              }
+
+              toast.add({
+                severity: 'success',
+                summary: t('g.success'),
+                detail: t('mediaAsset.selection.assetsDeletedSuccessfully', {
+                  count: assets.length
+                }),
+                life: 2000
+              })
+            } catch (error) {
+              console.error('Failed to delete assets:', error)
+              toast.add({
+                severity: 'error',
+                summary: t('g.error'),
+                detail: t('mediaAsset.selection.failedToDeleteAssets'),
+                life: 3000
+              })
+            }
+
+            resolve()
+          },
+          onCancel: () => {
+            resolve()
+          }
+        }
+      })
+    })
+  }
+
   return {
-    selectAsset,
     downloadAsset,
+    downloadMultipleAssets,
+    confirmDelete,
     deleteAsset,
+    deleteMultipleAssets,
     playAsset,
-    copyAssetUrl,
     copyJobId,
     addWorkflow,
     openWorkflow,
diff --git a/src/platform/assets/schemas/assetMetadataSchema.ts b/src/platform/assets/schemas/assetMetadataSchema.ts
new file mode 100644
index 000000000..335e89908
--- /dev/null
+++ b/src/platform/assets/schemas/assetMetadataSchema.ts
@@ -0,0 +1,41 @@
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+/**
+ * Metadata for output assets from queue store
+ * Extends Record<string, unknown> for compatibility with AssetItem schema
+ */
+export interface OutputAssetMetadata extends Record<string, unknown> {
+  promptId: string
+  nodeId: string | number
+  subfolder: string
+  executionTimeInSeconds?: number
+  format?: string
+  workflow?: unknown
+  outputCount?: number
+  allOutputs?: ResultItemImpl[]
+}
+
+/**
+ * Type guard to check if metadata is OutputAssetMetadata
+ */
+function isOutputAssetMetadata(
+  metadata: Record<string, unknown> | undefined
+): metadata is OutputAssetMetadata {
+  if (!metadata) return false
+  return (
+    typeof metadata.promptId === 'string' &&
+    (typeof metadata.nodeId === 'string' || typeof metadata.nodeId === 'number')
+  )
+}
+
+/**
+ * Safely extract output asset metadata
+ */
+export function getOutputAssetMetadata(
+  userMetadata: Record<string, unknown> | undefined
+): OutputAssetMetadata | null {
+  if (isOutputAssetMetadata(userMetadata)) {
+    return userMetadata
+  }
+  return null
+}
diff --git a/src/platform/assets/schemas/assetSchema.ts b/src/platform/assets/schemas/assetSchema.ts
index 05d9a8990..880675eb0 100644
--- a/src/platform/assets/schemas/assetSchema.ts
+++ b/src/platform/assets/schemas/assetSchema.ts
@@ -4,9 +4,9 @@ import { z } from 'zod'
 const zAsset = z.object({
   id: z.string(),
   name: z.string(),
-  asset_hash: z.string().optional(),
+  asset_hash: z.string().nullish(),
   size: z.number(),
-  mime_type: z.string().optional(),
+  mime_type: z.string().nullish(),
   tags: z.array(z.string()).optional().default([]),
   preview_id: z.string().nullable().optional(),
   preview_url: z.string().optional(),
diff --git a/src/platform/assets/schemas/mediaAssetSchema.ts b/src/platform/assets/schemas/mediaAssetSchema.ts
index d35dad6c5..818db6b4a 100644
--- a/src/platform/assets/schemas/mediaAssetSchema.ts
+++ b/src/platform/assets/schemas/mediaAssetSchema.ts
@@ -19,9 +19,7 @@ const zMediaAssetDisplayItemSchema = assetItemSchema.extend({
 
   // New optional fields
   duration: z.number().nonnegative().optional(),
-  dimensions: zDimensionsSchema.optional(),
-  jobId: z.string().optional(),
-  isMulti: z.boolean().optional()
+  dimensions: zDimensionsSchema.optional()
 })
 
 // Asset context schema
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index 626a52d20..378a95ec4 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -113,11 +113,16 @@ function createAssetService() {
    * Checks if a widget input should use the asset browser based on both input name and node comfyClass
    *
    * @param nodeType - The ComfyUI node comfyClass (e.g., 'CheckpointLoaderSimple', 'LoraLoader')
+   * @param widgetName - The name of the widget to check (e.g., 'ckpt_name')
    * @returns true if this input should use asset browser
    */
-  function isAssetBrowserEligible(nodeType: string = ''): boolean {
+  function isAssetBrowserEligible(
+    nodeType: string | undefined,
+    widgetName: string
+  ): boolean {
+    if (!nodeType || !widgetName) return false
     return (
-      !!nodeType && useModelToNodeStore().getRegisteredNodeTypes().has(nodeType)
+      useModelToNodeStore().getRegisteredNodeTypes()[nodeType] === widgetName
     )
   }
 
@@ -190,11 +195,21 @@ function createAssetService() {
    * Gets assets filtered by a specific tag
    *
    * @param tag - The tag to filter by (e.g., 'models')
+   * @param includePublic - Whether to include public assets (default: true)
    * @returns Promise<AssetItem[]> - Full asset objects filtered by tag, excluding missing assets
    */
-  async function getAssetsByTag(tag: string): Promise<AssetItem[]> {
+  async function getAssetsByTag(
+    tag: string,
+    includePublic: boolean = true
+  ): Promise<AssetItem[]> {
+    const queryParams = new URLSearchParams({
+      include_tags: tag,
+      limit: DEFAULT_LIMIT.toString(),
+      include_public: includePublic ? 'true' : 'false'
+    })
+
     const data = await handleAssetRequest(
-      `${ASSETS_ENDPOINT}?include_tags=${tag}&limit=${DEFAULT_LIMIT}`,
+      `${ASSETS_ENDPOINT}?${queryParams.toString()}`,
       `assets for tag ${tag}`
     )
 
@@ -203,13 +218,34 @@ function createAssetService() {
     )
   }
 
+  /**
+   * Deletes an asset by ID
+   * Only available in cloud environment
+   *
+   * @param id - The asset ID (UUID)
+   * @returns Promise<void>
+   * @throws Error if deletion fails
+   */
+  async function deleteAsset(id: string): Promise<void> {
+    const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}`, {
+      method: 'DELETE'
+    })
+
+    if (!res.ok) {
+      throw new Error(
+        `Unable to delete asset ${id}: Server returned ${res.status}`
+      )
+    }
+  }
+
   return {
     getAssetModelFolders,
     getAssetModels,
     isAssetBrowserEligible,
     getAssetsForNodeType,
     getAssetDetails,
-    getAssetsByTag
+    getAssetsByTag,
+    deleteAsset
   }
 }
 
diff --git a/src/platform/assets/utils/categoryLabel.ts b/src/platform/assets/utils/categoryLabel.ts
new file mode 100644
index 000000000..e5a655333
--- /dev/null
+++ b/src/platform/assets/utils/categoryLabel.ts
@@ -0,0 +1,19 @@
+const ACRONYM_TAGS = new Set(['VAE', 'CLIP', 'GLIGEN'])
+
+export function formatCategoryLabel(raw?: string): string {
+  if (!raw) return 'Models'
+
+  // Special display name mappings
+  if (raw === 'diffusion_models') return 'Diffusion'
+
+  return raw
+    .split('_')
+    .map((segment) => {
+      const upper = segment.toUpperCase()
+      if (ACRONYM_TAGS.has(upper)) return upper
+
+      const lower = segment.toLowerCase()
+      return lower.charAt(0).toUpperCase() + lower.slice(1)
+    })
+    .join(' ')
+}
diff --git a/src/platform/auth/session/useSessionCookie.ts b/src/platform/auth/session/useSessionCookie.ts
new file mode 100644
index 000000000..49f6fec46
--- /dev/null
+++ b/src/platform/auth/session/useSessionCookie.ts
@@ -0,0 +1,65 @@
+import { api } from '@/scripts/api'
+import { isCloud } from '@/platform/distribution/types'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+/**
+ * Session cookie management for cloud authentication.
+ * Creates and deletes session cookies on the ComfyUI server.
+ */
+export const useSessionCookie = () => {
+  /**
+   * Creates or refreshes the session cookie.
+   * Called after login and on token refresh.
+   */
+  const createSession = async (): Promise<void> => {
+    if (!isCloud) return
+
+    const authStore = useFirebaseAuthStore()
+    const authHeader = await authStore.getAuthHeader()
+
+    if (!authHeader) {
+      throw new Error('No auth header available for session creation')
+    }
+
+    const response = await fetch(api.apiURL('/auth/session'), {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        ...authHeader,
+        'Content-Type': 'application/json'
+      }
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      throw new Error(
+        `Failed to create session: ${errorData.message || response.statusText}`
+      )
+    }
+  }
+
+  /**
+   * Deletes the session cookie.
+   * Called on logout.
+   */
+  const deleteSession = async (): Promise<void> => {
+    if (!isCloud) return
+
+    const response = await fetch(api.apiURL('/auth/session'), {
+      method: 'DELETE',
+      credentials: 'include'
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      throw new Error(
+        `Failed to delete session: ${errorData.message || response.statusText}`
+      )
+    }
+  }
+
+  return {
+    createSession,
+    deleteSession
+  }
+}
diff --git a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
new file mode 100644
index 000000000..dc317064b
--- /dev/null
+++ b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="flex h-full items-center justify-center p-6">
+    <div class="max-w-[100vw] text-center lg:w-[500px]">
+      <h2 class="mb-3 text-xl text-text-primary">
+        {{ $t('cloudOnboarding.authTimeout.title') }}
+      </h2>
+      <p class="mb-5 text-muted">
+        {{ $t('cloudOnboarding.authTimeout.message') }}
+      </p>
+
+      <!-- Troubleshooting Section -->
+      <div
+        class="mb-4 rounded bg-surface-700 px-3 py-2 text-left dark-theme:bg-surface-800"
+      >
+        <h3 class="mb-2 text-sm font-semibold text-text-primary">
+          {{ $t('cloudOnboarding.authTimeout.troubleshooting') }}
+        </h3>
+        <ul class="space-y-1.5 text-sm text-muted">
+          <li
+            v-for="(cause, index) in $tm('cloudOnboarding.authTimeout.causes')"
+            :key="index"
+            class="flex gap-2"
+          >
+            <span>•</span>
+            <span>{{ cause }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Technical Details (Collapsible) -->
+      <div v-if="errorMessage" class="mb-4 text-left">
+        <button
+          class="flex w-full items-center justify-between rounded bg-surface-600 px-4 py-2 text-sm text-muted transition-colors hover:bg-surface-500 dark-theme:bg-surface-700 dark-theme:hover:bg-surface-600"
+          @click="showTechnicalDetails = !showTechnicalDetails"
+        >
+          <span>{{ $t('cloudOnboarding.authTimeout.technicalDetails') }}</span>
+          <i
+            :class="[
+              'pi',
+              showTechnicalDetails ? 'pi-chevron-up' : 'pi-chevron-down'
+            ]"
+          ></i>
+        </button>
+        <div
+          v-if="showTechnicalDetails"
+          class="mt-2 rounded bg-surface-800 p-4 font-mono text-xs text-muted break-all dark-theme:bg-surface-900"
+        >
+          {{ errorMessage }}
+        </div>
+      </div>
+
+      <!-- Helpful Links -->
+      <p class="mb-5 text-center text-sm text-gray-600">
+        {{ $t('cloudOnboarding.authTimeout.helpText') }}
+        <a
+          href="https://support.comfy.org"
+          class="cursor-pointer text-blue-400 no-underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ $t('cloudOnboarding.authTimeout.supportLink') }}</a
+        >.
+      </p>
+
+      <div class="flex flex-col gap-3">
+        <Button
+          :label="$t('cloudOnboarding.authTimeout.restart')"
+          class="w-full"
+          @click="handleRestart"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+
+interface Props {
+  errorMessage?: string
+}
+
+defineProps<Props>()
+
+const router = useRouter()
+const { logout } = useFirebaseAuthActions()
+const showTechnicalDetails = ref(false)
+
+const handleRestart = async () => {
+  await logout()
+  await router.replace({ name: 'cloud-login' })
+}
+</script>
diff --git a/src/platform/cloud/onboarding/CloudForgotPasswordView.vue b/src/platform/cloud/onboarding/CloudForgotPasswordView.vue
new file mode 100644
index 000000000..411d086fb
--- /dev/null
+++ b/src/platform/cloud/onboarding/CloudForgotPasswordView.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="flex h-full items-center justify-center p-8">
+    <div class="max-w-[100vw] p-2 lg:w-96">
+      <!-- Header -->
+      <div class="mb-8 flex flex-col gap-4">
+        <h1 class="my-0 text-xl leading-normal font-medium">
+          {{ t('cloudForgotPassword_title') }}
+        </h1>
+        <p class="my-0 text-base text-muted">
+          {{ t('cloudForgotPassword_instructions') }}
+        </p>
+      </div>
+
+      <!-- Form -->
+      <form class="flex flex-col gap-6" @submit.prevent="handleSubmit">
+        <div class="flex flex-col gap-2">
+          <label
+            class="mb-2 text-base font-medium opacity-80"
+            for="reset-email"
+          >
+            {{ t('cloudForgotPassword_emailLabel') }}
+          </label>
+          <InputText
+            id="reset-email"
+            v-model="email"
+            type="email"
+            :placeholder="t('cloudForgotPassword_emailPlaceholder')"
+            class="h-10"
+            :invalid="!!errorMessage && !email"
+            autocomplete="email"
+            required
+          />
+          <small v-if="errorMessage" class="text-red-500">
+            {{ errorMessage }}
+          </small>
+        </div>
+
+        <Message v-if="successMessage" severity="success">
+          {{ successMessage }}
+        </Message>
+
+        <div class="flex flex-col gap-4">
+          <Button
+            type="submit"
+            :label="t('cloudForgotPassword_sendResetLink')"
+            :loading="loading"
+            :disabled="!email || loading"
+            class="h-10 font-medium text-white"
+          />
+
+          <Button
+            type="button"
+            :label="t('cloudForgotPassword_backToLogin')"
+            severity="secondary"
+            class="h-10 bg-[#2d2e32]"
+            @click="navigateToLogin"
+          />
+        </div>
+      </form>
+
+      <!-- Help text -->
+      <p class="mt-5 text-sm text-gray-600">
+        {{ t('cloudForgotPassword_didntReceiveEmail') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+
+const { t } = useI18n()
+const router = useRouter()
+const authActions = useFirebaseAuthActions()
+
+const email = ref('')
+const loading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const navigateToLogin = () => {
+  void router.push({ name: 'cloud-login' })
+}
+
+const handleSubmit = async () => {
+  if (!email.value) {
+    errorMessage.value = t('cloudForgotPassword_emailRequired')
+    return
+  }
+
+  loading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    // sendPasswordReset is already wrapped and returns a promise
+    await authActions.sendPasswordReset(email.value)
+
+    successMessage.value = t('cloudForgotPassword_passwordResetSent')
+
+    // Optionally redirect to login after a delay
+    setTimeout(() => {
+      navigateToLogin()
+    }, 3000)
+  } catch (error) {
+    console.error('Password reset error:', error)
+    errorMessage.value = t('cloudForgotPassword_passwordResetError')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+<style scoped>
+:deep(.p-inputtext) {
+  border: none !important;
+  box-shadow: none !important;
+  background: #2d2e32 !important;
+}
+</style>
diff --git a/src/platform/cloud/onboarding/CloudLoginView.vue b/src/platform/cloud/onboarding/CloudLoginView.vue
new file mode 100644
index 000000000..64e50a3c9
--- /dev/null
+++ b/src/platform/cloud/onboarding/CloudLoginView.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="flex h-full items-center justify-center p-8">
+    <div class="max-w-screen p-2 lg:w-96">
+      <!-- Header -->
+      <div class="mt-6 mb-8 flex flex-col gap-4">
+        <h1 class="my-0 text-xl leading-normal font-medium">
+          {{ t('auth.login.title') }}
+        </h1>
+        <p class="my-0 text-base">
+          <span class="text-muted">{{ t('auth.login.newUser') }}</span>
+          <span
+            class="ml-1 cursor-pointer text-blue-500"
+            @click="navigateToSignup"
+            >{{ t('auth.login.signUp') }}</span
+          >
+        </p>
+      </div>
+
+      <Message v-if="!isSecureContext" severity="warn" class="mb-4">
+        {{ t('auth.login.insecureContextWarning') }}
+      </Message>
+
+      <!-- Form -->
+      <CloudSignInForm :auth-error="authError" @submit="signInWithEmail" />
+
+      <!-- Divider -->
+      <Divider align="center" layout="horizontal" class="my-8">
+        <span class="text-muted">{{ t('auth.login.orContinueWith') }}</span>
+      </Divider>
+
+      <!-- Social Login Buttons -->
+      <div class="flex flex-col gap-6">
+        <Button
+          type="button"
+          class="h-10 bg-[#2d2e32]"
+          severity="secondary"
+          @click="signInWithGoogle"
+        >
+          <i class="pi pi-google mr-2"></i>
+          {{ t('auth.login.loginWithGoogle') }}
+        </Button>
+
+        <Button
+          type="button"
+          class="h-10 bg-[#2d2e32]"
+          severity="secondary"
+          @click="signInWithGithub"
+        >
+          <i class="pi pi-github mr-2"></i>
+          {{ t('auth.login.loginWithGithub') }}
+        </Button>
+      </div>
+
+      <!-- Terms & Contact -->
+      <p class="mt-5 text-sm text-gray-600">
+        {{ t('auth.login.termsText') }}
+        <a
+          href="https://www.comfy.org/terms-of-service"
+          target="_blank"
+          class="cursor-pointer text-blue-400 no-underline"
+        >
+          {{ t('auth.login.termsLink') }}
+        </a>
+        {{ t('auth.login.andText') }}
+        <a
+          href="https://www.comfy.org/privacy-policy"
+          target="_blank"
+          class="cursor-pointer text-blue-400 no-underline"
+        >
+          {{ t('auth.login.privacyLink') }} </a
+        >.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Message from 'primevue/message'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import CloudSignInForm from '@/platform/cloud/onboarding/components/CloudSignInForm.vue'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import type { SignInData } from '@/schemas/signInSchema'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const authActions = useFirebaseAuthActions()
+const isSecureContext = window.isSecureContext
+const authError = ref('')
+const toastStore = useToastStore()
+
+const navigateToSignup = () => {
+  void router.push({ name: 'cloud-signup', query: route.query })
+}
+
+const onSuccess = async () => {
+  toastStore.add({
+    severity: 'success',
+    summary: 'Login Completed',
+    life: 2000
+  })
+  await router.push({ name: 'cloud-user-check' })
+}
+
+const signInWithGoogle = async () => {
+  authError.value = ''
+  if (await authActions.signInWithGoogle()) {
+    await onSuccess()
+  }
+}
+
+const signInWithGithub = async () => {
+  authError.value = ''
+  if (await authActions.signInWithGithub()) {
+    await onSuccess()
+  }
+}
+
+const signInWithEmail = async (values: SignInData) => {
+  authError.value = ''
+  if (await authActions.signInWithEmail(values.email, values.password)) {
+    await onSuccess()
+  }
+}
+</script>
diff --git a/src/platform/cloud/onboarding/CloudSignupView.vue b/src/platform/cloud/onboarding/CloudSignupView.vue
new file mode 100644
index 000000000..bcd49a388
--- /dev/null
+++ b/src/platform/cloud/onboarding/CloudSignupView.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="flex h-full items-center justify-center p-8">
+    <div class="max-w-screen p-2 lg:w-96">
+      <!-- Header -->
+      <div class="mb-8 flex flex-col gap-4">
+        <h1 class="my-0 text-xl leading-normal font-medium">
+          {{ t('auth.signup.title') }}
+        </h1>
+        <p class="my-0 text-base">
+          <span class="text-muted">{{
+            t('auth.signup.alreadyHaveAccount')
+          }}</span>
+          <span
+            class="ml-1 cursor-pointer text-blue-500"
+            @click="navigateToLogin"
+            >{{ t('auth.signup.signIn') }}</span
+          >
+        </p>
+      </div>
+
+      <Message v-if="!isSecureContext" severity="warn" class="mb-4">
+        {{ t('auth.login.insecureContextWarning') }}
+      </Message>
+
+      <!-- Form -->
+      <Message v-if="userIsInChina" severity="warn" class="mb-4">
+        {{ t('auth.signup.regionRestrictionChina') }}
+      </Message>
+      <SignUpForm v-else :auth-error="authError" @submit="signUpWithEmail" />
+
+      <!-- Divider -->
+      <Divider align="center" layout="horizontal" class="my-8">
+        <span class="text-muted">{{ t('auth.login.orContinueWith') }}</span>
+      </Divider>
+
+      <!-- Social Login Buttons -->
+      <div class="flex flex-col gap-6">
+        <Button
+          type="button"
+          class="h-10 bg-[#2d2e32]"
+          severity="secondary"
+          @click="signInWithGoogle"
+        >
+          <i class="pi pi-google mr-2"></i>
+          {{ t('auth.signup.signUpWithGoogle') }}
+        </Button>
+
+        <Button
+          type="button"
+          class="h-10 bg-[#2d2e32]"
+          severity="secondary"
+          @click="signInWithGithub"
+        >
+          <i class="pi pi-github mr-2"></i>
+          {{ t('auth.signup.signUpWithGithub') }}
+        </Button>
+      </div>
+
+      <!-- Terms & Contact -->
+      <div class="mt-5 text-sm text-gray-600">
+        {{ t('auth.login.termsText') }}
+        <a
+          href="https://www.comfy.org/terms-of-service"
+          target="_blank"
+          class="cursor-pointer text-blue-400 no-underline"
+        >
+          {{ t('auth.login.termsLink') }}
+        </a>
+        {{ t('auth.login.andText') }}
+        <a
+          href="/privacy-policy"
+          target="_blank"
+          class="cursor-pointer text-blue-400 no-underline"
+        >
+          {{ t('auth.login.privacyLink') }} </a
+        >.
+        <p class="mt-2">
+          {{ t('cloudWaitlist_questionsText') }}
+          <a
+            href="https://support.comfy.org"
+            class="cursor-pointer text-blue-400 no-underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ t('cloudWaitlist_contactLink') }}</a
+          >.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Message from 'primevue/message'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import SignUpForm from '@/components/dialog/content/signin/SignUpForm.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import type { SignUpData } from '@/schemas/signInSchema'
+import { isInChina } from '@/utils/networkUtil'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const authActions = useFirebaseAuthActions()
+const isSecureContext = window.isSecureContext
+const authError = ref('')
+const userIsInChina = ref(false)
+const toastStore = useToastStore()
+
+const navigateToLogin = () => {
+  void router.push({ name: 'cloud-login', query: route.query })
+}
+
+const onSuccess = async () => {
+  toastStore.add({
+    severity: 'success',
+    summary: 'Sign up Completed',
+    life: 2000
+  })
+  // Direct redirect to main app - email verification removed
+  await router.push({ path: '/', query: route.query })
+}
+
+const signInWithGoogle = async () => {
+  authError.value = ''
+  if (await authActions.signInWithGoogle()) {
+    await onSuccess()
+  }
+}
+
+const signInWithGithub = async () => {
+  authError.value = ''
+  if (await authActions.signInWithGithub()) {
+    await onSuccess()
+  }
+}
+
+const signUpWithEmail = async (values: SignUpData) => {
+  authError.value = ''
+  if (await authActions.signUpWithEmail(values.email, values.password)) {
+    await onSuccess()
+  }
+}
+
+onMounted(async () => {
+  // Track signup screen opened
+  if (isCloud) {
+    useTelemetry()?.trackSignupOpened()
+  }
+
+  userIsInChina.value = await isInChina()
+})
+</script>
+<style scoped>
+:deep(.p-inputtext) {
+  border: none !important;
+  box-shadow: none !important;
+  background: #2d2e32 !important;
+}
+
+:deep(.p-password input) {
+  border: none !important;
+  box-shadow: none !important;
+}
+:deep(.p-checkbox-checked .p-checkbox-box) {
+  background-color: #f0ff41 !important;
+  border-color: #f0ff41 !important;
+}
+</style>
diff --git a/src/platform/cloud/onboarding/CloudSorryContactSupportView.vue b/src/platform/cloud/onboarding/CloudSorryContactSupportView.vue
new file mode 100644
index 000000000..b3ceba97d
--- /dev/null
+++ b/src/platform/cloud/onboarding/CloudSorryContactSupportView.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="cloud-sorry-contact-support">
+    <h1>{{ t('cloudSorryContactSupport_title') }}</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.cloud-sorry-contact-support {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-family: monospace;
+  font-size: 1.5rem;
+}
+</style>
diff --git a/src/platform/cloud/onboarding/CloudSurveyView.vue b/src/platform/cloud/onboarding/CloudSurveyView.vue
new file mode 100644
index 000000000..45fc0680f
--- /dev/null
+++ b/src/platform/cloud/onboarding/CloudSurveyView.vue
@@ -0,0 +1,387 @@
+<template>
+  <div>
+    <Stepper
+      value="1"
+      class="flex h-[638px] max-h-[80vh] w-[320px] max-w-[90vw] flex-col"
+    >
+      <ProgressBar
+        :value="progressPercent"
+        :show-value="false"
+        class="mb-8 h-2"
+      />
+
+      <StepPanels class="flex flex-1 flex-col p-0">
+        <StepPanel
+          v-slot="{ activateCallback }"
+          value="1"
+          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
+        >
+          <div>
+            <label class="mb-8 block text-lg font-medium">{{
+              t('cloudSurvey_steps_familiarity')
+            }}</label>
+            <div class="flex flex-col gap-6">
+              <div
+                v-for="opt in familiarityOptions"
+                :key="opt.value"
+                class="flex items-center gap-3"
+              >
+                <RadioButton
+                  v-model="surveyData.familiarity"
+                  :input-id="`fam-${opt.value}`"
+                  name="familiarity"
+                  :value="opt.value"
+                />
+                <label
+                  :for="`fam-${opt.value}`"
+                  class="cursor-pointer text-sm"
+                  >{{ opt.label }}</label
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-between pt-4">
+            <span />
+            <Button
+              label="Next"
+              :disabled="!validStep1"
+              class="h-10 w-full border-none text-white"
+              @click="goTo(2, activateCallback)"
+            />
+          </div>
+        </StepPanel>
+
+        <StepPanel
+          v-slot="{ activateCallback }"
+          value="2"
+          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
+        >
+          <div>
+            <label class="mb-8 block text-lg font-medium">{{
+              t('cloudSurvey_steps_purpose')
+            }}</label>
+            <div class="flex flex-col gap-6">
+              <div
+                v-for="opt in purposeOptions"
+                :key="opt.value"
+                class="flex items-center gap-3"
+              >
+                <RadioButton
+                  v-model="surveyData.useCase"
+                  :input-id="`purpose-${opt.value}`"
+                  name="purpose"
+                  :value="opt.value"
+                />
+                <label
+                  :for="`purpose-${opt.value}`"
+                  class="cursor-pointer text-sm"
+                  >{{ opt.label }}</label
+                >
+              </div>
+            </div>
+            <div v-if="surveyData.useCase === 'other'" class="mt-4 ml-8">
+              <InputText
+                v-model="surveyData.useCaseOther"
+                class="w-full"
+                placeholder="Please specify"
+              />
+            </div>
+          </div>
+
+          <div class="flex gap-6 pt-4">
+            <Button
+              label="Back"
+              severity="secondary"
+              class="flex-1 text-white"
+              @click="goTo(1, activateCallback)"
+            />
+            <Button
+              label="Next"
+              :disabled="!validStep2"
+              class="h-10 flex-1 text-white"
+              @click="goTo(3, activateCallback)"
+            />
+          </div>
+        </StepPanel>
+
+        <StepPanel
+          v-slot="{ activateCallback }"
+          value="3"
+          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
+        >
+          <div>
+            <label class="mb-8 block text-lg font-medium">{{
+              t('cloudSurvey_steps_industry')
+            }}</label>
+            <div class="flex flex-col gap-6">
+              <div
+                v-for="opt in industryOptions"
+                :key="opt.value"
+                class="flex items-center gap-3"
+              >
+                <RadioButton
+                  v-model="surveyData.industry"
+                  :input-id="`industry-${opt.value}`"
+                  name="industry"
+                  :value="opt.value"
+                />
+                <label
+                  :for="`industry-${opt.value}`"
+                  class="cursor-pointer text-sm"
+                  >{{ opt.label }}</label
+                >
+              </div>
+            </div>
+            <div v-if="surveyData.industry === 'other'" class="mt-4 ml-8">
+              <InputText
+                v-model="surveyData.industryOther"
+                class="w-full"
+                placeholder="Please specify"
+              />
+            </div>
+          </div>
+
+          <div class="flex gap-6 pt-4">
+            <Button
+              label="Back"
+              severity="secondary"
+              class="flex-1 text-white"
+              @click="goTo(2, activateCallback)"
+            />
+            <Button
+              label="Next"
+              :disabled="!validStep3"
+              class="h-10 flex-1 border-none text-white"
+              @click="goTo(4, activateCallback)"
+            />
+          </div>
+        </StepPanel>
+
+        <StepPanel
+          v-slot="{ activateCallback }"
+          value="4"
+          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
+        >
+          <div>
+            <label class="mb-8 block text-lg font-medium">{{
+              t('cloudSurvey_steps_making')
+            }}</label>
+            <div class="flex flex-col gap-6">
+              <div
+                v-for="opt in makingOptions"
+                :key="opt.value"
+                class="flex items-center gap-3"
+              >
+                <Checkbox
+                  v-model="surveyData.making"
+                  :input-id="`making-${opt.value}`"
+                  :value="opt.value"
+                />
+                <label
+                  :for="`making-${opt.value}`"
+                  class="cursor-pointer text-sm"
+                  >{{ opt.label }}</label
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="flex gap-6 pt-4">
+            <Button
+              label="Back"
+              severity="secondary"
+              class="flex-1 text-white"
+              @click="goTo(3, activateCallback)"
+            />
+            <Button
+              label="Submit"
+              :disabled="!validStep4 || isSubmitting"
+              :loading="isSubmitting"
+              class="h-10 flex-1 border-none text-white"
+              @click="onSubmitSurvey"
+            />
+          </div>
+        </StepPanel>
+      </StepPanels>
+    </Stepper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+import InputText from 'primevue/inputtext'
+import ProgressBar from 'primevue/progressbar'
+import RadioButton from 'primevue/radiobutton'
+import StepPanel from 'primevue/steppanel'
+import StepPanels from 'primevue/steppanels'
+import Stepper from 'primevue/stepper'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import {
+  getSurveyCompletedStatus,
+  submitSurvey
+} from '@/platform/cloud/onboarding/auth'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+
+const { t } = useI18n()
+const router = useRouter()
+
+// Check if survey is already completed on mount
+onMounted(async () => {
+  try {
+    const surveyCompleted = await getSurveyCompletedStatus()
+    if (surveyCompleted) {
+      // User already completed survey, redirect to waitlist
+      await router.replace({ name: 'cloud-waitlist' })
+    } else {
+      // Track survey opened event
+      if (isCloud) {
+        useTelemetry()?.trackSurvey('opened')
+      }
+    }
+  } catch (error) {
+    console.error('Failed to check survey status:', error)
+  }
+})
+
+const activeStep = ref(1)
+const totalSteps = 4
+const progressPercent = computed(() =>
+  Math.max(20, Math.min(100, ((activeStep.value - 1) / (totalSteps - 1)) * 100))
+)
+
+const isSubmitting = ref(false)
+
+const surveyData = ref({
+  familiarity: '',
+  useCase: '',
+  useCaseOther: '',
+  industry: '',
+  industryOther: '',
+  making: [] as string[]
+})
+
+// Options
+const familiarityOptions = [
+  { label: 'New to ComfyUI (never used it before)', value: 'new' },
+  { label: 'Just getting started (following tutorials)', value: 'starting' },
+  { label: 'Comfortable with basics', value: 'basics' },
+  { label: 'Advanced user (custom workflows)', value: 'advanced' },
+  { label: 'Expert (help others)', value: 'expert' }
+]
+
+const purposeOptions = [
+  { label: 'Personal projects/hobby', value: 'personal' },
+  {
+    label: 'Community contributions (nodes, workflows, etc.)',
+    value: 'community'
+  },
+  { label: 'Client work (freelance)', value: 'client' },
+  { label: 'My own workplace (in-house)', value: 'inhouse' },
+  { label: 'Academic research', value: 'research' },
+  { label: 'Other', value: 'other' }
+]
+
+const industryOptions = [
+  { label: 'Film, TV, & animation', value: 'film_tv_animation' },
+  { label: 'Gaming', value: 'gaming' },
+  { label: 'Marketing & advertising', value: 'marketing' },
+  { label: 'Architecture', value: 'architecture' },
+  { label: 'Product & graphic design', value: 'product_design' },
+  { label: 'Fine art & illustration', value: 'fine_art' },
+  { label: 'Software & technology', value: 'software' },
+  { label: 'Education', value: 'education' },
+  { label: 'Other', value: 'other' }
+]
+
+const makingOptions = [
+  { label: 'Images', value: 'images' },
+  { label: 'Video & animation', value: 'video' },
+  { label: '3D assets', value: '3d' },
+  { label: 'Audio/music', value: 'audio' },
+  { label: 'Custom nodes & workflows', value: 'custom_nodes' }
+]
+
+// Validation per step
+const validStep1 = computed(() => !!surveyData.value.familiarity)
+const validStep2 = computed(() => {
+  if (!surveyData.value.useCase) return false
+  if (surveyData.value.useCase === 'other') {
+    return !!surveyData.value.useCaseOther?.trim()
+  }
+  return true
+})
+const validStep3 = computed(() => {
+  if (!surveyData.value.industry) return false
+  if (surveyData.value.industry === 'other') {
+    return !!surveyData.value.industryOther?.trim()
+  }
+  return true
+})
+const validStep4 = computed(() => surveyData.value.making.length > 0)
+
+const changeActiveStep = (step: number) => {
+  activeStep.value = step
+}
+
+const goTo = (step: number, activate: (val: string | number) => void) => {
+  // keep Stepper panel and progress bar in sync; Stepper values are strings
+  changeActiveStep(step)
+  activate(String(step))
+}
+
+// Submit
+const onSubmitSurvey = async () => {
+  try {
+    isSubmitting.value = true
+    // prepare payload with consistent structure
+    const payload = {
+      familiarity: surveyData.value.familiarity,
+      useCase:
+        surveyData.value.useCase === 'other'
+          ? surveyData.value.useCaseOther?.trim() || 'other'
+          : surveyData.value.useCase,
+      industry:
+        surveyData.value.industry === 'other'
+          ? surveyData.value.industryOther?.trim() || 'other'
+          : surveyData.value.industry,
+      making: surveyData.value.making
+    }
+
+    await submitSurvey(payload)
+
+    // Track survey submitted event with responses
+    if (isCloud) {
+      useTelemetry()?.trackSurvey('submitted', {
+        industry: payload.industry,
+        useCase: payload.useCase,
+        familiarity: payload.familiarity,
+        making: payload.making
+      })
+    }
+
+    await router.push({ name: 'cloud-user-check' })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+:deep(.p-progressbar .p-progressbar-value) {
+  background-color: #f0ff41 !important;
+}
+:deep(.p-radiobutton-checked .p-radiobutton-box) {
+  background-color: #f0ff41 !important;
+  border-color: #f0ff41 !important;
+}
+:deep(.p-checkbox-checked .p-checkbox-box) {
+  background-color: #f0ff41 !important;
+  border-color: #f0ff41 !important;
+}
+</style>
diff --git a/src/platform/cloud/onboarding/UserCheckView.vue b/src/platform/cloud/onboarding/UserCheckView.vue
new file mode 100644
index 000000000..126032728
--- /dev/null
+++ b/src/platform/cloud/onboarding/UserCheckView.vue
@@ -0,0 +1,102 @@
+<template>
+  <CloudLoginViewSkeleton v-if="skeletonType === 'login'" />
+  <CloudSurveyViewSkeleton v-else-if="skeletonType === 'survey'" />
+  <CloudWaitlistViewSkeleton v-else-if="skeletonType === 'waitlist'" />
+  <div v-else-if="error" class="flex h-full items-center justify-center p-8">
+    <div class="max-w-[100vw] p-2 text-center lg:w-96">
+      <p class="mb-4 text-red-500">{{ errorMessage }}</p>
+      <Button
+        :label="
+          isRetrying
+            ? $t('cloudOnboarding.retrying')
+            : $t('cloudOnboarding.retry')
+        "
+        :loading="isRetrying"
+        class="w-full"
+        @click="handleRetry"
+      />
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-center">
+    <ProgressSpinner class="h-8 w-8" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAsyncState } from '@vueuse/core'
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import {
+  getSurveyCompletedStatus,
+  getUserCloudStatus
+} from '@/platform/cloud/onboarding/auth'
+
+import CloudLoginViewSkeleton from './skeletons/CloudLoginViewSkeleton.vue'
+import CloudSurveyViewSkeleton from './skeletons/CloudSurveyViewSkeleton.vue'
+
+const router = useRouter()
+const { wrapWithErrorHandlingAsync } = useErrorHandling()
+
+const skeletonType = ref<'login' | 'survey' | 'waitlist' | 'loading'>('loading')
+
+const {
+  isLoading,
+  error,
+  execute: checkUserStatus
+} = useAsyncState(
+  wrapWithErrorHandlingAsync(async () => {
+    await nextTick()
+
+    const [cloudUserStats, surveyStatus] = await Promise.all([
+      getUserCloudStatus(),
+      getSurveyCompletedStatus()
+    ])
+
+    // Navigate based on user status
+    if (!cloudUserStats) {
+      skeletonType.value = 'login'
+      await router.replace({ name: 'cloud-login' })
+      return
+    }
+
+    // Survey is required for all users
+    if (!surveyStatus) {
+      skeletonType.value = 'survey'
+      await router.replace({ name: 'cloud-survey' })
+      return
+    }
+
+    // User is fully onboarded (active or whitelist check disabled)
+    window.location.href = '/'
+  }),
+  null,
+  { resetOnExecute: false }
+)
+
+const errorMessage = computed(() => {
+  if (!error.value) return ''
+
+  // Provide user-friendly error messages
+  const errorStr = error.value.toString().toLowerCase()
+
+  if (errorStr.includes('network') || errorStr.includes('fetch')) {
+    return 'Connection problem. Please check your internet connection.'
+  }
+
+  if (errorStr.includes('timeout')) {
+    return 'Request timed out. Please try again.'
+  }
+
+  return 'Unable to check account status. Please try again.'
+})
+
+const isRetrying = computed(() => isLoading.value && !!error.value)
+
+const handleRetry = async () => {
+  await checkUserStatus()
+}
+</script>
diff --git a/src/platform/cloud/onboarding/assets/css/fonts.css b/src/platform/cloud/onboarding/assets/css/fonts.css
new file mode 100644
index 000000000..a3464f5f2
--- /dev/null
+++ b/src/platform/cloud/onboarding/assets/css/fonts.css
@@ -0,0 +1,33 @@
+/* ABC ROM Extended — full face mapping */
+@font-face {
+  font-family: 'ABC ROM Extended';
+  src:
+    local('ABC ROM Extended Black Italic'),
+    local('ABCRom BlackItalic'),
+    url('../fonts/ABCROMExtended-BlackItalic.woff2') format('woff2'),
+    url('../fonts/ABCROMExtended-BlackItalic.woff') format('woff');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Prevent browser from synthesizing fake bold/italic which can cause mismatches */
+.hero-title,
+.font-abcrom {
+  font-family: 'ABC ROM Extended', sans-serif;
+  font-synthesis: none; /* no faux bold/italic */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Figma-like hero style */
+.hero-title {
+  font-size: 32px;
+  font-weight: 900;
+  font-style: italic;
+  text-transform: uppercase;
+  text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
+  /* Figma has leading-trim/text-edge which CSS doesn't support; emulate with tight line-height */
+  line-height: 1.1;
+}
\ No newline at end of file
diff --git a/src/platform/cloud/onboarding/assets/fonts/ABCROMExtended-BlackItalic.woff b/src/platform/cloud/onboarding/assets/fonts/ABCROMExtended-BlackItalic.woff
new file mode 100644
index 000000000..5d14e46a7
Binary files /dev/null and b/src/platform/cloud/onboarding/assets/fonts/ABCROMExtended-BlackItalic.woff differ
diff --git a/src/platform/cloud/onboarding/assets/fonts/ABCROMExtended-BlackItalic.woff2 b/src/platform/cloud/onboarding/assets/fonts/ABCROMExtended-BlackItalic.woff2
new file mode 100644
index 000000000..1e8bb595f
Binary files /dev/null and b/src/platform/cloud/onboarding/assets/fonts/ABCROMExtended-BlackItalic.woff2 differ
diff --git a/src/platform/cloud/onboarding/assets/videos/thumbnail.png b/src/platform/cloud/onboarding/assets/videos/thumbnail.png
new file mode 100644
index 000000000..e5266b6a6
Binary files /dev/null and b/src/platform/cloud/onboarding/assets/videos/thumbnail.png differ
diff --git a/src/platform/cloud/onboarding/assets/videos/video.mp4 b/src/platform/cloud/onboarding/assets/videos/video.mp4
new file mode 100644
index 000000000..b179abb18
Binary files /dev/null and b/src/platform/cloud/onboarding/assets/videos/video.mp4 differ
diff --git a/src/platform/cloud/onboarding/auth.ts b/src/platform/cloud/onboarding/auth.ts
new file mode 100644
index 000000000..75d183dc6
--- /dev/null
+++ b/src/platform/cloud/onboarding/auth.ts
@@ -0,0 +1,235 @@
+import * as Sentry from '@sentry/vue'
+import { isEmpty } from 'es-toolkit/compat'
+
+import { api } from '@/scripts/api'
+
+interface UserCloudStatus {
+  status: 'active'
+}
+
+const ONBOARDING_SURVEY_KEY = 'onboarding_survey'
+
+/**
+ * Helper function to capture API errors with Sentry
+ */
+function captureApiError(
+  error: Error,
+  endpoint: string,
+  errorType: 'http_error' | 'network_error',
+  httpStatus?: number,
+  operation?: string,
+  extraContext?: Record<string, any>
+) {
+  const tags: Record<string, any> = {
+    api_endpoint: endpoint,
+    error_type: errorType
+  }
+
+  if (httpStatus !== undefined) {
+    tags.http_status = httpStatus
+  }
+
+  if (operation) {
+    tags.operation = operation
+  }
+
+  const sentryOptions: any = {
+    tags,
+    extra: extraContext ? { ...extraContext } : undefined
+  }
+
+  Sentry.captureException(error, sentryOptions)
+}
+
+/**
+ * Helper function to check if error is already handled HTTP error
+ */
+function isHttpError(error: unknown, errorMessagePrefix: string): boolean {
+  return error instanceof Error && error.message.startsWith(errorMessagePrefix)
+}
+
+export async function getUserCloudStatus(): Promise<UserCloudStatus> {
+  try {
+    const response = await api.fetchApi('/user', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    if (!response.ok) {
+      const error = new Error(`Failed to get user: ${response.statusText}`)
+      captureApiError(
+        error,
+        '/user',
+        'http_error',
+        response.status,
+        undefined,
+        {
+          api: {
+            method: 'GET',
+            endpoint: '/user',
+            status_code: response.status,
+            status_text: response.statusText
+          }
+        }
+      )
+      throw error
+    }
+
+    return response.json()
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to get user:')) {
+      captureApiError(error as Error, '/user', 'network_error')
+    }
+    throw error
+  }
+}
+
+export async function getSurveyCompletedStatus(): Promise<boolean> {
+  try {
+    const response = await api.fetchApi(`/settings/${ONBOARDING_SURVEY_KEY}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    if (!response.ok) {
+      // Not an error case - survey not completed is a valid state
+      Sentry.addBreadcrumb({
+        category: 'auth',
+        message: 'Survey status check returned non-ok response',
+        level: 'info',
+        data: {
+          status: response.status,
+          endpoint: `/settings/${ONBOARDING_SURVEY_KEY}`
+        }
+      })
+      return false
+    }
+    const data = await response.json()
+    // Check if data exists and is not empty
+    return !isEmpty(data.value)
+  } catch (error) {
+    // Network error - still capture it as it's not thrown from above
+    Sentry.captureException(error, {
+      tags: {
+        api_endpoint: '/settings/{key}',
+        error_type: 'network_error'
+      },
+      extra: {
+        route_template: '/settings/{key}',
+        route_actual: `/settings/${ONBOARDING_SURVEY_KEY}`
+      },
+      level: 'warning'
+    })
+    return false
+  }
+}
+
+// @ts-expect-error - Unused function kept for future use
+async function postSurveyStatus(): Promise<void> {
+  try {
+    const response = await api.fetchApi(`/settings/${ONBOARDING_SURVEY_KEY}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ [ONBOARDING_SURVEY_KEY]: undefined })
+    })
+
+    if (!response.ok) {
+      const error = new Error(
+        `Failed to post survey status: ${response.statusText}`
+      )
+      captureApiError(
+        error,
+        '/settings/{key}',
+        'http_error',
+        response.status,
+        'post_survey_status',
+        {
+          route_template: '/settings/{key}',
+          route_actual: `/settings/${ONBOARDING_SURVEY_KEY}`
+        }
+      )
+      throw error
+    }
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to post survey status:')) {
+      captureApiError(
+        error as Error,
+        '/settings/{key}',
+        'network_error',
+        undefined,
+        'post_survey_status',
+        {
+          route_template: '/settings/{key}',
+          route_actual: `/settings/${ONBOARDING_SURVEY_KEY}`
+        }
+      )
+    }
+    throw error
+  }
+}
+
+export async function submitSurvey(
+  survey: Record<string, unknown>
+): Promise<void> {
+  try {
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Submitting survey',
+      level: 'info',
+      data: {
+        survey_fields: Object.keys(survey)
+      }
+    })
+
+    const response = await api.fetchApi('/settings', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ [ONBOARDING_SURVEY_KEY]: survey })
+    })
+
+    if (!response.ok) {
+      const error = new Error(`Failed to submit survey: ${response.statusText}`)
+      captureApiError(
+        error,
+        '/settings',
+        'http_error',
+        response.status,
+        'submit_survey',
+        {
+          survey: {
+            field_count: Object.keys(survey).length,
+            field_names: Object.keys(survey)
+          }
+        }
+      )
+      throw error
+    }
+
+    // Log successful survey submission
+    Sentry.addBreadcrumb({
+      category: 'auth',
+      message: 'Survey submitted successfully',
+      level: 'info'
+    })
+  } catch (error) {
+    // Only capture network errors (not HTTP errors we already captured)
+    if (!isHttpError(error, 'Failed to submit survey:')) {
+      captureApiError(
+        error as Error,
+        '/settings',
+        'network_error',
+        undefined,
+        'submit_survey'
+      )
+    }
+    throw error
+  }
+}
diff --git a/src/platform/cloud/onboarding/components/CloudLayoutView.vue b/src/platform/cloud/onboarding/components/CloudLayoutView.vue
new file mode 100644
index 000000000..fde68f7da
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudLayoutView.vue
@@ -0,0 +1,16 @@
+<template>
+  <CloudTemplate>
+    <!-- This will render the nested route components -->
+    <RouterView />
+  </CloudTemplate>
+  <!-- Global Toast for displaying notifications -->
+  <GlobalToast />
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+
+import GlobalToast from '@/components/toast/GlobalToast.vue'
+
+import CloudTemplate from './CloudTemplate.vue'
+</script>
diff --git a/src/platform/cloud/onboarding/components/CloudLogo.vue b/src/platform/cloud/onboarding/components/CloudLogo.vue
new file mode 100644
index 000000000..c3cf3fbe7
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudLogo.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="mx-auto flex h-[7%] max-h-[70px] w-5/6 items-end">
+    <img
+      src="/assets/images/comfy-cloud-logo.svg"
+      alt="Comfy Cloud Logo"
+      class="h-3/4 max-h-10 w-auto"
+    />
+  </div>
+</template>
diff --git a/src/platform/cloud/onboarding/components/CloudSignInForm.vue b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
new file mode 100644
index 000000000..a7c85971d
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
@@ -0,0 +1,128 @@
+<template>
+  <Form
+    v-slot="$form"
+    class="flex flex-col gap-6"
+    :resolver="zodResolver(signInSchema)"
+    @submit="onSubmit"
+  >
+    <!-- Email Field -->
+    <div class="flex flex-col gap-2">
+      <label class="mb-2 text-base font-medium opacity-80" :for="emailInputId">
+        {{ t('auth.login.emailLabel') }}
+      </label>
+      <InputText
+        :id="emailInputId"
+        autocomplete="email"
+        class="h-10"
+        name="email"
+        type="text"
+        :placeholder="t('auth.login.emailPlaceholder')"
+        :invalid="$form.email?.invalid"
+      />
+      <small v-if="$form.email?.invalid" class="text-red-500">{{
+        $form.email.error.message
+      }}</small>
+    </div>
+
+    <!-- Password Field -->
+    <div class="flex flex-col gap-2">
+      <div class="mb-2 flex items-center justify-between">
+        <label
+          class="text-base font-medium opacity-80"
+          for="cloud-sign-in-password"
+        >
+          {{ t('auth.login.passwordLabel') }}
+        </label>
+      </div>
+      <Password
+        input-id="cloud-sign-in-password"
+        pt:pc-input-text:root:autocomplete="current-password"
+        name="password"
+        :feedback="false"
+        toggle-mask
+        :placeholder="t('auth.login.passwordPlaceholder')"
+        :class="{ 'p-invalid': $form.password?.invalid }"
+        fluid
+        class="h-10"
+      />
+      <small v-if="$form.password?.invalid" class="text-red-500">{{
+        $form.password.error.message
+      }}</small>
+
+      <router-link
+        :to="{ name: 'cloud-forgot-password' }"
+        class="text-sm font-medium text-muted no-underline"
+      >
+        {{ t('auth.login.forgotPassword') }}
+      </router-link>
+    </div>
+
+    <!-- Auth Error Message -->
+    <Message v-if="authError" severity="error">
+      {{ authError }}
+    </Message>
+
+    <!-- Submit Button -->
+    <ProgressSpinner v-if="loading" class="h-8 w-8" />
+    <Button
+      v-else
+      type="submit"
+      :label="t('auth.login.loginButton')"
+      class="mt-4 h-10 font-medium text-white"
+    />
+  </Form>
+</template>
+
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
+import { zodResolver } from '@primevue/forms/resolvers/zod'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
+import Password from 'primevue/password'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { signInSchema } from '@/schemas/signInSchema'
+import type { SignInData } from '@/schemas/signInSchema'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const authStore = useFirebaseAuthStore()
+const loading = computed(() => authStore.loading)
+
+const { t } = useI18n()
+
+defineProps<{
+  authError?: string
+}>()
+
+const emit = defineEmits<{
+  submit: [values: SignInData]
+}>()
+
+const emailInputId = 'cloud-sign-in-email'
+
+const onSubmit = (event: FormSubmitEvent) => {
+  if (event.valid) {
+    emit('submit', event.values as SignInData)
+  }
+}
+</script>
+<style scoped>
+:deep(.p-inputtext) {
+  border: none !important;
+  box-shadow: none !important;
+  background: #2d2e32 !important;
+}
+
+:deep(.p-password input) {
+  border: none !important;
+  box-shadow: none !important;
+}
+:deep(.p-checkbox-checked .p-checkbox-box) {
+  background-color: #f0ff41 !important;
+  border-color: #f0ff41 !important;
+}
+</style>
diff --git a/src/platform/cloud/onboarding/components/CloudTemplate.vue b/src/platform/cloud/onboarding/components/CloudTemplate.vue
new file mode 100644
index 000000000..9185725f0
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudTemplate.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="flex">
+    <BaseViewTemplate dark class="flex-1">
+      <template #header>
+        <CloudLogo />
+      </template>
+      <slot />
+      <template #footer>
+        <CloudTemplateFooter />
+      </template>
+    </BaseViewTemplate>
+    <div class="relative hidden flex-1 overflow-hidden bg-black lg:block">
+      <!-- Video Background -->
+      <video
+        class="absolute inset-0 h-full w-full object-cover"
+        autoplay
+        muted
+        loop
+        playsinline
+        :poster="videoPoster"
+      >
+        <source :src="videoSrc" type="video/mp4" />
+      </video>
+
+      <div class="absolute inset-0 h-full w-full bg-black/30"></div>
+
+      <!-- Optional Overlay for better visual -->
+      <div
+        class="absolute inset-0 flex items-center justify-center text-center text-white"
+      >
+        <div>
+          <h1 class="font-abcrom hero-title font-black uppercase italic">
+            {{ t('cloudStart_title') }}
+          </h1>
+          <p class="m-2 text-center text-xl text-white">
+            {{ t('cloudStart_desc') }}
+          </p>
+          <p class="m-0 text-center text-xl text-white">
+            {{ t('cloudStart_explain') }}
+          </p>
+        </div>
+      </div>
+      <div class="absolute inset-0 flex flex-col justify-end px-14 pb-[64px]">
+        <div class="flex items-center justify-end">
+          <div class="flex items-center gap-3">
+            <p class="text-md text-white">
+              {{ t('cloudStart_wantToRun') }}
+            </p>
+            <Button
+              type="button"
+              class="h-10 bg-black font-bold text-white"
+              severity="secondary"
+              @click="handleDownloadClick"
+            >
+              {{ t('cloudStart_download') }}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { t } from '@/i18n'
+import videoPoster from '@/platform/cloud/onboarding/assets/videos/thumbnail.png'
+import videoSrc from '@/platform/cloud/onboarding/assets/videos/video.mp4'
+import CloudLogo from '@/platform/cloud/onboarding/components/CloudLogo.vue'
+import CloudTemplateFooter from '@/platform/cloud/onboarding/components/CloudTemplateFooter.vue'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const handleDownloadClick = () => {
+  window.open('https://www.comfy.org/download', '_blank')
+}
+</script>
+<style>
+@import '../assets/css/fonts.css';
+</style>
diff --git a/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue b/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue
new file mode 100644
index 000000000..38c3b7722
--- /dev/null
+++ b/src/platform/cloud/onboarding/components/CloudTemplateFooter.vue
@@ -0,0 +1,32 @@
+<template>
+  <footer class="mx-auto flex h-[5%] max-h-[60px] w-5/6 items-start gap-2.5">
+    <a
+      href="https://www.comfy.org/terms-of-service"
+      target="_blank"
+      class="cursor-pointer text-sm text-gray-600 no-underline"
+    >
+      {{ t('auth.login.termsLink') }}
+    </a>
+    <a
+      href="https://www.comfy.org/privacy-policy"
+      target="_blank"
+      class="cursor-pointer text-sm text-gray-600 no-underline"
+    >
+      {{ t('auth.login.privacyLink') }}
+    </a>
+    <a
+      href="https://support.comfy.org"
+      class="cursor-pointer text-sm text-gray-600 no-underline"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ t('cloudFooter_needHelp') }}
+    </a>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
diff --git a/src/platform/cloud/onboarding/onboardingCloudRoutes.ts b/src/platform/cloud/onboarding/onboardingCloudRoutes.ts
new file mode 100644
index 000000000..83fed65e8
--- /dev/null
+++ b/src/platform/cloud/onboarding/onboardingCloudRoutes.ts
@@ -0,0 +1,72 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+export const cloudOnboardingRoutes: RouteRecordRaw[] = [
+  {
+    path: '/cloud',
+    component: () =>
+      import('@/platform/cloud/onboarding/components/CloudLayoutView.vue'),
+    children: [
+      {
+        path: 'login',
+        name: 'cloud-login',
+        component: () =>
+          import('@/platform/cloud/onboarding/CloudLoginView.vue'),
+        beforeEnter: async (to, _from, next) => {
+          // Only redirect if not explicitly switching accounts
+          if (!to.query.switchAccount) {
+            const { useCurrentUser } = await import(
+              '@/composables/auth/useCurrentUser'
+            )
+            const { isLoggedIn } = useCurrentUser()
+
+            if (isLoggedIn.value) {
+              // User is already logged in, redirect to user-check
+              // user-check will handle survey, or main page routing
+              return next({ name: 'cloud-user-check' })
+            }
+          }
+          next()
+        }
+      },
+      {
+        path: 'signup',
+        name: 'cloud-signup',
+        component: () =>
+          import('@/platform/cloud/onboarding/CloudSignupView.vue')
+      },
+      {
+        path: 'forgot-password',
+        name: 'cloud-forgot-password',
+        component: () =>
+          import('@/platform/cloud/onboarding/CloudForgotPasswordView.vue')
+      },
+      {
+        path: 'survey',
+        name: 'cloud-survey',
+        component: () =>
+          import('@/platform/cloud/onboarding/CloudSurveyView.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'user-check',
+        name: 'cloud-user-check',
+        component: () =>
+          import('@/platform/cloud/onboarding/UserCheckView.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'sorry-contact-support',
+        name: 'cloud-sorry-contact-support',
+        component: () =>
+          import('@/platform/cloud/onboarding/CloudSorryContactSupportView.vue')
+      },
+      {
+        path: 'auth-timeout',
+        name: 'cloud-auth-timeout',
+        component: () =>
+          import('@/platform/cloud/onboarding/CloudAuthTimeoutView.vue'),
+        props: true
+      }
+    ]
+  }
+]
diff --git a/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue b/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue
new file mode 100644
index 000000000..9727cb6bb
--- /dev/null
+++ b/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="flex h-full items-center justify-center p-8">
+    <div class="max-w-[100vw] lg:w-96">
+      <div class="rounded-lg bg-[#2d2e32] p-4">
+        <Skeleton width="60%" height="1.125rem" class="mb-2" />
+        <Skeleton width="90%" height="1rem" class="mb-2" />
+        <Skeleton width="80%" height="1rem" />
+      </div>
+
+      <div class="mt-6 mb-8 flex flex-col gap-4">
+        <Skeleton width="45%" height="1.5rem" class="my-0" />
+        <div class="flex items-center">
+          <Skeleton width="25%" height="1rem" class="mr-1" />
+          <Skeleton width="20%" height="1rem" />
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <Skeleton width="20%" height="1rem" class="mb-2" />
+        <Skeleton width="100%" height="2.5rem" class="mb-4" />
+        <Skeleton width="25%" height="1rem" class="mb-4" />
+        <Skeleton width="100%" height="2.5rem" class="mb-6" />
+        <Skeleton width="80%" height="1rem" class="mb-4" />
+        <Skeleton width="100%" height="2.5rem" />
+      </div>
+
+      <div class="my-8 flex items-center">
+        <div class="flex-1 border-t border-gray-300"></div>
+        <Skeleton width="30%" height="1rem" class="mx-4" />
+        <div class="flex-1 border-t border-gray-300"></div>
+      </div>
+
+      <div class="flex flex-col gap-6">
+        <Skeleton width="100%" height="2.5rem" />
+        <Skeleton width="100%" height="2.5rem" />
+      </div>
+
+      <div class="mt-5">
+        <Skeleton width="70%" height="0.875rem" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+</script>
diff --git a/src/platform/cloud/onboarding/skeletons/CloudSurveyViewSkeleton.vue b/src/platform/cloud/onboarding/skeletons/CloudSurveyViewSkeleton.vue
new file mode 100644
index 000000000..1632ecfbc
--- /dev/null
+++ b/src/platform/cloud/onboarding/skeletons/CloudSurveyViewSkeleton.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="flex min-h-[638px] min-w-[320px] flex-col">
+      <Skeleton width="100%" height="0.5rem" class="mb-8" />
+
+      <div class="flex flex-1 flex-col p-0">
+        <div class="flex min-h-full flex-1 flex-col justify-between">
+          <div>
+            <Skeleton width="70%" height="1.75rem" class="mb-8" />
+            <div class="flex flex-col gap-6">
+              <div v-for="i in 5" :key="i" class="flex items-center gap-3">
+                <Skeleton width="1.25rem" height="1.25rem" shape="circle" />
+                <Skeleton width="85%" height="0.875rem" />
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-between pt-4">
+            <span />
+            <Skeleton width="100%" height="2.5rem" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+</script>
diff --git a/src/platform/cloud/subscription/components/SubscribeButton.vue b/src/platform/cloud/subscription/components/SubscribeButton.vue
new file mode 100644
index 000000000..be57d3dad
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscribeButton.vue
@@ -0,0 +1,124 @@
+<template>
+  <Button
+    :label="label || $t('subscription.required.subscribe')"
+    :size="size"
+    :loading="isLoading"
+    :disabled="isPolling"
+    severity="primary"
+    :style="
+      variant === 'gradient'
+        ? {
+            background: 'var(--color-subscription-button-gradient)',
+            color: 'var(--color-white)'
+          }
+        : undefined
+    "
+    :pt="{
+      root: {
+        class: rootClass
+      }
+    }"
+    @click="handleSubscribe"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { cn } from '@/utils/tailwindUtil'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    size?: 'small' | 'large'
+    variant?: 'default' | 'gradient'
+    fluid?: boolean
+  }>(),
+  {
+    size: 'large',
+    variant: 'default',
+    fluid: true
+  }
+)
+
+const rootClass = computed(() => cn('font-bold', props.fluid && 'w-full'))
+
+const emit = defineEmits<{
+  subscribed: []
+}>()
+
+const { subscribe, isActiveSubscription, fetchStatus } = useSubscription()
+const telemetry = useTelemetry()
+
+const isLoading = ref(false)
+const isPolling = ref(false)
+let pollInterval: number | null = null
+
+const POLL_INTERVAL_MS = 3000 // Poll every 3 seconds
+const MAX_POLL_DURATION_MS = 5 * 60 * 1000 // Stop polling after 5 minutes
+
+const startPollingSubscriptionStatus = () => {
+  isPolling.value = true
+  isLoading.value = true
+
+  const startTime = Date.now()
+
+  const poll = async () => {
+    try {
+      if (Date.now() - startTime > MAX_POLL_DURATION_MS) {
+        stopPolling()
+        return
+      }
+
+      await fetchStatus()
+
+      if (isActiveSubscription.value) {
+        stopPolling()
+        telemetry?.trackMonthlySubscriptionSucceeded()
+        emit('subscribed')
+      }
+    } catch (error) {
+      console.error(
+        '[SubscribeButton] Error polling subscription status:',
+        error
+      )
+    }
+  }
+
+  void poll()
+  pollInterval = window.setInterval(poll, POLL_INTERVAL_MS)
+}
+
+const stopPolling = () => {
+  if (pollInterval) {
+    clearInterval(pollInterval)
+    pollInterval = null
+  }
+  isPolling.value = false
+  isLoading.value = false
+}
+
+const handleSubscribe = async () => {
+  if (isCloud) {
+    useTelemetry()?.trackSubscription('subscribe_clicked')
+  }
+
+  isLoading.value = true
+  try {
+    await subscribe()
+
+    startPollingSubscriptionStatus()
+  } catch (error) {
+    console.error('[SubscribeButton] Error initiating subscription:', error)
+    isLoading.value = false
+  }
+}
+
+onBeforeUnmount(() => {
+  stopPolling()
+})
+</script>
diff --git a/src/platform/cloud/subscription/components/SubscribeToRun.vue b/src/platform/cloud/subscription/components/SubscribeToRun.vue
new file mode 100644
index 000000000..89190789b
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.vue
@@ -0,0 +1,58 @@
+<template>
+  <Button
+    v-tooltip.bottom="{
+      value: $t('subscription.subscribeToRunFull'),
+      showDelay: 600
+    }"
+    class="subscribe-to-run-button"
+    :label="buttonLabel"
+    icon="pi pi-lock"
+    severity="primary"
+    size="small"
+    :style="{
+      background: 'var(--color-subscription-button-gradient)',
+      color: 'var(--color-white)'
+    }"
+    :pt="{
+      root: {
+        class: 'whitespace-nowrap',
+        style: {
+          borderColor: 'transparent'
+        }
+      }
+    }"
+    data-testid="subscribe-to-run-button"
+    @click="handleSubscribeToRun"
+  />
+</template>
+
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+
+const { t } = useI18n()
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMdOrLarger = breakpoints.greaterOrEqual('md')
+
+const buttonLabel = computed(() =>
+  isMdOrLarger.value
+    ? t('subscription.subscribeToRunFull')
+    : t('subscription.subscribeToRun')
+)
+
+const { showSubscriptionDialog } = useSubscription()
+
+const handleSubscribeToRun = () => {
+  if (isCloud) {
+    useTelemetry()?.trackRunButton({ subscribe_to_run: true })
+  }
+
+  showSubscriptionDialog()
+}
+</script>
diff --git a/src/platform/cloud/subscription/components/SubscriptionBenefits.vue b/src/platform/cloud/subscription/components/SubscriptionBenefits.vue
new file mode 100644
index 000000000..177a4afb2
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscriptionBenefits.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col items-start gap-1 self-stretch">
+    <div class="flex items-start gap-2">
+      <i class="pi pi-check mt-1 text-xs text-text-primary" />
+      <span class="text-sm text-text-primary">
+        {{ $t('subscription.benefits.benefit1') }}
+      </span>
+    </div>
+
+    <div class="flex items-start gap-2">
+      <i class="pi pi-check mt-1 text-xs text-text-primary" />
+      <span class="text-sm text-text-primary">
+        {{ $t('subscription.benefits.benefit2') }}
+      </span>
+    </div>
+
+    <Button
+      :label="$t('subscription.viewMoreDetails')"
+      text
+      icon="pi pi-external-link"
+      icon-pos="left"
+      class="flex h-8 min-h-6 py-2 px-0 items-center gap-2 rounded text-text-secondary"
+      :pt="{
+        icon: {
+          class: 'text-xs text-text-secondary'
+        },
+        label: {
+          class: 'text-sm text-text-secondary'
+        }
+      }"
+      @click="handleViewMoreDetails"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+const handleViewMoreDetails = () => {
+  window.open('https://www.comfy.org/cloud/pricing', '_blank')
+}
+</script>
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
new file mode 100644
index 000000000..47346d21e
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -0,0 +1,354 @@
+<template>
+  <TabPanel value="PlanCredits" class="subscription-container h-full">
+    <div class="flex h-full flex-col gap-6">
+      <div class="flex items-baseline gap-2">
+        <span class="text-2xl font-inter font-semibold leading-tight">
+          {{
+            isActiveSubscription
+              ? $t('subscription.title')
+              : $t('subscription.titleUnsubscribed')
+          }}
+        </span>
+        <CloudBadge
+          reverse-order
+          background-color="var(--p-dialog-background)"
+        />
+      </div>
+
+      <div class="grow overflow-auto">
+        <div class="rounded-2xl border border-interface-stroke p-6">
+          <div>
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="flex items-baseline gap-1 font-inter font-semibold">
+                  <span class="text-2xl">{{ formattedMonthlyPrice }}</span>
+                  <span class="text-base">{{
+                    $t('subscription.perMonth')
+                  }}</span>
+                </div>
+                <div
+                  v-if="isActiveSubscription"
+                  class="text-sm text-text-secondary"
+                >
+                  <template v-if="isCancelled">
+                    {{
+                      $t('subscription.expiresDate', {
+                        date: formattedEndDate
+                      })
+                    }}
+                  </template>
+                  <template v-else>
+                    {{
+                      $t('subscription.renewsDate', {
+                        date: formattedRenewalDate
+                      })
+                    }}
+                  </template>
+                </div>
+              </div>
+              <Button
+                v-if="isActiveSubscription"
+                :label="$t('subscription.manageSubscription')"
+                severity="secondary"
+                class="text-xs bg-interface-menu-component-surface-selected"
+                :pt="{
+                  root: {
+                    style: 'border-radius: 8px; padding: 8px 16px;'
+                  },
+                  label: {
+                    class: 'text-text-primary'
+                  }
+                }"
+                @click="manageSubscription"
+              />
+              <SubscribeButton
+                v-else
+                :label="$t('subscription.subscribeNow')"
+                size="small"
+                :fluid="false"
+                class="text-xs"
+                @subscribed="handleRefresh"
+              />
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 gap-6 pt-9 lg:grid-cols-2">
+            <div class="flex flex-col flex-1">
+              <div class="flex flex-col gap-3">
+                <div class="flex flex-col">
+                  <div class="text-sm">
+                    {{ $t('subscription.partnerNodesBalance') }}
+                  </div>
+                  <div class="flex items-center">
+                    <div class="text-sm text-muted">
+                      {{ $t('subscription.partnerNodesDescription') }}
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  :class="
+                    cn(
+                      'relative flex flex-col gap-6 rounded-2xl p-5',
+                      'bg-smoke-100 dark-theme:bg-charcoal-600'
+                    )
+                  "
+                >
+                  <Button
+                    v-tooltip="refreshTooltip"
+                    icon="pi pi-sync"
+                    text
+                    size="small"
+                    class="absolute top-0.5 right-0"
+                    :loading="isLoadingBalance"
+                    :pt="{
+                      icon: {
+                        class: 'text-text-secondary text-xs'
+                      },
+                      loadingIcon: {
+                        class: 'text-text-secondary text-xs'
+                      }
+                    }"
+                    @click="handleRefresh"
+                  />
+
+                  <div class="flex flex-col gap-2">
+                    <div class="text-sm text-text-secondary">
+                      {{ $t('subscription.totalCredits') }}
+                    </div>
+                    <Skeleton
+                      v-if="isLoadingBalance"
+                      width="8rem"
+                      height="2rem"
+                    />
+                    <div v-else class="text-2xl font-bold">
+                      ${{ totalCredits }}
+                    </div>
+                  </div>
+
+                  <!-- Credit Breakdown -->
+                  <div class="flex flex-col gap-1">
+                    <div class="flex items-center gap-4">
+                      <Skeleton
+                        v-if="isLoadingBalance"
+                        width="3rem"
+                        height="1rem"
+                      />
+                      <div v-else class="text-sm text-text-secondary font-bold">
+                        ${{ monthlyBonusCredits }}
+                      </div>
+                      <div class="flex items-center gap-1">
+                        <div class="text-sm text-text-secondary">
+                          {{ $t('subscription.monthlyBonusDescription') }}
+                        </div>
+                        <Button
+                          v-tooltip="$t('subscription.monthlyCreditsRollover')"
+                          icon="pi pi-question-circle"
+                          text
+                          rounded
+                          size="small"
+                          class="h-4 w-4"
+                          :pt="{
+                            icon: {
+                              class: 'text-text-secondary text-xs'
+                            }
+                          }"
+                        />
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-4">
+                      <Skeleton
+                        v-if="isLoadingBalance"
+                        width="3rem"
+                        height="1rem"
+                      />
+                      <div v-else class="text-sm text-text-secondary font-bold">
+                        ${{ prepaidCredits }}
+                      </div>
+                      <div class="flex items-center gap-1">
+                        <div class="text-sm text-text-secondary">
+                          {{ $t('subscription.prepaidDescription') }}
+                        </div>
+                        <Button
+                          v-tooltip="$t('subscription.prepaidCreditsInfo')"
+                          icon="pi pi-question-circle"
+                          text
+                          rounded
+                          size="small"
+                          class="h-4 w-4"
+                          :pt="{
+                            icon: {
+                              class: 'text-text-secondary text-xs'
+                            }
+                          }"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center justify-between">
+                    <a
+                      href="https://platform.comfy.org/profile/usage"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="text-sm text-text-secondary underline hover:text-text-secondary"
+                      style="text-decoration: underline"
+                    >
+                      {{ $t('subscription.viewUsageHistory') }}
+                    </a>
+                    <Button
+                      v-if="isActiveSubscription"
+                      :label="$t('subscription.addCredits')"
+                      severity="secondary"
+                      class="p-2 min-h-8 bg-interface-menu-component-surface-selected"
+                      :pt="{
+                        root: {
+                          style: 'border-radius: 8px;'
+                        },
+                        label: {
+                          class: 'text-sm'
+                        }
+                      }"
+                      @click="handleAddApiCredits"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-2 flex-1">
+              <div class="text-sm">
+                {{ $t('subscription.yourPlanIncludes') }}
+              </div>
+
+              <SubscriptionBenefits />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="flex items-center justify-between border-t border-interface-stroke pt-3"
+      >
+        <div class="flex gap-2">
+          <Button
+            :label="$t('subscription.learnMore')"
+            text
+            severity="secondary"
+            icon="pi pi-question-circle"
+            class="text-xs"
+            :pt="{
+              label: {
+                class: 'text-text-secondary'
+              },
+              icon: {
+                class: 'text-text-secondary text-xs'
+              }
+            }"
+            @click="handleLearnMoreClick"
+          />
+          <Button
+            :label="$t('subscription.partnerNodesCredits')"
+            text
+            severity="secondary"
+            icon="pi pi-question-circle"
+            class="text-xs"
+            :pt="{
+              label: {
+                class: 'text-text-secondary'
+              },
+              icon: {
+                class: 'text-text-secondary text-xs'
+              }
+            }"
+            @click="handleOpenPartnerNodesInfo"
+          />
+          <Button
+            :label="$t('subscription.messageSupport')"
+            text
+            severity="secondary"
+            icon="pi pi-comment"
+            class="text-xs"
+            :loading="isLoadingSupport"
+            :pt="{
+              label: {
+                class: 'text-text-secondary'
+              },
+              icon: {
+                class: 'text-text-secondary text-xs'
+              }
+            }"
+            @click="handleMessageSupport"
+          />
+        </div>
+
+        <Button
+          :label="$t('subscription.invoiceHistory')"
+          text
+          severity="secondary"
+          icon="pi pi-external-link"
+          icon-pos="right"
+          class="text-xs"
+          :pt="{
+            label: {
+              class: 'text-text-secondary'
+            },
+            icon: {
+              class: 'text-text-secondary text-xs'
+            }
+          }"
+          @click="handleInvoiceHistory"
+        />
+      </div>
+    </div>
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Skeleton from 'primevue/skeleton'
+import TabPanel from 'primevue/tabpanel'
+
+import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
+import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  isActiveSubscription,
+  isCancelled,
+  formattedRenewalDate,
+  formattedEndDate,
+  formattedMonthlyPrice,
+  manageSubscription,
+  handleInvoiceHistory
+} = useSubscription()
+
+const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
+  useSubscriptionCredits()
+
+const {
+  isLoadingSupport,
+  refreshTooltip,
+  handleAddApiCredits,
+  handleMessageSupport,
+  handleRefresh,
+  handleLearnMoreClick
+} = useSubscriptionActions()
+
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    '_blank'
+  )
+}
+</script>
+
+<style scoped>
+:deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+</style>
diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
new file mode 100644
index 000000000..54f32c0a8
--- /dev/null
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="relative grid h-full grid-cols-5">
+    <!-- Custom close button -->
+    <Button
+      icon="pi pi-times"
+      text
+      rounded
+      class="absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
+      :aria-label="$t('g.close')"
+      @click="onClose"
+    />
+
+    <div
+      class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
+    >
+      <video
+        autoplay
+        loop
+        muted
+        playsinline
+        class="h-full min-w-[125%] object-cover p-0"
+        style="margin-left: -20%"
+      >
+        <source
+          src="/assets/images/cloud-subscription.webm"
+          type="video/webm"
+        />
+      </video>
+    </div>
+
+    <div class="col-span-3 flex flex-col justify-between p-8">
+      <div>
+        <div class="flex flex-col gap-6">
+          <div class="inline-flex items-center gap-2">
+            <div class="text-sm text-muted text-text-primary">
+              {{ $t('subscription.required.title') }}
+            </div>
+            <CloudBadge
+              reverse-order
+              no-padding
+              background-color="var(--p-dialog-background)"
+              use-subscription
+            />
+          </div>
+
+          <div class="flex items-baseline gap-2">
+            <span class="text-4xl font-bold">{{ formattedMonthlyPrice }}</span>
+            <span class="text-xl">{{ $t('subscription.perMonth') }}</span>
+          </div>
+        </div>
+
+        <SubscriptionBenefits class="mt-6 text-muted" />
+      </div>
+
+      <div class="flex flex-col pt-8">
+        <SubscribeButton
+          class="py-2 px-4 rounded-lg"
+          :pt="{
+            root: {
+              style: 'background: var(--color-accent-blue, #0B8CE9);'
+            },
+            label: {
+              class: 'font-inter font-[700] text-sm'
+            }
+          }"
+          @subscribed="handleSubscribed"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
+import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+
+defineProps<{
+  onClose: () => void
+}>()
+
+const emit = defineEmits<{
+  close: [subscribed: boolean]
+}>()
+
+const { formattedMonthlyPrice } = useSubscription()
+
+const handleSubscribed = () => {
+  emit('close', true)
+}
+</script>
+
+<style scoped>
+:deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+
+:deep(.p-button) {
+  color: white;
+}
+</style>
diff --git a/src/platform/cloud/subscription/composables/useSubscription.ts b/src/platform/cloud/subscription/composables/useSubscription.ts
new file mode 100644
index 000000000..92588907f
--- /dev/null
+++ b/src/platform/cloud/subscription/composables/useSubscription.ts
@@ -0,0 +1,226 @@
+import { computed, ref, watch } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { COMFY_API_BASE_URL } from '@/config/comfyApi'
+import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
+import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { useDialogService } from '@/services/dialogService'
+import {
+  FirebaseAuthStoreError,
+  useFirebaseAuthStore
+} from '@/stores/firebaseAuthStore'
+
+type CloudSubscriptionCheckoutResponse = {
+  checkout_url: string
+}
+
+type CloudSubscriptionStatusResponse = {
+  is_active: boolean
+  subscription_id: string
+  renewal_date: string | null
+  end_date?: string | null
+}
+
+function useSubscriptionInternal() {
+  const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
+
+  const isSubscribedOrIsNotCloud = computed(() => {
+    if (!isCloud || !window.__CONFIG__?.subscription_required) return true
+
+    return subscriptionStatus.value?.is_active ?? false
+  })
+  const { reportError, accessBillingPortal } = useFirebaseAuthActions()
+  const dialogService = useDialogService()
+
+  const { getAuthHeader } = useFirebaseAuthStore()
+  const { wrapWithErrorHandlingAsync } = useErrorHandling()
+
+  const { isLoggedIn } = useCurrentUser()
+
+  const isCancelled = computed(() => {
+    return !!subscriptionStatus.value?.end_date
+  })
+
+  const formattedRenewalDate = computed(() => {
+    if (!subscriptionStatus.value?.renewal_date) return ''
+
+    const renewalDate = new Date(subscriptionStatus.value.renewal_date)
+
+    return renewalDate.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    })
+  })
+
+  const formattedEndDate = computed(() => {
+    if (!subscriptionStatus.value?.end_date) return ''
+
+    const endDate = new Date(subscriptionStatus.value.end_date)
+
+    return endDate.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    })
+  })
+
+  const formattedMonthlyPrice = computed(
+    () => `$${MONTHLY_SUBSCRIPTION_PRICE.toFixed(0)}`
+  )
+
+  const fetchStatus = wrapWithErrorHandlingAsync(
+    fetchSubscriptionStatus,
+    reportError
+  )
+
+  const subscribe = wrapWithErrorHandlingAsync(async () => {
+    const response = await initiateSubscriptionCheckout()
+
+    if (!response.checkout_url) {
+      throw new Error(
+        t('toastMessages.failedToInitiateSubscription', {
+          error: 'No checkout URL returned'
+        })
+      )
+    }
+
+    window.open(response.checkout_url, '_blank')
+  }, reportError)
+
+  const showSubscriptionDialog = () => {
+    if (isCloud) {
+      useTelemetry()?.trackSubscription('modal_opened')
+    }
+
+    void dialogService.showSubscriptionRequiredDialog()
+  }
+
+  const manageSubscription = async () => {
+    await accessBillingPortal()
+  }
+
+  const requireActiveSubscription = async (): Promise<void> => {
+    await fetchSubscriptionStatus()
+
+    if (!isSubscribedOrIsNotCloud.value) {
+      showSubscriptionDialog()
+    }
+  }
+
+  const handleViewUsageHistory = () => {
+    window.open('https://platform.comfy.org/profile/usage', '_blank')
+  }
+
+  const handleLearnMore = () => {
+    window.open('https://docs.comfy.org', '_blank')
+  }
+
+  const handleInvoiceHistory = async () => {
+    await accessBillingPortal()
+  }
+
+  /**
+   * Fetch the current cloud subscription status for the authenticated user
+   * @returns Subscription status or null if no subscription exists
+   */
+  async function fetchSubscriptionStatus(): Promise<CloudSubscriptionStatusResponse | null> {
+    const authHeader = await getAuthHeader()
+    if (!authHeader) {
+      throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
+    }
+
+    const response = await fetch(
+      `${COMFY_API_BASE_URL}/customers/cloud-subscription-status`,
+      {
+        headers: {
+          ...authHeader,
+          'Content-Type': 'application/json'
+        }
+      }
+    )
+
+    if (!response.ok) {
+      const errorData = await response.json()
+      throw new FirebaseAuthStoreError(
+        t('toastMessages.failedToFetchSubscription', {
+          error: errorData.message
+        })
+      )
+    }
+
+    const statusData = await response.json()
+    subscriptionStatus.value = statusData
+    return statusData
+  }
+
+  watch(
+    () => isLoggedIn.value,
+    async (loggedIn) => {
+      if (loggedIn) {
+        await fetchSubscriptionStatus()
+      } else {
+        subscriptionStatus.value = null
+      }
+    },
+    { immediate: true }
+  )
+
+  const initiateSubscriptionCheckout =
+    async (): Promise<CloudSubscriptionCheckoutResponse> => {
+      const authHeader = await getAuthHeader()
+      if (!authHeader) {
+        throw new FirebaseAuthStoreError(
+          t('toastMessages.userNotAuthenticated')
+        )
+      }
+
+      const response = await fetch(
+        `${COMFY_API_BASE_URL}/customers/cloud-subscription-checkout`,
+        {
+          method: 'POST',
+          headers: {
+            ...authHeader,
+            'Content-Type': 'application/json'
+          }
+        }
+      )
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new FirebaseAuthStoreError(
+          t('toastMessages.failedToInitiateSubscription', {
+            error: errorData.message
+          })
+        )
+      }
+
+      return response.json()
+    }
+
+  return {
+    // State
+    isActiveSubscription: isSubscribedOrIsNotCloud,
+    isCancelled,
+    formattedRenewalDate,
+    formattedEndDate,
+    formattedMonthlyPrice,
+
+    // Actions
+    subscribe,
+    fetchStatus,
+    showSubscriptionDialog,
+    manageSubscription,
+    requireActiveSubscription,
+    handleViewUsageHistory,
+    handleLearnMore,
+    handleInvoiceHistory
+  }
+}
+
+export const useSubscription = createSharedComposable(useSubscriptionInternal)
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionActions.ts b/src/platform/cloud/subscription/composables/useSubscriptionActions.ts
new file mode 100644
index 000000000..0e1400c08
--- /dev/null
+++ b/src/platform/cloud/subscription/composables/useSubscriptionActions.ts
@@ -0,0 +1,76 @@
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { useDialogService } from '@/services/dialogService'
+import { useCommandStore } from '@/stores/commandStore'
+
+/**
+ * Composable for handling subscription panel actions and loading states
+ */
+export function useSubscriptionActions() {
+  const { t } = useI18n()
+  const dialogService = useDialogService()
+  const authActions = useFirebaseAuthActions()
+  const commandStore = useCommandStore()
+  const telemetry = useTelemetry()
+  const { fetchStatus, formattedRenewalDate } = useSubscription()
+
+  const isLoadingSupport = ref(false)
+
+  const refreshTooltip = computed(() => {
+    const date =
+      formattedRenewalDate.value || t('subscription.nextBillingCycle')
+    return `Refreshes on ${date}`
+  })
+
+  onMounted(() => {
+    void handleRefresh()
+  })
+
+  const handleAddApiCredits = () => {
+    dialogService.showTopUpCreditsDialog()
+  }
+
+  const handleMessageSupport = async () => {
+    try {
+      isLoadingSupport.value = true
+      if (isCloud) {
+        telemetry?.trackHelpResourceClicked({
+          resource_type: 'help_feedback',
+          is_external: true,
+          source: 'subscription'
+        })
+      }
+      await commandStore.execute('Comfy.ContactSupport')
+    } catch (error) {
+      console.error('[useSubscriptionActions] Error contacting support:', error)
+    } finally {
+      isLoadingSupport.value = false
+    }
+  }
+
+  const handleRefresh = async () => {
+    try {
+      await Promise.all([authActions.fetchBalance(), fetchStatus()])
+    } catch (error) {
+      console.error('[useSubscriptionActions] Error refreshing data:', error)
+    }
+  }
+
+  const handleLearnMoreClick = () => {
+    window.open('https://docs.comfy.org/get_started/cloud', '_blank')
+  }
+
+  return {
+    isLoadingSupport,
+    refreshTooltip,
+    handleAddApiCredits,
+    handleMessageSupport,
+    handleRefresh,
+    handleLearnMoreClick
+  }
+}
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts b/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
new file mode 100644
index 000000000..0c0cf5a7f
--- /dev/null
+++ b/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
@@ -0,0 +1,65 @@
+import { computed } from 'vue'
+
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
+
+/**
+ * Composable for handling subscription credit calculations and formatting
+ */
+export function useSubscriptionCredits() {
+  const authStore = useFirebaseAuthStore()
+
+  const totalCredits = computed(() => {
+    if (!authStore.balance?.amount_micros) return '0.00'
+    try {
+      return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+    } catch (error) {
+      console.error(
+        '[useSubscriptionCredits] Error formatting total credits:',
+        error
+      )
+      return '0.00'
+    }
+  })
+
+  const monthlyBonusCredits = computed(() => {
+    if (!authStore.balance?.cloud_credit_balance_micros) return '0.00'
+    try {
+      return formatMetronomeCurrency(
+        authStore.balance.cloud_credit_balance_micros,
+        'usd'
+      )
+    } catch (error) {
+      console.error(
+        '[useSubscriptionCredits] Error formatting monthly bonus credits:',
+        error
+      )
+      return '0.00'
+    }
+  })
+
+  const prepaidCredits = computed(() => {
+    if (!authStore.balance?.prepaid_balance_micros) return '0.00'
+    try {
+      return formatMetronomeCurrency(
+        authStore.balance.prepaid_balance_micros,
+        'usd'
+      )
+    } catch (error) {
+      console.error(
+        '[useSubscriptionCredits] Error formatting prepaid credits:',
+        error
+      )
+      return '0.00'
+    }
+  })
+
+  const isLoadingBalance = computed(() => authStore.isFetchingBalance)
+
+  return {
+    totalCredits,
+    monthlyBonusCredits,
+    prepaidCredits,
+    isLoadingBalance
+  }
+}
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
new file mode 100644
index 000000000..1f3542c14
--- /dev/null
+++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
@@ -0,0 +1,37 @@
+import { defineAsyncComponent } from 'vue'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const DIALOG_KEY = 'subscription-required'
+
+export const useSubscriptionDialog = () => {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show() {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: defineAsyncComponent(
+        () =>
+          import(
+            '@/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue'
+          )
+      ),
+      props: {
+        onClose: hide
+      },
+      dialogComponentProps: {
+        style: 'width: 700px;'
+      }
+    })
+  }
+
+  return {
+    show,
+    hide
+  }
+}
diff --git a/src/platform/distribution/types.ts b/src/platform/distribution/types.ts
index 2ddeb1343..d03e6d53b 100644
--- a/src/platform/distribution/types.ts
+++ b/src/platform/distribution/types.ts
@@ -17,4 +17,4 @@ const DISTRIBUTION: Distribution = __DISTRIBUTION__
 /** Distribution type checks */
 export const isDesktop = DISTRIBUTION === 'desktop' || isElectron() // TODO: replace with build var
 export const isCloud = DISTRIBUTION === 'cloud'
-// export const isLocalhost = !isDesktop && !isCloud
+// export const isLocalhost = DISTRIBUTION === 'localhost' || (!isDesktop && !isCloud)
diff --git a/src/platform/remote/comfyui/history/adapters/v2ToV1Adapter.ts b/src/platform/remote/comfyui/history/adapters/v2ToV1Adapter.ts
new file mode 100644
index 000000000..52801484e
--- /dev/null
+++ b/src/platform/remote/comfyui/history/adapters/v2ToV1Adapter.ts
@@ -0,0 +1,64 @@
+/**
+ * @fileoverview Adapter to convert V2 history format to V1 format
+ * @module platform/remote/comfyui/history/adapters/v2ToV1Adapter
+ */
+import type { HistoryTaskItem, TaskPrompt } from '../types/historyV1Types'
+import type {
+  HistoryResponseV2,
+  RawHistoryItemV2,
+  TaskOutput,
+  TaskPromptV2
+} from '../types/historyV2Types'
+
+function mapPromptV2toV1(
+  promptV2: TaskPromptV2,
+  outputs: TaskOutput,
+  syntheticPriority: number
+): TaskPrompt {
+  return [
+    syntheticPriority,
+    promptV2.prompt_id,
+    {},
+    promptV2.extra_data,
+    Object.keys(outputs)
+  ]
+}
+
+function getExecutionSuccessTimestamp(item: RawHistoryItemV2): number {
+  return (
+    item.status?.messages?.find((m) => m[0] === 'execution_success')?.[1]
+      ?.timestamp ?? 0
+  )
+}
+
+export function mapHistoryV2toHistory(
+  historyV2Response: HistoryResponseV2
+): HistoryTaskItem[] {
+  const { history } = historyV2Response
+
+  // Sort by execution_success timestamp, descending (newest first)
+  history.sort((a, b) => {
+    return getExecutionSuccessTimestamp(b) - getExecutionSuccessTimestamp(a)
+  })
+
+  // Count items with valid timestamps for synthetic priority calculation
+  const countWithTimestamps = history.filter(
+    (item) => getExecutionSuccessTimestamp(item) > 0
+  ).length
+
+  return history.map((item, index): HistoryTaskItem => {
+    const { prompt, outputs, status, meta } = item
+    const timestamp = getExecutionSuccessTimestamp(item)
+
+    // Items with timestamps get priority based on sorted position (highest first)
+    const syntheticPriority = timestamp > 0 ? countWithTimestamps - index : 0
+
+    return {
+      taskType: 'History' as const,
+      prompt: mapPromptV2toV1(prompt, outputs, syntheticPriority),
+      status,
+      outputs,
+      meta
+    }
+  })
+}
diff --git a/src/platform/remote/comfyui/history/fetchers/fetchHistoryV1.ts b/src/platform/remote/comfyui/history/fetchers/fetchHistoryV1.ts
new file mode 100644
index 000000000..1034753a9
--- /dev/null
+++ b/src/platform/remote/comfyui/history/fetchers/fetchHistoryV1.ts
@@ -0,0 +1,36 @@
+/**
+ * @fileoverview V1 History Fetcher - Desktop/localhost API
+ * @module platform/remote/comfyui/history/fetchers/fetchHistoryV1
+ *
+ * Fetches history directly from V1 API endpoint.
+ * Used by desktop and localhost distributions.
+ */
+
+import type {
+  HistoryTaskItem,
+  HistoryV1Response
+} from '../types/historyV1Types'
+
+/**
+ * Fetches history from V1 API endpoint
+ * @param api - API instance with fetchApi method
+ * @param maxItems - Maximum number of history items to fetch
+ * @returns Promise resolving to V1 history response
+ */
+export async function fetchHistoryV1(
+  fetchApi: (url: string) => Promise<Response>,
+  maxItems: number = 200
+): Promise<HistoryV1Response> {
+  const res = await fetchApi(`/history?max_items=${maxItems}`)
+  const json: Record<
+    string,
+    Omit<HistoryTaskItem, 'taskType'>
+  > = await res.json()
+
+  return {
+    History: Object.values(json).map((item) => ({
+      ...item,
+      taskType: 'History'
+    }))
+  }
+}
diff --git a/src/platform/remote/comfyui/history/fetchers/fetchHistoryV2.ts b/src/platform/remote/comfyui/history/fetchers/fetchHistoryV2.ts
new file mode 100644
index 000000000..129c0ab8a
--- /dev/null
+++ b/src/platform/remote/comfyui/history/fetchers/fetchHistoryV2.ts
@@ -0,0 +1,27 @@
+/**
+ * @fileoverview V2 History Fetcher - Cloud API with adapter
+ * @module platform/remote/comfyui/history/fetchers/fetchHistoryV2
+ *
+ * Fetches history from V2 API endpoint and converts to V1 format.
+ * Used exclusively by cloud distribution.
+ */
+
+import { mapHistoryV2toHistory } from '../adapters/v2ToV1Adapter'
+import type { HistoryV1Response } from '../types/historyV1Types'
+import type { HistoryResponseV2 } from '../types/historyV2Types'
+
+/**
+ * Fetches history from V2 API endpoint and adapts to V1 format
+ * @param fetchApi - API instance with fetchApi method
+ * @param maxItems - Maximum number of history items to fetch
+ * @returns Promise resolving to V1 history response (adapted from V2)
+ */
+export async function fetchHistoryV2(
+  fetchApi: (url: string) => Promise<Response>,
+  maxItems: number = 200
+): Promise<HistoryV1Response> {
+  const res = await fetchApi(`/history_v2?max_items=${maxItems}`)
+  const rawData: HistoryResponseV2 = await res.json()
+  const adaptedHistory = mapHistoryV2toHistory(rawData)
+  return { History: adaptedHistory }
+}
diff --git a/src/platform/remote/comfyui/history/index.ts b/src/platform/remote/comfyui/history/index.ts
new file mode 100644
index 000000000..fc96225e4
--- /dev/null
+++ b/src/platform/remote/comfyui/history/index.ts
@@ -0,0 +1,29 @@
+/**
+ * @fileoverview History API module - Distribution-aware exports
+ * @module platform/remote/comfyui/history
+ *
+ * This module provides a unified history fetching interface that automatically
+ * uses the correct implementation based on build-time distribution constant.
+ *
+ * - Cloud builds: Uses V2 API with adapter (tree-shakes V1 fetcher)
+ * - Desktop/localhost builds: Uses V1 API directly (tree-shakes V2 fetcher + adapter)
+ *
+ * The rest of the application only needs to import from this module and use
+ * V1 types - all distribution-specific details are encapsulated here.
+ */
+
+import { isCloud } from '@/platform/distribution/types'
+import { fetchHistoryV1 } from './fetchers/fetchHistoryV1'
+import { fetchHistoryV2 } from './fetchers/fetchHistoryV2'
+
+/**
+ * Fetches history using the appropriate API for the current distribution.
+ * Build-time constant enables dead code elimination - only one implementation
+ * will be included in the final bundle.
+ */
+export const fetchHistory = isCloud ? fetchHistoryV2 : fetchHistoryV1
+
+/**
+ * Export only V1 types publicly - consumers don't need to know about V2
+ */
+export type * from './types'
diff --git a/src/platform/remote/comfyui/history/reconciliation.ts b/src/platform/remote/comfyui/history/reconciliation.ts
new file mode 100644
index 000000000..aaf445775
--- /dev/null
+++ b/src/platform/remote/comfyui/history/reconciliation.ts
@@ -0,0 +1,122 @@
+/**
+ * @fileoverview History reconciliation for V1 and V2 APIs
+ * @module platform/remote/comfyui/history/reconciliation
+ *
+ * Returns list of items that should be displayed, sorted by queueIndex (newest first).
+ * Caller is responsible for mapping to their own class instances.
+ *
+ * V1: QueueIndex-based filtering for stable monotonic indices
+ * V2: PromptId-based merging for synthetic priorities (V2 assigns synthetic
+ *     priorities after timestamp sorting, so new items may have lower priority
+ *     than existing items)
+ */
+import { isCloud } from '@/platform/distribution/types'
+import type { TaskItem } from '@/schemas/apiSchema'
+
+/**
+ * V1 reconciliation: QueueIndex-based filtering works because V1 has stable,
+ * monotonically increasing queue indices.
+ *
+ * Sort order: Sorts serverHistory by queueIndex descending (newest first) to ensure
+ * consistent ordering. JavaScript .filter() maintains iteration order, so filtered
+ * results remain sorted. clientHistory is assumed already sorted from previous update.
+ *
+ * @returns All items to display, sorted by queueIndex descending (newest first)
+ */
+function reconcileHistoryV1(
+  serverHistory: TaskItem[],
+  clientHistory: TaskItem[],
+  maxItems: number,
+  lastKnownQueueIndex: number | undefined
+): TaskItem[] {
+  const sortedServerHistory = serverHistory.sort(
+    (a, b) => b.prompt[0] - a.prompt[0]
+  )
+
+  const serverPromptIds = new Set(
+    sortedServerHistory.map((item) => item.prompt[1])
+  )
+
+  // If undefined, treat as initial sync (all items are new)
+  const itemsAddedSinceLastSync =
+    lastKnownQueueIndex === undefined
+      ? sortedServerHistory
+      : sortedServerHistory.filter(
+          (item) => item.prompt[0] > lastKnownQueueIndex
+        )
+
+  const clientItemsStillOnServer = clientHistory.filter((item) =>
+    serverPromptIds.has(item.prompt[1])
+  )
+
+  // Merge new and reused items, sort by queueIndex descending, limit to maxItems
+  return [...itemsAddedSinceLastSync, ...clientItemsStillOnServer]
+    .sort((a, b) => b.prompt[0] - a.prompt[0])
+    .slice(0, maxItems)
+}
+
+/**
+ * V2 reconciliation: PromptId-based merging because V2 assigns synthetic
+ * priorities after sorting by timestamp.
+ *
+ * Sort order: Sorts serverHistory by queueIndex descending (newest first) to ensure
+ * consistent ordering. JavaScript .filter() maintains iteration order, so filtered
+ * results remain sorted. clientHistory is assumed already sorted from previous update.
+ *
+ * @returns All items to display, sorted by queueIndex descending (newest first)
+ */
+function reconcileHistoryV2(
+  serverHistory: TaskItem[],
+  clientHistory: TaskItem[],
+  maxItems: number
+): TaskItem[] {
+  const sortedServerHistory = serverHistory.sort(
+    (a, b) => b.prompt[0] - a.prompt[0]
+  )
+
+  const serverPromptIds = new Set(
+    sortedServerHistory.map((item) => item.prompt[1])
+  )
+  const clientPromptIds = new Set(clientHistory.map((item) => item.prompt[1]))
+
+  const newItems = sortedServerHistory.filter(
+    (item) => !clientPromptIds.has(item.prompt[1])
+  )
+
+  const clientItemsStillOnServer = clientHistory.filter((item) =>
+    serverPromptIds.has(item.prompt[1])
+  )
+
+  // Merge new and reused items, sort by queueIndex descending, limit to maxItems
+  return [...newItems, ...clientItemsStillOnServer]
+    .sort((a, b) => b.prompt[0] - a.prompt[0])
+    .slice(0, maxItems)
+}
+
+/**
+ * Reconciles server history with client history.
+ * Automatically uses V1 (queueIndex-based) or V2 (promptId-based) algorithm based on
+ * distribution type.
+ *
+ * @param serverHistory - Server's current history items
+ * @param clientHistory - Client's existing history items
+ * @param maxItems - Maximum number of items to return
+ * @param lastKnownQueueIndex - Last queue index seen (V1 only, optional for V2)
+ * @returns All items that should be displayed, sorted by queueIndex descending
+ */
+export function reconcileHistory(
+  serverHistory: TaskItem[],
+  clientHistory: TaskItem[],
+  maxItems: number,
+  lastKnownQueueIndex?: number
+): TaskItem[] {
+  if (isCloud) {
+    return reconcileHistoryV2(serverHistory, clientHistory, maxItems)
+  }
+  return reconcileHistoryV1(
+    serverHistory,
+    clientHistory,
+    maxItems,
+    lastKnownQueueIndex
+  )
+}
diff --git a/src/platform/remote/comfyui/history/types/historyV1Types.ts b/src/platform/remote/comfyui/history/types/historyV1Types.ts
new file mode 100644
index 000000000..f7bff7a84
--- /dev/null
+++ b/src/platform/remote/comfyui/history/types/historyV1Types.ts
@@ -0,0 +1,15 @@
+/**
+ * @fileoverview History V1 types - Public interface used throughout the app
+ * @module platform/remote/comfyui/history/types/historyV1Types
+ *
+ * These types represent the V1 history format that the application expects.
+ * Both desktop (direct V1 API) and cloud (V2 API + adapter) return data in this format.
+ */
+
+import type { HistoryTaskItem, TaskPrompt } from '@/schemas/apiSchema'
+
+export interface HistoryV1Response {
+  History: HistoryTaskItem[]
+}
+
+export type { HistoryTaskItem, TaskPrompt }
diff --git a/src/platform/remote/comfyui/history/types/historyV2Types.ts b/src/platform/remote/comfyui/history/types/historyV2Types.ts
new file mode 100644
index 000000000..16c4fa000
--- /dev/null
+++ b/src/platform/remote/comfyui/history/types/historyV2Types.ts
@@ -0,0 +1,45 @@
+/**
+ * @fileoverview History V2 types and schemas - Internal cloud API format
+ * @module platform/remote/comfyui/history/types/historyV2Types
+ *
+ * These types and schemas represent the V2 history format returned by the cloud API.
+ * They are only used internally and are converted to V1 format via adapter.
+ *
+ * IMPORTANT: These types should NOT be used outside this history module.
+ */
+
+import { z } from 'zod'
+
+import {
+  zExtraData,
+  zPromptId,
+  zQueueIndex,
+  zStatus,
+  zTaskMeta,
+  zTaskOutput
+} from '@/schemas/apiSchema'
+
+const zTaskPromptV2 = z.object({
+  priority: zQueueIndex,
+  prompt_id: zPromptId,
+  extra_data: zExtraData
+})
+
+const zRawHistoryItemV2 = z.object({
+  prompt_id: zPromptId,
+  prompt: zTaskPromptV2,
+  status: zStatus.optional(),
+  outputs: zTaskOutput,
+  meta: zTaskMeta.optional()
+})
+
+const zHistoryResponseV2 = z.object({
+  history: z.array(zRawHistoryItemV2)
+})
+
+export type TaskPromptV2 = z.infer<typeof zTaskPromptV2>
+export type RawHistoryItemV2 = z.infer<typeof zRawHistoryItemV2>
+export type HistoryResponseV2 = z.infer<typeof zHistoryResponseV2>
+export type TaskOutput = z.infer<typeof zTaskOutput>
+
+export { zRawHistoryItemV2 }
diff --git a/src/platform/remote/comfyui/history/types/index.ts b/src/platform/remote/comfyui/history/types/index.ts
new file mode 100644
index 000000000..d49f66ffe
--- /dev/null
+++ b/src/platform/remote/comfyui/history/types/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @fileoverview Public history types export
+ * @module platform/remote/comfyui/history/types
+ *
+ * Only V1 types are exported publicly - the rest of the app
+ * should never need to know about V2 types or implementation details.
+ */
+
+export type * from './historyV1Types'
diff --git a/src/platform/remoteConfig/remoteConfig.ts b/src/platform/remoteConfig/remoteConfig.ts
new file mode 100644
index 000000000..a20eb7ebd
--- /dev/null
+++ b/src/platform/remoteConfig/remoteConfig.ts
@@ -0,0 +1,45 @@
+/**
+ * Remote configuration service
+ *
+ * Fetches configuration from the server at runtime, enabling:
+ * - Feature flags without rebuilding
+ * - Server-side feature discovery
+ * - Version compatibility management
+ * - Avoiding vendor lock-in for native apps
+ *
+ * This module is tree-shaken in OSS builds.
+ * Used for initial config load in main.ts and polling in the extension.
+ */
+
+import { ref } from 'vue'
+
+import type { RemoteConfig } from './types'
+
+/**
+ * Reactive remote configuration
+ * Updated whenever config is loaded from the server
+ */
+export const remoteConfig = ref<RemoteConfig>({})
+
+/**
+ * Loads remote configuration from the backend /api/features endpoint
+ * and updates the reactive remoteConfig ref
+ */
+export async function loadRemoteConfig(): Promise<void> {
+  try {
+    const response = await fetch('/api/features', { cache: 'no-store' })
+    if (response.ok) {
+      const config = await response.json()
+      window.__CONFIG__ = config
+      remoteConfig.value = config
+    } else {
+      console.warn('Failed to load remote config:', response.statusText)
+      window.__CONFIG__ = {}
+      remoteConfig.value = {}
+    }
+  } catch (error) {
+    console.error('Failed to fetch remote config:', error)
+    window.__CONFIG__ = {}
+    remoteConfig.value = {}
+  }
+}
diff --git a/src/platform/remoteConfig/types.ts b/src/platform/remoteConfig/types.ts
new file mode 100644
index 000000000..939c6bbf1
--- /dev/null
+++ b/src/platform/remoteConfig/types.ts
@@ -0,0 +1,19 @@
+/**
+ * Server health alert configuration from the backend
+ */
+type ServerHealthAlert = {
+  message: string
+  tooltip?: string
+  severity?: 'info' | 'warning' | 'error'
+  badge?: string
+}
+
+/**
+ * Remote configuration type
+ * Configuration fetched from the server at runtime
+ */
+export type RemoteConfig = {
+  mixpanel_token?: string
+  subscription_required?: boolean
+  server_health_alert?: ServerHealthAlert
+}
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index 90a1f2f65..820262b1a 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -133,7 +133,7 @@ const searchResults = computed<ISettingGroup[]>(() =>
 )
 
 const tabValue = computed<string>(() =>
-  inSearch.value ? 'Search Results' : activeCategory.value?.label ?? ''
+  inSearch.value ? 'Search Results' : (activeCategory.value?.label ?? '')
 )
 
 // Don't allow null category to be set outside of search.
diff --git a/src/platform/settings/components/SettingItem.vue b/src/platform/settings/components/SettingItem.vue
index c83a4e77a..91f92b2e9 100644
--- a/src/platform/settings/components/SettingItem.vue
+++ b/src/platform/settings/components/SettingItem.vue
@@ -31,6 +31,8 @@ import FormItem from '@/components/common/FormItem.vue'
 import { st } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingOption, SettingParams } from '@/platform/settings/types'
+import { useTelemetry } from '@/platform/telemetry'
+import type { Settings } from '@/schemas/apiSchema'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const props = defineProps<{
@@ -75,7 +77,22 @@ const formItem = computed(() => {
 
 const settingStore = useSettingStore()
 const settingValue = computed(() => settingStore.get(props.setting.id))
-const updateSettingValue = async (value: any) => {
-  await settingStore.set(props.setting.id, value)
+const updateSettingValue = async <K extends keyof Settings>(
+  newValue: Settings[K]
+) => {
+  const telemetry = useTelemetry()
+  const settingId = props.setting.id
+  const previousValue = settingValue.value
+
+  await settingStore.set(settingId, newValue)
+
+  const normalizedValue = settingStore.get(settingId)
+  if (previousValue !== normalizedValue) {
+    telemetry?.trackSettingChanged({
+      setting_id: settingId,
+      previous_value: previousValue,
+      new_value: normalizedValue
+    })
+  }
 }
 </script>
diff --git a/src/platform/settings/composables/useSettingUI.ts b/src/platform/settings/composables/useSettingUI.ts
index 3f28c9b52..a49cccf19 100644
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -3,6 +3,7 @@ import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { isCloud } from '@/platform/distribution/types'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
@@ -23,6 +24,7 @@ export function useSettingUI(
     | 'server-config'
     | 'user'
     | 'credits'
+    | 'subscription'
 ) {
   const { t } = useI18n()
   const { isLoggedIn } = useCurrentUser()
@@ -78,6 +80,23 @@ export function useSettingUI(
     )
   }
 
+  const subscriptionPanel: SettingPanelItem | null =
+    !isCloud || !window.__CONFIG__?.subscription_required
+      ? null
+      : {
+          node: {
+            key: 'subscription',
+            label: 'PlanCredits',
+            children: []
+          },
+          component: defineAsyncComponent(
+            () =>
+              import(
+                '@/platform/cloud/subscription/components/SubscriptionPanel.vue'
+              )
+          )
+        }
+
   const userPanel: SettingPanelItem = {
     node: {
       key: 'user',
@@ -129,7 +148,12 @@ export function useSettingUI(
       userPanel,
       keybindingPanel,
       extensionPanel,
-      ...(isElectron() ? [serverConfigPanel] : [])
+      ...(isElectron() ? [serverConfigPanel] : []),
+      ...(isCloud &&
+      window.__CONFIG__?.subscription_required &&
+      subscriptionPanel
+        ? [subscriptionPanel]
+        : [])
     ].filter((panel) => panel.component)
   )
 
@@ -155,13 +179,22 @@ export function useSettingUI(
   })
 
   const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
-    // Account settings - only show credits when user is authenticated
+    // Account settings - show different panels based on distribution and auth state
     {
       key: 'account',
       label: 'Account',
       children: [
         userPanel.node,
-        ...(isLoggedIn.value ? [creditsPanel.node] : [])
+        ...(isLoggedIn.value &&
+        isCloud &&
+        window.__CONFIG__?.subscription_required &&
+        subscriptionPanel
+          ? [subscriptionPanel.node]
+          : []),
+        ...(isLoggedIn.value &&
+        !(isCloud && window.__CONFIG__?.subscription_required)
+          ? [creditsPanel.node]
+          : [])
       ].map(translateCategory)
     },
     // Normal settings stored in the settingStore
diff --git a/src/platform/settings/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts
index e0ae27d4b..2ae706bb7 100644
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -1,10 +1,12 @@
 import { LinkMarkerShape, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ColorPalettes } from '@/schemas/colorPaletteSchema'
 import type { Keybinding } from '@/schemas/keyBindingSchema'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
+import { breakpointsTailwind } from '@vueuse/core'
 
 /**
  * Core settings are essential configuration parameters required for ComfyUI's basic functionality.
@@ -18,14 +20,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Memory.AllowManualUnload',
     name: 'Allow manual unload of models and execution cache via user command',
     type: 'hidden',
-    defaultValue: true,
+    defaultValue: isCloud ? false : true,
     versionAdded: '1.18.0'
   },
   {
     id: 'Comfy.Validation.Workflows',
     name: 'Validate workflows',
     type: 'boolean',
-    defaultValue: true
+    defaultValue: isCloud ? false : true
   },
   {
     id: 'Comfy.NodeSearchBoxImpl',
@@ -115,6 +117,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: true,
     versionAdded: '1.18.1'
   },
+  {
+    id: 'Comfy.Sidebar.Style',
+    category: ['Appearance', 'Sidebar', 'Style'],
+    name: 'Sidebar style',
+    type: 'combo',
+    options: ['floating', 'connected'],
+    defaultValue: 'connected'
+  },
   {
     id: 'Comfy.TextareaWidget.FontSize',
     category: ['Appearance', 'Node Widget', 'TextareaWidget', 'FontSize'],
@@ -155,7 +165,8 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultsByInstallVersion: {
       '1.25.0': 'legacy'
     },
-    onChange: async (newValue: string) => {
+    onChange: async (newValue: string, oldValue?: string) => {
+      if (!oldValue) return
       const settingStore = useSettingStore()
 
       if (newValue === 'standard') {
@@ -272,8 +283,8 @@ export const CORE_SETTINGS: SettingParams[] = [
   {
     id: 'Comfy.Workflow.ShowMissingModelsWarning',
     name: 'Show missing models warning',
-    type: 'boolean',
-    defaultValue: true,
+    type: isCloud ? 'hidden' : 'boolean',
+    defaultValue: isCloud ? false : true,
     experimental: true
   },
   {
@@ -379,7 +390,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Automatically load all model folders',
     tooltip:
       'If true, all folders will load as soon as you open the model library (this may cause delays while it loads). If false, root level model folders will only load once you click on them.',
-    type: 'boolean',
+    type: isCloud ? 'hidden' : 'boolean',
     defaultValue: false
   },
   {
@@ -549,13 +560,15 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 'Top',
     name: 'Use new menu',
     type: 'combo',
-    options: ['Disabled', 'Top', 'Bottom'],
+    options: ['Disabled', 'Top'],
     tooltip:
       'Menu bar position. On mobile devices, the menu is always shown at the top.',
     migrateDeprecatedValue: (value: string) => {
       // Floating is now supported by dragging the docked actionbar off.
       if (value === 'Floating') {
         return 'Top'
+      } else if (value === 'Bottom') {
+        return 'Top'
       }
       return value
     }
@@ -564,10 +577,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Workflow.WorkflowTabsPosition',
     name: 'Opened workflows position',
     type: 'combo',
-    options: ['Sidebar', 'Topbar', 'Topbar (2nd-row)'],
-    // Default to topbar (2nd-row) if the window is less than 1536px(2xl) wide.
-    defaultValue: () =>
-      window.innerWidth < 1536 ? 'Topbar (2nd-row)' : 'Topbar'
+    options: ['Sidebar', 'Topbar'],
+    defaultValue: 'Topbar',
+    migrateDeprecatedValue: (value: string) => {
+      if (value === 'Topbar (2nd-row)') {
+        return 'Topbar'
+      }
+      return value
+    }
   },
   {
     id: 'Comfy.Graph.CanvasMenu',
@@ -582,7 +599,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     tooltip:
       'The maximum number of tasks added to the queue at one button click',
     type: 'number',
-    defaultValue: 100,
+    defaultValue: isCloud ? 4 : 100,
     versionAdded: '1.3.5'
   },
   {
@@ -935,7 +952,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Minimap.Visible',
     name: 'Display minimap on canvas',
     type: 'hidden',
-    defaultValue: true,
+    defaultValue: window.innerWidth >= breakpointsTailwind.lg,
     versionAdded: '1.25.0'
   },
   {
@@ -1041,20 +1058,30 @@ export const CORE_SETTINGS: SettingParams[] = [
    */
   {
     id: 'Comfy.VueNodes.Enabled',
-    name: 'Enable Vue node rendering (hidden)',
-    type: 'hidden',
+    name: 'Modern Node Design (Vue Nodes)',
+    type: 'boolean',
     tooltip:
-      'Render nodes as Vue components instead of canvas. Hidden; toggle via Experimental keybinding.',
+      'Modern: DOM-based rendering with enhanced interactivity, native browser features, and updated visual design. Classic: Traditional canvas rendering.',
     defaultValue: false,
     experimental: true,
     versionAdded: '1.27.1'
   },
+  {
+    id: 'Comfy.VueNodes.AutoScaleLayout',
+    name: 'Auto-scale layout (Vue nodes)',
+    tooltip:
+      'Automatically scale node positions when switching to Vue rendering to prevent overlap',
+    type: 'boolean',
+    experimental: true,
+    defaultValue: false,
+    versionAdded: '1.30.3'
+  },
   {
     id: 'Comfy.Assets.UseAssetAPI',
     name: 'Use Asset API for model library',
     type: 'hidden',
     tooltip: 'Use new Asset API for model browsing',
-    defaultValue: false,
+    defaultValue: isCloud ? true : false,
     experimental: true
   }
 ]
diff --git a/src/platform/support/config.ts b/src/platform/support/config.ts
new file mode 100644
index 000000000..77458ed16
--- /dev/null
+++ b/src/platform/support/config.ts
@@ -0,0 +1,17 @@
+import { isCloud } from '@/platform/distribution/types'
+
+/**
+ * Zendesk ticket form field ID for the distribution tag.
+ * This field is used to categorize support requests by their source (cloud vs OSS).
+ */
+const DISTRIBUTION_FIELD_ID = 'tf_42243568391700'
+
+/**
+ * Support URLs for the ComfyUI platform.
+ * The URL varies based on whether the application is running in Cloud or OSS distribution.
+ *
+ * - Cloud: Includes 'ccloud' tag for identifying cloud-based support requests
+ * - OSS: Includes 'oss' tag for identifying open-source support requests
+ */
+const TAG = isCloud ? 'ccloud' : 'oss'
+export const SUPPORT_URL = `https://support.comfy.org/hc/en-us/requests/new?${DISTRIBUTION_FIELD_ID}=${TAG}`
diff --git a/src/platform/telemetry/index.ts b/src/platform/telemetry/index.ts
new file mode 100644
index 000000000..83d7f2c9f
--- /dev/null
+++ b/src/platform/telemetry/index.ts
@@ -0,0 +1,42 @@
+/**
+ * Telemetry Provider - OSS Build Safety
+ *
+ * CRITICAL: OSS Build Safety
+ * This module is conditionally compiled based on distribution. When building
+ * the open source version (DISTRIBUTION unset), this entire module and its dependencies
+ * are excluded through via tree-shaking.
+ *
+ * To verify OSS builds exclude this code:
+ * 1. `DISTRIBUTION= pnpm build` (OSS build)
+ * 2. `grep -RinE --include='*.js' 'trackWorkflow|trackEvent|mixpanel' dist/` (should find nothing)
+ * 3. Check dist/assets/*.js files contain no tracking code
+ *
+ * This approach maintains complete separation between cloud and OSS builds
+ * while ensuring the open source version contains no telemetry dependencies.
+ */
+import { isCloud } from '@/platform/distribution/types'
+
+import { MixpanelTelemetryProvider } from './providers/cloud/MixpanelTelemetryProvider'
+import type { TelemetryProvider } from './types'
+
+// Singleton instance
+let _telemetryProvider: TelemetryProvider | null = null
+
+/**
+ * Telemetry factory - conditionally creates provider based on distribution
+ * Returns singleton instance.
+ *
+ * CRITICAL: This returns undefined in OSS builds. There is no telemetry provider
+ * for OSS builds and all tracking calls are no-ops.
+ */
+export function useTelemetry(): TelemetryProvider | null {
+  if (_telemetryProvider === null) {
+    // Use distribution check for tree-shaking
+    if (isCloud) {
+      _telemetryProvider = new MixpanelTelemetryProvider()
+    }
+    // For OSS builds, _telemetryProvider stays null
+  }
+
+  return _telemetryProvider
+}
diff --git a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
new file mode 100644
index 000000000..d11c88454
--- /dev/null
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
@@ -0,0 +1,446 @@
+import type { OverridedMixpanel } from 'mixpanel-browser'
+
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import {
+  checkForCompletedTopup as checkTopupUtil,
+  clearTopupTracking as clearTopupUtil,
+  startTopupTracking as startTopupUtil
+} from '@/platform/telemetry/topupTracker'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
+import { app } from '@/scripts/app'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+import { reduceAllNodes } from '@/utils/graphTraversalUtil'
+
+import type {
+  AuthMetadata,
+  CreditTopupMetadata,
+  ExecutionContext,
+  ExecutionTriggerSource,
+  ExecutionErrorMetadata,
+  ExecutionSuccessMetadata,
+  HelpCenterClosedMetadata,
+  HelpCenterOpenedMetadata,
+  HelpResourceClickedMetadata,
+  NodeSearchMetadata,
+  NodeSearchResultMetadata,
+  PageVisibilityMetadata,
+  RunButtonProperties,
+  SettingChangedMetadata,
+  SurveyResponses,
+  TabCountMetadata,
+  TelemetryEventName,
+  TelemetryEventProperties,
+  TelemetryProvider,
+  TemplateFilterMetadata,
+  TemplateLibraryClosedMetadata,
+  TemplateLibraryMetadata,
+  TemplateMetadata,
+  UiButtonClickMetadata,
+  WorkflowCreatedMetadata,
+  WorkflowImportMetadata
+} from '../../types'
+import { TelemetryEvents } from '../../types'
+import { normalizeSurveyResponses } from '../../utils/surveyNormalization'
+
+interface QueuedEvent {
+  eventName: TelemetryEventName
+  properties?: TelemetryEventProperties
+}
+
+/**
+ * Mixpanel Telemetry Provider - Cloud Build Implementation
+ *
+ * CRITICAL: OSS Build Safety
+ * This provider integrates with Mixpanel for cloud telemetry tracking.
+ * Entire file is tree-shaken away in OSS builds (DISTRIBUTION unset).
+ *
+ * To verify OSS builds exclude this code:
+ * 1. `DISTRIBUTION= pnpm build` (OSS build)
+ * 2. `grep -RinE --include='*.js' 'trackWorkflow|trackEvent|mixpanel' dist/` (should find nothing)
+ * 3. Check dist/assets/*.js files contain no tracking code
+ */
+export class MixpanelTelemetryProvider implements TelemetryProvider {
+  private isEnabled = true
+  private mixpanel: OverridedMixpanel | null = null
+  private eventQueue: QueuedEvent[] = []
+  private isInitialized = false
+  private lastTriggerSource: ExecutionTriggerSource | undefined
+
+  constructor() {
+    const token = window.__CONFIG__?.mixpanel_token
+
+    if (token) {
+      try {
+        // Dynamic import to avoid bundling mixpanel in OSS builds
+        void import('mixpanel-browser')
+          .then((mixpanelModule) => {
+            this.mixpanel = mixpanelModule.default
+            this.mixpanel.init(token, {
+              debug: import.meta.env.DEV,
+              track_pageview: true,
+              api_host: 'https://mp.comfy.org',
+              cross_subdomain_cookie: true,
+              persistence: 'cookie',
+              loaded: () => {
+                this.isInitialized = true
+                this.flushEventQueue() // flush events that were queued while initializing
+                useCurrentUser().onUserResolved((user) => {
+                  if (this.mixpanel && user.id) {
+                    this.mixpanel.identify(user.id)
+                  }
+                })
+              }
+            })
+          })
+          .catch((error) => {
+            console.error('Failed to load Mixpanel:', error)
+            this.isEnabled = false
+          })
+      } catch (error) {
+        console.error('Failed to initialize Mixpanel:', error)
+        this.isEnabled = false
+      }
+    } else {
+      console.warn('Mixpanel token not provided in runtime config')
+      this.isEnabled = false
+    }
+  }
+
+  private flushEventQueue(): void {
+    if (!this.isInitialized || !this.mixpanel) {
+      return
+    }
+
+    while (this.eventQueue.length > 0) {
+      const event = this.eventQueue.shift()!
+      try {
+        this.mixpanel.track(event.eventName, event.properties || {})
+      } catch (error) {
+        console.error('Failed to track queued event:', error)
+      }
+    }
+  }
+
+  private trackEvent(
+    eventName: TelemetryEventName,
+    properties?: TelemetryEventProperties
+  ): void {
+    if (!this.isEnabled) {
+      return
+    }
+
+    const event: QueuedEvent = { eventName, properties }
+
+    if (this.isInitialized && this.mixpanel) {
+      // Mixpanel is ready, track immediately
+      try {
+        this.mixpanel.track(eventName, properties || {})
+      } catch (error) {
+        console.error('Failed to track event:', error)
+      }
+    } else {
+      // Mixpanel not ready yet, queue the event
+      this.eventQueue.push(event)
+    }
+  }
+
+  trackSignupOpened(): void {
+    this.trackEvent(TelemetryEvents.USER_SIGN_UP_OPENED)
+  }
+
+  trackAuth(metadata: AuthMetadata): void {
+    this.trackEvent(TelemetryEvents.USER_AUTH_COMPLETED, metadata)
+  }
+
+  trackUserLoggedIn(): void {
+    this.trackEvent(TelemetryEvents.USER_LOGGED_IN)
+  }
+
+  trackSubscription(event: 'modal_opened' | 'subscribe_clicked'): void {
+    const eventName =
+      event === 'modal_opened'
+        ? TelemetryEvents.SUBSCRIPTION_REQUIRED_MODAL_OPENED
+        : TelemetryEvents.SUBSCRIBE_NOW_BUTTON_CLICKED
+
+    this.trackEvent(eventName)
+  }
+
+  trackAddApiCreditButtonClicked(): void {
+    this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
+  }
+
+  trackMonthlySubscriptionSucceeded(): void {
+    this.trackEvent(TelemetryEvents.MONTHLY_SUBSCRIPTION_SUCCEEDED)
+  }
+
+  trackApiCreditTopupButtonPurchaseClicked(amount: number): void {
+    const metadata: CreditTopupMetadata = {
+      credit_amount: amount
+    }
+    this.trackEvent(
+      TelemetryEvents.API_CREDIT_TOPUP_BUTTON_PURCHASE_CLICKED,
+      metadata
+    )
+  }
+
+  trackApiCreditTopupSucceeded(): void {
+    this.trackEvent(TelemetryEvents.API_CREDIT_TOPUP_SUCCEEDED)
+  }
+
+  // Credit top-up tracking methods (composition with utility functions)
+  startTopupTracking(): void {
+    startTopupUtil()
+  }
+
+  checkForCompletedTopup(events: any[] | undefined | null): boolean {
+    return checkTopupUtil(events)
+  }
+
+  clearTopupTracking(): void {
+    clearTopupUtil()
+  }
+
+  trackRunButton(options?: {
+    subscribe_to_run?: boolean
+    trigger_source?: ExecutionTriggerSource
+  }): void {
+    const executionContext = this.getExecutionContext()
+
+    const runButtonProperties: RunButtonProperties = {
+      subscribe_to_run: options?.subscribe_to_run || false,
+      workflow_type: executionContext.is_template ? 'template' : 'custom',
+      workflow_name: executionContext.workflow_name ?? 'untitled',
+      custom_node_count: executionContext.custom_node_count,
+      total_node_count: executionContext.total_node_count,
+      subgraph_count: executionContext.subgraph_count,
+      has_api_nodes: executionContext.has_api_nodes,
+      api_node_names: executionContext.api_node_names,
+      trigger_source: options?.trigger_source
+    }
+
+    this.lastTriggerSource = options?.trigger_source
+    this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, runButtonProperties)
+  }
+
+  trackSurvey(
+    stage: 'opened' | 'submitted',
+    responses?: SurveyResponses
+  ): void {
+    const eventName =
+      stage === 'opened'
+        ? TelemetryEvents.USER_SURVEY_OPENED
+        : TelemetryEvents.USER_SURVEY_SUBMITTED
+
+    // Apply normalization to survey responses
+    const normalizedResponses = responses
+      ? normalizeSurveyResponses(responses)
+      : undefined
+
+    this.trackEvent(eventName, normalizedResponses)
+
+    // If this is a survey submission, also set user properties with normalized data
+    if (stage === 'submitted' && normalizedResponses && this.mixpanel) {
+      try {
+        this.mixpanel.people.set(normalizedResponses)
+      } catch (error) {
+        console.error('Failed to set survey user properties:', error)
+      }
+    }
+  }
+
+  trackEmailVerification(stage: 'opened' | 'requested' | 'completed'): void {
+    let eventName: TelemetryEventName
+
+    switch (stage) {
+      case 'opened':
+        eventName = TelemetryEvents.USER_EMAIL_VERIFY_OPENED
+        break
+      case 'requested':
+        eventName = TelemetryEvents.USER_EMAIL_VERIFY_REQUESTED
+        break
+      case 'completed':
+        eventName = TelemetryEvents.USER_EMAIL_VERIFY_COMPLETED
+        break
+    }
+
+    this.trackEvent(eventName)
+  }
+
+  trackTemplate(metadata: TemplateMetadata): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_WORKFLOW_OPENED, metadata)
+  }
+
+  trackTemplateLibraryOpened(metadata: TemplateLibraryMetadata): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_LIBRARY_OPENED, metadata)
+  }
+
+  trackTemplateLibraryClosed(metadata: TemplateLibraryClosedMetadata): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_LIBRARY_CLOSED, metadata)
+  }
+
+  trackWorkflowImported(metadata: WorkflowImportMetadata): void {
+    this.trackEvent(TelemetryEvents.WORKFLOW_IMPORTED, metadata)
+  }
+
+  trackWorkflowOpened(metadata: WorkflowImportMetadata): void {
+    this.trackEvent(TelemetryEvents.WORKFLOW_OPENED, metadata)
+  }
+
+  trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void {
+    this.trackEvent(TelemetryEvents.PAGE_VISIBILITY_CHANGED, metadata)
+  }
+
+  trackTabCount(metadata: TabCountMetadata): void {
+    this.trackEvent(TelemetryEvents.TAB_COUNT_TRACKING, metadata)
+  }
+
+  trackNodeSearch(metadata: NodeSearchMetadata): void {
+    this.trackEvent(TelemetryEvents.NODE_SEARCH, metadata)
+  }
+
+  trackNodeSearchResultSelected(metadata: NodeSearchResultMetadata): void {
+    this.trackEvent(TelemetryEvents.NODE_SEARCH_RESULT_SELECTED, metadata)
+  }
+
+  trackTemplateFilterChanged(metadata: TemplateFilterMetadata): void {
+    this.trackEvent(TelemetryEvents.TEMPLATE_FILTER_CHANGED, metadata)
+  }
+
+  trackHelpCenterOpened(metadata: HelpCenterOpenedMetadata): void {
+    this.trackEvent(TelemetryEvents.HELP_CENTER_OPENED, metadata)
+  }
+
+  trackHelpResourceClicked(metadata: HelpResourceClickedMetadata): void {
+    this.trackEvent(TelemetryEvents.HELP_RESOURCE_CLICKED, metadata)
+  }
+
+  trackHelpCenterClosed(metadata: HelpCenterClosedMetadata): void {
+    this.trackEvent(TelemetryEvents.HELP_CENTER_CLOSED, metadata)
+  }
+
+  trackWorkflowCreated(metadata: WorkflowCreatedMetadata): void {
+    this.trackEvent(TelemetryEvents.WORKFLOW_CREATED, metadata)
+  }
+
+  trackWorkflowExecution(): void {
+    const context = this.getExecutionContext()
+    const eventContext: ExecutionContext = {
+      ...context,
+      trigger_source: this.lastTriggerSource ?? 'unknown'
+    }
+    this.trackEvent(TelemetryEvents.EXECUTION_START, eventContext)
+    this.lastTriggerSource = undefined
+  }
+
+  trackExecutionError(metadata: ExecutionErrorMetadata): void {
+    this.trackEvent(TelemetryEvents.EXECUTION_ERROR, metadata)
+  }
+
+  trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void {
+    this.trackEvent(TelemetryEvents.EXECUTION_SUCCESS, metadata)
+  }
+
+  trackSettingChanged(metadata: SettingChangedMetadata): void {
+    this.trackEvent(TelemetryEvents.SETTING_CHANGED, metadata)
+  }
+
+  trackUiButtonClicked(metadata: UiButtonClickMetadata): void {
+    this.trackEvent(TelemetryEvents.UI_BUTTON_CLICKED, metadata)
+  }
+
+  getExecutionContext(): ExecutionContext {
+    const workflowStore = useWorkflowStore()
+    const templatesStore = useWorkflowTemplatesStore()
+    const nodeDefStore = useNodeDefStore()
+    const activeWorkflow = workflowStore.activeWorkflow
+
+    // Calculate node metrics in a single traversal
+    type NodeMetrics = {
+      custom_node_count: number
+      api_node_count: number
+      subgraph_count: number
+      total_node_count: number
+      has_api_nodes: boolean
+      api_node_names: string[]
+    }
+
+    const nodeCounts = reduceAllNodes<NodeMetrics>(
+      app.graph,
+      (metrics, node) => {
+        const nodeDef = nodeDefStore.nodeDefsByName[node.type]
+        const isCustomNode =
+          nodeDef?.nodeSource?.type === NodeSourceType.CustomNodes
+        const isApiNode = nodeDef?.api_node === true
+        const isSubgraph = node.isSubgraphNode?.() === true
+
+        if (isApiNode) {
+          metrics.has_api_nodes = true
+          const canonicalName = nodeDef?.name
+          if (
+            canonicalName &&
+            !metrics.api_node_names.includes(canonicalName)
+          ) {
+            metrics.api_node_names.push(canonicalName)
+          }
+        }
+
+        metrics.custom_node_count += isCustomNode ? 1 : 0
+        metrics.api_node_count += isApiNode ? 1 : 0
+        metrics.subgraph_count += isSubgraph ? 1 : 0
+        metrics.total_node_count += 1
+
+        return metrics
+      },
+      {
+        custom_node_count: 0,
+        api_node_count: 0,
+        subgraph_count: 0,
+        total_node_count: 0,
+        has_api_nodes: false,
+        api_node_names: []
+      }
+    )
+
+    if (activeWorkflow?.filename) {
+      const isTemplate = templatesStore.knownTemplateNames.has(
+        activeWorkflow.filename
+      )
+
+      if (isTemplate) {
+        const template = templatesStore.getTemplateByName(
+          activeWorkflow.filename
+        )
+
+        const englishMetadata = templatesStore.getEnglishMetadata(
+          activeWorkflow.filename
+        )
+
+        return {
+          is_template: true,
+          workflow_name: activeWorkflow.filename,
+          template_source: template?.sourceModule,
+          template_category: englishMetadata?.category ?? template?.category,
+          template_tags: englishMetadata?.tags ?? template?.tags,
+          template_models: englishMetadata?.models ?? template?.models,
+          template_use_case: englishMetadata?.useCase ?? template?.useCase,
+          template_license: englishMetadata?.license ?? template?.license,
+          ...nodeCounts
+        }
+      }
+
+      return {
+        is_template: false,
+        workflow_name: activeWorkflow.filename,
+        ...nodeCounts
+      }
+    }
+
+    return {
+      is_template: false,
+      workflow_name: undefined,
+      ...nodeCounts
+    }
+  }
+}
diff --git a/src/platform/telemetry/topupTracker.ts b/src/platform/telemetry/topupTracker.ts
new file mode 100644
index 000000000..ab8d40be8
--- /dev/null
+++ b/src/platform/telemetry/topupTracker.ts
@@ -0,0 +1,61 @@
+import { useTelemetry } from '@/platform/telemetry'
+import type { AuditLog } from '@/services/customerEventsService'
+
+const STORAGE_KEY = 'pending_topup_timestamp'
+const MAX_AGE_MS = 24 * 60 * 60 * 1000 // 24 hours
+
+/**
+ * Start tracking a credit top-up purchase.
+ * Call this before opening the Stripe checkout window.
+ */
+export function startTopupTracking(): void {
+  localStorage.setItem(STORAGE_KEY, Date.now().toString())
+}
+
+/**
+ * Check if a pending top-up has completed by looking for a credit_added event
+ * that occurred after the tracking started.
+ *
+ * @param events - Array of audit log events to check
+ * @returns true if a completed top-up was detected and telemetry was sent
+ */
+export function checkForCompletedTopup(
+  events: AuditLog[] | undefined | null
+): boolean {
+  const timestampStr = localStorage.getItem(STORAGE_KEY)
+  if (!timestampStr) return false
+
+  const timestamp = parseInt(timestampStr, 10)
+
+  // Auto-cleanup if expired (older than 24 hours)
+  if (Date.now() - timestamp > MAX_AGE_MS) {
+    localStorage.removeItem(STORAGE_KEY)
+    return false
+  }
+
+  if (!events || events.length === 0) return false
+
+  // Find credit_added event that occurred after our timestamp
+  const completedTopup = events.find(
+    (e) =>
+      e.event_type === 'credit_added' &&
+      e.createdAt &&
+      new Date(e.createdAt).getTime() > timestamp
+  )
+
+  if (completedTopup) {
+    useTelemetry()?.trackApiCreditTopupSucceeded()
+    localStorage.removeItem(STORAGE_KEY)
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Clear any pending top-up tracking.
+ * Useful for testing or manual cleanup.
+ */
+export function clearTopupTracking(): void {
+  localStorage.removeItem(STORAGE_KEY)
+}
diff --git a/src/platform/telemetry/types.ts b/src/platform/telemetry/types.ts
new file mode 100644
index 000000000..d089c886a
--- /dev/null
+++ b/src/platform/telemetry/types.ts
@@ -0,0 +1,436 @@
+/**
+ * Telemetry Provider Interface
+ *
+ * CRITICAL: OSS Build Safety
+ * This module is excluded from OSS builds via conditional compilation.
+ * When DISTRIBUTION is unset (OSS builds), Vite's tree-shaking removes this code entirely,
+ * ensuring the open source build contains no telemetry dependencies.
+ *
+ * To verify OSS builds are clean:
+ * 1. `DISTRIBUTION= pnpm build` (OSS build)
+ * 2. `grep -RinE --include='*.js' 'trackWorkflow|trackEvent|mixpanel' dist/` (should find nothing)
+ * 3. Check dist/assets/*.js files contain no tracking code
+ */
+
+/**
+ * Authentication metadata for sign-up tracking
+ */
+export interface AuthMetadata {
+  method?: 'email' | 'google' | 'github'
+  is_new_user?: boolean
+  referrer_url?: string
+  utm_source?: string
+  utm_medium?: string
+  utm_campaign?: string
+}
+
+/**
+ * Survey response data for user profiling
+ * Maps 1-to-1 with actual survey fields
+ */
+export interface SurveyResponses {
+  familiarity?: string
+  industry?: string
+  useCase?: string
+  making?: string[]
+}
+
+/**
+ * Run button tracking properties
+ */
+export interface RunButtonProperties {
+  subscribe_to_run: boolean
+  workflow_type: 'template' | 'custom'
+  workflow_name: string
+  custom_node_count: number
+  total_node_count: number
+  subgraph_count: number
+  has_api_nodes: boolean
+  api_node_names: string[]
+  trigger_source?: ExecutionTriggerSource
+}
+
+/**
+ * Execution context for workflow tracking
+ */
+export interface ExecutionContext {
+  is_template: boolean
+  workflow_name?: string
+  // Template metadata (only present when is_template = true)
+  template_source?: string
+  template_category?: string
+  template_tags?: string[]
+  template_models?: string[]
+  template_use_case?: string
+  template_license?: string
+  // Node composition metrics
+  custom_node_count: number
+  api_node_count: number
+  subgraph_count: number
+  total_node_count: number
+  has_api_nodes: boolean
+  api_node_names: string[]
+  trigger_source?: ExecutionTriggerSource
+}
+
+/**
+ * Execution error metadata
+ */
+export interface ExecutionErrorMetadata {
+  jobId: string
+  nodeId?: string
+  nodeType?: string
+  error?: string
+}
+
+/**
+ * Execution success metadata
+ */
+export interface ExecutionSuccessMetadata {
+  jobId: string
+}
+
+/**
+ * Template metadata for workflow tracking
+ */
+export interface TemplateMetadata {
+  workflow_name: string
+  template_source?: string
+  template_category?: string
+  template_tags?: string[]
+  template_models?: string[]
+  template_use_case?: string
+  template_license?: string
+}
+
+/**
+ * Credit topup metadata
+ */
+export interface CreditTopupMetadata {
+  credit_amount: number
+}
+
+/**
+ * Workflow import metadata
+ */
+export interface WorkflowImportMetadata {
+  missing_node_count: number
+  missing_node_types: string[]
+  /**
+   * The source of the workflow open/import action
+   */
+  open_source?: 'file_button' | 'file_drop' | 'template' | 'unknown'
+}
+
+/**
+ * Workflow open metadata
+ */
+/**
+ * Enumerated sources for workflow open/import actions.
+ */
+export type WorkflowOpenSource = NonNullable<
+  WorkflowImportMetadata['open_source']
+>
+
+/**
+ * Template library metadata
+ */
+export interface TemplateLibraryMetadata {
+  source: 'sidebar' | 'menu' | 'command'
+}
+
+/**
+ * Template library closed metadata
+ */
+export interface TemplateLibraryClosedMetadata {
+  template_selected: boolean
+  time_spent_seconds: number
+}
+
+/**
+ * Page visibility metadata
+ */
+export interface PageVisibilityMetadata {
+  visibility_state: 'visible' | 'hidden'
+}
+
+/**
+ * Tab count metadata
+ */
+export interface TabCountMetadata {
+  tab_count: number
+}
+
+/**
+ * Settings change metadata
+ */
+export interface SettingChangedMetadata {
+  setting_id: string
+  previous_value?: unknown
+  new_value?: unknown
+}
+
+/**
+ * Node search metadata
+ */
+export interface NodeSearchMetadata {
+  query: string
+}
+
+/**
+ * Node search result selection metadata
+ */
+export interface NodeSearchResultMetadata {
+  node_type: string
+  last_query: string
+}
+
+/**
+ * Template filter tracking metadata
+ */
+export interface TemplateFilterMetadata {
+  search_query?: string
+  selected_models: string[]
+  selected_use_cases: string[]
+  selected_runs_on: string[]
+  sort_by:
+    | 'default'
+    | 'alphabetical'
+    | 'newest'
+    | 'vram-low-to-high'
+    | 'model-size-low-to-high'
+  filtered_count: number
+  total_count: number
+}
+
+/**
+ * UI button click tracking metadata
+ */
+export interface UiButtonClickMetadata {
+  /** Canonical identifier for the button (e.g., "comfy_logo") */
+  button_id: string
+}
+
+/**
+ * Help center opened metadata
+ */
+export interface HelpCenterOpenedMetadata {
+  source: 'menu' | 'topbar' | 'sidebar'
+}
+
+/**
+ * Help resource clicked metadata
+ */
+export interface HelpResourceClickedMetadata {
+  resource_type:
+    | 'docs'
+    | 'discord'
+    | 'github'
+    | 'help_feedback'
+    | 'manager'
+    | 'release_notes'
+  is_external: boolean
+  source:
+    | 'menu'
+    | 'help_center'
+    | 'error_dialog'
+    | 'credits_panel'
+    | 'subscription'
+}
+
+/**
+ * Help center closed metadata
+ */
+export interface HelpCenterClosedMetadata {
+  time_spent_seconds: number
+}
+
+/**
+ * Workflow created metadata
+ */
+export interface WorkflowCreatedMetadata {
+  workflow_type: 'blank' | 'default'
+  previous_workflow_had_nodes: boolean
+}
+
+/**
+ * Core telemetry provider interface
+ */
+export interface TelemetryProvider {
+  // Authentication flow events
+  trackSignupOpened(): void
+  trackAuth(metadata: AuthMetadata): void
+  trackUserLoggedIn(): void
+
+  // Subscription flow events
+  trackSubscription(event: 'modal_opened' | 'subscribe_clicked'): void
+  trackMonthlySubscriptionSucceeded(): void
+  trackAddApiCreditButtonClicked(): void
+  trackApiCreditTopupButtonPurchaseClicked(amount: number): void
+  trackApiCreditTopupSucceeded(): void
+  trackRunButton(options?: {
+    subscribe_to_run?: boolean
+    trigger_source?: ExecutionTriggerSource
+  }): void
+
+  // Credit top-up tracking (composition with internal utilities)
+  startTopupTracking(): void
+  checkForCompletedTopup(events: any[] | undefined | null): boolean
+  clearTopupTracking(): void
+
+  // Survey flow events
+  trackSurvey(stage: 'opened' | 'submitted', responses?: SurveyResponses): void
+
+  // Email verification events
+  trackEmailVerification(stage: 'opened' | 'requested' | 'completed'): void
+
+  // Template workflow events
+  trackTemplate(metadata: TemplateMetadata): void
+  trackTemplateLibraryOpened(metadata: TemplateLibraryMetadata): void
+  trackTemplateLibraryClosed(metadata: TemplateLibraryClosedMetadata): void
+
+  // Workflow management events
+  trackWorkflowImported(metadata: WorkflowImportMetadata): void
+  trackWorkflowOpened(metadata: WorkflowImportMetadata): void
+
+  // Page visibility events
+  trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void
+
+  // Tab tracking events
+  trackTabCount(metadata: TabCountMetadata): void
+
+  // Node search analytics events
+  trackNodeSearch(metadata: NodeSearchMetadata): void
+  trackNodeSearchResultSelected(metadata: NodeSearchResultMetadata): void
+
+  // Template filter tracking events
+  trackTemplateFilterChanged(metadata: TemplateFilterMetadata): void
+
+  // Help center events
+  trackHelpCenterOpened(metadata: HelpCenterOpenedMetadata): void
+  trackHelpResourceClicked(metadata: HelpResourceClickedMetadata): void
+  trackHelpCenterClosed(metadata: HelpCenterClosedMetadata): void
+
+  // Workflow creation events
+  trackWorkflowCreated(metadata: WorkflowCreatedMetadata): void
+
+  // Workflow execution events
+  trackWorkflowExecution(): void
+  trackExecutionError(metadata: ExecutionErrorMetadata): void
+  trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void
+
+  // Settings events
+  trackSettingChanged(metadata: SettingChangedMetadata): void
+
+  // Generic UI button click events
+  trackUiButtonClicked(metadata: UiButtonClickMetadata): void
+}
+
+/**
+ * Telemetry event constants
+ *
+ * Event naming conventions:
+ * - 'app:' prefix: UI/user interaction events
+ * - No prefix: Backend/system events (execution lifecycle)
+ */
+export const TelemetryEvents = {
+  // Authentication Flow
+  USER_SIGN_UP_OPENED: 'app:user_sign_up_opened',
+  USER_AUTH_COMPLETED: 'app:user_auth_completed',
+  USER_LOGGED_IN: 'app:user_logged_in',
+
+  // Subscription Flow
+  RUN_BUTTON_CLICKED: 'app:run_button_click',
+  SUBSCRIPTION_REQUIRED_MODAL_OPENED: 'app:subscription_required_modal_opened',
+  SUBSCRIBE_NOW_BUTTON_CLICKED: 'app:subscribe_now_button_clicked',
+  MONTHLY_SUBSCRIPTION_SUCCEEDED: 'app:monthly_subscription_succeeded',
+  ADD_API_CREDIT_BUTTON_CLICKED: 'app:add_api_credit_button_clicked',
+  API_CREDIT_TOPUP_BUTTON_PURCHASE_CLICKED:
+    'app:api_credit_topup_button_purchase_clicked',
+  API_CREDIT_TOPUP_SUCCEEDED: 'app:api_credit_topup_succeeded',
+
+  // Onboarding Survey
+  USER_SURVEY_OPENED: 'app:user_survey_opened',
+  USER_SURVEY_SUBMITTED: 'app:user_survey_submitted',
+
+  // Email Verification
+  USER_EMAIL_VERIFY_OPENED: 'app:user_email_verify_opened',
+  USER_EMAIL_VERIFY_REQUESTED: 'app:user_email_verify_requested',
+  USER_EMAIL_VERIFY_COMPLETED: 'app:user_email_verify_completed',
+
+  // Template Tracking
+  TEMPLATE_WORKFLOW_OPENED: 'app:template_workflow_opened',
+  TEMPLATE_LIBRARY_OPENED: 'app:template_library_opened',
+  TEMPLATE_LIBRARY_CLOSED: 'app:template_library_closed',
+
+  // Workflow Management
+  WORKFLOW_IMPORTED: 'app:workflow_imported',
+  WORKFLOW_OPENED: 'app:workflow_opened',
+
+  // Page Visibility
+  PAGE_VISIBILITY_CHANGED: 'app:page_visibility_changed',
+
+  // Tab Tracking
+  TAB_COUNT_TRACKING: 'app:tab_count_tracking',
+
+  // Node Search Analytics
+  NODE_SEARCH: 'app:node_search',
+  NODE_SEARCH_RESULT_SELECTED: 'app:node_search_result_selected',
+
+  // Template Filter Analytics
+  TEMPLATE_FILTER_CHANGED: 'app:template_filter_changed',
+
+  // Settings
+  SETTING_CHANGED: 'app:setting_changed',
+
+  // Help Center Analytics
+  HELP_CENTER_OPENED: 'app:help_center_opened',
+  HELP_RESOURCE_CLICKED: 'app:help_resource_clicked',
+  HELP_CENTER_CLOSED: 'app:help_center_closed',
+
+  // Workflow Creation
+  WORKFLOW_CREATED: 'app:workflow_created',
+
+  // Execution Lifecycle
+  EXECUTION_START: 'execution_start',
+  EXECUTION_ERROR: 'execution_error',
+  EXECUTION_SUCCESS: 'execution_success',
+  // Generic UI Button Click
+  UI_BUTTON_CLICKED: 'app:ui_button_clicked'
+} as const
+
+export type TelemetryEventName =
+  (typeof TelemetryEvents)[keyof typeof TelemetryEvents]
+
+export type ExecutionTriggerSource =
+  | 'button'
+  | 'keybinding'
+  | 'legacy_ui'
+  | 'unknown'
+
+/**
+ * Union type for all possible telemetry event properties
+ */
+export type TelemetryEventProperties =
+  | AuthMetadata
+  | SurveyResponses
+  | TemplateMetadata
+  | ExecutionContext
+  | RunButtonProperties
+  | ExecutionErrorMetadata
+  | ExecutionSuccessMetadata
+  | CreditTopupMetadata
+  | WorkflowImportMetadata
+  | TemplateLibraryMetadata
+  | TemplateLibraryClosedMetadata
+  | PageVisibilityMetadata
+  | TabCountMetadata
+  | NodeSearchMetadata
+  | NodeSearchResultMetadata
+  | TemplateFilterMetadata
+  | SettingChangedMetadata
+  | UiButtonClickMetadata
+  | HelpCenterOpenedMetadata
+  | HelpResourceClickedMetadata
+  | HelpCenterClosedMetadata
+  | WorkflowCreatedMetadata
diff --git a/src/platform/telemetry/utils/__tests__/surveyNormalization.test.ts b/src/platform/telemetry/utils/__tests__/surveyNormalization.test.ts
new file mode 100644
index 000000000..ea85bd6eb
--- /dev/null
+++ b/src/platform/telemetry/utils/__tests__/surveyNormalization.test.ts
@@ -0,0 +1,683 @@
+/**
+ * Unit tests for survey normalization utilities
+ * Uses real example data from migration script to verify categorization accuracy
+ */
+
+import { describe, expect, it } from 'vitest'
+
+import {
+  normalizeIndustry,
+  normalizeUseCase,
+  normalizeSurveyResponses
+} from '../surveyNormalization'
+
+describe('normalizeIndustry', () => {
+  describe('Film / TV / Animation category', () => {
+    it('should categorize film and television production', () => {
+      expect(normalizeIndustry('Film and television production')).toBe(
+        'Film / TV / Animation'
+      )
+      expect(normalizeIndustry('film')).toBe('Film / TV / Animation')
+      expect(normalizeIndustry('TV production')).toBe('Film / TV / Animation')
+      expect(normalizeIndustry('animation studio')).toBe(
+        'Film / TV / Animation'
+      )
+      expect(normalizeIndustry('VFX artist')).toBe('Film / TV / Animation')
+      expect(normalizeIndustry('cinema')).toBe('Film / TV / Animation')
+      expect(normalizeIndustry('documentary filmmaker')).toBe(
+        'Film / TV / Animation'
+      )
+    })
+
+    it('should handle typos and variations', () => {
+      expect(normalizeIndustry('animtion')).toBe('Film / TV / Animation')
+      expect(normalizeIndustry('film prod')).toBe('Film / TV / Animation')
+      expect(normalizeIndustry('movie production')).toBe(
+        'Film / TV / Animation'
+      )
+    })
+  })
+
+  describe('Marketing / Advertising / Social Media category', () => {
+    it('should categorize marketing and social media', () => {
+      expect(normalizeIndustry('Marketing & Social Media')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+      expect(normalizeIndustry('digital marketing')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+      expect(normalizeIndustry('YouTube content creation')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+      expect(normalizeIndustry('TikTok marketing')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+      expect(normalizeIndustry('brand promotion')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+      expect(normalizeIndustry('influencer marketing')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+    })
+
+    it('should handle social media variations', () => {
+      expect(normalizeIndustry('social content')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+      expect(normalizeIndustry('content creation')).toBe(
+        'Marketing / Advertising / Social Media'
+      )
+    })
+  })
+
+  describe('Software / IT / AI category', () => {
+    it('should categorize software development', () => {
+      expect(normalizeIndustry('Software Development')).toBe(
+        'Software / IT / AI'
+      )
+      expect(normalizeIndustry('tech startup')).toBe('Software / IT / AI')
+      expect(normalizeIndustry('AI research')).toBe('Software / IT / AI')
+      expect(normalizeIndustry('web development')).toBe('Software / IT / AI')
+      expect(normalizeIndustry('machine learning')).toBe('Software / IT / AI')
+      expect(normalizeIndustry('data science')).toBe('Software / IT / AI')
+      expect(normalizeIndustry('programming')).toBe('Software / IT / AI')
+    })
+
+    it('should handle IT variations', () => {
+      expect(normalizeIndustry('software engineer')).toBe('Software / IT / AI')
+      expect(normalizeIndustry('app developer')).toBe('Software / IT / AI')
+    })
+
+    it('should categorize corporate AI research', () => {
+      expect(normalizeIndustry('corporate AI research')).toBe(
+        'Software / IT / AI'
+      )
+      expect(normalizeIndustry('AI research lab')).toBe('Software / IT / AI')
+      expect(normalizeIndustry('tech company AI research')).toBe(
+        'Software / IT / AI'
+      )
+    })
+  })
+
+  describe('Gaming / Interactive Media category', () => {
+    it('should categorize gaming industry', () => {
+      expect(normalizeIndustry('Indie Game Studio')).toBe(
+        'Gaming / Interactive Media'
+      )
+      expect(normalizeIndustry('game development')).toBe(
+        'Gaming / Interactive Media'
+      )
+      expect(normalizeIndustry('VR development')).toBe(
+        'Gaming / Interactive Media'
+      )
+      expect(normalizeIndustry('interactive media')).toBe(
+        'Gaming / Interactive Media'
+      )
+      expect(normalizeIndustry('metaverse')).toBe('Gaming / Interactive Media')
+      expect(normalizeIndustry('Unity developer')).toBe(
+        'Gaming / Interactive Media'
+      )
+    })
+
+    it('should handle game dev variations', () => {
+      expect(normalizeIndustry('game dev')).toBe('Gaming / Interactive Media')
+      expect(normalizeIndustry('indie games')).toBe(
+        'Gaming / Interactive Media'
+      )
+    })
+  })
+
+  describe('Architecture / Engineering / Construction category', () => {
+    it('should categorize architecture and construction', () => {
+      expect(normalizeIndustry('Architecture firm')).toBe(
+        'Architecture / Engineering / Construction'
+      )
+      expect(normalizeIndustry('construction')).toBe(
+        'Architecture / Engineering / Construction'
+      )
+      expect(normalizeIndustry('civil engineering')).toBe(
+        'Architecture / Engineering / Construction'
+      )
+      expect(normalizeIndustry('interior design')).toBe(
+        'Architecture / Engineering / Construction'
+      )
+      expect(normalizeIndustry('landscape architecture')).toBe(
+        'Architecture / Engineering / Construction'
+      )
+      expect(normalizeIndustry('real estate')).toBe(
+        'Architecture / Engineering / Construction'
+      )
+    })
+  })
+
+  describe('Fashion / Beauty / Retail category', () => {
+    it('should categorize fashion and beauty', () => {
+      expect(normalizeIndustry('Custom Jewelry Design')).toBe(
+        'Fashion / Beauty / Retail'
+      )
+      expect(normalizeIndustry('fashion design')).toBe(
+        'Fashion / Beauty / Retail'
+      )
+      expect(normalizeIndustry('beauty industry')).toBe(
+        'Fashion / Beauty / Retail'
+      )
+      expect(normalizeIndustry('retail store')).toBe(
+        'Fashion / Beauty / Retail'
+      )
+      expect(normalizeIndustry('cosmetics')).toBe('Fashion / Beauty / Retail')
+    })
+  })
+
+  describe('Healthcare / Medical / Life Science category', () => {
+    it('should categorize medical and health fields', () => {
+      expect(normalizeIndustry('Medical Research')).toBe(
+        'Healthcare / Medical / Life Science'
+      )
+      expect(normalizeIndustry('healthcare')).toBe(
+        'Healthcare / Medical / Life Science'
+      )
+      expect(normalizeIndustry('biotech')).toBe(
+        'Healthcare / Medical / Life Science'
+      )
+      expect(normalizeIndustry('pharmaceutical')).toBe(
+        'Healthcare / Medical / Life Science'
+      )
+      expect(normalizeIndustry('clinical research')).toBe(
+        'Healthcare / Medical / Life Science'
+      )
+    })
+  })
+
+  describe('Education / Research category', () => {
+    it('should categorize education and research', () => {
+      expect(normalizeIndustry('university research')).toBe(
+        'Education / Research'
+      )
+      expect(normalizeIndustry('academic')).toBe('Education / Research')
+      expect(normalizeIndustry('teaching')).toBe('Education / Research')
+      expect(normalizeIndustry('student')).toBe('Education / Research')
+      expect(normalizeIndustry('professor')).toBe('Education / Research')
+    })
+
+    it('should categorize academic AI research', () => {
+      expect(normalizeIndustry('academic AI research')).toBe(
+        'Education / Research'
+      )
+      expect(normalizeIndustry('university AI research')).toBe(
+        'Education / Research'
+      )
+      expect(normalizeIndustry('AI research at university')).toBe(
+        'Education / Research'
+      )
+    })
+  })
+
+  describe('Fine Art / Contemporary Art category', () => {
+    it('should categorize art fields', () => {
+      expect(normalizeIndustry('fine art')).toBe('Fine Art / Contemporary Art')
+      expect(normalizeIndustry('contemporary artist')).toBe(
+        'Fine Art / Contemporary Art'
+      )
+      expect(normalizeIndustry('digital art')).toBe(
+        'Fine Art / Contemporary Art'
+      )
+      expect(normalizeIndustry('illustration')).toBe(
+        'Fine Art / Contemporary Art'
+      )
+      expect(normalizeIndustry('gallery')).toBe('Fine Art / Contemporary Art')
+    })
+  })
+
+  describe('Photography / Videography category', () => {
+    it('should categorize photography fields', () => {
+      expect(normalizeIndustry('photography')).toBe('Photography / Videography')
+      expect(normalizeIndustry('wedding photography')).toBe(
+        'Photography / Videography'
+      )
+      expect(normalizeIndustry('commercial photo')).toBe(
+        'Photography / Videography'
+      )
+      expect(normalizeIndustry('videography')).toBe('Photography / Videography')
+    })
+  })
+
+  describe('Product & Industrial Design category', () => {
+    it('should categorize product design', () => {
+      expect(normalizeIndustry('product design')).toBe(
+        'Product & Industrial Design'
+      )
+      expect(normalizeIndustry('industrial design')).toBe(
+        'Product & Industrial Design'
+      )
+      expect(normalizeIndustry('manufacturing')).toBe(
+        'Product & Industrial Design'
+      )
+      expect(normalizeIndustry('3d rendering')).toBe(
+        'Product & Industrial Design'
+      )
+      expect(normalizeIndustry('automotive design')).toBe(
+        'Product & Industrial Design'
+      )
+    })
+  })
+
+  describe('Music / Performing Arts category', () => {
+    it('should categorize music and performing arts', () => {
+      expect(normalizeIndustry('music production')).toBe(
+        'Music / Performing Arts'
+      )
+      expect(normalizeIndustry('theater')).toBe('Music / Performing Arts')
+      expect(normalizeIndustry('concert production')).toBe(
+        'Music / Performing Arts'
+      )
+      expect(normalizeIndustry('live events')).toBe('Music / Performing Arts')
+    })
+  })
+
+  describe('E-commerce / Print-on-Demand / Business category', () => {
+    it('should categorize business fields', () => {
+      expect(normalizeIndustry('ecommerce')).toBe(
+        'E-commerce / Print-on-Demand / Business'
+      )
+      expect(normalizeIndustry('print on demand')).toBe(
+        'E-commerce / Print-on-Demand / Business'
+      )
+      expect(normalizeIndustry('startup')).toBe(
+        'E-commerce / Print-on-Demand / Business'
+      )
+      expect(normalizeIndustry('online store')).toBe(
+        'E-commerce / Print-on-Demand / Business'
+      )
+    })
+  })
+
+  describe('Nonprofit / Government / Public Sector category', () => {
+    it('should categorize nonprofit and government', () => {
+      expect(normalizeIndustry('nonprofit')).toBe(
+        'Nonprofit / Government / Public Sector'
+      )
+      expect(normalizeIndustry('government agency')).toBe(
+        'Nonprofit / Government / Public Sector'
+      )
+      expect(normalizeIndustry('public service')).toBe(
+        'Nonprofit / Government / Public Sector'
+      )
+      expect(normalizeIndustry('charity')).toBe(
+        'Nonprofit / Government / Public Sector'
+      )
+    })
+  })
+
+  describe('Adult / NSFW category', () => {
+    it('should categorize adult content', () => {
+      expect(normalizeIndustry('adult entertainment')).toBe('Adult / NSFW')
+      expect(normalizeIndustry('NSFW content')).toBe('Adult / NSFW')
+    })
+  })
+
+  describe('Other / Undefined category', () => {
+    it('should handle undefined responses', () => {
+      expect(normalizeIndustry('other')).toBe('Other / Undefined')
+      expect(normalizeIndustry('none')).toBe('Other / Undefined')
+      expect(normalizeIndustry('undefined')).toBe('Other / Undefined')
+      expect(normalizeIndustry('unknown')).toBe('Other / Undefined')
+      expect(normalizeIndustry('n/a')).toBe('Other / Undefined')
+      expect(normalizeIndustry('not applicable')).toBe('Other / Undefined')
+      expect(normalizeIndustry('-')).toBe('Other / Undefined')
+      expect(normalizeIndustry('')).toBe('Other / Undefined')
+    })
+
+    it('should handle null and invalid inputs', () => {
+      expect(normalizeIndustry(null as any)).toBe('Other / Undefined')
+      expect(normalizeIndustry(undefined as any)).toBe('Other / Undefined')
+      expect(normalizeIndustry(123 as any)).toBe('Other / Undefined')
+    })
+  })
+
+  describe('Uncategorized responses', () => {
+    it('should preserve unknown creative fields with prefix', () => {
+      expect(normalizeIndustry('Unknown Creative Field')).toBe(
+        'Uncategorized: Unknown Creative Field'
+      )
+      expect(normalizeIndustry('Completely Novel Field')).toBe(
+        'Uncategorized: Completely Novel Field'
+      )
+    })
+  })
+})
+
+describe('normalizeUseCase', () => {
+  describe('Content Creation & Marketing', () => {
+    it('should categorize content creation', () => {
+      expect(normalizeUseCase('YouTube thumbnail generation')).toBe(
+        'Content Creation & Marketing'
+      )
+      expect(normalizeUseCase('social media content')).toBe(
+        'Content Creation & Marketing'
+      )
+      expect(normalizeUseCase('marketing campaigns')).toBe(
+        'Content Creation & Marketing'
+      )
+      expect(normalizeUseCase('TikTok content')).toBe(
+        'Content Creation & Marketing'
+      )
+      expect(normalizeUseCase('brand content creation')).toBe(
+        'Content Creation & Marketing'
+      )
+    })
+  })
+
+  describe('Art & Illustration', () => {
+    it('should categorize art and illustration', () => {
+      expect(normalizeUseCase('Creating concept art for movies')).toBe(
+        'Art & Illustration'
+      )
+      expect(normalizeUseCase('digital art')).toBe('Art & Illustration')
+      expect(normalizeUseCase('character design')).toBe('Art & Illustration')
+      expect(normalizeUseCase('illustration work')).toBe('Art & Illustration')
+      expect(normalizeUseCase('fantasy art')).toBe('Art & Illustration')
+    })
+  })
+
+  describe('Product Visualization & Design', () => {
+    it('should categorize product work', () => {
+      expect(normalizeUseCase('Product mockup creation')).toBe(
+        'Product Visualization & Design'
+      )
+      expect(normalizeUseCase('3d product rendering')).toBe(
+        'Product Visualization & Design'
+      )
+      expect(normalizeUseCase('prototype visualization')).toBe(
+        'Product Visualization & Design'
+      )
+      expect(normalizeUseCase('industrial design')).toBe(
+        'Product Visualization & Design'
+      )
+    })
+  })
+
+  describe('Gaming & Interactive Media', () => {
+    it('should categorize gaming use cases', () => {
+      expect(normalizeUseCase('Game asset generation')).toBe(
+        'Gaming & Interactive Media'
+      )
+      expect(normalizeUseCase('game development')).toBe(
+        'Gaming & Interactive Media'
+      )
+      expect(normalizeUseCase('VR content creation')).toBe(
+        'Gaming & Interactive Media'
+      )
+      expect(normalizeUseCase('interactive media')).toBe(
+        'Gaming & Interactive Media'
+      )
+      expect(normalizeUseCase('game textures')).toBe(
+        'Gaming & Interactive Media'
+      )
+    })
+  })
+
+  describe('Architecture & Construction', () => {
+    it('should categorize architecture use cases', () => {
+      expect(normalizeUseCase('Building visualization')).toBe(
+        'Architecture & Construction'
+      )
+      expect(normalizeUseCase('architectural rendering')).toBe(
+        'Architecture & Construction'
+      )
+      expect(normalizeUseCase('interior design mockups')).toBe(
+        'Architecture & Construction'
+      )
+      expect(normalizeUseCase('real estate visualization')).toBe(
+        'Architecture & Construction'
+      )
+    })
+  })
+
+  describe('Photography & Image Processing', () => {
+    it('should categorize photography work', () => {
+      expect(normalizeUseCase('Product photography')).toBe(
+        'Photography & Image Processing'
+      )
+      expect(normalizeUseCase('photo editing')).toBe(
+        'Photography & Image Processing'
+      )
+      expect(normalizeUseCase('image enhancement')).toBe(
+        'Photography & Image Processing'
+      )
+      expect(normalizeUseCase('portrait photography')).toBe(
+        'Photography & Image Processing'
+      )
+    })
+  })
+
+  describe('Research & Development', () => {
+    it('should categorize research work', () => {
+      expect(normalizeUseCase('Scientific visualization')).toBe(
+        'Research & Development'
+      )
+      expect(normalizeUseCase('research experiments')).toBe(
+        'Research & Development'
+      )
+      expect(normalizeUseCase('prototype testing')).toBe(
+        'Research & Development'
+      )
+      expect(normalizeUseCase('innovation projects')).toBe(
+        'Research & Development'
+      )
+    })
+  })
+
+  describe('Personal & Hobby', () => {
+    it('should categorize personal projects', () => {
+      expect(normalizeUseCase('Personal art projects')).toBe('Personal & Hobby')
+      expect(normalizeUseCase('hobby work')).toBe('Personal & Hobby')
+      expect(normalizeUseCase('creative exploration')).toBe('Personal & Hobby')
+      expect(normalizeUseCase('fun experiments')).toBe('Personal & Hobby')
+    })
+  })
+
+  describe('Film & Video Production', () => {
+    it('should categorize film work', () => {
+      expect(normalizeUseCase('movie production')).toBe(
+        'Film & Video Production'
+      )
+      expect(normalizeUseCase('video editing')).toBe('Film & Video Production')
+      expect(normalizeUseCase('visual effects')).toBe('Film & Video Production')
+      expect(normalizeUseCase('storyboard creation')).toBe(
+        'Film & Video Production'
+      )
+    })
+  })
+
+  describe('Education & Training', () => {
+    it('should categorize educational use cases', () => {
+      expect(normalizeUseCase('educational content')).toBe(
+        'Education & Training'
+      )
+      expect(normalizeUseCase('training materials')).toBe(
+        'Education & Training'
+      )
+      expect(normalizeUseCase('tutorial creation')).toBe('Education & Training')
+      expect(normalizeUseCase('academic projects')).toBe('Education & Training')
+    })
+  })
+
+  describe('Other / Undefined category', () => {
+    it('should handle undefined responses', () => {
+      expect(normalizeUseCase('other')).toBe('Other / Undefined')
+      expect(normalizeUseCase('none')).toBe('Other / Undefined')
+      expect(normalizeUseCase('undefined')).toBe('Other / Undefined')
+      expect(normalizeUseCase('')).toBe('Other / Undefined')
+      expect(normalizeUseCase(null as any)).toBe('Other / Undefined')
+    })
+  })
+
+  describe('Uncategorized responses', () => {
+    it('should preserve unknown use cases with prefix', () => {
+      expect(normalizeUseCase('Mysterious Use Case')).toBe(
+        'Uncategorized: Mysterious Use Case'
+      )
+    })
+  })
+})
+
+describe('normalizeSurveyResponses', () => {
+  it('should normalize both industry and use case', () => {
+    const input = {
+      industry: 'Film and television production',
+      useCase: 'Creating concept art for movies',
+      familiarity: 'Expert'
+    }
+
+    const result = normalizeSurveyResponses(input)
+
+    expect(result).toEqual({
+      industry: 'Film and television production',
+      industry_normalized: 'Film / TV / Animation',
+      industry_raw: 'Film and television production',
+      useCase: 'Creating concept art for movies',
+      useCase_normalized: 'Art & Illustration',
+      useCase_raw: 'Creating concept art for movies',
+      familiarity: 'Expert'
+    })
+  })
+
+  it('should handle partial responses', () => {
+    const input = {
+      industry: 'Software Development',
+      familiarity: 'Beginner'
+    }
+
+    const result = normalizeSurveyResponses(input)
+
+    expect(result).toEqual({
+      industry: 'Software Development',
+      industry_normalized: 'Software / IT / AI',
+      industry_raw: 'Software Development',
+      familiarity: 'Beginner'
+    })
+  })
+
+  it('should handle empty responses', () => {
+    const input = {
+      familiarity: 'Intermediate'
+    }
+
+    const result = normalizeSurveyResponses(input)
+
+    expect(result).toEqual({
+      familiarity: 'Intermediate'
+    })
+  })
+
+  it('should handle uncategorized responses', () => {
+    const input = {
+      industry: 'Unknown Creative Field',
+      useCase: 'Mysterious Use Case'
+    }
+
+    const result = normalizeSurveyResponses(input)
+
+    expect(result).toEqual({
+      industry: 'Unknown Creative Field',
+      industry_normalized: 'Uncategorized: Unknown Creative Field',
+      industry_raw: 'Unknown Creative Field',
+      useCase: 'Mysterious Use Case',
+      useCase_normalized: 'Uncategorized: Mysterious Use Case',
+      useCase_raw: 'Mysterious Use Case'
+    })
+  })
+
+  describe('Migration script example data validation', () => {
+    it('should correctly categorize all migration script examples', () => {
+      const examples = [
+        {
+          input: {
+            industry: 'Film and television production',
+            useCase: 'Creating concept art for movies'
+          },
+          expected: {
+            industry: 'Film / TV / Animation',
+            useCase: 'Art & Illustration'
+          }
+        },
+        {
+          input: {
+            industry: 'Marketing & Social Media',
+            useCase: 'YouTube thumbnail generation'
+          },
+          expected: {
+            industry: 'Marketing / Advertising / Social Media',
+            useCase: 'Content Creation & Marketing'
+          }
+        },
+        {
+          input: {
+            industry: 'Software Development',
+            useCase: 'Product mockup creation'
+          },
+          expected: {
+            industry: 'Software / IT / AI',
+            useCase: 'Product Visualization & Design'
+          }
+        },
+        {
+          input: {
+            industry: 'Indie Game Studio',
+            useCase: 'Game asset generation'
+          },
+          expected: {
+            industry: 'Gaming / Interactive Media',
+            useCase: 'Gaming & Interactive Media'
+          }
+        },
+        {
+          input: {
+            industry: 'Architecture firm',
+            useCase: 'Building visualization'
+          },
+          expected: {
+            industry: 'Architecture / Engineering / Construction',
+            useCase: 'Architecture & Construction'
+          }
+        },
+        {
+          input: {
+            industry: 'Custom Jewelry Design',
+            useCase: 'Product photography'
+          },
+          expected: {
+            industry: 'Fashion / Beauty / Retail',
+            useCase: 'Photography & Image Processing'
+          }
+        },
+        {
+          input: {
+            industry: 'Medical Research',
+            useCase: 'Scientific visualization'
+          },
+          expected: {
+            industry: 'Healthcare / Medical / Life Science',
+            useCase: 'Research & Development'
+          }
+        },
+        {
+          input: {
+            industry: 'Unknown Creative Field',
+            useCase: 'Personal art projects'
+          },
+          expected: {
+            industry: 'Uncategorized: Unknown Creative Field',
+            useCase: 'Personal & Hobby'
+          }
+        }
+      ]
+
+      examples.forEach(({ input, expected }) => {
+        const result = normalizeSurveyResponses(input)
+        expect(result.industry_normalized).toBe(expected.industry)
+        expect(result.useCase_normalized).toBe(expected.useCase)
+      })
+    })
+  })
+})
diff --git a/src/platform/telemetry/utils/surveyNormalization.ts b/src/platform/telemetry/utils/surveyNormalization.ts
new file mode 100644
index 000000000..ae281ca34
--- /dev/null
+++ b/src/platform/telemetry/utils/surveyNormalization.ts
@@ -0,0 +1,606 @@
+/**
+ * Survey Response Normalization Utilities
+ *
+ * Smart categorization system to normalize free-text survey responses
+ * into standardized categories for better analytics breakdowns.
+ * Uses Fuse.js for fuzzy matching against category keywords.
+ */
+import Fuse from 'fuse.js'
+
+interface CategoryMapping {
+  name: string
+  keywords: string[]
+  userCount?: number // For reference from analysis
+}
+
+/**
+ * Industry category mappings based on ~9,000 user analysis
+ */
+const INDUSTRY_CATEGORIES: CategoryMapping[] = [
+  {
+    name: 'Film / TV / Animation',
+    userCount: 2885,
+    keywords: [
+      'film',
+      'tv',
+      'television',
+      'animation',
+      'animation studio',
+      'tv production',
+      'film production',
+      'story',
+      'anime',
+      'video',
+      'cinematography',
+      'visual effects',
+      'vfx',
+      'vfx artist',
+      'movie',
+      'cinema',
+      'documentary',
+      'documentary filmmaker',
+      'broadcast',
+      'streaming',
+      'production',
+      'director',
+      'filmmaker',
+      'post-production',
+      'editing'
+    ]
+  },
+  {
+    name: 'Marketing / Advertising / Social Media',
+    userCount: 1340,
+    keywords: [
+      'marketing',
+      'advertising',
+      'youtube',
+      'tiktok',
+      'social media',
+      'content creation',
+      'influencer',
+      'brand',
+      'promotion',
+      'digital marketing',
+      'seo',
+      'campaigns',
+      'copywriting',
+      'growth',
+      'engagement'
+    ]
+  },
+  {
+    name: 'Software / IT / AI',
+    userCount: 1100,
+    keywords: [
+      'software',
+      'software development',
+      'software engineer',
+      'it',
+      'ai',
+      'ai research',
+      'corporate ai research',
+      'ai research lab',
+      'tech company ai research',
+      'developer',
+      'app developer',
+      'consulting',
+      'tech',
+      'tech startup',
+      'programmer',
+      'data science',
+      'machine learning',
+      'coding',
+      'programming',
+      'web development',
+      'app development',
+      'saas'
+    ]
+  },
+  {
+    name: 'Product & Industrial Design',
+    userCount: 1050,
+    keywords: [
+      'product design',
+      'industrial',
+      'manufacturing',
+      '3d rendering',
+      'product visualization',
+      'mechanical',
+      'automotive',
+      'cad',
+      'prototype',
+      'design engineering',
+      'invention'
+    ]
+  },
+  {
+    name: 'Fine Art / Contemporary Art',
+    userCount: 780,
+    keywords: [
+      'fine art',
+      'art',
+      'illustration',
+      'contemporary',
+      'artist',
+      'painting',
+      'drawing',
+      'sculpture',
+      'gallery',
+      'canvas',
+      'digital art',
+      'mixed media',
+      'abstract',
+      'portrait'
+    ]
+  },
+  {
+    name: 'Education / Research',
+    userCount: 640,
+    keywords: [
+      'education',
+      'student',
+      'teacher',
+      'research',
+      'university research',
+      'academic ai research',
+      'university ai research',
+      'ai research at university',
+      'learning',
+      'university',
+      'school',
+      'academic',
+      'professor',
+      'curriculum',
+      'training',
+      'instruction',
+      'pedagogy'
+    ]
+  },
+  {
+    name: 'Architecture / Engineering / Construction',
+    userCount: 420,
+    keywords: [
+      'architecture',
+      'architecture firm',
+      'construction',
+      'engineering',
+      'civil',
+      'civil engineering',
+      'cad',
+      'building',
+      'structural',
+      'landscape',
+      'landscape architecture',
+      'interior design',
+      'real estate',
+      'planning',
+      'blueprints'
+    ]
+  },
+  {
+    name: 'Gaming / Interactive Media',
+    userCount: 410,
+    keywords: [
+      'gaming',
+      'game dev',
+      'game development',
+      'indie game studio',
+      'vr development',
+      'roblox',
+      'interactive',
+      'interactive media',
+      'virtual world',
+      'vr',
+      'ar',
+      'metaverse',
+      'simulation',
+      'unity',
+      'unity developer',
+      'unreal',
+      'indie games'
+    ]
+  },
+  {
+    name: 'Photography / Videography',
+    userCount: 70,
+    keywords: [
+      'photography',
+      'photo',
+      'videography',
+      'camera',
+      'image',
+      'portrait',
+      'wedding',
+      'commercial photo',
+      'stock photography',
+      'photojournalism',
+      'event photography'
+    ]
+  },
+  {
+    name: 'Fashion / Beauty / Retail',
+    userCount: 25,
+    keywords: [
+      'fashion',
+      'fashion design',
+      'beauty',
+      'beauty industry',
+      'jewelry',
+      'jewelry design',
+      'custom jewelry design',
+      'retail',
+      'retail store',
+      'style',
+      'clothing',
+      'cosmetics',
+      'makeup',
+      'accessories',
+      'boutique'
+    ]
+  },
+  {
+    name: 'Music / Performing Arts',
+    userCount: 25,
+    keywords: [
+      'music',
+      'music production',
+      'vj',
+      'dance',
+      'projection mapping',
+      'audio visual',
+      'concert',
+      'concert production',
+      'performance',
+      'theater',
+      'stage',
+      'live events'
+    ]
+  },
+  {
+    name: 'Healthcare / Medical / Life Science',
+    userCount: 30,
+    keywords: [
+      'healthcare',
+      'medical',
+      'medical research',
+      'doctor',
+      'biotech',
+      'life science',
+      'pharmaceutical',
+      'clinical',
+      'clinical research',
+      'hospital',
+      'medicine',
+      'health'
+    ]
+  },
+  {
+    name: 'E-commerce / Print-on-Demand / Business',
+    userCount: 15,
+    keywords: [
+      'ecommerce',
+      'e-commerce',
+      'print on demand',
+      'shop',
+      'business',
+      'commercial',
+      'startup',
+      'entrepreneur',
+      'sales',
+      'online store'
+    ]
+  },
+  {
+    name: 'Nonprofit / Government / Public Sector',
+    userCount: 15,
+    keywords: [
+      '501c3',
+      'ngo',
+      'government',
+      'public service',
+      'policy',
+      'nonprofit',
+      'charity',
+      'civic',
+      'community',
+      'social impact'
+    ]
+  },
+  {
+    name: 'Adult / NSFW',
+    userCount: 10,
+    keywords: [
+      'nsfw',
+      'nsfw content',
+      'adult',
+      'adult entertainment',
+      'erotic',
+      'explicit',
+      'xxx',
+      'porn'
+    ]
+  }
+]
+
+/**
+ * Use case category mappings based on common patterns
+ */
+const USE_CASE_CATEGORIES: CategoryMapping[] = [
+  {
+    name: 'Content Creation & Marketing',
+    keywords: [
+      'content creation',
+      'social media',
+      'marketing',
+      'marketing campaigns',
+      'advertising',
+      'youtube',
+      'youtube thumbnail',
+      'youtube thumbnail generation',
+      'tiktok',
+      'instagram',
+      'thumbnails',
+      'posts',
+      'campaigns',
+      'brand content'
+    ]
+  },
+  {
+    name: 'Art & Illustration',
+    keywords: [
+      'art',
+      'illustration',
+      'drawing',
+      'painting',
+      'concept art',
+      'creating concept art',
+      'character design',
+      'digital art',
+      'fantasy art',
+      'portraits'
+    ]
+  },
+  {
+    name: 'Product Visualization & Design',
+    keywords: [
+      'product',
+      'product mockup',
+      'product mockup creation',
+      'visualization',
+      'prototype visualization',
+      'design',
+      'prototype',
+      'mockup',
+      '3d rendering',
+      'industrial design',
+      'product photos'
+    ]
+  },
+  {
+    name: 'Film & Video Production',
+    keywords: [
+      'film',
+      'video',
+      'video editing',
+      'movie',
+      'movie production',
+      'animation',
+      'vfx',
+      'visual effects',
+      'storyboard',
+      'storyboard creation',
+      'cinematography',
+      'post production'
+    ]
+  },
+  {
+    name: 'Gaming & Interactive Media',
+    keywords: [
+      'game',
+      'gaming',
+      'game asset generation',
+      'game assets',
+      'game development',
+      'game textures',
+      'interactive',
+      'vr',
+      'vr content creation',
+      'ar',
+      'virtual',
+      'simulation',
+      'metaverse',
+      'textures'
+    ]
+  },
+  {
+    name: 'Architecture & Construction',
+    keywords: [
+      'architecture',
+      'architectural rendering',
+      'building',
+      'building visualization',
+      'construction',
+      'interior design',
+      'interior design mockups',
+      'landscape',
+      'real estate',
+      'real estate visualization',
+      'floor plans',
+      'renderings'
+    ]
+  },
+  {
+    name: 'Education & Training',
+    keywords: [
+      'education',
+      'educational',
+      'educational content',
+      'training',
+      'training materials',
+      'learning',
+      'teaching',
+      'tutorial',
+      'tutorial creation',
+      'course',
+      'academic',
+      'academic projects',
+      'instructional',
+      'workshops'
+    ]
+  },
+  {
+    name: 'Research & Development',
+    keywords: [
+      'research',
+      'research experiments',
+      'development',
+      'experiment',
+      'prototype',
+      'prototype testing',
+      'testing',
+      'analysis',
+      'study',
+      'innovation',
+      'innovation projects',
+      'r&d',
+      'scientific visualization'
+    ]
+  },
+  {
+    name: 'Personal & Hobby',
+    keywords: [
+      'personal',
+      'personal art projects',
+      'hobby',
+      'hobby work',
+      'fun',
+      'fun experiments',
+      'experiment',
+      'learning',
+      'curiosity',
+      'explore',
+      'creative',
+      'creative exploration',
+      'side project'
+    ]
+  },
+  {
+    name: 'Photography & Image Processing',
+    keywords: [
+      'photography',
+      'product photography',
+      'portrait photography',
+      'photo',
+      'photo editing',
+      'image',
+      'image enhancement',
+      'portrait',
+      'editing',
+      'enhancement',
+      'restoration',
+      'photo manipulation'
+    ]
+  }
+]
+
+/**
+ * Fuse.js configuration for category matching
+ */
+const FUSE_OPTIONS = {
+  keys: ['keywords'],
+  threshold: 0.53, // Higher = more lenient matching
+  minMatchCharLength: 5,
+  includeScore: true,
+  includeMatches: true,
+  ignoreLocation: true,
+  findAllMatches: true
+}
+
+/**
+ * Create Fuse instances for category matching
+ */
+const industryFuse = new Fuse(INDUSTRY_CATEGORIES, FUSE_OPTIONS)
+const useCaseFuse = new Fuse(USE_CASE_CATEGORIES, FUSE_OPTIONS)
+
+/**
+ * Normalize industry responses using Fuse.js fuzzy search
+ */
+export function normalizeIndustry(rawIndustry: string): string {
+  if (!rawIndustry || typeof rawIndustry !== 'string') {
+    return 'Other / Undefined'
+  }
+
+  const industry = rawIndustry.toLowerCase().trim()
+
+  // Handle common undefined responses
+  if (
+    industry.match(/^(other|none|undefined|unknown|n\/a|not applicable|-|)$/)
+  ) {
+    return 'Other / Undefined'
+  }
+
+  // Fuse.js fuzzy search for best category match
+  const results = industryFuse.search(rawIndustry)
+
+  if (results.length > 0) {
+    return results[0].item.name
+  }
+
+  // No good match found - preserve original with prefix
+  return `Uncategorized: ${rawIndustry}`
+}
+
+/**
+ * Normalize use case responses using Fuse.js fuzzy search
+ */
+export function normalizeUseCase(rawUseCase: string): string {
+  if (!rawUseCase || typeof rawUseCase !== 'string') {
+    return 'Other / Undefined'
+  }
+
+  const useCase = rawUseCase.toLowerCase().trim()
+
+  // Handle common undefined responses
+  if (
+    useCase.match(/^(other|none|undefined|unknown|n\/a|not applicable|-|)$/)
+  ) {
+    return 'Other / Undefined'
+  }
+
+  // Fuse.js fuzzy search for best category match
+  const results = useCaseFuse.search(rawUseCase)
+
+  if (results.length > 0) {
+    return results[0].item.name
+  }
+
+  // No good match found - preserve original with prefix
+  return `Uncategorized: ${rawUseCase}`
+}
+
+/**
+ * Apply normalization to survey responses
+ * Creates both normalized and raw versions of responses
+ */
+export function normalizeSurveyResponses(responses: {
+  industry?: string
+  useCase?: string
+  [key: string]: any
+}) {
+  const normalized = { ...responses }
+
+  // Normalize industry
+  if (responses.industry) {
+    normalized.industry_normalized = normalizeIndustry(responses.industry)
+    normalized.industry_raw = responses.industry
+  }
+
+  // Normalize use case
+  if (responses.useCase) {
+    normalized.useCase_normalized = normalizeUseCase(responses.useCase)
+    normalized.useCase_raw = responses.useCase
+  }
+
+  return normalized
+}
diff --git a/src/platform/updates/common/releaseStore.ts b/src/platform/updates/common/releaseStore.ts
index 294c9476f..3e2849259 100644
--- a/src/platform/updates/common/releaseStore.ts
+++ b/src/platform/updates/common/releaseStore.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { compare } from 'semver'
 import { computed, ref } from 'vue'
 
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { isElectron } from '@/utils/envUtil'
@@ -81,7 +82,7 @@ export const useReleaseStore = defineStore('release', () => {
   // Show toast if needed
   const shouldShowToast = computed(() => {
     // Only show on desktop version
-    if (!isElectron()) {
+    if (!isElectron() || isCloud) {
       return false
     }
 
@@ -113,7 +114,7 @@ export const useReleaseStore = defineStore('release', () => {
   // Show red-dot indicator
   const shouldShowRedDot = computed(() => {
     // Only show on desktop version
-    if (!isElectron()) {
+    if (!isElectron() || isCloud) {
       return false
     }
 
@@ -160,7 +161,7 @@ export const useReleaseStore = defineStore('release', () => {
   // Show "What's New" popup
   const shouldShowPopup = computed(() => {
     // Only show on desktop version
-    if (!isElectron()) {
+    if (!isElectron() || isCloud) {
       return false
     }
 
diff --git a/src/platform/updates/components/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
index c4a898faf..f1a5060b5 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -64,11 +64,11 @@
 </template>
 
 <script setup lang="ts">
-import { marked } from 'marked'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatVersionAnchor } from '@/utils/formatUtil'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
@@ -108,17 +108,13 @@ const changelogUrl = computed(() => {
   return baseUrl
 })
 
-// Format release content for display using marked
 const formattedContent = computed(() => {
   if (!latestRelease.value?.content) {
     return `<p>${t('whatsNewPopup.noReleaseNotes')}</p>`
   }
 
   try {
-    // Use marked to parse markdown to HTML
-    return marked(latestRelease.value.content, {
-      gfm: true // Enable GitHub Flavored Markdown
-    })
+    return renderMarkdownToHtml(latestRelease.value.content)
   } catch (error) {
     console.error('Error parsing markdown:', error)
     // Fallback to plain text with line breaks
diff --git a/src/platform/workflow/cloud/getWorkflowFromHistory.ts b/src/platform/workflow/cloud/getWorkflowFromHistory.ts
new file mode 100644
index 000000000..8c9027e30
--- /dev/null
+++ b/src/platform/workflow/cloud/getWorkflowFromHistory.ts
@@ -0,0 +1,21 @@
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { PromptId } from '@/schemas/apiSchema'
+
+export async function getWorkflowFromHistory(
+  fetchApi: (url: string) => Promise<Response>,
+  promptId: PromptId
+): Promise<ComfyWorkflowJSON | undefined> {
+  try {
+    const res = await fetchApi(`/history_v2/${promptId}`)
+    const json = await res.json()
+
+    const historyItem = json[promptId]
+    if (!historyItem) return undefined
+
+    const workflow = historyItem.prompt?.extra_data?.extra_pnginfo?.workflow
+    return workflow ?? undefined
+  } catch (error) {
+    console.error(`Failed to fetch workflow for prompt ${promptId}:`, error)
+    return undefined
+  }
+}
diff --git a/src/platform/workflow/cloud/index.ts b/src/platform/workflow/cloud/index.ts
new file mode 100644
index 000000000..1f5422402
--- /dev/null
+++ b/src/platform/workflow/cloud/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Cloud: Fetches workflow by prompt_id. Desktop: Returns undefined (workflows already in history).
+ */
+import { isCloud } from '@/platform/distribution/types'
+
+import { getWorkflowFromHistory as cloudImpl } from './getWorkflowFromHistory'
+
+export const getWorkflowFromHistory = isCloud
+  ? cloudImpl
+  : async () => undefined
diff --git a/src/platform/workflow/core/services/workflowService.ts b/src/platform/workflow/core/services/workflowService.ts
index c4234cf45..2eba1345b 100644
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -1,5 +1,6 @@
 import { toRaw } from 'vue'
 
+import { downloadBlob } from '@/base/common/downloadUtil'
 import { t } from '@/i18n'
 import { LGraph, LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import type { Point, SerialisableGraph } from '@/lib/litegraph/src/litegraph'
@@ -13,7 +14,6 @@ import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/w
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
-import { downloadBlob } from '@/scripts/utils'
 import { useDialogService } from '@/services/dialogService'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
diff --git a/src/platform/workflow/management/stores/workflowStore.ts b/src/platform/workflow/management/stores/workflowStore.ts
index c612aba25..580bf793d 100644
--- a/src/platform/workflow/management/stores/workflowStore.ts
+++ b/src/platform/workflow/management/stores/workflowStore.ts
@@ -83,11 +83,11 @@ export class ComfyWorkflow extends UserFile {
    * @param force Whether to force loading the content even if it is already loaded.
    * @returns this
    */
-  override async load({
-    force = false
-  }: { force?: boolean } = {}): Promise<LoadedComfyWorkflow> {
+  override async load({ force = false }: { force?: boolean } = {}): Promise<
+    this & LoadedComfyWorkflow
+  > {
     await super.load({ force })
-    if (!force && this.isLoaded) return this as LoadedComfyWorkflow
+    if (!force && this.isLoaded) return this as this & LoadedComfyWorkflow
 
     if (!this.originalContent) {
       throw new Error('[ASSERT] Workflow content should be loaded')
@@ -100,7 +100,7 @@ export class ComfyWorkflow extends UserFile {
         /* initialState= */ JSON.parse(this.originalContent)
       )
     )
-    return this as LoadedComfyWorkflow
+    return this as this & LoadedComfyWorkflow
   }
 
   override unload(): void {
diff --git a/src/platform/workflow/templates/composables/useTemplateUrlLoader.ts b/src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
new file mode 100644
index 000000000..c23e570e6
--- /dev/null
+++ b/src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
@@ -0,0 +1,96 @@
+import { useToast } from 'primevue/usetoast'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+import { useTemplateWorkflows } from './useTemplateWorkflows'
+
+/**
+ * Composable for loading templates from URL query parameters
+ *
+ * Supports URLs like:
+ * - /?template=flux_simple (loads with default source)
+ * - /?template=flux_simple&source=custom (loads from custom source)
+ *
+ * Input validation:
+ * - Template and source parameters must match: ^[a-zA-Z0-9_-]+$
+ * - Invalid formats are rejected with console warnings
+ */
+export function useTemplateUrlLoader() {
+  const route = useRoute()
+  const { t } = useI18n()
+  const toast = useToast()
+  const templateWorkflows = useTemplateWorkflows()
+
+  /**
+   * Validates parameter format to prevent path traversal and injection attacks
+   */
+  const isValidParameter = (param: string): boolean => {
+    return /^[a-zA-Z0-9_-]+$/.test(param)
+  }
+
+  /**
+   * Loads template from URL query parameters if present
+   * Handles errors internally and shows appropriate user feedback
+   */
+  const loadTemplateFromUrl = async () => {
+    const templateParam = route.query.template
+
+    if (!templateParam || typeof templateParam !== 'string') {
+      return
+    }
+
+    // Validate template name format
+    if (!isValidParameter(templateParam)) {
+      console.warn(
+        `[useTemplateUrlLoader] Invalid template parameter format: ${templateParam}`
+      )
+      return
+    }
+
+    const sourceParam = (route.query.source as string | undefined) || 'default'
+
+    // Validate source parameter format
+    if (!isValidParameter(sourceParam)) {
+      console.warn(
+        `[useTemplateUrlLoader] Invalid source parameter format: ${sourceParam}`
+      )
+      return
+    }
+
+    // Load template with error handling
+    try {
+      await templateWorkflows.loadTemplates()
+
+      const success = await templateWorkflows.loadWorkflowTemplate(
+        templateParam,
+        sourceParam
+      )
+
+      if (!success) {
+        toast.add({
+          severity: 'error',
+          summary: t('g.error'),
+          detail: t('templateWorkflows.error.templateNotFound', {
+            templateName: templateParam
+          }),
+          life: 3000
+        })
+      }
+    } catch (error) {
+      console.error(
+        '[useTemplateUrlLoader] Failed to load template from URL:',
+        error
+      )
+      toast.add({
+        severity: 'error',
+        summary: t('g.error'),
+        detail: t('g.errorLoadingTemplate'),
+        life: 3000
+      })
+    }
+  }
+
+  return {
+    loadTemplateFromUrl
+  }
+}
diff --git a/src/platform/workflow/templates/composables/useTemplateWorkflows.ts b/src/platform/workflow/templates/composables/useTemplateWorkflows.ts
index 44295d46b..d3bea7fb9 100644
--- a/src/platform/workflow/templates/composables/useTemplateWorkflows.ts
+++ b/src/platform/workflow/templates/composables/useTemplateWorkflows.ts
@@ -1,6 +1,8 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type {
   TemplateGroup,
@@ -78,7 +80,7 @@ export function useTemplateWorkflows() {
     const fallback =
       template.title ?? template.name ?? `${sourceModule} Template`
     return sourceModule === 'default'
-      ? template.localizedTitle ?? fallback
+      ? (template.localizedTitle ?? fallback)
       : fallback
   }
 
@@ -128,8 +130,17 @@ export function useTemplateWorkflows() {
             ? t(`templateWorkflows.template.${id}`, id)
             : id
 
+        if (isCloud) {
+          useTelemetry()?.trackTemplate({
+            workflow_name: id,
+            template_source: actualSourceModule
+          })
+        }
+
         dialogStore.closeDialog()
-        await app.loadGraphData(json, true, true, workflowName)
+        await app.loadGraphData(json, true, true, workflowName, {
+          openSource: 'template'
+        })
 
         return true
       }
@@ -142,8 +153,17 @@ export function useTemplateWorkflows() {
           ? t(`templateWorkflows.template.${id}`, id)
           : id
 
+      if (isCloud) {
+        useTelemetry()?.trackTemplate({
+          workflow_name: id,
+          template_source: sourceModule
+        })
+      }
+
       dialogStore.closeDialog()
-      await app.loadGraphData(json, true, true, workflowName)
+      await app.loadGraphData(json, true, true, workflowName, {
+        openSource: 'template'
+      })
 
       return true
     } catch (error) {
diff --git a/src/platform/workflow/templates/repositories/workflowTemplatesStore.ts b/src/platform/workflow/templates/repositories/workflowTemplatesStore.ts
index 87f9378c7..a1076c88d 100644
--- a/src/platform/workflow/templates/repositories/workflowTemplatesStore.ts
+++ b/src/platform/workflow/templates/repositories/workflowTemplatesStore.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 
 import { i18n, st } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { getCategoryIcon } from '@/utils/categoryIcons'
@@ -21,6 +22,7 @@ interface EnhancedTemplate extends TemplateInfo {
   categoryType?: string
   categoryGroup?: string // 'GENERATION TYPE' or 'CLOSED SOURCE MODELS'
   isEssential?: boolean
+  isPartnerNode?: boolean // Computed from OpenSource === false
   searchableText?: string
 }
 
@@ -29,7 +31,13 @@ export const useWorkflowTemplatesStore = defineStore(
   () => {
     const customTemplates = shallowRef<{ [moduleName: string]: string[] }>({})
     const coreTemplates = shallowRef<WorkflowTemplates[]>([])
+    const englishTemplates = shallowRef<WorkflowTemplates[]>([])
     const isLoaded = ref(false)
+    const knownTemplateNames = ref(new Set<string>())
+
+    const getTemplateByName = (name: string): EnhancedTemplate | undefined => {
+      return enhancedTemplates.value.find((template) => template.name === name)
+    }
 
     // Store filter mappings for dynamic categories
     type FilterData = {
@@ -195,6 +203,7 @@ export const useWorkflowTemplatesStore = defineStore(
             categoryType: category.type,
             categoryGroup: category.category,
             isEssential: category.isEssential,
+            isPartnerNode: template.openSource === false,
             searchableText: [
               template.title || template.name,
               template.description || '',
@@ -262,6 +271,11 @@ export const useWorkflowTemplatesStore = defineStore(
         return enhancedTemplates.value.filter((t) => t.isEssential)
       }
 
+      if (categoryId === 'partner-nodes') {
+        // Filter for templates where OpenSource === false
+        return enhancedTemplates.value.filter((t) => t.isPartnerNode)
+      }
+
       // Handle extension-specific filters
       if (categoryId.startsWith('extension-')) {
         const moduleName = categoryId.replace('extension-', '')
@@ -390,6 +404,22 @@ export const useWorkflowTemplatesStore = defineStore(
         }
       })
 
+      // 3.5. Partner Nodes - virtual category for OpenSource === false templates
+      const partnerNodeCount = enhancedTemplates.value.filter(
+        (t) => t.isPartnerNode
+      ).length
+
+      if (partnerNodeCount > 0) {
+        items.push({
+          id: 'partner-nodes',
+          label: st(
+            'templateWorkflows.category.Partner Nodes',
+            'Partner Nodes'
+          ),
+          icon: 'icon-[lucide--handshake]'
+        })
+      }
+
       // 4. Extensions - always last
       const extensionCounts = enhancedTemplates.value.filter(
         (t) => t.sourceModule !== 'default'
@@ -431,7 +461,23 @@ export const useWorkflowTemplatesStore = defineStore(
         if (!isLoaded.value) {
           customTemplates.value = await api.getWorkflowTemplates()
           const locale = i18n.global.locale.value
-          coreTemplates.value = await api.getCoreWorkflowTemplates(locale)
+
+          const [coreResult, englishResult] = await Promise.all([
+            api.getCoreWorkflowTemplates(locale),
+            isCloud && locale !== 'en'
+              ? api.getCoreWorkflowTemplates('en')
+              : Promise.resolve([])
+          ])
+
+          coreTemplates.value = coreResult
+          englishTemplates.value = englishResult
+
+          const coreNames = coreTemplates.value.flatMap((category) =>
+            category.templates.map((template) => template.name)
+          )
+          const customNames = Object.values(customTemplates.value).flat()
+          knownTemplateNames.value = new Set([...coreNames, ...customNames])
+
           isLoaded.value = true
         }
       } catch (error) {
@@ -439,6 +485,33 @@ export const useWorkflowTemplatesStore = defineStore(
       }
     }
 
+    function getEnglishMetadata(templateName: string): {
+      tags?: string[]
+      category?: string
+      useCase?: string
+      models?: string[]
+      license?: string
+    } | null {
+      if (englishTemplates.value.length === 0) {
+        return null
+      }
+
+      for (const category of englishTemplates.value) {
+        const template = category.templates.find((t) => t.name === templateName)
+        if (template) {
+          return {
+            tags: template.tags,
+            category: category.title,
+            useCase: template.useCase,
+            models: template.models,
+            license: template.license
+          }
+        }
+      }
+
+      return null
+    }
+
     return {
       groupedTemplates,
       navGroupedTemplates,
@@ -446,7 +519,10 @@ export const useWorkflowTemplatesStore = defineStore(
       templateFuse,
       filterTemplatesByCategory,
       isLoaded,
-      loadWorkflowTemplates
+      loadWorkflowTemplates,
+      knownTemplateNames,
+      getTemplateByName,
+      getEnglishMetadata
     }
   }
 )
diff --git a/src/platform/workflow/templates/types/template.ts b/src/platform/workflow/templates/types/template.ts
index dba93adf4..426dd12cf 100644
--- a/src/platform/workflow/templates/types/template.ts
+++ b/src/platform/workflow/templates/types/template.ts
@@ -18,7 +18,15 @@ export interface TemplateInfo {
   date?: string
   useCase?: string
   license?: string
+  /**
+   * Estimated VRAM requirement in bytes.
+   */
+  vram?: number
   size?: number
+  /**
+   * Whether this template uses open source models. When false, indicates partner/API node templates.
+   */
+  openSource?: boolean
 }
 
 export interface WorkflowTemplates {
diff --git a/src/renderer/core/canvas/links/linkConnectorAdapter.ts b/src/renderer/core/canvas/links/linkConnectorAdapter.ts
index 860d365f6..b7937faf2 100644
--- a/src/renderer/core/canvas/links/linkConnectorAdapter.ts
+++ b/src/renderer/core/canvas/links/linkConnectorAdapter.ts
@@ -154,10 +154,13 @@ export function createLinkConnectorAdapter(): LinkConnectorAdapter | null {
   const graph = app.canvas?.graph
   const connector = app.canvas?.linkConnector
   if (!graph || !connector) return null
-  let adapter = adapterByGraph.get(graph)
-  if (!adapter || adapter.linkConnector !== connector) {
-    adapter = new LinkConnectorAdapter(graph, connector)
-    adapterByGraph.set(graph, adapter)
+
+  const adapter = adapterByGraph.get(graph)
+  if (adapter && adapter.linkConnector === connector) {
+    return adapter
   }
-  return adapter
+
+  const newAdapter = new LinkConnectorAdapter(graph, connector)
+  adapterByGraph.set(graph, newAdapter)
+  return newAdapter
 }
diff --git a/src/renderer/core/canvas/links/linkDropOrchestrator.ts b/src/renderer/core/canvas/links/linkDropOrchestrator.ts
index 086a2dc8b..6e3fec991 100644
--- a/src/renderer/core/canvas/links/linkDropOrchestrator.ts
+++ b/src/renderer/core/canvas/links/linkDropOrchestrator.ts
@@ -20,7 +20,9 @@ export const resolveSlotTargetCandidate = (
   const { state: dragState, setCompatibleForKey } = useSlotLinkDragUIState()
   if (!(target instanceof HTMLElement)) return null
 
-  const elWithKey = target.closest<HTMLElement>('[data-slot-key]')
+  const elWithKey = target
+    .closest('.lg-slot, .lg-node-widget')
+    ?.querySelector<HTMLElement>('[data-slot-key]')
   const key = elWithKey?.dataset['slotKey']
   if (!key) return null
 
diff --git a/src/renderer/core/layout/__tests__/TransformPane.test.ts b/src/renderer/core/layout/__tests__/TransformPane.test.ts
index f6b4f463e..ae18ffbac 100644
--- a/src/renderer/core/layout/__tests__/TransformPane.test.ts
+++ b/src/renderer/core/layout/__tests__/TransformPane.test.ts
@@ -155,17 +155,17 @@ describe('TransformPane', () => {
         expect.any(Function),
         expect.any(Object)
       )
-      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
         'pointerdown',
         expect.any(Function),
         expect.any(Object)
       )
-      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
         'pointerup',
         expect.any(Function),
         expect.any(Object)
       )
-      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
         'pointercancel',
         expect.any(Function),
         expect.any(Object)
@@ -188,17 +188,17 @@ describe('TransformPane', () => {
         expect.any(Function),
         expect.any(Object)
       )
-      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
         'pointerdown',
         expect.any(Function),
         expect.any(Object)
       )
-      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
         'pointerup',
         expect.any(Function),
         expect.any(Object)
       )
-      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
         'pointercancel',
         expect.any(Function),
         expect.any(Object)
diff --git a/src/renderer/core/layout/slots/register.ts b/src/renderer/core/layout/slots/register.ts
deleted file mode 100644
index 747ae4543..000000000
--- a/src/renderer/core/layout/slots/register.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Slot Registration
- *
- * Handles registration of slot layouts with the layout store for hit testing.
- * This module manages the state mutation side of slot layout management,
- * while pure calculations are handled separately in SlotCalculations.ts.
- */
-import type { Point } from '@/lib/litegraph/src/interfaces'
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import {
-  calculateInputSlotPos,
-  calculateOutputSlotPos
-} from '@/renderer/core/canvas/litegraph/slotCalculations'
-import type { SlotPositionContext } from '@/renderer/core/canvas/litegraph/slotCalculations'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import type { SlotLayout } from '@/renderer/core/layout/types'
-
-import { getSlotKey } from './slotIdentifier'
-
-/**
- * Register slot layout with the layout store for hit testing
- * @param nodeId The node ID
- * @param slotIndex The slot index
- * @param isInput Whether this is an input slot
- * @param position The slot position in graph coordinates
- */
-function registerSlotLayout(
-  nodeId: string,
-  slotIndex: number,
-  isInput: boolean,
-  position: Point
-): void {
-  const slotKey = getSlotKey(nodeId, slotIndex, isInput)
-
-  // Calculate bounds for the slot using LiteGraph's standard slot height
-  const slotSize = LiteGraph.NODE_SLOT_HEIGHT
-  const halfSize = slotSize / 2
-
-  const slotLayout: SlotLayout = {
-    nodeId,
-    index: slotIndex,
-    type: isInput ? 'input' : 'output',
-    position: { x: position[0], y: position[1] },
-    bounds: {
-      x: position[0] - halfSize,
-      y: position[1] - halfSize,
-      width: slotSize,
-      height: slotSize
-    }
-  }
-
-  layoutStore.updateSlotLayout(slotKey, slotLayout)
-}
-
-/**
- * Register all slots for a node
- * @param nodeId The node ID
- * @param context The slot position context
- */
-export function registerNodeSlots(
-  nodeId: string,
-  context: SlotPositionContext
-): void {
-  // Register input slots
-  context.inputs.forEach((_, index) => {
-    const position = calculateInputSlotPos(context, index)
-    registerSlotLayout(nodeId, index, true, position)
-  })
-
-  // Register output slots
-  context.outputs.forEach((_, index) => {
-    const position = calculateOutputSlotPos(context, index)
-    registerSlotLayout(nodeId, index, false, position)
-  })
-}
diff --git a/src/renderer/core/layout/sync/useLayoutSync.ts b/src/renderer/core/layout/sync/useLayoutSync.ts
index d6d8b1a20..c3cbb9ebd 100644
--- a/src/renderer/core/layout/sync/useLayoutSync.ts
+++ b/src/renderer/core/layout/sync/useLayoutSync.ts
@@ -47,8 +47,8 @@ export function useLayoutSync() {
           liteNode.size[0] !== layout.size.width ||
           liteNode.size[1] !== layout.size.height
         ) {
-          liteNode.size[0] = layout.size.width
-          liteNode.size[1] = layout.size.height
+          // Use setSize() to trigger onResize callback
+          liteNode.setSize([layout.size.width, layout.size.height])
         }
       }
 
diff --git a/src/renderer/core/layout/sync/useLinkLayoutSync.ts b/src/renderer/core/layout/sync/useLinkLayoutSync.ts
deleted file mode 100644
index b1cbc5fa0..000000000
--- a/src/renderer/core/layout/sync/useLinkLayoutSync.ts
+++ /dev/null
@@ -1,310 +0,0 @@
-import { tryOnScopeDispose } from '@vueuse/core'
-import { computed, ref, toValue } from 'vue'
-
-import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
-import { LLink } from '@/lib/litegraph/src/LLink'
-import { Reroute } from '@/lib/litegraph/src/Reroute'
-import type { Point } from '@/lib/litegraph/src/interfaces'
-import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
-import { LitegraphLinkAdapter } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
-import type { LinkRenderContext } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
-import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculations'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import type { LayoutChange } from '@/renderer/core/layout/types'
-
-export function useLinkLayoutSync() {
-  const canvasRef = ref<LGraphCanvas>()
-  const graphRef = computed(() => canvasRef.value?.graph)
-  const unsubscribeLayoutChange = ref<() => void>()
-  const adapter = new LitegraphLinkAdapter()
-
-  /**
-   * Build link render context from canvas properties
-   */
-  function buildLinkRenderContext(): LinkRenderContext {
-    const canvas = toValue(canvasRef)
-    if (!canvas) {
-      throw new Error('Canvas not initialized')
-    }
-
-    return {
-      // Canvas settings
-      renderMode: canvas.links_render_mode,
-      connectionWidth: canvas.connections_width,
-      renderBorder: canvas.render_connections_border,
-      lowQuality: canvas.low_quality,
-      highQualityRender: canvas.highquality_render,
-      scale: canvas.ds.scale,
-      linkMarkerShape: canvas.linkMarkerShape,
-      renderConnectionArrows: canvas.render_connection_arrows,
-
-      // State
-      highlightedLinks: new Set(Object.keys(canvas.highlighted_links)),
-
-      // Colors
-      defaultLinkColor: canvas.default_link_color,
-      linkTypeColors: (canvas.constructor as any).link_type_colors || {},
-
-      // Pattern for disabled links
-      disabledPattern: canvas._pattern
-    }
-  }
-
-  /**
-   * Recompute a single link and all its segments
-   *
-   * Note: This logic mirrors LGraphCanvas#renderAllLinkSegments but:
-   * - Works with offscreen context for event-driven updates
-   * - No visibility checks (always computes full geometry)
-   * - No dragging state handling (pure geometry computation)
-   */
-  function recomputeLinkById(linkId: number): void {
-    const canvas = toValue(canvasRef)
-    const graph = toValue(graphRef)
-    if (!graph || !canvas) return
-
-    const link = graph.links.get(linkId)
-    if (!link || link.id === -1) return // Skip floating/temp links
-
-    // Get source and target nodes
-    const sourceNode = graph.getNodeById(link.origin_id)
-    const targetNode = graph.getNodeById(link.target_id)
-    if (!sourceNode || !targetNode) return
-
-    // Get slots
-    const sourceSlot = sourceNode.outputs?.[link.origin_slot]
-    const targetSlot = targetNode.inputs?.[link.target_slot]
-    if (!sourceSlot || !targetSlot) return
-
-    // Get positions
-    const startPos = getSlotPosition(sourceNode, link.origin_slot, false)
-    const endPos = getSlotPosition(targetNode, link.target_slot, true)
-
-    // Get directions
-    const startDir = sourceSlot.dir || LinkDirection.RIGHT
-    const endDir = targetSlot.dir || LinkDirection.LEFT
-
-    // Get reroutes for this link
-    const reroutes = LLink.getReroutes(graph, link)
-
-    // Build render context
-    const context = buildLinkRenderContext()
-
-    if (reroutes.length > 0) {
-      // Render segmented link with reroutes
-      let segmentStartPos = startPos
-      let segmentStartDir = startDir
-
-      for (let i = 0; i < reroutes.length; i++) {
-        const reroute = reroutes[i]
-
-        // Calculate reroute angle
-        reroute.calculateAngle(Date.now(), graph, [
-          segmentStartPos[0],
-          segmentStartPos[1]
-        ])
-
-        // Calculate control points
-        const distance = Math.sqrt(
-          (reroute.pos[0] - segmentStartPos[0]) ** 2 +
-            (reroute.pos[1] - segmentStartPos[1]) ** 2
-        )
-        const dist = Math.min(Reroute.maxSplineOffset, distance * 0.25)
-
-        // Special handling for floating input chain
-        const isFloatingInputChain = !sourceNode && targetNode
-        const startControl: Readonly<Point> = isFloatingInputChain
-          ? [0, 0]
-          : [dist * reroute.cos, dist * reroute.sin]
-
-        // Render segment to this reroute
-        adapter.renderLinkDirect(
-          canvas.ctx,
-          segmentStartPos,
-          reroute.pos,
-          link,
-          true, // skip_border
-          0, // flow
-          null, // color
-          segmentStartDir,
-          LinkDirection.CENTER,
-          context,
-          {
-            startControl,
-            endControl: reroute.controlPoint,
-            reroute,
-            disabled: false
-          }
-        )
-
-        // Prepare for next segment
-        segmentStartPos = reroute.pos
-        segmentStartDir = LinkDirection.CENTER
-      }
-
-      // Render final segment from last reroute to target
-      const lastReroute = reroutes[reroutes.length - 1]
-      const finalDistance = Math.sqrt(
-        (endPos[0] - lastReroute.pos[0]) ** 2 +
-          (endPos[1] - lastReroute.pos[1]) ** 2
-      )
-      const finalDist = Math.min(Reroute.maxSplineOffset, finalDistance * 0.25)
-      const finalStartControl: Readonly<Point> = [
-        finalDist * lastReroute.cos,
-        finalDist * lastReroute.sin
-      ]
-
-      adapter.renderLinkDirect(
-        canvas.ctx,
-        lastReroute.pos,
-        endPos,
-        link,
-        true, // skip_border
-        0, // flow
-        null, // color
-        LinkDirection.CENTER,
-        endDir,
-        context,
-        {
-          startControl: finalStartControl,
-          disabled: false
-        }
-      )
-    } else {
-      // No reroutes - render direct link
-      adapter.renderLinkDirect(
-        canvas.ctx,
-        startPos,
-        endPos,
-        link,
-        true, // skip_border
-        0, // flow
-        null, // color
-        startDir,
-        endDir,
-        context,
-        {
-          disabled: false
-        }
-      )
-    }
-  }
-
-  /**
-   * Recompute all links connected to a node
-   */
-  function recomputeLinksForNode(nodeId: number): void {
-    const graph = toValue(graphRef)
-    if (!graph) return
-
-    const node = graph.getNodeById(nodeId)
-    if (!node) return
-
-    const linkIds = new Set<number>()
-
-    // Collect output links
-    if (node.outputs) {
-      for (const output of node.outputs) {
-        if (output.links) {
-          for (const linkId of output.links) {
-            linkIds.add(linkId)
-          }
-        }
-      }
-    }
-
-    // Collect input links
-    if (node.inputs) {
-      for (const input of node.inputs) {
-        if (input.link !== null && input.link !== undefined) {
-          linkIds.add(input.link)
-        }
-      }
-    }
-
-    // Recompute each link
-    for (const linkId of linkIds) {
-      recomputeLinkById(linkId)
-    }
-  }
-
-  /**
-   * Recompute all links associated with a reroute
-   */
-  function recomputeLinksForReroute(rerouteId: number): void {
-    const graph = toValue(graphRef)
-    if (!graph) return
-
-    const reroute = graph.reroutes.get(rerouteId)
-    if (!reroute) return
-
-    // Recompute all links that pass through this reroute
-    for (const linkId of reroute.linkIds) {
-      recomputeLinkById(linkId)
-    }
-  }
-
-  /**
-   * Start link layout sync with event-driven functionality
-   */
-  function start(canvasInstance: LGraphCanvas): void {
-    canvasRef.value = canvasInstance
-    if (!canvasInstance.graph) return
-
-    // Initial computation for all existing links
-    for (const link of canvasInstance.graph._links.values()) {
-      if (link.id !== -1) {
-        recomputeLinkById(link.id)
-      }
-    }
-
-    // Subscribe to layout store changes
-    unsubscribeLayoutChange.value?.()
-    unsubscribeLayoutChange.value = layoutStore.onChange(
-      (change: LayoutChange) => {
-        switch (change.operation.type) {
-          case 'moveNode':
-          case 'resizeNode':
-            recomputeLinksForNode(parseInt(change.operation.nodeId))
-            break
-          case 'batchUpdateBounds':
-            for (const nodeId of change.operation.nodeIds) {
-              recomputeLinksForNode(parseInt(nodeId))
-            }
-            break
-          case 'createLink':
-            recomputeLinkById(change.operation.linkId)
-            break
-          case 'deleteLink':
-            // No-op - store already cleaned by existing code
-            break
-          case 'createReroute':
-          case 'deleteReroute':
-            // Recompute all affected links
-            if ('linkIds' in change.operation) {
-              for (const linkId of change.operation.linkIds) {
-                recomputeLinkById(linkId)
-              }
-            }
-            break
-          case 'moveReroute':
-            recomputeLinksForReroute(change.operation.rerouteId)
-            break
-        }
-      }
-    )
-  }
-
-  function stop(): void {
-    unsubscribeLayoutChange.value?.()
-    unsubscribeLayoutChange.value = undefined
-    canvasRef.value = undefined
-  }
-
-  tryOnScopeDispose(stop)
-
-  return {
-    start,
-    stop
-  }
-}
diff --git a/src/renderer/core/layout/sync/useSlotLayoutSync.ts b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
deleted file mode 100644
index 6d7812dd7..000000000
--- a/src/renderer/core/layout/sync/useSlotLayoutSync.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { tryOnScopeDispose } from '@vueuse/core'
-import { ref } from 'vue'
-
-import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { SlotPositionContext } from '@/renderer/core/canvas/litegraph/slotCalculations'
-import { registerNodeSlots } from '@/renderer/core/layout/slots/register'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-
-function computeAndRegisterSlots(node: LGraphNode): void {
-  const nodeId = String(node.id)
-  const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
-
-  // Fallback to live node values if layout not ready
-  const nodeX = nodeLayout?.position.x ?? node.pos[0]
-  const nodeY = nodeLayout?.position.y ?? node.pos[1]
-  const nodeWidth = nodeLayout?.size.width ?? node.size[0]
-  const nodeHeight = nodeLayout?.size.height ?? node.size[1]
-
-  // Ensure concrete slots & arrange when needed for accurate positions
-  node._setConcreteSlots()
-  const collapsed = node.flags.collapsed ?? false
-  if (!collapsed) {
-    node.arrange()
-  }
-
-  const context: SlotPositionContext = {
-    nodeX,
-    nodeY,
-    nodeWidth,
-    nodeHeight,
-    collapsed,
-    collapsedWidth: node._collapsed_width,
-    slotStartY: node.constructor.slot_start_y,
-    inputs: node.inputs,
-    outputs: node.outputs,
-    widgets: node.widgets
-  }
-
-  registerNodeSlots(nodeId, context)
-}
-
-export function useSlotLayoutSync() {
-  const unsubscribeLayoutChange = ref<() => void>()
-  const restoreHandlers = ref<() => void>()
-
-  /**
-   * Attempt to start slot layout sync with full event-driven functionality
-   * @param canvas LiteGraph canvas instance
-   * @returns true if sync was actually started, false if early-returned
-   */
-  function attemptStart(canvas: LGraphCanvas): boolean {
-    // When Vue nodes are enabled, slot DOM registers exact positions.
-    // Skip calculated registration to avoid conflicts.
-    if (LiteGraph.vueNodesMode) {
-      return false
-    }
-    const graph = canvas?.graph
-    if (!graph) return false
-
-    // Initial registration for all nodes in the current graph
-    for (const node of graph.nodes) {
-      computeAndRegisterSlots(node)
-    }
-
-    // Layout changes → recompute slots for changed nodes
-    unsubscribeLayoutChange.value?.()
-    unsubscribeLayoutChange.value = layoutStore.onChange((change) => {
-      for (const nodeId of change.nodeIds) {
-        const node = graph.getNodeById(parseInt(nodeId))
-        if (node) {
-          computeAndRegisterSlots(node)
-        }
-      }
-    })
-
-    // LiteGraph event hooks
-    const origNodeAdded = graph.onNodeAdded
-    const origNodeRemoved = graph.onNodeRemoved
-    const origTrigger = graph.onTrigger
-    const origAfterChange = graph.onAfterChange
-
-    graph.onNodeAdded = (node: LGraphNode) => {
-      computeAndRegisterSlots(node)
-      if (origNodeAdded) {
-        origNodeAdded.call(graph, node)
-      }
-    }
-
-    graph.onNodeRemoved = (node: LGraphNode) => {
-      layoutStore.deleteNodeSlotLayouts(String(node.id))
-      if (origNodeRemoved) {
-        origNodeRemoved.call(graph, node)
-      }
-    }
-
-    graph.onTrigger = (event) => {
-      if (
-        event.type === 'node:property:changed' &&
-        event.property === 'flags.collapsed'
-      ) {
-        const node = graph.getNodeById(parseInt(String(event.nodeId)))
-        if (node) {
-          computeAndRegisterSlots(node)
-        }
-      }
-
-      // Chain to original handler
-      origTrigger?.(event)
-    }
-
-    graph.onAfterChange = (graph: any, node?: any) => {
-      if (node && node.id) {
-        computeAndRegisterSlots(node)
-      }
-      if (origAfterChange) {
-        origAfterChange.call(graph, graph, node)
-      }
-    }
-
-    // Store cleanup function
-    restoreHandlers.value = () => {
-      graph.onNodeAdded = origNodeAdded || undefined
-      graph.onNodeRemoved = origNodeRemoved || undefined
-      // Only restore onTrigger if Vue nodes are not active
-      // Vue node manager sets its own onTrigger handler
-      if (!LiteGraph.vueNodesMode) {
-        graph.onTrigger = origTrigger || undefined
-      }
-      graph.onAfterChange = origAfterChange || undefined
-    }
-
-    return true
-  }
-
-  function stop(): void {
-    unsubscribeLayoutChange.value?.()
-    unsubscribeLayoutChange.value = undefined
-    restoreHandlers.value?.()
-    restoreHandlers.value = undefined
-  }
-
-  tryOnScopeDispose(stop)
-
-  return {
-    attemptStart,
-    stop
-  }
-}
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index 0ed23a90c..9675248a7 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -45,8 +45,7 @@ const { isLOD } = useLOD(camera)
 
 const canvasElement = computed(() => props.canvas?.canvas)
 const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
-  settleDelay: 200,
-  trackPan: true
+  settleDelay: 512
 })
 
 provide(TransformStateKey, {
diff --git a/src/renderer/core/layout/transform/useTransformSettling.ts b/src/renderer/core/layout/transform/useTransformSettling.ts
index bc3d0fc06..3df6dba2b 100644
--- a/src/renderer/core/layout/transform/useTransformSettling.ts
+++ b/src/renderer/core/layout/transform/useTransformSettling.ts
@@ -1,4 +1,4 @@
-import { useDebounceFn, useEventListener, useThrottleFn } from '@vueuse/core'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
 import { ref } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 
@@ -8,16 +8,6 @@ interface TransformSettlingOptions {
    * @default 200
    */
   settleDelay?: number
-  /**
-   * Whether to track both zoom (wheel) and pan (pointer drag) interactions
-   * @default false
-   */
-  trackPan?: boolean
-  /**
-   * Throttle delay for high-frequency pointermove events (only used when trackPan is true)
-   * @default 16 (~60fps)
-   */
-  pointerMoveThrottle?: number
   /**
    * Whether to use passive event listeners (better performance but can't preventDefault)
    * @default true
@@ -26,10 +16,10 @@ interface TransformSettlingOptions {
 }
 
 /**
- * Tracks when canvas transforms (zoom/pan) are actively changing vs settled.
+ * Tracks when canvas zoom transforms are actively changing vs settled.
  *
- * This composable helps optimize rendering quality during transformations.
- * When the user is actively zooming or panning, we can reduce rendering quality
+ * This composable helps optimize rendering quality during zoom transformations.
+ * When the user is actively zooming, we can reduce rendering quality
  * for better performance. Once the transform "settles" (stops changing), we can
  * trigger high-quality re-rasterization.
  *
@@ -42,8 +32,7 @@ interface TransformSettlingOptions {
  * @example
  * ```ts
  * const { isTransforming } = useTransformSettling(canvasRef, {
- *   settleDelay: 200,
- *   trackPan: true
+ *   settleDelay: 200
  * })
  *
  * // Use in CSS classes or rendering logic
@@ -57,15 +46,9 @@ export function useTransformSettling(
   target: MaybeRefOrGetter<HTMLElement | null | undefined>,
   options: TransformSettlingOptions = {}
 ) {
-  const {
-    settleDelay = 200,
-    trackPan = false,
-    pointerMoveThrottle = 16,
-    passive = true
-  } = options
+  const { settleDelay = 200, passive = true } = options
 
   const isTransforming = ref(false)
-  let isPanning = false
 
   /**
    * Mark transform as active
@@ -82,69 +65,19 @@ export function useTransformSettling(
   }, settleDelay)
 
   /**
-   * Handle any transform event - mark active then queue settle
+   * Handle zoom transform event - mark active then queue settle
    */
-  const handleTransformEvent = () => {
+  const handleWheel = () => {
     markTransformActive()
     void markTransformSettled()
   }
 
-  // Wheel handler
-  const handleWheel = () => {
-    handleTransformEvent()
-  }
-
-  // Pointer handlers for panning
-  const handlePointerDown = () => {
-    if (trackPan) {
-      isPanning = true
-      handleTransformEvent()
-    }
-  }
-
-  // Throttled pointer move handler for performance
-  const handlePointerMove = trackPan
-    ? useThrottleFn(() => {
-        if (isPanning) {
-          handleTransformEvent()
-        }
-      }, pointerMoveThrottle)
-    : undefined
-
-  const handlePointerEnd = () => {
-    if (trackPan) {
-      isPanning = false
-      // Don't immediately stop - let the debounced settle handle it
-    }
-  }
-
-  // Register event listeners with auto-cleanup
+  // Register wheel event listener with auto-cleanup
   useEventListener(target, 'wheel', handleWheel, {
     capture: true,
     passive
   })
 
-  if (trackPan) {
-    useEventListener(target, 'pointerdown', handlePointerDown, {
-      capture: true
-    })
-
-    if (handlePointerMove) {
-      useEventListener(target, 'pointermove', handlePointerMove, {
-        capture: true,
-        passive
-      })
-    }
-
-    useEventListener(target, 'pointerup', handlePointerEnd, {
-      capture: true
-    })
-
-    useEventListener(target, 'pointercancel', handlePointerEnd, {
-      capture: true
-    })
-  }
-
   return {
     isTransforming
   }
diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index 12f8d8c13..e1eb9b388 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -2,7 +2,7 @@
   <div
     v-if="visible && initialized"
     ref="minimapRef"
-    class="minimap-main-container absolute right-2 bottom-[66px] z-1000 flex"
+    class="minimap-main-container absolute right-0 bottom-[54px] z-1000 flex"
   >
     <MiniMapPanel
       v-if="showOptionsPanel"
@@ -17,7 +17,7 @@
 
     <div
       ref="containerRef"
-      class="litegraph-minimap relative bg-interface-panel-surface"
+      class="litegraph-minimap relative border border-[var(--interface-stroke)] bg-interface-panel-surface shadow-interface"
       :style="containerStyles"
     >
       <Button
@@ -61,11 +61,12 @@
       <div class="minimap-viewport" :style="viewportStyles" />
 
       <div
-        class="absolute inset-0"
+        class="absolute inset-0 touch-none"
         @pointerdown="handlePointerDown"
         @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"
         @pointerleave="handlePointerUp"
+        @pointercancel="handlePointerCancel"
         @wheel="handleWheel"
       />
     </div>
@@ -105,6 +106,7 @@ const {
   handlePointerDown,
   handlePointerMove,
   handlePointerUp,
+  handlePointerCancel,
   handleWheel,
   setMinimapRef
 } = useMinimap()
diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
index 7cc9416de..97c3946df 100644
--- a/src/renderer/extensions/minimap/MiniMapPanel.vue
+++ b/src/renderer/extensions/minimap/MiniMapPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="minimap-panel mr-2 flex flex-col gap-2 bg-interface-panel-surface p-3 text-sm"
+    class="minimap-panel mr-2 flex flex-col gap-2 bg-interface-panel-surface p-3 text-sm shadow-interface"
     :style="panelStyles"
   >
     <div class="flex items-center gap-2">
diff --git a/src/renderer/extensions/minimap/composables/useMinimap.ts b/src/renderer/extensions/minimap/composables/useMinimap.ts
index 343a5ad55..9d572f133 100644
--- a/src/renderer/extensions/minimap/composables/useMinimap.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimap.ts
@@ -244,6 +244,7 @@ export function useMinimap() {
     handlePointerDown: interaction.handlePointerDown,
     handlePointerMove: interaction.handlePointerMove,
     handlePointerUp: interaction.handlePointerUp,
+    handlePointerCancel: interaction.handlePointerCancel,
     handleWheel: interaction.handleWheel,
     setMinimapRef,
     updateOption
diff --git a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
index c5bf9aa6c..54d6320fd 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
@@ -2,7 +2,11 @@ import { useThrottleFn } from '@vueuse/core'
 import { ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  LGraph,
+  LGraphNode,
+  LGraphTriggerEvent
+} from '@/lib/litegraph/src/litegraph'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { api } from '@/scripts/api'
@@ -14,6 +18,7 @@ interface GraphCallbacks {
   onNodeAdded?: (node: LGraphNode) => void
   onNodeRemoved?: (node: LGraphNode) => void
   onConnectionChange?: (node: LGraphNode) => void
+  onTrigger?: (event: LGraphTriggerEvent) => void
 }
 
 export function useMinimapGraph(
@@ -53,7 +58,8 @@ export function useMinimapGraph(
     const originalCallbacks: GraphCallbacks = {
       onNodeAdded: g.onNodeAdded,
       onNodeRemoved: g.onNodeRemoved,
-      onConnectionChange: g.onConnectionChange
+      onConnectionChange: g.onConnectionChange,
+      onTrigger: g.onTrigger
     }
     originalCallbacksMap.set(g.id, originalCallbacks)
 
@@ -72,6 +78,22 @@ export function useMinimapGraph(
       originalCallbacks.onConnectionChange?.call(this, node)
       void handleGraphChangedThrottled()
     }
+
+    g.onTrigger = function (event: LGraphTriggerEvent) {
+      originalCallbacks.onTrigger?.call(this, event)
+
+      // Listen for visual property changes that affect minimap rendering
+      if (
+        event.type === 'node:property:changed' &&
+        (event.property === 'mode' ||
+          event.property === 'bgcolor' ||
+          event.property === 'color')
+      ) {
+        // Invalidate cache for this node to force redraw
+        nodeStatesCache.delete(String(event.nodeId))
+        void handleGraphChangedThrottled()
+      }
+    }
   }
 
   const cleanupEventListeners = (oldGraph?: LGraph) => {
@@ -89,6 +111,7 @@ export function useMinimapGraph(
     g.onNodeAdded = originalCallbacks.onNodeAdded
     g.onNodeRemoved = originalCallbacks.onNodeRemoved
     g.onConnectionChange = originalCallbacks.onConnectionChange
+    g.onTrigger = originalCallbacks.onTrigger
 
     originalCallbacksMap.delete(g.id)
   }
diff --git a/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts b/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts
index f978cee94..fc9cab1e6 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapInteraction.ts
@@ -35,6 +35,10 @@ export function useMinimapInteraction(
   const handlePointerDown = (e: PointerEvent) => {
     isDragging.value = true
     updateContainerRect()
+    const target = e.currentTarget
+    if (target instanceof HTMLElement) {
+      target.setPointerCapture(e.pointerId)
+    }
     handlePointerMove(e)
   }
 
@@ -53,10 +57,23 @@ export function useMinimapInteraction(
     centerViewOn(worldX, worldY)
   }
 
-  const handlePointerUp = () => {
+  const releasePointer = (e?: PointerEvent) => {
     isDragging.value = false
+    if (!e) return
+
+    const target = e.currentTarget
+    if (
+      target instanceof HTMLElement &&
+      target.hasPointerCapture(e.pointerId)
+    ) {
+      target.releasePointerCapture(e.pointerId)
+    }
   }
 
+  const handlePointerUp = releasePointer
+
+  const handlePointerCancel = releasePointer
+
   const handleWheel = (e: WheelEvent) => {
     e.preventDefault()
 
@@ -102,6 +119,7 @@ export function useMinimapInteraction(
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
+    handlePointerCancel,
     handleWheel
   }
 }
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index f438d4f97..a6ebc2c6b 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -1,11 +1,10 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="video-preview group relative flex size-full min-h-16 min-w-16 flex-col"
+    class="video-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2"
     tabindex="0"
     role="region"
     :aria-label="$t('g.videoPreview')"
-    data-capture-node="true"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
     @keydown="handleKeyDown"
@@ -17,11 +16,11 @@
       <!-- Error State -->
       <div
         v-if="videoError"
-        class="flex size-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
+        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
       >
-        <i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-gray-400" />
-        <p class="text-sm text-gray-300">{{ $t('g.videoFailedToLoad') }}</p>
-        <p class="mt-1 text-xs text-gray-400">
+        <i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-smoke-400" />
+        <p class="text-sm text-smoke-300">{{ $t('g.videoFailedToLoad') }}</p>
+        <p class="mt-1 text-xs text-smoke-400">
           {{ getVideoFilename(currentVideoUrl) }}
         </p>
       </div>
@@ -45,7 +44,7 @@
       <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
         <!-- Download Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
           :title="$t('g.downloadVideo')"
           :aria-label="$t('g.downloadVideo')"
           @click="handleDownload"
@@ -55,7 +54,7 @@
 
         <!-- Close Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
           :title="$t('g.removeVideo')"
           :aria-label="$t('g.removeVideo')"
           @click="handleRemove"
@@ -90,7 +89,7 @@
         <span v-if="videoError" class="text-red-400">
           {{ $t('g.errorLoadingVideo') }}
         </span>
-        <span v-else-if="isLoading" class="text-gray-400">
+        <span v-else-if="isLoading" class="text-smoke-400">
           {{ $t('g.loading') }}...
         </span>
         <span v-else>
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 52f7c8a0b..01d1d23d1 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col"
-    data-capture-node="true"
+    class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
     tabindex="0"
     role="region"
     :aria-label="$t('g.imagePreview')"
@@ -12,16 +11,16 @@
   >
     <!-- Image Wrapper -->
     <div
-      class="relative h-88 w-full grow overflow-hidden rounded-[5px] bg-node-component-surface"
+      class="min-h-88 w-full overflow-hidden rounded-[5px] bg-node-component-surface"
     >
       <!-- Error State -->
       <div
         v-if="imageError"
-        class="flex size-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
+        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
       >
-        <i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-gray-400" />
-        <p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
-        <p class="mt-1 text-xs text-gray-400">
+        <i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-smoke-400" />
+        <p class="text-sm text-smoke-300">{{ $t('g.imageFailedToLoad') }}</p>
+        <p class="mt-1 text-xs text-smoke-400">
           {{ getImageFilename(currentImageUrl) }}
         </p>
       </div>
@@ -35,27 +34,27 @@
         ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="block size-full object-contain"
+        class="block size-full object-contain pointer-events-none"
         @load="handleImageLoad"
         @error="handleImageError"
       />
 
       <!-- Floating Action Buttons (appear on hover) -->
-      <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
+      <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-2.5">
         <!-- Mask/Edit Button -->
         <button
           v-if="!hasMultipleImages"
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
+          :class="actionButtonClass"
           :title="$t('g.editOrMaskImage')"
           :aria-label="$t('g.editOrMaskImage')"
           @click="handleEditMask"
         >
-          <i class="icon-[lucide--venetian-mask] h-4 w-4" />
+          <i-comfy:mask class="h-4 w-4" />
         </button>
 
         <!-- Download Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
+          :class="actionButtonClass"
           :title="$t('g.downloadImage')"
           :aria-label="$t('g.downloadImage')"
           @click="handleDownload"
@@ -65,7 +64,7 @@
 
         <!-- Close Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
+          :class="actionButtonClass"
           :title="$t('g.removeImage')"
           :aria-label="$t('g.removeImage')"
           @click="handleRemove"
@@ -100,7 +99,7 @@
         <span v-if="imageError" class="text-red-400">
           {{ $t('g.errorLoadingImage') }}
         </span>
-        <span v-else-if="isLoading" class="text-gray-400">
+        <span v-else-if="isLoading" class="text-smoke-400">
           {{ $t('g.loading') }}...
         </span>
         <span v-else>
@@ -138,6 +137,9 @@ const { t } = useI18n()
 const commandStore = useCommandStore()
 const nodeOutputStore = useNodeOutputStore()
 
+const actionButtonClass =
+  'flex h-8 min-h-8 items-center justify-center gap-2.5 rounded-lg border-0 bg-button-surface px-2 py-2 text-button-surface-contrast shadow-sm transition-colors duration-200 hover:bg-button-hover-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-button-surface-contrast focus-visible:ring-offset-2 focus-visible:ring-offset-transparent cursor-pointer'
+
 // Component state
 const currentIndex = ref(0)
 const isHovered = ref(false)
@@ -224,7 +226,7 @@ const setCurrentIndex = (index: number) => {
   if (index >= 0 && index < props.imageUrls.length) {
     currentIndex.value = index
     actualDimensions.value = null
-    isLoading.value = true
+    isLoading.value = false
     imageError.value = false
   }
 }
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index e6d1f8504..0fd89bc5f 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -118,9 +118,7 @@ const slotWrapperClass = computed(() =>
   cn(
     'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
     'cursor-crosshair',
-    props.dotOnly
-      ? 'lg-slot--dot-only'
-      : 'pr-6 hover:bg-black/5 hover:dark:bg-white/5',
+    props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
     {
       'lg-slot--connected': props.connected,
       'lg-slot--compatible': props.compatible,
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 7ec7be296..ead65d2cc 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -8,17 +8,17 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-node-component-surface',
-        'lg-node absolute rounded-2xl touch-none flex flex-col',
+        'bg-node-component-surface lg-node absolute',
+        'h-min w-min contain-style contain-layout min-h-(--node-height) min-w-(--node-width)',
+        'rounded-2xl touch-none flex flex-col',
         'border-1 border-solid border-node-component-border',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-node-component-ring',
-        'outline-transparent -outline-offset-2 outline-2',
+        'outline-transparent outline-2',
         borderClass,
         outlineClass,
         {
-          'animate-pulse': executing,
           'before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
             bypassed,
           'before:rounded-2xl before:pointer-events-none before:absolute before:inset-0':
@@ -35,8 +35,8 @@
       {
         transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
         zIndex: zIndex,
-        backgroundColor: nodeBodyBackgroundColor,
-        opacity: nodeOpacity
+        opacity: nodeOpacity,
+        '--node-component-surface': nodeBodyBackgroundColor
       },
       dragStyle
     ]"
@@ -44,10 +44,19 @@
     @wheel="handleWheel"
     @contextmenu="handleContextMenu"
   >
-    <div class="flex items-center">
+    <div class="flex flex-col justify-center items-center relative">
       <template v-if="isCollapsed">
-        <SlotConnectionDot multi class="absolute left-0 -translate-x-1/2" />
-        <SlotConnectionDot multi class="absolute right-0 translate-x-1/2" />
+        <SlotConnectionDot
+          v-if="hasInputs"
+          multi
+          class="absolute left-0 -translate-x-1/2"
+        />
+        <SlotConnectionDot
+          v-if="hasOutputs"
+          multi
+          class="absolute right-0 translate-x-1/2"
+        />
+        <NodeSlots :node-data="nodeData" unified />
       </template>
       <NodeHeader
         :node-data="nodeData"
@@ -88,7 +97,7 @@
 
       <!-- Node Body - rendered based on LOD level and collapsed state -->
       <div
-        class="flex min-h-0 flex-1 flex-col gap-4 pb-4"
+        class="flex min-h-min min-w-min flex-1 flex-col gap-4 pb-4"
         :data-testid="`node-body-${nodeData.id}`"
       >
         <!-- Slots only rendered at full detail -->
@@ -98,7 +107,7 @@
         <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
 
         <!-- Custom content at reduced+ detail -->
-        <div v-if="hasCustomContent" class="min-h-0 flex-1">
+        <div v-if="hasCustomContent" class="min-h-0 flex-1 flex">
           <NodeContent :node-data="nodeData" :media="nodeMedia" />
         </div>
         <!-- Live mid-execution preview images -->
@@ -108,12 +117,17 @@
       </div>
     </template>
 
-    <!-- Resize handle -->
-    <div
-      v-if="!isCollapsed"
-      class="absolute right-0 bottom-0 h-3 w-3 cursor-se-resize opacity-0 transition-opacity duration-200 hover:bg-white hover:opacity-20"
-      @pointerdown.stop="startResize"
-    />
+    <!-- Resize handles -->
+    <template v-if="!isCollapsed">
+      <div
+        v-for="handle in cornerResizeHandles"
+        :key="handle.id"
+        role="button"
+        :aria-label="handle.ariaLabel"
+        :class="cn(baseResizeHandleClasses, handle.classes)"
+        @pointerdown.stop="handleResizePointerDown(handle.direction)($event)"
+      />
+    </template>
   </div>
 </template>
 
@@ -121,21 +135,25 @@
 import { whenever } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, inject, onErrorCaptured, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
+import SlotConnectionDot from '@/renderer/extensions/vueNodes/components/SlotConnectionDot.vue'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
 import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
 import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
 import { useNodePreviewState } from '@/renderer/extensions/vueNodes/preview/useNodePreviewState'
+import { nonWidgetedInputs } from '@/renderer/extensions/vueNodes/utils/nodeDataUtils'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -147,14 +165,13 @@ import {
 } from '@/utils/graphTraversalUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-import { useNodeResize } from '../composables/useNodeResize'
-import { calculateIntrinsicSize } from '../utils/calculateIntrinsicSize'
+import type { ResizeHandleDirection } from '../interactions/resize/resizeMath'
+import { useNodeResize } from '../interactions/resize/useNodeResize'
 import LivePreview from './LivePreview.vue'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
 import NodeWidgets from './NodeWidgets.vue'
-import SlotConnectionDot from './SlotConnectionDot.vue'
 
 // Extended props for main node component
 interface LGraphNodeProps {
@@ -165,6 +182,8 @@ interface LGraphNodeProps {
 
 const { nodeData, error = null } = defineProps<LGraphNodeProps>()
 
+const { t } = useI18n()
+
 const {
   handleNodeCollapse,
   handleNodeTitleUpdate,
@@ -203,8 +222,10 @@ const hasAnyError = computed((): boolean => {
 })
 
 const isCollapsed = computed(() => nodeData.flags?.collapsed ?? false)
-const bypassed = computed((): boolean => nodeData.mode === 4)
-const muted = computed((): boolean => nodeData.mode === 2) // NEVER mode
+const bypassed = computed(
+  (): boolean => nodeData.mode === LGraphEventMode.BYPASS
+)
+const muted = computed((): boolean => nodeData.mode === LGraphEventMode.NEVER)
 
 const nodeBodyBackgroundColor = computed(() => {
   const colorPaletteStore = useColorPaletteStore()
@@ -230,6 +251,9 @@ const nodeOpacity = computed(() => {
   return globalOpacity
 })
 
+const hasInputs = computed(() => nonWidgetedInputs(nodeData).length > 0)
+const hasOutputs = computed((): boolean => !!nodeData.outputs?.length)
+
 // Use canvas interactions for proper wheel event handling and pointer event capture control
 const { handleWheel, shouldHandleNodePointerEvents } = useCanvasInteractions()
 
@@ -243,8 +267,7 @@ onErrorCaptured((error) => {
   return false // Prevent error propagation
 })
 
-// Use layout system for node position and dragging
-const { position, size, zIndex } = useNodeLayout(() => nodeData.id)
+const { position, size, zIndex, moveNodeTo } = useNodeLayout(() => nodeData.id)
 const { pointerHandlers, isDragging, dragStyle } = useNodePointerInteractions(
   () => nodeData,
   handleNodeSelect
@@ -267,39 +290,90 @@ const handleContextMenu = (event: MouseEvent) => {
 
 onMounted(() => {
   // Set initial DOM size from layout store, but respect intrinsic content minimum
-  if (size.value && nodeContainerRef.value && transformState) {
-    const intrinsicMin = calculateIntrinsicSize(
-      nodeContainerRef.value,
-      transformState.camera.z
+  if (size.value && nodeContainerRef.value) {
+    nodeContainerRef.value.style.setProperty(
+      '--node-width',
+      `${size.value.width}px`
+    )
+    nodeContainerRef.value.style.setProperty(
+      '--node-height',
+      `${size.value.height}px`
     )
-
-    // Use the larger of stored size or intrinsic minimum
-    const finalWidth = Math.max(size.value.width, intrinsicMin.width)
-    const finalHeight = Math.max(size.value.height, intrinsicMin.height)
-
-    nodeContainerRef.value.style.width = `${finalWidth}px`
-    nodeContainerRef.value.style.height = `${finalHeight}px`
   }
 })
 
+const baseResizeHandleClasses =
+  'absolute h-3 w-3 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40'
+const POSITION_EPSILON = 0.01
+
+type CornerResizeHandle = {
+  id: string
+  direction: ResizeHandleDirection
+  classes: string
+  ariaLabel: string
+}
+
+const cornerResizeHandles: CornerResizeHandle[] = [
+  {
+    id: 'se',
+    direction: { horizontal: 'right', vertical: 'bottom' },
+    classes: 'right-0 bottom-0 cursor-se-resize',
+    ariaLabel: t('g.resizeFromBottomRight')
+  },
+  {
+    id: 'ne',
+    direction: { horizontal: 'right', vertical: 'top' },
+    classes: 'right-0 top-0 cursor-ne-resize',
+    ariaLabel: t('g.resizeFromTopRight')
+  },
+  {
+    id: 'sw',
+    direction: { horizontal: 'left', vertical: 'bottom' },
+    classes: 'left-0 bottom-0 cursor-sw-resize',
+    ariaLabel: t('g.resizeFromBottomLeft')
+  },
+  {
+    id: 'nw',
+    direction: { horizontal: 'left', vertical: 'top' },
+    classes: 'left-0 top-0 cursor-nw-resize',
+    ariaLabel: t('g.resizeFromTopLeft')
+  }
+]
+
 const { startResize } = useNodeResize(
-  (newSize, element) => {
-    // Apply size directly to DOM element - ResizeObserver will pick this up
+  (result, element) => {
     if (isCollapsed.value) return
 
-    element.style.width = `${newSize.width}px`
-    element.style.height = `${newSize.height}px`
+    // Apply size directly to DOM element - ResizeObserver will pick this up
+    element.style.setProperty('--node-width', `${result.size.width}px`)
+    element.style.setProperty('--node-height', `${result.size.height}px`)
+
+    const currentPosition = position.value
+    const deltaX = Math.abs(result.position.x - currentPosition.x)
+    const deltaY = Math.abs(result.position.y - currentPosition.y)
+
+    if (deltaX > POSITION_EPSILON || deltaY > POSITION_EPSILON) {
+      moveNodeTo(result.position)
+    }
   },
   {
     transformState
   }
 )
 
+const handleResizePointerDown = (direction: ResizeHandleDirection) => {
+  return (event: PointerEvent) => {
+    if (nodeData.flags?.pinned) return
+
+    startResize(event, direction, { ...position.value })
+  }
+}
+
 whenever(isCollapsed, () => {
   const element = nodeContainerRef.value
   if (!element) return
-  element.style.width = ''
-  element.style.height = ''
+  element.style.setProperty('--node-width', '')
+  element.style.setProperty('--node-height', '')
 })
 
 // Check if node has custom content (like image/video outputs)
@@ -344,6 +418,9 @@ const handleHeaderTitleUpdate = (newTitle: string) => {
 }
 
 const handleEnterSubgraph = () => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'graph_node_open_subgraph_clicked'
+  })
   const graph = app.graph?.rootGraph || app.graph
   if (!graph) {
     console.warn('LGraphNode: No graph available for subgraph navigation')
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index 40bd537fd..1e39d0132 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -3,28 +3,18 @@
     <div
       class="lg-node pointer-events-none absolute rounded-2xl border border-solid border-node-component-border bg-node-component-surface outline-2 -outline-offset-2 outline-transparent"
     >
-      <NodeHeader :node-data="nodeData" :readonly="readonly" />
+      <NodeHeader :node-data="nodeData" />
 
       <div class="mx-0 mb-4 h-px w-full bg-node-component-border" />
 
       <div class="flex flex-col gap-4 pb-4">
-        <NodeSlots
-          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length]"
-          :node-data="nodeData"
-          :readonly="readonly"
-        />
+        <NodeSlots :node-data="nodeData" />
 
-        <NodeWidgets
-          v-if="nodeData.widgets?.length"
-          v-memo="[nodeData.widgets?.length]"
-          :node-data="nodeData"
-          :readonly="readonly"
-        />
+        <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
 
         <NodeContent
           v-if="hasCustomContent"
           :node-data="nodeData"
-          :readonly="readonly"
           :image-urls="nodeImageUrls"
         />
       </div>
@@ -68,7 +58,7 @@ const nodeData = computed<VueNodeData>(() => {
               Array.isArray(input.options) &&
               input.options.length > 0
             ? input.options[0]
-            : undefined,
+            : '',
       options: {
         ...input,
         hidden: input.hidden,
@@ -119,7 +109,6 @@ const nodeData = computed<VueNodeData>(() => {
   }
 })
 
-const readonly = true
 const hasCustomContent = false
 const nodeImageUrls = ['']
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.vue b/src/renderer/extensions/vueNodes/components/LivePreview.vue
index 84042cb41..a4b090b19 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LivePreview.vue
@@ -7,10 +7,10 @@
       <!-- Error State -->
       <div
         v-if="imageError"
-        class="flex h-full w-full flex-col items-center justify-center text-center text-pure-white"
+        class="text-pure-white flex h-full w-full flex-col items-center justify-center text-center"
       >
-        <i-lucide:image-off class="mb-1 size-8 text-gray-500" />
-        <p class="text-xs text-gray-400">{{ $t('g.imageFailedToLoad') }}</p>
+        <i-lucide:image-off class="mb-1 size-8 text-smoke-500" />
+        <p class="text-xs text-smoke-400">{{ $t('g.imageFailedToLoad') }}</p>
       </div>
 
       <!-- Main Image -->
diff --git a/src/renderer/extensions/vueNodes/components/NodeBadge.vue b/src/renderer/extensions/vueNodes/components/NodeBadge.vue
new file mode 100644
index 000000000..064eac26d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeBadge.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-if="text"
+    class="min-w-max rounded-sm bg-node-component-surface px-1 py-0.5 text-xs flex items-center gap-1"
+    :style="{
+      color: fgColor,
+      backgroundColor: bgColor
+    }"
+  >
+    {{ text }}
+    <i v-if="cssIcon" :class="cn(cssIcon)" />
+  </div>
+</template>
+<script setup lang="ts">
+import type { LGraphBadge } from '@/lib/litegraph/src/LGraphBadge'
+import { cn } from '@/utils/tailwindUtil'
+
+export interface NodeBadgeProps {
+  text: LGraphBadge['text']
+  fgColor?: LGraphBadge['fgColor']
+  bgColor?: LGraphBadge['bgColor']
+  cssIcon?: string
+}
+
+const {
+  text,
+  fgColor = 'currentColor',
+  bgColor = '',
+  cssIcon
+} = defineProps<NodeBadgeProps>()
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index 1701f3584..fd7b94a4f 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -2,7 +2,7 @@
   <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ $t('Node Content Error') }}
   </div>
-  <div v-else class="lg-node-content flex h-full flex-col">
+  <div v-else class="lg-node-content flex grow flex-col">
     <!-- Default slot for custom content -->
     <slot>
       <VideoPreview
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 231aad3ff..5758fed62 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -6,7 +6,8 @@
     v-else
     :class="
       cn(
-        'lg-node-header p-4 rounded-t-2xl w-full bg-node-component-header-surface text-node-component-header',
+        'lg-node-header p-4 rounded-t-2xl w-full min-w-50',
+        'bg-node-component-header-surface text-node-component-header',
         collapsed && 'rounded-2xl'
       )
     "
@@ -16,7 +17,7 @@
   >
     <div class="flex items-center justify-between gap-2.5">
       <!-- Collapse/Expand Button -->
-      <div class="relative flex items-center gap-2.5">
+      <div class="relative grow-1 flex items-center gap-2.5">
         <div class="lod-toggle flex shrink-0 items-center px-0.5">
           <IconButton
             size="fit-content"
@@ -37,10 +38,13 @@
           </IconButton>
         </div>
 
+        <div v-if="isSubgraphNode" class="icon-[comfy--workflow] size-4" />
+        <div v-if="isApiNode" class="icon-[lucide--dollar-sign] size-4" />
+
         <!-- Node Title -->
         <div
           v-tooltip.top="tooltipConfig"
-          class="lod-toggle flex flex-1 items-center gap-2 truncate text-sm font-bold"
+          class="lod-toggle grow-1 items-center gap-2 truncate text-sm font-bold w-15"
           data-testid="node-title"
         >
           <EditableText
@@ -50,22 +54,28 @@
             @edit="handleTitleEdit"
             @cancel="handleTitleCancel"
           />
-          <i
-            v-if="isPinned"
-            class="icon-[lucide--pin] size-5 text-node-component-header-icon"
-            data-testid="node-pin-indicator"
-          />
         </div>
         <LODFallback />
       </div>
 
-      <div class="lod-toggle flex shrink-0 items-center">
+      <div class="lod-toggle flex shrink-0 items-center justify-between gap-2">
+        <NodeBadge
+          v-for="badge of nodeBadges"
+          :key="badge.text"
+          v-bind="badge"
+        />
+        <NodeBadge v-if="statusBadge" v-bind="statusBadge" />
+        <i-comfy:pin
+          v-if="isPinned"
+          class="size-5"
+          data-testid="node-pin-indicator"
+        />
         <IconButton
           v-if="isSubgraphNode"
           v-tooltip.top="enterSubgraphTooltipConfig"
-          size="sm"
           type="transparent"
           data-testid="subgraph-enter-button"
+          class="size-5"
           @click.stop="handleEnterSubgraph"
           @dblclick.stop
         >
@@ -79,14 +89,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch } from 'vue'
+import { computed, onErrorCaptured, ref, toValue, watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import NodeBadge from '@/renderer/extensions/vueNodes/components/NodeBadge.vue'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import { app } from '@/scripts/app'
@@ -99,6 +111,7 @@ import {
 import { cn } from '@/utils/tailwindUtil'
 
 import LODFallback from './LODFallback.vue'
+import type { NodeBadgeProps } from './NodeBadge.vue'
 
 interface NodeHeaderProps {
   nodeData?: VueNodeData
@@ -171,19 +184,24 @@ const resolveTitle = (info: VueNodeData | undefined) => {
 // Local state for title to provide immediate feedback
 const displayTitle = ref(resolveTitle(nodeData))
 
-// Watch for external changes to the node title or type
-watch(
-  () => [nodeData?.title, nodeData?.type] as const,
-  () => {
-    const next = resolveTitle(nodeData)
-    if (next !== displayTitle.value) {
-      displayTitle.value = next
-    }
-  }
+const bypassed = computed(
+  (): boolean => nodeData?.mode === LGraphEventMode.BYPASS
+)
+const muted = computed((): boolean => nodeData?.mode === LGraphEventMode.NEVER)
+
+const statusBadge = computed((): NodeBadgeProps | undefined =>
+  muted.value
+    ? { text: 'Muted', cssIcon: 'icon-[lucide--ban]' }
+    : bypassed.value
+      ? { text: 'Bypassed', cssIcon: 'icon-[lucide--redo-dot]' }
+      : undefined
 )
 
+const nodeBadges = computed<NodeBadgeProps[]>(() =>
+  [...(nodeData?.badges ?? [])].map(toValue)
+)
 const isPinned = computed(() => Boolean(nodeData?.flags?.pinned))
-
+const isApiNode = computed(() => Boolean(nodeData?.apiNode))
 // Subgraph detection
 const isSubgraphNode = computed(() => {
   if (!nodeData?.id) return false
@@ -200,6 +218,17 @@ const isSubgraphNode = computed(() => {
   return litegraphNode?.isSubgraphNode() ?? false
 })
 
+// Watch for external changes to the node title or type
+watch(
+  () => [nodeData?.title, nodeData?.type] as const,
+  () => {
+    const next = resolveTitle(nodeData)
+    if (next !== displayTitle.value) {
+      displayTitle.value = next
+    }
+  }
+)
+
 // Event handlers
 const handleCollapse = () => {
   emit('collapse')
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index e341e50bb..31d00a92b 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -2,8 +2,11 @@
   <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ $t('Node Slots Error') }}
   </div>
-  <div v-else class="lg-node-slots flex justify-between">
-    <div v-if="filteredInputs.length" class="flex flex-col gap-1">
+  <div v-else :class="cn('flex justify-between', unifiedWrapperClass)">
+    <div
+      v-if="filteredInputs.length"
+      :class="cn('flex flex-col gap-1', unifiedDotsClass)"
+    >
       <InputSlot
         v-for="(input, index) in filteredInputs"
         :key="`input-${index}`"
@@ -14,7 +17,10 @@
       />
     </div>
 
-    <div v-if="nodeData?.outputs?.length" class="ml-auto flex flex-col gap-1">
+    <div
+      v-if="nodeData?.outputs?.length"
+      :class="cn('ml-auto flex flex-col gap-1', unifiedDotsClass)"
+    >
       <OutputSlot
         v-for="(output, index) in nodeData.outputs"
         :key="`output-${index}`"
@@ -33,40 +39,43 @@ import { computed, onErrorCaptured, ref } from 'vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
-import { isSlotObject } from '@/utils/typeGuardUtil'
+import {
+  linkedWidgetedInputs,
+  nonWidgetedInputs
+} from '@/renderer/extensions/vueNodes/utils/nodeDataUtils'
+import { cn } from '@/utils/tailwindUtil'
 
 import InputSlot from './InputSlot.vue'
 import OutputSlot from './OutputSlot.vue'
 
 interface NodeSlotsProps {
-  nodeData?: VueNodeData
+  nodeData: VueNodeData
+  unified?: boolean
 }
 
-const { nodeData = null } = defineProps<NodeSlotsProps>()
+const { nodeData, unified = false } = defineProps<NodeSlotsProps>()
 
-// Filter out input slots that have corresponding widgets
-const filteredInputs = computed(() => {
-  if (!nodeData?.inputs) return []
+const linkedWidgetInputs = computed(() =>
+  unified ? linkedWidgetedInputs(nodeData) : []
+)
 
-  return nodeData.inputs
-    .filter((input) => {
-      // Check if this slot has a widget property (indicating it has a corresponding widget)
-      if (isSlotObject(input) && 'widget' in input && input.widget) {
-        // This slot has a widget, so we should not display it separately
-        return false
-      }
-      return true
-    })
-    .map((input) =>
-      isSlotObject(input)
-        ? input
-        : ({
-            name: typeof input === 'string' ? input : '',
-            type: 'any',
-            boundingRect: [0, 0, 0, 0] as [number, number, number, number]
-          } as INodeSlot)
-    )
-})
+const filteredInputs = computed(() => [
+  ...nonWidgetedInputs(nodeData),
+  ...linkedWidgetInputs.value
+])
+
+const unifiedWrapperClass = computed((): string =>
+  cn(
+    unified &&
+      'absolute inset-0 items-center pointer-events-none opacity-0 z-30'
+  )
+)
+const unifiedDotsClass = computed((): string =>
+  cn(
+    unified &&
+      'grid grid-cols-1 grid-rows-1 gap-0 [&>*]:row-span-full [&>*]:col-span-full place-items-center'
+  )
+)
 
 // Get the actual index of an input slot in the node's inputs array
 // (accounting for filtered widget slots)
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 312c9300b..f843897e3 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -6,35 +6,41 @@
     v-else
     :class="
       cn(
-        'lg-node-widgets flex flex-col gap-2 pr-3',
+        'lg-node-widgets flex flex-col has-[.widget-expands]:flex-1 gap-2 pr-3',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'
       )
     "
-    @pointerdown.stop="handleWidgetPointerEvent"
-    @pointermove.stop="handleWidgetPointerEvent"
-    @pointerup.stop="handleWidgetPointerEvent"
+    @pointerdown="handleWidgetPointerEvent"
+    @pointermove="handleWidgetPointerEvent"
+    @pointerup="handleWidgetPointerEvent"
   >
     <div
       v-for="(widget, index) in processedWidgets"
       :key="`widget-${index}-${widget.name}`"
-      class="lg-widget-container group flex items-center"
+      class="lg-node-widget group flex items-stretch has-[.widget-expands]:flex-1"
     >
       <!-- Widget Input Slot Dot -->
 
       <div
-        class="opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+        :class="
+          cn(
+            'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-center',
+            widget.slotMetadata?.linked && 'opacity-100'
+          )
+        "
       >
         <InputSlot
+          v-if="widget.slotMetadata"
           :slot-data="{
             name: widget.name,
             type: widget.type,
             boundingRect: [0, 0, 0, 0]
           }"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
-          :index="widget.slotMetadata?.index ?? 0"
-          :dot-only="true"
+          :index="widget.slotMetadata.index"
+          dot-only
         />
       </div>
       <!-- Widget Component -->
@@ -63,7 +69,8 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import WidgetDOM from '@/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue'
-import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
+// Import widget components directly
+import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
 import {
   getComponent,
   shouldRenderAsVue
@@ -81,10 +88,10 @@ const { nodeData } = defineProps<NodeWidgetsProps>()
 
 const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
   useCanvasInteractions()
-const handleWidgetPointerEvent = (event: PointerEvent) => {
-  if (!shouldHandleNodePointerEvents.value) {
-    forwardEventToCanvas(event)
-  }
+function handleWidgetPointerEvent(event: PointerEvent) {
+  if (shouldHandleNodePointerEvents.value) return
+  event.stopPropagation()
+  forwardEventToCanvas(event)
 }
 
 // Error boundary implementation
@@ -129,7 +136,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
     const vueComponent =
       getComponent(widget.type, widget.name) ||
-      (widget.isDOMWidget ? WidgetDOM : WidgetInputText)
+      (widget.isDOMWidget ? WidgetDOM : WidgetLegacy)
 
     const slotMetadata = widget.slotMetadata
 
@@ -138,9 +145,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
     // This prevents conflicting input sources - when a slot is linked to another
     // node's output, the widget should be read-only to avoid data conflicts
     if (slotMetadata?.linked) {
-      widgetOptions = widget.options
-        ? { ...widget.options, disabled: true }
-        : { disabled: true }
+      widgetOptions = { ...widget.options, disabled: true }
     }
 
     const simplified: SimplifiedWidget = {
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index a00e31c29..583ed1314 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -88,9 +88,7 @@ const slotWrapperClass = computed(() =>
   cn(
     'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
     'cursor-crosshair',
-    props.dotOnly
-      ? 'lg-slot--dot-only justify-center'
-      : 'pl-6 hover:bg-black/5 hover:dark:bg-white/5',
+    props.dotOnly ? 'lg-slot--dot-only justify-center' : 'pl-6',
     {
       'lg-slot--connected': props.connected,
       'lg-slot--compatible': props.compatible,
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
index 96eef9186..d0ab5c639 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -31,9 +31,9 @@ defineExpose({
         cn(
           'bg-slate-300 rounded-full',
           'transition-all duration-150',
-          'cursor-crosshair',
           'border border-solid border-node-component-slot-dot-outline',
-          'group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125',
+          !multi &&
+            'cursor-crosshair group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125',
           multi ? 'w-3 h-6' : 'size-3'
         )
       "
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
index 61cc4035a..b4bd1d839 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
@@ -1,3 +1,4 @@
+import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
@@ -71,6 +72,7 @@ const createMouseEvent = (
 describe('useNodePointerInteractions', () => {
   beforeEach(async () => {
     vi.clearAllMocks()
+    setActivePinia(createPinia())
     // Reset layout store state between tests
     const { layoutStore } = await import(
       '@/renderer/core/layout/store/layoutStore'
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
index a7befb88b..e9ca19e97 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -55,17 +55,6 @@ export function useNodePointerInteractions(
 
     if (forwardMiddlePointerIfNeeded(event)) return
 
-    const stopNodeDragTarget =
-      event.target instanceof HTMLElement
-        ? event.target.closest('[data-capture-node="true"]')
-        : null
-    if (stopNodeDragTarget) {
-      if (!shouldHandleNodePointerEvents.value) {
-        forwardEventToCanvas(event)
-      }
-      return
-    }
-
     // Only start drag on left-click (button 0)
     if (event.button !== 0) {
       return
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
index 618f992de..3baf2b047 100644
--- a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
+++ b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
@@ -1,6 +1,5 @@
-import { useEventListener } from '@vueuse/core'
+import { tryOnScopeDispose, useEventListener } from '@vueuse/core'
 import type { Fn } from '@vueuse/core'
-import { onBeforeUnmount } from 'vue'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
@@ -302,14 +301,12 @@ export function useSlotLinkInteraction({
       hoveredSlotKey = dragContext.lastPointerTargetSlotKey
       hoveredNodeId = dragContext.lastPointerTargetNodeId
     } else if (target instanceof HTMLElement) {
-      const elWithSlot = target.closest<HTMLElement>('[data-slot-key]')
-      const elWithNode = elWithSlot
-        ? null
-        : target.closest<HTMLElement>('[data-node-id]')
+      const elWithSlot = target
+        .closest('.lg-slot, .lg-node-widget')
+        ?.querySelector<HTMLElement>('[data-slot-key]')
+      const elWithNode = target.closest<HTMLElement>('[data-node-id]')
       hoveredSlotKey = elWithSlot?.dataset['slotKey'] ?? null
-      hoveredNodeId = hoveredSlotKey
-        ? null
-        : elWithNode?.dataset['nodeId'] ?? null
+      hoveredNodeId = elWithNode?.dataset['nodeId'] ?? null
       dragContext.lastPointerEventTarget = target
       dragContext.lastPointerTargetSlotKey = hoveredSlotKey
       dragContext.lastPointerTargetNodeId = hoveredNodeId
@@ -326,10 +323,8 @@ export function useSlotLinkInteraction({
       const graph = app.canvas?.graph ?? null
       const context = { adapter, graph, session: dragContext }
       const slotCandidate = resolveSlotTargetCandidate(target, context)
-      const nodeCandidate = slotCandidate
-        ? null
-        : resolveNodeSurfaceSlotCandidate(target, context)
-      candidate = slotCandidate ?? nodeCandidate
+      const nodeCandidate = resolveNodeSurfaceSlotCandidate(target, context)
+      candidate = slotCandidate?.compatible ? slotCandidate : nodeCandidate
       dragContext.lastHoverSlotKey = hoveredSlotKey
       dragContext.lastHoverNodeId = hoveredNodeId
 
@@ -340,7 +335,8 @@ export function useSlotLinkInteraction({
           slotCandidate.layout.type === 'input'
         )
         setCompatibleForKey(key, !!slotCandidate.compatible)
-      } else if (nodeCandidate) {
+      }
+      if (nodeCandidate && !slotCandidate?.compatible) {
         const key = getSlotKey(
           nodeCandidate.layout.nodeId,
           nodeCandidate.layout.index,
@@ -555,6 +551,8 @@ export function useSlotLinkInteraction({
     if (event.button !== 0) return
     if (!nodeId) return
     if (pointerSession.isActive()) return
+    event.preventDefault()
+    event.stopPropagation()
 
     const canvas = app.canvas
     const graph = canvas?.graph
@@ -613,15 +611,15 @@ export function useSlotLinkInteraction({
 
     if (shouldBatchDisconnectOutputLinks && resolvedNode) {
       resolvedNode.disconnectOutput(index)
-      app.canvas?.setDirty(true, true)
+      canvas.setDirty(true, true)
       event.preventDefault()
       event.stopPropagation()
       return
     }
 
     const baseDirection = isInputSlot
-      ? inputSlot?.dir ?? LinkDirection.LEFT
-      : outputSlot?.dir ?? LinkDirection.RIGHT
+      ? (inputSlot?.dir ?? LinkDirection.LEFT)
+      : (outputSlot?.dir ?? LinkDirection.RIGHT)
 
     const existingAnchor =
       isInputSlot && !shouldBreakExistingInputLink
@@ -634,20 +632,18 @@ export function useSlotLinkInteraction({
     const shouldMoveExistingInput =
       isInputSlot && !shouldBreakExistingInputLink && hasExistingInputLink
 
-    if (activeAdapter) {
-      if (isOutputSlot) {
-        activeAdapter.beginFromOutput(localNodeId, index, {
-          moveExisting: shouldMoveExistingOutput
-        })
-      } else {
-        activeAdapter.beginFromInput(localNodeId, index, {
-          moveExisting: shouldMoveExistingInput
-        })
-      }
+    if (isOutputSlot) {
+      activeAdapter.beginFromOutput(localNodeId, index, {
+        moveExisting: shouldMoveExistingOutput
+      })
+    } else {
+      activeAdapter.beginFromInput(localNodeId, index, {
+        moveExisting: shouldMoveExistingInput
+      })
+    }
 
-      if (shouldMoveExistingInput && existingInputLink) {
-        existingInputLink._dragging = true
-      }
+    if (shouldMoveExistingInput && existingInputLink) {
+      existingInputLink._dragging = true
     }
 
     syncRenderLinkOrigins()
@@ -678,21 +674,19 @@ export function useSlotLinkInteraction({
     toCanvasPointerEvent(event)
     updatePointerState(event)
 
-    if (activeAdapter) {
-      activeAdapter.linkConnector.state.snapLinksPos = [
-        state.pointer.canvas.x,
-        state.pointer.canvas.y
-      ]
-    }
+    activeAdapter.linkConnector.state.snapLinksPos = [
+      state.pointer.canvas.x,
+      state.pointer.canvas.y
+    ]
 
     pointerSession.register(
-      useEventListener(window, 'pointermove', handlePointerMove, {
+      useEventListener('pointermove', handlePointerMove, {
         capture: true
       }),
-      useEventListener(window, 'pointerup', handlePointerUp, {
+      useEventListener('pointerup', handlePointerUp, {
         capture: true
       }),
-      useEventListener(window, 'pointercancel', handlePointerCancel, {
+      useEventListener('pointercancel', handlePointerCancel, {
         capture: true
       })
     )
@@ -710,12 +704,10 @@ export function useSlotLinkInteraction({
           : activeAdapter.isOutputValidDrop(slotLayout.nodeId, idx)
       setCompatibleForKey(key, ok)
     }
-    app.canvas?.setDirty(true, true)
-    event.preventDefault()
-    event.stopPropagation()
+    canvas.setDirty(true, true)
   }
 
-  onBeforeUnmount(() => {
+  tryOnScopeDispose(() => {
     if (pointerSession.isActive()) {
       cleanupInteraction()
     }
diff --git a/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts b/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts
new file mode 100644
index 000000000..a837d59c5
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts
@@ -0,0 +1,104 @@
+import type { Point, Size } from '@/renderer/core/layout/types'
+
+export type ResizeHandleDirection = {
+  horizontal: 'left' | 'right'
+  vertical: 'top' | 'bottom'
+}
+
+function applyHandleDelta(
+  startSize: Size,
+  delta: Point,
+  handle: ResizeHandleDirection
+): Size {
+  const horizontalMultiplier = handle.horizontal === 'right' ? 1 : -1
+  const verticalMultiplier = handle.vertical === 'bottom' ? 1 : -1
+
+  return {
+    width: startSize.width + delta.x * horizontalMultiplier,
+    height: startSize.height + delta.y * verticalMultiplier
+  }
+}
+
+function computeAdjustedPosition(
+  startPosition: Point,
+  startSize: Size,
+  nextSize: Size,
+  handle: ResizeHandleDirection
+): Point {
+  const widthDelta = startSize.width - nextSize.width
+  const heightDelta = startSize.height - nextSize.height
+
+  return {
+    x:
+      handle.horizontal === 'left'
+        ? startPosition.x + widthDelta
+        : startPosition.x,
+    y:
+      handle.vertical === 'top'
+        ? startPosition.y + heightDelta
+        : startPosition.y
+  }
+}
+
+/**
+ * Computes the resulting size and position of a node given pointer movement
+ * and handle orientation.
+ */
+export function computeResizeOutcome({
+  startSize,
+  startPosition,
+  delta,
+  handle,
+  snapFn
+}: {
+  startSize: Size
+  startPosition: Point
+  delta: Point
+  handle: ResizeHandleDirection
+  snapFn?: (size: Size) => Size
+}): { size: Size; position: Point } {
+  const resized = applyHandleDelta(startSize, delta, handle)
+  const snapped = snapFn?.(resized) ?? resized
+  const position = computeAdjustedPosition(
+    startPosition,
+    startSize,
+    snapped,
+    handle
+  )
+
+  return {
+    size: snapped,
+    position
+  }
+}
+
+export function createResizeSession(config: {
+  startSize: Size
+  startPosition: Point
+  handle: ResizeHandleDirection
+}) {
+  const startSize = { ...config.startSize }
+  const startPosition = { ...config.startPosition }
+  const handle = config.handle
+
+  return (delta: Point, snapFn?: (size: Size) => Size) =>
+    computeResizeOutcome({
+      startSize,
+      startPosition,
+      handle,
+      delta,
+      snapFn
+    })
+}
+
+export function toCanvasDelta(
+  startPointer: Point,
+  currentPointer: Point,
+  scale: number
+): Point {
+  const safeScale = scale === 0 ? 1 : scale
+  return {
+    x: (currentPointer.x - startPointer.x) / safeScale,
+    y: (currentPointer.y - startPointer.y) / safeScale
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeResize.ts b/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts
similarity index 55%
rename from src/renderer/extensions/vueNodes/composables/useNodeResize.ts
rename to src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts
index bf3fcc02f..39d745073 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeResize.ts
+++ b/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts
@@ -2,25 +2,23 @@ import { useEventListener } from '@vueuse/core'
 import { ref } from 'vue'
 
 import type { TransformState } from '@/renderer/core/layout/injectionKeys'
+import type { Point, Size } from '@/renderer/core/layout/types'
 import { useNodeSnap } from '@/renderer/extensions/vueNodes/composables/useNodeSnap'
 import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useShiftKeySync'
-import { calculateIntrinsicSize } from '@/renderer/extensions/vueNodes/utils/calculateIntrinsicSize'
 
-interface Size {
-  width: number
-  height: number
-}
-
-interface Position {
-  x: number
-  y: number
-}
+import type { ResizeHandleDirection } from './resizeMath'
+import { createResizeSession, toCanvasDelta } from './resizeMath'
 
 interface UseNodeResizeOptions {
   /** Transform state for coordinate conversion */
   transformState: TransformState
 }
 
+interface ResizeCallbackPayload {
+  size: Size
+  position: Point
+}
+
 /**
  * Composable for node resizing functionality
  *
@@ -28,15 +26,26 @@ interface UseNodeResizeOptions {
  * Handles pointer capture, coordinate calculations, and size constraints.
  */
 export function useNodeResize(
-  resizeCallback: (size: Size, element: HTMLElement) => void,
+  resizeCallback: (
+    payload: ResizeCallbackPayload,
+    element: HTMLElement
+  ) => void,
   options: UseNodeResizeOptions
 ) {
   const { transformState } = options
 
   const isResizing = ref(false)
-  const resizeStartPos = ref<Position | null>(null)
-  const resizeStartSize = ref<Size | null>(null)
-  const intrinsicMinSize = ref<Size | null>(null)
+  const resizeStartPointer = ref<Point | null>(null)
+  const resizeSession = ref<
+    | ((
+        delta: Point,
+        snapFn?: (size: Size) => Size
+      ) => {
+        size: Size
+        position: Point
+      })
+    | null
+  >(null)
 
   // Snap-to-grid functionality
   const { shouldSnap, applySnapToSize } = useNodeSnap()
@@ -44,13 +53,28 @@ export function useNodeResize(
   // Shift key sync for LiteGraph canvas preview
   const { trackShiftKey } = useShiftKeySync()
 
-  const startResize = (event: PointerEvent) => {
+  const startResize = (
+    event: PointerEvent,
+    handle: ResizeHandleDirection,
+    startPosition: Point
+  ) => {
     event.preventDefault()
     event.stopPropagation()
 
     const target = event.currentTarget
     if (!(target instanceof HTMLElement)) return
 
+    const nodeElement = target.closest('[data-node-id]')
+    if (!(nodeElement instanceof HTMLElement)) return
+
+    const rect = nodeElement.getBoundingClientRect()
+    const scale = transformState.camera.z
+
+    const startSize: Size = {
+      width: rect.width / scale,
+      height: rect.height / scale
+    }
+
     // Track shift key state and sync to canvas for snap preview
     const stopShiftSync = trackShiftKey(event)
 
@@ -58,71 +82,46 @@ export function useNodeResize(
     target.setPointerCapture(event.pointerId)
 
     isResizing.value = true
-    resizeStartPos.value = { x: event.clientX, y: event.clientY }
-
-    // Get current node size from the DOM and calculate intrinsic min size
-    const nodeElement = target.closest('[data-node-id]')
-    if (!(nodeElement instanceof HTMLElement)) return
-
-    const rect = nodeElement.getBoundingClientRect()
-    const scale = transformState.camera.z
-
-    // Calculate current size in canvas coordinates
-    resizeStartSize.value = {
-      width: rect.width / scale,
-      height: rect.height / scale
-    }
-
-    // Calculate intrinsic content size (minimum based on content)
-    intrinsicMinSize.value = calculateIntrinsicSize(nodeElement, scale)
+    resizeStartPointer.value = { x: event.clientX, y: event.clientY }
+    resizeSession.value = createResizeSession({
+      startSize,
+      startPosition: { ...startPosition },
+      handle
+    })
 
     const handlePointerMove = (moveEvent: PointerEvent) => {
       if (
         !isResizing.value ||
-        !resizeStartPos.value ||
-        !resizeStartSize.value ||
-        !intrinsicMinSize.value
+        !resizeStartPointer.value ||
+        !resizeSession.value
       )
         return
 
-      const dx = moveEvent.clientX - resizeStartPos.value.x
-      const dy = moveEvent.clientY - resizeStartPos.value.y
+      const startPointer = resizeStartPointer.value
+      const session = resizeSession.value
 
-      // Apply scale factor from transform state
-      const scale = transformState.camera.z
-      const scaledDx = dx / scale
-      const scaledDy = dy / scale
+      const delta = toCanvasDelta(
+        startPointer,
+        { x: moveEvent.clientX, y: moveEvent.clientY },
+        transformState.camera.z
+      )
 
-      // Apply constraints: only minimum size based on content, no maximum
-      const constrainedSize = {
-        width: Math.max(
-          intrinsicMinSize.value.width,
-          resizeStartSize.value.width + scaledDx
-        ),
-        height: Math.max(
-          intrinsicMinSize.value.height,
-          resizeStartSize.value.height + scaledDy
-        )
-      }
-
-      // Apply snap-to-grid if shift is held or always snap is enabled
-      const finalSize = shouldSnap(moveEvent)
-        ? applySnapToSize(constrainedSize)
-        : constrainedSize
-
-      // Get the node element to apply size directly
       const nodeElement = target.closest('[data-node-id]')
       if (nodeElement instanceof HTMLElement) {
-        resizeCallback(finalSize, nodeElement)
+        const outcome = session(
+          delta,
+          shouldSnap(moveEvent) ? applySnapToSize : undefined
+        )
+
+        resizeCallback(outcome, nodeElement)
       }
     }
 
     const handlePointerUp = (upEvent: PointerEvent) => {
       if (isResizing.value) {
         isResizing.value = false
-        resizeStartPos.value = null
-        resizeStartSize.value = null
-        intrinsicMinSize.value = null
+        resizeStartPointer.value = null
+        resizeSession.value = null
 
         // Stop tracking shift key state
         stopShiftSync()
diff --git a/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts b/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
new file mode 100644
index 000000000..3d1050e43
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
@@ -0,0 +1,94 @@
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { createBounds } from '@/lib/litegraph/src/measure'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { NodeBoundsUpdate } from '@/renderer/core/layout/types'
+import { app as comfyApp } from '@/scripts/app'
+
+const SCALE_FACTOR = 1.75
+
+export function ensureCorrectLayoutScale() {
+  const settingStore = useSettingStore()
+
+  const autoScaleLayoutSetting = settingStore.get(
+    'Comfy.VueNodes.AutoScaleLayout'
+  )
+
+  if (autoScaleLayoutSetting === false) {
+    return
+  }
+
+  const canvas = comfyApp.canvas
+  const graph = canvas?.graph
+
+  if (!graph || !graph.nodes) return
+
+  if (graph.extra?.vueNodesScaled === true) {
+    return
+  }
+
+  const vueNodesEnabled = settingStore.get('Comfy.VueNodes.Enabled')
+  if (!vueNodesEnabled) {
+    return
+  }
+
+  const lgBounds = createBounds(graph.nodes)
+
+  if (!lgBounds) return
+
+  const allVueNodes = layoutStore.getAllNodes().value
+
+  const originX = lgBounds[0]
+  const originY = lgBounds[1]
+
+  const lgNodesById = new Map(
+    graph.nodes.map((node) => [String(node.id), node])
+  )
+
+  const yjsMoveNodeUpdates: NodeBoundsUpdate[] = []
+
+  for (const vueNode of allVueNodes.values()) {
+    const lgNode = lgNodesById.get(String(vueNode.id))
+    if (!lgNode) continue
+
+    const lgBodyY = lgNode.pos[1] - LiteGraph.NODE_TITLE_HEIGHT
+
+    const relativeX = lgNode.pos[0] - originX
+    const relativeY = lgBodyY - originY
+    const newX = originX + relativeX * SCALE_FACTOR
+    const newY = originY + relativeY * SCALE_FACTOR
+    const newWidth = lgNode.width * SCALE_FACTOR
+    const newHeight = lgNode.height * SCALE_FACTOR
+
+    yjsMoveNodeUpdates.push({
+      nodeId: vueNode.id,
+      bounds: {
+        x: newX,
+        y: newY,
+        width: newWidth,
+        height: newHeight
+      }
+    })
+  }
+
+  layoutStore.batchUpdateNodeBounds(yjsMoveNodeUpdates)
+
+  graph.groups.forEach((group) => {
+    const groupBodyY = group.pos[1] - LiteGraph.NODE_TITLE_HEIGHT
+
+    const relativeX = group.pos[0] - originX
+    const relativeY = groupBodyY - originY
+
+    const newPosY =
+      originY + relativeY * SCALE_FACTOR + LiteGraph.NODE_TITLE_HEIGHT
+
+    group.pos = [originX + relativeX * SCALE_FACTOR, newPosY]
+    group.size = [group.size[0] * SCALE_FACTOR, group.size[1] * SCALE_FACTOR]
+  })
+
+  const originScreen = canvas.ds.convertOffsetToCanvas([originX, originY])
+  canvas.ds.changeScale(canvas.ds.scale / SCALE_FACTOR, originScreen)
+
+  if (!graph.extra) graph.extra = {}
+  graph.extra.vueNodesScaled = true
+}
diff --git a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
index 03f0cbf03..e770c0aea 100644
--- a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
+++ b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
@@ -253,7 +253,7 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
   /**
    * Update node position directly (without drag)
    */
-  function moveTo(position: Point) {
+  function moveNodeTo(position: Point) {
     mutations.setSource(LayoutSource.Vue)
     mutations.moveNode(nodeId, position)
   }
@@ -269,7 +269,7 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
     isDragging,
 
     // Mutations
-    moveTo,
+    moveNodeTo,
 
     // Drag handlers
     startDrag,
diff --git a/src/renderer/extensions/vueNodes/utils/__tests__/nodeDataUtils.test.ts b/src/renderer/extensions/vueNodes/utils/__tests__/nodeDataUtils.test.ts
new file mode 100644
index 000000000..7a2247993
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/utils/__tests__/nodeDataUtils.test.ts
@@ -0,0 +1,127 @@
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type {
+  INodeInputSlot,
+  IWidgetLocator
+} from '@/lib/litegraph/src/interfaces'
+import type { LinkId } from '@/renderer/core/layout/types'
+import {
+  linkedWidgetedInputs,
+  nonWidgetedInputs
+} from '@/renderer/extensions/vueNodes/utils/nodeDataUtils'
+import { describe, it } from 'vitest'
+
+function makeFakeInputSlot(
+  name: string,
+  withWidget = false,
+  link: LinkId | null = null
+): INodeInputSlot {
+  const widget: IWidgetLocator | undefined = withWidget ? { name } : undefined
+  return {
+    name,
+    widget,
+    link,
+    boundingRect: [0, 0, 0, 0],
+    type: 'FAKE'
+  }
+}
+
+function makeFakeNodeData(inputs: INodeInputSlot[]): VueNodeData {
+  const nodeData: Partial<VueNodeData> = { inputs }
+  return nodeData as VueNodeData
+}
+
+describe('nodeDataUtils', () => {
+  describe('nonWidgetedInputs', () => {
+    it('should handle an empty inputs list', () => {
+      const inputs: INodeInputSlot[] = []
+      const nodeData = makeFakeNodeData(inputs)
+
+      const actual = nonWidgetedInputs(nodeData)
+
+      expect(actual.length).toBe(0)
+    })
+
+    it('should handle a list of only widgeted inputs', () => {
+      const inputs: INodeInputSlot[] = [
+        makeFakeInputSlot('first', true),
+        makeFakeInputSlot('second', true)
+      ]
+      const nodeData = makeFakeNodeData(inputs)
+
+      const actual = nonWidgetedInputs(nodeData)
+
+      expect(actual.length).toBe(0)
+    })
+
+    it('should handle a list of only slot inputs', () => {
+      const inputs: INodeInputSlot[] = [
+        makeFakeInputSlot('first'),
+        makeFakeInputSlot('second')
+      ]
+      const nodeData = makeFakeNodeData(inputs)
+
+      const actual = nonWidgetedInputs(nodeData)
+
+      expect(actual.length).toBe(2)
+    })
+
+    it('should handle a list of mixed inputs', () => {
+      const inputs: INodeInputSlot[] = [
+        makeFakeInputSlot('first'),
+        makeFakeInputSlot('second'),
+        makeFakeInputSlot('third', true),
+        makeFakeInputSlot('fourth', true)
+      ]
+      const nodeData = makeFakeNodeData(inputs)
+
+      const actual = nonWidgetedInputs(nodeData)
+
+      expect(actual.length).toBe(2)
+    })
+  })
+
+  describe('linkedWidgetedInputs', () => {
+    it('should return input slots that are bound to widgets and are linked: none present', () => {
+      const inputs: INodeInputSlot[] = [
+        makeFakeInputSlot('first'),
+        makeFakeInputSlot('second'),
+        makeFakeInputSlot('third', true),
+        makeFakeInputSlot('fourth', true)
+      ]
+      const nodeData = makeFakeNodeData(inputs)
+
+      const actual = linkedWidgetedInputs(nodeData)
+
+      expect(actual.length).toBe(0)
+    })
+
+    it('should return input slots that are bound to widgets and are linked: one present', () => {
+      const inputs: INodeInputSlot[] = [
+        makeFakeInputSlot('first'),
+        makeFakeInputSlot('second'),
+        makeFakeInputSlot('third', true),
+        makeFakeInputSlot('fourth', true, 1)
+      ]
+      const nodeData = makeFakeNodeData(inputs)
+
+      const actual = linkedWidgetedInputs(nodeData)
+
+      expect(actual.length).toBe(1)
+    })
+
+    it('should return input slots that are bound to widgets and are linked: multiple present', () => {
+      const inputs: INodeInputSlot[] = [
+        makeFakeInputSlot('first'),
+        makeFakeInputSlot('second'),
+        makeFakeInputSlot('third', true),
+        makeFakeInputSlot('fourth', true, 1),
+        makeFakeInputSlot('fifth', true, 2)
+      ]
+      const nodeData = makeFakeNodeData(inputs)
+
+      const actual = linkedWidgetedInputs(nodeData)
+
+      expect(actual.length).toBe(2)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.test.ts b/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.test.ts
deleted file mode 100644
index cd34f8a3f..000000000
--- a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.test.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-
-import { calculateIntrinsicSize } from './calculateIntrinsicSize'
-
-describe('calculateIntrinsicSize', () => {
-  let element: HTMLElement
-
-  beforeEach(() => {
-    // Create a test element
-    element = document.createElement('div')
-    element.style.width = '200px'
-    element.style.height = '100px'
-    document.body.appendChild(element)
-  })
-
-  afterEach(() => {
-    document.body.removeChild(element)
-  })
-
-  it('should calculate intrinsic size and convert to canvas coordinates', () => {
-    // Mock getBoundingClientRect to return specific dimensions
-    const originalGetBoundingClientRect = element.getBoundingClientRect
-    element.getBoundingClientRect = () => ({
-      width: 300,
-      height: 150,
-      top: 0,
-      left: 0,
-      bottom: 150,
-      right: 300,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    })
-
-    const scale = 2
-    const result = calculateIntrinsicSize(element, scale)
-
-    // Should divide by scale to convert from screen to canvas coordinates
-    expect(result).toEqual({
-      width: 150, // 300 / 2
-      height: 75 // 150 / 2
-    })
-
-    element.getBoundingClientRect = originalGetBoundingClientRect
-  })
-
-  it('should restore original size after measuring', () => {
-    const originalWidth = element.style.width
-    const originalHeight = element.style.height
-
-    element.getBoundingClientRect = () => ({
-      width: 300,
-      height: 150,
-      top: 0,
-      left: 0,
-      bottom: 150,
-      right: 300,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    })
-
-    calculateIntrinsicSize(element, 1)
-
-    // Should restore original styles
-    expect(element.style.width).toBe(originalWidth)
-    expect(element.style.height).toBe(originalHeight)
-  })
-
-  it('should handle scale of 1 correctly', () => {
-    element.getBoundingClientRect = () => ({
-      width: 400,
-      height: 200,
-      top: 0,
-      left: 0,
-      bottom: 200,
-      right: 400,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    })
-
-    const result = calculateIntrinsicSize(element, 1)
-
-    expect(result).toEqual({
-      width: 400,
-      height: 200
-    })
-  })
-
-  it('should handle fractional scales', () => {
-    element.getBoundingClientRect = () => ({
-      width: 300,
-      height: 150,
-      top: 0,
-      left: 0,
-      bottom: 150,
-      right: 300,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    })
-
-    const result = calculateIntrinsicSize(element, 0.5)
-
-    expect(result).toEqual({
-      width: 600, // 300 / 0.5
-      height: 300 // 150 / 0.5
-    })
-  })
-
-  it('should temporarily set width and height to auto during measurement', () => {
-    let widthDuringMeasurement = ''
-    let heightDuringMeasurement = ''
-
-    element.getBoundingClientRect = function (this: HTMLElement) {
-      widthDuringMeasurement = this.style.width
-      heightDuringMeasurement = this.style.height
-      return {
-        width: 300,
-        height: 150,
-        top: 0,
-        left: 0,
-        bottom: 150,
-        right: 300,
-        x: 0,
-        y: 0,
-        toJSON: () => ({})
-      }
-    }
-
-    calculateIntrinsicSize(element, 1)
-
-    // During measurement, styles should be set to 'auto'
-    expect(widthDuringMeasurement).toBe('auto')
-    expect(heightDuringMeasurement).toBe('auto')
-  })
-})
diff --git a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.ts b/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.ts
deleted file mode 100644
index 36da7cd82..000000000
--- a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Calculate the intrinsic (minimum content-based) size of a node element
- *
- * Temporarily sets the element to auto-size to measure its natural content dimensions,
- * then converts from screen coordinates to canvas coordinates using the camera scale.
- *
- * @param element - The node element to measure
- * @param scale - Camera zoom scale for coordinate conversion
- * @returns The intrinsic minimum size in canvas coordinates
- */
-export function calculateIntrinsicSize(
-  element: HTMLElement,
-  scale: number
-): { width: number; height: number } {
-  // Store original size to restore later
-  const originalWidth = element.style.width
-  const originalHeight = element.style.height
-
-  // Temporarily set to auto to measure natural content size
-  element.style.width = 'auto'
-  element.style.height = 'auto'
-
-  const intrinsicRect = element.getBoundingClientRect()
-
-  // Restore original size
-  element.style.width = originalWidth
-  element.style.height = originalHeight
-
-  // Convert from screen coordinates to canvas coordinates
-  return {
-    width: intrinsicRect.width / scale,
-    height: intrinsicRect.height / scale
-  }
-}
diff --git a/src/renderer/extensions/vueNodes/utils/nodeDataUtils.ts b/src/renderer/extensions/vueNodes/utils/nodeDataUtils.ts
new file mode 100644
index 000000000..1517b9fb9
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/utils/nodeDataUtils.ts
@@ -0,0 +1,36 @@
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { INodeInputSlot, INodeSlot } from '@/lib/litegraph/src/interfaces'
+import { isSlotObject } from '@/utils/typeGuardUtil'
+
+function coerceINodeSlot(input: INodeInputSlot): INodeSlot {
+  return isSlotObject(input)
+    ? input
+    : {
+        name: typeof input === 'string' ? input : '',
+        type: 'any',
+        boundingRect: [0, 0, 0, 0]
+      }
+}
+
+function inputHasWidget(input: INodeInputSlot) {
+  return isSlotObject(input) && 'widget' in input && input.widget
+}
+export function nonWidgetedInputs(
+  nodeData: VueNodeData | undefined
+): INodeSlot[] {
+  if (!nodeData?.inputs) return []
+
+  return nodeData.inputs
+    .filter((input) => !inputHasWidget(input))
+    .map(coerceINodeSlot)
+}
+
+export function linkedWidgetedInputs(
+  nodeData: VueNodeData | undefined
+): INodeSlot[] {
+  if (!nodeData?.inputs) return []
+
+  return nodeData.inputs
+    .filter((input) => inputHasWidget(input) && !!input.link)
+    .map(coerceINodeSlot)
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 56666f833..d2a160282 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <label v-if="widget.name" class="text-sm opacity-80">{{
+    <label v-if="widget.name" class="text-secondary text-sm">{{
       widget.name
     }}</label>
     <Button
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index afa290e48..6d31626a1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <div
-      class="max-h-[48rem] rounded border border-gray-300 p-4 dark-theme:border-gray-600"
+      class="max-h-[48rem] rounded border border-smoke-300 p-4 dark-theme:border-smoke-600"
     >
       <Chart
         :type="chartType"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 0ef51cce2..60b9aeb28 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -10,7 +10,7 @@
     <div class="mb-2 flex items-center justify-between gap-4 px-2">
       <label
         v-if="widget.name"
-        class="min-w-[4em] truncate text-xs opacity-80"
+        class="text-secondary min-w-[4em] truncate text-xs"
         >{{ widget.name }}</label
       >
       <!-- Group select and folder button together on the right -->
@@ -25,7 +25,8 @@
           class="max-w-[20em] min-w-[8em] text-xs"
           size="small"
           :pt="{
-            option: 'text-xs'
+            option: 'text-xs',
+            dropdownIcon: 'text-button-icon'
           }"
         />
         <Button
@@ -81,7 +82,7 @@
     <div class="mb-2 flex items-center justify-between gap-4 px-2">
       <label
         v-if="widget.name"
-        class="min-w-[4em] truncate text-xs opacity-80"
+        class="text-secondary min-w-[4em] truncate text-xs"
         >{{ widget.name }}</label
       >
       <!-- Group select and folder button together on the right -->
@@ -95,7 +96,8 @@
           class="max-w-[20em] min-w-[8em] text-xs"
           size="small"
           :pt="{
-            option: 'text-xs'
+            option: 'text-xs',
+            dropdownIcon: 'text-button-icon'
           }"
         />
         <Button
@@ -110,7 +112,7 @@
     <!-- Audio player -->
     <div class="group relative px-2">
       <div
-        class="flex items-center gap-4 rounded-lg bg-[#1a1b1e] p-4"
+        class="flex items-center gap-4 rounded-lg bg-charcoal-800 p-4"
         style="border: 1px solid #262729"
       >
         <!-- Audio icon -->
@@ -133,7 +135,7 @@
           <!-- Delete button -->
           <button
             :aria-label="$t('g.deleteAudioFile')"
-            class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-[#262729] focus:outline-none"
+            class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-charcoal-600 focus:outline-none"
             @click="clearFile"
           >
             <i class="pi pi-times text-sm text-white"></i>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index ad1624f2d..cb546b79a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -103,10 +103,10 @@ const inputNumberPt = useNumberWidgetButtonPt({
         @update:model-value="onChange"
       >
         <template #incrementicon>
-          <span class="pi pi-plus text-sm" />
+          <span class="pi pi-plus text-sm text-button-icon" />
         </template>
         <template #decrementicon>
-          <span class="pi pi-minus text-sm" />
+          <span class="pi pi-minus text-sm text-button-icon" />
         </template>
       </InputNumber>
     </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue
new file mode 100644
index 000000000..3d3fb9237
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { CanvasPointer } from '@/lib/litegraph/src/CanvasPointer'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<void>
+  readonly?: boolean
+}>()
+
+const canvasEl = ref()
+
+const canvas: LGraphCanvas = useCanvasStore().canvas as LGraphCanvas
+let node: LGraphNode | undefined
+let widgetInstance: IBaseWidget | undefined
+let pointer: CanvasPointer | undefined
+const scaleFactor = 2
+
+onMounted(() => {
+  node =
+    canvas?.graph?.getNodeById(
+      canvasEl.value.parentElement.attributes['node-id'].value
+    ) ?? undefined
+  if (!node) return
+  widgetInstance = node.widgets?.find((w) => w.name === props.widget.name)
+  if (!widgetInstance) return
+  canvasEl.value.width *= scaleFactor
+  if (!widgetInstance.triggerDraw)
+    widgetInstance.callback = useChainCallback(
+      widgetInstance.callback,
+      function (this: IBaseWidget) {
+        this?.triggerDraw?.()
+      }
+    )
+  widgetInstance.triggerDraw = draw
+  useResizeObserver(canvasEl.value.parentElement, draw)
+  watch(() => useColorPaletteStore().activePaletteId, draw)
+  pointer = new CanvasPointer(canvasEl.value)
+})
+onBeforeUnmount(() => {
+  if (widgetInstance) widgetInstance.triggerDraw = () => {}
+})
+
+function draw() {
+  if (!widgetInstance || !node) return
+  const width = canvasEl.value.parentElement.clientWidth
+  const height = widgetInstance.computeSize
+    ? widgetInstance.computeSize(width)[1]
+    : 20
+  widgetInstance.y = 0
+  canvasEl.value.height = (height + 2) * scaleFactor
+  canvasEl.value.width = width * scaleFactor
+  const ctx = canvasEl.value?.getContext('2d')
+  if (!ctx) return
+  ctx.scale(scaleFactor, scaleFactor)
+  widgetInstance.draw?.(ctx, node, width, 1, height)
+}
+function translateEvent(e: PointerEvent): asserts e is CanvasPointerEvent {
+  if (!node) return
+  canvas.adjustMouseEvent(e)
+  canvas.graph_mouse[0] = e.offsetX + node.pos[0]
+  canvas.graph_mouse[1] = e.offsetY + node.pos[1]
+}
+//See LGraphCanvas.processWidgetClick
+function handleDown(e: PointerEvent) {
+  if (!node || !widgetInstance || !pointer) return
+  translateEvent(e)
+  pointer.down(e)
+  if (widgetInstance.mouse)
+    pointer.onDrag = (e) =>
+      widgetInstance!.mouse?.(e, [e.offsetX, e.offsetY], node!)
+  //NOTE: a mouseUp event is already registed under pointer.finally
+  canvas.processWidgetClick(e, node, widgetInstance, pointer)
+}
+function handleUp(e: PointerEvent) {
+  if (!pointer) return
+  translateEvent(e)
+  e.click_time = e.timeStamp - (pointer?.eDown?.timeStamp ?? 0)
+  pointer.up(e)
+}
+function handleMove(e: PointerEvent) {
+  if (!pointer) return
+  translateEvent(e)
+  pointer.move(e)
+}
+</script>
+<template>
+  <div class="relative mx-[-12px] min-w-0 basis-0">
+    <canvas
+      ref="canvasEl"
+      class="absolute mt-[-13px] w-full cursor-crosshair"
+      @pointerdown="handleDown"
+      @pointerup="handleUp"
+      @pointermove="handleMove"
+    />
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
index aaa29489b..ee788cc4d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
@@ -369,32 +369,6 @@ Another line with more content.`
     })
   })
 
-  describe('Styling and Layout', () => {
-    it('applies widget-markdown class to container', () => {
-      const widget = createMockWidget('# Test')
-      const wrapper = mountComponent(widget, '# Test')
-
-      const container = wrapper.find('.widget-markdown')
-      expect(container.exists()).toBe(true)
-      expect(container.classes()).toContain('relative')
-      expect(container.classes()).toContain('w-full')
-      expect(container.classes()).toContain('cursor-text')
-    })
-
-    it('applies overflow handling to display mode', () => {
-      const widget = createMockWidget(
-        '# Long Content\n' + 'Content '.repeat(100)
-      )
-      const wrapper = mountComponent(
-        widget,
-        '# Long Content\n' + 'Content '.repeat(100)
-      )
-
-      const displayDiv = wrapper.find('.comfy-markdown-content')
-      expect(displayDiv.classes()).toContain('overflow-y-auto')
-    })
-  })
-
   describe('Focus Management', () => {
     it('creates textarea reference when entering edit mode', async () => {
       const widget = createMockWidget('# Test')
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 423e139c8..da0227828 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="widget-markdown relative w-full cursor-text"
-    @click="startEditing"
+    class="widget-expands widget-markdown relative w-full"
+    @dblclick="startEditing"
   >
     <!-- Display mode: Rendered markdown -->
     <div
-      class="comfy-markdown-content lod-toggle min-h-[60px] w-full overflow-y-auto rounded-lg px-4 py-2 text-sm hover:bg-[var(--p-content-hover-background)]"
+      class="comfy-markdown-content lod-toggle size-full min-h-[60px] overflow-y-auto rounded-lg px-4 py-2 text-sm"
       :class="isEditing === false ? 'visible' : 'invisible'"
       v-html="renderedHtml"
     />
@@ -83,15 +83,3 @@ const handleBlur = () => {
   isEditing.value = false
 }
 </script>
-
-<style scoped>
-.widget-markdown {
-  background-color: var(--p-muted-color);
-  border: 1px solid var(--p-border-color);
-  border-radius: var(--p-border-radius);
-}
-
-.comfy-markdown-content:hover {
-  background-color: var(--p-content-hover-background);
-}
-</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
index b9d9876a1..768372a45 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -9,7 +9,8 @@
       size="small"
       display="chip"
       :pt="{
-        option: 'text-xs'
+        option: 'text-xs',
+        dropdownIcon: 'text-button-icon'
       }"
       @update:model-value="onChange"
     />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 666f88fa9..b9d840538 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -2,7 +2,7 @@
   <div class="relative">
     <div class="mb-4">
       <Button
-        class="w-[413px] border-0 bg-zinc-500/10 text-zinc-400 dark-theme:bg-charcoal-600 dark-theme:text-white"
+        class="text-secondary w-[413px] border-0 bg-zinc-500/10 dark-theme:bg-charcoal-600 dark-theme:text-white"
         :disabled="isRecording || readonly"
         @click="handleStartRecording"
       >
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="isRecording || isPlaying || recordedURL"
-      class="flex h-14 w-[413px] items-center gap-4 rounded-lg bg-zinc-500/10 px-4 text-zinc-400 dark-theme:bg-node-component-surface dark-theme:text-white"
+      class="text-secondary flex h-14 w-[413px] items-center gap-4 rounded-lg bg-zinc-500/10 px-4 dark-theme:bg-node-component-surface dark-theme:text-white"
     >
       <!-- Recording Status -->
       <div class="flex min-w-30 items-center gap-2">
@@ -45,31 +45,31 @@
       <button
         v-if="isRecording"
         :title="t('g.stopRecording', 'Stop Recording')"
-        class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
+        class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopRecording"
       >
-        <div class="size-2.5 rounded-sm bg-[#C02323]" />
+        <div class="size-2.5 rounded-sm bg-danger-100" />
       </button>
 
       <button
         v-else-if="!isRecording && recordedURL && !isPlaying"
         :title="t('g.playRecording') || 'Play Recording'"
-        class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
+        class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handlePlayRecording"
       >
         <i
-          class="icon-[lucide--play] size-4 text-zinc-400 dark-theme:text-white"
+          class="text-secondary icon-[lucide--play] size-4 dark-theme:text-white"
         />
       </button>
 
       <button
         v-else-if="isPlaying"
         :title="t('g.stopPlayback') || 'Stop Playback'"
-        class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
+        class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopPlayback"
       >
         <i
-          class="icon-[lucide--square] size-4 text-zinc-400 dark-theme:text-white"
+          class="text-secondary icon-[lucide--square] size-4 dark-theme:text-white"
         />
       </button>
     </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
index 20a7f0f6d..c318ac0be 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
@@ -2,13 +2,15 @@
   <WidgetLayoutField :widget>
     <Select
       v-model="localValue"
+      :invalid
       :options="selectOptions"
       v-bind="combinedProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
       :aria-label="widget.name"
       size="small"
       :pt="{
-        option: 'text-xs'
+        option: 'text-xs',
+        dropdownIcon: 'text-button-icon'
       }"
       data-capture-wheel="true"
       @update:model-value="onChange"
@@ -52,11 +54,6 @@ const { localValue, onChange } = useWidgetValue({
 // Transform compatibility props for overlay positioning
 const transformCompatProps = useTransformCompatOverlayProps()
 
-const combinedProps = computed(() => ({
-  ...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
-  ...transformCompatProps.value
-}))
-
 // Extract select options from widget options
 const selectOptions = computed(() => {
   const options = props.widget.options
@@ -67,4 +64,13 @@ const selectOptions = computed(() => {
 
   return []
 })
+const invalid = computed(
+  () => !!localValue.value && !selectOptions.value.includes(localValue.value)
+)
+
+const combinedProps = computed(() => ({
+  ...filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS),
+  ...transformCompatProps.value,
+  ...(invalid.value ? { placeholder: `${localValue.value}` } : {})
+}))
 </script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
index 811c2af25..bb5accb81 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
@@ -7,6 +7,7 @@ import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { useAssetsStore } from '@/stores/assetsStore'
 import { useQueueStore } from '@/stores/queueStore'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import type { AssetKind } from '@/types/widgetTypes'
@@ -223,6 +224,13 @@ const uploadFile = async (
   }
 
   const data = await resp.json()
+
+  // Update AssetsStore when uploading to input folder
+  if (formFields.type === 'input' || (!formFields.type && !isPasted)) {
+    const assetsStore = useAssetsStore()
+    await assetsStore.updateInputs()
+  }
+
   return data.subfolder ? `${data.subfolder}/${data.name}` : data.name
 }
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
index c0b6daaef..64289b811 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
@@ -195,14 +195,6 @@ describe('WidgetTextarea Value Binding', () => {
       const textarea = wrapper.find('textarea')
       expect(textarea.attributes('placeholder')).toBe('Custom placeholder')
     })
-
-    it('sets default rows attribute', () => {
-      const widget = createMockWidget('test')
-      const wrapper = mountComponent(widget, 'test')
-
-      const textarea = wrapper.find('textarea')
-      expect(textarea.attributes('rows')).toBe('3')
-    })
   })
 
   describe('Edge Cases', () => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index a501b27e6..1b877a4e2 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -1,13 +1,14 @@
 <template>
-  <div class="relative">
+  <div class="widget-expands relative">
     <Textarea
       v-model="localValue"
       v-bind="filteredProps"
-      :class="cn(WidgetInputBaseClass, 'w-full text-xs lod-toggle')"
+      :class="
+        cn(WidgetInputBaseClass, 'size-full text-xs lod-toggle resize-none')
+      "
       :placeholder="placeholder || widget.name || ''"
       :aria-label="widget.name"
-      size="small"
-      rows="3"
+      fluid
       data-capture-wheel="true"
       @update:model-value="onChange"
     />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
index f1b570994..ebcadf492 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -6,6 +6,9 @@
       class="w-full text-xs"
       :aria-label="widget.name"
       size="small"
+      :pt="{
+        dropdownIcon: 'text-button-icon'
+      }"
       @update:model-value="onChange"
     />
   </WidgetLayoutField>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index 59ed07bde..6aeac17e5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -29,28 +29,26 @@
         >
           <i
             v-if="!isPlaying"
-            class="icon-[lucide--play] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--play] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
           <i
             v-else
-            class="icon-[lucide--pause] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--pause] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
         </div>
 
         <!-- Time Display -->
-        <div
-          class="text-sm font-normal text-nowrap text-black dark-theme:text-white"
-        >
+        <div class="text-sm font-normal text-nowrap text-base-foreground">
           {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
         </div>
       </div>
 
       <!-- Progress Bar -->
       <div
-        class="relative h-0.5 flex-1 rounded-full bg-gray-300 dark-theme:bg-stone-200"
+        class="relative h-0.5 flex-1 rounded-full bg-smoke-300 dark-theme:bg-ash-800"
       >
         <div
-          class="absolute top-0 left-0 h-full rounded-full bg-gray-600 transition-all dark-theme:bg-white/50"
+          class="absolute top-0 left-0 h-full rounded-full bg-smoke-600 transition-all dark-theme:bg-white/50"
           :style="{ width: `${progressPercentage}%` }"
         />
         <input
@@ -77,15 +75,15 @@
         >
           <i
             v-if="showVolumeTwo"
-            class="icon-[lucide--volume-2] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--volume-2] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
           <i
             v-else-if="showVolumeOne"
-            class="icon-[lucide--volume-1] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--volume-1] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
           <i
             v-else
-            class="icon-[lucide--volume-x] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--volume-x] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
         </div>
 
@@ -100,7 +98,7 @@
           @click="toggleOptionsMenu"
         >
           <i
-            class="icon-[lucide--more-vertical] size-4 text-gray-600 dark-theme:text-gray-800"
+            class="icon-[lucide--more-vertical] size-4 text-smoke-600 dark-theme:text-smoke-800"
           />
         </div>
       </div>
@@ -116,10 +114,9 @@
       >
         <template #item="{ item }">
           <div v-if="item.key === 'volume'" class="w-48 px-4 py-2">
-            <label
-              class="mb-2 block text-xs text-black dark-theme:text-white"
-              >{{ item.label }}</label
-            >
+            <label class="mb-2 block text-xs text-base-foreground">{{
+              item.label
+            }}</label>
             <Slider
               :model-value="volume * 10"
               :min="0"
@@ -134,12 +131,10 @@
             class="flex cursor-pointer items-center px-4 py-2 text-xs hover:bg-white/10"
             @click="item.onClick?.()"
           >
-            <span class="text-black dark-theme:text-white">{{
-              item.label
-            }}</span>
+            <span class="text-base-foreground">{{ item.label }}</span>
             <i
               v-if="item.selected"
-              class="ml-auto icon-[lucide--check] size-4 text-black dark-theme:text-white"
+              class="ml-auto icon-[lucide--check] size-4 text-base-foreground"
             />
           </div>
         </template>
@@ -388,7 +383,7 @@ onUnmounted(() => {
 
 <style scoped>
 .audio-player-menu {
-  --p-tieredmenu-item-focus-background: rgba(255, 255, 255, 0.1);
-  --p-tieredmenu-item-active-background: rgba(255, 255, 255, 0.1);
+  --p-tieredmenu-item-focus-background: rgb(255 255 255 / 0.1);
+  --p-tieredmenu-item-active-background: rgb(255 255 255 / 0.1);
 }
 </style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
index 738d62028..eb337aabf 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
@@ -313,7 +313,7 @@ describe('FormSelectButton Core Component', () => {
       const buttons = wrapper.findAll('button')
       expect(buttons[0].classes()).not.toContain('bg-white') // Selected styling disabled
       expect(buttons[0].classes()).toContain('opacity-50')
-      expect(buttons[0].classes()).toContain('text-zinc-500')
+      expect(buttons[0].classes()).toContain('text-secondary')
     })
   })
 
@@ -372,7 +372,7 @@ describe('FormSelectButton Core Component', () => {
 
       const unselectedButton = wrapper.findAll('button')[1]
       expect(unselectedButton.classes()).toContain('bg-transparent')
-      expect(unselectedButton.classes()).toContain('text-zinc-500')
+      expect(unselectedButton.classes()).toContain('text-secondary')
     })
 
     it('applies hover effects to enabled unselected buttons', () => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index 905cc16fd..633c18a62 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -21,10 +21,9 @@
             'opacity-50 cursor-not-allowed': disabled,
             'cursor-pointer': !disabled
           },
-          {
-            'text-neutral-900': isSelected(option) && !disabled,
-            'text-zinc-500': !isSelected(option) || disabled
-          }
+          isSelected(option) && !disabled
+            ? 'text-neutral-900'
+            : 'text-secondary'
         )
       "
       :disabled="disabled"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
index 6424589d6..2f208fa47 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
@@ -33,16 +33,20 @@ const selectedItems = computed(() => {
 })
 
 const chevronClass = computed(() =>
-  cn('mr-2 size-4 transition-transform duration-200 flex-shrink-0', {
-    'rotate-180': props.isOpen
-  })
+  cn(
+    'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-button-icon',
+    {
+      'rotate-180': props.isOpen
+    }
+  )
 )
 
 const theButtonStyle = computed(() =>
-  cn('bg-transparent border-0 outline-none text-zinc-400', {
+  cn('bg-transparent border-0 outline-none text-text-secondary', {
     'hover:bg-node-component-widget-input-surface/30 cursor-pointer':
       !props.disabled,
-    'cursor-not-allowed': props.disabled
+    'cursor-not-allowed': props.disabled,
+    'text-text-primary': selectedItems.value.length > 0
   })
 )
 </script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index b9f57398a..6d7b520eb 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -53,7 +53,7 @@ const searchQuery = defineModel<string>('searchQuery')
       :is-querying="isQuerying"
     />
     <!-- List -->
-    <div class="relative flex h-full overflow-hidden">
+    <div class="relative flex h-full mt-2 overflow-y-scroll">
       <div
         :class="
           cn(
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index d70ab0e7b..3d88053ea 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -21,7 +21,7 @@ const actionButtonStyle =
 const resetInputStyle = 'bg-transparent border-0 outline-0 ring-0 text-left'
 
 const layoutSwitchItemStyle =
-  'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-black hover:dark-theme:text-white active:scale-95'
+  'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-base-foreground active:scale-95'
 
 const sortPopoverRef = useTemplateRef('sortPopoverRef')
 const sortTriggerRef = useTemplateRef('sortTriggerRef')
@@ -44,13 +44,13 @@ function handleSortSelected(item: SortOption) {
 </script>
 
 <template>
-  <div class="flex gap-2 px-4 text-zinc-400">
+  <div class="text-secondary flex gap-2 px-4">
     <label
       :class="
         cn(
           actionButtonStyle,
           'flex-1 flex px-2 items-center text-base leading-none cursor-text',
-          searchQuery?.trim() !== '' ? 'text-black dark-theme:text-white' : '',
+          searchQuery?.trim() !== '' ? 'text-base-foreground' : '',
           'hover:!outline-blue-500/80',
           'focus-within:!outline-blue-500/80'
         )
@@ -150,7 +150,7 @@ function handleSortSelected(item: SortOption) {
             resetInputStyle,
             layoutSwitchItemStyle,
             layoutMode === 'list'
-              ? 'bg-neutral-500/50 text-black dark-theme:text-white'
+              ? 'bg-neutral-500/50 text-base-foreground'
               : ''
           )
         "
@@ -164,7 +164,7 @@ function handleSortSelected(item: SortOption) {
             resetInputStyle,
             layoutSwitchItemStyle,
             layoutMode === 'grid'
-              ? 'bg-neutral-500/50 text-black dark-theme:text-white'
+              ? 'bg-neutral-500/50 text-base-foreground'
               : ''
           )
         "
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index d047fa2c0..a0dd11199 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -19,10 +19,10 @@ const filterSelected = defineModel<OptionId>('filterSelected')
         cn(
           'px-4 py-2 rounded-md inline-flex justify-center items-center cursor-pointer select-none',
           'transition-all duration-150',
-          'hover:text-black hover:dark-theme:text-white hover:bg-zinc-500/10',
+          'hover:text-base-foreground hover:bg-zinc-500/10',
           'active:scale-95',
           filterSelected === option.id
-            ? '!bg-zinc-500/20 text-black dark-theme:text-white'
+            ? '!bg-zinc-500/20 text-base-foreground'
             : 'bg-transparent'
         )
       "
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index e596ba290..24411c9cc 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -12,20 +12,20 @@ defineProps<{
 
 <template>
   <div
-    class="flex h-[30px] items-center justify-between gap-2 overscroll-contain"
+    class="flex h-[30px] min-w-105 items-center justify-between gap-2 overscroll-contain contain-size"
   >
-    <div class="relative flex h-6 items-center">
+    <div class="relative flex h-6 min-w-28 shrink-1 items-center">
       <p
         v-if="widget.name"
-        class="lod-toggle w-28 flex-1 truncate text-sm font-normal text-node-component-slot-text"
+        class="lod-toggle flex-1 truncate text-sm font-normal text-node-component-slot-text"
       >
         {{ widget.label || widget.name }}
       </p>
       <LODFallback />
     </div>
-    <div class="relative">
+    <div class="relative min-w-75 grow-1">
       <div
-        class="lod-toggle w-75 cursor-default"
+        class="lod-toggle cursor-default"
         @pointerdown.stop="noop"
         @pointermove.stop="noop"
         @pointerup.stop="noop"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
index 197605066..ba3b33c11 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
@@ -2,13 +2,13 @@ import { cn } from '@/utils/tailwindUtil'
 
 export const WidgetInputBaseClass = cn([
   // Background
-  'bg-node-component-widget-input-surface',
-  'text-node-component-widget-input',
+  'not-disabled:bg-node-component-widget-input-surface',
+  'not-disabled:text-node-component-widget-input',
   // Outline
   'border-none',
   'outline outline-offset-[-1px] outline-node-stroke',
   // Rounded
   'rounded-lg',
   // Hover
-  'hover:outline-blue-500/80'
+  'hover:bg-node-component-surface-hovered'
 ])
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useAudioRecordWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useAudioRecordWidget.ts
deleted file mode 100644
index efa11a43b..000000000
--- a/src/renderer/extensions/vueNodes/widgets/composables/useAudioRecordWidget.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IAudioRecordWidget } from '@/lib/litegraph/src/types/widgets'
-import type {
-  AudioRecordInputSpec,
-  InputSpec as InputSpecV2
-} from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
-
-export const useAudioRecordWidget = (): ComfyWidgetConstructorV2 => {
-  return (node: LGraphNode, inputSpec: InputSpecV2): IAudioRecordWidget => {
-    const {
-      name,
-      default: defaultValue = '',
-      options = {}
-    } = inputSpec as AudioRecordInputSpec
-
-    const widget = node.addWidget('audiorecord', name, defaultValue, () => {}, {
-      serialize: true,
-      ...options
-    }) as IAudioRecordWidget
-
-    return widget
-  }
-}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index 43441530d..b52ee0a13 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -61,7 +61,10 @@ const addComboWidget = (
 ): IBaseWidget => {
   const settingStore = useSettingStore()
   const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
-  const isEligible = assetService.isAssetBrowserEligible(node.comfyClass)
+  const isEligible = assetService.isAssetBrowserEligible(
+    node.comfyClass,
+    inputSpec.name
+  )
 
   if (isUsingAssetAPI && isEligible) {
     const currentValue = getDefaultValue(inputSpec)
@@ -73,7 +76,7 @@ const addComboWidget = (
       'asset',
       inputSpec.name,
       displayLabel,
-      async () => {
+      async function (this: IBaseWidget) {
         if (!isAssetWidget(widget)) {
           throw new Error(`Expected asset widget but received ${widget.type}`)
         }
@@ -108,7 +111,7 @@ const addComboWidget = (
             }
 
             const oldValue = widget.value
-            widget.value = validatedFilename.data
+            this.value = validatedFilename.data
             node.onWidgetChanged?.(
               widget.name,
               validatedFilename.data,
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
index c3f200efa..c54d13bdf 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
@@ -53,14 +53,7 @@ function addMarkdownWidget(
   widget.inputEl = inputEl
   widget.options.minNodeSize = [400, 200]
 
-  inputEl.addEventListener('pointerdown', (event: PointerEvent) => {
-    if (event.button !== 0) {
-      app.canvas.processMouseDown(event)
-      return
-    }
-    if (event.target instanceof HTMLAnchorElement) {
-      return
-    }
+  inputEl.addEventListener('dblclick', () => {
     inputEl.classList.add('editing')
     setTimeout(() => {
       textarea.focus()
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
index 5ce18d8f9..df1d73028 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
@@ -1,7 +1,7 @@
 const sharedButtonClasses =
-  '!inline-flex !items-center !justify-center !border-0 !bg-transparent text-inherit transition-colors duration-150 ease-in-out ' +
-  'hover:!bg-[var(--color-node-component-surface-hovered)] active:!bg-[var(--color-node-component-surface-selected)] ' +
-  'disabled:!bg-[var(--color-node-component-disabled)] disabled:!text-[var(--color-node-icon-disabled)] disabled:cursor-not-allowed'
+  '!inline-flex !items-center !justify-center !border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out ' +
+  'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected' +
+  'disabled:bg-node-component-disabled disabled:text-node-icon-disabled disabled:cursor-not-allowed'
 
 export function useNumberWidgetButtonPt(options?: {
   roundedLeft?: boolean
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
index bfe6f71ef..b8d618cb2 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
@@ -2,8 +2,10 @@ import axios from 'axios'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { IWidget, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { isCloud } from '@/platform/distribution/types'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 import { api } from '@/scripts/api'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const MAX_RETRIES = 5
 const TIMEOUT = 4096
@@ -19,6 +21,17 @@ interface CacheEntry<T> {
   failed?: boolean
 }
 
+async function getAuthHeaders() {
+  if (isCloud) {
+    const authStore = useFirebaseAuthStore()
+    const authHeader = await authStore.getAuthHeader()
+    return {
+      ...(authHeader && { headers: authHeader })
+    }
+  }
+  return {}
+}
+
 const dataCache = new Map<string, CacheEntry<any>>()
 
 const createCacheKey = (config: RemoteWidgetConfig): string => {
@@ -57,11 +70,16 @@ const fetchData = async (
   controller: AbortController
 ) => {
   const { route, response_key, query_params, timeout = TIMEOUT } = config
+
+  const authHeaders = await getAuthHeaders()
+
   const res = await axios.get(route, {
     params: query_params,
     signal: controller.signal,
-    timeout
+    timeout,
+    ...authHeaders
   })
+
   return response_key ? res.data[response_key] : res.data
 }
 
diff --git a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
index 6cab2dbdd..8de442a08 100644
--- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -3,6 +3,7 @@
  */
 import type { Component } from 'vue'
 
+import Load3D from '@/components/load3d/Load3D.vue'
 import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
 
 import WidgetAudioUI from '../components/WidgetAudioUI.vue'
@@ -14,6 +15,7 @@ import WidgetGalleria from '../components/WidgetGalleria.vue'
 import WidgetImageCompare from '../components/WidgetImageCompare.vue'
 import WidgetInputNumber from '../components/WidgetInputNumber.vue'
 import WidgetInputText from '../components/WidgetInputText.vue'
+import WidgetLegacy from '../components/WidgetLegacy.vue'
 import WidgetMarkdown from '../components/WidgetMarkdown.vue'
 import WidgetMultiSelect from '../components/WidgetMultiSelect.vue'
 import WidgetRecordAudio from '../components/WidgetRecordAudio.vue'
@@ -114,6 +116,7 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
     'markdown',
     { component: WidgetMarkdown, aliases: ['MARKDOWN'], essential: false }
   ],
+  ['legacy', { component: WidgetLegacy, aliases: [], essential: true }],
   [
     'audiorecord',
     {
@@ -129,7 +132,8 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
       aliases: ['AUDIOUI', 'AUDIO_UI'],
       essential: false
     }
-  ]
+  ],
+  ['load3D', { component: Load3D, aliases: ['LOAD_3D'], essential: false }]
 ]
 
 const getComboWidgetAdditions = (): Map<string, Component> => {
@@ -161,19 +165,11 @@ export const getComponent = (type: string, name: string): Component | null => {
   return widgets.get(canonicalType)?.component || null
 }
 
-const isSupported = (type: string): boolean => {
-  const canonicalType = getCanonicalType(type)
-  return widgets.has(canonicalType)
-}
-
 export const isEssential = (type: string): boolean => {
   const canonicalType = getCanonicalType(type)
   return widgets.get(canonicalType)?.essential || false
 }
 
 export const shouldRenderAsVue = (widget: Partial<SafeWidgetData>): boolean => {
-  if (widget.options?.canvasOnly) return false
-  if (widget.isDOMWidget) return true
-  if (!widget.type) return false
-  return isSupported(widget.type)
+  return !widget.options?.canvasOnly && !!widget.type
 }
diff --git a/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts b/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts
index 35e0c4482..12e7fdf4f 100644
--- a/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts
+++ b/src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts
@@ -1,5 +1,6 @@
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 
 /**
  * Format time in MM:SS format
@@ -23,10 +24,6 @@ export function getAudioUrlFromPath(
   return api.apiURL(getResourceURL(subfolder, filename, type))
 }
 
-function getRandParam() {
-  return '&rand=' + Math.random()
-}
-
 export function getResourceURL(
   subfolder: string,
   filename: string,
@@ -36,7 +33,7 @@ export function getResourceURL(
     'filename=' + encodeURIComponent(filename),
     'type=' + type,
     'subfolder=' + subfolder,
-    getRandParam().substring(1)
+    app.getRandParam().substring(1)
   ].join('&')
 
   return `/view?${params}`
diff --git a/src/router.ts b/src/router.ts
index cc51f7715..9959975d6 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,16 +1,33 @@
+import { until } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import {
   createRouter,
   createWebHashHistory,
   createWebHistory
 } from 'vue-router'
+import type { RouteLocationNormalized } from 'vue-router'
 
+import { isCloud } from '@/platform/distribution/types'
+import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useUserStore } from '@/stores/userStore'
+import { isElectron } from '@/utils/envUtil'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
-import { useUserStore } from './stores/userStore'
-import { isElectron } from './utils/envUtil'
+import { cloudOnboardingRoutes } from './platform/cloud/onboarding/onboardingCloudRoutes'
 
 const isFileProtocol = window.location.protocol === 'file:'
-const basePath = isElectron() ? '/' : window.location.pathname
+
+// Determine base path for the router
+// - Electron: always root
+// - Web: rely on Vite's BASE_URL (configured via vite.config `base`)
+function getBasePath(): string {
+  if (isElectron()) return '/'
+  // Vite injects BASE_URL at build/dev time; default to '/'
+  return import.meta.env?.BASE_URL || '/'
+}
+
+const basePath = getBasePath()
 
 const router = createRouter({
   history: isFileProtocol
@@ -20,6 +37,7 @@ const router = createRouter({
       // we need this base path or assets will incorrectly resolve from 'http://localhost:7801/'
       createWebHistory(basePath),
   routes: [
+    ...(isCloud ? cloudOnboardingRoutes : []),
     {
       path: '/',
       component: LayoutDefault,
@@ -29,6 +47,7 @@ const router = createRouter({
           name: 'GraphView',
           component: () => import('@/views/GraphView.vue'),
           beforeEnter: async (_to, _from, next) => {
+            // Then check user store
             const userStore = useUserStore()
             await userStore.initialize()
             if (userStore.needsLogin) {
@@ -56,4 +75,108 @@ const router = createRouter({
   }
 })
 
+if (isCloud) {
+  const PUBLIC_ROUTE_NAMES = new Set([
+    'cloud-login',
+    'cloud-signup',
+    'cloud-forgot-password',
+    'cloud-sorry-contact-support'
+  ])
+  const PUBLIC_ROUTE_PATHS = new Set([
+    '/cloud/login',
+    '/cloud/signup',
+    '/cloud/forgot-password',
+    '/cloud/sorry-contact-support'
+  ])
+
+  function isPublicRoute(to: RouteLocationNormalized) {
+    const name = String(to.name)
+    if (PUBLIC_ROUTE_NAMES.has(name)) return true
+    const path = to.path
+    return PUBLIC_ROUTE_PATHS.has(path)
+  }
+  // Global authentication guard
+  router.beforeEach(async (to, _from, next) => {
+    const authStore = useFirebaseAuthStore()
+
+    // Wait for Firebase auth to initialize
+    // Timeout after 16 seconds
+    if (!authStore.isInitialized) {
+      try {
+        const { isInitialized } = storeToRefs(authStore)
+        await until(isInitialized).toBe(true, { timeout: 16_000 })
+      } catch (error) {
+        console.error('Auth initialization failed:', error)
+        return next({ name: 'cloud-auth-timeout' })
+      }
+    }
+
+    // Pass authenticated users
+    const authHeader = await authStore.getAuthHeader()
+    const isLoggedIn = !!authHeader
+
+    // Allow public routes
+    if (isPublicRoute(to)) {
+      return next()
+    }
+
+    // Special handling for user-check
+    // These routes need auth but handle their own routing logic
+    if (to.name === 'cloud-user-check') {
+      if (to.meta.requiresAuth && !isLoggedIn) {
+        return next({ name: 'cloud-login' })
+      }
+      return next()
+    }
+
+    // Prevent redirect loop when coming from user-check
+    if (_from.name === 'cloud-user-check' && to.path === '/') {
+      return next()
+    }
+
+    // Check if route requires authentication
+    if (to.meta.requiresAuth && !isLoggedIn) {
+      return next({ name: 'cloud-login' })
+    }
+
+    // Handle other protected routes
+    if (!isLoggedIn) {
+      // For Electron, use dialog
+      if (isElectron()) {
+        const dialogService = useDialogService()
+        const loginSuccess = await dialogService.showSignInDialog()
+        return loginSuccess ? next() : next(false)
+      }
+
+      // For web, redirect to login
+      return next({ name: 'cloud-login' })
+    }
+
+    // User is logged in - check if they need onboarding
+    // For root path, check actual user status to handle waitlisted users
+    if (!isElectron() && isLoggedIn && to.path === '/') {
+      // Import auth functions dynamically to avoid circular dependency
+      const { getSurveyCompletedStatus } = await import(
+        '@/platform/cloud/onboarding/auth'
+      )
+      try {
+        // Check user's actual status
+        const surveyCompleted = await getSurveyCompletedStatus()
+
+        // Survey is required for all users regardless of whitelist status
+        if (!surveyCompleted) {
+          return next({ name: 'cloud-survey' })
+        }
+      } catch (error) {
+        console.error('Failed to check user status:', error)
+        // On error, redirect to user-check as fallback
+        return next({ name: 'cloud-user-check' })
+      }
+    }
+
+    // User is logged in and accessing protected route
+    return next()
+  })
+}
+
 export default router
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index 007b3e58d..ce81c0368 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -11,8 +11,9 @@ import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 
 const zNodeType = z.string()
-const zQueueIndex = z.number()
-const zPromptId = z.string()
+export const zQueueIndex = z.number()
+export const zPromptId = z.string()
+export type PromptId = z.infer<typeof zPromptId>
 export const resultItemType = z.enum(['input', 'output', 'temp'])
 export type ResultItemType = z.infer<typeof resultItemType>
 
@@ -170,10 +171,10 @@ const zExtraPngInfo = z
   })
   .passthrough()
 
-const zExtraData = z.object({
+export const zExtraData = z.object({
   /** extra_pnginfo can be missing is backend execution gets a validation error. */
   extra_pnginfo: zExtraPngInfo.optional(),
-  client_id: z.string()
+  client_id: z.string().optional()
 })
 const zOutputsToExecute = z.array(zNodeId)
 
@@ -210,7 +211,7 @@ const zStatusMessage = z.union([
   zExecutionErrorMessage
 ])
 
-const zStatus = z.object({
+export const zStatus = z.object({
   status_str: z.enum(['success', 'error']),
   completed: z.boolean(),
   messages: z.array(zStatusMessage)
@@ -239,7 +240,7 @@ const zPendingTaskItem = z.object({
   prompt: zTaskPrompt
 })
 
-const zTaskOutput = z.record(zNodeId, zOutputs)
+export const zTaskOutput = z.record(zNodeId, zOutputs)
 
 const zNodeOutputsMeta = z.object({
   node_id: zNodeId,
@@ -248,7 +249,7 @@ const zNodeOutputsMeta = z.object({
   read_node_id: zNodeId.optional()
 })
 
-const zTaskMeta = z.record(zNodeId, zNodeOutputsMeta)
+export const zTaskMeta = z.record(zNodeId, zNodeOutputsMeta)
 
 const zHistoryTaskItem = z.object({
   taskType: z.literal('History'),
@@ -415,19 +416,16 @@ const zSettings = z.object({
   'Comfy.Sidebar.Location': z.enum(['left', 'right']),
   'Comfy.Sidebar.Size': z.enum(['small', 'normal']),
   'Comfy.Sidebar.UnifiedWidth': z.boolean(),
+  'Comfy.Sidebar.Style': z.enum(['floating', 'connected']),
   'Comfy.SnapToGrid.GridSize': z.number(),
   'Comfy.TextareaWidget.FontSize': z.number(),
   'Comfy.TextareaWidget.Spellcheck': z.boolean(),
-  'Comfy.UseNewMenu': z.enum(['Disabled', 'Top', 'Bottom']),
+  'Comfy.UseNewMenu': z.enum(['Disabled', 'Top']),
   'Comfy.TreeExplorer.ItemPadding': z.number(),
   'Comfy.Validation.Workflows': z.boolean(),
   'Comfy.Workflow.SortNodeIdOnSave': z.boolean(),
   'Comfy.Queue.ImageFit': z.enum(['contain', 'cover']),
-  'Comfy.Workflow.WorkflowTabsPosition': z.enum([
-    'Sidebar',
-    'Topbar',
-    'Topbar (2nd-row)'
-  ]),
+  'Comfy.Workflow.WorkflowTabsPosition': z.enum(['Sidebar', 'Topbar']),
   'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
   'Comfy.WidgetControlMode': z.enum(['before', 'after']),
   'Comfy.Window.UnloadConfirmation': z.boolean(),
@@ -472,6 +470,7 @@ const zSettings = z.object({
   'Comfy.Canvas.LeftMouseClickBehavior': z.string(),
   'Comfy.Canvas.MouseWheelScroll': z.string(),
   'Comfy.VueNodes.Enabled': z.boolean(),
+  'Comfy.VueNodes.AutoScaleLayout': z.boolean(),
   'Comfy.Assets.UseAssetAPI': z.boolean(),
   'Comfy-Desktop.AutoUpdate': z.boolean(),
   'Comfy-Desktop.SendStatistics': z.boolean(),
@@ -483,7 +482,6 @@ const zSettings = z.object({
   'Comfy.MaskEditor.BrushAdjustmentSpeed': z.number(),
   'Comfy.MaskEditor.UseDominantAxis': z.boolean(),
   'Comfy.Load3D.ShowGrid': z.boolean(),
-  'Comfy.Load3D.ShowPreview': z.boolean(),
   'Comfy.Load3D.BackgroundColor': z.string(),
   'Comfy.Load3D.LightIntensity': z.number(),
   'Comfy.Load3D.LightIntensityMaximum': z.number(),
diff --git a/src/schemas/colorPaletteSchema.ts b/src/schemas/colorPaletteSchema.ts
index 88b797486..313569a38 100644
--- a/src/schemas/colorPaletteSchema.ts
+++ b/src/schemas/colorPaletteSchema.ts
@@ -57,7 +57,7 @@ const litegraphBaseSchema = z.object({
   BADGE_BG_COLOR: z.string()
 })
 
-const comfyBaseSchema = z.object({
+export const comfyBaseSchema = z.object({
   ['fg-color']: z.string(),
   ['bg-color']: z.string(),
   ['bg-img']: z.string().optional(),
@@ -75,7 +75,15 @@ const comfyBaseSchema = z.object({
   ['content-fg']: z.string(),
   ['content-hover-bg']: z.string(),
   ['content-hover-fg']: z.string(),
-  ['bar-shadow']: z.string()
+  ['bar-shadow']: z.string(),
+  ['contrast-mix-color']: z.string().optional(),
+  ['interface-stroke']: z.string().optional(),
+  ['interface-panel-surface']: z.string().optional(),
+  ['interface-panel-box-shadow']: z.string().optional(),
+  ['interface-panel-drop-shadow']: z.string().optional(),
+  ['interface-panel-hover-surface']: z.string().optional(),
+  ['interface-panel-selected-surface']: z.string().optional(),
+  ['interface-button-hover-surface']: z.string().optional()
 })
 
 const colorsSchema = z.object({
diff --git a/src/schemas/nodeDef/nodeDefSchemaV2.ts b/src/schemas/nodeDef/nodeDefSchemaV2.ts
index f77c59a80..09983d115 100644
--- a/src/schemas/nodeDef/nodeDefSchemaV2.ts
+++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts
@@ -152,13 +152,6 @@ const zTextareaInputSpec = zBaseInputOptions.extend({
     .optional()
 })
 
-const zAudioRecordInputSpec = zBaseInputOptions.extend({
-  type: z.literal('AUDIORECORD'),
-  name: z.string(),
-  isOptional: z.boolean().optional(),
-  options: z.record(z.unknown()).optional()
-})
-
 const zCustomInputSpec = zBaseInputOptions.extend({
   type: z.string(),
   name: z.string(),
@@ -174,7 +167,6 @@ const zInputSpec = z.union([
   zColorInputSpec,
   zFileUploadInputSpec,
   zImageInputSpec,
-  zAudioRecordInputSpec,
   zImageCompareInputSpec,
   zMarkdownInputSpec,
   zTreeSelectInputSpec,
@@ -230,7 +222,6 @@ export type GalleriaInputSpec = z.infer<typeof zGalleriaInputSpec>
 export type SelectButtonInputSpec = z.infer<typeof zSelectButtonInputSpec>
 export type TextareaInputSpec = z.infer<typeof zTextareaInputSpec>
 export type CustomInputSpec = z.infer<typeof zCustomInputSpec>
-export type AudioRecordInputSpec = z.infer<typeof zAudioRecordInputSpec>
 
 export type InputSpec = z.infer<typeof zInputSpec>
 export type OutputSpec = z.infer<typeof zOutputSpec>
diff --git a/src/schemas/signInSchema.ts b/src/schemas/signInSchema.ts
index 1e5a44198..b4b242663 100644
--- a/src/schemas/signInSchema.ts
+++ b/src/schemas/signInSchema.ts
@@ -45,16 +45,11 @@ export const signUpSchema = passwordSchema
     email: z
       .string()
       .email(t('validation.invalidEmail'))
-      .min(1, t('validation.required')),
-    personalDataConsent: z.boolean()
+      .min(1, t('validation.required'))
   })
   .refine((data) => data.password === data.confirmPassword, {
     message: t('validation.password.match'),
     path: ['confirmPassword']
   })
-  .refine((data) => data.personalDataConsent === true, {
-    message: t('validation.personalDataConsentRequired'),
-    path: ['personalDataConsent']
-  })
 
 export type SignUpData = z.infer<typeof signUpSchema>
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index e372b8fa9..40cc0ac16 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -1,3 +1,4 @@
+import { promiseTimeout, until } from '@vueuse/core'
 import axios from 'axios'
 import { get } from 'es-toolkit/compat'
 
@@ -6,6 +7,7 @@ import type {
   ModelFile,
   ModelFolderInfo
 } from '@/platform/assets/schemas/assetSchema'
+import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { type WorkflowTemplates } from '@/platform/workflow/templates/types/template'
 import type {
@@ -42,7 +44,10 @@ import type {
   UserDataFullInfo
 } from '@/schemas/apiSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import type { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import type { AuthHeader } from '@/types/authTypes'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
+import { fetchHistory } from '@/platform/remote/comfyui/history'
 
 interface QueuePromptRequestBody {
   client_id: string
@@ -200,6 +205,22 @@ type SimpleApiEvents = keyof PickNevers<ApiEventTypes>
 /** Keys (names) of API events that pass a {@link CustomEvent} `detail` object. */
 type ComplexApiEvents = keyof NeverNever<ApiEventTypes>
 
+export type GlobalSubgraphData = {
+  name: string
+  info: { node_pack: string }
+  data: string | Promise<string>
+}
+
+function addHeaderEntry(headers: HeadersInit, key: string, value: string) {
+  if (Array.isArray(headers)) {
+    headers.push([key, value])
+  } else if (headers instanceof Headers) {
+    headers.set(key, value)
+  } else {
+    headers[key] = value
+  }
+}
+
 /** EventTarget typing has no generic capability. */
 export interface ComfyApi extends EventTarget {
   addEventListener<TEvent extends keyof ApiEvents>(
@@ -263,6 +284,11 @@ export class ComfyApi extends EventTarget {
   user: string
   socket: WebSocket | null = null
 
+  /**
+   * Cache Firebase auth store composable function.
+   */
+  private authStoreComposable?: typeof useFirebaseAuthStore
+
   reportedUnknownMessageTypes = new Set<string>()
 
   /**
@@ -300,8 +326,9 @@ export class ComfyApi extends EventTarget {
     super()
     this.user = ''
     this.api_host = location.host
-    this.api_base = location.pathname.split('/').slice(0, -1).join('/')
-    console.log('Running on', this.api_host)
+    this.api_base = isCloud
+      ? ''
+      : location.pathname.split('/').slice(0, -1).join('/')
     this.initialClientId = sessionStorage.getItem('clientId')
   }
 
@@ -317,25 +344,77 @@ export class ComfyApi extends EventTarget {
     return this.api_base + route
   }
 
-  fetchApi(route: string, options?: RequestInit) {
-    if (!options) {
-      options = {}
+  /**
+   * Gets the Firebase auth store instance using cached composable function.
+   * Caches the composable function on first call, then reuses it.
+   * Returns null for non-cloud distributions.
+   * @returns The Firebase auth store instance, or null if not in cloud
+   */
+  private async getAuthStore() {
+    if (isCloud) {
+      if (!this.authStoreComposable) {
+        const module = await import('@/stores/firebaseAuthStore')
+        this.authStoreComposable = module.useFirebaseAuthStore
+      }
+
+      return this.authStoreComposable()
     }
-    if (!options.headers) {
-      options.headers = {}
+  }
+
+  /**
+   * Waits for Firebase auth to be initialized before proceeding.
+   * Includes 10-second timeout to prevent infinite hanging.
+   */
+  private async waitForAuthInitialization(): Promise<void> {
+    if (isCloud) {
+      const authStore = await this.getAuthStore()
+      if (!authStore) return
+
+      if (authStore.isInitialized) return
+
+      try {
+        await Promise.race([
+          until(authStore.isInitialized),
+          promiseTimeout(10000)
+        ])
+      } catch {
+        console.warn('Firebase auth initialization timeout after 10 seconds')
+      }
     }
-    if (!options.cache) {
-      options.cache = 'no-cache'
+  }
+
+  async fetchApi(route: string, options?: RequestInit) {
+    const headers: HeadersInit = options?.headers ?? {}
+
+    if (isCloud) {
+      await this.waitForAuthInitialization()
+
+      // Get Firebase JWT token if user is logged in
+      const getAuthHeaderIfAvailable = async (): Promise<AuthHeader | null> => {
+        try {
+          const authStore = await this.getAuthStore()
+          return authStore ? await authStore.getAuthHeader() : null
+        } catch (error) {
+          console.warn('Failed to get auth header:', error)
+          return null
+        }
+      }
+
+      const authHeader = await getAuthHeaderIfAvailable()
+
+      if (authHeader) {
+        for (const [key, value] of Object.entries(authHeader)) {
+          addHeaderEntry(headers, key, value)
+        }
+      }
     }
 
-    if (Array.isArray(options.headers)) {
-      options.headers.push(['Comfy-User', this.user])
-    } else if (options.headers instanceof Headers) {
-      options.headers.set('Comfy-User', this.user)
-    } else {
-      options.headers['Comfy-User'] = this.user
-    }
-    return fetch(this.apiURL(route), options)
+    addHeaderEntry(headers, 'Comfy-User', this.user)
+    return fetch(this.apiURL(route), {
+      cache: 'no-cache',
+      ...options,
+      headers
+    })
   }
 
   override addEventListener<TEvent extends keyof ApiEvents>(
@@ -402,19 +481,44 @@ export class ComfyApi extends EventTarget {
    * Creates and connects a WebSocket for realtime updates
    * @param {boolean} isReconnect If the socket is connection is a reconnect attempt
    */
-  #createSocket(isReconnect?: boolean) {
+  private async createSocket(isReconnect?: boolean) {
     if (this.socket) {
       return
     }
 
     let opened = false
     let existingSession = window.name
+
+    // Build WebSocket URL with query parameters
+    const params = new URLSearchParams()
+
     if (existingSession) {
-      existingSession = '?clientId=' + existingSession
+      params.set('clientId', existingSession)
     }
-    this.socket = new WebSocket(
-      `ws${window.location.protocol === 'https:' ? 's' : ''}://${this.api_host}${this.api_base}/ws${existingSession}`
-    )
+
+    // Get auth token and set cloud params if available
+    if (isCloud) {
+      try {
+        const authStore = await this.getAuthStore()
+        const authToken = await authStore?.getIdToken()
+        if (authToken) {
+          params.set('token', authToken)
+        }
+      } catch (error) {
+        // Continue without auth token if there's an error
+        console.warn(
+          'Could not get auth token for WebSocket connection:',
+          error
+        )
+      }
+    }
+
+    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+    const baseUrl = `${protocol}://${this.api_host}${this.api_base}/ws`
+    const query = params.toString()
+    const wsUrl = query ? `${baseUrl}?${query}` : baseUrl
+
+    this.socket = new WebSocket(wsUrl)
     this.socket.binaryType = 'arraybuffer'
 
     this.socket.addEventListener('open', () => {
@@ -441,9 +545,9 @@ export class ComfyApi extends EventTarget {
     })
 
     this.socket.addEventListener('close', () => {
-      setTimeout(() => {
+      setTimeout(async () => {
         this.socket = null
-        this.#createSocket(true)
+        await this.createSocket(true)
       }, 300)
       if (opened) {
         this.dispatchCustomEvent('status', null)
@@ -579,7 +683,7 @@ export class ComfyApi extends EventTarget {
    * Initialises sockets and realtime updates
    */
   init() {
-    this.#createSocket()
+    this.createSocket()
   }
 
   /**
@@ -798,14 +902,7 @@ export class ComfyApi extends EventTarget {
     max_items: number = 200
   ): Promise<{ History: HistoryTaskItem[] }> {
     try {
-      const res = await this.fetchApi(`/history?max_items=${max_items}`)
-      const json: Promise<HistoryTaskItem[]> = await res.json()
-      return {
-        History: Object.values(json).map((item) => ({
-          ...item,
-          taskType: 'History'
-        }))
-      }
+      return await fetchHistory(this.fetchApi.bind(this), max_items)
     } catch (error) {
       console.error(error)
       return { History: [] }
@@ -1022,16 +1119,39 @@ export class ComfyApi extends EventTarget {
     return resp.json()
   }
 
+  async getGlobalSubgraphData(id: string): Promise<string> {
+    const resp = await api.fetchApi('/global_subgraphs/' + id)
+    if (resp.status !== 200) return ''
+    const subgraph: GlobalSubgraphData = await resp.json()
+    return subgraph?.data ?? ''
+  }
+  async getGlobalSubgraphs(): Promise<Record<string, GlobalSubgraphData>> {
+    const resp = await api.fetchApi('/global_subgraphs')
+    if (resp.status !== 200) return {}
+    const subgraphs: Record<string, GlobalSubgraphData> = await resp.json()
+    for (const [k, v] of Object.entries(subgraphs)) {
+      if (!v.data) v.data = this.getGlobalSubgraphData(k)
+    }
+    return subgraphs
+  }
+
   async getLogs(): Promise<string> {
-    return (await axios.get(this.internalURL('/logs'))).data
+    const url = isCloud ? this.apiURL('/logs') : this.internalURL('/logs')
+    return (await axios.get(url)).data
   }
 
   async getRawLogs(): Promise<LogsRawResponse> {
-    return (await axios.get(this.internalURL('/logs/raw'))).data
+    const url = isCloud
+      ? this.apiURL('/logs/raw')
+      : this.internalURL('/logs/raw')
+    return (await axios.get(url)).data
   }
 
   async subscribeLogs(enabled: boolean): Promise<void> {
-    return await axios.patch(this.internalURL('/logs/subscribe'), {
+    const url = isCloud
+      ? this.apiURL('/logs/subscribe')
+      : this.internalURL('/logs/subscribe')
+    return await axios.patch(url, {
       enabled,
       clientId: this.clientId
     })
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 043c76862..a0479b5b2 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -1,4 +1,4 @@
-import { useResizeObserver } from '@vueuse/core'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
 import _ from 'es-toolkit/compat'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { reactive, unref } from 'vue'
@@ -16,7 +16,10 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { Vector2 } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
+import type { WorkflowOpenSource } from '@/platform/telemetry/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
@@ -39,13 +42,8 @@ import {
   isComboInputSpecV2
 } from '@/schemas/nodeDefSchema'
 import { type BaseDOMWidget, DOMWidgetImpl } from '@/scripts/domWidget'
-import { getFromWebmFile } from '@/scripts/metadata/ebml'
-import { getGltfBinaryMetadata } from '@/scripts/metadata/gltf'
-import { getFromIsobmffFile } from '@/scripts/metadata/isobmff'
-import { getMp3Metadata } from '@/scripts/metadata/mp3'
-import { getOggMetadata } from '@/scripts/metadata/ogg'
-import { getSvgMetadata } from '@/scripts/metadata/svg'
 import { useDialogService } from '@/services/dialogService'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphService } from '@/services/subgraphService'
@@ -85,18 +83,14 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
-import {
-  getAvifMetadata,
-  getFlacMetadata,
-  getLatentMetadata,
-  getPngMetadata,
-  getWebpMetadata,
-  importA1111
-} from './pnginfo'
+import { importA1111 } from './pnginfo'
 import { $el, ComfyUI } from './ui'
 import { ComfyAppMenu } from './ui/menu/index'
 import { clone } from './utils'
 import { type ComfyWidgetConstructor } from './widgets'
+import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
+import { extractFileFromDragEvent } from '@/utils/eventUtils'
+import { getWorkflowDataFromFile } from '@/scripts/metadata/parser'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
@@ -336,6 +330,7 @@ export class ComfyApp {
   }
 
   getRandParam() {
+    if (isCloud) return ''
     return '&rand=' + Math.random()
   }
 
@@ -377,8 +372,8 @@ export class ComfyApp {
       selectedIndex = node.imageIndex
     }
 
-    const paintedIndex = selectedIndex + 1
-    const combinedIndex = selectedIndex + 2
+    const paintedIndex = imgs ? imgs.length + 1 : 1
+    const combinedIndex = imgs ? imgs.length + 2 : 2
 
     // for vueNodes mode
     const images =
@@ -528,7 +523,7 @@ export class ComfyApp {
    */
   private addDropHandler() {
     // Get prompt from dropped PNG or json
-    document.addEventListener('drop', async (event) => {
+    useEventListener(document, 'drop', async (event: DragEvent) => {
       try {
         event.preventDefault()
         event.stopPropagation()
@@ -537,63 +532,49 @@ export class ComfyApp {
         this.dragOverNode = null
         // Node handles file drop, we dont use the built in onDropFile handler as its buggy
         // If you drag multiple files it will call it multiple times with the same file
-        if (n && n.onDragDrop && (await n.onDragDrop(event))) {
-          return
+        if (await n?.onDragDrop?.(event)) return
+
+        const fileMaybe = await extractFileFromDragEvent(event)
+        if (!fileMaybe) return
+
+        const workspace = useWorkspaceStore()
+        try {
+          workspace.spinner = true
+          await this.handleFile(fileMaybe, 'file_drop')
+        } finally {
+          workspace.spinner = false
         }
-        // Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
-        if (!event.dataTransfer) return
-        if (
-          event.dataTransfer.files.length &&
-          event.dataTransfer.files[0].type !== 'image/bmp'
-        ) {
-          await this.handleFile(event.dataTransfer.files[0])
-        } else {
-          // Try loading the first URI in the transfer list
-          const validTypes = ['text/uri-list', 'text/x-moz-url']
-          const match = [...event.dataTransfer.types].find((t) =>
-            validTypes.find((v) => t === v)
-          )
-          if (match) {
-            const uri = event.dataTransfer.getData(match)?.split('\n')?.[0]
-            if (uri) {
-              const blob = await (await fetch(uri)).blob()
-              await this.handleFile(new File([blob], uri, { type: blob.type }))
-            }
-          }
-        }
-      } catch (err: any) {
-        useToastStore().addAlert(
-          t('toastMessages.dropFileError', { error: err })
-        )
+      } catch (error: unknown) {
+        useToastStore().addAlert(t('toastMessages.dropFileError', { error }))
       }
     })
 
     // Always clear over node on drag leave
-    this.canvasEl.addEventListener('dragleave', async () => {
-      if (this.dragOverNode) {
-        this.dragOverNode = null
-        this.graph.setDirtyCanvas(false, true)
-      }
+    useEventListener(this.canvasElRef, 'dragleave', async () => {
+      if (!this.dragOverNode) return
+      this.dragOverNode = null
+      this.graph.setDirtyCanvas(false, true)
     })
 
     // Add handler for dropping onto a specific node
-    this.canvasEl.addEventListener(
+    useEventListener(
+      this.canvasElRef,
       'dragover',
-      (e) => {
-        this.canvas.adjustMouseEvent(e)
-        const node = this.graph.getNodeOnPos(e.canvasX, e.canvasY)
-        if (node) {
-          if (node.onDragOver && node.onDragOver(e)) {
-            this.dragOverNode = node
+      (event: DragEvent) => {
+        this.canvas.adjustMouseEvent(event)
+        const node = this.graph.getNodeOnPos(event.canvasX, event.canvasY)
 
-            // dragover event is fired very frequently, run this on an animation frame
-            requestAnimationFrame(() => {
-              this.graph.setDirtyCanvas(false, true)
-            })
-            return
-          }
+        if (!node?.onDragOver?.(event)) {
+          this.dragOverNode = null
+          return
         }
-        this.dragOverNode = null
+
+        this.dragOverNode = node
+
+        // dragover event is fired very frequently, run this on an animation frame
+        requestAnimationFrame(() => {
+          this.graph.setDirtyCanvas(false, true)
+        })
       },
       false
     )
@@ -695,9 +676,12 @@ export class ComfyApp {
           'Payment Required: Please add credits to your account to use this node.'
         )
       ) {
-        useDialogService().showTopUpCreditsDialog({
-          isInsufficientCredits: true
-        })
+        const { isActiveSubscription } = useSubscription()
+        if (isActiveSubscription.value) {
+          useDialogService().showTopUpCreditsDialog({
+            isInsufficientCredits: true
+          })
+        }
       } else {
         useDialogService().showExecutionErrorDialog(detail)
       }
@@ -773,7 +757,8 @@ export class ComfyApp {
     this.canvasElRef.value = canvasEl
 
     await useWorkspaceStore().workflow.syncWorkflows()
-    await useSubgraphStore().fetchSubgraphs()
+    //Doesn't need to block. Blueprints will load async
+    void useSubgraphStore().fetchSubgraphs()
     await useExtensionService().loadExtensions()
 
     this.addProcessKeyHandler()
@@ -1035,12 +1020,19 @@ export class ComfyApp {
     clean: boolean = true,
     restore_view: boolean = true,
     workflow: string | null | ComfyWorkflow = null,
-    {
-      showMissingNodesDialog = true,
-      showMissingModelsDialog = true,
-      checkForRerouteMigration = false
+    options: {
+      showMissingNodesDialog?: boolean
+      showMissingModelsDialog?: boolean
+      checkForRerouteMigration?: boolean
+      openSource?: WorkflowOpenSource
     } = {}
   ) {
+    const {
+      showMissingNodesDialog = true,
+      showMissingModelsDialog = true,
+      checkForRerouteMigration = false,
+      openSource
+    } = options
     useWorkflowService().beforeLoadNewGraph()
 
     if (clean !== false) {
@@ -1107,6 +1099,8 @@ export class ComfyApp {
         if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
         if (n.type == 'SDV_img2vid_Conditioning')
           n.type = 'SVD_img2vid_Conditioning' //typo fix
+        if (n.type == 'Load3DAnimation') n.type = 'Load3D' // Animation node merged into Load3D
+        if (n.type == 'Preview3DAnimation') n.type = 'Preview3D' // Animation node merged into Load3D
 
         // Find missing node types
         if (!(n.type in LiteGraph.registered_node_types)) {
@@ -1178,6 +1172,9 @@ export class ComfyApp {
     try {
       // @ts-expect-error Discrepancies between zod and litegraph - in progress
       this.graph.configure(graphData)
+
+      ensureCorrectLayoutScale()
+
       if (
         restore_view &&
         useSettingStore().get('Comfy.EnableWorkflowViewRestore')
@@ -1264,6 +1261,16 @@ export class ComfyApp {
       'afterConfigureGraph',
       missingNodeTypes
     )
+
+    const telemetryPayload = {
+      missing_node_count: missingNodeTypes.length,
+      missing_node_types: missingNodeTypes.map((node) =>
+        typeof node === 'string' ? node : node.type
+      ),
+      open_source: openSource ?? 'unknown'
+    }
+    useTelemetry()?.trackWorkflowOpened(telemetryPayload)
+    useTelemetry()?.trackWorkflowImported(telemetryPayload)
     await useWorkflowService().afterLoadNewGraph(
       workflow,
       this.graph.serialize() as unknown as ComfyWorkflowJSON
@@ -1381,183 +1388,51 @@ export class ComfyApp {
    * Loads workflow data from the specified file
    * @param {File} file
    */
-  async handleFile(file: File) {
-    const removeExt = (f: string) => {
-      if (!f) return f
-      const p = f.lastIndexOf('.')
-      if (p === -1) return f
-      return f.substring(0, p)
-    }
-    const fileName = removeExt(file.name)
-    if (file.type === 'image/png') {
-      const pngInfo = await getPngMetadata(file)
-      if (pngInfo?.workflow) {
-        await this.loadGraphData(
-          JSON.parse(pngInfo.workflow),
-          true,
-          true,
-          fileName
-        )
-      } else if (pngInfo?.prompt) {
-        this.loadApiJson(JSON.parse(pngInfo.prompt), fileName)
-      } else if (pngInfo?.parameters) {
-        // Note: Not putting this in `importA1111` as it is mostly not used
-        // by external callers, and `importA1111` has no access to `app`.
-        useWorkflowService().beforeLoadNewGraph()
-        importA1111(this.graph, pngInfo.parameters)
-        useWorkflowService().afterLoadNewGraph(
-          fileName,
-          this.graph.serialize() as unknown as ComfyWorkflowJSON
-        )
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (file.type === 'image/avif') {
-      const { workflow, prompt } = await getAvifMetadata(file)
-
-      if (workflow) {
-        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
-      } else if (prompt) {
-        this.loadApiJson(JSON.parse(prompt), fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (file.type === 'image/webp') {
-      const pngInfo = await getWebpMetadata(file)
-      // Support loading workflows from that webp custom node.
-      const workflow = pngInfo?.workflow || pngInfo?.Workflow
-      const prompt = pngInfo?.prompt || pngInfo?.Prompt
-
-      if (workflow) {
-        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
-      } else if (prompt) {
-        this.loadApiJson(JSON.parse(prompt), fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (file.type === 'audio/mpeg') {
-      const { workflow, prompt } = await getMp3Metadata(file)
-      if (workflow) {
-        this.loadGraphData(workflow, true, true, fileName)
-      } else if (prompt) {
-        this.loadApiJson(prompt, fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (file.type === 'audio/ogg') {
-      const { workflow, prompt } = await getOggMetadata(file)
-      if (workflow) {
-        this.loadGraphData(workflow, true, true, fileName)
-      } else if (prompt) {
-        this.loadApiJson(prompt, fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (file.type === 'audio/flac' || file.type === 'audio/x-flac') {
-      const pngInfo = await getFlacMetadata(file)
-      const workflow = pngInfo?.workflow || pngInfo?.Workflow
-      const prompt = pngInfo?.prompt || pngInfo?.Prompt
-
-      if (workflow) {
-        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
-      } else if (prompt) {
-        this.loadApiJson(JSON.parse(prompt), fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (file.type === 'video/webm') {
-      const webmInfo = await getFromWebmFile(file)
-      if (webmInfo.workflow) {
-        this.loadGraphData(webmInfo.workflow, true, true, fileName)
-      } else if (webmInfo.prompt) {
-        this.loadApiJson(webmInfo.prompt, fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (
-      file.type === 'video/mp4' ||
-      file.name?.endsWith('.mp4') ||
-      file.name?.endsWith('.mov') ||
-      file.name?.endsWith('.m4v') ||
-      file.type === 'video/quicktime' ||
-      file.type === 'video/x-m4v'
-    ) {
-      const mp4Info = await getFromIsobmffFile(file)
-      if (mp4Info.workflow) {
-        this.loadGraphData(mp4Info.workflow, true, true, fileName)
-      } else if (mp4Info.prompt) {
-        this.loadApiJson(mp4Info.prompt, fileName)
-      }
-    } else if (file.type === 'image/svg+xml' || file.name?.endsWith('.svg')) {
-      const svgInfo = await getSvgMetadata(file)
-      if (svgInfo.workflow) {
-        this.loadGraphData(svgInfo.workflow, true, true, fileName)
-      } else if (svgInfo.prompt) {
-        this.loadApiJson(svgInfo.prompt, fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (
-      file.type === 'model/gltf-binary' ||
-      file.name?.endsWith('.glb')
-    ) {
-      const gltfInfo = await getGltfBinaryMetadata(file)
-      if (gltfInfo.workflow) {
-        this.loadGraphData(gltfInfo.workflow, true, true, fileName)
-      } else if (gltfInfo.prompt) {
-        this.loadApiJson(gltfInfo.prompt, fileName)
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else if (
-      file.type === 'application/json' ||
-      file.name?.endsWith('.json')
-    ) {
-      const reader = new FileReader()
-      reader.onload = async () => {
-        const readerResult = reader.result as string
-        const jsonContent = JSON.parse(readerResult)
-        if (jsonContent?.templates) {
-          this.loadTemplateData(jsonContent)
-        } else if (this.isApiJson(jsonContent)) {
-          this.loadApiJson(jsonContent, fileName)
-        } else {
-          await this.loadGraphData(
-            JSON.parse(readerResult),
-            true,
-            true,
-            fileName
-          )
-        }
-      }
-      reader.readAsText(file)
-    } else if (
-      file.name?.endsWith('.latent') ||
-      file.name?.endsWith('.safetensors')
-    ) {
-      const info = await getLatentMetadata(file)
-      // TODO define schema to LatentMetadata
-      // @ts-expect-error
-      if (info.workflow) {
-        await this.loadGraphData(
-          // @ts-expect-error
-          JSON.parse(info.workflow),
-          true,
-          true,
-          fileName
-        )
-        // @ts-expect-error
-      } else if (info.prompt) {
-        // @ts-expect-error
-        this.loadApiJson(JSON.parse(info.prompt))
-      } else {
-        this.showErrorOnFileLoad(file)
-      }
-    } else {
+  async handleFile(file: File, openSource?: WorkflowOpenSource) {
+    const fileName = file.name.replace(/\.\w+$/, '') // Strip file extension
+    const workflowData = await getWorkflowDataFromFile(file)
+    if (!workflowData) {
       this.showErrorOnFileLoad(file)
+      return
     }
+
+    const { workflow, prompt, parameters, templates } = workflowData
+
+    if (templates) {
+      this.loadTemplateData({ templates })
+    }
+
+    if (parameters) {
+      // Note: Not putting this in `importA1111` as it is mostly not used
+      // by external callers, and `importA1111` has no access to `app`.
+      useWorkflowService().beforeLoadNewGraph()
+      importA1111(this.graph, parameters)
+      useWorkflowService().afterLoadNewGraph(
+        fileName,
+        this.graph.serialize() as unknown as ComfyWorkflowJSON
+      )
+      return
+    }
+
+    if (workflow) {
+      const workflowObj =
+        typeof workflow === 'string' ? JSON.parse(workflow) : workflow
+      await this.loadGraphData(workflowObj, true, true, fileName, {
+        openSource
+      })
+      return
+    }
+
+    if (prompt) {
+      const promptObj = typeof prompt === 'string' ? JSON.parse(prompt) : prompt
+      this.loadApiJson(promptObj, fileName)
+      return
+    }
+
+    this.showErrorOnFileLoad(file)
   }
 
+  // @deprecated
   isApiJson(data: unknown) {
     return _.isObject(data) && Object.values(data).every((v) => v.class_type)
   }
diff --git a/src/scripts/metadata/json.ts b/src/scripts/metadata/json.ts
new file mode 100644
index 000000000..873b42117
--- /dev/null
+++ b/src/scripts/metadata/json.ts
@@ -0,0 +1,29 @@
+import { isObject } from 'es-toolkit/compat'
+
+export function getDataFromJSON(
+  file: File
+): Promise<Record<string, object> | undefined> {
+  return new Promise<Record<string, object> | undefined>((resolve) => {
+    const reader = new FileReader()
+    reader.onload = async () => {
+      const readerResult = reader.result as string
+      const jsonContent = JSON.parse(readerResult)
+      if (jsonContent?.templates) {
+        resolve({ templates: jsonContent.templates })
+        return
+      }
+      if (isApiJson(jsonContent)) {
+        resolve({ prompt: jsonContent })
+        return
+      }
+      resolve({ workflow: jsonContent })
+      return
+    }
+    reader.readAsText(file)
+    return
+  })
+}
+
+function isApiJson(data: unknown) {
+  return isObject(data) && Object.values(data).every((v) => v.class_type)
+}
diff --git a/src/scripts/metadata/parser.ts b/src/scripts/metadata/parser.ts
new file mode 100644
index 000000000..f11b9bef7
--- /dev/null
+++ b/src/scripts/metadata/parser.ts
@@ -0,0 +1,75 @@
+import { getFromWebmFile } from '@/scripts/metadata/ebml'
+import { getGltfBinaryMetadata } from '@/scripts/metadata/gltf'
+import { getFromIsobmffFile } from '@/scripts/metadata/isobmff'
+import { getDataFromJSON } from '@/scripts/metadata/json'
+import { getMp3Metadata } from '@/scripts/metadata/mp3'
+import { getOggMetadata } from '@/scripts/metadata/ogg'
+import { getSvgMetadata } from '@/scripts/metadata/svg'
+import {
+  getAvifMetadata,
+  getWebpMetadata,
+  getFlacMetadata,
+  getLatentMetadata,
+  getPngMetadata
+} from '@/scripts/pnginfo'
+
+export async function getWorkflowDataFromFile(
+  file: File
+): Promise<Record<string, string | object> | undefined> {
+  if (file.type === 'image/png') {
+    return await getPngMetadata(file)
+  }
+  if (file.type === 'image/avif') {
+    return await getAvifMetadata(file)
+  }
+  if (file.type === 'image/webp') {
+    const pngInfo = await getWebpMetadata(file)
+    // Support loading workflows from that webp custom node.
+    const workflow = pngInfo?.workflow || pngInfo?.Workflow
+    const prompt = pngInfo?.prompt || pngInfo?.Prompt
+    return { workflow, prompt }
+  }
+  if (file.type === 'audio/mpeg') {
+    return await getMp3Metadata(file)
+  }
+  if (file.type === 'audio/ogg') {
+    return await getOggMetadata(file)
+  }
+  if (file.type === 'audio/flac' || file.type === 'audio/x-flac') {
+    const pngInfo = await getFlacMetadata(file)
+    const workflow = pngInfo?.workflow || pngInfo?.Workflow
+    const prompt = pngInfo?.prompt || pngInfo?.Prompt
+
+    return { workflow, prompt }
+  }
+  if (file.type === 'video/webm') {
+    return (await getFromWebmFile(file)) as unknown as Record<string, object>
+  }
+  if (
+    file.name?.endsWith('.mp4') ||
+    file.name?.endsWith('.mov') ||
+    file.name?.endsWith('.m4v') ||
+    file.type === 'video/mp4' ||
+    file.type === 'video/quicktime' ||
+    file.type === 'video/x-m4v'
+  ) {
+    return (await getFromIsobmffFile(file)) as unknown as Record<string, object>
+  }
+  if (file.type === 'image/svg+xml' || file.name?.endsWith('.svg')) {
+    return (await getSvgMetadata(file)) as unknown as Record<string, object>
+  }
+  if (file.type === 'model/gltf-binary' || file.name?.endsWith('.glb')) {
+    return (await getGltfBinaryMetadata(file)) as unknown as Record<
+      string,
+      object
+    >
+  }
+  if (file.name?.endsWith('.latent') || file.name?.endsWith('.safetensors')) {
+    return await getLatentMetadata(file)
+  }
+
+  if (file.type === 'application/json' || file.name?.endsWith('.json')) {
+    return getDataFromJSON(file)
+  }
+  return
+}
diff --git a/src/scripts/metadata/png.ts b/src/scripts/metadata/png.ts
index af3be9a64..2e911796a 100644
--- a/src/scripts/metadata/png.ts
+++ b/src/scripts/metadata/png.ts
@@ -1,5 +1,5 @@
 /** @knipIgnoreUnusedButUsedByCustomNodes */
-export function getFromPngBuffer(buffer: ArrayBuffer) {
+export function getFromPngBuffer(buffer: ArrayBuffer): Record<string, string> {
   // Get the PNG data as a Uint8Array
   const pngData = new Uint8Array(buffer)
   const dataView = new DataView(pngData.buffer)
@@ -7,7 +7,7 @@ export function getFromPngBuffer(buffer: ArrayBuffer) {
   // Check that the PNG signature is present
   if (dataView.getUint32(0) !== 0x89504e47) {
     console.error('Not a valid PNG file')
-    return
+    return {}
   }
 
   // Start searching for chunks after the PNG signature
diff --git a/src/scripts/pnginfo.ts b/src/scripts/pnginfo.ts
index 7d6eea535..97c6a9320 100644
--- a/src/scripts/pnginfo.ts
+++ b/src/scripts/pnginfo.ts
@@ -138,13 +138,13 @@ export function getWebpMetadata(file) {
   })
 }
 
-// @ts-expect-error fixme ts strict error
-export function getLatentMetadata(file) {
+export function getLatentMetadata(file: File): Promise<Record<string, string>> {
   return new Promise((r) => {
     const reader = new FileReader()
     reader.onload = (event) => {
-      // @ts-expect-error fixme ts strict error
-      const safetensorsData = new Uint8Array(event.target.result as ArrayBuffer)
+      const safetensorsData = new Uint8Array(
+        event.target?.result as ArrayBuffer
+      )
       const dataView = new DataView(safetensorsData.buffer)
       let header_size = dataView.getUint32(0, true)
       let offset = 8
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 860e45caf..6a428c974 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -2,6 +2,8 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { WORKFLOW_ACCEPT_STRING } from '@/platform/workflow/core/types/formats'
 import { type StatusWsMessageStatus, type TaskItem } from '@/schemas/apiSchema'
 import { useDialogService } from '@/services/dialogService'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -391,9 +393,11 @@ export class ComfyUI {
       style: { display: 'none' },
       parent: document.body,
       onchange: async () => {
-        // @ts-expect-error fixme ts strict error
-        await app.handleFile(fileInput.files[0])
-        fileInput.value = ''
+        const file = fileInput.files?.[0]
+        if (file) {
+          await app.handleFile(file, 'file_button')
+          fileInput.value = ''
+        }
       }
     })
 
@@ -470,7 +474,13 @@ export class ComfyUI {
         $el('button.comfy-queue-btn', {
           id: 'queue-button',
           textContent: 'Queue Prompt',
-          onclick: () => app.queuePrompt(0, this.batchCount)
+          onclick: () => {
+            if (isCloud) {
+              useTelemetry()?.trackRunButton({ trigger_source: 'legacy_ui' })
+              useTelemetry()?.trackWorkflowExecution()
+            }
+            app.queuePrompt(0, this.batchCount)
+          }
         }),
         $el('div', {}, [
           $el('label', { innerHTML: 'Extra options' }, [
@@ -572,7 +582,13 @@ export class ComfyUI {
           $el('button', {
             id: 'queue-front-button',
             textContent: 'Queue Front',
-            onclick: () => app.queuePrompt(-1, this.batchCount)
+            onclick: () => {
+              if (isCloud) {
+                useTelemetry()?.trackRunButton({ trigger_source: 'legacy_ui' })
+                useTelemetry()?.trackWorkflowExecution()
+              }
+              app.queuePrompt(-1, this.batchCount)
+            }
           }),
           $el('button', {
             $: (b) => (this.queue.button = b as HTMLButtonElement),
diff --git a/src/scripts/ui/imagePreview.ts b/src/scripts/ui/imagePreview.ts
index 0842d5cf8..da8516283 100644
--- a/src/scripts/ui/imagePreview.ts
+++ b/src/scripts/ui/imagePreview.ts
@@ -1,3 +1,5 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+
 import { app } from '../app'
 import { $el } from '../ui'
 
@@ -48,8 +50,8 @@ export function calculateImageGrid(
   return { cellWidth, cellHeight, cols, rows, shiftX }
 }
 
-// @ts-expect-error fixme ts strict error
-export function createImageHost(node) {
+/** @knipIgnoreUnusedButUsedByCustomNodes */
+export function createImageHost(node: LGraphNode) {
   const el = $el('div.comfy-img-preview')
   // @ts-expect-error fixme ts strict error
   let currentImgs
@@ -108,8 +110,8 @@ export function createImageHost(node) {
         }
         el.replaceChildren(...imgs)
         currentImgs = imgs
-        node.onResize(node.size)
-        node.graph.setDirtyCanvas(true, true)
+        node.onResize?.(node.size)
+        node.graph?.setDirtyCanvas(true, true)
       }
     },
     getHeight() {
diff --git a/src/scripts/ui/menu/menu.css b/src/scripts/ui/menu/menu.css
index 31404df5a..601331232 100644
--- a/src/scripts/ui/menu/menu.css
+++ b/src/scripts/ui/menu/menu.css
@@ -1,7 +1,3 @@
-.mdi.rotate270::before {
-  transform: rotate(270deg);
-}
-
 /* Generic */
 .comfyui-button {
   display: flex;
@@ -121,177 +117,4 @@
   border-radius: 0;
 }
 
-/* Menu */
-.comfyui-menu .mdi::before {
-  font-size: 18px;
-}
 
-.comfyui-menu .comfyui-button {
-  background: var(--comfy-input-bg);
-  color: var(--fg-color);
-  white-space: nowrap;
-}
-
-.comfyui-menu .comfyui-button:not(:disabled):hover {
-  background: var(--border-color);
-  color: var(--content-fg);
-}
-
-.comfyui-menu .comfyui-split-button-popup > .comfyui-button {
-  border-radius: 0;
-  background-color: transparent;
-}
-
-.comfyui-menu .comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
-  background-color: var(--comfy-input-bg);
-}
-
-.comfyui-menu .comfyui-split-button-popup.left {
-  border-top-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.comfyui-menu .comfyui-button.popup-open {
-  background-color: var(--content-bg);
-  color: var(--content-fg);
-}
-
-.comfyui-menu-push {
-  margin-left: -0.8em;
-  flex: auto;
-}
-
-/** Send to workflow widget selection dialog */
-.comfy-widget-selection-dialog {
-  border: none;
-}
-
-.comfy-widget-selection-dialog div {
-  color: var(--fg-color);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.comfy-widget-selection-dialog h2 {
-  margin-top: 0;
-}
-
-.comfy-widget-selection-dialog section {
-  width: fit-content;
-  display: flex;
-  flex-direction: column;
-}
-
-.comfy-widget-selection-item {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.comfy-widget-selection-item span {
-  margin-right: auto;
-}
-
-.comfy-widget-selection-item span::before {
-  content: '#' attr(data-id);
-  opacity: 0.5;
-  margin-right: 5px;
-}
-
-.comfy-modal .comfy-widget-selection-item button {
-  font-size: 1em;
-}
-
-/***** Responsive *****/
-.lg.comfyui-menu .lt-lg-show {
-  display: none !important;
-}
-.comfyui-menu:not(.lg) .nlg-hide {
-  display: none !important;
-}
-/** Large screen */
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-button span,
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse.comfyui-button span {
-  display: none;
-}
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-popup .comfyui-button span {
-  display: unset;
-}
-
-/** Non large screen */
-.lt-lg.comfyui-menu {
-  flex-wrap: wrap;
-}
-
-.lt-lg.comfyui-menu > *:not(.comfyui-menu-mobile-collapse) {
-  order: 1;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
-  order: 9999;
-  width: 100%;
-}
-
-.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
-  order: -1;
-}
-
-.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-button {
-  top: unset;
-  bottom: 4px;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button-group {
-  flex-wrap: wrap;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button {
-  padding: 10px;
-}
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button-wrapper {
-  width: 100%;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-popup {
-  position: static;
-  background-color: var(--comfy-input-bg);
-  max-width: unset;
-  max-height: 50vh;
-  overflow: auto;
-}
-
-.lt-lg.comfyui-menu:not(.expanded) > .comfyui-menu-mobile-collapse {
-  display: none;
-}
-
-.lt-lg .comfyui-menu-button {
-  position: absolute;
-  top: 4px;
-  right: 8px;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-view-list-popup {
-  border-radius: 0;
-}
-
-.lt-lg.comfyui-menu .comfyui-workflows-popup {
-  width: 100vw;
-}
-
-/** Small */
-.lt-md .comfyui-workflows-button-inner {
-  width: unset !important;
-}
-.lt-md  .comfyui-workflows-label {
-  display: none;
-}
-
-/** Extra small */
-.lt-sm .comfyui-interrupt-button {
-  margin-right: 45px;
-}
-.comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
-  bottom: 41px;
-}
diff --git a/src/scripts/utils.ts b/src/scripts/utils.ts
index 59556523b..a1bcc3d89 100644
--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@@ -51,20 +51,8 @@ export async function addStylesheet(
   })
 }
 
-export function downloadBlob(filename: string, blob: Blob) {
-  const url = URL.createObjectURL(blob)
-  const a = $el('a', {
-    href: url,
-    download: filename,
-    style: { display: 'none' },
-    parent: document.body
-  })
-  a.click()
-  setTimeout(function () {
-    a.remove()
-    window.URL.revokeObjectURL(url)
-  }, 0)
-}
+/** @knipIgnoreUnusedButUsedByCustomNodes */
+export { downloadBlob } from '@/base/common/downloadUtil'
 
 export function uploadFile(accept: string) {
   return new Promise<File>((resolve, reject) => {
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index 97fd3f829..dd75081af 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -6,7 +6,6 @@ import type {
   IStringWidget
 } from '@/lib/litegraph/src/types/widgets'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useAudioRecordWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useAudioRecordWidget'
 import { useBooleanWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget'
 import { useChartWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChartWidget'
 import { useColorWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useColorWidget'
@@ -305,6 +304,5 @@ export const ComfyWidgets: Record<string, ComfyWidgetConstructor> = {
   CHART: transformWidgetConstructorV2ToV1(useChartWidget()),
   GALLERIA: transformWidgetConstructorV2ToV1(useGalleriaWidget()),
   SELECTBUTTON: transformWidgetConstructorV2ToV1(useSelectButtonWidget()),
-  TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget()),
-  AUDIO_RECORD: transformWidgetConstructorV2ToV1(useAudioRecordWidget())
+  TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget())
 }
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index bfbfeb420..18dfed271 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -1,13 +1,15 @@
 import { toRaw } from 'vue'
+import { z } from 'zod'
 import { fromZodError } from 'zod-validation-error'
 
+import { downloadBlob } from '@/base/common/downloadUtil'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { paletteSchema } from '@/schemas/colorPaletteSchema'
+import { paletteSchema, comfyBaseSchema } from '@/schemas/colorPaletteSchema'
 import type { Colors, Palette } from '@/schemas/colorPaletteSchema'
 import { app } from '@/scripts/app'
-import { downloadBlob, uploadFile } from '@/scripts/utils'
+import { uploadFile } from '@/scripts/utils'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
@@ -157,6 +159,26 @@ export const useColorPaletteService = () => {
     }
   }
 
+  /**
+   * Gets optional keys from a Zod schema object.
+   *
+   * @param schema - The Zod schema object to analyze.
+   * @returns Array of optional key names.
+   */
+  const getOptionalKeys = (schema: z.ZodObject<any, any>) => {
+    const optionalKeys: string[] = []
+    const shape = schema.shape
+
+    for (const [key, value] of Object.entries(shape)) {
+      if (value instanceof z.ZodOptional || value instanceof z.ZodDefault) {
+        optionalKeys.push(key)
+      }
+    }
+
+    return optionalKeys
+  }
+  const optionalComfyBaseKeys = getOptionalKeys(comfyBaseSchema)
+
   /**
    * Loads the Comfy color palette.
    *
@@ -168,6 +190,16 @@ export const useColorPaletteService = () => {
     for (const [key, value] of Object.entries(comfyColorPalette)) {
       rootStyle.setProperty('--' + key, value)
     }
+
+    for (const optionalKey of optionalComfyBaseKeys) {
+      if (!(optionalKey in comfyColorPalette)) {
+        rootStyle.setProperty(
+          '--' + optionalKey,
+          `var(--palette-${optionalKey})`
+        )
+      }
+    }
+
     const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage')
     if (backgroundImage) {
       rootStyle.setProperty(
diff --git a/src/services/customerEventsService.ts b/src/services/customerEventsService.ts
index 0359f4c3a..04d0f1d66 100644
--- a/src/services/customerEventsService.ts
+++ b/src/services/customerEventsService.ts
@@ -179,7 +179,7 @@ export const useCustomerEventsService = () => {
       return null
     }
 
-    return executeRequest<CustomerEventsResponse>(
+    const result = await executeRequest<CustomerEventsResponse>(
       () =>
         customerApiClient.get('/customers/events', {
           params: { page, limit },
@@ -187,6 +187,8 @@ export const useCustomerEventsService = () => {
         }),
       { errorContext, routeSpecificErrors }
     )
+
+    return result
   }
 
   return {
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 07316b01d..db4202ae7 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -13,6 +13,9 @@ import UpdatePasswordContent from '@/components/dialog/content/UpdatePasswordCon
 import ComfyOrgHeader from '@/components/dialog/header/ComfyOrgHeader.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import { t } from '@/i18n'
+import { useTelemetry } from '@/platform/telemetry'
+import { isCloud } from '@/platform/distribution/types'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -68,6 +71,7 @@ export const useDialogService = () => {
       | 'server-config'
       | 'user'
       | 'credits'
+      | 'subscription'
   ) {
     const props = panel ? { props: { defaultPanel: panel } } : undefined
 
@@ -105,7 +109,14 @@ export const useDialogService = () => {
     dialogStore.showDialog({
       key: 'global-execution-error',
       component: ErrorDialogContent,
-      props
+      props,
+      dialogComponentProps: {
+        onClose: () => {
+          useTelemetry()?.trackUiButtonClicked({
+            button_id: 'error_dialog_closed'
+          })
+        }
+      }
     })
   }
 
@@ -187,7 +198,14 @@ export const useDialogService = () => {
     dialogStore.showDialog({
       key: 'global-error',
       component: ErrorDialogContent,
-      props
+      props,
+      dialogComponentProps: {
+        onClose: () => {
+          useTelemetry()?.trackUiButtonClicked({
+            button_id: 'error_dialog_closed'
+          })
+        }
+      }
     })
   }
 
@@ -339,6 +357,9 @@ export const useDialogService = () => {
   function showTopUpCreditsDialog(options?: {
     isInsufficientCredits?: boolean
   }) {
+    const { isActiveSubscription } = useSubscription()
+    if (!isActiveSubscription.value) return
+
     return dialogStore.showDialog({
       key: 'top-up-credits',
       component: TopUpCreditsDialogContent,
@@ -485,6 +506,18 @@ export const useDialogService = () => {
     })
   }
 
+  async function showSubscriptionRequiredDialog() {
+    if (!isCloud || !window.__CONFIG__?.subscription_required) {
+      return
+    }
+
+    const { useSubscriptionDialog } = await import(
+      '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+    )
+    const { show } = useSubscriptionDialog()
+    show()
+  }
+
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -495,6 +528,7 @@ export const useDialogService = () => {
     showManagerProgressDialog,
     showApiNodesSignInDialog,
     showSignInDialog,
+    showSubscriptionRequiredDialog,
     showTopUpCreditsDialog,
     showUpdatePasswordDialog,
     showExtensionDialog,
diff --git a/src/services/extensionService.ts b/src/services/extensionService.ts
index 26b67fba7..4f3f523d3 100644
--- a/src/services/extensionService.ts
+++ b/src/services/extensionService.ts
@@ -1,5 +1,6 @@
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
@@ -80,6 +81,20 @@ export const useExtensionService = () => {
         void extension.onAuthUserResolved?.(user, app)
       })
     }
+
+    if (extension.onAuthTokenRefreshed) {
+      const { onTokenRefreshed } = useCurrentUser()
+      onTokenRefreshed(() => {
+        void extension.onAuthTokenRefreshed?.()
+      })
+    }
+
+    if (extension.onAuthUserLogout) {
+      const { onUserLogout } = useCurrentUser()
+      onUserLogout(() => {
+        void extension.onAuthUserLogout?.()
+      })
+    }
   }
 
   /**
@@ -122,8 +137,25 @@ export const useExtensionService = () => {
       extensionStore.enabledExtensions.map(async (ext) => {
         if (method in ext) {
           try {
-            return await ext[method](...args, app)
+            // Set current extension name for legacy compatibility tracking
+            if (method === 'setup') {
+              legacyMenuCompat.setCurrentExtension(ext.name)
+            }
+
+            const result = await ext[method](...args, app)
+
+            // Clear current extension after setup
+            if (method === 'setup') {
+              legacyMenuCompat.setCurrentExtension(null)
+            }
+
+            return result
           } catch (error) {
+            // Clear current extension on error too
+            if (method === 'setup') {
+              legacyMenuCompat.setCurrentExtension(null)
+            }
+
             console.error(
               `Error calling extension '${ext.name}' method '${method}'`,
               { error },
diff --git a/src/services/keybindingService.ts b/src/services/keybindingService.ts
index ed5049246..d2f45e005 100644
--- a/src/services/keybindingService.ts
+++ b/src/services/keybindingService.ts
@@ -64,7 +64,20 @@ export const useKeybindingService = () => {
 
       // Prevent default browser behavior first, then execute the command
       event.preventDefault()
-      await commandStore.execute(keybinding.commandId)
+      const runCommandIds = new Set([
+        'Comfy.QueuePrompt',
+        'Comfy.QueuePromptFront',
+        'Comfy.QueueSelectedOutputNodes'
+      ])
+      if (runCommandIds.has(keybinding.commandId)) {
+        await commandStore.execute(keybinding.commandId, {
+          metadata: {
+            trigger_source: 'keybinding'
+          }
+        })
+      } else {
+        await commandStore.execute(keybinding.commandId)
+      }
       return
     }
 
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index b731e978b..3fe45fcea 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -1,5 +1,6 @@
 import _ from 'es-toolkit/compat'
 
+import { downloadFile } from '@/base/common/downloadUtil'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useNodeAnimatedImage } from '@/composables/node/useNodeAnimatedImage'
 import { useNodeCanvasImagePreview } from '@/composables/node/useNodeCanvasImagePreview'
@@ -8,7 +9,6 @@ import { addWidgetPromotionOptions } from '@/core/graph/subgraph/proxyWidgetUtil
 import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
 import { st, t } from '@/i18n'
 import {
-  LGraphBadge,
   LGraphCanvas,
   LGraphEventMode,
   LGraphNode,
@@ -135,19 +135,6 @@ export const useLitegraphService = () => {
         this.#setInitialSize()
         this.serialize_widgets = true
         void extensionService.invokeExtensionsAsync('nodeCreated', this)
-        this.badges.push(
-          new LGraphBadge({
-            text: '',
-            iconOptions: {
-              unicode: '\ue96e',
-              fontFamily: 'PrimeIcons',
-              color: '#ffffff',
-              fontSize: 12
-            },
-            fgColor: '#ffffff',
-            bgColor: '#3b82f6'
-          })
-        )
       }
 
       /**
@@ -671,7 +658,6 @@ export const useLitegraphService = () => {
       return [
         {
           content: 'Copy Image',
-          // @ts-expect-error: async callback is not accepted by litegraph
           callback: async () => {
             const url = new URL(img.src)
             url.searchParams.delete('preview')
@@ -770,18 +756,10 @@ export const useLitegraphService = () => {
             {
               content: 'Save Image',
               callback: () => {
-                const a = document.createElement('a')
                 const url = new URL(img.src)
                 url.searchParams.delete('preview')
-                a.href = url.toString()
-                a.setAttribute(
-                  'download',
-                  // @ts-expect-error fixme ts strict error
-                  new URLSearchParams(url.search).get('filename')
-                )
-                document.body.append(a)
-                a.click()
-                requestAnimationFrame(() => a.remove())
+                const filename = new URLSearchParams(url.search).get('filename')
+                downloadFile(url.toString(), filename ?? undefined)
               }
             }
           )
@@ -845,7 +823,7 @@ export const useLitegraphService = () => {
         )
       }
       if (this.graph && !this.graph.isRootGraph) {
-        const [x, y] = canvas.canvas_mouse
+        const [x, y] = canvas.graph_mouse
         const overWidget = this.getWidgetOnPos(x, y, true)
         if (overWidget) {
           addWidgetPromotionOptions(options, overWidget, this)
diff --git a/src/services/load3dService.ts b/src/services/load3dService.ts
index 770d3991e..e910f4b4d 100644
--- a/src/services/load3dService.ts
+++ b/src/services/load3dService.ts
@@ -1,20 +1,15 @@
 import { toRaw } from 'vue'
 
+import { nodeToLoad3dMap } from '@/composables/useLoad3d'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
-import Load3d from '@/extensions/core/load3d/Load3d'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import type Load3d from '@/extensions/core/load3d/Load3d'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-
-type Load3dReadyCallback = (load3d: Load3d | Load3dAnimation) => void
 
 const viewerInstances = new Map<NodeId, any>()
 
 export class Load3dService {
   private static instance: Load3dService
-  private nodeToLoad3dMap = new Map<LGraphNode, Load3d | Load3dAnimation>()
-  private pendingCallbacks = new Map<LGraphNode, Load3dReadyCallback[]>()
 
   private constructor() {}
 
@@ -25,84 +20,14 @@ export class Load3dService {
     return Load3dService.instance
   }
 
-  registerLoad3d(
-    node: LGraphNode,
-    container: HTMLElement,
-    inputSpec: CustomInputSpec
-  ) {
+  getLoad3d(node: LGraphNode): Load3d | null {
     const rawNode = toRaw(node)
 
-    if (this.nodeToLoad3dMap.has(rawNode)) {
-      this.removeLoad3d(rawNode)
-    }
-
-    const type = inputSpec.type
-
-    const isAnimation = type.includes('Animation')
-
-    const Load3dClass = isAnimation ? Load3dAnimation : Load3d
-
-    const instance = new Load3dClass(container, {
-      node: rawNode,
-      inputSpec: inputSpec
-    })
-
-    rawNode.onMouseEnter = function () {
-      instance.refreshViewport()
-
-      instance.updateStatusMouseOnNode(true)
-    }
-
-    rawNode.onMouseLeave = function () {
-      instance.updateStatusMouseOnNode(false)
-    }
-
-    rawNode.onResize = function () {
-      instance.handleResize()
-    }
-
-    rawNode.onDrawBackground = function () {
-      instance.renderer.domElement.hidden = this.flags.collapsed ?? false
-    }
-
-    this.nodeToLoad3dMap.set(rawNode, instance)
-
-    const callbacks = this.pendingCallbacks.get(rawNode)
-
-    if (callbacks) {
-      callbacks.forEach((callback) => callback(instance))
-      this.pendingCallbacks.delete(rawNode)
-    }
-
-    return instance
+    return nodeToLoad3dMap.get(rawNode) || null
   }
 
-  getLoad3d(node: LGraphNode): Load3d | Load3dAnimation | null {
-    const rawNode = toRaw(node)
-
-    return this.nodeToLoad3dMap.get(rawNode) || null
-  }
-
-  waitForLoad3d(node: LGraphNode, callback: Load3dReadyCallback): void {
-    const rawNode = toRaw(node)
-
-    const existingInstance = this.nodeToLoad3dMap.get(rawNode)
-
-    if (existingInstance) {
-      callback(existingInstance)
-
-      return
-    }
-
-    if (!this.pendingCallbacks.has(rawNode)) {
-      this.pendingCallbacks.set(rawNode, [])
-    }
-
-    this.pendingCallbacks.get(rawNode)!.push(callback)
-  }
-
-  getNodeByLoad3d(load3d: Load3d | Load3dAnimation): LGraphNode | null {
-    for (const [node, instance] of this.nodeToLoad3dMap) {
+  getNodeByLoad3d(load3d: Load3d): LGraphNode | null {
+    for (const [node, instance] of nodeToLoad3dMap) {
       if (instance === load3d) {
         return node
       }
@@ -113,22 +38,19 @@ export class Load3dService {
   removeLoad3d(node: LGraphNode) {
     const rawNode = toRaw(node)
 
-    const instance = this.nodeToLoad3dMap.get(rawNode)
+    const instance = nodeToLoad3dMap.get(rawNode)
 
     if (instance) {
       instance.remove()
 
-      this.nodeToLoad3dMap.delete(rawNode)
+      nodeToLoad3dMap.delete(rawNode)
     }
-
-    this.pendingCallbacks.delete(rawNode)
   }
 
   clear() {
-    for (const [node] of this.nodeToLoad3dMap) {
+    for (const [node] of nodeToLoad3dMap) {
       this.removeLoad3d(node)
     }
-    this.pendingCallbacks.clear()
   }
 
   getOrCreateViewer(node: LGraphNode) {
@@ -149,7 +71,7 @@ export class Load3dService {
     viewerInstances.delete(node.id)
   }
 
-  async copyLoad3dState(source: Load3d, target: Load3d | Load3dAnimation) {
+  async copyLoad3dState(source: Load3d, target: Load3d) {
     const sourceModel = source.modelManager.currentModel
 
     if (sourceModel) {
@@ -188,12 +110,13 @@ export class Load3dService {
       .getCurrentBackgroundInfo()
     if (sourceBackgroundInfo.type === 'image') {
       const sourceNode = this.getNodeByLoad3d(source)
-      const backgroundPath = sourceNode?.properties?.[
-        'Background Image'
-      ] as string
+      const sceneConfig = sourceNode?.properties?.['Scene Config'] as any
+      const backgroundPath = sceneConfig?.backgroundImage
       if (backgroundPath) {
         await target.setBackgroundImage(backgroundPath)
       }
+    } else {
+      await target.setBackgroundImage('')
     }
 
     target.setLightIntensity(
@@ -203,11 +126,6 @@ export class Load3dService {
     if (sourceCameraType === 'perspective') {
       target.setFOV(source.getCameraManager().perspectiveCamera.fov)
     }
-
-    const sourceNode = this.getNodeByLoad3d(source)
-    if (sourceNode?.properties?.['Edge Threshold']) {
-      target.setEdgeThreshold(sourceNode.properties['Edge Threshold'] as number)
-    }
   }
 
   handleViewportRefresh(load3d: Load3d | null) {
@@ -230,6 +148,11 @@ export class Load3dService {
 
     if (viewer.needApplyChanges.value) {
       await viewer.applyChanges()
+
+      // Sync configuration back to the node's UI
+      if ((node as any).syncLoad3dConfig) {
+        ;(node as any).syncLoad3dConfig()
+      }
     }
 
     useLoad3dService().removeViewer(node)
diff --git a/src/stores/assetsStore.ts b/src/stores/assetsStore.ts
new file mode 100644
index 000000000..9433b8260
--- /dev/null
+++ b/src/stores/assetsStore.ts
@@ -0,0 +1,133 @@
+import { useAsyncState } from '@vueuse/core'
+import { defineStore } from 'pinia'
+
+import {
+  mapInputFileToAssetItem,
+  mapTaskOutputToAssetItem
+} from '@/platform/assets/composables/media/assetMappers'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+import { isCloud } from '@/platform/distribution/types'
+import { api } from '@/scripts/api'
+
+import { TaskItemImpl } from './queueStore'
+
+/**
+ * Fetch input files from the internal API (OSS version)
+ */
+async function fetchInputFilesFromAPI(): Promise<AssetItem[]> {
+  const response = await fetch(api.internalURL('/files/input'), {
+    headers: {
+      'Comfy-User': api.user
+    }
+  })
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch input files')
+  }
+
+  const filenames: string[] = await response.json()
+  return filenames.map((name, index) =>
+    mapInputFileToAssetItem(name, index, 'input')
+  )
+}
+
+/**
+ * Fetch input files from cloud service
+ */
+async function fetchInputFilesFromCloud(): Promise<AssetItem[]> {
+  return await assetService.getAssetsByTag('input', false)
+}
+
+/**
+ * Convert history task items to asset items
+ */
+function mapHistoryToAssets(historyItems: any[]): AssetItem[] {
+  const assetItems: AssetItem[] = []
+
+  for (const item of historyItems) {
+    if (!item.outputs || !item.status || item.status?.status_str === 'error') {
+      continue
+    }
+
+    const task = new TaskItemImpl(
+      'History',
+      item.prompt,
+      item.status,
+      item.outputs
+    )
+
+    if (!task.previewOutput) {
+      continue
+    }
+
+    const assetItem = mapTaskOutputToAssetItem(task, task.previewOutput)
+
+    const supportedOutputs = task.flatOutputs.filter((o) => o.supportsPreview)
+    assetItem.user_metadata = {
+      ...assetItem.user_metadata,
+      outputCount: supportedOutputs.length,
+      allOutputs: supportedOutputs
+    }
+
+    assetItems.push(assetItem)
+  }
+
+  return assetItems.sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  )
+}
+
+export const useAssetsStore = defineStore('assets', () => {
+  const maxHistoryItems = 200
+
+  const fetchInputFiles = isCloud
+    ? fetchInputFilesFromCloud
+    : fetchInputFilesFromAPI
+
+  const {
+    state: inputAssets,
+    isLoading: inputLoading,
+    error: inputError,
+    execute: updateInputs
+  } = useAsyncState(fetchInputFiles, [], {
+    immediate: false,
+    resetOnExecute: false,
+    onError: (err) => {
+      console.error('Error fetching input assets:', err)
+    }
+  })
+
+  const fetchHistoryAssets = async (): Promise<AssetItem[]> => {
+    const history = await api.getHistory(maxHistoryItems)
+    return mapHistoryToAssets(history.History)
+  }
+
+  const {
+    state: historyAssets,
+    isLoading: historyLoading,
+    error: historyError,
+    execute: updateHistory
+  } = useAsyncState(fetchHistoryAssets, [], {
+    immediate: false,
+    resetOnExecute: false,
+    onError: (err) => {
+      console.error('Error fetching history assets:', err)
+    }
+  })
+
+  return {
+    // States
+    inputAssets,
+    historyAssets,
+    inputLoading,
+    historyLoading,
+    inputError,
+    historyError,
+
+    // Actions
+    updateInputs,
+    updateHistory
+  }
+})
diff --git a/src/stores/commandStore.ts b/src/stores/commandStore.ts
index d3da5d85f..ade180d37 100644
--- a/src/stores/commandStore.ts
+++ b/src/stores/commandStore.ts
@@ -9,7 +9,7 @@ import type { KeybindingImpl } from './keybindingStore'
 
 export interface ComfyCommand {
   id: string
-  function: () => void | Promise<void>
+  function: (metadata?: Record<string, unknown>) => void | Promise<void>
 
   label?: string | (() => string)
   icon?: string | (() => string)
@@ -24,7 +24,7 @@ export interface ComfyCommand {
 
 export class ComfyCommandImpl implements ComfyCommand {
   id: string
-  function: () => void | Promise<void>
+  function: (metadata?: Record<string, unknown>) => void | Promise<void>
   _label?: string | (() => string)
   _icon?: string | (() => string)
   _tooltip?: string | (() => string)
@@ -96,11 +96,17 @@ export const useCommandStore = defineStore('command', () => {
   const { wrapWithErrorHandlingAsync } = useErrorHandling()
   const execute = async (
     commandId: string,
-    errorHandler?: (error: any) => void
+    options?: {
+      errorHandler?: (error: unknown) => void
+      metadata?: Record<string, unknown>
+    }
   ) => {
     const command = getCommand(commandId)
     if (command) {
-      await wrapWithErrorHandlingAsync(command.function, errorHandler)()
+      await wrapWithErrorHandlingAsync(
+        () => command.function(options?.metadata),
+        options?.errorHandler
+      )()
     } else {
       throw new Error(`Command ${commandId} not found`)
     }
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index 51e182640..aba407abd 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -5,6 +5,8 @@ import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
 import { useNodeProgressText } from '@/composables/node/useNodeProgressText'
 import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type {
@@ -59,7 +61,7 @@ function getSubgraphsFromInstanceIds(
   currentGraph: LGraph | Subgraph,
   subgraphNodeIds: string[],
   subgraphs: Subgraph[] = []
-): Subgraph[] {
+): Subgraph[] | undefined {
   // Last segment is the node portion; nothing to do.
   if (subgraphNodeIds.length === 1) return subgraphs
 
@@ -67,7 +69,10 @@ function getSubgraphsFromInstanceIds(
   if (currentPart === undefined) return subgraphs
 
   const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
-  if (!subgraph) throw new Error(`Subgraph not found: ${currentPart}`)
+  if (!subgraph) {
+    console.warn(`Subgraph not found: ${currentPart}`)
+    return undefined
+  }
 
   subgraphs.push(subgraph)
   return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
@@ -78,7 +83,9 @@ function getSubgraphsFromInstanceIds(
  * @param nodeId The node ID from execution context (could be execution ID)
  * @returns The NodeLocatorId
  */
-function executionIdToNodeLocatorId(nodeId: string | number): NodeLocatorId {
+function executionIdToNodeLocatorId(
+  nodeId: string | number
+): NodeLocatorId | undefined {
   const nodeIdStr = String(nodeId)
 
   if (!nodeIdStr.includes(':')) {
@@ -90,6 +97,7 @@ function executionIdToNodeLocatorId(nodeId: string | number): NodeLocatorId {
   const parts = nodeIdStr.split(':')
   const localNodeId = parts[parts.length - 1]
   const subgraphs = getSubgraphsFromInstanceIds(app.graph, parts)
+  if (!subgraphs) return undefined
   const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
   return nodeLocatorId
 }
@@ -288,6 +296,11 @@ export const useExecutionStore = defineStore('execution', () => {
   }
 
   function handleExecutionSuccess() {
+    if (isCloud && activePromptId.value) {
+      useTelemetry()?.trackExecutionSuccess({
+        jobId: activePromptId.value
+      })
+    }
     resetExecutionState()
   }
 
@@ -352,6 +365,14 @@ export const useExecutionStore = defineStore('execution', () => {
 
   function handleExecutionError(e: CustomEvent<ExecutionErrorWsMessage>) {
     lastExecutionError.value = e.detail
+    if (isCloud) {
+      useTelemetry()?.trackExecutionError({
+        jobId: e.detail.prompt_id,
+        nodeId: String(e.detail.node_id),
+        nodeType: e.detail.node_type,
+        error: e.detail.exception_message
+      })
+    }
     resetExecutionState()
   }
 
diff --git a/src/stores/firebaseAuthStore.ts b/src/stores/firebaseAuthStore.ts
index 602de5ec6..08e441925 100644
--- a/src/stores/firebaseAuthStore.ts
+++ b/src/stores/firebaseAuthStore.ts
@@ -6,7 +6,9 @@ import {
   browserLocalPersistence,
   createUserWithEmailAndPassword,
   deleteUser,
+  getAdditionalUserInfo,
   onAuthStateChanged,
+  onIdTokenChanged,
   sendPasswordResetEmail,
   setPersistence,
   signInWithEmailAndPassword,
@@ -21,6 +23,8 @@ import { useFirebaseAuth } from 'vuefire'
 
 import { COMFY_API_BASE_URL } from '@/config/comfyApi'
 import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import type { AuthHeader } from '@/types/authTypes'
@@ -39,7 +43,7 @@ type AccessBillingPortalResponse =
 type AccessBillingPortalReqBody =
   operations['AccessBillingPortal']['requestBody']
 
-class FirebaseAuthStoreError extends Error {
+export class FirebaseAuthStoreError extends Error {
   constructor(message: string) {
     super(message)
     this.name = 'FirebaseAuthStoreError'
@@ -58,6 +62,9 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
   const balance = ref<GetCustomerBalanceResponse | null>(null)
   const lastBalanceUpdateTime = ref<Date | null>(null)
 
+  // Token refresh trigger - increments when token is refreshed
+  const tokenRefreshTrigger = ref(0)
+
   // Providers
   const googleProvider = new GoogleAuthProvider()
   googleProvider.addScope('email')
@@ -92,6 +99,13 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     lastBalanceUpdateTime.value = null
   })
 
+  // Listen for token refresh events
+  onIdTokenChanged(auth, (user) => {
+    if (user && isCloud) {
+      tokenRefreshTrigger.value++
+    }
+  })
+
   const getIdToken = async (): Promise<string | undefined> => {
     if (!currentUser.value) return
     try {
@@ -242,36 +256,79 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
   const login = async (
     email: string,
     password: string
-  ): Promise<UserCredential> =>
-    executeAuthAction(
+  ): Promise<UserCredential> => {
+    const result = await executeAuthAction(
       (authInstance) =>
         signInWithEmailAndPassword(authInstance, email, password),
       { createCustomer: true }
     )
 
+    if (isCloud) {
+      useTelemetry()?.trackAuth({
+        method: 'email',
+        is_new_user: false
+      })
+    }
+
+    return result
+  }
+
   const register = async (
     email: string,
     password: string
   ): Promise<UserCredential> => {
-    return executeAuthAction(
+    const result = await executeAuthAction(
       (authInstance) =>
         createUserWithEmailAndPassword(authInstance, email, password),
       { createCustomer: true }
     )
+
+    if (isCloud) {
+      useTelemetry()?.trackAuth({
+        method: 'email',
+        is_new_user: true
+      })
+    }
+
+    return result
   }
 
-  const loginWithGoogle = async (): Promise<UserCredential> =>
-    executeAuthAction(
+  const loginWithGoogle = async (): Promise<UserCredential> => {
+    const result = await executeAuthAction(
       (authInstance) => signInWithPopup(authInstance, googleProvider),
       { createCustomer: true }
     )
 
-  const loginWithGithub = async (): Promise<UserCredential> =>
-    executeAuthAction(
+    if (isCloud) {
+      const additionalUserInfo = getAdditionalUserInfo(result)
+      const isNewUser = additionalUserInfo?.isNewUser ?? false
+      useTelemetry()?.trackAuth({
+        method: 'google',
+        is_new_user: isNewUser
+      })
+    }
+
+    return result
+  }
+
+  const loginWithGithub = async (): Promise<UserCredential> => {
+    const result = await executeAuthAction(
       (authInstance) => signInWithPopup(authInstance, githubProvider),
       { createCustomer: true }
     )
 
+    if (isCloud) {
+      const additionalUserInfo = getAdditionalUserInfo(result)
+      const isNewUser = additionalUserInfo?.isNewUser ?? false
+      useTelemetry()?.trackAuth({
+        method: 'github',
+        is_new_user: isNewUser
+      })
+    }
+
+    return result
+  }
+
   const logout = async (): Promise<void> =>
     executeAuthAction((authInstance) => signOut(authInstance))
 
@@ -375,6 +432,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
     balance,
     lastBalanceUpdateTime,
     isFetchingBalance,
+    tokenRefreshTrigger,
 
     // Getters
     isAuthenticated,
diff --git a/src/stores/modelToNodeStore.ts b/src/stores/modelToNodeStore.ts
index 436dac26d..cc9a911c8 100644
--- a/src/stores/modelToNodeStore.ts
+++ b/src/stores/modelToNodeStore.ts
@@ -25,12 +25,12 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
   const haveDefaultsLoaded = ref(false)
 
   /** Internal computed for reactive caching of registered node types */
-  const registeredNodeTypes = computed(() => {
-    return new Set(
+  const registeredNodeTypes = computed<Record<string, string>>(() => {
+    return Object.fromEntries(
       Object.values(modelToNodeMap.value)
         .flat()
         .filter((provider) => !!provider.nodeDef)
-        .map((provider) => provider.nodeDef.name)
+        .map((provider) => [provider.nodeDef.name, provider.key])
     )
   })
 
@@ -51,7 +51,7 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
   })
 
   /** Get set of all registered node types for efficient lookup */
-  function getRegisteredNodeTypes(): Set<string> {
+  function getRegisteredNodeTypes(): Record<string, string> {
     registerDefaults()
     return registeredNodeTypes.value
   }
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index 25e82a93c..232bba7fb 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -342,8 +342,7 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
     nodeDefsByDisplayName.value[nodeDef.display_name] = nodeDefImpl
   }
   function fromLGraphNode(node: LGraphNode): ComfyNodeDefImpl | null {
-    // Frontend-only nodes don't have nodeDef
-    const nodeTypeName = node.constructor?.nodeData?.name
+    const nodeTypeName = node.constructor?.nodeData?.name ?? node.type
     if (!nodeTypeName) return null
     const nodeDef = nodeDefsByName.value[nodeTypeName] ?? null
     return nodeDef
diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
index 5cb754ca6..28262a181 100644
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -1,12 +1,16 @@
 import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
-import { computed, ref, toRaw } from 'vue'
+import { computed, ref, shallowRef, toRaw, toValue } from 'vue'
 
+import { isCloud } from '@/platform/distribution/types'
+import { reconcileHistory } from '@/platform/remote/comfyui/history/reconciliation'
+import { getWorkflowFromHistory } from '@/platform/workflow/cloud'
 import type {
   ComfyWorkflowJSON,
   NodeId
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type {
+  HistoryTaskItem,
   ResultItem,
   StatusWsMessageStatus,
   TaskItem,
@@ -377,24 +381,37 @@ export class TaskItemImpl {
   }
 
   public async loadWorkflow(app: ComfyApp) {
-    if (!this.workflow) {
-      return
-    }
-    await app.loadGraphData(toRaw(this.workflow))
-    if (this.outputs) {
-      const nodeOutputsStore = useNodeOutputStore()
-      const rawOutputs = toRaw(this.outputs)
-      for (const nodeExecutionId in rawOutputs) {
-        nodeOutputsStore.setNodeOutputsByExecutionId(
-          nodeExecutionId,
-          rawOutputs[nodeExecutionId]
-        )
-      }
-      useExtensionService().invokeExtensions(
-        'onNodeOutputsUpdated',
-        app.nodeOutputs
+    let workflowData = this.workflow
+
+    if (isCloud && !workflowData && this.isHistory) {
+      workflowData = await getWorkflowFromHistory(
+        (url) => app.api.fetchApi(url),
+        this.promptId
       )
     }
+
+    if (!workflowData) {
+      return
+    }
+
+    await app.loadGraphData(toRaw(workflowData))
+
+    if (!this.outputs) {
+      return
+    }
+
+    const nodeOutputsStore = useNodeOutputStore()
+    const rawOutputs = toRaw(this.outputs)
+    for (const nodeExecutionId in rawOutputs) {
+      nodeOutputsStore.setNodeOutputsByExecutionId(
+        nodeExecutionId,
+        rawOutputs[nodeExecutionId]
+      )
+    }
+    useExtensionService().invokeExtensions(
+      'onNodeOutputsUpdated',
+      app.nodeOutputs
+    )
   }
 
   public flatten(): TaskItemImpl[] {
@@ -423,12 +440,38 @@ export class TaskItemImpl {
         )
     )
   }
+
+  public toTaskItem(): TaskItem {
+    const item: HistoryTaskItem = {
+      taskType: 'History',
+      prompt: this.prompt,
+      status: this.status!,
+      outputs: this.outputs
+    }
+    return item
+  }
 }
 
+const sortNewestFirst = (a: TaskItemImpl, b: TaskItemImpl) =>
+  b.queueIndex - a.queueIndex
+
+const toTaskItemImpls = (tasks: TaskItem[]): TaskItemImpl[] =>
+  tasks.map(
+    (task) =>
+      new TaskItemImpl(
+        task.taskType,
+        task.prompt,
+        'status' in task ? task.status : undefined,
+        'outputs' in task ? task.outputs : undefined
+      )
+  )
+
 export const useQueueStore = defineStore('queue', () => {
-  const runningTasks = ref<TaskItemImpl[]>([])
-  const pendingTasks = ref<TaskItemImpl[]>([])
-  const historyTasks = ref<TaskItemImpl[]>([])
+  // Use shallowRef because TaskItemImpl instances are immutable and arrays are
+  // replaced entirely (not mutated), so deep reactivity would waste performance
+  const runningTasks = shallowRef<TaskItemImpl[]>([])
+  const pendingTasks = shallowRef<TaskItemImpl[]>([])
+  const historyTasks = shallowRef<TaskItemImpl[]>([])
   const maxHistoryItems = ref(64)
   const isLoading = ref(false)
 
@@ -459,37 +502,27 @@ export const useQueueStore = defineStore('queue', () => {
         api.getHistory(maxHistoryItems.value)
       ])
 
-      const toClassAll = (tasks: TaskItem[]): TaskItemImpl[] =>
-        tasks
-          .map(
-            (task: TaskItem) =>
-              new TaskItemImpl(
-                task.taskType,
-                task.prompt,
-                // status and outputs only exist on history tasks
-                'status' in task ? task.status : undefined,
-                'outputs' in task ? task.outputs : undefined
-              )
-          )
-          .sort((a, b) => b.queueIndex - a.queueIndex)
+      runningTasks.value = toTaskItemImpls(queue.Running).sort(sortNewestFirst)
+      pendingTasks.value = toTaskItemImpls(queue.Pending).sort(sortNewestFirst)
 
-      runningTasks.value = toClassAll(queue.Running)
-      pendingTasks.value = toClassAll(queue.Pending)
+      const currentHistory = toValue(historyTasks)
 
-      const allIndex = new Set<number>(
-        history.History.map((item: TaskItem) => item.prompt[0])
+      const items = reconcileHistory(
+        history.History,
+        currentHistory.map((impl) => impl.toTaskItem()),
+        toValue(maxHistoryItems),
+        toValue(lastHistoryQueueIndex)
       )
-      const newHistoryItems = toClassAll(
-        history.History.filter(
-          (item) => item.prompt[0] > lastHistoryQueueIndex.value
-        )
+
+      // Reuse existing TaskItemImpl instances or create new
+      const existingByPromptId = new Map(
+        currentHistory.map((impl) => [impl.promptId, impl])
       )
-      const existingHistoryItems = historyTasks.value.filter((item) =>
-        allIndex.has(item.queueIndex)
+
+      historyTasks.value = items.map(
+        (item) =>
+          existingByPromptId.get(item.prompt[1]) ?? toTaskItemImpls([item])[0]
       )
-      historyTasks.value = [...newHistoryItems, ...existingHistoryItems]
-        .slice(0, maxHistoryItems.value)
-        .sort((a, b) => b.queueIndex - a.queueIndex)
     } finally {
       isLoading.value = false
     }
diff --git a/src/stores/subgraphStore.ts b/src/stores/subgraphStore.ts
index cf6962e33..3c0456f2e 100644
--- a/src/stores/subgraphStore.ts
+++ b/src/stores/subgraphStore.ts
@@ -23,6 +23,7 @@ import type {
   InputSpec
 } from '@/schemas/nodeDefSchema'
 import { api } from '@/scripts/api'
+import type { GlobalSubgraphData } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
 import { useExecutionStore } from '@/stores/executionStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -106,9 +107,9 @@ export const useSubgraphStore = defineStore('subgraph', () => {
       useSubgraphStore().updateDef(await this.load())
       return ret
     }
-    override async load({
-      force = false
-    }: { force?: boolean } = {}): Promise<LoadedComfyWorkflow> {
+    override async load({ force = false }: { force?: boolean } = {}): Promise<
+      this & LoadedComfyWorkflow
+    > {
       if (!force && this.isLoaded) return await super.load({ force })
       const loaded = await super.load({ force })
       const st = loaded.activeState
@@ -147,20 +148,46 @@ export const useSubgraphStore = defineStore('subgraph', () => {
       modified: number
       size: number
     }): Promise<void> {
-      const name = options.path.slice(0, -'.json'.length)
       options.path = SubgraphBlueprint.basePath + options.path
       const bp = await new SubgraphBlueprint(options, true).load()
       useWorkflowStore().attachWorkflow(bp)
-      const nodeDef = convertToNodeDef(bp)
-
-      subgraphDefCache.value.set(name, nodeDef)
-      subgraphCache[name] = bp
+      registerNodeDef(bp)
+    }
+    async function loadInstalledBlueprints() {
+      async function loadGlobalBlueprint([k, v]: [string, GlobalSubgraphData]) {
+        const path = SubgraphBlueprint.basePath + v.name + '.json'
+        const blueprint = new SubgraphBlueprint({
+          path,
+          modified: Date.now(),
+          size: -1
+        })
+        blueprint.originalContent = blueprint.content = await v.data
+        blueprint.filename = v.name
+        useWorkflowStore().attachWorkflow(blueprint)
+        const loaded = await blueprint.load()
+        registerNodeDef(
+          loaded,
+          {
+            python_module: v.info.node_pack,
+            display_name: v.name
+          },
+          k
+        )
+      }
+      const subgraphs = await api.getGlobalSubgraphs()
+      await Promise.allSettled(
+        Object.entries(subgraphs).map(loadGlobalBlueprint)
+      )
     }
 
-    const res = (
+    const userSubs = (
       await api.listUserDataFullInfo(SubgraphBlueprint.basePath)
     ).filter((f) => f.path.endsWith('.json'))
-    const settled = await Promise.allSettled(res.map(loadBlueprint))
+    const settled = await Promise.allSettled([
+      ...userSubs.map(loadBlueprint),
+      loadInstalledBlueprints()
+    ])
+
     const errors = settled.filter((i) => 'reason' in i).map((i) => i.reason)
     errors.forEach((e) => console.error('Failed to load subgraph blueprint', e))
     if (errors.length > 0) {
@@ -172,8 +199,11 @@ export const useSubgraphStore = defineStore('subgraph', () => {
       })
     }
   }
-  function convertToNodeDef(workflow: LoadedComfyWorkflow): ComfyNodeDefImpl {
-    const name = workflow.filename
+  function registerNodeDef(
+    workflow: LoadedComfyWorkflow,
+    overrides: Partial<ComfyNodeDefV1> = {},
+    name: string = workflow.filename
+  ) {
     const subgraphNode = workflow.changeTracker.initialState.nodes[0]
     if (!subgraphNode) throw new Error('Invalid Subgraph Blueprint')
     subgraphNode.inputs ??= []
@@ -197,10 +227,12 @@ export const useSubgraphStore = defineStore('subgraph', () => {
       description,
       category: 'Subgraph Blueprints',
       output_node: false,
-      python_module: 'blueprint'
+      python_module: 'blueprint',
+      ...overrides
     }
     const nodeDefImpl = new ComfyNodeDefImpl(nodedefv1)
-    return nodeDefImpl
+    subgraphDefCache.value.set(name, nodeDefImpl)
+    subgraphCache[name] = workflow
   }
   async function publishSubgraph() {
     const canvas = canvasStore.getCanvas()
@@ -252,8 +284,7 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     await workflow.save()
     //add to files list?
     useWorkflowStore().attachWorkflow(loadedWorkflow)
-    subgraphDefCache.value.set(name, convertToNodeDef(loadedWorkflow))
-    subgraphCache[name] = loadedWorkflow
+    registerNodeDef(loadedWorkflow)
     useToastStore().add({
       severity: 'success',
       summary: t('subgraphStore.publishSuccess'),
@@ -262,7 +293,7 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     })
   }
   function updateDef(blueprint: LoadedComfyWorkflow) {
-    subgraphDefCache.value.set(blueprint.filename, convertToNodeDef(blueprint))
+    registerNodeDef(blueprint)
   }
   async function editBlueprint(nodeType: string) {
     const name = nodeType.slice(typePrefix.length)
diff --git a/src/stores/workspace/sidebarTabStore.ts b/src/stores/workspace/sidebarTabStore.ts
index 4dfb2c9f5..bd0555b37 100644
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
+import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
 import { useModelLibrarySidebarTab } from '@/composables/sidebarTabs/useModelLibrarySidebarTab'
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
@@ -45,7 +46,8 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
         queue: 'menu.queue',
         'node-library': 'sideToolbar.nodeLibrary',
         'model-library': 'sideToolbar.modelLibrary',
-        workflows: 'sideToolbar.workflows'
+        workflows: 'sideToolbar.workflows',
+        assets: 'sideToolbar.assets'
       }
 
       const key = menubarLabelKeys[tab.id]
@@ -102,6 +104,11 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
    * Register the core sidebar tabs.
    */
   const registerCoreSidebarTabs = () => {
+    // Only show AssetsSidebarTab in development mode
+    if (import.meta.env.DEV) {
+      registerSidebarTab(useAssetsSidebarTab())
+    }
+
     registerSidebarTab(useQueueSidebarTab())
     registerSidebarTab(useNodeLibrarySidebarTab())
     registerSidebarTab(useModelLibrarySidebarTab())
diff --git a/src/types/buttonTypes.ts b/src/types/buttonTypes.ts
index 5c9fed88a..7b455db5c 100644
--- a/src/types/buttonTypes.ts
+++ b/src/types/buttonTypes.ts
@@ -28,7 +28,7 @@ export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
     secondary:
       'bg-white border-none text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
     transparent:
-      'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-400'
+      'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-200'
   } as const
 
   return baseByType[type]
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index f11488380..db0760bbd 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -39,6 +39,22 @@ export interface TopbarBadge {
    * Optional badge label (e.g., "BETA", "ALPHA", "NEW")
    */
   label?: string
+  /**
+   * Visual variant for the badge
+   * - info: Default informational badge (white label, gray background)
+   * - warning: Warning badge (orange theme, higher emphasis)
+   * - error: Error/alert badge (red theme, highest emphasis)
+   */
+  variant?: 'info' | 'warning' | 'error'
+  /**
+   * Optional icon class (e.g., "pi-exclamation-triangle")
+   * If not provided, variant will determine the default icon
+   */
+  icon?: string
+  /**
+   * Optional tooltip text to show on hover
+   */
+  tooltip?: string
 }
 
 export type MissingNodeType =
@@ -124,16 +140,16 @@ export interface ComfyExtension {
   /**
    * Allows the extension to add context menu items to canvas right-click menus
    * @param canvas The canvas instance
-   * @returns An array of context menu items to add
+   * @returns An array of context menu items to add (null values represent separators)
    */
-  getCanvasMenuItems?(canvas: LGraphCanvas): IContextMenuValue[]
+  getCanvasMenuItems?(canvas: LGraphCanvas): (IContextMenuValue | null)[]
 
   /**
    * Allows the extension to add context menu items to node right-click menus
    * @param node The node being right-clicked
-   * @returns An array of context menu items to add
+   * @returns An array of context menu items to add (null values represent separators)
    */
-  getNodeMenuItems?(node: LGraphNode): IContextMenuValue[]
+  getNodeMenuItems?(node: LGraphNode): (IContextMenuValue | null)[]
 
   /**
    * Allows the extension to add additional handling to the node before it is registered with **LGraph**
@@ -203,5 +219,17 @@ export interface ComfyExtension {
    */
   onAuthUserResolved?(user: AuthUserInfo, app: ComfyApp): Promise<void> | void
 
+  /**
+   * Fired whenever the auth token is refreshed.
+   * This is an experimental API and may be changed or removed in the future.
+   */
+  onAuthTokenRefreshed?(): Promise<void> | void
+
+  /**
+   * Fired when user logs out.
+   * This is an experimental API and may be changed or removed in the future.
+   */
+  onAuthUserLogout?(): Promise<void> | void
+
   [key: string]: any
 }
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index bc2b920ba..2c96faa05 100644
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -114,5 +114,11 @@ export interface ExtensionManager {
 
 export interface CommandManager {
   commands: ComfyCommand[]
-  execute(command: string, errorHandler?: (error: any) => void): void
+  execute(
+    command: string,
+    options?: {
+      errorHandler?: (error: unknown) => void
+      metadata?: Record<string, unknown>
+    }
+  ): void
 }
diff --git a/src/types/treeExplorerTypes.ts b/src/types/treeExplorerTypes.ts
index 7cc639be9..316a8fb17 100644
--- a/src/types/treeExplorerTypes.ts
+++ b/src/types/treeExplorerTypes.ts
@@ -54,7 +54,7 @@ export interface TreeExplorerNode<T = any> extends TreeNode {
     event: MouseEvent
   ) => void | Promise<void>
   /** Function to handle errors */
-  handleError?: (this: TreeExplorerNode<T>, error: Error) => void
+  handleError?: (this: TreeExplorerNode<T>, error: unknown) => void
   /** Extra context menu items */
   contextMenuItems?:
     | MenuItem[]
diff --git a/src/utils/__tests__/eventUtils.test.ts b/src/utils/__tests__/eventUtils.test.ts
new file mode 100644
index 000000000..2fc51ac67
--- /dev/null
+++ b/src/utils/__tests__/eventUtils.test.ts
@@ -0,0 +1,68 @@
+import { extractFileFromDragEvent } from '@/utils/eventUtils'
+import { describe, expect, it } from 'vitest'
+
+describe('eventUtils', () => {
+  describe('extractFileFromDragEvent', () => {
+    it('should handle drops with no data', async () => {
+      const actual = await extractFileFromDragEvent(new FakeDragEvent('drop'))
+      expect(actual).toBe(undefined)
+    })
+
+    it('should handle drops with dataTransfer but no files', async () => {
+      const actual = await extractFileFromDragEvent(
+        new FakeDragEvent('drop', { dataTransfer: new DataTransfer() })
+      )
+      expect(actual).toBe(undefined)
+    })
+
+    it('should handle drops with dataTransfer with files', async () => {
+      const fileWithWorkflowMaybeWhoKnows = new File(
+        [new Uint8Array()],
+        'fake_workflow.json',
+        {
+          type: 'application/json'
+        }
+      )
+
+      const dataTransfer = new DataTransfer()
+      dataTransfer.items.add(fileWithWorkflowMaybeWhoKnows)
+
+      const event = new FakeDragEvent('drop', { dataTransfer })
+
+      const actual = await extractFileFromDragEvent(event)
+      expect(actual).toBe(fileWithWorkflowMaybeWhoKnows)
+    })
+
+    // Skip until we can setup MSW
+    it.skip('should handle drops with URLs', async () => {
+      const urlWithWorkflow = 'https://fakewebsite.notreal/fake_workflow.json'
+
+      const dataTransfer = new DataTransfer()
+
+      dataTransfer.setData('text/uri-list', urlWithWorkflow)
+      dataTransfer.setData('text/x-moz-url', urlWithWorkflow)
+
+      const event = new FakeDragEvent('drop', { dataTransfer })
+
+      const actual = await extractFileFromDragEvent(event)
+      expect(actual).toBeInstanceOf(File)
+    })
+  })
+})
+
+// Needed to keep the dataTransfer defined
+class FakeDragEvent extends DragEvent {
+  override dataTransfer: DataTransfer | null
+  override clientX: number
+  override clientY: number
+
+  constructor(
+    type: string,
+    { dataTransfer, clientX, clientY }: DragEventInit = {}
+  ) {
+    super(type)
+    this.dataTransfer = dataTransfer ?? null
+    this.clientX = clientX ?? 0
+    this.clientY = clientY ?? 0
+  }
+}
diff --git a/src/utils/eventUtils.ts b/src/utils/eventUtils.ts
new file mode 100644
index 000000000..133ccd709
--- /dev/null
+++ b/src/utils/eventUtils.ts
@@ -0,0 +1,27 @@
+export async function extractFileFromDragEvent(
+  event: DragEvent
+): Promise<File | undefined> {
+  if (!event.dataTransfer) return
+
+  // Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
+  if (
+    event.dataTransfer.files.length &&
+    event.dataTransfer.files[0].type !== 'image/bmp'
+  ) {
+    return event.dataTransfer.files[0]
+  }
+
+  // Try loading the first URI in the transfer list
+  const validTypes = ['text/uri-list', 'text/x-moz-url']
+  const match = [...event.dataTransfer.types].find((t) =>
+    validTypes.includes(t)
+  )
+  if (!match) return
+
+  const uri = event.dataTransfer.getData(match)?.split('\n')?.[0]
+  if (!uri) return
+
+  const response = await fetch(uri)
+  const blob = await response.blob()
+  return new File([blob], uri, { type: blob.type })
+}
diff --git a/src/utils/graphTraversalUtil.ts b/src/utils/graphTraversalUtil.ts
index 4a573ed24..2339338f7 100644
--- a/src/utils/graphTraversalUtil.ts
+++ b/src/utils/graphTraversalUtil.ts
@@ -463,6 +463,27 @@ export function traverseNodesDepthFirst<T = void>(
   }
 }
 
+/**
+ * Reduces all nodes in a graph hierarchy to a single value using a reducer function.
+ * Single-pass traversal for efficient aggregation.
+ *
+ * @param graph - The root graph to traverse
+ * @param reducer - Function that reduces each node into the accumulator
+ * @param initialValue - The initial accumulator value
+ * @returns The final reduced value
+ */
+export function reduceAllNodes<T>(
+  graph: LGraph | Subgraph,
+  reducer: (accumulator: T, node: LGraphNode) => T,
+  initialValue: T
+): T {
+  let result = initialValue
+  forEachNode(graph, (node) => {
+    result = reducer(result, node)
+  })
+  return result
+}
+
 /**
  * Options for collectFromNodes function
  */
@@ -520,8 +541,16 @@ export function collectFromNodes<T = LGraphNode, C = void>(
  * @returns Array of execution IDs for selected nodes and all nodes within selected subgraphs
  */
 export function getExecutionIdsForSelectedNodes(
-  selectedNodes: LGraphNode[]
+  selectedNodes: LGraphNode[],
+  startGraph = selectedNodes[0]?.graph
 ): NodeExecutionId[] {
+  if (!startGraph) return []
+  const rootGraph = startGraph.rootGraph
+  const parentPath = startGraph.isRootGraph
+    ? ''
+    : findPartialExecutionPathToGraph(startGraph, rootGraph)
+  if (parentPath === undefined) return []
+
   return collectFromNodes<NodeExecutionId, string>(selectedNodes, {
     collector: (node, parentExecutionId) => {
       const nodeId = String(node.id)
@@ -531,7 +560,22 @@ export function getExecutionIdsForSelectedNodes(
       const nodeId = String(node.id)
       return parentExecutionId ? `${parentExecutionId}:${nodeId}` : nodeId
     },
-    initialContext: '',
+    initialContext: parentPath,
     expandSubgraphs: true
   })
 }
+
+function findPartialExecutionPathToGraph(
+  target: LGraph,
+  root: LGraph
+): string | undefined {
+  for (const node of root.nodes) {
+    if (!node.isSubgraphNode()) continue
+
+    if (node.subgraph === target) return `${node.id}`
+
+    const subpath = findPartialExecutionPathToGraph(target, node.subgraph)
+    if (subpath !== undefined) return node.id + ':' + subpath
+  }
+  return undefined
+}
diff --git a/src/utils/hostWhitelist.ts b/src/utils/hostWhitelist.ts
index 694626ca7..8f9470c50 100644
--- a/src/utils/hostWhitelist.ts
+++ b/src/utils/hostWhitelist.ts
@@ -84,8 +84,8 @@ function isIPv6Loopback(h: string): boolean {
 
   // Count explicit zero groups on each side of '::' to ensure at least one group is compressed.
   // (leftCount + rightCount) must be ≤ 6 so that the total expanded groups = 8.
-  const leftCount = m[1] ? m[1].match(/0{1,4}:/gi)?.length ?? 0 : 0
-  const rightCount = m[2] ? m[2].match(/0{1,4}:/gi)?.length ?? 0 : 0
+  const leftCount = m[1] ? (m[1].match(/0{1,4}:/gi)?.length ?? 0) : 0
+  const rightCount = m[2] ? (m[2].match(/0{1,4}:/gi)?.length ?? 0) : 0
 
   // Require that at least one group was actually compressed: i.e., leftCount + rightCount ≤ 6.
   return leftCount + rightCount <= 6
diff --git a/src/utils/markdownRendererUtil.ts b/src/utils/markdownRendererUtil.ts
index 3222be340..640047892 100644
--- a/src/utils/markdownRendererUtil.ts
+++ b/src/utils/markdownRendererUtil.ts
@@ -29,6 +29,12 @@ export function createMarkdownRenderer(baseUrl?: string): Renderer {
     const titleAttr = title ? ` title="${title}"` : ''
     return `<img src="${src}" alt="${text}"${titleAttr} />`
   }
+  renderer.link = ({ href, title, tokens, text }) => {
+    // For autolinks (bare URLs), tokens may be undefined, so fall back to text
+    const linkText = tokens ? renderer.parser.parseInline(tokens) : text
+    const titleAttr = title ? ` title="${title}"` : ''
+    return `<a href="${href}" ${titleAttr} target="_blank" rel="noopener noreferrer">${linkText}</a>`
+  }
   return renderer
 }
 
@@ -39,7 +45,8 @@ export function renderMarkdownToHtml(
   if (!markdown) return ''
 
   let html = marked.parse(markdown, {
-    renderer: createMarkdownRenderer(baseUrl)
+    renderer: createMarkdownRenderer(baseUrl),
+    gfm: true // Enable GitHub Flavored Markdown (including autolinks)
   }) as string
 
   if (baseUrl) {
@@ -48,6 +55,6 @@ export function renderMarkdownToHtml(
 
   return DOMPurify.sanitize(html, {
     ADD_TAGS: ALLOWED_TAGS,
-    ADD_ATTR: ALLOWED_ATTRS
+    ADD_ATTR: [...ALLOWED_ATTRS, 'target', 'rel']
   })
 }
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index bbfca6ea0..bc7639015 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -1,26 +1,27 @@
 <template>
   <div class="comfyui-body grid h-full w-full overflow-hidden">
-    <div id="comfyui-body-top" class="comfyui-body-top">
-      <TopMenubar v-if="showTopMenu" />
-    </div>
-    <div id="comfyui-body-bottom" class="comfyui-body-bottom">
-      <TopMenubar v-if="showBottomMenu" />
-    </div>
+    <div id="comfyui-body-top" class="comfyui-body-top" />
+    <div id="comfyui-body-bottom" class="comfyui-body-bottom" />
     <div id="comfyui-body-left" class="comfyui-body-left" />
     <div id="comfyui-body-right" class="comfyui-body-right" />
-    <div id="graph-canvas-container" class="graph-canvas-container">
+    <div
+      id="graph-canvas-container"
+      ref="graphCanvasContainerRef"
+      class="graph-canvas-container"
+    >
       <GraphCanvas @ready="onGraphReady" />
     </div>
   </div>
 
   <GlobalToast />
   <RerouteMigrationToast />
+  <VueNodesMigrationToast />
   <UnloadWindowConfirmDialog v-if="!isElectron()" />
   <MenuHamburger />
 </template>
 
 <script setup lang="ts">
-import { useBreakpoints, useEventListener } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import {
@@ -28,6 +29,7 @@ import {
   nextTick,
   onBeforeUnmount,
   onMounted,
+  ref,
   watch,
   watchEffect
 } from 'vue'
@@ -39,23 +41,28 @@ import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDi
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
 import GlobalToast from '@/components/toast/GlobalToast.vue'
 import RerouteMigrationToast from '@/components/toast/RerouteMigrationToast.vue'
-import TopMenubar from '@/components/topbar/TopMenubar.vue'
+import VueNodesMigrationToast from '@/components/toast/VueNodesMigrationToast.vue'
 import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
 import { useCoreCommands } from '@/composables/useCoreCommands'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
-import { i18n } from '@/i18n'
+import { i18n, loadLocale } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
 import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
+import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/useTemplateUrlLoader'
 import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
 import { useKeybindingService } from '@/services/keybindingService'
+import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useModelStore } from '@/stores/modelStore'
 import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
@@ -74,20 +81,25 @@ setupAutoQueueHandler()
 useProgressFavicon()
 useBrowserTabTitle()
 
+// Template URL loading
+const { loadTemplateFromUrl } = useTemplateUrlLoader()
+
 const { t } = useI18n()
 const toast = useToast()
 const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
 const colorPaletteStore = useColorPaletteStore()
 const queueStore = useQueueStore()
+const assetsStore = useAssetsStore()
 const versionCompatibilityStore = useVersionCompatibilityStore()
+const graphCanvasContainerRef = ref<HTMLDivElement | null>(null)
 
-const breakpoints = useBreakpoints({ md: 961 })
-const isMobile = breakpoints.smaller('md')
-const showTopMenu = computed(() => isMobile.value || useNewMenu.value === 'Top')
-const showBottomMenu = computed(
-  () => !isMobile.value && useNewMenu.value === 'Bottom'
-)
+const telemetry = useTelemetry()
+const firebaseAuthStore = useFirebaseAuthStore()
+let hasTrackedLogin = false
+let visibilityListener: (() => void) | null = null
+let tabCountInterval: number | null = null
+let tabCountChannel: BroadcastChannel | null = null
 
 watch(
   () => colorPaletteStore.completedActivePalette,
@@ -151,10 +163,17 @@ watchEffect(() => {
   )
 })
 
-watchEffect(() => {
+watchEffect(async () => {
   const locale = settingStore.get('Comfy.Locale')
   if (locale) {
-    i18n.global.locale.value = locale as 'en' | 'zh' | 'ru' | 'ja'
+    // Load the locale dynamically if not already loaded
+    try {
+      await loadLocale(locale)
+      // Type assertion is safe here as loadLocale validates the locale exists
+      i18n.global.locale.value = locale as typeof i18n.global.locale.value
+    } catch (error) {
+      console.error(`Failed to switch to locale "${locale}":`, error)
+    }
   }
 })
 
@@ -187,11 +206,17 @@ const init = () => {
 const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
 const onStatus = async (e: CustomEvent<StatusWsMessageStatus>) => {
   queuePendingTaskCountStore.update(e)
-  await queueStore.update()
+  await Promise.all([
+    queueStore.update(),
+    assetsStore.updateHistory() // Update history assets when status changes
+  ])
 }
 
 const onExecutionSuccess = async () => {
-  await queueStore.update()
+  await Promise.all([
+    queueStore.update(),
+    assetsStore.updateHistory() // Update history assets on execution success
+  ])
 }
 
 const reconnectingMessage: ToastMessageOptions = {
@@ -226,6 +251,8 @@ onMounted(() => {
 
   try {
     init()
+    // Relocate the legacy menu container to the graph canvas container so it is below other elements
+    graphCanvasContainerRef.value?.prepend(app.ui.menuContainer)
   } catch (e) {
     console.error('Failed to init ComfyUI frontend', e)
   }
@@ -237,6 +264,22 @@ onBeforeUnmount(() => {
   api.removeEventListener('reconnecting', onReconnecting)
   api.removeEventListener('reconnected', onReconnected)
   executionStore.unbindExecutionEvents()
+
+  // Clean up page visibility listener
+  if (visibilityListener) {
+    document.removeEventListener('visibilitychange', visibilityListener)
+    visibilityListener = null
+  }
+
+  // Clean up tab count tracking
+  if (tabCountInterval) {
+    window.clearInterval(tabCountInterval)
+    tabCountInterval = null
+  }
+  if (tabCountChannel) {
+    tabCountChannel.close()
+    tabCountChannel = null
+  }
 })
 
 useEventListener(window, 'keydown', useKeybindingService().keybindHandler)
@@ -255,6 +298,64 @@ void nextTick(() => {
 
 const onGraphReady = () => {
   runWhenGlobalIdle(() => {
+    // Track user login when app is ready in graph view (cloud only)
+    if (isCloud && firebaseAuthStore.isAuthenticated && !hasTrackedLogin) {
+      telemetry?.trackUserLoggedIn()
+      hasTrackedLogin = true
+    }
+
+    // Set up page visibility tracking (cloud only)
+    if (isCloud && telemetry && !visibilityListener) {
+      visibilityListener = () => {
+        telemetry.trackPageVisibilityChanged({
+          visibility_state: document.visibilityState as 'visible' | 'hidden'
+        })
+      }
+      document.addEventListener('visibilitychange', visibilityListener)
+    }
+
+    // Set up tab count tracking (cloud only)
+    if (isCloud && telemetry && !tabCountInterval) {
+      tabCountChannel = new BroadcastChannel('comfyui-tab-count')
+      const activeTabs = new Map<string, number>()
+      const currentTabId = crypto.randomUUID()
+
+      // Listen for heartbeats from other tabs
+      tabCountChannel.onmessage = (event) => {
+        if (
+          event.data.type === 'heartbeat' &&
+          event.data.tabId !== currentTabId
+        ) {
+          activeTabs.set(event.data.tabId, Date.now())
+        }
+      }
+
+      // 30-second heartbeat interval
+      tabCountInterval = window.setInterval(() => {
+        const now = Date.now()
+
+        // Clean up stale tabs (no heartbeat for 45 seconds)
+        activeTabs.forEach((lastHeartbeat, tabId) => {
+          if (now - lastHeartbeat > 45000) {
+            activeTabs.delete(tabId)
+          }
+        })
+
+        // Broadcast our heartbeat
+        tabCountChannel?.postMessage({ type: 'heartbeat', tabId: currentTabId })
+
+        // Track tab count (include current tab)
+        const tabCount = activeTabs.size + 1
+        telemetry.trackTabCount({ tab_count: tabCount })
+      }, 30000)
+
+      // Send initial heartbeat
+      tabCountChannel.postMessage({ type: 'heartbeat', tabId: currentTabId })
+    }
+
+    // Load template from URL if present
+    void loadTemplateFromUrl()
+
     // Setting values now available after comfyApp.setup.
     // Load keybindings.
     wrapWithErrorHandling(useKeybindingService().registerUserKeybindings)()
diff --git a/src/views/templates/BaseViewTemplate.vue b/src/views/templates/BaseViewTemplate.vue
index 8e20b3ee2..786cd77ac 100644
--- a/src/views/templates/BaseViewTemplate.vue
+++ b/src/views/templates/BaseViewTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-screen w-screen flex-col font-sans"
+    class="flex h-svh w-screen flex-col font-sans"
     :class="[
       dark
         ? 'dark-theme bg-neutral-900 text-neutral-300'
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index c6fdfff71..c38a27585 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -17,3 +17,5 @@ declare global {
     __COMFYUI_FRONTEND_VERSION__: string
   }
 }
+
+export {}
diff --git a/src/workbench/eventHelpers.ts b/src/workbench/eventHelpers.ts
new file mode 100644
index 000000000..1030f3415
--- /dev/null
+++ b/src/workbench/eventHelpers.ts
@@ -0,0 +1,30 @@
+/**
+ * Utility functions for handling workbench events
+ */
+
+/**
+ * Used by clipboard handlers to determine if copy/paste events should be
+ * intercepted for graph operations vs. allowing default browser behavior
+ * for text inputs and other UI elements.
+ *
+ * @param target - The event target to check
+ * @returns true if copy paste events will be handled by target
+ */
+export function shouldIgnoreCopyPaste(target: EventTarget | null): boolean {
+  return (
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLInputElement &&
+      ![
+        'button',
+        'checkbox',
+        'file',
+        'hidden',
+        'image',
+        'radio',
+        'range',
+        'reset',
+        'search',
+        'submit'
+      ].includes(target.type))
+  )
+}
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
index 91e021f69..3703bfbd8 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
@@ -51,9 +51,7 @@
               type="transparent"
               @click="dismissWarningBanner"
             >
-              <i
-                class="pi pi-times text-xs text-neutral-900 dark-theme:text-white"
-              ></i>
+              <i class="pi pi-times text-xs text-base-foreground"></i>
             </IconButton>
           </div>
           <RegistrySearchBar
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index 1425a21c4..037083f3f 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -4,9 +4,7 @@
     <div class="flex h-full w-full flex-col gap-2 px-4 py-6">
       <!-- Description -->
       <div v-if="showAfterWhatsNew">
-        <p
-          class="m-0 mb-4 text-sm leading-4 text-neutral-800 dark-theme:text-white"
-        >
+        <p class="m-0 mb-4 text-sm leading-4 text-base-foreground">
           {{ $t('manager.conflicts.description') }}
           <br /><br />
           {{ $t('manager.conflicts.info') }}
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
index 3ea7b15e3..643427d79 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
@@ -236,7 +236,7 @@ const handleSubmit = async () => {
   // Convert 'latest' to actual version number for installation
   const actualVersion =
     selectedVersion.value === 'latest'
-      ? nodePack.latest_version?.version ?? 'latest'
+      ? (nodePack.latest_version?.version ?? 'latest')
       : selectedVersion.value
 
   await managerStore.installPack.call({
diff --git a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
index 6df2e7142..50252ca11 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
@@ -31,7 +31,7 @@ const mockNodePack = {
 }
 
 const mockIsPackEnabled = vi.fn()
-const mockEnablePack = { call: vi.fn().mockResolvedValue(undefined) }
+const mockEnablePack = vi.fn().mockResolvedValue(undefined)
 const mockDisablePack = vi.fn().mockResolvedValue(undefined)
 vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
@@ -46,7 +46,7 @@ describe('PackEnableToggle', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsPackEnabled.mockReset()
-    mockEnablePack.call.mockReset().mockResolvedValue(undefined)
+    mockEnablePack.mockReset().mockResolvedValue(undefined)
     mockDisablePack.mockReset().mockResolvedValue(undefined)
   })
 
@@ -116,7 +116,7 @@ describe('PackEnableToggle', () => {
     const toggleSwitch = wrapper.findComponent(ToggleSwitch)
     await toggleSwitch.vm.$emit('update:modelValue', true)
 
-    expect(mockEnablePack.call).toHaveBeenCalledWith(
+    expect(mockEnablePack).toHaveBeenCalledWith(
       expect.objectContaining({
         id: mockNodePack.id,
         version: mockNodePack.latest_version.version
@@ -143,7 +143,7 @@ describe('PackEnableToggle', () => {
     const pendingPromise = new Promise<void>((resolve) => {
       setTimeout(() => resolve(), 1000)
     })
-    mockEnablePack.call.mockReturnValue(pendingPromise)
+    mockEnablePack.mockReturnValue(pendingPromise)
 
     mockIsPackEnabled.mockReturnValue(false)
     const wrapper = mountComponent()
diff --git a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
index 756e5a607..c032f5ba9 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
@@ -16,14 +16,14 @@
       :model-value="isEnabled"
       :disabled="isLoading"
       :readonly="!canToggleDirectly"
-      aria-label="Enable or disable pack"
+      :aria-label="$t('g.enableOrDisablePack')"
       @focus="handleToggleInteraction"
     />
     <ToggleSwitch
       v-else
       :model-value="isEnabled"
       :disabled="isLoading"
-      aria-label="Enable or disable pack"
+      :aria-label="$t('g.enableOrDisablePack')"
       @update:model-value="onToggle"
     />
   </div>
@@ -106,18 +106,11 @@ const handleEnable = () => {
   if (!nodePack.id) {
     throw new Error('Node ID is required for enabling')
   }
-  return enablePack.call({
+  return enablePack({
     id: nodePack.id,
     version:
       version.value ??
-      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
-    selected_version:
-      version.value ??
-      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
-    repository: nodePack.repository ?? '',
-    channel: 'default' as ManagerComponents['schemas']['ManagerChannel'],
-    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
-    skip_post_install: false
+      ('latest' as ManagerComponents['schemas']['SelectedVersion'])
   })
 }
 
diff --git a/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
index c7def90b9..226ae4f20 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
@@ -74,8 +74,8 @@ const createPayload = (installItem: NodePack) => {
   const isUnclaimedPack = installItem.publisher?.name === 'Unclaimed'
   const versionToInstall = isUnclaimedPack
     ? ('nightly' as ManagerComponents['schemas']['SelectedVersion'])
-    : installItem.latest_version?.version ??
-      ('latest' as ManagerComponents['schemas']['SelectedVersion'])
+    : (installItem.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']))
 
   return {
     id: installItem.id,
@@ -140,7 +140,7 @@ const performInstallation = async (packs: NodePack[]) => {
 const computedLabel = computed(() =>
   isInstalling.value
     ? t('g.installing')
-    : label ??
-      (nodePacks.length > 1 ? t('manager.installSelected') : t('g.install'))
+    : (label ??
+      (nodePacks.length > 1 ? t('manager.installSelected') : t('g.install')))
 )
 </script>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index 853728074..f673318da 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -6,7 +6,7 @@
       @click="showImportFailedDialog"
     >
       <i class="pi pi-code text-base"></i>
-      <span class="text-sm dark-theme:text-white">{{
+      <span class="text-sm text-base-foreground">{{
         t('serverStart.openLogs')
       }}</span>
     </button>
diff --git a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
index ffb158fa1..cce839e22 100644
--- a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
+++ b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
@@ -4,7 +4,7 @@
     <div v-if="showDefaultBanner" class="h-full w-full">
       <img
         :src="DEFAULT_BANNER"
-        alt="default banner"
+        :alt="$t('g.defaultBanner')"
         class="h-full w-full object-cover"
       />
     </div>
diff --git a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
index 0d753267a..d1375ff2f 100644
--- a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
@@ -4,7 +4,7 @@
     <div v-if="showDefaultBanner" class="h-full w-full">
       <img
         :src="DEFAULT_BANNER"
-        alt="default banner"
+        :alt="$t('g.defaultBanner')"
         class="h-full w-full object-cover"
       />
     </div>
diff --git a/src/workbench/extensions/manager/services/comfyManagerService.ts b/src/workbench/extensions/manager/services/comfyManagerService.ts
index 6e8f91ecd..9358f2918 100644
--- a/src/workbench/extensions/manager/services/comfyManagerService.ts
+++ b/src/workbench/extensions/manager/services/comfyManagerService.ts
@@ -228,6 +228,14 @@ export const useComfyManagerService = () => {
     return queueTask('disable', params, ui_id, signal)
   }
 
+  const enablePack = async (
+    params: components['schemas']['EnablePackParams'],
+    ui_id?: string,
+    signal?: AbortSignal
+  ): Promise<null> => {
+    return queueTask('enable', params, ui_id, signal)
+  }
+
   const updatePack = async (
     params: components['schemas']['UpdatePackParams'],
     ui_id?: string,
@@ -321,7 +329,7 @@ export const useComfyManagerService = () => {
     getImportFailInfoBulk,
     installPack,
     uninstallPack,
-    enablePack: installPack, // enable is done via install
+    enablePack,
     disablePack,
     updatePack,
     updateAllPacks,
diff --git a/src/workbench/extensions/manager/stores/comfyManagerStore.ts b/src/workbench/extensions/manager/stores/comfyManagerStore.ts
index f3391d1bb..06097cbe7 100644
--- a/src/workbench/extensions/manager/stores/comfyManagerStore.ts
+++ b/src/workbench/extensions/manager/stores/comfyManagerStore.ts
@@ -317,6 +317,15 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     await enqueueTaskWithLogs(task, t('g.disabling', { id: params.id }))
   }
 
+  const enablePack = async (params: ManagerPackInfo, signal?: AbortSignal) => {
+    const enableParams: components['schemas']['EnablePackParams'] = {
+      cnr_id: params.id
+    }
+    const task = (taskId: string) =>
+      managerService.enablePack(enableParams, taskId, signal)
+    await enqueueTaskWithLogs(task, t('g.enabling', { id: params.id }))
+  }
+
   const getInstalledPackVersion = (packId: string) => {
     const pack = installedPacks.value[packId]
     return pack?.ver
@@ -380,7 +389,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     updatePack,
     updateAllPacks,
     disablePack,
-    enablePack: installPack // Enable is done via install endpoint with a disabled pack
+    enablePack
   }
 })
 
diff --git a/tests-ui/fixtures/historyFixtures.ts b/tests-ui/fixtures/historyFixtures.ts
new file mode 100644
index 000000000..3a930a1ad
--- /dev/null
+++ b/tests-ui/fixtures/historyFixtures.ts
@@ -0,0 +1,380 @@
+/**
+ * @fileoverview Test fixtures for history tests.
+ */
+import type { HistoryResponseV2 } from '@/platform/remote/comfyui/history/types/historyV2Types'
+import type { HistoryTaskItem } from '@/schemas/apiSchema'
+
+/**
+ * V1 API raw response format (object with prompt IDs as keys)
+ */
+export const historyV1RawResponse: Record<
+  string,
+  Omit<HistoryTaskItem, 'taskType'>
+> = {
+  'complete-item-id': {
+    prompt: [
+      24,
+      'complete-item-id',
+      {},
+      {
+        client_id: 'test-client',
+        extra_pnginfo: {
+          workflow: {
+            id: '44f0c9f9-b5a7-48de-99fc-7e80c1570241',
+            revision: 0,
+            last_node_id: 9,
+            last_link_id: 9,
+            nodes: [],
+            links: [],
+            groups: [],
+            config: {},
+            extra: {},
+            version: 0.4
+          }
+        }
+      },
+      ['9']
+    ],
+    outputs: {
+      '9': {
+        images: [
+          {
+            filename: 'test.png',
+            subfolder: '',
+            type: 'output'
+          }
+        ]
+      }
+    },
+    status: {
+      status_str: 'success',
+      completed: true,
+      messages: [
+        [
+          'execution_start',
+          { prompt_id: 'complete-item-id', timestamp: 1234567890 }
+        ],
+        [
+          'execution_success',
+          { prompt_id: 'complete-item-id', timestamp: 1234567900 }
+        ]
+      ]
+    },
+    meta: {
+      '9': {
+        node_id: '9',
+        display_node: '9'
+      }
+    }
+  },
+  'no-status-id': {
+    prompt: [
+      23,
+      'no-status-id',
+      {},
+      {
+        client_id: 'inference'
+      },
+      ['10']
+    ],
+    outputs: {
+      '10': {
+        images: []
+      }
+    },
+    status: undefined,
+    meta: {
+      '10': {
+        node_id: '10',
+        display_node: '10'
+      }
+    }
+  }
+}
+
+/**
+ * V2 response with multiple edge cases:
+ * - Item 0: Complete with all fields
+ * - Item 1: Missing optional status field
+ * - Item 2: Missing optional meta field
+ * - Item 3: Multiple output nodes
+ */
+export const historyV2Fixture: HistoryResponseV2 = {
+  history: [
+    {
+      prompt_id: 'complete-item-id',
+      prompt: {
+        priority: 24,
+        prompt_id: 'complete-item-id',
+        extra_data: {
+          client_id: 'test-client',
+          extra_pnginfo: {
+            workflow: {
+              id: '44f0c9f9-b5a7-48de-99fc-7e80c1570241',
+              revision: 0,
+              last_node_id: 9,
+              last_link_id: 9,
+              nodes: [],
+              links: [],
+              groups: [],
+              config: {},
+              extra: {},
+              version: 0.4
+            }
+          }
+        }
+      },
+      outputs: {
+        '9': {
+          images: [
+            {
+              filename: 'test.png',
+              subfolder: '',
+              type: 'output'
+            }
+          ]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_start',
+            { prompt_id: 'complete-item-id', timestamp: 1234567890 }
+          ],
+          [
+            'execution_success',
+            { prompt_id: 'complete-item-id', timestamp: 1234567900 }
+          ]
+        ]
+      },
+      meta: {
+        '9': {
+          node_id: '9',
+          display_node: '9'
+        }
+      }
+    },
+    {
+      prompt_id: 'no-status-id',
+      prompt: {
+        priority: 23,
+        prompt_id: 'no-status-id',
+        extra_data: {
+          client_id: 'inference'
+        }
+      },
+      outputs: {
+        '10': {
+          images: []
+        }
+      },
+      meta: {
+        '10': {
+          node_id: '10',
+          display_node: '10'
+        }
+      }
+    },
+    {
+      prompt_id: 'no-meta-id',
+      prompt: {
+        priority: 22,
+        prompt_id: 'no-meta-id',
+        extra_data: {
+          client_id: 'web-ui'
+        }
+      },
+      outputs: {
+        '11': {
+          audio: []
+        }
+      },
+      status: {
+        status_str: 'error',
+        completed: false,
+        messages: []
+      }
+    },
+    {
+      prompt_id: 'multi-output-id',
+      prompt: {
+        priority: 21,
+        prompt_id: 'multi-output-id',
+        extra_data: {
+          client_id: 'batch-processor'
+        }
+      },
+      outputs: {
+        '3': {
+          images: [{ filename: 'img1.png', type: 'output', subfolder: '' }]
+        },
+        '9': {
+          images: [{ filename: 'img2.png', type: 'output', subfolder: '' }]
+        },
+        '12': {
+          video: [{ filename: 'video.mp4', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: []
+      },
+      meta: {
+        '3': { node_id: '3', display_node: '3' },
+        '9': { node_id: '9', display_node: '9' },
+        '12': { node_id: '12', display_node: '12' }
+      }
+    }
+  ]
+}
+
+/**
+ * Expected V1 transformation of historyV2Fixture
+ * Priority is now synthetic based on execution_success timestamp:
+ * - complete-item-id: has timestamp → priority 1 (only one with timestamp)
+ * - no-status-id: no status → priority 0
+ * - no-meta-id: empty messages → priority 0
+ * - multi-output-id: empty messages → priority 0
+ */
+export const expectedV1Fixture: HistoryTaskItem[] = [
+  {
+    taskType: 'History',
+    prompt: [
+      1,
+      'complete-item-id',
+      {},
+      {
+        client_id: 'test-client',
+        extra_pnginfo: {
+          workflow: {
+            id: '44f0c9f9-b5a7-48de-99fc-7e80c1570241',
+            revision: 0,
+            last_node_id: 9,
+            last_link_id: 9,
+            nodes: [],
+            links: [],
+            groups: [],
+            config: {},
+            extra: {},
+            version: 0.4
+          }
+        }
+      },
+      ['9']
+    ],
+    outputs: {
+      '9': {
+        images: [
+          {
+            filename: 'test.png',
+            subfolder: '',
+            type: 'output'
+          }
+        ]
+      }
+    },
+    status: {
+      status_str: 'success',
+      completed: true,
+      messages: [
+        [
+          'execution_start',
+          { prompt_id: 'complete-item-id', timestamp: 1234567890 }
+        ],
+        [
+          'execution_success',
+          { prompt_id: 'complete-item-id', timestamp: 1234567900 }
+        ]
+      ]
+    },
+    meta: {
+      '9': {
+        node_id: '9',
+        display_node: '9'
+      }
+    }
+  },
+  {
+    taskType: 'History',
+    prompt: [
+      0,
+      'no-status-id',
+      {},
+      {
+        client_id: 'inference'
+      },
+      ['10']
+    ],
+    outputs: {
+      '10': {
+        images: []
+      }
+    },
+    status: undefined,
+    meta: {
+      '10': {
+        node_id: '10',
+        display_node: '10'
+      }
+    }
+  },
+  {
+    taskType: 'History',
+    prompt: [
+      0,
+      'no-meta-id',
+      {},
+      {
+        client_id: 'web-ui'
+      },
+      ['11']
+    ],
+    outputs: {
+      '11': {
+        audio: []
+      }
+    },
+    status: {
+      status_str: 'error',
+      completed: false,
+      messages: []
+    },
+    meta: undefined
+  },
+  {
+    taskType: 'History',
+    prompt: [
+      0,
+      'multi-output-id',
+      {},
+      {
+        client_id: 'batch-processor'
+      },
+      ['3', '9', '12']
+    ],
+    outputs: {
+      '3': {
+        images: [{ filename: 'img1.png', type: 'output', subfolder: '' }]
+      },
+      '9': {
+        images: [{ filename: 'img2.png', type: 'output', subfolder: '' }]
+      },
+      '12': {
+        video: [{ filename: 'video.mp4', type: 'output', subfolder: '' }]
+      }
+    },
+    status: {
+      status_str: 'success',
+      completed: true,
+      messages: []
+    },
+    meta: {
+      '3': { node_id: '3', display_node: '3' },
+      '9': { node_id: '9', display_node: '9' },
+      '12': { node_id: '12', display_node: '12' }
+    }
+  }
+]
diff --git a/tests-ui/fixtures/historySortingFixtures.ts b/tests-ui/fixtures/historySortingFixtures.ts
new file mode 100644
index 000000000..a7b630667
--- /dev/null
+++ b/tests-ui/fixtures/historySortingFixtures.ts
@@ -0,0 +1,258 @@
+/**
+ * @fileoverview Test fixtures for history V2 timestamp-based sorting
+ */
+import type { HistoryResponseV2 } from '@/platform/remote/comfyui/history/types/historyV2Types'
+
+export const historyV2WithMissingTimestamp: HistoryResponseV2 = {
+  history: [
+    {
+      prompt_id: 'item-timestamp-1000',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-timestamp-1000',
+        extra_data: {
+          client_id: 'test-client'
+        }
+      },
+      outputs: {
+        '1': {
+          images: [{ filename: 'test1.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_success',
+            { prompt_id: 'item-timestamp-1000', timestamp: 1000 }
+          ]
+        ]
+      }
+    },
+    {
+      prompt_id: 'item-timestamp-2000',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-timestamp-2000',
+        extra_data: {
+          client_id: 'test-client'
+        }
+      },
+      outputs: {
+        '2': {
+          images: [{ filename: 'test2.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_success',
+            { prompt_id: 'item-timestamp-2000', timestamp: 2000 }
+          ]
+        ]
+      }
+    },
+    {
+      prompt_id: 'item-no-timestamp',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-no-timestamp',
+        extra_data: {
+          client_id: 'test-client'
+        }
+      },
+      outputs: {
+        '3': {
+          images: [{ filename: 'test3.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: []
+      }
+    }
+  ]
+}
+
+export const historyV2FiveItemsSorting: HistoryResponseV2 = {
+  history: [
+    {
+      prompt_id: 'item-timestamp-3000',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-timestamp-3000',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '1': {
+          images: [{ filename: 'test1.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_success',
+            { prompt_id: 'item-timestamp-3000', timestamp: 3000 }
+          ]
+        ]
+      }
+    },
+    {
+      prompt_id: 'item-timestamp-1000',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-timestamp-1000',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '2': {
+          images: [{ filename: 'test2.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_success',
+            { prompt_id: 'item-timestamp-1000', timestamp: 1000 }
+          ]
+        ]
+      }
+    },
+    {
+      prompt_id: 'item-timestamp-5000',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-timestamp-5000',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '3': {
+          images: [{ filename: 'test3.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_success',
+            { prompt_id: 'item-timestamp-5000', timestamp: 5000 }
+          ]
+        ]
+      }
+    },
+    {
+      prompt_id: 'item-timestamp-2000',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-timestamp-2000',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '4': {
+          images: [{ filename: 'test4.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_success',
+            { prompt_id: 'item-timestamp-2000', timestamp: 2000 }
+          ]
+        ]
+      }
+    },
+    {
+      prompt_id: 'item-timestamp-4000',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-timestamp-4000',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '5': {
+          images: [{ filename: 'test5.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: [
+          [
+            'execution_success',
+            { prompt_id: 'item-timestamp-4000', timestamp: 4000 }
+          ]
+        ]
+      }
+    }
+  ]
+}
+
+export const historyV2MultipleNoTimestamp: HistoryResponseV2 = {
+  history: [
+    {
+      prompt_id: 'item-no-timestamp-1',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-no-timestamp-1',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '1': {
+          images: [{ filename: 'test1.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: []
+      }
+    },
+    {
+      prompt_id: 'item-no-timestamp-2',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-no-timestamp-2',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '2': {
+          images: [{ filename: 'test2.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: []
+      }
+    },
+    {
+      prompt_id: 'item-no-timestamp-3',
+      prompt: {
+        priority: 0,
+        prompt_id: 'item-no-timestamp-3',
+        extra_data: { client_id: 'test-client' }
+      },
+      outputs: {
+        '3': {
+          images: [{ filename: 'test3.png', type: 'output', subfolder: '' }]
+        }
+      },
+      status: {
+        status_str: 'success',
+        completed: true,
+        messages: []
+      }
+    }
+  ]
+}
diff --git a/tests-ui/platform/assets/components/AssetBrowserModal.test.ts b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
index 238b5483e..e117b492c 100644
--- a/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
+++ b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
@@ -1,32 +1,40 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
-// Mock @/i18n for useAssetBrowser and AssetFilterBar
+const mockAssetService = vi.hoisted(() => ({
+  getAssetsForNodeType: vi.fn(),
+  getAssetsByTag: vi.fn(),
+  getAssetDetails: vi.fn((id: string) =>
+    Promise.resolve({
+      id,
+      name: 'Test Model',
+      user_metadata: {
+        filename: 'Test Model'
+      }
+    })
+  )
+}))
+
 vi.mock('@/i18n', () => ({
-  t: (key: string) => key,
+  t: (key: string, params?: Record<string, string>) =>
+    params ? `${key}:${JSON.stringify(params)}` : key,
   d: (date: Date) => date.toLocaleDateString()
 }))
 
-// Mock assetService for useAssetBrowser
 vi.mock('@/platform/assets/services/assetService', () => ({
-  assetService: {
-    getAssetDetails: vi.fn((id: string) =>
-      Promise.resolve({
-        id,
-        name: 'Test Model',
-        user_metadata: {
-          filename: 'Test Model'
-        }
-      })
-    )
-  }
+  assetService: mockAssetService
+}))
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: () => ({
+    getCategoryForNodeType: () => 'checkpoints'
+  })
 }))
 
-// Mock external dependencies with minimal functionality needed for business logic tests
 vi.mock('@/components/input/SearchBox.vue', () => ({
   default: {
     name: 'SearchBox',
@@ -106,7 +114,7 @@ vi.mock('@/platform/assets/components/AssetFilterBar.vue', () => ({
 vi.mock('@/platform/assets/components/AssetGrid.vue', () => ({
   default: {
     name: 'AssetGrid',
-    props: ['assets'],
+    props: ['assets', 'loading'],
     emits: ['asset-select'],
     template: `
       <div data-testid="asset-grid">
@@ -129,11 +137,13 @@ vi.mock('@/platform/assets/components/AssetGrid.vue', () => ({
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
-    t: (key: string) => key
+    t: (key: string, params?: Record<string, string>) =>
+      params ? `${key}:${JSON.stringify(params)}` : key
   }),
   createI18n: () => ({
     global: {
-      t: (key: string) => key
+      t: (key: string, params?: Record<string, string>) =>
+        params ? `${key}:${JSON.stringify(params)}` : key
     }
   })
 }))
@@ -160,18 +170,12 @@ describe('AssetBrowserModal', () => {
     }
   })
 
-  const createWrapper = (
-    assets: AssetItem[] = [],
-    props: Record<string, unknown> = {}
-  ) => {
+  const createWrapper = (props: Record<string, unknown>) => {
     const pinia = createPinia()
     setActivePinia(pinia)
 
     return mount(AssetBrowserModal, {
-      props: {
-        assets: assets,
-        ...props
-      },
+      props,
       global: {
         plugins: [pinia],
         stubs: {
@@ -186,153 +190,178 @@ describe('AssetBrowserModal', () => {
     })
   }
 
+  beforeEach(() => {
+    mockAssetService.getAssetsForNodeType.mockReset()
+    mockAssetService.getAssetsByTag.mockReset()
+  })
+
   describe('Integration with useAssetBrowser', () => {
-    it('passes filteredAssets from composable to AssetGrid', () => {
+    it('passes filtered assets from composable to AssetGrid', async () => {
       const assets = [
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
-      const wrapper = createWrapper(assets)
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+
+      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      await flushPromises()
 
       const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      const gridAssets = assetGrid.props('assets')
+      const gridAssets = assetGrid.props('assets') as AssetItem[]
 
       expect(gridAssets).toHaveLength(2)
       expect(gridAssets[0].id).toBe('asset1')
     })
 
-    it('passes categoryFilteredAssets to AssetFilterBar', () => {
+    it('passes category-filtered assets to AssetFilterBar', async () => {
       const assets = [
         createTestAsset('c1', 'model.safetensors', 'checkpoints'),
         createTestAsset('l1', 'lora.pt', 'loras')
       ]
-      const wrapper = createWrapper(assets, { showLeftPanel: true })
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+
+      const wrapper = createWrapper({
+        nodeType: 'CheckpointLoaderSimple',
+        showLeftPanel: true
+      })
+      await flushPromises()
 
       const filterBar = wrapper.findComponent({ name: 'AssetFilterBar' })
-      const filterBarAssets = filterBar.props('assets')
+      const filterBarAssets = filterBar.props('assets') as AssetItem[]
 
-      // Should initially show all assets
       expect(filterBarAssets).toHaveLength(2)
     })
   })
 
+  describe('Data fetching', () => {
+    it('fetches assets for node type', async () => {
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
+
+      createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      await flushPromises()
+
+      expect(mockAssetService.getAssetsForNodeType).toHaveBeenCalledWith(
+        'CheckpointLoaderSimple'
+      )
+    })
+
+    it('fetches assets for tag when node type not provided', async () => {
+      mockAssetService.getAssetsByTag.mockResolvedValueOnce([])
+
+      createWrapper({ assetType: 'loras' })
+      await flushPromises()
+
+      expect(mockAssetService.getAssetsByTag).toHaveBeenCalledWith('loras')
+    })
+  })
+
   describe('Asset Selection', () => {
     it('emits asset-select event when asset is selected', async () => {
-      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      const wrapper = createWrapper(assets)
+      const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
 
-      // Click on first asset
-      await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
+      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      await flushPromises()
 
-      const emitted = wrapper.emitted('asset-select')
-      expect(emitted).toBeDefined()
-      expect(emitted).toHaveLength(1)
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      await assetGrid.vm.$emit('asset-select', assets[0])
 
-      const emittedAsset = emitted![0][0] as AssetItem
-      expect(emittedAsset.id).toBe('asset1')
+      expect(wrapper.emitted('asset-select')).toEqual([[assets[0]]])
     })
 
     it('executes onSelect callback when provided', async () => {
-      const onSelectSpy = vi.fn()
-      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      const wrapper = createWrapper(assets, { onSelect: onSelectSpy })
+      const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
 
-      // Click on first asset
-      await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
+      const onSelect = vi.fn()
+      const wrapper = createWrapper({
+        nodeType: 'CheckpointLoaderSimple',
+        onSelect
+      })
+      await flushPromises()
 
-      expect(onSelectSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          id: 'asset1',
-          name: 'Test Model'
-        })
-      )
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      await assetGrid.vm.$emit('asset-select', assets[0])
+
+      expect(onSelect).toHaveBeenCalledWith(assets[0])
     })
   })
 
   describe('Left Panel Conditional Logic', () => {
-    it('hides left panel by default when showLeftPanel prop is undefined', () => {
-      const singleCategoryAssets = [
-        createTestAsset('single1', 'Asset 1', 'checkpoints'),
-        createTestAsset('single2', 'Asset 2', 'checkpoints')
-      ]
-      const wrapper = createWrapper(singleCategoryAssets)
+    it('hides left panel by default when showLeftPanel is undefined', async () => {
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
 
-      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(false)
+      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      await flushPromises()
+
+      const leftPanel = wrapper.find('[data-testid="left-panel"]')
+      expect(leftPanel.exists()).toBe(false)
     })
 
-    it('shows left panel when showLeftPanel prop is explicitly true', () => {
-      const singleCategoryAssets = [
-        createTestAsset('single1', 'Asset 1', 'checkpoints')
-      ]
+    it('shows left panel when showLeftPanel prop is explicitly true', async () => {
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
 
-      // Force show even with single category
-      const wrapper = createWrapper(singleCategoryAssets, {
+      const wrapper = createWrapper({
+        nodeType: 'CheckpointLoaderSimple',
         showLeftPanel: true
       })
-      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(true)
+      await flushPromises()
 
-      // Force hide even with multiple categories
-      wrapper.unmount()
-      const multiCategoryAssets = [
-        createTestAsset('asset1', 'Checkpoint', 'checkpoints'),
-        createTestAsset('asset2', 'LoRA', 'loras')
-      ]
-      const wrapper2 = createWrapper(multiCategoryAssets, {
-        showLeftPanel: false
-      })
-      expect(wrapper2.find('[data-testid="left-panel"]').exists()).toBe(false)
+      const leftPanel = wrapper.find('[data-testid="left-panel"]')
+      expect(leftPanel.exists()).toBe(true)
     })
   })
 
   describe('Filter Options Reactivity', () => {
     it('updates filter options when category changes', async () => {
       const assets = [
-        createTestAsset('c1', 'model.safetensors', 'checkpoints'),
-        createTestAsset('c2', 'another.safetensors', 'checkpoints'),
-        createTestAsset('l1', 'lora.pt', 'loras')
+        createTestAsset('asset1', 'Model A', 'checkpoints'),
+        createTestAsset('asset2', 'Model B', 'loras')
       ]
-      const wrapper = createWrapper(assets, { showLeftPanel: true })
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+
+      const wrapper = createWrapper({
+        nodeType: 'CheckpointLoaderSimple',
+        showLeftPanel: true
+      })
+      await flushPromises()
 
-      // Initially on "all" category - should have both .safetensors and .pt
       const filterBar = wrapper.findComponent({ name: 'AssetFilterBar' })
-      expect(filterBar.exists()).toBe(true)
+      expect(filterBar.props('assets')).toHaveLength(2)
 
-      // Switch to checkpoints category
-      const checkpointsNav = wrapper.find(
-        '[data-testid="nav-item-checkpoints"]'
-      )
-      expect(checkpointsNav.exists()).toBe(true)
-      await checkpointsNav.trigger('click')
+      const leftPanel = wrapper.findComponent({ name: 'LeftSidePanel' })
+      await leftPanel.vm.$emit('update:modelValue', 'loras')
+      await wrapper.vm.$nextTick()
 
-      // Filter bar should receive only checkpoint assets now
-      const updatedFilterBar = wrapper.findComponent({ name: 'AssetFilterBar' })
-      const filterBarAssets = updatedFilterBar.props('assets')
-
-      expect(filterBarAssets).toHaveLength(2)
-      expect(
-        filterBarAssets.every((a: AssetItem) => a.tags.includes('checkpoints'))
-      ).toBe(true)
+      expect(filterBar.props('assets')).toHaveLength(1)
     })
   })
 
   describe('Title Management', () => {
-    it('passes custom title to BaseModalLayout when title prop provided', () => {
-      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      const customTitle = 'Model Library'
-      const wrapper = createWrapper(assets, { title: customTitle })
+    it('passes custom title to BaseModalLayout when title prop provided', async () => {
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
 
-      const baseModal = wrapper.findComponent({ name: 'BaseModalLayout' })
-      expect(baseModal.props('contentTitle')).toBe(customTitle)
+      const wrapper = createWrapper({
+        nodeType: 'CheckpointLoaderSimple',
+        title: 'Custom Title'
+      })
+      await flushPromises()
+
+      const layout = wrapper.findComponent({ name: 'BaseModalLayout' })
+      expect(layout.props('contentTitle')).toBe('Custom Title')
     })
 
-    it('passes computed contentTitle to BaseModalLayout when no title prop', () => {
-      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      const wrapper = createWrapper(assets)
+    it('passes computed contentTitle to BaseModalLayout when no title prop', async () => {
+      const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
+      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
 
-      const baseModal = wrapper.findComponent({ name: 'BaseModalLayout' })
-      // Should use contentTitle from useAssetBrowser (e.g., "All Models")
-      expect(baseModal.props('contentTitle')).toBeTruthy()
-      expect(baseModal.props('contentTitle')).not.toBe('')
+      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+      await flushPromises()
+
+      const layout = wrapper.findComponent({ name: 'BaseModalLayout' })
+      expect(layout.props('contentTitle')).toBe(
+        'assetBrowser.allCategory:{"category":"Checkpoints"}'
+      )
     })
   })
 })
diff --git a/tests-ui/platform/assets/composables/useAssetBrowser.test.ts b/tests-ui/platform/assets/composables/useAssetBrowser.test.ts
index 47e5b8454..92ea78c33 100644
--- a/tests-ui/platform/assets/composables/useAssetBrowser.test.ts
+++ b/tests-ui/platform/assets/composables/useAssetBrowser.test.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
@@ -48,10 +48,9 @@ describe('useAssetBrowser', () => {
         tags: ['models', 'loras']
       })
 
-      const { selectedCategory, categoryFilteredAssets } = useAssetBrowser([
-        checkpointAsset,
-        loraAsset
-      ])
+      const { selectedCategory, categoryFilteredAssets } = useAssetBrowser(
+        ref([checkpointAsset, loraAsset])
+      )
 
       // Initially should show all assets
       expect(categoryFilteredAssets.value).toHaveLength(2)
@@ -70,11 +69,10 @@ describe('useAssetBrowser', () => {
   describe('Asset Transformation', () => {
     it('transforms API asset to include display properties', () => {
       const apiAsset = createApiAsset({
-        size: 2147483648, // 2GB
         user_metadata: { description: 'Test model' }
       })
 
-      const { filteredAssets } = useAssetBrowser([apiAsset])
+      const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
       const result = filteredAssets.value[0] // Get the transformed asset from filteredAssets
 
       // Preserves API properties
@@ -83,12 +81,10 @@ describe('useAssetBrowser', () => {
 
       // Adds display properties
       expect(result.description).toBe('Test model')
-      expect(result.formattedSize).toBe('2 GB')
       expect(result.badges).toContainEqual({
         label: 'checkpoints',
         type: 'type'
       })
-      expect(result.badges).toContainEqual({ label: '2 GB', type: 'size' })
     })
 
     it('creates fallback description from tags when metadata missing', () => {
@@ -97,27 +93,11 @@ describe('useAssetBrowser', () => {
         user_metadata: undefined
       })
 
-      const { filteredAssets } = useAssetBrowser([apiAsset])
+      const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
       const result = filteredAssets.value[0]
 
       expect(result.description).toBe('loras model')
     })
-
-    it('formats various file sizes correctly', () => {
-      const testCases = [
-        { size: 512, expected: '512 B' },
-        { size: 1536, expected: '1.5 KB' },
-        { size: 2097152, expected: '2 MB' },
-        { size: 3221225472, expected: '3 GB' }
-      ]
-
-      testCases.forEach(({ size, expected }) => {
-        const asset = createApiAsset({ size })
-        const { filteredAssets } = useAssetBrowser([asset])
-        const result = filteredAssets.value[0]
-        expect(result.formattedSize).toBe(expected)
-      })
-    })
   })
 
   describe('Tag-Based Filtering', () => {
@@ -128,7 +108,7 @@ describe('useAssetBrowser', () => {
         createApiAsset({ id: '3', tags: ['models', 'checkpoints'] })
       ]
 
-      const { selectedCategory, filteredAssets } = useAssetBrowser(assets)
+      const { selectedCategory, filteredAssets } = useAssetBrowser(ref(assets))
 
       selectedCategory.value = 'checkpoints'
       await nextTick()
@@ -147,7 +127,7 @@ describe('useAssetBrowser', () => {
         createApiAsset({ id: '2', tags: ['models', 'loras'] })
       ]
 
-      const { selectedCategory, filteredAssets } = useAssetBrowser(assets)
+      const { selectedCategory, filteredAssets } = useAssetBrowser(ref(assets))
 
       selectedCategory.value = 'all'
       await nextTick()
@@ -156,58 +136,161 @@ describe('useAssetBrowser', () => {
     })
   })
 
-  describe('Search Functionality', () => {
-    it('searches across asset name', async () => {
+  describe('Fuzzy Search Functionality', () => {
+    it('searches across asset name with exact match', async () => {
       const assets = [
         createApiAsset({ name: 'realistic_vision.safetensors' }),
         createApiAsset({ name: 'anime_style.ckpt' }),
         createApiAsset({ name: 'photorealistic_v2.safetensors' })
       ]
 
-      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
+      const { searchQuery, filteredAssets } = useAssetBrowser(ref(assets))
 
       searchQuery.value = 'realistic'
       await nextTick()
 
-      expect(filteredAssets.value).toHaveLength(2)
+      expect(filteredAssets.value.length).toBeGreaterThanOrEqual(1)
       expect(
-        filteredAssets.value.every((asset) =>
+        filteredAssets.value.some((asset) =>
           asset.name.toLowerCase().includes('realistic')
         )
       ).toBe(true)
     })
 
-    it('searches in user metadata description', async () => {
+    it('searches across asset tags', async () => {
       const assets = [
         createApiAsset({
           name: 'model1.safetensors',
-          user_metadata: { description: 'fantasy artwork model' }
+          tags: ['models', 'checkpoints']
         }),
         createApiAsset({
           name: 'model2.safetensors',
-          user_metadata: { description: 'portrait photography' }
+          tags: ['models', 'loras']
         })
       ]
 
-      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
+      const { searchQuery, filteredAssets } = useAssetBrowser(ref(assets))
 
-      searchQuery.value = 'fantasy'
+      searchQuery.value = 'checkpoints'
       await nextTick()
 
-      expect(filteredAssets.value).toHaveLength(1)
-      expect(filteredAssets.value[0].name).toBe('model1.safetensors')
+      expect(filteredAssets.value.length).toBeGreaterThanOrEqual(1)
+      expect(filteredAssets.value[0].tags).toContain('checkpoints')
     })
 
-    it('handles empty search results', async () => {
+    it('supports fuzzy matching with typos', async () => {
+      const assets = [
+        createApiAsset({ name: 'checkpoint_model.safetensors' }),
+        createApiAsset({ name: 'lora_model.safetensors' })
+      ]
+
+      const { searchQuery, filteredAssets } = useAssetBrowser(ref(assets))
+
+      // Intentional typo - fuzzy search should still find it
+      searchQuery.value = 'chckpoint'
+      await nextTick()
+
+      expect(filteredAssets.value.length).toBeGreaterThanOrEqual(1)
+      expect(filteredAssets.value[0].name).toContain('checkpoint')
+    })
+
+    it('handles empty search by returning all assets', async () => {
+      const assets = [
+        createApiAsset({ name: 'test1.safetensors' }),
+        createApiAsset({ name: 'test2.safetensors' })
+      ]
+
+      const { searchQuery, filteredAssets } = useAssetBrowser(ref(assets))
+
+      searchQuery.value = ''
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(2)
+    })
+
+    it('handles no search results', async () => {
       const assets = [createApiAsset({ name: 'test.safetensors' })]
 
-      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
+      const { searchQuery, filteredAssets } = useAssetBrowser(ref(assets))
 
-      searchQuery.value = 'nonexistent'
+      searchQuery.value = 'completelydifferentstring123'
       await nextTick()
 
       expect(filteredAssets.value).toHaveLength(0)
     })
+
+    it('performs case-insensitive search', async () => {
+      const assets = [
+        createApiAsset({ name: 'RealisticVision.safetensors' }),
+        createApiAsset({ name: 'anime_style.ckpt' })
+      ]
+
+      const { searchQuery, filteredAssets } = useAssetBrowser(ref(assets))
+
+      searchQuery.value = 'REALISTIC'
+      await nextTick()
+
+      expect(filteredAssets.value.length).toBeGreaterThanOrEqual(1)
+      expect(filteredAssets.value[0].name).toContain('Realistic')
+    })
+
+    it('combines fuzzy search with format filter', async () => {
+      const assets = [
+        createApiAsset({ name: 'my_checkpoint_model.safetensors' }),
+        createApiAsset({ name: 'my_checkpoint_model.ckpt' }),
+        createApiAsset({ name: 'different_lora.safetensors' })
+      ]
+
+      const { searchQuery, updateFilters, filteredAssets } = useAssetBrowser(
+        ref(assets)
+      )
+
+      searchQuery.value = 'checkpoint'
+      updateFilters({
+        sortBy: 'name-asc',
+        fileFormats: ['safetensors'],
+        baseModels: []
+      })
+      await nextTick()
+
+      expect(filteredAssets.value.length).toBeGreaterThanOrEqual(1)
+      expect(
+        filteredAssets.value.every((asset) =>
+          asset.name.endsWith('.safetensors')
+        )
+      ).toBe(true)
+      expect(
+        filteredAssets.value.some((asset) => asset.name.includes('checkpoint'))
+      ).toBe(true)
+    })
+
+    it('combines fuzzy search with base model filter', async () => {
+      const assets = [
+        createApiAsset({
+          name: 'realistic_sd15.safetensors',
+          user_metadata: { base_model: 'SD1.5' }
+        }),
+        createApiAsset({
+          name: 'realistic_sdxl.safetensors',
+          user_metadata: { base_model: 'SDXL' }
+        })
+      ]
+
+      const { searchQuery, updateFilters, filteredAssets } = useAssetBrowser(
+        ref(assets)
+      )
+
+      searchQuery.value = 'realistic'
+      updateFilters({
+        sortBy: 'name-asc',
+        fileFormats: [],
+        baseModels: ['SDXL']
+      })
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(1)
+      expect(filteredAssets.value[0].name).toBe('realistic_sdxl.safetensors')
+    })
   })
 
   describe('Combined Search and Filtering', () => {
@@ -227,8 +310,9 @@ describe('useAssetBrowser', () => {
         })
       ]
 
-      const { searchQuery, selectedCategory, filteredAssets } =
-        useAssetBrowser(assets)
+      const { searchQuery, selectedCategory, filteredAssets } = useAssetBrowser(
+        ref(assets)
+      )
 
       searchQuery.value = 'realistic'
       selectedCategory.value = 'checkpoints'
@@ -249,7 +333,7 @@ describe('useAssetBrowser', () => {
         createApiAsset({ name: 'beta.safetensors' })
       ]
 
-      const { updateFilters, filteredAssets } = useAssetBrowser(assets)
+      const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
 
       updateFilters({ sortBy: 'name', fileFormats: [], baseModels: [] })
       await nextTick()
@@ -269,7 +353,7 @@ describe('useAssetBrowser', () => {
         createApiAsset({ created_at: '2024-02-01T00:00:00Z' })
       ]
 
-      const { updateFilters, filteredAssets } = useAssetBrowser(assets)
+      const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
 
       updateFilters({ sortBy: 'recent', fileFormats: [], baseModels: [] })
       await nextTick()
@@ -291,7 +375,7 @@ describe('useAssetBrowser', () => {
         createApiAsset({ tags: ['models', 'checkpoints'] }) // duplicate
       ]
 
-      const { availableCategories } = useAssetBrowser(assets)
+      const { availableCategories } = useAssetBrowser(ref(assets))
 
       expect(availableCategories.value).toEqual([
         { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
@@ -310,7 +394,7 @@ describe('useAssetBrowser', () => {
         createApiAsset({ tags: ['models', 'vae'] })
       ]
 
-      const { availableCategories } = useAssetBrowser(assets)
+      const { availableCategories } = useAssetBrowser(ref(assets))
 
       expect(availableCategories.value).toEqual([
         { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
@@ -324,7 +408,7 @@ describe('useAssetBrowser', () => {
         createApiAsset({ tags: ['models', 'checkpoints'] })
       ]
 
-      const { availableCategories } = useAssetBrowser(assets)
+      const { availableCategories } = useAssetBrowser(ref(assets))
 
       expect(availableCategories.value).toEqual([
         { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
@@ -338,7 +422,7 @@ describe('useAssetBrowser', () => {
 
     it('computes content title from selected category', () => {
       const assets = [createApiAsset({ tags: ['models', 'checkpoints'] })]
-      const { selectedCategory, contentTitle } = useAssetBrowser(assets)
+      const { selectedCategory, contentTitle } = useAssetBrowser(ref(assets))
 
       // Default
       expect(contentTitle.value).toBe('All Models')
diff --git a/tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts b/tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts
index 15915dcf7..1cb16ead5 100644
--- a/tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts
+++ b/tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts
@@ -15,17 +15,6 @@ vi.mock('@/i18n', () => ({
   }
 }))
 
-vi.mock('@/platform/assets/services/assetService', () => ({
-  assetService: {
-    getAssetsForNodeType: vi.fn().mockResolvedValue([]),
-    getAssetsByTag: vi.fn().mockResolvedValue([])
-  }
-}))
-
-const { assetService } = await import('@/platform/assets/services/assetService')
-const mockGetAssetsByTag = vi.mocked(assetService.getAssetsByTag)
-const mockGetAssetsForNodeType = vi.mocked(assetService.getAssetsForNodeType)
-
 function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
   return {
     id: 'asset-123',
@@ -116,7 +105,8 @@ describe('useAssetBrowserDialog', () => {
         expect.objectContaining({
           key: 'global-asset-browser',
           props: expect.objectContaining({
-            showLeftPanel: true
+            showLeftPanel: true,
+            assetType: 'models'
           })
         })
       )
@@ -169,91 +159,21 @@ describe('useAssetBrowserDialog', () => {
       const dialogCall = mockShowDialog.mock.calls[0][0]
       expect(dialogCall.props.title).toBe('Custom Model Browser')
     })
-
-    it('calls getAssetsByTag with correct assetType parameter', async () => {
-      setupDialogMocks()
-      const assetBrowserDialog = useAssetBrowserDialog()
-      await assetBrowserDialog.browse({
-        assetType: 'models'
-      })
-
-      expect(mockGetAssetsByTag).toHaveBeenCalledWith('models')
-    })
-
-    it('passes fetched assets to dialog props', async () => {
-      const { mockShowDialog } = setupDialogMocks()
-      const assetBrowserDialog = useAssetBrowserDialog()
-      const mockAssets = [
-        createMockAsset({ id: 'asset-1', name: 'model1.safetensors' }),
-        createMockAsset({ id: 'asset-2', name: 'model2.safetensors' })
-      ]
-
-      mockGetAssetsByTag.mockResolvedValueOnce(mockAssets)
-      await assetBrowserDialog.browse({
-        assetType: 'models'
-      })
-
-      const dialogCall = mockShowDialog.mock.calls[0][0]
-      expect(dialogCall.props.assets).toEqual(mockAssets)
-    })
-
-    it('handles asset fetch errors gracefully', async () => {
-      const { mockShowDialog } = setupDialogMocks()
-      const assetBrowserDialog = useAssetBrowserDialog()
-      const consoleErrorSpy = vi
-        .spyOn(console, 'error')
-        .mockImplementation(() => {})
-
-      mockGetAssetsByTag.mockRejectedValueOnce(new Error('Network error'))
-      await assetBrowserDialog.browse({
-        assetType: 'models'
-      })
-
-      expect(mockShowDialog).toHaveBeenCalled()
-      const dialogCall = mockShowDialog.mock.calls[0][0]
-      expect(dialogCall.props.assets).toEqual([])
-
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
-        'Failed to fetch assets for tag:',
-        'models',
-        expect.any(Error)
-      )
-
-      consoleErrorSpy.mockRestore()
-    })
   })
 
-  describe('.show() title formatting', () => {
-    it('formats title with VAE acronym uppercase', async () => {
+  describe('.show() behavior', () => {
+    it('opens dialog without pre-fetched assets', async () => {
       const { mockShowDialog } = setupDialogMocks()
-      mockGetAssetsForNodeType.mockResolvedValueOnce([
-        createMockAsset({ tags: ['models', 'vae'] })
-      ])
-
       const assetBrowserDialog = useAssetBrowserDialog()
+
       await assetBrowserDialog.show({
-        nodeType: 'VAELoader',
-        inputName: 'vae_name'
+        nodeType: 'CheckpointLoaderSimple',
+        inputName: 'ckpt_name'
       })
 
       const dialogCall = mockShowDialog.mock.calls[0][0]
-      expect(dialogCall.props.title).toContain('VAE')
-    })
-
-    it('replaces underscores with spaces in tag names', async () => {
-      const { mockShowDialog } = setupDialogMocks()
-      mockGetAssetsForNodeType.mockResolvedValueOnce([
-        createMockAsset({ tags: ['models', 'style_models'] })
-      ])
-
-      const assetBrowserDialog = useAssetBrowserDialog()
-      await assetBrowserDialog.show({
-        nodeType: 'StyleModelLoader',
-        inputName: 'style_model_name'
-      })
-
-      const dialogCall = mockShowDialog.mock.calls[0][0]
-      expect(dialogCall.props.title).toContain('style models')
+      expect(dialogCall.props.nodeType).toBe('CheckpointLoaderSimple')
+      expect(dialogCall.props.assets).toBeUndefined()
     })
   })
 })
diff --git a/tests-ui/tests/api.fetchApi.test.ts b/tests-ui/tests/api.fetchApi.test.ts
new file mode 100644
index 000000000..bc5b3a0cd
--- /dev/null
+++ b/tests-ui/tests/api.fetchApi.test.ts
@@ -0,0 +1,171 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { api } from '@/scripts/api'
+
+// Mock global fetch
+vi.stubGlobal('fetch', vi.fn())
+
+describe('api.fetchApi', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+
+    // Reset api state
+    api.user = 'test-user'
+  })
+
+  describe('header handling', () => {
+    it('should add Comfy-User header with plain object headers', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+
+      await api.fetchApi('/test', {
+        headers: {}
+      })
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining('/test'),
+        expect.objectContaining({
+          headers: {
+            'Comfy-User': 'test-user'
+          }
+        })
+      )
+    })
+
+    it('should add Comfy-User header with Headers instance', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+      const headers = new Headers()
+
+      await api.fetchApi('/test', { headers })
+
+      expect(mockFetch).toHaveBeenCalled()
+      const callHeaders = mockFetch.mock.calls[0][1]?.headers
+      expect(callHeaders).toEqual(headers)
+    })
+
+    it('should add Comfy-User header with array headers', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+      const headers: [string, string][] = []
+
+      await api.fetchApi('/test', { headers })
+
+      expect(mockFetch).toHaveBeenCalled()
+      const callHeaders = mockFetch.mock.calls[0][1]?.headers
+      expect(callHeaders).toContainEqual(['Comfy-User', 'test-user'])
+    })
+
+    it('should preserve existing headers when adding Comfy-User', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+
+      await api.fetchApi('/test', {
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Custom': 'value'
+        }
+      })
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining('/test'),
+        expect.objectContaining({
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Custom': 'value',
+            'Comfy-User': 'test-user'
+          }
+        })
+      )
+    })
+
+    it('should not allow developer-specified headers to be overridden by options', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+
+      await api.fetchApi('/test', {
+        headers: {
+          'Comfy-User': 'fennec-girl'
+        }
+      })
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining('/test'),
+        expect.objectContaining({
+          headers: {
+            'Comfy-User': 'test-user'
+          }
+        })
+      )
+    })
+  })
+
+  describe('default options', () => {
+    it('should set cache to no-cache by default', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+
+      await api.fetchApi('/test')
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          cache: 'no-cache'
+        })
+      )
+    })
+
+    it('should include required headers even when no headers option is provided', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+
+      await api.fetchApi('/test')
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          headers: expect.objectContaining({
+            'Comfy-User': 'test-user'
+          })
+        })
+      )
+    })
+
+    it('should not override existing cache option', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+
+      await api.fetchApi('/test', { cache: 'force-cache' })
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          cache: 'force-cache'
+        })
+      )
+    })
+  })
+
+  describe('URL construction', () => {
+    it('should use apiURL for route construction', async () => {
+      const mockFetch = vi
+        .mocked(global.fetch)
+        .mockResolvedValue(new Response())
+
+      await api.fetchApi('/test/route')
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        expect.stringContaining('/api/test/route'),
+        expect.any(Object)
+      )
+    })
+  })
+})
diff --git a/tests-ui/tests/base/common/downloadUtil.test.ts b/tests-ui/tests/base/common/downloadUtil.test.ts
index 7231b3620..8684c8e1c 100644
--- a/tests-ui/tests/base/common/downloadUtil.test.ts
+++ b/tests-ui/tests/base/common/downloadUtil.test.ts
@@ -2,15 +2,38 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { downloadFile } from '@/base/common/downloadUtil'
 
+let mockIsCloud = false
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud
+  }
+}))
+
+// Global stubs
+const createObjectURLSpy = vi
+  .spyOn(URL, 'createObjectURL')
+  .mockReturnValue('blob:mock-url')
+const revokeObjectURLSpy = vi
+  .spyOn(URL, 'revokeObjectURL')
+  .mockImplementation(() => {})
+
 describe('downloadUtil', () => {
   let mockLink: HTMLAnchorElement
+  let fetchMock: ReturnType<typeof vi.fn>
 
   beforeEach(() => {
+    mockIsCloud = false
+    fetchMock = vi.fn()
+    vi.stubGlobal('fetch', fetchMock)
+    createObjectURLSpy.mockClear().mockReturnValue('blob:mock-url')
+    revokeObjectURLSpy.mockClear().mockImplementation(() => {})
     // Create a mock anchor element
     mockLink = {
       href: '',
       download: '',
-      click: vi.fn()
+      click: vi.fn(),
+      style: { display: '' }
     } as unknown as HTMLAnchorElement
 
     // Spy on DOM methods
@@ -20,7 +43,7 @@ describe('downloadUtil', () => {
   })
 
   afterEach(() => {
-    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
   })
 
   describe('downloadFile', () => {
@@ -35,6 +58,8 @@ describe('downloadUtil', () => {
       expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
       expect(mockLink.click).toHaveBeenCalled()
       expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should use custom filename when provided', () => {
@@ -45,6 +70,8 @@ describe('downloadUtil', () => {
 
       expect(mockLink.href).toBe(testUrl)
       expect(mockLink.download).toBe(customFilename)
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should extract filename from URL query parameters', () => {
@@ -55,6 +82,7 @@ describe('downloadUtil', () => {
 
       expect(mockLink.href).toBe(testUrl)
       expect(mockLink.download).toBe('extracted-image.jpg')
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should use default filename when URL has no filename parameter', () => {
@@ -64,6 +92,7 @@ describe('downloadUtil', () => {
 
       expect(mockLink.href).toBe(testUrl)
       expect(mockLink.download).toBe('download.png')
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should handle invalid URLs gracefully', () => {
@@ -74,6 +103,8 @@ describe('downloadUtil', () => {
       expect(mockLink.href).toBe(invalidUrl)
       expect(mockLink.download).toBe('download.png')
       expect(mockLink.click).toHaveBeenCalled()
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should prefer custom filename over extracted filename', () => {
@@ -84,6 +115,7 @@ describe('downloadUtil', () => {
       downloadFile(testUrl, customFilename)
 
       expect(mockLink.download).toBe(customFilename)
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should handle URLs with empty filename parameter', () => {
@@ -92,6 +124,7 @@ describe('downloadUtil', () => {
       downloadFile(testUrl)
 
       expect(mockLink.download).toBe('download.png')
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should handle relative URLs by using window.location.origin', () => {
@@ -101,6 +134,8 @@ describe('downloadUtil', () => {
 
       expect(mockLink.href).toBe(relativeUrl)
       expect(mockLink.download).toBe('relative-image.png')
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
     })
 
     it('should clean up DOM elements after download', () => {
@@ -111,6 +146,54 @@ describe('downloadUtil', () => {
       // Verify the element was added and then removed
       expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
       expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
+      expect(fetchMock).not.toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+    })
+
+    it('streams downloads via blob when running in cloud', async () => {
+      mockIsCloud = true
+      const testUrl = 'https://storage.googleapis.com/bucket/file.bin'
+      const blob = new Blob(['test'])
+      const blobFn = vi.fn().mockResolvedValue(blob)
+      fetchMock.mockResolvedValue({
+        ok: true,
+        status: 200,
+        blob: blobFn
+      } as unknown as Response)
+
+      downloadFile(testUrl)
+
+      expect(fetchMock).toHaveBeenCalledWith(testUrl)
+      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
+      await fetchPromise
+      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
+      await blobPromise
+      await Promise.resolve()
+      expect(blobFn).toHaveBeenCalled()
+      expect(createObjectURLSpy).toHaveBeenCalledWith(blob)
+      expect(revokeObjectURLSpy).toHaveBeenCalledWith('blob:mock-url')
+      expect(mockLink.click).toHaveBeenCalled()
+    })
+
+    it('logs an error when cloud fetch fails', async () => {
+      mockIsCloud = true
+      const testUrl = 'https://storage.googleapis.com/bucket/missing.bin'
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      fetchMock.mockResolvedValue({
+        ok: false,
+        status: 404,
+        blob: vi.fn()
+      } as unknown as Response)
+
+      downloadFile(testUrl)
+
+      expect(fetchMock).toHaveBeenCalledWith(testUrl)
+      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
+      await fetchPromise
+      await Promise.resolve()
+      expect(consoleSpy).toHaveBeenCalled()
+      expect(createObjectURLSpy).not.toHaveBeenCalled()
+      consoleSpy.mockRestore()
     })
   })
 })
diff --git a/tests-ui/tests/components/TopMenuSection.test.ts b/tests-ui/tests/components/TopMenuSection.test.ts
new file mode 100644
index 000000000..5d92a0cc9
--- /dev/null
+++ b/tests-ui/tests/components/TopMenuSection.test.ts
@@ -0,0 +1,83 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed } from 'vue'
+
+import TopMenuSection from '@/components/TopMenuSection.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
+import LoginButton from '@/components/topbar/LoginButton.vue'
+import { isElectron } from '@/utils/envUtil'
+
+const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
+
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: () => {
+    return {
+      isLoggedIn: computed(() => mockData.isLoggedIn)
+    }
+  }
+}))
+
+vi.mock('@/utils/envUtil')
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: vi.fn(() => ({
+    currentUser: null,
+    loading: false
+  }))
+}))
+
+function createWrapper() {
+  return mount(TopMenuSection, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      stubs: {
+        SubgraphBreadcrumb: true,
+        CurrentUserButton: true,
+        LoginButton: true
+      }
+    }
+  })
+}
+
+describe('TopMenuSection', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('authentication state', () => {
+    describe('when user is logged in', () => {
+      beforeEach(() => {
+        mockData.isLoggedIn = true
+      })
+
+      it('should display CurrentUserButton and not display LoginButton', () => {
+        const wrapper = createWrapper()
+        expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
+        expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+      })
+    })
+
+    describe('when user is not logged in', () => {
+      beforeEach(() => {
+        mockData.isLoggedIn = false
+      })
+
+      describe('on desktop platform', () => {
+        it('should display LoginButton and not display CurrentUserButton', () => {
+          vi.mocked(isElectron).mockReturnValue(true)
+          const wrapper = createWrapper()
+          expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
+          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+        })
+      })
+
+      describe('on web platform', () => {
+        it('should not display CurrentUserButton and not display LoginButton', () => {
+          const wrapper = createWrapper()
+          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+          expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+        })
+      })
+    })
+  })
+})
diff --git a/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts b/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
index c39a07e70..0f8adeb60 100644
--- a/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
+++ b/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
@@ -15,8 +15,8 @@ vi.mock('vue-i18n', () => ({
   }))
 }))
 
-vi.mock('marked', () => ({
-  marked: vi.fn((content) => `<p>${content}</p>`)
+vi.mock('@/utils/markdownRendererUtil', () => ({
+  renderMarkdownToHtml: vi.fn((content) => `<p>${content}</p>`)
 }))
 
 vi.mock('@/platform/updates/common/releaseStore', () => ({
@@ -119,7 +119,7 @@ describe('WhatsNewPopup', () => {
   })
 
   describe('content rendering', () => {
-    it('should render release content using marked', async () => {
+    it('should render release content using renderMarkdownToHtml', async () => {
       mockReleaseStore.shouldShowPopup = true
       mockReleaseStore.recentRelease = {
         id: 1,
@@ -132,7 +132,7 @@ describe('WhatsNewPopup', () => {
 
       const wrapper = createWrapper()
 
-      // Check that the content is rendered (marked is mocked to return processed content)
+      // Check that the content is rendered (renderMarkdownToHtml is mocked to return processed content)
       expect(wrapper.find('.content-text').exists()).toBe(true)
       const contentHtml = wrapper.find('.content-text').html()
       expect(contentHtml).toContain('<p># Release Notes')
diff --git a/tests-ui/tests/composables/graph/useTransformSettling.test.ts b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
index 6b2d106d5..bbf0f5d7b 100644
--- a/tests-ui/tests/composables/graph/useTransformSettling.test.ts
+++ b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
@@ -67,41 +67,8 @@ describe('useTransformSettling', () => {
     expect(isTransforming.value).toBe(false)
   })
 
-  it('should track pan events when trackPan is enabled', async () => {
-    const { isTransforming } = useTransformSettling(element, {
-      trackPan: true,
-      settleDelay: 200
-    })
-
-    // Pointer down should start transform
-    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    await nextTick()
-    expect(isTransforming.value).toBe(true)
-
-    // Pointer move should keep it active
-    vi.advanceTimersByTime(100)
-    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
-    await nextTick()
-
-    // Should still be transforming
-    expect(isTransforming.value).toBe(true)
-
-    // Pointer up
-    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
-    await nextTick()
-
-    // Should still be transforming until settle delay
-    expect(isTransforming.value).toBe(true)
-
-    // Advance past settle delay
-    vi.advanceTimersByTime(200)
-    expect(isTransforming.value).toBe(false)
-  })
-
-  it('should not track pan events when trackPan is disabled', async () => {
-    const { isTransforming } = useTransformSettling(element, {
-      trackPan: false
-    })
+  it('should not track pan events', async () => {
+    const { isTransforming } = useTransformSettling(element)
 
     // Pointer events should not trigger transform
     element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
@@ -111,26 +78,6 @@ describe('useTransformSettling', () => {
     expect(isTransforming.value).toBe(false)
   })
 
-  it('should handle pointer cancel events', async () => {
-    const { isTransforming } = useTransformSettling(element, {
-      trackPan: true,
-      settleDelay: 200
-    })
-
-    // Start panning
-    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    await nextTick()
-    expect(isTransforming.value).toBe(true)
-
-    // Cancel instead of up
-    element.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
-    await nextTick()
-
-    // Should still settle normally
-    vi.advanceTimersByTime(200)
-    expect(isTransforming.value).toBe(false)
-  })
-
   it('should work with ref target', async () => {
     const targetRef = ref<HTMLElement | null>(null)
     const { isTransforming } = useTransformSettling(targetRef)
@@ -177,44 +124,13 @@ describe('useTransformSettling', () => {
     element.removeEventListener('wheel', bubbleHandler, false)
   })
 
-  it('should throttle pointer move events', async () => {
-    const { isTransforming } = useTransformSettling(element, {
-      trackPan: true,
-      pointerMoveThrottle: 50,
-      settleDelay: 100
-    })
-
-    // Start panning
-    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    await nextTick()
-
-    // Fire many pointer move events rapidly
-    for (let i = 0; i < 10; i++) {
-      element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
-      vi.advanceTimersByTime(5) // 5ms between events
-    }
-    await nextTick()
-
-    // Should still be transforming
-    expect(isTransforming.value).toBe(true)
-
-    // End panning
-    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
-
-    // Advance past settle delay
-    vi.advanceTimersByTime(100)
-    expect(isTransforming.value).toBe(false)
-  })
-
   it('should clean up event listeners when component unmounts', async () => {
     const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener')
 
     // Create a test component
     const TestComponent = {
       setup() {
-        const { isTransforming } = useTransformSettling(element, {
-          trackPan: true
-        })
+        const { isTransforming } = useTransformSettling(element)
         return { isTransforming }
       },
       template: '<div>{{ isTransforming }}</div>'
@@ -226,52 +142,26 @@ describe('useTransformSettling', () => {
     // Unmount component
     wrapper.unmount()
 
-    // Should have removed all event listeners
+    // Should have removed wheel event listener
     expect(removeEventListenerSpy).toHaveBeenCalledWith(
       'wheel',
       expect.any(Function),
       expect.objectContaining({ capture: true })
     )
-    expect(removeEventListenerSpy).toHaveBeenCalledWith(
-      'pointerdown',
-      expect.any(Function),
-      expect.objectContaining({ capture: true })
-    )
-    expect(removeEventListenerSpy).toHaveBeenCalledWith(
-      'pointermove',
-      expect.any(Function),
-      expect.objectContaining({ capture: true })
-    )
-    expect(removeEventListenerSpy).toHaveBeenCalledWith(
-      'pointerup',
-      expect.any(Function),
-      expect.objectContaining({ capture: true })
-    )
-    expect(removeEventListenerSpy).toHaveBeenCalledWith(
-      'pointercancel',
-      expect.any(Function),
-      expect.objectContaining({ capture: true })
-    )
   })
 
   it('should use passive listeners when specified', async () => {
     const addEventListenerSpy = vi.spyOn(element, 'addEventListener')
 
     useTransformSettling(element, {
-      passive: true,
-      trackPan: true
+      passive: true
     })
 
-    // Check that passive option was used for appropriate events
+    // Check that passive option was used for wheel event
     expect(addEventListenerSpy).toHaveBeenCalledWith(
       'wheel',
       expect.any(Function),
       expect.objectContaining({ passive: true, capture: true })
     )
-    expect(addEventListenerSpy).toHaveBeenCalledWith(
-      'pointermove',
-      expect.any(Function),
-      expect.objectContaining({ passive: true, capture: true })
-    )
   })
 })
diff --git a/tests-ui/tests/composables/node/useCreditsBadge.test.ts b/tests-ui/tests/composables/node/useCreditsBadge.test.ts
new file mode 100644
index 000000000..72bb92338
--- /dev/null
+++ b/tests-ui/tests/composables/node/useCreditsBadge.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, vi } from 'vitest'
+
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphBadge } from '@/lib/litegraph/src/LGraphBadge'
+import type { LGraphIcon } from '@/lib/litegraph/src/LGraphIcon'
+
+import { subgraphTest } from '../../litegraph/subgraph/fixtures/subgraphFixtures'
+
+import { usePriceBadge } from '@/composables/node/usePriceBadge'
+
+vi.mock('@/stores/workspace/colorPaletteStore', () => ({
+  useColorPaletteStore: () => ({
+    completedActivePalette: {
+      light_theme: false,
+      colors: { litegraph_base: {} }
+    }
+  })
+}))
+
+const { updateSubgraphCredits } = usePriceBadge()
+
+const mockNode = new LGraphNode('mock node')
+const mockIcon: Partial<LGraphIcon> = { unicode: '\ue96b' }
+const badge: Partial<LGraphBadge> = {
+  icon: mockIcon as LGraphIcon,
+  text: '$0.05/Run'
+}
+mockNode.badges = [badge as LGraphBadge]
+
+function getBadgeText(node: LGraphNode): string {
+  const badge = node.badges[0]
+  return (typeof badge === 'function' ? badge() : badge).text
+}
+
+describe('subgraph pricing', () => {
+  subgraphTest(
+    'should not display badge for subgraphs without API nodes',
+    ({ subgraphWithNode }) => {
+      const { subgraphNode } = subgraphWithNode
+      updateSubgraphCredits(subgraphNode)
+      expect(subgraphNode.badges.length).toBe(0)
+    }
+  )
+  subgraphTest(
+    'should return the price of a single contained API node',
+    ({ subgraphWithNode }) => {
+      const { subgraphNode, subgraph } = subgraphWithNode
+      subgraph.add(mockNode)
+      updateSubgraphCredits(subgraphNode)
+      expect(subgraphNode.badges.length).toBe(1)
+      expect(getBadgeText(subgraphNode)).toBe('$0.05/Run')
+    }
+  )
+  subgraphTest(
+    'should return the number of api nodes if more than one exists',
+    ({ subgraphWithNode }) => {
+      const { subgraphNode, subgraph } = subgraphWithNode
+      for (let i = 0; i < 5; i++) subgraph.add(mockNode)
+      updateSubgraphCredits(subgraphNode)
+      expect(subgraphNode.badges.length).toBe(1)
+      expect(getBadgeText(subgraphNode)).toBe('Partner Nodes x 5')
+    }
+  )
+})
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index 36697cbc8..34ff90f83 100644
--- a/tests-ui/tests/composables/node/useNodePricing.test.ts
+++ b/tests-ui/tests/composables/node/useNodePricing.test.ts
@@ -2189,4 +2189,54 @@ describe('useNodePricing', () => {
       expect(price).toBe('$0.05-0.15/second')
     })
   })
+
+  describe('dynamic pricing - LtxvApiTextToVideo', () => {
+    it('should return $0.30 for Pro 1080p 5s', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LtxvApiTextToVideo', [
+        { name: 'model', value: 'LTX-2 (Pro)' },
+        { name: 'duration', value: '5' },
+        { name: 'resolution', value: '1920x1080' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.30/Run') // 0.06 * 5
+    })
+
+    it('should parse "10s" duration strings', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LtxvApiTextToVideo', [
+        { name: 'model', value: 'LTX-2 (Fast)' },
+        { name: 'duration', value: '10' },
+        { name: 'resolution', value: '3840x2160' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.60/Run') // 0.16 * 10
+    })
+
+    it('should fall back when a required widget is missing (no resolution)', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LtxvApiTextToVideo', [
+        { name: 'model', value: 'LTX-2 (Pro)' },
+        { name: 'duration', value: '5' }
+        // missing resolution
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.04-0.24/second')
+    })
+
+    it('should fall back for unknown model', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LtxvApiTextToVideo', [
+        { name: 'model', value: 'LTX-3 (Pro)' },
+        { name: 'duration', value: 5 },
+        { name: 'resolution', value: '1920x1080' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.04-0.24/second')
+    })
+  })
 })
diff --git a/tests-ui/tests/composables/useCoreCommands.test.ts b/tests-ui/tests/composables/useCoreCommands.test.ts
index f0b0bc8f7..743aadd93 100644
--- a/tests-ui/tests/composables/useCoreCommands.test.ts
+++ b/tests-ui/tests/composables/useCoreCommands.test.ts
@@ -85,6 +85,13 @@ vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
   useFirebaseAuthActions: vi.fn(() => ({}))
 }))
 
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: vi.fn(() => ({
+    isActiveSubscription: vi.fn().mockReturnValue(true),
+    showSubscriptionDialog: vi.fn()
+  }))
+}))
+
 describe('useCoreCommands', () => {
   const mockSubgraph = {
     nodes: [
diff --git a/tests-ui/tests/composables/useErrorHandling.test.ts b/tests-ui/tests/composables/useErrorHandling.test.ts
new file mode 100644
index 000000000..99cf3da11
--- /dev/null
+++ b/tests-ui/tests/composables/useErrorHandling.test.ts
@@ -0,0 +1,353 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ErrorRecoveryStrategy } from '@/composables/useErrorHandling'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+
+describe('useErrorHandling', () => {
+  let errorHandler: ReturnType<typeof useErrorHandling>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+    errorHandler = useErrorHandling()
+  })
+
+  describe('wrapWithErrorHandlingAsync', () => {
+    it('should execute action successfully', async () => {
+      const action = vi.fn(async () => 'success')
+      const wrapped = errorHandler.wrapWithErrorHandlingAsync(action)
+
+      const result = await wrapped()
+
+      expect(result).toBe('success')
+      expect(action).toHaveBeenCalledOnce()
+    })
+
+    it('should call error handler when action throws', async () => {
+      const testError = new Error('test error')
+      const action = vi.fn(async () => {
+        throw testError
+      })
+      const customErrorHandler = vi.fn()
+
+      const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+        action,
+        customErrorHandler
+      )
+
+      await wrapped()
+
+      expect(customErrorHandler).toHaveBeenCalledWith(testError)
+    })
+
+    it('should call finally handler after success', async () => {
+      const action = vi.fn(async () => 'success')
+      const finallyHandler = vi.fn()
+
+      const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+        action,
+        undefined,
+        finallyHandler
+      )
+
+      await wrapped()
+
+      expect(finallyHandler).toHaveBeenCalledOnce()
+    })
+
+    it('should call finally handler after error', async () => {
+      const action = vi.fn(async () => {
+        throw new Error('test error')
+      })
+      const finallyHandler = vi.fn()
+
+      const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+        action,
+        vi.fn(),
+        finallyHandler
+      )
+
+      await wrapped()
+
+      expect(finallyHandler).toHaveBeenCalledOnce()
+    })
+
+    describe('error recovery', () => {
+      it('should not use recovery strategy when no error occurs', async () => {
+        const action = vi.fn(async () => 'success')
+        const recoveryStrategy: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => true),
+          recover: vi.fn()
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          undefined,
+          undefined,
+          [recoveryStrategy]
+        )
+
+        await wrapped()
+
+        expect(recoveryStrategy.shouldHandle).not.toHaveBeenCalled()
+        expect(recoveryStrategy.recover).not.toHaveBeenCalled()
+      })
+
+      it('should use recovery strategy when it matches error', async () => {
+        const testError = new Error('test error')
+        const action = vi.fn(async () => {
+          throw testError
+        })
+        const recoveryStrategy: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn((error) => error === testError),
+          recover: vi.fn(async () => {
+            // Recovery succeeds, does nothing
+          })
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          vi.fn(),
+          undefined,
+          [recoveryStrategy]
+        )
+
+        await wrapped()
+
+        expect(recoveryStrategy.shouldHandle).toHaveBeenCalledWith(testError)
+        expect(recoveryStrategy.recover).toHaveBeenCalled()
+      })
+
+      it('should pass action and args to recovery strategy', async () => {
+        const testError = new Error('test error')
+        const action = vi.fn(async (_arg1: string, _arg2: number) => {
+          throw testError
+        })
+        const recoveryStrategy: ErrorRecoveryStrategy<[string, number], void> =
+          {
+            shouldHandle: vi.fn(() => true),
+            recover: vi.fn()
+          }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          vi.fn(),
+          undefined,
+          [recoveryStrategy]
+        )
+
+        await wrapped('test', 123)
+
+        expect(recoveryStrategy.recover).toHaveBeenCalledWith(
+          testError,
+          action,
+          ['test', 123]
+        )
+      })
+
+      it('should retry operation when recovery succeeds', async () => {
+        let attemptCount = 0
+        const action = vi.fn(async (value: string) => {
+          attemptCount++
+          if (attemptCount === 1) {
+            throw new Error('first attempt failed')
+          }
+          return `success: ${value}`
+        })
+
+        const recoveryStrategy: ErrorRecoveryStrategy<[string], string> = {
+          shouldHandle: vi.fn(() => true),
+          recover: vi.fn(async (_error, retry, args) => {
+            await retry(...args)
+          })
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          vi.fn(),
+          undefined,
+          [recoveryStrategy]
+        )
+
+        await wrapped('test-value')
+
+        expect(action).toHaveBeenCalledTimes(2)
+        expect(recoveryStrategy.recover).toHaveBeenCalledOnce()
+      })
+
+      it('should not call error handler when recovery succeeds', async () => {
+        const action = vi.fn(async () => {
+          throw new Error('test error')
+        })
+        const customErrorHandler = vi.fn()
+        const recoveryStrategy: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => true),
+          recover: vi.fn(async () => {
+            // Recovery succeeds
+          })
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          customErrorHandler,
+          undefined,
+          [recoveryStrategy]
+        )
+
+        await wrapped()
+
+        expect(customErrorHandler).not.toHaveBeenCalled()
+      })
+
+      it('should call error handler when recovery fails', async () => {
+        const originalError = new Error('original error')
+        const recoveryError = new Error('recovery error')
+        const action = vi.fn(async () => {
+          throw originalError
+        })
+        const customErrorHandler = vi.fn()
+        const recoveryStrategy: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => true),
+          recover: vi.fn(async () => {
+            throw recoveryError
+          })
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          customErrorHandler,
+          undefined,
+          [recoveryStrategy]
+        )
+
+        await wrapped()
+
+        expect(customErrorHandler).toHaveBeenCalledWith(originalError)
+      })
+
+      it('should try multiple recovery strategies in order', async () => {
+        const testError = new Error('test error')
+        const action = vi.fn(async () => {
+          throw testError
+        })
+
+        const strategy1: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => false),
+          recover: vi.fn()
+        }
+
+        const strategy2: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => true),
+          recover: vi.fn(async () => {
+            // Recovery succeeds
+          })
+        }
+
+        const strategy3: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => true),
+          recover: vi.fn()
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          vi.fn(),
+          undefined,
+          [strategy1, strategy2, strategy3]
+        )
+
+        await wrapped()
+
+        expect(strategy1.shouldHandle).toHaveBeenCalledWith(testError)
+        expect(strategy1.recover).not.toHaveBeenCalled()
+
+        expect(strategy2.shouldHandle).toHaveBeenCalledWith(testError)
+        expect(strategy2.recover).toHaveBeenCalled()
+
+        // Strategy 3 should not be checked because strategy 2 handled it
+        expect(strategy3.shouldHandle).not.toHaveBeenCalled()
+        expect(strategy3.recover).not.toHaveBeenCalled()
+      })
+
+      it('should fall back to error handler when no strategy matches', async () => {
+        const testError = new Error('test error')
+        const action = vi.fn(async () => {
+          throw testError
+        })
+        const customErrorHandler = vi.fn()
+
+        const strategy: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => false),
+          recover: vi.fn()
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          customErrorHandler,
+          undefined,
+          [strategy]
+        )
+
+        await wrapped()
+
+        expect(strategy.shouldHandle).toHaveBeenCalledWith(testError)
+        expect(strategy.recover).not.toHaveBeenCalled()
+        expect(customErrorHandler).toHaveBeenCalledWith(testError)
+      })
+
+      it('should work with synchronous actions', async () => {
+        const testError = new Error('test error')
+        const action = vi.fn(() => {
+          throw testError
+        })
+        const recoveryStrategy: ErrorRecoveryStrategy = {
+          shouldHandle: vi.fn(() => true),
+          recover: vi.fn(async () => {
+            // Recovery succeeds
+          })
+        }
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          vi.fn(),
+          undefined,
+          [recoveryStrategy]
+        )
+
+        await wrapped()
+
+        expect(recoveryStrategy.recover).toHaveBeenCalled()
+      })
+    })
+
+    describe('backward compatibility', () => {
+      it('should work without recovery strategies parameter', async () => {
+        const action = vi.fn(async () => 'success')
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(action)
+
+        const result = await wrapped()
+
+        expect(result).toBe('success')
+      })
+
+      it('should work with empty recovery strategies array', async () => {
+        const testError = new Error('test error')
+        const action = vi.fn(async () => {
+          throw testError
+        })
+        const customErrorHandler = vi.fn()
+
+        const wrapped = errorHandler.wrapWithErrorHandlingAsync(
+          action,
+          customErrorHandler,
+          undefined,
+          []
+        )
+
+        await wrapped()
+
+        expect(customErrorHandler).toHaveBeenCalledWith(testError)
+      })
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/useLoad3d.test.ts b/tests-ui/tests/composables/useLoad3d.test.ts
new file mode 100644
index 000000000..5462922db
--- /dev/null
+++ b/tests-ui/tests/composables/useLoad3d.test.ts
@@ -0,0 +1,880 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
+import Load3d from '@/extensions/core/load3d/Load3d'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
+
+vi.mock('@/extensions/core/load3d/Load3d', () => ({
+  default: vi.fn()
+}))
+
+vi.mock('@/extensions/core/load3d/Load3dUtils', () => ({
+  default: {
+    splitFilePath: vi.fn(),
+    getResourceURL: vi.fn(),
+    uploadFile: vi.fn()
+  }
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn()
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: vi.fn()
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  t: vi.fn((key) => key)
+}))
+
+describe('useLoad3d', () => {
+  let mockLoad3d: any
+  let mockNode: any
+  let mockToastStore: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    nodeToLoad3dMap.clear()
+
+    mockNode = {
+      properties: {
+        'Scene Config': {
+          showGrid: true,
+          backgroundColor: '#000000',
+          backgroundImage: ''
+        },
+        'Model Config': {
+          upDirection: 'original',
+          materialMode: 'original'
+        },
+        'Camera Config': {
+          cameraType: 'perspective',
+          fov: 75,
+          state: null
+        },
+        'Light Config': {
+          intensity: 5
+        },
+        'Resource Folder': ''
+      },
+      widgets: [
+        { name: 'width', value: 512 },
+        { name: 'height', value: 512 }
+      ],
+      graph: {
+        setDirtyCanvas: vi.fn()
+      },
+      flags: {},
+      onMouseEnter: null,
+      onMouseLeave: null,
+      onResize: null,
+      onDrawBackground: null
+    }
+
+    mockLoad3d = {
+      toggleGrid: vi.fn(),
+      setBackgroundColor: vi.fn(),
+      setBackgroundImage: vi.fn().mockResolvedValue(undefined),
+      setUpDirection: vi.fn(),
+      setMaterialMode: vi.fn(),
+      toggleCamera: vi.fn(),
+      setFOV: vi.fn(),
+      setLightIntensity: vi.fn(),
+      setCameraState: vi.fn(),
+      loadModel: vi.fn().mockResolvedValue(undefined),
+      refreshViewport: vi.fn(),
+      updateStatusMouseOnNode: vi.fn(),
+      updateStatusMouseOnScene: vi.fn(),
+      handleResize: vi.fn(),
+      toggleAnimation: vi.fn(),
+      setAnimationSpeed: vi.fn(),
+      updateSelectedAnimation: vi.fn(),
+      startRecording: vi.fn().mockResolvedValue(undefined),
+      stopRecording: vi.fn(),
+      getRecordingDuration: vi.fn().mockReturnValue(10),
+      exportRecording: vi.fn(),
+      clearRecording: vi.fn(),
+      exportModel: vi.fn().mockResolvedValue(undefined),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      remove: vi.fn(),
+      renderer: {
+        domElement: {
+          hidden: false
+        }
+      }
+    }
+
+    vi.mocked(Load3d).mockImplementation(() => mockLoad3d)
+
+    mockToastStore = {
+      addAlert: vi.fn()
+    }
+    vi.mocked(useToastStore).mockReturnValue(mockToastStore)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should initialize with default values', () => {
+      const composable = useLoad3d(mockNode)
+
+      expect(composable.sceneConfig.value).toEqual({
+        showGrid: true,
+        backgroundColor: '#000000',
+        backgroundImage: ''
+      })
+      expect(composable.modelConfig.value).toEqual({
+        upDirection: 'original',
+        materialMode: 'original'
+      })
+      expect(composable.cameraConfig.value).toEqual({
+        cameraType: 'perspective',
+        fov: 75
+      })
+      expect(composable.lightConfig.value).toEqual({
+        intensity: 5
+      })
+      expect(composable.isRecording.value).toBe(false)
+      expect(composable.hasRecording.value).toBe(false)
+      expect(composable.loading.value).toBe(false)
+    })
+
+    it('should initialize Load3d with container and node', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(Load3d).toHaveBeenCalledWith(containerRef, {
+        node: mockNode
+      })
+      expect(nodeToLoad3dMap.has(mockNode)).toBe(true)
+    })
+
+    it('should restore configurations from node', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(mockLoad3d.toggleGrid).toHaveBeenCalledWith(true)
+      expect(mockLoad3d.setBackgroundColor).toHaveBeenCalledWith('#000000')
+      expect(mockLoad3d.setUpDirection).toHaveBeenCalledWith('original')
+      expect(mockLoad3d.setMaterialMode).toHaveBeenCalledWith('original')
+      expect(mockLoad3d.toggleCamera).toHaveBeenCalledWith('perspective')
+      expect(mockLoad3d.setFOV).toHaveBeenCalledWith(75)
+      expect(mockLoad3d.setLightIntensity).toHaveBeenCalledWith(5)
+    })
+
+    it('should set up node event handlers', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(mockNode.onMouseEnter).toBeDefined()
+      expect(mockNode.onMouseLeave).toBeDefined()
+      expect(mockNode.onResize).toBeDefined()
+      expect(mockNode.onDrawBackground).toBeDefined()
+
+      // Test the handlers
+      mockNode.onMouseEnter()
+      expect(mockLoad3d.refreshViewport).toHaveBeenCalled()
+      expect(mockLoad3d.updateStatusMouseOnNode).toHaveBeenCalledWith(true)
+
+      mockNode.onMouseLeave()
+      expect(mockLoad3d.updateStatusMouseOnNode).toHaveBeenCalledWith(false)
+
+      mockNode.onResize()
+      expect(mockLoad3d.handleResize).toHaveBeenCalled()
+    })
+
+    it('should handle collapsed state', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      mockNode.flags.collapsed = true
+      mockNode.onDrawBackground()
+
+      expect(mockLoad3d.renderer.domElement.hidden).toBe(true)
+    })
+
+    it('should load model if model_file widget exists', async () => {
+      mockNode.widgets.push({ name: 'model_file', value: 'test.glb' })
+      vi.mocked(Load3dUtils.splitFilePath).mockReturnValue([
+        'subfolder',
+        'test.glb'
+      ])
+      vi.mocked(Load3dUtils.getResourceURL).mockReturnValue(
+        '/api/view/test.glb'
+      )
+      vi.mocked(api.apiURL).mockReturnValue(
+        'http://localhost/api/view/test.glb'
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(mockLoad3d.loadModel).toHaveBeenCalledWith(
+        'http://localhost/api/view/test.glb'
+      )
+    })
+
+    it('should restore camera state after loading model', async () => {
+      mockNode.widgets.push({ name: 'model_file', value: 'test.glb' })
+      mockNode.properties['Camera Config'].state = {
+        position: { x: 1, y: 2, z: 3 },
+        target: { x: 0, y: 0, z: 0 }
+      }
+      vi.mocked(Load3dUtils.splitFilePath).mockReturnValue([
+        'subfolder',
+        'test.glb'
+      ])
+      vi.mocked(Load3dUtils.getResourceURL).mockReturnValue(
+        '/api/view/test.glb'
+      )
+      vi.mocked(api.apiURL).mockReturnValue(
+        'http://localhost/api/view/test.glb'
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      expect(mockLoad3d.setCameraState).toHaveBeenCalledWith({
+        position: { x: 1, y: 2, z: 3 },
+        target: { x: 0, y: 0, z: 0 }
+      })
+    })
+
+    it('should set preview mode when no width/height widgets', async () => {
+      mockNode.widgets = []
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(composable.isPreview.value).toBe(true)
+    })
+
+    it('should handle initialization errors', async () => {
+      vi.mocked(Load3d).mockImplementationOnce(() => {
+        throw new Error('Load3d creation failed')
+      })
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'toastMessages.failedToInitializeLoad3d'
+      )
+    })
+
+    it('should handle missing container or node', async () => {
+      const composable = useLoad3d(mockNode)
+
+      await composable.initializeLoad3d(null as any)
+
+      expect(Load3d).not.toHaveBeenCalled()
+    })
+
+    it('should accept ref as parameter', () => {
+      const nodeRef = ref(mockNode)
+      const composable = useLoad3d(nodeRef)
+
+      expect(composable.sceneConfig.value.backgroundColor).toBe('#000000')
+    })
+  })
+
+  describe('waitForLoad3d', () => {
+    it('should execute callback immediately if Load3d exists', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      const callback = vi.fn()
+      composable.waitForLoad3d(callback)
+
+      expect(callback).toHaveBeenCalledWith(mockLoad3d)
+    })
+
+    it('should queue callback if Load3d does not exist', () => {
+      const composable = useLoad3d(mockNode)
+      const callback = vi.fn()
+
+      composable.waitForLoad3d(callback)
+
+      expect(callback).not.toHaveBeenCalled()
+    })
+
+    it('should execute queued callbacks after initialization', async () => {
+      const composable = useLoad3d(mockNode)
+      const callback1 = vi.fn()
+      const callback2 = vi.fn()
+
+      composable.waitForLoad3d(callback1)
+      composable.waitForLoad3d(callback2)
+
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+
+      expect(callback1).toHaveBeenCalledWith(mockLoad3d)
+      expect(callback2).toHaveBeenCalledWith(mockLoad3d)
+    })
+  })
+
+  describe('configuration watchers', () => {
+    it('should update scene config when values change', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      mockLoad3d.toggleGrid.mockClear()
+      mockLoad3d.setBackgroundColor.mockClear()
+      mockLoad3d.setBackgroundImage.mockClear()
+
+      composable.sceneConfig.value = {
+        showGrid: false,
+        backgroundColor: '#ffffff',
+        backgroundImage: 'test.jpg'
+      }
+      await nextTick()
+
+      expect(mockLoad3d.toggleGrid).toHaveBeenCalledWith(false)
+      expect(mockLoad3d.setBackgroundColor).toHaveBeenCalledWith('#ffffff')
+      expect(mockLoad3d.setBackgroundImage).toHaveBeenCalledWith('test.jpg')
+      expect(mockNode.properties['Scene Config']).toEqual({
+        showGrid: false,
+        backgroundColor: '#ffffff',
+        backgroundImage: 'test.jpg'
+      })
+    })
+
+    it('should update model config when values change', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.modelConfig.value.upDirection = '+y'
+      composable.modelConfig.value.materialMode = 'wireframe'
+      await nextTick()
+
+      expect(mockLoad3d.setUpDirection).toHaveBeenCalledWith('+y')
+      expect(mockLoad3d.setMaterialMode).toHaveBeenCalledWith('wireframe')
+      expect(mockNode.properties['Model Config']).toEqual({
+        upDirection: '+y',
+        materialMode: 'wireframe'
+      })
+    })
+
+    it('should update camera config when values change', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.cameraConfig.value.cameraType = 'orthographic'
+      composable.cameraConfig.value.fov = 90
+      await nextTick()
+
+      expect(mockLoad3d.toggleCamera).toHaveBeenCalledWith('orthographic')
+      expect(mockLoad3d.setFOV).toHaveBeenCalledWith(90)
+      expect(mockNode.properties['Camera Config']).toEqual({
+        cameraType: 'orthographic',
+        fov: 90,
+        state: null
+      })
+    })
+
+    it('should update light config when values change', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.lightConfig.value.intensity = 10
+      await nextTick()
+
+      expect(mockLoad3d.setLightIntensity).toHaveBeenCalledWith(10)
+      expect(mockNode.properties['Light Config']).toEqual({
+        intensity: 10
+      })
+    })
+  })
+
+  describe('animation controls', () => {
+    it('should toggle animation playback', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.playing.value = true
+      await nextTick()
+
+      expect(mockLoad3d.toggleAnimation).toHaveBeenCalledWith(true)
+
+      composable.playing.value = false
+      await nextTick()
+
+      expect(mockLoad3d.toggleAnimation).toHaveBeenCalledWith(false)
+    })
+
+    it('should update animation speed', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.selectedSpeed.value = 2
+      await nextTick()
+
+      expect(mockLoad3d.setAnimationSpeed).toHaveBeenCalledWith(2)
+    })
+
+    it('should update selected animation', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.selectedAnimation.value = 1
+      await nextTick()
+
+      expect(mockLoad3d.updateSelectedAnimation).toHaveBeenCalledWith(1)
+    })
+  })
+
+  describe('recording controls', () => {
+    it('should start recording', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      await composable.handleStartRecording()
+
+      expect(mockLoad3d.startRecording).toHaveBeenCalled()
+      expect(composable.isRecording.value).toBe(true)
+    })
+
+    it('should stop recording', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.handleStopRecording()
+
+      expect(mockLoad3d.stopRecording).toHaveBeenCalled()
+      expect(composable.isRecording.value).toBe(false)
+      expect(composable.recordingDuration.value).toBe(10)
+      expect(composable.hasRecording.value).toBe(true)
+    })
+
+    it('should export recording with timestamp', async () => {
+      const dateSpy = vi
+        .spyOn(Date.prototype, 'toISOString')
+        .mockReturnValue('2024-01-01T12:00:00.000Z')
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.handleExportRecording()
+
+      expect(mockLoad3d.exportRecording).toHaveBeenCalledWith(
+        '2024-01-01T12-00-00-000Z-scene-recording.mp4'
+      )
+
+      dateSpy.mockRestore()
+    })
+
+    it('should clear recording', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.hasRecording.value = true
+      composable.recordingDuration.value = 10
+
+      composable.handleClearRecording()
+
+      expect(mockLoad3d.clearRecording).toHaveBeenCalled()
+      expect(composable.hasRecording.value).toBe(false)
+      expect(composable.recordingDuration.value).toBe(0)
+    })
+  })
+
+  describe('background image handling', () => {
+    it('should upload and set background image', async () => {
+      vi.mocked(Load3dUtils.uploadFile).mockResolvedValue('uploaded-image.jpg')
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
+      await composable.handleBackgroundImageUpdate(file)
+
+      expect(Load3dUtils.uploadFile).toHaveBeenCalledWith(file, '3d')
+      expect(composable.sceneConfig.value.backgroundImage).toBe(
+        'uploaded-image.jpg'
+      )
+      expect(mockLoad3d.setBackgroundImage).toHaveBeenCalledWith(
+        'uploaded-image.jpg'
+      )
+    })
+
+    it('should use resource folder for upload', async () => {
+      mockNode.properties['Resource Folder'] = 'subfolder'
+      vi.mocked(Load3dUtils.uploadFile).mockResolvedValue('uploaded-image.jpg')
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      const file = new File([''], 'test.jpg', { type: 'image/jpeg' })
+      await composable.handleBackgroundImageUpdate(file)
+
+      expect(Load3dUtils.uploadFile).toHaveBeenCalledWith(file, '3d/subfolder')
+    })
+
+    it('should clear background image when file is null', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.sceneConfig.value.backgroundImage = 'existing.jpg'
+
+      await composable.handleBackgroundImageUpdate(null)
+
+      expect(composable.sceneConfig.value.backgroundImage).toBe('')
+      expect(mockLoad3d.setBackgroundImage).toHaveBeenCalledWith('')
+    })
+  })
+
+  describe('model export', () => {
+    it('should export model successfully', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      await composable.handleExportModel('glb')
+
+      expect(mockLoad3d.exportModel).toHaveBeenCalledWith('glb')
+    })
+
+    it('should show alert when no Load3d instance', async () => {
+      const composable = useLoad3d(mockNode)
+
+      await composable.handleExportModel('glb')
+
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'toastMessages.no3dSceneToExport'
+      )
+    })
+
+    it('should handle export errors', async () => {
+      mockLoad3d.exportModel.mockRejectedValueOnce(new Error('Export failed'))
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      await composable.handleExportModel('glb')
+
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'toastMessages.failedToExportModel'
+      )
+    })
+  })
+
+  describe('mouse interactions', () => {
+    it('should handle mouse enter on scene', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.handleMouseEnter()
+
+      expect(mockLoad3d.updateStatusMouseOnScene).toHaveBeenCalledWith(true)
+    })
+
+    it('should handle mouse leave on scene', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.handleMouseLeave()
+
+      expect(mockLoad3d.updateStatusMouseOnScene).toHaveBeenCalledWith(false)
+    })
+  })
+
+  describe('event handling', () => {
+    it('should add event listeners on initialization', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      const expectedEvents = [
+        'materialModeChange',
+        'backgroundColorChange',
+        'lightIntensityChange',
+        'fovChange',
+        'cameraTypeChange',
+        'showGridChange',
+        'upDirectionChange',
+        'backgroundImageChange',
+        'backgroundImageLoadingStart',
+        'backgroundImageLoadingEnd',
+        'modelLoadingStart',
+        'modelLoadingEnd',
+        'exportLoadingStart',
+        'exportLoadingEnd',
+        'recordingStatusChange',
+        'animationListChange'
+      ]
+
+      expectedEvents.forEach((event) => {
+        expect(mockLoad3d.addEventListener).toHaveBeenCalledWith(
+          event,
+          expect.any(Function)
+        )
+      })
+    })
+
+    it('should handle materialModeChange event', async () => {
+      let materialModeHandler: any
+
+      mockLoad3d.addEventListener.mockImplementation(
+        (event: string, handler: any) => {
+          if (event === 'materialModeChange') {
+            materialModeHandler = handler
+          }
+        }
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      materialModeHandler('wireframe')
+
+      expect(composable.modelConfig.value.materialMode).toBe('wireframe')
+    })
+
+    it('should handle loading events', async () => {
+      let modelLoadingStartHandler: any
+      let modelLoadingEndHandler: any
+
+      mockLoad3d.addEventListener.mockImplementation(
+        (event: string, handler: any) => {
+          if (event === 'modelLoadingStart') {
+            modelLoadingStartHandler = handler
+          } else if (event === 'modelLoadingEnd') {
+            modelLoadingEndHandler = handler
+          }
+        }
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      modelLoadingStartHandler()
+      expect(composable.loading.value).toBe(true)
+      expect(composable.loadingMessage.value).toBe('load3d.loadingModel')
+
+      modelLoadingEndHandler()
+      expect(composable.loading.value).toBe(false)
+      expect(composable.loadingMessage.value).toBe('')
+    })
+
+    it('should handle recordingStatusChange event', async () => {
+      let recordingStatusHandler: any
+
+      mockLoad3d.addEventListener.mockImplementation(
+        (event: string, handler: any) => {
+          if (event === 'recordingStatusChange') {
+            recordingStatusHandler = handler
+          }
+        }
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      recordingStatusHandler(false)
+
+      expect(composable.isRecording.value).toBe(false)
+      expect(composable.recordingDuration.value).toBe(10)
+      expect(composable.hasRecording.value).toBe(true)
+    })
+  })
+
+  describe('cleanup', () => {
+    it('should remove event listeners and clean up resources', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      composable.cleanup()
+
+      expect(mockLoad3d.removeEventListener).toHaveBeenCalled()
+      expect(mockLoad3d.remove).toHaveBeenCalled()
+      expect(nodeToLoad3dMap.has(mockNode)).toBe(false)
+    })
+
+    it('should handle cleanup when not initialized', () => {
+      const composable = useLoad3d(mockNode)
+
+      expect(() => composable.cleanup()).not.toThrow()
+    })
+  })
+
+  describe('getModelUrl', () => {
+    it('should handle http URLs directly', async () => {
+      mockNode.widgets.push({
+        name: 'model_file',
+        value: 'http://example.com/model.glb'
+      })
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(mockLoad3d.loadModel).toHaveBeenCalledWith(
+        'http://example.com/model.glb'
+      )
+    })
+
+    it('should construct URL for local files', async () => {
+      mockNode.widgets.push({ name: 'model_file', value: 'models/test.glb' })
+      vi.mocked(Load3dUtils.splitFilePath).mockReturnValue([
+        'models',
+        'test.glb'
+      ])
+      vi.mocked(Load3dUtils.getResourceURL).mockReturnValue(
+        '/api/view/models/test.glb'
+      )
+      vi.mocked(api.apiURL).mockReturnValue(
+        'http://localhost/api/view/models/test.glb'
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(Load3dUtils.splitFilePath).toHaveBeenCalledWith('models/test.glb')
+      expect(Load3dUtils.getResourceURL).toHaveBeenCalledWith(
+        'models',
+        'test.glb',
+        'input'
+      )
+      expect(api.apiURL).toHaveBeenCalledWith('/api/view/models/test.glb')
+      expect(mockLoad3d.loadModel).toHaveBeenCalledWith(
+        'http://localhost/api/view/models/test.glb'
+      )
+    })
+
+    it('should use output type for preview mode', async () => {
+      mockNode.widgets = [{ name: 'model_file', value: 'test.glb' }] // No width/height widgets
+      vi.mocked(Load3dUtils.splitFilePath).mockReturnValue(['', 'test.glb'])
+      vi.mocked(Load3dUtils.getResourceURL).mockReturnValue(
+        '/api/view/test.glb'
+      )
+      vi.mocked(api.apiURL).mockReturnValue(
+        'http://localhost/api/view/test.glb'
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(Load3dUtils.getResourceURL).toHaveBeenCalledWith(
+        '',
+        'test.glb',
+        'output'
+      )
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle null node ref', () => {
+      const nodeRef = ref(null)
+      const composable = useLoad3d(nodeRef)
+
+      const callback = vi.fn()
+      composable.waitForLoad3d(callback)
+
+      expect(callback).not.toHaveBeenCalled()
+    })
+
+    it('should handle missing configurations', async () => {
+      delete mockNode.properties['Scene Config']
+      delete mockNode.properties['Model Config']
+      delete mockNode.properties['Camera Config']
+      delete mockNode.properties['Light Config']
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      // Should not throw and should use defaults
+      expect(Load3d).toHaveBeenCalled()
+    })
+
+    it('should handle background image with existing config', async () => {
+      mockNode.properties['Scene Config'].backgroundImage = 'existing.jpg'
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(mockLoad3d.setBackgroundImage).toHaveBeenCalledWith('existing.jpg')
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/useLoad3dDrag.test.ts b/tests-ui/tests/composables/useLoad3dDrag.test.ts
new file mode 100644
index 000000000..284d21c23
--- /dev/null
+++ b/tests-ui/tests/composables/useLoad3dDrag.test.ts
@@ -0,0 +1,267 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn()
+}))
+
+vi.mock('@/i18n', () => ({
+  t: vi.fn((key) => key)
+}))
+
+function createMockDragEvent(
+  type: string,
+  options: { hasFiles?: boolean; files?: File[] } = {}
+): DragEvent {
+  const files = options.files || []
+  const types = options.hasFiles ? ['Files'] : []
+
+  const dataTransfer = {
+    types,
+    files,
+    dropEffect: 'none' as DataTransfer['dropEffect']
+  }
+
+  const event = {
+    type,
+    dataTransfer
+  } as unknown as DragEvent
+
+  return event
+}
+
+describe('useLoad3dDrag', () => {
+  let mockToastStore: any
+  let mockOnModelDrop: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    mockToastStore = {
+      addAlert: vi.fn()
+    }
+    vi.mocked(useToastStore).mockReturnValue(mockToastStore)
+
+    mockOnModelDrop = vi.fn()
+  })
+
+  it('should initialize with default state', () => {
+    const { isDragging, dragMessage } = useLoad3dDrag({
+      onModelDrop: mockOnModelDrop
+    })
+
+    expect(isDragging.value).toBe(false)
+    expect(dragMessage.value).toBe('')
+  })
+
+  describe('handleDragOver', () => {
+    it('should set isDragging to true when files are being dragged', () => {
+      const { isDragging, handleDragOver } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      const event = createMockDragEvent('dragover', { hasFiles: true })
+
+      handleDragOver(event)
+
+      expect(isDragging.value).toBe(true)
+      expect(event.dataTransfer!.dropEffect).toBe('copy')
+    })
+
+    it('should not set isDragging when disabled', () => {
+      const disabled = ref(true)
+      const { isDragging, handleDragOver } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop,
+        disabled
+      })
+
+      const event = createMockDragEvent('dragover', { hasFiles: true })
+
+      handleDragOver(event)
+
+      expect(isDragging.value).toBe(false)
+    })
+
+    it('should not set isDragging when no files are being dragged', () => {
+      const { isDragging, handleDragOver } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      const event = createMockDragEvent('dragover', { hasFiles: false })
+
+      handleDragOver(event)
+
+      expect(isDragging.value).toBe(false)
+    })
+  })
+
+  describe('handleDragLeave', () => {
+    it('should reset isDragging to false', () => {
+      const { isDragging, handleDragLeave, handleDragOver } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      // First set isDragging to true
+      const dragOverEvent = createMockDragEvent('dragover', { hasFiles: true })
+      handleDragOver(dragOverEvent)
+      expect(isDragging.value).toBe(true)
+
+      // Then test dragleave
+      handleDragLeave()
+      expect(isDragging.value).toBe(false)
+    })
+  })
+
+  describe('handleDrop', () => {
+    it('should call onModelDrop with valid model file', async () => {
+      const { handleDrop } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      const modelFile = new File([], 'model.glb', { type: 'model/gltf-binary' })
+      const event = createMockDragEvent('drop', {
+        hasFiles: true,
+        files: [modelFile]
+      })
+
+      await handleDrop(event)
+
+      expect(mockOnModelDrop).toHaveBeenCalledWith(modelFile)
+    })
+
+    it('should show error toast for unsupported file types', async () => {
+      const { handleDrop } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      const invalidFile = new File([], 'image.png', { type: 'image/png' })
+      const event = createMockDragEvent('drop', {
+        hasFiles: true,
+        files: [invalidFile]
+      })
+
+      await handleDrop(event)
+
+      expect(mockOnModelDrop).not.toHaveBeenCalled()
+      expect(mockToastStore.addAlert).toHaveBeenCalledWith(
+        'load3d.unsupportedFileType'
+      )
+    })
+
+    it('should not call onModelDrop when disabled', async () => {
+      const disabled = ref(true)
+      const { handleDrop } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop,
+        disabled
+      })
+
+      const modelFile = new File([], 'model.glb', { type: 'model/gltf-binary' })
+      const event = createMockDragEvent('drop', {
+        hasFiles: true,
+        files: [modelFile]
+      })
+
+      await handleDrop(event)
+
+      expect(mockOnModelDrop).not.toHaveBeenCalled()
+    })
+
+    it('should reset isDragging after drop', async () => {
+      const { isDragging, handleDrop, handleDragOver } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      // Set isDragging to true
+      const dragOverEvent = createMockDragEvent('dragover', { hasFiles: true })
+      handleDragOver(dragOverEvent)
+      expect(isDragging.value).toBe(true)
+
+      // Drop the file
+      const modelFile = new File([], 'model.glb', { type: 'model/gltf-binary' })
+      const dropEvent = createMockDragEvent('drop', {
+        hasFiles: true,
+        files: [modelFile]
+      })
+
+      await handleDrop(dropEvent)
+
+      expect(isDragging.value).toBe(false)
+    })
+
+    it('should support all valid 3D model extensions', async () => {
+      const { handleDrop } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      const extensions = ['.gltf', '.glb', '.obj', '.fbx', '.stl']
+
+      for (const ext of extensions) {
+        mockOnModelDrop.mockClear()
+
+        const modelFile = new File([], `model${ext}`)
+        const event = createMockDragEvent('drop', {
+          hasFiles: true,
+          files: [modelFile]
+        })
+
+        await handleDrop(event)
+
+        expect(mockOnModelDrop).toHaveBeenCalledWith(modelFile)
+      }
+    })
+
+    it('should handle empty file list', async () => {
+      const { handleDrop } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop
+      })
+
+      const event = createMockDragEvent('drop', {
+        hasFiles: true,
+        files: []
+      })
+
+      await handleDrop(event)
+
+      expect(mockOnModelDrop).not.toHaveBeenCalled()
+      expect(mockToastStore.addAlert).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('disabled option', () => {
+    it('should work with reactive disabled ref', () => {
+      const disabled = ref(false)
+      const { isDragging, handleDragOver } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop,
+        disabled
+      })
+
+      const event = createMockDragEvent('dragover', { hasFiles: true })
+
+      // Should work when disabled is false
+      handleDragOver(event)
+      expect(isDragging.value).toBe(true)
+
+      // Reset
+      isDragging.value = false
+
+      // Should not work when disabled is true
+      disabled.value = true
+      handleDragOver(event)
+      expect(isDragging.value).toBe(false)
+    })
+
+    it('should work with plain boolean', () => {
+      const { isDragging, handleDragOver } = useLoad3dDrag({
+        onModelDrop: mockOnModelDrop,
+        disabled: false
+      })
+
+      const event = createMockDragEvent('dragover', { hasFiles: true })
+      handleDragOver(event)
+      expect(isDragging.value).toBe(true)
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/useLoad3dViewer.test.ts b/tests-ui/tests/composables/useLoad3dViewer.test.ts
index a607186e5..589297977 100644
--- a/tests-ui/tests/composables/useLoad3dViewer.test.ts
+++ b/tests-ui/tests/composables/useLoad3dViewer.test.ts
@@ -41,20 +41,28 @@ describe('useLoad3dViewer', () => {
 
     mockNode = {
       properties: {
-        'Background Color': '#282828',
-        'Show Grid': true,
-        'Camera Type': 'perspective',
-        FOV: 75,
-        'Light Intensity': 1,
-        'Camera Info': null,
-        'Background Image': '',
-        'Up Direction': 'original',
-        'Material Mode': 'original',
-        'Edge Threshold': 85
+        'Scene Config': {
+          backgroundColor: '#282828',
+          showGrid: true,
+          backgroundImage: ''
+        },
+        'Camera Config': {
+          cameraType: 'perspective',
+          fov: 75
+        },
+        'Light Config': {
+          intensity: 1
+        },
+        'Model Config': {
+          upDirection: 'original',
+          materialMode: 'original'
+        },
+        'Resource Folder': ''
       },
       graph: {
         setDirtyCanvas: vi.fn()
-      }
+      },
+      widgets: []
     } as any
 
     mockLoad3d = {
@@ -66,7 +74,6 @@ describe('useLoad3dViewer', () => {
       setBackgroundImage: vi.fn().mockResolvedValue(undefined),
       setUpDirection: vi.fn(),
       setMaterialMode: vi.fn(),
-      setEdgeThreshold: vi.fn(),
       exportModel: vi.fn().mockResolvedValue(undefined),
       handleResize: vi.fn(),
       updateStatusMouseOnViewer: vi.fn(),
@@ -77,7 +84,8 @@ describe('useLoad3dViewer', () => {
         cameraType: 'perspective'
       }),
       forceRender: vi.fn(),
-      remove: vi.fn()
+      remove: vi.fn(),
+      setTargetSize: vi.fn()
     }
 
     mockSourceLoad3d = {
@@ -142,7 +150,6 @@ describe('useLoad3dViewer', () => {
       expect(viewer.hasBackgroundImage.value).toBe(false)
       expect(viewer.upDirection.value).toBe('original')
       expect(viewer.materialMode.value).toBe('original')
-      expect(viewer.edgeThreshold.value).toBe(85)
     })
 
     it('should initialize viewer with source Load3d state', async () => {
@@ -169,7 +176,6 @@ describe('useLoad3dViewer', () => {
       expect(viewer.fov.value).toBe(75)
       expect(viewer.upDirection.value).toBe('original')
       expect(viewer.materialMode.value).toBe('original')
-      expect(viewer.edgeThreshold.value).toBe(85)
     })
 
     it('should handle background image during initialization', async () => {
@@ -177,7 +183,7 @@ describe('useLoad3dViewer', () => {
         type: 'image',
         value: ''
       })
-      mockNode.properties['Background Image'] = 'test-image.jpg'
+      mockNode.properties['Scene Config'].backgroundImage = 'test-image.jpg'
 
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
@@ -302,18 +308,6 @@ describe('useLoad3dViewer', () => {
       expect(mockLoad3d.setMaterialMode).toHaveBeenCalledWith('wireframe')
     })
 
-    it('should update edge threshold when state changes', async () => {
-      const viewer = useLoad3dViewer(mockNode)
-      const containerRef = document.createElement('div')
-
-      await viewer.initializeViewer(containerRef, mockSourceLoad3d)
-
-      viewer.edgeThreshold.value = 90
-      await nextTick()
-
-      expect(mockLoad3d.setEdgeThreshold).toHaveBeenCalledWith(90)
-    })
-
     it('should handle watcher errors gracefully', async () => {
       mockLoad3d.setBackgroundColor.mockImplementationOnce(() => {
         throw new Error('Color update failed')
@@ -411,16 +405,20 @@ describe('useLoad3dViewer', () => {
 
       await viewer.initializeViewer(containerRef, mockSourceLoad3d)
 
-      mockNode.properties['Background Color'] = '#ff0000'
-      mockNode.properties['Show Grid'] = false
+      mockNode.properties['Scene Config'].backgroundColor = '#ff0000'
+      mockNode.properties['Scene Config'].showGrid = false
 
       viewer.restoreInitialState()
 
-      expect(mockNode.properties['Background Color']).toBe('#282828')
-      expect(mockNode.properties['Show Grid']).toBe(true)
-      expect(mockNode.properties['Camera Type']).toBe('perspective')
-      expect(mockNode.properties['FOV']).toBe(75)
-      expect(mockNode.properties['Light Intensity']).toBe(1)
+      expect(mockNode.properties['Scene Config'].backgroundColor).toBe(
+        '#282828'
+      )
+      expect(mockNode.properties['Scene Config'].showGrid).toBe(true)
+      expect(mockNode.properties['Camera Config'].cameraType).toBe(
+        'perspective'
+      )
+      expect(mockNode.properties['Camera Config'].fov).toBe(75)
+      expect(mockNode.properties['Light Config'].intensity).toBe(1)
     })
   })
 
@@ -437,8 +435,10 @@ describe('useLoad3dViewer', () => {
       const result = await viewer.applyChanges()
 
       expect(result).toBe(true)
-      expect(mockNode.properties['Background Color']).toBe('#ff0000')
-      expect(mockNode.properties['Show Grid']).toBe(false)
+      expect(mockNode.properties['Scene Config'].backgroundColor).toBe(
+        '#ff0000'
+      )
+      expect(mockNode.properties['Scene Config'].showGrid).toBe(false)
       expect(mockLoad3dService.copyLoad3dState).toHaveBeenCalledWith(
         mockLoad3d,
         mockSourceLoad3d
@@ -582,7 +582,10 @@ describe('useLoad3dViewer', () => {
 
     it('should handle orthographic camera', async () => {
       mockSourceLoad3d.getCurrentCameraType.mockReturnValue('orthographic')
-      mockSourceLoad3d.cameraManager = {} // No perspective camera
+      mockSourceLoad3d.cameraManager = {
+        perspectiveCamera: { fov: 75 }
+      }
+      delete mockNode.properties['Camera Config'].cameraType
 
       const viewer = useLoad3dViewer(mockNode)
       const containerRef = document.createElement('div')
diff --git a/tests-ui/tests/composables/useTemplateFiltering.test.ts b/tests-ui/tests/composables/useTemplateFiltering.test.ts
new file mode 100644
index 000000000..b6428704b
--- /dev/null
+++ b/tests-ui/tests/composables/useTemplateFiltering.test.ts
@@ -0,0 +1,229 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+
+describe('useTemplateFiltering', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('sorts templates by VRAM from low to high and pushes missing values last', () => {
+    const gb = (value: number) => value * 1024 ** 3
+
+    const templates = ref<TemplateInfo[]>([
+      {
+        name: 'missing-vram',
+        description: 'no vram value',
+        mediaType: 'image',
+        mediaSubtype: 'png'
+      },
+      {
+        name: 'highest-vram',
+        description: 'high usage',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        vram: gb(12)
+      },
+      {
+        name: 'mid-vram',
+        description: 'medium usage',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        vram: gb(7.5)
+      },
+      {
+        name: 'low-vram',
+        description: 'low usage',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        vram: gb(5)
+      },
+      {
+        name: 'zero-vram',
+        description: 'unknown usage',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        vram: 0
+      }
+    ])
+
+    const { sortBy, filteredTemplates } = useTemplateFiltering(templates)
+
+    sortBy.value = 'vram-low-to-high'
+
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'low-vram',
+      'mid-vram',
+      'highest-vram',
+      'missing-vram',
+      'zero-vram'
+    ])
+  })
+
+  it('filters by search text, models, tags, and license with debounce handling', async () => {
+    vi.useFakeTimers()
+
+    const templates = ref<TemplateInfo[]>([
+      {
+        name: 'api-template',
+        description: 'Enterprise API workflow for video',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        tags: ['API', 'Video'],
+        models: ['Flux'],
+        date: '2024-06-01',
+        vram: 15 * 1024 ** 3,
+        openSource: false
+      },
+      {
+        name: 'portrait-flow',
+        description: 'Portrait template tuned for SDXL',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        tags: ['Portrait'],
+        models: ['SDXL'],
+        date: '2024-05-15',
+        vram: 10 * 1024 ** 3
+      },
+      {
+        name: 'landscape-lite',
+        description: 'Lightweight landscape generator',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        tags: ['Landscape'],
+        models: ['SDXL', 'Flux'],
+        date: '2024-04-20'
+      }
+    ])
+
+    const {
+      searchQuery,
+      selectedModels,
+      selectedUseCases,
+      selectedRunsOn,
+      filteredTemplates,
+      availableModels,
+      availableUseCases,
+      availableRunsOn,
+      filteredCount,
+      totalCount,
+      removeUseCaseFilter,
+      resetFilters
+    } = useTemplateFiltering(templates)
+
+    expect(totalCount.value).toBe(3)
+    expect(availableModels.value).toEqual(['Flux', 'SDXL'])
+    expect(availableUseCases.value).toEqual([
+      'API',
+      'Landscape',
+      'Portrait',
+      'Video'
+    ])
+    expect(availableRunsOn.value).toEqual(['ComfyUI', 'External or Remote API'])
+
+    searchQuery.value = 'enterprise'
+    await nextTick()
+    await vi.runOnlyPendingTimersAsync()
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'api-template'
+    ])
+
+    selectedRunsOn.value = ['External or Remote API']
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'api-template'
+    ])
+
+    selectedModels.value = ['Flux']
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'api-template'
+    ])
+
+    selectedUseCases.value = ['Video']
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'api-template'
+    ])
+    expect(filteredCount.value).toBe(1)
+
+    removeUseCaseFilter('Video')
+    await nextTick()
+    expect(selectedUseCases.value).toHaveLength(0)
+
+    resetFilters()
+    await nextTick()
+    await vi.runOnlyPendingTimersAsync()
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'api-template',
+      'portrait-flow',
+      'landscape-lite'
+    ])
+  })
+
+  it('supports alphabetical, newest, and size-based sorting options', async () => {
+    const templates = ref<TemplateInfo[]>([
+      {
+        name: 'zeta-extended',
+        description: 'older template',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        date: '2024-01-01',
+        size: 300
+      },
+      {
+        name: 'alpha-starter',
+        description: 'new template',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        date: '2024-07-01',
+        size: 100
+      },
+      {
+        name: 'beta-pro',
+        description: 'mid template',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        date: '2024-05-01',
+        size: 200
+      }
+    ])
+
+    const { sortBy, filteredTemplates } = useTemplateFiltering(templates)
+
+    // default is 'newest'
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'alpha-starter',
+      'beta-pro',
+      'zeta-extended'
+    ])
+
+    sortBy.value = 'alphabetical'
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'alpha-starter',
+      'beta-pro',
+      'zeta-extended'
+    ])
+
+    sortBy.value = 'model-size-low-to-high'
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'alpha-starter',
+      'beta-pro',
+      'zeta-extended'
+    ])
+
+    sortBy.value = 'default'
+    await nextTick()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'zeta-extended',
+      'alpha-starter',
+      'beta-pro'
+    ])
+  })
+})
diff --git a/tests-ui/tests/composables/useTemplateWorkflows.test.ts b/tests-ui/tests/composables/useTemplateWorkflows.test.ts
index 4b98fb4f1..8a78b5a4d 100644
--- a/tests-ui/tests/composables/useTemplateWorkflows.test.ts
+++ b/tests-ui/tests/composables/useTemplateWorkflows.test.ts
@@ -31,6 +31,11 @@ vi.mock('@/scripts/app', () => ({
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
     t: vi.fn((key, fallback) => fallback || key)
+  }),
+  createI18n: () => ({
+    global: {
+      t: (key: string) => key
+    }
   })
 }))
 
diff --git a/tests-ui/tests/extensions/contextMenuExtension.test.ts b/tests-ui/tests/extensions/contextMenuExtension.test.ts
index e6766b0da..5cd9d3664 100644
--- a/tests-ui/tests/extensions/contextMenuExtension.test.ts
+++ b/tests-ui/tests/extensions/contextMenuExtension.test.ts
@@ -77,9 +77,9 @@ describe('Context Menu Extension API', () => {
       extensionStore.registerExtension(ext1)
       extensionStore.registerExtension(ext2)
 
-      const items = extensionService
+      const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat() as IContextMenuValue[]
+        .flat()
 
       expect(items).toHaveLength(3)
       expect(items[0]).toMatchObject({ content: 'Canvas Item 1' })
@@ -105,9 +105,9 @@ describe('Context Menu Extension API', () => {
 
       extensionStore.registerExtension(extension)
 
-      const items = extensionService
+      const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat() as IContextMenuValue[]
+        .flat()
 
       expect(items).toHaveLength(3)
       expect(items[0].content).toBe('Menu with Submenu')
@@ -127,13 +127,44 @@ describe('Context Menu Extension API', () => {
       extensionStore.registerExtension(canvasExtension)
       extensionStore.registerExtension(extensionWithoutCanvasMenu)
 
-      const items = extensionService
+      const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getCanvasMenuItems', mockCanvas)
-        .flat() as IContextMenuValue[]
+        .flat()
 
       expect(items).toHaveLength(1)
       expect(items[0].content).toBe('Canvas Item 1')
     })
+
+    it('should not duplicate menu items when collected multiple times', () => {
+      const extension = createCanvasMenuExtension('Test Extension', [
+        canvasMenuItem1,
+        canvasMenuItem2
+      ])
+
+      extensionStore.registerExtension(extension)
+
+      // Collect items multiple times (simulating repeated menu opens)
+      const items1: IContextMenuValue[] = extensionService
+        .invokeExtensions('getCanvasMenuItems', mockCanvas)
+        .flat()
+
+      const items2: IContextMenuValue[] = extensionService
+        .invokeExtensions('getCanvasMenuItems', mockCanvas)
+        .flat()
+
+      // Both collections should have the same items (no duplication)
+      expect(items1).toHaveLength(2)
+      expect(items2).toHaveLength(2)
+
+      // Verify items are unique by checking their content
+      const contents1 = items1.map((item) => item.content)
+      const uniqueContents1 = new Set(contents1)
+      expect(uniqueContents1.size).toBe(contents1.length)
+
+      const contents2 = items2.map((item) => item.content)
+      const uniqueContents2 = new Set(contents2)
+      expect(uniqueContents2.size).toBe(contents2.length)
+    })
   })
 
   describe('collectNodeMenuItems', () => {
@@ -147,9 +178,9 @@ describe('Context Menu Extension API', () => {
       extensionStore.registerExtension(ext1)
       extensionStore.registerExtension(ext2)
 
-      const items = extensionService
+      const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getNodeMenuItems', mockNode)
-        .flat() as IContextMenuValue[]
+        .flat()
 
       expect(items).toHaveLength(3)
       expect(items[0]).toMatchObject({ content: 'Node Item 1' })
@@ -172,9 +203,9 @@ describe('Context Menu Extension API', () => {
 
       extensionStore.registerExtension(extension)
 
-      const items = extensionService
+      const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getNodeMenuItems', mockNode)
-        .flat() as IContextMenuValue[]
+        .flat()
 
       expect(items[0].content).toBe('Node Menu with Submenu')
       expect(items[0].submenu?.options).toHaveLength(2)
@@ -189,9 +220,9 @@ describe('Context Menu Extension API', () => {
       extensionStore.registerExtension(nodeExtension)
       extensionStore.registerExtension(extensionWithoutNodeMenu)
 
-      const items = extensionService
+      const items: IContextMenuValue[] = extensionService
         .invokeExtensions('getNodeMenuItems', mockNode)
-        .flat() as IContextMenuValue[]
+        .flat()
 
       expect(items).toHaveLength(1)
       expect(items[0].content).toBe('Node Item 1')
diff --git a/tests-ui/tests/extensions/contextMenuExtensionName.test.ts b/tests-ui/tests/extensions/contextMenuExtensionName.test.ts
new file mode 100644
index 000000000..1fb0b5fd5
--- /dev/null
+++ b/tests-ui/tests/extensions/contextMenuExtensionName.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+
+/**
+ * Test that demonstrates the extension name appearing in deprecation warnings
+ */
+describe('Context Menu Extension Name in Warnings', () => {
+  it('should include extension name in deprecation warning', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    // Install compatibility layer
+    legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+    // Simulate what happens during extension setup
+    legacyMenuCompat.setCurrentExtension('MyCustomExtension')
+
+    // Extension monkey-patches the method
+    const original = LGraphCanvas.prototype.getCanvasMenuOptions
+    LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
+      const items = (original as any).apply(this, args)
+      items.push({ content: 'My Custom Menu Item', callback: () => {} })
+      return items
+    }
+
+    // Clear extension (happens after setup completes)
+    legacyMenuCompat.setCurrentExtension(null)
+
+    // Verify the warning includes the extension name
+    expect(warnSpy).toHaveBeenCalled()
+    const warningMessage = warnSpy.mock.calls[0][0]
+
+    expect(warningMessage).toContain('[DEPRECATED]')
+    expect(warningMessage).toContain('getCanvasMenuOptions')
+    expect(warningMessage).toContain('"MyCustomExtension"')
+
+    vi.restoreAllMocks()
+  })
+
+  it('should include extension name for node menu patches', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    // Install compatibility layer
+    legacyMenuCompat.install(LGraphCanvas.prototype, 'getNodeMenuOptions')
+
+    // Simulate what happens during extension setup
+    legacyMenuCompat.setCurrentExtension('AnotherExtension')
+
+    // Extension monkey-patches the method
+    const original = LGraphCanvas.prototype.getNodeMenuOptions
+    LGraphCanvas.prototype.getNodeMenuOptions = function (...args: any[]) {
+      const items = (original as any).apply(this, args)
+      items.push({ content: 'My Node Menu Item', callback: () => {} })
+      return items
+    }
+
+    // Clear extension (happens after setup completes)
+    legacyMenuCompat.setCurrentExtension(null)
+
+    // Verify the warning includes extension info
+    expect(warnSpy).toHaveBeenCalled()
+    const warningMessage = warnSpy.mock.calls[0][0]
+
+    expect(warningMessage).toContain('[DEPRECATED]')
+    expect(warningMessage).toContain('getNodeMenuOptions')
+    expect(warningMessage).toContain('"AnotherExtension"')
+
+    vi.restoreAllMocks()
+  })
+})
diff --git a/tests-ui/tests/litegraph/core/LLink.test.ts b/tests-ui/tests/litegraph/core/LLink.test.ts
index feb7c98c0..a1cdfbea0 100644
--- a/tests-ui/tests/litegraph/core/LLink.test.ts
+++ b/tests-ui/tests/litegraph/core/LLink.test.ts
@@ -1,6 +1,6 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect } from 'vitest'
 
-import { LGraph, LGraphNode, LLink } from '@/lib/litegraph/src/litegraph'
+import { LLink } from '@/lib/litegraph/src/litegraph'
 
 import { test } from './fixtures/testExtensions'
 
@@ -14,84 +14,4 @@ describe('LLink', () => {
     const link = new LLink(1, 'float', 4, 2, 5, 3)
     expect(link.serialize()).toMatchSnapshot('Basic')
   })
-
-  describe('disconnect', () => {
-    it('should clear the target input link reference when disconnecting', () => {
-      // Create a graph and nodes
-      const graph = new LGraph()
-      const sourceNode = new LGraphNode('Source')
-      const targetNode = new LGraphNode('Target')
-
-      // Add nodes to graph
-      graph.add(sourceNode)
-      graph.add(targetNode)
-
-      // Add slots
-      sourceNode.addOutput('out', 'number')
-      targetNode.addInput('in', 'number')
-
-      // Connect the nodes
-      const link = sourceNode.connect(0, targetNode, 0)
-      expect(link).toBeDefined()
-      expect(targetNode.inputs[0].link).toBe(link?.id)
-
-      // Mock setDirtyCanvas
-      const setDirtyCanvasSpy = vi.spyOn(targetNode, 'setDirtyCanvas')
-
-      // Disconnect the link
-      link?.disconnect(graph)
-
-      // Verify the target input's link reference is cleared
-      expect(targetNode.inputs[0].link).toBeNull()
-
-      // Verify setDirtyCanvas was called
-      expect(setDirtyCanvasSpy).toHaveBeenCalledWith(true, false)
-    })
-
-    it('should handle disconnecting when target node is not found', () => {
-      // Create a link with invalid target
-      const graph = new LGraph()
-      const link = new LLink(1, 'number', 1, 0, 999, 0) // Invalid target id
-
-      // Should not throw when disconnecting
-      expect(() => link.disconnect(graph)).not.toThrow()
-    })
-
-    it('should only clear link reference if it matches the current link id', () => {
-      // Create a graph and nodes
-      const graph = new LGraph()
-      const sourceNode1 = new LGraphNode('Source1')
-      const sourceNode2 = new LGraphNode('Source2')
-      const targetNode = new LGraphNode('Target')
-
-      // Add nodes to graph
-      graph.add(sourceNode1)
-      graph.add(sourceNode2)
-      graph.add(targetNode)
-
-      // Add slots
-      sourceNode1.addOutput('out', 'number')
-      sourceNode2.addOutput('out', 'number')
-      targetNode.addInput('in', 'number')
-
-      // Create first connection
-      const link1 = sourceNode1.connect(0, targetNode, 0)
-      expect(link1).toBeDefined()
-
-      // Disconnect first connection
-      targetNode.disconnectInput(0)
-
-      // Create second connection
-      const link2 = sourceNode2.connect(0, targetNode, 0)
-      expect(link2).toBeDefined()
-      expect(targetNode.inputs[0].link).toBe(link2?.id)
-
-      // Try to disconnect the first link (which is already disconnected)
-      // It should not affect the current connection
-      link1?.disconnect(graph)
-
-      // The input should still have the second link
-      expect(targetNode.inputs[0].link).toBe(link2?.id)
-    })
-  })
 })
diff --git a/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap b/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
index 18cc5c713..1a92319bb 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/LGraph.test.ts.snap
@@ -274,6 +274,7 @@ LGraph {
   "filter": undefined,
   "fixedtime": 0,
   "fixedtime_lapse": 0.01,
+  "floatingLinksInternal": Map {},
   "globaltime": 0,
   "id": "b4e984f1-b421-4d24-b8b4-ff895793af13",
   "iteration": 0,
@@ -284,6 +285,7 @@ LGraph {
   "nodes_executedAction": [],
   "nodes_executing": [],
   "onTrigger": undefined,
+  "reroutesInternal": Map {},
   "revision": 0,
   "runningtime": 0,
   "starttime": 0,
diff --git a/tests-ui/tests/litegraph/core/contextMenuCompat.test.ts b/tests-ui/tests/litegraph/core/contextMenuCompat.test.ts
new file mode 100644
index 000000000..623082c68
--- /dev/null
+++ b/tests-ui/tests/litegraph/core/contextMenuCompat.test.ts
@@ -0,0 +1,346 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+
+describe('contextMenuCompat', () => {
+  let originalGetCanvasMenuOptions: typeof LGraphCanvas.prototype.getCanvasMenuOptions
+  let mockCanvas: LGraphCanvas
+
+  beforeEach(() => {
+    // Save original method
+    originalGetCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
+
+    // Create mock canvas
+    mockCanvas = {
+      constructor: {
+        prototype: LGraphCanvas.prototype
+      }
+    } as unknown as LGraphCanvas
+
+    // Clear console warnings
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    // Restore original method
+    LGraphCanvas.prototype.getCanvasMenuOptions = originalGetCanvasMenuOptions
+    vi.restoreAllMocks()
+  })
+
+  describe('install', () => {
+    it('should install compatibility layer on prototype', () => {
+      const methodName = 'getCanvasMenuOptions'
+
+      // Install compatibility layer
+      legacyMenuCompat.install(LGraphCanvas.prototype, methodName)
+
+      // The method should still be callable
+      expect(typeof LGraphCanvas.prototype.getCanvasMenuOptions).toBe(
+        'function'
+      )
+    })
+
+    it('should detect monkey patches and warn', () => {
+      const methodName = 'getCanvasMenuOptions'
+      const warnSpy = vi.spyOn(console, 'warn')
+
+      // Install compatibility layer
+      legacyMenuCompat.install(LGraphCanvas.prototype, methodName)
+
+      // Set current extension before monkey-patching
+      legacyMenuCompat.setCurrentExtension('Test Extension')
+
+      // Simulate extension monkey-patching
+      const original = LGraphCanvas.prototype.getCanvasMenuOptions
+      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
+        const items = (original as any).apply(this, args)
+        items.push({ content: 'Custom Item', callback: () => {} })
+        return items
+      }
+
+      // Should have logged a warning with extension name
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('[DEPRECATED]'),
+        expect.any(String),
+        expect.any(String)
+      )
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('"Test Extension"'),
+        expect.any(String),
+        expect.any(String)
+      )
+
+      // Clear extension
+      legacyMenuCompat.setCurrentExtension(null)
+    })
+
+    it('should only warn once per unique function', () => {
+      const methodName = 'getCanvasMenuOptions'
+      const warnSpy = vi.spyOn(console, 'warn')
+
+      legacyMenuCompat.install(LGraphCanvas.prototype, methodName)
+      legacyMenuCompat.setCurrentExtension('test.extension')
+
+      const patchFunction = function (this: LGraphCanvas, ...args: any[]) {
+        const items = (originalGetCanvasMenuOptions as any).apply(this, args)
+        items.push({ content: 'Custom', callback: () => {} })
+        return items
+      }
+
+      // Patch twice with same function
+      LGraphCanvas.prototype.getCanvasMenuOptions = patchFunction
+      LGraphCanvas.prototype.getCanvasMenuOptions = patchFunction
+
+      // Should only warn once
+      expect(warnSpy).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('extractLegacyItems', () => {
+    beforeEach(() => {
+      // Setup a mock original method
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        return [
+          { content: 'Item 1', callback: () => {} },
+          { content: 'Item 2', callback: () => {} }
+        ]
+      }
+
+      // Install compatibility layer
+      legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+    })
+
+    it('should extract items added by monkey patches', () => {
+      // Monkey-patch to add items
+      const original = LGraphCanvas.prototype.getCanvasMenuOptions
+      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
+        const items = (original as any).apply(this, args)
+        items.push({ content: 'Custom Item 1', callback: () => {} })
+        items.push({ content: 'Custom Item 2', callback: () => {} })
+        return items
+      }
+
+      // Extract legacy items
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      expect(legacyItems).toHaveLength(2)
+      expect(legacyItems[0]).toMatchObject({ content: 'Custom Item 1' })
+      expect(legacyItems[1]).toMatchObject({ content: 'Custom Item 2' })
+    })
+
+    it('should return empty array when no items added', () => {
+      // No monkey-patching, so no extra items
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      expect(legacyItems).toHaveLength(0)
+    })
+
+    it('should return empty array when patched method returns same count', () => {
+      // Monkey-patch that replaces items but keeps same count
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        return [
+          { content: 'Replaced 1', callback: () => {} },
+          { content: 'Replaced 2', callback: () => {} }
+        ]
+      }
+
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      expect(legacyItems).toHaveLength(0)
+    })
+
+    it('should handle errors gracefully', () => {
+      const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      // Monkey-patch that throws error
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        throw new Error('Test error')
+      }
+
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      expect(legacyItems).toHaveLength(0)
+      expect(errorSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Failed to extract legacy items'),
+        expect.any(Error)
+      )
+    })
+  })
+
+  describe('integration', () => {
+    it('should work with multiple extensions patching', () => {
+      // Setup base method
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        return [{ content: 'Base Item', callback: () => {} }]
+      }
+
+      legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+      // First extension patches
+      const original1 = LGraphCanvas.prototype.getCanvasMenuOptions
+      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
+        const items = (original1 as any).apply(this, args)
+        items.push({ content: 'Extension 1 Item', callback: () => {} })
+        return items
+      }
+
+      // Second extension patches
+      const original2 = LGraphCanvas.prototype.getCanvasMenuOptions
+      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
+        const items = (original2 as any).apply(this, args)
+        items.push({ content: 'Extension 2 Item', callback: () => {} })
+        return items
+      }
+
+      // Extract legacy items
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      // Should extract both items added by extensions
+      expect(legacyItems).toHaveLength(2)
+      expect(legacyItems[0]).toMatchObject({ content: 'Extension 1 Item' })
+      expect(legacyItems[1]).toMatchObject({ content: 'Extension 2 Item' })
+    })
+
+    it('should extract legacy items only once even when called multiple times', () => {
+      // Setup base method
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        return [
+          { content: 'Base Item 1', callback: () => {} },
+          { content: 'Base Item 2', callback: () => {} }
+        ]
+      }
+
+      legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+      // Simulate legacy extension monkey-patching the prototype
+      const original = LGraphCanvas.prototype.getCanvasMenuOptions
+      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
+        const items = (original as any).apply(this, args)
+        items.push({ content: 'Legacy Item 1', callback: () => {} })
+        items.push({ content: 'Legacy Item 2', callback: () => {} })
+        return items
+      }
+
+      // Extract legacy items multiple times (simulating repeated menu opens)
+      const legacyItems1 = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+      const legacyItems2 = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+      const legacyItems3 = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      // Each extraction should return the same items (no accumulation)
+      expect(legacyItems1).toHaveLength(2)
+      expect(legacyItems2).toHaveLength(2)
+      expect(legacyItems3).toHaveLength(2)
+
+      // Verify items are the expected ones
+      expect(legacyItems1[0]).toMatchObject({ content: 'Legacy Item 1' })
+      expect(legacyItems1[1]).toMatchObject({ content: 'Legacy Item 2' })
+
+      expect(legacyItems2[0]).toMatchObject({ content: 'Legacy Item 1' })
+      expect(legacyItems2[1]).toMatchObject({ content: 'Legacy Item 2' })
+
+      expect(legacyItems3[0]).toMatchObject({ content: 'Legacy Item 1' })
+      expect(legacyItems3[1]).toMatchObject({ content: 'Legacy Item 2' })
+    })
+
+    it('should not extract items from registered wrapper methods', () => {
+      // Setup base method
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        return [{ content: 'Base Item', callback: () => {} }]
+      }
+
+      legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+      // Create a wrapper that adds new API items (simulating useContextMenuTranslation)
+      const originalMethod = LGraphCanvas.prototype.getCanvasMenuOptions
+      const wrapperMethod = function (this: LGraphCanvas) {
+        const items = (originalMethod as any).apply(this, [])
+        // Add new API items
+        items.push({ content: 'New API Item 1', callback: () => {} })
+        items.push({ content: 'New API Item 2', callback: () => {} })
+        return items
+      }
+
+      // Set the wrapper as the current method
+      LGraphCanvas.prototype.getCanvasMenuOptions = wrapperMethod
+
+      // Register the wrapper so it's not treated as a legacy patch
+      legacyMenuCompat.registerWrapper(
+        'getCanvasMenuOptions',
+        wrapperMethod,
+        originalMethod,
+        LGraphCanvas.prototype // Wrapper is installed
+      )
+
+      // Extract legacy items - should return empty because current method is a registered wrapper
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      expect(legacyItems).toHaveLength(0)
+    })
+
+    it('should extract legacy items even when a wrapper is registered but not active', () => {
+      // Setup base method
+      LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+        return [{ content: 'Base Item', callback: () => {} }]
+      }
+
+      legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+      // Register a wrapper (but don't set it as the current method)
+      const originalMethod = LGraphCanvas.prototype.getCanvasMenuOptions
+      const wrapperMethod = function () {
+        return [{ content: 'Wrapper Item', callback: () => {} }]
+      }
+      legacyMenuCompat.registerWrapper(
+        'getCanvasMenuOptions',
+        wrapperMethod,
+        originalMethod
+        // NOT passing prototype, so it won't be marked as installed
+      )
+
+      // Monkey-patch with a different function (legacy extension)
+      const original = LGraphCanvas.prototype.getCanvasMenuOptions
+      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
+        const items = (original as any).apply(this, args)
+        items.push({ content: 'Legacy Item', callback: () => {} })
+        return items
+      }
+
+      // Extract legacy items - should return the legacy item because current method is NOT the wrapper
+      const legacyItems = legacyMenuCompat.extractLegacyItems(
+        'getCanvasMenuOptions',
+        mockCanvas
+      )
+
+      expect(legacyItems).toHaveLength(1)
+      expect(legacyItems[0]).toMatchObject({ content: 'Legacy Item' })
+    })
+  })
+})
diff --git a/tests-ui/tests/litegraph/subgraph/SubgraphIO.test.ts b/tests-ui/tests/litegraph/subgraph/SubgraphIO.test.ts
index a7ad49913..25f2ecd10 100644
--- a/tests-ui/tests/litegraph/subgraph/SubgraphIO.test.ts
+++ b/tests-ui/tests/litegraph/subgraph/SubgraphIO.test.ts
@@ -2,6 +2,8 @@
 import { describe, expect, it } from 'vitest'
 
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { ToInputFromIoNodeLink } from '@/lib/litegraph/src/canvas/ToInputFromIoNodeLink'
+import { LinkDirection } from '@/lib/litegraph/src//types/globalEnums'
 
 import { subgraphTest } from './fixtures/subgraphFixtures'
 import {
@@ -9,7 +11,7 @@ import {
   createTestSubgraphNode
 } from './fixtures/subgraphHelpers'
 
-describe.skip('SubgraphIO - Input Slot Dual-Nature Behavior', () => {
+describe('SubgraphIO - Input Slot Dual-Nature Behavior', () => {
   subgraphTest(
     'input accepts external connections from parent graph',
     ({ subgraphWithNode }) => {
@@ -77,6 +79,31 @@ describe.skip('SubgraphIO - Input Slot Dual-Nature Behavior', () => {
     }
   )
 
+  subgraphTest('handles link disconnection', ({ subgraphWithNode }) => {
+    const { subgraph } = subgraphWithNode
+    const internalNode = new LGraphNode('External Source')
+    internalNode.addInput('in', '*')
+    internalNode.onConnectionsChange = vi.fn()
+    subgraph.add(internalNode)
+
+    const link = subgraph.inputNode.slots[0].connect(
+      internalNode.inputs[0],
+      internalNode
+    )
+    new ToInputFromIoNodeLink(
+      subgraph,
+      subgraph.inputNode,
+      subgraph.inputNode.slots[0],
+      undefined,
+      LinkDirection.CENTER,
+      link
+    ).disconnect()
+
+    expect(internalNode.inputs[0].link).toBeNull()
+    expect(subgraph.inputNode.slots[0].linkIds.length).toBe(0)
+    expect(internalNode.onConnectionsChange).toHaveBeenCalled()
+  })
+
   subgraphTest(
     'handles slot renaming with active connections',
     ({ subgraphWithNode }) => {
@@ -103,7 +130,7 @@ describe.skip('SubgraphIO - Input Slot Dual-Nature Behavior', () => {
   )
 })
 
-describe.skip('SubgraphIO - Output Slot Dual-Nature Behavior', () => {
+describe('SubgraphIO - Output Slot Dual-Nature Behavior', () => {
   subgraphTest(
     'output provides connections to parent graph',
     ({ subgraphWithNode }) => {
@@ -199,7 +226,7 @@ describe.skip('SubgraphIO - Output Slot Dual-Nature Behavior', () => {
   )
 })
 
-describe.skip('SubgraphIO - Boundary Connection Management', () => {
+describe('SubgraphIO - Boundary Connection Management', () => {
   subgraphTest(
     'verifies cross-boundary link resolution',
     ({ complexSubgraph }) => {
@@ -309,7 +336,7 @@ describe.skip('SubgraphIO - Boundary Connection Management', () => {
   )
 })
 
-describe.skip('SubgraphIO - Advanced Scenarios', () => {
+describe('SubgraphIO - Advanced Scenarios', () => {
   it('handles multiple inputs and outputs with complex connections', () => {
     const subgraph = createTestSubgraph({
       name: 'Complex IO Test',
@@ -399,7 +426,7 @@ describe.skip('SubgraphIO - Advanced Scenarios', () => {
   })
 })
 
-describe.skip('SubgraphIO - Empty Slot Connection', () => {
+describe('SubgraphIO - Empty Slot Connection', () => {
   subgraphTest(
     'creates new input and connects when dragging from empty slot inside subgraph',
     ({ subgraphWithNode }) => {
diff --git a/tests-ui/tests/maskeditor.test.ts b/tests-ui/tests/maskeditor.test.ts
index d3fad6e33..448c2cb42 100644
--- a/tests-ui/tests/maskeditor.test.ts
+++ b/tests-ui/tests/maskeditor.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { imageLayerFilenamesIfApplicable } from '@/extensions/core/maskEditorLayerFilenames'
+import { imageLayerFilenamesIfApplicable } from '@/extensions/core/maskeditor/utils/maskEditorLayerFilenames'
 
 describe('imageLayerFilenamesIfApplicable', () => {
   // In case the naming scheme changes, this test will ensure CI fails if developers forget to support the old naming scheme. (Causing MaskEditor to lose layer data for previously-saved images.)
diff --git a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
new file mode 100644
index 000000000..b7bff37a5
--- /dev/null
+++ b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
@@ -0,0 +1,213 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SubscriptionPanel from '@/platform/cloud/subscription/components/SubscriptionPanel.vue'
+
+// Mock composables
+const mockSubscriptionData = {
+  isActiveSubscription: false,
+  isCancelled: false,
+  formattedRenewalDate: '2024-12-31',
+  formattedEndDate: '2024-12-31',
+  formattedMonthlyPrice: '$9.99',
+  manageSubscription: vi.fn(),
+  handleInvoiceHistory: vi.fn()
+}
+
+const mockCreditsData = {
+  totalCredits: '10.00',
+  monthlyBonusCredits: '5.00',
+  prepaidCredits: '5.00',
+  isLoadingBalance: false
+}
+
+const mockActionsData = {
+  isLoadingSupport: false,
+  refreshTooltip: 'Refreshes on 2024-12-31',
+  handleAddApiCredits: vi.fn(),
+  handleMessageSupport: vi.fn(),
+  handleRefresh: vi.fn(),
+  handleLearnMoreClick: vi.fn()
+}
+
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: () => mockSubscriptionData
+}))
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useSubscriptionCredits',
+  () => ({
+    useSubscriptionCredits: () => mockCreditsData
+  })
+)
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useSubscriptionActions',
+  () => ({
+    useSubscriptionActions: () => mockActionsData
+  })
+)
+
+// Create i18n instance for testing
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      subscription: {
+        title: 'Subscription',
+        perMonth: '/ month',
+        subscribeNow: 'Subscribe Now',
+        manageSubscription: 'Manage Subscription',
+        partnerNodesBalance: 'Partner Nodes Balance',
+        partnerNodesDescription: 'Credits for partner nodes',
+        totalCredits: 'Total Credits',
+        monthlyBonusDescription: 'Monthly bonus',
+        prepaidDescription: 'Prepaid credits',
+        monthlyCreditsRollover: 'Monthly credits rollover info',
+        prepaidCreditsInfo: 'Prepaid credits info',
+        viewUsageHistory: 'View Usage History',
+        addCredits: 'Add Credits',
+        yourPlanIncludes: 'Your plan includes',
+        learnMore: 'Learn More',
+        messageSupport: 'Message Support',
+        invoiceHistory: 'Invoice History',
+        renewsDate: 'Renews {date}',
+        expiresDate: 'Expires {date}'
+      }
+    }
+  }
+})
+
+function createWrapper(overrides = {}) {
+  return mount(SubscriptionPanel, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
+      stubs: {
+        CloudBadge: true,
+        SubscribeButton: true,
+        SubscriptionBenefits: true,
+        Button: {
+          template:
+            '<button @click="$emit(\'click\')" :disabled="loading" :data-testid="label" :data-icon="icon">{{ label }}</button>',
+          props: [
+            'loading',
+            'label',
+            'icon',
+            'text',
+            'severity',
+            'size',
+            'iconPos',
+            'pt'
+          ],
+          emits: ['click']
+        },
+        Skeleton: {
+          template: '<div class="skeleton"></div>'
+        }
+      }
+    },
+    ...overrides
+  })
+}
+
+describe('SubscriptionPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('subscription state functionality', () => {
+    it('shows correct UI for active subscription', () => {
+      mockSubscriptionData.isActiveSubscription = true
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Manage Subscription')
+      expect(wrapper.text()).toContain('Add Credits')
+    })
+
+    it('shows correct UI for inactive subscription', () => {
+      mockSubscriptionData.isActiveSubscription = false
+      const wrapper = createWrapper()
+      expect(wrapper.findComponent({ name: 'SubscribeButton' }).exists()).toBe(
+        true
+      )
+      expect(wrapper.text()).not.toContain('Manage Subscription')
+      expect(wrapper.text()).not.toContain('Add Credits')
+    })
+
+    it('shows renewal date for active non-cancelled subscription', () => {
+      mockSubscriptionData.isActiveSubscription = true
+      mockSubscriptionData.isCancelled = false
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Renews 2024-12-31')
+    })
+
+    it('shows expiry date for cancelled subscription', () => {
+      mockSubscriptionData.isActiveSubscription = true
+      mockSubscriptionData.isCancelled = true
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Expires 2024-12-31')
+    })
+  })
+
+  describe('credit display functionality', () => {
+    it('displays dynamic credit values correctly', () => {
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('$10.00') // totalCredits
+      expect(wrapper.text()).toContain('$5.00') // both monthlyBonus and prepaid
+    })
+
+    it('shows loading skeleton when fetching balance', () => {
+      mockCreditsData.isLoadingBalance = true
+      const wrapper = createWrapper()
+      expect(wrapper.findAll('.skeleton').length).toBeGreaterThan(0)
+    })
+
+    it('hides skeleton when balance loaded', () => {
+      mockCreditsData.isLoadingBalance = false
+      const wrapper = createWrapper()
+      expect(wrapper.findAll('.skeleton').length).toBe(0)
+    })
+  })
+
+  describe('action buttons', () => {
+    it('should call handleLearnMoreClick when learn more is clicked', async () => {
+      const wrapper = createWrapper()
+      const learnMoreButton = wrapper.find('[data-testid="Learn More"]')
+      await learnMoreButton.trigger('click')
+      expect(mockActionsData.handleLearnMoreClick).toHaveBeenCalledOnce()
+    })
+
+    it('should call handleMessageSupport when message support is clicked', async () => {
+      const wrapper = createWrapper()
+      const supportButton = wrapper.find('[data-testid="Message Support"]')
+      await supportButton.trigger('click')
+      expect(mockActionsData.handleMessageSupport).toHaveBeenCalledOnce()
+    })
+
+    it('should call handleRefresh when refresh button is clicked', async () => {
+      const wrapper = createWrapper()
+      // Find the refresh button by icon
+      const refreshButton = wrapper.find('[data-icon="pi pi-sync"]')
+      await refreshButton.trigger('click')
+      expect(mockActionsData.handleRefresh).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('loading states', () => {
+    it('should show loading state on support button when loading', () => {
+      mockActionsData.isLoadingSupport = true
+      const wrapper = createWrapper()
+      const supportButton = wrapper.find('[data-testid="Message Support"]')
+      expect(supportButton.attributes('disabled')).toBeDefined()
+    })
+
+    it('should show loading state on refresh button when loading balance', () => {
+      mockCreditsData.isLoadingBalance = true
+      const wrapper = createWrapper()
+      const refreshButton = wrapper.find('[data-icon="pi pi-sync"]')
+      expect(refreshButton.attributes('disabled')).toBeDefined()
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts
new file mode 100644
index 000000000..a4c9db49a
--- /dev/null
+++ b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts
@@ -0,0 +1,141 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+
+// Mock dependencies
+const mockFetchBalance = vi.fn()
+const mockFetchStatus = vi.fn()
+const mockShowTopUpCreditsDialog = vi.fn()
+const mockExecute = vi.fn()
+const mockT = vi.fn((key: string) => {
+  if (key === 'subscription.nextBillingCycle') return 'next billing cycle'
+  return key
+})
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue-i18n')>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: mockT
+    })
+  }
+})
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: () => ({
+    fetchBalance: mockFetchBalance
+  })
+}))
+
+const mockFormattedRenewalDate = { value: '2024-12-31' }
+
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: () => ({
+    fetchStatus: mockFetchStatus,
+    formattedRenewalDate: mockFormattedRenewalDate
+  })
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showTopUpCreditsDialog: mockShowTopUpCreditsDialog
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: mockExecute
+  })
+}))
+
+// Mock window.open
+const mockOpen = vi.fn()
+Object.defineProperty(window, 'open', {
+  writable: true,
+  value: mockOpen
+})
+
+describe('useSubscriptionActions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFormattedRenewalDate.value = '2024-12-31'
+  })
+
+  describe('refreshTooltip', () => {
+    it('should format tooltip with renewal date', () => {
+      const { refreshTooltip } = useSubscriptionActions()
+      expect(refreshTooltip.value).toBe('Refreshes on 2024-12-31')
+    })
+
+    it('should use fallback text when no renewal date', () => {
+      mockFormattedRenewalDate.value = ''
+      const { refreshTooltip } = useSubscriptionActions()
+      expect(refreshTooltip.value).toBe('Refreshes on next billing cycle')
+      expect(mockT).toHaveBeenCalledWith('subscription.nextBillingCycle')
+    })
+  })
+
+  describe('handleAddApiCredits', () => {
+    it('should call showTopUpCreditsDialog', () => {
+      const { handleAddApiCredits } = useSubscriptionActions()
+      handleAddApiCredits()
+      expect(mockShowTopUpCreditsDialog).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('handleMessageSupport', () => {
+    it('should execute support command and manage loading state', async () => {
+      const { handleMessageSupport, isLoadingSupport } =
+        useSubscriptionActions()
+
+      expect(isLoadingSupport.value).toBe(false)
+
+      const promise = handleMessageSupport()
+      expect(isLoadingSupport.value).toBe(true)
+
+      await promise
+      expect(mockExecute).toHaveBeenCalledWith('Comfy.ContactSupport')
+      expect(isLoadingSupport.value).toBe(false)
+    })
+
+    it('should handle errors gracefully', async () => {
+      mockExecute.mockRejectedValueOnce(new Error('Command failed'))
+      const { handleMessageSupport, isLoadingSupport } =
+        useSubscriptionActions()
+
+      await handleMessageSupport()
+      expect(isLoadingSupport.value).toBe(false)
+    })
+  })
+
+  describe('handleRefresh', () => {
+    it('should call both fetchBalance and fetchStatus', async () => {
+      const { handleRefresh } = useSubscriptionActions()
+      await handleRefresh()
+
+      expect(mockFetchBalance).toHaveBeenCalledOnce()
+      expect(mockFetchStatus).toHaveBeenCalledOnce()
+    })
+
+    it('should handle errors gracefully', async () => {
+      mockFetchBalance.mockRejectedValueOnce(new Error('Fetch failed'))
+      const { handleRefresh } = useSubscriptionActions()
+
+      // Should not throw
+      await expect(handleRefresh()).resolves.toBeUndefined()
+    })
+  })
+
+  describe('handleLearnMoreClick', () => {
+    it('should open learn more URL', () => {
+      const { handleLearnMoreClick } = useSubscriptionActions()
+      handleLearnMoreClick()
+
+      expect(mockOpen).toHaveBeenCalledWith(
+        'https://docs.comfy.org/get_started/cloud',
+        '_blank'
+      )
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
new file mode 100644
index 000000000..1d64129a4
--- /dev/null
+++ b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
@@ -0,0 +1,146 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+// Mock Firebase Auth and related modules
+vi.mock('vuefire', () => ({
+  useFirebaseAuth: vi.fn(() => ({
+    onAuthStateChanged: vi.fn(),
+    setPersistence: vi.fn()
+  }))
+}))
+
+vi.mock('firebase/auth', () => ({
+  onAuthStateChanged: vi.fn(() => {
+    // Mock the callback to be called immediately for testing
+    return vi.fn()
+  }),
+  onIdTokenChanged: vi.fn(),
+  setPersistence: vi.fn().mockResolvedValue(undefined),
+  browserLocalPersistence: {},
+  GoogleAuthProvider: class {
+    addScope = vi.fn()
+    setCustomParameters = vi.fn()
+  },
+  GithubAuthProvider: class {
+    addScope = vi.fn()
+    setCustomParameters = vi.fn()
+  }
+}))
+
+// Mock other dependencies
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    track: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+  useToastStore: () => ({
+    add: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/apiKeyAuthStore', () => ({
+  useApiKeyAuthStore: () => ({
+    headers: {}
+  })
+}))
+
+// Mock formatMetronomeCurrency
+vi.mock('@/utils/formatUtil', () => ({
+  formatMetronomeCurrency: vi.fn((micros: number) => {
+    // Simple mock that converts micros to dollars
+    return (micros / 1000000).toFixed(2)
+  })
+}))
+
+describe('useSubscriptionCredits', () => {
+  let authStore: ReturnType<typeof useFirebaseAuthStore>
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    authStore = useFirebaseAuthStore()
+    vi.clearAllMocks()
+  })
+
+  describe('totalCredits', () => {
+    it('should return "0.00" when balance is null', () => {
+      authStore.balance = null
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('0.00')
+    })
+
+    it('should return "0.00" when amount_micros is missing', () => {
+      authStore.balance = {} as any
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('0.00')
+    })
+
+    it('should format amount_micros correctly', () => {
+      authStore.balance = { amount_micros: 5000000 } as any
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('5.00')
+    })
+
+    it('should handle formatting errors gracefully', async () => {
+      const mockFormatMetronomeCurrency = vi.mocked(
+        await import('@/utils/formatUtil')
+      ).formatMetronomeCurrency
+      mockFormatMetronomeCurrency.mockImplementationOnce(() => {
+        throw new Error('Formatting error')
+      })
+
+      authStore.balance = { amount_micros: 5000000 } as any
+      const { totalCredits } = useSubscriptionCredits()
+      expect(totalCredits.value).toBe('0.00')
+    })
+  })
+
+  describe('monthlyBonusCredits', () => {
+    it('should return "0.00" when cloud_credit_balance_micros is missing', () => {
+      authStore.balance = {} as any
+      const { monthlyBonusCredits } = useSubscriptionCredits()
+      expect(monthlyBonusCredits.value).toBe('0.00')
+    })
+
+    it('should format cloud_credit_balance_micros correctly', () => {
+      authStore.balance = { cloud_credit_balance_micros: 2500000 } as any
+      const { monthlyBonusCredits } = useSubscriptionCredits()
+      expect(monthlyBonusCredits.value).toBe('2.50')
+    })
+  })
+
+  describe('prepaidCredits', () => {
+    it('should return "0.00" when prepaid_balance_micros is missing', () => {
+      authStore.balance = {} as any
+      const { prepaidCredits } = useSubscriptionCredits()
+      expect(prepaidCredits.value).toBe('0.00')
+    })
+
+    it('should format prepaid_balance_micros correctly', () => {
+      authStore.balance = { prepaid_balance_micros: 7500000 } as any
+      const { prepaidCredits } = useSubscriptionCredits()
+      expect(prepaidCredits.value).toBe('7.50')
+    })
+  })
+
+  describe('isLoadingBalance', () => {
+    it('should reflect authStore.isFetchingBalance', () => {
+      authStore.isFetchingBalance = true
+      const { isLoadingBalance } = useSubscriptionCredits()
+      expect(isLoadingBalance.value).toBe(true)
+
+      authStore.isFetchingBalance = false
+      expect(isLoadingBalance.value).toBe(false)
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts b/tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts
new file mode 100644
index 000000000..ec356cfc3
--- /dev/null
+++ b/tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts
@@ -0,0 +1,325 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+
+// Create mocks
+const mockIsLoggedIn = ref(false)
+const mockReportError = vi.fn()
+const mockAccessBillingPortal = vi.fn()
+const mockShowSubscriptionRequiredDialog = vi.fn()
+const mockGetAuthHeader = vi.fn(() =>
+  Promise.resolve({ Authorization: 'Bearer test-token' })
+)
+
+// Mock dependencies
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: vi.fn(() => ({
+    isLoggedIn: mockIsLoggedIn
+  }))
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: vi.fn(() => null)
+}))
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: vi.fn(() => ({
+    reportError: mockReportError,
+    accessBillingPortal: mockAccessBillingPortal
+  }))
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: vi.fn(() => ({
+    wrapWithErrorHandlingAsync: vi.fn(
+      (fn, errorHandler) =>
+        async (...args: any[]) => {
+          try {
+            return await fn(...args)
+          } catch (error) {
+            if (errorHandler) {
+              errorHandler(error)
+            }
+            throw error
+          }
+        }
+    )
+  }))
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => ({
+    showSubscriptionRequiredDialog: mockShowSubscriptionRequiredDialog
+  }))
+}))
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: vi.fn(() => ({
+    getAuthHeader: mockGetAuthHeader
+  })),
+  FirebaseAuthStoreError: class extends Error {}
+}))
+
+// Mock fetch
+global.fetch = vi.fn()
+
+describe('useSubscription', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsLoggedIn.value = false
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        is_active: false,
+        subscription_id: '',
+        renewal_date: ''
+      })
+    } as Response)
+  })
+
+  describe('computed properties', () => {
+    it('should compute isActiveSubscription correctly when subscription is active', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          is_active: true,
+          subscription_id: 'sub_123',
+          renewal_date: '2025-11-16'
+        })
+      } as Response)
+
+      mockIsLoggedIn.value = true
+      const { isActiveSubscription, fetchStatus } = useSubscription()
+
+      await fetchStatus()
+      expect(isActiveSubscription.value).toBe(true)
+    })
+
+    it('should compute isActiveSubscription as false when subscription is inactive', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          is_active: false,
+          subscription_id: 'sub_123',
+          renewal_date: '2025-11-16'
+        })
+      } as Response)
+
+      mockIsLoggedIn.value = true
+      const { isActiveSubscription, fetchStatus } = useSubscription()
+
+      await fetchStatus()
+      expect(isActiveSubscription.value).toBe(false)
+    })
+
+    it('should format renewal date correctly', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          is_active: true,
+          subscription_id: 'sub_123',
+          renewal_date: '2025-11-16T12:00:00Z'
+        })
+      } as Response)
+
+      mockIsLoggedIn.value = true
+      const { formattedRenewalDate, fetchStatus } = useSubscription()
+
+      await fetchStatus()
+      // The date format may vary based on timezone, so we just check it's a valid date string
+      expect(formattedRenewalDate.value).toMatch(/^[A-Za-z]{3} \d{1,2}, \d{4}$/)
+      expect(formattedRenewalDate.value).toContain('2025')
+      expect(formattedRenewalDate.value).toContain('Nov')
+    })
+
+    it('should return empty string when renewal date is not available', () => {
+      const { formattedRenewalDate } = useSubscription()
+
+      expect(formattedRenewalDate.value).toBe('')
+    })
+
+    it('should format monthly price correctly', () => {
+      const { formattedMonthlyPrice } = useSubscription()
+
+      expect(formattedMonthlyPrice.value).toBe('$20')
+    })
+  })
+
+  describe('fetchStatus', () => {
+    it('should fetch subscription status successfully', async () => {
+      const mockStatus = {
+        is_active: true,
+        subscription_id: 'sub_123',
+        renewal_date: '2025-11-16'
+      }
+
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => mockStatus
+      } as Response)
+
+      mockIsLoggedIn.value = true
+      const { fetchStatus } = useSubscription()
+
+      await fetchStatus()
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining('/customers/cloud-subscription-status'),
+        expect.objectContaining({
+          headers: expect.objectContaining({
+            Authorization: 'Bearer test-token',
+            'Content-Type': 'application/json'
+          })
+        })
+      )
+    })
+
+    it('should handle fetch errors gracefully', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: false,
+        json: async () => ({ message: 'Subscription not found' })
+      } as Response)
+
+      const { fetchStatus } = useSubscription()
+
+      await expect(fetchStatus()).rejects.toThrow()
+    })
+  })
+
+  describe('subscribe', () => {
+    it('should initiate subscription checkout successfully', async () => {
+      const checkoutUrl = 'https://checkout.stripe.com/test'
+
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({ checkout_url: checkoutUrl })
+      } as Response)
+
+      // Mock window.open
+      const windowOpenSpy = vi
+        .spyOn(window, 'open')
+        .mockImplementation(() => null)
+
+      const { subscribe } = useSubscription()
+
+      await subscribe()
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.stringContaining('/customers/cloud-subscription-checkout'),
+        expect.objectContaining({
+          method: 'POST',
+          headers: expect.objectContaining({
+            Authorization: 'Bearer test-token',
+            'Content-Type': 'application/json'
+          })
+        })
+      )
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
+
+      windowOpenSpy.mockRestore()
+    })
+
+    it('should throw error when checkout URL is not returned', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({})
+      } as Response)
+
+      const { subscribe } = useSubscription()
+
+      await expect(subscribe()).rejects.toThrow()
+    })
+  })
+
+  describe('requireActiveSubscription', () => {
+    it('should not show dialog when subscription is active', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          is_active: true,
+          subscription_id: 'sub_123',
+          renewal_date: '2025-11-16'
+        })
+      } as Response)
+
+      const { requireActiveSubscription } = useSubscription()
+
+      await requireActiveSubscription()
+
+      expect(mockShowSubscriptionRequiredDialog).not.toHaveBeenCalled()
+    })
+
+    it('should show dialog when subscription is inactive', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          is_active: false,
+          subscription_id: 'sub_123',
+          renewal_date: '2025-11-16'
+        })
+      } as Response)
+
+      const { requireActiveSubscription } = useSubscription()
+
+      await requireActiveSubscription()
+
+      expect(mockShowSubscriptionRequiredDialog).toHaveBeenCalled()
+    })
+  })
+
+  describe('action handlers', () => {
+    it('should open usage history URL', () => {
+      const windowOpenSpy = vi
+        .spyOn(window, 'open')
+        .mockImplementation(() => null)
+
+      const { handleViewUsageHistory } = useSubscription()
+      handleViewUsageHistory()
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(
+        'https://platform.comfy.org/profile/usage',
+        '_blank'
+      )
+
+      windowOpenSpy.mockRestore()
+    })
+
+    it('should open learn more URL', () => {
+      const windowOpenSpy = vi
+        .spyOn(window, 'open')
+        .mockImplementation(() => null)
+
+      const { handleLearnMore } = useSubscription()
+      handleLearnMore()
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(
+        'https://docs.comfy.org',
+        '_blank'
+      )
+
+      windowOpenSpy.mockRestore()
+    })
+
+    it('should call accessBillingPortal for invoice history', async () => {
+      const { handleInvoiceHistory } = useSubscription()
+
+      await handleInvoiceHistory()
+
+      expect(mockAccessBillingPortal).toHaveBeenCalled()
+    })
+
+    it('should call accessBillingPortal for manage subscription', async () => {
+      const { manageSubscription } = useSubscription()
+
+      await manageSubscription()
+
+      expect(mockAccessBillingPortal).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/remote/comfyui/history/adapters/v2ToV1Adapter.test.ts b/tests-ui/tests/platform/remote/comfyui/history/adapters/v2ToV1Adapter.test.ts
new file mode 100644
index 000000000..c047782a0
--- /dev/null
+++ b/tests-ui/tests/platform/remote/comfyui/history/adapters/v2ToV1Adapter.test.ts
@@ -0,0 +1,185 @@
+/**
+ * @fileoverview Unit tests for V2 to V1 history adapter.
+ */
+import { describe, expect, it } from 'vitest'
+
+import { mapHistoryV2toHistory } from '@/platform/remote/comfyui/history/adapters/v2ToV1Adapter'
+import { zRawHistoryItemV2 } from '@/platform/remote/comfyui/history/types/historyV2Types'
+import type { HistoryResponseV2 } from '@/platform/remote/comfyui/history/types/historyV2Types'
+
+import {
+  expectedV1Fixture,
+  historyV2Fixture
+} from '@tests-ui/fixtures/historyFixtures'
+import {
+  historyV2FiveItemsSorting,
+  historyV2MultipleNoTimestamp,
+  historyV2WithMissingTimestamp
+} from '@tests-ui/fixtures/historySortingFixtures'
+import type { HistoryTaskItem } from '@/platform/remote/comfyui/history/types/historyV1Types'
+
+function findResultByPromptId(
+  result: HistoryTaskItem[],
+  promptId: string
+): HistoryTaskItem {
+  const item = result.find((item) => item.prompt[1] === promptId)
+  if (!item) {
+    throw new Error(`Expected item with promptId ${promptId} not found`)
+  }
+  return item
+}
+
+describe('mapHistoryV2toHistory', () => {
+  describe('fixture validation', () => {
+    it('should have valid fixture data', () => {
+      // Validate all items in the fixture to ensure test data is correct
+      historyV2Fixture.history.forEach((item: unknown) => {
+        expect(() => zRawHistoryItemV2.parse(item)).not.toThrow()
+      })
+    })
+  })
+
+  describe('given a complete V2 history response with edge cases', () => {
+    const history = mapHistoryV2toHistory(historyV2Fixture)
+
+    it('should transform all items to V1 format with correct structure', () => {
+      expect(history).toEqual(expectedV1Fixture)
+    })
+
+    it('should add taskType "History" to all items', () => {
+      history.forEach((item) => {
+        expect(item.taskType).toBe('History')
+      })
+    })
+
+    it('should transform prompt to V1 tuple [priority, id, {}, extra_data, outputNodeIds]', () => {
+      const firstItem = history[0]
+
+      expect(firstItem.prompt[0]).toBe(1) // Synthetic priority based on timestamp
+      expect(firstItem.prompt[1]).toBe('complete-item-id')
+      expect(firstItem.prompt[2]).toEqual({}) // history v2 does not return this data
+      expect(firstItem.prompt[3]).toMatchObject({ client_id: 'test-client' })
+      expect(firstItem.prompt[4]).toEqual(['9'])
+    })
+
+    it('should handle missing optional status field', () => {
+      expect(history[1].prompt[1]).toBe('no-status-id')
+      expect(history[1].status).toBeUndefined()
+    })
+
+    it('should handle missing optional meta field', () => {
+      expect(history[2].prompt[1]).toBe('no-meta-id')
+      expect(history[2].meta).toBeUndefined()
+    })
+
+    it('should derive output node IDs from outputs object keys', () => {
+      const multiOutputItem = history[3]
+
+      expect(multiOutputItem.prompt[4]).toEqual(
+        expect.arrayContaining(['3', '9', '12'])
+      )
+      expect(multiOutputItem.prompt[4]).toHaveLength(3)
+    })
+  })
+
+  describe('given empty history array', () => {
+    it('should return empty array', () => {
+      const emptyResponse: HistoryResponseV2 = { history: [] }
+      const history = mapHistoryV2toHistory(emptyResponse)
+
+      expect(history).toEqual([])
+    })
+  })
+
+  describe('given empty outputs object', () => {
+    it('should return empty array for output node IDs', () => {
+      const v2Response: HistoryResponseV2 = {
+        history: [
+          {
+            prompt_id: 'test-id',
+            prompt: {
+              priority: 0,
+              prompt_id: 'test-id',
+              extra_data: { client_id: 'test' }
+            },
+            outputs: {}
+          }
+        ]
+      }
+
+      const history = mapHistoryV2toHistory(v2Response)
+
+      expect(history[0].prompt[4]).toEqual([])
+    })
+  })
+
+  describe('given missing client_id', () => {
+    it('should accept history items without client_id', () => {
+      const v2Response: HistoryResponseV2 = {
+        history: [
+          {
+            prompt_id: 'test-id',
+            prompt: {
+              priority: 0,
+              prompt_id: 'test-id',
+              extra_data: {}
+            },
+            outputs: {}
+          }
+        ]
+      }
+
+      const history = mapHistoryV2toHistory(v2Response)
+
+      expect(history[0].prompt[3].client_id).toBeUndefined()
+    })
+  })
+
+  describe('timestamp-based priority assignment', () => {
+    it('assigns priority 0 to items without execution_success timestamp', () => {
+      const result = mapHistoryV2toHistory(historyV2WithMissingTimestamp)
+
+      expect(result).toHaveLength(3)
+
+      const item1000 = findResultByPromptId(result, 'item-timestamp-1000')
+      const item2000 = findResultByPromptId(result, 'item-timestamp-2000')
+      const itemNoTimestamp = findResultByPromptId(result, 'item-no-timestamp')
+
+      expect(item2000.prompt[0]).toBe(2)
+      expect(item1000.prompt[0]).toBe(1)
+      expect(itemNoTimestamp.prompt[0]).toBe(0)
+    })
+
+    it('correctly sorts and assigns priorities for multiple items', () => {
+      const result = mapHistoryV2toHistory(historyV2FiveItemsSorting)
+
+      expect(result).toHaveLength(5)
+
+      const item1000 = findResultByPromptId(result, 'item-timestamp-1000')
+      const item2000 = findResultByPromptId(result, 'item-timestamp-2000')
+      const item3000 = findResultByPromptId(result, 'item-timestamp-3000')
+      const item4000 = findResultByPromptId(result, 'item-timestamp-4000')
+      const item5000 = findResultByPromptId(result, 'item-timestamp-5000')
+
+      expect(item5000.prompt[0]).toBe(5)
+      expect(item4000.prompt[0]).toBe(4)
+      expect(item3000.prompt[0]).toBe(3)
+      expect(item2000.prompt[0]).toBe(2)
+      expect(item1000.prompt[0]).toBe(1)
+    })
+
+    it('assigns priority 0 to all items when multiple items lack timestamps', () => {
+      const result = mapHistoryV2toHistory(historyV2MultipleNoTimestamp)
+
+      expect(result).toHaveLength(3)
+
+      const item1 = findResultByPromptId(result, 'item-no-timestamp-1')
+      const item2 = findResultByPromptId(result, 'item-no-timestamp-2')
+      const item3 = findResultByPromptId(result, 'item-no-timestamp-3')
+
+      expect(item1.prompt[0]).toBe(0)
+      expect(item2.prompt[0]).toBe(0)
+      expect(item3.prompt[0]).toBe(0)
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/remote/comfyui/history/fetchers/fetchHistoryV1.test.ts b/tests-ui/tests/platform/remote/comfyui/history/fetchers/fetchHistoryV1.test.ts
new file mode 100644
index 000000000..e0869778e
--- /dev/null
+++ b/tests-ui/tests/platform/remote/comfyui/history/fetchers/fetchHistoryV1.test.ts
@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Unit tests for V1 history fetcher.
+ */
+import { describe, expect, it, vi } from 'vitest'
+
+import { fetchHistoryV1 } from '@/platform/remote/comfyui/history/fetchers/fetchHistoryV1'
+
+import { historyV1RawResponse } from '@tests-ui/fixtures/historyFixtures'
+
+describe('fetchHistoryV1', () => {
+  const mockFetchApi = vi.fn().mockResolvedValue({
+    json: async () => historyV1RawResponse
+  })
+
+  it('should fetch from /history endpoint with default max_items', async () => {
+    await fetchHistoryV1(mockFetchApi)
+
+    expect(mockFetchApi).toHaveBeenCalledWith('/history?max_items=200')
+  })
+
+  it('should fetch with custom max_items parameter', async () => {
+    await fetchHistoryV1(mockFetchApi, 50)
+
+    expect(mockFetchApi).toHaveBeenCalledWith('/history?max_items=50')
+  })
+
+  it('should transform object response to array with taskType and preserve fields', async () => {
+    const result = await fetchHistoryV1(mockFetchApi)
+
+    expect(result.History).toHaveLength(2)
+    result.History.forEach((item) => {
+      expect(item.taskType).toBe('History')
+    })
+    expect(result.History[0]).toMatchObject({
+      taskType: 'History',
+      prompt: [24, 'complete-item-id', {}, expect.any(Object), ['9']],
+      outputs: expect.any(Object),
+      status: expect.any(Object),
+      meta: expect.any(Object)
+    })
+  })
+
+  it('should handle empty response object', async () => {
+    const emptyMock = vi.fn().mockResolvedValue({
+      json: async () => ({})
+    })
+
+    const result = await fetchHistoryV1(emptyMock)
+
+    expect(result.History).toEqual([])
+  })
+})
diff --git a/tests-ui/tests/platform/remote/comfyui/history/fetchers/fetchHistoryV2.test.ts b/tests-ui/tests/platform/remote/comfyui/history/fetchers/fetchHistoryV2.test.ts
new file mode 100644
index 000000000..ff0e28750
--- /dev/null
+++ b/tests-ui/tests/platform/remote/comfyui/history/fetchers/fetchHistoryV2.test.ts
@@ -0,0 +1,41 @@
+/**
+ * @fileoverview Unit tests for V2 history fetcher.
+ */
+import { describe, expect, it, vi } from 'vitest'
+
+import { fetchHistoryV2 } from '@/platform/remote/comfyui/history/fetchers/fetchHistoryV2'
+
+import {
+  expectedV1Fixture,
+  historyV2Fixture
+} from '@tests-ui/fixtures/historyFixtures'
+
+describe('fetchHistoryV2', () => {
+  const mockFetchApi = vi.fn().mockResolvedValue({
+    json: async () => historyV2Fixture
+  })
+
+  it('should fetch from /history_v2 endpoint with default max_items', async () => {
+    await fetchHistoryV2(mockFetchApi)
+
+    expect(mockFetchApi).toHaveBeenCalledWith('/history_v2?max_items=200')
+  })
+
+  it('should fetch with custom max_items parameter', async () => {
+    await fetchHistoryV2(mockFetchApi, 50)
+
+    expect(mockFetchApi).toHaveBeenCalledWith('/history_v2?max_items=50')
+  })
+
+  it('should adapt V2 response to V1-compatible format', async () => {
+    const result = await fetchHistoryV2(mockFetchApi)
+
+    expect(result.History).toEqual(expectedV1Fixture)
+    expect(result).toHaveProperty('History')
+    expect(Array.isArray(result.History)).toBe(true)
+    result.History.forEach((item) => {
+      expect(item.taskType).toBe('History')
+      expect(item.prompt).toHaveLength(5)
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/remote/comfyui/history/reconciliation.test.ts b/tests-ui/tests/platform/remote/comfyui/history/reconciliation.test.ts
new file mode 100644
index 000000000..d7ada5971
--- /dev/null
+++ b/tests-ui/tests/platform/remote/comfyui/history/reconciliation.test.ts
@@ -0,0 +1,335 @@
+/**
+ * @fileoverview Tests for history reconciliation (V1 and V2)
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { reconcileHistory } from '@/platform/remote/comfyui/history/reconciliation'
+import type { TaskItem } from '@/schemas/apiSchema'
+
+// Mock distribution types
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false,
+  isDesktop: true
+}))
+
+function createHistoryItem(promptId: string, queueIndex = 0): TaskItem {
+  return {
+    taskType: 'History',
+    prompt: [queueIndex, promptId, {}, {}, []],
+    status: { status_str: 'success', completed: true, messages: [] },
+    outputs: {}
+  }
+}
+
+function getAllPromptIds(result: TaskItem[]): string[] {
+  return result.map((item) => item.prompt[1])
+}
+
+describe('reconcileHistory (V1)', () => {
+  beforeEach(async () => {
+    const distTypes = await import('@/platform/distribution/types')
+    vi.mocked(distTypes).isCloud = false
+  })
+
+  describe('when filtering by queueIndex', () => {
+    it('should retain items with queueIndex greater than lastKnownQueueIndex', () => {
+      const serverHistory = [
+        createHistoryItem('new-1', 11),
+        createHistoryItem('new-2', 10),
+        createHistoryItem('old', 5)
+      ]
+      const clientHistory = [createHistoryItem('old', 5)]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10, 9)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(3)
+      expect(promptIds).toContain('new-1')
+      expect(promptIds).toContain('new-2')
+      expect(promptIds).toContain('old')
+    })
+
+    it('should evict items with queueIndex less than or equal to lastKnownQueueIndex', () => {
+      const serverHistory = [
+        createHistoryItem('new', 11),
+        createHistoryItem('existing', 10),
+        createHistoryItem('old-should-not-appear', 5)
+      ]
+      const clientHistory = [createHistoryItem('existing', 10)]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(2)
+      expect(promptIds).toContain('new')
+      expect(promptIds).toContain('existing')
+      expect(promptIds).not.toContain('old-should-not-appear')
+    })
+
+    it('should retain all server items when lastKnownQueueIndex is undefined', () => {
+      const serverHistory = [
+        createHistoryItem('item-1', 5),
+        createHistoryItem('item-2', 4)
+      ]
+
+      const result = reconcileHistory(serverHistory, [], 10, undefined)
+
+      expect(result).toHaveLength(2)
+      expect(result[0].prompt[1]).toBe('item-1')
+      expect(result[1].prompt[1]).toBe('item-2')
+    })
+  })
+
+  describe('when reconciling with existing client items', () => {
+    it('should retain client items that still exist on server', () => {
+      const serverHistory = [
+        createHistoryItem('new', 11),
+        createHistoryItem('existing-1', 9),
+        createHistoryItem('existing-2', 8)
+      ]
+      const clientHistory = [
+        createHistoryItem('existing-1', 9),
+        createHistoryItem('existing-2', 8)
+      ]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(3)
+      expect(promptIds).toContain('new')
+      expect(promptIds).toContain('existing-1')
+      expect(promptIds).toContain('existing-2')
+    })
+
+    it('should evict client items that no longer exist on server', () => {
+      const serverHistory = [
+        createHistoryItem('new', 11),
+        createHistoryItem('keep', 9)
+      ]
+      const clientHistory = [
+        createHistoryItem('keep', 9),
+        createHistoryItem('removed-from-server', 8)
+      ]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(2)
+      expect(promptIds).toContain('new')
+      expect(promptIds).toContain('keep')
+      expect(promptIds).not.toContain('removed-from-server')
+    })
+  })
+
+  describe('when limiting the result count', () => {
+    it('should respect the maxItems constraint', () => {
+      const serverHistory = Array.from({ length: 10 }, (_, i) =>
+        createHistoryItem(`item-${i}`, 20 + i)
+      )
+
+      const result = reconcileHistory(serverHistory, [], 5, 15)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(5)
+    })
+
+    it('should evict lowest priority items when exceeding capacity', () => {
+      const serverHistory = [
+        createHistoryItem('new-1', 13),
+        createHistoryItem('new-2', 12),
+        createHistoryItem('new-3', 11),
+        createHistoryItem('existing', 9)
+      ]
+      const clientHistory = [createHistoryItem('existing', 9)]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 2, 10)
+
+      expect(result).toHaveLength(2)
+      expect(result[0].prompt[1]).toBe('new-1')
+      expect(result[1].prompt[1]).toBe('new-2')
+    })
+  })
+
+  describe('when handling empty collections', () => {
+    it('should return all server items when client history is empty', () => {
+      const serverHistory = [
+        createHistoryItem('item-1', 10),
+        createHistoryItem('item-2', 9)
+      ]
+
+      const result = reconcileHistory(serverHistory, [], 10, 8)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(2)
+    })
+
+    it('should return empty result when server history is empty', () => {
+      const clientHistory = [createHistoryItem('item-1', 5)]
+
+      const result = reconcileHistory([], clientHistory, 10, 5)
+
+      expect(result).toHaveLength(0)
+    })
+
+    it('should return empty result when both collections are empty', () => {
+      const result = reconcileHistory([], [], 10, undefined)
+
+      expect(result).toHaveLength(0)
+    })
+  })
+})
+
+describe('reconcileHistory (V2/Cloud)', () => {
+  beforeEach(async () => {
+    const distTypes = await import('@/platform/distribution/types')
+    vi.mocked(distTypes).isCloud = true
+  })
+
+  describe('when adding new items from server', () => {
+    it('should retain items with promptIds not present in client history', () => {
+      const serverHistory = [
+        createHistoryItem('new-item'),
+        createHistoryItem('existing-item')
+      ]
+      const clientHistory = [createHistoryItem('existing-item')]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(2)
+      expect(promptIds).toContain('new-item')
+      expect(promptIds).toContain('existing-item')
+    })
+
+    it('should respect priority ordering when retaining multiple new items', () => {
+      const serverHistory = [
+        createHistoryItem('new-1'),
+        createHistoryItem('new-2'),
+        createHistoryItem('existing')
+      ]
+      const clientHistory = [createHistoryItem('existing')]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(3)
+      expect(promptIds).toContain('new-1')
+      expect(promptIds).toContain('new-2')
+      expect(promptIds).toContain('existing')
+    })
+  })
+
+  describe('when reconciling with existing client items', () => {
+    it('should retain client items that still exist on server', () => {
+      const serverHistory = [
+        createHistoryItem('item-1'),
+        createHistoryItem('item-2')
+      ]
+      const clientHistory = [
+        createHistoryItem('item-1'),
+        createHistoryItem('item-2')
+      ]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(2)
+      expect(promptIds).toContain('item-1')
+      expect(promptIds).toContain('item-2')
+    })
+
+    it('should evict client items that no longer exist on server', () => {
+      const serverHistory = [createHistoryItem('item-1')]
+      const clientHistory = [
+        createHistoryItem('item-1'),
+        createHistoryItem('old-item')
+      ]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(1)
+      expect(promptIds).toContain('item-1')
+      expect(promptIds).not.toContain('old-item')
+    })
+  })
+
+  describe('when detecting new items by promptId', () => {
+    it('should retain new items regardless of queueIndex values', () => {
+      const serverHistory = [
+        createHistoryItem('existing', 100),
+        createHistoryItem('new-item', 50)
+      ]
+      const clientHistory = [createHistoryItem('existing', 100)]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 10)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toContain('new-item')
+      expect(promptIds).toContain('existing')
+    })
+  })
+
+  describe('when limiting the result count', () => {
+    it('should respect the maxItems constraint', () => {
+      const serverHistory = Array.from({ length: 10 }, (_, i) =>
+        createHistoryItem(`server-${i}`)
+      )
+      const clientHistory = Array.from({ length: 5 }, (_, i) =>
+        createHistoryItem(`client-${i}`)
+      )
+
+      const result = reconcileHistory(serverHistory, clientHistory, 5)
+
+      const promptIds = getAllPromptIds(result)
+      expect(promptIds).toHaveLength(5)
+    })
+
+    it('should evict lowest priority items when exceeding capacity', () => {
+      const serverHistory = [
+        createHistoryItem('new-1'),
+        createHistoryItem('new-2'),
+        createHistoryItem('existing')
+      ]
+      const clientHistory = [createHistoryItem('existing')]
+
+      const result = reconcileHistory(serverHistory, clientHistory, 2)
+
+      expect(result).toHaveLength(2)
+      expect(result[0].prompt[1]).toBe('new-1')
+      expect(result[1].prompt[1]).toBe('new-2')
+    })
+  })
+
+  describe('when handling empty collections', () => {
+    it('should return all server items when client history is empty', () => {
+      const serverHistory = [
+        createHistoryItem('item-1'),
+        createHistoryItem('item-2')
+      ]
+
+      const result = reconcileHistory(serverHistory, [], 10)
+
+      expect(result).toHaveLength(2)
+      expect(result[0].prompt[1]).toBe('item-1')
+      expect(result[1].prompt[1]).toBe('item-2')
+    })
+
+    it('should return empty result when server history is empty', () => {
+      const clientHistory = [
+        createHistoryItem('item-1'),
+        createHistoryItem('item-2')
+      ]
+
+      const result = reconcileHistory([], clientHistory, 10)
+
+      expect(result).toHaveLength(0)
+    })
+
+    it('should return empty result when both collections are empty', () => {
+      const result = reconcileHistory([], [], 10)
+
+      expect(result).toHaveLength(0)
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/settings/components/SettingItem.test.ts b/tests-ui/tests/platform/settings/components/SettingItem.test.ts
new file mode 100644
index 000000000..c32548f83
--- /dev/null
+++ b/tests-ui/tests/platform/settings/components/SettingItem.test.ts
@@ -0,0 +1,107 @@
+import { flushPromises, shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import SettingItem from '@/platform/settings/components/SettingItem.vue'
+import type { SettingParams } from '@/platform/settings/types'
+import { i18n } from '@/i18n'
+
+/**
+ * Verifies that SettingItem emits telemetry when its value changes
+ * and suppresses telemetry when the value remains the same.
+ */
+const trackSettingChanged = vi.fn()
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: vi.fn(() => ({
+    trackSettingChanged
+  }))
+}))
+
+const mockGet = vi.fn()
+const mockSet = vi.fn()
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockGet,
+    set: mockSet
+  })
+}))
+
+/**
+ * Minimal stub for FormItem that allows emitting `update:form-value`.
+ */
+const FormItemUpdateStub = {
+  template: '<div />',
+  emits: ['update:form-value'],
+  props: ['id', 'item', 'formValue']
+}
+
+describe('SettingItem (telemetry UI tracking)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = (setting: SettingParams) => {
+    return shallowMount(SettingItem, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          FormItem: FormItemUpdateStub,
+          Tag: true
+        }
+      },
+      props: {
+        setting
+      }
+    })
+  }
+
+  it('tracks telemetry when value changes via UI (uses normalized value)', async () => {
+    const settingParams: SettingParams = {
+      id: 'main.sub.setting.name',
+      name: 'Telemetry Visible',
+      type: 'text',
+      defaultValue: 'default'
+    }
+
+    mockGet.mockReturnValueOnce('default').mockReturnValueOnce('normalized')
+    mockSet.mockResolvedValue(undefined)
+
+    const wrapper = mountComponent(settingParams)
+
+    const newValue = 'newvalue'
+    const formItem = wrapper.findComponent(FormItemUpdateStub)
+    formItem.vm.$emit('update:form-value', newValue)
+
+    await flushPromises()
+
+    expect(trackSettingChanged).toHaveBeenCalledTimes(1)
+    expect(trackSettingChanged).toHaveBeenCalledWith(
+      expect.objectContaining({
+        setting_id: 'main.sub.setting.name',
+        previous_value: 'default',
+        new_value: 'normalized'
+      })
+    )
+  })
+
+  it('does not track telemetry when normalized value does not change', async () => {
+    const settingParams: SettingParams = {
+      id: 'main.sub.setting.name',
+      name: 'Telemetry Visible',
+      type: 'text',
+      defaultValue: 'same'
+    }
+
+    mockGet.mockReturnValueOnce('same').mockReturnValueOnce('same')
+    mockSet.mockResolvedValue(undefined)
+
+    const wrapper = mountComponent(settingParams)
+
+    const unchangedValue = 'same'
+    const formItem = wrapper.findComponent(FormItemUpdateStub)
+    formItem.vm.$emit('update:form-value', unchangedValue)
+
+    await flushPromises()
+
+    expect(trackSettingChanged).not.toHaveBeenCalled()
+  })
+})
diff --git a/tests-ui/tests/platform/telemetry/topupTracker.test.ts b/tests-ui/tests/platform/telemetry/topupTracker.test.ts
new file mode 100644
index 000000000..668ed2db7
--- /dev/null
+++ b/tests-ui/tests/platform/telemetry/topupTracker.test.ts
@@ -0,0 +1,207 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { AuditLog } from '@/services/customerEventsService'
+
+// Mock localStorage
+const mockLocalStorage = vi.hoisted(() => ({
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn()
+}))
+
+Object.defineProperty(window, 'localStorage', {
+  value: mockLocalStorage,
+  writable: true
+})
+
+// Mock telemetry
+const mockTelemetry = vi.hoisted(() => ({
+  trackApiCreditTopupSucceeded: vi.fn()
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: vi.fn(() => mockTelemetry)
+}))
+
+describe('topupTracker', () => {
+  let topupTracker: typeof import('@/platform/telemetry/topupTracker')
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    // Dynamically import to ensure fresh module state
+    topupTracker = await import('@/platform/telemetry/topupTracker')
+  })
+
+  describe('startTopupTracking', () => {
+    it('should save current timestamp to localStorage', () => {
+      const beforeTimestamp = Date.now()
+
+      topupTracker.startTopupTracking()
+
+      expect(mockLocalStorage.setItem).toHaveBeenCalledWith(
+        'pending_topup_timestamp',
+        expect.any(String)
+      )
+
+      const savedTimestamp = parseInt(
+        mockLocalStorage.setItem.mock.calls[0][1],
+        10
+      )
+      expect(savedTimestamp).toBeGreaterThanOrEqual(beforeTimestamp)
+      expect(savedTimestamp).toBeLessThanOrEqual(Date.now())
+    })
+  })
+
+  describe('checkForCompletedTopup', () => {
+    it('should return false if no pending topup exists', () => {
+      mockLocalStorage.getItem.mockReturnValue(null)
+
+      const result = topupTracker.checkForCompletedTopup([])
+
+      expect(result).toBe(false)
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
+    })
+
+    it('should return false if events array is empty', () => {
+      mockLocalStorage.getItem.mockReturnValue(Date.now().toString())
+
+      const result = topupTracker.checkForCompletedTopup([])
+
+      expect(result).toBe(false)
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
+    })
+
+    it('should return false if events array is null', () => {
+      mockLocalStorage.getItem.mockReturnValue(Date.now().toString())
+
+      const result = topupTracker.checkForCompletedTopup(null)
+
+      expect(result).toBe(false)
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
+    })
+
+    it('should auto-cleanup if timestamp is older than 24 hours', () => {
+      const oldTimestamp = Date.now() - 25 * 60 * 60 * 1000 // 25 hours ago
+      mockLocalStorage.getItem.mockReturnValue(oldTimestamp.toString())
+
+      const events: AuditLog[] = [
+        {
+          event_id: 'test-1',
+          event_type: 'credit_added',
+          createdAt: new Date().toISOString(),
+          params: { amount: 500 }
+        }
+      ]
+
+      const result = topupTracker.checkForCompletedTopup(events)
+
+      expect(result).toBe(false)
+      expect(mockLocalStorage.removeItem).toHaveBeenCalledWith(
+        'pending_topup_timestamp'
+      )
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
+    })
+
+    it('should detect completed topup and fire telemetry', () => {
+      const startTimestamp = Date.now() - 5 * 60 * 1000 // 5 minutes ago
+      mockLocalStorage.getItem.mockReturnValue(startTimestamp.toString())
+
+      const events: AuditLog[] = [
+        {
+          event_id: 'test-1',
+          event_type: 'api_usage_completed',
+          createdAt: new Date(startTimestamp - 1000).toISOString(),
+          params: {}
+        },
+        {
+          event_id: 'test-2',
+          event_type: 'credit_added',
+          createdAt: new Date(startTimestamp + 1000).toISOString(),
+          params: { amount: 500 }
+        }
+      ]
+
+      const result = topupTracker.checkForCompletedTopup(events)
+
+      expect(result).toBe(true)
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).toHaveBeenCalledOnce()
+      expect(mockLocalStorage.removeItem).toHaveBeenCalledWith(
+        'pending_topup_timestamp'
+      )
+    })
+
+    it('should not detect topup if credit_added event is before tracking started', () => {
+      const startTimestamp = Date.now()
+      mockLocalStorage.getItem.mockReturnValue(startTimestamp.toString())
+
+      const events: AuditLog[] = [
+        {
+          event_id: 'test-1',
+          event_type: 'credit_added',
+          createdAt: new Date(startTimestamp - 1000).toISOString(), // Before tracking
+          params: { amount: 500 }
+        }
+      ]
+
+      const result = topupTracker.checkForCompletedTopup(events)
+
+      expect(result).toBe(false)
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
+      expect(mockLocalStorage.removeItem).not.toHaveBeenCalled()
+    })
+
+    it('should ignore events without createdAt timestamp', () => {
+      const startTimestamp = Date.now()
+      mockLocalStorage.getItem.mockReturnValue(startTimestamp.toString())
+
+      const events: AuditLog[] = [
+        {
+          event_id: 'test-1',
+          event_type: 'credit_added',
+          createdAt: undefined,
+          params: { amount: 500 }
+        }
+      ]
+
+      const result = topupTracker.checkForCompletedTopup(events)
+
+      expect(result).toBe(false)
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
+    })
+
+    it('should only match credit_added events, not other event types', () => {
+      const startTimestamp = Date.now()
+      mockLocalStorage.getItem.mockReturnValue(startTimestamp.toString())
+
+      const events: AuditLog[] = [
+        {
+          event_id: 'test-1',
+          event_type: 'api_usage_completed',
+          createdAt: new Date(startTimestamp + 1000).toISOString(),
+          params: {}
+        },
+        {
+          event_id: 'test-2',
+          event_type: 'account_created',
+          createdAt: new Date(startTimestamp + 2000).toISOString(),
+          params: {}
+        }
+      ]
+
+      const result = topupTracker.checkForCompletedTopup(events)
+
+      expect(result).toBe(false)
+      expect(mockTelemetry.trackApiCreditTopupSucceeded).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('clearTopupTracking', () => {
+    it('should remove pending topup from localStorage', () => {
+      topupTracker.clearTopupTracking()
+
+      expect(mockLocalStorage.removeItem).toHaveBeenCalledWith(
+        'pending_topup_timestamp'
+      )
+    })
+  })
+})
diff --git a/tests-ui/tests/platform/telemetry/useTelemetry.test.ts b/tests-ui/tests/platform/telemetry/useTelemetry.test.ts
new file mode 100644
index 000000000..b5c887c74
--- /dev/null
+++ b/tests-ui/tests/platform/telemetry/useTelemetry.test.ts
@@ -0,0 +1,30 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+describe('useTelemetry', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should return null when not in cloud distribution', async () => {
+    const { useTelemetry } = await import('@/platform/telemetry')
+    const provider = useTelemetry()
+
+    // Should return null for OSS builds
+    expect(provider).toBeNull()
+  }, 10000)
+
+  it('should return null consistently for OSS builds', async () => {
+    const { useTelemetry } = await import('@/platform/telemetry')
+
+    const provider1 = useTelemetry()
+    const provider2 = useTelemetry()
+
+    // Both should be null for OSS builds
+    expect(provider1).toBeNull()
+    expect(provider2).toBeNull()
+  })
+})
diff --git a/tests-ui/tests/platform/workflow/cloud/getWorkflowFromHistory.test.ts b/tests-ui/tests/platform/workflow/cloud/getWorkflowFromHistory.test.ts
new file mode 100644
index 000000000..fede0e864
--- /dev/null
+++ b/tests-ui/tests/platform/workflow/cloud/getWorkflowFromHistory.test.ts
@@ -0,0 +1,111 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { getWorkflowFromHistory } from '@/platform/workflow/cloud/getWorkflowFromHistory'
+
+const mockWorkflow: ComfyWorkflowJSON = {
+  id: 'test-workflow-id',
+  revision: 0,
+  last_node_id: 5,
+  last_link_id: 3,
+  nodes: [],
+  links: [],
+  groups: [],
+  config: {},
+  extra: {},
+  version: 0.4
+}
+
+const mockHistoryResponse = {
+  'test-prompt-id': {
+    prompt: {
+      priority: 1,
+      prompt_id: 'test-prompt-id',
+      extra_data: {
+        client_id: 'test-client',
+        extra_pnginfo: {
+          workflow: mockWorkflow
+        }
+      }
+    },
+    outputs: {},
+    status: {
+      status_str: 'success',
+      completed: true,
+      messages: []
+    }
+  }
+}
+
+describe('getWorkflowFromHistory', () => {
+  it('should fetch workflow from /history_v2/{prompt_id} endpoint', async () => {
+    const mockFetchApi = vi.fn().mockResolvedValue({
+      json: async () => mockHistoryResponse
+    })
+
+    await getWorkflowFromHistory(mockFetchApi, 'test-prompt-id')
+
+    expect(mockFetchApi).toHaveBeenCalledWith('/history_v2/test-prompt-id')
+  })
+
+  it('should extract and return workflow from response', async () => {
+    const mockFetchApi = vi.fn().mockResolvedValue({
+      json: async () => mockHistoryResponse
+    })
+
+    const result = await getWorkflowFromHistory(mockFetchApi, 'test-prompt-id')
+
+    expect(result).toEqual(mockWorkflow)
+  })
+
+  it('should return undefined when prompt_id not found in response', async () => {
+    const mockFetchApi = vi.fn().mockResolvedValue({
+      json: async () => ({})
+    })
+
+    const result = await getWorkflowFromHistory(mockFetchApi, 'nonexistent-id')
+
+    expect(result).toBeUndefined()
+  })
+
+  it('should return undefined when workflow is missing from extra_pnginfo', async () => {
+    const mockFetchApi = vi.fn().mockResolvedValue({
+      json: async () => ({
+        'test-prompt-id': {
+          prompt: {
+            priority: 1,
+            prompt_id: 'test-prompt-id',
+            extra_data: {
+              client_id: 'test-client'
+            }
+          },
+          outputs: {}
+        }
+      })
+    })
+
+    const result = await getWorkflowFromHistory(mockFetchApi, 'test-prompt-id')
+
+    expect(result).toBeUndefined()
+  })
+
+  it('should handle fetch errors gracefully', async () => {
+    const mockFetchApi = vi.fn().mockRejectedValue(new Error('Network error'))
+
+    const result = await getWorkflowFromHistory(mockFetchApi, 'test-prompt-id')
+
+    expect(result).toBeUndefined()
+  })
+
+  it('should handle malformed JSON responses', async () => {
+    const mockFetchApi = vi.fn().mockResolvedValue({
+      json: async () => {
+        throw new Error('Invalid JSON')
+      }
+    })
+
+    const result = await getWorkflowFromHistory(mockFetchApi, 'test-prompt-id')
+
+    expect(result).toBeUndefined()
+  })
+})
diff --git a/tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts b/tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
new file mode 100644
index 000000000..5ed3b94ce
--- /dev/null
+++ b/tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
@@ -0,0 +1,220 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/useTemplateUrlLoader'
+
+/**
+ * Unit tests for useTemplateUrlLoader composable
+ *
+ * Tests the behavior of loading templates via URL query parameters:
+ * - ?template=flux_simple loads the template
+ * - ?template=flux_simple&source=custom loads from custom source
+ * - Invalid template shows error toast
+ * - Input validation for template and source parameters
+ */
+
+// Mock vue-router
+let mockQueryParams: Record<string, string | undefined> = {}
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(() => ({
+    query: mockQueryParams
+  }))
+}))
+
+// Mock template workflows composable
+const mockLoadTemplates = vi.fn().mockResolvedValue(true)
+const mockLoadWorkflowTemplate = vi.fn().mockResolvedValue(true)
+
+vi.mock(
+  '@/platform/workflow/templates/composables/useTemplateWorkflows',
+  () => ({
+    useTemplateWorkflows: () => ({
+      loadTemplates: mockLoadTemplates,
+      loadWorkflowTemplate: mockLoadWorkflowTemplate
+    })
+  })
+)
+
+// Mock toast
+const mockToastAdd = vi.fn()
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: mockToastAdd
+  })
+}))
+
+// Mock i18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn((key: string, params?: any) => {
+      if (key === 'g.error') return 'Error'
+      if (key === 'templateWorkflows.error.templateNotFound') {
+        return `Template "${params?.templateName}" not found`
+      }
+      if (key === 'g.errorLoadingTemplate') return 'Failed to load template'
+      return key
+    })
+  })
+}))
+
+describe('useTemplateUrlLoader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockQueryParams = {}
+  })
+
+  it('does not load template when no query param present', () => {
+    mockQueryParams = {}
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    void loadTemplateFromUrl()
+
+    expect(mockLoadTemplates).not.toHaveBeenCalled()
+    expect(mockLoadWorkflowTemplate).not.toHaveBeenCalled()
+  })
+
+  it('loads template when query param is present', async () => {
+    mockQueryParams = { template: 'flux_simple' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockLoadTemplates).toHaveBeenCalledTimes(1)
+    expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+      'flux_simple',
+      'default'
+    )
+  })
+
+  it('uses default source when source param is not provided', async () => {
+    mockQueryParams = { template: 'flux_simple' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+      'flux_simple',
+      'default'
+    )
+  })
+
+  it('uses custom source when source param is provided', async () => {
+    mockQueryParams = { template: 'custom-template', source: 'custom-module' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+      'custom-template',
+      'custom-module'
+    )
+  })
+
+  it('shows error toast when template loading fails', async () => {
+    mockQueryParams = { template: 'invalid-template' }
+    mockLoadWorkflowTemplate.mockResolvedValueOnce(false)
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockToastAdd).toHaveBeenCalledWith({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Template "invalid-template" not found',
+      life: 3000
+    })
+  })
+
+  it('handles array query params correctly', () => {
+    // Vue Router can return string[] for duplicate params
+    mockQueryParams = { template: ['first', 'second'] as any }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    void loadTemplateFromUrl()
+
+    // Should not load when param is an array
+    expect(mockLoadTemplates).not.toHaveBeenCalled()
+  })
+
+  it('rejects invalid template parameter with special characters', () => {
+    // Test path traversal attempt
+    mockQueryParams = { template: '../../../etc/passwd' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    void loadTemplateFromUrl()
+
+    // Should not load invalid template
+    expect(mockLoadTemplates).not.toHaveBeenCalled()
+  })
+
+  it('rejects invalid template parameter with slash', () => {
+    mockQueryParams = { template: 'path/to/template' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    void loadTemplateFromUrl()
+
+    // Should not load invalid template
+    expect(mockLoadTemplates).not.toHaveBeenCalled()
+  })
+
+  it('accepts valid template parameter formats', async () => {
+    const validTemplates = [
+      'flux_simple',
+      'flux-kontext-dev',
+      'template123',
+      'My_Template-2'
+    ]
+
+    for (const template of validTemplates) {
+      vi.clearAllMocks()
+      mockQueryParams = { template }
+
+      const { loadTemplateFromUrl } = useTemplateUrlLoader()
+      await loadTemplateFromUrl()
+
+      expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(template, 'default')
+    }
+  })
+
+  it('rejects invalid source parameter with special characters', () => {
+    mockQueryParams = { template: 'flux_simple', source: '../malicious' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    void loadTemplateFromUrl()
+
+    // Should not load with invalid source
+    expect(mockLoadTemplates).not.toHaveBeenCalled()
+  })
+
+  it('accepts valid source parameter formats', async () => {
+    const validSources = ['default', 'custom-module', 'my_source', 'source123']
+
+    for (const source of validSources) {
+      vi.clearAllMocks()
+      mockQueryParams = { template: 'flux_simple', source }
+
+      const { loadTemplateFromUrl } = useTemplateUrlLoader()
+      await loadTemplateFromUrl()
+
+      expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+        'flux_simple',
+        source
+      )
+    }
+  })
+
+  it('shows error toast when exception is thrown', async () => {
+    mockQueryParams = { template: 'flux_simple' }
+    mockLoadTemplates.mockRejectedValueOnce(new Error('Network error'))
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockToastAdd).toHaveBeenCalledWith({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Failed to load template',
+      life: 3000
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
similarity index 96%
rename from tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
index 5b9d658df..f77a3a75e 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
@@ -113,7 +113,12 @@ describe('ImagePreview', () => {
 
     // Action buttons should now be visible
     expect(wrapper.find('.actions').exists()).toBe(true)
-    expect(wrapper.findAll('.action-btn')).toHaveLength(2) // download, remove (no mask for multiple images)
+    // For multiple images: download and remove buttons (no mask button)
+    expect(wrapper.find('[aria-label="Download image"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Remove image"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Edit or mask image"]').exists()).toBe(
+      false
+    )
   })
 
   it('hides action buttons when not hovering', async () => {
@@ -203,9 +208,6 @@ describe('ImagePreview', () => {
     await navigationDots[1].trigger('click')
     await nextTick()
 
-    // After clicking, component shows loading state (Skeleton)
-    expect(wrapper.find('skeleton-stub').exists()).toBe(true)
-
     // Simulate image load event to clear loading state
     const component = wrapper.vm as any
     component.isLoading = false
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
index fbeb9dd12..adf587b47 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
@@ -51,9 +51,11 @@ vi.mock('@/renderer/extensions/vueNodes/layout/useNodeLayout', () => ({
   useNodeLayout: () => ({
     position: { x: 100, y: 50 },
     size: { width: 200, height: 100 },
+    zIndex: 0,
     startDrag: vi.fn(),
     handleDrag: vi.fn(),
-    endDrag: vi.fn()
+    endDrag: vi.fn(),
+    moveTo: vi.fn()
   })
 }))
 
@@ -77,7 +79,7 @@ vi.mock('@/renderer/extensions/vueNodes/preview/useNodePreviewState', () => ({
   }))
 }))
 
-vi.mock('../composables/useNodeResize', () => ({
+vi.mock('../interactions/resize/useNodeResize', () => ({
   useNodeResize: vi.fn(() => ({
     startResize: vi.fn(),
     isResizing: computed(() => false)
@@ -197,11 +199,11 @@ describe('LGraphNode', () => {
     expect(wrapper.classes()).toContain('outline-node-component-outline')
   })
 
-  it('should apply executing animation when executing prop is true', () => {
+  it('should render progress indicator when executing prop is true', () => {
     mockData.mockExecuting = true
 
     const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
-    expect(wrapper.classes()).toContain('animate-pulse')
+    expect(wrapper.classes()).toContain('border-node-stroke-executing')
   })
 })
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts
new file mode 100644
index 000000000..d954e59b4
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  computeResizeOutcome,
+  createResizeSession,
+  toCanvasDelta
+} from '@/renderer/extensions/vueNodes/interactions/resize/resizeMath'
+
+describe('nodeResizeMath', () => {
+  const startSize = { width: 200, height: 120 }
+  const startPosition = { x: 80, y: 160 }
+
+  it('computes resize from bottom-right corner without moving position', () => {
+    const outcome = computeResizeOutcome({
+      startSize,
+      startPosition,
+      delta: { x: 40, y: 20 },
+      handle: { horizontal: 'right', vertical: 'bottom' }
+    })
+
+    expect(outcome.size).toEqual({ width: 240, height: 140 })
+    expect(outcome.position).toEqual(startPosition)
+  })
+
+  it('computes resize from top-left corner adjusting position', () => {
+    const outcome = computeResizeOutcome({
+      startSize,
+      startPosition,
+      delta: { x: -30, y: -20 },
+      handle: { horizontal: 'left', vertical: 'top' }
+    })
+
+    expect(outcome.size).toEqual({ width: 230, height: 140 })
+    expect(outcome.position).toEqual({ x: 50, y: 140 })
+  })
+
+  it('supports reusable resize sessions with snapping', () => {
+    const session = createResizeSession({
+      startSize,
+      startPosition,
+      handle: { horizontal: 'right', vertical: 'bottom' }
+    })
+
+    const snapFn = vi.fn((size: typeof startSize) => ({
+      width: Math.round(size.width / 25) * 25,
+      height: Math.round(size.height / 25) * 25
+    }))
+
+    const applied = session({ x: 13, y: 17 }, snapFn)
+
+    expect(applied.size).toEqual({ width: 225, height: 125 })
+    expect(applied.position).toEqual(startPosition)
+    expect(snapFn).toHaveBeenCalled()
+  })
+
+  it('converts screen delta to canvas delta using scale', () => {
+    const delta = toCanvasDelta({ x: 50, y: 75 }, { x: 150, y: 135 }, 2)
+
+    expect(delta).toEqual({ x: 50, y: 30 })
+  })
+
+  describe('edge cases', () => {
+    it('handles zero scale by using fallback scale of 1', () => {
+      const delta = toCanvasDelta({ x: 50, y: 75 }, { x: 150, y: 135 }, 0)
+
+      expect(delta).toEqual({ x: 100, y: 60 })
+    })
+
+    it('handles negative deltas when resizing from right/bottom', () => {
+      const outcome = computeResizeOutcome({
+        startSize,
+        startPosition,
+        delta: { x: -50, y: -30 },
+        handle: { horizontal: 'right', vertical: 'bottom' }
+      })
+
+      expect(outcome.size).toEqual({ width: 150, height: 90 })
+      expect(outcome.position).toEqual(startPosition)
+    })
+
+    it('handles very large deltas without overflow', () => {
+      const outcome = computeResizeOutcome({
+        startSize,
+        startPosition,
+        delta: { x: 10000, y: 10000 },
+        handle: { horizontal: 'right', vertical: 'bottom' }
+      })
+
+      expect(outcome.size.width).toBe(10200)
+      expect(outcome.size.height).toBe(10120)
+      expect(outcome.position).toEqual(startPosition)
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
index 5db6c5f00..3bb985a47 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -163,7 +163,8 @@ describe('useComboWidget', () => {
     )
     expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
     expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
-      'CheckpointLoaderSimple'
+      'CheckpointLoaderSimple',
+      'ckpt_name'
     )
     expect(widget).toBe(mockWidget)
   })
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
index 08c9ac141..8e44126fe 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
@@ -1,46 +1,62 @@
 import axios from 'axios'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import type { IWidget } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 
-vi.mock('axios', () => {
+const createMockNode = (overrides: Partial<LGraphNode> = {}): LGraphNode => {
+  const node = new LGraphNode('TestNode')
+  Object.assign(node, overrides)
+  return node
+}
+
+const createMockWidget = (overrides = {}): IWidget =>
+  ({ ...overrides }) as unknown as IWidget
+
+const mockCloudAuth = vi.hoisted(() => ({
+  isCloud: false,
+  authHeader: null as { Authorization: string } | null
+}))
+
+vi.mock('axios', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('axios')>()
   return {
     default: {
+      ...actual.default,
       get: vi.fn()
     }
   }
 })
 
-vi.mock('@/i18n', () => ({
-  i18n: {
-    global: {
-      t: vi.fn((key) => key)
-    }
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockCloudAuth.isCloud
   }
 }))
 
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    settings: {}
-  })
-}))
-
-vi.mock('@/scripts/api', () => ({
-  api: {
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn()
+vi.mock('@/stores/firebaseAuthStore', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@/stores/firebaseAuthStore')>()
+  return {
+    ...actual,
+    useFirebaseAuthStore: vi.fn(() => ({
+      getAuthHeader: vi.fn(() => Promise.resolve(mockCloudAuth.authHeader))
+    }))
   }
-}))
+})
 
-vi.mock('@/composables/functional/useChainCallback', () => ({
-  useChainCallback: vi.fn((original, ...callbacks) => {
-    return function (this: any, ...args: any[]) {
-      original?.apply(this, args)
-      callbacks.forEach((cb: any) => cb.apply(this, args))
-    }
-  })
-}))
+vi.mock('@/platform/settings/settingStore', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@/platform/settings/settingStore')>()
+  return {
+    ...actual,
+    useSettingStore: () => ({
+      settings: {}
+    })
+  }
+})
 
 const FIRST_BACKOFF = 1000 // backoff is 1s on first retry
 const DEFAULT_VALUE = 'Loading...'
@@ -56,10 +72,8 @@ function createMockConfig(overrides = {}): RemoteWidgetConfig {
 const createMockOptions = (inputOverrides = {}) => ({
   remoteConfig: createMockConfig(inputOverrides),
   defaultValue: DEFAULT_VALUE,
-  node: {
-    addWidget: vi.fn()
-  } as any,
-  widget: {} as any
+  node: createMockNode(),
+  widget: createMockWidget()
 })
 
 function mockAxiosResponse(data: unknown, status = 200) {
@@ -224,12 +238,19 @@ describe('useRemoteWidget', () => {
         const { hook } = await setupHookWithResponse(mockData)
 
         await getResolvedValue(hook)
+        expect(hook.getCachedValue()).toEqual(mockData)
+
         const refreshedData = ['data that user forced to be fetched']
         mockAxiosResponse(refreshedData)
 
         hook.refreshValue()
-        const data = await getResolvedValue(hook)
-        expect(data).toEqual(refreshedData)
+
+        // Wait for cache to update with refreshed data
+        await vi.waitFor(() => {
+          expect(hook.getCachedValue()).toEqual(refreshedData)
+        })
+
+        expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(2)
       })
 
       it('permanent widgets should still retry if request fails', async () => {
@@ -417,16 +438,25 @@ describe('useRemoteWidget', () => {
     })
 
     it('should prevent duplicate in-flight requests', async () => {
-      const promise = Promise.resolve({ data: ['non-duplicate'] })
-      vi.mocked(axios.get).mockImplementationOnce(() => promise as any)
+      const mockData = ['non-duplicate']
+      mockAxiosResponse(mockData)
 
       const hook = useRemoteWidget(createMockOptions())
-      const [result1, result2] = await Promise.all([
-        getResolvedValue(hook),
-        getResolvedValue(hook)
-      ])
 
-      expect(result1).toBe(result2)
+      // Start two concurrent getValue calls
+      const promise1 = new Promise<void>((resolve) => {
+        hook.getValue(() => resolve())
+      })
+      const promise2 = new Promise<void>((resolve) => {
+        hook.getValue(() => resolve())
+      })
+
+      // Wait for both e
+      await Promise.all([promise1, promise2])
+
+      // Both should see the same cached data
+      expect(hook.getCachedValue()).toEqual(mockData)
+      // Only one axios call should have been made
       expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
     })
   })
@@ -518,6 +548,44 @@ describe('useRemoteWidget', () => {
     })
   })
 
+  describe('cloud distribution authentication', () => {
+    describe('when distribution is cloud', () => {
+      describe('when authenticated', () => {
+        it('passes Firebase authentication token in request headers', async () => {
+          const mockData = ['authenticated data']
+          mockCloudAuth.authHeader = null
+          mockCloudAuth.isCloud = true
+          mockCloudAuth.authHeader = { Authorization: 'Bearer test-token' }
+          mockAxiosResponse(mockData)
+
+          const hook = useRemoteWidget(createMockOptions())
+          await getResolvedValue(hook)
+
+          expect(vi.mocked(axios.get)).toHaveBeenCalledWith(
+            expect.any(String),
+            expect.objectContaining({
+              headers: { Authorization: 'Bearer test-token' }
+            })
+          )
+        })
+      })
+    })
+
+    describe('when distribution is not cloud', () => {
+      it('bypasses authentication for non-cloud environments', async () => {
+        const mockData = ['non-cloud data']
+        mockCloudAuth.isCloud = false
+        mockAxiosResponse(mockData)
+
+        const hook = useRemoteWidget(createMockOptions())
+        await getResolvedValue(hook)
+
+        const axiosCall = vi.mocked(axios.get).mock.calls[0][1]
+        expect(axiosCall).not.toHaveProperty('headers')
+      })
+    })
+  })
+
   describe('auto-refresh on task completion', () => {
     it('should add auto-refresh toggle widget', () => {
       const mockNode = {
@@ -550,6 +618,7 @@ describe('useRemoteWidget', () => {
 
     it('should register event listener when enabled', async () => {
       const { api } = await import('@/scripts/api')
+      const addEventListenerSpy = vi.spyOn(api, 'addEventListener')
 
       const mockNode = {
         addWidget: vi.fn(),
@@ -567,7 +636,7 @@ describe('useRemoteWidget', () => {
       })
 
       // Event listener should be registered immediately
-      expect(api.addEventListener).toHaveBeenCalledWith(
+      expect(addEventListenerSpy).toHaveBeenCalledWith(
         'execution_success',
         expect.any(Function)
       )
@@ -577,8 +646,7 @@ describe('useRemoteWidget', () => {
       const { api } = await import('@/scripts/api')
       let executionSuccessHandler: (() => void) | undefined
 
-      // Capture the event handler
-      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+      vi.spyOn(api, 'addEventListener').mockImplementation((event, handler) => {
         if (event === 'execution_success') {
           executionSuccessHandler = handler as () => void
         }
@@ -616,8 +684,7 @@ describe('useRemoteWidget', () => {
       const { api } = await import('@/scripts/api')
       let executionSuccessHandler: (() => void) | undefined
 
-      // Capture the event handler
-      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+      vi.spyOn(api, 'addEventListener').mockImplementation((event, handler) => {
         if (event === 'execution_success') {
           executionSuccessHandler = handler as () => void
         }
@@ -650,13 +717,14 @@ describe('useRemoteWidget', () => {
       const { api } = await import('@/scripts/api')
       let executionSuccessHandler: (() => void) | undefined
 
-      // Capture the event handler
-      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+      vi.spyOn(api, 'addEventListener').mockImplementation((event, handler) => {
         if (event === 'execution_success') {
           executionSuccessHandler = handler as () => void
         }
       })
 
+      const removeEventListenerSpy = vi.spyOn(api, 'removeEventListener')
+
       const mockNode = {
         addWidget: vi.fn(),
         widgets: [],
@@ -676,7 +744,7 @@ describe('useRemoteWidget', () => {
       // Simulate node removal
       mockNode.onRemoved?.()
 
-      expect(api.removeEventListener).toHaveBeenCalledWith(
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
         'execution_success',
         executionSuccessHandler
       )
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
index 773ed8364..7c1d2dd5d 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
@@ -123,10 +123,6 @@ describe('widgetRegistry', () => {
       expect(shouldRenderAsVue({ type: 'combo' })).toBe(true)
     })
 
-    it('should return false for unknown types', () => {
-      expect(shouldRenderAsVue({ type: 'unknown_type' })).toBe(false)
-    })
-
     it('should respect options while checking type', () => {
       const widget = { type: 'text', options: { someOption: 'value' } }
       expect(shouldRenderAsVue(widget)).toBe(true)
diff --git a/tests-ui/tests/services/algoliaSearchProvider.test.ts b/tests-ui/tests/services/algoliaSearchProvider.test.ts
index 7d4dbf2b3..39dfae348 100644
--- a/tests-ui/tests/services/algoliaSearchProvider.test.ts
+++ b/tests-ui/tests/services/algoliaSearchProvider.test.ts
@@ -5,7 +5,6 @@ import { useAlgoliaSearchProvider } from '@/services/providers/algoliaSearchProv
 import { SortableAlgoliaField } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 // Mock global Algolia constants
-
 ;(global as any).__ALGOLIA_APP_ID__ = 'test-app-id'
 ;(global as any).__ALGOLIA_API_KEY__ = 'test-api-key'
 
diff --git a/tests-ui/tests/services/assetService.test.ts b/tests-ui/tests/services/assetService.test.ts
index b6386bc2b..f8c3f9414 100644
--- a/tests-ui/tests/services/assetService.test.ts
+++ b/tests-ui/tests/services/assetService.test.ts
@@ -16,15 +16,12 @@ const mockGetCategoryForNodeType = vi.fn()
 
 vi.mock('@/stores/modelToNodeStore', () => ({
   useModelToNodeStore: vi.fn(() => ({
-    getRegisteredNodeTypes: vi.fn(
-      () =>
-        new Set([
-          'CheckpointLoaderSimple',
-          'LoraLoader',
-          'VAELoader',
-          'TestNode'
-        ])
-    ),
+    getRegisteredNodeTypes: vi.fn(() => ({
+      CheckpointLoaderSimple: 'ckpt_name',
+      LoraLoader: 'lora_name',
+      VAELoader: 'vae_name',
+      TestNode: ''
+    })),
     getCategoryForNodeType: mockGetCategoryForNodeType,
     modelToNodeMap: {
       checkpoints: [{ nodeDef: { name: 'CheckpointLoaderSimple' } }],
@@ -191,19 +188,19 @@ describe('assetService', () => {
   })
 
   describe('isAssetBrowserEligible', () => {
-    it('should return true for registered node types', () => {
-      expect(
-        assetService.isAssetBrowserEligible('CheckpointLoaderSimple')
-      ).toBe(true)
-      expect(assetService.isAssetBrowserEligible('LoraLoader')).toBe(true)
-      expect(assetService.isAssetBrowserEligible('VAELoader')).toBe(true)
-    })
-
-    it('should return false for unregistered node types', () => {
-      expect(assetService.isAssetBrowserEligible('UnknownNode')).toBe(false)
-      expect(assetService.isAssetBrowserEligible('NotRegistered')).toBe(false)
-      expect(assetService.isAssetBrowserEligible('')).toBe(false)
-    })
+    it.for<[string, string, boolean, string]>([
+      ['CheckpointLoaderSimple', 'ckpt_name', true, 'valid inputs'],
+      ['LoraLoader', 'lora_name', true, 'valid inputs'],
+      ['VAELoader', 'vae_name', true, 'valid inputs'],
+      ['CheckpointLoaderSimple', 'type', false, 'other combo widgets'],
+      ['UnknownNode', 'widget', false, 'unregistered types'],
+      ['NotRegistered', 'widget', false, 'unregistered types']
+    ])(
+      'isAssetBrowserEligible("%s", "%s") should return %s for %s',
+      ([type, name, expected]) => {
+        expect(assetService.isAssetBrowserEligible(type, name)).toBe(expected)
+      }
+    )
   })
 
   describe('getAssetsForNodeType', () => {
@@ -297,7 +294,7 @@ describe('assetService', () => {
       const result = await assetService.getAssetsByTag('models')
 
       expect(api.fetchApi).toHaveBeenCalledWith(
-        '/assets?include_tags=models&limit=500'
+        '/assets?include_tags=models&limit=500&include_public=true'
       )
       expect(result).toEqual(testAssets)
     })
@@ -355,5 +352,29 @@ describe('assetService', () => {
       expect(result[0]).toHaveProperty('asset_hash', 'blake3:full123')
       expect(result[0]).toHaveProperty('user_metadata')
     })
+
+    it('should exclude public assets when includePublic is false', async () => {
+      const testAssets = [MOCK_ASSETS.checkpoints]
+      mockApiResponse(testAssets)
+
+      const result = await assetService.getAssetsByTag('input', false)
+
+      expect(api.fetchApi).toHaveBeenCalledWith(
+        '/assets?include_tags=input&limit=500&include_public=false'
+      )
+      expect(result).toEqual(testAssets)
+    })
+
+    it('should include public assets when includePublic is true', async () => {
+      const testAssets = [MOCK_ASSETS.checkpoints, MOCK_ASSETS.loras]
+      mockApiResponse(testAssets)
+
+      const result = await assetService.getAssetsByTag('models', true)
+
+      expect(api.fetchApi).toHaveBeenCalledWith(
+        '/assets?include_tags=models&limit=500&include_public=true'
+      )
+      expect(result).toEqual(testAssets)
+    })
   })
 })
diff --git a/tests-ui/tests/store/executionStore.test.ts b/tests-ui/tests/store/executionStore.test.ts
index 498148e57..5b7c934ab 100644
--- a/tests-ui/tests/store/executionStore.test.ts
+++ b/tests-ui/tests/store/executionStore.test.ts
@@ -1,22 +1,31 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
 
+// Create mock functions that will be shared
+const mockNodeExecutionIdToNodeLocatorId = vi.fn()
+const mockNodeIdToNodeLocatorId = vi.fn()
+const mockNodeLocatorIdToNodeExecutionId = vi.fn()
+
 // Mock the workflowStore
-vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: vi.fn(() => ({
-    nodeExecutionIdToNodeLocatorId: vi.fn(),
-    nodeIdToNodeLocatorId: vi.fn(),
-    nodeLocatorIdToNodeExecutionId: vi.fn()
-  }))
-}))
+vi.mock('@/platform/workflow/management/stores/workflowStore', async () => {
+  const { ComfyWorkflow } = await vi.importActual<
+    typeof import('@/platform/workflow/management/stores/workflowStore')
+  >('@/platform/workflow/management/stores/workflowStore')
+  return {
+    ComfyWorkflow,
+    useWorkflowStore: vi.fn(() => ({
+      nodeExecutionIdToNodeLocatorId: mockNodeExecutionIdToNodeLocatorId,
+      nodeIdToNodeLocatorId: mockNodeIdToNodeLocatorId,
+      nodeLocatorIdToNodeExecutionId: mockNodeLocatorIdToNodeExecutionId
+    }))
+  }
+})
 
 // Remove any previous global types
 declare global {
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface Window {}
 }
 
@@ -37,7 +46,8 @@ vi.mock('@/composables/node/useNodeProgressText', () => ({
 vi.mock('@/scripts/app', () => ({
   app: {
     graph: {
-      getNodeById: vi.fn()
+      getNodeById: vi.fn(),
+      _nodes: [] // Add _nodes array for workflowStore iteration
     },
     revokePreviews: vi.fn(),
     nodePreviewImages: {}
@@ -98,24 +108,16 @@ describe('executionStore - display_component handling', () => {
 
 describe('useExecutionStore - NodeLocatorId conversions', () => {
   let store: ReturnType<typeof useExecutionStore>
-  let workflowStore: ReturnType<typeof useWorkflowStore>
 
   beforeEach(() => {
-    setActivePinia(createPinia())
-
-    // Create the mock workflowStore instance
-    const mockWorkflowStore = {
-      nodeExecutionIdToNodeLocatorId: vi.fn(),
-      nodeIdToNodeLocatorId: vi.fn(),
-      nodeLocatorIdToNodeExecutionId: vi.fn()
-    }
-
-    // Mock the useWorkflowStore function to return our mock
-    vi.mocked(useWorkflowStore).mockReturnValue(mockWorkflowStore as any)
-
-    workflowStore = mockWorkflowStore as any
-    store = useExecutionStore()
     vi.clearAllMocks()
+    // Reset mock implementations
+    mockNodeExecutionIdToNodeLocatorId.mockReset()
+    mockNodeIdToNodeLocatorId.mockReset()
+    mockNodeLocatorIdToNodeExecutionId.mockReset()
+
+    setActivePinia(createPinia())
+    store = useExecutionStore()
   })
 
   describe('executionIdToNodeLocatorId', () => {
@@ -154,38 +156,31 @@ describe('useExecutionStore - NodeLocatorId conversions', () => {
       expect(result).toBe('123')
     })
 
-    it('should return null when conversion fails', () => {
+    it('should return undefined when conversion fails', () => {
       // Mock app.graph.getNodeById to return null (node not found)
       vi.mocked(app.graph.getNodeById).mockReturnValue(null)
 
-      // This should throw an error as the node is not found
-      expect(() => store.executionIdToNodeLocatorId('999:456')).toThrow(
-        'Subgraph not found: 999'
-      )
+      expect(store.executionIdToNodeLocatorId('999:456')).toBe(undefined)
     })
   })
 
   describe('nodeLocatorIdToExecutionId', () => {
     it('should convert NodeLocatorId to execution ID', () => {
       const mockExecutionId = '123:456'
-      vi.spyOn(workflowStore, 'nodeLocatorIdToNodeExecutionId').mockReturnValue(
-        mockExecutionId as any
-      )
+      mockNodeLocatorIdToNodeExecutionId.mockReturnValue(mockExecutionId)
 
       const result = store.nodeLocatorIdToExecutionId(
         'a1b2c3d4-e5f6-7890-abcd-ef1234567890:456'
       )
 
-      expect(workflowStore.nodeLocatorIdToNodeExecutionId).toHaveBeenCalledWith(
+      expect(mockNodeLocatorIdToNodeExecutionId).toHaveBeenCalledWith(
         'a1b2c3d4-e5f6-7890-abcd-ef1234567890:456'
       )
       expect(result).toBe(mockExecutionId)
     })
 
     it('should return null when conversion fails', () => {
-      vi.spyOn(workflowStore, 'nodeLocatorIdToNodeExecutionId').mockReturnValue(
-        null
-      )
+      mockNodeLocatorIdToNodeExecutionId.mockReturnValue(null)
 
       const result = store.nodeLocatorIdToExecutionId('invalid:format')
 
diff --git a/tests-ui/tests/store/firebaseAuthStore.test.ts b/tests-ui/tests/store/firebaseAuthStore.test.ts
index d37c3857a..3065e5bf0 100644
--- a/tests-ui/tests/store/firebaseAuthStore.test.ts
+++ b/tests-ui/tests/store/firebaseAuthStore.test.ts
@@ -56,6 +56,7 @@ vi.mock('firebase/auth', async (importOriginal) => {
     createUserWithEmailAndPassword: vi.fn(),
     signOut: vi.fn(),
     onAuthStateChanged: vi.fn(),
+    onIdTokenChanged: vi.fn(),
     signInWithPopup: vi.fn(),
     GoogleAuthProvider: class {
       addScope = vi.fn()
diff --git a/tests-ui/tests/store/modelToNodeStore.test.ts b/tests-ui/tests/store/modelToNodeStore.test.ts
index c04f1764d..c79af19b5 100644
--- a/tests-ui/tests/store/modelToNodeStore.test.ts
+++ b/tests-ui/tests/store/modelToNodeStore.test.ts
@@ -288,7 +288,7 @@ describe('useModelToNodeStore', () => {
 
       // Non-existent nodes are filtered out from registered types
       const types = modelToNodeStore.getRegisteredNodeTypes()
-      expect(types.has('NonExistentLoader')).toBe(false)
+      expect(types['NonExistentLoader']).toBe(undefined)
 
       expect(
         modelToNodeStore.getCategoryForNodeType('NonExistentLoader')
@@ -347,13 +347,13 @@ describe('useModelToNodeStore', () => {
   })
 
   describe('getRegisteredNodeTypes', () => {
-    it('should return a Set instance', () => {
+    it('should return an object', () => {
       const modelToNodeStore = useModelToNodeStore()
       const result = modelToNodeStore.getRegisteredNodeTypes()
-      expect(result).toBeInstanceOf(Set)
+      expect(result).toBeTypeOf('object')
     })
 
-    it('should return empty set when nodeDefStore is empty', () => {
+    it('should return empty Record when nodeDefStore is empty', () => {
       // Create fresh Pinia for this test to avoid state persistence
       setActivePinia(createPinia())
 
@@ -363,7 +363,7 @@ describe('useModelToNodeStore', () => {
       const modelToNodeStore = useModelToNodeStore()
 
       const result = modelToNodeStore.getRegisteredNodeTypes()
-      expect(result.size).toBe(0)
+      expect(result).toStrictEqual({})
 
       // Restore original mock for subsequent tests
       vi.mocked(useNodeDefStore, { partial: true }).mockReturnValue({
@@ -371,16 +371,15 @@ describe('useModelToNodeStore', () => {
       })
     })
 
-    it('should contain node types for efficient Set.has() lookups', () => {
+    it('should contain node types to resolve widget name', () => {
       const modelToNodeStore = useModelToNodeStore()
       modelToNodeStore.registerDefaults()
 
       const result = modelToNodeStore.getRegisteredNodeTypes()
 
-      // Test Set.has() functionality which assetService depends on
-      expect(result.has('CheckpointLoaderSimple')).toBe(true)
-      expect(result.has('LoraLoader')).toBe(true)
-      expect(result.has('NonExistentNode')).toBe(false)
+      expect(result['CheckpointLoaderSimple']).toBe('ckpt_name')
+      expect(result['LoraLoader']).toBe('lora_name')
+      expect(result['NonExistentNode']).toBe(undefined)
     })
   })
 
diff --git a/tests-ui/tests/store/queueStore.test.ts b/tests-ui/tests/store/queueStore.test.ts
index 313673e69..e01ec5afd 100644
--- a/tests-ui/tests/store/queueStore.test.ts
+++ b/tests-ui/tests/store/queueStore.test.ts
@@ -1,6 +1,85 @@
-import { describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { TaskItemImpl } from '@/stores/queueStore'
+import type {
+  HistoryTaskItem,
+  PendingTaskItem,
+  RunningTaskItem,
+  TaskOutput,
+  TaskPrompt,
+  TaskStatus
+} from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
+import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+
+// Fixture factories
+const createTaskPrompt = (
+  queueIndex: number,
+  promptId: string,
+  inputs: Record<string, any> = {},
+  extraData: Record<string, any> = {},
+  outputsToExecute: any[] = []
+): TaskPrompt => [queueIndex, promptId, inputs, extraData, outputsToExecute]
+
+const createTaskStatus = (
+  statusStr: 'success' | 'error' = 'success',
+  messages: any[] = []
+): TaskStatus => ({
+  status_str: statusStr,
+  completed: true,
+  messages
+})
+
+const createTaskOutput = (
+  nodeId: string = 'node-1',
+  images: any[] = []
+): TaskOutput => ({
+  [nodeId]: {
+    images
+  }
+})
+
+const createRunningTask = (
+  queueIndex: number,
+  promptId: string
+): RunningTaskItem => ({
+  taskType: 'Running',
+  prompt: createTaskPrompt(queueIndex, promptId),
+  remove: { name: 'Cancel', cb: () => {} }
+})
+
+const createPendingTask = (
+  queueIndex: number,
+  promptId: string
+): PendingTaskItem => ({
+  taskType: 'Pending',
+  prompt: createTaskPrompt(queueIndex, promptId)
+})
+
+const createHistoryTask = (
+  queueIndex: number,
+  promptId: string,
+  outputs: TaskOutput = createTaskOutput(),
+  status: TaskStatus = createTaskStatus()
+): HistoryTaskItem => ({
+  taskType: 'History',
+  prompt: createTaskPrompt(queueIndex, promptId),
+  status,
+  outputs
+})
+
+// Mock API
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getQueue: vi.fn(),
+    getHistory: vi.fn(),
+    clearItems: vi.fn(),
+    deleteItem: vi.fn(),
+    apiURL: vi.fn((path) => `/api${path}`),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
 
 describe('TaskItemImpl', () => {
   it('should remove animated property from outputs during construction', () => {
@@ -154,3 +233,541 @@ describe('TaskItemImpl', () => {
     })
   })
 })
+
+describe('useQueueStore', () => {
+  let store: ReturnType<typeof useQueueStore>
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    store = useQueueStore()
+    vi.clearAllMocks()
+  })
+
+  const mockGetQueue = vi.mocked(api.getQueue)
+  const mockGetHistory = vi.mocked(api.getHistory)
+  const mockClearItems = vi.mocked(api.clearItems)
+  const mockDeleteItem = vi.mocked(api.deleteItem)
+
+  describe('initial state', () => {
+    it('should have empty state on initialization', () => {
+      expect(store.runningTasks).toEqual([])
+      expect(store.pendingTasks).toEqual([])
+      expect(store.historyTasks).toEqual([])
+      expect(store.isLoading).toBe(false)
+      expect(store.maxHistoryItems).toBe(64)
+    })
+
+    it('should have empty computed tasks', () => {
+      expect(store.tasks).toEqual([])
+      expect(store.flatTasks).toEqual([])
+      expect(store.hasPendingTasks).toBe(false)
+      expect(store.lastHistoryQueueIndex).toBe(-1)
+    })
+  })
+
+  describe('update() - basic functionality', () => {
+    it('should load running and pending tasks from API', async () => {
+      const runningTask = createRunningTask(1, 'run-1')
+      const pendingTask1 = createPendingTask(2, 'pend-1')
+      const pendingTask2 = createPendingTask(3, 'pend-2')
+
+      mockGetQueue.mockResolvedValue({
+        Running: [runningTask],
+        Pending: [pendingTask1, pendingTask2]
+      })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.update()
+
+      expect(store.runningTasks).toHaveLength(1)
+      expect(store.pendingTasks).toHaveLength(2)
+      expect(store.runningTasks[0].promptId).toBe('run-1')
+      expect(store.pendingTasks[0].promptId).toBe('pend-2')
+      expect(store.pendingTasks[1].promptId).toBe('pend-1')
+    })
+
+    it('should load history tasks from API', async () => {
+      const historyTask1 = createHistoryTask(5, 'hist-1')
+      const historyTask2 = createHistoryTask(4, 'hist-2')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({
+        History: [historyTask1, historyTask2]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(2)
+      expect(store.historyTasks[0].promptId).toBe('hist-1')
+      expect(store.historyTasks[1].promptId).toBe('hist-2')
+    })
+
+    it('should set loading state correctly', async () => {
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      expect(store.isLoading).toBe(false)
+
+      const updatePromise = store.update()
+      expect(store.isLoading).toBe(true)
+
+      await updatePromise
+      expect(store.isLoading).toBe(false)
+    })
+
+    it('should clear loading state even if API fails', async () => {
+      mockGetQueue.mockRejectedValue(new Error('API error'))
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await expect(store.update()).rejects.toThrow('API error')
+      expect(store.isLoading).toBe(false)
+    })
+  })
+
+  describe('update() - sorting', () => {
+    it('should sort tasks by queueIndex descending', async () => {
+      const task1 = createHistoryTask(1, 'hist-1')
+      const task2 = createHistoryTask(5, 'hist-2')
+      const task3 = createHistoryTask(3, 'hist-3')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({
+        History: [task1, task2, task3]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks[0].queueIndex).toBe(5)
+      expect(store.historyTasks[1].queueIndex).toBe(3)
+      expect(store.historyTasks[2].queueIndex).toBe(1)
+    })
+
+    it('should sort pending tasks by queueIndex descending', async () => {
+      const pend1 = createPendingTask(10, 'pend-1')
+      const pend2 = createPendingTask(15, 'pend-2')
+      const pend3 = createPendingTask(12, 'pend-3')
+
+      mockGetQueue.mockResolvedValue({
+        Running: [],
+        Pending: [pend1, pend2, pend3]
+      })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.update()
+
+      expect(store.pendingTasks[0].queueIndex).toBe(15)
+      expect(store.pendingTasks[1].queueIndex).toBe(12)
+      expect(store.pendingTasks[2].queueIndex).toBe(10)
+    })
+  })
+
+  describe('update() - queue index collision (THE BUG FIX)', () => {
+    it('should NOT confuse different prompts with same queueIndex', async () => {
+      const hist1 = createHistoryTask(50, 'prompt-uuid-aaa')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [hist1] })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(1)
+      expect(store.historyTasks[0].promptId).toBe('prompt-uuid-aaa')
+
+      const hist2 = createHistoryTask(51, 'prompt-uuid-bbb')
+      mockGetHistory.mockResolvedValue({
+        History: [hist2]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(1)
+      expect(store.historyTasks[0].promptId).toBe('prompt-uuid-bbb')
+      expect(store.historyTasks[0].queueIndex).toBe(51)
+    })
+
+    it('should correctly reconcile when queueIndex is reused', async () => {
+      const hist1 = createHistoryTask(100, 'first-prompt-at-100')
+      const hist2 = createHistoryTask(99, 'prompt-at-99')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [hist1, hist2] })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(2)
+
+      const hist3 = createHistoryTask(101, 'second-prompt-at-101')
+      mockGetHistory.mockResolvedValue({
+        History: [hist3, hist2]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(2)
+      const promptIds = store.historyTasks.map((t) => t.promptId)
+      expect(promptIds).toContain('second-prompt-at-101')
+      expect(promptIds).toContain('prompt-at-99')
+      expect(promptIds).not.toContain('first-prompt-at-100')
+    })
+
+    it('should handle multiple queueIndex collisions simultaneously', async () => {
+      const hist1 = createHistoryTask(10, 'old-at-10')
+      const hist2 = createHistoryTask(20, 'old-at-20')
+      const hist3 = createHistoryTask(30, 'keep-at-30')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({
+        History: [hist3, hist2, hist1]
+      })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(3)
+
+      const newHist1 = createHistoryTask(31, 'new-at-31')
+      const newHist2 = createHistoryTask(32, 'new-at-32')
+      mockGetHistory.mockResolvedValue({
+        History: [newHist2, newHist1, hist3]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(3)
+      const promptIds = store.historyTasks.map((t) => t.promptId)
+      expect(promptIds).toEqual(['new-at-32', 'new-at-31', 'keep-at-30'])
+    })
+  })
+
+  describe('update() - history reconciliation', () => {
+    it('should keep existing items still on server (by promptId)', async () => {
+      const hist1 = createHistoryTask(10, 'existing-1')
+      const hist2 = createHistoryTask(9, 'existing-2')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [hist1, hist2] })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(2)
+
+      const hist3 = createHistoryTask(11, 'new-1')
+      mockGetHistory.mockResolvedValue({
+        History: [hist3, hist1, hist2]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(3)
+      expect(store.historyTasks.map((t) => t.promptId)).toContain('existing-1')
+      expect(store.historyTasks.map((t) => t.promptId)).toContain('existing-2')
+      expect(store.historyTasks.map((t) => t.promptId)).toContain('new-1')
+    })
+
+    it('should remove items no longer on server', async () => {
+      const hist1 = createHistoryTask(10, 'remove-me')
+      const hist2 = createHistoryTask(9, 'keep-me')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [hist1, hist2] })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(2)
+
+      mockGetHistory.mockResolvedValue({ History: [hist2] })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(1)
+      expect(store.historyTasks[0].promptId).toBe('keep-me')
+    })
+
+    it('should add new items from server', async () => {
+      const hist1 = createHistoryTask(5, 'old-1')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [hist1] })
+
+      await store.update()
+
+      const hist2 = createHistoryTask(6, 'new-1')
+      const hist3 = createHistoryTask(7, 'new-2')
+      mockGetHistory.mockResolvedValue({
+        History: [hist3, hist2, hist1]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(3)
+      expect(store.historyTasks.map((t) => t.promptId)).toContain('new-1')
+      expect(store.historyTasks.map((t) => t.promptId)).toContain('new-2')
+    })
+  })
+
+  describe('update() - maxHistoryItems limit', () => {
+    it('should enforce maxHistoryItems limit', async () => {
+      store.maxHistoryItems = 3
+
+      const tasks = Array.from({ length: 5 }, (_, i) =>
+        createHistoryTask(10 - i, `hist-${i}`)
+      )
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: tasks })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(3)
+      expect(store.historyTasks[0].queueIndex).toBe(10)
+      expect(store.historyTasks[1].queueIndex).toBe(9)
+      expect(store.historyTasks[2].queueIndex).toBe(8)
+    })
+
+    it('should respect maxHistoryItems when combining new and existing', async () => {
+      store.maxHistoryItems = 5
+
+      const initial = Array.from({ length: 3 }, (_, i) =>
+        createHistoryTask(10 + i, `existing-${i}`)
+      )
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: initial })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(3)
+
+      const newTasks = Array.from({ length: 4 }, (_, i) =>
+        createHistoryTask(20 + i, `new-${i}`)
+      )
+      mockGetHistory.mockResolvedValue({
+        History: [...newTasks, ...initial]
+      })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(5)
+      expect(store.historyTasks[0].queueIndex).toBe(23)
+    })
+
+    it('should handle maxHistoryItems = 0', async () => {
+      store.maxHistoryItems = 0
+
+      const tasks = [createHistoryTask(10, 'hist-1')]
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: tasks })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(0)
+    })
+
+    it('should handle maxHistoryItems = 1', async () => {
+      store.maxHistoryItems = 1
+
+      const tasks = [
+        createHistoryTask(10, 'hist-1'),
+        createHistoryTask(9, 'hist-2')
+      ]
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: tasks })
+
+      await store.update()
+
+      expect(store.historyTasks).toHaveLength(1)
+      expect(store.historyTasks[0].queueIndex).toBe(10)
+    })
+
+    it('should dynamically adjust when maxHistoryItems changes', async () => {
+      store.maxHistoryItems = 10
+
+      const tasks = Array.from({ length: 15 }, (_, i) =>
+        createHistoryTask(20 - i, `hist-${i}`)
+      )
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: tasks })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(10)
+
+      store.maxHistoryItems = 5
+      mockGetHistory.mockResolvedValue({ History: tasks })
+
+      await store.update()
+      expect(store.historyTasks).toHaveLength(5)
+    })
+  })
+
+  describe('computed properties', () => {
+    it('tasks should combine pending, running, and history in correct order', async () => {
+      const running = createRunningTask(5, 'run-1')
+      const pending1 = createPendingTask(6, 'pend-1')
+      const pending2 = createPendingTask(7, 'pend-2')
+      const hist1 = createHistoryTask(3, 'hist-1')
+      const hist2 = createHistoryTask(4, 'hist-2')
+
+      mockGetQueue.mockResolvedValue({
+        Running: [running],
+        Pending: [pending1, pending2]
+      })
+      mockGetHistory.mockResolvedValue({
+        History: [hist2, hist1]
+      })
+
+      await store.update()
+
+      expect(store.tasks).toHaveLength(5)
+      expect(store.tasks[0].taskType).toBe('Pending')
+      expect(store.tasks[1].taskType).toBe('Pending')
+      expect(store.tasks[2].taskType).toBe('Running')
+      expect(store.tasks[3].taskType).toBe('History')
+      expect(store.tasks[4].taskType).toBe('History')
+    })
+
+    it('hasPendingTasks should be true when pending tasks exist', async () => {
+      mockGetQueue.mockResolvedValue({
+        Running: [],
+        Pending: [createPendingTask(1, 'pend-1')]
+      })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.update()
+      expect(store.hasPendingTasks).toBe(true)
+    })
+
+    it('hasPendingTasks should be false when no pending tasks', async () => {
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.update()
+      expect(store.hasPendingTasks).toBe(false)
+    })
+
+    it('lastHistoryQueueIndex should return highest queue index', async () => {
+      const hist1 = createHistoryTask(10, 'hist-1')
+      const hist2 = createHistoryTask(25, 'hist-2')
+      const hist3 = createHistoryTask(15, 'hist-3')
+
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({
+        History: [hist1, hist2, hist3]
+      })
+
+      await store.update()
+      expect(store.lastHistoryQueueIndex).toBe(25)
+    })
+
+    it('lastHistoryQueueIndex should be -1 when no history', async () => {
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.update()
+      expect(store.lastHistoryQueueIndex).toBe(-1)
+    })
+  })
+
+  describe('clear()', () => {
+    beforeEach(async () => {
+      mockGetQueue.mockResolvedValue({
+        Running: [createRunningTask(1, 'run-1')],
+        Pending: [createPendingTask(2, 'pend-1')]
+      })
+      mockGetHistory.mockResolvedValue({
+        History: [createHistoryTask(3, 'hist-1')]
+      })
+      await store.update()
+    })
+
+    it('should clear both queue and history by default', async () => {
+      mockClearItems.mockResolvedValue(undefined)
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.clear()
+
+      expect(mockClearItems).toHaveBeenCalledTimes(2)
+      expect(mockClearItems).toHaveBeenCalledWith('queue')
+      expect(mockClearItems).toHaveBeenCalledWith('history')
+      expect(store.runningTasks).toHaveLength(0)
+      expect(store.pendingTasks).toHaveLength(0)
+      expect(store.historyTasks).toHaveLength(0)
+    })
+
+    it('should clear only queue when specified', async () => {
+      mockClearItems.mockResolvedValue(undefined)
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({
+        History: [createHistoryTask(3, 'hist-1')]
+      })
+
+      await store.clear(['queue'])
+
+      expect(mockClearItems).toHaveBeenCalledTimes(1)
+      expect(mockClearItems).toHaveBeenCalledWith('queue')
+      expect(store.historyTasks).toHaveLength(1)
+    })
+
+    it('should clear only history when specified', async () => {
+      mockClearItems.mockResolvedValue(undefined)
+      mockGetQueue.mockResolvedValue({
+        Running: [createRunningTask(1, 'run-1')],
+        Pending: [createPendingTask(2, 'pend-1')]
+      })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.clear(['history'])
+
+      expect(mockClearItems).toHaveBeenCalledTimes(1)
+      expect(mockClearItems).toHaveBeenCalledWith('history')
+      expect(store.runningTasks).toHaveLength(1)
+      expect(store.pendingTasks).toHaveLength(1)
+    })
+
+    it('should do nothing when empty array passed', async () => {
+      await store.clear([])
+
+      expect(mockClearItems).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('delete()', () => {
+    it('should delete task from queue', async () => {
+      const task = new TaskItemImpl('Pending', createTaskPrompt(1, 'pend-1'))
+
+      mockDeleteItem.mockResolvedValue(undefined)
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.delete(task)
+
+      expect(mockDeleteItem).toHaveBeenCalledWith('queue', 'pend-1')
+    })
+
+    it('should delete task from history', async () => {
+      const task = new TaskItemImpl(
+        'History',
+        createTaskPrompt(1, 'hist-1'),
+        createTaskStatus(),
+        createTaskOutput()
+      )
+
+      mockDeleteItem.mockResolvedValue(undefined)
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.delete(task)
+
+      expect(mockDeleteItem).toHaveBeenCalledWith('history', 'hist-1')
+    })
+
+    it('should refresh store after deletion', async () => {
+      const task = new TaskItemImpl('Pending', createTaskPrompt(1, 'pend-1'))
+
+      mockDeleteItem.mockResolvedValue(undefined)
+      mockGetQueue.mockResolvedValue({ Running: [], Pending: [] })
+      mockGetHistory.mockResolvedValue({ History: [] })
+
+      await store.delete(task)
+
+      expect(mockGetQueue).toHaveBeenCalled()
+      expect(mockGetHistory).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/tests-ui/tests/store/subgraphStore.test.ts b/tests-ui/tests/store/subgraphStore.test.ts
index b97e1b149..d41c3e817 100644
--- a/tests-ui/tests/store/subgraphStore.test.ts
+++ b/tests-ui/tests/store/subgraphStore.test.ts
@@ -13,6 +13,11 @@ import {
   createTestSubgraphNode
 } from '../litegraph/subgraph/fixtures/subgraphHelpers'
 
+// Mock telemetry to break circular dependency (telemetry → workflowStore → app → telemetry)
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => null
+}))
+
 // Add mock for api at the top of the file
 vi.mock('@/scripts/api', () => ({
   api: {
diff --git a/tests-ui/tests/stores/queueStore.loadWorkflow.test.ts b/tests-ui/tests/stores/queueStore.loadWorkflow.test.ts
new file mode 100644
index 000000000..3ff57f593
--- /dev/null
+++ b/tests-ui/tests/stores/queueStore.loadWorkflow.test.ts
@@ -0,0 +1,175 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { ComfyApp } from '@/scripts/app'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { TaskItemImpl } from '@/stores/queueStore'
+import * as getWorkflowModule from '@/platform/workflow/cloud'
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+vi.mock('@/services/extensionService', () => ({
+  useExtensionService: vi.fn(() => ({
+    invokeExtensions: vi.fn()
+  }))
+}))
+
+const mockWorkflow: ComfyWorkflowJSON = {
+  id: 'test-workflow-id',
+  revision: 0,
+  last_node_id: 5,
+  last_link_id: 3,
+  nodes: [],
+  links: [],
+  groups: [],
+  config: {},
+  extra: {},
+  version: 0.4
+}
+
+const createHistoryTaskWithWorkflow = (): TaskItemImpl => {
+  return new TaskItemImpl(
+    'History',
+    [
+      0, // queueIndex
+      'test-prompt-id', // promptId
+      {}, // promptInputs
+      {
+        client_id: 'test-client',
+        extra_pnginfo: {
+          workflow: mockWorkflow
+        }
+      },
+      [] // outputsToExecute
+    ],
+    {
+      status_str: 'success',
+      completed: true,
+      messages: []
+    },
+    {} // outputs
+  )
+}
+
+const createHistoryTaskWithoutWorkflow = (): TaskItemImpl => {
+  return new TaskItemImpl(
+    'History',
+    [
+      0,
+      'test-prompt-id',
+      {},
+      {
+        client_id: 'test-client'
+        // No extra_pnginfo.workflow
+      },
+      []
+    ],
+    {
+      status_str: 'success',
+      completed: true,
+      messages: []
+    },
+    {}
+  )
+}
+
+describe('TaskItemImpl.loadWorkflow - cloud history workflow fetching', () => {
+  let mockApp: ComfyApp
+  let mockFetchApi: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+
+    mockFetchApi = vi.fn()
+    mockApp = {
+      loadGraphData: vi.fn(),
+      nodeOutputs: {},
+      api: {
+        fetchApi: mockFetchApi
+      }
+    } as unknown as ComfyApp
+
+    vi.spyOn(getWorkflowModule, 'getWorkflowFromHistory')
+  })
+
+  it('should load workflow directly when workflow is in extra_pnginfo', async () => {
+    const task = createHistoryTaskWithWorkflow()
+
+    await task.loadWorkflow(mockApp)
+
+    expect(mockApp.loadGraphData).toHaveBeenCalledWith(mockWorkflow)
+    expect(mockFetchApi).not.toHaveBeenCalled()
+  })
+
+  it('should fetch workflow from cloud when workflow is missing from history task', async () => {
+    const task = createHistoryTaskWithoutWorkflow()
+
+    // Mock getWorkflowFromHistory to return workflow
+    vi.spyOn(getWorkflowModule, 'getWorkflowFromHistory').mockResolvedValue(
+      mockWorkflow
+    )
+
+    await task.loadWorkflow(mockApp)
+
+    expect(getWorkflowModule.getWorkflowFromHistory).toHaveBeenCalledWith(
+      expect.any(Function),
+      'test-prompt-id'
+    )
+    expect(mockApp.loadGraphData).toHaveBeenCalledWith(mockWorkflow)
+  })
+
+  it('should not load workflow when fetch returns undefined', async () => {
+    const task = createHistoryTaskWithoutWorkflow()
+
+    vi.spyOn(getWorkflowModule, 'getWorkflowFromHistory').mockResolvedValue(
+      undefined
+    )
+
+    await task.loadWorkflow(mockApp)
+
+    expect(getWorkflowModule.getWorkflowFromHistory).toHaveBeenCalled()
+    expect(mockApp.loadGraphData).not.toHaveBeenCalled()
+  })
+
+  it('should only fetch for history tasks, not running tasks', async () => {
+    const runningTask = new TaskItemImpl(
+      'Running',
+      [
+        0,
+        'test-prompt-id',
+        {},
+        {
+          client_id: 'test-client'
+        },
+        []
+      ],
+      undefined,
+      {}
+    )
+
+    vi.spyOn(getWorkflowModule, 'getWorkflowFromHistory').mockResolvedValue(
+      mockWorkflow
+    )
+
+    await runningTask.loadWorkflow(mockApp)
+
+    expect(getWorkflowModule.getWorkflowFromHistory).not.toHaveBeenCalled()
+    expect(mockApp.loadGraphData).not.toHaveBeenCalled()
+  })
+
+  it('should handle fetch errors gracefully by returning undefined', async () => {
+    const task = createHistoryTaskWithoutWorkflow()
+
+    vi.spyOn(getWorkflowModule, 'getWorkflowFromHistory').mockResolvedValue(
+      undefined
+    )
+
+    await task.loadWorkflow(mockApp)
+
+    expect(getWorkflowModule.getWorkflowFromHistory).toHaveBeenCalled()
+    expect(mockApp.loadGraphData).not.toHaveBeenCalled()
+  })
+})
diff --git a/tests-ui/tests/utils/formatUtil.test.ts b/tests-ui/tests/utils/formatUtil.test.ts
new file mode 100644
index 000000000..4ab0a7bd2
--- /dev/null
+++ b/tests-ui/tests/utils/formatUtil.test.ts
@@ -0,0 +1,145 @@
+import { describe, expect, it } from 'vitest'
+
+import { getMediaTypeFromFilename, truncateFilename } from '@/utils/formatUtil'
+
+describe('formatUtil', () => {
+  describe('truncateFilename', () => {
+    it('should not truncate short filenames', () => {
+      expect(truncateFilename('test.png')).toBe('test.png')
+      expect(truncateFilename('short.jpg', 10)).toBe('short.jpg')
+    })
+
+    it('should truncate long filenames while preserving extension', () => {
+      const longName = 'this-is-a-very-long-filename-that-needs-truncation.png'
+      const truncated = truncateFilename(longName, 20)
+      expect(truncated).toContain('...')
+      expect(truncated.endsWith('.png')).toBe(true)
+      expect(truncated.length).toBeLessThanOrEqual(25) // 20 + '...' + extension
+    })
+
+    it('should handle filenames without extensions', () => {
+      const longName = 'this-is-a-very-long-filename-without-extension'
+      const truncated = truncateFilename(longName, 20)
+      expect(truncated).toContain('...')
+      expect(truncated.length).toBeLessThanOrEqual(23) // 20 + '...'
+    })
+
+    it('should handle empty strings', () => {
+      expect(truncateFilename('')).toBe('')
+      expect(truncateFilename('', 10)).toBe('')
+    })
+
+    it('should preserve the start and end of the filename', () => {
+      const longName = 'ComfyUI_00001_timestamp_2024_01_01.png'
+      const truncated = truncateFilename(longName, 20)
+      expect(truncated).toMatch(/^ComfyUI.*01\.png$/)
+      expect(truncated).toContain('...')
+    })
+
+    it('should handle files with multiple dots', () => {
+      const filename = 'my.file.with.multiple.dots.txt'
+      const truncated = truncateFilename(filename, 15)
+      expect(truncated.endsWith('.txt')).toBe(true)
+      expect(truncated).toContain('...')
+    })
+  })
+
+  describe('getMediaTypeFromFilename', () => {
+    describe('image files', () => {
+      const imageTestCases = [
+        { filename: 'test.png', expected: 'image' },
+        { filename: 'photo.jpg', expected: 'image' },
+        { filename: 'image.jpeg', expected: 'image' },
+        { filename: 'animation.gif', expected: 'image' },
+        { filename: 'web.webp', expected: 'image' },
+        { filename: 'bitmap.bmp', expected: 'image' }
+      ]
+
+      it.for(imageTestCases)(
+        'should identify $filename as $expected',
+        ({ filename, expected }) => {
+          expect(getMediaTypeFromFilename(filename)).toBe(expected)
+        }
+      )
+
+      it('should handle uppercase extensions', () => {
+        expect(getMediaTypeFromFilename('test.PNG')).toBe('image')
+        expect(getMediaTypeFromFilename('photo.JPG')).toBe('image')
+      })
+    })
+
+    describe('video files', () => {
+      it('should identify video extensions correctly', () => {
+        expect(getMediaTypeFromFilename('video.mp4')).toBe('video')
+        expect(getMediaTypeFromFilename('clip.webm')).toBe('video')
+        expect(getMediaTypeFromFilename('movie.mov')).toBe('video')
+        expect(getMediaTypeFromFilename('film.avi')).toBe('video')
+      })
+    })
+
+    describe('audio files', () => {
+      it('should identify audio extensions correctly', () => {
+        expect(getMediaTypeFromFilename('song.mp3')).toBe('audio')
+        expect(getMediaTypeFromFilename('sound.wav')).toBe('audio')
+        expect(getMediaTypeFromFilename('music.ogg')).toBe('audio')
+        expect(getMediaTypeFromFilename('audio.flac')).toBe('audio')
+      })
+    })
+
+    describe('3D files', () => {
+      it('should identify 3D file extensions correctly', () => {
+        expect(getMediaTypeFromFilename('model.obj')).toBe('3D')
+        expect(getMediaTypeFromFilename('scene.fbx')).toBe('3D')
+        expect(getMediaTypeFromFilename('asset.gltf')).toBe('3D')
+        expect(getMediaTypeFromFilename('binary.glb')).toBe('3D')
+      })
+    })
+
+    describe('edge cases', () => {
+      it('should handle empty strings', () => {
+        expect(getMediaTypeFromFilename('')).toBe('image')
+      })
+
+      it('should handle files without extensions', () => {
+        expect(getMediaTypeFromFilename('README')).toBe('image')
+      })
+
+      it('should handle unknown extensions', () => {
+        expect(getMediaTypeFromFilename('document.pdf')).toBe('image')
+        expect(getMediaTypeFromFilename('data.json')).toBe('image')
+      })
+
+      it('should handle files with multiple dots', () => {
+        expect(getMediaTypeFromFilename('my.file.name.png')).toBe('image')
+        expect(getMediaTypeFromFilename('archive.tar.gz')).toBe('image')
+      })
+
+      it('should handle paths with directories', () => {
+        expect(getMediaTypeFromFilename('/path/to/image.png')).toBe('image')
+        expect(getMediaTypeFromFilename('C:\\Windows\\video.mp4')).toBe('video')
+      })
+
+      it('should handle null and undefined gracefully', () => {
+        expect(getMediaTypeFromFilename(null as any)).toBe('image')
+        expect(getMediaTypeFromFilename(undefined as any)).toBe('image')
+      })
+
+      it('should handle special characters in filenames', () => {
+        expect(getMediaTypeFromFilename('test@#$.png')).toBe('image')
+        expect(getMediaTypeFromFilename('video (1).mp4')).toBe('video')
+        expect(getMediaTypeFromFilename('[2024] audio.mp3')).toBe('audio')
+      })
+
+      it('should handle very long filenames', () => {
+        const longFilename = 'a'.repeat(1000) + '.png'
+        expect(getMediaTypeFromFilename(longFilename)).toBe('image')
+      })
+
+      it('should handle mixed case extensions', () => {
+        expect(getMediaTypeFromFilename('test.PnG')).toBe('image')
+        expect(getMediaTypeFromFilename('video.Mp4')).toBe('video')
+        expect(getMediaTypeFromFilename('audio.WaV')).toBe('audio')
+      })
+    })
+  })
+})
diff --git a/tests-ui/tests/utils/graphTraversalUtil.test.ts b/tests-ui/tests/utils/graphTraversalUtil.test.ts
index f6cb74804..2af5a6ee9 100644
--- a/tests-ui/tests/utils/graphTraversalUtil.test.ts
+++ b/tests-ui/tests/utils/graphTraversalUtil.test.ts
@@ -35,14 +35,18 @@ function createMockNode(
     isSubgraph?: boolean
     subgraph?: Subgraph
     callback?: () => void
+    graph?: LGraph
   } = {}
 ): LGraphNode {
-  return {
+  const node = {
     id,
     isSubgraphNode: options.isSubgraph ? () => true : undefined,
     subgraph: options.subgraph,
-    onExecutionStart: options.callback
+    onExecutionStart: options.callback,
+    graph: options.graph
   } as unknown as LGraphNode
+  options.graph?.nodes?.push(node)
+  return node
 }
 
 // Mock graph factory
@@ -50,20 +54,28 @@ function createMockGraph(nodes: LGraphNode[]): LGraph {
   return {
     _nodes: nodes,
     nodes: nodes,
+    isRootGraph: true,
     getNodeById: (id: string | number) =>
       nodes.find((n) => String(n.id) === String(id)) || null
   } as unknown as LGraph
 }
 
 // Mock subgraph factory
-function createMockSubgraph(id: string, nodes: LGraphNode[]): Subgraph {
-  return {
+function createMockSubgraph(
+  id: string,
+  nodes: LGraphNode[],
+  rootGraph?: LGraph
+): Subgraph {
+  const graph = {
     id,
     _nodes: nodes,
     nodes: nodes,
+    isRootGraph: false,
+    rootGraph,
     getNodeById: (nodeId: string | number) =>
       nodes.find((n) => String(n.id) === String(nodeId)) || null
   } as unknown as Subgraph
+  return graph
 }
 
 describe('graphTraversalUtil', () => {
@@ -983,31 +995,30 @@ describe('graphTraversalUtil', () => {
 
     describe('getExecutionIdsForSelectedNodes', () => {
       it('should return simple IDs for top-level nodes', () => {
-        const nodes = [
-          createMockNode('123'),
-          createMockNode('456'),
-          createMockNode('789')
-        ]
+        const graph = createMockGraph([])
+        createMockNode('123', { graph })
+        createMockNode('456', { graph })
+        createMockNode('789', { graph })
 
-        const executionIds = getExecutionIdsForSelectedNodes(nodes)
+        const executionIds = getExecutionIdsForSelectedNodes(graph.nodes)
 
         expect(executionIds).toEqual(['789', '456', '123']) // DFS processes in LIFO order
       })
 
       it('should expand subgraph nodes to include all children', () => {
+        const graph = createMockGraph([])
         const subNodes = [createMockNode('10'), createMockNode('11')]
         const subgraph = createMockSubgraph('sub-uuid', subNodes)
-        const nodes = [
-          createMockNode('1'),
-          createMockNode('2', { isSubgraph: true, subgraph })
-        ]
+        createMockNode('1', { graph })
+        createMockNode('2', { isSubgraph: true, subgraph, graph })
 
-        const executionIds = getExecutionIdsForSelectedNodes(nodes)
+        const executionIds = getExecutionIdsForSelectedNodes(graph.nodes)
 
         expect(executionIds).toEqual(['2', '2:10', '2:11', '1']) // DFS: node 2 first, then its children
       })
 
       it('should handle deeply nested subgraphs correctly', () => {
+        const graph = createMockGraph([])
         const deepNodes = [createMockNode('30'), createMockNode('31')]
         const deepSubgraph = createMockSubgraph('deep-uuid', deepNodes)
 
@@ -1019,7 +1030,8 @@ describe('graphTraversalUtil', () => {
 
         const topNode = createMockNode('10', {
           isSubgraph: true,
-          subgraph: midSubgraph
+          subgraph: midSubgraph,
+          graph
         })
 
         const executionIds = getExecutionIdsForSelectedNodes([topNode])
@@ -1028,16 +1040,15 @@ describe('graphTraversalUtil', () => {
       })
 
       it('should handle mixed selection of regular and subgraph nodes', () => {
+        const graph = createMockGraph([])
         const subNodes = [createMockNode('100'), createMockNode('101')]
         const subgraph = createMockSubgraph('sub-uuid', subNodes)
 
-        const nodes = [
-          createMockNode('1'),
-          createMockNode('2', { isSubgraph: true, subgraph }),
-          createMockNode('3')
-        ]
+        createMockNode('1', { graph })
+        createMockNode('2', { isSubgraph: true, subgraph, graph })
+        createMockNode('3', { graph })
 
-        const executionIds = getExecutionIdsForSelectedNodes(nodes)
+        const executionIds = getExecutionIdsForSelectedNodes(graph.nodes)
 
         expect(executionIds).toEqual([
           '3',
@@ -1054,10 +1065,12 @@ describe('graphTraversalUtil', () => {
       })
 
       it('should handle subgraph with no children', () => {
+        const graph = createMockGraph([])
         const emptySubgraph = createMockSubgraph('empty-uuid', [])
         const node = createMockNode('1', {
           isSubgraph: true,
-          subgraph: emptySubgraph
+          subgraph: emptySubgraph,
+          graph
         })
 
         const executionIds = getExecutionIdsForSelectedNodes([node])
@@ -1079,9 +1092,11 @@ describe('graphTraversalUtil', () => {
           currentSubgraph = createMockSubgraph(`deep-${i}`, [node])
         }
 
+        const graph = createMockGraph([])
         const topNode = createMockNode('1', {
           isSubgraph: true,
-          subgraph: currentSubgraph
+          subgraph: currentSubgraph,
+          graph
         })
 
         const executionIds = getExecutionIdsForSelectedNodes([topNode])
@@ -1103,12 +1118,11 @@ describe('graphTraversalUtil', () => {
           createMockNode('101') // Same ID as in subgraph1
         ])
 
-        const nodes = [
-          createMockNode('1', { isSubgraph: true, subgraph: subgraph1 }),
-          createMockNode('2', { isSubgraph: true, subgraph: subgraph2 })
-        ]
+        const graph = createMockGraph([])
+        createMockNode('1', { isSubgraph: true, subgraph: subgraph1, graph })
+        createMockNode('2', { isSubgraph: true, subgraph: subgraph2, graph })
 
-        const executionIds = getExecutionIdsForSelectedNodes(nodes)
+        const executionIds = getExecutionIdsForSelectedNodes(graph.nodes)
 
         expect(executionIds).toEqual([
           '2',
@@ -1128,9 +1142,11 @@ describe('graphTraversalUtil', () => {
         }
         const bigSubgraph = createMockSubgraph('big-uuid', manyNodes)
 
+        const graph = createMockGraph([])
         const node = createMockNode('parent', {
           isSubgraph: true,
-          subgraph: bigSubgraph
+          subgraph: bigSubgraph,
+          graph
         })
 
         const start = performance.now()
@@ -1157,19 +1173,17 @@ describe('graphTraversalUtil', () => {
         })
         const midSubgraph = createMockSubgraph('mid-uuid', [midNode1, midNode2])
 
-        const topNode = createMockNode('100', {
-          isSubgraph: true,
-          subgraph: midSubgraph
-        })
-
+        const graph = createMockGraph([])
         // Select nodes at different nesting levels
-        const selectedNodes = [
-          createMockNode('1'), // Root level
-          topNode, // Contains subgraph
-          createMockNode('2') // Root level
-        ]
+        createMockNode('100', {
+          isSubgraph: true,
+          subgraph: midSubgraph,
+          graph
+        })
+        createMockNode('1', { graph })
+        createMockNode('2', { graph })
 
-        const executionIds = getExecutionIdsForSelectedNodes(selectedNodes)
+        const executionIds = getExecutionIdsForSelectedNodes(graph.nodes)
 
         expect(executionIds).toContain('1')
         expect(executionIds).toContain('2')
@@ -1178,6 +1192,17 @@ describe('graphTraversalUtil', () => {
         expect(executionIds).toContain('100:202')
         expect(executionIds).toContain('100:202:300')
       })
+      it('should resolve full execution path of a node inside a subgraph', () => {
+        const graph = createMockGraph([])
+        const subgraph = createMockSubgraph('sub-uuid', [], graph)
+        createMockNode('11', { graph: subgraph })
+        createMockNode('10', { graph: subgraph })
+        createMockNode('2', { isSubgraph: true, subgraph, graph })
+
+        const executionIds = getExecutionIdsForSelectedNodes(subgraph.nodes)
+
+        expect(executionIds).toEqual(['2:10', '2:11'])
+      })
     })
   })
 })
diff --git a/tests-ui/tests/utils/markdownRendererUtil.test.ts b/tests-ui/tests/utils/markdownRendererUtil.test.ts
new file mode 100644
index 000000000..a92680cf6
--- /dev/null
+++ b/tests-ui/tests/utils/markdownRendererUtil.test.ts
@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest'
+
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+
+describe('markdownRendererUtil', () => {
+  describe('renderMarkdownToHtml', () => {
+    it('should render basic markdown to HTML', () => {
+      const markdown = '# Hello\n\nThis is a test.'
+      const html = renderMarkdownToHtml(markdown)
+
+      expect(html).toContain('<h1')
+      expect(html).toContain('Hello')
+      expect(html).toContain('<p>')
+      expect(html).toContain('This is a test.')
+    })
+
+    it('should render links with target="_blank" and rel="noopener noreferrer"', () => {
+      const markdown = '[Click here](https://example.com)'
+      const html = renderMarkdownToHtml(markdown)
+
+      expect(html).toContain('target="_blank"')
+      expect(html).toContain('rel="noopener noreferrer"')
+      expect(html).toContain('href="https://example.com"')
+      expect(html).toContain('Click here')
+    })
+
+    it('should render multiple links with target="_blank"', () => {
+      const markdown =
+        '[Link 1](https://example.com) and [Link 2](https://test.com)'
+      const html = renderMarkdownToHtml(markdown)
+
+      const targetBlankMatches = html.match(/target="_blank"/g)
+      expect(targetBlankMatches).toHaveLength(2)
+
+      const relMatches = html.match(/rel="noopener noreferrer"/g)
+      expect(relMatches).toHaveLength(2)
+    })
+
+    it('should handle relative image paths with baseUrl', () => {
+      const markdown = '![Alt text](image.png)'
+      const baseUrl = 'https://cdn.example.com'
+      const html = renderMarkdownToHtml(markdown, baseUrl)
+
+      expect(html).toContain(`src="${baseUrl}/image.png"`)
+      expect(html).toContain('alt="Alt text"')
+    })
+
+    it('should not modify absolute image URLs', () => {
+      const markdown = '![Alt text](https://example.com/image.png)'
+      const baseUrl = 'https://cdn.example.com'
+      const html = renderMarkdownToHtml(markdown, baseUrl)
+
+      expect(html).toContain('src="https://example.com/image.png"')
+      expect(html).not.toContain(baseUrl)
+    })
+
+    it('should handle empty markdown', () => {
+      const html = renderMarkdownToHtml('')
+
+      expect(html).toBe('')
+    })
+
+    it('should sanitize potentially dangerous HTML', () => {
+      const markdown = '<script>alert("xss")</script>'
+      const html = renderMarkdownToHtml(markdown)
+
+      expect(html).not.toContain('<script>')
+      expect(html).not.toContain('alert')
+    })
+
+    it('should allow video tags with proper attributes', () => {
+      const markdown =
+        '<video src="video.mp4" controls autoplay loop muted></video>'
+      const html = renderMarkdownToHtml(markdown)
+
+      expect(html).toContain('<video')
+      expect(html).toContain('src="video.mp4"')
+      expect(html).toContain('controls')
+    })
+
+    it('should render links with title attribute', () => {
+      const markdown = '[Link](https://example.com "This is a title")'
+      const html = renderMarkdownToHtml(markdown)
+
+      expect(html).toContain('title="This is a title"')
+      expect(html).toContain('target="_blank"')
+      expect(html).toContain('rel="noopener noreferrer"')
+    })
+
+    it('should handle bare URLs (autolinks)', () => {
+      const markdown = 'Visit https://example.com for more info.'
+      const html = renderMarkdownToHtml(markdown)
+
+      expect(html).toContain('href="https://example.com"')
+      expect(html).toContain('target="_blank"')
+      expect(html).toContain('rel="noopener noreferrer"')
+    })
+
+    it('should render complex markdown with links, images, and text', () => {
+      const markdown = `
+# Release Notes
+
+Check out our [documentation](https://docs.example.com) for more info.
+
+![Screenshot](screenshot.png)
+
+Visit our [homepage](https://example.com) to learn more.
+      `
+      const baseUrl = 'https://cdn.example.com'
+      const html = renderMarkdownToHtml(markdown, baseUrl)
+
+      // Check links have target="_blank"
+      const targetBlankMatches = html.match(/target="_blank"/g)
+      expect(targetBlankMatches).toHaveLength(2)
+
+      // Check image has baseUrl prepended
+      expect(html).toContain(`${baseUrl}/screenshot.png`)
+
+      // Check heading
+      expect(html).toContain('Release Notes')
+    })
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
index ba0d3de22..8319194da 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,6 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "downlevelIteration": true,
     "noImplicitOverride": true,
     "allowJs": true,
     "verbatimModuleSyntax": true,
@@ -35,6 +34,9 @@
       ],
       "@/utils/networkUtil": [
         "packages/shared-frontend-utils/src/networkUtil.ts"
+      ],
+      "@tests-ui/*": [
+        "tests-ui/*"
       ]
     },
     "typeRoots": [
diff --git a/vite.config.mts b/vite.config.mts
index ce22bf0a4..fdeadc086 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,19 +1,23 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
-import dotenv from 'dotenv'
+import { config as dotenvConfig } from 'dotenv'
+import type { IncomingMessage, ServerResponse } from 'http'
+import { Readable } from 'stream'
+import type { ReadableStream as NodeReadableStream } from 'stream/web'
 import { visualizer } from 'rollup-plugin-visualizer'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
-import type { UserConfig } from 'vite'
+import type { ProxyOptions, UserConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 import { comfyAPIPlugin, generateImportMapPlugin } from './build/plugins'
 
-dotenv.config()
+dotenvConfig()
 
 const IS_DEV = process.env.NODE_ENV === 'development'
 const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true'
@@ -21,18 +25,113 @@ const ANALYZE_BUNDLE = process.env.ANALYZE_BUNDLE === 'true'
 // vite dev server will listen on all addresses, including LAN and public addresses
 const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
 const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
-const DISABLE_VUE_PLUGINS = process.env.DISABLE_VUE_PLUGINS === 'true'
+const GENERATE_SOURCEMAP = process.env.GENERATE_SOURCEMAP !== 'false'
+
+// Open Graph / Twitter Meta Tags Constants
+const VITE_OG_URL = 'https://cloud.comfy.org'
+const VITE_OG_TITLE =
+  'Comfy Cloud: Run ComfyUI online | Zero Setup, Powerful GPUs, Create anywhere'
+const VITE_OG_DESC =
+  'Bring your creative ideas to life with Comfy Cloud. Build and run your workflows to generate stunning images and videos instantly using powerful GPUs — all from your browser, no installation required.'
+const VITE_OG_IMAGE = `${VITE_OG_URL}/assets/images/og-image.png`
+const VITE_OG_KEYWORDS = 'ComfyUI, Comfy Cloud, ComfyUI online'
+
+// Auto-detect cloud mode from DEV_SERVER_COMFYUI_URL
+const DEV_SERVER_COMFYUI_ENV_URL = process.env.DEV_SERVER_COMFYUI_URL
+const IS_CLOUD_URL = DEV_SERVER_COMFYUI_ENV_URL?.includes('.comfy.org')
+
+const DISTRIBUTION: 'desktop' | 'localhost' | 'cloud' =
+  process.env.DISTRIBUTION === 'desktop' ||
+  process.env.DISTRIBUTION === 'localhost' ||
+  process.env.DISTRIBUTION === 'cloud'
+    ? process.env.DISTRIBUTION
+    : IS_CLOUD_URL
+      ? 'cloud'
+      : 'localhost'
+
+// Disable Vue DevTools for production cloud distribution
+const DISABLE_VUE_PLUGINS =
+  process.env.DISABLE_VUE_PLUGINS === 'true' ||
+  (DISTRIBUTION === 'cloud' && !IS_DEV)
+
+const DEV_SEVER_FALLBACK_URL =
+  DISTRIBUTION === 'cloud'
+    ? 'https://stagingcloud.comfy.org'
+    : 'http://127.0.0.1:8188'
 
 const DEV_SERVER_COMFYUI_URL =
-  process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
+  DEV_SERVER_COMFYUI_ENV_URL || DEV_SEVER_FALLBACK_URL
 
-const DISTRIBUTION = (process.env.DISTRIBUTION || 'localhost') as
-  | 'desktop'
-  | 'localhost'
-  | 'cloud'
+const cloudProxyConfig =
+  DISTRIBUTION === 'cloud' ? { secure: false, changeOrigin: true } : {}
+
+function handleGcsRedirect(
+  proxyRes: IncomingMessage,
+  _req: IncomingMessage,
+  res: ServerResponse
+) {
+  const location = proxyRes.headers.location
+  const isGcsRedirect =
+    proxyRes.statusCode === 302 &&
+    location?.includes('storage.googleapis.com') &&
+    proxyRes.headers.via?.includes('google')
+
+  // Not a GCS redirect - pass through normally
+  if (!isGcsRedirect || !location) {
+    Object.keys(proxyRes.headers).forEach((key) => {
+      const value = proxyRes.headers[key]
+      if (value !== undefined) {
+        res.setHeader(key, value)
+      }
+    })
+    res.writeHead(proxyRes.statusCode || 200)
+    proxyRes.pipe(res)
+    return
+  }
+
+  // GCS redirect detected - fetch server-side to avoid CORS
+  fetch(location)
+    .then(async (gcsResponse) => {
+      if (!gcsResponse.body) {
+        res.statusCode = 500
+        res.end('Empty response from GCS')
+        return
+      }
+
+      // Set response headers from GCS
+      res.statusCode = 200
+      res.setHeader(
+        'Content-Type',
+        gcsResponse.headers.get('content-type') || 'application/octet-stream'
+      )
+
+      const contentLength = gcsResponse.headers.get('content-length')
+      if (contentLength) {
+        res.setHeader('Content-Length', contentLength)
+      }
+
+      // Convert Web ReadableStream to Node.js stream and pipe to client
+      const readable = Readable.fromWeb(gcsResponse.body as NodeReadableStream)
+      readable.pipe(res)
+    })
+    .catch((error) => {
+      console.error('Error fetching from GCS:', error)
+      res.statusCode = 500
+      res.end('Error fetching media')
+    })
+}
+
+const gcsRedirectProxyConfig: ProxyOptions = {
+  target: DEV_SERVER_COMFYUI_URL,
+  ...cloudProxyConfig,
+  selfHandleResponse: true,
+  configure: (proxy) => {
+    proxy.on('proxyRes', handleGcsRedirect)
+  }
+}
 
 export default defineConfig({
-  base: '',
+  base: DISTRIBUTION === 'cloud' ? '/' : '',
   server: {
     host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined,
     watch: {
@@ -54,46 +153,67 @@ export default defineConfig({
     },
     proxy: {
       '/internal': {
-        target: DEV_SERVER_COMFYUI_URL
+        target: DEV_SERVER_COMFYUI_URL,
+        ...cloudProxyConfig
       },
 
+      ...(DISTRIBUTION === 'cloud'
+        ? {
+            '/api/view': gcsRedirectProxyConfig,
+            '/api/viewvideo': gcsRedirectProxyConfig
+          }
+        : {}),
+
       '/api': {
         target: DEV_SERVER_COMFYUI_URL,
-        // Return empty array for extensions API as these modules
-        // are not on vite's dev server.
+        ...cloudProxyConfig,
         bypass: (req, res, _options) => {
+          // Return empty array for extensions API as these modules
+          // are not on vite's dev server.
           if (req.url === '/api/extensions') {
             res.end(JSON.stringify([]))
+            return false
           }
+
+          // Bypass multi-user auth check from staging (cloud only)
+          if (DISTRIBUTION === 'cloud' && req.url === '/api/users') {
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({})) // Return empty object to simulate single-user mode
+            return false
+          }
+
           return null
         }
       },
 
       '/ws': {
         target: DEV_SERVER_COMFYUI_URL,
-        ws: true
+        ws: true,
+        ...cloudProxyConfig
       },
 
       '/workflow_templates': {
-        target: DEV_SERVER_COMFYUI_URL
+        target: DEV_SERVER_COMFYUI_URL,
+        ...cloudProxyConfig
       },
 
-      // Proxy extension assets (images/videos) under /extensions to the ComfyUI backend
       '/extensions': {
         target: DEV_SERVER_COMFYUI_URL,
-        changeOrigin: true
+        changeOrigin: true,
+        ...cloudProxyConfig
       },
 
-      // Proxy docs markdown from backend
       '/docs': {
         target: DEV_SERVER_COMFYUI_URL,
-        changeOrigin: true
+        changeOrigin: true,
+        ...cloudProxyConfig
       },
 
       ...(!DISABLE_TEMPLATES_PROXY
         ? {
             '/templates': {
-              target: DEV_SERVER_COMFYUI_URL
+              target: DEV_SERVER_COMFYUI_URL,
+              ...cloudProxyConfig
             }
           }
         : {}),
@@ -111,41 +231,130 @@ export default defineConfig({
       : [vue()]),
     tailwindcss(),
     comfyAPIPlugin(IS_DEV),
-    generateImportMapPlugin([
-      {
-        name: 'vue',
-        pattern: 'vue',
-        entry: './dist/vue.esm-browser.prod.js'
-      },
-      {
-        name: 'vue-i18n',
-        pattern: 'vue-i18n',
-        entry: './dist/vue-i18n.esm-browser.prod.js'
-      },
-      {
-        name: 'primevue',
-        pattern: /^primevue\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/themes',
-        pattern: /^@primevue\/themes\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/forms',
-        pattern: /^@primevue\/forms\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true,
-        override: {
-          '@primeuix/forms': {
-            entry: ''
-          }
+    // Twitter/Open Graph meta tags plugin (cloud distribution only)
+    {
+      name: 'inject-twitter-meta',
+      transformIndexHtml(html) {
+        if (DISTRIBUTION !== 'cloud') return html
+
+        return {
+          html,
+          tags: [
+            // Basic SEO
+            { tag: 'title', children: VITE_OG_TITLE, injectTo: 'head' },
+            {
+              tag: 'meta',
+              attrs: { name: 'description', content: VITE_OG_DESC },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { name: 'keywords', content: VITE_OG_KEYWORDS },
+              injectTo: 'head'
+            },
+
+            // Twitter Card tags
+            {
+              tag: 'meta',
+              attrs: { name: 'twitter:card', content: 'summary_large_image' },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { name: 'twitter:title', content: VITE_OG_TITLE },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { name: 'twitter:description', content: VITE_OG_DESC },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { name: 'twitter:image', content: VITE_OG_IMAGE },
+              injectTo: 'head'
+            },
+
+            // Open Graph tags (Twitter fallback & other platforms)
+            {
+              tag: 'meta',
+              attrs: { property: 'og:title', content: VITE_OG_TITLE },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { property: 'og:description', content: VITE_OG_DESC },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { property: 'og:image', content: VITE_OG_IMAGE },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { property: 'og:url', content: VITE_OG_URL },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { property: 'og:type', content: 'website' },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { property: 'og:site_name', content: 'Comfy Cloud' },
+              injectTo: 'head'
+            },
+            {
+              tag: 'meta',
+              attrs: { property: 'og:locale', content: 'en_US' },
+              injectTo: 'head'
+            }
+          ]
         }
       }
-    ]),
+    },
+    // Skip import-map generation for cloud builds to keep bundle small
+    ...(DISTRIBUTION !== 'cloud'
+      ? [
+          generateImportMapPlugin([
+            {
+              name: 'vue',
+              pattern: 'vue',
+              entry: './dist/vue.esm-browser.prod.js'
+            },
+            {
+              name: 'vue-i18n',
+              pattern: 'vue-i18n',
+              entry: './dist/vue-i18n.esm-browser.prod.js'
+            },
+            {
+              name: 'primevue',
+              pattern: /^primevue\/?.*/,
+              entry: './index.mjs',
+              recursiveDependence: true
+            },
+            {
+              name: '@primevue/themes',
+              pattern: /^@primevue\/themes\/?.*/,
+              entry: './index.mjs',
+              recursiveDependence: true
+            },
+            {
+              name: '@primevue/forms',
+              pattern: /^@primevue\/forms\/?.*/,
+              entry: './index.mjs',
+              recursiveDependence: true,
+              override: {
+                '@primeuix/forms': {
+                  entry: ''
+                }
+              }
+            }
+          ])
+        ]
+      : []),
 
     Icons({
       compiler: 'vue3',
@@ -173,31 +382,105 @@ export default defineConfig({
       ? [
           visualizer({
             filename: 'dist/stats.html',
-            open: false,
+            open: true,
             gzipSize: true,
             brotliSize: true,
             template: 'treemap' // or 'sunburst', 'network'
           })
         ]
+      : []),
+
+    // Sentry sourcemap upload plugin
+    // Only runs during cloud production builds when all Sentry env vars are present
+    // Requires: SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT env vars
+    ...(DISTRIBUTION === 'cloud' &&
+    process.env.SENTRY_AUTH_TOKEN &&
+    process.env.SENTRY_ORG &&
+    process.env.SENTRY_PROJECT &&
+    !IS_DEV
+      ? [
+          sentryVitePlugin({
+            org: process.env.SENTRY_ORG,
+            project: process.env.SENTRY_PROJECT,
+            authToken: process.env.SENTRY_AUTH_TOKEN,
+            sourcemaps: {
+              // Delete source maps after upload to prevent public access
+              filesToDeleteAfterUpload: ['**/*.map']
+            }
+          })
+        ]
       : [])
   ],
 
   build: {
     minify: SHOULD_MINIFY ? 'esbuild' : false,
     target: 'es2022',
-    sourcemap: true,
+    sourcemap: GENERATE_SOURCEMAP,
     rollupOptions: {
-      // Disabling tree-shaking
-      // Prevent vite remove unused exports
-      treeshake: false
+      treeshake: true,
+      output: {
+        manualChunks: (id) => {
+          if (!id.includes('node_modules')) {
+            return undefined
+          }
+
+          if (id.includes('primevue') || id.includes('@primeuix')) {
+            return 'vendor-primevue'
+          }
+
+          if (id.includes('@tiptap')) {
+            return 'vendor-tiptap'
+          }
+
+          if (id.includes('chart.js')) {
+            return 'vendor-chart'
+          }
+
+          if (id.includes('three')) {
+            return 'vendor-three'
+          }
+
+          if (id.includes('@xterm')) {
+            return 'vendor-xterm'
+          }
+
+          if (id.includes('/vue') || id.includes('pinia')) {
+            return 'vendor-vue'
+          }
+
+          return 'vendor-other'
+        }
+      }
     }
   },
 
   esbuild: {
-    minifyIdentifiers: false,
+    minifyIdentifiers: SHOULD_MINIFY,
     keepNames: true,
     minifySyntax: SHOULD_MINIFY,
-    minifyWhitespace: SHOULD_MINIFY
+    minifyWhitespace: SHOULD_MINIFY,
+    pure: SHOULD_MINIFY
+      ? [
+          'console.log',
+          'console.debug',
+          'console.info',
+          'console.trace',
+          'console.dir',
+          'console.dirxml',
+          'console.group',
+          'console.groupCollapsed',
+          'console.groupEnd',
+          'console.table',
+          'console.time',
+          'console.timeEnd',
+          'console.timeLog',
+          'console.count',
+          'console.countReset',
+          'console.profile',
+          'console.profileEnd',
+          'console.clear'
+        ]
+      : []
   },
 
   test: {
diff --git a/vitest.config.ts b/vitest.config.ts
index 342de4e04..1dab6ffd1 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -39,6 +39,7 @@ export default defineConfig({
       '@/utils/formatUtil': '/packages/shared-frontend-utils/src/formatUtil.ts',
       '@/utils/networkUtil':
         '/packages/shared-frontend-utils/src/networkUtil.ts',
+      '@tests-ui': '/tests-ui',
       '@': '/src'
     }
   },
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 86e72cf52..e3427e7c6 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,6 +1,17 @@
 import { vi } from 'vitest'
 import 'vue'
 
+// Augment Window interface for tests
+declare global {
+  interface Window {
+    __CONFIG__: {
+      mixpanel_token?: string
+      subscription_required?: boolean
+      server_health_alert?: string
+    }
+  }
+}
+
 // Define global variables for tests
 globalThis.__COMFYUI_FRONTEND_VERSION__ = '1.24.0'
 globalThis.__SENTRY_ENABLED__ = false
@@ -10,6 +21,12 @@ globalThis.__ALGOLIA_API_KEY__ = ''
 globalThis.__USE_PROD_CONFIG__ = false
 globalThis.__DISTRIBUTION__ = 'localhost'
 
+// Define runtime config for tests
+window.__CONFIG__ = {
+  subscription_required: true,
+  mixpanel_token: 'test-token'
+}
+
 // Mock Worker for extendable-media-recorder
 globalThis.Worker = vi.fn().mockImplementation(() => ({
   postMessage: vi.fn(),