diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 0dd4cdb0b8..0617301542 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -119,6 +119,11 @@
       "count": 3
     }
   },
+  "web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
     "react/static-components": {
       "count": 2
@@ -147,17 +152,63 @@
       "count": 1
     }
   },
+  "web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/(shareLayout)/webapp-reset-password/layout.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/(shareLayout)/webapp-reset-password/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/(shareLayout)/webapp-signin/check-code/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
+  "web/app/account/(commonLayout)/account-page/email-change-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/account/(commonLayout)/account-page/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/account/(commonLayout)/delete-account/components/check-email.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/account/(commonLayout)/delete-account/components/verify-email.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -172,6 +223,11 @@
       "count": 1
     }
   },
+  "web/app/components/app-sidebar/app-info/app-info-modals.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app-sidebar/app-info/app-operations.tsx": {
     "react/set-state-in-effect": {
       "count": 4
@@ -220,6 +276,11 @@
       "count": 1
     }
   },
+  "web/app/components/app/annotation/filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/annotation/header-opts/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -279,11 +340,21 @@
       "count": 2
     }
   },
+  "web/app/components/app/configuration/config-var/config-modal/form-fields.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/configuration/config-var/config-modal/index.tsx": {
     "ts/no-explicit-any": {
       "count": 4
     }
   },
+  "web/app/components/app/configuration/config-var/config-string/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/configuration/config-var/select-var-type.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -370,6 +441,9 @@
     }
   },
   "web/app/components/app/configuration/dataset-config/settings-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 2
     },
@@ -387,6 +461,11 @@
       "count": 1
     }
   },
+  "web/app/components/app/configuration/debug/chat-user-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx": {
     "ts/no-explicit-any": {
       "count": 6
@@ -425,11 +504,21 @@
       "count": 1
     }
   },
+  "web/app/components/app/configuration/prompt-value-panel/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/configuration/prompt-value-panel/utils.ts": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/components/app/create-app-dialog/app-list/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/create-app-dialog/app-list/sidebar.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -438,10 +527,18 @@
       "count": 1
     }
   },
+  "web/app/components/app/create-app-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/create-from-dsl-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react-refresh/only-export-components": {
       "count": 1
     },
@@ -449,7 +546,15 @@
       "count": 2
     }
   },
+  "web/app/components/app/duplicate-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/log/filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react-refresh/only-export-components": {
       "count": 1
     }
@@ -480,12 +585,25 @@
       "count": 1
     }
   },
+  "web/app/components/app/overview/settings/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/overview/trigger-card.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/components/app/overview/workflow-hidden-input-fields.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/app/switch-app-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 1
     }
@@ -501,6 +619,9 @@
     }
   },
   "web/app/components/app/workflow-log/filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react-refresh/only-export-components": {
       "count": 1
     }
@@ -515,6 +636,11 @@
       "count": 1
     }
   },
+  "web/app/components/apps/list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/apps/new-app-card.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -675,6 +801,9 @@
     }
   },
   "web/app/components/base/chat/chat-with-history/inputs-form/content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -684,6 +813,11 @@
       "count": 1
     }
   },
+  "web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/base/chat/chat/answer/agent-content.tsx": {
     "style/multiline-ternary": {
       "count": 2
@@ -770,6 +904,9 @@
     }
   },
   "web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -799,6 +936,11 @@
       "count": 1
     }
   },
+  "web/app/components/base/emoji-picker/Inner.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/base/error-boundary/index.tsx": {
     "react-refresh/only-export-components": {
       "count": 3
@@ -901,6 +1043,11 @@
       "count": 3
     }
   },
+  "web/app/components/base/form/components/base/base-field.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/base/form/components/base/base-form.tsx": {
     "ts/no-explicit-any": {
       "count": 6
@@ -1321,6 +1468,11 @@
       "count": 9
     }
   },
+  "web/app/components/base/markdown-blocks/form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/base/markdown-blocks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 10
@@ -1420,6 +1572,9 @@
     }
   },
   "web/app/components/base/pagination/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -1507,6 +1662,11 @@
       "count": 2
     }
   },
+  "web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/base/prompt-editor/plugins/last-run-block/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -1727,6 +1887,9 @@
   "web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 1
+    },
+    "no-restricted-imports": {
+      "count": 1
     }
   },
   "web/app/components/datasets/create-from-pipeline/list/template-card/details/types.ts": {
@@ -1734,6 +1897,16 @@
       "count": 1
     }
   },
+  "web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/create/file-preview/index.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -1759,6 +1932,11 @@
       "count": 5
     }
   },
