fix: stabilize splitter auto-save and add visible resize handles

- Use splitterRefreshKey as auto-save-id so layout persists across page refreshes (tab-dependent key caused mismatches on reload) - Include sidebarLocation in LinearView auto-save-id to prevent layout reversal when sidebar switches sides - Add w-1 to all SplitterResizeHandle elements for visible/grabbable drag handles - Reduce CENTER_PANEL_SIZE from 80 to 60 so 3-panel layouts sum to 100% without normalization
[automated] Apply ESLint and Oxfmt fixes
2026-03-17 10:57:34 +00:00 · 2026-03-13 22:32:44 +01:00 · 2026-03-09 11:38:10 +00:00 · 2026-03-09 12:35:00 +01:00
65 changed files with 984 additions and 1493 deletions
--- a/.github/workflows/cloud-dispatch-build.yaml
+++ b/.github/workflows/cloud-dispatch-build.yaml
@@ -14,7 +14,7 @@ on:
      - 'cloud/*'
      - 'main'
  pull_request:
-    types: [labeled, synchronize]
+    types: [labeled]
  workflow_dispatch:

 permissions: {}
@@ -26,18 +26,11 @@ concurrency:
 jobs:
  dispatch:
    # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch for preview labels.
-    # - labeled: fires when a label is added; check the added label name.
-    # - synchronize: fires on push; check existing labels on the PR.
+    # For pull_request events, only dispatch when the 'preview' label is added.
    if: >
      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
      (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
+       github.event.label.name == 'preview')
    runs-on: ubuntu-latest
    steps:
      - name: Build client payload
--- 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
--- a/docs/release-process.md
+++ b/docs/release-process.md
@@ -1,62 +0,0 @@
-# Release Process
-
-## Bump Types
-
-All releases use `release-version-bump.yaml`. Effects differ by bump type:
-
-| Bump       | Target     | Creates branches?                     | GitHub release               |
-| ---------- | ---------- | ------------------------------------- | ---------------------------- |
-| Minor      | `main`     | `core/` + `cloud/` for previous minor | Published, "latest"          |
-| Patch      | `main`     | No                                    | Published, "latest"          |
-| Patch      | `core/X.Y` | No                                    | **Draft** (uncheck "latest") |
-| Prerelease | any        | No                                    | Draft + prerelease           |
-
-**Minor bump** (e.g. 1.41→1.42): freezes the previous minor into `core/1.41`
-and `cloud/1.41`, branched from the commit _before_ the bump. Nightly patch
-bumps on `main` are convenience snapshots — no branches created.
-
-**Patch on `core/X.Y`**: publishes a hotfix draft release. Must not be marked
-"latest" so `main` stays current.
-
-### Dual-homed commits
-
-When a minor bump happens, unreleased commits appear in both places:
-
-```
-v1.40.1 ── A ── B ── C ── [bump to 1.41.0]
-                │
-                └── core/1.40
-```
-
-A, B, C become v1.41.0 on `main` AND sit on `core/1.40` (where they could
-later ship as v1.40.2). Same commits, no divergence — the branch just prevents
-1.41+ features from mixing in so ComfyUI can stay on 1.40.x.
-
-## Backporting
-
-1. Add `needs-backport` + version label to the merged PR
-2. `pr-backport.yaml` cherry-picks and creates a backport PR
-3. Conflicts produce a comment with details and an agent prompt
-
-## Publishing
-
-Merged PRs with the `Release` label trigger `release-draft-create.yaml`,
-publishing to GitHub Releases (`dist.zip`), PyPI (`comfyui-frontend-package`),
-and npm (`@comfyorg/comfyui-frontend-types`).
-
-## Bi-weekly ComfyUI Integration
-
-`release-biweekly-comfyui.yaml` runs every other Monday — if the next `core/`
-branch has unreleased commits, it triggers a patch bump and drafts a PR to
-`Comfy-Org/ComfyUI` updating `requirements.txt`.
-
-## Workflows
-
-| Workflow                        | Purpose                                          |
-| ------------------------------- | ------------------------------------------------ |
-| `release-version-bump.yaml`     | Bump version, create Release PR                  |
-| `release-draft-create.yaml`     | Build + publish to GitHub/PyPI/npm               |
-| `release-branch-create.yaml`    | Create `core/` + `cloud/` branches (minor/major) |
-| `release-biweekly-comfyui.yaml` | Auto-patch + ComfyUI requirements PR             |
-| `pr-backport.yaml`              | Cherry-pick fixes to stable branches             |
-| `cloud-backport-tag.yaml`       | Tag cloud branch merges                          |
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,8 +277,8 @@ catalogs:
      specifier: ^4.2.5
      version: 4.2.5
    reka-ui:
-      specifier: ^2.5.0
-      version: 2.5.0
+      specifier: ^2.9.0
+      version: 2.9.0
    rollup-plugin-visualizer:
      specifier: ^6.0.4
      version: 6.0.4
@@ -529,7 +529,7 @@ importers:
        version: 4.2.5(vue@3.5.13(typescript@5.9.3))
      reka-ui:
        specifier: 'catalog:'
-        version: 2.5.0(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3))
+        version: 2.9.0(vue@3.5.13(typescript@5.9.3))
      semver:
        specifier: ^7.7.2
        version: 7.7.4
