Merge branch 'main' into 3-16-revert-changes

chore(deps-dev): bump the dev group across 1 directory with 19 updates (#33525 )
Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-03-16 20:57:03 +00:00 · 2026-03-16 19:57:42 +08:00 · 2026-03-16 20:31:58 +09:00 · 2026-03-16 10:57:04 +00:00 · 2026-03-16 18:53:20 +08:00 · 2026-03-16 18:17:21 +08:00
539 changed files with 62459 additions and 20968 deletions
--- a/.github/workflows/web-tests.yml
+++ b/.github/workflows/web-tests.yml
@@ -29,8 +29,8 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6]
-        shardTotal: [6]
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
    defaults:
      run:
        shell: bash
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -119,7 +119,7 @@ dev = [
    "pytest~=9.0.2",
    "pytest-benchmark~=5.2.3",
    "pytest-cov~=7.0.0",
-    "pytest-env~=1.1.3",
+    "pytest-env~=1.6.0",
    "pytest-mock~=3.15.1",
    "testcontainers~=4.14.1",
    "types-aiofiles~=25.1.0",
--- a/api/tests/unit_tests/controllers/console/test_extension.py
+++ b/api/tests/unit_tests/controllers/console/test_extension.py
@@ -22,7 +22,7 @@ from controllers.console.extension import (
 )

 if _NEEDS_METHOD_VIEW_CLEANUP:
-    delattr(builtins, "MethodView")
+    del builtins.MethodView
 from models.account import AccountStatus
 from models.api_based_extension import APIBasedExtension

--- a/api/tests/unit_tests/libs/test_login.py
+++ b/api/tests/unit_tests/libs/test_login.py
@@ -140,7 +140,7 @@ class TestLoginRequired:

        # Remove ensure_sync to simulate Flask 1.x
        if hasattr(setup_app, "ensure_sync"):
-            delattr(setup_app, "ensure_sync")
+            del setup_app.ensure_sync

        with setup_app.test_request_context():
            mock_user = MockUser("test_user", is_authenticated=True)
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -720,16 +720,16 @@ wheels = [

 [[package]]
 name = "boto3-stubs"
-version = "1.41.3"
+version = "1.42.68"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "botocore-stubs" },
    { name = "types-s3transfer" },
    { name = "typing-extensions", marker = "python_full_version < '3.12'" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/fd/5b/6d274aa25f7fa09f8b7defab5cb9389e6496a7d9b76c1efcf27b0b15e868/boto3_stubs-1.41.3.tar.gz", hash = "sha256:c7cc9706ac969c8ea284c2d45ec45b6371745666d087c6c5e7c9d39dafdd48bc", size = 100010, upload-time = "2025-11-24T20:34:27.052Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/4c/8c/dd4b0c95ff008bed5a35ab411452ece121b355539d2a0b6dcd62a0c47be5/boto3_stubs-1.42.68.tar.gz", hash = "sha256:96ad1020735619483fb9b4da7a5e694b460bf2e18f84a34d5d175d0ffe8c4653", size = 101372, upload-time = "2026-03-13T19:49:54.867Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/7e/d6/ef971013d1fc7333c6df322d98ebf4592df9c80e1966fb12732f91e9e71b/boto3_stubs-1.41.3-py3-none-any.whl", hash = "sha256:bec698419b31b499f3740f1dfb6dae6519167d9e3aa536f6f730ed280556230b", size = 69294, upload-time = "2025-11-24T20:34:23.1Z" },
+    { url = "https://files.pythonhosted.org/packages/68/15/3ca5848917214a168134512a5b45f856a56e913659888947a052e02031b5/boto3_stubs-1.42.68-py3-none-any.whl", hash = "sha256:ed7f98334ef7b2377fa8532190e63dc2c6d1dc895e3d7cb3d6d1c83771b81bf6", size = 70011, upload-time = "2026-03-13T19:49:42.801Z" },
 ]

 [package.optional-dependencies]
@@ -1845,7 +1845,7 @@ dev = [
    { name = "pytest", specifier = "~=9.0.2" },
    { name = "pytest-benchmark", specifier = "~=5.2.3" },
    { name = "pytest-cov", specifier = "~=7.0.0" },
-    { name = "pytest-env", specifier = "~=1.1.3" },
+    { name = "pytest-env", specifier = "~=1.6.0" },
    { name = "pytest-mock", specifier = "~=3.15.1" },
    { name = "pytest-timeout", specifier = ">=2.4.0" },
    { name = "pytest-xdist", specifier = ">=3.8.0" },
@@ -3157,14 +3157,14 @@ wheels = [

 [[package]]
 name = "hypothesis"
-version = "6.148.2"
+version = "6.151.9"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "sortedcontainers" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/4a/99/a3c6eb3fdd6bfa01433d674b0f12cd9102aa99630689427422d920aea9c6/hypothesis-6.148.2.tar.gz", hash = "sha256:07e65d34d687ddff3e92a3ac6b43966c193356896813aec79f0a611c5018f4b1", size = 469984, upload-time = "2025-11-18T20:21:17.047Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/19/e1/ef365ff480903b929d28e057f57b76cae51a30375943e33374ec9a165d9c/hypothesis-6.151.9.tar.gz", hash = "sha256:2f284428dda6c3c48c580de0e18470ff9c7f5ef628a647ee8002f38c3f9097ca", size = 463534, upload-time = "2026-02-16T22:59:23.09Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/b1/d2/c2673aca0127e204965e0e9b3b7a0e91e9b12993859ac8758abd22669b89/hypothesis-6.148.2-py3-none-any.whl", hash = "sha256:bf8ddc829009da73b321994b902b1964bcc3e5c3f0ed9a1c1e6a1631ab97c5fa", size = 536986, upload-time = "2025-11-18T20:21:15.212Z" },
+    { url = "https://files.pythonhosted.org/packages/c4/f7/5cc291d701094754a1d327b44d80a44971e13962881d9a400235726171da/hypothesis-6.151.9-py3-none-any.whl", hash = "sha256:7b7220585c67759b1b1ef839b1e6e9e3d82ed468cfc1ece43c67184848d7edd9", size = 529307, upload-time = "2026-02-16T22:59:20.443Z" },
 ]

 [[package]]
@@ -3178,19 +3178,17 @@ wheels = [

 [[package]]
 name = "import-linter"
-version = "2.10"
+version = "2.11"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "click" },
-    { name = "fastapi" },
    { name = "grimp" },
    { name = "rich" },
    { name = "typing-extensions" },
-    { name = "uvicorn" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/10/c4/a83cc1ea9ed0171725c0e2edc11fd929994d4f026028657e8b30d62bca37/import_linter-2.10.tar.gz", hash = "sha256:c6a5057d2dbd32e1854c4d6b60e90dfad459b7ab5356230486d8521f25872963", size = 1149263, upload-time = "2026-02-06T17:57:24.779Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/ba/66/55b697a17bb15c6cb88d97d73716813f5427281527b90f02cc0a600abc6e/import_linter-2.11.tar.gz", hash = "sha256:5abc3394797a54f9bae315e7242dc98715ba485f840ac38c6d3192c370d0085e", size = 1153682, upload-time = "2026-03-06T12:11:38.198Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/1c/e5/4b7b9435eac78ecfd537fa1004a0bcf0f4eac17d3a893f64d38a7bacb51b/import_linter-2.10-py3-none-any.whl", hash = "sha256:cc2ddd7ec0145cbf83f3b25391d2a5dbbf138382aaf80708612497fa6ebc8f60", size = 637081, upload-time = "2026-02-06T17:57:23.386Z" },
+    { url = "https://files.pythonhosted.org/packages/e9/aa/2ed2c89543632ded7196e0d93dcc6c7fe87769e88391a648c4a298ea864a/import_linter-2.11-py3-none-any.whl", hash = "sha256:3dc54cae933bae3430358c30989762b721c77aa99d424f56a08265be0eeaa465", size = 637315, upload-time = "2026-03-06T12:11:36.599Z" },
 ]

 [[package]]
@@ -3932,14 +3930,14 @@ wheels = [

 [[package]]
 name = "mypy-boto3-bedrock-runtime"
-version = "1.41.2"
+version = "1.42.42"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "typing-extensions", marker = "python_full_version < '3.12'" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/af/f1/00aea4f91501728e7af7e899ce3a75d48d6df97daa720db11e46730fa123/mypy_boto3_bedrock_runtime-1.41.2.tar.gz", hash = "sha256:ba2c11f2f18116fd69e70923389ce68378fa1620f70e600efb354395a1a9e0e5", size = 28890, upload-time = "2025-11-21T20:35:30.074Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/46/bb/65dc1b2c5796a6ab5f60bdb57343bd6c3ecb82251c580eca415c8548333e/mypy_boto3_bedrock_runtime-1.42.42.tar.gz", hash = "sha256:3a4088218478b6fbbc26055c03c95bee4fc04624a801090b3cce3037e8275c8d", size = 29840, upload-time = "2026-02-04T20:53:05.999Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/a7/cc/96a2af58c632701edb5be1dda95434464da43df40ae868a1ab1ddf033839/mypy_boto3_bedrock_runtime-1.41.2-py3-none-any.whl", hash = "sha256:a720ff1e98cf10723c37a61a46cff220b190c55b8fb57d4397e6cf286262cf02", size = 34967, upload-time = "2025-11-21T20:35:27.655Z" },
+    { url = "https://files.pythonhosted.org/packages/00/43/7ea062f2228f47b5779dcfa14dab48d6e29f979b35d1a5102b0ba80b9c1b/mypy_boto3_bedrock_runtime-1.42.42-py3-none-any.whl", hash = "sha256:b2d16eae22607d0685f90796b3a0afc78c0b09d45872e00eafd634a31dd9358f", size = 36077, upload-time = "2026-02-04T20:53:01.768Z" },
 ]

 [[package]]
@@ -5528,14 +5526,15 @@ wheels = [

 [[package]]
 name = "pytest-env"
-version = "1.1.5"
+version = "1.6.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "pytest" },
+    { name = "python-dotenv" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/1f/31/27f28431a16b83cab7a636dce59cf397517807d247caa38ee67d65e71ef8/pytest_env-1.1.5.tar.gz", hash = "sha256:91209840aa0e43385073ac464a554ad2947cc2fd663a9debf88d03b01e0cc1cf", size = 8911, upload-time = "2024-09-17T22:39:18.566Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/ff/69/4db1c30625af0621df8dbe73797b38b6d1b04e15d021dd5d26a6d297f78c/pytest_env-1.6.0.tar.gz", hash = "sha256:ac02d6fba16af54d61e311dd70a3c61024a4e966881ea844affc3c8f0bf207d3", size = 16163, upload-time = "2026-03-12T22:39:43.78Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/de/b8/87cfb16045c9d4092cfcf526135d73b88101aac83bc1adcf82dfb5fd3833/pytest_env-1.1.5-py3-none-any.whl", hash = "sha256:ce90cf8772878515c24b31cd97c7fa1f4481cd68d588419fd45f10ecaee6bc30", size = 6141, upload-time = "2024-09-17T22:39:16.942Z" },
+    { url = "https://files.pythonhosted.org/packages/27/16/ad52f56b96d851a2bcfdc1e754c3531341885bd7177a128c13ff2ca72ab4/pytest_env-1.6.0-py3-none-any.whl", hash = "sha256:1e7f8a62215e5885835daaed694de8657c908505b964ec8097a7ce77b403d9a3", size = 10400, upload-time = "2026-03-12T22:39:41.887Z" },
 ]

 [[package]]
@@ -6047,27 +6046,27 @@ wheels = [

 [[package]]
 name = "ruff"
-version = "0.15.5"
+version = "0.15.6"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/77/9b/840e0039e65fcf12758adf684d2289024d6140cde9268cc59887dc55189c/ruff-0.15.5.tar.gz", hash = "sha256:7c3601d3b6d76dce18c5c824fc8d06f4eef33d6df0c21ec7799510cde0f159a2", size = 4574214, upload-time = "2026-03-05T20:06:34.946Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/51/df/f8629c19c5318601d3121e230f74cbee7a3732339c52b21daa2b82ef9c7d/ruff-0.15.6.tar.gz", hash = "sha256:8394c7bb153a4e3811a4ecdacd4a8e6a4fa8097028119160dffecdcdf9b56ae4", size = 4597916, upload-time = "2026-03-12T23:05:47.51Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/47/20/5369c3ce21588c708bcbe517a8fbe1a8dfdb5dfd5137e14790b1da71612c/ruff-0.15.5-py3-none-linux_armv6l.whl", hash = "sha256:4ae44c42281f42e3b06b988e442d344a5b9b72450ff3c892e30d11b29a96a57c", size = 10478185, upload-time = "2026-03-05T20:06:29.093Z" },
-    { url = "https://files.pythonhosted.org/packages/44/ed/e81dd668547da281e5dce710cf0bc60193f8d3d43833e8241d006720e42b/ruff-0.15.5-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:6edd3792d408ebcf61adabc01822da687579a1a023f297618ac27a5b51ef0080", size = 10859201, upload-time = "2026-03-05T20:06:32.632Z" },
-    { url = "https://files.pythonhosted.org/packages/c4/8f/533075f00aaf19b07c5cd6aa6e5d89424b06b3b3f4583bfa9c640a079059/ruff-0.15.5-py3-none-macosx_11_0_arm64.whl", hash = "sha256:89f463f7c8205a9f8dea9d658d59eff49db05f88f89cc3047fb1a02d9f344010", size = 10184752, upload-time = "2026-03-05T20:06:40.312Z" },
-    { url = "https://files.pythonhosted.org/packages/66/0e/ba49e2c3fa0395b3152bad634c7432f7edfc509c133b8f4529053ff024fb/ruff-0.15.5-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ba786a8295c6574c1116704cf0b9e6563de3432ac888d8f83685654fe528fd65", size = 10534857, upload-time = "2026-03-05T20:06:19.581Z" },
-    { url = "https://files.pythonhosted.org/packages/59/71/39234440f27a226475a0659561adb0d784b4d247dfe7f43ffc12dd02e288/ruff-0.15.5-py3-none-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:fd4b801e57955fe9f02b31d20375ab3a5c4415f2e5105b79fb94cf2642c91440", size = 10309120, upload-time = "2026-03-05T20:06:00.435Z" },
-    { url = "https://files.pythonhosted.org/packages/f5/87/4140aa86a93df032156982b726f4952aaec4a883bb98cb6ef73c347da253/ruff-0.15.5-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:391f7c73388f3d8c11b794dbbc2959a5b5afe66642c142a6effa90b45f6f5204", size = 11047428, upload-time = "2026-03-05T20:05:51.867Z" },
-    { url = "https://files.pythonhosted.org/packages/5a/f7/4953e7e3287676f78fbe85e3a0ca414c5ca81237b7575bdadc00229ac240/ruff-0.15.5-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8dc18f30302e379fe1e998548b0f5e9f4dff907f52f73ad6da419ea9c19d66c8", size = 11914251, upload-time = "2026-03-05T20:06:22.887Z" },
-    { url = "https://files.pythonhosted.org/packages/77/46/0f7c865c10cf896ccf5a939c3e84e1cfaeed608ff5249584799a74d33835/ruff-0.15.5-py3-none-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:1cc6e7f90087e2d27f98dc34ed1b3ab7c8f0d273cc5431415454e22c0bd2a681", size = 11333801, upload-time = "2026-03-05T20:05:57.168Z" },
-    { url = "https://files.pythonhosted.org/packages/d3/01/a10fe54b653061585e655f5286c2662ebddb68831ed3eaebfb0eb08c0a16/ruff-0.15.5-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c1cb7169f53c1ddb06e71a9aebd7e98fc0fea936b39afb36d8e86d36ecc2636a", size = 11206821, upload-time = "2026-03-05T20:06:03.441Z" },
-    { url = "https://files.pythonhosted.org/packages/7a/0d/2132ceaf20c5e8699aa83da2706ecb5c5dcdf78b453f77edca7fb70f8a93/ruff-0.15.5-py3-none-manylinux_2_31_riscv64.whl", hash = "sha256:9b037924500a31ee17389b5c8c4d88874cc6ea8e42f12e9c61a3d754ff72f1ca", size = 11133326, upload-time = "2026-03-05T20:06:25.655Z" },
-    { url = "https://files.pythonhosted.org/packages/72/cb/2e5259a7eb2a0f87c08c0fe5bf5825a1e4b90883a52685524596bfc93072/ruff-0.15.5-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:65bb414e5b4eadd95a8c1e4804f6772bbe8995889f203a01f77ddf2d790929dd", size = 10510820, upload-time = "2026-03-05T20:06:37.79Z" },
-    { url = "https://files.pythonhosted.org/packages/ff/20/b67ce78f9e6c59ffbdb5b4503d0090e749b5f2d31b599b554698a80d861c/ruff-0.15.5-py3-none-musllinux_1_2_armv7l.whl", hash = "sha256:d20aa469ae3b57033519c559e9bc9cd9e782842e39be05b50e852c7c981fa01d", size = 10302395, upload-time = "2026-03-05T20:05:54.504Z" },
-    { url = "https://files.pythonhosted.org/packages/5f/e5/719f1acccd31b720d477751558ed74e9c88134adcc377e5e886af89d3072/ruff-0.15.5-py3-none-musllinux_1_2_i686.whl", hash = "sha256:15388dd28c9161cdb8eda68993533acc870aa4e646a0a277aa166de9ad5a8752", size = 10754069, upload-time = "2026-03-05T20:06:06.422Z" },
-    { url = "https://files.pythonhosted.org/packages/c3/9c/d1db14469e32d98f3ca27079dbd30b7b44dbb5317d06ab36718dee3baf03/ruff-0.15.5-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:b30da330cbd03bed0c21420b6b953158f60c74c54c5f4c1dabbdf3a57bf355d2", size = 11304315, upload-time = "2026-03-05T20:06:10.867Z" },
-    { url = "https://files.pythonhosted.org/packages/28/3a/950367aee7c69027f4f422059227b290ed780366b6aecee5de5039d50fa8/ruff-0.15.5-py3-none-win32.whl", hash = "sha256:732e5ee1f98ba5b3679029989a06ca39a950cced52143a0ea82a2102cb592b74", size = 10551676, upload-time = "2026-03-05T20:06:13.705Z" },
-    { url = "https://files.pythonhosted.org/packages/b8/00/bf077a505b4e649bdd3c47ff8ec967735ce2544c8e4a43aba42ee9bf935d/ruff-0.15.5-py3-none-win_amd64.whl", hash = "sha256:821d41c5fa9e19117616c35eaa3f4b75046ec76c65e7ae20a333e9a8696bc7fe", size = 11678972, upload-time = "2026-03-05T20:06:45.379Z" },
-    { url = "https://files.pythonhosted.org/packages/fe/4e/cd76eca6db6115604b7626668e891c9dd03330384082e33662fb0f113614/ruff-0.15.5-py3-none-win_arm64.whl", hash = "sha256:b498d1c60d2fe5c10c45ec3f698901065772730b411f164ae270bb6bfcc4740b", size = 10965572, upload-time = "2026-03-05T20:06:16.984Z" },
+    { url = "https://files.pythonhosted.org/packages/9e/2f/4e03a7e5ce99b517e98d3b4951f411de2b0fa8348d39cf446671adcce9a2/ruff-0.15.6-py3-none-linux_armv6l.whl", hash = "sha256:7c98c3b16407b2cf3d0f2b80c80187384bc92c6774d85fefa913ecd941256fff", size = 10508953, upload-time = "2026-03-12T23:05:17.246Z" },
+    { url = "https://files.pythonhosted.org/packages/70/60/55bcdc3e9f80bcf39edf0cd272da6fa511a3d94d5a0dd9e0adf76ceebdb4/ruff-0.15.6-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:ee7dcfaad8b282a284df4aa6ddc2741b3f4a18b0555d626805555a820ea181c3", size = 10942257, upload-time = "2026-03-12T23:05:23.076Z" },
+    { url = "https://files.pythonhosted.org/packages/e7/f9/005c29bd1726c0f492bfa215e95154cf480574140cb5f867c797c18c790b/ruff-0.15.6-py3-none-macosx_11_0_arm64.whl", hash = "sha256:3bd9967851a25f038fc8b9ae88a7fbd1b609f30349231dffaa37b6804923c4bb", size = 10322683, upload-time = "2026-03-12T23:05:33.738Z" },
+    { url = "https://files.pythonhosted.org/packages/5f/74/2f861f5fd7cbb2146bddb5501450300ce41562da36d21868c69b7a828169/ruff-0.15.6-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:13f4594b04e42cd24a41da653886b04d2ff87adbf57497ed4f728b0e8a4866f8", size = 10660986, upload-time = "2026-03-12T23:05:53.245Z" },
+    { url = "https://files.pythonhosted.org/packages/c1/a1/309f2364a424eccb763cdafc49df843c282609f47fe53aa83f38272389e0/ruff-0.15.6-py3-none-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:e2ed8aea2f3fe57886d3f00ea5b8aae5bf68d5e195f487f037a955ff9fbaac9e", size = 10332177, upload-time = "2026-03-12T23:05:56.145Z" },
+    { url = "https://files.pythonhosted.org/packages/30/41/7ebf1d32658b4bab20f8ac80972fb19cd4e2c6b78552be263a680edc55ac/ruff-0.15.6-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:70789d3e7830b848b548aae96766431c0dc01a6c78c13381f423bf7076c66d15", size = 11170783, upload-time = "2026-03-12T23:06:01.742Z" },
+    { url = "https://files.pythonhosted.org/packages/76/be/6d488f6adca047df82cd62c304638bcb00821c36bd4881cfca221561fdfc/ruff-0.15.6-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:542aaf1de3154cea088ced5a819ce872611256ffe2498e750bbae5247a8114e9", size = 12044201, upload-time = "2026-03-12T23:05:28.697Z" },
+    { url = "https://files.pythonhosted.org/packages/71/68/e6f125df4af7e6d0b498f8d373274794bc5156b324e8ab4bf5c1b4fc0ec7/ruff-0.15.6-py3-none-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:1c22e6f02c16cfac3888aa636e9eba857254d15bbacc9906c9689fdecb1953ab", size = 11421561, upload-time = "2026-03-12T23:05:31.236Z" },
+    { url = "https://files.pythonhosted.org/packages/f1/9f/f85ef5fd01a52e0b472b26dc1b4bd228b8f6f0435975442ffa4741278703/ruff-0.15.6-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:98893c4c0aadc8e448cfa315bd0cc343a5323d740fe5f28ef8a3f9e21b381f7e", size = 11310928, upload-time = "2026-03-12T23:05:45.288Z" },
+    { url = "https://files.pythonhosted.org/packages/8c/26/b75f8c421f5654304b89471ed384ae8c7f42b4dff58fa6ce1626d7f2b59a/ruff-0.15.6-py3-none-manylinux_2_31_riscv64.whl", hash = "sha256:70d263770d234912374493e8cc1e7385c5d49376e41dfa51c5c3453169dc581c", size = 11235186, upload-time = "2026-03-12T23:05:50.677Z" },
+    { url = "https://files.pythonhosted.org/packages/fc/d4/d5a6d065962ff7a68a86c9b4f5500f7d101a0792078de636526c0edd40da/ruff-0.15.6-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:55a1ad63c5a6e54b1f21b7514dfadc0c7fb40093fa22e95143cf3f64ebdcd512", size = 10635231, upload-time = "2026-03-12T23:05:37.044Z" },
+    { url = "https://files.pythonhosted.org/packages/d6/56/7c3acf3d50910375349016cf33de24be021532042afbed87942858992491/ruff-0.15.6-py3-none-musllinux_1_2_armv7l.whl", hash = "sha256:8dc473ba093c5ec238bb1e7429ee676dca24643c471e11fbaa8a857925b061c0", size = 10340357, upload-time = "2026-03-12T23:06:04.748Z" },
+    { url = "https://files.pythonhosted.org/packages/06/54/6faa39e9c1033ff6a3b6e76b5df536931cd30caf64988e112bbf91ef5ce5/ruff-0.15.6-py3-none-musllinux_1_2_i686.whl", hash = "sha256:85b042377c2a5561131767974617006f99f7e13c63c111b998f29fc1e58a4cfb", size = 10860583, upload-time = "2026-03-12T23:05:58.978Z" },
+    { url = "https://files.pythonhosted.org/packages/cb/1e/509a201b843b4dfb0b32acdedf68d951d3377988cae43949ba4c4133a96a/ruff-0.15.6-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:cef49e30bc5a86a6a92098a7fbf6e467a234d90b63305d6f3ec01225a9d092e0", size = 11410976, upload-time = "2026-03-12T23:05:39.955Z" },
+    { url = "https://files.pythonhosted.org/packages/6c/25/3fc9114abf979a41673ce877c08016f8e660ad6cf508c3957f537d2e9fa9/ruff-0.15.6-py3-none-win32.whl", hash = "sha256:bbf67d39832404812a2d23020dda68fee7f18ce15654e96fb1d3ad21a5fe436c", size = 10616872, upload-time = "2026-03-12T23:05:42.451Z" },
+    { url = "https://files.pythonhosted.org/packages/89/7a/09ece68445ceac348df06e08bf75db72d0e8427765b96c9c0ffabc1be1d9/ruff-0.15.6-py3-none-win_amd64.whl", hash = "sha256:aee25bc84c2f1007ecb5037dff75cef00414fdf17c23f07dc13e577883dca406", size = 11787271, upload-time = "2026-03-12T23:05:20.168Z" },
+    { url = "https://files.pythonhosted.org/packages/7f/d0/578c47dd68152ddddddf31cd7fc67dc30b7cdf639a86275fda821b0d9d98/ruff-0.15.6-py3-none-win_arm64.whl", hash = "sha256:c34de3dd0b0ba203be50ae70f5910b17188556630e2178fd7d79fc030eb0d837", size = 11060497, upload-time = "2026-03-12T23:05:25.968Z" },
 ]

 [[package]]
@@ -6106,14 +6105,14 @@ wheels = [

 [[package]]
 name = "scipy-stubs"
-version = "1.16.3.1"
+version = "1.17.1.2"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "optype", extra = ["numpy"] },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/0b/3e/8baf960c68f012b8297930d4686b235813974833a417db8d0af798b0b93d/scipy_stubs-1.16.3.1.tar.gz", hash = "sha256:0738d55a7f8b0c94cdb8063f711d53330ebefe166f7d48dec9ffd932a337226d", size = 359990, upload-time = "2025-11-23T23:05:21.274Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/c7/ab/43f681ffba42f363b7ed6b767fd215d1e26006578214ff8330586a11bf95/scipy_stubs-1.17.1.2.tar.gz", hash = "sha256:2ecadc8c87a3b61aaf7379d6d6b10f1038a829c53b9efe5b174fb97fc8b52237", size = 388354, upload-time = "2026-03-15T22:33:20.449Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/0c/39/e2a69866518f88dc01940c9b9b044db97c3387f2826bd2a173e49a5c0469/scipy_stubs-1.16.3.1-py3-none-any.whl", hash = "sha256:69bc52ef6c3f8e09208abdfaf32291eb51e9ddf8fa4389401ccd9473bdd2a26d", size = 560397, upload-time = "2025-11-23T23:05:19.432Z" },
+    { url = "https://files.pythonhosted.org/packages/8c/0b/ec4fe720c1202d9df729a3e9d9b7e4d2da9f6e7f28bd2877b7d0769f4f75/scipy_stubs-1.17.1.2-py3-none-any.whl", hash = "sha256:f19e8f5273dbe3b7ee6a9554678c3973b9695fa66b91f29206d00830a1536c06", size = 594377, upload-time = "2026-03-15T22:33:18.684Z" },
 ]

 [[package]]
@@ -6802,14 +6801,14 @@ wheels = [

 [[package]]
 name = "types-cffi"
-version = "1.17.0.20250915"
+version = "2.0.0.20260316"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "types-setuptools" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/2a/98/ea454cea03e5f351323af6a482c65924f3c26c515efd9090dede58f2b4b6/types_cffi-1.17.0.20250915.tar.gz", hash = "sha256:4362e20368f78dabd5c56bca8004752cc890e07a71605d9e0d9e069dbaac8c06", size = 17229, upload-time = "2025-09-15T03:01:25.31Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/07/4c/805b40b094eb3fd60f8d17fa7b3c58a33781311a95d0e6a74da0751ce294/types_cffi-2.0.0.20260316.tar.gz", hash = "sha256:8fb06ed4709675c999853689941133affcd2250cd6121cc11fd22c0d81ad510c", size = 17399, upload-time = "2026-03-16T07:54:43.059Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/aa/ec/092f2b74b49ec4855cdb53050deb9699f7105b8fda6fe034c0781b8687f3/types_cffi-1.17.0.20250915-py3-none-any.whl", hash = "sha256:cef4af1116c83359c11bb4269283c50f0688e9fc1d7f0eeb390f3661546da52c", size = 20112, upload-time = "2025-09-15T03:01:24.187Z" },
+    { url = "https://files.pythonhosted.org/packages/81/5e/9f1a709225ad9d0e1d7a6e4366ff285f0113c749e882d6cbeb40eab32e75/types_cffi-2.0.0.20260316-py3-none-any.whl", hash = "sha256:dd504698029db4c580385f679324621cc64d886e6a23e9821d52bc5169251302", size = 20096, upload-time = "2026-03-16T07:54:41.994Z" },
 ]

 [[package]]
@@ -6841,11 +6840,11 @@ wheels = [

 [[package]]
 name = "types-docutils"
-version = "0.22.3.20260223"
+version = "0.22.3.20260316"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/80/33/92c0129283363e3b3ba270bf6a2b7d077d949d2f90afc4abaf6e73578563/types_docutils-0.22.3.20260223.tar.gz", hash = "sha256:e90e868da82df615ea2217cf36dff31f09660daa15fc0f956af53f89c1364501", size = 57230, upload-time = "2026-02-23T04:11:21.806Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/9f/27/a7f16b3a2fad0a4ddd85a668319f9a1d0311c4bd9578894f6471c7e6c788/types_docutils-0.22.3.20260316.tar.gz", hash = "sha256:8ef27d565b9831ff094fe2eac75337a74151013e2d21ecabd445c2955f891564", size = 57263, upload-time = "2026-03-16T04:29:12.211Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/ba/c7/a4ae6a75d5b07d63089d5c04d450a0de4a5d48ffcb84b95659b22d3885fe/types_docutils-0.22.3.20260223-py3-none-any.whl", hash = "sha256:cc2d6b7560a28e351903db0989091474aa619ad287843a018324baee9c4d9a8f", size = 91969, upload-time = "2026-02-23T04:11:20.966Z" },
+    { url = "https://files.pythonhosted.org/packages/70/60/c1f22b7cfc4837d5419e5a2d8702c7d65f03343f866364b71cccd8a73b79/types_docutils-0.22.3.20260316-py3-none-any.whl", hash = "sha256:083c7091b8072c242998ec51da1bf1492f0332387da81c3b085efbf5ca754c7d", size = 91968, upload-time = "2026-03-16T04:29:11.114Z" },
 ]

 [[package]]
@@ -6875,15 +6874,15 @@ wheels = [

 [[package]]
 name = "types-gevent"
-version = "25.9.0.20251102"
+version = "25.9.0.20251228"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "types-greenlet" },
    { name = "types-psutil" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/4c/21/552d818a475e1a31780fb7ae50308feb64211a05eb403491d1a34df95e5f/types_gevent-25.9.0.20251102.tar.gz", hash = "sha256:76f93513af63f4577bb4178c143676dd6c4780abc305f405a4e8ff8f1fa177f8", size = 38096, upload-time = "2025-11-02T03:07:42.112Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/06/85/c5043c4472f82c8ee3d9e0673eb4093c7d16770a26541a137a53a1d096f6/types_gevent-25.9.0.20251228.tar.gz", hash = "sha256:423ef9891d25c5a3af236c3e9aace4c444c86ff773fe13ef22731bc61d59abef", size = 38063, upload-time = "2025-12-28T03:28:28.651Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/60/a1/776d2de31a02123f225aaa790641113ae47f738f6e8e3091d3012240a88e/types_gevent-25.9.0.20251102-py3-none-any.whl", hash = "sha256:0f14b9977cb04bf3d94444b5ae6ec5d78ac30f74c4df83483e0facec86f19d8b", size = 55592, upload-time = "2025-11-02T03:07:41.003Z" },
+    { url = "https://files.pythonhosted.org/packages/c8/b7/a2d6b652ab5a26318b68cafd58c46fafb9b15c5313d2d76a70b838febb4b/types_gevent-25.9.0.20251228-py3-none-any.whl", hash = "sha256:e2e225af4fface9241c16044983eb2fc3993f2d13d801f55c2932848649b7f2f", size = 55486, upload-time = "2025-12-28T03:28:27.382Z" },
 ]

 [[package]]
@@ -6909,11 +6908,11 @@ wheels = [

 [[package]]
 name = "types-jmespath"
-version = "1.0.2.20250809"
+version = "1.1.0.20260124"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/d5/ff/6848b1603ca47fff317b44dfff78cc1fb0828262f840b3ab951b619d5a22/types_jmespath-1.0.2.20250809.tar.gz", hash = "sha256:e194efec21c0aeae789f701ae25f17c57c25908e789b1123a5c6f8d915b4adff", size = 10248, upload-time = "2025-08-09T03:14:57.996Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/2b/ca/c8d7fc6e450c2f8fc6f510cb194754c43b17f933f2dcabcfc6985cbb97a8/types_jmespath-1.1.0.20260124.tar.gz", hash = "sha256:29d86868e72c0820914577077b27d167dcab08b1fc92157a29d537ff7153fdfe", size = 10709, upload-time = "2026-01-24T03:18:46.557Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/0e/6a/65c8be6b6555beaf1a654ae1c2308c2e19a610c0b318a9730e691b79ac79/types_jmespath-1.0.2.20250809-py3-none-any.whl", hash = "sha256:4147d17cc33454f0dac7e78b4e18e532a1330c518d85f7f6d19e5818ab83da21", size = 11494, upload-time = "2025-08-09T03:14:57.292Z" },
+    { url = "https://files.pythonhosted.org/packages/61/91/915c4a6e6e9bd2bca3ec0c21c1771b175c59e204b85e57f3f572370fe753/types_jmespath-1.1.0.20260124-py3-none-any.whl", hash = "sha256:ec387666d446b15624215aa9cbd2867ffd885b6c74246d357c65e830c7a138b3", size = 11509, upload-time = "2026-01-24T03:18:45.536Z" },
 ]

 [[package]]
@@ -6966,20 +6965,20 @@ wheels = [

 [[package]]
 name = "types-openpyxl"
-version = "3.1.5.20250919"
+version = "3.1.5.20260316"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/c4/12/8bc4a25d49f1e4b7bbca868daa3ee80b1983d8137b4986867b5b65ab2ecd/types_openpyxl-3.1.5.20250919.tar.gz", hash = "sha256:232b5906773eebace1509b8994cdadda043f692cfdba9bfbb86ca921d54d32d7", size = 100880, upload-time = "2025-09-19T02:54:39.997Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/a1/38/32f8ee633dd66ca6d52b8853b9fd45dc3869490195a6ed435d5c868b9c2d/types_openpyxl-3.1.5.20260316.tar.gz", hash = "sha256:081dda9427ea1141e5649e3dcf630e7013a4cf254a5862a7e0a3f53c123b7ceb", size = 101318, upload-time = "2026-03-16T04:29:05.004Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/36/3c/d49cf3f4489a10e9ddefde18fd258f120754c5825d06d145d9a0aaac770b/types_openpyxl-3.1.5.20250919-py3-none-any.whl", hash = "sha256:bd06f18b12fd5e1c9f0b666ee6151d8140216afa7496f7ebb9fe9d33a1a3ce99", size = 166078, upload-time = "2025-09-19T02:54:38.657Z" },
+    { url = "https://files.pythonhosted.org/packages/d5/df/b87ae6226ed7cc84b9e43119c489c7f053a9a25e209e0ebb5d84bc36fa37/types_openpyxl-3.1.5.20260316-py3-none-any.whl", hash = "sha256:38e7e125df520fb7eb72cb1129c9f024eb99ef9564aad2c27f68f080c26bcf2d", size = 166084, upload-time = "2026-03-16T04:29:03.657Z" },
 ]

 [[package]]
 name = "types-pexpect"
-version = "4.9.0.20250916"
+version = "4.9.0.20260127"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/0c/e6/cc43e306dc7de14ec7861c24ac4957f688741ae39ae685049695d796b587/types_pexpect-4.9.0.20250916.tar.gz", hash = "sha256:69e5fed6199687a730a572de780a5749248a4c5df2ff1521e194563475c9928d", size = 13322, upload-time = "2025-09-16T02:49:25.61Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/2e/32/7e03a07e16f79a404d6200ed6bdfcc320d0fb833436a5c6895a1403dedb7/types_pexpect-4.9.0.20260127.tar.gz", hash = "sha256:f8d43efc24251a8e533c71ea9be03d19bb5d08af096d561611697af9720cba7f", size = 13461, upload-time = "2026-01-27T03:28:30.923Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/aa/6d/7740e235a9fb2570968da7d386d7feb511ce68cd23472402ff8cdf7fc78f/types_pexpect-4.9.0.20250916-py3-none-any.whl", hash = "sha256:7fa43cb96042ac58bc74f7c28e5d85782be0ee01344149886849e9d90936fe8a", size = 17057, upload-time = "2025-09-16T02:49:24.546Z" },
+    { url = "https://files.pythonhosted.org/packages/8a/d9/7ac5c9aa5a89a1a64cd835ae348227f4939406d826e461b85b690a8ba1c2/types_pexpect-4.9.0.20260127-py3-none-any.whl", hash = "sha256:69216c0ebf0fe45ad2900823133959b027e9471e24fc3f2e4c7b00605555da5f", size = 17078, upload-time = "2026-01-27T03:28:29.848Z" },
 ]

 [[package]]
@@ -7002,11 +7001,11 @@ wheels = [

 [[package]]
 name = "types-psycopg2"
-version = "2.9.21.20251012"
+version = "2.9.21.20260223"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/9b/b3/2d09eaf35a084cffd329c584970a3fa07101ca465c13cad1576d7c392587/types_psycopg2-2.9.21.20251012.tar.gz", hash = "sha256:4cdafd38927da0cfde49804f39ab85afd9c6e9c492800e42f1f0c1a1b0312935", size = 26710, upload-time = "2025-10-12T02:55:39.5Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/55/1f/4daff0ce5e8e191844e65aaa793ed1b9cb40027dc2700906ecf2b6bcc0ed/types_psycopg2-2.9.21.20260223.tar.gz", hash = "sha256:78ed70de2e56bc6b5c26c8c1da8e9af54e49fdc3c94d1504609f3519e2b84f02", size = 27090, upload-time = "2026-02-23T04:11:18.177Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/ec/0c/05feaf8cb51159f2c0af04b871dab7e98a2f83a3622f5f216331d2dd924c/types_psycopg2-2.9.21.20251012-py3-none-any.whl", hash = "sha256:712bad5c423fe979e357edbf40a07ca40ef775d74043de72bd4544ca328cc57e", size = 24883, upload-time = "2025-10-12T02:55:38.439Z" },
+    { url = "https://files.pythonhosted.org/packages/8d/e7/c566df58410bc0728348b514e718f0b38fa0d248b5c10599a11494ba25d2/types_psycopg2-2.9.21.20260223-py3-none-any.whl", hash = "sha256:c6228ade72d813b0624f4c03feeb89471950ac27cd0506b5debed6f053086bc8", size = 24919, upload-time = "2026-02-23T04:11:17.214Z" },
 ]

 [[package]]
@@ -7023,11 +7022,11 @@ wheels = [

 [[package]]
 name = "types-pymysql"
-version = "1.1.0.20250916"
+version = "1.1.0.20251220"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/1f/12/bda1d977c07e0e47502bede1c44a986dd45946494d89e005e04cdeb0f8de/types_pymysql-1.1.0.20250916.tar.gz", hash = "sha256:98d75731795fcc06723a192786662bdfa760e1e00f22809c104fbb47bac5e29b", size = 22131, upload-time = "2025-09-16T02:49:22.039Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/d3/59/e959dd6d2f8e3b3c3f058d79ac9ece328922a5a8770c707fe9c3a757481c/types_pymysql-1.1.0.20251220.tar.gz", hash = "sha256:ae1c3df32a777489431e2e9963880a0df48f6591e0aa2fd3a6fabd9dee6eca54", size = 22184, upload-time = "2025-12-20T03:07:38.689Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/21/eb/a225e32a6e7b196af67ab2f1b07363595f63255374cc3b88bfdab53b4ee8/types_pymysql-1.1.0.20250916-py3-none-any.whl", hash = "sha256:873eb9836bb5e3de4368cc7010ca72775f86e9692a5c7810f8c7f48da082e55b", size = 23063, upload-time = "2025-09-16T02:49:20.933Z" },
+    { url = "https://files.pythonhosted.org/packages/8b/fa/4f4d3bfca9ef6dd17d69ed18b96564c53b32d3ce774132308d0bee849f10/types_pymysql-1.1.0.20251220-py3-none-any.whl", hash = "sha256:fa1082af7dea6c53b6caa5784241924b1296ea3a8d3bd060417352c5e10c0618", size = 23067, upload-time = "2025-12-20T03:07:37.766Z" },
 ]

 [[package]]
@@ -7045,11 +7044,11 @@ wheels = [

 [[package]]
 name = "types-python-dateutil"
-version = "2.9.0.20251115"
+version = "2.9.0.20260305"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/6a/36/06d01fb52c0d57e9ad0c237654990920fa41195e4b3d640830dabf9eeb2f/types_python_dateutil-2.9.0.20251115.tar.gz", hash = "sha256:8a47f2c3920f52a994056b8786309b43143faa5a64d4cbb2722d6addabdf1a58", size = 16363, upload-time = "2025-11-15T03:00:13.717Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/1d/c7/025c624f347e10476b439a6619a95f1d200250ea88e7ccea6e09e48a7544/types_python_dateutil-2.9.0.20260305.tar.gz", hash = "sha256:389717c9f64d8f769f36d55a01873915b37e97e52ce21928198d210fbd393c8b", size = 16885, upload-time = "2026-03-05T04:00:47.409Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/43/0b/56961d3ba517ed0df9b3a27bfda6514f3d01b28d499d1bce9068cfe4edd1/types_python_dateutil-2.9.0.20251115-py3-none-any.whl", hash = "sha256:9cf9c1c582019753b8639a081deefd7e044b9fa36bd8217f565c6c4e36ee0624", size = 18251, upload-time = "2025-11-15T03:00:12.317Z" },
+    { url = "https://files.pythonhosted.org/packages/0a/77/8c0d1ec97f0d9707ad3d8fa270ab8964e7b31b076d2f641c94987395cc75/types_python_dateutil-2.9.0.20260305-py3-none-any.whl", hash = "sha256:a3be9ca444d38cadabd756cfbb29780d8b338ae2a3020e73c266a83cc3025dd7", size = 18419, upload-time = "2026-03-05T04:00:46.392Z" },
 ]

 [[package]]
@@ -7063,11 +7062,11 @@ wheels = [

 [[package]]
 name = "types-pywin32"
-version = "311.0.0.20251008"
+version = "311.0.0.20260316"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/1a/05/cd94300066241a7abb52238f0dd8d7f4fe1877cf2c72bd1860856604d962/types_pywin32-311.0.0.20251008.tar.gz", hash = "sha256:d6d4faf8e0d7fdc0e0a1ff297b80be07d6d18510f102d793bf54e9e3e86f6d06", size = 329561, upload-time = "2025-10-08T02:51:39.436Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/17/a8/b4652002a854fcfe5d272872a0ae2d5df0e9dc482e1a6dfb5e97b905b76f/types_pywin32-311.0.0.20260316.tar.gz", hash = "sha256:c136fa489fe6279a13bca167b750414e18d657169b7cf398025856dc363004e8", size = 329956, upload-time = "2026-03-16T04:28:57.366Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/af/08/00a38e6b71585e6741d5b3b4cc9dd165cf549b6f1ed78815c6585f8b1b58/types_pywin32-311.0.0.20251008-py3-none-any.whl", hash = "sha256:775e1046e0bad6d29ca47501301cce67002f6661b9cebbeca93f9c388c53fab4", size = 392942, upload-time = "2025-10-08T02:51:38.327Z" },
+    { url = "https://files.pythonhosted.org/packages/f0/83/704698d93788cf1c2f5e236eae2b37f1b2152ef84dc66b4b83f6c7487b76/types_pywin32-311.0.0.20260316-py3-none-any.whl", hash = "sha256:abb643d50012386d697af49384cc0e6e475eab76b0ca2a7f93d480d0862b3692", size = 392959, upload-time = "2026-03-16T04:28:56.104Z" },
 ]

 [[package]]
@@ -7124,11 +7123,11 @@ wheels = [

 [[package]]
 name = "types-setuptools"
-version = "80.9.0.20250822"
+version = "82.0.0.20260210"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/19/bd/1e5f949b7cb740c9f0feaac430e301b8f1c5f11a81e26324299ea671a237/types_setuptools-80.9.0.20250822.tar.gz", hash = "sha256:070ea7716968ec67a84c7f7768d9952ff24d28b65b6594797a464f1b3066f965", size = 41296, upload-time = "2025-08-22T03:02:08.771Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/4b/90/796ac8c774a7f535084aacbaa6b7053d16fff5c630eff87c3ecff7896c37/types_setuptools-82.0.0.20260210.tar.gz", hash = "sha256:d9719fbbeb185254480ade1f25327c4654f8c00efda3fec36823379cebcdee58", size = 44768, upload-time = "2026-02-10T04:22:02.107Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/b6/2d/475bf15c1cdc172e7a0d665b6e373ebfb1e9bf734d3f2f543d668b07a142/types_setuptools-80.9.0.20250822-py3-none-any.whl", hash = "sha256:53bf881cb9d7e46ed12c76ef76c0aaf28cfe6211d3fab12e0b83620b1a8642c3", size = 63179, upload-time = "2025-08-22T03:02:07.643Z" },
+    { url = "https://files.pythonhosted.org/packages/3e/54/3489432b1d9bc713c9d8aa810296b8f5b0088403662959fb63a8acdbd4fc/types_setuptools-82.0.0.20260210-py3-none-any.whl", hash = "sha256:5124a7daf67f195c6054e0f00f1d97c69caad12fdcf9113eba33eff0bce8cd2b", size = 68433, upload-time = "2026-02-10T04:22:00.876Z" },
 ]

 [[package]]
@@ -7163,28 +7162,28 @@ wheels = [

 [[package]]
 name = "types-tensorflow"
-version = "2.18.0.20251008"
+version = "2.18.0.20260224"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "numpy" },
    { name = "types-protobuf" },
    { name = "types-requests" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/0d/0a/13bde03fb5a23faaadcca2d6914f865e444334133902310ea05e6ade780c/types_tensorflow-2.18.0.20251008.tar.gz", hash = "sha256:8db03d4dd391a362e2ea796ffdbccb03c082127606d4d852edb7ed9504745933", size = 257550, upload-time = "2025-10-08T02:51:51.104Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/af/cb/4914c2fbc1cf8a8d1ef2a7c727bb6f694879be85edeee880a0c88e696af8/types_tensorflow-2.18.0.20260224.tar.gz", hash = "sha256:9b0ccc91c79c88791e43d3f80d6c879748fa0361409c5ff23c7ffe3709be00f2", size = 258786, upload-time = "2026-02-24T04:06:45.613Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/66/cc/e50e49db621b0cf03c1f3d10be47389de41a02dc9924c3a83a9c1a55bf28/types_tensorflow-2.18.0.20251008-py3-none-any.whl", hash = "sha256:d6b0dd4d81ac6d9c5af803ebcc8ce0f65c5850c063e8b9789dc828898944b5f4", size = 329023, upload-time = "2025-10-08T02:51:50.024Z" },
+    { url = "https://files.pythonhosted.org/packages/d4/1d/a1c3c60f0eb1a204500dbdc66e3d18aafabc86ad07a8eca71ea05bc8c5a8/types_tensorflow-2.18.0.20260224-py3-none-any.whl", hash = "sha256:6a25f5f41f3e06f28c1f65c6e09f484d4ba0031d6d8df83a39df9d890245eefc", size = 329746, upload-time = "2026-02-24T04:06:44.4Z" },
 ]

 [[package]]
 name = "types-tqdm"
-version = "4.67.0.20250809"
+version = "4.67.3.20260303"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "types-requests" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/fb/d0/cf498fc630d9fdaf2428b93e60b0e67b08008fec22b78716b8323cf644dc/types_tqdm-4.67.0.20250809.tar.gz", hash = "sha256:02bf7ab91256080b9c4c63f9f11b519c27baaf52718e5fdab9e9606da168d500", size = 17200, upload-time = "2025-08-09T03:17:43.489Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/e1/64/3e7cb0f40c4bf9578098b6873df33a96f7e0de90f3a039e614d22bfde40a/types_tqdm-4.67.3.20260303.tar.gz", hash = "sha256:7bfddb506a75aedb4030fabf4f05c5638c9a3bbdf900d54ec6c82be9034bfb96", size = 18117, upload-time = "2026-03-03T04:03:49.679Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/3f/13/3ff0781445d7c12730befce0fddbbc7a76e56eb0e7029446f2853238360a/types_tqdm-4.67.0.20250809-py3-none-any.whl", hash = "sha256:1a73053b31fcabf3c1f3e2a9d5ecdba0f301bde47a418cd0e0bdf774827c5c57", size = 24020, upload-time = "2025-08-09T03:17:42.453Z" },
+    { url = "https://files.pythonhosted.org/packages/37/32/e4a1fce59155c74082f1a42d0ffafa59652bfb8cff35b04d56333877748e/types_tqdm-4.67.3.20260303-py3-none-any.whl", hash = "sha256:459decf677e4b05cef36f9012ef8d6e20578edefb6b78c15bd0b546247eda62d", size = 24572, upload-time = "2026-03-03T04:03:48.913Z" },
 ]

 [[package]]