+  "web/app/components/datasets/create/step-two/components/inputs.tsx": {
+    "no-restricted-imports": {
+      "count": 2
+    }
+  },
   "web/app/components/datasets/create/step-two/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 6
@@ -1846,6 +2024,16 @@
       "count": 4
     }
   },
+  "web/app/components/datasets/documents/components/documents-header.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/datasets/documents/components/rename-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -1856,6 +2044,11 @@
       "count": 1
     }
   },
+  "web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx": {
     "react/set-state-in-effect": {
       "count": 5
@@ -1922,11 +2115,21 @@
       "count": 2
     }
   },
+  "web/app/components/datasets/documents/detail/completed/child-segment-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx": {
     "react/set-state-in-effect": {
       "count": 1
     }
   },
+  "web/app/components/datasets/documents/detail/completed/components/menu-bar.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/documents/detail/completed/components/segment-list-content.tsx": {
     "ts/no-non-null-asserted-optional-chain": {
       "count": 1
@@ -1965,6 +2168,11 @@
       "count": 1
     }
   },
+  "web/app/components/datasets/documents/detail/metadata/components/field-info.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/documents/detail/metadata/components/metadata-field-list.tsx": {
     "ts/no-non-null-asserted-optional-chain": {
       "count": 1
@@ -1993,16 +2201,29 @@
       "count": 3
     }
   },
+  "web/app/components/datasets/external-api/external-api-modal/Form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx": {
     "react/set-state-in-effect": {
       "count": 1
     }
   },
   "web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 1
     }
   },
+  "web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/formatted-text/flavours/edit-slice.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -2028,7 +2249,15 @@
       "count": 1
     }
   },
+  "web/app/components/datasets/list/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -2046,16 +2275,41 @@
       "count": 2
     }
   },
+  "web/app/components/datasets/metadata/metadata-dataset/create-content.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/metadata/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
     }
   },
+  "web/app/components/datasets/rename-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/datasets/settings/chunk-structure/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
     }
   },
+  "web/app/components/datasets/settings/form/components/basic-info-section.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/datasets/settings/permission-selector/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/develop/code.tsx": {
     "ts/no-explicit-any": {
       "count": 7
@@ -2074,6 +2328,11 @@
       "count": 2
     }
   },
+  "web/app/components/explore/app-list/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/explore/banner/banner-item.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -2090,6 +2349,11 @@
       "count": 2
     }
   },
+  "web/app/components/explore/create-app-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/explore/try-app/tab.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -2151,6 +2415,11 @@
       "count": 4
     }
   },
+  "web/app/components/goto-anything/components/search-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/goto-anything/context.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
@@ -2190,6 +2459,9 @@
     }
   },
   "web/app/components/header/account-setting/data-source-page-new/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2204,14 +2476,27 @@
       "count": 1
     }
   },
+  "web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
+  "web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/header/account-setting/model-provider-page/declarations.ts": {
     "erasable-syntax-only/enums": {
       "count": 11
@@ -2379,6 +2664,11 @@
       "count": 1
     }
   },
+  "web/app/components/plugins/marketplace/search-box/tags-filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/plugins/plugin-auth/authorized-in-node.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2390,6 +2680,9 @@
     }
   },
   "web/app/components/plugins/plugin-auth/authorized/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2434,6 +2727,9 @@
     }
   },
   "web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 8
     }
@@ -2503,6 +2799,11 @@
       "count": 1
     }
   },
+  "web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -2526,6 +2827,11 @@
       "count": 7
     }
   },
+  "web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-base-form.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2561,6 +2867,21 @@
       "count": 2
     }
   },
+  "web/app/components/plugins/plugin-page/filter-management/category-filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/plugins/plugin-page/filter-management/search-box.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/plugins/reference-setting-modal/auto-update-setting/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -2668,6 +2989,11 @@
       "count": 4
     }
   },
+  "web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/rag-pipeline/components/rag-pipeline-children.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2767,6 +3093,9 @@
     }
   },
   "web/app/components/share/text-generation/run-once/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 1
     },
@@ -2784,7 +3113,20 @@
       "count": 2
     }
   },
+  "web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/tools/edit-custom-collection-modal/get-schema.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/tools/edit-custom-collection-modal/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 4
     },
@@ -2793,26 +3135,62 @@
     }
   },
   "web/app/components/tools/edit-custom-collection-modal/test-api.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/components/tools/labels/filter.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/tools/labels/selector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/tools/mcp/create-card.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/components/tools/mcp/headers-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/tools/mcp/mcp-server-param-item.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/components/tools/mcp/modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/tools/mcp/provider-card.tsx": {
     "ts/no-explicit-any": {
       "count": 3
     }
   },
