diff --git a/.agents/skills/how-to-write-component/SKILL.md b/.agents/skills/how-to-write-component/SKILL.md
index bf523070740..4a5a73088ec 100644
--- a/.agents/skills/how-to-write-component/SKILL.md
+++ b/.agents/skills/how-to-write-component/SKILL.md
@@ -1,71 +1,59 @@
 ---
 name: how-to-write-component
-description: React/TypeScript component style guide. Use when writing, refactoring, or reviewing React components, especially around abstraction choices, props typing, state boundaries, shared local state with Jotai atoms, API types, query/mutation contracts, navigation, memoization, wrappers, and empty-state handling.
+description: Use when writing, refactoring, or reviewing React/TypeScript components in Dify web, especially decisions about component ownership, props/types, URL/query state, Jotai state, async state, generated API contracts, queries/mutations, overlays, effects, navigation, performance, and empty states.
 ---
 
 # How To Write A Component
 
-Use this as the decision guide for React/TypeScript component structure. Existing code is reference material, not automatic precedent; when it conflicts with these rules, adapt the approach instead of reproducing the violation.
+Use this as the component decision guide for Dify web. Existing code is reference material, not automatic precedent; if touched code violates these rules, adapt it and fix equivalent patterns in the same feature branch.
+
+## First Decisions
+
+| Question | Default | Promote or extract only when |
+| --- | --- | --- |
+| Where should code live? | Keep it local to the feature workflow, route, or owner. | Multiple verticals need the same stable primitive. |
+| Who owns state, data, and handlers? | The lowest component that uses them. | A parent coordinates shared loading, errors, empty UI, selection, submission, navigation, or one consistent snapshot. |
+| Should this become Jotai state? | Keep synchronous UI/form state in component or DOM state. | Siblings need one source of truth, the value drives atoms, or scoped workflow state must survive hidden/unmounted steps. |
+| Should URL state enter Jotai? | Let Next.js route params and `nuqs` own URL state and updates. | Query atoms or shared derived atoms need a read-only bridge hydrated at the route/surface boundary. |
+| Should this query/mutation become an atom? | Use TanStack Query hooks at the lowest owner. | It reads atom state, feeds derived atoms, or participates in shared Jotai workflow orchestration. |
+| Should this be a helper/wrapper? | Prefer direct readable code at the use site. | The name captures a stable domain rule or the wrapper owns real behavior, validation, state, error handling, or semantics. |
+| Is an Effect needed? | No. Derive during render or handle the user action in the event handler. | It synchronizes with an external system such as browser APIs, subscriptions, timers, analytics, or imperative DOM/non-React widgets. |
 
 ## Core Defaults
 
-- Search before adding UI, hooks, helpers, or styling patterns. Reuse existing base components, feature components, hooks, utilities, and design styles when they fit.
-- Group code by feature workflow, route, or ownership area: components, hooks, local types, query helpers, atoms, constants, and small utilities should live near the code that changes with them.
-- Promote code to shared only when multiple verticals need the same stable primitive. Otherwise keep it local and compose shared primitives inside the owning feature.
-- Prefer local code and purpose-named helpers over catch-all utility modules; do not group workflow-specific defaults, validation, payload shaping, or metadata merging in a generic utils file just because they share a DTO.
-- Keep source/default selection, validation, and payload shaping close to the workflow that owns the behavior. Do not extract a shared helper just because two flows read the same DTO when their priority order, fallback behavior, or submit semantics differ.
-- Prefer direct, readable conditionals at the use site for small branch-specific decisions, especially form source selection and request payload assembly. Extract only when the helper name captures a stable domain rule and removes repeated complexity without hiding flow-specific behavior.
-- When fixing an invalid pattern, scan the touched feature or branch for equivalent patterns and fix them together.
-- Follow Dify's CSS-first Tailwind v4 contract from `packages/dify-ui/README.md` and `packages/dify-ui/AGENTS.md`. Prefer design-system tokens, utilities, and radius mappings over generic Tailwind guidance.
+- Search before adding UI, hooks, helpers, query utilities, or styling patterns. Reuse existing base components, feature components, hooks, utilities, and design styles when they fit.
+- Follow Dify's CSS-first Tailwind v4 contract from `packages/dify-ui/README.md` and `packages/dify-ui/AGENTS.md`. Prefer design-system tokens, utilities, and radius mappings over generic Tailwind choices.
+- Group feature code by workflow, route, or ownership area: components, hooks, local types, query helpers, atoms, constants, and small utilities should live near the code that changes with them.
+- Keep source/default selection, validation, dirty checks, and payload shaping close to the workflow that owns submit behavior. Do not hide flow-specific priority order, fallback behavior, or submit semantics in generic utilities.
+- Prefer direct conditionals for small branch-specific decisions, especially form source selection and request payload assembly.
+- Loading states for page sections, cards, lists, tables, forms, and drawers should be skeletons scoped to the content being loaded. Use spinners only for small inline busy indicators.
 
-## Feature Workflow Layout
+## Layout And Ownership
 
-- State-heavy wizards, drawers, modals, and secondary workflows work best as a small feature surface with route/entry files, a single feature-local state file, and feature-local UI.
-- Keep `ui/` shallow with owner files that map to the workflow's real composition boundaries and major visual regions.
-- Owner files contain the section components, field components, skeletons, and one-off helper components that belong to their visual region.
-- Folders represent groups of related files with a shared owner and a stable reason to change together.
-- The entry file handles route integration, provider wiring, close behavior, and feature surface mounting. The composition owner handles high-level workflow branching, and the closest visual owner handles section branching.
+- State-heavy wizards, drawers, modals, and secondary workflows can be a small feature surface: an entry file, one feature-local state file when Jotai is actually needed, and shallow `ui/` owners that match real visual regions.
+- The entry file handles route integration, provider wiring, close behavior, and surface mounting. The composition owner handles high-level workflow branching. The closest visual owner handles section branching.
+- Repeated TanStack query calls in sibling components are acceptable when each component independently consumes the data; TanStack Query deduplicates and shares cache.
+- Pass stable domain identity across boundaries. Do not forward derived presentation state when the receiver can derive it from its own data source.
+- A component that owns a visual surface should also own data access, loading, empty, and error states for content rendered inside it unless a parent truly coordinates that state.
+- Avoid prop drilling. One pass-through layer is acceptable; repeated forwarding means ownership should move down or into feature-scoped Jotai UI state. Keep server/cache state in Query and API flow.
+- Do not replace prop drilling with one large view-model hook threaded through section props. Move each hook, query, derived value, and handler to the concrete section that consumes it.
+- Keep callbacks in a parent only for workflow coordination such as form submission, shared selection, batch behavior, or navigation. Otherwise let the child, menu, or row own the action.
 
-## Ownership
+## Feature-Scoped Jotai
 
-- Put local state, queries, mutations, handlers, and derived UI data in the lowest component that uses them. Extract a purpose-built owner component only when the logic has no natural home.
-- Repeated TanStack query calls in sibling components are acceptable when each component independently consumes the data. Do not hoist a query only because it is duplicated; TanStack Query handles deduplication and cache sharing.
-- Hoist state, queries, or callbacks to a parent only when the parent consumes the data, coordinates shared loading/error/empty UI, needs one consistent snapshot, or owns a workflow spanning children.
-- Pass stable domain identity across boundaries; avoid forwarding derived presentation state when the receiver can derive it from its own data source. A component that owns a visual surface should also own the data access, loading, empty, and error states for content rendered inside it unless a parent truly coordinates that state.
-- Loading states for visual surfaces should use skeleton placeholders scoped to the content that is actually loading, with shape, density, and dimensions close to the final UI. Avoid generic loading text or centered spinners for page sections, cards, lists, tables, forms, and drawers; reserve spinners for small inline busy indicators such as an in-progress status icon.
-- Avoid prop drilling. One pass-through layer is acceptable; repeated forwarding means ownership should move down or into feature-scoped Jotai UI state. Keep server/cache state in query and API data flow.
-- Do not replace prop drilling with one top-level hook that returns a large view model and then thread that object through section props. Move each hook, query, derived value, and handler to the concrete section that consumes it, or use feature-scoped Jotai atoms for simple shared form/UI state when siblings need the same source of truth.
-- When using feature-scoped Jotai state for a form, drawer, or other secondary surface, scope the store to that surface instance when stale cross-instance state is possible. Initialize stable config at the owning boundary, then let descendants read only the atoms or purpose-named hooks they actually need.
-- For Jotai-backed surfaces, put shared query atoms, mutation atoms, derived state, and write actions in the feature state file when they coordinate multiple descendants. Do not create a query or mutation atom only because the surrounding feature uses Jotai. If the query or mutation does not read atom state, feed another atom, or participate in shared workflow orchestration, use `useQuery` or `useMutation` directly at the lowest owner.
-- For repeated row/menu action surfaces that need reset, hydrate the stable identity at the surface entry and scope only the primitives that truly need per-instance reset, such as open flags, drafts, or selected local options.
-- Keep callbacks in a parent only for workflow coordination such as form submission, shared selection, batch behavior, or navigation. Otherwise let the child or row own its action.
-- Default to uncontrolled form and DOM state. Add controlled props or atom-backed drafts only when live cross-component reactions, multi-step persistence, or external synchronization require them.
-
-## Feature-Scoped Jotai State
-
-- A module's feature-local state lives in one state file for Jotai-backed features: primitive atoms, shared query atoms, derived atoms, write-only action atoms, shared mutation atoms, submission orchestration, provider exports, and optional scope configuration.
-- Keep synchronous UI state local when one component owns it, even inside Jotai-backed features. Dialog open flags, menu/popover visibility, confirmation visibility, form/input drafts, and selected local options usually belong in component state.
-- Do not put simple form drafts in Jotai atoms. For edit/create forms whose fields are only read at submit time, use uncontrolled `@langgenius/dify-ui/form` and `@langgenius/dify-ui/field` controls with `defaultValue`, browser/form validation, and keyed remounts for query-backed initial values.
-- Promote form state to Jotai only when another component must react to in-progress field changes, the draft must survive unmount/remount within the same scoped workflow, or multiple steps/surfaces share the same editable draft before submit.
-- Keep submit-time normalization, dirty checks, and payload shaping beside the form submit handler. Do not create form atoms, field atoms, or derived can-save atoms only to mirror uncontrolled form values or disable a submit button.
-- In Jotai-backed feature surfaces, never hand-roll async loading, error, or in-flight guards with `useState` or `useRef`. For async work that depends on atom state, feeds derived atoms, or participates in shared submission orchestration, model the work with `atomWithQuery` or `atomWithMutation`; write atoms should only update the inputs that drive those atoms. For component-owned remote work that does not participate in atom state, use TanStack Query hooks directly.
-- Row-local async state should belong to the row owner. Use `useQuery` or `useMutation` directly for row actions that do not depend on atom state and are not consumed by other atoms. Use a per-instance query or mutation atom only when the row action participates in a Jotai-backed shared workflow or needs atom-scoped reset semantics.
-- Promote UI state to an atom only when siblings need the same source of truth, the value drives a query or mutation atom, a parent workflow coordinates the state, or the state intentionally persists across hidden or unmounted descendants within a scoped surface.
-- Reflect atom-backed surface-wide locks or invariants in every affected trigger. If only one row, menu, or dialog should be disabled, keep the pending or lock scope local to that row, menu, or dialog with the lowest-owner query/mutation hook unless it genuinely participates in shared atom state.
-- Atom order in the state file follows the dependency graph: types/constants, editable primitives, query atoms, query-data derived atoms, readiness/business derived atoms, write actions, mutation atoms, submission orchestration, provider exports.
-- Derived atom names read as business facts. Write atom names read as user or workflow commands.
-- UI components read and write the exact atom they use with `useAtomValue` or `useSetAtom`. Repeated workflow semantics live in named derived atoms or write atoms.
-- Non-query derived atoms return a narrow value with a clear domain name; avoid pass-through aliases or bundling unrelated UI facts. Query atoms expose the TanStack Query result object so loading, error, fetch, and pagination state stay attached to the query contract.
-- Write-only atoms own synchronous state transitions that update multiple primitives, reset dependent state, or advance the workflow. Async work with loading, error, caching, retry, stale-result, or in-flight concerns should be modeled as query or mutation atoms, with write atoms only changing the inputs that drive them.
-- Avoid feature hooks that aggregate form values, query results, derived state, and commands for sibling components. Prefer named derived atoms and write atoms so UI components read the exact shared fact or command they need.
-- When a form library owns validation, keep submit orchestration in feature state when post-submit result or error state is shared by the surface. Avoid duplicating validation gates or request shaping in UI hooks.
-- `jotai-tanstack-query` atoms use the same QueryClient as the React Query provider. Query atoms belong in feature state only when they need atom inputs, provide data to derived atoms, or coordinate a shared Jotai-backed workflow.
-- Jotai scope is an optional instance-isolation tool for secondary surfaces with independent local state. Query and mutation atoms keep shared cache behavior through the shared QueryClient.
-- Do not put `atomWithQuery`, `atomWithInfiniteQuery`, `atomWithMutation`, or broad derived orchestration atoms in a `ScopeProvider` just to reset a surface. Scoped derived atoms implicitly scope their dependencies, which can duplicate query client access and break shared invalidation. Leave query/mutation atoms unscoped; let them read scoped primitive inputs.
-- Scope providers should list resettable primitive atoms and explicit hydration tuples. If a derived atom must be scoped, confirm that every dependency it implicitly scopes is meant to be private to that surface.
-- For scoped primitives that are always hydrated by a `ScopeProvider` tuple, prefer `atomWithLazy<T>(() => { throw new Error(...) })` when consumers should see a non-null type. This keeps missing provider hydration as a runtime invariant without leaking `T | undefined` or adding pass-through "required" derived atoms only for narrowing.
-- Keep independent dialog lifecycles separate. Avoid a single discriminated "current action dialog" atom when edit, delete, and other dialogs have their own open state, loading guard, or reset behavior.
-- Route-derived stable identities that do not need instance reset or scoped isolation can be hydrated at the route or layout boundary into a feature route atom. Use scoped atoms only when stale cross-instance state or per-surface reset semantics are needed.
+- A Jotai-backed feature has one feature-local state file for shared primitive atoms, query atoms, derived atoms, write-only actions, mutation atoms, submission orchestration, provider exports, and optional scope configuration.
+- Keep component-owned synchronous UI state local even inside Jotai features: dialog open flags, menus/popovers, confirmations, field drafts, and selected local options usually belong in component state.
+- Use uncontrolled `@langgenius/dify-ui/form` and `@langgenius/dify-ui/field` controls for edit/create forms whose fields are read only at submit time. Initialize query-backed defaults with `defaultValue` and keyed remounts.
+- Promote form state to atoms only when another component must react to in-progress values, a draft must survive unmount/remount in the scoped workflow, or multiple steps share the same editable draft before submit.
+- Treat `useParams`, route args, and `nuqs` query state as framework-owned state. When atom logic needs those values, hydrate primitive atoms at the route or surface boundary, such as with `useHydrateAtoms(..., { dangerouslyForceHydrate: true })`; keep URL updates in the route/query-state APIs instead of write atoms.
+- For async work tied to atom state, use `atomWithQuery` or `atomWithMutation`; write atoms should update only the inputs that drive those atoms. This applies to pure frontend async work as well as network requests, so do not hand-roll loading/error/in-flight state with `useState` or `useRef` for atom-orchestrated async behavior. For component-owned remote work, use `useQuery` or `useMutation` directly.
+- Row-local async state belongs to the row owner unless it participates in a shared Jotai workflow or needs atom-scoped reset semantics.
+- Leave query and mutation atoms unscoped so they keep shared QueryClient cache and invalidation behavior. Scope resettable primitives and explicit hydration tuples; scope a derived atom only when every dependency should be private to that surface.
+- For scoped primitives that are always hydrated by `ScopeProvider`, prefer `atomWithLazy<T>(() => { throw new Error(...) })` when consumers should see a non-null type.
+- Order state files by dependency graph: types/constants, primitives, query atoms, query-data derived atoms, business/readiness derived atoms, write actions, mutation atoms, submission orchestration, provider exports.
+- Name derived atoms as business facts and write atoms as user or workflow commands. Components should read or write the exact atom they need with `useAtomValue` or `useSetAtom`.
+- Menu/dialog `open` state usually stays local, but a scoped atom is acceptable when a composed menu plus secondary surface would otherwise pass confusing `open`/`onClose` props through unrelated layers. Scope that primitive with the surface instance so reset behavior stays local.
+- Keep independent dialog lifecycles separate. Avoid one discriminated "current action dialog" atom when dialogs have separate open state, loading guards, or reset behavior.
 
 ## Components, Props, And Types
 
@@ -74,86 +62,56 @@ Use this as the decision guide for React/TypeScript component structure. Existin
 - Prefer named exports. Use default exports only where the framework requires them, such as Next.js route files.
 - Type simple one-off props inline. Use a named `Props` type only when reused, exported, complex, or clearer.
 - Use API-generated or API-returned types at component boundaries. Keep small UI conversion helpers and one-off UI extensions beside the component that needs them.
-- Do not create type aliases that only rename another type. Use an alias only when it encodes a real UI concept, refinement, or reusable local contract.
-- Name values by their domain role and backend API contract, and keep that name stable across the call chain, especially persistent IDs and route params. Normalize framework or route params at the boundary.
-- Keep fallback and invariant checks at the lowest component that already handles that state; avoid defensive fallbacks that mask impossible states.
-- Do not extract fallback helpers whose only behavior is hiding missing display data. The component that renders the surface owns the empty, disabled, hidden, or placeholder state.
+- Do not create type aliases that only rename another type. Use aliases only for real UI concepts, refinements, or reusable local contracts.
+- Name values by their domain role and backend API contract, especially persistent IDs and route params. Normalize framework or route params at the boundary.
+- Put fallback and invariant checks in the lowest component that already handles that state. Do not extract helpers whose only behavior is hiding missing display data.
 
-## Generated API Contracts
+## Generated API And Nullable Data
 
 - Treat generated contracts as authoritative at API, query, mutation, cache, and service boundaries. For enterprise APIs, use `packages/contracts/generated/enterprise/*`.
-- Do not hand-write local request/response/reply/page/cache-data types that mirror generated DTOs. Import or infer the generated type.
-- Do not widen generated fields or enums for compatibility. Normalize legacy input at the boundary, then return the generated field type.
-- Do not repair generated or API-returned contract fields in components unless the API contract or product requirement says they need normalization. Treat enums, statuses, and presence flags as exact contract values.
-- Use generated enum objects and union types directly in props, comparisons, status logic, and i18n keys. Do not add local enum constants or parallel frontend enum/status layers unless they model real product state not represented by the API. Presentation-only tone maps should be keyed by the generated enum.
-- Normalize or coerce only at a real boundary, such as user-entered forms, search, URL/query params, file names, DOM IDs, or legacy adapters. Preserve user-entered values when whitespace or formatting can be meaningful.
-- Do not coerce nullable or optional API strings to `''` in query, derived model, or payload-building code. Keep `undefined` or `null` until the final boundary that requires a string.
-- Do not use `value || undefined` for mutation payload fields where an empty string means "clear this value". Trim or normalize at the form boundary, then preserve `''` when the API contract treats it as an intentional update.
-- Local UI models are fine for presentation, form state, select options, or guarded required-field refinements. Name them as UI concepts, not generated DTO mirrors.
-- Required-value refinements are allowed only after same-branch filtering or early return. Prefer nullable-tolerant props for render-only data.
-- When a component needs a stricter shape than a generated DTO, refine once at the API/query-to-UI boundary into a purpose-named UI type instead of hiding missing fields with generic fallback or coercion helpers.
-
-## Nullable API Data
-
-- Prefer nullable-tolerant call boundaries. Pass API-returned types through for render-only rows, and let the component render fallback, disabled state, or nothing.
-- Narrow only where a real value is required, such as mutation params, route hrefs, select values, or query input. Build that target model with `flatMap`, a local loop, or an early return so the required value is captured in the same branch.
-- If design says a field is the display value, use that field. Only the final component should decide whether a nullable display value renders a placeholder, hides content, or disables an action.
-- Do not wrap required arrays or fields in null-fallback helpers. Use empty collection fallbacks only for not-yet-loaded query data or genuinely nullable collections at the owning render boundary.
-- Do not drop rows only to satisfy props or React keys; use a stable fallback key when possible.
-- Use conditional spreads or explicit pushes for conditional array items instead of `undefined` placeholders followed by a narrowing filter.
-- Avoid truthiness type guards, `filter(Boolean)`, `filter(item => item.id)`, and `!` after those filters.
-- Use type guards only for meaningful domain or runtime validation, such as enum membership, object shape, or a reusable business invariant.
+- Do not hand-write DTO mirrors, widen generated fields/enums, or add parallel frontend enum/status layers unless they model product state not represented by the API.
+- Use generated enum objects and union types directly in props, comparisons, status logic, and i18n keys. Presentation-only tone maps should be keyed by generated enums.
+- Normalize or coerce only at real boundaries: user-entered forms, search, URL/query params, file names, DOM IDs, or legacy adapters.
+- Do not coerce nullable or optional API strings to `''` in query, derived model, or payload-building code. Keep `null` or `undefined` until the final boundary requiring a string.
+- Do not use `value || undefined` for mutation fields where `''` means "clear this value". Trim or normalize at the form boundary, then preserve intentional empty strings.
+- Prefer nullable-tolerant render props for API-returned rows. Narrow only where a real value is required, such as mutation params, route hrefs, select values, query input, or required React keys.
+- Build required values in the same branch that proves them, using `flatMap`, a local loop, or an early return. Avoid truthiness guards, `filter(Boolean)`, `filter(item => item.id)`, and `!` after filters.
+- Use conditional spreads or explicit pushes for conditional array items instead of `undefined` placeholders followed by narrowing filters.
+- Empty collection fallbacks are for not-yet-loaded query data or genuinely nullable collections at the owning render boundary, not for hiding required API fields.
 
 ## Queries And Mutations
 
-- Keep `web/contract/*` as the single source of truth for API shape; follow existing domain/router patterns and the `{ params, query?, body? }` input shape.
-- Consume queries directly with `useQuery(consoleQuery.xxx.queryOptions(...))` or `useQuery(marketplaceQuery.xxx.queryOptions(...))`.
-- Do not promote a query or mutation to an atom just because the feature already has a state file. Use `atomWithQuery` or `atomWithMutation` only when the query/mutation reads atom state, is consumed by another atom, or is part of shared workflow orchestration.
-- In `atomWithQuery` and `atomWithInfiniteQuery`, return generated `queryOptions()` or `infiniteOptions()` directly. Pass `enabled`, `retry`, `placeholderData`, `select`, and pagination options into that call instead of spreading generated options into a hand-built object.
-- When prefetch and render consume the same server request, extract local query options or a query-options atom so `queryClient.prefetchQuery(...)` and `useQuery`/`atomWithQuery` share the exact generated query options.
-- In `atomWithMutation`, return generated `mutationOptions()` directly when using generated clients. Put request shaping and submit orchestration in write atoms; do not rebuild mutation option objects just to pass through the generated mutation function.
-- For custom query functions that do not come from generated clients, wrap the options object with TanStack `queryOptions(...)` so query atoms still return a query options contract.
-- Avoid pass-through hooks and thin `web/service/use-*` wrappers that only rename `queryOptions()` or `mutationOptions()`. Extract a small `queryOptions` helper only when repeated call-site options justify it.
-- Keep feature hooks for real orchestration, workflow state, or shared domain behavior.
-- For TanStack cache data, use generated or query-derived types; do not create local wrappers for `getQueryData` or `getQueriesData`.
-- For generated oRPC `queryOptions()` / `infiniteOptions()`, keep returning the generated options directly. When required input is missing, use a whole-input branch such as `input: condition ? validInput : skipToken` together with `enabled: Boolean(condition)` so no request runs and no fake payload is built.
-- Do not put `skipToken` inside a nested placeholder payload, such as `{ params: { appInstanceId: skipToken } }`. Do not create hand-written "missing queryOptions" objects or coerce required IDs to `''`.
-- Consume mutations directly with `useMutation(consoleQuery.xxx.mutationOptions(...))` or `useMutation(marketplaceQuery.xxx.mutationOptions(...))` when the mutation is owned by one component, menu, dialog, or row and its pending/error state is not consumed by feature atoms. In Jotai-backed workflow orchestration, expose mutations from feature state with `atomWithMutation` so pending/error state stays attached to the mutation atom. For component-owned custom mutation functions, use `useMutation(mutationOptions(...))` at the owner.
-- Put shared cache behavior in `createTanstackQueryUtils(...experimental_defaults...)`; components may add UI feedback callbacks, but should not own shared invalidation rules.
-- Component or atom mutation callbacks can handle local UI feedback such as toasts, closing dialogs, or navigation. They should not replace shared invalidation or add local cache patches for shared server state.
-- For overlays that may open a heavier secondary surface, prefetch server data from the trigger/menu open event with `queryClient.prefetchQuery(queryOptions)` when the primitive exposes `onOpenChange`. Do not mount a hidden component or subscribe to a query only to warm the cache. Do not make an otherwise uncontrolled menu controlled only for prefetching.
+- Keep `web/contract/*` as the API shape source of truth and follow the `{ params, query?, body? }` input shape.
+- Consume generated queries with `useQuery(consoleQuery.xxx.queryOptions(...))` or `useQuery(marketplaceQuery.xxx.queryOptions(...))`.
+- Consume owner-local mutations with `useMutation(consoleQuery.xxx.mutationOptions(...))` or `useMutation(marketplaceQuery.xxx.mutationOptions(...))` when pending/error state is not consumed by feature atoms.
+- In `atomWithQuery`, `atomWithInfiniteQuery`, and `atomWithMutation`, return generated `queryOptions()`, `infiniteOptions()`, or `mutationOptions()` directly. Pass `enabled`, `retry`, `placeholderData`, `select`, and pagination options into the generated call instead of spreading options into a hand-built object.
+- For generated oRPC options with missing required input, branch the whole input with `input: condition ? validInput : skipToken` and `enabled: Boolean(condition)`. Never place `skipToken` inside a nested placeholder payload or coerce required IDs to `''`.
+- When prefetch and render use the same request, extract local query options or a query-options atom so `prefetchQuery` and `useQuery`/`atomWithQuery` share the exact options.
+- For custom query or mutation functions, wrap options with TanStack `queryOptions(...)` or `mutationOptions(...)`.
+- Avoid pass-through hooks and thin `web/service/use-*` wrappers that only rename generated options. Keep feature hooks for real orchestration, workflow state, or shared domain behavior.
+- Put shared cache behavior in `createTanstackQueryUtils(...experimental_defaults...)`. Component or atom callbacks may handle local toasts, closing dialogs, and navigation, but should not replace shared invalidation or patch shared server state locally.
+- For overlays that may open heavier secondary content, prefetch from the trigger/menu open event with `queryClient.prefetchQuery(queryOptions)` when `onOpenChange` is available. Do not mount hidden subscribers just to warm cache.
 - Do not use deprecated `useInvalid` or `useReset`.
 - Prefer `mutate(...)`; use `mutateAsync(...)` only when Promise semantics are required, and wrap awaited calls in `try/catch`.
 
-## Component Boundaries
+## Boundaries And Overlays
 
-- Use the first level below a page or tab to organize independent page sections when it adds real structure. This layer is layout/semantic first, not automatically the data owner.
-- Treat component names, semantic roles, and user- or design-marked visual regions as boundary constraints. Do not expand a child component's responsibility just because its data is useful nearby; keep adjacent UI as a sibling owner or introduce a correctly named broader owner.
-- Split deeper components by the data and state each layer actually needs. Each component should access only necessary data, and ownership should stay at the lowest consumer.
+- Use the first level below a page or tab to organize independent page sections when it adds structure. This layer is layout/semantic first, not automatically the data owner.
+- Treat component names, semantic roles, and user- or design-marked visual regions as boundary constraints. Keep adjacent UI as a sibling owner or introduce a correctly named broader owner.
 - Keep cohesive forms, menu bodies, and one-off helpers local unless they need their own state, reuse, or semantic boundary.
-- Separate hidden secondary surfaces from the trigger's main flow. For dialogs, dropdowns, popovers, and similar branches, extract a small local component that owns the trigger, open state, and hidden content when it would obscure the parent flow.
-- Preserve composability by separating behavior ownership from layout ownership. A dropdown action may own its trigger, open state, and menu content; the caller owns placement such as slots, offsets, and alignment.
-- When a dialog, dropdown, or popover component already accepts controlled `open` state, mount the surface unconditionally unless unmounting is required for performance or reset semantics. Use keyed scope or local state reset for reset behavior instead of `{open && <Surface />}` wrappers.
-- When opening a dialog from a menu item, keep the menu and dialog as sibling surfaces. Let the menu item command open the dialog through local state or scoped atoms, and mount the dialog outside the menu popup content. Avoid wrapping menu items with dialog triggers when the menu primitive already owns item activation and dismissal behavior.
-- For dialogs and alert dialogs, keep the root component responsible for `open` wiring and put query/mutation hooks inside the content component when the work should only mount after the overlay opens. Do not put closed-surface remote work in the root just because the root owns the open atom.
-- Prefer uncontrolled overlay roots when the library can own their open state. Use `onOpenChange` for side effects such as prefetching, and CSS/data selectors for visual open-state styling instead of adding controlled state only for observation.
-- Avoid unnecessary DOM hierarchy. Do not add wrapper elements unless they provide layout, semantics, accessibility, state ownership, or integration with a library API; prefer fragments or styling an existing element when possible.
-- Avoid shallow wrappers, hook-to-props adapter components, layout-only render-prop wrappers, children-as-pass-through composition, and prop renaming unless the wrapper adds validation, orchestration, error handling, state ownership, or a real semantic boundary. If a component only calls a hook, forwards props, or passes trigger/content through to one child, move the logic into that child or make the wrapper own a real surface.
+- Separate hidden secondary surfaces from the trigger's main flow. For dialogs, dropdowns, popovers, and similar branches, extract a small local component when hidden content would obscure the parent.
+- Preserve composability by separating behavior ownership from placement ownership: an action can own trigger/open/menu content while the caller owns slots, offsets, and alignment.
+- When a dialog, dropdown, or popover accepts controlled `open`, mount it unconditionally unless unmounting is required for performance or reset semantics. Use keyed scope or local state reset instead of `{open && <Surface />}` wrappers.
+- When opening a dialog from a menu item, keep the menu and dialog as sibling surfaces. Let the menu command open the dialog, and mount the dialog outside menu popup content.
+- For dialogs and alert dialogs, keep the root responsible for `open` wiring and put query/mutation hooks inside the content component when work should mount only after the overlay opens.
+- Prefer uncontrolled overlay roots when the library can own open state. Use `onOpenChange` for side effects and CSS/data selectors for open-state styling.
+- Avoid wrapper DOM unless it provides layout, semantics, accessibility, state ownership, or library integration. Avoid shallow wrappers, hook-to-props adapters, layout-only render props, children pass-through wrappers, and prop renaming unless they add real behavior or a real boundary.
 
-## You Might Not Need An Effect
-
-- Use Effects only to synchronize with external systems such as browser APIs, non-React widgets, subscriptions, timers, analytics that must run because the component was shown, or imperative DOM integration.
-- Do not use Effects to transform props or state for rendering. Calculate derived values during render, and use `useMemo` only when the calculation is actually expensive.
-- Do not use Effects to handle user actions. Put action-specific logic in the event handler where the cause is known.
-- Do not use Effects to copy one state value into another state value representing the same concept. Pick one source of truth and derive the rest during render.
-- Do not reset or adjust state from props with an Effect. Prefer a `key` reset, storing a stable ID and deriving the selected object, or guarded same-component render-time adjustment when truly necessary.
-- For forms initialized from query data, prefer keyed remounts or surface-entry hydration of form/field atoms over an Effect that copies query data into form state.
-- Prefer framework data APIs or TanStack Query for data fetching instead of writing request Effects in components.
-- If an Effect still seems necessary, first name the external system it synchronizes with. If there is no external system, remove the Effect and restructure the state or event flow.
-
-## Navigation And Performance
+## Effects, Navigation, And Performance
 
+- Use Effects only to synchronize with external systems. Do not use Effects to transform props/state for rendering, handle user actions, copy state, reset state from props, or fetch data.
+- For forms initialized from query data, prefer keyed remounts or surface-entry atom hydration over Effects that copy query data into form state.
+- Prefer framework data APIs or TanStack Query for data fetching.
 - Prefer `Link` for normal navigation. Use router APIs only for command-flow side effects such as mutation success, guarded redirects, or form submission.
-- Before reaching for `memo`, first try moving changing state down to the smallest component that actually uses it so unrelated sibling trees stay untouched.
-- If changing state must wrap other content, lift the unchanged content up and pass it as `children` so the stateful wrapper can update without React visiting that subtree.
+- Before using `memo`, move changing state down to the smallest component that uses it. If state must wrap stable content, lift the stable content up and pass it as `children`.
 - Avoid `memo`, `useMemo`, and `useCallback` unless there is a clear performance reason.
diff --git a/.github/workflows/style.yml b/.github/workflows/style.yml
index e4c686adb31..c80e1f3d2be 100644
--- a/.github/workflows/style.yml
+++ b/.github/workflows/style.yml
@@ -105,6 +105,10 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         run: vp run knip
 
+      - name: Web dead code check production
+        if: steps.changed-files.outputs.any_changed == 'true'
+        run: vp run knip:production
+
   ts-common-style:
     name: TS Common
     runs-on: depot-ubuntu-24.04
diff --git a/api/controllers/console/app/agent_app_feature.py b/api/controllers/console/app/agent_app_feature.py
index d155dae6ac3..358e552beb0 100644
--- a/api/controllers/console/app/agent_app_feature.py
+++ b/api/controllers/console/app/agent_app_feature.py
@@ -91,7 +91,10 @@ class AgentAppFeatureConfigResource(Resource):
         args = AgentAppFeaturesPayload.model_validate(console_ns.payload or {})
 
         new_app_model_config = AgentAppFeatureConfigService.update_features(
-            app_model=app_model, account=current_user, config=args.model_dump(exclude_none=True), session=db.session
+            app_model=app_model,
+            account=current_user,
+            config=args.model_dump(exclude_none=True),
+            session=db.session,
         )
 
         app_model_config_was_updated.send(app_model, app_model_config=new_app_model_config)
diff --git a/api/controllers/inner_api/knowledge/retrieval.py b/api/controllers/inner_api/knowledge/retrieval.py
index 1c1320fde42..e34dedea286 100644
--- a/api/controllers/inner_api/knowledge/retrieval.py
+++ b/api/controllers/inner_api/knowledge/retrieval.py
@@ -14,6 +14,7 @@ from controllers.common.schema import register_response_schema_models, register_
 from controllers.inner_api import inner_api_ns
 from controllers.inner_api.wraps import plugin_inner_api_only
 from core.workflow.nodes.knowledge_retrieval import exc as retrieval_exc
+from extensions.ext_database import db
 from libs.exception import BaseHTTPException
 from services.entities.knowledge_retrieval_inner import InnerKnowledgeRetrieveRequest, InnerKnowledgeRetrieveResponse
 from services.errors.knowledge_retrieval import ExternalKnowledgeRetrievalError, InnerKnowledgeRetrievalServiceError
@@ -81,7 +82,7 @@ class InnerKnowledgeRetrieveApi(Resource):
             ) from exc
 
         try:
-            response = InnerKnowledgeRetrievalService().retrieve(payload)
+            response = InnerKnowledgeRetrievalService().retrieve(payload, session=db.session)
         except InnerKnowledgeRetrievalServiceError as exc:
             raise InnerKnowledgeRetrievalHttpError(
                 error_code=exc.error_code,
diff --git a/api/services/agent_app_feature_service.py b/api/services/agent_app_feature_service.py
index b8e98653c8e..5fd794bb10f 100644
--- a/api/services/agent_app_feature_service.py
+++ b/api/services/agent_app_feature_service.py
@@ -69,7 +69,12 @@ class AgentAppFeatureConfigService:
 
     @classmethod
     def update_features(
-        cls, *, app_model: App, account: Account, config: dict[str, Any], session: scoped_session
+        cls,
+        *,
+        app_model: App,
+        account: Account,
+        config: dict[str, Any],
+        session: scoped_session,
     ) -> AppModelConfig:
         """Persist the presentation features as a new app_model_config version.
 
diff --git a/api/services/knowledge_retrieval_inner_service.py b/api/services/knowledge_retrieval_inner_service.py
index fccc81c4a29..8759413f533 100644
--- a/api/services/knowledge_retrieval_inner_service.py
+++ b/api/services/knowledge_retrieval_inner_service.py
@@ -13,11 +13,11 @@ of a separate validation error.
 """
 
 from sqlalchemy import select
+from sqlalchemy.orm import scoped_session
 
 from core.rag.entities.metadata_entities import Condition, MetadataFilteringCondition
 from core.rag.retrieval.dataset_retrieval import DatasetRetrieval
 from core.workflow.nodes.knowledge_retrieval.retrieval import KnowledgeRetrievalRequest
-from extensions.ext_database import db
 from graphon.model_runtime.utils.encoders import jsonable_encoder
 from graphon.nodes.llm.entities import ModelConfig
 from models.dataset import Dataset
@@ -38,7 +38,11 @@ from services.errors.knowledge_retrieval import (
 class InnerKnowledgeRetrievalService:
     """Validate inner caller scope and delegate to workflow dataset retrieval."""
 
-    def retrieve(self, request: InnerKnowledgeRetrieveRequest) -> InnerKnowledgeRetrieveResponse:
+    def retrieve(
+        self,
+        request: InnerKnowledgeRetrieveRequest,
+        session: scoped_session,
+    ) -> InnerKnowledgeRetrieveResponse:
         """Run tenant-scoped retrieval for a trusted internal caller.
 
         This method only rejects caller app existence/tenant mismatches and
@@ -56,8 +60,8 @@ class InnerKnowledgeRetrievalService:
             InnerKnowledgeRetrieveDatasetTenantMismatchError:
                 At least one requested dataset is outside the caller tenant.
         """
-        self._validate_caller_app(tenant_id=request.caller.tenant_id, app_id=request.caller.app_id)
-        self._validate_datasets(tenant_id=request.caller.tenant_id, dataset_ids=request.dataset_ids)
+        self._validate_caller_app(tenant_id=request.caller.tenant_id, app_id=request.caller.app_id, session=session)
+        self._validate_datasets(tenant_id=request.caller.tenant_id, dataset_ids=request.dataset_ids, session=session)
 
         rag = DatasetRetrieval()
         results = rag.knowledge_retrieval(request=self._to_rag_request(request))
@@ -66,8 +70,8 @@ class InnerKnowledgeRetrievalService:
             usage=InnerKnowledgeRetrieveUsage.model_validate(jsonable_encoder(rag.llm_usage)),
         )
 
-    def _validate_caller_app(self, *, tenant_id: str, app_id: str) -> None:
-        app = db.session.scalar(select(App).where(App.id == app_id).limit(1))
+    def _validate_caller_app(self, *, tenant_id: str, app_id: str, session: scoped_session) -> None:
+        app = session.scalar(select(App).where(App.id == app_id).limit(1))
         if app is None:
             raise InnerKnowledgeRetrieveAppNotFoundError(f"App '{app_id}' not found")
         if app.tenant_id != tenant_id:
@@ -75,8 +79,8 @@ class InnerKnowledgeRetrievalService:
                 f"App '{app_id}' does not belong to tenant '{tenant_id}'"
             )
 
-    def _validate_datasets(self, *, tenant_id: str, dataset_ids: list[str]) -> None:
-        datasets = db.session.scalars(select(Dataset).where(Dataset.id.in_(dataset_ids))).all()
+    def _validate_datasets(self, *, tenant_id: str, dataset_ids: list[str], session: scoped_session) -> None:
+        datasets = session.scalars(select(Dataset).where(Dataset.id.in_(dataset_ids))).all()
 
         found_ids = {dataset.id for dataset in datasets}
         missing_ids = sorted(set(dataset_ids) - found_ids)
diff --git a/api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py b/api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py
index 69cde847f8e..f37dc328b02 100644
--- a/api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py
+++ b/api/tests/test_containers_integration_tests/services/test_webhook_service_relationships.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import json
+import logging
 from types import SimpleNamespace
 from unittest.mock import MagicMock, patch
 from uuid import uuid4
@@ -355,7 +356,10 @@ class TestWebhookServiceTriggerExecutionWithContainers:
         mock_mark_rate_limited.assert_called_once_with(tenant.id)
 
     def test_trigger_workflow_execution_logs_and_reraises_unexpected_errors(
-        self, db_session_with_containers: Session, flask_app_with_containers: Flask
+        self,
+        db_session_with_containers: Session,
+        flask_app_with_containers: Flask,
+        caplog: pytest.LogCaptureFixture,
     ):
         del flask_app_with_containers
         factory = WebhookServiceRelationshipFactory
@@ -367,13 +371,11 @@ class TestWebhookServiceTriggerExecutionWithContainers:
         webhook_trigger = factory.create_webhook_trigger(
             db_session_with_containers, app=app, account=account, node_id="node-1"
         )
+        caplog.set_level(logging.ERROR, logger="services.trigger.webhook_service")
 
-        with (
-            patch(
-                "services.trigger.webhook_service.EndUserService.get_or_create_end_user_by_type",
-                side_effect=RuntimeError("boom"),
-            ),
-            patch("services.trigger.webhook_service.logger.exception") as mock_logger_exception,
+        with patch(
+            "services.trigger.webhook_service.EndUserService.get_or_create_end_user_by_type",
+            side_effect=RuntimeError("boom"),
         ):
             with pytest.raises(RuntimeError, match="boom"):
                 WebhookService.trigger_workflow_execution(
@@ -382,7 +384,7 @@ class TestWebhookServiceTriggerExecutionWithContainers:
                     workflow,
                 )
 
-        mock_logger_exception.assert_called_once()
+        assert caplog.messages.count(f"Failed to trigger workflow for webhook {webhook_trigger.webhook_id}") == 1
 
 
 class TestWebhookServiceRelationshipSyncWithContainers:
@@ -482,7 +484,10 @@ class TestWebhookServiceRelationshipSyncWithContainers:
         assert cached_payload["webhook_id"] == "cache-webhook-id-00001"
 
     def test_sync_webhook_relationships_logs_when_lock_release_fails(
-        self, db_session_with_containers: Session, flask_app_with_containers: Flask
+        self,
+        db_session_with_containers: Session,
+        flask_app_with_containers: Flask,
+        caplog: pytest.LogCaptureFixture,
     ):
         del flask_app_with_containers
         factory = WebhookServiceRelationshipFactory
@@ -494,14 +499,12 @@ class TestWebhookServiceRelationshipSyncWithContainers:
         lock = MagicMock()
         lock.acquire.return_value = True
         lock.release.side_effect = RuntimeError("release failed")
+        caplog.set_level(logging.ERROR, logger="services.trigger.webhook_service")
 
-        with (
-            patch("services.trigger.webhook_service.redis_client.lock", return_value=lock),
-            patch("services.trigger.webhook_service.logger.exception") as mock_logger_exception,
-        ):
+        with patch("services.trigger.webhook_service.redis_client.lock", return_value=lock):
             WebhookService.sync_webhook_relationships(app, workflow)
 
-        mock_logger_exception.assert_called_once()
+        assert caplog.messages.count(f"Failed to release lock for webhook sync, app {app.id}") == 1
 
 
 def _read_cache(cache_key: str) -> dict[str, str] | None:
diff --git a/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py b/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
index cb5fb5483c8..19611bd6ff2 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
@@ -6,9 +6,11 @@ using TestContainers to ensure realistic database interactions and proper isolat
 The task is responsible for removing document segments from the search index when they are disabled.
 """
 
+import logging
 from unittest.mock import MagicMock, patch
 from uuid import uuid4
 
+import pytest
 from faker import Faker
 from sqlalchemy import select
 from sqlalchemy.orm import Session
@@ -533,7 +535,9 @@ class TestDisableSegmentsFromIndexTask:
                     assert result is None  # Task should complete without returning a value
                     mock_factory.assert_called_with(doc_form)
 
-    def test_disable_segments_performance_timing(self, db_session_with_containers: Session):
+    def test_disable_segments_performance_timing(
+        self, db_session_with_containers: Session, caplog: pytest.LogCaptureFixture
+    ):
         """
         Test that the task properly measures and logs performance timing.
 
@@ -562,21 +566,18 @@ class TestDisableSegmentsFromIndexTask:
                 # Mock time.perf_counter to control timing
                 with patch("tasks.disable_segments_from_index_task.time.perf_counter") as mock_perf_counter:
                     mock_perf_counter.side_effect = [1000.0, 1000.5]  # 0.5 seconds execution time
+                    caplog.set_level(logging.INFO, logger="tasks.disable_segments_from_index_task")
 
-                    # Mock logger to capture log messages
-                    with patch("tasks.disable_segments_from_index_task.logger") as mock_logger:
-                        # Act
-                        result = disable_segments_from_index_task(segment_ids, dataset.id, document.id)
+                    # Act
+                    result = disable_segments_from_index_task(segment_ids, dataset.id, document.id)
 
-                        # Assert
-                        assert result is None  # Task should complete without returning a value
+                    # Assert
+                    assert result is None  # Task should complete without returning a value
 
-                        # Verify performance logging
-                        mock_logger.info.assert_called()
-                        log_calls = [call[0][0] for call in mock_logger.info.call_args_list]
-                        performance_log = next((call for call in log_calls if "latency" in call), None)
-                        assert performance_log is not None
-                        assert "0.5" in performance_log  # Should log the execution time
+                    # Verify performance logging
+                    performance_log = next((message for message in caplog.messages if "latency" in message), None)
+                    assert performance_log is not None
+                    assert "0.5" in performance_log  # Should log the execution time
 
     def test_disable_segments_redis_cache_cleanup(self, db_session_with_containers: Session):
         """
diff --git a/api/tests/test_containers_integration_tests/tasks/test_mail_email_code_login_task.py b/api/tests/test_containers_integration_tests/tasks/test_mail_email_code_login_task.py
index 0eec166fe2f..567bd44b930 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_mail_email_code_login_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_mail_email_code_login_task.py
@@ -10,6 +10,7 @@ All tests use the testcontainers infrastructure to ensure proper database isolat
 and realistic testing scenarios with actual PostgreSQL and Redis instances.
 """
 
+import logging
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -543,7 +544,10 @@ class TestSendEmailCodeLoginMailTask:
         redis_client.delete(cache_key)
 
     def test_send_email_code_login_mail_task_error_handling_comprehensive(
-        self, db_session_with_containers: Session, mock_external_service_dependencies
+        self,
+        db_session_with_containers: Session,
+        mock_external_service_dependencies,
+        caplog: pytest.LogCaptureFixture,
     ):
         """
         Test comprehensive error handling for email code login mail task.
@@ -559,6 +563,7 @@ class TestSendEmailCodeLoginMailTask:
         test_email = fake.email()
         test_code = "123456"
         test_language = "en-US"
+        caplog.set_level(logging.ERROR, logger="tasks.mail_email_code_login")
 
         # Test different exception types
         exception_types = [
@@ -571,31 +576,26 @@ class TestSendEmailCodeLoginMailTask:
 
         for error_name, exception in exception_types:
             # Reset mocks for each test case
+            caplog.clear()
             mock_email_service_instance = mock_external_service_dependencies["email_service_instance"]
             mock_email_service_instance.reset_mock()
             mock_email_service_instance.send_email.side_effect = exception
 
-            # Mock logging to capture error messages
-            with patch("tasks.mail_email_code_login.logger", autospec=True) as mock_logger:
-                # Act: Execute the task - it should handle the exception gracefully
-                send_email_code_login_mail_task(
-                    language=test_language,
-                    to=test_email,
-                    code=test_code,
-                )
+            # Act: Execute the task - it should handle the exception gracefully
+            send_email_code_login_mail_task(
+                language=test_language,
+                to=test_email,
+                code=test_code,
+            )
 
-                # Assert: Verify error handling
-                # Verify email service was called (and failed)
-                mock_email_service_instance.send_email.assert_called_once()
+            # Assert: Verify error handling
+            # Verify email service was called (and failed)
+            mock_email_service_instance.send_email.assert_called_once()
 
-                # Verify error was logged
-                error_calls = [
-                    call
-                    for call in mock_logger.exception.call_args_list
-                    if f"Send email code login mail to {test_email} failed" in str(call)
-                ]
-                # Check if any exception call was made (the exact message format may vary)
-                assert mock_logger.exception.call_count >= 1, f"Error should be logged for {error_name}"
+            # Verify error was logged
+            assert f"Send email code login mail to {test_email} failed" in caplog.messages, (
+                f"Error should be logged for {error_name}"
+            )
 
             # Reset side effect for next iteration
             mock_email_service_instance.send_email.side_effect = None
diff --git a/api/tests/test_containers_integration_tests/tasks/test_mail_invite_member_task.py b/api/tests/test_containers_integration_tests/tasks/test_mail_invite_member_task.py
index de15d4cc772..507e674e5af 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_mail_invite_member_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_mail_invite_member_task.py
@@ -11,6 +11,7 @@ and realistic testing scenarios with actual PostgreSQL and Redis instances.
 """
 
 import json
+import logging
 import uuid
 from datetime import UTC, datetime
 from unittest.mock import MagicMock, patch
@@ -295,7 +296,10 @@ class TestMailInviteMemberTask:
         mock_email_service.send_email.assert_not_called()
 
     def test_send_invite_member_mail_email_service_exception(
-        self, db_session_with_containers: Session, mock_external_service_dependencies
+        self,
+        db_session_with_containers: Session,
+        mock_external_service_dependencies,
+        caplog: pytest.LogCaptureFixture,
     ):
         """
         Test error handling when email service raises an exception.
@@ -308,21 +312,19 @@ class TestMailInviteMemberTask:
         # Arrange: Setup email service to raise exception
         mock_email_service = mock_external_service_dependencies["email_service"]
         mock_email_service.send_email.side_effect = Exception("Email service failed")
+        caplog.set_level(logging.ERROR, logger="tasks.mail_invite_member_task")
 
         # Act & Assert: Execute task and verify exception is handled
-        with patch("tasks.mail_invite_member_task.logger", autospec=True) as mock_logger:
-            send_invite_member_mail_task(
-                language="en-US",
-                to="test@example.com",
-                token="test-token",
-                inviter_name="Test User",
-                workspace_name="Test Workspace",
-            )
+        send_invite_member_mail_task(
+            language="en-US",
+            to="test@example.com",
+            token="test-token",
+            inviter_name="Test User",
+            workspace_name="Test Workspace",
+        )
 
-            # Verify error was logged
-            mock_logger.exception.assert_called_once()
-            error_call = mock_logger.exception.call_args[0][0]
-            assert "Send invite member mail to %s failed" in error_call
+        # Verify error was logged
+        assert caplog.messages.count("Send invite member mail to test@example.com failed") == 1
 
     def test_send_invite_member_mail_template_context_validation(
         self, db_session_with_containers: Session, mock_external_service_dependencies
diff --git a/api/tests/test_containers_integration_tests/tasks/test_mail_register_task.py b/api/tests/test_containers_integration_tests/tasks/test_mail_register_task.py
index c74b451b4b6..685c1617bb0 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_mail_register_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_mail_register_task.py
@@ -5,6 +5,7 @@ This module provides integration tests for email registration tasks
 using TestContainers to ensure real database and service interactions.
 """
 
+import logging
 from unittest.mock import patch
 
 import pytest
@@ -68,7 +69,10 @@ class TestMailRegisterTask:
         mock_mail_dependencies["email_service"].send_email.assert_not_called()
 
     def test_send_email_register_mail_task_exception_handling(
-        self, db_session_with_containers: Session, mock_mail_dependencies
+        self,
+        db_session_with_containers: Session,
+        mock_mail_dependencies,
+        caplog: pytest.LogCaptureFixture,
     ):
         """Test email registration task exception handling."""
         mock_mail_dependencies["email_service"].send_email.side_effect = Exception("Email service error")
@@ -76,10 +80,11 @@ class TestMailRegisterTask:
         fake = Faker()
         to_email = fake.email()
         code = fake.numerify("######")
+        caplog.set_level(logging.ERROR, logger="tasks.mail_register_task")
 
-        with patch("tasks.mail_register_task.logger", autospec=True) as mock_logger:
-            send_email_register_mail_task(language="en-US", to=to_email, code=code)
-            mock_logger.exception.assert_called_once_with("Send email register mail to %s failed", to_email)
+        send_email_register_mail_task(language="en-US", to=to_email, code=code)
+
+        assert caplog.messages.count(f"Send email register mail to {to_email} failed") == 1
 
     def test_send_email_register_mail_task_when_account_exist_success(
         self, db_session_with_containers: Session, mock_mail_dependencies
@@ -121,7 +126,10 @@ class TestMailRegisterTask:
         mock_mail_dependencies["email_service"].send_email.assert_not_called()
 
     def test_send_email_register_mail_task_when_account_exist_exception_handling(
-        self, db_session_with_containers: Session, mock_mail_dependencies
+        self,
+        db_session_with_containers: Session,
+        mock_mail_dependencies,
+        caplog: pytest.LogCaptureFixture,
     ):
         """Test account exist email task exception handling."""
         mock_mail_dependencies["email_service"].send_email.side_effect = Exception("Email service error")
@@ -129,7 +137,8 @@ class TestMailRegisterTask:
         fake = Faker()
         to_email = fake.email()
         account_name = fake.name()
+        caplog.set_level(logging.ERROR, logger="tasks.mail_register_task")
 
-        with patch("tasks.mail_register_task.logger", autospec=True) as mock_logger:
-            send_email_register_mail_task_when_account_exist(language="en-US", to=to_email, account_name=account_name)
-            mock_logger.exception.assert_called_once_with("Send email register mail to %s failed", to_email)
+        send_email_register_mail_task_when_account_exist(language="en-US", to=to_email, account_name=account_name)
+
+        assert caplog.messages.count(f"Send email register mail to {to_email} failed") == 1
diff --git a/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py b/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py
index 07ba9314977..dbc8f4969dc 100644
--- a/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py
+++ b/api/tests/unit_tests/core/entities/test_entities_provider_configuration.py
@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import logging
 from contextlib import contextmanager
 from types import SimpleNamespace
 from typing import Any
@@ -1704,13 +1705,14 @@ def test_get_specific_provider_credential_decrypts_and_obfuscates_credentials()
     assert credentials == {"openai_api_key": "raw-secret", "region": "us"}
 
 
-def test_get_specific_provider_credential_logs_when_decrypt_fails() -> None:
+def test_get_specific_provider_credential_logs_when_decrypt_fails(caplog: pytest.LogCaptureFixture) -> None:
     configuration = _build_provider_configuration()
     configuration.provider.provider_credential_schema = _build_secret_provider_schema()
     session = Mock()
     session.execute.return_value.scalar_one_or_none.return_value = SimpleNamespace(
         encrypted_config='{"openai_api_key":"enc-secret"}'
     )
+    caplog.set_level(logging.ERROR, logger="core.entities.provider_configuration")
 
     with _patched_session(session):
         with patch.object(ProviderConfiguration, "_get_provider_record", return_value=None):
@@ -1718,16 +1720,15 @@ def test_get_specific_provider_credential_logs_when_decrypt_fails() -> None:
                 "core.entities.provider_configuration.encrypter.decrypt_token",
                 side_effect=RuntimeError("boom"),
             ):
-                with patch("core.entities.provider_configuration.logger.exception") as mock_logger:
-                    with patch.object(
-                        ProviderConfiguration,
-                        "obfuscated_credentials",
-                        side_effect=lambda credentials, credential_form_schemas: credentials,
-                    ):
-                        credentials = configuration._get_specific_provider_credential("cred-1")
+                with patch.object(
+                    ProviderConfiguration,
+                    "obfuscated_credentials",
+                    side_effect=lambda credentials, credential_form_schemas: credentials,
+                ):
+                    credentials = configuration._get_specific_provider_credential("cred-1")
 
     assert credentials == {"openai_api_key": "enc-secret"}
-    mock_logger.assert_called_once()
+    assert caplog.messages.count("Failed to decrypt credential secret variable openai_api_key") == 1
 
 
 def test_validate_provider_credentials_uses_empty_original_when_record_missing() -> None:
@@ -1831,7 +1832,7 @@ def test_switch_active_provider_credential_rolls_back_on_error() -> None:
     session.rollback.assert_called_once()
 
 
-def test_get_specific_custom_model_credential_logs_when_decrypt_fails() -> None:
+def test_get_specific_custom_model_credential_logs_when_decrypt_fails(caplog: pytest.LogCaptureFixture) -> None:
     configuration = _build_provider_configuration()
     configuration.provider.model_credential_schema = _build_secret_model_schema()
     session = Mock()
@@ -1840,19 +1841,19 @@ def test_get_specific_custom_model_credential_logs_when_decrypt_fails() -> None:
         credential_name="Main",
         encrypted_config='{"openai_api_key":"enc-secret"}',
     )
+    caplog.set_level(logging.ERROR, logger="core.entities.provider_configuration")
 
     with _patched_session(session):
         with patch("core.entities.provider_configuration.encrypter.decrypt_token", side_effect=RuntimeError("boom")):
-            with patch("core.entities.provider_configuration.logger.exception") as mock_logger:
-                with patch.object(
-                    ProviderConfiguration,
-                    "obfuscated_credentials",
-                    side_effect=lambda credentials, credential_form_schemas: credentials,
-                ):
-                    result = configuration._get_specific_custom_model_credential(ModelType.LLM, "gpt-4o", "cred-1")
+            with patch.object(
+                ProviderConfiguration,
+                "obfuscated_credentials",
+                side_effect=lambda credentials, credential_form_schemas: credentials,
+            ):
+                result = configuration._get_specific_custom_model_credential(ModelType.LLM, "gpt-4o", "cred-1")
 
     assert result["credentials"] == {"openai_api_key": "enc-secret"}
-    mock_logger.assert_called_once()
+    assert caplog.messages.count("Failed to decrypt model credential secret variable openai_api_key") == 1
 
 
 def test_validate_custom_model_credentials_handles_invalid_original_json() -> None:
diff --git a/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py b/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py
index 42d5ea4a393..168d0e466d4 100644
--- a/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py
+++ b/api/tests/unit_tests/core/rag/embedding/test_embedding_service.py
@@ -407,7 +407,7 @@ class TestCacheEmbeddingDocuments:
             assert len(calls[1].kwargs["texts"]) == 10
             assert len(calls[2].kwargs["texts"]) == 5
 
-    def test_embed_documents_nan_handling(self, mock_model_instance, caplog):
+    def test_embed_documents_nan_handling(self, mock_model_instance, caplog: pytest.LogCaptureFixture):
         """Test handling of NaN values in embeddings.
 
         Verifies:
diff --git a/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py b/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py
index d2154f138a7..302ababb48f 100644
--- a/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py
+++ b/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py
@@ -385,7 +385,7 @@ class TestParagraphIndexProcessor:
         with pytest.raises(ValueError, match="model_name and model_provider_name"):
             ParagraphIndexProcessor.generate_summary("tenant-1", "text", {"enable": True})
 
-    def test_generate_summary_text_only_flow(self, caplog) -> None:
+    def test_generate_summary_text_only_flow(self, caplog: pytest.LogCaptureFixture) -> None:
         model_instance = Mock()
         model_instance.credentials = {"k": "v"}
         model_instance.model_type_instance.get_model_schema.return_value = SimpleNamespace(features=[])
@@ -459,7 +459,7 @@ class TestParagraphIndexProcessor:
         assert summary == "vision summary"
         mock_extract_text.assert_not_called()
 
-    def test_generate_summary_fallbacks_for_prompt_and_result_types(self, caplog) -> None:
+    def test_generate_summary_fallbacks_for_prompt_and_result_types(self, caplog: pytest.LogCaptureFixture) -> None:
         model_instance = Mock()
         model_instance.credentials = {"k": "v"}
         model_instance.model_type_instance.get_model_schema.return_value = SimpleNamespace(
@@ -503,7 +503,7 @@ class TestParagraphIndexProcessor:
             "Failed to convert image file to prompt message content" in record.message for record in caplog.records
         )
 
-    def test_extract_images_from_text_handles_patterns_and_build_errors(self, caplog) -> None:
+    def test_extract_images_from_text_handles_patterns_and_build_errors(self, caplog: pytest.LogCaptureFixture) -> None:
         text = (
             "![img](/files/11111111-1111-1111-1111-111111111111/image-preview) "
             "![img2](/files/22222222-2222-2222-2222-222222222222/file-preview) "
@@ -554,7 +554,7 @@ class TestParagraphIndexProcessor:
         session.scalars.return_value = scalars_result
         assert ParagraphIndexProcessor._extract_images_from_text("tenant-1", "no images here", session) == []
 
-    def test_extract_images_from_text_logs_when_build_fails(self, caplog) -> None:
+    def test_extract_images_from_text_logs_when_build_fails(self, caplog: pytest.LogCaptureFixture) -> None:
         text = "![img](/files/11111111-1111-1111-1111-111111111111/image-preview)"
         image_upload = SimpleNamespace(
             id="11111111-1111-1111-1111-111111111111",
@@ -583,7 +583,7 @@ class TestParagraphIndexProcessor:
         assert files == []
         assert sum(1 for r in caplog.records if r.levelno == logging.WARNING) == 1
 
-    def test_extract_images_from_segment_attachments(self, caplog) -> None:
+    def test_extract_images_from_segment_attachments(self, caplog: pytest.LogCaptureFixture) -> None:
         image_upload = SimpleNamespace(
             id="file-1",
             name="image",
diff --git a/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py b/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py
index 4ffd0a76433..6e5a4fabbb0 100644
--- a/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py
+++ b/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py
@@ -351,7 +351,9 @@ class TestQAIndexProcessor:
         assert all_qa_documents[0].metadata["answer"] == "A test."
         assert all_qa_documents[1].metadata["answer"] == "Coverage."
 
-    def test_format_qa_document_logs_errors(self, processor: QAIndexProcessor, fake_flask_app, caplog) -> None:
+    def test_format_qa_document_logs_errors(
+        self, processor: QAIndexProcessor, fake_flask_app, caplog: pytest.LogCaptureFixture
+    ) -> None:
         all_qa_documents: list[Document] = []
         source_document = Document(page_content="source text", metadata={"origin": "doc-1"})
 
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/test_llm_quota.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_llm_quota.py
index 12c7f8113c7..97d7e4a937b 100644
--- a/api/tests/unit_tests/core/workflow/graph_engine/layers/test_llm_quota.py
+++ b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_llm_quota.py
@@ -4,6 +4,8 @@ from datetime import datetime
 from types import SimpleNamespace
 from unittest.mock import MagicMock, patch
 
+import pytest
+
 from core.app.workflow.layers.llm_quota import LLMQuotaLayer
 from core.errors.error import QuotaExceededError
 from graphon.enums import BuiltinNodeTypes, WorkflowNodeExecutionStatus
@@ -122,7 +124,7 @@ def test_precheck_ignores_non_quota_node() -> None:
     mock_check.assert_not_called()
 
 
-def test_quota_error_is_handled_in_layer(caplog) -> None:
+def test_quota_error_is_handled_in_layer(caplog: pytest.LogCaptureFixture) -> None:
     layer = LLMQuotaLayer(tenant_id="tenant-id")
     stop_event = threading.Event()
     layer.command_channel = MagicMock()
diff --git a/api/tests/unit_tests/enterprise/telemetry/test_exporter.py b/api/tests/unit_tests/enterprise/telemetry/test_exporter.py
index 674a2026131..e04046a1f0d 100644
--- a/api/tests/unit_tests/enterprise/telemetry/test_exporter.py
+++ b/api/tests/unit_tests/enterprise/telemetry/test_exporter.py
@@ -7,6 +7,8 @@ from datetime import UTC, datetime
 from types import SimpleNamespace
 from unittest.mock import MagicMock, patch
 
+import pytest
+
 from configs.enterprise import EnterpriseTelemetryConfig
 from enterprise.telemetry.entities import EnterpriseTelemetryCounter, EnterpriseTelemetryHistogram
 from enterprise.telemetry.exporter import EnterpriseExporter, _datetime_to_ns, _parse_otlp_headers
@@ -533,7 +535,7 @@ def test_export_span_cross_workflow_parent_context() -> None:
     assert kwargs["context"] is not None
 
 
-def test_export_span_logs_exception_on_error(caplog) -> None:
+def test_export_span_logs_exception_on_error(caplog: pytest.LogCaptureFixture) -> None:
     """If the span block raises, the exception is logged and context is still cleared."""
     exporter, mock_tracer, mock_span = _make_exporter_with_mock_tracer()
 
@@ -546,7 +548,7 @@ def test_export_span_logs_exception_on_error(caplog) -> None:
     assert "bad.span" in caplog.text
 
 
-def test_export_span_invalid_trace_correlation_logs_warning(caplog) -> None:
+def test_export_span_invalid_trace_correlation_logs_warning(caplog: pytest.LogCaptureFixture) -> None:
     """Invalid UUID for trace_correlation_override triggers a warning log."""
     exporter, mock_tracer, mock_span = _make_exporter_with_mock_tracer()
 
diff --git a/api/tests/unit_tests/events/test_update_provider_when_message_created.py b/api/tests/unit_tests/events/test_update_provider_when_message_created.py
index 4b2a6438f44..f9ac5d9678e 100644
--- a/api/tests/unit_tests/events/test_update_provider_when_message_created.py
+++ b/api/tests/unit_tests/events/test_update_provider_when_message_created.py
@@ -4,6 +4,7 @@ from types import SimpleNamespace
 from unittest.mock import patch
 from uuid import uuid4
 
+import pytest
 from sqlalchemy import create_engine, select
 from sqlalchemy.engine import Engine
 from sqlalchemy.orm import sessionmaker
@@ -122,7 +123,9 @@ def test_message_created_paid_credit_accounting_uses_paid_pool() -> None:
     )
 
 
-def test_capped_credit_pool_accounting_skips_exhaustion_warning_when_full_amount_is_deducted(caplog) -> None:
+def test_capped_credit_pool_accounting_skips_exhaustion_warning_when_full_amount_is_deducted(
+    caplog: pytest.LogCaptureFixture,
+) -> None:
     with patch(
         "services.credit_pool_service.CreditPoolService.deduct_credits_capped",
         return_value=3,
diff --git a/api/tests/unit_tests/extensions/test_ext_request_logging.py b/api/tests/unit_tests/extensions/test_ext_request_logging.py
index 3d2f8541f63..70e80707882 100644
--- a/api/tests/unit_tests/extensions/test_ext_request_logging.py
+++ b/api/tests/unit_tests/extensions/test_ext_request_logging.py
@@ -56,18 +56,19 @@ def mock_response_receiver(monkeypatch: pytest.MonkeyPatch) -> mock.Mock:
     return mock_log_request_finished
 
 
-@pytest.fixture
-def mock_logger(monkeypatch: pytest.MonkeyPatch) -> logging.Logger:
-    _logger = mock.MagicMock(spec=logging.Logger)
-    monkeypatch.setattr(ext_request_logging, "logger", _logger)
-    return _logger
-
-
 @pytest.fixture
 def enable_request_logging(monkeypatch: pytest.MonkeyPatch):
     monkeypatch.setattr(dify_config, "ENABLE_REQUEST_LOGGING", True)
 
 
+def _captured_records(caplog: pytest.LogCaptureFixture, level: int) -> list[logging.LogRecord]:
+    return [
+        record
+        for record in caplog.records
+        if record.name == ext_request_logging.logger.name and record.levelno == level
+    ]
+
+
 class TestRequestLoggingExtension:
     def test_receiver_should_not_be_invoked_if_configuration_is_disabled(
         self,
@@ -108,67 +109,74 @@ class TestRequestLoggingExtension:
 
 class TestLoggingLevel:
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_logging_should_be_skipped_if_level_is_above_debug(self, enable_request_logging, mock_logger):
-        mock_logger.isEnabledFor.return_value = False
+    def test_logging_should_be_skipped_if_level_is_above_debug(
+        self, enable_request_logging, caplog: pytest.LogCaptureFixture
+    ):
+        caplog.set_level(logging.INFO, logger=ext_request_logging.logger.name)
         app = _get_test_app()
         init_app(app)
 
         with app.test_client() as client:
             client.post("/", json={_KEY_NEEDLE: _VALUE_NEEDLE})
-        mock_logger.debug.assert_not_called()
+        assert not _captured_records(caplog, logging.DEBUG)
 
 
 class TestRequestReceiverLogging:
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_non_json_request(self, enable_request_logging, mock_logger, mock_response_receiver):
-        mock_logger.isEnabledFor.return_value = True
+    def test_non_json_request(self, enable_request_logging, caplog: pytest.LogCaptureFixture, mock_response_receiver):
+        caplog.set_level(logging.DEBUG, logger=ext_request_logging.logger.name)
         app = _get_test_app()
         init_app(app)
 
         with app.test_client() as client:
             client.post("/", data="plain text")
-        assert mock_logger.debug.call_count == 1
-        call_args = mock_logger.debug.call_args[0]
-        assert "Received Request" in call_args[0]
-        assert call_args[1] == "POST"
-        assert call_args[2] == "/"
-        assert "Request Body" not in call_args[0]
+        debug_records = _captured_records(caplog, logging.DEBUG)
+        assert len(debug_records) == 1
+        record = debug_records[0]
+        assert "Received Request" in record.msg
+        assert record.args == ("POST", "/")
+        assert "Request Body" not in record.msg
 
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_json_request(self, enable_request_logging, mock_logger, mock_response_receiver):
-        mock_logger.isEnabledFor.return_value = True
+    def test_json_request(self, enable_request_logging, caplog: pytest.LogCaptureFixture, mock_response_receiver):
+        caplog.set_level(logging.DEBUG, logger=ext_request_logging.logger.name)
         app = _get_test_app()
         init_app(app)
 
         with app.test_client() as client:
             client.post("/", json={_KEY_NEEDLE: _VALUE_NEEDLE})
-        assert mock_logger.debug.call_count == 1
-        call_args = mock_logger.debug.call_args[0]
-        assert "Received Request" in call_args[0]
-        assert "Request Body" in call_args[0]
-        assert call_args[1] == "POST"
-        assert call_args[2] == "/"
-        assert _KEY_NEEDLE in call_args[3]
+        debug_records = _captured_records(caplog, logging.DEBUG)
+        assert len(debug_records) == 1
+        record = debug_records[0]
+        assert "Received Request" in record.msg
+        assert "Request Body" in record.msg
+        assert record.args[0] == "POST"
+        assert record.args[1] == "/"
+        assert _KEY_NEEDLE in record.args[2]
 
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_json_request_with_empty_body(self, enable_request_logging, mock_logger, mock_response_receiver):
-        mock_logger.isEnabledFor.return_value = True
+    def test_json_request_with_empty_body(
+        self, enable_request_logging, caplog: pytest.LogCaptureFixture, mock_response_receiver
+    ):
+        caplog.set_level(logging.DEBUG, logger=ext_request_logging.logger.name)
         app = _get_test_app()
         init_app(app)
 
         with app.test_client() as client:
             client.post("/", headers={"Content-Type": "application/json"})
 
-        assert mock_logger.debug.call_count == 1
-        call_args = mock_logger.debug.call_args[0]
-        assert "Received Request" in call_args[0]
-        assert "Request Body" not in call_args[0]
-        assert call_args[1] == "POST"
-        assert call_args[2] == "/"
+        debug_records = _captured_records(caplog, logging.DEBUG)
+        assert len(debug_records) == 1
+        record = debug_records[0]
+        assert "Received Request" in record.msg
+        assert "Request Body" not in record.msg
+        assert record.args == ("POST", "/")
 
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_json_request_with_invalid_json_as_body(self, enable_request_logging, mock_logger, mock_response_receiver):
-        mock_logger.isEnabledFor.return_value = True
+    def test_json_request_with_invalid_json_as_body(
+        self, enable_request_logging, caplog: pytest.LogCaptureFixture, mock_response_receiver
+    ):
+        caplog.set_level(logging.DEBUG, logger=ext_request_logging.logger.name)
         app = _get_test_app()
         init_app(app)
 
@@ -178,50 +186,53 @@ class TestRequestReceiverLogging:
                 headers={"Content-Type": "application/json"},
                 data="{",
             )
-        assert mock_logger.debug.call_count == 0
-        assert mock_logger.exception.call_count == 1
-
-        exception_call_args = mock_logger.exception.call_args[0]
-        assert exception_call_args[0] == "Failed to parse JSON request"
+        assert not _captured_records(caplog, logging.DEBUG)
+        error_records = _captured_records(caplog, logging.ERROR)
+        assert len(error_records) == 1
+        assert error_records[0].message == "Failed to parse JSON request"
 
 
 class TestResponseReceiverLogging:
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_non_json_response(self, enable_request_logging, mock_logger):
-        mock_logger.isEnabledFor.return_value = True
+    def test_non_json_response(self, enable_request_logging, caplog: pytest.LogCaptureFixture):
+        caplog.set_level(logging.DEBUG, logger=ext_request_logging.logger.name)
         app = _get_test_app()
         response = Response(
             "OK",
             headers={"Content-Type": "text/plain"},
         )
         _log_request_finished(app, response)
-        assert mock_logger.debug.call_count == 1
-        call_args = mock_logger.debug.call_args[0]
-        assert "Response" in call_args[0]
-        assert "200" in call_args[1]
-        assert call_args[2] == "text/plain"
-        assert "Response Body" not in call_args[0]
+        debug_records = _captured_records(caplog, logging.DEBUG)
+        assert len(debug_records) == 1
+        record = debug_records[0]
+        assert "Response" in record.msg
+        assert "200" in record.args[0]
+        assert record.args[1] == "text/plain"
+        assert "Response Body" not in record.msg
 
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_json_response(self, enable_request_logging, mock_logger, mock_response_receiver):
-        mock_logger.isEnabledFor.return_value = True
+    def test_json_response(self, enable_request_logging, caplog: pytest.LogCaptureFixture, mock_response_receiver):
+        caplog.set_level(logging.DEBUG, logger=ext_request_logging.logger.name)
         app = _get_test_app()
         response = Response(
             json.dumps({_KEY_NEEDLE: _VALUE_NEEDLE}),
             headers={"Content-Type": "application/json"},
         )
         _log_request_finished(app, response)
-        assert mock_logger.debug.call_count == 1
-        call_args = mock_logger.debug.call_args[0]
-        assert "Response" in call_args[0]
-        assert "Response Body" in call_args[0]
-        assert "200" in call_args[1]
-        assert call_args[2] == "application/json"
-        assert _KEY_NEEDLE in call_args[3]
+        debug_records = _captured_records(caplog, logging.DEBUG)
+        assert len(debug_records) == 1
+        record = debug_records[0]
+        assert "Response" in record.msg
+        assert "Response Body" in record.msg
+        assert "200" in record.args[0]
+        assert record.args[1] == "application/json"
+        assert _KEY_NEEDLE in record.args[2]
 
     @pytest.mark.usefixtures("enable_request_logging")
-    def test_json_request_with_invalid_json_as_body(self, enable_request_logging, mock_logger, mock_response_receiver):
-        mock_logger.isEnabledFor.return_value = True
+    def test_json_request_with_invalid_json_as_body(
+        self, enable_request_logging, caplog: pytest.LogCaptureFixture, mock_response_receiver
+    ):
+        caplog.set_level(logging.DEBUG, logger=ext_request_logging.logger.name)
         app = _get_test_app()
 
         response = Response(
@@ -229,11 +240,10 @@ class TestResponseReceiverLogging:
             headers={"Content-Type": "application/json"},
         )
         _log_request_finished(app, response)
-        assert mock_logger.debug.call_count == 0
-        assert mock_logger.exception.call_count == 1
-
-        exception_call_args = mock_logger.exception.call_args[0]
-        assert exception_call_args[0] == "Failed to parse JSON response"
+        assert not _captured_records(caplog, logging.DEBUG)
+        error_records = _captured_records(caplog, logging.ERROR)
+        assert len(error_records) == 1
+        assert error_records[0].message == "Failed to parse JSON response"
 
 
 class TestResponseUnmodified:
@@ -267,7 +277,7 @@ class TestResponseUnmodified:
 
 class TestRequestFinishedInfoAccessLine:
     def test_info_access_log_includes_method_path_status_duration_trace_id(
-        self, monkeypatch: pytest.MonkeyPatch, caplog
+        self, monkeypatch: pytest.MonkeyPatch, caplog: pytest.LogCaptureFixture
     ):
         """Ensure INFO access line contains expected fields with computed duration and trace id."""
         app = _get_test_app()
diff --git a/api/tests/unit_tests/services/enterprise/test_plugin_manager_service.py b/api/tests/unit_tests/services/enterprise/test_plugin_manager_service.py
index 759d9079348..b0db3bc248b 100644
--- a/api/tests/unit_tests/services/enterprise/test_plugin_manager_service.py
+++ b/api/tests/unit_tests/services/enterprise/test_plugin_manager_service.py
@@ -5,6 +5,7 @@ This module covers the pre-uninstall plugin hook behavior:
 - API failure: soft-fail (logs and does not re-raise)
 """
 
+import logging
 from unittest.mock import patch
 
 import pytest
@@ -43,18 +44,16 @@ class TestTryPreUninstallPlugin:
                 timeout=dify_config.ENTERPRISE_REQUEST_TIMEOUT,
             )
 
-    def test_try_pre_uninstall_plugin_http_error_soft_fails(self):
+    def test_try_pre_uninstall_plugin_http_error_soft_fails(self, caplog: pytest.LogCaptureFixture):
         body = PreUninstallPluginRequest(
             tenant_id="tenant-456",
             plugin_unique_identifier="com.example.other_plugin",
         )
+        caplog.set_level(logging.ERROR, logger="services.enterprise.plugin_manager_service")
 
-        with (
-            patch(
-                "services.enterprise.plugin_manager_service.EnterprisePluginManagerRequest.send_request"
-            ) as mock_send_request,
-            patch("services.enterprise.plugin_manager_service.logger") as mock_logger,
-        ):
+        with patch(
+            "services.enterprise.plugin_manager_service.EnterprisePluginManagerRequest.send_request"
+        ) as mock_send_request:
             mock_send_request.side_effect = HTTPStatusError(
                 "502 Bad Gateway",
                 request=None,
@@ -69,20 +68,22 @@ class TestTryPreUninstallPlugin:
                 json={"tenant_id": "tenant-456", "plugin_unique_identifier": "com.example.other_plugin"},
                 timeout=dify_config.ENTERPRISE_REQUEST_TIMEOUT,
             )
-            mock_logger.exception.assert_called_once()
+            assert len(caplog.records) == 1
+            assert caplog.messages[0] == (
+                "failed to perform pre uninstall plugin hook. tenant_id: tenant-456, "
+                "plugin_unique_identifier: com.example.other_plugin"
+            )
 
-    def test_try_pre_uninstall_plugin_generic_exception_soft_fails(self):
+    def test_try_pre_uninstall_plugin_generic_exception_soft_fails(self, caplog: pytest.LogCaptureFixture):
         body = PreUninstallPluginRequest(
             tenant_id="tenant-789",
             plugin_unique_identifier="com.example.failing_plugin",
         )
+        caplog.set_level(logging.ERROR, logger="services.enterprise.plugin_manager_service")
 
-        with (
-            patch(
-                "services.enterprise.plugin_manager_service.EnterprisePluginManagerRequest.send_request"
-            ) as mock_send_request,
-            patch("services.enterprise.plugin_manager_service.logger") as mock_logger,
-        ):
+        with patch(
+            "services.enterprise.plugin_manager_service.EnterprisePluginManagerRequest.send_request"
+        ) as mock_send_request:
             mock_send_request.side_effect = ConnectionError("network unreachable")
 
             PluginManagerService.try_pre_uninstall_plugin(body)
@@ -93,7 +94,11 @@ class TestTryPreUninstallPlugin:
                 json={"tenant_id": "tenant-789", "plugin_unique_identifier": "com.example.failing_plugin"},
                 timeout=dify_config.ENTERPRISE_REQUEST_TIMEOUT,
             )
-            mock_logger.exception.assert_called_once()
+            assert len(caplog.records) == 1
+            assert caplog.messages[0] == (
+                "failed to perform pre uninstall plugin hook. tenant_id: tenant-789, "
+                "plugin_unique_identifier: com.example.failing_plugin"
+            )
 
 
 class TestCheckCredentialPolicyCompliance:
diff --git a/api/tests/unit_tests/services/retention/workflow_run/test_restore_archived_workflow_run.py b/api/tests/unit_tests/services/retention/workflow_run/test_restore_archived_workflow_run.py
index 628e4e594dd..4768215210e 100644
--- a/api/tests/unit_tests/services/retention/workflow_run/test_restore_archived_workflow_run.py
+++ b/api/tests/unit_tests/services/retention/workflow_run/test_restore_archived_workflow_run.py
@@ -8,6 +8,7 @@ and both positive and negative test scenarios.
 
 import io
 import json
+import logging
 import zipfile
 from datetime import datetime
 from unittest.mock import Mock, create_autospec, patch
@@ -312,16 +313,16 @@ class TestGetSchemaVersion:
         result = restore._get_schema_version(manifest)
         assert result == "1.0"
 
-    def test_missing_schema_version_defaults_to_1_0(self):
+    def test_missing_schema_version_defaults_to_1_0(self, caplog: pytest.LogCaptureFixture):
         """Should default to 1.0 when schema_version is missing."""
         restore = WorkflowRunRestore()
         manifest = {"tables": {}}
+        caplog.set_level(logging.WARNING, logger="services.retention.workflow_run.restore_archived_workflow_run")
 
-        with patch("services.retention.workflow_run.restore_archived_workflow_run.logger") as mock_logger:
-            result = restore._get_schema_version(manifest)
+        result = restore._get_schema_version(manifest)
 
         assert result == "1.0"
-        mock_logger.warning.assert_called_once_with("Manifest missing schema_version; defaulting to 1.0")
+        assert "Manifest missing schema_version; defaulting to 1.0" in caplog.messages
 
     def test_unsupported_schema_version_raises_error(self):
         """Should raise ValueError for unsupported schema version."""
@@ -492,19 +493,19 @@ class TestRestoreTableRecords:
     """Tests for WorkflowRunRestore._restore_table_records method."""
 
     @patch("services.retention.workflow_run.restore_archived_workflow_run.TABLE_MODELS")
-    def test_unknown_table_returns_zero(self, mock_table_models):
+    def test_unknown_table_returns_zero(self, mock_table_models, caplog: pytest.LogCaptureFixture):
         """Should return 0 for unknown table."""
         restore = WorkflowRunRestore()
         mock_table_models.get.return_value = None
 
         mock_session = Mock()
         records = [{"id": "test"}]
+        caplog.set_level(logging.WARNING, logger="services.retention.workflow_run.restore_archived_workflow_run")
 
-        with patch("services.retention.workflow_run.restore_archived_workflow_run.logger") as mock_logger:
-            result = restore._restore_table_records(mock_session, "unknown_table", records, schema_version="1.0")
+        result = restore._restore_table_records(mock_session, "unknown_table", records, schema_version="1.0")
 
         assert result == 0
-        mock_logger.warning.assert_called_once_with("Unknown table: %s", "unknown_table")
+        assert "Unknown table: unknown_table" in caplog.messages
 
     def test_empty_records_returns_zero(self):
         """Should return 0 for empty records list."""
diff --git a/api/tests/unit_tests/services/test_human_input_service.py b/api/tests/unit_tests/services/test_human_input_service.py
index d9d81d66566..5c26a9ef57d 100644
--- a/api/tests/unit_tests/services/test_human_input_service.py
+++ b/api/tests/unit_tests/services/test_human_input_service.py
@@ -673,7 +673,7 @@ def test_enqueue_resume_workflow_not_found(mocker: MockerFixture, mock_session_f
     assert "WorkflowRun not found" in str(excinfo.value)
 
 
-def test_enqueue_resume_app_not_found(mocker, mock_session_factory, caplog):
+def test_enqueue_resume_app_not_found(mocker, mock_session_factory, caplog: pytest.LogCaptureFixture):
     session_factory, session = mock_session_factory
     service = HumanInputService(session_factory)
 
diff --git a/api/tests/unit_tests/services/test_knowledge_retrieval_inner_service.py b/api/tests/unit_tests/services/test_knowledge_retrieval_inner_service.py
index 11f9dfedc1a..321b1a7c046 100644
--- a/api/tests/unit_tests/services/test_knowledge_retrieval_inner_service.py
+++ b/api/tests/unit_tests/services/test_knowledge_retrieval_inner_service.py
@@ -74,14 +74,14 @@ def _build_source() -> Source:
 
 class TestInnerKnowledgeRetrievalService:
     @patch("services.knowledge_retrieval_inner_service.DatasetRetrieval")
-    @patch("services.knowledge_retrieval_inner_service.db")
-    def test_retrieve_maps_multiple_request_and_skips_enable_api_check(self, mock_db, mock_rag_cls):
+    def test_retrieve_maps_multiple_request_and_skips_enable_api_check(self, mock_rag_cls):
         request = _build_request()
+        mock_session = MagicMock()
         mock_app = MagicMock(id="app-1", tenant_id="tenant-1")
         dataset_1 = MagicMock(id="dataset-1", tenant_id="tenant-1", enable_api=False)
         dataset_2 = MagicMock(id="dataset-2", tenant_id="tenant-1", enable_api=True)
-        mock_db.session.scalar.return_value = mock_app
-        mock_db.session.scalars.return_value.all.return_value = [dataset_1, dataset_2]
+        mock_session.scalar.return_value = mock_app
+        mock_session.scalars.return_value.all.return_value = [dataset_1, dataset_2]
 
         rag = MagicMock()
         rag.knowledge_retrieval.return_value = [_build_source()]
@@ -103,7 +103,7 @@ class TestInnerKnowledgeRetrievalService:
         }
         mock_rag_cls.return_value = rag
 
-        response = InnerKnowledgeRetrievalService().retrieve(request)
+        response = InnerKnowledgeRetrievalService().retrieve(request, mock_session)
 
         rag_request = rag.knowledge_retrieval.call_args.kwargs["request"]
         assert rag_request.tenant_id == "tenant-1"
@@ -129,8 +129,7 @@ class TestInnerKnowledgeRetrievalService:
         assert response.usage.currency == "USD"
 
     @patch("services.knowledge_retrieval_inner_service.DatasetRetrieval")
-    @patch("services.knowledge_retrieval_inner_service.db")
-    def test_retrieve_maps_single_request(self, mock_db, mock_rag_cls):
+    def test_retrieve_maps_single_request(self, mock_rag_cls):
         request = _build_request(
             dataset_ids=["dataset-1"],
             retrieval={
@@ -153,8 +152,9 @@ class TestInnerKnowledgeRetrievalService:
             },
             attachment_ids=[],
         )
-        mock_db.session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-1")
-        mock_db.session.scalars.return_value.all.return_value = [MagicMock(id="dataset-1", tenant_id="tenant-1")]
+        mock_session = MagicMock()
+        mock_session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-1")
+        mock_session.scalars.return_value.all.return_value = [MagicMock(id="dataset-1", tenant_id="tenant-1")]
 
         rag = MagicMock()
         rag.knowledge_retrieval.return_value = []
@@ -174,7 +174,7 @@ class TestInnerKnowledgeRetrievalService:
         }
         mock_rag_cls.return_value = rag
 
-        InnerKnowledgeRetrievalService().retrieve(request)
+        InnerKnowledgeRetrievalService().retrieve(request, mock_session)
 
         rag_request = rag.knowledge_retrieval.call_args.kwargs["request"]
         assert rag_request.retrieval_mode == "single"
@@ -186,35 +186,35 @@ class TestInnerKnowledgeRetrievalService:
         assert rag_request.metadata_model_config is not None
         assert rag_request.metadata_model_config.provider == "openai"
 
-    @patch("services.knowledge_retrieval_inner_service.db")
-    def test_retrieve_raises_when_app_missing(self, mock_db):
-        mock_db.session.scalar.return_value = None
+    def test_retrieve_raises_when_app_missing(self):
+        mock_session = MagicMock()
+        mock_session.scalar.return_value = None
 
         with pytest.raises(InnerKnowledgeRetrieveAppNotFoundError):
-            InnerKnowledgeRetrievalService().retrieve(_build_request())
+            InnerKnowledgeRetrievalService().retrieve(_build_request(), mock_session)
 
-    @patch("services.knowledge_retrieval_inner_service.db")
-    def test_retrieve_raises_when_app_belongs_to_other_tenant(self, mock_db):
-        mock_db.session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-2")
+    def test_retrieve_raises_when_app_belongs_to_other_tenant(self):
+        mock_session = MagicMock()
+        mock_session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-2")
 
         with pytest.raises(InnerKnowledgeRetrieveAppTenantMismatchError):
-            InnerKnowledgeRetrievalService().retrieve(_build_request())
+            InnerKnowledgeRetrievalService().retrieve(_build_request(), mock_session)
 
-    @patch("services.knowledge_retrieval_inner_service.db")
-    def test_retrieve_raises_when_dataset_missing(self, mock_db):
-        mock_db.session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-1")
-        mock_db.session.scalars.return_value.all.return_value = [MagicMock(id="dataset-1", tenant_id="tenant-1")]
+    def test_retrieve_raises_when_dataset_missing(self):
+        mock_session = MagicMock()
+        mock_session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-1")
+        mock_session.scalars.return_value.all.return_value = [MagicMock(id="dataset-1", tenant_id="tenant-1")]
 
         with pytest.raises(InnerKnowledgeRetrieveDatasetNotFoundError):
-            InnerKnowledgeRetrievalService().retrieve(_build_request())
+            InnerKnowledgeRetrievalService().retrieve(_build_request(), mock_session)
 
-    @patch("services.knowledge_retrieval_inner_service.db")
-    def test_retrieve_raises_when_dataset_belongs_to_other_tenant(self, mock_db):
-        mock_db.session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-1")
-        mock_db.session.scalars.return_value.all.return_value = [
+    def test_retrieve_raises_when_dataset_belongs_to_other_tenant(self):
+        mock_session = MagicMock()
+        mock_session.scalar.return_value = MagicMock(id="app-1", tenant_id="tenant-1")
+        mock_session.scalars.return_value.all.return_value = [
             MagicMock(id="dataset-1", tenant_id="tenant-1"),
             MagicMock(id="dataset-2", tenant_id="tenant-2"),
         ]
 
         with pytest.raises(InnerKnowledgeRetrieveDatasetTenantMismatchError):
-            InnerKnowledgeRetrievalService().retrieve(_build_request())
+            InnerKnowledgeRetrievalService().retrieve(_build_request(), mock_session)
diff --git a/api/tests/unit_tests/services/test_webhook_service.py b/api/tests/unit_tests/services/test_webhook_service.py
index a2b56fe7771..d36c45d7777 100644
--- a/api/tests/unit_tests/services/test_webhook_service.py
+++ b/api/tests/unit_tests/services/test_webhook_service.py
@@ -1,3 +1,4 @@
+import logging
 from io import BytesIO
 from unittest.mock import MagicMock, patch
 
@@ -159,7 +160,9 @@ class TestWebhookServiceUnit:
 
         assert result == "application/octet-stream"
 
-    def test_detect_binary_mimetype_handles_magic_exception(self, monkeypatch: pytest.MonkeyPatch):
+    def test_detect_binary_mimetype_handles_magic_exception(
+        self, monkeypatch: pytest.MonkeyPatch, caplog: pytest.LogCaptureFixture
+    ):
         """Fallback MIME type should be used when python-magic raises an exception."""
         try:
             import magic as real_magic
@@ -169,12 +172,12 @@ class TestWebhookServiceUnit:
         fake_magic = MagicMock()
         fake_magic.from_buffer.side_effect = real_magic.MagicException("magic error")
         monkeypatch.setattr("services.trigger.webhook_service.magic", fake_magic)
+        caplog.set_level(logging.DEBUG, logger="services.trigger.webhook_service")
 
-        with patch("services.trigger.webhook_service.logger", autospec=True) as mock_logger:
-            result = WebhookService._detect_binary_mimetype(b"binary data")
+        result = WebhookService._detect_binary_mimetype(b"binary data")
 
-            assert result == "application/octet-stream"
-            mock_logger.debug.assert_called_once()
+        assert result == "application/octet-stream"
+        assert "python-magic detection failed for octet-stream payload" in caplog.messages
 
     def test_extract_webhook_data_invalid_json(self):
         """Test webhook data extraction with invalid JSON."""
diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index abb273edb6c..4b2ad6864dc 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -121,11 +121,6 @@
       "count": 3
     }
   },
-  "web/__tests__/navigation-utils.test.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/__tests__/plugin-tool-workflow-error.test.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -343,14 +338,6 @@
       "count": 4
     }
   },
-  "web/app/components/app-sidebar/app-sidebar-dropdown.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/app-sidebar/dataset-info/__tests__/index.spec.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -559,14 +546,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/configuration/config-var/select-type-item/index.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/config-var/select-var-type.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -616,17 +595,6 @@
       "count": 4
     }
   },
-  "web/app/components/app/configuration/config/assistant-type-picker/index.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/config/automatic/get-automatic-res.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -808,11 +776,6 @@
       "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
@@ -996,11 +959,6 @@
       "count": 1
     }
   },
-  "web/app/components/apps/new-app-card.tsx": {
-    "react/set-state-in-effect": {
-      "count": 3
-    }
-  },
   "web/app/components/apps/starred-app-card.tsx": {
     "jsx-a11y/no-noninteractive-element-to-interactive-role": {
       "count": 1
@@ -1617,17 +1575,6 @@
       "count": 2
     }
   },
-  "web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 2
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/base/form/components/field/variable-selector.tsx": {
     "no-console": {
       "count": 1
@@ -1643,22 +1590,12 @@
       "count": 1
     }
   },
-  "web/app/components/base/form/form-scenarios/base/index.tsx": {
-    "react/static-components": {
-      "count": 2
-    }
-  },
   "web/app/components/base/form/form-scenarios/base/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
     "ts/no-explicit-any": {
-      "count": 3
-    }
-  },
-  "web/app/components/base/form/form-scenarios/demo/index.tsx": {
-    "no-console": {
-      "count": 2
+      "count": 1
     }
   },
   "web/app/components/base/form/form-scenarios/input-field/__tests__/field.spec.tsx": {
@@ -1679,24 +1616,6 @@
       "count": 2
     }
   },
-  "web/app/components/base/form/form-scenarios/node-panel/__tests__/field.spec.tsx": {
-    "react/static-components": {
-      "count": 2
-    }
-  },
-  "web/app/components/base/form/form-scenarios/node-panel/field.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/base/form/form-scenarios/node-panel/types.ts": {
-    "erasable-syntax-only/enums": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "web/app/components/base/form/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 3
@@ -1802,7 +1721,7 @@
   },
   "web/app/components/base/icons/src/vender/line/arrows/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 6
+      "count": 5
     }
   },
   "web/app/components/base/icons/src/vender/line/communication/index.ts": {
@@ -1827,7 +1746,7 @@
   },
   "web/app/components/base/icons/src/vender/line/files/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 6
+      "count": 4
     }
   },
   "web/app/components/base/icons/src/vender/line/financeAndECommerce/index.ts": {
@@ -1837,7 +1756,7 @@
   },
   "web/app/components/base/icons/src/vender/line/general/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 11
+      "count": 10
     }
   },
   "web/app/components/base/icons/src/vender/line/images/index.ts": {
@@ -1845,11 +1764,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/icons/src/vender/line/layout/index.ts": {
-    "no-barrel-files/no-barrel-files": {
-      "count": 1
-    }
-  },
   "web/app/components/base/icons/src/vender/line/mediaAndDevices/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -1912,7 +1826,7 @@
   },
   "web/app/components/base/icons/src/vender/solid/education/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 3
+      "count": 2
     }
   },
   "web/app/components/base/icons/src/vender/solid/files/index.ts": {
@@ -1981,17 +1895,6 @@
       "count": 3
     }
   },
-  "web/app/components/base/image-uploader/audio-preview.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/media-has-caption": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/base/image-uploader/hooks.ts": {
     "ts/no-explicit-any": {
       "count": 4
@@ -2029,17 +1932,6 @@
       "count": 2
     }
   },
-  "web/app/components/base/image-uploader/video-preview.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/media-has-caption": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/base/inline-delete-confirm/index.stories.tsx": {
     "no-console": {
       "count": 2
@@ -2589,27 +2481,6 @@
       "count": 4
     }
   },
-  "web/app/components/base/with-input-validation/index.stories.tsx": {
-    "jsx-a11y/aria-role": {
-      "count": 7
-    },
-    "no-console": {
-      "count": 1
-    }
-  },
-  "web/app/components/base/with-input-validation/index.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/billing/header-billing-btn/index.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/billing/plan/assets/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 4
@@ -2887,14 +2758,6 @@
       "count": 3
     }
   },
-  "web/app/components/datasets/create/step-two/preview-item/index.tsx": {
-    "erasable-syntax-only/enums": {
-      "count": 1
-    },
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/create/website/base/crawled-result-item.tsx": {
     "jsx-a11y/label-has-associated-control": {
       "count": 1
@@ -3359,14 +3222,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/list/dataset-card/operation-item.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -3650,24 +3505,6 @@
       "count": 2
     }
   },
-  "web/app/components/header/account-setting/key-validator/Operate.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 4
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 4
-    }
-  },
-  "web/app/components/header/account-setting/key-validator/declarations.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx": {
-    "jsx-a11y/role-has-required-aria-props": {
-      "count": 1
-    }
-  },
   "web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx": {
     "jsx-a11y/no-autofocus": {
       "count": 1
@@ -3900,14 +3737,6 @@
       "count": 1
     }
   },
-  "web/app/components/header/nav/index.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/main-nav/components/workspace-switcher.tsx": {
     "jsx-a11y/no-autofocus": {
       "count": 1
@@ -4044,11 +3873,6 @@
       "count": 2
     }
   },
-  "web/app/components/plugins/plugin-auth/utils.ts": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/__tests__/operation-dropdown.spec.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -4212,17 +4036,9 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 5
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 5
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/tool-selector/components/index.ts": {
     "no-barrel-files/no-barrel-files": {
-      "count": 7
+      "count": 6
     }
   },
   "web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx": {
@@ -4252,11 +4068,6 @@
       "count": 3
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts": {
-    "no-barrel-files/no-barrel-files": {
-      "count": 2
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4297,14 +4108,6 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/plugin-page/filter-management/__tests__/index.spec.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-page/filter-management/category-filter.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4629,11 +4432,6 @@
       "count": 1
     }
   },
-  "web/app/components/share/utils.ts": {
-    "ts/no-explicit-any": {
-      "count": 2
-    }
-  },
   "web/app/components/snippet-list/components/snippet-card.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -4971,11 +4769,6 @@
       "count": 4
     }
   },
-  "web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts": {
-    "react/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/block-selector/use-sticky-scroll.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -5342,30 +5135,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/__tests__/placeholder.spec.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/next-step/operator.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 2
@@ -5421,14 +5190,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -5627,11 +5388,6 @@
       "count": 7
     }
   },
-  "web/app/components/workflow/nodes/agent/use-single-run-form-params.ts": {
-    "ts/no-explicit-any": {
-      "count": 3
-    }
-  },
   "web/app/components/workflow/nodes/answer/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -5675,20 +5431,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/code/dependency-picker.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-autofocus": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/code/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -5784,14 +5526,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -6385,11 +6119,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/tool/components/input-var-list.tsx": {
-    "ts/no-explicit-any": {
-      "count": 7
-    }
-  },
   "web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -6487,11 +6216,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/trigger-plugin/utils/form-helpers.ts": {
-    "ts/no-explicit-any": {
-      "count": 7
-    }
-  },
   "web/app/components/workflow/nodes/trigger-schedule/default.ts": {
     "regexp/no-unused-capturing-group": {
       "count": 2
@@ -6843,14 +6567,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/run/__tests__/special-result-panel.spec.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -6938,14 +6654,6 @@
       "count": 2
     }
   },
-  "web/app/components/workflow/run/loop-result-panel.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/run/node.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1
@@ -7022,26 +6730,11 @@
       "count": 11
     }
   },
-  "web/app/components/workflow/run/utils/format-log/graph-to-log-struct.ts": {
-    "ts/no-explicit-any": {
-      "count": 7
-    }
-  },
   "web/app/components/workflow/run/utils/format-log/index.ts": {
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "web/app/components/workflow/run/utils/format-log/iteration/index.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/run/utils/format-log/loop/index.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/run/utils/format-log/parallel/index.ts": {
     "no-console": {
       "count": 4
@@ -7091,11 +6784,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/utils/debug.ts": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/utils/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 10
@@ -7924,11 +7612,6 @@
       "count": 6
     }
   },
-  "web/utils/navigation.spec.ts": {
-    "ts/no-explicit-any": {
-      "count": 4
-    }
-  },
   "web/utils/tool-call.spec.ts": {
     "ts/no-explicit-any": {
       "count": 1
diff --git a/packages/dify-ui/src/themes/dark.css b/packages/dify-ui/src/themes/dark.css
index 1b24e8fb489..3f4a163a725 100644
--- a/packages/dify-ui/src/themes/dark.css
+++ b/packages/dify-ui/src/themes/dark.css
@@ -162,6 +162,7 @@ html[data-theme="dark"] {
   --color-components-main-nav-glass-surface-middle-2: #0033ff1a;
   --color-components-main-nav-glass-surface-end: #0033ff14;
   --color-components-main-nav-glass-edge-highlight-first: #fffffffa;
+  --color-components-main-nav-glass-edge-highlight-middle: #ffffff00;
   --color-components-main-nav-glass-edge-highlight-end: #ffffff6b;
   --color-components-main-nav-glass-edge-reflection-first: #0033ff00;
   --color-components-main-nav-glass-edge-reflection-middle: #0033ff99;
diff --git a/packages/dify-ui/src/themes/light.css b/packages/dify-ui/src/themes/light.css
index 3feb4afb47f..dd3252f3614 100644
--- a/packages/dify-ui/src/themes/light.css
+++ b/packages/dify-ui/src/themes/light.css
@@ -162,6 +162,7 @@ html[data-theme="light"] {
   --color-components-main-nav-glass-surface-middle-2: #0033ff1a;
   --color-components-main-nav-glass-surface-end: #0033ff14;
   --color-components-main-nav-glass-edge-highlight-first: #fffffffa;
+  --color-components-main-nav-glass-edge-highlight-middle: #ffffff00;
   --color-components-main-nav-glass-edge-highlight-end: #ffffff6b;
   --color-components-main-nav-glass-edge-reflection-first: #0033ff00;
   --color-components-main-nav-glass-edge-reflection-middle: #0033ff99;
diff --git a/packages/dify-ui/src/themes/theme.css b/packages/dify-ui/src/themes/theme.css
index 3e35feb8eb8..c14e54ea549 100644
--- a/packages/dify-ui/src/themes/theme.css
+++ b/packages/dify-ui/src/themes/theme.css
@@ -169,6 +169,7 @@
   --color-components-main-nav-glass-surface-middle-2: var(--color-components-main-nav-glass-surface-middle-2);
   --color-components-main-nav-glass-surface-end: var(--color-components-main-nav-glass-surface-end);
   --color-components-main-nav-glass-edge-highlight-first: var(--color-components-main-nav-glass-edge-highlight-first);
+  --color-components-main-nav-glass-edge-highlight-middle: var(--color-components-main-nav-glass-edge-highlight-middle);
   --color-components-main-nav-glass-edge-highlight-end: var(--color-components-main-nav-glass-edge-highlight-end);
   --color-components-main-nav-glass-edge-reflection-first: var(--color-components-main-nav-glass-edge-reflection-first);
   --color-components-main-nav-glass-edge-reflection-middle: var(--color-components-main-nav-glass-edge-reflection-middle);
diff --git a/web/.storybook/utils/form-story-wrapper.tsx b/web/.storybook/utils/form-story-wrapper.tsx
deleted file mode 100644
index 7503e9905d3..00000000000
--- a/web/.storybook/utils/form-story-wrapper.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { ReactNode } from 'react'
-import { useStore } from '@tanstack/react-form'
-import { useState } from 'react'
-import { useAppForm } from '@/app/components/base/form'
-
-type UseAppFormOptions = Parameters<typeof useAppForm>[0]
-type AppFormInstance = ReturnType<typeof useAppForm>
-
-type FormStoryWrapperProps = {
-  options?: UseAppFormOptions
-  children: (form: AppFormInstance) => ReactNode
-  title?: string
-  subtitle?: string
-}
-
-export const FormStoryWrapper = ({
-  options,
-  children,
-  title,
-  subtitle,
-}: FormStoryWrapperProps) => {
-  const [lastSubmitted, setLastSubmitted] = useState<unknown>(null)
-  const [submitCount, setSubmitCount] = useState(0)
-
-  const form = useAppForm({
-    ...options,
-    onSubmit: (context) => {
-      setSubmitCount(count => count + 1)
-      setLastSubmitted(context.value)
-      options?.onSubmit?.(context)
-    },
-  })
-
-  const values = useStore(form.store, state => state.values)
-  const isSubmitting = useStore(form.store, state => state.isSubmitting)
-  const canSubmit = useStore(form.store, state => state.canSubmit)
-
-  return (
-    <div className="flex flex-col gap-6 px-6 md:flex-row md:px-10">
-      <div className="flex-1 space-y-4">
-        {(title || subtitle) && (
-          <header className="space-y-1">
-            {title && <h3 className="text-lg font-semibold text-text-primary">{title}</h3>}
-            {subtitle && <p className="text-sm text-text-tertiary">{subtitle}</p>}
-          </header>
-        )}
-        {children(form)}
-      </div>
-      <aside className="w-full max-w-sm rounded-xl border border-divider-subtle bg-components-panel-bg p-4 text-xs text-text-secondary shadow-sm">
-        <div className="flex items-center justify-between text-[11px] tracking-wide text-text-tertiary uppercase">
-          <span>Form State</span>
-          <span>
-            {submitCount}
-            {' '}
-            submit
-            {submitCount === 1 ? '' : 's'}
-          </span>
-        </div>
-        <dl className="mt-2 space-y-1">
-          <div className="flex items-center justify-between rounded-md bg-components-button-tertiary-bg px-2 py-1">
-            <dt className="font-medium text-text-secondary">isSubmitting</dt>
-            <dd className="font-mono text-[11px] text-text-primary">{String(isSubmitting)}</dd>
-          </div>
-          <div className="flex items-center justify-between rounded-md bg-components-button-tertiary-bg px-2 py-1">
-            <dt className="font-medium text-text-secondary">canSubmit</dt>
-            <dd className="font-mono text-[11px] text-text-primary">{String(canSubmit)}</dd>
-          </div>
-        </dl>
-        <div className="mt-3 space-y-2">
-          <div>
-            <div className="mb-1 font-medium text-text-secondary">Current Values</div>
-            <pre className="max-h-48 overflow-auto rounded-md bg-background-default-subtle p-3 font-mono text-[11px] leading-tight text-text-primary">
-              {JSON.stringify(values, null, 2)}
-            </pre>
-          </div>
-          <div>
-            <div className="mb-1 font-medium text-text-secondary">Last Submission</div>
-            <pre className="max-h-40 overflow-auto rounded-md bg-background-default-subtle p-3 font-mono text-[11px] leading-tight text-text-primary">
-              {lastSubmitted ? JSON.stringify(lastSubmitted, null, 2) : '—'}
-            </pre>
-          </div>
-        </div>
-      </aside>
-    </div>
-  )
-}
-
-export type FormStoryRender = (form: AppFormInstance) => ReactNode
diff --git a/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx b/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
deleted file mode 100644
index c1f3a1c62d4..00000000000
--- a/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import type { SVGProps } from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import AppDetailNav from '@/app/components/app-sidebar'
-
-const mockSetDetailSidebarMode = vi.fn()
-
-let mockDetailSidebarMode = 'expand'
-let mockPathname = '/app/app-1/logs'
-let mockSelectedSegment = 'logs'
-let mockIsHovering = true
-let hotkeyHandler: ((event: { preventDefault: () => void }) => void) | null = null
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
-vi.mock('@/app/components/main-nav/storage', () => ({
-  useDetailSidebarMode: () => [mockDetailSidebarMode, mockSetDetailSidebarMode],
-}))
-
-vi.mock('@/next/navigation', () => ({
-  usePathname: () => mockPathname,
-  useSelectedLayoutSegment: () => mockSelectedSegment,
-}))
-
-vi.mock('@/next/link', () => ({
-  default: ({
-    href,
-    children,
-    className,
-    title,
-  }: {
-    href: string
-    children?: React.ReactNode
-    className?: string
-    title?: string
-  }) => (
-    <a href={href} className={className} title={title}>
-      {children}
-    </a>
-  ),
-}))
-
-vi.mock('ahooks', () => ({
-  useHover: () => mockIsHovering,
-}))
-
-vi.mock('@tanstack/react-hotkeys', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@tanstack/react-hotkeys')>()
-  return {
-    ...actual,
-    useHotkey: (_hotkey: string, handler: (event: { preventDefault: () => void }) => void) => {
-      hotkeyHandler = handler
-    },
-  }
-})
-
-vi.mock('@/hooks/use-breakpoints', () => ({
-  default: () => 'desktop',
-  MediaType: {
-    mobile: 'mobile',
-    desktop: 'desktop',
-  },
-}))
-
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: () => ({
-    eventEmitter: {
-      useSubscription: vi.fn(),
-    },
-  }),
-}))
-
-vi.mock('@/context/app-context', () => ({
-  useAppContext: () => ({
-    isCurrentWorkspaceEditor: true,
-  }),
-}))
-
-vi.mock('@langgenius/dify-ui/dropdown-menu', () => import('@/__mocks__/base-ui-dropdown-menu'))
-vi.mock('@langgenius/dify-ui/tooltip', () => import('@/__mocks__/base-ui-tooltip'))
-
-vi.mock('@/app/components/app-sidebar/app-info', () => ({
-  default: ({
-    expand,
-    onlyShowDetail,
-    openState,
-  }: {
-    expand: boolean
-    onlyShowDetail?: boolean
-    openState?: boolean
-  }) => (
-    <div
-      data-testid={onlyShowDetail ? 'app-info-detail' : 'app-info'}
-      data-expand={expand}
-      data-open={openState}
-    />
-  ),
-}))
-
-const MockIcon = (props: SVGProps<SVGSVGElement>) => <svg {...props} />
-
-const navigation = [
-  { name: 'Overview', href: '/app/app-1/overview', icon: MockIcon, selectedIcon: MockIcon },
-  { name: 'Logs', href: '/app/app-1/logs', icon: MockIcon, selectedIcon: MockIcon },
-]
-
-describe('App Sidebar Shell Flow', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    localStorage.clear()
-    mockDetailSidebarMode = 'expand'
-    mockPathname = '/app/app-1/logs'
-    mockSelectedSegment = 'logs'
-    mockIsHovering = true
-    hotkeyHandler = null
-  })
-
-  it('renders the expanded sidebar, marks the active nav item, and toggles collapse by click and shortcut', () => {
-    render(<AppDetailNav navigation={navigation} />)
-
-    expect(screen.getByTestId('app-info')).toHaveAttribute('data-expand', 'true')
-
-    const logsLink = screen.getByRole('link', { name: /Logs/i })
-    expect(logsLink.className).toContain('bg-components-menu-item-bg-active')
-
-    fireEvent.click(screen.getByRole('button'))
-    expect(mockSetDetailSidebarMode).toHaveBeenCalledWith('collapse')
-
-    const preventDefault = vi.fn()
-    hotkeyHandler?.({ preventDefault })
-
-    expect(preventDefault).toHaveBeenCalled()
-    expect(mockSetDetailSidebarMode).toHaveBeenCalledWith('collapse')
-  })
-
-  it('keeps the normal sidebar on workflow routes', () => {
-    mockPathname = '/app/app-1/workflow'
-    mockSelectedSegment = 'workflow'
-
-    render(<AppDetailNav navigation={navigation} />)
-
-    expect(screen.getByTestId('app-info')).toBeInTheDocument()
-    expect(screen.getByRole('link', { name: /Overview/i })).toBeInTheDocument()
-    expect(screen.getByRole('link', { name: /Logs/i })).toBeInTheDocument()
-  })
-})
diff --git a/web/__tests__/base/form-demo-flow.test.tsx b/web/__tests__/base/form-demo-flow.test.tsx
deleted file mode 100644
index afb36528c0f..00000000000
--- a/web/__tests__/base/form-demo-flow.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { render, screen, waitFor, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import DemoForm from '@/app/components/base/form/form-scenarios/demo'
-
-describe('Base Form Demo Flow', () => {
-  const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('reveals contact fields and submits the composed form values through the shared form actions', async () => {
-    const user = userEvent.setup()
-    render(<DemoForm />)
-
-    expect(screen.queryByRole('heading', { name: /contacts/i })).not.toBeInTheDocument()
-
-    await user.type(screen.getByRole('textbox', { name: /^name$/i }), 'Alice')
-    await user.type(screen.getByRole('textbox', { name: /^surname$/i }), 'Smith')
-    await user.click(screen.getByText(/i accept the terms and conditions/i))
-
-    expect(await screen.findByRole('heading', { name: /contacts/i })).toBeInTheDocument()
-
-    await user.type(screen.getByRole('textbox', { name: /^email$/i }), 'alice@example.com')
-
-    const preferredMethodLabel = screen.getByText('Preferred Contact Method')
-    const preferredMethodField = preferredMethodLabel.parentElement?.parentElement
-    expect(preferredMethodField).toBeTruthy()
-
-    await user.click(within(preferredMethodField as HTMLElement).getByText('Email'))
-    await user.click(screen.getByText('Whatsapp'))
-
-    const submitButton = screen.getByRole('button', { name: /operation\.submit/i })
-    expect(submitButton).toBeEnabled()
-    await user.click(submitButton)
-
-    await waitFor(() => {
-      expect(consoleLogSpy).toHaveBeenCalledWith('Form submitted:', expect.objectContaining({
-        name: 'Alice',
-        surname: 'Smith',
-        isAcceptingTerms: true,
-        contact: expect.objectContaining({
-          email: 'alice@example.com',
-          preferredContactMethod: 'whatsapp',
-        }),
-      }))
-    })
-  })
-
-  it('removes the nested contact section again when the name field is cleared', async () => {
-    const user = userEvent.setup()
-    render(<DemoForm />)
-
-    const nameInput = screen.getByRole('textbox', { name: /^name$/i })
-    await user.type(nameInput, 'Alice')
-    expect(await screen.findByRole('heading', { name: /contacts/i })).toBeInTheDocument()
-
-    await user.clear(nameInput)
-
-    await waitFor(() => {
-      expect(screen.queryByRole('heading', { name: /contacts/i })).not.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/__tests__/billing/billing-integration.test.tsx b/web/__tests__/billing/billing-integration.test.tsx
index 2fde9b506f4..e82a6d8eac2 100644
--- a/web/__tests__/billing/billing-integration.test.tsx
+++ b/web/__tests__/billing/billing-integration.test.tsx
@@ -7,7 +7,6 @@ import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import Billing from '@/app/components/billing/billing-page'
 import { defaultPlan, NUM_INFINITE } from '@/app/components/billing/config'
-import HeaderBillingBtn from '@/app/components/billing/header-billing-btn'
 import PlanComp from '@/app/components/billing/plan'
 import { PlanUpgradeModal } from '@/app/components/billing/plan-upgrade-modal'
 import PriorityLabel from '@/app/components/billing/priority-label'
@@ -696,83 +695,7 @@ describe('Capacity Full Components Integration', () => {
 })
 
 // ═══════════════════════════════════════════════════════════════════════════
-// 5. Header Billing Button Integration
-// Tests HeaderBillingBtn behavior for different plan states
-// ═══════════════════════════════════════════════════════════════════════════
-describe('Header Billing Button Integration', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    setupAppContext()
-  })
-
-  it('should render UpgradeBtn (premium badge) for sandbox plan', () => {
-    setupProviderContext({ type: Plan.sandbox })
-
-    render(<HeaderBillingBtn />)
-
-    expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
-  })
-
-  it('should render "pro" badge for professional plan', () => {
-    setupProviderContext({ type: Plan.professional })
-
-    render(<HeaderBillingBtn />)
-
-    expect(screen.getByText('pro')).toBeInTheDocument()
-    expect(screen.queryByText(/upgradeBtn/i)).not.toBeInTheDocument()
-  })
-
-  it('should render "team" badge for team plan', () => {
-    setupProviderContext({ type: Plan.team })
-
-    render(<HeaderBillingBtn />)
-
-    expect(screen.getByText('team')).toBeInTheDocument()
-  })
-
-  it('should return null when billing is disabled', () => {
-    setupProviderContext({ type: Plan.sandbox }, { enableBilling: false })
-
-    const { container } = render(<HeaderBillingBtn />)
-
-    expect(container.innerHTML).toBe('')
-  })
-
-  it('should return null when plan is not fetched yet', () => {
-    setupProviderContext({ type: Plan.sandbox }, { isFetchedPlan: false })
-
-    const { container } = render(<HeaderBillingBtn />)
-
-    expect(container.innerHTML).toBe('')
-  })
-
-  it('should call onClick when clicking pro/team badge in non-display-only mode', async () => {
-    const user = userEvent.setup()
-    const onClick = vi.fn()
-    setupProviderContext({ type: Plan.professional })
-
-    render(<HeaderBillingBtn onClick={onClick} />)
-
-    await user.click(screen.getByText('pro'))
-
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('should not call onClick when isDisplayOnly is true', async () => {
-    const user = userEvent.setup()
-    const onClick = vi.fn()
-    setupProviderContext({ type: Plan.professional })
-
-    render(<HeaderBillingBtn onClick={onClick} isDisplayOnly />)
-
-    await user.click(screen.getByText('pro'))
-
-    expect(onClick).not.toHaveBeenCalled()
-  })
-})
-
-// ═══════════════════════════════════════════════════════════════════════════
-// 6. PriorityLabel Integration
+// 5. PriorityLabel Integration
 // Tests priority badge display for different plan types
 // ═══════════════════════════════════════════════════════════════════════════
 describe('PriorityLabel Integration', () => {
diff --git a/web/__tests__/header/nav-flow.test.tsx b/web/__tests__/header/nav-flow.test.tsx
deleted file mode 100644
index 33927f19da4..00000000000
--- a/web/__tests__/header/nav-flow.test.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { fireEvent, render, screen, waitFor } 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 Nav from '@/app/components/header/nav'
-import { AppModeEnum } from '@/types/app'
-
-const mockPush = vi.fn()
-const mockSetAppDetail = vi.fn()
-const mockOnCreate = vi.fn()
-const mockOnLoadMore = vi.fn()
-
-let mockSelectedSegment = 'app'
-let mockIsCurrentWorkspaceEditor = true
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
-vi.mock('@/next/navigation', () => ({
-  useSelectedLayoutSegment: () => mockSelectedSegment,
-  useRouter: () => ({
-    push: mockPush,
-  }),
-}))
-
-vi.mock('@/next/link', () => ({
-  default: ({
-    href,
-    children,
-  }: {
-    href: string
-    children?: React.ReactNode
-  }) => <a href={href}>{children}</a>,
-}))
-
-vi.mock('@/app/components/app/store', () => ({
-  useStore: () => mockSetAppDetail,
-}))
-
-vi.mock('@/context/app-context', () => ({
-  useAppContext: () => ({
-    isCurrentWorkspaceEditor: mockIsCurrentWorkspaceEditor,
-    workspacePermissionKeys: mockIsCurrentWorkspaceEditor ? ['app.create_and_management'] : [],
-  }),
-}))
-
-const navigationItems = [
-  {
-    id: 'app-1',
-    name: 'Alpha',
-    link: '/app/app-1/configuration',
-    icon_type: 'emoji' as const,
-    icon: '🤖',
-    icon_background: '#FFEAD5',
-    icon_url: null,
-    mode: AppModeEnum.CHAT,
-  },
-  {
-    id: 'app-2',
-    name: 'Bravo',
-    link: '/app/app-2/workflow',
-    icon_type: 'emoji' as const,
-    icon: '⚙️',
-    icon_background: '#E0F2FE',
-    icon_url: null,
-    mode: AppModeEnum.WORKFLOW,
-  },
-]
-
-const curNav = {
-  id: 'app-1',
-  name: 'Alpha',
-  icon_type: 'emoji' as const,
-  icon: '🤖',
-  icon_background: '#FFEAD5',
-  icon_url: null,
-  mode: AppModeEnum.CHAT,
-}
-
-const renderNav = (nav = curNav) => {
-  return render(
-    <Nav
-      isApp
-      icon={<span data-testid="nav-icon">icon</span>}
-      activeIcon={<span data-testid="nav-icon-active">active-icon</span>}
-      text="menus.apps"
-      activeSegment={['apps', 'app']}
-      link="/apps"
-      curNav={nav}
-      navigationItems={navigationItems}
-      createText="menus.newApp"
-      onCreate={mockOnCreate}
-      onLoadMore={mockOnLoadMore}
-      isLoadingMore={false}
-    />,
-  )
-}
-
-describe('Header Nav Flow', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockSelectedSegment = 'app'
-    mockIsCurrentWorkspaceEditor = true
-  })
-
-  it('switches to another app from the selector and clears stale app detail first', async () => {
-    renderNav()
-
-    fireEvent.click(screen.getByRole('button', { name: /Alpha/i }))
-    fireEvent.click(await screen.findByText('Bravo'))
-
-    expect(mockSetAppDetail).toHaveBeenCalled()
-    expect(mockPush).toHaveBeenCalledWith('/app/app-2/workflow')
-  })
-
-  it('opens the nested create menu and emits all app creation branches', async () => {
-    const user = userEvent.setup()
-    const clickCreateBranch = async (optionName: string) => {
-      const { unmount } = renderNav()
-      await user.click(screen.getByRole('button', { name: /Alpha/i }))
-      await user.hover(await screen.findByRole('menuitem', { name: /menus\.newApp/i }))
-      fireEvent.click(await screen.findByRole('menuitem', { name: optionName }))
-      unmount()
-    }
-
-    await clickCreateBranch('newApp.startFromBlank')
-    await clickCreateBranch('newApp.startFromTemplate')
-    await clickCreateBranch('importDSL')
-
-    expect(mockOnCreate).toHaveBeenNthCalledWith(1, 'blank')
-    expect(mockOnCreate).toHaveBeenNthCalledWith(2, 'template')
-    expect(mockOnCreate).toHaveBeenNthCalledWith(3, 'dsl')
-    expect(mockOnCreate).toHaveBeenCalledTimes(3)
-  })
-
-  it('keeps the current nav label in sync with prop updates', async () => {
-    const { rerender } = renderNav()
-
-    expect(screen.getByRole('button', { name: /Alpha/i })).toBeInTheDocument()
-
-    rerender(
-      <Nav
-        isApp
-        icon={<span data-testid="nav-icon">icon</span>}
-        activeIcon={<span data-testid="nav-icon-active">active-icon</span>}
-        text="menus.apps"
-        activeSegment={['apps', 'app']}
-        link="/apps"
-        curNav={{
-          ...curNav,
-          name: 'Alpha Renamed',
-        }}
-        navigationItems={navigationItems}
-        createText="menus.newApp"
-        onCreate={mockOnCreate}
-        onLoadMore={mockOnLoadMore}
-        isLoadingMore={false}
-      />,
-    )
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Alpha Renamed/i })).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/__tests__/navigation-utils.test.ts b/web/__tests__/navigation-utils.test.ts
deleted file mode 100644
index 8f96ce86ad0..00000000000
--- a/web/__tests__/navigation-utils.test.ts
+++ /dev/null
@@ -1,401 +0,0 @@
-/**
- * Navigation Utilities Test
- *
- * Tests for the navigation utility functions to ensure they handle
- * query parameter preservation correctly across different scenarios.
- */
-
-import {
-  createBackNavigation,
-  createNavigationPath,
-  createNavigationPathWithParams,
-  datasetNavigation,
-  extractQueryParams,
-  mergeQueryParams,
-} from '@/utils/navigation'
-
-// Mock router for testing
-const mockPush = vi.fn()
-const mockRouter = { push: mockPush }
-
-describe('Navigation Utilities', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('createNavigationPath', () => {
-    it('preserves query parameters by default', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3&limit=10&keyword=test' },
-        writable: true,
-      })
-
-      const path = createNavigationPath('/datasets/123/documents')
-      expect(path).toBe('/datasets/123/documents?page=3&limit=10&keyword=test')
-    })
-
-    it('returns clean path when preserveParams is false', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3&limit=10' },
-        writable: true,
-      })
-
-      const path = createNavigationPath('/datasets/123/documents', false)
-      expect(path).toBe('/datasets/123/documents')
-    })
-
-    it('handles empty query parameters', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '' },
-        writable: true,
-      })
-
-      const path = createNavigationPath('/datasets/123/documents')
-      expect(path).toBe('/datasets/123/documents')
-    })
-
-    it('handles errors gracefully', () => {
-      // Mock window.location to throw an error
-      Object.defineProperty(window, 'location', {
-        get: () => {
-          throw new Error('Location access denied')
-        },
-        configurable: true,
-      })
-
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => { /* noop */ })
-      const path = createNavigationPath('/datasets/123/documents')
-
-      expect(path).toBe('/datasets/123/documents')
-      expect(consoleSpy).toHaveBeenCalledWith('Failed to preserve query parameters:', expect.any(Error))
-
-      consoleSpy.mockRestore()
-    })
-  })
-
-  describe('createBackNavigation', () => {
-    it('creates function that navigates with preserved params', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=2&limit=25' },
-        writable: true,
-      })
-
-      const backFn = createBackNavigation(mockRouter, '/datasets/123/documents')
-      backFn()
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/123/documents?page=2&limit=25')
-    })
-
-    it('creates function that navigates without params when specified', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=2&limit=25' },
-        writable: true,
-      })
-
-      const backFn = createBackNavigation(mockRouter, '/datasets/123/documents', false)
-      backFn()
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/123/documents')
-    })
-  })
-
-  describe('extractQueryParams', () => {
-    it('extracts specified parameters', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3&limit=10&keyword=test&other=value' },
-        writable: true,
-      })
-
-      const params = extractQueryParams(['page', 'limit', 'keyword'])
-      expect(params).toEqual({
-        page: '3',
-        limit: '10',
-        keyword: 'test',
-      })
-    })
-
-    it('handles missing parameters', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3' },
-        writable: true,
-      })
-
-      const params = extractQueryParams(['page', 'limit', 'missing'])
-      expect(params).toEqual({
-        page: '3',
-      })
-    })
-
-    it('handles errors gracefully', () => {
-      Object.defineProperty(window, 'location', {
-        get: () => {
-          throw new Error('Location access denied')
-        },
-        configurable: true,
-      })
-
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => { /* noop */ })
-      const params = extractQueryParams(['page', 'limit'])
-
-      expect(params).toEqual({})
-      expect(consoleSpy).toHaveBeenCalledWith('Failed to extract query parameters:', expect.any(Error))
-
-      consoleSpy.mockRestore()
-    })
-  })
-
-  describe('createNavigationPathWithParams', () => {
-    it('creates path with specified parameters', () => {
-      const path = createNavigationPathWithParams('/datasets/123/documents', {
-        page: 1,
-        limit: 25,
-        keyword: 'search term',
-      })
-
-      expect(path).toBe('/datasets/123/documents?page=1&limit=25&keyword=search+term')
-    })
-
-    it('filters out empty values', () => {
-      const path = createNavigationPathWithParams('/datasets/123/documents', {
-        page: 1,
-        limit: '',
-        keyword: 'test',
-        filter: '',
-      })
-
-      expect(path).toBe('/datasets/123/documents?page=1&keyword=test')
-    })
-
-    it('handles errors gracefully', () => {
-      // Mock URLSearchParams to throw an error
-      const originalURLSearchParams = globalThis.URLSearchParams
-      globalThis.URLSearchParams = vi.fn(() => {
-        throw new Error('URLSearchParams error')
-      }) as any
-
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => { /* noop */ })
-      const path = createNavigationPathWithParams('/datasets/123/documents', { page: 1 })
-
-      expect(path).toBe('/datasets/123/documents')
-      expect(consoleSpy).toHaveBeenCalledWith('Failed to create navigation path with params:', expect.any(Error))
-
-      consoleSpy.mockRestore()
-      globalThis.URLSearchParams = originalURLSearchParams
-    })
-  })
-
-  describe('mergeQueryParams', () => {
-    it('merges new params with existing ones', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3&limit=10' },
-        writable: true,
-      })
-
-      const merged = mergeQueryParams({ keyword: 'test', page: '1' })
-      const result = merged.toString()
-
-      expect(result).toContain('page=1') // overridden
-      expect(result).toContain('limit=10') // preserved
-      expect(result).toContain('keyword=test') // added
-    })
-
-    it('removes parameters when value is null', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3&limit=10&keyword=test' },
-        writable: true,
-      })
-
-      const merged = mergeQueryParams({ keyword: null, filter: 'active' })
-      const result = merged.toString()
-
-      expect(result).toContain('page=3')
-      expect(result).toContain('limit=10')
-      expect(result).not.toContain('keyword')
-      expect(result).toContain('filter=active')
-    })
-
-    it('creates fresh params when preserveExisting is false', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3&limit=10' },
-        writable: true,
-      })
-
-      const merged = mergeQueryParams({ keyword: 'test' }, false)
-      const result = merged.toString()
-
-      expect(result).toBe('keyword=test')
-    })
-  })
-
-  describe('datasetNavigation', () => {
-    it('backToDocuments creates correct navigation function', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=2&limit=25' },
-        writable: true,
-      })
-
-      const backFn = datasetNavigation.backToDocuments(mockRouter, 'dataset-123')
-      backFn()
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-123/documents?page=2&limit=25')
-    })
-
-    it('toDocumentDetail creates correct navigation function', () => {
-      const detailFn = datasetNavigation.toDocumentDetail(mockRouter, 'dataset-123', 'doc-456')
-      detailFn()
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-123/documents/doc-456')
-    })
-
-    it('toDocumentSettings creates correct navigation function', () => {
-      const settingsFn = datasetNavigation.toDocumentSettings(mockRouter, 'dataset-123', 'doc-456')
-      settingsFn()
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-123/documents/doc-456/settings')
-    })
-  })
-
-  describe('Real-world Integration Scenarios', () => {
-    it('complete user workflow: list -> detail -> back', () => {
-      // User starts on page 3 with search
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=3&keyword=API&limit=25' },
-        writable: true,
-      })
-
-      // Create back navigation function (as would be done in detail component)
-      const backToDocuments = datasetNavigation.backToDocuments(mockRouter, 'main-dataset')
-
-      // User clicks back
-      backToDocuments()
-
-      // Should return to exact same list state
-      expect(mockPush).toHaveBeenCalledWith('/datasets/main-dataset/documents?page=3&keyword=API&limit=25')
-    })
-
-    it('user applies filters then views document', () => {
-      // Complex filter state
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=1&limit=50&status=active&type=pdf&sort=created_at&order=desc' },
-        writable: true,
-      })
-
-      const backFn = createBackNavigation(mockRouter, '/datasets/filtered-set/documents')
-      backFn()
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/filtered-set/documents?page=1&limit=50&status=active&type=pdf&sort=created_at&order=desc')
-    })
-  })
-
-  describe('Edge Cases and Error Handling', () => {
-    it('handles special characters in query parameters', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?keyword=hello%20world&filter=type%3Apdf&tag=%E4%B8%AD%E6%96%87' },
-        writable: true,
-      })
-
-      const path = createNavigationPath('/datasets/123/documents')
-      expect(path).toContain('hello+world')
-      expect(path).toContain('type%3Apdf')
-      expect(path).toContain('%E4%B8%AD%E6%96%87')
-    })
-
-    it('handles duplicate query parameters', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?tag=tag1&tag=tag2&tag=tag3' },
-        writable: true,
-      })
-
-      const params = extractQueryParams(['tag'])
-      // URLSearchParams.get() returns the first value
-      expect(params.tag).toBe('tag1')
-    })
-
-    it('handles very long query strings', () => {
-      const longValue = 'a'.repeat(1000)
-      Object.defineProperty(window, 'location', {
-        value: { search: `?data=${longValue}` },
-        writable: true,
-      })
-
-      const path = createNavigationPath('/datasets/123/documents')
-      expect(path).toContain(longValue)
-      expect(path.length).toBeGreaterThan(1000)
-    })
-
-    it('handles empty string values in query parameters', () => {
-      const path = createNavigationPathWithParams('/datasets/123/documents', {
-        page: 1,
-        keyword: '',
-        filter: '',
-        sort: 'name',
-      })
-
-      expect(path).toBe('/datasets/123/documents?page=1&sort=name')
-      expect(path).not.toContain('keyword=')
-      expect(path).not.toContain('filter=')
-    })
-
-    it('handles null and undefined values in mergeQueryParams', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=1&limit=10&keyword=test' },
-        writable: true,
-      })
-
-      const merged = mergeQueryParams({
-        keyword: null,
-        filter: undefined,
-        sort: 'name',
-      })
-      const result = merged.toString()
-
-      expect(result).toContain('page=1')
-      expect(result).toContain('limit=10')
-      expect(result).not.toContain('keyword')
-      expect(result).toContain('sort=name')
-    })
-
-    it('handles navigation with hash fragments', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=1', hash: '#section-2' },
-        writable: true,
-      })
-
-      const path = createNavigationPath('/datasets/123/documents')
-      // Should preserve query params but not hash
-      expect(path).toBe('/datasets/123/documents?page=1')
-    })
-
-    it('handles malformed query strings gracefully', () => {
-      Object.defineProperty(window, 'location', {
-        value: { search: '?page=1&invalid&limit=10&=value&key=' },
-        writable: true,
-      })
-
-      const params = extractQueryParams(['page', 'limit', 'invalid', 'key'])
-      expect(params.page).toBe('1')
-      expect(params.limit).toBe('10')
-      // Malformed params should be handled by URLSearchParams
-      expect(params.invalid).toBe('') // for `&invalid`
-      expect(params.key).toBe('') // for `&key=`
-    })
-  })
-
-  describe('Performance Tests', () => {
-    it('handles large number of query parameters efficiently', () => {
-      const manyParams = Array.from({ length: 50 }, (_, i) => `param${i}=value${i}`).join('&')
-      Object.defineProperty(window, 'location', {
-        value: { search: `?${manyParams}` },
-        writable: true,
-      })
-
-      const startTime = Date.now()
-      const path = createNavigationPath('/datasets/123/documents')
-      const endTime = Date.now()
-
-      expect(endTime - startTime).toBeLessThan(50) // Should be fast
-      expect(path).toContain('param0=value0')
-      expect(path).toContain('param49=value49')
-    })
-  })
-})
diff --git a/web/__tests__/plugins/plugin-data-utilities.test.ts b/web/__tests__/plugins/plugin-data-utilities.test.ts
deleted file mode 100644
index cfec48ca4d8..00000000000
--- a/web/__tests__/plugins/plugin-data-utilities.test.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Integration Test: Plugin Data Utilities
- *
- * Tests the integration between plugin utility functions, including
- * tag/category validation, form schema transformation, and
- * credential data processing. Verifies that these utilities work
- * correctly together in processing plugin metadata.
- */
-import { describe, expect, it } from 'vitest'
-
-import { transformFormSchemasSecretInput } from '@/app/components/plugins/plugin-auth/utils'
-import { getValidCategoryKeys, getValidTagKeys } from '@/app/components/plugins/utils'
-
-type TagInput = Parameters<typeof getValidTagKeys>[0]
-
-describe('Plugin Data Utilities Integration', () => {
-  describe('Tag and Category Validation Pipeline', () => {
-    it('validates tags and categories in a metadata processing flow', () => {
-      const pluginMetadata = {
-        tags: ['search', 'productivity', 'invalid-tag', 'media-generate'],
-        category: 'tool',
-      }
-
-      const validTags = getValidTagKeys(pluginMetadata.tags as TagInput)
-      expect(validTags.length).toBeGreaterThan(0)
-      expect(validTags.length).toBeLessThanOrEqual(pluginMetadata.tags.length)
-
-      const validCategory = getValidCategoryKeys(pluginMetadata.category)
-      expect(validCategory).toBeDefined()
-    })
-
-    it('handles completely invalid metadata gracefully', () => {
-      const invalidMetadata = {
-        tags: ['nonexistent-1', 'nonexistent-2'],
-        category: 'nonexistent-category',
-      }
-
-      const validTags = getValidTagKeys(invalidMetadata.tags as TagInput)
-      expect(validTags).toHaveLength(0)
-
-      const validCategory = getValidCategoryKeys(invalidMetadata.category)
-      expect(validCategory).toBeUndefined()
-    })
-
-    it('handles undefined and empty inputs', () => {
-      expect(getValidTagKeys([] as TagInput)).toHaveLength(0)
-      expect(getValidCategoryKeys(undefined)).toBeUndefined()
-      expect(getValidCategoryKeys('')).toBeUndefined()
-    })
-  })
-
-  describe('Credential Secret Masking Pipeline', () => {
-    it('masks secrets when displaying credential form data', () => {
-      const credentialValues = {
-        api_key: 'sk-abc123456789',
-        api_endpoint: 'https://api.example.com',
-        secret_token: 'secret-token-value',
-        description: 'My credential set',
-      }
-
-      const secretFields = ['api_key', 'secret_token']
-
-      const displayValues = transformFormSchemasSecretInput(secretFields, credentialValues)
-
-      expect(displayValues.api_key).toBe('[__HIDDEN__]')
-      expect(displayValues.secret_token).toBe('[__HIDDEN__]')
-      expect(displayValues.api_endpoint).toBe('https://api.example.com')
-      expect(displayValues.description).toBe('My credential set')
-    })
-
-    it('preserves original values when no secret fields', () => {
-      const values = {
-        name: 'test',
-        endpoint: 'https://api.example.com',
-      }
-
-      const result = transformFormSchemasSecretInput([], values)
-      expect(result).toEqual(values)
-    })
-
-    it('handles falsy secret values without masking', () => {
-      const values = {
-        api_key: '',
-        secret: null as unknown as string,
-        other: 'visible',
-      }
-
-      const result = transformFormSchemasSecretInput(['api_key', 'secret'], values)
-      expect(result.api_key).toBe('')
-      expect(result.secret).toBeNull()
-      expect(result.other).toBe('visible')
-    })
-
-    it('does not mutate the original values object', () => {
-      const original = {
-        api_key: 'my-secret-key',
-        name: 'test',
-      }
-      const originalCopy = { ...original }
-
-      transformFormSchemasSecretInput(['api_key'], original)
-
-      expect(original).toEqual(originalCopy)
-    })
-  })
-
-  describe('Combined Plugin Metadata Validation', () => {
-    it('processes a complete plugin entry with tags and credentials', () => {
-      const pluginEntry = {
-        name: 'test-plugin',
-        category: 'tool',
-        tags: ['search', 'invalid-tag'],
-        credentials: {
-          api_key: 'sk-test-key-123',
-          base_url: 'https://api.test.com',
-        },
-        secretFields: ['api_key'],
-      }
-
-      const validCategory = getValidCategoryKeys(pluginEntry.category)
-      expect(validCategory).toBe('tool')
-
-      const validTags = getValidTagKeys(pluginEntry.tags as TagInput)
-      expect(validTags).toContain('search')
-
-      const displayCredentials = transformFormSchemasSecretInput(
-        pluginEntry.secretFields,
-        pluginEntry.credentials,
-      )
-      expect(displayCredentials.api_key).toBe('[__HIDDEN__]')
-      expect(displayCredentials.base_url).toBe('https://api.test.com')
-
-      expect(pluginEntry.credentials.api_key).toBe('sk-test-key-123')
-    })
-
-    it('handles multiple plugins in batch processing', () => {
-      const plugins = [
-        { tags: ['search', 'productivity'], category: 'tool' },
-        { tags: ['image', 'design'], category: 'model' },
-        { tags: ['invalid'], category: 'extension' },
-      ]
-
-      const results = plugins.map(p => ({
-        validTags: getValidTagKeys(p.tags as TagInput),
-        validCategory: getValidCategoryKeys(p.category),
-      }))
-
-      expect(results[0]!.validTags.length).toBeGreaterThan(0)
-      expect(results[0]!.validCategory).toBe('tool')
-
-      expect(results[1]!.validTags).toContain('image')
-      expect(results[1]!.validTags).toContain('design')
-      expect(results[1]!.validCategory).toBe('model')
-
-      expect(results[2]!.validTags).toHaveLength(0)
-      expect(results[2]!.validCategory).toBe('extension')
-    })
-  })
-})
diff --git a/web/__tests__/plugins/plugin-page-filter-management.test.tsx b/web/__tests__/plugins/plugin-page-filter-management.test.tsx
deleted file mode 100644
index 9f6fbabc31d..00000000000
--- a/web/__tests__/plugins/plugin-page-filter-management.test.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { useStore } from '@/app/components/plugins/plugin-page/filter-management/store'
-
-describe('Plugin Page Filter Management Integration', () => {
-  beforeEach(() => {
-    const { result } = renderHook(() => useStore())
-    act(() => {
-      result.current.setTagList([])
-      result.current.setCategoryList([])
-      result.current.setShowTagManagementModal(false)
-      result.current.setShowCategoryManagementModal(false)
-    })
-  })
-
-  describe('tag and category filter lifecycle', () => {
-    it('should manage full tag lifecycle: add -> update -> clear', () => {
-      const { result } = renderHook(() => useStore())
-
-      const initialTags = [
-        { name: 'search', label: { en_US: 'Search' } },
-        { name: 'productivity', label: { en_US: 'Productivity' } },
-      ]
-
-      act(() => {
-        result.current.setTagList(initialTags as never[])
-      })
-      expect(result.current.tagList).toHaveLength(2)
-
-      const updatedTags = [
-        ...initialTags,
-        { name: 'image', label: { en_US: 'Image' } },
-      ]
-
-      act(() => {
-        result.current.setTagList(updatedTags as never[])
-      })
-      expect(result.current.tagList).toHaveLength(3)
-
-      act(() => {
-        result.current.setTagList([])
-      })
-      expect(result.current.tagList).toHaveLength(0)
-    })
-
-    it('should manage full category lifecycle: add -> update -> clear', () => {
-      const { result } = renderHook(() => useStore())
-
-      const categories = [
-        { name: 'tool', label: { en_US: 'Tool' } },
-        { name: 'model', label: { en_US: 'Model' } },
-      ]
-
-      act(() => {
-        result.current.setCategoryList(categories as never[])
-      })
-      expect(result.current.categoryList).toHaveLength(2)
-
-      act(() => {
-        result.current.setCategoryList([])
-      })
-      expect(result.current.categoryList).toHaveLength(0)
-    })
-  })
-
-  describe('modal state management', () => {
-    it('should manage tag management modal independently', () => {
-      const { result } = renderHook(() => useStore())
-
-      act(() => {
-        result.current.setShowTagManagementModal(true)
-      })
-      expect(result.current.showTagManagementModal).toBe(true)
-      expect(result.current.showCategoryManagementModal).toBe(false)
-
-      act(() => {
-        result.current.setShowTagManagementModal(false)
-      })
-      expect(result.current.showTagManagementModal).toBe(false)
-    })
-
-    it('should manage category management modal independently', () => {
-      const { result } = renderHook(() => useStore())
-
-      act(() => {
-        result.current.setShowCategoryManagementModal(true)
-      })
-      expect(result.current.showCategoryManagementModal).toBe(true)
-      expect(result.current.showTagManagementModal).toBe(false)
-    })
-
-    it('should support both modals open simultaneously', () => {
-      const { result } = renderHook(() => useStore())
-
-      act(() => {
-        result.current.setShowTagManagementModal(true)
-        result.current.setShowCategoryManagementModal(true)
-      })
-
-      expect(result.current.showTagManagementModal).toBe(true)
-      expect(result.current.showCategoryManagementModal).toBe(true)
-    })
-  })
-
-  describe('state persistence across renders', () => {
-    it('should maintain filter state when re-rendered', () => {
-      const { result, rerender } = renderHook(() => useStore())
-
-      act(() => {
-        result.current.setTagList([{ name: 'search' }] as never[])
-        result.current.setCategoryList([{ name: 'tool' }] as never[])
-      })
-
-      rerender()
-
-      expect(result.current.tagList).toHaveLength(1)
-      expect(result.current.categoryList).toHaveLength(1)
-    })
-  })
-})
diff --git a/web/__tests__/xss-prevention.test.tsx b/web/__tests__/xss-prevention.test.tsx
index 10a8b21a301..233cbebf0ee 100644
--- a/web/__tests__/xss-prevention.test.tsx
+++ b/web/__tests__/xss-prevention.test.tsx
@@ -1,14 +1,13 @@
 /**
  * XSS Prevention Test Suite
  *
- * This test verifies that the XSS vulnerabilities in block-input and support-var-input
- * components have been properly fixed by replacing dangerouslySetInnerHTML with safe React rendering.
+ * This test verifies that the XSS vulnerability in block-input has been properly
+ * fixed by replacing dangerouslySetInnerHTML with safe React rendering.
  */
 
 import { cleanup, render } from '@testing-library/react'
 import * as React from 'react'
 import BlockInput from '../app/components/base/block-input'
-import SupportVarInput from '../app/components/workflow/nodes/_base/components/support-var-input'
 
 // Mock styles
 vi.mock('../app/components/app/configuration/base/var-highlight/style.module.css', () => ({
@@ -17,7 +16,7 @@ vi.mock('../app/components/app/configuration/base/var-highlight/style.module.css
   },
 }))
 
-describe('XSS Prevention - Block Input and Support Var Input Security', () => {
+describe('XSS Prevention - Block Input Security', () => {
   afterEach(() => {
     cleanup()
   })
@@ -44,22 +43,6 @@ describe('XSS Prevention - Block Input and Support Var Input Security', () => {
     })
   })
 
-  describe('SupportVarInput Component Security', () => {
-    it('should safely render malicious variable names without executing scripts', () => {
-      const testInput = 'test@evil.com{{<img src=x onerror=alert(1)>}}'
-      const { container } = render(<SupportVarInput value={testInput} readonly={true} />)
-
-      const scriptElements = container.querySelectorAll('script')
-      const imgElements = container.querySelectorAll('img')
-
-      expect(scriptElements).toHaveLength(0)
-      expect(imgElements).toHaveLength(0)
-
-      const textContent = container.textContent
-      expect(textContent).toContain('<img')
-    })
-  })
-
   describe('React Automatic Escaping Verification', () => {
     it('should confirm React automatic escaping works correctly', () => {
       const TestComponent = () => <span>{'<script>alert("xss")</script>'}</span>
diff --git a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
deleted file mode 100644
index 98f4d7b672c..00000000000
--- a/web/app/components/app-sidebar/__tests__/app-sidebar-dropdown.spec.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import type { App, AppSSO } from '@/types/app'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import * as React from 'react'
-import { AppModeEnum } from '@/types/app'
-import AppSidebarDropdown from '../app-sidebar-dropdown'
-
-let mockAppDetail: (App & Partial<AppSSO>) | undefined
-
-vi.mock('@/app/components/app/store', () => ({
-  useStore: (selector: (state: Record<string, unknown>) => unknown) => selector({
-    appDetail: mockAppDetail,
-  }),
-}))
-
-vi.mock('@langgenius/dify-ui/dropdown-menu', () => {
-  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
-
-  const useDropdownMenuContext = () => {
-    const context = React.use(DropdownMenuContext)
-    if (!context)
-      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
-    return context
-  }
-
-  return {
-    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
-      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
-        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
-      </DropdownMenuContext>
-    ),
-    DropdownMenuTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
-      const { isOpen, setOpen } = useDropdownMenuContext()
-      return (
-        <button
-          type="button"
-          data-testid="dropdown-trigger"
-          onClick={(e) => {
-            onClick?.(e)
-            setOpen(!isOpen)
-          }}
-        >
-          {children}
-        </button>
-      )
-    },
-    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div data-testid="dropdown-content">{children}</div>,
-  }
-})
-
-vi.mock('../../base/app-icon', () => ({
-  default: ({ size, icon }: { size: string, icon: string }) => (
-    <div data-testid="app-icon" data-size={size} data-icon={icon} />
-  ),
-}))
-
-vi.mock('../../base/divider', () => ({
-  default: () => <hr data-testid="divider" />,
-}))
-
-vi.mock('../app-info', () => ({
-  default: ({ expand, onlyShowDetail, openState }: {
-    expand: boolean
-    onlyShowDetail?: boolean
-    openState?: boolean
-  }) => (
-    <div data-testid="app-info" data-expand={expand} data-only-detail={onlyShowDetail} data-open={openState} />
-  ),
-}))
-
-vi.mock('../nav-link', () => ({
-  default: ({ name, href, mode }: { name: string, href: string, mode?: string }) => (
-    <a data-testid={`nav-link-${name}`} href={href} data-mode={mode}>{name}</a>
-  ),
-}))
-
-const MockIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />
-
-const createAppDetail = (overrides: Partial<App> = {}): App & Partial<AppSSO> => ({
-  id: 'app-1',
-  name: 'Test App',
-  mode: AppModeEnum.CHAT,
-  icon: '🤖',
-  icon_type: 'emoji',
-  icon_background: '#FFEAD5',
-  icon_url: '',
-  description: '',
-  use_icon_as_answer_icon: false,
-  ...overrides,
-} as App & Partial<AppSSO>)
-
-const navigation = [
-  { name: 'Overview', href: '/overview', icon: MockIcon, selectedIcon: MockIcon },
-  { name: 'Logs', href: '/logs', icon: MockIcon, selectedIcon: MockIcon },
-]
-
-describe('AppSidebarDropdown', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockAppDetail = createAppDetail()
-  })
-
-  it('should return null when appDetail is not available', () => {
-    mockAppDetail = undefined
-    const { container } = render(<AppSidebarDropdown navigation={navigation} />)
-    expect(container.innerHTML).toBe('')
-  })
-
-  it('should render trigger with app icon', () => {
-    render(<AppSidebarDropdown navigation={navigation} />)
-    const icons = screen.getAllByTestId('app-icon')
-    const smallIcon = icons.find(i => i.getAttribute('data-size') === 'small')
-    expect(smallIcon).toBeInTheDocument()
-  })
-
-  it('should render navigation links', () => {
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByTestId('nav-link-Overview')).toBeInTheDocument()
-    expect(screen.getByTestId('nav-link-Logs')).toBeInTheDocument()
-  })
-
-  it('should display app name', () => {
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('Test App')).toBeInTheDocument()
-  })
-
-  it('should display app mode label', () => {
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('app.types.chatbot')).toBeInTheDocument()
-  })
-
-  it('should display mode labels for different modes', () => {
-    mockAppDetail = createAppDetail({ mode: AppModeEnum.ADVANCED_CHAT })
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
-  })
-
-  it('should render AppInfo component for detail expand', () => {
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByTestId('app-info')).toBeInTheDocument()
-    expect(screen.getByTestId('app-info')).toHaveAttribute('data-only-detail', 'true')
-  })
-
-  it('should toggle portal open state when trigger is clicked', async () => {
-    const user = userEvent.setup()
-    render(<AppSidebarDropdown navigation={navigation} />)
-
-    const trigger = screen.getByTestId('dropdown-trigger')
-    await user.click(trigger)
-
-    const dropdown = screen.getByTestId('dropdown-menu')
-    expect(dropdown).toHaveAttribute('data-open', 'true')
-  })
-
-  it('should render divider between app info and navigation', () => {
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByTestId('divider')).toBeInTheDocument()
-  })
-
-  it('should render large app icon in dropdown content', () => {
-    render(<AppSidebarDropdown navigation={navigation} />)
-    const icons = screen.getAllByTestId('app-icon')
-    const largeIcon = icons.find(icon => icon.getAttribute('data-size') === 'large')
-    expect(largeIcon).toBeInTheDocument()
-  })
-
-  it('should set detailExpand when clicking app info area', async () => {
-    const user = userEvent.setup()
-    render(<AppSidebarDropdown navigation={navigation} />)
-
-    const appName = screen.getByText('Test App')
-    await user.click(appName)
-
-    expect(screen.getByTestId('app-info')).toHaveAttribute('data-open', 'true')
-  })
-
-  it('should display workflow mode label', () => {
-    mockAppDetail = createAppDetail({ mode: AppModeEnum.WORKFLOW })
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('app.types.workflow')).toBeInTheDocument()
-  })
-
-  it('should display agent mode label', () => {
-    mockAppDetail = createAppDetail({ mode: AppModeEnum.AGENT_CHAT })
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('app.types.agent')).toBeInTheDocument()
-  })
-
-  it('should display completion mode label', () => {
-    mockAppDetail = createAppDetail({ mode: AppModeEnum.COMPLETION })
-    render(<AppSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('app.types.completion')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx b/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
deleted file mode 100644
index 5c45df470a7..00000000000
--- a/web/app/components/app-sidebar/__tests__/dataset-sidebar-dropdown.spec.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import type { DataSet } from '@/models/datasets'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import * as React from 'react'
-import DatasetSidebarDropdown from '../dataset-sidebar-dropdown'
-
-let mockDataset: DataSet
-
-vi.mock('@/context/dataset-detail', () => ({
-  useDatasetDetailContextWithSelector: (selector: (state: { dataset: DataSet }) => unknown) =>
-    selector({ dataset: mockDataset }),
-}))
-
-vi.mock('@/service/knowledge/use-dataset', () => ({
-  useDatasetRelatedApps: () => ({ data: [] }),
-}))
-
-vi.mock('@/hooks/use-knowledge', () => ({
-  useKnowledge: () => ({
-    formatIndexingTechniqueAndMethod: () => 'method-text',
-  }),
-}))
-
-vi.mock('@langgenius/dify-ui/dropdown-menu', () => {
-  const DropdownMenuContext = React.createContext<{ isOpen: boolean, setOpen: (open: boolean) => void } | null>(null)
-
-  const useDropdownMenuContext = () => {
-    const context = React.use(DropdownMenuContext)
-    if (!context)
-      throw new Error('DropdownMenu components must be wrapped in DropdownMenu')
-    return context
-  }
-
-  return {
-    DropdownMenu: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange?: (open: boolean) => void }) => (
-      <DropdownMenuContext value={{ isOpen: open, setOpen: onOpenChange ?? vi.fn() }}>
-        <div data-testid="dropdown-menu" data-open={open}>{children}</div>
-      </DropdownMenuContext>
-    ),
-    DropdownMenuTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: React.MouseEventHandler<HTMLButtonElement> }) => {
-      const { isOpen, setOpen } = useDropdownMenuContext()
-      return (
-        <button
-          type="button"
-          data-testid="dropdown-trigger"
-          onClick={(e) => {
-            onClick?.(e)
-            setOpen(!isOpen)
-          }}
-        >
-          {children}
-        </button>
-      )
-    },
-    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div data-testid="dropdown-content">{children}</div>,
-  }
-})
-
-vi.mock('../../base/app-icon', () => ({
-  default: ({ size, icon }: { size: string, icon: string }) => (
-    <div data-testid="app-icon" data-size={size} data-icon={icon} />
-  ),
-}))
-
-vi.mock('../../base/divider', () => ({
-  default: () => <hr data-testid="divider" />,
-}))
-
-vi.mock('../../base/effect', () => ({
-  default: ({ className }: { className?: string }) => <div data-testid="effect" className={className} />,
-}))
-
-vi.mock('../../datasets/extra-info', () => ({
-  default: ({ expand, documentCount }: {
-    relatedApps?: unknown[]
-    expand: boolean
-    documentCount: number
-  }) => (
-    <div data-testid="extra-info" data-expand={expand} data-doc-count={documentCount} />
-  ),
-}))
-
-vi.mock('../dataset-info/dropdown', () => ({
-  default: ({ expand }: { expand: boolean }) => (
-    <div data-testid="dataset-dropdown" data-expand={expand} />
-  ),
-}))
-
-vi.mock('../nav-link', () => ({
-  default: ({ name, href, mode, disabled }: { name: string, href: string, mode?: string, disabled?: boolean }) => (
-    <a data-testid={`nav-link-${name}`} href={href} data-mode={mode} data-disabled={disabled}>{name}</a>
-  ),
-}))
-
-const MockIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />
-
-const createDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
-  id: 'dataset-1',
-  name: 'Test Dataset',
-  description: 'A test dataset',
-  provider: 'internal',
-  icon_info: {
-    icon: '📙',
-    icon_type: 'emoji',
-    icon_background: '#FFF4ED',
-    icon_url: '',
-  },
-  doc_form: 'text_model' as DataSet['doc_form'],
-  indexing_technique: 'high_quality' as DataSet['indexing_technique'],
-  document_count: 10,
-  runtime_mode: 'general',
-  retrieval_model_dict: {
-    search_method: 'semantic_search' as DataSet['retrieval_model_dict']['search_method'],
-    reranking_enable: false,
-    reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
-    top_k: 5,
-    score_threshold_enabled: false,
-    score_threshold: 0,
-  },
-  ...overrides,
-} as DataSet)
-
-const navigation = [
-  { name: 'Documents', href: '/documents', icon: MockIcon, selectedIcon: MockIcon },
-  { name: 'Settings', href: '/settings', icon: MockIcon, selectedIcon: MockIcon, disabled: true },
-]
-
-describe('DatasetSidebarDropdown', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockDataset = createDataset()
-  })
-
-  it('should render trigger with dataset icon', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    const icons = screen.getAllByTestId('app-icon')
-    const smallIcon = icons.find(i => i.getAttribute('data-size') === 'small')
-    expect(smallIcon).toBeInTheDocument()
-    expect(smallIcon).toHaveAttribute('data-icon', '📙')
-  })
-
-  it('should display dataset name in dropdown content', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('Test Dataset')).toBeInTheDocument()
-  })
-
-  it('should display dataset description', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('A test dataset')).toBeInTheDocument()
-  })
-
-  it('should not display description when empty', () => {
-    mockDataset = createDataset({ description: '' })
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.queryByText('A test dataset')).not.toBeInTheDocument()
-  })
-
-  it('should render navigation links', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.getByTestId('nav-link-Documents')).toBeInTheDocument()
-    expect(screen.getByTestId('nav-link-Settings')).toBeInTheDocument()
-  })
-
-  it('should render ExtraInfo', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    const extraInfo = screen.getByTestId('extra-info')
-    expect(extraInfo).toHaveAttribute('data-expand', 'true')
-    expect(extraInfo).toHaveAttribute('data-doc-count', '10')
-  })
-
-  it('should render Effect component', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.getByTestId('effect')).toBeInTheDocument()
-  })
-
-  it('should render Dropdown component with expand=true', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.getByTestId('dataset-dropdown')).toHaveAttribute('data-expand', 'true')
-  })
-
-  it('should show external tag for external provider', () => {
-    mockDataset = createDataset({ provider: 'external' })
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.getByText('dataset.externalTag')).toBeInTheDocument()
-  })
-
-  it('should use fallback icon info when icon_info is missing', () => {
-    mockDataset = createDataset({ icon_info: undefined as unknown as DataSet['icon_info'] })
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    const icons = screen.getAllByTestId('app-icon')
-    const fallbackIcon = icons.find(i => i.getAttribute('data-icon') === '📙')
-    expect(fallbackIcon).toBeInTheDocument()
-  })
-
-  it('should toggle dropdown open state on trigger click', async () => {
-    const user = userEvent.setup()
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-
-    const trigger = screen.getByTestId('dropdown-trigger')
-    await user.click(trigger)
-
-    expect(screen.getByTestId('dropdown-menu')).toHaveAttribute('data-open', 'true')
-  })
-
-  it('should render divider', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    expect(screen.getByTestId('divider')).toBeInTheDocument()
-  })
-
-  it('should render medium app icon in content area', () => {
-    render(<DatasetSidebarDropdown navigation={navigation} />)
-    const icons = screen.getAllByTestId('app-icon')
-    const mediumIcon = icons.find(i => i.getAttribute('data-size') === 'medium')
-    expect(mediumIcon).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/app-sidebar/__tests__/index.spec.tsx b/web/app/components/app-sidebar/__tests__/index.spec.tsx
deleted file mode 100644
index 859d4f5de3f..00000000000
--- a/web/app/components/app-sidebar/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { act, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import * as React from 'react'
-import AppDetailNav from '..'
-
-let mockDetailSidebarMode = 'expand'
-const mockSetDetailSidebarMode = vi.fn()
-
-vi.mock('@/app/components/main-nav/storage', () => ({
-  useDetailSidebarMode: () => [mockDetailSidebarMode, mockSetDetailSidebarMode],
-}))
-
-let mockIsHovering = true
-let mockKeyPressCallback: ((e: { preventDefault: () => void }) => void) | null = null
-
-vi.mock('ahooks', () => ({
-  useHover: () => mockIsHovering,
-}))
-
-vi.mock('@tanstack/react-hotkeys', () => ({
-  useHotkey: (_hotkey: string, cb: (e: { preventDefault: () => void }) => void) => {
-    mockKeyPressCallback = cb
-  },
-}))
-
-vi.mock('@/hooks/use-breakpoints', () => ({
-  default: () => 'desktop',
-  MediaType: { mobile: 'mobile', desktop: 'desktop' },
-}))
-
-vi.mock('../../base/divider', () => ({
-  default: ({ className }: { className?: string }) => <hr data-testid="divider" className={className} />,
-}))
-
-vi.mock('../app-info', () => ({
-  default: ({ expand }: { expand: boolean }) => (
-    <div data-testid="app-info" data-expand={expand} />
-  ),
-  AppInfoView: ({ expand }: { expand: boolean }) => (
-    <div data-testid="app-info" data-expand={expand} />
-  ),
-}))
-
-vi.mock('../dataset-info', () => ({
-  default: ({ expand }: { expand: boolean }) => (
-    <div data-testid="dataset-info" data-expand={expand} />
-  ),
-}))
-
-vi.mock('../nav-link', () => ({
-  default: ({ name, href, mode }: { name: string, href: string, mode?: string }) => (
-    <a data-testid={`nav-link-${name}`} href={href} data-mode={mode}>{name}</a>
-  ),
-}))
-
-vi.mock('../toggle-button', () => ({
-  default: ({ expand, handleToggle, className }: { expand: boolean, handleToggle: () => void, className?: string }) => (
-    <button type="button" data-testid="toggle-button" data-expand={expand} onClick={handleToggle} className={className}>
-      Toggle
-    </button>
-  ),
-}))
-
-const MockIcon = (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />
-
-const navigation = [
-  { name: 'Overview', href: '/overview', icon: MockIcon, selectedIcon: MockIcon },
-  { name: 'Logs', href: '/logs', icon: MockIcon, selectedIcon: MockIcon },
-]
-
-describe('AppDetailNav', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockDetailSidebarMode = 'expand'
-    mockIsHovering = true
-    mockKeyPressCallback = null
-  })
-
-  describe('Normal sidebar mode', () => {
-    it('should render AppInfo when iconType is app', () => {
-      render(<AppDetailNav navigation={navigation} />)
-      expect(screen.getByTestId('app-info')).toBeInTheDocument()
-      expect(screen.getByTestId('app-info')).toHaveAttribute('data-expand', 'true')
-    })
-
-    it('should render DatasetInfo when iconType is dataset', () => {
-      render(<AppDetailNav navigation={navigation} iconType="dataset" />)
-      expect(screen.getByTestId('dataset-info')).toBeInTheDocument()
-    })
-
-    it('should render navigation links', () => {
-      render(<AppDetailNav navigation={navigation} />)
-      expect(screen.getByTestId('nav-link-Overview')).toBeInTheDocument()
-      expect(screen.getByTestId('nav-link-Logs')).toBeInTheDocument()
-    })
-
-    it('should render divider', () => {
-      render(<AppDetailNav navigation={navigation} />)
-      expect(screen.getByTestId('divider')).toBeInTheDocument()
-    })
-
-    it('should apply expanded width class', () => {
-      const { container } = render(<AppDetailNav navigation={navigation} />)
-      const sidebar = container.firstElementChild as HTMLElement
-      expect(sidebar).toHaveClass('w-55')
-    })
-
-    it('should apply collapsed width class', () => {
-      mockDetailSidebarMode = 'collapse'
-      const { container } = render(<AppDetailNav navigation={navigation} />)
-      const sidebar = container.firstElementChild as HTMLElement
-      expect(sidebar).toHaveClass('w-14')
-    })
-
-    it('should render extraInfo when iconType is dataset and extraInfo provided', () => {
-      render(
-        <AppDetailNav
-          navigation={navigation}
-          iconType="dataset"
-          extraInfo={mode => <div data-testid="extra-info" data-mode={mode} />}
-        />,
-      )
-      expect(screen.getByTestId('extra-info')).toBeInTheDocument()
-    })
-
-    it('should not render extraInfo when iconType is app', () => {
-      render(
-        <AppDetailNav
-          navigation={navigation}
-          extraInfo={mode => <div data-testid="extra-info" data-mode={mode} />}
-        />,
-      )
-      expect(screen.queryByTestId('extra-info')).not.toBeInTheDocument()
-    })
-
-    it('should render custom header and navigation when provided', () => {
-      render(
-        <AppDetailNav
-          navigation={navigation}
-          renderHeader={mode => <div data-testid="custom-header" data-mode={mode} />}
-          renderNavigation={mode => <div data-testid="custom-navigation" data-mode={mode} />}
-        />,
-      )
-
-      expect(screen.getByTestId('custom-header')).toHaveAttribute('data-mode', 'expand')
-      expect(screen.getByTestId('custom-navigation')).toHaveAttribute('data-mode', 'expand')
-      expect(screen.queryByTestId('app-info')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('nav-link-Overview')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Navigation mode', () => {
-    it('should pass expand mode to nav links when expanded', () => {
-      render(<AppDetailNav navigation={navigation} />)
-      expect(screen.getByTestId('nav-link-Overview')).toHaveAttribute('data-mode', 'expand')
-    })
-
-    it('should pass collapse mode to nav links when collapsed', () => {
-      mockDetailSidebarMode = 'collapse'
-      render(<AppDetailNav navigation={navigation} />)
-      expect(screen.getByTestId('nav-link-Overview')).toHaveAttribute('data-mode', 'collapse')
-    })
-  })
-
-  describe('Toggle behavior', () => {
-    it('should collapse detail sidebar on toggle', async () => {
-      const user = userEvent.setup()
-      render(<AppDetailNav navigation={navigation} />)
-
-      await user.click(screen.getByTestId('toggle-button'))
-
-      expect(mockSetDetailSidebarMode).toHaveBeenCalledWith('collapse')
-    })
-
-    it('should toggle from collapse to expand', async () => {
-      const user = userEvent.setup()
-      mockDetailSidebarMode = 'collapse'
-      render(<AppDetailNav navigation={navigation} />)
-
-      await user.click(screen.getByTestId('toggle-button'))
-
-      expect(mockSetDetailSidebarMode).toHaveBeenCalledWith('expand')
-    })
-  })
-
-  describe('Disabled navigation items', () => {
-    it('should render disabled navigation items', () => {
-      const navWithDisabled = [
-        ...navigation,
-        { name: 'Disabled', href: '/disabled', icon: MockIcon, selectedIcon: MockIcon, disabled: true },
-      ]
-      render(<AppDetailNav navigation={navWithDisabled} />)
-      expect(screen.getByTestId('nav-link-Disabled')).toBeInTheDocument()
-    })
-  })
-
-  describe('Keyboard shortcut', () => {
-    it('should toggle sidebar on Mod+B', () => {
-      render(<AppDetailNav navigation={navigation} />)
-
-      const cb = mockKeyPressCallback
-      expect(cb).not.toBeNull()
-      act(() => {
-        cb!({ preventDefault: vi.fn() })
-      })
-      expect(mockSetDetailSidebarMode).toHaveBeenCalledWith('collapse')
-    })
-  })
-
-  describe('Hover-based toggle button visibility', () => {
-    it('should hide toggle button when not hovering', () => {
-      mockIsHovering = false
-      render(<AppDetailNav navigation={navigation} />)
-      expect(screen.queryByTestId('toggle-button')).not.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
deleted file mode 100644
index 3292c34cf5e..00000000000
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { AppInfoActions } from './app-info/use-app-info-actions'
-import type { NavIcon } from './nav-link'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@langgenius/dify-ui/dropdown-menu'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import AppIcon from '../base/app-icon'
-import Divider from '../base/divider'
-import AppInfo from './app-info'
-import { getAppModeLabel } from './app-info/app-mode-labels'
-import NavLink from './nav-link'
-
-type Props = Readonly<{
-  navigation: Array<{
-    name: string
-    href: string
-    icon: NavIcon
-    selectedIcon: NavIcon
-  }>
-  appInfoActions?: AppInfoActions
-}>
-
-const AppSidebarDropdown = ({ navigation, appInfoActions }: Props) => {
-  const { t } = useTranslation()
-  const appDetail = useAppStore(state => state.appDetail)
-  const [detailExpand, setDetailExpand] = useState(false)
-  const [open, setOpen] = useState(false)
-
-  if (!appDetail)
-    return null
-
-  return (
-    <>
-      <div className="fixed top-2 left-2 z-20">
-        <DropdownMenu open={open} onOpenChange={setOpen}>
-          <DropdownMenuTrigger
-            aria-label={t('operation.more', { ns: 'common' })}
-            className={cn(
-              'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
-              'data-popup-open:bg-background-default-hover',
-            )}
-          >
-            <AppIcon
-              size="small"
-              iconType={appDetail.icon_type}
-              icon={appDetail.icon}
-              background={appDetail.icon_background}
-              imageUrl={appDetail.icon_url}
-            />
-            <span className="i-ri-menu-line size-4 text-text-tertiary" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            placement="bottom-start"
-            sideOffset={4}
-            popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
-          >
-            <div className={cn('w-[305px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg')}>
-              <div className="p-2">
-                <div
-                  className="flex cursor-pointer flex-col gap-2 rounded-lg p-2 pb-2.5 hover:bg-state-base-hover"
-                  onClick={() => {
-                    if (appInfoActions)
-                      appInfoActions.setPanelOpen(true)
-                    else
-                      setDetailExpand(true)
-                    setOpen(false)
-                  }}
-                >
-                  <div className="flex items-center justify-between self-stretch">
-                    <AppIcon
-                      size="large"
-                      iconType={appDetail.icon_type}
-                      icon={appDetail.icon}
-                      background={appDetail.icon_background}
-                      imageUrl={appDetail.icon_url}
-                    />
-                    <div className="flex items-center justify-center rounded-md p-0.5">
-                      <div className="flex size-5 items-center justify-center">
-                        <span className="i-ri-equalizer-2-line size-4 text-text-tertiary" />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex flex-col items-start gap-1">
-                    <div className="flex w-full">
-                      <div className="truncate system-md-semibold text-text-secondary">{appDetail.name}</div>
-                    </div>
-                    <div className="system-2xs-medium-uppercase text-text-tertiary">{getAppModeLabel(appDetail.mode, t)}</div>
-                  </div>
-                </div>
-              </div>
-              <div className="px-4">
-                <Divider bgStyle="gradient" />
-              </div>
-              <nav className="space-y-0.5 px-3 pt-4 pb-6">
-                {navigation.map((item, index) => {
-                  return (
-                    <NavLink key={index} mode="expand" iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
-                  )
-                })}
-              </nav>
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      {!appInfoActions && (
-        <div className="z-20">
-          <AppInfo expand onlyShowDetail openState={detailExpand} onDetailExpand={setDetailExpand} />
-        </div>
-      )}
-    </>
-  )
-}
-
-export default AppSidebarDropdown
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
deleted file mode 100644
index 85f178dde63..00000000000
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import type { NavIcon } from './nav-link'
-import type { DataSet } from '@/models/datasets'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@langgenius/dify-ui/dropdown-menu'
-import {
-  RiMenuLine,
-} from '@remixicon/react'
-import * as React from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
-import { useKnowledge } from '@/hooks/use-knowledge'
-import { DOC_FORM_TEXT } from '@/models/datasets'
-import { useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
-import AppIcon from '../base/app-icon'
-import Divider from '../base/divider'
-import Effect from '../base/effect'
-import ExtraInfo from '../datasets/extra-info'
-import Dropdown from './dataset-info/dropdown'
-import NavLink from './nav-link'
-
-type DatasetSidebarDropdownProps = {
-  navigation: Array<{
-    name: string
-    href: string
-    icon: NavIcon
-    selectedIcon: NavIcon
-    disabled?: boolean
-  }>
-}
-
-const DatasetSidebarDropdown = ({
-  navigation,
-}: DatasetSidebarDropdownProps) => {
-  const { t } = useTranslation()
-  const dataset = useDatasetDetailContextWithSelector(state => state.dataset) as DataSet
-
-  const { data: relatedApps } = useDatasetRelatedApps(dataset.id)
-
-  const [open, setOpen] = useState(false)
-
-  const iconInfo = dataset.icon_info || {
-    icon: '📙',
-    icon_type: 'emoji',
-    icon_background: '#FFF4ED',
-    icon_url: '',
-  }
-  const isExternalProvider = dataset.provider === 'external'
-  const { formatIndexingTechniqueAndMethod } = useKnowledge()
-
-  if (!dataset)
-    return null
-
-  return (
-    <>
-      <div className="fixed top-2 left-2 z-20">
-        <DropdownMenu open={open} onOpenChange={setOpen}>
-          <DropdownMenuTrigger
-            aria-label={t('operation.more', { ns: 'common' })}
-            className={cn(
-              'flex cursor-pointer items-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-lg backdrop-blur-xs hover:bg-background-default-hover',
-              'data-popup-open:bg-background-default-hover',
-            )}
-          >
-            <AppIcon
-              size="small"
-              iconType={iconInfo.icon_type}
-              icon={iconInfo.icon}
-              background={iconInfo.icon_background}
-              imageUrl={iconInfo.icon_url}
-            />
-            <RiMenuLine className="size-4 text-text-tertiary" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            placement="bottom-start"
-            sideOffset={4}
-            popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
-          >
-            <div className="relative w-[216px] rounded-xl border-[0.5px] border-components-panel-border bg-background-default-subtle shadow-lg">
-              <Effect className="top-[-22px] -left-5 opacity-15" />
-              <div className="flex flex-col gap-y-2 p-4">
-                <div className="flex items-center justify-between">
-                  <AppIcon
-                    size="medium"
-                    iconType={iconInfo.icon_type}
-                    icon={iconInfo.icon}
-                    background={iconInfo.icon_background}
-                    imageUrl={iconInfo.icon_url}
-                  />
-                  <Dropdown expand />
-                </div>
-                <div className="flex flex-col gap-y-1 pb-0.5">
-                  <div
-                    className="truncate system-md-semibold text-text-secondary"
-                    title={dataset.name}
-                  >
-                    {dataset.name}
-                  </div>
-                  <div className="system-2xs-medium-uppercase text-text-tertiary">
-                    {isExternalProvider && t('externalTag', { ns: 'dataset' })}
-                    {!!(!isExternalProvider && dataset.doc_form && dataset.indexing_technique) && (
-                      <div className="flex items-center gap-x-2">
-                        <span>{t(`chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`, { ns: 'dataset' })}</span>
-                        <span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-                {!!dataset.description && (
-                  <p className="line-clamp-3 system-xs-regular text-text-tertiary first-letter:capitalize">
-                    {dataset.description}
-                  </p>
-                )}
-              </div>
-              <div className="px-4 py-2">
-                <Divider
-                  type="horizontal"
-                  bgStyle="gradient"
-                  className="my-0 h-px bg-linear-to-r from-divider-subtle to-background-gradient-mask-transparent"
-                />
-              </div>
-              <nav className="flex min-h-[200px] grow flex-col gap-y-0.5 px-3 py-2">
-                {navigation.map((item, index) => {
-                  return (
-                    <NavLink
-                      key={index}
-                      mode="expand"
-                      iconMap={{ selected: item.selectedIcon, normal: item.icon }}
-                      name={item.name}
-                      href={item.href}
-                      disabled={!!item.disabled}
-                    />
-                  )
-                })}
-              </nav>
-              <ExtraInfo
-                relatedApps={relatedApps}
-                expand
-                documentCount={dataset.document_count}
-              />
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </>
-  )
-}
-
-export default DatasetSidebarDropdown
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
deleted file mode 100644
index 1e4783390e4..00000000000
--- a/web/app/components/app-sidebar/index.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import type { AppInfoActions } from './app-info/use-app-info-actions'
-import type { NavIcon } from './nav-link'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useHotkey } from '@tanstack/react-hotkeys'
-import { useHover } from 'ahooks'
-import * as React from 'react'
-import { useCallback } from 'react'
-import { useDetailSidebarMode } from '@/app/components/main-nav/storage'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import Divider from '../base/divider'
-import AppInfo, { AppInfoView } from './app-info'
-import DatasetInfo from './dataset-info'
-import NavLink from './nav-link'
-import ToggleButton from './toggle-button'
-
-type IAppDetailNavProps = {
-  iconType?: 'app' | 'dataset'
-  navigation: Array<{
-    name: string
-    href: string
-    icon: NavIcon
-    selectedIcon: NavIcon
-    disabled?: boolean
-  }>
-  extraInfo?: (modeState: string) => React.ReactNode
-  renderHeader?: (modeState: string) => React.ReactNode
-  renderNavigation?: (modeState: string) => React.ReactNode
-  appInfoActions?: AppInfoActions
-}
-
-const AppDetailNav = ({
-  navigation,
-  extraInfo,
-  renderHeader,
-  renderNavigation,
-  iconType = 'app',
-  appInfoActions,
-}: IAppDetailNavProps) => {
-  const [detailSidebarMode, setDetailSidebarMode] = useDetailSidebarMode()
-  const sidebarRef = React.useRef<HTMLDivElement>(null)
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-  const expand = detailSidebarMode === 'expand'
-
-  const handleToggle = useCallback(() => {
-    setDetailSidebarMode(detailSidebarMode === 'expand' ? 'collapse' : 'expand')
-  }, [detailSidebarMode, setDetailSidebarMode])
-
-  const isHoveringSidebar = useHover(sidebarRef)
-
-  useHotkey('Mod+B', (e) => {
-    e.preventDefault()
-    handleToggle()
-  }, {
-    ignoreInputs: true,
-  })
-
-  return (
-    <div
-      ref={sidebarRef}
-      className={cn(
-        'flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all',
-        expand ? 'w-55' : 'w-14',
-      )}
-    >
-      <div
-        className={cn(
-          'shrink-0',
-          expand ? 'p-2' : 'p-1',
-        )}
-      >
-        {renderHeader
-          ? renderHeader(detailSidebarMode)
-          : iconType === 'app' && (
-            appInfoActions
-              ? (
-                  <AppInfoView
-                    expand={expand}
-                    actions={appInfoActions}
-                    renderDetail={false}
-                  />
-                )
-              : <AppInfo expand={expand} />
-          )}
-        {!renderHeader && iconType !== 'app' && (
-          <DatasetInfo expand={expand} />
-        )}
-      </div>
-      <div className="relative px-4 py-2">
-        <Divider
-          type="horizontal"
-          bgStyle={expand ? 'gradient' : 'solid'}
-          className={cn(
-            'my-0 h-px',
-            expand
-              ? 'bg-linear-to-r from-divider-subtle to-background-gradient-mask-transparent'
-              : 'bg-divider-subtle',
-          )}
-        />
-        {!isMobile && isHoveringSidebar && (
-          <ToggleButton
-            className="absolute top-[-3.5px] -right-3 z-20"
-            expand={expand}
-            handleToggle={handleToggle}
-          />
-        )}
-      </div>
-      <nav
-        className={cn(
-          'flex grow flex-col gap-y-0.5',
-          expand ? 'px-3 py-2' : 'p-3',
-        )}
-      >
-        {renderNavigation
-          ? renderNavigation(detailSidebarMode)
-          : navigation.map((item, index) => {
-              return (
-                <NavLink
-                  key={index}
-                  mode={detailSidebarMode}
-                  iconMap={{ selected: item.selectedIcon, normal: item.icon }}
-                  name={item.name}
-                  href={item.href}
-                  disabled={!!item.disabled}
-                />
-              )
-            })}
-      </nav>
-      {iconType !== 'app' && extraInfo && extraInfo(detailSidebarMode)}
-    </div>
-  )
-}
-
-export default React.memo(AppDetailNav)
diff --git a/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx b/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
deleted file mode 100644
index 0c3925c901b..00000000000
--- a/web/app/components/app-sidebar/snippet-info/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { SnippetDetail } from '@/models/snippet'
-import { render, screen } from '@testing-library/react'
-import * as React from 'react'
-import SnippetInfo from '..'
-
-vi.mock('../dropdown', () => ({
-  default: () => <div data-testid="snippet-info-dropdown" />,
-}))
-
-const mockSnippet: SnippetDetail = {
-  id: 'snippet-1',
-  name: 'Social Media Repurposer',
-  description: 'Turn one blog post into multiple social media variations.',
-  updatedAt: '2026-03-25 10:00',
-  usage: '12',
-  tags: [],
-  status: undefined,
-}
-
-describe('SnippetInfo', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Rendering tests for the collapsed and expanded sidebar header states.
-  describe('Rendering', () => {
-    it('should render the expanded snippet details and dropdown when expand is true', () => {
-      render(<SnippetInfo expand={true} snippet={mockSnippet} />)
-
-      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
-      expect(screen.getByText('snippet.typeLabel')).toBeInTheDocument()
-      expect(screen.getByText(mockSnippet.description)).toBeInTheDocument()
-      expect(screen.getByTestId('snippet-info-dropdown')).toBeInTheDocument()
-    })
-
-    it('should hide the expanded-only content when expand is false', () => {
-      render(<SnippetInfo expand={false} snippet={mockSnippet} />)
-
-      expect(screen.queryByText(mockSnippet.name)).not.toBeInTheDocument()
-      expect(screen.queryByText('snippet.typeLabel')).not.toBeInTheDocument()
-      expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
-      expect(screen.queryByTestId('snippet-info-dropdown')).not.toBeInTheDocument()
-    })
-  })
-
-  // Edge cases around optional snippet fields should not break the header layout.
-  describe('Edge Cases', () => {
-    it('should omit the description block when the snippet has no description', () => {
-      render(
-        <SnippetInfo
-          expand={true}
-          snippet={{ ...mockSnippet, description: '' }}
-        />,
-      )
-
-      expect(screen.getByText(mockSnippet.name)).toBeInTheDocument()
-      expect(screen.queryByText(mockSnippet.description)).not.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/app-sidebar/snippet-info/index.tsx b/web/app/components/app-sidebar/snippet-info/index.tsx
deleted file mode 100644
index 417807cdae1..00000000000
--- a/web/app/components/app-sidebar/snippet-info/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client'
-
-import type { SnippetDetail } from '@/models/snippet'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import SnippetInfoDropdown from './dropdown'
-
-type SnippetInfoProps = {
-  expand: boolean
-  snippet: SnippetDetail
-}
-
-const SnippetInfo = ({
-  expand,
-  snippet,
-}: SnippetInfoProps) => {
-  const { t } = useTranslation('snippet')
-
-  if (!expand)
-    return null
-
-  return (
-    <div className="flex flex-col px-2 pt-2 pb-1">
-      <div className="flex flex-col gap-2 rounded-xl p-2">
-        <div className="flex items-center justify-end">
-          <SnippetInfoDropdown snippet={snippet} />
-        </div>
-        <div className="min-w-0">
-          <div className="truncate system-md-semibold text-text-secondary">
-            {snippet.name}
-          </div>
-          <div className="pt-1 system-2xs-medium-uppercase text-text-tertiary">
-            {t('typeLabel')}
-          </div>
-        </div>
-        {snippet.description && (
-          <p className="line-clamp-3 system-xs-regular break-words text-text-tertiary">
-            {snippet.description}
-          </p>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(SnippetInfo)
diff --git a/web/app/components/app/configuration/config-var/select-type-item/__tests__/index.spec.tsx b/web/app/components/app/configuration/config-var/select-type-item/__tests__/index.spec.tsx
deleted file mode 100644
index 67140232db2..00000000000
--- a/web/app/components/app/configuration/config-var/select-type-item/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { InputVarType } from '@/app/components/workflow/types'
-import SelectTypeItem from '../index'
-
-describe('SelectTypeItem', () => {
-  // Rendering pathways based on type and selection state
-  describe('Rendering', () => {
-    it('should render ok', () => {
-      // Arrange
-      const { container } = render(
-        <SelectTypeItem
-          type={InputVarType.textInput}
-          selected={false}
-          onClick={vi.fn()}
-        />,
-      )
-
-      // Assert
-      expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
-      expect(container.querySelector('svg')).not.toBeNull()
-    })
-  })
-
-  // User interaction outcomes
-  describe('Interactions', () => {
-    it('should trigger onClick when item is pressed', () => {
-      const handleClick = vi.fn()
-      // Arrange
-      render(
-        <SelectTypeItem
-          type={InputVarType.paragraph}
-          selected={false}
-          onClick={handleClick}
-        />,
-      )
-
-      // Act
-      fireEvent.click(screen.getByText('appDebug.variableConfig.paragraph'))
-
-      // Assert
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
-})
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
deleted file mode 100644
index 935a4557e66..00000000000
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { InputVarType } from '@/app/components/workflow/types'
-import type { I18nKeysByPrefix } from '@/types/i18n'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
-
-type ISelectTypeItemProps = {
-  type: InputVarType
-  selected: boolean
-  onClick: () => void
-}
-
-type VariableConfigTypeKey = I18nKeysByPrefix<'appDebug', 'variableConfig.'>
-
-const i18nTypeMap: Partial<Record<InputVarType, VariableConfigTypeKey>> = {
-  'file': 'single-file',
-  'file-list': 'multi-files',
-}
-
-const SelectTypeItem: FC<ISelectTypeItemProps> = ({
-  type,
-  selected,
-  onClick,
-}) => {
-  const { t } = useTranslation()
-  const typeKey = i18nTypeMap[type] ?? type as VariableConfigTypeKey
-  const typeName = t(`variableConfig.${typeKey}`, { ns: 'appDebug' })
-
-  return (
-    <div
-      className={cn(
-        'flex h-[58px] flex-col items-center justify-center space-y-1 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary',
-        selected ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-xs-medium shadow-xs' : 'cursor-pointer system-xs-regular hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-      )}
-      onClick={onClick}
-    >
-      <div className="shrink-0">
-        <InputVarTypeIcon type={type} className="size-5" />
-      </div>
-      <span>{typeName}</span>
-    </div>
-  )
-}
-export default React.memo(SelectTypeItem)
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/__tests__/index.spec.tsx b/web/app/components/app/configuration/config/assistant-type-picker/__tests__/index.spec.tsx
deleted file mode 100644
index 7b2d3414f6c..00000000000
--- a/web/app/components/app/configuration/config/assistant-type-picker/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,908 +0,0 @@
-import type { AgentConfig } from '@/models/debug'
-import { act, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import * as React from 'react'
-import { AgentStrategy } from '@/types/app'
-import AssistantTypePicker from '../index'
-
-// Test utilities
-const defaultAgentConfig: AgentConfig = {
-  enabled: true,
-  max_iteration: 3,
-  strategy: AgentStrategy.functionCall,
-  tools: [],
-}
-
-const defaultProps = {
-  value: 'chat',
-  disabled: false,
-  onChange: vi.fn(),
-  isFunctionCall: true,
-  isChatModel: true,
-  agentConfig: defaultAgentConfig,
-  onAgentSettingChange: vi.fn(),
-}
-
-const renderComponent = (props: Partial<React.ComponentProps<typeof AssistantTypePicker>> = {}) => {
-  const mergedProps = { ...defaultProps, ...props }
-  return render(<AssistantTypePicker {...mergedProps} />)
-}
-
-// Helper to get option element by description (which is unique per option)
-const getOptionByDescription = (descriptionRegex: RegExp) => {
-  const description = screen.getByText(descriptionRegex)
-  return description.parentElement as HTMLElement
-}
-
-describe('AssistantTypePicker', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Rendering tests (REQUIRED)
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      // Arrange & Act
-      renderComponent()
-
-      // Assert
-      // Assert
-      expect(screen.getByText(/chatAssistant.name/i))!.toBeInTheDocument()
-    })
-
-    it('should render chat assistant by default when value is "chat"', () => {
-      // Arrange & Act
-      renderComponent({ value: 'chat' })
-
-      // Assert
-      // Assert
-      expect(screen.getByText(/chatAssistant.name/i))!.toBeInTheDocument()
-    })
-
-    it('should render agent assistant when value is "agent"', () => {
-      // Arrange & Act
-      renderComponent({ value: 'agent' })
-
-      // Assert
-      // Assert
-      expect(screen.getByText(/agentAssistant.name/i))!.toBeInTheDocument()
-    })
-  })
-
-  // Props tests (REQUIRED)
-  describe('Props', () => {
-    it('should use provided value prop', () => {
-      // Arrange & Act
-      renderComponent({ value: 'agent' })
-
-      // Assert
-      // Assert
-      expect(screen.getByText(/agentAssistant.name/i))!.toBeInTheDocument()
-    })
-
-    it('should handle agentConfig prop', () => {
-      // Arrange
-      const customAgentConfig: AgentConfig = {
-        enabled: true,
-        max_iteration: 10,
-        strategy: AgentStrategy.react,
-        tools: [],
-      }
-
-      // Act
-      expect(() => {
-        renderComponent({ agentConfig: customAgentConfig })
-      }).not.toThrow()
-
-      // Assert
-      // Assert
-      expect(screen.getByText(/chatAssistant.name/i))!.toBeInTheDocument()
-    })
-
-    it('should handle undefined agentConfig prop', () => {
-      // Arrange & Act
-      expect(() => {
-        renderComponent({ agentConfig: undefined })
-      }).not.toThrow()
-
-      // Assert
-      // Assert
-      expect(screen.getByText(/chatAssistant.name/i))!.toBeInTheDocument()
-    })
-  })
-
-  // User Interactions
-  describe('User Interactions', () => {
-    it('should open dropdown when clicking trigger', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Both options should be visible
-      await waitFor(() => {
-        const chatOptions = screen.getAllByText(/chatAssistant.name/i)
-        const agentOptions = screen.getAllByText(/agentAssistant.name/i)
-        expect(chatOptions.length).toBeGreaterThan(1)
-        expect(agentOptions.length).toBeGreaterThan(0)
-      })
-    })
-
-    it('should call onChange when selecting chat assistant', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      renderComponent({ value: 'agent', onChange })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      // Wait for dropdown to open and find chat option
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Find and click the chat option by its unique description
-      const chatOption = getOptionByDescription(/chatAssistant.description/i)
-      await user.click(chatOption)
-
-      // Assert
-      expect(onChange).toHaveBeenCalledWith('chat')
-    })
-
-    it('should call onChange when selecting agent assistant', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      renderComponent({ value: 'chat', onChange })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Wait for dropdown to open and click agent option
-      await waitFor(() => {
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      const agentOption = getOptionByDescription(/agentAssistant.description/i)
-      await user.click(agentOption)
-
-      // Assert
-      expect(onChange).toHaveBeenCalledWith('agent')
-    })
-
-    it('should close dropdown when selecting chat assistant', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent' })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      // Wait for dropdown and select chat
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      const chatOption = getOptionByDescription(/chatAssistant.description/i)
-      await user.click(chatOption)
-
-      // Assert - Dropdown should close (descriptions should not be visible)
-      await waitFor(() => {
-        expect(screen.queryByText(/chatAssistant.description/i)).not.toBeInTheDocument()
-      })
-    })
-
-    it('should not close dropdown when selecting agent assistant', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'chat' })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Wait for dropdown and select agent
-      await waitFor(() => {
-        const agentOptions = screen.getAllByText(/agentAssistant.name/i)
-        expect(agentOptions.length).toBeGreaterThan(0)
-      })
-
-      const agentOptions = screen.getAllByText(/agentAssistant.name/i)
-      await user.click(agentOptions[0]!)
-
-      // Assert - Dropdown should remain open (agent settings should be visible)
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-    })
-
-    it('should not call onChange when clicking same value', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      renderComponent({ value: 'chat', onChange })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Wait for dropdown and click same option
-      await waitFor(() => {
-        const chatOptions = screen.getAllByText(/chatAssistant.name/i)
-        expect(chatOptions.length).toBeGreaterThan(1)
-      })
-
-      const chatOptions = screen.getAllByText(/chatAssistant.name/i)
-      await user.click(chatOptions[1]!)
-
-      // Assert
-      expect(onChange).not.toHaveBeenCalled()
-    })
-  })
-
-  // Disabled state
-  describe('Disabled State', () => {
-    it('should not respond to clicks when disabled', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      renderComponent({ disabled: true, onChange })
-
-      // Act - Open dropdown (dropdown can still open when disabled)
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Wait for dropdown to open
-      await waitFor(() => {
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Act - Try to click an option
-      const agentOption = getOptionByDescription(/agentAssistant.description/i)
-      await user.click(agentOption)
-
-      // Assert - onChange should not be called (options are disabled)
-      expect(onChange).not.toHaveBeenCalled()
-    })
-
-    it('should not show agent config UI when disabled', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent', disabled: true })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Agent settings option should not be visible
-      await waitFor(() => {
-        expect(screen.queryByText(/agent.setting.name/i)).not.toBeInTheDocument()
-      })
-    })
-
-    it('should show agent config UI when not disabled', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent', disabled: false })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Agent settings option should be visible
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-    })
-  })
-
-  // Agent Settings Modal
-  describe('Agent Settings Modal', () => {
-    it('should open agent settings modal when clicking agent config UI', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent', disabled: false })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      // Click agent settings
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      // Assert
-      await waitFor(() => {
-        expect(screen.getByText(/common.operation.save/i))!.toBeInTheDocument()
-      })
-    })
-
-    it('should not open agent settings when value is not agent', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'chat', disabled: false })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Wait for dropdown to open
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      // Assert - Agent settings modal should not appear (value is 'chat')
-      expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
-    })
-
-    it('should call onAgentSettingChange when saving agent settings', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const onAgentSettingChange = vi.fn()
-      renderComponent({ value: 'agent', disabled: false, onAgentSettingChange })
-
-      // Act - Open dropdown and agent settings
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      // Wait for modal and click save
-      await waitFor(() => {
-        expect(screen.getByText(/common.operation.save/i))!.toBeInTheDocument()
-      })
-
-      const saveButton = screen.getByText(/common.operation.save/i)
-      await user.click(saveButton)
-
-      // Assert
-      expect(onAgentSettingChange).toHaveBeenCalledWith(defaultAgentConfig)
-    })
-
-    it('should close modal when saving agent settings', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent', disabled: false })
-
-      // Act - Open dropdown, agent settings, and save
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/appDebug.agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const saveButton = screen.getByText(/common.operation.save/i)
-      await user.click(saveButton)
-
-      // Assert
-      await waitFor(() => {
-        expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
-      })
-    })
-
-    it('should close modal when canceling agent settings', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const onAgentSettingChange = vi.fn()
-      renderComponent({ value: 'agent', disabled: false, onAgentSettingChange })
-
-      // Act - Open dropdown, agent settings, and cancel
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/common.operation.save/i))!.toBeInTheDocument()
-      })
-
-      const cancelButton = screen.getByText(/common.operation.cancel/i)
-      await user.click(cancelButton)
-
-      // Assert
-      await waitFor(() => {
-        expect(screen.queryByText(/common.operation.save/i)).not.toBeInTheDocument()
-      })
-      expect(onAgentSettingChange).not.toHaveBeenCalled()
-    })
-
-    it('should close dropdown when opening agent settings', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent', disabled: false })
-
-      // Act - Open dropdown and agent settings
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      // Assert - Modal should be open and dropdown should close
-      await waitFor(() => {
-        expect(screen.getByText(/common.operation.save/i))!.toBeInTheDocument()
-      })
-
-      // The dropdown should be closed (agent settings description should not be visible)
-      await waitFor(() => {
-        const descriptions = screen.queryAllByText(/agent.setting.description/i)
-        expect(descriptions.length).toBe(0)
-      })
-    })
-  })
-
-  // Edge Cases (REQUIRED)
-  describe('Edge Cases', () => {
-    it('should handle rapid toggle clicks', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-      await user.click(trigger)
-      await user.click(trigger)
-
-      // Assert - Should not crash
-      // Assert - Should not crash
-      expect(trigger)!.toBeInTheDocument()
-    })
-
-    it('should handle multiple rapid selection changes', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      renderComponent({ value: 'chat', onChange })
-
-      // Act - Open and select agent
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Click agent option - this stays open because value is 'agent'
-      const agentOption = getOptionByDescription(/agentAssistant.description/i)
-      await user.click(agentOption)
-
-      // Assert - onChange should have been called once to switch to agent
-      await waitFor(() => {
-        expect(onChange).toHaveBeenCalledTimes(1)
-      })
-      expect(onChange).toHaveBeenCalledWith('agent')
-    })
-
-    it('should handle missing callback functions gracefully', async () => {
-      // Arrange
-      const user = userEvent.setup()
-
-      // Act & Assert - Should not crash
-      expect(() => {
-        renderComponent({
-          onChange: undefined!,
-          onAgentSettingChange: undefined!,
-        })
-      }).not.toThrow()
-
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-    })
-
-    it('should handle empty agentConfig', async () => {
-      // Arrange & Act
-      expect(() => {
-        renderComponent({ agentConfig: {} as AgentConfig })
-      }).not.toThrow()
-
-      // Assert
-      // Assert
-      expect(screen.getByText(/chatAssistant.name/i))!.toBeInTheDocument()
-    })
-
-    describe('should render with different prop combinations', () => {
-      const combinations = [
-        { value: 'chat' as const, disabled: true, isFunctionCall: true, isChatModel: true },
-        { value: 'agent' as const, disabled: false, isFunctionCall: false, isChatModel: false },
-        { value: 'agent' as const, disabled: true, isFunctionCall: true, isChatModel: false },
-        { value: 'chat' as const, disabled: false, isFunctionCall: false, isChatModel: true },
-      ]
-
-      it.each(combinations)(
-        'value=$value, disabled=$disabled, isFunctionCall=$isFunctionCall, isChatModel=$isChatModel',
-        (combo) => {
-          // Arrange & Act
-          renderComponent(combo)
-
-          // Assert
-          const expectedText = combo.value === 'agent' ? 'agentAssistant.name' : 'chatAssistant.name'
-          expect(screen.getByText(new RegExp(expectedText, 'i')))!.toBeInTheDocument()
-        },
-      )
-    })
-  })
-
-  // Accessibility
-  describe('Accessibility', () => {
-    it('should render interactive dropdown items', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Both options should be visible and clickable
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Verify we can interact with option elements using helper function
-      const chatOption = getOptionByDescription(/chatAssistant.description/i)
-      const agentOption = getOptionByDescription(/agentAssistant.description/i)
-      expect(chatOption)!.toBeInTheDocument()
-      expect(agentOption)!.toBeInTheDocument()
-    })
-  })
-
-  // SelectItem Component
-  describe('SelectItem Component', () => {
-    it('should show checked state for selected option', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'chat' })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Both options should be visible with radio components
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // The SelectItem components render with different visual states
-      // based on isChecked prop - we verify both options are rendered
-      const chatOption = getOptionByDescription(/chatAssistant.description/i)
-      const agentOption = getOptionByDescription(/agentAssistant.description/i)
-      expect(chatOption)!.toBeInTheDocument()
-      expect(agentOption)!.toBeInTheDocument()
-    })
-
-    it('should render description text', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Descriptions should be visible
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-    })
-
-    it('should show Radio component for each option', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Radio components should be present (both options visible)
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-    })
-  })
-
-  // Agent Setting Integration
-  describe('AgentSetting Integration', () => {
-    it('should show function call mode when isFunctionCall is true', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent', isFunctionCall: true, isChatModel: false })
-
-      // Act - Open dropdown and settings modal
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      // Assert
-      await waitFor(() => {
-        expect(screen.getByText(/common.operation.save/i))!.toBeInTheDocument()
-      })
-      expect(screen.getByText(/appDebug.agent.agentModeType.functionCall/i))!.toBeInTheDocument()
-    })
-
-    it('should show built-in prompt when isFunctionCall is false', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent', isFunctionCall: false, isChatModel: true })
-
-      // Act - Open dropdown and settings modal
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      // Assert
-      await waitFor(() => {
-        expect(screen.getByText(/common.operation.save/i))!.toBeInTheDocument()
-      })
-      expect(screen.getByText(/tools.builtInPromptTitle/i))!.toBeInTheDocument()
-    })
-
-    it('should initialize max iteration from agentConfig payload', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      const customConfig: AgentConfig = {
-        enabled: true,
-        max_iteration: 10,
-        strategy: AgentStrategy.react,
-        tools: [],
-      }
-
-      renderComponent({ value: 'agent', agentConfig: customConfig })
-
-      // Act - Open dropdown and settings modal
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettingsTrigger = screen.getByText(/agent.setting.name/i)
-      await user.click(agentSettingsTrigger)
-
-      // Assert
-      await screen.findByText(/common.operation.save/i)
-      const maxIterationInput = await screen.findByRole('spinbutton')
-      expect(maxIterationInput)!.toHaveValue(10)
-    })
-  })
-
-  // Keyboard Navigation
-  describe('Keyboard Navigation', () => {
-    it('should support closing dropdown with Escape key', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Press Escape
-      await user.keyboard('{Escape}')
-
-      // Assert - Dropdown should close
-      await waitFor(() => {
-        expect(screen.queryByText(/chatAssistant.description/i)).not.toBeInTheDocument()
-      })
-    })
-
-    it('should allow keyboard focus on trigger element', () => {
-      // Arrange
-      renderComponent()
-
-      // Act - Get trigger and verify it can receive focus
-      const trigger = screen.getByText(/chatAssistant.name/i)
-
-      // Assert - Element should be focusable
-      // Assert - Element should be focusable
-      expect(trigger)!.toBeInTheDocument()
-      expect(trigger.parentElement)!.toBeInTheDocument()
-    })
-
-    it('should allow keyboard focus on dropdown options', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Get options
-      const chatOption = getOptionByDescription(/chatAssistant.description/i)
-      const agentOption = getOptionByDescription(/agentAssistant.description/i)
-
-      // Assert - Options should be focusable
-      // Assert - Options should be focusable
-      expect(chatOption)!.toBeInTheDocument()
-      expect(agentOption)!.toBeInTheDocument()
-
-      // Verify options exist and can receive focus programmatically
-      // Note: focus() doesn't always update document.activeElement in JSDOM
-      // so we just verify the elements are interactive
-      act(() => {
-        chatOption.focus()
-      })
-      // The element should have received the focus call even if activeElement isn't updated
-      expect(chatOption.tabIndex).toBeDefined()
-    })
-
-    it('should maintain keyboard accessibility for all interactive elements', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent({ value: 'agent' })
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/agentAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - Agent settings button should be focusable
-      await waitFor(() => {
-        expect(screen.getByText(/agent.setting.name/i))!.toBeInTheDocument()
-      })
-
-      const agentSettings = screen.getByText(/agent.setting.name/i)
-      expect(agentSettings)!.toBeInTheDocument()
-    })
-  })
-
-  // ARIA Attributes
-  describe('ARIA Attributes', () => {
-    it('should have proper ARIA state for dropdown', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act - Check initial state
-      const triggerButton = screen.getByRole('button', { name: /chatAssistant\.name/i })
-      expect(triggerButton).toHaveAttribute('aria-expanded', 'false')
-
-      // Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - State should change to open
-      await waitFor(() => {
-        expect(triggerButton).toHaveAttribute('aria-expanded', 'true')
-      })
-    })
-
-    it('should have proper data-state attribute', () => {
-      // Arrange & Act
-      renderComponent()
-
-      // Assert - Trigger should expose expanded state for accessibility
-      const triggerButton = screen.getByRole('button', { name: /chatAssistant\.name/i })
-      expect(triggerButton).toBeInTheDocument()
-      expect(triggerButton).toHaveAttribute('aria-expanded')
-
-      // Should start in closed state
-      // Should start in closed state
-      expect(triggerButton).toHaveAttribute('aria-expanded', 'false')
-    })
-
-    it('should maintain accessible structure for screen readers', () => {
-      // Arrange & Act
-      renderComponent({ value: 'chat' })
-
-      // Assert - Text content should be accessible
-      // Assert - Text content should be accessible
-      expect(screen.getByText(/chatAssistant.name/i))!.toBeInTheDocument()
-
-      // Icons should have proper structure
-      const { container } = renderComponent()
-      const icons = container.querySelectorAll('svg')
-      expect(icons.length).toBeGreaterThan(0)
-    })
-
-    it('should provide context through text labels', async () => {
-      // Arrange
-      const user = userEvent.setup()
-      renderComponent()
-
-      // Act - Open dropdown
-      const trigger = screen.getByText(/chatAssistant.name/i)
-      await user.click(trigger)
-
-      // Assert - All options should have descriptive text
-      await waitFor(() => {
-        expect(screen.getByText(/chatAssistant.description/i))!.toBeInTheDocument()
-        expect(screen.getByText(/agentAssistant.description/i))!.toBeInTheDocument()
-      })
-
-      // Title text should be visible
-      // Title text should be visible
-      expect(screen.getByText(/assistantType.name/i))!.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
deleted file mode 100644
index 1ab4074950e..00000000000
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { AgentConfig } from '@/models/debug'
-import { cn } from '@langgenius/dify-ui/cn'
-import { FieldItem, FieldLabel, FieldRoot } from '@langgenius/dify-ui/field'
-import { FieldsetLegend, FieldsetRoot } from '@langgenius/dify-ui/fieldset'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@langgenius/dify-ui/popover'
-import { Radio } from '@langgenius/dify-ui/radio'
-import { RadioGroup } from '@langgenius/dify-ui/radio-group'
-import { RiArrowDownSLine } from '@remixicon/react'
-import * as React from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
-import { CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
-import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
-import AgentSetting from '../agent/agent-setting'
-
-type Props = Readonly<{
-  value: string
-  disabled: boolean
-  onChange: (value: string) => void
-  isFunctionCall: boolean
-  isChatModel: boolean
-  agentConfig?: AgentConfig
-  onAgentSettingChange: (payload: AgentConfig) => void
-}>
-
-type ItemProps = {
-  text: string
-  disabled: boolean
-  value: string
-  isChecked: boolean
-  description: string
-  Icon: any
-}
-
-const SelectItem: FC<ItemProps> = ({ text, value, Icon, isChecked, description, disabled }) => {
-  return (
-    <FieldItem>
-      <FieldLabel
-        className={cn(disabled ? 'opacity-50' : 'cursor-pointer', isChecked ? 'border-2 border-indigo-600 shadow-sm' : 'border border-gray-100', 'mb-2 rounded-xl bg-gray-25 p-3 pr-4 hover:bg-gray-50')}
-      >
-        <div className="flex items-center justify-between">
-          <div className="flex items-center">
-            <div className="mr-3 rounded-lg bg-indigo-50 p-1">
-              <Icon className="size-4 text-indigo-600" />
-            </div>
-            <div className="text-sm/5 font-medium text-gray-900">{text}</div>
-          </div>
-          <Radio value={value} disabled={disabled} />
-        </div>
-        <div className="ml-9 text-xs leading-[18px] font-normal text-gray-500">{description}</div>
-      </FieldLabel>
-    </FieldItem>
-  )
-}
-
-const AssistantTypePicker: FC<Props> = ({
-  value,
-  disabled,
-  onChange,
-  onAgentSettingChange,
-  isFunctionCall,
-  isChatModel,
-  agentConfig,
-}) => {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const handleChange = (chosenValue: string) => {
-    if (value === chosenValue)
-      return
-
-    onChange(chosenValue)
-    if (chosenValue !== 'agent')
-      setOpen(false)
-  }
-  const isAgent = value === 'agent'
-  const [isShowAgentSetting, setIsShowAgentSetting] = useState(false)
-
-  const agentConfigUI = (
-    <>
-      <div className="my-4 h-px bg-gray-100"></div>
-      <div
-        className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'rounded-xl bg-gray-50 p-3 pr-4')}
-        onClick={() => {
-          if (isAgent) {
-            setOpen(false)
-            setIsShowAgentSetting(true)
-          }
-        }}
-      >
-        <div className="flex items-center justify-between">
-          <div className="flex items-center">
-            <div className="mr-3 rounded-lg bg-gray-200 p-1 group-hover:bg-white">
-              <Settings04 className="h-4 w-4 text-gray-600 group-hover:text-[#155EEF]" />
-            </div>
-            <div className="text-sm leading-5 font-medium text-gray-900 group-hover:text-[#155EEF]">{t('agent.setting.name', { ns: 'appDebug' })}</div>
-          </div>
-          <ArrowUpRight className="h-4 w-4 text-gray-500 group-hover:text-[#155EEF]" />
-        </div>
-        <div className="ml-9 text-xs leading-[18px] font-normal text-gray-500">{t('agent.setting.description', { ns: 'appDebug' })}</div>
-      </div>
-    </>
-  )
-  return (
-    <>
-      <Popover
-        open={open}
-        onOpenChange={setOpen}
-      >
-        <PopoverTrigger
-          nativeButton={false}
-          render={(
-            <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600 select-none')} />
-          )}
-        >
-          {isAgent ? <BubbleText className="size-3" /> : <CuteRobot className="size-3" />}
-          <div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
-          <RiArrowDownSLine className="size-3" />
-        </PopoverTrigger>
-        <PopoverContent
-          placement="bottom-end"
-          sideOffset={8}
-          alignOffset={-2}
-          popupClassName="relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg"
-        >
-          <FieldRoot name="assistant_type" className="contents">
-            <FieldsetRoot
-              render={(
-                <RadioGroup
-                  value={isAgent ? 'agent' : 'chat'}
-                  onValueChange={handleChange}
-                  disabled={disabled}
-                  className="flex-col items-stretch gap-0"
-                />
-              )}
-            >
-              <FieldsetLegend className="mb-2 py-0 text-sm/5 font-semibold text-gray-900">
-                {t('assistantType.name', { ns: 'appDebug' })}
-              </FieldsetLegend>
-              <SelectItem
-                Icon={BubbleText}
-                value="chat"
-                disabled={disabled}
-                text={t('assistantType.chatAssistant.name', { ns: 'appDebug' })}
-                description={t('assistantType.chatAssistant.description', { ns: 'appDebug' })}
-                isChecked={!isAgent}
-              />
-              <SelectItem
-                Icon={CuteRobot}
-                value="agent"
-                disabled={disabled}
-                text={t('assistantType.agentAssistant.name', { ns: 'appDebug' })}
-                description={t('assistantType.agentAssistant.description', { ns: 'appDebug' })}
-                isChecked={isAgent}
-              />
-            </FieldsetRoot>
-          </FieldRoot>
-          {!disabled && agentConfigUI}
-        </PopoverContent>
-      </Popover>
-      {isShowAgentSetting && (
-        <AgentSetting
-          isFunctionCall={isFunctionCall}
-          payload={agentConfig as AgentConfig}
-          isChatModel={isChatModel}
-          onSave={(payloadNew) => {
-            onAgentSettingChange(payloadNew)
-            setIsShowAgentSetting(false)
-          }}
-          onCancel={() => setIsShowAgentSetting(false)}
-        />
-      )}
-    </>
-  )
-}
-export default React.memo(AssistantTypePicker)
diff --git a/web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx b/web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx
deleted file mode 100644
index 036820f1b39..00000000000
--- a/web/app/components/app/configuration/ctrl-btn-group/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import ContrlBtnGroup from '../index'
-
-describe('ContrlBtnGroup', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Rendering fixed action buttons
-  describe('Rendering', () => {
-    it('should render buttons when rendered', () => {
-      // Arrange
-      const onSave = vi.fn()
-      const onReset = vi.fn()
-
-      // Act
-      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
-
-      // Assert
-      expect(screen.getByRole('button', { name: 'appDebug.operation.applyConfig' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'appDebug.operation.resetConfig' })).toBeInTheDocument()
-    })
-  })
-
-  // Handling click interactions
-  describe('Interactions', () => {
-    it('should invoke callbacks when buttons are clicked', () => {
-      // Arrange
-      const onSave = vi.fn()
-      const onReset = vi.fn()
-      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
-
-      // Act
-      fireEvent.click(screen.getByRole('button', { name: 'appDebug.operation.applyConfig' }))
-      fireEvent.click(screen.getByRole('button', { name: 'appDebug.operation.resetConfig' }))
-
-      // Assert
-      expect(onSave).toHaveBeenCalledTimes(1)
-      expect(onReset).toHaveBeenCalledTimes(1)
-    })
-  })
-})
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
deleted file mode 100644
index c746d273ba2..00000000000
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { Button } from '@langgenius/dify-ui/button'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import s from './style.module.css'
-
-type IContrlBtnGroupProps = {
-  onSave: () => void
-  onReset: () => void
-}
-
-const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
-  const { t } = useTranslation()
-  return (
-    <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
-      <div className={`${s.ctrlBtn} flex h-full items-center gap-2 bg-white pl-4`}>
-        <Button variant="primary" onClick={onSave}>{t('operation.applyConfig', { ns: 'appDebug' })}</Button>
-        <Button onClick={onReset}>{t('operation.resetConfig', { ns: 'appDebug' })}</Button>
-      </div>
-    </div>
-  )
-}
-export default React.memo(ContrlBtnGroup)
diff --git a/web/app/components/app/configuration/ctrl-btn-group/style.module.css b/web/app/components/app/configuration/ctrl-btn-group/style.module.css
deleted file mode 100644
index 3e874868a93..00000000000
--- a/web/app/components/app/configuration/ctrl-btn-group/style.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.ctrlBtn {
-    left: -16px;
-    right: -16px;
-    bottom: -16px;
-    border-top: 1px solid #F3F4F6;
-}
diff --git a/web/app/components/app/configuration/prompt-value-panel/__tests__/utils.spec.ts b/web/app/components/app/configuration/prompt-value-panel/__tests__/utils.spec.ts
deleted file mode 100644
index 18eb87f6750..00000000000
--- a/web/app/components/app/configuration/prompt-value-panel/__tests__/utils.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { PromptVariable } from '@/models/debug'
-
-import { describe, expect, it } from 'vitest'
-import { replaceStringWithValues } from '../utils'
-
-const promptVariables: PromptVariable[] = [
-  { key: 'user', name: 'User', type: 'string' },
-  { key: 'topic', name: 'Topic', type: 'string' },
-]
-
-describe('replaceStringWithValues', () => {
-  it('should replace placeholders when inputs have values', () => {
-    const template = 'Hello {{user}} talking about {{topic}}'
-    const result = replaceStringWithValues(template, promptVariables, { user: 'Alice', topic: 'cats' })
-    expect(result).toBe('Hello Alice talking about cats')
-  })
-
-  it('should use prompt variable name when value is missing', () => {
-    const template = 'Hi {{user}} from {{topic}}'
-    const result = replaceStringWithValues(template, promptVariables, {})
-    expect(result).toBe('Hi {{User}} from {{Topic}}')
-  })
-
-  it('should leave placeholder untouched when no variable is defined', () => {
-    const template = 'Unknown {{missing}} placeholder'
-    const result = replaceStringWithValues(template, promptVariables, {})
-    expect(result).toBe('Unknown {{missing}} placeholder')
-  })
-})
diff --git a/web/app/components/app/configuration/prompt-value-panel/utils.ts b/web/app/components/app/configuration/prompt-value-panel/utils.ts
deleted file mode 100644
index bc4656d73bd..00000000000
--- a/web/app/components/app/configuration/prompt-value-panel/utils.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { PromptVariable } from '@/models/debug'
-
-export function replaceStringWithValues(str: string, promptVariables: PromptVariable[], inputs: Record<string, any>) {
-  return str.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
-    const name = inputs[key]
-    if (name) { // has set value
-      return name
-    }
-
-    const valueObj: PromptVariable | undefined = promptVariables.find(v => v.key === key)
-    return valueObj ? `{{${valueObj.name}}}` : match
-  })
-}
diff --git a/web/app/components/apps/__tests__/new-app-card.spec.tsx b/web/app/components/apps/__tests__/new-app-card.spec.tsx
deleted file mode 100644
index 4f7b8c4bf92..00000000000
--- a/web/app/components/apps/__tests__/new-app-card.spec.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-
-import CreateAppCard from '../new-app-card'
-
-const mockReplace = vi.fn()
-let mockWorkspacePermissionKeys: string[] = ['app.create_and_management']
-vi.mock('@/next/navigation', () => ({
-  useRouter: () => ({
-    replace: mockReplace,
-  }),
-  useSearchParams: () => new URLSearchParams(),
-}))
-
-vi.mock('@/context/app-context', () => ({
-  useSelector: (selector: (state: { workspacePermissionKeys: string[] }) => unknown) => selector({
-    workspacePermissionKeys: mockWorkspacePermissionKeys,
-  }),
-}))
-
-const mockOnPlanInfoChanged = vi.fn()
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: () => ({
-    onPlanInfoChanged: mockOnPlanInfoChanged,
-  }),
-}))
-
-vi.mock('@/next/dynamic', () => ({
-  default: (importFn: () => Promise<{ default: React.ComponentType }>) => {
-    const fnString = importFn.toString()
-
-    if (fnString.includes('create-app-modal') && !fnString.includes('create-from-dsl-modal')) {
-      return function MockCreateAppModal({ show, onClose, onSuccess, onCreateFromTemplate }: Record<string, unknown>) {
-        if (!show)
-          return null
-        return React.createElement('div', { 'data-testid': 'create-app-modal' }, React.createElement('button', { 'onClick': onClose as () => void, 'data-testid': 'close-create-modal' }, 'Close'), React.createElement('button', { 'onClick': onSuccess as () => void, 'data-testid': 'success-create-modal' }, 'Success'), React.createElement('button', { 'onClick': onCreateFromTemplate as () => void, 'data-testid': 'to-template-modal' }, 'To Template'))
-      }
-    }
-    if (fnString.includes('create-app-dialog')) {
-      return function MockCreateAppTemplateDialog({ show, onClose, onSuccess, onCreateFromBlank }: Record<string, unknown>) {
-        if (!show)
-          return null
-        return React.createElement('div', { 'data-testid': 'create-template-dialog' }, React.createElement('button', { 'onClick': onClose as () => void, 'data-testid': 'close-template-dialog' }, 'Close'), React.createElement('button', { 'onClick': onSuccess as () => void, 'data-testid': 'success-template-dialog' }, 'Success'), React.createElement('button', { 'onClick': onCreateFromBlank as () => void, 'data-testid': 'to-blank-modal' }, 'To Blank'))
-      }
-    }
-    if (fnString.includes('create-from-dsl-modal')) {
-      return function MockCreateFromDSLModal({ show, onClose, onSuccess }: Record<string, unknown>) {
-        if (!show)
-          return null
-        return React.createElement('div', { 'data-testid': 'create-dsl-modal' }, React.createElement('button', { 'onClick': onClose as () => void, 'data-testid': 'close-dsl-modal' }, 'Close'), React.createElement('button', { 'onClick': onSuccess as () => void, 'data-testid': 'success-dsl-modal' }, 'Success'))
-      }
-    }
-    return () => null
-  },
-}))
-
-vi.mock('@/app/components/app/create-from-dsl-modal', () => ({
-  CreateFromDSLModalTab: {
-    FROM_URL: 'from-url',
-  },
-}))
-
-describe('CreateAppCard', () => {
-  const defaultRef = { current: null } as React.RefObject<HTMLDivElement | null>
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockWorkspacePermissionKeys = ['app.create_and_management']
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-      expect(screen.getByText('app.newApp.startFromBlank')).toBeInTheDocument()
-    })
-
-    it('should not render without app.create_and_management permission', () => {
-      mockWorkspacePermissionKeys = []
-
-      const { container } = render(<CreateAppCard ref={defaultRef} />)
-
-      expect(container).toBeEmptyDOMElement()
-    })
-
-    it('should render three create buttons', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      expect(screen.getByText('app.newApp.startFromBlank')).toBeInTheDocument()
-      expect(screen.getByText('app.newApp.startFromTemplate')).toBeInTheDocument()
-      expect(screen.getByText('app.importDSL')).toBeInTheDocument()
-    })
-
-    it('should render all buttons as clickable', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      const buttons = screen.getAllByRole('button')
-      expect(buttons).toHaveLength(3)
-      buttons.forEach((button) => {
-        expect(button).not.toBeDisabled()
-      })
-    })
-  })
-
-  describe('Props', () => {
-    it('should apply custom className', () => {
-      const { container } = render(
-        <CreateAppCard ref={defaultRef} className="custom-class" />,
-      )
-      const card = container.firstChild as HTMLElement
-      expect(card).toHaveClass('custom-class')
-    })
-
-    it('should render with selectedAppType prop', () => {
-      render(<CreateAppCard ref={defaultRef} selectedAppType="chat" />)
-      expect(screen.getByText('app.newApp.startFromBlank')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions - Create App Modal', () => {
-    it('should open create app modal when clicking Start from Blank', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
-
-      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
-    })
-
-    it('should close create app modal when clicking close button', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
-      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('close-create-modal'))
-      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
-    })
-
-    it('should call onSuccess and onPlanInfoChanged on create app success', () => {
-      const mockOnSuccess = vi.fn()
-      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
-      fireEvent.click(screen.getByTestId('success-create-modal'))
-
-      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
-      expect(mockOnSuccess).toHaveBeenCalled()
-    })
-
-    it('should switch from create modal to template dialog', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
-      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('to-template-modal'))
-
-      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
-      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions - Template Dialog', () => {
-    it('should open template dialog when clicking Start from Template', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
-
-      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
-    })
-
-    it('should close template dialog when clicking close button', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
-      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('close-template-dialog'))
-      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
-    })
-
-    it('should call onSuccess and onPlanInfoChanged on template success', () => {
-      const mockOnSuccess = vi.fn()
-      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
-      fireEvent.click(screen.getByTestId('success-template-dialog'))
-
-      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
-      expect(mockOnSuccess).toHaveBeenCalled()
-    })
-
-    it('should switch from template dialog to create modal', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
-      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('to-blank-modal'))
-
-      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
-      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions - DSL Import Modal', () => {
-    it('should open DSL modal when clicking Import DSL', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.importDSL'))
-
-      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
-    })
-
-    it('should close DSL modal when clicking close button', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.importDSL'))
-      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('close-dsl-modal'))
-      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
-    })
-
-    it('should call onSuccess and onPlanInfoChanged on DSL import success', () => {
-      const mockOnSuccess = vi.fn()
-      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
-
-      fireEvent.click(screen.getByText('app.importDSL'))
-      fireEvent.click(screen.getByTestId('success-dsl-modal'))
-
-      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
-      expect(mockOnSuccess).toHaveBeenCalled()
-    })
-  })
-
-  describe('Styling', () => {
-    it('should have correct card container styling', () => {
-      const { container } = render(<CreateAppCard ref={defaultRef} />)
-      const card = container.firstChild as HTMLElement
-
-      expect(card).toHaveClass('h-41.5', 'rounded-xl', 'bg-background-default-dimmed')
-    })
-
-    it('should have proper button styling', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      const buttons = screen.getAllByRole('button')
-      buttons.forEach((button) => {
-        expect(button).toHaveClass('cursor-pointer')
-      })
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle multiple modal opens/closes', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
-      fireEvent.click(screen.getByTestId('close-create-modal'))
-
-      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
-      fireEvent.click(screen.getByTestId('close-template-dialog'))
-
-      fireEvent.click(screen.getByText('app.importDSL'))
-      fireEvent.click(screen.getByTestId('close-dsl-modal'))
-
-      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
-      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
-    })
-
-    it('should handle onSuccess not being provided', () => {
-      render(<CreateAppCard ref={defaultRef} />)
-
-      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
-      expect(() => {
-        fireEvent.click(screen.getByTestId('success-create-modal'))
-      }).not.toThrow()
-
-      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
-    })
-  })
-})
diff --git a/web/app/components/apps/new-app-card.tsx b/web/app/components/apps/new-app-card.tsx
deleted file mode 100644
index bc2c5b767fd..00000000000
--- a/web/app/components/apps/new-app-card.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useContextSelector } from 'use-context-selector'
-import { CreateFromDSLModalTab } from '@/app/components/app/create-from-dsl-modal'
-import CreateResourceCard, {
-  createResourceCardActionClassName,
-  createResourceCardActionIconClassName,
-} from '@/app/components/base/create-resource-card'
-import { useSelector as useAppContextWithSelector } from '@/context/app-context'
-import AppListContext from '@/context/app-list-context'
-import { useProviderContext } from '@/context/provider-context'
-import dynamic from '@/next/dynamic'
-import {
-  useRouter,
-  useSearchParams,
-} from '@/next/navigation'
-import { AppModeEnum } from '@/types/app'
-import { hasPermission } from '@/utils/permission'
-
-const CreateAppModal = dynamic(() => import('@/app/components/app/create-app-modal'), {
-  ssr: false,
-})
-const CreateAppTemplateDialog = dynamic(() => import('@/app/components/app/create-app-dialog'), {
-  ssr: false,
-})
-const CreateFromDSLModal = dynamic(() => import('@/app/components/app/create-from-dsl-modal'), {
-  ssr: false,
-})
-
-type CreateAppCardProps = {
-  className?: string
-  isLoading?: boolean
-  onSuccess?: () => void
-  ref: React.RefObject<HTMLDivElement | null>
-  selectedAppType?: string
-}
-
-const CreateAppCard = ({
-  ref,
-  className,
-  isLoading = false,
-  onSuccess,
-  selectedAppType,
-}: CreateAppCardProps) => {
-  const { t } = useTranslation()
-  const { onPlanInfoChanged } = useProviderContext()
-  const searchParams = useSearchParams()
-  const { replace } = useRouter()
-  const dslUrl = searchParams.get('remoteInstallUrl') || undefined
-  const workspacePermissionKeys = useAppContextWithSelector(state => state.workspacePermissionKeys)
-  const canCreateApp = hasPermission(workspacePermissionKeys, 'app.create_and_management')
-
-  const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false)
-  const [showNewAppModal, setShowNewAppModal] = useState(false)
-  const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(canCreateApp && !!dslUrl)
-
-  const activeTab = useMemo(() => {
-    if (dslUrl)
-      return CreateFromDSLModalTab.FROM_URL
-
-    return undefined
-  }, [dslUrl])
-  const defaultAppMode = useMemo(() => {
-    if (!selectedAppType || selectedAppType === 'all')
-      return undefined
-
-    return Object.values(AppModeEnum).includes(selectedAppType as AppModeEnum)
-      ? selectedAppType as AppModeEnum
-      : undefined
-  }, [selectedAppType])
-
-  const controlHideCreateFromTemplatePanel = useContextSelector(AppListContext, ctx => ctx.controlHideCreateFromTemplatePanel)
-  useEffect(() => {
-    if (controlHideCreateFromTemplatePanel <= 0)
-      return
-
-    let cancelled = false
-    queueMicrotask(() => {
-      if (cancelled)
-        return
-
-      setShowNewAppTemplateDialog(false)
-    })
-
-    return () => {
-      cancelled = true
-    }
-  }, [controlHideCreateFromTemplatePanel])
-
-  useEffect(() => {
-    if (canCreateApp)
-      return
-
-    setShowNewAppModal(false)
-    setShowNewAppTemplateDialog(false)
-    setShowCreateFromDSLModal(false)
-  }, [canCreateApp])
-
-  if (!canCreateApp)
-    return null
-
-  return (
-    <>
-      <CreateResourceCard
-        ref={ref}
-        className={className}
-        isLoading={isLoading}
-        footer={(
-          <button
-            type="button"
-            onClick={() => setShowCreateFromDSLModal(true)}
-            className={createResourceCardActionClassName}
-          >
-            <span aria-hidden="true" className={`i-ri-file-upload-line ${createResourceCardActionIconClassName}`} />
-            <span className="min-w-0 grow truncate">{t('importDSL', { ns: 'app' })}</span>
-          </button>
-        )}
-      >
-        <button type="button" className={createResourceCardActionClassName} onClick={() => setShowNewAppModal(true)}>
-          <span aria-hidden="true" className={`i-ri-sticky-note-add-line ${createResourceCardActionIconClassName}`} />
-          <span className="min-w-0 grow truncate">{t('newApp.startFromBlank', { ns: 'app' })}</span>
-        </button>
-        <button type="button" className={createResourceCardActionClassName} onClick={() => setShowNewAppTemplateDialog(true)}>
-          <span aria-hidden="true" className={`i-ri-function-add-line ${createResourceCardActionIconClassName}`} />
-          <span className="min-w-0 grow truncate">{t('newApp.startFromTemplate', { ns: 'app' })}</span>
-        </button>
-      </CreateResourceCard>
-      {showNewAppModal && (
-        <CreateAppModal
-          show={showNewAppModal}
-          onClose={() => setShowNewAppModal(false)}
-          onSuccess={() => {
-            onPlanInfoChanged()
-            if (onSuccess)
-              onSuccess()
-          }}
-          onCreateFromTemplate={() => {
-            setShowNewAppTemplateDialog(true)
-            setShowNewAppModal(false)
-          }}
-          defaultAppMode={defaultAppMode}
-        />
-      )}
-      {showNewAppTemplateDialog && (
-        <CreateAppTemplateDialog
-          show={showNewAppTemplateDialog}
-          onClose={() => setShowNewAppTemplateDialog(false)}
-          onSuccess={() => {
-            onPlanInfoChanged()
-            if (onSuccess)
-              onSuccess()
-          }}
-          onCreateFromBlank={() => {
-            setShowNewAppModal(true)
-            setShowNewAppTemplateDialog(false)
-          }}
-        />
-      )}
-      {showCreateFromDSLModal && (
-        <CreateFromDSLModal
-          show={showCreateFromDSLModal}
-          onClose={() => {
-            setShowCreateFromDSLModal(false)
-
-            if (dslUrl)
-              replace('/apps')
-          }}
-          activeTab={activeTab}
-          dslUrl={dslUrl}
-          onSuccess={() => {
-            onPlanInfoChanged()
-            if (onSuccess)
-              onSuccess()
-          }}
-        />
-      )}
-    </>
-  )
-}
-
-CreateAppCard.displayName = 'CreateAppCard'
-
-export default React.memo(CreateAppCard)
diff --git a/web/app/components/base/create-resource-card.tsx b/web/app/components/base/create-resource-card.tsx
deleted file mode 100644
index c7ede3ac0e9..00000000000
--- a/web/app/components/base/create-resource-card.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-
-export const createResourceCardActionClassName = 'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-left system-sm-medium text-text-tertiary outline-hidden transition-colors hover:bg-background-default-dodge hover:text-text-secondary hover:shadow-xs hover:shadow-shadow-shadow-3 focus-visible:bg-background-default-dodge focus-visible:text-text-secondary focus-visible:shadow-xs focus-visible:shadow-shadow-shadow-3'
-export const createResourceCardActionIconClassName = 'size-4 shrink-0 text-text-tertiary group-hover:text-text-secondary group-focus-visible:text-text-secondary'
-
-type CreateResourceCardProps = {
-  children: React.ReactNode
-  footer: React.ReactNode
-  className?: string
-  isLoading?: boolean
-  ref?: React.RefObject<HTMLDivElement | null>
-}
-
-const CreateResourceCard = ({
-  children,
-  footer,
-  className,
-  isLoading = false,
-  ref,
-}: CreateResourceCardProps) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'relative col-span-1 inline-flex h-41.5 flex-col overflow-hidden rounded-xl bg-background-default-dimmed transition-opacity',
-        isLoading && 'pointer-events-none opacity-50',
-        className,
-      )}
-    >
-      <div className="flex min-h-0 grow flex-col justify-center p-2">
-        <div className="flex w-full flex-col gap-0.5">
-          {children}
-        </div>
-      </div>
-      <div className="flex shrink-0 items-center border-t-[0.5px] border-divider-subtle p-2">
-        {footer}
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(CreateResourceCard)
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/__tests__/index.spec.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/__tests__/index.spec.tsx
deleted file mode 100644
index 3a6be12c585..00000000000
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import MixedVariableTextInput from '../index'
-
-describe('MixedVariableTextInput', () => {
-  it('should render placeholder guidance and data type badge', () => {
-    render(<MixedVariableTextInput />)
-
-    expect(screen.getByText('Type or press')).toBeInTheDocument()
-    expect(screen.getByText('insert variable')).toBeInTheDocument()
-    expect(screen.getByText('String')).toBeInTheDocument()
-  })
-
-  it('should keep placeholder visible when editor is not editable', () => {
-    render(<MixedVariableTextInput editable={false} />)
-    expect(screen.getByText('insert variable')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/__tests__/placeholder.spec.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/__tests__/placeholder.spec.tsx
deleted file mode 100644
index 093131d01fd..00000000000
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/__tests__/placeholder.spec.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { EditorState } from 'lexical'
-import { LexicalComposer } from '@lexical/react/LexicalComposer'
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { $getRoot } from 'lexical'
-import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
-import Placeholder from '../placeholder'
-
-const config = {
-  namespace: 'placeholder-test',
-  theme: {},
-  nodes: [CustomTextNode],
-  onError: (error: Error) => {
-    throw error
-  },
-}
-
-describe('MixedVariable Placeholder', () => {
-  it('should render helper text and insert variable action', () => {
-    render(
-      <LexicalComposer initialConfig={config}>
-        <Placeholder />
-      </LexicalComposer>,
-    )
-
-    expect(screen.getByText('Type or press')).toBeInTheDocument()
-    expect(screen.getByText('insert variable')).toBeInTheDocument()
-    expect(screen.getByText('String')).toBeInTheDocument()
-  })
-
-  it('should render shortcut symbol for variable insertion', () => {
-    render(
-      <LexicalComposer initialConfig={config}>
-        <Placeholder />
-      </LexicalComposer>,
-    )
-
-    expect(screen.getByText('/')).toBeInTheDocument()
-  })
-
-  it('should insert text and keep editor content available after click', async () => {
-    const user = userEvent.setup()
-    let editorText = ''
-    const handleChange = (editorState: EditorState) => {
-      editorState.read(() => {
-        editorText = $getRoot().getTextContent()
-      })
-    }
-
-    render(
-      <LexicalComposer initialConfig={config}>
-        <OnChangePlugin onChange={handleChange} />
-        <Placeholder />
-      </LexicalComposer>,
-    )
-
-    await user.click(screen.getByText('insert variable'))
-
-    expect(editorText).toContain('/')
-  })
-
-  it('should handle container click without breaking the helper UI', async () => {
-    const user = userEvent.setup()
-    render(
-      <LexicalComposer initialConfig={config}>
-        <Placeholder />
-      </LexicalComposer>,
-    )
-
-    await user.click(screen.getByText('Type or press'))
-    expect(screen.getByText('insert variable')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
deleted file mode 100644
index 2f47cb1a0f2..00000000000
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  memo,
-} from 'react'
-import PromptEditor from '@/app/components/base/prompt-editor'
-import Placeholder from './placeholder'
-
-type MixedVariableTextInputProps = {
-  editable?: boolean
-  value?: string
-  onChange?: (text: string) => void
-}
-const MixedVariableTextInput = ({
-  editable = true,
-  value = '',
-  onChange,
-}: MixedVariableTextInputProps) => {
-  return (
-    <PromptEditor
-      wrapperClassName={cn(
-        'rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1',
-        'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-        'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
-      )}
-      className="caret:text-text-accent"
-      editable={editable}
-      value={value}
-      workflowVariableBlock={{
-        show: true,
-        variables: [],
-        workflowNodesMap: {},
-      }}
-      placeholder={<Placeholder />}
-      onChange={onChange}
-    />
-  )
-}
-
-export default memo(MixedVariableTextInput)
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
deleted file mode 100644
index 79c6948dd6d..00000000000
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Kbd } from '@langgenius/dify-ui/kbd'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { $insertNodes, FOCUS_COMMAND } from 'lexical'
-import { useCallback } from 'react'
-import Badge from '@/app/components/base/badge'
-import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
-
-const Placeholder = () => {
-  const [editor] = useLexicalComposerContext()
-
-  const handleInsert = useCallback((text: string) => {
-    editor.update(() => {
-      const textNode = new CustomTextNode(text)
-      $insertNodes([textNode])
-    })
-    editor.dispatchCommand(FOCUS_COMMAND, undefined as any)
-  }, [editor])
-
-  return (
-    <div
-      className="pointer-events-auto flex size-full cursor-text items-center px-2"
-      onClick={(e) => {
-        e.stopPropagation()
-        handleInsert('')
-      }}
-    >
-      <div className="flex grow items-center">
-        Type or press
-        <Kbd className="mx-0.5 text-text-placeholder">/</Kbd>
-        <div
-          className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
-          onClick={((e) => {
-            e.stopPropagation()
-            handleInsert('/')
-          })}
-        >
-          insert variable
-        </div>
-      </div>
-      <Badge
-        className="shrink-0"
-        text="String"
-        uppercase={false}
-      />
-    </div>
-  )
-}
-
-export default Placeholder
diff --git a/web/app/components/base/form/form-scenarios/base/__tests__/index.spec.tsx b/web/app/components/base/form/form-scenarios/base/__tests__/index.spec.tsx
deleted file mode 100644
index c8d215b1d76..00000000000
--- a/web/app/components/base/form/form-scenarios/base/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import BaseForm from '../index'
-import { BaseFieldType } from '../types'
-
-const baseConfigurations = [{
-  type: BaseFieldType.textInput,
-  variable: 'name',
-  label: 'Name',
-  required: false,
-  showConditions: [],
-}]
-
-describe('BaseForm', () => {
-  it('should render configured fields', () => {
-    render(
-      <BaseForm
-        initialData={{ name: 'Alice' }}
-        configurations={[...baseConfigurations]}
-        onSubmit={() => {}}
-      />,
-    )
-
-    expect(screen.getByRole('textbox')).toBeInTheDocument()
-    expect(screen.getByDisplayValue('Alice')).toBeInTheDocument()
-  })
-
-  it('should submit current form values when submit button is clicked', async () => {
-    const onSubmit = vi.fn()
-    render(
-      <BaseForm
-        initialData={{ name: 'Alice' }}
-        configurations={[...baseConfigurations]}
-        onSubmit={onSubmit}
-        CustomActions={({ form }) => (
-          <button type="button" onClick={() => form.handleSubmit()}>
-            Submit
-          </button>
-        )}
-      />,
-    )
-
-    fireEvent.click(screen.getByRole('button', { name: /submit/i }))
-
-    await waitFor(() => {
-      expect(onSubmit).toHaveBeenCalledWith({ name: 'Alice' })
-    })
-  })
-
-  it('should render custom actions when provided', () => {
-    render(
-      <BaseForm
-        initialData={{ name: 'Alice' }}
-        configurations={[...baseConfigurations]}
-        onSubmit={() => {}}
-        CustomActions={() => <button type="button">Save Form</button>}
-      />,
-    )
-
-    expect(screen.getByRole('button', { name: /save form/i })).toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: /common.operation.submit/i })).not.toBeInTheDocument()
-  })
-
-  it('should handle native form submit and block invalid submission', async () => {
-    const onSubmit = vi.fn()
-    const requiredConfig = [{
-      type: BaseFieldType.textInput,
-      variable: 'name',
-      label: 'Name',
-      required: true,
-      showConditions: [],
-      maxLength: 2,
-    }]
-    const { container } = render(
-      <BaseForm
-        initialData={{ name: 'ok' }}
-        configurations={requiredConfig}
-        onSubmit={onSubmit}
-      />,
-    )
-
-    const form = container.querySelector('form')
-    const input = screen.getByRole('textbox')
-    expect(form).not.toBeNull()
-
-    fireEvent.submit(form!)
-    await waitFor(() => {
-      expect(onSubmit).toHaveBeenCalledWith({ name: 'ok' })
-    })
-
-    fireEvent.change(input, { target: { value: 'long' } })
-    fireEvent.submit(form!)
-    expect(onSubmit).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/base/index.tsx b/web/app/components/base/form/form-scenarios/base/index.tsx
deleted file mode 100644
index 3cc2d197aed..00000000000
--- a/web/app/components/base/form/form-scenarios/base/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { BaseFormProps } from './types'
-import * as React from 'react'
-import { useMemo } from 'react'
-import { useAppForm } from '../..'
-import BaseField from './field'
-import { generateZodSchema } from './utils'
-
-const BaseForm = ({
-  initialData,
-  configurations,
-  onSubmit,
-  CustomActions,
-}: BaseFormProps) => {
-  const schema = useMemo(() => {
-    const schema = generateZodSchema(configurations)
-    return schema
-  }, [configurations])
-
-  const baseForm = useAppForm({
-    defaultValues: initialData,
-    validators: {
-      onChange: ({ value }) => {
-        const result = schema.safeParse(value)
-        if (!result.success) {
-          const issues = result.error.issues
-          const firstIssue = issues[0]!.message
-          return firstIssue
-        }
-        return undefined
-      },
-    },
-    onSubmit: ({ value }) => {
-      onSubmit(value)
-    },
-  })
-
-  return (
-    <form
-      className="w-full"
-      onSubmit={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        baseForm.handleSubmit()
-      }}
-    >
-      <div className="flex flex-col gap-4 px-4 py-2">
-        {configurations.map((config, index) => {
-          const FieldComponent = BaseField({
-            initialData,
-            config,
-          })
-          return <FieldComponent key={index} form={baseForm} />
-        })}
-      </div>
-      <baseForm.AppForm>
-        <baseForm.Actions
-          CustomActions={CustomActions}
-        />
-      </baseForm.AppForm>
-    </form>
-  )
-}
-
-export default React.memo(BaseForm)
diff --git a/web/app/components/base/form/form-scenarios/base/types.ts b/web/app/components/base/form/form-scenarios/base/types.ts
index b9c3dd1b31e..5540b6968b6 100644
--- a/web/app/components/base/form/form-scenarios/base/types.ts
+++ b/web/app/components/base/form/form-scenarios/base/types.ts
@@ -1,5 +1,4 @@
 import type { Option } from '../../components/field/select'
-import type { CustomActionsProps } from '../../components/form/actions'
 import type { TransferMethod } from '@/types/app'
 
 export enum BaseFieldType {
@@ -52,10 +51,3 @@ export type BaseConfiguration = {
 } & NumberConfiguration
 & Partial<SelectConfiguration>
 & Partial<FileConfiguration>
-
-export type BaseFormProps = {
-  initialData?: Record<string, any>
-  configurations: BaseConfiguration[]
-  CustomActions?: (props: CustomActionsProps) => React.ReactNode
-  onSubmit: (value: Record<string, any>) => void
-}
diff --git a/web/app/components/base/form/form-scenarios/demo/__tests__/contact-fields.spec.tsx b/web/app/components/base/form/form-scenarios/demo/__tests__/contact-fields.spec.tsx
deleted file mode 100644
index b8f67d58b90..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/__tests__/contact-fields.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { useAppForm } from '../../..'
-import ContactFields from '../contact-fields'
-import { demoFormOpts } from '../shared-options'
-
-const ContactFieldsHarness = () => {
-  const form = useAppForm({
-    ...demoFormOpts,
-    onSubmit: () => {},
-  })
-
-  return <ContactFields form={form} />
-}
-
-describe('ContactFields', () => {
-  it('should render contact section fields', () => {
-    render(<ContactFieldsHarness />)
-
-    expect(screen.getByRole('heading', { name: /contacts/i })).toBeInTheDocument()
-    expect(screen.getByRole('textbox', { name: /email/i })).toBeInTheDocument()
-    expect(screen.getByRole('textbox', { name: /phone/i })).toBeInTheDocument()
-    expect(screen.getByText(/preferred contact method/i)).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/demo/__tests__/index.spec.tsx b/web/app/components/base/form/form-scenarios/demo/__tests__/index.spec.tsx
deleted file mode 100644
index e2a83b7ad4d..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import DemoForm from '../index'
-
-describe('DemoForm', () => {
-  const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should render the primary fields', () => {
-    render(<DemoForm />)
-
-    expect(screen.getByRole('textbox', { name: /^name$/i })).toBeInTheDocument()
-    expect(screen.getByRole('textbox', { name: /^surname$/i })).toBeInTheDocument()
-    expect(screen.getByText(/i accept the terms and conditions/i)).toBeInTheDocument()
-  })
-
-  it('should show contact fields after a name is entered', () => {
-    render(<DemoForm />)
-
-    expect(screen.queryByRole('heading', { name: /contacts/i })).not.toBeInTheDocument()
-
-    fireEvent.change(screen.getByRole('textbox', { name: /^name$/i }), { target: { value: 'Alice' } })
-
-    expect(screen.getByRole('heading', { name: /contacts/i })).toBeInTheDocument()
-  })
-
-  it('should hide contact fields when name is cleared', () => {
-    render(<DemoForm />)
-    const nameInput = screen.getByRole('textbox', { name: /^name$/i })
-
-    fireEvent.change(nameInput, { target: { value: 'Alice' } })
-    expect(screen.getByRole('heading', { name: /contacts/i })).toBeInTheDocument()
-
-    fireEvent.change(nameInput, { target: { value: '' } })
-    expect(screen.queryByRole('heading', { name: /contacts/i })).not.toBeInTheDocument()
-  })
-
-  it('should log validation errors on invalid submit', () => {
-    render(<DemoForm />)
-    const nameInput = screen.getByRole('textbox', { name: /^name$/i }) as HTMLInputElement
-
-    fireEvent.submit(nameInput.form!)
-
-    return waitFor(() => {
-      expect(consoleLogSpy).toHaveBeenCalledWith('Validation errors:', expect.any(Array))
-    })
-  })
-
-  it('should log submitted values on valid submit', () => {
-    render(<DemoForm />)
-    const nameInput = screen.getByRole('textbox', { name: /^name$/i }) as HTMLInputElement
-
-    fireEvent.change(nameInput, { target: { value: 'Alice' } })
-    fireEvent.change(screen.getByRole('textbox', { name: /^surname$/i }), { target: { value: 'Smith' } })
-    fireEvent.click(screen.getByText(/i accept the terms and conditions/i))
-    fireEvent.change(screen.getByRole('textbox', { name: /email/i }), { target: { value: 'alice@example.com' } })
-    fireEvent.submit(nameInput.form!)
-
-    return waitFor(() => {
-      expect(consoleLogSpy).toHaveBeenCalledWith('Form submitted:', expect.objectContaining({
-        name: 'Alice',
-        surname: 'Smith',
-        isAcceptingTerms: true,
-      }))
-    })
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/demo/__tests__/shared-options.spec.tsx b/web/app/components/base/form/form-scenarios/demo/__tests__/shared-options.spec.tsx
deleted file mode 100644
index 70e078fcf54..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/__tests__/shared-options.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { demoFormOpts } from '../shared-options'
-
-describe('demoFormOpts', () => {
-  it('should provide expected default values', () => {
-    expect(demoFormOpts.defaultValues).toEqual({
-      name: '',
-      surname: '',
-      isAcceptingTerms: false,
-      contact: {
-        email: '',
-        phone: '',
-        preferredContactMethod: 'email',
-      },
-    })
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/demo/__tests__/types.spec.ts b/web/app/components/base/form/form-scenarios/demo/__tests__/types.spec.ts
deleted file mode 100644
index e164a190c84..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/__tests__/types.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ContactMethods, UserSchema } from '../types'
-
-describe('demo scenario types', () => {
-  it('should expose contact methods with capitalized labels', () => {
-    expect(ContactMethods).toEqual([
-      { value: 'email', label: 'Email' },
-      { value: 'phone', label: 'Phone' },
-      { value: 'whatsapp', label: 'Whatsapp' },
-      { value: 'sms', label: 'Sms' },
-    ])
-  })
-
-  it('should validate a complete user payload', () => {
-    expect(UserSchema.safeParse({
-      name: 'Alice',
-      surname: 'Smith',
-      isAcceptingTerms: true,
-      contact: {
-        email: 'alice@example.com',
-        phone: '',
-        preferredContactMethod: 'email',
-      },
-    }).success).toBe(true)
-  })
-
-  it('should reject invalid user payload', () => {
-    const result = UserSchema.safeParse({
-      name: 'alice',
-      surname: 's',
-      isAcceptingTerms: false,
-      contact: {
-        email: 'invalid',
-        preferredContactMethod: 'email',
-      },
-    })
-
-    expect(result.success).toBe(false)
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/demo/contact-fields.tsx b/web/app/components/base/form/form-scenarios/demo/contact-fields.tsx
deleted file mode 100644
index f44e9e90580..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/contact-fields.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { withForm } from '../..'
-import { demoFormOpts } from './shared-options'
-import { ContactMethods } from './types'
-
-const ContactFields = withForm({
-  ...demoFormOpts,
-  render: ({ form }) => {
-    return (
-      <div className="my-2">
-        <h3 className="title-lg-bold text-text-primary">Contacts</h3>
-        <div className="flex flex-col gap-4">
-          <form.AppField
-            name="contact.email"
-            children={field => <field.TextField label="Email" />}
-          />
-          <form.AppField
-            name="contact.phone"
-            children={field => <field.TextField label="Phone" />}
-          />
-          <form.AppField
-            name="contact.preferredContactMethod"
-            children={field => (
-              <field.SelectField
-                label="Preferred Contact Method"
-                options={ContactMethods}
-              />
-            )}
-          />
-        </div>
-      </div>
-    )
-  },
-})
-
-export default ContactFields
diff --git a/web/app/components/base/form/form-scenarios/demo/index.tsx b/web/app/components/base/form/form-scenarios/demo/index.tsx
deleted file mode 100644
index 44f59b67138..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useStore } from '@tanstack/react-form'
-import { useAppForm } from '../..'
-import ContactFields from './contact-fields'
-import { demoFormOpts } from './shared-options'
-import { UserSchema } from './types'
-
-const DemoForm = () => {
-  const form = useAppForm({
-    ...demoFormOpts,
-    validators: {
-      onSubmit: ({ value }) => {
-        // Validate the entire form
-        const result = UserSchema.safeParse(value)
-        if (!result.success) {
-          const issues = result.error.issues
-          console.log('Validation errors:', issues)
-          return issues[0]!.message
-        }
-        return undefined
-      },
-    },
-    onSubmit: ({ value }) => {
-      console.log('Form submitted:', value)
-    },
-  })
-
-  const name = useStore(form.store, state => state.values.name)
-
-  return (
-    <form
-      className="flex w-[400px] flex-col gap-4"
-      onSubmit={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
-      <form.AppField
-        name="name"
-        children={field => (
-          <field.TextField label="Name" />
-        )}
-      />
-      <form.AppField
-        name="surname"
-        children={field => (
-          <field.TextField label="Surname" />
-        )}
-      />
-      <form.AppField
-        name="isAcceptingTerms"
-        children={field => (
-          <field.CheckboxField label="I accept the terms and conditions." />
-        )}
-      />
-      {
-        !!name && (
-          <ContactFields form={form} />
-        )
-      }
-      <form.AppForm>
-        <form.Actions />
-      </form.AppForm>
-    </form>
-  )
-}
-
-export default DemoForm
diff --git a/web/app/components/base/form/form-scenarios/demo/shared-options.tsx b/web/app/components/base/form/form-scenarios/demo/shared-options.tsx
deleted file mode 100644
index 8b216c8b904..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/shared-options.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { formOptions } from '@tanstack/react-form'
-
-export const demoFormOpts = formOptions({
-  defaultValues: {
-    name: '',
-    surname: '',
-    isAcceptingTerms: false,
-    contact: {
-      email: '',
-      phone: '',
-      preferredContactMethod: 'email',
-    },
-  },
-})
diff --git a/web/app/components/base/form/form-scenarios/demo/types.ts b/web/app/components/base/form/form-scenarios/demo/types.ts
deleted file mode 100644
index a8aa18b27d4..00000000000
--- a/web/app/components/base/form/form-scenarios/demo/types.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as z from 'zod'
-
-const ContactMethod = z.union([
-  z.literal('email'),
-  z.literal('phone'),
-  z.literal('whatsapp'),
-  z.literal('sms'),
-])
-
-export const ContactMethods = ContactMethod.options.map(({ value }) => ({
-  value,
-  label: value.charAt(0).toUpperCase() + value.slice(1),
-}))
-
-export const UserSchema = z.object({
-  name: z
-    .string()
-    .regex(/^[A-Z]/, 'Name must start with a capital letter')
-    .min(3, 'Name must be at least 3 characters long'),
-  surname: z
-    .string()
-    .min(3, 'Surname must be at least 3 characters long')
-    .regex(/^[A-Z]/, 'Surname must start with a capital letter'),
-  isAcceptingTerms: z.boolean().refine(val => val, {
-    error: 'You must accept the terms and conditions',
-  }),
-  contact: z.object({
-    email: z.email('Invalid email address'),
-    phone: z.string().optional(),
-    preferredContactMethod: ContactMethod,
-  }),
-})
diff --git a/web/app/components/base/form/form-scenarios/input-field/__tests__/utils.spec.ts b/web/app/components/base/form/form-scenarios/input-field/__tests__/utils.spec.ts
deleted file mode 100644
index 575f79559c0..00000000000
--- a/web/app/components/base/form/form-scenarios/input-field/__tests__/utils.spec.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import { InputFieldType } from '../types'
-import { generateZodSchema } from '../utils'
-
-describe('input-field scenario schema generator', () => {
-  it('should validate required text input with max length', () => {
-    const schema = generateZodSchema([{
-      type: InputFieldType.textInput,
-      variable: 'prompt',
-      label: 'Prompt',
-      required: true,
-      maxLength: 5,
-      showConditions: [],
-    }])
-
-    expect(schema.safeParse({ prompt: 'hello' }).success).toBe(true)
-    expect(schema.safeParse({ prompt: '' }).success).toBe(false)
-    expect(schema.safeParse({ prompt: 'longer than five' }).success).toBe(false)
-  })
-
-  it('should validate file types payload shape', () => {
-    const schema = generateZodSchema([{
-      type: InputFieldType.fileTypes,
-      variable: 'files',
-      label: 'Files',
-      required: true,
-      showConditions: [],
-    }])
-
-    expect(schema.safeParse({
-      files: {
-        allowedFileExtensions: 'txt,pdf',
-        allowedFileTypes: ['document'],
-      },
-    }).success).toBe(true)
-
-    expect(schema.safeParse({
-      files: {
-        allowedFileTypes: ['invalid-type'],
-      },
-    }).success).toBe(false)
-  })
-
-  it('should allow optional upload method fields to be omitted', () => {
-    const schema = generateZodSchema([{
-      type: InputFieldType.uploadMethod,
-      variable: 'methods',
-      label: 'Methods',
-      required: false,
-      showConditions: [],
-    }])
-
-    expect(schema.safeParse({}).success).toBe(true)
-  })
-
-  it('should validate numeric bounds and other field type shapes', () => {
-    const schema = generateZodSchema([
-      {
-        type: InputFieldType.numberInput,
-        variable: 'count',
-        label: 'Count',
-        required: true,
-        min: 1,
-        max: 3,
-        showConditions: [],
-      },
-      {
-        type: InputFieldType.numberSlider,
-        variable: 'temperature',
-        label: 'Temperature',
-        required: true,
-        showConditions: [],
-      },
-      {
-        type: InputFieldType.checkbox,
-        variable: 'enabled',
-        label: 'Enabled',
-        required: true,
-        showConditions: [],
-      },
-      {
-        type: InputFieldType.options,
-        variable: 'choices',
-        label: 'Choices',
-        required: true,
-        showConditions: [],
-      },
-      {
-        type: InputFieldType.select,
-        variable: 'mode',
-        label: 'Mode',
-        required: true,
-        showConditions: [],
-      },
-      {
-        type: InputFieldType.inputTypeSelect,
-        variable: 'inputType',
-        label: 'Input Type',
-        required: true,
-        showConditions: [],
-      },
-      {
-        type: InputFieldType.uploadMethod,
-        variable: 'methods',
-        label: 'Methods',
-        required: true,
-        showConditions: [],
-      },
-      {
-        type: 'unsupported' as InputFieldType,
-        variable: 'other',
-        label: 'Other',
-        required: true,
-        showConditions: [],
-      },
-    ])
-
-    expect(schema.safeParse({
-      count: 2,
-      temperature: 0.5,
-      enabled: true,
-      choices: ['a'],
-      mode: 'safe',
-      inputType: 'text',
-      methods: ['local_file'],
-      other: { key: 'value' },
-    }).success).toBe(true)
-
-    expect(schema.safeParse({
-      count: 0,
-      temperature: 0.5,
-      enabled: true,
-      choices: ['a'],
-      mode: 'safe',
-      inputType: 'text',
-      methods: ['local_file'],
-      other: { key: 'value' },
-    }).success).toBe(false)
-
-    expect(schema.safeParse({
-      count: 4,
-      temperature: 0.5,
-      enabled: true,
-      choices: ['a'],
-      mode: 'safe',
-      inputType: 'text',
-      methods: ['local_file'],
-      other: { key: 'value' },
-    }).success).toBe(false)
-  })
-
-  it('should ignore constraints for irrelevant field types', () => {
-    const schema = generateZodSchema([
-      {
-        type: InputFieldType.numberInput,
-        variable: 'num',
-        label: 'Num',
-        required: true,
-        maxLength: 10, // maxLength is for textInput, should be ignored
-        showConditions: [],
-      },
-      {
-        type: InputFieldType.textInput,
-        variable: 'text',
-        label: 'Text',
-        required: true,
-        min: 1, // min is for numberInput, should be ignored
-        max: 5, // max is for numberInput, should be ignored
-        showConditions: [],
-      },
-    ])
-
-    // Should still work based on their base types
-    // num: 12345678901 (violates maxLength: 10 if it were applied)
-    // text: 'long string here' (violates max: 5 if it were applied)
-    expect(schema.safeParse({ num: 12345678901, text: 'long string here' }).success).toBe(true)
-    expect(schema.safeParse({ num: 'not a number', text: 'hello' }).success).toBe(false)
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/input-field/utils.ts b/web/app/components/base/form/form-scenarios/input-field/utils.ts
deleted file mode 100644
index 151d7979b85..00000000000
--- a/web/app/components/base/form/form-scenarios/input-field/utils.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { ZodSchema, ZodString } from 'zod'
-import type { InputFieldConfiguration } from './types'
-import * as z from 'zod'
-import { SupportedFileTypes, TransferMethod } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/schema'
-import { InputFieldType } from './types'
-
-export const generateZodSchema = (fields: InputFieldConfiguration[]) => {
-  const shape: Record<string, ZodSchema> = {}
-
-  fields.forEach((field) => {
-    let zodType
-
-    switch (field.type) {
-      case InputFieldType.textInput:
-        zodType = z.string()
-        break
-      case InputFieldType.numberInput:
-        zodType = z.number()
-        break
-      case InputFieldType.numberSlider:
-        zodType = z.number()
-        break
-      case InputFieldType.checkbox:
-        zodType = z.boolean()
-        break
-      case InputFieldType.options:
-        zodType = z.array(z.string())
-        break
-      case InputFieldType.select:
-        zodType = z.string()
-        break
-      case InputFieldType.fileTypes:
-        zodType = z.object({
-          allowedFileExtensions: z.string().optional(),
-          allowedFileTypes: z.array(SupportedFileTypes),
-        })
-        break
-      case InputFieldType.inputTypeSelect:
-        zodType = z.string()
-        break
-      case InputFieldType.uploadMethod:
-        zodType = z.array(TransferMethod)
-        break
-      default:
-        zodType = z.any()
-        break
-    }
-
-    if (field.maxLength) {
-      if ([InputFieldType.textInput].includes(field.type))
-        zodType = (zodType as ZodString).max(field.maxLength, `${field.label} exceeds max length of ${field.maxLength}`)
-    }
-
-    if (field.min) {
-      if ([InputFieldType.numberInput].includes(field.type))
-        zodType = (zodType as ZodString).min(field.min, `${field.label} must be at least ${field.min}`)
-    }
-
-    if (field.max) {
-      if ([InputFieldType.numberInput].includes(field.type))
-        zodType = (zodType as ZodString).max(field.max, `${field.label} exceeds max value of ${field.max}`)
-    }
-
-    if (field.required) {
-      if ([InputFieldType.textInput].includes(field.type))
-        zodType = (zodType as ZodString).nonempty(`${field.label} is required`)
-    }
-    else {
-      zodType = zodType.optional()
-    }
-
-    shape[field.variable] = zodType
-  })
-
-  return z.object(shape)
-}
diff --git a/web/app/components/base/form/form-scenarios/node-panel/__tests__/field.spec.tsx b/web/app/components/base/form/form-scenarios/node-panel/__tests__/field.spec.tsx
deleted file mode 100644
index 5ec45f3eca6..00000000000
--- a/web/app/components/base/form/form-scenarios/node-panel/__tests__/field.spec.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import type { ReactNode } from 'react'
-import type { InputFieldConfiguration } from '../types'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen } from '@testing-library/react'
-import { useMemo } from 'react'
-import { ReactFlowProvider } from 'reactflow'
-import { useAppForm } from '../../..'
-import NodePanelField from '../field'
-import { InputFieldType } from '../types'
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
-  default: () => <div>Variable Picker</div>,
-}))
-
-const createConfig = (overrides: Partial<InputFieldConfiguration> = {}): InputFieldConfiguration => ({
-  type: InputFieldType.textInput,
-  variable: 'fieldA',
-  label: 'Field A',
-  required: false,
-  showConditions: [],
-  ...overrides,
-})
-
-type FieldHarnessProps = {
-  config: InputFieldConfiguration
-  initialData?: Record<string, unknown>
-}
-
-const FieldHarness = ({ config, initialData = {} }: FieldHarnessProps) => {
-  const form = useAppForm({
-    defaultValues: initialData,
-    onSubmit: () => {},
-  })
-  const Component = useMemo(() => NodePanelField({ initialData, config }), [config, initialData])
-
-  return <Component form={form} />
-}
-
-const NodePanelWrapper = ({ children }: { children: ReactNode }) => {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-      },
-    },
-  })
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ReactFlowProvider>
-        {children}
-      </ReactFlowProvider>
-    </QueryClientProvider>
-  )
-}
-
-const getVisibleText = (text: string) => {
-  const element = screen.getAllByText(text).find(element => !element.classList.contains('sr-only'))
-  expect(element).toBeDefined()
-  return element!
-}
-
-describe('NodePanelField', () => {
-  it('should render text input field', () => {
-    render(<FieldHarness config={createConfig({ label: 'Node Name' })} initialData={{ fieldA: '' }} />)
-
-    expect(screen.getByRole('textbox')).toBeInTheDocument()
-    expect(screen.getByText('Node Name')).toBeInTheDocument()
-  })
-
-  it('should render variable-or-constant field when configured', () => {
-    render(
-      <NodePanelWrapper>
-        <FieldHarness
-          config={createConfig({
-            type: InputFieldType.variableOrConstant,
-            label: 'Mode',
-          })}
-          initialData={{ fieldA: '' }}
-        />
-      </NodePanelWrapper>,
-    )
-
-    expect(screen.getByText('Mode')).toBeInTheDocument()
-  })
-
-  it('should hide field when show conditions are not satisfied', () => {
-    render(
-      <FieldHarness
-        config={createConfig({
-          label: 'Hidden Node Field',
-          showConditions: [{ variable: 'enabled', value: true }],
-        })}
-        initialData={{ enabled: false, fieldA: '' }}
-      />,
-    )
-
-    expect(screen.queryByText('Hidden Node Field')).not.toBeInTheDocument()
-  })
-
-  it('should render other configured field types and hide unsupported type', () => {
-    const scenarios: Array<{ config: InputFieldConfiguration, initialData: Record<string, unknown> }> = [
-      {
-        config: createConfig({ type: InputFieldType.numberInput, label: 'Count', min: 1, max: 3 }),
-        initialData: { fieldA: 2 },
-      },
-      {
-        config: createConfig({ type: InputFieldType.numberSlider, label: 'Temperature', description: 'Adjust' }),
-        initialData: { fieldA: 0.4 },
-      },
-      {
-        config: createConfig({ type: InputFieldType.checkbox, label: 'Enabled' }),
-        initialData: { fieldA: true },
-      },
-      {
-        config: createConfig({ type: InputFieldType.select, label: 'Mode', options: [{ value: 'safe', label: 'Safe' }] }),
-        initialData: { fieldA: 'safe' },
-      },
-      {
-        config: createConfig({ type: InputFieldType.inputTypeSelect, label: 'Input Type', supportFile: true }),
-        initialData: { fieldA: 'text' },
-      },
-      {
-        config: createConfig({ type: InputFieldType.uploadMethod, label: 'Upload Method' }),
-        initialData: { fieldA: ['local_file'] },
-      },
-      {
-        config: createConfig({ type: InputFieldType.fileTypes, label: 'File Types' }),
-        initialData: { fieldA: { allowedFileTypes: ['document'] } },
-      },
-      {
-        config: createConfig({ type: InputFieldType.options, label: 'Options' }),
-        initialData: { fieldA: ['a'] },
-      },
-    ]
-
-    for (const scenario of scenarios) {
-      const { unmount } = render(<FieldHarness config={scenario.config} initialData={scenario.initialData} />)
-      expect(getVisibleText(scenario.config.label)).toBeInTheDocument()
-      unmount()
-    }
-
-    render(
-      <FieldHarness
-        config={createConfig({ type: 'unsupported' as InputFieldType, label: 'Unsupported Node' })}
-        initialData={{ fieldA: '' }}
-      />,
-    )
-    expect(screen.queryByText('Unsupported Node')).not.toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/node-panel/__tests__/types.spec.ts b/web/app/components/base/form/form-scenarios/node-panel/__tests__/types.spec.ts
deleted file mode 100644
index b80e29652de..00000000000
--- a/web/app/components/base/form/form-scenarios/node-panel/__tests__/types.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { InputFieldType } from '../types'
-
-describe('node-panel scenario types', () => {
-  it('should include variableOrConstant field type', () => {
-    expect(Object.values(InputFieldType)).toContain('variableOrConstant')
-  })
-})
diff --git a/web/app/components/base/form/form-scenarios/node-panel/field.tsx b/web/app/components/base/form/form-scenarios/node-panel/field.tsx
deleted file mode 100644
index 6597d8fa32d..00000000000
--- a/web/app/components/base/form/form-scenarios/node-panel/field.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import type { InputFieldConfiguration } from './types'
-import { useStore } from '@tanstack/react-form'
-import * as React from 'react'
-import { withForm } from '../..'
-import { InputFieldType } from './types'
-
-type InputFieldProps = {
-  initialData?: Record<string, any>
-  config: InputFieldConfiguration
-}
-
-const NodePanelField = ({
-  initialData,
-  config,
-}: InputFieldProps) => withForm({
-  defaultValues: initialData,
-  render: function Render({
-    form,
-  }) {
-    const {
-      type,
-      label,
-      placeholder,
-      variable,
-      tooltip,
-      showConditions,
-      max,
-      min,
-      required,
-      showOptional,
-      supportFile,
-      description,
-      options,
-      listeners,
-      popupProps,
-    } = config
-
-    const isAllConditionsMet = useStore(form.store, (state) => {
-      const fieldValues = state.values
-      return showConditions.every((condition) => {
-        const { variable, value } = condition
-        const fieldValue = fieldValues[variable as keyof typeof fieldValues]
-        return fieldValue === value
-      })
-    })
-
-    if (!isAllConditionsMet)
-      return <></>
-
-    if (type === InputFieldType.textInput) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.TextField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-              placeholder={placeholder}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.numberInput) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.NumberInputField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-              placeholder={placeholder}
-              max={max}
-              min={min}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.numberSlider) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.NumberSliderField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-              description={description}
-              max={max}
-              min={min}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.checkbox) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.CheckboxField
-              label={label}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.select) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.SelectField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-              options={options!}
-              popupProps={popupProps}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.inputTypeSelect) {
-      return (
-        <form.AppField
-          name={variable}
-          listeners={listeners}
-          children={field => (
-            <field.InputTypeSelectField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-              supportFile={!!supportFile}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.uploadMethod) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.UploadMethodField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.fileTypes) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.FileTypesField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.options) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.OptionsField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-            />
-          )}
-        />
-      )
-    }
-
-    if (type === InputFieldType.variableOrConstant) {
-      return (
-        <form.AppField
-          name={variable}
-          children={field => (
-            <field.VariableOrConstantInputField
-              label={label}
-              labelOptions={{
-                tooltip,
-                isRequired: required,
-                showOptional,
-              }}
-            />
-          )}
-        />
-      )
-    }
-
-    return <></>
-  },
-})
-
-export default NodePanelField
diff --git a/web/app/components/base/form/form-scenarios/node-panel/types.ts b/web/app/components/base/form/form-scenarios/node-panel/types.ts
deleted file mode 100644
index 0e1e0e82ab8..00000000000
--- a/web/app/components/base/form/form-scenarios/node-panel/types.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { DeepKeys, FieldListeners } from '@tanstack/react-form'
-import type { NumberConfiguration, SelectConfiguration, ShowCondition } from '../base/types'
-
-export enum InputFieldType {
-  textInput = 'textInput',
-  numberInput = 'numberInput',
-  numberSlider = 'numberSlider',
-  checkbox = 'checkbox',
-  options = 'options',
-  select = 'select',
-  inputTypeSelect = 'inputTypeSelect',
-  uploadMethod = 'uploadMethod',
-  fileTypes = 'fileTypes',
-  variableOrConstant = 'variableOrConstant',
-}
-
-type InputTypeSelectConfiguration = {
-  supportFile: boolean
-}
-
-type NumberSliderConfiguration = {
-  description: string
-  max?: number
-  min?: number
-}
-
-export type InputFieldConfiguration = {
-  label: string
-  variable: string // Variable name
-  maxLength?: number // Max length for text input
-  placeholder?: string
-  required: boolean
-  showOptional?: boolean // show optional label
-  showConditions: ShowCondition[] // Show this field only when all conditions are met
-  type: InputFieldType
-  tooltip?: string // Tooltip for this field
-  listeners?: FieldListeners<Record<string, any>, DeepKeys<Record<string, any>>> // Listener for this field
-} & NumberConfiguration & Partial<InputTypeSelectConfiguration>
-& Partial<NumberSliderConfiguration>
-& Partial<SelectConfiguration>
diff --git a/web/app/components/base/form/index.stories.tsx b/web/app/components/base/form/index.stories.tsx
deleted file mode 100644
index 30ecec185b3..00000000000
--- a/web/app/components/base/form/index.stories.tsx
+++ /dev/null
@@ -1,560 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { FormStoryRender } from '../../../../.storybook/utils/form-story-wrapper'
-import type { FormSchema } from './types'
-import { Button } from '@langgenius/dify-ui/button'
-import { useStore } from '@tanstack/react-form'
-import { useMemo, useState } from 'react'
-import { PreviewMode } from '@/app/components/base/features/types'
-import { TransferMethod } from '@/types/app'
-import { FormStoryWrapper } from '../../../../.storybook/utils/form-story-wrapper'
-import BaseForm from './components/base/base-form'
-import ContactFields from './form-scenarios/demo/contact-fields'
-import { demoFormOpts } from './form-scenarios/demo/shared-options'
-import { ContactMethods, UserSchema } from './form-scenarios/demo/types'
-import { FormTypeEnum } from './types'
-
-const FormStoryHost = () => null
-
-const meta = {
-  title: 'Base/Data Entry/AppForm',
-  component: FormStoryHost,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Helper utilities built on top of `@tanstack/react-form` that power form rendering across Dify. These stories demonstrate the `useAppForm` hook, field primitives, conditional visibility, and custom actions.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof FormStoryHost>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-type AppFormInstance = Parameters<FormStoryRender>[0]
-type ContactFieldsProps = React.ComponentProps<typeof ContactFields>
-type ContactFieldsFormApi = ContactFieldsProps['form']
-
-type PlaygroundFormFieldsProps = {
-  form: AppFormInstance
-  status: string
-}
-
-const PlaygroundFormFields = ({ form, status }: PlaygroundFormFieldsProps) => {
-  type PlaygroundFormValues = typeof demoFormOpts.defaultValues
-  const name = useStore(form.store, state => (state.values as PlaygroundFormValues).name)
-  const contactFormApi = form as unknown as ContactFieldsFormApi
-
-  return (
-    <form
-      className="flex w-full max-w-xl flex-col gap-4"
-      onSubmit={(event) => {
-        event.preventDefault()
-        event.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
-      <form.AppField
-        name="name"
-        children={field => (
-          <field.TextField
-            label="Name"
-            placeholder="Start with a capital letter"
-          />
-        )}
-      />
-      <form.AppField
-        name="surname"
-        children={field => (
-          <field.TextField
-            label="Surname"
-            placeholder="Surname must be at least 3 characters"
-          />
-        )}
-      />
-      <form.AppField
-        name="isAcceptingTerms"
-        children={field => (
-          <field.CheckboxField
-            label="I accept the terms and conditions"
-          />
-        )}
-      />
-
-      {!!name && <ContactFields form={contactFormApi} />}
-
-      <form.AppForm>
-        <form.Actions />
-      </form.AppForm>
-
-      <p className="text-xs text-text-tertiary">{status}</p>
-    </form>
-  )
-}
-
-const FormPlayground = () => {
-  const [status, setStatus] = useState('Fill in the form and submit to see results.')
-
-  return (
-    <FormStoryWrapper
-      title="Customer onboarding form"
-      subtitle="Validates with zod and conditionally reveals contact preferences."
-      options={{
-        ...demoFormOpts,
-        validators: {
-          onSubmit: ({ value: formValue }) => {
-            const result = UserSchema.safeParse(formValue as typeof demoFormOpts.defaultValues)
-            if (!result.success)
-              return result.error.issues[0]!.message
-            return undefined
-          },
-        },
-        onSubmit: () => {
-          setStatus('Successfully saved profile.')
-        },
-      }}
-    >
-      {form => <PlaygroundFormFields form={form} status={status} />}
-    </FormStoryWrapper>
-  )
-}
-
-const mockFileUploadConfig = {
-  enabled: true,
-  allowed_file_extensions: ['pdf', 'png'],
-  allowed_file_upload_methods: [TransferMethod.local_file, TransferMethod.remote_url],
-  number_limits: 3,
-  preview_config: {
-    mode: PreviewMode.CurrentPage,
-    file_type_list: ['pdf', 'png'],
-  },
-}
-
-const mockFieldDefaults = {
-  headline: 'Dify App',
-  description: 'Streamline your AI workflows with configurable building blocks.',
-  category: 'workbench',
-  allowNotifications: true,
-  dailyLimit: 40,
-  attachment: [],
-}
-
-const FieldGallery = () => {
-  const selectOptions = useMemo(() => [
-    { value: 'workbench', label: 'Workbench' },
-    { value: 'playground', label: 'Playground' },
-    { value: 'production', label: 'Production' },
-  ], [])
-
-  return (
-    <FormStoryWrapper
-      title="Field gallery"
-      subtitle="Preview the most common field primitives exposed through `form.AppField` helpers."
-      options={{
-        defaultValues: mockFieldDefaults,
-      }}
-    >
-      {form => (
-        <form
-          className="grid w-full max-w-4xl grid-cols-1 gap-4 lg:grid-cols-2"
-          onSubmit={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            form.handleSubmit()
-          }}
-        >
-          <form.AppField
-            name="headline"
-            children={field => (
-              <field.TextField
-                label="Headline"
-                placeholder="Name your experience"
-              />
-            )}
-          />
-          <form.AppField
-            name="description"
-            children={field => (
-              <field.TextAreaField
-                label="Description"
-                placeholder="Describe what this configuration does"
-              />
-            )}
-          />
-          <form.AppField
-            name="category"
-            children={field => (
-              <field.SelectField
-                label="Category"
-                options={selectOptions}
-              />
-            )}
-          />
-          <form.AppField
-            name="allowNotifications"
-            children={field => (
-              <field.CheckboxField label="Enable usage notifications" />
-            )}
-          />
-          <form.AppField
-            name="dailyLimit"
-            children={field => (
-              <field.NumberSliderField
-                label="Daily session limit"
-                description="Control the maximum number of runs per user each day."
-                min={10}
-                max={100}
-              />
-            )}
-          />
-          <form.AppField
-            name="attachment"
-            children={field => (
-              <field.FileUploaderField
-                label="Reference materials"
-                fileConfig={mockFileUploadConfig}
-              />
-            )}
-          />
-          <div className="lg:col-span-2">
-            <form.AppForm>
-              <form.Actions />
-            </form.AppForm>
-          </div>
-        </form>
-      )}
-    </FormStoryWrapper>
-  )
-}
-
-const conditionalSchemas: FormSchema[] = [
-  {
-    type: FormTypeEnum.select,
-    name: 'channel',
-    label: 'Preferred channel',
-    required: true,
-    default: 'email',
-    options: ContactMethods,
-  },
-  {
-    type: FormTypeEnum.textInput,
-    name: 'contactEmail',
-    label: 'Email address',
-    required: true,
-    placeholder: 'user@example.com',
-    show_on: [{ variable: 'channel', value: 'email' }],
-  },
-  {
-    type: FormTypeEnum.textInput,
-    name: 'contactPhone',
-    label: 'Phone number',
-    required: true,
-    placeholder: '+1 555 123 4567',
-    show_on: [{ variable: 'channel', value: 'phone' }],
-  },
-  {
-    type: FormTypeEnum.boolean,
-    name: 'optIn',
-    label: 'Opt in to marketing messages',
-    required: false,
-  },
-]
-
-const ConditionalFieldsStory = () => {
-  const [values, setValues] = useState<Record<string, unknown>>({
-    channel: 'email',
-    optIn: false,
-  })
-
-  return (
-    <div className="flex flex-col gap-6 px-6 md:flex-row md:px-10">
-      <div className="flex-1 rounded-xl border border-divider-subtle bg-components-panel-bg p-5 shadow-sm">
-        <BaseForm
-          formSchemas={conditionalSchemas}
-          defaultValues={values}
-          formClassName="flex flex-col gap-4"
-          onChange={(field, value) => {
-            setValues(prev => ({
-              ...prev,
-              [field]: value,
-            }))
-          }}
-        />
-      </div>
-      <aside className="w-full max-w-sm rounded-xl border border-divider-subtle bg-components-panel-bg p-4 text-xs text-text-secondary shadow-sm">
-        <h3 className="text-sm font-semibold text-text-primary">Live values</h3>
-        <p className="mb-2 text-[11px] text-text-tertiary">`show_on` rules hide or reveal inputs without losing track of the form state.</p>
-        <pre className="max-h-48 overflow-auto rounded-md bg-background-default-subtle p-3 font-mono text-[11px] leading-tight text-text-primary">
-          {JSON.stringify(values, null, 2)}
-        </pre>
-      </aside>
-    </div>
-  )
-}
-
-const CustomActionsStory = () => {
-  return (
-    <FormStoryWrapper
-      title="Custom footer actions"
-      subtitle="Override the default submit button to add reset or secondary operations."
-      options={{
-        defaultValues: {
-          datasetName: 'Support FAQ',
-          datasetDescription: 'Knowledge base snippets sourced from Zendesk exports.',
-        },
-        validators: {
-          onChange: ({ value }) => {
-            const nextValues = value as { datasetName?: string }
-            if (!nextValues.datasetName || nextValues.datasetName.length < 3)
-              return 'Dataset name must contain at least 3 characters.'
-            return undefined
-          },
-        },
-      }}
-    >
-      {form => (
-        <form
-          className="flex w-full max-w-xl flex-col gap-4"
-          onSubmit={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            form.handleSubmit()
-          }}
-        >
-          <form.AppField
-            name="datasetName"
-            children={field => (
-              <field.TextField
-                label="Dataset name"
-                placeholder="Support knowledge base"
-              />
-            )}
-          />
-          <form.AppField
-            name="datasetDescription"
-            children={field => (
-              <field.TextAreaField
-                label="Description"
-                placeholder="Add a helpful summary for collaborators"
-              />
-            )}
-          />
-          <form.AppForm>
-            <form.Actions
-              CustomActions={({ form: appForm, isSubmitting, canSubmit }) => (
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="ghost"
-                    onClick={() => appForm.reset()}
-                    disabled={isSubmitting}
-                  >
-                    Reset
-                  </Button>
-                  <Button
-                    variant="tertiary"
-                    onClick={() => {
-                      appForm.handleSubmit()
-                    }}
-                    disabled={!canSubmit}
-                    loading={isSubmitting}
-                  >
-                    Save draft
-                  </Button>
-                  <Button
-                    variant="primary"
-                    onClick={() => appForm.handleSubmit()}
-                    disabled={!canSubmit}
-                    loading={isSubmitting}
-                  >
-                    Publish
-                  </Button>
-                </div>
-              )}
-            />
-          </form.AppForm>
-        </form>
-      )}
-    </FormStoryWrapper>
-  )
-}
-
-export const Playground: Story = {
-  render: () => <FormPlayground />,
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-        code: `
-const form = useAppForm({
-  ...demoFormOpts,
-  validators: {
-    onSubmit: ({ value }) => UserSchema.safeParse(value).success ? undefined : 'Validation failed',
-  },
-  onSubmit: ({ value }) => {
-    setStatus(\`Successfully saved profile for \${value.name}\`)
-  },
-})
-
-return (
-  <form onSubmit={handleSubmit}>
-    <form.AppField name="name">
-      {field => <field.TextField label="Name" placeholder="Start with a capital letter" />}
-    </form.AppField>
-    <form.AppField name="surname">
-      {field => <field.TextField label="Surname" />}
-    </form.AppField>
-    <form.AppField name="isAcceptingTerms">
-      {field => <field.CheckboxField label="I accept the terms and conditions" />}
-    </form.AppField>
-    {!!form.store.state.values.name && <ContactFields form={form} />}
-    <form.AppForm>
-      <form.Actions />
-    </form.AppForm>
-  </form>
-)
-        `.trim(),
-      },
-    },
-  },
-}
-
-export const FieldExplorer: Story = {
-  render: () => <FieldGallery />,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-      navigation: {
-        pathname: '/apps/demo-app/form',
-        params: { appId: 'demo-app' },
-      },
-    },
-    docs: {
-      source: {
-        language: 'tsx',
-        code: `
-const form = useAppForm({
-  defaultValues: {
-    headline: 'Dify App',
-    description: 'Streamline your AI workflows',
-    category: 'workbench',
-    allowNotifications: true,
-    dailyLimit: 40,
-    attachment: [],
-  },
-})
-
-return (
-  <form className="grid grid-cols-1 gap-4 lg:grid-cols-2" onSubmit={handleSubmit}>
-    <form.AppField name="headline">
-      {field => <field.TextField label="Headline" />}
-    </form.AppField>
-    <form.AppField name="description">
-      {field => <field.TextAreaField label="Description" />}
-    </form.AppField>
-    <form.AppField name="category">
-      {field => <field.SelectField label="Category" options={selectOptions} />}
-    </form.AppField>
-    <form.AppField name="allowNotifications">
-      {field => <field.CheckboxField label="Enable usage notifications" />}
-    </form.AppField>
-    <form.AppField name="dailyLimit">
-      {field => <field.NumberSliderField label="Daily session limit" min={10} max={100} step={10} />}
-    </form.AppField>
-    <form.AppField name="attachment">
-      {field => <field.FileUploaderField label="Reference materials" fileConfig={mockFileUploadConfig} />}
-    </form.AppField>
-    <form.AppForm>
-      <form.Actions />
-    </form.AppForm>
-  </form>
-)
-        `.trim(),
-      },
-    },
-  },
-}
-
-export const ConditionalVisibility: Story = {
-  render: () => <ConditionalFieldsStory />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demonstrates schema-driven visibility using `show_on` conditions rendered through the reusable `BaseForm` component.',
-      },
-      source: {
-        language: 'tsx',
-        code: `
-const conditionalSchemas: FormSchema[] = [
-  { type: FormTypeEnum.select, name: 'channel', label: 'Preferred channel', options: ContactMethods },
-  { type: FormTypeEnum.textInput, name: 'contactEmail', label: 'Email', show_on: [{ variable: 'channel', value: 'email' }] },
-  { type: FormTypeEnum.textInput, name: 'contactPhone', label: 'Phone', show_on: [{ variable: 'channel', value: 'phone' }] },
-  { type: FormTypeEnum.boolean, name: 'optIn', label: 'Opt in to marketing messages' },
-]
-
-return (
-  <BaseForm
-    formSchemas={conditionalSchemas}
-    defaultValues={{ channel: 'email', optIn: false }}
-    formClassName="flex flex-col gap-4"
-    onChange={(field, value) => setValues(prev => ({ ...prev, [field]: value }))}
-  />
-)
-        `.trim(),
-      },
-    },
-  },
-}
-
-export const CustomActions: Story = {
-  render: () => <CustomActionsStory />,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows how to replace the default submit button with a fully custom footer leveraging contextual form state.',
-      },
-      source: {
-        language: 'tsx',
-        code: `
-const form = useAppForm({
-  defaultValues: {
-    datasetName: 'Support FAQ',
-    datasetDescription: 'Knowledge base snippets sourced from Zendesk exports.',
-  },
-  validators: {
-    onChange: ({ value }) => value.datasetName?.length >= 3 ? undefined : 'Dataset name must contain at least 3 characters.',
-  },
-})
-
-return (
-  <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-    <form.AppField name="datasetName">
-      {field => <field.TextField label="Dataset name" />}
-    </form.AppField>
-    <form.AppField name="datasetDescription">
-      {field => <field.TextAreaField label="Description" />}
-    </form.AppField>
-    <form.AppForm>
-      <form.Actions
-        CustomActions={({ form: appForm, isSubmitting, canSubmit }) => (
-          <div className="flex items-center gap-2">
-            <Button variant="ghost" onClick={() => appForm.reset()} disabled={isSubmitting}>
-              Reset
-            </Button>
-            <Button variant="tertiary" onClick={() => appForm.handleSubmit()} disabled={!canSubmit} loading={isSubmitting}>
-              Save draft
-            </Button>
-            <Button variant="primary" onClick={() => appForm.handleSubmit()} disabled={!canSubmit} loading={isSubmitting}>
-              Publish
-            </Button>
-          </div>
-        )}
-      />
-    </form.AppForm>
-  </form>
-)
-        `.trim(),
-      },
-    },
-  },
-}
diff --git a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.module.css b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.module.css
deleted file mode 100644
index 97ab9b22f90..00000000000
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/baichuan-text-cn.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
deleted file mode 100644
index 997efd51be8..00000000000
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './BaichuanTextCn.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'BaichuanTextCn'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/Minimax.module.css b/web/app/components/base/icons/src/image/llm/Minimax.module.css
deleted file mode 100644
index 551ecc3c62e..00000000000
--- a/web/app/components/base/icons/src/image/llm/Minimax.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/minimax.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/Minimax.tsx b/web/app/components/base/icons/src/image/llm/Minimax.tsx
deleted file mode 100644
index 70e7f609f8c..00000000000
--- a/web/app/components/base/icons/src/image/llm/Minimax.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './Minimax.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'Minimax'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/MinimaxText.module.css b/web/app/components/base/icons/src/image/llm/MinimaxText.module.css
deleted file mode 100644
index a63be49e8b0..00000000000
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/minimax-text.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
deleted file mode 100644
index 3b4bf560048..00000000000
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './MinimaxText.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'MinimaxText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/Tongyi.module.css b/web/app/components/base/icons/src/image/llm/Tongyi.module.css
deleted file mode 100644
index 3ca440768ca..00000000000
--- a/web/app/components/base/icons/src/image/llm/Tongyi.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/tongyi.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/Tongyi.tsx b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
deleted file mode 100644
index de59f86e3ad..00000000000
--- a/web/app/components/base/icons/src/image/llm/Tongyi.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './Tongyi.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'Tongyi'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/TongyiText.module.css b/web/app/components/base/icons/src/image/llm/TongyiText.module.css
deleted file mode 100644
index f7136718080..00000000000
--- a/web/app/components/base/icons/src/image/llm/TongyiText.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/tongyi-text.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/TongyiText.tsx b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
deleted file mode 100644
index b38d801fa44..00000000000
--- a/web/app/components/base/icons/src/image/llm/TongyiText.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './TongyiText.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'TongyiText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/TongyiTextCn.module.css b/web/app/components/base/icons/src/image/llm/TongyiTextCn.module.css
deleted file mode 100644
index d07e6e8bc4f..00000000000
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/tongyi-text-cn.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
deleted file mode 100644
index 2a427bb4bd4..00000000000
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './TongyiTextCn.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'TongyiTextCn'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/Wxyy.module.css b/web/app/components/base/icons/src/image/llm/Wxyy.module.css
deleted file mode 100644
index 44344a495f0..00000000000
--- a/web/app/components/base/icons/src/image/llm/Wxyy.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/wxyy.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/Wxyy.tsx b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
deleted file mode 100644
index a146250f101..00000000000
--- a/web/app/components/base/icons/src/image/llm/Wxyy.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './Wxyy.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'Wxyy'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/WxyyText.module.css b/web/app/components/base/icons/src/image/llm/WxyyText.module.css
deleted file mode 100644
index 58a0c62047a..00000000000
--- a/web/app/components/base/icons/src/image/llm/WxyyText.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/wxyy-text.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/WxyyText.tsx b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
deleted file mode 100644
index 8007ee27a34..00000000000
--- a/web/app/components/base/icons/src/image/llm/WxyyText.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './WxyyText.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'WxyyText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/image/llm/WxyyTextCn.module.css b/web/app/components/base/icons/src/image/llm/WxyyTextCn.module.css
deleted file mode 100644
index fb5839ab078..00000000000
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.wrapper {
-  display: inline-flex;
-  background: url(~@/app/components/base/icons/assets/image/llm/wxyy-text-cn.png) center center no-repeat;
-  background-size: contain;
-}
diff --git a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
deleted file mode 100644
index 835ce6737b9..00000000000
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import s from './WxyyTextCn.module.css'
-
-const Icon = (
-  {
-    ref,
-    className,
-    ...restProps
-  }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
-    ref?: React.RefObject<HTMLSpanElement>
-  },
-) => <span className={cn(s.wrapper, className)} {...restProps} ref={ref} />
-
-Icon.displayName = 'WxyyTextCn'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/ArCube1.tsx b/web/app/components/base/icons/src/public/billing/ArCube1.tsx
deleted file mode 100644
index 5bdb08ed240..00000000000
--- a/web/app/components/base/icons/src/public/billing/ArCube1.tsx
+++ /dev/null
@@ -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 './ArCube1.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ArCube1'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/Asterisk.tsx b/web/app/components/base/icons/src/public/billing/Asterisk.tsx
deleted file mode 100644
index ec1a1112dd3..00000000000
--- a/web/app/components/base/icons/src/public/billing/Asterisk.tsx
+++ /dev/null
@@ -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 './Asterisk.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Asterisk'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/Buildings.tsx b/web/app/components/base/icons/src/public/billing/Buildings.tsx
deleted file mode 100644
index fbcc74a7687..00000000000
--- a/web/app/components/base/icons/src/public/billing/Buildings.tsx
+++ /dev/null
@@ -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 './Buildings.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Buildings'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/Diamond.tsx b/web/app/components/base/icons/src/public/billing/Diamond.tsx
deleted file mode 100644
index bdaf95d16d7..00000000000
--- a/web/app/components/base/icons/src/public/billing/Diamond.tsx
+++ /dev/null
@@ -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 './Diamond.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Diamond'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/Group2.tsx b/web/app/components/base/icons/src/public/billing/Group2.tsx
deleted file mode 100644
index b1bd019b72d..00000000000
--- a/web/app/components/base/icons/src/public/billing/Group2.tsx
+++ /dev/null
@@ -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 './Group2.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Group2'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/Keyframe.tsx b/web/app/components/base/icons/src/public/billing/Keyframe.tsx
deleted file mode 100644
index c179a7110d6..00000000000
--- a/web/app/components/base/icons/src/public/billing/Keyframe.tsx
+++ /dev/null
@@ -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 './Keyframe.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Keyframe'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/Sparkles.tsx b/web/app/components/base/icons/src/public/billing/Sparkles.tsx
deleted file mode 100644
index 0f8e6826747..00000000000
--- a/web/app/components/base/icons/src/public/billing/Sparkles.tsx
+++ /dev/null
@@ -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 './Sparkles.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Sparkles'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/billing/SparklesSoft.tsx b/web/app/components/base/icons/src/public/billing/SparklesSoft.tsx
deleted file mode 100644
index 2ec563939db..00000000000
--- a/web/app/components/base/icons/src/public/billing/SparklesSoft.tsx
+++ /dev/null
@@ -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 './SparklesSoft.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'SparklesSoft'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/common/D.tsx b/web/app/components/base/icons/src/public/common/D.tsx
deleted file mode 100644
index 661973acf97..00000000000
--- a/web/app/components/base/icons/src/public/common/D.tsx
+++ /dev/null
@@ -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 './D.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'D'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/common/DiagonalDividingLine.tsx b/web/app/components/base/icons/src/public/common/DiagonalDividingLine.tsx
deleted file mode 100644
index 8eb78ca77b1..00000000000
--- a/web/app/components/base/icons/src/public/common/DiagonalDividingLine.tsx
+++ /dev/null
@@ -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 './DiagonalDividingLine.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'DiagonalDividingLine'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/common/Dify.tsx b/web/app/components/base/icons/src/public/common/Dify.tsx
deleted file mode 100644
index 80863642109..00000000000
--- a/web/app/components/base/icons/src/public/common/Dify.tsx
+++ /dev/null
@@ -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 './Dify.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Dify'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/common/Lock.tsx b/web/app/components/base/icons/src/public/common/Lock.tsx
deleted file mode 100644
index dade03457fe..00000000000
--- a/web/app/components/base/icons/src/public/common/Lock.tsx
+++ /dev/null
@@ -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 './Lock.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Lock'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/common/MessageChatSquare.tsx b/web/app/components/base/icons/src/public/common/MessageChatSquare.tsx
deleted file mode 100644
index c2290611036..00000000000
--- a/web/app/components/base/icons/src/public/common/MessageChatSquare.tsx
+++ /dev/null
@@ -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 './MessageChatSquare.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'MessageChatSquare'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/common/MultiPathRetrieval.tsx b/web/app/components/base/icons/src/public/common/MultiPathRetrieval.tsx
deleted file mode 100644
index 3d0b062de96..00000000000
--- a/web/app/components/base/icons/src/public/common/MultiPathRetrieval.tsx
+++ /dev/null
@@ -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 './MultiPathRetrieval.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'MultiPathRetrieval'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/common/NTo1Retrieval.tsx b/web/app/components/base/icons/src/public/common/NTo1Retrieval.tsx
deleted file mode 100644
index 79206167e6f..00000000000
--- a/web/app/components/base/icons/src/public/common/NTo1Retrieval.tsx
+++ /dev/null
@@ -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 './NTo1Retrieval.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'NTo1Retrieval'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/knowledge/File.tsx b/web/app/components/base/icons/src/public/knowledge/File.tsx
deleted file mode 100644
index f4ddceac0d4..00000000000
--- a/web/app/components/base/icons/src/public/knowledge/File.tsx
+++ /dev/null
@@ -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 './File.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'File'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/knowledge/Watercrawl.tsx b/web/app/components/base/icons/src/public/knowledge/Watercrawl.tsx
deleted file mode 100644
index 9fa625d2091..00000000000
--- a/web/app/components/base/icons/src/public/knowledge/Watercrawl.tsx
+++ /dev/null
@@ -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 './Watercrawl.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Watercrawl'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/knowledge/dataset-card/Graph.tsx b/web/app/components/base/icons/src/public/knowledge/dataset-card/Graph.tsx
deleted file mode 100644
index 1ed1e08df0f..00000000000
--- a/web/app/components/base/icons/src/public/knowledge/dataset-card/Graph.tsx
+++ /dev/null
@@ -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 './Graph.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Graph'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Anthropic.tsx b/web/app/components/base/icons/src/public/llm/Anthropic.tsx
deleted file mode 100644
index b6c4ec8a632..00000000000
--- a/web/app/components/base/icons/src/public/llm/Anthropic.tsx
+++ /dev/null
@@ -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 './Anthropic.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Anthropic'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/AnthropicText.tsx b/web/app/components/base/icons/src/public/llm/AnthropicText.tsx
deleted file mode 100644
index 601bdf78438..00000000000
--- a/web/app/components/base/icons/src/public/llm/AnthropicText.tsx
+++ /dev/null
@@ -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 './AnthropicText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AnthropicText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/AzureOpenaiService.tsx b/web/app/components/base/icons/src/public/llm/AzureOpenaiService.tsx
deleted file mode 100644
index 15630624c89..00000000000
--- a/web/app/components/base/icons/src/public/llm/AzureOpenaiService.tsx
+++ /dev/null
@@ -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 './AzureOpenaiService.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AzureOpenaiService'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/AzureOpenaiServiceText.tsx b/web/app/components/base/icons/src/public/llm/AzureOpenaiServiceText.tsx
deleted file mode 100644
index 30cda7f5bf2..00000000000
--- a/web/app/components/base/icons/src/public/llm/AzureOpenaiServiceText.tsx
+++ /dev/null
@@ -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 './AzureOpenaiServiceText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AzureOpenaiServiceText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Azureai.tsx b/web/app/components/base/icons/src/public/llm/Azureai.tsx
deleted file mode 100644
index 71a460b7ab9..00000000000
--- a/web/app/components/base/icons/src/public/llm/Azureai.tsx
+++ /dev/null
@@ -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 './Azureai.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Azureai'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/AzureaiText.tsx b/web/app/components/base/icons/src/public/llm/AzureaiText.tsx
deleted file mode 100644
index e54487a28f0..00000000000
--- a/web/app/components/base/icons/src/public/llm/AzureaiText.tsx
+++ /dev/null
@@ -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 './AzureaiText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AzureaiText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Baichuan.tsx b/web/app/components/base/icons/src/public/llm/Baichuan.tsx
deleted file mode 100644
index 886eeed91ef..00000000000
--- a/web/app/components/base/icons/src/public/llm/Baichuan.tsx
+++ /dev/null
@@ -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 './Baichuan.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Baichuan'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/BaichuanText.tsx b/web/app/components/base/icons/src/public/llm/BaichuanText.tsx
deleted file mode 100644
index 1ee7647f9e7..00000000000
--- a/web/app/components/base/icons/src/public/llm/BaichuanText.tsx
+++ /dev/null
@@ -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 './BaichuanText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'BaichuanText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Chatglm.tsx b/web/app/components/base/icons/src/public/llm/Chatglm.tsx
deleted file mode 100644
index 3d570213e48..00000000000
--- a/web/app/components/base/icons/src/public/llm/Chatglm.tsx
+++ /dev/null
@@ -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 './Chatglm.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Chatglm'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/ChatglmText.tsx b/web/app/components/base/icons/src/public/llm/ChatglmText.tsx
deleted file mode 100644
index ce52e6b3792..00000000000
--- a/web/app/components/base/icons/src/public/llm/ChatglmText.tsx
+++ /dev/null
@@ -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 './ChatglmText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ChatglmText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Cohere.tsx b/web/app/components/base/icons/src/public/llm/Cohere.tsx
deleted file mode 100644
index 8509a3c6425..00000000000
--- a/web/app/components/base/icons/src/public/llm/Cohere.tsx
+++ /dev/null
@@ -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 './Cohere.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Cohere'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/CohereText.tsx b/web/app/components/base/icons/src/public/llm/CohereText.tsx
deleted file mode 100644
index d065673e91e..00000000000
--- a/web/app/components/base/icons/src/public/llm/CohereText.tsx
+++ /dev/null
@@ -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 './CohereText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CohereText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Gpt3.tsx b/web/app/components/base/icons/src/public/llm/Gpt3.tsx
deleted file mode 100644
index f709a574924..00000000000
--- a/web/app/components/base/icons/src/public/llm/Gpt3.tsx
+++ /dev/null
@@ -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 './Gpt3.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Gpt3'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Gpt4.tsx b/web/app/components/base/icons/src/public/llm/Gpt4.tsx
deleted file mode 100644
index db26cff9421..00000000000
--- a/web/app/components/base/icons/src/public/llm/Gpt4.tsx
+++ /dev/null
@@ -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 './Gpt4.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Gpt4'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Huggingface.tsx b/web/app/components/base/icons/src/public/llm/Huggingface.tsx
deleted file mode 100644
index 349719af59d..00000000000
--- a/web/app/components/base/icons/src/public/llm/Huggingface.tsx
+++ /dev/null
@@ -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 './Huggingface.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Huggingface'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/HuggingfaceText.tsx b/web/app/components/base/icons/src/public/llm/HuggingfaceText.tsx
deleted file mode 100644
index f3fc3db9baa..00000000000
--- a/web/app/components/base/icons/src/public/llm/HuggingfaceText.tsx
+++ /dev/null
@@ -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 './HuggingfaceText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'HuggingfaceText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/HuggingfaceTextHub.tsx b/web/app/components/base/icons/src/public/llm/HuggingfaceTextHub.tsx
deleted file mode 100644
index 58400d5f982..00000000000
--- a/web/app/components/base/icons/src/public/llm/HuggingfaceTextHub.tsx
+++ /dev/null
@@ -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 './HuggingfaceTextHub.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'HuggingfaceTextHub'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/IflytekSpark.tsx b/web/app/components/base/icons/src/public/llm/IflytekSpark.tsx
deleted file mode 100644
index a5ca648a959..00000000000
--- a/web/app/components/base/icons/src/public/llm/IflytekSpark.tsx
+++ /dev/null
@@ -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 './IflytekSpark.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'IflytekSpark'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/IflytekSparkText.tsx b/web/app/components/base/icons/src/public/llm/IflytekSparkText.tsx
deleted file mode 100644
index 118262bbc64..00000000000
--- a/web/app/components/base/icons/src/public/llm/IflytekSparkText.tsx
+++ /dev/null
@@ -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 './IflytekSparkText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'IflytekSparkText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/IflytekSparkTextCn.tsx b/web/app/components/base/icons/src/public/llm/IflytekSparkTextCn.tsx
deleted file mode 100644
index a21ddee7a1b..00000000000
--- a/web/app/components/base/icons/src/public/llm/IflytekSparkTextCn.tsx
+++ /dev/null
@@ -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 './IflytekSparkTextCn.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'IflytekSparkTextCn'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Jina.tsx b/web/app/components/base/icons/src/public/llm/Jina.tsx
deleted file mode 100644
index 8e494a859d9..00000000000
--- a/web/app/components/base/icons/src/public/llm/Jina.tsx
+++ /dev/null
@@ -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 './Jina.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Jina'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/JinaText.tsx b/web/app/components/base/icons/src/public/llm/JinaText.tsx
deleted file mode 100644
index 8b9e96e0637..00000000000
--- a/web/app/components/base/icons/src/public/llm/JinaText.tsx
+++ /dev/null
@@ -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 './JinaText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'JinaText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Localai.tsx b/web/app/components/base/icons/src/public/llm/Localai.tsx
deleted file mode 100644
index f7abd10f6e7..00000000000
--- a/web/app/components/base/icons/src/public/llm/Localai.tsx
+++ /dev/null
@@ -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 './Localai.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Localai'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/LocalaiText.tsx b/web/app/components/base/icons/src/public/llm/LocalaiText.tsx
deleted file mode 100644
index 51690017cd3..00000000000
--- a/web/app/components/base/icons/src/public/llm/LocalaiText.tsx
+++ /dev/null
@@ -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 './LocalaiText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'LocalaiText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Microsoft.tsx b/web/app/components/base/icons/src/public/llm/Microsoft.tsx
deleted file mode 100644
index 0b2301cb5c1..00000000000
--- a/web/app/components/base/icons/src/public/llm/Microsoft.tsx
+++ /dev/null
@@ -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 './Microsoft.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Microsoft'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenaiBlack.tsx b/web/app/components/base/icons/src/public/llm/OpenaiBlack.tsx
deleted file mode 100644
index 1717c45bb9f..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenaiBlack.tsx
+++ /dev/null
@@ -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 './OpenaiBlack.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenaiBlack'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenaiBlue.tsx b/web/app/components/base/icons/src/public/llm/OpenaiBlue.tsx
deleted file mode 100644
index 9934a775918..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenaiBlue.tsx
+++ /dev/null
@@ -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 './OpenaiBlue.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenaiBlue'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenaiGreen.tsx b/web/app/components/base/icons/src/public/llm/OpenaiGreen.tsx
deleted file mode 100644
index 79a7b84de80..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenaiGreen.tsx
+++ /dev/null
@@ -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 './OpenaiGreen.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenaiGreen'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenaiTeal.tsx b/web/app/components/base/icons/src/public/llm/OpenaiTeal.tsx
deleted file mode 100644
index ef803ea52f4..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenaiTeal.tsx
+++ /dev/null
@@ -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 './OpenaiTeal.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenaiTeal'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenaiText.tsx b/web/app/components/base/icons/src/public/llm/OpenaiText.tsx
deleted file mode 100644
index 6428b8eddc8..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenaiText.tsx
+++ /dev/null
@@ -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 './OpenaiText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenaiText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenaiTransparent.tsx b/web/app/components/base/icons/src/public/llm/OpenaiTransparent.tsx
deleted file mode 100644
index 6b7d3d64840..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenaiTransparent.tsx
+++ /dev/null
@@ -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 './OpenaiTransparent.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenaiTransparent'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenaiViolet.tsx b/web/app/components/base/icons/src/public/llm/OpenaiViolet.tsx
deleted file mode 100644
index 9aa08c0f3bb..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenaiViolet.tsx
+++ /dev/null
@@ -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 './OpenaiViolet.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenaiViolet'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Openllm.tsx b/web/app/components/base/icons/src/public/llm/Openllm.tsx
deleted file mode 100644
index 4bf6f1eac96..00000000000
--- a/web/app/components/base/icons/src/public/llm/Openllm.tsx
+++ /dev/null
@@ -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 './Openllm.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Openllm'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/OpenllmText.tsx b/web/app/components/base/icons/src/public/llm/OpenllmText.tsx
deleted file mode 100644
index 4ee55706799..00000000000
--- a/web/app/components/base/icons/src/public/llm/OpenllmText.tsx
+++ /dev/null
@@ -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 './OpenllmText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'OpenllmText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Replicate.tsx b/web/app/components/base/icons/src/public/llm/Replicate.tsx
deleted file mode 100644
index e560d61afa8..00000000000
--- a/web/app/components/base/icons/src/public/llm/Replicate.tsx
+++ /dev/null
@@ -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 './Replicate.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Replicate'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/ReplicateText.tsx b/web/app/components/base/icons/src/public/llm/ReplicateText.tsx
deleted file mode 100644
index e202e9e72a0..00000000000
--- a/web/app/components/base/icons/src/public/llm/ReplicateText.tsx
+++ /dev/null
@@ -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 './ReplicateText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ReplicateText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/XorbitsInference.tsx b/web/app/components/base/icons/src/public/llm/XorbitsInference.tsx
deleted file mode 100644
index 0a7742d1ee8..00000000000
--- a/web/app/components/base/icons/src/public/llm/XorbitsInference.tsx
+++ /dev/null
@@ -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 './XorbitsInference.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'XorbitsInference'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/XorbitsInferenceText.tsx b/web/app/components/base/icons/src/public/llm/XorbitsInferenceText.tsx
deleted file mode 100644
index 145d8fdb3ee..00000000000
--- a/web/app/components/base/icons/src/public/llm/XorbitsInferenceText.tsx
+++ /dev/null
@@ -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 './XorbitsInferenceText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'XorbitsInferenceText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/Zhipuai.tsx b/web/app/components/base/icons/src/public/llm/Zhipuai.tsx
deleted file mode 100644
index 0ad98f0c0e7..00000000000
--- a/web/app/components/base/icons/src/public/llm/Zhipuai.tsx
+++ /dev/null
@@ -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 './Zhipuai.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Zhipuai'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/ZhipuaiText.tsx b/web/app/components/base/icons/src/public/llm/ZhipuaiText.tsx
deleted file mode 100644
index d8e0361c227..00000000000
--- a/web/app/components/base/icons/src/public/llm/ZhipuaiText.tsx
+++ /dev/null
@@ -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 './ZhipuaiText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ZhipuaiText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/llm/ZhipuaiTextCn.tsx b/web/app/components/base/icons/src/public/llm/ZhipuaiTextCn.tsx
deleted file mode 100644
index 62e36897268..00000000000
--- a/web/app/components/base/icons/src/public/llm/ZhipuaiTextCn.tsx
+++ /dev/null
@@ -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 './ZhipuaiTextCn.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ZhipuaiTextCn'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/model/Checked.tsx b/web/app/components/base/icons/src/public/model/Checked.tsx
deleted file mode 100644
index 7e6a62acdf4..00000000000
--- a/web/app/components/base/icons/src/public/model/Checked.tsx
+++ /dev/null
@@ -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 './Checked.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Checked'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/other/Icon3Dots.tsx b/web/app/components/base/icons/src/public/other/Icon3Dots.tsx
deleted file mode 100644
index bd0bf9d4501..00000000000
--- a/web/app/components/base/icons/src/public/other/Icon3Dots.tsx
+++ /dev/null
@@ -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 './Icon3Dots.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Icon3Dots'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/plugins/Google.tsx b/web/app/components/base/icons/src/public/plugins/Google.tsx
deleted file mode 100644
index a818c6494c1..00000000000
--- a/web/app/components/base/icons/src/public/plugins/Google.tsx
+++ /dev/null
@@ -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 './Google.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Google'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/plugins/WebReader.tsx b/web/app/components/base/icons/src/public/plugins/WebReader.tsx
deleted file mode 100644
index c7a71281ca3..00000000000
--- a/web/app/components/base/icons/src/public/plugins/WebReader.tsx
+++ /dev/null
@@ -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 './WebReader.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'WebReader'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/plugins/Wikipedia.tsx b/web/app/components/base/icons/src/public/plugins/Wikipedia.tsx
deleted file mode 100644
index 1e29f333bcd..00000000000
--- a/web/app/components/base/icons/src/public/plugins/Wikipedia.tsx
+++ /dev/null
@@ -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 './Wikipedia.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Wikipedia'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/thought/DataSet.tsx b/web/app/components/base/icons/src/public/thought/DataSet.tsx
deleted file mode 100644
index 42920e31514..00000000000
--- a/web/app/components/base/icons/src/public/thought/DataSet.tsx
+++ /dev/null
@@ -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 './DataSet.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'DataSet'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/thought/Search.tsx b/web/app/components/base/icons/src/public/thought/Search.tsx
deleted file mode 100644
index 06f13f4324d..00000000000
--- a/web/app/components/base/icons/src/public/thought/Search.tsx
+++ /dev/null
@@ -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 './Search.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Search'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/thought/ThoughtList.tsx b/web/app/components/base/icons/src/public/thought/ThoughtList.tsx
deleted file mode 100644
index cd4276b7b98..00000000000
--- a/web/app/components/base/icons/src/public/thought/ThoughtList.tsx
+++ /dev/null
@@ -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 './ThoughtList.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ThoughtList'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/public/thought/WebReader.tsx b/web/app/components/base/icons/src/public/thought/WebReader.tsx
deleted file mode 100644
index c7a71281ca3..00000000000
--- a/web/app/components/base/icons/src/public/thought/WebReader.tsx
+++ /dev/null
@@ -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 './WebReader.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'WebReader'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/knowledge/Divider.tsx b/web/app/components/base/icons/src/vender/knowledge/Divider.tsx
deleted file mode 100644
index 20fb3d0ab55..00000000000
--- a/web/app/components/base/icons/src/vender/knowledge/Divider.tsx
+++ /dev/null
@@ -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 './Divider.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Divider'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/alertsAndFeedback/AlertTriangle.tsx b/web/app/components/base/icons/src/vender/line/alertsAndFeedback/AlertTriangle.tsx
deleted file mode 100644
index 7f07c8b2580..00000000000
--- a/web/app/components/base/icons/src/vender/line/alertsAndFeedback/AlertTriangle.tsx
+++ /dev/null
@@ -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 './AlertTriangle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AlertTriangle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/alertsAndFeedback/ThumbsDown.tsx b/web/app/components/base/icons/src/vender/line/alertsAndFeedback/ThumbsDown.tsx
deleted file mode 100644
index ca5076483d3..00000000000
--- a/web/app/components/base/icons/src/vender/line/alertsAndFeedback/ThumbsDown.tsx
+++ /dev/null
@@ -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 './ThumbsDown.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ThumbsDown'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/alertsAndFeedback/ThumbsUp.tsx b/web/app/components/base/icons/src/vender/line/alertsAndFeedback/ThumbsUp.tsx
deleted file mode 100644
index accfa9589ea..00000000000
--- a/web/app/components/base/icons/src/vender/line/alertsAndFeedback/ThumbsUp.tsx
+++ /dev/null
@@ -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 './ThumbsUp.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ThumbsUp'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/arrows/ChevronDownDouble.tsx b/web/app/components/base/icons/src/vender/line/arrows/ChevronDownDouble.tsx
deleted file mode 100644
index 41ebb65ac40..00000000000
--- a/web/app/components/base/icons/src/vender/line/arrows/ChevronDownDouble.tsx
+++ /dev/null
@@ -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 './ChevronDownDouble.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ChevronDownDouble'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/arrows/IconR.tsx b/web/app/components/base/icons/src/vender/line/arrows/IconR.tsx
deleted file mode 100644
index 3b44ed4c2a8..00000000000
--- a/web/app/components/base/icons/src/vender/line/arrows/IconR.tsx
+++ /dev/null
@@ -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 './IconR.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'IconR'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/arrows/RefreshCw05.tsx b/web/app/components/base/icons/src/vender/line/arrows/RefreshCw05.tsx
deleted file mode 100644
index 972f205caa2..00000000000
--- a/web/app/components/base/icons/src/vender/line/arrows/RefreshCw05.tsx
+++ /dev/null
@@ -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 './RefreshCw05.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'RefreshCw05'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/arrows/ReverseLeft.tsx b/web/app/components/base/icons/src/vender/line/arrows/ReverseLeft.tsx
deleted file mode 100644
index 0d6911f9237..00000000000
--- a/web/app/components/base/icons/src/vender/line/arrows/ReverseLeft.tsx
+++ /dev/null
@@ -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 './ReverseLeft.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ReverseLeft'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/arrows/index.ts b/web/app/components/base/icons/src/vender/line/arrows/index.ts
index b27efc2e9c7..24ef12775ad 100644
--- a/web/app/components/base/icons/src/vender/line/arrows/index.ts
+++ b/web/app/components/base/icons/src/vender/line/arrows/index.ts
@@ -1,6 +1,6 @@
 export { default as ArrowNarrowLeft } from './ArrowNarrowLeft'
 export { default as ArrowUpRight } from './ArrowUpRight'
-export { default as ChevronDownDouble } from './ChevronDownDouble'
+
 export { default as ChevronRight } from './ChevronRight'
 export { default as ChevronSelectorVertical } from './ChevronSelectorVertical'
 
diff --git a/web/app/components/base/icons/src/vender/line/communication/AiText.tsx b/web/app/components/base/icons/src/vender/line/communication/AiText.tsx
deleted file mode 100644
index 70f2cde4de4..00000000000
--- a/web/app/components/base/icons/src/vender/line/communication/AiText.tsx
+++ /dev/null
@@ -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 './AiText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AiText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/communication/ChatBot.tsx b/web/app/components/base/icons/src/vender/line/communication/ChatBot.tsx
deleted file mode 100644
index 391670d7186..00000000000
--- a/web/app/components/base/icons/src/vender/line/communication/ChatBot.tsx
+++ /dev/null
@@ -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 './ChatBot.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ChatBot'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/communication/CuteRobot.tsx b/web/app/components/base/icons/src/vender/line/communication/CuteRobot.tsx
deleted file mode 100644
index 9bba738c692..00000000000
--- a/web/app/components/base/icons/src/vender/line/communication/CuteRobot.tsx
+++ /dev/null
@@ -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 './CuteRobot.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CuteRobot'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/ArtificialBrain.tsx b/web/app/components/base/icons/src/vender/line/development/ArtificialBrain.tsx
deleted file mode 100644
index ec2c4b04168..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/ArtificialBrain.tsx
+++ /dev/null
@@ -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 './ArtificialBrain.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ArtificialBrain'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/BarChartSquare02.tsx b/web/app/components/base/icons/src/vender/line/development/BarChartSquare02.tsx
deleted file mode 100644
index bc3a265d34d..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/BarChartSquare02.tsx
+++ /dev/null
@@ -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 './BarChartSquare02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'BarChartSquare02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/CodeBrowser.tsx b/web/app/components/base/icons/src/vender/line/development/CodeBrowser.tsx
deleted file mode 100644
index 57923dafe3d..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/CodeBrowser.tsx
+++ /dev/null
@@ -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 './CodeBrowser.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CodeBrowser'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/Container.tsx b/web/app/components/base/icons/src/vender/line/development/Container.tsx
deleted file mode 100644
index 6f865feb7ce..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/Container.tsx
+++ /dev/null
@@ -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 './Container.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Container'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/Database01.tsx b/web/app/components/base/icons/src/vender/line/development/Database01.tsx
deleted file mode 100644
index f02ab034436..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/Database01.tsx
+++ /dev/null
@@ -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 './Database01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Database01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/Database03.tsx b/web/app/components/base/icons/src/vender/line/development/Database03.tsx
deleted file mode 100644
index 240fcd9d267..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/Database03.tsx
+++ /dev/null
@@ -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 './Database03.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Database03'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/FileHeart02.tsx b/web/app/components/base/icons/src/vender/line/development/FileHeart02.tsx
deleted file mode 100644
index 6871eec501c..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/FileHeart02.tsx
+++ /dev/null
@@ -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 './FileHeart02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FileHeart02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/GitBranch01.tsx b/web/app/components/base/icons/src/vender/line/development/GitBranch01.tsx
deleted file mode 100644
index 0859c2c1747..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/GitBranch01.tsx
+++ /dev/null
@@ -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 './GitBranch01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'GitBranch01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/PromptEngineering.tsx b/web/app/components/base/icons/src/vender/line/development/PromptEngineering.tsx
deleted file mode 100644
index 89b0e46a60a..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/PromptEngineering.tsx
+++ /dev/null
@@ -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 './PromptEngineering.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'PromptEngineering'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/PuzzlePiece01.tsx b/web/app/components/base/icons/src/vender/line/development/PuzzlePiece01.tsx
deleted file mode 100644
index eb1104fe5fb..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/PuzzlePiece01.tsx
+++ /dev/null
@@ -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 './PuzzlePiece01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'PuzzlePiece01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/TerminalSquare.tsx b/web/app/components/base/icons/src/vender/line/development/TerminalSquare.tsx
deleted file mode 100644
index 91cd54a137f..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/TerminalSquare.tsx
+++ /dev/null
@@ -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 './TerminalSquare.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'TerminalSquare'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/Variable.tsx b/web/app/components/base/icons/src/vender/line/development/Variable.tsx
deleted file mode 100644
index b04a536c780..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/Variable.tsx
+++ /dev/null
@@ -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 './Variable.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Variable'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/development/Webhooks.tsx b/web/app/components/base/icons/src/vender/line/development/Webhooks.tsx
deleted file mode 100644
index 031e5bec604..00000000000
--- a/web/app/components/base/icons/src/vender/line/development/Webhooks.tsx
+++ /dev/null
@@ -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 './Webhooks.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Webhooks'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/editor/AlignLeft.tsx b/web/app/components/base/icons/src/vender/line/editor/AlignLeft.tsx
deleted file mode 100644
index 1a430dbb5d1..00000000000
--- a/web/app/components/base/icons/src/vender/line/editor/AlignLeft.tsx
+++ /dev/null
@@ -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 './AlignLeft.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AlignLeft'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/editor/BezierCurve03.tsx b/web/app/components/base/icons/src/vender/line/editor/BezierCurve03.tsx
deleted file mode 100644
index aee82488596..00000000000
--- a/web/app/components/base/icons/src/vender/line/editor/BezierCurve03.tsx
+++ /dev/null
@@ -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 './BezierCurve03.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'BezierCurve03'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/editor/Collapse.tsx b/web/app/components/base/icons/src/vender/line/editor/Collapse.tsx
deleted file mode 100644
index f2cd10f1e74..00000000000
--- a/web/app/components/base/icons/src/vender/line/editor/Collapse.tsx
+++ /dev/null
@@ -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 './Collapse.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Collapse'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/editor/Colors.tsx b/web/app/components/base/icons/src/vender/line/editor/Colors.tsx
deleted file mode 100644
index a0fff0474c8..00000000000
--- a/web/app/components/base/icons/src/vender/line/editor/Colors.tsx
+++ /dev/null
@@ -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 './Colors.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Colors'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/editor/LeftIndent02.tsx b/web/app/components/base/icons/src/vender/line/editor/LeftIndent02.tsx
deleted file mode 100644
index c30c4327da6..00000000000
--- a/web/app/components/base/icons/src/vender/line/editor/LeftIndent02.tsx
+++ /dev/null
@@ -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 './LeftIndent02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'LeftIndent02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.tsx b/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.tsx
deleted file mode 100644
index 40858bd1a51..00000000000
--- a/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.tsx
+++ /dev/null
@@ -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 './LetterSpacing01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'LetterSpacing01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/editor/TypeSquare.tsx b/web/app/components/base/icons/src/vender/line/editor/TypeSquare.tsx
deleted file mode 100644
index 77fb4c2d385..00000000000
--- a/web/app/components/base/icons/src/vender/line/editor/TypeSquare.tsx
+++ /dev/null
@@ -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 './TypeSquare.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'TypeSquare'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/File02.tsx b/web/app/components/base/icons/src/vender/line/files/File02.tsx
deleted file mode 100644
index 20cf0f566a5..00000000000
--- a/web/app/components/base/icons/src/vender/line/files/File02.tsx
+++ /dev/null
@@ -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 './File02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'File02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/FileCheck02.tsx b/web/app/components/base/icons/src/vender/line/files/FileCheck02.tsx
deleted file mode 100644
index 1a37be06aa0..00000000000
--- a/web/app/components/base/icons/src/vender/line/files/FileCheck02.tsx
+++ /dev/null
@@ -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 './FileCheck02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FileCheck02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/FileDownload02.tsx b/web/app/components/base/icons/src/vender/line/files/FileDownload02.tsx
deleted file mode 100644
index 5c0178be113..00000000000
--- a/web/app/components/base/icons/src/vender/line/files/FileDownload02.tsx
+++ /dev/null
@@ -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 './FileDownload02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FileDownload02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/FilePlus01.tsx b/web/app/components/base/icons/src/vender/line/files/FilePlus01.tsx
deleted file mode 100644
index 03997629942..00000000000
--- a/web/app/components/base/icons/src/vender/line/files/FilePlus01.tsx
+++ /dev/null
@@ -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 './FilePlus01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FilePlus01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/FilePlus02.tsx b/web/app/components/base/icons/src/vender/line/files/FilePlus02.tsx
deleted file mode 100644
index f7d6e78018e..00000000000
--- a/web/app/components/base/icons/src/vender/line/files/FilePlus02.tsx
+++ /dev/null
@@ -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 './FilePlus02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FilePlus02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/FileText.tsx b/web/app/components/base/icons/src/vender/line/files/FileText.tsx
deleted file mode 100644
index 37aec67c3ae..00000000000
--- a/web/app/components/base/icons/src/vender/line/files/FileText.tsx
+++ /dev/null
@@ -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 './FileText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FileText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/FileUpload.tsx b/web/app/components/base/icons/src/vender/line/files/FileUpload.tsx
deleted file mode 100644
index a91e8ac4b25..00000000000
--- a/web/app/components/base/icons/src/vender/line/files/FileUpload.tsx
+++ /dev/null
@@ -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 './FileUpload.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FileUpload'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/files/index.ts b/web/app/components/base/icons/src/vender/line/files/index.ts
index cbeb3d01811..fac82744ebd 100644
--- a/web/app/components/base/icons/src/vender/line/files/index.ts
+++ b/web/app/components/base/icons/src/vender/line/files/index.ts
@@ -3,7 +3,4 @@ export { default as CopyCheck } from './CopyCheck'
 
 export { default as FileArrow01 } from './FileArrow01'
 
-export { default as FilePlus01 } from './FilePlus01'
-export { default as FilePlus02 } from './FilePlus02'
-
 export { default as Folder } from './Folder'
diff --git a/web/app/components/base/icons/src/vender/line/financeAndECommerce/CoinsStacked01.tsx b/web/app/components/base/icons/src/vender/line/financeAndECommerce/CoinsStacked01.tsx
deleted file mode 100644
index 927e3294ff6..00000000000
--- a/web/app/components/base/icons/src/vender/line/financeAndECommerce/CoinsStacked01.tsx
+++ /dev/null
@@ -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 './CoinsStacked01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CoinsStacked01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/financeAndECommerce/GoldCoin.tsx b/web/app/components/base/icons/src/vender/line/financeAndECommerce/GoldCoin.tsx
deleted file mode 100644
index 5c766c2902c..00000000000
--- a/web/app/components/base/icons/src/vender/line/financeAndECommerce/GoldCoin.tsx
+++ /dev/null
@@ -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 './GoldCoin.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'GoldCoin'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/financeAndECommerce/ReceiptList.tsx b/web/app/components/base/icons/src/vender/line/financeAndECommerce/ReceiptList.tsx
deleted file mode 100644
index 90ae6010076..00000000000
--- a/web/app/components/base/icons/src/vender/line/financeAndECommerce/ReceiptList.tsx
+++ /dev/null
@@ -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 './ReceiptList.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ReceiptList'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/financeAndECommerce/Tag01.tsx b/web/app/components/base/icons/src/vender/line/financeAndECommerce/Tag01.tsx
deleted file mode 100644
index 90f2e877072..00000000000
--- a/web/app/components/base/icons/src/vender/line/financeAndECommerce/Tag01.tsx
+++ /dev/null
@@ -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 './Tag01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Tag01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/AtSign.tsx b/web/app/components/base/icons/src/vender/line/general/AtSign.tsx
deleted file mode 100644
index c0556448799..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/AtSign.tsx
+++ /dev/null
@@ -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 './AtSign.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AtSign'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Bookmark.tsx b/web/app/components/base/icons/src/vender/line/general/Bookmark.tsx
deleted file mode 100644
index 38b9711599e..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Bookmark.tsx
+++ /dev/null
@@ -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 './Bookmark.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Bookmark'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/CheckDone01.tsx b/web/app/components/base/icons/src/vender/line/general/CheckDone01.tsx
deleted file mode 100644
index ef6536fa4fa..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/CheckDone01.tsx
+++ /dev/null
@@ -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 './CheckDone01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CheckDone01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/ChecklistSquare.tsx b/web/app/components/base/icons/src/vender/line/general/ChecklistSquare.tsx
deleted file mode 100644
index 5487a38eb40..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/ChecklistSquare.tsx
+++ /dev/null
@@ -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 './ChecklistSquare.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ChecklistSquare'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/DotsGrid.tsx b/web/app/components/base/icons/src/vender/line/general/DotsGrid.tsx
deleted file mode 100644
index 796e270d412..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/DotsGrid.tsx
+++ /dev/null
@@ -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 './DotsGrid.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'DotsGrid'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Edit02.tsx b/web/app/components/base/icons/src/vender/line/general/Edit02.tsx
deleted file mode 100644
index eb97cc0ceae..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Edit02.tsx
+++ /dev/null
@@ -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 './Edit02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Edit02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Edit04.tsx b/web/app/components/base/icons/src/vender/line/general/Edit04.tsx
deleted file mode 100644
index 315f5a961fa..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Edit04.tsx
+++ /dev/null
@@ -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 './Edit04.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Edit04'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Edit05.tsx b/web/app/components/base/icons/src/vender/line/general/Edit05.tsx
deleted file mode 100644
index 54d02d17f31..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Edit05.tsx
+++ /dev/null
@@ -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 './Edit05.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Edit05'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Hash02.tsx b/web/app/components/base/icons/src/vender/line/general/Hash02.tsx
deleted file mode 100644
index 9482490a014..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Hash02.tsx
+++ /dev/null
@@ -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 './Hash02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Hash02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/HelpQuestion.tsx b/web/app/components/base/icons/src/vender/line/general/HelpQuestion.tsx
deleted file mode 100644
index ca64f5ffa89..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/HelpQuestion.tsx
+++ /dev/null
@@ -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 './HelpQuestion.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'HelpQuestion'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/InfoCircle.tsx b/web/app/components/base/icons/src/vender/line/general/InfoCircle.tsx
deleted file mode 100644
index db862595217..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/InfoCircle.tsx
+++ /dev/null
@@ -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 './InfoCircle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'InfoCircle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/LogIn04.tsx b/web/app/components/base/icons/src/vender/line/general/LogIn04.tsx
deleted file mode 100644
index de4aa15303a..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/LogIn04.tsx
+++ /dev/null
@@ -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 './LogIn04.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'LogIn04'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/LogOut01.tsx b/web/app/components/base/icons/src/vender/line/general/LogOut01.tsx
deleted file mode 100644
index 1cf98e03743..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/LogOut01.tsx
+++ /dev/null
@@ -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 './LogOut01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'LogOut01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/LogOut04.tsx b/web/app/components/base/icons/src/vender/line/general/LogOut04.tsx
deleted file mode 100644
index 57c2810dbd6..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/LogOut04.tsx
+++ /dev/null
@@ -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 './LogOut04.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'LogOut04'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Menu01.tsx b/web/app/components/base/icons/src/vender/line/general/Menu01.tsx
deleted file mode 100644
index d0b83185187..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Menu01.tsx
+++ /dev/null
@@ -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 './Menu01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Menu01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Pin01.tsx b/web/app/components/base/icons/src/vender/line/general/Pin01.tsx
deleted file mode 100644
index 776337c8270..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Pin01.tsx
+++ /dev/null
@@ -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 './Pin01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Pin01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Refresh.tsx b/web/app/components/base/icons/src/vender/line/general/Refresh.tsx
deleted file mode 100644
index 35239db6e13..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Refresh.tsx
+++ /dev/null
@@ -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 './Refresh.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Refresh'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Settings04.tsx b/web/app/components/base/icons/src/vender/line/general/Settings04.tsx
deleted file mode 100644
index 617727225a2..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Settings04.tsx
+++ /dev/null
@@ -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 './Settings04.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Settings04'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Target04.tsx b/web/app/components/base/icons/src/vender/line/general/Target04.tsx
deleted file mode 100644
index b2025a823ec..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Target04.tsx
+++ /dev/null
@@ -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 './Target04.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Target04'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/Upload03.tsx b/web/app/components/base/icons/src/vender/line/general/Upload03.tsx
deleted file mode 100644
index bec55623be7..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/Upload03.tsx
+++ /dev/null
@@ -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 './Upload03.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Upload03'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/UploadCloud01.tsx b/web/app/components/base/icons/src/vender/line/general/UploadCloud01.tsx
deleted file mode 100644
index 17ffee2b014..00000000000
--- a/web/app/components/base/icons/src/vender/line/general/UploadCloud01.tsx
+++ /dev/null
@@ -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 './UploadCloud01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'UploadCloud01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/index.ts b/web/app/components/base/icons/src/vender/line/general/index.ts
index e5e1116ad16..54d3538dce6 100644
--- a/web/app/components/base/icons/src/vender/line/general/index.ts
+++ b/web/app/components/base/icons/src/vender/line/general/index.ts
@@ -12,6 +12,5 @@ export { default as Plus02 } from './Plus02'
 
 export { default as SearchMenu } from './SearchMenu'
 export { default as Settings01 } from './Settings01'
-export { default as Settings04 } from './Settings04'
 
 export { default as X } from './X'
diff --git a/web/app/components/base/icons/src/vender/line/layout/AlignLeft01.tsx b/web/app/components/base/icons/src/vender/line/layout/AlignLeft01.tsx
deleted file mode 100644
index 4df5b7519c6..00000000000
--- a/web/app/components/base/icons/src/vender/line/layout/AlignLeft01.tsx
+++ /dev/null
@@ -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 './AlignLeft01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AlignLeft01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/layout/AlignRight01.tsx b/web/app/components/base/icons/src/vender/line/layout/AlignRight01.tsx
deleted file mode 100644
index e37046e1a36..00000000000
--- a/web/app/components/base/icons/src/vender/line/layout/AlignRight01.tsx
+++ /dev/null
@@ -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 './AlignRight01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AlignRight01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/layout/Grid01.tsx b/web/app/components/base/icons/src/vender/line/layout/Grid01.tsx
deleted file mode 100644
index ab3fd1492e3..00000000000
--- a/web/app/components/base/icons/src/vender/line/layout/Grid01.tsx
+++ /dev/null
@@ -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 './Grid01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Grid01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/layout/LayoutGrid02.tsx b/web/app/components/base/icons/src/vender/line/layout/LayoutGrid02.tsx
deleted file mode 100644
index 9333a2c6994..00000000000
--- a/web/app/components/base/icons/src/vender/line/layout/LayoutGrid02.tsx
+++ /dev/null
@@ -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 './LayoutGrid02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'LayoutGrid02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/layout/index.ts b/web/app/components/base/icons/src/vender/line/layout/index.ts
deleted file mode 100644
index a6aa205faa5..00000000000
--- a/web/app/components/base/icons/src/vender/line/layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as LayoutGrid02 } from './LayoutGrid02'
diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/Microphone01.tsx b/web/app/components/base/icons/src/vender/line/mediaAndDevices/Microphone01.tsx
deleted file mode 100644
index 3c9dd52a67c..00000000000
--- a/web/app/components/base/icons/src/vender/line/mediaAndDevices/Microphone01.tsx
+++ /dev/null
@@ -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 './Microphone01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Microphone01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/PlayCircle.tsx b/web/app/components/base/icons/src/vender/line/mediaAndDevices/PlayCircle.tsx
deleted file mode 100644
index 44f57525440..00000000000
--- a/web/app/components/base/icons/src/vender/line/mediaAndDevices/PlayCircle.tsx
+++ /dev/null
@@ -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 './PlayCircle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'PlayCircle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/SlidersH.tsx b/web/app/components/base/icons/src/vender/line/mediaAndDevices/SlidersH.tsx
deleted file mode 100644
index 85065c42029..00000000000
--- a/web/app/components/base/icons/src/vender/line/mediaAndDevices/SlidersH.tsx
+++ /dev/null
@@ -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 './SlidersH.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'SlidersH'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/mediaAndDevices/Speaker.tsx b/web/app/components/base/icons/src/vender/line/mediaAndDevices/Speaker.tsx
deleted file mode 100644
index b2a626cb3ca..00000000000
--- a/web/app/components/base/icons/src/vender/line/mediaAndDevices/Speaker.tsx
+++ /dev/null
@@ -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 './Speaker.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Speaker'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/others/Colors.tsx b/web/app/components/base/icons/src/vender/line/others/Colors.tsx
deleted file mode 100644
index a0fff0474c8..00000000000
--- a/web/app/components/base/icons/src/vender/line/others/Colors.tsx
+++ /dev/null
@@ -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 './Colors.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Colors'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/others/SearchMenu.tsx b/web/app/components/base/icons/src/vender/line/others/SearchMenu.tsx
deleted file mode 100644
index 36b3e6ab961..00000000000
--- a/web/app/components/base/icons/src/vender/line/others/SearchMenu.tsx
+++ /dev/null
@@ -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 './SearchMenu.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'SearchMenu'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/others/Tools.tsx b/web/app/components/base/icons/src/vender/line/others/Tools.tsx
deleted file mode 100644
index 2f543c2e13c..00000000000
--- a/web/app/components/base/icons/src/vender/line/others/Tools.tsx
+++ /dev/null
@@ -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 './Tools.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Tools'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/shapes/CubeOutline.tsx b/web/app/components/base/icons/src/vender/line/shapes/CubeOutline.tsx
deleted file mode 100644
index 98c8e7c846d..00000000000
--- a/web/app/components/base/icons/src/vender/line/shapes/CubeOutline.tsx
+++ /dev/null
@@ -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 './CubeOutline.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CubeOutline'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/time/ClockPlaySlim.tsx b/web/app/components/base/icons/src/vender/line/time/ClockPlaySlim.tsx
deleted file mode 100644
index 42f6b05b5d8..00000000000
--- a/web/app/components/base/icons/src/vender/line/time/ClockPlaySlim.tsx
+++ /dev/null
@@ -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 './ClockPlaySlim.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ClockPlaySlim'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/time/ClockRefresh.tsx b/web/app/components/base/icons/src/vender/line/time/ClockRefresh.tsx
deleted file mode 100644
index 6a2739cfbe5..00000000000
--- a/web/app/components/base/icons/src/vender/line/time/ClockRefresh.tsx
+++ /dev/null
@@ -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 './ClockRefresh.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ClockRefresh'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/users/User01.tsx b/web/app/components/base/icons/src/vender/line/users/User01.tsx
deleted file mode 100644
index 61d029fdba4..00000000000
--- a/web/app/components/base/icons/src/vender/line/users/User01.tsx
+++ /dev/null
@@ -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 './User01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'User01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/users/Users01.tsx b/web/app/components/base/icons/src/vender/line/users/Users01.tsx
deleted file mode 100644
index 7e8b57524e1..00000000000
--- a/web/app/components/base/icons/src/vender/line/users/Users01.tsx
+++ /dev/null
@@ -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 './Users01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Users01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/weather/Stars02.tsx b/web/app/components/base/icons/src/vender/line/weather/Stars02.tsx
deleted file mode 100644
index 5f459ae7f27..00000000000
--- a/web/app/components/base/icons/src/vender/line/weather/Stars02.tsx
+++ /dev/null
@@ -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 './Stars02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Stars02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/other/AnthropicText.tsx b/web/app/components/base/icons/src/vender/other/AnthropicText.tsx
deleted file mode 100644
index 601bdf78438..00000000000
--- a/web/app/components/base/icons/src/vender/other/AnthropicText.tsx
+++ /dev/null
@@ -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 './AnthropicText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AnthropicText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/FinanceAndECommerce/GoldCoin.tsx b/web/app/components/base/icons/src/vender/solid/FinanceAndECommerce/GoldCoin.tsx
deleted file mode 100644
index 5c766c2902c..00000000000
--- a/web/app/components/base/icons/src/vender/solid/FinanceAndECommerce/GoldCoin.tsx
+++ /dev/null
@@ -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 './GoldCoin.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'GoldCoin'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/ArrowDownDoubleLine.tsx b/web/app/components/base/icons/src/vender/solid/arrows/ArrowDownDoubleLine.tsx
deleted file mode 100644
index aef46b48491..00000000000
--- a/web/app/components/base/icons/src/vender/solid/arrows/ArrowDownDoubleLine.tsx
+++ /dev/null
@@ -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 './ArrowDownDoubleLine.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ArrowDownDoubleLine'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.tsx b/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.tsx
deleted file mode 100644
index 40b6539ac1a..00000000000
--- a/web/app/components/base/icons/src/vender/solid/arrows/ArrowUpDoubleLine.tsx
+++ /dev/null
@@ -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 './ArrowUpDoubleLine.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ArrowUpDoubleLine'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.tsx b/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.tsx
deleted file mode 100644
index a0b4256e5d9..00000000000
--- a/web/app/components/base/icons/src/vender/solid/arrows/ChevronDown.tsx
+++ /dev/null
@@ -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 './ChevronDown.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ChevronDown'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/HighPriority.tsx b/web/app/components/base/icons/src/vender/solid/arrows/HighPriority.tsx
deleted file mode 100644
index be17c2e3199..00000000000
--- a/web/app/components/base/icons/src/vender/solid/arrows/HighPriority.tsx
+++ /dev/null
@@ -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 './HighPriority.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'HighPriority'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/AiText.tsx b/web/app/components/base/icons/src/vender/solid/communication/AiText.tsx
deleted file mode 100644
index 70f2cde4de4..00000000000
--- a/web/app/components/base/icons/src/vender/solid/communication/AiText.tsx
+++ /dev/null
@@ -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 './AiText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AiText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/EditList.tsx b/web/app/components/base/icons/src/vender/solid/communication/EditList.tsx
deleted file mode 100644
index 8ebe74c13a5..00000000000
--- a/web/app/components/base/icons/src/vender/solid/communication/EditList.tsx
+++ /dev/null
@@ -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 './EditList.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'EditList'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/MessageDotsCircle.tsx b/web/app/components/base/icons/src/vender/solid/communication/MessageDotsCircle.tsx
deleted file mode 100644
index e834cf59afa..00000000000
--- a/web/app/components/base/icons/src/vender/solid/communication/MessageDotsCircle.tsx
+++ /dev/null
@@ -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 './MessageDotsCircle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'MessageDotsCircle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/MessageHeartCircle.tsx b/web/app/components/base/icons/src/vender/solid/communication/MessageHeartCircle.tsx
deleted file mode 100644
index 2ef4c15b325..00000000000
--- a/web/app/components/base/icons/src/vender/solid/communication/MessageHeartCircle.tsx
+++ /dev/null
@@ -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 './MessageHeartCircle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'MessageHeartCircle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.tsx b/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.tsx
deleted file mode 100644
index d746ead9999..00000000000
--- a/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.tsx
+++ /dev/null
@@ -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 './MessageSmileSquare.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'MessageSmileSquare'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/Send03.tsx b/web/app/components/base/icons/src/vender/solid/communication/Send03.tsx
deleted file mode 100644
index 79365cf2ff0..00000000000
--- a/web/app/components/base/icons/src/vender/solid/communication/Send03.tsx
+++ /dev/null
@@ -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 './Send03.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Send03'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/BarChartSquare02.tsx b/web/app/components/base/icons/src/vender/solid/development/BarChartSquare02.tsx
deleted file mode 100644
index bc3a265d34d..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/BarChartSquare02.tsx
+++ /dev/null
@@ -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 './BarChartSquare02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'BarChartSquare02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/Container.tsx b/web/app/components/base/icons/src/vender/solid/development/Container.tsx
deleted file mode 100644
index 6f865feb7ce..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/Container.tsx
+++ /dev/null
@@ -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 './Container.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Container'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/Database02.tsx b/web/app/components/base/icons/src/vender/solid/development/Database02.tsx
deleted file mode 100644
index 2a3fb3185d8..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/Database02.tsx
+++ /dev/null
@@ -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 './Database02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Database02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/Database03.tsx b/web/app/components/base/icons/src/vender/solid/development/Database03.tsx
deleted file mode 100644
index 240fcd9d267..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/Database03.tsx
+++ /dev/null
@@ -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 './Database03.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Database03'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/FileHeart02.tsx b/web/app/components/base/icons/src/vender/solid/development/FileHeart02.tsx
deleted file mode 100644
index 6871eec501c..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/FileHeart02.tsx
+++ /dev/null
@@ -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 './FileHeart02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FileHeart02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/PatternRecognition.tsx b/web/app/components/base/icons/src/vender/solid/development/PatternRecognition.tsx
deleted file mode 100644
index 097b804e0e9..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/PatternRecognition.tsx
+++ /dev/null
@@ -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 './PatternRecognition.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'PatternRecognition'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/PromptEngineering.tsx b/web/app/components/base/icons/src/vender/solid/development/PromptEngineering.tsx
deleted file mode 100644
index 89b0e46a60a..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/PromptEngineering.tsx
+++ /dev/null
@@ -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 './PromptEngineering.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'PromptEngineering'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/PuzzlePiece01.tsx b/web/app/components/base/icons/src/vender/solid/development/PuzzlePiece01.tsx
deleted file mode 100644
index eb1104fe5fb..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/PuzzlePiece01.tsx
+++ /dev/null
@@ -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 './PuzzlePiece01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'PuzzlePiece01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/development/Semantic.tsx b/web/app/components/base/icons/src/vender/solid/development/Semantic.tsx
deleted file mode 100644
index 5adac675bfc..00000000000
--- a/web/app/components/base/icons/src/vender/solid/development/Semantic.tsx
+++ /dev/null
@@ -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 './Semantic.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Semantic'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/editor/Citations.tsx b/web/app/components/base/icons/src/vender/solid/editor/Citations.tsx
deleted file mode 100644
index 991aedf8e4a..00000000000
--- a/web/app/components/base/icons/src/vender/solid/editor/Citations.tsx
+++ /dev/null
@@ -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 './Citations.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Citations'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/editor/Colors.tsx b/web/app/components/base/icons/src/vender/solid/editor/Colors.tsx
deleted file mode 100644
index a0fff0474c8..00000000000
--- a/web/app/components/base/icons/src/vender/solid/editor/Colors.tsx
+++ /dev/null
@@ -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 './Colors.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Colors'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/editor/Paragraph.tsx b/web/app/components/base/icons/src/vender/solid/editor/Paragraph.tsx
deleted file mode 100644
index eb7884b7408..00000000000
--- a/web/app/components/base/icons/src/vender/solid/editor/Paragraph.tsx
+++ /dev/null
@@ -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 './Paragraph.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Paragraph'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/editor/TypeSquare.tsx b/web/app/components/base/icons/src/vender/solid/editor/TypeSquare.tsx
deleted file mode 100644
index 77fb4c2d385..00000000000
--- a/web/app/components/base/icons/src/vender/solid/editor/TypeSquare.tsx
+++ /dev/null
@@ -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 './TypeSquare.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'TypeSquare'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/education/BubbleText.tsx b/web/app/components/base/icons/src/vender/solid/education/BubbleText.tsx
deleted file mode 100644
index 7181fbc5f5d..00000000000
--- a/web/app/components/base/icons/src/vender/solid/education/BubbleText.tsx
+++ /dev/null
@@ -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 './BubbleText.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'BubbleText'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/education/Heart02.tsx b/web/app/components/base/icons/src/vender/solid/education/Heart02.tsx
deleted file mode 100644
index fbbf0fe8e7c..00000000000
--- a/web/app/components/base/icons/src/vender/solid/education/Heart02.tsx
+++ /dev/null
@@ -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 './Heart02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Heart02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/education/index.ts b/web/app/components/base/icons/src/vender/solid/education/index.ts
index e67b6313358..4a8af2253f6 100644
--- a/web/app/components/base/icons/src/vender/solid/education/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/education/index.ts
@@ -1,4 +1,3 @@
 export { default as Beaker02 } from './Beaker02'
-export { default as BubbleText } from './BubbleText'
 
 export { default as Unblur } from './Unblur'
diff --git a/web/app/components/base/icons/src/vender/solid/files/FileSearch02.tsx b/web/app/components/base/icons/src/vender/solid/files/FileSearch02.tsx
deleted file mode 100644
index 8ec1260a030..00000000000
--- a/web/app/components/base/icons/src/vender/solid/files/FileSearch02.tsx
+++ /dev/null
@@ -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 './FileSearch02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'FileSearch02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/AnswerTriangle.tsx b/web/app/components/base/icons/src/vender/solid/general/AnswerTriangle.tsx
deleted file mode 100644
index bb7d8dafb70..00000000000
--- a/web/app/components/base/icons/src/vender/solid/general/AnswerTriangle.tsx
+++ /dev/null
@@ -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 './AnswerTriangle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AnswerTriangle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/CheckDone01.tsx b/web/app/components/base/icons/src/vender/solid/general/CheckDone01.tsx
deleted file mode 100644
index ef6536fa4fa..00000000000
--- a/web/app/components/base/icons/src/vender/solid/general/CheckDone01.tsx
+++ /dev/null
@@ -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 './CheckDone01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'CheckDone01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/Edit04.tsx b/web/app/components/base/icons/src/vender/solid/general/Edit04.tsx
deleted file mode 100644
index 315f5a961fa..00000000000
--- a/web/app/components/base/icons/src/vender/solid/general/Edit04.tsx
+++ /dev/null
@@ -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 './Edit04.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Edit04'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/PlusCircle.tsx b/web/app/components/base/icons/src/vender/solid/general/PlusCircle.tsx
deleted file mode 100644
index 263c4a77a41..00000000000
--- a/web/app/components/base/icons/src/vender/solid/general/PlusCircle.tsx
+++ /dev/null
@@ -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 './PlusCircle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'PlusCircle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.tsx b/web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.tsx
deleted file mode 100644
index b8b0ef2149a..00000000000
--- a/web/app/components/base/icons/src/vender/solid/general/QuestionTriangle.tsx
+++ /dev/null
@@ -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 './QuestionTriangle.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'QuestionTriangle'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/SearchMd.tsx b/web/app/components/base/icons/src/vender/solid/general/SearchMd.tsx
deleted file mode 100644
index d4b074dbccf..00000000000
--- a/web/app/components/base/icons/src/vender/solid/general/SearchMd.tsx
+++ /dev/null
@@ -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 './SearchMd.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'SearchMd'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/ZapNarrow.tsx b/web/app/components/base/icons/src/vender/solid/general/ZapNarrow.tsx
deleted file mode 100644
index 09726132193..00000000000
--- a/web/app/components/base/icons/src/vender/solid/general/ZapNarrow.tsx
+++ /dev/null
@@ -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 './ZapNarrow.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'ZapNarrow'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/layout/Grid01.tsx b/web/app/components/base/icons/src/vender/solid/layout/Grid01.tsx
deleted file mode 100644
index ab3fd1492e3..00000000000
--- a/web/app/components/base/icons/src/vender/solid/layout/Grid01.tsx
+++ /dev/null
@@ -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 './Grid01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Grid01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.tsx
deleted file mode 100644
index 6ad1f539735..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.tsx
+++ /dev/null
@@ -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 './AudioSupportIcon.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'AudioSupportIcon'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.tsx
deleted file mode 100644
index 693d5446a14..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.tsx
+++ /dev/null
@@ -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 './DocumentSupportIcon.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'DocumentSupportIcon'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/MagicEyes.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/MagicEyes.tsx
deleted file mode 100644
index 763524e2959..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/MagicEyes.tsx
+++ /dev/null
@@ -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 './MagicEyes.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'MagicEyes'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/MagicWand.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/MagicWand.tsx
deleted file mode 100644
index 414c49e8965..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/MagicWand.tsx
+++ /dev/null
@@ -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 './MagicWand.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'MagicWand'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Microphone01.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Microphone01.tsx
deleted file mode 100644
index 3c9dd52a67c..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Microphone01.tsx
+++ /dev/null
@@ -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 './Microphone01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Microphone01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Play.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Play.tsx
deleted file mode 100644
index 4f3a32e1653..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Play.tsx
+++ /dev/null
@@ -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 './Play.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Play'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Robot.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Robot.tsx
deleted file mode 100644
index eb047313983..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Robot.tsx
+++ /dev/null
@@ -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 './Robot.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Robot'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Sliders02.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Sliders02.tsx
deleted file mode 100644
index a826b5e8a75..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Sliders02.tsx
+++ /dev/null
@@ -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 './Sliders02.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Sliders02'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Speaker.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Speaker.tsx
deleted file mode 100644
index b2a626cb3ca..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/Speaker.tsx
+++ /dev/null
@@ -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 './Speaker.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Speaker'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.tsx
deleted file mode 100644
index affb3ae4718..00000000000
--- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.tsx
+++ /dev/null
@@ -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 './VideoSupportIcon.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'VideoSupportIcon'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/shapes/Star04.tsx b/web/app/components/base/icons/src/vender/solid/shapes/Star04.tsx
deleted file mode 100644
index 37d6fcd3f40..00000000000
--- a/web/app/components/base/icons/src/vender/solid/shapes/Star04.tsx
+++ /dev/null
@@ -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 './Star04.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Star04'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/shapes/Star06.tsx b/web/app/components/base/icons/src/vender/solid/shapes/Star06.tsx
deleted file mode 100644
index fe540a05bc0..00000000000
--- a/web/app/components/base/icons/src/vender/solid/shapes/Star06.tsx
+++ /dev/null
@@ -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 './Star06.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Star06'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/users/User01.tsx b/web/app/components/base/icons/src/vender/solid/users/User01.tsx
deleted file mode 100644
index 61d029fdba4..00000000000
--- a/web/app/components/base/icons/src/vender/solid/users/User01.tsx
+++ /dev/null
@@ -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 './User01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'User01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/users/Users01.tsx b/web/app/components/base/icons/src/vender/solid/users/Users01.tsx
deleted file mode 100644
index 7e8b57524e1..00000000000
--- a/web/app/components/base/icons/src/vender/solid/users/Users01.tsx
+++ /dev/null
@@ -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 './Users01.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'Users01'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/users/UsersPlus.tsx b/web/app/components/base/icons/src/vender/solid/users/UsersPlus.tsx
deleted file mode 100644
index f1a9a4b5e2a..00000000000
--- a/web/app/components/base/icons/src/vender/solid/users/UsersPlus.tsx
+++ /dev/null
@@ -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 './UsersPlus.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'UsersPlus'
-
-export default Icon
diff --git a/web/app/components/base/icons/src/vender/workflow/IterationStart.tsx b/web/app/components/base/icons/src/vender/workflow/IterationStart.tsx
deleted file mode 100644
index fe82b95ae75..00000000000
--- a/web/app/components/base/icons/src/vender/workflow/IterationStart.tsx
+++ /dev/null
@@ -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 './IterationStart.json'
-
-const Icon = (
-  {
-    ref,
-    ...props
-  }: React.SVGProps<SVGSVGElement> & {
-    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
-  },
-) => <IconBase {...props} ref={ref} data={data as IconData} />
-
-Icon.displayName = 'IterationStart'
-
-export default Icon
diff --git a/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
deleted file mode 100644
index 5608e1cabba..00000000000
--- a/web/app/components/base/image-uploader/__tests__/audio-preview.spec.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import AudioPreview from '../audio-preview'
-
-describe('AudioPreview', () => {
-  const defaultProps = {
-    url: 'https://example.com/audio.mp3',
-    title: 'Test Audio',
-    onCancel: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<AudioPreview {...defaultProps} />)
-      expect(screen.getByTestId('audio-element')).toBeInTheDocument()
-    })
-
-    it('should render audio element with controls', () => {
-      render(<AudioPreview {...defaultProps} />)
-      const audio = screen.getByTestId('audio-element')
-      expect(audio.tagName).toBe('AUDIO')
-      expect(audio).toHaveAttribute('controls')
-    })
-
-    it('should render source element with correct src', () => {
-      render(<AudioPreview {...defaultProps} />)
-      const source = screen.getByTestId('audio-element').querySelector('source')
-      expect(source).toHaveAttribute('src', 'https://example.com/audio.mp3')
-      expect(source).toHaveAttribute('type', 'audio/mpeg')
-    })
-
-    it('should render close button', () => {
-      render(<AudioPreview {...defaultProps} />)
-      expect(screen.getByRole('button', { name: 'common.operation.close' })).toBeInTheDocument()
-    })
-
-    it('should render via portal into document.body', () => {
-      render(<AudioPreview {...defaultProps} />)
-      const overlay = screen.getByTestId('audio-preview-overlay')
-      expect(overlay).toBeInTheDocument()
-      expect(overlay.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
-    })
-  })
-
-  describe('Props', () => {
-    it('should set audio title from title prop', () => {
-      render(<AudioPreview {...defaultProps} title="My Song" />)
-      expect(screen.getByTitle('My Song')).toBeInTheDocument()
-    })
-
-    it('should set audio source from url prop', () => {
-      render(<AudioPreview {...defaultProps} url="https://example.com/song.mp3" />)
-      const source = screen.getByTestId('audio-element').querySelector('source')
-      expect(source).toHaveAttribute('src', 'https://example.com/song.mp3')
-    })
-
-    it('should set autoPlay to false', () => {
-      render(<AudioPreview {...defaultProps} />)
-      const audio = screen.getByTestId('audio-element') as HTMLAudioElement
-      expect(audio.autoplay).toBe(false)
-    })
-
-    it('should set preload to metadata', () => {
-      render(<AudioPreview {...defaultProps} />)
-      const audio = screen.getByTestId('audio-element')
-      expect(audio).toHaveAttribute('preload', 'metadata')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onCancel when close button is clicked', async () => {
-      const user = userEvent.setup()
-      const onCancel = vi.fn()
-      render(<AudioPreview {...defaultProps} onCancel={onCancel} />)
-
-      const closeBtn = screen.getByRole('button', { name: 'common.operation.close' })
-      await user.click(closeBtn)
-
-      expect(onCancel).toHaveBeenCalledTimes(1)
-    })
-
-    it('should not call onCancel when overlay background is clicked', async () => {
-      const user = userEvent.setup()
-      const onCancel = vi.fn()
-      render(<AudioPreview {...defaultProps} onCancel={onCancel} />)
-
-      const overlay = screen.getByTestId('audio-preview-overlay')
-      await user.click(overlay)
-
-      // Clicking the overlay backdrop should not trigger onCancel
-      expect(onCancel).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle empty url', () => {
-      render(<AudioPreview {...defaultProps} url="" />)
-      const source = screen.getByTestId('audio-element').querySelector('source')
-      expect(source).toBeInTheDocument()
-    })
-
-    it('should handle empty title', () => {
-      render(<AudioPreview {...defaultProps} title="" />)
-      const audio = screen.getByTestId('audio-element')
-      expect(audio).toBeInTheDocument()
-      expect(audio).toHaveAttribute('title', '')
-    })
-  })
-})
diff --git a/web/app/components/base/image-uploader/__tests__/chat-image-uploader.spec.tsx b/web/app/components/base/image-uploader/__tests__/chat-image-uploader.spec.tsx
deleted file mode 100644
index c40bdb45a59..00000000000
--- a/web/app/components/base/image-uploader/__tests__/chat-image-uploader.spec.tsx
+++ /dev/null
@@ -1,314 +0,0 @@
-import type { useLocalFileUploader } from '../hooks'
-import type { ImageFile, VisionSettings } from '@/types/app'
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Resolution, TransferMethod } from '@/types/app'
-import ChatImageUploader from '../chat-image-uploader'
-
-type LocalUploaderArgs = Parameters<typeof useLocalFileUploader>[0]
-
-const mocks = vi.hoisted(() => ({
-  hookArgs: undefined as LocalUploaderArgs | undefined,
-  handleLocalFileUpload: vi.fn<(file: File) => void>(),
-}))
-
-vi.mock('../hooks', () => ({
-  useLocalFileUploader: (args: LocalUploaderArgs) => {
-    mocks.hookArgs = args
-    return {
-      disabled: args.disabled ?? false,
-      handleLocalFileUpload: mocks.handleLocalFileUpload,
-    }
-  },
-}))
-
-const createSettings = (overrides: Partial<VisionSettings> = {}): VisionSettings => ({
-  enabled: true,
-  number_limits: 5,
-  detail: Resolution.high,
-  transfer_methods: [TransferMethod.local_file],
-  image_file_size_limit: 10,
-  ...overrides,
-})
-
-const queryFileInput = () => {
-  return screen.queryByTestId('local-file-input') as HTMLInputElement | null
-}
-
-const getFileInput = () => {
-  const input = queryFileInput()
-  if (!input)
-    throw new Error('Expected file input to exist')
-  return input
-}
-
-describe('ChatImageUploader', () => {
-  const defaultOnUpload = vi.fn()
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mocks.hookArgs = undefined
-    mocks.handleLocalFileUpload.mockImplementation((file) => {
-      mocks.hookArgs?.onUpload({
-        type: TransferMethod.local_file,
-        _id: 'local-upload-id',
-        fileId: '',
-        progress: 0,
-        url: 'data:image/png;base64,mock',
-        file,
-      } as ImageFile)
-    })
-  })
-
-  describe('Rendering', () => {
-    it('should render UploadOnlyFromLocal when only local_file transfer method', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      expect(queryFileInput()).toBeInTheDocument()
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
-    })
-
-    it('should render UploaderButton when remote_url is a transfer method', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('should render UploaderButton when both transfer methods are present', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should pass limit from image_file_size_limit to uploader hook', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file],
-        image_file_size_limit: 20,
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      expect(mocks.hookArgs?.limit).toBe(20)
-    })
-
-    it('should convert string image_file_size_limit to number', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file],
-        image_file_size_limit: '15',
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      expect(mocks.hookArgs?.limit).toBe(15)
-    })
-
-    it('should pass disabled prop in local-only mode', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} disabled />)
-
-      expect(mocks.hookArgs?.disabled).toBe(true)
-      expect(getFileInput()).toBeDisabled()
-    })
-
-    it('should pass disabled prop in button mode', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} disabled />)
-
-      expect(screen.getByRole('button')).toBeDisabled()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onUpload when a local file is uploaded', async () => {
-      const user = userEvent.setup()
-      const onUpload = vi.fn()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={onUpload} />)
-
-      const input = getFileInput()
-      const file = new File(['hello'], 'demo.png', { type: 'image/png' })
-      await user.upload(input, file)
-
-      expect(mocks.handleLocalFileUpload).toHaveBeenCalledWith(file)
-      expect(onUpload).toHaveBeenCalledWith(expect.objectContaining({
-        type: TransferMethod.local_file,
-      }))
-    })
-
-    it('should open popover when uploader trigger is clicked', async () => {
-      const user = userEvent.setup()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      await user.click(screen.getByRole('button'))
-
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-    })
-
-    it('should call onUpload when a remote image link is submitted', async () => {
-      const user = userEvent.setup()
-      const onUpload = vi.fn()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={onUpload} />)
-
-      await user.click(screen.getByRole('button'))
-      await user.type(screen.getByTestId('image-link-input'), 'https://example.com/image.png')
-      await user.click(screen.getByRole('button', { name: 'common.operation.ok' }))
-
-      expect(onUpload).toHaveBeenCalledWith(expect.objectContaining({
-        type: TransferMethod.remote_url,
-        url: 'https://example.com/image.png',
-        progress: 0,
-      }))
-    })
-
-    it('should not open popover when uploader trigger is disabled', async () => {
-      const user = userEvent.setup()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} disabled />)
-
-      await user.click(screen.getByRole('button'))
-
-      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
-    })
-
-    it('should keep popover closed when trigger wrapper is clicked while disabled', async () => {
-      const user = userEvent.setup()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} disabled />)
-
-      const button = screen.getByRole('button')
-      const triggerWrapper = button.parentElement
-      if (!triggerWrapper)
-        throw new Error('Expected trigger wrapper to exist')
-
-      await user.click(triggerWrapper)
-
-      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
-    })
-
-    it('should show OR separator and local uploader when both methods are available', async () => {
-      const user = userEvent.setup()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      await user.click(screen.getByRole('button'))
-
-      expect(screen.getByText(/OR/i)).toBeInTheDocument()
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(queryFileInput()).toBeInTheDocument()
-    })
-
-    it('should close popover when local upload calls closePopover in mixed mode', async () => {
-      const user = userEvent.setup()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
-      })
-
-      mocks.handleLocalFileUpload.mockImplementation((file) => {
-        mocks.hookArgs?.onUpload({
-          type: TransferMethod.local_file,
-          _id: 'mixed-local-upload-id',
-          fileId: '',
-          progress: 0,
-          url: 'data:image/png;base64,mixed',
-          file,
-        } as ImageFile)
-      })
-
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      await user.click(screen.getByRole('button'))
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-
-      const localInput = getFileInput()
-      const file = new File(['hello'], 'mixed.png', { type: 'image/png' })
-      await user.upload(localInput, file)
-
-      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
-    })
-
-    it('should toggle local-upload hover style in mixed transfer mode', async () => {
-      const user = userEvent.setup()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      await user.click(screen.getByRole('button'))
-
-      const uploadFromComputer = screen.getByText('common.imageUploader.uploadFromComputer')
-      expect(uploadFromComputer).not.toHaveClass('bg-primary-50')
-
-      const localInput = getFileInput()
-      const hoverWrapper = localInput.parentElement
-      if (!hoverWrapper)
-        throw new Error('Expected local uploader wrapper to exist')
-
-      fireEvent.mouseEnter(hoverWrapper)
-      expect(uploadFromComputer).toHaveClass('bg-primary-50')
-
-      fireEvent.mouseLeave(hoverWrapper)
-      expect(uploadFromComputer).not.toHaveClass('bg-primary-50')
-    })
-
-    it('should not show OR separator or local uploader when only remote_url method', async () => {
-      const user = userEvent.setup()
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.remote_url],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      await user.click(screen.getByRole('button'))
-
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.queryByText(/OR/i)).not.toBeInTheDocument()
-      expect(queryFileInput()).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should render UploaderButton for all transfer method', () => {
-      const settings = createSettings({
-        transfer_methods: [TransferMethod.all],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('should render UploaderButton when transfer_methods is empty', () => {
-      const settings = createSettings({
-        transfer_methods: [],
-      })
-      render(<ChatImageUploader settings={settings} onUpload={defaultOnUpload} />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx b/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
deleted file mode 100644
index 4b98b4af9c3..00000000000
--- a/web/app/components/base/image-uploader/__tests__/video-preview.spec.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import VideoPreview from '../video-preview'
-
-const getOverlay = () => screen.getByTestId('video-preview')
-const getCloseButton = () => screen.getByRole('button', { name: 'common.operation.close' })
-describe('VideoPreview', () => {
-  const defaultProps = {
-    url: 'https://example.com/video.mp4',
-    title: 'Test Video',
-    onCancel: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<VideoPreview {...defaultProps} />)
-
-      expect(screen.getByTitle('Test Video')).toBeInTheDocument()
-    })
-
-    it('should render video element with controls and preload metadata', () => {
-      render(<VideoPreview {...defaultProps} />)
-
-      const video = screen.getByTitle('Test Video')
-      expect(video.tagName).toBe('VIDEO')
-      expect(video).toHaveAttribute('controls')
-      expect(video).toHaveAttribute('preload', 'metadata')
-      expect((video as HTMLVideoElement).autoplay).toBe(false)
-    })
-
-    it('should render source element with correct src and type', () => {
-      render(<VideoPreview {...defaultProps} />)
-
-      const source = screen.getByTitle('Test Video').querySelector('source')
-      expect(source).toHaveAttribute('src', 'https://example.com/video.mp4')
-      expect(source).toHaveAttribute('type', 'video/mp4')
-    })
-
-    it('should render close button', () => {
-      render(<VideoPreview {...defaultProps} />)
-
-      expect(getCloseButton()).toBeInTheDocument()
-    })
-
-    it('should render via portal into document.body', () => {
-      render(<VideoPreview {...defaultProps} />)
-
-      const overlay = getOverlay()
-      expect(overlay).toBeInTheDocument()
-      expect(overlay.closest('[data-base-ui-portal]')?.parentElement).toBe(document.body)
-    })
-  })
-
-  describe('Props', () => {
-    it('should set video title from title prop', () => {
-      render(<VideoPreview {...defaultProps} title="Demo Video" />)
-
-      expect(screen.getByTitle('Demo Video')).toBeInTheDocument()
-    })
-
-    it('should set video source from url prop', () => {
-      render(<VideoPreview {...defaultProps} url="https://example.com/demo.mp4" />)
-
-      const source = screen.getByTitle('Test Video').querySelector('source')
-      expect(source).toHaveAttribute('src', 'https://example.com/demo.mp4')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onCancel when close button is clicked', async () => {
-      const user = userEvent.setup()
-      const onCancel = vi.fn()
-
-      render(<VideoPreview {...defaultProps} onCancel={onCancel} />)
-
-      const closeButton = getCloseButton()
-      await user.click(closeButton)
-
-      expect(onCancel).toHaveBeenCalledTimes(1)
-    })
-
-    it('should not call onCancel when overlay is clicked', async () => {
-      const user = userEvent.setup()
-      const onCancel = vi.fn()
-      render(<VideoPreview {...defaultProps} onCancel={onCancel} />)
-
-      const overlay = getOverlay()
-      await user.click(overlay)
-
-      expect(onCancel).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle empty url', () => {
-      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { })
-      render(<VideoPreview {...defaultProps} url="" />)
-
-      const source = screen.getByTestId('video-element').querySelector('source')
-      expect(source).not.toHaveAttribute('src')
-
-      consoleErrorSpy.mockRestore()
-    })
-
-    it('should handle empty title', () => {
-      render(<VideoPreview {...defaultProps} title="" />)
-
-      const video = screen.getByTestId('video-element')
-      expect(video).toBeInTheDocument()
-      expect(video).toHaveAttribute('title', '')
-    })
-  })
-})
diff --git a/web/app/components/base/image-uploader/audio-preview.tsx b/web/app/components/base/image-uploader/audio-preview.tsx
deleted file mode 100644
index 32d5e2459e9..00000000000
--- a/web/app/components/base/image-uploader/audio-preview.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { FC } from 'react'
-import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
-import { useTranslation } from 'react-i18next'
-
-type AudioPreviewProps = {
-  url: string
-  title: string
-  onCancel: () => void
-}
-const AudioPreview: FC<AudioPreviewProps> = ({
-  url,
-  title,
-  onCancel,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <Dialog
-      open
-      onOpenChange={(open) => {
-        if (!open)
-          onCancel()
-      }}
-      disablePointerDismissal
-    >
-      <DialogContent
-        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
-        backdropClassName="bg-transparent!"
-      >
-        <div
-          aria-label={title}
-          data-testid="audio-preview-overlay"
-          tabIndex={-1}
-          onClick={e => e.stopPropagation()}
-        >
-          <audio controls title={title} autoPlay={false} preload="metadata" data-testid="audio-element">
-            <source
-              type="audio/mpeg"
-              src={url}
-              className="max-h-full max-w-full"
-            />
-          </audio>
-        </div>
-        <button
-          type="button"
-          aria-label={t('operation.close', { ns: 'common' })}
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/8 p-0 backdrop-blur-[2px]"
-          onClick={onCancel}
-        >
-          <span className="i-ri-close-line size-4 text-gray-500" aria-hidden="true" />
-        </button>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default AudioPreview
diff --git a/web/app/components/base/image-uploader/chat-image-uploader.tsx b/web/app/components/base/image-uploader/chat-image-uploader.tsx
deleted file mode 100644
index 66891dea375..00000000000
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import type { FC } from 'react'
-import type { ImageFile, VisionSettings } from '@/types/app'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@langgenius/dify-ui/popover'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { TransferMethod } from '@/types/app'
-import ImageLinkInput from './image-link-input'
-import Uploader from './uploader'
-
-type UploadOnlyFromLocalProps = {
-  onUpload: (imageFile: ImageFile) => void
-  disabled?: boolean
-  limit?: number
-}
-const UploadOnlyFromLocal: FC<UploadOnlyFromLocalProps> = ({
-  onUpload,
-  disabled,
-  limit,
-}) => {
-  return (
-    <Uploader onUpload={onUpload} disabled={disabled} limit={limit}>
-      {hovering => (
-        <div
-          className={`
-            relative flex size-8 cursor-pointer items-center justify-center rounded-lg
-            ${hovering && 'bg-gray-100'}
-          `}
-        >
-          <span className="i-custom-vender-line-images-image-plus size-4 text-gray-500" />
-        </div>
-      )}
-    </Uploader>
-  )
-}
-
-type UploaderButtonProps = {
-  methods: VisionSettings['transfer_methods']
-  onUpload: (imageFile: ImageFile) => void
-  disabled?: boolean
-  limit?: number
-}
-const UploaderButton: FC<UploaderButtonProps> = ({
-  methods,
-  onUpload,
-  disabled,
-  limit,
-}) => {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-
-  const hasUploadFromLocal = methods.find(
-    method => method === TransferMethod.local_file,
-  )
-
-  const handleUpload = (imageFile: ImageFile) => {
-    onUpload(imageFile)
-  }
-
-  const closePopover = () => setOpen(false)
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={(nextOpen) => {
-        if (disabled)
-          return
-        setOpen(nextOpen)
-      }}
-    >
-      <PopoverTrigger
-        render={(
-          <button
-            type="button"
-            disabled={disabled}
-            className="relative flex size-8 items-center justify-center rounded-lg enabled:hover:bg-gray-100 disabled:cursor-not-allowed"
-          >
-            <span className="i-custom-vender-line-images-image-plus size-4 text-gray-500" />
-          </button>
-        )}
-      />
-      <PopoverContent
-        placement="top-start"
-        sideOffset={0}
-        popupClassName="border-none bg-transparent shadow-none"
-      >
-        <div className="w-[260px] rounded-lg border-[0.5px] border-gray-200 bg-white p-2 shadow-lg">
-          <ImageLinkInput onUpload={handleUpload} disabled={disabled} />
-          {!!hasUploadFromLocal && (
-            <>
-              <div className="mt-2 flex items-center px-2 text-xs font-medium text-gray-400">
-                <div className="mr-3 h-px w-[93px] bg-linear-to-l from-[#F3F4F6]" />
-                OR
-                <div className="ml-3 h-px w-[93px] bg-linear-to-r from-[#F3F4F6]" />
-              </div>
-              <Uploader
-                onUpload={handleUpload}
-                limit={limit}
-                closePopover={closePopover}
-              >
-                {hovering => (
-                  <div
-                    className={cn(
-                      'flex h-8 cursor-pointer items-center justify-center rounded-lg text-[13px] font-medium text-[#155EEF]',
-                      hovering && 'bg-primary-50',
-                    )}
-                  >
-                    <span className="mr-1 i-custom-vender-line-general-upload-03 size-4" />
-                    {t('imageUploader.uploadFromComputer', { ns: 'common' })}
-                  </div>
-                )}
-              </Uploader>
-            </>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-type ChatImageUploaderProps = {
-  settings: VisionSettings
-  onUpload: (imageFile: ImageFile) => void
-  disabled?: boolean
-}
-const ChatImageUploader: FC<ChatImageUploaderProps> = ({
-  settings,
-  onUpload,
-  disabled,
-}) => {
-  const onlyUploadLocal
-    = settings.transfer_methods.length === 1
-      && settings.transfer_methods[0] === TransferMethod.local_file
-
-  if (onlyUploadLocal) {
-    return (
-      <UploadOnlyFromLocal
-        onUpload={onUpload}
-        disabled={disabled}
-        limit={+settings.image_file_size_limit!}
-      />
-    )
-  }
-
-  return (
-    <UploaderButton
-      methods={settings.transfer_methods}
-      onUpload={onUpload}
-      disabled={disabled}
-      limit={+settings.image_file_size_limit!}
-    />
-  )
-}
-
-export default ChatImageUploader
diff --git a/web/app/components/base/image-uploader/video-preview.tsx b/web/app/components/base/image-uploader/video-preview.tsx
deleted file mode 100644
index 6a6ad810dbe..00000000000
--- a/web/app/components/base/image-uploader/video-preview.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { FC } from 'react'
-import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
-import { useTranslation } from 'react-i18next'
-
-type VideoPreviewProps = {
-  url: string
-  title: string
-  onCancel: () => void
-}
-const VideoPreview: FC<VideoPreviewProps> = ({
-  url,
-  title,
-  onCancel,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <Dialog
-      open
-      onOpenChange={(open) => {
-        if (!open)
-          onCancel()
-      }}
-      disablePointerDismissal
-    >
-      <DialogContent
-        className="inset-0! top-0! left-0! flex h-dvh! max-h-none! w-screen! max-w-none! translate-0! items-center justify-center overflow-hidden! rounded-none! border-none! bg-black/80 p-8! shadow-none!"
-        backdropClassName="bg-transparent!"
-      >
-        <div
-          aria-label={title}
-          data-testid="video-preview"
-          tabIndex={-1}
-          onClick={e => e.stopPropagation()}
-        >
-          <video controls title={title} autoPlay={false} preload="metadata" data-testid="video-element">
-            <source
-              type="video/mp4"
-              src={url}
-              className="max-h-full max-w-full"
-            />
-          </video>
-        </div>
-        <button
-          type="button"
-          aria-label={t('operation.close', { ns: 'common' })}
-          className="absolute top-6 right-6 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-white/8 p-0 backdrop-blur-[2px]"
-          onClick={onCancel}
-        >
-          <span className="i-ri-close-line size-4 text-gray-500" aria-hidden="true" />
-        </button>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default VideoPreview
diff --git a/web/app/components/base/logo/__tests__/logo-site.spec.tsx b/web/app/components/base/logo/__tests__/logo-site.spec.tsx
deleted file mode 100644
index 0ea8f428000..00000000000
--- a/web/app/components/base/logo/__tests__/logo-site.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import LogoSite from '../logo-site'
-
-vi.mock('@/utils/var', () => ({
-  basePath: '/test-base-path',
-}))
-
-describe('LogoSite', () => {
-  it('renders correctly with default props', () => {
-    render(<LogoSite />)
-    const img = screen.getByRole('img', { name: /logo/i })
-    expect(img).toBeInTheDocument()
-    expect(img).toHaveAttribute('src', '/test-base-path/logo/logo.png')
-  })
-
-  it('applies custom className correctly', () => {
-    const customClass = 'custom-site-class'
-    render(<LogoSite className={customClass} />)
-    const img = screen.getByRole('img', { name: /logo/i })
-    expect(img).toHaveClass(customClass)
-  })
-})
diff --git a/web/app/components/base/logo/index.stories.tsx b/web/app/components/base/logo/index.stories.tsx
deleted file mode 100644
index 90209564aeb..00000000000
--- a/web/app/components/base/logo/index.stories.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { ReactNode } from 'react'
-import { ThemeProvider } from 'next-themes'
-import DifyLogo from './dify-logo'
-import LogoEmbeddedChatAvatar from './logo-embedded-chat-avatar'
-import LogoEmbeddedChatHeader from './logo-embedded-chat-header'
-import LogoSite from './logo-site'
-
-const meta = {
-  title: 'Base/General/Logo',
-  component: DifyLogo,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Brand assets rendered in different contexts. DifyLogo adapts to the active theme while other variants target specific surfaces.',
-      },
-    },
-  },
-  args: {
-    size: 'medium',
-    style: 'default',
-  },
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['large', 'medium', 'small'],
-    },
-    style: {
-      control: 'radio',
-      options: ['default', 'monochromeWhite'],
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof DifyLogo>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const ThemePreview = ({ theme, children }: { theme: 'light' | 'dark', children: ReactNode }) => {
-  return (
-    <ThemeProvider attribute="data-theme" forcedTheme={theme} enableSystem={false}>
-      <div
-        className="min-w-[320px] rounded-2xl border border-divider-subtle bg-background-default-subtle p-6 shadow-sm"
-      >
-        {children}
-      </div>
-    </ThemeProvider>
-  )
-}
-
-export const Playground: Story = {
-  render: ({ size, style }) => {
-    return (
-      <ThemePreview theme="dark">
-        <div className="flex flex-col gap-6">
-          <div className="flex flex-col gap-2">
-            <span className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Primary logo</span>
-            <div className="flex items-center justify-between rounded-xl border border-divider-subtle bg-background-default p-4">
-              <DifyLogo size={size} style={style} />
-              <code className="text-[11px] text-text-tertiary">{`size="${size}" | style="${style}"`}</code>
-            </div>
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
-              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Site favicon</span>
-              <LogoSite />
-            </div>
-            <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4">
-              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded header</span>
-              <LogoEmbeddedChatHeader />
-            </div>
-            <div className="flex flex-col gap-2 rounded-xl border border-divider-subtle bg-background-default p-4 sm:col-span-2">
-              <span className="text-[11px] font-medium tracking-widest text-text-tertiary uppercase">Embedded avatar</span>
-              <LogoEmbeddedChatAvatar className="border-divider-strong rounded-2xl border" />
-            </div>
-          </div>
-        </div>
-      </ThemePreview>
-    )
-  },
-}
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
deleted file mode 100644
index be3d2b31dd5..00000000000
--- a/web/app/components/base/logo/logo-site.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { cn } from '@langgenius/dify-ui/cn'
-import { basePath } from '@/utils/var'
-
-type LogoSiteProps = {
-  className?: string
-}
-
-const LogoSite: FC<LogoSiteProps> = ({
-  className,
-}) => {
-  return (
-    <img
-      src={`${basePath}/logo/logo.png`}
-      className={cn('block h-[24.5px] w-[22.651px]', className)}
-      alt="logo"
-    />
-  )
-}
-
-export default LogoSite
diff --git a/web/app/components/base/prompt-editor/plugins/__tests__/tree-view.spec.tsx b/web/app/components/base/prompt-editor/plugins/__tests__/tree-view.spec.tsx
deleted file mode 100644
index a61e9dd209a..00000000000
--- a/web/app/components/base/prompt-editor/plugins/__tests__/tree-view.spec.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { LexicalEditor } from 'lexical'
-import { LexicalComposer } from '@lexical/react/LexicalComposer'
-import { render, screen, waitFor } from '@testing-library/react'
-import { CaptureEditorPlugin } from '../test-utils'
-import TreeViewPlugin from '../tree-view'
-
-const { mockTreeView } = vi.hoisted(() => ({
-  mockTreeView: vi.fn(),
-}))
-
-vi.mock('@lexical/react/LexicalTreeView', () => ({
-  TreeView: (props: unknown) => {
-    mockTreeView(props)
-    return <div data-testid="lexical-tree-view" />
-  },
-}))
-
-describe('TreeViewPlugin', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should render lexical tree view with expected classes and current editor', async () => {
-    let editor: LexicalEditor | null = null
-
-    render(
-      <LexicalComposer
-        initialConfig={{
-          namespace: 'tree-view-plugin-test',
-          onError: (error: Error) => {
-            throw error
-          },
-        }}
-      >
-        <TreeViewPlugin />
-        <CaptureEditorPlugin onReady={(value) => {
-          editor = value
-        }}
-        />
-      </LexicalComposer>,
-    )
-
-    await waitFor(() => {
-      expect(editor).not.toBeNull()
-    })
-    expect(screen.getByTestId('lexical-tree-view'))!.toBeInTheDocument()
-
-    const firstCallProps = mockTreeView.mock.calls[0]![0] as Record<string, unknown>
-
-    expect(firstCallProps.editor).toBe(editor)
-    expect(firstCallProps.viewClassName).toBe('tree-view-output')
-    expect(firstCallProps.treeTypeButtonClassName).toBe('debug-treetype-button')
-    expect(firstCallProps.timeTravelPanelClassName).toBe('debug-timetravel-panel')
-    expect(firstCallProps.timeTravelButtonClassName).toBe('debug-timetravel-button')
-    expect(firstCallProps.timeTravelPanelSliderClassName).toBe('debug-timetravel-panel-slider')
-    expect(firstCallProps.timeTravelPanelButtonClassName).toBe('debug-timetravel-panel-button')
-  })
-})
diff --git a/web/app/components/base/prompt-editor/plugins/tree-view.tsx b/web/app/components/base/prompt-editor/plugins/tree-view.tsx
deleted file mode 100644
index 29028cb2c3d..00000000000
--- a/web/app/components/base/prompt-editor/plugins/tree-view.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { TreeView } from '@lexical/react/LexicalTreeView'
-
-const TreeViewPlugin = () => {
-  const [editor] = useLexicalComposerContext()
-  return (
-    <TreeView
-      viewClassName="tree-view-output"
-      treeTypeButtonClassName="debug-treetype-button"
-      timeTravelPanelClassName="debug-timetravel-panel"
-      timeTravelButtonClassName="debug-timetravel-button"
-      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
-      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
-      editor={editor}
-    />
-  )
-}
-
-export default TreeViewPlugin
diff --git a/web/app/components/base/spinner/__tests__/index.spec.tsx b/web/app/components/base/spinner/__tests__/index.spec.tsx
deleted file mode 100644
index 50cf2d3b04b..00000000000
--- a/web/app/components/base/spinner/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { render } from '@testing-library/react'
-import * as React from 'react'
-import Spinner from '../index'
-
-describe('Spinner component', () => {
-  it('should render correctly when loading is true', () => {
-    const { container } = render(<Spinner loading={true} />)
-    const spinner = container.firstChild as HTMLElement
-
-    expect(spinner).toHaveClass('animate-spin')
-
-    // Check for accessibility text
-    const screenReaderText = spinner.querySelector('span')
-    expect(screenReaderText).toBeInTheDocument()
-    expect(screenReaderText).toHaveTextContent('Loading...')
-  })
-
-  it('should be hidden when loading is false', () => {
-    const { container } = render(<Spinner loading={false} />)
-    const spinner = container.firstChild as HTMLElement
-
-    expect(spinner).toHaveClass('hidden')
-  })
-
-  it('should render with custom className', () => {
-    const customClass = 'text-blue-500'
-    const { container } = render(<Spinner loading={true} className={customClass} />)
-    const spinner = container.firstChild as HTMLElement
-
-    expect(spinner).toHaveClass(customClass)
-  })
-
-  it('should render children correctly', () => {
-    const childText = 'Child content'
-    const { getByText } = render(
-      <Spinner loading={true}>{childText}</Spinner>,
-    )
-
-    expect(getByText(childText)).toBeInTheDocument()
-  })
-
-  it('should use default loading value (false) when not provided', () => {
-    const { container } = render(<Spinner />)
-    const spinner = container.firstChild as HTMLElement
-
-    expect(spinner).toHaveClass('hidden')
-  })
-})
diff --git a/web/app/components/base/spinner/index.stories.tsx b/web/app/components/base/spinner/index.stories.tsx
deleted file mode 100644
index cff5c367944..00000000000
--- a/web/app/components/base/spinner/index.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
-import Spinner from '.'
-
-const SpinnerPlayground = ({
-  loading = true,
-}: {
-  loading?: boolean
-}) => {
-  const [isLoading, setIsLoading] = useState(loading)
-
-  return (
-    <div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <p className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Spinner</p>
-      <Spinner loading={isLoading} className="text-primary-500" />
-      <button
-        type="button"
-        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
-        onClick={() => setIsLoading(prev => !prev)}
-      >
-        {isLoading ? 'Stop' : 'Start'}
-        {' '}
-        loading
-      </button>
-    </div>
-  )
-}
-
-const meta = {
-  title: 'Base/Feedback/Spinner',
-  component: SpinnerPlayground,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Minimal spinner powered by Tailwind utilities. Toggle the state to inspect motion-reduced behaviour.',
-      },
-    },
-  },
-  argTypes: {
-    loading: { control: 'boolean' },
-  },
-  args: {
-    loading: true,
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof SpinnerPlayground>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {}
diff --git a/web/app/components/base/spinner/index.tsx b/web/app/components/base/spinner/index.tsx
deleted file mode 100644
index 76cc53eb798..00000000000
--- a/web/app/components/base/spinner/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { FC } from 'react'
-import * as React from 'react'
-
-type Props = Readonly<{
-  loading?: boolean
-  className?: string
-  children?: React.ReactNode | string
-}>
-
-const Spinner: FC<Props> = ({ loading = false, children, className }) => {
-  return (
-    <div
-      className={`inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] text-gray-200 ${loading ? 'motion-reduce:animate-[spin_1.5s_linear_infinite]' : 'hidden'} ${className ?? ''}`}
-      role="status"
-    >
-      <span
-        className="absolute! -m-px! size-px! overflow-hidden! border-0! p-0! whitespace-nowrap! [clip:rect(0,0,0,0)]!"
-      >
-        Loading...
-      </span>
-      {children}
-    </div>
-  )
-}
-
-export default Spinner
diff --git a/web/app/components/base/with-input-validation/__tests__/index.spec.tsx b/web/app/components/base/with-input-validation/__tests__/index.spec.tsx
deleted file mode 100644
index 6c3337ba000..00000000000
--- a/web/app/components/base/with-input-validation/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { noop } from 'es-toolkit/function'
-import * as z from 'zod'
-import withValidation from '..'
-
-describe('withValidation HOC', () => {
-  // schema for validation
-  const schema = z.object({ name: z.string() })
-  type Props = z.infer<typeof schema> & {
-    age: number
-  }
-
-  const TestComponent = ({ name, age }: Props) => (
-    <div>
-      {name}
-      {' '}
-      -
-      {' '}
-      {age}
-    </div>
-  )
-  const WrappedComponent = withValidation(TestComponent, schema)
-
-  beforeAll(() => {
-    vi.spyOn(console, 'error').mockImplementation(noop)
-  })
-
-  afterAll(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('renders the component when validation passes', () => {
-    render(<WrappedComponent name="Valid Name" age={30} />)
-    expect(screen.getByText('Valid Name - 30')).toBeInTheDocument()
-  })
-
-  it('renders the component when props is invalid but not in schema ', () => {
-    render(<WrappedComponent name="Valid Name" age={'aaa' as unknown as number} />)
-    expect(screen.getByText('Valid Name - aaa')).toBeInTheDocument()
-  })
-
-  it('does not render the component when validation fails', () => {
-    render(<WrappedComponent name={123 as unknown as string} age={30} />)
-    expect(screen.queryByText('123 - 30')).toBeNull()
-  })
-})
diff --git a/web/app/components/base/with-input-validation/index.stories.tsx b/web/app/components/base/with-input-validation/index.stories.tsx
deleted file mode 100644
index bd5230c68bd..00000000000
--- a/web/app/components/base/with-input-validation/index.stories.tsx
+++ /dev/null
@@ -1,515 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import * as z from 'zod'
-import withValidation from '.'
-
-// Sample components to wrap with validation
-type UserCardProps = {
-  name: string
-  email: string
-  age: number
-  role?: string
-}
-
-const UserCard = ({ name, email, age, role }: UserCardProps) => {
-  return (
-    <div className="rounded-lg border border-gray-200 bg-white p-4">
-      <h3 className="mb-2 text-lg font-semibold">{name}</h3>
-      <div className="space-y-1 text-sm text-gray-600">
-        <div>
-          Email:
-          {email}
-        </div>
-        <div>
-          Age:
-          {age}
-        </div>
-        {role && (
-          <div>
-            Role:
-            {role}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-type ProductCardProps = {
-  name: string
-  price: number
-  category: string
-  inStock: boolean
-}
-
-const ProductCard = ({ name, price, category, inStock }: ProductCardProps) => {
-  return (
-    <div className="rounded-lg border border-gray-200 bg-white p-4">
-      <h3 className="mb-2 text-lg font-semibold">{name}</h3>
-      <div className="space-y-1 text-sm">
-        <div className="text-xl font-bold text-green-600">
-          $
-          {price}
-        </div>
-        <div className="text-gray-600">
-          Category:
-          {category}
-        </div>
-        <div className={inStock ? 'text-green-600' : 'text-red-600'}>
-          {inStock ? '✓ In Stock' : '✗ Out of Stock'}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// Create validated versions
-const userSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.email('Invalid email'),
-  age: z.number().min(0).max(150),
-})
-
-const productSchema = z.object({
-  name: z.string().min(1, 'Product name required'),
-  price: z.number().positive('Price must be positive'),
-  category: z.string().min(1, 'Category required'),
-  inStock: z.boolean(),
-})
-
-const ValidatedUserCard = withValidation(UserCard, userSchema)
-const ValidatedProductCard = withValidation(ProductCard, productSchema)
-
-const meta = {
-  title: 'Base/Data Entry/WithInputValidation',
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Higher-order component (HOC) for wrapping components with Zod schema validation. Validates props before rendering and returns null if validation fails, logging errors to console.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// Valid data example
-export const ValidData: Story = {
-  render: () => (
-    <div style={{ width: '400px' }}>
-      <h3 className="mb-4 text-lg font-semibold">Valid Props (Renders Successfully)</h3>
-      <ValidatedUserCard
-        name="John Doe"
-        email="john@example.com"
-        age={30}
-        role="Developer"
-      />
-    </div>
-  ),
-}
-
-// Invalid email
-export const InvalidEmail: Story = {
-  render: () => (
-    <div style={{ width: '400px' }}>
-      <h3 className="mb-4 text-lg font-semibold">Invalid Email (Returns null)</h3>
-      <p className="mb-4 text-sm text-gray-600">
-        Check console for validation error. Component won't render.
-      </p>
-      <ValidatedUserCard
-        name="John Doe"
-        email="invalid-email"
-        age={30}
-        role="Developer"
-      />
-      <div className="mt-4 rounded-lg bg-red-50 p-3 text-sm text-red-800">
-        ⚠️ Validation failed: Invalid email format
-      </div>
-    </div>
-  ),
-}
-
-// Invalid age
-export const InvalidAge: Story = {
-  render: () => (
-    <div style={{ width: '400px' }}>
-      <h3 className="mb-4 text-lg font-semibold">Invalid Age (Returns null)</h3>
-      <p className="mb-4 text-sm text-gray-600">
-        Age must be between 0 and 150. Check console.
-      </p>
-      <ValidatedUserCard
-        name="John Doe"
-        email="john@example.com"
-        age={200}
-        role="Developer"
-      />
-      <div className="mt-4 rounded-lg bg-red-50 p-3 text-sm text-red-800">
-        ⚠️ Validation failed: Age must be ≤ 150
-      </div>
-    </div>
-  ),
-}
-
-// Product validation - valid
-export const ValidProduct: Story = {
-  render: () => (
-    <div style={{ width: '400px' }}>
-      <h3 className="mb-4 text-lg font-semibold">Valid Product</h3>
-      <ValidatedProductCard
-        name="Laptop Pro"
-        price={1299}
-        category="Electronics"
-        inStock={true}
-      />
-    </div>
-  ),
-}
-
-// Product validation - invalid price
-export const InvalidPrice: Story = {
-  render: () => (
-    <div style={{ width: '400px' }}>
-      <h3 className="mb-4 text-lg font-semibold">Invalid Price (Returns null)</h3>
-      <p className="mb-4 text-sm text-gray-600">
-        Price must be positive. Check console.
-      </p>
-      <ValidatedProductCard
-        name="Laptop Pro"
-        price={-100}
-        category="Electronics"
-        inStock={true}
-      />
-      <div className="mt-4 rounded-lg bg-red-50 p-3 text-sm text-red-800">
-        ⚠️ Validation failed: Price must be positive
-      </div>
-    </div>
-  ),
-}
-
-// Comparison: validated vs unvalidated
-export const ValidationComparison: Story = {
-  render: () => (
-    <div style={{ width: '700px' }} className="space-y-6">
-      <div>
-        <h3 className="mb-4 text-lg font-semibold">Without Validation</h3>
-        <div className="space-y-3">
-          <UserCard
-            name="John Doe"
-            email="invalid-email"
-            age={200}
-            role="Developer"
-          />
-          <div className="text-xs text-gray-500">
-            ⚠️ Renders with invalid data (no validation)
-          </div>
-        </div>
-      </div>
-
-      <div className="border-t border-gray-200 pt-6">
-        <h3 className="mb-4 text-lg font-semibold">With Validation (HOC)</h3>
-        <div className="space-y-3">
-          <ValidatedUserCard
-            name="John Doe"
-            email="invalid-email"
-            age={200}
-            role="Developer"
-          />
-          <div className="text-xs text-gray-500">
-            ✓ Returns null when validation fails (check console)
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-// Real-world example - Form submission
-export const FormSubmission: Story = {
-  render: () => {
-    const handleSubmit = (data: UserCardProps) => {
-      console.log('Submitting:', data)
-    }
-
-    const validData: UserCardProps = {
-      name: 'Jane Smith',
-      email: 'jane@example.com',
-      age: 28,
-      role: 'Designer',
-    }
-
-    const invalidData: UserCardProps = {
-      name: '',
-      email: 'not-an-email',
-      age: -5,
-      role: 'Designer',
-    }
-
-    return (
-      <div style={{ width: '600px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-        <h3 className="mb-4 text-lg font-semibold">Form Submission with Validation</h3>
-
-        <div className="space-y-6">
-          <div>
-            <h4 className="mb-2 text-sm font-medium text-gray-700">Valid Data</h4>
-            <ValidatedUserCard {...validData} />
-            <button
-              className="mt-3 w-full rounded-lg bg-green-600 px-4 py-2 text-white hover:bg-green-700"
-              onClick={() => handleSubmit(validData)}
-            >
-              Submit Valid Data
-            </button>
-          </div>
-
-          <div className="border-t border-gray-200 pt-6">
-            <h4 className="mb-2 text-sm font-medium text-gray-700">Invalid Data</h4>
-            <ValidatedUserCard {...invalidData} />
-            <button
-              className="mt-3 w-full rounded-lg bg-red-600 px-4 py-2 text-white hover:bg-red-700"
-              onClick={() => handleSubmit(invalidData)}
-            >
-              Try to Submit Invalid Data
-            </button>
-            <div className="mt-2 text-xs text-red-600">
-              Component returns null, preventing invalid data rendering
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  },
-}
-
-// Real-world example - API response validation
-export const APIResponseValidation: Story = {
-  render: () => {
-    const mockAPIResponses = [
-      {
-        name: 'Laptop',
-        price: 999,
-        category: 'Electronics',
-        inStock: true,
-      },
-      {
-        name: 'Invalid Product',
-        price: -50, // Invalid: negative price
-        category: 'Electronics',
-        inStock: true,
-      },
-      {
-        name: '', // Invalid: empty name
-        price: 100,
-        category: 'Electronics',
-        inStock: false,
-      },
-    ]
-
-    return (
-      <div style={{ width: '700px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-        <h3 className="mb-4 text-lg font-semibold">API Response Validation</h3>
-        <p className="mb-4 text-sm text-gray-600">
-          Only valid products render. Invalid ones return null (check console).
-        </p>
-
-        <div className="grid grid-cols-2 gap-4">
-          {mockAPIResponses.map((product, index) => (
-            <div key={index}>
-              <ValidatedProductCard {...product} />
-              {!product.name || product.price <= 0
-                ? (
-                    <div className="mt-2 text-xs text-red-600">
-                      ⚠️ Validation failed for product
-                      {' '}
-                      {index + 1}
-                    </div>
-                  )
-                : null}
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  },
-}
-
-// Real-world example - Configuration validation
-export const ConfigurationValidation: Story = {
-  render: () => {
-    type ConfigPanelProps = {
-      apiUrl: string
-      timeout: number
-      retries: number
-      debug: boolean
-    }
-
-    const ConfigPanel = ({ apiUrl, timeout, retries, debug }: ConfigPanelProps) => (
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <h3 className="mb-3 text-base font-semibold">Configuration</h3>
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between">
-            <span className="text-gray-600">API URL:</span>
-            <span className="font-mono">{apiUrl}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-600">Timeout:</span>
-            <span>
-              {timeout}
-              ms
-            </span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-600">Retries:</span>
-            <span>{retries}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-600">Debug Mode:</span>
-            <span>{debug ? '✓ Enabled' : '✗ Disabled'}</span>
-          </div>
-        </div>
-      </div>
-    )
-
-    const configSchema = z.object({
-      apiUrl: z.url('Must be valid URL'),
-      timeout: z.number().min(0).max(30000),
-      retries: z.number().min(0).max(5),
-      debug: z.boolean(),
-    })
-
-    const ValidatedConfigPanel = withValidation(ConfigPanel, configSchema)
-
-    const validConfig = {
-      apiUrl: 'https://api.example.com',
-      timeout: 5000,
-      retries: 3,
-      debug: true,
-    }
-
-    const invalidConfig = {
-      apiUrl: 'not-a-url',
-      timeout: 50000, // Too high
-      retries: 10, // Too many
-      debug: true,
-    }
-
-    return (
-      <div style={{ width: '600px' }} className="space-y-6">
-        <div>
-          <h4 className="mb-2 text-sm font-medium text-gray-700">Valid Configuration</h4>
-          <ValidatedConfigPanel {...validConfig} />
-        </div>
-
-        <div>
-          <h4 className="mb-2 text-sm font-medium text-gray-700">Invalid Configuration</h4>
-          <ValidatedConfigPanel {...invalidConfig} />
-          <div className="mt-2 text-xs text-red-600">
-            ⚠️ Validation errors: Invalid URL, timeout too high, too many retries
-          </div>
-        </div>
-      </div>
-    )
-  },
-}
-
-// Usage documentation
-export const UsageDocumentation: Story = {
-  render: () => (
-    <div style={{ width: '700px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-xl font-bold">withValidation HOC</h3>
-
-      <div className="space-y-6">
-        <div>
-          <h4 className="mb-2 text-sm font-semibold text-gray-900">Purpose</h4>
-          <p className="text-sm text-gray-600">
-            Wraps React components with Zod schema validation for their props.
-            Returns null and logs errors if validation fails.
-          </p>
-        </div>
-
-        <div>
-          <h4 className="mb-2 text-sm font-semibold text-gray-900">Usage Example</h4>
-          <pre className="overflow-x-auto rounded-lg bg-gray-900 p-4 text-xs text-gray-100">
-            {`import * as z from 'zod'
-import withValidation from './withValidation'
-
-// Define your component
-const UserCard = ({ name, email, age }) => (
-  <div>{name} - {email} - {age}</div>
-)
-
-// Define validation schema
-const schema = z.object({
-  name: z.string().min(1),
-  email: z.string().email(),
-  age: z.number().min(0).max(150),
-})
-
-// Wrap with validation
-const ValidatedUserCard = withValidation(UserCard, schema)
-
-// Use validated component
-<ValidatedUserCard
-  name="John"
-  email="john@example.com"
-  age={30}
-/>`}
-          </pre>
-        </div>
-
-        <div>
-          <h4 className="mb-2 text-sm font-semibold text-gray-900">Key Features</h4>
-          <ul className="list-inside list-disc space-y-1 text-sm text-gray-600">
-            <li>Type-safe validation using Zod schemas</li>
-            <li>Returns null on validation failure</li>
-            <li>Logs validation errors to console</li>
-            <li>Only validates props defined in schema</li>
-            <li>Preserves all original props</li>
-          </ul>
-        </div>
-
-        <div>
-          <h4 className="mb-2 text-sm font-semibold text-gray-900">Use Cases</h4>
-          <ul className="list-inside list-disc space-y-1 text-sm text-gray-600">
-            <li>API response validation before rendering</li>
-            <li>Form data validation</li>
-            <li>Configuration panel validation</li>
-            <li>Preventing invalid data from reaching components</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  ),
-}
-
-// Interactive playground
-export const Playground: Story = {
-  render: () => {
-    return (
-      <div style={{ width: '600px' }} className="space-y-6">
-        <div>
-          <h4 className="mb-2 text-sm font-medium text-gray-700">Try Valid Data</h4>
-          <ValidatedUserCard
-            name="Alice Johnson"
-            email="alice@example.com"
-            age={25}
-            role="Engineer"
-          />
-        </div>
-
-        <div>
-          <h4 className="mb-2 text-sm font-medium text-gray-700">Try Invalid Data</h4>
-          <ValidatedUserCard
-            name="Bob"
-            email="invalid-email"
-            age={-10}
-            role="Manager"
-          />
-          <p className="mt-2 text-xs text-gray-500">
-            Open browser console to see validation errors
-          </p>
-        </div>
-      </div>
-    )
-  },
-}
diff --git a/web/app/components/base/with-input-validation/index.tsx b/web/app/components/base/with-input-validation/index.tsx
deleted file mode 100644
index 9a78dbb2981..00000000000
--- a/web/app/components/base/with-input-validation/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-import type { ZodSchema } from 'zod'
-import * as React from 'react'
-
-function withValidation<T extends Record<string, unknown>, K extends keyof T>(
-  WrappedComponent: React.ComponentType<T>,
-  schema: ZodSchema<Pick<T, K>>,
-) {
-  return function EnsuredComponent(props: T) {
-    const partialProps = Object.fromEntries(
-      Object.entries(props).filter(([key]) => key in (schema._def as any).shape),
-    ) as Pick<T, K>
-
-    const checkRes = schema.safeParse(partialProps)
-    if (!checkRes.success) {
-      console.error(checkRes.error)
-      // Maybe there is a better way to handle this, like error logic placeholder
-      return null
-    }
-    return <WrappedComponent {...props} />
-  }
-}
-
-export default withValidation
diff --git a/web/app/components/billing/header-billing-btn/__tests__/index.spec.tsx b/web/app/components/billing/header-billing-btn/__tests__/index.spec.tsx
deleted file mode 100644
index 818e0e9b1bf..00000000000
--- a/web/app/components/billing/header-billing-btn/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { Plan } from '../../type'
-import HeaderBillingBtn from '../index'
-
-type HeaderGlobal = typeof globalThis & {
-  __mockProviderContext?: ReturnType<typeof vi.fn>
-}
-
-function getHeaderGlobal(): HeaderGlobal {
-  return globalThis as HeaderGlobal
-}
-
-const ensureProviderContextMock = () => {
-  const globals = getHeaderGlobal()
-  if (!globals.__mockProviderContext)
-    throw new Error('Provider context mock not set')
-  return globals.__mockProviderContext
-}
-
-vi.mock('@/context/provider-context', () => {
-  const mock = vi.fn()
-  const globals = getHeaderGlobal()
-  globals.__mockProviderContext = mock
-  return {
-    useProviderContext: () => mock(),
-  }
-})
-
-vi.mock('../../upgrade-btn', () => ({
-  default: () => <button data-testid="upgrade-btn" type="button">Upgrade</button>,
-}))
-
-describe('HeaderBillingBtn', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    ensureProviderContextMock().mockReturnValue({
-      plan: {
-        type: Plan.professional,
-      },
-      enableBilling: true,
-      isFetchedPlan: true,
-    })
-  })
-
-  it('renders nothing when billing is disabled or plan is not fetched', () => {
-    ensureProviderContextMock().mockReturnValueOnce({
-      plan: {
-        type: Plan.professional,
-      },
-      enableBilling: false,
-      isFetchedPlan: true,
-    })
-
-    const { container } = render(<HeaderBillingBtn />)
-
-    expect(container.firstChild).toBeNull()
-  })
-
-  it('renders upgrade button for sandbox plan', () => {
-    ensureProviderContextMock().mockReturnValueOnce({
-      plan: {
-        type: Plan.sandbox,
-      },
-      enableBilling: true,
-      isFetchedPlan: true,
-    })
-
-    render(<HeaderBillingBtn />)
-
-    expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
-  })
-
-  it('renders team badge for team plan', () => {
-    ensureProviderContextMock().mockReturnValueOnce({
-      plan: { type: Plan.team },
-      enableBilling: true,
-      isFetchedPlan: true,
-    })
-
-    render(<HeaderBillingBtn />)
-
-    expect(screen.getByText('team')).toBeInTheDocument()
-  })
-
-  it('renders nothing when plan is not fetched', () => {
-    ensureProviderContextMock().mockReturnValueOnce({
-      plan: { type: Plan.professional },
-      enableBilling: true,
-      isFetchedPlan: false,
-    })
-
-    const { container } = render(<HeaderBillingBtn />)
-    expect(container.firstChild).toBeNull()
-  })
-
-  it('renders sandbox upgrade btn with undefined onClick in display-only mode', () => {
-    ensureProviderContextMock().mockReturnValueOnce({
-      plan: { type: Plan.sandbox },
-      enableBilling: true,
-      isFetchedPlan: true,
-    })
-
-    render(<HeaderBillingBtn isDisplayOnly />)
-    expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
-  })
-
-  it('renders plan badge and forwards clicks when not display-only', () => {
-    const onClick = vi.fn()
-
-    const { rerender } = render(<HeaderBillingBtn onClick={onClick} />)
-
-    const badge = screen.getByText('pro').closest('div')!
-    fireEvent.click(badge)
-    expect(onClick).toHaveBeenCalledTimes(1)
-
-    rerender(<HeaderBillingBtn onClick={onClick} isDisplayOnly />)
-    fireEvent.click(screen.getByText('pro').closest('div')!)
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
deleted file mode 100644
index 8c1168ae44b..00000000000
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useProviderContext } from '@/context/provider-context'
-import { Plan } from '../type'
-import UpgradeBtn from '../upgrade-btn'
-
-type Props = Readonly<{
-  onClick?: () => void
-  isDisplayOnly?: boolean
-}>
-
-const HeaderBillingBtn: FC<Props> = ({
-  onClick,
-  isDisplayOnly = false,
-}) => {
-  const { plan, enableBilling, isFetchedPlan } = useProviderContext()
-  const {
-    type,
-  } = plan
-
-  const name = (() => {
-    if (type === Plan.professional)
-      return 'pro'
-    return type
-  })()
-  const classNames = (() => {
-    if (type === Plan.professional)
-      return `border-[#E0F2FE] ${!isDisplayOnly ? 'hover:border-[#B9E6FE]' : ''} bg-[#E0F2FE] text-[#026AA2]`
-    if (type === Plan.team)
-      return `border-[#E0EAFF] ${!isDisplayOnly ? 'hover:border-[#C7D7FE]' : ''} bg-[#E0EAFF] text-[#3538CD]`
-    return ''
-  })()
-
-  if (!enableBilling || !isFetchedPlan)
-    return null
-
-  if (type === Plan.sandbox)
-    return <UpgradeBtn onClick={isDisplayOnly ? undefined : onClick} isShort />
-
-  const handleClick = () => {
-    if (!isDisplayOnly && onClick)
-      onClick()
-  }
-
-  return (
-    <div
-      onClick={handleClick}
-      className={cn(
-        'flex h-[22px] items-center rounded-md border border-divider-regular px-2 text-xs font-semibold uppercase',
-        classNames,
-        isDisplayOnly ? 'cursor-default' : 'cursor-pointer',
-      )}
-    >
-      {name}
-    </div>
-  )
-}
-export default React.memo(HeaderBillingBtn)
diff --git a/web/app/components/datasets/api/__tests__/index.spec.tsx b/web/app/components/datasets/api/__tests__/index.spec.tsx
deleted file mode 100644
index f3c5e2ffc39..00000000000
--- a/web/app/components/datasets/api/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it } from 'vitest'
-import ApiIndex from '../index'
-
-afterEach(() => {
-  cleanup()
-})
-
-describe('ApiIndex', () => {
-  it('should render without crashing', () => {
-    render(<ApiIndex />)
-    expect(screen.getByText('index')).toBeInTheDocument()
-  })
-
-  it('should render a div with text "index"', () => {
-    const { container } = render(<ApiIndex />)
-    expect(container.firstChild).toBeInstanceOf(HTMLDivElement)
-    expect(container.textContent).toBe('index')
-  })
-
-  it('should be a valid function component', () => {
-    expect(typeof ApiIndex).toBe('function')
-  })
-})
diff --git a/web/app/components/datasets/api/index.tsx b/web/app/components/datasets/api/index.tsx
deleted file mode 100644
index 801070030ce..00000000000
--- a/web/app/components/datasets/api/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react'
-
-const index = () => {
-  return (
-    <div>index</div>
-  )
-}
-
-export default index
diff --git a/web/app/components/datasets/common/retrieval-method-info/index.tsx b/web/app/components/datasets/common/retrieval-method-info/index.tsx
index 6b6b4138aa0..a517fe1c085 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -60,4 +60,5 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
     </div>
   )
 }
+
 export default React.memo(EconomicalRetrievalMethodConfig)
diff --git a/web/app/components/datasets/create/step-two/preview-item/__tests__/index.spec.tsx b/web/app/components/datasets/create/step-two/preview-item/__tests__/index.spec.tsx
deleted file mode 100644
index 4e2c94c02dd..00000000000
--- a/web/app/components/datasets/create/step-two/preview-item/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,660 +0,0 @@
-import type { IPreviewItemProps } from '../index'
-import { render, screen } from '@testing-library/react'
-import * as React from 'react'
-import PreviewItem, { PreviewType } from '../index'
-
-// Test data builder for props
-const createDefaultProps = (overrides?: Partial<IPreviewItemProps>): IPreviewItemProps => ({
-  type: PreviewType.TEXT,
-  index: 1,
-  content: 'Test content',
-  ...overrides,
-})
-
-const createQAProps = (overrides?: Partial<IPreviewItemProps>): IPreviewItemProps => ({
-  type: PreviewType.QA,
-  index: 1,
-  qa: {
-    question: 'Test question',
-    answer: 'Test answer',
-  },
-  ...overrides,
-})
-
-describe('PreviewItem', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Rendering Tests - Verify component renders correctly
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const props = createDefaultProps()
-
-      render(<PreviewItem {...props} />)
-
-      expect(screen.getByText('Test content')).toBeInTheDocument()
-    })
-
-    it('should render with TEXT type', () => {
-      const props = createDefaultProps({ content: 'Sample text content' })
-
-      render(<PreviewItem {...props} />)
-
-      expect(screen.getByText('Sample text content')).toBeInTheDocument()
-    })
-
-    it('should render with QA type', () => {
-      const props = createQAProps()
-
-      render(<PreviewItem {...props} />)
-
-      expect(screen.getByText('Q')).toBeInTheDocument()
-      expect(screen.getByText('A')).toBeInTheDocument()
-      expect(screen.getByText('Test question')).toBeInTheDocument()
-      expect(screen.getByText('Test answer')).toBeInTheDocument()
-    })
-
-    it('should render sharp icon (#) with formatted index', () => {
-      const props = createDefaultProps({ index: 5 })
-
-      const { container } = render(<PreviewItem {...props} />)
-
-      // Assert - Index should be padded to 3 digits
-      expect(screen.getByText('005')).toBeInTheDocument()
-      // Sharp icon SVG should exist
-      const svgElements = container.querySelectorAll('svg')
-      expect(svgElements.length).toBeGreaterThanOrEqual(1)
-    })
-
-    it('should render character count for TEXT type', () => {
-      const content = 'Hello World' // 11 characters
-      const props = createDefaultProps({ content })
-
-      render(<PreviewItem {...props} />)
-
-      // Assert - Shows character count with translation key
-      expect(screen.getByText(/11/)).toBeInTheDocument()
-      expect(screen.getByText(/datasetCreation.stepTwo.characters/)).toBeInTheDocument()
-    })
-
-    it('should render character count for QA type', () => {
-      const props = createQAProps({
-        qa: {
-          question: 'Hello', // 5 characters
-          answer: 'World', // 5 characters - total 10
-        },
-      })
-
-      render(<PreviewItem {...props} />)
-
-      // Assert - Shows combined character count
-      expect(screen.getByText(/10/)).toBeInTheDocument()
-    })
-
-    it('should render text icon SVG', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<PreviewItem {...props} />)
-
-      // Assert - Should have SVG icons
-      const svgElements = container.querySelectorAll('svg')
-      expect(svgElements.length).toBe(2) // Sharp icon and text icon
-    })
-  })
-
-  // Props Testing - Verify all prop variations work correctly
-  describe('Props', () => {
-    describe('type prop', () => {
-      it('should render TEXT content when type is TEXT', () => {
-        const props = createDefaultProps({ type: PreviewType.TEXT, content: 'Text mode content' })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Text mode content')).toBeInTheDocument()
-        expect(screen.queryByText('Q')).not.toBeInTheDocument()
-        expect(screen.queryByText('A')).not.toBeInTheDocument()
-      })
-
-      it('should render QA content when type is QA', () => {
-        const props = createQAProps({
-          type: PreviewType.QA,
-          qa: { question: 'My question', answer: 'My answer' },
-        })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Q')).toBeInTheDocument()
-        expect(screen.getByText('A')).toBeInTheDocument()
-        expect(screen.getByText('My question')).toBeInTheDocument()
-        expect(screen.getByText('My answer')).toBeInTheDocument()
-      })
-
-      it('should use TEXT as default type when type is "text"', () => {
-        const props = createDefaultProps({ type: 'text' as PreviewType, content: 'Default type content' })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Default type content')).toBeInTheDocument()
-      })
-
-      it('should use QA type when type is "QA"', () => {
-        const props = createQAProps({ type: 'QA' as PreviewType })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Q')).toBeInTheDocument()
-        expect(screen.getByText('A')).toBeInTheDocument()
-      })
-    })
-
-    describe('index prop', () => {
-      it.each([
-        [1, '001'],
-        [5, '005'],
-        [10, '010'],
-        [99, '099'],
-        [100, '100'],
-        [999, '999'],
-        [1000, '1000'],
-      ])('should format index %i as %s', (index, expected) => {
-        const props = createDefaultProps({ index })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText(expected)).toBeInTheDocument()
-      })
-
-      it('should handle index 0', () => {
-        const props = createDefaultProps({ index: 0 })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('000')).toBeInTheDocument()
-      })
-
-      it('should handle large index numbers', () => {
-        const props = createDefaultProps({ index: 12345 })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('12345')).toBeInTheDocument()
-      })
-    })
-
-    describe('content prop', () => {
-      it('should render content when provided', () => {
-        const props = createDefaultProps({ content: 'Custom content here' })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Custom content here')).toBeInTheDocument()
-      })
-
-      it('should handle multiline content', () => {
-        const multilineContent = 'Line 1\nLine 2\nLine 3'
-        const props = createDefaultProps({ content: multilineContent })
-
-        const { container } = render(<PreviewItem {...props} />)
-
-        // Assert - Check content is rendered (multiline text is in pre-line div)
-        const contentDiv = container.querySelector('[style*="white-space: pre-line"]')
-        expect(contentDiv?.textContent).toContain('Line 1')
-        expect(contentDiv?.textContent).toContain('Line 2')
-        expect(contentDiv?.textContent).toContain('Line 3')
-      })
-
-      it('should preserve whitespace with pre-line style', () => {
-        const props = createDefaultProps({ content: 'Text with  spaces' })
-
-        const { container } = render(<PreviewItem {...props} />)
-
-        // Assert - Check for whiteSpace: pre-line style
-        const contentDiv = container.querySelector('[style*="white-space: pre-line"]')
-        expect(contentDiv).toBeInTheDocument()
-      })
-    })
-
-    describe('qa prop', () => {
-      it('should render question and answer when qa is provided', () => {
-        const props = createQAProps({
-          qa: {
-            question: 'What is testing?',
-            answer: 'Testing is verification.',
-          },
-        })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('What is testing?')).toBeInTheDocument()
-        expect(screen.getByText('Testing is verification.')).toBeInTheDocument()
-      })
-
-      it('should render Q and A labels', () => {
-        const props = createQAProps()
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Q')).toBeInTheDocument()
-        expect(screen.getByText('A')).toBeInTheDocument()
-      })
-
-      it('should handle multiline question', () => {
-        const props = createQAProps({
-          qa: {
-            question: 'Question line 1\nQuestion line 2',
-            answer: 'Answer',
-          },
-        })
-
-        const { container } = render(<PreviewItem {...props} />)
-
-        // Assert - Check content is in pre-line div
-        const preLineDivs = container.querySelectorAll('[style*="white-space: pre-line"]')
-        const questionDiv = Array.from(preLineDivs).find(div => div.textContent?.includes('Question line 1'))
-        expect(questionDiv).toBeTruthy()
-        expect(questionDiv?.textContent).toContain('Question line 2')
-      })
-
-      it('should handle multiline answer', () => {
-        const props = createQAProps({
-          qa: {
-            question: 'Question',
-            answer: 'Answer line 1\nAnswer line 2',
-          },
-        })
-
-        const { container } = render(<PreviewItem {...props} />)
-
-        // Assert - Check content is in pre-line div
-        const preLineDivs = container.querySelectorAll('[style*="white-space: pre-line"]')
-        const answerDiv = Array.from(preLineDivs).find(div => div.textContent?.includes('Answer line 1'))
-        expect(answerDiv).toBeTruthy()
-        expect(answerDiv?.textContent).toContain('Answer line 2')
-      })
-    })
-  })
-
-  // Component Memoization - Test React.memo behavior
-  describe('Memoization', () => {
-    it('should be wrapped with React.memo', () => {
-      // Assert - Check component has memo wrapper
-      expect(PreviewItem.$$typeof).toBe(Symbol.for('react.memo'))
-    })
-
-    it('should not re-render when props remain the same', () => {
-      const props = createDefaultProps()
-      const renderSpy = vi.fn()
-
-      // Create a wrapper component to track renders
-      const TrackedPreviewItem: React.FC<IPreviewItemProps> = (trackedProps) => {
-        renderSpy()
-        return <PreviewItem {...trackedProps} />
-      }
-      const MemoizedTracked = React.memo(TrackedPreviewItem)
-
-      const { rerender } = render(<MemoizedTracked {...props} />)
-      rerender(<MemoizedTracked {...props} />)
-
-      // Assert - Should only render once due to same props
-      expect(renderSpy).toHaveBeenCalledTimes(1)
-    })
-
-    it('should re-render when content changes', () => {
-      const props = createDefaultProps({ content: 'Initial content' })
-
-      const { rerender } = render(<PreviewItem {...props} />)
-      expect(screen.getByText('Initial content')).toBeInTheDocument()
-
-      rerender(<PreviewItem {...props} content="Updated content" />)
-
-      expect(screen.getByText('Updated content')).toBeInTheDocument()
-    })
-
-    it('should re-render when index changes', () => {
-      const props = createDefaultProps({ index: 1 })
-
-      const { rerender } = render(<PreviewItem {...props} />)
-      expect(screen.getByText('001')).toBeInTheDocument()
-
-      rerender(<PreviewItem {...props} index={99} />)
-
-      expect(screen.getByText('099')).toBeInTheDocument()
-    })
-
-    it('should re-render when type changes', () => {
-      const props = createDefaultProps({ type: PreviewType.TEXT, content: 'Text content' })
-
-      const { rerender } = render(<PreviewItem {...props} />)
-      expect(screen.getByText('Text content')).toBeInTheDocument()
-      expect(screen.queryByText('Q')).not.toBeInTheDocument()
-
-      rerender(<PreviewItem type={PreviewType.QA} index={1} qa={{ question: 'Q1', answer: 'A1' }} />)
-
-      expect(screen.getByText('Q')).toBeInTheDocument()
-      expect(screen.getByText('A')).toBeInTheDocument()
-    })
-
-    it('should re-render when qa prop changes', () => {
-      const props = createQAProps({
-        qa: { question: 'Original question', answer: 'Original answer' },
-      })
-
-      const { rerender } = render(<PreviewItem {...props} />)
-      expect(screen.getByText('Original question')).toBeInTheDocument()
-
-      rerender(<PreviewItem {...props} qa={{ question: 'New question', answer: 'New answer' }} />)
-
-      expect(screen.getByText('New question')).toBeInTheDocument()
-      expect(screen.getByText('New answer')).toBeInTheDocument()
-    })
-  })
-
-  // Edge Cases - Test boundary conditions and error handling
-  describe('Edge Cases', () => {
-    describe('Empty/Undefined values', () => {
-      it('should handle undefined content gracefully', () => {
-        const props = createDefaultProps({ content: undefined })
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Should show 0 characters (use more specific text match)
-        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
-      })
-
-      it('should handle empty string content', () => {
-        const props = createDefaultProps({ content: '' })
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Should show 0 characters (use more specific text match)
-        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
-      })
-
-      it('should handle undefined qa gracefully', () => {
-        const props: IPreviewItemProps = {
-          type: PreviewType.QA,
-          index: 1,
-          qa: undefined,
-        }
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Should render Q and A labels but with empty content
-        expect(screen.getByText('Q')).toBeInTheDocument()
-        expect(screen.getByText('A')).toBeInTheDocument()
-        // Character count should be 0 (use more specific text match)
-        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
-      })
-
-      it('should handle undefined question in qa', () => {
-        const props: IPreviewItemProps = {
-          type: PreviewType.QA,
-          index: 1,
-          qa: {
-            question: undefined as unknown as string,
-            answer: 'Only answer',
-          },
-        }
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Only answer')).toBeInTheDocument()
-      })
-
-      it('should handle undefined answer in qa', () => {
-        const props: IPreviewItemProps = {
-          type: PreviewType.QA,
-          index: 1,
-          qa: {
-            question: 'Only question',
-            answer: undefined as unknown as string,
-          },
-        }
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Only question')).toBeInTheDocument()
-      })
-
-      it('should handle empty question and answer strings', () => {
-        const props = createQAProps({
-          qa: { question: '', answer: '' },
-        })
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Should show 0 characters (use more specific text match)
-        expect(screen.getByText(/^0 datasetCreation/)).toBeInTheDocument()
-        expect(screen.getByText('Q')).toBeInTheDocument()
-        expect(screen.getByText('A')).toBeInTheDocument()
-      })
-    })
-
-    describe('Character count calculation', () => {
-      it('should calculate correct character count for TEXT type', () => {
-        // Arrange - 'Test' has 4 characters
-        const props = createDefaultProps({ content: 'Test' })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText(/4/)).toBeInTheDocument()
-      })
-
-      it('should calculate correct character count for QA type (question + answer)', () => {
-        // Arrange - 'ABC' (3) + 'DEFGH' (5) = 8 characters
-        const props = createQAProps({
-          qa: { question: 'ABC', answer: 'DEFGH' },
-        })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText(/8/)).toBeInTheDocument()
-      })
-
-      it('should count special characters correctly', () => {
-        // Arrange - Content with special characters
-        const props = createDefaultProps({ content: '你好世界' }) // 4 Chinese characters
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText(/4/)).toBeInTheDocument()
-      })
-
-      it('should count newlines in character count', () => {
-        // Arrange - 'a\nb' has 3 characters
-        const props = createDefaultProps({ content: 'a\nb' })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText(/3/)).toBeInTheDocument()
-      })
-
-      it('should count spaces in character count', () => {
-        // Arrange - 'a b' has 3 characters
-        const props = createDefaultProps({ content: 'a b' })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText(/3/)).toBeInTheDocument()
-      })
-    })
-
-    describe('Boundary conditions', () => {
-      it('should handle very long content', () => {
-        const longContent = 'A'.repeat(10000)
-        const props = createDefaultProps({ content: longContent })
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Should show correct character count
-        expect(screen.getByText(/10000/)).toBeInTheDocument()
-      })
-
-      it('should handle very long index', () => {
-        const props = createDefaultProps({ index: 999999999 })
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('999999999')).toBeInTheDocument()
-      })
-
-      it('should handle negative index', () => {
-        const props = createDefaultProps({ index: -1 })
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - padStart pads from the start, so -1 becomes 0-1
-        expect(screen.getByText('0-1')).toBeInTheDocument()
-      })
-
-      it('should handle content with only whitespace', () => {
-        const props = createDefaultProps({ content: '   ' }) // 3 spaces
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText(/3/)).toBeInTheDocument()
-      })
-
-      it('should handle content with HTML-like characters', () => {
-        const props = createDefaultProps({ content: '<div>Test</div>' })
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Should render as text, not HTML
-        expect(screen.getByText('<div>Test</div>')).toBeInTheDocument()
-      })
-
-      it('should handle content with emojis', () => {
-        // Arrange - Emojis can have complex character lengths
-        const props = createDefaultProps({ content: '😀👍' })
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Emoji length depends on JS string length
-        expect(screen.getByText('😀👍')).toBeInTheDocument()
-      })
-    })
-
-    describe('Type edge cases', () => {
-      it('should ignore qa prop when type is TEXT', () => {
-        // Arrange - Both content and qa provided, but type is TEXT
-        const props: IPreviewItemProps = {
-          type: PreviewType.TEXT,
-          index: 1,
-          content: 'Text content',
-          qa: { question: 'Should not show', answer: 'Also should not show' },
-        }
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.getByText('Text content')).toBeInTheDocument()
-        expect(screen.queryByText('Should not show')).not.toBeInTheDocument()
-        expect(screen.queryByText('Also should not show')).not.toBeInTheDocument()
-      })
-
-      it('should use content length for TEXT type even when qa is provided', () => {
-        const props: IPreviewItemProps = {
-          type: PreviewType.TEXT,
-          index: 1,
-          content: 'Hi', // 2 characters
-          qa: { question: 'Question', answer: 'Answer' }, // Would be 14 characters if used
-        }
-
-        render(<PreviewItem {...props} />)
-
-        // Assert - Should show 2, not 14
-        expect(screen.getByText(/2/)).toBeInTheDocument()
-      })
-
-      it('should ignore content prop when type is QA', () => {
-        const props: IPreviewItemProps = {
-          type: PreviewType.QA,
-          index: 1,
-          content: 'Should not display',
-          qa: { question: 'Q text', answer: 'A text' },
-        }
-
-        render(<PreviewItem {...props} />)
-
-        expect(screen.queryByText('Should not display')).not.toBeInTheDocument()
-        expect(screen.getByText('Q text')).toBeInTheDocument()
-        expect(screen.getByText('A text')).toBeInTheDocument()
-      })
-    })
-  })
-
-  // PreviewType Enum - Test exported enum values
-  describe('PreviewType Enum', () => {
-    it('should have TEXT value as "text"', () => {
-      expect(PreviewType.TEXT).toBe('text')
-    })
-
-    it('should have QA value as "QA"', () => {
-      expect(PreviewType.QA).toBe('QA')
-    })
-  })
-
-  // Styling Tests - Verify correct CSS classes applied
-  describe('Styling', () => {
-    it('should have rounded-sm container with gray background', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<PreviewItem {...props} />)
-
-      const rootDiv = container.firstChild as HTMLElement
-      expect(rootDiv).toHaveClass('rounded-xl', 'bg-gray-50', 'p-4')
-    })
-
-    it('should have proper header styling', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<PreviewItem {...props} />)
-
-      // Assert - Check header div styling
-      const headerDiv = container.querySelector('.flex.h-5.items-center.justify-between')
-      expect(headerDiv).toBeInTheDocument()
-    })
-
-    it('should have index badge styling', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<PreviewItem {...props} />)
-
-      const indexBadge = container.querySelector('.border.border-gray-200')
-      expect(indexBadge).toBeInTheDocument()
-      expect(indexBadge).toHaveClass('rounded-md', 'italic', 'font-medium')
-    })
-
-    it('should have content area with line-clamp', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<PreviewItem {...props} />)
-
-      const contentArea = container.querySelector('.line-clamp-6')
-      expect(contentArea).toBeInTheDocument()
-      expect(contentArea).toHaveClass('max-h-[120px]', 'overflow-hidden')
-    })
-
-    it('should have Q/A labels with gray color', () => {
-      const props = createQAProps()
-
-      const { container } = render(<PreviewItem {...props} />)
-
-      const labels = container.querySelectorAll('.text-gray-400')
-      expect(labels.length).toBeGreaterThanOrEqual(2) // Q and A labels
-    })
-  })
-
-  // i18n Translation - Test translation integration
-  describe('i18n Translation', () => {
-    it('should use translation key for characters label', () => {
-      const props = createDefaultProps({ content: 'Test' })
-
-      render(<PreviewItem {...props} />)
-
-      // Assert - The mock returns the key as-is
-      expect(screen.getByText(/datasetCreation.stepTwo.characters/)).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/datasets/create/step-two/preview-item/index.tsx b/web/app/components/datasets/create/step-two/preview-item/index.tsx
deleted file mode 100644
index 75ccadbec78..00000000000
--- a/web/app/components/datasets/create/step-two/preview-item/index.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-
-export type IPreviewItemProps = {
-  type: string
-  index: number
-  content?: string
-  qa?: {
-    answer: string
-    question: string
-  }
-}
-
-export enum PreviewType {
-  TEXT = 'text',
-  QA = 'QA',
-}
-
-const sharpIcon = (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.74999 1.5L3.24999 10.5M8.74998 1.5L7.24998 10.5M10.25 4H1.75M9.75 8H1.25" stroke="#98A2B3" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-)
-
-const textIcon = (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4 3.5H8M6 3.5V8.5M3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V3.9C10.5 3.05992 10.5 2.63988 10.3365 2.31901C10.1927 2.03677 9.96323 1.8073 9.68099 1.66349C9.36012 1.5 8.94008 1.5 8.1 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5Z" stroke="#667085" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-
-)
-
-const PreviewItem: FC<IPreviewItemProps> = ({
-  type = PreviewType.TEXT,
-  index,
-  content,
-  qa,
-}) => {
-  const { t } = useTranslation()
-  const charNums = type === PreviewType.TEXT
-    ? (content || '').length
-    : (qa?.answer || '').length + (qa?.question || '').length
-  const formattedIndex = (() => String(index).padStart(3, '0'))()
-
-  return (
-    <div className="rounded-xl bg-gray-50 p-4">
-      <div className="flex h-5 items-center justify-between text-xs text-gray-500">
-        <div className="box-border flex h-[18px] items-center space-x-1 rounded-md border border-gray-200 pr-1.5 pl-1 font-medium italic">
-          {sharpIcon}
-          <span>{formattedIndex}</span>
-        </div>
-        <div className="flex items-center space-x-1">
-          {textIcon}
-          <span>
-            {charNums}
-            {' '}
-            {t('stepTwo.characters', { ns: 'datasetCreation' })}
-          </span>
-        </div>
-      </div>
-      <div className="mt-2 line-clamp-6 max-h-[120px] overflow-hidden text-sm text-gray-800">
-        {type === PreviewType.TEXT && (
-          <div style={{ whiteSpace: 'pre-line' }}>{content}</div>
-        )}
-        {type === PreviewType.QA && (
-          <div style={{ whiteSpace: 'pre-line' }}>
-            <div className="flex">
-              <div className="text-medium mr-2 shrink-0 text-gray-400">Q</div>
-              <div style={{ whiteSpace: 'pre-line' }}>{qa?.question}</div>
-            </div>
-            <div className="flex">
-              <div className="text-medium mr-2 shrink-0 text-gray-400">A</div>
-              <div style={{ whiteSpace: 'pre-line' }}>{qa?.answer}</div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-export default React.memo(PreviewItem)
diff --git a/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx b/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
deleted file mode 100644
index 5f0cd67fbfb..00000000000
--- a/web/app/components/datasets/create/stop-embedding-modal/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,608 +0,0 @@
-import type { MockInstance } from 'vitest'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import StopEmbeddingModal from '../index'
-
-// Helper type for component props
-type StopEmbeddingModalProps = {
-  show: boolean
-  onConfirm: () => void
-  onHide: () => void
-}
-
-// Helper to render StopEmbeddingModal with default props
-const renderStopEmbeddingModal = (props: Partial<StopEmbeddingModalProps> = {}) => {
-  const defaultProps: StopEmbeddingModalProps = {
-    show: true,
-    onConfirm: vi.fn(),
-    onHide: vi.fn(),
-    ...props,
-  }
-  return {
-    ...render(<StopEmbeddingModal {...defaultProps} />),
-    props: defaultProps,
-  }
-}
-
-// StopEmbeddingModal Component Tests
-describe('StopEmbeddingModal', () => {
-  // Suppress expected modal warnings in tests.
-  let consoleWarnSpy: MockInstance
-  let consoleErrorSpy: MockInstance
-
-  beforeAll(() => {
-    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(vi.fn())
-    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(vi.fn())
-  })
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  afterAll(() => {
-    consoleWarnSpy.mockRestore()
-    consoleErrorSpy.mockRestore()
-  })
-
-  // Rendering Tests - Verify component renders properly
-  describe('Rendering', () => {
-    it('should render without crashing when show is true', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-    })
-
-    it('should render modal title', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-    })
-
-    it('should render modal content', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByText('datasetCreation.stepThree.modelContent'))!.toBeInTheDocument()
-    })
-
-    it('should render confirm button with correct text', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByText('datasetCreation.stepThree.modelButtonConfirm'))!.toBeInTheDocument()
-    })
-
-    it('should render cancel button with correct text', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByText('datasetCreation.stepThree.modelButtonCancel'))!.toBeInTheDocument()
-    })
-
-    it('should not render modal content when show is false', () => {
-      renderStopEmbeddingModal({ show: false })
-
-      expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
-    })
-
-    it('should render buttons in correct order (cancel first, then confirm)', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
-    })
-
-    it('should render confirm button with primary variant styling', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-      expect(confirmButton)!.toHaveClass('ml-2', 'w-24')
-    })
-
-    it('should render cancel button with default styling', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
-      expect(cancelButton)!.toHaveClass('w-24')
-    })
-
-    it('should render all modal elements', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      // Assert - Modal should contain title, content, and buttons
-      // Assert - Modal should contain title, content, and buttons
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-      expect(screen.getByText('datasetCreation.stepThree.modelContent'))!.toBeInTheDocument()
-      expect(screen.getByText('datasetCreation.stepThree.modelButtonConfirm'))!.toBeInTheDocument()
-      expect(screen.getByText('datasetCreation.stepThree.modelButtonCancel'))!.toBeInTheDocument()
-    })
-  })
-
-  // Props Testing - Test all prop variations
-  describe('Props', () => {
-    describe('show prop', () => {
-      it('should show modal when show is true', () => {
-        renderStopEmbeddingModal({ show: true })
-
-        expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-      })
-
-      it('should hide modal when show is false', () => {
-        renderStopEmbeddingModal({ show: false })
-
-        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
-      })
-
-      it('should use default value false when show is not provided', () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        render(<StopEmbeddingModal onConfirm={onConfirm} onHide={onHide} show={false} />)
-
-        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
-      })
-
-      it('should toggle visibility when show prop changes to true', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-
-        // Act - Initially hidden
-        const { rerender } = render(
-          <StopEmbeddingModal show={false} onConfirm={onConfirm} onHide={onHide} />,
-        )
-        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
-
-        // Act - Show modal
-        await act(async () => {
-          rerender(<StopEmbeddingModal show={true} onConfirm={onConfirm} onHide={onHide} />)
-        })
-
-        // Assert - Modal should be visible
-        await waitFor(() => {
-          expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-        })
-      })
-    })
-
-    describe('onConfirm prop', () => {
-      it('should accept onConfirm callback function', () => {
-        const onConfirm = vi.fn()
-
-        renderStopEmbeddingModal({ onConfirm })
-
-        // Assert - No errors thrown
-        // Assert - No errors thrown
-        expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-      })
-    })
-
-    describe('onHide prop', () => {
-      it('should accept onHide callback function', () => {
-        const onHide = vi.fn()
-
-        renderStopEmbeddingModal({ onHide })
-
-        // Assert - No errors thrown
-        // Assert - No errors thrown
-        expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-      })
-    })
-  })
-
-  // User Interactions Tests - Test click events and event handlers
-  describe('User Interactions', () => {
-    describe('Confirm Button', () => {
-      it('should call onConfirm when confirm button is clicked', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-        await act(async () => {
-          fireEvent.click(confirmButton)
-        })
-
-        expect(onConfirm).toHaveBeenCalledTimes(1)
-      })
-
-      it('should call onHide when confirm button is clicked', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-        await act(async () => {
-          fireEvent.click(confirmButton)
-        })
-
-        expect(onHide).toHaveBeenCalledTimes(1)
-      })
-
-      it('should call both onConfirm and onHide in correct order when confirm button is clicked', async () => {
-        const callOrder: string[] = []
-        const onConfirm = vi.fn(() => callOrder.push('confirm'))
-        const onHide = vi.fn(() => callOrder.push('hide'))
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-        await act(async () => {
-          fireEvent.click(confirmButton)
-        })
-
-        // Assert - onConfirm should be called before onHide
-        expect(callOrder).toEqual(['confirm', 'hide'])
-      })
-
-      it('should handle multiple clicks on confirm button', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-        await act(async () => {
-          fireEvent.click(confirmButton)
-          fireEvent.click(confirmButton)
-          fireEvent.click(confirmButton)
-        })
-
-        expect(onConfirm).toHaveBeenCalledTimes(3)
-        expect(onHide).toHaveBeenCalledTimes(3)
-      })
-    })
-
-    describe('Cancel Button', () => {
-      it('should call onHide when cancel button is clicked', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
-        await act(async () => {
-          fireEvent.click(cancelButton)
-        })
-
-        expect(onHide).toHaveBeenCalledTimes(1)
-      })
-
-      it('should not call onConfirm when cancel button is clicked', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
-        await act(async () => {
-          fireEvent.click(cancelButton)
-        })
-
-        expect(onConfirm).not.toHaveBeenCalled()
-      })
-
-      it('should handle multiple clicks on cancel button', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
-        await act(async () => {
-          fireEvent.click(cancelButton)
-          fireEvent.click(cancelButton)
-        })
-
-        expect(onHide).toHaveBeenCalledTimes(2)
-        expect(onConfirm).not.toHaveBeenCalled()
-      })
-    })
-
-    describe('Close Icon', () => {
-      it('should call onHide when close button is clicked', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        await act(async () => {
-          fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
-        })
-
-        expect(onHide).toHaveBeenCalledTimes(1)
-      })
-
-      it('should not call onConfirm when close button is clicked', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        await act(async () => {
-          fireEvent.click(screen.getByRole('button', { name: /operation\.close$/ }))
-        })
-
-        expect(onConfirm).not.toHaveBeenCalled()
-      })
-    })
-
-    describe('Different Close Methods', () => {
-      it('should distinguish between confirm and cancel actions', async () => {
-        const onConfirm = vi.fn()
-        const onHide = vi.fn()
-        renderStopEmbeddingModal({ onConfirm, onHide })
-
-        // Act - Click cancel
-        const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
-        await act(async () => {
-          fireEvent.click(cancelButton)
-        })
-
-        expect(onConfirm).not.toHaveBeenCalled()
-        expect(onHide).toHaveBeenCalledTimes(1)
-
-        vi.clearAllMocks()
-
-        // Act - Click confirm
-        const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-        await act(async () => {
-          fireEvent.click(confirmButton)
-        })
-
-        expect(onConfirm).toHaveBeenCalledTimes(1)
-        expect(onHide).toHaveBeenCalledTimes(1)
-      })
-    })
-  })
-
-  // Edge Cases Tests - Test null, undefined, empty values and boundaries
-  describe('Edge Cases', () => {
-    it('should handle rapid confirm button clicks', async () => {
-      const onConfirm = vi.fn()
-      const onHide = vi.fn()
-      renderStopEmbeddingModal({ onConfirm, onHide })
-
-      // Act - Rapid clicks
-      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-      await act(async () => {
-        for (let i = 0; i < 10; i++)
-          fireEvent.click(confirmButton)
-      })
-
-      expect(onConfirm).toHaveBeenCalledTimes(10)
-      expect(onHide).toHaveBeenCalledTimes(10)
-    })
-
-    it('should handle rapid cancel button clicks', async () => {
-      const onConfirm = vi.fn()
-      const onHide = vi.fn()
-      renderStopEmbeddingModal({ onConfirm, onHide })
-
-      // Act - Rapid clicks
-      const cancelButton = screen.getByText('datasetCreation.stepThree.modelButtonCancel')
-      await act(async () => {
-        for (let i = 0; i < 10; i++)
-          fireEvent.click(cancelButton)
-      })
-
-      expect(onHide).toHaveBeenCalledTimes(10)
-      expect(onConfirm).not.toHaveBeenCalled()
-    })
-
-    it('should handle callbacks being replaced', async () => {
-      const onConfirm1 = vi.fn()
-      const onHide1 = vi.fn()
-      const onConfirm2 = vi.fn()
-      const onHide2 = vi.fn()
-
-      const { rerender } = render(
-        <StopEmbeddingModal show={true} onConfirm={onConfirm1} onHide={onHide1} />,
-      )
-
-      // Replace callbacks
-      await act(async () => {
-        rerender(<StopEmbeddingModal show={true} onConfirm={onConfirm2} onHide={onHide2} />)
-      })
-
-      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-      await act(async () => {
-        fireEvent.click(confirmButton)
-      })
-
-      // Assert - New callbacks should be called
-      expect(onConfirm1).not.toHaveBeenCalled()
-      expect(onHide1).not.toHaveBeenCalled()
-      expect(onConfirm2).toHaveBeenCalledTimes(1)
-      expect(onHide2).toHaveBeenCalledTimes(1)
-    })
-
-    it('should render with all required props', () => {
-      render(
-        <StopEmbeddingModal
-          show={true}
-          onConfirm={vi.fn()}
-          onHide={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-      expect(screen.getByText('datasetCreation.stepThree.modelContent'))!.toBeInTheDocument()
-    })
-  })
-
-  // Layout and Styling Tests - Verify correct structure
-  describe('Layout and Styling', () => {
-    it('should have buttons container with flex-row-reverse', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      const confirmButton = screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })
-      expect(confirmButton.closest('div'))!.toHaveClass('flex', 'flex-row-reverse')
-    })
-
-    it('should render title and content elements', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-      expect(screen.getByText('datasetCreation.stepThree.modelContent'))!.toBeInTheDocument()
-    })
-
-    it('should render two action buttons', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
-    })
-  })
-
-  // submit Function Tests - Test the internal submit function behavior
-  describe('submit Function', () => {
-    it('should execute onConfirm first then onHide', async () => {
-      let confirmTime = 0
-      let hideTime = 0
-      let counter = 0
-      const onConfirm = vi.fn(() => {
-        confirmTime = ++counter
-      })
-      const onHide = vi.fn(() => {
-        hideTime = ++counter
-      })
-      renderStopEmbeddingModal({ onConfirm, onHide })
-
-      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-      await act(async () => {
-        fireEvent.click(confirmButton)
-      })
-
-      expect(confirmTime).toBe(1)
-      expect(hideTime).toBe(2)
-    })
-
-    it('should call both callbacks exactly once per click', async () => {
-      const onConfirm = vi.fn()
-      const onHide = vi.fn()
-      renderStopEmbeddingModal({ onConfirm, onHide })
-
-      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-      await act(async () => {
-        fireEvent.click(confirmButton)
-      })
-
-      expect(onConfirm).toHaveBeenCalledTimes(1)
-      expect(onHide).toHaveBeenCalledTimes(1)
-    })
-
-    it('should pass no arguments to onConfirm', async () => {
-      const onConfirm = vi.fn()
-      const onHide = vi.fn()
-      renderStopEmbeddingModal({ onConfirm, onHide })
-
-      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-      await act(async () => {
-        fireEvent.click(confirmButton)
-      })
-
-      expect(onConfirm).toHaveBeenCalledWith()
-    })
-
-    it('should pass no arguments to onHide when called from submit', async () => {
-      const onConfirm = vi.fn()
-      const onHide = vi.fn()
-      renderStopEmbeddingModal({ onConfirm, onHide })
-
-      const confirmButton = screen.getByText('datasetCreation.stepThree.modelButtonConfirm')
-      await act(async () => {
-        fireEvent.click(confirmButton)
-      })
-
-      expect(onHide).toHaveBeenCalledWith()
-    })
-  })
-
-  // Modal Integration Tests - Verify Modal component integration
-  describe('Modal Integration', () => {
-    it('should pass show prop to Modal as isShow', async () => {
-      const { rerender } = render(
-        <StopEmbeddingModal show={true} onConfirm={vi.fn()} onHide={vi.fn()} />,
-      )
-
-      // Assert - Modal should be visible
-      // Assert - Modal should be visible
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-
-      // Act - Hide modal
-      await act(async () => {
-        rerender(<StopEmbeddingModal show={false} onConfirm={vi.fn()} onHide={vi.fn()} />)
-      })
-
-      // Assert - Modal should transition to hidden (wait for transition)
-      await waitFor(() => {
-        expect(screen.queryByText('datasetCreation.stepThree.modelTitle')).not.toBeInTheDocument()
-      }, { timeout: 3000 })
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have buttons that are focusable', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      const buttons = screen.getAllByRole('button')
-      buttons.forEach((button) => {
-        expect(button).not.toHaveAttribute('tabindex', '-1')
-      })
-    })
-
-    it('should have semantic button elements', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByRole('button', { name: /operation\.close$/ })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonCancel' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'datasetCreation.stepThree.modelButtonConfirm' })).toBeInTheDocument()
-    })
-
-    it('should have accessible text content', () => {
-      renderStopEmbeddingModal({ show: true })
-
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeVisible()
-      expect(screen.getByText('datasetCreation.stepThree.modelContent'))!.toBeVisible()
-      expect(screen.getByText('datasetCreation.stepThree.modelButtonConfirm'))!.toBeVisible()
-      expect(screen.getByText('datasetCreation.stepThree.modelButtonCancel'))!.toBeVisible()
-    })
-  })
-
-  // Component Lifecycle Tests
-  describe('Component Lifecycle', () => {
-    it('should unmount cleanly', () => {
-      const onConfirm = vi.fn()
-      const onHide = vi.fn()
-      const { unmount } = renderStopEmbeddingModal({ onConfirm, onHide })
-
-      // Act & Assert - Should not throw
-      expect(() => unmount()).not.toThrow()
-    })
-
-    it('should not call callbacks after unmount', () => {
-      const onConfirm = vi.fn()
-      const onHide = vi.fn()
-      const { unmount } = renderStopEmbeddingModal({ onConfirm, onHide })
-
-      unmount()
-
-      // Assert - No callbacks should be called after unmount
-      expect(onConfirm).not.toHaveBeenCalled()
-      expect(onHide).not.toHaveBeenCalled()
-    })
-
-    it('should re-render correctly when props update', async () => {
-      const onConfirm1 = vi.fn()
-      const onHide1 = vi.fn()
-      const onConfirm2 = vi.fn()
-      const onHide2 = vi.fn()
-
-      // Act - Initial render
-      const { rerender } = render(
-        <StopEmbeddingModal show={true} onConfirm={onConfirm1} onHide={onHide1} />,
-      )
-
-      // Verify initial render
-      // Verify initial render
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-
-      // Update props
-      await act(async () => {
-        rerender(<StopEmbeddingModal show={true} onConfirm={onConfirm2} onHide={onHide2} />)
-      })
-
-      // Assert - Still renders correctly
-      // Assert - Still renders correctly
-      expect(screen.getByText('datasetCreation.stepThree.modelTitle'))!.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.module.css b/web/app/components/datasets/create/stop-embedding-modal/index.module.css
deleted file mode 100644
index 3fab1ff377c..00000000000
--- a/web/app/components/datasets/create/stop-embedding-modal/index.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-@reference "../../../../styles/globals.css";
-
-.icon {
-  width: 48px;
-  height: 48px;
-  background: rgba(255, 255, 255, 0.9) center no-repeat url(../assets/annotation-info.svg);
-  background-size: 24px;
-  border: 0.5px solid #F2F4F7;
-  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
-  border-radius: 12px;
-}
-.close {
-  position: absolute;
-  right: 16px;
-  top: 16px;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: center no-repeat url(../assets/close.svg);
-  background-size: 16px;
-  cursor: pointer;
-}
-.title {
-  @apply mt-3 mb-1;
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 30px;
-  color: #101828;
-}
-.content {
-  @apply mb-10;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: #667085;
-}
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
deleted file mode 100644
index 6828ae81a97..00000000000
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-import {
-  AlertDialog,
-  AlertDialogActions,
-  AlertDialogCancelButton,
-  AlertDialogConfirmButton,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-} from '@langgenius/dify-ui/alert-dialog'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import s from './index.module.css'
-
-type IProps = {
-  show: boolean
-  onConfirm: () => void
-  onHide: () => void
-}
-
-const StopEmbeddingModal = ({
-  show = false,
-  onConfirm,
-  onHide,
-}: IProps) => {
-  const { t } = useTranslation()
-
-  const submit = () => {
-    onConfirm()
-    onHide()
-  }
-
-  return (
-    <AlertDialog
-      open={show}
-      onOpenChange={(open) => {
-        if (!open)
-          onHide()
-      }}
-    >
-      <AlertDialogContent className="max-w-[480px]! overflow-hidden! border-none px-8 py-6 text-left align-middle shadow-xl">
-        <div className={s.icon} />
-        <button
-          type="button"
-          className={cn(s.close, 'border-none bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden')}
-          aria-label={t('operation.close', { ns: 'common' })}
-          onClick={onHide}
-        />
-        <AlertDialogTitle className={s.title}>{t('stepThree.modelTitle', { ns: 'datasetCreation' })}</AlertDialogTitle>
-        <AlertDialogDescription className={s.content}>{t('stepThree.modelContent', { ns: 'datasetCreation' })}</AlertDialogDescription>
-        <AlertDialogActions className="flex-row-reverse gap-0 p-0">
-          <AlertDialogConfirmButton className="ml-2 w-24" tone="default" onClick={submit}>{t('stepThree.modelButtonConfirm', { ns: 'datasetCreation' })}</AlertDialogConfirmButton>
-          <AlertDialogCancelButton className="w-24" variant="secondary">{t('stepThree.modelButtonCancel', { ns: 'datasetCreation' })}</AlertDialogCancelButton>
-        </AlertDialogActions>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}
-
-export default StopEmbeddingModal
diff --git a/web/app/components/datasets/create/website/jina-reader/__tests__/base.spec.tsx b/web/app/components/datasets/create/website/jina-reader/__tests__/base.spec.tsx
deleted file mode 100644
index 5922a11cce9..00000000000
--- a/web/app/components/datasets/create/website/jina-reader/__tests__/base.spec.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import UrlInput from '../base/url-input'
-
-// Mock doc link context
-vi.mock('@/context/i18n', () => ({
-  useDocLink: () => () => 'https://docs.example.com',
-}))
-
-// UrlInput Component Tests
-
-describe('UrlInput', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Helper to create default props for UrlInput
-  const createUrlInputProps = (overrides: Partial<Parameters<typeof UrlInput>[0]> = {}) => ({
-    isRunning: false,
-    onRun: vi.fn(),
-    ...overrides,
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const props = createUrlInputProps()
-
-      render(<UrlInput {...props} />)
-
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
-    })
-
-    it('should render input with placeholder from docLink', () => {
-      const props = createUrlInputProps()
-
-      render(<UrlInput {...props} />)
-
-      const input = screen.getByRole('textbox')
-      expect(input).toHaveAttribute('placeholder', 'https://docs.example.com')
-    })
-
-    it('should render run button with correct text when not running', () => {
-      const props = createUrlInputProps({ isRunning: false })
-
-      render(<UrlInput {...props} />)
-
-      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
-    })
-
-    it('should render button without text when running', () => {
-      const props = createUrlInputProps({ isRunning: true })
-
-      render(<UrlInput {...props} />)
-
-      // Assert - find button by data-testid when in loading state
-      const runButton = screen.getByRole('button', { name: /run/i })
-      expect(runButton).toBeInTheDocument()
-      // Button text should be empty when running
-      expect(runButton).not.toHaveTextContent(/run/i)
-    })
-
-    it('should show loading state on button when running', () => {
-      const onRun = vi.fn()
-      const props = createUrlInputProps({ isRunning: true, onRun })
-
-      render(<UrlInput {...props} />)
-
-      // Assert - find button by data-testid when in loading state
-      const runButton = screen.getByRole('button', { name: /run/i })
-      expect(runButton).toBeInTheDocument()
-
-      // Verify button is empty (loading state removes text)
-      expect(runButton).not.toHaveTextContent(/run/i)
-
-      // Verify clicking doesn't trigger onRun when loading
-      fireEvent.click(runButton)
-      expect(onRun).not.toHaveBeenCalled()
-    })
-  })
-
-  // User Input Tests
-  describe('User Input', () => {
-    it('should update URL value when user types', async () => {
-      const props = createUrlInputProps()
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://test.com')
-
-      expect(input).toHaveValue('https://test.com')
-    })
-
-    it('should handle URL input clearing', async () => {
-      const props = createUrlInputProps()
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://test.com')
-      await userEvent.clear(input)
-
-      expect(input).toHaveValue('')
-    })
-
-    it('should handle special characters in URL', async () => {
-      const props = createUrlInputProps()
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://example.com/path?query=value&foo=bar')
-
-      expect(input).toHaveValue('https://example.com/path?query=value&foo=bar')
-    })
-  })
-
-  // Button Click Tests
-  describe('Button Click', () => {
-    it('should call onRun with URL when button is clicked', async () => {
-      const onRun = vi.fn()
-      const props = createUrlInputProps({ onRun })
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://run-test.com')
-      await userEvent.click(screen.getByRole('button', { name: /run/i }))
-
-      expect(onRun).toHaveBeenCalledWith('https://run-test.com')
-      expect(onRun).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onRun with empty string if no URL entered', async () => {
-      const onRun = vi.fn()
-      const props = createUrlInputProps({ onRun })
-
-      render(<UrlInput {...props} />)
-      await userEvent.click(screen.getByRole('button', { name: /run/i }))
-
-      expect(onRun).toHaveBeenCalledWith('')
-    })
-
-    it('should not call onRun when isRunning is true', async () => {
-      const onRun = vi.fn()
-      const props = createUrlInputProps({ onRun, isRunning: true })
-
-      render(<UrlInput {...props} />)
-      const runButton = screen.getByRole('button', { name: /run/i })
-      fireEvent.click(runButton)
-
-      expect(onRun).not.toHaveBeenCalled()
-    })
-
-    it('should not call onRun when already running', async () => {
-      const onRun = vi.fn()
-
-      // First render with isRunning=false, type URL, then rerender with isRunning=true
-      const { rerender } = render(<UrlInput isRunning={false} onRun={onRun} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://test.com')
-
-      // Rerender with isRunning=true to simulate a running state
-      rerender(<UrlInput isRunning={true} onRun={onRun} />)
-
-      // Find and click the button by data-testid (loading state has no text)
-      const runButton = screen.getByRole('button', { name: /run/i })
-      fireEvent.click(runButton)
-
-      // Assert - onRun should not be called due to early return at line 28
-      expect(onRun).not.toHaveBeenCalled()
-    })
-
-    it('should prevent multiple clicks when already running', async () => {
-      const onRun = vi.fn()
-      const props = createUrlInputProps({ onRun, isRunning: true })
-
-      render(<UrlInput {...props} />)
-      const runButton = screen.getByRole('button', { name: /run/i })
-      fireEvent.click(runButton)
-      fireEvent.click(runButton)
-      fireEvent.click(runButton)
-
-      expect(onRun).not.toHaveBeenCalled()
-    })
-  })
-
-  // Props Tests
-  describe('Props', () => {
-    it('should respond to isRunning prop change', () => {
-      const props = createUrlInputProps({ isRunning: false })
-
-      const { rerender } = render(<UrlInput {...props} />)
-      expect(screen.getByRole('button', { name: /run/i })).toBeInTheDocument()
-
-      // Change isRunning to true
-      rerender(<UrlInput {...props} isRunning={true} />)
-
-      // Assert - find button by data-testid and verify it's now in loading state
-      const runButton = screen.getByRole('button', { name: /run/i })
-      expect(runButton).toBeInTheDocument()
-      // When loading, the button text should be empty
-      expect(runButton).not.toHaveTextContent(/run/i)
-    })
-
-    it('should call updated onRun callback after prop change', async () => {
-      const onRun1 = vi.fn()
-      const onRun2 = vi.fn()
-
-      const { rerender } = render(<UrlInput isRunning={false} onRun={onRun1} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://first.com')
-
-      // Change onRun callback
-      rerender(<UrlInput isRunning={false} onRun={onRun2} />)
-      await userEvent.click(screen.getByRole('button', { name: /run/i }))
-
-      // Assert - new callback should be called
-      expect(onRun1).not.toHaveBeenCalled()
-      expect(onRun2).toHaveBeenCalledWith('https://first.com')
-    })
-  })
-
-  // Callback Stability Tests
-  describe('Callback Stability', () => {
-    it('should use memoized handleUrlChange callback', async () => {
-      const props = createUrlInputProps()
-
-      const { rerender } = render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'a')
-
-      // Rerender with same props
-      rerender(<UrlInput {...props} />)
-      await userEvent.type(input, 'b')
-
-      // Assert - input should work correctly across rerenders
-      expect(input).toHaveValue('ab')
-    })
-
-    it('should maintain URL state across rerenders', async () => {
-      const props = createUrlInputProps()
-
-      const { rerender } = render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://stable.com')
-
-      // Rerender
-      rerender(<UrlInput {...props} />)
-
-      // Assert - URL should be maintained
-      expect(input).toHaveValue('https://stable.com')
-    })
-  })
-
-  // Component Memoization Tests
-  describe('Component Memoization', () => {
-    it('should be wrapped with React.memo', () => {
-      expect(UrlInput.$$typeof).toBeDefined()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle very long URLs', async () => {
-      const props = createUrlInputProps()
-      const longUrl = `https://example.com/${'a'.repeat(1000)}`
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, longUrl)
-
-      expect(input).toHaveValue(longUrl)
-    })
-
-    it('should handle URLs with unicode characters', async () => {
-      const props = createUrlInputProps()
-      const unicodeUrl = 'https://example.com/路径/测试'
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, unicodeUrl)
-
-      expect(input).toHaveValue(unicodeUrl)
-    })
-
-    it('should handle rapid typing', async () => {
-      const props = createUrlInputProps()
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://rapid.com', { delay: 1 })
-
-      expect(input).toHaveValue('https://rapid.com')
-    })
-
-    it('should handle keyboard enter to trigger run', async () => {
-      // Arrange - Note: This tests if the button can be activated via keyboard
-      const onRun = vi.fn()
-      const props = createUrlInputProps({ onRun })
-
-      render(<UrlInput {...props} />)
-      const input = screen.getByRole('textbox')
-      await userEvent.type(input, 'https://enter.com')
-
-      // Focus button and press enter
-      const button = screen.getByRole('button', { name: /run/i })
-      button.focus()
-      await userEvent.keyboard('{Enter}')
-
-      expect(onRun).toHaveBeenCalledWith('https://enter.com')
-    })
-
-    it('should handle empty URL submission', async () => {
-      const onRun = vi.fn()
-      const props = createUrlInputProps({ onRun })
-
-      render(<UrlInput {...props} />)
-      await userEvent.click(screen.getByRole('button', { name: /run/i }))
-
-      // Assert - should call with empty string
-      expect(onRun).toHaveBeenCalledWith('')
-    })
-  })
-})
diff --git a/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx b/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
deleted file mode 100644
index ee34f411d27..00000000000
--- a/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { expectLoadingButton } from '@/test/button'
-
-// Component Imports (after mocks)
-
-import UrlInput from '../url-input'
-
-// Mock Setup
-
-vi.mock('@/context/i18n', () => ({
-  useDocLink: vi.fn(() => () => 'https://docs.example.com'),
-}))
-
-// Jina Reader UrlInput Component Tests
-
-describe('UrlInput (jina-reader)', () => {
-  const mockOnRun = vi.fn()
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render input and run button', () => {
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('should render input with placeholder from docLink', () => {
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-      const input = screen.getByRole('textbox')
-      expect(input).toHaveAttribute('placeholder', 'https://docs.example.com')
-    })
-
-    it('should show run text when not running', () => {
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-      const button = screen.getByRole('button')
-      expect(button).toHaveTextContent(/run/i)
-    })
-
-    it('should hide run text when running', () => {
-      render(<UrlInput isRunning={true} onRun={mockOnRun} />)
-      const button = screen.getByRole('button')
-      expect(button).not.toHaveTextContent(/run/i)
-    })
-
-    it('should show loading state on button when running', () => {
-      render(<UrlInput isRunning={true} onRun={mockOnRun} />)
-      const button = screen.getByRole('button')
-      expectLoadingButton(button)
-      expect(button.querySelector('.animate-spin')).toBeInTheDocument()
-    })
-
-    it('should not show loading state on button when not running', () => {
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-      const button = screen.getByRole('button')
-      expect(button).not.toBeDisabled()
-      expect(button).not.toHaveAttribute('aria-busy')
-      expect(button.querySelector('.animate-spin')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should update url when user types in input', async () => {
-      const user = userEvent.setup()
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      const input = screen.getByRole('textbox')
-      await user.type(input, 'https://example.com')
-
-      expect(input).toHaveValue('https://example.com')
-    })
-
-    it('should call onRun with url when run button clicked and not running', async () => {
-      const user = userEvent.setup()
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      const input = screen.getByRole('textbox')
-      await user.type(input, 'https://example.com')
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      expect(mockOnRun).toHaveBeenCalledWith('https://example.com')
-      expect(mockOnRun).toHaveBeenCalledTimes(1)
-    })
-
-    it('should NOT call onRun when isRunning is true', async () => {
-      const user = userEvent.setup()
-      render(<UrlInput isRunning={true} onRun={mockOnRun} />)
-
-      const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: 'https://example.com' } })
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      expect(mockOnRun).not.toHaveBeenCalled()
-    })
-
-    it('should call onRun with empty string when button clicked with empty input', async () => {
-      const user = userEvent.setup()
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      expect(mockOnRun).toHaveBeenCalledWith('')
-    })
-  })
-
-  // Props Variations Tests
-  describe('Props Variations', () => {
-    it('should update button state when isRunning changes from false to true', () => {
-      const { rerender } = render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      expect(screen.getByRole('button')).toHaveTextContent(/run/i)
-
-      rerender(<UrlInput isRunning={true} onRun={mockOnRun} />)
-
-      expect(screen.getByRole('button')).not.toHaveTextContent(/run/i)
-    })
-
-    it('should preserve input value when isRunning prop changes', async () => {
-      const user = userEvent.setup()
-      const { rerender } = render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      const input = screen.getByRole('textbox')
-      await user.type(input, 'https://preserved.com')
-      expect(input).toHaveValue('https://preserved.com')
-
-      rerender(<UrlInput isRunning={true} onRun={mockOnRun} />)
-      expect(input).toHaveValue('https://preserved.com')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle special characters in url', async () => {
-      const user = userEvent.setup()
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      const input = screen.getByRole('textbox')
-      const specialUrl = 'https://example.com/path?query=test&param=value#anchor'
-      await user.type(input, specialUrl)
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      expect(mockOnRun).toHaveBeenCalledWith(specialUrl)
-    })
-
-    it('should handle rapid input changes', () => {
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      const input = screen.getByRole('textbox')
-      fireEvent.change(input, { target: { value: 'a' } })
-      fireEvent.change(input, { target: { value: 'ab' } })
-      fireEvent.change(input, { target: { value: 'https://final.com' } })
-
-      expect(input).toHaveValue('https://final.com')
-
-      fireEvent.click(screen.getByRole('button'))
-      expect(mockOnRun).toHaveBeenCalledWith('https://final.com')
-    })
-  })
-
-  describe('Integration', () => {
-    it('should complete full workflow: type url -> click run -> verify callback', async () => {
-      const user = userEvent.setup()
-      render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      const input = screen.getByRole('textbox')
-      await user.type(input, 'https://mywebsite.com')
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      expect(mockOnRun).toHaveBeenCalledWith('https://mywebsite.com')
-    })
-
-    it('should show correct states during running workflow', () => {
-      const { rerender } = render(<UrlInput isRunning={false} onRun={mockOnRun} />)
-
-      expect(screen.getByRole('button')).toHaveTextContent(/run/i)
-
-      rerender(<UrlInput isRunning={true} onRun={mockOnRun} />)
-      expect(screen.getByRole('button')).not.toHaveTextContent(/run/i)
-
-      rerender(<UrlInput isRunning={false} onRun={mockOnRun} />)
-      expect(screen.getByRole('button')).toHaveTextContent(/run/i)
-    })
-  })
-})
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
deleted file mode 100644
index c7df281d658..00000000000
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'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'
-
-const I18N_PREFIX = 'stepOne.website'
-
-type Props = Readonly<{
-  isRunning: boolean
-  onRun: (url: string) => void
-}>
-
-const UrlInput: FC<Props> = ({
-  isRunning,
-  onRun,
-}) => {
-  const { t } = useTranslation()
-  const docLink = useDocLink()
-  const [url, setUrl] = useState('')
-  const handleOnRun = useCallback(() => {
-    if (isRunning)
-      return
-    onRun(url)
-  }, [isRunning, onRun, url])
-
-  return (
-    <div className="flex items-center justify-between">
-      <Input
-        value={url}
-        onValueChange={setUrl}
-        placeholder={docLink()}
-        size="small"
-      />
-      <Button
-        variant="primary"
-        onClick={handleOnRun}
-        className="ml-2"
-        loading={isRunning}
-        aria-label={t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' })}
-      >
-        {!isRunning ? t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' }) : ''}
-      </Button>
-    </div>
-  )
-}
-export default React.memo(UrlInput)
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/header.spec.tsx
deleted file mode 100644
index c7a61dfdad4..00000000000
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/header.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Header from '../header'
-
-describe('OnlineDriveHeader', () => {
-  const defaultProps = {
-    docTitle: 'S3 Guide',
-    docLink: 'https://docs.aws.com/s3',
-    onClickConfiguration: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should render doc link with title', () => {
-    render(<Header {...defaultProps} />)
-    const link = screen.getByText('S3 Guide').closest('a')
-    expect(link).toHaveAttribute('href', 'https://docs.aws.com/s3')
-    expect(link).toHaveAttribute('target', '_blank')
-  })
-})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx
index de008765e26..b057241c847 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/__tests__/index.spec.tsx
@@ -1,72 +1,21 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import type { OnlineDriveFile } from '@/models/pipeline'
-import type { OnlineDriveData } from '@/types/pipeline'
+import type { DataSourceNodeCompletedResponse, DataSourceNodeErrorResponse } from '@/types/pipeline'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import * as React from 'react'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { DatasourceType, OnlineDriveFileType } from '@/models/pipeline'
-import Header from '../header'
 import OnlineDrive from '../index'
-import { convertOnlineDriveData, isBucketListInitiation, isFile } from '../utils'
 
-// Mock useDocLink - context hook requires mocking
-const mockDocLink = vi.fn((path?: string) => `https://docs.example.com${path || ''}`)
-vi.mock('@/context/i18n', () => ({
-  useDocLink: () => mockDocLink,
+const mocks = vi.hoisted(() => ({
+  pipelineId: 'pipeline-123' as string | undefined,
+  docLink: vi.fn((path?: string) => `https://docs.example.com${path || ''}`),
+  openIntegrationsSetting: vi.fn(),
+  ssePost: vi.fn(),
+  toastError: vi.fn(),
+  useGetDataSourceAuth: vi.fn(),
 }))
 
-// Mock dataset-detail context - context provider requires mocking
-let mockPipelineId: string | undefined = 'pipeline-123'
-vi.mock('@/context/dataset-detail', () => ({
-  useDatasetDetailContextWithSelector: (selector: (s: Record<string, unknown>) => unknown) => selector({ dataset: { pipeline_id: mockPipelineId } }),
-}))
-
-// Mock modal context - context provider requires mocking
-const mockSetShowAccountSettingModal = vi.fn()
-vi.mock('@/context/modal-context', () => ({
-  useModalContext: () => ({
-    setShowAccountSettingModal: mockSetShowAccountSettingModal,
-  }),
-  useModalContextSelector: (selector: (s: Record<string, unknown>) => unknown) => selector({ setShowAccountSettingModal: mockSetShowAccountSettingModal }),
-}))
-
-// Mock ssePost - API service requires mocking
-const { mockSsePost } = vi.hoisted(() => ({
-  mockSsePost: vi.fn(),
-}))
-
-vi.mock('@/service/base', () => ({
-  ssePost: mockSsePost,
-}))
-
-// Mock useGetDataSourceAuth - API service hook requires mocking
-const { mockUseGetDataSourceAuth } = vi.hoisted(() => ({
-  mockUseGetDataSourceAuth: vi.fn(),
-}))
-
-vi.mock('@/service/use-datasource', () => ({
-  useGetDataSourceAuth: mockUseGetDataSourceAuth,
-}))
-
-const { mockToastError } = vi.hoisted(() => ({
-  mockToastError: vi.fn(),
-}))
-
-vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
-  return {
-    ...actual,
-    toast: {
-      ...actual.toast,
-      error: mockToastError,
-    },
-  }
-})
-
-// Note: zustand/react/shallow useShallow is imported directly (simple utility function)
-
-// Mock store state
-const mockStoreState = {
+const mockStoreState = vi.hoisted(() => ({
   nextPageParameters: {} as Record<string, unknown>,
   breadcrumbs: [] as string[],
   prefix: [] as string[],
@@ -76,7 +25,7 @@ const mockStoreState = {
   onlineDriveFileList: [] as OnlineDriveFile[],
   currentCredentialId: '',
   isTruncated: { current: false },
-  currentNextPageParametersRef: { current: {} },
+  currentNextPageParametersRef: { current: {} as Record<string, unknown> },
   setOnlineDriveFileList: vi.fn(),
   setKeywords: vi.fn(),
   setSelectedFileIds: vi.fn(),
@@ -84,90 +33,125 @@ const mockStoreState = {
   setPrefix: vi.fn(),
   setBucket: vi.fn(),
   setHasBucket: vi.fn(),
-}
+}))
 
-const mockGetState = vi.fn(() => mockStoreState)
-const mockDataSourceStore = { getState: mockGetState }
+const mockDataSourceStore = vi.hoisted(() => ({
+  getState: vi.fn(() => mockStoreState),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useDocLink: () => mocks.docLink,
+}))
+
+vi.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (
+    selector: (state: { dataset: { pipeline_id: string | undefined } }) => unknown,
+  ) => selector({ dataset: { pipeline_id: mocks.pipelineId } }),
+}))
+
+vi.mock('@/app/components/header/account-setting/use-integrations-setting', () => ({
+  useIntegrationsSetting: () => mocks.openIntegrationsSetting,
+}))
+
+vi.mock('@/service/base', () => ({
+  ssePost: (...args: unknown[]) => mocks.ssePost(...args),
+}))
+
+vi.mock('@/service/use-datasource', () => ({
+  useGetDataSourceAuth: (...args: unknown[]) => mocks.useGetDataSourceAuth(...args),
+}))
+
+vi.mock('@langgenius/dify-ui/toast', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@langgenius/dify-ui/toast')>()
+  return {
+    ...actual,
+    toast: {
+      ...actual.toast,
+      error: (...args: unknown[]) => mocks.toastError(...args),
+    },
+  }
+})
 
 vi.mock('../../store', () => ({
-  useDataSourceStoreWithSelector: (selector: (s: Record<string, unknown>) => unknown) => selector(mockStoreState as unknown as Record<string, unknown>),
+  useDataSourceStoreWithSelector: (selector: (state: typeof mockStoreState) => unknown) => selector(mockStoreState),
   useDataSourceStore: () => mockDataSourceStore,
 }))
 
-// Mock Header component
 vi.mock('../../base/header', () => ({
-  default: (props: Record<string, unknown>) => (
-    <div data-testid="header">
-      <span data-testid="header-doc-title">{props.docTitle as string}</span>
-      <span data-testid="header-doc-link">{props.docLink as string}</span>
-      <span data-testid="header-plugin-name">{props.pluginName as string}</span>
-      <span data-testid="header-credential-id">{props.currentCredentialId as string}</span>
-      <button data-testid="header-config-btn" onClick={props.onClickConfiguration as React.MouseEventHandler}>Configure</button>
-      <button data-testid="header-credential-change" onClick={() => (props.onCredentialChange as (id: string) => void)('new-cred-id')}>Change Credential</button>
-      <span data-testid="header-credentials-count">{(props.credentials as unknown[] | undefined)?.length || 0}</span>
+  default: (props: {
+    docTitle: string
+    docLink: string
+    pluginName: string
+    currentCredentialId: string
+    credentials?: unknown[]
+    onCredentialChange: (credentialId: string) => void
+    onClickConfiguration?: () => void
+  }) => (
+    <div data-testid="online-drive-header">
+      <span data-testid="header-doc-title">{props.docTitle}</span>
+      <span data-testid="header-doc-link">{props.docLink}</span>
+      <span data-testid="header-plugin-name">{props.pluginName}</span>
+      <span data-testid="header-credential-id">{props.currentCredentialId}</span>
+      <span data-testid="header-credentials-count">{props.credentials?.length || 0}</span>
+      <button type="button" onClick={() => props.onCredentialChange('credential-2')}>Change Credential</button>
+      <button type="button" onClick={props.onClickConfiguration}>Configure</button>
     </div>
   ),
 }))
 
-// Mock FileList component
 vi.mock('../file-list', () => ({
-  default: (props: Record<string, unknown>) => (
-    <div data-testid="file-list">
-      <span data-testid="file-list-count">{(props.fileList as unknown[] | undefined)?.length || 0}</span>
-      <span data-testid="file-list-selected-count">{(props.selectedFileIds as unknown[] | undefined)?.length || 0}</span>
-      <span data-testid="file-list-breadcrumbs">{(props.breadcrumbs as string[] | undefined)?.join('/') || ''}</span>
-      <span data-testid="file-list-keywords">{props.keywords as string}</span>
-      <span data-testid="file-list-bucket">{props.bucket as string}</span>
+  default: (props: {
+    fileList: OnlineDriveFile[]
+    selectedFileIds: string[]
+    breadcrumbs: string[]
+    keywords: string
+    bucket: string
+    isInPipeline: boolean
+    isLoading: boolean
+    supportBatchUpload: boolean
+    resetKeywords: () => void
+    updateKeywords: (keywords: string) => void
+    handleSelectFile: (file: OnlineDriveFile) => void
+    handleOpenFolder: (file: OnlineDriveFile) => void
+  }) => (
+    <div data-testid="online-drive-file-list">
+      <span data-testid="file-list-count">{props.fileList.length}</span>
+      <span data-testid="file-list-selected-count">{props.selectedFileIds.length}</span>
+      <span data-testid="file-list-breadcrumbs">{props.breadcrumbs.join('/')}</span>
+      <span data-testid="file-list-keywords">{props.keywords}</span>
+      <span data-testid="file-list-bucket">{props.bucket}</span>
       <span data-testid="file-list-loading">{String(props.isLoading)}</span>
-      <span data-testid="file-list-is-in-pipeline">{String(props.isInPipeline)}</span>
+      <span data-testid="file-list-in-pipeline">{String(props.isInPipeline)}</span>
       <span data-testid="file-list-support-batch">{String(props.supportBatchUpload)}</span>
-      <input
-        data-testid="file-list-search-input"
-        onChange={e => (props.updateKeywords as (v: string) => void)(e.target.value)}
-      />
-      <button data-testid="file-list-reset-keywords" onClick={props.resetKeywords as React.MouseEventHandler}>Reset</button>
+      <button type="button" onClick={() => props.updateKeywords('report')}>Search</button>
+      <button type="button" onClick={props.resetKeywords}>Reset Search</button>
       <button
-        data-testid="file-list-select-file"
-        onClick={() => {
-          const file: OnlineDriveFile = { id: 'file-1', name: 'test.txt', type: OnlineDriveFileType.file }
-          ;(props.handleSelectFile as (f: OnlineDriveFile) => void)(file)
-        }}
+        type="button"
+        onClick={() => props.handleSelectFile({ id: 'file-1', name: 'Report.pdf', type: OnlineDriveFileType.file })}
       >
         Select File
       </button>
       <button
-        data-testid="file-list-select-bucket"
-        onClick={() => {
-          const file: OnlineDriveFile = { id: 'bucket-1', name: 'my-bucket', type: OnlineDriveFileType.bucket }
-          ;(props.handleSelectFile as (f: OnlineDriveFile) => void)(file)
-        }}
+        type="button"
+        onClick={() => props.handleSelectFile({ id: 'bucket-1', name: 'Bucket', type: OnlineDriveFileType.bucket })}
       >
         Select Bucket
       </button>
       <button
-        data-testid="file-list-open-folder"
-        onClick={() => {
-          const file: OnlineDriveFile = { id: 'folder-1', name: 'my-folder', type: OnlineDriveFileType.folder }
-          ;(props.handleOpenFolder as (f: OnlineDriveFile) => void)(file)
-        }}
+        type="button"
+        onClick={() => props.handleOpenFolder({ id: 'folder-prefix', name: 'Folder', type: OnlineDriveFileType.folder })}
       >
         Open Folder
       </button>
       <button
-        data-testid="file-list-open-bucket"
-        onClick={() => {
-          const file: OnlineDriveFile = { id: 'bucket-1', name: 'my-bucket', type: OnlineDriveFileType.bucket }
-          ;(props.handleOpenFolder as (f: OnlineDriveFile) => void)(file)
-        }}
+        type="button"
+        onClick={() => props.handleOpenFolder({ id: 'bucket-id', name: 'Bucket', type: OnlineDriveFileType.bucket })}
       >
         Open Bucket
       </button>
       <button
-        data-testid="file-list-open-file"
-        onClick={() => {
-          const file: OnlineDriveFile = { id: 'file-1', name: 'test.txt', type: OnlineDriveFileType.file }
-          ;(props.handleOpenFolder as (f: OnlineDriveFile) => void)(file)
-        }}
+        type="button"
+        onClick={() => props.handleOpenFolder({ id: 'file-1', name: 'Report.pdf', type: OnlineDriveFileType.file })}
       >
         Open File
       </button>
@@ -175,48 +159,47 @@ vi.mock('../file-list', () => ({
   ),
 }))
 
-const createMockNodeData = (overrides?: Partial<DataSourceNodeType>): DataSourceNodeType => ({
-  title: 'Test Node',
+const createNodeData = (overrides: Partial<DataSourceNodeType> = {}): DataSourceNodeType => ({
+  title: 'Online Drive Node',
   plugin_id: 'plugin-123',
   provider_type: 'online_drive',
   provider_name: 'online-drive-provider',
-  datasource_name: 'online-drive-ds',
+  datasource_name: 'online-drive-datasource',
   datasource_label: 'Online Drive',
   datasource_parameters: {},
   datasource_configurations: {},
   ...overrides,
 } as DataSourceNodeType)
 
-const createMockOnlineDriveFile = (overrides?: Partial<OnlineDriveFile>): OnlineDriveFile => ({
-  id: 'file-1',
-  name: 'test-file.txt',
-  size: 1024,
-  type: OnlineDriveFileType.file,
-  ...overrides,
-})
-
-const createMockCredential = (overrides?: Partial<{ id: string, name: string }>) => ({
-  id: 'cred-1',
-  name: 'Test Credential',
-  avatar_url: 'https://example.com/avatar.png',
+const createCredential = (id = 'credential-1') => ({
+  id,
+  name: `Credential ${id}`,
+  avatar_url: '',
   credential: {},
-  is_default: false,
+  is_default: id === 'credential-1',
   type: 'oauth2',
+})
+
+const createOnlineDriveFile = (overrides: Partial<OnlineDriveFile> = {}): OnlineDriveFile => ({
+  id: 'file-existing',
+  name: 'Existing.txt',
+  type: OnlineDriveFileType.file,
+  size: 100,
   ...overrides,
 })
 
-type OnlineDriveProps = React.ComponentProps<typeof OnlineDrive>
+const renderOnlineDrive = (props: Partial<React.ComponentProps<typeof OnlineDrive>> = {}) => {
+  return render(
+    <OnlineDrive
+      nodeId="node-1"
+      nodeData={createNodeData()}
+      onCredentialChange={vi.fn()}
+      {...props}
+    />,
+  )
+}
 
-const createDefaultProps = (overrides?: Partial<OnlineDriveProps>): OnlineDriveProps => ({
-  nodeId: 'node-1',
-  nodeData: createMockNodeData(),
-  onCredentialChange: vi.fn(),
-  isInPipeline: false,
-  supportBatchUpload: true,
-  ...overrides,
-})
-
-const resetMockStoreState = () => {
+const resetStoreState = () => {
   mockStoreState.nextPageParameters = {}
   mockStoreState.breadcrumbs = []
   mockStoreState.prefix = []
@@ -234,1376 +217,186 @@ const resetMockStoreState = () => {
   mockStoreState.setPrefix = vi.fn()
   mockStoreState.setBucket = vi.fn()
   mockStoreState.setHasBucket = vi.fn()
+  mockDataSourceStore.getState.mockReturnValue(mockStoreState)
 }
 
 describe('OnlineDrive', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockToastError.mockReset()
-
-    // Reset store state
-    resetMockStoreState()
-
-    // Reset context values
-    mockPipelineId = 'pipeline-123'
-    mockSetShowAccountSettingModal.mockClear()
-
-    // Default mock return values
-    mockUseGetDataSourceAuth.mockReturnValue({
-      data: { result: [createMockCredential()] },
-    })
-
-    mockGetState.mockReturnValue(mockStoreState)
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('header'))!.toBeInTheDocument()
-      expect(screen.getByTestId('file-list'))!.toBeInTheDocument()
-    })
-
-    it('should render Header with correct props', () => {
-      mockStoreState.currentCredentialId = 'cred-123'
-      const props = createDefaultProps({
-        nodeData: createMockNodeData({ datasource_label: 'My Online Drive' }),
-      })
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('header-doc-title'))!.toHaveTextContent('Docs')
-      expect(screen.getByTestId('header-plugin-name'))!.toHaveTextContent('My Online Drive')
-      expect(screen.getByTestId('header-credential-id'))!.toHaveTextContent('cred-123')
-    })
-
-    it('should render FileList with correct props', () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.keywords = 'search-term'
-      mockStoreState.breadcrumbs = ['folder1', 'folder2']
-      mockStoreState.bucket = 'my-bucket'
-      mockStoreState.selectedFileIds = ['file-1', 'file-2']
-      mockStoreState.onlineDriveFileList = [
-        createMockOnlineDriveFile({ id: 'file-1', name: 'file1.txt' }),
-        createMockOnlineDriveFile({ id: 'file-2', name: 'file2.txt' }),
-      ]
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('file-list'))!.toBeInTheDocument()
-      expect(screen.getByTestId('file-list-keywords'))!.toHaveTextContent('search-term')
-      expect(screen.getByTestId('file-list-breadcrumbs'))!.toHaveTextContent('folder1/folder2')
-      expect(screen.getByTestId('file-list-bucket'))!.toHaveTextContent('my-bucket')
-      expect(screen.getByTestId('file-list-selected-count'))!.toHaveTextContent('2')
-    })
-
-    it('should pass docLink with correct path to Header', () => {
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(mockDocLink).toHaveBeenCalledWith('/use-dify/knowledge/knowledge-pipeline/authorize-data-source')
+    mocks.pipelineId = 'pipeline-123'
+    resetStoreState()
+    mocks.useGetDataSourceAuth.mockReturnValue({
+      data: {
+        result: [createCredential()],
+      },
     })
   })
 
-  describe('Props', () => {
-    describe('nodeId prop', () => {
-      it('should use nodeId in datasourceNodeRunURL for non-pipeline mode', async () => {
-        mockStoreState.currentCredentialId = 'cred-1'
-        const props = createDefaultProps({
-          nodeId: 'custom-node-id',
-          isInPipeline: false,
-        })
+  it('should render header and file list with current store state', () => {
+    mockStoreState.currentCredentialId = 'credential-1'
+    mockStoreState.onlineDriveFileList = [createOnlineDriveFile()]
+    mockStoreState.selectedFileIds = ['file-existing']
+    mockStoreState.keywords = 'existing'
+    mockStoreState.bucket = 'bucket-a'
 
-        render(<OnlineDrive {...props} />)
-
-        // Assert - ssePost should be called with correct URL
-        await waitFor(() => {
-          expect(mockSsePost).toHaveBeenCalledWith(
-            expect.stringContaining('/rag/pipelines/pipeline-123/workflows/published/datasource/nodes/custom-node-id/run'),
-            expect.any(Object),
-            expect.any(Object),
-          )
-        })
-      })
-
-      it('should use nodeId in datasourceNodeRunURL for pipeline mode', async () => {
-        mockStoreState.currentCredentialId = 'cred-1'
-        const props = createDefaultProps({
-          nodeId: 'custom-node-id',
-          isInPipeline: true,
-        })
-
-        render(<OnlineDrive {...props} />)
-
-        // Assert - ssePost should be called with correct URL for draft
-        await waitFor(() => {
-          expect(mockSsePost).toHaveBeenCalledWith(
-            expect.stringContaining('/rag/pipelines/pipeline-123/workflows/draft/datasource/nodes/custom-node-id/run'),
-            expect.any(Object),
-            expect.any(Object),
-          )
-        })
-      })
+    renderOnlineDrive({
+      nodeData: createNodeData({ datasource_label: 'Google Drive' }),
+      isInPipeline: true,
+      supportBatchUpload: false,
     })
 
-    describe('nodeData prop', () => {
-      it('should pass plugin_id and provider_name to useGetDataSourceAuth', () => {
-        const nodeData = createMockNodeData({
-          plugin_id: 'my-plugin-id',
-          provider_name: 'my-provider',
-        })
-        const props = createDefaultProps({ nodeData })
-
-        render(<OnlineDrive {...props} />)
-
-        expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
-          pluginId: 'my-plugin-id',
-          provider: 'my-provider',
-        })
-      })
-
-      it('should pass datasource_label to Header as pluginName', () => {
-        const nodeData = createMockNodeData({
-          datasource_label: 'Custom Online Drive',
-        })
-        const props = createDefaultProps({ nodeData })
-
-        render(<OnlineDrive {...props} />)
-
-        expect(screen.getByTestId('header-plugin-name'))!.toHaveTextContent('Custom Online Drive')
-      })
-    })
-
-    describe('isInPipeline prop', () => {
-      it('should use draft URL when isInPipeline is true', async () => {
-        mockStoreState.currentCredentialId = 'cred-1'
-        const props = createDefaultProps({ isInPipeline: true })
-
-        render(<OnlineDrive {...props} />)
-
-        await waitFor(() => {
-          expect(mockSsePost).toHaveBeenCalledWith(
-            expect.stringContaining('/workflows/draft/'),
-            expect.any(Object),
-            expect.any(Object),
-          )
-        })
-      })
-
-      it('should use published URL when isInPipeline is false', async () => {
-        mockStoreState.currentCredentialId = 'cred-1'
-        const props = createDefaultProps({ isInPipeline: false })
-
-        render(<OnlineDrive {...props} />)
-
-        await waitFor(() => {
-          expect(mockSsePost).toHaveBeenCalledWith(
-            expect.stringContaining('/workflows/published/'),
-            expect.any(Object),
-            expect.any(Object),
-          )
-        })
-      })
-
-      it('should pass isInPipeline to FileList', () => {
-        const props = createDefaultProps({ isInPipeline: true })
-
-        render(<OnlineDrive {...props} />)
-
-        expect(screen.getByTestId('file-list-is-in-pipeline'))!.toHaveTextContent('true')
-      })
-    })
-
-    describe('supportBatchUpload prop', () => {
-      it('should pass supportBatchUpload true to FileList when supportBatchUpload is true', () => {
-        const props = createDefaultProps({ supportBatchUpload: true })
-
-        render(<OnlineDrive {...props} />)
-
-        expect(screen.getByTestId('file-list-support-batch'))!.toHaveTextContent('true')
-      })
-
-      it('should pass supportBatchUpload false to FileList when supportBatchUpload is false', () => {
-        const props = createDefaultProps({ supportBatchUpload: false })
-
-        render(<OnlineDrive {...props} />)
-
-        expect(screen.getByTestId('file-list-support-batch'))!.toHaveTextContent('false')
-      })
-
-      it.each([
-        [true, 'true'],
-        [false, 'false'],
-        [undefined, 'true'], // Default value
-      ])('should handle supportBatchUpload=%s correctly', (value, expected) => {
-        const props = createDefaultProps({ supportBatchUpload: value })
-
-        render(<OnlineDrive {...props} />)
-
-        expect(screen.getByTestId('file-list-support-batch'))!.toHaveTextContent(expected)
-      })
-    })
-
-    describe('onCredentialChange prop', () => {
-      it('should call onCredentialChange with credential id', () => {
-        const mockOnCredentialChange = vi.fn()
-        const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
-
-        render(<OnlineDrive {...props} />)
-        fireEvent.click(screen.getByTestId('header-credential-change'))
-
-        expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
-      })
-    })
+    expect(screen.getByTestId('header-doc-title')).toHaveTextContent('Docs')
+    expect(screen.getByTestId('header-doc-link')).toHaveTextContent(
+      'https://docs.example.com/use-dify/knowledge/knowledge-pipeline/authorize-data-source',
+    )
+    expect(screen.getByTestId('header-plugin-name')).toHaveTextContent('Google Drive')
+    expect(screen.getByTestId('header-credential-id')).toHaveTextContent('credential-1')
+    expect(screen.getByTestId('header-credentials-count')).toHaveTextContent('1')
+    expect(screen.getByTestId('file-list-count')).toHaveTextContent('1')
+    expect(screen.getByTestId('file-list-selected-count')).toHaveTextContent('1')
+    expect(screen.getByTestId('file-list-keywords')).toHaveTextContent('existing')
+    expect(screen.getByTestId('file-list-bucket')).toHaveTextContent('bucket-a')
+    expect(screen.getByTestId('file-list-in-pipeline')).toHaveTextContent('true')
+    expect(screen.getByTestId('file-list-support-batch')).toHaveTextContent('false')
   })
 
-  describe('State Management', () => {
-    it('should fetch files on initial mount when fileList is empty', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.onlineDriveFileList = []
-      const props = createDefaultProps()
+  it('should fetch files on initial mount with draft datasource URL and request body', async () => {
+    mockStoreState.currentCredentialId = 'credential-1'
+    mockStoreState.nextPageParameters = { cursor: 'next' }
+    mockStoreState.prefix = ['root', 'folder']
+    mockStoreState.bucket = 'bucket-a'
 
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalled()
-      })
+    renderOnlineDrive({
+      isInPipeline: true,
     })
 
-    it('should not fetch files on initial mount when fileList is not empty', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      // Assert - Wait a bit to ensure no call is made
-      await new Promise(resolve => setTimeout(resolve, 100))
-      expect(mockSsePost).not.toHaveBeenCalled()
-    })
-
-    it('should not fetch files when currentCredentialId is empty', async () => {
-      mockStoreState.currentCredentialId = ''
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      // Assert - Wait a bit to ensure no call is made
-      await new Promise(resolve => setTimeout(resolve, 100))
-      expect(mockSsePost).not.toHaveBeenCalled()
-    })
-
-    it('should show loading state during fetch', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockSsePost.mockImplementation(() => {
-        // Never resolves to keep loading state
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(screen.getByTestId('file-list-loading'))!.toHaveTextContent('true')
-      })
-    })
-
-    it('should update file list on successful fetch', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      const mockFiles = [
-        { id: 'file-1', name: 'file1.txt', type: 'file' as const },
-        { id: 'file-2', name: 'file2.txt', type: 'file' as const },
-      ]
-      mockSsePost.mockImplementation((url, options, callbacks) => {
-        callbacks.onDataSourceNodeCompleted({
-          data: [{
-            bucket: '',
-            files: mockFiles,
-            is_truncated: false,
-            next_page_parameters: {},
-          }],
-          time_consuming: 1.0,
-        })
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalled()
-      })
-    })
-
-    it('should show error toast on fetch error', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      const errorMessage = 'Failed to fetch files'
-      mockSsePost.mockImplementation((url, options, callbacks) => {
-        callbacks.onDataSourceNodeError({
-          error: errorMessage,
-        })
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockToastError).toHaveBeenCalledWith(errorMessage)
-      })
-    })
-  })
-
-  // Memoization Logic and Dependencies Tests
-  describe('Memoization Logic', () => {
-    it('should filter files by keywords', () => {
-      mockStoreState.keywords = 'test'
-      mockStoreState.onlineDriveFileList = [
-        createMockOnlineDriveFile({ id: '1', name: 'test-file.txt' }),
-        createMockOnlineDriveFile({ id: '2', name: 'other-file.txt' }),
-        createMockOnlineDriveFile({ id: '3', name: 'another-test.pdf' }),
-      ]
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      // Assert - filteredOnlineDriveFileList should have 2 items matching 'test'
-      // Assert - filteredOnlineDriveFileList should have 2 items matching 'test'
-      expect(screen.getByTestId('file-list-count'))!.toHaveTextContent('2')
-    })
-
-    it('should return all files when keywords is empty', () => {
-      mockStoreState.keywords = ''
-      mockStoreState.onlineDriveFileList = [
-        createMockOnlineDriveFile({ id: '1', name: 'file1.txt' }),
-        createMockOnlineDriveFile({ id: '2', name: 'file2.txt' }),
-        createMockOnlineDriveFile({ id: '3', name: 'file3.pdf' }),
-      ]
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('file-list-count'))!.toHaveTextContent('3')
-    })
-
-    it('should filter files case-insensitively', () => {
-      mockStoreState.keywords = 'TEST'
-      mockStoreState.onlineDriveFileList = [
-        createMockOnlineDriveFile({ id: '1', name: 'test-file.txt' }),
-        createMockOnlineDriveFile({ id: '2', name: 'Test-Document.pdf' }),
-        createMockOnlineDriveFile({ id: '3', name: 'other.txt' }),
-      ]
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('file-list-count'))!.toHaveTextContent('2')
-    })
-  })
-
-  // Callback Stability and Memoization
-  describe('Callback Stability and Memoization', () => {
-    it('should have stable handleSetting callback', () => {
-      const props = createDefaultProps()
-      render(<OnlineDrive {...props} />)
-
-      fireEvent.click(screen.getByTestId('header-config-btn'))
-
-      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
-        payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
-      })
-    })
-
-    it('should have stable updateKeywords that updates store', () => {
-      const props = createDefaultProps()
-      render(<OnlineDrive {...props} />)
-
-      fireEvent.change(screen.getByTestId('file-list-search-input'), { target: { value: 'new-keyword' } })
-
-      expect(mockStoreState.setKeywords).toHaveBeenCalledWith('new-keyword')
-    })
-
-    it('should have stable resetKeywords that clears keywords', () => {
-      mockStoreState.keywords = 'old-keyword'
-      const props = createDefaultProps()
-      render(<OnlineDrive {...props} />)
-
-      fireEvent.click(screen.getByTestId('file-list-reset-keywords'))
-
-      expect(mockStoreState.setKeywords).toHaveBeenCalledWith('')
-    })
-  })
-
-  // User Interactions and Event Handlers
-  describe('User Interactions', () => {
-    describe('File Selection', () => {
-      it('should toggle file selection on file click', () => {
-        mockStoreState.selectedFileIds = []
-        const props = createDefaultProps()
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-select-file'))
-
-        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith(['file-1'])
-      })
-
-      it('should deselect file if already selected', () => {
-        mockStoreState.selectedFileIds = ['file-1']
-        const props = createDefaultProps()
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-select-file'))
-
-        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
-      })
-
-      it('should not select bucket type items', () => {
-        mockStoreState.selectedFileIds = []
-        const props = createDefaultProps()
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-select-bucket'))
-
-        expect(mockStoreState.setSelectedFileIds).not.toHaveBeenCalled()
-      })
-
-      it('should limit selection to one file when supportBatchUpload is false', () => {
-        mockStoreState.selectedFileIds = ['existing-file']
-        const props = createDefaultProps({ supportBatchUpload: false })
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-select-file'))
-
-        // Assert - Should not add new file because there's already one selected
-        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith(['existing-file'])
-      })
-
-      it('should allow multiple selections when supportBatchUpload is true', () => {
-        mockStoreState.selectedFileIds = ['existing-file']
-        const props = createDefaultProps({ supportBatchUpload: true })
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-select-file'))
-
-        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith(['existing-file', 'file-1'])
-      })
-    })
-
-    describe('Folder Navigation', () => {
-      it('should open folder and update breadcrumbs/prefix', () => {
-        mockStoreState.breadcrumbs = []
-        mockStoreState.prefix = []
-        const props = createDefaultProps()
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-open-folder'))
-
-        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
-        expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
-        expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith(['my-folder'])
-        expect(mockStoreState.setPrefix).toHaveBeenCalledWith(['folder-1'])
-      })
-
-      it('should open bucket and set bucket name', () => {
-        const props = createDefaultProps()
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-open-bucket'))
-
-        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
-        expect(mockStoreState.setBucket).toHaveBeenCalledWith('my-bucket')
-      })
-
-      it('should not navigate when opening a file', () => {
-        const props = createDefaultProps()
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('file-list-open-file'))
-
-        // Assert - No navigation functions should be called
-        expect(mockStoreState.setBreadcrumbs).not.toHaveBeenCalled()
-        expect(mockStoreState.setPrefix).not.toHaveBeenCalled()
-        expect(mockStoreState.setBucket).not.toHaveBeenCalled()
-      })
-    })
-
-    describe('Credential Change', () => {
-      it('should call onCredentialChange prop', () => {
-        const mockOnCredentialChange = vi.fn()
-        const props = createDefaultProps({ onCredentialChange: mockOnCredentialChange })
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('header-credential-change'))
-
-        expect(mockOnCredentialChange).toHaveBeenCalledWith('new-cred-id')
-      })
-    })
-
-    describe('Configuration', () => {
-      it('should open account setting modal on configuration click', () => {
-        const props = createDefaultProps()
-        render(<OnlineDrive {...props} />)
-
-        fireEvent.click(screen.getByTestId('header-config-btn'))
-
-        expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
-          payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
-        })
-      })
-    })
-  })
-
-  // Side Effects and Cleanup Tests
-  describe('Side Effects and Cleanup', () => {
-    it('should fetch files when nextPageParameters changes after initial mount', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
-      const props = createDefaultProps()
-      const { rerender } = render(<OnlineDrive {...props} />)
-
-      // Act - Simulate nextPageParameters change by re-rendering with updated state
-      mockStoreState.nextPageParameters = { page: 2 }
-      rerender(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalled()
-      })
-    })
-
-    it('should fetch files when prefix changes after initial mount', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
-      const props = createDefaultProps()
-      const { rerender } = render(<OnlineDrive {...props} />)
-
-      // Act - Simulate prefix change by re-rendering with updated state
-      mockStoreState.prefix = ['folder1']
-      rerender(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalled()
-      })
-    })
-
-    it('should fetch files when bucket changes after initial mount', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
-      const props = createDefaultProps()
-      const { rerender } = render(<OnlineDrive {...props} />)
-
-      // Act - Simulate bucket change by re-rendering with updated state
-      mockStoreState.bucket = 'new-bucket'
-      rerender(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalled()
-      })
-    })
-
-    it('should fetch files when currentCredentialId changes after initial mount', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.onlineDriveFileList = [createMockOnlineDriveFile()]
-      const props = createDefaultProps()
-      const { rerender } = render(<OnlineDrive {...props} />)
-
-      // Act - Simulate credential change by re-rendering with updated state
-      mockStoreState.currentCredentialId = 'cred-2'
-      rerender(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalled()
-      })
-    })
-
-    it('should not fetch files concurrently (debounce)', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      let resolveFirst: () => void
-      const firstPromise = new Promise<void>((resolve) => {
-        resolveFirst = resolve
-      })
-      mockSsePost.mockImplementationOnce((url, options, callbacks) => {
-        firstPromise.then(() => {
-          callbacks.onDataSourceNodeCompleted({
-            data: [{ bucket: '', files: [], is_truncated: false, next_page_parameters: {} }],
-            time_consuming: 1.0,
-          })
-        })
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      // Try to trigger another fetch while first is loading
-      mockStoreState.prefix = ['folder1']
-
-      // Assert - Only one call should be made initially due to isLoadingRef guard
-      expect(mockSsePost).toHaveBeenCalledTimes(1)
-
-      resolveFirst!()
-    })
-  })
-
-  // API Calls Mocking Tests
-  describe('API Calls', () => {
-    it('should call ssePost with correct parameters', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.prefix = ['folder1']
-      mockStoreState.bucket = 'my-bucket'
-      mockStoreState.nextPageParameters = { cursor: 'abc' }
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalledWith(
-          expect.any(String),
-          {
-            body: {
-              inputs: {
-                prefix: 'folder1',
-                bucket: 'my-bucket',
-                next_page_parameters: { cursor: 'abc' },
-                max_keys: 30,
-              },
-              datasource_type: DatasourceType.onlineDrive,
-              credential_id: 'cred-1',
-            },
+    await waitFor(() => expect(mocks.ssePost).toHaveBeenCalledTimes(1))
+    expect(mocks.ssePost).toHaveBeenCalledWith(
+      '/rag/pipelines/pipeline-123/workflows/draft/datasource/nodes/node-1/run',
+      {
+        body: {
+          inputs: {
+            prefix: 'folder',
+            bucket: 'bucket-a',
+            next_page_parameters: { cursor: 'next' },
+            max_keys: 30,
           },
-          expect.objectContaining({
-            onDataSourceNodeCompleted: expect.any(Function),
-            onDataSourceNodeError: expect.any(Function),
-          }),
-        )
-      })
-    })
-
-    it('should handle completed response and update store', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.breadcrumbs = ['folder1']
-      mockStoreState.bucket = 'my-bucket'
-      const mockResponseData = [{
-        bucket: 'my-bucket',
-        files: [
-          { id: 'file-1', name: 'file1.txt', size: 1024, type: 'file' as const },
-          { id: 'file-2', name: 'file2.txt', size: 2048, type: 'file' as const },
-        ],
-        is_truncated: true,
-        next_page_parameters: { cursor: 'next-cursor' },
-      }]
-      mockSsePost.mockImplementation((url, options, callbacks) => {
-        callbacks.onDataSourceNodeCompleted({
-          data: mockResponseData,
-          time_consuming: 1.5,
-        })
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalled()
-        expect(mockStoreState.setHasBucket).toHaveBeenCalledWith(true)
-        expect(mockStoreState.isTruncated.current).toBe(true)
-        expect(mockStoreState.currentNextPageParametersRef.current).toEqual({ cursor: 'next-cursor' })
-      })
-    })
-
-    it('should handle error response and show toast', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      const errorMessage = 'Access denied'
-      mockSsePost.mockImplementation((url, options, callbacks) => {
-        callbacks.onDataSourceNodeError({
-          error: errorMessage,
-        })
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockToastError).toHaveBeenCalledWith(errorMessage)
-      })
-    })
+          datasource_type: DatasourceType.onlineDrive,
+          credential_id: 'credential-1',
+        },
+      },
+      expect.objectContaining({
+        onDataSourceNodeCompleted: expect.any(Function),
+        onDataSourceNodeError: expect.any(Function),
+      }),
+    )
   })
 
-  describe('Edge Cases and Error Handling', () => {
-    it('should handle empty credentials list', () => {
-      mockUseGetDataSourceAuth.mockReturnValue({
-        data: { result: [] },
-      })
-      const props = createDefaultProps()
+  it('should store completed response files and pagination metadata', async () => {
+    mockStoreState.currentCredentialId = 'credential-1'
+    renderOnlineDrive()
 
-      render(<OnlineDrive {...props} />)
+    await waitFor(() => expect(mocks.ssePost).toHaveBeenCalledTimes(1))
+    const callbacks = mocks.ssePost.mock.calls[0]![2] as {
+      onDataSourceNodeCompleted: (response: DataSourceNodeCompletedResponse) => void
+    }
 
-      expect(screen.getByTestId('header-credentials-count'))!.toHaveTextContent('0')
-    })
+    callbacks.onDataSourceNodeCompleted({
+      data: [
+        {
+          bucket: 'bucket-a',
+          files: [
+            { id: 'new-file', name: 'New.pdf', size: 1024, type: 'file' },
+          ],
+          is_truncated: true,
+          next_page_parameters: { cursor: 'next-page' },
+        },
+      ],
+    } as DataSourceNodeCompletedResponse)
 
-    it('should handle undefined credentials data', () => {
-      mockUseGetDataSourceAuth.mockReturnValue({
-        data: undefined,
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('header-credentials-count'))!.toHaveTextContent('0')
-    })
-
-    it('should handle undefined pipelineId', async () => {
-      mockPipelineId = undefined
-      mockStoreState.currentCredentialId = 'cred-1'
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      // Assert - Should still attempt to call ssePost with undefined in URL
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalledWith(
-          expect.stringContaining('/rag/pipelines/undefined/'),
-          expect.any(Object),
-          expect.any(Object),
-        )
-      })
-    })
-
-    it('should handle empty file list', () => {
-      mockStoreState.onlineDriveFileList = []
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('file-list-count'))!.toHaveTextContent('0')
-    })
-
-    it('should handle empty breadcrumbs', () => {
-      mockStoreState.breadcrumbs = []
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('file-list-breadcrumbs'))!.toHaveTextContent('')
-    })
-
-    it('should handle empty bucket', () => {
-      mockStoreState.bucket = ''
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('file-list-bucket'))!.toHaveTextContent('')
-    })
-
-    it('should handle special characters in keywords', () => {
-      mockStoreState.keywords = 'test.file[1]'
-      mockStoreState.onlineDriveFileList = [
-        createMockOnlineDriveFile({ id: '1', name: 'test.file[1].txt' }),
-        createMockOnlineDriveFile({ id: '2', name: 'other.txt' }),
-      ]
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      // Assert - Should find file with special characters
-      // Assert - Should find file with special characters
-      expect(screen.getByTestId('file-list-count'))!.toHaveTextContent('1')
-    })
-
-    it('should handle very long file names', () => {
-      const longName = `${'a'.repeat(500)}.txt`
-      mockStoreState.onlineDriveFileList = [
-        createMockOnlineDriveFile({ id: '1', name: longName }),
-      ]
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      expect(screen.getByTestId('file-list-count'))!.toHaveTextContent('1')
-    })
-
-    it('should handle bucket list initiation response', async () => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      mockStoreState.bucket = ''
-      mockStoreState.prefix = []
-      const mockBucketResponse = [
-        { bucket: 'bucket-1', files: [], is_truncated: false, next_page_parameters: {} },
-        { bucket: 'bucket-2', files: [], is_truncated: false, next_page_parameters: {} },
-      ]
-      mockSsePost.mockImplementation((url, options, callbacks) => {
-        callbacks.onDataSourceNodeCompleted({
-          data: mockBucketResponse,
-          time_consuming: 1.0,
-        })
-      })
-      const props = createDefaultProps()
-
-      render(<OnlineDrive {...props} />)
-
-      await waitFor(() => {
-        expect(mockStoreState.setHasBucket).toHaveBeenCalledWith(true)
-      })
-    })
+    expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([
+      expect.objectContaining({ id: 'new-file', name: 'New.pdf' }),
+    ])
+    expect(mockStoreState.isTruncated.current).toBe(true)
+    expect(mockStoreState.currentNextPageParametersRef.current).toEqual({ cursor: 'next-page' })
+    expect(mockStoreState.setHasBucket).toHaveBeenCalledWith(true)
   })
 
-  describe('Prop Variations', () => {
-    it.each([
-      { isInPipeline: true, supportBatchUpload: true },
-      { isInPipeline: true, supportBatchUpload: false },
-      { isInPipeline: false, supportBatchUpload: true },
-      { isInPipeline: false, supportBatchUpload: false },
-    ])('should render correctly with isInPipeline=%s and supportBatchUpload=%s', (propVariation) => {
-      const props = createDefaultProps(propVariation)
+  it('should show a toast when datasource request fails', async () => {
+    mockStoreState.currentCredentialId = 'credential-1'
+    renderOnlineDrive()
 
-      render(<OnlineDrive {...props} />)
+    await waitFor(() => expect(mocks.ssePost).toHaveBeenCalledTimes(1))
+    const callbacks = mocks.ssePost.mock.calls[0]![2] as {
+      onDataSourceNodeError: (response: DataSourceNodeErrorResponse) => void
+    }
 
-      expect(screen.getByTestId('header'))!.toBeInTheDocument()
-      expect(screen.getByTestId('file-list'))!.toBeInTheDocument()
-      expect(screen.getByTestId('file-list-is-in-pipeline'))!.toHaveTextContent(String(propVariation.isInPipeline))
-      expect(screen.getByTestId('file-list-support-batch'))!.toHaveTextContent(String(propVariation.supportBatchUpload))
+    callbacks.onDataSourceNodeError({ error: 'Drive failed' } as DataSourceNodeErrorResponse)
+
+    expect(mocks.toastError).toHaveBeenCalledWith('Drive failed')
+  })
+
+  it('should not fetch files without a selected credential or when cached files already exist on mount', async () => {
+    renderOnlineDrive()
+
+    await waitFor(() => expect(mocks.ssePost).not.toHaveBeenCalled())
+
+    mockStoreState.currentCredentialId = 'credential-1'
+    mockStoreState.onlineDriveFileList = [createOnlineDriveFile()]
+    renderOnlineDrive()
+
+    await waitFor(() => expect(mocks.ssePost).not.toHaveBeenCalled())
+  })
+
+  it('should update selected files while respecting bucket and single-select rules', () => {
+    mockStoreState.currentCredentialId = 'credential-1'
+    mockStoreState.selectedFileIds = ['existing-file']
+
+    renderOnlineDrive({
+      supportBatchUpload: false,
     })
 
-    it.each([
-      { nodeId: 'node-a', expectedUrlPart: 'nodes/node-a/run' },
-      { nodeId: 'node-b', expectedUrlPart: 'nodes/node-b/run' },
-      { nodeId: '123-456', expectedUrlPart: 'nodes/123-456/run' },
-    ])('should use correct URL for nodeId=%s', async ({ nodeId, expectedUrlPart }) => {
-      mockStoreState.currentCredentialId = 'cred-1'
-      const props = createDefaultProps({ nodeId })
+    fireEvent.click(screen.getByRole('button', { name: 'Select File' }))
+    expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith(['existing-file'])
 
-      render(<OnlineDrive {...props} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select Bucket' }))
+    expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledTimes(1)
+  })
 
-      await waitFor(() => {
-        expect(mockSsePost).toHaveBeenCalledWith(
-          expect.stringContaining(expectedUrlPart),
-          expect.any(Object),
-          expect.any(Object),
-        )
-      })
+  it('should update breadcrumbs for folders and bucket name for buckets', () => {
+    mockStoreState.currentCredentialId = 'credential-1'
+    mockStoreState.breadcrumbs = ['Root']
+    mockStoreState.prefix = ['root-prefix']
+    mockStoreState.selectedFileIds = ['file-1']
+
+    renderOnlineDrive()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open Folder' }))
+
+    expect(mockStoreState.setOnlineDriveFileList).toHaveBeenCalledWith([])
+    expect(mockStoreState.setSelectedFileIds).toHaveBeenCalledWith([])
+    expect(mockStoreState.setBreadcrumbs).toHaveBeenCalledWith(['Root', 'Folder'])
+    expect(mockStoreState.setPrefix).toHaveBeenCalledWith(['root-prefix', 'folder-prefix'])
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open Bucket' }))
+    expect(mockStoreState.setBucket).toHaveBeenCalledWith('Bucket')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open File' }))
+    expect(mockStoreState.setBucket).toHaveBeenCalledTimes(1)
+  })
+
+  it('should open integrations settings and forward credential changes', () => {
+    const onCredentialChange = vi.fn()
+    renderOnlineDrive({
+      onCredentialChange,
     })
 
-    it.each([
-      { pluginId: 'plugin-a', providerName: 'provider-a' },
-      { pluginId: 'plugin-b', providerName: 'provider-b' },
-      { pluginId: '', providerName: '' },
-    ])('should call useGetDataSourceAuth with pluginId=%s and providerName=%s', ({ pluginId, providerName }) => {
-      const props = createDefaultProps({
-        nodeData: createMockNodeData({
-          plugin_id: pluginId,
-          provider_name: providerName,
-        }),
-      })
+    fireEvent.click(screen.getByRole('button', { name: 'Configure' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Change Credential' }))
 
-      render(<OnlineDrive {...props} />)
-
-      expect(mockUseGetDataSourceAuth).toHaveBeenCalledWith({
-        pluginId,
-        provider: providerName,
-      })
-    })
-  })
-})
-
-// Header Component Tests
-describe('Header', () => {
-  const createHeaderProps = (overrides?: Partial<React.ComponentProps<typeof Header>>) => ({
-    onClickConfiguration: vi.fn(),
-    docTitle: 'Documentation',
-    docLink: 'https://docs.example.com/guide',
-    ...overrides,
-  })
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const props = createHeaderProps()
-
-      render(<Header {...props} />)
-
-      expect(screen.getByText('Documentation'))!.toBeInTheDocument()
-    })
-
-    it('should render doc link with correct href', () => {
-      const props = createHeaderProps({
-        docLink: 'https://custom-docs.com/path',
-        docTitle: 'Custom Docs',
-      })
-
-      render(<Header {...props} />)
-
-      const link = screen.getByRole('link')
-      expect(link)!.toHaveAttribute('href', 'https://custom-docs.com/path')
-      expect(link)!.toHaveAttribute('target', '_blank')
-      expect(link)!.toHaveAttribute('rel', 'noopener noreferrer')
-    })
-
-    it('should render doc title text', () => {
-      const props = createHeaderProps({ docTitle: 'My Documentation Title' })
-
-      render(<Header {...props} />)
-
-      expect(screen.getByText('My Documentation Title'))!.toBeInTheDocument()
-    })
-
-    it('should render configuration button', () => {
-      const props = createHeaderProps()
-
-      render(<Header {...props} />)
-
-      expect(screen.getByRole('button'))!.toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    describe('docTitle prop', () => {
-      it.each([
-        'Getting Started',
-        'API Reference',
-        'Installation Guide',
-        '',
-      ])('should render docTitle="%s"', (docTitle) => {
-        const props = createHeaderProps({ docTitle })
-
-        render(<Header {...props} />)
-
-        if (docTitle)
-          expect(screen.getByText(docTitle))!.toBeInTheDocument()
-      })
-    })
-
-    describe('docLink prop', () => {
-      it.each([
-        'https://docs.example.com',
-        'https://docs.example.com/path/to/page',
-        '/relative/path',
-      ])('should set href to "%s"', (docLink) => {
-        const props = createHeaderProps({ docLink })
-
-        render(<Header {...props} />)
-
-        expect(screen.getByRole('link'))!.toHaveAttribute('href', docLink)
-      })
-    })
-
-    describe('onClickConfiguration prop', () => {
-      it('should call onClickConfiguration when configuration icon is clicked', () => {
-        const mockOnClickConfiguration = vi.fn()
-        const props = createHeaderProps({ onClickConfiguration: mockOnClickConfiguration })
-
-        render(<Header {...props} />)
-        const configIcon = screen.getByRole('button').querySelector('svg')
-        fireEvent.click(configIcon!)
-
-        expect(mockOnClickConfiguration).toHaveBeenCalledTimes(1)
-      })
-
-      it('should not throw when onClickConfiguration is undefined', () => {
-        const props = createHeaderProps({ onClickConfiguration: undefined })
-
-        expect(() => render(<Header {...props} />)).not.toThrow()
-      })
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have accessible link with title attribute', () => {
-      const props = createHeaderProps({ docTitle: 'Accessible Title' })
-
-      render(<Header {...props} />)
-
-      const titleSpan = screen.getByTitle('Accessible Title')
-      expect(titleSpan)!.toBeInTheDocument()
-    })
-  })
-})
-
-// Utils Tests
-describe('utils', () => {
-  // isFile Tests
-  describe('isFile', () => {
-    it('should return true for file type', () => {
-      expect(isFile('file')).toBe(true)
-    })
-
-    it('should return false for folder type', () => {
-      expect(isFile('folder')).toBe(false)
-    })
-
-    it.each([
-      ['file', true],
-      ['folder', false],
-    ] as const)('isFile(%s) should return %s', (type, expected) => {
-      expect(isFile(type)).toBe(expected)
-    })
-  })
-
-  // isBucketListInitiation Tests
-  describe('isBucketListInitiation', () => {
-    it('should return false when bucket is not empty', () => {
-      const data: OnlineDriveData[] = [
-        { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
-      ]
-
-      expect(isBucketListInitiation(data, [], 'existing-bucket')).toBe(false)
-    })
-
-    it('should return false when prefix is not empty', () => {
-      const data: OnlineDriveData[] = [
-        { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
-      ]
-
-      expect(isBucketListInitiation(data, ['folder1'], '')).toBe(false)
-    })
-
-    it('should return false when data items have no bucket', () => {
-      const data: OnlineDriveData[] = [
-        { bucket: '', files: [{ id: '1', name: 'file.txt', size: 1024, type: 'file' }], is_truncated: false, next_page_parameters: {} },
-      ]
-
-      expect(isBucketListInitiation(data, [], '')).toBe(false)
-    })
-
-    it('should return true for multiple buckets with no prefix and bucket', () => {
-      const data: OnlineDriveData[] = [
-        { bucket: 'bucket-1', files: [], is_truncated: false, next_page_parameters: {} },
-        { bucket: 'bucket-2', files: [], is_truncated: false, next_page_parameters: {} },
-      ]
-
-      expect(isBucketListInitiation(data, [], '')).toBe(true)
-    })
-
-    it('should return true for single bucket with no files, no prefix, and no bucket', () => {
-      const data: OnlineDriveData[] = [
-        { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
-      ]
-
-      expect(isBucketListInitiation(data, [], '')).toBe(true)
-    })
-
-    it('should return false for single bucket with files', () => {
-      const data: OnlineDriveData[] = [
-        { bucket: 'my-bucket', files: [{ id: '1', name: 'file.txt', size: 1024, type: 'file' }], is_truncated: false, next_page_parameters: {} },
-      ]
-
-      expect(isBucketListInitiation(data, [], '')).toBe(false)
-    })
-
-    it('should return false for empty data array', () => {
-      const data: OnlineDriveData[] = []
-
-      expect(isBucketListInitiation(data, [], '')).toBe(false)
-    })
-  })
-
-  // convertOnlineDriveData Tests
-  describe('convertOnlineDriveData', () => {
-    describe('Empty data handling', () => {
-      it('should return empty result for empty data array', () => {
-        const data: OnlineDriveData[] = []
-
-        const result = convertOnlineDriveData(data, [], '')
-
-        expect(result).toEqual({
-          fileList: [],
-          isTruncated: false,
-          nextPageParameters: {},
-          hasBucket: false,
-        })
-      })
-    })
-
-    describe('Bucket list initiation', () => {
-      it('should convert multiple buckets to bucket file list', () => {
-        const data: OnlineDriveData[] = [
-          { bucket: 'bucket-1', files: [], is_truncated: false, next_page_parameters: {} },
-          { bucket: 'bucket-2', files: [], is_truncated: false, next_page_parameters: {} },
-          { bucket: 'bucket-3', files: [], is_truncated: false, next_page_parameters: {} },
-        ]
-
-        const result = convertOnlineDriveData(data, [], '')
-
-        expect(result.fileList).toHaveLength(3)
-        expect(result.fileList[0]).toEqual({
-          id: 'bucket-1',
-          name: 'bucket-1',
-          type: OnlineDriveFileType.bucket,
-        })
-        expect(result.fileList[1]).toEqual({
-          id: 'bucket-2',
-          name: 'bucket-2',
-          type: OnlineDriveFileType.bucket,
-        })
-        expect(result.fileList[2]).toEqual({
-          id: 'bucket-3',
-          name: 'bucket-3',
-          type: OnlineDriveFileType.bucket,
-        })
-        expect(result.hasBucket).toBe(true)
-        expect(result.isTruncated).toBe(false)
-        expect(result.nextPageParameters).toEqual({})
-      })
-
-      it('should convert single bucket with no files to bucket list', () => {
-        const data: OnlineDriveData[] = [
-          { bucket: 'my-bucket', files: [], is_truncated: false, next_page_parameters: {} },
-        ]
-
-        const result = convertOnlineDriveData(data, [], '')
-
-        expect(result.fileList).toHaveLength(1)
-        expect(result.fileList[0]).toEqual({
-          id: 'my-bucket',
-          name: 'my-bucket',
-          type: OnlineDriveFileType.bucket,
-        })
-        expect(result.hasBucket).toBe(true)
-      })
-    })
-
-    describe('File list conversion', () => {
-      it('should convert files correctly', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [
-              { id: 'file-1', name: 'document.pdf', size: 1024, type: 'file' },
-              { id: 'file-2', name: 'image.png', size: 2048, type: 'file' },
-            ],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, ['folder1'], 'my-bucket')
-
-        expect(result.fileList).toHaveLength(2)
-        expect(result.fileList[0]).toEqual({
-          id: 'file-1',
-          name: 'document.pdf',
-          size: 1024,
-          type: OnlineDriveFileType.file,
-        })
-        expect(result.fileList[1]).toEqual({
-          id: 'file-2',
-          name: 'image.png',
-          size: 2048,
-          type: OnlineDriveFileType.file,
-        })
-        expect(result.hasBucket).toBe(true)
-      })
-
-      it('should convert folders correctly without size', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [
-              { id: 'folder-1', name: 'Documents', size: 0, type: 'folder' },
-              { id: 'folder-2', name: 'Images', size: 0, type: 'folder' },
-            ],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.fileList).toHaveLength(2)
-        expect(result.fileList[0]).toEqual({
-          id: 'folder-1',
-          name: 'Documents',
-          size: undefined,
-          type: OnlineDriveFileType.folder,
-        })
-        expect(result.fileList[1]).toEqual({
-          id: 'folder-2',
-          name: 'Images',
-          size: undefined,
-          type: OnlineDriveFileType.folder,
-        })
-      })
-
-      it('should handle mixed files and folders', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [
-              { id: 'folder-1', name: 'Documents', size: 0, type: 'folder' },
-              { id: 'file-1', name: 'readme.txt', size: 256, type: 'file' },
-              { id: 'folder-2', name: 'Images', size: 0, type: 'folder' },
-              { id: 'file-2', name: 'data.json', size: 512, type: 'file' },
-            ],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.fileList).toHaveLength(4)
-        expect(result.fileList[0]!.type).toBe(OnlineDriveFileType.folder)
-        expect(result.fileList[1]!.type).toBe(OnlineDriveFileType.file)
-        expect(result.fileList[2]!.type).toBe(OnlineDriveFileType.folder)
-        expect(result.fileList[3]!.type).toBe(OnlineDriveFileType.file)
-      })
-    })
-
-    describe('Truncation and pagination', () => {
-      it('should return isTruncated true when data is truncated', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
-            is_truncated: true,
-            next_page_parameters: { cursor: 'next-cursor' },
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.isTruncated).toBe(true)
-        expect(result.nextPageParameters).toEqual({ cursor: 'next-cursor' })
-      })
-
-      it('should return isTruncated false when not truncated', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.isTruncated).toBe(false)
-        expect(result.nextPageParameters).toEqual({})
-      })
-
-      it('should handle undefined is_truncated', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
-            is_truncated: undefined as unknown as boolean,
-            next_page_parameters: undefined as unknown as Record<string, unknown>,
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.isTruncated).toBe(false)
-        expect(result.nextPageParameters).toEqual({})
-      })
-    })
-
-    describe('hasBucket flag', () => {
-      it('should return hasBucket true when bucket exists in data', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.hasBucket).toBe(true)
-      })
-
-      it('should return hasBucket false when bucket is empty in data', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: '',
-            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], '')
-
-        expect(result.hasBucket).toBe(false)
-      })
-    })
-
-    describe('Edge cases', () => {
-      it('should handle files with zero size', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [{ id: 'file-1', name: 'empty.txt', size: 0, type: 'file' }],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.fileList[0]!.size).toBe(0)
-      })
-
-      it('should handle files with very large size', () => {
-        const largeSize = Number.MAX_SAFE_INTEGER
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [{ id: 'file-1', name: 'large.bin', size: largeSize, type: 'file' }],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.fileList[0]!.size).toBe(largeSize)
-      })
-
-      it('should handle files with special characters in name', () => {
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [
-              { id: 'file-1', name: 'file[1] (copy).txt', size: 1024, type: 'file' },
-              { id: 'file-2', name: 'doc-with-dash_and_underscore.pdf', size: 2048, type: 'file' },
-              { id: 'file-3', name: 'file with spaces.txt', size: 512, type: 'file' },
-            ],
-            is_truncated: false,
-            next_page_parameters: {},
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.fileList[0]!.name).toBe('file[1] (copy).txt')
-        expect(result.fileList[1]!.name).toBe('doc-with-dash_and_underscore.pdf')
-        expect(result.fileList[2]!.name).toBe('file with spaces.txt')
-      })
-
-      it('should handle complex next_page_parameters', () => {
-        const complexParams = {
-          cursor: 'abc123',
-          page: 2,
-          limit: 50,
-          nested: { key: 'value' },
-        }
-        const data: OnlineDriveData[] = [
-          {
-            bucket: 'my-bucket',
-            files: [{ id: 'file-1', name: 'file.txt', size: 1024, type: 'file' }],
-            is_truncated: true,
-            next_page_parameters: complexParams,
-          },
-        ]
-
-        const result = convertOnlineDriveData(data, [], 'my-bucket')
-
-        expect(result.nextPageParameters).toEqual(complexParams)
-      })
+    expect(mocks.openIntegrationsSetting).toHaveBeenCalledWith({
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
     })
+    expect(onCredentialChange).toHaveBeenCalledWith('credential-2')
   })
 })
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/__tests__/index.spec.tsx
deleted file mode 100644
index ce644a8a54c..00000000000
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,494 +0,0 @@
-import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
-import { fireEvent, render, screen } from '@testing-library/react'
-import Connect from '../index'
-
-// Mock useToolIcon - hook has complex dependencies (API calls, stores)
-const mockUseToolIcon = vi.fn()
-vi.mock('@/app/components/workflow/hooks', () => ({
-  useToolIcon: (data: DataSourceNodeType) => mockUseToolIcon(data),
-}))
-
-const createMockNodeData = (overrides?: Partial<DataSourceNodeType>): DataSourceNodeType => ({
-  title: 'Test Node',
-  plugin_id: 'plugin-123',
-  provider_type: 'online_drive',
-  provider_name: 'online-drive-provider',
-  datasource_name: 'online-drive-ds',
-  datasource_label: 'Online Drive',
-  datasource_parameters: {},
-  datasource_configurations: {},
-  ...overrides,
-} as DataSourceNodeType)
-
-type ConnectProps = React.ComponentProps<typeof Connect>
-
-const createDefaultProps = (overrides?: Partial<ConnectProps>): ConnectProps => ({
-  nodeData: createMockNodeData(),
-  onSetting: vi.fn(),
-  ...overrides,
-})
-
-describe('Connect', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    // Default mock return values
-    mockUseToolIcon.mockReturnValue('https://example.com/icon.png')
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const props = createDefaultProps()
-
-      render(<Connect {...props} />)
-
-      // Assert - Component should render with connect button
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('should render the BlockIcon component', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<Connect {...props} />)
-
-      // Assert - BlockIcon container should exist
-      const iconContainer = container.querySelector('.size-12')
-      expect(iconContainer).toBeInTheDocument()
-    })
-
-    it('should render the not connected message with node title', () => {
-      const props = createDefaultProps({
-        nodeData: createMockNodeData({ title: 'My Google Drive' }),
-      })
-
-      render(<Connect {...props} />)
-
-      // Assert - Should show translation key with interpolated name (use getAllBy since both messages contain similar text)
-      const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
-      expect(messages.length).toBeGreaterThanOrEqual(1)
-    })
-
-    it('should render the not connected tip message', () => {
-      const props = createDefaultProps()
-
-      render(<Connect {...props} />)
-
-      // Assert - Should show tip translation key
-      expect(screen.getByText(/datasetPipeline\.onlineDrive\.notConnectedTip/)).toBeInTheDocument()
-    })
-
-    it('should render the connect button with correct text', () => {
-      const props = createDefaultProps()
-
-      render(<Connect {...props} />)
-
-      // Assert - Button should have connect text
-      const button = screen.getByRole('button')
-      expect(button).toHaveTextContent('datasetCreation.stepOne.connect')
-    })
-
-    it('should render with primary button variant', () => {
-      const props = createDefaultProps()
-
-      render(<Connect {...props} />)
-
-      // Assert - Button should be primary variant
-      const button = screen.getByRole('button')
-      expect(button).toBeInTheDocument()
-    })
-
-    it('should render Icon3Dots component', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<Connect {...props} />)
-
-      // Assert - Icon3Dots should be rendered (it's an SVG element)
-      const iconElement = container.querySelector('svg')
-      expect(iconElement).toBeInTheDocument()
-    })
-
-    it('should apply correct container styling', () => {
-      const props = createDefaultProps()
-
-      const { container } = render(<Connect {...props} />)
-
-      // Assert - Container should have expected classes
-      const mainContainer = container.firstChild
-      expect(mainContainer).toHaveClass('flex', 'flex-col', 'items-start', 'gap-y-2', 'rounded-xl', 'p-6')
-    })
-  })
-
-  describe('Props', () => {
-    describe('nodeData prop', () => {
-      it('should pass nodeData to useToolIcon hook', () => {
-        const nodeData = createMockNodeData({ plugin_id: 'my-plugin' })
-        const props = createDefaultProps({ nodeData })
-
-        render(<Connect {...props} />)
-
-        expect(mockUseToolIcon).toHaveBeenCalledWith(nodeData)
-      })
-
-      it('should display node title in not connected message', () => {
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ title: 'Dropbox Storage' }),
-        })
-
-        render(<Connect {...props} />)
-
-        // Assert - Translation key should be in document (mock returns key)
-        const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
-        expect(messages.length).toBeGreaterThanOrEqual(1)
-      })
-
-      it('should display node title in tip message', () => {
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ title: 'OneDrive Connector' }),
-        })
-
-        render(<Connect {...props} />)
-
-        // Assert - Translation key should be in document
-        expect(screen.getByText(/datasetPipeline\.onlineDrive\.notConnectedTip/)).toBeInTheDocument()
-      })
-
-      it.each([
-        { title: 'Google Drive' },
-        { title: 'Dropbox' },
-        { title: 'OneDrive' },
-        { title: 'Amazon S3' },
-        { title: '' },
-      ])('should handle nodeData with title=$title', ({ title }) => {
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ title }),
-        })
-
-        render(<Connect {...props} />)
-
-        // Assert - Should render without error
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-    })
-
-    describe('onSetting prop', () => {
-      it('should call onSetting when connect button is clicked', () => {
-        const mockOnSetting = vi.fn()
-        const props = createDefaultProps({ onSetting: mockOnSetting })
-
-        render(<Connect {...props} />)
-        fireEvent.click(screen.getByRole('button'))
-
-        expect(mockOnSetting).toHaveBeenCalledTimes(1)
-      })
-
-      it('should call onSetting when button clicked', () => {
-        const mockOnSetting = vi.fn()
-        const props = createDefaultProps({ onSetting: mockOnSetting })
-
-        render(<Connect {...props} />)
-        fireEvent.click(screen.getByRole('button'))
-
-        // Assert - onClick handler receives the click event from React
-        expect(mockOnSetting).toHaveBeenCalled()
-        expect(mockOnSetting.mock.calls[0]).toBeDefined()
-      })
-
-      it('should call onSetting on each button click', () => {
-        const mockOnSetting = vi.fn()
-        const props = createDefaultProps({ onSetting: mockOnSetting })
-
-        render(<Connect {...props} />)
-        const button = screen.getByRole('button')
-        fireEvent.click(button)
-        fireEvent.click(button)
-        fireEvent.click(button)
-
-        expect(mockOnSetting).toHaveBeenCalledTimes(3)
-      })
-    })
-  })
-
-  // User Interactions and Event Handlers
-  describe('User Interactions', () => {
-    describe('Connect Button', () => {
-      it('should trigger onSetting callback on click', () => {
-        const mockOnSetting = vi.fn()
-        const props = createDefaultProps({ onSetting: mockOnSetting })
-        render(<Connect {...props} />)
-
-        fireEvent.click(screen.getByRole('button'))
-
-        expect(mockOnSetting).toHaveBeenCalled()
-      })
-
-      it('should be interactive and focusable', () => {
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-        const button = screen.getByRole('button')
-
-        expect(button).not.toBeDisabled()
-      })
-
-      it('should handle keyboard interaction (Enter key)', () => {
-        const mockOnSetting = vi.fn()
-        const props = createDefaultProps({ onSetting: mockOnSetting })
-        render(<Connect {...props} />)
-
-        const button = screen.getByRole('button')
-        fireEvent.keyDown(button, { key: 'Enter' })
-
-        // Assert - Button should be present and interactive
-        expect(button).toBeInTheDocument()
-      })
-    })
-  })
-
-  // Hook Integration Tests
-  describe('Hook Integration', () => {
-    describe('useToolIcon', () => {
-      it('should call useToolIcon with nodeData', () => {
-        const nodeData = createMockNodeData()
-        const props = createDefaultProps({ nodeData })
-
-        render(<Connect {...props} />)
-
-        expect(mockUseToolIcon).toHaveBeenCalledWith(nodeData)
-      })
-
-      it('should use toolIcon result from useToolIcon', () => {
-        mockUseToolIcon.mockReturnValue('custom-icon-url')
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        // Assert - The hook should be called and its return value used
-        expect(mockUseToolIcon).toHaveBeenCalled()
-      })
-
-      it('should handle empty string icon', () => {
-        mockUseToolIcon.mockReturnValue('')
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        // Assert - Should still render without crashing
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-
-      it('should handle undefined icon', () => {
-        mockUseToolIcon.mockReturnValue(undefined)
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        // Assert - Should still render without crashing
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-    })
-
-    describe('useTranslation', () => {
-      it('should use correct translation keys for not connected message', () => {
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        // Assert - Should use the correct translation key (both notConnected and notConnectedTip contain similar pattern)
-        const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
-        expect(messages.length).toBeGreaterThanOrEqual(1)
-      })
-
-      it('should use correct translation key for tip message', () => {
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByText(/datasetPipeline\.onlineDrive\.notConnectedTip/)).toBeInTheDocument()
-      })
-
-      it('should use correct translation key for connect button', () => {
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toHaveTextContent('datasetCreation.stepOne.connect')
-      })
-    })
-  })
-
-  describe('Edge Cases and Error Handling', () => {
-    describe('Empty/Null Values', () => {
-      it('should handle empty title in nodeData', () => {
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ title: '' }),
-        })
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-
-      it('should handle undefined optional fields in nodeData', () => {
-        const minimalNodeData = {
-          title: 'Test',
-          plugin_id: 'test',
-          provider_type: 'online_drive',
-          provider_name: 'provider',
-          datasource_name: 'ds',
-          datasource_label: 'Label',
-          datasource_parameters: {},
-          datasource_configurations: {},
-        } as DataSourceNodeType
-        const props = createDefaultProps({ nodeData: minimalNodeData })
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-
-      it('should handle empty plugin_id', () => {
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ plugin_id: '' }),
-        })
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-    })
-
-    describe('Special Characters', () => {
-      it('should handle special characters in title', () => {
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ title: 'Drive <script>alert("xss")</script>' }),
-        })
-
-        render(<Connect {...props} />)
-
-        // Assert - Should render safely without executing script
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-
-      it('should handle unicode characters in title', () => {
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ title: '云盘存储 🌐' }),
-        })
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-
-      it('should handle very long title', () => {
-        const longTitle = 'A'.repeat(500)
-        const props = createDefaultProps({
-          nodeData: createMockNodeData({ title: longTitle }),
-        })
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-    })
-
-    describe('Icon Variations', () => {
-      it('should handle string icon URL', () => {
-        mockUseToolIcon.mockReturnValue('https://cdn.example.com/icon.png')
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-
-      it('should handle object icon with url property', () => {
-        mockUseToolIcon.mockReturnValue({ url: 'https://cdn.example.com/icon.png' })
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-
-      it('should handle null icon', () => {
-        mockUseToolIcon.mockReturnValue(null)
-        const props = createDefaultProps()
-
-        render(<Connect {...props} />)
-
-        expect(screen.getByRole('button')).toBeInTheDocument()
-      })
-    })
-  })
-
-  describe('Prop Variations', () => {
-    it.each([
-      { title: 'Google Drive', plugin_id: 'google-drive' },
-      { title: 'Dropbox', plugin_id: 'dropbox' },
-      { title: 'OneDrive', plugin_id: 'onedrive' },
-      { title: 'Amazon S3', plugin_id: 's3' },
-      { title: 'Box', plugin_id: 'box' },
-    ])('should render correctly with title=$title and plugin_id=$plugin_id', ({ title, plugin_id }) => {
-      const props = createDefaultProps({
-        nodeData: createMockNodeData({ title, plugin_id }),
-      })
-
-      render(<Connect {...props} />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-      expect(mockUseToolIcon).toHaveBeenCalledWith(
-        expect.objectContaining({ title, plugin_id }),
-      )
-    })
-
-    it.each([
-      { provider_type: 'online_drive' },
-      { provider_type: 'cloud_storage' },
-      { provider_type: 'file_system' },
-    ])('should render correctly with provider_type=$provider_type', ({ provider_type }) => {
-      const props = createDefaultProps({
-        nodeData: createMockNodeData({ provider_type }),
-      })
-
-      render(<Connect {...props} />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it.each([
-      { datasource_label: 'Google Drive Storage' },
-      { datasource_label: 'Dropbox Files' },
-      { datasource_label: '' },
-      { datasource_label: 'S3 Bucket' },
-    ])('should render correctly with datasource_label=$datasource_label', ({ datasource_label }) => {
-      const props = createDefaultProps({
-        nodeData: createMockNodeData({ datasource_label }),
-      })
-
-      render(<Connect {...props} />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have an accessible button', () => {
-      const props = createDefaultProps()
-
-      render(<Connect {...props} />)
-
-      // Assert - Button should be accessible by role
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('should have proper text content for screen readers', () => {
-      const props = createDefaultProps()
-
-      render(<Connect {...props} />)
-
-      // Assert - Text content should be present
-      const messages = screen.getAllByText(/datasetPipeline\.onlineDrive\.notConnected/)
-      expect(messages.length).toBe(2) // Both notConnected and notConnectedTip
-    })
-  })
-})
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
deleted file mode 100644
index 6a7190161d3..00000000000
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
-import { Button } from '@langgenius/dify-ui/button'
-import { useTranslation } from 'react-i18next'
-import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
-import BlockIcon from '@/app/components/workflow/block-icon'
-import { useToolIcon } from '@/app/components/workflow/hooks'
-import { BlockEnum } from '@/app/components/workflow/types'
-
-type ConnectProps = {
-  nodeData: DataSourceNodeType
-  onSetting: () => void
-}
-
-const Connect = ({
-  nodeData,
-  onSetting,
-}: ConnectProps) => {
-  const { t } = useTranslation()
-  const toolIcon = useToolIcon(nodeData)
-
-  return (
-    <div className="flex flex-col items-start gap-y-2 rounded-xl bg-workflow-process-bg p-6">
-      <div className="flex size-12 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5">
-        <BlockIcon
-          type={BlockEnum.DataSource}
-          toolIcon={toolIcon}
-          size="md"
-        />
-      </div>
-      <div className="flex flex-col gap-y-1">
-        <div className="flex flex-col gap-y-1 pt-1 pb-3">
-          <div className="system-md-semibold text-text-secondary">
-            <span className="relative">
-              {t('onlineDrive.notConnected', { ns: 'datasetPipeline', name: nodeData.title })}
-              <Icon3Dots className="absolute -top-1.5 -right-2.5 size-4 text-text-secondary" />
-            </span>
-          </div>
-          <div className="system-sm-regular text-text-tertiary">
-            {t('onlineDrive.notConnectedTip', { ns: 'datasetPipeline', name: nodeData.title })}
-          </div>
-        </div>
-        <Button className="w-fit" variant="primary" onClick={onSetting}>
-          {t('stepOne.connect', { ns: 'datasetCreation' })}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default Connect
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
deleted file mode 100644
index bc51751aefc..00000000000
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Button } from '@langgenius/dify-ui/button'
-import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
-import * as React from 'react'
-import Divider from '@/app/components/base/divider'
-
-type HeaderProps = {
-  onClickConfiguration?: () => void
-  docTitle: string
-  docLink: string
-}
-
-const Header = ({
-  onClickConfiguration,
-  docTitle,
-  docLink,
-}: HeaderProps) => {
-  return (
-    <div className="flex items-center gap-x-2">
-      <div className="flex shrink-0 grow items-center gap-x-1">
-        <div className="w-20 bg-black">
-          {/* placeholder */}
-        </div>
-        <Divider type="vertical" className="mx-1 h-3.5" />
-        <Button
-          variant="ghost"
-          size="small"
-          className="px-1"
-        >
-          <RiEqualizer2Line
-            className="size-4"
-            onClick={onClickConfiguration}
-          />
-        </Button>
-      </div>
-      <a
-        className="flex items-center gap-x-1 overflow-hidden system-xs-medium text-text-accent"
-        href={docLink}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <RiBookOpenLine className="size-3.5 shrink-0" />
-        <span className="grow truncate" title={docTitle}>{docTitle}</span>
-      </a>
-    </div>
-  )
-}
-
-export default React.memo(Header)
diff --git a/web/app/components/datasets/list/dataset-card/__tests__/operation-item.spec.tsx b/web/app/components/datasets/list/dataset-card/__tests__/operation-item.spec.tsx
deleted file mode 100644
index 7aadbb4a412..00000000000
--- a/web/app/components/datasets/list/dataset-card/__tests__/operation-item.spec.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-import OperationItem from '../operation-item'
-
-describe('OperationItem', () => {
-  const defaultProps = {
-    iconClassName: 'i-ri-edit-line',
-    name: 'Edit',
-  }
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<OperationItem {...defaultProps} />)
-      expect(screen.getByText('Edit')).toBeInTheDocument()
-    })
-
-    it('should render the icon', () => {
-      const { container } = render(<OperationItem {...defaultProps} />)
-      const icon = container.querySelector('.i-ri-edit-line')
-      expect(icon).toBeInTheDocument()
-      expect(icon).toHaveClass('size-4', 'text-text-tertiary')
-    })
-
-    it('should render the name text', () => {
-      render(<OperationItem {...defaultProps} />)
-      const nameSpan = screen.getByText('Edit')
-      expect(nameSpan).toHaveClass('system-md-regular', 'text-text-secondary')
-    })
-  })
-
-  describe('Props', () => {
-    it('should render different name', () => {
-      render(<OperationItem {...defaultProps} name="Delete" />)
-      expect(screen.getByText('Delete')).toBeInTheDocument()
-    })
-
-    it('should be callable without handleClick', () => {
-      render(<OperationItem {...defaultProps} />)
-      const item = screen.getByText('Edit').closest('div')
-      expect(() => fireEvent.click(item!)).not.toThrow()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call handleClick when clicked', () => {
-      const handleClick = vi.fn()
-      render(<OperationItem {...defaultProps} handleClick={handleClick} />)
-
-      const item = screen.getByText('Edit').closest('div')
-      fireEvent.click(item!)
-
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('should prevent default and stop propagation on click', () => {
-      const handleClick = vi.fn()
-      render(<OperationItem {...defaultProps} handleClick={handleClick} />)
-
-      const item = screen.getByText('Edit').closest('div')
-      const clickEvent = new MouseEvent('click', { bubbles: true })
-      const preventDefaultSpy = vi.spyOn(clickEvent, 'preventDefault')
-      const stopPropagationSpy = vi.spyOn(clickEvent, 'stopPropagation')
-
-      item!.dispatchEvent(clickEvent)
-
-      expect(preventDefaultSpy).toHaveBeenCalled()
-      expect(stopPropagationSpy).toHaveBeenCalled()
-    })
-  })
-
-  describe('Styles', () => {
-    it('should have correct container styling', () => {
-      render(<OperationItem {...defaultProps} />)
-      const item = screen.getByText('Edit').closest('div')
-      expect(item).toHaveClass('flex', 'cursor-pointer', 'items-center', 'gap-x-1', 'rounded-lg')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle empty name', () => {
-      render(<OperationItem {...defaultProps} name="" />)
-      const container = document.querySelector('.cursor-pointer')
-      expect(container).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/datasets/list/dataset-card/operation-item.tsx b/web/app/components/datasets/list/dataset-card/operation-item.tsx
deleted file mode 100644
index 6aaf093358c..00000000000
--- a/web/app/components/datasets/list/dataset-card/operation-item.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-
-type OperationItemProps = {
-  iconClassName: string
-  name: string
-  handleClick?: () => void
-}
-
-const OperationItem = ({
-  iconClassName,
-  name,
-  handleClick,
-}: OperationItemProps) => {
-  return (
-    <div
-      className="flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover"
-      onClick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        handleClick?.()
-      }}
-    >
-      <span aria-hidden className={cn(iconClassName, 'size-4 text-text-tertiary')} />
-      <span className="px-1 system-md-regular text-text-secondary">
-        {name}
-      </span>
-    </div>
-  )
-}
-
-export default React.memo(OperationItem)
diff --git a/web/app/components/datasets/list/new-dataset-card/__tests__/index.spec.tsx b/web/app/components/datasets/list/new-dataset-card/__tests__/index.spec.tsx
deleted file mode 100644
index 2b4e22317d9..00000000000
--- a/web/app/components/datasets/list/new-dataset-card/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import NewDatasetCard from '../index'
-import Option from '../option'
-
-vi.mock('@/context/app-context', () => ({
-  useSelector: (selector: (state: { workspacePermissionKeys: string[] }) => unknown) => selector({
-    workspacePermissionKeys: ['dataset.create_and_management', 'dataset.external.connect'],
-  }),
-}))
-
-describe('New Dataset Card Integration', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Integration tests for Option component
-  describe('Option', () => {
-    describe('Rendering', () => {
-      it('should render a link with text and icon', () => {
-        render(<Option iconClassName="i-ri-add-line" text="Create" href="/create" />)
-        const link = screen.getByRole('link')
-        expect(link).toBeInTheDocument()
-        expect(screen.getByText('Create')).toBeInTheDocument()
-      })
-
-      it('should render icon with correct sizing class', () => {
-        const { container } = render(<Option iconClassName="i-ri-add-line" text="Test" href="/test" />)
-        const icon = container.querySelector('.size-4')
-        expect(icon).toBeInTheDocument()
-      })
-    })
-
-    describe('Props', () => {
-      it('should set correct href on the link', () => {
-        render(<Option iconClassName="i-ri-add-line" text="Go" href="/datasets/create" />)
-        const link = screen.getByRole('link')
-        expect(link).toHaveAttribute('href', '/datasets/create')
-      })
-
-      it('should render different text based on props', () => {
-        render(<Option iconClassName="i-ri-add-line" text="Custom Text" href="/path" />)
-        expect(screen.getByText('Custom Text')).toBeInTheDocument()
-      })
-
-      it('should render different href based on props', () => {
-        render(<Option iconClassName="i-ri-add-line" text="Link" href="/custom-path" />)
-        const link = screen.getByRole('link')
-        expect(link).toHaveAttribute('href', '/custom-path')
-      })
-    })
-
-    describe('Styles', () => {
-      it('should have correct link styling', () => {
-        render(<Option iconClassName="i-ri-add-line" text="Styled" href="/style" />)
-        const link = screen.getByRole('link')
-        expect(link).toHaveClass('flex', 'w-full', 'items-center', 'gap-2', 'rounded-lg')
-      })
-
-      it('should have text span with correct styling', () => {
-        render(<Option iconClassName="i-ri-add-line" text="Text Style" href="/s" />)
-        const textSpan = screen.getByText('Text Style')
-        expect(textSpan).toHaveClass('min-w-0', 'grow', 'truncate')
-      })
-    })
-
-    describe('Edge Cases', () => {
-      it('should handle empty text', () => {
-        render(<Option iconClassName="i-ri-add-line" text="" href="/empty" />)
-        const link = screen.getByRole('link')
-        expect(link).toBeInTheDocument()
-      })
-
-      it('should handle long text', () => {
-        const longText = 'Z'.repeat(200)
-        render(<Option iconClassName="i-ri-add-line" text={longText} href="/long" />)
-        expect(screen.getByText(longText)).toBeInTheDocument()
-      })
-    })
-  })
-
-  // Integration tests for NewDatasetCard component
-  describe('NewDatasetCard', () => {
-    describe('Rendering', () => {
-      it('should render without crashing', () => {
-        render(<NewDatasetCard />)
-        // All 3 options should be visible
-        const links = screen.getAllByRole('link')
-        expect(links).toHaveLength(3)
-      })
-
-      it('should render the create dataset option', () => {
-        render(<NewDatasetCard />)
-        expect(screen.getByText(/createDataset/)).toBeInTheDocument()
-      })
-
-      it('should render the create from pipeline option', () => {
-        render(<NewDatasetCard />)
-        expect(screen.getByText(/createFromPipeline/)).toBeInTheDocument()
-      })
-
-      it('should render the connect dataset option', () => {
-        render(<NewDatasetCard />)
-        expect(screen.getByText(/connectDataset/)).toBeInTheDocument()
-      })
-    })
-
-    describe('Props', () => {
-      it('should have correct href for create dataset', () => {
-        render(<NewDatasetCard />)
-        const links = screen.getAllByRole('link')
-        const createLink = links.find(link => link.getAttribute('href') === '/datasets/create')
-        expect(createLink).toBeDefined()
-      })
-
-      it('should have correct href for create from pipeline', () => {
-        render(<NewDatasetCard />)
-        const links = screen.getAllByRole('link')
-        const pipelineLink = links.find(link => link.getAttribute('href') === '/datasets/create-from-pipeline')
-        expect(pipelineLink).toBeDefined()
-      })
-
-      it('should have correct href for connect dataset', () => {
-        render(<NewDatasetCard />)
-        const links = screen.getAllByRole('link')
-        const connectLink = links.find(link => link.getAttribute('href') === '/datasets/connect')
-        expect(connectLink).toBeDefined()
-      })
-    })
-
-    describe('Styles', () => {
-      it('should have correct container styling', () => {
-        const { container } = render(<NewDatasetCard />)
-        const wrapper = container.firstChild as HTMLElement
-        expect(wrapper).toHaveClass('inline-flex', 'h-41.5', 'flex-col', 'rounded-xl')
-      })
-    })
-  })
-})
diff --git a/web/app/components/datasets/list/new-dataset-card/__tests__/option.spec.tsx b/web/app/components/datasets/list/new-dataset-card/__tests__/option.spec.tsx
deleted file mode 100644
index bcdc4c2ccdf..00000000000
--- a/web/app/components/datasets/list/new-dataset-card/__tests__/option.spec.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-import Option from '../option'
-
-describe('Option', () => {
-  const defaultProps = {
-    iconClassName: 'i-ri-add-line',
-    text: 'Test Option',
-    href: '/test-path',
-  }
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<Option {...defaultProps} />)
-      expect(screen.getByRole('link')).toBeInTheDocument()
-    })
-
-    it('should render the text content', () => {
-      render(<Option {...defaultProps} />)
-      expect(screen.getByText('Test Option')).toBeInTheDocument()
-    })
-
-    it('should render the icon', () => {
-      render(<Option {...defaultProps} />)
-      // Icon should be rendered with correct size class
-      const icon = document.querySelector('.size-4')
-      expect(icon).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should have correct href attribute', () => {
-      render(<Option {...defaultProps} />)
-      const link = screen.getByRole('link')
-      expect(link).toHaveAttribute('href', '/test-path')
-    })
-
-    it('should render different text based on props', () => {
-      render(<Option {...defaultProps} text="Different Text" />)
-      expect(screen.getByText('Different Text')).toBeInTheDocument()
-    })
-
-    it('should render different href based on props', () => {
-      render(<Option {...defaultProps} href="/different-path" />)
-      const link = screen.getByRole('link')
-      expect(link).toHaveAttribute('href', '/different-path')
-    })
-  })
-
-  describe('Styles', () => {
-    it('should have correct base styling', () => {
-      render(<Option {...defaultProps} />)
-      const link = screen.getByRole('link')
-      expect(link).toHaveClass('flex', 'w-full', 'items-center', 'gap-2', 'rounded-lg')
-    })
-
-    it('should have text span with correct styling', () => {
-      render(<Option {...defaultProps} />)
-      const textSpan = screen.getByText('Test Option')
-      expect(textSpan).toHaveClass('min-w-0', 'grow', 'truncate')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle empty text', () => {
-      render(<Option {...defaultProps} text="" />)
-      const link = screen.getByRole('link')
-      expect(link).toBeInTheDocument()
-    })
-
-    it('should handle long text', () => {
-      const longText = 'A'.repeat(100)
-      render(<Option {...defaultProps} text={longText} />)
-      expect(screen.getByText(longText)).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/datasets/list/new-dataset-card/index.tsx b/web/app/components/datasets/list/new-dataset-card/index.tsx
deleted file mode 100644
index 497157f0c7d..00000000000
--- a/web/app/components/datasets/list/new-dataset-card/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import CreateResourceCard from '@/app/components/base/create-resource-card'
-import Option from './option'
-
-const NewDatasetCard = () => {
-  const { t } = useTranslation()
-
-  return (
-    <CreateResourceCard
-      footer={(
-        <Option
-          href="/datasets/connect"
-          iconClassName="i-custom-vender-solid-development-api-connection-mod"
-          text={t('connectDataset', { ns: 'dataset' })}
-        />
-      )}
-    >
-      <Option
-        href="/datasets/create"
-        iconClassName="i-ri-add-line"
-        text={t('createDataset', { ns: 'dataset' })}
-      />
-      <Option
-        href="/datasets/create-from-pipeline"
-        iconClassName="i-ri-function-add-line"
-        text={t('createFromPipeline', { ns: 'dataset' })}
-      />
-    </CreateResourceCard>
-  )
-}
-
-NewDatasetCard.displayName = 'NewDatasetCard'
-
-export default NewDatasetCard
diff --git a/web/app/components/datasets/list/new-dataset-card/option.tsx b/web/app/components/datasets/list/new-dataset-card/option.tsx
deleted file mode 100644
index 8016f5f1a11..00000000000
--- a/web/app/components/datasets/list/new-dataset-card/option.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import {
-  createResourceCardActionClassName,
-  createResourceCardActionIconClassName,
-} from '@/app/components/base/create-resource-card'
-import Link from '@/next/link'
-
-type OptionProps = {
-  iconClassName: string
-  text: string
-  href: string
-  disabled?: boolean
-}
-
-const Option = ({
-  iconClassName,
-  text,
-  href,
-  disabled = false,
-}: OptionProps) => {
-  if (disabled) {
-    return (
-      <div
-        className={cn(
-          'flex w-full cursor-not-allowed items-center gap-x-2 rounded-lg bg-transparent px-4 py-2 text-text-tertiary opacity-50 shadow-shadow-shadow-3',
-        )}
-      >
-        <span aria-hidden="true" className={cn(iconClassName, 'h-4 w-4 shrink-0')} />
-        <span className="grow text-left system-sm-medium">{text}</span>
-      </div>
-    )
-  }
-
-  return (
-    <Link
-      type="button"
-      className={createResourceCardActionClassName}
-      href={href}
-    >
-      <span aria-hidden="true" className={cn(iconClassName, createResourceCardActionIconClassName)} />
-      <span className="min-w-0 grow truncate">{text}</span>
-    </Link>
-  )
-}
-
-export default React.memo(Option)
diff --git a/web/app/components/datasets/preview/__tests__/index.spec.tsx b/web/app/components/datasets/preview/__tests__/index.spec.tsx
deleted file mode 100644
index 298d5890019..00000000000
--- a/web/app/components/datasets/preview/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { cleanup, render } from '@testing-library/react'
-import { afterEach, describe, expect, it } from 'vitest'
-import DatasetPreview from '../index'
-
-afterEach(() => {
-  cleanup()
-})
-
-describe('DatasetPreview', () => {
-  it('should render null', () => {
-    const { container } = render(<DatasetPreview />)
-    expect(container.firstChild).toBeNull()
-  })
-
-  it('should be a valid function component', () => {
-    expect(typeof DatasetPreview).toBe('function')
-  })
-
-  it('should not throw on multiple renders', () => {
-    expect(() => {
-      render(<DatasetPreview />)
-      render(<DatasetPreview />)
-    }).not.toThrow()
-  })
-})
diff --git a/web/app/components/datasets/preview/index.tsx b/web/app/components/datasets/preview/index.tsx
deleted file mode 100644
index e71c440c209..00000000000
--- a/web/app/components/datasets/preview/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-const DatasetPreview = () => null
-
-export default DatasetPreview
diff --git a/web/app/components/header/__tests__/index.spec.tsx b/web/app/components/header/__tests__/index.spec.tsx
deleted file mode 100644
index 73530684b39..00000000000
--- a/web/app/components/header/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import type { AnchorHTMLAttributes, ReactElement } from 'react'
-import { fireEvent, screen } from '@testing-library/react'
-import { vi } from 'vitest'
-import { renderWithSystemFeatures } from '@/__tests__/utils/mock-system-features'
-import { Header } from '../index'
-
-function createMockComponent(testId: string) {
-  return () => <div data-testid={testId} />
-}
-
-vi.mock('@/app/components/header/account-dropdown/workplace-selector', () => ({
-  default: createMockComponent('workplace-selector'),
-}))
-
-vi.mock('@/app/components/header/account-dropdown', () => ({
-  default: createMockComponent('account-dropdown'),
-}))
-
-vi.mock('@/app/components/header/app-nav', () => ({
-  default: createMockComponent('app-nav'),
-}))
-
-vi.mock('@/app/components/header/dataset-nav', () => ({
-  DatasetNav: createMockComponent('dataset-nav'),
-}))
-
-vi.mock('@/app/components/header/env-nav', () => ({
-  default: createMockComponent('env-nav'),
-}))
-
-vi.mock('@/app/components/header/explore-nav', () => ({
-  ExploreNav: createMockComponent('explore-nav'),
-}))
-
-vi.mock('@/app/components/header/license-env', () => ({
-  default: createMockComponent('license-nav'),
-}))
-
-vi.mock('@/app/components/header/plugins-nav', () => ({
-  default: createMockComponent('plugins-nav'),
-}))
-
-vi.mock('@/app/components/header/tools-nav', () => ({
-  ToolsNav: createMockComponent('tools-nav'),
-}))
-
-vi.mock('@/app/components/header/plan-badge', () => ({
-  PlanBadge: ({ onClick, plan }: { onClick?: () => void, plan?: string }) => (
-    <button data-testid="plan-badge" onClick={onClick} data-plan={plan} />
-  ),
-}))
-
-vi.mock('@/next/link', () => ({
-  default: ({ children, href, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { href?: string }) => <a href={href} {...props}>{children}</a>,
-}))
-
-let mockIsWorkspaceEditor = false
-let mockIsDatasetOperator = false
-let mockWorkspacePermissionKeys: string[] = []
-let mockMedia = 'desktop'
-let mockEnableBilling = false
-let mockPlanType = 'sandbox'
-let mockBrandingEnabled = false
-let mockBrandingTitle: string | null = null
-let mockBrandingLogo: string | null = null
-const mockSetShowPricingModal = vi.fn()
-const mockSetShowAccountSettingModal = vi.fn()
-
-vi.mock('@/context/app-context', () => ({
-  useAppContext: () => ({
-    isCurrentWorkspaceEditor: mockIsWorkspaceEditor,
-    isCurrentWorkspaceDatasetOperator: mockIsDatasetOperator,
-  }),
-  useSelector: (selector: (state: { workspacePermissionKeys: string[] }) => unknown) => selector({
-    workspacePermissionKeys: mockWorkspacePermissionKeys,
-  }),
-}))
-
-vi.mock('@/hooks/use-breakpoints', () => ({
-  default: () => mockMedia,
-  MediaType: { mobile: 'mobile', tablet: 'tablet', desktop: 'desktop' },
-}))
-
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: () => ({
-    enableBilling: mockEnableBilling,
-    plan: { type: mockPlanType },
-  }),
-}))
-
-vi.mock('@/context/modal-context', () => ({
-  useModalContext: () => ({
-    setShowPricingModal: mockSetShowPricingModal,
-    setShowAccountSettingModal: mockSetShowAccountSettingModal,
-  }),
-}))
-
-const renderHeader = (ui: ReactElement = <Header />) =>
-  renderWithSystemFeatures(ui, {
-    systemFeatures: {
-      branding: {
-        enabled: mockBrandingEnabled,
-        application_title: mockBrandingTitle ?? '',
-        workspace_logo: mockBrandingLogo ?? '',
-      },
-    },
-  })
-
-describe('Header', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockIsWorkspaceEditor = false
-    mockIsDatasetOperator = false
-    mockWorkspacePermissionKeys = ['app_library.access', 'tool.manage']
-    mockMedia = 'desktop'
-    mockEnableBilling = false
-    mockPlanType = 'sandbox'
-    mockBrandingEnabled = false
-    mockBrandingTitle = null
-    mockBrandingLogo = null
-  })
-
-  it('should render header with main nav components', () => {
-    renderHeader()
-
-    expect(screen.getByRole('link', { name: 'Dify' })).toHaveAttribute('href', '/apps')
-    expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument()
-    expect(screen.queryByRole('img', { name: /dify logo/i })).not.toBeInTheDocument()
-    expect(screen.getByTestId('workplace-selector')).toBeInTheDocument()
-    expect(screen.getByTestId('explore-nav')).toBeInTheDocument()
-    expect(screen.getByTestId('app-nav')).toBeInTheDocument()
-    expect(screen.getByTestId('account-dropdown')).toBeInTheDocument()
-  })
-
-  it('should show license nav when billing disabled, plan badge when enabled', () => {
-    mockEnableBilling = false
-    const { rerender } = renderHeader()
-    expect(screen.getByTestId('license-nav')).toBeInTheDocument()
-    expect(screen.queryByTestId('plan-badge')).not.toBeInTheDocument()
-
-    mockEnableBilling = true
-    rerender(<Header />)
-    expect(screen.queryByTestId('license-nav')).not.toBeInTheDocument()
-    expect(screen.getByTestId('plan-badge')).toBeInTheDocument()
-  })
-
-  it('should hide explore nav when workspace lacks app library access', () => {
-    mockWorkspacePermissionKeys = ['tool.manage']
-    renderHeader()
-
-    expect(screen.queryByTestId('explore-nav')).not.toBeInTheDocument()
-    expect(screen.getByTestId('dataset-nav')).toBeInTheDocument()
-  })
-
-  it('should call pricing modal for free plan, settings modal for paid plan', () => {
-    mockEnableBilling = true
-    mockPlanType = 'sandbox'
-    const { rerender } = renderHeader()
-
-    fireEvent.click(screen.getByTestId('plan-badge'))
-    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
-
-    mockPlanType = 'professional'
-    rerender(<Header />)
-    fireEvent.click(screen.getByTestId('plan-badge'))
-    expect(mockSetShowAccountSettingModal).toHaveBeenCalledTimes(1)
-  })
-
-  it('should render mobile layout without env nav', () => {
-    mockMedia = 'mobile'
-    renderHeader()
-
-    expect(screen.getByRole('link', { name: 'Dify' })).toHaveAttribute('href', '/apps')
-    expect(screen.queryByTestId('env-nav')).not.toBeInTheDocument()
-  })
-
-  it('should render branded title and logo when branding is enabled', () => {
-    mockBrandingEnabled = true
-    mockBrandingTitle = 'Acme Workspace'
-    mockBrandingLogo = '/logo.png'
-
-    renderHeader()
-
-    expect(screen.getByRole('link', { name: 'Acme Workspace' })).toHaveAttribute('href', '/apps')
-    expect(screen.queryByRole('img', { name: /logo/i })).not.toBeInTheDocument()
-    expect(screen.queryByRole('img', { name: /dify logo/i })).not.toBeInTheDocument()
-  })
-
-  it('should show default Dify logo when branding is enabled but no workspace_logo', () => {
-    mockBrandingEnabled = true
-    mockBrandingTitle = 'Custom Title'
-    mockBrandingLogo = null
-
-    renderHeader()
-
-    expect(screen.getByRole('link', { name: 'Custom Title' })).toHaveAttribute('href', '/apps')
-    expect(screen.queryByRole('img', { name: /dify logo/i })).not.toBeInTheDocument()
-  })
-
-  it('should use default Dify link label when branding enabled but no application_title', () => {
-    mockBrandingEnabled = true
-    mockBrandingTitle = null
-    mockBrandingLogo = null
-
-    renderHeader()
-
-    expect(screen.getByRole('link', { name: 'Dify' })).toHaveAttribute('href', '/apps')
-  })
-
-  it('should show app and dataset nav without page-level permissions', () => {
-    mockWorkspacePermissionKeys = []
-
-    renderHeader()
-
-    expect(screen.getByTestId('dataset-nav')).toBeInTheDocument()
-    expect(screen.getByTestId('app-nav')).toBeInTheDocument()
-  })
-
-  it('should show dataset nav when workspace only has dataset mutation permissions', () => {
-    mockWorkspacePermissionKeys = ['dataset.create_and_management', 'dataset.tag.manage', 'dataset.external.connect']
-
-    renderHeader()
-
-    expect(screen.getByTestId('dataset-nav')).toBeInTheDocument()
-  })
-
-  it('should render mobile layout with page permission nav restrictions', () => {
-    mockMedia = 'mobile'
-    mockWorkspacePermissionKeys = []
-
-    renderHeader()
-
-    expect(screen.queryByTestId('explore-nav')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('tools-nav')).not.toBeInTheDocument()
-    expect(screen.getByTestId('app-nav')).toBeInTheDocument()
-    expect(screen.getByTestId('dataset-nav')).toBeInTheDocument()
-  })
-
-  it('should show tools nav when workspace has MCP management access', () => {
-    mockWorkspacePermissionKeys = ['mcp.manage']
-
-    renderHeader()
-
-    expect(screen.getByTestId('tools-nav')).toBeInTheDocument()
-  })
-
-  it('should render mobile layout with billing enabled', () => {
-    mockMedia = 'mobile'
-    mockEnableBilling = true
-    mockPlanType = 'sandbox'
-
-    renderHeader()
-
-    expect(screen.getByTestId('plan-badge')).toBeInTheDocument()
-    expect(screen.queryByTestId('license-nav')).not.toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/header/account-dropdown/__tests__/index.spec.tsx b/web/app/components/header/account-dropdown/__tests__/index.spec.tsx
index 81b08046a94..741580f6a5c 100644
--- a/web/app/components/header/account-dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/__tests__/index.spec.tsx
@@ -248,7 +248,7 @@ describe('AccountDropdown', () => {
       fireEvent.click(screen.getByText('common.settings.preferences'))
 
       // Assert
-      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.PREFERENCES })
     })
 
     it('should show Appearance after Preferences in the main nav account dropdown', () => {
diff --git a/web/app/components/header/account-dropdown/main-nav-menu-content.tsx b/web/app/components/header/account-dropdown/main-nav-menu-content.tsx
index ee2ebcc981e..1b84397a1ed 100644
--- a/web/app/components/header/account-dropdown/main-nav-menu-content.tsx
+++ b/web/app/components/header/account-dropdown/main-nav-menu-content.tsx
@@ -127,7 +127,7 @@ export function MainNavMenuContent({
         </DropdownMenuLinkItem>
         <DropdownMenuItem
           className={mainNavMenuItemClassName}
-          onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })}
+          onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PREFERENCES })}
         >
           <MenuItemContent
             iconClassName="i-ri-equalizer-2-line"
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index cf9c31a6a40..6ed1c1896f9 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -108,4 +108,5 @@ const WorkplaceSelector = () => {
     </Select>
   )
 }
+
 export default WorkplaceSelector
diff --git 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
deleted file mode 100644
index 2b043539c9d..00000000000
--- a/web/app/components/header/account-setting/Integrations-page/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { AccountIntegrate } from '@/models/common'
-import { render, screen } from '@testing-library/react'
-import { useAccountIntegrates } from '@/service/use-common'
-import IntegrationsPage from '../index'
-
-vi.mock('@/service/use-common', () => ({
-  useAccountIntegrates: vi.fn(),
-}))
-
-describe('IntegrationsPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering connected integrations', () => {
-    it('should render connected integrations when list is provided', () => {
-      // Arrange
-      const mockData: AccountIntegrate[] = [
-        { provider: 'google', is_bound: true, link: '', created_at: 1678888888 },
-        { provider: 'github', is_bound: true, link: '', created_at: 1678888888 },
-      ]
-
-      vi.mocked(useAccountIntegrates).mockReturnValue({
-        data: {
-          data: mockData,
-        },
-        isPending: false,
-        isError: false,
-      } as unknown as ReturnType<typeof useAccountIntegrates>)
-
-      // Act
-      render(<IntegrationsPage />)
-
-      // Assert
-      expect(screen.getByText('common.integrations.connected')).toBeInTheDocument()
-      expect(screen.getByText('common.integrations.google')).toBeInTheDocument()
-      expect(screen.getByText('common.integrations.github')).toBeInTheDocument()
-      // Connect link should not be present when bound
-      expect(screen.queryByText('common.integrations.connect')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Unbound integrations', () => {
-    it('should render connect link for unbound integrations', () => {
-      // Arrange
-      const mockData: AccountIntegrate[] = [
-        { provider: 'google', is_bound: false, link: 'https://google.com', created_at: 1678888888 },
-      ]
-
-      vi.mocked(useAccountIntegrates).mockReturnValue({
-        data: {
-          data: mockData,
-        },
-        isPending: false,
-        isError: false,
-      } as unknown as ReturnType<typeof useAccountIntegrates>)
-
-      // Act
-      render(<IntegrationsPage />)
-
-      // Assert
-      expect(screen.getByText('common.integrations.google')).toBeInTheDocument()
-      const connectLink = screen.getByText('common.integrations.connect')
-      expect(connectLink).toBeInTheDocument()
-      expect(connectLink.closest('a')).toHaveAttribute('href', 'https://google.com')
-    })
-  })
-
-  describe('Edge cases', () => {
-    it('should render nothing when no integrations are provided', () => {
-      // Arrange
-      vi.mocked(useAccountIntegrates).mockReturnValue({
-        data: {
-          data: [],
-        },
-        isPending: false,
-        isError: false,
-      } as unknown as ReturnType<typeof useAccountIntegrates>)
-
-      // Act
-      render(<IntegrationsPage />)
-
-      // Assert
-      expect(screen.getByText('common.integrations.connected')).toBeInTheDocument()
-      expect(screen.queryByText('common.integrations.google')).not.toBeInTheDocument()
-      expect(screen.queryByText('common.integrations.github')).not.toBeInTheDocument()
-    })
-
-    it('should handle unknown providers gracefully', () => {
-      // Arrange
-      const mockData = [
-        { provider: 'unknown', is_bound: false, link: '', created_at: 1678888888 } as unknown as AccountIntegrate,
-      ]
-
-      vi.mocked(useAccountIntegrates).mockReturnValue({
-        data: {
-          data: mockData,
-        },
-        isPending: false,
-        isError: false,
-      } as unknown as ReturnType<typeof useAccountIntegrates>)
-
-      // Act
-      render(<IntegrationsPage />)
-
-      // Assert
-      expect(screen.queryByText('common.integrations.connect')).not.toBeInTheDocument()
-    })
-
-    it('should handle undefined data gracefully', () => {
-      // Arrange
-      vi.mocked(useAccountIntegrates).mockReturnValue({
-        data: undefined,
-        isPending: false,
-        isError: false,
-      } as unknown as ReturnType<typeof useAccountIntegrates>)
-
-      // Act
-      render(<IntegrationsPage />)
-
-      // Assert
-      expect(screen.getByText('common.integrations.connected')).toBeInTheDocument()
-      expect(screen.queryByText('common.integrations.google')).not.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/header/account-setting/Integrations-page/index.module.css b/web/app/components/header/account-setting/Integrations-page/index.module.css
deleted file mode 100644
index 7c2a8836395..00000000000
--- a/web/app/components/header/account-setting/Integrations-page/index.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.google-icon {
-  background: url(../../assets/google.svg) center center no-repeat;
-  background-size: 16px 16px;
-}
-
-.github-icon {
-  background: url(../../assets/github.svg) center center no-repeat;
-  background-size: 16px 16px;
-}
-
-.twitter-icon {
-  background: url(../../assets/twitter.svg) center center no-repeat;
-  background-size: 16px 16px;
-}
-
-.bitbucket-icon {
-  background: url(../../assets/bitbucket.svg) center center no-repeat;
-  background-size: 16px 16px;
-}
-
-.salesforce-icon {
-  background: url(../../assets/salesforce.svg) center center no-repeat;
-  background-size: 24px auto;
-}
diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx
deleted file mode 100644
index d1c8d2585df..00000000000
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import { cn } from '@langgenius/dify-ui/cn'
-import { useTranslation } from 'react-i18next'
-import Link from '@/next/link'
-import { useAccountIntegrates } from '@/service/use-common'
-import s from './index.module.css'
-
-const titleClassName = `
-  mb-2 text-sm font-medium text-gray-900
-`
-
-export default function IntegrationsPage() {
-  const { t } = useTranslation()
-
-  const integrateMap = {
-    google: {
-      name: t('integrations.google', { ns: 'common' }),
-      description: t('integrations.googleAccount', { ns: 'common' }),
-    },
-    github: {
-      name: t('integrations.github', { ns: 'common' }),
-      description: t('integrations.githubAccount', { ns: 'common' }),
-    },
-  }
-
-  const { data } = useAccountIntegrates()
-  const integrates = data?.data ?? []
-
-  return (
-    <>
-      <div className="mb-8">
-        <div className={titleClassName}>{t('integrations.connected', { ns: 'common' })}</div>
-        {
-          integrates.map((integrate) => {
-            const info = integrateMap[integrate.provider]
-            if (!info)
-              return null
-            return (
-              <div key={integrate.provider} className="mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2">
-                <div className={cn('mr-3 size-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
-                <div className="grow">
-                  <div className="text-sm leading-[21px] font-medium text-gray-800">{info.name}</div>
-                  <div className="text-xs leading-[18px] font-normal text-gray-500">{info.description}</div>
-                </div>
-                {
-                  !integrate.is_bound && (
-                    <Link
-                      className="flex h-8 cursor-pointer items-center rounded-lg border border-gray-200 bg-white px-[7px] text-xs font-medium text-gray-700"
-                      href={integrate.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {t('integrations.connect', { ns: 'common' })}
-                    </Link>
-                  )
-                }
-              </div>
-            )
-          })
-        }
-      </div>
-      {/* <div className='mb-8'>
-        <div className={titleClassName}>Add a service </div>
-        {
-          services.map(service => (
-            <div key={service.key} className='mb-2 flex items-center px-3 py-2 bg-gray-50 border-[0.5px] border-gray-200 rounded-lg'>
-              <div className={classNames('w-8 h-8 mr-3 bg-white rounded-lg border border-gray-100', s[`${service.key}-icon`])} />
-              <div className='grow'>
-                <div className='leading-[21px] text-sm font-medium text-gray-800'>{service.name}</div>
-                <div className='leading-[18px] text-xs font-normal text-gray-500'>{service.description}</div>
-              </div>
-              <Button className='text-xs font-medium text-gray-800'>Connect</Button>
-            </div>
-          ))
-        }
-      </div> */}
-    </>
-  )
-}
diff --git a/web/app/components/header/account-setting/__tests__/constants.spec.ts b/web/app/components/header/account-setting/__tests__/constants.spec.ts
index 04b9db50741..efa6175e2fe 100644
--- a/web/app/components/header/account-setting/__tests__/constants.spec.ts
+++ b/web/app/components/header/account-setting/__tests__/constants.spec.ts
@@ -26,6 +26,7 @@ describe('AccountSetting Constants', () => {
     expect(ACCOUNT_SETTING_TAB.DATA_SOURCE).toBe('data-source')
     expect(ACCOUNT_SETTING_TAB.API_BASED_EXTENSION).toBe('custom-endpoint')
     expect(ACCOUNT_SETTING_TAB.CUSTOM).toBe('custom')
+    expect(ACCOUNT_SETTING_TAB.PREFERENCES).toBe('preferences')
     expect(ACCOUNT_SETTING_TAB.LANGUAGE).toBe('language')
   })
 
@@ -42,6 +43,7 @@ describe('AccountSetting Constants', () => {
     expect(isValidAccountSettingTab('data-source')).toBe(true)
     expect(isValidAccountSettingTab('custom-endpoint')).toBe(true)
     expect(isValidAccountSettingTab('custom')).toBe(true)
+    expect(isValidAccountSettingTab('preferences')).toBe(true)
     expect(isValidAccountSettingTab('language')).toBe(true)
   })
 
@@ -55,6 +57,7 @@ describe('AccountSetting Constants', () => {
     expect(isValidSettingsTab('permissions')).toBe(true)
     expect(isValidSettingsTab('access-rules')).toBe(true)
     expect(isValidSettingsTab('billing')).toBe(true)
+    expect(isValidSettingsTab('preferences')).toBe(true)
     expect(isValidSettingsTab('language')).toBe(true)
     expect(isValidSettingsTab('provider')).toBe(true)
     expect(isValidSettingsTab('mcp')).toBe(true)
diff --git a/web/app/components/header/account-setting/__tests__/index.spec.tsx b/web/app/components/header/account-setting/__tests__/index.spec.tsx
index ec1ac9887d2..7113714ac4f 100644
--- a/web/app/components/header/account-setting/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/__tests__/index.spec.tsx
@@ -257,6 +257,17 @@ describe('AccountSetting', () => {
       expect(screen.getByText('common.settings.dataSource'))!.toBeInTheDocument()
     })
 
+    it('should normalize legacy language tab entries to preferences', () => {
+      // Act
+      renderAccountSetting({ initialTab: ACCOUNT_SETTING_TAB.LANGUAGE })
+
+      // Assert
+      const preferencesButton = screen.getByRole('button', { name: 'common.settings.preferences' })
+      expect(preferencesButton.querySelector('.i-ri-equalizer-2-fill')).toBeInTheDocument()
+      expect(screen.getByText('common.account.general')).toBeInTheDocument()
+      expect(screen.getByText('common.account.appearanceLabel')).toBeInTheDocument()
+    })
+
     it('should hide sidebar labels on mobile', () => {
       // Arrange
       vi.mocked(useBreakpoints).mockReturnValue(MediaType.mobile)
diff --git a/web/app/components/header/account-setting/__tests__/update-setting-dialog-form.spec.tsx b/web/app/components/header/account-setting/__tests__/update-setting-dialog-form.spec.tsx
new file mode 100644
index 00000000000..7ca34890a35
--- /dev/null
+++ b/web/app/components/header/account-setting/__tests__/update-setting-dialog-form.spec.tsx
@@ -0,0 +1,88 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { AUTO_UPDATE_MODE, AUTO_UPDATE_STRATEGY } from '@/app/components/plugins/reference-setting-modal/auto-update-setting/types'
+import { PluginCategoryEnum } from '@/app/components/plugins/types'
+import { ACCOUNT_SETTING_TAB } from '../constants'
+import UpdateSettingDialogForm from '../update-setting-dialog-form'
+
+const mockSetShowAccountSettingModal = vi.fn()
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContextSelector: (selector: (s: { setShowAccountSettingModal: typeof mockSetShowAccountSettingModal }) => typeof mockSetShowAccountSettingModal) => {
+    return selector({ setShowAccountSettingModal: mockSetShowAccountSettingModal })
+  },
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: (defaultNs?: string) => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      const ns = (options?.ns as string | undefined) ?? defaultNs
+      return `${ns ? `${ns}.` : ''}${key}`
+    },
+    i18n: {
+      language: 'en',
+      changeLanguage: vi.fn(),
+    },
+  }),
+  Trans: ({ i18nKey, components }: {
+    i18nKey: string
+    components?: Record<string, React.ReactElement>
+  }) => {
+    const setTimezone = components?.setTimezone
+    if (setTimezone)
+      return React.cloneElement(setTimezone, undefined, i18nKey)
+
+    return <span>{i18nKey}</span>
+  },
+}))
+
+vi.mock('@/app/components/base/date-and-time-picker/time-picker', () => ({
+  default: () => <div data-testid="time-picker" />,
+}))
+
+vi.mock('@/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker', () => ({
+  default: () => <div data-testid="plugins-picker" />,
+}))
+
+describe('UpdateSettingDialogForm', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should open preferences after closing the update setting dialog when timezone link is clicked', () => {
+    const onRequestClose = vi.fn()
+
+    render(
+      <UpdateSettingDialogForm
+        autoUpgrade={{
+          strategy_setting: AUTO_UPDATE_STRATEGY.fixOnly,
+          upgrade_time_of_day: 0,
+          upgrade_mode: AUTO_UPDATE_MODE.update_all,
+          exclude_plugins: [],
+          include_plugins: [],
+        }}
+        category={PluginCategoryEnum.tool}
+        plugins={[]}
+        scopeOptions={[
+          { value: AUTO_UPDATE_MODE.update_all, label: 'All' },
+        ]}
+        strategyOptions={[
+          { value: AUTO_UPDATE_STRATEGY.fixOnly, label: 'Fix only' },
+        ]}
+        timezone="UTC"
+        updateTimeValue="00:00"
+        minuteFilter={minutes => minutes}
+        onAutoUpgradeChange={vi.fn()}
+        onPluginsChange={vi.fn()}
+        onRequestClose={onRequestClose}
+        onUpdateTimeChange={vi.fn()}
+        renderTimePickerTrigger={() => <button type="button">Pick time</button>}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('autoUpdate.changeTimezone'))
+
+    expect(onRequestClose).toHaveBeenCalledTimes(1)
+    expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.PREFERENCES })
+  })
+})
diff --git a/web/app/components/header/account-setting/constants.ts b/web/app/components/header/account-setting/constants.ts
index d8128631306..67a89afc0c2 100644
--- a/web/app/components/header/account-setting/constants.ts
+++ b/web/app/components/header/account-setting/constants.ts
@@ -12,6 +12,7 @@ export const ACCOUNT_SETTING_TAB = {
   DATA_SOURCE: 'data-source',
   API_BASED_EXTENSION: 'custom-endpoint',
   CUSTOM: 'custom',
+  PREFERENCES: 'preferences',
   LANGUAGE: 'language',
 } as const
 
@@ -30,6 +31,7 @@ const WORKSPACE_SETTING_TAB_VALUES = [
 export type WorkspaceSettingTab = typeof WORKSPACE_SETTING_TAB_VALUES[number]
 
 const USER_SETTING_TAB_VALUES = [
+  ACCOUNT_SETTING_TAB.PREFERENCES,
   ACCOUNT_SETTING_TAB.LANGUAGE,
 ] as const
 
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index b04404bde17..a03fb30cea2 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -20,11 +20,11 @@ import { BillingPermission, hasPermission } from '@/utils/permission'
 import AccessRulesPage from './access-rules-page'
 import { ApiBasedExtensionPage } from './api-based-extension-page'
 import DataSourcePage from './data-source-page-new'
-import LanguagePage from './language-page'
 import MembersPage from './members-page'
 import ModelProviderPage from './model-provider-page'
 import { useResetModelProviderListExpanded } from './model-provider-page/atoms'
 import PermissionsPage from './permissions-page'
+import PreferencePage from './preference-page'
 
 const iconClassName = `
   w-4 h-4 mr-2
@@ -58,12 +58,14 @@ export default function AccountSetting({
   const isRbacEnabled = systemFeatures.rbac_enabled
   const canManageWorkspaceRoles = isRbacEnabled && hasPermission(workspacePermissionKeys, 'workspace.role.manage')
   const canViewBilling = enableBilling && hasPermission(workspacePermissionKeys, BillingPermission.View)
+  // Keep legacy `language` deep links opening Preferences during the tab rename migration.
+  const normalizedActiveTab = activeTab === ACCOUNT_SETTING_TAB.LANGUAGE ? ACCOUNT_SETTING_TAB.PREFERENCES : activeTab
   const activeMenu = (() => {
-    if (activeTab === ACCOUNT_SETTING_TAB.BILLING && !canViewBilling)
-      return ACCOUNT_SETTING_TAB.LANGUAGE
-    if ((activeTab === ACCOUNT_SETTING_TAB.PERMISSIONS || activeTab === ACCOUNT_SETTING_TAB.ACCESS_RULES) && !canManageWorkspaceRoles)
+    if (normalizedActiveTab === ACCOUNT_SETTING_TAB.BILLING && !canViewBilling)
+      return ACCOUNT_SETTING_TAB.PREFERENCES
+    if ((normalizedActiveTab === ACCOUNT_SETTING_TAB.PERMISSIONS || normalizedActiveTab === ACCOUNT_SETTING_TAB.ACCESS_RULES) && !canManageWorkspaceRoles)
       return ACCOUNT_SETTING_TAB.MEMBERS
-    return activeTab
+    return normalizedActiveTab
   })()
   const scrollContainerRef = useRef<HTMLDivElement>(null)
 
@@ -119,7 +121,7 @@ export default function AccountSetting({
       activeIcon: <span className={cn('i-ri-color-filter-fill', iconClassName)} />,
     },
     {
-      key: ACCOUNT_SETTING_TAB.LANGUAGE,
+      key: ACCOUNT_SETTING_TAB.PREFERENCES,
       name: t('settings.preferences', { ns: 'common' }),
       title: t('account.general', { ns: 'common' }),
       icon: <span className={cn('i-ri-equalizer-2-line', iconClassName)} />,
@@ -151,7 +153,7 @@ export default function AccountSetting({
 
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
-  const languageItem = settingItems.find(item => item.key === ACCOUNT_SETTING_TAB.LANGUAGE)
+  const preferenceItem = settingItems.find(item => item.key === ACCOUNT_SETTING_TAB.PREFERENCES)
 
   const menuItems = [
     {
@@ -161,7 +163,7 @@ export default function AccountSetting({
     },
     {
       key: 'user-group',
-      items: languageItem ? [languageItem] : [],
+      items: preferenceItem ? [preferenceItem] : [],
     },
   ]
 
@@ -266,7 +268,7 @@ export default function AccountSetting({
               {activeMenu === ACCOUNT_SETTING_TAB.DATA_SOURCE && <DataSourcePage />}
               {activeMenu === ACCOUNT_SETTING_TAB.API_BASED_EXTENSION && <ApiBasedExtensionPage />}
               {activeMenu === ACCOUNT_SETTING_TAB.CUSTOM && <CustomPage />}
-              {activeMenu === ACCOUNT_SETTING_TAB.LANGUAGE && <LanguagePage />}
+              {activeMenu === ACCOUNT_SETTING_TAB.PREFERENCES && <PreferencePage />}
             </div>
           </ScrollArea>
         </div>
diff --git a/web/app/components/header/account-setting/key-validator/KeyInput.tsx b/web/app/components/header/account-setting/key-validator/KeyInput.tsx
deleted file mode 100644
index c352cc48357..00000000000
--- a/web/app/components/header/account-setting/key-validator/KeyInput.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { ChangeEvent } from 'react'
-import type { ValidatedStatusState } from './declarations'
-import { ValidatedStatus } from './declarations'
-import {
-  ValidatedErrorIcon,
-  ValidatedErrorMessage,
-  ValidatedSuccessIcon,
-  ValidatingTip,
-} from './ValidateStatus'
-
-type KeyInputProps = {
-  value?: string
-  name: string
-  placeholder: string
-  className?: string
-  onChange: (v: string) => void
-  onFocus?: () => void
-  validating: boolean
-  validatedStatusState: ValidatedStatusState
-}
-
-const KeyInput = ({
-  value,
-  name,
-  placeholder,
-  className,
-  onChange,
-  onFocus,
-  validating,
-  validatedStatusState,
-}: KeyInputProps) => {
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value
-    onChange(inputValue)
-  }
-
-  const getValidatedIcon = () => {
-    if (validatedStatusState.status === ValidatedStatus.Error || validatedStatusState.status === ValidatedStatus.Exceed)
-      return <ValidatedErrorIcon />
-
-    if (validatedStatusState.status === ValidatedStatus.Success)
-      return <ValidatedSuccessIcon />
-  }
-  const getValidatedTip = () => {
-    if (validating)
-      return <ValidatingTip />
-
-    if (validatedStatusState.status === ValidatedStatus.Error)
-      return <ValidatedErrorMessage errorMessage={validatedStatusState.message ?? ''} />
-  }
-
-  return (
-    <div className={className}>
-      <div className="mb-2 text-[13px] font-medium text-gray-800">{name}</div>
-      <div className="
-        flex items-center rounded-lg bg-white px-3
-        shadow-xs
-      "
-      >
-        <input
-          className="
-            mr-2 w-full appearance-none
-            bg-transparent py-[9px] text-xs leading-[18px]
-            font-medium text-gray-700 outline-hidden
-          "
-          value={value}
-          placeholder={placeholder}
-          onChange={handleChange}
-          onFocus={onFocus}
-        />
-        {getValidatedIcon()}
-      </div>
-      {getValidatedTip()}
-    </div>
-  )
-}
-
-export default KeyInput
diff --git a/web/app/components/header/account-setting/key-validator/Operate.tsx b/web/app/components/header/account-setting/key-validator/Operate.tsx
deleted file mode 100644
index 984f572a0d9..00000000000
--- a/web/app/components/header/account-setting/key-validator/Operate.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { Status } from './declarations'
-import { StatusDot } from '@langgenius/dify-ui/status-dot'
-import { useTranslation } from 'react-i18next'
-
-type OperateProps = {
-  isOpen: boolean
-  status: Status
-  disabled?: boolean
-  onCancel: () => void
-  onSave: () => void
-  onAdd: () => void
-  onEdit: () => void
-}
-
-const Operate = ({
-  isOpen,
-  status,
-  disabled,
-  onCancel,
-  onSave,
-  onAdd,
-  onEdit,
-}: OperateProps) => {
-  const { t } = useTranslation()
-
-  if (isOpen) {
-    return (
-      <div className="flex items-center">
-        <div
-          className="
-          mr-[5px] flex
-          h-7 cursor-pointer items-center rounded-md px-3
-          text-xs font-medium text-gray-700
-        "
-          onClick={onCancel}
-        >
-          {t('operation.cancel', { ns: 'common' })}
-        </div>
-        <div
-          className="
-          flex h-7
-          cursor-pointer items-center rounded-md bg-primary-700 px-3
-          text-xs font-medium text-white
-        "
-          onClick={onSave}
-        >
-          {t('operation.save', { ns: 'common' })}
-        </div>
-      </div>
-    )
-  }
-
-  if (status === 'add') {
-    return (
-      <div
-        className={
-          `flex h-[28px] cursor-pointer items-center rounded-md border border-gray-200
-        bg-white px-3 text-xs font-medium text-gray-700 ${disabled && 'cursor-default opacity-50'}}`
-        }
-        onClick={() => !disabled && onAdd()}
-      >
-        {t('provider.addKey', { ns: 'common' })}
-      </div>
-    )
-  }
-
-  if (status === 'fail' || status === 'success') {
-    return (
-      <div className="flex items-center">
-        {
-          status === 'fail' && (
-            <div className="mr-4 flex items-center">
-              <div className="text-xs text-[#D92D20]">{t('provider.invalidApiKey', { ns: 'common' })}</div>
-              <StatusDot status="error" className="ml-2" />
-            </div>
-          )
-        }
-        {
-          status === 'success' && (
-            <StatusDot status="success" className="mr-4" />
-          )
-        }
-        <div
-          className={
-            `flex h-[28px] cursor-pointer items-center rounded-md border border-gray-200
-          bg-white px-3 text-xs font-medium text-gray-700 ${disabled && 'cursor-default opacity-50'}}`
-          }
-          onClick={() => !disabled && onEdit()}
-        >
-          {t('provider.editKey', { ns: 'common' })}
-        </div>
-      </div>
-    )
-  }
-
-  return null
-}
-
-export default Operate
diff --git a/web/app/components/header/account-setting/key-validator/__tests__/KeyInput.spec.tsx b/web/app/components/header/account-setting/key-validator/__tests__/KeyInput.spec.tsx
deleted file mode 100644
index 05df87f0582..00000000000
--- a/web/app/components/header/account-setting/key-validator/__tests__/KeyInput.spec.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { ComponentProps } from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { useState } from 'react'
-import { ValidatedStatus } from '../declarations'
-import KeyInput from '../KeyInput'
-
-type Props = ComponentProps<typeof KeyInput>
-
-const createProps = (overrides: Partial<Props> = {}): Props => ({
-  name: 'API key',
-  placeholder: 'Enter API key',
-  value: 'initial-value',
-  onChange: vi.fn(),
-  onFocus: undefined,
-  validating: false,
-  validatedStatusState: {},
-  ...overrides,
-})
-
-describe('KeyInput', () => {
-  it('shows the label and placeholder value', () => {
-    const props = createProps()
-    render(<KeyInput {...props} />)
-
-    expect(screen.getByText('API key')).toBeInTheDocument()
-    expect(screen.getByPlaceholderText('Enter API key')).toHaveValue('initial-value')
-  })
-
-  it('updates the visible input value when user types', () => {
-    const ControlledKeyInput = () => {
-      const [value, setValue] = useState('initial-value')
-      return (
-        <KeyInput
-          {...createProps({
-            value,
-            onChange: setValue,
-          })}
-        />
-      )
-    }
-
-    render(<ControlledKeyInput />)
-    fireEvent.change(screen.getByPlaceholderText('Enter API key'), { target: { value: 'updated' } })
-
-    expect(screen.getByPlaceholderText('Enter API key')).toHaveValue('updated')
-  })
-
-  it('cycles through validating and error messaging', () => {
-    const props = createProps()
-    const { rerender } = render(
-      <KeyInput {...props} validating validatedStatusState={{}} />,
-    )
-
-    expect(screen.getByText('common.provider.validating')).toBeInTheDocument()
-
-    rerender(
-      <KeyInput
-        {...props}
-        validating={false}
-        validatedStatusState={{ status: ValidatedStatus.Error, message: 'bad-request' }}
-      />,
-    )
-
-    expect(screen.getByText('common.provider.validatedErrorbad-request')).toBeInTheDocument()
-  })
-
-  it('does not show an error tip for exceed status', () => {
-    render(
-      <KeyInput
-        {...createProps({
-          validating: false,
-          validatedStatusState: { status: ValidatedStatus.Exceed, message: 'quota' },
-        })}
-      />,
-    )
-
-    expect(screen.queryByText(/common\.provider\.validatedError/i)).toBeNull()
-  })
-
-  it('does not show validating or error text for success status', () => {
-    render(
-      <KeyInput
-        {...createProps({
-          validating: false,
-          validatedStatusState: { status: ValidatedStatus.Success },
-        })}
-      />,
-    )
-
-    expect(screen.queryByText('common.provider.validating')).toBeNull()
-    expect(screen.queryByText(/common\.provider\.validatedError/i)).toBeNull()
-  })
-
-  it('shows fallback error text when error message is missing', () => {
-    render(
-      <KeyInput
-        {...createProps({
-          validating: false,
-          validatedStatusState: { status: ValidatedStatus.Error },
-        })}
-      />,
-    )
-
-    expect(screen.getByText('common.provider.validatedError')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/header/account-setting/key-validator/__tests__/Operate.spec.tsx b/web/app/components/header/account-setting/key-validator/__tests__/Operate.spec.tsx
deleted file mode 100644
index 6e8359fb728..00000000000
--- a/web/app/components/header/account-setting/key-validator/__tests__/Operate.spec.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Operate from '../Operate'
-
-describe('Operate', () => {
-  it('should render cancel and save when editing is open', () => {
-    render(
-      <Operate
-        isOpen
-        status="add"
-        onAdd={vi.fn()}
-        onCancel={vi.fn()}
-        onEdit={vi.fn()}
-        onSave={vi.fn()}
-      />,
-    )
-
-    expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
-    expect(screen.getByText('common.operation.save')).toBeInTheDocument()
-  })
-
-  it('should show add-key prompt when closed', () => {
-    render(
-      <Operate
-        isOpen={false}
-        status="add"
-        onAdd={vi.fn()}
-        onCancel={vi.fn()}
-        onEdit={vi.fn()}
-        onSave={vi.fn()}
-      />,
-    )
-
-    expect(screen.getByText('common.provider.addKey')).toBeInTheDocument()
-  })
-
-  it('should show invalid state and edit prompt when status is fail', () => {
-    render(
-      <Operate
-        isOpen={false}
-        status="fail"
-        onAdd={vi.fn()}
-        onCancel={vi.fn()}
-        onEdit={vi.fn()}
-        onSave={vi.fn()}
-      />,
-    )
-
-    expect(screen.getByText('common.provider.invalidApiKey')).toBeInTheDocument()
-    expect(screen.getByText('common.provider.editKey')).toBeInTheDocument()
-  })
-
-  it('should show edit prompt without error text when status is success', () => {
-    render(
-      <Operate
-        isOpen={false}
-        status="success"
-        onAdd={vi.fn()}
-        onCancel={vi.fn()}
-        onEdit={vi.fn()}
-        onSave={vi.fn()}
-      />,
-    )
-
-    expect(screen.getByText('common.provider.editKey')).toBeInTheDocument()
-    expect(screen.queryByText('common.provider.invalidApiKey')).toBeNull()
-  })
-
-  it('should not call onAdd when disabled', async () => {
-    const user = userEvent.setup()
-    const onAdd = vi.fn()
-    render(
-      <Operate
-        isOpen={false}
-        status="add"
-        disabled
-        onAdd={onAdd}
-        onCancel={vi.fn()}
-        onEdit={vi.fn()}
-        onSave={vi.fn()}
-      />,
-    )
-    await user.click(screen.getByText('common.provider.addKey'))
-    expect(onAdd).not.toHaveBeenCalled()
-  })
-
-  it('should show no actions when status is unsupported', () => {
-    render(
-      <Operate
-        isOpen={false}
-        // @ts-expect-error intentional invalid status for runtime fallback coverage
-        status="unknown"
-        onAdd={vi.fn()}
-        onCancel={vi.fn()}
-        onEdit={vi.fn()}
-        onSave={vi.fn()}
-      />,
-    )
-
-    expect(screen.queryByText('common.provider.addKey')).toBeNull()
-    expect(screen.queryByText('common.provider.editKey')).toBeNull()
-  })
-})
diff --git a/web/app/components/header/account-setting/key-validator/__tests__/hooks.spec.ts b/web/app/components/header/account-setting/key-validator/__tests__/hooks.spec.ts
deleted file mode 100644
index b84c5cf7791..00000000000
--- a/web/app/components/header/account-setting/key-validator/__tests__/hooks.spec.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { ValidatedStatus } from '../declarations'
-import { useValidate } from '../hooks'
-
-describe('useValidate', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('should clear validation state when before returns false', async () => {
-    const { result } = renderHook(() => useValidate({ apiKey: 'value' }))
-
-    act(() => {
-      result.current[0]({ before: () => false })
-    })
-
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(1000)
-    })
-
-    expect(result.current[1]).toBe(false)
-    expect(result.current[2]).toEqual({})
-  })
-
-  it('should expose success status after a successful validation', async () => {
-    const run = vi.fn().mockResolvedValue({ status: ValidatedStatus.Success })
-    const { result } = renderHook(() => useValidate({ apiKey: 'value' }))
-
-    act(() => {
-      result.current[0]({
-        before: () => true,
-        run,
-      })
-    })
-
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(1000)
-    })
-
-    expect(result.current[1]).toBe(false)
-    expect(result.current[2]).toEqual({ status: ValidatedStatus.Success })
-  })
-
-  it('should expose error status and message when validation fails', async () => {
-    const run = vi.fn().mockResolvedValue({ status: ValidatedStatus.Error, message: 'bad-key' })
-    const { result } = renderHook(() => useValidate({ apiKey: 'value' }))
-
-    act(() => {
-      result.current[0]({
-        before: () => true,
-        run,
-      })
-    })
-
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(1000)
-    })
-
-    expect(result.current[1]).toBe(false)
-    expect(result.current[2]).toEqual({ status: ValidatedStatus.Error, message: 'bad-key' })
-  })
-
-  it('should keep validating state true when run is not provided', async () => {
-    const { result } = renderHook(() => useValidate({ apiKey: 'value' }))
-
-    act(() => {
-      result.current[0]({ before: () => true })
-    })
-
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(1000)
-    })
-
-    expect(result.current[1]).toBe(true)
-    expect(result.current[2]).toEqual({})
-  })
-})
diff --git a/web/app/components/header/account-setting/key-validator/__tests__/index.spec.tsx b/web/app/components/header/account-setting/key-validator/__tests__/index.spec.tsx
deleted file mode 100644
index 3d7a761329f..00000000000
--- a/web/app/components/header/account-setting/key-validator/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import type { ComponentProps } from 'react'
-import type { Form } from '../declarations'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import KeyValidator from '../index'
-
-let subscriptionCallback: ((value: string) => void) | null = null
-const mockEmit = vi.fn((value: string) => {
-  subscriptionCallback?.(value)
-})
-
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: () => ({
-    eventEmitter: {
-      emit: mockEmit,
-      useSubscription: (cb: (value: string) => void) => {
-        subscriptionCallback = cb
-      },
-    },
-  }),
-}))
-
-const mockValidate = vi.fn()
-const mockUseValidate = vi.fn()
-
-vi.mock('../hooks', () => ({
-  useValidate: (...args: unknown[]) => mockUseValidate(...args),
-}))
-
-describe('KeyValidator', () => {
-  const formValidate = {
-    before: () => true,
-  }
-
-  const forms: Form[] = [
-    {
-      key: 'apiKey',
-      title: 'API key',
-      placeholder: 'Enter API key',
-      value: 'initial-key',
-      validate: formValidate,
-      handleFocus: (_value, setValue) => {
-        setValue(prev => ({ ...prev, apiKey: 'focused-key' }))
-      },
-    },
-  ]
-
-  const createProps = (overrides: Partial<ComponentProps<typeof KeyValidator>> = {}) => ({
-    type: 'test-provider',
-    title: <div>Provider key</div>,
-    status: 'add' as const,
-    forms,
-    keyFrom: {
-      text: 'Get key',
-      link: 'https://example.com/key',
-    },
-    onSave: vi.fn().mockResolvedValue(true),
-    disabled: false,
-    ...overrides,
-  })
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    subscriptionCallback = null
-    mockValidate.mockImplementation((config?: { before?: () => boolean }) => config?.before?.())
-    mockUseValidate.mockReturnValue([mockValidate, false, {}])
-  })
-
-  it('should open and close the editor from add and cancel actions', () => {
-    render(<KeyValidator {...createProps()} />)
-
-    fireEvent.click(screen.getByText('common.provider.addKey'))
-
-    expect(screen.getByPlaceholderText('Enter API key')).toBeInTheDocument()
-    expect(screen.getByRole('link', { name: 'Get key' })).toBeInTheDocument()
-
-    fireEvent.click(screen.getByText('common.operation.cancel'))
-
-    expect(screen.queryByPlaceholderText('Enter API key')).toBeNull()
-  })
-
-  it('should submit the updated value when save is clicked', async () => {
-    render(<KeyValidator {...createProps()} />)
-
-    fireEvent.click(screen.getByText('common.provider.addKey'))
-    const input = screen.getByPlaceholderText('Enter API key')
-
-    fireEvent.focus(input)
-    expect(input).toHaveValue('focused-key')
-
-    fireEvent.change(input, {
-      target: { value: 'updated-key' },
-    })
-    fireEvent.click(screen.getByText('common.operation.save'))
-
-    await waitFor(() => {
-      expect(screen.queryByPlaceholderText('Enter API key')).toBeNull()
-    })
-  })
-
-  it('should keep the editor open when save does not succeed', async () => {
-    const formsWithoutValidation: Form[] = [
-      {
-        key: 'apiKey',
-        title: 'API key',
-        placeholder: 'Enter API key',
-      },
-    ]
-    const props = createProps({
-      forms: formsWithoutValidation,
-      onSave: vi.fn().mockResolvedValue(false),
-    })
-    render(<KeyValidator {...props} />)
-
-    fireEvent.click(screen.getByText('common.provider.addKey'))
-    const input = screen.getByPlaceholderText('Enter API key')
-
-    expect(input).toHaveValue('')
-
-    fireEvent.focus(input)
-    fireEvent.change(input, {
-      target: { value: 'typed-without-validator' },
-    })
-    fireEvent.click(screen.getByText('common.operation.save'))
-
-    expect(screen.getByPlaceholderText('Enter API key')).toBeInTheDocument()
-  })
-
-  it('should close and reset edited values when another validator emits a trigger', () => {
-    render(<KeyValidator {...createProps()} />)
-
-    fireEvent.click(screen.getByText('common.provider.addKey'))
-    fireEvent.change(screen.getByPlaceholderText('Enter API key'), {
-      target: { value: 'changed' },
-    })
-
-    act(() => {
-      subscriptionCallback?.('plugins/another-provider')
-    })
-
-    expect(screen.queryByPlaceholderText('Enter API key')).toBeNull()
-
-    fireEvent.click(screen.getByText('common.provider.addKey'))
-
-    expect(screen.getByPlaceholderText('Enter API key')).toHaveValue('initial-key')
-  })
-
-  it('should prevent opening key editor when disabled', () => {
-    render(<KeyValidator {...createProps()} disabled />)
-
-    fireEvent.click(screen.getByText('common.provider.addKey'))
-
-    expect(screen.queryByPlaceholderText('Enter API key')).toBeNull()
-  })
-
-  it('should open the editor from edit action when validator is in success state', () => {
-    render(<KeyValidator {...createProps({ status: 'success' })} />)
-
-    fireEvent.click(screen.getByText('common.provider.editKey'))
-
-    expect(screen.getByPlaceholderText('Enter API key')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/header/account-setting/key-validator/declarations.ts b/web/app/components/header/account-setting/key-validator/declarations.ts
index bcf809f39cd..8ec7b447aa0 100644
--- a/web/app/components/header/account-setting/key-validator/declarations.ts
+++ b/web/app/components/header/account-setting/key-validator/declarations.ts
@@ -1,5 +1,3 @@
-import type { Dispatch, SetStateAction } from 'react'
-
 export const ValidatedStatus = {
   Success: 'success',
   Error: 'error',
@@ -7,31 +5,3 @@ export const ValidatedStatus = {
 } as const
 
 export type ValidatedStatus = typeof ValidatedStatus[keyof typeof ValidatedStatus]
-
-export type ValidatedStatusState = {
-  status?: ValidatedStatus
-  message?: string
-}
-
-export type Status = 'add' | 'fail' | 'success'
-
-export type ValidateValue = Record<string, any>
-
-export type ValidateCallback = {
-  before: (v?: ValidateValue) => boolean | undefined
-  run?: (v?: ValidateValue) => Promise<ValidatedStatusState>
-}
-
-export type Form = {
-  key: string
-  title: string
-  placeholder: string
-  value?: string
-  validate?: ValidateCallback
-  handleFocus?: (v: ValidateValue, dispatch: Dispatch<SetStateAction<ValidateValue>>) => void
-}
-
-export type KeyFrom = {
-  text: string
-  link: string
-}
diff --git a/web/app/components/header/account-setting/key-validator/hooks.ts b/web/app/components/header/account-setting/key-validator/hooks.ts
deleted file mode 100644
index 4d4cf8d8a46..00000000000
--- a/web/app/components/header/account-setting/key-validator/hooks.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { DebouncedFunc } from 'es-toolkit/compat'
-import type { ValidateCallback, ValidatedStatusState, ValidateValue } from './declarations'
-import { useDebounceFn } from 'ahooks'
-import { useState } from 'react'
-import { ValidatedStatus } from './declarations'
-
-export const useValidate: (value: ValidateValue) => [DebouncedFunc<(validateCallback: ValidateCallback) => Promise<void>>, boolean, ValidatedStatusState] = (value) => {
-  const [validating, setValidating] = useState(false)
-  const [validatedStatus, setValidatedStatus] = useState<ValidatedStatusState>({})
-
-  const { run } = useDebounceFn(async (validateCallback: ValidateCallback) => {
-    if (!validateCallback.before(value)) {
-      setValidating(false)
-      setValidatedStatus({})
-      return
-    }
-    setValidating(true)
-
-    if (validateCallback.run) {
-      const res = await validateCallback?.run(value)
-      setValidatedStatus(
-        res.status === 'success'
-          ? { status: ValidatedStatus.Success }
-          : { status: ValidatedStatus.Error, message: res.message },
-      )
-
-      setValidating(false)
-    }
-  }, { wait: 1000 })
-
-  return [run, validating, validatedStatus]
-}
diff --git a/web/app/components/header/account-setting/key-validator/index.tsx b/web/app/components/header/account-setting/key-validator/index.tsx
deleted file mode 100644
index 1b944fedbd6..00000000000
--- a/web/app/components/header/account-setting/key-validator/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import type { Form, KeyFrom, Status, ValidateValue } from './declarations'
-import { useState } from 'react'
-import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { useValidate } from './hooks'
-import KeyInput from './KeyInput'
-import Operate from './Operate'
-
-type KeyValidatorProps = {
-  type: string
-  title: React.ReactNode
-  status: Status
-  forms: Form[]
-  keyFrom: KeyFrom
-  onSave: (v: ValidateValue) => Promise<boolean | undefined>
-  disabled?: boolean
-}
-
-const KeyValidator = ({
-  type,
-  title,
-  status,
-  forms,
-  keyFrom,
-  onSave,
-  disabled,
-}: KeyValidatorProps) => {
-  const triggerKey = `plugins/${type}`
-  const { eventEmitter } = useEventEmitterContextContext()
-  const [isOpen, setIsOpen] = useState(false)
-  const prevValue = forms.reduce((prev: ValidateValue, next: Form) => {
-    prev[next.key] = next.value
-    return prev
-  }, {})
-  const [value, setValue] = useState(prevValue)
-  const [validate, validating, validatedStatusState] = useValidate(value)
-
-  eventEmitter?.useSubscription((v) => {
-    if (v !== triggerKey) {
-      setIsOpen(false)
-      setValue(prevValue)
-      validate({ before: () => false })
-    }
-  })
-
-  const handleCancel = () => {
-    eventEmitter?.emit('')
-  }
-
-  const handleSave = async () => {
-    if (await onSave(value))
-      eventEmitter?.emit('')
-  }
-
-  const handleAdd = () => {
-    setIsOpen(true)
-    eventEmitter?.emit(triggerKey)
-  }
-
-  const handleEdit = () => {
-    setIsOpen(true)
-    eventEmitter?.emit(triggerKey)
-  }
-
-  const handleChange = (form: Form, val: string) => {
-    setValue({ ...value, [form.key]: val })
-
-    if (form.validate)
-      validate(form.validate)
-  }
-
-  const handleFocus = (form: Form) => {
-    if (form.handleFocus)
-      form.handleFocus(value, setValue)
-  }
-
-  return (
-    <div className="mb-2 rounded-md border-[0.5px] border-gray-200 bg-gray-50">
-      <div className={
-        `flex h-[52px] cursor-pointer items-center justify-between px-4 ${isOpen && 'border-b-[0.5px] border-b-gray-200'}`
-      }
-      >
-        {title}
-        <Operate
-          isOpen={isOpen}
-          status={status}
-          onCancel={handleCancel}
-          onSave={handleSave}
-          onAdd={handleAdd}
-          onEdit={handleEdit}
-          disabled={disabled}
-        />
-      </div>
-      {
-        isOpen && !disabled && (
-          <div className="px-4 py-3">
-            {
-              forms.map(form => (
-                <KeyInput
-                  key={form.key}
-                  className="mb-4"
-                  name={form.title}
-                  placeholder={form.placeholder}
-                  value={value[form.key] as string || ''}
-                  onChange={v => handleChange(form, v)}
-                  onFocus={() => handleFocus(form)}
-                  validating={validating}
-                  validatedStatusState={validatedStatusState}
-                />
-              ))
-            }
-            <a className="flex cursor-pointer items-center text-xs text-primary-600" href={keyFrom.link} target="_blank" rel="noopener noreferrer">
-              {keyFrom.text}
-              <LinkExternal02 className="ml-1 size-3 text-primary-600" />
-            </a>
-          </div>
-        )
-      }
-    </div>
-  )
-}
-
-export default KeyValidator
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/config-provider.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/config-provider.spec.tsx
deleted file mode 100644
index 44a2e4398a8..00000000000
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/config-provider.spec.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import type { ModelProvider } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import ConfigProvider from '../config-provider'
-
-const mockUseCredentialStatus = vi.fn()
-
-vi.mock('../hooks', () => ({
-  useCredentialStatus: () => mockUseCredentialStatus(),
-}))
-
-vi.mock('../authorized', () => ({
-  default: ({ renderTrigger }: { renderTrigger: () => React.ReactNode }) => (
-    <div>
-      {renderTrigger()}
-    </div>
-  ),
-}))
-
-describe('ConfigProvider', () => {
-  const baseProvider = {
-    provider: 'openai',
-    allow_custom_token: true,
-  } as ModelProvider
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should show setup label when no credential exists', () => {
-    mockUseCredentialStatus.mockReturnValue({
-      hasCredential: false,
-      authorized: true,
-      current_credential_id: '',
-      current_credential_name: '',
-      available_credentials: [],
-    })
-
-    render(<ConfigProvider provider={baseProvider} />)
-
-    expect(screen.getByText(/operation.setup/i)).toBeInTheDocument()
-  })
-
-  it('should show config label when credential exists', () => {
-    mockUseCredentialStatus.mockReturnValue({
-      hasCredential: true,
-      authorized: true,
-      current_credential_id: 'cred-1',
-      current_credential_name: 'Key 1',
-      available_credentials: [],
-    })
-
-    render(<ConfigProvider provider={baseProvider} />)
-
-    expect(screen.getByText(/operation.config/i)).toBeInTheDocument()
-  })
-
-  it('should show setup label and unavailable tooltip when custom credentials are not allowed and no credential exists', async () => {
-    const user = userEvent.setup()
-    mockUseCredentialStatus.mockReturnValue({
-      hasCredential: false,
-      authorized: false,
-      current_credential_id: '',
-      current_credential_name: '',
-      available_credentials: [],
-    })
-
-    render(<ConfigProvider provider={{ ...baseProvider, allow_custom_token: false }} />)
-
-    expect(screen.getByText(/operation.setup/i)).toBeInTheDocument()
-    await user.hover(screen.getByText(/operation.setup/i))
-    expect(await screen.findByText(/auth\.credentialUnavailable/i)).toBeInTheDocument()
-  })
-
-  it('should show config label when hasCredential but not authorized', () => {
-    mockUseCredentialStatus.mockReturnValue({
-      hasCredential: true,
-      authorized: false,
-      current_credential_id: 'cred-1',
-      current_credential_name: 'Key 1',
-      available_credentials: [],
-    })
-
-    render(<ConfigProvider provider={baseProvider} />)
-
-    expect(screen.getByText(/operation.config/i)).toBeInTheDocument()
-  })
-
-  it('should show config label when custom credentials are not allowed but credential exists', () => {
-    mockUseCredentialStatus.mockReturnValue({
-      hasCredential: true,
-      authorized: true,
-      current_credential_id: 'cred-1',
-      current_credential_name: 'Key 1',
-      available_credentials: [],
-    })
-
-    render(<ConfigProvider provider={{ ...baseProvider, allow_custom_token: false }} />)
-
-    expect(screen.getByText(/operation.config/i)).toBeInTheDocument()
-  })
-
-  it('should handle nullish credential values with fallbacks', () => {
-    mockUseCredentialStatus.mockReturnValue({
-      hasCredential: false,
-      authorized: false,
-      current_credential_id: null,
-      current_credential_name: null,
-      available_credentials: null,
-    })
-
-    render(<ConfigProvider provider={baseProvider} />)
-
-    expect(screen.getByText(/operation.setup/i)).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
deleted file mode 100644
index 07b5d070a1b..00000000000
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import type {
-  CustomConfigurationModelFixedFields,
-  ModelProvider,
-} from '@/app/components/header/account-setting/model-provider-page/declarations'
-import {
-  Button,
-} from '@langgenius/dify-ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import {
-  RiEqualizer2Line,
-} from '@remixicon/react'
-import {
-  memo,
-  useCallback,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import Authorized from './authorized'
-import { useCredentialStatus } from './hooks'
-
-type ConfigProviderProps = {
-  provider: ModelProvider
-  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
-}
-const ConfigProvider = ({
-  provider,
-  currentCustomConfigurationModelFixedFields,
-}: ConfigProviderProps) => {
-  const { t } = useTranslation()
-  const {
-    hasCredential,
-    authorized,
-    current_credential_id,
-    current_credential_name,
-    available_credentials,
-  } = useCredentialStatus(provider)
-  const notAllowCustomCredential = provider.allow_custom_token === false
-
-  const renderTrigger = useCallback(() => {
-    const text = hasCredential ? t('operation.config', { ns: 'common' }) : t('operation.setup', { ns: 'common' })
-    const Item = (
-      <Button
-        className="flex grow"
-        size="small"
-        variant={!authorized ? 'secondary-accent' : 'secondary'}
-        title={text}
-      >
-        <RiEqualizer2Line className="mr-1 size-3.5 shrink-0" />
-        <span className="w-0 grow truncate text-left">
-          {text}
-        </span>
-      </Button>
-    )
-    if (notAllowCustomCredential && !hasCredential) {
-      return (
-        <Tooltip>
-          <TooltipTrigger render={Item} />
-          <TooltipContent>
-            {t('auth.credentialUnavailable', { ns: 'plugin' })}
-          </TooltipContent>
-        </Tooltip>
-      )
-    }
-    return Item
-  }, [authorized, hasCredential, notAllowCustomCredential, t])
-
-  return (
-    <Authorized
-      provider={provider}
-      configurationMethod={ConfigurationMethodEnum.predefinedModel}
-      currentCustomConfigurationModelFixedFields={currentCustomConfigurationModelFixedFields}
-      items={[
-        {
-          title: t('modelProvider.auth.apiKeys', { ns: 'common' }),
-          credentials: available_credentials ?? [],
-          selectedCredential: {
-            credential_id: current_credential_id ?? '',
-            credential_name: current_credential_name ?? '',
-          },
-        },
-      ]}
-      showItemSelectedIcon
-      showModelTitle
-      renderTrigger={renderTrigger}
-      triggerOnlyOpenModal={!hasCredential && !notAllowCustomCredential}
-    />
-  )
-}
-
-export default memo(ConfigProvider)
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/priority-use-tip.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/priority-use-tip.spec.tsx
deleted file mode 100644
index e3916deeb73..00000000000
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/priority-use-tip.spec.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { i18n } from 'i18next'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import * as reactI18next from 'react-i18next'
-import PriorityUseTip from '../priority-use-tip'
-
-describe('PriorityUseTip', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.restoreAllMocks()
-  })
-
-  it('should render tooltip with icon content', async () => {
-    const user = userEvent.setup()
-    const { container } = render(<PriorityUseTip />)
-    const trigger = container.querySelector('.cursor-pointer')
-    expect(trigger).toBeInTheDocument()
-
-    await user.hover(trigger as HTMLElement)
-
-    expect(await screen.findByText('common.modelProvider.priorityUsing')).toBeInTheDocument()
-  })
-
-  it('should render the component without crashing', () => {
-    const { container } = render(<PriorityUseTip />)
-    expect(container.firstChild).toBeInTheDocument()
-  })
-
-  it('should exercise || fallback when t() returns empty string', async () => {
-    const user = userEvent.setup()
-    vi.spyOn(reactI18next, 'useTranslation').mockReturnValue({
-      t: () => '',
-      i18n: {} as unknown as i18n,
-      ready: true,
-    } as unknown as ReturnType<typeof reactI18next.useTranslation>)
-    const { container } = render(<PriorityUseTip />)
-    const trigger = container.querySelector('.cursor-pointer')
-    expect(trigger).toBeInTheDocument()
-
-    await user.hover(trigger as HTMLElement)
-
-    expect(screen.queryByText('common.modelProvider.priorityUsing')).not.toBeInTheDocument()
-    expect(document.querySelector('.rounded-md.bg-components-panel-bg')).not.toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
deleted file mode 100644
index a69ae90d39a..00000000000
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import { useTranslation } from 'react-i18next'
-import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
-
-const PriorityUseTip = () => {
-  const { t } = useTranslation()
-
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={(
-          <div className="absolute top-[-5px] right-[-5px] cursor-pointer rounded-[5px] border-[0.5px] border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 shadow-xs">
-            <ChevronDownDouble className="size-3 rotate-180 text-util-colors-indigo-indigo-600" />
-          </div>
-        )}
-      />
-      <TooltipContent>
-        {t('modelProvider.priorityUsing', { ns: 'common' }) || ''}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
-export default PriorityUseTip
diff --git a/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx b/web/app/components/header/account-setting/preference-page/__tests__/index.spec.tsx
similarity index 96%
rename from web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
rename to web/app/components/header/account-setting/preference-page/__tests__/index.spec.tsx
index edeb14cb1c3..55ee81481ad 100644
--- a/web/app/components/header/account-setting/language-page/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/preference-page/__tests__/index.spec.tsx
@@ -4,7 +4,7 @@ import { act, fireEvent, render, screen, waitFor, within } from '@testing-librar
 import { languages } from '@/i18n-config/language'
 import { updateUserProfile } from '@/service/common'
 import { timezones } from '@/utils/timezone'
-import LanguagePage from '../index'
+import PreferencePage from '../index'
 
 const mockRefresh = vi.fn()
 const mockMutateUserProfile = vi.fn()
@@ -54,7 +54,7 @@ vi.mock('@langgenius/dify-ui/select', async () => {
     SelectItem: ({ children, value }: { children: React.ReactNode, value: string }) => {
       const context = React.useContext(SelectContext)
       return (
-        <button type="button" role="option" onClick={() => context.onValueChange?.(value)}>
+        <button type="button" role="option" aria-selected={false} onClick={() => context.onValueChange?.(value)}>
           {children}
         </button>
       )
@@ -104,7 +104,7 @@ const createUserProfile = (overrides: Partial<GetAccountProfileResponse> = {}):
 const renderPage = () => {
   render(
     <>
-      <LanguagePage />
+      <PreferencePage />
       <ToastHost />
     </>,
   )
@@ -150,7 +150,7 @@ beforeEach(() => {
 })
 
 // Rendering
-describe('LanguagePage - Rendering', () => {
+describe('PreferencePage - Rendering', () => {
   it('should render default language and timezone labels', () => {
     const english = getLanguageOption('en-US')
     const niueTimezone = getTimezoneOption('Pacific/Niue')
@@ -182,7 +182,7 @@ describe('LanguagePage - Rendering', () => {
 })
 
 // Interactions
-describe('LanguagePage - Interactions', () => {
+describe('PreferencePage - Interactions', () => {
   it('should show success toast when language updates', async () => {
     const chinese = getLanguageOption('zh-Hans')
     mockUserProfile = createUserProfile({ interface_language: 'en-US' })
diff --git a/web/app/components/header/account-setting/language-page/index.tsx b/web/app/components/header/account-setting/preference-page/index.tsx
similarity index 99%
rename from web/app/components/header/account-setting/language-page/index.tsx
rename to web/app/components/header/account-setting/preference-page/index.tsx
index fabd84b4c71..ce59fe59740 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/preference-page/index.tsx
@@ -33,7 +33,7 @@ const isThemeOption = (value: string): value is ThemeOption => {
   return (themes as readonly string[]).includes(value)
 }
 
-export default function LanguagePage() {
+export default function PreferencePage() {
   const locale = useLocale()
   const { userProfile, mutateUserProfile } = useAppContext()
   const [editing, setEditing] = useState(false)
diff --git a/web/app/components/header/account-setting/update-setting-dialog-form.tsx b/web/app/components/header/account-setting/update-setting-dialog-form.tsx
index 65efcf9c9d1..bdfbd5720ab 100644
--- a/web/app/components/header/account-setting/update-setting-dialog-form.tsx
+++ b/web/app/components/header/account-setting/update-setting-dialog-form.tsx
@@ -53,7 +53,7 @@ function SettingTimeZone({
       className="cursor-pointer border-none bg-transparent p-0 text-left body-xs-regular text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
       onClick={() => {
         onRequestClose()
-        setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })
+        setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PREFERENCES })
       }}
     >
       {children}
diff --git a/web/app/components/header/app-back/__tests__/index.spec.tsx b/web/app/components/header/app-back/__tests__/index.spec.tsx
deleted file mode 100644
index 5333e0542bc..00000000000
--- a/web/app/components/header/app-back/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { App } from '@/types/app'
-import { fireEvent, render, screen } from '@testing-library/react'
-import AppBack from '../index'
-
-describe('AppBack', () => {
-  const mockApp = {
-    id: 'test-app',
-    name: 'Test App',
-  } as App
-
-  it('should render apps label', () => {
-    render(<AppBack curApp={mockApp} />)
-    expect(screen.getByText('common.menus.apps')).toBeInTheDocument()
-  })
-
-  it('should keep apps label visible while hovering', () => {
-    render(<AppBack curApp={mockApp} />)
-    const label = screen.getByText('common.menus.apps')
-
-    fireEvent.mouseEnter(label)
-    expect(label).toBeInTheDocument()
-    fireEvent.mouseLeave(label)
-    expect(label).toBeInTheDocument()
-  })
-
-  it('should render with different apps', () => {
-    const app1 = { id: 'app-1' } as App
-    const app2 = { id: 'app-2' } as App
-
-    const { rerender } = render(<AppBack curApp={app1} />)
-    expect(screen.getByText('common.menus.apps')).toBeInTheDocument()
-
-    rerender(<AppBack curApp={app2} />)
-    expect(screen.getByText('common.menus.apps')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx
deleted file mode 100644
index 7cf121aa4e1..00000000000
--- a/web/app/components/header/app-back/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import type { AppDetailResponse } from '@/models/app'
-import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-type IAppBackProps = {
-  curApp: AppDetailResponse
-}
-export default function AppBack({ curApp }: IAppBackProps) {
-  const { t } = useTranslation()
-
-  const [hovered, setHovered] = useState(false)
-
-  return (
-    <div
-      className={cn(`
-        flex h-7 cursor-pointer items-center rounded-[10px]
-        pr-2 pl-2.5 font-semibold
-        text-[#1C64F2]
-        ${curApp && 'hover:bg-[#EBF5FF]'}
-      `)}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {
-        (hovered && curApp)
-          ? <ArrowLeftIcon className="mr-1 h-[18px] w-[18px]" />
-          : <Squares2X2Icon className="mr-1 h-[18px] w-[18px]" />
-      }
-      {t('menus.apps', { ns: 'common' })}
-    </div>
-  )
-}
diff --git a/web/app/components/header/app-nav/__tests__/index.spec.tsx b/web/app/components/header/app-nav/__tests__/index.spec.tsx
deleted file mode 100644
index adcaf17d2da..00000000000
--- a/web/app/components/header/app-nav/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { useParams } from '@/next/navigation'
-import { AppModeEnum } from '@/types/app'
-import { AppACLPermission } from '@/utils/permission'
-import AppNav from '../index'
-
-const mockAppListInfiniteOptions = vi.hoisted(() => vi.fn((options: unknown) => options))
-
-vi.mock('@/next/navigation', () => ({
-  useParams: vi.fn(),
-}))
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
-vi.mock('@/app/components/app/store', () => ({
-  useStore: vi.fn(),
-}))
-
-let mockWorkspacePermissionKeys: string[] = ['app.create_and_management']
-vi.mock('@/context/app-context', () => ({
-  useSelector: (selector: (state: { userProfile: { id: string }, workspacePermissionKeys: string[] }) => unknown) => selector({
-    userProfile: { id: 'user-1' },
-    workspacePermissionKeys: mockWorkspacePermissionKeys,
-  }),
-}))
-
-vi.mock('@/service/client', () => ({
-  consoleQuery: {
-    apps: {
-      list: {
-        infiniteOptions: (options: unknown) => mockAppListInfiniteOptions(options),
-      },
-    },
-  },
-}))
-
-vi.mock('@tanstack/react-query', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@tanstack/react-query')>()
-  return {
-    ...actual,
-    useInfiniteQuery: vi.fn(),
-  }
-})
-
-vi.mock('@/app/components/app/create-app-dialog', () => ({
-  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) =>
-    show
-      ? (
-          <button
-            type="button"
-            data-testid="create-app-template-dialog"
-            onClick={() => {
-              onClose()
-              onSuccess()
-            }}
-          >
-            Create Template
-          </button>
-        )
-      : null,
-}))
-
-vi.mock('@/app/components/app/create-app-modal', () => ({
-  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) =>
-    show
-      ? (
-          <button
-            type="button"
-            data-testid="create-app-modal"
-            onClick={() => {
-              onClose()
-              onSuccess()
-            }}
-          >
-            Create App
-          </button>
-        )
-      : null,
-}))
-
-vi.mock('@/app/components/app/create-from-dsl-modal', () => ({
-  default: ({ show, onClose, onSuccess }: { show: boolean, onClose: () => void, onSuccess: () => void }) =>
-    show
-      ? (
-          <button
-            type="button"
-            data-testid="create-from-dsl-modal"
-            onClick={() => {
-              onClose()
-              onSuccess()
-            }}
-          >
-            Create from DSL
-          </button>
-        )
-      : null,
-}))
-
-vi.mock('../../nav', () => ({
-  default: ({
-    onCreate,
-    onLoadMore,
-    navigationItems,
-    activeSegment,
-    activeLink,
-    text,
-  }: {
-    onCreate: (state: string) => void
-    onLoadMore?: () => void
-    navigationItems?: Array<{ id: string, name: string, link: string }>
-    activeSegment?: string | string[]
-    activeLink?: { segment: string, text: string, link: string }
-    text?: string
-  }) => (
-    <div data-testid="nav">
-      <div data-testid="nav-text">{text}</div>
-      <div data-testid="nav-active-segment">{JSON.stringify(activeSegment)}</div>
-      {activeLink && (
-        <div data-testid="nav-active-link">{`${activeLink.segment}:${activeLink.text}->${activeLink.link}`}</div>
-      )}
-      <ul data-testid="nav-items">
-        {(navigationItems ?? []).map(item => (
-          <li key={item.id}>{`${item.name} -> ${item.link}`}</li>
-        ))}
-      </ul>
-      <button type="button" onClick={() => onCreate('blank')} data-testid="create-blank">
-        Create Blank
-      </button>
-      <button type="button" onClick={() => onCreate('template')} data-testid="create-template">
-        Create Template
-      </button>
-      <button type="button" onClick={() => onCreate('dsl')} data-testid="create-dsl">
-        Create DSL
-      </button>
-      <button type="button" onClick={onLoadMore} data-testid="load-more">
-        Load More
-      </button>
-    </div>
-  ),
-}))
-
-const mockAppData = [
-  {
-    id: 'app-1',
-    name: 'App 1',
-    mode: AppModeEnum.AGENT_CHAT,
-    icon_type: 'emoji',
-    icon: '🤖',
-    icon_background: null,
-    icon_url: null,
-    permission_keys: [] as string[],
-  },
-]
-
-const mockUseParams = vi.mocked(useParams)
-const mockUseAppStore = vi.mocked(useAppStore)
-const mockUseInfiniteQuery = vi.mocked(useInfiniteQuery)
-let mockAppDetail: { id: string, name: string } | null = null
-type AppListInfiniteOptions = {
-  input: (pageParam: number) => { query: { page: number, limit: number, name: string } }
-  getNextPageParam: (lastPage: { has_more: boolean, page: number }) => number | undefined
-}
-
-const setupDefaultMocks = (options?: {
-  hasNextPage?: boolean
-  refetch?: () => void
-  fetchNextPage?: () => void
-  appData?: typeof mockAppData
-}) => {
-  const refetch = options?.refetch ?? vi.fn()
-  const fetchNextPage = options?.fetchNextPage ?? vi.fn()
-
-  mockUseParams.mockReturnValue({ appId: 'app-1' } as ReturnType<typeof useParams>)
-  mockUseAppStore.mockImplementation((selector: unknown) => (selector as (state: { appDetail: { id: string, name: string } | null }) => unknown)({ appDetail: mockAppDetail }))
-  mockUseInfiniteQuery.mockReturnValue({
-    data: { pages: [{ data: options?.appData ?? mockAppData }] },
-    fetchNextPage,
-    hasNextPage: options?.hasNextPage ?? false,
-    isFetchingNextPage: false,
-    refetch,
-  } as ReturnType<typeof useInfiniteQuery>)
-
-  return { refetch, fetchNextPage }
-}
-
-describe('AppNav', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockAppDetail = null
-    mockWorkspacePermissionKeys = ['app.create_and_management']
-    setupDefaultMocks()
-  })
-
-  it('should configure paged app list query options', () => {
-    setupDefaultMocks()
-    render(<AppNav />)
-
-    const options = mockAppListInfiniteOptions.mock.calls.at(-1)?.[0] as AppListInfiniteOptions
-
-    expect(options.input(3)).toEqual({
-      query: {
-        page: 3,
-        limit: 30,
-        name: '',
-      },
-    })
-    expect(options.getNextPageParam({ has_more: true, page: 3 })).toBe(4)
-    expect(options.getNextPageParam({ has_more: false, page: 3 })).toBeUndefined()
-  })
-
-  it('should keep snippets configured as an active studio child link after rerender setup', () => {
-    setupDefaultMocks()
-    render(<AppNav />)
-
-    expect(screen.getByTestId('nav-text')).toHaveTextContent('menus.apps')
-    expect(screen.getByTestId('nav-active-segment')).toHaveTextContent(JSON.stringify(['apps', 'app', 'snippets']))
-    expect(screen.getByTestId('nav-active-link')).toHaveTextContent('snippets:tabs.snippets->/snippets')
-  })
-
-  it('should configure snippets as an active studio child link', () => {
-    setupDefaultMocks()
-    render(<AppNav />)
-
-    expect(screen.getByTestId('nav-text')).toHaveTextContent('menus.apps')
-    expect(screen.getByTestId('nav-active-segment')).toHaveTextContent(JSON.stringify(['apps', 'app', 'snippets']))
-    expect(screen.getByTestId('nav-active-link')).toHaveTextContent('snippets:tabs.snippets->/snippets')
-  })
-
-  it('should build layout links from app ACL and update app name when app detail changes', async () => {
-    setupDefaultMocks({
-      appData: [
-        {
-          id: 'app-1',
-          name: 'App 1',
-          mode: AppModeEnum.AGENT_CHAT,
-          icon_type: 'emoji',
-          icon: '🤖',
-          icon_background: null,
-          icon_url: null,
-          permission_keys: [AppACLPermission.Edit],
-        },
-        {
-          id: 'app-2',
-          name: 'App 2',
-          mode: AppModeEnum.WORKFLOW,
-          icon_type: 'emoji',
-          icon: '⚙️',
-          icon_background: null,
-          icon_url: null,
-          permission_keys: [AppACLPermission.TestAndRun],
-        },
-      ],
-    })
-
-    const { rerender } = render(<AppNav />)
-
-    expect(screen.getByText('App 1 -> /app/app-1/configuration')).toBeInTheDocument()
-    expect(screen.getByText('App 2 -> /app/app-2/workflow')).toBeInTheDocument()
-
-    mockAppDetail = { id: 'app-1', name: 'Updated App Name' }
-    rerender(<AppNav />)
-
-    await waitFor(() => {
-      expect(screen.getByText('Updated App Name -> /app/app-1/configuration')).toBeInTheDocument()
-    })
-  })
-
-  it('should open and close create app modal, then refetch', async () => {
-    const user = userEvent.setup()
-    const { refetch } = setupDefaultMocks()
-    render(<AppNav />)
-
-    await user.click(screen.getByTestId('create-blank'))
-    expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
-
-    await user.click(screen.getByTestId('create-app-modal'))
-    await waitFor(() => {
-      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
-      expect(refetch).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  it('should open and close template modal, then refetch', async () => {
-    const user = userEvent.setup()
-    const { refetch } = setupDefaultMocks()
-    render(<AppNav />)
-
-    await user.click(screen.getByTestId('create-template'))
-    expect(screen.getByTestId('create-app-template-dialog')).toBeInTheDocument()
-
-    await user.click(screen.getByTestId('create-app-template-dialog'))
-    await waitFor(() => {
-      expect(screen.queryByTestId('create-app-template-dialog')).not.toBeInTheDocument()
-      expect(refetch).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  it('should open and close DSL modal, then refetch', async () => {
-    const user = userEvent.setup()
-    const { refetch } = setupDefaultMocks()
-    render(<AppNav />)
-
-    await user.click(screen.getByTestId('create-dsl'))
-    expect(screen.getByTestId('create-from-dsl-modal')).toBeInTheDocument()
-
-    await user.click(screen.getByTestId('create-from-dsl-modal'))
-    await waitFor(() => {
-      expect(screen.queryByTestId('create-from-dsl-modal')).not.toBeInTheDocument()
-      expect(refetch).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  it('should not open create modals without app.create_and_management permission', async () => {
-    const user = userEvent.setup()
-    mockWorkspacePermissionKeys = []
-    render(<AppNav />)
-
-    await user.click(screen.getByTestId('create-blank'))
-    await user.click(screen.getByTestId('create-template'))
-    await user.click(screen.getByTestId('create-dsl'))
-
-    expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('create-app-template-dialog')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('create-from-dsl-modal')).not.toBeInTheDocument()
-  })
-
-  it('should load more when user clicks load more and more data is available', async () => {
-    const user = userEvent.setup()
-    const { fetchNextPage } = setupDefaultMocks({ hasNextPage: true })
-    render(<AppNav />)
-
-    await user.click(screen.getByTestId('load-more'))
-    expect(fetchNextPage).toHaveBeenCalledTimes(1)
-  })
-
-  it('should not load more when user clicks load more and no data is available', async () => {
-    const user = userEvent.setup()
-    const { fetchNextPage } = setupDefaultMocks({ hasNextPage: false })
-    render(<AppNav />)
-
-    await user.click(screen.getByTestId('load-more'))
-    expect(fetchNextPage).not.toHaveBeenCalled()
-  })
-
-  it('should build overview links when app layout ACL is missing', () => {
-    // Arrange
-    setupDefaultMocks()
-
-    // Act
-    render(<AppNav />)
-
-    // Assert
-    expect(screen.getByText('App 1 -> /app/app-1/overview')).toBeInTheDocument()
-  })
-
-  // !!appId false: query disabled, no nav items
-  it('should render no nav items when appId is undefined', () => {
-    // Arrange
-    setupDefaultMocks()
-    mockUseParams.mockReturnValue({} as ReturnType<typeof useParams>)
-    mockUseInfiniteQuery.mockReturnValue({
-      data: undefined,
-      fetchNextPage: vi.fn(),
-      hasNextPage: false,
-      isFetchingNextPage: false,
-      refetch: vi.fn(),
-    } as unknown as ReturnType<typeof useInfiniteQuery>)
-
-    // Act
-    render(<AppNav />)
-
-    // Assert
-    const navItems = screen.getByTestId('nav-items')
-    expect(navItems.children).toHaveLength(0)
-  })
-
-  // ADVANCED_CHAT OR branch: editor + ADVANCED_CHAT mode → link ends with /workflow
-  it('should build workflow link for ADVANCED_CHAT mode when user is editor', () => {
-    // Arrange
-    setupDefaultMocks({
-      appData: [
-        {
-          id: 'app-3',
-          name: 'Chat App',
-          mode: AppModeEnum.ADVANCED_CHAT,
-          icon_type: 'emoji',
-          icon: '💬',
-          icon_background: null,
-          icon_url: null,
-          permission_keys: [AppACLPermission.ViewLayout],
-        },
-      ],
-    })
-
-    // Act
-    render(<AppNav />)
-
-    // Assert
-    expect(screen.getByText('Chat App -> /app/app-3/workflow')).toBeInTheDocument()
-  })
-
-  // No-match update path: appDetail.id doesn't match any nav item
-  it('should not change nav item names when appDetail id does not match any item', async () => {
-    // Arrange
-    setupDefaultMocks({
-      appData: [
-        {
-          id: 'app-1',
-          name: 'App 1',
-          mode: AppModeEnum.AGENT_CHAT,
-          icon_type: 'emoji',
-          icon: '🤖',
-          icon_background: null,
-          icon_url: null,
-          permission_keys: [AppACLPermission.Edit],
-        },
-      ],
-    })
-    const { rerender } = render(<AppNav />)
-
-    // Act - set appDetail to a non-matching id
-    mockAppDetail = { id: 'non-existent-id', name: 'Unknown' }
-    rerender(<AppNav />)
-
-    // Assert - original name should be unchanged
-    await waitFor(() => {
-      expect(screen.getByText('App 1 -> /app/app-1/configuration')).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
deleted file mode 100644
index 47c3a56a9e3..00000000000
--- a/web/app/components/header/app-nav/index.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-'use client'
-
-import type { NavItem } from '../nav/nav-selector'
-import type { AppListQuery } from '@/contract/console/apps'
-import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query'
-import { useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { useSelector as useAppContextWithSelector } from '@/context/app-context'
-import dynamic from '@/next/dynamic'
-import { useParams } from '@/next/navigation'
-import { consoleQuery } from '@/service/client'
-import { AppModeEnum } from '@/types/app'
-import { getAppACLCapabilities, hasPermission } from '@/utils/permission'
-import Nav from '../nav'
-
-const CreateAppTemplateDialog = dynamic(() => import('@/app/components/app/create-app-dialog'), { ssr: false })
-const CreateAppModal = dynamic(() => import('@/app/components/app/create-app-modal'), { ssr: false })
-const CreateFromDSLModal = dynamic(() => import('@/app/components/app/create-from-dsl-modal'), { ssr: false })
-
-const appNavListQuery = {
-  page: 1,
-  limit: 30,
-  name: '',
-} satisfies AppListQuery
-
-const getAppLink = (canAccessLayout: boolean, appId: string, appMode: AppModeEnum) => {
-  if (!canAccessLayout)
-    return `/app/${appId}/overview`
-
-  if (appMode === AppModeEnum.WORKFLOW || appMode === AppModeEnum.ADVANCED_CHAT)
-    return `/app/${appId}/workflow`
-
-  return `/app/${appId}/configuration`
-}
-
-const AppNav = () => {
-  const { t } = useTranslation()
-  const { appId } = useParams()
-  const appDetail = useAppStore(state => state.appDetail)
-  const currentUserId = useAppContextWithSelector(state => state.userProfile?.id)
-  const workspacePermissionKeys = useAppContextWithSelector(state => state.workspacePermissionKeys)
-  const canCreateApp = hasPermission(workspacePermissionKeys, 'app.create_and_management')
-  const [showNewAppDialog, setShowNewAppDialog] = useState(false)
-  const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false)
-  const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
-
-  const {
-    data: appsData,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    refetch,
-  } = useInfiniteQuery({
-    ...consoleQuery.apps.list.infiniteOptions({
-      input: pageParam => ({
-        query: {
-          ...appNavListQuery,
-          page: Number(pageParam),
-        },
-      }),
-      getNextPageParam: lastPage => lastPage.has_more ? lastPage.page + 1 : undefined,
-      initialPageParam: 1,
-      placeholderData: keepPreviousData,
-    }),
-    enabled: !!appId,
-  })
-
-  const handleLoadMore = useCallback(() => {
-    if (hasNextPage)
-      fetchNextPage()
-  }, [fetchNextPage, hasNextPage])
-
-  const openModal = useCallback((state: string) => {
-    if (!canCreateApp)
-      return
-
-    if (state === 'blank')
-      setShowNewAppDialog(true)
-    if (state === 'template')
-      setShowNewAppTemplateDialog(true)
-    if (state === 'dsl')
-      setShowCreateFromDSLModal(true)
-  }, [canCreateApp])
-
-  const navItems = useMemo<NavItem[]>(() => {
-    const appItems = appsData?.pages.flatMap(appData => appData.data) ?? []
-
-    return appItems.map(app => ({
-      id: app.id,
-      icon_type: app.icon_type,
-      icon: app.icon,
-      icon_background: app.icon_background,
-      icon_url: app.icon_url,
-      name: appDetail?.id === app.id ? appDetail.name : app.name,
-      mode: app.mode,
-      link: getAppLink(getAppACLCapabilities(app.permission_keys, {
-        currentUserId,
-        resourceMaintainer: app.maintainer,
-        workspacePermissionKeys,
-      }).canAccessLayout, app.id, app.mode),
-    }))
-  }, [appDetail?.id, appDetail?.name, appsData?.pages, currentUserId, workspacePermissionKeys])
-
-  return (
-    <>
-      <Nav
-        isApp
-        icon={<span className="i-ri-robot-2-line size-4" />}
-        activeIcon={<span className="i-ri-robot-2-fill size-4" />}
-        text={t('menus.apps', { ns: 'common' })}
-        activeSegment={['apps', 'app', 'snippets']}
-        link="/apps"
-        activeLink={{
-          segment: 'snippets',
-          text: t('tabs.snippets', { ns: 'workflow' }),
-          link: '/snippets',
-        }}
-        curNav={appDetail}
-        navigationItems={navItems}
-        createText={t('menus.newApp', { ns: 'common' })}
-        onCreate={openModal}
-        onLoadMore={handleLoadMore}
-        isLoadingMore={isFetchingNextPage}
-      />
-      <CreateAppModal
-        show={canCreateApp && showNewAppDialog}
-        onClose={() => setShowNewAppDialog(false)}
-        onSuccess={() => refetch()}
-      />
-      <CreateAppTemplateDialog
-        show={canCreateApp && showNewAppTemplateDialog}
-        onClose={() => setShowNewAppTemplateDialog(false)}
-        onSuccess={() => refetch()}
-      />
-      <CreateFromDSLModal
-        show={canCreateApp && showCreateFromDSLModal}
-        onClose={() => setShowCreateFromDSLModal(false)}
-        onSuccess={() => refetch()}
-      />
-    </>
-  )
-}
-
-export default AppNav
diff --git a/web/app/components/header/dataset-nav/__tests__/index.spec.tsx b/web/app/components/header/dataset-nav/__tests__/index.spec.tsx
deleted file mode 100644
index 38e4169eb24..00000000000
--- a/web/app/components/header/dataset-nav/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import { act, fireEvent, render, screen, within } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useAppContext } from '@/context/app-context'
-import {
-  useParams,
-  useRouter,
-  useSelectedLayoutSegment,
-} from '@/next/navigation'
-import {
-  useDatasetDetail,
-  useDatasetList,
-} from '@/service/knowledge/use-dataset'
-import { DatasetNav } from '../index'
-
-vi.mock('@/next/navigation', () => ({
-  useParams: vi.fn(),
-  useRouter: vi.fn(),
-  useSelectedLayoutSegment: vi.fn(),
-}))
-
-vi.mock('@/service/knowledge/use-dataset', () => ({
-  useDatasetDetail: vi.fn(),
-  useDatasetList: vi.fn(),
-}))
-
-vi.mock('@/context/app-context', () => ({
-  useAppContext: vi.fn(),
-}))
-
-vi.mock('@remixicon/react', () => ({
-  RiBook2Fill: () => <div data-testid="active-icon" />,
-  RiBook2Line: () => <div data-testid="inactive-icon" />,
-  RiArrowDownSLine: () => <div data-testid="arrow-down-icon" />,
-  RiArrowRightSLine: () => <div data-testid="arrow-right-icon" />,
-  RiAddLine: () => <div data-testid="add-icon" />,
-}))
-
-vi.mock('@/app/components/base/loading', () => ({
-  default: () => <div data-testid="loading" />,
-}))
-
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: () => <div data-testid="app-icon" />,
-}))
-
-vi.mock('@/app/components/app/type-selector', () => ({
-  AppTypeIcon: () => <div data-testid="app-type-icon" />,
-}))
-
-vi.mock('@/app/components/base/icons/src/vender/line/arrows', () => ({
-  ArrowNarrowLeft: () => <div data-testid="arrow-left-icon" />,
-}))
-
-vi.mock('@/app/components/base/icons/src/vender/line/files', () => ({
-  FileArrow01: () => <div data-testid="file-arrow-icon" />,
-  FilePlus01: () => <div data-testid="file-plus-1-icon" />,
-  FilePlus02: () => <div data-testid="file-plus-2-icon" />,
-}))
-
-describe('DatasetNav', () => {
-  const mockPush = vi.fn()
-  const mockFetchNextPage = vi.fn()
-
-  const mockDataset = {
-    id: 'dataset-1',
-    name: 'Test Dataset',
-    runtime_mode: 'general',
-    icon_info: {
-      icon: 'book',
-      icon_type: 'image',
-      icon_background: '#fff',
-      icon_url: '/url',
-    },
-    provider: 'vendor',
-  }
-
-  const mockDatasetList = {
-    pages: [
-      {
-        data: [
-          mockDataset,
-          {
-            id: 'dataset-2',
-            name: 'Pipeline Dataset',
-            runtime_mode: 'rag_pipeline',
-            is_published: false,
-            icon_info: { icon: 'pipeline' },
-            provider: 'vendor',
-          },
-          {
-            id: 'dataset-3',
-            name: 'External Dataset',
-            runtime_mode: 'general',
-            icon_info: { icon: 'external' },
-            provider: 'external',
-          },
-          {
-            id: 'dataset-4',
-            name: 'Published Pipeline',
-            runtime_mode: 'rag_pipeline',
-            is_published: true,
-            icon_info: { icon: 'pipeline' },
-            provider: 'vendor',
-          },
-          {
-            id: 'dataset-5',
-            name: 'Null Icon Dataset',
-            runtime_mode: 'general',
-            icon_info: null,
-            provider: 'vendor',
-          },
-        ],
-      },
-    ],
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.mocked(useRouter).mockReturnValue({
-      push: mockPush,
-    } as unknown as ReturnType<typeof useRouter>)
-    vi.mocked(useParams).mockReturnValue({ datasetId: 'dataset-1' })
-    vi.mocked(useSelectedLayoutSegment).mockReturnValue('datasets')
-    vi.mocked(useDatasetDetail).mockReturnValue({
-      data: mockDataset,
-    } as unknown as ReturnType<typeof useDatasetDetail>)
-    vi.mocked(useDatasetList).mockReturnValue({
-      data: mockDatasetList,
-      fetchNextPage: mockFetchNextPage,
-      hasNextPage: true,
-      isFetchingNextPage: false,
-    } as unknown as ReturnType<typeof useDatasetList>)
-    vi.mocked(useAppContext).mockReturnValue({
-      isCurrentWorkspaceEditor: true,
-      workspacePermissionKeys: ['dataset.create_and_management'],
-    } as unknown as ReturnType<typeof useAppContext>)
-  })
-
-  describe('Rendering', () => {
-    it('should render the navigation component', () => {
-      render(<DatasetNav />)
-      expect(screen.getByText('common.menus.datasets')).toBeInTheDocument()
-    })
-
-    it('should render without current dataset correctly', () => {
-      vi.mocked(useDatasetDetail).mockReturnValue({
-        data: undefined,
-      } as unknown as ReturnType<typeof useDatasetDetail>)
-      render(<DatasetNav />)
-      expect(screen.getByText('common.menus.datasets')).toBeInTheDocument()
-    })
-
-    it('should render current dataset when icon info is null', () => {
-      vi.mocked(useDatasetDetail).mockReturnValue({
-        data: { ...mockDataset, icon_info: null },
-      } as unknown as ReturnType<typeof useDatasetDetail>)
-
-      render(<DatasetNav />)
-
-      expect(screen.getByRole('button', { name: /Test Dataset/i })).toBeInTheDocument()
-    })
-  })
-
-  describe('Navigation Items logic', () => {
-    it('should generate correct links for different dataset types', () => {
-      render(<DatasetNav />)
-
-      const selector = screen.getByRole('button', { name: /Test Dataset/i })
-      fireEvent.click(selector)
-
-      const menu = screen.getByRole('menu')
-      expect(within(menu).getByText('Test Dataset')).toBeInTheDocument()
-      expect(within(menu).getByText('Pipeline Dataset')).toBeInTheDocument()
-      expect(within(menu).getByText('External Dataset')).toBeInTheDocument()
-      expect(within(menu).getByText('Null Icon Dataset')).toBeInTheDocument()
-    })
-
-    it('should navigate to correct links for navigation items', () => {
-      const { unmount } = render(<DatasetNav />)
-      const selector = screen.getByRole('button', { name: /Test Dataset/i })
-      fireEvent.click(selector)
-
-      const menu = screen.getByRole('menu')
-      const pipelineItem = within(menu).getByText('Pipeline Dataset')
-
-      // dataset-2 is rag_pipeline and not published -> /datasets/dataset-2/pipeline
-      fireEvent.click(pipelineItem)
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-2/pipeline')
-
-      unmount()
-      mockPush.mockClear()
-      render(<DatasetNav />)
-      fireEvent.click(screen.getByRole('button', { name: /Test Dataset/i }))
-
-      const externalItem = within(screen.getByRole('menu')).getByText('External Dataset')
-      // dataset-3 is provider external -> /datasets/dataset-3/hitTesting
-      fireEvent.click(externalItem)
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-3/hitTesting')
-
-      mockPush.mockClear()
-      fireEvent.click(screen.getByRole('button', { name: /Test Dataset/i }))
-
-      const publishedItem = within(screen.getByRole('menu')).getByText('Published Pipeline')
-      // dataset-4 is rag_pipeline and published -> /datasets/dataset-4/documents
-      fireEvent.click(publishedItem)
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-4/documents')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call router.push with correct path when creating a general dataset', () => {
-      render(<DatasetNav />)
-
-      const selector = screen.getByRole('button', { name: /Test Dataset/i })
-      fireEvent.click(selector)
-
-      const menu = screen.getByRole('menu')
-      const createBtn = within(menu).getByText('common.menus.newDataset')
-      fireEvent.click(createBtn)
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/create')
-    })
-
-    it('should call router.push with correct path when creating a pipeline dataset', () => {
-      vi.mocked(useDatasetDetail).mockReturnValue({
-        data: { ...mockDataset, runtime_mode: 'rag_pipeline' },
-      } as unknown as ReturnType<typeof useDatasetDetail>)
-
-      render(<DatasetNav />)
-      const selector = screen.getByRole('button', { name: /Test Dataset/i })
-      fireEvent.click(selector)
-
-      const menu = screen.getByRole('menu')
-      const createBtn = within(menu).getByText('common.menus.newDataset')
-      fireEvent.click(createBtn)
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/create-from-pipeline')
-    })
-
-    it('should trigger fetchNextPage when loading more', () => {
-      vi.useFakeTimers()
-      render(<DatasetNav />)
-      const selector = screen.getByRole('button', { name: /Test Dataset/i })
-      fireEvent.click(selector)
-
-      const menu = screen.getByRole('menu')
-      const scrollContainer = menu.querySelector('.overflow-auto')
-      if (scrollContainer) {
-        Object.defineProperty(scrollContainer, 'scrollHeight', { value: 1000 })
-        Object.defineProperty(scrollContainer, 'clientHeight', { value: 500 })
-        Object.defineProperty(scrollContainer, 'scrollTop', { value: 500 })
-
-        fireEvent.scroll(scrollContainer)
-        act(() => {
-          vi.advanceTimersByTime(100)
-        })
-        expect(mockFetchNextPage).toHaveBeenCalled()
-      }
-      vi.useRealTimers()
-    })
-
-    it('should not trigger fetchNextPage if hasNextPage is false', () => {
-      vi.useFakeTimers()
-      vi.mocked(useDatasetList).mockReturnValue({
-        data: mockDatasetList,
-        fetchNextPage: mockFetchNextPage,
-        hasNextPage: false,
-        isFetchingNextPage: false,
-      } as unknown as ReturnType<typeof useDatasetList>)
-
-      render(<DatasetNav />)
-      const selector = screen.getByRole('button', { name: /Test Dataset/i })
-      fireEvent.click(selector)
-
-      const menu = screen.getByRole('menu')
-      const scrollContainer = menu.querySelector('.overflow-auto')
-      if (scrollContainer) {
-        Object.defineProperty(scrollContainer, 'scrollHeight', { value: 1000 })
-        Object.defineProperty(scrollContainer, 'clientHeight', { value: 500 })
-        Object.defineProperty(scrollContainer, 'scrollTop', { value: 500 })
-
-        fireEvent.scroll(scrollContainer)
-        act(() => {
-          vi.advanceTimersByTime(100)
-        })
-        expect(mockFetchNextPage).not.toHaveBeenCalled()
-      }
-      vi.useRealTimers()
-    })
-  })
-})
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
deleted file mode 100644
index 578fcc4797a..00000000000
--- a/web/app/components/header/dataset-nav/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client'
-
-import type { NavItem } from '../nav/nav-selector'
-import type { DataSet, IconInfo } from '@/models/datasets'
-import { flatten } from 'es-toolkit/compat'
-import { useTranslation } from 'react-i18next'
-import { useParams, useRouter } from '@/next/navigation'
-import { useDatasetDetail, useDatasetList } from '@/service/knowledge/use-dataset'
-import { basePath } from '@/utils/var'
-import Nav from '../nav'
-
-const DEFAULT_DATASET_ICON_INFO = {
-  icon: '📙',
-  icon_type: 'emoji',
-  icon_background: '#FFF4ED',
-  icon_url: '',
-} satisfies IconInfo
-
-type NullableDatasetIconInfo = Partial<{
-  [Key in keyof IconInfo]: IconInfo[Key] | null
-}>
-
-function normalizeDatasetIconInfo(iconInfo?: NullableDatasetIconInfo | null): IconInfo {
-  return {
-    icon: iconInfo?.icon ?? DEFAULT_DATASET_ICON_INFO.icon,
-    icon_type: iconInfo?.icon_type ?? DEFAULT_DATASET_ICON_INFO.icon_type,
-    icon_background: iconInfo?.icon_background ?? DEFAULT_DATASET_ICON_INFO.icon_background,
-    icon_url: iconInfo?.icon_url ?? DEFAULT_DATASET_ICON_INFO.icon_url,
-  }
-}
-
-function datasetLink(dataset: DataSet) {
-  const isPipelineUnpublished = dataset.runtime_mode === 'rag_pipeline' && !dataset.is_published
-  const link = isPipelineUnpublished
-    ? `/datasets/${dataset.id}/pipeline`
-    : `/datasets/${dataset.id}/documents`
-
-  return dataset.provider === 'external'
-    ? `/datasets/${dataset.id}/hitTesting`
-    : link
-}
-
-function currentDatasetNavItem(dataset: DataSet) {
-  const iconInfo = normalizeDatasetIconInfo(dataset.icon_info)
-
-  return {
-    id: dataset.id,
-    name: dataset.name,
-    icon: iconInfo.icon,
-    icon_type: iconInfo.icon_type,
-    icon_background: iconInfo.icon_background ?? null,
-    icon_url: iconInfo.icon_url ?? null,
-  } satisfies Omit<NavItem, 'link'>
-}
-
-function datasetNavItem(dataset: DataSet) {
-  const iconInfo = normalizeDatasetIconInfo(dataset.icon_info)
-
-  return {
-    id: dataset.id,
-    name: dataset.name,
-    link: datasetLink(dataset),
-    icon: iconInfo.icon,
-    icon_type: iconInfo.icon_type,
-    icon_background: iconInfo.icon_background ?? null,
-    icon_url: iconInfo.icon_url ?? null,
-  } satisfies NavItem
-}
-
-export function DatasetNav() {
-  const { t } = useTranslation()
-  const router = useRouter()
-  const { datasetId } = useParams()
-  const { data: currentDataset } = useDatasetDetail(datasetId as string)
-  const {
-    data: datasetList,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-  } = useDatasetList({
-    initialPage: 1,
-    limit: 30,
-  })
-  const datasetItems = flatten(datasetList?.pages.map(datasetData => datasetData.data))
-
-  const curNav = currentDataset ? currentDatasetNavItem(currentDataset) : undefined
-  const navigationItems = datasetItems.map(datasetNavItem)
-  const runtimeMode = currentDataset?.runtime_mode
-  const createRoute = runtimeMode === 'rag_pipeline'
-    ? `${basePath}/datasets/create-from-pipeline`
-    : `${basePath}/datasets/create`
-
-  function handleLoadMore() {
-    if (hasNextPage && !isFetchingNextPage)
-      void fetchNextPage()
-  }
-
-  return (
-    <Nav
-      isApp={false}
-      icon={<span aria-hidden className="i-ri-book-2-line size-4" />}
-      activeIcon={<span aria-hidden className="i-ri-book-2-fill size-4" />}
-      text={t('menus.datasets', { ns: 'common' })}
-      activeSegment="datasets"
-      link="/datasets"
-      curNav={curNav}
-      navigationItems={navigationItems}
-      createText={t('menus.newDataset', { ns: 'common' })}
-      onCreate={() => router.push(createRoute)}
-      onLoadMore={handleLoadMore}
-      isLoadingMore={isFetchingNextPage}
-    />
-  )
-}
diff --git a/web/app/components/header/explore-nav/__tests__/index.spec.tsx b/web/app/components/header/explore-nav/__tests__/index.spec.tsx
deleted file mode 100644
index 07617b337a5..00000000000
--- a/web/app/components/header/explore-nav/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { Mock } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { usePathname, useSelectedLayoutSegment } from '@/next/navigation'
-import { ExploreNav } from '../index'
-
-vi.mock('@/next/navigation', () => ({
-  usePathname: vi.fn(),
-  useSelectedLayoutSegment: vi.fn(),
-}))
-
-describe('ExploreNav', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    ;(usePathname as Mock).mockReturnValue('/apps')
-  })
-
-  it('should render correctly when not active', () => {
-    (useSelectedLayoutSegment as Mock).mockReturnValue('other')
-    render(<ExploreNav />)
-
-    const link = screen.getByRole('link')
-    expect(link).toBeInTheDocument()
-    expect(link).toHaveAttribute('href', '/')
-    expect(link).toHaveClass('text-components-main-nav-nav-button-text')
-    expect(link).not.toHaveClass('bg-components-main-nav-nav-button-bg-active')
-    expect(screen.getByText('common.menus.explore')).toBeInTheDocument()
-  })
-
-  it('should render correctly when active', () => {
-    ;(usePathname as Mock).mockReturnValue('/')
-    ;(useSelectedLayoutSegment as Mock).mockReturnValue('explore')
-    render(<ExploreNav />)
-
-    const link = screen.getByRole('link')
-    expect(link).toBeInTheDocument()
-    expect(link).toHaveClass('bg-components-main-nav-nav-button-bg-active')
-    expect(link).toHaveClass('text-components-main-nav-nav-button-text-active')
-    expect(screen.getByText('common.menus.explore')).toBeInTheDocument()
-  })
-
-  it('should apply custom className', () => {
-    (useSelectedLayoutSegment as Mock).mockReturnValue('other')
-    render(<ExploreNav className="custom-test-class" />)
-
-    const link = screen.getByRole('link')
-    expect(link).toHaveClass('custom-test-class')
-  })
-})
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
deleted file mode 100644
index f42326e2100..00000000000
--- a/web/app/components/header/explore-nav/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiPlanetFill,
-  RiPlanetLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import Link from '@/next/link'
-import { usePathname, useSelectedLayoutSegment } from '@/next/navigation'
-
-export function ExploreNav({
-  className,
-}: {
-  className?: string
-}) {
-  const { t } = useTranslation()
-  const pathname = usePathname()
-  const selectedSegment = useSelectedLayoutSegment()
-  const activated = pathname === '/' || selectedSegment === 'explore'
-
-  return (
-    <Link
-      href="/"
-      className={cn(className, 'group', activated && 'bg-components-main-nav-nav-button-bg-active shadow-md', activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover')}
-    >
-      {
-        activated
-          ? <RiPlanetFill className="size-4" />
-          : <RiPlanetLine className="size-4" />
-      }
-      <div className="ml-2 max-[1120px]:hidden">
-        {t('menus.explore', { ns: 'common' })}
-      </div>
-    </Link>
-  )
-}
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
deleted file mode 100644
index 5c496952a40..00000000000
--- a/web/app/components/header/index.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-'use client'
-import { useSuspenseQuery } from '@tanstack/react-query'
-import DifyLogo from '@/app/components/base/logo/dify-logo'
-import WorkplaceSelector from '@/app/components/header/account-dropdown/workplace-selector'
-import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
-import { useAppContext, useSelector as useAppContextSelector } from '@/context/app-context'
-import { useModalContext } from '@/context/modal-context'
-import { useProviderContext } from '@/context/provider-context'
-import { DeploymentsNav } from '@/features/deployments/nav'
-import { systemFeaturesQueryOptions } from '@/features/system-features/client'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import Link from '@/next/link'
-import { hasPermission } from '@/utils/permission'
-import { Plan } from '../billing/type'
-import AccountDropdown from './account-dropdown'
-import AppNav from './app-nav'
-import { DatasetNav } from './dataset-nav'
-import EnvNav from './env-nav'
-import { ExploreNav } from './explore-nav'
-import LicenseNav from './license-env'
-import { PlanBadge } from './plan-badge'
-import PluginsNav from './plugins-nav'
-import { ToolsNav } from './tools-nav'
-
-const navClassName = `
-  flex items-center relative px-3 h-8 rounded-xl
-  font-medium text-sm
-  cursor-pointer
-`
-
-export function Header() {
-  const workspacePermissionKeys = useAppContextSelector(s => s.workspacePermissionKeys)
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-  const { isCurrentWorkspaceEditor } = useAppContext()
-  const { enableBilling, plan } = useProviderContext()
-  const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
-  const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
-  const isFreePlan = plan.type === Plan.sandbox
-  const isBrandingEnabled = systemFeatures.branding.enabled
-  const canUseAppDeploy = isCurrentWorkspaceEditor && systemFeatures.enable_app_deploy
-
-  function handlePlanClick() {
-    if (isFreePlan)
-      setShowPricingModal()
-    else
-      setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
-  }
-
-  const canAccessExplorePage = hasPermission(workspacePermissionKeys, 'app_library.access')
-  const canAccessToolsPage = hasPermission(workspacePermissionKeys, ['tool.manage', 'mcp.manage'])
-
-  const logoLabel = isBrandingEnabled && systemFeatures.branding.application_title ? systemFeatures.branding.application_title : 'Dify'
-  const renderLogo = () => (
-    <Link
-      href="/apps"
-      className="flex h-8 shrink-0 items-center justify-center overflow-hidden rounded-sm px-0.5 hover:opacity-80 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-      aria-label={logoLabel}
-    >
-      {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
-        ? (
-            <img
-              src={systemFeatures.branding.workspace_logo}
-              className="block h-[22px] w-auto object-contain"
-              alt=""
-            />
-          )
-        : <DifyLogo alt="" />}
-    </Link>
-  )
-
-  if (isMobile) {
-    return (
-      <div className="">
-        <div className="flex items-center justify-between px-2">
-          <div className="flex items-center">
-            {renderLogo()}
-            <div className="mx-1.5 shrink-0 font-light text-divider-deep">/</div>
-            <WorkplaceSelector />
-            {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
-          </div>
-          <div className="flex items-center gap-2">
-            <PluginsNav />
-            <AccountDropdown />
-          </div>
-        </div>
-        <div className="my-1 flex items-center justify-center gap-1">
-          {canAccessExplorePage && <ExploreNav className={navClassName} />}
-          <AppNav />
-          <DatasetNav />
-          {canAccessToolsPage && <ToolsNav className={navClassName} />}
-          {canUseAppDeploy && <DeploymentsNav />}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex h-14 items-center">
-      <div className="flex min-w-0 flex-1 items-center overflow-hidden pr-2 pl-3 min-[1280px]:pr-3">
-        {renderLogo()}
-        <div className="mx-1.5 shrink-0 font-light text-divider-deep">/</div>
-        <WorkplaceSelector />
-        {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
-      </div>
-      <div className="flex min-w-0 items-center justify-center gap-2 overflow-hidden py-3">
-        {canAccessExplorePage && <ExploreNav className={navClassName} />}
-        <AppNav />
-        <DatasetNav />
-        {canAccessToolsPage && <ToolsNav className={navClassName} />}
-        {canUseAppDeploy && <DeploymentsNav />}
-      </div>
-      <div className="flex min-w-0 flex-1 items-center justify-end gap-2 pr-3 pl-2 min-[1280px]:pl-3">
-        <EnvNav />
-        <PluginsNav />
-        <AccountDropdown />
-      </div>
-    </div>
-  )
-}
diff --git a/web/app/components/header/nav/__tests__/index.spec.tsx b/web/app/components/header/nav/__tests__/index.spec.tsx
deleted file mode 100644
index 09c934f69e0..00000000000
--- a/web/app/components/header/nav/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-import type { NavItem } from '../nav-selector'
-import type { AppContextValue } from '@/context/app-context'
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import * as React from 'react'
-import { vi } from 'vitest'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { useAppContext } from '@/context/app-context'
-import { useSelectedLayoutSegment } from '@/next/navigation'
-import { AppModeEnum } from '@/types/app'
-import Nav from '../index'
-
-const mockPush = vi.fn()
-
-// Mock next/navigation
-vi.mock('@/next/navigation', () => ({
-  useSelectedLayoutSegment: vi.fn(),
-  useRouter: () => ({
-    push: mockPush,
-  }),
-}))
-
-// Mock app store
-vi.mock('@/app/components/app/store', () => ({
-  useStore: vi.fn(),
-}))
-
-// Mock app context
-vi.mock('@/context/app-context', () => ({
-  useAppContext: vi.fn(),
-}))
-
-vi.mock('@/next/link', () => ({
-  default: ({
-    href,
-    children,
-    onClick,
-    ...props
-  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string, children?: React.ReactNode }) => (
-    <a
-      href={href}
-      onClick={(event) => {
-        event.preventDefault()
-        onClick?.(event)
-      }}
-      {...props}
-    >
-      {children}
-    </a>
-  ),
-}))
-
-describe('Nav Component', () => {
-  const mockSetAppDetail = vi.fn()
-  const mockOnCreate = vi.fn()
-  const mockOnLoadMore = vi.fn()
-
-  const navigationItems: NavItem[] = [
-    {
-      id: '1',
-      name: 'Item 1',
-      link: '/item1',
-      icon_type: 'image',
-      icon: 'icon1',
-      icon_background: '#fff',
-      icon_url: '/url1',
-      mode: AppModeEnum.CHAT,
-    },
-    {
-      id: '2',
-      name: 'Item 2',
-      link: '/item2',
-      icon_type: 'image',
-      icon: 'icon2',
-      icon_background: '#000',
-      icon_url: '/url2',
-    },
-  ]
-
-  const defaultProps = {
-    icon: <span data-testid="default-icon">Icon</span>,
-    activeIcon: <span data-testid="active-icon">Active Icon</span>,
-    text: 'Nav Text',
-    activeSegment: 'explore',
-    link: '/explore',
-    isApp: false,
-    navigationItems,
-    createText: 'Create New',
-    onCreate: mockOnCreate,
-    onLoadMore: mockOnLoadMore,
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.mocked(useSelectedLayoutSegment).mockReturnValue('explore')
-    vi.mocked(useAppStore).mockReturnValue(mockSetAppDetail)
-    vi.mocked(useAppContext).mockReturnValue({
-      isCurrentWorkspaceEditor: true,
-      workspacePermissionKeys: ['app.create_and_management', 'dataset.create_and_management'],
-    } as unknown as AppContextValue)
-  })
-
-  describe('Rendering', () => {
-    it('should render correctly when activated', () => {
-      render(<Nav {...defaultProps} />)
-      expect(screen.getByText('Nav Text')).toBeInTheDocument()
-      expect(screen.getByTestId('active-icon')).toBeInTheDocument()
-    })
-
-    it('should render correctly when not activated', () => {
-      vi.mocked(useSelectedLayoutSegment).mockReturnValue('other')
-      render(<Nav {...defaultProps} />)
-      expect(screen.getByTestId('default-icon')).toBeInTheDocument()
-    })
-
-    it('should handle array activeSegment', () => {
-      render(<Nav {...defaultProps} activeSegment={['explore', 'apps']} />)
-      expect(screen.getByTestId('active-icon')).toBeInTheDocument()
-    })
-
-    it('should render active child link when activeLink matches the current segment', () => {
-      vi.mocked(useSelectedLayoutSegment).mockReturnValue('snippets')
-
-      render(
-        <Nav
-          {...defaultProps}
-          activeSegment={['apps', 'app', 'snippets']}
-          activeLink={{
-            segment: 'snippets',
-            text: 'SNIPPETS',
-            link: '/snippets',
-          }}
-        />,
-      )
-
-      expect(screen.getByText('Nav Text')).toBeInTheDocument()
-      expect(screen.getByText('Nav Text')).toHaveClass('max-[1120px]:hidden')
-      expect(screen.getByRole('link', { name: 'SNIPPETS' })).toHaveAttribute('href', '/snippets')
-      expect(screen.getByRole('link', { name: 'SNIPPETS' })).not.toHaveClass('max-[1120px]:hidden')
-    })
-
-    it('should not show hover background if not activated', () => {
-      vi.mocked(useSelectedLayoutSegment).mockReturnValue('other')
-      const { container } = render(<Nav {...defaultProps} />)
-      const navDiv = container.firstChild as HTMLElement
-      expect(navDiv.className).toContain(
-        'hover:bg-components-main-nav-nav-button-bg-hover',
-      )
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call setAppDetail when clicked', () => {
-      render(<Nav {...defaultProps} />)
-      const link = screen.getByRole('link')
-      fireEvent.click(link.firstChild!)
-      expect(mockSetAppDetail).toHaveBeenCalled()
-    })
-
-    it('should not call setAppDetail when clicked with modifier keys', () => {
-      render(<Nav {...defaultProps} />)
-      const link = screen.getByRole('link')
-      fireEvent.click(link.firstChild!, { metaKey: true })
-      expect(mockSetAppDetail).not.toHaveBeenCalled()
-    })
-
-    it('should not call setAppDetail from snippets segment', () => {
-      vi.mocked(useSelectedLayoutSegment).mockReturnValue('snippets')
-      render(<Nav {...defaultProps} activeSegment={['apps', 'app', 'snippets']} />)
-      const link = screen.getByRole('link')
-      fireEvent.click(link.firstChild!)
-      expect(mockSetAppDetail).not.toHaveBeenCalled()
-    })
-
-    it('should show ArrowNarrowLeft on hover when curNav is provided and activated', () => {
-      const curNav = navigationItems[0]
-      render(<Nav {...defaultProps} curNav={curNav} />)
-
-      const navItem = screen.getByText('Nav Text').parentElement!
-      fireEvent.mouseEnter(navItem)
-
-      expect(screen.queryByTestId('active-icon')).not.toBeInTheDocument()
-
-      fireEvent.mouseLeave(navItem)
-      expect(screen.getByTestId('active-icon')).toBeInTheDocument()
-    })
-  })
-
-  describe('NavSelector', () => {
-    const curNav = navigationItems[0]
-
-    it('should render NavSelector when activated and curNav is provided', () => {
-      render(<Nav {...defaultProps} curNav={curNav} />)
-      expect(screen.getByText('/')).toBeInTheDocument()
-      expect(screen.getByText('Item 1')).toBeInTheDocument()
-    })
-
-    it('should open menu and show items when clicked', async () => {
-      render(<Nav {...defaultProps} curNav={curNav} />)
-      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
-
-      await act(async () => {
-        fireEvent.click(selectorButton)
-      })
-
-      await waitFor(() => {
-        expect(screen.getByText('Item 2')).toBeInTheDocument()
-      })
-    })
-
-    it('should clear app detail and navigate when an item is selected', async () => {
-      vi.mocked(useSelectedLayoutSegment).mockReturnValue('snippets')
-      render(<Nav {...defaultProps} activeSegment={['apps', 'app', 'snippets']} curNav={curNav} />)
-      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
-
-      await act(async () => {
-        fireEvent.click(selectorButton)
-      })
-      mockSetAppDetail.mockClear()
-
-      const item2 = await screen.findByText('Item 2')
-      await act(async () => {
-        fireEvent.click(item2)
-      })
-
-      expect(mockSetAppDetail).toHaveBeenCalled()
-      expect(mockPush).toHaveBeenCalledWith('/item2')
-    })
-
-    it('should not navigate if selecting current nav item', async () => {
-      render(<Nav {...defaultProps} curNav={curNav} />)
-      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
-
-      await act(async () => {
-        fireEvent.click(selectorButton)
-      })
-
-      const listItems = await screen.findAllByText('Item 1')
-      const listItem = listItems.find(el => el.closest('[role="menuitem"]'))
-
-      if (listItem) {
-        await act(async () => {
-          fireEvent.click(listItem)
-        })
-      }
-
-      expect(mockSetAppDetail).not.toHaveBeenCalled()
-    })
-
-    it('should call onCreate when create button is clicked', async () => {
-      render(<Nav {...defaultProps} curNav={curNav} />)
-      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
-
-      await act(async () => {
-        fireEvent.click(selectorButton)
-      })
-
-      const createButton = await screen.findByText('Create New')
-      await act(async () => {
-        fireEvent.click(createButton)
-      })
-
-      expect(mockOnCreate).toHaveBeenCalledWith('')
-    })
-
-    it('should show sub-menu and call onCreate with types when isApp is true', async () => {
-      const user = userEvent.setup()
-      const clickCreateBranch = async (optionName: RegExp) => {
-        const { unmount } = render(<Nav {...defaultProps} curNav={curNav} isApp />)
-        await user.click(screen.getByRole('button', { name: /Item 1/i }))
-        const createButton = await screen.findByRole('menuitem', { name: /Create New/i })
-        await user.hover(createButton)
-        fireEvent.click(await screen.findByRole('menuitem', { name: optionName }))
-        unmount()
-      }
-
-      await clickCreateBranch(/app\.newApp\.startFromBlank/i)
-      await clickCreateBranch(/app\.newApp\.startFromTemplate/i)
-      await clickCreateBranch(/app\.importDSL/i)
-
-      expect(mockOnCreate).toHaveBeenNthCalledWith(1, 'blank')
-      expect(mockOnCreate).toHaveBeenNthCalledWith(2, 'template')
-      expect(mockOnCreate).toHaveBeenNthCalledWith(3, 'dsl')
-      expect(mockOnCreate).toHaveBeenCalledTimes(3)
-    })
-
-    it('should not show create button if NOT an editor', async () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceEditor: false,
-        workspacePermissionKeys: [],
-      } as unknown as AppContextValue)
-      render(<Nav {...defaultProps} curNav={curNav} />)
-      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
-
-      await act(async () => {
-        fireEvent.click(selectorButton)
-      })
-
-      await waitFor(() => {
-        expect(screen.queryByText('Create New')).not.toBeInTheDocument()
-      })
-    })
-
-    it('should show loading state in selector when isLoadingMore is true', async () => {
-      render(<Nav {...defaultProps} curNav={curNav} isLoadingMore />)
-      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
-
-      await act(async () => {
-        fireEvent.click(selectorButton)
-      })
-
-      const status = await screen.findByRole('status')
-      expect(status).toBeInTheDocument()
-    })
-
-    it('should call onLoadMore when scrolling reaches bottom', async () => {
-      render(<Nav {...defaultProps} curNav={curNav} />)
-      const selectorButton = screen.getByRole('button', { name: /Item 1/i })
-
-      await act(async () => {
-        fireEvent.click(selectorButton)
-      })
-
-      const scrollContainer = await screen.findByRole('menu').then((menu) => {
-        const container = menu.querySelector('.overflow-auto')
-        if (!container)
-          throw new Error('Not found')
-        return container as HTMLElement
-      })
-
-      vi.useFakeTimers()
-
-      Object.defineProperty(scrollContainer, 'scrollHeight', {
-        value: 600,
-        configurable: true,
-      })
-      Object.defineProperty(scrollContainer, 'clientHeight', {
-        value: 150,
-        configurable: true,
-      })
-      Object.defineProperty(scrollContainer, 'scrollTop', {
-        value: 500,
-        configurable: true,
-      })
-
-      fireEvent.scroll(scrollContainer)
-
-      act(() => {
-        vi.runAllTimers()
-      })
-
-      expect(mockOnLoadMore).toHaveBeenCalled()
-      vi.useRealTimers()
-    })
-  })
-})
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
deleted file mode 100644
index 94acdd3f685..00000000000
--- a/web/app/components/header/nav/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-'use client'
-
-import type { INavSelectorProps } from './nav-selector'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useState } from 'react'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import Link from '@/next/link'
-import { useSelectedLayoutSegment } from '@/next/navigation'
-import { NavSelector } from './nav-selector'
-
-type INavProps = {
-  icon: React.ReactNode
-  activeIcon?: React.ReactNode
-  text: string
-  activeSegment: string | string[]
-  link: string
-  activeLink?: {
-    segment: string
-    text: string
-    link: string
-  }
-  isApp: boolean
-} & INavSelectorProps
-
-const Nav = ({
-  icon,
-  activeIcon,
-  text,
-  activeSegment,
-  link,
-  activeLink,
-  curNav,
-  navigationItems,
-  createText,
-  onCreate,
-  onLoadMore,
-  isLoadingMore,
-  isApp,
-}: INavProps) => {
-  const setAppDetail = useAppStore(state => state.setAppDetail)
-  const [hovered, setHovered] = useState(false)
-  const segment = useSelectedLayoutSegment()
-  const isActivated = Array.isArray(activeSegment) ? activeSegment.includes(segment!) : segment === activeSegment
-  const shouldShowActiveLink = isActivated && activeLink && segment === activeLink.segment
-
-  return (
-    <div className={`
-      flex h-8 max-w-167.5 min-w-0 items-center rounded-xl px-0.5 text-sm font-medium max-[1120px]:max-w-100
-      ${isActivated && 'bg-components-main-nav-nav-button-bg-active font-semibold shadow-md'}
-      ${!curNav && !isActivated && 'hover:bg-components-main-nav-nav-button-bg-hover'}
-    `}
-    >
-      <Link href={link} className="shrink-0">
-        <div
-          onClick={(e) => {
-            // Don't clear state if opening in new tab/window
-            if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
-              return
-            if (segment === 'snippets')
-              return
-            setAppDetail()
-          }}
-          className={cn('flex h-7 cursor-pointer items-center rounded-[10px] px-2.5', isActivated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text', curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover')}
-          onMouseEnter={() => setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
-        >
-          <div>
-            {
-              (hovered && curNav)
-                ? <span className="i-custom-vender-line-arrows-arrow-narrow-left size-4" />
-                : isActivated
-                  ? activeIcon
-                  : icon
-            }
-          </div>
-          <div className="ml-2 max-[1120px]:hidden">
-            {text}
-          </div>
-        </div>
-      </Link>
-      {
-        curNav && isActivated && (
-          <>
-            <div className="shrink-0 font-light text-divider-deep">/</div>
-            <NavSelector
-              isApp={isApp}
-              curNav={curNav}
-              navigationItems={navigationItems}
-              createText={createText}
-              onCreate={onCreate}
-              onLoadMore={onLoadMore}
-              isLoadingMore={isLoadingMore}
-            />
-          </>
-        )
-      }
-      {
-        !curNav && shouldShowActiveLink && (
-          <>
-            <div className="shrink-0 font-light text-divider-deep">/</div>
-            <Link
-              href={activeLink.link}
-              className="hover:bg-components-main-nav-nav-button-bg-active-hover flex h-7 min-w-0 cursor-pointer items-center rounded-[10px] px-2.5 text-components-main-nav-nav-button-text-active"
-            >
-              <span className="truncate">{activeLink.text}</span>
-            </Link>
-          </>
-        )
-      }
-    </div>
-  )
-}
-
-export default Nav
diff --git a/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx b/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
deleted file mode 100644
index dc6886e7f4a..00000000000
--- a/web/app/components/header/nav/nav-selector/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,306 +0,0 @@
-import type { INavSelectorProps, NavItem } from '../index'
-import type { AppContextValue } from '@/context/app-context'
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { vi } from 'vitest'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { useAppContext } from '@/context/app-context'
-import { AppModeEnum } from '@/types/app'
-import { NavSelector } from '../index'
-
-const mockPush = vi.fn()
-
-vi.mock('@/next/navigation', () => ({
-  useRouter: () => ({
-    push: mockPush,
-  }),
-}))
-
-// Mock app store
-vi.mock('@/app/components/app/store', () => ({
-  useStore: vi.fn(),
-}))
-
-// Mock app context
-vi.mock('@/context/app-context', () => ({
-  useAppContext: vi.fn(),
-}))
-
-describe('NavSelector Component', () => {
-  const mockSetAppDetail = vi.fn()
-  const mockOnCreate = vi.fn()
-  const mockOnLoadMore = vi.fn()
-
-  const navigationItems: NavItem[] = [
-    {
-      id: '1',
-      name: 'Item 1',
-      link: '/item1',
-      icon_type: 'image',
-      icon: 'icon1',
-      icon_background: '#fff',
-      icon_url: '/url1',
-      mode: AppModeEnum.CHAT,
-    },
-    {
-      id: '2',
-      name: 'Item 2',
-      link: '/item2',
-      icon_type: 'image',
-      icon: 'icon2',
-      icon_background: '#000',
-      icon_url: '/url2',
-    },
-  ]
-
-  const { link: _link, ...curNavWithoutLink } = navigationItems[0]!
-
-  const defaultProps: INavSelectorProps = {
-    curNav: curNavWithoutLink,
-    navigationItems,
-    createText: 'Create New',
-    onCreate: mockOnCreate,
-    onLoadMore: mockOnLoadMore,
-    isApp: false,
-    isLoadingMore: false,
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.mocked(useAppStore).mockReturnValue(mockSetAppDetail)
-    vi.mocked(useAppContext).mockReturnValue({
-      isCurrentWorkspaceEditor: true,
-      workspacePermissionKeys: ['app.create_and_management', 'dataset.create_and_management'],
-    } as unknown as AppContextValue)
-  })
-
-  describe('Rendering', () => {
-    it('should render current nav name', () => {
-      render(<NavSelector {...defaultProps} />)
-      expect(screen.getByText('Item 1'))!.toBeInTheDocument()
-    })
-
-    it('should show loading indicator when isLoadingMore is true', async () => {
-      render(<NavSelector {...defaultProps} isLoadingMore />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-      expect(screen.getByRole('status'))!.toBeInTheDocument()
-    })
-  })
-
-  describe('Interactions', () => {
-    it('should open menu and show items', async () => {
-      render(<NavSelector {...defaultProps} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-      expect(screen.getByText('Item 2'))!.toBeInTheDocument()
-    })
-
-    it('should call setAppDetail and navigate when an item is clicked', async () => {
-      render(<NavSelector {...defaultProps} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-      const item2 = screen.getByText('Item 2')
-      await act(async () => {
-        fireEvent.click(item2)
-      })
-      expect(mockSetAppDetail).toHaveBeenCalled()
-      expect(mockPush).toHaveBeenCalledWith('/item2')
-    })
-
-    it('should render current item without a route link', async () => {
-      render(<NavSelector {...defaultProps} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-      const items = screen.getAllByText('Item 1')
-      const listItem = items.find(el => el.closest('[role="menuitem"]'))
-      if (listItem) {
-        await act(async () => {
-          fireEvent.click(listItem)
-        })
-      }
-      expect(listItem?.closest('a')).toBeNull()
-      expect(mockSetAppDetail).not.toHaveBeenCalled()
-    })
-
-    it('should call onCreate when create button is clicked (non-app mode)', async () => {
-      render(<NavSelector {...defaultProps} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-      const createBtn = screen.getByText('Create New')
-      await act(async () => {
-        fireEvent.click(createBtn)
-      })
-      expect(mockOnCreate).toHaveBeenCalledWith('')
-    })
-
-    it('should show extended create menu in app mode', async () => {
-      const user = userEvent.setup()
-      render(<NavSelector {...defaultProps} isApp />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-
-      const openCreateMenu = async () => {
-        if (!screen.queryByRole('menuitem', { name: /Create New/i }))
-          await user.click(screen.getByRole('button', { name: /Item 1/i }))
-        const createBtn = await screen.findByRole('menuitem', { name: /Create New/i })
-        await user.hover(createBtn)
-        return screen.findByText(/app\.newApp\.startFromBlank/i)
-      }
-
-      await openCreateMenu()
-      const blank = await screen.findByText(/app\.newApp\.startFromBlank/i)
-      await act(async () => {
-        fireEvent.click(blank)
-      })
-      expect(mockOnCreate).toHaveBeenCalledWith('blank')
-
-      await openCreateMenu()
-      const template = await screen.findByText(/app\.newApp\.startFromTemplate/i)
-      await act(async () => {
-        fireEvent.click(template)
-      })
-      expect(mockOnCreate).toHaveBeenCalledWith('template')
-
-      await openCreateMenu()
-      const dsl = await screen.findByText(/app\.importDSL/i)
-      await act(async () => {
-        fireEvent.click(dsl)
-      })
-      expect(mockOnCreate).toHaveBeenCalledWith('dsl')
-    })
-
-    it('should open extended create menu on hover in app mode', async () => {
-      const user = userEvent.setup()
-      render(<NavSelector {...defaultProps} isApp />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-
-      const createBtn = await screen.findByRole('menuitem', { name: /Create New/i })
-      await user.hover(createBtn)
-
-      expect(await screen.findByText(/app\.newApp\.startFromBlank/i))!.toBeInTheDocument()
-    })
-
-    it('should show create button when dataset.create_and_management permission is present', async () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceEditor: false,
-        workspacePermissionKeys: ['dataset.create_and_management'],
-      } as unknown as AppContextValue)
-      render(<NavSelector {...defaultProps} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-      expect(screen.getByText('Create New')).toBeInTheDocument()
-    })
-
-    it('should hide dataset create button without dataset.create_and_management permission', async () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceEditor: true,
-        workspacePermissionKeys: ['app.create_and_management'],
-      } as unknown as AppContextValue)
-      render(<NavSelector {...defaultProps} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-
-      expect(screen.queryByText('Create New')).not.toBeInTheDocument()
-    })
-
-    it('should hide app create menu without app.create_and_management permission', async () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceEditor: true,
-        workspacePermissionKeys: ['dataset.create_and_management'],
-      } as unknown as AppContextValue)
-      render(<NavSelector {...defaultProps} isApp />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-
-      expect(screen.queryByRole('menuitem', { name: /Create New/i })).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Scroll behavior', () => {
-    it('should call onLoadMore when scrolled to bottom', async () => {
-      render(<NavSelector {...defaultProps} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-
-      const menu = screen.getByRole('menu')
-      const scrollable = menu.querySelector('.overflow-auto') as HTMLElement
-
-      vi.useFakeTimers()
-
-      // Trigger scroll
-      Object.defineProperty(scrollable, 'scrollHeight', {
-        value: 600,
-        configurable: true,
-      })
-      Object.defineProperty(scrollable, 'clientHeight', {
-        value: 150,
-        configurable: true,
-      })
-      Object.defineProperty(scrollable, 'scrollTop', {
-        value: 500,
-        configurable: true,
-      })
-
-      fireEvent.scroll(scrollable)
-
-      act(() => {
-        vi.runAllTimers()
-      })
-
-      expect(mockOnLoadMore).toHaveBeenCalled()
-
-      // Check that it's NOT called if not at bottom
-      mockOnLoadMore.mockClear()
-      Object.defineProperty(scrollable, 'scrollTop', {
-        value: 100,
-        configurable: true,
-      })
-      fireEvent.scroll(scrollable)
-      act(() => {
-        vi.runAllTimers()
-      })
-      expect(mockOnLoadMore).not.toHaveBeenCalled()
-
-      vi.useRealTimers()
-    })
-
-    it('should not throw if onLoadMore is undefined', async () => {
-      const { onLoadMore: _o, ...propsWithoutOnLoadMore } = defaultProps
-      render(<NavSelector {...propsWithoutOnLoadMore} />)
-      const button = screen.getByRole('button')
-      await act(async () => {
-        fireEvent.click(button)
-      })
-
-      const menu = screen.getByRole('menu')
-      const scrollable = menu.querySelector('.overflow-auto') as HTMLElement
-
-      fireEvent.scroll(scrollable)
-      // No error should be thrown
-    })
-  })
-})
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
deleted file mode 100644
index 03a4deb9ce9..00000000000
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-'use client'
-import type { AppIconType, AppModeEnum } from '@/types/app'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@langgenius/dify-ui/dropdown-menu'
-import { debounce } from 'es-toolkit/compat'
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { AppTypeIcon } from '@/app/components/app/type-selector'
-import AppIcon from '@/app/components/base/app-icon'
-import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import Loading from '@/app/components/base/loading'
-import { useAppContext } from '@/context/app-context'
-import { useRouter } from '@/next/navigation'
-import { hasPermission } from '@/utils/permission'
-
-export type NavItem = {
-  id: string
-  name: string
-  link: string
-  icon_type: AppIconType | null
-  icon: string
-  icon_background: string | null
-  icon_url: string | null
-  mode?: AppModeEnum
-}
-export type INavSelectorProps = {
-  navigationItems: NavItem[]
-  curNav?: Omit<NavItem, 'link'>
-  createText: string
-  isApp?: boolean
-  onCreate: (state: string) => void
-  onLoadMore?: () => void
-  isLoadingMore?: boolean
-}
-
-type AppCreateMenuProps = {
-  createText: string
-  startFromBlankText: string
-  startFromTemplateText: string
-  importDSLText: string
-  onCreate: (state: string) => void
-}
-
-function AppCreateMenu({
-  createText,
-  startFromBlankText,
-  startFromTemplateText,
-  importDSLText,
-  onCreate,
-}: AppCreateMenuProps) {
-  function handleCreate(state: string) {
-    onCreate(state)
-  }
-
-  return (
-    <DropdownMenuSub>
-      <div className="p-1">
-        <DropdownMenuSubTrigger
-          className="h-9 gap-2 px-3 py-[6px]"
-        >
-          <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-background-default">
-            <span className="i-ri-add-line size-4 text-text-primary" />
-          </div>
-          <span className="grow text-left text-[14px] font-normal text-text-secondary">{createText}</span>
-        </DropdownMenuSubTrigger>
-      </div>
-      <DropdownMenuSubContent
-        placement="right-start"
-        sideOffset={4}
-        popupClassName="min-w-[200px] bg-components-panel-bg-blur p-0"
-      >
-        <div className="p-1">
-          <DropdownMenuItem
-            className="h-9 px-3 py-[6px] font-normal text-text-secondary"
-            onClick={() => handleCreate('blank')}
-          >
-            <FilePlus01 className="mr-2 size-4 shrink-0 text-text-secondary" />
-            {startFromBlankText}
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="h-9 px-3 py-[6px] font-normal text-text-secondary"
-            onClick={() => handleCreate('template')}
-          >
-            <FilePlus02 className="mr-2 size-4 shrink-0 text-text-secondary" />
-            {startFromTemplateText}
-          </DropdownMenuItem>
-        </div>
-        <div className="border-t border-divider-regular p-1">
-          <DropdownMenuItem
-            className="h-9 px-3 py-[6px] font-normal text-text-secondary"
-            onClick={() => handleCreate('dsl')}
-          >
-            <FileArrow01 className="mr-2 size-4 shrink-0 text-text-secondary" />
-            {importDSLText}
-          </DropdownMenuItem>
-        </div>
-      </DropdownMenuSubContent>
-    </DropdownMenuSub>
-  )
-}
-
-function NavSelectorItemContent({ nav }: {
-  nav: NavItem
-}) {
-  return (
-    <>
-      <div className="relative mr-2 size-6 shrink-0 rounded-md">
-        <AppIcon
-          size="tiny"
-          iconType={nav.icon_type}
-          icon={nav.icon}
-          background={nav.icon_background}
-          imageUrl={nav.icon_url}
-        />
-        {!!nav.mode && (
-          <AppTypeIcon type={nav.mode} wrapperClassName="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 shadow-sm" className="size-2.5" />
-        )}
-      </div>
-      <div className="min-w-0 truncate">
-        {nav.name}
-      </div>
-    </>
-  )
-}
-
-function NavSelectorRouteItem({ nav, isCurrent, onBeforeNavigate }: {
-  nav: NavItem
-  isCurrent: boolean
-  onBeforeNavigate: () => void
-}) {
-  const router = useRouter()
-  const className = 'h-auto truncate px-3 py-[6px] text-[14px] font-normal text-text-secondary'
-
-  function handleNavigate() {
-    onBeforeNavigate()
-    router.push(nav.link)
-  }
-
-  if (isCurrent) {
-    return (
-      <DropdownMenuItem
-        className={className}
-      >
-        <NavSelectorItemContent nav={nav} />
-      </DropdownMenuItem>
-    )
-  }
-
-  return (
-    <DropdownMenuItem
-      className={className}
-      onClick={handleNavigate}
-    >
-      <NavSelectorItemContent nav={nav} />
-    </DropdownMenuItem>
-  )
-}
-
-export function NavSelector({ curNav, navigationItems, createText, isApp, onCreate, onLoadMore, isLoadingMore }: INavSelectorProps) {
-  const { t } = useTranslation()
-  const { workspacePermissionKeys } = useAppContext()
-  const setAppDetail = useAppStore(state => state.setAppDetail)
-  const canCreate = hasPermission(workspacePermissionKeys, isApp ? 'app.create_and_management' : 'dataset.create_and_management')
-
-  const handleScroll = useCallback(debounce((e) => {
-    if (typeof onLoadMore === 'function') {
-      const { clientHeight, scrollHeight, scrollTop } = e.target
-
-      if (clientHeight + scrollTop > scrollHeight - 50)
-        onLoadMore()
-    }
-  }, 50), [])
-
-  return (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger
-        className={cn(
-          'hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 min-w-0 items-center justify-center rounded-[10px] pr-2.5 pl-2 text-[14px] font-semibold text-components-main-nav-nav-button-text-active outline-hidden',
-          'focus-visible:bg-components-main-nav-nav-button-bg-active focus-visible:ring-1 focus-visible:ring-components-input-border-hover data-popup-open:bg-components-main-nav-nav-button-bg-active',
-        )}
-      >
-        <div className="max-w-[157px] min-w-0 truncate">{curNav?.name}</div>
-        <span className="ml-1 i-ri-arrow-down-s-line size-3 shrink-0 opacity-50 group-hover:opacity-100 group-data-popup-open:opacity-100" aria-hidden="true" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        placement="bottom-end"
-        sideOffset={6}
-        popupClassName="w-60 max-w-80 divide-y divide-divider-regular bg-components-panel-bg-blur p-0"
-      >
-        <div className="max-h-[50vh] overflow-auto px-1 py-1" onScroll={handleScroll}>
-          {
-            navigationItems.map(nav => (
-              <NavSelectorRouteItem
-                key={nav.id}
-                nav={nav}
-                isCurrent={curNav?.id === nav.id}
-                onBeforeNavigate={setAppDetail}
-              />
-            ))
-          }
-          {isLoadingMore && (
-            <div className="flex justify-center py-2">
-              <Loading />
-            </div>
-          )}
-        </div>
-        {!isApp && canCreate && (
-          <div className="p-1">
-            <DropdownMenuItem
-              className="h-9 gap-2 px-3 py-[6px]"
-              onClick={() => onCreate('')}
-            >
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-background-default">
-                <span className="i-ri-add-line size-4 text-text-primary" />
-              </div>
-              <div className="grow text-left text-[14px] font-normal text-text-secondary">{createText}</div>
-            </DropdownMenuItem>
-          </div>
-        )}
-        {isApp && canCreate && (
-          <AppCreateMenu
-            createText={createText}
-            startFromBlankText={t('newApp.startFromBlank', { ns: 'app' })}
-            startFromTemplateText={t('newApp.startFromTemplate', { ns: 'app' })}
-            importDSLText={t('importDSL', { ns: 'app' })}
-            onCreate={onCreate}
-          />
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/web/app/components/header/plugins-nav/__tests__/index.spec.tsx b/web/app/components/header/plugins-nav/__tests__/index.spec.tsx
deleted file mode 100644
index ff322608110..00000000000
--- a/web/app/components/header/plugins-nav/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { Mock } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
-import { useSelectedLayoutSegment } from '@/next/navigation'
-
-import PluginsNav from '../index'
-
-const queryErrorStatusDot = (container: HTMLElement) =>
-  container.querySelector('.shadow-status-indicator-red-shadow')
-
-vi.mock('@/next/navigation', () => ({
-  useSelectedLayoutSegment: vi.fn(),
-}))
-
-vi.mock('@/app/components/plugins/plugin-page/plugin-tasks/hooks', () => ({
-  usePluginTaskStatus: vi.fn(),
-}))
-
-describe('PluginsNav', () => {
-  const mockUseSelectedLayoutSegment = useSelectedLayoutSegment as Mock
-  const mockUsePluginTaskStatus = usePluginTaskStatus as Mock
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    mockUseSelectedLayoutSegment.mockReturnValue(null)
-    mockUsePluginTaskStatus.mockReturnValue({
-      isInstalling: false,
-      isInstallingWithError: false,
-      isFailed: false,
-    })
-  })
-
-  it('renders correctly (Default)', () => {
-    render(<PluginsNav />)
-
-    const linkElement = screen.getByRole('link')
-    expect(linkElement).toHaveAttribute('href', '/plugins')
-    expect(screen.getByText('common.menus.plugins')).toBeInTheDocument()
-
-    const svg = linkElement.querySelector('svg')
-    expect(svg).toBeInTheDocument()
-
-    expect(queryErrorStatusDot(linkElement)).not.toBeInTheDocument()
-  })
-
-  describe('Active State', () => {
-    it('should have active styling when segment is "plugins"', () => {
-      mockUseSelectedLayoutSegment.mockReturnValue('plugins')
-
-      render(<PluginsNav />)
-
-      const container = screen.getByText('common.menus.plugins').closest('div')
-      expect(container).toHaveClass(
-        'border-components-main-nav-nav-button-border',
-      )
-      expect(container).toHaveClass(
-        'bg-components-main-nav-nav-button-bg-active',
-      )
-    })
-  })
-
-  describe('Task Status Indicators', () => {
-    it('renders Installing state (Inactive)', () => {
-      mockUsePluginTaskStatus.mockReturnValue({ isInstalling: true })
-
-      const { container } = render(<PluginsNav />)
-
-      const downloadingIcon = container.querySelector('.install-icon')
-      expect(downloadingIcon).toBeInTheDocument()
-
-      const svgs = container.querySelectorAll('svg')
-      expect(svgs.length).toBe(1)
-      expect(svgs[0]).toHaveClass('install-icon')
-
-      expect(queryErrorStatusDot(container)).not.toBeInTheDocument()
-    })
-
-    it('renders Installing With Error state (Inactive)', () => {
-      mockUsePluginTaskStatus.mockReturnValue({ isInstallingWithError: true })
-
-      const { container } = render(<PluginsNav />)
-
-      const downloadingIcon = container.querySelector('.install-icon')
-      expect(downloadingIcon).toBeInTheDocument()
-
-      expect(queryErrorStatusDot(container)).toBeInTheDocument()
-    })
-
-    it('renders Failed state (Inactive)', () => {
-      mockUsePluginTaskStatus.mockReturnValue({ isFailed: true })
-
-      const { container } = render(<PluginsNav />)
-
-      const svg = container.querySelector('svg')
-      expect(svg).toBeInTheDocument()
-      expect(svg).not.toHaveClass('install-icon')
-
-      expect(queryErrorStatusDot(container)).toBeInTheDocument()
-    })
-
-    it('renders Default icon when Active even if installing', () => {
-      mockUseSelectedLayoutSegment.mockReturnValue('plugins')
-      mockUsePluginTaskStatus.mockReturnValue({ isInstalling: true })
-
-      const { container } = render(<PluginsNav />)
-
-      const svg = container.querySelector('svg')
-      expect(svg).toBeInTheDocument()
-      expect(svg).not.toHaveClass('install-icon')
-
-      expect(container.querySelector('.install-icon')).not.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
deleted file mode 100644
index 8e5ef258b20..00000000000
--- a/web/app/components/header/plugins-nav/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-
-import { cn } from '@langgenius/dify-ui/cn'
-import { StatusDot } from '@langgenius/dify-ui/status-dot'
-import { useTranslation } from 'react-i18next'
-import { Group } from '@/app/components/base/icons/src/vender/other'
-import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
-import Link from '@/next/link'
-import { useSelectedLayoutSegment } from '@/next/navigation'
-import DownloadingIcon from './downloading-icon'
-
-type PluginsNavProps = {
-  className?: string
-}
-
-const PluginsNav = ({
-  className,
-}: PluginsNavProps) => {
-  const { t } = useTranslation()
-  const selectedSegment = useSelectedLayoutSegment()
-  const activated = selectedSegment === 'plugins'
-  const {
-    isInstalling,
-    isInstallingWithError,
-    isFailed,
-  } = usePluginTaskStatus()
-
-  return (
-    <Link
-      href="/plugins"
-      className={cn(className, 'group', 'plugins-nav-button',
-      // used for use-fold-anim-into.ts
-      )}
-    >
-      <div
-        className={cn('relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5 system-sm-medium', activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text shadow-md', !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary', (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle')}
-      >
-        {
-          (isFailed || isInstallingWithError) && !activated && (
-            <StatusDot
-              status="error"
-              className="absolute -top-px -left-px"
-            />
-          )
-        }
-        <div className="mr-0.5 flex size-5 items-center justify-center">
-          {
-            (!(isInstalling || isInstallingWithError) || activated) && (
-              <Group className="size-4" />
-            )
-          }
-          {
-            (isInstalling || isInstallingWithError) && !activated && (
-              <DownloadingIcon />
-            )
-          }
-        </div>
-        <span className="px-0.5">{t('menus.plugins', { ns: 'common' })}</span>
-      </div>
-    </Link>
-  )
-}
-
-export default PluginsNav
diff --git a/web/app/components/header/tools-nav/__tests__/index.spec.tsx b/web/app/components/header/tools-nav/__tests__/index.spec.tsx
deleted file mode 100644
index 018efc9faee..00000000000
--- a/web/app/components/header/tools-nav/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ToolsNav } from '../index'
-
-const mockUseSelectedLayoutSegment = vi.fn()
-vi.mock('@/next/navigation', () => ({
-  useSelectedLayoutSegment: () => mockUseSelectedLayoutSegment(),
-}))
-
-vi.mock('@remixicon/react', () => ({
-  RiHammerFill: (props: React.ComponentProps<'svg'>) => (
-    <svg data-testid="icon-hammer-fill" {...props} />
-  ),
-  RiHammerLine: (props: React.ComponentProps<'svg'>) => (
-    <svg data-testid="icon-hammer-line" {...props} />
-  ),
-}))
-
-describe('ToolsNav', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render standard inactive state correctly', () => {
-      mockUseSelectedLayoutSegment.mockReturnValue(null)
-
-      render(<ToolsNav />)
-
-      const link = screen.getByRole('link')
-      expect(link).toHaveAttribute('href', '/integrations/tools/built-in')
-      expect(screen.getByText('common.menus.tools')).toBeInTheDocument()
-
-      expect(screen.getByTestId('icon-hammer-line')).toBeInTheDocument()
-      expect(screen.queryByTestId('icon-hammer-fill')).not.toBeInTheDocument()
-
-      expect(link).toHaveClass('text-components-main-nav-nav-button-text')
-      expect(link).toHaveClass(
-        'hover:bg-components-main-nav-nav-button-bg-hover',
-      )
-    })
-
-    it('should render active state correctly', () => {
-      mockUseSelectedLayoutSegment.mockReturnValue('tools')
-
-      render(<ToolsNav />)
-
-      const link = screen.getByRole('link')
-
-      expect(link).toHaveClass('bg-components-main-nav-nav-button-bg-active')
-      expect(link).toHaveClass(
-        'text-components-main-nav-nav-button-text-active',
-      )
-      expect(link).toHaveClass('font-semibold')
-      expect(link).toHaveClass('shadow-md')
-
-      expect(screen.getByTestId('icon-hammer-fill')).toBeInTheDocument()
-      expect(screen.queryByTestId('icon-hammer-line')).not.toBeInTheDocument()
-    })
-
-    it('should render active state for the integrations segment', () => {
-      mockUseSelectedLayoutSegment.mockReturnValue('integrations')
-
-      render(<ToolsNav />)
-
-      expect(screen.getByRole('link')).toHaveClass('bg-components-main-nav-nav-button-bg-active')
-      expect(screen.getByTestId('icon-hammer-fill')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should merge additional classNames', () => {
-      mockUseSelectedLayoutSegment.mockReturnValue(null)
-      render(<ToolsNav className="custom-test-class" />)
-
-      const link = screen.getByRole('link')
-      expect(link).toHaveClass('custom-test-class')
-    })
-  })
-})
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
deleted file mode 100644
index d4a6c17fd00..00000000000
--- a/web/app/components/header/tools-nav/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiHammerFill,
-  RiHammerLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { buildIntegrationPath } from '@/app/components/integrations/routes'
-import Link from '@/next/link'
-import { useSelectedLayoutSegment } from '@/next/navigation'
-
-export function ToolsNav({
-  className,
-}: {
-  className?: string
-}) {
-  const { t } = useTranslation()
-  const selectedSegment = useSelectedLayoutSegment()
-  const activated = selectedSegment === 'integrations' || selectedSegment === 'tools'
-
-  return (
-    <Link
-      href={buildIntegrationPath('builtin')}
-      className={cn('group text-sm font-medium', activated && 'hover:bg-components-main-nav-nav-button-bg-active-hover bg-components-main-nav-nav-button-bg-active font-semibold shadow-md', activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover', className)}
-    >
-      {
-        activated
-          ? <RiHammerFill className="size-4" />
-          : <RiHammerLine className="size-4" />
-      }
-      <div className="ml-2 max-[1120px]:hidden">
-        {t('menus.tools', { ns: 'common' })}
-      </div>
-    </Link>
-  )
-}
diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index 25afde801a9..0913e0c7482 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -23,7 +23,8 @@ import { AppModeEnum } from '@/types/app'
 import MainNav from '../index'
 import { DETAIL_SIDEBAR_STORAGE_KEY } from '../storage'
 
-const activeEdgeClassName = 'before:pointer-events-none'
+const activeGradientMaskClassName = 'aria-[current=page]:main-nav-active-glass'
+const activeStackingClassName = 'aria-[current=page]:z-1'
 
 const { mockIsAgentV2Enabled, mockSwitchWorkspace, mockToastSuccess, hotkeyRegistrations } = vi.hoisted(() => ({
   mockSwitchWorkspace: vi.fn(),
@@ -429,7 +430,7 @@ describe('MainNav', () => {
     expect(logoLink.parentElement).toHaveClass('pt-3', 'pr-2', 'pb-2', 'pl-4')
 
     const homeLink = screen.getByRole('link', { name: /common.mainNav.home/ })
-    expect(homeLink.closest('nav')).toHaveClass('flex', 'flex-col', 'gap-px', 'p-2')
+    expect(homeLink.closest('nav')).toHaveClass('isolate', 'flex', 'flex-col', 'gap-px', 'p-2')
     expect(homeLink).toHaveClass('h-8', 'w-full', 'rounded-[10px]', 'px-2', 'py-1.5')
 
     const webAppsButton = screen.getByRole('button', { name: 'explore.sidebar.webApps' })
@@ -567,8 +568,7 @@ describe('MainNav', () => {
     renderMainNav()
 
     const datasetsLink = screen.getByRole('link', { name: /common.menus.datasets/ })
-    expect(datasetsLink.className).toContain('bg-[linear-gradient(98.077deg')
-    expect(datasetsLink).toHaveClass(activeEdgeClassName)
+    expect(datasetsLink).toHaveClass(activeGradientMaskClassName)
     expect(datasetsLink).toHaveAttribute('aria-current', 'page')
     expect(screen.getByRole('link', { name: /common.mainNav.home/ })).not.toHaveAttribute('aria-current')
   })
@@ -579,7 +579,7 @@ describe('MainNav', () => {
     renderMainNav()
 
     const studioLink = screen.getByRole('link', { name: /common.menus.apps/ })
-    expect(studioLink).toHaveClass(activeEdgeClassName)
+    expect(studioLink).toHaveClass(activeGradientMaskClassName)
     expect(studioLink).toHaveAttribute('aria-current', 'page')
     expect(screen.getByRole('link', { name: /common.mainNav.home/ })).not.toHaveAttribute('aria-current')
   })
@@ -855,7 +855,7 @@ describe('MainNav', () => {
     renderMainNav()
 
     const marketplaceLink = screen.getByRole('link', { name: /common.mainNav.marketplace/ })
-    expect(marketplaceLink).toHaveClass(activeEdgeClassName)
+    expect(marketplaceLink).toHaveClass(activeGradientMaskClassName)
   })
 
   it('marks roster active on roster routes', () => {
@@ -864,7 +864,7 @@ describe('MainNav', () => {
     renderMainNav()
 
     const rosterLink = screen.getByRole('link', { name: /common.menus.roster/ })
-    expect(rosterLink).toHaveClass(activeEdgeClassName)
+    expect(rosterLink).toHaveClass(activeGradientMaskClassName)
     expect(rosterLink).toHaveAttribute('aria-current', 'page')
   })
 
@@ -875,13 +875,8 @@ describe('MainNav', () => {
 
     const homeLink = screen.getByRole('link', { name: /common.mainNav.home/ })
 
-    expect(homeLink).toHaveClass(
-      'backdrop-blur-[5px]',
-      'text-saas-dify-blue-inverted',
-      activeEdgeClassName,
-      'after:border-components-main-nav-glass-edge-highlight-first',
-    )
-    expect(homeLink.className).toContain('var(--color-components-main-nav-glass-surface-first)')
+    expect(homeLink).toHaveClass(activeGradientMaskClassName)
+    expect(homeLink).toHaveClass(activeStackingClassName)
   })
 
   it('keeps Home active on the legacy explore apps route only', () => {
diff --git a/web/app/components/main-nav/components/nav-link.css b/web/app/components/main-nav/components/nav-link.css
new file mode 100644
index 00000000000..20839c746ea
--- /dev/null
+++ b/web/app/components/main-nav/components/nav-link.css
@@ -0,0 +1,48 @@
+@utility main-nav-active-glass {
+  @apply overflow-hidden system-md-semibold text-saas-dify-blue-inverted backdrop-blur-[5px];
+
+  background-image: linear-gradient(
+    91.46deg,
+    var(--color-components-main-nav-glass-surface-first, rgb(0 51 255 / 0.08)) 0%,
+    var(--color-components-main-nav-glass-surface-middle-1, rgb(0 51 255 / 0.12)) 17.98%,
+    var(--color-components-main-nav-glass-surface-middle-2, rgb(0 51 255 / 0.1)) 58.75%,
+    var(--color-components-main-nav-glass-surface-end, rgb(0 51 255 / 0.08)) 101.09%
+  );
+  box-shadow:
+    0 4px 8px 0 var(--color-components-main-nav-glass-shadow-reflection-glow),
+    0 10px 12px -4px var(--color-shadow-shadow-4),
+    0 3px 5px -2px var(--color-shadow-shadow-1),
+    0 8px 16px -4px var(--color-components-main-nav-glass-shadow-reflection);
+
+  &::before {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 1px solid transparent;
+    background: linear-gradient(
+      0deg,
+      var(--color-components-main-nav-glass-edge-reflection-first, rgb(0 51 255 / 0)) 0%,
+      var(--color-components-main-nav-glass-edge-reflection-middle, rgb(0 51 255 / 0.6)) 50%,
+      var(--color-components-main-nav-glass-edge-reflection-end, rgb(0 51 255 / 0)) 100%
+    ) border-box;
+    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+  }
+
+  &::after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 1px solid transparent;
+    background: linear-gradient(180deg, var(--color-components-main-nav-glass-edge-highlight-first, rgb(255 255 255 / 0.98)) 0%, var(--color-components-main-nav-glass-edge-highlight-middle, rgb(255 255 255 / 0)) 18%, var(--color-components-main-nav-glass-edge-highlight-end, rgb(255 255 255 / 0.42)) 100%) border-box;
+    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+    box-shadow: inset 0 0 8px 0 var(--color-components-main-nav-glass-inner-glow);
+  }
+}
diff --git a/web/app/components/main-nav/components/nav-link.tsx b/web/app/components/main-nav/components/nav-link.tsx
index 659f39277ff..664b75abe04 100644
--- a/web/app/components/main-nav/components/nav-link.tsx
+++ b/web/app/components/main-nav/components/nav-link.tsx
@@ -5,21 +5,6 @@ import type { MainNavItem } from '../types'
 import { cn } from '@langgenius/dify-ui/cn'
 import Link from '@/next/link'
 
-const navItemClassName = 'group relative flex h-8 w-full items-center gap-2 rounded-[10px] px-2 py-1.5 outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-state-accent-solid'
-
-const activeNavItemClassName = cn(
-  'overflow-hidden',
-  'bg-[linear-gradient(98.077deg,var(--color-components-main-nav-glass-surface-first)_0%,var(--color-components-main-nav-glass-surface-middle-1)_17.98%,var(--color-components-main-nav-glass-surface-middle-2)_58.75%,var(--color-components-main-nav-glass-surface-end)_101.09%)]',
-  'system-md-semibold text-saas-dify-blue-inverted backdrop-blur-[5px]',
-  'shadow-[0px_4px_8px_0px_var(--color-components-main-nav-glass-shadow-reflection-glow),0px_12px_16px_-4px_var(--color-shadow-shadow-4),0px_4px_6px_-2px_var(--color-shadow-shadow-1),0px_10px_16px_-4px_var(--color-components-main-nav-glass-shadow-reflection)]',
-  'before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:p-px before:content-[\'\']',
-  'before:bg-[linear-gradient(var(--color-components-main-nav-glass-edge-highlight-first),var(--color-components-main-nav-glass-edge-highlight-first))_top/100%_1px_no-repeat,linear-gradient(var(--color-components-main-nav-glass-edge-highlight-end),var(--color-components-main-nav-glass-edge-highlight-end))_bottom/100%_1px_no-repeat,linear-gradient(180deg,var(--color-components-main-nav-glass-edge-reflection-first)_0%,var(--color-components-main-nav-glass-edge-reflection-middle)_50%,var(--color-components-main-nav-glass-edge-reflection-end)_100%)_left/1px_100%_no-repeat,linear-gradient(180deg,var(--color-components-main-nav-glass-edge-reflection-first)_0%,var(--color-components-main-nav-glass-edge-reflection-middle)_50%,var(--color-components-main-nav-glass-edge-reflection-end)_100%)_right/1px_100%_no-repeat]',
-  'before:[mask-composite:exclude] before:[-webkit-mask-composite:xor] before:[-webkit-mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)] before:[mask:linear-gradient(#000_0_0)_content-box,linear-gradient(#000_0_0)]',
-  'after:pointer-events-none after:absolute after:inset-[-1px] after:rounded-[inherit] after:border after:border-components-main-nav-glass-edge-highlight-first after:shadow-[inset_0_0_8px_0_var(--color-components-main-nav-glass-inner-glow)] after:content-[\'\']',
-)
-
-const inactiveNavItemClassName = 'system-md-medium bg-components-main-nav-nav-button-bg text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover hover:text-components-main-nav-nav-button-text'
-
 const NavIcon = ({
   icon,
   className,
@@ -49,12 +34,14 @@ const MainNavLink = ({
       aria-current={activated ? 'page' : undefined}
       title={item.label}
       className={cn(
-        navItemClassName,
-        activated ? activeNavItemClassName : inactiveNavItemClassName,
+        'group relative flex h-8 w-full items-center gap-2 rounded-[10px] px-2 py-1.5 outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset',
+        'not-aria-[current=page]:bg-components-main-nav-nav-button-bg not-aria-[current=page]:system-md-medium not-aria-[current=page]:text-components-main-nav-nav-button-text not-aria-[current=page]:hover:bg-components-main-nav-nav-button-bg-hover not-aria-[current=page]:hover:text-components-main-nav-nav-button-text',
+        'aria-[current=page]:main-nav-active-glass aria-[current=page]:z-1',
       )}
     >
-      <NavIcon icon={activated ? item.activeIcon : item.icon} />
-      <span className={cn('min-w-0 truncate', activated && 'text-shadow-[0px_0px_8px_var(--color-components-main-nav-glass-text-glow)]')}>{item.label}</span>
+      <NavIcon icon={item.icon} className="group-aria-[current=page]:hidden" />
+      <NavIcon icon={item.activeIcon} className="hidden group-aria-[current=page]:block" />
+      <span className="min-w-0 truncate group-aria-[current=page]:text-shadow-[0px_0px_8px_var(--color-components-main-nav-glass-text-glow)]">{item.label}</span>
       {children}
     </Link>
   )
diff --git a/web/app/components/main-nav/index.tsx b/web/app/components/main-nav/index.tsx
index 64b243dac27..fd304813280 100644
--- a/web/app/components/main-nav/index.tsx
+++ b/web/app/components/main-nav/index.tsx
@@ -298,7 +298,7 @@ const MainNav = ({
               ? null
               : (
                   <>
-                    <nav className="flex flex-col gap-px p-2">
+                    <nav className="isolate flex flex-col gap-px p-2">
                       {navItems.map(item => (
                         <MainNavLink key={item.href} item={item} pathname={pathname}>
                           {item.href === '/roster' && (
diff --git a/web/app/components/next-route-state/atoms.ts b/web/app/components/next-route-state/atoms.ts
index 0378415452c..ec8de36aeb4 100644
--- a/web/app/components/next-route-state/atoms.ts
+++ b/web/app/components/next-route-state/atoms.ts
@@ -31,8 +31,6 @@ function routeParamsKey(params: NextRouteParams) {
   return JSON.stringify(normalizedParamEntries(params))
 }
 
-export const nextPathnameAtom = atom(get => get(nextRouteStateAtom).pathname)
-
 export const nextParamsAtom = atom(get => get(nextRouteStateAtom).params)
 
 export const setNextRouteStateAtom = atom(null, (get, set, routeState: NextRouteState) => {
diff --git a/web/app/components/plugins/plugin-auth/__tests__/utils.spec.ts b/web/app/components/plugins/plugin-auth/__tests__/utils.spec.ts
deleted file mode 100644
index 878f3111ab1..00000000000
--- a/web/app/components/plugins/plugin-auth/__tests__/utils.spec.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { transformFormSchemasSecretInput } from '../utils'
-
-describe('plugin-auth/utils', () => {
-  describe('transformFormSchemasSecretInput', () => {
-    it('replaces secret input values with [__HIDDEN__]', () => {
-      const values = { api_key: 'sk-12345', username: 'admin' }
-      const result = transformFormSchemasSecretInput(['api_key'], values)
-      expect(result.api_key).toBe('[__HIDDEN__]')
-      expect(result.username).toBe('admin')
-    })
-
-    it('does not replace falsy values (empty string)', () => {
-      const values = { api_key: '', username: 'admin' }
-      const result = transformFormSchemasSecretInput(['api_key'], values)
-      expect(result.api_key).toBe('')
-    })
-
-    it('does not replace undefined values', () => {
-      const values = { username: 'admin' }
-      const result = transformFormSchemasSecretInput(['api_key'], values)
-      expect(result.api_key).toBeUndefined()
-    })
-
-    it('handles multiple secret fields', () => {
-      const values = { key1: 'secret1', key2: 'secret2', normal: 'value' }
-      const result = transformFormSchemasSecretInput(['key1', 'key2'], values)
-      expect(result.key1).toBe('[__HIDDEN__]')
-      expect(result.key2).toBe('[__HIDDEN__]')
-      expect(result.normal).toBe('value')
-    })
-
-    it('does not mutate the original values', () => {
-      const values = { api_key: 'sk-12345' }
-      const result = transformFormSchemasSecretInput(['api_key'], values)
-      expect(result).not.toBe(values)
-      expect(values.api_key).toBe('sk-12345')
-    })
-
-    it('returns same values when no secret names provided', () => {
-      const values = { api_key: 'sk-12345', username: 'admin' }
-      const result = transformFormSchemasSecretInput([], values)
-      expect(result).toEqual(values)
-    })
-
-    it('handles null-like values correctly', () => {
-      const values = { key: null, key2: 0, key3: false }
-      const result = transformFormSchemasSecretInput(['key', 'key2', 'key3'], values)
-      // null, 0, false are falsy — should not be replaced
-      expect(result.key).toBeNull()
-      expect(result.key2).toBe(0)
-      expect(result.key3).toBe(false)
-    })
-  })
-})
diff --git a/web/app/components/plugins/plugin-auth/utils.ts b/web/app/components/plugins/plugin-auth/utils.ts
deleted file mode 100644
index d264cfb198f..00000000000
--- a/web/app/components/plugins/plugin-auth/utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const transformFormSchemasSecretInput = (isPristineSecretInputNames: string[], values: Record<string, any>) => {
-  const transformedValues: Record<string, any> = { ...values }
-
-  isPristineSecretInputNames.forEach((name) => {
-    if (transformedValues[name])
-      transformedValues[name] = '[__HIDDEN__]'
-  })
-
-  return transformedValues
-}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx
deleted file mode 100644
index 4b1fee74415..00000000000
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,2754 +0,0 @@
-import type { ReactNode } from 'react'
-import type { Node } from 'reactflow'
-import type { PluginSource } from '@/app/components/plugins/types'
-import type { Collection } from '@/app/components/tools/types'
-import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
-import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
-import type { NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { CollectionType } from '@/app/components/tools/types'
-import { VarKindType } from '@/app/components/workflow/nodes/_base/types'
-import { Type } from '@/app/components/workflow/nodes/llm/types'
-import {
-  SchemaModal,
-  ToolAuthorizationSection,
-  ToolBaseForm,
-  ToolCredentialsForm,
-  ToolItem,
-  ToolSettingsPanel,
-  ToolTrigger,
-} from '../components'
-import { usePluginInstalledCheck, useToolSelectorState } from '../hooks'
-import ToolSelector from '../index'
-
-// ==================== Mock Setup ====================
-
-// Mock service hooks - use let so we can modify in tests
-// Allow undefined for testing fallback behavior
-let mockBuildInTools: ToolWithProvider[] | undefined = []
-let mockCustomTools: ToolWithProvider[] | undefined = []
-let mockWorkflowTools: ToolWithProvider[] | undefined = []
-let mockMcpTools: ToolWithProvider[] | undefined = []
-
-vi.mock('@/service/use-tools', () => ({
-  useAllBuiltInTools: () => ({ data: mockBuildInTools, isFetched: true }),
-  useAllCustomTools: () => ({ data: mockCustomTools, isFetched: true }),
-  useAllWorkflowTools: () => ({ data: mockWorkflowTools, isFetched: true }),
-  useAllMCPTools: () => ({ data: mockMcpTools, isFetched: true }),
-  useInvalidateAllBuiltInTools: () => vi.fn(),
-}))
-
-// Track manifest mock state
-let mockManifestData: Record<string, unknown> | null = null
-let mockInstalledPlugins: Array<{ source: PluginSource }> = []
-
-vi.mock('@/service/use-plugins', () => ({
-  useCheckInstalled: ({ pluginIds, enabled }: { pluginIds: string[], enabled: boolean }) => ({
-    data: enabled && pluginIds.length > 0
-      ? { plugins: mockInstalledPlugins }
-      : undefined,
-  }),
-  usePluginManifestInfo: () => ({ data: mockManifestData }),
-  useInvalidateInstalledPluginList: () => vi.fn(),
-}))
-
-// Mock tool credential services
-const mockFetchBuiltInToolCredentialSchema = vi.fn().mockResolvedValue([
-  { name: 'api_key', type: 'string', required: false, label: { en_US: 'API Key' } },
-])
-const mockFetchBuiltInToolCredential = vi.fn().mockResolvedValue({})
-
-vi.mock('@/service/tools', () => ({
-  fetchBuiltInToolCredentialSchema: (...args: unknown[]) => mockFetchBuiltInToolCredentialSchema(...args),
-  fetchBuiltInToolCredential: (...args: unknown[]) => mockFetchBuiltInToolCredential(...args),
-}))
-
-// Mock form schema utils - necessary for controlling test data
-vi.mock('@/app/components/tools/utils/to-form-schema', () => ({
-  generateFormValue: vi.fn().mockReturnValue({}),
-  getPlainValue: vi.fn().mockImplementation(v => v),
-  getStructureValue: vi.fn().mockImplementation(v => v),
-  toolParametersToFormSchemas: vi.fn().mockReturnValue([]),
-  toolCredentialToFormSchemas: vi.fn().mockImplementation(schemas => schemas.map((s: { required?: boolean }) => ({
-    ...s,
-    required: s.required || false,
-  }))),
-  addDefaultValue: vi.fn().mockImplementation((credential, _schemas) => credential),
-}))
-
-// Mock complex child components that need controlled interaction
-vi.mock('@/app/components/workflow/block-selector/tool-picker', () => ({
-  default: ({
-    onSelect,
-    onSelectMultiple,
-    trigger,
-  }: {
-    onSelect: (tool: ToolDefaultValue) => void
-    onSelectMultiple?: (tools: ToolDefaultValue[]) => void
-    trigger: ReactNode
-  }) => {
-    const mockToolDefault = {
-      provider_id: 'test-provider/tool',
-      provider_type: 'builtin',
-      provider_name: 'Test Provider',
-      tool_name: 'test-tool',
-      tool_label: 'Test Tool',
-      tool_description: 'A test tool',
-      title: 'Test Tool Title',
-      is_team_authorization: true,
-      params: {},
-      paramSchemas: [],
-    }
-    return (
-      <div data-testid="tool-picker">
-        {trigger}
-        <button
-          data-testid="select-tool-btn"
-          onClick={() => onSelect(mockToolDefault as ToolDefaultValue)}
-        >
-          Select Tool
-        </button>
-        <button
-          data-testid="select-multiple-btn"
-          onClick={() => onSelectMultiple?.([mockToolDefault as ToolDefaultValue])}
-        >
-          Select Multiple
-        </button>
-      </div>
-    )
-  },
-}))
-
-vi.mock('@/app/components/workflow/nodes/tool/components/tool-form', () => ({
-  default: ({
-    onChange,
-    value,
-  }: {
-    onChange: (v: Record<string, unknown>) => void
-    value: Record<string, unknown>
-  }) => (
-    <div data-testid="tool-form">
-      <span data-testid="tool-form-value">{JSON.stringify(value)}</span>
-      <button
-        data-testid="change-settings-btn"
-        onClick={() => onChange({ setting1: 'new-value' })}
-      >
-        Change Settings
-      </button>
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/plugins/plugin-auth', () => ({
-  AuthCategory: { tool: 'tool' },
-  PluginAuthInAgent: ({
-    onAuthorizationItemClick,
-  }: {
-    onAuthorizationItemClick: (id: string) => void
-  }) => (
-    <div data-testid="plugin-auth-in-agent">
-      <button
-        data-testid="auth-item-click-btn"
-        onClick={() => onAuthorizationItemClick('credential-123')}
-      >
-        Select Credential
-      </button>
-    </div>
-  ),
-}))
-
-// Popover positioning is mocked for deterministic panel tests.
-vi.mock('@langgenius/dify-ui/popover', () => ({
-  Popover: ({
-    children,
-    open,
-  }: {
-    children: ReactNode
-    open?: boolean
-  }) => (
-    <div data-testid="popover" data-open={open}>
-      {children}
-    </div>
-  ),
-  PopoverTrigger: ({
-    children,
-    render,
-    onClick,
-  }: {
-    children: ReactNode
-    render?: ReactNode
-    onClick?: () => void
-  }) => (
-    <div data-testid="popover-trigger" onClick={onClick}>
-      {render
-        ? (
-            <>
-              {render}
-              {children}
-            </>
-          )
-        : children}
-    </div>
-  ),
-  PortalToFollowElemTrigger: ({
-    children,
-    render,
-    onClick,
-  }: {
-    children: ReactNode
-    render?: ReactNode
-    onClick?: () => void
-  }) => (
-    <div data-testid="popover-trigger" onClick={onClick}>
-      {render
-        ? (
-            <>
-              {render}
-              {children}
-            </>
-          )
-        : children}
-    </div>
-  ),
-  PopoverContent: ({ children }: { children: ReactNode }) => (
-    <div data-testid="popover-content">{children}</div>
-  ),
-}))
-
-vi.mock('../../../../readme-panel/entrance', () => ({
-  ReadmeEntrance: () => <div data-testid="readme-entrance" />,
-}))
-
-vi.mock('../components/reasoning-config-form', () => ({
-  default: ({
-    onChange,
-    value,
-  }: {
-    onChange: (v: Record<string, unknown>) => void
-    value: Record<string, unknown>
-  }) => (
-    <div data-testid="reasoning-config-form">
-      <span data-testid="params-value">{JSON.stringify(value)}</span>
-      <button
-        data-testid="change-params-btn"
-        onClick={() => onChange({ param1: 'new-param' })}
-      >
-        Change Params
-      </button>
-    </div>
-  ),
-}))
-
-// Track MCP availability mock state
-let mockMCPToolAllowed = true
-
-vi.mock('@/app/components/workflow/nodes/_base/components/mcp-tool-availability', () => ({
-  useMCPToolAvailability: () => ({ allowed: mockMCPToolAllowed }),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip', () => ({
-  default: () => <div data-testid="mcp-not-support-tooltip" />,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/install-plugin-button', () => ({
-  InstallPluginButton: ({
-    onSuccess,
-    onClick,
-  }: {
-    onSuccess?: () => void
-    onClick?: (e: React.MouseEvent) => void
-  }) => (
-    <button
-      data-testid="install-plugin-btn"
-      onClick={(e) => {
-        onClick?.(e)
-        onSuccess?.()
-      }}
-    >
-      Install
-    </button>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/switch-plugin-version', () => ({
-  SwitchPluginVersion: ({
-    onChange,
-  }: {
-    onChange?: () => void
-  }) => (
-    <button data-testid="switch-version-btn" onClick={onChange}>
-      Switch Version
-    </button>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/block-icon', () => ({
-  default: () => <div data-testid="block-icon" />,
-}))
-
-// Mock Dialog to avoid Base UI focus/portal behavior in tests
-vi.mock('@langgenius/dify-ui/dialog', () => ({
-  Dialog: ({ children, open }: { children: ReactNode, open?: boolean }) => (
-    open ? <div>{children}</div> : null
-  ),
-  DialogContent: ({ children }: { children: ReactNode }) => (
-    <div data-testid="modal">{children}</div>
-  ),
-  DialogTitle: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-}))
-
-// Mock VisualEditor - complex component with many dependencies
-vi.mock('@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor', () => ({
-  default: () => <div data-testid="visual-editor" />,
-}))
-
-vi.mock('@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context', () => ({
-  MittProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
-  VisualEditorContextProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
-}))
-
-// Mock Form - complex model provider form
-vi.mock('@/app/components/header/account-setting/model-provider-page/model-modal/Form', () => ({
-  default: ({
-    onChange,
-    value,
-    fieldMoreInfo,
-  }: {
-    onChange: (v: Record<string, unknown>) => void
-    value: Record<string, unknown>
-    fieldMoreInfo?: (item: { url?: string | null }) => ReactNode
-  }) => (
-    <div data-testid="credential-form">
-      <input
-        data-testid="form-input"
-        value={JSON.stringify(value)}
-        onChange={e => onChange(JSON.parse(e.target.value || '{}'))}
-      />
-      {fieldMoreInfo && (
-        <div data-testid="field-more-info">
-          {fieldMoreInfo({ url: 'https://example.com' })}
-          {fieldMoreInfo({ url: null })}
-        </div>
-      )}
-    </div>
-  ),
-}))
-
-// Mock Toast - need to track notify calls for assertions
-const mockToastNotify = vi.fn()
-vi.mock('@langgenius/dify-ui/toast', () => ({
-  toast: Object.assign((message: string, options?: { type?: string }) => mockToastNotify({ type: options?.type, message }), {
-    success: (message: string) => mockToastNotify({ type: 'success', message }),
-    error: (message: string) => mockToastNotify({ type: 'error', message }),
-    warning: (message: string) => mockToastNotify({ type: 'warning', message }),
-    info: (message: string) => mockToastNotify({ type: 'info', message }),
-    dismiss: vi.fn(),
-    update: vi.fn(),
-    promise: vi.fn(),
-  }),
-}))
-
-// ==================== Test Utilities ====================
-
-const createTestQueryClient = () =>
-  new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        gcTime: 0,
-      },
-    },
-  })
-
-const createWrapper = () => {
-  const testQueryClient = createTestQueryClient()
-  return ({ children }: { children: ReactNode }) => (
-    <QueryClientProvider client={testQueryClient}>
-      {children}
-    </QueryClientProvider>
-  )
-}
-
-// Factory functions for test data
-const createToolValue = (overrides: Partial<ToolValue> = {}): ToolValue => ({
-  provider_name: 'test-provider/tool',
-  provider_show_name: 'Test Provider',
-  tool_name: 'test-tool',
-  tool_label: 'Test Tool',
-  tool_description: 'A test tool',
-  settings: {},
-  parameters: {},
-  enabled: true,
-  extra: { description: 'Test description' },
-  ...overrides,
-})
-
-const createToolDefaultValue = (overrides: Partial<ToolDefaultValue> = {}): ToolDefaultValue => ({
-  provider_id: 'test-provider/tool',
-  provider_type: CollectionType.builtIn,
-  provider_name: 'Test Provider',
-  tool_name: 'test-tool',
-  tool_label: 'Test Tool',
-  tool_description: 'A test tool',
-  title: 'Test Tool Title',
-  is_team_authorization: true,
-  params: {},
-  paramSchemas: [],
-  ...overrides,
-} as ToolDefaultValue)
-
-// Helper to create mock ToolFormSchema for testing
-const createMockFormSchema = (name: string) => ({
-  name,
-  variable: name,
-  label: { en_US: name, zh_Hans: name },
-  type: 'text-input',
-  _type: 'string',
-  form: 'llm',
-  required: false,
-  show_on: [],
-})
-
-const createToolWithProvider = (overrides: Record<string, unknown> = {}): ToolWithProvider => ({
-  id: 'test-provider/tool',
-  name: 'test-provider',
-  type: CollectionType.builtIn,
-  icon: 'test-icon',
-  is_team_authorization: true,
-  allow_delete: true,
-  tools: [
-    {
-      name: 'test-tool',
-      label: { en_US: 'Test Tool' },
-      description: { en_US: 'A test tool' },
-      parameters: [
-        { name: 'setting1', form: 'user', type: 'string' },
-        { name: 'param1', form: 'llm', type: 'string' },
-      ],
-    },
-  ],
-  ...overrides,
-} as unknown as ToolWithProvider)
-
-const defaultProps = {
-  onSelect: vi.fn(),
-  nodeOutputVars: [] as NodeOutPutVar[],
-  availableNodes: [] as Node[],
-}
-
-// ==================== Hook Tests ====================
-
-describe('usePluginInstalledCheck Hook', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockInstalledPlugins = []
-  })
-
-  it('should return inMarketPlace as false when manifest is null', () => {
-    const { result } = renderHook(
-      () => usePluginInstalledCheck({}),
-      { wrapper: createWrapper() },
-    )
-
-    expect(result.current.inMarketPlace).toBe(false)
-    expect(result.current.manifest).toBeUndefined()
-  })
-
-  it('should handle empty provider name', () => {
-    const { result } = renderHook(
-      () => usePluginInstalledCheck({}),
-      { wrapper: createWrapper() },
-    )
-
-    expect(result.current.inMarketPlace).toBe(false)
-  })
-
-  it('should extract pluginID from provider name correctly', () => {
-    const { result } = renderHook(
-      () => usePluginInstalledCheck({ providerPluginId: 'org/plugin' }),
-      { wrapper: createWrapper() },
-    )
-
-    expect(result.current.inMarketPlace).toBe(false)
-    expect(result.current.pluginID).toBe('org/plugin')
-  })
-})
-
-describe('useToolSelectorState Hook', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Initial State', () => {
-    it('should initialize with correct default values', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      expect(result.current.isShow).toBe(false)
-      expect(result.current.isShowChooseTool).toBe(false)
-      expect(result.current.currType).toBe('settings')
-      expect(result.current.currentProvider).toBeUndefined()
-      expect(result.current.currentTool).toBeUndefined()
-    })
-  })
-
-  describe('State Setters', () => {
-    it('should update isShow state', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.setIsShow(true)
-      })
-
-      expect(result.current.isShow).toBe(true)
-    })
-
-    it('should update isShowChooseTool state', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.setIsShowChooseTool(true)
-      })
-
-      expect(result.current.isShowChooseTool).toBe(true)
-    })
-
-    it('should update currType state', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.setCurrType('params')
-      })
-
-      expect(result.current.currType).toBe('params')
-    })
-  })
-
-  describe('Event Handlers', () => {
-    it('should call onSelect when handleDescriptionChange is triggered', () => {
-      const onSelect = vi.fn()
-      const value = createToolValue()
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.handleDescriptionChange('new description')
-      })
-
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          extra: expect.objectContaining({ description: 'new description' }),
-        }),
-      )
-    })
-
-    it('should call onSelect when handleEnabledChange is triggered', () => {
-      const onSelect = vi.fn()
-      const value = createToolValue({ enabled: false })
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.handleEnabledChange(true)
-      })
-
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({ enabled: true }),
-      )
-    })
-
-    it('should call onSelect when handleAuthorizationItemClick is triggered', () => {
-      const onSelect = vi.fn()
-      const value = createToolValue()
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.handleAuthorizationItemClick('credential-123')
-      })
-
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({ credential_id: 'credential-123' }),
-      )
-    })
-
-    it('should call onSelect when handleSettingsFormChange is triggered', () => {
-      const onSelect = vi.fn()
-      const value = createToolValue()
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.handleSettingsFormChange({ key: { type: VarKindType.constant, value: 'value' } })
-      })
-
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          settings: expect.any(Object),
-        }),
-      )
-    })
-
-    it('should call onSelect when handleParamsFormChange is triggered', () => {
-      const onSelect = vi.fn()
-      const value = createToolValue()
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.handleParamsFormChange({ param: { value: { type: VarKindType.constant, value: 'value' } } })
-      })
-
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({ parameters: { param: { value: { type: VarKindType.constant, value: 'value' } } } }),
-      )
-    })
-
-    it('should call onSelectMultiple when handleSelectMultipleTool is triggered', () => {
-      const onSelect = vi.fn()
-      const onSelectMultiple = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect, onSelectMultiple }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.handleSelectMultipleTool([createToolDefaultValue()])
-      })
-
-      expect(onSelectMultiple).toHaveBeenCalled()
-    })
-  })
-
-  describe('Computed Values', () => {
-    it('should return empty settings value when no settings', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      expect(result.current.getSettingsValue()).toEqual({})
-    })
-
-    it('should compute showTabSlider correctly', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Without currentProvider, should be false
-      expect(result.current.showTabSlider).toBe(false)
-    })
-  })
-})
-
-// ==================== Component Tests ====================
-
-describe('ToolTrigger Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<ToolTrigger open={false} />)
-      expect(screen.getByText(/placeholder|configureTool/i)).toBeInTheDocument()
-    })
-
-    it('should show placeholder text when no value', () => {
-      render(<ToolTrigger open={false} />)
-      // Should show placeholder text from i18n
-      expect(screen.getByText(/placeholder|configureTool/i)).toBeInTheDocument()
-    })
-
-    it('should show tool name when value is provided', () => {
-      const value = { provider_name: 'test', tool_name: 'My Tool' }
-      const provider = createToolWithProvider()
-
-      render(<ToolTrigger open={false} value={value} provider={provider} />)
-      expect(screen.getByText('My Tool')).toBeInTheDocument()
-    })
-
-    it('should show configure icon when isConfigure is true', () => {
-      render(<ToolTrigger open={false} isConfigure />)
-      // RiEqualizer2Line should be present
-      const container = screen.getByText(/configureTool/i).parentElement
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should show arrow icon when isConfigure is false', () => {
-      render(<ToolTrigger open={false} isConfigure={false} />)
-      // RiArrowDownSLine should be present
-      const container = screen.getByText(/placeholder/i).parentElement
-      expect(container).toBeInTheDocument()
-    })
-
-    it('should apply open state styling', () => {
-      const { rerender, container } = render(<ToolTrigger open={false} />)
-      expect(container.querySelector('.group')).toBeInTheDocument()
-
-      rerender(<ToolTrigger open={true} />)
-      // When open is true, the root div should have the hover-alt background
-      const updatedTriggerDiv = container.querySelector('.bg-state-base-hover-alt')
-      expect(updatedTriggerDiv).toBeInTheDocument()
-    })
-  })
-})
-
-describe('ToolItem Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(<ToolItem open={false} />)
-      expect(container.querySelector('.group')).toBeInTheDocument()
-    })
-
-    it('should display provider name and tool label', () => {
-      render(
-        <ToolItem
-          open={false}
-          providerName="org/provider"
-          toolLabel="My Tool"
-        />,
-      )
-      expect(screen.getByText('provider')).toBeInTheDocument()
-      expect(screen.getByText('My Tool')).toBeInTheDocument()
-    })
-
-    it('should show MCP provider show name for MCP tools', () => {
-      render(
-        <ToolItem
-          open={false}
-          isMCPTool
-          providerShowName="MCP Provider"
-          toolLabel="My Tool"
-        />,
-      )
-      expect(screen.getByText('MCP Provider')).toBeInTheDocument()
-    })
-
-    it('should render string icon correctly', () => {
-      render(
-        <ToolItem
-          open={false}
-          icon="https://example.com/icon.png"
-          toolLabel="Tool"
-        />,
-      )
-      const iconElement = document.querySelector('[style*="background-image"]')
-      expect(iconElement).toBeInTheDocument()
-    })
-
-    it('should render object icon correctly', () => {
-      render(
-        <ToolItem
-          open={false}
-          icon={{ content: '🔧', background: '#fff' }}
-          toolLabel="Tool"
-        />,
-      )
-      // AppIcon should be rendered
-      expect(document.querySelector('.rounded-lg')).toBeInTheDocument()
-    })
-
-    it('should render default icon when no icon provided', () => {
-      render(<ToolItem open={false} toolLabel="Tool" />)
-      // Group icon should be rendered
-      expect(document.querySelector('.opacity-35')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onDelete when delete button is clicked', async () => {
-      const onDelete = vi.fn()
-      render(
-        <ToolItem
-          open={false}
-          onDelete={onDelete}
-          toolLabel="Tool"
-        />,
-      )
-
-      // Find the delete button (hidden by default, shown on hover)
-      const deleteBtn = document.querySelector('[class*="hover:text-text-destructive"]')
-      if (deleteBtn) {
-        fireEvent.click(deleteBtn)
-        expect(onDelete).toHaveBeenCalled()
-      }
-    })
-
-    it('should call onSwitchChange when switch is toggled', () => {
-      const onSwitchChange = vi.fn()
-      render(
-        <ToolItem
-          open={false}
-          showSwitch
-          switchValue={false}
-          onSwitchChange={onSwitchChange}
-          toolLabel="Tool"
-        />,
-      )
-
-      // The switch should be rendered
-      const switchContainer = document.querySelector('.mr-1')
-      expect(switchContainer).toBeInTheDocument()
-    })
-
-    it('should stop propagation on delete click', () => {
-      const onDelete = vi.fn()
-      const parentClick = vi.fn()
-
-      render(
-        <div onClick={parentClick}>
-          <ToolItem
-            open={false}
-            onDelete={onDelete}
-            toolLabel="Tool"
-          />
-        </div>,
-      )
-
-      const deleteBtn = document.querySelector('[class*="hover:text-text-destructive"]')
-      if (deleteBtn) {
-        fireEvent.click(deleteBtn)
-        expect(parentClick).not.toHaveBeenCalled()
-      }
-    })
-  })
-
-  describe('Conditional Rendering', () => {
-    it('should show switch only when showSwitch is true and no errors', () => {
-      const { rerender } = render(
-        <ToolItem open={false} showSwitch={false} toolLabel="Tool" />,
-      )
-      expect(document.querySelector('.mr-1')).not.toBeInTheDocument()
-
-      rerender(
-        <ToolItem open={false} showSwitch toolLabel="Tool" />,
-      )
-      expect(document.querySelector('.mr-1')).toBeInTheDocument()
-    })
-
-    it('should show not authorized button when noAuth is true', () => {
-      render(
-        <ToolItem
-          open={false}
-          noAuth
-          toolLabel="Tool"
-        />,
-      )
-      expect(screen.getByText(/notAuthorized/i)).toBeInTheDocument()
-    })
-
-    it('should show auth removed button when authRemoved is true', () => {
-      render(
-        <ToolItem
-          open={false}
-          authRemoved
-          toolLabel="Tool"
-        />,
-      )
-      expect(screen.getByText(/authRemoved/i)).toBeInTheDocument()
-    })
-
-    it('should show install button when uninstalled', () => {
-      render(
-        <ToolItem
-          open={false}
-          uninstalled
-          installInfo="plugin@1.0.0"
-          toolLabel="Tool"
-        />,
-      )
-      expect(screen.getByTestId('install-plugin-btn')).toBeInTheDocument()
-    })
-
-    it('should show version switch when versionMismatch', () => {
-      render(
-        <ToolItem
-          open={false}
-          versionMismatch
-          installInfo="plugin@1.0.0"
-          toolLabel="Tool"
-        />,
-      )
-      expect(screen.getByTestId('switch-version-btn')).toBeInTheDocument()
-    })
-
-    it('should show error icon when isError is true', () => {
-      render(
-        <ToolItem
-          open={false}
-          isError
-          errorTip="Error occurred"
-          toolLabel="Tool"
-        />,
-      )
-      // RiErrorWarningFill should be rendered
-      expect(document.querySelector('.text-text-destructive')).toBeInTheDocument()
-    })
-
-    it('should apply opacity when transparent states are true', () => {
-      render(
-        <ToolItem
-          open={false}
-          uninstalled
-          toolLabel="Tool"
-        />,
-      )
-      expect(document.querySelector('.opacity-50')).toBeInTheDocument()
-    })
-
-    it('should show MCP tooltip when isMCPTool is true and MCP not allowed', () => {
-      // Set MCP tool not allowed
-      mockMCPToolAllowed = false
-      render(
-        <ToolItem
-          open={false}
-          isMCPTool
-          toolLabel="Tool"
-        />,
-      )
-      // McpToolNotSupportTooltip should be rendered (line 128)
-      expect(screen.getByTestId('mcp-not-support-tooltip')).toBeInTheDocument()
-      // Reset
-      mockMCPToolAllowed = true
-    })
-
-    it('should apply opacity-30 to icon when isMCPTool and not allowed with string icon', () => {
-      mockMCPToolAllowed = false
-      const { container } = render(
-        <ToolItem
-          open={false}
-          isMCPTool
-          icon="https://example.com/icon.png"
-          toolLabel="Tool"
-        />,
-      )
-      // Should have opacity-30 class on the icon container (line 80)
-      const iconContainer = container.querySelector('.shrink-0.opacity-30')
-      expect(iconContainer).toBeInTheDocument()
-      mockMCPToolAllowed = true
-    })
-
-    it('should not have opacity-30 on icon when isMCPTool is false', () => {
-      mockMCPToolAllowed = true
-      const { container } = render(
-        <ToolItem
-          open={false}
-          isMCPTool={false}
-          icon="https://example.com/icon.png"
-          toolLabel="Tool"
-        />,
-      )
-      // Should NOT have opacity-30 when isShowCanNotChooseMCPTip is false
-      const iconContainer = container.querySelector('.shrink-0')
-      expect(iconContainer).toBeInTheDocument()
-      expect(iconContainer).not.toHaveClass('opacity-30')
-    })
-
-    it('should not have opacity-30 on icon when MCP allowed', () => {
-      mockMCPToolAllowed = true
-      const { container } = render(
-        <ToolItem
-          open={false}
-          isMCPTool={true}
-          icon="https://example.com/icon.png"
-          toolLabel="Tool"
-        />,
-      )
-      // Should NOT have opacity-30 when MCP is allowed
-      const iconContainer = container.querySelector('.shrink-0')
-      expect(iconContainer).toBeInTheDocument()
-      expect(iconContainer).not.toHaveClass('opacity-30')
-    })
-
-    it('should apply opacity-30 to default icon when isMCPTool and not allowed without icon', () => {
-      mockMCPToolAllowed = false
-      render(
-        <ToolItem
-          open={false}
-          isMCPTool
-          toolLabel="Tool"
-        />,
-      )
-      // Should have opacity-30 class on default icon container (lines 89-97)
-      expect(document.querySelector('.opacity-30')).toBeInTheDocument()
-      mockMCPToolAllowed = true
-    })
-
-    it('should show switch when showSwitch is true without MCP tip', () => {
-      const { container } = render(
-        <ToolItem
-          open={false}
-          showSwitch
-          toolLabel="Tool"
-        />,
-      )
-      // Switch wrapper should be rendered when showSwitch is true and no MCP tip
-      expect(container.querySelector('.mr-1')).toBeInTheDocument()
-    })
-
-    it('should show MCP tooltip instead of switch when isMCPTool and not allowed', () => {
-      mockMCPToolAllowed = false
-      render(
-        <ToolItem
-          open={false}
-          showSwitch
-          isMCPTool
-          toolLabel="Tool"
-        />,
-      )
-      // MCP tooltip should be rendered
-      expect(screen.getByTestId('mcp-not-support-tooltip')).toBeInTheDocument()
-      mockMCPToolAllowed = true
-    })
-  })
-
-  describe('Install/Upgrade Actions', () => {
-    it('should call onInstall when install button is clicked', () => {
-      const onInstall = vi.fn()
-      render(
-        <ToolItem
-          open={false}
-          uninstalled
-          installInfo="plugin@1.0.0"
-          onInstall={onInstall}
-          toolLabel="Tool"
-        />,
-      )
-
-      fireEvent.click(screen.getByTestId('install-plugin-btn'))
-      expect(onInstall).toHaveBeenCalled()
-    })
-
-    it('should call onInstall when version switch is clicked', () => {
-      const onInstall = vi.fn()
-      render(
-        <ToolItem
-          open={false}
-          versionMismatch
-          installInfo="plugin@1.0.0"
-          onInstall={onInstall}
-          toolLabel="Tool"
-        />,
-      )
-
-      fireEvent.click(screen.getByTestId('switch-version-btn'))
-      expect(onInstall).toHaveBeenCalled()
-    })
-  })
-})
-
-describe('ToolAuthorizationSection Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render null when currentProvider is undefined', () => {
-      const { container } = render(
-        <ToolAuthorizationSection
-          onAuthorizationItemClick={vi.fn()}
-        />,
-      )
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should render null when provider type is not builtIn', () => {
-      const provider = createToolWithProvider({ type: CollectionType.custom })
-      const { container } = render(
-        <ToolAuthorizationSection
-          currentProvider={provider}
-          onAuthorizationItemClick={vi.fn()}
-        />,
-      )
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should render null when allow_delete is false', () => {
-      const provider = createToolWithProvider({ allow_delete: false })
-      const { container } = render(
-        <ToolAuthorizationSection
-          currentProvider={provider}
-          onAuthorizationItemClick={vi.fn()}
-        />,
-      )
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should render when all conditions are met', () => {
-      const provider = createToolWithProvider({
-        type: CollectionType.builtIn,
-        allow_delete: true,
-      })
-      render(
-        <ToolAuthorizationSection
-          currentProvider={provider}
-          onAuthorizationItemClick={vi.fn()}
-        />,
-      )
-      expect(screen.getByTestId('plugin-auth-in-agent')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onAuthorizationItemClick when credential is selected', () => {
-      const onAuthorizationItemClick = vi.fn()
-      const provider = createToolWithProvider({
-        type: CollectionType.builtIn,
-        allow_delete: true,
-      })
-
-      render(
-        <ToolAuthorizationSection
-          currentProvider={provider}
-          onAuthorizationItemClick={onAuthorizationItemClick}
-        />,
-      )
-
-      fireEvent.click(screen.getByTestId('auth-item-click-btn'))
-      expect(onAuthorizationItemClick).toHaveBeenCalledWith('credential-123')
-    })
-  })
-})
-
-describe('ToolSettingsPanel Component', () => {
-  const defaultSettingsPanelProps = {
-    nodeId: 'node-1',
-    currType: 'settings' as const,
-    settingsFormSchemas: [createMockFormSchema('setting1')],
-    paramsFormSchemas: [],
-    settingsValue: {},
-    showTabSlider: false,
-    userSettingsOnly: true,
-    reasoningConfigOnly: false,
-    nodeOutputVars: [] as NodeOutPutVar[],
-    availableNodes: [] as Node[],
-    onCurrTypeChange: vi.fn(),
-    onSettingsFormChange: vi.fn(),
-    onParamsFormChange: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render null when no schemas and no authorization', () => {
-      const { container } = render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          settingsFormSchemas={[]}
-          paramsFormSchemas={[]}
-        />,
-      )
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should render null when not team authorized', () => {
-      const provider = createToolWithProvider({ is_team_authorization: false })
-      const { container } = render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          currentProvider={provider}
-        />,
-      )
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should render settings form when has settings schemas', () => {
-      const provider = createToolWithProvider({ is_team_authorization: true })
-      render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          currentProvider={provider}
-        />,
-      )
-      expect(screen.getByTestId('tool-form')).toBeInTheDocument()
-    })
-
-    it('should render tab slider when both settings and params exist', () => {
-      const provider = createToolWithProvider({ is_team_authorization: true })
-      const { container } = render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          currentProvider={provider}
-          settingsFormSchemas={[createMockFormSchema('setting1')]}
-          paramsFormSchemas={[createMockFormSchema('param1')]}
-          showTabSlider={true}
-          userSettingsOnly={false}
-        />,
-      )
-      // Tab slider should be rendered (px-4 is a common class in TabSlider)
-      expect(container.querySelector('.px-4')).toBeInTheDocument()
-    })
-
-    it('should render reasoning config form when params tab is active', () => {
-      const provider = createToolWithProvider({ is_team_authorization: true })
-      render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          currentProvider={provider}
-          currType="params"
-          paramsFormSchemas={[createMockFormSchema('param1')]}
-          reasoningConfigOnly={true}
-          userSettingsOnly={false}
-        />,
-      )
-      expect(screen.getByTestId('reasoning-config-form')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onSettingsFormChange when settings form changes', () => {
-      const onSettingsFormChange = vi.fn()
-      const provider = createToolWithProvider({ is_team_authorization: true })
-
-      render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          currentProvider={provider}
-          onSettingsFormChange={onSettingsFormChange}
-        />,
-      )
-
-      fireEvent.click(screen.getByTestId('change-settings-btn'))
-      expect(onSettingsFormChange).toHaveBeenCalledWith({ setting1: 'new-value' })
-    })
-
-    it('should call onParamsFormChange when params form changes', () => {
-      const onParamsFormChange = vi.fn()
-      const provider = createToolWithProvider({ is_team_authorization: true })
-
-      render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          currentProvider={provider}
-          currType="params"
-          paramsFormSchemas={[createMockFormSchema('param1')]}
-          reasoningConfigOnly={true}
-          userSettingsOnly={false}
-          onParamsFormChange={onParamsFormChange}
-        />,
-      )
-
-      fireEvent.click(screen.getByTestId('change-params-btn'))
-      expect(onParamsFormChange).toHaveBeenCalledWith({ param1: 'new-param' })
-    })
-  })
-
-  describe('Tab Navigation', () => {
-    it('should show params tips when params tab is active', () => {
-      const provider = createToolWithProvider({ is_team_authorization: true })
-      render(
-        <ToolSettingsPanel
-          {...defaultSettingsPanelProps}
-          currentProvider={provider}
-          currType="params"
-          settingsFormSchemas={[createMockFormSchema('setting1')]}
-          paramsFormSchemas={[createMockFormSchema('param1')]}
-          showTabSlider={true}
-          userSettingsOnly={false}
-        />,
-      )
-      // Params tips should be shown
-      expect(screen.getByText(/paramsTip1/i)).toBeInTheDocument()
-    })
-  })
-})
-
-describe('ToolBaseForm Component', () => {
-  const defaultBaseFormProps = {
-    isShowChooseTool: false,
-    hasTrigger: false,
-    onShowChange: vi.fn(),
-    onSelectTool: vi.fn(),
-    onSelectMultipleTool: vi.fn(),
-    onDescriptionChange: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<ToolBaseForm {...defaultBaseFormProps} />)
-      expect(screen.getByTestId('tool-picker')).toBeInTheDocument()
-    })
-
-    it('should render tool label text', () => {
-      render(<ToolBaseForm {...defaultBaseFormProps} />)
-      expect(screen.getByText(/toolLabel/i)).toBeInTheDocument()
-    })
-
-    it('should render description label text', () => {
-      render(<ToolBaseForm {...defaultBaseFormProps} />)
-      expect(screen.getByText(/descriptionLabel/i)).toBeInTheDocument()
-    })
-
-    it('should render tool picker component', () => {
-      render(<ToolBaseForm {...defaultBaseFormProps} />)
-      expect(screen.getByTestId('tool-picker')).toBeInTheDocument()
-    })
-
-    it('should render textarea for description', () => {
-      render(<ToolBaseForm {...defaultBaseFormProps} />)
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props Handling', () => {
-    it('should display description value in textarea', () => {
-      const value = createToolValue({ extra: { description: 'Test description' } })
-      render(<ToolBaseForm {...defaultBaseFormProps} value={value} />)
-
-      expect(screen.getByRole('textbox')).toHaveValue('Test description')
-    })
-
-    it('should disable textarea when no provider_name', () => {
-      const value = createToolValue({ provider_name: '' })
-      render(<ToolBaseForm {...defaultBaseFormProps} value={value} />)
-
-      expect(screen.getByRole('textbox')).toBeDisabled()
-    })
-
-    it('should enable textarea when provider_name exists', () => {
-      const value = createToolValue({ provider_name: 'test-provider' })
-      render(<ToolBaseForm {...defaultBaseFormProps} value={value} />)
-
-      expect(screen.getByRole('textbox')).not.toBeDisabled()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onDescriptionChange when textarea changes', async () => {
-      const onDescriptionChange = vi.fn()
-      const value = createToolValue()
-
-      render(
-        <ToolBaseForm
-          {...defaultBaseFormProps}
-          value={value}
-          onDescriptionChange={onDescriptionChange}
-        />,
-      )
-
-      const textarea = screen.getByRole('textbox')
-      fireEvent.change(textarea, { target: { value: 'new description' } })
-
-      expect(onDescriptionChange).toHaveBeenCalled()
-    })
-
-    it('should call onSelectTool when tool is selected', () => {
-      const onSelectTool = vi.fn()
-      render(
-        <ToolBaseForm
-          {...defaultBaseFormProps}
-          onSelectTool={onSelectTool}
-        />,
-      )
-
-      fireEvent.click(screen.getByTestId('select-tool-btn'))
-      expect(onSelectTool).toHaveBeenCalled()
-    })
-
-    it('should call onSelectMultipleTool when multiple tools are selected', () => {
-      const onSelectMultipleTool = vi.fn()
-      render(
-        <ToolBaseForm
-          {...defaultBaseFormProps}
-          onSelectMultipleTool={onSelectMultipleTool}
-        />,
-      )
-
-      fireEvent.click(screen.getByTestId('select-multiple-btn'))
-      expect(onSelectMultipleTool).toHaveBeenCalled()
-    })
-  })
-})
-
-describe('ToolSelector Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<ToolSelector {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should render ToolTrigger when no value and no trigger', () => {
-      const { container } = render(<ToolSelector {...defaultProps} />, { wrapper: createWrapper() })
-      // ToolTrigger should be rendered with its group class
-      expect(container.querySelector('.group')).toBeInTheDocument()
-    })
-
-    it('should render custom trigger when provided', () => {
-      render(
-        <ToolSelector
-          {...defaultProps}
-          trigger={<button data-testid="custom-trigger">Custom Trigger</button>}
-        />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByTestId('custom-trigger')).toBeInTheDocument()
-    })
-
-    it('should render panel content', () => {
-      render(<ToolSelector {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByTestId('popover-content')).toBeInTheDocument()
-    })
-
-    it('should render tool base form in panel', () => {
-      render(<ToolSelector {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByTestId('tool-picker')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should apply isEdit mode title', () => {
-      render(
-        <ToolSelector {...defaultProps} isEdit />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByText(/toolSetting/i)).toBeInTheDocument()
-    })
-
-    it('should apply default title when not in edit mode', () => {
-      render(
-        <ToolSelector {...defaultProps} isEdit={false} />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByText(/title/i)).toBeInTheDocument()
-    })
-
-    it('should pass nodeId to settings panel', () => {
-      render(
-        <ToolSelector {...defaultProps} nodeId="test-node-id" />,
-        { wrapper: createWrapper() },
-      )
-      // The component should receive and use the nodeId
-      expect(screen.getByTestId('popover-content')).toBeInTheDocument()
-    })
-  })
-
-  describe('Controlled Mode', () => {
-    it('should use controlledState when trigger is provided', () => {
-      const onControlledStateChange = vi.fn()
-      render(
-        <ToolSelector
-          {...defaultProps}
-          trigger={<button>Trigger</button>}
-          controlledState={true}
-          onControlledStateChange={onControlledStateChange}
-        />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'true')
-    })
-
-    it('should use internal state when no trigger', () => {
-      render(
-        <ToolSelector {...defaultProps} />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onSelect when tool is selected', () => {
-      const onSelect = vi.fn()
-      render(
-        <ToolSelector {...defaultProps} onSelect={onSelect} />,
-        { wrapper: createWrapper() },
-      )
-
-      fireEvent.click(screen.getByTestId('select-tool-btn'))
-      expect(onSelect).toHaveBeenCalled()
-    })
-
-    it('should call onSelectMultiple when multiple tools are selected', () => {
-      const onSelectMultiple = vi.fn()
-      render(
-        <ToolSelector {...defaultProps} onSelectMultiple={onSelectMultiple} />,
-        { wrapper: createWrapper() },
-      )
-
-      fireEvent.click(screen.getByTestId('select-multiple-btn'))
-      expect(onSelectMultiple).toHaveBeenCalled()
-    })
-
-    it('should pass onDelete prop to ToolItem', () => {
-      const onDelete = vi.fn()
-      const value = createToolValue()
-
-      const { container } = render(
-        <ToolSelector
-          {...defaultProps}
-          value={value}
-          onDelete={onDelete}
-        />,
-        { wrapper: createWrapper() },
-      )
-
-      // ToolItem should be rendered (it has a group class)
-      // The delete functionality is tested in ToolItem tests
-      expect(container.querySelector('.group')).toBeInTheDocument()
-    })
-
-    it('should not trigger when disabled', () => {
-      const onSelect = vi.fn()
-      render(
-        <ToolSelector {...defaultProps} disabled onSelect={onSelect} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Click on portal trigger
-      fireEvent.click(screen.getByTestId('popover-trigger'))
-      // State should not change when disabled
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
-    })
-  })
-
-  describe('Component Memoization', () => {
-    it('should be memoized with React.memo', () => {
-      // ToolSelector is wrapped with React.memo
-      // This test verifies the component doesn't re-render unnecessarily
-      const onSelect = vi.fn()
-      const { rerender } = render(
-        <ToolSelector {...defaultProps} onSelect={onSelect} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Re-render with same props
-      rerender(<ToolSelector {...defaultProps} onSelect={onSelect} />)
-
-      // Component should not trigger unnecessary re-renders
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-  })
-})
-
-// ==================== Edge Cases ====================
-
-describe('Edge Cases', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('ToolSelector with undefined values', () => {
-    it('should handle undefined value prop', () => {
-      render(
-        <ToolSelector {...defaultProps} value={undefined} />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should handle undefined selectedTools', () => {
-      render(
-        <ToolSelector {...defaultProps} selectedTools={undefined} />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should handle empty nodeOutputVars', () => {
-      render(
-        <ToolSelector {...defaultProps} nodeOutputVars={[]} />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should handle empty availableNodes', () => {
-      render(
-        <ToolSelector {...defaultProps} availableNodes={[]} />,
-        { wrapper: createWrapper() },
-      )
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-  })
-
-  describe('ToolItem with edge case props', () => {
-    it('should handle all error states combined', () => {
-      render(
-        <ToolItem
-          open={false}
-          isError
-          uninstalled
-          versionMismatch
-          noAuth
-          toolLabel="Tool"
-        />,
-      )
-      // Should show error state (highest priority)
-      expect(document.querySelector('.text-text-destructive')).toBeInTheDocument()
-    })
-
-    it('should handle empty provider name', () => {
-      render(
-        <ToolItem
-          open={false}
-          providerName=""
-          toolLabel="Tool"
-        />,
-      )
-      expect(screen.getByText('Tool')).toBeInTheDocument()
-    })
-
-    it('should handle special characters in tool label', () => {
-      render(
-        <ToolItem
-          open={false}
-          toolLabel="Tool <script>alert('xss')</script>"
-        />,
-      )
-      // Should render safely without XSS
-      expect(screen.getByText(/Tool/)).toBeInTheDocument()
-    })
-  })
-
-  describe('ToolBaseForm with edge case props', () => {
-    it('should handle undefined extra in value', () => {
-      const value = createToolValue({ extra: undefined })
-      render(
-        <ToolBaseForm
-          value={value}
-          isShowChooseTool={false}
-          hasTrigger={false}
-          onShowChange={vi.fn()}
-          onSelectTool={vi.fn()}
-          onSelectMultipleTool={vi.fn()}
-          onDescriptionChange={vi.fn()}
-        />,
-      )
-      expect(screen.getByRole('textbox')).toHaveValue('')
-    })
-
-    it('should handle empty description', () => {
-      const value = createToolValue({ extra: { description: '' } })
-      render(
-        <ToolBaseForm
-          value={value}
-          isShowChooseTool={false}
-          hasTrigger={false}
-          onShowChange={vi.fn()}
-          onSelectTool={vi.fn()}
-          onSelectMultipleTool={vi.fn()}
-          onDescriptionChange={vi.fn()}
-        />,
-      )
-      expect(screen.getByRole('textbox')).toHaveValue('')
-    })
-  })
-
-  describe('ToolSettingsPanel with edge case props', () => {
-    it('should handle empty schemas arrays', () => {
-      const { container } = render(
-        <ToolSettingsPanel
-          nodeId=""
-          currType="settings"
-          settingsFormSchemas={[]}
-          paramsFormSchemas={[]}
-          settingsValue={{}}
-          showTabSlider={false}
-          userSettingsOnly={false}
-          reasoningConfigOnly={false}
-          nodeOutputVars={[]}
-          availableNodes={[]}
-          onCurrTypeChange={vi.fn()}
-          onSettingsFormChange={vi.fn()}
-          onParamsFormChange={vi.fn()}
-        />,
-      )
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should handle undefined currentProvider', () => {
-      const { container } = render(
-        <ToolSettingsPanel
-          currentProvider={undefined}
-          nodeId="node-1"
-          currType="settings"
-          settingsFormSchemas={[createMockFormSchema('setting1')]}
-          paramsFormSchemas={[]}
-          settingsValue={{}}
-          showTabSlider={false}
-          userSettingsOnly={true}
-          reasoningConfigOnly={false}
-          nodeOutputVars={[]}
-          availableNodes={[]}
-          onCurrTypeChange={vi.fn()}
-          onSettingsFormChange={vi.fn()}
-          onParamsFormChange={vi.fn()}
-        />,
-      )
-      expect(container.firstChild).toBeNull()
-    })
-  })
-
-  describe('Hook edge cases', () => {
-    it('useToolSelectorState should handle undefined onSelectMultiple', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect, onSelectMultiple: undefined }),
-        { wrapper: createWrapper() },
-      )
-
-      // Should not throw when calling handleSelectMultipleTool
-      act(() => {
-        result.current.handleSelectMultipleTool([createToolDefaultValue()])
-      })
-
-      // Should complete without error
-      expect(result.current.isShow).toBe(false)
-    })
-
-    it('useToolSelectorState should handle empty description change', () => {
-      const onSelect = vi.fn()
-      const value = createToolValue()
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      act(() => {
-        result.current.handleDescriptionChange('')
-      })
-
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          extra: expect.objectContaining({ description: '' }),
-        }),
-      )
-    })
-  })
-})
-
-// ==================== SchemaModal Tests ====================
-
-describe('SchemaModal Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render modal with schema content', () => {
-      const mockSchema: SchemaRoot = {
-        type: Type.object,
-        properties: {
-          name: { type: Type.string },
-        },
-        additionalProperties: false,
-      }
-
-      render(
-        <SchemaModal
-          isShow={true}
-          schema={mockSchema}
-          rootName="TestSchema"
-          onClose={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByTestId('modal')).toBeInTheDocument()
-    })
-
-    it('should not render when isShow is false', () => {
-      const mockSchema: SchemaRoot = { type: Type.object, properties: {}, additionalProperties: false }
-
-      render(
-        <SchemaModal
-          isShow={false}
-          schema={mockSchema}
-          rootName="TestSchema"
-          onClose={vi.fn()}
-        />,
-      )
-
-      expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
-    })
-
-    it('should call onClose when close button is clicked', () => {
-      const onClose = vi.fn()
-      const mockSchema: SchemaRoot = { type: Type.object, properties: {}, additionalProperties: false }
-
-      render(
-        <SchemaModal
-          isShow={true}
-          schema={mockSchema}
-          rootName="TestSchema"
-          onClose={onClose}
-        />,
-      )
-
-      // Find and click close button (the one with absolute positioning)
-      const closeBtn = document.querySelector('.absolute')
-      if (closeBtn) {
-        fireEvent.click(closeBtn)
-        expect(onClose).toHaveBeenCalled()
-      }
-    })
-  })
-})
-
-// ==================== ToolCredentialsForm Tests ====================
-
-describe('ToolCredentialsForm Component', () => {
-  const mockCollection: Partial<Collection> = {
-    name: 'test-collection',
-    label: { en_US: 'Test Collection', zh_Hans: '测试集合' },
-    type: CollectionType.builtIn,
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render loading state initially', () => {
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={vi.fn()}
-        />,
-      )
-
-      // Should show loading initially (using role="status" from Loading component)
-      expect(screen.getByRole('status')).toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should render form after loading', async () => {
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={vi.fn()}
-        />,
-      )
-
-      // Wait for loading to complete
-      await waitFor(() => {
-        expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-      }, { timeout: 2000 })
-    })
-
-    it('should call onCancel when cancel button is clicked', async () => {
-      const onCancel = vi.fn()
-
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={onCancel}
-          onSaved={vi.fn()}
-        />,
-      )
-
-      // Wait for loading to complete and click cancel
-      await waitFor(() => {
-        const cancelBtn = screen.queryByText(/cancel/i)
-        if (cancelBtn) {
-          fireEvent.click(cancelBtn)
-          expect(onCancel).toHaveBeenCalled()
-        }
-      }, { timeout: 2000 })
-    })
-
-    it('should call onSaved when save button is clicked with valid data', async () => {
-      const onSaved = vi.fn()
-
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={onSaved}
-        />,
-      )
-
-      // Wait for loading to complete
-      await waitFor(() => {
-        expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-      }, { timeout: 2000 })
-
-      // Click save
-      const saveBtn = screen.getByText(/save/i)
-      fireEvent.click(saveBtn)
-
-      // onSaved should be called
-      expect(onSaved).toHaveBeenCalled()
-    })
-
-    it('should render fieldMoreInfo with url', async () => {
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={vi.fn()}
-        />,
-      )
-
-      // Wait for loading to complete
-      await waitFor(() => {
-        const fieldMoreInfo = screen.queryByTestId('field-more-info')
-        if (fieldMoreInfo) {
-          // Should render link for item with url
-          expect(fieldMoreInfo.querySelector('a')).toBeInTheDocument()
-        }
-      }, { timeout: 2000 })
-    })
-
-    it('should update form value when onChange is called', async () => {
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={vi.fn()}
-        />,
-      )
-
-      // Wait for form to load
-      await waitFor(() => {
-        expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-      }, { timeout: 2000 })
-
-      // Trigger onChange via mock form
-      const formInput = screen.getByTestId('form-input')
-      fireEvent.change(formInput, { target: { value: '{"api_key":"test"}' } })
-
-      // Verify form updated
-      expect(formInput).toHaveValue('{"api_key":"test"}')
-    })
-
-    it('should show error toast when required field is missing', async () => {
-      // Clear previous calls
-      mockToastNotify.mockClear()
-
-      // Setup mock to return required field
-      mockFetchBuiltInToolCredentialSchema.mockResolvedValueOnce([
-        { name: 'api_key', type: 'string', required: true, label: { en_US: 'API Key' } },
-      ])
-      mockFetchBuiltInToolCredential.mockResolvedValueOnce({})
-
-      const onSaved = vi.fn()
-
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={onSaved}
-        />,
-      )
-
-      // Wait for form to load
-      await waitFor(() => {
-        expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-      }, { timeout: 2000 })
-
-      // Click save without filling required field
-      const saveBtn = screen.getByText(/save/i)
-      fireEvent.click(saveBtn)
-
-      // notifyToast should have been called with error (lines 49-50)
-      expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
-      // onSaved should not be called because validation fails
-      expect(onSaved).not.toHaveBeenCalled()
-    })
-
-    it('should call onSaved when all required fields are filled', async () => {
-      // Setup mock to return required field with value
-      mockFetchBuiltInToolCredentialSchema.mockResolvedValueOnce([
-        { name: 'api_key', type: 'string', required: true, label: { en_US: 'API Key' } },
-      ])
-      mockFetchBuiltInToolCredential.mockResolvedValueOnce({ api_key: 'test-key' })
-
-      const onSaved = vi.fn()
-
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={onSaved}
-        />,
-      )
-
-      // Wait for form to load
-      await waitFor(() => {
-        expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-      }, { timeout: 2000 })
-
-      // Click save
-      const saveBtn = screen.getByText(/save/i)
-      fireEvent.click(saveBtn)
-
-      // onSaved should be called with credential data
-      expect(onSaved).toHaveBeenCalled()
-    })
-
-    it('should iterate through all credential schema fields on save', async () => {
-      // Setup mock with multiple fields including required ones
-      mockFetchBuiltInToolCredentialSchema.mockResolvedValueOnce([
-        { name: 'api_key', type: 'string', required: true, label: { en_US: 'API Key' } },
-        { name: 'secret', type: 'string', required: true, label: { en_US: 'Secret' } },
-        { name: 'optional_field', type: 'string', required: false, label: { en_US: 'Optional' } },
-      ])
-      mockFetchBuiltInToolCredential.mockResolvedValueOnce({ api_key: 'key', secret: 'secret' })
-
-      const onSaved = vi.fn()
-
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={onSaved}
-        />,
-      )
-
-      // Wait for form to load and click save
-      await waitFor(() => {
-        expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-      }, { timeout: 2000 })
-
-      const saveBtn = screen.getByText(/save/i)
-      fireEvent.click(saveBtn)
-
-      // onSaved should be called since all required fields are filled
-      await waitFor(() => {
-        expect(onSaved).toHaveBeenCalled()
-      })
-    })
-
-    it('should handle form onChange and update tempCredential state', async () => {
-      mockFetchBuiltInToolCredentialSchema.mockResolvedValueOnce([
-        { name: 'api_key', type: 'string', required: false, label: { en_US: 'API Key' } },
-      ])
-      mockFetchBuiltInToolCredential.mockResolvedValueOnce({})
-
-      render(
-        <ToolCredentialsForm
-          collection={mockCollection as Collection}
-          onCancel={vi.fn()}
-          onSaved={vi.fn()}
-        />,
-      )
-
-      // Wait for form to load
-      await waitFor(() => {
-        expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-      }, { timeout: 2000 })
-
-      // Trigger onChange via mock form
-      const formInput = screen.getByTestId('form-input')
-      fireEvent.change(formInput, { target: { value: '{"api_key":"new-value"}' } })
-
-      // The form should have updated
-      expect(formInput).toBeInTheDocument()
-    })
-  })
-})
-
-// ==================== Additional Coverage Tests ====================
-
-describe('Additional Coverage Tests', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('ToolItem Mouse Events', () => {
-    it('should set deleting state on mouse over', () => {
-      const { container } = render(
-        <ToolItem
-          open={false}
-          onDelete={vi.fn()}
-          toolLabel="Tool"
-        />,
-      )
-
-      const deleteBtn = container.querySelector('[class*="hover:text-text-destructive"]')
-      if (deleteBtn) {
-        fireEvent.mouseOver(deleteBtn)
-        // After mouseOver, the parent should have destructive border
-        // This tests line 113
-        const parentDiv = container.querySelector('.group')
-        expect(parentDiv).toBeInTheDocument()
-      }
-    })
-
-    it('should reset deleting state on mouse leave', () => {
-      const { container } = render(
-        <ToolItem
-          open={false}
-          onDelete={vi.fn()}
-          toolLabel="Tool"
-        />,
-      )
-
-      const deleteBtn = container.querySelector('[class*="hover:text-text-destructive"]')
-      if (deleteBtn) {
-        fireEvent.mouseOver(deleteBtn)
-        fireEvent.mouseLeave(deleteBtn)
-        // After mouseLeave, should reset
-        // This tests line 114
-        const parentDiv = container.querySelector('.group')
-        expect(parentDiv).toBeInTheDocument()
-      }
-    })
-
-    it('should stop propagation on install button click', () => {
-      const onInstall = vi.fn()
-      const parentClick = vi.fn()
-
-      render(
-        <div onClick={parentClick}>
-          <ToolItem
-            open={false}
-            uninstalled
-            installInfo="plugin@1.0.0"
-            onInstall={onInstall}
-            toolLabel="Tool"
-          />
-        </div>,
-      )
-
-      // The InstallPluginButton mock handles onClick with stopPropagation
-      fireEvent.click(screen.getByTestId('install-plugin-btn'))
-      expect(onInstall).toHaveBeenCalled()
-    })
-
-    it('should stop propagation on switch click', () => {
-      const parentClick = vi.fn()
-      const onSwitchChange = vi.fn()
-
-      render(
-        <div onClick={parentClick}>
-          <ToolItem
-            open={false}
-            showSwitch
-            switchValue={true}
-            onSwitchChange={onSwitchChange}
-            toolLabel="Tool"
-          />
-        </div>,
-      )
-
-      // Find and click on switch container
-      const switchContainer = document.querySelector('.mr-1')
-      expect(switchContainer).toBeInTheDocument()
-      if (switchContainer) {
-        fireEvent.click(switchContainer)
-        // Parent should not be called due to stopPropagation (line 120)
-        expect(parentClick).not.toHaveBeenCalled()
-      }
-    })
-  })
-
-  describe('useToolSelectorState with Provider Data', () => {
-    it('should compute currentToolSettings when provider exists', () => {
-      // Setup mock data with tools
-      const mockProvider = createToolWithProvider({
-        id: 'test-provider/tool',
-        tools: [
-          {
-            name: 'test-tool',
-            parameters: [
-              { name: 'setting1', form: 'user', label: { en_US: 'Setting 1', zh_Hans: '设置1' }, human_description: { en_US: '', zh_Hans: '' }, type: 'string', llm_description: '', required: false, multiple: false, default: '' },
-              { name: 'param1', form: 'llm', label: { en_US: 'Param 1', zh_Hans: '参数1' }, human_description: { en_US: '', zh_Hans: '' }, type: 'string', llm_description: '', required: false, multiple: false, default: '' },
-            ],
-          },
-        ],
-      })
-
-      // Temporarily modify mock data
-      mockBuildInTools!.push(mockProvider)
-
-      const onSelect = vi.fn()
-      const value = createToolValue({ provider_name: 'test-provider/tool', tool_name: 'test-tool' })
-
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Clean up
-      mockBuildInTools!.pop()
-
-      expect(result.current.currentToolSettings).toBeDefined()
-    })
-
-    it('should call handleInstall and invalidate caches', async () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      await act(async () => {
-        await result.current.handleInstall()
-      })
-
-      // handleInstall should complete without error
-      expect(result.current.isShow).toBe(false)
-    })
-
-    it('should return empty manifestIcon when manifest is null', () => {
-      mockManifestData = null
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Without manifest, should return empty string
-      expect(result.current.manifestIcon).toBe('')
-    })
-
-    it('should return manifestIcon URL when manifest exists', () => {
-      // Set manifest data
-      mockManifestData = {
-        data: {
-          plugin: {
-            plugin_id: 'test-plugin-id',
-            latest_package_identifier: 'test@1.0.0',
-          },
-        },
-      }
-
-      const onSelect = vi.fn()
-      const value = createToolValue({ provider_name: 'test/plugin' })
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // With manifest, should return icon URL - this covers line 103
-      expect(result.current.manifest).toBeDefined()
-
-      // Reset mock
-      mockManifestData = null
-    })
-
-    it('should handle tool selection with paramSchemas filtering', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      const toolWithSchemas: ToolDefaultValue = {
-        ...createToolDefaultValue(),
-        paramSchemas: [
-          { name: 'setting1', form: 'user', label: { en_US: 'Setting 1' }, human_description: { en_US: '' }, type: 'string', llm_description: '', required: false, multiple: false, default: '' },
-          { name: 'param1', form: 'llm', label: { en_US: 'Param 1' }, human_description: { en_US: '' }, type: 'string', llm_description: '', required: false, multiple: false, default: '' },
-        ],
-      }
-
-      act(() => {
-        result.current.handleSelectTool(toolWithSchemas)
-      })
-
-      expect(onSelect).toHaveBeenCalled()
-    })
-
-    it('should merge all tool types including customTools, workflowTools and mcpTools', () => {
-      // Setup all tool type mocks to cover lines 52-55
-      const buildInProvider = createToolWithProvider({
-        id: 'builtin-provider/tool',
-        name: 'builtin-provider',
-        type: CollectionType.builtIn,
-        tools: [{ name: 'builtin-tool', parameters: [] }],
-      })
-
-      const customProvider = createToolWithProvider({
-        id: 'custom-provider/tool',
-        name: 'custom-provider',
-        type: CollectionType.custom,
-        tools: [{ name: 'custom-tool', parameters: [] }],
-      })
-
-      const workflowProvider = createToolWithProvider({
-        id: 'workflow-provider/tool',
-        name: 'workflow-provider',
-        type: CollectionType.workflow,
-        tools: [{ name: 'workflow-tool', parameters: [] }],
-      })
-
-      const mcpProvider = createToolWithProvider({
-        id: 'mcp-provider/tool',
-        name: 'mcp-provider',
-        type: CollectionType.mcp,
-        tools: [{ name: 'mcp-tool', parameters: [] }],
-      })
-
-      // Set all mocks
-      mockBuildInTools = [buildInProvider]
-      mockCustomTools = [customProvider]
-      mockWorkflowTools = [workflowProvider]
-      mockMcpTools = [mcpProvider]
-
-      const onSelect = vi.fn()
-      const value = createToolValue({ provider_name: 'builtin-provider/tool', tool_name: 'builtin-tool' })
-
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Should find the builtin provider
-      expect(result.current.currentProvider).toBeDefined()
-
-      // Clean up
-      mockBuildInTools = []
-      mockCustomTools = []
-      mockWorkflowTools = []
-      mockMcpTools = []
-    })
-
-    it('should filter parameters correctly for settings and params', () => {
-      // Setup mock with tool that has both user and llm parameters
-      const mockProvider = createToolWithProvider({
-        id: 'test-provider/tool',
-        name: 'test-provider',
-        tools: [
-          {
-            name: 'test-tool',
-            label: { en_US: 'Test Tool' },
-            parameters: [
-              { name: 'setting1', form: 'user' },
-              { name: 'setting2', form: 'user' },
-              { name: 'param1', form: 'llm' },
-              { name: 'param2', form: 'llm' },
-            ],
-          },
-        ],
-      })
-
-      mockBuildInTools = [mockProvider]
-
-      const onSelect = vi.fn()
-      const value = createToolValue({ provider_name: 'test-provider/tool', tool_name: 'test-tool' })
-
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Verify currentToolSettings filters to user form only (lines 69-72)
-      expect(result.current.currentToolSettings).toBeDefined()
-      // Verify currentToolParams filters to llm form only (lines 78-81)
-      expect(result.current.currentToolParams).toBeDefined()
-
-      // Clean up
-      mockBuildInTools = []
-    })
-
-    it('should return empty arrays when currentProvider is undefined', () => {
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Without a provider, settings and params should be empty
-      expect(result.current.currentToolSettings).toEqual([])
-      expect(result.current.currentToolParams).toEqual([])
-    })
-
-    it('should handle null/undefined tool arrays with fallback', () => {
-      // Clear all mocks to undefined
-      mockBuildInTools = undefined
-      mockCustomTools = undefined
-      mockWorkflowTools = undefined
-      mockMcpTools = undefined
-
-      const onSelect = vi.fn()
-      const { result } = renderHook(
-        () => useToolSelectorState({ onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Should not crash and currentProvider should be undefined
-      expect(result.current.currentProvider).toBeUndefined()
-
-      // Reset mocks
-      mockBuildInTools = []
-      mockCustomTools = []
-      mockWorkflowTools = []
-      mockMcpTools = []
-    })
-
-    it('should handle tool not found in provider', () => {
-      // Setup mock with provider but wrong tool name
-      const mockProvider = {
-        id: 'test-provider/tool',
-        name: 'test-provider',
-        type: CollectionType.builtIn,
-        icon: 'icon',
-        is_team_authorization: true,
-        allow_delete: true,
-        tools: [
-          {
-            name: 'different-tool',
-            label: { en_US: 'Different Tool' },
-            parameters: [{ name: 'setting1', form: 'user' }],
-          },
-        ],
-      } as unknown as ToolWithProvider
-
-      mockBuildInTools = [mockProvider]
-
-      const onSelect = vi.fn()
-      // Use a tool_name that doesn't exist in the provider
-      const value = createToolValue({ provider_name: 'test-provider/tool', tool_name: 'non-existent-tool' })
-
-      const { result } = renderHook(
-        () => useToolSelectorState({ value, onSelect }),
-        { wrapper: createWrapper() },
-      )
-
-      // Provider should be found but tool should not
-      expect(result.current.currentProvider).toBeDefined()
-      expect(result.current.currentTool).toBeUndefined()
-      // Parameters should fallback to empty arrays due to || []
-      expect(result.current.currentToolSettings).toEqual([])
-      expect(result.current.currentToolParams).toEqual([])
-
-      // Clean up
-      mockBuildInTools = []
-    })
-  })
-
-  describe('ToolSettingsPanel Tab Change', () => {
-    it('should call onCurrTypeChange when tab is switched', () => {
-      const onCurrTypeChange = vi.fn()
-      const provider = createToolWithProvider({ is_team_authorization: true })
-
-      render(
-        <ToolSettingsPanel
-          currentProvider={provider}
-          nodeId="node-1"
-          currType="settings"
-          settingsFormSchemas={[createMockFormSchema('setting1')]}
-          paramsFormSchemas={[createMockFormSchema('param1')]}
-          settingsValue={{}}
-          showTabSlider={true}
-          userSettingsOnly={false}
-          reasoningConfigOnly={false}
-          nodeOutputVars={[]}
-          availableNodes={[]}
-          onCurrTypeChange={onCurrTypeChange}
-          onSettingsFormChange={vi.fn()}
-          onParamsFormChange={vi.fn()}
-        />,
-      )
-
-      // The TabSlider component should render
-      expect(document.querySelector('.space-x-6')).toBeInTheDocument()
-
-      // Find and click on the params tab to trigger onChange (line 87)
-      const paramsTab = screen.getByText(/params/i)
-      fireEvent.click(paramsTab)
-      expect(onCurrTypeChange).toHaveBeenCalledWith('params')
-    })
-
-    it('should handle tab change with different currType values', () => {
-      const onCurrTypeChange = vi.fn()
-      const provider = createToolWithProvider({ is_team_authorization: true })
-
-      const { rerender } = render(
-        <ToolSettingsPanel
-          currentProvider={provider}
-          nodeId="node-1"
-          currType="settings"
-          settingsFormSchemas={[createMockFormSchema('setting1')]}
-          paramsFormSchemas={[createMockFormSchema('param1')]}
-          settingsValue={{}}
-          showTabSlider={true}
-          userSettingsOnly={false}
-          reasoningConfigOnly={false}
-          nodeOutputVars={[]}
-          availableNodes={[]}
-          onCurrTypeChange={onCurrTypeChange}
-          onSettingsFormChange={vi.fn()}
-          onParamsFormChange={vi.fn()}
-        />,
-      )
-
-      // Rerender with params currType
-      rerender(
-        <ToolSettingsPanel
-          currentProvider={provider}
-          nodeId="node-1"
-          currType="params"
-          settingsFormSchemas={[createMockFormSchema('setting1')]}
-          paramsFormSchemas={[createMockFormSchema('param1')]}
-          settingsValue={{}}
-          showTabSlider={true}
-          userSettingsOnly={false}
-          reasoningConfigOnly={false}
-          nodeOutputVars={[]}
-          availableNodes={[]}
-          onCurrTypeChange={onCurrTypeChange}
-          onSettingsFormChange={vi.fn()}
-          onParamsFormChange={vi.fn()}
-        />,
-      )
-
-      // Now params tips should be visible
-      expect(screen.getByText(/paramsTip1/i)).toBeInTheDocument()
-    })
-  })
-
-  describe('ToolSelector Trigger Click Behavior', () => {
-    beforeEach(() => {
-      // Reset mock tools
-      mockBuildInTools = []
-    })
-
-    it('should not set isShow when disabled', () => {
-      render(
-        <ToolSelector {...defaultProps} disabled />,
-        { wrapper: createWrapper() },
-      )
-
-      // Click on the trigger
-      const trigger = screen.getByTestId('popover-trigger')
-      fireEvent.click(trigger)
-
-      // Should still be closed because disabled
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
-    })
-
-    it('should handle trigger click when provider and tool exist', () => {
-      // This requires mocking the tools data
-      render(
-        <ToolSelector {...defaultProps} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Without provider/tool, clicking should not open
-      const trigger = screen.getByTestId('popover-trigger')
-      fireEvent.click(trigger)
-
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
-    })
-
-    it('should early return from handleTriggerClick when disabled', () => {
-      // Test to ensure disabled state prevents opening
-      const { rerender } = render(
-        <ToolSelector {...defaultProps} disabled={false} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Rerender with disabled=true
-      rerender(<ToolSelector {...defaultProps} disabled={true} />)
-
-      const trigger = screen.getByTestId('popover-trigger')
-      fireEvent.click(trigger)
-
-      // Verify it stays closed
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
-    })
-
-    it('should set isShow when clicked with valid provider and tool', () => {
-      // Setup mock data to have matching provider/tool
-      const mockProvider = {
-        id: 'test-provider/tool',
-        name: 'test-provider',
-        type: CollectionType.builtIn,
-        icon: 'test-icon',
-        is_team_authorization: true,
-        allow_delete: true,
-        tools: [
-          {
-            name: 'test-tool',
-            label: { en_US: 'Test Tool' },
-            parameters: [],
-          },
-        ],
-      } as unknown as ToolWithProvider
-
-      mockBuildInTools = [mockProvider]
-
-      const value = createToolValue({
-        provider_name: 'test-provider/tool',
-        tool_name: 'test-tool',
-      })
-
-      render(
-        <ToolSelector {...defaultProps} value={value} disabled={false} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Click on the trigger - this should call handleTriggerClick
-      const trigger = screen.getByTestId('popover-trigger')
-      fireEvent.click(trigger)
-
-      // Now that we have provider and tool, the click should work
-      // This tests lines 106-108 and 148
-      expect(screen.getByTestId('popover')).toBeInTheDocument()
-    })
-
-    it('should not open when disabled is true even with valid provider', () => {
-      const mockProvider = {
-        id: 'test-provider/tool',
-        name: 'test-provider',
-        type: CollectionType.builtIn,
-        icon: 'test-icon',
-        is_team_authorization: true,
-        allow_delete: true,
-        tools: [
-          {
-            name: 'test-tool',
-            label: { en_US: 'Test Tool' },
-            parameters: [],
-          },
-        ],
-      } as unknown as ToolWithProvider
-
-      mockBuildInTools = [mockProvider]
-
-      const value = createToolValue({
-        provider_name: 'test-provider/tool',
-        tool_name: 'test-tool',
-      })
-
-      render(
-        <ToolSelector {...defaultProps} value={value} disabled={true} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Click should not open because disabled=true
-      const trigger = screen.getByTestId('popover-trigger')
-      fireEvent.click(trigger)
-
-      // Verify it stays closed due to disabled
-      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
-    })
-  })
-
-  describe('ToolTrigger Configure Mode', () => {
-    it('should show different icon based on isConfigure prop', () => {
-      const { rerender, container } = render(<ToolTrigger open={false} isConfigure={true} />)
-
-      // Should have equalizer icon when isConfigure is true
-      expect(container.querySelector('svg')).toBeInTheDocument()
-
-      rerender(<ToolTrigger open={false} isConfigure={false} />)
-      // Should have arrow down icon when isConfigure is false
-      expect(container.querySelector('svg')).toBeInTheDocument()
-    })
-  })
-})
-
-// ==================== Integration Tests ====================
-
-describe('Integration Tests', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Full Flow: Tool Selection', () => {
-    it('should complete full tool selection flow', async () => {
-      const onSelect = vi.fn()
-      render(
-        <ToolSelector {...defaultProps} onSelect={onSelect} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Click to select a tool
-      fireEvent.click(screen.getByTestId('select-tool-btn'))
-
-      // Verify onSelect was called with tool value
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          provider_name: expect.any(String),
-          tool_name: expect.any(String),
-        }),
-      )
-    })
-
-    it('should complete full multiple tool selection flow', async () => {
-      const onSelectMultiple = vi.fn()
-      render(
-        <ToolSelector {...defaultProps} onSelectMultiple={onSelectMultiple} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Click to select multiple tools
-      fireEvent.click(screen.getByTestId('select-multiple-btn'))
-
-      // Verify onSelectMultiple was called
-      expect(onSelectMultiple).toHaveBeenCalledWith(
-        expect.arrayContaining([
-          expect.objectContaining({
-            provider_name: expect.any(String),
-          }),
-        ]),
-      )
-    })
-  })
-
-  describe('Full Flow: Description Update', () => {
-    it('should update description through the form', async () => {
-      const onSelect = vi.fn()
-      const value = createToolValue()
-
-      render(
-        <ToolSelector {...defaultProps} value={value} onSelect={onSelect} />,
-        { wrapper: createWrapper() },
-      )
-
-      // Find and change the description textarea
-      const textarea = screen.getByRole('textbox')
-      fireEvent.change(textarea, { target: { value: 'Updated description' } })
-
-      // Verify onSelect was called with updated description
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({
-          extra: expect.objectContaining({
-            description: 'Updated description',
-          }),
-        }),
-      )
-    })
-  })
-})
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/index.spec.ts b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/index.spec.ts
deleted file mode 100644
index 3ff43c4fb6c..00000000000
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/index.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import {
-  SchemaModal,
-  ToolAuthorizationSection,
-  ToolBaseForm,
-  ToolCredentialsForm,
-  ToolItem,
-  ToolSettingsPanel,
-  ToolTrigger,
-} from '../index'
-
-describe('tool-selector components index', () => {
-  it('re-exports the tool selector components', () => {
-    expect(SchemaModal).toBeDefined()
-    expect(ToolAuthorizationSection).toBeDefined()
-    expect(ToolBaseForm).toBeDefined()
-    expect(ToolCredentialsForm).toBeDefined()
-    expect(ToolItem).toBeDefined()
-    expect(ToolSettingsPanel).toBeDefined()
-    expect(ToolTrigger).toBeDefined()
-  })
-})
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
deleted file mode 100644
index 2d50a2d2bf6..00000000000
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-vi.mock('@/hooks/use-i18n', () => ({
-  useRenderI18nObject: () => (obj: Record<string, string> | string) => typeof obj === 'string' ? obj : obj?.en_US || '',
-}))
-
-vi.mock('@langgenius/dify-ui/cn', () => ({
-  cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
-}))
-
-vi.mock('@langgenius/dify-ui/toast', () => ({
-  toast: Object.assign(vi.fn(), {
-    success: vi.fn(),
-    error: vi.fn(),
-    warning: vi.fn(),
-    info: vi.fn(),
-    dismiss: vi.fn(),
-    update: vi.fn(),
-    promise: vi.fn(),
-  }),
-}))
-
-const mockFormSchemas = [
-  { name: 'api_key', label: { en_US: 'API Key' }, type: 'secret-input', required: true },
-]
-
-vi.mock('@/app/components/tools/utils/to-form-schema', () => ({
-  addDefaultValue: (values: Record<string, unknown>) => values,
-  toolCredentialToFormSchemas: () => mockFormSchemas,
-}))
-
-vi.mock('@/service/tools', () => ({
-  fetchBuiltInToolCredential: vi.fn().mockResolvedValue({ api_key: 'sk-existing-key' }),
-  fetchBuiltInToolCredentialSchema: vi.fn().mockResolvedValue([]),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/model-modal/Form', () => ({
-  default: ({ value: _value, onChange }: { formSchemas: unknown[], value: Record<string, unknown>, onChange: (v: Record<string, unknown>) => void }) => (
-    <div data-testid="credential-form">
-      <input
-        data-testid="form-input"
-        onChange={e => onChange({ api_key: e.target.value })}
-      />
-    </div>
-  ),
-}))
-
-describe('ToolCredentialForm', () => {
-  let ToolCredentialForm: (typeof import('../tool-credentials-form'))['default']
-
-  beforeEach(async () => {
-    vi.clearAllMocks()
-    const mod = await import('../tool-credentials-form')
-    ToolCredentialForm = mod.default
-  })
-
-  it('should render loading state initially', async () => {
-    await act(async () => {
-      render(
-        <ToolCredentialForm
-          collection={{ id: 'test', name: 'Test', labels: [] } as never}
-          onCancel={vi.fn()}
-          onSaved={vi.fn()}
-        />,
-      )
-    })
-
-    // After act resolves async effects, form should be loaded
-    expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-  })
-
-  it('should render form after loading', async () => {
-    await act(async () => {
-      render(
-        <ToolCredentialForm
-          collection={{ id: 'test', name: 'Test', labels: [] } as never}
-          onCancel={vi.fn()}
-          onSaved={vi.fn()}
-        />,
-      )
-    })
-
-    expect(screen.getByTestId('credential-form')).toBeInTheDocument()
-  })
-
-  it('should call onCancel when cancel button clicked', async () => {
-    const mockOnCancel = vi.fn()
-    await act(async () => {
-      render(
-        <ToolCredentialForm
-          collection={{ id: 'test', name: 'Test', labels: [] } as never}
-          onCancel={mockOnCancel}
-          onSaved={vi.fn()}
-        />,
-      )
-    })
-
-    const cancelBtn = screen.getByText('common.operation.cancel')
-    fireEvent.click(cancelBtn)
-    expect(mockOnCancel).toHaveBeenCalled()
-  })
-
-  it('should call onSaved when save button clicked', async () => {
-    const mockOnSaved = vi.fn()
-    await act(async () => {
-      render(
-        <ToolCredentialForm
-          collection={{ id: 'test', name: 'Test', labels: [] } as never}
-          onCancel={vi.fn()}
-          onSaved={mockOnSaved}
-        />,
-      )
-    })
-
-    fireEvent.click(screen.getByText('common.operation.save'))
-    expect(mockOnSaved).toHaveBeenCalled()
-  })
-})
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/index.ts b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/index.ts
index f6a1401d5c9..c562ef1d71f 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/index.ts
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/index.ts
@@ -1,7 +1,7 @@
 export { default as SchemaModal } from './schema-modal'
 export { default as ToolAuthorizationSection } from './tool-authorization-section'
 export { default as ToolBaseForm } from './tool-base-form'
-export { default as ToolCredentialsForm } from './tool-credentials-form'
+
 export { default as ToolItem } from './tool-item'
 export { default as ToolSettingsPanel } from './tool-settings-panel'
 export { default as ToolTrigger } from './tool-trigger'
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
deleted file mode 100644
index 85f2b86569c..00000000000
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { Collection } from '@/app/components/tools/types'
-import type { ToolCredentialFormSchema } from '@/app/components/tools/utils/to-form-schema'
-import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
-import { toast } from '@langgenius/dify-ui/toast'
-import {
-  RiArrowRightUpLine,
-} from '@remixicon/react'
-import * as React from 'react'
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Loading from '@/app/components/base/loading'
-import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
-import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
-import { useRenderI18nObject } from '@/hooks/use-i18n'
-import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
-
-type Props = Readonly<{
-  collection: Collection
-  onCancel: () => void
-  onSaved: (value: Record<string, unknown>) => void
-}>
-
-const ToolCredentialForm: FC<Props> = ({
-  collection,
-  onCancel,
-  onSaved,
-}) => {
-  const getValueFromI18nObject = useRenderI18nObject()
-  const { t } = useTranslation()
-  const [credentialSchema, setCredentialSchema] = useState<ToolCredentialFormSchema[] | null>(null)
-  const { name: collectionName } = collection
-  const [tempCredential, setTempCredential] = React.useState<Record<string, unknown>>({})
-  useEffect(() => {
-    fetchBuiltInToolCredentialSchema(collectionName).then(async (res) => {
-      const toolCredentialSchemas = toolCredentialToFormSchemas(res)
-      const credentialValue = await fetchBuiltInToolCredential(collectionName)
-      setTempCredential(credentialValue)
-      const defaultCredentials = addDefaultValue(credentialValue, toolCredentialSchemas)
-      setCredentialSchema(toolCredentialSchemas)
-      setTempCredential(defaultCredentials)
-    })
-  }, [])
-
-  const handleSave = () => {
-    if (!credentialSchema)
-      return
-    for (const field of credentialSchema) {
-      if (field.required && !tempCredential[field.name]) {
-        toast.error(t('errorMsg.fieldRequired', {
-          ns: 'common',
-          field: getValueFromI18nObject(field.label),
-        }))
-        return
-      }
-    }
-    onSaved(tempCredential)
-  }
-
-  return (
-    <>
-      {!credentialSchema
-        ? <div className="pt-3"><Loading type="app" /></div>
-        : (
-            <>
-              <div className="max-h-[464px] overflow-y-auto px-4">
-                <Form
-                  value={tempCredential}
-                  onChange={(v) => {
-                    setTempCredential(v)
-                  }}
-                  formSchemas={credentialSchema}
-                  isEditMode={true}
-                  showOnVariableMap={{}}
-                  validating={false}
-                  inputClassName="bg-components-input-bg-normal hover:bg-components-input-bg-hover"
-                  fieldMoreInfo={item => item.url
-                    ? (
-                        <a
-                          href={item.url}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline-flex items-center text-xs text-text-accent"
-                        >
-                          {t('howToGet', { ns: 'tools' })}
-                          <RiArrowRightUpLine className="ml-1 size-3" />
-                        </a>
-                      )
-                    : null}
-                />
-              </div>
-              <div className={cn('mt-1 flex justify-end px-4')}>
-                <div className="flex space-x-2">
-                  <Button onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
-                  <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
-                </div>
-              </div>
-            </>
-          )}
-
-    </>
-  )
-}
-export default React.memo(ToolCredentialForm)
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/__tests__/index.spec.ts b/web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/__tests__/index.spec.ts
deleted file mode 100644
index 33a05be1b8c..00000000000
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/__tests__/index.spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { usePluginInstalledCheck, useToolSelectorState } from '../index'
-
-describe('tool-selector hooks index', () => {
-  it('re-exports the tool selector hooks', () => {
-    expect(usePluginInstalledCheck).toBeTypeOf('function')
-    expect(useToolSelectorState).toBeTypeOf('function')
-  })
-})
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts b/web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts
deleted file mode 100644
index fa874d01007..00000000000
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { usePluginInstalledCheck } from './use-plugin-installed-check'
-export { useToolSelectorState } from './use-tool-selector-state'
diff --git a/web/app/components/plugins/plugin-page/filter-management/__tests__/constant.spec.ts b/web/app/components/plugins/plugin-page/filter-management/__tests__/constant.spec.ts
deleted file mode 100644
index 7286ff549fd..00000000000
--- a/web/app/components/plugins/plugin-page/filter-management/__tests__/constant.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Category, Tag } from '../constant'
-import { describe, expect, it } from 'vitest'
-
-describe('filter-management constant types', () => {
-  it('accepts tag objects with binding counts', () => {
-    const tag: Tag = {
-      id: 'tag-1',
-      name: 'search',
-      type: 'plugin',
-      binding_count: 3,
-    }
-
-    expect(tag).toEqual({
-      id: 'tag-1',
-      name: 'search',
-      type: 'plugin',
-      binding_count: 3,
-    })
-  })
-
-  it('accepts supported category names', () => {
-    const category: Category = {
-      name: 'tool',
-      binding_count: 8,
-    }
-
-    expect(category).toEqual({
-      name: 'tool',
-      binding_count: 8,
-    })
-  })
-})
diff --git a/web/app/components/plugins/plugin-page/filter-management/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-page/filter-management/__tests__/index.spec.tsx
index 53a6c401fe6..bc9b2dcb671 100644
--- a/web/app/components/plugins/plugin-page/filter-management/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/__tests__/index.spec.tsx
@@ -1,6 +1,5 @@
-import type { Category, Tag } from '../constant'
 import type { FilterState } from '../index'
-import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { createContext, useContext } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -10,7 +9,6 @@ import CategoriesFilter from '../category-filter'
 // Import real components
 import FilterManagement from '../index'
 import SearchBox from '../search-box'
-import { useStore } from '../store'
 import TagFilter from '../tag-filter'
 
 // ==================== Mock Setup ====================
@@ -95,13 +93,14 @@ vi.mock('@langgenius/dify-ui/popover', () => ({
   }) => {
     const { open, onOpenChange } = useContext(MockPopoverContext)
     return (
-      <div
+      <button
+        type="button"
         data-testid="portal-trigger"
         onClick={() => onOpenChange?.(!open)}
         className={className}
       >
         {render ?? children}
-      </div>
+      </button>
     )
   },
   PopoverContent: ({ children, className }: {
@@ -129,232 +128,6 @@ const renderFilterManagement = (onFilterChange = vi.fn(), props?: Partial<React.
   return { ...result, onFilterChange }
 }
 
-// ==================== constant.ts Tests ====================
-describe('constant.ts - Type Definitions', () => {
-  it('should define Tag type correctly', () => {
-    // Arrange
-    const tag: Tag = {
-      id: 'test-id',
-      name: 'test-tag',
-      type: 'custom',
-      binding_count: 5,
-    }
-
-    // Assert
-    expect(tag.id).toBe('test-id')
-    expect(tag.name).toBe('test-tag')
-    expect(tag.type).toBe('custom')
-    expect(tag.binding_count).toBe(5)
-  })
-
-  it('should define Category type correctly', () => {
-    // Arrange
-    const category: Category = {
-      name: 'model',
-      binding_count: 10,
-    }
-
-    // Assert
-    expect(category.name).toBe('model')
-    expect(category.binding_count).toBe(10)
-  })
-
-  it('should enforce Category name as specific union type', () => {
-    // Arrange - Valid category names
-    const validNames: Array<Category['name']> = ['model', 'tool', 'extension', 'bundle']
-
-    // Assert
-    validNames.forEach((name) => {
-      const category: Category = { name, binding_count: 0 }
-      expect(['model', 'tool', 'extension', 'bundle']).toContain(category.name)
-    })
-  })
-})
-
-// ==================== store.ts Tests ====================
-describe('store.ts - Zustand Store', () => {
-  describe('Initial State', () => {
-    it('should have empty tagList initially', () => {
-      const { result } = renderHook(() => useStore(state => state.tagList))
-      expect(result.current).toEqual([])
-    })
-
-    it('should have empty categoryList initially', () => {
-      const { result } = renderHook(() => useStore(state => state.categoryList))
-      expect(result.current).toEqual([])
-    })
-
-    it('should have showTagManagementModal false initially', () => {
-      const { result } = renderHook(() => useStore(state => state.showTagManagementModal))
-      expect(result.current).toBe(false)
-    })
-
-    it('should have showCategoryManagementModal false initially', () => {
-      const { result } = renderHook(() => useStore(state => state.showCategoryManagementModal))
-      expect(result.current).toBe(false)
-    })
-  })
-
-  describe('setTagList', () => {
-    it('should update tagList', () => {
-      // Arrange
-      const mockTagList: Tag[] = [
-        { id: '1', name: 'tag1', type: 'custom', binding_count: 1 },
-        { id: '2', name: 'tag2', type: 'custom', binding_count: 2 },
-      ]
-
-      // Act
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setTagList(mockTagList)
-      })
-
-      // Assert
-      expect(result.current.tagList).toEqual(mockTagList)
-    })
-
-    it('should handle undefined tagList', () => {
-      // Arrange & Act
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setTagList(undefined)
-      })
-
-      // Assert
-      expect(result.current.tagList).toBeUndefined()
-    })
-
-    it('should handle empty tagList', () => {
-      // Arrange
-      const { result } = renderHook(() => useStore())
-
-      // First set some tags
-      act(() => {
-        result.current.setTagList([{ id: '1', name: 'tag1', type: 'custom', binding_count: 1 }])
-      })
-
-      // Act - Clear the list
-      act(() => {
-        result.current.setTagList([])
-      })
-
-      // Assert
-      expect(result.current.tagList).toEqual([])
-    })
-  })
-
-  describe('setCategoryList', () => {
-    it('should update categoryList', () => {
-      // Arrange
-      const mockCategoryList: Category[] = [
-        { name: 'model', binding_count: 5 },
-        { name: 'tool', binding_count: 10 },
-      ]
-
-      // Act
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setCategoryList(mockCategoryList)
-      })
-
-      // Assert
-      expect(result.current.categoryList).toEqual(mockCategoryList)
-    })
-
-    it('should handle undefined categoryList', () => {
-      // Arrange & Act
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setCategoryList(undefined)
-      })
-
-      // Assert
-      expect(result.current.categoryList).toBeUndefined()
-    })
-  })
-
-  describe('setShowTagManagementModal', () => {
-    it('should set showTagManagementModal to true', () => {
-      // Arrange & Act
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setShowTagManagementModal(true)
-      })
-
-      // Assert
-      expect(result.current.showTagManagementModal).toBe(true)
-    })
-
-    it('should set showTagManagementModal to false', () => {
-      // Arrange
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setShowTagManagementModal(true)
-      })
-
-      // Act
-      act(() => {
-        result.current.setShowTagManagementModal(false)
-      })
-
-      // Assert
-      expect(result.current.showTagManagementModal).toBe(false)
-    })
-  })
-
-  describe('setShowCategoryManagementModal', () => {
-    it('should set showCategoryManagementModal to true', () => {
-      // Arrange & Act
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setShowCategoryManagementModal(true)
-      })
-
-      // Assert
-      expect(result.current.showCategoryManagementModal).toBe(true)
-    })
-
-    it('should set showCategoryManagementModal to false', () => {
-      // Arrange
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setShowCategoryManagementModal(true)
-      })
-
-      // Act
-      act(() => {
-        result.current.setShowCategoryManagementModal(false)
-      })
-
-      // Assert
-      expect(result.current.showCategoryManagementModal).toBe(false)
-    })
-  })
-
-  describe('Store Isolation', () => {
-    it('should maintain separate state for each property', () => {
-      // Arrange
-      const mockTagList: Tag[] = [{ id: '1', name: 'tag1', type: 'custom', binding_count: 1 }]
-      const mockCategoryList: Category[] = [{ name: 'model', binding_count: 5 }]
-
-      // Act
-      const { result } = renderHook(() => useStore())
-      act(() => {
-        result.current.setTagList(mockTagList)
-        result.current.setCategoryList(mockCategoryList)
-        result.current.setShowTagManagementModal(true)
-        result.current.setShowCategoryManagementModal(false)
-      })
-
-      // Assert - All states are independent
-      expect(result.current.tagList).toEqual(mockTagList)
-      expect(result.current.categoryList).toEqual(mockCategoryList)
-      expect(result.current.showTagManagementModal).toBe(true)
-      expect(result.current.showCategoryManagementModal).toBe(false)
-    })
-  })
-})
-
 // ==================== search-box.tsx Tests ====================
 describe('SearchBox Component', () => {
   beforeEach(() => {
diff --git a/web/app/components/plugins/plugin-page/filter-management/__tests__/store.spec.ts b/web/app/components/plugins/plugin-page/filter-management/__tests__/store.spec.ts
deleted file mode 100644
index 26316e78e8a..00000000000
--- a/web/app/components/plugins/plugin-page/filter-management/__tests__/store.spec.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { useStore } from '../store'
-
-describe('filter-management store', () => {
-  beforeEach(() => {
-    // Reset store to default state
-    const { result } = renderHook(() => useStore())
-    act(() => {
-      result.current.setTagList([])
-      result.current.setCategoryList([])
-      result.current.setShowTagManagementModal(false)
-      result.current.setShowCategoryManagementModal(false)
-    })
-  })
-
-  it('should initialize with default values', () => {
-    const { result } = renderHook(() => useStore())
-
-    expect(result.current.tagList).toEqual([])
-    expect(result.current.categoryList).toEqual([])
-    expect(result.current.showTagManagementModal).toBe(false)
-    expect(result.current.showCategoryManagementModal).toBe(false)
-  })
-
-  it('should set tag list', () => {
-    const { result } = renderHook(() => useStore())
-    const tags = [{ name: 'tag1', label: { en_US: 'Tag 1' } }]
-
-    act(() => {
-      result.current.setTagList(tags as never[])
-    })
-
-    expect(result.current.tagList).toEqual(tags)
-  })
-
-  it('should set category list', () => {
-    const { result } = renderHook(() => useStore())
-    const categories = [{ name: 'cat1', label: { en_US: 'Cat 1' } }]
-
-    act(() => {
-      result.current.setCategoryList(categories as never[])
-    })
-
-    expect(result.current.categoryList).toEqual(categories)
-  })
-
-  it('should toggle tag management modal', () => {
-    const { result } = renderHook(() => useStore())
-
-    act(() => {
-      result.current.setShowTagManagementModal(true)
-    })
-    expect(result.current.showTagManagementModal).toBe(true)
-
-    act(() => {
-      result.current.setShowTagManagementModal(false)
-    })
-    expect(result.current.showTagManagementModal).toBe(false)
-  })
-
-  it('should toggle category management modal', () => {
-    const { result } = renderHook(() => useStore())
-
-    act(() => {
-      result.current.setShowCategoryManagementModal(true)
-    })
-    expect(result.current.showCategoryManagementModal).toBe(true)
-
-    act(() => {
-      result.current.setShowCategoryManagementModal(false)
-    })
-    expect(result.current.showCategoryManagementModal).toBe(false)
-  })
-
-  it('should handle undefined tag list', () => {
-    const { result } = renderHook(() => useStore())
-
-    act(() => {
-      result.current.setTagList(undefined)
-    })
-
-    expect(result.current.tagList).toBeUndefined()
-  })
-})
diff --git a/web/app/components/plugins/plugin-page/filter-management/constant.ts b/web/app/components/plugins/plugin-page/filter-management/constant.ts
deleted file mode 100644
index 80f786230c4..00000000000
--- a/web/app/components/plugins/plugin-page/filter-management/constant.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Tag = {
-  id: string
-  name: string
-  type: string
-  binding_count: number
-}
-
-export type Category = {
-  name: 'model' | 'tool' | 'extension' | 'bundle'
-  binding_count: number
-}
diff --git a/web/app/components/plugins/plugin-page/filter-management/store.ts b/web/app/components/plugins/plugin-page/filter-management/store.ts
deleted file mode 100644
index ccc5af97fd2..00000000000
--- a/web/app/components/plugins/plugin-page/filter-management/store.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { Category, Tag } from './constant'
-import { create } from 'zustand'
-
-type State = {
-  tagList: Tag[]
-  categoryList: Category[]
-  showTagManagementModal: boolean
-  showCategoryManagementModal: boolean
-}
-
-type Action = {
-  setTagList: (tagList?: Tag[]) => void
-  setCategoryList: (categoryList?: Category[]) => void
-  setShowTagManagementModal: (showTagManagementModal: boolean) => void
-  setShowCategoryManagementModal: (showCategoryManagementModal: boolean) => void
-}
-
-export const useStore = create<State & Action>(set => ({
-  tagList: [],
-  categoryList: [],
-  setTagList: tagList => set(() => ({ tagList })),
-  setCategoryList: categoryList => set(() => ({ categoryList })),
-  showTagManagementModal: false,
-  showCategoryManagementModal: false,
-  setShowTagManagementModal: showTagManagementModal => set(() => ({ showTagManagementModal })),
-  setShowCategoryManagementModal: showCategoryManagementModal => set(() => ({ showCategoryManagementModal })),
-}))
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
index bc3189d2de3..4597948ef7a 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
@@ -8,6 +8,7 @@ import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { createAccountProfileQueryClient } from '@/test/account-profile-query'
 import { PluginCategoryEnum, PluginSource } from '../../../types'
 import AutoUpdateSetting from '../index'
@@ -53,6 +54,32 @@ vi.mock('@/context/i18n', () => ({
   useGetLanguage: () => 'en-US',
 }))
 
+vi.mock('react-i18next', () => ({
+  useTranslation: (defaultNs?: string) => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      const ns = (options?.ns as string | undefined) ?? defaultNs
+      const params = { ...options }
+      delete params.ns
+      const suffix = Object.keys(params).length > 0 ? `:${JSON.stringify(params)}` : ''
+      return `${ns ? `${ns}.` : ''}${key}${suffix}`
+    },
+    i18n: {
+      language: 'en',
+      changeLanguage: vi.fn(),
+    },
+  }),
+  Trans: ({ i18nKey, components }: {
+    i18nKey: string
+    components?: Record<string, React.ReactElement>
+  }) => {
+    const setTimezone = components?.setTimezone
+    if (setTimezone)
+      return React.cloneElement(setTimezone, undefined, i18nKey)
+
+    return <span>{i18nKey}</span>
+  },
+}))
+
 // Mock plugins service
 const mockPluginsData: { plugins: PluginDetail[] } = { plugins: [] }
 vi.mock('@/service/use-plugins', () => ({
@@ -1330,8 +1357,10 @@ describe('auto-update-setting', () => {
 
         // Act
         render(<AutoUpdateSetting {...defaultProps} payload={payload} />)
+        fireEvent.click(screen.getByText('autoUpdate.changeTimezone'))
 
-        expect(screen.getByText('autoUpdate.changeTimezone')).toBeInTheDocument()
+        // Assert
+        expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.PREFERENCES })
       })
     })
 
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index 0b5a1f04421..d5b0361f89f 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -37,7 +37,7 @@ const SettingTimeZone: FC<{
     <button
       type="button"
       className="cursor-pointer border-none bg-transparent p-0 text-left body-xs-regular text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-      onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })}
+      onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PREFERENCES })}
     >
       {children}
     </button>
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/schema.ts b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/schema.ts
index 056f399a703..154341821ee 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/schema.ts
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/schema.ts
@@ -7,13 +7,13 @@ import { PipelineInputVarType } from '@/models/pipeline'
 
 export const TEXT_MAX_LENGTH = 256
 
-export const TransferMethod = z.enum([
+const TransferMethod = z.enum([
   'all',
   'local_file',
   'remote_url',
 ])
 
-export const SupportedFileTypes = z.enum([
+const SupportedFileTypes = z.enum([
   'image',
   'document',
   'video',
diff --git a/web/app/components/share/__tests__/utils.spec.ts b/web/app/components/share/__tests__/utils.spec.ts
deleted file mode 100644
index 1cf12f7508f..00000000000
--- a/web/app/components/share/__tests__/utils.spec.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { getInitialTokenV2, isTokenV1 } from '../utils'
-
-describe('utils', () => {
-  describe('isTokenV1', () => {
-    it('should return true when token has no version property', () => {
-      const token = { someKey: 'value' }
-      expect(isTokenV1(token)).toBe(true)
-    })
-
-    it('should return true when token.version is undefined', () => {
-      const token = { version: undefined }
-      expect(isTokenV1(token)).toBe(true)
-    })
-
-    it('should return true when token.version is null', () => {
-      const token = { version: null }
-      expect(isTokenV1(token)).toBe(true)
-    })
-
-    it('should return true when token.version is 0', () => {
-      const token = { version: 0 }
-      expect(isTokenV1(token)).toBe(true)
-    })
-
-    it('should return true when token.version is empty string', () => {
-      const token = { version: '' }
-      expect(isTokenV1(token)).toBe(true)
-    })
-
-    it('should return false when token has version 1', () => {
-      const token = { version: 1 }
-      expect(isTokenV1(token)).toBe(false)
-    })
-
-    it('should return false when token has version 2', () => {
-      const token = { version: 2 }
-      expect(isTokenV1(token)).toBe(false)
-    })
-
-    it('should return false when token has string version', () => {
-      const token = { version: '2' }
-      expect(isTokenV1(token)).toBe(false)
-    })
-
-    it('should handle empty object', () => {
-      const token = {}
-      expect(isTokenV1(token)).toBe(true)
-    })
-  })
-
-  describe('getInitialTokenV2', () => {
-    it('should return object with version 2', () => {
-      const token = getInitialTokenV2()
-      expect(token.version).toBe(2)
-    })
-
-    it('should return a new object each time', () => {
-      const token1 = getInitialTokenV2()
-      const token2 = getInitialTokenV2()
-      expect(token1).not.toBe(token2)
-    })
-
-    it('should return an object that can be modified without affecting future calls', () => {
-      const token1 = getInitialTokenV2()
-      token1.customField = 'test'
-      const token2 = getInitialTokenV2()
-      expect(token2.customField).toBeUndefined()
-    })
-  })
-})
diff --git a/web/app/components/share/utils.ts b/web/app/components/share/utils.ts
deleted file mode 100644
index 491433322d6..00000000000
--- a/web/app/components/share/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const isTokenV1 = (token: Record<string, any>) => {
-  return !token.version
-}
-
-export const getInitialTokenV2 = (): Record<string, any> => ({
-  version: 2,
-})
diff --git a/web/app/components/snippets/hooks/__tests__/use-create-snippet-from-selection.spec.tsx b/web/app/components/snippets/hooks/__tests__/use-create-snippet-from-selection.spec.tsx
deleted file mode 100644
index 2a50ce82a3c..00000000000
--- a/web/app/components/snippets/hooks/__tests__/use-create-snippet-from-selection.spec.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import type { ReactElement } from 'react'
-import type { Edge, Node } from '@/app/components/workflow/types'
-import type { SnippetCanvasData, SnippetInputField } from '@/models/snippet'
-import { act, renderHook } from '@testing-library/react'
-import { SNIPPET_INPUT_FIELD_NODE_ID } from '@/app/components/workflow/nodes/_base/hooks/snippet-input-field-vars'
-import { BlockEnum } from '@/app/components/workflow/types'
-import { PipelineInputVarType } from '@/models/pipeline'
-import { useCreateSnippetFromSelection } from '../use-create-snippet-from-selection'
-
-const mockHandleOpenCreateSnippetDialog = vi.fn()
-const mockHandleCloseCreateSnippetDialog = vi.fn()
-const mockHandleCreateSnippet = vi.fn()
-
-vi.mock('../use-create-snippet', () => ({
-  useCreateSnippet: () => ({
-    createSnippetMutation: {
-      isPending: false,
-    },
-    handleCloseCreateSnippetDialog: mockHandleCloseCreateSnippetDialog,
-    handleCreateSnippet: mockHandleCreateSnippet,
-    handleOpenCreateSnippetDialog: mockHandleOpenCreateSnippetDialog,
-    isCreateSnippetDialogOpen: true,
-    isCreatingSnippet: false,
-  }),
-}))
-
-type DialogProps = {
-  selectedGraph?: SnippetCanvasData
-  inputFields?: SnippetInputField[]
-}
-
-const createNode = (
-  id: string,
-  data: Record<string, unknown>,
-): Node => ({
-  id,
-  type: 'custom',
-  position: { x: 0, y: 0 },
-  width: 200,
-  height: 100,
-  data,
-} as unknown as Node)
-
-describe('useCreateSnippetFromSelection', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should convert environment, conversation, and system variables into snippet input fields', () => {
-    const selectedNodes = [
-      createNode('llm', {
-        type: BlockEnum.LLM,
-        prompt: [
-          '{{#env.API_KEY#}}',
-          '{{#conversation.user_name#}}',
-          '{{#sys.user_id#}}',
-          '{{#rag.query#}}',
-          '{{#source.result#}}',
-        ].join(' '),
-        model_selector: ['env', 'MODEL_NAME'],
-      }),
-    ]
-    const edges: Edge[] = []
-    const onClose = vi.fn()
-
-    const { result } = renderHook(() => useCreateSnippetFromSelection({
-      edges,
-      selectedNodes,
-      onClose,
-    }))
-
-    act(() => {
-      result.current.handleOpenCreateSnippet()
-    })
-
-    const dialogProps = (result.current.createSnippetDialog as ReactElement<DialogProps>).props
-
-    expect(dialogProps.inputFields).toEqual([
-      {
-        label: 'API_KEY',
-        variable: 'API_KEY',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-      {
-        label: 'user_name',
-        variable: 'user_name',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-      {
-        label: 'user_id',
-        variable: 'user_id',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-      {
-        label: 'result',
-        variable: 'result',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-      {
-        label: 'MODEL_NAME',
-        variable: 'MODEL_NAME',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-    ])
-    const nodeData = dialogProps.selectedGraph?.nodes[0]?.data as Record<string, unknown> | undefined
-
-    expect(nodeData?.prompt).toBe([
-      `{{#${SNIPPET_INPUT_FIELD_NODE_ID}.API_KEY#}}`,
-      `{{#${SNIPPET_INPUT_FIELD_NODE_ID}.user_name#}}`,
-      `{{#${SNIPPET_INPUT_FIELD_NODE_ID}.user_id#}}`,
-      '{{#rag.query#}}',
-      `{{#${SNIPPET_INPUT_FIELD_NODE_ID}.result#}}`,
-    ].join(' '))
-    expect(nodeData?.model_selector).toEqual([
-      SNIPPET_INPUT_FIELD_NODE_ID,
-      'MODEL_NAME',
-    ])
-    expect(onClose).toHaveBeenCalled()
-  })
-
-  it('should convert system variables used by if-else and variable aggregator nodes', () => {
-    const selectedNodes = [
-      createNode('llm', {
-        type: BlockEnum.LLM,
-        title: 'LLM',
-      }),
-      createNode('if-else', {
-        type: BlockEnum.IfElse,
-        cases: [{
-          case_id: 'case-1',
-          conditions: [{
-            id: 'condition-1',
-            variable_selector: ['sys', 'query'],
-            comparison_operator: 'contains',
-            value: 'hello',
-          }],
-        }],
-      }),
-      createNode('variable-aggregator', {
-        type: BlockEnum.VariableAggregator,
-        variables: [
-          ['sys', 'files'],
-          ['llm', 'text'],
-        ],
-        advanced_settings: {
-          group_enabled: true,
-          groups: [{
-            groupId: 'group-1',
-            group_name: 'Group1',
-            variables: [
-              ['sys', 'workflow_id'],
-            ],
-          }],
-        },
-      }),
-    ]
-    const onClose = vi.fn()
-
-    const { result } = renderHook(() => useCreateSnippetFromSelection({
-      edges: [],
-      selectedNodes,
-      onClose,
-    }))
-
-    act(() => {
-      result.current.handleOpenCreateSnippet()
-    })
-
-    const dialogProps = (result.current.createSnippetDialog as ReactElement<DialogProps>).props
-
-    expect(dialogProps.inputFields).toEqual([
-      {
-        label: 'query',
-        variable: 'query',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-      {
-        label: 'files',
-        variable: 'files',
-        type: PipelineInputVarType.multiFiles,
-        required: true,
-      },
-      {
-        label: 'workflow_id',
-        variable: 'workflow_id',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-    ])
-
-    const ifElseNode = dialogProps.selectedGraph?.nodes.find(node => node.id === 'if-else')
-    const aggregatorNode = dialogProps.selectedGraph?.nodes.find(node => node.id === 'variable-aggregator')
-    const ifElseData = ifElseNode?.data as Record<string, unknown>
-    const aggregatorData = aggregatorNode?.data as {
-      variables?: string[][]
-      advanced_settings?: { groups?: Array<{ variables?: string[][] }> }
-    }
-
-    expect(ifElseData.cases).toEqual([{
-      case_id: 'case-1',
-      conditions: [{
-        id: 'condition-1',
-        variable_selector: [SNIPPET_INPUT_FIELD_NODE_ID, 'query'],
-        comparison_operator: 'contains',
-        value: 'hello',
-      }],
-    }])
-    expect(aggregatorData.variables).toEqual([
-      [SNIPPET_INPUT_FIELD_NODE_ID, 'files'],
-      ['llm', 'text'],
-    ])
-    expect(aggregatorData.advanced_settings?.groups?.[0]?.variables).toEqual([
-      [SNIPPET_INPUT_FIELD_NODE_ID, 'workflow_id'],
-    ])
-  })
-
-  it('should keep #context# prompt placeholders when creating a snippet from workflow selection', () => {
-    const selectedNodes = [
-      createNode('llm', {
-        type: BlockEnum.LLM,
-        context: {
-          enabled: true,
-          variable_selector: ['code', 'result'],
-        },
-        prompt: '{{#context#}} {{#code.summary#}}',
-      }),
-    ]
-    const onClose = vi.fn()
-
-    const { result } = renderHook(() => useCreateSnippetFromSelection({
-      edges: [],
-      selectedNodes,
-      onClose,
-    }))
-
-    act(() => {
-      result.current.handleOpenCreateSnippet()
-    })
-
-    const dialogProps = (result.current.createSnippetDialog as ReactElement<DialogProps>).props
-    const nodeData = dialogProps.selectedGraph?.nodes[0]?.data as {
-      context?: {
-        enabled: boolean
-        variable_selector: string[]
-      }
-      prompt?: string
-    }
-
-    expect(dialogProps.inputFields).toEqual([
-      {
-        label: 'result',
-        variable: 'result',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-      {
-        label: 'summary',
-        variable: 'summary',
-        type: PipelineInputVarType.textInput,
-        required: true,
-      },
-    ])
-    expect(nodeData.context).toEqual({
-      enabled: true,
-      variable_selector: [SNIPPET_INPUT_FIELD_NODE_ID, 'result'],
-    })
-    expect(nodeData.prompt).toBe(`{{#context#}} {{#${SNIPPET_INPUT_FIELD_NODE_ID}.summary#}}`)
-  })
-})
diff --git a/web/app/components/snippets/hooks/use-create-snippet-from-selection.tsx b/web/app/components/snippets/hooks/use-create-snippet-from-selection.tsx
deleted file mode 100644
index dca3bb0a69d..00000000000
--- a/web/app/components/snippets/hooks/use-create-snippet-from-selection.tsx
+++ /dev/null
@@ -1,329 +0,0 @@
-import type { Edge, Node, ValueSelector } from '@/app/components/workflow/types'
-import type { SnippetCanvasData, SnippetInputField } from '@/models/snippet'
-import { useCallback, useState } from 'react'
-import { getNodesBounds } from 'reactflow'
-import CreateSnippetDialog from '@/app/components/snippets/create-snippet-dialog'
-import { SNIPPET_INPUT_FIELD_NODE_ID } from '@/app/components/workflow/nodes/_base/hooks/snippet-input-field-vars'
-import { PipelineInputVarType } from '@/models/pipeline'
-import { useCreateSnippet } from './use-create-snippet'
-
-const DEFAULT_SNIPPET_VIEWPORT = { x: 0, y: 0, zoom: 1 }
-const SNIPPET_VIEWPORT_WIDTH = 1200
-const SNIPPET_VIEWPORT_HEIGHT = 800
-const SNIPPET_VIEWPORT_PADDING = 160
-const VARIABLE_REFERENCE_REGEX = /\{\{#([^#{}]+)#\}\}/g
-const RESERVED_VARIABLE_PREFIXES = new Set(['rag'])
-
-const isRecord = (value: unknown): value is Record<string, unknown> => {
-  return !!value && typeof value === 'object' && !Array.isArray(value)
-}
-
-const isValueSelector = (value: unknown): value is ValueSelector => {
-  return Array.isArray(value)
-    && value.length > 0
-    && value.every(item => typeof item === 'string')
-}
-
-const isSelectorKey = (key?: string) => {
-  return key === 'selector' || !!key?.endsWith('_selector')
-}
-
-const isValueSelectorListKey = (key?: string) => {
-  return key === 'variables'
-}
-
-const isValueSelectorList = (value: unknown[]) => {
-  return value.length > 0 && value.every(isValueSelector)
-}
-
-const isContextPlaceholderSelector = (selector: ValueSelector) => {
-  return (selector.length === 1 && selector[0] === 'context')
-    || selector.at(-1) === '#context#'
-}
-
-const getCenteredViewport = (nodes: Node[]) => {
-  if (!nodes.length)
-    return DEFAULT_SNIPPET_VIEWPORT
-
-  const bounds = getNodesBounds(nodes)
-  if (!bounds.width || !bounds.height)
-    return DEFAULT_SNIPPET_VIEWPORT
-
-  const zoom = Math.min(
-    (SNIPPET_VIEWPORT_WIDTH - SNIPPET_VIEWPORT_PADDING * 2) / bounds.width,
-    (SNIPPET_VIEWPORT_HEIGHT - SNIPPET_VIEWPORT_PADDING * 2) / bounds.height,
-    1,
-  )
-  const centerX = bounds.x + bounds.width / 2
-  const centerY = bounds.y + bounds.height / 2
-
-  return {
-    x: SNIPPET_VIEWPORT_WIDTH / 2 - centerX * zoom,
-    y: SNIPPET_VIEWPORT_HEIGHT / 2 - centerY * zoom,
-    zoom,
-  }
-}
-
-const collectSelectorsFromText = (value: string, selectors: ValueSelector[]) => {
-  for (const match of value.matchAll(VARIABLE_REFERENCE_REGEX)) {
-    const variablePath = match[1]
-    if (!variablePath)
-      continue
-
-    const selector = variablePath.split('.').filter(Boolean)
-    if (selector.length > 0 && !isContextPlaceholderSelector(selector))
-      selectors.push(selector)
-  }
-}
-
-const collectVariableSelectors = (
-  value: unknown,
-  selectors: ValueSelector[],
-  key?: string,
-) => {
-  if (typeof value === 'string') {
-    collectSelectorsFromText(value, selectors)
-    return
-  }
-
-  if (Array.isArray(value)) {
-    if (isSelectorKey(key) && isValueSelector(value))
-      selectors.push(value)
-
-    if (isValueSelectorListKey(key) && isValueSelectorList(value)) {
-      value.forEach(selector => selectors.push(selector))
-      return
-    }
-
-    value.forEach(item => collectVariableSelectors(item, selectors))
-    return
-  }
-
-  if (!isRecord(value))
-    return
-
-  Object.entries(value).forEach(([currentKey, currentValue]) => {
-    collectVariableSelectors(currentValue, selectors, currentKey)
-  })
-}
-
-const isExternalVariableSelector = (
-  selector: ValueSelector,
-  selectedNodeIds: Set<string>,
-) => {
-  const nodeId = selector[0]
-  if (!nodeId)
-    return false
-
-  if (nodeId.startsWith('$'))
-    return false
-
-  if (isContextPlaceholderSelector(selector))
-    return false
-
-  if (selectedNodeIds.has(nodeId))
-    return false
-
-  return !RESERVED_VARIABLE_PREFIXES.has(nodeId)
-}
-
-const sanitizeInputFieldVariable = (variable: string) => {
-  const sanitized = variable.replace(/\W/g, '_')
-  if (!sanitized)
-    return 'input'
-
-  if (/^\d/.test(sanitized))
-    return `input_${sanitized}`
-
-  return sanitized
-}
-
-const getUniqueInputFieldVariable = (
-  selector: ValueSelector,
-  usedVariables: Set<string>,
-) => {
-  const baseVariable = sanitizeInputFieldVariable(selector.at(-1) ?? 'input')
-  let variable = baseVariable
-  let index = 2
-
-  while (usedVariables.has(variable)) {
-    variable = `${baseVariable}_${index}`
-    index += 1
-  }
-
-  usedVariables.add(variable)
-  return variable
-}
-
-const getInputFieldType = (selector: ValueSelector) => {
-  const variable = selector.at(-1)
-  if (variable === 'files')
-    return PipelineInputVarType.multiFiles
-
-  return PipelineInputVarType.textInput
-}
-
-const getExternalVariableInputFields = (
-  nodes: Node[],
-  selectedNodeIds: Set<string>,
-) => {
-  const selectors: ValueSelector[] = []
-  nodes.forEach(node => collectVariableSelectors(node.data, selectors))
-
-  const usedVariables = new Set<string>()
-  const fieldBySelector = new Map<string, SnippetInputField>()
-
-  selectors.forEach((selector) => {
-    if (!isExternalVariableSelector(selector, selectedNodeIds))
-      return
-
-    const selectorKey = selector.join('.')
-    if (fieldBySelector.has(selectorKey))
-      return
-
-    const variable = getUniqueInputFieldVariable(selector, usedVariables)
-    fieldBySelector.set(selectorKey, {
-      label: variable,
-      variable,
-      type: getInputFieldType(selector),
-      required: true,
-    })
-  })
-
-  return {
-    inputFields: [...fieldBySelector.values()],
-    selectorMap: new Map(
-      [...fieldBySelector.entries()].map(([selectorKey, field]) => [
-        selectorKey,
-        [SNIPPET_INPUT_FIELD_NODE_ID, field.variable] satisfies ValueSelector,
-      ]),
-    ),
-  }
-}
-
-const rewriteVariableReferences = (
-  value: unknown,
-  selectorMap: Map<string, ValueSelector>,
-  key?: string,
-): unknown => {
-  if (typeof value === 'string') {
-    return value.replace(VARIABLE_REFERENCE_REGEX, (match, variablePath: string) => {
-      const nextSelector = selectorMap.get(variablePath)
-      if (!nextSelector)
-        return match
-
-      return `{{#${nextSelector.join('.')}#}}`
-    })
-  }
-
-  if (Array.isArray(value)) {
-    if (isSelectorKey(key) && isValueSelector(value)) {
-      const nextSelector = selectorMap.get(value.join('.'))
-      if (nextSelector)
-        return nextSelector
-    }
-
-    if (isValueSelectorListKey(key) && isValueSelectorList(value)) {
-      return value.map((selector) => {
-        const nextSelector = selectorMap.get(selector.join('.'))
-        return nextSelector || selector
-      })
-    }
-
-    return value.map(item => rewriteVariableReferences(item, selectorMap))
-  }
-
-  if (!isRecord(value))
-    return value
-
-  return Object.fromEntries(
-    Object.entries(value).map(([currentKey, currentValue]) => [
-      currentKey,
-      rewriteVariableReferences(currentValue, selectorMap, currentKey),
-    ]),
-  )
-}
-
-const getSelectedSnippetGraph = (selectedNodes: Node[], edges: Edge[]) => {
-  const selectedNodeIds = new Set(selectedNodes.map(node => node.id))
-  const {
-    inputFields,
-    selectorMap,
-  } = getExternalVariableInputFields(selectedNodes, selectedNodeIds)
-  const nodes = selectedNodes.map(node => ({
-    ...node,
-    data: rewriteVariableReferences(node.data, selectorMap) as Node['data'],
-    selected: false,
-  }))
-
-  return {
-    graph: {
-      nodes,
-      edges: edges
-        .filter(edge => selectedNodeIds.has(edge.source) && selectedNodeIds.has(edge.target))
-        .map(edge => ({
-          ...edge,
-          selected: false,
-        })),
-      viewport: getCenteredViewport(nodes),
-    } satisfies SnippetCanvasData,
-    inputFields,
-  }
-}
-
-type UseCreateSnippetFromSelectionParams = {
-  edges: Edge[]
-  selectedNodes: Node[]
-  onClose: () => void
-}
-
-export const useCreateSnippetFromSelection = ({
-  edges,
-  selectedNodes,
-  onClose,
-}: UseCreateSnippetFromSelectionParams) => {
-  const [selectedSnippetGraph, setSelectedSnippetGraph] = useState<SnippetCanvasData>()
-  const [selectedSnippetInputFields, setSelectedSnippetInputFields] = useState<SnippetInputField[]>([])
-  const {
-    createSnippetMutation,
-    handleCloseCreateSnippetDialog,
-    handleCreateSnippet,
-    handleOpenCreateSnippetDialog,
-    isCreateSnippetDialogOpen,
-    isCreatingSnippet,
-  } = useCreateSnippet()
-
-  const handleOpenCreateSnippet = useCallback(() => {
-    const {
-      graph,
-      inputFields,
-    } = getSelectedSnippetGraph(selectedNodes, edges)
-    setSelectedSnippetGraph(graph)
-    setSelectedSnippetInputFields(inputFields)
-    handleOpenCreateSnippetDialog()
-    onClose()
-  }, [edges, handleOpenCreateSnippetDialog, onClose, selectedNodes])
-
-  const handleCloseCreateSnippet = useCallback(() => {
-    setSelectedSnippetGraph(undefined)
-    setSelectedSnippetInputFields([])
-    handleCloseCreateSnippetDialog()
-  }, [handleCloseCreateSnippetDialog])
-
-  const createSnippetDialog = (
-    <CreateSnippetDialog
-      isOpen={isCreateSnippetDialogOpen}
-      selectedGraph={selectedSnippetGraph}
-      inputFields={selectedSnippetInputFields}
-      isSubmitting={isCreatingSnippet || createSnippetMutation.isPending}
-      onClose={handleCloseCreateSnippet}
-      onConfirm={handleCreateSnippet}
-    />
-  )
-
-  return {
-    createSnippetDialog,
-    handleOpenCreateSnippet,
-    isCreateSnippetDialogOpen,
-  }
-}
diff --git a/web/app/components/tools/labels/__tests__/store.spec.ts b/web/app/components/tools/labels/__tests__/store.spec.ts
deleted file mode 100644
index c5d6a174cc1..00000000000
--- a/web/app/components/tools/labels/__tests__/store.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { Label } from '../constant'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { useStore } from '../store'
-
-describe('labels/store', () => {
-  beforeEach(() => {
-    // Reset store to initial state before each test
-    useStore.setState({ labelList: [] })
-  })
-
-  it('initializes with empty labelList', () => {
-    const state = useStore.getState()
-    expect(state.labelList).toEqual([])
-  })
-
-  it('sets labelList via setLabelList', () => {
-    const labels: Label[] = [
-      { name: 'search', label: 'Search' },
-      { name: 'agent', label: { en_US: 'Agent', zh_Hans: '代理' } },
-    ]
-    useStore.getState().setLabelList(labels)
-    expect(useStore.getState().labelList).toEqual(labels)
-  })
-
-  it('replaces existing labels with new list', () => {
-    const initial: Label[] = [{ name: 'old', label: 'Old' }]
-    useStore.getState().setLabelList(initial)
-    expect(useStore.getState().labelList).toEqual(initial)
-
-    const updated: Label[] = [{ name: 'new', label: 'New' }]
-    useStore.getState().setLabelList(updated)
-    expect(useStore.getState().labelList).toEqual(updated)
-  })
-
-  it('handles undefined argument (sets labelList to undefined)', () => {
-    const labels: Label[] = [{ name: 'test', label: 'Test' }]
-    useStore.getState().setLabelList(labels)
-    useStore.getState().setLabelList(undefined)
-    expect(useStore.getState().labelList).toBeUndefined()
-  })
-})
diff --git a/web/app/components/tools/labels/store.ts b/web/app/components/tools/labels/store.ts
deleted file mode 100644
index 2c57a51062e..00000000000
--- a/web/app/components/tools/labels/store.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Label } from './constant'
-import { create } from 'zustand'
-
-type State = {
-  labelList: Label[]
-}
-
-type Action = {
-  setLabelList: (labelList?: Label[]) => void
-}
-
-export const useStore = create<State & Action>(set => ({
-  labelList: [],
-  setLabelList: labelList => set(() => ({ labelList })),
-}))
diff --git a/web/app/components/workflow/block-selector/__tests__/use-check-vertical-scrollbar.spec.ts b/web/app/components/workflow/block-selector/__tests__/use-check-vertical-scrollbar.spec.ts
deleted file mode 100644
index a31d6035db3..00000000000
--- a/web/app/components/workflow/block-selector/__tests__/use-check-vertical-scrollbar.spec.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import type * as React from 'react'
-import { act, renderHook } from '@testing-library/react'
-import useCheckVerticalScrollbar from '../use-check-vertical-scrollbar'
-
-const resizeObserve = vi.fn()
-const resizeDisconnect = vi.fn()
-const mutationObserve = vi.fn()
-const mutationDisconnect = vi.fn()
-
-let resizeCallback: ResizeObserverCallback | null = null
-let mutationCallback: MutationCallback | null = null
-
-class MockResizeObserver implements ResizeObserver {
-  observe = resizeObserve
-  unobserve = vi.fn()
-  disconnect = resizeDisconnect
-
-  constructor(callback: ResizeObserverCallback) {
-    resizeCallback = callback
-  }
-}
-
-class MockMutationObserver implements MutationObserver {
-  observe = mutationObserve
-  disconnect = mutationDisconnect
-  takeRecords = vi.fn(() => [])
-
-  constructor(callback: MutationCallback) {
-    mutationCallback = callback
-  }
-}
-
-const setElementHeights = (element: HTMLElement, scrollHeight: number, clientHeight: number) => {
-  Object.defineProperty(element, 'scrollHeight', {
-    configurable: true,
-    value: scrollHeight,
-  })
-  Object.defineProperty(element, 'clientHeight', {
-    configurable: true,
-    value: clientHeight,
-  })
-}
-
-describe('useCheckVerticalScrollbar', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    resizeCallback = null
-    mutationCallback = null
-    vi.stubGlobal('ResizeObserver', MockResizeObserver)
-    vi.stubGlobal('MutationObserver', MockMutationObserver)
-  })
-
-  afterEach(() => {
-    vi.unstubAllGlobals()
-  })
-
-  it('should return false when the element ref is empty', () => {
-    const ref = { current: null } as React.RefObject<HTMLElement | null>
-
-    const { result } = renderHook(() => useCheckVerticalScrollbar(ref))
-
-    expect(result.current).toBe(false)
-    expect(resizeObserve).not.toHaveBeenCalled()
-    expect(mutationObserve).not.toHaveBeenCalled()
-  })
-
-  it('should detect the initial scrollbar state and react to observer updates', () => {
-    const element = document.createElement('div')
-    setElementHeights(element, 200, 100)
-    const ref = { current: element } as React.RefObject<HTMLElement | null>
-
-    const { result } = renderHook(() => useCheckVerticalScrollbar(ref))
-
-    expect(result.current).toBe(true)
-    expect(resizeObserve).toHaveBeenCalledWith(element)
-    expect(mutationObserve).toHaveBeenCalledWith(element, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-    })
-
-    setElementHeights(element, 100, 100)
-    act(() => {
-      resizeCallback?.([] as ResizeObserverEntry[], new MockResizeObserver(() => {}))
-    })
-
-    expect(result.current).toBe(false)
-
-    setElementHeights(element, 180, 100)
-    act(() => {
-      mutationCallback?.([] as MutationRecord[], new MockMutationObserver(() => {}))
-    })
-
-    expect(result.current).toBe(true)
-  })
-
-  it('should disconnect observers on unmount', () => {
-    const element = document.createElement('div')
-    setElementHeights(element, 120, 100)
-    const ref = { current: element } as React.RefObject<HTMLElement | null>
-
-    const { unmount } = renderHook(() => useCheckVerticalScrollbar(ref))
-    unmount()
-
-    expect(resizeDisconnect).toHaveBeenCalledTimes(1)
-    expect(mutationDisconnect).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts b/web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts
deleted file mode 100644
index e5c1f208fb8..00000000000
--- a/web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const useCheckVerticalScrollbar = (ref: React.RefObject<HTMLElement | null>) => {
-  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false)
-
-  useEffect(() => {
-    const elem = ref.current
-    if (!elem)
-      return
-
-    const checkScrollbar = () => {
-      setHasVerticalScrollbar(elem.scrollHeight > elem.clientHeight)
-    }
-
-    checkScrollbar()
-
-    const resizeObserver = new ResizeObserver(checkScrollbar)
-    resizeObserver.observe(elem)
-
-    const mutationObserver = new MutationObserver(checkScrollbar)
-    mutationObserver.observe(elem, { childList: true, subtree: true, characterData: true })
-
-    return () => {
-      resizeObserver.disconnect()
-      mutationObserver.disconnect()
-    }
-  }, [ref])
-
-  return hasVerticalScrollbar
-}
-
-export default useCheckVerticalScrollbar
diff --git a/web/app/components/workflow/hooks/__tests__/use-workflow-interactions.spec.tsx b/web/app/components/workflow/hooks/__tests__/use-workflow-interactions.spec.tsx
deleted file mode 100644
index 7f8dbe90672..00000000000
--- a/web/app/components/workflow/hooks/__tests__/use-workflow-interactions.spec.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import { act } from '@testing-library/react'
-import {
-  createLoopNode,
-  createNode,
-} from '../../__tests__/fixtures'
-import { renderWorkflowHook } from '../../__tests__/workflow-test-env'
-import { ControlMode } from '../../types'
-import {
-  useWorkflowInteractions,
-  useWorkflowMoveMode,
-  useWorkflowOrganize,
-  useWorkflowUpdate,
-  useWorkflowZoom,
-} from '../use-workflow-interactions'
-import * as workflowInteractionExports from '../use-workflow-interactions'
-
-const mockSetViewport = vi.hoisted(() => vi.fn())
-const mockSetNodes = vi.hoisted(() => vi.fn())
-const mockZoomIn = vi.hoisted(() => vi.fn())
-const mockZoomOut = vi.hoisted(() => vi.fn())
-const mockZoomTo = vi.hoisted(() => vi.fn())
-const mockFitView = vi.hoisted(() => vi.fn())
-const mockEventEmit = vi.hoisted(() => vi.fn())
-const mockHandleSelectionCancel = vi.hoisted(() => vi.fn())
-const mockHandleNodeCancelRunningStatus = vi.hoisted(() => vi.fn())
-const mockHandleEdgeCancelRunningStatus = vi.hoisted(() => vi.fn())
-const mockHandleSyncWorkflowDraft = vi.hoisted(() => vi.fn())
-const mockSaveStateToHistory = vi.hoisted(() => vi.fn())
-const mockGetLayoutForChildNodes = vi.hoisted(() => vi.fn())
-const mockGetLayoutByELK = vi.hoisted(() => vi.fn())
-const mockInitialNodes = vi.hoisted(() => vi.fn((nodes: unknown[], _edges: unknown[]) => nodes))
-const mockInitialEdges = vi.hoisted(() => vi.fn((edges: unknown[], _nodes: unknown[]) => edges))
-
-const runtimeState = vi.hoisted(() => ({
-  nodes: [] as ReturnType<typeof createNode>[],
-  edges: [] as { id: string, source: string, target: string }[],
-  nodesReadOnly: false,
-  workflowReadOnly: false,
-}))
-
-vi.mock('reactflow', () => ({
-  Position: { Left: 'left', Right: 'right', Top: 'top', Bottom: 'bottom' },
-  useStoreApi: () => ({
-    getState: () => ({
-      getNodes: () => runtimeState.nodes,
-      edges: runtimeState.edges,
-      setNodes: mockSetNodes,
-    }),
-    setState: vi.fn(),
-  }),
-  useReactFlow: () => ({
-    setViewport: mockSetViewport,
-    zoomIn: mockZoomIn,
-    zoomOut: mockZoomOut,
-    zoomTo: mockZoomTo,
-    fitView: mockFitView,
-  }),
-}))
-
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: () => ({
-    eventEmitter: {
-      emit: (...args: unknown[]) => mockEventEmit(...args),
-    },
-  }),
-}))
-
-vi.mock('../use-workflow', () => ({
-  useNodesReadOnly: () => ({
-    getNodesReadOnly: () => runtimeState.nodesReadOnly,
-    nodesReadOnly: runtimeState.nodesReadOnly,
-  }),
-  useWorkflowReadOnly: () => ({
-    getWorkflowReadOnly: () => runtimeState.workflowReadOnly,
-  }),
-}))
-
-vi.mock('../use-selection-interactions', () => ({
-  useSelectionInteractions: () => ({
-    handleSelectionCancel: (...args: unknown[]) => mockHandleSelectionCancel(...args),
-  }),
-}))
-
-vi.mock('../use-nodes-interactions-without-sync', () => ({
-  useNodesInteractionsWithoutSync: () => ({
-    handleNodeCancelRunningStatus: (...args: unknown[]) => mockHandleNodeCancelRunningStatus(...args),
-  }),
-}))
-
-vi.mock('../use-edges-interactions-without-sync', () => ({
-  useEdgesInteractionsWithoutSync: () => ({
-    handleEdgeCancelRunningStatus: (...args: unknown[]) => mockHandleEdgeCancelRunningStatus(...args),
-  }),
-}))
-
-vi.mock('../use-nodes-sync-draft', () => ({
-  useNodesSyncDraft: () => ({
-    handleSyncWorkflowDraft: (...args: unknown[]) => mockHandleSyncWorkflowDraft(...args),
-  }),
-}))
-
-vi.mock('../use-workflow-history', () => ({
-  useWorkflowHistory: () => ({
-    saveStateToHistory: (...args: unknown[]) => mockSaveStateToHistory(...args),
-  }),
-  WorkflowHistoryEvent: {
-    LayoutOrganize: 'LayoutOrganize',
-  },
-}))
-
-vi.mock('../../utils', async importOriginal => ({
-  ...(await importOriginal<typeof import('../../utils')>()),
-  initialNodes: (nodes: unknown[], edges: unknown[]) => mockInitialNodes(nodes, edges),
-  initialEdges: (edges: unknown[], nodes: unknown[]) => mockInitialEdges(edges, nodes),
-}))
-
-vi.mock('../../utils/elk-layout', async importOriginal => ({
-  ...(await importOriginal<typeof import('../../utils/elk-layout')>()),
-  getLayoutForChildNodes: (...args: unknown[]) => mockGetLayoutForChildNodes(...args),
-  getLayoutByELK: (...args: unknown[]) => mockGetLayoutByELK(...args),
-}))
-
-describe('use-workflow-interactions exports', () => {
-  it('re-exports the split workflow interaction hooks', () => {
-    expect(workflowInteractionExports.useWorkflowInteractions).toBeTypeOf('function')
-    expect(workflowInteractionExports.useWorkflowMoveMode).toBeTypeOf('function')
-    expect(workflowInteractionExports.useWorkflowOrganize).toBeTypeOf('function')
-    expect(workflowInteractionExports.useWorkflowZoom).toBeTypeOf('function')
-    expect(workflowInteractionExports.useWorkflowUpdate).toBeTypeOf('function')
-  })
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.useFakeTimers()
-    runtimeState.nodes = []
-    runtimeState.edges = []
-    runtimeState.nodesReadOnly = false
-    runtimeState.workflowReadOnly = false
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('useWorkflowInteractions should close debug panel and clear running status', () => {
-    const { result, store } = renderWorkflowHook(() => useWorkflowInteractions(), {
-      initialStoreState: {
-        showDebugAndPreviewPanel: true,
-        workflowRunningData: { task_id: 'task-1' } as never,
-      },
-    })
-
-    act(() => {
-      result.current.handleCancelDebugAndPreviewPanel()
-    })
-
-    expect(store.getState().showDebugAndPreviewPanel).toBe(false)
-    expect(store.getState().workflowRunningData).toBeUndefined()
-    expect(mockHandleNodeCancelRunningStatus).toHaveBeenCalled()
-    expect(mockHandleEdgeCancelRunningStatus).toHaveBeenCalled()
-  })
-
-  it('useWorkflowMoveMode should switch pointer and hand modes when editable', () => {
-    const { result, store } = renderWorkflowHook(() => useWorkflowMoveMode(), {
-      initialStoreState: {
-        controlMode: ControlMode.Pointer,
-      },
-    })
-
-    act(() => {
-      result.current.handleModeHand()
-    })
-    expect(store.getState().controlMode).toBe(ControlMode.Hand)
-    expect(mockHandleSelectionCancel).toHaveBeenCalled()
-
-    act(() => {
-      result.current.handleModePointer()
-    })
-    expect(store.getState().controlMode).toBe(ControlMode.Pointer)
-  })
-
-  it('useWorkflowOrganize should resize containers, layout nodes and sync draft', async () => {
-    runtimeState.nodes = [
-      createLoopNode({
-        id: 'loop-node',
-        width: 200,
-        height: 160,
-      }),
-      createNode({
-        id: 'loop-child',
-        parentId: 'loop-node',
-        position: { x: 20, y: 20 },
-        width: 100,
-        height: 60,
-      }),
-      createNode({
-        id: 'top-node',
-        position: { x: 400, y: 0 },
-      }),
-    ]
-    runtimeState.edges = []
-    mockGetLayoutForChildNodes.mockResolvedValue({
-      bounds: { minX: 0, minY: 0, maxX: 320, maxY: 220 },
-      nodes: new Map([
-        ['loop-child', { x: 40, y: 60, width: 100, height: 60 }],
-      ]),
-    })
-    mockGetLayoutByELK.mockResolvedValue({
-      nodes: new Map([
-        ['loop-node', { x: 10, y: 20, width: 360, height: 260, layer: 0 }],
-        ['top-node', { x: 500, y: 30, width: 240, height: 100, layer: 0 }],
-      ]),
-    })
-
-    const { result } = renderWorkflowHook(() => useWorkflowOrganize())
-
-    await act(async () => {
-      await result.current.handleLayout()
-    })
-    act(() => {
-      vi.runAllTimers()
-    })
-
-    expect(mockSetNodes).toHaveBeenCalledTimes(1)
-    const nextNodes = mockSetNodes.mock.calls[0]![0]
-    expect(nextNodes.find((node: { id: string }) => node.id === 'loop-node')).toEqual(expect.objectContaining({
-      width: expect.any(Number),
-      height: expect.any(Number),
-      position: { x: 10, y: 20 },
-    }))
-    expect(nextNodes.find((node: { id: string }) => node.id === 'loop-child')).toEqual(expect.objectContaining({
-      position: { x: 100, y: 120 },
-    }))
-    expect(mockSetViewport).toHaveBeenCalledWith({ x: 0, y: 0, zoom: 0.7 })
-    expect(mockSaveStateToHistory).toHaveBeenCalledWith('LayoutOrganize')
-    expect(mockHandleSyncWorkflowDraft).toHaveBeenCalled()
-  })
-
-  it('useWorkflowZoom should run zoom actions and sync draft when editable', () => {
-    const { result } = renderWorkflowHook(() => useWorkflowZoom())
-
-    act(() => {
-      result.current.handleFitView()
-      result.current.handleBackToOriginalSize()
-      result.current.handleSizeToHalf()
-      result.current.handleZoomOut()
-      result.current.handleZoomIn()
-    })
-
-    expect(mockFitView).toHaveBeenCalled()
-    expect(mockZoomTo).toHaveBeenCalledWith(1)
-    expect(mockZoomTo).toHaveBeenCalledWith(0.5)
-    expect(mockZoomOut).toHaveBeenCalled()
-    expect(mockZoomIn).toHaveBeenCalled()
-    expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(5)
-  })
-
-  it('should skip move, zoom and organize actions when read-only', async () => {
-    runtimeState.nodesReadOnly = true
-    runtimeState.workflowReadOnly = true
-    runtimeState.nodes = [createNode({ id: 'n1' })]
-
-    const moveMode = renderWorkflowHook(() => useWorkflowMoveMode(), {
-      initialStoreState: { controlMode: ControlMode.Pointer },
-    })
-    const zoom = renderWorkflowHook(() => useWorkflowZoom())
-    const organize = renderWorkflowHook(() => useWorkflowOrganize())
-
-    act(() => {
-      moveMode.result.current.handleModeHand()
-      moveMode.result.current.handleModePointer()
-      zoom.result.current.handleFitView()
-    })
-    await act(async () => {
-      await organize.result.current.handleLayout()
-    })
-
-    expect(moveMode.store.getState().controlMode).toBe(ControlMode.Pointer)
-    expect(mockHandleSelectionCancel).not.toHaveBeenCalled()
-    expect(mockFitView).not.toHaveBeenCalled()
-    expect(mockSetViewport).not.toHaveBeenCalled()
-  })
-
-  it('useWorkflowUpdate should emit initialized data and only set valid viewport', () => {
-    const { result } = renderWorkflowHook(() => useWorkflowUpdate())
-
-    act(() => {
-      result.current.handleUpdateWorkflowCanvas({
-        nodes: [createNode({ id: 'n1' })],
-        edges: [],
-        viewport: { x: 10, y: 20, zoom: 0.5 },
-      } as never)
-      result.current.handleUpdateWorkflowCanvas({
-        nodes: [],
-        edges: [],
-        viewport: { x: 'bad' } as never,
-      })
-    })
-
-    expect(mockInitialNodes).toHaveBeenCalled()
-    expect(mockInitialEdges).toHaveBeenCalled()
-    expect(mockEventEmit).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'WORKFLOW_DATA_UPDATE',
-    }))
-    expect(mockSetViewport).toHaveBeenCalledTimes(1)
-    expect(mockSetViewport).toHaveBeenCalledWith({ x: 10, y: 20, zoom: 0.5 })
-  })
-})
diff --git a/web/app/components/workflow/hooks/__tests__/use-workflow-zoom.spec.ts b/web/app/components/workflow/hooks/__tests__/use-workflow-zoom.spec.ts
deleted file mode 100644
index 83bc1b27ad1..00000000000
--- a/web/app/components/workflow/hooks/__tests__/use-workflow-zoom.spec.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { useWorkflowZoom } from '../use-workflow-zoom'
-
-const {
-  mockFitView,
-  mockZoomIn,
-  mockZoomOut,
-  mockZoomTo,
-  mockHandleSyncWorkflowDraft,
-  runtimeState,
-} = vi.hoisted(() => ({
-  mockFitView: vi.fn(),
-  mockZoomIn: vi.fn(),
-  mockZoomOut: vi.fn(),
-  mockZoomTo: vi.fn(),
-  mockHandleSyncWorkflowDraft: vi.fn(),
-  runtimeState: {
-    workflowReadOnly: false,
-  },
-}))
-
-vi.mock('reactflow', () => ({
-  useReactFlow: () => ({
-    fitView: mockFitView,
-    zoomIn: mockZoomIn,
-    zoomOut: mockZoomOut,
-    zoomTo: mockZoomTo,
-  }),
-}))
-
-vi.mock('../use-nodes-sync-draft', () => ({
-  useNodesSyncDraft: () => ({
-    handleSyncWorkflowDraft: (...args: unknown[]) => mockHandleSyncWorkflowDraft(...args),
-  }),
-}))
-
-vi.mock('../use-workflow', () => ({
-  useWorkflowReadOnly: () => ({
-    getWorkflowReadOnly: () => runtimeState.workflowReadOnly,
-  }),
-}))
-
-describe('useWorkflowZoom', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    runtimeState.workflowReadOnly = false
-  })
-
-  it('runs zoom actions and syncs the workflow draft when editable', () => {
-    const { result } = renderHook(() => useWorkflowZoom())
-
-    act(() => {
-      result.current.handleFitView()
-      result.current.handleBackToOriginalSize()
-      result.current.handleSizeToHalf()
-      result.current.handleZoomOut()
-      result.current.handleZoomIn()
-    })
-
-    expect(mockFitView).toHaveBeenCalledTimes(1)
-    expect(mockZoomTo).toHaveBeenCalledWith(1)
-    expect(mockZoomTo).toHaveBeenCalledWith(0.5)
-    expect(mockZoomOut).toHaveBeenCalledTimes(1)
-    expect(mockZoomIn).toHaveBeenCalledTimes(1)
-    expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledTimes(5)
-  })
-
-  it('blocks zoom actions when the workflow is read-only', () => {
-    runtimeState.workflowReadOnly = true
-    const { result } = renderHook(() => useWorkflowZoom())
-
-    act(() => {
-      result.current.handleFitView()
-      result.current.handleBackToOriginalSize()
-      result.current.handleSizeToHalf()
-      result.current.handleZoomOut()
-      result.current.handleZoomIn()
-    })
-
-    expect(mockFitView).not.toHaveBeenCalled()
-    expect(mockZoomTo).not.toHaveBeenCalled()
-    expect(mockZoomOut).not.toHaveBeenCalled()
-    expect(mockZoomIn).not.toHaveBeenCalled()
-    expect(mockHandleSyncWorkflowDraft).not.toHaveBeenCalled()
-  })
-})
diff --git a/web/app/components/workflow/hooks/use-workflow-interactions.ts b/web/app/components/workflow/hooks/use-workflow-interactions.ts
index a13437ad049..e806a293a4e 100644
--- a/web/app/components/workflow/hooks/use-workflow-interactions.ts
+++ b/web/app/components/workflow/hooks/use-workflow-interactions.ts
@@ -2,4 +2,3 @@
 export { useWorkflowOrganize } from './use-workflow-organize'
 export { useWorkflowInteractions, useWorkflowMoveMode } from './use-workflow-panel-interactions'
 export { useWorkflowUpdate } from './use-workflow-update'
-export { useWorkflowZoom } from './use-workflow-zoom'
diff --git a/web/app/components/workflow/hooks/use-workflow-zoom.ts b/web/app/components/workflow/hooks/use-workflow-zoom.ts
deleted file mode 100644
index f814b624c20..00000000000
--- a/web/app/components/workflow/hooks/use-workflow-zoom.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useCallback } from 'react'
-import { useReactFlow } from 'reactflow'
-import { useNodesSyncDraft } from './use-nodes-sync-draft'
-import { useWorkflowReadOnly } from './use-workflow'
-
-export const useWorkflowZoom = () => {
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
-  const { getWorkflowReadOnly } = useWorkflowReadOnly()
-  const {
-    zoomIn,
-    zoomOut,
-    zoomTo,
-    fitView,
-  } = useReactFlow()
-
-  const runZoomAction = useCallback((action: () => void) => {
-    if (getWorkflowReadOnly())
-      return
-
-    action()
-    handleSyncWorkflowDraft()
-  }, [getWorkflowReadOnly, handleSyncWorkflowDraft])
-
-  return {
-    handleFitView: useCallback(() => runZoomAction(fitView), [fitView, runZoomAction]),
-    handleBackToOriginalSize: useCallback(() => runZoomAction(() => zoomTo(1)), [runZoomAction, zoomTo]),
-    handleSizeToHalf: useCallback(() => runZoomAction(() => zoomTo(0.5)), [runZoomAction, zoomTo]),
-    handleZoomOut: useCallback(() => runZoomAction(zoomOut), [runZoomAction, zoomOut]),
-    handleZoomIn: useCallback(() => runZoomAction(zoomIn), [runZoomAction, zoomIn]),
-  }
-}
diff --git a/web/app/components/workflow/nodes/_base/components/input-field/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/input-field/__tests__/index.spec.tsx
deleted file mode 100644
index 38736c573d6..00000000000
--- a/web/app/components/workflow/nodes/_base/components/input-field/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import Add from '../add'
-import InputField from '../index'
-
-describe('InputField', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // The placeholder field should render its title, body, and add action.
-  describe('Rendering', () => {
-    it('should render the default field title and content', () => {
-      render(<InputField />)
-
-      expect(screen.getAllByText('input field')).toHaveLength(2)
-      expect(screen.getByRole('button')).toBeInTheDocument()
-    })
-
-    it('should render the standalone add action button', () => {
-      const { container } = render(<Add />)
-
-      expect(screen.getByRole('button')).toBeInTheDocument()
-      expect(container.querySelector('svg')).not.toBeNull()
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/_base/components/input-field/add.tsx b/web/app/components/workflow/nodes/_base/components/input-field/add.tsx
deleted file mode 100644
index aca1f4c0b49..00000000000
--- a/web/app/components/workflow/nodes/_base/components/input-field/add.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { RiAddLine } from '@remixicon/react'
-import ActionButton from '@/app/components/base/action-button'
-
-const Add = () => {
-  return (
-    <ActionButton>
-      <RiAddLine className="size-4" />
-    </ActionButton>
-  )
-}
-
-export default Add
diff --git a/web/app/components/workflow/nodes/_base/components/input-field/index.tsx b/web/app/components/workflow/nodes/_base/components/input-field/index.tsx
deleted file mode 100644
index 829133e52a7..00000000000
--- a/web/app/components/workflow/nodes/_base/components/input-field/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { BoxGroupField } from '@/app/components/workflow/nodes/_base/components/layout'
-import Add from './add'
-
-const InputField = () => {
-  return (
-    <BoxGroupField
-      fieldProps={{
-        supportCollapse: true,
-        fieldTitleProps: {
-          title: 'input field',
-          operation: <Add />,
-        },
-      }}
-      boxGroupProps={{
-        boxProps: {
-          withBorderBottom: true,
-        },
-      }}
-    >
-      input field
-    </BoxGroupField>
-  )
-}
-export default InputField
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/__tests__/index.spec.tsx
deleted file mode 100644
index 1c68990d349..00000000000
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { PromptEditorProps } from '@/app/components/base/prompt-editor'
-import type {
-  Node,
-  NodeOutPutVar,
-} from '@/app/components/workflow/types'
-import { render } from '@testing-library/react'
-import { BlockEnum } from '@/app/components/workflow/types'
-import MixedVariableTextInput from '../index'
-
-let capturedPromptEditorProps: PromptEditorProps[] = []
-
-vi.mock('@/app/components/base/prompt-editor', () => ({
-  default: ({
-    editable,
-    value,
-    workflowVariableBlock,
-    onChange,
-  }: PromptEditorProps) => {
-    capturedPromptEditorProps.push({
-      editable,
-      value,
-      onChange,
-      workflowVariableBlock,
-    })
-
-    return (
-      <div data-testid="prompt-editor">
-        <div data-testid="editable-flag">{editable ? 'editable' : 'readonly'}</div>
-        <div data-testid="value-flag">{value || 'empty'}</div>
-        <button type="button" onClick={() => onChange?.('updated text')}>trigger-change</button>
-      </div>
-    )
-  },
-}))
-
-describe('MixedVariableTextInput', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    capturedPromptEditorProps = []
-  })
-
-  it('should pass workflow variable metadata to the prompt editor and include system variables for start nodes', () => {
-    const nodesOutputVars: NodeOutPutVar[] = [{
-      nodeId: 'node-1',
-      title: 'Question Node',
-      vars: [],
-    }]
-    const availableNodes: Node[] = [
-      {
-        id: 'start-node',
-        position: { x: 0, y: 0 },
-        data: {
-          title: 'Start Node',
-          desc: 'Start description',
-          type: BlockEnum.Start,
-        },
-      },
-      {
-        id: 'llm-node',
-        position: { x: 120, y: 0 },
-        data: {
-          title: 'LLM Node',
-          desc: 'LLM description',
-          type: BlockEnum.LLM,
-        },
-      },
-    ]
-
-    render(
-      <MixedVariableTextInput
-        nodesOutputVars={nodesOutputVars}
-        availableNodes={availableNodes}
-      />,
-    )
-
-    const latestProps = capturedPromptEditorProps.at(-1)
-
-    expect(latestProps?.editable).toBe(true)
-    expect(latestProps?.workflowVariableBlock?.variables).toHaveLength(1)
-    expect(latestProps?.workflowVariableBlock?.workflowNodesMap).toEqual({
-      'start-node': {
-        title: 'Start Node',
-        type: 'start',
-      },
-      'sys': {
-        title: 'workflow.blocks.start',
-        type: 'start',
-      },
-      'llm-node': {
-        title: 'LLM Node',
-        type: 'llm',
-      },
-    })
-  })
-
-  it('should forward read-only state, current value, and change callbacks', async () => {
-    const onChange = vi.fn()
-    const { findByRole, getByTestId } = render(
-      <MixedVariableTextInput
-        readOnly
-        value="seed value"
-        onChange={onChange}
-      />,
-    )
-
-    expect(getByTestId('editable-flag')).toHaveTextContent('readonly')
-    expect(getByTestId('value-flag')).toHaveTextContent('seed value')
-
-    const changeButton = await findByRole('button', { name: 'trigger-change' })
-    changeButton.click()
-
-    expect(onChange).toHaveBeenCalledWith('updated text')
-  })
-})
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/__tests__/placeholder.spec.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/__tests__/placeholder.spec.tsx
deleted file mode 100644
index 03e67f68def..00000000000
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/__tests__/placeholder.spec.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { LexicalComposerContextWithEditor } from '@lexical/react/LexicalComposerContext'
-import type { LexicalEditor } from 'lexical'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { createEvent, fireEvent, render, screen } from '@testing-library/react'
-import { $insertNodes, FOCUS_COMMAND } from 'lexical'
-import Placeholder from '../placeholder'
-
-const mockEditorUpdate = vi.fn((callback: () => void) => callback())
-const mockDispatchCommand = vi.fn()
-const mockInsertNodes = vi.fn()
-const mockTextNode = vi.fn()
-
-const mockEditor = {
-  update: mockEditorUpdate,
-  dispatchCommand: mockDispatchCommand,
-} as unknown as LexicalEditor
-
-const lexicalContextValue: LexicalComposerContextWithEditor = [
-  mockEditor,
-  { getTheme: () => undefined },
-]
-
-vi.mock('@lexical/react/LexicalComposerContext', () => ({
-  useLexicalComposerContext: vi.fn(),
-}))
-
-vi.mock('lexical', () => ({
-  $insertNodes: vi.fn(),
-  FOCUS_COMMAND: 'focus-command',
-}))
-
-vi.mock('@/app/components/base/prompt-editor/plugins/custom-text/node', () => ({
-  CustomTextNode: class MockCustomTextNode {
-    value: string
-
-    constructor(value: string) {
-      this.value = value
-      mockTextNode(value)
-    }
-  },
-}))
-
-describe('Mixed variable placeholder', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.mocked(useLexicalComposerContext).mockReturnValue(lexicalContextValue)
-    vi.mocked($insertNodes).mockImplementation(nodes => mockInsertNodes(nodes))
-  })
-
-  it('should insert an empty text node and focus the editor when the placeholder background is clicked', () => {
-    const parentClick = vi.fn()
-
-    render(
-      <div onClick={parentClick}>
-        <Placeholder />
-      </div>,
-    )
-
-    fireEvent.click(screen.getByText('workflow.nodes.tool.insertPlaceholder1'))
-
-    expect(parentClick).not.toHaveBeenCalled()
-    expect(mockTextNode).toHaveBeenCalledWith('')
-    expect(mockInsertNodes).toHaveBeenCalledTimes(1)
-    expect(mockDispatchCommand).toHaveBeenCalledWith(FOCUS_COMMAND, undefined)
-  })
-
-  it('should insert a slash shortcut from the highlighted action and prevent the native mouse down behavior', () => {
-    render(<Placeholder />)
-
-    const shortcut = screen.getByText('workflow.nodes.tool.insertPlaceholder2')
-    const event = createEvent.mouseDown(shortcut)
-    fireEvent(shortcut, event)
-
-    expect(event.defaultPrevented).toBe(true)
-    expect(mockTextNode).toHaveBeenCalledWith('/')
-    expect(mockDispatchCommand).toHaveBeenCalledWith(FOCUS_COMMAND, undefined)
-  })
-})
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
deleted file mode 100644
index ac2ee98c760..00000000000
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import type {
-  Node,
-  NodeOutPutVar,
-} from '@/app/components/workflow/types'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  memo,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import PromptEditor from '@/app/components/base/prompt-editor'
-import { BlockEnum } from '@/app/components/workflow/types'
-import Placeholder from './placeholder'
-
-type MixedVariableTextInputProps = {
-  readOnly?: boolean
-  nodesOutputVars?: NodeOutPutVar[]
-  availableNodes?: Node[]
-  value?: string
-  onChange?: (text: string) => void
-}
-const MixedVariableTextInput = ({
-  readOnly = false,
-  nodesOutputVars,
-  availableNodes = [],
-  value = '',
-  onChange,
-}: MixedVariableTextInputProps) => {
-  const { t } = useTranslation()
-  return (
-    <PromptEditor
-      wrapperClassName={cn(
-        'w-full rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1',
-        'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
-        'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
-      )}
-      className="caret:text-text-accent"
-      editable={!readOnly}
-      value={value}
-      workflowVariableBlock={{
-        show: true,
-        variables: nodesOutputVars || [],
-        workflowNodesMap: availableNodes.reduce((acc, node) => {
-          acc[node.id] = {
-            title: node.data.title,
-            type: node.data.type,
-          }
-          if (node.data.type === BlockEnum.Start) {
-            acc.sys = {
-              title: t('blocks.start', { ns: 'workflow' }),
-              type: BlockEnum.Start,
-            }
-          }
-          return acc
-        }, {} as any),
-      }}
-      placeholder={<Placeholder />}
-      onChange={onChange}
-    />
-  )
-}
-
-export default memo(MixedVariableTextInput)
diff --git a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
deleted file mode 100644
index a0cd3d0e3c9..00000000000
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/placeholder.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Kbd } from '@langgenius/dify-ui/kbd'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { $insertNodes, FOCUS_COMMAND } from 'lexical'
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
-
-const Placeholder = () => {
-  const { t } = useTranslation()
-  const [editor] = useLexicalComposerContext()
-
-  const handleInsert = useCallback((text: string) => {
-    editor.update(() => {
-      const textNode = new CustomTextNode(text)
-      $insertNodes([textNode])
-    })
-    editor.dispatchCommand(FOCUS_COMMAND, undefined as any)
-  }, [editor])
-
-  return (
-    <div
-      className="pointer-events-auto flex size-full cursor-text items-center px-2"
-      onClick={(e) => {
-        e.stopPropagation()
-        handleInsert('')
-      }}
-    >
-      <div className="flex grow items-center">
-        {t('nodes.tool.insertPlaceholder1', { ns: 'workflow' })}
-        <Kbd className="mx-0.5 text-text-placeholder">/</Kbd>
-        <div
-          className="cursor-pointer system-sm-regular text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
-          onMouseDown={((e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            handleInsert('/')
-          })}
-        >
-          {t('nodes.tool.insertPlaceholder2', { ns: 'workflow' })}
-        </div>
-      </div>
-      <Badge
-        className="shrink-0"
-        text="String"
-        uppercase={false}
-      />
-    </div>
-  )
-}
-
-export default Placeholder
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/__tests__/index.spec.tsx
deleted file mode 100644
index 5fbab5e4978..00000000000
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import SupportVarInput from '../index'
-
-describe('SupportVarInput', () => {
-  it('should render plain text, highlighted variables, and preserved line breaks', () => {
-    render(<SupportVarInput value={'Hello {{user_name}}\nWorld'} />)
-
-    expect(screen.getByText('World').closest('[title]')).toHaveAttribute('title', 'Hello {{user_name}}\nWorld')
-    expect(screen.getByText('user_name')).toBeInTheDocument()
-    expect(screen.getByText('Hello')).toBeInTheDocument()
-    expect(screen.getByText('World')).toBeInTheDocument()
-  })
-
-  it('should show the focused child content and call onFocus when activated', async () => {
-    const user = userEvent.setup()
-    const onFocus = vi.fn()
-
-    render(
-      <SupportVarInput
-        isFocus
-        value="draft"
-        onFocus={onFocus}
-      >
-        <input aria-label="inline-editor" />
-      </SupportVarInput>,
-    )
-
-    const editor = screen.getByRole('textbox', { name: 'inline-editor' })
-    expect(editor).toBeInTheDocument()
-    expect(screen.queryByTitle('draft')).not.toBeInTheDocument()
-
-    await user.click(editor)
-
-    expect(onFocus).toHaveBeenCalledTimes(1)
-  })
-
-  it('should keep the static preview visible when the input is read-only', () => {
-    render(
-      <SupportVarInput
-        isFocus
-        readonly
-        value="readonly content"
-      >
-        <input aria-label="hidden-editor" />
-      </SupportVarInput>,
-    )
-
-    expect(screen.queryByRole('textbox', { name: 'hidden-editor' })).not.toBeInTheDocument()
-    expect(screen.getByTitle('readonly content')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
deleted file mode 100644
index 74c2516f46f..00000000000
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
-
-type Props = Readonly<{
-  isFocus?: boolean
-  onFocus?: () => void
-  value: string
-  children?: React.ReactNode
-  wrapClassName?: string
-  textClassName?: string
-  readonly?: boolean
-}>
-
-const SupportVarInput: FC<Props> = ({
-  isFocus,
-  onFocus,
-  children,
-  value,
-  wrapClassName,
-  textClassName,
-  readonly,
-}) => {
-  const renderSafeContent = (inputValue: string) => {
-    const parts = inputValue.split(/(\{\{[^}]+\}\}|\n)/g)
-    return parts.map((part, index) => {
-      const variableRegex = /^\{\{([^}]+)\}\}$/
-      const variableMatch = variableRegex.exec(part)
-      if (variableMatch) {
-        return (
-          <VarHighlight
-            key={`var-${index}`}
-            name={variableMatch[1]!}
-          />
-        )
-      }
-      if (part === '\n')
-        return <br key={`br-${index}`} />
-
-      return <span key={`text-${index}`}>{part}</span>
-    })
-  }
-
-  return (
-    <div
-      className={
-        cn(wrapClassName, 'flex size-full')
-      }
-      onClick={onFocus}
-    >
-      {(isFocus && !readonly && children)
-        ? (
-            children
-          )
-        : (
-            <div
-              className={cn(textClassName, 'h-full w-0 grow truncate whitespace-nowrap')}
-              title={value}
-            >
-              {renderSafeContent(value || '')}
-            </div>
-          )}
-    </div>
-  )
-}
-export default React.memo(SupportVarInput)
diff --git a/web/app/components/workflow/nodes/_base/components/variable/__tests__/assigned-var-reference-popup.spec.tsx b/web/app/components/workflow/nodes/_base/components/variable/__tests__/assigned-var-reference-popup.spec.tsx
deleted file mode 100644
index e1a7ae4a4b0..00000000000
--- a/web/app/components/workflow/nodes/_base/components/variable/__tests__/assigned-var-reference-popup.spec.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
-import { render, screen } from '@testing-library/react'
-import { VarType } from '@/app/components/workflow/types'
-import AssignedVarReferencePopup from '../assigned-var-reference-popup'
-
-const mockVarReferenceVars = vi.fn()
-
-vi.mock('../var-reference-vars', () => ({
-  default: ({
-    vars,
-    onChange,
-    itemWidth,
-    isSupportFileVar,
-  }: {
-    vars: NodeOutPutVar[]
-    onChange: (value: ValueSelector, item: Var) => void
-    itemWidth?: number
-    isSupportFileVar?: boolean
-  }) => {
-    mockVarReferenceVars({ vars, onChange, itemWidth, isSupportFileVar })
-    return <div data-testid="var-reference-vars">{vars.length}</div>
-  },
-}))
-
-const createOutputVar = (overrides: Partial<NodeOutPutVar> = {}): NodeOutPutVar => ({
-  nodeId: 'node-1',
-  title: 'Node One',
-  vars: [{
-    variable: 'answer',
-    type: VarType.string,
-  }],
-  ...overrides,
-})
-
-describe('AssignedVarReferencePopup', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should render the empty state when there are no assigned variables', () => {
-    render(
-      <AssignedVarReferencePopup
-        vars={[]}
-        onChange={vi.fn()}
-      />,
-    )
-
-    expect(screen.getByText('workflow.nodes.assigner.noAssignedVars')).toBeInTheDocument()
-    expect(screen.getByText('workflow.nodes.assigner.assignedVarsDescription')).toBeInTheDocument()
-    expect(screen.queryByTestId('var-reference-vars')).not.toBeInTheDocument()
-  })
-
-  it('should delegate populated variable lists to the variable picker with file support enabled', () => {
-    const onChange = vi.fn()
-
-    render(
-      <AssignedVarReferencePopup
-        vars={[createOutputVar()]}
-        itemWidth={280}
-        onChange={onChange}
-      />,
-    )
-
-    expect(screen.getByTestId('var-reference-vars')).toHaveTextContent('1')
-    expect(mockVarReferenceVars).toHaveBeenCalledWith({
-      vars: [createOutputVar()],
-      onChange,
-      itemWidth: 280,
-      isSupportFileVar: true,
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx b/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
deleted file mode 100644
index b62006f5daf..00000000000
--- a/web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import ListEmpty from '@/app/components/base/list-empty'
-import VarReferenceVars from './var-reference-vars'
-
-type Props = Readonly<{
-  vars: NodeOutPutVar[]
-  onChange: (value: ValueSelector, varDetail: Var) => void
-  itemWidth?: number
-}>
-const AssignedVarReferencePopup: FC<Props> = ({
-  vars,
-  onChange,
-  itemWidth,
-}) => {
-  const { t } = useTranslation()
-  // max-h-[300px] overflow-y-auto todo: use portal to handle long list
-  return (
-    <div className="bg-components-panel-bg-bur w-[352px] rounded-lg border-[0.5px] border-components-panel-border p-1 shadow-lg">
-      {(!vars || vars.length === 0)
-        ? (
-            <ListEmpty
-              title={t('nodes.assigner.noAssignedVars', { ns: 'workflow' }) || ''}
-              description={t('nodes.assigner.assignedVarsDescription', { ns: 'workflow' })}
-            />
-          )
-        : (
-            <VarReferenceVars
-              searchBoxClassName="mt-1"
-              vars={vars}
-              onChange={onChange}
-              itemWidth={itemWidth}
-              isSupportFileVar
-            />
-          )}
-    </div>
-  )
-}
-export default React.memo(AssignedVarReferencePopup)
diff --git a/web/app/components/workflow/nodes/_base/hooks/snippet-input-field-vars.ts b/web/app/components/workflow/nodes/_base/hooks/snippet-input-field-vars.ts
index de3f5d334b3..67a0703c0be 100644
--- a/web/app/components/workflow/nodes/_base/hooks/snippet-input-field-vars.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/snippet-input-field-vars.ts
@@ -5,7 +5,7 @@ import { BlockEnum } from '@/app/components/workflow/types'
 import { PipelineInputVarType } from '@/models/pipeline'
 import { inputVarTypeToVarType } from '../../data-source/utils'
 
-export const SNIPPET_INPUT_FIELD_NODE_ID = 'start'
+const SNIPPET_INPUT_FIELD_NODE_ID = 'start'
 
 export const isSnippetCanvas = () => {
   if (typeof globalThis.location === 'undefined')
diff --git a/web/app/components/workflow/nodes/agent/__tests__/use-single-run-form-params.spec.ts b/web/app/components/workflow/nodes/agent/__tests__/use-single-run-form-params.spec.ts
deleted file mode 100644
index 75d356ae6ca..00000000000
--- a/web/app/components/workflow/nodes/agent/__tests__/use-single-run-form-params.spec.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import type { AgentNodeType } from '../types'
-import type { InputVar } from '@/app/components/workflow/types'
-import { renderHook } from '@testing-library/react'
-import formatTracing from '@/app/components/workflow/run/utils/format-log'
-import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
-import useNodeCrud from '../../_base/hooks/use-node-crud'
-import { VarType } from '../../tool/types'
-import { useStrategyInfo } from '../use-config'
-import useSingleRunFormParams from '../use-single-run-form-params'
-
-vi.mock('@/app/components/workflow/run/utils/format-log', () => ({
-  __esModule: true,
-  default: vi.fn(),
-}))
-
-vi.mock('../../_base/hooks/use-node-crud', () => ({
-  __esModule: true,
-  default: vi.fn(),
-}))
-
-vi.mock('../use-config', async () => {
-  const actual = await vi.importActual<typeof import('../use-config')>('../use-config')
-  return {
-    ...actual,
-    useStrategyInfo: vi.fn(),
-  }
-})
-
-const mockFormatTracing = vi.mocked(formatTracing)
-const mockUseNodeCrud = vi.mocked(useNodeCrud)
-const mockUseStrategyInfo = vi.mocked(useStrategyInfo)
-
-const createData = (overrides: Partial<AgentNodeType> = {}): AgentNodeType => ({
-  title: 'Agent',
-  desc: '',
-  type: BlockEnum.Agent,
-  output_schema: {},
-  agent_strategy_provider_name: 'provider/agent',
-  agent_strategy_name: 'react',
-  agent_strategy_label: 'React Agent',
-  agent_parameters: {
-    prompt: {
-      type: VarType.variable,
-      value: '#start.topic#',
-    },
-    summary: {
-      type: VarType.variable,
-      value: '#node-2.answer#',
-    },
-    count: {
-      type: VarType.constant,
-      value: 2,
-    },
-  },
-  ...overrides,
-})
-
-describe('agent/use-single-run-form-params', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockUseNodeCrud.mockReturnValue({
-      inputs: createData(),
-      setInputs: vi.fn(),
-    } as unknown as ReturnType<typeof useNodeCrud>)
-    mockUseStrategyInfo.mockReturnValue({
-      strategyProvider: undefined,
-      strategy: {
-        parameters: [
-          { name: 'prompt', type: 'string' },
-          { name: 'summary', type: 'string' },
-          { name: 'count', type: 'number' },
-        ],
-      },
-      strategyStatus: undefined,
-      refetch: vi.fn(),
-    } as unknown as ReturnType<typeof useStrategyInfo>)
-    mockFormatTracing.mockReturnValue([{
-      id: 'agent-node',
-      status: 'succeeded',
-    }] as unknown as ReturnType<typeof formatTracing>)
-  })
-
-  it('builds a single-run variable form, returns node info, and skips malformed dependent vars', () => {
-    const setRunInputData = vi.fn()
-    const getInputVars = vi.fn<() => InputVar[]>(() => [
-      {
-        label: 'Prompt',
-        variable: '#start.topic#',
-        type: InputVarType.textInput,
-        required: true,
-      },
-      {
-        label: 'Broken',
-        variable: undefined as unknown as string,
-        type: InputVarType.textInput,
-        required: false,
-      },
-    ])
-
-    const { result } = renderHook(() => useSingleRunFormParams({
-      id: 'agent-node',
-      payload: createData(),
-      runInputData: { topic: 'finance' },
-      runInputDataRef: { current: { topic: 'finance' } },
-      getInputVars,
-      setRunInputData,
-      toVarInputs: () => [],
-      runResult: { id: 'trace-1' } as never,
-    }))
-
-    expect(getInputVars).toHaveBeenCalledWith(['#start.topic#', '#node-2.answer#'])
-    expect(result.current.forms).toHaveLength(1)
-    expect(result.current.forms[0]!.inputs).toHaveLength(2)
-    expect(result.current.forms[0]!.values).toEqual({ topic: 'finance' })
-    expect(result.current.nodeInfo).toEqual({
-      id: 'agent-node',
-      status: 'succeeded',
-    })
-
-    result.current.forms[0]!.onChange({ topic: 'updated' })
-
-    expect(setRunInputData).toHaveBeenCalledWith({ topic: 'updated' })
-    expect(result.current.getDependentVars()).toEqual([
-      ['start', 'topic'],
-    ])
-  })
-
-  it('returns an empty form list when no variable input is required and no run result is available', () => {
-    const { result } = renderHook(() => useSingleRunFormParams({
-      id: 'agent-node',
-      payload: createData(),
-      runInputData: {},
-      runInputDataRef: { current: {} },
-      getInputVars: () => [],
-      setRunInputData: vi.fn(),
-      toVarInputs: () => [],
-      runResult: undefined as never,
-    }))
-
-    expect(result.current.forms).toEqual([])
-    expect(result.current.nodeInfo).toBeUndefined()
-    expect(result.current.getDependentVars()).toEqual([])
-  })
-})
diff --git a/web/app/components/workflow/nodes/agent/use-single-run-form-params.ts b/web/app/components/workflow/nodes/agent/use-single-run-form-params.ts
deleted file mode 100644
index 8b06b7fb8da..00000000000
--- a/web/app/components/workflow/nodes/agent/use-single-run-form-params.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import type { RefObject } from 'react'
-import type { AgentNodeType } from './types'
-import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
-import type { InputVar, Variable } from '@/app/components/workflow/types'
-import type { NodeTracing } from '@/types/workflow'
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import formatTracing from '@/app/components/workflow/run/utils/format-log'
-import useNodeCrud from '../_base/hooks/use-node-crud'
-import { useStrategyInfo } from './use-config'
-
-type Params = {
-  id: string
-  payload: AgentNodeType
-  runInputData: Record<string, any>
-  runInputDataRef: RefObject<Record<string, any>>
-  getInputVars: (textList: string[]) => InputVar[]
-  setRunInputData: (data: Record<string, any>) => void
-  toVarInputs: (variables: Variable[]) => InputVar[]
-  runResult: NodeTracing
-}
-const useSingleRunFormParams = ({
-  id,
-  payload,
-  runInputData,
-  getInputVars,
-  setRunInputData,
-  runResult,
-}: Params) => {
-  const { t } = useTranslation()
-  const { inputs } = useNodeCrud<AgentNodeType>(id, payload)
-
-  const formData = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(inputs.agent_parameters || {}).map(([key, value]) => {
-        return [key, value.value]
-      }),
-    )
-  }, [inputs.agent_parameters])
-
-  const {
-    strategy: currentStrategy,
-  } = useStrategyInfo(
-    inputs.agent_strategy_provider_name,
-    inputs.agent_strategy_name,
-  )
-
-  const allVarStrArr = (() => {
-    const arr = currentStrategy?.parameters.filter(item => item.type === 'string').map((item) => {
-      return formData[item.name]
-    }) || []
-    return arr
-  })()
-
-  const varInputs = getInputVars?.(allVarStrArr)
-
-  const forms = useMemo(() => {
-    const forms: FormProps[] = []
-
-    if (varInputs!.length > 0) {
-      forms.push(
-        {
-          label: t('nodes.llm.singleRun.variable', { ns: 'workflow' })!,
-          inputs: varInputs!,
-          values: runInputData,
-          onChange: setRunInputData,
-        },
-      )
-    }
-    return forms
-  }, [runInputData, setRunInputData, t, varInputs])
-
-  const nodeInfo = useMemo(() => {
-    if (!runResult)
-      return
-    return formatTracing([runResult], t)[0]
-  }, [runResult, t])
-
-  const getDependentVars = () => {
-    return varInputs.map((item) => {
-      // Guard against null/undefined variable to prevent app crash
-      if (!item.variable || typeof item.variable !== 'string')
-        return []
-
-      return item.variable.slice(1, -1).split('.')
-    }).filter(arr => arr.length > 0)
-  }
-
-  return {
-    forms,
-    nodeInfo,
-    getDependentVars,
-  }
-}
-
-export default useSingleRunFormParams
diff --git a/web/app/components/workflow/nodes/code/__tests__/dependency-picker.spec.tsx b/web/app/components/workflow/nodes/code/__tests__/dependency-picker.spec.tsx
deleted file mode 100644
index 33cbdcbe417..00000000000
--- a/web/app/components/workflow/nodes/code/__tests__/dependency-picker.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { CodeDependency } from '../types'
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import DependencyPicker from '../dependency-picker'
-
-const dependencies: CodeDependency[] = [
-  { name: 'numpy', version: '1.0.0' },
-  { name: 'pandas', version: '2.0.0' },
-]
-
-describe('DependencyPicker', () => {
-  it('should open the dependency list, filter by search text, and select a new dependency', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-
-    render(
-      <DependencyPicker
-        value={dependencies[0]!}
-        available_dependencies={dependencies}
-        onChange={onChange}
-      />,
-    )
-
-    expect(screen.getByText('numpy')).toBeInTheDocument()
-
-    await user.click(screen.getByText('numpy'))
-    await user.type(screen.getByRole('textbox'), 'pan')
-
-    expect(screen.getByRole('textbox')).toHaveValue('pan')
-    expect(screen.getByText('pandas')).toBeInTheDocument()
-
-    await user.click(screen.getByText('pandas'))
-
-    expect(onChange).toHaveBeenCalledWith(dependencies[1])
-    await waitFor(() => {
-      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/code/dependency-picker.tsx b/web/app/components/workflow/nodes/code/dependency-picker.tsx
deleted file mode 100644
index 8df81f146de..00000000000
--- a/web/app/components/workflow/nodes/code/dependency-picker.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { FC } from 'react'
-import type { CodeDependency } from './types'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@langgenius/dify-ui/popover'
-import {
-  RiArrowDownSLine,
-} from '@remixicon/react'
-import { t } from 'i18next'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import Input from '@/app/components/base/input'
-
-type Props = Readonly<{
-  value: CodeDependency
-  available_dependencies: CodeDependency[]
-  onChange: (dependency: CodeDependency) => void
-}>
-
-const DependencyPicker: FC<Props> = ({
-  available_dependencies,
-  value,
-  onChange,
-}) => {
-  const [open, setOpen] = useState(false)
-  const [searchText, setSearchText] = useState('')
-
-  const handleChange = useCallback((dependency: CodeDependency) => {
-    return () => {
-      setOpen(false)
-      onChange(dependency)
-    }
-  }, [onChange])
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        render={(
-          <div className="grow cursor-pointer">
-            <div className="flex h-8 items-center justify-between rounded-lg border-0 bg-gray-100 px-2.5 text-[13px] text-gray-900">
-              <div className="w-0 grow truncate" title={value.name}>{value.name}</div>
-              <RiArrowDownSLine className="size-3.5 shrink-0 text-gray-700" />
-            </div>
-          </div>
-        )}
-      />
-      <PopoverContent
-        placement="bottom-start"
-        sideOffset={4}
-        popupClassName="border-none bg-transparent p-0 shadow-none backdrop-blur-none"
-      >
-        <div
-          className="rounded-lg bg-white p-1 shadow-sm"
-          style={{
-            width: 350,
-          }}
-        >
-          <div className="mx-1 mb-2">
-            <Input
-              showLeftIcon
-              showClearIcon
-              value={searchText}
-              placeholder={t('nodes.code.searchDependencies', { ns: 'workflow' }) || ''}
-              onChange={e => setSearchText(e.target.value)}
-              onClear={() => setSearchText('')}
-              autoFocus
-            />
-          </div>
-          <div className="max-h-[30vh] overflow-y-auto">
-            {available_dependencies.filter((v) => {
-              if (!searchText)
-                return true
-              return v.name.toLowerCase().includes(searchText.toLowerCase())
-            }).map(dependency => (
-              <div
-                key={dependency.name}
-                className="flex h-[30px] cursor-pointer items-center justify-between rounded-lg pr-2 pl-3 text-[13px] text-gray-900 hover:bg-gray-100"
-                onClick={handleChange(dependency)}
-              >
-                <div className="w-0 grow truncate">{dependency.name}</div>
-                {dependency.name === value.name && <Check className="size-4 shrink-0 text-primary-600" />}
-              </div>
-            ))}
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export default React.memo(DependencyPicker)
diff --git a/web/app/components/workflow/nodes/code/types.ts b/web/app/components/workflow/nodes/code/types.ts
index ab85fccc864..c8f1496d210 100644
--- a/web/app/components/workflow/nodes/code/types.ts
+++ b/web/app/components/workflow/nodes/code/types.ts
@@ -11,11 +11,6 @@ export type OutputVar = Record<string, {
   children: null // support nest in the future,
 }>
 
-export type CodeDependency = {
-  name: string
-  version?: string
-}
-
 export type CodeNodeType = CommonNodeType & {
   variables: Variable[]
   code_language: CodeLanguage
diff --git a/web/app/components/workflow/nodes/http/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/http/__tests__/integration.spec.tsx
deleted file mode 100644
index 4389ad1f7b6..00000000000
--- a/web/app/components/workflow/nodes/http/__tests__/integration.spec.tsx
+++ /dev/null
@@ -1,762 +0,0 @@
-/* eslint-disable ts/no-explicit-any, style/jsx-one-expression-per-line */
-import type { KeyValue as HttpKeyValue, HttpNodeType } from '../types'
-import type { PanelProps } from '@/types/workflow'
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
-import { useStore } from '@/app/components/workflow/store'
-import { BlockEnum, VarType } from '@/app/components/workflow/types'
-import ApiInput from '../components/api-input'
-import AuthorizationModal from '../components/authorization'
-import RadioGroup from '../components/authorization/radio-group'
-import EditBody from '../components/edit-body'
-import KeyValue from '../components/key-value'
-import BulkEdit from '../components/key-value/bulk-edit'
-import KeyValueEdit from '../components/key-value/key-value-edit'
-import InputItem from '../components/key-value/key-value-edit/input-item'
-import KeyValueItem from '../components/key-value/key-value-edit/item'
-import Timeout from '../components/timeout'
-import Node from '../node'
-import Panel from '../panel'
-import { AuthorizationType, BodyType, Method } from '../types'
-import useConfig from '../use-config'
-
-vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
-  default: vi.fn((_nodeId: string, options?: any) => ({
-    availableVars: [
-      { variable: ['node-1', 'token'], type: VarType.string },
-      { variable: ['node-1', 'upload'], type: VarType.file },
-    ].filter(varPayload => options?.filterVar ? options.filterVar(varPayload) : true),
-    availableNodes: [],
-    availableNodesWithParent: [],
-  })),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/input-support-select-var', () => ({
-  default: ({ value, onChange, placeholder, className, readOnly, onFocusChange }: any) => (
-    <input
-      value={value}
-      placeholder={placeholder}
-      className={className}
-      readOnly={readOnly}
-      onFocus={() => onFocusChange?.(true)}
-      onBlur={() => onFocusChange?.(false)}
-      onChange={event => onChange(event.target.value)}
-    />
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/field', () => ({
-  default: ({ title, operations, children }: any) => <div><div>{title}</div><div>{operations}</div>{children}</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/output-vars', () => ({
-  default: ({ children }: any) => <div>{children}</div>,
-  VarItem: ({ name, type }: any) => <div>{name}:{type}</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/split', () => ({
-  default: () => <div>split</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
-  default: ({ onChange, filterVar, onRemove }: any) => (
-    <div>
-      <div>{`file-filter:${String(filterVar?.({ type: VarType.file }))}:${String(filterVar?.({ type: VarType.string }))}`}</div>
-      <button type="button" onClick={() => onChange(['node-1', 'file'])}>pick-file</button>
-      {onRemove && <button type="button" onClick={onRemove}>remove-file</button>}
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/prompt/editor', () => ({
-  default: ({ value, onChange, title }: any) => (
-    <div>
-      <div>{typeof title === 'string' ? title : 'editor'}</div>
-      <input value={value} onChange={event => onChange(event.target.value)} />
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/editor/text-editor', () => ({
-  default: ({ value, onChange, onBlur, headerRight }: any) => (
-    <div>
-      {headerRight}
-      <textarea value={value} onChange={event => onChange(event.target.value)} onBlur={onBlur} />
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/readonly-input-with-select-var', () => ({
-  default: ({ value }: any) => <div>{value}</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/selector', () => ({
-  default: ({ options, onChange, trigger }: any) => (
-    <div>
-      {trigger}
-      {options.map((option: any) => (
-        <button key={option.value} type="button" onClick={() => onChange(option.value)}>
-          {option.label}
-        </button>
-      ))}
-    </div>
-  ),
-}))
-
-vi.mock('../components/curl-panel', () => ({
-  default: () => <div>curl-panel</div>,
-}))
-
-vi.mock('../use-config', () => ({
-  default: vi.fn(),
-}))
-
-vi.mock('@/app/components/workflow/store', () => ({
-  useStore: vi.fn(),
-}))
-
-const mockUseConfig = vi.mocked(useConfig)
-const mockUseStore = vi.mocked(useStore)
-
-const createData = (overrides: Partial<HttpNodeType> = {}): HttpNodeType => ({
-  title: 'HTTP Request',
-  desc: '',
-  type: BlockEnum.HttpRequest,
-  variables: [],
-  method: Method.get,
-  url: 'https://api.example.com',
-  authorization: { type: AuthorizationType.none },
-  headers: '',
-  params: '',
-  body: { type: BodyType.none, data: [] },
-  timeout: { connect: 5, read: 10, write: 15 },
-  ssl_verify: true,
-  ...overrides,
-})
-
-const keyValueItem: HttpKeyValue = {
-  id: 'kv-1',
-  key: 'name',
-  value: 'alice',
-  type: 'text',
-}
-
-const createConfigResult = (overrides: Partial<ReturnType<typeof useConfig>> = {}): ReturnType<typeof useConfig> => ({
-  readOnly: false,
-  isDataReady: true,
-  inputs: createData(),
-  handleVarListChange: vi.fn(),
-  handleAddVariable: vi.fn(),
-  filterVar: vi.fn(() => true),
-  handleMethodChange: vi.fn(),
-  handleUrlChange: vi.fn(),
-  headers: [keyValueItem],
-  setHeaders: vi.fn(),
-  addHeader: vi.fn(),
-  isHeaderKeyValueEdit: false,
-  toggleIsHeaderKeyValueEdit: vi.fn(),
-  params: [keyValueItem],
-  setParams: vi.fn(),
-  addParam: vi.fn(),
-  isParamKeyValueEdit: false,
-  toggleIsParamKeyValueEdit: vi.fn(),
-  setBody: vi.fn(),
-  handleSSLVerifyChange: vi.fn(),
-  isShowAuthorization: true,
-  showAuthorization: vi.fn(),
-  hideAuthorization: vi.fn(),
-  setAuthorization: vi.fn(),
-  setTimeout: vi.fn(),
-  isShowCurlPanel: true,
-  showCurlPanel: vi.fn(),
-  hideCurlPanel: vi.fn(),
-  handleCurlImport: vi.fn(),
-  ...overrides,
-})
-
-const panelProps: PanelProps = {
-  getInputVars: vi.fn(() => []),
-  toVarInputs: vi.fn(() => []),
-  runInputData: {},
-  runInputDataRef: { current: {} },
-  setRunInputData: vi.fn(),
-  runResult: null,
-}
-
-const renderPanel = (data: HttpNodeType = createData()) => (
-  render(<Panel id="node-1" data={data} panelProps={panelProps} />)
-)
-
-describe('http path', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockUseStore.mockReturnValue({
-      HttpRequest: {
-        timeout: {
-          max_connect_timeout: 10,
-          max_read_timeout: 600,
-          max_write_timeout: 600,
-        },
-      },
-    } as any)
-    mockUseConfig.mockReturnValue(createConfigResult())
-  })
-
-  // The HTTP path should expose auth, request editing, key-value tables, timeout, and request preview behavior.
-  describe('Path Integration', () => {
-    it('should switch radio-group options', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <RadioGroup
-          options={[
-            { value: 'none', label: 'None' },
-            { value: 'apiKey', label: 'API Key' },
-          ]}
-          value="none"
-          onChange={onChange}
-        />,
-      )
-
-      await user.click(screen.getByText('API Key'))
-      expect(onChange).toHaveBeenCalledWith('apiKey')
-    })
-
-    it('should edit authorization settings and save them', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      const onHide = vi.fn()
-      render(
-        <AuthorizationModal
-          nodeId="node-1"
-          payload={{ type: 'apiKey', config: { type: 'custom', header: 'X-Key', api_key: 'secret' } } as any}
-          onChange={onChange}
-          isShow
-          onHide={onHide}
-        />,
-      )
-
-      await user.click(screen.getByText('workflow.nodes.http.authorization.api-key'))
-      await user.click(screen.getByText('workflow.nodes.http.authorization.custom'))
-      fireEvent.change(screen.getByDisplayValue('secret'), { target: { value: 'updated-secret' } })
-      await user.click(screen.getByText('common.operation.save'))
-
-      expect(onChange).toHaveBeenCalled()
-      expect(onHide).toHaveBeenCalled()
-    })
-
-    it('should bootstrap api key config when auth starts without config', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <AuthorizationModal
-          nodeId="node-1"
-          payload={{ type: 'none' as any }}
-          onChange={onChange}
-          isShow
-          onHide={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByText('workflow.nodes.http.authorization.api-key'))
-      await user.click(screen.getByText('common.operation.save'))
-
-      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
-        type: 'api-key',
-        config: expect.objectContaining({
-          type: 'basic',
-          api_key: '',
-        }),
-      }))
-    })
-
-    it('should create custom header auth config and apply focus styles to the api key input', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <AuthorizationModal
-          nodeId="node-1"
-          payload={{ type: 'api-key' as any }}
-          onChange={onChange}
-          isShow
-          onHide={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByText('workflow.nodes.http.authorization.custom'))
-
-      const inputs = screen.getAllByRole('textbox')
-      fireEvent.change(inputs[0] as HTMLInputElement, { target: { value: 'X-Token' } })
-      fireEvent.focus(inputs[1] as HTMLInputElement)
-      expect(inputs[1])!.toHaveClass('border-components-input-border-active')
-      fireEvent.change(inputs[1] as HTMLInputElement, { target: { value: 'secret-token' } })
-      fireEvent.blur(inputs[1] as HTMLInputElement)
-      await user.click(screen.getByText('common.operation.save'))
-
-      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
-        type: 'api-key',
-        config: expect.objectContaining({
-          type: 'custom',
-          header: 'X-Token',
-          api_key: 'secret-token',
-        }),
-      }))
-    })
-
-    it('should update method and url from the api input', async () => {
-      const user = userEvent.setup()
-      const onMethodChange = vi.fn()
-      const onUrlChange = vi.fn()
-      render(
-        <ApiInput
-          nodeId="node-1"
-          readonly={false}
-          method={'GET' as any}
-          onMethodChange={onMethodChange}
-          url="https://api.example.com"
-          onUrlChange={onUrlChange}
-        />,
-      )
-
-      await user.click(screen.getByText('POST'))
-      fireEvent.change(screen.getByDisplayValue('https://api.example.com'), { target: { value: 'https://api.changed.com' } })
-
-      expect(onMethodChange).toHaveBeenCalled()
-      expect(onUrlChange).toHaveBeenCalledWith('https://api.changed.com')
-    })
-
-    it('should hide the method dropdown icon and use an empty placeholder in readonly mode', () => {
-      const { container } = render(
-        <ApiInput
-          nodeId="node-1"
-          readonly
-          method={'GET' as any}
-          onMethodChange={vi.fn()}
-          url="https://api.example.com"
-          onUrlChange={vi.fn()}
-        />,
-      )
-
-      expect(container.querySelector('svg')).toBeNull()
-      expect(screen.getByDisplayValue('https://api.example.com'))!.toHaveAttribute('placeholder', '')
-    })
-
-    it('should update focus styling for editable inputs and show the remove action again on blur-sm', () => {
-      const onChange = vi.fn()
-      const onRemove = vi.fn()
-      const { container, rerender } = render(
-        <InputItem
-          nodeId="node-1"
-          value="alice"
-          onChange={onChange}
-          hasRemove
-          onRemove={onRemove}
-        />,
-      )
-
-      const input = screen.getByDisplayValue('alice')
-      fireEvent.focus(input)
-      expect(input)!.toHaveClass('bg-components-input-bg-active')
-      expect(container.querySelector('button')).toBeNull()
-      fireEvent.blur(input)
-      expect(container.querySelector('button')).not.toBeNull()
-
-      rerender(
-        <InputItem
-          nodeId="node-1"
-          value=""
-          onChange={onChange}
-          hasRemove={false}
-          placeholder="missing-value"
-          readOnly
-        />,
-      )
-
-      expect(screen.getByText('missing-value'))!.toBeInTheDocument()
-    })
-
-    it('should clamp timeout values and propagate changes', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <Timeout
-          readonly={false}
-          nodeId="node-1"
-          payload={{ connect: 5, read: 10, write: 15 }}
-          onChange={onChange}
-        />,
-      )
-
-      await user.click(screen.getByText('workflow.nodes.http.timeout.title'))
-      fireEvent.change(screen.getByDisplayValue('5'), { target: { value: '999' } })
-
-      expect(onChange).toHaveBeenCalled()
-    })
-
-    it('should clear timeout values to undefined and clamp low values to the minimum', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <Timeout
-          readonly={false}
-          nodeId="node-1"
-          payload={{ connect: 5, read: 10, write: 15 }}
-          onChange={onChange}
-        />,
-      )
-
-      await user.click(screen.getByText('workflow.nodes.http.timeout.title'))
-      fireEvent.change(screen.getByDisplayValue('10'), { target: { value: '' } })
-      fireEvent.change(screen.getByDisplayValue('15'), { target: { value: '0' } })
-
-      expect(onChange).toHaveBeenNthCalledWith(1, expect.objectContaining({ read: undefined }))
-      expect(onChange).toHaveBeenNthCalledWith(2, expect.objectContaining({ write: 1 }))
-    })
-
-    it('should delegate key-value list editing and bulk editing actions', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      const onAdd = vi.fn()
-
-      render(
-        <div>
-          <KeyValue
-            readonly={false}
-            nodeId="node-1"
-            list={[keyValueItem]}
-            onChange={onChange}
-            onAdd={onAdd}
-          />
-          <BulkEdit
-            value="name:alice"
-            onChange={onChange}
-            onSwitchToKeyValueEdit={onAdd}
-          />
-        </div>,
-      )
-
-      fireEvent.change(screen.getAllByDisplayValue('name:alice')[0]!, { target: { value: 'name:bob' } })
-      fireEvent.blur(screen.getAllByDisplayValue('name:bob')[0]!)
-      await user.click(screen.getByText('workflow.nodes.http.keyValueEdit'))
-
-      expect(onChange).toHaveBeenCalled()
-      expect(onAdd).toHaveBeenCalled()
-    })
-
-    it('should return null when key-value edit receives a non-array list', () => {
-      const { container } = render(
-        <KeyValueEdit
-          readonly={false}
-          nodeId="node-1"
-          list={'invalid' as any}
-          onChange={vi.fn()}
-          onAdd={vi.fn()}
-        />,
-      )
-
-      expect(container)!.toBeEmptyDOMElement()
-    })
-
-    it('should edit standalone input items and key-value rows', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      const onRemove = vi.fn()
-      const onAdd = vi.fn()
-      render(
-        <div>
-          <InputItem
-            nodeId="node-1"
-            value="alice"
-            onChange={onChange}
-            hasRemove
-            onRemove={onRemove}
-          />
-          <KeyValueItem
-            instanceId="kv-1"
-            nodeId="node-1"
-            readonly={false}
-            canRemove
-            payload={keyValueItem}
-            onChange={onChange}
-            onRemove={onRemove}
-            isLastItem
-            onAdd={onAdd}
-            isSupportFile
-          />
-          <KeyValueEdit
-            readonly={false}
-            nodeId="node-1"
-            list={[keyValueItem]}
-            onChange={onChange}
-            onAdd={onAdd}
-          />
-        </div>,
-      )
-
-      fireEvent.change(screen.getAllByDisplayValue('alice')[0]!, { target: { value: 'bob' } })
-      await user.click(screen.getAllByRole('combobox', { name: 'workflow.nodes.http.type' })[0]!)
-      await user.click(screen.getByRole('option', { name: /file/i }))
-
-      expect(onChange).toHaveBeenCalled()
-    })
-
-    it('should only append a new key-value row after the last value field receives content', () => {
-      const onChange = vi.fn()
-      const onRemove = vi.fn()
-      const onAdd = vi.fn()
-      render(
-        <KeyValueItem
-          instanceId="kv-append"
-          nodeId="node-1"
-          readonly={false}
-          canRemove
-          payload={{ id: 'kv-append', key: 'name', value: '', type: 'text' } as any}
-          onChange={onChange}
-          onRemove={onRemove}
-          isLastItem
-          onAdd={onAdd}
-        />,
-      )
-
-      const valueInput = screen.getAllByPlaceholderText('workflow.nodes.http.insertVarPlaceholder')[1]!
-
-      fireEvent.click(valueInput)
-      expect(onAdd).not.toHaveBeenCalled()
-
-      fireEvent.change(valueInput, { target: { value: 'alice' } })
-      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ value: 'alice' }))
-      expect(onAdd).toHaveBeenCalledTimes(1)
-    })
-
-    it('should edit key-only rows and select file payload rows', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      const onRemove = vi.fn()
-      render(
-        <KeyValueItem
-          instanceId="kv-2"
-          nodeId="node-1"
-          readonly={false}
-          canRemove
-          payload={{ id: 'kv-2', key: 'attachment', value: '', type: 'file', file: [] } as any}
-          onChange={onChange}
-          onRemove={onRemove}
-          isLastItem={false}
-          onAdd={vi.fn()}
-          isSupportFile
-          keyNotSupportVar
-        />,
-      )
-
-      fireEvent.change(screen.getByDisplayValue('attachment'), { target: { value: 'upload' } })
-      expect(screen.getByText('file-filter:true:false'))!.toBeInTheDocument()
-      await user.click(screen.getByText('pick-file'))
-      await user.click(screen.getByText('remove-file'))
-
-      expect(onChange).toHaveBeenCalled()
-      expect(onRemove).toHaveBeenCalled()
-    })
-
-    it('should show the full file-type menu and update the row type selection', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <KeyValueItem
-          instanceId="kv-type"
-          nodeId="node-1"
-          readonly={false}
-          canRemove
-          payload={{ id: 'kv-type', key: 'attachment', value: '', type: 'text' } as any}
-          onChange={onChange}
-          onRemove={vi.fn()}
-          isLastItem={false}
-          onAdd={vi.fn()}
-          isSupportFile
-        />,
-      )
-
-      await user.click(screen.getByRole('combobox', { name: 'workflow.nodes.http.type' }))
-
-      const fileOption = screen.getByRole('option', { name: /file/i })
-      expect(screen.getByRole('option', { name: /text/i }))!.toBeInTheDocument()
-      expect(fileOption.closest('.h-7')).toBeNull()
-
-      await user.click(fileOption)
-
-      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ type: 'file' }))
-    })
-
-    it('should update the raw-text body payload', () => {
-      const onChange = vi.fn()
-      render(
-        <EditBody
-          readonly={false}
-          nodeId="node-1"
-          payload={{ type: 'raw-text', data: [{ id: 'body-1', type: 'text', value: 'hello' }] } as any}
-          onChange={onChange}
-        />,
-      )
-
-      fireEvent.change(screen.getByDisplayValue('hello'), { target: { value: 'updated-body' } })
-
-      expect(onChange).toHaveBeenCalled()
-    })
-
-    it('should initialize an empty json body and support legacy string payload rendering', () => {
-      const onChange = vi.fn()
-      const { rerender } = render(
-        <EditBody
-          readonly={false}
-          nodeId="node-1"
-          payload={{ type: 'json', data: [] } as any}
-          onChange={onChange}
-        />,
-      )
-
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '{"a":1}' } })
-
-      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
-        type: 'json',
-        data: [expect.objectContaining({ value: '{"a":1}' })],
-      }))
-
-      rerender(
-        <EditBody
-          readonly={false}
-          nodeId="node-1"
-          payload={{ type: 'json', data: 'legacy' } as any}
-          onChange={onChange}
-        />,
-      )
-
-      expect(screen.getByRole('textbox'))!.toHaveValue('')
-    })
-
-    it('should switch to key-value body types and propagate key-value edits', () => {
-      const onChange = vi.fn()
-      render(
-        <EditBody
-          readonly={false}
-          nodeId="node-1"
-          payload={{ type: 'none', data: [] } as any}
-          onChange={onChange}
-        />,
-      )
-
-      fireEvent.click(screen.getByRole('radio', { name: 'form-data' }))
-
-      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
-        type: 'form-data',
-        data: [expect.objectContaining({ key: '', value: '' })],
-      }))
-
-      onChange.mockClear()
-
-      render(
-        <EditBody
-          readonly={false}
-          nodeId="node-1"
-          payload={{ type: 'form-data', data: [{ id: 'body-1', type: 'text', key: 'name', value: 'alice' }] } as any}
-          onChange={onChange}
-        />,
-      )
-
-      fireEvent.click(screen.getAllByDisplayValue('alice')[0]!)
-      fireEvent.change(screen.getAllByDisplayValue('alice')[0]!, { target: { value: 'bob' } })
-
-      expect(onChange.mock.calls.some(([payload]) => Array.isArray(payload.data) && payload.data.length === 2)).toBe(true)
-      expect(onChange.mock.calls.some(([payload]) => Array.isArray(payload.data) && payload.data[0]?.value === 'bob')).toBe(true)
-    })
-
-    it('should render the binary body picker and forward file selections', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <EditBody
-          readonly={false}
-          nodeId="node-1"
-          payload={{ type: 'binary', data: [{ id: 'body-1', type: 'file', file: [] }] } as any}
-          onChange={onChange}
-        />,
-      )
-
-      await user.click(screen.getByText('pick-file'))
-
-      expect(onChange).toHaveBeenCalled()
-    })
-
-    it('should initialize an empty binary body before saving the selected file', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      render(
-        <EditBody
-          readonly={false}
-          nodeId="node-1"
-          payload={{ type: 'binary', data: [] } as any}
-          onChange={onChange}
-        />,
-      )
-
-      expect(screen.getByText('file-filter:true:false'))!.toBeInTheDocument()
-      await user.click(screen.getByText('pick-file'))
-
-      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
-        type: 'binary',
-        data: [expect.objectContaining({
-          type: 'file',
-          file: ['node-1', 'file'],
-        })],
-      }))
-    })
-
-    it('should render the request node preview when a url exists', () => {
-      renderWorkflowFlowComponent(
-        <Node
-          id="node-1"
-          data={createData()}
-        />,
-        { nodes: [], edges: [] },
-      )
-
-      expect(screen.getByText(Method.get))!.toBeInTheDocument()
-      expect(screen.getByText('https://api.example.com'))!.toBeInTheDocument()
-    })
-
-    it('should render nothing when the request url is empty', () => {
-      renderWorkflowFlowComponent(
-        <Node
-          id="node-1"
-          data={createData({ url: '' })}
-        />,
-        { nodes: [], edges: [] },
-      )
-
-      expect(screen.queryByText(Method.get)).not.toBeInTheDocument()
-      expect(screen.queryByText('https://api.example.com')).not.toBeInTheDocument()
-    })
-
-    it('should render the panel sections and output vars', async () => {
-      renderPanel()
-
-      expect(screen.getByText('body:string'))!.toBeInTheDocument()
-      expect(screen.getByText('status_code:number'))!.toBeInTheDocument()
-      expect(screen.getByText('headers:object'))!.toBeInTheDocument()
-      expect(screen.getByText('files:Array[File]'))!.toBeInTheDocument()
-      expect(screen.getAllByText('workflow.nodes.http.authorization.authorization').length).toBeGreaterThan(0)
-      expect(screen.getByText('workflow.nodes.http.curl.title'))!.toBeInTheDocument()
-      expect(screen.getByText('curl-panel'))!.toBeInTheDocument()
-    })
-
-    it('should hide modal overlays when the panel is readonly', () => {
-      mockUseConfig.mockReturnValueOnce(createConfigResult({
-        readOnly: true,
-      }))
-
-      renderPanel()
-
-      expect(screen.queryByText('curl-panel')).not.toBeInTheDocument()
-      expect(screen.queryByText('workflow.nodes.http.authorization.api-key-title')).not.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
deleted file mode 100644
index df993078605..00000000000
--- a/web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import * as React from 'react'
-import { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { LayoutGrid02 } from '@/app/components/base/icons/src/vender/line/layout'
-import TextEditor from '@/app/components/workflow/nodes/_base/components/editor/text-editor'
-
-const i18nPrefix = 'nodes.http'
-
-type Props = Readonly<{
-  value: string
-  onChange: (value: string) => void
-  onSwitchToKeyValueEdit: () => void
-}>
-
-const BulkEdit: FC<Props> = ({
-  value,
-  onChange,
-  onSwitchToKeyValueEdit,
-}) => {
-  const { t } = useTranslation()
-  const [tempValue, setTempValue] = React.useState(value)
-
-  const handleChange = useCallback((value: string) => {
-    setTempValue(value)
-  }, [])
-
-  const handleBlur = useCallback(() => {
-    onChange(tempValue)
-  }, [tempValue, onChange])
-
-  const handleSwitchToKeyValueEdit = useCallback(() => {
-    onChange(tempValue)
-    onSwitchToKeyValueEdit()
-  }, [tempValue, onChange, onSwitchToKeyValueEdit])
-
-  return (
-    <div>
-      <TextEditor
-        isInNode
-        title={<div className="uppercase">{t(`${i18nPrefix}.bulkEdit`, { ns: 'workflow' })}</div>}
-        value={tempValue}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        headerRight={(
-          <div className="flex h-[18px] items-center">
-            <div
-              className="flex cursor-pointer items-center space-x-1"
-              onClick={handleSwitchToKeyValueEdit}
-            >
-              <LayoutGrid02 className="size-3 text-gray-500" />
-              <div className="text-xs leading-[18px] font-normal text-gray-500">{t(`${i18nPrefix}.keyValueEdit`, { ns: 'workflow' })}</div>
-            </div>
-            <div className="mr-1.5 ml-3 h-3 w-px bg-gray-200"></div>
-          </div>
-        )}
-        minHeight={150}
-      />
-    </div>
-  )
-}
-export default React.memo(BulkEdit)
diff --git a/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
deleted file mode 100644
index d01b4b46cf5..00000000000
--- a/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
+++ /dev/null
@@ -1,667 +0,0 @@
-import type { NodeOutPutVar } from '../../../types'
-import type { Condition, LoopNodeType, LoopVariable } from '../types'
-import type { PanelProps } from '@/types/workflow'
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { ErrorHandleMode, ValueType } from '@/app/components/workflow/types'
-import {
-  BlockEnum,
-  VarType,
-} from '../../../types'
-import { VarType as NumberVarType } from '../../tool/types'
-import AddBlock from '../add-block'
-import ConditionAdd from '../components/condition-add'
-import ConditionFilesListValue from '../components/condition-files-list-value'
-import ConditionList from '../components/condition-list'
-import ConditionItem from '../components/condition-list/condition-item'
-import ConditionOperator from '../components/condition-list/condition-operator'
-import ConditionNumberInput from '../components/condition-number-input'
-import ConditionValue from '../components/condition-value'
-import LoopVariables from '../components/loop-variables'
-import FormItem from '../components/loop-variables/form-item'
-import InputModeSelect from '../components/loop-variables/input-mode-selec'
-import VariableTypeSelect from '../components/loop-variables/variable-type-select'
-import InsertBlock from '../insert-block'
-import Node from '../node'
-import Panel from '../panel'
-import {
-  ComparisonOperator,
-  LogicalOperator,
-} from '../types'
-import useConfig from '../use-config'
-
-const mockHandleNodeAdd = vi.fn()
-const mockHandleNodeLoopRerender = vi.fn()
-const mockToastNotify = vi.fn()
-
-vi.mock('reactflow', async () => {
-  const actual = await vi.importActual<typeof import('reactflow')>('reactflow')
-  return {
-    ...actual,
-    Background: ({ id }: { id: string }) => <div data-testid={id} />,
-    useViewport: () => ({ zoom: 1 }),
-    useNodesInitialized: () => true,
-    useStore: (selector: (state: { d3Selection: null, d3Zoom: null }) => unknown) => selector({
-      d3Selection: null,
-      d3Zoom: null,
-    }),
-  }
-})
-
-vi.mock('@/app/components/workflow/block-selector', () => ({
-  __esModule: true,
-  default: ({
-    onSelect,
-    onOpenChange,
-    open,
-    availableBlocksTypes = [],
-    trigger,
-    disabled,
-  }: {
-    onSelect?: (type: BlockEnum) => void
-    onOpenChange?: (open: boolean) => void
-    open?: boolean
-    availableBlocksTypes?: BlockEnum[]
-    trigger?: (open: boolean) => React.ReactNode
-    disabled?: boolean
-  }) => (
-    <div>
-      {trigger ? <div>{trigger(Boolean(open))}</div> : null}
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => {
-          onOpenChange?.(!open)
-          onSelect?.(availableBlocksTypes[0] ?? BlockEnum.LLM)
-        }}
-      >
-        select-block
-      </button>
-    </div>
-  ),
-}))
-
-vi.mock('../../loop-start', () => ({
-  LoopStartNodeDumb: () => <div>loop-start-node</div>,
-}))
-
-vi.mock('../use-interactions', () => ({
-  useNodeLoopInteractions: () => ({
-    handleNodeLoopRerender: mockHandleNodeLoopRerender,
-  }),
-}))
-
-vi.mock('../../../hooks', () => ({
-  useAvailableBlocks: () => ({
-    availablePrevBlocks: [],
-    availableNextBlocks: [BlockEnum.LLM],
-  }),
-  useNodesInteractions: () => ({
-    handleNodeAdd: mockHandleNodeAdd,
-  }),
-  useNodesReadOnly: () => ({
-    nodesReadOnly: false,
-  }),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-vars', () => ({
-  __esModule: true,
-  default: ({ onChange }: { onChange: (valueSelector: string[], varItem: { type: VarType }) => void }) => (
-    <button
-      type="button"
-      onClick={() => onChange(['node-1', 'score'], { type: VarType.number })}
-    >
-      pick-var
-    </button>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
-  __esModule: true,
-  default: ({ onChange }: { onChange: (value: string) => void }) => (
-    <button
-      type="button"
-      onClick={() => onChange('{{#node-1.score#}}')}
-    >
-      pick-reference
-    </button>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/variable-label', () => ({
-  VariableLabelInNode: ({ variables }: { variables: string[] }) => <div>{variables.join('.')}</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable-tag', () => ({
-  __esModule: true,
-  default: ({ valueSelector }: { valueSelector: string[] }) => <div>{valueSelector.join('.')}</div>,
-}))
-
-const mockWorkflowStoreState = {
-  controlPromptEditorRerenderKey: 0,
-  pipelineId: undefined as string | undefined,
-  setShowInputFieldPanel: vi.fn(),
-}
-
-vi.mock('@/app/components/workflow/store', () => ({
-  useStore: (selector: (state: typeof mockWorkflowStoreState) => unknown) => selector(mockWorkflowStoreState),
-  useWorkflowStore: () => ({
-    getState: () => ({
-      ...mockWorkflowStoreState,
-      conversationVariables: [],
-      dataSourceList: [],
-      setControlPromptEditorRerenderKey: vi.fn(),
-    }),
-  }),
-}))
-
-vi.mock('../../variable-assigner/hooks', () => ({
-  useGetAvailableVars: () => () => [
-    {
-      nodeId: 'node-1',
-      title: 'Start Node',
-      vars: [
-        {
-          variable: 'score',
-          type: VarType.number,
-        },
-      ],
-    },
-  ],
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
-  __esModule: true,
-  default: ({ value, onChange }: { value: string, onChange: (value: string) => void }) => (
-    <textarea
-      aria-label="code-editor"
-      value={value}
-      onChange={e => onChange(e.target.value)}
-    />
-  ),
-}))
-
-vi.mock('@langgenius/dify-ui/toast', () => ({
-  toast: {
-    success: (message: string) => mockToastNotify({ type: 'success', message }),
-    error: (message: string) => mockToastNotify({ type: 'error', message }),
-    warning: (message: string) => mockToastNotify({ type: 'warning', message }),
-    info: (message: string) => mockToastNotify({ type: 'info', message }),
-  },
-}))
-
-vi.mock('../../_base/components/input-number-with-slider', () => ({
-  __esModule: true,
-  default: ({ value, onChange }: { value: number, onChange: (value: number) => void }) => (
-    <input
-      aria-label="loop-count"
-      type="number"
-      value={value}
-      onChange={e => onChange(Number(e.target.value))}
-    />
-  ),
-}))
-
-vi.mock('../../_base/components/split', () => ({
-  __esModule: true,
-  default: ({ className }: { className?: string }) => <div data-testid="split" className={className} />,
-}))
-
-vi.mock('../use-config', () => ({
-  __esModule: true,
-  default: vi.fn(),
-}))
-
-const mockUseConfig = vi.mocked(useConfig)
-
-const createCondition = (overrides: Partial<Condition> = {}): Condition => ({
-  id: 'condition-1',
-  varType: VarType.string,
-  variable_selector: ['node-1', 'answer'],
-  comparison_operator: ComparisonOperator.contains,
-  value: 'hello',
-  ...overrides,
-})
-
-const createLoopVariable = (overrides: Partial<LoopVariable> = {}): LoopVariable => ({
-  id: 'loop-var-1',
-  label: 'item',
-  var_type: VarType.string,
-  value_type: ValueType.constant,
-  value: 'value',
-  ...overrides,
-})
-
-const createNodeOutputVar = (vars: NodeOutPutVar['vars']): NodeOutPutVar => ({
-  nodeId: 'node-1',
-  title: 'Start Node',
-  vars,
-})
-
-const createData = (overrides: Partial<LoopNodeType> = {}): LoopNodeType => ({
-  title: 'Loop',
-  desc: '',
-  type: BlockEnum.Loop,
-  start_node_id: 'start-node',
-  loop_id: 'loop-node',
-  logical_operator: LogicalOperator.and,
-  break_conditions: [createCondition()],
-  loop_count: 3,
-  error_handle_mode: ErrorHandleMode.ContinueOnError,
-  loop_variables: [createLoopVariable()],
-  _children: [],
-  isInIteration: false,
-  isInLoop: false,
-  ...overrides,
-})
-
-const createConfigResult = (overrides: Partial<ReturnType<typeof useConfig>> = {}): ReturnType<typeof useConfig> => ({
-  readOnly: false,
-  inputs: createData(),
-  filterInputVar: vi.fn(() => true),
-  childrenNodeVars: [createNodeOutputVar([{ variable: 'answer', type: VarType.string }])],
-  loopChildrenNodes: [
-    {
-      id: 'node-1',
-      data: {
-        title: 'Start Node',
-        type: BlockEnum.Start,
-      },
-    } as ReturnType<typeof useConfig>['loopChildrenNodes'][number],
-  ],
-  handleAddCondition: vi.fn(),
-  handleRemoveCondition: vi.fn(),
-  handleUpdateCondition: vi.fn(),
-  handleToggleConditionLogicalOperator: vi.fn(),
-  handleAddSubVariableCondition: vi.fn(),
-  handleUpdateSubVariableCondition: vi.fn(),
-  handleRemoveSubVariableCondition: vi.fn(),
-  handleToggleSubVariableConditionLogicalOperator: vi.fn(),
-  handleUpdateLoopCount: vi.fn(),
-  changeErrorResponseMode: vi.fn(),
-  handleAddLoopVariable: vi.fn(),
-  handleRemoveLoopVariable: vi.fn(),
-  handleUpdateLoopVariable: vi.fn(),
-  ...overrides,
-})
-
-const panelProps: PanelProps = {
-  getInputVars: vi.fn(() => []),
-  toVarInputs: vi.fn(() => []),
-  runInputData: {},
-  runInputDataRef: { current: {} },
-  setRunInputData: vi.fn(),
-  runResult: null,
-}
-
-describe('loop path', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockHandleNodeAdd.mockReset()
-    mockHandleNodeLoopRerender.mockReset()
-    mockWorkflowStoreState.controlPromptEditorRerenderKey = 0
-    mockWorkflowStoreState.pipelineId = undefined
-    mockWorkflowStoreState.setShowInputFieldPanel = vi.fn()
-    mockUseConfig.mockReturnValue(createConfigResult())
-  })
-
-  describe('Condition controls', () => {
-    it('should add a condition variable from the selector', async () => {
-      const user = userEvent.setup()
-      const onSelectVariable = vi.fn()
-
-      render(
-        <ConditionAdd
-          variables={[createNodeOutputVar([{ variable: 'score', type: VarType.number }])]}
-          onSelectVariable={onSelectVariable}
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: /workflow.nodes.ifElse.addCondition/i }))
-      await user.click(screen.getByText('pick-var'))
-
-      expect(onSelectVariable).toHaveBeenCalledWith(['node-1', 'score'], { type: VarType.number })
-    })
-
-    it('should switch operators and number input modes', async () => {
-      const user = userEvent.setup()
-      const onSelect = vi.fn()
-      const onNumberVarTypeChange = vi.fn()
-      const onValueChange = vi.fn()
-
-      render(
-        <div>
-          <ConditionOperator
-            varType={VarType.string}
-            value={ComparisonOperator.contains}
-            onSelect={onSelect}
-          />
-          <ConditionNumberInput
-            value="12"
-            numberVarType={NumberVarType.constant}
-            onNumberVarTypeChange={onNumberVarTypeChange}
-            onValueChange={onValueChange}
-            variables={[createNodeOutputVar([{ variable: 'score', type: VarType.number }])]}
-            unit="%"
-          />
-        </div>,
-      )
-
-      await user.click(screen.getByRole('button', { name: /contains/i }))
-      await user.click(screen.getByText('workflow.nodes.ifElse.comparisonOperator.is'))
-      await user.click(screen.getByRole('button', { name: /constant/i }))
-      await user.click(screen.getByText('Variable'))
-      fireEvent.change(screen.getByDisplayValue('12'), { target: { value: '42' } })
-
-      expect(onSelect.mock.calls[0]?.[0]).toBe(ComparisonOperator.is)
-      expect(onNumberVarTypeChange.mock.calls[0]?.[0]).toBe(NumberVarType.variable)
-      expect(onValueChange).toHaveBeenCalledWith('42')
-    })
-
-    it('should toggle logical operators for a condition list with boolean conditions', async () => {
-      const user = userEvent.setup()
-      const onToggleConditionLogicalOperator = vi.fn()
-
-      render(
-        <ConditionList
-          conditions={[
-            createCondition({
-              id: 'condition-1',
-              varType: VarType.boolean,
-              comparison_operator: ComparisonOperator.is,
-              value: true,
-            }),
-            createCondition({
-              id: 'condition-2',
-              varType: VarType.boolean,
-              comparison_operator: ComparisonOperator.is,
-              value: false,
-            }),
-          ]}
-          logicalOperator={LogicalOperator.and}
-          nodeId="loop-node"
-          availableNodes={[]}
-          numberVariables={[]}
-          availableVars={[]}
-          onToggleConditionLogicalOperator={onToggleConditionLogicalOperator}
-        />,
-      )
-
-      await user.click(screen.getByText('AND'))
-
-      expect(onToggleConditionLogicalOperator).toHaveBeenCalled()
-    })
-
-    it('should render condition values, file sub-conditions, and select updates', async () => {
-      const onUpdateCondition = vi.fn()
-      const onRemoveCondition = vi.fn()
-      const onAddSubVariableCondition = vi.fn()
-
-      render(
-        <div>
-          <ConditionValue
-            variableSelector={['node-1', 'answer']}
-            operator={ComparisonOperator.contains}
-            value="{{#node-1.answer#}}"
-          />
-          <ConditionFilesListValue
-            condition={{
-              id: 'condition-files',
-              varType: VarType.object,
-              variable_selector: ['node-1', 'files'],
-              comparison_operator: ComparisonOperator.contains,
-              value: '',
-              sub_variable_condition: {
-                logical_operator: LogicalOperator.or,
-                conditions: [
-                  {
-                    id: 'sub-condition',
-                    key: 'name',
-                    varType: VarType.string,
-                    comparison_operator: ComparisonOperator.contains,
-                    value: 'report',
-                  },
-                ],
-              },
-            }}
-          />
-          <ConditionItem
-            conditionId="condition-select"
-            condition={{
-              id: 'condition-select',
-              key: 'type',
-              varType: VarType.string,
-              comparison_operator: ComparisonOperator.in,
-              value: ['pdf'],
-            }}
-            isSubVariableKey
-            nodeId="loop-node"
-            availableNodes={[]}
-            numberVariables={[]}
-            availableVars={[]}
-            onUpdateSubVariableCondition={vi.fn()}
-            onRemoveSubVariableCondition={vi.fn()}
-            onAddSubVariableCondition={onAddSubVariableCondition}
-          />
-          <ConditionItem
-            conditionId="condition-string"
-            condition={createCondition({ id: 'condition-string', value: 'draft' })}
-            nodeId="loop-node"
-            availableNodes={[]}
-            numberVariables={[]}
-            availableVars={[]}
-            onUpdateCondition={onUpdateCondition}
-            onRemoveCondition={onRemoveCondition}
-          />
-        </div>,
-      )
-
-      expect(screen.getAllByText('node-1.answer')).toHaveLength(2)
-      expect(screen.getByText('{{answer}}')).toBeInTheDocument()
-      expect(screen.getByText('node-1.files')).toBeInTheDocument()
-      expect(screen.getByText('name')).toBeInTheDocument()
-      expect(screen.getByText('report')).toBeInTheDocument()
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-
-      expect(onUpdateCondition).not.toHaveBeenCalled()
-      expect(onRemoveCondition).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Loop variables', () => {
-    it('should render empty state and update loop variable items', async () => {
-      const user = userEvent.setup()
-      const handleRemoveLoopVariable = vi.fn()
-      const handleUpdateLoopVariable = vi.fn()
-
-      const { rerender } = render(
-        <LoopVariables
-          variables={[]}
-          nodeId="loop-node"
-          handleRemoveLoopVariable={handleRemoveLoopVariable}
-          handleUpdateLoopVariable={handleUpdateLoopVariable}
-        />,
-      )
-
-      expect(screen.getByText('workflow.nodes.loop.setLoopVariables')).toBeInTheDocument()
-
-      rerender(
-        <LoopVariables
-          variables={[createLoopVariable({
-            value_type: ValueType.variable,
-            value: '',
-          })]}
-          nodeId="loop-node"
-          handleRemoveLoopVariable={handleRemoveLoopVariable}
-          handleUpdateLoopVariable={handleUpdateLoopVariable}
-        />,
-      )
-
-      fireEvent.change(screen.getByDisplayValue('item'), { target: { value: 'loop_item' } })
-      await user.click(screen.getByText('pick-reference'))
-      await user.click(screen.getAllByRole('button').at(-1)!)
-
-      expect(handleUpdateLoopVariable).toHaveBeenCalledWith('loop-var-1', { label: 'loop_item' })
-      expect(handleUpdateLoopVariable).toHaveBeenCalledWith('loop-var-1', { value: '{{#node-1.score#}}' })
-      expect(handleRemoveLoopVariable).toHaveBeenCalledWith('loop-var-1')
-    })
-
-    it('should render variable mode, variable type, and form values', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(
-        <div>
-          <InputModeSelect
-            value={ValueType.constant}
-            onChange={vi.fn()}
-          />
-          <VariableTypeSelect
-            value={VarType.string}
-            onChange={vi.fn()}
-          />
-          <FormItem
-            nodeId="loop-node"
-            item={createLoopVariable({
-              value_type: ValueType.constant,
-              var_type: VarType.arrayBoolean,
-              value: [false],
-            })}
-            onChange={onChange}
-          />
-        </div>,
-      )
-
-      expect(screen.getByText('Constant')).toBeInTheDocument()
-      expect(screen.getByText('String')).toBeInTheDocument()
-      await user.click(screen.getByText('True'))
-      await user.click(screen.getByRole('button', { name: /workflow.chatVariable.modal.addArrayValue/i }))
-
-      expect(onChange).toHaveBeenCalledWith([true])
-      expect(onChange).toHaveBeenCalledWith([false, false])
-    })
-
-    it('should edit string and object loop variable values', () => {
-      const onStringChange = vi.fn()
-      const onObjectChange = vi.fn()
-
-      render(
-        <div>
-          <FormItem
-            nodeId="loop-node"
-            item={createLoopVariable({
-              id: 'loop-var-string',
-              var_type: VarType.string,
-              value_type: ValueType.constant,
-              value: 'draft',
-            })}
-            onChange={onStringChange}
-          />
-          <FormItem
-            nodeId="loop-node"
-            item={createLoopVariable({
-              id: 'loop-var-object',
-              var_type: VarType.arrayObject,
-              value_type: ValueType.constant,
-              value: '[{"id":1}]',
-            })}
-            onChange={onObjectChange}
-          />
-        </div>,
-      )
-
-      fireEvent.change(screen.getByDisplayValue('draft'), { target: { value: 'published' } })
-      fireEvent.change(screen.getByLabelText('code-editor'), { target: { value: '[{"id":2}]' } })
-
-      expect(onStringChange).toHaveBeenCalledWith('published')
-      expect(onObjectChange).toHaveBeenCalledWith('[{"id":2}]')
-    })
-  })
-
-  describe('Node actions', () => {
-    it('should add and insert loop blocks', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <div>
-          <AddBlock
-            loopNodeId="loop-node"
-            loopNodeData={createData({ start_node_id: 'start-node' })}
-          />
-          <InsertBlock
-            startNodeId="start-node"
-            availableBlocksTypes={[BlockEnum.Code]}
-          />
-        </div>,
-      )
-
-      await user.click(screen.getAllByText('select-block')[0]!)
-      await user.click(screen.getAllByText('select-block')[1]!)
-
-      expect(mockHandleNodeAdd).toHaveBeenCalledTimes(2)
-      expect(mockHandleNodeAdd).toHaveBeenCalledWith(expect.objectContaining({
-        nodeType: expect.any(String),
-      }), expect.objectContaining({
-        prevNodeId: 'start-node',
-        prevNodeSourceHandle: 'source',
-      }))
-      expect(mockHandleNodeAdd).toHaveBeenCalledWith(expect.objectContaining({
-        nodeType: expect.any(String),
-      }), expect.objectContaining({
-        nextNodeId: 'start-node',
-        nextNodeTargetHandle: 'target',
-      }))
-    })
-
-    it('should render loop node candidate state and rerender children', () => {
-      render(
-        <Node
-          id="loop-node"
-          data={createData({
-            _isCandidate: true,
-            _children: [{ nodeId: 'child-1', nodeType: BlockEnum.LoopStart }],
-          })}
-        />,
-      )
-
-      expect(screen.getByText('loop-start-node')).toBeInTheDocument()
-      expect(screen.getByTestId('loop-background-loop-node')).toBeInTheDocument()
-      expect(screen.getByText('select-block')).toBeInTheDocument()
-      expect(mockHandleNodeLoopRerender).toHaveBeenCalledWith('loop-node')
-    })
-  })
-
-  describe('Panel integration', () => {
-    it('should add loop variables and update loop count from the panel', async () => {
-      const handleAddLoopVariable = vi.fn()
-      const handleUpdateLoopCount = vi.fn()
-
-      mockUseConfig.mockReturnValueOnce(createConfigResult({
-        inputs: createData({
-          break_conditions: [],
-          loop_variables: [],
-        }),
-        handleAddLoopVariable,
-        handleUpdateLoopCount,
-      }))
-
-      const { container } = render(
-        <Panel
-          id="loop-node"
-          data={createData({
-            break_conditions: [],
-            loop_variables: [],
-          })}
-          panelProps={panelProps}
-        />,
-      )
-
-      fireEvent.click(container.querySelector('.mr-4.flex.size-5.cursor-pointer.items-center.justify-center') as HTMLElement)
-      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '8' } })
-
-      expect(handleAddLoopVariable).toHaveBeenCalled()
-      expect(handleUpdateLoopCount).toHaveBeenCalledWith(8)
-      expect(screen.getByText('workflow.nodes.loop.setLoopVariables')).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/loop/components/condition-files-list-value.tsx b/web/app/components/workflow/nodes/loop/components/condition-files-list-value.tsx
deleted file mode 100644
index 65ef0218f99..00000000000
--- a/web/app/components/workflow/nodes/loop/components/condition-files-list-value.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import type { ValueSelector } from '../../../types'
-import type { Condition } from '../types'
-import {
-  memo,
-  useCallback,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import {
-  VariableLabelInNode,
-} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
-import { ComparisonOperator } from '../types'
-import {
-  comparisonOperatorNotRequireValue,
-  isComparisonOperatorNeedTranslate,
-  isEmptyRelatedOperator,
-} from '../utils'
-import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from './../default'
-
-const i18nPrefix = 'nodes.ifElse'
-
-type ConditionValueProps = {
-  condition: Condition
-}
-const ConditionValue = ({
-  condition,
-}: ConditionValueProps) => {
-  const { t } = useTranslation()
-  const {
-    variable_selector,
-    comparison_operator: operator,
-    sub_variable_condition,
-  } = condition
-
-  const variableSelector = variable_selector as ValueSelector
-
-  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`nodes.ifElse.comparisonOperator.${operator}`, { ns: 'workflow' }) : operator
-  const formatValue = useCallback((c: Condition) => {
-    const notHasValue = comparisonOperatorNotRequireValue(c.comparison_operator)
-    if (notHasValue)
-      return ''
-
-    const value = c.value as string
-    return value.replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
-      const arr: string[] = b.split('.')
-      if (isSystemVar(arr))
-        return `{{${b}}}`
-
-      return `{{${arr.slice(1).join('.')}}}`
-    })
-  }, [])
-
-  const isSelect = useCallback((c: Condition) => {
-    return c.comparison_operator === ComparisonOperator.in || c.comparison_operator === ComparisonOperator.notIn
-  }, [])
-
-  const selectName = useCallback((c: Condition) => {
-    const isSelect = c.comparison_operator === ComparisonOperator.in || c.comparison_operator === ComparisonOperator.notIn
-    if (isSelect) {
-      const name = [...FILE_TYPE_OPTIONS, ...TRANSFER_METHOD].filter(item => item.value === (Array.isArray(c.value) ? c.value[0] : c.value))[0]
-      return name
-        ? t(`nodes.ifElse.optionName.${name.i18nKey}`, { ns: 'workflow' }).replace(/\{\{#([^#]*)#\}\}/g, (a: string, b: string) => {
-            const arr: string[] = b.split('.')
-            if (isSystemVar(arr))
-              return `{{${b}}}`
-
-            return `{{${arr.slice(1).join('.')}}}`
-          })
-        : ''
-    }
-    return ''
-  }, [t])
-
-  return (
-    <div className="rounded-md bg-workflow-block-parma-bg">
-      <div className="flex h-6 items-center px-1">
-        <VariableLabelInNode
-          className="w-0 grow"
-          variables={variableSelector}
-          notShowFullPath
-        />
-        <div
-          className="mx-1 shrink-0 text-xs font-medium text-text-primary"
-          title={operatorName}
-        >
-          {operatorName}
-        </div>
-      </div>
-      <div className="ml-[10px] border-l border-divider-regular pl-[10px]">
-        {
-          sub_variable_condition?.conditions.map((c: Condition, index) => (
-            <div className="relative flex h-6 items-center space-x-1" key={c.id}>
-              <div className="system-xs-medium text-text-accent">{c.key}</div>
-              <div className="system-xs-medium text-text-primary">{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`nodes.ifElse.comparisonOperator.${c.comparison_operator}`, { ns: 'workflow' }) : c.comparison_operator}</div>
-              {c.comparison_operator && !isEmptyRelatedOperator(c.comparison_operator) && <div className="system-xs-regular text-text-secondary">{isSelect(c) ? selectName(c) : formatValue(c)}</div>}
-              {index !== sub_variable_condition.conditions.length - 1 && (<div className="absolute right-1 bottom-[-10px] z-10 text-[10px] leading-4 font-medium text-text-accent uppercase">{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`, { ns: 'workflow' })}</div>)}
-            </div>
-          ))
-        }
-      </div>
-    </div>
-  )
-}
-
-export default memo(ConditionValue)
diff --git a/web/app/components/workflow/nodes/loop/components/condition-value.tsx b/web/app/components/workflow/nodes/loop/components/condition-value.tsx
deleted file mode 100644
index f1aeaa29d25..00000000000
--- a/web/app/components/workflow/nodes/loop/components/condition-value.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  memo,
-  useMemo,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import {
-  VariableLabelInNode,
-} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
-import { ComparisonOperator } from '../types'
-import {
-  comparisonOperatorNotRequireValue,
-  isComparisonOperatorNeedTranslate,
-} from '../utils'
-import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from './../default'
-
-type ConditionValueProps = {
-  variableSelector: string[]
-  labelName?: string
-  operator: ComparisonOperator
-  value: string | string[]
-}
-const ConditionValue = ({
-  variableSelector,
-  labelName: _labelName,
-  operator,
-  value,
-}: ConditionValueProps) => {
-  const { t } = useTranslation()
-  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`nodes.ifElse.comparisonOperator.${operator}`, { ns: 'workflow' }) : operator
-  const notHasValue = comparisonOperatorNotRequireValue(operator)
-  const formatValue = useMemo(() => {
-    if (notHasValue)
-      return ''
-
-    if (Array.isArray(value)) // transfer method
-      return value[0]
-
-    return value.replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
-      const arr: string[] = b.split('.')
-      if (isSystemVar(arr))
-        return `{{${b}}}`
-
-      return `{{${arr.slice(1).join('.')}}}`
-    })
-  }, [notHasValue, value])
-
-  const isSelect = operator === ComparisonOperator.in || operator === ComparisonOperator.notIn
-  const selectName = useMemo(() => {
-    if (isSelect) {
-      const name = [...FILE_TYPE_OPTIONS, ...TRANSFER_METHOD].filter(item => item.value === (Array.isArray(value) ? value[0] : value))[0]
-      return name
-        ? t(`nodes.ifElse.optionName.${name.i18nKey}`, { ns: 'workflow' }).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
-            const arr: string[] = b.split('.')
-            if (isSystemVar(arr))
-              return `{{${b}}}`
-
-            return `{{${arr.slice(1).join('.')}}}`
-          })
-        : ''
-    }
-    return ''
-  }, [isSelect, t, value])
-
-  return (
-    <div className="flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1">
-      <VariableLabelInNode
-        className="w-0 grow"
-        variables={variableSelector}
-        notShowFullPath
-      />
-      <div
-        className="mx-1 shrink-0 text-xs font-medium text-text-primary"
-        title={operatorName}
-      >
-        {operatorName}
-      </div>
-      {
-        !notHasValue && (
-          <div className="truncate text-xs text-text-secondary" title={formatValue}>{isSelect ? selectName : formatValue}</div>
-        )
-      }
-    </div>
-  )
-}
-
-export default memo(ConditionValue)
diff --git a/web/app/components/workflow/nodes/loop/insert-block.tsx b/web/app/components/workflow/nodes/loop/insert-block.tsx
deleted file mode 100644
index f05b690e72b..00000000000
--- a/web/app/components/workflow/nodes/loop/insert-block.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type {
-  BlockEnum,
-  OnSelectBlock,
-} from '../../types'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  memo,
-  useCallback,
-  useState,
-} from 'react'
-import BlockSelector from '../../block-selector'
-import { useNodesInteractions } from '../../hooks'
-
-type InsertBlockProps = {
-  startNodeId: string
-  availableBlocksTypes: BlockEnum[]
-}
-const InsertBlock = ({
-  startNodeId,
-  availableBlocksTypes,
-}: InsertBlockProps) => {
-  const [open, setOpen] = useState(false)
-  const { handleNodeAdd } = useNodesInteractions()
-
-  const handleOpenChange = useCallback((v: boolean) => {
-    setOpen(v)
-  }, [])
-  const handleInsert = useCallback<OnSelectBlock>((nodeType, pluginDefaultValue) => {
-    handleNodeAdd(
-      {
-        nodeType,
-        pluginDefaultValue,
-      },
-      {
-        nextNodeId: startNodeId,
-        nextNodeTargetHandle: 'target',
-      },
-    )
-  }, [startNodeId, handleNodeAdd])
-
-  return (
-    <div
-      className={cn(
-        'nopan nodrag',
-        'absolute top-1/2 left-1/2 hidden -translate-1/2 group-hover/insert:block',
-        open && 'block!',
-      )}
-    >
-      <BlockSelector
-        open={open}
-        onOpenChange={handleOpenChange}
-        onSelect={handleInsert}
-        snippetInsertPayload={{
-          nextNodeId: startNodeId,
-          nextNodeTargetHandle: 'target',
-        }}
-        availableBlocksTypes={availableBlocksTypes}
-        triggerClassName={() => 'hover:scale-125 transition-all'}
-      />
-    </div>
-  )
-}
-
-export default memo(InsertBlock)
diff --git a/web/app/components/workflow/nodes/tool/components/__tests__/input-var-list.spec.tsx b/web/app/components/workflow/nodes/tool/components/__tests__/input-var-list.spec.tsx
deleted file mode 100644
index 872882e5f84..00000000000
--- a/web/app/components/workflow/nodes/tool/components/__tests__/input-var-list.spec.tsx
+++ /dev/null
@@ -1,519 +0,0 @@
-import type { ToolVarInputs } from '../../types'
-import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import type { App } from '@/types/app'
-import { screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { useState } from 'react'
-import { createMockProviderContextValue } from '@/__mocks__/provider-context'
-import { renderWithSystemFeatures } from '@/__tests__/utils/mock-system-features'
-import {
-  ConfigurationMethodEnum,
-  FormTypeEnum,
-  ModelStatusEnum,
-  ModelTypeEnum,
-} from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { VarType } from '@/app/components/workflow/types'
-import { ProviderContext } from '@/context/provider-context'
-import { AppModeEnum } from '@/types/app'
-import { VarType as ToolVarType } from '../../types'
-import InputVarList from '../input-var-list'
-
-const mockUseAvailableVarList = vi.fn()
-const mockFetchNextPage = vi.fn()
-const mockApps: App[] = [
-  {
-    id: 'app-1',
-    name: 'Weather Assistant',
-    mode: AppModeEnum.CHAT,
-    icon_type: 'emoji',
-    icon: 'W',
-    icon_background: '#FFEAD5',
-    model_config: {
-      user_input_form: [{
-        'text-input': {
-          label: 'Topic',
-          variable: 'topic',
-        },
-      }],
-    },
-  } as App,
-]
-
-class MockIntersectionObserver {
-  observe = vi.fn()
-  disconnect = vi.fn()
-  unobserve = vi.fn()
-  root = null
-  rootMargin = ''
-  thresholds: number[] = []
-  takeRecords = vi.fn().mockReturnValue([])
-
-  constructor(_callback: IntersectionObserverCallback) {}
-}
-
-class MockMutationObserver {
-  observe = vi.fn()
-  disconnect = vi.fn()
-  takeRecords = vi.fn().mockReturnValue([])
-
-  constructor(_callback: MutationCallback) {}
-}
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
-  useLanguage: () => 'en_US',
-  useModelList: () => ({
-    data: [{
-      provider: 'openai',
-      icon_small: {
-        en_US: 'https://example.com/openai.png',
-        zh_Hans: 'https://example.com/openai.png',
-      },
-      label: {
-        en_US: 'OpenAI',
-        zh_Hans: 'OpenAI',
-      },
-      models: [{
-        model: 'gpt-4o',
-        label: {
-          en_US: 'GPT-4o',
-          zh_Hans: 'GPT-4o',
-        },
-        model_type: ModelTypeEnum.textGeneration,
-        fetch_from: ConfigurationMethodEnum.predefinedModel,
-        status: ModelStatusEnum.active,
-        model_properties: {
-          mode: 'chat',
-        },
-        load_balancing_enabled: false,
-        features: [],
-      }],
-      status: ModelStatusEnum.active,
-    }],
-    mutate: vi.fn(),
-    isLoading: false,
-  }),
-  useMarketplaceAllPlugins: () => ({
-    plugins: [],
-    isLoading: false,
-  }),
-  useUpdateModelList: () => vi.fn(),
-  useUpdateModelProviders: () => vi.fn(),
-  useCurrentProviderAndModel: (
-    modelList: Array<{
-      provider: string
-      models: Array<{ model: string }>
-    }>,
-    defaultModel?: { provider: string, model: string },
-  ) => {
-    const currentProvider = modelList.find(provider => provider.provider === defaultModel?.provider)
-    const currentModel = currentProvider?.models.find(model => model.model === defaultModel?.model)
-
-    return {
-      currentProvider,
-      currentModel,
-    }
-  },
-}))
-
-vi.mock('@/service/use-apps', () => ({
-  useAppDetail: (appId: string) => ({
-    data: mockApps.find(app => app.id === appId),
-    isFetching: false,
-  }),
-}))
-
-vi.mock('@tanstack/react-query', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@tanstack/react-query')>()
-  return {
-    ...actual,
-    useInfiniteQuery: () => ({
-      data: {
-        pages: [{
-          data: mockApps,
-        }],
-      },
-      isLoading: false,
-      isFetchingNextPage: false,
-      fetchNextPage: mockFetchNextPage,
-      hasNextPage: false,
-    }),
-  }
-})
-
-vi.mock('@/service/use-workflow', () => ({
-  useAppWorkflow: () => ({
-    data: undefined,
-    isFetching: false,
-  }),
-}))
-
-vi.mock('@/service/use-common', () => ({
-  useFileUploadConfig: () => ({
-    data: {
-      image_file_size_limit: 10,
-      file_size_limit: 15,
-      audio_file_size_limit: 50,
-      video_file_size_limit: 100,
-      workflow_file_upload_limit: 10,
-    },
-  }),
-  useModelParameterRules: () => ({
-    data: {
-      data: [],
-    },
-    isPending: false,
-  }),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
-  __esModule: true,
-  default: (...args: unknown[]) => mockUseAvailableVarList(...args),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/input-support-select-var', () => ({
-  default: ({
-    value,
-    onChange,
-    onFocusChange,
-    placeholder,
-  }: {
-    value: string
-    onChange: (value: string) => void
-    onFocusChange?: (value: boolean) => void
-    placeholder?: string
-  }) => (
-    <input
-      aria-label={placeholder || 'mixed-input'}
-      value={value}
-      onFocus={() => onFocusChange?.(true)}
-      onBlur={() => onFocusChange?.(false)}
-      onChange={e => onChange(e.target.value)}
-    />
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
-  default: ({
-    onChange,
-    onOpen,
-    schema,
-    defaultVarKindType,
-  }: {
-    onChange: (value: string[] | string, kind: ToolVarType) => void
-    onOpen?: () => void
-    schema?: { variable?: string }
-    defaultVarKindType?: ToolVarType
-  }) => (
-    <button
-      type="button"
-      onClick={() => {
-        onOpen?.()
-        if (defaultVarKindType === ToolVarType.variable)
-          onChange(['node-1', 'file'], ToolVarType.variable)
-        else
-          onChange('42', defaultVarKindType || ToolVarType.constant)
-      }}
-    >
-      {`pick-${schema?.variable || 'var'}`}
-    </button>
-  ),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/provider-added-card/use-trial-credits', () => ({
-  useTrialCredits: () => ({
-    isExhausted: false,
-  }),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority', () => ({
-  useChangeProviderPriority: () => ({
-    isChangingPriority: false,
-    handleChangePriority: vi.fn(),
-  }),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state', () => ({
-  useCredentialPanelState: () => ({
-    variant: 'api-active',
-    priority: 'apiKeyOnly',
-    supportsCredits: false,
-    showPrioritySwitcher: false,
-    hasCredentials: true,
-    isCreditsExhausted: false,
-    credentialName: 'Primary key',
-    credits: 0,
-  }),
-}))
-
-vi.mock('@/app/components/header/account-setting/model-provider-page/model-auth/hooks', () => ({
-  useCredentialStatus: () => ({
-    hasCredential: true,
-    authorized: true,
-    current_credential_name: 'Primary key',
-  }),
-}))
-
-vi.mock('@/app/components/plugins/install-plugin/base/check-task-status', () => ({
-  default: () => ({
-    check: vi.fn(),
-  }),
-}))
-
-vi.mock('@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list', () => ({
-  default: () => ({
-    refreshPluginList: vi.fn(),
-  }),
-}))
-
-vi.mock('@/service/use-plugins', () => ({
-  useInstallPackageFromMarketPlace: () => ({
-    mutateAsync: vi.fn(),
-    isPending: false,
-  }),
-}))
-
-vi.mock('@/utils/completion-params', () => ({
-  fetchAndMergeValidCompletionParams: vi.fn(async () => ({
-    params: {},
-    removedDetails: {},
-  })),
-}))
-
-const createSchemaItem = (
-  variable: string,
-  type: FormTypeEnum,
-  overrides: Partial<CredentialFormSchema> = {},
-): CredentialFormSchema => ({
-  variable,
-  name: variable,
-  label: {
-    en_US: `${variable}-label`,
-    zh_Hans: `${variable}-label`,
-  },
-  type,
-  required: false,
-  show_on: [],
-  ...overrides,
-})
-
-type TestHarnessProps = {
-  schema: CredentialFormSchema[]
-  initialValue?: ToolVarInputs
-  onChangeSpy?: (value: ToolVarInputs) => void
-  onOpen?: (index: number) => void
-}
-
-const TestHarness = ({
-  schema,
-  initialValue = {},
-  onChangeSpy,
-  onOpen,
-}: TestHarnessProps) => {
-  const [value, setValue] = useState<ToolVarInputs>(initialValue)
-
-  return (
-    <InputVarList
-      readOnly={false}
-      nodeId="tool-node"
-      schema={schema}
-      value={value}
-      onChange={(nextValue) => {
-        setValue(nextValue)
-        onChangeSpy?.(nextValue)
-      }}
-      onOpen={onOpen}
-    />
-  )
-}
-
-const renderInputVarList = (ui: React.ReactElement) => {
-  const providerContextValue = createMockProviderContextValue({
-    isAPIKeySet: true,
-    modelProviders: [{
-      provider: 'openai',
-      label: {
-        en_US: 'OpenAI',
-        zh_Hans: 'OpenAI',
-      },
-      preferred_provider_type: 'custom',
-      configurate_methods: [ConfigurationMethodEnum.predefinedModel],
-      supported_model_types: [ModelTypeEnum.textGeneration],
-    }] as ReturnType<typeof createMockProviderContextValue>['modelProviders'],
-  })
-
-  return renderWithSystemFeatures(
-    <ProviderContext.Provider value={providerContextValue}>
-      {ui}
-    </ProviderContext.Provider>,
-  )
-}
-
-describe('InputVarList', () => {
-  beforeAll(() => {
-    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
-    vi.stubGlobal('MutationObserver', MockMutationObserver)
-  })
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockUseAvailableVarList.mockReturnValue({
-      availableVars: [{
-        nodeId: 'node-1',
-        title: 'Node 1',
-        vars: [{ variable: 'score', type: VarType.number }],
-      }],
-      availableNodesWithParent: [],
-    })
-  })
-
-  afterAll(() => {
-    vi.unstubAllGlobals()
-  })
-
-  it('should render schema labels and update mixed text inputs', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-
-    renderInputVarList(
-      <TestHarness
-        schema={[
-          createSchemaItem('query', FormTypeEnum.textInput, {
-            required: true,
-            tooltip: {
-              en_US: 'query-tip',
-              zh_Hans: 'query-tip',
-            },
-          }),
-        ]}
-        onChangeSpy={onChange}
-      />,
-    )
-
-    expect(screen.getByText('query-label')).toBeInTheDocument()
-    expect(screen.getByText('String')).toBeInTheDocument()
-    expect(screen.getByText('Required')).toBeInTheDocument()
-    expect(screen.getByText('query-tip')).toBeInTheDocument()
-
-    await user.type(screen.getByLabelText('workflow.nodes.http.insertVarPlaceholder'), 'hello')
-
-    expect(onChange).toHaveBeenLastCalledWith({
-      query: {
-        type: ToolVarType.mixed,
-        value: 'hello',
-      },
-    })
-  })
-
-  it('should transform variable picker selections for number and file fields and report picker openings', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    const onOpen = vi.fn()
-
-    renderInputVarList(
-      <TestHarness
-        schema={[
-          createSchemaItem('limit', FormTypeEnum.textNumber),
-          createSchemaItem('attachment', FormTypeEnum.file),
-        ]}
-        onOpen={onOpen}
-        onChangeSpy={onChange}
-      />,
-    )
-
-    await user.click(screen.getByRole('button', { name: 'pick-limit' }))
-    await user.click(screen.getByRole('button', { name: 'pick-var' }))
-
-    expect(onOpen).toHaveBeenNthCalledWith(1, 0)
-    expect(onOpen).toHaveBeenNthCalledWith(2, 1)
-    expect(onChange).toHaveBeenNthCalledWith(1, {
-      limit: {
-        type: ToolVarType.constant,
-        value: '42',
-      },
-    })
-    expect(onChange).toHaveBeenNthCalledWith(2, {
-      limit: {
-        type: ToolVarType.constant,
-        value: '42',
-      },
-      attachment: {
-        type: ToolVarType.variable,
-        value: ['node-1', 'file'],
-      },
-    })
-  })
-
-  it('should replace app selections and merge model selections into existing values', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-
-    renderInputVarList(
-      <TestHarness
-        schema={[
-          createSchemaItem('assistant', FormTypeEnum.appSelector),
-          createSchemaItem('model', FormTypeEnum.modelSelector, {
-            scope: 'llm',
-          }),
-        ]}
-        initialValue={{
-          model: {
-            credential_id: 'credential-1',
-          },
-        } as unknown as ToolVarInputs}
-        onChangeSpy={onChange}
-      />,
-    )
-
-    await user.click(screen.getAllByText('app.appSelector.placeholder')[0]!)
-    await user.click(screen.getAllByText('app.appSelector.placeholder')[1]!)
-    await user.click(await screen.findByRole('option', { name: /Weather Assistant/ }))
-
-    expect(onChange).toHaveBeenNthCalledWith(1, {
-      assistant: {
-        app_id: 'app-1',
-        inputs: {},
-        files: [],
-      },
-      model: {
-        credential_id: 'credential-1',
-      },
-    })
-
-    const topicInput = await screen.findByPlaceholderText('Topic')
-    await user.type(topicInput, 'weather')
-
-    await waitFor(() => {
-      expect(onChange).toHaveBeenLastCalledWith({
-        assistant: {
-          app_id: 'app-1',
-          inputs: { topic: 'weather' },
-          files: [],
-        },
-        model: {
-          credential_id: 'credential-1',
-        },
-      })
-    })
-
-    await user.click(screen.getByRole('button', { name: 'app.appSelector.label' }))
-    await user.click(screen.getByText('workflow:errorMsg.configureModel'))
-    await user.click(await screen.findByRole('combobox', { name: 'plugin.detailPanel.configureModel' }))
-    await user.click(await screen.findByRole('option', { name: /GPT-4o/i }))
-
-    expect(onChange).toHaveBeenLastCalledWith({
-      assistant: {
-        app_id: 'app-1',
-        inputs: { topic: 'weather' },
-        files: [],
-      },
-      model: {
-        completion_params: {},
-        credential_id: 'credential-1',
-        mode: 'chat',
-        provider: 'openai',
-        model: 'gpt-4o',
-        model_type: 'llm',
-      },
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
deleted file mode 100644
index 7dbcf1f8300..00000000000
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { ToolVarInputs } from '../types'
-import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import type { Tool } from '@/app/components/tools/types'
-import type { ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
-import { cn } from '@langgenius/dify-ui/cn'
-import { noop } from 'es-toolkit/function'
-import { produce } from 'immer'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { AppSelector } from '@/app/components/plugins/plugin-detail-panel/app-selector'
-import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
-import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
-import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
-import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
-import { VarType } from '@/app/components/workflow/types'
-import { VarType as VarKindType } from '../types'
-
-type Props = Readonly<{
-  readOnly: boolean
-  nodeId: string
-  schema: CredentialFormSchema[]
-  value: ToolVarInputs
-  onChange: (value: ToolVarInputs) => void
-  onOpen?: (index: number) => void
-  isSupportConstantValue?: boolean
-  filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
-  currentTool?: Tool
-  currentProvider?: ToolWithProvider
-}>
-
-const InputVarList: FC<Props> = ({
-  readOnly,
-  nodeId,
-  schema,
-  value,
-  onChange,
-  onOpen = noop,
-  isSupportConstantValue,
-  filterVar,
-  currentTool,
-  currentProvider,
-}) => {
-  const language = useLanguage()
-  const { t } = useTranslation()
-  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
-    onlyLeafNodeVar: false,
-    filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
-    },
-  })
-  const paramType = (type: string) => {
-    if (type === FormTypeEnum.textNumber)
-      return 'Number'
-    else if (type === FormTypeEnum.file || type === FormTypeEnum.files)
-      return 'Files'
-    else if (type === FormTypeEnum.appSelector)
-      return 'AppSelector'
-    else if (type === FormTypeEnum.modelSelector)
-      return 'ModelSelector'
-    else if (type === FormTypeEnum.toolSelector)
-      return 'ToolSelector'
-    else if (type === FormTypeEnum.dynamicSelect || type === FormTypeEnum.select)
-      return 'Select'
-    else
-      return 'String'
-  }
-
-  const handleNotMixedTypeChange = useCallback((variable: string) => {
-    return (varValue: ValueSelector | string, varKindType: VarKindType) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        const target = draft[variable]
-        if (target) {
-          target.type = varKindType
-          target.value = varValue
-        }
-        else {
-          draft[variable] = {
-            type: varKindType,
-            value: varValue,
-          }
-        }
-      })
-      onChange(newValue)
-    }
-  }, [value, onChange])
-
-  const handleMixedTypeChange = useCallback((variable: string) => {
-    return (itemValue: string) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        const target = draft[variable]
-        if (target) {
-          target.value = itemValue
-        }
-        else {
-          draft[variable] = {
-            type: VarKindType.mixed,
-            value: itemValue,
-          }
-        }
-      })
-      onChange(newValue)
-    }
-  }, [value, onChange])
-
-  const handleFileChange = useCallback((variable: string) => {
-    return (varValue: ValueSelector | string) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        draft[variable] = {
-          type: VarKindType.variable,
-          value: varValue,
-        }
-      })
-      onChange(newValue)
-    }
-  }, [value, onChange])
-
-  const handleAppChange = useCallback((variable: string) => {
-    return (app: {
-      app_id: string
-      inputs: Record<string, any>
-      files?: any[]
-    }) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        draft[variable] = app as any
-      })
-      onChange(newValue)
-    }
-  }, [onChange, value])
-  const handleModelChange = useCallback((variable: string) => {
-    return (model: any) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        draft[variable] = {
-          ...draft[variable],
-          ...model,
-        } as any
-      })
-      onChange(newValue)
-    }
-  }, [onChange, value])
-
-  const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
-  const handleInputFocus = useCallback((variable: string) => {
-    return (value: boolean) => {
-      setInputsIsFocus((prev) => {
-        return {
-          ...prev,
-          [variable]: value,
-        }
-      })
-    }
-  }, [])
-  const handleOpen = useCallback((index: number) => {
-    return () => onOpen(index)
-  }, [onOpen])
-
-  return (
-    <div className="space-y-3">
-      {
-        schema.map((schema, index) => {
-          const {
-            variable,
-            label,
-            type,
-            required,
-            tooltip,
-            scope,
-          } = schema
-          const varInput = value[variable]
-          const isNumber = type === FormTypeEnum.textNumber
-          const isDynamicSelect = type === FormTypeEnum.dynamicSelect
-          const isSelect = type === FormTypeEnum.select || type === FormTypeEnum.dynamicSelect
-          const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
-          const isAppSelector = type === FormTypeEnum.appSelector
-          const isModelSelector = type === FormTypeEnum.modelSelector
-          // const isToolSelector = type === FormTypeEnum.toolSelector
-          const isString = !isNumber && !isSelect && !isFile && !isAppSelector && !isModelSelector
-
-          return (
-            <div key={variable} className="space-y-1">
-              <div className="flex items-center space-x-2 leading-[18px]">
-                <span className="code-sm-semibold text-text-secondary">{label[language] || label.en_US}</span>
-                <span className="system-xs-regular text-text-tertiary">{paramType(type)}</span>
-                {required && <span className="system-xs-regular text-util-colors-orange-dark-orange-dark-600">Required</span>}
-              </div>
-              {isString && (
-                <Input
-                  className={cn(inputsIsFocus[variable] ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'rounded-lg border px-3 py-[6px]')}
-                  value={varInput?.value as string || ''}
-                  onChange={handleMixedTypeChange(variable)}
-                  readOnly={readOnly}
-                  nodesOutputVars={availableVars}
-                  availableNodes={availableNodesWithParent}
-                  onFocusChange={handleInputFocus(variable)}
-                  placeholder={t('nodes.http.insertVarPlaceholder', { ns: 'workflow' })!}
-                  placeholderClassName="leading-[21px]!"
-                />
-              )}
-              {(isNumber || isSelect) && (
-                <VarReferencePicker
-                  readonly={readOnly}
-                  isShowNodeName
-                  nodeId={nodeId}
-                  value={varInput?.type === VarKindType.constant ? (varInput?.value ?? '') : (varInput?.value ?? [])}
-                  onChange={handleNotMixedTypeChange(variable)}
-                  onOpen={handleOpen(index)}
-                  defaultVarKindType={varInput?.type || ((isNumber || isDynamicSelect) ? VarKindType.constant : VarKindType.variable)}
-                  isSupportConstantValue={isSupportConstantValue}
-                  filterVar={isNumber ? filterVar : undefined}
-                  availableVars={isSelect ? availableVars : undefined}
-                  schema={schema}
-                  currentTool={currentTool}
-                  currentProvider={currentProvider}
-                />
-              )}
-              {isFile && (
-                <VarReferencePicker
-                  readonly={readOnly}
-                  isShowNodeName
-                  nodeId={nodeId}
-                  value={varInput?.value || []}
-                  onChange={handleFileChange(variable)}
-                  onOpen={handleOpen(index)}
-                  defaultVarKindType={VarKindType.variable}
-                  filterVar={(varPayload: Var) => varPayload.type === VarType.file || varPayload.type === VarType.arrayFile}
-                />
-              )}
-              {isAppSelector && (
-                <AppSelector
-                  disabled={readOnly}
-                  scope={scope || 'all'}
-                  value={varInput as any}
-                  onSelect={handleAppChange(variable)}
-                />
-              )}
-              {isModelSelector && (
-                <ModelParameterModal
-                  popupClassName="w-[387px]!"
-                  isAdvancedMode
-                  isInWorkflow
-                  value={varInput as any}
-                  setModel={handleModelChange(variable)}
-                  readonly={readOnly}
-                  scope={scope}
-                />
-              )}
-              {tooltip && <div className="body-xs-regular text-text-tertiary">{tooltip[language] || tooltip.en_US}</div>}
-            </div>
-          )
-        })
-      }
-    </div>
-  )
-}
-export default React.memo(InputVarList)
diff --git a/web/app/components/workflow/nodes/trigger-plugin/utils/__tests__/form-helpers.spec.ts b/web/app/components/workflow/nodes/trigger-plugin/utils/__tests__/form-helpers.spec.ts
deleted file mode 100644
index 17c6767f3e8..00000000000
--- a/web/app/components/workflow/nodes/trigger-plugin/utils/__tests__/form-helpers.spec.ts
+++ /dev/null
@@ -1,308 +0,0 @@
-import { deepSanitizeFormValues, findMissingRequiredField, sanitizeFormValues } from '../form-helpers'
-
-describe('Form Helpers', () => {
-  describe('sanitizeFormValues', () => {
-    it('should convert null values to empty strings', () => {
-      const input = { field1: null, field2: 'value', field3: undefined }
-      const result = sanitizeFormValues(input)
-
-      expect(result).toEqual({
-        field1: '',
-        field2: 'value',
-        field3: '',
-      })
-    })
-
-    it('should convert undefined values to empty strings', () => {
-      const input = { field1: undefined, field2: 'test' }
-      const result = sanitizeFormValues(input)
-
-      expect(result).toEqual({
-        field1: '',
-        field2: 'test',
-      })
-    })
-
-    it('should convert non-string values to strings', () => {
-      const input = { number: 123, boolean: true, string: 'test' }
-      const result = sanitizeFormValues(input)
-
-      expect(result).toEqual({
-        number: '123',
-        boolean: 'true',
-        string: 'test',
-      })
-    })
-
-    it('should handle empty objects', () => {
-      const result = sanitizeFormValues({})
-      expect(result).toEqual({})
-    })
-
-    it('should handle objects with mixed value types', () => {
-      const input = {
-        null_field: null,
-        undefined_field: undefined,
-        zero: 0,
-        false_field: false,
-        empty_string: '',
-        valid_string: 'test',
-      }
-      const result = sanitizeFormValues(input)
-
-      expect(result).toEqual({
-        null_field: '',
-        undefined_field: '',
-        zero: '0',
-        false_field: 'false',
-        empty_string: '',
-        valid_string: 'test',
-      })
-    })
-  })
-
-  describe('deepSanitizeFormValues', () => {
-    it('should handle nested objects', () => {
-      const input = {
-        level1: {
-          field1: null,
-          field2: 'value',
-          level2: {
-            field3: undefined,
-            field4: 'nested',
-          },
-        },
-        simple: 'test',
-      }
-      const result = deepSanitizeFormValues(input)
-
-      expect(result).toEqual({
-        level1: {
-          field1: '',
-          field2: 'value',
-          level2: {
-            field3: '',
-            field4: 'nested',
-          },
-        },
-        simple: 'test',
-      })
-    })
-
-    it('should handle arrays correctly', () => {
-      const input = {
-        array: [1, 2, 3],
-        nested: {
-          array: ['a', null, 'c'],
-        },
-      }
-      const result = deepSanitizeFormValues(input)
-
-      expect(result).toEqual({
-        array: [1, 2, 3],
-        nested: {
-          array: ['a', null, 'c'],
-        },
-      })
-    })
-
-    it('should handle null and undefined at root level', () => {
-      const input = {
-        null_field: null,
-        undefined_field: undefined,
-        nested: {
-          null_nested: null,
-        },
-      }
-      const result = deepSanitizeFormValues(input)
-
-      expect(result).toEqual({
-        null_field: '',
-        undefined_field: '',
-        nested: {
-          null_nested: '',
-        },
-      })
-    })
-
-    it('should handle deeply nested structures', () => {
-      const input = {
-        level1: {
-          level2: {
-            level3: {
-              field: null,
-            },
-          },
-        },
-      }
-      const result = deepSanitizeFormValues(input)
-
-      expect(result).toEqual({
-        level1: {
-          level2: {
-            level3: {
-              field: '',
-            },
-          },
-        },
-      })
-    })
-
-    it('should preserve non-null values in nested structures', () => {
-      const input = {
-        config: {
-          client_id: 'valid_id',
-          client_secret: null,
-          options: {
-            timeout: 5000,
-            enabled: true,
-            message: undefined,
-          },
-        },
-      }
-      const result = deepSanitizeFormValues(input)
-
-      expect(result).toEqual({
-        config: {
-          client_id: 'valid_id',
-          client_secret: '',
-          options: {
-            timeout: 5000,
-            enabled: true,
-            message: '',
-          },
-        },
-      })
-    })
-  })
-
-  describe('findMissingRequiredField', () => {
-    const requiredFields = [
-      { name: 'client_id', label: 'Client ID' },
-      { name: 'client_secret', label: 'Client Secret' },
-      { name: 'scope', label: 'Scope' },
-    ]
-
-    it('should return null when all required fields are present', () => {
-      const formData = {
-        client_id: 'test_id',
-        client_secret: 'test_secret',
-        scope: 'read',
-        optional_field: 'optional',
-      }
-
-      const result = findMissingRequiredField(formData, requiredFields)
-      expect(result).toBeNull()
-    })
-
-    it('should return the first missing field', () => {
-      const formData = {
-        client_id: 'test_id',
-        scope: 'read',
-      }
-
-      const result = findMissingRequiredField(formData, requiredFields)
-      expect(result).toEqual({ name: 'client_secret', label: 'Client Secret' })
-    })
-
-    it('should treat empty strings as missing fields', () => {
-      const formData = {
-        client_id: '',
-        client_secret: 'test_secret',
-        scope: 'read',
-      }
-
-      const result = findMissingRequiredField(formData, requiredFields)
-      expect(result).toEqual({ name: 'client_id', label: 'Client ID' })
-    })
-
-    it('should treat null values as missing fields', () => {
-      const formData = {
-        client_id: 'test_id',
-        client_secret: null,
-        scope: 'read',
-      }
-
-      const result = findMissingRequiredField(formData, requiredFields)
-      expect(result).toEqual({ name: 'client_secret', label: 'Client Secret' })
-    })
-
-    it('should treat undefined values as missing fields', () => {
-      const formData = {
-        client_id: 'test_id',
-        client_secret: 'test_secret',
-        scope: undefined,
-      }
-
-      const result = findMissingRequiredField(formData, requiredFields)
-      expect(result).toEqual({ name: 'scope', label: 'Scope' })
-    })
-
-    it('should handle empty required fields array', () => {
-      const formData = {
-        client_id: 'test_id',
-      }
-
-      const result = findMissingRequiredField(formData, [])
-      expect(result).toBeNull()
-    })
-
-    it('should handle empty form data', () => {
-      const result = findMissingRequiredField({}, requiredFields)
-      expect(result).toEqual({ name: 'client_id', label: 'Client ID' })
-    })
-
-    it('should handle multilingual labels', () => {
-      const multilingualFields = [
-        { name: 'field1', label: { en_US: 'Field 1 EN', zh_Hans: 'Field 1 CN' } },
-      ]
-      const formData = {}
-
-      const result = findMissingRequiredField(formData, multilingualFields)
-      expect(result).toEqual({
-        name: 'field1',
-        label: { en_US: 'Field 1 EN', zh_Hans: 'Field 1 CN' },
-      })
-    })
-
-    it('should return null for form data with extra fields', () => {
-      const formData = {
-        client_id: 'test_id',
-        client_secret: 'test_secret',
-        scope: 'read',
-        extra_field1: 'extra1',
-        extra_field2: 'extra2',
-      }
-
-      const result = findMissingRequiredField(formData, requiredFields)
-      expect(result).toBeNull()
-    })
-  })
-
-  describe('Edge cases', () => {
-    it('should handle objects with non-string keys', () => {
-      const input = { [Symbol('test')]: 'value', regular: 'field' } as Record<string, unknown>
-      const result = sanitizeFormValues(input)
-
-      expect(result.regular).toBe('field')
-    })
-
-    it('should handle objects with getter properties', () => {
-      const obj = {}
-      Object.defineProperty(obj, 'getter', {
-        get: () => 'computed_value',
-        enumerable: true,
-      })
-
-      const result = sanitizeFormValues(obj)
-      expect(result.getter).toBe('computed_value')
-    })
-
-    it('should handle circular references in deepSanitizeFormValues gracefully', () => {
-      const obj: Record<string, unknown> = { field: 'value' }
-      obj.circular = obj
-
-      expect(() => deepSanitizeFormValues(obj)).not.toThrow()
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/trigger-plugin/utils/form-helpers.ts b/web/app/components/workflow/nodes/trigger-plugin/utils/form-helpers.ts
deleted file mode 100644
index cd49bd8ffec..00000000000
--- a/web/app/components/workflow/nodes/trigger-plugin/utils/form-helpers.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Utility functions for form data handling in trigger plugin components
- */
-
-/**
- * Sanitizes form values by converting null/undefined to empty strings
- * This ensures React form inputs don't receive null values which can cause warnings
- */
-export const sanitizeFormValues = (values: Record<string, any>): Record<string, string> => {
-  return Object.fromEntries(
-    Object.entries(values).map(([key, value]) => [
-      key,
-      value === null || value === undefined ? '' : String(value),
-    ]),
-  )
-}
-
-/**
- * Deep sanitizes form values while preserving nested objects structure
- * Useful for complex form schemas with nested properties
- */
-export const deepSanitizeFormValues = (values: Record<string, any>, visited = new WeakSet()): Record<string, any> => {
-  if (visited.has(values))
-    return {}
-
-  visited.add(values)
-
-  const result: Record<string, any> = {}
-
-  for (const [key, value] of Object.entries(values)) {
-    if (value === null || value === undefined)
-      result[key] = ''
-    else if (typeof value === 'object' && !Array.isArray(value))
-      result[key] = deepSanitizeFormValues(value, visited)
-    else
-      result[key] = value
-  }
-
-  return result
-}
-
-/**
- * Validates required fields in form data
- * Returns the first missing required field or null if all are present
- */
-export const findMissingRequiredField = (
-  formData: Record<string, any>,
-  requiredFields: Array<{ name: string, label: any }>,
-): { name: string, label: any } | null => {
-  for (const field of requiredFields) {
-    if (!formData[field.name] || formData[field.name] === '')
-      return field
-  }
-  return null
-}
diff --git a/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
deleted file mode 100644
index cf89dfc11dd..00000000000
--- a/web/app/components/workflow/nodes/variable-assigner/__tests__/integration.spec.tsx
+++ /dev/null
@@ -1,546 +0,0 @@
-/* eslint-disable ts/no-explicit-any, style/jsx-one-expression-per-line */
-import type { VariableAssignerNodeType } from '../types'
-import type { PanelProps } from '@/types/workflow'
-import { toast } from '@langgenius/dify-ui/toast'
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
-import { BlockEnum, VarType } from '@/app/components/workflow/types'
-import AddVariable from '../components/add-variable'
-import NodeGroupItem from '../components/node-group-item'
-import NodeVariableItem from '../components/node-variable-item'
-import VarGroupItem from '../components/var-group-item'
-import VarList from '../components/var-list'
-import Panel from '../panel'
-import useConfig from '../use-config'
-
-const mockHandleAssignVariableValueChange = vi.fn()
-const mockHandleGroupItemMouseEnter = vi.fn()
-const mockHandleGroupItemMouseLeave = vi.fn()
-const mockGetAvailableVars = vi.fn()
-
-vi.mock('@langgenius/dify-ui/toast', () => ({
-  toast: {
-    success: vi.fn(),
-    error: vi.fn(),
-    warning: vi.fn(),
-    info: vi.fn(),
-  },
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/add-variable-popup', () => ({
-  default: ({ onSelect }: any) => (
-    <button
-      type="button"
-      onClick={() => onSelect(['source-node', 'pickedVar'], { variable: 'pickedVar', type: VarType.string })}
-    >
-      confirm-add-variable
-    </button>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
-  default: ({ value, onChange, isAddBtnTrigger, onOpen, placeholder }: any) => (
-    <div>
-      <div>{Array.isArray(value) ? value.join('.') : ''}</div>
-      <button
-        type="button"
-        onClick={() => {
-          onOpen?.()
-          if (isAddBtnTrigger)
-            onChange(['source-node', 'groupVar'], 'variable', { variable: 'groupVar', type: VarType.string })
-          else
-            onChange(['source-node', 'updatedVar'])
-        }}
-      >
-        {isAddBtnTrigger ? 'add-variable-from-picker' : (placeholder || 'pick-var')}
-      </button>
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/remove-button', () => ({
-  default: ({ onClick }: any) => <button type="button" onClick={onClick}>remove-variable</button>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/field', () => ({
-  default: ({ title, operations, children, className }: any) => <div className={className}><div>{title}</div><div>{operations}</div>{children}</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/output-vars', () => ({
-  default: ({ children }: any) => <div>{children}</div>,
-  VarItem: ({ name, type, description }: any) => <div>{`${name}:${type}:${description}`}</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/split', () => ({
-  default: () => <div>split</div>,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm', () => ({
-  default: ({ isShow, onCancel, onConfirm }: any) => isShow
-    ? (
-        <div>
-          <button type="button" onClick={onCancel}>cancel-remove</button>
-          <button type="button" onClick={onConfirm}>confirm-remove</button>
-        </div>
-      )
-    : null,
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/variable-label', () => ({
-  VariableLabelInNode: ({ variables, nodeTitle, isExceptionVariable }: any) => (
-    <div>{`${nodeTitle}:${variables.join('.')}:${String(Boolean(isExceptionVariable))}`}</div>
-  ),
-}))
-
-vi.mock('@/app/components/workflow/block-icon', () => ({
-  VarBlockIcon: ({ type }: any) => <div>{`block-icon:${type}`}</div>,
-}))
-
-vi.mock('../hooks', () => ({
-  useVariableAssigner: () => ({
-    handleAssignVariableValueChange: mockHandleAssignVariableValueChange,
-    handleGroupItemMouseEnter: mockHandleGroupItemMouseEnter,
-    handleGroupItemMouseLeave: mockHandleGroupItemMouseLeave,
-  }),
-  useGetAvailableVars: () => mockGetAvailableVars,
-}))
-
-vi.mock('../use-config', () => ({
-  default: vi.fn(),
-}))
-
-const mockUseConfig = vi.mocked(useConfig)
-const mockToastError = vi.mocked(toast.error)
-
-const createData = (overrides: Partial<VariableAssignerNodeType> = {}): VariableAssignerNodeType => ({
-  title: 'Variable Assigner',
-  desc: '',
-  type: BlockEnum.VariableAssigner,
-  output_type: VarType.string,
-  variables: [['source-node', 'initialVar']],
-  advanced_settings: {
-    group_enabled: true,
-    groups: [
-      {
-        groupId: 'group-1',
-        group_name: 'Group1',
-        output_type: VarType.string,
-        variables: [['source-node', 'initialVar']],
-      },
-      {
-        groupId: 'group-2',
-        group_name: 'Group2',
-        output_type: VarType.number,
-        variables: [],
-      },
-    ],
-  },
-  selected: false,
-  ...overrides,
-})
-
-const createConfigResult = (overrides: Partial<ReturnType<typeof useConfig>> = {}): ReturnType<typeof useConfig> => ({
-  readOnly: false,
-  inputs: createData(),
-  handleListOrTypeChange: vi.fn(),
-  isEnableGroup: true,
-  handleGroupEnabledChange: vi.fn(),
-  handleAddGroup: vi.fn(),
-  handleListOrTypeChangeInGroup: vi.fn(() => vi.fn()),
-  handleGroupRemoved: vi.fn(() => vi.fn()),
-  handleVarGroupNameChange: vi.fn(() => vi.fn()),
-  isShowRemoveVarConfirm: false,
-  hideRemoveVarConfirm: vi.fn(),
-  onRemoveVarConfirm: vi.fn(),
-  getAvailableVars: vi.fn(() => []),
-  filterVar: vi.fn(() => vi.fn(() => true)),
-  ...overrides,
-})
-
-const panelProps: PanelProps = {
-  getInputVars: vi.fn(() => []),
-  toVarInputs: vi.fn(() => []),
-  runInputData: {},
-  runInputDataRef: { current: {} },
-  setRunInputData: vi.fn(),
-  runResult: null,
-}
-
-describe('variable-assigner path', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockGetAvailableVars.mockReturnValue([
-      {
-        nodeId: 'source-node',
-        title: 'Source Node',
-        vars: [{ variable: 'pickedVar', type: VarType.string }],
-      },
-    ])
-    mockUseConfig.mockReturnValue(createConfigResult())
-  })
-
-  describe('Path Integration', () => {
-    it('should open the add-variable popup and assign a selected value', async () => {
-      const user = userEvent.setup()
-      const { container } = render(
-        <AddVariable
-          availableVars={[]}
-          variableAssignerNodeId="assigner-node"
-          variableAssignerNodeData={createData({ selected: true })}
-          handleId="group-1"
-        />,
-      )
-
-      await user.click(container.querySelector('.size-4.cursor-pointer') as HTMLElement)
-      await user.click(screen.getByRole('button', { name: 'confirm-add-variable' }))
-
-      expect(mockHandleAssignVariableValueChange).toHaveBeenCalledWith(
-        'assigner-node',
-        ['source-node', 'pickedVar'],
-        { variable: 'pickedVar', type: VarType.string },
-        'group-1',
-      )
-    })
-
-    it('should render node variable labels for env, system, and rag variables', () => {
-      const node = {
-        id: 'source-node',
-        data: { title: 'Source Node', type: BlockEnum.Answer },
-      } as any
-      const { rerender, container } = render(
-        <NodeVariableItem
-          node={node}
-          variable={['env', 'API_KEY']}
-          writeMode="append"
-        />,
-      )
-
-      expect(container).toHaveTextContent('Source Node')
-      expect(container).toHaveTextContent('API_KEY')
-      expect(container).toHaveTextContent('workflow.nodes.assigner.operations.append')
-
-      rerender(
-        <NodeVariableItem
-          node={node}
-          variable={['sys', 'query']}
-          isException
-        />,
-      )
-      expect(container).toHaveTextContent('sys.query')
-
-      rerender(
-        <NodeVariableItem
-          node={node}
-          variable={['rag', 'metadata']}
-        />,
-      )
-      expect(container).toHaveTextContent('metadata')
-    })
-
-    it('should render, update, and remove variables in the list', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      const onOpen = vi.fn()
-      const { rerender } = render(
-        <VarList
-          readonly={false}
-          nodeId="assigner-node"
-          list={[]}
-          onChange={onChange}
-        />,
-      )
-
-      expect(screen.getByText('workflow.nodes.variableAssigner.noVarTip')).toBeInTheDocument()
-
-      rerender(
-        <VarList
-          readonly={false}
-          nodeId="assigner-node"
-          list={[['source-node', 'initialVar']]}
-          onChange={onChange}
-          onOpen={onOpen}
-          filterVar={vi.fn(() => true)}
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: 'pick-var' }))
-      expect(onOpen).toHaveBeenCalledWith(0)
-      expect(onChange).toHaveBeenLastCalledWith([['source-node', 'updatedVar']], ['source-node', 'updatedVar'])
-
-      await user.click(screen.getByRole('button', { name: 'remove-variable' }))
-      expect(onChange).toHaveBeenLastCalledWith([])
-    })
-
-    it('should add group variables, validate group names, and allow removing the group', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      const onGroupNameChange = vi.fn()
-      const onRemove = vi.fn()
-
-      const { container } = render(
-        <VarGroupItem
-          readOnly={false}
-          nodeId="assigner-node"
-          payload={{
-            group_name: 'Group1',
-            output_type: VarType.any,
-            variables: [],
-          }}
-          onChange={onChange}
-          groupEnabled
-          onGroupNameChange={onGroupNameChange}
-          canRemove
-          onRemove={onRemove}
-          availableVars={[]}
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: 'add-variable-from-picker' }))
-      expect(onChange).toHaveBeenCalledWith({
-        group_name: 'Group1',
-        output_type: VarType.string,
-        variables: [['source-node', 'groupVar']],
-      })
-
-      await user.click(screen.getByText('Group1'))
-      fireEvent.change(screen.getByDisplayValue('Group1'), { target: { value: '1bad' } })
-      expect(mockToastError).toHaveBeenCalled()
-
-      fireEvent.change(screen.getByDisplayValue('Group1'), { target: { value: 'Renamed Group' } })
-      expect(onGroupNameChange).toHaveBeenCalledWith('Renamed_Group')
-
-      await user.click(container.querySelector('.cursor-pointer.rounded-md') as HTMLElement)
-      expect(onRemove).toHaveBeenCalledTimes(1)
-    })
-
-    it('should ignore duplicate group variables and reset the output type when the group becomes empty', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-      const { rerender } = render(
-        <VarGroupItem
-          readOnly={false}
-          nodeId="assigner-node"
-          payload={{
-            group_name: 'Group1',
-            output_type: VarType.string,
-            variables: [['source-node', 'groupVar']],
-          }}
-          onChange={onChange}
-          groupEnabled
-          availableVars={[]}
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: 'add-variable-from-picker' }))
-      expect(onChange).not.toHaveBeenCalled()
-
-      rerender(
-        <VarGroupItem
-          readOnly={false}
-          nodeId="assigner-node"
-          payload={{
-            group_name: 'Group1',
-            output_type: VarType.string,
-            variables: [['source-node', 'updatedVar']],
-          }}
-          onChange={onChange}
-          groupEnabled
-          availableVars={[]}
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: 'pick-var' }))
-      expect(onChange).not.toHaveBeenCalled()
-
-      await user.click(screen.getByRole('button', { name: 'remove-variable' }))
-      expect(onChange).toHaveBeenLastCalledWith({
-        group_name: 'Group1',
-        output_type: VarType.any,
-        variables: [],
-      })
-
-      rerender(
-        <VarGroupItem
-          readOnly
-          nodeId="assigner-node"
-          payload={{
-            output_type: VarType.any,
-            variables: [],
-          }}
-          onChange={onChange}
-          groupEnabled={false}
-          availableVars={[]}
-        />,
-      )
-
-      expect(screen.getByText('workflow.nodes.variableAssigner.title')).toBeInTheDocument()
-      expect(screen.queryByRole('button', { name: 'add-variable-from-picker' })).not.toBeInTheDocument()
-    })
-
-    it('should render empty and populated node groups with hover states', async () => {
-      const user = userEvent.setup()
-      const selectedData = createData()
-      const { container, rerender } = renderWorkflowFlowComponent(
-        <NodeGroupItem
-          item={{
-            groupEnabled: true,
-            targetHandleId: 'group-1',
-            title: 'Group1',
-            type: 'string',
-            variables: [],
-            variableAssignerNodeId: 'assigner-node',
-            variableAssignerNodeData: selectedData,
-          }}
-        />,
-        {
-          nodes: [
-            { id: 'source-node', position: { x: 0, y: 0 }, data: { title: 'Source Node', type: BlockEnum.Answer } as any },
-          ],
-          edges: [],
-          initialStoreState: {
-            enteringNodePayload: {
-              nodeId: 'assigner-node',
-              nodeData: selectedData,
-            } as any,
-            hoveringAssignVariableGroupId: 'group-1',
-          },
-        },
-      )
-
-      expect(container).toHaveTextContent('workflow.nodes.variableAssigner.varNotSet')
-      const groupCard = container.querySelector('.relative.rounded-lg') as HTMLElement
-      expect(groupCard).toHaveClass('border-text-accent!')
-
-      fireEvent.mouseEnter(groupCard)
-      fireEvent.mouseLeave(groupCard)
-      expect(mockHandleGroupItemMouseEnter).toHaveBeenCalledWith('group-1')
-      expect(mockHandleGroupItemMouseLeave).toHaveBeenCalledTimes(1)
-
-      rerender(
-        <NodeGroupItem
-          item={{
-            groupEnabled: true,
-            targetHandleId: 'group-2',
-            title: 'Group2',
-            type: 'string',
-            variables: [['source-node', 'initialVar']],
-            variableAssignerNodeId: 'assigner-node',
-            variableAssignerNodeData: selectedData,
-          }}
-        />,
-      )
-
-      expect(container).toHaveTextContent('Source Node:source-node.initialVar:false')
-      expect(container.querySelector('.relative.rounded-lg')).toHaveClass('border-dashed!')
-
-      await user.click(container.querySelector('.size-4.cursor-pointer') as HTMLElement)
-      await user.click(screen.getByRole('button', { name: 'confirm-add-variable' }))
-      expect(mockHandleAssignVariableValueChange).toHaveBeenCalled()
-    })
-
-    it('should resolve default group borders without an active hover id and render exception variables', () => {
-      const selectedData = createData()
-      const { container, rerender } = renderWorkflowFlowComponent(
-        <NodeGroupItem
-          item={{
-            groupEnabled: true,
-            targetHandleId: 'group-2',
-            title: 'Group2',
-            type: 'string',
-            variables: [],
-            variableAssignerNodeId: 'assigner-node',
-            variableAssignerNodeData: selectedData,
-          }}
-        />,
-        {
-          nodes: [
-            { id: 'agent-node', position: { x: 0, y: 0 }, data: { title: 'Agent Node', type: BlockEnum.Agent } as any },
-          ],
-          edges: [],
-          initialStoreState: {
-            enteringNodePayload: {
-              nodeId: 'assigner-node',
-              nodeData: selectedData,
-            } as any,
-            hoveringAssignVariableGroupId: undefined,
-          },
-        },
-      )
-
-      expect(container.querySelector('.relative.rounded-lg')).toHaveClass('border-dashed!')
-
-      rerender(
-        <NodeGroupItem
-          item={{
-            groupEnabled: false,
-            targetHandleId: 'target',
-            title: 'Target',
-            type: 'string',
-            variables: [['agent-node', 'error_message']],
-            variableAssignerNodeId: 'assigner-node',
-            variableAssignerNodeData: createData({
-              output_type: VarType.any,
-              variables: [['agent-node', 'error_message']],
-            }),
-          }}
-        />,
-      )
-
-      expect(container).toHaveTextContent('Agent Node:agent-node.error_message:true')
-    })
-
-    it('should render grouped and ungrouped panels and confirm removal actions', async () => {
-      const user = userEvent.setup()
-      const groupedConfig = createConfigResult({
-        isShowRemoveVarConfirm: true,
-      })
-      mockUseConfig.mockReturnValue(groupedConfig)
-
-      const { rerender } = render(
-        <Panel
-          id="assigner-node"
-          data={createData()}
-          panelProps={panelProps}
-        />,
-      )
-
-      expect(screen.getByText('Group1.output:string:workflow.nodes.variableAssigner.outputVars.varDescribe:{"groupName":"Group1"}')).toBeInTheDocument()
-      expect(screen.getByText('Group2.output:number:workflow.nodes.variableAssigner.outputVars.varDescribe:{"groupName":"Group2"}')).toBeInTheDocument()
-
-      await user.click(screen.getByRole('switch'))
-      expect(groupedConfig.handleGroupEnabledChange).toHaveBeenCalled()
-
-      await user.click(screen.getByText('workflow.nodes.variableAssigner.addGroup'))
-      expect(groupedConfig.handleAddGroup).toHaveBeenCalledTimes(1)
-
-      await user.click(screen.getByRole('button', { name: 'cancel-remove' }))
-      expect(groupedConfig.hideRemoveVarConfirm).toHaveBeenCalledTimes(1)
-
-      await user.click(screen.getByRole('button', { name: 'confirm-remove' }))
-      expect(groupedConfig.onRemoveVarConfirm).toHaveBeenCalledTimes(1)
-
-      const singleConfig = createConfigResult({
-        isEnableGroup: false,
-        inputs: createData({
-          advanced_settings: {
-            group_enabled: false,
-            groups: [],
-          },
-        }),
-      })
-      mockUseConfig.mockReturnValue(singleConfig)
-
-      rerender(
-        <Panel
-          id="assigner-node"
-          data={singleConfig.inputs}
-          panelProps={panelProps}
-        />,
-      )
-
-      expect(screen.queryByText('Group1.output:string:workflow.nodes.variableAssigner.outputVars.varDescribe:{"groupName":"Group1"}')).not.toBeInTheDocument()
-      expect(screen.getByText('workflow.nodes.variableAssigner.aggregationGroup')).toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/__tests__/node-variable-item.spec.tsx b/web/app/components/workflow/nodes/variable-assigner/components/__tests__/node-variable-item.spec.tsx
deleted file mode 100644
index 73f206c2571..00000000000
--- a/web/app/components/workflow/nodes/variable-assigner/components/__tests__/node-variable-item.spec.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Node, ValueSelector } from '@/app/components/workflow/types'
-import { render, screen } from '@testing-library/react'
-import { WriteMode } from '@/app/components/workflow/nodes/assigner/types'
-import { BlockEnum } from '@/app/components/workflow/types'
-import NodeVariableItem from '../node-variable-item'
-
-const createNode = (title: string): Node => ({
-  id: 'node-1',
-  position: { x: 0, y: 0 },
-  data: {
-    title,
-    desc: '',
-    type: BlockEnum.Code,
-  },
-} as unknown as Node)
-
-describe('variable-assigner/node-variable-item', () => {
-  it('renders the node title, derived variable name, and write mode badge for env vars', () => {
-    render(
-      <NodeVariableItem
-        node={createNode('Code Node')}
-        variable={['env', 'API_KEY'] satisfies ValueSelector}
-        writeMode={WriteMode.append}
-      />,
-    )
-
-    expect(screen.getByText('Code Node')).toBeInTheDocument()
-    expect(screen.getByText('API_KEY')).toBeInTheDocument()
-    expect(screen.getByText('workflow.nodes.assigner.operations.append')).toBeInTheDocument()
-  })
-
-  it('formats system variables with the sys prefix and supports exception styling', () => {
-    render(
-      <NodeVariableItem
-        node={createNode('Start Node')}
-        variable={['sys', 'query'] satisfies ValueSelector}
-        isException
-      />,
-    )
-
-    expect(screen.getByText('sys.query')).toBeInTheDocument()
-    expect(screen.getByText('Start Node')).toBeInTheDocument()
-  })
-
-  it('renders conversation variables without the sys prefix', () => {
-    render(
-      <NodeVariableItem
-        node={createNode('Chat Node')}
-        variable={['conversation', 'summary'] satisfies ValueSelector}
-      />,
-    )
-
-    expect(screen.getByText('summary')).toBeInTheDocument()
-    expect(screen.getByText('Chat Node')).toBeInTheDocument()
-  })
-
-  it('renders rag variables using the terminal segment as the visible variable name', () => {
-    render(
-      <NodeVariableItem
-        node={createNode('RAG Node')}
-        variable={['rag', 'shared', 'score'] satisfies ValueSelector}
-      />,
-    )
-
-    expect(screen.getByText('score')).toBeInTheDocument()
-    expect(screen.getByText('RAG Node')).toBeInTheDocument()
-  })
-})
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
deleted file mode 100644
index e4c2de17891..00000000000
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { Node, ValueSelector } from '@/app/components/workflow/types'
-import type { I18nKeysByPrefix } from '@/types/i18n'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  memo,
-  useMemo,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
-import { Line3 } from '@/app/components/base/icons/src/public/common'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { VarBlockIcon } from '@/app/components/workflow/block-icon'
-import { isConversationVar, isENV, isRagVariableVar, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-
-type NodeVariableItemProps = {
-  node: Node
-  variable: ValueSelector
-  writeMode?: I18nKeysByPrefix<'workflow', 'nodes.assigner.operations.'>
-  showBorder?: boolean
-  className?: string
-  isException?: boolean
-}
-
-const i18nPrefix = 'nodes.assigner'
-
-const NodeVariableItem = ({
-  node,
-  variable,
-  writeMode,
-  showBorder,
-  className,
-  isException,
-}: NodeVariableItemProps) => {
-  const { t } = useTranslation()
-
-  const isSystem = isSystemVar(variable)
-  const isEnv = isENV(variable)
-  const isChatVar = isConversationVar(variable)
-  const isRagVar = isRagVariableVar(variable)
-  const varName = useMemo(() => {
-    if (isSystem)
-      return `sys.${variable[variable.length - 1]}`
-    if (isRagVar)
-      return variable[variable.length - 1]
-    return variable.slice(1).join('.')
-  }, [isRagVar, isSystem, variable])
-
-  const VariableIcon = useMemo(() => {
-    if (isEnv) {
-      return (
-        <Env className="size-3.5 shrink-0 text-util-colors-violet-violet-600" />
-      )
-    }
-
-    if (isChatVar) {
-      return (
-        <BubbleX className="size-3.5 shrink-0 text-util-colors-teal-teal-700" />
-      )
-    }
-
-    if (isRagVar) {
-      return (
-        <InputField className="size-3.5 shrink-0 text-text-accent" />
-      )
-    }
-
-    return (
-      <Variable02
-        className={cn(
-          'size-3.5 shrink-0 text-text-accent',
-          isException && 'text-text-warning',
-        )}
-      />
-    )
-  }, [isEnv, isChatVar, isRagVar, isException])
-
-  const VariableName = useMemo(() => {
-    return (
-      <div
-        className={cn(
-          'ml-0.5 shrink truncate system-xs-medium text-text-accent',
-          isEnv && 'text-text-primary',
-          isException && 'text-text-warning',
-          isChatVar && 'text-util-colors-teal-teal-700',
-        )}
-        title={varName}
-      >
-        {varName}
-      </div>
-    )
-  }, [isEnv, isChatVar, varName, isException])
-  return (
-    <div className={cn(
-      'relative flex items-center gap-1 self-stretch rounded-md bg-workflow-block-parma-bg p-[3px] pl-[5px]',
-      showBorder && 'bg-state-base-hover!',
-      className,
-    )}
-    >
-      <div className="flex w-0 grow items-center">
-        {
-          node && (
-            <>
-              <div className="shrink-0 p-px">
-                <VarBlockIcon
-                  className="text-text-primary!"
-                  type={node.data.type}
-                />
-              </div>
-              <div
-                className="mx-0.5 shrink-1000 truncate text-xs font-medium text-text-secondary"
-                title={node?.data.title}
-              >
-                {node?.data.title}
-              </div>
-              <Line3 className="mr-0.5 shrink-0"></Line3>
-            </>
-          )
-        }
-        {VariableIcon}
-        {VariableName}
-      </div>
-      {writeMode && <Badge className="shrink-0" text={t(`${i18nPrefix}.operations.${writeMode}`, { ns: 'workflow' }) as string} />}
-    </div>
-  )
-}
-
-export default memo(NodeVariableItem)
diff --git a/web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx b/web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx
deleted file mode 100644
index 2f7658f9841..00000000000
--- a/web/app/components/workflow/run/__tests__/loop-result-panel.spec.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import type { NodeTracing } from '@/types/workflow'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { BlockEnum } from '@/app/components/workflow/types'
-import LoopResultPanel from '../loop-result-panel'
-
-const mockTracingPanel = vi.fn()
-
-vi.mock('../tracing-panel', () => ({
-  default: ({
-    list,
-    className,
-  }: {
-    list: NodeTracing[]
-    className?: string
-  }) => {
-    mockTracingPanel({ list, className })
-    return <div data-testid="tracing-panel">{list.length}</div>
-  },
-}))
-
-const createNodeTracing = (id: string): NodeTracing => ({
-  id,
-  index: 0,
-  predecessor_node_id: '',
-  node_id: `node-${id}`,
-  node_type: BlockEnum.Code,
-  title: `Node ${id}`,
-  inputs: {},
-  inputs_truncated: false,
-  process_data: {},
-  process_data_truncated: false,
-  outputs: {},
-  outputs_truncated: false,
-  status: 'succeeded',
-  error: '',
-  elapsed_time: 0,
-  metadata: {
-    iterator_length: 0,
-    iterator_index: 0,
-    loop_length: 0,
-    loop_index: 0,
-  },
-  created_at: 0,
-  created_by: {
-    id: 'user-1',
-    name: 'Tester',
-    email: 'tester@example.com',
-  },
-  finished_at: 0,
-  execution_metadata: undefined,
-})
-
-describe('LoopResultPanel', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should show loop rows, expand tracing details, and handle back and close actions', () => {
-    const onHide = vi.fn()
-    const onBack = vi.fn()
-
-    const { container } = render(
-      <LoopResultPanel
-        list={[
-          [createNodeTracing('1')],
-          [createNodeTracing('2'), createNodeTracing('3')],
-        ]}
-        onHide={onHide}
-        onBack={onBack}
-        noWrap
-      />,
-    )
-
-    expect(screen.getByText('workflow.singleRun.testRunLoop')).toBeInTheDocument()
-    const contentPanels = container.querySelectorAll('.transition-all.duration-200')
-    expect(contentPanels[0]).toHaveClass('max-h-0')
-
-    fireEvent.click(screen.getByRole('button', { name: 'workflow.singleRun.loop 1' }))
-    expect(contentPanels[0]).not.toHaveClass('max-h-0')
-    expect(screen.getAllByTestId('tracing-panel')[0]).toHaveTextContent('1')
-    expect(mockTracingPanel).toHaveBeenCalledWith({
-      list: [expect.objectContaining({ id: '1' })],
-      className: 'bg-background-section-burn',
-    })
-
-    fireEvent.click(screen.getByRole('button', { name: 'workflow.singleRun.back' }))
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
-
-    expect(onBack).toHaveBeenCalledTimes(1)
-    expect(onHide).toHaveBeenCalledTimes(1)
-  })
-
-  it('should stop click propagation when rendered inside the overlay wrapper', () => {
-    const parentClick = vi.fn()
-    const { container } = render(
-      <div onClick={parentClick}>
-        <LoopResultPanel
-          list={[[createNodeTracing('1')]]}
-          onHide={vi.fn()}
-          onBack={vi.fn()}
-        />
-      </div>,
-    )
-
-    const overlay = container.querySelector('.absolute.inset-0')
-    if (!overlay)
-      throw new Error('Expected overlay wrapper to be rendered')
-
-    fireEvent.click(overlay)
-
-    expect(parentClick).not.toHaveBeenCalled()
-  })
-})
diff --git a/web/app/components/workflow/run/loop-result-panel.tsx b/web/app/components/workflow/run/loop-result-panel.tsx
deleted file mode 100644
index 99b101bf920..00000000000
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { NodeTracing } from '@/types/workflow'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiArrowRightSLine,
-  RiCloseLine,
-} from '@remixicon/react'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Loop } from '@/app/components/base/icons/src/vender/workflow'
-import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
-import TracingPanel from './tracing-panel'
-
-const i18nPrefix = 'singleRun'
-
-type Props = {
-  readonly list: NodeTracing[][]
-  readonly onHide: () => void
-  readonly onBack: () => void
-  readonly noWrap?: boolean
-}
-
-const LoopResultPanel: FC<Props> = ({
-  list,
-  onHide,
-  onBack,
-  noWrap,
-}) => {
-  const { t } = useTranslation()
-  const [expandedLoops, setExpandedLoops] = useState<Record<number, boolean>>([])
-
-  const toggleLoop = useCallback((index: number) => {
-    setExpandedLoops(prev => ({
-      ...prev,
-      [index]: !prev[index],
-    }))
-  }, [])
-
-  const main = (
-    <>
-      <div className={cn(!noWrap && 'shrink-0', 'px-4 pt-3')}>
-        <div className="flex h-8 shrink-0 items-center justify-between">
-          <div className="truncate system-xl-semibold text-text-primary">
-            {t(`${i18nPrefix}.testRunLoop`, { ns: 'workflow' }) }
-          </div>
-          <button
-            type="button"
-            className="ml-2 shrink-0 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-            aria-label={t('operation.close', { ns: 'common' })}
-            onClick={onHide}
-          >
-            <RiCloseLine className="size-4 text-text-tertiary" aria-hidden="true" />
-          </button>
-        </div>
-        <button
-          type="button"
-          className="flex cursor-pointer items-center space-x-1 border-none bg-transparent px-0 py-2 text-left text-text-accent-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-          onClick={onBack}
-        >
-          <ArrowNarrowLeft className="size-4" aria-hidden="true" />
-          <div className="system-sm-medium">{t(`${i18nPrefix}.back`, { ns: 'workflow' })}</div>
-        </button>
-      </div>
-      {/* List */}
-      <div className={cn(!noWrap ? 'grow overflow-auto' : 'max-h-full', 'bg-components-panel-bg p-2')}>
-        {list.map((loop, index) => (
-          <div key={index} className={cn('mb-1 overflow-hidden rounded-xl border-none bg-background-section-burn')}>
-            <button
-              type="button"
-              className={cn(
-                'flex w-full cursor-pointer items-center justify-between px-3',
-                expandedLoops[index] ? 'pt-3 pb-2' : 'py-3',
-                'rounded-xl border-none bg-transparent text-left focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
-              )}
-              onClick={() => toggleLoop(index)}
-            >
-              <div className={cn('flex grow items-center gap-2')}>
-                <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500">
-                  <Loop className="size-3 text-text-primary-on-surface" />
-                </div>
-                <span className="grow system-sm-semibold-uppercase text-text-primary">
-                  {t(`${i18nPrefix}.loop`, { ns: 'workflow' })}
-                  {' '}
-                  {index + 1}
-                </span>
-                <RiArrowRightSLine
-                  className={cn(
-                    'size-4 shrink-0 text-text-tertiary transition-transform duration-200',
-                    expandedLoops[index] && 'rotate-90',
-                  )}
-                  aria-hidden="true"
-                />
-              </div>
-            </button>
-            {expandedLoops[index] && (
-              <div
-                className="h-px grow bg-divider-subtle"
-              >
-              </div>
-            )}
-            <div className={cn(
-              'transition-all duration-200',
-              expandedLoops[index]
-                ? 'opacity-100'
-                : 'max-h-0 overflow-hidden opacity-0',
-            )}
-            >
-              <TracingPanel
-                list={loop}
-                className="bg-background-section-burn"
-              />
-
-            </div>
-          </div>
-        ))}
-      </div>
-    </>
-  )
-  const handleNotBubble = useCallback((e: React.MouseEvent) => {
-    // if not do this, it will trigger the message log modal disappear(useClickAway)
-    e.stopPropagation()
-    e.nativeEvent.stopImmediatePropagation()
-  }, [])
-
-  if (noWrap)
-    return main
-
-  return (
-    <div
-      className="absolute inset-0 z-10 rounded-2xl pt-10"
-      style={{
-        backgroundColor: 'rgba(16, 24, 40, 0.20)',
-      }}
-      onClick={handleNotBubble}
-    >
-      <div className="flex h-full flex-col rounded-2xl bg-components-panel-bg">
-        {main}
-      </div>
-    </div>
-  )
-}
-export default React.memo(LoopResultPanel)
diff --git a/web/app/components/workflow/run/utils/format-log/__tests__/graph-to-log-struct.spec.ts b/web/app/components/workflow/run/utils/format-log/__tests__/graph-to-log-struct.spec.ts
deleted file mode 100644
index 46c1cdb76f6..00000000000
--- a/web/app/components/workflow/run/utils/format-log/__tests__/graph-to-log-struct.spec.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import parseDSL from '../graph-to-log-struct'
-
-describe('parseDSL', () => {
-  it('should parse plain nodes correctly', () => {
-    const dsl = 'plainNode1 -> plainNode2'
-    const result = parseDSL(dsl)
-    expect(result).toEqual([
-      { id: 'plainNode1', node_id: 'plainNode1', title: 'plainNode1', execution_metadata: {}, status: 'succeeded' },
-      { id: 'plainNode2', node_id: 'plainNode2', title: 'plainNode2', execution_metadata: {}, status: 'succeeded' },
-    ])
-  })
-
-  it('should parse retry nodes correctly', () => {
-    const dsl = '(retry, retryNode, 3)'
-    const result = parseDSL(dsl)
-    expect(result).toEqual([
-      { id: 'retryNode', node_id: 'retryNode', title: 'retryNode', execution_metadata: {}, status: 'succeeded' },
-      { id: 'retryNode', node_id: 'retryNode', title: 'retryNode', execution_metadata: {}, status: 'retry' },
-      { id: 'retryNode', node_id: 'retryNode', title: 'retryNode', execution_metadata: {}, status: 'retry' },
-      { id: 'retryNode', node_id: 'retryNode', title: 'retryNode', execution_metadata: {}, status: 'retry' },
-    ])
-  })
-
-  it('should parse iteration nodes correctly', () => {
-    const dsl = '(iteration, iterationNode, plainNode1 -> plainNode2)'
-    const result = parseDSL(dsl)
-    expect(result).toEqual([
-      { id: 'iterationNode', node_id: 'iterationNode', title: 'iterationNode', node_type: 'iteration', execution_metadata: {}, status: 'succeeded' },
-      { id: 'plainNode1', node_id: 'plainNode1', title: 'plainNode1', execution_metadata: { iteration_id: 'iterationNode', iteration_index: 0 }, status: 'succeeded' },
-      { id: 'plainNode2', node_id: 'plainNode2', title: 'plainNode2', execution_metadata: { iteration_id: 'iterationNode', iteration_index: 0 }, status: 'succeeded' },
-    ])
-  })
-
-  it('should parse loop nodes correctly', () => {
-    const dsl = '(loop, loopNode, plainNode1 -> plainNode2)'
-    const result = parseDSL(dsl)
-    expect(result).toEqual([
-      { id: 'loopNode', node_id: 'loopNode', title: 'loopNode', node_type: 'loop', execution_metadata: {}, status: 'succeeded' },
-      { id: 'plainNode1', node_id: 'plainNode1', title: 'plainNode1', execution_metadata: { loop_id: 'loopNode', loop_index: 0 }, status: 'succeeded' },
-      { id: 'plainNode2', node_id: 'plainNode2', title: 'plainNode2', execution_metadata: { loop_id: 'loopNode', loop_index: 0 }, status: 'succeeded' },
-    ])
-  })
-
-  it('should parse parallel nodes correctly', () => {
-    const dsl = '(parallel, parallelNode, nodeA, nodeB -> nodeC)'
-    const result = parseDSL(dsl)
-    expect(result).toEqual([
-      { id: 'parallelNode', node_id: 'parallelNode', title: 'parallelNode', execution_metadata: { parallel_id: 'parallelNode' }, status: 'succeeded' },
-      { id: 'nodeA', node_id: 'nodeA', title: 'nodeA', execution_metadata: { parallel_id: 'parallelNode', parallel_start_node_id: 'nodeA' }, status: 'succeeded' },
-      { id: 'nodeB', node_id: 'nodeB', title: 'nodeB', execution_metadata: { parallel_id: 'parallelNode', parallel_start_node_id: 'nodeB' }, status: 'succeeded' },
-      { id: 'nodeC', node_id: 'nodeC', title: 'nodeC', execution_metadata: { parallel_id: 'parallelNode', parallel_start_node_id: 'nodeB' }, status: 'succeeded' },
-    ])
-  })
-
-  // TODO
-  // it('should handle nested parallel nodes', () => {
-  //   const dsl = '(parallel, outerParallel, (parallel, innerParallel, plainNode1 -> plainNode2) -> plainNode3)'
-  //   const result = parseDSL(dsl)
-  //   expect(result).toEqual([
-  //     {
-  //       id: 'outerParallel',
-  //       node_id: 'outerParallel',
-  //       title: 'outerParallel',
-  //       execution_metadata: { parallel_id: 'outerParallel' },
-  //       status: 'succeeded',
-  //     },
-  //     {
-  //       id: 'innerParallel',
-  //       node_id: 'innerParallel',
-  //       title: 'innerParallel',
-  //       execution_metadata: { parallel_id: 'outerParallel', parallel_start_node_id: 'innerParallel' },
-  //       status: 'succeeded',
-  //     },
-  //     {
-  //       id: 'plainNode1',
-  //       node_id: 'plainNode1',
-  //       title: 'plainNode1',
-  //       execution_metadata: {
-  //         parallel_id: 'innerParallel',
-  //         parallel_start_node_id: 'plainNode1',
-  //         parent_parallel_id: 'outerParallel',
-  //         parent_parallel_start_node_id: 'innerParallel',
-  //       },
-  //       status: 'succeeded',
-  //     },
-  //     {
-  //       id: 'plainNode2',
-  //       node_id: 'plainNode2',
-  //       title: 'plainNode2',
-  //       execution_metadata: {
-  //         parallel_id: 'innerParallel',
-  //         parallel_start_node_id: 'plainNode1',
-  //         parent_parallel_id: 'outerParallel',
-  //         parent_parallel_start_node_id: 'innerParallel',
-  //       },
-  //       status: 'succeeded',
-  //     },
-  //     {
-  //       id: 'plainNode3',
-  //       node_id: 'plainNode3',
-  //       title: 'plainNode3',
-  //       execution_metadata: {
-  //         parallel_id: 'outerParallel',
-  //         parallel_start_node_id: 'innerParallel',
-  //       },
-  //       status: 'succeeded',
-  //     },
-  //   ])
-  // })
-
-  // iterations not support nested iterations
-  // it('should handle nested iterations', () => {
-  //   const dsl = '(iteration, outerIteration, (iteration, innerIteration -> plainNode1 -> plainNode2))'
-  //   const result = parseDSL(dsl)
-  //   expect(result).toEqual([
-  //     { id: 'outerIteration', node_id: 'outerIteration', title: 'outerIteration', node_type: 'iteration', execution_metadata: {}, status: 'succeeded' },
-  //     { id: 'innerIteration', node_id: 'innerIteration', title: 'innerIteration', node_type: 'iteration', execution_metadata: { iteration_id: 'outerIteration', iteration_index: 0 }, status: 'succeeded' },
-  //     { id: 'plainNode1', node_id: 'plainNode1', title: 'plainNode1', execution_metadata: { iteration_id: 'innerIteration', iteration_index: 0 }, status: 'succeeded' },
-  //     { id: 'plainNode2', node_id: 'plainNode2', title: 'plainNode2', execution_metadata: { iteration_id: 'innerIteration', iteration_index: 0 }, status: 'succeeded' },
-  //   ])
-  // })
-
-  // it('should handle nested iterations within parallel nodes', () => {
-  //   const dsl = '(parallel, parallelNode, (iteration, iterationNode, plainNode1, plainNode2))'
-  //   const result = parseDSL(dsl)
-  //   expect(result).toEqual([
-  //     { id: 'parallelNode', node_id: 'parallelNode', title: 'parallelNode', execution_metadata: { parallel_id: 'parallelNode' }, status: 'succeeded' },
-  //     { id: 'iterationNode', node_id: 'iterationNode', title: 'iterationNode', node_type: 'iteration', execution_metadata: { parallel_id: 'parallelNode', parallel_start_node_id: 'iterationNode' }, status: 'succeeded' },
-  //     { id: 'plainNode1', node_id: 'plainNode1', title: 'plainNode1', execution_metadata: { iteration_id: 'iterationNode', iteration_index: 0, parallel_id: 'parallelNode', parallel_start_node_id: 'iterationNode' }, status: 'succeeded' },
-  //     { id: 'plainNode2', node_id: 'plainNode2', title: 'plainNode2', execution_metadata: { iteration_id: 'iterationNode', iteration_index: 0, parallel_id: 'parallelNode', parallel_start_node_id: 'iterationNode' }, status: 'succeeded' },
-  //   ])
-  // })
-
-  it('should throw an error for unknown node types', () => {
-    const dsl = '(unknown, nodeId)'
-    expect(() => parseDSL(dsl)).toThrowError('Unknown nodeType: unknown')
-  })
-})
diff --git a/web/app/components/workflow/run/utils/format-log/agent/__tests__/index.spec.ts b/web/app/components/workflow/run/utils/format-log/agent/__tests__/index.spec.ts
index b147ac8d06d..167ef256496 100644
--- a/web/app/components/workflow/run/utils/format-log/agent/__tests__/index.spec.ts
+++ b/web/app/components/workflow/run/utils/format-log/agent/__tests__/index.spec.ts
@@ -1,13 +1,71 @@
+import type { AgentLogItem, NodeTracing } from '@/types/workflow'
+import { BlockEnum } from '@/app/components/workflow/types'
 import format from '..'
-import { agentNodeData, multiStepsCircle, oneStepCircle } from '../data'
 
-describe('agent', () => {
-  it('list should transform to tree', () => {
-    expect(format(agentNodeData.in as unknown as Parameters<typeof format>[0])).toEqual(agentNodeData.expect)
+const createTrace = (agentLog: AgentLogItem[], nodeType = BlockEnum.Agent): NodeTracing => ({
+  node_id: 'agent-node',
+  node_type: nodeType,
+  execution_metadata: {
+    agent_log: agentLog,
+  },
+} as unknown as NodeTracing)
+
+const createLog = (messageId: string, parentId?: string): AgentLogItem => ({
+  message_id: messageId,
+  parent_id: parentId,
+} as AgentLogItem)
+
+describe('agent format log', () => {
+  it('should transform flat agent logs into a tree', () => {
+    const [result] = format([
+      createTrace([
+        createLog('root'),
+        createLog('child-1', 'root'),
+        createLog('child-2', 'root'),
+        createLog('grandchild', 'child-1'),
+      ]),
+    ])
+
+    expect(result!.agentLog).toEqual([
+      expect.objectContaining({
+        message_id: 'root',
+        children: [
+          expect.objectContaining({
+            message_id: 'child-1',
+            children: [
+              expect.objectContaining({ message_id: 'grandchild' }),
+            ],
+          }),
+          expect.objectContaining({ message_id: 'child-2' }),
+        ],
+      }),
+    ])
   })
 
-  it('list should remove circle log item', () => {
-    expect(format(oneStepCircle.in as unknown as Parameters<typeof format>[0])).toEqual(oneStepCircle.expect)
-    expect(format(multiStepsCircle.in as unknown as Parameters<typeof format>[0])).toEqual(multiStepsCircle.expect)
+  it('should remove one-step circle log entries', () => {
+    const [result] = format([
+      createTrace([
+        createLog('root'),
+        createLog('root', 'root'),
+      ]),
+    ])
+
+    expect(result!.agentLog).toEqual([
+      expect.objectContaining({
+        message_id: 'root',
+        hasCircle: true,
+        children: [],
+      }),
+    ])
+  })
+
+  it('should not attach agent logs to unsupported node types', () => {
+    const [result] = format([
+      createTrace([
+        createLog('root'),
+      ], BlockEnum.Start),
+    ])
+
+    expect(result!.agentLog).toEqual([])
   })
 })
diff --git a/web/app/components/workflow/run/utils/format-log/agent/data.ts b/web/app/components/workflow/run/utils/format-log/agent/data.ts
deleted file mode 100644
index d90933c2937..00000000000
--- a/web/app/components/workflow/run/utils/format-log/agent/data.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { BlockEnum } from '@/app/components/workflow/types'
-
-export const agentNodeData = (() => {
-  const node = {
-    node_type: BlockEnum.Agent,
-    execution_metadata: {
-      agent_log: [
-        { id: '1', label: 'Root 1' },
-        { id: '2', parent_id: '1', label: 'Child 1.2' },
-        { id: '3', parent_id: '1', label: 'Child 1.3' },
-        { id: '4', parent_id: '2', label: 'Child 2.4' },
-        { id: '5', parent_id: '2', label: 'Child 2.5' },
-        { id: '6', parent_id: '3', label: 'Child 3.6' },
-        { id: '7', parent_id: '4', label: 'Child 4.7' },
-        { id: '8', parent_id: '4', label: 'Child 4.8' },
-        { id: '9', parent_id: '5', label: 'Child 5.9' },
-        { id: '10', parent_id: '5', label: 'Child 5.10' },
-        { id: '11', parent_id: '7', label: 'Child 7.11' },
-        { id: '12', parent_id: '7', label: 'Child 7.12' },
-        { id: '13', parent_id: '9', label: 'Child 9.13' },
-        { id: '14', parent_id: '9', label: 'Child 9.14' },
-        { id: '15', parent_id: '9', label: 'Child 9.15' },
-      ],
-    },
-  }
-
-  return {
-    in: [node],
-    expect: [{
-      ...node,
-      agentLog: [
-        {
-          id: '1',
-          label: 'Root 1',
-          children: [
-            {
-              id: '2',
-              parent_id: '1',
-              label: 'Child 1.2',
-              children: [
-                {
-                  id: '4',
-                  parent_id: '2',
-                  label: 'Child 2.4',
-                  children: [
-                    {
-                      id: '7',
-                      parent_id: '4',
-                      label: 'Child 4.7',
-                      children: [
-                        { id: '11', parent_id: '7', label: 'Child 7.11' },
-                        { id: '12', parent_id: '7', label: 'Child 7.12' },
-                      ],
-                    },
-                    { id: '8', parent_id: '4', label: 'Child 4.8' },
-                  ],
-                },
-                {
-                  id: '5',
-                  parent_id: '2',
-                  label: 'Child 2.5',
-                  children: [
-                    {
-                      id: '9',
-                      parent_id: '5',
-                      label: 'Child 5.9',
-                      children: [
-                        { id: '13', parent_id: '9', label: 'Child 9.13' },
-                        { id: '14', parent_id: '9', label: 'Child 9.14' },
-                        { id: '15', parent_id: '9', label: 'Child 9.15' },
-                      ],
-                    },
-                    { id: '10', parent_id: '5', label: 'Child 5.10' },
-                  ],
-                },
-              ],
-            },
-            {
-              id: '3',
-              parent_id: '1',
-              label: 'Child 1.3',
-              children: [
-                { id: '6', parent_id: '3', label: 'Child 3.6' },
-              ],
-            },
-          ],
-        },
-      ],
-    }],
-  }
-})()
-
-export const oneStepCircle = (() => {
-  const node = {
-    node_type: BlockEnum.Agent,
-    execution_metadata: {
-      agent_log: [
-        { id: '1', label: 'Node 1' },
-        { id: '1', parent_id: '1', label: 'Node 1' },
-        { id: '1', parent_id: '1', label: 'Node 1' },
-        { id: '1', parent_id: '1', label: 'Node 1' },
-        { id: '1', parent_id: '1', label: 'Node 1' },
-        { id: '1', parent_id: '1', label: 'Node 1' },
-      ],
-    },
-  }
-
-  return {
-    in: [node],
-    expect: [{
-      ...node,
-      agentLog: [
-        {
-          id: '1',
-          label: 'Node 1',
-          hasCircle: true,
-          children: [],
-        },
-      ],
-    }],
-  }
-})()
-
-export const multiStepsCircle = (() => {
-  const node = {
-    node_type: BlockEnum.Agent,
-    execution_metadata: {
-      agent_log: [
-        // 1 -> [2 -> 4 -> 1, 3]
-        { id: '1', label: 'Node 1' },
-        { id: '2', parent_id: '1', label: 'Node 2' },
-        { id: '3', parent_id: '1', label: 'Node 3' },
-        { id: '4', parent_id: '2', label: 'Node 4' },
-
-        // Loop
-        { id: '1', parent_id: '4', label: 'Node 1' },
-        { id: '2', parent_id: '1', label: 'Node 2' },
-        { id: '4', parent_id: '2', label: 'Node 4' },
-        { id: '1', parent_id: '4', label: 'Node 1' },
-        { id: '2', parent_id: '1', label: 'Node 2' },
-        { id: '4', parent_id: '2', label: 'Node 4' },
-      ],
-    },
-  }
-  // 1 -> [2(4(1(2(4...)))), 3]
-  return {
-    in: [node],
-    expect: [{
-      ...node,
-      agentLog: [
-        {
-          id: '1',
-          label: 'Node 1',
-          children: [
-            {
-              id: '2',
-              parent_id: '1',
-              label: 'Node 2',
-              children: [
-                {
-                  id: '4',
-                  parent_id: '2',
-                  label: 'Node 4',
-                  children: [],
-                  hasCircle: true,
-                },
-              ],
-            },
-            {
-              id: '3',
-              parent_id: '1',
-              label: 'Node 3',
-            },
-          ],
-        },
-      ],
-    }],
-  }
-})()
diff --git a/web/app/components/workflow/run/utils/format-log/graph-to-log-struct.ts b/web/app/components/workflow/run/utils/format-log/graph-to-log-struct.ts
deleted file mode 100644
index 4f62a6cf6bd..00000000000
--- a/web/app/components/workflow/run/utils/format-log/graph-to-log-struct.ts
+++ /dev/null
@@ -1,364 +0,0 @@
-type IterationInfo = { iterationId: string, iterationIndex: number }
-type LoopInfo = { loopId: string, loopIndex: number }
-type NodePlain = { nodeType: 'plain', nodeId: string } & (Partial<IterationInfo> & Partial<LoopInfo>)
-type NodeComplex = { nodeType: string, nodeId: string, params: (NodePlain | (NodeComplex & (Partial<IterationInfo> & Partial<LoopInfo>)) | Node[] | number)[] } & (Partial<IterationInfo> & Partial<LoopInfo>)
-type Node = NodePlain | NodeComplex
-
-/**
- * Parses a DSL string into an array of node objects.
- * @param dsl - The input DSL string.
- * @returns An array of parsed nodes.
- */
-function parseDSL(dsl: string): NodeData[] {
-  return convertToNodeData(parseTopLevelFlow(dsl).map(nodeStr => parseNode(nodeStr)))
-}
-
-/**
- * Splits a top-level flow string by "->", respecting nested structures.
- * @param dsl - The DSL string to split.
- * @returns An array of top-level segments.
- */
-function parseTopLevelFlow(dsl: string): string[] {
-  const segments: string[] = []
-  let buffer = ''
-  let nested = 0
-
-  for (let i = 0; i < dsl.length; i++) {
-    const char = dsl[i]
-    if (char === '(')
-      nested++
-    if (char === ')')
-      nested--
-    if (char === '-' && dsl[i + 1] === '>' && nested === 0) {
-      segments.push(buffer.trim())
-      buffer = ''
-      i++ // Skip the ">" character
-    }
-    else {
-      buffer += char
-    }
-  }
-  if (buffer.trim())
-    segments.push(buffer.trim())
-
-  return segments
-}
-
-/**
- * Parses a single node string.
- * If the node is complex (e.g., has parentheses), it extracts the node type, node ID, and parameters.
- * @param nodeStr - The node string to parse.
- * @param parentIterationId - The ID of the parent iteration node (if applicable).
- * @param parentLoopId - The ID of the parent loop node (if applicable).
- * @returns A parsed node object.
- */
-function parseNode(nodeStr: string, parentIterationId?: string, parentLoopId?: string): Node {
-  // Check if the node is a complex node
-  if (nodeStr.startsWith('(') && nodeStr.endsWith(')')) {
-    const innerContent = nodeStr.slice(1, -1).trim() // Remove outer parentheses
-    let nested = 0
-    let buffer = ''
-    const parts: string[] = []
-
-    // Split the inner content by commas, respecting nested parentheses
-    for (let i = 0; i < innerContent.length; i++) {
-      const char = innerContent[i]
-      if (char === '(')
-        nested++
-      if (char === ')')
-        nested--
-
-      if (char === ',' && nested === 0) {
-        parts.push(buffer.trim())
-        buffer = ''
-      }
-      else {
-        buffer += char
-      }
-    }
-    parts.push(buffer.trim())
-
-    // Extract nodeType, nodeId, and params
-    const [nodeType, nodeId, ...paramsRaw] = parts
-    const params = parseParams(paramsRaw, nodeType === 'iteration' ? nodeId!.trim() : parentIterationId, nodeType === 'loop' ? nodeId!.trim() : parentLoopId)
-    const complexNode = {
-      nodeType: nodeType!.trim(),
-      nodeId: nodeId!.trim(),
-      params,
-    }
-    if (parentIterationId) {
-      (complexNode as any).iterationId = parentIterationId;
-      (complexNode as any).iterationIndex = 0 // Fixed as 0
-    }
-    if (parentLoopId) {
-      (complexNode as any).loopId = parentLoopId;
-      (complexNode as any).loopIndex = 0 // Fixed as 0
-    }
-    return complexNode
-  }
-
-  // If it's not a complex node, treat it as a plain node
-  const plainNode: NodePlain = { nodeType: 'plain', nodeId: nodeStr.trim() }
-  if (parentIterationId) {
-    plainNode.iterationId = parentIterationId
-    plainNode.iterationIndex = 0 // Fixed as 0
-  }
-  if (parentLoopId) {
-    plainNode.loopId = parentLoopId
-    plainNode.loopIndex = 0 // Fixed as 0
-  }
-  return plainNode
-}
-
-/**
- * Parses parameters of a complex node.
- * Supports nested flows and complex sub-nodes.
- * Adds iteration-specific metadata recursively.
- * @param paramParts - The parameters string split by commas.
- * @param parentIterationId - The ID of the parent iteration node (if applicable).
- * @param parentLoopId - The ID of the parent loop node (if applicable).
- * @returns An array of parsed parameters (plain nodes, nested nodes, or flows).
- */
-function parseParams(paramParts: string[], parentIteration?: string, parentLoopId?: string): (Node | Node[] | number)[] {
-  return paramParts.map((part) => {
-    if (part.includes('->')) {
-      // Parse as a flow and return an array of nodes
-      return parseTopLevelFlow(part).map(node => parseNode(node, parentIteration || undefined, parentLoopId || undefined))
-    }
-    else if (part.startsWith('(')) {
-      // Parse as a nested complex node
-      return parseNode(part, parentIteration || undefined, parentLoopId || undefined)
-    }
-    else if (!Number.isNaN(Number(part.trim()))) {
-      // Parse as a numeric parameter
-      return Number(part.trim())
-    }
-    else {
-      // Parse as a plain node
-      return parseNode(part, parentIteration || undefined, parentLoopId || undefined)
-    }
-  })
-}
-
-type NodeData = {
-  id: string
-  node_id: string
-  title: string
-  node_type?: string
-  execution_metadata: Record<string, any>
-  status: string
-}
-
-/**
- * Converts a plain node to node data.
- */
-function convertPlainNode(node: Node): NodeData[] {
-  return [
-    {
-      id: node.nodeId,
-      node_id: node.nodeId,
-      title: node.nodeId,
-      execution_metadata: {},
-      status: 'succeeded',
-    },
-  ]
-}
-
-/**
- * Converts a retry node to node data.
- */
-function convertRetryNode(node: Node): NodeData[] {
-  const { nodeId, iterationId, iterationIndex, loopId, loopIndex, params } = node as NodeComplex
-  const retryCount = params ? Number.parseInt(params[0] as unknown as string, 10) : 0
-  const result: NodeData[] = [
-    {
-      id: nodeId,
-      node_id: nodeId,
-      title: nodeId,
-      execution_metadata: {},
-      status: 'succeeded',
-    },
-  ]
-
-  for (let i = 0; i < retryCount; i++) {
-    result.push({
-      id: nodeId,
-      node_id: nodeId,
-      title: nodeId,
-      execution_metadata: iterationId
-        ? {
-            iteration_id: iterationId,
-            iteration_index: iterationIndex || 0,
-          }
-        : loopId
-          ? {
-              loop_id: loopId,
-              loop_index: loopIndex || 0,
-            }
-          : {},
-      status: 'retry',
-    })
-  }
-
-  return result
-}
-
-/**
- * Converts an iteration node to node data.
- */
-function convertIterationNode(node: Node): NodeData[] {
-  const { nodeId, params } = node as NodeComplex
-  const result: NodeData[] = [
-    {
-      id: nodeId,
-      node_id: nodeId,
-      title: nodeId,
-      node_type: 'iteration',
-      status: 'succeeded',
-      execution_metadata: {},
-    },
-  ]
-
-  params?.forEach((param: any) => {
-    if (Array.isArray(param)) {
-      param.forEach((childNode: Node) => {
-        const childData = convertToNodeData([childNode])
-        childData.forEach((data) => {
-          data.execution_metadata = {
-            ...data.execution_metadata,
-            iteration_id: nodeId,
-            iteration_index: 0,
-          }
-        })
-        result.push(...childData)
-      })
-    }
-  })
-
-  return result
-}
-
-/**
- * Converts an loop node to node data.
- */
-function convertLoopNode(node: Node): NodeData[] {
-  const { nodeId, params } = node as NodeComplex
-  const result: NodeData[] = [
-    {
-      id: nodeId,
-      node_id: nodeId,
-      title: nodeId,
-      node_type: 'loop',
-      status: 'succeeded',
-      execution_metadata: {},
-    },
-  ]
-
-  params?.forEach((param: any) => {
-    if (Array.isArray(param)) {
-      param.forEach((childNode: Node) => {
-        const childData = convertToNodeData([childNode])
-        childData.forEach((data) => {
-          data.execution_metadata = {
-            ...data.execution_metadata,
-            loop_id: nodeId,
-            loop_index: 0,
-          }
-        })
-        result.push(...childData)
-      })
-    }
-  })
-
-  return result
-}
-
-/**
- * Converts a parallel node to node data.
- */
-function convertParallelNode(node: Node, parentParallelId?: string, parentStartNodeId?: string): NodeData[] {
-  const { nodeId, params } = node as NodeComplex
-  const result: NodeData[] = [
-    {
-      id: nodeId,
-      node_id: nodeId,
-      title: nodeId,
-      execution_metadata: {
-        parallel_id: nodeId,
-      },
-      status: 'succeeded',
-    },
-  ]
-
-  params?.forEach((param) => {
-    if (Array.isArray(param)) {
-      const startNodeId = param[0]?.nodeId
-      param.forEach((childNode: Node) => {
-        const childData = convertToNodeData([childNode])
-        childData.forEach((data) => {
-          data.execution_metadata = {
-            ...data.execution_metadata,
-            parallel_id: nodeId,
-            parallel_start_node_id: startNodeId,
-            ...(parentParallelId && {
-              parent_parallel_id: parentParallelId,
-              parent_parallel_start_node_id: parentStartNodeId,
-            }),
-          }
-        })
-        result.push(...childData)
-      })
-    }
-    else if (param && typeof param === 'object') {
-      const startNodeId = param.nodeId
-      const childData = convertToNodeData([param])
-      childData.forEach((data) => {
-        data.execution_metadata = {
-          ...data.execution_metadata,
-          parallel_id: nodeId,
-          parallel_start_node_id: startNodeId,
-          ...(parentParallelId && {
-            parent_parallel_id: parentParallelId,
-            parent_parallel_start_node_id: parentStartNodeId,
-          }),
-        }
-      })
-      result.push(...childData)
-    }
-  })
-
-  return result
-}
-
-/**
- * Main function to convert nodes to node data.
- */
-function convertToNodeData(nodes: Node[], parentParallelId?: string, parentStartNodeId?: string): NodeData[] {
-  const result: NodeData[] = []
-
-  nodes.forEach((node) => {
-    switch (node.nodeType) {
-      case 'plain':
-        result.push(...convertPlainNode(node))
-        break
-      case 'retry':
-        result.push(...convertRetryNode(node))
-        break
-      case 'iteration':
-        result.push(...convertIterationNode(node))
-        break
-      case 'loop':
-        result.push(...convertLoopNode(node))
-        break
-      case 'parallel':
-        result.push(...convertParallelNode(node, parentParallelId, parentStartNodeId))
-        break
-      default:
-        throw new Error(`Unknown nodeType: ${node.nodeType}`)
-    }
-  })
-
-  return result
-}
-
-export default parseDSL
diff --git a/web/app/components/workflow/run/utils/format-log/iteration/__tests__/index.spec.ts b/web/app/components/workflow/run/utils/format-log/iteration/__tests__/index.spec.ts
index 8f30f6723c3..b2c232c77dc 100644
--- a/web/app/components/workflow/run/utils/format-log/iteration/__tests__/index.spec.ts
+++ b/web/app/components/workflow/run/utils/format-log/iteration/__tests__/index.spec.ts
@@ -1,56 +1,59 @@
 import type { NodeTracing } from '@/types/workflow'
-import { noop } from 'es-toolkit/function'
-import format, { addChildrenToIterationNode } from '..'
-import graphToLogStruct from '../../graph-to-log-struct'
+import { addChildrenToIterationNode } from '..'
 
-describe('iteration', () => {
-  const list = graphToLogStruct('start -> (iteration, iterationNode, plainNode1 -> plainNode2)')
-  const result = format(list as NodeTracing[], noop)
-  it('result should have no nodes in iteration node', () => {
-    expect(result.find(item => !!item.execution_metadata?.iteration_id)).toBeUndefined()
-  })
+type ExecutionMetadata = NonNullable<NodeTracing['execution_metadata']>
 
+const createExecutionMetadata = (overrides: Partial<ExecutionMetadata> = {}): ExecutionMetadata => ({
+  total_tokens: 0,
+  total_price: 0,
+  currency: 'USD',
+  ...overrides,
+})
+
+const createTrace = (nodeId: string, executionMetadata?: Partial<ExecutionMetadata>): NodeTracing => ({
+  node_id: nodeId,
+  execution_metadata: createExecutionMetadata(executionMetadata),
+} as NodeTracing)
+
+describe('iteration format log', () => {
   it('should place the first child of a new iteration at a new record when its index is missing', () => {
-    const parent = { node_id: 'iter1', node_type: 'iteration', execution_metadata: {} } as unknown as NodeTracing
-    const child0 = { node_id: 'code', execution_metadata: { iteration_id: 'iter1', iteration_index: 0 } } as unknown as NodeTracing
-    const streaming = { node_id: 'code', execution_metadata: { iteration_id: 'iter1' } } as unknown as NodeTracing
+    const parent = createTrace('iteration')
+    const child = createTrace('code', { iteration_id: 'iteration', iteration_index: 0 })
+    const streamingChild = createTrace('code', { iteration_id: 'iteration' })
 
-    const result = addChildrenToIterationNode(parent, [child0, streaming])
-    expect(result.details![0]).toEqual([child0])
-    expect(result.details![1]).toEqual([streaming])
+    const result = addChildrenToIterationNode(parent, [child, streamingChild])
+
+    expect(result.details).toEqual([
+      [child],
+      [streamingChild],
+    ])
   })
 
-  it('should keep missing iteration_index items in the current record when the node has not restarted', () => {
-    const parent = {
-      node_id: 'iter1',
-      node_type: 'iteration',
-      execution_metadata: {
-        iteration_duration_map: { 0: 1.2, 1: 0.4 },
-      },
-    } as unknown as NodeTracing
-    const child0 = { node_id: 'code', execution_metadata: { iteration_id: 'iter1', iteration_index: 0 } } as unknown as NodeTracing
-    const child1 = { node_id: 'code', execution_metadata: { iteration_id: 'iter1', iteration_index: 1 } } as unknown as NodeTracing
-    const streaming = { node_id: 'tool', execution_metadata: { iteration_id: 'iter1' } } as unknown as NodeTracing
+  it('should keep missing iteration index items in the current record when the node has not restarted', () => {
+    const parent = createTrace('iteration')
+    const firstRunChild = createTrace('code', { iteration_id: 'iteration', iteration_index: 0 })
+    const secondRunChild = createTrace('code', { iteration_id: 'iteration', iteration_index: 1 })
+    const streamingChild = createTrace('tool', { iteration_id: 'iteration' })
 
-    const result = addChildrenToIterationNode(parent, [child0, child1, streaming])
-    expect(result.details![0]).toEqual([child0])
-    expect(result.details![1]).toEqual([child1, streaming])
+    const result = addChildrenToIterationNode(parent, [firstRunChild, secondRunChild, streamingChild])
+
+    expect(result.details).toEqual([
+      [firstRunChild],
+      [secondRunChild, streamingChild],
+    ])
   })
 
-  it('should not jump to the latest iteration when an earlier item is missing iteration_index', () => {
-    const parent = {
-      node_id: 'iter1',
-      node_type: 'iteration',
-      execution_metadata: {
-        iteration_duration_map: { 0: 1.2, 1: 0.4 },
-      },
-    } as unknown as NodeTracing
-    const code0 = { node_id: 'code', execution_metadata: { iteration_id: 'iter1', iteration_index: 0 } } as unknown as NodeTracing
-    const tool = { node_id: 'tool', execution_metadata: { iteration_id: 'iter1' } } as unknown as NodeTracing
-    const code1 = { node_id: 'code', execution_metadata: { iteration_id: 'iter1', iteration_index: 1 } } as unknown as NodeTracing
+  it('should not move an earlier missing iteration index item into the latest record', () => {
+    const parent = createTrace('iteration')
+    const firstRunChild = createTrace('code', { iteration_id: 'iteration', iteration_index: 0 })
+    const streamingChild = createTrace('tool', { iteration_id: 'iteration' })
+    const secondRunChild = createTrace('code', { iteration_id: 'iteration', iteration_index: 1 })
 
-    const result = addChildrenToIterationNode(parent, [code0, tool, code1])
-    expect(result.details![0]).toEqual([code0, tool])
-    expect(result.details![1]).toEqual([code1])
+    const result = addChildrenToIterationNode(parent, [firstRunChild, streamingChild, secondRunChild])
+
+    expect(result.details).toEqual([
+      [firstRunChild, streamingChild],
+      [secondRunChild],
+    ])
   })
 })
diff --git a/web/app/components/workflow/run/utils/format-log/iteration/index.ts b/web/app/components/workflow/run/utils/format-log/iteration/index.ts
index 91235dd0fc1..743f632db71 100644
--- a/web/app/components/workflow/run/utils/format-log/iteration/index.ts
+++ b/web/app/components/workflow/run/utils/format-log/iteration/index.ts
@@ -1,6 +1,4 @@
 import type { NodeTracing } from '@/types/workflow'
-import { BlockEnum } from '@/app/components/workflow/types'
-import formatParallelNode from '../parallel'
 
 export function addChildrenToIterationNode(iterationNode: NodeTracing, childrenNodes: NodeTracing[]): NodeTracing {
   const details: NodeTracing[][] = []
@@ -35,39 +33,3 @@ export function addChildrenToIterationNode(iterationNode: NodeTracing, childrenN
     details,
   }
 }
-
-const format = (list: NodeTracing[], t: any): NodeTracing[] => {
-  const iterationNodeIds = list
-    .filter(item => item.node_type === BlockEnum.Iteration)
-    .map(item => item.node_id)
-  const iterationChildrenNodeIds = list
-    .filter(item => item.execution_metadata?.iteration_id && iterationNodeIds.includes(item.execution_metadata.iteration_id))
-    .map(item => item.node_id)
-  // move iteration children nodes to iteration node's details field
-  const result = list
-    .filter(item => !iterationChildrenNodeIds.includes(item.node_id))
-    .map((item) => {
-      if (item.node_type === BlockEnum.Iteration) {
-        const childrenNodes = list.filter(child => child.execution_metadata?.iteration_id === item.node_id)
-        const error = childrenNodes.find(child => child.status === 'failed')
-        if (error) {
-          item.status = 'failed'
-          item.error = error.error
-        }
-        const addedChildrenList = addChildrenToIterationNode(item, childrenNodes)
-        // handle parallel node in iteration node
-        if (addedChildrenList.details && addedChildrenList.details.length > 0) {
-          addedChildrenList.details = addedChildrenList.details.map((row) => {
-            return formatParallelNode(row, t)
-          })
-        }
-        return addedChildrenList
-      }
-
-      return item
-    })
-
-  return result
-}
-
-export default format
diff --git a/web/app/components/workflow/run/utils/format-log/loop/__tests__/index.spec.ts b/web/app/components/workflow/run/utils/format-log/loop/__tests__/index.spec.ts
index 00380361ed1..eaaac33b6fc 100644
--- a/web/app/components/workflow/run/utils/format-log/loop/__tests__/index.spec.ts
+++ b/web/app/components/workflow/run/utils/format-log/loop/__tests__/index.spec.ts
@@ -1,68 +1,66 @@
 import type { NodeTracing } from '@/types/workflow'
-import { noop } from 'es-toolkit/function'
-import format, { addChildrenToLoopNode } from '..'
-import graphToLogStruct from '../../graph-to-log-struct'
+import { addChildrenToLoopNode } from '..'
 
-describe('loop', () => {
-  const list = graphToLogStruct('start -> (loop, loopNode, plainNode1 -> plainNode2)')
-  const [startNode, loopNode, ...loops] = list
-  const result = format(list as NodeTracing[], noop)
-  it('result should have no nodes in loop node', () => {
-    expect(result.find(item => !!item.execution_metadata?.loop_id)).toBeUndefined()
-  })
-  it('loop should put nodes in details', () => {
-    expect(result).toEqual([
-      startNode,
-      {
-        ...loopNode,
-        details: [
-          [loops[0], loops[1]],
-        ],
-      },
+type ExecutionMetadata = NonNullable<NodeTracing['execution_metadata']>
+
+const createExecutionMetadata = (overrides: Partial<ExecutionMetadata> = {}): ExecutionMetadata => ({
+  total_tokens: 0,
+  total_price: 0,
+  currency: 'USD',
+  ...overrides,
+})
+
+const createTrace = (nodeId: string, executionMetadata?: Partial<ExecutionMetadata>): NodeTracing => ({
+  node_id: nodeId,
+  execution_metadata: createExecutionMetadata(executionMetadata),
+} as NodeTracing)
+
+describe('loop format log', () => {
+  it('should place the first child of a new loop at a new record when its index is missing', () => {
+    const parent = createTrace('loop')
+    const child = createTrace('code', { loop_id: 'loop', loop_index: 0 })
+    const streamingChild = createTrace('code', { loop_id: 'loop' })
+
+    const result = addChildrenToLoopNode(parent, [child, streamingChild])
+
+    expect(result.details).toEqual([
+      [child],
+      [streamingChild],
     ])
   })
 
-  it('should place the first child of a new loop run at a new record when its index is missing', () => {
-    const parent = { node_id: 'loop1', node_type: 'loop', execution_metadata: {} } as unknown as NodeTracing
-    const child0 = { node_id: 'code', execution_metadata: { loop_id: 'loop1', loop_index: 0 } } as unknown as NodeTracing
-    const streaming = { node_id: 'code', execution_metadata: { loop_id: 'loop1' } } as unknown as NodeTracing
+  it('should keep missing loop index items in the current record when the node has not restarted', () => {
+    const parent = createTrace('loop')
+    const firstRunChild = createTrace('code', { loop_id: 'loop', loop_index: 0 })
+    const secondRunChild = createTrace('code', { loop_id: 'loop', loop_index: 1 })
+    const streamingChild = createTrace('tool', { loop_id: 'loop' })
 
-    const result = addChildrenToLoopNode(parent, [child0, streaming])
-    expect(result.details![0]).toEqual([child0])
-    expect(result.details![1]).toEqual([streaming])
+    const result = addChildrenToLoopNode(parent, [firstRunChild, secondRunChild, streamingChild])
+
+    expect(result.details).toEqual([
+      [firstRunChild],
+      [secondRunChild, streamingChild],
+    ])
   })
 
-  it('should keep missing loop_index items in the current record when the node has not restarted', () => {
-    const parent = {
-      node_id: 'loop1',
-      node_type: 'loop',
-      execution_metadata: {
-        loop_duration_map: { 0: 1.2, 1: 0.4 },
-      },
-    } as unknown as NodeTracing
-    const child0 = { node_id: 'code', execution_metadata: { loop_id: 'loop1', loop_index: 0 } } as unknown as NodeTracing
-    const child1 = { node_id: 'code', execution_metadata: { loop_id: 'loop1', loop_index: 1 } } as unknown as NodeTracing
-    const streaming = { node_id: 'tool', execution_metadata: { loop_id: 'loop1' } } as unknown as NodeTracing
+  it('should group loop children by parallel run id before loop index', () => {
+    const parent = createTrace('loop')
+    const firstParallelChild = createTrace('code', {
+      loop_id: 'loop',
+      loop_index: 0,
+      parallel_mode_run_id: 'parallel-a',
+    })
+    const secondParallelChild = createTrace('tool', {
+      loop_id: 'loop',
+      loop_index: 0,
+      parallel_mode_run_id: 'parallel-b',
+    })
 
-    const result = addChildrenToLoopNode(parent, [child0, child1, streaming])
-    expect(result.details![0]).toEqual([child0])
-    expect(result.details![1]).toEqual([child1, streaming])
-  })
+    const result = addChildrenToLoopNode(parent, [firstParallelChild, secondParallelChild])
 
-  it('should not jump to the latest loop when an earlier item is missing loop_index', () => {
-    const parent = {
-      node_id: 'loop1',
-      node_type: 'loop',
-      execution_metadata: {
-        loop_duration_map: { 0: 1.2, 1: 0.4 },
-      },
-    } as unknown as NodeTracing
-    const code0 = { node_id: 'code', execution_metadata: { loop_id: 'loop1', loop_index: 0 } } as unknown as NodeTracing
-    const tool = { node_id: 'tool', execution_metadata: { loop_id: 'loop1' } } as unknown as NodeTracing
-    const code1 = { node_id: 'code', execution_metadata: { loop_id: 'loop1', loop_index: 1 } } as unknown as NodeTracing
-
-    const result = addChildrenToLoopNode(parent, [code0, tool, code1])
-    expect(result.details![0]).toEqual([code0, tool])
-    expect(result.details![1]).toEqual([code1])
+    expect(result.details).toEqual([
+      [firstParallelChild],
+      [secondParallelChild],
+    ])
   })
 })
diff --git a/web/app/components/workflow/run/utils/format-log/loop/index.ts b/web/app/components/workflow/run/utils/format-log/loop/index.ts
index be776267862..60b788462cc 100644
--- a/web/app/components/workflow/run/utils/format-log/loop/index.ts
+++ b/web/app/components/workflow/run/utils/format-log/loop/index.ts
@@ -1,6 +1,4 @@
 import type { NodeTracing } from '@/types/workflow'
-import { BlockEnum } from '@/app/components/workflow/types'
-import formatParallelNode from '../parallel'
 
 export function addChildrenToLoopNode(loopNode: NodeTracing, childrenNodes: NodeTracing[]): NodeTracing {
   const detailsByKey = new Map<string, NodeTracing[]>()
@@ -48,39 +46,3 @@ export function addChildrenToLoopNode(loopNode: NodeTracing, childrenNodes: Node
     details: order.map(key => detailsByKey.get(key) || []),
   }
 }
-
-const format = (list: NodeTracing[], t: any): NodeTracing[] => {
-  const loopNodeIds = list
-    .filter(item => item.node_type === BlockEnum.Loop)
-    .map(item => item.node_id)
-  const loopChildrenNodeIds = list
-    .filter(item => item.execution_metadata?.loop_id && loopNodeIds.includes(item.execution_metadata.loop_id))
-    .map(item => item.node_id)
-  // move loop children nodes to loop node's details field
-  const result = list
-    .filter(item => !loopChildrenNodeIds.includes(item.node_id))
-    .map((item) => {
-      if (item.node_type === BlockEnum.Loop) {
-        const childrenNodes = list.filter(child => child.execution_metadata?.loop_id === item.node_id)
-        const error = childrenNodes.find(child => child.status === 'failed')
-        if (error) {
-          item.status = 'failed'
-          item.error = error.error
-        }
-        const addedChildrenList = addChildrenToLoopNode(item, childrenNodes)
-        // handle parallel node in loop node
-        if (addedChildrenList.details && addedChildrenList.details.length > 0) {
-          addedChildrenList.details = addedChildrenList.details.map((row) => {
-            return formatParallelNode(row, t)
-          })
-        }
-        return addedChildrenList
-      }
-
-      return item
-    })
-
-  return result
-}
-
-export default format
diff --git a/web/app/components/workflow/run/utils/format-log/retry/__tests__/index.spec.ts b/web/app/components/workflow/run/utils/format-log/retry/__tests__/index.spec.ts
index 7d497061f61..86d696228f6 100644
--- a/web/app/components/workflow/run/utils/format-log/retry/__tests__/index.spec.ts
+++ b/web/app/components/workflow/run/utils/format-log/retry/__tests__/index.spec.ts
@@ -1,22 +1,77 @@
 import type { NodeTracing } from '@/types/workflow'
 import format from '..'
-import graphToLogStruct from '../../graph-to-log-struct'
 
-describe('retry', () => {
-  // retry nodeId:1 3 times.
-  const steps = graphToLogStruct('start -> (retry, retryNode, 3)')
-  const [startNode, retryNode, ...retryDetail] = steps
-  const result = format(steps as NodeTracing[])
-  it('should have no retry status nodes', () => {
-    expect(result.find(item => item.status === 'retry')).toBeUndefined()
-  })
-  it('should put retry nodes in retryDetail', () => {
+type ExecutionMetadata = NonNullable<NodeTracing['execution_metadata']>
+
+const createExecutionMetadata = (overrides: Partial<ExecutionMetadata> = {}): ExecutionMetadata => ({
+  total_tokens: 0,
+  total_price: 0,
+  currency: 'USD',
+  ...overrides,
+})
+
+const createTrace = (overrides: Omit<Partial<NodeTracing>, 'execution_metadata'> & {
+  execution_metadata?: Partial<ExecutionMetadata>
+}): NodeTracing => {
+  const { execution_metadata, ...rest } = overrides
+
+  return {
+    node_id: 'node',
+    status: 'succeeded',
+    ...rest,
+    execution_metadata: createExecutionMetadata(execution_metadata),
+  } as NodeTracing
+}
+
+describe('retry format log', () => {
+  it('should remove retry status nodes and attach them to the matching node', () => {
+    const retryOne = createTrace({ node_id: 'code', status: 'retry' })
+    const retryTwo = createTrace({ node_id: 'code', status: 'retry' })
+    const finalRun = createTrace({ node_id: 'code', status: 'succeeded' })
+
+    const result = format([retryOne, retryTwo, finalRun])
+
     expect(result).toEqual([
-      startNode,
-      {
-        ...retryNode,
-        retryDetail,
+      expect.objectContaining({
+        node_id: 'code',
+        status: 'succeeded',
+        retryDetail: [retryOne, retryTwo],
+      }),
+    ])
+  })
+
+  it('should match retry nodes by loop index inside loop runs', () => {
+    const retryFromPreviousRun = createTrace({
+      node_id: 'tool',
+      status: 'retry',
+      execution_metadata: {
+        loop_id: 'loop',
+        loop_index: 0,
       },
+    })
+    const retryFromCurrentRun = createTrace({
+      node_id: 'tool',
+      status: 'retry',
+      execution_metadata: {
+        loop_id: 'loop',
+        loop_index: 1,
+      },
+    })
+    const finalRun = createTrace({
+      node_id: 'tool',
+      status: 'succeeded',
+      execution_metadata: {
+        loop_id: 'loop',
+        loop_index: 1,
+      },
+    })
+
+    const result = format([retryFromPreviousRun, retryFromCurrentRun, finalRun])
+
+    expect(result).toEqual([
+      expect.objectContaining({
+        retryDetail: [retryFromCurrentRun],
+      }),
     ])
   })
 })
diff --git a/web/app/components/workflow/utils/__tests__/debug.spec.ts b/web/app/components/workflow/utils/__tests__/debug.spec.ts
deleted file mode 100644
index 4439428e098..00000000000
--- a/web/app/components/workflow/utils/__tests__/debug.spec.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { VarInInspectType } from '@/types/workflow'
-import { VarType } from '../../types'
-import { outputToVarInInspect } from '../debug'
-
-describe('outputToVarInInspect', () => {
-  it('should create a VarInInspect object with correct fields', () => {
-    const result = outputToVarInInspect({
-      nodeId: 'node-1',
-      name: 'output',
-      value: 'hello world',
-    })
-
-    expect(result).toMatchObject({
-      type: VarInInspectType.node,
-      name: 'output',
-      description: '',
-      selector: ['node-1', 'output'],
-      value_type: VarType.string,
-      value: 'hello world',
-      edited: false,
-      visible: true,
-      is_truncated: false,
-      full_content: { size_bytes: 0, download_url: '' },
-    })
-    expect(result.id).toBeDefined()
-  })
-
-  it('should handle different value types', () => {
-    const result = outputToVarInInspect({
-      nodeId: 'n2',
-      name: 'count',
-      value: 42,
-    })
-
-    expect(result.value).toBe(42)
-    expect(result.selector).toEqual(['n2', 'count'])
-  })
-
-  it('should handle null value', () => {
-    const result = outputToVarInInspect({
-      nodeId: 'n3',
-      name: 'empty',
-      value: null,
-    })
-
-    expect(result.value).toBeNull()
-  })
-})
diff --git a/web/app/components/workflow/utils/debug.ts b/web/app/components/workflow/utils/debug.ts
deleted file mode 100644
index 4f471531119..00000000000
--- a/web/app/components/workflow/utils/debug.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { VarInInspect } from '@/types/workflow'
-import { VarInInspectType } from '@/types/workflow'
-import { VarType } from '../types'
-
-type OutputToVarInInspectParams = {
-  nodeId: string
-  name: string
-  value: any
-}
-export const outputToVarInInspect = ({
-  nodeId,
-  name,
-  value,
-}: OutputToVarInInspectParams): VarInInspect => {
-  return {
-    id: `${Date.now()}`, // TODO: wait for api
-    type: VarInInspectType.node,
-    name,
-    description: '',
-    selector: [nodeId, name],
-    value_type: VarType.string, // TODO: wait for api or get from node
-    value,
-    edited: false,
-    visible: true,
-    is_truncated: false,
-    full_content: { size_bytes: 0, download_url: '' },
-  }
-}
diff --git a/web/app/styles/tailwind-core.css b/web/app/styles/tailwind-core.css
index 614a46652b4..7707eca879c 100644
--- a/web/app/styles/tailwind-core.css
+++ b/web/app/styles/tailwind-core.css
@@ -28,6 +28,7 @@
 @import '../components/base/action-button/index.css';
 @import '../components/base/badge/index.css';
 @import '../components/base/premium-badge/index.css';
+@import '../components/main-nav/components/nav-link.css';
 
 /* ---------- JS plugins ------------------------------------------------ */
 @plugin './plugins/icons.ts';
diff --git a/web/context/modal-context.test.tsx b/web/context/modal-context.test.tsx
index cd54fcd41a9..3b972156f86 100644
--- a/web/context/modal-context.test.tsx
+++ b/web/context/modal-context.test.tsx
@@ -106,7 +106,7 @@ const PreferencesOpener = () => {
   return (
     <button
       type="button"
-      onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.LANGUAGE })}
+      onClick={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PREFERENCES })}
     >
       open preferences
     </button>
@@ -191,7 +191,7 @@ describe('ModalContextProvider trigger events limit modal', () => {
 
     await user.click(screen.getByRole('button', { name: 'open preferences' }))
 
-    expect(await screen.findByTestId('account-setting-active-tab')).toHaveTextContent(ACCOUNT_SETTING_TAB.LANGUAGE)
+    expect(await screen.findByTestId('account-setting-active-tab')).toHaveTextContent(ACCOUNT_SETTING_TAB.PREFERENCES)
   })
 
   it('relies on the in-memory guard when localStorage reads throw', async () => {
diff --git a/web/features/deployments/nav/__tests__/index.spec.tsx b/web/features/deployments/nav/__tests__/index.spec.tsx
deleted file mode 100644
index 01e25696b55..00000000000
--- a/web/features/deployments/nav/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { atom } from 'jotai'
-import { describe, expect, it, vi } from 'vitest'
-import { DeploymentsNav } from '../index'
-
-const mockPush = vi.hoisted(() => vi.fn())
-const mockFetchNextPage = vi.hoisted(() => vi.fn())
-
-vi.mock('@/next/navigation', () => ({
-  useRouter: () => ({
-    push: mockPush,
-  }),
-}))
-
-vi.mock('@/app/components/header/nav', () => ({
-  default: ({
-    createText,
-    curNav,
-    isLoadingMore,
-    navigationItems,
-    onCreate,
-    onLoadMore,
-    text,
-  }: {
-    createText: string
-    curNav?: { name: string }
-    isLoadingMore: boolean
-    navigationItems: Array<{ name: string }>
-    onCreate: () => void
-    onLoadMore: () => void
-    text: string
-  }) => (
-    <nav aria-label={text}>
-      <span>{curNav?.name}</span>
-      {navigationItems.map(item => (
-        <span key={item.name}>{item.name}</span>
-      ))}
-      <button type="button" onClick={onCreate}>
-        {createText}
-      </button>
-      <button type="button" data-loading={String(isLoadingMore)} onClick={onLoadMore}>
-        load more
-      </button>
-    </nav>
-  ),
-}))
-
-vi.mock('../state', () => ({
-  deploymentsNavCurrentItemAtom: atom({
-    id: 'app-instance-1',
-    name: 'Deployment 1',
-  }),
-  deploymentsNavItemsAtom: atom([
-    {
-      id: 'app-instance-1',
-      name: 'Deployment 1',
-    },
-  ]),
-  deploymentsNavListQueryAtom: atom({
-    fetchNextPage: mockFetchNextPage,
-    hasNextPage: true,
-    isFetchingNextPage: false,
-  }),
-}))
-
-describe('DeploymentsNav', () => {
-  it('should render deployment navigation from atom state and forward nav actions', () => {
-    render(<DeploymentsNav />)
-
-    expect(screen.getByRole('navigation', { name: 'common.menus.deployments' })).toBeInTheDocument()
-    expect(screen.getAllByText('Deployment 1')).toHaveLength(2)
-
-    fireEvent.click(screen.getByRole('button', { name: 'deployments:list.createDeployment' }))
-    fireEvent.click(screen.getByRole('button', { name: 'load more' }))
-
-    expect(mockPush).toHaveBeenCalledWith('/deployments/create')
-    expect(mockFetchNextPage).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/web/features/deployments/nav/__tests__/state.spec.ts b/web/features/deployments/nav/__tests__/state.spec.ts
deleted file mode 100644
index e4eb25bae01..00000000000
--- a/web/features/deployments/nav/__tests__/state.spec.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import type {
-  AppInstance,
-  GetAppInstanceResponse,
-  ListAppInstancesResponse,
-} from '@dify/contracts/enterprise/types.gen'
-import type { Getter } from 'jotai'
-import { atom, createStore } from 'jotai'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { setNextRouteStateAtom } from '@/app/components/next-route-state/atoms'
-
-type QueryOptions = {
-  enabled?: boolean
-  input?: unknown
-  queryKey?: readonly unknown[]
-  select?: (data: GetAppInstanceResponse) => AppInstance
-}
-
-type InfiniteQueryOptions = QueryOptions & {
-  input?: (pageParam: number) => unknown
-}
-
-type QueryResult = {
-  data?: unknown
-}
-
-const mockQueryResults = vi.hoisted(() => ({
-  current: new Map<string, QueryResult>(),
-}))
-
-vi.mock('jotai-tanstack-query', () => ({
-  atomWithQuery: (createOptions: (get: Getter) => QueryOptions) => atom((get) => {
-    const options = createOptions(get)
-    const queryName = String(options.queryKey?.[0] ?? 'unknown')
-    const queryResult = options.enabled === false
-      ? undefined
-      : mockQueryResults.current.get(queryName)
-    const selectedData = options.select && queryResult?.data
-      ? options.select(queryResult.data as GetAppInstanceResponse)
-      : queryResult?.data
-
-    return {
-      ...options,
-      data: selectedData,
-      isError: false,
-      isFetching: false,
-      isLoading: false,
-      isSuccess: Boolean(selectedData),
-    }
-  }),
-  atomWithInfiniteQuery: (createOptions: (get: Getter) => InfiniteQueryOptions) => atom((get) => {
-    const options = createOptions(get)
-    const queryName = String(options.queryKey?.[0] ?? 'unknown')
-    const queryResult = options.enabled === false
-      ? undefined
-      : mockQueryResults.current.get(queryName)
-
-    return {
-      ...options,
-      data: queryResult?.data,
-      hasNextPage: false,
-      isError: false,
-      isFetching: false,
-      isFetchingNextPage: false,
-      isLoading: false,
-      isSuccess: Boolean(queryResult?.data),
-    }
-  }),
-}))
-
-vi.mock('@/service/client', () => ({
-  consoleQuery: {
-    enterprise: {
-      appInstanceService: {
-        getAppInstance: {
-          queryOptions: (options: QueryOptions) => ({
-            ...options,
-            queryKey: ['getAppInstance', options.input],
-          }),
-        },
-        listAppInstances: {
-          infiniteOptions: (options: InfiniteQueryOptions) => ({
-            ...options,
-            queryKey: ['listAppInstances'],
-          }),
-        },
-      },
-    },
-  },
-}))
-
-async function loadState() {
-  return await import('../state')
-}
-
-function appInstance(overrides: Partial<AppInstance> = {}): AppInstance {
-  return {
-    id: 'app-instance-1',
-    displayName: 'Deployment 1',
-    description: '',
-    sourceAppId: 'source-app-1',
-    createdAt: '2026-01-01T00:00:00.000Z',
-    updatedAt: '2026-01-01T00:00:00.000Z',
-    ...overrides,
-  } as AppInstance
-}
-
-function setListAppInstances(appInstances: AppInstance[]) {
-  mockQueryResults.current.set('listAppInstances', {
-    data: {
-      pages: [
-        {
-          appInstances,
-          pagination: {},
-        } satisfies Partial<ListAppInstancesResponse>,
-      ],
-    },
-  })
-}
-
-function setDeploymentRoute(store: ReturnType<typeof createStore>, appInstanceId = 'app-instance-1') {
-  store.set(setNextRouteStateAtom, {
-    pathname: `/deployments/${appInstanceId}/overview`,
-    params: { appInstanceId },
-  })
-}
-
-describe('deployments nav state', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockQueryResults.current.clear()
-  })
-
-  it('should hide deployment nav items outside deployment routes', async () => {
-    const state = await loadState()
-    const store = createStore()
-
-    expect(store.get(state.deploymentsNavItemsAtom)).toEqual([])
-    expect(store.get(state.deploymentsNavCurrentItemAtom)).toBeUndefined()
-  })
-
-  it('should append the current route item when it is missing from the list query', async () => {
-    const state = await loadState()
-    const store = createStore()
-    setDeploymentRoute(store)
-    setListAppInstances([
-      appInstance({
-        id: 'app-instance-2',
-        displayName: 'Deployment 2',
-      }),
-    ])
-    mockQueryResults.current.set('getAppInstance', {
-      data: {
-        appInstance: appInstance(),
-      },
-    })
-
-    expect(store.get(state.deploymentsNavItemsAtom)).toMatchObject([
-      {
-        id: 'app-instance-2',
-        name: 'Deployment 2',
-        link: '/deployments/app-instance-2/overview',
-      },
-      {
-        id: 'app-instance-1',
-        name: 'Deployment 1',
-        link: '/deployments/app-instance-1/overview',
-      },
-    ])
-    expect(store.get(state.deploymentsNavCurrentItemAtom)).toMatchObject({
-      id: 'app-instance-1',
-      name: 'Deployment 1',
-    })
-  })
-
-  it('should use the route id as a fallback current item name', async () => {
-    const state = await loadState()
-    const store = createStore()
-    setDeploymentRoute(store)
-    setListAppInstances([])
-
-    expect(store.get(state.deploymentsNavItemsAtom)).toMatchObject([
-      {
-        id: 'app-instance-1',
-        name: 'app-instance-1',
-        link: '/deployments/app-instance-1/overview',
-      },
-    ])
-  })
-})
diff --git a/web/features/deployments/nav/index.tsx b/web/features/deployments/nav/index.tsx
deleted file mode 100644
index baa346be77a..00000000000
--- a/web/features/deployments/nav/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { useAtomValue } from 'jotai'
-import { useTranslation } from 'react-i18next'
-import Nav from '@/app/components/header/nav'
-import { useRouter } from '@/next/navigation'
-import {
-  deploymentsNavCurrentItemAtom,
-  deploymentsNavItemsAtom,
-  deploymentsNavListQueryAtom,
-} from './state'
-
-export function DeploymentsNav() {
-  const { t } = useTranslation()
-  const router = useRouter()
-  const navigationItems = useAtomValue(deploymentsNavItemsAtom)
-  const curNav = useAtomValue(deploymentsNavCurrentItemAtom)
-  const listQuery = useAtomValue(deploymentsNavListQueryAtom)
-
-  function handleCreate() {
-    router.push('/deployments/create')
-  }
-
-  function handleLoadMore() {
-    if (listQuery.hasNextPage && !listQuery.isFetchingNextPage)
-      void listQuery.fetchNextPage()
-  }
-
-  return (
-    <Nav
-      isApp={false}
-      icon={<span aria-hidden className="i-ri-rocket-line size-4" />}
-      activeIcon={<span aria-hidden className="i-ri-rocket-fill size-4" />}
-      text={t('menus.deployments', { ns: 'common' })}
-      activeSegment="deployments"
-      link="/deployments"
-      curNav={curNav}
-      navigationItems={navigationItems}
-      createText={t('deployments:list.createDeployment')}
-      onCreate={handleCreate}
-      onLoadMore={handleLoadMore}
-      isLoadingMore={listQuery.isFetchingNextPage}
-    />
-  )
-}
diff --git a/web/features/deployments/nav/state.ts b/web/features/deployments/nav/state.ts
deleted file mode 100644
index b9242c38637..00000000000
--- a/web/features/deployments/nav/state.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client'
-
-import type {
-  AppInstance,
-  GetAppInstanceResponse,
-} from '@dify/contracts/enterprise/types.gen'
-import type { NavItem } from '@/app/components/header/nav/nav-selector'
-import { keepPreviousData, skipToken } from '@tanstack/react-query'
-import { atom } from 'jotai'
-import { atomWithInfiniteQuery, atomWithQuery } from 'jotai-tanstack-query'
-import { consoleQuery } from '@/service/client'
-import {
-  deploymentRouteAppInstanceIdAtom,
-  deploymentsRouteActiveAtom,
-} from '../route-state'
-import { getNextPageParamFromPagination, SOURCE_APPS_PAGE_SIZE } from '../shared/domain/pagination'
-
-function navItemFromListApp(app: AppInstance): NavItem {
-  const id = app.id
-
-  return {
-    id,
-    name: app.displayName,
-    link: `/deployments/${id}/overview`,
-    icon_type: 'emoji',
-    icon: '🚀',
-    icon_background: '#E0EAFF',
-    icon_url: null,
-  }
-}
-
-function navItemFromOverview(instance?: AppInstance, fallbackId?: string): NavItem | undefined {
-  const id = instance?.id ?? fallbackId
-  if (!id)
-    return undefined
-
-  return {
-    id,
-    name: instance ? instance.displayName : id,
-    link: `/deployments/${id}/overview`,
-    icon_type: 'emoji',
-    icon: '🚀',
-    icon_background: '#E0EAFF',
-    icon_url: null,
-  }
-}
-
-const deploymentsNavCurrentInstanceQueryAtom = atomWithQuery((get) => {
-  const appInstanceId = get(deploymentRouteAppInstanceIdAtom)
-  const isActive = get(deploymentsRouteActiveAtom)
-
-  return consoleQuery.enterprise.appInstanceService.getAppInstance.queryOptions({
-    input: appInstanceId
-      ? {
-          params: {
-            appInstanceId,
-          },
-        }
-      : skipToken,
-    enabled: isActive && Boolean(appInstanceId),
-    select: (data: GetAppInstanceResponse) => data.appInstance,
-  })
-})
-
-export const deploymentsNavListQueryAtom = atomWithInfiniteQuery((get) => {
-  const isActive = get(deploymentsRouteActiveAtom)
-
-  return consoleQuery.enterprise.appInstanceService.listAppInstances.infiniteOptions({
-    input: pageParam => ({
-      query: {
-        pageNumber: Number(pageParam),
-        resultsPerPage: SOURCE_APPS_PAGE_SIZE,
-      },
-    }),
-    getNextPageParam: lastPage => getNextPageParamFromPagination(lastPage.pagination),
-    initialPageParam: 1,
-    placeholderData: keepPreviousData,
-    enabled: isActive,
-  })
-})
-
-export const deploymentsNavItemsAtom = atom((get): NavItem[] => {
-  if (!get(deploymentsRouteActiveAtom))
-    return []
-
-  const appInstanceId = get(deploymentRouteAppInstanceIdAtom)
-  const currentInstance = get(deploymentsNavCurrentInstanceQueryAtom).data
-  const appNavItems = get(deploymentsNavListQueryAtom).data?.pages.flatMap(page =>
-    page.appInstances.map(navItemFromListApp),
-  ) ?? []
-  const currentNavItem = navItemFromOverview(currentInstance, appInstanceId)
-
-  return currentNavItem && !appNavItems.some(item => item.id === currentNavItem.id)
-    ? [...appNavItems, currentNavItem]
-    : appNavItems
-})
-
-export const deploymentsNavCurrentItemAtom = atom((get) => {
-  const appInstanceId = get(deploymentRouteAppInstanceIdAtom)
-  if (!appInstanceId)
-    return undefined
-
-  return get(deploymentsNavItemsAtom).find(item => item.id === appInstanceId)
-})
diff --git a/web/features/deployments/route-state.ts b/web/features/deployments/route-state.ts
index fc2c7397188..ca62e612a9a 100644
--- a/web/features/deployments/route-state.ts
+++ b/web/features/deployments/route-state.ts
@@ -3,15 +3,8 @@
 import { atom } from 'jotai'
 import {
   nextParamsAtom,
-  nextPathnameAtom,
 } from '@/app/components/next-route-state/atoms'
 
-function isDeploymentsRoute(pathname: string) {
-  return pathname === '/deployments' || pathname.startsWith('/deployments/')
-}
-
-export const deploymentsRouteActiveAtom = atom(get => isDeploymentsRoute(get(nextPathnameAtom)))
-
 export const deploymentRouteAppInstanceIdAtom = atom((get) => {
   const appInstanceId = get(nextParamsAtom).appInstanceId
 
diff --git a/web/i18n/ar-TN/dataset-pipeline.json b/web/i18n/ar-TN/dataset-pipeline.json
index 5be245018e0..7ad5276fe74 100644
--- a/web/i18n/ar-TN/dataset-pipeline.json
+++ b/web/i18n/ar-TN/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "هذا الإجراء دائم. لن تتمكن من العودة إلى الطريقة السابقة. يرجى التأكيد للتحويل.",
   "conversion.confirm.title": "تأكيد",
   "conversion.descriptionChunk1": "يمكنك الآن تحويل قاعدة المعرفة الحالية لاستخدام سير عمل المعرفة لمعالجة المستندات",
-  "conversion.descriptionChunk2": " - نهج أكثر انفتاحًا ومرونة مع الوصول إلى الإضافات من سوقنا. سيطبق هذا طريقة المعالجة الجديدة على جميع المستندات المستقبلية.",
+  "conversion.descriptionChunk2": " — نهج أكثر انفتاحًا ومرونة مع الوصول إلى الإضافات من السوق. سيطبق هذا طريقة المعالجة الجديدة على جميع المستندات المستقبلية.",
   "conversion.errorMessage": "فشل تحويل مجموعة البيانات إلى سير عمل",
   "conversion.successMessage": "تم تحويل مجموعة البيانات إلى سير عمل بنجاح",
   "conversion.title": "التحويل إلى سير عمل المعرفة",
diff --git a/web/i18n/ar-TN/permission-keys.json b/web/i18n/ar-TN/permission-keys.json
index cd7c67a28e6..082b345ba66 100644
--- a/web/i18n/ar-TN/permission-keys.json
+++ b/web/i18n/ar-TN/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "نشر التطبيق وإدارة الإصدارات",
   "app.acl.test_and_run": "اختبار التطبيق واستخدامه",
   "app.acl.view_layout": "صفحة التنسيق للقراءة فقط",
-  "app.create_and_management": "إنشاء التطبيقات وإدارة التطبيقات التي أنشأتها",
+  "app.create_and_management": "إنشاء التطبيقات",
   "app.tag.manage": "إدارة وسوم التطبيق",
   "app_library.access": "الوصول إلى مكتبة التطبيقات",
   "billing.manage": "تغيير خطط الاشتراك",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "استرجاع قاعدة المعرفة",
   "dataset.acl.use": "إضافة مستندات إلى قاعدة المعرفة",
   "dataset.api_key.manage": "إدارة مفاتيح API لقاعدة المعرفة",
-  "dataset.create_and_management": "إنشاء قواعد المعرفة وإدارة قواعد المعرفة التي أنشأتها",
+  "dataset.create_and_management": "إنشاء قواعد المعرفة",
   "dataset.external.connect": "الاتصال بقواعد المعرفة الخارجية",
   "dataset.tag.manage": "إدارة وسوم قاعدة المعرفة",
   "mcp.manage": "إدارة MCP",
diff --git a/web/i18n/ar-TN/permission.json b/web/i18n/ar-TN/permission.json
index 75acc42fb23..e08371d8d77 100644
--- a/web/i18n/ar-TN/permission.json
+++ b/web/i18n/ar-TN/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "اعرض الاسم والوصف والأذونات الممنوحة لمجموعة الأذونات هذه.",
   "permissionSet.modal.view.dataset.title": "عرض مجموعة أذونات قاعدة المعرفة",
   "permissionSet.nameLabel": "اسم مجموعة الأذونات",
-  "permissionSet.namePlaceholder": "مثال: يمكنه تصدير DSL",
+  "permissionSet.namePlaceholder": "مثال: مجموعة أذونات التشغيل",
   "permissionSet.permissions": "الأذونات",
   "role.addRole": "إنشاء الأدوار",
   "role.copyMembersDescription_one": "\"{{name}}\" مُعيَّن لعضو {{count}}. هل تريد أن تتضمن نسخة الدور الجديد العضو نفسه؟",
diff --git a/web/i18n/ar-TN/plugin.json b/web/i18n/ar-TN/plugin.json
index a784c02e7f0..f46ef50eb18 100644
--- a/web/i18n/ar-TN/plugin.json
+++ b/web/i18n/ar-TN/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "استخدام تفويض OAuth",
   "auth.whoCanUse": "من يستطيع استخدامه",
   "auth.workspaceDefault": "افتراضي مساحة العمل",
+  "autoUpdate.autoUpdate": "التحديث التلقائي",
+  "autoUpdate.autoUpdateSettings": "إعدادات التحديث التلقائي",
   "autoUpdate.automaticUpdates": "تحديثات تلقائية",
   "autoUpdate.changeTimezone": "لتغيير المنطقة الزمنية، انتقل إلى <setTimezone>الإعدادات</setTimezone>",
   "autoUpdate.excludeUpdate": "لن يتم تحديث الإضافات {{num}} التالية تلقائيًا",
+  "autoUpdate.excludeUpdate_one": "لن يتم تحديث الإضافة {{num}} التالية تلقائيًا",
+  "autoUpdate.excludeUpdate_other": "لن يتم تحديث الإضافات {{num}} التالية تلقائيًا",
   "autoUpdate.nextUpdateTime": "التحديث التلقائي التالي: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "لم يتم العثور على أي إضافات",
   "autoUpdate.noPluginPlaceholder.noInstalled": "لم يتم تثبيت أي إضافات",
   "autoUpdate.operation.clearAll": "مسح الكل",
   "autoUpdate.operation.select": "تحديد الإضافات",
   "autoUpdate.partialUPdate": "سيتم تحديث الإضافات {{num}} التالية فقط تلقائيًا",
+  "autoUpdate.partialUPdate_one": "سيتم تحديث الإضافة {{num}} التالية فقط تلقائيًا",
+  "autoUpdate.partialUPdate_other": "سيتم تحديث الإضافات {{num}} التالية فقط تلقائيًا",
   "autoUpdate.pluginDowngradeWarning.description": "التحديث التلقائي ممكن حاليًا لهذه الإضافة. قد يؤدي خفض الإصدار إلى استبدال تغييراتك أثناء التحديث التلقائي التالي.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "خفض على أي حال",
   "autoUpdate.pluginDowngradeWarning.exclude": "استبعاد من التحديث التلقائي",
   "autoUpdate.pluginDowngradeWarning.title": "خفض إصدار الإضافة",
+  "autoUpdate.scope": "النطاق",
+  "autoUpdate.scopeMode.all": "الكل",
+  "autoUpdate.scopeMode.exclude": "استبعاد المحدد",
   "autoUpdate.specifyPluginsToUpdate": "تحديد الإضافات للتحديث",
   "autoUpdate.strategy.disabled.description": "لن يتم تحديث الإضافات تلقائيًا",
   "autoUpdate.strategy.disabled.name": "معطل",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "تحديث",
   "detailPanel.operation.updateTooltip": "قم بالتحديث للوصول إلى أحدث النماذج.",
   "detailPanel.operation.viewDetail": "عرض التفاصيل",
+  "detailPanel.operation.viewReadme": "عرض الملف التمهيدي",
   "detailPanel.serviceOk": "الخدمة جيدة",
   "detailPanel.strategyNum": "{{num}} {{strategy}} متضمن",
   "detailPanel.switchVersion": "تبديل الإصدار",
@@ -173,6 +183,7 @@
   "installModal.back": "رجوع",
   "installModal.cancel": "إلغاء",
   "installModal.close": "إغلاق",
+  "installModal.dropIntegrationToInstall": "أفلت حزمة الإضافة هنا للتثبيت",
   "installModal.dropPluginToInstall": "أفلت حزمة الإضافة هنا للتثبيت",
   "installModal.fromTrustSource": "يرجى التأكد من تثبيت الإضافات فقط من <trustSource>مصدر موثوق</trustSource>.",
   "installModal.install": "تثبيت",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "تثبيت الإضافة",
   "installModal.installWarning": "لا يسمح بتثبيت هذه الإضافة.",
   "installModal.installedSuccessfully": "تم التثبيت بنجاح",
+  "installModal.installedSuccessfullyCountDesc": "تم تثبيت الإضافات {{num}} التالية بنجاح.",
   "installModal.installedSuccessfullyDesc": "تم تثبيت الإضافة بنجاح.",
+  "installModal.installedSuccessfullyWithPageDesc": "تم تثبيت الإضافة بنجاح. يمكنك العثور عليها في صفحة <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "جارٍ التثبيت...",
   "installModal.labels.package": "الحزمة",
   "installModal.labels.repository": "المستودع",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "على وشك تثبيت الإضافات {{num}} التالية",
   "installModal.uploadFailed": "فشل التحميل",
   "installModal.uploadingPackage": "جارٍ تحميل {{packageName}}...",
+  "installModal.viewDetails": "عرض التفاصيل",
   "installPlugin": "تثبيت الإضافة",
+  "list.noAgentStrategyFound": "لم يتم العثور على استراتيجية وكيل",
+  "list.noExtensionFound": "لم يتم العثور على ملحق",
   "list.noInstalled": "لم يتم تثبيت أي إضافات",
+  "list.noTriggerFound": "لم يتم العثور على مشغل",
   "list.notFound": "لم يتم العثور على أي إضافات",
   "list.source.github": "تثبيت من GitHub",
   "list.source.local": "تثبيت من ملف الحزمة المحلية",
   "list.source.marketplace": "تثبيت من السوق",
+  "marketplace.allPlugins": "جميع الإضافات",
   "marketplace.and": "و",
+  "marketplace.becomePartner": "كن شريكًا",
   "marketplace.difyMarketplace": "سوق Dify",
   "marketplace.discover": "اكتشف",
   "marketplace.empower": "تمكين تطوير الذكاء الاصطناعي الخاص بك",
   "marketplace.moreFrom": "المزيد من السوق",
   "marketplace.noPluginFound": "لم يتم العثور على إضافة",
   "marketplace.partnerTip": "تم التحقق بواسطة شريك Dify",
+  "marketplace.pluginsHeroSubtitle": "استخدم الإضافات التي بناها المجتمع لتعزيز تطوير الذكاء الاصطناعي الخاص بك.",
+  "marketplace.pluginsHeroTitle": "اكتشف. وسّع. ابنِ.",
   "marketplace.pluginsResult": "{{num}} نتائج",
   "marketplace.sortBy": "فرز حسب",
   "marketplace.sortOption.firstReleased": "صدر لأول مرة",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "تم التحقق بواسطة Dify",
   "marketplace.viewMore": "عرض المزيد",
   "metadata.title": "الإضافات",
+  "pluginDevelopmentGuide": "دليل تطوير الإضافات",
   "pluginInfoModal.packageName": "الحزمة",
   "pluginInfoModal.release": "الإصدار",
   "pluginInfoModal.repository": "المستودع",
   "pluginInfoModal.title": "معلومات الإضافة",
+  "pluginPublishGuide": "دليل نشر الإضافات",
   "privilege.admins": "المسؤولون",
+  "privilege.configurePermissionsInSettings": "انتقل إلى الإعدادات > الأدوار والأذونات لتكوين أذونات الإضافات.",
   "privilege.everyone": "الجميع",
+  "privilege.noDebugPermissionTooltip": "ليس لديك إذن لتصحيح الإضافات",
+  "privilege.noInstallPermissionTooltip": "ليس لديك إذن لتثبيت وإدارة الإضافات",
   "privilege.noone": "لا أحد",
+  "privilege.permissions": "الأذونات",
+  "privilege.quickWhoCanDebug": "من يمكنه التصحيح؟",
+  "privilege.quickWhoCanInstall": "من يمكنه التثبيت والإدارة؟",
   "privilege.title": "تفضيلات الإضافة",
   "privilege.whoCanDebug": "من يمكنه تصحيح الإضافات؟",
   "privilege.whoCanInstall": "من يمكنه تثبيت وإدارة الإضافات؟",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "لا يوجد ملف تمهيدي متاح",
   "readmeInfo.title": "الملف التمهيدي",
   "requestAPlugin": "طلب إضافة",
+  "requestSubmit": "طلب أو نشر",
   "search": "بحث",
   "searchCategories": "بحث في الفئات",
   "searchInMarketplace": "بحث في السوق",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "تثبيت {{installingLength}} إضافات، {{successLength}} نجاح.",
   "task.runningPlugins": "تثبيت الإضافات",
   "task.successPlugins": "تم تثبيت الإضافات بنجاح",
+  "templatePublishingGuide": "دليل نشر القوالب",
   "upgrade.close": "إغلاق",
   "upgrade.description": "على وشك تثبيت الإضافة التالية",
   "upgrade.successfulTitle": "تم التثبيت بنجاح",
diff --git a/web/i18n/de-DE/dataset-pipeline.json b/web/i18n/de-DE/dataset-pipeline.json
index d6867b2336e..563e35f9a6a 100644
--- a/web/i18n/de-DE/dataset-pipeline.json
+++ b/web/i18n/de-DE/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Diese Aktion ist dauerhaft. Sie können die vorherige Methode nicht wiederherstellen. Bitte bestätigen Sie, um umzurechnen.",
   "conversion.confirm.title": "Bestätigung",
   "conversion.descriptionChunk1": "Sie können jetzt Ihre vorhandene Wissensdatenbank konvertieren, um die Knowledge Pipeline für die Dokumentenverarbeitung zu verwenden",
-  "conversion.descriptionChunk2": "– ein offenerer und flexiblerer Ansatz mit Zugang zu Plugins aus unserem Marktplatz. Dadurch wird die neue Verarbeitungsmethode auf alle zukünftigen Dokumente angewendet.",
+  "conversion.descriptionChunk2": " – ein offenerer und flexiblerer Ansatz mit Zugang zu Plugins aus dem Marketplace. Dadurch wird die neue Verarbeitungsmethode auf alle zukünftigen Dokumente angewendet.",
   "conversion.errorMessage": "Fehler beim Konvertieren des Datasets in eine Pipeline.",
   "conversion.successMessage": "Erfolgreiches Konvertieren des Datasets in eine Pipeline",
   "conversion.title": "In Wissenspipeline konvertieren",
diff --git a/web/i18n/de-DE/permission-keys.json b/web/i18n/de-DE/permission-keys.json
index 5b42c701c9e..09da9ee9462 100644
--- a/web/i18n/de-DE/permission-keys.json
+++ b/web/i18n/de-DE/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "App-Veröffentlichung und Versionsverwaltung",
   "app.acl.test_and_run": "App testen und verwenden",
   "app.acl.view_layout": "Schreibgeschützte Orchestrierungsseite",
-  "app.create_and_management": "Apps erstellen und von Ihnen erstellte Apps verwalten",
+  "app.create_and_management": "Apps erstellen",
   "app.tag.manage": "App-Tags verwalten",
   "app_library.access": "Auf App-Bibliothek zugreifen",
   "billing.manage": "Abonnementpläne ändern",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Wissensdatenbank-Abruf",
   "dataset.acl.use": "Dokumente zur Wissensdatenbank hinzufügen",
   "dataset.api_key.manage": "API-Schlüssel der Wissensdatenbank verwalten",
-  "dataset.create_and_management": "Wissensdatenbanken erstellen und von Ihnen erstellte Wissensdatenbanken verwalten",
+  "dataset.create_and_management": "Wissensdatenbanken erstellen",
   "dataset.external.connect": "Externe Wissensdatenbanken verbinden",
   "dataset.tag.manage": "Wissensdatenbank-Tags verwalten",
   "mcp.manage": "MCP verwalten",
diff --git a/web/i18n/de-DE/permission.json b/web/i18n/de-DE/permission.json
index ef7121b5b29..fa4921a3fb1 100644
--- a/web/i18n/de-DE/permission.json
+++ b/web/i18n/de-DE/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Sehen Sie den Namen, die Beschreibung und die für diesen Berechtigungssatz gewährten Berechtigungen.",
   "permissionSet.modal.view.dataset.title": "Wissensdatenbank-Berechtigungssatz anzeigen",
   "permissionSet.nameLabel": "Name des Berechtigungssatzes",
-  "permissionSet.namePlaceholder": "z. B. Kann DSL exportieren",
+  "permissionSet.namePlaceholder": "z. B. Berechtigungsset für Betrieb",
   "permissionSet.permissions": "Berechtigungen",
   "role.addRole": "Rollen erstellen",
   "role.copyMembersDescription_one": "\"{{name}}\" ist {{count}} Mitglied zugewiesen. Möchten Sie, dass die neue Rollenkopie dasselbe Mitglied enthält?",
diff --git a/web/i18n/de-DE/plugin.json b/web/i18n/de-DE/plugin.json
index 80a810160e0..bb8700bbae0 100644
--- a/web/i18n/de-DE/plugin.json
+++ b/web/i18n/de-DE/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Verwenden Sie die OAuth-Authentifizierung",
   "auth.whoCanUse": "Wer kann verwenden",
   "auth.workspaceDefault": "Arbeitsbereich Standard",
+  "autoUpdate.autoUpdate": "Automatische Aktualisierung",
+  "autoUpdate.autoUpdateSettings": "Einstellungen für automatische Aktualisierung",
   "autoUpdate.automaticUpdates": "Automatische Updates",
   "autoUpdate.changeTimezone": "Um die Zeitzone zu ändern, gehen Sie zu <setTimezone> Einstellungen </setTimezone>",
   "autoUpdate.excludeUpdate": "Die folgenden {{num}} Plugins werden nicht automatisch aktualisiert.",
+  "autoUpdate.excludeUpdate_one": "Das folgende {{num}} Plugin wird nicht automatisch aktualisiert",
+  "autoUpdate.excludeUpdate_other": "Die folgenden {{num}} Plugins werden nicht automatisch aktualisiert",
   "autoUpdate.nextUpdateTime": "Nächstes automatisches Update: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Keine Plugins gefunden.",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Keine Plugins installiert",
   "autoUpdate.operation.clearAll": "Alles löschen",
   "autoUpdate.operation.select": "Plugins auswählen",
   "autoUpdate.partialUPdate": "Nur die folgenden {{num}} Plugins werden automatisch aktualisiert",
+  "autoUpdate.partialUPdate_one": "Nur das folgende {{num}} Plugin wird automatisch aktualisiert",
+  "autoUpdate.partialUPdate_other": "Nur die folgenden {{num}} Plugins werden automatisch aktualisiert",
   "autoUpdate.pluginDowngradeWarning.description": "Die automatische Aktualisierung ist derzeit für dieses Plugin aktiviert. Ein Downgrade der Version kann dazu führen, dass Ihre Änderungen während des nächsten automatischen Updates überschrieben werden.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Trotzdem downgraden",
   "autoUpdate.pluginDowngradeWarning.exclude": "Von der automatischen Aktualisierung ausschließen",
   "autoUpdate.pluginDowngradeWarning.title": "Plugin Downgrade",
+  "autoUpdate.scope": "Geltungsbereich",
+  "autoUpdate.scopeMode.all": "Alle",
+  "autoUpdate.scopeMode.exclude": "Ausgewählte ausschließen",
   "autoUpdate.specifyPluginsToUpdate": "Geben Sie die zu aktualisierenden Plugins an",
   "autoUpdate.strategy.disabled.description": "Plugins werden nicht automatisch aktualisiert",
   "autoUpdate.strategy.disabled.name": "Behindert",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Aktualisieren",
   "detailPanel.operation.updateTooltip": "Aktualisieren Sie, um auf die neuesten Modelle zuzugreifen.",
   "detailPanel.operation.viewDetail": "Im Detail sehen",
+  "detailPanel.operation.viewReadme": "README anzeigen",
   "detailPanel.serviceOk": "Service in Ordnung",
   "detailPanel.strategyNum": "{{num}} {{strategy}} IINKLUSIVE",
   "detailPanel.switchVersion": "Version wechseln",
@@ -173,6 +183,7 @@
   "installModal.back": "Zurück",
   "installModal.cancel": "Abbrechen",
   "installModal.close": "Schließen",
+  "installModal.dropIntegrationToInstall": "Legen Sie das Plugin-Paket hier ab, um es zu installieren",
   "installModal.dropPluginToInstall": "Legen Sie das Plugin-Paket hier ab, um es zu installieren",
   "installModal.fromTrustSource": "Bitte stellen Sie sicher, dass Sie nur Plugins aus einer <trustSource>vertrauenswürdigen Quelle</trustSource> installieren.",
   "installModal.install": "Installieren",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Plugin installieren",
   "installModal.installWarning": "Dieses Plugin darf nicht installiert werden.",
   "installModal.installedSuccessfully": "Installation erfolgreich",
+  "installModal.installedSuccessfullyCountDesc": "Die folgenden {{num}} Plugins wurden erfolgreich installiert.",
   "installModal.installedSuccessfullyDesc": "Das Plugin wurde erfolgreich installiert.",
+  "installModal.installedSuccessfullyWithPageDesc": "Das Plugin wurde erfolgreich installiert. Sie finden es auf der Seite <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Installation...",
   "installModal.labels.package": "Paket",
   "installModal.labels.repository": "Aufbewahrungsort",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Über die Installation der folgenden {{num}} Plugins",
   "installModal.uploadFailed": "Upload fehlgeschlagen",
   "installModal.uploadingPackage": "Das Hochladen von {{packageName}}...",
+  "installModal.viewDetails": "Details anzeigen",
   "installPlugin": "Plugin installieren",
+  "list.noAgentStrategyFound": "Keine Agenten-Strategie gefunden",
+  "list.noExtensionFound": "Keine Erweiterung gefunden",
   "list.noInstalled": "Keine Plugins installiert",
+  "list.noTriggerFound": "Kein Auslöser gefunden",
   "list.notFound": "Keine Plugins gefunden",
   "list.source.github": "Installation von GitHub",
   "list.source.local": "Installation aus lokaler Paketdatei",
   "list.source.marketplace": "Installation aus dem Marketplace",
+  "marketplace.allPlugins": "Alle Plugins",
   "marketplace.and": "und",
+  "marketplace.becomePartner": "Partner werden",
   "marketplace.difyMarketplace": "Dify Marktplatz",
   "marketplace.discover": "Entdecken",
   "marketplace.empower": "Unterstützen Sie Ihre KI-Entwicklung",
   "marketplace.moreFrom": "Mehr aus dem Marketplace",
   "marketplace.noPluginFound": "Kein Plugin gefunden",
   "marketplace.partnerTip": "Von einem Dify-Partner verifiziert",
+  "marketplace.pluginsHeroSubtitle": "Nutzen Sie von der Community erstellte Plugins, um Ihre KI-Entwicklung voranzutreiben.",
+  "marketplace.pluginsHeroTitle": "Entdecken. Erweitern. Entwickeln.",
   "marketplace.pluginsResult": "{{num}} Ergebnisse",
   "marketplace.sortBy": "Sortieren nach",
   "marketplace.sortOption.firstReleased": "Zuerst veröffentlicht",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Von Dify überprüft",
   "marketplace.viewMore": "Mehr anzeigen",
   "metadata.title": "Plugins",
+  "pluginDevelopmentGuide": "Leitfaden zur Plugin-Entwicklung",
   "pluginInfoModal.packageName": "Paket",
   "pluginInfoModal.release": "Loslassen",
   "pluginInfoModal.repository": "Aufbewahrungsort",
   "pluginInfoModal.title": "Plugin-Info",
+  "pluginPublishGuide": "Leitfaden zur Plugin-Veröffentlichung",
   "privilege.admins": "Administratoren",
+  "privilege.configurePermissionsInSettings": "Gehen Sie zu Einstellungen > Rollen & Berechtigungen, um die Plugin-Berechtigungen zu konfigurieren.",
   "privilege.everyone": "Jeder",
+  "privilege.noDebugPermissionTooltip": "Sie haben keine Berechtigung, Plugins zu debuggen",
+  "privilege.noInstallPermissionTooltip": "Sie haben keine Berechtigung, Plugins zu installieren und zu verwalten",
   "privilege.noone": "Niemand",
+  "privilege.permissions": "Berechtigungen",
+  "privilege.quickWhoCanDebug": "Wer kann debuggen?",
+  "privilege.quickWhoCanInstall": "Wer kann installieren und verwalten?",
   "privilege.title": "Plugin-Einstellungen",
   "privilege.whoCanDebug": "Wer kann Plugins debuggen?",
   "privilege.whoCanInstall": "Wer kann Plugins installieren und verwalten?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Keine README verfügbar",
   "readmeInfo.title": "LIESMICH",
   "requestAPlugin": "Ein Plugin anfordern",
+  "requestSubmit": "Anfordern oder veröffentlichen",
   "search": "Suchen",
   "searchCategories": "Kategorien durchsuchen",
   "searchInMarketplace": "Suche im Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Installation von {{installingLength}} Plugins, {{successLength}} erfolgreich.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Leitfaden zur Vorlagen-Veröffentlichung",
   "upgrade.close": "Schließen",
   "upgrade.description": "Über die Installation des folgenden Plugins",
   "upgrade.successfulTitle": "Installation erfolgreich",
diff --git a/web/i18n/en-US/permission-keys.json b/web/i18n/en-US/permission-keys.json
index a5db8ef638c..aa2aa3aa26e 100644
--- a/web/i18n/en-US/permission-keys.json
+++ b/web/i18n/en-US/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "App publishing and version management",
   "app.acl.test_and_run": "Test and use app",
   "app.acl.view_layout": "Read-only orchestration page",
-  "app.create_and_management": "Create apps and manage apps you created",
+  "app.create_and_management": "Create apps",
   "app.tag.manage": "Manage app tags",
   "app_library.access": "Access App Library",
   "billing.manage": "Change subscription plans",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Knowledge base retrieval",
   "dataset.acl.use": "Add documents to knowledge base",
   "dataset.api_key.manage": "Manage knowledge base API keys",
-  "dataset.create_and_management": "Create knowledge bases and manage knowledge bases you created",
+  "dataset.create_and_management": "Create knowledge bases",
   "dataset.external.connect": "Connect external knowledge bases",
   "dataset.tag.manage": "Manage knowledge base tags",
   "mcp.manage": "Manage MCP",
diff --git a/web/i18n/en-US/permission.json b/web/i18n/en-US/permission.json
index ddcce91e5b4..2f62c3b1cb3 100644
--- a/web/i18n/en-US/permission.json
+++ b/web/i18n/en-US/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "View the name, description, and permissions granted for this permission set.",
   "permissionSet.modal.view.dataset.title": "View Knowledge Base permission set",
   "permissionSet.nameLabel": "Permission set name",
-  "permissionSet.namePlaceholder": "e.g. Can export DSL",
+  "permissionSet.namePlaceholder": "e.g. Operations permission set",
   "permissionSet.permissions": "Permissions",
   "role.addRole": "Create roles",
   "role.copyMembersDescription_one": "\"{{name}}\" is assigned to {{count}} member. Do you want the new role copy to include the same member?",
diff --git a/web/i18n/es-ES/dataset-pipeline.json b/web/i18n/es-ES/dataset-pipeline.json
index 27a4e6adaa1..93c1721c37c 100644
--- a/web/i18n/es-ES/dataset-pipeline.json
+++ b/web/i18n/es-ES/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Esta acción es permanente. No podrá volver al método anterior. Por favor, confirme para convertir.",
   "conversion.confirm.title": "Confirmación",
   "conversion.descriptionChunk1": "Ahora puede convertir su base de conocimientos existente para usar la canalización de conocimientos para el procesamiento de documentos",
-  "conversion.descriptionChunk2": "— un enfoque más abierto y flexible con acceso a complementos de nuestro mercado. Esto aplicará el nuevo método de procesamiento a todos los documentos futuros.",
+  "conversion.descriptionChunk2": " — un enfoque más abierto y flexible con acceso a integraciones del Marketplace. Esto aplicará el nuevo método de procesamiento a todos los documentos futuros.",
   "conversion.errorMessage": "No se pudo convertir el conjunto de datos en una canalización",
   "conversion.successMessage": "Convertir correctamente el conjunto de datos en una canalización",
   "conversion.title": "Convertir en canalización de conocimiento",
diff --git a/web/i18n/es-ES/permission-keys.json b/web/i18n/es-ES/permission-keys.json
index 3b52ba33826..b1b551d3caf 100644
--- a/web/i18n/es-ES/permission-keys.json
+++ b/web/i18n/es-ES/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Publicación de la app y gestión de versiones",
   "app.acl.test_and_run": "Probar y usar la app",
   "app.acl.view_layout": "Página de orquestación de solo lectura",
-  "app.create_and_management": "Crear apps y gestionar las apps que has creado",
+  "app.create_and_management": "Crear apps",
   "app.tag.manage": "Gestionar etiquetas de apps",
   "app_library.access": "Acceder a la Biblioteca de apps",
   "billing.manage": "Cambiar planes de suscripción",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Recuperación de la base de conocimiento",
   "dataset.acl.use": "Añadir documentos a la base de conocimiento",
   "dataset.api_key.manage": "Gestionar las claves de API de la base de conocimiento",
-  "dataset.create_and_management": "Crear bases de conocimiento y gestionar las bases de conocimiento que has creado",
+  "dataset.create_and_management": "Crear bases de conocimiento",
   "dataset.external.connect": "Conectar bases de conocimiento externas",
   "dataset.tag.manage": "Gestionar etiquetas de la base de conocimiento",
   "mcp.manage": "Gestionar MCP",
diff --git a/web/i18n/es-ES/permission.json b/web/i18n/es-ES/permission.json
index 88ad805b1fb..c8246bce768 100644
--- a/web/i18n/es-ES/permission.json
+++ b/web/i18n/es-ES/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Consulta el nombre, la descripción y los permisos concedidos para este conjunto de permisos.",
   "permissionSet.modal.view.dataset.title": "Ver conjunto de permisos de base de conocimiento",
   "permissionSet.nameLabel": "Nombre del conjunto de permisos",
-  "permissionSet.namePlaceholder": "p. ej. Puede exportar DSL",
+  "permissionSet.namePlaceholder": "p. ej. Conjunto de permisos de operaciones",
   "permissionSet.permissions": "Permisos",
   "role.addRole": "Crear roles",
   "role.copyMembersDescription_one": "\"{{name}}\" está asignado a {{count}} miembro. ¿Quieres que la nueva copia del rol incluya el mismo miembro?",
diff --git a/web/i18n/es-ES/plugin.json b/web/i18n/es-ES/plugin.json
index ec77e8c1e97..3db287f6322 100644
--- a/web/i18n/es-ES/plugin.json
+++ b/web/i18n/es-ES/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Usar autorización OAuth",
   "auth.whoCanUse": "¿Quién puede usar?",
   "auth.workspaceDefault": "Espacio de trabajo predeterminado",
+  "autoUpdate.autoUpdate": "Actualización automática",
+  "autoUpdate.autoUpdateSettings": "Configuración de actualización automática",
   "autoUpdate.automaticUpdates": "Actualizaciones automáticas",
   "autoUpdate.changeTimezone": "Para cambiar la zona horaria, ve a <setTimezone>Configuración</setTimezone>.",
   "autoUpdate.excludeUpdate": "Los siguientes {{num}} complementos no se actualizarán automáticamente",
+  "autoUpdate.excludeUpdate_one": "La siguiente {{num}} integración no se actualizará automáticamente",
+  "autoUpdate.excludeUpdate_other": "Las siguientes {{num}} integraciones no se actualizarán automáticamente",
   "autoUpdate.nextUpdateTime": "Próxima autoactualización: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "No se encontraron complementos",
   "autoUpdate.noPluginPlaceholder.noInstalled": "No hay plugins instalados",
   "autoUpdate.operation.clearAll": "Borrar todo",
   "autoUpdate.operation.select": "Seleccionar complementos",
   "autoUpdate.partialUPdate": "Solo los siguientes {{num}} complementos se actualizarán automáticamente",
+  "autoUpdate.partialUPdate_one": "Solo la siguiente {{num}} integración se actualizará automáticamente",
+  "autoUpdate.partialUPdate_other": "Solo las siguientes {{num}} integraciones se actualizarán automáticamente",
   "autoUpdate.pluginDowngradeWarning.description": "La actualización automática está actualmente habilitada para este complemento. Downgradear la versión puede hacer que tus cambios se sobrescriban durante la próxima actualización automática.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "De todas formas, degradar",
   "autoUpdate.pluginDowngradeWarning.exclude": "Excluir de la actualización automática",
   "autoUpdate.pluginDowngradeWarning.title": "Degradar plugin",
+  "autoUpdate.scope": "Alcance",
+  "autoUpdate.scopeMode.all": "Todo",
+  "autoUpdate.scopeMode.exclude": "Excluir seleccionado",
   "autoUpdate.specifyPluginsToUpdate": "Especifique qué complementos actualizar",
   "autoUpdate.strategy.disabled.description": "Los plugins no se actualizarán automáticamente",
   "autoUpdate.strategy.disabled.name": "Discapacitado",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Actualizar",
   "detailPanel.operation.updateTooltip": "Actualiza para acceder a los modelos más recientes.",
   "detailPanel.operation.viewDetail": "Ver Detalle",
+  "detailPanel.operation.viewReadme": "Ver README",
   "detailPanel.serviceOk": "Servicio OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} INCLUIDO",
   "detailPanel.switchVersion": "Versión del interruptor",
@@ -173,6 +183,7 @@
   "installModal.back": "Atrás",
   "installModal.cancel": "Cancelar",
   "installModal.close": "Cerrar",
+  "installModal.dropIntegrationToInstall": "Suelte el paquete de la integración aquí para instalarlo",
   "installModal.dropPluginToInstall": "Suelte el paquete del complemento aquí para instalarlo",
   "installModal.fromTrustSource": "Por favor, asegúrate de que sólo instalas plugins de una <trustSource>fuente de confianza</trustSource>.",
   "installModal.install": "Instalar",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Instalar plugin",
   "installModal.installWarning": "Este plugin no está permitido para instalar.",
   "installModal.installedSuccessfully": "Instalación exitosa",
+  "installModal.installedSuccessfullyCountDesc": "Las siguientes {{num}} integraciones se han instalado correctamente.",
   "installModal.installedSuccessfullyDesc": "El plugin se ha instalado correctamente.",
+  "installModal.installedSuccessfullyWithPageDesc": "La integración se ha instalado correctamente. Puedes encontrarla en la página <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Instalar...",
   "installModal.labels.package": "Paquete",
   "installModal.labels.repository": "Depósito",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "A punto de instalar los siguientes plugins {{num}}",
   "installModal.uploadFailed": "Error de carga",
   "installModal.uploadingPackage": "Subiendo {{packageName}}...",
+  "installModal.viewDetails": "Ver detalles",
   "installPlugin": "Instalar plugin",
+  "list.noAgentStrategyFound": "No se encontró ninguna estrategia de agente",
+  "list.noExtensionFound": "No se encontró ninguna extensión",
   "list.noInstalled": "No hay plugins instalados",
+  "list.noTriggerFound": "No se encontró ningún disparador",
   "list.notFound": "No se han encontrado plugins",
   "list.source.github": "Instalar desde GitHub",
   "list.source.local": "Instalar desde el archivo de paquete local",
   "list.source.marketplace": "Instalar desde Marketplace",
+  "marketplace.allPlugins": "Todas las integraciones",
   "marketplace.and": "y",
+  "marketplace.becomePartner": "Conviértete en socio",
   "marketplace.difyMarketplace": "Mercado de Dify",
   "marketplace.discover": "Descubrir",
   "marketplace.empower": "Potencie su desarrollo de IA",
   "marketplace.moreFrom": "Más de Marketplace",
-  "marketplace.noPluginFound": "No se ha encontrado ningún plugin",
+  "marketplace.noPluginFound": "No se ha encontrado ninguna integración",
   "marketplace.partnerTip": "Verificado por un socio de Dify",
+  "marketplace.pluginsHeroSubtitle": "Usa integraciones creadas por la comunidad para potenciar tu desarrollo de IA.",
+  "marketplace.pluginsHeroTitle": "Descubre. Amplía. Crea.",
   "marketplace.pluginsResult": "{{num}} resultados",
   "marketplace.sortBy": "Ordenar por",
   "marketplace.sortOption.firstReleased": "Lanzado por primera vez",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Verificado por Dify",
   "marketplace.viewMore": "Ver más",
   "metadata.title": "Complementos",
+  "pluginDevelopmentGuide": "Guía de desarrollo de integraciones",
   "pluginInfoModal.packageName": "Paquete",
   "pluginInfoModal.release": "Lanzamiento",
   "pluginInfoModal.repository": "Depósito",
   "pluginInfoModal.title": "Información del plugin",
+  "pluginPublishGuide": "Guía de publicación de integraciones",
   "privilege.admins": "Administradores",
+  "privilege.configurePermissionsInSettings": "Ve a Configuración > Roles y permisos para configurar los permisos de las integraciones.",
   "privilege.everyone": "Todos",
+  "privilege.noDebugPermissionTooltip": "No tienes permiso para depurar integraciones",
+  "privilege.noInstallPermissionTooltip": "No tienes permiso para instalar y administrar integraciones",
   "privilege.noone": "Nadie",
+  "privilege.permissions": "Permisos",
+  "privilege.quickWhoCanDebug": "¿Quién puede depurar?",
+  "privilege.quickWhoCanInstall": "¿Quién puede instalar y administrar?",
   "privilege.title": "Preferencias del plugin",
   "privilege.whoCanDebug": "¿Quién puede depurar plugins?",
   "privilege.whoCanInstall": "¿Quién puede instalar y administrar complementos?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "No hay archivo README disponible",
   "readmeInfo.title": "LEEME",
   "requestAPlugin": "Solicitar un plugin",
+  "requestSubmit": "Solicitar o publicar",
   "search": "Buscar",
   "searchCategories": "Categorías de búsqueda",
   "searchInMarketplace": "Buscar en Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Instalando plugins {{installingLength}}, {{successLength}} éxito.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Guía de publicación de plantillas",
   "upgrade.close": "Cerrar",
   "upgrade.description": "A punto de instalar el siguiente plugin",
   "upgrade.successfulTitle": "Instalación correcta",
diff --git a/web/i18n/fa-IR/dataset-pipeline.json b/web/i18n/fa-IR/dataset-pipeline.json
index a8582273391..db65d4ec4c0 100644
--- a/web/i18n/fa-IR/dataset-pipeline.json
+++ b/web/i18n/fa-IR/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "این عمل دائمی است. نمی توانید به روش قبلی برگردید. لطفا برای تبدیل تأیید کنید.",
   "conversion.confirm.title": "تایید",
   "conversion.descriptionChunk1": "اکنون می توانید پایگاه دانش موجود خود را برای استفاده از خط لوله دانش برای پردازش اسناد تبدیل کنید",
-  "conversion.descriptionChunk2": "- یک رویکرد بازتر و انعطاف پذیرتر با دسترسی به افزونه ها از بازار ما. این روش پردازش جدید را برای تمام اسناد آینده اعمال می کند.",
+  "conversion.descriptionChunk2": " — یک رویکرد بازتر و انعطاف‌پذیرتر با دسترسی به افزونه‌ها از Marketplace. این روش پردازش جدید را برای تمام اسناد آینده اعمال می‌کند.",
   "conversion.errorMessage": "تبدیل مجموعه داده به خط لوله انجام نشد",
   "conversion.successMessage": "مجموعه داده را با موفقیت به یک خط لوله تبدیل کرد",
   "conversion.title": "تبدیل به پایپ لاین دانش",
diff --git a/web/i18n/fa-IR/permission-keys.json b/web/i18n/fa-IR/permission-keys.json
index c1773da4424..a3a2f81c66e 100644
--- a/web/i18n/fa-IR/permission-keys.json
+++ b/web/i18n/fa-IR/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "انتشار برنامه و مدیریت نسخه",
   "app.acl.test_and_run": "آزمایش و استفاده از برنامه",
   "app.acl.view_layout": "صفحه هماهنگ‌سازی فقط‌خواندنی",
-  "app.create_and_management": "ایجاد برنامه‌ها و مدیریت برنامه‌هایی که ایجاد کرده‌اید",
+  "app.create_and_management": "ایجاد برنامه‌ها",
   "app.tag.manage": "مدیریت برچسب‌های برنامه",
   "app_library.access": "دسترسی به کتابخانه برنامه",
   "billing.manage": "تغییر طرح‌های اشتراک",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "بازیابی پایگاه دانش",
   "dataset.acl.use": "افزودن اسناد به پایگاه دانش",
   "dataset.api_key.manage": "مدیریت کلیدهای API پایگاه دانش",
-  "dataset.create_and_management": "ایجاد پایگاه‌های دانش و مدیریت پایگاه‌های دانشی که ایجاد کرده‌اید",
+  "dataset.create_and_management": "ایجاد پایگاه‌های دانش",
   "dataset.external.connect": "اتصال به پایگاه‌های دانش خارجی",
   "dataset.tag.manage": "مدیریت برچسب‌های پایگاه دانش",
   "mcp.manage": "مدیریت MCP",
diff --git a/web/i18n/fa-IR/permission.json b/web/i18n/fa-IR/permission.json
index 548e0257435..87e88dc46dc 100644
--- a/web/i18n/fa-IR/permission.json
+++ b/web/i18n/fa-IR/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "نام، توضیحات و مجوزهای اعطاشده برای این مجموعه مجوز را مشاهده کنید.",
   "permissionSet.modal.view.dataset.title": "مشاهده مجموعه مجوز پایگاه دانش",
   "permissionSet.nameLabel": "نام مجموعه مجوز",
-  "permissionSet.namePlaceholder": "مثلاً می‌تواند DSL را صادر کند",
+  "permissionSet.namePlaceholder": "مثلاً مجموعه مجوزهای عملیات",
   "permissionSet.permissions": "مجوزها",
   "role.addRole": "ایجاد نقش‌ها",
   "role.copyMembersDescription_one": "«{{name}}» به {{count}} عضو اختصاص داده شده است. آیا می‌خواهید نسخه نقش جدید همان عضو را در بر بگیرد؟",
diff --git a/web/i18n/fa-IR/plugin.json b/web/i18n/fa-IR/plugin.json
index b00896bd026..0ff89d623c2 100644
--- a/web/i18n/fa-IR/plugin.json
+++ b/web/i18n/fa-IR/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "از مجوز OAuth استفاده کنید",
   "auth.whoCanUse": "چه کسی می تواند استفاده کند",
   "auth.workspaceDefault": "پیش فرض محیط کار",
+  "autoUpdate.autoUpdate": "به‌روزرسانی خودکار",
+  "autoUpdate.autoUpdateSettings": "تنظیمات به‌روزرسانی خودکار",
   "autoUpdate.automaticUpdates": "بروز رسانی خودکار",
   "autoUpdate.changeTimezone": "برای تغییر منطقه زمانی، به <setTimezone>تنظیمات</setTimezone> بروید",
   "autoUpdate.excludeUpdate": "پلاگین‌های زیر {{num}} به‌طور خودکار به‌روزرسانی نخواهند شد",
+  "autoUpdate.excludeUpdate_one": "افزونه {{num}} زیر به‌طور خودکار به‌روزرسانی نخواهد شد",
+  "autoUpdate.excludeUpdate_other": "افزونه‌های {{num}} زیر به‌طور خودکار به‌روزرسانی نخواهند شد",
   "autoUpdate.nextUpdateTime": "به‌روزرسانی خودکار بعدی: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "هیچ افزونه‌ای یافت نشد",
   "autoUpdate.noPluginPlaceholder.noInstalled": "هیچ افزونه‌ای نصب نشده است",
   "autoUpdate.operation.clearAll": "همه را پاک کن",
   "autoUpdate.operation.select": "افزونه‌ها را انتخاب کنید",
   "autoUpdate.partialUPdate": "تنها {{num}} پلاگین زیر به‌طور خودکار به‌روزرسانی خواهد شد.",
+  "autoUpdate.partialUPdate_one": "تنها افزونه {{num}} زیر به‌طور خودکار به‌روزرسانی خواهد شد",
+  "autoUpdate.partialUPdate_other": "تنها افزونه‌های {{num}} زیر به‌طور خودکار به‌روزرسانی خواهند شد",
   "autoUpdate.pluginDowngradeWarning.description": "به‌روزرسانی خودکار برای این افزونه در حال حاضر فعال است. کاهش نسخه ممکن است باعث شود تغییرات شما در حین به‌روزرسانی خودکار بعدی نادیده گرفته شود.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "به هر حال تنزل دهید",
   "autoUpdate.pluginDowngradeWarning.exclude": "از بروزرسانی خودکار مستثنی شود",
   "autoUpdate.pluginDowngradeWarning.title": "کاهش نسخه افزونه",
+  "autoUpdate.scope": "دامنه",
+  "autoUpdate.scopeMode.all": "همه",
+  "autoUpdate.scopeMode.exclude": "موارد انتخاب شده را مستثنی کن",
   "autoUpdate.specifyPluginsToUpdate": "ماژول‌هایی را برای به‌روزرسانی مشخص کنید",
   "autoUpdate.strategy.disabled.description": "پلاگین‌ها به‌طور خودکار به‌روزرسانی نخواهند شد",
   "autoUpdate.strategy.disabled.name": "ناتوان",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "روز رسانی",
   "detailPanel.operation.updateTooltip": "به‌روزرسانی کنید تا به جدیدترین مدل‌ها دسترسی پیدا کنید.",
   "detailPanel.operation.viewDetail": "نمایش جزئیات",
+  "detailPanel.operation.viewReadme": "مشاهده README",
   "detailPanel.serviceOk": "خدمات خوب",
   "detailPanel.strategyNum": "{{num}} {{strategy}} شامل",
   "detailPanel.switchVersion": "نسخه سوئیچ",
@@ -173,6 +183,7 @@
   "installModal.back": "بازگشت",
   "installModal.cancel": "لغو",
   "installModal.close": "نزدیک",
+  "installModal.dropIntegrationToInstall": "بسته افزونه را برای نصب اینجا رها کنید",
   "installModal.dropPluginToInstall": "بسته افزونه را برای نصب اینجا رها کنید",
   "installModal.fromTrustSource": "لطفا مطمئن شوید که افزونه ها را فقط از <trustSource>یک منبع قابل اعتماد</trustSource> نصب می کنید.",
   "installModal.install": "نصب",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "افزونه را نصب کنید",
   "installModal.installWarning": "این افزونه اجازه نصب ندارد.",
   "installModal.installedSuccessfully": "نصب موفقیت آمیز بود",
+  "installModal.installedSuccessfullyCountDesc": "افزونه‌های {{num}} زیر با موفقیت نصب شدند.",
   "installModal.installedSuccessfullyDesc": "این افزونه با موفقیت نصب شد.",
+  "installModal.installedSuccessfullyWithPageDesc": "این افزونه با موفقیت نصب شد. می‌توانید آن را در صفحه <categoryName>{{categoryName}}</categoryName> پیدا کنید.",
   "installModal.installing": "نصب...",
   "installModal.labels.package": "بسته",
   "installModal.labels.repository": "مخزن",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "در شرف نصب افزونه های {{num}} زیر",
   "installModal.uploadFailed": "آپلود انجام نشد",
   "installModal.uploadingPackage": "آپلود {{packageName}}...",
+  "installModal.viewDetails": "نمایش جزئیات",
   "installPlugin": "افزونه را نصب کنید",
+  "list.noAgentStrategyFound": "هیچ استراتژی عاملی یافت نشد",
+  "list.noExtensionFound": "هیچ افزونه‌ای یافت نشد",
   "list.noInstalled": "هیچ افزونه ای نصب نشده است",
+  "list.noTriggerFound": "هیچ محرکی یافت نشد",
   "list.notFound": "هیچ افزونه ای یافت نشد",
   "list.source.github": "نصب از GitHub",
   "list.source.local": "نصب از فایل بسته محلی",
   "list.source.marketplace": "از Marketplace نصب کنید",
+  "marketplace.allPlugins": "همه افزونه‌ها",
   "marketplace.and": "و",
+  "marketplace.becomePartner": "شریک شوید",
   "marketplace.difyMarketplace": "بازار دیفی",
   "marketplace.discover": "کشف",
   "marketplace.empower": "توسعه هوش مصنوعی خود را توانمند کنید",
   "marketplace.moreFrom": "اطلاعات بیشتر از Marketplace",
-  "marketplace.noPluginFound": "هیچ افزونه ای یافت نشد",
+  "marketplace.noPluginFound": "هیچ افزونه‌ای یافت نشد",
   "marketplace.partnerTip": "تأیید شده توسط یک شریک دیفی",
+  "marketplace.pluginsHeroSubtitle": "از افزونه‌های ساخته‌شده توسط جامعه برای تقویت توسعه هوش مصنوعی خود استفاده کنید.",
+  "marketplace.pluginsHeroTitle": "کشف کنید. گسترش دهید. بسازید.",
   "marketplace.pluginsResult": "نتایج {{num}}",
   "marketplace.sortBy": "شهر سیاه",
   "marketplace.sortOption.firstReleased": "اولین منتشر شد",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "تأیید شده توسط دیفی",
   "marketplace.viewMore": "بیشتر ببینید",
   "metadata.title": "پلاگین ها",
+  "pluginDevelopmentGuide": "راهنمای توسعه افزونه",
   "pluginInfoModal.packageName": "بسته",
   "pluginInfoModal.release": "انتشار",
   "pluginInfoModal.repository": "مخزن",
   "pluginInfoModal.title": "اطلاعات پلاگین",
+  "pluginPublishGuide": "راهنمای انتشار افزونه",
   "privilege.admins": "مدیران",
+  "privilege.configurePermissionsInSettings": "برای پیکربندی مجوزهای افزونه به تنظیمات > نقش‌ها و مجوزها بروید.",
   "privilege.everyone": "همه",
+  "privilege.noDebugPermissionTooltip": "شما اجازه اشکال‌زدایی افزونه‌ها را ندارید",
+  "privilege.noInstallPermissionTooltip": "شما اجازه نصب و مدیریت افزونه‌ها را ندارید",
   "privilege.noone": "هیچ",
+  "privilege.permissions": "مجوزها",
+  "privilege.quickWhoCanDebug": "چه کسی می‌تواند اشکال‌زدایی کند؟",
+  "privilege.quickWhoCanInstall": "چه کسی می‌تواند نصب و مدیریت کند؟",
   "privilege.title": "تنظیمات پلاگین",
   "privilege.whoCanDebug": "چه کسی می تواند افزونه ها را اشکال زدایی کند؟",
   "privilege.whoCanInstall": "چه کسی می تواند افزونه ها را نصب و مدیریت کند؟",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "بدون پرونده README موجود",
   "readmeInfo.title": "خواندنی",
   "requestAPlugin": "درخواست یک افزونه",
+  "requestSubmit": "درخواست یا انتشار",
   "search": "جستجو",
   "searchCategories": "دسته بندی ها را جستجو کنید",
   "searchInMarketplace": "جستجو در Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "نصب پلاگین های {{installingLength}}، {{successLength}} موفقیت آمیز است.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "راهنمای انتشار الگو",
   "upgrade.close": "نزدیک",
   "upgrade.description": "در مورد نصب افزونه زیر",
   "upgrade.successfulTitle": "نصب موفقیت آمیز",
diff --git a/web/i18n/fr-FR/dataset-pipeline.json b/web/i18n/fr-FR/dataset-pipeline.json
index 46c3ead1743..621de36994b 100644
--- a/web/i18n/fr-FR/dataset-pipeline.json
+++ b/web/i18n/fr-FR/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Cette action est permanente. Vous ne pourrez pas revenir à la méthode précédente. Veuillez confirmer la conversion.",
   "conversion.confirm.title": "Confirmation",
   "conversion.descriptionChunk1": "Vous pouvez désormais convertir votre base de connaissances existante pour utiliser le pipeline de connaissances pour le traitement des documents",
-  "conversion.descriptionChunk2": "— une approche plus ouverte et plus flexible avec un accès aux plugins de notre Marketplace. Cela appliquera la nouvelle méthode de traitement à tous les documents futurs.",
+  "conversion.descriptionChunk2": " — une approche plus ouverte et plus flexible avec un accès aux plugins du Marketplace. Cela appliquera la nouvelle méthode de traitement à tous les documents futurs.",
   "conversion.errorMessage": "Échec de la conversion du jeu de données en pipeline",
   "conversion.successMessage": "Conversion réussie du jeu de données en pipeline",
   "conversion.title": "Convertir vers le pipeline de connaissances",
diff --git a/web/i18n/fr-FR/permission-keys.json b/web/i18n/fr-FR/permission-keys.json
index 759ff9b7e0a..931088820dd 100644
--- a/web/i18n/fr-FR/permission-keys.json
+++ b/web/i18n/fr-FR/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Publication de l'application et gestion des versions",
   "app.acl.test_and_run": "Tester et utiliser l'application",
   "app.acl.view_layout": "Page d'orchestration en lecture seule",
-  "app.create_and_management": "Créer des applications et gérer les applications que vous avez créées",
+  "app.create_and_management": "Créer des applications",
   "app.tag.manage": "Gérer les étiquettes d'applications",
   "app_library.access": "Accéder à la bibliothèque d'applications",
   "billing.manage": "Modifier les forfaits d'abonnement",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Récupération dans la base de connaissances",
   "dataset.acl.use": "Ajouter des documents à la base de connaissances",
   "dataset.api_key.manage": "Gérer les clés API de la base de connaissances",
-  "dataset.create_and_management": "Créer des bases de connaissances et gérer les bases de connaissances que vous avez créées",
+  "dataset.create_and_management": "Créer des bases de connaissances",
   "dataset.external.connect": "Connecter des bases de connaissances externes",
   "dataset.tag.manage": "Gérer les étiquettes de bases de connaissances",
   "mcp.manage": "Gérer MCP",
diff --git a/web/i18n/fr-FR/permission.json b/web/i18n/fr-FR/permission.json
index 897d0f71d8a..e07a9fae877 100644
--- a/web/i18n/fr-FR/permission.json
+++ b/web/i18n/fr-FR/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Affichez le nom, la description et les autorisations accordées pour cet ensemble d'autorisations.",
   "permissionSet.modal.view.dataset.title": "Afficher l'ensemble d'autorisations de base de connaissances",
   "permissionSet.nameLabel": "Nom de l'ensemble d'autorisations",
-  "permissionSet.namePlaceholder": "ex. Peut exporter le DSL",
+  "permissionSet.namePlaceholder": "ex. Ensemble de permissions d'exploitation",
   "permissionSet.permissions": "Autorisations",
   "role.addRole": "Créer des rôles",
   "role.copyMembersDescription_one": "\"{{name}}\" est attribué à {{count}} membre. Voulez-vous que la copie du nouveau rôle inclue le même membre ?",
diff --git a/web/i18n/fr-FR/plugin.json b/web/i18n/fr-FR/plugin.json
index 7a645f65193..55b244e6742 100644
--- a/web/i18n/fr-FR/plugin.json
+++ b/web/i18n/fr-FR/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Utilisez l'autorisation OAuth",
   "auth.whoCanUse": "Qui peut utiliser",
   "auth.workspaceDefault": "Espace de travail par défaut",
+  "autoUpdate.autoUpdate": "Mise à jour automatique",
+  "autoUpdate.autoUpdateSettings": "Paramètres de mise à jour automatique",
   "autoUpdate.automaticUpdates": "Mises à jour automatiques",
   "autoUpdate.changeTimezone": "Pour changer de fuseau horaire, allez dans <setTimezone>Paramètres</setTimezone>",
   "autoUpdate.excludeUpdate": "Les {{num}} plugins suivants ne se mettront pas à jour automatiquement",
+  "autoUpdate.excludeUpdate_one": "Le {{num}} plugin suivant ne se mettra pas à jour automatiquement",
+  "autoUpdate.excludeUpdate_other": "Les {{num}} plugins suivants ne se mettront pas à jour automatiquement",
   "autoUpdate.nextUpdateTime": "Prochaine mise à jour automatique : {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Aucun plugin n'a été trouvé",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Aucun plugin installé",
   "autoUpdate.operation.clearAll": "Tout effacer",
   "autoUpdate.operation.select": "Sélectionner des plugins",
   "autoUpdate.partialUPdate": "Seuls les {{num}} plugins suivants se mettront à jour automatiquement",
+  "autoUpdate.partialUPdate_one": "Seul le {{num}} plugin suivant se mettra à jour automatiquement",
+  "autoUpdate.partialUPdate_other": "Seuls les {{num}} plugins suivants se mettront à jour automatiquement",
   "autoUpdate.pluginDowngradeWarning.description": "La mise à jour automatique est actuellement activée pour ce plugin. Le fait de rétrograder la version peut entraîner la perte de vos modifications lors de la prochaine mise à jour automatique.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Dégradez de toute façon",
   "autoUpdate.pluginDowngradeWarning.exclude": "Exclure de la mise à jour automatique",
   "autoUpdate.pluginDowngradeWarning.title": "Baisse de version du plugin",
+  "autoUpdate.scope": "Portée",
+  "autoUpdate.scopeMode.all": "Tout",
+  "autoUpdate.scopeMode.exclude": "Exclure la sélection",
   "autoUpdate.specifyPluginsToUpdate": "Spécifiez les plugins à mettre à jour",
   "autoUpdate.strategy.disabled.description": "Les plugins ne se mettront pas à jour automatiquement",
   "autoUpdate.strategy.disabled.name": "désactivé",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Mettre à jour",
   "detailPanel.operation.updateTooltip": "Mettez à jour pour accéder aux derniers modèles.",
   "detailPanel.operation.viewDetail": "Voir les détails",
+  "detailPanel.operation.viewReadme": "Voir le README",
   "detailPanel.serviceOk": "Service OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} INCLUS",
   "detailPanel.switchVersion": "Version du commutateur",
@@ -173,6 +183,7 @@
   "installModal.back": "Précédent",
   "installModal.cancel": "Annuler",
   "installModal.close": "Fermer",
+  "installModal.dropIntegrationToInstall": "Déposez le package de plugin ici pour l’installer",
   "installModal.dropPluginToInstall": "Déposez le package de plugin ici pour l’installer",
   "installModal.fromTrustSource": "Assurez-vous de n’installer que des plugins provenant d’une <trustSource>source fiable</trustSource>.",
   "installModal.install": "Installer",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Installer le plugin",
   "installModal.installWarning": "Ce plugin n’est pas autorisé à être installé.",
   "installModal.installedSuccessfully": "Installation réussie",
+  "installModal.installedSuccessfullyCountDesc": "Les {{num}} plugins suivants ont été installés avec succès.",
   "installModal.installedSuccessfullyDesc": "Le plugin a été installé avec succès.",
+  "installModal.installedSuccessfullyWithPageDesc": "Le plugin a été installé avec succès. Vous pouvez le trouver sur la page <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Installation...",
   "installModal.labels.package": "Colis",
   "installModal.labels.repository": "Dépôt",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Sur le point d’installer les plugins {{num}} suivants",
   "installModal.uploadFailed": "Échec du téléchargement",
   "installModal.uploadingPackage": "Téléchargement de {{packageName}}...",
+  "installModal.viewDetails": "Voir les détails",
   "installPlugin": "Installer le plugin",
+  "list.noAgentStrategyFound": "Aucune stratégie d’agent trouvée",
+  "list.noExtensionFound": "Aucune extension trouvée",
   "list.noInstalled": "Aucun plugin installé",
+  "list.noTriggerFound": "Aucun déclencheur trouvé",
   "list.notFound": "Aucun plugin trouvé",
   "list.source.github": "Installer à partir de GitHub",
   "list.source.local": "Installer à partir d’un fichier de package local",
   "list.source.marketplace": "Installer à partir de Marketplace",
+  "marketplace.allPlugins": "Toutes les intégrations",
   "marketplace.and": "et",
+  "marketplace.becomePartner": "Devenir partenaire",
   "marketplace.difyMarketplace": "Marché Dify",
   "marketplace.discover": "Découvrir",
   "marketplace.empower": "Renforcez le développement de votre IA",
   "marketplace.moreFrom": "Plus de Marketplace",
-  "marketplace.noPluginFound": "Aucun plugin trouvé",
+  "marketplace.noPluginFound": "Aucune intégration trouvée",
   "marketplace.partnerTip": "Vérifié par un partenaire Dify",
+  "marketplace.pluginsHeroSubtitle": "Utilisez des intégrations créées par la communauté pour propulser votre développement de l’IA.",
+  "marketplace.pluginsHeroTitle": "Découvrir. Étendre. Construire.",
   "marketplace.pluginsResult": "{{num}} résultats",
   "marketplace.sortBy": "Ville noire",
   "marketplace.sortOption.firstReleased": "Première sortie",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Vérifié par Dify",
   "marketplace.viewMore": "Voir plus",
   "metadata.title": "Plugins",
+  "pluginDevelopmentGuide": "Guide de développement d’intégration",
   "pluginInfoModal.packageName": "Colis",
   "pluginInfoModal.release": "Libérer",
   "pluginInfoModal.repository": "Dépôt",
   "pluginInfoModal.title": "Informations sur le plugin",
+  "pluginPublishGuide": "Guide de publication d’intégration",
   "privilege.admins": "Administrateurs",
+  "privilege.configurePermissionsInSettings": "Allez dans Paramètres > Rôles et permissions pour configurer les permissions des plugins.",
   "privilege.everyone": "Tout le monde",
+  "privilege.noDebugPermissionTooltip": "Vous n’avez pas l’autorisation de déboguer les intégrations",
+  "privilege.noInstallPermissionTooltip": "Vous n’avez pas l’autorisation d’installer et de gérer les intégrations",
   "privilege.noone": "Personne",
+  "privilege.permissions": "Permissions",
+  "privilege.quickWhoCanDebug": "Qui peut déboguer ?",
+  "privilege.quickWhoCanInstall": "Qui peut installer et gérer ?",
   "privilege.title": "Préférences du plugin",
   "privilege.whoCanDebug": "Qui peut déboguer les plugins ?",
   "privilege.whoCanInstall": "Qui peut installer et gérer les plugins ?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Aucun README disponible",
   "readmeInfo.title": "Lisez-moi",
   "requestAPlugin": "Demander un plugin",
+  "requestSubmit": "Demander ou publier",
   "search": "Rechercher",
   "searchCategories": "Catégories de recherche",
   "searchInMarketplace": "Rechercher sur Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Installation des plugins {{installingLength}}, succès de {{successLength}}.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Guide de publication de modèle",
   "upgrade.close": "Fermer",
   "upgrade.description": "Sur le point d’installer le plugin suivant",
   "upgrade.successfulTitle": "Installation réussie",
diff --git a/web/i18n/hi-IN/dataset-pipeline.json b/web/i18n/hi-IN/dataset-pipeline.json
index 1a8cc033f88..1f49efdb2bc 100644
--- a/web/i18n/hi-IN/dataset-pipeline.json
+++ b/web/i18n/hi-IN/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "यह कार्रवाई स्थायी है। आप पिछले तरीके पर वापस नहीं जा पाएंगे। कृपया परिवर्तन की पुष्टि करें।",
   "conversion.confirm.title": "पुष्टि",
   "conversion.descriptionChunk1": "आप अब अपने मौजूदा ज्ञान आधार को दस्तावेज़ प्रसंस्करण के लिए ज्ञान पाइपलाइन में बदल सकते हैं",
-  "conversion.descriptionChunk2": "— एक अधिक खुला और लचीला दृष्टिकोण जो हमारे मार्केटप्लेस से प्लगइन्स तक पहुंच प्रदान करता है। यह नए प्रसंस्करण पद्धति को सभी भविष्य के दस्तावेजों पर लागू करेगा।",
+  "conversion.descriptionChunk2": " — एक अधिक खुला और लचीला दृष्टिकोण जो मार्केटप्लेस से इंटीग्रेशन तक पहुंच प्रदान करता है। यह नई प्रसंस्करण पद्धति को सभी भविष्य के दस्तावेजों पर लागू करेगा।",
   "conversion.errorMessage": "डेटासेट को पाइपलाइन में परिवर्तित करने में विफल रहा",
   "conversion.successMessage": "डेटासेट को एक पाइपलाइन में सफलतापूर्वक रूपांतरित किया गया है",
   "conversion.title": "ज्ञान पाइपलाइन में परिवर्तित करें",
diff --git a/web/i18n/hi-IN/permission-keys.json b/web/i18n/hi-IN/permission-keys.json
index 7aec8a75945..b91e15050ca 100644
--- a/web/i18n/hi-IN/permission-keys.json
+++ b/web/i18n/hi-IN/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "ऐप प्रकाशन और संस्करण प्रबंधन",
   "app.acl.test_and_run": "ऐप परीक्षण और उपयोग करें",
   "app.acl.view_layout": "केवल-पढ़ने योग्य ऑर्केस्ट्रेशन पृष्ठ",
-  "app.create_and_management": "ऐप्स बनाएं और अपने बनाए गए ऐप्स प्रबंधित करें",
+  "app.create_and_management": "ऐप्स बनाएं",
   "app.tag.manage": "ऐप टैग प्रबंधित करें",
   "app_library.access": "ऐप लाइब्रेरी तक पहुंचें",
   "billing.manage": "सदस्यता योजनाएं बदलें",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "ज्ञान आधार पुनर्प्राप्ति",
   "dataset.acl.use": "ज्ञान आधार में दस्तावेज़ जोड़ें",
   "dataset.api_key.manage": "ज्ञान आधार API कुंजियाँ प्रबंधित करें",
-  "dataset.create_and_management": "ज्ञान आधार बनाएं और अपने बनाए गए ज्ञान आधार प्रबंधित करें",
+  "dataset.create_and_management": "ज्ञान आधार बनाएं",
   "dataset.external.connect": "बाहरी ज्ञान आधार कनेक्ट करें",
   "dataset.tag.manage": "ज्ञान आधार टैग प्रबंधित करें",
   "mcp.manage": "MCP प्रबंधित करें",
diff --git a/web/i18n/hi-IN/permission.json b/web/i18n/hi-IN/permission.json
index 92ad3bbedcd..5795087827b 100644
--- a/web/i18n/hi-IN/permission.json
+++ b/web/i18n/hi-IN/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "इस अनुमति सेट के लिए नाम, विवरण और प्रदान की गई अनुमतियों को देखें।",
   "permissionSet.modal.view.dataset.title": "ज्ञान आधार अनुमति सेट देखें",
   "permissionSet.nameLabel": "अनुमति सेट नाम",
-  "permissionSet.namePlaceholder": "उदा. DSL निर्यात कर सकते हैं",
+  "permissionSet.namePlaceholder": "उदा. संचालन अनुमति सेट",
   "permissionSet.permissions": "अनुमतियां",
   "role.addRole": "भूमिकाएं बनाएं",
   "role.copyMembersDescription_one": "\"{{name}}\" {{count}} सदस्य को सौंपी गई है। क्या आप चाहते हैं कि नई भूमिका प्रति में वही सदस्य शामिल हो?",
diff --git a/web/i18n/hi-IN/plugin.json b/web/i18n/hi-IN/plugin.json
index d0cf6609e16..844ee11541e 100644
--- a/web/i18n/hi-IN/plugin.json
+++ b/web/i18n/hi-IN/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "OAuth प्राधिकरण का उपयोग करें",
   "auth.whoCanUse": "कौन उपयोग कर सकता है",
   "auth.workspaceDefault": "कार्यस्थल डिफ़ॉल्ट",
+  "autoUpdate.autoUpdate": "स्वतः अपडेट",
+  "autoUpdate.autoUpdateSettings": "स्वतः अपडेट सेटिंग्स",
   "autoUpdate.automaticUpdates": "स्वचालित अपडेट",
   "autoUpdate.changeTimezone": "समय क्षेत्र बदलने के लिए, <setTimezone>सेटिंग्स</setTimezone> पर जाएं",
-  "autoUpdate.excludeUpdate": "निम्नलिखित {{num}} प्लगइन्स स्वचालित रूप से अपडेट नहीं होंगे",
+  "autoUpdate.excludeUpdate": "निम्नलिखित {{num}} इंटीग्रेशन स्वचालित रूप से अपडेट नहीं होंगे",
+  "autoUpdate.excludeUpdate_one": "निम्नलिखित {{num}} इंटीग्रेशन स्वचालित रूप से अपडेट नहीं होगा",
+  "autoUpdate.excludeUpdate_other": "निम्नलिखित {{num}} इंटीग्रेशन स्वचालित रूप से अपडेट नहीं होंगे",
   "autoUpdate.nextUpdateTime": "अगली ऑटो-अपडेट: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "कोई प्लगइन्स नहीं मिले",
   "autoUpdate.noPluginPlaceholder.noInstalled": "कोई प्लगइन स्थापित नहीं है",
   "autoUpdate.operation.clearAll": "सभी हटाएं",
   "autoUpdate.operation.select": "प्लगइन्स चुनें",
-  "autoUpdate.partialUPdate": "केवल निम्नलिखित {{num}} प्लगइन्स स्वचालित रूप से अपडेट होंगे",
+  "autoUpdate.partialUPdate": "केवल निम्नलिखित {{num}} इंटीग्रेशन स्वचालित रूप से अपडेट होंगे",
+  "autoUpdate.partialUPdate_one": "केवल निम्नलिखित {{num}} इंटीग्रेशन स्वचालित रूप से अपडेट होगा",
+  "autoUpdate.partialUPdate_other": "केवल निम्नलिखित {{num}} इंटीग्रेशन स्वचालित रूप से अपडेट होंगे",
   "autoUpdate.pluginDowngradeWarning.description": "इस प्लगइन के लिए ऑटो-अपडेट वर्तमान में सक्षम है। संस्करण को डाउनग्रेड करने से आपके परिवर्तनों को अगली स्वचालित अद्यतन के दौरान ओवरराइट किया जा सकता है।",
   "autoUpdate.pluginDowngradeWarning.downgrade": "फिर भी डाउनग्रेड करें",
   "autoUpdate.pluginDowngradeWarning.exclude": "स्वतः अपडेट से बाहर करें",
   "autoUpdate.pluginDowngradeWarning.title": "प्लगइन डाउनग्रेड",
+  "autoUpdate.scope": "दायरा",
+  "autoUpdate.scopeMode.all": "सभी",
+  "autoUpdate.scopeMode.exclude": "चयनित को बाहर करें",
   "autoUpdate.specifyPluginsToUpdate": "अपडेट करने के लिए प्लगइन्स निर्दिष्ट करें",
   "autoUpdate.strategy.disabled.description": "प्लगइन्स स्वचालित रूप से अपडेट नहीं होंगे",
   "autoUpdate.strategy.disabled.name": "अक्षम",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "अपडेट",
   "detailPanel.operation.updateTooltip": "नवीनतम मॉडल तक पहुँचने के लिए अपडेट करें।",
   "detailPanel.operation.viewDetail": "विवरण देखें",
+  "detailPanel.operation.viewReadme": "README देखें",
   "detailPanel.serviceOk": "सेवा ठीक है",
   "detailPanel.strategyNum": "{{num}} {{strategy}} शामिल",
   "detailPanel.switchVersion": "स्विच संस्करण",
@@ -173,6 +183,7 @@
   "installModal.back": "पीछे",
   "installModal.cancel": "रद्द करें",
   "installModal.close": "करीब",
+  "installModal.dropIntegrationToInstall": "स्थापित करने के लिए इंटीग्रेशन पैकेज यहां ड्रॉप करें",
   "installModal.dropPluginToInstall": "यहां प्लगइन पैकेज ड्रॉप करें ताकि इसे स्थापित किया जा सके",
   "installModal.fromTrustSource": "कृपया सुनिश्चित करें कि आप केवल एक <trustSource>विश्वसनीय स्रोत</trustSource> से प्लगइन्स स्थापित करें।",
   "installModal.install": "स्थापित करें",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "प्लगइन स्थापित करें",
   "installModal.installWarning": "इस प्लगइन को स्थापित करने की अनुमति नहीं है।",
   "installModal.installedSuccessfully": "स्थापना सफल",
+  "installModal.installedSuccessfullyCountDesc": "निम्नलिखित {{num}} इंटीग्रेशन सफलतापूर्वक स्थापित किए गए हैं।",
   "installModal.installedSuccessfullyDesc": "प्लगइन सफलतापूर्वक स्थापित किया गया है।",
+  "installModal.installedSuccessfullyWithPageDesc": "इंटीग्रेशन सफलतापूर्वक स्थापित किया गया है। आप इसे <categoryName>{{categoryName}}</categoryName> पृष्ठ पर पा सकते हैं।",
   "installModal.installing": "स्थापित कर रहा है...",
   "installModal.labels.package": "पैकेज",
   "installModal.labels.repository": "भंडार",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "निम्नलिखित {{num}} प्लगइन्स स्थापित करने वाले हैं",
   "installModal.uploadFailed": "अपलोड विफल",
   "installModal.uploadingPackage": "{{packageName}} अपलोड हो रहा है...",
+  "installModal.viewDetails": "विवरण देखें",
   "installPlugin": "प्लगइन स्थापित करें",
+  "list.noAgentStrategyFound": "कोई एजेंट रणनीति नहीं मिली",
+  "list.noExtensionFound": "कोई एक्सटेंशन नहीं मिला",
   "list.noInstalled": "कोई प्लगइन स्थापित नहीं हैं",
+  "list.noTriggerFound": "कोई ट्रिगर नहीं मिला",
   "list.notFound": "कोई प्लगइन नहीं मिला",
   "list.source.github": "गिटहब से इंस्टॉल करें",
   "list.source.local": "स्थानीय पैकेज फ़ाइल से स्थापित करें",
   "list.source.marketplace": "मार्केटप्लेस से इंस्टॉल करें",
+  "marketplace.allPlugins": "सभी इंटीग्रेशन",
   "marketplace.and": "और",
+  "marketplace.becomePartner": "भागीदार बनें",
   "marketplace.difyMarketplace": "डिफाई मार्केटप्लेस",
   "marketplace.discover": "खोजें",
   "marketplace.empower": "अपने एआई विकास को सशक्त बनाएं",
   "marketplace.moreFrom": "मार्केटप्लेस से अधिक",
-  "marketplace.noPluginFound": "कोई प्लगइन नहीं मिला",
+  "marketplace.noPluginFound": "कोई इंटीग्रेशन नहीं मिला",
   "marketplace.partnerTip": "Dify भागीदार द्वारा सत्यापित",
+  "marketplace.pluginsHeroSubtitle": "अपने एआई विकास को सशक्त बनाने के लिए समुदाय द्वारा निर्मित इंटीग्रेशन का उपयोग करें।",
+  "marketplace.pluginsHeroTitle": "खोजें। विस्तार करें। निर्माण करें।",
   "marketplace.pluginsResult": "{{num}} परिणाम",
   "marketplace.sortBy": "काला शहर",
   "marketplace.sortOption.firstReleased": "पहली बार जारी किया गया",
@@ -217,22 +238,31 @@
   "marketplace.verifiedTip": "डिफाई द्वारा सत्यापित",
   "marketplace.viewMore": "और देखें",
   "metadata.title": "प्लगइन्स",
+  "pluginDevelopmentGuide": "इंटीग्रेशन विकास मार्गदर्शिका",
   "pluginInfoModal.packageName": "पैकेज",
   "pluginInfoModal.release": "रिहाई",
   "pluginInfoModal.repository": "भंडार",
   "pluginInfoModal.title": "प्लगइन जानकारी",
+  "pluginPublishGuide": "इंटीग्रेशन प्रकाशन मार्गदर्शिका",
   "privilege.admins": "व्यवस्थापक",
+  "privilege.configurePermissionsInSettings": "प्लगइन अनुमतियाँ कॉन्फ़िगर करने के लिए सेटिंग्स > भूमिकाएँ और अनुमतियाँ पर जाएं।",
   "privilege.everyone": "सभी",
+  "privilege.noDebugPermissionTooltip": "आपके पास इंटीग्रेशन डिबग करने की अनुमति नहीं है",
+  "privilege.noInstallPermissionTooltip": "आपके पास इंटीग्रेशन स्थापित और प्रबंधित करने की अनुमति नहीं है",
   "privilege.noone": "कोई नहीं",
-  "privilege.title": "प्लगइन प्राथमिकताएँ",
-  "privilege.whoCanDebug": "कौन प्लगइन्स को डिबग कर सकता है?",
-  "privilege.whoCanInstall": "कौन प्लगइन्स को स्थापित और प्रबंधित कर सकता है?",
+  "privilege.permissions": "अनुमतियाँ",
+  "privilege.quickWhoCanDebug": "कौन डिबग कर सकता है?",
+  "privilege.quickWhoCanInstall": "कौन स्थापित और प्रबंधित कर सकता है?",
+  "privilege.title": "इंटीग्रेशन प्राथमिकताएँ",
+  "privilege.whoCanDebug": "कौन इंटीग्रेशन को डिबग कर सकता है?",
+  "privilege.whoCanInstall": "कौन इंटीग्रेशन को स्थापित और प्रबंधित कर सकता है?",
   "publishPlugins": "प्लगइन प्रकाशित करें",
   "readmeInfo.failedToFetch": "README लाने में असफल",
   "readmeInfo.needHelpCheckReadme": "मदद चाहिए? README देखें।",
   "readmeInfo.noReadmeAvailable": "कोई README उपलब्ध नहीं है",
   "readmeInfo.title": "पढ़ें मुझे",
   "requestAPlugin": "एक प्लगइन का अनुरोध करें",
+  "requestSubmit": "अनुरोध करें या प्रकाशित करें",
   "search": "खोज",
   "searchCategories": "खोज श्रेणियाँ",
   "searchInMarketplace": "मार्केटप्लेस में खोजें",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "{{installingLength}} प्लगइन्स स्थापित कर रहे हैं, {{successLength}} सफल।",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "टेम्पलेट प्रकाशन मार्गदर्शिका",
   "upgrade.close": "करीब",
   "upgrade.description": "निम्नलिखित प्लगइन स्थापित करने वाले हैं",
   "upgrade.successfulTitle": "स्थापना सफल",
diff --git a/web/i18n/id-ID/dataset-pipeline.json b/web/i18n/id-ID/dataset-pipeline.json
index a262ba1b122..c0d34f216d5 100644
--- a/web/i18n/id-ID/dataset-pipeline.json
+++ b/web/i18n/id-ID/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Tindakan ini bersifat permanen. Anda tidak akan dapat kembali ke metode sebelumnya. Silakan konfirmasi untuk mengonversi.",
   "conversion.confirm.title": "Konfirmasi",
   "conversion.descriptionChunk1": "Anda sekarang dapat mengonversi basis pengetahuan yang ada untuk menggunakan Knowledge Pipeline untuk pemrosesan dokumen",
-  "conversion.descriptionChunk2": "— pendekatan yang lebih terbuka dan fleksibel dengan akses ke plugin dari pasar kami. Ini akan menerapkan metode pemrosesan baru untuk semua dokumen di masa mendatang.",
+  "conversion.descriptionChunk2": " — pendekatan yang lebih terbuka dan fleksibel dengan akses ke integrasi dari Marketplace. Ini akan menerapkan metode pemrosesan baru untuk semua dokumen di masa mendatang.",
   "conversion.errorMessage": "Gagal mengonversi himpunan data ke alur",
   "conversion.successMessage": "Berhasil mengonversi himpunan data menjadi alur",
   "conversion.title": "Mengonversi ke Alur Pengetahuan",
diff --git a/web/i18n/id-ID/permission-keys.json b/web/i18n/id-ID/permission-keys.json
index c94d50274e2..3904eb23819 100644
--- a/web/i18n/id-ID/permission-keys.json
+++ b/web/i18n/id-ID/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Penerbitan aplikasi dan manajemen versi",
   "app.acl.test_and_run": "Uji dan gunakan aplikasi",
   "app.acl.view_layout": "Halaman orkestrasi hanya-baca",
-  "app.create_and_management": "Buat aplikasi dan kelola aplikasi yang Anda buat",
+  "app.create_and_management": "Buat aplikasi",
   "app.tag.manage": "Kelola tag aplikasi",
   "app_library.access": "Akses Pustaka Aplikasi",
   "billing.manage": "Ubah paket langganan",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Pengambilan basis pengetahuan",
   "dataset.acl.use": "Tambahkan dokumen ke basis pengetahuan",
   "dataset.api_key.manage": "Kelola kunci API basis pengetahuan",
-  "dataset.create_and_management": "Buat basis pengetahuan dan kelola basis pengetahuan yang Anda buat",
+  "dataset.create_and_management": "Buat basis pengetahuan",
   "dataset.external.connect": "Hubungkan basis pengetahuan eksternal",
   "dataset.tag.manage": "Kelola tag basis pengetahuan",
   "mcp.manage": "Kelola MCP",
diff --git a/web/i18n/id-ID/permission.json b/web/i18n/id-ID/permission.json
index 0b7ceca2a29..8a06cf642ee 100644
--- a/web/i18n/id-ID/permission.json
+++ b/web/i18n/id-ID/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Lihat nama, deskripsi, dan izin yang diberikan untuk set izin ini.",
   "permissionSet.modal.view.dataset.title": "Lihat set izin Basis Pengetahuan",
   "permissionSet.nameLabel": "Nama set izin",
-  "permissionSet.namePlaceholder": "mis. Dapat mengekspor DSL",
+  "permissionSet.namePlaceholder": "mis. Set izin operasional",
   "permissionSet.permissions": "Izin",
   "role.addRole": "Buat peran",
   "role.copyMembersDescription_one": "\"{{name}}\" ditetapkan ke {{count}} anggota. Apakah Anda ingin salinan peran baru menyertakan anggota yang sama?",
diff --git a/web/i18n/id-ID/plugin.json b/web/i18n/id-ID/plugin.json
index 5045d3b5cfa..362d57afd5a 100644
--- a/web/i18n/id-ID/plugin.json
+++ b/web/i18n/id-ID/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Gunakan Otorisasi OAuth",
   "auth.whoCanUse": "Siapa yang bisa menggunakan",
   "auth.workspaceDefault": "Ruang Kerja Default",
+  "autoUpdate.autoUpdate": "Pembaruan otomatis",
+  "autoUpdate.autoUpdateSettings": "Pengaturan Pembaruan Otomatis",
   "autoUpdate.automaticUpdates": "Pembaruan otomatis",
   "autoUpdate.changeTimezone": "Untuk mengubah zona waktu, pergi ke <setTimezone>Pengaturan</setTimezone>",
   "autoUpdate.excludeUpdate": "Plugin {{num}} berikut ini tidak akan diperbarui secara otomatis",
+  "autoUpdate.excludeUpdate_one": "{{num}} integrasi berikut tidak akan diperbarui secara otomatis",
+  "autoUpdate.excludeUpdate_other": "{{num}} integrasi berikut tidak akan diperbarui secara otomatis",
   "autoUpdate.nextUpdateTime": "Pembaruan otomatis berikutnya: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Tidak ada plugin yang ditemukan",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Tidak ada plugin yang diinstal",
   "autoUpdate.operation.clearAll": "Hapus semua",
   "autoUpdate.operation.select": "Pilih plugin",
   "autoUpdate.partialUPdate": "Hanya plugin {{num}} berikut yang akan diperbarui secara otomatis",
+  "autoUpdate.partialUPdate_one": "Hanya {{num}} integrasi berikut yang akan diperbarui secara otomatis",
+  "autoUpdate.partialUPdate_other": "Hanya {{num}} integrasi berikut yang akan diperbarui secara otomatis",
   "autoUpdate.pluginDowngradeWarning.description": "Pembaruan otomatis saat ini diaktifkan untuk plugin ini. Menurunkan versi dapat menyebabkan perubahan Anda ditimpa selama pembaruan otomatis berikutnya.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Tetap turun",
   "autoUpdate.pluginDowngradeWarning.exclude": "Mengecualikan dari pembaruan otomatis",
   "autoUpdate.pluginDowngradeWarning.title": "Penurunan Plugin",
+  "autoUpdate.scope": "Cakupan",
+  "autoUpdate.scopeMode.all": "Semua",
+  "autoUpdate.scopeMode.exclude": "Kecualikan yang dipilih",
   "autoUpdate.specifyPluginsToUpdate": "Tentukan plugin untuk diperbarui",
   "autoUpdate.strategy.disabled.description": "Plugin tidak akan diperbarui secara otomatis",
   "autoUpdate.strategy.disabled.name": "Cacat",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Pemutakhiran",
   "detailPanel.operation.updateTooltip": "Perbarui untuk mengakses model terbaru.",
   "detailPanel.operation.viewDetail": "Lihat Detail",
+  "detailPanel.operation.viewReadme": "Lihat README",
   "detailPanel.serviceOk": "Layanan OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} TERMASUK",
   "detailPanel.switchVersion": "Beralih Versi",
@@ -173,6 +183,7 @@
   "installModal.back": "Kembali",
   "installModal.cancel": "Membatalkan",
   "installModal.close": "Tutup",
+  "installModal.dropIntegrationToInstall": "Jatuhkan paket integrasi di sini untuk menginstal",
   "installModal.dropPluginToInstall": "Jatuhkan paket plugin di sini untuk menginstal",
   "installModal.fromTrustSource": "Pastikan Anda hanya menginstal plugin dari <trustSource>sumber yang tepercaya</trustSource>.",
   "installModal.install": "Pasang",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Instal Plugin",
   "installModal.installWarning": "Plugin ini tidak diperbolehkan untuk diinstal.",
   "installModal.installedSuccessfully": "Instalasi berhasil",
+  "installModal.installedSuccessfullyCountDesc": "{{num}} integrasi berikut telah berhasil diinstal.",
   "installModal.installedSuccessfullyDesc": "Plugin telah berhasil diinstal.",
+  "installModal.installedSuccessfullyWithPageDesc": "Integrasi telah berhasil diinstal. Anda dapat menemukannya di halaman <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Menginstal...",
   "installModal.labels.package": "Paket",
   "installModal.labels.repository": "Repositori",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Akan memasang plugin {{num}} berikut",
   "installModal.uploadFailed": "Upload gagal",
   "installModal.uploadingPackage": "Mengunggah {{packageName}}...",
+  "installModal.viewDetails": "Lihat Detail",
   "installPlugin": "Instal plugin",
+  "list.noAgentStrategyFound": "Tidak ada Strategi Agen yang ditemukan",
+  "list.noExtensionFound": "Tidak ada Ekstensi yang ditemukan",
   "list.noInstalled": "Tidak ada plugin yang diinstal",
+  "list.noTriggerFound": "Tidak ada Pemicu yang ditemukan",
   "list.notFound": "Tidak ada plugin yang ditemukan",
   "list.source.github": "Instal dari GitHub",
   "list.source.local": "Instal dari File Paket Lokal",
   "list.source.marketplace": "Instal dari Marketplace",
+  "marketplace.allPlugins": "Semua integrasi",
   "marketplace.and": "dan",
+  "marketplace.becomePartner": "Menjadi Partner",
   "marketplace.difyMarketplace": "Dify Marketplace",
   "marketplace.discover": "Menemukan",
   "marketplace.empower": "Berdayakan pengembangan AI Anda",
   "marketplace.moreFrom": "Selengkapnya dari Marketplace",
-  "marketplace.noPluginFound": "Tidak ada plugin yang ditemukan",
+  "marketplace.noPluginFound": "Tidak ada integrasi yang ditemukan",
   "marketplace.partnerTip": "Diverifikasi oleh partner Dify",
+  "marketplace.pluginsHeroSubtitle": "Gunakan integrasi buatan komunitas untuk mendukung pengembangan AI Anda.",
+  "marketplace.pluginsHeroTitle": "Temukan. Perluas. Bangun.",
   "marketplace.pluginsResult": "hasil {{num}}",
   "marketplace.sortBy": "Urutkan berdasarkan",
   "marketplace.sortOption.firstReleased": "Pertama Dirilis",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Diverifikasi oleh Dify",
   "marketplace.viewMore": "Lihat lebih banyak",
   "metadata.title": "Plugin",
+  "pluginDevelopmentGuide": "Panduan pengembangan integrasi",
   "pluginInfoModal.packageName": "Paket",
   "pluginInfoModal.release": "Lepaskan",
   "pluginInfoModal.repository": "Repositori",
   "pluginInfoModal.title": "Info plugin",
+  "pluginPublishGuide": "Panduan penerbitan integrasi",
   "privilege.admins": "Admin",
+  "privilege.configurePermissionsInSettings": "Buka Pengaturan > Peran & Izin untuk mengonfigurasi izin integrasi.",
   "privilege.everyone": "Orang",
+  "privilege.noDebugPermissionTooltip": "Anda tidak memiliki izin untuk men-debug integrasi",
+  "privilege.noInstallPermissionTooltip": "Anda tidak memiliki izin untuk menginstal dan mengelola integrasi",
   "privilege.noone": "Tidak ada seorang pun",
+  "privilege.permissions": "Izin",
+  "privilege.quickWhoCanDebug": "Siapa yang dapat men-debug?",
+  "privilege.quickWhoCanInstall": "Siapa yang dapat menginstal dan mengelola?",
   "privilege.title": "Preferensi Plugin",
   "privilege.whoCanDebug": "Siapa yang dapat men-debug plugin?",
   "privilege.whoCanInstall": "Siapa yang dapat menginstal dan mengelola plugin?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Tidak ada README yang tersedia",
   "readmeInfo.title": "BACA SAYA",
   "requestAPlugin": "Minta plugin",
+  "requestSubmit": "Minta atau terbitkan",
   "search": "Mencari",
   "searchCategories": "Cari Kategori",
   "searchInMarketplace": "Cari di Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Memasang plugin {{installingLength}}, {{successLength}} berhasil.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Panduan penerbitan templat",
   "upgrade.close": "Tutup",
   "upgrade.description": "Tentang menginstal plugin berikut",
   "upgrade.successfulTitle": "Instal berhasil",
diff --git a/web/i18n/it-IT/dataset-pipeline.json b/web/i18n/it-IT/dataset-pipeline.json
index 17a80f05d0c..117ef2b8565 100644
--- a/web/i18n/it-IT/dataset-pipeline.json
+++ b/web/i18n/it-IT/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Questa azione è permanente. Non sarà possibile ripristinare il metodo precedente. Si prega di confermare per convertire.",
   "conversion.confirm.title": "Conferma",
   "conversion.descriptionChunk1": "Ora puoi convertire la tua knowledge base esistente per utilizzare la Knowledge Pipeline per l'elaborazione dei documenti",
-  "conversion.descriptionChunk2": "— un approccio più aperto e flessibile con l'accesso ai plugin dal nostro marketplace. In questo modo il nuovo metodo di elaborazione verrà applicato a tutti i documenti futuri.",
+  "conversion.descriptionChunk2": " — un approccio più aperto e flessibile con l'accesso alle integrazioni dal Marketplace. In questo modo il nuovo metodo di elaborazione verrà applicato a tutti i documenti futuri.",
   "conversion.errorMessage": "Impossibile convertire il set di dati in una pipeline",
   "conversion.successMessage": "Conversione del set di dati in pipeline",
   "conversion.title": "Conversione in pipeline di conoscenza",
diff --git a/web/i18n/it-IT/permission-keys.json b/web/i18n/it-IT/permission-keys.json
index 5a3c453b135..970a2a58f71 100644
--- a/web/i18n/it-IT/permission-keys.json
+++ b/web/i18n/it-IT/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Pubblicazione dell'app e gestione delle versioni",
   "app.acl.test_and_run": "Testa e usa l'app",
   "app.acl.view_layout": "Pagina di orchestrazione in sola lettura",
-  "app.create_and_management": "Crea app e gestisci le app che hai creato",
+  "app.create_and_management": "Crea app",
   "app.tag.manage": "Gestisci i tag delle app",
   "app_library.access": "Accedi alla Libreria delle app",
   "billing.manage": "Cambia i piani di abbonamento",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Recupero dalla knowledge base",
   "dataset.acl.use": "Aggiungi documenti alla knowledge base",
   "dataset.api_key.manage": "Gestisci le chiavi API della knowledge base",
-  "dataset.create_and_management": "Crea knowledge base e gestisci le knowledge base che hai creato",
+  "dataset.create_and_management": "Crea knowledge base",
   "dataset.external.connect": "Connetti knowledge base esterne",
   "dataset.tag.manage": "Gestisci i tag della knowledge base",
   "mcp.manage": "Gestisci MCP",
diff --git a/web/i18n/it-IT/permission.json b/web/i18n/it-IT/permission.json
index 0111207c5dd..974e47b3305 100644
--- a/web/i18n/it-IT/permission.json
+++ b/web/i18n/it-IT/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Visualizza il nome, la descrizione e i permessi concessi per questo set di permessi.",
   "permissionSet.modal.view.dataset.title": "Visualizza set di permessi per knowledge base",
   "permissionSet.nameLabel": "Nome del set di permessi",
-  "permissionSet.namePlaceholder": "es. Può esportare DSL",
+  "permissionSet.namePlaceholder": "es. Set di autorizzazioni operative",
   "permissionSet.permissions": "Permessi",
   "role.addRole": "Crea ruoli",
   "role.copyMembersDescription_one": "\"{{name}}\" è assegnato a {{count}} membro. Vuoi che la copia del nuovo ruolo includa lo stesso membro?",
diff --git a/web/i18n/it-IT/plugin.json b/web/i18n/it-IT/plugin.json
index d4c6609909c..3727cdfad46 100644
--- a/web/i18n/it-IT/plugin.json
+++ b/web/i18n/it-IT/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Usa l'autorizzazione OAuth",
   "auth.whoCanUse": "Chi può utilizzare",
   "auth.workspaceDefault": "Spazio di Lavoro Predefinito",
+  "autoUpdate.autoUpdate": "Aggiornamento automatico",
+  "autoUpdate.autoUpdateSettings": "Impostazioni di aggiornamento automatico",
   "autoUpdate.automaticUpdates": "Aggiornamenti automatici",
   "autoUpdate.changeTimezone": "Per cambiare il fuso orario, vai su <setTimezone>Impostazioni</setTimezone>",
   "autoUpdate.excludeUpdate": "I seguenti {{num}} plugin non si aggiorneranno automaticamente",
+  "autoUpdate.excludeUpdate_one": "La seguente {{num}} integrazione non si aggiornerà automaticamente",
+  "autoUpdate.excludeUpdate_other": "Le seguenti {{num}} integrazioni non si aggiorneranno automaticamente",
   "autoUpdate.nextUpdateTime": "Prossimo aggiornamento automatico: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Nessun plugin trovato",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Nessun plugin installato",
   "autoUpdate.operation.clearAll": "Cancella tutto",
   "autoUpdate.operation.select": "Seleziona i plugin",
   "autoUpdate.partialUPdate": "Solo i seguenti {{num}} plugin si aggiorneranno automaticamente",
+  "autoUpdate.partialUPdate_one": "Solo la seguente {{num}} integrazione si aggiornerà automaticamente",
+  "autoUpdate.partialUPdate_other": "Solo le seguenti {{num}} integrazioni si aggiorneranno automaticamente",
   "autoUpdate.pluginDowngradeWarning.description": "L'aggiornamento automatico è attualmente abilitato per questo plugin. Il downgrade della versione potrebbe causare la sovrascrittura delle tue modifiche durante il prossimo aggiornamento automatico.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Comunque esegui il downgrade",
   "autoUpdate.pluginDowngradeWarning.exclude": "Escludi dall'aggiornamento automatico",
   "autoUpdate.pluginDowngradeWarning.title": "Downgrade del plugin",
+  "autoUpdate.scope": "Ambito",
+  "autoUpdate.scopeMode.all": "Tutto",
+  "autoUpdate.scopeMode.exclude": "Escludi selezionato",
   "autoUpdate.specifyPluginsToUpdate": "Specifica i plugin da aggiornare",
   "autoUpdate.strategy.disabled.description": "I plugin non si aggiorneranno automaticamente",
   "autoUpdate.strategy.disabled.name": "Disabile",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Aggiornare",
   "detailPanel.operation.updateTooltip": "Aggiorna per accedere ai modelli più recenti.",
   "detailPanel.operation.viewDetail": "vedi dettagli",
+  "detailPanel.operation.viewReadme": "Visualizza README",
   "detailPanel.serviceOk": "Servizio OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} INCLUSO",
   "detailPanel.switchVersion": "Versione switch",
@@ -173,6 +183,7 @@
   "installModal.back": "Indietro",
   "installModal.cancel": "Annulla",
   "installModal.close": "Chiudere",
+  "installModal.dropIntegrationToInstall": "Rilascia qui il pacchetto dell'integrazione per installarlo",
   "installModal.dropPluginToInstall": "Rilascia qui il pacchetto del plug-in per installarlo",
   "installModal.fromTrustSource": "Assicurati di installare i plug-in solo da una <trustSource>fonte attendibile</trustSource>.",
   "installModal.install": "Installare",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Installa il plugin",
   "installModal.installWarning": "Questo plugin non è consentito essere installato.",
   "installModal.installedSuccessfully": "Installazione riuscita",
+  "installModal.installedSuccessfullyCountDesc": "Le seguenti {{num}} integrazioni sono state installate con successo.",
   "installModal.installedSuccessfullyDesc": "Il plug-in è stato installato correttamente.",
+  "installModal.installedSuccessfullyWithPageDesc": "L'integrazione è stata installata con successo. Puoi trovarla nella pagina <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Installazione...",
   "installModal.labels.package": "Pacco",
   "installModal.labels.repository": "Deposito",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Sto per installare i seguenti plugin {{num}}",
   "installModal.uploadFailed": "Caricamento non riuscito",
   "installModal.uploadingPackage": "Caricamento di {{packageName}}...",
+  "installModal.viewDetails": "Visualizza dettagli",
   "installPlugin": "Installa il plugin",
+  "list.noAgentStrategyFound": "Nessuna strategia agente trovata",
+  "list.noExtensionFound": "Nessuna estensione trovata",
   "list.noInstalled": "Nessun plug-in installato",
+  "list.noTriggerFound": "Nessun trigger trovato",
   "list.notFound": "Nessun plugin trovato",
   "list.source.github": "Installa da GitHub",
   "list.source.local": "Installa dal file del pacchetto locale",
   "list.source.marketplace": "Installa da Marketplace",
+  "marketplace.allPlugins": "Tutte le integrazioni",
   "marketplace.and": "e",
+  "marketplace.becomePartner": "Diventa un partner",
   "marketplace.difyMarketplace": "Mercato Dify",
   "marketplace.discover": "Scoprire",
   "marketplace.empower": "Potenzia lo sviluppo dell'intelligenza artificiale",
   "marketplace.moreFrom": "Altro da Marketplace",
-  "marketplace.noPluginFound": "Nessun plug-in trovato",
+  "marketplace.noPluginFound": "Nessuna integrazione trovata",
   "marketplace.partnerTip": "Verificato da un partner Dify",
+  "marketplace.pluginsHeroSubtitle": "Usa integrazioni create dalla community per potenziare lo sviluppo della tua IA.",
+  "marketplace.pluginsHeroTitle": "Scopri. Estendi. Costruisci.",
   "marketplace.pluginsResult": "{{num}} risultati",
   "marketplace.sortBy": "Ordina per",
   "marketplace.sortOption.firstReleased": "Prima pubblicazione",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Verificato da Dify",
   "marketplace.viewMore": "Vedi di più",
   "metadata.title": "Plugin",
+  "pluginDevelopmentGuide": "Guida allo sviluppo delle integrazioni",
   "pluginInfoModal.packageName": "Pacco",
   "pluginInfoModal.release": "Rilascio",
   "pluginInfoModal.repository": "Deposito",
   "pluginInfoModal.title": "Informazioni sul plugin",
+  "pluginPublishGuide": "Guida alla pubblicazione delle integrazioni",
   "privilege.admins": "Amministratori",
+  "privilege.configurePermissionsInSettings": "Vai su Impostazioni > Ruoli e autorizzazioni per configurare le autorizzazioni delle integrazioni.",
   "privilege.everyone": "Ciascuno",
+  "privilege.noDebugPermissionTooltip": "Non hai l'autorizzazione per eseguire il debug delle integrazioni",
+  "privilege.noInstallPermissionTooltip": "Non hai l'autorizzazione per installare e gestire le integrazioni",
   "privilege.noone": "Nessuno",
+  "privilege.permissions": "Autorizzazioni",
+  "privilege.quickWhoCanDebug": "Chi può eseguire il debug?",
+  "privilege.quickWhoCanInstall": "Chi può installare e gestire?",
   "privilege.title": "Preferenze del plugin",
   "privilege.whoCanDebug": "Chi può eseguire il debug dei plugin?",
   "privilege.whoCanInstall": "Chi può installare e gestire i plugin?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Nessun README disponibile",
   "readmeInfo.title": "LEGGIMI",
   "requestAPlugin": "Richiedi un plugin",
+  "requestSubmit": "Richiedi o pubblica",
   "search": "Ricerca",
   "searchCategories": "Cerca Categorie",
   "searchInMarketplace": "Cerca nel Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Installazione dei plugin {{installingLength}}, {{successLength}} successo.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Guida alla pubblicazione dei modelli",
   "upgrade.close": "Chiudere",
   "upgrade.description": "Sto per installare il seguente plugin",
   "upgrade.successfulTitle": "Installazione riuscita",
diff --git a/web/i18n/ja-JP/permission-keys.json b/web/i18n/ja-JP/permission-keys.json
index c4d67d83c9b..7c6c0c5e12a 100644
--- a/web/i18n/ja-JP/permission-keys.json
+++ b/web/i18n/ja-JP/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "アプリ公開とバージョン管理",
   "app.acl.test_and_run": "アプリのテストと使用",
   "app.acl.view_layout": "オーケストレーションページの読み取り専用",
-  "app.create_and_management": "アプリの作成と、自分が作成したアプリの管理",
+  "app.create_and_management": "アプリを作成",
   "app.tag.manage": "アプリタグを管理",
   "app_library.access": "アプリライブラリにアクセス",
   "billing.manage": "サブスクリプションプランを変更",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "ナレッジベース検索リコール",
   "dataset.acl.use": "ナレッジベースにドキュメントを追加",
   "dataset.api_key.manage": "ナレッジベース API キーを管理",
-  "dataset.create_and_management": "ナレッジベースの作成と、自分が作成したナレッジベースの管理",
+  "dataset.create_and_management": "ナレッジベースを作成",
   "dataset.external.connect": "外部ナレッジベースに接続",
   "dataset.tag.manage": "ナレッジベースタグを管理",
   "mcp.manage": "MCPを管理",
diff --git a/web/i18n/ja-JP/permission.json b/web/i18n/ja-JP/permission.json
index e38e07d5b06..7620cb5e91f 100644
--- a/web/i18n/ja-JP/permission.json
+++ b/web/i18n/ja-JP/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "この権限セットの名前、説明、付与される権限を表示します。",
   "permissionSet.modal.view.dataset.title": "ナレッジベース権限セットを表示",
   "permissionSet.nameLabel": "権限セット名",
-  "permissionSet.namePlaceholder": "例: DSL をエクスポート可能",
+  "permissionSet.namePlaceholder": "例: 運用権限セット",
   "permissionSet.permissions": "権限",
   "role.addRole": "ロールを作成",
   "role.copyMembersDescription_one": "「{{name}}」は {{count}} 人のメンバーに割り当てられています。新しいロールのコピーに同じメンバーを含めますか？",
diff --git a/web/i18n/ja-JP/plugin.json b/web/i18n/ja-JP/plugin.json
index 31fe611c242..9e828f8fd29 100644
--- a/web/i18n/ja-JP/plugin.json
+++ b/web/i18n/ja-JP/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "OAuth認証を使用する",
   "auth.whoCanUse": "誰が使えるのか",
   "auth.workspaceDefault": "ワークスペースのデフォルト",
+  "autoUpdate.autoUpdate": "自動更新",
+  "autoUpdate.autoUpdateSettings": "自動更新設定",
   "autoUpdate.automaticUpdates": "自動更新",
   "autoUpdate.changeTimezone": "タイムゾーンを変更するには、<setTimezone>設定</setTimezone>に移動してください。",
   "autoUpdate.excludeUpdate": "以下の{{num}}プラグインは自動更新されません",
+  "autoUpdate.excludeUpdate_one": "以下の{{num}}プラグインは自動更新されません",
+  "autoUpdate.excludeUpdate_other": "以下の{{num}}プラグインは自動更新されません",
   "autoUpdate.nextUpdateTime": "次の自動更新: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "プラグインが見つかりませんでした",
   "autoUpdate.noPluginPlaceholder.noInstalled": "プラグインがインストールされていません",
   "autoUpdate.operation.clearAll": "すべてクリア",
   "autoUpdate.operation.select": "プラグインを選択する",
   "autoUpdate.partialUPdate": "以下の{{num}}プラグインのみが自動更新されます",
+  "autoUpdate.partialUPdate_one": "以下の{{num}}プラグインのみが自動更新されます",
+  "autoUpdate.partialUPdate_other": "以下の{{num}}プラグインのみが自動更新されます",
   "autoUpdate.pluginDowngradeWarning.description": "このプラグインは現在、自動更新が有効です。バージョンをダウングレードすると、次回の自動更新中に変更が上書きされる可能性があります。",
   "autoUpdate.pluginDowngradeWarning.downgrade": "とにかくダウングレードする",
   "autoUpdate.pluginDowngradeWarning.exclude": "自動更新から除外する",
   "autoUpdate.pluginDowngradeWarning.title": "プラグインのダウングレード",
+  "autoUpdate.scope": "範囲",
+  "autoUpdate.scopeMode.all": "すべて",
+  "autoUpdate.scopeMode.exclude": "選択したものを除外する",
   "autoUpdate.specifyPluginsToUpdate": "更新するプラグインを指定してください",
   "autoUpdate.strategy.disabled.description": "プラグインは自動更新されません",
   "autoUpdate.strategy.disabled.name": "無効",
@@ -174,6 +183,7 @@
   "installModal.back": "戻る",
   "installModal.cancel": "キャンセル",
   "installModal.close": "閉じる",
+  "installModal.dropIntegrationToInstall": "プラグインパッケージをここにドロップしてインストールします",
   "installModal.dropPluginToInstall": "プラグインパッケージをここにドロップしてインストールします",
   "installModal.fromTrustSource": "<trustSource>信頼できるソース</trustSource>からのみプラグインをインストールするようにしてください。",
   "installModal.install": "インストール",
@@ -183,7 +193,9 @@
   "installModal.installPlugin": "プラグインをインストール",
   "installModal.installWarning": "このプラグインはインストールを許可されていません。",
   "installModal.installedSuccessfully": "インストールに成功しました",
+  "installModal.installedSuccessfullyCountDesc": "以下の{{num}}個のプラグインが正常にインストールされました。",
   "installModal.installedSuccessfullyDesc": "プラグインは正常にインストールされました。",
+  "installModal.installedSuccessfullyWithPageDesc": "プラグインは正常にインストールされました。<categoryName>{{categoryName}}</categoryName>ページで見つけることができます。",
   "installModal.installing": "インストール中...",
   "installModal.labels.package": "パッケージ",
   "installModal.labels.repository": "リポジトリ",
@@ -196,19 +208,27 @@
   "installModal.readyToInstallPackages": "次の{{num}}プラグインをインストールしようとしています",
   "installModal.uploadFailed": "アップロードに失敗しました",
   "installModal.uploadingPackage": "{{packageName}}をアップロード中...",
+  "installModal.viewDetails": "詳細を見る",
   "installPlugin": "プラグインをインストール",
+  "list.noAgentStrategyFound": "エージェント戦略が見つかりません",
+  "list.noExtensionFound": "拡張機能が見つかりません",
   "list.noInstalled": "プラグインはインストールされていません",
+  "list.noTriggerFound": "トリガーが見つかりません",
   "list.notFound": "プラグインが見つかりません",
   "list.source.github": "GitHub からインストール",
   "list.source.local": "ローカルパッケージファイルからインストール",
   "list.source.marketplace": "マーケットプレイスからインストール",
+  "marketplace.allPlugins": "すべてのインテグレーション",
   "marketplace.and": "と",
+  "marketplace.becomePartner": "パートナーになる",
   "marketplace.difyMarketplace": "Dify マーケットプレイス",
   "marketplace.discover": "探索",
   "marketplace.empower": "AI 開発をサポートする",
   "marketplace.moreFrom": "マーケットプレイスからのさらなる情報",
   "marketplace.noPluginFound": "インテグレーションが見つかりません",
   "marketplace.partnerTip": "このプラグインは Dify のパートナーによって認証されています",
+  "marketplace.pluginsHeroSubtitle": "コミュニティ製のインテグレーションを活用して、AI 開発を強化しましょう。",
+  "marketplace.pluginsHeroTitle": "発見する。拡張する。構築する。",
   "marketplace.pluginsResult": "{{num}} 件の結果",
   "marketplace.sortBy": "並べ替え",
   "marketplace.sortOption.firstReleased": "リリース順",
@@ -218,15 +238,21 @@
   "marketplace.verifiedTip": "このプラグインは Dify によって認証されています",
   "marketplace.viewMore": "もっと見る",
   "metadata.title": "プラグイン",
+  "pluginDevelopmentGuide": "インテグレーション開発ガイド",
   "pluginInfoModal.packageName": "パッケージ",
   "pluginInfoModal.release": "リリース",
   "pluginInfoModal.repository": "リポジトリ",
   "pluginInfoModal.title": "プラグイン情報",
+  "pluginPublishGuide": "インテグレーション公開ガイド",
   "privilege.admins": "管理者",
+  "privilege.configurePermissionsInSettings": "設定 > ロールと権限 でプラグインの権限を設定してください。",
   "privilege.everyone": "みんな",
+  "privilege.noDebugPermissionTooltip": "インテグレーションをデバッグする権限がありません",
   "privilege.noInstallPermissionTooltip": "連携管理の権限がありません",
   "privilege.noone": "誰もいない",
   "privilege.permissions": "権限",
+  "privilege.quickWhoCanDebug": "誰がデバッグできますか？",
+  "privilege.quickWhoCanInstall": "誰がインストールおよび管理できますか？",
   "privilege.title": "プラグインの設定",
   "privilege.whoCanDebug": "誰がプラグインのデバッグを行うことができますか？",
   "privilege.whoCanInstall": "誰がプラグインをインストールして管理できますか？",
@@ -236,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "READMEは利用できません",
   "readmeInfo.title": "リードミー",
   "requestAPlugin": "プラグインをリクエスト",
+  "requestSubmit": "リクエストまたは公開",
   "search": "検索",
   "searchCategories": "検索カテゴリ",
   "searchInMarketplace": "マーケットプレイスで検索",
@@ -261,6 +288,7 @@
   "task.installingWithSuccess": "{{installingLength}}個のプラグインをインストール中、{{successLength}}個成功しました。",
   "task.runningPlugins": "インストール中のプラグイン",
   "task.successPlugins": "インストール済みのプラグイン",
+  "templatePublishingGuide": "テンプレート公開ガイド",
   "upgrade.close": "閉じる",
   "upgrade.description": "次のプラグインをインストールしようとしています",
   "upgrade.successfulTitle": "インストールに成功しました",
diff --git a/web/i18n/ko-KR/dataset-pipeline.json b/web/i18n/ko-KR/dataset-pipeline.json
index 7e6804719c3..dd11dac48f6 100644
--- a/web/i18n/ko-KR/dataset-pipeline.json
+++ b/web/i18n/ko-KR/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "이 작업은 영구적입니다. 이전 방법으로 되돌릴 수 없습니다. 변환을 확인하시기 바랍니다.",
   "conversion.confirm.title": "확인",
   "conversion.descriptionChunk1": "이제 문서 처리에 지식 파이프라인을 사용하도록 기존 기술 자료를 변환할 수 있습니다",
-  "conversion.descriptionChunk2": "— 마켓플레이스의 플러그인에 액세스할 수 있는 보다 개방적이고 유연한 접근 방식입니다. 이렇게 하면 향후 모든 문서에 새로운 처리 방법이 적용됩니다.",
+  "conversion.descriptionChunk2": " — 마켓플레이스의 플러그인에 액세스할 수 있는 보다 개방적이고 유연한 접근 방식입니다. 이렇게 하면 향후 모든 문서에 새로운 처리 방법이 적용됩니다.",
   "conversion.errorMessage": "데이터 세트를 파이프라인으로 변환하지 못했습니다.",
   "conversion.successMessage": "데이터 세트를 파이프라인으로 성공적으로 변환했습니다.",
   "conversion.title": "지식 파이프라인으로 변환",
diff --git a/web/i18n/ko-KR/permission-keys.json b/web/i18n/ko-KR/permission-keys.json
index 0a703735b65..363dee55a35 100644
--- a/web/i18n/ko-KR/permission-keys.json
+++ b/web/i18n/ko-KR/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "앱 게시 및 버전 관리",
   "app.acl.test_and_run": "앱 테스트 및 사용",
   "app.acl.view_layout": "읽기 전용 오케스트레이션 페이지",
-  "app.create_and_management": "앱 생성 및 직접 만든 앱 관리",
+  "app.create_and_management": "앱 생성",
   "app.tag.manage": "앱 태그 관리",
   "app_library.access": "앱 라이브러리 접근",
   "billing.manage": "구독 플랜 변경",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "지식 베이스 검색",
   "dataset.acl.use": "지식 베이스에 문서 추가",
   "dataset.api_key.manage": "지식 베이스 API 키 관리",
-  "dataset.create_and_management": "지식 베이스 생성 및 직접 만든 지식 베이스 관리",
+  "dataset.create_and_management": "지식 베이스 생성",
   "dataset.external.connect": "외부 지식 베이스 연결",
   "dataset.tag.manage": "지식 베이스 태그 관리",
   "mcp.manage": "MCP 관리",
diff --git a/web/i18n/ko-KR/permission.json b/web/i18n/ko-KR/permission.json
index 73f8b48dcfa..92446230511 100644
--- a/web/i18n/ko-KR/permission.json
+++ b/web/i18n/ko-KR/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "이 권한 집합의 이름, 설명 및 부여된 권한을 봅니다.",
   "permissionSet.modal.view.dataset.title": "지식 베이스 권한 집합 보기",
   "permissionSet.nameLabel": "권한 집합 이름",
-  "permissionSet.namePlaceholder": "예: DSL 내보내기 가능",
+  "permissionSet.namePlaceholder": "예: 운영 권한 세트",
   "permissionSet.permissions": "권한",
   "role.addRole": "역할 생성",
   "role.copyMembersDescription_one": "\"{{name}}\"이(가) {{count}}명의 멤버에게 할당되어 있습니다. 새 역할 복사본에 동일한 멤버를 포함하시겠습니까?",
diff --git a/web/i18n/ko-KR/plugin.json b/web/i18n/ko-KR/plugin.json
index 7e202a67ba7..62b51478852 100644
--- a/web/i18n/ko-KR/plugin.json
+++ b/web/i18n/ko-KR/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "OAuth 인증 사용하기",
   "auth.whoCanUse": "사용할 수 있는 사용자",
   "auth.workspaceDefault": "작업 공간 기본값",
+  "autoUpdate.autoUpdate": "자동 업데이트",
+  "autoUpdate.autoUpdateSettings": "자동 업데이트 설정",
   "autoUpdate.automaticUpdates": "자동 업데이트",
   "autoUpdate.changeTimezone": "시간대를 변경하려면 <setTimezone>설정</setTimezone>으로 이동하세요.",
   "autoUpdate.excludeUpdate": "다음 {{num}} 플러그인은 자동 업데이트되지 않습니다.",
+  "autoUpdate.excludeUpdate_one": "다음 {{num}} 플러그인은 자동 업데이트되지 않습니다.",
+  "autoUpdate.excludeUpdate_other": "다음 {{num}} 플러그인은 자동 업데이트되지 않습니다.",
   "autoUpdate.nextUpdateTime": "다음 자동 업데이트: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "플러그인이 없습니다.",
   "autoUpdate.noPluginPlaceholder.noInstalled": "설치된 플러그인이 없습니다.",
   "autoUpdate.operation.clearAll": "모두 지우기",
   "autoUpdate.operation.select": "플러그인을 선택하세요",
   "autoUpdate.partialUPdate": "다음 {{num}} 플러그인만 자동 업데이트됩니다.",
+  "autoUpdate.partialUPdate_one": "다음 {{num}} 플러그인만 자동 업데이트됩니다.",
+  "autoUpdate.partialUPdate_other": "다음 {{num}} 플러그인만 자동 업데이트됩니다.",
   "autoUpdate.pluginDowngradeWarning.description": "이 플러그인은 현재 자동 업데이트가 활성화되어 있습니다. 버전을 다운그레이드하면 다음 자동 업데이트 중에 변경 사항이 덮어써질 수 있습니다.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "어쨌든 다운그레이드",
   "autoUpdate.pluginDowngradeWarning.exclude": "자동 업데이트에서 제외",
   "autoUpdate.pluginDowngradeWarning.title": "플러그인 다운그레이드",
+  "autoUpdate.scope": "범위",
+  "autoUpdate.scopeMode.all": "모두",
+  "autoUpdate.scopeMode.exclude": "선택한 항목 제외",
   "autoUpdate.specifyPluginsToUpdate": "업데이트할 플러그인을 지정하십시오.",
   "autoUpdate.strategy.disabled.description": "플러그인이 자동으로 업데이트되지 않습니다.",
   "autoUpdate.strategy.disabled.name": "비활성화",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "업데이트",
   "detailPanel.operation.updateTooltip": "최신 모델에 액세스하려면 업데이트하세요.",
   "detailPanel.operation.viewDetail": "자세히보기",
+  "detailPanel.operation.viewReadme": "README 보기",
   "detailPanel.serviceOk": "서비스 정상",
   "detailPanel.strategyNum": "{{num}} {{strategy}} 포함",
   "detailPanel.switchVersion": "스위치 버전",
@@ -173,6 +183,7 @@
   "installModal.back": "뒤로",
   "installModal.cancel": "취소",
   "installModal.close": "닫기",
+  "installModal.dropIntegrationToInstall": "플러그인 패키지를 여기에 놓아 설치하십시오.",
   "installModal.dropPluginToInstall": "플러그인 패키지를 여기에 놓아 설치하십시오.",
   "installModal.fromTrustSource": "<trustSource>신뢰할 수 있는 출처</trustSource>의 플러그인만 설치하도록 하세요.",
   "installModal.install": "설치",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "플러그인 설치",
   "installModal.installWarning": "이 플러그인은 설치할 수 없습니다.",
   "installModal.installedSuccessfully": "설치 성공",
+  "installModal.installedSuccessfullyCountDesc": "다음 {{num}} 플러그인이 성공적으로 설치되었습니다.",
   "installModal.installedSuccessfullyDesc": "플러그인이 성공적으로 설치되었습니다.",
+  "installModal.installedSuccessfullyWithPageDesc": "플러그인이 성공적으로 설치되었습니다. <categoryName>{{categoryName}}</categoryName> 페이지에서 찾을 수 있습니다.",
   "installModal.installing": "설치...",
   "installModal.labels.package": "패키지",
   "installModal.labels.repository": "저장소",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "다음 {{num}} 플러그인을 설치하려고 합니다.",
   "installModal.uploadFailed": "업로드 실패",
   "installModal.uploadingPackage": "{{packageName}} 업로드 중...",
+  "installModal.viewDetails": "세부 정보 보기",
   "installPlugin": "플러그인 설치",
+  "list.noAgentStrategyFound": "에이전트 전략을 찾을 수 없습니다.",
+  "list.noExtensionFound": "확장을 찾을 수 없습니다.",
   "list.noInstalled": "설치된 플러그인이 없습니다.",
+  "list.noTriggerFound": "트리거를 찾을 수 없습니다.",
   "list.notFound": "플러그인을 찾을 수 없습니다.",
   "list.source.github": "GitHub 에서 설치",
   "list.source.local": "로컬 패키지 파일에서 설치",
   "list.source.marketplace": "마켓플레이스에서 설치",
+  "marketplace.allPlugins": "모든 플러그인",
   "marketplace.and": "그리고",
+  "marketplace.becomePartner": "파트너 되기",
   "marketplace.difyMarketplace": "Dify 마켓플레이스",
   "marketplace.discover": "발견하다",
   "marketplace.empower": "AI 개발 역량 강화",
   "marketplace.moreFrom": "Marketplace 에서 더 보기",
   "marketplace.noPluginFound": "플러그인을 찾을 수 없습니다.",
   "marketplace.partnerTip": "Dify 파트너에 의해 확인됨",
+  "marketplace.pluginsHeroSubtitle": "커뮤니티에서 제작한 플러그인을 사용하여 AI 개발을 강화하세요.",
+  "marketplace.pluginsHeroTitle": "발견하고. 확장하고. 구축하세요.",
   "marketplace.pluginsResult": "{{num}} 결과",
   "marketplace.sortBy": "정렬",
   "marketplace.sortOption.firstReleased": "첫 출시",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Dify 에 의해 확인됨",
   "marketplace.viewMore": "더보기",
   "metadata.title": "플러그인",
+  "pluginDevelopmentGuide": "플러그인 개발 가이드",
   "pluginInfoModal.packageName": "패키지",
   "pluginInfoModal.release": "릴리스",
   "pluginInfoModal.repository": "저장소",
   "pluginInfoModal.title": "플러그인 정보",
+  "pluginPublishGuide": "플러그인 게시 가이드",
   "privilege.admins": "관리자",
+  "privilege.configurePermissionsInSettings": "설정 > 역할 및 권한으로 이동하여 플러그인 권한을 구성하세요.",
   "privilege.everyone": "모두",
+  "privilege.noDebugPermissionTooltip": "플러그인을 디버깅할 권한이 없습니다.",
+  "privilege.noInstallPermissionTooltip": "플러그인을 설치하고 관리할 권한이 없습니다.",
   "privilege.noone": "아무도 없어",
+  "privilege.permissions": "권한",
+  "privilege.quickWhoCanDebug": "누가 디버깅할 수 있나요?",
+  "privilege.quickWhoCanInstall": "누가 설치하고 관리할 수 있나요?",
   "privilege.title": "플러그인 기본 설정",
   "privilege.whoCanDebug": "누가 플러그인을 디버깅할 수 있나요?",
   "privilege.whoCanInstall": "누가 플러그인을 설치하고 관리할 수 있습니까?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "사용 가능한 README가 없습니다",
   "readmeInfo.title": "읽어보기",
   "requestAPlugin": "플러그인을 요청하세요",
+  "requestSubmit": "요청 또는 게시",
   "search": "검색",
   "searchCategories": "검색 카테고리",
   "searchInMarketplace": "Marketplace 에서 검색",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "{{installingLength}} 플러그인 설치, {{successLength}} 성공.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "템플릿 게시 가이드",
   "upgrade.close": "닫기",
   "upgrade.description": "다음 플러그인을 설치하려고 합니다.",
   "upgrade.successfulTitle": "설치 성공",
diff --git a/web/i18n/nl-NL/dataset-pipeline.json b/web/i18n/nl-NL/dataset-pipeline.json
index 7f461b48dd3..c771b8000df 100644
--- a/web/i18n/nl-NL/dataset-pipeline.json
+++ b/web/i18n/nl-NL/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "This action is permanent. You won't be able to revert to the previous method.Please confirm to convert.",
   "conversion.confirm.title": "Confirmation",
   "conversion.descriptionChunk1": "You can now convert your existing knowledge base to use the Knowledge Pipeline for document processing",
-  "conversion.descriptionChunk2": " — a more open and flexible approach with access to plugins from our marketplace. This will apply the new processing method to all future documents.",
+  "conversion.descriptionChunk2": " — a more open and flexible approach with access to integrations from the Marketplace. This will apply the new processing method to all future documents.",
   "conversion.errorMessage": "Failed to convert the dataset to a pipeline",
   "conversion.successMessage": "Successfully converted the dataset to a pipeline",
   "conversion.title": "Convert to Knowledge Pipeline",
diff --git a/web/i18n/nl-NL/permission-keys.json b/web/i18n/nl-NL/permission-keys.json
index 685ac79d194..b9a21ae620f 100644
--- a/web/i18n/nl-NL/permission-keys.json
+++ b/web/i18n/nl-NL/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "App publiceren en versiebeheer",
   "app.acl.test_and_run": "App testen en gebruiken",
   "app.acl.view_layout": "Alleen-lezen orkestratiepagina",
-  "app.create_and_management": "Apps maken en door jou gemaakte apps beheren",
+  "app.create_and_management": "Apps maken",
   "app.tag.manage": "App-tags beheren",
   "app_library.access": "Toegang tot App-bibliotheek",
   "billing.manage": "Abonnementen wijzigen",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Kennisbank ophalen",
   "dataset.acl.use": "Documenten toevoegen aan kennisbank",
   "dataset.api_key.manage": "API-sleutels van kennisbank beheren",
-  "dataset.create_and_management": "Kennisbanken maken en door jou gemaakte kennisbanken beheren",
+  "dataset.create_and_management": "Kennisbanken maken",
   "dataset.external.connect": "Externe kennisbanken verbinden",
   "dataset.tag.manage": "Kennisbank-tags beheren",
   "mcp.manage": "MCP beheren",
diff --git a/web/i18n/nl-NL/permission.json b/web/i18n/nl-NL/permission.json
index 44f8ec4384c..efbe7ab66a5 100644
--- a/web/i18n/nl-NL/permission.json
+++ b/web/i18n/nl-NL/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Bekijk de naam, beschrijving en verleende rechten voor deze rechtenset.",
   "permissionSet.modal.view.dataset.title": "Kennisbank-rechtenset bekijken",
   "permissionSet.nameLabel": "Naam van rechtenset",
-  "permissionSet.namePlaceholder": "bijv. Kan DSL exporteren",
+  "permissionSet.namePlaceholder": "bijv. Machtigingenset voor operations",
   "permissionSet.permissions": "Rechten",
   "role.addRole": "Rollen maken",
   "role.copyMembersDescription_one": "\"{{name}}\" is toegewezen aan {{count}} lid. Wil je dat de nieuwe rolkopie hetzelfde lid bevat?",
diff --git a/web/i18n/nl-NL/plugin.json b/web/i18n/nl-NL/plugin.json
index 723477771da..9429fd3f6a4 100644
--- a/web/i18n/nl-NL/plugin.json
+++ b/web/i18n/nl-NL/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Use OAuth Authorization",
   "auth.whoCanUse": "Wie kan gebruiken",
   "auth.workspaceDefault": "Workspace Default",
+  "autoUpdate.autoUpdate": "Automatisch bijwerken",
+  "autoUpdate.autoUpdateSettings": "Instellingen voor automatisch bijwerken",
   "autoUpdate.automaticUpdates": "Automatic updates",
   "autoUpdate.changeTimezone": "To change time zone, go to <setTimezone>Settings</setTimezone>",
   "autoUpdate.excludeUpdate": "The following {{num}} plugins will not auto-update",
+  "autoUpdate.excludeUpdate_one": "De volgende {{num}} plugin wordt niet automatisch bijgewerkt",
+  "autoUpdate.excludeUpdate_other": "De volgende {{num}} plugins worden niet automatisch bijgewerkt",
   "autoUpdate.nextUpdateTime": "Next auto-update: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "No plugins were found",
   "autoUpdate.noPluginPlaceholder.noInstalled": "No plugins installed",
   "autoUpdate.operation.clearAll": "Clear all",
   "autoUpdate.operation.select": "Select plugins",
   "autoUpdate.partialUPdate": "Only the following {{num}} plugins will auto-update",
+  "autoUpdate.partialUPdate_one": "Alleen de volgende {{num}} plugin wordt automatisch bijgewerkt",
+  "autoUpdate.partialUPdate_other": "Alleen de volgende {{num}} plugins worden automatisch bijgewerkt",
   "autoUpdate.pluginDowngradeWarning.description": "Auto-update is currently enabled for this plugin. Downgrading the version may cause your changes to be overwritten during the next automatic update.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Downgrade anyway",
   "autoUpdate.pluginDowngradeWarning.exclude": "Exclude from auto-update",
   "autoUpdate.pluginDowngradeWarning.title": "Plugin Downgrade",
+  "autoUpdate.scope": "Bereik",
+  "autoUpdate.scopeMode.all": "Alle",
+  "autoUpdate.scopeMode.exclude": "Geselecteerde uitsluiten",
   "autoUpdate.specifyPluginsToUpdate": "Specify plugins to update",
   "autoUpdate.strategy.disabled.description": "Plugins will not auto-update",
   "autoUpdate.strategy.disabled.name": "Disabled",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Update",
   "detailPanel.operation.updateTooltip": "Werk bij voor toegang tot de nieuwste modellen.",
   "detailPanel.operation.viewDetail": "View Detail",
+  "detailPanel.operation.viewReadme": "README bekijken",
   "detailPanel.serviceOk": "Service OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} INCLUDED",
   "detailPanel.switchVersion": "Switch Version",
@@ -173,6 +183,7 @@
   "installModal.back": "Back",
   "installModal.cancel": "Cancel",
   "installModal.close": "Close",
+  "installModal.dropIntegrationToInstall": "Sleep het pluginpakket hierheen om te installeren",
   "installModal.dropPluginToInstall": "Drop plugin package here to install",
   "installModal.fromTrustSource": "Please make sure that you only install plugins from a <trustSource>trusted source</trustSource>.",
   "installModal.install": "Install",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Install Plugin",
   "installModal.installWarning": "This plugin is not allowed to be installed.",
   "installModal.installedSuccessfully": "Installation successful",
+  "installModal.installedSuccessfullyCountDesc": "De volgende {{num}} plugins zijn succesvol geïnstalleerd.",
   "installModal.installedSuccessfullyDesc": "The plugin has been installed successfully.",
+  "installModal.installedSuccessfullyWithPageDesc": "De plugin is succesvol geïnstalleerd. Je vindt deze op de <categoryName>{{categoryName}}</categoryName>-pagina.",
   "installModal.installing": "Installing...",
   "installModal.labels.package": "Package",
   "installModal.labels.repository": "Repository",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "About to install the following {{num}} plugins",
   "installModal.uploadFailed": "Upload failed",
   "installModal.uploadingPackage": "Uploading {{packageName}}...",
+  "installModal.viewDetails": "Details bekijken",
   "installPlugin": "Plugin installeren",
+  "list.noAgentStrategyFound": "Geen Agent Strategy gevonden",
+  "list.noExtensionFound": "Geen Extension gevonden",
   "list.noInstalled": "No plugins installed",
+  "list.noTriggerFound": "Geen Trigger gevonden",
   "list.notFound": "No plugins found",
   "list.source.github": "Install from GitHub",
   "list.source.local": "Install from Local Package File",
   "list.source.marketplace": "Install from Marketplace",
+  "marketplace.allPlugins": "Alle plugins",
   "marketplace.and": "and",
+  "marketplace.becomePartner": "Word partner",
   "marketplace.difyMarketplace": "Dify Marketplace",
   "marketplace.discover": "Discover",
   "marketplace.empower": "Empower your AI development",
   "marketplace.moreFrom": "More from Marketplace",
-  "marketplace.noPluginFound": "No plugin found",
+  "marketplace.noPluginFound": "Geen plugin gevonden",
   "marketplace.partnerTip": "Verified by a Dify partner",
+  "marketplace.pluginsHeroSubtitle": "Gebruik door de community gebouwde plugins om je AI-ontwikkeling te versterken.",
+  "marketplace.pluginsHeroTitle": "Ontdek. Breid uit. Bouw.",
   "marketplace.pluginsResult": "{{num}} results",
   "marketplace.sortBy": "Sort by",
   "marketplace.sortOption.firstReleased": "First Released",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Verified by Dify",
   "marketplace.viewMore": "View more",
   "metadata.title": "Plugins",
+  "pluginDevelopmentGuide": "Handleiding voor pluginontwikkeling",
   "pluginInfoModal.packageName": "Package",
   "pluginInfoModal.release": "Release",
   "pluginInfoModal.repository": "Repository",
   "pluginInfoModal.title": "Plugin info",
+  "pluginPublishGuide": "Handleiding voor pluginpublicatie",
   "privilege.admins": "Admins",
+  "privilege.configurePermissionsInSettings": "Ga naar Instellingen > Rollen & Rechten om pluginrechten te configureren.",
   "privilege.everyone": "Everyone",
+  "privilege.noDebugPermissionTooltip": "Je hebt geen toestemming om plugins te debuggen",
+  "privilege.noInstallPermissionTooltip": "Je hebt geen toestemming om plugins te installeren en beheren",
   "privilege.noone": "No one",
+  "privilege.permissions": "Rechten",
+  "privilege.quickWhoCanDebug": "Wie kan debuggen?",
+  "privilege.quickWhoCanInstall": "Wie kan installeren en beheren?",
   "privilege.title": "Plugin Preferences",
   "privilege.whoCanDebug": "Who can debug plugins?",
   "privilege.whoCanInstall": "Who can install and manage plugins?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "No README available",
   "readmeInfo.title": "README",
   "requestAPlugin": "Een plugin aanvragen",
+  "requestSubmit": "Aanvragen of publiceren",
   "search": "Zoeken",
   "searchCategories": "Categorieën zoeken",
   "searchInMarketplace": "Zoeken in Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Installing {{installingLength}} plugins, {{successLength}} success.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Handleiding voor templatepublicatie",
   "upgrade.close": "Close",
   "upgrade.description": "About to install the following plugin",
   "upgrade.successfulTitle": "Install successful",
diff --git a/web/i18n/pl-PL/dataset-pipeline.json b/web/i18n/pl-PL/dataset-pipeline.json
index 033796cbffa..f70de83f1c6 100644
--- a/web/i18n/pl-PL/dataset-pipeline.json
+++ b/web/i18n/pl-PL/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "To działanie jest trwałe. Nie będzie można powrócić do poprzedniej metody. Potwierdź, aby przekonwertować.",
   "conversion.confirm.title": "Potwierdzenie",
   "conversion.descriptionChunk1": "Teraz możesz przekonwertować istniejącą bazę wiedzy tak, aby używała potoku wiedzy do przetwarzania dokumentów",
-  "conversion.descriptionChunk2": "— bardziej otwarte i elastyczne podejście z dostępem do wtyczek z naszego rynku. Spowoduje to zastosowanie nowej metody przetwarzania do wszystkich przyszłych dokumentów.",
+  "conversion.descriptionChunk2": " — bardziej otwarte i elastyczne podejście z dostępem do integracji z Marketplace. Spowoduje to zastosowanie nowej metody przetwarzania do wszystkich przyszłych dokumentów.",
   "conversion.errorMessage": "Nie można przekonwertować zestawu danych na potok",
   "conversion.successMessage": "Pomyślnie przekonwertowano zestaw danych na potok",
   "conversion.title": "Konwertuj na potok wiedzy",
diff --git a/web/i18n/pl-PL/permission-keys.json b/web/i18n/pl-PL/permission-keys.json
index 7b151edac91..8854ba92135 100644
--- a/web/i18n/pl-PL/permission-keys.json
+++ b/web/i18n/pl-PL/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Publikowanie aplikacji i zarządzanie wersjami",
   "app.acl.test_and_run": "Testuj i używaj aplikacji",
   "app.acl.view_layout": "Strona orkiestracji tylko do odczytu",
-  "app.create_and_management": "Twórz aplikacje i zarządzaj utworzonymi przez siebie aplikacjami",
+  "app.create_and_management": "Twórz aplikacje",
   "app.tag.manage": "Zarządzaj tagami aplikacji",
   "app_library.access": "Dostęp do Biblioteki aplikacji",
   "billing.manage": "Zmień plany subskrypcji",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Wyszukiwanie w bazie wiedzy",
   "dataset.acl.use": "Dodaj dokumenty do bazy wiedzy",
   "dataset.api_key.manage": "Zarządzaj kluczami API bazy wiedzy",
-  "dataset.create_and_management": "Twórz bazy wiedzy i zarządzaj utworzonymi przez siebie bazami wiedzy",
+  "dataset.create_and_management": "Twórz bazy wiedzy",
   "dataset.external.connect": "Połącz zewnętrzne bazy wiedzy",
   "dataset.tag.manage": "Zarządzaj tagami bazy wiedzy",
   "mcp.manage": "Zarządzaj MCP",
diff --git a/web/i18n/pl-PL/permission.json b/web/i18n/pl-PL/permission.json
index aea644c8133..712aeea239c 100644
--- a/web/i18n/pl-PL/permission.json
+++ b/web/i18n/pl-PL/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Wyświetl nazwę, opis i uprawnienia przyznane dla tego zestawu uprawnień.",
   "permissionSet.modal.view.dataset.title": "Wyświetl zestaw uprawnień bazy wiedzy",
   "permissionSet.nameLabel": "Nazwa zestawu uprawnień",
-  "permissionSet.namePlaceholder": "np. Może eksportować DSL",
+  "permissionSet.namePlaceholder": "np. Zestaw uprawnień operacyjnych",
   "permissionSet.permissions": "Uprawnienia",
   "role.addRole": "Twórz role",
   "role.copyMembersDescription_one": "\"{{name}}\" jest przypisana do {{count}} członka. Czy chcesz, aby nowa kopia roli zawierała tego samego członka?",
diff --git a/web/i18n/pl-PL/plugin.json b/web/i18n/pl-PL/plugin.json
index d577b331976..40ba6e90a70 100644
--- a/web/i18n/pl-PL/plugin.json
+++ b/web/i18n/pl-PL/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Użyj autoryzacji OAuth",
   "auth.whoCanUse": "Kto może skorzystać",
   "auth.workspaceDefault": "Domyślna przestrzeń robocza",
+  "autoUpdate.autoUpdate": "Automatyczna aktualizacja",
+  "autoUpdate.autoUpdateSettings": "Ustawienia automatycznej aktualizacji",
   "autoUpdate.automaticUpdates": "Automatyczne aktualizacje",
   "autoUpdate.changeTimezone": "Aby zmienić strefę czasową, przejdź do <setTimezone>Ustawienia</setTimezone>",
   "autoUpdate.excludeUpdate": "Następujące {{num}} wtyczki nie będą aktualizować się automatycznie",
+  "autoUpdate.excludeUpdate_one": "Następująca {{num}} wtyczka nie będzie aktualizować się automatycznie",
+  "autoUpdate.excludeUpdate_other": "Następujące {{num}} wtyczki nie będą aktualizować się automatycznie",
   "autoUpdate.nextUpdateTime": "Następna automatyczna aktualizacja: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Nie znaleziono wtyczek",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Brak zainstalowanych wtyczek",
   "autoUpdate.operation.clearAll": "Wyczyść wszystko",
   "autoUpdate.operation.select": "Wybierz wtyczki",
   "autoUpdate.partialUPdate": "Tylko następujące {{num}} wtyczki będą się automatycznie aktualizować",
+  "autoUpdate.partialUPdate_one": "Tylko następująca {{num}} wtyczka będzie się automatycznie aktualizować",
+  "autoUpdate.partialUPdate_other": "Tylko następujące {{num}} wtyczki będą się automatycznie aktualizować",
   "autoUpdate.pluginDowngradeWarning.description": "Automatyczna aktualizacja jest obecnie włączona dla tej wtyczki. Obniżenie wersji może spowodować, że twoje zmiany zostaną nadpisane podczas następnej automatycznej aktualizacji.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Zrób downgrade tak czy inaczej",
   "autoUpdate.pluginDowngradeWarning.exclude": "Wyłącz z automatycznej aktualizacji",
   "autoUpdate.pluginDowngradeWarning.title": "Obniżenie wersji wtyczki",
+  "autoUpdate.scope": "Zakres",
+  "autoUpdate.scopeMode.all": "Wszystkie",
+  "autoUpdate.scopeMode.exclude": "Wyłącz wybrane",
   "autoUpdate.specifyPluginsToUpdate": "Określ wtyczki do zaktualizowania",
   "autoUpdate.strategy.disabled.description": "Wtyczki nie będą się automatycznie aktualizować",
   "autoUpdate.strategy.disabled.name": "Niepełnosprawny",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Aktualizacja",
   "detailPanel.operation.updateTooltip": "Zaktualizuj, aby uzyskać dostęp do najnowszych modeli.",
   "detailPanel.operation.viewDetail": "Pokaż szczegóły",
+  "detailPanel.operation.viewReadme": "Wyświetl README",
   "detailPanel.serviceOk": "Serwis OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} ZAWARTE",
   "detailPanel.switchVersion": "Wersja przełącznika",
@@ -173,6 +183,7 @@
   "installModal.back": "Wstecz",
   "installModal.cancel": "Anuluj",
   "installModal.close": "Zamykać",
+  "installModal.dropIntegrationToInstall": "Upuść pakiet integracji tutaj, aby zainstalować",
   "installModal.dropPluginToInstall": "Upuść pakiet wtyczek tutaj, aby zainstalować",
   "installModal.fromTrustSource": "Upewnij się, że instalujesz wtyczki tylko z <trustSource>zaufanego źródła</trustSource>.",
   "installModal.install": "Instalować",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Zainstaluj wtyczkę",
   "installModal.installWarning": "Ten plugin nie może być zainstalowany.",
   "installModal.installedSuccessfully": "Instalacja powiodła się",
+  "installModal.installedSuccessfullyCountDesc": "Następujące {{num}} wtyczki zostały pomyślnie zainstalowane.",
   "installModal.installedSuccessfullyDesc": "Wtyczka została pomyślnie zainstalowana.",
+  "installModal.installedSuccessfullyWithPageDesc": "Wtyczka została pomyślnie zainstalowana. Możesz ją znaleźć na stronie <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Instalowanie...",
   "installModal.labels.package": "Pakiet",
   "installModal.labels.repository": "Repozytorium",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Informacje o instalacji następujących wtyczek {{num}}",
   "installModal.uploadFailed": "Przekazywanie nie powiodło się",
   "installModal.uploadingPackage": "Przesyłanie {{packageName}}...",
+  "installModal.viewDetails": "Pokaż szczegóły",
   "installPlugin": "Zainstaluj wtyczkę",
+  "list.noAgentStrategyFound": "Nie znaleziono strategii agenta",
+  "list.noExtensionFound": "Nie znaleziono rozszerzenia",
   "list.noInstalled": "Brak zainstalowanych wtyczek",
+  "list.noTriggerFound": "Nie znaleziono czynnika wywołującego",
   "list.notFound": "Nie znaleziono wtyczek",
   "list.source.github": "Instalowanie z usługi GitHub",
   "list.source.local": "Zainstaluj z lokalnego pliku pakietu",
   "list.source.marketplace": "Instalowanie z Marketplace",
+  "marketplace.allPlugins": "Wszystkie integracje",
   "marketplace.and": "i",
+  "marketplace.becomePartner": "Zostań partnerem",
   "marketplace.difyMarketplace": "Rynek Dify",
   "marketplace.discover": "Odkryć",
   "marketplace.empower": "Zwiększ możliwości rozwoju sztucznej inteligencji",
   "marketplace.moreFrom": "Więcej z Marketplace",
-  "marketplace.noPluginFound": "Nie znaleziono wtyczki",
+  "marketplace.noPluginFound": "Nie znaleziono integracji",
   "marketplace.partnerTip": "Zweryfikowane przez partnera Dify",
+  "marketplace.pluginsHeroSubtitle": "Korzystaj z integracji tworzonych przez społeczność, aby wspierać rozwój swojej sztucznej inteligencji.",
+  "marketplace.pluginsHeroTitle": "Odkrywaj. Rozszerzaj. Twórz.",
   "marketplace.pluginsResult": "{{num}} wyniki",
   "marketplace.sortBy": "Czarne miasto",
   "marketplace.sortOption.firstReleased": "Po raz pierwszy wydany",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Zweryfikowane przez Dify",
   "marketplace.viewMore": "Zobacz więcej",
   "metadata.title": "Wtyczki",
+  "pluginDevelopmentGuide": "Przewodnik tworzenia integracji",
   "pluginInfoModal.packageName": "Pakiet",
   "pluginInfoModal.release": "Zwolnić",
   "pluginInfoModal.repository": "Repozytorium",
   "pluginInfoModal.title": "Informacje o wtyczce",
+  "pluginPublishGuide": "Przewodnik publikowania integracji",
   "privilege.admins": "Administratorzy",
+  "privilege.configurePermissionsInSettings": "Przejdź do Ustawienia > Role i uprawnienia, aby skonfigurować uprawnienia wtyczek.",
   "privilege.everyone": "Każdy",
+  "privilege.noDebugPermissionTooltip": "Nie masz uprawnień do debugowania integracji",
+  "privilege.noInstallPermissionTooltip": "Nie masz uprawnień do instalowania integracji i zarządzania nimi",
   "privilege.noone": "Nikt",
+  "privilege.permissions": "Uprawnienia",
+  "privilege.quickWhoCanDebug": "Kto może debugować?",
+  "privilege.quickWhoCanInstall": "Kto może instalować i zarządzać?",
   "privilege.title": "Preferencje wtyczek",
   "privilege.whoCanDebug": "Kto może debugować wtyczki?",
   "privilege.whoCanInstall": "Kto może instalować wtyczki i nimi zarządzać?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Brak dostępnego pliku README",
   "readmeInfo.title": "PRZECZYTAJMNIE",
   "requestAPlugin": "Poproś o wtyczkę",
+  "requestSubmit": "Poproś lub opublikuj",
   "search": "Szukać",
   "searchCategories": "Kategorie wyszukiwania",
   "searchInMarketplace": "Wyszukiwanie w Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Instalacja wtyczek {{installingLength}}, {{successLength}} powodzenie.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Przewodnik publikowania szablonów",
   "upgrade.close": "Zamykać",
   "upgrade.description": "Informacje o instalacji następującej wtyczki",
   "upgrade.successfulTitle": "Instalacja powiodła się",
diff --git a/web/i18n/pt-BR/dataset-pipeline.json b/web/i18n/pt-BR/dataset-pipeline.json
index 8e3ebde8595..c7431d0aba8 100644
--- a/web/i18n/pt-BR/dataset-pipeline.json
+++ b/web/i18n/pt-BR/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Esta ação é permanente. Você não poderá reverter para o método anterior. Por favor, confirme para converter.",
   "conversion.confirm.title": "Confirmação",
   "conversion.descriptionChunk1": "Agora você pode converter sua base de conhecimento existente para usar o Pipeline de Conhecimento para processamento de documentos",
-  "conversion.descriptionChunk2": "— uma abordagem mais aberta e flexível com acesso a plugins do nosso mercado. Isso aplicará o novo método de processamento a todos os documentos futuros.",
+  "conversion.descriptionChunk2": " — uma abordagem mais aberta e flexível com acesso a integrações do Marketplace. Isso aplicará o novo método de processamento a todos os documentos futuros.",
   "conversion.errorMessage": "Falha ao converter o conjunto de dados em um pipeline",
   "conversion.successMessage": "Converteu com êxito o conjunto de dados em um pipeline",
   "conversion.title": "Converter em pipeline de conhecimento",
diff --git a/web/i18n/pt-BR/permission-keys.json b/web/i18n/pt-BR/permission-keys.json
index 2b23db09971..09d623193f6 100644
--- a/web/i18n/pt-BR/permission-keys.json
+++ b/web/i18n/pt-BR/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Publicação de aplicativo e gerenciamento de versões",
   "app.acl.test_and_run": "Testar e usar aplicativo",
   "app.acl.view_layout": "Página de orquestração somente leitura",
-  "app.create_and_management": "Criar aplicativos e gerenciar os aplicativos que você criou",
+  "app.create_and_management": "Criar aplicativos",
   "app.tag.manage": "Gerenciar tags de aplicativo",
   "app_library.access": "Acessar a Biblioteca de Aplicativos",
   "billing.manage": "Alterar planos de assinatura",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Recuperação do Conhecimento",
   "dataset.acl.use": "Adicionar documentos ao Conhecimento",
   "dataset.api_key.manage": "Gerenciar chaves de API do Conhecimento",
-  "dataset.create_and_management": "Criar Conhecimentos e gerenciar os Conhecimentos que você criou",
+  "dataset.create_and_management": "Criar Conhecimentos",
   "dataset.external.connect": "Conectar Conhecimentos externos",
   "dataset.tag.manage": "Gerenciar tags do Conhecimento",
   "mcp.manage": "Gerenciar MCP",
diff --git a/web/i18n/pt-BR/permission.json b/web/i18n/pt-BR/permission.json
index 3b403cc5bd7..8a32b538fd4 100644
--- a/web/i18n/pt-BR/permission.json
+++ b/web/i18n/pt-BR/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Visualize o nome, a descrição e as permissões concedidas para este conjunto de permissões.",
   "permissionSet.modal.view.dataset.title": "Visualizar conjunto de permissões de Conhecimento",
   "permissionSet.nameLabel": "Nome do conjunto de permissões",
-  "permissionSet.namePlaceholder": "ex.: Pode exportar DSL",
+  "permissionSet.namePlaceholder": "ex.: Conjunto de permissões de operações",
   "permissionSet.permissions": "Permissões",
   "role.addRole": "Criar funções",
   "role.copyMembersDescription_one": "\"{{name}}\" está atribuída a {{count}} membro. Você deseja que a cópia da nova função inclua o mesmo membro?",
diff --git a/web/i18n/pt-BR/plugin.json b/web/i18n/pt-BR/plugin.json
index 681ec3d3451..3c031fc7c0c 100644
--- a/web/i18n/pt-BR/plugin.json
+++ b/web/i18n/pt-BR/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Use a autorização OAuth",
   "auth.whoCanUse": "Quem pode usar",
   "auth.workspaceDefault": "Espaço de trabalho padrão",
+  "autoUpdate.autoUpdate": "Atualização automática",
+  "autoUpdate.autoUpdateSettings": "Configurações de atualização automática",
   "autoUpdate.automaticUpdates": "Atualizações automáticas",
   "autoUpdate.changeTimezone": "Para mudar o fuso horário, vá para <setTimezone>Configurações</setTimezone>",
   "autoUpdate.excludeUpdate": "Os seguintes {{num}} plugins não serão atualizados automaticamente",
+  "autoUpdate.excludeUpdate_one": "A seguinte {{num}} integração não será atualizada automaticamente",
+  "autoUpdate.excludeUpdate_other": "As seguintes {{num}} integrações não serão atualizadas automaticamente",
   "autoUpdate.nextUpdateTime": "Próxima atualização automática: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Nenhum plugin foi encontrado.",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Nenhum plugin instalado",
   "autoUpdate.operation.clearAll": "Limpar tudo",
   "autoUpdate.operation.select": "Selecionar plugins",
   "autoUpdate.partialUPdate": "Apenas os seguintes {{num}} plugins serão atualizados automaticamente",
+  "autoUpdate.partialUPdate_one": "Apenas a seguinte {{num}} integração será atualizada automaticamente",
+  "autoUpdate.partialUPdate_other": "Apenas as seguintes {{num}} integrações serão atualizadas automaticamente",
   "autoUpdate.pluginDowngradeWarning.description": "A atualização automática está atualmente habilitada para este plugin. Reverter a versão pode causar a sobrescrição de suas alterações durante a próxima atualização automática.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Descer de nível de qualquer forma",
   "autoUpdate.pluginDowngradeWarning.exclude": "Excluir da atualização automática",
   "autoUpdate.pluginDowngradeWarning.title": "Rebaixamento do Plugin",
+  "autoUpdate.scope": "Escopo",
+  "autoUpdate.scopeMode.all": "Todos",
+  "autoUpdate.scopeMode.exclude": "Excluir selecionados",
   "autoUpdate.specifyPluginsToUpdate": "Especifique os plugins a serem atualizados",
   "autoUpdate.strategy.disabled.description": "Os plugins não atualizarão automaticamente",
   "autoUpdate.strategy.disabled.name": "Desativado",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Atualização",
   "detailPanel.operation.updateTooltip": "Atualize para acessar os modelos mais recentes.",
   "detailPanel.operation.viewDetail": "Ver detalhes",
+  "detailPanel.operation.viewReadme": "Ver README",
   "detailPanel.serviceOk": "Serviço OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} INCLUSO",
   "detailPanel.switchVersion": "Versão do Switch",
@@ -173,6 +183,7 @@
   "installModal.back": "Voltar",
   "installModal.cancel": "Cancelar",
   "installModal.close": "Fechar",
+  "installModal.dropIntegrationToInstall": "Solte o pacote de integração aqui para instalar",
   "installModal.dropPluginToInstall": "Solte o pacote de plug-in aqui para instalar",
   "installModal.fromTrustSource": "Certifique-se de instalar apenas plug-ins de uma <trustSource>fonte confiável</trustSource>.",
   "installModal.install": "Instalar",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Instale o plugin",
   "installModal.installWarning": "Este plugin não é permitido ser instalado.",
   "installModal.installedSuccessfully": "Instalação bem-sucedida",
+  "installModal.installedSuccessfullyCountDesc": "As seguintes {{num}} integrações foram instaladas com sucesso.",
   "installModal.installedSuccessfullyDesc": "O plugin foi instalado com sucesso.",
+  "installModal.installedSuccessfullyWithPageDesc": "A integração foi instalada com sucesso. Você pode encontrá-la na página <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Instalar...",
   "installModal.labels.package": "Pacote",
   "installModal.labels.repository": "Repositório",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Prestes a instalar os seguintes plugins {{num}}",
   "installModal.uploadFailed": "Falha no upload",
   "installModal.uploadingPackage": "Carregando {{packageName}} ...",
+  "installModal.viewDetails": "Ver detalhes",
   "installPlugin": "Instale o plugin",
+  "list.noAgentStrategyFound": "Nenhuma Estratégia do Agente encontrada",
+  "list.noExtensionFound": "Nenhuma Extensão encontrada",
   "list.noInstalled": "Nenhum plug-in instalado",
+  "list.noTriggerFound": "Nenhum Gatilho encontrado",
   "list.notFound": "Nenhum plugin encontrado",
   "list.source.github": "Instalar do GitHub",
   "list.source.local": "Instalar a partir do arquivo de pacote local",
   "list.source.marketplace": "Instalar do Marketplace",
+  "marketplace.allPlugins": "Todas as integrações",
   "marketplace.and": "e",
+  "marketplace.becomePartner": "Torne-se um parceiro",
   "marketplace.difyMarketplace": "Mercado Dify",
   "marketplace.discover": "Descobrir",
   "marketplace.empower": "Capacite seu desenvolvimento de IA",
   "marketplace.moreFrom": "Mais do Marketplace",
-  "marketplace.noPluginFound": "Nenhum plugin encontrado",
+  "marketplace.noPluginFound": "Nenhuma integração encontrada",
   "marketplace.partnerTip": "Verificado por um parceiro da Dify",
+  "marketplace.pluginsHeroSubtitle": "Use integrações criadas pela comunidade para impulsionar seu desenvolvimento de IA.",
+  "marketplace.pluginsHeroTitle": "Descubra. Estenda. Construa.",
   "marketplace.pluginsResult": "{{num}} resultados",
   "marketplace.sortBy": "Ordenar por",
   "marketplace.sortOption.firstReleased": "Lançado pela primeira vez",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Verificado pelo Dify",
   "marketplace.viewMore": "Ver mais",
   "metadata.title": "Plugins",
+  "pluginDevelopmentGuide": "Guia de desenvolvimento de integrações",
   "pluginInfoModal.packageName": "Pacote",
   "pluginInfoModal.release": "Soltar",
   "pluginInfoModal.repository": "Repositório",
   "pluginInfoModal.title": "Informações do plugin",
+  "pluginPublishGuide": "Guia de publicação de integrações",
   "privilege.admins": "Administradores",
+  "privilege.configurePermissionsInSettings": "Vá para Configurações > Funções e Permissões para configurar as permissões de integração.",
   "privilege.everyone": "Todos",
+  "privilege.noDebugPermissionTooltip": "Você não tem permissão para depurar integrações",
+  "privilege.noInstallPermissionTooltip": "Você não tem permissão para instalar e gerenciar integrações",
   "privilege.noone": "Ninguém",
+  "privilege.permissions": "Permissões",
+  "privilege.quickWhoCanDebug": "Quem pode depurar?",
+  "privilege.quickWhoCanInstall": "Quem pode instalar e gerenciar?",
   "privilege.title": "Preferências de plug-ins",
   "privilege.whoCanDebug": "Quem pode depurar plugins?",
   "privilege.whoCanInstall": "Quem pode instalar e gerenciar plugins?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Nenhum README disponível",
   "readmeInfo.title": "LEIA-ME",
   "requestAPlugin": "Solicitar um plugin",
+  "requestSubmit": "Solicitar ou publicar",
   "search": "Procurar",
   "searchCategories": "Categorias de pesquisa",
   "searchInMarketplace": "Pesquisar no Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Instalando plugins {{installingLength}}, {{successLength}} sucesso.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Guia de publicação de modelos",
   "upgrade.close": "Fechar",
   "upgrade.description": "Prestes a instalar o seguinte plugin",
   "upgrade.successfulTitle": "Instalação bem-sucedida",
diff --git a/web/i18n/ro-RO/dataset-pipeline.json b/web/i18n/ro-RO/dataset-pipeline.json
index 420889e71ee..3ff3de2cef1 100644
--- a/web/i18n/ro-RO/dataset-pipeline.json
+++ b/web/i18n/ro-RO/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Această acțiune este permanentă. Nu veți putea reveni la metoda anterioară. Vă rugăm să confirmați pentru a converti.",
   "conversion.confirm.title": "Confirmare",
   "conversion.descriptionChunk1": "Acum puteți converti baza de cunoștințe existentă pentru a utiliza Pipeline de cunoștințe pentru procesarea documentelor",
-  "conversion.descriptionChunk2": "— o abordare mai deschisă și mai flexibilă, cu acces la plugin-uri de pe piața noastră. Aceasta va aplica noua metodă de procesare tuturor documentelor viitoare.",
+  "conversion.descriptionChunk2": " — o abordare mai deschisă și mai flexibilă, cu acces la plugin-uri din Marketplace. Aceasta va aplica noua metodă de procesare tuturor documentelor viitoare.",
   "conversion.errorMessage": "Nu s-a reușit să se convertească setul de date într-o conductă",
   "conversion.successMessage": "Conversia cu succes a setului de date într-o conductă",
   "conversion.title": "Conversia în Knowledge Pipeline",
diff --git a/web/i18n/ro-RO/permission-keys.json b/web/i18n/ro-RO/permission-keys.json
index 1d7de2be2a3..cdb49270e3b 100644
--- a/web/i18n/ro-RO/permission-keys.json
+++ b/web/i18n/ro-RO/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Publicarea aplicației și gestionarea versiunilor",
   "app.acl.test_and_run": "Testează și utilizează aplicația",
   "app.acl.view_layout": "Pagină de orchestrare doar pentru citire",
-  "app.create_and_management": "Creează aplicații și gestionează aplicațiile pe care le-ai creat",
+  "app.create_and_management": "Creează aplicații",
   "app.tag.manage": "Gestionează etichetele aplicațiilor",
   "app_library.access": "Accesează Biblioteca de aplicații",
   "billing.manage": "Schimbă planurile de abonament",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Recuperare din baza de cunoștințe",
   "dataset.acl.use": "Adaugă documente în baza de cunoștințe",
   "dataset.api_key.manage": "Gestionează cheile API ale bazei de cunoștințe",
-  "dataset.create_and_management": "Creează baze de cunoștințe și gestionează bazele de cunoștințe pe care le-ai creat",
+  "dataset.create_and_management": "Creează baze de cunoștințe",
   "dataset.external.connect": "Conectează baze de cunoștințe externe",
   "dataset.tag.manage": "Gestionează etichetele bazei de cunoștințe",
   "mcp.manage": "Gestionează MCP",
diff --git a/web/i18n/ro-RO/permission.json b/web/i18n/ro-RO/permission.json
index 367f8a2069c..1290f20454f 100644
--- a/web/i18n/ro-RO/permission.json
+++ b/web/i18n/ro-RO/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Vizualizează numele, descrierea și permisiunile acordate pentru acest set de permisiuni.",
   "permissionSet.modal.view.dataset.title": "Vizualizează set de permisiuni pentru baza de cunoștințe",
   "permissionSet.nameLabel": "Numele setului de permisiuni",
-  "permissionSet.namePlaceholder": "de ex. Poate exporta DSL",
+  "permissionSet.namePlaceholder": "de ex. Set de permisiuni operaționale",
   "permissionSet.permissions": "Permisiuni",
   "role.addRole": "Creează roluri",
   "role.copyMembersDescription_one": "\"{{name}}\" este atribuit unui {{count}} membru. Dorești ca noua copie a rolului să includă același membru?",
diff --git a/web/i18n/ro-RO/plugin.json b/web/i18n/ro-RO/plugin.json
index 6be16ffa66e..2181ed66e64 100644
--- a/web/i18n/ro-RO/plugin.json
+++ b/web/i18n/ro-RO/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Folosește autorizarea OAuth",
   "auth.whoCanUse": "Cine poate folosi",
   "auth.workspaceDefault": "Spațiul de lucru implicit",
+  "autoUpdate.autoUpdate": "Actualizare automată",
+  "autoUpdate.autoUpdateSettings": "Setări de actualizare automată",
   "autoUpdate.automaticUpdates": "Actualizări automate",
   "autoUpdate.changeTimezone": "Pentru a schimba fusul orar, mergi la <setTimezone>Setări</setTimezone>",
   "autoUpdate.excludeUpdate": "Următoarele {{num}} pluginuri nu se vor actualiza automat",
+  "autoUpdate.excludeUpdate_one": "Următorul {{num}} plugin nu se va actualiza automat",
+  "autoUpdate.excludeUpdate_other": "Următoarele {{num}} pluginuri nu se vor actualiza automat",
   "autoUpdate.nextUpdateTime": "Următoarea actualizare automată: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Nu au fost găsite plugin-uri",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Niciun plugin instalat",
   "autoUpdate.operation.clearAll": "Șterge tot",
   "autoUpdate.operation.select": "Selectați plugin-uri",
   "autoUpdate.partialUPdate": "Numai următoarele {{num}} pluginuri se vor actualiza automat",
+  "autoUpdate.partialUPdate_one": "Numai următorul {{num}} plugin se va actualiza automat",
+  "autoUpdate.partialUPdate_other": "Numai următoarele {{num}} pluginuri se vor actualiza automat",
   "autoUpdate.pluginDowngradeWarning.description": "Actualizarea automată este în prezent activată pentru acest plugin. Revenirea la o versiune anterioară poate provoca suprascrierea modificărilor tale în timpul următoarei actualizări automate.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Oricum, downgradează",
   "autoUpdate.pluginDowngradeWarning.exclude": "Exclude de la actualizarea automată",
   "autoUpdate.pluginDowngradeWarning.title": "Scădere a pluginului",
+  "autoUpdate.scope": "Domeniu de aplicare",
+  "autoUpdate.scopeMode.all": "Toate",
+  "autoUpdate.scopeMode.exclude": "Exclude selecția",
   "autoUpdate.specifyPluginsToUpdate": "Specificați plugin-urile de actualizat",
   "autoUpdate.strategy.disabled.description": "Pluginurile nu se vor actualiza automat",
   "autoUpdate.strategy.disabled.name": "Dezactivat",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Actualiza",
   "detailPanel.operation.updateTooltip": "Actualizați pentru a accesa cele mai recente modele.",
   "detailPanel.operation.viewDetail": "Vezi detalii",
+  "detailPanel.operation.viewReadme": "Vizualizați README",
   "detailPanel.serviceOk": "Serviciu OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} INCLUS",
   "detailPanel.switchVersion": "Versiune de comutare",
@@ -173,6 +183,7 @@
   "installModal.back": "Spate",
   "installModal.cancel": "Anula",
   "installModal.close": "Închide",
+  "installModal.dropIntegrationToInstall": "Aruncați pachetul de plugin aici pentru a instala",
   "installModal.dropPluginToInstall": "Aruncați pachetul de plugin aici pentru a instala",
   "installModal.fromTrustSource": "Vă rugăm să vă asigurați că instalați plugin-uri numai dintr-o <trustSource>sursă de încredere</trustSource>.",
   "installModal.install": "Instala",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Instalează pluginul",
   "installModal.installWarning": "Acest plugin nu este permis să fie instalat.",
   "installModal.installedSuccessfully": "Instalarea cu succes",
+  "installModal.installedSuccessfullyCountDesc": "Următoarele {{num}} pluginuri au fost instalate cu succes.",
   "installModal.installedSuccessfullyDesc": "Pluginul a fost instalat cu succes.",
+  "installModal.installedSuccessfullyWithPageDesc": "Pluginul a fost instalat cu succes. Îl puteți găsi pe pagina <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Instalarea...",
   "installModal.labels.package": "Pachet",
   "installModal.labels.repository": "Depozit",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Despre instalarea următoarelor plugin-uri {{num}}",
   "installModal.uploadFailed": "Încărcarea a eșuat",
   "installModal.uploadingPackage": "Încărcarea {{packageName}}...",
+  "installModal.viewDetails": "Vezi detalii",
   "installPlugin": "Instalează pluginul",
+  "list.noAgentStrategyFound": "Nu s-a găsit nicio strategie de agent",
+  "list.noExtensionFound": "Nu s-a găsit nicio extensie",
   "list.noInstalled": "Nu sunt instalate plugin-uri",
+  "list.noTriggerFound": "Nu s-a găsit niciun declanșator",
   "list.notFound": "Nu au fost găsite plugin-uri",
   "list.source.github": "Instalați din GitHub",
   "list.source.local": "Instalare din fișierul pachet local",
   "list.source.marketplace": "Instalează din Marketplace",
+  "marketplace.allPlugins": "Toate pluginurile",
   "marketplace.and": "și",
+  "marketplace.becomePartner": "Deveniți partener",
   "marketplace.difyMarketplace": "Piața Dify",
   "marketplace.discover": "Descoperi",
   "marketplace.empower": "Îmbunătățește-ți dezvoltarea AI",
   "marketplace.moreFrom": "Mai multe din Marketplace",
   "marketplace.noPluginFound": "Nu s-a găsit niciun plugin",
   "marketplace.partnerTip": "Verificat de un partener Dify",
+  "marketplace.pluginsHeroSubtitle": "Folosiți pluginuri create de comunitate pentru a vă alimenta dezvoltarea AI.",
+  "marketplace.pluginsHeroTitle": "Descoperă. Extinde. Construiește.",
   "marketplace.pluginsResult": "{{num}} rezultate",
   "marketplace.sortBy": "Sortează după",
   "marketplace.sortOption.firstReleased": "Prima lansare",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Verificat de Dify",
   "marketplace.viewMore": "Vezi mai mult",
   "metadata.title": "Pluginuri",
+  "pluginDevelopmentGuide": "Ghid de dezvoltare a pluginurilor",
   "pluginInfoModal.packageName": "Pachet",
   "pluginInfoModal.release": "Elibera",
   "pluginInfoModal.repository": "Depozit",
   "pluginInfoModal.title": "Informații despre plugin",
+  "pluginPublishGuide": "Ghid de publicare a pluginurilor",
   "privilege.admins": "Administratori",
+  "privilege.configurePermissionsInSettings": "Accesați Setări > Roluri și permisiuni pentru a configura permisiunile pluginurilor.",
   "privilege.everyone": "Oricine",
+  "privilege.noDebugPermissionTooltip": "Nu aveți permisiunea de a depana pluginuri",
+  "privilege.noInstallPermissionTooltip": "Nu aveți permisiunea de a instala și gestiona pluginuri",
   "privilege.noone": "Nimeni",
+  "privilege.permissions": "Permisiuni",
+  "privilege.quickWhoCanDebug": "Cine poate depana?",
+  "privilege.quickWhoCanInstall": "Cine poate instala și gestiona?",
   "privilege.title": "Preferințe plugin",
   "privilege.whoCanDebug": "Cine poate depana pluginuri?",
   "privilege.whoCanInstall": "Cine poate instala și gestiona plugin-uri?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Nu există fișier README disponibil",
   "readmeInfo.title": "Citiți-mă",
   "requestAPlugin": "Solicitați un plugin",
+  "requestSubmit": "Solicitați sau publicați",
   "search": "Căutare",
   "searchCategories": "Categorii de căutare",
   "searchInMarketplace": "Căutare în Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Instalarea pluginurilor {{installingLength}}, {{successLength}} succes.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Ghid de publicare a șabloanelor",
   "upgrade.close": "Închide",
   "upgrade.description": "Despre instalarea următorului plugin",
   "upgrade.successfulTitle": "Instalarea cu succes",
diff --git a/web/i18n/ru-RU/dataset-pipeline.json b/web/i18n/ru-RU/dataset-pipeline.json
index 2ec2da0d999..06d1b874fab 100644
--- a/web/i18n/ru-RU/dataset-pipeline.json
+++ b/web/i18n/ru-RU/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Это действие является постоянным. Вы не сможете вернуться к предыдущему методу. Пожалуйста, подтвердите конвертацию.",
   "conversion.confirm.title": "Подтверждение",
   "conversion.descriptionChunk1": "Теперь вы можете преобразовать существующую базу знаний для использования конвейера знаний для обработки документов",
-  "conversion.descriptionChunk2": "— более открытый и гибкий подход с доступом к плагинам из нашего маркетплейса. Это позволит применить новый метод обработки ко всем будущим документам.",
+  "conversion.descriptionChunk2": " — более открытый и гибкий подход с доступом к плагинам из Marketplace. Это позволит применить новый метод обработки ко всем будущим документам.",
   "conversion.errorMessage": "Не удалось преобразовать набор данных в конвейер",
   "conversion.successMessage": "Успешное преобразование набора данных в конвейер",
   "conversion.title": "Конвертация в конвейер знаний",
diff --git a/web/i18n/ru-RU/permission-keys.json b/web/i18n/ru-RU/permission-keys.json
index f49dff7216c..059c11b5b68 100644
--- a/web/i18n/ru-RU/permission-keys.json
+++ b/web/i18n/ru-RU/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Публикация приложения и управление версиями",
   "app.acl.test_and_run": "Тестирование и использование приложения",
   "app.acl.view_layout": "Страница оркестрации только для чтения",
-  "app.create_and_management": "Создание приложений и управление созданными вами приложениями",
+  "app.create_and_management": "Создание приложений",
   "app.tag.manage": "Управление тегами приложений",
   "app_library.access": "Доступ к библиотеке приложений",
   "billing.manage": "Изменение тарифных планов",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Извлечение из базы знаний",
   "dataset.acl.use": "Добавление документов в базу знаний",
   "dataset.api_key.manage": "Управление API-ключами базы знаний",
-  "dataset.create_and_management": "Создание баз знаний и управление созданными вами базами знаний",
+  "dataset.create_and_management": "Создание баз знаний",
   "dataset.external.connect": "Подключение внешних баз знаний",
   "dataset.tag.manage": "Управление тегами баз знаний",
   "mcp.manage": "Управление MCP",
diff --git a/web/i18n/ru-RU/permission.json b/web/i18n/ru-RU/permission.json
index f5a50c880dc..b90278eb907 100644
--- a/web/i18n/ru-RU/permission.json
+++ b/web/i18n/ru-RU/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Просмотрите имя, описание и предоставляемые права для этого набора прав.",
   "permissionSet.modal.view.dataset.title": "Просмотр набора прав базы знаний",
   "permissionSet.nameLabel": "Имя набора прав",
-  "permissionSet.namePlaceholder": "напр. Может экспортировать DSL",
+  "permissionSet.namePlaceholder": "напр. Набор разрешений для эксплуатации",
   "permissionSet.permissions": "Права",
   "role.addRole": "Создать роли",
   "role.copyMembersDescription_one": "\"{{name}}\" назначена {{count}} участнику. Хотите, чтобы копия новой роли включала того же участника?",
diff --git a/web/i18n/ru-RU/plugin.json b/web/i18n/ru-RU/plugin.json
index 34c8341e942..d25e50885af 100644
--- a/web/i18n/ru-RU/plugin.json
+++ b/web/i18n/ru-RU/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Используйте авторизацию OAuth",
   "auth.whoCanUse": "Кто может использовать",
   "auth.workspaceDefault": "Рабочее пространство по умолчанию",
+  "autoUpdate.autoUpdate": "Автообновление",
+  "autoUpdate.autoUpdateSettings": "Настройки автообновления",
   "autoUpdate.automaticUpdates": "Автоматические обновления",
   "autoUpdate.changeTimezone": "Чтобы изменить часовой пояс, перейдите в <setTimezone>Настройки</setTimezone>",
   "autoUpdate.excludeUpdate": "Следующие {{num}} плагины не будут обновляться автоматически",
+  "autoUpdate.excludeUpdate_one": "Следующий {{num}} плагин не будет обновляться автоматически",
+  "autoUpdate.excludeUpdate_other": "Следующие {{num}} плагины не будут обновляться автоматически",
   "autoUpdate.nextUpdateTime": "Следующее автообновление: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Плагины не найдены",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Нет установленных плагинов",
   "autoUpdate.operation.clearAll": "Очистить все",
   "autoUpdate.operation.select": "Выберите плагины",
   "autoUpdate.partialUPdate": "Только следующие {{num}} плагины будут обновляться автоматически",
+  "autoUpdate.partialUPdate_one": "Только следующий {{num}} плагин будет обновляться автоматически",
+  "autoUpdate.partialUPdate_other": "Только следующие {{num}} плагины будут обновляться автоматически",
   "autoUpdate.pluginDowngradeWarning.description": "Автообновление в данный момент включено для этого плагина. Понижение версии может привести к тому, что ваши изменения будут перезаписаны во время следующего автоматического обновления.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Все равно понизьте версию",
   "autoUpdate.pluginDowngradeWarning.exclude": "Исключить из автообновления",
   "autoUpdate.pluginDowngradeWarning.title": "Понижение версии плагина",
+  "autoUpdate.scope": "Область",
+  "autoUpdate.scopeMode.all": "Все",
+  "autoUpdate.scopeMode.exclude": "Исключить выбранное",
   "autoUpdate.specifyPluginsToUpdate": "Укажите плагины для обновления",
   "autoUpdate.strategy.disabled.description": "Плагины не будут автоматически обновляться",
   "autoUpdate.strategy.disabled.name": "Отключен",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Обновлять",
   "detailPanel.operation.updateTooltip": "Обновите для доступа к последним моделям.",
   "detailPanel.operation.viewDetail": "Подробнее",
+  "detailPanel.operation.viewReadme": "Посмотреть README",
   "detailPanel.serviceOk": "Услуга ОК",
   "detailPanel.strategyNum": "{{num}} {{strategy}} ВКЛЮЧЕННЫЙ",
   "detailPanel.switchVersion": "Версия для переключателя",
@@ -173,6 +183,7 @@
   "installModal.back": "Назад",
   "installModal.cancel": "Отмена",
   "installModal.close": "Закрывать",
+  "installModal.dropIntegrationToInstall": "Перетащите пакет плагина сюда для установки",
   "installModal.dropPluginToInstall": "Перетащите пакет плагина сюда для установки",
   "installModal.fromTrustSource": "Убедитесь, что вы устанавливаете плагины только из <trustSource>надежного источника</trustSource>.",
   "installModal.install": "Устанавливать",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Установить плагин",
   "installModal.installWarning": "Этот плагин не разрешено устанавливать.",
   "installModal.installedSuccessfully": "Установка успешна",
+  "installModal.installedSuccessfullyCountDesc": "Следующие {{num}} плагины успешно установлены.",
   "installModal.installedSuccessfullyDesc": "Плагин успешно установлен.",
+  "installModal.installedSuccessfullyWithPageDesc": "Плагин успешно установлен. Вы можете найти его на странице <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Установка...",
   "installModal.labels.package": "Пакет",
   "installModal.labels.repository": "Хранилище",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "О необходимости установки следующих плагинов {{num}}",
   "installModal.uploadFailed": "Ошибка загрузки",
   "installModal.uploadingPackage": "Загрузка {{packageName}}...",
+  "installModal.viewDetails": "Подробнее",
   "installPlugin": "Установка плагина",
+  "list.noAgentStrategyFound": "Агентская стратегия не найдена",
+  "list.noExtensionFound": "Расширение не найдено",
   "list.noInstalled": "Плагины не установлены",
+  "list.noTriggerFound": "Триггер не найден",
   "list.notFound": "Плагины не найдены",
   "list.source.github": "Установка с GitHub",
   "list.source.local": "Установка из локального файла пакета",
   "list.source.marketplace": "Установка из Marketplace",
+  "marketplace.allPlugins": "Все плагины",
   "marketplace.and": "и",
+  "marketplace.becomePartner": "Стать партнёром",
   "marketplace.difyMarketplace": "Торговая площадка Dify",
   "marketplace.discover": "Обнаруживать",
   "marketplace.empower": "Расширьте возможности разработки ИИ",
   "marketplace.moreFrom": "Больше из Marketplace",
   "marketplace.noPluginFound": "Плагин не найден",
   "marketplace.partnerTip": "Подтверждено партнером Dify",
+  "marketplace.pluginsHeroSubtitle": "Используйте плагины, созданные сообществом, чтобы ускорить разработку ИИ.",
+  "marketplace.pluginsHeroTitle": "Открывайте. Расширяйте. Создавайте.",
   "marketplace.pluginsResult": "Результаты {{num}}",
   "marketplace.sortBy": "Черный город",
   "marketplace.sortOption.firstReleased": "Впервые выпущен",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Подтверждено Dify",
   "marketplace.viewMore": "Подробнее",
   "metadata.title": "Плагины",
+  "pluginDevelopmentGuide": "Руководство по разработке плагинов",
   "pluginInfoModal.packageName": "Пакет",
   "pluginInfoModal.release": "Отпускать",
   "pluginInfoModal.repository": "Хранилище",
   "pluginInfoModal.title": "Информация о плагине",
+  "pluginPublishGuide": "Руководство по публикации плагинов",
   "privilege.admins": "Админы",
+  "privilege.configurePermissionsInSettings": "Перейдите в «Настройки» > «Роли и разрешения», чтобы настроить разрешения плагинов.",
   "privilege.everyone": "Каждый",
+  "privilege.noDebugPermissionTooltip": "У вас нет разрешения на отладку плагинов",
+  "privilege.noInstallPermissionTooltip": "У вас нет разрешения на установку плагинов и управление ими",
   "privilege.noone": "Никто",
+  "privilege.permissions": "Разрешения",
+  "privilege.quickWhoCanDebug": "Кто может отлаживать?",
+  "privilege.quickWhoCanInstall": "Кто может устанавливать и управлять?",
   "privilege.title": "Настройки плагина",
   "privilege.whoCanDebug": "Кто может отлаживать плагины?",
   "privilege.whoCanInstall": "Кто может устанавливать плагины и управлять ими?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "README недоступен",
   "readmeInfo.title": "ПРОЧТИ_МЕНЯ",
   "requestAPlugin": "Запросите плагин",
+  "requestSubmit": "Запросить или опубликовать",
   "search": "Искать",
   "searchCategories": "Поиск категорий",
   "searchInMarketplace": "Поиск в маркетплейсе",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Установка плагинов {{installingLength}}, {{successLength}} успех.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Руководство по публикации шаблонов",
   "upgrade.close": "Закрывать",
   "upgrade.description": "О программе установки следующего плагина",
   "upgrade.successfulTitle": "Установка успешна",
diff --git a/web/i18n/sl-SI/dataset-pipeline.json b/web/i18n/sl-SI/dataset-pipeline.json
index c2123636d13..834a9935573 100644
--- a/web/i18n/sl-SI/dataset-pipeline.json
+++ b/web/i18n/sl-SI/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "To dejanje je trajno. Ne boste se mogli vrniti na prejšnjo metodo. Prosimo, potrdite za pretvorbo.",
   "conversion.confirm.title": "Potrditev",
   "conversion.descriptionChunk1": "Zdaj lahko obstoječo zbirko znanja pretvorite tako, da za obdelavo dokumentov uporabljate cevovod znanja",
-  "conversion.descriptionChunk2": "- bolj odprt in prilagodljiv pristop z dostopom do vtičnikov z našega trga. To bo uporabilo novo metodo obdelave za vse prihodnje dokumente.",
+  "conversion.descriptionChunk2": " — bolj odprt in prilagodljiv pristop z dostopom do vtičnikov s Tržnice. To bo uporabilo novo metodo obdelave za vse prihodnje dokumente.",
   "conversion.errorMessage": "Pretvorba nabora podatkov v cevovod ni uspela",
   "conversion.successMessage": "Uspešno pretvorba nabora podatkov v cevovod",
   "conversion.title": "Pretvori v cevovod znanja",
diff --git a/web/i18n/sl-SI/permission-keys.json b/web/i18n/sl-SI/permission-keys.json
index 74ec9370429..0734599f931 100644
--- a/web/i18n/sl-SI/permission-keys.json
+++ b/web/i18n/sl-SI/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Objavljanje aplikacije in upravljanje različic",
   "app.acl.test_and_run": "Preizkusi in uporabi aplikacijo",
   "app.acl.view_layout": "Stran za orkestracijo samo za branje",
-  "app.create_and_management": "Ustvarjanje aplikacij in upravljanje aplikacij, ki ste jih ustvarili",
+  "app.create_and_management": "Ustvarjanje aplikacij",
   "app.tag.manage": "Upravljanje oznak aplikacij",
   "app_library.access": "Dostop do knjižnice aplikacij",
   "billing.manage": "Spremeni naročniške načrte",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Pridobivanje iz baze znanja",
   "dataset.acl.use": "Dodaj dokumente v bazo znanja",
   "dataset.api_key.manage": "Upravljanje API ključev baze znanja",
-  "dataset.create_and_management": "Ustvarjanje baz znanja in upravljanje baz znanja, ki ste jih ustvarili",
+  "dataset.create_and_management": "Ustvarjanje baz znanja",
   "dataset.external.connect": "Poveži zunanje baze znanja",
   "dataset.tag.manage": "Upravljanje oznak baze znanja",
   "mcp.manage": "Upravljanje MCP",
diff --git a/web/i18n/sl-SI/permission.json b/web/i18n/sl-SI/permission.json
index 627641c04d7..1f55ea58820 100644
--- a/web/i18n/sl-SI/permission.json
+++ b/web/i18n/sl-SI/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Oglejte si ime, opis in dovoljenja, podeljena za ta nabor dovoljenj.",
   "permissionSet.modal.view.dataset.title": "Ogled nabora dovoljenj za bazo znanja",
   "permissionSet.nameLabel": "Ime nabora dovoljenj",
-  "permissionSet.namePlaceholder": "npr. Lahko izvozi DSL",
+  "permissionSet.namePlaceholder": "npr. Nabor dovoljenj za operacije",
   "permissionSet.permissions": "Dovoljenja",
   "role.addRole": "Ustvari vloge",
   "role.copyMembersDescription_one": "\"{{name}}\" je dodeljen {{count}} članu. Ali želite, da nova kopija vloge vključuje istega člana?",
diff --git a/web/i18n/sl-SI/plugin.json b/web/i18n/sl-SI/plugin.json
index 50d1ab9e749..be30977a79c 100644
--- a/web/i18n/sl-SI/plugin.json
+++ b/web/i18n/sl-SI/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Uporabite OAuth avtentikacijo",
   "auth.whoCanUse": "Kdo lahko uporablja",
   "auth.workspaceDefault": "Privzeti delovni prostor",
+  "autoUpdate.autoUpdate": "Samodejno posodabljanje",
+  "autoUpdate.autoUpdateSettings": "Nastavitve samodejnega posodabljanja",
   "autoUpdate.automaticUpdates": "Samodejna posodobitev",
   "autoUpdate.changeTimezone": "Za spremembo časovnega pasu pojdite v <setTimezone>Nastavitve</setTimezone>",
   "autoUpdate.excludeUpdate": "Naslednjih {{num}} razširitev ne bo samodejno posodobljenih",
+  "autoUpdate.excludeUpdate_one": "Naslednji {{num}} vtičnik ne bo samodejno posodobljen",
+  "autoUpdate.excludeUpdate_other": "Naslednjih {{num}} vtičnikov ne bo samodejno posodobljenih",
   "autoUpdate.nextUpdateTime": "Naslednje samodejno posodabljanje: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Nobeni vtičniki niso bili najdeni",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Nobenih vtičnikov ni nameščenih",
   "autoUpdate.operation.clearAll": "Počisti vse",
   "autoUpdate.operation.select": "Izberi vtičnike",
   "autoUpdate.partialUPdate": "Samo naslednjih {{num}} vtičnikov se bo samodejno posodabljalo.",
+  "autoUpdate.partialUPdate_one": "Samo naslednji {{num}} vtičnik se bo samodejno posodabljal",
+  "autoUpdate.partialUPdate_other": "Samo naslednjih {{num}} vtičnikov se bo samodejno posodabljalo",
   "autoUpdate.pluginDowngradeWarning.description": "Samodejno posodabljanje je trenutno omogočeno za ta vtičnik. Zmanjšanje različice lahko povzroči, da bodo vaše spremembe prepisane med naslednjim samodejnim posodabljanjem.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Kljub temu narediti nižjo različico",
   "autoUpdate.pluginDowngradeWarning.exclude": "Izključi iz samodejnega posodabljanja",
   "autoUpdate.pluginDowngradeWarning.title": "Zmanjšanje različice vtičnika",
+  "autoUpdate.scope": "Obseg",
+  "autoUpdate.scopeMode.all": "Vse",
+  "autoUpdate.scopeMode.exclude": "Izključi izbrano",
   "autoUpdate.specifyPluginsToUpdate": "Določite vtičnike za posodobitev",
   "autoUpdate.strategy.disabled.description": "Vtičniki se ne bodo samodejno posodobili",
   "autoUpdate.strategy.disabled.name": "Onemogočeno",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Posodobitev",
   "detailPanel.operation.updateTooltip": "Posodobite za dostop do najnovejših modelov.",
   "detailPanel.operation.viewDetail": "Oglej si podrobnosti",
+  "detailPanel.operation.viewReadme": "Ogled README",
   "detailPanel.serviceOk": "Storitve so v redu",
   "detailPanel.strategyNum": "{{num}} {{strategy}} VKLJUČENO",
   "detailPanel.switchVersion": "Preklopna različica",
@@ -173,6 +183,7 @@
   "installModal.back": "Nazaj",
   "installModal.cancel": "Prekliči",
   "installModal.close": "Zapri",
+  "installModal.dropIntegrationToInstall": "Tukaj spustite paket vtičnika, da ga namestite",
   "installModal.dropPluginToInstall": "Tukaj spustite paket vtičnika, da ga namestite",
   "installModal.fromTrustSource": "Prosimo, poskrbite, da namestite le vtičnike iz <trustSource>zaupanja vrednega vira</trustSource>.",
   "installModal.install": "Namestite",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Namestite vtičnik",
   "installModal.installWarning": "Ta vtičnik ni dovoljen za namestitev.",
   "installModal.installedSuccessfully": "Namestitev uspešna",
+  "installModal.installedSuccessfullyCountDesc": "Naslednjih {{num}} vtičnikov je bilo uspešno nameščenih.",
   "installModal.installedSuccessfullyDesc": "Vtičnik je bil uspešno nameščen.",
+  "installModal.installedSuccessfullyWithPageDesc": "Vtičnik je bil uspešno nameščen. Najdete ga na strani <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Nameščanje...",
   "installModal.labels.package": "Paket",
   "installModal.labels.repository": "Shramba",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Prihajamo do namestitve naslednjih {{num}} dodatkov",
   "installModal.uploadFailed": "Nalaganje ni uspelo",
   "installModal.uploadingPackage": "Nalagam {{packageName}}...",
+  "installModal.viewDetails": "Ogled podrobnosti",
   "installPlugin": "Namestite vtičnik",
+  "list.noAgentStrategyFound": "Nobena strategija agenta ni bila najdena",
+  "list.noExtensionFound": "Nobena razširitev ni bila najdena",
   "list.noInstalled": "Nobeni vtičniki niso nameščeni.",
+  "list.noTriggerFound": "Noben sprožilec ni bil najden",
   "list.notFound": "Nobeni vtičniki niso bili najdeni.",
   "list.source.github": "Namestite iz GitHub-a",
   "list.source.local": "Namestite iz lokalne paketne datoteke",
   "list.source.marketplace": "Namestite iz tržnice",
+  "marketplace.allPlugins": "Vsi vtičniki",
   "marketplace.and": "in",
+  "marketplace.becomePartner": "Postanite partner",
   "marketplace.difyMarketplace": "Dify Marketplace",
   "marketplace.discover": "Odkrijte",
   "marketplace.empower": "Okrepite svoj razvoj AI",
   "marketplace.moreFrom": "Več iz tržnice",
   "marketplace.noPluginFound": "Nobenega vtičnika ni bilo najti.",
   "marketplace.partnerTip": "Potrjeno s strani partnerja Dify",
+  "marketplace.pluginsHeroSubtitle": "Uporabite vtičnike, ki jih je ustvarila skupnost, za pospešitev vašega razvoja AI.",
+  "marketplace.pluginsHeroTitle": "Odkrijte. Razširite. Gradite.",
   "marketplace.pluginsResult": "{{num}} rezultati",
   "marketplace.sortBy": "Razvrsti po",
   "marketplace.sortOption.firstReleased": "Prvič izdan",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Verificirano s strani Dify",
   "marketplace.viewMore": "Oglejte si več",
   "metadata.title": "Vtičniki",
+  "pluginDevelopmentGuide": "Vodnik za razvoj vtičnikov",
   "pluginInfoModal.packageName": "Paket",
   "pluginInfoModal.release": "Izdati",
   "pluginInfoModal.repository": "Shramba",
   "pluginInfoModal.title": "Informacije o vtičniku",
+  "pluginPublishGuide": "Vodnik za objavljanje vtičnikov",
   "privilege.admins": "Administratori",
+  "privilege.configurePermissionsInSettings": "Pojdite v Nastavitve > Vloge in dovoljenja za konfiguracijo dovoljenj vtičnikov.",
   "privilege.everyone": "Vsi",
+  "privilege.noDebugPermissionTooltip": "Nimate dovoljenja za odpravljanje napak v vtičnikih",
+  "privilege.noInstallPermissionTooltip": "Nimate dovoljenja za namestitev in upravljanje vtičnikov",
   "privilege.noone": "Nihče",
+  "privilege.permissions": "Dovoljenja",
+  "privilege.quickWhoCanDebug": "Kdo lahko odpravlja napake?",
+  "privilege.quickWhoCanInstall": "Kdo lahko namesti in upravlja?",
   "privilege.title": "Nastavitve vtičnika",
   "privilege.whoCanDebug": "Kdo lahko odpravi napake v vtičnikih?",
   "privilege.whoCanInstall": "Kdo lahko namesti in upravlja vtičnike?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "README ni na voljo",
   "readmeInfo.title": "PREBERIME",
   "requestAPlugin": "Zahtevajte vtičnik",
+  "requestSubmit": "Zahtevaj ali objavi",
   "search": "Iskanje",
   "searchCategories": "Išči kategorije",
   "searchInMarketplace": "Iskanje na trgu",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Namestitev {{installingLength}} dodatkov, {{successLength}} uspešnih.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Vodnik za objavljanje predlog",
   "upgrade.close": "Zapri",
   "upgrade.description": "Namestitev naslednjega vtičnika",
   "upgrade.successfulTitle": "Namestitev uspešna",
diff --git a/web/i18n/th-TH/dataset-pipeline.json b/web/i18n/th-TH/dataset-pipeline.json
index 712a5f963db..511cbacaaf8 100644
--- a/web/i18n/th-TH/dataset-pipeline.json
+++ b/web/i18n/th-TH/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "การกระทํานี้เป็นแบบถาวร คุณจะไม่สามารถเปลี่ยนกลับไปใช้วิธีการก่อนหน้านี้ได้ โปรดยืนยันการแปลง",
   "conversion.confirm.title": "การยืนยัน",
   "conversion.descriptionChunk1": "ตอนนี้คุณสามารถแปลงฐานความรู้ที่มีอยู่เพื่อใช้ไปป์ไลน์ความรู้สําหรับการประมวลผลเอกสารได้แล้ว",
-  "conversion.descriptionChunk2": "— แนวทางที่เปิดกว้างและยืดหยุ่นมากขึ้นด้วยการเข้าถึงปลั๊กอินจากตลาดของเรา การดําเนินการนี้จะใช้วิธีการประมวลผลใหม่กับเอกสารในอนาคตทั้งหมด",
+  "conversion.descriptionChunk2": " — แนวทางที่เปิดกว้างและยืดหยุ่นมากขึ้นด้วยการเข้าถึงปลั๊กอินจาก Marketplace การดําเนินการนี้จะใช้วิธีการประมวลผลใหม่กับเอกสารในอนาคตทั้งหมด",
   "conversion.errorMessage": "ไม่สามารถแปลงชุดข้อมูลเป็นไปป์ไลน์ได้",
   "conversion.successMessage": "แปลงชุดข้อมูลเป็นไปป์ไลน์เรียบร้อยแล้ว",
   "conversion.title": "แปลงเป็นไปป์ไลน์ความรู้",
diff --git a/web/i18n/th-TH/permission-keys.json b/web/i18n/th-TH/permission-keys.json
index 139287d1901..5cb9d6ef8a5 100644
--- a/web/i18n/th-TH/permission-keys.json
+++ b/web/i18n/th-TH/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "การเผยแพร่แอปและการจัดการเวอร์ชัน",
   "app.acl.test_and_run": "ทดสอบและใช้งานแอป",
   "app.acl.view_layout": "หน้าจัดวางแบบอ่านอย่างเดียว",
-  "app.create_and_management": "สร้างแอปและจัดการแอปที่คุณสร้าง",
+  "app.create_and_management": "สร้างแอป",
   "app.tag.manage": "จัดการแท็กแอป",
   "app_library.access": "เข้าถึงคลังแอป",
   "billing.manage": "เปลี่ยนแผนการสมัครสมาชิก",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "การดึงข้อมูลจากฐานความรู้",
   "dataset.acl.use": "เพิ่มเอกสารลงในฐานความรู้",
   "dataset.api_key.manage": "จัดการคีย์ API ของฐานความรู้",
-  "dataset.create_and_management": "สร้างฐานความรู้และจัดการฐานความรู้ที่คุณสร้าง",
+  "dataset.create_and_management": "สร้างฐานความรู้",
   "dataset.external.connect": "เชื่อมต่อฐานความรู้ภายนอก",
   "dataset.tag.manage": "จัดการแท็กฐานความรู้",
   "mcp.manage": "จัดการ MCP",
diff --git a/web/i18n/th-TH/permission.json b/web/i18n/th-TH/permission.json
index e52406958c9..29b152d2b11 100644
--- a/web/i18n/th-TH/permission.json
+++ b/web/i18n/th-TH/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "ดูชื่อ คําอธิบาย และสิทธิ์ที่ให้สําหรับชุดสิทธิ์นี้",
   "permissionSet.modal.view.dataset.title": "ดูชุดสิทธิ์ฐานความรู้",
   "permissionSet.nameLabel": "ชื่อชุดสิทธิ์",
-  "permissionSet.namePlaceholder": "เช่น สามารถส่งออก DSL",
+  "permissionSet.namePlaceholder": "เช่น ชุดสิทธิ์การดำเนินงาน",
   "permissionSet.permissions": "สิทธิ์",
   "role.addRole": "สร้างบทบาท",
   "role.copyMembersDescription_one": "\"{{name}}\" ถูกกําหนดให้กับสมาชิก {{count}} คน คุณต้องการให้สําเนาบทบาทใหม่รวมสมาชิกคนเดียวกันหรือไม่",
diff --git a/web/i18n/th-TH/plugin.json b/web/i18n/th-TH/plugin.json
index a5acf0e7479..fa09b838018 100644
--- a/web/i18n/th-TH/plugin.json
+++ b/web/i18n/th-TH/plugin.json
@@ -43,20 +43,29 @@
   "auth.useOAuthAuth": "ใช้การอนุญาต OAuth",
   "auth.whoCanUse": "ใครใช้ได้บ้าง",
   "auth.workspaceDefault": "พื้นที่ทำงานเริ่มต้น",
+  "autoUpdate.autoUpdate": "อัปเดตอัตโนมัติ",
+  "autoUpdate.autoUpdateSettings": "การตั้งค่าการอัปเดตอัตโนมัติ",
   "autoUpdate.automaticUpdates": "การอัปเดตอัตโนมัติ",
   "autoUpdate.changeTimezone": "ในการเปลี่ยนเขตเวลา ให้ไปที่ <setTimezone>การตั้งค่า</setTimezone>",
   "autoUpdate.excludeUpdate": "ปลั๊กอิน {{num}} ต่อไปนี้จะไม่อัพเดตอัตโนมัติ",
+  "autoUpdate.excludeUpdate_one": "ปลั๊กอิน {{num}} ต่อไปนี้จะไม่อัพเดตอัตโนมัติ",
+  "autoUpdate.excludeUpdate_other": "ปลั๊กอิน {{num}} ต่อไปนี้จะไม่อัพเดตอัตโนมัติ",
   "autoUpdate.nextUpdateTime": "การอัปเดตอัตโนมัติครั้งถัดไป: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "ไม่พบปลั๊กอิน",
   "autoUpdate.noPluginPlaceholder.noInstalled": "ไม่มีปลั๊กอินติดตั้ง",
   "autoUpdate.operation.clearAll": "ล้างทั้งหมด",
   "autoUpdate.operation.select": "เลือกปลั๊กอิน",
   "autoUpdate.partialUPdate": "ปลั๊กอิน {{num}} ตัวต่อไปนี้จะอัปเดตให้อัตโนมัติเท่านั้น",
+  "autoUpdate.partialUPdate_one": "ปลั๊กอิน {{num}} ตัวต่อไปนี้จะอัปเดตให้อัตโนมัติเท่านั้น",
+  "autoUpdate.partialUPdate_other": "ปลั๊กอิน {{num}} ตัวต่อไปนี้จะอัปเดตให้อัตโนมัติเท่านั้น",
   "autoUpdate.pluginDowngradeWarning.description": "ฟีเจอร์การอัปเดตอัตโนมัติเปิดใช้งานอยู่สำหรับปลั๊กอินนี้ การลดระดับเวอร์ชันอาจทำให้การเปลี่ยนแปลงของคุณหายไปในระหว่างการอัปเดตอัตโนมัติต่อไป",
   "autoUpdate.pluginDowngradeWarning.downgrade": "ลดระดับอยู่ดี",
   "autoUpdate.pluginDowngradeWarning.exclude": "ไม่รวมในการอัปเดตอัตโนมัติ",
   "autoUpdate.pluginDowngradeWarning.title": "การลดเวอร์ชันปลั๊กอิน",
-  "autoUpdate.specifyPluginsToUpdate": "ระบุปลั๊กอินที่จะแ atualizar",
+  "autoUpdate.scope": "ขอบเขต",
+  "autoUpdate.scopeMode.all": "ทั้งหมด",
+  "autoUpdate.scopeMode.exclude": "ยกเว้นที่เลือกไว้",
+  "autoUpdate.specifyPluginsToUpdate": "ระบุปลั๊กอินที่จะอัปเดต",
   "autoUpdate.strategy.disabled.description": "ปลั๊กอินจะไม่อัปเดตอัตโนมัติ",
   "autoUpdate.strategy.disabled.name": "ผู้พิการ",
   "autoUpdate.strategy.fixOnly.description": "การอัปเดตอัตโนมัติสำหรับเฉพาะเวอร์ชันแพทช์ (เช่น 1.0.1 → 1.0.2) การเปลี่ยนแปลงเวอร์ชันย่อยจะไม่ทำให้เกิดการอัปเดต",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "อัพเดต",
   "detailPanel.operation.updateTooltip": "อัปเดตเพื่อเข้าถึงโมเดลล่าสุด",
   "detailPanel.operation.viewDetail": "ดูรายละเอียด",
+  "detailPanel.operation.viewReadme": "ดู README",
   "detailPanel.serviceOk": "บริการตกลง",
   "detailPanel.strategyNum": "{{num}} {{strategy}} รวม",
   "detailPanel.switchVersion": "สลับเวอร์ชัน",
@@ -173,6 +183,7 @@
   "installModal.back": "ย้อนกลับ",
   "installModal.cancel": "ยกเลิก",
   "installModal.close": "ปิด",
+  "installModal.dropIntegrationToInstall": "วางแพ็คเกจปลั๊กอินที่นี่เพื่อติดตั้ง",
   "installModal.dropPluginToInstall": "วางแพ็คเกจปลั๊กอินที่นี่เพื่อติดตั้ง",
   "installModal.fromTrustSource": "โปรดตรวจสอบให้แน่ใจว่าคุณติดตั้งปลั๊กอินจาก<trustSource>แหล่งที่เชื่อถือได้</trustSource>เท่านั้น",
   "installModal.install": "ติดตั้ง",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "ติดตั้งปลั๊กอิน",
   "installModal.installWarning": "ไม่อนุญาตให้ติดตั้งปลั๊กอินนี้",
   "installModal.installedSuccessfully": "การติดตั้งสําเร็จ",
+  "installModal.installedSuccessfullyCountDesc": "ติดตั้งปลั๊กอิน {{num}} ตัวต่อไปนี้สําเร็จแล้ว",
   "installModal.installedSuccessfullyDesc": "ติดตั้งปลั๊กอินสําเร็จแล้ว",
+  "installModal.installedSuccessfullyWithPageDesc": "ติดตั้งปลั๊กอินสําเร็จแล้ว คุณสามารถค้นหาได้ในหน้า <categoryName>{{categoryName}}</categoryName>",
   "installModal.installing": "ติด ตั้ง   ",
   "installModal.labels.package": "ห่อ",
   "installModal.labels.repository": "เก็บ",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "เกี่ยวกับการติดตั้งปลั๊กอิน {{num}} ต่อไปนี้",
   "installModal.uploadFailed": "อัปโหลดล้มเหลว",
   "installModal.uploadingPackage": "กําลังอัปโหลด {{packageName}}...",
+  "installModal.viewDetails": "ดูรายละเอียด",
   "installPlugin": "ติดตั้งปลั๊กอิน",
+  "list.noAgentStrategyFound": "ไม่พบกลยุทธ์ตัวแทน",
+  "list.noExtensionFound": "ไม่พบส่วนขยาย",
   "list.noInstalled": "ไม่ได้ติดตั้งปลั๊กอิน",
+  "list.noTriggerFound": "ไม่พบทริกเกอร์",
   "list.notFound": "ไม่พบปลั๊กอิน",
   "list.source.github": "ติดตั้งจาก GitHub",
   "list.source.local": "ติดตั้งจากไฟล์แพ็คเกจในเครื่อง",
   "list.source.marketplace": "ติดตั้งจาก Marketplace",
+  "marketplace.allPlugins": "ปลั๊กอินทั้งหมด",
   "marketplace.and": "และ",
+  "marketplace.becomePartner": "เป็นพันธมิตร",
   "marketplace.difyMarketplace": "ตลาด Dify",
   "marketplace.discover": "ค้นพบ",
   "marketplace.empower": "เพิ่มศักยภาพในการพัฒนา AI ของคุณ",
   "marketplace.moreFrom": "แอปเพิ่มเติมจาก Marketplace",
   "marketplace.noPluginFound": "ไม่พบปลั๊กอิน",
   "marketplace.partnerTip": "ได้รับการตรวจสอบโดยพันธมิตรของ Dify",
+  "marketplace.pluginsHeroSubtitle": "ใช้ปลั๊กอินที่สร้างโดยชุมชนเพื่อเสริมพลังการพัฒนา AI ของคุณ",
+  "marketplace.pluginsHeroTitle": "ค้นพบ ขยาย สร้าง",
   "marketplace.pluginsResult": "{{num}} ผลลัพธ์",
   "marketplace.sortBy": "เมืองสีดํา",
   "marketplace.sortOption.firstReleased": "เปิดตัวครั้งแรก",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "ได้รับการตรวจสอบโดย Dify",
   "marketplace.viewMore": "ดูเพิ่มเติม",
   "metadata.title": "ปลั๊กอิน",
+  "pluginDevelopmentGuide": "คู่มือการพัฒนาปลั๊กอิน",
   "pluginInfoModal.packageName": "ห่อ",
   "pluginInfoModal.release": "ปล่อย",
   "pluginInfoModal.repository": "เก็บ",
   "pluginInfoModal.title": "ข้อมูลปลั๊กอิน",
+  "pluginPublishGuide": "คู่มือการเผยแพร่ปลั๊กอิน",
   "privilege.admins": "ผู้ดูแลระบบ",
+  "privilege.configurePermissionsInSettings": "ไปที่ การตั้งค่า > บทบาทและสิทธิ์ เพื่อกำหนดค่าสิทธิ์ของปลั๊กอิน",
   "privilege.everyone": "ทุกคน",
+  "privilege.noDebugPermissionTooltip": "คุณไม่มีสิทธิ์ในการดีบักปลั๊กอิน",
+  "privilege.noInstallPermissionTooltip": "คุณไม่มีสิทธิ์ในการติดตั้งและจัดการปลั๊กอิน",
   "privilege.noone": "ไม่มีใคร",
+  "privilege.permissions": "สิทธิ์",
+  "privilege.quickWhoCanDebug": "ใครสามารถดีบักได้บ้าง?",
+  "privilege.quickWhoCanInstall": "ใครสามารถติดตั้งและจัดการได้บ้าง?",
   "privilege.title": "การตั้งค่าปลั๊กอิน",
   "privilege.whoCanDebug": "ใครสามารถดีบักปลั๊กอินได้บ้าง",
   "privilege.whoCanInstall": "ใครสามารถติดตั้งและจัดการปลั๊กอินได้บ้าง",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "ไม่มีไฟล์ README",
   "readmeInfo.title": "อ่านฉัน",
   "requestAPlugin": "ขอปลั๊กอิน",
+  "requestSubmit": "ขอหรือเผยแพร่",
   "search": "ค้น",
   "searchCategories": "หมวดหมู่การค้นหา",
   "searchInMarketplace": "ค้นหาใน Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "การติดตั้งปลั๊กอิน {{installingLength}}, {{successLength}} สําเร็จ",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "คู่มือการเผยแพร่เทมเพลต",
   "upgrade.close": "ปิด",
   "upgrade.description": "เกี่ยวกับการติดตั้งปลั๊กอินต่อไปนี้",
   "upgrade.successfulTitle": "ติดตั้งสําเร็จ",
diff --git a/web/i18n/tr-TR/dataset-pipeline.json b/web/i18n/tr-TR/dataset-pipeline.json
index 3c617f3a276..d03ef8caffe 100644
--- a/web/i18n/tr-TR/dataset-pipeline.json
+++ b/web/i18n/tr-TR/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Bu eylem kalıcıdır. Önceki yönteme geri dönemezsiniz. Dönüştürmek için lütfen onaylayın.",
   "conversion.confirm.title": "Onay",
   "conversion.descriptionChunk1": "Artık mevcut bilgi bankanızı belge işleme için Bilgi İşlem Hattı'nı kullanacak şekilde dönüştürebilirsiniz",
-  "conversion.descriptionChunk2": "— Pazarımızdaki eklentilere erişim ile daha açık ve esnek bir yaklaşım. Bu, yeni işleme yöntemini gelecekteki tüm belgelere uygulayacaktır.",
+  "conversion.descriptionChunk2": " — Pazar Yeri'ndeki eklentilere erişim sağlayan, daha açık ve esnek bir yaklaşım. Bu, yeni işleme yöntemini gelecekteki tüm belgelere uygulayacaktır.",
   "conversion.errorMessage": "Veri kümesi işlem hattına dönüştürülemedi",
   "conversion.successMessage": "Veri kümesi başarıyla işlem hattına dönüştürüldü",
   "conversion.title": "Bilgi İşlem Hattına Dönüştür",
diff --git a/web/i18n/tr-TR/permission-keys.json b/web/i18n/tr-TR/permission-keys.json
index 8e2009dea25..0932407ea8f 100644
--- a/web/i18n/tr-TR/permission-keys.json
+++ b/web/i18n/tr-TR/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Uygulama yayınlama ve sürüm yönetimi",
   "app.acl.test_and_run": "Uygulamayı test et ve kullan",
   "app.acl.view_layout": "Salt okunur düzenleme sayfası",
-  "app.create_and_management": "Uygulama oluştur ve oluşturduğun uygulamaları yönet",
+  "app.create_and_management": "Uygulama oluştur",
   "app.tag.manage": "Uygulama etiketlerini yönet",
   "app_library.access": "Uygulama Kitaplığına eriş",
   "billing.manage": "Abonelik planlarını değiştir",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Bilgi tabanı geri alımı",
   "dataset.acl.use": "Bilgi tabanına belge ekle",
   "dataset.api_key.manage": "Bilgi tabanı API anahtarlarını yönet",
-  "dataset.create_and_management": "Bilgi tabanı oluştur ve oluşturduğun bilgi tabanlarını yönet",
+  "dataset.create_and_management": "Bilgi tabanı oluştur",
   "dataset.external.connect": "Harici bilgi tabanlarına bağlan",
   "dataset.tag.manage": "Bilgi tabanı etiketlerini yönet",
   "mcp.manage": "MCP yönet",
diff --git a/web/i18n/tr-TR/permission.json b/web/i18n/tr-TR/permission.json
index 86818102126..db0310a4c2b 100644
--- a/web/i18n/tr-TR/permission.json
+++ b/web/i18n/tr-TR/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Bu izin kümesi için verilen adı, açıklamayı ve izinleri görüntüleyin.",
   "permissionSet.modal.view.dataset.title": "Bilgi Tabanı izin kümesini görüntüle",
   "permissionSet.nameLabel": "İzin kümesi adı",
-  "permissionSet.namePlaceholder": "ör. DSL dışa aktarabilir",
+  "permissionSet.namePlaceholder": "ör. Operasyon izin seti",
   "permissionSet.permissions": "İzinler",
   "role.addRole": "Rol oluştur",
   "role.copyMembersDescription_one": "\"{{name}}\" {{count}} üyeye atanmış. Yeni rol kopyasının aynı üyeyi içermesini istiyor musunuz?",
diff --git a/web/i18n/tr-TR/plugin.json b/web/i18n/tr-TR/plugin.json
index e4db0c83577..080c13c0416 100644
--- a/web/i18n/tr-TR/plugin.json
+++ b/web/i18n/tr-TR/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "OAuth Yetkilendirmesi Kullan",
   "auth.whoCanUse": "Kimler kullanabilir?",
   "auth.workspaceDefault": "Çalışma Alanı Varsayılan",
+  "autoUpdate.autoUpdate": "Otomatik güncelleme",
+  "autoUpdate.autoUpdateSettings": "Otomatik Güncelleme Ayarları",
   "autoUpdate.automaticUpdates": "Otomatik güncellemeler",
   "autoUpdate.changeTimezone": "Zaman dilimini değiştirmek için <setTimezone>Ayarlar</setTimezone> sekmesine gidin",
   "autoUpdate.excludeUpdate": "Aşağıdaki {{num}} eklenti otomatik olarak güncellenmeyecek",
+  "autoUpdate.excludeUpdate_one": "Aşağıdaki {{num}} eklenti otomatik olarak güncellenmeyecek",
+  "autoUpdate.excludeUpdate_other": "Aşağıdaki {{num}} eklenti otomatik olarak güncellenmeyecek",
   "autoUpdate.nextUpdateTime": "Sonraki otomatik güncelleme: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Hiçbir eklenti bulunamadı",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Hiçbir eklenti yüklenmemiş",
   "autoUpdate.operation.clearAll": "Hepsini temizle",
   "autoUpdate.operation.select": "Eklentileri seçin",
   "autoUpdate.partialUPdate": "Sadece aşağıdaki {{num}} eklenti otomatik olarak güncellenecek",
+  "autoUpdate.partialUPdate_one": "Sadece aşağıdaki {{num}} eklenti otomatik olarak güncellenecek",
+  "autoUpdate.partialUPdate_other": "Sadece aşağıdaki {{num}} eklenti otomatik olarak güncellenecek",
   "autoUpdate.pluginDowngradeWarning.description": "Bu eklenti için otomatik güncelleme şu anda etkin. Sürümün düşürülmesi, bir sonraki otomatik güncelleme sırasında değişikliklerinizin üzerine yazılmasına neden olabilir.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Her durumda düşürme",
   "autoUpdate.pluginDowngradeWarning.exclude": "Otomatik güncellemeden hariç tut",
   "autoUpdate.pluginDowngradeWarning.title": "Eklenti Düşürme",
+  "autoUpdate.scope": "Kapsam",
+  "autoUpdate.scopeMode.all": "Tümü",
+  "autoUpdate.scopeMode.exclude": "Seçilenleri hariç tut",
   "autoUpdate.specifyPluginsToUpdate": "Güncellemek için eklentileri belirtin",
   "autoUpdate.strategy.disabled.description": "Eklentiler otomatik olarak güncellenmeyecek",
   "autoUpdate.strategy.disabled.name": "Devre Dışı",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Güncelle",
   "detailPanel.operation.updateTooltip": "En son modellere erişmek için güncelleyin.",
   "detailPanel.operation.viewDetail": "Pazar Yeri'nde görüntüle",
+  "detailPanel.operation.viewReadme": "README'yi Görüntüle",
   "detailPanel.serviceOk": "Servis Tamam",
   "detailPanel.strategyNum": "{{num}} {{strategy}} DAHİL",
   "detailPanel.switchVersion": "Sürümü Değiştir",
@@ -173,6 +183,7 @@
   "installModal.back": "Geri",
   "installModal.cancel": "İptal",
   "installModal.close": "Kapat",
+  "installModal.dropIntegrationToInstall": "Yüklemek için eklenti paketini buraya bırakın",
   "installModal.dropPluginToInstall": "Yüklemek için eklenti paketini buraya bırakın",
   "installModal.fromTrustSource": "Lütfen eklentileri yalnızca <trustSource>güvenilir bir kaynaktan</trustSource> yüklediğinizden emin olun.",
   "installModal.install": "Yükle",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Eklentiyi Yükle",
   "installModal.installWarning": "Bu eklentinin yüklenmesine izin verilmemektedir.",
   "installModal.installedSuccessfully": "Yükleme başarılı",
+  "installModal.installedSuccessfullyCountDesc": "Aşağıdaki {{num}} eklenti başarıyla yüklendi.",
   "installModal.installedSuccessfullyDesc": "Eklenti başarıyla yüklendi.",
+  "installModal.installedSuccessfullyWithPageDesc": "Eklenti başarıyla yüklendi. Bunu <categoryName>{{categoryName}}</categoryName> sayfasında bulabilirsiniz.",
   "installModal.installing": "Yükleme...",
   "installModal.labels.package": "Paket",
   "installModal.labels.repository": "Depo",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Aşağıdaki {{num}} eklentilerini yüklemek üzereyim",
   "installModal.uploadFailed": "Karşıya yükleme başarısız oldu",
   "installModal.uploadingPackage": "{{packageName}} yükleniyor...",
+  "installModal.viewDetails": "Ayrıntıları Görüntüle",
   "installPlugin": "Eklentiyi yükle",
+  "list.noAgentStrategyFound": "Ajan Stratejisi bulunamadı",
+  "list.noExtensionFound": "Uzantı bulunamadı",
   "list.noInstalled": "Yüklü eklenti yok",
+  "list.noTriggerFound": "Tetikleyici bulunamadı",
   "list.notFound": "Eklenti bulunamadı",
   "list.source.github": "GitHub'dan yükleyin",
   "list.source.local": "Yerel Paket Dosyasından Yükle",
   "list.source.marketplace": "Pazar Yeri'nden Yükleme",
+  "marketplace.allPlugins": "Tüm eklentiler",
   "marketplace.and": "ve",
+  "marketplace.becomePartner": "Partner Olun",
   "marketplace.difyMarketplace": "Dify Pazar Yeri",
   "marketplace.discover": "Keşfet",
   "marketplace.empower": "Yapay zeka geliştirmenizi güçlendirin",
   "marketplace.moreFrom": "Pazar Yeri'nden daha fazlası",
   "marketplace.noPluginFound": "Eklenti bulunamadı",
   "marketplace.partnerTip": "Dify partner'ı tarafından doğrulandı",
+  "marketplace.pluginsHeroSubtitle": "Yapay zeka geliştirmenizi güçlendirmek için topluluk tarafından oluşturulan eklentileri kullanın.",
+  "marketplace.pluginsHeroTitle": "Keşfet. Genişlet. Oluştur.",
   "marketplace.pluginsResult": "{{num}} sonuç",
   "marketplace.sortBy": "Sırala",
   "marketplace.sortOption.firstReleased": "İlk Çıkanlar",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Dify tarafından doğrulanmıştır.",
   "marketplace.viewMore": "Daha fazla göster",
   "metadata.title": "Eklentiler",
+  "pluginDevelopmentGuide": "Eklenti geliştirme kılavuzu",
   "pluginInfoModal.packageName": "Paket",
   "pluginInfoModal.release": "Sürüm",
   "pluginInfoModal.repository": "Depo",
   "pluginInfoModal.title": "Eklenti bilgisi",
+  "pluginPublishGuide": "Eklenti yayınlama kılavuzu",
   "privilege.admins": "Yöneticiler",
+  "privilege.configurePermissionsInSettings": "Eklenti izinlerini yapılandırmak için Ayarlar > Roller ve İzinler bölümüne gidin.",
   "privilege.everyone": "Herkes",
+  "privilege.noDebugPermissionTooltip": "Eklentilerde hata ayıklama izniniz yok",
+  "privilege.noInstallPermissionTooltip": "Eklentileri yükleme ve yönetme izniniz yok",
   "privilege.noone": "Hiç kimse",
+  "privilege.permissions": "İzinler",
+  "privilege.quickWhoCanDebug": "Kim hata ayıklayabilir?",
+  "privilege.quickWhoCanInstall": "Kim yükleyebilir ve yönetebilir?",
   "privilege.title": "Eklenti Tercihleri",
   "privilege.whoCanDebug": "Eklentilerde kimler hata ayıklayabilir?",
   "privilege.whoCanInstall": "Eklentileri kimler yükleyebilir ve yönetebilir?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "README mevcut değil",
   "readmeInfo.title": "BENİOKU",
   "requestAPlugin": "Bir eklenti iste",
+  "requestSubmit": "İste veya yayınla",
   "search": "Ara",
   "searchCategories": "Arama Kategorileri",
   "searchInMarketplace": "Pazar Yeri'nde arama yapın",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "{{installingLength}} eklentileri yükleniyor, {{successLength}} başarılı.",
   "task.runningPlugins": "Eklentiler Yükleniyor",
   "task.successPlugins": "Başarıyla Yüklenen Eklentiler",
+  "templatePublishingGuide": "Şablon yayınlama kılavuzu",
   "upgrade.close": "Kapat",
   "upgrade.description": "Aşağıdaki eklentiyi güncellemek üzeresiniz",
   "upgrade.successfulTitle": "Güncelleme başarılı",
diff --git a/web/i18n/uk-UA/dataset-pipeline.json b/web/i18n/uk-UA/dataset-pipeline.json
index fc619120076..b937bc3afc6 100644
--- a/web/i18n/uk-UA/dataset-pipeline.json
+++ b/web/i18n/uk-UA/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Ця дія є постійною. Ви не зможете повернутися до попереднього способу. Будь ласка, підтвердьте конвертацію.",
   "conversion.confirm.title": "Підтвердження",
   "conversion.descriptionChunk1": "Тепер ви можете перетворити наявну базу знань на використання Knowledge Pipeline для обробки документів",
-  "conversion.descriptionChunk2": "— більш відкритий та гнучкий підхід з доступом до плагінів з нашого маркетплейсу. Це застосує новий метод обробки до всіх майбутніх документів.",
+  "conversion.descriptionChunk2": " — більш відкритий та гнучкий підхід з доступом до плагінів з Marketplace. Це застосує новий метод обробки до всіх майбутніх документів.",
   "conversion.errorMessage": "Не вдалося перетворити набір даних у пайплайн",
   "conversion.successMessage": "Успішно перетворили набір даних у пайплайн",
   "conversion.title": "Перетворення на конвеєр знань",
diff --git a/web/i18n/uk-UA/permission-keys.json b/web/i18n/uk-UA/permission-keys.json
index 1639eb65cba..d977a2b0e61 100644
--- a/web/i18n/uk-UA/permission-keys.json
+++ b/web/i18n/uk-UA/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Публікація застосунку та керування версіями",
   "app.acl.test_and_run": "Тестувати та використовувати застосунок",
   "app.acl.view_layout": "Сторінка оркестрації лише для читання",
-  "app.create_and_management": "Створювати застосунки та керувати створеними вами застосунками",
+  "app.create_and_management": "Створювати застосунки",
   "app.tag.manage": "Керування тегами застосунків",
   "app_library.access": "Доступ до бібліотеки застосунків",
   "billing.manage": "Зміна планів підписки",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Пошук у базі знань",
   "dataset.acl.use": "Додавати документи до бази знань",
   "dataset.api_key.manage": "Керування ключами API бази знань",
-  "dataset.create_and_management": "Створювати бази знань та керувати створеними вами базами знань",
+  "dataset.create_and_management": "Створювати бази знань",
   "dataset.external.connect": "Підключати зовнішні бази знань",
   "dataset.tag.manage": "Керування тегами бази знань",
   "mcp.manage": "Керування MCP",
diff --git a/web/i18n/uk-UA/permission.json b/web/i18n/uk-UA/permission.json
index c035dbe4dfd..90a97e07dd6 100644
--- a/web/i18n/uk-UA/permission.json
+++ b/web/i18n/uk-UA/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Перегляньте назву, опис та надані дозволи для цього набору дозволів.",
   "permissionSet.modal.view.dataset.title": "Переглянути набір дозволів бази знань",
   "permissionSet.nameLabel": "Назва набору дозволів",
-  "permissionSet.namePlaceholder": "напр. Може експортувати DSL",
+  "permissionSet.namePlaceholder": "напр. Набір дозволів для експлуатації",
   "permissionSet.permissions": "Дозволи",
   "role.addRole": "Створити ролі",
   "role.copyMembersDescription_one": "\"{{name}}\" призначено {{count}} учаснику. Чи хочете ви, щоб нова копія ролі включала того самого учасника?",
diff --git a/web/i18n/uk-UA/plugin.json b/web/i18n/uk-UA/plugin.json
index 8535a7384ae..b085f6261d5 100644
--- a/web/i18n/uk-UA/plugin.json
+++ b/web/i18n/uk-UA/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Використовуйте авторизацію OAuth",
   "auth.whoCanUse": "Хто може використовувати",
   "auth.workspaceDefault": "За замовчуванням робочого простору",
+  "autoUpdate.autoUpdate": "Автоматичне оновлення",
+  "autoUpdate.autoUpdateSettings": "Налаштування автоматичного оновлення",
   "autoUpdate.automaticUpdates": "Автоматичні оновлення",
   "autoUpdate.changeTimezone": "Щоб змінити часовий пояс, перейдіть до <setTimezone>Налаштування</setTimezone>",
   "autoUpdate.excludeUpdate": "Наступні {{num}} плагіни не будуть автоматично оновлюватися",
+  "autoUpdate.excludeUpdate_one": "Наступний {{num}} плагін не буде автоматично оновлюватися",
+  "autoUpdate.excludeUpdate_other": "Наступні {{num}} плагіни не будуть автоматично оновлюватися",
   "autoUpdate.nextUpdateTime": "Наступне автоматичне оновлення: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Плагіни не були знайдені",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Жодних плагінів не встановлено",
   "autoUpdate.operation.clearAll": "Очистити все",
   "autoUpdate.operation.select": "Виберіть плагіни",
   "autoUpdate.partialUPdate": "Тільки наступні {{num}} плагіни будуть автоматично оновлюватися",
+  "autoUpdate.partialUPdate_one": "Тільки наступний {{num}} плагін буде автоматично оновлюватися",
+  "autoUpdate.partialUPdate_other": "Тільки наступні {{num}} плагіни будуть автоматично оновлюватися",
   "autoUpdate.pluginDowngradeWarning.description": "Автоматичне оновлення наразі увімкнене для цього плагіна. Пониження версії може призвести до того, що ваші зміни будуть перезаписані під час наступного автоматичного оновлення.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Все одно знизити версію",
   "autoUpdate.pluginDowngradeWarning.exclude": "Виключити з автоматичного оновлення",
   "autoUpdate.pluginDowngradeWarning.title": "Пониження плагіна",
+  "autoUpdate.scope": "Область",
+  "autoUpdate.scopeMode.all": "Всі",
+  "autoUpdate.scopeMode.exclude": "Виключити вибране",
   "autoUpdate.specifyPluginsToUpdate": "Вкажіть плагіни для оновлення",
   "autoUpdate.strategy.disabled.description": "Плагіни не будуть автоматично оновлюватися",
   "autoUpdate.strategy.disabled.name": "Вимкнено",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Оновлювати",
   "detailPanel.operation.updateTooltip": "Оновіть, щоб отримати доступ до найновіших моделей.",
   "detailPanel.operation.viewDetail": "Переглянути деталі",
+  "detailPanel.operation.viewReadme": "Переглянути README",
   "detailPanel.serviceOk": "Сервіс працює",
   "detailPanel.strategyNum": "{{num}} {{strategy}} ВКЛЮЧЕНІ",
   "detailPanel.switchVersion": "Версія перемикача",
@@ -173,6 +183,7 @@
   "installModal.back": "Задній",
   "installModal.cancel": "Скасувати",
   "installModal.close": "Закрити",
+  "installModal.dropIntegrationToInstall": "Перетягніть пакет плагіна сюди, щоб встановити",
   "installModal.dropPluginToInstall": "Перетягніть пакет плагіна сюди, щоб встановити",
   "installModal.fromTrustSource": "Будь ласка, переконайтеся, що ви встановлюєте плагіни лише з <trustSource>надійного джерела</trustSource>.",
   "installModal.install": "Інсталювати",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Встановити плагін",
   "installModal.installWarning": "Цей плагін не можна установити.",
   "installModal.installedSuccessfully": "Монтаж успішний",
+  "installModal.installedSuccessfullyCountDesc": "Наступні {{num}} плагіни успішно встановлено.",
   "installModal.installedSuccessfullyDesc": "Плагін успішно встановлено.",
+  "installModal.installedSuccessfullyWithPageDesc": "Плагін успішно встановлено. Ви можете знайти його на сторінці <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Установки...",
   "installModal.labels.package": "Пакунок",
   "installModal.labels.repository": "Сховище",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Про встановлення наступних плагінів {{num}}",
   "installModal.uploadFailed": "Не вдалося завантажити файл",
   "installModal.uploadingPackage": "Завантаження {{packageName}}...",
+  "installModal.viewDetails": "Переглянути деталі",
   "installPlugin": "Встановити плагін",
+  "list.noAgentStrategyFound": "Стратегію агента не знайдено",
+  "list.noExtensionFound": "Розширення не знайдено",
   "list.noInstalled": "Плагіни не встановлено",
+  "list.noTriggerFound": "Тригер не знайдено",
   "list.notFound": "Плагінів не знайдено",
   "list.source.github": "Встановлення з GitHub",
   "list.source.local": "Інсталяція з локального файлу пакета",
   "list.source.marketplace": "Інсталяція з Marketplace",
+  "marketplace.allPlugins": "Всі плагіни",
   "marketplace.and": "і",
+  "marketplace.becomePartner": "Стати партнером",
   "marketplace.difyMarketplace": "Dify Marketplace",
   "marketplace.discover": "Виявити",
   "marketplace.empower": "Розширюйте можливості розробки штучного інтелекту",
   "marketplace.moreFrom": "Більше від Marketplace",
   "marketplace.noPluginFound": "Плагін не знайдено",
   "marketplace.partnerTip": "Перевірено партнером Dify",
+  "marketplace.pluginsHeroSubtitle": "Використовуйте створені спільнотою плагіни для розвитку вашої розробки штучного інтелекту.",
+  "marketplace.pluginsHeroTitle": "Відкривайте. Розширюйте. Створюйте.",
   "marketplace.pluginsResult": "Результати {{num}}",
   "marketplace.sortBy": "Чорне місто",
   "marketplace.sortOption.firstReleased": "Перший реліз",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Перевірено Dify",
   "marketplace.viewMore": "Дивитись більше",
   "metadata.title": "Плагіни",
+  "pluginDevelopmentGuide": "Посібник з розробки плагінів",
   "pluginInfoModal.packageName": "Пакунок",
   "pluginInfoModal.release": "Реліз",
   "pluginInfoModal.repository": "Сховище",
   "pluginInfoModal.title": "Інформація про плагін",
+  "pluginPublishGuide": "Посібник з публікації плагінів",
   "privilege.admins": "Адміни",
+  "privilege.configurePermissionsInSettings": "Перейдіть до Налаштування > Ролі та дозволи, щоб налаштувати дозволи плагінів.",
   "privilege.everyone": "Кожен",
+  "privilege.noDebugPermissionTooltip": "У вас немає дозволу на налагодження плагінів",
+  "privilege.noInstallPermissionTooltip": "У вас немає дозволу на встановлення плагінів та керування ними",
   "privilege.noone": "Ніхто",
+  "privilege.permissions": "Дозволи",
+  "privilege.quickWhoCanDebug": "Хто може налагоджувати?",
+  "privilege.quickWhoCanInstall": "Хто може встановлювати та керувати?",
   "privilege.title": "Налаштування плагіна",
   "privilege.whoCanDebug": "Хто може налагоджувати плагіни?",
   "privilege.whoCanInstall": "Хто може встановлювати плагіни та керувати ними?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "README недоступний",
   "readmeInfo.title": "Прочитай мене",
   "requestAPlugin": "Запросити плагін",
+  "requestSubmit": "Запросити або опублікувати",
   "search": "Шукати",
   "searchCategories": "Категорії пошуку",
   "searchInMarketplace": "Пошук у Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Встановлення плагінів {{installingLength}}, успіх {{successLength}}.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Посібник з публікації шаблонів",
   "upgrade.close": "Закрити",
   "upgrade.description": "Про встановлення наступного плагіна",
   "upgrade.successfulTitle": "Установка успішна",
diff --git a/web/i18n/vi-VN/dataset-pipeline.json b/web/i18n/vi-VN/dataset-pipeline.json
index 8d5ebe11bc7..54551c6e883 100644
--- a/web/i18n/vi-VN/dataset-pipeline.json
+++ b/web/i18n/vi-VN/dataset-pipeline.json
@@ -15,7 +15,7 @@
   "conversion.confirm.content": "Hành động này là vĩnh viễn. Bạn sẽ không thể hoàn nguyên về phương pháp trước đó. Vui lòng xác nhận để chuyển đổi.",
   "conversion.confirm.title": "Sự xác nhận",
   "conversion.descriptionChunk1": "Giờ đây, bạn có thể chuyển đổi cơ sở kiến thức hiện có của mình để sử dụng Đường ống kiến thức để xử lý tài liệu",
-  "conversion.descriptionChunk2": "— một cách tiếp cận cởi mở và linh hoạt hơn với quyền truy cập vào các plugin từ thị trường của chúng tôi. Điều này sẽ áp dụng phương pháp xử lý mới cho tất cả các tài liệu trong tương lai.",
+  "conversion.descriptionChunk2": " — một cách tiếp cận cởi mở và linh hoạt hơn với quyền truy cập vào các plugin từ Marketplace. Điều này sẽ áp dụng phương pháp xử lý mới cho tất cả các tài liệu trong tương lai.",
   "conversion.errorMessage": "Không thể chuyển đổi tập dữ liệu thành quy trình",
   "conversion.successMessage": "Đã chuyển đổi thành công tập dữ liệu thành một quy trình",
   "conversion.title": "Chuyển đổi sang quy trình kiến thức",
diff --git a/web/i18n/vi-VN/permission-keys.json b/web/i18n/vi-VN/permission-keys.json
index defaa08969f..7cb6c5d09b4 100644
--- a/web/i18n/vi-VN/permission-keys.json
+++ b/web/i18n/vi-VN/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "Phát hành ứng dụng và quản lý phiên bản",
   "app.acl.test_and_run": "Kiểm thử và sử dụng ứng dụng",
   "app.acl.view_layout": "Trang điều phối chỉ đọc",
-  "app.create_and_management": "Tạo ứng dụng và quản lý các ứng dụng bạn đã tạo",
+  "app.create_and_management": "Tạo ứng dụng",
   "app.tag.manage": "Quản lý thẻ ứng dụng",
   "app_library.access": "Truy cập Thư viện ứng dụng",
   "billing.manage": "Thay đổi gói đăng ký",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "Truy xuất cơ sở tri thức",
   "dataset.acl.use": "Thêm tài liệu vào cơ sở tri thức",
   "dataset.api_key.manage": "Quản lý khóa API cơ sở tri thức",
-  "dataset.create_and_management": "Tạo cơ sở tri thức và quản lý các cơ sở tri thức bạn đã tạo",
+  "dataset.create_and_management": "Tạo cơ sở tri thức",
   "dataset.external.connect": "Kết nối cơ sở tri thức bên ngoài",
   "dataset.tag.manage": "Quản lý thẻ cơ sở tri thức",
   "mcp.manage": "Quản lý MCP",
diff --git a/web/i18n/vi-VN/permission.json b/web/i18n/vi-VN/permission.json
index 5ebadd022a3..206f7467fc1 100644
--- a/web/i18n/vi-VN/permission.json
+++ b/web/i18n/vi-VN/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "Xem tên, mô tả và các quyền được cấp cho bộ quyền này.",
   "permissionSet.modal.view.dataset.title": "Xem bộ quyền cơ sở tri thức",
   "permissionSet.nameLabel": "Tên bộ quyền",
-  "permissionSet.namePlaceholder": "ví dụ: Có thể xuất DSL",
+  "permissionSet.namePlaceholder": "ví dụ: Bộ quyền vận hành",
   "permissionSet.permissions": "Quyền",
   "role.addRole": "Tạo vai trò",
   "role.copyMembersDescription_one": "\"{{name}}\" được gán cho {{count}} thành viên. Bạn có muốn bản sao vai trò mới bao gồm cùng thành viên đó không?",
diff --git a/web/i18n/vi-VN/plugin.json b/web/i18n/vi-VN/plugin.json
index 0ed0c7c36e4..fa711bb99ec 100644
--- a/web/i18n/vi-VN/plugin.json
+++ b/web/i18n/vi-VN/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "Sử dụng ủy quyền OAuth",
   "auth.whoCanUse": "Ai có thể sử dụng",
   "auth.workspaceDefault": "Mặc định không gian làm việc",
+  "autoUpdate.autoUpdate": "Tự động cập nhật",
+  "autoUpdate.autoUpdateSettings": "Cài đặt tự động cập nhật",
   "autoUpdate.automaticUpdates": "Cập nhật tự động",
   "autoUpdate.changeTimezone": "Để thay đổi múi giờ, hãy vào <setTimezone>Cài đặt</setTimezone>",
   "autoUpdate.excludeUpdate": "Các plugin {{num}} sau đây sẽ không tự động cập nhật",
+  "autoUpdate.excludeUpdate_one": "{{num}} plugin sau đây sẽ không tự động cập nhật",
+  "autoUpdate.excludeUpdate_other": "Các plugin {{num}} sau đây sẽ không tự động cập nhật",
   "autoUpdate.nextUpdateTime": "Cập nhật tự động tiếp theo: {{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "Không tìm thấy plugin nào",
   "autoUpdate.noPluginPlaceholder.noInstalled": "Không có plugin nào được cài đặt",
   "autoUpdate.operation.clearAll": "Xóa tất cả",
   "autoUpdate.operation.select": "Chọn plugin",
   "autoUpdate.partialUPdate": "Chỉ có {{num}} plugin sau đây sẽ tự động cập nhật",
+  "autoUpdate.partialUPdate_one": "Chỉ có {{num}} plugin sau đây sẽ tự động cập nhật",
+  "autoUpdate.partialUPdate_other": "Chỉ có {{num}} plugin sau đây sẽ tự động cập nhật",
   "autoUpdate.pluginDowngradeWarning.description": "Chức năng tự động cập nhật hiện đang được bật cho plugin này. Việc hạ cấp phiên bản có thể khiến các thay đổi của bạn bị ghi đè trong lần cập nhật tự động tiếp theo.",
   "autoUpdate.pluginDowngradeWarning.downgrade": "Giảm cấp vẫn vậy",
   "autoUpdate.pluginDowngradeWarning.exclude": "Loại trừ khỏi cập nhật tự động",
   "autoUpdate.pluginDowngradeWarning.title": "Hạ cấp Plugin",
+  "autoUpdate.scope": "Phạm vi",
+  "autoUpdate.scopeMode.all": "Tất cả",
+  "autoUpdate.scopeMode.exclude": "Loại trừ đã chọn",
   "autoUpdate.specifyPluginsToUpdate": "Chỉ định các plugin để cập nhật",
   "autoUpdate.strategy.disabled.description": "Các plugin sẽ không tự động cập nhật",
   "autoUpdate.strategy.disabled.name": "Khuyết tật",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "Cập nhật",
   "detailPanel.operation.updateTooltip": "Cập nhật để truy cập các mô hình mới nhất.",
   "detailPanel.operation.viewDetail": "xem chi tiết",
+  "detailPanel.operation.viewReadme": "Xem README",
   "detailPanel.serviceOk": "Dịch vụ OK",
   "detailPanel.strategyNum": "{{num}} {{strategy}} BAO GỒM",
   "detailPanel.switchVersion": "Chuyển đổi phiên bản",
@@ -173,6 +183,7 @@
   "installModal.back": "Lưng",
   "installModal.cancel": "Hủy",
   "installModal.close": "Đóng",
+  "installModal.dropIntegrationToInstall": "Thả gói plugin vào đây để cài đặt",
   "installModal.dropPluginToInstall": "Thả gói plugin vào đây để cài đặt",
   "installModal.fromTrustSource": "Hãy đảm bảo rằng bạn chỉ cài đặt các plugin từ <trustSource>một nguồn đáng tin cậy</trustSource>.",
   "installModal.install": "Cài đặt",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "Cài đặt Plugin",
   "installModal.installWarning": "Plugin này không được phép cài đặt.",
   "installModal.installedSuccessfully": "Cài đặt thành công",
+  "installModal.installedSuccessfullyCountDesc": "{{num}} plugin sau đây đã được cài đặt thành công.",
   "installModal.installedSuccessfullyDesc": "Plugin đã được cài đặt thành công.",
+  "installModal.installedSuccessfullyWithPageDesc": "Plugin đã được cài đặt thành công. Bạn có thể tìm thấy nó trên trang <categoryName>{{categoryName}}</categoryName>.",
   "installModal.installing": "Cài đặt...",
   "installModal.labels.package": "Gói",
   "installModal.labels.repository": "Kho",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "Chuẩn bị cài đặt các plugin {{num}} sau",
   "installModal.uploadFailed": "Tải lên không thành công",
   "installModal.uploadingPackage": "Tải lên {{packageName}}...",
+  "installModal.viewDetails": "Xem chi tiết",
   "installPlugin": "Cài đặt plugin",
+  "list.noAgentStrategyFound": "Không tìm thấy Chiến lược đại lý",
+  "list.noExtensionFound": "Không tìm thấy Phần mở rộng",
   "list.noInstalled": "Không có plugin nào được cài đặt",
+  "list.noTriggerFound": "Không tìm thấy Kích hoạt",
   "list.notFound": "Không tìm thấy plugin",
   "list.source.github": "Cài đặt từ GitHub",
   "list.source.local": "Cài đặt từ tệp gói cục bộ",
   "list.source.marketplace": "Cài đặt từ Marketplace",
+  "marketplace.allPlugins": "Tất cả plugin",
   "marketplace.and": "và",
+  "marketplace.becomePartner": "Trở thành đối tác",
   "marketplace.difyMarketplace": "Thị trường Dify",
   "marketplace.discover": "Khám phá",
   "marketplace.empower": "Hỗ trợ phát triển AI của bạn",
   "marketplace.moreFrom": "Các ứng dụng khác từ Marketplace",
   "marketplace.noPluginFound": "Không tìm thấy plugin nào",
   "marketplace.partnerTip": "Được xác nhận bởi một đối tác của Dify",
+  "marketplace.pluginsHeroSubtitle": "Sử dụng các plugin do cộng đồng xây dựng để hỗ trợ phát triển AI của bạn.",
+  "marketplace.pluginsHeroTitle": "Khám phá. Mở rộng. Xây dựng.",
   "marketplace.pluginsResult": "{{num}} kết quả",
   "marketplace.sortBy": "Thành phố đen",
   "marketplace.sortOption.firstReleased": "Phát hành lần đầu tiên",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "Được xác nhận bởi Dify",
   "marketplace.viewMore": "Xem thêm",
   "metadata.title": "Plugin",
+  "pluginDevelopmentGuide": "Hướng dẫn phát triển plugin",
   "pluginInfoModal.packageName": "Gói",
   "pluginInfoModal.release": "Phát hành",
   "pluginInfoModal.repository": "Kho",
   "pluginInfoModal.title": "Thông tin plugin",
+  "pluginPublishGuide": "Hướng dẫn xuất bản plugin",
   "privilege.admins": "Quản trị viên",
+  "privilege.configurePermissionsInSettings": "Vào Cài đặt > Vai trò & Quyền để cấu hình quyền plugin.",
   "privilege.everyone": "Ai ai",
+  "privilege.noDebugPermissionTooltip": "Bạn không có quyền gỡ lỗi plugin",
+  "privilege.noInstallPermissionTooltip": "Bạn không có quyền cài đặt và quản lý plugin",
   "privilege.noone": "Không ai",
+  "privilege.permissions": "Quyền",
+  "privilege.quickWhoCanDebug": "Ai có thể gỡ lỗi?",
+  "privilege.quickWhoCanInstall": "Ai có thể cài đặt và quản lý?",
   "privilege.title": "Tùy chọn plugin",
   "privilege.whoCanDebug": "Ai có thể gỡ lỗi plugin?",
   "privilege.whoCanInstall": "Ai có thể cài đặt và quản lý plugin?",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "Không có README",
   "readmeInfo.title": "ĐỌC_TÔI",
   "requestAPlugin": "Yêu cầu một plugin",
+  "requestSubmit": "Yêu cầu hoặc xuất bản",
   "search": "Tìm kiếm",
   "searchCategories": "Danh mục tìm kiếm",
   "searchInMarketplace": "Tìm kiếm trên Marketplace",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "Cài đặt {{installingLength}} plugins, {{successLength}} thành công.",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "Hướng dẫn xuất bản mẫu",
   "upgrade.close": "Đóng",
   "upgrade.description": "Giới thiệu cài đặt plugin sau",
   "upgrade.successfulTitle": "Cài đặt thành công",
diff --git a/web/i18n/zh-Hans/permission-keys.json b/web/i18n/zh-Hans/permission-keys.json
index 2c6f06ffc12..c6a790af1a3 100644
--- a/web/i18n/zh-Hans/permission-keys.json
+++ b/web/i18n/zh-Hans/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "应用发布与版本管理",
   "app.acl.test_and_run": "测试与使用应用",
   "app.acl.view_layout": "编排页只读",
-  "app.create_and_management": "创建和管理自己创建的应用",
+  "app.create_and_management": "创建应用",
   "app.tag.manage": "管理应用标签",
   "app_library.access": "访问应用库",
   "billing.manage": "更换订阅套餐",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "知识库检索召回",
   "dataset.acl.use": "向知识库新增文件",
   "dataset.api_key.manage": "管理知识库 API Key",
-  "dataset.create_and_management": "创建和管理自己创建的知识库",
+  "dataset.create_and_management": "创建知识库",
   "dataset.external.connect": "连接外部知识库",
   "dataset.tag.manage": "管理知识库标签",
   "mcp.manage": "管理MCP",
diff --git a/web/i18n/zh-Hans/permission.json b/web/i18n/zh-Hans/permission.json
index 21c308de084..a0ff717c539 100644
--- a/web/i18n/zh-Hans/permission.json
+++ b/web/i18n/zh-Hans/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "查看此权限集的名称、描述和授予的权限。",
   "permissionSet.modal.view.dataset.title": "查看知识库权限集",
   "permissionSet.nameLabel": "权限集名称",
-  "permissionSet.namePlaceholder": "例如：可导出 DSL",
+  "permissionSet.namePlaceholder": "例如：运维权限集合",
   "permissionSet.permissions": "权限",
   "role.addRole": "创建角色",
   "role.copyMembersDescription_one": "“{{name}}”已分配给 {{count}} 个成员。是否让新角色副本包含相同成员？",
diff --git a/web/i18n/zh-Hant/permission-keys.json b/web/i18n/zh-Hant/permission-keys.json
index 92058d576c9..39c2607b5d9 100644
--- a/web/i18n/zh-Hant/permission-keys.json
+++ b/web/i18n/zh-Hant/permission-keys.json
@@ -10,7 +10,7 @@
   "app.acl.release_and_version": "應用發布與版本管理",
   "app.acl.test_and_run": "測試與使用應用",
   "app.acl.view_layout": "編排頁唯讀",
-  "app.create_and_management": "建立與管理自己建立的應用",
+  "app.create_and_management": "建立應用",
   "app.tag.manage": "管理應用標籤",
   "app_library.access": "訪問應用庫",
   "billing.manage": "更換訂閱套餐",
@@ -35,7 +35,7 @@
   "dataset.acl.retrieval_recall": "知識庫檢索召回",
   "dataset.acl.use": "向知識庫新增檔案",
   "dataset.api_key.manage": "管理知識庫 API Key",
-  "dataset.create_and_management": "建立與管理自己建立的知識庫",
+  "dataset.create_and_management": "建立知識庫",
   "dataset.external.connect": "連接外部知識庫",
   "dataset.tag.manage": "管理知識庫標籤",
   "mcp.manage": "管理MCP",
diff --git a/web/i18n/zh-Hant/permission.json b/web/i18n/zh-Hant/permission.json
index 28e90a4b902..e83824744a2 100644
--- a/web/i18n/zh-Hant/permission.json
+++ b/web/i18n/zh-Hant/permission.json
@@ -71,7 +71,7 @@
   "permissionSet.modal.view.dataset.description": "查看此權限集的名稱、描述和授予的權限。",
   "permissionSet.modal.view.dataset.title": "查看知識庫權限集",
   "permissionSet.nameLabel": "權限集名稱",
-  "permissionSet.namePlaceholder": "例如：可匯出 DSL",
+  "permissionSet.namePlaceholder": "例如：維運權限集合",
   "permissionSet.permissions": "權限",
   "role.addRole": "建立角色",
   "role.copyMembersDescription_one": "「{{name}}」已分配給 {{count}} 個成員。是否讓新角色副本包含相同成員？",
diff --git a/web/i18n/zh-Hant/plugin.json b/web/i18n/zh-Hant/plugin.json
index 11c79e49b16..ba4c3463e95 100644
--- a/web/i18n/zh-Hant/plugin.json
+++ b/web/i18n/zh-Hant/plugin.json
@@ -43,19 +43,28 @@
   "auth.useOAuthAuth": "使用 OAuth 授權",
   "auth.whoCanUse": "誰可以使用",
   "auth.workspaceDefault": "工作區域默認",
+  "autoUpdate.autoUpdate": "自動更新",
+  "autoUpdate.autoUpdateSettings": "自動更新設定",
   "autoUpdate.automaticUpdates": "自動更新",
   "autoUpdate.changeTimezone": "要更改時區，請前往<setTimezone>設定</setTimezone>",
-  "autoUpdate.excludeUpdate": "以下 {{num}} 個插件將不會自動更新",
+  "autoUpdate.excludeUpdate": "以下 {{num}} 個集成將不會自動更新",
+  "autoUpdate.excludeUpdate_one": "以下 {{num}} 個集成將不會自動更新",
+  "autoUpdate.excludeUpdate_other": "以下 {{num}} 個集成將不會自動更新",
   "autoUpdate.nextUpdateTime": "下次自動更新：{{time}}",
   "autoUpdate.noPluginPlaceholder.noFound": "未找到任何外掛",
   "autoUpdate.noPluginPlaceholder.noInstalled": "沒有安裝插件",
   "autoUpdate.operation.clearAll": "清除所有",
   "autoUpdate.operation.select": "選擇插件",
-  "autoUpdate.partialUPdate": "只有以下 {{num}} 個插件將自動更新",
+  "autoUpdate.partialUPdate": "只有以下 {{num}} 個集成將自動更新",
+  "autoUpdate.partialUPdate_one": "只有以下 {{num}} 個集成將自動更新",
+  "autoUpdate.partialUPdate_other": "只有以下 {{num}} 個集成將自動更新",
   "autoUpdate.pluginDowngradeWarning.description": "這個插件目前已啟用自動更新。降級版本可能會導致您的更改在下一次自動更新時被覆蓋。",
   "autoUpdate.pluginDowngradeWarning.downgrade": "無論如何降級",
   "autoUpdate.pluginDowngradeWarning.exclude": "排除自動更新",
   "autoUpdate.pluginDowngradeWarning.title": "插件降級",
+  "autoUpdate.scope": "範圍",
+  "autoUpdate.scopeMode.all": "全部",
+  "autoUpdate.scopeMode.exclude": "排除選定的",
   "autoUpdate.specifyPluginsToUpdate": "指定要更新的插件",
   "autoUpdate.strategy.disabled.description": "插件將不會自動更新",
   "autoUpdate.strategy.disabled.name": "殘疾的",
@@ -126,6 +135,7 @@
   "detailPanel.operation.update": "更新",
   "detailPanel.operation.updateTooltip": "更新以取得最新模型。",
   "detailPanel.operation.viewDetail": "在 Marketplace 查看",
+  "detailPanel.operation.viewReadme": "查看 README",
   "detailPanel.serviceOk": "服務正常",
   "detailPanel.strategyNum": "{{num}} {{strategy}} 包括",
   "detailPanel.switchVersion": "Switch 版本",
@@ -173,6 +183,7 @@
   "installModal.back": "返回",
   "installModal.cancel": "取消",
   "installModal.close": "關閉",
+  "installModal.dropIntegrationToInstall": "將集成包拖放到此處進行安裝",
   "installModal.dropPluginToInstall": "將插件包拖放到此處進行安裝",
   "installModal.fromTrustSource": "請確保您只從<trustSource>受信任的來源</trustSource>安裝插件。",
   "installModal.install": "安裝",
@@ -182,7 +193,9 @@
   "installModal.installPlugin": "安裝插件",
   "installModal.installWarning": "此插件不允許安裝。",
   "installModal.installedSuccessfully": "安裝成功",
+  "installModal.installedSuccessfullyCountDesc": "以下 {{num}} 個集成已成功安裝。",
   "installModal.installedSuccessfullyDesc": "插件已成功安裝。",
+  "installModal.installedSuccessfullyWithPageDesc": "集成已成功安裝。您可以在 <categoryName>{{categoryName}}</categoryName> 頁面找到它。",
   "installModal.installing": "安裝。。。",
   "installModal.labels.package": "包",
   "installModal.labels.repository": "存儲庫",
@@ -195,19 +208,27 @@
   "installModal.readyToInstallPackages": "即將安裝以下 {{num}} 個插件",
   "installModal.uploadFailed": "上傳失敗",
   "installModal.uploadingPackage": "正在上傳 {{packageName}}...",
+  "installModal.viewDetails": "查看詳情",
   "installPlugin": "安裝插件",
+  "list.noAgentStrategyFound": "未找到代理策略",
+  "list.noExtensionFound": "未找到擴展",
   "list.noInstalled": "未安裝插件",
+  "list.noTriggerFound": "未找到觸發器",
   "list.notFound": "未找到插件",
   "list.source.github": "從 GitHub 安裝",
   "list.source.local": "從本地包檔安裝",
   "list.source.marketplace": "從 Marketplace 安裝",
+  "marketplace.allPlugins": "所有集成",
   "marketplace.and": "和",
+  "marketplace.becomePartner": "成為合作夥伴",
   "marketplace.difyMarketplace": "Dify Marketplace",
   "marketplace.discover": "發現",
   "marketplace.empower": "為您的 AI 開發提供支援",
   "marketplace.moreFrom": "來自 Marketplace 的更多內容",
   "marketplace.noPluginFound": "未找到集成",
   "marketplace.partnerTip": "由 Dify 合作夥伴驗證",
+  "marketplace.pluginsHeroSubtitle": "使用社群構建的集成來助力您的 AI 開發。",
+  "marketplace.pluginsHeroTitle": "發現。擴展。構建。",
   "marketplace.pluginsResult": "{{num}} 個結果",
   "marketplace.sortBy": "排序方式",
   "marketplace.sortOption.firstReleased": "首次發佈",
@@ -217,13 +238,21 @@
   "marketplace.verifiedTip": "由 Dify 驗證",
   "marketplace.viewMore": "查看更多",
   "metadata.title": "插件",
+  "pluginDevelopmentGuide": "集成開發指南",
   "pluginInfoModal.packageName": "包",
   "pluginInfoModal.release": "釋放",
   "pluginInfoModal.repository": "存儲庫",
   "pluginInfoModal.title": "插件資訊",
+  "pluginPublishGuide": "集成發佈指南",
   "privilege.admins": "管理員",
+  "privilege.configurePermissionsInSettings": "前往設定 > 角色與權限以配置插件權限。",
   "privilege.everyone": "每個人 都",
+  "privilege.noDebugPermissionTooltip": "您沒有調試集成的權限",
+  "privilege.noInstallPermissionTooltip": "您沒有安裝和管理集成的權限",
   "privilege.noone": "沒人",
+  "privilege.permissions": "權限",
+  "privilege.quickWhoCanDebug": "誰可以調試？",
+  "privilege.quickWhoCanInstall": "誰可以安裝和管理？",
   "privilege.title": "插件首選項",
   "privilege.whoCanDebug": "誰可以調試插件？",
   "privilege.whoCanInstall": "誰可以安裝和管理插件？",
@@ -233,6 +262,7 @@
   "readmeInfo.noReadmeAvailable": "沒有可用的自述文件",
   "readmeInfo.title": "自述檔",
   "requestAPlugin": "申请插件",
+  "requestSubmit": "請求或發佈",
   "search": "搜索",
   "searchCategories": "搜索類別",
   "searchInMarketplace": "在 Marketplace 中搜索",
@@ -258,6 +288,7 @@
   "task.installingWithSuccess": "安裝 {{installingLength}} 個插件，{{successLength}} 成功。",
   "task.runningPlugins": "Installing Plugins",
   "task.successPlugins": "Successfully Installed Plugins",
+  "templatePublishingGuide": "範本發佈指南",
   "upgrade.close": "關閉",
   "upgrade.description": "即將安裝以下插件",
   "upgrade.successfulTitle": "安裝成功",
diff --git a/web/knip.config.ts b/web/knip.config.ts
index 419bf825299..16ed6ef8cc0 100644
--- a/web/knip.config.ts
+++ b/web/knip.config.ts
@@ -10,6 +10,22 @@ const config: KnipConfig = {
     'tsslint.config.ts',
     'dev-proxy.config.ts',
   ],
+  project: [
+    '**/*.{js,mjs,cjs,jsx,ts,tsx,mts,cts,css}!',
+    '!**/*.{bench,test,test-d,spec,spec-d}.?(c|m)[jt]s?(x)!',
+    '!**/*.test-utils.{ts,tsx}!',
+    '!**/__mocks__/**!',
+    '!**/__tests__/**!',
+    '!**/*.stories.{js,jsx,ts,tsx}!',
+    '!.storybook/**!',
+    '!context/provider-context-mock.tsx!',
+    '!eslint.constants.mjs!',
+    '!plugins/**!',
+    '!test/**!',
+    '!**/test-helpers.{ts,tsx}!',
+    '!**/test-utils.{ts,tsx}!',
+    '!vitest.setup.ts!',
+  ],
   ignore: [
     'public/**',
   ],
diff --git a/web/package.json b/web/package.json
index e23b638d3ee..a5da6a61cb1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -34,6 +34,7 @@
     "gen-icons": "pnpm --filter @dify/iconify-collections generate && node ./scripts/gen-icons.mjs && eslint --fix app/components/base/icons/src/",
     "i18n:check": "tsx ./scripts/check-i18n.js",
     "knip": "knip",
+    "knip:production": "knip --production --include files",
     "lint:tss": "tsslint --project tsconfig.json",
     "preinstall": "npx only-allow pnpm",
     "refactor-component": "node ./scripts/refactor-component.js",
diff --git a/web/service/use-common.ts b/web/service/use-common.ts
index 1ee2451ffad..36644a3ef37 100644
--- a/web/service/use-common.ts
+++ b/web/service/use-common.ts
@@ -7,7 +7,6 @@ import type {
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { AccessControlTemplateLanguage } from '@/i18n-config/language'
 import type {
-  AccountIntegrate,
   CodeBasedExtension,
   CommonResponse,
   FileUploadConfigResponse,
@@ -225,13 +224,6 @@ export const useSupportRetrievalMethods = () => {
   })
 }
 
-export const useAccountIntegrates = () => {
-  return useQuery<{ data: AccountIntegrate[] | null }>({
-    queryKey: commonQueryKeys.accountIntegrates,
-    queryFn: () => get<{ data: AccountIntegrate[] | null }>('/account/integrates'),
-  })
-}
-
 export const useCodeBasedExtensions = (module: string) => {
   return useQuery<CodeBasedExtension>({
     queryKey: commonQueryKeys.codeBasedExtensions(module),
diff --git a/web/utils/context.spec.ts b/web/utils/context.spec.ts
deleted file mode 100644
index ca9816cd762..00000000000
--- a/web/utils/context.spec.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-import { renderHook } from '@testing-library/react'
-/**
- * Test suite for React context creation utilities
- *
- * This module provides helper functions to create React contexts with better type safety
- * and automatic error handling when context is used outside of its provider.
- *
- * Two variants are provided:
- * - createCtx: Standard React context using React's use/createContext
- * - createSelectorCtx: Context with selector support using use-context-selector library
- */
-import * as React from 'react'
-import { createCtx, createSelectorCtx } from './context'
-
-describe('Context Utilities', () => {
-  describe('createCtx', () => {
-    /**
-     * Test that createCtx creates a valid context with provider and hook
-     * The function should return a tuple with [Provider, useContextValue, Context]
-     * plus named properties for easier access
-     */
-    it('should create context with provider and hook', () => {
-      type TestContextValue = { value: string }
-      const [Provider, useTestContext, Context] = createCtx<TestContextValue>({
-        name: 'Test',
-      })
-
-      expect(Provider).toBeDefined()
-      expect(useTestContext).toBeDefined()
-      expect(Context).toBeDefined()
-    })
-
-    /**
-     * Test that the context hook returns the provided value correctly
-     * when used within the context provider
-     */
-    it('should provide and consume context value', () => {
-      type TestContextValue = { value: string }
-      const [Provider, useTestContext] = createCtx<TestContextValue>({
-        name: 'Test',
-      })
-
-      const testValue = { value: 'test-value' }
-
-      const wrapper = ({ children }: { children: React.ReactNode }) =>
-        React.createElement(Provider, { value: testValue }, children)
-
-      const { result } = renderHook(() => useTestContext(), { wrapper })
-
-      expect(result.current).toEqual(testValue)
-    })
-
-    /**
-     * Test that accessing context outside of provider throws an error
-     * This ensures developers are notified when they forget to wrap components
-     */
-    it('should throw error when used outside provider', () => {
-      type TestContextValue = { value: string }
-      const [, useTestContext] = createCtx<TestContextValue>({
-        name: 'Test',
-      })
-
-      // Suppress console.error for this test
-      const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { /* suppress error */ })
-
-      expect(() => {
-        renderHook(() => useTestContext())
-      }).toThrow('No Test context found.')
-
-      consoleError.mockRestore()
-    })
-
-    /**
-     * Test that context works with default values
-     * When a default value is provided, it should be accessible without a provider
-     */
-    it('should use default value when provided', () => {
-      type TestContextValue = { value: string }
-      const defaultValue = { value: 'default' }
-      const [, useTestContext] = createCtx<TestContextValue>({
-        name: 'Test',
-        defaultValue,
-      })
-
-      const { result } = renderHook(() => useTestContext())
-
-      expect(result.current).toEqual(defaultValue)
-    })
-
-    /**
-     * Test that the returned tuple has named properties for convenience
-     * This allows destructuring or property access based on preference
-     */
-    it('should expose named properties', () => {
-      type TestContextValue = { value: string }
-      const result = createCtx<TestContextValue>({ name: 'Test' })
-
-      expect(result.provider).toBe(result[0])
-      expect(result.useContextValue).toBe(result[1])
-      expect(result.context).toBe(result[2])
-    })
-
-    /**
-     * Test context with complex data types
-     * Ensures type safety is maintained with nested objects and arrays
-     */
-    it('should handle complex context values', () => {
-      type ComplexContext = {
-        user: { id: string, name: string }
-        settings: { theme: string, locale: string }
-        actions: Array<() => void>
-      }
-
-      const [Provider, useComplexContext] = createCtx<ComplexContext>({
-        name: 'Complex',
-      })
-
-      const complexValue: ComplexContext = {
-        user: { id: '123', name: 'Test User' },
-        settings: { theme: 'dark', locale: 'en-US' },
-        actions: [
-          () => { /* empty action 1 */ },
-          () => { /* empty action 2 */ },
-        ],
-      }
-
-      const wrapper = ({ children }: { children: React.ReactNode }) =>
-        React.createElement(Provider, { value: complexValue }, children)
-
-      const { result } = renderHook(() => useComplexContext(), { wrapper })
-
-      expect(result.current).toEqual(complexValue)
-      expect(result.current.user.id).toBe('123')
-      expect(result.current.settings.theme).toBe('dark')
-      expect(result.current.actions).toHaveLength(2)
-    })
-
-    /**
-     * Test that context updates propagate to consumers
-     * When provider value changes, hooks should receive the new value
-     */
-    it('should update when context value changes', () => {
-      type TestContextValue = { count: number }
-      const [Provider, useTestContext] = createCtx<TestContextValue>({
-        name: 'Test',
-      })
-
-      let value = { count: 0 }
-      const wrapper = ({ children }: { children: React.ReactNode }) =>
-        React.createElement(Provider, { value }, children)
-
-      const { result, rerender } = renderHook(() => useTestContext(), { wrapper })
-
-      expect(result.current.count).toBe(0)
-
-      value = { count: 5 }
-      rerender()
-
-      expect(result.current.count).toBe(5)
-    })
-  })
-
-  describe('createSelectorCtx', () => {
-    /**
-     * Test that createSelectorCtx creates a valid context with selector support
-     * This variant uses use-context-selector for optimized re-renders
-     */
-    it('should create selector context with provider and hook', () => {
-      type TestContextValue = { value: string }
-      const [Provider, useTestContext, Context] = createSelectorCtx<TestContextValue>({
-        name: 'SelectorTest',
-      })
-
-      expect(Provider).toBeDefined()
-      expect(useTestContext).toBeDefined()
-      expect(Context).toBeDefined()
-    })
-
-    /**
-     * Test that selector context provides and consumes values correctly
-     * The API should be identical to createCtx for basic usage
-     */
-    it('should provide and consume context value with selector', () => {
-      type TestContextValue = { value: string }
-      const [Provider, useTestContext] = createSelectorCtx<TestContextValue>({
-        name: 'SelectorTest',
-      })
-
-      const testValue = { value: 'selector-test' }
-
-      const wrapper = ({ children }: { children: React.ReactNode }) =>
-        React.createElement(Provider, { value: testValue }, children)
-
-      const { result } = renderHook(() => useTestContext(), { wrapper })
-
-      expect(result.current).toEqual(testValue)
-    })
-
-    /**
-     * Test error handling for selector context
-     * Should throw error when used outside provider, same as createCtx
-     */
-    it('should throw error when used outside provider', () => {
-      type TestContextValue = { value: string }
-      const [, useTestContext] = createSelectorCtx<TestContextValue>({
-        name: 'SelectorTest',
-      })
-
-      const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { /* suppress error */ })
-
-      expect(() => {
-        renderHook(() => useTestContext())
-      }).toThrow('No SelectorTest context found.')
-
-      consoleError.mockRestore()
-    })
-
-    /**
-     * Test that selector context works with default values
-     */
-    it('should use default value when provided', () => {
-      type TestContextValue = { value: string }
-      const defaultValue = { value: 'selector-default' }
-      const [, useTestContext] = createSelectorCtx<TestContextValue>({
-        name: 'SelectorTest',
-        defaultValue,
-      })
-
-      const { result } = renderHook(() => useTestContext())
-
-      expect(result.current).toEqual(defaultValue)
-    })
-  })
-
-  describe('Context without name', () => {
-    /**
-     * Test that contexts can be created without a name
-     * The error message should use a generic fallback
-     */
-    it('should create context without name and show generic error', () => {
-      type TestContextValue = { value: string }
-      const [, useTestContext] = createCtx<TestContextValue>()
-
-      const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { /* suppress error */ })
-
-      expect(() => {
-        renderHook(() => useTestContext())
-      }).toThrow('No related context found.')
-
-      consoleError.mockRestore()
-    })
-  })
-})
diff --git a/web/utils/context.ts b/web/utils/context.ts
deleted file mode 100644
index 7f4cbda81b7..00000000000
--- a/web/utils/context.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { Context, Provider } from 'react'
-import { createContext, use } from 'react'
-import * as selector from 'use-context-selector'
-
-type UseContextImpl = <T>(context: Context<T>) => T
-
-const createCreateCtxFunction = (
-  useContextImpl: UseContextImpl,
-  createContextImpl: typeof createContext,
-) => {
-  return function<T>({ name, defaultValue }: CreateCtxOptions<T> = {}): CreateCtxReturn<T> {
-    const emptySymbol = Symbol(`empty ${name}`)
-    // @ts-expect-error it's ok here
-    const context = createContextImpl<T>(defaultValue ?? emptySymbol)
-    const useContextValue = () => {
-      const ctx = useContextImpl(context)
-      if (ctx === emptySymbol)
-        throw new Error(`No ${name ?? 'related'} context found.`)
-
-      return ctx
-    }
-    const result = [context.Provider, useContextValue, context] as CreateCtxReturn<T>
-    result.context = context
-    result.provider = context.Provider
-    result.useContextValue = useContextValue
-    return result
-  }
-}
-
-type CreateCtxOptions<T> = {
-  defaultValue?: T
-  name?: string
-}
-
-type CreateCtxReturn<T> = [Provider<T>, () => T, Context<T>] & {
-  context: Context<T>
-  provider: Provider<T>
-  useContextValue: () => T
-}
-
-// example
-// const [AppProvider, useApp, AppContext] = createCtx<AppContextValue>()
-
-export const createCtx = createCreateCtxFunction(use, createContext)
-
-export const createSelectorCtx = createCreateCtxFunction(
-  selector.useContext as UseContextImpl,
-  selector.createContext as typeof createContext,
-)
diff --git a/web/utils/navigation.spec.ts b/web/utils/navigation.spec.ts
deleted file mode 100644
index c6327e6b63d..00000000000
--- a/web/utils/navigation.spec.ts
+++ /dev/null
@@ -1,297 +0,0 @@
-/**
- * Test suite for navigation utility functions
- * Tests URL and query parameter manipulation for consistent navigation behavior
- * Includes helpers for preserving state during navigation (pagination, filters, etc.)
- */
-import {
-  createBackNavigation,
-  createNavigationPath,
-  createNavigationPathWithParams,
-  datasetNavigation,
-  extractQueryParams,
-  mergeQueryParams,
-} from './navigation'
-
-describe('navigation', () => {
-  const originalWindow = globalThis.window
-
-  beforeEach(() => {
-    // Mock window.location with sample query parameters
-    delete (globalThis as any).window
-    globalThis.window = {
-      location: {
-        search: '?page=3&limit=10&keyword=test',
-      },
-    } as any
-  })
-
-  afterEach(() => {
-    globalThis.window = originalWindow
-  })
-
-  /**
-   * Tests createNavigationPath which builds URLs with optional query parameter preservation
-   */
-  describe('createNavigationPath', () => {
-    it('preserves query parameters by default', () => {
-      const result = createNavigationPath('/datasets/123/documents')
-      expect(result).toBe('/datasets/123/documents?page=3&limit=10&keyword=test')
-    })
-
-    it('returns clean path when preserveParams is false', () => {
-      const result = createNavigationPath('/datasets/123/documents', false)
-      expect(result).toBe('/datasets/123/documents')
-    })
-
-    it('handles empty query string', () => {
-      globalThis.window.location.search = ''
-      const result = createNavigationPath('/datasets/123/documents')
-      expect(result).toBe('/datasets/123/documents')
-    })
-
-    it('handles path with trailing slash', () => {
-      const result = createNavigationPath('/datasets/123/documents/')
-      expect(result).toBe('/datasets/123/documents/?page=3&limit=10&keyword=test')
-    })
-
-    it('handles root path', () => {
-      const result = createNavigationPath('/')
-      expect(result).toBe('/?page=3&limit=10&keyword=test')
-    })
-  })
-
-  /**
-   * Tests createBackNavigation which creates a navigation callback function
-   */
-  describe('createBackNavigation', () => {
-    /**
-     * Tests that the returned function properly navigates with preserved params
-     */
-    it('returns function that calls router.push with correct path', () => {
-      const mockRouter = { push: vi.fn() }
-      const backNav = createBackNavigation(mockRouter, '/datasets/123/documents')
-
-      backNav()
-
-      expect(mockRouter.push).toHaveBeenCalledWith('/datasets/123/documents?page=3&limit=10&keyword=test')
-    })
-
-    it('returns function that navigates without params when preserveParams is false', () => {
-      const mockRouter = { push: vi.fn() }
-      const backNav = createBackNavigation(mockRouter, '/datasets/123/documents', false)
-
-      backNav()
-
-      expect(mockRouter.push).toHaveBeenCalledWith('/datasets/123/documents')
-    })
-
-    it('can be called multiple times', () => {
-      const mockRouter = { push: vi.fn() }
-      const backNav = createBackNavigation(mockRouter, '/datasets/123/documents')
-
-      backNav()
-      backNav()
-
-      expect(mockRouter.push).toHaveBeenCalledTimes(2)
-    })
-  })
-
-  /**
-   * Tests extractQueryParams which extracts specific parameters from current URL
-   */
-  describe('extractQueryParams', () => {
-    /**
-     * Tests selective parameter extraction
-     */
-    it('extracts specified parameters', () => {
-      const result = extractQueryParams(['page', 'limit'])
-      expect(result).toEqual({ page: '3', limit: '10' })
-    })
-
-    it('extracts all specified parameters including keyword', () => {
-      const result = extractQueryParams(['page', 'limit', 'keyword'])
-      expect(result).toEqual({ page: '3', limit: '10', keyword: 'test' })
-    })
-
-    it('ignores non-existent parameters', () => {
-      const result = extractQueryParams(['page', 'nonexistent'])
-      expect(result).toEqual({ page: '3' })
-    })
-
-    it('returns empty object when no parameters match', () => {
-      const result = extractQueryParams(['foo', 'bar'])
-      expect(result).toEqual({})
-    })
-
-    it('returns empty object for empty array', () => {
-      const result = extractQueryParams([])
-      expect(result).toEqual({})
-    })
-
-    it('handles empty query string', () => {
-      globalThis.window.location.search = ''
-      const result = extractQueryParams(['page', 'limit'])
-      expect(result).toEqual({})
-    })
-  })
-
-  /**
-   * Tests createNavigationPathWithParams which builds URLs with specific parameters
-   */
-  describe('createNavigationPathWithParams', () => {
-    /**
-     * Tests URL construction with custom parameters
-     */
-    it('creates path with specified parameters', () => {
-      const result = createNavigationPathWithParams('/datasets/123/documents', {
-        page: '1',
-        limit: '25',
-      })
-      expect(result).toBe('/datasets/123/documents?page=1&limit=25')
-    })
-
-    it('handles string and number values', () => {
-      const result = createNavigationPathWithParams('/datasets/123/documents', {
-        page: 1,
-        limit: 25,
-        keyword: 'search',
-      })
-      expect(result).toBe('/datasets/123/documents?page=1&limit=25&keyword=search')
-    })
-
-    it('filters out empty string values', () => {
-      const result = createNavigationPathWithParams('/datasets/123/documents', {
-        page: '1',
-        keyword: '',
-      })
-      expect(result).toBe('/datasets/123/documents?page=1')
-    })
-
-    it('filters out null and undefined values', () => {
-      const result = createNavigationPathWithParams('/datasets/123/documents', {
-        page: '1',
-        keyword: null as any,
-        filter: undefined as any,
-      })
-      expect(result).toBe('/datasets/123/documents?page=1')
-    })
-
-    it('returns base path when params are empty', () => {
-      const result = createNavigationPathWithParams('/datasets/123/documents', {})
-      expect(result).toBe('/datasets/123/documents')
-    })
-
-    it('encodes special characters in values', () => {
-      const result = createNavigationPathWithParams('/datasets/123/documents', {
-        keyword: 'search term',
-      })
-      expect(result).toBe('/datasets/123/documents?keyword=search+term')
-    })
-  })
-
-  /**
-   * Tests mergeQueryParams which combines new parameters with existing URL params
-   */
-  describe('mergeQueryParams', () => {
-    /**
-     * Tests parameter merging and overriding
-     */
-    it('merges new params with existing ones', () => {
-      const result = mergeQueryParams({ keyword: 'new', page: '1' })
-      expect(result.get('page')).toBe('1')
-      expect(result.get('limit')).toBe('10')
-      expect(result.get('keyword')).toBe('new')
-    })
-
-    it('overrides existing parameters', () => {
-      const result = mergeQueryParams({ page: '5' })
-      expect(result.get('page')).toBe('5')
-      expect(result.get('limit')).toBe('10')
-    })
-
-    it('adds new parameters', () => {
-      const result = mergeQueryParams({ filter: 'active' })
-      expect(result.get('filter')).toBe('active')
-      expect(result.get('page')).toBe('3')
-    })
-
-    it('removes parameters with null value', () => {
-      const result = mergeQueryParams({ page: null })
-      expect(result.get('page')).toBeNull()
-      expect(result.get('limit')).toBe('10')
-    })
-
-    it('removes parameters with undefined value', () => {
-      const result = mergeQueryParams({ page: undefined })
-      expect(result.get('page')).toBeNull()
-      expect(result.get('limit')).toBe('10')
-    })
-
-    it('does not preserve existing when preserveExisting is false', () => {
-      const result = mergeQueryParams({ filter: 'active' }, false)
-      expect(result.get('filter')).toBe('active')
-      expect(result.get('page')).toBeNull()
-      expect(result.get('limit')).toBeNull()
-    })
-
-    it('handles number values', () => {
-      const result = mergeQueryParams({ page: 5, limit: 20 })
-      expect(result.get('page')).toBe('5')
-      expect(result.get('limit')).toBe('20')
-    })
-
-    it('does not add empty string values', () => {
-      const result = mergeQueryParams({ newParam: '' })
-      expect(result.get('newParam')).toBeNull()
-      // Existing params are preserved
-      expect(result.get('keyword')).toBe('test')
-    })
-  })
-
-  /**
-   * Tests datasetNavigation helper object with common dataset navigation patterns
-   */
-  describe('datasetNavigation', () => {
-    /**
-     * Tests navigation back to dataset documents list
-     */
-    describe('backToDocuments', () => {
-      it('creates navigation function with preserved params', () => {
-        const mockRouter = { push: vi.fn() }
-        const backNav = datasetNavigation.backToDocuments(mockRouter, 'dataset-123')
-
-        backNav()
-
-        expect(mockRouter.push).toHaveBeenCalledWith('/datasets/dataset-123/documents?page=3&limit=10&keyword=test')
-      })
-    })
-
-    /**
-     * Tests navigation to document detail page
-     */
-    describe('toDocumentDetail', () => {
-      it('creates navigation function to document detail', () => {
-        const mockRouter = { push: vi.fn() }
-        const navFunc = datasetNavigation.toDocumentDetail(mockRouter, 'dataset-123', 'doc-456')
-
-        navFunc()
-
-        expect(mockRouter.push).toHaveBeenCalledWith('/datasets/dataset-123/documents/doc-456')
-      })
-    })
-
-    /**
-     * Tests navigation to document settings page
-     */
-    describe('toDocumentSettings', () => {
-      it('creates navigation function to document settings', () => {
-        const mockRouter = { push: vi.fn() }
-        const navFunc = datasetNavigation.toDocumentSettings(mockRouter, 'dataset-123', 'doc-456')
-
-        navFunc()
-
-        expect(mockRouter.push).toHaveBeenCalledWith('/datasets/dataset-123/documents/doc-456/settings')
-      })
-    })
-  })
-})
diff --git a/web/utils/navigation.ts b/web/utils/navigation.ts
deleted file mode 100644
index 15fd5711d10..00000000000
--- a/web/utils/navigation.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-/**
- * Navigation Utilities
- *
- * Provides helper functions for consistent navigation behavior throughout the application,
- * specifically for preserving query parameters when navigating between related pages.
- */
-
-/**
- * Creates a navigation path that preserves current URL query parameters
- *
- * @param basePath - The base path to navigate to (e.g., '/datasets/123/documents')
- * @param preserveParams - Whether to preserve current query parameters (default: true)
- * @returns The complete navigation path with preserved query parameters
- *
- * @example
- * // Current URL: /datasets/123/documents/456?page=3&limit=10&keyword=test
- * const backPath = createNavigationPath('/datasets/123/documents')
- * // Returns: '/datasets/123/documents?page=3&limit=10&keyword=test'
- *
- * @example
- * // Navigate without preserving params
- * const cleanPath = createNavigationPath('/datasets/123/documents', false)
- * // Returns: '/datasets/123/documents'
- */
-export function createNavigationPath(basePath: string, preserveParams: boolean = true): string {
-  if (!preserveParams)
-    return basePath
-
-  try {
-    const searchParams = new URLSearchParams(window.location.search)
-    const queryString = searchParams.toString()
-    const separator = queryString ? '?' : ''
-    return `${basePath}${separator}${queryString}`
-  }
-  catch (error) {
-    // Fallback to base path if there's any error accessing location
-    console.warn('Failed to preserve query parameters:', error)
-    return basePath
-  }
-}
-
-/**
- * Creates a back navigation function that preserves query parameters
- *
- * @param router - Next.js router instance
- * @param basePath - The base path to navigate back to
- * @param preserveParams - Whether to preserve current query parameters (default: true)
- * @returns A function that navigates back with preserved parameters
- *
- * @example
- * const router = useRouter()
- * const backToPrev = createBackNavigation(router, `/datasets/${datasetId}/documents`)
- *
- * // Later, when user clicks back:
- * backToPrev()
- */
-export function createBackNavigation(
-  router: { push: (path: string) => void },
-  basePath: string,
-  preserveParams: boolean = true,
-): () => void {
-  return () => {
-    const navigationPath = createNavigationPath(basePath, preserveParams)
-    router.push(navigationPath)
-  }
-}
-
-/**
- * Extracts specific query parameters from current URL
- *
- * @param paramNames - Array of parameter names to extract
- * @returns Object with extracted parameters
- *
- * @example
- * // Current URL: /page?page=3&limit=10&keyword=test&other=value
- * const params = extractQueryParams(['page', 'limit', 'keyword'])
- * // Returns: { page: '3', limit: '10', keyword: 'test' }
- */
-export function extractQueryParams(paramNames: string[]): Record<string, string> {
-  try {
-    const searchParams = new URLSearchParams(window.location.search)
-    const extracted: Record<string, string> = {}
-
-    paramNames.forEach((name) => {
-      const value = searchParams.get(name)
-      if (value !== null)
-        extracted[name] = value
-    })
-
-    return extracted
-  }
-  catch (error) {
-    console.warn('Failed to extract query parameters:', error)
-    return {}
-  }
-}
-
-/**
- * Creates a navigation path with specific query parameters
- *
- * @param basePath - The base path
- * @param params - Object of query parameters to include
- * @returns Navigation path with specified parameters
- *
- * @example
- * const path = createNavigationPathWithParams('/datasets/123/documents', {
- *   page: '1',
- *   limit: '25',
- *   keyword: 'search term'
- * })
- * // Returns: '/datasets/123/documents?page=1&limit=25&keyword=search+term'
- */
-export function createNavigationPathWithParams(
-  basePath: string,
-  params: Record<string, string | number>,
-): string {
-  try {
-    const searchParams = new URLSearchParams()
-
-    Object.entries(params).forEach(([key, value]) => {
-      if (value !== undefined && value !== null && value !== '')
-        searchParams.set(key, String(value))
-    })
-
-    const queryString = searchParams.toString()
-    const separator = queryString ? '?' : ''
-    return `${basePath}${separator}${queryString}`
-  }
-  catch (error) {
-    console.warn('Failed to create navigation path with params:', error)
-    return basePath
-  }
-}
-
-/**
- * Merges current query parameters with new ones
- *
- * @param newParams - New parameters to add or override
- * @param preserveExisting - Whether to preserve existing parameters (default: true)
- * @returns URLSearchParams object with merged parameters
- *
- * @example
- * // Current URL: /page?page=3&limit=10
- * const merged = mergeQueryParams({ keyword: 'test', page: '1' })
- * // Results in: page=1&limit=10&keyword=test (page overridden, limit preserved, keyword added)
- */
-export function mergeQueryParams(
-  newParams: Record<string, string | number | null | undefined>,
-  preserveExisting: boolean = true,
-): URLSearchParams {
-  const searchParams = preserveExisting
-    ? new URLSearchParams(window.location.search)
-    : new URLSearchParams()
-
-  Object.entries(newParams).forEach(([key, value]) => {
-    if (value === null || value === undefined)
-      searchParams.delete(key)
-    else if (value !== '')
-      searchParams.set(key, String(value))
-  })
-
-  return searchParams
-}
-
-/**
- * Navigation utilities for common dataset/document patterns
- */
-export const datasetNavigation = {
-  /**
-   * Creates navigation back to dataset documents list with preserved state
-   */
-  backToDocuments: (router: { push: (path: string) => void }, datasetId: string) => {
-    return createBackNavigation(router, `/datasets/${datasetId}/documents`)
-  },
-
-  /**
-   * Creates navigation to document detail
-   */
-  toDocumentDetail: (router: { push: (path: string) => void }, datasetId: string, documentId: string) => {
-    return () => router.push(`/datasets/${datasetId}/documents/${documentId}`)
-  },
-
-  /**
-   * Creates navigation to document settings
-   */
-  toDocumentSettings: (router: { push: (path: string) => void }, datasetId: string, documentId: string) => {
-    return () => router.push(`/datasets/${datasetId}/documents/${documentId}/settings`)
-  },
-}