--- a/web/tests/billing/pricing-modal-flow.test.tsx
+++ b/web/tests/billing/pricing-modal-flow.test.tsx
@@ -295,7 +295,24 @@ describe('Pricing Modal Flow', () => {
    })
  })

-  // ─── 6. Pricing URL ─────────────────────────────────────────────────────
+  // ─── 6. Close Handling ───────────────────────────────────────────────────
+  describe('Close handling', () => {
+    it('should call onCancel when pressing ESC key', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      // ahooks useKeyPress listens on document for keydown events
+      document.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        bubbles: true,
+      }))
+
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ─── 7. Pricing URL ─────────────────────────────────────────────────────
  describe('Pricing page URL', () => {
    it('should render pricing link with correct URL', () => {
      render(<Pricing onCancel={onCancel} />)
--- a/web/tests/plugins/plugin-card-rendering.test.tsx
+++ b/web/tests/plugins/plugin-card-rendering.test.tsx
@@ -8,8 +8,6 @@
 import { cleanup, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

-let mockTheme = 'light'
-
 vi.mock('#i18n', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
@@ -21,16 +19,16 @@ vi.mock('@/context/i18n', () => ({
 }))

 vi.mock('@/hooks/use-theme', () => ({
-  default: () => ({ theme: mockTheme }),
+  default: () => ({ theme: 'light' }),
 }))

 vi.mock('@/i18n-config', () => ({
  renderI18nObject: (obj: Record<string, string>, locale: string) => obj[locale] || obj.en_US || '',
 }))

-vi.mock('@/types/app', async () => {
-  return vi.importActual<typeof import('@/types/app')>('@/types/app')
-})
+vi.mock('@/types/app', () => ({
+  Theme: { dark: 'dark', light: 'light' },
+}))

 vi.mock('@/utils/classnames', () => ({
  cn: (...args: unknown[]) => args.filter(a => typeof a === 'string' && a).join(' '),
@@ -102,7 +100,6 @@ type CardPayload = Parameters<typeof Card>[0]['payload']
 describe('Plugin Card Rendering Integration', () => {
  beforeEach(() => {
    cleanup()
-    mockTheme = 'light'
  })

  const makePayload = (overrides = {}) => ({
@@ -197,7 +194,9 @@ describe('Plugin Card Rendering Integration', () => {
  })

  it('uses dark icon when theme is dark and icon_dark is provided', () => {
-    mockTheme = 'dark'
+    vi.doMock('@/hooks/use-theme', () => ({
+      default: () => ({ theme: 'dark' }),
+    }))

    const payload = makePayload({
      icon: 'https://example.com/icon-light.png',
@@ -205,7 +204,7 @@ describe('Plugin Card Rendering Integration', () => {
    })

    render(<Card payload={payload} />)
-    expect(screen.getByTestId('card-icon')).toHaveTextContent('https://example.com/icon-dark.png')
+    expect(screen.getByTestId('card-icon')).toBeInTheDocument()
  })

  it('shows loading placeholder when isLoading is true', () => {
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -160,7 +160,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
        isShow={isShowDeleteConfirm}
        onClose={() => setIsShowDeleteConfirm(false)}
      >
-        <div className="mb-3 text-text-primary title-2xl-semi-bold">{t('avatar.deleteTitle', { ns: 'common' })}</div>
+        <div className="title-2xl-semi-bold mb-3 text-text-primary">{t('avatar.deleteTitle', { ns: 'common' })}</div>
        <p className="mb-8 text-text-secondary">{t('avatar.deleteDescription', { ns: 'common' })}</p>

        <div className="flex w-full items-center justify-center gap-2">
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -209,14 +209,14 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
      </div>
      {step === STEP.start && (
        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
+          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.title', { ns: 'common' })}</div>
          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-            <div className="text-text-secondary body-md-regular">
+            <div className="body-md-medium text-text-warning">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
+            <div className="body-md-regular text-text-secondary">
              <Trans
                i18nKey="account.changeEmail.content1"
                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                values={{ email }}
              />
            </div>
@@ -241,19 +241,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
      )}
      {step === STEP.verifyOrigin && (
        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">
+            <div className="body-md-regular text-text-secondary">
              <Trans
                i18nKey="account.changeEmail.content2"
                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                values={{ email }}
              />
            </div>
          </div>
          <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
            <Input
              className="!w-full"
              placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -278,25 +278,25 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
              {t('operation.cancel', { ns: 'common' })}
            </Button>
          </div>
-          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
            <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
            {time > 0 && (
              <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
            )}
            {!time && (
-              <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToOriginEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
            )}
          </div>
        </>
      )}
      {step === STEP.newEmail && (
        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            <div className="body-md-regular text-text-secondary">{t('account.changeEmail.content3', { ns: 'common' })}</div>
          </div>
          <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
            <Input
              className="!w-full"
              placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
@@ -305,10 +305,10 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
              destructive={newEmailExited || unAvailableEmail}
            />
            {newEmailExited && (
-              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
            )}
            {unAvailableEmail && (
-              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
            )}
          </div>
          <div className="mt-3 space-y-2">
@@ -331,19 +331,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
      )}
      {step === STEP.verifyNew && (
        <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
          <div className="space-y-0.5 pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">
+            <div className="body-md-regular text-text-secondary">
              <Trans
                i18nKey="account.changeEmail.content4"
                ns="common"
-                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                values={{ email: mail }}
              />
            </div>
          </div>
          <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
            <Input
              className="!w-full"
              placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -368,13 +368,13 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
              {t('operation.cancel', { ns: 'common' })}
            </Button>
          </div>
-          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
            <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
            {time > 0 && (
              <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
            )}
            {!time && (
-              <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToNewEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
            )}
          </div>
        </>
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -145,7 +145,7 @@ export default function AccountPage() {
            imageUrl={icon_url}
          />
        </div>
-        <div className="mt-[3px] text-text-secondary system-sm-medium">{item.name}</div>
+        <div className="system-sm-medium mt-[3px] text-text-secondary">{item.name}</div>
      </div>
    )
  }
@@ -153,12 +153,12 @@ export default function AccountPage() {
  return (
    <>
      <div className="pb-3 pt-2">
-        <h4 className="text-text-primary title-2xl-semi-bold">{t('account.myAccount', { ns: 'common' })}</h4>
+        <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
      </div>
      <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
        <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size="3xl" />
        <div className="ml-4">
-          <p className="text-text-primary system-xl-semibold">
+          <p className="system-xl-semibold text-text-primary">
            {userProfile.name}
            {isEducationAccount && (
              <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -167,16 +167,16 @@ export default function AccountPage() {
              </PremiumBadge>
            )}
          </p>
-          <p className="text-text-tertiary system-xs-regular">{userProfile.email}</p>
+          <p className="system-xs-regular text-text-tertiary">{userProfile.email}</p>
        </div>
      </div>
      <div className="mb-8">
        <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
        <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
+          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
            <span className="pl-1">{userProfile.name}</span>
          </div>
-          <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={handleEditName}>
+          <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={handleEditName}>
            {t('operation.edit', { ns: 'common' })}
          </div>
        </div>
@@ -184,11 +184,11 @@ export default function AccountPage() {
      <div className="mb-8">
        <div className={titleClassName}>{t('account.email', { ns: 'common' })}</div>
        <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
+          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
            <span className="pl-1">{userProfile.email}</span>
          </div>
          {systemFeatures.enable_change_email && (
-            <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={() => setShowUpdateEmail(true)}>
+            <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={() => setShowUpdateEmail(true)}>
              {t('operation.change', { ns: 'common' })}
            </div>
          )}
@@ -198,8 +198,8 @@ export default function AccountPage() {
        systemFeatures.enable_email_password_login && (
          <div className="mb-8 flex justify-between gap-2">
            <div>
-              <div className="mb-1 text-text-secondary system-sm-semibold">{t('account.password', { ns: 'common' })}</div>
-              <div className="mb-2 text-text-tertiary body-xs-regular">{t('account.passwordTip', { ns: 'common' })}</div>
+              <div className="system-sm-semibold mb-1 text-text-secondary">{t('account.password', { ns: 'common' })}</div>
+              <div className="body-xs-regular mb-2 text-text-tertiary">{t('account.passwordTip', { ns: 'common' })}</div>
            </div>
            <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</Button>
          </div>
@@ -226,7 +226,7 @@ export default function AccountPage() {
            onClose={() => setEditNameModalVisible(false)}
            className="!w-[420px] !p-6"
          >
-            <div className="mb-6 text-text-primary title-2xl-semi-bold">{t('account.editName', { ns: 'common' })}</div>
+            <div className="title-2xl-semi-bold mb-6 text-text-primary">{t('account.editName', { ns: 'common' })}</div>
            <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
            <Input
              className="mt-2"
@@ -256,7 +256,7 @@ export default function AccountPage() {
            }}
            className="!w-[420px] !p-6"
          >
-            <div className="mb-6 text-text-primary title-2xl-semi-bold">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
+            <div className="title-2xl-semi-bold mb-6 text-text-primary">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
            {userProfile.is_password_set && (
              <>
                <div className={titleClassName}>{t('account.currentPassword', { ns: 'common' })}</div>
@@ -279,7 +279,7 @@ export default function AccountPage() {
                </div>
              </>
            )}
-            <div className="mt-8 text-text-secondary system-sm-semibold">
+            <div className="system-sm-semibold mt-8 text-text-secondary">
              {userProfile.is_password_set ? t('account.newPassword', { ns: 'common' }) : t('account.password', { ns: 'common' })}
            </div>
            <div className="relative mt-2">
@@ -298,7 +298,7 @@ export default function AccountPage() {
                </Button>
              </div>
            </div>
-            <div className="mt-8 text-text-secondary system-sm-semibold">{t('account.confirmPassword', { ns: 'common' })}</div>
+            <div className="system-sm-semibold mt-8 text-text-secondary">{t('account.confirmPassword', { ns: 'common' })}</div>
            <div className="relative mt-2">
              <Input
                type={showConfirmPassword ? 'text' : 'password'}
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -94,7 +94,7 @@ const CSVUploader: FC<Props> = ({
      />
      <div ref={dropRef}>
        {!file && (
-          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg system-sm-regular', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
+          <div className={cn('system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
            <div className="flex w-full items-center justify-center space-x-2">
              <CSVIcon className="shrink-0" />
              <div className="text-text-tertiary">
--- a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx
@@ -2,19 +2,25 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import HasNotSetAPI from './has-not-set-api'

-describe('HasNotSetAPI', () => {
-  it('should render the empty state copy', () => {
-    render(<HasNotSetAPI onSetting={vi.fn()} />)
+describe('HasNotSetAPI WarningMask', () => {
+  it('should show default title when trial not finished', () => {
+    render(<HasNotSetAPI isTrailFinished={false} onSetting={vi.fn()} />)

-    expect(screen.getByText('appDebug.noModelProviderConfigured')).toBeInTheDocument()
-    expect(screen.getByText('appDebug.noModelProviderConfiguredTip')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.notSetAPIKey.title')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.notSetAPIKey.description')).toBeInTheDocument()
  })

-  it('should call onSetting when manage models button is clicked', () => {
-    const onSetting = vi.fn()
-    render(<HasNotSetAPI onSetting={onSetting} />)
+  it('should show trail finished title when flag is true', () => {
+    render(<HasNotSetAPI isTrailFinished onSetting={vi.fn()} />)

-    fireEvent.click(screen.getByRole('button', { name: 'appDebug.manageModels' }))
+    expect(screen.getByText('appDebug.notSetAPIKey.trailFinished')).toBeInTheDocument()
+  })
+
+  it('should call onSetting when primary button clicked', () => {
+    const onSetting = vi.fn()
+    render(<HasNotSetAPI isTrailFinished={false} onSetting={onSetting} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.notSetAPIKey.settingBtn' }))
    expect(onSetting).toHaveBeenCalledTimes(1)
  })
 })
--- a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
@@ -2,38 +2,38 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import WarningMask from '.'

 export type IHasNotSetAPIProps = {
+  isTrailFinished: boolean
  onSetting: () => void
 }

+const icon = (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 6.00001L14 2.00001M14 2.00001H9.99999M14 2.00001L8 8M6.66667 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.07989 14 5.2 14H10.8C11.9201 14 12.4802 14 12.908 13.782C13.2843 13.5903 13.5903 13.2843 13.782 12.908C14 12.4802 14 11.9201 14 10.8V9.33333" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+
+)
+
 const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
+  isTrailFinished,
  onSetting,
 }) => {
  const { t } = useTranslation()

  return (
-    <div className="flex grow flex-col items-center justify-center pb-[120px]">
-      <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
-        <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
-          <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
-            <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
-          </div>
-        </div>
-        <div className="flex flex-col gap-1">
-          <div className="text-text-secondary system-md-semibold">{t('noModelProviderConfigured', { ns: 'appDebug' })}</div>
-          <div className="text-text-tertiary system-xs-regular">{t('noModelProviderConfiguredTip', { ns: 'appDebug' })}</div>
-        </div>
-        <button
-          type="button"
-          className="flex w-fit items-center gap-1 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 shadow-xs backdrop-blur-[5px]"
-          onClick={onSetting}
-        >
-          <span className="text-components-button-secondary-accent-text system-sm-medium">{t('manageModels', { ns: 'appDebug' })}</span>
-          <span className="i-ri-arrow-right-line h-4 w-4 text-components-button-secondary-accent-text" />
-        </button>
-      </div>
-    </div>
+    <WarningMask
+      title={isTrailFinished ? t('notSetAPIKey.trailFinished', { ns: 'appDebug' }) : t('notSetAPIKey.title', { ns: 'appDebug' })}
+      description={t('notSetAPIKey.description', { ns: 'appDebug' })}
+      footer={(
+        <Button variant="primary" className="flex space-x-2" onClick={onSetting}>
+          <span>{t('notSetAPIKey.settingBtn', { ns: 'appDebug' })}</span>
+          {icon}
+        </Button>
+      )}
+    />
  )
 }
 export default React.memo(HasNotSetAPI)
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -178,7 +178,7 @@ const Prompt: FC<ISimplePromptInput> = ({
        {!noTitle && (
          <div className="flex h-11 items-center justify-between pl-3 pr-2.5">
            <div className="flex items-center space-x-1">
-              <div className="h2 text-text-secondary system-sm-semibold-uppercase">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
+              <div className="h2 system-sm-semibold-uppercase text-text-secondary">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
              {!readonly && (
                <Tooltip
                  popupContent={(
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -96,7 +96,7 @@ const Editor: FC<Props> = ({
                )}
          </div>
        </div>
-        <div className={cn(editorHeight, 'min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
+        <div className={cn(editorHeight, ' min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
          <PromptEditor
            className={editorHeight}
            value={value}
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -3,10 +3,8 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import type { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import type { GenRes } from '@/service/debug'
 import type { AppModeEnum, CompletionParams, Model, ModelModeType } from '@/types/app'
-import {
-  useBoolean,
-  useSessionStorageState,
-} from 'ahooks'
+import { useSessionStorageState } from 'ahooks'
+import useBoolean from 'ahooks/lib/useBoolean'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -226,7 +224,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
          </div>
          <div>
            <div className="text-[0px]">
-              <div className="mb-1.5 text-text-secondary system-sm-semibold-uppercase">{t('codegen.instruction', { ns: 'appDebug' })}</div>
+              <div className="system-sm-semibold-uppercase mb-1.5 text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
              <InstructionEditor
                editorKey={editorKey}
                value={instruction}
@@ -250,7 +248,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                disabled={isLoading}
              >
                <Generator className="h-4 w-4" />
-                <span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
+                <span className="text-xs font-semibold ">{t('codegen.generate', { ns: 'appDebug' })}</span>
              </Button>
            </div>
          </div>
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -210,7 +210,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
      <div className="overflow-y-auto border-b border-divider-regular p-6 pb-[68px] pt-5">
        <div className={cn(rowClass, 'items-center')}>
          <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.name', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.name', { ns: 'datasetSettings' })}</div>
          </div>
          <Input
            value={localeCurrentDataset.name}
@@ -221,7 +221,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
        </div>
        <div className={cn(rowClass)}>
          <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.desc', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.desc', { ns: 'datasetSettings' })}</div>
          </div>
          <div className="w-full">
            <Textarea
@@ -234,7 +234,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
        </div>
        <div className={rowClass}>
          <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.permissions', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.permissions', { ns: 'datasetSettings' })}</div>
          </div>
          <div className="w-full">
            <PermissionSelector
@@ -250,7 +250,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
        {!!(currentDataset && currentDataset.indexing_technique) && (
          <div className={cn(rowClass)}>
            <div className={labelClass}>
-              <div className="text-text-secondary system-sm-semibold">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
+              <div className="system-sm-semibold text-text-secondary">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
            </div>
            <div className="grow">
              <IndexMethod
@@ -267,7 +267,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
        {indexMethod === IndexingType.QUALIFIED && (
          <div className={cn(rowClass)}>
            <div className={labelClass}>
-              <div className="text-text-secondary system-sm-semibold">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
+              <div className="system-sm-semibold text-text-secondary">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
            </div>
            <div className="w-full">
              <div className="h-8 w-full rounded-lg bg-components-input-bg-normal opacity-60">
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.spec.tsx
@@ -1,25 +1,13 @@
 import type { ReactNode } from 'react'
 import type { ModelAndParameter } from '../types'
-import type {
-  FormValue,
-  ModelProvider,
-} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { render, screen } from '@testing-library/react'
-import { createMockProviderContextValue } from '@/__mocks__/provider-context'
-import {
-  ConfigurationMethodEnum,
-  CurrentSystemQuotaTypeEnum,
-  CustomConfigurationStatusEnum,
-  ModelStatusEnum,
-  ModelTypeEnum,
-  PreferredProviderTypeEnum,
-} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ModelParameterTrigger from './model-parameter-trigger'

 const mockUseDebugConfigurationContext = vi.fn()
 const mockUseDebugWithMultipleModelContext = vi.fn()
-const mockUseProviderContext = vi.fn()
-const mockUseCredentialPanelState = vi.fn()
+const mockUseLanguage = vi.fn()

 type RenderTriggerProps = {
  open: boolean
@@ -47,12 +35,8 @@ vi.mock('./context', () => ({
  useDebugWithMultipleModelContext: () => mockUseDebugWithMultipleModelContext(),
 }))

-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: () => mockUseProviderContext(),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state', () => ({
-  useCredentialPanelState: () => mockUseCredentialPanelState(),
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useLanguage: () => mockUseLanguage(),
 }))

 vi.mock('@/app/components/header/account-setting/model-provider-page/model-parameter-modal', () => ({
@@ -100,41 +84,6 @@ const createModelAndParameter = (overrides: Partial<ModelAndParameter> = {}): Mo
  ...overrides,
 })

-const createModelProvider = (overrides: Partial<ModelProvider> = {}): ModelProvider => ({
-  provider: 'openai',
-  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
-  help: {
-    title: { en_US: 'Help', zh_Hans: 'Help' },
-    url: { en_US: 'https://example.com', zh_Hans: 'https://example.com' },
-  },
-  icon_small: { en_US: '', zh_Hans: '' },
-  supported_model_types: [ModelTypeEnum.textGeneration],
-  configurate_methods: [ConfigurationMethodEnum.predefinedModel],
-  provider_credential_schema: {
-    credential_form_schemas: [],
-  },
-  model_credential_schema: {
-    model: {
-      label: { en_US: 'Model', zh_Hans: 'Model' },
-      placeholder: { en_US: 'Select model', zh_Hans: 'Select model' },
-    },
-    credential_form_schemas: [],
-  },
-  preferred_provider_type: PreferredProviderTypeEnum.custom,
-  custom_configuration: {
-    status: CustomConfigurationStatusEnum.active,
-    current_credential_id: 'cred-1',
-    current_credential_name: 'Primary Key',
-    available_credentials: [{ credential_id: 'cred-1', credential_name: 'Primary Key' }],
-  },
-  system_configuration: {
-    enabled: true,
-    current_quota_type: CurrentSystemQuotaTypeEnum.trial,
-    quota_configurations: [],
-  },
-  ...overrides,
-})
-
 const renderComponent = (props: Partial<{ modelAndParameter: ModelAndParameter }> = {}) => {
  const defaultProps = {
    modelAndParameter: createModelAndParameter(),
@@ -157,19 +106,8 @@ describe('ModelParameterTrigger', () => {
      onMultipleModelConfigsChange: vi.fn(),
      onDebugWithMultipleModelChange: vi.fn(),
    })
-    mockUseProviderContext.mockReturnValue(createMockProviderContextValue({
-      modelProviders: [createModelProvider()],
-    }))
-    mockUseCredentialPanelState.mockReturnValue({
-      variant: 'api-active',
-      priority: 'apiKey',
-      supportsCredits: true,
-      showPrioritySwitcher: true,
-      hasCredentials: true,
-      isCreditsExhausted: false,
-      credentialName: 'Primary Key',
-      credits: 10,
-    })
+
+    mockUseLanguage.mockReturnValue('en_US')
  })

  describe('rendering', () => {
@@ -373,66 +311,23 @@ describe('ModelParameterTrigger', () => {
      expect(screen.getByTestId('model-parameter-modal')).toBeInTheDocument()
    })

-    it('should render "Select Model" text when no provider or model is configured', () => {
-      renderComponent({
-        modelAndParameter: createModelAndParameter({
-          provider: '',
-          model: '',
-        }),
-      })
+    it('should render "Select Model" text when no provider/model', () => {
+      renderComponent()

      // When currentProvider and currentModel are null, shows "Select Model"
      expect(screen.getByText('common.modelProvider.selectModel')).toBeInTheDocument()
    })
+  })
+
+  describe('language context', () => {
+    it('should use language from useLanguage hook', () => {
+      mockUseLanguage.mockReturnValue('zh_Hans')

-    it('should render configured model id and incompatible tooltip when model is missing from the provider list', () => {
      renderComponent()

-      expect(screen.getByText('gpt-3.5-turbo')).toBeInTheDocument()
-      expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'common.modelProvider.selector.incompatibleTip')
-    })
-
-    it('should render configure required tooltip for no-configure status', () => {
-      const { unmount } = renderComponent()
-      const triggerContent = capturedModalProps?.renderTrigger({
-        open: false,
-        currentProvider: { provider: 'openai' },
-        currentModel: { model: 'gpt-3.5-turbo', status: ModelStatusEnum.noConfigure },
-      })
-
-      unmount()
-      render(<>{triggerContent}</>)
-
-      expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'common.modelProvider.selector.configureRequired')
-    })
-
-    it('should render disabled tooltip for disabled status', () => {
-      const { unmount } = renderComponent()
-      const triggerContent = capturedModalProps?.renderTrigger({
-        open: false,
-        currentProvider: { provider: 'openai' },
-        currentModel: { model: 'gpt-3.5-turbo', status: ModelStatusEnum.disabled },
-      })
-
-      unmount()
-      render(<>{triggerContent}</>)
-
-      expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'common.modelProvider.selector.disabled')
-    })
-
-    it('should apply expanded and warning styles when the trigger is open for a non-active status', () => {
-      const { unmount } = renderComponent()
-      const triggerContent = capturedModalProps?.renderTrigger({
-        open: true,
-        currentProvider: { provider: 'openai' },
-        currentModel: { model: 'gpt-3.5-turbo', status: ModelStatusEnum.noConfigure },
-      })
-
-      unmount()
-      const { container } = render(<>{triggerContent}</>)
-
-      expect(container.firstChild).toHaveClass('bg-state-base-hover')
-      expect(container.firstChild).toHaveClass('!bg-[#FFFAEB]')
+      // The language is used for MODEL_STATUS_TEXT tooltip
+      // We verify the hook is called
+      expect(mockUseLanguage).toHaveBeenCalled()
    })
  })

--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
@@ -1,20 +1,22 @@
 import type { FC } from 'react'
 import type { ModelAndParameter } from '../types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { RiArrowDownSLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
 import Tooltip from '@/app/components/base/tooltip'
 import {
-  DERIVED_MODEL_STATUS_BADGE_I18N,
-  DERIVED_MODEL_STATUS_TOOLTIP_I18N,
-  deriveModelStatus,
-} from '@/app/components/header/account-setting/model-provider-page/derive-model-status'
+
+  MODEL_STATUS_TEXT,
+  ModelStatusEnum,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
-import { useCredentialPanelState } from '@/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
-import { useProviderContext } from '@/context/provider-context'
 import { useDebugWithMultipleModelContext } from './context'

 type ModelParameterTriggerProps = {
@@ -32,10 +34,8 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
    onMultipleModelConfigsChange,
    onDebugWithMultipleModelChange,
  } = useDebugWithMultipleModelContext()
-  const { modelProviders } = useProviderContext()
+  const language = useLanguage()
  const index = multipleModelConfigs.findIndex(v => v.id === modelAndParameter.id)
-  const providerMeta = modelProviders.find(provider => provider.provider === modelAndParameter.provider)
-  const credentialState = useCredentialPanelState(providerMeta)

  const handleSelectModel = ({ modelId, provider }: { modelId: string, provider: string }) => {
    const newModelConfigs = [...multipleModelConfigs]
@@ -69,77 +69,55 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
        open,
        currentProvider,
        currentModel,
-      }) => {
-        const status = deriveModelStatus(
-          modelAndParameter.model,
-          modelAndParameter.provider,
-          providerMeta,
-          currentModel ?? undefined,
-          credentialState,
-        )
-        const iconProvider = currentProvider || providerMeta
-        const statusLabelKey = DERIVED_MODEL_STATUS_BADGE_I18N[status]
-        const statusTooltipKey = DERIVED_MODEL_STATUS_TOOLTIP_I18N[status]
-        const isEmpty = status === 'empty'
-        const isActive = status === 'active'
-
-        return (
-          <div
-            className={`
-              flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2
-              ${open && 'bg-state-base-hover'}
-              ${!isEmpty && !isActive && '!bg-[#FFFAEB]'}
-            `}
-          >
-            {
-              iconProvider && !isEmpty && (
-                <ModelIcon
-                  className="mr-1 !h-4 !w-4"
-                  provider={iconProvider}
-                  modelName={currentModel?.model || modelAndParameter.model}
-                />
-              )
-            }
-            {
-              (!iconProvider || isEmpty) && (
-                <div className="mr-1 flex h-4 w-4 items-center justify-center rounded">
-                  <span className="i-custom-vender-line-shapes-cube-outline h-4 w-4 text-text-accent" />
-                </div>
-              )
-            }
-            {
-              currentModel && (
-                <ModelName
-                  className="mr-0.5 text-text-secondary"
-                  modelItem={currentModel}
-                />
-              )
-            }
-            {
-              !currentModel && !isEmpty && (
-                <div className="mr-0.5 truncate text-[13px] font-medium text-text-secondary">
-                  {modelAndParameter.model}
-                </div>
-              )
-            }
-            {
-              isEmpty && (
-                <div className="mr-0.5 truncate text-[13px] font-medium text-text-accent">
-                  {t('modelProvider.selectModel', { ns: 'common' })}
-                </div>
-              )
-            }
-            <span className={`i-ri-arrow-down-s-line h-3 w-3 ${isEmpty ? 'text-text-accent' : 'text-text-tertiary'}`} />
-            {
-              !isEmpty && !isActive && statusLabelKey && (
-                <Tooltip popupContent={t((statusTooltipKey || statusLabelKey) as 'modelProvider.selector.incompatible', { ns: 'common' })}>
-                  <span className="i-custom-vender-line-alertsAndFeedback-alert-triangle h-4 w-4 text-[#F79009]" />
-                </Tooltip>
-              )
-            }
-          </div>
-        )
-      }}
+      }) => (
+        <div
+          className={`
+            flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2
+            ${open && 'bg-state-base-hover'}
+            ${currentModel && currentModel.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
+          `}
+        >
+          {
+            currentProvider && (
+              <ModelIcon
+                className="mr-1 !h-4 !w-4"
+                provider={currentProvider}
+                modelName={currentModel?.model}
+              />
+            )
+          }
+          {
+            !currentProvider && (
+              <div className="mr-1 flex h-4 w-4 items-center justify-center rounded">
+                <CubeOutline className="h-4 w-4 text-text-accent" />
+              </div>
+            )
+          }
+          {
+            currentModel && (
+              <ModelName
+                className="mr-0.5 text-text-secondary"
+                modelItem={currentModel}
+              />
+            )
+          }
+          {
+            !currentModel && (
+              <div className="mr-0.5 truncate text-[13px] font-medium text-text-accent">
+                {t('modelProvider.selectModel', { ns: 'common' })}
+              </div>
+            )
+          }
+          <RiArrowDownSLine className={`h-3 w-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`} />
+          {
+            currentModel && currentModel.status !== ModelStatusEnum.active && (
+              <Tooltip popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>
+                <AlertTriangle className="h-4 w-4 text-[#F79009]" />
+              </Tooltip>
+            )
+          }
+        </div>
+      )}
    />
  )
 }
--- a/web/app/components/app/configuration/debug/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/index.spec.tsx
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -33,7 +33,7 @@ import { ToastContext } from '@/app/components/base/toast/context'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
+import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG, IS_CE_EDITION } from '@/config'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useProviderContext } from '@/context/provider-context'
@@ -394,7 +394,7 @@ const Debug: FC<IDebug> = ({
    <>
      <div className="shrink-0">
        <div className="flex items-center justify-between px-4 pb-2 pt-3">
-          <div className="text-text-primary system-xl-semibold">{t('inputs.title', { ns: 'appDebug' })}</div>
+          <div className="system-xl-semibold text-text-primary">{t('inputs.title', { ns: 'appDebug' })}</div>
          <div className="flex items-center">
            {
              debugWithMultipleModel
@@ -505,26 +505,6 @@ const Debug: FC<IDebug> = ({
      {
        !debugWithMultipleModel && (
          <div className="flex grow flex-col" ref={ref}>
-            {/* No model provider configured */}
-            {(!modelConfig.provider || !isAPIKeySet) && (
-              <HasNotSetAPIKEY onSetting={onSetting} />
-            )}
-            {/* No model selected */}
-            {modelConfig.provider && isAPIKeySet && !modelConfig.model_id && (
-              <div className="flex grow flex-col items-center justify-center pb-[120px]">
-                <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
-                    <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
-                      <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
-                    </div>
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <div className="text-text-secondary system-md-semibold">{t('noModelSelected', { ns: 'appDebug' })}</div>
-                    <div className="text-text-tertiary system-xs-regular">{t('noModelSelectedTip', { ns: 'appDebug' })}</div>
-                  </div>
-                </div>
-              </div>
-            )}
            {/* Chat */}
            {mode !== AppModeEnum.COMPLETION && (
              <div className="h-0 grow overflow-hidden">
@@ -559,7 +539,7 @@ const Debug: FC<IDebug> = ({
                {!completionRes && !isResponding && (
                  <div className="flex grow flex-col items-center justify-center gap-2">
                    <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
-                    <div className="text-text-quaternary system-sm-regular">{t('noResult', { ns: 'appDebug' })}</div>
+                    <div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
                  </div>
                )}
              </>
@@ -590,6 +570,7 @@ const Debug: FC<IDebug> = ({
          />
        )
      }
+      {!isAPIKeySet && !readonly && (<HasNotSetAPIKEY isTrailFinished={!IS_CE_EDITION} onSetting={onSetting} />)}
    </>
  )
 }
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -966,10 +966,10 @@ const Configuration: FC = () => {
              <div className="bg-default-subtle absolute left-0 top-0 h-14 w-full">
                <div className="flex h-14 items-center justify-between px-6">
                  <div className="flex items-center">
-                    <div className="text-text-primary system-xl-semibold">{t('orchestrate', { ns: 'appDebug' })}</div>
+                    <div className="system-xl-semibold text-text-primary">{t('orchestrate', { ns: 'appDebug' })}</div>
                    <div className="flex h-[14px] items-center space-x-1 text-xs">
                      {isAdvancedMode && (
-                        <div className="ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary system-xs-medium-uppercase">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
+                        <div className="system-xs-medium-uppercase ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
                      )}
                    </div>
                  </div>
@@ -1030,8 +1030,8 @@ const Configuration: FC = () => {
                <Config />
              </div>
              {!isMobile && (
-                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
-                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg">
+                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg ">
                    <Debug
                      isAPIKeySet={isAPIKeySet}
                      onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -217,7 +217,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
          <AppIcon
            size="large"
            onClick={() => { setShowEmojiPicker(true) }}
-            className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border"
+            className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border "
            icon={localeData.icon}
            background={localeData.icon_background}
          />
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -232,7 +232,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
        isShow={show}
        onClose={noop}
      >
-        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
+        <div className="title-2xl-semi-bold flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary">
          {t('importFromDSL', { ns: 'app' })}
          <div
            className="flex h-8 w-8 cursor-pointer items-center"
@@ -241,7 +241,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
            <RiCloseLine className="h-5 w-5 text-text-tertiary" />
          </div>
        </div>
-        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
+        <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
          {
            tabs.map(tab => (
              <div
@@ -275,7 +275,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
          {
            currentTab === CreateFromDSLModalTab.FROM_URL && (
              <div>
-                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
+                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
                <Input
                  placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                  value={dslUrlValue}
@@ -309,8 +309,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
        className="w-[480px]"
      >
        <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="flex grow flex-col text-text-secondary system-md-regular">
+          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="system-md-regular flex grow flex-col text-text-secondary">
            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
            <br />
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -121,7 +121,7 @@ const Uploader: FC<Props> = ({
          </div>
        )}
        {file && (
-          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', 'hover:bg-components-panel-on-panel-item-bg-hover')}>
+          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', ' hover:bg-components-panel-on-panel-item-bg-hover')}>
            <div className="flex items-center justify-center p-3">
              <YamlIcon className="h-6 w-6 shrink-0" />
            </div>
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -96,7 +96,7 @@ const statusTdRender = (statusCount: StatusCount) => {

  if (statusCount.paused > 0) {
    return (
-      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
+      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
        <Indicator color="yellow" />
        <span className="text-util-colors-warning-warning-600">Pending</span>
      </div>
@@ -104,7 +104,7 @@ const statusTdRender = (statusCount: StatusCount) => {
  }
  else if (statusCount.partial_success + statusCount.failed === 0) {
    return (
-      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
+      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
        <Indicator color="green" />
        <span className="text-util-colors-green-green-600">Success</span>
      </div>
@@ -112,7 +112,7 @@ const statusTdRender = (statusCount: StatusCount) => {
  }
  else if (statusCount.failed === 0) {
    return (
-      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
+      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
        <Indicator color="green" />
        <span className="text-util-colors-green-green-600">Partial Success</span>
      </div>
@@ -120,7 +120,7 @@ const statusTdRender = (statusCount: StatusCount) => {
  }
  else {
    return (
-      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
+      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
        <Indicator color="red" />
        <span className="text-util-colors-red-red-600">
          {statusCount.failed}
@@ -562,9 +562,9 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
      {/* Panel Header */}
      <div className="flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pb-2 pl-4 pr-3 pt-3">
        <div className="shrink-0">
-          <div className="mb-0.5 text-text-primary system-xs-semibold-uppercase">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
+          <div className="system-xs-semibold-uppercase mb-0.5 text-text-primary">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
          {isChatMode && (
-            <div className="flex items-center text-text-secondary system-2xs-regular-uppercase">
+            <div className="system-2xs-regular-uppercase flex items-center text-text-secondary">
              <Tooltip
                popupContent={detail.id}
              >
@@ -574,7 +574,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
            </div>
          )}
          {!isChatMode && (
-            <div className="text-text-secondary system-2xs-regular-uppercase">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
+            <div className="system-2xs-regular-uppercase text-text-secondary">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
          )}
        </div>
        <div className="flex grow flex-wrap items-center justify-end gap-y-1">
@@ -600,7 +600,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
          ? (
              <div className="px-6 py-4">
                <div className="flex h-[18px] items-center space-x-3">
-                  <div className="text-text-tertiary system-xs-semibold-uppercase">{t('table.header.output', { ns: 'appLog' })}</div>
+                  <div className="system-xs-semibold-uppercase text-text-tertiary">{t('table.header.output', { ns: 'appLog' })}</div>
                  <div
                    className="h-px grow"
                    style={{
@@ -692,7 +692,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
              </div>
              {hasMore && (
                <div className="py-3 text-center">
-                  <div className="text-text-tertiary system-xs-regular">
+                  <div className="system-xs-regular text-text-tertiary">
                    {t('detail.loading', { ns: 'appLog' })}
                    ...
                  </div>
@@ -950,7 +950,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
        )}
        popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
      >
-        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular')}>
+        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap')}>
          {value || '-'}
        </div>
      </Tooltip>
@@ -963,7 +963,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
  return (
    <div className="relative mt-2 grow overflow-x-auto">
      <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
-        <thead className="text-text-tertiary system-xs-medium-uppercase">
+        <thead className="system-xs-medium-uppercase text-text-tertiary">
          <tr>
            <td className="w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1"></td>
            <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{isChatMode ? t('table.header.summary', { ns: 'appLog' }) : t('table.header.input', { ns: 'appLog' })}</td>
@@ -976,7 +976,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
            <td className="whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.time', { ns: 'appLog' })}</td>
          </tr>
        </thead>
-        <tbody className="text-text-secondary system-sm-regular">
+        <tbody className="system-sm-regular text-text-secondary">
          {logs.data.map((log: any) => {
            const endUser = log.from_end_user_session_id || log.from_account_name
            const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || ''
--- a/web/app/components/base/icons/assets/vender/line/financeAndECommerce/credits-coin.svg
+++ b/web/app/components/base/icons/assets/vender/line/financeAndECommerce/credits-coin.svg
@@ -1,4 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 5C2 3.44487 2.58482 1.98537 3.54004 1.04932C2.17681 1.34034 1 2.90001 1 5C1 7.09996 2.17685 8.65912 3.54004 8.9502C2.58496 8.01413 2 6.55501 2 5ZM3 5C3 7.33338 4.4528 9 6 9C7.5472 9 9 7.33338 9 5C9 2.66664 7.5472 1 6 1C4.4528 1 3 2.66664 3 5ZM10 5C10 7.63722 8.3188 10 6 10H4C1.6812 10 0 7.63722 0 5C0 2.3628 1.6812 0 4 0H6C8.3188 0 10 2.3628 10 5Z" fill="#676F83"/>
-<path d="M6.71519 4.09259L6.45385 3.18667C6.42141 3.07421 6.34037 3 6.25 3C6.15963 3 6.07859 3.07421 6.04615 3.18667L5.78481 4.09259C5.74675 4.22464 5.66849 4.32899 5.56945 4.37978L4.88999 4.7282C4.80565 4.77146 4.75 4.87951 4.75 5C4.75 5.12049 4.80565 5.22854 4.88999 5.2718L5.56945 5.62022C5.66849 5.67101 5.74675 5.77536 5.78481 5.90741L6.04615 6.81333C6.07859 6.92579 6.15963 7 6.25 7C6.34037 7 6.42141 6.92579 6.45385 6.81333L6.71519 5.90741C6.75325 5.77536 6.83151 5.67101 6.93055 5.62022L7.61001 5.2718C7.69435 5.22854 7.75 5.12049 7.75 5C7.75 4.87951 7.69435 4.77146 7.61001 4.7282L6.93055 4.37978C6.83151 4.32899 6.75325 4.22464 6.71519 4.09259Z" fill="#676F83"/>
-</svg>
--- a/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg
+++ b/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg
@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="arrow-down-round-fill">
-<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="currentColor"/>
+<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="#101828"/>
 </g>
 </svg>
--- a/web/app/components/base/icons/assets/vender/solid/general/x-circle.svg
+++ b/web/app/components/base/icons/assets/vender/solid/general/x-circle.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z" fill="currentColor"/>
+<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z" fill="#98A2B3"/>
 </svg>
--- a/web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.json
+++ b/web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.json
@@ -1,35 +0,0 @@
-{
-  "icon": {
-    "type": "element",
-    "isRootNode": true,
-    "name": "svg",
-    "attributes": {
-      "width": "10",
-      "height": "10",
-      "viewBox": "0 0 10 10",
-      "fill": "none",
-      "xmlns": "http://www.w3.org/2000/svg"
-    },
-    "children": [
-      {
-        "type": "element",
-        "name": "path",
-        "attributes": {
-          "d": "M2 5C2 3.44487 2.58482 1.98537 3.54004 1.04932C2.17681 1.34034 1 2.90001 1 5C1 7.09996 2.17685 8.65912 3.54004 8.9502C2.58496 8.01413 2 6.55501 2 5ZM3 5C3 7.33338 4.4528 9 6 9C7.5472 9 9 7.33338 9 5C9 2.66664 7.5472 1 6 1C4.4528 1 3 2.66664 3 5ZM10 5C10 7.63722 8.3188 10 6 10H4C1.6812 10 0 7.63722 0 5C0 2.3628 1.6812 0 4 0H6C8.3188 0 10 2.3628 10 5Z",
-          "fill": "currentColor"
-        },
-        "children": []
-      },
-      {
-        "type": "element",
-        "name": "path",
-        "attributes": {
-          "d": "M6.71519 4.09259L6.45385 3.18667C6.42141 3.07421 6.34037 3 6.25 3C6.15963 3 6.07859 3.07421 6.04615 3.18667L5.78481 4.09259C5.74675 4.22464 5.66849 4.32899 5.56945 4.37978L4.88999 4.7282C4.80565 4.77146 4.75 4.87951 4.75 5C4.75 5.12049 4.80565 5.22854 4.88999 5.2718L5.56945 5.62022C5.66849 5.67101 5.74675 5.77536 5.78481 5.90741L6.04615 6.81333C6.07859 6.92579 6.15963 7 6.25 7C6.34037 7 6.42141 6.92579 6.45385 6.81333L6.71519 5.90741C6.75325 5.77536 6.83151 5.67101 6.93055 5.62022L7.61001 5.2718C7.69435 5.22854 7.75 5.12049 7.75 5C7.75 4.87951 7.69435 4.77146 7.61001 4.7282L6.93055 4.37978C6.83151 4.32899 6.75325 4.22464 6.71519 4.09259Z",
-          "fill": "currentColor"
-        },
-        "children": []
-      }
-    ]
-  },
-  "name": "CreditsCoin"
-}
--- a/web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.tsx
+++ b/web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.tsx
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import type { IconData } from '@/app/components/base/icons/IconBase'
-import * as React from 'react'
-import IconBase from '@/app/components/base/icons/IconBase'
-import data from './CreditsCoin.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CreditsCoin'
-
-export default Icon
--- a/web/app/components/base/icons/src/vender/line/financeAndECommerce/index.ts
+++ b/web/app/components/base/icons/src/vender/line/financeAndECommerce/index.ts
@@ -1,6 +1,5 @@
 export { default as Balance } from './Balance'
 export { default as CoinsStacked01 } from './CoinsStacked01'
-export { default as CreditsCoin } from './CreditsCoin'
 export { default as GoldCoin } from './GoldCoin'
 export { default as ReceiptList } from './ReceiptList'
 export { default as Tag01 } from './Tag01'
--- a/web/app/components/base/modern-monaco/init.ts
+++ b/web/app/components/base/modern-monaco/init.ts
@@ -1,25 +0,0 @@
-import type { InitOptions } from 'modern-monaco'
-
-export const LIGHT_THEME_ID = 'light-plus'
-export const DARK_THEME_ID = 'dark-plus'
-
-const DEFAULT_INIT_OPTIONS: InitOptions = {
-  defaultTheme: DARK_THEME_ID,
-  themes: [
-    LIGHT_THEME_ID,
-    DARK_THEME_ID,
-  ],
-}
-
-let monacoInitPromise: Promise<typeof import('modern-monaco/editor-core') | null> | null = null
-
-export const initMonaco = async () => {
-  if (!monacoInitPromise) {
-    monacoInitPromise = (async () => {
-      const { init } = await import('modern-monaco')
-      return init(DEFAULT_INIT_OPTIONS)
-    })()
-  }
-
-  return monacoInitPromise
-}
--- a/web/app/components/base/modern-monaco/modern-monaco-editor.tsx
+++ b/web/app/components/base/modern-monaco/modern-monaco-editor.tsx
@@ -1,250 +0,0 @@
-'use client'
-
-import type { editor as MonacoEditor } from 'modern-monaco/editor-core'
-import type { FC } from 'react'
-import * as React from 'react'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import useTheme from '@/hooks/use-theme'
-import { Theme } from '@/types/app'
-import { cn } from '@/utils/classnames'
-import { DARK_THEME_ID, initMonaco, LIGHT_THEME_ID } from './init'
-
-type ModernMonacoEditorProps = {
-  value: string
-  language: string
-  readOnly?: boolean
-  options?: MonacoEditor.IEditorOptions
-  onChange?: (value: string) => void
-  onFocus?: () => void
-  onBlur?: () => void
-  onReady?: (editor: MonacoEditor.IStandaloneCodeEditor, monaco: typeof import('modern-monaco/editor-core')) => void
-  loading?: React.ReactNode
-  className?: string
-  style?: React.CSSProperties
-}
-
-type MonacoModule = typeof import('modern-monaco/editor-core')
-type EditorCallbacks = Pick<ModernMonacoEditorProps, 'onBlur' | 'onChange' | 'onFocus' | 'onReady'>
-type EditorSetup = {
-  editorOptions: MonacoEditor.IEditorOptions
-  language: string
-  resolvedTheme: string
-}
-
-const syncEditorValue = (
-  editor: MonacoEditor.IStandaloneCodeEditor,
-  monaco: MonacoModule,
-  model: MonacoEditor.ITextModel,
-  value: string,
-  preventTriggerChangeEventRef: React.RefObject<boolean>,
-) => {
-  const currentValue = model.getValue()
-  if (currentValue === value)
-    return
-
-  if (editor.getOption(monaco.editor.EditorOption.readOnly)) {
-    editor.setValue(value)
-    return
-  }
-
-  preventTriggerChangeEventRef.current = true
-  try {
-    editor.executeEdits('', [{
-      range: model.getFullModelRange(),
-      text: value,
-      forceMoveMarkers: true,
-    }])
-    editor.pushUndoStop()
-  }
-  finally {
-    preventTriggerChangeEventRef.current = false
-  }
-}
-
-const bindEditorCallbacks = (
-  editor: MonacoEditor.IStandaloneCodeEditor,
-  monaco: MonacoModule,
-  callbacksRef: React.RefObject<EditorCallbacks>,
-  preventTriggerChangeEventRef: React.RefObject<boolean>,
-) => {
-  const changeDisposable = editor.onDidChangeModelContent(() => {
-    if (preventTriggerChangeEventRef.current)
-      return
-    callbacksRef.current.onChange?.(editor.getValue())
-  })
-  const keydownDisposable = editor.onKeyDown((event) => {
-    const { key, code } = event.browserEvent
-    if (key === ' ' || code === 'Space')
-      event.stopPropagation()
-  })
-  const focusDisposable = editor.onDidFocusEditorText(() => {
-    callbacksRef.current.onFocus?.()
-  })
-  const blurDisposable = editor.onDidBlurEditorText(() => {
-    callbacksRef.current.onBlur?.()
-  })
-
-  return () => {
-    blurDisposable.dispose()
-    focusDisposable.dispose()
-    keydownDisposable.dispose()
-    changeDisposable.dispose()
-  }
-}
-
-export const ModernMonacoEditor: FC<ModernMonacoEditorProps> = ({
-  value,
-  language,
-  readOnly = false,
-  options,
-  onChange,
-  onFocus,
-  onBlur,
-  onReady,
-  loading,
-  className,
-  style,
-}) => {
-  const { theme: appTheme } = useTheme()
-  const resolvedTheme = appTheme === Theme.light ? LIGHT_THEME_ID : DARK_THEME_ID
-  const [isEditorReady, setIsEditorReady] = useState(false)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null)
-  const modelRef = useRef<MonacoEditor.ITextModel | null>(null)
-  const monacoRef = useRef<MonacoModule | null>(null)
-  const preventTriggerChangeEventRef = useRef(false)
-  const valueRef = useRef(value)
-  const callbacksRef = useRef<EditorCallbacks>({ onChange, onFocus, onBlur, onReady })
-
-  const editorOptions = useMemo<MonacoEditor.IEditorOptions>(() => ({
-    automaticLayout: true,
-    readOnly,
-    domReadOnly: true,
-    minimap: { enabled: false },
-    wordWrap: 'on',
-    fixedOverflowWidgets: true,
-    tabFocusMode: false,
-    ...options,
-  }), [readOnly, options])
-  const setupRef = useRef<EditorSetup>({
-    editorOptions,
-    language,
-    resolvedTheme,
-  })
-
-  useEffect(() => {
-    valueRef.current = value
-  }, [value])
-
-  useEffect(() => {
-    callbacksRef.current = { onChange, onFocus, onBlur, onReady }
-  }, [onChange, onFocus, onBlur, onReady])
-
-  useEffect(() => {
-    setupRef.current = {
-      editorOptions,
-      language,
-      resolvedTheme,
-    }
-  }, [editorOptions, language, resolvedTheme])
-
-  useEffect(() => {
-    let disposed = false
-    let cleanup: (() => void) | undefined
-
-    const setup = async () => {
-      const monaco = await initMonaco()
-      if (!monaco || disposed || !containerRef.current)
-        return
-
-      monacoRef.current = monaco
-
-      const editor = monaco.editor.create(containerRef.current, setupRef.current.editorOptions)
-      editorRef.current = editor
-
-      const model = monaco.editor.createModel(valueRef.current, setupRef.current.language)
-      modelRef.current = model
-
-      editor.setModel(model)
-
-      monaco.editor.setTheme(setupRef.current.resolvedTheme)
-
-      const disposeCallbacks = bindEditorCallbacks(
-        editor,
-        monaco,
-        callbacksRef,
-        preventTriggerChangeEventRef,
-      )
-      const resizeObserver = new ResizeObserver(() => {
-        editor.layout()
-      })
-      resizeObserver.observe(containerRef.current)
-      callbacksRef.current.onReady?.(editor, monaco)
-      setIsEditorReady(true)
-
-      cleanup = () => {
-        resizeObserver.disconnect()
-        disposeCallbacks()
-        editor.dispose()
-        model.dispose()
-        setIsEditorReady(false)
-      }
-    }
-
-    setup()
-
-    return () => {
-      disposed = true
-      cleanup?.()
-    }
-  }, [])
-
-  useEffect(() => {
-    const editor = editorRef.current
-    if (!editor)
-      return
-    editor.updateOptions(editorOptions)
-  }, [editorOptions])
-
-  useEffect(() => {
-    const monaco = monacoRef.current
-    const model = modelRef.current
-    if (!monaco || !model)
-      return
-    monaco.editor.setModelLanguage(model, language)
-  }, [language])
-
-  useEffect(() => {
-    const monaco = monacoRef.current
-    if (!monaco)
-      return
-    monaco.editor.setTheme(resolvedTheme)
-  }, [resolvedTheme])
-
-  useEffect(() => {
-    const editor = editorRef.current
-    const monaco = monacoRef.current
-    const model = modelRef.current
-    if (!editor || !monaco || !model)
-      return
-
-    syncEditorValue(editor, monaco, model, value, preventTriggerChangeEventRef)
-  }, [value])
-
-  return (
-    <div
-      className={cn('relative h-full w-full', className)}
-      style={style}
-    >
-      <div
-        ref={containerRef}
-        className="h-full w-full"
-      />
-      {!isEditorReady && !!loading && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          {loading}
-        </div>
-      )}
-    </div>
-  )
-}
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/tests/variable-block.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tests/variable-block.spec.tsx
@@ -53,7 +53,7 @@ const createSelectorWithTransientPrefix = (prefix: string, suffix: string): stri
 }

 const hasErrorIcon = (container: HTMLElement) => {
-  return container.querySelector('svg.text-text-warning') !== null
+  return container.querySelector('svg.text-text-destructive') !== null
 }

 const renderVariableBlock = (props: {
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
@@ -14,7 +14,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useStoreApi } from 'reactflow'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import Tooltip from '@/app/components/base/tooltip'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
 import {
@@ -28,7 +28,6 @@ import {
  UPDATE_WORKFLOW_NODES_MAP,
 } from './index'
 import { WorkflowVariableBlockNode } from './node'
-import { useLlmModelPluginInstalled } from './use-llm-model-plugin-installed'

 type WorkflowVariableBlockComponentProps = {
  nodeKey: string
@@ -69,8 +68,6 @@ const WorkflowVariableBlockComponent = ({
  const node = localWorkflowNodesMap![variables[isRagVar ? 1 : 0]]

  const isException = isExceptionVariable(varName, node?.type)
-  const sourceNodeId = variables[isRagVar ? 1 : 0]
-  const isLlmModelInstalled = useLlmModelPluginInstalled(sourceNodeId, localWorkflowNodesMap)
  const variableValid = useMemo(() => {
    let variableValid = true
    const isEnv = isENV(variables)
@@ -147,13 +144,7 @@ const WorkflowVariableBlockComponent = ({
        handleVariableJump()
      }}
      isExceptionVariable={isException}
-      errorMsg={
-        !variableValid
-          ? t('errorMsg.invalidVariable', { ns: 'workflow' })
-          : !isLlmModelInstalled
-              ? t('errorMsg.modelPluginNotInstalled', { ns: 'workflow' })
-              : undefined
-      }
+      errorMsg={!variableValid ? t('errorMsg.invalidVariable', { ns: 'workflow' }) : undefined}
      isSelected={isSelected}
      ref={ref}
      notShowFullPath={isShowAPart}
@@ -164,9 +155,9 @@ const WorkflowVariableBlockComponent = ({
    return Item

  return (
-    <Tooltip>
-      <TooltipTrigger disabled={!isShowAPart} render={<div>{Item}</div>} />
-      <TooltipContent variant="plain">
+    <Tooltip
+      noDecoration
+      popupContent={(
        <VarFullPathPanel
          nodeName={node.title}
          path={variables.slice(1)}
@@ -178,7 +169,10 @@ const WorkflowVariableBlockComponent = ({
            : Type.string}
          nodeType={node?.type}
        />
-      </TooltipContent>
+      )}
+      disabled={!isShowAPart}
+    >
+      <div>{Item}</div>
    </Tooltip>
  )
 }
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.spec.ts
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.spec.ts
@@ -1,75 +0,0 @@
-import type { WorkflowNodesMap } from '@/app/components/base/prompt-editor/types'
-import { renderHook } from '@testing-library/react'
-import { BlockEnum } from '@/app/components/workflow/types'
-import { useLlmModelPluginInstalled } from './use-llm-model-plugin-installed'
-
-let mockModelProviders: Array<{ provider: string }> = []
-
-vi.mock('@/context/provider-context', () => ({
-  useProviderContextSelector: <T>(selector: (state: { modelProviders: Array<{ provider: string }> }) => T): T =>
-    selector({ modelProviders: mockModelProviders }),
-}))
-
-const createWorkflowNodesMap = (node: Record<string, unknown>): WorkflowNodesMap =>
-  ({
-    target: {
-      title: 'Target',
-      type: BlockEnum.Start,
-      ...node,
-    },
-  } as unknown as WorkflowNodesMap)
-
-describe('useLlmModelPluginInstalled', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockModelProviders = []
-  })
-
-  it('should return true when the node is missing', () => {
-    const { result } = renderHook(() => useLlmModelPluginInstalled('target', undefined))
-
-    expect(result.current).toBe(true)
-  })
-
-  it('should return true when the node is not an LLM node', () => {
-    const workflowNodesMap = createWorkflowNodesMap({
-      id: 'target',
-      type: BlockEnum.Start,
-    })
-
-    const { result } = renderHook(() => useLlmModelPluginInstalled('target', workflowNodesMap))
-
-    expect(result.current).toBe(true)
-  })
-
-  it('should return true when the matching model plugin is installed', () => {
-    mockModelProviders = [
-      { provider: 'langgenius/openai/openai' },
-      { provider: 'langgenius/anthropic/claude' },
-    ]
-    const workflowNodesMap = createWorkflowNodesMap({
-      id: 'target',
-      type: BlockEnum.LLM,
-      modelProvider: 'langgenius/openai/gpt-4.1',
-    })
-
-    const { result } = renderHook(() => useLlmModelPluginInstalled('target', workflowNodesMap))
-
-    expect(result.current).toBe(true)
-  })
-
-  it('should return false when the matching model plugin is not installed', () => {
-    mockModelProviders = [
-      { provider: 'langgenius/anthropic/claude' },
-    ]
-    const workflowNodesMap = createWorkflowNodesMap({
-      id: 'target',
-      type: BlockEnum.LLM,
-      modelProvider: 'langgenius/openai/gpt-4.1',
-    })
-
-    const { result } = renderHook(() => useLlmModelPluginInstalled('target', workflowNodesMap))
-
-    expect(result.current).toBe(false)
-  })
-})
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.ts
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.ts
@@ -1,23 +0,0 @@
-import type { WorkflowNodesMap } from '@/app/components/base/prompt-editor/types'
-import { BlockEnum } from '@/app/components/workflow/types'
-import { extractPluginId } from '@/app/components/workflow/utils/plugin'
-import { useProviderContextSelector } from '@/context/provider-context'
-
-export function useLlmModelPluginInstalled(
-  nodeId: string,
-  workflowNodesMap: WorkflowNodesMap | undefined,
-): boolean {
-  const node = workflowNodesMap?.[nodeId]
-  const modelProvider = node?.type === BlockEnum.LLM
-    ? node.modelProvider
-    : undefined
-  const modelPluginId = modelProvider ? extractPluginId(modelProvider) : undefined
-
-  return useProviderContextSelector((state) => {
-    if (!modelPluginId)
-      return true
-    return state.modelProviders.some(p =>
-      extractPluginId(p.provider) === modelPluginId,
-    )
-  })
-}
--- a/web/app/components/base/prompt-editor/types.ts
+++ b/web/app/components/base/prompt-editor/types.ts
@@ -73,7 +73,7 @@ export type GetVarType = (payload: {
 export type WorkflowVariableBlockType = {
  show?: boolean
  variables?: NodeOutPutVar[]
-  workflowNodesMap?: WorkflowNodesMap
+  workflowNodesMap?: Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>
  onInsert?: () => void
  onDelete?: () => void
  getVarType?: GetVarType
@@ -81,14 +81,12 @@ export type WorkflowVariableBlockType = {
  onManageInputField?: () => void
 }

-export type WorkflowNodesMap = Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'> & { modelProvider?: string }>
-
 export type HITLInputBlockType = {
  show?: boolean
  nodeId: string
  formInputs?: FormInputItem[]
  variables?: NodeOutPutVar[]
-  workflowNodesMap?: WorkflowNodesMap
+  workflowNodesMap?: Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>
  getVarType?: GetVarType
  onFormInputsChange?: (inputs: FormInputItem[]) => void
  onFormInputItemRemove: (varName: string) => void
--- a/web/app/components/base/tag-input/tests/interop.spec.tsx
+++ b/web/app/components/base/tag-input/tests/interop.spec.tsx
@@ -1,57 +0,0 @@
-import type { ComponentType, InputHTMLAttributes } from 'react'
-import { render, screen } from '@testing-library/react'
-
-const mockNotify = vi.fn()
-
-type AutosizeInputProps = InputHTMLAttributes<HTMLInputElement> & {
-  inputClassName?: string
-}
-
-const MockAutosizeInput: ComponentType<AutosizeInputProps> = ({ inputClassName, ...props }) => (
-  <input data-testid="autosize-input" className={inputClassName} {...props} />
-)
-
-describe('TagInput autosize interop', () => {
-  afterEach(() => {
-    vi.clearAllMocks()
-    vi.resetModules()
-  })
-
-  it('should support a namespace-style default export from react-18-input-autosize', async () => {
-    vi.doMock('@/app/components/base/toast/context', () => ({
-      useToastContext: () => ({
-        notify: mockNotify,
-      }),
-    }))
-    vi.doMock('react-18-input-autosize', () => ({
-      default: {
-        default: MockAutosizeInput,
-      },
-    }))
-
-    const { default: TagInput } = await import('../index')
-
-    render(<TagInput items={[]} onChange={vi.fn()} />)
-
-    expect(screen.getByTestId('autosize-input')).toBeInTheDocument()
-    expect(screen.getByRole('textbox')).toBeInTheDocument()
-  })
-
-  it('should support a direct default export from react-18-input-autosize', async () => {
-    vi.doMock('@/app/components/base/toast/context', () => ({
-      useToastContext: () => ({
-        notify: mockNotify,
-      }),
-    }))
-    vi.doMock('react-18-input-autosize', () => ({
-      default: MockAutosizeInput,
-    }))
-
-    const { default: TagInput } = await import('../index')
-
-    render(<TagInput items={[]} onChange={vi.fn()} />)
-
-    expect(screen.getByTestId('autosize-input')).toBeInTheDocument()
-    expect(screen.getByRole('textbox')).toBeInTheDocument()
-  })
-})
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -1,14 +1,10 @@
 import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { useCallback, useState } from 'react'
-import _AutosizeInput from 'react-18-input-autosize'
+import AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
 import { useToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'

-// CJS/ESM interop: Turbopack may resolve the module namespace object instead of the default export
-// eslint-disable-next-line ts/no-explicit-any
-const AutosizeInput = ('default' in (_AutosizeInput as any) ? (_AutosizeInput as any).default : _AutosizeInput) as typeof _AutosizeInput
-
 type TagInputProps = {
  items: string[]
  onChange: (items: string[]) => void
--- a/web/app/components/base/ui/dialog/index.tsx
+++ b/web/app/components/base/ui/dialog/index.tsx
@@ -46,24 +46,20 @@ type DialogContentProps = {
  children: React.ReactNode
  className?: string
  overlayClassName?: string
-  backdropProps?: React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>
 }

 export function DialogContent({
  children,
  className,
  overlayClassName,
-  backdropProps,
 }: DialogContentProps) {
  return (
    <DialogPortal>
      <BaseDialog.Backdrop
-        {...backdropProps}
        className={cn(
          'fixed inset-0 z-[1002] bg-background-overlay',
          'transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none',
          overlayClassName,
-          backdropProps?.className,
        )}
      />
      <BaseDialog.Popup
--- a/web/app/components/billing/pricing/tests/dialog.spec.tsx
+++ b/web/app/components/billing/pricing/tests/dialog.spec.tsx
@@ -1,93 +0,0 @@
-import type { ReactNode } from 'react'
-import type { Mock } from 'vitest'
-import type { UsagePlanInfo } from '../../type'
-import { render } from '@testing-library/react'
-import { useAppContext } from '@/context/app-context'
-import { useGetPricingPageLanguage } from '@/context/i18n'
-import { useProviderContext } from '@/context/provider-context'
-import { Plan } from '../../type'
-import Pricing from '../index'
-
-type DialogProps = {
-  children: ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-let latestOnOpenChange: DialogProps['onOpenChange']
-
-vi.mock('@/app/components/base/ui/dialog', () => ({
-  Dialog: ({ children, onOpenChange }: DialogProps) => {
-    latestOnOpenChange = onOpenChange
-    return <div data-testid="dialog">{children}</div>
-  },
-  DialogContent: ({ children, className }: { children: ReactNode, className?: string }) => (
-    <div className={className}>{children}</div>
-  ),
-}))
-
-vi.mock('../header', () => ({
-  default: ({ onClose }: { onClose: () => void }) => (
-    <button data-testid="pricing-header-close" onClick={onClose}>close</button>
-  ),
-}))
-
-vi.mock('../plan-switcher', () => ({
-  default: () => <div>plan-switcher</div>,
-}))
-
-vi.mock('../plans', () => ({
-  default: () => <div>plans</div>,
-}))
-
-vi.mock('../footer', () => ({
-  default: () => <div>footer</div>,
-}))
-
-vi.mock('@/context/app-context', () => ({
-  useAppContext: vi.fn(),
-}))
-
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: vi.fn(),
-}))
-
-vi.mock('@/context/i18n', () => ({
-  useGetPricingPageLanguage: vi.fn(),
-}))
-
-const buildUsage = (): UsagePlanInfo => ({
-  buildApps: 0,
-  teamMembers: 0,
-  annotatedResponse: 0,
-  documentsUploadQuota: 0,
-  apiRateLimit: 0,
-  triggerEvents: 0,
-  vectorSpace: 0,
-})
-
-describe('Pricing dialog lifecycle', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    latestOnOpenChange = undefined
-    ;(useAppContext as Mock).mockReturnValue({ isCurrentWorkspaceManager: true })
-    ;(useProviderContext as Mock).mockReturnValue({
-      plan: {
-        type: Plan.sandbox,
-        usage: buildUsage(),
-        total: buildUsage(),
-      },
-    })
-    ;(useGetPricingPageLanguage as Mock).mockReturnValue('en')
-  })
-
-  it('should only call onCancel when the dialog requests closing', () => {
-    const onCancel = vi.fn()
-    render(<Pricing onCancel={onCancel} />)
-
-    latestOnOpenChange?.(true)
-    latestOnOpenChange?.(false)
-
-    expect(onCancel).toHaveBeenCalledTimes(1)
-  })
-})
--- a/web/app/components/billing/pricing/tests/footer.spec.tsx
+++ b/web/app/components/billing/pricing/tests/footer.spec.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
+import { CategoryEnum } from '..'
 import Footer from '../footer'
-import { CategoryEnum } from '../types'

 vi.mock('next/link', () => ({
  default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
--- a/web/app/components/billing/pricing/tests/header.spec.tsx
+++ b/web/app/components/billing/pricing/tests/header.spec.tsx
@@ -1,16 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { Dialog } from '@/app/components/base/ui/dialog'
 import Header from '../header'

-function renderHeader(onClose: () => void) {
-  return render(
-    <Dialog open>
-      <Header onClose={onClose} />
-    </Dialog>,
-  )
-}
-
 describe('Header', () => {
  beforeEach(() => {
    vi.clearAllMocks()
@@ -20,7 +11,7 @@ describe('Header', () => {
    it('should render title and description translations', () => {
      const handleClose = vi.fn()

-      renderHeader(handleClose)
+      render(<Header onClose={handleClose} />)

      expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
      expect(screen.getByText('billing.plansCommon.title.description')).toBeInTheDocument()
@@ -31,7 +22,7 @@ describe('Header', () => {
  describe('Props', () => {
    it('should invoke onClose when close button is clicked', () => {
      const handleClose = vi.fn()
-      renderHeader(handleClose)
+      render(<Header onClose={handleClose} />)

      fireEvent.click(screen.getByRole('button'))

@@ -41,7 +32,7 @@ describe('Header', () => {

  describe('Edge Cases', () => {
    it('should render structural elements with translation keys', () => {
-      const { container } = renderHeader(vi.fn())
+      const { container } = render(<Header onClose={vi.fn()} />)

      expect(container.querySelector('span')).toBeInTheDocument()
      expect(container.querySelector('p')).toBeInTheDocument()
--- a/web/app/components/billing/pricing/tests/index.spec.tsx
+++ b/web/app/components/billing/pricing/tests/index.spec.tsx
@@ -74,11 +74,15 @@ describe('Pricing', () => {
  })

  describe('Props', () => {
-    it('should allow switching categories', () => {
-      render(<Pricing onCancel={vi.fn()} />)
+    it('should allow switching categories and handle esc key', () => {
+      const handleCancel = vi.fn()
+      render(<Pricing onCancel={handleCancel} />)

      fireEvent.click(screen.getByText('billing.plansCommon.self'))
      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+
+      fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
+      expect(handleCancel).toHaveBeenCalled()
    })
  })

--- a/web/app/components/billing/pricing/footer.tsx
+++ b/web/app/components/billing/pricing/footer.tsx
@@ -1,9 +1,10 @@
-import type { Category } from './types'
+import type { Category } from '.'
+import { RiArrowRightUpLine } from '@remixicon/react'
 import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
-import { CategoryEnum } from './types'
+import { CategoryEnum } from '.'

 type FooterProps = {
  pricingPageURL: string
@@ -33,7 +34,7 @@ const Footer = ({
          >
            {t('plansCommon.comparePlanAndFeatures', { ns: 'billing' })}
          </Link>
-          <span aria-hidden="true" className="i-ri-arrow-right-up-line size-4" />
+          <RiArrowRightUpLine className="size-4" />
        </span>
      </div>
    </div>
--- a/web/app/components/billing/pricing/header.tsx
+++ b/web/app/components/billing/pricing/header.tsx
@@ -1,3 +1,4 @@
+import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
@@ -38,7 +39,7 @@ const Header = ({
          className="absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2"
          onClick={onClose}
        >
-          <span aria-hidden="true" className="i-ri-close-line size-5" />
+          <RiCloseLine className="size-5" />
        </Button>
      </div>
    </div>
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
-import type { Category } from './types'
+import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
-import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
+import { createPortal } from 'react-dom'
 import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
@@ -13,7 +13,13 @@ import Header from './header'
 import PlanSwitcher from './plan-switcher'
 import { PlanRange } from './plan-switcher/plan-range-switcher'
 import Plans from './plans'
-import { CategoryEnum } from './types'
+
+export enum CategoryEnum {
+  CLOUD = 'cloud',
+  SELF = 'self',
+}
+
+export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF

 type PricingProps = {
  onCancel: () => void
@@ -27,47 +33,42 @@ const Pricing: FC<PricingProps> = ({
  const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
  const [currentCategory, setCurrentCategory] = useState<Category>(CategoryEnum.CLOUD)
  const canPay = isCurrentWorkspaceManager
+  useKeyPress(['esc'], onCancel)

  const pricingPageLanguage = useGetPricingPageLanguage()
  const pricingPageURL = pricingPageLanguage
    ? `https://dify.ai/${pricingPageLanguage}/pricing#plans-and-features`
    : 'https://dify.ai/pricing#plans-and-features'

-  return (
-    <Dialog
-      open
-      onOpenChange={(open) => {
-        if (!open)
-          onCancel()
-      }}
+  return createPortal(
+    <div
+      className="fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background"
+      onClick={e => e.stopPropagation()}
    >
-      <DialogContent
-        className="inset-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-auto rounded-none border-none bg-saas-background p-0 shadow-none"
-      >
-        <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
-          <div className="absolute -top-12 left-0 right-0 -z-10">
-            <NoiseTop />
-          </div>
-          <Header onClose={onCancel} />
-          <PlanSwitcher
-            currentCategory={currentCategory}
-            onChangeCategory={setCurrentCategory}
-            currentPlanRange={planRange}
-            onChangePlanRange={setPlanRange}
-          />
-          <Plans
-            plan={plan}
-            currentPlan={currentCategory}
-            planRange={planRange}
-            canPay={canPay}
-          />
-          <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
-          <div className="absolute -bottom-12 left-0 right-0 -z-10">
-            <NoiseBottom />
-          </div>
+      <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
+        <div className="absolute -top-12 left-0 right-0 -z-10">
+          <NoiseTop />
        </div>
-      </DialogContent>
-    </Dialog>
+        <Header onClose={onCancel} />
+        <PlanSwitcher
+          currentCategory={currentCategory}
+          onChangeCategory={setCurrentCategory}
+          currentPlanRange={planRange}
+          onChangePlanRange={setPlanRange}
+        />
+        <Plans
+          plan={plan}
+          currentPlan={currentCategory}
+          planRange={planRange}
+          canPay={canPay}
+        />
+        <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
+        <div className="absolute -bottom-12 left-0 right-0 -z-10">
+          <NoiseBottom />
+        </div>
+      </div>
+    </div>,
+    document.body,
  )
 }
 export default React.memo(Pricing)
--- a/web/app/components/billing/pricing/plan-switcher/tests/index.spec.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/tests/index.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '../../types'
+import { CategoryEnum } from '../../index'
 import PlanSwitcher from '../index'
 import { PlanRange } from '../plan-range-switcher'

--- a/web/app/components/billing/pricing/plan-switcher/index.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import type { Category } from '../types'
+import type { Category } from '../index'
 import type { PlanRange } from './plan-range-switcher'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
--- a/web/app/components/billing/pricing/types.ts
+++ b/web/app/components/billing/pricing/types.ts
@@ -1,6 +0,0 @@
-export enum CategoryEnum {
-  CLOUD = 'cloud',
-  SELF = 'self',
-}
-
-export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF
--- a/web/app/components/custom/custom-page/tests/index.spec.tsx
+++ b/web/app/components/custom/custom-page/tests/index.spec.tsx
@@ -1,496 +1,179 @@
-import type { Mock } from 'vitest'
+import type { AppContextValue } from '@/context/app-context'
+import type { SystemFeatures } from '@/types/feature'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createMockProviderContextValue } from '@/__mocks__/provider-context'
-import { contactSalesUrl } from '@/app/components/billing/config'
+import { useToastContext } from '@/app/components/base/toast/context'
+import { contactSalesUrl, defaultPlan } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
+import {
+  initialLangGeniusVersionInfo,
+  initialWorkspaceInfo,
+  useAppContext,
+  userProfilePlaceholder,
+} from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { defaultSystemFeatures } from '@/types/feature'
 import CustomPage from '../index'

-// Mock external dependencies only
 vi.mock('@/context/provider-context', () => ({
  useProviderContext: vi.fn(),
 }))
-
 vi.mock('@/context/modal-context', () => ({
  useModalContext: vi.fn(),
 }))
-
-// Mock the complex CustomWebAppBrand component to avoid dependency issues
-// This is acceptable because it has complex dependencies (fetch, APIs)
-vi.mock('@/app/components/custom/custom-web-app-brand', () => ({
-  default: () => <div data-testid="custom-web-app-brand">CustomWebAppBrand</div>,
+vi.mock('@/context/app-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/app-context')>()
+  return {
+    ...actual,
+    useAppContext: vi.fn(),
+  }
+})
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: vi.fn(),
+}))
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: vi.fn(),
 }))

+const mockUseProviderContext = vi.mocked(useProviderContext)
+const mockUseModalContext = vi.mocked(useModalContext)
+const mockUseAppContext = vi.mocked(useAppContext)
+const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
+const mockUseToastContext = vi.mocked(useToastContext)
+
+const createProviderContext = ({
+  enableBilling = false,
+  planType = Plan.professional,
+}: {
+  enableBilling?: boolean
+  planType?: Plan
+} = {}) => {
+  return createMockProviderContextValue({
+    enableBilling,
+    plan: {
+      ...defaultPlan,
+      type: planType,
+    },
+  })
+}
+
+const createAppContextValue = (): AppContextValue => ({
+  userProfile: userProfilePlaceholder,
+  mutateUserProfile: vi.fn(),
+  currentWorkspace: {
+    ...initialWorkspaceInfo,
+    custom_config: {
+      replace_webapp_logo: 'https://example.com/replace.png',
+      remove_webapp_brand: false,
+    },
+  },
+  isCurrentWorkspaceManager: true,
+  isCurrentWorkspaceOwner: false,
+  isCurrentWorkspaceEditor: false,
+  isCurrentWorkspaceDatasetOperator: false,
+  mutateCurrentWorkspace: vi.fn(),
+  langGeniusVersionInfo: initialLangGeniusVersionInfo,
+  useSelector: vi.fn() as unknown as AppContextValue['useSelector'],
+  isLoadingCurrentWorkspace: false,
+  isValidatingCurrentWorkspace: false,
+})
+
+const createSystemFeatures = (): SystemFeatures => ({
+  ...defaultSystemFeatures,
+  branding: {
+    ...defaultSystemFeatures.branding,
+    enabled: true,
+    workspace_logo: 'https://example.com/workspace-logo.png',
+  },
+})
+
 describe('CustomPage', () => {
-  const mockSetShowPricingModal = vi.fn()
+  const setShowPricingModal = vi.fn()

  beforeEach(() => {
    vi.clearAllMocks()

-    // Default mock setup
-    ;(useModalContext as Mock).mockReturnValue({
-      setShowPricingModal: mockSetShowPricingModal,
-    })
+    mockUseProviderContext.mockReturnValue(createProviderContext())
+    mockUseModalContext.mockReturnValue({
+      setShowPricingModal,
+    } as unknown as ReturnType<typeof useModalContext>)
+    mockUseAppContext.mockReturnValue(createAppContextValue())
+    mockUseGlobalPublicStore.mockImplementation(selector => selector({
+      systemFeatures: createSystemFeatures(),
+      setSystemFeatures: vi.fn(),
+    }))
+    mockUseToastContext.mockReturnValue({
+      notify: vi.fn(),
+    } as unknown as ReturnType<typeof useToastContext>)
  })

-  // Helper function to render with different provider contexts
-  const renderWithContext = (overrides = {}) => {
-    ;(useProviderContext as Mock).mockReturnValue(
-      createMockProviderContextValue(overrides),
-    )
-    return render(<CustomPage />)
-  }
-
-  // Rendering tests (REQUIRED)
+  // Integration coverage for the page and its child custom brand section.
  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      // Arrange & Act
-      renderWithContext()
+    it('should render the custom brand configuration by default', () => {
+      render(<CustomPage />)

-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
-    })
-
-    it('should always render CustomWebAppBrand component', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
-    })
-
-    it('should have correct layout structure', () => {
-      // Arrange & Act
-      const { container } = renderWithContext()
-
-      // Assert
-      const mainContainer = container.querySelector('.flex.flex-col')
-      expect(mainContainer).toBeInTheDocument()
-    })
-  })
-
-  // Conditional Rendering - Billing Tip
-  describe('Billing Tip Banner', () => {
-    it('should show billing tip when enableBilling is true and plan is sandbox', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
-      expect(screen.getByText('custom.upgradeTip.des')).toBeInTheDocument()
-      expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
-    })
-
-    it('should not show billing tip when enableBilling is false', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: false,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
+      expect(screen.getByText('custom.webapp.removeBrand')).toBeInTheDocument()
+      expect(screen.getByText('Chatflow App')).toBeInTheDocument()
      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
-      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
-    })
-
-    it('should not show billing tip when plan is professional', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.professional },
-      })
-
-      // Assert
-      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
-      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
-    })
-
-    it('should not show billing tip when plan is team', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.team },
-      })
-
-      // Assert
-      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
-      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
-    })
-
-    it('should have correct gradient styling for billing tip banner', () => {
-      // Arrange & Act
-      const { container } = renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      const banner = container.querySelector('.bg-gradient-to-r')
-      expect(banner).toBeInTheDocument()
-      expect(banner).toHaveClass('from-components-input-border-active-prompt-1')
-      expect(banner).toHaveClass('to-components-input-border-active-prompt-2')
-      expect(banner).toHaveClass('p-4')
-      expect(banner).toHaveClass('pl-6')
-      expect(banner).toHaveClass('shadow-lg')
-    })
-  })
-
-  // Conditional Rendering - Contact Sales
-  describe('Contact Sales Section', () => {
-    it('should show contact section when enableBilling is true and plan is professional', () => {
-      // Arrange & Act
-      const { container } = renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.professional },
-      })
-
-      // Assert - Check that contact section exists with all parts
-      const contactSection = container.querySelector('.absolute.bottom-0')
-      expect(contactSection).toBeInTheDocument()
-      expect(contactSection).toHaveTextContent('custom.customize.prefix')
-      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
-      expect(contactSection).toHaveTextContent('custom.customize.suffix')
-    })
-
-    it('should show contact section when enableBilling is true and plan is team', () => {
-      // Arrange & Act
-      const { container } = renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.team },
-      })
-
-      // Assert - Check that contact section exists with all parts
-      const contactSection = container.querySelector('.absolute.bottom-0')
-      expect(contactSection).toBeInTheDocument()
-      expect(contactSection).toHaveTextContent('custom.customize.prefix')
-      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
-      expect(contactSection).toHaveTextContent('custom.customize.suffix')
-    })
-
-    it('should not show contact section when enableBilling is false', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: false,
-        plan: { type: Plan.professional },
-      })
-
-      // Assert
-      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
    })

-    it('should not show contact section when plan is sandbox', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
-      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
-    })
-
-    it('should render contact link with correct URL', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.professional },
-      })
-
-      // Assert
-      const link = screen.getByText('custom.customize.contactUs').closest('a')
-      expect(link).toHaveAttribute('href', contactSalesUrl)
-      expect(link).toHaveAttribute('target', '_blank')
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
-    })
-
-    it('should have correct positioning for contact section', () => {
-      // Arrange & Act
-      const { container } = renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.professional },
-      })
-
-      // Assert
-      const contactSection = container.querySelector('.absolute.bottom-0')
-      expect(contactSection).toBeInTheDocument()
-      expect(contactSection).toHaveClass('h-[50px]')
-      expect(contactSection).toHaveClass('text-xs')
-      expect(contactSection).toHaveClass('leading-[50px]')
-    })
-  })
-
-  // User Interactions
-  describe('User Interactions', () => {
-    it('should call setShowPricingModal when upgrade button is clicked', async () => {
-      // Arrange
+    it('should show the upgrade banner and open pricing modal for sandbox billing', async () => {
      const user = userEvent.setup()
-      renderWithContext({
+      mockUseProviderContext.mockReturnValue(createProviderContext({
        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
+        planType: Plan.sandbox,
+      }))

-      // Act
-      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
-      await user.click(upgradeButton)
+      render(<CustomPage />)

-      // Assert
-      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call setShowPricingModal without arguments', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Act
-      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
-      await user.click(upgradeButton)
-
-      // Assert
-      expect(mockSetShowPricingModal).toHaveBeenCalledWith()
-    })
-
-    it('should handle multiple clicks on upgrade button', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Act
-      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
-      await user.click(upgradeButton)
-      await user.click(upgradeButton)
-      await user.click(upgradeButton)
-
-      // Assert
-      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(3)
-    })
-
-    it('should have correct button styling for upgrade button', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
-      expect(upgradeButton).toHaveClass('cursor-pointer')
-      expect(upgradeButton).toHaveClass('bg-white')
-      expect(upgradeButton).toHaveClass('text-text-accent')
-      expect(upgradeButton).toHaveClass('rounded-3xl')
-    })
-  })
-
-  // Edge Cases (REQUIRED)
-  describe('Edge Cases', () => {
-    it('should handle undefined plan type gracefully', () => {
-      // Arrange & Act
-      expect(() => {
-        renderWithContext({
-          enableBilling: true,
-          plan: { type: undefined },
-        })
-      }).not.toThrow()
-
-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
-    })
-
-    it('should handle plan without type property', () => {
-      // Arrange & Act
-      expect(() => {
-        renderWithContext({
-          enableBilling: true,
-          plan: { type: null },
-        })
-      }).not.toThrow()
-
-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
-    })
-
-    it('should not show any banners when both conditions are false', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: false,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
-      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
-    })
-
-    it('should handle enableBilling undefined', () => {
-      // Arrange & Act
-      expect(() => {
-        renderWithContext({
-          enableBilling: undefined,
-          plan: { type: Plan.sandbox },
-        })
-      }).not.toThrow()
-
-      // Assert
-      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
-    })
-
-    it('should show only billing tip for sandbox plan, not contact section', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+
+      await user.click(screen.getByText('billing.upgradeBtn.encourageShort'))
+
+      expect(setShowPricingModal).toHaveBeenCalledTimes(1)
    })

-    it('should show only contact section for professional plan, not billing tip', () => {
-      // Arrange & Act
-      renderWithContext({
+    it('should show the contact link for professional workspaces', () => {
+      mockUseProviderContext.mockReturnValue(createProviderContext({
        enableBilling: true,
-        plan: { type: Plan.professional },
-      })
+        planType: Plan.professional,
+      }))

-      // Assert
+      render(<CustomPage />)
+
+      const contactLink = screen.getByText('custom.customize.contactUs').closest('a')
      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
-      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+      expect(contactLink).toHaveAttribute('href', contactSalesUrl)
+      expect(contactLink).toHaveAttribute('target', '_blank')
+      expect(contactLink).toHaveAttribute('rel', 'noopener noreferrer')
    })

-    it('should show only contact section for team plan, not billing tip', () => {
-      // Arrange & Act
-      renderWithContext({
+    it('should show the contact link for team workspaces', () => {
+      mockUseProviderContext.mockReturnValue(createProviderContext({
        enableBilling: true,
-        plan: { type: Plan.team },
-      })
+        planType: Plan.team,
+      }))

-      // Assert
+      render(<CustomPage />)
+
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
-      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
    })

-    it('should handle empty plan object', () => {
-      // Arrange & Act
-      expect(() => {
-        renderWithContext({
-          enableBilling: true,
-          plan: {},
-        })
-      }).not.toThrow()
-
-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
-    })
-  })
-
-  // Accessibility Tests
-  describe('Accessibility', () => {
-    it('should have clickable upgrade button', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
-      expect(upgradeButton).toBeInTheDocument()
-      expect(upgradeButton).toHaveClass('cursor-pointer')
-    })
-
-    it('should have proper external link attributes on contact link', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.professional },
-      })
-
-      // Assert
-      const link = screen.getByText('custom.customize.contactUs').closest('a')
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
-      expect(link).toHaveAttribute('target', '_blank')
-    })
-
-    it('should have proper text hierarchy in billing tip', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      const title = screen.getByText('custom.upgradeTip.title')
-      const description = screen.getByText('custom.upgradeTip.des')
-
-      expect(title).toHaveClass('title-xl-semi-bold')
-      expect(description).toHaveClass('system-sm-regular')
-    })
-
-    it('should use semantic color classes', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert - Check that the billing tip has text content (which implies semantic colors)
-      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
-    })
-  })
-
-  // Integration Tests
-  describe('Integration', () => {
-    it('should render both CustomWebAppBrand and billing tip together', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.sandbox },
-      })
-
-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
-      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
-    })
-
-    it('should render both CustomWebAppBrand and contact section together', () => {
-      // Arrange & Act
-      renderWithContext({
-        enableBilling: true,
-        plan: { type: Plan.professional },
-      })
-
-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
-      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
-    })
-
-    it('should render only CustomWebAppBrand when no billing conditions met', () => {
-      // Arrange & Act
-      renderWithContext({
+    it('should hide both billing sections when billing is disabled', () => {
+      mockUseProviderContext.mockReturnValue(createProviderContext({
        enableBilling: false,
-        plan: { type: Plan.sandbox },
-      })
+        planType: Plan.sandbox,
+      }))
+
+      render(<CustomPage />)

-      // Assert
-      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
    })
--- a/web/app/components/custom/custom-web-app-brand/tests/index.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/tests/index.spec.tsx
@@ -1,147 +1,158 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import { useToastContext } from '@/app/components/base/toast/context'
-import { Plan } from '@/app/components/billing/type'
-import { useAppContext } from '@/context/app-context'
-import { useGlobalPublicStore } from '@/context/global-public-context'
-import { useProviderContext } from '@/context/provider-context'
-import { updateCurrentWorkspace } from '@/service/common'
+import useWebAppBrand from '../hooks/use-web-app-brand'
 import CustomWebAppBrand from '../index'

-vi.mock('@/app/components/base/toast/context', () => ({
-  useToastContext: vi.fn(),
-}))
-vi.mock('@/service/common', () => ({
-  updateCurrentWorkspace: vi.fn(),
-}))
-vi.mock('@/context/app-context', () => ({
-  useAppContext: vi.fn(),
-}))
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: vi.fn(),
-}))
-vi.mock('@/context/global-public-context', () => ({
-  useGlobalPublicStore: vi.fn(),
-}))
-vi.mock('@/app/components/base/image-uploader/utils', () => ({
-  imageUpload: vi.fn(),
-  getImageUploadErrorMessage: vi.fn(),
+vi.mock('../hooks/use-web-app-brand', () => ({
+  default: vi.fn(),
 }))

-const mockNotify = vi.fn()
-const mockUseToastContext = vi.mocked(useToastContext)
-const mockUpdateCurrentWorkspace = vi.mocked(updateCurrentWorkspace)
-const mockUseAppContext = vi.mocked(useAppContext)
-const mockUseProviderContext = vi.mocked(useProviderContext)
-const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
-const mockImageUpload = vi.mocked(imageUpload)
-const mockGetImageUploadErrorMessage = vi.mocked(getImageUploadErrorMessage)
+const mockUseWebAppBrand = vi.mocked(useWebAppBrand)

-const defaultPlanUsage = {
-  buildApps: 0,
-  teamMembers: 0,
-  annotatedResponse: 0,
-  documentsUploadQuota: 0,
-  apiRateLimit: 0,
-  triggerEvents: 0,
-  vectorSpace: 0,
+const createHookState = (overrides: Partial<ReturnType<typeof useWebAppBrand>> = {}): ReturnType<typeof useWebAppBrand> => ({
+  fileId: '',
+  imgKey: 100,
+  uploadProgress: 0,
+  uploading: false,
+  webappLogo: 'https://example.com/replace.png',
+  webappBrandRemoved: false,
+  uploadDisabled: false,
+  workspaceLogo: 'https://example.com/workspace-logo.png',
+  isSandbox: false,
+  isCurrentWorkspaceManager: true,
+  handleApply: vi.fn(),
+  handleCancel: vi.fn(),
+  handleChange: vi.fn(),
+  handleRestore: vi.fn(),
+  handleSwitch: vi.fn(),
+  ...overrides,
+})
+
+const renderComponent = (overrides: Partial<ReturnType<typeof useWebAppBrand>> = {}) => {
+  const hookState = createHookState(overrides)
+  mockUseWebAppBrand.mockReturnValue(hookState)
+  return {
+    hookState,
+    ...render(<CustomWebAppBrand />),
+  }
 }

-const renderComponent = () => render(<CustomWebAppBrand />)
-
 describe('CustomWebAppBrand', () => {
  beforeEach(() => {
    vi.clearAllMocks()
-    mockUseToastContext.mockReturnValue({ notify: mockNotify } as unknown as ReturnType<typeof useToastContext>)
-    mockUpdateCurrentWorkspace.mockResolvedValue({} as unknown as Awaited<ReturnType<typeof updateCurrentWorkspace>>)
-    mockUseAppContext.mockReturnValue({
-      currentWorkspace: {
-        custom_config: {
-          replace_webapp_logo: 'https://example.com/replace.png',
-          remove_webapp_brand: false,
-        },
-      },
-      mutateCurrentWorkspace: vi.fn(),
-      isCurrentWorkspaceManager: true,
-    } as unknown as ReturnType<typeof useAppContext>)
-    mockUseProviderContext.mockReturnValue({
-      plan: {
-        type: Plan.professional,
-        usage: defaultPlanUsage,
-        total: defaultPlanUsage,
-        reset: {},
-      },
-      enableBilling: false,
-    } as unknown as ReturnType<typeof useProviderContext>)
-    const systemFeaturesState = {
-      branding: {
-        enabled: true,
-        workspace_logo: 'https://example.com/workspace-logo.png',
-      },
-    }
-    mockUseGlobalPublicStore.mockImplementation(selector => selector ? selector({ systemFeatures: systemFeaturesState, setSystemFeatures: vi.fn() } as unknown as ReturnType<typeof useGlobalPublicStore.getState>) : { systemFeatures: systemFeaturesState })
-    mockGetImageUploadErrorMessage.mockReturnValue('upload error')
  })

-  it('disables upload controls when the user cannot manage the workspace', () => {
-    mockUseAppContext.mockReturnValue({
-      currentWorkspace: {
-        custom_config: {
-          replace_webapp_logo: '',
-          remove_webapp_brand: false,
-        },
-      },
-      mutateCurrentWorkspace: vi.fn(),
-      isCurrentWorkspaceManager: false,
-    } as unknown as ReturnType<typeof useAppContext>)
+  // Integration coverage for the root component with the hook mocked at the boundary.
+  describe('Rendering', () => {
+    it('should render the upload controls and preview cards with restore action', () => {
+      renderComponent()

-    const { container } = renderComponent()
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
-    expect(fileInput).toBeDisabled()
-  })
-
-  it('toggles remove brand switch and calls the backend + mutate', async () => {
-    const mutateMock = vi.fn()
-    mockUseAppContext.mockReturnValue({
-      currentWorkspace: {
-        custom_config: {
-          replace_webapp_logo: '',
-          remove_webapp_brand: false,
-        },
-      },
-      mutateCurrentWorkspace: mutateMock,
-      isCurrentWorkspaceManager: true,
-    } as unknown as ReturnType<typeof useAppContext>)
-
-    renderComponent()
-    const switchInput = screen.getByRole('switch')
-    fireEvent.click(switchInput)
-
-    await waitFor(() => expect(mockUpdateCurrentWorkspace).toHaveBeenCalledWith({
-      url: '/workspaces/custom-config',
-      body: { remove_webapp_brand: true },
-    }))
-    await waitFor(() => expect(mutateMock).toHaveBeenCalled())
-  })
-
-  it('shows cancel/apply buttons after successful upload and cancels properly', async () => {
-    mockImageUpload.mockImplementation(({ onProgressCallback, onSuccessCallback }) => {
-      onProgressCallback(50)
-      onSuccessCallback({ id: 'new-logo' })
+      expect(screen.getByText('custom.webapp.removeBrand')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'custom.restore' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'custom.change' })).toBeInTheDocument()
+      expect(screen.getByText('Chatflow App')).toBeInTheDocument()
+      expect(screen.getByText('Workflow App')).toBeInTheDocument()
    })

-    const { container } = renderComponent()
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
-    const testFile = new File(['content'], 'logo.png', { type: 'image/png' })
-    fireEvent.change(fileInput, { target: { files: [testFile] } })
+    it('should hide the restore action when uploads are disabled or no logo is configured', () => {
+      renderComponent({
+        uploadDisabled: true,
+        webappLogo: '',
+      })

-    await waitFor(() => expect(mockImageUpload).toHaveBeenCalled())
-    await waitFor(() => screen.getByRole('button', { name: 'custom.apply' }))
+      expect(screen.queryByRole('button', { name: 'custom.restore' })).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'custom.upload' })).toBeDisabled()
+    })

-    const cancelButton = screen.getByRole('button', { name: 'common.operation.cancel' })
-    fireEvent.click(cancelButton)
+    it('should show the uploading button and failure message when upload state requires it', () => {
+      renderComponent({
+        uploading: true,
+        uploadProgress: -1,
+      })

-    await waitFor(() => expect(screen.queryByRole('button', { name: 'custom.apply' })).toBeNull())
+      expect(screen.getByRole('button', { name: 'custom.uploading' })).toBeDisabled()
+      expect(screen.getByText('custom.uploadedFail')).toBeInTheDocument()
+    })
+
+    it('should show apply and cancel actions when a new file is ready', () => {
+      renderComponent({
+        fileId: 'new-logo',
+      })
+
+      expect(screen.getByRole('button', { name: 'custom.apply' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+    })
+
+    it('should disable the switch when sandbox restrictions are active', () => {
+      renderComponent({
+        isSandbox: true,
+      })
+
+      expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true')
+    })
+
+    it('should default the switch to unchecked when brand removal state is missing', () => {
+      const { container } = renderComponent({
+        webappBrandRemoved: undefined,
+      })
+
+      expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false')
+      expect(container.querySelector('.opacity-30')).not.toBeInTheDocument()
+    })
+
+    it('should dim the upload row when brand removal is enabled', () => {
+      const { container } = renderComponent({
+        webappBrandRemoved: true,
+        uploadDisabled: true,
+      })
+
+      expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true')
+      expect(container.querySelector('.opacity-30')).toBeInTheDocument()
+    })
+  })
+
+  // User interactions delegated to the hook callbacks.
+  describe('Interactions', () => {
+    it('should delegate switch changes to the hook handler', () => {
+      const { hookState } = renderComponent()
+
+      fireEvent.click(screen.getByRole('switch'))
+
+      expect(hookState.handleSwitch).toHaveBeenCalledWith(true)
+    })
+
+    it('should delegate file input changes and reset the native input value on click', () => {
+      const { container, hookState } = renderComponent()
+      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
+      const file = new File(['logo'], 'logo.png', { type: 'image/png' })
+
+      Object.defineProperty(fileInput, 'value', {
+        configurable: true,
+        value: 'stale-selection',
+        writable: true,
+      })
+
+      fireEvent.click(fileInput)
+      fireEvent.change(fileInput, {
+        target: { files: [file] },
+      })
+
+      expect(fileInput.value).toBe('')
+      expect(hookState.handleChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('should delegate restore, cancel, and apply actions to the hook handlers', () => {
+      const { hookState } = renderComponent({
+        fileId: 'new-logo',
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: 'custom.restore' }))
+      fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+      fireEvent.click(screen.getByRole('button', { name: 'custom.apply' }))
+
+      expect(hookState.handleRestore).toHaveBeenCalledTimes(1)
+      expect(hookState.handleCancel).toHaveBeenCalledTimes(1)
+      expect(hookState.handleApply).toHaveBeenCalledTimes(1)
+    })
  })
 })
--- a/web/app/components/custom/custom-web-app-brand/components/tests/chat-preview-card.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/tests/chat-preview-card.spec.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ChatPreviewCard from '../chat-preview-card'
+
+describe('ChatPreviewCard', () => {
+  it('should render the chat preview with the powered-by footer', () => {
+    render(
+      <ChatPreviewCard
+        imgKey={8}
+        webappLogo="https://example.com/custom-logo.png"
+      />,
+    )
+
+    expect(screen.getByText('Chatflow App')).toBeInTheDocument()
+    expect(screen.getByText('Hello! How can I assist you today?')).toBeInTheDocument()
+    expect(screen.getByText('Talk to Dify')).toBeInTheDocument()
+    expect(screen.getByText('POWERED BY')).toBeInTheDocument()
+  })
+
+  it('should hide chat branding footer when brand removal is enabled', () => {
+    render(
+      <ChatPreviewCard
+        imgKey={8}
+        webappBrandRemoved
+        webappLogo="https://example.com/custom-logo.png"
+      />,
+    )
+
+    expect(screen.queryByText('POWERED BY')).not.toBeInTheDocument()
+  })
+})
--- a/web/app/components/custom/custom-web-app-brand/components/tests/powered-by-brand.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/tests/powered-by-brand.spec.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import PoweredByBrand from '../powered-by-brand'
+
+describe('PoweredByBrand', () => {
+  it('should render the workspace logo when available', () => {
+    render(
+      <PoweredByBrand
+        imgKey={1}
+        workspaceLogo="https://example.com/workspace-logo.png"
+        webappLogo="https://example.com/custom-logo.png"
+      />,
+    )
+
+    expect(screen.getByText('POWERED BY')).toBeInTheDocument()
+    expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/workspace-logo.png')
+  })
+
+  it('should fall back to the custom web app logo when workspace branding is unavailable', () => {
+    render(
+      <PoweredByBrand
+        imgKey={42}
+        webappLogo="https://example.com/custom-logo.png"
+      />,
+    )
+
+    expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/custom-logo.png?hash=42')
+  })
+
+  it('should fall back to the Dify logo when no custom branding exists', () => {
+    render(<PoweredByBrand imgKey={7} />)
+
+    expect(screen.getByAltText('Dify logo')).toBeInTheDocument()
+  })
+
+  it('should render nothing when branding is removed', () => {
+    const { container } = render(<PoweredByBrand imgKey={7} webappBrandRemoved />)
+
+    expect(container).toBeEmptyDOMElement()
+  })
+})
--- a/web/app/components/custom/custom-web-app-brand/components/tests/workflow-preview-card.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/tests/workflow-preview-card.spec.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import WorkflowPreviewCard from '../workflow-preview-card'
+
+describe('WorkflowPreviewCard', () => {
+  it('should render the workflow preview with execute action and branding footer', () => {
+    render(
+      <WorkflowPreviewCard
+        imgKey={9}
+        workspaceLogo="https://example.com/workspace-logo.png"
+      />,
+    )
+
+    expect(screen.getByText('Workflow App')).toBeInTheDocument()
+    expect(screen.getByText('RUN ONCE')).toBeInTheDocument()
+    expect(screen.getByText('RUN BATCH')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Execute/i })).toBeDisabled()
+    expect(screen.getByAltText('logo')).toHaveAttribute('src', 'https://example.com/workspace-logo.png')
+  })
+
+  it('should hide workflow branding footer when brand removal is enabled', () => {
+    render(
+      <WorkflowPreviewCard
+        imgKey={9}
+        webappBrandRemoved
+        workspaceLogo="https://example.com/workspace-logo.png"
+      />,
+    )
+
+    expect(screen.queryByText('POWERED BY')).not.toBeInTheDocument()
+  })
+})
--- a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
@@ -0,0 +1,78 @@
+import Button from '@/app/components/base/button'
+import { cn } from '@/utils/classnames'
+import PoweredByBrand from './powered-by-brand'
+
+type ChatPreviewCardProps = {
+  webappBrandRemoved?: boolean
+  workspaceLogo?: string
+  webappLogo?: string
+  imgKey: number
+}
+
+const ChatPreviewCard = ({
+  webappBrandRemoved,
+  workspaceLogo,
+  webappLogo,
+  imgKey,
+}: ChatPreviewCardProps) => {
+  return (
+    <div className="flex h-[320px] grow basis-1/2 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
+      <div className="flex h-full w-[232px] shrink-0 flex-col p-1 pr-0">
+        <div className="flex items-center gap-3 p-3 pr-2">
+          <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
+            <span className="i-custom-vender-solid-communication-bubble-text-mod h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+          </div>
+          <div className="grow text-text-secondary system-md-semibold">Chatflow App</div>
+          <div className="p-1.5">
+            <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
+          </div>
+        </div>
+        <div className="shrink-0 px-4 py-3">
+          <Button variant="secondary-accent" className="w-full justify-center">
+            <span className="i-ri-edit-box-line mr-1 h-4 w-4" />
+            <div className="p-1 opacity-20">
+              <div className="h-2 w-[94px] rounded-sm bg-text-accent-light-mode-only"></div>
+            </div>
+          </Button>
+        </div>
+        <div className="grow px-3 pt-5">
+          <div className="flex h-8 items-center px-3 py-1">
+            <div className="h-2 w-14 rounded-sm bg-text-quaternary opacity-20"></div>
+          </div>
+          <div className="flex h-8 items-center px-3 py-1">
+            <div className="h-2 w-[168px] rounded-sm bg-text-quaternary opacity-20"></div>
+          </div>
+          <div className="flex h-8 items-center px-3 py-1">
+            <div className="h-2 w-[128px] rounded-sm bg-text-quaternary opacity-20"></div>
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center justify-between p-3">
+          <div className="p-1.5">
+            <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+          </div>
+          <div className="flex items-center gap-1.5">
+            <PoweredByBrand
+              webappBrandRemoved={webappBrandRemoved}
+              workspaceLogo={workspaceLogo}
+              webappLogo={webappLogo}
+              imgKey={imgKey}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex w-[138px] grow flex-col justify-between p-2 pr-0">
+        <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pb-4 pl-[22px] pt-16">
+          <div className="w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
+            <div className="mb-1 text-text-primary body-md-regular">Hello! How can I assist you today?</div>
+            <Button size="small">
+              <div className="h-2 w-[144px] rounded-sm bg-text-quaternary opacity-20"></div>
+            </Button>
+          </div>
+          <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-sm body-lg-regular">Talk to Dify</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChatPreviewCard
--- a/web/app/components/custom/custom-web-app-brand/components/powered-by-brand.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/powered-by-brand.tsx
@@ -0,0 +1,31 @@
+import DifyLogo from '@/app/components/base/logo/dify-logo'
+
+type PoweredByBrandProps = {
+  webappBrandRemoved?: boolean
+  workspaceLogo?: string
+  webappLogo?: string
+  imgKey: number
+}
+
+const PoweredByBrand = ({
+  webappBrandRemoved,
+  workspaceLogo,
+  webappLogo,
+  imgKey,
+}: PoweredByBrandProps) => {
+  if (webappBrandRemoved)
+    return null
+
+  const previewLogo = workspaceLogo || (webappLogo ? `${webappLogo}?hash=${imgKey}` : '')
+
+  return (
+    <>
+      <div className="text-text-tertiary system-2xs-medium-uppercase">POWERED BY</div>
+      {previewLogo
+        ? <img src={previewLogo} alt="logo" className="block h-5 w-auto" />
+        : <DifyLogo size="small" />}
+    </>
+  )
+}
+
+export default PoweredByBrand
--- a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
@@ -0,0 +1,64 @@
+import Button from '@/app/components/base/button'
+import { cn } from '@/utils/classnames'
+import PoweredByBrand from './powered-by-brand'
+
+type WorkflowPreviewCardProps = {
+  webappBrandRemoved?: boolean
+  workspaceLogo?: string
+  webappLogo?: string
+  imgKey: number
+}
+
+const WorkflowPreviewCard = ({
+  webappBrandRemoved,
+  workspaceLogo,
+  webappLogo,
+  imgKey,
+}: WorkflowPreviewCardProps) => {
+  return (
+    <div className="flex h-[320px] grow basis-1/2 flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
+      <div className="w-full border-b-[0.5px] border-divider-subtle p-4 pb-0">
+        <div className="mb-2 flex items-center gap-3">
+          <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
+            <span className="i-ri-exchange-2-fill h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+          </div>
+          <div className="grow text-text-secondary system-md-semibold">Workflow App</div>
+          <div className="p-1.5">
+            <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary system-md-semibold-uppercase">RUN ONCE</div>
+          <div className="flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary system-md-semibold-uppercase">RUN BATCH</div>
+        </div>
+      </div>
+      <div className="grow bg-components-panel-bg">
+        <div className="p-4 pb-1">
+          <div className="mb-1 py-2">
+            <div className="h-2 w-20 rounded-sm bg-text-quaternary opacity-20"></div>
+          </div>
+          <div className="h-16 w-full rounded-lg bg-components-input-bg-normal"></div>
+        </div>
+        <div className="flex items-center justify-between px-4 py-3">
+          <Button size="small">
+            <div className="h-2 w-10 rounded-sm bg-text-quaternary opacity-20"></div>
+          </Button>
+          <Button variant="primary" size="small" disabled>
+            <span className="i-ri-play-large-line mr-1 h-4 w-4" />
+            <span>Execute</span>
+          </Button>
+        </div>
+      </div>
+      <div className="flex h-12 shrink-0 items-center gap-1.5 bg-components-panel-bg p-4 pt-3">
+        <PoweredByBrand
+          webappBrandRemoved={webappBrandRemoved}
+          workspaceLogo={workspaceLogo}
+          webappLogo={webappLogo}
+          imgKey={imgKey}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default WorkflowPreviewCard
--- a/web/app/components/custom/custom-web-app-brand/hooks/tests/use-web-app-brand.spec.tsx
+++ b/web/app/components/custom/custom-web-app-brand/hooks/tests/use-web-app-brand.spec.tsx
@@ -0,0 +1,385 @@
+import type { ChangeEvent } from 'react'
+import type { AppContextValue } from '@/context/app-context'
+import type { SystemFeatures } from '@/types/feature'
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createMockProviderContextValue } from '@/__mocks__/provider-context'
+import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
+import { useToastContext } from '@/app/components/base/toast/context'
+import { defaultPlan } from '@/app/components/billing/config'
+import { Plan } from '@/app/components/billing/type'
+import {
+  initialLangGeniusVersionInfo,
+  initialWorkspaceInfo,
+  useAppContext,
+  userProfilePlaceholder,
+} from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useProviderContext } from '@/context/provider-context'
+import { updateCurrentWorkspace } from '@/service/common'
+import { defaultSystemFeatures } from '@/types/feature'
+import useWebAppBrand from '../use-web-app-brand'
+
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: vi.fn(),
+}))
+vi.mock('@/service/common', () => ({
+  updateCurrentWorkspace: vi.fn(),
+}))
+vi.mock('@/context/app-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/app-context')>()
+  return {
+    ...actual,
+    useAppContext: vi.fn(),
+  }
+})
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: vi.fn(),
+}))
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: vi.fn(),
+}))
+vi.mock('@/app/components/base/image-uploader/utils', () => ({
+  imageUpload: vi.fn(),
+  getImageUploadErrorMessage: vi.fn(),
+}))
+
+const mockNotify = vi.fn()
+const mockUseToastContext = vi.mocked(useToastContext)
+const mockUpdateCurrentWorkspace = vi.mocked(updateCurrentWorkspace)
+const mockUseAppContext = vi.mocked(useAppContext)
+const mockUseProviderContext = vi.mocked(useProviderContext)
+const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
+const mockImageUpload = vi.mocked(imageUpload)
+const mockGetImageUploadErrorMessage = vi.mocked(getImageUploadErrorMessage)
+
+const createProviderContext = ({
+  enableBilling = false,
+  planType = Plan.professional,
+}: {
+  enableBilling?: boolean
+  planType?: Plan
+} = {}) => {
+  return createMockProviderContextValue({
+    enableBilling,
+    plan: {
+      ...defaultPlan,
+      type: planType,
+    },
+  })
+}
+
+const createSystemFeatures = (brandingOverrides: Partial<SystemFeatures['branding']> = {}): SystemFeatures => ({
+  ...defaultSystemFeatures,
+  branding: {
+    ...defaultSystemFeatures.branding,
+    enabled: true,
+    workspace_logo: 'https://example.com/workspace-logo.png',
+    ...brandingOverrides,
+  },
+})
+
+const createAppContextValue = (overrides: Partial<AppContextValue> = {}): AppContextValue => {
+  const { currentWorkspace: currentWorkspaceOverride, ...restOverrides } = overrides
+  const workspaceOverrides: Partial<AppContextValue['currentWorkspace']> = currentWorkspaceOverride ?? {}
+  const currentWorkspace = {
+    ...initialWorkspaceInfo,
+    ...workspaceOverrides,
+    custom_config: {
+      replace_webapp_logo: 'https://example.com/replace.png',
+      remove_webapp_brand: false,
+      ...workspaceOverrides.custom_config,
+    },
+  }
+
+  return {
+    userProfile: userProfilePlaceholder,
+    mutateUserProfile: vi.fn(),
+    isCurrentWorkspaceManager: true,
+    isCurrentWorkspaceOwner: false,
+    isCurrentWorkspaceEditor: false,
+    isCurrentWorkspaceDatasetOperator: false,
+    mutateCurrentWorkspace: vi.fn(),
+    langGeniusVersionInfo: initialLangGeniusVersionInfo,
+    useSelector: vi.fn() as unknown as AppContextValue['useSelector'],
+    isLoadingCurrentWorkspace: false,
+    isValidatingCurrentWorkspace: false,
+    ...restOverrides,
+    currentWorkspace,
+  }
+}
+
+describe('useWebAppBrand', () => {
+  let appContextValue: AppContextValue
+  let systemFeatures: SystemFeatures
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    appContextValue = createAppContextValue()
+    systemFeatures = createSystemFeatures()
+
+    mockUseToastContext.mockReturnValue({ notify: mockNotify } as unknown as ReturnType<typeof useToastContext>)
+    mockUpdateCurrentWorkspace.mockResolvedValue(appContextValue.currentWorkspace)
+    mockUseAppContext.mockImplementation(() => appContextValue)
+    mockUseProviderContext.mockReturnValue(createProviderContext())
+    mockUseGlobalPublicStore.mockImplementation(selector => selector({
+      systemFeatures,
+      setSystemFeatures: vi.fn(),
+    }))
+    mockGetImageUploadErrorMessage.mockReturnValue('upload error')
+  })
+
+  // Derived state from context and store inputs.
+  describe('derived state', () => {
+    it('should expose workspace branding and upload availability by default', () => {
+      const { result } = renderHook(() => useWebAppBrand())
+
+      expect(result.current.webappLogo).toBe('https://example.com/replace.png')
+      expect(result.current.workspaceLogo).toBe('https://example.com/workspace-logo.png')
+      expect(result.current.uploadDisabled).toBe(false)
+      expect(result.current.uploading).toBe(false)
+    })
+
+    it('should disable uploads in sandbox workspaces and when branding is removed', () => {
+      mockUseProviderContext.mockReturnValue(createProviderContext({
+        enableBilling: true,
+        planType: Plan.sandbox,
+      }))
+      appContextValue = createAppContextValue({
+        currentWorkspace: {
+          ...initialWorkspaceInfo,
+          custom_config: {
+            replace_webapp_logo: 'https://example.com/replace.png',
+            remove_webapp_brand: true,
+          },
+        },
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      expect(result.current.isSandbox).toBe(true)
+      expect(result.current.webappBrandRemoved).toBe(true)
+      expect(result.current.uploadDisabled).toBe(true)
+    })
+
+    it('should fall back to an empty workspace logo when branding is disabled', () => {
+      systemFeatures = createSystemFeatures({
+        enabled: false,
+        workspace_logo: '',
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      expect(result.current.workspaceLogo).toBe('')
+    })
+
+    it('should fall back to an empty custom logo when custom config is missing', () => {
+      appContextValue = {
+        ...createAppContextValue(),
+        currentWorkspace: {
+          ...initialWorkspaceInfo,
+        },
+      }
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      expect(result.current.webappLogo).toBe('')
+    })
+  })
+
+  // State transitions driven by user actions.
+  describe('actions', () => {
+    it('should ignore empty file selections', () => {
+      const { result } = renderHook(() => useWebAppBrand())
+
+      act(() => {
+        result.current.handleChange({
+          target: { files: [] },
+        } as unknown as ChangeEvent<HTMLInputElement>)
+      })
+
+      expect(mockImageUpload).not.toHaveBeenCalled()
+    })
+
+    it('should reject oversized files before upload starts', () => {
+      const { result } = renderHook(() => useWebAppBrand())
+      const oversizedFile = new File(['logo'], 'logo.png', { type: 'image/png' })
+
+      Object.defineProperty(oversizedFile, 'size', {
+        configurable: true,
+        value: 5 * 1024 * 1024 + 1,
+      })
+
+      act(() => {
+        result.current.handleChange({
+          target: { files: [oversizedFile] },
+        } as unknown as ChangeEvent<HTMLInputElement>)
+      })
+
+      expect(mockImageUpload).not.toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'common.imageUploader.uploadFromComputerLimit:{"size":5}',
+      })
+    })
+
+    it('should update upload state after a successful file upload', () => {
+      mockImageUpload.mockImplementation(({ onProgressCallback, onSuccessCallback }) => {
+        onProgressCallback(100)
+        onSuccessCallback({ id: 'new-logo' })
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      act(() => {
+        result.current.handleChange({
+          target: { files: [new File(['logo'], 'logo.png', { type: 'image/png' })] },
+        } as unknown as ChangeEvent<HTMLInputElement>)
+      })
+
+      expect(result.current.fileId).toBe('new-logo')
+      expect(result.current.uploadProgress).toBe(100)
+      expect(result.current.uploading).toBe(false)
+    })
+
+    it('should expose the uploading state while progress is incomplete', () => {
+      mockImageUpload.mockImplementation(({ onProgressCallback }) => {
+        onProgressCallback(50)
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      act(() => {
+        result.current.handleChange({
+          target: { files: [new File(['logo'], 'logo.png', { type: 'image/png' })] },
+        } as unknown as ChangeEvent<HTMLInputElement>)
+      })
+
+      expect(result.current.uploadProgress).toBe(50)
+      expect(result.current.uploading).toBe(true)
+    })
+
+    it('should surface upload errors and set the failure state', () => {
+      mockImageUpload.mockImplementation(({ onErrorCallback }) => {
+        onErrorCallback({ response: { code: 'forbidden' } })
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      act(() => {
+        result.current.handleChange({
+          target: { files: [new File(['logo'], 'logo.png', { type: 'image/png' })] },
+        } as unknown as ChangeEvent<HTMLInputElement>)
+      })
+
+      expect(mockGetImageUploadErrorMessage).toHaveBeenCalled()
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'upload error',
+      })
+      expect(result.current.uploadProgress).toBe(-1)
+    })
+
+    it('should persist the selected logo and reset transient state on apply', async () => {
+      const mutateCurrentWorkspace = vi.fn()
+      appContextValue = createAppContextValue({
+        mutateCurrentWorkspace,
+      })
+      mockImageUpload.mockImplementation(({ onSuccessCallback }) => {
+        onSuccessCallback({ id: 'new-logo' })
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      act(() => {
+        result.current.handleChange({
+          target: { files: [new File(['logo'], 'logo.png', { type: 'image/png' })] },
+        } as unknown as ChangeEvent<HTMLInputElement>)
+      })
+
+      const previousImgKey = result.current.imgKey
+      const dateNowSpy = vi.spyOn(Date, 'now').mockReturnValue(previousImgKey + 1)
+
+      await act(async () => {
+        await result.current.handleApply()
+      })
+
+      expect(mockUpdateCurrentWorkspace).toHaveBeenCalledWith({
+        url: '/workspaces/custom-config',
+        body: {
+          remove_webapp_brand: false,
+          replace_webapp_logo: 'new-logo',
+        },
+      })
+      expect(mutateCurrentWorkspace).toHaveBeenCalledTimes(1)
+      expect(result.current.fileId).toBe('')
+      expect(result.current.imgKey).toBe(previousImgKey + 1)
+      dateNowSpy.mockRestore()
+    })
+
+    it('should restore the default branding configuration', async () => {
+      const mutateCurrentWorkspace = vi.fn()
+      appContextValue = createAppContextValue({
+        mutateCurrentWorkspace,
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      await act(async () => {
+        await result.current.handleRestore()
+      })
+
+      expect(mockUpdateCurrentWorkspace).toHaveBeenCalledWith({
+        url: '/workspaces/custom-config',
+        body: {
+          remove_webapp_brand: false,
+          replace_webapp_logo: '',
+        },
+      })
+      expect(mutateCurrentWorkspace).toHaveBeenCalledTimes(1)
+    })
+
+    it('should persist brand removal changes', async () => {
+      const mutateCurrentWorkspace = vi.fn()
+      appContextValue = createAppContextValue({
+        mutateCurrentWorkspace,
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      await act(async () => {
+        await result.current.handleSwitch(true)
+      })
+
+      expect(mockUpdateCurrentWorkspace).toHaveBeenCalledWith({
+        url: '/workspaces/custom-config',
+        body: {
+          remove_webapp_brand: true,
+        },
+      })
+      expect(mutateCurrentWorkspace).toHaveBeenCalledTimes(1)
+    })
+
+    it('should clear temporary upload state on cancel', () => {
+      mockImageUpload.mockImplementation(({ onSuccessCallback }) => {
+        onSuccessCallback({ id: 'new-logo' })
+      })
+
+      const { result } = renderHook(() => useWebAppBrand())
+
+      act(() => {
+        result.current.handleChange({
+          target: { files: [new File(['logo'], 'logo.png', { type: 'image/png' })] },
+        } as unknown as ChangeEvent<HTMLInputElement>)
+      })
+
+      act(() => {
+        result.current.handleCancel()
+      })
+
+      expect(result.current.fileId).toBe('')
+      expect(result.current.uploadProgress).toBe(0)
+    })
+  })
+})
--- a/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
+++ b/web/app/components/custom/custom-web-app-brand/hooks/use-web-app-brand.ts
@@ -0,0 +1,121 @@
+import type { ChangeEvent } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
+import { useToastContext } from '@/app/components/base/toast/context'
+import { Plan } from '@/app/components/billing/type'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useProviderContext } from '@/context/provider-context'
+import { updateCurrentWorkspace } from '@/service/common'
+
+const MAX_LOGO_FILE_SIZE = 5 * 1024 * 1024
+const CUSTOM_CONFIG_URL = '/workspaces/custom-config'
+const WEB_APP_LOGO_UPLOAD_URL = '/workspaces/custom-config/webapp-logo/upload'
+
+const useWebAppBrand = () => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const { plan, enableBilling } = useProviderContext()
+  const {
+    currentWorkspace,
+    mutateCurrentWorkspace,
+    isCurrentWorkspaceManager,
+  } = useAppContext()
+  const [fileId, setFileId] = useState('')
+  const [imgKey, setImgKey] = useState(() => Date.now())
+  const [uploadProgress, setUploadProgress] = useState(0)
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+
+  const isSandbox = enableBilling && plan.type === Plan.sandbox
+  const uploading = uploadProgress > 0 && uploadProgress < 100
+  const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
+  const webappBrandRemoved = currentWorkspace.custom_config?.remove_webapp_brand
+  const uploadDisabled = isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager
+  const workspaceLogo = systemFeatures.branding.enabled ? systemFeatures.branding.workspace_logo : ''
+
+  const persistWorkspaceBrand = async (body: Record<string, unknown>) => {
+    await updateCurrentWorkspace({
+      url: CUSTOM_CONFIG_URL,
+      body,
+    })
+    mutateCurrentWorkspace()
+  }
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+
+    if (!file)
+      return
+
+    if (file.size > MAX_LOGO_FILE_SIZE) {
+      notify({ type: 'error', message: t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: 5 }) })
+      return
+    }
+
+    imageUpload({
+      file,
+      onProgressCallback: setUploadProgress,
+      onSuccessCallback: (res) => {
+        setUploadProgress(100)
+        setFileId(res.id)
+      },
+      onErrorCallback: (error) => {
+        const errorMessage = getImageUploadErrorMessage(
+          error,
+          t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }),
+          t,
+        )
+        notify({ type: 'error', message: errorMessage })
+        setUploadProgress(-1)
+      },
+    }, false, WEB_APP_LOGO_UPLOAD_URL)
+  }
+
+  const handleApply = async () => {
+    await persistWorkspaceBrand({
+      remove_webapp_brand: webappBrandRemoved,
+      replace_webapp_logo: fileId,
+    })
+    setFileId('')
+    setImgKey(Date.now())
+  }
+
+  const handleRestore = async () => {
+    await persistWorkspaceBrand({
+      remove_webapp_brand: false,
+      replace_webapp_logo: '',
+    })
+  }
+
+  const handleSwitch = async (checked: boolean) => {
+    await persistWorkspaceBrand({
+      remove_webapp_brand: checked,
+    })
+  }
+
+  const handleCancel = () => {
+    setFileId('')
+    setUploadProgress(0)
+  }
+
+  return {
+    fileId,
+    imgKey,
+    uploadProgress,
+    uploading,
+    webappLogo,
+    webappBrandRemoved,
+    uploadDisabled,
+    workspaceLogo,
+    isSandbox,
+    isCurrentWorkspaceManager,
+    handleApply,
+    handleCancel,
+    handleChange,
+    handleRestore,
+    handleSwitch,
+  }
+}
+
+export default useWebAppBrand
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -1,118 +1,33 @@
-import type { ChangeEvent } from 'react'
-import {
-  RiEditBoxLine,
-  RiEqualizer2Line,
-  RiExchange2Fill,
-  RiImageAddLine,
-  RiLayoutLeft2Line,
-  RiLoader2Line,
-  RiPlayLargeLine,
-} from '@remixicon/react'
-import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
-import { BubbleTextMod } from '@/app/components/base/icons/src/vender/solid/communication'
-import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
-import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Switch from '@/app/components/base/switch'
-import { useToastContext } from '@/app/components/base/toast/context'
-import { Plan } from '@/app/components/billing/type'
-import { useAppContext } from '@/context/app-context'
-import { useGlobalPublicStore } from '@/context/global-public-context'
-import { useProviderContext } from '@/context/provider-context'
-import {
-  updateCurrentWorkspace,
-} from '@/service/common'
 import { cn } from '@/utils/classnames'
+import ChatPreviewCard from './components/chat-preview-card'
+import WorkflowPreviewCard from './components/workflow-preview-card'
+import useWebAppBrand from './hooks/use-web-app-brand'

 const ALLOW_FILE_EXTENSIONS = ['svg', 'png']

 const CustomWebAppBrand = () => {
  const { t } = useTranslation()
-  const { notify } = useToastContext()
-  const { plan, enableBilling } = useProviderContext()
  const {
-    currentWorkspace,
-    mutateCurrentWorkspace,
+    fileId,
+    imgKey,
+    uploadProgress,
+    uploading,
+    webappLogo,
+    webappBrandRemoved,
+    uploadDisabled,
+    workspaceLogo,
    isCurrentWorkspaceManager,
-  } = useAppContext()
-  const [fileId, setFileId] = useState('')
-  const [imgKey, setImgKey] = useState(() => Date.now())
-  const [uploadProgress, setUploadProgress] = useState(0)
-  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
-  const isSandbox = enableBilling && plan.type === Plan.sandbox
-  const uploading = uploadProgress > 0 && uploadProgress < 100
-  const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
-  const webappBrandRemoved = currentWorkspace.custom_config?.remove_webapp_brand
-  const uploadDisabled = isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-
-    if (!file)
-      return
-
-    if (file.size > 5 * 1024 * 1024) {
-      notify({ type: 'error', message: t('imageUploader.uploadFromComputerLimit', { ns: 'common', size: 5 }) })
-      return
-    }
-
-    imageUpload({
-      file,
-      onProgressCallback: (progress) => {
-        setUploadProgress(progress)
-      },
-      onSuccessCallback: (res) => {
-        setUploadProgress(100)
-        setFileId(res.id)
-      },
-      onErrorCallback: (error?: any) => {
-        const errorMessage = getImageUploadErrorMessage(error, t('imageUploader.uploadFromComputerUploadError', { ns: 'common' }), t as any)
-        notify({ type: 'error', message: errorMessage })
-        setUploadProgress(-1)
-      },
-    }, false, '/workspaces/custom-config/webapp-logo/upload')
-  }
-
-  const handleApply = async () => {
-    await updateCurrentWorkspace({
-      url: '/workspaces/custom-config',
-      body: {
-        remove_webapp_brand: webappBrandRemoved,
-        replace_webapp_logo: fileId,
-      },
-    })
-    mutateCurrentWorkspace()
-    setFileId('')
-    setImgKey(Date.now())
-  }
-
-  const handleRestore = async () => {
-    await updateCurrentWorkspace({
-      url: '/workspaces/custom-config',
-      body: {
-        remove_webapp_brand: false,
-        replace_webapp_logo: '',
-      },
-    })
-    mutateCurrentWorkspace()
-  }
-
-  const handleSwitch = async (checked: boolean) => {
-    await updateCurrentWorkspace({
-      url: '/workspaces/custom-config',
-      body: {
-        remove_webapp_brand: checked,
-      },
-    })
-    mutateCurrentWorkspace()
-  }
-
-  const handleCancel = () => {
-    setFileId('')
-    setUploadProgress(0)
-  }
+    isSandbox,
+    handleApply,
+    handleCancel,
+    handleChange,
+    handleRestore,
+    handleSwitch,
+  } = useWebAppBrand()

  return (
    <div className="py-4">
@@ -149,7 +64,7 @@ const CustomWebAppBrand = () => {
                className="relative mr-2"
                disabled={uploadDisabled}
              >
-                <RiImageAddLine className="mr-1 h-4 w-4" />
+                <span className="i-ri-image-add-line mr-1 h-4 w-4" />
                {
                  (webappLogo || fileId)
                    ? t('change', { ns: 'custom' })
@@ -172,7 +87,7 @@ const CustomWebAppBrand = () => {
                className="relative mr-2"
                disabled={true}
              >
-                <RiLoader2Line className="mr-1 h-4 w-4 animate-spin" />
+                <span className="i-ri-loader-2-line mr-1 h-4 w-4 animate-spin" />
                {t('uploading', { ns: 'custom' })}
              </Button>
            )
@@ -208,118 +123,18 @@ const CustomWebAppBrand = () => {
        <Divider bgStyle="gradient" className="grow" />
      </div>
      <div className="relative mb-2 flex items-center gap-3">
-        {/* chat card */}
-        <div className="flex h-[320px] grow basis-1/2 overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
-          <div className="flex h-full w-[232px] shrink-0 flex-col p-1 pr-0">
-            <div className="flex items-center gap-3 p-3 pr-2">
-              <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
-                <BubbleTextMod className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
-              </div>
-              <div className="grow text-text-secondary system-md-semibold">Chatflow App</div>
-              <div className="p-1.5">
-                <RiLayoutLeft2Line className="h-4 w-4 text-text-tertiary" />
-              </div>
-            </div>
-            <div className="shrink-0 px-4 py-3">
-              <Button variant="secondary-accent" className="w-full justify-center">
-                <RiEditBoxLine className="mr-1 h-4 w-4" />
-                <div className="p-1 opacity-20">
-                  <div className="h-2 w-[94px] rounded-sm bg-text-accent-light-mode-only"></div>
-                </div>
-              </Button>
-            </div>
-            <div className="grow px-3 pt-5">
-              <div className="flex h-8 items-center px-3 py-1">
-                <div className="h-2 w-14 rounded-sm bg-text-quaternary opacity-20"></div>
-              </div>
-              <div className="flex h-8 items-center px-3 py-1">
-                <div className="h-2 w-[168px] rounded-sm bg-text-quaternary opacity-20"></div>
-              </div>
-              <div className="flex h-8 items-center px-3 py-1">
-                <div className="h-2 w-[128px] rounded-sm bg-text-quaternary opacity-20"></div>
-              </div>
-            </div>
-            <div className="flex shrink-0 items-center justify-between p-3">
-              <div className="p-1.5">
-                <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
-              </div>
-              <div className="flex items-center gap-1.5">
-                {!webappBrandRemoved && (
-                  <>
-                    <div className="text-text-tertiary system-2xs-medium-uppercase">POWERED BY</div>
-                    {
-                      systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-                        ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
-                        : webappLogo
-                          ? <img src={`${webappLogo}?hash=${imgKey}`} alt="logo" className="block h-5 w-auto" />
-                          : <DifyLogo size="small" />
-                    }
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-          <div className="flex w-[138px] grow flex-col justify-between p-2 pr-0">
-            <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pb-4 pl-[22px] pt-16">
-              <div className="w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
-                <div className="mb-1 text-text-primary body-md-regular">Hello! How can I assist you today?</div>
-                <Button size="small">
-                  <div className="h-2 w-[144px] rounded-sm bg-text-quaternary opacity-20"></div>
-                </Button>
-              </div>
-              <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-sm body-lg-regular">Talk to Dify</div>
-            </div>
-          </div>
-        </div>
-        {/* workflow card */}
-        <div className="flex h-[320px] grow basis-1/2 flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border-subtle bg-background-default-burn">
-          <div className="w-full border-b-[0.5px] border-divider-subtle p-4 pb-0">
-            <div className="mb-2 flex items-center gap-3">
-              <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
-                <RiExchange2Fill className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
-              </div>
-              <div className="grow text-text-secondary system-md-semibold">Workflow App</div>
-              <div className="p-1.5">
-                <RiLayoutLeft2Line className="h-4 w-4 text-text-tertiary" />
-              </div>
-            </div>
-            <div className="flex items-center gap-4">
-              <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary system-md-semibold-uppercase">RUN ONCE</div>
-              <div className="flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary system-md-semibold-uppercase">RUN BATCH</div>
-            </div>
-          </div>
-          <div className="grow bg-components-panel-bg">
-            <div className="p-4 pb-1">
-              <div className="mb-1 py-2">
-                <div className="h-2 w-20 rounded-sm bg-text-quaternary opacity-20"></div>
-              </div>
-              <div className="h-16 w-full rounded-lg bg-components-input-bg-normal"></div>
-            </div>
-            <div className="flex items-center justify-between px-4 py-3">
-              <Button size="small">
-                <div className="h-2 w-10 rounded-sm bg-text-quaternary opacity-20"></div>
-              </Button>
-              <Button variant="primary" size="small" disabled>
-                <RiPlayLargeLine className="mr-1 h-4 w-4" />
-                <span>Execute</span>
-              </Button>
-            </div>
-          </div>
-          <div className="flex h-12 shrink-0 items-center gap-1.5 bg-components-panel-bg p-4 pt-3">
-            {!webappBrandRemoved && (
-              <>
-                <div className="text-text-tertiary system-2xs-medium-uppercase">POWERED BY</div>
-                {
-                  systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-                    ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
-                    : webappLogo
-                      ? <img src={`${webappLogo}?hash=${imgKey}`} alt="logo" className="block h-5 w-auto" />
-                      : <DifyLogo size="small" />
-                }
-              </>
-            )}
-          </div>
-        </div>
+        <ChatPreviewCard
+          webappBrandRemoved={webappBrandRemoved}
+          workspaceLogo={workspaceLogo}
+          webappLogo={webappLogo}
+          imgKey={imgKey}
+        />
+        <WorkflowPreviewCard
+          webappBrandRemoved={webappBrandRemoved}
+          workspaceLogo={workspaceLogo}
+          webappLogo={webappLogo}
+          imgKey={imgKey}
+        />
      </div>
    </div>
  )
--- a/web/app/components/datasets/create/website/firecrawl/tests/index.spec.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/tests/index.spec.tsx
@@ -1,5 +1,5 @@
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

@@ -55,21 +55,6 @@ const createMockCrawlResultItem = (overrides: Partial<CrawlResultItem> = {}): Cr
  ...overrides,
 })

-const createDeferred = <T,>() => {
-  let resolve!: (value: T | PromiseLike<T>) => void
-  let reject!: (reason?: unknown) => void
-  const promise = new Promise<T>((res, rej) => {
-    resolve = res
-    reject = rej
-  })
-
-  return {
-    promise,
-    resolve,
-    reject,
-  }
-}
-
 // FireCrawl Component Tests

 describe('FireCrawl', () => {
@@ -232,7 +217,7 @@ describe('FireCrawl', () => {
      await user.click(runButton)

      await waitFor(() => {
-        expect(mockOnCheckedCrawlResultChange).toHaveBeenCalledWith([])
+        expect(mockCreateFirecrawlTask).toHaveBeenCalled()
      })
    })

@@ -256,7 +241,7 @@ describe('FireCrawl', () => {
      await user.click(runButton)

      await waitFor(() => {
-        expect(mockOnCheckedCrawlResultChange).toHaveBeenCalledWith([])
+        expect(mockCreateFirecrawlTask).toHaveBeenCalled()
      })
    })
  })
@@ -292,10 +277,6 @@ describe('FireCrawl', () => {
          }),
        })
      })
-
-      await waitFor(() => {
-        expect(mockOnCheckedCrawlResultChange).toHaveBeenCalledWith([])
-      })
    })

    it('should call onJobIdChange with job_id from API response', async () => {
@@ -320,10 +301,6 @@ describe('FireCrawl', () => {
      await waitFor(() => {
        expect(mockOnJobIdChange).toHaveBeenCalledWith('my-job-123')
      })
-
-      await waitFor(() => {
-        expect(mockOnCheckedCrawlResultChange).toHaveBeenCalledWith([])
-      })
    })

    it('should remove empty max_depth from crawlOptions before sending to API', async () => {
@@ -357,23 +334,11 @@ describe('FireCrawl', () => {
          }),
        })
      })
-
-      await waitFor(() => {
-        expect(mockOnCheckedCrawlResultChange).toHaveBeenCalledWith([])
-      })
    })

    it('should show loading state while running', async () => {
      const user = userEvent.setup()
-      const createTaskDeferred = createDeferred<{ job_id: string }>()
-      mockCreateFirecrawlTask.mockImplementation(() => createTaskDeferred.promise)
-      mockCheckFirecrawlTaskStatus.mockResolvedValueOnce({
-        status: 'completed',
-        data: [],
-        total: 0,
-        current: 0,
-        time_consuming: 1,
-      })
+      mockCreateFirecrawlTask.mockImplementation(() => new Promise(() => {})) // Never resolves

      render(<FireCrawl {...defaultProps} />)

@@ -387,14 +352,6 @@ describe('FireCrawl', () => {
      await waitFor(() => {
        expect(runButton).not.toHaveTextContent(/run/i)
      })
-
-      await act(async () => {
-        createTaskDeferred.resolve({ job_id: 'test-job-id' })
-      })
-
-      await waitFor(() => {
-        expect(mockOnCheckedCrawlResultChange).toHaveBeenCalledWith([])
-      })
    })
  })

@@ -699,7 +656,7 @@ describe('FireCrawl', () => {

      await waitFor(() => {
        // Total should be capped to limit (5)
-        expect(mockOnCheckedCrawlResultChange).toHaveBeenCalledWith([])
+        expect(mockCheckFirecrawlTaskStatus).toHaveBeenCalled()
      })
    })
  })
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import * as React from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
@@ -35,22 +35,6 @@ enum Step {
  finished = 'finished',
 }

-type CrawlState = {
-  current: number
-  total: number
-  data: CrawlResultItem[]
-  time_consuming: number | string
-}
-
-type CrawlFinishedResult = {
-  isCancelled?: boolean
-  isError: boolean
-  errorMessage?: string
-  data: Partial<CrawlState> & {
-    data: CrawlResultItem[]
-  }
-}
-
 const FireCrawl: FC<Props> = ({
  onPreview,
  checkedCrawlResult,
@@ -62,16 +46,10 @@ const FireCrawl: FC<Props> = ({
  const { t } = useTranslation()
  const [step, setStep] = useState<Step>(Step.init)
  const [controlFoldOptions, setControlFoldOptions] = useState<number>(0)
-  const isMountedRef = useRef(true)
  useEffect(() => {
    if (step !== Step.init)
      setControlFoldOptions(Date.now())
  }, [step])
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false
-    }
-  }, [])
  const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
  const handleSetting = useCallback(() => {
    setShowAccountSettingModal({
@@ -107,19 +85,16 @@ const FireCrawl: FC<Props> = ({
  const isInit = step === Step.init
  const isCrawlFinished = step === Step.finished
  const isRunning = step === Step.running
-  const [crawlResult, setCrawlResult] = useState<CrawlState | undefined>(undefined)
+  const [crawlResult, setCrawlResult] = useState<{
+    current: number
+    total: number
+    data: CrawlResultItem[]
+    time_consuming: number | string
+  } | undefined>(undefined)
  const [crawlErrorMessage, setCrawlErrorMessage] = useState('')
  const showError = isCrawlFinished && crawlErrorMessage

-  const waitForCrawlFinished = useCallback(async (jobId: string): Promise<CrawlFinishedResult> => {
-    const cancelledResult: CrawlFinishedResult = {
-      isCancelled: true,
-      isError: false,
-      data: {
-        data: [],
-      },
-    }
-
+  const waitForCrawlFinished = useCallback(async (jobId: string) => {
    try {
      const res = await checkFirecrawlTaskStatus(jobId) as any
      if (res.status === 'completed') {
@@ -129,7 +104,7 @@ const FireCrawl: FC<Props> = ({
            ...res,
            total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
          },
-        } satisfies CrawlFinishedResult
+        }
      }
      if (res.status === 'error' || !res.status) {
        // can't get the error message from the firecrawl api
@@ -139,14 +114,12 @@ const FireCrawl: FC<Props> = ({
          data: {
            data: [],
          },
-        } satisfies CrawlFinishedResult
+        }
      }
      res.data = res.data.map((item: any) => ({
        ...item,
        content: item.markdown,
      }))
-      if (!isMountedRef.current)
-        return cancelledResult
      // update the progress
      setCrawlResult({
        ...res,
@@ -154,21 +127,17 @@ const FireCrawl: FC<Props> = ({
      })
      onCheckedCrawlResultChange(res.data || []) // default select the crawl result
      await sleep(2500)
-      if (!isMountedRef.current)
-        return cancelledResult
      return await waitForCrawlFinished(jobId)
    }
    catch (e: any) {
-      if (!isMountedRef.current)
-        return cancelledResult
-      const errorBody = typeof e?.json === 'function' ? await e.json() : undefined
+      const errorBody = await e.json()
      return {
        isError: true,
-        errorMessage: errorBody?.message,
+        errorMessage: errorBody.message,
        data: {
          data: [],
        },
-      } satisfies CrawlFinishedResult
+      }
    }
  }, [crawlOptions.limit, onCheckedCrawlResultChange])

@@ -193,31 +162,24 @@ const FireCrawl: FC<Props> = ({
        url,
        options: passToServerCrawlOptions,
      }) as any
-      if (!isMountedRef.current)
-        return
      const jobId = res.job_id
      onJobIdChange(jobId)
-      const { isCancelled, isError, data, errorMessage } = await waitForCrawlFinished(jobId)
-      if (isCancelled || !isMountedRef.current)
-        return
+      const { isError, data, errorMessage } = await waitForCrawlFinished(jobId)
      if (isError) {
        setCrawlErrorMessage(errorMessage || t(`${I18N_PREFIX}.unknownError`, { ns: 'datasetCreation' }))
      }
      else {
-        setCrawlResult(data as CrawlState)
+        setCrawlResult(data)
        onCheckedCrawlResultChange(data.data || []) // default select the crawl result
        setCrawlErrorMessage('')
      }
    }
    catch (e) {
-      if (!isMountedRef.current)
-        return
      setCrawlErrorMessage(t(`${I18N_PREFIX}.unknownError`, { ns: 'datasetCreation' })!)
      console.log(e)
    }
    finally {
-      if (isMountedRef.current)
-        setStep(Step.finished)
+      setStep(Step.finished)
    }
  }, [checkValid, crawlOptions, onJobIdChange, t, waitForCrawlFinished, onCheckedCrawlResultChange])

--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -204,7 +204,7 @@ const CSVUploader: FC<Props> = ({
      />
      <div ref={dropRef}>
        {!file && (
-          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-panel-border bg-components-panel-bg-blur text-sm font-normal', dragging && 'border border-divider-subtle bg-components-panel-on-panel-item-bg-hover')}>
+          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-panel-border bg-components-panel-bg-blur text-sm font-normal', dragging && 'border border-divider-subtle  bg-components-panel-on-panel-item-bg-hover')}>
            <div className="flex w-full items-center justify-center space-x-2">
              <CSVIcon className="shrink-0" />
              <div className="text-text-secondary">
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -58,7 +58,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
      <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
      <button
        type="button"
-        className="text-text-accent system-xs-semibold"
+        className="system-xs-semibold text-text-accent"
        onClick={() => {
          clearTimeout(refreshTimer.current)
          viewNewlyAddedChildChunk?.()
@@ -120,11 +120,11 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
    <div className="flex h-full flex-col">
      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
        <div className="flex flex-col">
-          <div className="text-text-primary system-xl-semibold">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
+          <div className="system-xl-semibold text-text-primary">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
          <div className="flex items-center gap-x-2">
            <SegmentIndexTag label={t('segment.newChildChunk', { ns: 'datasetDocuments' }) as string} />
            <Dot />
-            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
+            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
          </div>
        </div>
        <div className="flex items-center">
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -61,7 +61,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
      <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
      <button
        type="button"
-        className="text-text-accent system-xs-semibold"
+        className="system-xs-semibold text-text-accent"
        onClick={() => {
          clearTimeout(refreshTimer.current)
          viewNewlyAddedChunk()
@@ -158,13 +158,13 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
        className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
      >
        <div className="flex flex-col">
-          <div className="text-text-primary system-xl-semibold">
+          <div className="system-xl-semibold text-text-primary">
            {t('segment.addChunk', { ns: 'datasetDocuments' })}
          </div>
          <div className="flex items-center gap-x-2">
            <SegmentIndexTag label={t('segment.newChunk', { ns: 'datasetDocuments' })!} />
            <Dot />
-            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
+            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
          </div>
        </div>
        <div className="flex items-center">
--- a/web/app/components/datasets/documents/detail/settings/tests/document-settings.spec.tsx
+++ b/web/app/components/datasets/documents/detail/settings/tests/document-settings.spec.tsx
@@ -100,10 +100,10 @@ vi.mock('@/app/components/datasets/create/step-two', () => ({
 }))

 vi.mock('@/app/components/header/account-setting', () => ({
-  default: ({ activeTab, onCancelAction }: { activeTab?: string, onCancelAction?: () => void }) => (
+  default: ({ activeTab, onCancel }: { activeTab?: string, onCancel?: () => void }) => (
    <div data-testid="account-setting">
      <span data-testid="active-tab">{activeTab}</span>
-      <button onClick={onCancelAction} data-testid="close-setting">Close</button>
+      <button onClick={onCancel} data-testid="close-setting">Close</button>
    </div>
  ),
 }))
--- a/web/app/components/datasets/documents/detail/settings/document-settings.tsx
+++ b/web/app/components/datasets/documents/detail/settings/document-settings.tsx
@@ -1,4 +1,3 @@
-import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
 import type { DataSourceProvider, NotionPage } from '@/models/common'
 import type {
  CrawlOptions,
@@ -20,7 +19,6 @@ import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import StepTwo from '@/app/components/datasets/create/step-two'
 import AccountSetting from '@/app/components/header/account-setting'
-import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import DatasetDetailContext from '@/context/dataset-detail'
@@ -35,13 +33,8 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
  const { t } = useTranslation()
  const router = useRouter()
  const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
-  const [accountSettingTab, setAccountSettingTab] = React.useState<AccountSettingTab>(ACCOUNT_SETTING_TAB.PROVIDER)
  const { indexingTechnique, dataset } = useContext(DatasetDetailContext)
  const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
-  const handleOpenAccountSetting = React.useCallback(() => {
-    setAccountSettingTab(ACCOUNT_SETTING_TAB.PROVIDER)
-    showSetAPIKey()
-  }, [showSetAPIKey])

  const invalidDocumentList = useInvalidDocumentList(datasetId)
  const invalidDocumentDetail = useInvalidDocumentDetail()
@@ -142,7 +135,7 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
        {dataset && documentDetail && (
          <StepTwo
            isAPIKeySet={!!embeddingsDefaultModel}
-            onSetting={handleOpenAccountSetting}
+            onSetting={showSetAPIKey}
            datasetId={datasetId}
            dataSourceType={documentDetail.data_source_type as DataSourceType}
            notionPages={currentPage ? [currentPage as unknown as NotionPage] : []}
@@ -162,9 +155,8 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
      </div>
      {isShowSetAPIKey && (
        <AccountSetting
-          activeTab={accountSettingTab}
-          onTabChangeAction={setAccountSettingTab}
-          onCancelAction={async () => {
+          activeTab="provider"
+          onCancel={async () => {
            hideSetAPIkey()
          }}
        />
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -125,13 +125,13 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
        <div className="fixed inset-0 flex items-center justify-center bg-black/[.25]">
          <div className="shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
            <div className="flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-              <div className="grow self-stretch text-text-primary title-2xl-semi-bold">
+              <div className="title-2xl-semi-bold grow self-stretch text-text-primary">
                {
                  isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })
                }
              </div>
              {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
-                <div className="flex items-center text-text-tertiary system-xs-regular">
+                <div className="system-xs-regular flex items-center text-text-tertiary">
                  {t('editExternalAPIFormWarning.front', { ns: 'dataset' })}
                  <span className="flex cursor-pointer items-center text-text-accent">
                    &nbsp;
@@ -144,12 +144,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                      popupContent={(
                        <div className="p-1">
                          <div className="flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1">
-                            <div className="text-text-tertiary system-xs-medium-uppercase">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
+                            <div className="system-xs-medium-uppercase text-text-tertiary">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
                          </div>
                          {datasetBindings?.map(binding => (
                            <div key={binding.id} className="flex items-center gap-1 self-stretch px-2 py-1">
                              <RiBook2Line className="h-4 w-4 text-text-secondary" />
-                              <div className="text-text-secondary system-sm-medium">{binding.name}</div>
+                              <div className="system-sm-medium text-text-secondary">{binding.name}</div>
                            </div>
                          ))}
                        </div>
@@ -193,8 +193,8 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                {t('externalAPIForm.save', { ns: 'dataset' })}
              </Button>
            </div>
-            <div className="flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle
-              bg-background-soft px-2 py-3 text-text-tertiary system-xs-regular"
+            <div className="system-xs-regular flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px]
+              border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary"
            >
              <RiLock2Fill className="h-3 w-3 text-text-quaternary" />
              {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}
--- a/web/app/components/datasets/settings/form/tests/index.spec.tsx
+++ b/web/app/components/datasets/settings/form/tests/index.spec.tsx
@@ -127,14 +127,6 @@ vi.mock('@/service/use-common', () => ({
      ],
    },
  }),
-  useCurrentWorkspace: () => ({
-    data: {
-      trial_credits: 1000,
-      trial_credits_used: 100,
-      next_credit_reset_date: undefined,
-    },
-    isPending: false,
-  }),
 }))

 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
@@ -199,42 +191,6 @@ vi.mock('@/context/i18n', () => ({
  useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
 }))

-vi.mock('../components/indexing-section', () => ({
-  default: ({
-    currentDataset,
-    indexMethod,
-  }: {
-    currentDataset?: DataSet
-    indexMethod?: IndexingType
-  }) => (
-    <div data-testid="indexing-section">
-      {!!currentDataset?.doc_form && (
-        <>
-          <div>form.chunkStructure.title</div>
-          <a href="https://docs.dify.ai/use-dify/knowledge/create-knowledge/chunking-and-cleaning-text">
-            form.chunkStructure.learnMore
-          </a>
-        </>
-      )}
-      {!!(currentDataset
-        && currentDataset.doc_form !== ChunkingMode.parentChild
-        && currentDataset.indexing_technique
-        && indexMethod) && (
-        <div>form.indexMethod</div>
-      )}
-      {indexMethod === IndexingType.QUALIFIED && <div>form.embeddingModel</div>}
-      {currentDataset?.provider !== 'external' && indexMethod && (
-        <>
-          <div>form.retrievalSetting.title</div>
-          <a href="https://docs.dify.ai/use-dify/knowledge/create-knowledge/setting-indexing-methods">
-            form.retrievalSetting.learnMore
-          </a>
-        </>
-      )}
-    </div>
-  ),
-}))
-
 describe('Form', () => {
  beforeEach(() => {
    vi.clearAllMocks()
--- a/web/app/components/datasets/settings/form/components/tests/indexing-section.spec.tsx
+++ b/web/app/components/datasets/settings/form/components/tests/indexing-section.spec.tsx
@@ -8,149 +8,75 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import { IndexingType } from '../../../../create/step-two'
 import IndexingSection from '../indexing-section'

-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
+// Mock i18n doc link
 vi.mock('@/context/i18n', () => ({
  useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
 }))

-vi.mock('@/app/components/base/divider', () => ({
-  default: ({ className }: { className?: string }) => (
-    <div data-testid="divider" className={className} />
-  ),
+// Mock app-context for child components
+vi.mock('@/context/app-context', () => ({
+  useSelector: (selector: (state: unknown) => unknown) => {
+    const state = {
+      isCurrentWorkspaceDatasetOperator: false,
+      userProfile: {
+        id: 'user-1',
+        name: 'Current User',
+        email: 'current@example.com',
+        avatar_url: '',
+        role: 'owner',
+      },
+    }
+    return selector(state)
+  },
 }))

-vi.mock('@/app/components/datasets/settings/chunk-structure', () => ({
-  default: ({ chunkStructure }: { chunkStructure: string }) => (
-    <div data-testid="chunk-structure" data-mode={chunkStructure}>
-      {chunkStructure}
-    </div>
-  ),
+// Mock model-provider-page hooks
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelList: () => ({ data: [], mutate: vi.fn(), isLoading: false }),
+  useCurrentProviderAndModel: () => ({ currentProvider: undefined, currentModel: undefined }),
+  useDefaultModel: () => ({ data: undefined, mutate: vi.fn(), isLoading: false }),
+  useModelListAndDefaultModel: () => ({ modelList: [], defaultModel: undefined }),
+  useModelListAndDefaultModelAndCurrentProviderAndModel: () => ({
+    modelList: [],
+    defaultModel: undefined,
+    currentProvider: undefined,
+    currentModel: undefined,
+  }),
+  useUpdateModelList: () => vi.fn(),
+  useUpdateModelProviders: () => vi.fn(),
+  useLanguage: () => 'en_US',
+  useSystemDefaultModelAndModelList: () => [undefined, vi.fn()],
+  useProviderCredentialsAndLoadBalancing: () => ({
+    credentials: undefined,
+    loadBalancing: undefined,
+    mutate: vi.fn(),
+    isLoading: false,
+  }),
+  useAnthropicBuyQuota: () => vi.fn(),
+  useMarketplaceAllPlugins: () => ({ plugins: [], isLoading: false }),
+  useRefreshModel: () => ({ handleRefreshModel: vi.fn() }),
+  useModelModalHandler: () => vi.fn(),
 }))

-vi.mock('@/app/components/datasets/settings/index-method', () => ({
-  default: ({
-    value,
-    disabled,
-    keywordNumber,
-    onChange,
-    onKeywordNumberChange,
-  }: {
-    value: string
-    disabled?: boolean
-    keywordNumber: number
-    onChange: (value: IndexingType) => void
-    onKeywordNumberChange: (value: number) => void
-  }) => (
-    <div
-      data-testid="index-method"
-      data-disabled={disabled ? 'true' : 'false'}
-      data-keyword-number={String(keywordNumber)}
-      data-value={value}
-    >
-      <button type="button" onClick={() => onChange(IndexingType.QUALIFIED)}>
-        stepTwo.qualified
-      </button>
-      <button type="button" onClick={() => onChange(IndexingType.ECONOMICAL)}>
-        form.indexMethodEconomy
-      </button>
-      <button type="button" onClick={() => onKeywordNumberChange(keywordNumber + 1)}>
-        keyword-number-increment
-      </button>
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
-  default: ({
-    defaultModel,
-    onSelect,
-  }: {
-    defaultModel?: DefaultModel
-    onSelect?: (value: DefaultModel) => void
-  }) => (
-    <div
-      data-testid="model-selector"
-      data-model={defaultModel?.model ?? ''}
-      data-provider={defaultModel?.provider ?? ''}
-    >
-      <button
-        type="button"
-        onClick={() => onSelect?.({ provider: 'cohere', model: 'embed-english-v3.0' })}
-      >
-        select-model
-      </button>
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/datasets/settings/summary-index-setting', () => ({
-  default: ({
-    summaryIndexSetting,
-    onSummaryIndexSettingChange,
-  }: {
-    summaryIndexSetting?: SummaryIndexSetting
-    onSummaryIndexSettingChange?: (payload: SummaryIndexSetting) => void
-  }) => (
-    <div data-testid="summary-index-setting" data-enabled={summaryIndexSetting?.enable ? 'true' : 'false'}>
-      <button type="button" onClick={() => onSummaryIndexSettingChange?.({ enable: true })}>
-        summary-enable
-      </button>
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/datasets/common/retrieval-method-config', () => ({
-  default: ({
-    showMultiModalTip,
-    onChange,
-    value,
-  }: {
-    showMultiModalTip?: boolean
-    onChange: (value: RetrievalConfig) => void
-    value: RetrievalConfig
-  }) => (
-    <div data-testid="retrieval-method-config">
-      {showMultiModalTip && <span>show-multimodal-tip</span>}
-      <button
-        type="button"
-        onClick={() =>
-          onChange({
-            ...value,
-            top_k: 6,
-          })}
-      >
-        update-retrieval
-      </button>
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/datasets/common/economical-retrieval-method-config', () => ({
-  default: ({
-    onChange,
-    value,
-  }: {
-    onChange: (value: RetrievalConfig) => void
-    value: RetrievalConfig
-  }) => (
-    <div data-testid="economical-retrieval-method-config">
-      <button
-        type="button"
-        onClick={() =>
-          onChange({
-            ...value,
-            search_method: RETRIEVE_METHOD.keywordSearch,
-          })}
-      >
-        update-economy-retrieval
-      </button>
-    </div>
-  ),
+// Mock provider-context
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    textGenerationModelList: [],
+    embeddingsModelList: [],
+    rerankModelList: [],
+    agentThoughtModelList: [],
+    modelProviders: [],
+    textEmbeddingModelList: [],
+    speech2textModelList: [],
+    ttsModelList: [],
+    moderationModelList: [],
+    hasSettedApiKey: true,
+    plan: { type: 'free' },
+    enableBilling: false,
+    onPlanInfoChanged: vi.fn(),
+    isCurrentWorkspaceDatasetOperator: false,
+    supportRetrievalMethods: ['semantic_search', 'full_text_search', 'hybrid_search'],
+  }),
 }))

 describe('IndexingSection', () => {
@@ -261,281 +187,315 @@ describe('IndexingSection', () => {
    showMultiModalTip: false,
  }

-  const renderComponent = (props: Partial<typeof defaultProps> = {}) => {
-    return render(<IndexingSection {...defaultProps} {...props} />)
-  }
-
  beforeEach(() => {
    vi.clearAllMocks()
  })

  describe('Rendering', () => {
-    it('should render the chunk structure, index method, and retrieval sections for a standard dataset', () => {
-      renderComponent()
-
-      expect(screen.getByText('form.chunkStructure.title')).toBeInTheDocument()
-      expect(screen.getByTestId('chunk-structure')).toHaveAttribute('data-mode', ChunkingMode.text)
-      expect(screen.getByText('form.indexMethod')).toBeInTheDocument()
-      expect(screen.getByTestId('index-method')).toBeInTheDocument()
-      expect(screen.getByText('form.retrievalSetting.title')).toBeInTheDocument()
+    it('should render without crashing', () => {
+      render(<IndexingSection {...defaultProps} />)
+      expect(screen.getByText(/form\.chunkStructure\.title/i)).toBeInTheDocument()
    })

-    it('should render the embedding model selector when the index method is high quality', () => {
-      renderComponent()
+    it('should render chunk structure section when doc_form is set', () => {
+      render(<IndexingSection {...defaultProps} />)
+      expect(screen.getByText(/form\.chunkStructure\.title/i)).toBeInTheDocument()
+    })

-      expect(screen.getByText('form.embeddingModel')).toBeInTheDocument()
-      expect(screen.getByTestId('model-selector')).toHaveAttribute('data-model', 'text-embedding-ada-002')
+    it('should render index method section when conditions are met', () => {
+      render(<IndexingSection {...defaultProps} />)
+      // May match multiple elements (label and descriptions)
+      expect(screen.getAllByText(/form\.indexMethod/i).length).toBeGreaterThan(0)
+    })
+
+    it('should render embedding model section when indexMethod is high_quality', () => {
+      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)
+      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()
+    })
+
+    it('should render retrieval settings section', () => {
+      render(<IndexingSection {...defaultProps} />)
+      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
    })
  })

  describe('Chunk Structure Section', () => {
-    it('should hide the chunk structure section when the dataset has no doc form', () => {
-      renderComponent({
-        currentDataset: {
-          ...mockDataset,
-          doc_form: undefined as unknown as ChunkingMode,
-        },
-      })
+    it('should not render chunk structure when doc_form is not set', () => {
+      const datasetWithoutDocForm = { ...mockDataset, doc_form: undefined as unknown as ChunkingMode }
+      render(<IndexingSection {...defaultProps} currentDataset={datasetWithoutDocForm} />)

-      expect(screen.queryByText('form.chunkStructure.title')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('chunk-structure')).not.toBeInTheDocument()
+      expect(screen.queryByText(/form\.chunkStructure\.title/i)).not.toBeInTheDocument()
    })

-    it('should render the chunk structure learn more link and description', () => {
-      renderComponent()
+    it('should render learn more link for chunk structure', () => {
+      render(<IndexingSection {...defaultProps} />)

-      const learnMoreLink = screen.getByRole('link', { name: 'form.chunkStructure.learnMore' })
+      const learnMoreLink = screen.getByText(/form\.chunkStructure\.learnMore/i)
+      expect(learnMoreLink).toBeInTheDocument()
      expect(learnMoreLink).toHaveAttribute('href', expect.stringContaining('chunking-and-cleaning-text'))
-      expect(screen.getByText('form.chunkStructure.description')).toBeInTheDocument()
+    })
+
+    it('should render chunk structure description', () => {
+      render(<IndexingSection {...defaultProps} />)
+
+      expect(screen.getByText(/form\.chunkStructure\.description/i)).toBeInTheDocument()
    })
  })

  describe('Index Method Section', () => {
-    it('should hide the index method section for parent-child chunking', () => {
-      renderComponent({
-        currentDataset: {
-          ...mockDataset,
-          doc_form: ChunkingMode.parentChild,
-        },
-      })
+    it('should not render index method for parentChild chunking mode', () => {
+      const parentChildDataset = { ...mockDataset, doc_form: ChunkingMode.parentChild }
+      render(<IndexingSection {...defaultProps} currentDataset={parentChildDataset} />)

-      expect(screen.queryByText('form.indexMethod')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('index-method')).not.toBeInTheDocument()
+      expect(screen.queryByText(/form\.indexMethod/i)).not.toBeInTheDocument()
    })

-    it('should render both index method options', () => {
-      renderComponent()
+    it('should render high quality option', () => {
+      render(<IndexingSection {...defaultProps} />)

-      expect(screen.getByRole('button', { name: 'stepTwo.qualified' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'form.indexMethodEconomy' })).toBeInTheDocument()
+      expect(screen.getByText(/stepTwo\.qualified/i)).toBeInTheDocument()
    })

-    it('should call setIndexMethod when the user selects a new index method', () => {
+    it('should render economy option', () => {
+      render(<IndexingSection {...defaultProps} />)
+
+      // May match multiple elements (title and tip)
+      expect(screen.getAllByText(/form\.indexMethodEconomy/i).length).toBeGreaterThan(0)
+    })
+
+    it('should call setIndexMethod when index method changes', () => {
      const setIndexMethod = vi.fn()
-      renderComponent({ setIndexMethod })
+      const { container } = render(<IndexingSection {...defaultProps} setIndexMethod={setIndexMethod} />)

-      fireEvent.click(screen.getByRole('button', { name: 'form.indexMethodEconomy' }))
+      // Find the economy option card by looking for clickable elements containing the economy text
+      const economyOptions = screen.getAllByText(/form\.indexMethodEconomy/i)
+      if (economyOptions.length > 0) {
+        const economyCard = economyOptions[0].closest('[class*="cursor-pointer"]')
+        if (economyCard) {
+          fireEvent.click(economyCard)
+        }
+      }

-      expect(setIndexMethod).toHaveBeenCalledWith(IndexingType.ECONOMICAL)
+      // The handler should be properly passed - verify component renders without crashing
+      expect(container).toBeInTheDocument()
    })

-    it('should show an upgrade warning when moving from economy to high quality', () => {
-      renderComponent({
-        currentDataset: {
-          ...mockDataset,
-          indexing_technique: IndexingType.ECONOMICAL,
-        },
-      })
+    it('should show upgrade warning when switching from economy to high quality', () => {
+      const economyDataset = { ...mockDataset, indexing_technique: IndexingType.ECONOMICAL }
+      render(
+        <IndexingSection
+          {...defaultProps}
+          currentDataset={economyDataset}
+          indexMethod={IndexingType.QUALIFIED}
+        />,
+      )

-      expect(screen.getByText('form.upgradeHighQualityTip')).toBeInTheDocument()
+      expect(screen.getByText(/form\.upgradeHighQualityTip/i)).toBeInTheDocument()
    })

-    it('should pass disabled state to the index method when embeddings are unavailable', () => {
-      renderComponent({
-        currentDataset: {
-          ...mockDataset,
-          embedding_available: false,
-        },
-      })
+    it('should not show upgrade warning when already on high quality', () => {
+      render(
+        <IndexingSection
+          {...defaultProps}
+          indexMethod={IndexingType.QUALIFIED}
+        />,
+      )

-      expect(screen.getByTestId('index-method')).toHaveAttribute('data-disabled', 'true')
+      expect(screen.queryByText(/form\.upgradeHighQualityTip/i)).not.toBeInTheDocument()
    })

-    it('should pass the keyword number and update handler through the index method mock', () => {
-      const setKeywordNumber = vi.fn()
-      renderComponent({
-        keywordNumber: 15,
-        setKeywordNumber,
-      })
+    it('should disable index method when embedding is not available', () => {
+      const datasetWithoutEmbedding = { ...mockDataset, embedding_available: false }
+      render(<IndexingSection {...defaultProps} currentDataset={datasetWithoutEmbedding} />)

-      expect(screen.getByTestId('index-method')).toHaveAttribute('data-keyword-number', '15')
-
-      fireEvent.click(screen.getByRole('button', { name: 'keyword-number-increment' }))
-
-      expect(setKeywordNumber).toHaveBeenCalledWith(16)
+      // Index method options should be disabled
+      // The exact implementation depends on the IndexMethod component
    })
  })

  describe('Embedding Model Section', () => {
-    it('should hide the embedding model selector for economy indexing', () => {
-      renderComponent({ indexMethod: IndexingType.ECONOMICAL })
+    it('should render embedding model when indexMethod is high_quality', () => {
+      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)

-      expect(screen.queryByText('form.embeddingModel')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('model-selector')).not.toBeInTheDocument()
+      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()
    })

-    it('should call setEmbeddingModel when the user selects a model', () => {
+    it('should not render embedding model when indexMethod is economy', () => {
+      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.ECONOMICAL} />)
+
+      expect(screen.queryByText(/form\.embeddingModel/i)).not.toBeInTheDocument()
+    })
+
+    it('should call setEmbeddingModel when model changes', () => {
      const setEmbeddingModel = vi.fn()
-      renderComponent({ setEmbeddingModel })
+      render(
+        <IndexingSection
+          {...defaultProps}
+          setEmbeddingModel={setEmbeddingModel}
+          indexMethod={IndexingType.QUALIFIED}
+        />,
+      )

-      fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
-
-      expect(setEmbeddingModel).toHaveBeenCalledWith({
-        provider: 'cohere',
-        model: 'embed-english-v3.0',
-      })
+      // The embedding model selector should be rendered
+      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()
    })
  })

  describe('Summary Index Setting Section', () => {
-    it('should render the summary index setting only for high quality text chunking', () => {
-      renderComponent()
-      expect(screen.getByTestId('summary-index-setting')).toBeInTheDocument()
+    it('should render summary index setting for high quality with text chunking', () => {
+      render(
+        <IndexingSection
+          {...defaultProps}
+          indexMethod={IndexingType.QUALIFIED}
+        />,
+      )

-      renderComponent({
-        indexMethod: IndexingType.ECONOMICAL,
-      })
-      expect(screen.getAllByTestId('summary-index-setting')).toHaveLength(1)
+      // Summary index setting should be rendered based on conditions
+      // The exact rendering depends on the SummaryIndexSetting component
    })

-    it('should call handleSummaryIndexSettingChange when the summary setting changes', () => {
+    it('should not render summary index setting for economy indexing', () => {
+      render(
+        <IndexingSection
+          {...defaultProps}
+          indexMethod={IndexingType.ECONOMICAL}
+        />,
+      )
+
+      // Summary index setting should not be rendered for economy
+    })
+
+    it('should call handleSummaryIndexSettingChange when setting changes', () => {
      const handleSummaryIndexSettingChange = vi.fn()
-      renderComponent({ handleSummaryIndexSettingChange })
+      render(
+        <IndexingSection
+          {...defaultProps}
+          handleSummaryIndexSettingChange={handleSummaryIndexSettingChange}
+          indexMethod={IndexingType.QUALIFIED}
+        />,
+      )

-      fireEvent.click(screen.getByRole('button', { name: 'summary-enable' }))
-
-      expect(handleSummaryIndexSettingChange).toHaveBeenCalledWith({ enable: true })
+      // The handler should be properly passed
    })
  })

  describe('Retrieval Settings Section', () => {
-    it('should render the retrieval learn more link', () => {
-      renderComponent()
+    it('should render retrieval settings', () => {
+      render(<IndexingSection {...defaultProps} />)

-      const learnMoreLink = screen.getByRole('link', { name: 'form.retrievalSetting.learnMore' })
-      expect(learnMoreLink).toHaveAttribute('href', expect.stringContaining('setting-indexing-methods'))
-      expect(screen.getByText('form.retrievalSetting.description')).toBeInTheDocument()
+      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
    })

-    it('should render the high-quality retrieval config and propagate changes', () => {
+    it('should render learn more link for retrieval settings', () => {
+      render(<IndexingSection {...defaultProps} />)
+
+      const learnMoreLinks = screen.getAllByText(/learnMore/i)
+      const retrievalLearnMore = learnMoreLinks.find(link =>
+        link.closest('a')?.href?.includes('setting-indexing-methods'),
+      )
+      expect(retrievalLearnMore).toBeInTheDocument()
+    })
+
+    it('should render RetrievalMethodConfig for high quality indexing', () => {
+      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)
+
+      // RetrievalMethodConfig should be rendered
+      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
+    })
+
+    it('should render EconomicalRetrievalMethodConfig for economy indexing', () => {
+      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.ECONOMICAL} />)
+
+      // EconomicalRetrievalMethodConfig should be rendered
+      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
+    })
+
+    it('should call setRetrievalConfig when config changes', () => {
      const setRetrievalConfig = vi.fn()
-      renderComponent({ setRetrievalConfig })
+      render(<IndexingSection {...defaultProps} setRetrievalConfig={setRetrievalConfig} />)

-      expect(screen.getByTestId('retrieval-method-config')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByRole('button', { name: 'update-retrieval' }))
-
-      expect(setRetrievalConfig).toHaveBeenCalledWith({
-        ...mockRetrievalConfig,
-        top_k: 6,
-      })
+      // The handler should be properly passed
    })

-    it('should render the economical retrieval config for economy indexing', () => {
-      const setRetrievalConfig = vi.fn()
-      renderComponent({
-        indexMethod: IndexingType.ECONOMICAL,
-        setRetrievalConfig,
-      })
+    it('should pass showMultiModalTip to RetrievalMethodConfig', () => {
+      render(<IndexingSection {...defaultProps} showMultiModalTip={true} />)

-      expect(screen.getByTestId('economical-retrieval-method-config')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByRole('button', { name: 'update-economy-retrieval' }))
-
-      expect(setRetrievalConfig).toHaveBeenCalledWith({
-        ...mockRetrievalConfig,
-        search_method: RETRIEVE_METHOD.keywordSearch,
-      })
+      // The tip should be passed to the config component
    })
+  })

-    it('should pass the multimodal tip flag to the retrieval config', () => {
-      renderComponent({ showMultiModalTip: true })
+  describe('External Provider', () => {
+    it('should not render retrieval config for external provider', () => {
+      const externalDataset = { ...mockDataset, provider: 'external' }
+      render(<IndexingSection {...defaultProps} currentDataset={externalDataset} />)

-      expect(screen.getByText('show-multimodal-tip')).toBeInTheDocument()
-    })
-
-    it('should hide retrieval configuration for external datasets', () => {
-      renderComponent({
-        currentDataset: {
-          ...mockDataset,
-          provider: 'external',
-        },
-      })
-
-      expect(screen.queryByText('form.retrievalSetting.title')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('retrieval-method-config')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('economical-retrieval-method-config')).not.toBeInTheDocument()
+      // Retrieval config should not be rendered for external provider
+      // This is handled by the parent component, but we verify the condition
    })
  })

  describe('Conditional Rendering', () => {
-    it('should render dividers between visible sections', () => {
-      renderComponent()
+    it('should show divider between sections', () => {
+      const { container } = render(<IndexingSection {...defaultProps} />)

-      expect(screen.getAllByTestId('divider').length).toBeGreaterThan(0)
+      // Dividers should be present
+      const dividers = container.querySelectorAll('.bg-divider-subtle')
+      expect(dividers.length).toBeGreaterThan(0)
    })

-    it('should hide the index method section when the dataset lacks an indexing technique', () => {
-      renderComponent({
-        currentDataset: {
-          ...mockDataset,
-          indexing_technique: undefined as unknown as IndexingType,
-        },
-        indexMethod: undefined,
-      })
+    it('should not render index method when indexing_technique is not set', () => {
+      const datasetWithoutTechnique = { ...mockDataset, indexing_technique: undefined as unknown as IndexingType }
+      render(<IndexingSection {...defaultProps} currentDataset={datasetWithoutTechnique} indexMethod={undefined} />)

-      expect(screen.queryByText('form.indexMethod')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('index-method')).not.toBeInTheDocument()
+      expect(screen.queryByText(/form\.indexMethod/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Keyword Number', () => {
+    it('should pass keywordNumber to IndexMethod', () => {
+      render(<IndexingSection {...defaultProps} keywordNumber={15} />)
+
+      // The keyword number should be displayed in the economy option description
+      // The exact rendering depends on the IndexMethod component
+    })
+
+    it('should call setKeywordNumber when keyword number changes', () => {
+      const setKeywordNumber = vi.fn()
+      render(<IndexingSection {...defaultProps} setKeywordNumber={setKeywordNumber} />)
+
+      // The handler should be properly passed
    })
  })

  describe('Props Updates', () => {
-    it('should update the embedding model section when indexMethod changes', () => {
-      const { rerender } = renderComponent()
+    it('should update when indexMethod changes', () => {
+      const { rerender } = render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)

-      expect(screen.getByTestId('model-selector')).toBeInTheDocument()
+      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()

      rerender(<IndexingSection {...defaultProps} indexMethod={IndexingType.ECONOMICAL} />)

-      expect(screen.queryByTestId('model-selector')).not.toBeInTheDocument()
+      expect(screen.queryByText(/form\.embeddingModel/i)).not.toBeInTheDocument()
    })

-    it('should update the chunk structure section when currentDataset changes', () => {
-      const { rerender } = renderComponent()
+    it('should update when currentDataset changes', () => {
+      const { rerender } = render(<IndexingSection {...defaultProps} />)

-      expect(screen.getByTestId('chunk-structure')).toBeInTheDocument()
+      expect(screen.getByText(/form\.chunkStructure\.title/i)).toBeInTheDocument()

-      rerender(
-        <IndexingSection
-          {...defaultProps}
-          currentDataset={{
-            ...mockDataset,
-            doc_form: undefined as unknown as ChunkingMode,
-          }}
-        />,
-      )
+      const datasetWithoutDocForm = { ...mockDataset, doc_form: undefined as unknown as ChunkingMode }
+      rerender(<IndexingSection {...defaultProps} currentDataset={datasetWithoutDocForm} />)

-      expect(screen.queryByTestId('chunk-structure')).not.toBeInTheDocument()
+      expect(screen.queryByText(/form\.chunkStructure\.title/i)).not.toBeInTheDocument()
    })
  })

  describe('Undefined Dataset', () => {
-    it('should render safely when currentDataset is undefined', () => {
-      renderComponent({ currentDataset: undefined })
+    it('should handle undefined currentDataset gracefully', () => {
+      render(<IndexingSection {...defaultProps} currentDataset={undefined} />)

-      expect(screen.queryByTestId('chunk-structure')).not.toBeInTheDocument()
-      expect(screen.getByTestId('model-selector')).toBeInTheDocument()
-      expect(screen.getByTestId('retrieval-method-config')).toBeInTheDocument()
+      // Should not crash and should handle undefined gracefully
+      // Most sections should not render without a dataset
    })
  })
 })
--- a/web/app/components/datasets/settings/summary-index-setting.tsx
+++ b/web/app/components/datasets/settings/summary-index-setting.tsx
@@ -63,7 +63,7 @@ const SummaryIndexSetting = ({
    return (
      <div>
        <div className="flex h-6 items-center justify-between">
-          <div className="flex items-center text-text-secondary system-sm-semibold-uppercase">
+          <div className="system-sm-semibold-uppercase flex items-center text-text-secondary">
            {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
            <Tooltip
              triggerClassName="ml-1 h-4 w-4 shrink-0"
@@ -80,7 +80,7 @@ const SummaryIndexSetting = ({
        {
          summaryIndexSetting?.enable && (
            <div>
-              <div className="mb-1.5 mt-2 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
+              <div className="system-xs-medium-uppercase mb-1.5 mt-2 flex h-6 items-center text-text-tertiary">
                {t('form.summaryModel', { ns: 'datasetSettings' })}
              </div>
              <ModelSelector
@@ -90,7 +90,7 @@ const SummaryIndexSetting = ({
                readonly={readonly}
                showDeprecatedWarnIcon
              />
-              <div className="mt-3 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
+              <div className="system-xs-medium-uppercase mt-3 flex h-6 items-center text-text-tertiary">
                {t('form.summaryInstructions', { ns: 'datasetSettings' })}
              </div>
              <Textarea
@@ -111,12 +111,12 @@ const SummaryIndexSetting = ({
      <div className="space-y-4">
        <div className="flex gap-x-1">
          <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-            <div className="text-text-secondary system-sm-semibold">
+            <div className="system-sm-semibold text-text-secondary">
              {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
            </div>
          </div>
          <div className="py-1.5">
-            <div className="flex items-center text-text-secondary system-sm-semibold">
+            <div className="system-sm-semibold flex items-center text-text-secondary">
              <Switch
                className="mr-2"
                value={summaryIndexSetting?.enable ?? false}
@@ -127,7 +127,7 @@ const SummaryIndexSetting = ({
                summaryIndexSetting?.enable ? t('list.status.enabled', { ns: 'datasetDocuments' }) : t('list.status.disabled', { ns: 'datasetDocuments' })
              }
            </div>
-            <div className="mt-2 text-text-tertiary system-sm-regular">
+            <div className="system-sm-regular mt-2 text-text-tertiary">
              {
                summaryIndexSetting?.enable && t('form.summaryAutoGenTip', { ns: 'datasetSettings' })
              }
@@ -142,7 +142,7 @@ const SummaryIndexSetting = ({
            <>
              <div className="flex gap-x-1">
                <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="text-text-tertiary system-sm-medium">
+                  <div className="system-sm-medium text-text-tertiary">
                    {t('form.summaryModel', { ns: 'datasetSettings' })}
                  </div>
                </div>
@@ -159,7 +159,7 @@ const SummaryIndexSetting = ({
              </div>
              <div className="flex">
                <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="text-text-tertiary system-sm-medium">
+                  <div className="system-sm-medium text-text-tertiary">
                    {t('form.summaryInstructions', { ns: 'datasetSettings' })}
                  </div>
                </div>
@@ -188,7 +188,7 @@ const SummaryIndexSetting = ({
          onChange={handleSummaryIndexEnableChange}
          size="md"
        />
-        <div className="text-text-secondary system-sm-semibold">
+        <div className="system-sm-semibold text-text-secondary">
          {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
        </div>
      </div>
@@ -196,7 +196,7 @@ const SummaryIndexSetting = ({
        summaryIndexSetting?.enable && (
          <>
            <div>
-              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
+              <div className="system-sm-medium mb-1.5 flex h-6 items-center text-text-secondary">
                {t('form.summaryModel', { ns: 'datasetSettings' })}
              </div>
              <ModelSelector
@@ -209,7 +209,7 @@ const SummaryIndexSetting = ({
              />
            </div>
            <div>
-              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
+              <div className="system-sm-medium mb-1.5 flex h-6 items-center text-text-secondary">
                {t('form.summaryInstructions', { ns: 'datasetSettings' })}
              </div>
              <Textarea
--- a/web/app/components/header/tests/header-wrapper.spec.tsx
+++ b/web/app/components/header/tests/header-wrapper.spec.tsx
@@ -2,7 +2,7 @@ import { act, render, screen } from '@testing-library/react'
 import { usePathname } from 'next/navigation'
 import { vi } from 'vitest'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import HeaderWrapper from './header-wrapper'
+import HeaderWrapper from '../header-wrapper'

 vi.mock('next/navigation', () => ({
  usePathname: vi.fn(),
--- a/web/app/components/header/tests/index.spec.tsx
+++ b/web/app/components/header/tests/index.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
-import Header from './index'
+import Header from '../index'

 function createMockComponent(testId: string) {
  return () => <div data-testid={testId} />
--- a/web/app/components/header/tests/maintenance-notice.spec.tsx
+++ b/web/app/components/header/tests/maintenance-notice.spec.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { vi } from 'vitest'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { NOTICE_I18N } from '@/i18n-config/language'
-import MaintenanceNotice from './maintenance-notice'
+import MaintenanceNotice from '../maintenance-notice'

 vi.mock('@/app/components/base/icons/src/vender/line/general', () => ({
  X: ({ onClick }: { onClick?: () => void }) => <button type="button" aria-label="close notice" onClick={onClick} />,
--- a/web/app/components/header/account-about/tests/index.spec.tsx
+++ b/web/app/components/header/account-about/tests/index.spec.tsx
@@ -2,7 +2,7 @@ import type { LangGeniusVersionResponse } from '@/models/common'
 import type { SystemFeatures } from '@/types/feature'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import AccountAbout from './index'
+import AccountAbout from '../index'

 vi.mock('@/context/global-public-context', () => ({
  useGlobalPublicStore: vi.fn(),
--- a/web/app/components/header/account-dropdown/tests/compliance.spec.tsx
+++ b/web/app/components/header/account-dropdown/tests/compliance.spec.tsx
@@ -8,8 +8,8 @@ import { useModalContext } from '@/context/modal-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
 import { getDocDownloadUrl } from '@/service/common'
 import { downloadUrl } from '@/utils/download'
-import Toast from '../../base/toast'
-import Compliance from './compliance'
+import Toast from '../../../base/toast'
+import Compliance from '../compliance'

 vi.mock('@/context/provider-context', async (importOriginal) => {
  const actual = await importOriginal<typeof import('@/context/provider-context')>()
--- a/web/app/components/header/account-dropdown/tests/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/tests/index.spec.tsx
@@ -10,13 +10,13 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useLogout } from '@/service/use-common'
-import AppSelector from './index'
+import AppSelector from '../index'

-vi.mock('../account-setting', () => ({
+vi.mock('../../account-setting', () => ({
  default: () => <div data-testid="account-setting">AccountSetting</div>,
 }))

-vi.mock('../account-about', () => ({
+vi.mock('../../account-about', () => ({
  default: ({ onCancel }: { onCancel: () => void }) => (
    <div data-testid="account-about">
      Version
--- a/web/app/components/header/account-dropdown/tests/support.spec.tsx
+++ b/web/app/components/header/account-dropdown/tests/support.spec.tsx
@@ -5,7 +5,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/app/co
 import { Plan } from '@/app/components/billing/type'
 import { useAppContext } from '@/context/app-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
-import Support from './support'
+import Support from '../support'

 const { mockZendeskKey } = vi.hoisted(() => ({
  mockZendeskKey: { value: 'test-key' },
--- a/web/app/components/header/account-dropdown/workplace-selector/tests/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/tests/index.spec.tsx
@@ -5,7 +5,7 @@ import { ToastContext } from '@/app/components/base/toast/context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { switchWorkspace } from '@/service/common'
-import WorkplaceSelector from './index'
+import WorkplaceSelector from '../index'

 vi.mock('@/context/workspace-context', () => ({
  useWorkspacesContext: vi.fn(),
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -46,7 +46,7 @@ const WorkplaceSelector = () => {
                <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
              </div>
              <div className="flex min-w-0 items-center">
-                <div className="min-w-0 max-w-[149px] truncate text-text-secondary system-sm-medium max-[800px]:hidden">{currentWorkspace?.name}</div>
+                <div className="system-sm-medium min-w-0  max-w-[149px] truncate text-text-secondary max-[800px]:hidden">{currentWorkspace?.name}</div>
                <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-secondary" />
              </div>
            </MenuButton>
@@ -68,9 +68,9 @@ const WorkplaceSelector = () => {
                  `,
                )}
              >
-                <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg">
+                <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg ">
                  <div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
-                    <span className="flex-1 text-text-tertiary system-xs-medium-uppercase">{t('userProfile.workspace', { ns: 'common' })}</span>
+                    <span className="system-xs-medium-uppercase flex-1 text-text-tertiary">{t('userProfile.workspace', { ns: 'common' })}</span>
                  </div>
                  {
                    workspaces.map(workspace => (
@@ -78,7 +78,7 @@ const WorkplaceSelector = () => {
                        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]">
                          <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{workspace?.name[0]?.toLocaleUpperCase()}</span>
                        </div>
-                        <div className="line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary system-md-regular">{workspace.name}</div>
+                        <div className="system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary">{workspace.name}</div>
                        <PlanBadge plan={workspace.plan as Plan} />
                      </div>
                    ))
--- a/web/app/components/header/account-setting/Integrations-page/tests/index.spec.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/tests/index.spec.tsx
@@ -1,7 +1,7 @@
 import type { AccountIntegrate } from '@/models/common'
 import { render, screen } from '@testing-library/react'
 import { useAccountIntegrates } from '@/service/use-common'
-import IntegrationsPage from './index'
+import IntegrationsPage from '../index'

 vi.mock('@/service/use-common', () => ({
  useAccountIntegrates: vi.fn(),
--- a/web/app/components/header/account-setting/tests/constants.spec.ts
+++ b/web/app/components/header/account-setting/tests/constants.spec.ts
@@ -3,7 +3,7 @@ import {
  ACCOUNT_SETTING_TAB,
  DEFAULT_ACCOUNT_SETTING_TAB,
  isValidAccountSettingTab,
-} from './constants'
+} from '../constants'

 describe('AccountSetting Constants', () => {
  it('should have correct ACCOUNT_SETTING_MODAL_ACTION', () => {
--- a/web/app/components/header/account-setting/tests/index.spec.tsx
+++ b/web/app/components/header/account-setting/tests/index.spec.tsx
@@ -0,0 +1,346 @@
+import type { ComponentProps, ReactNode } from 'react'
+import type { AppContextValue } from '@/context/app-context'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useEffect } from 'react'
+import { useAppContext } from '@/context/app-context'
+import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { ACCOUNT_SETTING_TAB } from '../constants'
+import AccountSetting from '../index'
+
+vi.mock('@/context/provider-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/provider-context')>()
+  return {
+    ...actual,
+    useProviderContext: vi.fn(),
+  }
+})
+
+vi.mock('@/context/app-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/app-context')>()
+  return {
+    ...actual,
+    useAppContext: vi.fn(),
+  }
+})
+
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  })),
+  usePathname: vi.fn(() => '/'),
+  useParams: vi.fn(() => ({})),
+  useSearchParams: vi.fn(() => ({ get: vi.fn() })),
+}))
+
+vi.mock('@/hooks/use-breakpoints', () => ({
+  MediaType: {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    pc: 'pc',
+  },
+  default: vi.fn(),
+}))
+
+vi.mock('@/app/components/billing/billing-page', () => ({
+  default: () => <div data-testid="billing-page">Billing Page</div>,
+}))
+
+vi.mock('@/app/components/custom/custom-page', () => ({
+  default: () => <div data-testid="custom-page">Custom Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/api-based-extension-page', () => ({
+  default: () => <div data-testid="api-based-extension-page">API Based Extension Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/data-source-page-new', () => ({
+  default: () => <div data-testid="data-source-page">Data Source Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/language-page', () => ({
+  default: () => <div data-testid="language-page">Language Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/members-page', () => ({
+  default: () => <div data-testid="members-page">Members Page</div>,
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page', () => ({
+  default: ({ searchText }: { searchText: string }) => (
+    <div data-testid="provider-page">
+      {`provider-search:${searchText}`}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/header/account-setting/menu-dialog', () => ({
+  default: function MockMenuDialog({
+    children,
+    onClose,
+    show,
+  }: {
+    children: ReactNode
+    onClose: () => void
+    show?: boolean
+  }) {
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape')
+          onClose()
+      }
+
+      document.addEventListener('keydown', handleKeyDown)
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown)
+      }
+    }, [onClose])
+
+    if (!show)
+      return null
+
+    return <div role="dialog">{children}</div>
+  },
+}))
+
+const baseAppContextValue: AppContextValue = {
+  userProfile: {
+    id: '1',
+    name: 'Test User',
+    email: 'test@example.com',
+    avatar: '',
+    avatar_url: '',
+    is_password_set: false,
+  },
+  mutateUserProfile: vi.fn(),
+  currentWorkspace: {
+    id: '1',
+    name: 'Workspace',
+    plan: '',
+    status: '',
+    created_at: 0,
+    role: 'owner',
+    providers: [],
+    trial_credits: 0,
+    trial_credits_used: 0,
+    next_credit_reset_date: 0,
+  },
+  isCurrentWorkspaceManager: true,
+  isCurrentWorkspaceOwner: true,
+  isCurrentWorkspaceEditor: true,
+  isCurrentWorkspaceDatasetOperator: false,
+  mutateCurrentWorkspace: vi.fn(),
+  langGeniusVersionInfo: {
+    current_env: 'testing',
+    current_version: '0.1.0',
+    latest_version: '0.1.0',
+    release_date: '',
+    release_notes: '',
+    version: '0.1.0',
+    can_auto_update: false,
+  },
+  useSelector: vi.fn(),
+  isLoadingCurrentWorkspace: false,
+  isValidatingCurrentWorkspace: false,
+}
+
+describe('AccountSetting', () => {
+  const mockOnCancel = vi.fn()
+  const mockOnTabChange = vi.fn()
+
+  const renderAccountSetting = (props: Partial<ComponentProps<typeof AccountSetting>> = {}) => {
+    const queryClient = new QueryClient()
+    const mergedProps: ComponentProps<typeof AccountSetting> = {
+      onCancel: mockOnCancel,
+      ...props,
+    }
+
+    const view = render(
+      <QueryClientProvider client={queryClient}>
+        <AccountSetting {...mergedProps} />
+      </QueryClientProvider>,
+    )
+
+    return {
+      ...view,
+      rerenderAccountSetting(nextProps: Partial<ComponentProps<typeof AccountSetting>>) {
+        view.rerender(
+          <QueryClientProvider client={queryClient}>
+            <AccountSetting {...mergedProps} {...nextProps} />
+          </QueryClientProvider>,
+        )
+      },
+    }
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useProviderContext).mockReturnValue({
+      ...baseProviderContextValue,
+      enableBilling: true,
+      enableReplaceWebAppLogo: true,
+    })
+    vi.mocked(useAppContext).mockReturnValue(baseAppContextValue)
+    vi.mocked(useBreakpoints).mockReturnValue(MediaType.pc)
+  })
+
+  describe('Rendering', () => {
+    it('should render the sidebar with correct menu items', () => {
+      renderAccountSetting()
+
+      expect(screen.getByText('common.userProfile.settings')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.provider')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.members')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.billing')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.dataSource')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.apiBasedExtension')).toBeInTheDocument()
+      expect(screen.getByTitle('custom.custom')).toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.language')).toBeInTheDocument()
+      expect(screen.getByTestId('members-page')).toBeInTheDocument()
+    })
+
+    it('should respect the activeTab prop', () => {
+      renderAccountSetting({ activeTab: ACCOUNT_SETTING_TAB.DATA_SOURCE })
+
+      expect(screen.getByTestId('data-source-page')).toBeInTheDocument()
+    })
+
+    it('should sync the rendered page when activeTab changes', async () => {
+      const { rerenderAccountSetting } = renderAccountSetting({
+        activeTab: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+      })
+
+      expect(screen.getByTestId('data-source-page')).toBeInTheDocument()
+
+      rerenderAccountSetting({
+        activeTab: ACCOUNT_SETTING_TAB.CUSTOM,
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('custom-page')).toBeInTheDocument()
+      })
+    })
+
+    it('should hide sidebar labels on mobile', () => {
+      vi.mocked(useBreakpoints).mockReturnValue(MediaType.mobile)
+
+      renderAccountSetting()
+
+      expect(screen.queryByText('common.settings.provider')).not.toBeInTheDocument()
+    })
+
+    it('should filter items for dataset operator', () => {
+      vi.mocked(useAppContext).mockReturnValue({
+        ...baseAppContextValue,
+        isCurrentWorkspaceDatasetOperator: true,
+      })
+
+      renderAccountSetting()
+
+      expect(screen.queryByTitle('common.settings.provider')).not.toBeInTheDocument()
+      expect(screen.queryByTitle('common.settings.members')).not.toBeInTheDocument()
+      expect(screen.getByTitle('common.settings.language')).toBeInTheDocument()
+    })
+
+    it('should hide billing and custom tabs when disabled', () => {
+      vi.mocked(useProviderContext).mockReturnValue({
+        ...baseProviderContextValue,
+        enableBilling: false,
+        enableReplaceWebAppLogo: false,
+      })
+
+      renderAccountSetting()
+
+      expect(screen.queryByTitle('common.settings.billing')).not.toBeInTheDocument()
+      expect(screen.queryByTitle('custom.custom')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Tab Navigation', () => {
+    it('should change active tab when clicking on a menu item', async () => {
+      const user = userEvent.setup()
+
+      renderAccountSetting({ onTabChange: mockOnTabChange })
+
+      await user.click(screen.getByTitle('common.settings.provider'))
+
+      expect(mockOnTabChange).toHaveBeenCalledWith(ACCOUNT_SETTING_TAB.PROVIDER)
+      expect(screen.getByTestId('provider-page')).toBeInTheDocument()
+    })
+
+    it.each([
+      ['common.settings.billing', 'billing-page'],
+      ['common.settings.dataSource', 'data-source-page'],
+      ['common.settings.apiBasedExtension', 'api-based-extension-page'],
+      ['custom.custom', 'custom-page'],
+      ['common.settings.language', 'language-page'],
+      ['common.settings.members', 'members-page'],
+    ])('should render the "%s" page when its sidebar item is selected', async (menuTitle, pageTestId) => {
+      const user = userEvent.setup()
+
+      renderAccountSetting()
+
+      await user.click(screen.getByTitle(menuTitle))
+
+      expect(screen.getByTestId(pageTestId)).toBeInTheDocument()
+    })
+  })
+
+  describe('Interactions', () => {
+    it('should call onCancel when clicking the close button', async () => {
+      const user = userEvent.setup()
+
+      renderAccountSetting()
+
+      const closeControls = screen.getByText('ESC').parentElement
+
+      expect(closeControls).not.toBeNull()
+      if (!closeControls)
+        throw new Error('Close controls are missing')
+
+      await user.click(within(closeControls).getByRole('button'))
+
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+
+    it('should call onCancel when pressing Escape key', () => {
+      renderAccountSetting()
+
+      fireEvent.keyDown(document, { key: 'Escape' })
+
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+
+    it('should update search value in the provider tab', async () => {
+      const user = userEvent.setup()
+
+      renderAccountSetting()
+
+      await user.click(screen.getByTitle('common.settings.provider'))
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'test-search')
+
+      expect(input).toHaveValue('test-search')
+      expect(screen.getByText('provider-search:test-search')).toBeInTheDocument()
+    })
+
+    it('should handle scroll event in panel', () => {
+      renderAccountSetting()
+
+      const scrollContainer = screen.getByRole('dialog').querySelector('.overflow-y-auto')
+
+      expect(scrollContainer).toBeInTheDocument()
+      if (scrollContainer) {
+        fireEvent.scroll(scrollContainer, { target: { scrollTop: 100 } })
+        expect(scrollContainer).toHaveClass('overflow-y-auto')
+
+        fireEvent.scroll(scrollContainer, { target: { scrollTop: 0 } })
+      }
+    })
+  })
+})
--- a/web/app/components/header/account-setting/tests/menu-dialog.spec.tsx
+++ b/web/app/components/header/account-setting/tests/menu-dialog.spec.tsx
@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import MenuDialog from './menu-dialog'
+import MenuDialog from '../menu-dialog'

 describe('MenuDialog', () => {
  beforeEach(() => {
@@ -40,7 +40,8 @@ describe('MenuDialog', () => {
      )

      // Assert
-      expect(screen.getByRole('dialog')).toHaveClass('custom-class')
+      const panel = screen.getByRole('dialog').querySelector('.custom-class')
+      expect(panel).toBeInTheDocument()
    })
  })

--- a/web/app/components/header/account-setting/api-based-extension-page/tests/empty.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/tests/empty.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Empty from './empty'
+import Empty from '../empty'

 describe('Empty State', () => {
  describe('Rendering', () => {
--- a/web/app/components/header/account-setting/api-based-extension-page/tests/index.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/tests/index.spec.tsx
@@ -4,7 +4,7 @@ import type { ApiBasedExtension } from '@/models/common'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { useModalContext } from '@/context/modal-context'
 import { useApiBasedExtensions } from '@/service/use-common'
-import ApiBasedExtensionPage from './index'
+import ApiBasedExtensionPage from '../index'

 vi.mock('@/service/use-common', () => ({
  useApiBasedExtensions: vi.fn(),
--- a/web/app/components/header/account-setting/api-based-extension-page/tests/item.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/tests/item.spec.tsx
@@ -5,7 +5,7 @@ import { fireEvent, render, screen, waitFor, within } from '@testing-library/rea
 import * as reactI18next from 'react-i18next'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
-import Item from './item'
+import Item from '../item'

 // Mock dependencies
 vi.mock('@/context/modal-context', () => ({
--- a/web/app/components/header/account-setting/api-based-extension-page/tests/modal.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/tests/modal.spec.tsx
@@ -5,7 +5,7 @@ import * as reactI18next from 'react-i18next'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
-import ApiBasedExtensionModal from './modal'
+import ApiBasedExtensionModal from '../modal'

 vi.mock('@/context/i18n', () => ({
  useDocLink: vi.fn(),
--- a/web/app/components/header/account-setting/api-based-extension-page/tests/selector.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/tests/selector.spec.tsx
@@ -5,7 +5,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
 import { useApiBasedExtensions } from '@/service/use-common'
-import ApiBasedExtensionSelector from './selector'
+import ApiBasedExtensionSelector from '../selector'

 vi.mock('@/context/modal-context', () => ({
  useModalContext: vi.fn(),
--- a/web/app/components/header/account-setting/collapse/tests/index.spec.tsx
+++ b/web/app/components/header/account-setting/collapse/tests/index.spec.tsx
@@ -1,6 +1,6 @@
-import type { IItem } from './index'
+import type { IItem } from '../index'
 import { fireEvent, render, screen } from '@testing-library/react'
-import Collapse from './index'
+import Collapse from '../index'

 describe('Collapse', () => {
  const mockItems: IItem[] = [
--- a/web/app/components/header/account-setting/data-source-page-new/tests/card.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/tests/card.spec.tsx
@@ -1,4 +1,4 @@
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { usePluginAuthAction } from '@/app/components/plugins/plugin-auth'
@@ -8,8 +8,8 @@ import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useGetDataSourceOAuthUrl, useInvalidDataSourceAuth, useInvalidDataSourceListAuth, useInvalidDefaultDataSourceListAuth } from '@/service/use-datasource'
 import { useInvalidDataSourceList } from '@/service/use-pipeline'
-import Card from './card'
-import { useDataSourceAuthUpdate } from './hooks'
+import Card from '../card'
+import { useDataSourceAuthUpdate } from '../hooks'

 vi.mock('@/app/components/plugins/plugin-auth', () => ({
  ApiKeyModal: vi.fn(({ onClose, onUpdate, onRemove, disabled, editValues }: { onClose: () => void, onUpdate: () => void, onRemove: () => void, disabled: boolean, editValues: Record<string, unknown> }) => (
@@ -43,7 +43,7 @@ vi.mock('@/service/use-datasource', () => ({
  useInvalidDefaultDataSourceListAuth: vi.fn(() => vi.fn()),
 }))

-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
  useDataSourceAuthUpdate: vi.fn(),
 }))

--- a/web/app/components/header/account-setting/data-source-page-new/tests/configure.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/tests/configure.spec.tsx
@@ -1,10 +1,10 @@
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import type { FormSchema } from '@/app/components/base/form/types'
 import type { AddApiKeyButtonProps, AddOAuthButtonProps, PluginPayload } from '@/app/components/plugins/plugin-auth/types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { AuthCategory } from '@/app/components/plugins/plugin-auth/types'
-import Configure from './configure'
+import Configure from '../configure'

 /**
 * Configure Component Tests
--- a/web/app/components/header/account-setting/data-source-page-new/tests/index.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/tests/index.spec.tsx
@@ -1,5 +1,5 @@
 import type { UseQueryResult } from '@tanstack/react-query'
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import { render, screen } from '@testing-library/react'
 import { useTheme } from 'next-themes'
 import { usePluginAuthAction } from '@/app/components/plugins/plugin-auth'
@@ -7,8 +7,8 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useGetDataSourceListAuth, useGetDataSourceOAuthUrl } from '@/service/use-datasource'
 import { defaultSystemFeatures } from '@/types/feature'
-import { useDataSourceAuthUpdate, useMarketplaceAllPlugins } from './hooks'
-import DataSourcePage from './index'
+import { useDataSourceAuthUpdate, useMarketplaceAllPlugins } from '../hooks'
+import DataSourcePage from '../index'

 /**
 * DataSourcePage Component Tests
@@ -33,7 +33,7 @@ vi.mock('@/service/use-datasource', () => ({
  useGetDataSourceOAuthUrl: vi.fn(),
 }))

-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
  useDataSourceAuthUpdate: vi.fn(),
  useMarketplaceAllPlugins: vi.fn(),
 }))
--- a/web/app/components/header/account-setting/data-source-page-new/tests/install-from-marketplace.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/tests/install-from-marketplace.spec.tsx
@@ -1,10 +1,10 @@
-import type { DataSourceAuth } from './types'
+import type { DataSourceAuth } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { useTheme } from 'next-themes'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { useMarketplaceAllPlugins } from './hooks'
-import InstallFromMarketplace from './install-from-marketplace'
+import { useMarketplaceAllPlugins } from '../hooks'
+import InstallFromMarketplace from '../install-from-marketplace'

 /**
 * InstallFromMarketplace Component Tests
@@ -54,7 +54,7 @@ vi.mock('@/app/components/plugins/provider-card', () => ({
  ),
 }))

-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
  useMarketplaceAllPlugins: vi.fn(),
 }))

--- a/web/app/components/header/account-setting/data-source-page-new/tests/item.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/tests/item.spec.tsx
@@ -1,7 +1,7 @@
-import type { DataSourceCredential } from './types'
+import type { DataSourceCredential } from '../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
-import Item from './item'
+import Item from '../item'

 /**
 * Item Component Tests
--- a/web/app/components/header/account-setting/data-source-page-new/tests/operator.spec.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/tests/operator.spec.tsx
@@ -1,7 +1,7 @@
-import type { DataSourceCredential } from './types'
+import type { DataSourceCredential } from '../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
-import Operator from './operator'
+import Operator from '../operator'

 /**
 * Operator Component Tests
--- a/web/app/components/header/account-setting/data-source-page-new/hooks/tests/use-data-source-auth-update.spec.ts
+++ b/web/app/components/header/account-setting/data-source-page-new/hooks/tests/use-data-source-auth-update.spec.ts
@@ -5,7 +5,7 @@ import {
  useInvalidDefaultDataSourceListAuth,
 } from '@/service/use-datasource'
 import { useInvalidDataSourceList } from '@/service/use-pipeline'
-import { useDataSourceAuthUpdate } from './use-data-source-auth-update'
+import { useDataSourceAuthUpdate } from '../use-data-source-auth-update'

 /**
 * useDataSourceAuthUpdate Hook Tests
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
yyh	c1e834742b	Merge branch 'main' into 3-16-revert-changes	2026-03-16 19:57:42 +08:00
dependabot[bot]	c7f86dba09	chore(deps-dev): bump the dev group across 1 directory with 19 updates (#33525 ) Some checks failed autofix.ci / autofix (push) Has been cancelled Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/amd64, build-api-amd64) (push) Has been cancelled Details Build and Push API & Web / build (api, DIFY_API_IMAGE_NAME, linux/arm64, build-api-arm64) (push) Has been cancelled Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/amd64, build-web-amd64) (push) Has been cancelled Details Build and Push API & Web / build (web, DIFY_WEB_IMAGE_NAME, linux/arm64, build-web-arm64) (push) Has been cancelled Details Build and Push API & Web / create-manifest (api, DIFY_API_IMAGE_NAME, merge-api-images) (push) Has been cancelled Details Build and Push API & Web / create-manifest (web, DIFY_WEB_IMAGE_NAME, merge-web-images) (push) Has been cancelled Details Main CI Pipeline / Check Changed Files (push) Has been cancelled Details Main CI Pipeline / API Tests (push) Has been cancelled Details Main CI Pipeline / Web Tests (push) Has been cancelled Details Main CI Pipeline / Style Check (push) Has been cancelled Details Main CI Pipeline / VDB Tests (push) Has been cancelled Details Main CI Pipeline / DB Migration Test (push) Has been cancelled Details Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>	2026-03-16 20:31:58 +09:00
autofix-ci[bot]	9d2755eb85	[autofix.ci] apply automated fixes	2026-03-16 10:57:04 +00:00
Stephen Zhou	b80b0bd7a3	chore: bring back monaco-editor-react, revert #32966	2026-03-16 18:53:20 +08:00
Coding On Star	6da802eb2a	refactor(custom): reorganize web app brand module and raise coverage threshold (#33531 ) Co-authored-by: CodingOnStar <hanxujiang@dify.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>	2026-03-16 18:17:21 +08:00