+  "web/app/components/tools/mcp/sections/authentication-section.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/tools/mcp/sections/configurations-section.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/tools/provider-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2835,6 +3213,11 @@
       "count": 4
     }
   },
+  "web/app/components/tools/workflow-tool/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow-app/components/__tests__/workflow-children.spec.tsx": {
     "react/static-components": {
       "count": 2
@@ -2902,7 +3285,7 @@
   },
   "web/app/components/workflow/block-selector/main.tsx": {
     "no-restricted-imports": {
-      "count": 1
+      "count": 2
     }
   },
   "web/app/components/workflow/block-selector/market-place-plugin/item.tsx": {
@@ -3086,6 +3469,9 @@
     }
   },
   "web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 11
     }
@@ -3130,6 +3516,9 @@
     }
   },
   "web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -3142,6 +3531,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/_base/components/form-input-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -3169,6 +3563,9 @@
     }
   },
   "web/app/components/workflow/nodes/_base/components/memory-config.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -3193,6 +3590,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/_base/components/selector.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -3209,6 +3611,9 @@
     }
   },
   "web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-non-null-asserted-optional-chain": {
       "count": 1
     }
@@ -3219,10 +3624,18 @@
     }
   },
   "web/app/components/workflow/nodes/_base/components/variable/var-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/unsupported-syntax": {
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx": {
     "react/static-components": {
       "count": 2
@@ -3356,6 +3769,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/assigner/components/var-list/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/assigner/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -3389,6 +3807,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/code/dependency-picker.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/code/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -3476,6 +3899,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/http/components/authorization/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -3486,6 +3914,11 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/http/components/timeout/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/http/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -3509,6 +3942,16 @@
       "count": 5
     }
   },
+  "web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx": {
     "react/unsupported-syntax": {
       "count": 1
@@ -3525,6 +3968,16 @@
       "count": 3
     }
   },
+  "web/app/components/workflow/nodes/human-input/components/timeout.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/workflow/nodes/human-input/components/user-action.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx": {
     "react-refresh/only-export-components": {
       "count": 2
@@ -3570,11 +4023,21 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/iteration/panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/iteration/use-single-run-form-params.ts": {
     "ts/no-explicit-any": {
       "count": 6
     }
   },
+  "web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hooks.tsx": {
     "ts/no-explicit-any": {
       "count": 4
@@ -3603,11 +4066,26 @@
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-number.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-string.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/knowledge-retrieval/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -3726,11 +4204,17 @@
     }
   },
   "web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
   "web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -3769,6 +4253,9 @@
     }
   },
   "web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -3940,6 +4427,16 @@
       "count": 10
     }
   },
+  "web/app/components/workflow/nodes/trigger-schedule/panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx": {
     "ts/no-non-null-asserted-optional-chain": {
       "count": 1
@@ -4022,6 +4519,9 @@
     }
   },
   "web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -4042,6 +4542,11 @@
       "count": 2
     }
   },
+  "web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/components/workflow/panel/chat-variable-panel/type.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -4063,6 +4568,9 @@
     }
   },
   "web/app/components/workflow/panel/env-panel/variable-modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "react/set-state-in-effect": {
       "count": 4
     },
@@ -4328,11 +4836,26 @@
       "count": 5
     }
   },
+  "web/app/education-apply/search-input.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/forgot-password/ChangePasswordForm.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/forgot-password/ForgotPasswordForm.spec.tsx": {
     "ts/no-explicit-any": {
       "count": 5
     }
   },
+  "web/app/forgot-password/ForgotPasswordForm.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/init/InitPasswordPopup.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -4343,31 +4866,89 @@
       "count": 7
     }
   },
+  "web/app/install/installForm.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/layout.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
     }
   },
+  "web/app/reset-password/check-code/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/reset-password/layout.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/reset-password/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/reset-password/set-password/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/signin/check-code/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/signin/components/mail-and-code-auth.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/signin/components/mail-and-password-auth.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/signin/invite-settings/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/signin/layout.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/signin/one-more-step.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/signup/check-code/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "web/app/signup/components/input-mail.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/app/signup/layout.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
+  "web/app/signup/set-password/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "web/context/external-api-panel-context.tsx": {
     "react-refresh/only-export-components": {
       "count": 1
diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json
index a7dbac0f1c..b18b8f3462 100644
--- a/packages/dify-ui/package.json
+++ b/packages/dify-ui/package.json
@@ -65,6 +65,10 @@
       "types": "./src/form/index.tsx",
       "import": "./src/form/index.tsx"
     },