@@ -2451,21 +2451,25 @@ packages:
    resolution: {integrity: sha512-D+tPXB0tkSuDPsuXvyQIsF3f3PBWfAwIe9FkBWtVoDVYqE+jbz+tVGsjQMNWGafLE4sC8ZQdjhsxyT8I53Anbw==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@nx/nx-linux-arm64-musl@22.5.2':
    resolution: {integrity: sha512-UbO527qqa8KLBi13uXto5SmxcZv1Smer7sPexJonshDlmrJsyvx5m8nm6tcSv04W5yQEL90vPlTux8dNvEDWrw==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@nx/nx-linux-x64-gnu@22.5.2':
    resolution: {integrity: sha512-wR6596Vr/Z+blUAmjLHG2TCQMs4O1oi9JXK1J/PoPeO9UqdHwStCJBAd61zDFSUYJe0x+dkeRQu96fE5BW8Kcg==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@nx/nx-linux-x64-musl@22.5.2':
    resolution: {integrity: sha512-MBXOw4AH4FWl4orwVykj/e75awTNDePogrl3pXNX9NcQLdj6JzS4e2jaALQeRBQLxQzeFvFQV/W4PBzoPV6/NA==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@nx/nx-win32-arm64-msvc@22.5.2':
    resolution: {integrity: sha512-SaWSZkRH5uV8vP2lj6RRv+kw2IzaIDXkutReOXpooshIWZl9KjrQELNTCZTYyhLDsMlcyhSvLFlTiA4NkZ8udw==}
@@ -2631,41 +2635,49 @@ packages:
    resolution: {integrity: sha512-SVjjjtMW66Mza76PBGJLqB0KKyFTBnxmtDXLJPbL6ZPGSctcXVmujz7/WAc0rb9m2oV0cHQTtVjnq6orQnI/jg==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@oxc-resolver/binding-linux-arm64-musl@11.15.0':
    resolution: {integrity: sha512-JDv2/AycPF2qgzEiDeMJCcSzKNDm3KxNg0KKWipoKEMDFqfM7LxNwwSVyAOGmrYlE4l3dg290hOMsr9xG7jv9g==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@oxc-resolver/binding-linux-ppc64-gnu@11.15.0':
    resolution: {integrity: sha512-zbu9FhvBLW4KJxo7ElFvZWbSt4vP685Qc/Gyk/Ns3g2gR9qh2qWXouH8PWySy+Ko/qJ42+HJCLg+ZNcxikERfg==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@oxc-resolver/binding-linux-riscv64-gnu@11.15.0':
    resolution: {integrity: sha512-Kfleehe6B09C2qCnyIU01xLFqFXCHI4ylzkicfX/89j+gNHh9xyNdpEvit88Kq6i5tTGdavVnM6DQfOE2qNtlg==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@oxc-resolver/binding-linux-riscv64-musl@11.15.0':
    resolution: {integrity: sha512-J7LPiEt27Tpm8P+qURDwNc8q45+n+mWgyys4/V6r5A8v5gDentHRGUx3iVk5NxdKhgoGulrzQocPTZVosq25Eg==}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@oxc-resolver/binding-linux-s390x-gnu@11.15.0':
    resolution: {integrity: sha512-+8/d2tAScPjVJNyqa7GPGnqleTB/XW9dZJQ2D/oIM3wpH3TG+DaFEXBbk4QFJ9K9AUGBhvQvWU2mQyhK/yYn3Q==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@oxc-resolver/binding-linux-x64-gnu@11.15.0':
    resolution: {integrity: sha512-xtvSzH7Nr5MCZI2FKImmOdTl9kzuQ51RPyLh451tvD2qnkg3BaqI9Ox78bTk57YJhlXPuxWSOL5aZhKAc9J6qg==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@oxc-resolver/binding-linux-x64-musl@11.15.0':
    resolution: {integrity: sha512-14YL1zuXj06+/tqsuUZuzL0T425WA/I4nSVN1kBXeC5WHxem6lQ+2HGvG+crjeJEqHgZUT62YIgj88W+8E7eyg==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@oxc-resolver/binding-openharmony-arm64@11.15.0':
    resolution: {integrity: sha512-/7Qli+1Wk93coxnrQaU8ySlICYN8HsgyIrzqjgIkQEpI//9eUeaeIHZptNl2fMvBGeXa7k2QgLbRNaBRgpnvMw==}
@@ -2739,48 +2751,56 @@ packages:
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@oxfmt/binding-linux-arm64-musl@0.34.0':
    resolution: {integrity: sha512-H+F8+71gHQoGTFPPJ6z4dD0Fzfzi0UP8Zx94h5kUmIFThLvMq5K1Y/bUUubiXwwHfwb5C3MPjUpYijiy0rj51Q==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@oxfmt/binding-linux-ppc64-gnu@0.34.0':
    resolution: {integrity: sha512-dIGnzTNhCXqQD5pzBwduLg8pClm+t8R53qaE9i5h8iua1iaFAJyLffh4847CNZSlASb7gn1Ofuv7KoG/EpoGZg==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@oxfmt/binding-linux-riscv64-gnu@0.34.0':
    resolution: {integrity: sha512-FGQ2GTTooilDte/ogwWwkHuuL3lGtcE3uKM2EcC7kOXNWdUfMY6Jx3JCodNVVbFoybv4A+HuCj8WJji2uu1Ceg==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@oxfmt/binding-linux-riscv64-musl@0.34.0':
    resolution: {integrity: sha512-2dGbGneJ7ptOIVKMwEIHdCkdZEomh74X3ggo4hCzEXL/rl9HwfsZDR15MkqfQqAs6nVXMvtGIOMxjDYa5lwKaA==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@oxfmt/binding-linux-s390x-gnu@0.34.0':
    resolution: {integrity: sha512-cCtGgmrTrxq3OeSG0UAO+w6yLZTMeOF4XM9SAkNrRUxYhRQELSDQ/iNPCLyHhYNi38uHJQbS5RQweLUDpI4ajA==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@oxfmt/binding-linux-x64-gnu@0.34.0':
    resolution: {integrity: sha512-7AvMzmeX+k7GdgitXp99GQoIV/QZIpAS7rwxQvC/T541yWC45nwvk4mpnU8N+V6dE5SPEObnqfhCjO80s7qIsg==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@oxfmt/binding-linux-x64-musl@0.34.0':
    resolution: {integrity: sha512-uNiglhcmivJo1oDMh3hoN/Z0WsbEXOpRXZdQ3W/IkOpyV8WF308jFjSC1ZxajdcNRXWej0zgge9QXba58Owt+g==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@oxfmt/binding-openharmony-arm64@0.34.0':
    resolution: {integrity: sha512-5eFsTjCyji25j6zznzlMc+wQAZJoL9oWy576xhqd2efv+N4g1swIzuSDcb1dz4gpcVC6veWe9pAwD7HnrGjLwg==}
@@ -2883,48 +2903,56 @@ packages:
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@oxlint/binding-linux-arm64-musl@1.49.0':
    resolution: {integrity: sha512-xeqkMOARgGBlEg9BQuPDf6ZW711X6BT5qjDyeM5XNowCJeTSdmMhpePJjTEiVbbr3t21sIlK8RE6X5bc04nWyQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@oxlint/binding-linux-ppc64-gnu@1.49.0':
    resolution: {integrity: sha512-uvcqRO6PnlJGbL7TeePhTK5+7/JXbxGbN+C6FVmfICDeeRomgQqrfVjf0lUrVpUU8ii8TSkIbNdft3M+oNlOsQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@oxlint/binding-linux-riscv64-gnu@1.49.0':
    resolution: {integrity: sha512-Dw1HkdXAwHNH+ZDserHP2RzXQmhHtpsYYI0hf8fuGAVCIVwvS6w1+InLxpPMY25P8ASRNiFN3hADtoh6lI+4lg==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@oxlint/binding-linux-riscv64-musl@1.49.0':
    resolution: {integrity: sha512-EPlMYaA05tJ9km/0dI9K57iuMq3Tw+nHst7TNIegAJZrBPtsOtYaMFZEaWj02HA8FI5QvSnRHMt+CI+RIhXJBQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@oxlint/binding-linux-s390x-gnu@1.49.0':
    resolution: {integrity: sha512-yZiQL9qEwse34aMbnMb5VqiAWfDY+fLFuoJbHOuzB1OaJZbN1MRF9Nk+W89PIpGr5DNPDipwjZb8+Q7wOywoUQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@oxlint/binding-linux-x64-gnu@1.49.0':
    resolution: {integrity: sha512-CcCDwMMXSchNkhdgvhVn3DLZ4EnBXAD8o8+gRzahg+IdSt/72y19xBgShJgadIRF0TsRcV/MhDUMwL5N/W54aQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@oxlint/binding-linux-x64-musl@1.49.0':
    resolution: {integrity: sha512-u3HfKV8BV6t6UCCbN0RRiyqcymhrnpunVmLFI8sEa5S/EBu+p/0bJ3D7LZ2KT6PsBbrB71SWq4DeFrskOVgIZg==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@oxlint/binding-openharmony-arm64@1.49.0':
    resolution: {integrity: sha512-dRDpH9fw+oeUMpM4br0taYCFpW6jQtOuEIec89rOgDA1YhqwmeRcx0XYeCv7U48p57qJ1XZHeMGM9LdItIjfzA==}
@@ -3093,24 +3121,28 @@ packages:
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
    resolution: {integrity: sha512-Z03/wrqau9Bicfgb3Dbs6SYTHliELk2PM2LpG2nFd+cGupTMF5kanLEcj2vuuJLLhptNyS61rtk7SOZ+lPsTUA==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
    resolution: {integrity: sha512-iSXXZsQp08CSilff/DCTFZHSVEpEwdicV3W8idHyrByrcsRDVh9sGC3sev6d8BygSGj3vt8GvUKBPCoyMA4tgQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
    resolution: {integrity: sha512-qaj+MFudtdCv9xZo9znFvkgoajLdc+vwf0Kz5N44g+LU5XMe+IsACgn3UG7uTRlCCvhMAGXm1XlpEA5bZBrOcw==}
    engines: {node: ^20.19.0 || >=22.12.0}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
    resolution: {integrity: sha512-U662UnMETyjT65gFmG9ma+XziENrs7BBnENi/27swZPYagubfHRirXHG2oMl+pEax2WvO7Kb9gHZmMakpYqBHQ==}
@@ -3188,56 +3220,67 @@ packages:
    resolution: {integrity: sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==}
    cpu: [arm]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.53.5':
    resolution: {integrity: sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==}
    cpu: [arm]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.53.5':
    resolution: {integrity: sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.53.5':
    resolution: {integrity: sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-loong64-gnu@4.53.5':
    resolution: {integrity: sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==}
    cpu: [loong64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-ppc64-gnu@4.53.5':
    resolution: {integrity: sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.53.5':
    resolution: {integrity: sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.53.5':
    resolution: {integrity: sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.53.5':
    resolution: {integrity: sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.53.5':
    resolution: {integrity: sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.53.5':
    resolution: {integrity: sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-openharmony-arm64@4.53.5':
    resolution: {integrity: sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==}
@@ -3513,24 +3556,28 @@ packages:
    engines: {node: '>= 20'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-arm64-musl@4.2.0':
    resolution: {integrity: sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==}
    engines: {node: '>= 20'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-linux-x64-gnu@4.2.0':
    resolution: {integrity: sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==}
    engines: {node: '>= 20'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-x64-musl@4.2.0':
    resolution: {integrity: sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==}
    engines: {node: '>= 20'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-wasm32-wasi@4.2.0':
    resolution: {integrity: sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==}
@@ -4006,41 +4053,49 @@ packages:
    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -4255,9 +4310,6 @@ packages:
  '@vue/test-utils@2.4.6':
    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}

-  '@vueuse/core@12.8.2':
-    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
-
  '@vueuse/core@14.2.0':
    resolution: {integrity: sha512-tpjzVl7KCQNVd/qcaCE9XbejL38V6KJAEq/tVXj7mDPtl6JtzmUdnXelSS+ULRkkrDgzYVK7EerQJvd2jR794Q==}
    peerDependencies:
@@ -4305,15 +4357,9 @@ packages:
      universal-cookie:
        optional: true

-  '@vueuse/metadata@12.8.2':
-    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
-
  '@vueuse/metadata@14.2.0':
    resolution: {integrity: sha512-i3axTGjU8b13FtyR4Keeama+43iD+BwX9C2TmzBVKqjSHArF03hjkp2SBZ1m72Jk2UtrX0aYCugBq2R1fhkuAQ==}

-  '@vueuse/shared@12.8.2':
-    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
-
  '@vueuse/shared@14.2.0':
    resolution: {integrity: sha512-Z0bmluZTlAXgUcJ4uAFaML16JcD8V0QG00Db3quR642I99JXIDRa2MI2LGxiLVhcBjVnL1jOzIvT5TT2lqJlkA==}
    peerDependencies:
@@ -6416,24 +6462,28 @@ packages:
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  lightningcss-linux-arm64-musl@1.31.1:
    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  lightningcss-linux-x64-gnu@1.31.1:
    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  lightningcss-linux-x64-musl@1.31.1:
    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  lightningcss-win32-arm64-msvc@1.31.1:
    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -7452,10 +7502,10 @@ packages:
    resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
    hasBin: true

-  reka-ui@2.5.0:
-    resolution: {integrity: sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==}
+  reka-ui@2.9.0:
+    resolution: {integrity: sha512-5dpp80u109iLTbRBu+jhAk8R/877/JN20gYGjb3GsuAgS7E/5QTX5ZxuzWtZAVbChBDYDpXc8pkaQAFpa6s+4w==}
    peerDependencies:
-      vue: '>= 3.2.0'
+      vue: '>= 3.4.0'

  relateurl@0.2.7:
    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
@@ -12438,15 +12488,6 @@ snapshots:
      js-beautify: 1.15.1
      vue-component-type-helpers: 2.2.12

-  '@vueuse/core@12.8.2(typescript@5.9.3)':
-    dependencies:
-      '@types/web-bluetooth': 0.0.21
-      '@vueuse/metadata': 12.8.2
-      '@vueuse/shared': 12.8.2(typescript@5.9.3)
-      vue: 3.5.13(typescript@5.9.3)
-    transitivePeerDependencies:
-      - typescript
-
  '@vueuse/core@14.2.0(vue@3.5.13(typescript@5.9.3))':
    dependencies:
      '@types/web-bluetooth': 0.0.21
@@ -12463,16 +12504,8 @@ snapshots:
      axios: 1.13.5
      fuse.js: 7.0.0

-  '@vueuse/metadata@12.8.2': {}
-
  '@vueuse/metadata@14.2.0': {}

-  '@vueuse/shared@12.8.2(typescript@5.9.3)':
-    dependencies:
-      vue: 3.5.13(typescript@5.9.3)
-    transitivePeerDependencies:
-      - typescript
-
  '@vueuse/shared@14.2.0(vue@3.5.13(typescript@5.9.3))':
    dependencies:
      vue: 3.5.13(typescript@5.9.3)
@@ -16246,22 +16279,21 @@ snapshots:
    dependencies:
      jsesc: 3.1.0

-  reka-ui@2.5.0(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3)):
+  reka-ui@2.9.0(vue@3.5.13(typescript@5.9.3)):
    dependencies:
      '@floating-ui/dom': 1.7.4
      '@floating-ui/vue': 1.1.9(vue@3.5.13(typescript@5.9.3))
      '@internationalized/date': 3.9.0
      '@internationalized/number': 3.6.5
      '@tanstack/vue-virtual': 3.13.12(vue@3.5.13(typescript@5.9.3))
-      '@vueuse/core': 12.8.2(typescript@5.9.3)
-      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      '@vueuse/core': 14.2.0(vue@3.5.13(typescript@5.9.3))
+      '@vueuse/shared': 14.2.0(vue@3.5.13(typescript@5.9.3))
      aria-hidden: 1.2.6
      defu: 6.1.4
      ohash: 2.0.11
      vue: 3.5.13(typescript@5.9.3)
    transitivePeerDependencies:
      - '@vue/composition-api'
-      - typescript

  relateurl@0.2.7: {}

--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -93,7 +93,7 @@ catalog:
  pretty-bytes: ^7.1.0
  primeicons: ^7.0.0
  primevue: ^4.2.5
-  reka-ui: ^2.5.0
+  reka-ui: ^2.9.0
  rollup-plugin-visualizer: ^6.0.4
  storybook: ^10.2.10
  stylelint: ^16.26.1
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -15,18 +15,18 @@
        <slot name="side-toolbar" />
      </div>

-      <Splitter
+      <SplitterGroup
        :key="splitterRefreshKey"
-        class="pointer-events-none flex-1 overflow-hidden border-none bg-transparent"
-        :state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
-        state-storage="local"
-        @resizestart="onResizestart"
+        direction="horizontal"
+        :auto-save-id="splitterRefreshKey"
+        class="pointer-events-none flex-1 overflow-hidden"
      >
        <!-- First panel: sidebar when left, properties when right -->
        <SplitterPanel
          v-if="
            !focusMode && (sidebarLocation === 'left' || showOffsideSplitter)
          "
+          :order="1"
          :class="
            sidebarLocation === 'left'
              ? cn(
@@ -38,7 +38,7 @@
          :min-size="
            sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
          "
-          :size="SIDE_PANEL_SIZE"
+          :default-size="SIDE_PANEL_SIZE"
          :style="firstPanelStyle"
          :role="sidebarLocation === 'left' ? 'complementary' : undefined"
          :aria-label="
@@ -54,41 +54,69 @@
            name="right-side-panel"
          />
        </SplitterPanel>
+        <SplitterResizeHandle
+          v-if="
+            !focusMode && (sidebarLocation === 'left' || showOffsideSplitter)
+          "
+          :class="
+            cn(
+              'splitter-resize-handle pointer-events-auto w-1',
+              sidebarLocation === 'left' && !sidebarPanelVisible && 'hidden'
+            )
+          "
+        />

        <!-- Main panel (always present) -->
-        <SplitterPanel :size="CENTER_PANEL_SIZE" class="flex flex-col">
+        <SplitterPanel
+          :order="2"
+          :default-size="CENTER_PANEL_SIZE"
+          class="flex flex-col"
+        >
          <slot name="topmenu" :sidebar-panel-visible />

-          <Splitter
-            class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1 border-none bg-transparent"
-            layout="vertical"
-            :pt:gutter="
-              cn(
-                'rounded-t-lg',
-                !(bottomPanelVisible && !focusMode) && 'hidden'
-              )
-            "
-            state-key="bottom-panel-splitter"
-            state-storage="local"
-            @resizestart="onResizestart"
+          <SplitterGroup
+            direction="vertical"
+            auto-save-id="bottom-panel-splitter"
+            class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1"
          >
-            <SplitterPanel class="graph-canvas-panel relative">
+            <SplitterPanel :order="1" class="graph-canvas-panel relative">
              <slot name="graph-canvas-panel" />
            </SplitterPanel>
+            <SplitterResizeHandle
+              :class="
+                cn(
+                  'splitter-resize-handle pointer-events-auto w-1 translate-y-[5px] rounded-t-lg',
+                  !(bottomPanelVisible && !focusMode) && 'hidden'
+                )
+              "
+            />
            <SplitterPanel
              v-show="bottomPanelVisible && !focusMode"
+              :order="2"
              class="bottom-panel pointer-events-auto max-w-full overflow-x-auto rounded-lg border border-(--p-panel-border-color) bg-comfy-menu-bg"
            >
              <slot name="bottom-panel" />
            </SplitterPanel>
-          </Splitter>
+          </SplitterGroup>
        </SplitterPanel>

        <!-- Last panel: properties when left, sidebar when right -->
+        <SplitterResizeHandle
+          v-if="
+            !focusMode && (sidebarLocation === 'right' || showOffsideSplitter)
+          "
+          :class="
+            cn(
+              'splitter-resize-handle pointer-events-auto w-1',
+              sidebarLocation === 'right' && !sidebarPanelVisible && 'hidden'
+            )
+          "
+        />
        <SplitterPanel
          v-if="
            !focusMode && (sidebarLocation === 'right' || showOffsideSplitter)
          "
+          :order="3"
          :class="
            sidebarLocation === 'right'
              ? cn(
@@ -100,7 +128,7 @@
          :min-size="
            sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
          "
-          :size="SIDE_PANEL_SIZE"
+          :default-size="SIDE_PANEL_SIZE"
          :style="lastPanelStyle"
          :role="sidebarLocation === 'right' ? 'complementary' : undefined"
          :aria-label="
@@ -113,7 +141,7 @@
            name="side-bar-panel"
          />
        </SplitterPanel>
-      </Splitter>
+      </SplitterGroup>
    </div>
  </div>
 </template>
@@ -121,9 +149,7 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 import { storeToRefs } from 'pinia'
-import Splitter from 'primevue/splitter'
-import type { SplitterResizeStartEvent } from 'primevue/splitter'
-import SplitterPanel from 'primevue/splitterpanel'
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

@@ -149,14 +175,10 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
  settingStore.get('Comfy.Sidebar.Location')
 )

-const unifiedWidth = computed(() =>
-  settingStore.get('Comfy.Sidebar.UnifiedWidth')
-)
-
 const { focusMode } = storeToRefs(workspaceStore)

 const { isSelectMode, isBuilderMode } = useAppMode()
-const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
+const { activeSidebarTab } = storeToRefs(sidebarTabStore)
 const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
 const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
 const showOffsideSplitter = computed(
@@ -167,20 +189,6 @@ const sidebarPanelVisible = computed(
  () => activeSidebarTab.value !== null && !isBuilderMode.value
 )

-const sidebarStateKey = computed(() => {
-  return unifiedWidth.value
-    ? 'unified-sidebar'
-    : // When no tab is active, use a default key to maintain state
-      (activeSidebarTabId.value ?? 'default-sidebar')
-})
-
-/**
- * Avoid triggering default behaviors during drag-and-drop, such as text selection.
- */
-function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
-  event.preventDefault()
-}
-
 /*
 * Force refresh the splitter when right panel visibility or sidebar location changes
 * to recalculate the width and panel order
@@ -205,23 +213,9 @@ const lastPanelStyle = computed(() => {
 </script>

 <style scoped>
-:deep(.p-splitter-gutter) {
-  pointer-events: auto;
-}
-
-:deep(.p-splitter-gutter:hover),
-:deep(.p-splitter-gutter[data-p-gutter-resizing='true']) {
+.splitter-resize-handle[data-state='hover'],
+.splitter-resize-handle[data-state='drag'] {
  transition: background-color 0.2s ease 300ms;
  background-color: var(--p-primary-color);
 }
-
-/* Hide sidebar gutter when sidebar is not visible */
-:deep(.side-bar-panel[style*='display: none'] + .p-splitter-gutter),
-:deep(.p-splitter-gutter + .side-bar-panel[style*='display: none']) {
-  display: none;
-}
-
-.splitter-overlay-bottom :deep(.p-splitter-gutter) {
-  transform: translateY(5px);
-}
 </style>
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -34,7 +34,17 @@
            </Button>
          </div>

-          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
+          <div
+            ref="actionbarContainerRef"
+            :class="
+              cn(
+                'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
+                hasAnyError
+                  ? 'border-destructive-background-hover'
+                  : 'border-interface-stroke'
+              )
+            "
+          >
            <ActionBarButtons />
            <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
            <div
@@ -45,7 +55,6 @@
            <ComfyActionbar
              :top-menu-container="actionbarContainerRef"
              :queue-overlay-expanded="isQueueOverlayExpanded"
-              :has-any-error="hasAnyError"
              @update:progress-target="updateProgressTarget"
            />
            <CurrentUserButton
@@ -61,7 +70,7 @@
              @click="() => openShareDialog().catch(toastErrorHandler)"
              @pointerenter="prefetchShareDialog"
            >
-              <i class="icon-[comfy--send] size-4" />
+              <i class="icon-[lucide--share-2] size-4" />
              <span class="not-md:hidden">
                {{ t('actionbar.share') }}
              </span>
@@ -114,7 +123,7 @@
 </template>

 <script setup lang="ts">
-import { useLocalStorage, useMutationObserver } from '@vueuse/core'
+import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -136,7 +145,6 @@ import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
 import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -160,7 +168,6 @@ const { isLoggedIn } = useCurrentUser()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const executionErrorStore = useExecutionErrorStore()
-const actionBarButtonStore = useActionBarButtonStore()
 const queueUIStore = useQueueUIStore()
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
@@ -175,43 +182,6 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
  () => isActionbarEnabled.value && !isActionbarDocked.value
 )
-/**
- * Whether the actionbar container has any visible docked buttons
- * (excluding ComfyActionbar, which uses position:fixed when floating
- * and does not contribute to the container's visual layout).
- */
-const hasDockedButtons = computed(() => {
-  if (actionBarButtonStore.buttons.length > 0) return true
-  if (hasLegacyContent.value) return true
-  if (isLoggedIn.value && !isIntegratedTabBar.value) return true
-  if (isDesktop && !isIntegratedTabBar.value) return true
-  if (isCloud && flags.workflowSharingEnabled) return true
-  if (!isRightSidePanelOpen.value) return true
-  return false
-})
-const isActionbarContainerEmpty = computed(
-  () => isActionbarFloating.value && !hasDockedButtons.value
-)
-const actionbarContainerClass = computed(() => {
-  const base =
-    'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
-
-  if (isActionbarContainerEmpty.value) {
-    return cn(
-      base,
-      '-ml-2 w-0 min-w-0 border-transparent shadow-none',
-      'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
-      'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
-    )
-  }
-
-  const borderClass =
-    !isActionbarFloating.value && hasAnyError.value
-      ? 'border-destructive-background-hover'
-      : 'border-interface-stroke'
-
-  return cn(base, 'px-2', borderClass)
-})
 const isIntegratedTabBar = computed(
  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
@@ -263,25 +233,6 @@ const rightSidePanelTooltipConfig = computed(() =>

 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
-const hasLegacyContent = ref(false)
-
-function checkLegacyContent() {
-  const el = legacyCommandsContainerRef.value
-  if (!el) {
-    hasLegacyContent.value = false
-    return
-  }
-  // Mirror the CSS: [&:not(:has(*>*:not(:empty)))]:hidden
-  hasLegacyContent.value =
-    el.querySelector(':scope > * > *:not(:empty)') !== null
-}
-
-useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
-  childList: true,
-  subtree: true,
-  characterData: true
-})
-
 onMounted(() => {
  if (legacyCommandsContainerRef.value) {
    app.menu.element.style.width = 'fit-content'
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -119,14 +119,9 @@ import { cn } from '@/utils/tailwindUtil'

 import ComfyRunButton from './ComfyRunButton'

-const {
-  topMenuContainer,
-  queueOverlayExpanded = false,
-  hasAnyError = false
-} = defineProps<{
+const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
  topMenuContainer?: HTMLElement | null
  queueOverlayExpanded?: boolean
-  hasAnyError?: boolean
 }>()

 const emit = defineEmits<{
@@ -440,12 +435,7 @@ const panelClass = computed(() =>
    isDragging.value && 'pointer-events-none select-none',
    isDocked.value
      ? 'static border-none bg-transparent p-0'
-      : [
-          'fixed shadow-interface',
-          hasAnyError
-            ? 'border-destructive-background-hover'
-            : 'border-interface-stroke'
-        ]
+      : 'fixed shadow-interface'
  )
 )
 </script>
--- a/src/components/builder/AppBuilder.vue
+++ b/src/components/builder/AppBuilder.vue
@@ -8,7 +8,6 @@ import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
@@ -28,7 +27,7 @@ import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
-import { resolveNodeWidget } from '@/utils/litegraphUtil'
+import { resolveNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'

@@ -53,15 +52,18 @@ workflowStore.activeWorkflow?.changeTracker?.reset()
 const arrangeInputs = computed(() =>
  appModeStore.selectedInputs
    .map(([nodeId, widgetName]) => {
-      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
-      return node ? { nodeId, widgetName, node, widget } : null
+      const node = resolveNode(nodeId)
+      if (!node) return null
+      const widget = node.widgets?.find((w) => w.name === widgetName)
+      return { nodeId, widgetName, node, widget }
    })
    .filter((item): item is NonNullable<typeof item> => item !== null)
 )

 const inputsWithState = computed(() =>
  appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
-    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+    const node = resolveNode(nodeId)
+    const widget = node?.widgets?.find((w) => w.name === widgetName)
    if (!node || !widget) {
      return {
        nodeId,
@@ -106,7 +108,7 @@ function getHovered(

 function getBounding(nodeId: NodeId, widgetName?: string) {
  if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  const node = app.rootGraph.getNodeById(nodeId)
  if (!node) return

  const titleOffset =
@@ -119,6 +121,7 @@ function getBounding(nodeId: NodeId, widgetName?: string) {
      left: `${node.pos[0]}px`,
      top: `${node.pos[1] - titleOffset}px`
    }
+  const widget = node.widgets?.find((w) => w.name === widgetName)
  if (!widget) return

  const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
@@ -157,16 +160,12 @@ function handleClick(e: MouseEvent) {
    else appModeStore.selectedOutputs.splice(index, 1)
    return
  }
-  if (!isSelectInputsMode.value || widget.options.canvasOnly) return
+  if (!isSelectInputsMode.value) return

-  const storeId = isPromotedWidgetView(widget) ? widget.sourceNodeId : node.id
-  const storeName = isPromotedWidgetView(widget)
-    ? widget.sourceWidgetName
-    : widget.name
  const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) => storeId == nodeId && storeName === widgetName
+    ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName
  )
-  if (index === -1) appModeStore.selectedInputs.push([storeId, storeName])
+  if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
  else appModeStore.selectedInputs.splice(index, 1)
 }

--- a/src/components/common/Dialogue.vue
+++ b/src/components/common/Dialogue.vue
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger
-} from 'reka-ui'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-defineProps<{ title?: string; to?: string | HTMLElement }>()
-
-const { t } = useI18n()
-</script>
-<template>
-  <DialogRoot v-slot="{ close }">
-    <DialogTrigger as-child>
-      <slot name="button" />
-    </DialogTrigger>
-    <DialogPortal :to>
-      <DialogOverlay
-        class="data-[state=open]:animate-overlayShow fixed inset-0 z-30 bg-black/70"
-      />
-      <DialogContent
-        v-bind="$attrs"
-        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
-      >
-        <div
-          v-if="title"
-          class="flex w-full items-center justify-between border-b border-border-subtle px-4"
-        >
-          <DialogTitle class="text-sm">{{ title }}</DialogTitle>
-          <DialogClose as-child>
-            <Button
-              :aria-label="t('g.close')"
-              size="icon"
-              variant="muted-textonly"
-            >
-              <i class="icon-[lucide--x]" />
-            </Button>
-          </DialogClose>
-        </div>
-        <slot :close />
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>
--- a/src/components/common/SearchBox.stories.ts
+++ b/src/components/common/SearchBox.stories.ts
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
+  component: Omit<ComponentExposed<C>, 'focus'>
+}
+
+const meta: GenericMeta<typeof SearchBox> = {
+  title: 'Components/Input/SearchBox',
+  component: SearchBox,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text'
+    },
+    placeholder: {
+      control: 'text'
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Toggle border prop'
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+      description: 'Size variant of the search box'
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' },
+    onSearch: { action: 'search' }
+  },
+  args: {
+    modelValue: '',
+    placeholder: 'Search...',
+    showBorder: false,
+    size: 'md'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SearchBox },
+    setup() {
+      const searchText = ref('')
+      return { searchText, args }
+    },
+    template: `
+      <div style="max-width: 320px;">
+        <SearchBox v-bind="args" v-model="searchText" />
+      </div>
+    `
+  })
+}
+
+export const WithBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: true
+  }
+}
+
+export const NoBorder: Story = {
+  ...Default,
+  args: {
+    showBorder: false
+  }
+}
+
+export const MediumSize: Story = {
+  ...Default,
+  args: {
+    size: 'md',
+    showBorder: false
+  }
+}
+
+export const LargeSize: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: false
+  }
+}
+
+export const LargeSizeWithBorder: Story = {
+  ...Default,
+  args: {
+    size: 'lg',
+    showBorder: true
+  }
+}
--- a/src/components/common/SearchBox.test.ts
+++ b/src/components/common/SearchBox.test.ts
@@ -0,0 +1,193 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      templateWidgets: {
+        sort: {
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  }
+})
+
+describe('SearchBox', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  const createWrapper = (props = {}) => {
+    return mount(SearchBox, {
+      props: {
+        modelValue: '',
+        ...props
+      },
+      global: {
+        plugins: [i18n]
+      }
+    })
+  }
+
+  describe('debounced search functionality', () => {
+    it('should debounce search input by 300ms', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type search query
+      await input.setValue('test')
+
+      // Model should not update immediately
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 299ms (just before debounce delay)
+      await vi.advanceTimersByTimeAsync(299)
+      await nextTick()
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance timers by 1ms more (reaching 300ms)
+      await vi.advanceTimersByTimeAsync(1)
+      await nextTick()
+
+      // Model should now be updated
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test'])
+    })
+
+    it('should reset debounce timer on each keystroke', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Type first character
+      await input.setValue('t')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type second character (should reset timer)
+      await input.setValue('te')
+      vi.advanceTimersByTime(200)
+      await nextTick()
+
+      // Type third character (should reset timer again)
+      await input.setValue('tes')
+      await vi.advanceTimersByTimeAsync(200)
+      await nextTick()
+
+      // Should not have emitted yet (only 200ms passed since last keystroke)
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Advance final 100ms to reach 300ms
+      await vi.advanceTimersByTimeAsync(100)
+      await nextTick()
+
+      // Should now emit with final value
+      expect(wrapper.emitted('search')).toBeTruthy()
+      expect(wrapper.emitted('search')?.[0]).toEqual(['tes', []])
+    })
+
+    it('should only emit final value after rapid typing', async () => {
+      const wrapper = createWrapper()
+      const input = wrapper.find('input')
+
+      // Simulate rapid typing
+      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
+      for (const term of searchTerms) {
+        await input.setValue(term)
+        await vi.advanceTimersByTimeAsync(50) // Less than debounce delay
+      }
+      await nextTick()
+
+      // Should not have emitted yet
+      expect(wrapper.emitted('search')).toBeFalsy()
+
+      // Complete the debounce delay
+      await vi.advanceTimersByTimeAsync(350)
+      await nextTick()
+
+      // Should emit only once with final value
+      expect(wrapper.emitted('search')).toHaveLength(1)
+      expect(wrapper.emitted('search')?.[0]).toEqual(['search', []])
+    })
+
+    describe('bidirectional model sync', () => {
+      it('should sync external model changes to internal state', async () => {
+        const wrapper = createWrapper({ modelValue: 'initial' })
+        const input = wrapper.find('input')
+
+        expect(input.element.value).toBe('initial')
+
+        // Update model externally
+        await wrapper.setProps({ modelValue: 'external update' })
+        await nextTick()
+
+        // Internal state should sync
+        expect(input.element.value).toBe('external update')
+      })
+    })
+
+    describe('placeholder', () => {
+      it('should use custom placeholder when provided', () => {
+        const wrapper = createWrapper({ placeholder: 'Custom search...' })
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Custom search...')
+        expect(input.attributes('aria-label')).toBe('Custom search...')
+      })
+
+      it('should use default placeholder when not provided', () => {
+        const wrapper = createWrapper()
+        const input = wrapper.find('input')
+
+        expect(input.attributes('placeholder')).toBe('Search...')
+        expect(input.attributes('aria-label')).toBe('Search...')
+      })
+    })
+
+    describe('autofocus', () => {
+      it('should focus input when autofocus is true', async () => {
+        const wrapper = createWrapper({ autofocus: true })
+        await nextTick()
+
+        const input = wrapper.find('input')
+        const inputElement = input.element as HTMLInputElement
+
+        // Note: In JSDOM, focus() doesn't actually set document.activeElement
+        // We can only verify that the focus method exists and doesn't throw
+        expect(inputElement.focus).toBeDefined()
+      })
+
+      it('should not autofocus when autofocus is false', () => {
+        const wrapper = createWrapper({ autofocus: false })
+        const input = wrapper.find('input')
+
+        expect(document.activeElement).not.toBe(input.element)
+      })
+    })
+
+    describe('click to focus', () => {
+      it('should focus input when wrapper is clicked', async () => {
+        const wrapper = createWrapper()
+        const wrapperDiv = wrapper.find('[class*="flex"]')
+
+        await wrapperDiv.trigger('click')
+        await nextTick()
+
+        // Input should receive focus
+        const input = wrapper.find('input').element as HTMLInputElement
+        expect(input.focus).toBeDefined()
+      })
+    })
+  })
+})
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    :class="
+      cn(
+        'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
+        customClass,
+        wrapperStyle
+      )
+    "
+  >
+    <InputText
+      ref="inputRef"
+      v-model="modelValue"
+      :placeholder
+      :autofocus
+      unstyled
+      :class="
+        cn(
+          'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
+          isLarge ? 'pl-11' : 'pl-8'
+        )
+      "
+      :aria-label="placeholder"
+    />
+    <Button
+      v-if="filterIcon"
+      size="icon"
+      variant="textonly"
+      class="filter-button absolute inset-y-0 right-0 m-0 p-0"
+      @click="$emit('showFilter', $event)"
+    >
+      <i :class="filterIcon" />
+    </Button>
+    <InputIcon v-if="!modelValue" :class="icon" />
+    <Button
+      v-if="modelValue"
+      :class="cn('clear-button absolute', isLarge ? 'left-2' : 'left-0')"
+      variant="textonly"
+      size="icon"
+      @click="modelValue = ''"
+    >
+      <i class="icon-[lucide--x] size-4" />
+    </Button>
+  </div>
+  <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
+    <SearchFilterChip
+      v-for="filter in filters"
+      :key="filter.id"
+      :text="filter.text"
+      :badge="filter.badge"
+      :badge-class="filter.badgeClass"
+      @remove="$emit('removeFilter', filter)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" generic="TFilter extends SearchFilter">
+import { cn } from '@comfyorg/tailwind-utils'
+import { watchDebounced } from '@vueuse/core'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { computed, ref } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+
+import type { SearchFilter } from './SearchFilterChip.vue'
+import SearchFilterChip from './SearchFilterChip.vue'
+
+const {
+  placeholder = 'Search...',
+  icon = 'pi pi-search',
+  debounceTime = 300,
+  filterIcon,
+  filters = [],
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: customClass
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  filterIcon?: string
+  filters?: TFilter[]
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const isLarge = computed(() => size === 'lg')
+
+const emit = defineEmits<{
+  (e: 'search', value: string, filters: TFilter[]): void
+  (e: 'showFilter', event: Event): void
+  (e: 'removeFilter', filter: TFilter): void
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const inputRef = ref()
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+watchDebounced(
+  modelValue,
+  (value: string) => {
+    emit('search', value, filters)
+  },
+  { debounce: debounceTime }
+)
+
+const wrapperStyle = computed(() => {
+  if (showBorder) {
+    return cn(
+      'box-border rounded-sm border border-solid border-border-default p-2',
+      isLarge.value ? 'h-10' : 'h-8'
+    )
+  }
+
+  // Size-specific classes matching button sizes for consistency
+  const sizeClasses = {
+    md: 'h-8 px-2 py-1.5', // Matches button sm size
+    lg: 'h-10 px-4 py-2' // Matches button md size
+  }[size]
+
+  return cn('rounded-lg', sizeClasses)
+})
+</script>
+
+<style scoped>
+:deep(.p-inputtext) {
+  --p-form-field-padding-x: 0.625rem;
+}
+</style>
--- a/src/components/common/SearchBoxV2.test.ts
+++ b/src/components/common/SearchBoxV2.test.ts
@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SearchBoxV2 from './SearchBoxV2.vue'
+
+vi.mock('@vueuse/core', () => ({
+  watchDebounced: vi.fn(() => vi.fn())
+}))
+
+describe('SearchBoxV2', () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          clear: 'Clear',
+          searchPlaceholder: 'Search...'
+        }
+      }
+    }
+  })
+
+  function mountComponent(props = {}) {
+    return mount(SearchBoxV2, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          ComboboxRoot: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxAnchor: {
+            template: '<div><slot /></div>'
+          },
+          ComboboxInput: {
+            template:
+              '<input :placeholder="placeholder" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+            props: ['placeholder', 'modelValue', 'autoFocus']
+          }
+        }
+      },
+      props: {
+        modelValue: '',
+        ...props
+      }
+    })
+  }
+
+  it('uses i18n placeholder when no placeholder prop provided', () => {
+    const wrapper = mountComponent()
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Search...')
+  })
+
+  it('uses custom placeholder when provided', () => {
+    const wrapper = mountComponent({
+      placeholder: 'Custom placeholder'
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe('Custom placeholder')
+  })
+
+  it('shows search icon when search term is empty', () => {
+    const wrapper = mountComponent({ modelValue: '' })
+    expect(wrapper.find('i.icon-\\[lucide--search\\]').exists()).toBe(true)
+  })
+
+  it('shows clear button when search term is not empty', () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+
+  it('clears search term when clear button is clicked', async () => {
+    const wrapper = mountComponent({ modelValue: 'test' })
+    const clearButton = wrapper.find('button')
+    await clearButton.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
+  })
+
+  it('applies large size classes when size is lg', () => {
+    const wrapper = mountComponent({ size: 'lg' })
+    expect(wrapper.html()).toContain('size-5')
+  })
+
+  it('applies medium size classes when size is md', () => {
+    const wrapper = mountComponent({ size: 'md' })
+    expect(wrapper.html()).toContain('size-4')
+  })
+})
--- a/src/components/common/SearchBoxV2.vue
+++ b/src/components/common/SearchBoxV2.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="flex flex-auto flex-col gap-2">
+    <ComboboxRoot :ignore-filter="true" :open="false">
+      <ComboboxAnchor
+        :class="
+          cn(
+            'relative flex w-full cursor-text items-center',
+            'rounded-lg bg-comfy-input text-comfy-input-foreground',
+            showBorder &&
+              'box-border border border-solid border-border-default',
+            sizeClasses,
+            className
+          )
+        "
+      >
+        <i
+          v-if="!searchTerm"
+          :class="cn('pointer-events-none absolute left-4', icon, iconClass)"
+        />
+        <Button
+          v-else
+          class="absolute left-2"
+          variant="textonly"
+          size="icon"
+          :aria-label="$t('g.clear')"
+          @click="clearSearch"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </Button>
+
+        <ComboboxInput
+          ref="inputRef"
+          v-model="searchTerm"
+          :class="
+            cn(
+              'size-full border-none bg-transparent text-sm outline-none',
+              inputPadding
+            )
+          "
+          :placeholder="placeholderText"
+          :auto-focus="autofocus"
+        />
+      </ComboboxAnchor>
+    </ComboboxRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+import { watchDebounced } from '@vueuse/core'
+import { ComboboxAnchor, ComboboxInput, ComboboxRoot } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+
+const { t } = useI18n()
+
+const {
+  placeholder,
+  icon = 'icon-[lucide--search]',
+  debounceTime = 300,
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: className
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  debounceTime?: number
+  autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  search: [value: string]
+}>()
+
+const searchTerm = defineModel<string>({ required: true })
+
+const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+
+defineExpose({
+  focus: () => {
+    inputRef.value?.$el?.focus()
+  }
+})
+
+const isLarge = computed(() => size === 'lg')
+const placeholderText = computed(
+  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
+)
+
+const sizeClasses = computed(() => {
+  if (showBorder) {
+    return isLarge.value ? 'h-10 p-2' : 'h-8 p-2'
+  }
+  return isLarge.value ? 'h-12 px-4 py-2' : 'h-10 px-4 py-2'
+})
+
+const iconClass = computed(() => (isLarge.value ? 'size-5' : 'size-4'))
+const inputPadding = computed(() => (isLarge.value ? 'pl-8' : 'pl-6'))
+
+function clearSearch() {
+  searchTerm.value = ''
+}
+
+watchDebounced(
+  searchTerm,
+  (value: string) => {
+    emit('search', value)
+  },
+  { debounce: debounceTime }
+)
+</script>
--- a/src/components/common/VirtualGrid.test.ts
+++ b/src/components/common/VirtualGrid.test.ts
@@ -155,93 +155,6 @@ describe('VirtualGrid', () => {
    wrapper.unmount()
  })

-  it('emits approach-end for single-column list when scrolled near bottom', async () => {
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        maxColumns: 1,
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    // Scroll near the end: 50 items * 48px = 2400px total
-    // viewRows = ceil(600/48) = 13, buffer = 1
-    // Need toCol >= items.length - cols*bufferRows = 50 - 1 = 49
-    // toCol = (offsetRows + bufferRows + viewRows) * cols
-    // offsetRows = floor(scrollY / 48)
-    // Need (offsetRows + 1 + 13) * 1 >= 49 → offsetRows >= 35
-    // scrollY = 35 * 48 = 1680
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    expect(wrapper.emitted('approach-end')).toBeDefined()
-
-    wrapper.unmount()
-  })
-
-  it('does not emit approach-end without maxColumns in single-column layout', async () => {
-    // Demonstrates the bug: without maxColumns=1, cols is calculated
-    // from width/itemWidth (400/200 = 2), causing incorrect row math
-    const items = createItems(50)
-    mockedWidth.value = 400
-    mockedHeight.value = 600
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: {
-          display: 'grid',
-          gridTemplateColumns: 'minmax(0, 1fr)'
-        },
-        defaultItemHeight: 48,
-        defaultItemWidth: 200,
-        // No maxColumns — cols will be floor(400/200) = 2
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    // Same scroll position as the passing test
-    mockedScrollY.value = 1680
-    await nextTick()
-
-    // With cols=2, toCol = (35+1+13)*2 = 98, which exceeds items.length (50)
-    // remainingCol = 50-98 = -48, hasMoreToRender = false → isNearEnd = false
-    // The approach-end never fires at the correct scroll position
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    wrapper.unmount()
-  })
-
  it('forces cols to maxColumns when maxColumns is finite', async () => {
    mockedWidth.value = 100
    mockedHeight.value = 200
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -14,10 +14,10 @@
    </template>

    <template #header>
-      <SearchInput
+      <SearchBox
        v-model="searchQuery"
        size="lg"
-        class="max-w-96 flex-1"
+        class="max-w-[384px]"
        autofocus
      />
    </template>
@@ -389,7 +389,7 @@ 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 SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="keybinding-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
      v-model="filters['global'].value"
      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
    />
@@ -155,7 +155,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { KeyComboImpl } from '@/platform/keybindings/keyCombo'
 import { KeybindingImpl } from '@/platform/keybindings/keybinding'
--- a/src/components/error/ErrorOverlay.vue
+++ b/src/components/error/ErrorOverlay.vue
@@ -50,9 +50,7 @@
            {{ t('g.dismiss') }}
          </Button>
          <Button variant="secondary" size="lg" @click="seeErrors">
-            {{
-              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
-            }}
+            {{ t('errorOverlay.seeErrors') }}
          </Button>
        </div>
      </div>
@@ -71,8 +69,6 @@ import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'

-defineProps<{ appMode?: boolean }>()
-
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -98,7 +94,6 @@ function dismiss() {
 }

 function seeErrors() {
-  canvasStore.linearMode = false
  if (canvasStore.canvas) {
    canvasStore.canvas.deselectAll()
    canvasStore.updateSelectedItems()
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -93,12 +93,13 @@
      #header
    >
      <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchInput
+        <SearchBox
          v-if="showSearchBox"
          v-model="searchQuery"
          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :placeholder="searchPlaceholder"
-          size="sm"
+          :show-order="true"
+          :show-border="true"
+          :place-holder="searchPlaceholder"
        />
        <div
          v-if="showSelectedCount || showClearButton"
@@ -181,7 +182,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
--- a/src/components/queue/job/JobFilterActions.vue
+++ b/src/components/queue/job/JobFilterActions.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex min-w-0 items-center gap-2">
-    <SearchInput
+    <SearchBox
      v-if="showSearch"
      :model-value="searchQuery"
      class="min-w-0 flex-1"
@@ -116,7 +116,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { jobSortModes } from '@/composables/queue/useJobList'
--- a/src/components/rightSidePanel/errors/useErrorGroups.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.ts
@@ -1,5 +1,5 @@
-import { computed, reactive, ref, toValue, watch } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'

@@ -227,7 +227,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
 }

 export function useErrorGroups(
-  searchQuery: MaybeRefOrGetter<string>,
+  searchQuery: Ref<string>,
  t: (key: string) => string
 ) {
  const executionErrorStore = useExecutionErrorStore()
@@ -584,7 +584,7 @@ export function useErrorGroups(
  })

  const filteredGroups = computed<ErrorGroup[]>(() => {
-    const query = toValue(searchQuery).trim()
+    const query = searchQuery.value.trim()
    return searchErrorGroups(tabErrorGroups.value, query)
  })

--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -18,8 +18,6 @@
      class="flex-1"
      :items="assetItems"
      :grid-style="listGridStyle"
-      :max-columns="1"
-      :default-item-height="48"
      @approach-end="emit('approach-end')"
    >
      <template #item="{ item }">
--- a/src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue
@@ -21,7 +21,7 @@
    </template>
    <template #header>
      <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
          ref="searchBoxRef"
          v-model:model-value="searchQuery"
          class="workflows-search-box"
@@ -146,7 +146,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TextDivider from '@/components/common/TextDivider.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -22,7 +22,7 @@
    </template>
    <template #header>
      <div class="px-2 2xl:px-4">
-        <SearchInput
+        <SearchBox
          ref="searchBoxRef"
          v-model:model-value="searchQuery"
          :placeholder="
@@ -56,7 +56,7 @@
 import { Divider } from 'primevue'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -86,40 +86,18 @@
      </template>
      <template #header>
        <div class="px-2 2xl:px-4">
-          <div class="flex items-center gap-1">
-            <SearchInput
-              ref="searchBoxRef"
-              v-model="searchQuery"
-              data-testid="node-library-search"
-              class="node-lib-search-box"
-              :placeholder="
-                $t('g.searchPlaceholder', { subject: $t('g.nodes') })
-              "
-              @search="handleSearch"
-            />
-            <Button
-              variant="textonly"
-              size="icon"
-              class="filter-button shrink-0"
-              :aria-label="$t('g.filter')"
-              @click="(e: Event) => searchFilter?.toggle(e)"
-            >
-              <i class="pi pi-filter" />
-            </Button>
-          </div>
-          <div
-            v-if="filters?.length"
-            class="search-filters flex flex-wrap gap-2 pt-2"
-          >
-            <SearchFilterChip
-              v-for="filter in filters"
-              :key="filter.id"
-              :text="filter.text"
-              :badge="filter.badge"
-              :badge-class="filter.badgeClass"
-              @remove="onRemoveFilter(filter)"
-            />
-          </div>
+          <SearchBox
+            ref="searchBoxRef"
+            v-model:model-value="searchQuery"
+            data-testid="node-library-search"
+            class="node-lib-search-box"
+            :placeholder="$t('g.searchPlaceholder', { subject: $t('g.nodes') })"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
+          />

          <Popover ref="searchFilter" class="ml-[-13px]">
            <NodeSearchFilter @add-filter="onAddFilter" />
@@ -177,9 +155,8 @@ import {
 } from 'vue'

 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchFilterChip from '@/components/common/SearchFilterChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
@@ -69,7 +69,7 @@ vi.mock('./nodeLibrary/NodeDragPreview.vue', () => ({
  }
 }))

-vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
+vi.mock('@/components/common/SearchBoxV2.vue', () => ({
  default: {
    name: 'SearchBox',
    template: '<input data-testid="search-box" />',
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
@@ -3,7 +3,7 @@
    <template #header>
      <TabsRoot v-model="selectedTab" class="flex flex-col">
        <div class="flex items-center justify-between gap-2 px-2 pb-2 2xl:px-4">
-          <SearchInput
+          <SearchBox
            ref="searchBoxRef"
            v-model="searchQuery"
            :placeholder="$t('g.search') + '...'"
@@ -180,7 +180,7 @@ import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'

 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBoxV2.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
 import { usePerTabState } from '@/composables/usePerTabState'
@@ -253,7 +253,7 @@ const filterOptions = ref<Record<NodeCategoryId, boolean>>({

 const { t } = useI18n()

-const searchBoxRef = ref<InstanceType<typeof SearchInput> | null>(null)
+const searchBoxRef = ref<InstanceType<typeof SearchBox> | null>(null)
 const searchQuery = ref('')
 const expandedKeysByTab = ref<Record<TabId, string[]>>({
  essentials: [],
--- a/src/components/ui/ZoomPane.vue
+++ b/src/components/ui/ZoomPane.vue
@@ -24,7 +24,7 @@ function handleWheel(e: WheelEvent) {

 let dragging = false
 function handleDown(e: PointerEvent) {
-  if (e.button !== 0 && e.button !== 1) return
+  if (e.button !== 0) return

  const zoomPaneEl = zoomPane.value
  if (!zoomPaneEl) return
--- a/src/components/ui/search-input/SearchInput.test.ts
+++ b/src/components/ui/search-input/SearchInput.test.ts
@@ -1,202 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, watch } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import SearchInput from './SearchInput.vue'
-
-vi.mock('@vueuse/core', () => ({
-  watchDebounced: vi.fn((source, cb, opts) => {
-    let timer: ReturnType<typeof setTimeout> | null = null
-    return watch(source, (val: string) => {
-      if (timer) clearTimeout(timer)
-      timer = setTimeout(() => cb(val), opts?.debounce ?? 300)
-    })
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        clear: 'Clear',
-        searchPlaceholder: 'Search...'
-      }
-    }
-  }
-})
-
-describe('SearchInput', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.useRealTimers()
-  })
-
-  function mountComponent(props = {}) {
-    return mount(SearchInput, {
-      global: {
-        plugins: [i18n],
-        stubs: {
-          ComboboxRoot: {
-            template: '<div><slot /></div>'
-          },
-          ComboboxAnchor: {
-            template: '<div @click="$emit(\'click\')"><slot /></div>',
-            emits: ['click']
-          },
-          ComboboxInput: {
-            template:
-              '<input :placeholder="placeholder" :value="modelValue" :autofocus="autoFocus || undefined" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-            props: ['placeholder', 'modelValue', 'autoFocus']
-          }
-        }
-      },
-      props: {
-        modelValue: '',
-        ...props
-      }
-    })
-  }
-
-  describe('debounced search', () => {
-    it('should debounce search input by 300ms', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('test')
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(299)
-      await nextTick()
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(1)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toEqual([['test']])
-    })
-
-    it('should reset debounce timer on each keystroke', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      await input.setValue('t')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('te')
-      vi.advanceTimersByTime(200)
-      await nextTick()
-
-      await input.setValue('tes')
-      await vi.advanceTimersByTimeAsync(200)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(100)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeTruthy()
-      expect(wrapper.emitted('search')?.[0]).toEqual(['tes'])
-    })
-
-    it('should only emit final value after rapid typing', async () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
-      for (const term of searchTerms) {
-        await input.setValue(term)
-        await vi.advanceTimersByTimeAsync(50)
-      }
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toBeFalsy()
-
-      await vi.advanceTimersByTimeAsync(350)
-      await nextTick()
-
-      expect(wrapper.emitted('search')).toHaveLength(1)
-      expect(wrapper.emitted('search')?.[0]).toEqual(['search'])
-    })
-  })
-
-  describe('model sync', () => {
-    it('should sync external model changes to internal state', async () => {
-      const wrapper = mountComponent({ modelValue: 'initial' })
-      const input = wrapper.find('input')
-
-      expect(input.element.value).toBe('initial')
-
-      await wrapper.setProps({ modelValue: 'external update' })
-      await nextTick()
-
-      expect(input.element.value).toBe('external update')
-    })
-  })
-
-  describe('placeholder', () => {
-    it('should use custom placeholder when provided', () => {
-      const wrapper = mountComponent({ placeholder: 'Custom search...' })
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Custom search...')
-    })
-
-    it('should use i18n placeholder when not provided', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-
-      expect(input.attributes('placeholder')).toBe('Search...')
-    })
-  })
-
-  describe('autofocus', () => {
-    it('should pass autofocus prop to ComboboxInput', () => {
-      const wrapper = mountComponent({ autofocus: true })
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeDefined()
-    })
-
-    it('should not autofocus by default', () => {
-      const wrapper = mountComponent()
-      const input = wrapper.find('input')
-      expect(input.attributes('autofocus')).toBeUndefined()
-    })
-  })
-
-  describe('focus method', () => {
-    it('should expose focus method via ref', () => {
-      const wrapper = mountComponent()
-      expect(wrapper.vm.focus).toBeDefined()
-    })
-  })
-
-  describe('clear button', () => {
-    it('shows search icon when value is empty', () => {
-      const wrapper = mountComponent({ modelValue: '' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(false)
-    })
-
-    it('shows clear button when value is not empty', () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      expect(wrapper.find('button[aria-label="Clear"]').exists()).toBe(true)
-    })
-
-    it('clears value when clear button is clicked', async () => {
-      const wrapper = mountComponent({ modelValue: 'test' })
-      const clearButton = wrapper.find('button')
-      await clearButton.trigger('click')
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([''])
-    })
-  })
-})
--- a/src/components/ui/search-input/SearchInput.vue
+++ b/src/components/ui/search-input/SearchInput.vue
@@ -1,15 +1,11 @@
 <template>
-  <ComboboxRoot
-    :ignore-filter="true"
-    :open="false"
-    :disabled="disabled"
-    :class="className"
-  >
+  <ComboboxRoot :ignore-filter="true" :open="false" :disabled="disabled">
    <ComboboxAnchor
      :class="
        cn(
          searchInputVariants({ size }),
-          disabled && 'pointer-events-none opacity-50'
+          disabled && 'pointer-events-none opacity-50',
+          className
        )
      "
      @click="focus"
--- a/src/components/ui/slider/Slider.stories.ts
+++ b/src/components/ui/slider/Slider.stories.ts
@@ -1,77 +0,0 @@
-import type {
-  ComponentPropsAndSlots,
-  Meta,
-  StoryObj
-} from '@storybook/vue3-vite'
-import { computed, ref, toRefs } from 'vue'
-
-import Slider from './Slider.vue'
-
-interface StoryArgs extends ComponentPropsAndSlots<typeof Slider> {
-  disabled: boolean
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'Components/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    min: { control: 'number' },
-    max: { control: 'number' },
-    step: { control: 'number' },
-    disabled: { control: 'boolean' }
-  },
-  args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false
-  },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div class="w-72"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render: (args) => ({
-    components: { Slider },
-    setup() {
-      const { min, max, step, disabled } = toRefs(args)
-      const value = ref([36])
-      const display = computed(() => value.value[0])
-      return { value, display, min, max, step, disabled }
-    },
-    template: `
-      <div class="flex items-center gap-4 rounded-lg bg-component-node-widget-background px-3 py-2">
-        <Slider v-model="value" :min :max :step :disabled class="flex-1" />
-        <span class="w-14 shrink-0 text-right text-xs text-component-node-foreground">{{ display }}</span>
-      </div>
-    `
-  })
-}
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -12,7 +12,7 @@
    </template>

    <template #header>
-      <SearchInput v-model="searchQuery" size="lg" class="max-w-96 flex-1" />
+      <SearchBox v-model="searchQuery" size="lg" class="max-w-[384px]" />
    </template>

    <template #header-right-area>
@@ -130,7 +130,7 @@ 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 SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import Button from '@/components/ui/button/Button.vue'
--- a/src/components/widget/layout/BaseModalLayout.stories.ts
+++ b/src/components/widget/layout/BaseModalLayout.stories.ts
@@ -8,7 +8,7 @@ import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
@@ -68,7 +68,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
  components: {
    BaseModalLayout,
    LeftSidePanel,
-    SearchInput,
+    SearchBox,
    MultiSelect,
    SingleSelect,
    Button,
@@ -186,7 +186,7 @@ const createStoryTemplate = (args: StoryArgs) => ({

        <!-- Header -->
        <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
            class="max-w-[384px]"
            size="lg"
            :modelValue="searchQuery"
@@ -309,7 +309,7 @@ const createStoryTemplate = (args: StoryArgs) => ({

        <!-- Header -->
        <template v-if="args.hasHeader" #header>
-          <SearchInput
+          <SearchBox
            class="max-w-[384px]"
            size="lg"
            :modelValue="searchQuery"
--- a/src/composables/useStablePrimeVueSplitterSizer.test.ts
+++ b/src/composables/useStablePrimeVueSplitterSizer.test.ts
@@ -1,133 +0,0 @@
-import type { SplitterResizeEndEvent } from 'primevue/splitter'
-
-import { nextTick, ref } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
-
-import { useStablePrimeVueSplitterSizer } from './useStablePrimeVueSplitterSizer'
-
-vi.mock('@vueuse/core', async (importOriginal) => {
-  const actual = await importOriginal()
-  return {
-    ...(actual as object),
-    useStorage: <T>(_key: string, defaultValue: T) => ref(defaultValue)
-  }
-})
-
-function createPanel(width: number) {
-  const el = document.createElement('div')
-  Object.defineProperty(el, 'offsetWidth', { value: width })
-  return ref(el)
-}
-
-function resizeEndEvent(): SplitterResizeEndEvent {
-  return { originalEvent: new Event('mouseup'), sizes: [] }
-}
-
-async function flushWatcher() {
-  await nextTick()
-  await nextTick()
-}
-
-describe('useStablePrimeVueSplitterSizer', () => {
-  it('captures pixel widths on resize end and applies on trigger', async () => {
-    const panelRef = createPanel(400)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-capture' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('400px')
-    expect(panelRef.value!.style.flexGrow).toBe('0')
-    expect(panelRef.value!.style.flexShrink).toBe('0')
-  })
-
-  it('does not apply styles when no stored width exists', async () => {
-    const panelRef = createPanel(300)
-    const trigger = ref(0)
-
-    useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-no-stored' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('')
-  })
-
-  it('re-applies stored widths when watch sources change', async () => {
-    const panelRef = createPanel(500)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-reapply' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    panelRef.value!.style.flexBasis = ''
-    panelRef.value!.style.flexGrow = ''
-    panelRef.value!.style.flexShrink = ''
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('500px')
-    expect(panelRef.value!.style.flexGrow).toBe('0')
-    expect(panelRef.value!.style.flexShrink).toBe('0')
-  })
-
-  it('handles multiple panels independently', async () => {
-    const leftRef = createPanel(300)
-    const rightRef = createPanel(250)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [
-        { ref: leftRef, storageKey: 'test-multi-left' },
-        { ref: rightRef, storageKey: 'test-multi-right' }
-      ],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(leftRef.value!.style.flexBasis).toBe('300px')
-    expect(rightRef.value!.style.flexBasis).toBe('250px')
-  })
-
-  it('skips panels with null refs', async () => {
-    const nullRef = ref(null)
-    const validRef = createPanel(200)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [
-        { ref: nullRef, storageKey: 'test-null' },
-        { ref: validRef, storageKey: 'test-valid' }
-      ],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(validRef.value!.style.flexBasis).toBe('200px')
-  })
-})
--- a/src/composables/useStablePrimeVueSplitterSizer.ts
+++ b/src/composables/useStablePrimeVueSplitterSizer.ts
@@ -1,64 +0,0 @@
-import type { SplitterResizeEndEvent } from 'primevue/splitter'
-import type { WatchSource } from 'vue'
-
-import { unrefElement, useStorage } from '@vueuse/core'
-import type { MaybeComputedElementRef } from '@vueuse/core'
-import { nextTick, watch } from 'vue'
-
-interface PanelConfig {
-  ref: MaybeComputedElementRef
-  storageKey: string
-}
-
-/**
- * Works around PrimeVue Splitter not properly initializing flexBasis
- * when panels are conditionally rendered. Captures pixel widths on
- * resize end and re-applies them as rigid flex values (flex: 0 0 Xpx)
- * when watched sources change (e.g. tab switch, panel toggle).
- *
- * @param panels - array of panel configs with template ref and storage key
- * @param watchSources - reactive sources that trigger re-application
- */
-export function useStablePrimeVueSplitterSizer(
-  panels: PanelConfig[],
-  watchSources: WatchSource[]
-) {
-  const storedWidths = panels.map((panel) => ({
-    ref: panel.ref,
-    width: useStorage<number | null>(panel.storageKey, null)
-  }))
-
-  function resolveElement(
-    ref: MaybeComputedElementRef
-  ): HTMLElement | undefined {
-    return unrefElement(ref) as HTMLElement | undefined
-  }
-
-  function applyStoredWidths() {
-    for (const { ref, width } of storedWidths) {
-      const el = resolveElement(ref)
-      if (!el || width.value === null) continue
-      el.style.flexBasis = `${width.value}px`
-      el.style.flexGrow = '0'
-      el.style.flexShrink = '0'
-    }
-  }
-
-  function onResizeEnd(_event: SplitterResizeEndEvent) {
-    for (const { ref, width } of storedWidths) {
-      const el = resolveElement(ref)
-      if (el) width.value = el.offsetWidth
-    }
-  }
-
-  watch(
-    watchSources,
-    async () => {
-      await nextTick()
-      applyStoredWidths()
-    },
-    { immediate: true }
-  )
-
-  return { onResizeEnd }
-}
--- a/src/constants/splitterConstants.ts
+++ b/src/constants/splitterConstants.ts
@@ -2,7 +2,7 @@
 export const SIDE_PANEL_SIZE = 20

 /** Default panel size (%) for the center/main panel */
-export const CENTER_PANEL_SIZE = 80
+export const CENTER_PANEL_SIZE = 60

 /** Minimum panel size (%) for the sidebar */
 export const SIDEBAR_MIN_SIZE = 10
--- a/src/extensions/core/imageCompare.ts
+++ b/src/extensions/core/imageCompare.ts
@@ -1,5 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { NodeOutputWith } from '@/schemas/apiSchema'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
@@ -28,6 +29,7 @@ useExtensionService().registerExtension({

      const toUrl = (record: Record<string, string>) => {
        const params = new URLSearchParams(record)
+        appendCloudResParam(params, record.filename)
        return api.apiURL(`/view?${params}${rand}`)
      }

--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3180,7 +3180,6 @@
    "cancelThisRun": "Cancel this run",
    "deleteAllAssets": "Delete all assets from this run",
    "hasCreditCost": "Requires additional credits",
-    "viewGraph": "View node graph",
    "welcome": {
      "title": "App Mode",
      "message": "A simplified view that hides the node graph so you can focus on creating.",
@@ -3225,19 +3224,6 @@
      "outputPlaceholder": "Output nodes will show up here",
      "outputRequiredPlaceholder": "At least one node is required"
    },
-    "error": {
-      "header": "This app encountered an error",
-      "log": "Error Logs",
-      "mobileFixable": "Check {0} for errors",
-      "requiresGraph": "Something went wrong during generation. This could be due to invalid hidden inputs, missing resources, or workflow configuration issues.",
-      "promptVisitGraph": "View the node graph to see the full error.",
-      "getHelp": "For help, view our {0}, {1}, or {2} with the copied error.",
-      "goto": "Show errors in graph",
-      "github": "submit a GitHub issue",
-      "guide": "troubleshooting guide",
-      "support": "contact our support",
-      "promptShow": "Show error report"
-    },
    "queue": {
      "clickToClear": "Click to clear queue",
      "clear": "Clear queue"
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -26,12 +26,12 @@
        class="flex w-full items-center justify-between gap-2"
        @click.self="focusedAsset = null"
      >
-        <SearchInput
+        <SearchBox
          v-model="searchQuery"
          :autofocus="true"
          size="lg"
          :placeholder="$t('g.searchPlaceholder', { subject: '' })"
-          class="max-w-lg flex-1"
+          class="max-w-96"
        />
        <Button
          v-if="isUploadButtonEnabled"
@@ -88,7 +88,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -236,7 +236,7 @@ const adaptedAsset = computed(() => {
    name: asset.name,
    display_name: asset.display_name,
    kind: fileKind.value,
-    src: asset.thumbnail_url || asset.preview_url || '',
+    src: asset.preview_url || '',
    size: asset.size,
    tags: asset.tags || [],
    created_at: asset.created_at,
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex items-center gap-3">
-    <SearchInput
+    <SearchBox
      :model-value="searchQuery"
      :placeholder="
        $t('g.searchPlaceholder', { subject: $t('sideToolbar.labels.assets') })
@@ -37,7 +37,7 @@
 </template>

 <script setup lang="ts">
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import { isCloud } from '@/platform/distribution/types'

 import MediaAssetFilterButton from './MediaAssetFilterButton.vue'
--- a/src/platform/assets/composables/media/assetMappers.ts
+++ b/src/platform/assets/composables/media/assetMappers.ts
@@ -45,8 +45,7 @@ export function mapTaskOutputToAssetItem(
      ? new Date(taskItem.executionStartTimestamp).toISOString()
      : new Date().toISOString(),
    tags: ['output'],
-    thumbnail_url: output.previewUrl,
-    preview_url: output.url,
+    preview_url: output.previewUrl,
    user_metadata: metadata
  }
 }
@@ -64,7 +63,6 @@ export function mapInputFileToAssetItem(
  directory: 'input' | 'output' = 'input'
 ): AssetItem {
  const params = new URLSearchParams({ filename, type: directory })
-  const preview_url = api.apiURL(`/view?${params}`)
  appendCloudResParam(params, filename)

  return {
@@ -73,7 +71,6 @@ export function mapInputFileToAssetItem(
    size: 0,
    created_at: new Date().toISOString(),
    tags: [directory],
-    thumbnail_url: api.apiURL(`/view?${params}`),
-    preview_url
+    preview_url: api.apiURL(`/view?${params}`)
  }
 }
--- a/src/platform/assets/schemas/assetSchema.ts
+++ b/src/platform/assets/schemas/assetSchema.ts
@@ -11,7 +11,6 @@ const zAsset = z.object({
  preview_id: z.string().nullable().optional(),
  display_name: z.string().optional(),
  preview_url: z.string().optional(),
-  thumbnail_url: z.string().optional(),
  created_at: z.string().optional(),
  updated_at: z.string().optional(),
  is_immutable: z.boolean().optional(),
--- a/src/platform/assets/utils/outputAssetUtil.ts
+++ b/src/platform/assets/utils/outputAssetUtil.ts
@@ -73,8 +73,7 @@ function mapOutputsToAssetItems({
      size: 0,
      created_at: createdAtValue,
      tags: ['output'],
-      thumbnail_url: output.previewUrl,
-      preview_url: output.url,
+      preview_url: output.previewUrl,
      user_metadata: {
        jobId,
        nodeId: output.nodeId,
--- a/src/platform/cloud/onboarding/onboardingCloudRoutes.ts
+++ b/src/platform/cloud/onboarding/onboardingCloudRoutes.ts
@@ -31,19 +31,7 @@ export const cloudOnboardingRoutes: RouteRecordRaw[] = [
        path: 'signup',
        name: 'cloud-signup',
        component: () =>
-          import('@/platform/cloud/onboarding/CloudSignupView.vue'),
-        beforeEnter: async (to, _from, next) => {
-          if (!to.query.switchAccount) {
-            const { useCurrentUser } =
-              await import('@/composables/auth/useCurrentUser')
-            const { isLoggedIn } = useCurrentUser()
-
-            if (isLoggedIn.value) {
-              return next({ name: 'cloud-user-check' })
-            }
-          }
-          next()
-        }
+          import('@/platform/cloud/onboarding/CloudSignupView.vue')
      },
      {
        path: 'forgot-password',
--- a/src/platform/settings/components/ExtensionPanel.vue
+++ b/src/platform/settings/components/ExtensionPanel.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="extension-panel flex flex-col gap-2">
-    <SearchInput
+    <SearchBox
      v-model="filters['global'].value"
      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.extensions') })"
    />
@@ -92,7 +92,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -7,7 +7,7 @@

    <template #leftPanel>
      <div class="px-3">
-        <SearchInput
+        <SearchBox
          v-model:model-value="searchQuery"
          size="md"
          :placeholder="$t('g.searchSettings') + '...'"
@@ -71,7 +71,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import NavItem from '@/components/widget/nav/NavItem.vue'
--- a/src/platform/workflow/sharing/components/AssetSectionList.vue
+++ b/src/platform/workflow/sharing/components/AssetSectionList.vue
@@ -46,10 +46,7 @@
                onThumbnailError($event.name, $event.previewUrl)
              "
            />
-            <span
-              v-tooltip="buildTooltipConfig(item.name)"
-              class="truncate text-xs text-base-foreground"
-            >
+            <span class="truncate text-xs text-base-foreground">
              {{ item.name }}
            </span>
            <span
@@ -77,7 +74,6 @@ import ShareAssetThumbnail from '@/platform/workflow/sharing/components/ShareAss
 import { useAssetSections } from '@/platform/workflow/sharing/composables/useAssetSections'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'

 const { items } = defineProps<{
  items: AssetInfo[]
--- a/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
+++ b/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
@@ -32,7 +32,7 @@
          v-if="uiConfig.showSearch && !isSingleSeatPlan"
          class="flex items-start gap-2"
        >
-          <SearchInput
+          <SearchBox
            v-model="searchQuery"
            :placeholder="$t('g.search')"
            size="lg"
@@ -367,7 +367,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -10,7 +10,6 @@ import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
@@ -30,7 +29,7 @@ import { useQueueSettingsStore } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { resolveNodeWidget } from '@/utils/litegraphUtil'
+import { resolveNode } from '@/utils/litegraphUtil'
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const executionErrorStore = useExecutionErrorStore()
@@ -64,41 +63,21 @@ useEventListener(
 )

 const mappedSelections = computed(() => {
-  let unprocessedInputs = appModeStore.selectedInputs.flatMap(
-    ([nodeId, widgetName]) => {
-      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
-      return widget ? ([[node, widget]] as const) : []
-    }
-  )
+  let unprocessedInputs = [...appModeStore.selectedInputs]
+  //FIXME strict typing here
  const processedInputs: ReturnType<typeof nodeToNodeData>[] = []
  while (unprocessedInputs.length) {
-    const [node] = unprocessedInputs[0]
-    const inputGroup = takeWhile(unprocessedInputs, ([n]) => n === node).map(
-      ([, widget]) => widget
-    )
+    const nodeId = unprocessedInputs[0][0]
+    const inputGroup = takeWhile(
+      unprocessedInputs,
+      ([id]) => id === nodeId
+    ).map(([, widgetName]) => widgetName)
    unprocessedInputs = unprocessedInputs.slice(inputGroup.length)
-    //FIXME: hide widget if owning node bypassed
+    const node = resolveNode(nodeId)
    if (node?.mode !== LGraphEventMode.ALWAYS) continue

    const nodeData = nodeToNodeData(node)
-    remove(nodeData.widgets ?? [], (vueWidget) => {
-      if (vueWidget.slotMetadata?.linked) return true
-
-      if (!node.isSubgraphNode())
-        return !inputGroup.some((w) => w.name === vueWidget.name)
-
-      const storeNodeId = vueWidget.storeNodeId?.split(':')?.[1] ?? ''
-      return !inputGroup.some(
-        (subWidget) =>
-          isPromotedWidgetView(subWidget) &&
-          subWidget.sourceNodeId == storeNodeId &&
-          subWidget.sourceWidgetName === vueWidget.storeName
-      )
-    })
-    for (const widget of nodeData.widgets ?? []) {
-      widget.slotMetadata = undefined
-      widget.nodeId = String(node.id)
-    }
+    remove(nodeData.widgets ?? [], (w) => !inputGroup.includes(w.name))
    processedInputs.push(nodeData)
  }
  return processedInputs
@@ -128,6 +107,8 @@ function getDropIndicator(node: LGraphNode) {
 function nodeToNodeData(node: LGraphNode) {
  const dropIndicator = getDropIndicator(node)
  const nodeData = extractVueNodeData(node)
+  remove(nodeData.widgets ?? [], (w) => w.slotMetadata?.linked ?? false)
+  for (const widget of nodeData.widgets ?? []) widget.slotMetadata = undefined

  return {
    ...nodeData,
--- a/src/renderer/extensions/linearMode/MobileDisplay.vue
+++ b/src/renderer/extensions/linearMode/MobileDisplay.vue
@@ -15,9 +15,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
-import MobileError from '@/renderer/extensions/linearMode/MobileError.vue'
 import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -33,7 +31,6 @@ const canvasStore = useCanvasStore()
 const colorPaletteService = useColorPaletteService()
 const colorPaletteStore = useColorPaletteStore()
 const { isLoggedIn } = useCurrentUser()
-const executionErrorStore = useExecutionErrorStore()
 const { t } = useI18n()
 const { commandIdToMenuItem } = useMenuItemStore()
 const queueStore = useQueueStore()
@@ -43,7 +40,7 @@ const { toggle: toggleFullscreen } = useFullscreen(undefined, {
  autoExit: true
 })

-const activeIndex = ref(1)
+const activeIndex = ref(2)
 const sliderPaneRef = useTemplateRef('sliderPaneRef')
 const sliderWidth = computed(() => sliderPaneRef.value?.offsetWidth)

@@ -195,11 +192,7 @@ const menuEntries = computed<MenuItem[]>(() => [
        <div
          class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"
        >
-          <MobileError
-            v-if="executionErrorStore.isErrorOverlayOpen"
-            @navigate-controls="activeIndex = 0"
-          />
-          <LinearPreview v-else mobile @navigate-controls="activeIndex = 0" />
+          <LinearPreview mobile />
        </div>
        <AssetsSidebarTab
          class="absolute top-0 left-[200vw] h-full w-screen bg-base-background"
@@ -220,11 +213,7 @@ const menuEntries = computed<MenuItem[]>(() => [
        <div class="relative size-4">
          <i :class="cn('size-4', icon)" />
          <div
-            v-if="index === 1 && executionErrorStore.isErrorOverlayOpen"
-            class="absolute -top-1 -right-1 size-2 rounded-full bg-error"
-          />
-          <div
-            v-else-if="
+            v-if="
              index === 1 &&
              (queueStore.runningTasks.length > 0 ||
                queueStore.pendingTasks.length > 0)
--- a/src/renderer/extensions/linearMode/MobileError.vue
+++ b/src/renderer/extensions/linearMode/MobileError.vue
@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Dialogue from '@/components/common/Dialogue.vue'
-import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
-import Button from '@/components/ui/button/Button.vue'
-import { useAppMode } from '@/composables/useAppMode'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { useExternalLink } from '@/composables/useExternalLink'
-import { buildSupportUrl } from '@/platform/support/config'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-
-defineEmits<{ navigateControls: [] }>()
-
-const { t } = useI18n()
-const appModeStore = useAppModeStore()
-const { setMode } = useAppMode()
-const executionErrorStore = useExecutionErrorStore()
-const { buildDocsUrl, staticUrls } = useExternalLink()
-const { allErrorGroups } = useErrorGroups('', t)
-const { copyToClipboard } = useCopyToClipboard()
-
-const guideUrl = buildDocsUrl('troubleshooting/overview', {
-  includeLocale: true
-})
-const supportUrl = buildSupportUrl()
-
-const inputNodeIds = computed(() => {
-  const ids = new Set()
-  for (const [id] of appModeStore.selectedInputs) ids.add(String(id))
-  return ids
-})
-
-const accessibleNodeErrors = computed(() =>
-  Object.keys(executionErrorStore.lastNodeErrors ?? {}).filter((k) =>
-    inputNodeIds.value.has(k)
-  )
-)
-const accessibleErrors = computed(() =>
-  accessibleNodeErrors.value.flatMap((k) =>
-    executionErrorStore.lastNodeErrors![k].errors.flatMap((error) => {
-      const { extra_info } = error
-      if (!extra_info) return []
-
-      const selectedInput = appModeStore.selectedInputs.find(
-        ([id, name]) => id == k && extra_info.input_name === name
-      )
-      if (!selectedInput) return []
-
-      return [`${selectedInput[1]}: ${error.message}`]
-    })
-  )
-)
-const allErrors = computed(() =>
-  allErrorGroups.value.flatMap((group) => {
-    if (group.type !== 'execution') return [group.title]
-
-    return group.cards.flatMap((c) =>
-      c.errors.map((e) =>
-        e.details
-          ? `${c.title} (${e.details}): ${e.message}`
-          : `${c.title}: ${e.message}`
-      )
-    )
-  })
-)
-
-function copy(obj: unknown) {
-  copyToClipboard(JSON.stringify(obj))
-}
-</script>
-<template>
-  <section class="flex h-full flex-col items-center justify-center gap-2 px-4">
-    <i class="icon-[lucide--circle-alert] size-6 bg-error" />
-    {{ t('linearMode.error.header') }}
-    <div class="p-1 text-muted-foreground">
-      <i18n-t
-        v-if="accessibleErrors.length"
-        keypath="linearMode.error.mobileFixable"
-      >
-        <Button @click="$emit('navigateControls')">
-          {{ t('linearMode.mobileControls') }}
-        </Button>
-      </i18n-t>
-      <div v-else class="text-center">
-        <p v-text="t('linearMode.error.requiresGraph')" />
-        <p v-text="t('linearMode.error.promptVisitGraph')" />
-        <p class="*:text-muted-foreground">
-          <i18n-t keypath="linearMode.error.getHelp">
-            <a
-              :href="guideUrl"
-              target="_blank"
-              v-text="t('linearMode.error.guide')"
-            />
-            <a
-              :href="staticUrls.githubIssues"
-              target="_blank"
-              v-text="t('linearMode.error.github')"
-            />
-            <a
-              :href="supportUrl"
-              target="_blank"
-              v-text="t('linearMode.error.support')"
-            />
-          </i18n-t>
-        </p>
-        <Dialogue :title="t('linearMode.error.log')">
-          <template #button>
-            <Button variant="textonly">
-              {{ t('linearMode.error.promptShow') }}
-              <i class="icon-[lucide--chevron-right] size-5" />
-            </Button>
-          </template>
-          <template #default="{ close }">
-            <article class="flex flex-col gap-2 p-4">
-              <section class="flex max-h-[60vh] flex-col gap-2 overflow-y-auto">
-                <div
-                  v-for="error in allErrors"
-                  :key="error"
-                  class="w-full rounded-lg bg-secondary-background p-2 text-muted-foreground"
-                  v-text="error"
-                />
-              </section>
-              <div class="flex items-center justify-end gap-4">
-                <Button variant="muted-textonly" size="lg" @click="close">
-                  {{ t('g.close') }}
-                </Button>
-                <Button size="lg" @click="copy(allErrors)">
-                  {{ t('importFailed.copyError') }}
-                  <i class="icon-[lucide--copy]" />
-                </Button>
-              </div>
-            </article>
-          </template>
-        </Dialogue>
-      </div>
-    </div>
-    <div
-      v-if="accessibleErrors.length"
-      class="my-8 w-full rounded-lg bg-secondary-background text-muted-foreground"
-    >
-      <ul>
-        <li
-          v-for="error in accessibleErrors"
-          :key="error"
-          class="before:content"
-          v-text="error"
-        />
-      </ul>
-    </div>
-    <div class="flex gap-2">
-      <Button
-        variant="textonly"
-        size="lg"
-        @click="executionErrorStore.dismissErrorOverlay()"
-      >
-        {{ t('g.dismiss') }}
-      </Button>
-      <Button variant="textonly" size="lg" @click="setMode('graph')">
-        {{ t('linearMode.viewGraph') }}
-      </Button>
-      <Button
-        v-if="accessibleErrors.length"
-        size="lg"
-        @click="copy(accessibleErrors)"
-      >
-        {{ t('importFailed.copyError') }}
-        <i class="icon-[lucide--copy]" />
-      </Button>
-    </div>
-  </section>
-</template>
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -1,13 +1,6 @@
 <template>
  <WidgetLayoutField :widget="widget">
-    <div
-      :class="
-        cn(
-          WidgetInputBaseClass,
-          'flex items-center gap-2 pr-2 pl-3 not-disabled:hover:bg-component-node-widget-background-hovered'
-        )
-      "
-    >
+    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
      <Slider
        :model-value="[modelValue]"
        v-bind="filteredProps"
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
@@ -1,115 +0,0 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import { createI18n } from 'vue-i18n'
-import { describe, expect, it, vi } from 'vitest'
-import { defineComponent, h } from 'vue'
-
-import FormDropdown from './FormDropdown.vue'
-import type { FormDropdownItem } from './types'
-
-function createItem(id: string, name: string): FormDropdownItem {
-  return { id, preview_url: '', name, label: name }
-}
-
-const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
-
-vi.mock('@/platform/updates/common/toastStore', () => ({
-  useToastStore: () => ({
-    addAlert: vi.fn()
-  })
-}))
-
-const MockFormDropdownMenu = defineComponent({
-  name: 'FormDropdownMenu',
-  props: {
-    items: { type: Array as () => FormDropdownItem[], default: () => [] },
-    isSelected: { type: Function, default: undefined },
-    filterOptions: { type: Array, default: () => [] },
-    sortOptions: { type: Array, default: () => [] },
-    maxSelectable: { type: Number, default: 1 },
-    disabled: { type: Boolean, default: false },
-    showOwnershipFilter: { type: Boolean, default: false },
-    ownershipOptions: { type: Array, default: () => [] },
-    showBaseModelFilter: { type: Boolean, default: false },
-    baseModelOptions: { type: Array, default: () => [] }
-  },
-  setup() {
-    return () => h('div', { class: 'mock-menu' })
-  }
-})
-
-function mountDropdown(items: FormDropdownItem[]) {
-  return mount(FormDropdown, {
-    props: { items },
-    global: {
-      plugins: [PrimeVue, i18n],
-      stubs: {
-        FormDropdownInput: true,
-        Popover: { template: '<div><slot /></div>' },
-        FormDropdownMenu: MockFormDropdownMenu
-      }
-    }
-  })
-}
-
-function getMenuItems(
-  wrapper: ReturnType<typeof mountDropdown>
-): FormDropdownItem[] {
-  return wrapper
-    .findComponent(MockFormDropdownMenu)
-    .props('items') as FormDropdownItem[]
-}
-
-describe('FormDropdown', () => {
-  describe('filteredItems updates when items prop changes', () => {
-    it('updates displayed items when items prop changes', async () => {
-      const wrapper = mountDropdown([
-        createItem('input-0', 'video1.mp4'),
-        createItem('input-1', 'video2.mp4')
-      ])
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(2)
-
-      await wrapper.setProps({
-        items: [
-          createItem('output-0', 'rendered1.mp4'),
-          createItem('output-1', 'rendered2.mp4')
-        ]
-      })
-      await flushPromises()
-
-      const menuItems = getMenuItems(wrapper)
-      expect(menuItems).toHaveLength(2)
-      expect(menuItems[0].name).toBe('rendered1.mp4')
-    })
-
-    it('updates when items change but IDs stay the same', async () => {
-      const wrapper = mountDropdown([createItem('1', 'alpha')])
-      await flushPromises()
-
-      await wrapper.setProps({ items: [createItem('1', 'beta')] })
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)[0].name).toBe('beta')
-    })
-
-    it('updates when switching between empty and non-empty items', async () => {
-      const wrapper = mountDropdown([])
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(0)
-
-      await wrapper.setProps({ items: [createItem('1', 'video.mp4')] })
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(1)
-      expect(getMenuItems(wrapper)[0].name).toBe('video.mp4')
-
-      await wrapper.setProps({ items: [] })
-      await flushPromises()
-
-      expect(getMenuItems(wrapper)).toHaveLength(0)
-    })
-  })
-})
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computedAsync, refDebounced } from '@vueuse/core'
 import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -102,16 +101,9 @@ const maxSelectable = computed(() => {
  return 1
 })

-const debouncedSearchQuery = refDebounced(searchQuery, 250, { maxWait: 1000 })
+const itemsKey = computed(() => items.map((item) => item.id).join('|'))

-const filteredItems = computedAsync(async (onCancel) => {
-  let cleanupFn: (() => void) | undefined
-  onCancel(() => cleanupFn?.())
-  const result = await searcher(debouncedSearchQuery.value, items, (cb) => {
-    cleanupFn = cb
-  })
-  return result
-}, [])
+const filteredItems = ref<FormDropdownItem[]>([])

 const defaultSorter = computed<SortOption['sorter']>(() => {
  const sorter = sortOptions.find((option) => option.id === 'default')?.sorter
@@ -179,6 +171,21 @@ function handleSelection(item: FormDropdownItem, index: number) {
    closeDropdown()
  }
 }
+
+async function customSearcher(
+  query: string,
+  onCleanup: (cleanupFn: () => void) => void
+) {
+  let isCleanup = false
+  let cleanupFn: undefined | (() => void)
+  onCleanup(() => {
+    isCleanup = true
+    cleanupFn?.()
+  })
+  await searcher(query, items, (cb) => (cleanupFn = cb)).then((results) => {
+    if (!isCleanup) filteredItems.value = results
+  })
+}
 </script>

 <template>
@@ -226,9 +233,11 @@ function handleSelection(item: FormDropdownItem, index: number) {
        :show-base-model-filter
        :base-model-options
        :disabled
+        :searcher="customSearcher"
        :items="sortedItems"
        :is-selected="internalIsSelected"
        :max-selectable
+        :update-key="itemsKey"
        @close="closeDropdown"
        @item-click="handleSelection"
      />
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter } from 'vue'
 import { computed } from 'vue'

 import VirtualGrid from '@/components/common/VirtualGrid.vue'
@@ -20,6 +20,11 @@ interface Props {
  isSelected: (item: FormDropdownItem, index: number) => boolean
  filterOptions: FilterOption[]
  sortOptions: SortOption[]
+  searcher?: (
+    query: string,
+    onCleanup: (cleanupFn: () => void) => void
+  ) => Promise<void>
+  updateKey?: MaybeRefOrGetter<unknown>
  showOwnershipFilter?: boolean
  ownershipOptions?: OwnershipFilterOption[]
  showBaseModelFilter?: boolean
@@ -31,6 +36,8 @@ const {
  isSelected,
  filterOptions,
  sortOptions,
+  searcher,
+  updateKey,
  showOwnershipFilter,
  ownershipOptions,
  showBaseModelFilter,
@@ -111,6 +118,8 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
      v-model:ownership-selected="ownershipSelected"
      v-model:base-model-selected="baseModelSelected"
      :sort-options
+      :searcher
+      :update-key
      :show-ownership-filter
      :ownership-options
      :show-base-model-filter
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { MaybeRefOrGetter } from 'vue'
+
 import Popover from 'primevue/popover'
 import { ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -17,7 +19,12 @@ import type { LayoutMode, SortOption } from './types'
 const { t } = useI18n()

 defineProps<{
+  searcher?: (
+    query: string,
+    onCleanup: (cleanupFn: () => void) => void
+  ) => Promise<void>
  sortOptions: SortOption[]
+  updateKey?: MaybeRefOrGetter<unknown>
  showOwnershipFilter?: boolean
  ownershipOptions?: OwnershipFilterOption[]
  showBaseModelFilter?: boolean
@@ -101,6 +108,8 @@ function toggleBaseModelSelection(item: FilterOption) {
  <div class="text-secondary flex gap-2 px-4">
    <FormSearchInput
      v-model="searchQuery"
+      :searcher
+      :update-key
      :class="
        cn(
          actionButtonStyle,
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -109,15 +109,8 @@ function createMockNode(comfyClass = 'TestNode'): LGraphNode {

  // Spy on the addWidget method
  vi.spyOn(node, 'addWidget').mockImplementation(
-    (type, name, value, callback, options = {}) => {
-      const normalizedOptions =
-        typeof options === 'string' ? { property: options } : options
-      const widget = createMockWidget({
-        type,
-        name,
-        value,
-        options: normalizedOptions
-      })
+    (type, name, value, callback) => {
+      const widget = createMockWidget({ type, name, value })
      // Store the callback function on the widget for testing
      if (typeof callback === 'function') {
        widget.callback = callback
@@ -327,7 +320,7 @@ describe('useComboWidget', () => {
          HASH_FILENAME,
          expect.any(Function),
          expect.objectContaining({
-            values: [], // Empty initially, populated via dynamic getter
+            values: [], // Empty initially, populated dynamically by Proxy
            getOptionLabel: expect.any(Function)
          })
        )
@@ -335,23 +328,6 @@ describe('useComboWidget', () => {
      }
    )

-    it('should keep the original options object for cloud input mappings', () => {
-      mockDistributionState.isCloud = true
-
-      const constructor = useComboWidget()
-      const mockNode = createMockNode('LoadImage')
-      const inputSpec = createMockInputSpec({
-        name: 'image',
-        options: [HASH_FILENAME]
-      })
-
-      const widget = constructor(mockNode, inputSpec)
-      const addWidgetCall = vi.mocked(mockNode.addWidget).mock.calls[0]
-      const options = addWidgetCall[4]
-
-      expect(widget.options).toBe(options)
-    })
-
    it("should format option labels using store's getInputName function", () => {
      mockDistributionState.isCloud = true
      mockGetInputName.mockReturnValue('Beautiful Sunset.png')
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -44,29 +44,6 @@ const NODE_PLACEHOLDER_MAP: Record<string, string> = {
  LoadAudio: 'widgets.uploadSelect.placeholderAudio'
 }

-const bindDynamicValuesOption = (
-  widget: IBaseWidget,
-  getValues: () => unknown
-) => {
-  const options = widget.options
-  let fallbackValues = Array.isArray(options.values)
-    ? options.values
-    : ([] as unknown[])
-
-  Object.defineProperty(options, 'values', {
-    configurable: true,
-    enumerable: true,
-    get: () => {
-      const values = getValues()
-      if (values === undefined || values === null) return fallbackValues
-      return values
-    },
-    set: (values: unknown[]) => {
-      fallbackValues = Array.isArray(values) ? values : fallbackValues
-    }
-  })
-}
-
 const addMultiSelectWidget = (
  node: LGraphNode,
  inputSpec: ComboInputSpec
@@ -156,16 +133,22 @@ const createInputMappingWidget = (
    })
  }

-  bindDynamicValuesOption(widget, () =>
-    assetsStore.inputAssets
-      .filter(
-        (asset) =>
-          getMediaTypeFromFilename(asset.name) ===
-          NODE_MEDIA_TYPE_MAP[node.comfyClass ?? '']
-      )
-      .map((asset) => asset.asset_hash)
-      .filter((hash): hash is string => !!hash)
-  )
+  const origOptions = widget.options
+  widget.options = new Proxy(origOptions, {
+    get(target, prop) {
+      if (prop !== 'values') {
+        return target[prop as keyof typeof target]
+      }
+      return assetsStore.inputAssets
+        .filter(
+          (asset) =>
+            getMediaTypeFromFilename(asset.name) ===
+            NODE_MEDIA_TYPE_MAP[node.comfyClass ?? '']
+        )
+        .map((asset) => asset.asset_hash)
+        .filter((hash): hash is string => !!hash)
+    }
+  })

  if (inputSpec.control_after_generate) {
    if (!isComboWidget(widget)) {
@@ -227,7 +210,15 @@ const addComboWidget = (
    })
    if (inputSpec.remote.refresh_button) remoteWidget.addRefreshButton()

-    bindDynamicValuesOption(widget, () => remoteWidget.getValue())
+    const origOptions = widget.options
+    widget.options = new Proxy(origOptions, {
+      get(target, prop) {
+        // Assertion: Proxy handler passthrough
+        return prop !== 'values'
+          ? target[prop as keyof typeof target]
+          : remoteWidget.getValue()
+      }
+    })
  }

  if (inputSpec.control_after_generate) {
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -208,11 +208,6 @@ export class ComfyApp {
    return this.rootGraphInternal!
  }

-  /** Whether the root graph has been initialized. Safe to check without triggering error logs. */
-  get isGraphReady(): boolean {
-    return !!this.rootGraphInternal
-  }
-
  canvas!: LGraphCanvas
  dragOverNode: LGraphNode | null = null
  readonly canvasElRef = shallowRef<HTMLCanvasElement>()
@@ -1830,6 +1825,7 @@ export class ComfyApp {
    )
    if (missingNodeTypes.length) {
      this.showMissingNodesError(missingNodeTypes.map((t) => t.class_type))
+      return
    }

    const ids = Object.keys(apiData)
--- a/src/stores/executionErrorStore.ts
+++ b/src/stores/executionErrorStore.ts
@@ -238,7 +238,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
  /** Graph node IDs (as strings) that have errors in the current graph scope. */
  const activeGraphErrorNodeIds = computed<Set<string>>(() => {
    const ids = new Set<string>()
-    if (!app.isGraphReady) return ids
+    if (!app.rootGraph) return ids

    // Fall back to rootGraph when currentGraph hasn't been initialized yet
    const activeGraph = canvasStore.currentGraph ?? app.rootGraph
@@ -287,7 +287,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {

  const activeMissingNodeGraphIds = computed<Set<string>>(() => {
    const ids = new Set<string>()
-    if (!app.isGraphReady) return ids
+    if (!app.rootGraph) return ids

    const activeGraph = canvasStore.currentGraph ?? app.rootGraph

@@ -357,7 +357,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {

  /** True if the node has errors inside it at any nesting depth. */
  function isContainerWithInternalError(node: LGraphNode): boolean {
-    if (!app.isGraphReady) return false
+    if (!app.rootGraph) return false
    const execId = getExecutionIdByNode(app.rootGraph, node)
    if (!execId) return false
    return errorAncestorExecutionIds.value.has(execId)
@@ -365,15 +365,15 @@ export const useExecutionErrorStore = defineStore('executionError', () => {

  /** True if the node has a missing node inside it at any nesting depth. */
  function isContainerWithMissingNode(node: LGraphNode): boolean {
-    if (!app.isGraphReady) return false
+    if (!app.rootGraph) return false
    const execId = getExecutionIdByNode(app.rootGraph, node)
    if (!execId) return false
    return missingAncestorExecutionIds.value.has(execId)
  }

  watch(lastNodeErrors, () => {
-    if (!app.isGraphReady) return
    const rootGraph = app.rootGraph
+    if (!rootGraph) return

    clearAllNodeErrorFlags(rootGraph)

--- a/src/stores/nodeOutputStore.ts
+++ b/src/stores/nodeOutputStore.ts
@@ -10,6 +10,7 @@ import type {
  ResultItem,
  ResultItemType
 } from '@/schemas/apiSchema'
+import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { clone } from '@/scripts/utils'
@@ -119,9 +120,11 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {

    const rand = app.getRandParam()
    const previewParam = getPreviewParam(node, outputs)
+    const isImage = isImageOutputs(node, outputs)

    return outputs.images.map((image) => {
      const params = new URLSearchParams(image)
+      if (isImage) appendCloudResParam(params, image.filename)
      return api.apiURL(`/view?${params}${previewParam}${rand}`)
    })
  }
--- a/src/utils/litegraphUtil.ts
+++ b/src/utils/litegraphUtil.ts
@@ -1,6 +1,5 @@
 import _ from 'es-toolkit/compat'

-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { ColorOption, LGraph } from '@/lib/litegraph/src/litegraph'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import {
@@ -320,31 +319,6 @@ export function resolveNode(
  }
  return undefined
 }
-export function resolveNodeWidget(
-  nodeId: NodeId,
-  widgetName?: string,
-  graph: LGraph = app.rootGraph
-): [LGraphNode, IBaseWidget] | [LGraphNode] | [] {
-  const node = graph.getNodeById(nodeId)
-  if (!widgetName) return node ? [node] : []
-  if (node) {
-    const widget = node.widgets?.find((w) => w.name === widgetName)
-    return widget ? [node, widget] : []
-  }
-
-  for (const node of graph.nodes) {
-    if (!node.isSubgraphNode()) continue
-    const widget = node.widgets?.find(
-      (w) =>
-        isPromotedWidgetView(w) &&
-        w.sourceWidgetName === widgetName &&
-        w.sourceNodeId === nodeId
-    )
-    if (widget) return [node, widget]
-  }
-
-  return []
-}

 export function isLoad3dNode(node: LGraphNode) {
  return (
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { breakpointsTailwind, unrefElement, useBreakpoints } from '@vueuse/core'
-import type { MaybeElement } from '@vueuse/core'
-import Splitter from 'primevue/splitter'
-import SplitterPanel from 'primevue/splitterpanel'
 import { storeToRefs } from 'pinia'
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
 import { computed, useTemplateRef } from 'vue'

 import AppBuilder from '@/components/builder/AppBuilder.vue'
 import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import ErrorOverlay from '@/components/error/ErrorOverlay.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
@@ -21,7 +18,6 @@ import LinearProgressBar from '@/renderer/extensions/linearMode/LinearProgressBa
 import MobileDisplay from '@/renderer/extensions/linearMode/MobileDisplay.vue'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useAppMode } from '@/composables/useAppMode'
-import { useStablePrimeVueSplitterSizer } from '@/composables/useStablePrimeVueSplitterSizer'
 import {
  BUILDER_MIN_SIZE,
  CENTER_PANEL_SIZE,
@@ -67,25 +63,14 @@ function sidePanelMinSize(isBuilder: boolean, isHidden: boolean) {
  return SIDEBAR_MIN_SIZE
 }

-// Remount splitter when panel structure changes so initializePanels()
-// properly sets flexBasis for the current set of panels.
+// Remount splitter when panel structure changes so layout
+// properly recalculates for the current set of panels.
 const splitterKey = computed(() => {
  const left = hasLeftPanel.value ? 'L' : ''
  const right = hasRightPanel.value ? 'R' : ''
  return isArrangeMode.value ? 'arrange' : `app-${left}${right}`
 })

-const leftPanelRef = useTemplateRef<MaybeElement>('leftPanel')
-const rightPanelRef = useTemplateRef<MaybeElement>('rightPanel')
-
-const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-  [
-    { ref: leftPanelRef, storageKey: 'Comfy.LinearView.LeftPanelWidth' },
-    { ref: rightPanelRef, storageKey: 'Comfy.LinearView.RightPanelWidth' }
-  ],
-  [activeTab, splitterKey]
-)
-
 const TYPEFORM_WIDGET_ID = 'jmmzmlKw'

 const bottomLeftRef = useTemplateRef('bottomLeftRef')
@@ -104,16 +89,16 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
        <TopbarSubscribeButton />
      </div>
    </div>
-    <Splitter
+    <SplitterGroup
      :key="splitterKey"
-      class="bg-comfy-menu-secondary-bg h-[calc(100%-var(--workflow-tabs-height))] w-full border-none"
-      @resizestart="$event.originalEvent.preventDefault()"
-      @resizeend="onResizeEnd"
+      direction="horizontal"
+      :auto-save-id="`linear-view-${sidebarOnLeft ? 'left' : 'right'}-${splitterKey}`"
+      class="bg-comfy-menu-secondary-bg h-[calc(100%-var(--workflow-tabs-height))] w-full"
    >
      <SplitterPanel
        v-if="hasLeftPanel"
-        ref="leftPanel"
-        :size="SIDE_PANEL_SIZE"
+        :order="1"
+        :default-size="SIDE_PANEL_SIZE"
        :min-size="
          sidePanelMinSize(showLeftBuilder, showRightBuilder && !activeTab)
        "
@@ -140,9 +125,19 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
          :toast-to="unrefElement(bottomLeftRef) ?? undefined"
        />
      </SplitterPanel>
+      <SplitterResizeHandle
+        v-if="hasLeftPanel"
+        :class="
+          cn(
+            'splitter-resize-handle w-1',
+            showRightBuilder && !activeTab && 'hidden'
+          )
+        "
+      />
      <SplitterPanel
        id="linearCenterPanel"
-        :size="CENTER_PANEL_SIZE"
+        :order="2"
+        :default-size="CENTER_PANEL_SIZE"
        class="relative flex min-w-[20vw] flex-col gap-4 text-muted-foreground outline-none"
      >
        <LinearProgressBar
@@ -157,12 +152,20 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
        </div>
        <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
        <div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
-        <div class="absolute top-4 right-4 z-20"><ErrorOverlay app-mode /></div>
      </SplitterPanel>
+      <SplitterResizeHandle
+        v-if="hasRightPanel"
+        :class="
+          cn(
+            'splitter-resize-handle w-1',
+            showLeftBuilder && !activeTab && 'hidden'
+          )
+        "
+      />
      <SplitterPanel
        v-if="hasRightPanel"
-        ref="rightPanel"
-        :size="SIDE_PANEL_SIZE"
+        :order="3"
+        :default-size="SIDE_PANEL_SIZE"
        :min-size="
          sidePanelMinSize(showRightBuilder, showLeftBuilder && !activeTab)
        "
@@ -187,24 +190,20 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
          <ExtensionSlot :extension="activeTab" />
        </div>
      </SplitterPanel>
-    </Splitter>
+    </SplitterGroup>
  </div>
 </template>

 <style scoped>
-:deep(.p-splitter-gutter) {
-  pointer-events: auto;
-}
-
-:deep(.p-splitter-gutter:hover),
-:deep(.p-splitter-gutter[data-p-gutter-resizing='true']) {
+.splitter-resize-handle[data-state='hover'],
+.splitter-resize-handle[data-state='drag'] {
  transition: background-color 0.2s ease 300ms;
  background-color: var(--p-primary-color);
 }

-/* Hide gutter next to hidden arrange panels */
-:deep(.arrange-panel[style*='display: none'] + .p-splitter-gutter),
-:deep(.p-splitter-gutter + .arrange-panel[style*='display: none']) {
+/* Hide handle next to hidden arrange panels */
+:deep(.arrange-panel[style*='display: none'] + .splitter-resize-handle),
+:deep(.splitter-resize-handle + .arrange-panel[style*='display: none']) {
  display: none;
 }
 </style>