+    "./input": {
+      "types": "./src/input/index.tsx",
+      "import": "./src/input/index.tsx"
+    },
     "./meter": {
       "types": "./src/meter/index.tsx",
       "import": "./src/meter/index.tsx"
diff --git a/packages/dify-ui/src/field/index.tsx b/packages/dify-ui/src/field/index.tsx
index 12f0ba6ce8..c6b871914e 100644
--- a/packages/dify-ui/src/field/index.tsx
+++ b/packages/dify-ui/src/field/index.tsx
@@ -3,8 +3,8 @@
 import type { Field as BaseFieldNS } from '@base-ui/react/field'
 import type { VariantProps } from 'class-variance-authority'
 import { Field as BaseField } from '@base-ui/react/field'
-import { cva } from 'class-variance-authority'
 import { cn } from '../cn'
+import { textControlVariants } from '../text-control-variants'
 
 export type FieldRootProps
   = Omit<BaseFieldNS.Root.Props, 'className'>
@@ -62,37 +62,11 @@ export function FieldLabel({
   )
 }
 
-const fieldControlVariants = cva(
-  [
-    'w-full appearance-none border border-transparent bg-components-input-bg-normal text-components-input-text-filled caret-primary-600 outline-hidden transition-[background-color,border-color,box-shadow]',
-    'placeholder:text-components-input-text-placeholder',
-    'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-    'focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
-    'data-invalid:border-components-input-border-destructive data-invalid:bg-components-input-bg-destructive',
-    'read-only:cursor-default read-only:shadow-none read-only:hover:border-transparent read-only:hover:bg-components-input-bg-normal read-only:focus:border-transparent read-only:focus:bg-components-input-bg-normal read-only:focus:shadow-none',
-    'disabled:cursor-not-allowed disabled:border-transparent disabled:bg-components-input-bg-disabled disabled:text-components-input-text-filled-disabled',
-    'disabled:hover:border-transparent disabled:hover:bg-components-input-bg-disabled',
-    'motion-reduce:transition-none',
-  ],
-  {
-    variants: {
-      size: {
-        small: 'rounded-md px-2 py-[3px] system-xs-regular',
-        medium: 'rounded-lg px-3 py-[7px] system-sm-regular',
-        large: 'rounded-[10px] px-4 py-[7px] system-md-regular',
-      },
-    },
-    defaultVariants: {
-      size: 'medium',
-    },
-  },
-)
-
-export type FieldControlSize = NonNullable<VariantProps<typeof fieldControlVariants>['size']>
+export type FieldControlSize = NonNullable<VariantProps<typeof textControlVariants>['size']>
 
 export type FieldControlProps
   = Omit<BaseFieldNS.Control.Props, 'className' | 'size'>
-    & VariantProps<typeof fieldControlVariants>
+    & VariantProps<typeof textControlVariants>
     & {
       className?: string
     }
@@ -106,7 +80,7 @@ export function FieldControl({
 }: FieldControlProps) {
   return (
     <BaseField.Control
-      className={cn(fieldControlVariants({ size }), className)}
+      className={cn(textControlVariants({ size }), className)}
       {...props}
     />
   )
diff --git a/packages/dify-ui/src/input/__tests__/index.spec.tsx b/packages/dify-ui/src/input/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..599775b8ac
--- /dev/null
+++ b/packages/dify-ui/src/input/__tests__/index.spec.tsx
@@ -0,0 +1,83 @@
+import { render } from 'vitest-browser-react'
+import { FieldControl, FieldError, FieldLabel, FieldRoot } from '../../field'
+import { Form } from '../../form'
+import { Input } from '../index'
+
+const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
+
+describe('Input', () => {
+  it('should render a labelled Base UI input with design-system classes', async () => {
+    const screen = await render(
+      <label>
+        Workspace name
+        <Input name="workspaceName" defaultValue="Dify" />
+      </label>,
+    )
+
+    const input = screen.getByRole('textbox', { name: 'Workspace name' })
+
+    await expect.element(input).toHaveValue('Dify')
+    await expect.element(input).toHaveClass('rounded-lg', 'py-[7px]', 'system-sm-regular')
+  })
+
+  it('should apply size variants shared with FieldControl', async () => {
+    const screen = await render(
+      <>
+        <label>
+          Small input
+          <Input size="small" />
+        </label>
+        <div>
+          Large field
+          <FieldRoot name="largeField">
+            <FieldLabel>Large field</FieldLabel>
+            <FieldControl size="large" />
+          </FieldRoot>
+        </div>
+      </>,
+    )
+
+    await expect.element(screen.getByRole('textbox', { name: 'Small input' })).toHaveClass('rounded-md', 'py-[3px]', 'system-xs-regular')
+    await expect.element(screen.getByRole('textbox', { name: 'Large field' })).toHaveClass('rounded-[10px]', 'py-[7px]', 'system-md-regular')
+  })
+
+  it('should use FieldRoot invalid state', async () => {
+    const screen = await render(
+      <FieldRoot name="repositoryUrl" invalid>
+        <FieldLabel>Repository URL</FieldLabel>
+        <Input defaultValue="github.com/langgenius" />
+      </FieldRoot>,
+    )
+
+    const input = screen.getByRole('textbox', { name: 'Repository URL' })
+
+    await expect.element(input).toHaveAttribute('aria-invalid', 'true')
+    await expect.element(input).toHaveAttribute('data-invalid')
+    await expect.element(input).toHaveClass('data-invalid:border-components-input-border-destructive')
+  })
+
+  it('should integrate with FieldRoot and Base UI Form validation', async () => {
+    const onFormSubmit = vi.fn()
+    const screen = await render(
+      <Form aria-label="account form" onFormSubmit={onFormSubmit}>
+        <FieldRoot name="email">
+          <FieldLabel>Email</FieldLabel>
+          <Input type="email" required />
+          <FieldError match="valueMissing">Email is required.</FieldError>
+        </FieldRoot>
+        <button type="submit">Save</button>
+      </Form>,
+    )
+
+    const input = screen.getByRole('textbox', { name: 'Email' })
+
+    asHTMLElement(screen.getByRole('button', { name: 'Save' }).element()).click()
+
+    await vi.waitFor(async () => {
+      await expect.element(screen.getByText('Email is required.')).toBeInTheDocument()
+      await expect.element(input).toHaveAttribute('aria-invalid', 'true')
+      await expect.element(input).toHaveAttribute('data-invalid')
+    })
+    expect(onFormSubmit).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/dify-ui/src/input/index.stories.tsx b/packages/dify-ui/src/input/index.stories.tsx
new file mode 100644
index 0000000000..453d7ba02b
--- /dev/null
+++ b/packages/dify-ui/src/input/index.stories.tsx
@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Button } from '../button'
+import {
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FieldRoot,
+} from '../field'
+import { Form } from '../form'
+import { Input } from './index'
+
+const meta = {
+  title: 'Base/Form/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A standalone text input primitive built on Base UI Input. Use it for labelled text boxes outside FieldControl, and keep FieldControl for full FieldRoot form composition.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Input>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  render: () => (
+    <div className="w-80">
+      <label htmlFor="workspace-name" className="mb-1 block w-fit py-1 text-text-secondary system-sm-medium">
+        Workspace name
+      </label>
+      <Input
+        id="workspace-name"
+        name="workspaceName"
+        autoComplete="organization"
+        placeholder="e.g. Acme workspace…"
+      />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="grid w-80 gap-3">
+      <label className="grid gap-1 text-text-secondary system-sm-medium" htmlFor="small-input">
+        Small
+        <Input id="small-input" size="small" name="smallInput" placeholder="e.g. tag…" autoComplete="off" />
+      </label>
+      <label className="grid gap-1 text-text-secondary system-sm-medium" htmlFor="medium-input">
+        Medium
+        <Input id="medium-input" name="mediumInput" placeholder="e.g. Production API…" autoComplete="off" />
+      </label>
+      <label className="grid gap-1 text-text-secondary system-sm-medium" htmlFor="large-input">
+        Large
+        <Input id="large-input" size="large" name="largeInput" placeholder="e.g. Customer portal…" autoComplete="off" />
+      </label>
+    </div>
+  ),
+}
+
+export const States: Story = {
+  render: () => (
+    <div className="grid w-80 gap-3">
+      <div className="grid gap-1">
+        <label className="text-text-secondary system-sm-medium" htmlFor="placeholder-state">Placeholder</label>
+        <Input id="placeholder-state" name="placeholderState" placeholder="e.g. Search datasets…" autoComplete="off" />
+      </div>
+      <div className="grid gap-1">
+        <label className="text-text-secondary system-sm-medium" htmlFor="filled-state">Filled</label>
+        <Input id="filled-state" name="filledState" defaultValue="Customer knowledge base" autoComplete="off" />
+      </div>
+      <div className="grid gap-1">
+        <FieldRoot name="repositoryUrl" invalid>
+          <FieldLabel>Invalid</FieldLabel>
+          <Input
+            id="invalid-state"
+            type="url"
+            inputMode="url"
+            defaultValue="github.com/langgenius"
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <FieldError match>Enter a full URL including https://.</FieldError>
+        </FieldRoot>
+      </div>
+      <div className="grid gap-1">
+        <label className="text-text-secondary system-sm-medium" htmlFor="disabled-state">Disabled</label>
+        <Input id="disabled-state" disabled name="disabledEmail" type="email" inputMode="email" placeholder="name@example.com…" autoComplete="email" spellCheck={false} />
+      </div>
+      <div className="grid gap-1">
+        <label className="text-text-secondary system-sm-medium" htmlFor="readonly-state">Read-only</label>
+        <Input id="readonly-state" readOnly name="endpoint" type="url" inputMode="url" defaultValue="https://api.example.com" autoComplete="url" spellCheck={false} />
+      </div>
+    </div>
+  ),
+}
+
+export const WithField: Story = {
+  render: () => (
+    <Form aria-label="Account form" className="grid w-80 gap-4" onFormSubmit={() => undefined}>
+      <FieldRoot name="email">
+        <FieldLabel>Email</FieldLabel>
+        <Input type="email" inputMode="email" required autoComplete="email" placeholder="name@example.com…" spellCheck={false} />
+        <FieldDescription>Used for account notifications.</FieldDescription>
+        <FieldError match="valueMissing">Email is required.</FieldError>
+        <FieldError match="typeMismatch">Enter a valid email address.</FieldError>
+      </FieldRoot>
+      <FieldRoot name="repositoryUrl">
+        <FieldLabel>Repository URL</FieldLabel>
+        <Input type="url" inputMode="url" required autoComplete="off" placeholder="https://github.com/langgenius/dify…" spellCheck={false} />
+        <FieldDescription>Use the full GitHub repository URL.</FieldDescription>
+        <FieldError match="valueMissing">Repository URL is required.</FieldError>
+        <FieldError match="typeMismatch">Enter a valid URL.</FieldError>
+      </FieldRoot>
+      <div className="flex justify-end">
+        <Button type="submit" variant="primary">Save Settings</Button>
+      </div>
+    </Form>
+  ),
+}
diff --git a/packages/dify-ui/src/input/index.tsx b/packages/dify-ui/src/input/index.tsx
new file mode 100644
index 0000000000..cabac346c1
--- /dev/null
+++ b/packages/dify-ui/src/input/index.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import type { Input as BaseInputNS } from '@base-ui/react/input'
+import type { VariantProps } from 'class-variance-authority'
+import { Input as BaseInput } from '@base-ui/react/input'
+import { cn } from '../cn'
+import { textControlVariants } from '../text-control-variants'
+
+export type InputSize = NonNullable<VariantProps<typeof textControlVariants>['size']>
+
+export type InputProps
+  = Omit<BaseInputNS.Props, 'className' | 'size'>
+    & VariantProps<typeof textControlVariants>
+    & {
+      className?: string
+    }
+
+export type InputChangeEventDetails = BaseInputNS.ChangeEventDetails
+
+export function Input({
+  className,
+  size = 'medium',
+  ...props
+}: InputProps) {
+  return (
+    <BaseInput
+      className={cn(textControlVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
diff --git a/packages/dify-ui/src/text-control-variants.ts b/packages/dify-ui/src/text-control-variants.ts
new file mode 100644
index 0000000000..2943c00cd7
--- /dev/null
+++ b/packages/dify-ui/src/text-control-variants.ts
@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority'
+
+export const textControlVariants = cva(
+  [
+    'w-full appearance-none border border-transparent bg-components-input-bg-normal text-components-input-text-filled caret-primary-600 outline-hidden transition-[background-color,border-color,box-shadow]',
+    'placeholder:text-components-input-text-placeholder',
+    'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
+    'focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
+    'data-invalid:border-components-input-border-destructive data-invalid:bg-components-input-bg-destructive',
+    'read-only:cursor-default read-only:shadow-none read-only:hover:border-transparent read-only:hover:bg-components-input-bg-normal read-only:focus:border-transparent read-only:focus:bg-components-input-bg-normal read-only:focus:shadow-none',
+    'disabled:cursor-not-allowed disabled:border-transparent disabled:bg-components-input-bg-disabled disabled:text-components-input-text-filled-disabled',
+    'disabled:hover:border-transparent disabled:hover:bg-components-input-bg-disabled',
+    'motion-reduce:transition-none',
+  ],
+  {
+    variants: {
+      size: {
+        small: 'rounded-md px-2 py-[3px] system-xs-regular',
+        medium: 'rounded-lg px-3 py-[7px] system-sm-regular',
+        large: 'rounded-[10px] px-4 py-[7px] system-md-regular',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+    },
+  },
+)
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index 37f42a42ba..3e421fc21c 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -2,12 +2,12 @@ import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
 import { Button } from '@langgenius/dify-ui/button'
 import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { FieldControl, FieldLabel, FieldRoot } from '@langgenius/dify-ui/field'
 import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Input from '../../base/input'
 import Textarea from '../../base/textarea'
 
 type VersionInfoModalProps = {
@@ -57,10 +57,6 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
     onClose()
   }
 
-  const handleTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setTitle(e.target.value)
-  }, [])
-
   const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setReleaseNotes(e.target.value)
   }, [])
@@ -89,17 +85,16 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
           </button>
         </div>
         <div className="flex flex-col gap-y-4 px-6 py-3">
-          <div className="flex flex-col gap-y-1">
-            <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
+          <FieldRoot name="title" invalid={titleError} className="gap-y-1">
+            <FieldLabel className="flex h-6 items-center py-0 system-sm-semibold text-text-secondary">
               {t('versionHistory.editField.title', { ns: 'workflow' })}
-            </div>
-            <Input
+            </FieldLabel>
+            <FieldControl
               value={title}
               placeholder={`${t('versionHistory.nameThisVersion', { ns: 'workflow' })}${t('panel.optional', { ns: 'workflow' })}`}
-              onChange={handleTitleChange}
-              destructive={titleError}
+              onValueChange={setTitle}
             />
-          </div>
+          </FieldRoot>
           <div className="flex flex-col gap-y-1">
             <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
               {t('versionHistory.editField.releaseNotes', { ns: 'workflow' })}
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index c4755e3835..c3dff4d262 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -22,6 +22,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@langgenius/dify-ui/dropdown-menu'
+import { FieldControl, FieldLabel, FieldRoot } from '@langgenius/dify-ui/field'
 import { toast } from '@langgenius/dify-ui/toast'
 import {
   Tooltip,
@@ -30,11 +31,10 @@ import {
 } from '@langgenius/dify-ui/tooltip'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import * as React from 'react'
-import { useCallback, useId, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
-import Input from '@/app/components/base/input'
 import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@@ -209,7 +209,6 @@ const AppCardOperationsMenuContent: React.FC<AppCardOperationsMenuContentProps>
 
 const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () => {} }: AppCardProps) => {
   const { t } = useTranslation()
-  const deleteAppNameInputId = useId()
   const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
   const { isCurrentWorkspaceEditor } = useAppContext()
   const { onPlanInfoChanged } = useProviderContext()
@@ -631,8 +630,8 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
               <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
                 {t('deleteAppConfirmContent', { ns: 'app' })}
               </AlertDialogDescription>
-              <div className="mt-2">
-                <label htmlFor={deleteAppNameInputId} className="mb-1 block system-sm-regular text-text-secondary">
+              <FieldRoot name="confirm-app-name" className="mt-2">
+                <FieldLabel className="mb-1 block py-0 system-sm-regular text-text-secondary">
                   <Trans
                     i18nKey="deleteAppConfirmInputLabel"
                     ns="app"
@@ -641,19 +640,17 @@ const AppCard = ({ app, onlineUsers = [], onRefresh, onOpenTagManagement = () =>
                       appName: <span className="system-sm-semibold text-text-primary" translate="no" />,
                     }}
                   />
-                </label>
-                <Input
-                  id={deleteAppNameInputId}
-                  name="confirm-app-name"
+                </FieldLabel>
+                <FieldControl
                   type="text"
                   autoComplete="off"
                   spellCheck={false}
                   placeholder={t('deleteAppConfirmInputPlaceholder', { ns: 'app' })}
                   value={confirmDeleteInput}
-                  onChange={e => setConfirmDeleteInput(e.target.value)}
+                  onValueChange={setConfirmDeleteInput}
                   className="border-components-input-border-hover bg-components-input-bg-normal focus:border-components-input-border-active focus:bg-components-input-bg-active"
                 />
-              </div>
+              </FieldRoot>
             </div>
             <AlertDialogActions>
               <AlertDialogCancelButton type="button" disabled={isDeleting}>
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index ac486ec59a..9fa00eb487 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -22,6 +22,11 @@ export const inputVariants = cva(
   },
 )
 
+/**
+ * @deprecated Use `@langgenius/dify-ui/input` for primitive inputs and
+ * `@langgenius/dify-ui/field` for form composition. Search inputs should use
+ * a dedicated composition built on the primitive input.
+ */
 export type InputProps = {
   showLeftIcon?: boolean
   showClearIcon?: boolean
@@ -36,6 +41,11 @@ export type InputProps = {
 
 const removeLeadingZeros = (value: string) => value.replace(/^(-?)0+(?=\d)/, '$1')
 
+/**
+ * @deprecated Use `@langgenius/dify-ui/input` for primitive inputs and
+ * `@langgenius/dify-ui/field` for form composition. Search inputs should use
+ * a dedicated composition built on the primitive input.
+ */
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   size,
   disabled,
diff --git a/web/app/components/datasets/create/website/__tests__/base.spec.tsx b/web/app/components/datasets/create/website/__tests__/base.spec.tsx
index b6ce254c3d..573fd40658 100644
--- a/web/app/components/datasets/create/website/__tests__/base.spec.tsx
+++ b/web/app/components/datasets/create/website/__tests__/base.spec.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'
 import CrawledResult from '../base/crawled-result'
 import CrawledResultItem from '../base/crawled-result-item'
 import Header from '../base/header'
-import Input from '../base/input'
+import Input from '../base/text-input'
 
 const createCrawlResultItem = (overrides: Partial<CrawlResultItem> = {}): CrawlResultItem => ({
   title: 'Test Page Title',
diff --git a/web/app/components/datasets/create/website/base/__tests__/input.spec.tsx b/web/app/components/datasets/create/website/base/__tests__/input.spec.tsx
index c8d5301156..e68bc49ebf 100644
--- a/web/app/components/datasets/create/website/base/__tests__/input.spec.tsx
+++ b/web/app/components/datasets/create/website/base/__tests__/input.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Input from '../input'
+import Input from '../text-input'
 
 describe('WebsiteInput', () => {
   const onChange = vi.fn()
diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index 423fa54823..42e32b987f 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { Infotip } from '@/app/components/base/infotip'
-import Input from './input'
+import Input from './text-input'
 
 type Props = {
   className?: string
diff --git a/web/app/components/datasets/create/website/base/input.tsx b/web/app/components/datasets/create/website/base/text-input.tsx
similarity index 100%
rename from web/app/components/datasets/create/website/base/input.tsx
rename to web/app/components/datasets/create/website/base/text-input.tsx
diff --git a/web/app/components/datasets/create/website/base/url-input.tsx b/web/app/components/datasets/create/website/base/url-input.tsx
index 6f49235e8b..da6dc76845 100644
--- a/web/app/components/datasets/create/website/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/base/url-input.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDocLink } from '@/context/i18n'
-import Input from './input'
+import Input from './text-input'
 
 const I18N_PREFIX = 'stepOne.website'
 
diff --git a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
index 77887c4301..9d0cbfe169 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
+import { Input } from '@langgenius/dify-ui/input'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDocLink } from '@/context/i18n'
-import Input from '../../base/input'
 
 const I18N_PREFIX = 'stepOne.website'
 
@@ -21,9 +21,6 @@ const UrlInput: FC<Props> = ({
   const { t } = useTranslation()
   const docLink = useDocLink()
   const [url, setUrl] = useState('')
-  const handleUrlChange = useCallback((url: string | number) => {
-    setUrl(url as string)
-  }, [])
   const handleOnRun = useCallback(() => {
     if (isRunning)
       return
@@ -34,8 +31,9 @@ const UrlInput: FC<Props> = ({
     <div className="flex items-center justify-between">
       <Input
         value={url}
-        onChange={handleUrlChange}
+        onValueChange={setUrl}
         placeholder={docLink()}
+        size="small"
       />
       <Button
         variant="primary"
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index 1d342fbf4d..3b68e8b024 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -48,10 +48,21 @@ const FLOATING_UI_RESTRICTED_IMPORT_PATTERNS = [
   },
 ]
 
+const LEGACY_WEB_INPUT_RESTRICTED_IMPORT_PATTERNS = [
+  {
+    group: [
+      '**/base/input',
+      '**/base/input/*',
+    ],
+    message: 'Do not import the deprecated web base Input. Use @langgenius/dify-ui/input for standalone inputs, and @langgenius/dify-ui/field for labelled or validated form composition.',
+  },
+]
+
 export const WEB_RESTRICTED_IMPORT_PATTERNS = [
   ...NEXT_PLATFORM_RESTRICTED_IMPORT_PATTERNS,
   ...BASE_UI_RESTRICTED_IMPORT_PATTERNS,
   ...FLOATING_UI_RESTRICTED_IMPORT_PATTERNS,
+  ...LEGACY_WEB_INPUT_RESTRICTED_IMPORT_PATTERNS,
 ]
 
 export const HYOBAN_PREFER_TAILWIND_ICONS_OPTIONS = {