diff --git a/.claude/skills/component-refactoring/SKILL.md b/.claude/skills/component-refactoring/SKILL.md
new file mode 100644
index 0000000000..ea695ea442
--- /dev/null
+++ b/.claude/skills/component-refactoring/SKILL.md
@@ -0,0 +1,483 @@
+---
+name: component-refactoring
+description: Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
+---
+
+# Dify Component Refactoring Skill
+
+Refactor high-complexity React components in the Dify frontend codebase with the patterns and workflow below.
+
+> **Complexity Threshold**: Components with complexity > 50 (measured by `pnpm analyze-component`) should be refactored before testing.
+
+## Quick Reference
+
+### Commands (run from `web/`)
+
+Use paths relative to `web/` (e.g., `app/components/...`).
+Use `refactor-component` for refactoring prompts and `analyze-component` for testing prompts and metrics.
+
+```bash
+cd web
+
+# Generate refactoring prompt
+pnpm refactor-component <path>
+
+# Output refactoring analysis as JSON
+pnpm refactor-component <path> --json
+
+# Generate testing prompt (after refactoring)
+pnpm analyze-component <path>
+
+# Output testing analysis as JSON
+pnpm analyze-component <path> --json
+```
+
+### Complexity Analysis
+
+```bash
+# Analyze component complexity
+pnpm analyze-component <path> --json
+
+# Key metrics to check:
+# - complexity: normalized score 0-100 (target < 50)
+# - maxComplexity: highest single function complexity
+# - lineCount: total lines (target < 300)
+```
+
+### Complexity Score Interpretation
+
+| Score | Level | Action |
+|-------|-------|--------|
+| 0-25 | 🟢 Simple | Ready for testing |
+| 26-50 | 🟡 Medium | Consider minor refactoring |
+| 51-75 | 🟠 Complex | **Refactor before testing** |
+| 76-100 | 🔴 Very Complex | **Must refactor** |
+
+## Core Refactoring Patterns
+
+### Pattern 1: Extract Custom Hooks
+
+**When**: Component has complex state management, multiple `useState`/`useEffect`, or business logic mixed with UI.
+
+**Dify Convention**: Place hooks in a `hooks/` subdirectory or alongside the component as `use-<feature>.ts`.
+
+```typescript
+// ❌ Before: Complex state logic in component
+const Configuration: FC = () => {
+  const [modelConfig, setModelConfig] = useState<ModelConfig>(...)
+  const [datasetConfigs, setDatasetConfigs] = useState<DatasetConfigs>(...)
+  const [completionParams, setCompletionParams] = useState<FormValue>({})
+  
+  // 50+ lines of state management logic...
+  
+  return <div>...</div>
+}
+
+// ✅ After: Extract to custom hook
+// hooks/use-model-config.ts
+export const useModelConfig = (appId: string) => {
+  const [modelConfig, setModelConfig] = useState<ModelConfig>(...)
+  const [completionParams, setCompletionParams] = useState<FormValue>({})
+  
+  // Related state management logic here
+  
+  return { modelConfig, setModelConfig, completionParams, setCompletionParams }
+}
+
+// Component becomes cleaner
+const Configuration: FC = () => {
+  const { modelConfig, setModelConfig } = useModelConfig(appId)
+  return <div>...</div>
+}
+```
+
+**Dify Examples**:
+- `web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts`
+- `web/app/components/app/configuration/debug/hooks.tsx`
+- `web/app/components/workflow/hooks/use-workflow.ts`
+
+### Pattern 2: Extract Sub-Components
+
+**When**: Single component has multiple UI sections, conditional rendering blocks, or repeated patterns.
+
+**Dify Convention**: Place sub-components in subdirectories or as separate files in the same directory.
+
+```typescript
+// ❌ Before: Monolithic JSX with multiple sections
+const AppInfo = () => {
+  return (
+    <div>
+      {/* 100 lines of header UI */}
+      {/* 100 lines of operations UI */}
+      {/* 100 lines of modals */}
+    </div>
+  )
+}
+
+// ✅ After: Split into focused components
+// app-info/
+//   ├── index.tsx           (orchestration only)
+//   ├── app-header.tsx      (header UI)
+//   ├── app-operations.tsx  (operations UI)
+//   └── app-modals.tsx      (modal management)
+
+const AppInfo = () => {
+  const { showModal, setShowModal } = useAppInfoModals()
+  
+  return (
+    <div>
+      <AppHeader appDetail={appDetail} />
+      <AppOperations onAction={handleAction} />
+      <AppModals show={showModal} onClose={() => setShowModal(null)} />
+    </div>
+  )
+}
+```
+
+**Dify Examples**:
+- `web/app/components/app/configuration/` directory structure
+- `web/app/components/workflow/nodes/` per-node organization
+
+### Pattern 3: Simplify Conditional Logic
+
+**When**: Deep nesting (> 3 levels), complex ternaries, or multiple `if/else` chains.
+
+```typescript
+// ❌ Before: Deeply nested conditionals
+const Template = useMemo(() => {
+  if (appDetail?.mode === AppModeEnum.CHAT) {
+    switch (locale) {
+      case LanguagesSupported[1]:
+        return <TemplateChatZh />
+      case LanguagesSupported[7]:
+        return <TemplateChatJa />
+      default:
+        return <TemplateChatEn />
+    }
+  }
+  if (appDetail?.mode === AppModeEnum.ADVANCED_CHAT) {
+    // Another 15 lines...
+  }
+  // More conditions...
+}, [appDetail, locale])
+
+// ✅ After: Use lookup tables + early returns
+const TEMPLATE_MAP = {
+  [AppModeEnum.CHAT]: {
+    [LanguagesSupported[1]]: TemplateChatZh,
+    [LanguagesSupported[7]]: TemplateChatJa,
+    default: TemplateChatEn,
+  },
+  [AppModeEnum.ADVANCED_CHAT]: {
+    [LanguagesSupported[1]]: TemplateAdvancedChatZh,
+    // ...
+  },
+}
+
+const Template = useMemo(() => {
+  const modeTemplates = TEMPLATE_MAP[appDetail?.mode]
+  if (!modeTemplates) return null
+  
+  const TemplateComponent = modeTemplates[locale] || modeTemplates.default
+  return <TemplateComponent appDetail={appDetail} />
+}, [appDetail, locale])
+```
+
+### Pattern 4: Extract API/Data Logic
+
+**When**: Component directly handles API calls, data transformation, or complex async operations.
+
+**Dify Convention**: Use `@tanstack/react-query` hooks from `web/service/use-*.ts` or create custom data hooks. Project is migrating from SWR to React Query.
+
+```typescript
+// ❌ Before: API logic in component
+const MCPServiceCard = () => {
+  const [basicAppConfig, setBasicAppConfig] = useState({})
+  
+  useEffect(() => {
+    if (isBasicApp && appId) {
+      (async () => {
+        const res = await fetchAppDetail({ url: '/apps', id: appId })
+        setBasicAppConfig(res?.model_config || {})
+      })()
+    }
+  }, [appId, isBasicApp])
+  
+  // More API-related logic...
+}
+
+// ✅ After: Extract to data hook using React Query
+// use-app-config.ts
+import { useQuery } from '@tanstack/react-query'
+import { get } from '@/service/base'
+
+const NAME_SPACE = 'appConfig'
+
+export const useAppConfig = (appId: string, isBasicApp: boolean) => {
+  return useQuery({
+    enabled: isBasicApp && !!appId,
+    queryKey: [NAME_SPACE, 'detail', appId],
+    queryFn: () => get<AppDetailResponse>(`/apps/${appId}`),
+    select: data => data?.model_config || {},
+  })
+}
+
+// Component becomes cleaner
+const MCPServiceCard = () => {
+  const { data: config, isLoading } = useAppConfig(appId, isBasicApp)
+  // UI only
+}
+```
+
+**React Query Best Practices in Dify**:
+- Define `NAME_SPACE` for query key organization
+- Use `enabled` option for conditional fetching
+- Use `select` for data transformation
+- Export invalidation hooks: `useInvalidXxx`
+
+**Dify Examples**:
+- `web/service/use-workflow.ts`
+- `web/service/use-common.ts`
+- `web/service/knowledge/use-dataset.ts`
+- `web/service/knowledge/use-document.ts`
+
+### Pattern 5: Extract Modal/Dialog Management
+
+**When**: Component manages multiple modals with complex open/close states.
+
+**Dify Convention**: Modals should be extracted with their state management.
+
+```typescript
+// ❌ Before: Multiple modal states in component
+const AppInfo = () => {
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showDuplicateModal, setShowDuplicateModal] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [showSwitchModal, setShowSwitchModal] = useState(false)
+  const [showImportDSLModal, setShowImportDSLModal] = useState(false)
+  // 5+ more modal states...
+}
+
+// ✅ After: Extract to modal management hook
+type ModalType = 'edit' | 'duplicate' | 'delete' | 'switch' | 'import' | null
+
+const useAppInfoModals = () => {
+  const [activeModal, setActiveModal] = useState<ModalType>(null)
+  
+  const openModal = useCallback((type: ModalType) => setActiveModal(type), [])
+  const closeModal = useCallback(() => setActiveModal(null), [])
+  
+  return {
+    activeModal,
+    openModal,
+    closeModal,
+    isOpen: (type: ModalType) => activeModal === type,
+  }
+}
+```
+
+### Pattern 6: Extract Form Logic
+
+**When**: Complex form validation, submission handling, or field transformation.
+
+**Dify Convention**: Use `@tanstack/react-form` patterns from `web/app/components/base/form/`.
+
+```typescript
+// ✅ Use existing form infrastructure
+import { useAppForm } from '@/app/components/base/form'
+
+const ConfigForm = () => {
+  const form = useAppForm({
+    defaultValues: { name: '', description: '' },
+    onSubmit: handleSubmit,
+  })
+  
+  return <form.Provider>...</form.Provider>
+}
+```
+
+## Dify-Specific Refactoring Guidelines
+
+### 1. Context Provider Extraction
+
+**When**: Component provides complex context values with multiple states.
+
+```typescript
+// ❌ Before: Large context value object
+const value = {
+  appId, isAPIKeySet, isTrailFinished, mode, modelModeType,
+  promptMode, isAdvancedMode, isAgent, isOpenAI, isFunctionCall,
+  // 50+ more properties...
+}
+return <ConfigContext.Provider value={value}>...</ConfigContext.Provider>
+
+// ✅ After: Split into domain-specific contexts
+<ModelConfigProvider value={modelConfigValue}>
+  <DatasetConfigProvider value={datasetConfigValue}>
+    <UIConfigProvider value={uiConfigValue}>
+      {children}
+    </UIConfigProvider>
+  </DatasetConfigProvider>
+</ModelConfigProvider>
+```
+
+**Dify Reference**: `web/context/` directory structure
+
+### 2. Workflow Node Components
+
+**When**: Refactoring workflow node components (`web/app/components/workflow/nodes/`).
+
+**Conventions**:
+- Keep node logic in `use-interactions.ts`
+- Extract panel UI to separate files
+- Use `_base` components for common patterns
+
+```
+nodes/<node-type>/
+  ├── index.tsx              # Node registration
+  ├── node.tsx               # Node visual component
+  ├── panel.tsx              # Configuration panel
+  ├── use-interactions.ts    # Node-specific hooks
+  └── types.ts               # Type definitions
+```
+
+### 3. Configuration Components
+
+**When**: Refactoring app configuration components.
+
+**Conventions**:
+- Separate config sections into subdirectories
+- Use existing patterns from `web/app/components/app/configuration/`
+- Keep feature toggles in dedicated components
+
+### 4. Tool/Plugin Components
+
+**When**: Refactoring tool-related components (`web/app/components/tools/`).
+
+**Conventions**:
+- Follow existing modal patterns
+- Use service hooks from `web/service/use-tools.ts`
+- Keep provider-specific logic isolated
+
+## Refactoring Workflow
+
+### Step 1: Generate Refactoring Prompt
+
+```bash
+pnpm refactor-component <path>
+```
+
+This command will:
+- Analyze component complexity and features
+- Identify specific refactoring actions needed
+- Generate a prompt for AI assistant (auto-copied to clipboard on macOS)
+- Provide detailed requirements based on detected patterns
+
+### Step 2: Analyze Details
+
+```bash
+pnpm analyze-component <path> --json
+```
+
+Identify:
+- Total complexity score
+- Max function complexity
+- Line count
+- Features detected (state, effects, API, etc.)
+
+### Step 3: Plan
+
+Create a refactoring plan based on detected features:
+
+| Detected Feature | Refactoring Action |
+|------------------|-------------------|
+| `hasState: true` + `hasEffects: true` | Extract custom hook |
+| `hasAPI: true` | Extract data/service hook |
+| `hasEvents: true` (many) | Extract event handlers |
+| `lineCount > 300` | Split into sub-components |
+| `maxComplexity > 50` | Simplify conditional logic |
+
+### Step 4: Execute Incrementally
+
+1. **Extract one piece at a time**
+2. **Run lint, type-check, and tests after each extraction**
+3. **Verify functionality before next step**
+
+```
+For each extraction:
+  ┌────────────────────────────────────────┐
+  │ 1. Extract code                        │
+  │ 2. Run: pnpm lint:fix                  │
+  │ 3. Run: pnpm type-check:tsgo           │
+  │ 4. Run: pnpm test                      │
+  │ 5. Test functionality manually         │
+  │ 6. PASS? → Next extraction             │
+  │    FAIL? → Fix before continuing       │
+  └────────────────────────────────────────┘
+```
+
+### Step 5: Verify
+
+After refactoring:
+
+```bash
+# Re-run refactor command to verify improvements
+pnpm refactor-component <path>
+
+# If complexity < 25 and lines < 200, you'll see:
+# ✅ COMPONENT IS WELL-STRUCTURED
+
+# For detailed metrics:
+pnpm analyze-component <path> --json
+
+# Target metrics:
+# - complexity < 50
+# - lineCount < 300
+# - maxComplexity < 30
+```
+
+## Common Mistakes to Avoid
+
+### ❌ Over-Engineering
+
+```typescript
+// ❌ Too many tiny hooks
+const useButtonText = () => useState('Click')
+const useButtonDisabled = () => useState(false)
+const useButtonLoading = () => useState(false)
+
+// ✅ Cohesive hook with related state
+const useButtonState = () => {
+  const [text, setText] = useState('Click')
+  const [disabled, setDisabled] = useState(false)
+  const [loading, setLoading] = useState(false)
+  return { text, setText, disabled, setDisabled, loading, setLoading }
+}
+```
+
+### ❌ Breaking Existing Patterns
+
+- Follow existing directory structures
+- Maintain naming conventions
+- Preserve export patterns for compatibility
+
+### ❌ Premature Abstraction
+
+- Only extract when there's clear complexity benefit
+- Don't create abstractions for single-use code
+- Keep refactored code in the same domain area
+
+## References
+
+### Dify Codebase Examples
+
+- **Hook extraction**: `web/app/components/app/configuration/hooks/`
+- **Component splitting**: `web/app/components/app/configuration/`
+- **Service hooks**: `web/service/use-*.ts`
+- **Workflow patterns**: `web/app/components/workflow/hooks/`
+- **Form patterns**: `web/app/components/base/form/`
+
+### Related Skills
+
+- `frontend-testing` - For testing refactored components
+- `web/testing/testing.md` - Testing specification
diff --git a/.claude/skills/component-refactoring/references/complexity-patterns.md b/.claude/skills/component-refactoring/references/complexity-patterns.md
new file mode 100644
index 0000000000..5a0a268f38
--- /dev/null
+++ b/.claude/skills/component-refactoring/references/complexity-patterns.md
@@ -0,0 +1,493 @@
+# Complexity Reduction Patterns
+
+This document provides patterns for reducing cognitive complexity in Dify React components.
+
+## Understanding Complexity
+
+### SonarJS Cognitive Complexity
+
+The `pnpm analyze-component` tool uses SonarJS cognitive complexity metrics:
+
+- **Total Complexity**: Sum of all functions' complexity in the file
+- **Max Complexity**: Highest single function complexity
+
+### What Increases Complexity
+
+| Pattern | Complexity Impact |
+|---------|-------------------|
+| `if/else` | +1 per branch |
+| Nested conditions | +1 per nesting level |
+| `switch/case` | +1 per case |
+| `for/while/do` | +1 per loop |
+| `&&`/`||` chains | +1 per operator |
+| Nested callbacks | +1 per nesting level |
+| `try/catch` | +1 per catch |
+| Ternary expressions | +1 per nesting |
+
+## Pattern 1: Replace Conditionals with Lookup Tables
+
+**Before** (complexity: ~15):
+
+```typescript
+const Template = useMemo(() => {
+  if (appDetail?.mode === AppModeEnum.CHAT) {
+    switch (locale) {
+      case LanguagesSupported[1]:
+        return <TemplateChatZh appDetail={appDetail} />
+      case LanguagesSupported[7]:
+        return <TemplateChatJa appDetail={appDetail} />
+      default:
+        return <TemplateChatEn appDetail={appDetail} />
+    }
+  }
+  if (appDetail?.mode === AppModeEnum.ADVANCED_CHAT) {
+    switch (locale) {
+      case LanguagesSupported[1]:
+        return <TemplateAdvancedChatZh appDetail={appDetail} />
+      case LanguagesSupported[7]:
+        return <TemplateAdvancedChatJa appDetail={appDetail} />
+      default:
+        return <TemplateAdvancedChatEn appDetail={appDetail} />
+    }
+  }
+  if (appDetail?.mode === AppModeEnum.WORKFLOW) {
+    // Similar pattern...
+  }
+  return null
+}, [appDetail, locale])
+```
+
+**After** (complexity: ~3):
+
+```typescript
+// Define lookup table outside component
+const TEMPLATE_MAP: Record<AppModeEnum, Record<string, FC<TemplateProps>>> = {
+  [AppModeEnum.CHAT]: {
+    [LanguagesSupported[1]]: TemplateChatZh,
+    [LanguagesSupported[7]]: TemplateChatJa,
+    default: TemplateChatEn,
+  },
+  [AppModeEnum.ADVANCED_CHAT]: {
+    [LanguagesSupported[1]]: TemplateAdvancedChatZh,
+    [LanguagesSupported[7]]: TemplateAdvancedChatJa,
+    default: TemplateAdvancedChatEn,
+  },
+  [AppModeEnum.WORKFLOW]: {
+    [LanguagesSupported[1]]: TemplateWorkflowZh,
+    [LanguagesSupported[7]]: TemplateWorkflowJa,
+    default: TemplateWorkflowEn,
+  },
+  // ...
+}
+
+// Clean component logic
+const Template = useMemo(() => {
+  if (!appDetail?.mode) return null
+  
+  const templates = TEMPLATE_MAP[appDetail.mode]
+  if (!templates) return null
+  
+  const TemplateComponent = templates[locale] ?? templates.default
+  return <TemplateComponent appDetail={appDetail} />
+}, [appDetail, locale])
+```
+
+## Pattern 2: Use Early Returns
+
+**Before** (complexity: ~10):
+
+```typescript
+const handleSubmit = () => {
+  if (isValid) {
+    if (hasChanges) {
+      if (isConnected) {
+        submitData()
+      } else {
+        showConnectionError()
+      }
+    } else {
+      showNoChangesMessage()
+    }
+  } else {
+    showValidationError()
+  }
+}
+```
+
+**After** (complexity: ~4):
+
+```typescript
+const handleSubmit = () => {
+  if (!isValid) {
+    showValidationError()
+    return
+  }
+  
+  if (!hasChanges) {
+    showNoChangesMessage()
+    return
+  }
+  
+  if (!isConnected) {
+    showConnectionError()
+    return
+  }
+  
+  submitData()
+}
+```
+
+## Pattern 3: Extract Complex Conditions
+
+**Before** (complexity: high):
+
+```typescript
+const canPublish = (() => {
+  if (mode !== AppModeEnum.COMPLETION) {
+    if (!isAdvancedMode)
+      return true
+
+    if (modelModeType === ModelModeType.completion) {
+      if (!hasSetBlockStatus.history || !hasSetBlockStatus.query)
+        return false
+      return true
+    }
+    return true
+  }
+  return !promptEmpty
+})()
+```
+
+**After** (complexity: lower):
+
+```typescript
+// Extract to named functions
+const canPublishInCompletionMode = () => !promptEmpty
+
+const canPublishInChatMode = () => {
+  if (!isAdvancedMode) return true
+  if (modelModeType !== ModelModeType.completion) return true
+  return hasSetBlockStatus.history && hasSetBlockStatus.query
+}
+
+// Clean main logic
+const canPublish = mode === AppModeEnum.COMPLETION
+  ? canPublishInCompletionMode()
+  : canPublishInChatMode()
+```
+
+## Pattern 4: Replace Chained Ternaries
+
+**Before** (complexity: ~5):
+
+```typescript
+const statusText = serverActivated
+  ? t('status.running')
+  : serverPublished
+    ? t('status.inactive')
+    : appUnpublished
+      ? t('status.unpublished')
+      : t('status.notConfigured')
+```
+
+**After** (complexity: ~2):
+
+```typescript
+const getStatusText = () => {
+  if (serverActivated) return t('status.running')
+  if (serverPublished) return t('status.inactive')
+  if (appUnpublished) return t('status.unpublished')
+  return t('status.notConfigured')
+}
+
+const statusText = getStatusText()
+```
+
+Or use lookup:
+
+```typescript
+const STATUS_TEXT_MAP = {
+  running: 'status.running',
+  inactive: 'status.inactive',
+  unpublished: 'status.unpublished',
+  notConfigured: 'status.notConfigured',
+} as const
+
+const getStatusKey = (): keyof typeof STATUS_TEXT_MAP => {
+  if (serverActivated) return 'running'
+  if (serverPublished) return 'inactive'
+  if (appUnpublished) return 'unpublished'
+  return 'notConfigured'
+}
+
+const statusText = t(STATUS_TEXT_MAP[getStatusKey()])
+```
+
+## Pattern 5: Flatten Nested Loops
+
+**Before** (complexity: high):
+
+```typescript
+const processData = (items: Item[]) => {
+  const results: ProcessedItem[] = []
+  
+  for (const item of items) {
+    if (item.isValid) {
+      for (const child of item.children) {
+        if (child.isActive) {
+          for (const prop of child.properties) {
+            if (prop.value !== null) {
+              results.push({
+                itemId: item.id,
+                childId: child.id,
+                propValue: prop.value,
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  return results
+}
+```
+
+**After** (complexity: lower):
+
+```typescript
+// Use functional approach
+const processData = (items: Item[]) => {
+  return items
+    .filter(item => item.isValid)
+    .flatMap(item =>
+      item.children
+        .filter(child => child.isActive)
+        .flatMap(child =>
+          child.properties
+            .filter(prop => prop.value !== null)
+            .map(prop => ({
+              itemId: item.id,
+              childId: child.id,
+              propValue: prop.value,
+            }))
+        )
+    )
+}
+```
+
+## Pattern 6: Extract Event Handler Logic
+
+**Before** (complexity: high in component):
+
+```typescript
+const Component = () => {
+  const handleSelect = (data: DataSet[]) => {
+    if (isEqual(data.map(item => item.id), dataSets.map(item => item.id))) {
+      hideSelectDataSet()
+      return
+    }
+
+    formattingChangedDispatcher()
+    let newDatasets = data
+    if (data.find(item => !item.name)) {
+      const newSelected = produce(data, (draft) => {
+        data.forEach((item, index) => {
+          if (!item.name) {
+            const newItem = dataSets.find(i => i.id === item.id)
+            if (newItem)
+              draft[index] = newItem
+          }
+        })
+      })
+      setDataSets(newSelected)
+      newDatasets = newSelected
+    }
+    else {
+      setDataSets(data)
+    }
+    hideSelectDataSet()
+    
+    // 40 more lines of logic...
+  }
+  
+  return <div>...</div>
+}
+```
+
+**After** (complexity: lower):
+
+```typescript
+// Extract to hook or utility
+const useDatasetSelection = (dataSets: DataSet[], setDataSets: SetState<DataSet[]>) => {
+  const normalizeSelection = (data: DataSet[]) => {
+    const hasUnloadedItem = data.some(item => !item.name)
+    if (!hasUnloadedItem) return data
+    
+    return produce(data, (draft) => {
+      data.forEach((item, index) => {
+        if (!item.name) {
+          const existing = dataSets.find(i => i.id === item.id)
+          if (existing) draft[index] = existing
+        }
+      })
+    })
+  }
+  
+  const hasSelectionChanged = (newData: DataSet[]) => {
+    return !isEqual(
+      newData.map(item => item.id),
+      dataSets.map(item => item.id)
+    )
+  }
+  
+  return { normalizeSelection, hasSelectionChanged }
+}
+
+// Component becomes cleaner
+const Component = () => {
+  const { normalizeSelection, hasSelectionChanged } = useDatasetSelection(dataSets, setDataSets)
+  
+  const handleSelect = (data: DataSet[]) => {
+    if (!hasSelectionChanged(data)) {
+      hideSelectDataSet()
+      return
+    }
+    
+    formattingChangedDispatcher()
+    const normalized = normalizeSelection(data)
+    setDataSets(normalized)
+    hideSelectDataSet()
+  }
+  
+  return <div>...</div>
+}
+```
+
+## Pattern 7: Reduce Boolean Logic Complexity
+
+**Before** (complexity: ~8):
+
+```typescript
+const toggleDisabled = hasInsufficientPermissions
+  || appUnpublished
+  || missingStartNode
+  || triggerModeDisabled
+  || (isAdvancedApp && !currentWorkflow?.graph)
+  || (isBasicApp && !basicAppConfig.updated_at)
+```
+
+**After** (complexity: ~3):
+
+```typescript
+// Extract meaningful boolean functions
+const isAppReady = () => {
+  if (isAdvancedApp) return !!currentWorkflow?.graph
+  return !!basicAppConfig.updated_at
+}
+
+const hasRequiredPermissions = () => {
+  return isCurrentWorkspaceEditor && !hasInsufficientPermissions
+}
+
+const canToggle = () => {
+  if (!hasRequiredPermissions()) return false
+  if (!isAppReady()) return false
+  if (missingStartNode) return false
+  if (triggerModeDisabled) return false
+  return true
+}
+
+const toggleDisabled = !canToggle()
+```
+
+## Pattern 8: Simplify useMemo/useCallback Dependencies
+
+**Before** (complexity: multiple recalculations):
+
+```typescript
+const payload = useMemo(() => {
+  let parameters: Parameter[] = []
+  let outputParameters: OutputParameter[] = []
+
+  if (!published) {
+    parameters = (inputs || []).map((item) => ({
+      name: item.variable,
+      description: '',
+      form: 'llm',
+      required: item.required,
+      type: item.type,
+    }))
+    outputParameters = (outputs || []).map((item) => ({
+      name: item.variable,
+      description: '',
+      type: item.value_type,
+    }))
+  }
+  else if (detail && detail.tool) {
+    parameters = (inputs || []).map((item) => ({
+      // Complex transformation...
+    }))
+    outputParameters = (outputs || []).map((item) => ({
+      // Complex transformation...
+    }))
+  }
+  
+  return {
+    icon: detail?.icon || icon,
+    label: detail?.label || name,
+    // ...more fields
+  }
+}, [detail, published, workflowAppId, icon, name, description, inputs, outputs])
+```
+
+**After** (complexity: separated concerns):
+
+```typescript
+// Separate transformations
+const useParameterTransform = (inputs: InputVar[], detail?: ToolDetail, published?: boolean) => {
+  return useMemo(() => {
+    if (!published) {
+      return inputs.map(item => ({
+        name: item.variable,
+        description: '',
+        form: 'llm',
+        required: item.required,
+        type: item.type,
+      }))
+    }
+    
+    if (!detail?.tool) return []
+    
+    return inputs.map(item => ({
+      name: item.variable,
+      required: item.required,
+      type: item.type === 'paragraph' ? 'string' : item.type,
+      description: detail.tool.parameters.find(p => p.name === item.variable)?.llm_description || '',
+      form: detail.tool.parameters.find(p => p.name === item.variable)?.form || 'llm',
+    }))
+  }, [inputs, detail, published])
+}
+
+// Component uses hook
+const parameters = useParameterTransform(inputs, detail, published)
+const outputParameters = useOutputTransform(outputs, detail, published)
+
+const payload = useMemo(() => ({
+  icon: detail?.icon || icon,
+  label: detail?.label || name,
+  parameters,
+  outputParameters,
+  // ...
+}), [detail, icon, name, parameters, outputParameters])
+```
+
+## Target Metrics After Refactoring
+
+| Metric | Target |
+|--------|--------|
+| Total Complexity | < 50 |
+| Max Function Complexity | < 30 |
+| Function Length | < 30 lines |
+| Nesting Depth | ≤ 3 levels |
+| Conditional Chains | ≤ 3 conditions |
diff --git a/.claude/skills/component-refactoring/references/component-splitting.md b/.claude/skills/component-refactoring/references/component-splitting.md
new file mode 100644
index 0000000000..78a3389100
--- /dev/null
+++ b/.claude/skills/component-refactoring/references/component-splitting.md
@@ -0,0 +1,477 @@
+# Component Splitting Patterns
+
+This document provides detailed guidance on splitting large components into smaller, focused components in Dify.
+
+## When to Split Components
+
+Split a component when you identify:
+
+1. **Multiple UI sections** - Distinct visual areas with minimal coupling that can be composed independently
+1. **Conditional rendering blocks** - Large `{condition && <JSX />}` blocks
+1. **Repeated patterns** - Similar UI structures used multiple times
+1. **300+ lines** - Component exceeds manageable size
+1. **Modal clusters** - Multiple modals rendered in one component
+
+## Splitting Strategies
+
+### Strategy 1: Section-Based Splitting
+
+Identify visual sections and extract each as a component.
+
+```typescript
+// ❌ Before: Monolithic component (500+ lines)
+const ConfigurationPage = () => {
+  return (
+    <div>
+      {/* Header Section - 50 lines */}
+      <div className="header">
+        <h1>{t('configuration.title')}</h1>
+        <div className="actions">
+          {isAdvancedMode && <Badge>Advanced</Badge>}
+          <ModelParameterModal ... />
+          <AppPublisher ... />
+        </div>
+      </div>
+      
+      {/* Config Section - 200 lines */}
+      <div className="config">
+        <Config />
+      </div>
+      
+      {/* Debug Section - 150 lines */}
+      <div className="debug">
+        <Debug ... />
+      </div>
+      
+      {/* Modals Section - 100 lines */}
+      {showSelectDataSet && <SelectDataSet ... />}
+      {showHistoryModal && <EditHistoryModal ... />}
+      {showUseGPT4Confirm && <Confirm ... />}
+    </div>
+  )
+}
+
+// ✅ After: Split into focused components
+// configuration/
+//   ├── index.tsx              (orchestration)
+//   ├── configuration-header.tsx
+//   ├── configuration-content.tsx
+//   ├── configuration-debug.tsx
+//   └── configuration-modals.tsx
+
+// configuration-header.tsx
+interface ConfigurationHeaderProps {
+  isAdvancedMode: boolean
+  onPublish: () => void
+}
+
+const ConfigurationHeader: FC<ConfigurationHeaderProps> = ({
+  isAdvancedMode,
+  onPublish,
+}) => {
+  const { t } = useTranslation()
+  
+  return (
+    <div className="header">
+      <h1>{t('configuration.title')}</h1>
+      <div className="actions">
+        {isAdvancedMode && <Badge>Advanced</Badge>}
+        <ModelParameterModal ... />
+        <AppPublisher onPublish={onPublish} />
+      </div>
+    </div>
+  )
+}
+
+// index.tsx (orchestration only)
+const ConfigurationPage = () => {
+  const { modelConfig, setModelConfig } = useModelConfig()
+  const { activeModal, openModal, closeModal } = useModalState()
+  
+  return (
+    <div>
+      <ConfigurationHeader
+        isAdvancedMode={isAdvancedMode}
+        onPublish={handlePublish}
+      />
+      <ConfigurationContent
+        modelConfig={modelConfig}
+        onConfigChange={setModelConfig}
+      />
+      {!isMobile && (
+        <ConfigurationDebug
+          inputs={inputs}
+          onSetting={handleSetting}
+        />
+      )}
+      <ConfigurationModals
+        activeModal={activeModal}
+        onClose={closeModal}
+      />
+    </div>
+  )
+}
+```
+
+### Strategy 2: Conditional Block Extraction
+
+Extract large conditional rendering blocks.
+
+```typescript
+// ❌ Before: Large conditional blocks
+const AppInfo = () => {
+  return (
+    <div>
+      {expand ? (
+        <div className="expanded">
+          {/* 100 lines of expanded view */}
+        </div>
+      ) : (
+        <div className="collapsed">
+          {/* 50 lines of collapsed view */}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ✅ After: Separate view components
+const AppInfoExpanded: FC<AppInfoViewProps> = ({ appDetail, onAction }) => {
+  return (
+    <div className="expanded">
+      {/* Clean, focused expanded view */}
+    </div>
+  )
+}
+
+const AppInfoCollapsed: FC<AppInfoViewProps> = ({ appDetail, onAction }) => {
+  return (
+    <div className="collapsed">
+      {/* Clean, focused collapsed view */}
+    </div>
+  )
+}
+
+const AppInfo = () => {
+  return (
+    <div>
+      {expand
+        ? <AppInfoExpanded appDetail={appDetail} onAction={handleAction} />
+        : <AppInfoCollapsed appDetail={appDetail} onAction={handleAction} />
+      }
+    </div>
+  )
+}
+```
+
+### Strategy 3: Modal Extraction
+
+Extract modals with their trigger logic.
+
+```typescript
+// ❌ Before: Multiple modals in one component
+const AppInfo = () => {
+  const [showEdit, setShowEdit] = useState(false)
+  const [showDuplicate, setShowDuplicate] = useState(false)
+  const [showDelete, setShowDelete] = useState(false)
+  const [showSwitch, setShowSwitch] = useState(false)
+  
+  const onEdit = async (data) => { /* 20 lines */ }
+  const onDuplicate = async (data) => { /* 20 lines */ }
+  const onDelete = async () => { /* 15 lines */ }
+  
+  return (
+    <div>
+      {/* Main content */}
+      
+      {showEdit && <EditModal onConfirm={onEdit} onClose={() => setShowEdit(false)} />}
+      {showDuplicate && <DuplicateModal onConfirm={onDuplicate} onClose={() => setShowDuplicate(false)} />}
+      {showDelete && <DeleteConfirm onConfirm={onDelete} onClose={() => setShowDelete(false)} />}
+      {showSwitch && <SwitchModal ... />}
+    </div>
+  )
+}
+
+// ✅ After: Modal manager component
+// app-info-modals.tsx
+type ModalType = 'edit' | 'duplicate' | 'delete' | 'switch' | null
+
+interface AppInfoModalsProps {
+  appDetail: AppDetail
+  activeModal: ModalType
+  onClose: () => void
+  onSuccess: () => void
+}
+
+const AppInfoModals: FC<AppInfoModalsProps> = ({
+  appDetail,
+  activeModal,
+  onClose,
+  onSuccess,
+}) => {
+  const handleEdit = async (data) => { /* logic */ }
+  const handleDuplicate = async (data) => { /* logic */ }
+  const handleDelete = async () => { /* logic */ }
+
+  return (
+    <>
+      {activeModal === 'edit' && (
+        <EditModal
+          appDetail={appDetail}
+          onConfirm={handleEdit}
+          onClose={onClose}
+        />
+      )}
+      {activeModal === 'duplicate' && (
+        <DuplicateModal
+          appDetail={appDetail}
+          onConfirm={handleDuplicate}
+          onClose={onClose}
+        />
+      )}
+      {activeModal === 'delete' && (
+        <DeleteConfirm
+          onConfirm={handleDelete}
+          onClose={onClose}
+        />
+      )}
+      {activeModal === 'switch' && (
+        <SwitchModal
+          appDetail={appDetail}
+          onClose={onClose}
+        />
+      )}
+    </>
+  )
+}
+
+// Parent component
+const AppInfo = () => {
+  const { activeModal, openModal, closeModal } = useModalState()
+  
+  return (
+    <div>
+      {/* Main content with openModal triggers */}
+      <Button onClick={() => openModal('edit')}>Edit</Button>
+      
+      <AppInfoModals
+        appDetail={appDetail}
+        activeModal={activeModal}
+        onClose={closeModal}
+        onSuccess={handleSuccess}
+      />
+    </div>
+  )
+}
+```
+
+### Strategy 4: List Item Extraction
+
+Extract repeated item rendering.
+
+```typescript
+// ❌ Before: Inline item rendering
+const OperationsList = () => {
+  return (
+    <div>
+      {operations.map(op => (
+        <div key={op.id} className="operation-item">
+          <span className="icon">{op.icon}</span>
+          <span className="title">{op.title}</span>
+          <span className="description">{op.description}</span>
+          <button onClick={() => op.onClick()}>
+            {op.actionLabel}
+          </button>
+          {op.badge && <Badge>{op.badge}</Badge>}
+          {/* More complex rendering... */}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ✅ After: Extracted item component
+interface OperationItemProps {
+  operation: Operation
+  onAction: (id: string) => void
+}
+
+const OperationItem: FC<OperationItemProps> = ({ operation, onAction }) => {
+  return (
+    <div className="operation-item">
+      <span className="icon">{operation.icon}</span>
+      <span className="title">{operation.title}</span>
+      <span className="description">{operation.description}</span>
+      <button onClick={() => onAction(operation.id)}>
+        {operation.actionLabel}
+      </button>
+      {operation.badge && <Badge>{operation.badge}</Badge>}
+    </div>
+  )
+}
+
+const OperationsList = () => {
+  const handleAction = useCallback((id: string) => {
+    const op = operations.find(o => o.id === id)
+    op?.onClick()
+  }, [operations])
+
+  return (
+    <div>
+      {operations.map(op => (
+        <OperationItem
+          key={op.id}
+          operation={op}
+          onAction={handleAction}
+        />
+      ))}
+    </div>
+  )
+}
+```
+
+## Directory Structure Patterns
+
+### Pattern A: Flat Structure (Simple Components)
+
+For components with 2-3 sub-components:
+
+```
+component-name/
+  ├── index.tsx           # Main component
+  ├── sub-component-a.tsx
+  ├── sub-component-b.tsx
+  └── types.ts            # Shared types
+```
+
+### Pattern B: Nested Structure (Complex Components)
+
+For components with many sub-components:
+
+```
+component-name/
+  ├── index.tsx           # Main orchestration
+  ├── types.ts            # Shared types
+  ├── hooks/
+  │   ├── use-feature-a.ts
+  │   └── use-feature-b.ts
+  ├── components/
+  │   ├── header/
+  │   │   └── index.tsx
+  │   ├── content/
+  │   │   └── index.tsx
+  │   └── modals/
+  │       └── index.tsx
+  └── utils/
+      └── helpers.ts
+```
+
+### Pattern C: Feature-Based Structure (Dify Standard)
+
+Following Dify's existing patterns:
+
+```
+configuration/
+  ├── index.tsx           # Main page component
+  ├── base/               # Base/shared components
+  │   ├── feature-panel/
+  │   ├── group-name/
+  │   └── operation-btn/
+  ├── config/             # Config section
+  │   ├── index.tsx
+  │   ├── agent/
+  │   └── automatic/
+  ├── dataset-config/     # Dataset section
+  │   ├── index.tsx
+  │   ├── card-item/
+  │   └── params-config/
+  ├── debug/              # Debug section
+  │   ├── index.tsx
+  │   └── hooks.tsx
+  └── hooks/              # Shared hooks
+      └── use-advanced-prompt-config.ts
+```
+
+## Props Design
+
+### Minimal Props Principle
+
+Pass only what's needed:
+
+```typescript
+// ❌ Bad: Passing entire objects when only some fields needed
+<ConfigHeader appDetail={appDetail} modelConfig={modelConfig} />
+
+// ✅ Good: Destructure to minimum required
+<ConfigHeader
+  appName={appDetail.name}
+  isAdvancedMode={modelConfig.isAdvanced}
+  onPublish={handlePublish}
+/>
+```
+
+### Callback Props Pattern
+
+Use callbacks for child-to-parent communication:
+
+```typescript
+// Parent
+const Parent = () => {
+  const [value, setValue] = useState('')
+  
+  return (
+    <Child
+      value={value}
+      onChange={setValue}
+      onSubmit={handleSubmit}
+    />
+  )
+}
+
+// Child
+interface ChildProps {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+}
+
+const Child: FC<ChildProps> = ({ value, onChange, onSubmit }) => {
+  return (
+    <div>
+      <input value={value} onChange={e => onChange(e.target.value)} />
+      <button onClick={onSubmit}>Submit</button>
+    </div>
+  )
+}
+```
+
+### Render Props for Flexibility
+
+When sub-components need parent context:
+
+```typescript
+interface ListProps<T> {
+  items: T[]
+  renderItem: (item: T, index: number) => React.ReactNode
+  renderEmpty?: () => React.ReactNode
+}
+
+function List<T>({ items, renderItem, renderEmpty }: ListProps<T>) {
+  if (items.length === 0 && renderEmpty) {
+    return <>{renderEmpty()}</>
+  }
+  
+  return (
+    <div>
+      {items.map((item, index) => renderItem(item, index))}
+    </div>
+  )
+}
+
+// Usage
+<List
+  items={operations}
+  renderItem={(op, i) => <OperationItem key={i} operation={op} />}
+  renderEmpty={() => <EmptyState message="No operations" />}
+/>
+```
diff --git a/.claude/skills/component-refactoring/references/hook-extraction.md b/.claude/skills/component-refactoring/references/hook-extraction.md
new file mode 100644
index 0000000000..a8d75deffd
--- /dev/null
+++ b/.claude/skills/component-refactoring/references/hook-extraction.md
@@ -0,0 +1,317 @@
+# Hook Extraction Patterns
+
+This document provides detailed guidance on extracting custom hooks from complex components in Dify.
+
+## When to Extract Hooks
+
+Extract a custom hook when you identify:
+
+1. **Coupled state groups** - Multiple `useState` hooks that are always used together
+1. **Complex effects** - `useEffect` with multiple dependencies or cleanup logic
+1. **Business logic** - Data transformations, validations, or calculations
+1. **Reusable patterns** - Logic that appears in multiple components
+
+## Extraction Process
+
+### Step 1: Identify State Groups
+
+Look for state variables that are logically related:
+
+```typescript
+// ❌ These belong together - extract to hook
+const [modelConfig, setModelConfig] = useState<ModelConfig>(...)
+const [completionParams, setCompletionParams] = useState<FormValue>({})
+const [modelModeType, setModelModeType] = useState<ModelModeType>(...)
+
+// These are model-related state that should be in useModelConfig()
+```
+
+### Step 2: Identify Related Effects
+
+Find effects that modify the grouped state:
+
+```typescript
+// ❌ These effects belong with the state above
+useEffect(() => {
+  if (hasFetchedDetail && !modelModeType) {
+    const mode = currModel?.model_properties.mode
+    if (mode) {
+      const newModelConfig = produce(modelConfig, (draft) => {
+        draft.mode = mode
+      })
+      setModelConfig(newModelConfig)
+    }
+  }
+}, [textGenerationModelList, hasFetchedDetail, modelModeType, currModel])
+```
+
+### Step 3: Create the Hook
+
+```typescript
+// hooks/use-model-config.ts
+import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ModelConfig } from '@/models/debug'
+import { produce } from 'immer'
+import { useEffect, useState } from 'react'
+import { ModelModeType } from '@/types/app'
+
+interface UseModelConfigParams {
+  initialConfig?: Partial<ModelConfig>
+  currModel?: { model_properties?: { mode?: ModelModeType } }
+  hasFetchedDetail: boolean
+}
+
+interface UseModelConfigReturn {
+  modelConfig: ModelConfig
+  setModelConfig: (config: ModelConfig) => void
+  completionParams: FormValue
+  setCompletionParams: (params: FormValue) => void
+  modelModeType: ModelModeType
+}
+
+export const useModelConfig = ({
+  initialConfig,
+  currModel,
+  hasFetchedDetail,
+}: UseModelConfigParams): UseModelConfigReturn => {
+  const [modelConfig, setModelConfig] = useState<ModelConfig>({
+    provider: 'langgenius/openai/openai',
+    model_id: 'gpt-3.5-turbo',
+    mode: ModelModeType.unset,
+    // ... default values
+    ...initialConfig,
+  })
+  
+  const [completionParams, setCompletionParams] = useState<FormValue>({})
+  
+  const modelModeType = modelConfig.mode
+
+  // Fill old app data missing model mode
+  useEffect(() => {
+    if (hasFetchedDetail && !modelModeType) {
+      const mode = currModel?.model_properties?.mode
+      if (mode) {
+        setModelConfig(produce(modelConfig, (draft) => {
+          draft.mode = mode
+        }))
+      }
+    }
+  }, [hasFetchedDetail, modelModeType, currModel])
+
+  return {
+    modelConfig,
+    setModelConfig,
+    completionParams,
+    setCompletionParams,
+    modelModeType,
+  }
+}
+```
+
+### Step 4: Update Component
+
+```typescript
+// Before: 50+ lines of state management
+const Configuration: FC = () => {
+  const [modelConfig, setModelConfig] = useState<ModelConfig>(...)
+  // ... lots of related state and effects
+}
+
+// After: Clean component
+const Configuration: FC = () => {
+  const {
+    modelConfig,
+    setModelConfig,
+    completionParams,
+    setCompletionParams,
+    modelModeType,
+  } = useModelConfig({
+    currModel,
+    hasFetchedDetail,
+  })
+  
+  // Component now focuses on UI
+}
+```
+
+## Naming Conventions
+
+### Hook Names
+
+- Use `use` prefix: `useModelConfig`, `useDatasetConfig`
+- Be specific: `useAdvancedPromptConfig` not `usePrompt`
+- Include domain: `useWorkflowVariables`, `useMCPServer`
+
+### File Names
+
+- Kebab-case: `use-model-config.ts`
+- Place in `hooks/` subdirectory when multiple hooks exist
+- Place alongside component for single-use hooks
+
+### Return Type Names
+
+- Suffix with `Return`: `UseModelConfigReturn`
+- Suffix params with `Params`: `UseModelConfigParams`
+
+## Common Hook Patterns in Dify
+
+### 1. Data Fetching Hook (React Query)
+
+```typescript
+// Pattern: Use @tanstack/react-query for data fetching
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { get } from '@/service/base'
+import { useInvalid } from '@/service/use-base'
+
+const NAME_SPACE = 'appConfig'
+
+// Query keys for cache management
+export const appConfigQueryKeys = {
+  detail: (appId: string) => [NAME_SPACE, 'detail', appId] as const,
+}
+
+// Main data hook
+export const useAppConfig = (appId: string) => {
+  return useQuery({
+    enabled: !!appId,
+    queryKey: appConfigQueryKeys.detail(appId),
+    queryFn: () => get<AppDetailResponse>(`/apps/${appId}`),
+    select: data => data?.model_config || null,
+  })
+}
+
+// Invalidation hook for refreshing data
+export const useInvalidAppConfig = () => {
+  return useInvalid([NAME_SPACE])
+}
+
+// Usage in component
+const Component = () => {
+  const { data: config, isLoading, error, refetch } = useAppConfig(appId)
+  const invalidAppConfig = useInvalidAppConfig()
+  
+  const handleRefresh = () => {
+    invalidAppConfig() // Invalidates cache and triggers refetch
+  }
+  
+  return <div>...</div>
+}
+```
+
+### 2. Form State Hook
+
+```typescript
+// Pattern: Form state + validation + submission
+export const useConfigForm = (initialValues: ConfigFormValues) => {
+  const [values, setValues] = useState(initialValues)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const validate = useCallback(() => {
+    const newErrors: Record<string, string> = {}
+    if (!values.name) newErrors.name = 'Name is required'
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }, [values])
+
+  const handleChange = useCallback((field: string, value: any) => {
+    setValues(prev => ({ ...prev, [field]: value }))
+  }, [])
+
+  const handleSubmit = useCallback(async (onSubmit: (values: ConfigFormValues) => Promise<void>) => {
+    if (!validate()) return
+    setIsSubmitting(true)
+    try {
+      await onSubmit(values)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [values, validate])
+
+  return { values, errors, isSubmitting, handleChange, handleSubmit }
+}
+```
+
+### 3. Modal State Hook
+
+```typescript
+// Pattern: Multiple modal management
+type ModalType = 'edit' | 'delete' | 'duplicate' | null
+
+export const useModalState = () => {
+  const [activeModal, setActiveModal] = useState<ModalType>(null)
+  const [modalData, setModalData] = useState<any>(null)
+
+  const openModal = useCallback((type: ModalType, data?: any) => {
+    setActiveModal(type)
+    setModalData(data)
+  }, [])
+
+  const closeModal = useCallback(() => {
+    setActiveModal(null)
+    setModalData(null)
+  }, [])
+
+  return {
+    activeModal,
+    modalData,
+    openModal,
+    closeModal,
+    isOpen: useCallback((type: ModalType) => activeModal === type, [activeModal]),
+  }
+}
+```
+
+### 4. Toggle/Boolean Hook
+
+```typescript
+// Pattern: Boolean state with convenience methods
+export const useToggle = (initialValue = false) => {
+  const [value, setValue] = useState(initialValue)
+
+  const toggle = useCallback(() => setValue(v => !v), [])
+  const setTrue = useCallback(() => setValue(true), [])
+  const setFalse = useCallback(() => setValue(false), [])
+
+  return [value, { toggle, setTrue, setFalse, set: setValue }] as const
+}
+
+// Usage
+const [isExpanded, { toggle, setTrue: expand, setFalse: collapse }] = useToggle()
+```
+
+## Testing Extracted Hooks
+
+After extraction, test hooks in isolation:
+
+```typescript
+// use-model-config.spec.ts
+import { renderHook, act } from '@testing-library/react'
+import { useModelConfig } from './use-model-config'
+
+describe('useModelConfig', () => {
+  it('should initialize with default values', () => {
+    const { result } = renderHook(() => useModelConfig({
+      hasFetchedDetail: false,
+    }))
+
+    expect(result.current.modelConfig.provider).toBe('langgenius/openai/openai')
+    expect(result.current.modelModeType).toBe(ModelModeType.unset)
+  })
+
+  it('should update model config', () => {
+    const { result } = renderHook(() => useModelConfig({
+      hasFetchedDetail: true,
+    }))
+
+    act(() => {
+      result.current.setModelConfig({
+        ...result.current.modelConfig,
+        model_id: 'gpt-4',
+      })
+    })
+
+    expect(result.current.modelConfig.model_id).toBe('gpt-4')
+  })
+})
+```
diff --git a/.claude/skills/frontend-testing/SKILL.md b/.claude/skills/frontend-testing/SKILL.md
index 7475513ba0..dd9677a78e 100644
--- a/.claude/skills/frontend-testing/SKILL.md
+++ b/.claude/skills/frontend-testing/SKILL.md
@@ -49,10 +49,10 @@ pnpm test
 pnpm test:watch
 
 # Run specific file
-pnpm test -- path/to/file.spec.tsx
+pnpm test path/to/file.spec.tsx
 
 # Generate coverage report
-pnpm test -- --coverage
+pnpm test:coverage
 
 # Analyze component complexity
 pnpm analyze-component <path>
@@ -155,7 +155,7 @@ describe('ComponentName', () => {
 For each file:
   ┌────────────────────────────────────────┐
   │ 1. Write test                          │
-  │ 2. Run: pnpm test -- <file>.spec.tsx   │
+  │ 2. Run: pnpm test <file>.spec.tsx      │
   │ 3. PASS? → Mark complete, next file    │
   │    FAIL? → Fix first, then continue    │
   └────────────────────────────────────────┘
@@ -318,5 +318,5 @@ For more detailed information, refer to:
 
 - `web/vitest.config.ts` - Vitest configuration
 - `web/vitest.setup.ts` - Test environment setup
-- `web/testing/analyze-component.js` - Component analysis tool
+- `web/scripts/analyze-component.js` - Component analysis tool
 - Modules are not mocked automatically. Global mocks live in `web/vitest.setup.ts` (for example `react-i18next`, `next/image`); mock other modules like `ky` or `mime` locally in test files.
diff --git a/.claude/skills/frontend-testing/assets/component-test.template.tsx b/.claude/skills/frontend-testing/assets/component-test.template.tsx
index 92dd797c83..c39baff916 100644
--- a/.claude/skills/frontend-testing/assets/component-test.template.tsx
+++ b/.claude/skills/frontend-testing/assets/component-test.template.tsx
@@ -198,7 +198,7 @@ describe('ComponentName', () => {
   })
 
   // --------------------------------------------------------------------------
-  // Async Operations (if component fetches data - useSWR, useQuery, fetch)
+  // Async Operations (if component fetches data - useQuery, fetch)
   // --------------------------------------------------------------------------
   // WHY: Async operations have 3 states users experience: loading, success, error
   describe('Async Operations', () => {
diff --git a/.claude/skills/frontend-testing/references/checklist.md b/.claude/skills/frontend-testing/references/checklist.md
index aad80b120e..1ff2b27bbb 100644
--- a/.claude/skills/frontend-testing/references/checklist.md
+++ b/.claude/skills/frontend-testing/references/checklist.md
@@ -114,15 +114,15 @@ For the current file being tested:
 
 **Run these checks after EACH test file, not just at the end:**
 
-- [ ] Run `pnpm test -- path/to/file.spec.tsx` - **MUST PASS before next file**
+- [ ] Run `pnpm test path/to/file.spec.tsx` - **MUST PASS before next file**
 - [ ] Fix any failures immediately
 - [ ] Mark file as complete in todo list
 - [ ] Only then proceed to next file
 
 ### After All Files Complete
 
-- [ ] Run full directory test: `pnpm test -- path/to/directory/`
-- [ ] Check coverage report: `pnpm test -- --coverage`
+- [ ] Run full directory test: `pnpm test path/to/directory/`
+- [ ] Check coverage report: `pnpm test:coverage`
 - [ ] Run `pnpm lint:fix` on all test files
 - [ ] Run `pnpm type-check:tsgo`
 
@@ -186,16 +186,16 @@ Always test these scenarios:
 
 ```bash
 # Run specific test
-pnpm test -- path/to/file.spec.tsx
+pnpm test path/to/file.spec.tsx
 
 # Run with coverage
-pnpm test -- --coverage path/to/file.spec.tsx
+pnpm test:coverage path/to/file.spec.tsx
 
 # Watch mode
-pnpm test:watch -- path/to/file.spec.tsx
+pnpm test:watch path/to/file.spec.tsx
 
 # Update snapshots (use sparingly)
-pnpm test -- -u path/to/file.spec.tsx
+pnpm test -u path/to/file.spec.tsx
 
 # Analyze component
 pnpm analyze-component path/to/component.tsx
diff --git a/.claude/skills/frontend-testing/references/mocking.md b/.claude/skills/frontend-testing/references/mocking.md
index 51920ebc64..23889c8d3d 100644
--- a/.claude/skills/frontend-testing/references/mocking.md
+++ b/.claude/skills/frontend-testing/references/mocking.md
@@ -242,32 +242,9 @@ describe('Component with Context', () => {
 })
 ```
 
-### 7. SWR / React Query
+### 7. React Query
 
 ```typescript
-// SWR
-vi.mock('swr', () => ({
-  __esModule: true,
-  default: vi.fn(),
-}))
-
-import useSWR from 'swr'
-const mockedUseSWR = vi.mocked(useSWR)
-
-describe('Component with SWR', () => {
-  it('should show loading state', () => {
-    mockedUseSWR.mockReturnValue({
-      data: undefined,
-      error: undefined,
-      isLoading: true,
-    })
-    
-    render(<Component />)
-    expect(screen.getByText(/loading/i)).toBeInTheDocument()
-  })
-})
-
-// React Query
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const createTestQueryClient = () => new QueryClient({
diff --git a/.claude/skills/frontend-testing/references/workflow.md b/.claude/skills/frontend-testing/references/workflow.md
index b0f2994bde..009c3e013b 100644
--- a/.claude/skills/frontend-testing/references/workflow.md
+++ b/.claude/skills/frontend-testing/references/workflow.md
@@ -35,7 +35,7 @@ When testing a **single component, hook, or utility**:
 2. Run `pnpm analyze-component <path>` (if available)
 3. Check complexity score and features detected
 4. Write the test file
-5. Run test: `pnpm test -- <file>.spec.tsx`
+5. Run test: `pnpm test <file>.spec.tsx`
 6. Fix any failures
 7. Verify coverage meets goals (100% function, >95% branch)
 ```
@@ -80,7 +80,7 @@ Process files in this recommended order:
 ```
 ┌─────────────────────────────────────────────┐
 │  1. Write test file                         │
-│  2. Run: pnpm test -- <file>.spec.tsx       │
+│  2. Run: pnpm test <file>.spec.tsx          │
 │  3. If FAIL → Fix immediately, re-run       │
 │  4. If PASS → Mark complete in todo list    │
 │  5. ONLY THEN proceed to next file          │
@@ -95,10 +95,10 @@ After all individual tests pass:
 
 ```bash
 # Run all tests in the directory together
-pnpm test -- path/to/directory/
+pnpm test path/to/directory/
 
 # Check coverage
-pnpm test -- --coverage path/to/directory/
+pnpm test:coverage path/to/directory/
 ```
 
 ## Component Complexity Guidelines
@@ -201,9 +201,9 @@ Run pnpm test  ← Multiple failures, hard to debug
 ```
 # GOOD: Incremental with verification
 Write component-a.spec.tsx
-Run pnpm test -- component-a.spec.tsx ✅
+Run pnpm test component-a.spec.tsx ✅
 Write component-b.spec.tsx
-Run pnpm test -- component-b.spec.tsx ✅
+Run pnpm test component-b.spec.tsx ✅
 ...continue...
 ```
 
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index dbced47988..97027c2218 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -13,12 +13,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
+      - name: Check Docker Compose inputs
+        id: docker-compose-changes
+        uses: tj-actions/changed-files@v46
+        with:
+          files: |
+            docker/generate_docker_compose
+            docker/.env.example
+            docker/docker-compose-template.yaml
+            docker/docker-compose.yaml
       - uses: actions/setup-python@v5
         with:
           python-version: "3.11"
 
       - uses: astral-sh/setup-uv@v6
 
+      - name: Generate Docker Compose
+        if: steps.docker-compose-changes.outputs.any_changed == 'true'
+        run: |
+          cd docker
+          ./generate_docker_compose
+
       - run: |
           cd api
           uv sync --dev
diff --git a/.github/workflows/style.yml b/.github/workflows/style.yml
index 2fb8121f74..8710f422fc 100644
--- a/.github/workflows/style.yml
+++ b/.github/workflows/style.yml
@@ -108,36 +108,6 @@ jobs:
         working-directory: ./web
         run: pnpm run type-check:tsgo
 
-  docker-compose-template:
-    name: Docker Compose Template
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-
-      - name: Check changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v46
-        with:
-          files: |
-            docker/generate_docker_compose
-            docker/.env.example
-            docker/docker-compose-template.yaml
-            docker/docker-compose.yaml
-
-      - name: Generate Docker Compose
-        if: steps.changed-files.outputs.any_changed == 'true'
-        run: |
-          cd docker
-          ./generate_docker_compose
-
-      - name: Check for changes
-        if: steps.changed-files.outputs.any_changed == 'true'
-        run: git diff --exit-code
-
   superlinter:
     name: SuperLinter
     runs-on: ubuntu-latest
diff --git a/.github/workflows/translate-i18n-base-on-english.yml b/.github/workflows/translate-i18n-base-on-english.yml
index 8bb82d5d44..87e24a4f90 100644
--- a/.github/workflows/translate-i18n-base-on-english.yml
+++ b/.github/workflows/translate-i18n-base-on-english.yml
@@ -1,4 +1,4 @@
-name: Check i18n Files and Create PR
+name: Translate i18n Files Based on English
 
 on:
   push:
@@ -67,25 +67,19 @@ jobs:
         working-directory: ./web
         run: pnpm run auto-gen-i18n ${{ env.FILE_ARGS }}
 
-      - name: Generate i18n type definitions
-        if: env.FILES_CHANGED == 'true'
-        working-directory: ./web
-        run: pnpm run gen:i18n-types
-
       - name: Create Pull Request
         if: env.FILES_CHANGED == 'true'
         uses: peter-evans/create-pull-request@v6
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           commit-message: 'chore(i18n): update translations based on en-US changes'
-          title: 'chore(i18n): translate i18n files and update type definitions'
+          title: 'chore(i18n): translate i18n files based on en-US changes'
           body: |
-            This PR was automatically created to update i18n files and TypeScript type definitions based on changes in en-US locale.
+            This PR was automatically created to update i18n translation files based on changes in en-US locale.
 
             **Triggered by:** ${{ github.sha }}
 
             **Changes included:**
             - Updated translation files for all locales
-            - Regenerated TypeScript type definitions for type safety
           branch: chore/automated-i18n-updates-${{ github.sha }}
           delete-branch: true
diff --git a/.github/workflows/web-tests.yml b/.github/workflows/web-tests.yml
index 8eba0f084b..1a8925e38d 100644
--- a/.github/workflows/web-tests.yml
+++ b/.github/workflows/web-tests.yml
@@ -38,11 +38,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Check i18n types synchronization
-        run: pnpm run check:i18n-types
-
       - name: Run tests
-        run: pnpm test --coverage
+        run: pnpm test:coverage
 
       - name: Coverage Summary
         if: always()
diff --git a/api/controllers/common/file_response.py b/api/controllers/common/file_response.py
new file mode 100644
index 0000000000..ca8ea3d52e
--- /dev/null
+++ b/api/controllers/common/file_response.py
@@ -0,0 +1,57 @@
+import os
+from email.message import Message
+from urllib.parse import quote
+
+from flask import Response
+
+HTML_MIME_TYPES = frozenset({"text/html", "application/xhtml+xml"})
+HTML_EXTENSIONS = frozenset({"html", "htm"})
+
+
+def _normalize_mime_type(mime_type: str | None) -> str:
+    if not mime_type:
+        return ""
+    message = Message()
+    message["Content-Type"] = mime_type
+    return message.get_content_type().strip().lower()
+
+
+def _is_html_extension(extension: str | None) -> bool:
+    if not extension:
+        return False
+    return extension.lstrip(".").lower() in HTML_EXTENSIONS
+
+
+def is_html_content(mime_type: str | None, filename: str | None, extension: str | None = None) -> bool:
+    normalized_mime_type = _normalize_mime_type(mime_type)
+    if normalized_mime_type in HTML_MIME_TYPES:
+        return True
+
+    if _is_html_extension(extension):
+        return True
+
+    if filename:
+        return _is_html_extension(os.path.splitext(filename)[1])
+
+    return False
+
+
+def enforce_download_for_html(
+    response: Response,
+    *,
+    mime_type: str | None,
+    filename: str | None,
+    extension: str | None = None,
+) -> bool:
+    if not is_html_content(mime_type, filename, extension):
+        return False
+
+    if filename:
+        encoded_filename = quote(filename)
+        response.headers["Content-Disposition"] = f"attachment; filename*=UTF-8''{encoded_filename}"
+    else:
+        response.headers["Content-Disposition"] = "attachment"
+
+    response.headers["Content-Type"] = "application/octet-stream"
+    response.headers["X-Content-Type-Options"] = "nosniff"
+    return True
diff --git a/api/controllers/console/billing/billing.py b/api/controllers/console/billing/billing.py
index 7f907dc420..ac039f9c5d 100644
--- a/api/controllers/console/billing/billing.py
+++ b/api/controllers/console/billing/billing.py
@@ -1,8 +1,9 @@
 import base64
+from typing import Literal
 
 from flask import request
 from flask_restx import Resource, fields
-from pydantic import BaseModel, Field, field_validator
+from pydantic import BaseModel, Field
 from werkzeug.exceptions import BadRequest
 
 from controllers.console import console_ns
@@ -15,22 +16,8 @@ DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
 
 
 class SubscriptionQuery(BaseModel):
-    plan: str = Field(..., description="Subscription plan")
-    interval: str = Field(..., description="Billing interval")
-
-    @field_validator("plan")
-    @classmethod
-    def validate_plan(cls, value: str) -> str:
-        if value not in [CloudPlan.PROFESSIONAL, CloudPlan.TEAM]:
-            raise ValueError("Invalid plan")
-        return value
-
-    @field_validator("interval")
-    @classmethod
-    def validate_interval(cls, value: str) -> str:
-        if value not in {"month", "year"}:
-            raise ValueError("Invalid interval")
-        return value
+    plan: Literal[CloudPlan.PROFESSIONAL, CloudPlan.TEAM] = Field(..., description="Subscription plan")
+    interval: Literal["month", "year"] = Field(..., description="Billing interval")
 
 
 class PartnerTenantsPayload(BaseModel):
diff --git a/api/controllers/console/explore/message.py b/api/controllers/console/explore/message.py
index 229b7c8865..d596d60b36 100644
--- a/api/controllers/console/explore/message.py
+++ b/api/controllers/console/explore/message.py
@@ -1,6 +1,5 @@
 import logging
 from typing import Literal
-from uuid import UUID
 
 from flask import request
 from flask_restx import marshal_with
@@ -26,6 +25,7 @@ from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotIni
 from core.model_runtime.errors.invoke import InvokeError
 from fields.message_fields import message_infinite_scroll_pagination_fields
 from libs import helper
+from libs.helper import UUIDStrOrEmpty
 from libs.login import current_account_with_tenant
 from models.model import AppMode
 from services.app_generate_service import AppGenerateService
@@ -44,8 +44,8 @@ logger = logging.getLogger(__name__)
 
 
 class MessageListQuery(BaseModel):
-    conversation_id: UUID
-    first_id: UUID | None = None
+    conversation_id: UUIDStrOrEmpty
+    first_id: UUIDStrOrEmpty | None = None
     limit: int = Field(default=20, ge=1, le=100)
 
 
diff --git a/api/controllers/console/explore/saved_message.py b/api/controllers/console/explore/saved_message.py
index 6a9e274a0e..bc7b8e7651 100644
--- a/api/controllers/console/explore/saved_message.py
+++ b/api/controllers/console/explore/saved_message.py
@@ -1,5 +1,3 @@
-from uuid import UUID
-
 from flask import request
 from flask_restx import fields, marshal_with
 from pydantic import BaseModel, Field
@@ -10,19 +8,19 @@ from controllers.console import console_ns
 from controllers.console.explore.error import NotCompletionAppError
 from controllers.console.explore.wraps import InstalledAppResource
 from fields.conversation_fields import message_file_fields
-from libs.helper import TimestampField
+from libs.helper import TimestampField, UUIDStrOrEmpty
 from libs.login import current_account_with_tenant
 from services.errors.message import MessageNotExistsError
 from services.saved_message_service import SavedMessageService
 
 
 class SavedMessageListQuery(BaseModel):
-    last_id: UUID | None = None
+    last_id: UUIDStrOrEmpty | None = None
     limit: int = Field(default=20, ge=1, le=100)
 
 
 class SavedMessageCreatePayload(BaseModel):
-    message_id: UUID
+    message_id: UUIDStrOrEmpty
 
 
 register_schema_models(console_ns, SavedMessageListQuery, SavedMessageCreatePayload)
diff --git a/api/controllers/console/workspace/load_balancing_config.py b/api/controllers/console/workspace/load_balancing_config.py
index 9bf393ea2e..ccb60b1461 100644
--- a/api/controllers/console/workspace/load_balancing_config.py
+++ b/api/controllers/console/workspace/load_balancing_config.py
@@ -1,6 +1,8 @@
-from flask_restx import Resource, reqparse
+from flask_restx import Resource
+from pydantic import BaseModel
 from werkzeug.exceptions import Forbidden
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required, setup_required
 from core.model_runtime.entities.model_entities import ModelType
@@ -10,10 +12,20 @@ from models import TenantAccountRole
 from services.model_load_balancing_service import ModelLoadBalancingService
 
 
+class LoadBalancingCredentialPayload(BaseModel):
+    model: str
+    model_type: ModelType
+    credentials: dict[str, object]
+
+
+register_schema_models(console_ns, LoadBalancingCredentialPayload)
+
+
 @console_ns.route(
     "/workspaces/current/model-providers/<path:provider>/models/load-balancing-configs/credentials-validate"
 )
 class LoadBalancingCredentialsValidateApi(Resource):
+    @console_ns.expect(console_ns.models[LoadBalancingCredentialPayload.__name__])
     @setup_required
     @login_required
     @account_initialization_required
@@ -24,20 +36,7 @@ class LoadBalancingCredentialsValidateApi(Resource):
 
         tenant_id = current_tenant_id
 
-        parser = (
-            reqparse.RequestParser()
-            .add_argument("model", type=str, required=True, nullable=False, location="json")
-            .add_argument(
-                "model_type",
-                type=str,
-                required=True,
-                nullable=False,
-                choices=[mt.value for mt in ModelType],
-                location="json",
-            )
-            .add_argument("credentials", type=dict, required=True, nullable=False, location="json")
-        )
-        args = parser.parse_args()
+        payload = LoadBalancingCredentialPayload.model_validate(console_ns.payload or {})
 
         # validate model load balancing credentials
         model_load_balancing_service = ModelLoadBalancingService()
@@ -49,9 +48,9 @@ class LoadBalancingCredentialsValidateApi(Resource):
             model_load_balancing_service.validate_load_balancing_credentials(
                 tenant_id=tenant_id,
                 provider=provider,
-                model=args["model"],
-                model_type=args["model_type"],
-                credentials=args["credentials"],
+                model=payload.model,
+                model_type=payload.model_type,
+                credentials=payload.credentials,
             )
         except CredentialsValidateFailedError as ex:
             result = False
@@ -69,6 +68,7 @@ class LoadBalancingCredentialsValidateApi(Resource):
     "/workspaces/current/model-providers/<path:provider>/models/load-balancing-configs/<string:config_id>/credentials-validate"
 )
 class LoadBalancingConfigCredentialsValidateApi(Resource):
+    @console_ns.expect(console_ns.models[LoadBalancingCredentialPayload.__name__])
     @setup_required
     @login_required
     @account_initialization_required
@@ -79,20 +79,7 @@ class LoadBalancingConfigCredentialsValidateApi(Resource):
 
         tenant_id = current_tenant_id
 
-        parser = (
-            reqparse.RequestParser()
-            .add_argument("model", type=str, required=True, nullable=False, location="json")
-            .add_argument(
-                "model_type",
-                type=str,
-                required=True,
-                nullable=False,
-                choices=[mt.value for mt in ModelType],
-                location="json",
-            )
-            .add_argument("credentials", type=dict, required=True, nullable=False, location="json")
-        )
-        args = parser.parse_args()
+        payload = LoadBalancingCredentialPayload.model_validate(console_ns.payload or {})
 
         # validate model load balancing config credentials
         model_load_balancing_service = ModelLoadBalancingService()
@@ -104,9 +91,9 @@ class LoadBalancingConfigCredentialsValidateApi(Resource):
             model_load_balancing_service.validate_load_balancing_credentials(
                 tenant_id=tenant_id,
                 provider=provider,
-                model=args["model"],
-                model_type=args["model_type"],
-                credentials=args["credentials"],
+                model=payload.model,
+                model_type=payload.model_type,
+                credentials=payload.credentials,
                 config_id=config_id,
             )
         except CredentialsValidateFailedError as ex:
diff --git a/api/controllers/console/workspace/plugin.py b/api/controllers/console/workspace/plugin.py
index 805058ba5a..ea74fc0337 100644
--- a/api/controllers/console/workspace/plugin.py
+++ b/api/controllers/console/workspace/plugin.py
@@ -1,5 +1,6 @@
 import io
-from typing import Literal
+from collections.abc import Mapping
+from typing import Any, Literal
 
 from flask import request, send_file
 from flask_restx import Resource
@@ -141,6 +142,15 @@ class ParserDynamicOptions(BaseModel):
     provider_type: Literal["tool", "trigger"]
 
 
+class ParserDynamicOptionsWithCredentials(BaseModel):
+    plugin_id: str
+    provider: str
+    action: str
+    parameter: str
+    credential_id: str
+    credentials: Mapping[str, Any]
+
+
 class PluginPermissionSettingsPayload(BaseModel):
     install_permission: TenantPluginPermission.InstallPermission = TenantPluginPermission.InstallPermission.EVERYONE
     debug_permission: TenantPluginPermission.DebugPermission = TenantPluginPermission.DebugPermission.EVERYONE
@@ -183,6 +193,7 @@ reg(ParserGithubUpgrade)
 reg(ParserUninstall)
 reg(ParserPermissionChange)
 reg(ParserDynamicOptions)
+reg(ParserDynamicOptionsWithCredentials)
 reg(ParserPreferencesChange)
 reg(ParserExcludePlugin)
 reg(ParserReadme)
@@ -657,6 +668,37 @@ class PluginFetchDynamicSelectOptionsApi(Resource):
         return jsonable_encoder({"options": options})
 
 
+@console_ns.route("/workspaces/current/plugin/parameters/dynamic-options-with-credentials")
+class PluginFetchDynamicSelectOptionsWithCredentialsApi(Resource):
+    @console_ns.expect(console_ns.models[ParserDynamicOptionsWithCredentials.__name__])
+    @setup_required
+    @login_required
+    @is_admin_or_owner_required
+    @account_initialization_required
+    def post(self):
+        """Fetch dynamic options using credentials directly (for edit mode)."""
+        current_user, tenant_id = current_account_with_tenant()
+        user_id = current_user.id
+
+        args = ParserDynamicOptionsWithCredentials.model_validate(console_ns.payload)
+
+        try:
+            options = PluginParameterService.get_dynamic_select_options_with_credentials(
+                tenant_id=tenant_id,
+                user_id=user_id,
+                plugin_id=args.plugin_id,
+                provider=args.provider,
+                action=args.action,
+                parameter=args.parameter,
+                credential_id=args.credential_id,
+                credentials=args.credentials,
+            )
+        except PluginDaemonClientSideError as e:
+            raise ValueError(e)
+
+        return jsonable_encoder({"options": options})
+
+
 @console_ns.route("/workspaces/current/plugin/preferences/change")
 class PluginChangePreferencesApi(Resource):
     @console_ns.expect(console_ns.models[ParserPreferencesChange.__name__])
diff --git a/api/controllers/console/workspace/tool_providers.py b/api/controllers/console/workspace/tool_providers.py
index cb711d16e4..d51b37a9cd 100644
--- a/api/controllers/console/workspace/tool_providers.py
+++ b/api/controllers/console/workspace/tool_providers.py
@@ -1,4 +1,5 @@
 import io
+import logging
 from urllib.parse import urlparse
 
 from flask import make_response, redirect, request, send_file
@@ -17,6 +18,7 @@ from controllers.console.wraps import (
     is_admin_or_owner_required,
     setup_required,
 )
+from core.db.session_factory import session_factory
 from core.entities.mcp_provider import MCPAuthentication, MCPConfiguration
 from core.helper.tool_provider_cache import ToolProviderListCache
 from core.mcp.auth.auth_flow import auth, handle_callback
@@ -40,6 +42,8 @@ from services.tools.tools_manage_service import ToolCommonService
 from services.tools.tools_transform_service import ToolTransformService
 from services.tools.workflow_tools_manage_service import WorkflowToolManageService
 
+logger = logging.getLogger(__name__)
+
 
 def is_valid_url(url: str) -> bool:
     if not url:
@@ -945,8 +949,8 @@ class ToolProviderMCPApi(Resource):
         configuration = MCPConfiguration.model_validate(args["configuration"])
         authentication = MCPAuthentication.model_validate(args["authentication"]) if args["authentication"] else None
 
-        # Create provider in transaction
-        with Session(db.engine) as session, session.begin():
+        # 1) Create provider in a short transaction (no network I/O inside)
+        with session_factory.create_session() as session, session.begin():
             service = MCPToolManageService(session=session)
             result = service.create_provider(
                 tenant_id=tenant_id,
@@ -962,7 +966,28 @@ class ToolProviderMCPApi(Resource):
                 authentication=authentication,
             )
 
-        # Invalidate cache AFTER transaction commits to avoid holding locks during Redis operations
+        # 2) Try to fetch tools immediately after creation so they appear without a second save.
+        #    Perform network I/O outside any DB session to avoid holding locks.
+        try:
+            reconnect = MCPToolManageService.reconnect_with_url(
+                server_url=args["server_url"],
+                headers=args.get("headers") or {},
+                timeout=configuration.timeout,
+                sse_read_timeout=configuration.sse_read_timeout,
+            )
+            # Update just-created provider with authed/tools in a new short transaction
+            with session_factory.create_session() as session, session.begin():
+                service = MCPToolManageService(session=session)
+                db_provider = service.get_provider(provider_id=result.id, tenant_id=tenant_id)
+                db_provider.authed = reconnect.authed
+                db_provider.tools = reconnect.tools
+
+                result = ToolTransformService.mcp_provider_to_user_provider(db_provider, for_list=True)
+        except Exception:
+            # Best-effort: if initial fetch fails (e.g., auth required), return created provider as-is
+            logger.warning("Failed to fetch MCP tools after creation", exc_info=True)
+
+        # Final cache invalidation to ensure list views are up to date
         ToolProviderListCache.invalidate_cache(tenant_id)
 
         return jsonable_encoder(result)
diff --git a/api/controllers/console/workspace/trigger_providers.py b/api/controllers/console/workspace/trigger_providers.py
index 268473d6d1..497e62b790 100644
--- a/api/controllers/console/workspace/trigger_providers.py
+++ b/api/controllers/console/workspace/trigger_providers.py
@@ -1,11 +1,15 @@
 import logging
+from collections.abc import Mapping
+from typing import Any
 
 from flask import make_response, redirect, request
 from flask_restx import Resource, reqparse
+from pydantic import BaseModel, Field
 from sqlalchemy.orm import Session
 from werkzeug.exceptions import BadRequest, Forbidden
 
 from configs import dify_config
+from constants import HIDDEN_VALUE, UNKNOWN_VALUE
 from controllers.web.error import NotFoundError
 from core.model_runtime.utils.encoders import jsonable_encoder
 from core.plugin.entities.plugin_daemon import CredentialType
@@ -32,6 +36,32 @@ from ..wraps import (
 logger = logging.getLogger(__name__)
 
 
+class TriggerSubscriptionUpdateRequest(BaseModel):
+    """Request payload for updating a trigger subscription"""
+
+    name: str | None = Field(default=None, description="The name for the subscription")
+    credentials: Mapping[str, Any] | None = Field(default=None, description="The credentials for the subscription")
+    parameters: Mapping[str, Any] | None = Field(default=None, description="The parameters for the subscription")
+    properties: Mapping[str, Any] | None = Field(default=None, description="The properties for the subscription")
+
+
+class TriggerSubscriptionVerifyRequest(BaseModel):
+    """Request payload for verifying subscription credentials."""
+
+    credentials: Mapping[str, Any] = Field(description="The credentials to verify")
+
+
+console_ns.schema_model(
+    TriggerSubscriptionUpdateRequest.__name__,
+    TriggerSubscriptionUpdateRequest.model_json_schema(ref_template="#/definitions/{model}"),
+)
+
+console_ns.schema_model(
+    TriggerSubscriptionVerifyRequest.__name__,
+    TriggerSubscriptionVerifyRequest.model_json_schema(ref_template="#/definitions/{model}"),
+)
+
+
 @console_ns.route("/workspaces/current/trigger-provider/<path:provider>/icon")
 class TriggerProviderIconApi(Resource):
     @setup_required
@@ -155,16 +185,16 @@ parser_api = (
 
 
 @console_ns.route(
-    "/workspaces/current/trigger-provider/<path:provider>/subscriptions/builder/verify/<path:subscription_builder_id>",
+    "/workspaces/current/trigger-provider/<path:provider>/subscriptions/builder/verify-and-update/<path:subscription_builder_id>",
 )
-class TriggerSubscriptionBuilderVerifyApi(Resource):
+class TriggerSubscriptionBuilderVerifyAndUpdateApi(Resource):
     @console_ns.expect(parser_api)
     @setup_required
     @login_required
     @edit_permission_required
     @account_initialization_required
     def post(self, provider, subscription_builder_id):
-        """Verify a subscription instance for a trigger provider"""
+        """Verify and update a subscription instance for a trigger provider"""
         user = current_user
         assert user.current_tenant_id is not None
 
@@ -289,6 +319,83 @@ class TriggerSubscriptionBuilderBuildApi(Resource):
             raise ValueError(str(e)) from e
 
 
+@console_ns.route(
+    "/workspaces/current/trigger-provider/<path:subscription_id>/subscriptions/update",
+)
+class TriggerSubscriptionUpdateApi(Resource):
+    @console_ns.expect(console_ns.models[TriggerSubscriptionUpdateRequest.__name__])
+    @setup_required
+    @login_required
+    @edit_permission_required
+    @account_initialization_required
+    def post(self, subscription_id: str):
+        """Update a subscription instance"""
+        user = current_user
+        assert user.current_tenant_id is not None
+
+        args = TriggerSubscriptionUpdateRequest.model_validate(console_ns.payload)
+
+        subscription = TriggerProviderService.get_subscription_by_id(
+            tenant_id=user.current_tenant_id,
+            subscription_id=subscription_id,
+        )
+        if not subscription:
+            raise NotFoundError(f"Subscription {subscription_id} not found")
+
+        provider_id = TriggerProviderID(subscription.provider_id)
+
+        try:
+            # rename only
+            if (
+                args.name is not None
+                and args.credentials is None
+                and args.parameters is None
+                and args.properties is None
+            ):
+                TriggerProviderService.update_trigger_subscription(
+                    tenant_id=user.current_tenant_id,
+                    subscription_id=subscription_id,
+                    name=args.name,
+                )
+                return 200
+
+            # rebuild for create automatically by the provider
+            match subscription.credential_type:
+                case CredentialType.UNAUTHORIZED:
+                    TriggerProviderService.update_trigger_subscription(
+                        tenant_id=user.current_tenant_id,
+                        subscription_id=subscription_id,
+                        name=args.name,
+                        properties=args.properties,
+                    )
+                    return 200
+                case CredentialType.API_KEY | CredentialType.OAUTH2:
+                    if args.credentials:
+                        new_credentials: dict[str, Any] = {
+                            key: value if value != HIDDEN_VALUE else subscription.credentials.get(key, UNKNOWN_VALUE)
+                            for key, value in args.credentials.items()
+                        }
+                    else:
+                        new_credentials = subscription.credentials
+
+                    TriggerProviderService.rebuild_trigger_subscription(
+                        tenant_id=user.current_tenant_id,
+                        name=args.name,
+                        provider_id=provider_id,
+                        subscription_id=subscription_id,
+                        credentials=new_credentials,
+                        parameters=args.parameters or subscription.parameters,
+                    )
+                    return 200
+                case _:
+                    raise BadRequest("Invalid credential type")
+        except ValueError as e:
+            raise BadRequest(str(e))
+        except Exception as e:
+            logger.exception("Error updating subscription", exc_info=e)
+            raise
+
+
 @console_ns.route(
     "/workspaces/current/trigger-provider/<path:subscription_id>/subscriptions/delete",
 )
@@ -576,3 +683,38 @@ class TriggerOAuthClientManageApi(Resource):
         except Exception as e:
             logger.exception("Error removing OAuth client", exc_info=e)
             raise
+
+
+@console_ns.route(
+    "/workspaces/current/trigger-provider/<path:provider>/subscriptions/verify/<path:subscription_id>",
+)
+class TriggerSubscriptionVerifyApi(Resource):
+    @console_ns.expect(console_ns.models[TriggerSubscriptionVerifyRequest.__name__])
+    @setup_required
+    @login_required
+    @edit_permission_required
+    @account_initialization_required
+    def post(self, provider, subscription_id):
+        """Verify credentials for an existing subscription (edit mode only)"""
+        user = current_user
+        assert user.current_tenant_id is not None
+
+        verify_request: TriggerSubscriptionVerifyRequest = TriggerSubscriptionVerifyRequest.model_validate(
+            console_ns.payload
+        )
+
+        try:
+            result = TriggerProviderService.verify_subscription_credentials(
+                tenant_id=user.current_tenant_id,
+                user_id=user.id,
+                provider_id=TriggerProviderID(provider),
+                subscription_id=subscription_id,
+                credentials=verify_request.credentials,
+            )
+            return result
+        except ValueError as e:
+            logger.warning("Credential verification failed", exc_info=e)
+            raise BadRequest(str(e)) from e
+        except Exception as e:
+            logger.exception("Error verifying subscription credentials", exc_info=e)
+            raise BadRequest(str(e)) from e
diff --git a/api/controllers/files/image_preview.py b/api/controllers/files/image_preview.py
index 64f47f426a..04db1c67cb 100644
--- a/api/controllers/files/image_preview.py
+++ b/api/controllers/files/image_preview.py
@@ -7,6 +7,7 @@ from werkzeug.exceptions import NotFound
 
 import services
 from controllers.common.errors import UnsupportedFileTypeError
+from controllers.common.file_response import enforce_download_for_html
 from controllers.files import files_ns
 from extensions.ext_database import db
 from services.account_service import TenantService
@@ -138,6 +139,13 @@ class FilePreviewApi(Resource):
             response.headers["Content-Disposition"] = f"attachment; filename*=UTF-8''{encoded_filename}"
             response.headers["Content-Type"] = "application/octet-stream"
 
+        enforce_download_for_html(
+            response,
+            mime_type=upload_file.mime_type,
+            filename=upload_file.name,
+            extension=upload_file.extension,
+        )
+
         return response
 
 
diff --git a/api/controllers/files/tool_files.py b/api/controllers/files/tool_files.py
index c487a0a915..89aa472015 100644
--- a/api/controllers/files/tool_files.py
+++ b/api/controllers/files/tool_files.py
@@ -6,6 +6,7 @@ from pydantic import BaseModel, Field
 from werkzeug.exceptions import Forbidden, NotFound
 
 from controllers.common.errors import UnsupportedFileTypeError
+from controllers.common.file_response import enforce_download_for_html
 from controllers.files import files_ns
 from core.tools.signature import verify_tool_file_signature
 from core.tools.tool_file_manager import ToolFileManager
@@ -78,4 +79,11 @@ class ToolFileApi(Resource):
             encoded_filename = quote(tool_file.name)
             response.headers["Content-Disposition"] = f"attachment; filename*=UTF-8''{encoded_filename}"
 
+        enforce_download_for_html(
+            response,
+            mime_type=tool_file.mimetype,
+            filename=tool_file.name,
+            extension=extension,
+        )
+
         return response
diff --git a/api/controllers/service_api/app/file_preview.py b/api/controllers/service_api/app/file_preview.py
index 60f422b88e..f853a124ef 100644
--- a/api/controllers/service_api/app/file_preview.py
+++ b/api/controllers/service_api/app/file_preview.py
@@ -5,6 +5,7 @@ from flask import Response, request
 from flask_restx import Resource
 from pydantic import BaseModel, Field
 
+from controllers.common.file_response import enforce_download_for_html
 from controllers.common.schema import register_schema_model
 from controllers.service_api import service_api_ns
 from controllers.service_api.app.error import (
@@ -183,6 +184,13 @@ class FilePreviewApi(Resource):
             # Override content-type for downloads to force download
             response.headers["Content-Type"] = "application/octet-stream"
 
+        enforce_download_for_html(
+            response,
+            mime_type=upload_file.mime_type,
+            filename=upload_file.name,
+            extension=upload_file.extension,
+        )
+
         # Add caching headers for performance
         response.headers["Cache-Control"] = "public, max-age=3600"  # Cache for 1 hour
 
diff --git a/api/controllers/service_api/dataset/dataset.py b/api/controllers/service_api/dataset/dataset.py
index 4f91f40c55..94faf8dd42 100644
--- a/api/controllers/service_api/dataset/dataset.py
+++ b/api/controllers/service_api/dataset/dataset.py
@@ -13,7 +13,6 @@ from controllers.service_api.dataset.error import DatasetInUseError, DatasetName
 from controllers.service_api.wraps import (
     DatasetApiResource,
     cloud_edition_billing_rate_limit_check,
-    validate_dataset_token,
 )
 from core.model_runtime.entities.model_entities import ModelType
 from core.provider_manager import ProviderManager
@@ -460,9 +459,8 @@ class DatasetTagsApi(DatasetApiResource):
             401: "Unauthorized - invalid API token",
         }
     )
-    @validate_dataset_token
     @service_api_ns.marshal_with(build_dataset_tag_fields(service_api_ns))
-    def get(self, _, dataset_id):
+    def get(self, _):
         """Get all knowledge type tags."""
         assert isinstance(current_user, Account)
         cid = current_user.current_tenant_id
@@ -482,8 +480,7 @@ class DatasetTagsApi(DatasetApiResource):
         }
     )
     @service_api_ns.marshal_with(build_dataset_tag_fields(service_api_ns))
-    @validate_dataset_token
-    def post(self, _, dataset_id):
+    def post(self, _):
         """Add a knowledge type tag."""
         assert isinstance(current_user, Account)
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
@@ -506,8 +503,7 @@ class DatasetTagsApi(DatasetApiResource):
         }
     )
     @service_api_ns.marshal_with(build_dataset_tag_fields(service_api_ns))
-    @validate_dataset_token
-    def patch(self, _, dataset_id):
+    def patch(self, _):
         assert isinstance(current_user, Account)
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
             raise Forbidden()
@@ -533,9 +529,8 @@ class DatasetTagsApi(DatasetApiResource):
             403: "Forbidden - insufficient permissions",
         }
     )
-    @validate_dataset_token
     @edit_permission_required
-    def delete(self, _, dataset_id):
+    def delete(self, _):
         """Delete a knowledge type tag."""
         payload = TagDeletePayload.model_validate(service_api_ns.payload or {})
         TagService.delete_tag(payload.tag_id)
@@ -555,8 +550,7 @@ class DatasetTagBindingApi(DatasetApiResource):
             403: "Forbidden - insufficient permissions",
         }
     )
-    @validate_dataset_token
-    def post(self, _, dataset_id):
+    def post(self, _):
         # The role of the current user in the ta table must be admin, owner, editor, or dataset_operator
         assert isinstance(current_user, Account)
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
@@ -580,8 +574,7 @@ class DatasetTagUnbindingApi(DatasetApiResource):
             403: "Forbidden - insufficient permissions",
         }
     )
-    @validate_dataset_token
-    def post(self, _, dataset_id):
+    def post(self, _):
         # The role of the current user in the ta table must be admin, owner, editor, or dataset_operator
         assert isinstance(current_user, Account)
         if not (current_user.has_edit_permission or current_user.is_dataset_editor):
@@ -604,7 +597,6 @@ class DatasetTagsBindingStatusApi(DatasetApiResource):
             401: "Unauthorized - invalid API token",
         }
     )
-    @validate_dataset_token
     def get(self, _, *args, **kwargs):
         """Get all knowledge type tags."""
         dataset_id = kwargs.get("dataset_id")
diff --git a/api/core/helper/ssrf_proxy.py b/api/core/helper/ssrf_proxy.py
index f2172e4e2f..0b36969cf9 100644
--- a/api/core/helper/ssrf_proxy.py
+++ b/api/core/helper/ssrf_proxy.py
@@ -118,13 +118,11 @@ def make_request(method, url, max_retries=SSRF_DEFAULT_MAX_RETRIES, **kwargs):
             # Build the request manually to preserve the Host header
             # httpx may override the Host header when using a proxy, so we use
             # the request API to explicitly set headers before sending
-            request = client.build_request(method=method, url=url, **kwargs)
-
-            # If user explicitly provided a Host header, ensure it's preserved
+            headers = {k: v for k, v in headers.items() if k.lower() != "host"}
             if user_provided_host is not None:
-                request.headers["Host"] = user_provided_host
-
-            response = client.send(request)
+                headers["host"] = user_provided_host
+            kwargs["headers"] = headers
+            response = client.request(method=method, url=url, **kwargs)
 
             # Check for SSRF protection by Squid proxy
             if response.status_code in (401, 403):
diff --git a/api/core/helper/tool_provider_cache.py b/api/core/helper/tool_provider_cache.py
index eef5937407..c5447c2b3f 100644
--- a/api/core/helper/tool_provider_cache.py
+++ b/api/core/helper/tool_provider_cache.py
@@ -1,6 +1,6 @@
 import json
 import logging
-from typing import Any
+from typing import Any, cast
 
 from core.tools.entities.api_entities import ToolProviderTypeApiLiteral
 from extensions.ext_redis import redis_client, redis_fallback
@@ -50,7 +50,9 @@ class ToolProviderListCache:
             redis_client.delete(cache_key)
         else:
             # Invalidate all caches for this tenant
-            pattern = f"tool_providers:tenant_id:{tenant_id}:*"
-            keys = list(redis_client.scan_iter(pattern))
-            if keys:
-                redis_client.delete(*keys)
+            keys = ["builtin", "model", "api", "workflow", "mcp"]
+            pipeline = redis_client.pipeline()
+            for key in keys:
+                cache_key = ToolProviderListCache._generate_cache_key(tenant_id, cast(ToolProviderTypeApiLiteral, key))
+                pipeline.delete(cache_key)
+            pipeline.execute()
diff --git a/api/core/plugin/entities/parameters.py b/api/core/plugin/entities/parameters.py
index 88a3a7bd43..bfa662b9f6 100644
--- a/api/core/plugin/entities/parameters.py
+++ b/api/core/plugin/entities/parameters.py
@@ -76,7 +76,7 @@ class PluginParameter(BaseModel):
     auto_generate: PluginParameterAutoGenerate | None = None
     template: PluginParameterTemplate | None = None
     required: bool = False
-    default: Union[float, int, str, bool] | None = None
+    default: Union[float, int, str, bool, list, dict] | None = None
     min: Union[float, int] | None = None
     max: Union[float, int] | None = None
     precision: int | None = None
diff --git a/api/core/tools/entities/tool_entities.py b/api/core/tools/entities/tool_entities.py
index 353f3a646a..583a3584f7 100644
--- a/api/core/tools/entities/tool_entities.py
+++ b/api/core/tools/entities/tool_entities.py
@@ -153,11 +153,11 @@ class ToolInvokeMessage(BaseModel):
         @classmethod
         def transform_variable_value(cls, values):
             """
-            Only basic types and lists are allowed.
+            Only basic types, lists, and None are allowed.
             """
             value = values.get("variable_value")
-            if not isinstance(value, dict | list | str | int | float | bool):
-                raise ValueError("Only basic types and lists are allowed.")
+            if value is not None and not isinstance(value, dict | list | str | int | float | bool):
+                raise ValueError("Only basic types, lists, and None are allowed.")
 
             # if stream is true, the value must be a string
             if values.get("stream"):
diff --git a/api/core/tools/workflow_as_tool/provider.py b/api/core/tools/workflow_as_tool/provider.py
index 0439fb1d60..2bd973f831 100644
--- a/api/core/tools/workflow_as_tool/provider.py
+++ b/api/core/tools/workflow_as_tool/provider.py
@@ -5,6 +5,7 @@ from sqlalchemy.orm import Session
 
 from core.app.app_config.entities import VariableEntity, VariableEntityType
 from core.app.apps.workflow.app_config_manager import WorkflowAppConfigManager
+from core.db.session_factory import session_factory
 from core.plugin.entities.parameters import PluginParameterOption
 from core.tools.__base.tool_provider import ToolProviderController
 from core.tools.__base.tool_runtime import ToolRuntime
@@ -47,33 +48,30 @@ class WorkflowToolProviderController(ToolProviderController):
 
     @classmethod
     def from_db(cls, db_provider: WorkflowToolProvider) -> "WorkflowToolProviderController":
-        with Session(db.engine, expire_on_commit=False) as session, session.begin():
-            provider = session.get(WorkflowToolProvider, db_provider.id) if db_provider.id else None
-            if not provider:
-                raise ValueError("workflow provider not found")
-            app = session.get(App, provider.app_id)
+        with session_factory.create_session() as session, session.begin():
+            app = session.get(App, db_provider.app_id)
             if not app:
                 raise ValueError("app not found")
 
-            user = session.get(Account, provider.user_id) if provider.user_id else None
+            user = session.get(Account, db_provider.user_id) if db_provider.user_id else None
 
             controller = WorkflowToolProviderController(
                 entity=ToolProviderEntity(
                     identity=ToolProviderIdentity(
                         author=user.name if user else "",
-                        name=provider.label,
-                        label=I18nObject(en_US=provider.label, zh_Hans=provider.label),
-                        description=I18nObject(en_US=provider.description, zh_Hans=provider.description),
-                        icon=provider.icon,
+                        name=db_provider.label,
+                        label=I18nObject(en_US=db_provider.label, zh_Hans=db_provider.label),
+                        description=I18nObject(en_US=db_provider.description, zh_Hans=db_provider.description),
+                        icon=db_provider.icon,
                     ),
                     credentials_schema=[],
                     plugin_id=None,
                 ),
-                provider_id=provider.id or "",
+                provider_id="",
             )
 
             controller.tools = [
-                controller._get_db_provider_tool(provider, app, session=session, user=user),
+                controller._get_db_provider_tool(db_provider, app, session=session, user=user),
             ]
 
         return controller
diff --git a/api/core/trigger/utils/encryption.py b/api/core/trigger/utils/encryption.py
index 026a65aa23..b12291e299 100644
--- a/api/core/trigger/utils/encryption.py
+++ b/api/core/trigger/utils/encryption.py
@@ -67,12 +67,16 @@ def create_trigger_provider_encrypter_for_subscription(
 
 
 def delete_cache_for_subscription(tenant_id: str, provider_id: str, subscription_id: str):
-    cache = TriggerProviderCredentialsCache(
+    TriggerProviderCredentialsCache(
         tenant_id=tenant_id,
         provider_id=provider_id,
         credential_id=subscription_id,
-    )
-    cache.delete()
+    ).delete()
+    TriggerProviderPropertiesCache(
+        tenant_id=tenant_id,
+        provider_id=provider_id,
+        subscription_id=subscription_id,
+    ).delete()
 
 
 def create_trigger_provider_encrypter_for_properties(
diff --git a/api/core/workflow/nodes/parameter_extractor/parameter_extractor_node.py b/api/core/workflow/nodes/parameter_extractor/parameter_extractor_node.py
index 93db417b15..08e0542d61 100644
--- a/api/core/workflow/nodes/parameter_extractor/parameter_extractor_node.py
+++ b/api/core/workflow/nodes/parameter_extractor/parameter_extractor_node.py
@@ -281,7 +281,7 @@ class ParameterExtractorNode(Node[ParameterExtractorNodeData]):
 
         # handle invoke result
 
-        text = invoke_result.message.content or ""
+        text = invoke_result.message.get_text_content()
         if not isinstance(text, str):
             raise InvalidTextContentTypeError(f"Invalid text content type: {type(text)}. Expected str.")
 
diff --git a/api/pyproject.toml b/api/pyproject.toml
index 6716603dd4..dbc6a2eb83 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "dify-api"
-version = "1.11.1"
+version = "1.11.2"
 requires-python = ">=3.11,<3.13"
 
 dependencies = [
diff --git a/api/services/dataset_service.py b/api/services/dataset_service.py
index 970192fde5..ac4b25c5dc 100644
--- a/api/services/dataset_service.py
+++ b/api/services/dataset_service.py
@@ -3458,7 +3458,7 @@ class SegmentService:
         if keyword:
             query = query.where(DocumentSegment.content.ilike(f"%{keyword}%"))
 
-        query = query.order_by(DocumentSegment.position.asc())
+        query = query.order_by(DocumentSegment.position.asc(), DocumentSegment.id.asc())
         paginated_segments = db.paginate(select=query, page=page, per_page=limit, max_per_page=100, error_out=False)
 
         return paginated_segments.items, paginated_segments.total
diff --git a/api/services/plugin/plugin_parameter_service.py b/api/services/plugin/plugin_parameter_service.py
index c517d9f966..5dcbf5fec5 100644
--- a/api/services/plugin/plugin_parameter_service.py
+++ b/api/services/plugin/plugin_parameter_service.py
@@ -105,3 +105,49 @@ class PluginParameterService:
             )
             .options
         )
+
+    @staticmethod
+    def get_dynamic_select_options_with_credentials(
+        tenant_id: str,
+        user_id: str,
+        plugin_id: str,
+        provider: str,
+        action: str,
+        parameter: str,
+        credential_id: str,
+        credentials: Mapping[str, Any],
+    ) -> Sequence[PluginParameterOption]:
+        """
+        Get dynamic select options using provided credentials directly.
+        Used for edit mode when credentials have been modified but not yet saved.
+
+        Security: credential_id is validated against tenant_id to ensure
+        users can only access their own credentials.
+        """
+        from constants import HIDDEN_VALUE
+
+        # Get original subscription to replace hidden values (with tenant_id check for security)
+        original_subscription = TriggerProviderService.get_subscription_by_id(tenant_id, credential_id)
+        if not original_subscription:
+            raise ValueError(f"Subscription {credential_id} not found")
+
+        # Replace [__HIDDEN__] with original values
+        resolved_credentials: dict[str, Any] = {
+            key: (original_subscription.credentials.get(key) if value == HIDDEN_VALUE else value)
+            for key, value in credentials.items()
+        }
+
+        return (
+            DynamicSelectClient()
+            .fetch_dynamic_select_options(
+                tenant_id,
+                user_id,
+                plugin_id,
+                provider,
+                action,
+                resolved_credentials,
+                CredentialType.API_KEY.value,
+                parameter,
+            )
+            .options
+        )
diff --git a/api/services/tools/builtin_tools_manage_service.py b/api/services/tools/builtin_tools_manage_service.py
index cf1d39fa25..87951d53e6 100644
--- a/api/services/tools/builtin_tools_manage_service.py
+++ b/api/services/tools/builtin_tools_manage_service.py
@@ -286,12 +286,12 @@ class BuiltinToolManageService:
 
                     session.add(db_provider)
                     session.commit()
-
-                    # Invalidate tool providers cache
-                    ToolProviderListCache.invalidate_cache(tenant_id)
             except Exception as e:
                 session.rollback()
                 raise ValueError(str(e))
+
+        # Invalidate tool providers cache
+        ToolProviderListCache.invalidate_cache(tenant_id, "builtin")
         return {"result": "success"}
 
     @staticmethod
diff --git a/api/services/tools/mcp_tools_manage_service.py b/api/services/tools/mcp_tools_manage_service.py
index 252be77b27..0be106f597 100644
--- a/api/services/tools/mcp_tools_manage_service.py
+++ b/api/services/tools/mcp_tools_manage_service.py
@@ -319,8 +319,14 @@ class MCPToolManageService:
         except MCPError as e:
             raise ValueError(f"Failed to connect to MCP server: {e}")
 
-        # Update database with retrieved tools
-        db_provider.tools = json.dumps([tool.model_dump() for tool in tools])
+        # Update database with retrieved tools (ensure description is a non-null string)
+        tools_payload = []
+        for tool in tools:
+            data = tool.model_dump()
+            if data.get("description") is None:
+                data["description"] = ""
+            tools_payload.append(data)
+        db_provider.tools = json.dumps(tools_payload)
         db_provider.authed = True
         db_provider.updated_at = datetime.now()
         self._session.flush()
@@ -620,6 +626,21 @@ class MCPToolManageService:
             server_url_hash=new_server_url_hash,
         )
 
+    @staticmethod
+    def reconnect_with_url(
+        *,
+        server_url: str,
+        headers: dict[str, str],
+        timeout: float | None,
+        sse_read_timeout: float | None,
+    ) -> ReconnectResult:
+        return MCPToolManageService._reconnect_with_url(
+            server_url=server_url,
+            headers=headers,
+            timeout=timeout,
+            sse_read_timeout=sse_read_timeout,
+        )
+
     @staticmethod
     def _reconnect_with_url(
         *,
@@ -642,9 +663,16 @@ class MCPToolManageService:
                 sse_read_timeout=sse_read_timeout,
             ) as mcp_client:
                 tools = mcp_client.list_tools()
+                # Ensure tool descriptions are non-null in payload
+                tools_payload = []
+                for t in tools:
+                    d = t.model_dump()
+                    if d.get("description") is None:
+                        d["description"] = ""
+                    tools_payload.append(d)
                 return ReconnectResult(
                     authed=True,
-                    tools=json.dumps([tool.model_dump() for tool in tools]),
+                    tools=json.dumps(tools_payload),
                     encrypted_credentials=EMPTY_CREDENTIALS_JSON,
                 )
         except MCPAuthError:
diff --git a/api/services/tools/workflow_tools_manage_service.py b/api/services/tools/workflow_tools_manage_service.py
index fe77ff2dc5..714a651839 100644
--- a/api/services/tools/workflow_tools_manage_service.py
+++ b/api/services/tools/workflow_tools_manage_service.py
@@ -5,8 +5,8 @@ from datetime import datetime
 from typing import Any
 
 from sqlalchemy import or_, select
-from sqlalchemy.orm import Session
 
+from core.db.session_factory import session_factory
 from core.helper.tool_provider_cache import ToolProviderListCache
 from core.model_runtime.utils.encoders import jsonable_encoder
 from core.tools.__base.tool_provider import ToolProviderController
@@ -68,26 +68,27 @@ class WorkflowToolManageService:
         if workflow is None:
             raise ValueError(f"Workflow not found for app {workflow_app_id}")
 
-        with Session(db.engine, expire_on_commit=False) as session, session.begin():
-            workflow_tool_provider = WorkflowToolProvider(
-                tenant_id=tenant_id,
-                user_id=user_id,
-                app_id=workflow_app_id,
-                name=name,
-                label=label,
-                icon=json.dumps(icon),
-                description=description,
-                parameter_configuration=json.dumps(parameters),
-                privacy_policy=privacy_policy,
-                version=workflow.version,
-            )
-            session.add(workflow_tool_provider)
+        workflow_tool_provider = WorkflowToolProvider(
+            tenant_id=tenant_id,
+            user_id=user_id,
+            app_id=workflow_app_id,
+            name=name,
+            label=label,
+            icon=json.dumps(icon),
+            description=description,
+            parameter_configuration=json.dumps(parameters),
+            privacy_policy=privacy_policy,
+            version=workflow.version,
+        )
 
         try:
             WorkflowToolProviderController.from_db(workflow_tool_provider)
         except Exception as e:
             raise ValueError(str(e))
 
+        with session_factory.create_session() as session, session.begin():
+            session.add(workflow_tool_provider)
+
         if labels is not None:
             ToolLabelManager.update_tool_labels(
                 ToolTransformService.workflow_provider_to_controller(workflow_tool_provider), labels
diff --git a/api/services/trigger/trigger_provider_service.py b/api/services/trigger/trigger_provider_service.py
index 668e4c5be2..57de9b3cee 100644
--- a/api/services/trigger/trigger_provider_service.py
+++ b/api/services/trigger/trigger_provider_service.py
@@ -94,16 +94,23 @@ class TriggerProviderService:
 
         provider_controller = TriggerManager.get_trigger_provider(tenant_id, provider_id)
         for subscription in subscriptions:
-            encrypter, _ = create_trigger_provider_encrypter_for_subscription(
+            credential_encrypter, _ = create_trigger_provider_encrypter_for_subscription(
                 tenant_id=tenant_id,
                 controller=provider_controller,
                 subscription=subscription,
             )
             subscription.credentials = dict(
-                encrypter.mask_credentials(dict(encrypter.decrypt(subscription.credentials)))
+                credential_encrypter.mask_credentials(dict(credential_encrypter.decrypt(subscription.credentials)))
             )
-            subscription.properties = dict(encrypter.mask_credentials(dict(encrypter.decrypt(subscription.properties))))
-            subscription.parameters = dict(encrypter.mask_credentials(dict(encrypter.decrypt(subscription.parameters))))
+            properties_encrypter, _ = create_trigger_provider_encrypter_for_properties(
+                tenant_id=tenant_id,
+                controller=provider_controller,
+                subscription=subscription,
+            )
+            subscription.properties = dict(
+                properties_encrypter.mask_credentials(dict(properties_encrypter.decrypt(subscription.properties)))
+            )
+            subscription.parameters = dict(subscription.parameters)
             count = workflows_in_use_map.get(subscription.id)
             subscription.workflows_in_use = count if count is not None else 0
 
@@ -209,6 +216,101 @@ class TriggerProviderService:
             logger.exception("Failed to add trigger provider")
             raise ValueError(str(e))
 
+    @classmethod
+    def update_trigger_subscription(
+        cls,
+        tenant_id: str,
+        subscription_id: str,
+        name: str | None = None,
+        properties: Mapping[str, Any] | None = None,
+        parameters: Mapping[str, Any] | None = None,
+        credentials: Mapping[str, Any] | None = None,
+        credential_expires_at: int | None = None,
+        expires_at: int | None = None,
+    ) -> None:
+        """
+        Update an existing trigger subscription.
+
+        :param tenant_id: Tenant ID
+        :param subscription_id: Subscription instance ID
+        :param name: Optional new name for this subscription
+        :param properties: Optional new properties
+        :param parameters: Optional new parameters
+        :param credentials: Optional new credentials
+        :param credential_expires_at: Optional new credential expiration timestamp
+        :param expires_at: Optional new expiration timestamp
+        :return: Success response with updated subscription info
+        """
+        with Session(db.engine, expire_on_commit=False) as session:
+            # Use distributed lock to prevent race conditions on the same subscription
+            lock_key = f"trigger_subscription_update_lock:{tenant_id}_{subscription_id}"
+            with redis_client.lock(lock_key, timeout=20):
+                subscription: TriggerSubscription | None = (
+                    session.query(TriggerSubscription).filter_by(tenant_id=tenant_id, id=subscription_id).first()
+                )
+                if not subscription:
+                    raise ValueError(f"Trigger subscription {subscription_id} not found")
+
+                provider_id = TriggerProviderID(subscription.provider_id)
+                provider_controller = TriggerManager.get_trigger_provider(tenant_id, provider_id)
+
+                # Check for name uniqueness if name is being updated
+                if name is not None and name != subscription.name:
+                    existing = (
+                        session.query(TriggerSubscription)
+                        .filter_by(tenant_id=tenant_id, provider_id=str(provider_id), name=name)
+                        .first()
+                    )
+                    if existing:
+                        raise ValueError(f"Subscription name '{name}' already exists for this provider")
+                    subscription.name = name
+
+                # Update properties if provided
+                if properties is not None:
+                    properties_encrypter, _ = create_provider_encrypter(
+                        tenant_id=tenant_id,
+                        config=provider_controller.get_properties_schema(),
+                        cache=NoOpProviderCredentialCache(),
+                    )
+                    # Handle hidden values - preserve original encrypted values
+                    original_properties = properties_encrypter.decrypt(subscription.properties)
+                    new_properties: dict[str, Any] = {
+                        key: value if value != HIDDEN_VALUE else original_properties.get(key, UNKNOWN_VALUE)
+                        for key, value in properties.items()
+                    }
+                    subscription.properties = dict(properties_encrypter.encrypt(new_properties))
+
+                # Update parameters if provided
+                if parameters is not None:
+                    subscription.parameters = dict(parameters)
+
+                # Update credentials if provided
+                if credentials is not None:
+                    credential_type = CredentialType.of(subscription.credential_type)
+                    credential_encrypter, _ = create_provider_encrypter(
+                        tenant_id=tenant_id,
+                        config=provider_controller.get_credential_schema_config(credential_type),
+                        cache=NoOpProviderCredentialCache(),
+                    )
+                    subscription.credentials = dict(credential_encrypter.encrypt(dict(credentials)))
+
+                # Update credential expiration timestamp if provided
+                if credential_expires_at is not None:
+                    subscription.credential_expires_at = credential_expires_at
+
+                # Update expiration timestamp if provided
+                if expires_at is not None:
+                    subscription.expires_at = expires_at
+
+                session.commit()
+
+                # Clear subscription cache
+                delete_cache_for_subscription(
+                    tenant_id=tenant_id,
+                    provider_id=subscription.provider_id,
+                    subscription_id=subscription.id,
+                )
+
     @classmethod
     def get_subscription_by_id(cls, tenant_id: str, subscription_id: str | None = None) -> TriggerSubscription | None:
         """
@@ -257,17 +359,18 @@ class TriggerProviderService:
             raise ValueError(f"Trigger provider subscription {subscription_id} not found")
 
         credential_type: CredentialType = CredentialType.of(subscription.credential_type)
+        provider_id = TriggerProviderID(subscription.provider_id)
+        provider_controller: PluginTriggerProviderController = TriggerManager.get_trigger_provider(
+            tenant_id=tenant_id, provider_id=provider_id
+        )
+        encrypter, _ = create_trigger_provider_encrypter_for_subscription(
+            tenant_id=tenant_id,
+            controller=provider_controller,
+            subscription=subscription,
+        )
+
         is_auto_created: bool = credential_type in [CredentialType.OAUTH2, CredentialType.API_KEY]
         if is_auto_created:
-            provider_id = TriggerProviderID(subscription.provider_id)
-            provider_controller: PluginTriggerProviderController = TriggerManager.get_trigger_provider(
-                tenant_id=tenant_id, provider_id=provider_id
-            )
-            encrypter, _ = create_trigger_provider_encrypter_for_subscription(
-                tenant_id=tenant_id,
-                controller=provider_controller,
-                subscription=subscription,
-            )
             try:
                 TriggerManager.unsubscribe_trigger(
                     tenant_id=tenant_id,
@@ -280,8 +383,8 @@ class TriggerProviderService:
             except Exception as e:
                 logger.exception("Error unsubscribing trigger", exc_info=e)
 
-        # Clear cache
         session.delete(subscription)
+        # Clear cache
         delete_cache_for_subscription(
             tenant_id=tenant_id,
             provider_id=subscription.provider_id,
@@ -688,3 +791,125 @@ class TriggerProviderService:
             )
             subscription.properties = dict(properties_encrypter.decrypt(subscription.properties))
             return subscription
+
+    @classmethod
+    def verify_subscription_credentials(
+        cls,
+        tenant_id: str,
+        user_id: str,
+        provider_id: TriggerProviderID,
+        subscription_id: str,
+        credentials: Mapping[str, Any],
+    ) -> dict[str, Any]:
+        """
+        Verify credentials for an existing subscription without updating it.
+
+        This is used in edit mode to validate new credentials before rebuild.
+
+        :param tenant_id: Tenant ID
+        :param user_id: User ID
+        :param provider_id: Provider identifier
+        :param subscription_id: Subscription ID
+        :param credentials: New credentials to verify
+        :return: dict with 'verified' boolean
+        """
+        provider_controller = TriggerManager.get_trigger_provider(tenant_id, provider_id)
+        if not provider_controller:
+            raise ValueError(f"Provider {provider_id} not found")
+
+        subscription = cls.get_subscription_by_id(
+            tenant_id=tenant_id,
+            subscription_id=subscription_id,
+        )
+        if not subscription:
+            raise ValueError(f"Subscription {subscription_id} not found")
+
+        credential_type = CredentialType.of(subscription.credential_type)
+
+        # For API Key, validate the new credentials
+        if credential_type == CredentialType.API_KEY:
+            new_credentials: dict[str, Any] = {
+                key: value if value != HIDDEN_VALUE else subscription.credentials.get(key, UNKNOWN_VALUE)
+                for key, value in credentials.items()
+            }
+            try:
+                provider_controller.validate_credentials(user_id, credentials=new_credentials)
+                return {"verified": True}
+            except Exception as e:
+                raise ValueError(f"Invalid credentials: {e}") from e
+
+        return {"verified": True}
+
+    @classmethod
+    def rebuild_trigger_subscription(
+        cls,
+        tenant_id: str,
+        provider_id: TriggerProviderID,
+        subscription_id: str,
+        credentials: Mapping[str, Any],
+        parameters: Mapping[str, Any],
+        name: str | None = None,
+    ) -> None:
+        """
+        Create a subscription builder for rebuilding an existing subscription.
+
+        This method creates a builder pre-filled with data from the rebuild request,
+        keeping the same subscription_id and endpoint_id so the webhook URL remains unchanged.
+
+        :param tenant_id: Tenant ID
+        :param name: Name for the subscription
+        :param subscription_id: Subscription ID
+        :param provider_id: Provider identifier
+        :param credentials: Credentials for the subscription
+        :param parameters: Parameters for the subscription
+        :return: SubscriptionBuilderApiEntity
+        """
+        provider_controller = TriggerManager.get_trigger_provider(tenant_id, provider_id)
+        if not provider_controller:
+            raise ValueError(f"Provider {provider_id} not found")
+
+        subscription = TriggerProviderService.get_subscription_by_id(
+            tenant_id=tenant_id,
+            subscription_id=subscription_id,
+        )
+        if not subscription:
+            raise ValueError(f"Subscription {subscription_id} not found")
+
+        credential_type = CredentialType.of(subscription.credential_type)
+        if credential_type not in [CredentialType.OAUTH2, CredentialType.API_KEY]:
+            raise ValueError("Credential type not supported for rebuild")
+
+        # TODO: Trying to invoke update api of the plugin trigger provider
+
+        # FALLBACK: If the update api is not implemented, delete the previous subscription and create a new one
+
+        # Delete the previous subscription
+        user_id = subscription.user_id
+        TriggerManager.unsubscribe_trigger(
+            tenant_id=tenant_id,
+            user_id=user_id,
+            provider_id=provider_id,
+            subscription=subscription.to_entity(),
+            credentials=subscription.credentials,
+            credential_type=credential_type,
+        )
+
+        # Create a new subscription with the same subscription_id and endpoint_id
+        new_subscription: TriggerSubscriptionEntity = TriggerManager.subscribe_trigger(
+            tenant_id=tenant_id,
+            user_id=user_id,
+            provider_id=provider_id,
+            endpoint=generate_plugin_trigger_endpoint_url(subscription.endpoint_id),
+            parameters=parameters,
+            credentials=credentials,
+            credential_type=credential_type,
+        )
+        TriggerProviderService.update_trigger_subscription(
+            tenant_id=tenant_id,
+            subscription_id=subscription.id,
+            name=name,
+            parameters=parameters,
+            credentials=credentials,
+            properties=new_subscription.properties,
+            expires_at=new_subscription.expires_at,
+        )
diff --git a/api/services/trigger/trigger_subscription_builder_service.py b/api/services/trigger/trigger_subscription_builder_service.py
index 571393c782..37f852da3e 100644
--- a/api/services/trigger/trigger_subscription_builder_service.py
+++ b/api/services/trigger/trigger_subscription_builder_service.py
@@ -453,11 +453,12 @@ class TriggerSubscriptionBuilderService:
         if not subscription_builder:
             return None
 
-        # response to validation endpoint
-        controller: PluginTriggerProviderController = TriggerManager.get_trigger_provider(
-            tenant_id=subscription_builder.tenant_id, provider_id=TriggerProviderID(subscription_builder.provider_id)
-        )
         try:
+            # response to validation endpoint
+            controller: PluginTriggerProviderController = TriggerManager.get_trigger_provider(
+                tenant_id=subscription_builder.tenant_id,
+                provider_id=TriggerProviderID(subscription_builder.provider_id),
+            )
             dispatch_response: TriggerDispatchResponse = controller.dispatch(
                 request=request,
                 subscription=subscription_builder.to_subscription(),
diff --git a/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py b/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py
index 71cedd26c4..3d46735a1a 100644
--- a/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py
+++ b/api/tests/test_containers_integration_tests/services/tools/test_workflow_tools_manage_service.py
@@ -705,3 +705,207 @@ class TestWorkflowToolManageService:
         db.session.refresh(created_tool)
         assert created_tool.name == first_tool_name
         assert created_tool.updated_at is not None
+
+    def test_create_workflow_tool_with_file_parameter_default(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test workflow tool creation with FILE parameter having a file object as default.
+
+        This test verifies:
+        - FILE parameters can have file object defaults
+        - The default value (dict with id/base64Url) is properly handled
+        - Tool creation succeeds without Pydantic validation errors
+
+        Related issue: Array[File] default value causes Pydantic validation errors.
+        """
+        fake = Faker()
+
+        # Create test data
+        app, account, workflow = self._create_test_app_and_account(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        # Create workflow graph with a FILE variable that has a default value
+        workflow_graph = {
+            "nodes": [
+                {
+                    "id": "start_node",
+                    "data": {
+                        "type": "start",
+                        "variables": [
+                            {
+                                "variable": "document",
+                                "label": "Document",
+                                "type": "file",
+                                "required": False,
+                                "default": {"id": fake.uuid4(), "base64Url": ""},
+                            }
+                        ],
+                    },
+                }
+            ]
+        }
+        workflow.graph = json.dumps(workflow_graph)
+
+        # Setup workflow tool parameters with FILE type
+        file_parameters = [
+            {
+                "name": "document",
+                "description": "Upload a document",
+                "form": "form",
+                "type": "file",
+                "required": False,
+            }
+        ]
+
+        # Execute the method under test
+        # Note: from_db is mocked, so this test primarily validates the parameter configuration
+        result = WorkflowToolManageService.create_workflow_tool(
+            user_id=account.id,
+            tenant_id=account.current_tenant.id,
+            workflow_app_id=app.id,
+            name=fake.word(),
+            label=fake.word(),
+            icon={"type": "emoji", "emoji": "📄"},
+            description=fake.text(max_nb_chars=200),
+            parameters=file_parameters,
+        )
+
+        # Verify the result
+        assert result == {"result": "success"}
+
+    def test_create_workflow_tool_with_files_parameter_default(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test workflow tool creation with FILES (Array[File]) parameter having file objects as default.
+
+        This test verifies:
+        - FILES parameters can have a list of file objects as default
+        - The default value (list of dicts with id/base64Url) is properly handled
+        - Tool creation succeeds without Pydantic validation errors
+
+        Related issue: Array[File] default value causes 4 Pydantic validation errors
+        because PluginParameter.default only accepts Union[float, int, str, bool] | None.
+        """
+        fake = Faker()
+
+        # Create test data
+        app, account, workflow = self._create_test_app_and_account(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        # Create workflow graph with a FILE_LIST variable that has a default value
+        workflow_graph = {
+            "nodes": [
+                {
+                    "id": "start_node",
+                    "data": {
+                        "type": "start",
+                        "variables": [
+                            {
+                                "variable": "documents",
+                                "label": "Documents",
+                                "type": "file-list",
+                                "required": False,
+                                "default": [
+                                    {"id": fake.uuid4(), "base64Url": ""},
+                                    {"id": fake.uuid4(), "base64Url": ""},
+                                ],
+                            }
+                        ],
+                    },
+                }
+            ]
+        }
+        workflow.graph = json.dumps(workflow_graph)
+
+        # Setup workflow tool parameters with FILES type
+        files_parameters = [
+            {
+                "name": "documents",
+                "description": "Upload multiple documents",
+                "form": "form",
+                "type": "files",
+                "required": False,
+            }
+        ]
+
+        # Execute the method under test
+        # Note: from_db is mocked, so this test primarily validates the parameter configuration
+        result = WorkflowToolManageService.create_workflow_tool(
+            user_id=account.id,
+            tenant_id=account.current_tenant.id,
+            workflow_app_id=app.id,
+            name=fake.word(),
+            label=fake.word(),
+            icon={"type": "emoji", "emoji": "📁"},
+            description=fake.text(max_nb_chars=200),
+            parameters=files_parameters,
+        )
+
+        # Verify the result
+        assert result == {"result": "success"}
+
+    def test_create_workflow_tool_db_commit_before_validation(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test that database commit happens before validation, causing DB pollution on validation failure.
+
+        This test verifies the second bug:
+        - WorkflowToolProvider is committed to database BEFORE from_db validation
+        - If validation fails, the record remains in the database
+        - Subsequent attempts fail with "Tool already exists" error
+
+        This demonstrates why we need to validate BEFORE database commit.
+        """
+
+        fake = Faker()
+
+        # Create test data
+        app, account, workflow = self._create_test_app_and_account(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        tool_name = fake.word()
+
+        # Mock from_db to raise validation error
+        mock_external_service_dependencies["workflow_tool_provider_controller"].from_db.side_effect = ValueError(
+            "Validation failed: default parameter type mismatch"
+        )
+
+        # Attempt to create workflow tool (will fail at validation stage)
+        with pytest.raises(ValueError) as exc_info:
+            WorkflowToolManageService.create_workflow_tool(
+                user_id=account.id,
+                tenant_id=account.current_tenant.id,
+                workflow_app_id=app.id,
+                name=tool_name,
+                label=fake.word(),
+                icon={"type": "emoji", "emoji": "🔧"},
+                description=fake.text(max_nb_chars=200),
+                parameters=self._create_test_workflow_tool_parameters(),
+            )
+
+        assert "Validation failed" in str(exc_info.value)
+
+        # Verify the tool was NOT created in database
+        # This is the expected behavior (no pollution)
+        from extensions.ext_database import db
+
+        tool_count = (
+            db.session.query(WorkflowToolProvider)
+            .where(
+                WorkflowToolProvider.tenant_id == account.current_tenant.id,
+                WorkflowToolProvider.name == tool_name,
+            )
+            .count()
+        )
+
+        # The record should NOT exist because the transaction should be rolled back
+        # Currently, due to the bug, the record might exist (this test documents the bug)
+        # After the fix, this should always be 0
+        # For now, we document that the record may exist, demonstrating the bug
+        # assert tool_count == 0  # Expected after fix
diff --git a/api/tests/unit_tests/controllers/common/test_file_response.py b/api/tests/unit_tests/controllers/common/test_file_response.py
new file mode 100644
index 0000000000..2487c362bd
--- /dev/null
+++ b/api/tests/unit_tests/controllers/common/test_file_response.py
@@ -0,0 +1,46 @@
+from flask import Response
+
+from controllers.common.file_response import enforce_download_for_html, is_html_content
+
+
+class TestFileResponseHelpers:
+    def test_is_html_content_detects_mime_type(self):
+        mime_type = "text/html; charset=UTF-8"
+
+        result = is_html_content(mime_type, filename="file.txt", extension="txt")
+
+        assert result is True
+
+    def test_is_html_content_detects_extension(self):
+        result = is_html_content("text/plain", filename="report.html", extension=None)
+
+        assert result is True
+
+    def test_enforce_download_for_html_sets_headers(self):
+        response = Response("payload", mimetype="text/html")
+
+        updated = enforce_download_for_html(
+            response,
+            mime_type="text/html",
+            filename="unsafe.html",
+            extension="html",
+        )
+
+        assert updated is True
+        assert "attachment" in response.headers["Content-Disposition"]
+        assert response.headers["Content-Type"] == "application/octet-stream"
+        assert response.headers["X-Content-Type-Options"] == "nosniff"
+
+    def test_enforce_download_for_html_no_change_for_non_html(self):
+        response = Response("payload", mimetype="text/plain")
+
+        updated = enforce_download_for_html(
+            response,
+            mime_type="text/plain",
+            filename="notes.txt",
+            extension="txt",
+        )
+
+        assert updated is False
+        assert "Content-Disposition" not in response.headers
+        assert "X-Content-Type-Options" not in response.headers
diff --git a/api/tests/unit_tests/controllers/console/workspace/__init__.py b/api/tests/unit_tests/controllers/console/workspace/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/unit_tests/controllers/console/workspace/test_load_balancing_config.py b/api/tests/unit_tests/controllers/console/workspace/test_load_balancing_config.py
new file mode 100644
index 0000000000..59b6614d5e
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/workspace/test_load_balancing_config.py
@@ -0,0 +1,145 @@
+"""Unit tests for load balancing credential validation APIs."""
+
+from __future__ import annotations
+
+import builtins
+import importlib
+import sys
+from types import SimpleNamespace
+from unittest.mock import MagicMock
+
+import pytest
+from flask import Flask
+from flask.views import MethodView
+from werkzeug.exceptions import Forbidden
+
+from core.model_runtime.entities.model_entities import ModelType
+from core.model_runtime.errors.validate import CredentialsValidateFailedError
+
+if not hasattr(builtins, "MethodView"):
+    builtins.MethodView = MethodView  # type: ignore[attr-defined]
+
+from models.account import TenantAccountRole
+
+
+@pytest.fixture
+def app() -> Flask:
+    app = Flask(__name__)
+    app.config["TESTING"] = True
+    return app
+
+
+@pytest.fixture
+def load_balancing_module(monkeypatch: pytest.MonkeyPatch):
+    """Reload controller module with lightweight decorators for testing."""
+
+    from controllers.console import console_ns, wraps
+    from libs import login
+
+    def _noop(func):
+        return func
+
+    monkeypatch.setattr(login, "login_required", _noop)
+    monkeypatch.setattr(wraps, "setup_required", _noop)
+    monkeypatch.setattr(wraps, "account_initialization_required", _noop)
+
+    def _noop_route(*args, **kwargs):  # type: ignore[override]
+        def _decorator(cls):
+            return cls
+
+        return _decorator
+
+    monkeypatch.setattr(console_ns, "route", _noop_route)
+
+    module_name = "controllers.console.workspace.load_balancing_config"
+    sys.modules.pop(module_name, None)
+    module = importlib.import_module(module_name)
+    return module
+
+
+def _mock_user(role: TenantAccountRole) -> SimpleNamespace:
+    return SimpleNamespace(current_role=role)
+
+
+def _prepare_context(module, monkeypatch: pytest.MonkeyPatch, role=TenantAccountRole.OWNER):
+    user = _mock_user(role)
+    monkeypatch.setattr(module, "current_account_with_tenant", lambda: (user, "tenant-123"))
+    mock_service = MagicMock()
+    monkeypatch.setattr(module, "ModelLoadBalancingService", lambda: mock_service)
+    return mock_service
+
+
+def _request_payload():
+    return {"model": "gpt-4o", "model_type": ModelType.LLM, "credentials": {"api_key": "sk-***"}}
+
+
+def test_validate_credentials_success(app: Flask, load_balancing_module, monkeypatch: pytest.MonkeyPatch):
+    service = _prepare_context(load_balancing_module, monkeypatch)
+
+    with app.test_request_context(
+        "/workspaces/current/model-providers/openai/models/load-balancing-configs/credentials-validate",
+        method="POST",
+        json=_request_payload(),
+    ):
+        response = load_balancing_module.LoadBalancingCredentialsValidateApi().post(provider="openai")
+
+    assert response == {"result": "success"}
+    service.validate_load_balancing_credentials.assert_called_once_with(
+        tenant_id="tenant-123",
+        provider="openai",
+        model="gpt-4o",
+        model_type=ModelType.LLM,
+        credentials={"api_key": "sk-***"},
+    )
+
+
+def test_validate_credentials_returns_error_message(app: Flask, load_balancing_module, monkeypatch: pytest.MonkeyPatch):
+    service = _prepare_context(load_balancing_module, monkeypatch)
+    service.validate_load_balancing_credentials.side_effect = CredentialsValidateFailedError("invalid credentials")
+
+    with app.test_request_context(
+        "/workspaces/current/model-providers/openai/models/load-balancing-configs/credentials-validate",
+        method="POST",
+        json=_request_payload(),
+    ):
+        response = load_balancing_module.LoadBalancingCredentialsValidateApi().post(provider="openai")
+
+    assert response == {"result": "error", "error": "invalid credentials"}
+
+
+def test_validate_credentials_requires_privileged_role(
+    app: Flask, load_balancing_module, monkeypatch: pytest.MonkeyPatch
+):
+    _prepare_context(load_balancing_module, monkeypatch, role=TenantAccountRole.NORMAL)
+
+    with app.test_request_context(
+        "/workspaces/current/model-providers/openai/models/load-balancing-configs/credentials-validate",
+        method="POST",
+        json=_request_payload(),
+    ):
+        api = load_balancing_module.LoadBalancingCredentialsValidateApi()
+        with pytest.raises(Forbidden):
+            api.post(provider="openai")
+
+
+def test_validate_credentials_with_config_id(app: Flask, load_balancing_module, monkeypatch: pytest.MonkeyPatch):
+    service = _prepare_context(load_balancing_module, monkeypatch)
+
+    with app.test_request_context(
+        "/workspaces/current/model-providers/openai/models/load-balancing-configs/cfg-1/credentials-validate",
+        method="POST",
+        json=_request_payload(),
+    ):
+        response = load_balancing_module.LoadBalancingConfigCredentialsValidateApi().post(
+            provider="openai", config_id="cfg-1"
+        )
+
+    assert response == {"result": "success"}
+    service.validate_load_balancing_credentials.assert_called_once_with(
+        tenant_id="tenant-123",
+        provider="openai",
+        model="gpt-4o",
+        model_type=ModelType.LLM,
+        credentials={"api_key": "sk-***"},
+        config_id="cfg-1",
+    )
diff --git a/api/tests/unit_tests/controllers/console/workspace/test_tool_provider.py b/api/tests/unit_tests/controllers/console/workspace/test_tool_provider.py
new file mode 100644
index 0000000000..2b03813ef4
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/workspace/test_tool_provider.py
@@ -0,0 +1,103 @@
+import json
+from unittest.mock import MagicMock, patch
+
+import pytest
+from flask import Flask
+from flask_restx import Api
+
+from controllers.console.workspace.tool_providers import ToolProviderMCPApi
+from core.db.session_factory import configure_session_factory
+from extensions.ext_database import db
+from services.tools.mcp_tools_manage_service import ReconnectResult
+
+
+# Backward-compat fixtures referenced by @pytest.mark.usefixtures in this file.
+# They are intentionally no-ops because the test already patches the required
+# behaviors explicitly via @patch and context managers below.
+@pytest.fixture
+def _mock_cache():
+    return
+
+
+@pytest.fixture
+def _mock_user_tenant():
+    return
+
+
+@pytest.fixture
+def client():
+    app = Flask(__name__)
+    app.config["TESTING"] = True
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    api = Api(app)
+    api.add_resource(ToolProviderMCPApi, "/console/api/workspaces/current/tool-provider/mcp")
+    db.init_app(app)
+    # Configure session factory used by controller code
+    with app.app_context():
+        configure_session_factory(db.engine)
+    return app.test_client()
+
+
+@patch(
+    "controllers.console.workspace.tool_providers.current_account_with_tenant", return_value=(MagicMock(id="u1"), "t1")
+)
+@patch("controllers.console.workspace.tool_providers.ToolProviderListCache.invalidate_cache", return_value=None)
+@patch("controllers.console.workspace.tool_providers.Session")
+@patch("controllers.console.workspace.tool_providers.MCPToolManageService._reconnect_with_url")
+@pytest.mark.usefixtures("_mock_cache", "_mock_user_tenant")
+def test_create_mcp_provider_populates_tools(
+    mock_reconnect, mock_session, mock_invalidate_cache, mock_current_account_with_tenant, client
+):
+    # Arrange: reconnect returns tools immediately
+    mock_reconnect.return_value = ReconnectResult(
+        authed=True,
+        tools=json.dumps(
+            [{"name": "ping", "description": "ok", "inputSchema": {"type": "object"}, "outputSchema": {}}]
+        ),
+        encrypted_credentials="{}",
+    )
+
+    # Fake service.create_provider -> returns object with id for reload
+    svc = MagicMock()
+    create_result = MagicMock()
+    create_result.id = "provider-1"
+    svc.create_provider.return_value = create_result
+    svc.get_provider.return_value = MagicMock(id="provider-1", tenant_id="t1")  # used by reload path
+    mock_session.return_value.__enter__.return_value = MagicMock()
+    # Patch MCPToolManageService constructed inside controller
+    with patch("controllers.console.workspace.tool_providers.MCPToolManageService", return_value=svc):
+        payload = {
+            "server_url": "http://example.com/mcp",
+            "name": "demo",
+            "icon": "😀",
+            "icon_type": "emoji",
+            "icon_background": "#000",
+            "server_identifier": "demo-sid",
+            "configuration": {"timeout": 5, "sse_read_timeout": 30},
+            "headers": {},
+            "authentication": {},
+        }
+        # Act
+        with (
+            patch("controllers.console.wraps.dify_config.EDITION", "CLOUD"),  # bypass setup_required DB check
+            patch("controllers.console.wraps.current_account_with_tenant", return_value=(MagicMock(id="u1"), "t1")),
+            patch("libs.login.check_csrf_token", return_value=None),  # bypass CSRF in login_required
+            patch("libs.login._get_user", return_value=MagicMock(id="u1", is_authenticated=True)),  # login
+            patch(
+                "services.tools.tools_transform_service.ToolTransformService.mcp_provider_to_user_provider",
+                return_value={"id": "provider-1", "tools": [{"name": "ping"}]},
+            ),
+        ):
+            resp = client.post(
+                "/console/api/workspaces/current/tool-provider/mcp",
+                data=json.dumps(payload),
+                content_type="application/json",
+            )
+
+    # Assert
+    assert resp.status_code == 200
+    body = resp.get_json()
+    assert body.get("id") == "provider-1"
+    # 若 transform 后包含 tools 字段，确保非空
+    assert isinstance(body.get("tools"), list)
+    assert body["tools"]
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_file_preview.py b/api/tests/unit_tests/controllers/service_api/app/test_file_preview.py
index acff191c79..1bdcd0f1a3 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_file_preview.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_file_preview.py
@@ -41,6 +41,7 @@ class TestFilePreviewApi:
         upload_file = Mock(spec=UploadFile)
         upload_file.id = str(uuid.uuid4())
         upload_file.name = "test_file.jpg"
+        upload_file.extension = "jpg"
         upload_file.mime_type = "image/jpeg"
         upload_file.size = 1024
         upload_file.key = "storage/key/test_file.jpg"
@@ -210,6 +211,19 @@ class TestFilePreviewApi:
         assert mock_upload_file.name in response.headers["Content-Disposition"]
         assert response.headers["Content-Type"] == "application/octet-stream"
 
+    def test_build_file_response_html_forces_attachment(self, file_preview_api, mock_upload_file):
+        """Test HTML files are forced to download"""
+        mock_generator = Mock()
+        mock_upload_file.mime_type = "text/html"
+        mock_upload_file.name = "unsafe.html"
+        mock_upload_file.extension = "html"
+
+        response = file_preview_api._build_file_response(mock_generator, mock_upload_file, False)
+
+        assert "attachment" in response.headers["Content-Disposition"]
+        assert response.headers["Content-Type"] == "application/octet-stream"
+        assert response.headers["X-Content-Type-Options"] == "nosniff"
+
     def test_build_file_response_audio_video(self, file_preview_api, mock_upload_file):
         """Test file response building for audio/video files"""
         mock_generator = Mock()
diff --git a/api/tests/unit_tests/core/helper/test_ssrf_proxy.py b/api/tests/unit_tests/core/helper/test_ssrf_proxy.py
index d5bc3283fe..beae1d0358 100644
--- a/api/tests/unit_tests/core/helper/test_ssrf_proxy.py
+++ b/api/tests/unit_tests/core/helper/test_ssrf_proxy.py
@@ -1,11 +1,9 @@
-import secrets
 from unittest.mock import MagicMock, patch
 
 import pytest
 
 from core.helper.ssrf_proxy import (
     SSRF_DEFAULT_MAX_RETRIES,
-    STATUS_FORCELIST,
     _get_user_provided_host_header,
     make_request,
 )
@@ -14,11 +12,10 @@ from core.helper.ssrf_proxy import (
 @patch("core.helper.ssrf_proxy._get_ssrf_client")
 def test_successful_request(mock_get_client):
     mock_client = MagicMock()
-    mock_request = MagicMock()
     mock_response = MagicMock()
     mock_response.status_code = 200
     mock_client.send.return_value = mock_response
-    mock_client.build_request.return_value = mock_request
+    mock_client.request.return_value = mock_response
     mock_get_client.return_value = mock_client
 
     response = make_request("GET", "http://example.com")
@@ -28,11 +25,10 @@ def test_successful_request(mock_get_client):
 @patch("core.helper.ssrf_proxy._get_ssrf_client")
 def test_retry_exceed_max_retries(mock_get_client):
     mock_client = MagicMock()
-    mock_request = MagicMock()
     mock_response = MagicMock()
     mock_response.status_code = 500
     mock_client.send.return_value = mock_response
-    mock_client.build_request.return_value = mock_request
+    mock_client.request.return_value = mock_response
     mock_get_client.return_value = mock_client
 
     with pytest.raises(Exception) as e:
@@ -40,32 +36,6 @@ def test_retry_exceed_max_retries(mock_get_client):
     assert str(e.value) == f"Reached maximum retries ({SSRF_DEFAULT_MAX_RETRIES - 1}) for URL http://example.com"
 
 
-@patch("core.helper.ssrf_proxy._get_ssrf_client")
-def test_retry_logic_success(mock_get_client):
-    mock_client = MagicMock()
-    mock_request = MagicMock()
-    mock_response = MagicMock()
-    mock_response.status_code = 200
-
-    side_effects = []
-    for _ in range(SSRF_DEFAULT_MAX_RETRIES):
-        status_code = secrets.choice(STATUS_FORCELIST)
-        retry_response = MagicMock()
-        retry_response.status_code = status_code
-        side_effects.append(retry_response)
-
-    side_effects.append(mock_response)
-    mock_client.send.side_effect = side_effects
-    mock_client.build_request.return_value = mock_request
-    mock_get_client.return_value = mock_client
-
-    response = make_request("GET", "http://example.com", max_retries=SSRF_DEFAULT_MAX_RETRIES)
-
-    assert response.status_code == 200
-    assert mock_client.send.call_count == SSRF_DEFAULT_MAX_RETRIES + 1
-    assert mock_client.build_request.call_count == SSRF_DEFAULT_MAX_RETRIES + 1
-
-
 class TestGetUserProvidedHostHeader:
     """Tests for _get_user_provided_host_header function."""
 
@@ -111,14 +81,12 @@ def test_host_header_preservation_without_user_header(mock_get_client):
     mock_response = MagicMock()
     mock_response.status_code = 200
     mock_client.send.return_value = mock_response
-    mock_client.build_request.return_value = mock_request
+    mock_client.request.return_value = mock_response
     mock_get_client.return_value = mock_client
 
     response = make_request("GET", "http://example.com")
 
     assert response.status_code == 200
-    # build_request should be called without headers dict containing Host
-    mock_client.build_request.assert_called_once()
     # Host should not be set if not provided by user
     assert "Host" not in mock_request.headers or mock_request.headers.get("Host") is None
 
@@ -132,31 +100,10 @@ def test_host_header_preservation_with_user_header(mock_get_client):
     mock_response = MagicMock()
     mock_response.status_code = 200
     mock_client.send.return_value = mock_response
-    mock_client.build_request.return_value = mock_request
+    mock_client.request.return_value = mock_response
     mock_get_client.return_value = mock_client
 
     custom_host = "custom.example.com:8080"
     response = make_request("GET", "http://example.com", headers={"Host": custom_host})
 
     assert response.status_code == 200
-    # Verify build_request was called
-    mock_client.build_request.assert_called_once()
-    # Verify the Host header was set on the request object
-    assert mock_request.headers.get("Host") == custom_host
-    mock_client.send.assert_called_once_with(mock_request)
-
-
-@patch("core.helper.ssrf_proxy._get_ssrf_client")
-@pytest.mark.parametrize("host_key", ["host", "HOST"])
-def test_host_header_preservation_case_insensitive(mock_get_client, host_key):
-    """Test that Host header is preserved regardless of case."""
-    mock_client = MagicMock()
-    mock_request = MagicMock()
-    mock_request.headers = {}
-    mock_response = MagicMock()
-    mock_response.status_code = 200
-    mock_client.send.return_value = mock_response
-    mock_client.build_request.return_value = mock_request
-    mock_get_client.return_value = mock_client
-    response = make_request("GET", "http://example.com", headers={host_key: "api.example.com"})
-    assert mock_request.headers.get("Host") == "api.example.com"
diff --git a/api/tests/unit_tests/core/helper/test_tool_provider_cache.py b/api/tests/unit_tests/core/helper/test_tool_provider_cache.py
index 00f7c9d7e9..d237c68f35 100644
--- a/api/tests/unit_tests/core/helper/test_tool_provider_cache.py
+++ b/api/tests/unit_tests/core/helper/test_tool_provider_cache.py
@@ -96,9 +96,6 @@ class TestToolProviderListCache:
 
         ToolProviderListCache.invalidate_cache(tenant_id)
 
-        mock_redis_client.scan_iter.assert_called_once_with(f"tool_providers:tenant_id:{tenant_id}:*")
-        mock_redis_client.delete.assert_called_once_with(*mock_keys)
-
     def test_invalidate_cache_no_keys(self, mock_redis_client):
         """Test invalidate cache - no cache keys for tenant"""
         tenant_id = "tenant_123"
diff --git a/api/tests/unit_tests/services/test_dataset_service_get_segments.py b/api/tests/unit_tests/services/test_dataset_service_get_segments.py
new file mode 100644
index 0000000000..360c8a3c7d
--- /dev/null
+++ b/api/tests/unit_tests/services/test_dataset_service_get_segments.py
@@ -0,0 +1,472 @@
+"""
+Unit tests for SegmentService.get_segments method.
+
+Tests the retrieval of document segments with pagination and filtering:
+- Basic pagination (page, limit)
+- Status filtering
+- Keyword search
+- Ordering by position and id (to avoid duplicate data)
+"""
+
+from unittest.mock import Mock, create_autospec, patch
+
+import pytest
+
+from models.dataset import DocumentSegment
+
+
+class SegmentServiceTestDataFactory:
+    """
+    Factory class for creating test data and mock objects for segment tests.
+    """
+
+    @staticmethod
+    def create_segment_mock(
+        segment_id: str = "segment-123",
+        document_id: str = "doc-123",
+        tenant_id: str = "tenant-123",
+        dataset_id: str = "dataset-123",
+        position: int = 1,
+        content: str = "Test content",
+        status: str = "completed",
+        **kwargs,
+    ) -> Mock:
+        """
+        Create a mock document segment.
+
+        Args:
+            segment_id: Unique identifier for the segment
+            document_id: Parent document ID
+            tenant_id: Tenant ID the segment belongs to
+            dataset_id: Parent dataset ID
+            position: Position within the document
+            content: Segment text content
+            status: Indexing status
+            **kwargs: Additional attributes
+
+        Returns:
+            Mock: DocumentSegment mock object
+        """
+        segment = create_autospec(DocumentSegment, instance=True)
+        segment.id = segment_id
+        segment.document_id = document_id
+        segment.tenant_id = tenant_id
+        segment.dataset_id = dataset_id
+        segment.position = position
+        segment.content = content
+        segment.status = status
+        for key, value in kwargs.items():
+            setattr(segment, key, value)
+        return segment
+
+
+class TestSegmentServiceGetSegments:
+    """
+    Comprehensive unit tests for SegmentService.get_segments method.
+
+    Tests cover:
+    - Basic pagination functionality
+    - Status list filtering
+    - Keyword search filtering
+    - Ordering (position + id for uniqueness)
+    - Empty results
+    - Combined filters
+    """
+
+    @pytest.fixture
+    def mock_segment_service_dependencies(self):
+        """
+        Common mock setup for segment service dependencies.
+
+        Patches:
+        - db: Database operations and pagination
+        - select: SQLAlchemy query builder
+        """
+        with (
+            patch("services.dataset_service.db") as mock_db,
+            patch("services.dataset_service.select") as mock_select,
+        ):
+            yield {
+                "db": mock_db,
+                "select": mock_select,
+            }
+
+    def test_get_segments_basic_pagination(self, mock_segment_service_dependencies):
+        """
+        Test basic pagination functionality.
+
+        Verifies:
+        - Query is built with document_id and tenant_id filters
+        - Pagination uses correct page and limit parameters
+        - Returns segments and total count
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+        page = 1
+        limit = 20
+
+        # Create mock segments
+        segment1 = SegmentServiceTestDataFactory.create_segment_mock(
+            segment_id="seg-1", position=1, content="First segment"
+        )
+        segment2 = SegmentServiceTestDataFactory.create_segment_mock(
+            segment_id="seg-2", position=2, content="Second segment"
+        )
+
+        # Mock pagination result
+        mock_paginated = Mock()
+        mock_paginated.items = [segment1, segment2]
+        mock_paginated.total = 2
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        # Mock select builder
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(document_id=document_id, tenant_id=tenant_id, page=page, limit=limit)
+
+        # Assert
+        assert len(items) == 2
+        assert total == 2
+        assert items[0].id == "seg-1"
+        assert items[1].id == "seg-2"
+        mock_segment_service_dependencies["db"].paginate.assert_called_once()
+        call_kwargs = mock_segment_service_dependencies["db"].paginate.call_args[1]
+        assert call_kwargs["page"] == page
+        assert call_kwargs["per_page"] == limit
+        assert call_kwargs["max_per_page"] == 100
+        assert call_kwargs["error_out"] is False
+
+    def test_get_segments_with_status_filter(self, mock_segment_service_dependencies):
+        """
+        Test filtering by status list.
+
+        Verifies:
+        - Status list filter is applied to query
+        - Only segments with matching status are returned
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+        status_list = ["completed", "indexing"]
+
+        segment1 = SegmentServiceTestDataFactory.create_segment_mock(segment_id="seg-1", status="completed")
+        segment2 = SegmentServiceTestDataFactory.create_segment_mock(segment_id="seg-2", status="indexing")
+
+        mock_paginated = Mock()
+        mock_paginated.items = [segment1, segment2]
+        mock_paginated.total = 2
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(
+            document_id=document_id, tenant_id=tenant_id, status_list=status_list
+        )
+
+        # Assert
+        assert len(items) == 2
+        assert total == 2
+        # Verify where was called multiple times (base filters + status filter)
+        assert mock_query.where.call_count >= 2
+
+    def test_get_segments_with_empty_status_list(self, mock_segment_service_dependencies):
+        """
+        Test with empty status list.
+
+        Verifies:
+        - Empty status list is handled correctly
+        - No status filter is applied to avoid WHERE false condition
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+        status_list = []
+
+        segment = SegmentServiceTestDataFactory.create_segment_mock(segment_id="seg-1")
+
+        mock_paginated = Mock()
+        mock_paginated.items = [segment]
+        mock_paginated.total = 1
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(
+            document_id=document_id, tenant_id=tenant_id, status_list=status_list
+        )
+
+        # Assert
+        assert len(items) == 1
+        assert total == 1
+        # Should only be called once (base filters, no status filter)
+        assert mock_query.where.call_count == 1
+
+    def test_get_segments_with_keyword_search(self, mock_segment_service_dependencies):
+        """
+        Test keyword search functionality.
+
+        Verifies:
+        - Keyword filter uses ilike for case-insensitive search
+        - Search pattern includes wildcards (%keyword%)
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+        keyword = "search term"
+
+        segment = SegmentServiceTestDataFactory.create_segment_mock(
+            segment_id="seg-1", content="This contains search term"
+        )
+
+        mock_paginated = Mock()
+        mock_paginated.items = [segment]
+        mock_paginated.total = 1
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(document_id=document_id, tenant_id=tenant_id, keyword=keyword)
+
+        # Assert
+        assert len(items) == 1
+        assert total == 1
+        # Verify where was called for base filters + keyword filter
+        assert mock_query.where.call_count == 2
+
+    def test_get_segments_ordering_by_position_and_id(self, mock_segment_service_dependencies):
+        """
+        Test ordering by position and id.
+
+        Verifies:
+        - Results are ordered by position ASC
+        - Results are secondarily ordered by id ASC to ensure uniqueness
+        - This prevents duplicate data across pages when positions are not unique
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+
+        # Create segments with same position but different ids
+        segment1 = SegmentServiceTestDataFactory.create_segment_mock(
+            segment_id="seg-1", position=1, content="Content 1"
+        )
+        segment2 = SegmentServiceTestDataFactory.create_segment_mock(
+            segment_id="seg-2", position=1, content="Content 2"
+        )
+        segment3 = SegmentServiceTestDataFactory.create_segment_mock(
+            segment_id="seg-3", position=2, content="Content 3"
+        )
+
+        mock_paginated = Mock()
+        mock_paginated.items = [segment1, segment2, segment3]
+        mock_paginated.total = 3
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(document_id=document_id, tenant_id=tenant_id)
+
+        # Assert
+        assert len(items) == 3
+        assert total == 3
+        mock_query.order_by.assert_called_once()
+
+    def test_get_segments_empty_results(self, mock_segment_service_dependencies):
+        """
+        Test when no segments match the criteria.
+
+        Verifies:
+        - Empty list is returned for items
+        - Total count is 0
+        """
+        # Arrange
+        document_id = "non-existent-doc"
+        tenant_id = "tenant-123"
+
+        mock_paginated = Mock()
+        mock_paginated.items = []
+        mock_paginated.total = 0
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(document_id=document_id, tenant_id=tenant_id)
+
+        # Assert
+        assert items == []
+        assert total == 0
+
+    def test_get_segments_combined_filters(self, mock_segment_service_dependencies):
+        """
+        Test with multiple filters combined.
+
+        Verifies:
+        - All filters work together correctly
+        - Status list and keyword search both applied
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+        status_list = ["completed"]
+        keyword = "important"
+        page = 2
+        limit = 10
+
+        segment = SegmentServiceTestDataFactory.create_segment_mock(
+            segment_id="seg-1",
+            status="completed",
+            content="This is important information",
+        )
+
+        mock_paginated = Mock()
+        mock_paginated.items = [segment]
+        mock_paginated.total = 1
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(
+            document_id=document_id,
+            tenant_id=tenant_id,
+            status_list=status_list,
+            keyword=keyword,
+            page=page,
+            limit=limit,
+        )
+
+        # Assert
+        assert len(items) == 1
+        assert total == 1
+        # Verify filters: base + status + keyword
+        assert mock_query.where.call_count == 3
+        # Verify pagination parameters
+        call_kwargs = mock_segment_service_dependencies["db"].paginate.call_args[1]
+        assert call_kwargs["page"] == page
+        assert call_kwargs["per_page"] == limit
+
+    def test_get_segments_with_none_status_list(self, mock_segment_service_dependencies):
+        """
+        Test with None status list.
+
+        Verifies:
+        - None status list is handled correctly
+        - No status filter is applied
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+
+        segment = SegmentServiceTestDataFactory.create_segment_mock(segment_id="seg-1")
+
+        mock_paginated = Mock()
+        mock_paginated.items = [segment]
+        mock_paginated.total = 1
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        items, total = SegmentService.get_segments(
+            document_id=document_id,
+            tenant_id=tenant_id,
+            status_list=None,
+        )
+
+        # Assert
+        assert len(items) == 1
+        assert total == 1
+        # Should only be called once (base filters only, no status filter)
+        assert mock_query.where.call_count == 1
+
+    def test_get_segments_pagination_max_per_page_limit(self, mock_segment_service_dependencies):
+        """
+        Test that max_per_page is correctly set to 100.
+
+        Verifies:
+        - max_per_page parameter is set to 100
+        - This prevents excessive page sizes
+        """
+        # Arrange
+        document_id = "doc-123"
+        tenant_id = "tenant-123"
+        limit = 200  # Request more than max_per_page
+
+        mock_paginated = Mock()
+        mock_paginated.items = []
+        mock_paginated.total = 0
+
+        mock_segment_service_dependencies["db"].paginate.return_value = mock_paginated
+
+        mock_query = Mock()
+        mock_segment_service_dependencies["select"].return_value = mock_query
+        mock_query.where.return_value = mock_query
+        mock_query.order_by.return_value = mock_query
+
+        # Act
+        from services.dataset_service import SegmentService
+
+        SegmentService.get_segments(
+            document_id=document_id,
+            tenant_id=tenant_id,
+            limit=limit,
+        )
+
+        # Assert
+        call_kwargs = mock_segment_service_dependencies["db"].paginate.call_args[1]
+        assert call_kwargs["max_per_page"] == 100
diff --git a/api/uv.lock b/api/uv.lock
index 4c2cb3c3f1..c31b7fe445 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -1368,7 +1368,7 @@ wheels = [
 
 [[package]]
 name = "dify-api"
-version = "1.11.1"
+version = "1.11.2"
 source = { virtual = "." }
 dependencies = [
     { name = "aliyun-log-python-sdk" },
diff --git a/docker/.env.example b/docker/.env.example
index 16d47409f5..1ea1fb9a8e 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -399,6 +399,7 @@ CONSOLE_CORS_ALLOW_ORIGINS=*
 COOKIE_DOMAIN=
 # When the frontend and backend run on different subdomains, set NEXT_PUBLIC_COOKIE_DOMAIN=1.
 NEXT_PUBLIC_COOKIE_DOMAIN=
+NEXT_PUBLIC_BATCH_CONCURRENCY=5
 
 # ------------------------------
 # File Storage Configuration
diff --git a/docker/docker-compose-template.yaml b/docker/docker-compose-template.yaml
index 0de9d3e939..3c88cddf8c 100644
--- a/docker/docker-compose-template.yaml
+++ b/docker/docker-compose-template.yaml
@@ -21,7 +21,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.11.1
+    image: langgenius/dify-api:1.11.2
     restart: always
     environment:
       # Use the shared environment variables.
@@ -63,7 +63,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.11.1
+    image: langgenius/dify-api:1.11.2
     restart: always
     environment:
       # Use the shared environment variables.
@@ -102,7 +102,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.11.1
+    image: langgenius/dify-api:1.11.2
     restart: always
     environment:
       # Use the shared environment variables.
@@ -132,7 +132,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.11.1
+    image: langgenius/dify-web:1.11.2
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 964b9fe724..c03cb2ef9f 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -108,6 +108,7 @@ x-shared-env: &shared-api-worker-env
   CONSOLE_CORS_ALLOW_ORIGINS: ${CONSOLE_CORS_ALLOW_ORIGINS:-*}
   COOKIE_DOMAIN: ${COOKIE_DOMAIN:-}
   NEXT_PUBLIC_COOKIE_DOMAIN: ${NEXT_PUBLIC_COOKIE_DOMAIN:-}
+  NEXT_PUBLIC_BATCH_CONCURRENCY: ${NEXT_PUBLIC_BATCH_CONCURRENCY:-5}
   STORAGE_TYPE: ${STORAGE_TYPE:-opendal}
   OPENDAL_SCHEME: ${OPENDAL_SCHEME:-fs}
   OPENDAL_FS_ROOT: ${OPENDAL_FS_ROOT:-storage}
@@ -692,7 +693,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.11.1
+    image: langgenius/dify-api:1.11.2
     restart: always
     environment:
       # Use the shared environment variables.
@@ -734,7 +735,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.11.1
+    image: langgenius/dify-api:1.11.2
     restart: always
     environment:
       # Use the shared environment variables.
@@ -773,7 +774,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.11.1
+    image: langgenius/dify-api:1.11.2
     restart: always
     environment:
       # Use the shared environment variables.
@@ -803,7 +804,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.11.1
+    image: langgenius/dify-web:1.11.2
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}
diff --git a/web/.env.example b/web/.env.example
index b488c31057..c06a4fba87 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -73,3 +73,6 @@ NEXT_PUBLIC_MAX_TREE_DEPTH=50
 
 # The API key of amplitude
 NEXT_PUBLIC_AMPLITUDE_API_KEY=
+
+# number of concurrency
+NEXT_PUBLIC_BATCH_CONCURRENCY=5
diff --git a/web/__mocks__/provider-context.ts b/web/__mocks__/provider-context.ts
index 3ecb4e9c0e..c69a2ad1d2 100644
--- a/web/__mocks__/provider-context.ts
+++ b/web/__mocks__/provider-context.ts
@@ -1,6 +1,6 @@
 import type { Plan, UsagePlanInfo } from '@/app/components/billing/type'
 import type { ProviderContextState } from '@/context/provider-context'
-import { merge, noop } from 'lodash-es'
+import { merge, noop } from 'es-toolkit/compat'
 import { defaultPlan } from '@/app/components/billing/config'
 
 // Avoid being mocked in tests
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
index e9877f1715..34bb0f82f8 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
@@ -104,7 +104,7 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
 
     notify({
       type,
-      message: t(`common.actionMsg.${message}`),
+      message: t(`common.actionMsg.${message}` as any) as string,
     })
   }
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx
index 557b723259..55ed906a45 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx
@@ -53,7 +53,7 @@ const LongTimeRangePicker: FC<Props> = ({
 
   return (
     <SimpleSelect
-      items={Object.entries(periodMapping).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
+      items={Object.entries(periodMapping).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}` as any) as string }))}
       className="mt-0 !w-40"
       notClearable={true}
       onSelect={handleSelect}
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
index ab39846a36..004f83afc5 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
 import { RiCalendarLine } from '@remixicon/react'
 import dayjs from 'dayjs'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback } from 'react'
 import Picker from '@/app/components/base/date-and-time-picker/date-picker'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
index be7181c759..88cb79ce0d 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -66,7 +66,7 @@ const RangeSelector: FC<Props> = ({
   }, [])
   return (
     <SimpleSelect
-      items={ranges.map(v => ({ ...v, name: t(`appLog.filter.period.${v.name}`) }))}
+      items={ranges.map(v => ({ ...v, name: t(`appLog.filter.period.${v.name}` as any) as string }))}
       className="mt-0 !w-40"
       notClearable={true}
       onSelect={handleSelectRange}
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
index 9dfeaef528..aa64df3449 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react'
 import Form from '@/app/components/datasets/settings/form'
-import { getLocaleOnServer, useTranslation as translate } from '@/i18n-config/server'
+import { getLocaleOnServer, getTranslation } from '@/i18n-config/server'
 
 const Settings = async () => {
   const locale = await getLocaleOnServer()
-  const { t } = await translate(locale, 'dataset-settings')
+  const { t } = await getTranslation(locale, 'dataset-settings')
 
   return (
     <div className="h-full overflow-y-auto">
       <div className="flex flex-col gap-y-0.5 px-6 pb-2 pt-3">
-        <div className="system-xl-semibold text-text-primary">{t('title')}</div>
+        <div className="system-xl-semibold text-text-primary">{t('title') as any}</div>
         <div className="system-sm-regular text-text-tertiary">{t('desc')}</div>
       </div>
       <Form />
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
index 92c39eb729..108bd4b22e 100644
--- a/web/app/(shareLayout)/webapp-reset-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
index 9020858347..8b611b9eea 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
index 67e4bf7af2..46645ed68c 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
diff --git a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
index 99b4f5c686..655452ea24 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -1,6 +1,6 @@
 import type { ResponseError } from '@/service/fetch'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
diff --git a/web/app/components/app-sidebar/dataset-info/index.tsx b/web/app/components/app-sidebar/dataset-info/index.tsx
index ce409ff13a..39a1115062 100644
--- a/web/app/components/app-sidebar/dataset-info/index.tsx
+++ b/web/app/components/app-sidebar/dataset-info/index.tsx
@@ -73,7 +73,7 @@ const DatasetInfo: FC<DatasetInfoProps> = ({
               {isExternalProvider && t('dataset.externalTag')}
               {!isExternalProvider && isPipelinePublished && dataset.doc_form && dataset.indexing_technique && (
                 <div className="flex items-center gap-x-2">
-                  <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>
+                  <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}` as any) as string}</span>
                   <span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
                 </div>
               )}
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
index d8e26826ca..0e55a8af65 100644
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@@ -116,7 +116,7 @@ const DatasetSidebarDropdown = ({
                     {isExternalProvider && t('dataset.externalTag')}
                     {!isExternalProvider && dataset.doc_form && dataset.indexing_technique && (
                       <div className="flex items-center gap-x-2">
-                        <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>
+                        <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}` as any) as string}</span>
                         <span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
                       </div>
                     )}
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 7fbb745c48..7289ed384d 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/annotation/filter.spec.tsx b/web/app/components/app/annotation/filter.spec.tsx
index 9b733a8c10..7bb39bd444 100644
--- a/web/app/components/app/annotation/filter.spec.tsx
+++ b/web/app/components/app/annotation/filter.spec.tsx
@@ -1,72 +1,332 @@
+import type { UseQueryResult } from '@tanstack/react-query'
 import type { Mock } from 'vitest'
 import type { QueryParam } from './filter'
+import type { AnnotationsCountResponse } from '@/models/log'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import useSWR from 'swr'
+import * as useLogModule from '@/service/use-log'
 import Filter from './filter'
 
-vi.mock('swr', () => ({
-  __esModule: true,
-  default: vi.fn(),
-}))
+vi.mock('@/service/use-log')
 
-vi.mock('@/service/log', () => ({
-  fetchAnnotationsCount: vi.fn(),
-}))
+const mockUseAnnotationsCount = useLogModule.useAnnotationsCount as Mock
 
-const mockUseSWR = useSWR as unknown as Mock
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ============================================================================
+// Mock Return Value Factory
+// ============================================================================
+
+type MockQueryResult<T> = Pick<UseQueryResult<T>, 'data' | 'isLoading' | 'error' | 'refetch'>
+
+const createMockQueryResult = <T,>(
+  overrides: Partial<MockQueryResult<T>> = {},
+): MockQueryResult<T> => ({
+  data: undefined,
+  isLoading: false,
+  error: null,
+  refetch: vi.fn(),
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
 
 describe('Filter', () => {
   const appId = 'app-1'
   const childContent = 'child-content'
+  const defaultQueryParams: QueryParam = { keyword: '' }
 
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  it('should render nothing until annotation count is fetched', () => {
-    mockUseSWR.mockReturnValue({ data: undefined })
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render nothing when data is loading', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({ isLoading: true }),
+      )
 
-    const { container } = render(
-      <Filter
-        appId={appId}
-        queryParams={{ keyword: '' }}
-        setQueryParams={vi.fn()}
-      >
-        <div>{childContent}</div>
-      </Filter>,
-    )
+      // Act
+      const { container } = renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={defaultQueryParams}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
 
-    expect(container.firstChild).toBeNull()
-    expect(mockUseSWR).toHaveBeenCalledWith(
-      { url: `/apps/${appId}/annotations/count` },
-      expect.any(Function),
-    )
+      // Assert
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('should render nothing when data is undefined', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({ data: undefined, isLoading: false }),
+      )
+
+      // Act
+      const { container } = renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={defaultQueryParams}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Assert
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('should render filter and children when data is available', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 20 },
+          isLoading: false,
+        }),
+      )
+
+      // Act
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={defaultQueryParams}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Assert
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+      expect(screen.getByText(childContent)).toBeInTheDocument()
+    })
   })
 
-  it('should propagate keyword changes and clearing behavior', () => {
-    mockUseSWR.mockReturnValue({ data: { total: 20 } })
-    const queryParams: QueryParam = { keyword: 'prefill' }
-    const setQueryParams = vi.fn()
+  // --------------------------------------------------------------------------
+  // Props Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should call useAnnotationsCount with appId', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 10 },
+          isLoading: false,
+        }),
+      )
 
-    const { container } = render(
-      <Filter
-        appId={appId}
-        queryParams={queryParams}
-        setQueryParams={setQueryParams}
-      >
-        <div>{childContent}</div>
-      </Filter>,
-    )
+      // Act
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={defaultQueryParams}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
 
-    const input = screen.getByPlaceholderText('common.operation.search') as HTMLInputElement
-    fireEvent.change(input, { target: { value: 'updated' } })
-    expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: 'updated' })
+      // Assert
+      expect(mockUseAnnotationsCount).toHaveBeenCalledWith(appId)
+    })
 
-    const clearButton = input.parentElement?.querySelector('div.cursor-pointer') as HTMLElement
-    fireEvent.click(clearButton)
-    expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
+    it('should display keyword value in input', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 10 },
+          isLoading: false,
+        }),
+      )
+      const queryParams: QueryParam = { keyword: 'test-keyword' }
 
-    expect(container).toHaveTextContent(childContent)
+      // Act
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={queryParams}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Assert
+      expect(screen.getByPlaceholderText('common.operation.search')).toHaveValue('test-keyword')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    it('should call setQueryParams when typing in search input', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 20 },
+          isLoading: false,
+        }),
+      )
+      const queryParams: QueryParam = { keyword: '' }
+      const setQueryParams = vi.fn()
+
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={queryParams}
+          setQueryParams={setQueryParams}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Act
+      const input = screen.getByPlaceholderText('common.operation.search')
+      fireEvent.change(input, { target: { value: 'updated' } })
+
+      // Assert
+      expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: 'updated' })
+    })
+
+    it('should call setQueryParams with empty keyword when clearing input', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 20 },
+          isLoading: false,
+        }),
+      )
+      const queryParams: QueryParam = { keyword: 'prefill' }
+      const setQueryParams = vi.fn()
+
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={queryParams}
+          setQueryParams={setQueryParams}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Act
+      const input = screen.getByPlaceholderText('common.operation.search')
+      const clearButton = input.parentElement?.querySelector('div.cursor-pointer')
+      if (clearButton)
+        fireEvent.click(clearButton)
+
+      // Assert
+      expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle empty keyword in queryParams', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 5 },
+          isLoading: false,
+        }),
+      )
+
+      // Act
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={{ keyword: '' }}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Assert
+      expect(screen.getByPlaceholderText('common.operation.search')).toHaveValue('')
+    })
+
+    it('should handle undefined keyword in queryParams', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 5 },
+          isLoading: false,
+        }),
+      )
+
+      // Act
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={{ keyword: undefined }}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Assert
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
+
+    it('should handle zero count', () => {
+      // Arrange
+      mockUseAnnotationsCount.mockReturnValue(
+        createMockQueryResult<AnnotationsCountResponse>({
+          data: { count: 0 },
+          isLoading: false,
+        }),
+      )
+
+      // Act
+      renderWithQueryClient(
+        <Filter
+          appId={appId}
+          queryParams={defaultQueryParams}
+          setQueryParams={vi.fn()}
+        >
+          <div>{childContent}</div>
+        </Filter>,
+      )
+
+      // Assert - should still render when count is 0
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
   })
 })
diff --git a/web/app/components/app/annotation/filter.tsx b/web/app/components/app/annotation/filter.tsx
index 76f33d2f1b..b64a033793 100644
--- a/web/app/components/app/annotation/filter.tsx
+++ b/web/app/components/app/annotation/filter.tsx
@@ -2,9 +2,8 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import Input from '@/app/components/base/input'
-import { fetchAnnotationsCount } from '@/service/log'
+import { useAnnotationsCount } from '@/service/use-log'
 
 export type QueryParam = {
   keyword?: string
@@ -23,10 +22,9 @@ const Filter: FC<IFilterProps> = ({
   setQueryParams,
   children,
 }) => {
-  // TODO: change fetch list api
-  const { data } = useSWR({ url: `/apps/${appId}/annotations/count` }, fetchAnnotationsCount)
+  const { data, isLoading } = useAnnotationsCount(appId)
   const { t } = useTranslation()
-  if (!data)
+  if (isLoading || !data)
     return null
   return (
     <div className="mb-2 flex flex-row flex-wrap items-center justify-between gap-2">
diff --git a/web/app/components/app/annotation/header-opts/index.spec.tsx b/web/app/components/app/annotation/header-opts/index.spec.tsx
index c742f8effc..c52507fb22 100644
--- a/web/app/components/app/annotation/header-opts/index.spec.tsx
+++ b/web/app/components/app/annotation/header-opts/index.spec.tsx
@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'react'
 import type { AnnotationItemBasic } from '../type'
+import type { Locale } from '@/i18n-config'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
@@ -166,7 +167,7 @@ type HeaderOptionsProps = ComponentProps<typeof HeaderOptions>
 
 const renderComponent = (
   props: Partial<HeaderOptionsProps> = {},
-  locale: string = LanguagesSupported[0] as string,
+  locale: Locale = LanguagesSupported[0],
 ) => {
   const defaultProps: HeaderOptionsProps = {
     appId: 'test-app-id',
@@ -353,7 +354,7 @@ describe('HeaderOptions', () => {
       })
     const revokeSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(vi.fn())
 
-    renderComponent({}, LanguagesSupported[1] as string)
+    renderComponent({}, LanguagesSupported[1])
 
     await expandExportMenu(user)
 
@@ -441,7 +442,7 @@ describe('HeaderOptions', () => {
     view.rerender(
       <I18NContext.Provider
         value={{
-          locale: LanguagesSupported[0] as string,
+          locale: LanguagesSupported[0],
           i18n: {},
           setLocaleOnClient: vi.fn(),
         }}
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 83449dbe96..4b8a70f0ce 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -84,7 +84,7 @@ const AccessModeDisplay: React.FC<{ mode?: AccessMode }> = ({ mode }) => {
     <>
       <Icon className="h-4 w-4 shrink-0 text-text-secondary" />
       <div className="grow truncate">
-        <span className="system-sm-medium text-text-secondary">{t(`app.accessControlDialog.accessItems.${label}`)}</span>
+        <span className="system-sm-medium text-text-secondary">{t(`app.accessControlDialog.accessItems.${label}` as any) as string}</span>
       </div>
     </>
   )
diff --git a/web/app/components/app/configuration/base/feature-panel/index.spec.tsx b/web/app/components/app/configuration/base/feature-panel/index.spec.tsx
new file mode 100644
index 0000000000..7e1b661399
--- /dev/null
+++ b/web/app/components/app/configuration/base/feature-panel/index.spec.tsx
@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react'
+import FeaturePanel from './index'
+
+describe('FeaturePanel', () => {
+  // Rendering behavior for standard layout.
+  describe('Rendering', () => {
+    it('should render the title and children when provided', () => {
+      // Arrange
+      render(
+        <FeaturePanel title="Panel Title">
+          <div>Panel Body</div>
+        </FeaturePanel>,
+      )
+
+      // Assert
+      expect(screen.getByText('Panel Title')).toBeInTheDocument()
+      expect(screen.getByText('Panel Body')).toBeInTheDocument()
+    })
+  })
+
+  // Prop-driven presentation details like icons, actions, and spacing.
+  describe('Props', () => {
+    it('should render header icon and right slot and apply header border', () => {
+      // Arrange
+      render(
+        <FeaturePanel
+          title="Feature"
+          headerIcon={<span>Icon</span>}
+          headerRight={<button type="button">Action</button>}
+          hasHeaderBottomBorder={true}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Icon')).toBeInTheDocument()
+      expect(screen.getByText('Action')).toBeInTheDocument()
+      const header = screen.getByTestId('feature-panel-header')
+      expect(header).toHaveClass('border-b')
+    })
+
+    it('should apply custom className and remove padding when noBodySpacing is true', () => {
+      // Arrange
+      const { container } = render(
+        <FeaturePanel title="Spacing" className="custom-panel" noBodySpacing={true}>
+          <div>Body</div>
+        </FeaturePanel>,
+      )
+
+      // Assert
+      const root = container.firstElementChild as HTMLElement
+      expect(root).toHaveClass('custom-panel')
+      expect(root).toHaveClass('pb-0')
+      const body = screen.getByTestId('feature-panel-body')
+      expect(body).not.toHaveClass('mt-1')
+      expect(body).not.toHaveClass('px-3')
+    })
+  })
+
+  // Edge cases when optional content is missing.
+  describe('Edge Cases', () => {
+    it('should not render the body wrapper when children is undefined', () => {
+      // Arrange
+      render(<FeaturePanel title="No Body" />)
+
+      // Assert
+      expect(screen.queryByText('No Body')).toBeInTheDocument()
+      expect(screen.queryByText('Panel Body')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('feature-panel-body')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index 20c4a8dc17..06ae2ab10a 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -25,7 +25,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   return (
     <div className={cn('rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
       {/* Header */}
-      <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
+      <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')} data-testid="feature-panel-header">
         <div className="flex h-8 items-center justify-between">
           <div className="flex shrink-0 items-center space-x-1">
             {headerIcon && <div className="flex h-6 w-6 items-center justify-center">{headerIcon}</div>}
@@ -38,7 +38,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
       </div>
       {/* Body */}
       {children && (
-        <div className={cn(!noBodySpacing && 'mt-1 px-3')}>
+        <div className={cn(!noBodySpacing && 'mt-1 px-3')} data-testid="feature-panel-body">
           {children}
         </div>
       )}
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index b9f55de26b..6a22dc6d3b 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -4,7 +4,7 @@ import {
   RiAddLine,
   RiEditLine,
 } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 9b558b58c1..3f39828e79 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -4,8 +4,8 @@ import type { ExternalDataTool } from '@/models/common'
 import type { PromptVariable } from '@/models/debug'
 import type { GenRes } from '@/service/debug'
 import { useBoolean } from 'ahooks'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 41f37b5895..b1d8e8cd19 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -96,7 +96,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
     if (!isValid) {
       Toast.notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('appDebug.variableConfig.varName') }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: t('appDebug.variableConfig.varName') }) as string,
       })
       return false
     }
@@ -216,7 +216,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
     if (!isValid) {
       Toast.notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }) as string,
       })
       return
     }
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 7a2a86393a..bf528f8ca6 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -98,7 +98,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     if (errorMsgKey) {
       Toast.notify({
         type: 'error',
-        message: t(errorMsgKey, { key: t(typeName) }),
+        message: t(errorMsgKey as any, { key: t(typeName as any) as string }) as string,
       })
       return false
     }
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
index ccb958977c..a72a74a5e9 100644
--- 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
@@ -23,7 +23,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
   onClick,
 }) => {
   const { t } = useTranslation()
-  const typeName = t(`appDebug.variableConfig.${i18nFileTypeMap[type] || type}`)
+  const typeName = t(`appDebug.variableConfig.${i18nFileTypeMap[type] || type}` as any) as string
 
   return (
     <div
diff --git a/web/app/components/app/configuration/config/agent/prompt-editor.tsx b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
index 0a09609cca..7399aaeac9 100644
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import type { ExternalDataTool } from '@/models/common'
 import copy from 'copy-to-clipboard'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 46fcaee52b..9f29952197 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -141,7 +141,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
   const [editorKey, setEditorKey] = useState(`${flowId}-0`)
   const handleChooseTemplate = useCallback((key: string) => {
     return () => {
-      const template = t(`appDebug.generate.template.${key}.instruction`)
+      const template = t(`appDebug.generate.template.${key}.instruction` as any) as string
       setInstruction(template)
       setEditorKey(`${flowId}-${Date.now()}`)
     }
@@ -322,7 +322,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
                   <TryLabel
                     key={item.key}
                     Icon={item.icon}
-                    text={t(`appDebug.generate.template.${item.key}.name`)}
+                    text={t(`appDebug.generate.template.${item.key}.name` as any) as string}
                     onClick={handleChooseTemplate(item.key)}
                   />
                 ))}
diff --git a/web/app/components/app/configuration/dataset-config/index.spec.tsx b/web/app/components/app/configuration/dataset-config/index.spec.tsx
index acccdec98e..e3791db9c0 100644
--- a/web/app/components/app/configuration/dataset-config/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.spec.tsx
@@ -52,7 +52,7 @@ vi.mock('../debug/hooks', () => ({
   useFormattingChangedDispatcher: vi.fn(() => vi.fn()),
 }))
 
-vi.mock('lodash-es', () => ({
+vi.mock('es-toolkit/compat', () => ({
   intersectionBy: vi.fn((...arrays) => {
     // Mock realistic intersection behavior based on metadata name
     const validArrays = arrays.filter(Array.isArray)
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 9ac1729590..f5324f40d8 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -8,8 +8,8 @@ import type {
   MetadataFilteringModeEnum,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import type { DataSet } from '@/models/datasets'
+import { intersectionBy } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { intersectionBy } from 'lodash-es'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -176,7 +176,7 @@ const DatasetConfig: FC = () => {
     }))
   }, [setDatasetConfigs, datasetConfigsRef])
 
-  const handleAddCondition = useCallback<HandleAddCondition>(({ name, type }) => {
+  const handleAddCondition = useCallback<HandleAddCondition>(({ id, name, type }) => {
     let operator: ComparisonOperator = ComparisonOperator.is
 
     if (type === MetadataFilteringVariableType.number)
@@ -184,6 +184,7 @@ const DatasetConfig: FC = () => {
 
     const newCondition = {
       id: uuid4(),
+      metadata_id: id, // Save metadata.id for reliable reference
       name,
       comparison_operator: operator,
     }
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index ad5199fd55..f7aadc0c3f 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { FC } from 'react'
+import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { ModelConfig } from '@/app/components/workflow/types'
 import type {
   DataSet,
@@ -8,7 +9,6 @@ import type {
 import type {
   DatasetConfigs,
 } from '@/models/debug'
-import { noop } from 'lodash-es'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
@@ -33,17 +33,20 @@ type Props = {
   selectedDatasets?: DataSet[]
   isInWorkflow?: boolean
   singleRetrievalModelConfig?: ModelConfig
-  onSingleRetrievalModelChange?: (config: ModelConfig) => void
-  onSingleRetrievalModelParamsChange?: (config: ModelConfig) => void
+  onSingleRetrievalModelChange?: ModelParameterModalProps['setModel']
+  onSingleRetrievalModelParamsChange?: ModelParameterModalProps['onCompletionParamsChange']
 }
 
+const noopModelChange: ModelParameterModalProps['setModel'] = () => {}
+const noopParamsChange: ModelParameterModalProps['onCompletionParamsChange'] = () => {}
+
 const ConfigContent: FC<Props> = ({
   datasetConfigs,
   onChange,
   isInWorkflow,
   singleRetrievalModelConfig: singleRetrievalConfig = {} as ModelConfig,
-  onSingleRetrievalModelChange = noop,
-  onSingleRetrievalModelParamsChange = noop,
+  onSingleRetrievalModelChange = noopModelChange,
+  onSingleRetrievalModelParamsChange = noopParamsChange,
   selectedDatasets = [],
 }) => {
   const { t } = useTranslation()
diff --git a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
index 77f3ac0eb8..3a62a66525 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Slider from '@/app/components/base/slider'
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index 1454ab0c62..0d8a0934e5 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -3,7 +3,7 @@ import type { Member } from '@/models/common'
 import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
 import { RiCloseLine } from '@remixicon/react'
-import { isEqual } from 'lodash-es'
+import { isEqual } from 'es-toolkit/compat'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -295,7 +295,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
                 isExternal
                 rowClass={rowClass}
                 labelClass={labelClass}
-                t={t}
+                t={t as any}
                 topK={topK}
                 scoreThreshold={scoreThreshold}
                 scoreThresholdEnabled={scoreThresholdEnabled}
@@ -308,7 +308,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
                 isExternal={false}
                 rowClass={rowClass}
                 labelClass={labelClass}
-                t={t}
+                t={t as any}
                 indexMethod={indexMethod}
                 retrievalConfig={retrievalConfig}
                 showMultiModalTip={showMultiModalTip}
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx
index 9d058186cf..3f0381074f 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/context.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { ModelAndParameter } from '../types'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { createContext, useContext } from 'use-context-selector'
 
 export type DebugWithMultipleModelContextType = {
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx
index 8dda5b3879..9113f782d9 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/text-generation-item.tsx
@@ -4,7 +4,7 @@ import type {
   OnSend,
   TextGenerationConfig,
 } from '@/app/components/base/text-generation/types'
-import { cloneDeep, noop } from 'lodash-es'
+import { cloneDeep, noop } from 'es-toolkit/compat'
 import { memo } from 'react'
 import TextGeneration from '@/app/components/app/text-generate/item'
 import { TransferMethod } from '@/app/components/base/chat/types'
diff --git a/web/app/components/app/configuration/debug/hooks.tsx b/web/app/components/app/configuration/debug/hooks.tsx
index 786d43bdb9..e66185e284 100644
--- a/web/app/components/app/configuration/debug/hooks.tsx
+++ b/web/app/components/app/configuration/debug/hooks.tsx
@@ -6,7 +6,7 @@ import type {
   ChatConfig,
   ChatItem,
 } from '@/app/components/base/chat/types'
-import cloneDeep from 'lodash-es/cloneDeep'
+import { cloneDeep } from 'es-toolkit/compat'
 import {
   useCallback,
   useRef,
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index fe1c6550f5..140f9421c9 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -11,9 +11,8 @@ import {
   RiSparklingFill,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
+import { cloneDeep, noop } from 'es-toolkit/compat'
 import { produce, setAutoFreeze } from 'immer'
-import { noop } from 'lodash-es'
-import cloneDeep from 'lodash-es/cloneDeep'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts b/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts
index 63603033d3..3e8f7c5b3a 100644
--- a/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts
+++ b/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts
@@ -1,7 +1,7 @@
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { ChatPromptConfig, CompletionPromptConfig, ConversationHistoriesRole, PromptItem } from '@/models/debug'
+import { clone } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { clone } from 'lodash-es'
 import { useState } from 'react'
 import { checkHasContextBlock, checkHasHistoryBlock, checkHasQueryBlock, PRE_PROMPT_PLACEHOLDER_TEXT } from '@/app/components/base/prompt-editor/constants'
 import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index eb7a9f5a32..9cc9377508 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -20,8 +20,8 @@ import type {
 import type { ModelConfig as BackendModelConfig, UserInputFormItem, VisionSettings } from '@/types/app'
 import { CodeBracketIcon } from '@heroicons/react/20/solid'
 import { useBoolean, useGetState } from 'ahooks'
+import { clone, isEqual } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { clone, isEqual } from 'lodash-es'
 import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -679,7 +679,7 @@ const Configuration: FC = () => {
               const toolInCollectionList = collectionList.find(c => tool.provider_id === c.id)
               return {
                 ...tool,
-                isDeleted: res.deleted_tools?.some((deletedTool: any) => deletedTool.id === tool.id && deletedTool.tool_name === tool.tool_name) ?? false,
+                isDeleted: res.deleted_tools?.some((deletedTool: any) => deletedTool.provider_id === tool.provider_id && deletedTool.tool_name === tool.tool_name) ?? false,
                 notAuthor: toolInCollectionList?.is_team_authorization === false,
                 ...(tool.provider_type === 'builtin'
                   ? {
diff --git a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
index 74f436289f..ccd0b1288e 100644
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -3,7 +3,7 @@ import type {
   CodeBasedExtensionItem,
   ExternalDataTool,
 } from '@/models/common'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
diff --git a/web/app/components/app/create-app-dialog/app-list/index.spec.tsx b/web/app/components/app/create-app-dialog/app-list/index.spec.tsx
new file mode 100644
index 0000000000..42f510b468
--- /dev/null
+++ b/web/app/components/app/create-app-dialog/app-list/index.spec.tsx
@@ -0,0 +1,136 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+import Apps from './index'
+
+const mockUseExploreAppList = vi.fn()
+
+vi.mock('ahooks', () => ({
+  useDebounceFn: (fn: () => void) => ({
+    run: () => setTimeout(fn, 0),
+    cancel: vi.fn(),
+    flush: () => fn(),
+  }),
+}))
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({ isCurrentWorkspaceEditor: true }),
+}))
+vi.mock('use-context-selector', async () => {
+  const actual = await vi.importActual<typeof import('use-context-selector')>('use-context-selector')
+  return {
+    ...actual,
+    useContext: () => ({ hasEditPermission: true }),
+  }
+})
+vi.mock('@/hooks/use-tab-searchparams', () => ({
+  useTabSearchParams: () => ['Recommended', vi.fn()],
+}))
+vi.mock('@/service/use-explore', () => ({
+  useExploreAppList: () => mockUseExploreAppList(),
+}))
+vi.mock('@/app/components/app/type-selector', () => ({
+  __esModule: true,
+  default: ({ value, onChange }: { value: AppModeEnum[], onChange: (value: AppModeEnum[]) => void }) => (
+    <button data-testid="type-selector" onClick={() => onChange([...value, 'chat' as AppModeEnum])}>{value.join(',')}</button>
+  ),
+}))
+vi.mock('../app-card', () => ({
+  __esModule: true,
+  default: ({ app, onCreate }: { app: any, onCreate: () => void }) => (
+    <div
+      data-testid="app-card"
+      data-name={app.app.name}
+      onClick={onCreate}
+    >
+      {app.app.name}
+    </div>
+  ),
+}))
+vi.mock('@/app/components/explore/create-app-modal', () => ({
+  __esModule: true,
+  default: () => <div data-testid="create-from-template-modal" />,
+}))
+vi.mock('@/app/components/base/toast', () => ({
+  default: { notify: vi.fn() },
+}))
+vi.mock('@/app/components/base/amplitude', () => ({
+  trackEvent: vi.fn(),
+}))
+vi.mock('@/service/apps', () => ({
+  importDSL: vi.fn().mockResolvedValue({ app_id: '1' }),
+}))
+vi.mock('@/service/explore', () => ({
+  fetchAppDetail: vi.fn().mockResolvedValue({
+    export_data: 'dsl',
+    mode: 'chat',
+  }),
+}))
+vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
+  usePluginDependencies: () => ({
+    handleCheckPluginDependencies: vi.fn(),
+  }),
+}))
+vi.mock('@/utils/app-redirection', () => ({
+  getRedirection: vi.fn(),
+}))
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}))
+
+const createAppEntry = (name: string, category: string) => ({
+  app_id: name,
+  category,
+  app: {
+    id: name,
+    name,
+    icon_type: 'emoji',
+    icon: '🙂',
+    icon_background: '#000',
+    icon_url: null,
+    description: 'desc',
+    mode: AppModeEnum.CHAT,
+  },
+})
+
+describe('Apps', () => {
+  const defaultData = {
+    allList: [
+      createAppEntry('Alpha', 'Cat A'),
+      createAppEntry('Bravo', 'Cat B'),
+    ],
+    categories: ['Cat A', 'Cat B'],
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseExploreAppList.mockReturnValue({
+      data: defaultData,
+      isLoading: false,
+    })
+  })
+
+  it('renders template cards when data is available', () => {
+    render(<Apps />)
+
+    expect(screen.getAllByTestId('app-card')).toHaveLength(2)
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.getByText('Bravo')).toBeInTheDocument()
+  })
+
+  it('opens create modal when a template card is clicked', () => {
+    render(<Apps />)
+
+    fireEvent.click(screen.getAllByTestId('app-card')[0])
+    expect(screen.getByTestId('create-from-template-modal')).toBeInTheDocument()
+  })
+  it('shows no template message when list is empty', () => {
+    mockUseExploreAppList.mockReturnValueOnce({
+      data: { allList: [], categories: [] },
+      isLoading: false,
+    })
+
+    render(<Apps />)
+
+    expect(screen.getByText('app.newApp.noTemplateFound')).toBeInTheDocument()
+    expect(screen.getByText('app.newApp.noTemplateFoundTip')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index df54de2ff1..0df13e1ba1 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -8,7 +8,6 @@ import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import AppTypeSelector from '@/app/components/app/type-selector'
 import { trackEvent } from '@/app/components/base/amplitude'
@@ -24,7 +23,8 @@ import ExploreContext from '@/context/explore-context'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { DSLImportMode } from '@/models/app'
 import { importDSL } from '@/service/apps'
-import { fetchAppDetail, fetchAppList } from '@/service/explore'
+import { fetchAppDetail } from '@/service/explore'
+import { useExploreAppList } from '@/service/use-explore'
 import { AppModeEnum } from '@/types/app'
 import { getRedirection } from '@/utils/app-redirection'
 import { cn } from '@/utils/classnames'
@@ -70,23 +70,14 @@ const Apps = ({
   })
 
   const {
-    data: { categories, allList },
-  } = useSWR(
-    ['/explore/apps'],
-    () =>
-      fetchAppList().then(({ categories, recommended_apps }) => ({
-        categories,
-        allList: recommended_apps.sort((a, b) => a.position - b.position),
-      })),
-    {
-      fallbackData: {
-        categories: [],
-        allList: [],
-      },
-    },
-  )
+    data,
+    isLoading,
+  } = useExploreAppList()
 
   const filteredList = useMemo(() => {
+    if (!data)
+      return []
+    const { allList } = data
     const filteredByCategory = allList.filter((item) => {
       if (currCategory === allCategoriesEn)
         return true
@@ -107,7 +98,7 @@ const Apps = ({
         return true
       return false
     })
-  }, [currentType, currCategory, allCategoriesEn, allList])
+  }, [currentType, currCategory, allCategoriesEn, data])
 
   const searchFilteredList = useMemo(() => {
     if (!searchKeywords || !filteredList || filteredList.length === 0)
@@ -169,7 +160,7 @@ const Apps = ({
     }
   }
 
-  if (!categories || categories.length === 0) {
+  if (isLoading) {
     return (
       <div className="flex h-full items-center">
         <Loading type="area" />
@@ -203,7 +194,7 @@ const Apps = ({
       <div className="relative flex flex-1 overflow-y-auto">
         {!searchKeywords && (
           <div className="h-full w-[200px] p-4">
-            <Sidebar current={currCategory as AppCategories} categories={categories} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
+            <Sidebar current={currCategory as AppCategories} categories={data?.categories || []} onClick={(category) => { setCurrCategory(category) }} onCreateFromBlank={onCreateFromBlank} />
           </div>
         )}
         <div className="h-full flex-1 shrink-0 grow overflow-auto border-l border-divider-burn p-6 pt-2">
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.spec.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.spec.tsx
new file mode 100644
index 0000000000..724177a6ce
--- /dev/null
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.spec.tsx
@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Sidebar, { AppCategories } from './sidebar'
+
+vi.mock('@remixicon/react', () => ({
+  RiStickyNoteAddLine: () => <span>sticky</span>,
+  RiThumbUpLine: () => <span>thumb</span>,
+}))
+describe('Sidebar', () => {
+  it('renders recommended and custom categories', () => {
+    render(<Sidebar current={AppCategories.RECOMMENDED} categories={['Cat A', 'Cat B']} />)
+
+    expect(screen.getByText('app.newAppFromTemplate.sidebar.Recommended')).toBeInTheDocument()
+    expect(screen.getByText('Cat A')).toBeInTheDocument()
+    expect(screen.getByText('Cat B')).toBeInTheDocument()
+  })
+
+  it('notifies callbacks when items are clicked', () => {
+    const onClick = vi.fn()
+    const onCreate = vi.fn()
+    render(
+      <Sidebar
+        current="Cat A"
+        categories={['Cat A']}
+        onClick={onClick}
+        onCreateFromBlank={onCreate}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('app.newAppFromTemplate.sidebar.Recommended'))
+    expect(onClick).toHaveBeenCalledWith(AppCategories.RECOMMENDED)
+
+    fireEvent.click(screen.getByText('Cat A'))
+    expect(onClick).toHaveBeenCalledWith('Cat A')
+
+    fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+    expect(onCreate).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 3d6cabedf6..809859d3ad 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -3,7 +3,7 @@
 import type { MouseEventHandler } from 'react'
 import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 420a6b159a..f670b37076 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { AppIconType } from '@/types/app'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/log/filter.tsx b/web/app/components/app/log/filter.tsx
index 8984ff3494..26c21e6cf6 100644
--- a/web/app/components/app/log/filter.tsx
+++ b/web/app/components/app/log/filter.tsx
@@ -6,11 +6,10 @@ import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
 import Sort from '@/app/components/base/sort'
-import { fetchAnnotationsCount } from '@/service/log'
+import { useAnnotationsCount } from '@/service/use-log'
 
 dayjs.extend(quarterOfYear)
 
@@ -36,9 +35,9 @@ type IFilterProps = {
 }
 
 const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryParams }: IFilterProps) => {
-  const { data } = useSWR({ url: `/apps/${appId}/annotations/count` }, fetchAnnotationsCount)
+  const { data, isLoading } = useAnnotationsCount(appId)
   const { t } = useTranslation()
-  if (!data)
+  if (isLoading || !data)
     return null
   return (
     <div className="mb-2 flex flex-row flex-wrap items-center gap-2">
@@ -51,7 +50,7 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
           setQueryParams({ ...queryParams, period: item.value })
         }}
         onClear={() => setQueryParams({ ...queryParams, period: '9' })}
-        items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
+        items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}` as any) as string }))}
       />
       <Chip
         className="min-w-[150px]"
diff --git a/web/app/components/app/log/index.tsx b/web/app/components/app/log/index.tsx
index 183826464f..52485f5dd2 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -3,16 +3,15 @@ import type { FC } from 'react'
 import type { App } from '@/types/app'
 import { useDebounce } from 'ahooks'
 import dayjs from 'dayjs'
-import { omit } from 'lodash-es'
+import { omit } from 'es-toolkit/compat'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import Loading from '@/app/components/base/loading'
 import Pagination from '@/app/components/base/pagination'
 import { APP_PAGE_LIMIT } from '@/config'
-import { fetchChatConversations, fetchCompletionConversations } from '@/service/log'
+import { useChatConversations, useCompletionConversations } from '@/service/use-log'
 import { AppModeEnum } from '@/types/app'
 import EmptyElement from './empty-element'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
@@ -88,19 +87,15 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
   }
 
   // When the details are obtained, proceed to the next request
-  const { data: chatConversations, mutate: mutateChatList } = useSWR(() => isChatMode
-    ? {
-        url: `/apps/${appDetail.id}/chat-conversations`,
-        params: query,
-      }
-    : null, fetchChatConversations)
+  const { data: chatConversations, refetch: mutateChatList } = useChatConversations({
+    appId: isChatMode ? appDetail.id : '',
+    params: query,
+  })
 
-  const { data: completionConversations, mutate: mutateCompletionList } = useSWR(() => !isChatMode
-    ? {
-        url: `/apps/${appDetail.id}/completion-conversations`,
-        params: query,
-      }
-    : null, fetchCompletionConversations)
+  const { data: completionConversations, refetch: mutateCompletionList } = useCompletionConversations({
+    appId: !isChatMode ? appDetail.id : '',
+    params: query,
+  })
 
   const total = isChatMode ? chatConversations?.total : completionConversations?.total
 
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 06cd20b323..cf10cff327 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -12,12 +12,11 @@ import { RiCloseLine, RiEditFill } from '@remixicon/react'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
-import { get, noop } from 'lodash-es'
+import { get, noop } from 'es-toolkit/compat'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { createContext, useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import ModelInfo from '@/app/components/app/log/model-info'
@@ -38,7 +37,8 @@ import { WorkflowContextProvider } from '@/app/components/workflow/context'
 import { useAppContext } from '@/context/app-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
-import { fetchChatConversationDetail, fetchChatMessages, fetchCompletionConversationDetail, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log'
+import { fetchChatMessages, updateLogMessageAnnotations, updateLogMessageFeedbacks } from '@/service/log'
+import { useChatConversationDetail, useCompletionConversationDetail } from '@/service/use-log'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import PromptLogModal from '../../base/prompt-log-modal'
@@ -825,8 +825,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
  */
 const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: string }> = ({ appId, conversationId }) => {
   // Text Generator App Session Details Including Message List
-  const detailParams = ({ url: `/apps/${appId}/completion-conversations/${conversationId}` })
-  const { data: conversationDetail, mutate: conversationDetailMutate } = useSWR(() => (appId && conversationId) ? detailParams : null, fetchCompletionConversationDetail)
+  const { data: conversationDetail, refetch: conversationDetailMutate } = useCompletionConversationDetail(appId, conversationId)
   const { notify } = useContext(ToastContext)
   const { t } = useTranslation()
 
@@ -875,8 +874,7 @@ const CompletionConversationDetailComp: FC<{ appId?: string, conversationId?: st
  * Chat App Conversation Detail Component
  */
 const ChatConversationDetailComp: FC<{ appId?: string, conversationId?: string }> = ({ appId, conversationId }) => {
-  const detailParams = { url: `/apps/${appId}/chat-conversations/${conversationId}` }
-  const { data: conversationDetail } = useSWR(() => (appId && conversationId) ? detailParams : null, fetchChatConversationDetail)
+  const { data: conversationDetail } = useChatConversationDetail(appId, conversationId)
   const { notify } = useContext(ToastContext)
   const { t } = useTranslation()
 
diff --git a/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
index 0e8f82b00d..5cffa1143b 100644
--- a/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
@@ -2,7 +2,7 @@ import type { RenderOptions } from '@testing-library/react'
 import type { Mock, MockedFunction } from 'vitest'
 import type { ModalContextState } from '@/context/modal-context'
 import { fireEvent, render } from '@testing-library/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { defaultPlan } from '@/app/components/billing/config'
 import { useModalContext as actualUseModalContext } from '@/context/modal-context'
 
diff --git a/web/app/components/app/overview/app-chart.tsx b/web/app/components/app/overview/app-chart.tsx
index d876dbda27..114ef7d5db 100644
--- a/web/app/components/app/overview/app-chart.tsx
+++ b/web/app/components/app/overview/app-chart.tsx
@@ -6,7 +6,7 @@ import type { AppDailyConversationsResponse, AppDailyEndUsersResponse, AppDailyM
 import dayjs from 'dayjs'
 import Decimal from 'decimal.js'
 import ReactECharts from 'echarts-for-react'
-import { get } from 'lodash-es'
+import { get } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Basic from '@/app/components/app-sidebar/basic'
diff --git a/web/app/components/app/overview/settings/index.spec.tsx b/web/app/components/app/overview/settings/index.spec.tsx
new file mode 100644
index 0000000000..8deae7f952
--- /dev/null
+++ b/web/app/components/app/overview/settings/index.spec.tsx
@@ -0,0 +1,217 @@
+import type { ReactNode } from 'react'
+import type { ModalContextState } from '@/context/modal-context'
+import type { ProviderContextState } from '@/context/provider-context'
+import type { AppDetailResponse } from '@/models/app'
+import type { AppSSO } from '@/types/app'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { Plan } from '@/app/components/billing/type'
+import { baseProviderContextValue } from '@/context/provider-context'
+import { AppModeEnum } from '@/types/app'
+import SettingsModal from './index'
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next')
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, options?: Record<string, unknown>) => {
+        if (options?.returnObjects)
+          return [`${key}-feature-1`, `${key}-feature-2`]
+        if (options)
+          return `${key}:${JSON.stringify(options)}`
+        return key
+      },
+      i18n: {
+        language: 'en',
+        changeLanguage: vi.fn(),
+      },
+    }),
+    Trans: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  }
+})
+
+const mockNotify = vi.fn()
+const mockOnClose = vi.fn()
+const mockOnSave = vi.fn()
+const mockSetShowPricingModal = vi.fn()
+const mockSetShowAccountSettingModal = vi.fn()
+const mockUseProviderContext = vi.fn<() => ProviderContextState>()
+
+const buildModalContext = (): ModalContextState => ({
+  setShowAccountSettingModal: mockSetShowAccountSettingModal,
+  setShowApiBasedExtensionModal: vi.fn(),
+  setShowModerationSettingModal: vi.fn(),
+  setShowExternalDataToolModal: vi.fn(),
+  setShowPricingModal: mockSetShowPricingModal,
+  setShowAnnotationFullModal: vi.fn(),
+  setShowModelModal: vi.fn(),
+  setShowExternalKnowledgeAPIModal: vi.fn(),
+  setShowModelLoadBalancingModal: vi.fn(),
+  setShowOpeningModal: vi.fn(),
+  setShowUpdatePluginModal: vi.fn(),
+  setShowEducationExpireNoticeModal: vi.fn(),
+  setShowTriggerEventsLimitModal: vi.fn(),
+})
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => buildModalContext(),
+}))
+
+vi.mock('@/app/components/base/toast', async () => {
+  const actual = await vi.importActual<typeof import('@/app/components/base/toast')>('@/app/components/base/toast')
+  return {
+    ...actual,
+    useToastContext: () => ({
+      notify: mockNotify,
+      close: vi.fn(),
+    }),
+  }
+})
+
+vi.mock('@/context/i18n', async () => {
+  const actual = await vi.importActual<typeof import('@/context/i18n')>('@/context/i18n')
+  return {
+    ...actual,
+    useDocLink: () => (path?: string) => `https://docs.example.com${path ?? ''}`,
+  }
+})
+
+vi.mock('@/context/provider-context', async () => {
+  const actual = await vi.importActual<typeof import('@/context/provider-context')>('@/context/provider-context')
+  return {
+    ...actual,
+    useProviderContext: () => mockUseProviderContext(),
+  }
+})
+
+const mockAppInfo = {
+  site: {
+    title: 'Test App',
+    icon_type: 'emoji',
+    icon: '😀',
+    icon_background: '#ABCDEF',
+    icon_url: 'https://example.com/icon.png',
+    description: 'A description',
+    chat_color_theme: '#123456',
+    chat_color_theme_inverted: true,
+    copyright: '© Dify',
+    privacy_policy: '',
+    custom_disclaimer: 'Disclaimer',
+    default_language: 'en-US',
+    show_workflow_steps: true,
+    use_icon_as_answer_icon: true,
+  },
+  mode: AppModeEnum.ADVANCED_CHAT,
+  enable_sso: false,
+} as unknown as AppDetailResponse & Partial<AppSSO>
+
+const renderSettingsModal = () => render(
+  <SettingsModal
+    isChat
+    isShow
+    appInfo={mockAppInfo}
+    onClose={mockOnClose}
+    onSave={mockOnSave}
+  />,
+)
+
+describe('SettingsModal', () => {
+  beforeEach(() => {
+    mockNotify.mockClear()
+    mockOnClose.mockClear()
+    mockOnSave.mockClear()
+    mockSetShowPricingModal.mockClear()
+    mockSetShowAccountSettingModal.mockClear()
+    mockUseProviderContext.mockReturnValue({
+      ...baseProviderContextValue,
+      enableBilling: true,
+      plan: {
+        ...baseProviderContextValue.plan,
+        type: Plan.sandbox,
+      },
+      webappCopyrightEnabled: true,
+    })
+  })
+
+  it('should render the modal and expose the expanded settings section', async () => {
+    renderSettingsModal()
+    expect(screen.getByText('appOverview.overview.appInfo.settings.title')).toBeInTheDocument()
+
+    const showMoreEntry = screen.getByText('appOverview.overview.appInfo.settings.more.entry')
+    fireEvent.click(showMoreEntry)
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('appOverview.overview.appInfo.settings.more.copyRightPlaceholder')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('appOverview.overview.appInfo.settings.more.privacyPolicyPlaceholder')).toBeInTheDocument()
+    })
+  })
+
+  it('should notify the user when the name is empty', async () => {
+    renderSettingsModal()
+    const nameInput = screen.getByPlaceholderText('app.appNamePlaceholder')
+    fireEvent.change(nameInput, { target: { value: '' } })
+    fireEvent.click(screen.getByText('common.operation.save'))
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ message: 'app.newApp.nameNotEmpty' }))
+    })
+    expect(mockOnSave).not.toHaveBeenCalled()
+  })
+
+  it('should validate the theme color and show an error when the hex is invalid', async () => {
+    renderSettingsModal()
+    const colorInput = screen.getByPlaceholderText('E.g #A020F0')
+    fireEvent.change(colorInput, { target: { value: 'not-a-hex' } })
+
+    fireEvent.click(screen.getByText('common.operation.save'))
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        message: 'appOverview.overview.appInfo.settings.invalidHexMessage',
+      }))
+    })
+    expect(mockOnSave).not.toHaveBeenCalled()
+  })
+
+  it('should validate the privacy policy URL when advanced settings are open', async () => {
+    renderSettingsModal()
+    fireEvent.click(screen.getByText('appOverview.overview.appInfo.settings.more.entry'))
+    const privacyInput = screen.getByPlaceholderText('appOverview.overview.appInfo.settings.more.privacyPolicyPlaceholder')
+    // eslint-disable-next-line sonarjs/no-clear-text-protocols
+    fireEvent.change(privacyInput, { target: { value: 'ftp://invalid-url' } })
+
+    fireEvent.click(screen.getByText('common.operation.save'))
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
+        message: 'appOverview.overview.appInfo.settings.invalidPrivacyPolicy',
+      }))
+    })
+    expect(mockOnSave).not.toHaveBeenCalled()
+  })
+
+  it('should save valid settings and close the modal', async () => {
+    mockOnSave.mockResolvedValueOnce(undefined)
+    renderSettingsModal()
+
+    fireEvent.click(screen.getByText('common.operation.save'))
+
+    await waitFor(() => expect(mockOnSave).toHaveBeenCalled())
+    expect(mockOnSave).toHaveBeenCalledWith(expect.objectContaining({
+      title: mockAppInfo.site.title,
+      description: mockAppInfo.site.description,
+      default_language: mockAppInfo.site.default_language,
+      chat_color_theme: mockAppInfo.site.chat_color_theme,
+      chat_color_theme_inverted: mockAppInfo.site.chat_color_theme_inverted,
+      prompt_public: false,
+      copyright: mockAppInfo.site.copyright,
+      privacy_policy: mockAppInfo.site.privacy_policy,
+      custom_disclaimer: mockAppInfo.site.custom_disclaimer,
+      icon_type: 'emoji',
+      icon: mockAppInfo.site.icon,
+      icon_background: mockAppInfo.site.icon_background,
+      show_workflow_steps: mockAppInfo.site.show_workflow_steps,
+      use_icon_as_answer_icon: mockAppInfo.site.use_icon_as_answer_icon,
+      enable_sso: mockAppInfo.enable_sso,
+    }))
+    expect(mockOnClose).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 257f7b6788..83f2efc49d 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -2,7 +2,7 @@
 
 import type { App } from '@/types/app'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/workflow-log/filter.tsx b/web/app/components/app/workflow-log/filter.tsx
index 9e3b213deb..55b8e08175 100644
--- a/web/app/components/app/workflow-log/filter.tsx
+++ b/web/app/components/app/workflow-log/filter.tsx
@@ -55,7 +55,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
           setQueryParams({ ...queryParams, period: item.value })
         }}
         onClear={() => setQueryParams({ ...queryParams, period: '9' })}
-        items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
+        items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}` as any) as string }))}
       />
       <Input
         wrapperClassName="w-[200px]"
diff --git a/web/app/components/app/workflow-log/index.spec.tsx b/web/app/components/app/workflow-log/index.spec.tsx
index 8d87a6426b..d689758b30 100644
--- a/web/app/components/app/workflow-log/index.spec.tsx
+++ b/web/app/components/app/workflow-log/index.spec.tsx
@@ -1,9 +1,9 @@
-import type { MockedFunction } from 'vitest'
+import type { UseQueryResult } from '@tanstack/react-query'
 /**
  * Logs Container Component Tests
  *
  * Tests the main Logs container component which:
- * - Fetches workflow logs via useSWR
+ * - Fetches workflow logs via TanStack Query
  * - Manages query parameters (status, period, keyword)
  * - Handles pagination
  * - Renders Filter, List, and Empty states
@@ -15,14 +15,16 @@ import type { MockedFunction } from 'vitest'
  * - trigger-by-display.spec.tsx
  */
 
+import type { MockedFunction } from 'vitest'
 import type { ILogsProps } from './index'
 import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunDetail } from '@/models/log'
 import type { App, AppIconType, AppModeEnum } from '@/types/app'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import useSWR from 'swr'
 import { APP_PAGE_LIMIT } from '@/config'
 import { WorkflowRunTriggeredFrom } from '@/models/log'
+import * as useLogModule from '@/service/use-log'
 import { TIME_PERIOD_MAPPING } from './filter'
 import Logs from './index'
 
@@ -30,7 +32,7 @@ import Logs from './index'
 // Mocks
 // ============================================================================
 
-vi.mock('swr')
+vi.mock('@/service/use-log')
 
 vi.mock('ahooks', () => ({
   useDebounce: <T,>(value: T) => value,
@@ -72,10 +74,6 @@ vi.mock('@/app/components/base/amplitude/utils', () => ({
   trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
 }))
 
-vi.mock('@/service/log', () => ({
-  fetchWorkflowLogs: vi.fn(),
-}))
-
 vi.mock('@/hooks/use-theme', () => ({
   __esModule: true,
   default: () => {
@@ -89,38 +87,76 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-// Mock useTimestamp
-vi.mock('@/hooks/use-timestamp', () => ({
-  __esModule: true,
-  default: () => ({
-    formatTime: (timestamp: number, _format: string) => `formatted-${timestamp}`,
-  }),
-}))
-
-// Mock useBreakpoints
-vi.mock('@/hooks/use-breakpoints', () => ({
-  __esModule: true,
-  default: () => 'pc',
-  MediaType: {
-    mobile: 'mobile',
-    pc: 'pc',
-  },
-}))
-
-// Mock BlockIcon
-vi.mock('@/app/components/workflow/block-icon', () => ({
-  __esModule: true,
-  default: () => <div data-testid="block-icon">BlockIcon</div>,
-}))
-
 // Mock WorkflowContextProvider
 vi.mock('@/app/components/workflow/context', () => ({
   WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="workflow-context-provider">{children}</div>
+    <>{children}</>
   ),
 }))
 
-const mockedUseSWR = useSWR as unknown as MockedFunction<typeof useSWR>
+const mockedUseWorkflowLogs = useLogModule.useWorkflowLogs as MockedFunction<typeof useLogModule.useWorkflowLogs>
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ============================================================================
+// Mock Return Value Factory
+// ============================================================================
+
+const createMockQueryResult = <T,>(
+  overrides: { data?: T, isLoading?: boolean, error?: Error | null } = {},
+): UseQueryResult<T, Error> => {
+  const isLoading = overrides.isLoading ?? false
+  const error = overrides.error ?? null
+  const data = overrides.data
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: vi.fn(),
+    isError: !!error,
+    isPending: isLoading,
+    isSuccess: !isLoading && !error && data !== undefined,
+    isFetching: isLoading,
+    isRefetching: false,
+    isLoadingError: false,
+    isRefetchError: false,
+    isInitialLoading: isLoading,
+    isPaused: false,
+    isEnabled: true,
+    status: isLoading ? 'pending' : error ? 'error' : 'success',
+    fetchStatus: isLoading ? 'fetching' : 'idle',
+    dataUpdatedAt: Date.now(),
+    errorUpdatedAt: 0,
+    failureCount: 0,
+    failureReason: null,
+    errorUpdateCount: 0,
+    isFetched: !isLoading,
+    isFetchedAfterMount: !isLoading,
+    isPlaceholderData: false,
+    isStale: false,
+    promise: Promise.resolve(data as T),
+  } as UseQueryResult<T, Error>
+}
 
 // ============================================================================
 // Test Data Factories
@@ -195,6 +231,20 @@ const createMockLogsResponse = (
   page: 1,
 })
 
+// ============================================================================
+// Type-safe Mock Helper
+// ============================================================================
+
+type WorkflowLogsParams = {
+  appId: string
+  params?: Record<string, string | number | boolean | undefined>
+}
+
+const getMockCallParams = (): WorkflowLogsParams | undefined => {
+  const lastCall = mockedUseWorkflowLogs.mock.calls.at(-1)
+  return lastCall?.[0]
+}
+
 // ============================================================================
 // Tests
 // ============================================================================
@@ -213,45 +263,48 @@ describe('Logs Container', () => {
   // --------------------------------------------------------------------------
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
     })
 
     it('should render title and subtitle', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
       expect(screen.getByText('appLog.workflowSubtitle')).toBeInTheDocument()
     })
 
     it('should render Filter component', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
     })
   })
@@ -261,30 +314,33 @@ describe('Logs Container', () => {
   // --------------------------------------------------------------------------
   describe('Loading State', () => {
     it('should show loading spinner when data is undefined', () => {
-      mockedUseSWR.mockReturnValue({
-        data: undefined,
-        mutate: vi.fn(),
-        isValidating: true,
-        isLoading: true,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: undefined,
+          isLoading: true,
+        }),
+      )
 
-      const { container } = render(<Logs {...defaultProps} />)
+      // Act
+      const { container } = renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(container.querySelector('.spin-animation')).toBeInTheDocument()
     })
 
     it('should not show loading spinner when data is available', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([createMockWorkflowLog()], 1),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        }),
+      )
 
-      const { container } = render(<Logs {...defaultProps} />)
+      // Act
+      const { container } = renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(container.querySelector('.spin-animation')).not.toBeInTheDocument()
     })
   })
@@ -294,16 +350,17 @@ describe('Logs Container', () => {
   // --------------------------------------------------------------------------
   describe('Empty State', () => {
     it('should render empty element when total is 0', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(screen.getByText('appLog.table.empty.element.title')).toBeInTheDocument()
       expect(screen.queryByRole('table')).not.toBeInTheDocument()
     })
@@ -313,20 +370,21 @@ describe('Logs Container', () => {
   // Data Fetching Tests
   // --------------------------------------------------------------------------
   describe('Data Fetching', () => {
-    it('should call useSWR with correct URL and default params', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+    it('should call useWorkflowLogs with correct appId and default params', () => {
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
-      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string, params: Record<string, unknown> }
-      expect(keyArg).toMatchObject({
-        url: `/apps/${defaultProps.appDetail.id}/workflow-app-logs`,
+      // Assert
+      const callArg = getMockCallParams()
+      expect(callArg).toMatchObject({
+        appId: defaultProps.appDetail.id,
         params: expect.objectContaining({
           page: 1,
           detail: true,
@@ -336,34 +394,36 @@ describe('Logs Container', () => {
     })
 
     it('should include date filters for non-allTime periods', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
-      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
-      expect(keyArg?.params).toHaveProperty('created_at__after')
-      expect(keyArg?.params).toHaveProperty('created_at__before')
+      // Assert
+      const callArg = getMockCallParams()
+      expect(callArg?.params).toHaveProperty('created_at__after')
+      expect(callArg?.params).toHaveProperty('created_at__before')
     })
 
     it('should not include status param when status is all', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
-      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
-      expect(keyArg?.params).not.toHaveProperty('status')
+      // Assert
+      const callArg = getMockCallParams()
+      expect(callArg?.params).not.toHaveProperty('status')
     })
   })
 
@@ -372,24 +432,23 @@ describe('Logs Container', () => {
   // --------------------------------------------------------------------------
   describe('Filter Integration', () => {
     it('should update query when selecting status filter', async () => {
+      // Arrange
       const user = userEvent.setup()
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
-      // Click status filter
+      // Act
       await user.click(screen.getByText('All'))
       await user.click(await screen.findByText('Success'))
 
-      // Check that useSWR was called with updated params
+      // Assert
       await waitFor(() => {
-        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        const lastCall = getMockCallParams()
         expect(lastCall?.params).toMatchObject({
           status: 'succeeded',
         })
@@ -397,46 +456,46 @@ describe('Logs Container', () => {
     })
 
     it('should update query when selecting period filter', async () => {
+      // Arrange
       const user = userEvent.setup()
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
-      // Click period filter
+      // Act
       await user.click(screen.getByText('appLog.filter.period.last7days'))
       await user.click(await screen.findByText('appLog.filter.period.allTime'))
 
-      // When period is allTime (9), date filters should be removed
+      // Assert
       await waitFor(() => {
-        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        const lastCall = getMockCallParams()
         expect(lastCall?.params).not.toHaveProperty('created_at__after')
         expect(lastCall?.params).not.toHaveProperty('created_at__before')
       })
     })
 
     it('should update query when typing keyword', async () => {
+      // Arrange
       const user = userEvent.setup()
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Act
       const searchInput = screen.getByPlaceholderText('common.operation.search')
       await user.type(searchInput, 'test-keyword')
 
+      // Assert
       await waitFor(() => {
-        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        const lastCall = getMockCallParams()
         expect(lastCall?.params).toMatchObject({
           keyword: 'test-keyword',
         })
@@ -449,36 +508,35 @@ describe('Logs Container', () => {
   // --------------------------------------------------------------------------
   describe('Pagination', () => {
     it('should not render pagination when total is less than limit', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([createMockWorkflowLog()], 1),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
-      // Pagination component should not be rendered
+      // Assert
       expect(screen.queryByRole('navigation')).not.toBeInTheDocument()
     })
 
     it('should render pagination when total exceeds limit', () => {
+      // Arrange
       const logs = Array.from({ length: APP_PAGE_LIMIT }, (_, i) =>
         createMockWorkflowLog({ id: `log-${i}` }))
 
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse(logs, APP_PAGE_LIMIT + 10),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse(logs, APP_PAGE_LIMIT + 10),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
-      // Should show pagination - checking for any pagination-related element
-      // The Pagination component renders page controls
+      // Assert
       expect(screen.getByRole('table')).toBeInTheDocument()
     })
   })
@@ -488,37 +546,39 @@ describe('Logs Container', () => {
   // --------------------------------------------------------------------------
   describe('List Rendering', () => {
     it('should render List component when data is available', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([createMockWorkflowLog()], 1),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(screen.getByRole('table')).toBeInTheDocument()
     })
 
     it('should display log data in table', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([
-          createMockWorkflowLog({
-            workflow_run: createMockWorkflowRun({
-              status: 'succeeded',
-              total_tokens: 500,
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([
+            createMockWorkflowLog({
+              workflow_run: createMockWorkflowRun({
+                status: 'succeeded',
+                total_tokens: 500,
+              }),
             }),
-          }),
-        ], 1),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+          ], 1),
+        }),
+      )
 
-      render(<Logs {...defaultProps} />)
+      // Act
+      renderWithQueryClient(<Logs {...defaultProps} />)
 
+      // Assert
       expect(screen.getByText('Success')).toBeInTheDocument()
       expect(screen.getByText('500')).toBeInTheDocument()
     })
@@ -541,52 +601,54 @@ describe('Logs Container', () => {
   // --------------------------------------------------------------------------
   describe('Edge Cases', () => {
     it('should handle different app modes', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([createMockWorkflowLog()], 1),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        }),
+      )
 
       const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
 
-      render(<Logs appDetail={chatApp} />)
+      // Act
+      renderWithQueryClient(<Logs appDetail={chatApp} />)
 
-      // Should render without trigger column
+      // Assert
       expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
     })
 
-    it('should handle error state from useSWR', () => {
-      mockedUseSWR.mockReturnValue({
-        data: undefined,
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: new Error('Failed to fetch'),
-      })
+    it('should handle error state from useWorkflowLogs', () => {
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: undefined,
+          error: new Error('Failed to fetch'),
+        }),
+      )
 
-      const { container } = render(<Logs {...defaultProps} />)
+      // Act
+      const { container } = renderWithQueryClient(<Logs {...defaultProps} />)
 
-      // Should show loading state when data is undefined
+      // Assert - should show loading state when data is undefined
       expect(container.querySelector('.spin-animation')).toBeInTheDocument()
     })
 
     it('should handle app with different ID', () => {
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse([], 0),
-        mutate: vi.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
+      // Arrange
+      mockedUseWorkflowLogs.mockReturnValue(
+        createMockQueryResult<WorkflowLogsResponse>({
+          data: createMockLogsResponse([], 0),
+        }),
+      )
 
       const customApp = createMockApp({ id: 'custom-app-123' })
 
-      render(<Logs appDetail={customApp} />)
+      // Act
+      renderWithQueryClient(<Logs appDetail={customApp} />)
 
-      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string }
-      expect(keyArg?.url).toBe('/apps/custom-app-123/workflow-app-logs')
+      // Assert
+      const callArg = getMockCallParams()
+      expect(callArg?.appId).toBe('custom-app-123')
     })
   })
 })
diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx
index 1390f2d435..5aa467d03d 100644
--- a/web/app/components/app/workflow-log/index.tsx
+++ b/web/app/components/app/workflow-log/index.tsx
@@ -5,17 +5,16 @@ import { useDebounce } from 'ahooks'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
-import { omit } from 'lodash-es'
+import { omit } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import EmptyElement from '@/app/components/app/log/empty-element'
 import Loading from '@/app/components/base/loading'
 import Pagination from '@/app/components/base/pagination'
 import { APP_PAGE_LIMIT } from '@/config'
 import { useAppContext } from '@/context/app-context'
-import { fetchWorkflowLogs } from '@/service/log'
+import { useWorkflowLogs } from '@/service/use-log'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
 import List from './list'
 
@@ -55,10 +54,10 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
     ...omit(debouncedQueryParams, ['period', 'status']),
   }
 
-  const { data: workflowLogs, mutate } = useSWR({
-    url: `/apps/${appDetail.id}/workflow-app-logs`,
+  const { data: workflowLogs, refetch: mutate } = useWorkflowLogs({
+    appId: appDetail.id,
     params: query,
-  }, fetchWorkflowLogs)
+  })
   const total = workflowLogs?.total
 
   return (
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 5451126c9e..0b8dc302fb 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { AgentIteration, AgentLogDetailResponse } from '@/models/log'
-import { flatten, uniq } from 'lodash-es'
+import { flatten, uniq } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index ce73af36a2..99ba7eb544 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -3,7 +3,7 @@ import type { Area } from 'react-easy-crop'
 import type { OnImageInput } from './ImageInput'
 import type { AppIconType, ImageFile } from '@/types/app'
 import { RiImageCircleAiLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
diff --git a/web/app/components/base/badge/index.spec.tsx b/web/app/components/base/badge/index.spec.tsx
new file mode 100644
index 0000000000..74162841cf
--- /dev/null
+++ b/web/app/components/base/badge/index.spec.tsx
@@ -0,0 +1,360 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Badge, { BadgeState, BadgeVariants } from './index'
+
+describe('Badge', () => {
+  describe('Rendering', () => {
+    it('should render as a div element with badge class', () => {
+      render(<Badge>Test Badge</Badge>)
+
+      const badge = screen.getByText('Test Badge')
+      expect(badge).toHaveClass('badge')
+      expect(badge.tagName).toBe('DIV')
+    })
+
+    it.each([
+      { children: undefined, label: 'no children' },
+      { children: '', label: 'empty string' },
+    ])('should render correctly when provided $label', ({ children }) => {
+      const { container } = render(<Badge>{children}</Badge>)
+
+      expect(container.firstChild).toHaveClass('badge')
+    })
+
+    it('should render React Node children correctly', () => {
+      render(
+        <Badge data-testid="badge-with-icon">
+          <span data-testid="custom-icon">🔔</span>
+        </Badge>,
+      )
+
+      expect(screen.getByTestId('badge-with-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+  })
+
+  describe('size prop', () => {
+    it.each([
+      { size: undefined, label: 'medium (default)' },
+      { size: 's', label: 'small' },
+      { size: 'm', label: 'medium' },
+      { size: 'l', label: 'large' },
+    ] as const)('should render with $label size', ({ size }) => {
+      render(<Badge size={size}>Test</Badge>)
+
+      const expectedSize = size || 'm'
+      expect(screen.getByText('Test')).toHaveClass('badge', `badge-${expectedSize}`)
+    })
+  })
+
+  describe('state prop', () => {
+    it.each([
+      { state: BadgeState.Warning, label: 'warning', expectedClass: 'badge-warning' },
+      { state: BadgeState.Accent, label: 'accent', expectedClass: 'badge-accent' },
+    ])('should render with $label state', ({ state, expectedClass }) => {
+      render(<Badge state={state}>State Test</Badge>)
+
+      expect(screen.getByText('State Test')).toHaveClass(expectedClass)
+    })
+
+    it.each([
+      { state: undefined, label: 'default (undefined)' },
+      { state: BadgeState.Default, label: 'default (explicit)' },
+    ])('should use default styles when state is $label', ({ state }) => {
+      render(<Badge state={state}>State Test</Badge>)
+
+      const badge = screen.getByText('State Test')
+      expect(badge).not.toHaveClass('badge-warning', 'badge-accent')
+    })
+  })
+
+  describe('iconOnly prop', () => {
+    it.each([
+      { size: 's', iconOnly: false, label: 'small with text' },
+      { size: 's', iconOnly: true, label: 'small icon-only' },
+      { size: 'm', iconOnly: false, label: 'medium with text' },
+      { size: 'm', iconOnly: true, label: 'medium icon-only' },
+      { size: 'l', iconOnly: false, label: 'large with text' },
+      { size: 'l', iconOnly: true, label: 'large icon-only' },
+    ] as const)('should render correctly for $label', ({ size, iconOnly }) => {
+      const { container } = render(<Badge size={size} iconOnly={iconOnly}>🔔</Badge>)
+      const badge = screen.getByText('🔔')
+
+      // Verify badge renders with correct size
+      expect(badge).toHaveClass('badge', `badge-${size}`)
+
+      // Verify the badge is in the DOM and contains the content
+      expect(badge).toBeInTheDocument()
+      expect(container.firstChild).toBe(badge)
+    })
+
+    it('should apply icon-only padding when iconOnly is true', () => {
+      render(<Badge iconOnly>🔔</Badge>)
+
+      // When iconOnly is true, the badge should have uniform padding (all sides equal)
+      const badge = screen.getByText('🔔')
+      expect(badge).toHaveClass('p-1')
+    })
+
+    it('should apply asymmetric padding when iconOnly is false', () => {
+      render(<Badge iconOnly={false}>Badge</Badge>)
+
+      // When iconOnly is false, the badge should have different horizontal and vertical padding
+      const badge = screen.getByText('Badge')
+      expect(badge).toHaveClass('px-[5px]', 'py-[2px]')
+    })
+  })
+
+  describe('uppercase prop', () => {
+    it.each([
+      { uppercase: undefined, label: 'default (undefined)', expected: 'system-2xs-medium' },
+      { uppercase: false, label: 'explicitly false', expected: 'system-2xs-medium' },
+      { uppercase: true, label: 'true', expected: 'system-2xs-medium-uppercase' },
+    ])('should apply $expected class when uppercase is $label', ({ uppercase, expected }) => {
+      render(<Badge uppercase={uppercase}>Text</Badge>)
+
+      expect(screen.getByText('Text')).toHaveClass(expected)
+    })
+  })
+
+  describe('styleCss prop', () => {
+    it('should apply custom inline styles correctly', () => {
+      const customStyles = {
+        backgroundColor: 'rgb(0, 0, 255)',
+        color: 'rgb(255, 255, 255)',
+        padding: '10px',
+      }
+      render(<Badge styleCss={customStyles}>Styled Badge</Badge>)
+
+      expect(screen.getByText('Styled Badge')).toHaveStyle(customStyles)
+    })
+
+    it('should apply inline styles without overriding core classes', () => {
+      render(<Badge styleCss={{ backgroundColor: 'rgb(255, 0, 0)', margin: '5px' }}>Custom</Badge>)
+
+      const badge = screen.getByText('Custom')
+      expect(badge).toHaveStyle({ backgroundColor: 'rgb(255, 0, 0)', margin: '5px' })
+      expect(badge).toHaveClass('badge')
+    })
+  })
+
+  describe('className prop', () => {
+    it.each([
+      {
+        props: { className: 'custom-badge' },
+        expected: ['badge', 'custom-badge'],
+        label: 'single custom class',
+      },
+      {
+        props: { className: 'custom-class another-class', size: 'l' as const },
+        expected: ['badge', 'badge-l', 'custom-class', 'another-class'],
+        label: 'multiple classes with size variant',
+      },
+    ])('should merge $label with default classes', ({ props, expected }) => {
+      render(<Badge {...props}>Test</Badge>)
+
+      expect(screen.getByText('Test')).toHaveClass(...expected)
+    })
+  })
+
+  describe('HTML attributes passthrough', () => {
+    it.each([
+      { attr: 'data-testid', value: 'custom-badge-id', label: 'data attribute' },
+      { attr: 'id', value: 'unique-badge', label: 'id attribute' },
+      { attr: 'aria-label', value: 'Notification badge', label: 'aria-label' },
+      { attr: 'title', value: 'Hover tooltip', label: 'title attribute' },
+      { attr: 'role', value: 'status', label: 'ARIA role' },
+    ])('should pass through $label correctly', ({ attr, value }) => {
+      render(<Badge {...{ [attr]: value }}>Test</Badge>)
+
+      expect(screen.getByText('Test')).toHaveAttribute(attr, value)
+    })
+
+    it('should support multiple HTML attributes simultaneously', () => {
+      render(
+        <Badge
+          data-testid="multi-attr-badge"
+          id="badge-123"
+          aria-label="Status indicator"
+          title="Current status"
+        >
+          Test
+        </Badge>,
+      )
+
+      const badge = screen.getByTestId('multi-attr-badge')
+      expect(badge).toHaveAttribute('id', 'badge-123')
+      expect(badge).toHaveAttribute('aria-label', 'Status indicator')
+      expect(badge).toHaveAttribute('title', 'Current status')
+    })
+  })
+
+  describe('Event handlers', () => {
+    it.each([
+      { handler: 'onClick', trigger: fireEvent.click, label: 'click' },
+      { handler: 'onMouseEnter', trigger: fireEvent.mouseEnter, label: 'mouse enter' },
+      { handler: 'onMouseLeave', trigger: fireEvent.mouseLeave, label: 'mouse leave' },
+    ])('should trigger $handler when $label occurs', ({ handler, trigger }) => {
+      const mockHandler = vi.fn()
+      render(<Badge {...{ [handler]: mockHandler }}>Badge</Badge>)
+
+      trigger(screen.getByText('Badge'))
+
+      expect(mockHandler).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle user interaction flow with multiple events', () => {
+      const handlers = {
+        onClick: vi.fn(),
+        onMouseEnter: vi.fn(),
+        onMouseLeave: vi.fn(),
+      }
+      render(<Badge {...handlers}>Interactive</Badge>)
+
+      const badge = screen.getByText('Interactive')
+      fireEvent.mouseEnter(badge)
+      fireEvent.click(badge)
+      fireEvent.mouseLeave(badge)
+
+      expect(handlers.onMouseEnter).toHaveBeenCalledTimes(1)
+      expect(handlers.onClick).toHaveBeenCalledTimes(1)
+      expect(handlers.onMouseLeave).toHaveBeenCalledTimes(1)
+    })
+
+    it('should pass event object to handler with correct properties', () => {
+      const handleClick = vi.fn()
+      render(<Badge onClick={handleClick}>Event Badge</Badge>)
+
+      fireEvent.click(screen.getByText('Event Badge'))
+
+      expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'click',
+      }))
+    })
+  })
+
+  describe('Combined props', () => {
+    it('should correctly apply all props when used together', () => {
+      render(
+        <Badge
+          size="l"
+          state={BadgeState.Warning}
+          uppercase
+          className="custom-badge"
+          styleCss={{ backgroundColor: 'rgb(0, 0, 255)' }}
+          data-testid="combined-badge"
+        >
+          Full Featured
+        </Badge>,
+      )
+
+      const badge = screen.getByTestId('combined-badge')
+      expect(badge).toHaveClass('badge', 'badge-l', 'badge-warning', 'system-2xs-medium-uppercase', 'custom-badge')
+      expect(badge).toHaveStyle({ backgroundColor: 'rgb(0, 0, 255)' })
+      expect(badge).toHaveTextContent('Full Featured')
+    })
+
+    it.each([
+      {
+        props: { size: 'l' as const, state: BadgeState.Accent },
+        expected: ['badge', 'badge-l', 'badge-accent'],
+        label: 'size and state variants',
+      },
+      {
+        props: { iconOnly: true, uppercase: true },
+        expected: ['badge', 'system-2xs-medium-uppercase'],
+        label: 'iconOnly and uppercase',
+      },
+    ])('should combine $label correctly', ({ props, expected }) => {
+      render(<Badge {...props}>Test</Badge>)
+
+      expect(screen.getByText('Test')).toHaveClass(...expected)
+    })
+
+    it('should handle event handlers with combined props', () => {
+      const handleClick = vi.fn()
+      render(
+        <Badge size="s" state={BadgeState.Warning} onClick={handleClick} className="interactive">
+          Test
+        </Badge>,
+      )
+
+      const badge = screen.getByText('Test')
+      expect(badge).toHaveClass('badge', 'badge-s', 'badge-warning', 'interactive')
+
+      fireEvent.click(badge)
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Edge cases', () => {
+    it.each([
+      { children: 42, text: '42', label: 'numeric value' },
+      { children: 0, text: '0', label: 'zero' },
+    ])('should render $label correctly', ({ children, text }) => {
+      render(<Badge>{children}</Badge>)
+
+      expect(screen.getByText(text)).toBeInTheDocument()
+    })
+
+    it.each([
+      { children: null, label: 'null' },
+      { children: false, label: 'boolean false' },
+    ])('should handle $label children without errors', ({ children }) => {
+      const { container } = render(<Badge>{children}</Badge>)
+
+      expect(container.firstChild).toHaveClass('badge')
+    })
+
+    it('should render complex nested content correctly', () => {
+      render(
+        <Badge>
+          <span data-testid="icon">🔔</span>
+          <span data-testid="count">5</span>
+        </Badge>,
+      )
+
+      expect(screen.getByTestId('icon')).toBeInTheDocument()
+      expect(screen.getByTestId('count')).toBeInTheDocument()
+    })
+  })
+
+  describe('Component metadata and exports', () => {
+    it('should have correct displayName for debugging', () => {
+      expect(Badge.displayName).toBe('Badge')
+    })
+
+    describe('BadgeState enum', () => {
+      it.each([
+        { key: 'Warning', value: 'warning' },
+        { key: 'Accent', value: 'accent' },
+        { key: 'Default', value: '' },
+      ])('should export $key state with value "$value"', ({ key, value }) => {
+        expect(BadgeState[key as keyof typeof BadgeState]).toBe(value)
+      })
+    })
+
+    describe('BadgeVariants utility', () => {
+      it('should be a function', () => {
+        expect(typeof BadgeVariants).toBe('function')
+      })
+
+      it('should generate base badge class with default medium size', () => {
+        const result = BadgeVariants({})
+
+        expect(result).toContain('badge')
+        expect(result).toContain('badge-m')
+      })
+
+      it.each([
+        { size: 's' },
+        { size: 'm' },
+        { size: 'l' },
+      ] as const)('should generate correct classes for size=$size', ({ size }) => {
+        const result = BadgeVariants({ size })
+
+        expect(result).toContain('badge')
+        expect(result).toContain(`badge-${size}`)
+      })
+    })
+  })
+})
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index 1b80b21059..6ab6639a0b 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -94,7 +94,7 @@ const BlockInput: FC<IBlockInputProps> = ({
       if (!isValid) {
         Toast.notify({
           type: 'error',
-          message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+          message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }) as string,
         })
         return
       }
diff --git a/web/app/components/base/chat/__tests__/utils.spec.ts b/web/app/components/base/chat/__tests__/utils.spec.ts
index 2e86e13733..d3e77732a5 100644
--- a/web/app/components/base/chat/__tests__/utils.spec.ts
+++ b/web/app/components/base/chat/__tests__/utils.spec.ts
@@ -1,5 +1,5 @@
 import type { ChatItemInTree } from '../types'
-import { get } from 'lodash-es'
+import { get } from 'es-toolkit/compat'
 import { buildChatItemTree, getThreadMessages } from '../utils'
 import branchedTestMessages from './branchedTestMessages.json'
 import legacyTestMessages from './legacyTestMessages.json'
diff --git a/web/app/components/base/chat/chat-with-history/context.tsx b/web/app/components/base/chat/chat-with-history/context.tsx
index 120b6ed4bd..d1496f8278 100644
--- a/web/app/components/base/chat/chat-with-history/context.tsx
+++ b/web/app/components/base/chat/chat-with-history/context.tsx
@@ -14,7 +14,7 @@ import type {
   AppMeta,
   ConversationItem,
 } from '@/models/share'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { createContext, useContext } from 'use-context-selector'
 
 export type ChatWithHistoryContextValue = {
diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx
index 67c46b2d10..3acc480518 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -10,8 +10,8 @@ import type {
   ConversationItem,
 } from '@/models/share'
 import { useLocalStorageState } from 'ahooks'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import {
   useCallback,
   useEffect,
diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index 739fe644fe..64ba5f0aec 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -8,8 +8,8 @@ import type { InputForm } from './type'
 import type AudioPlayer from '@/app/components/base/audio-btn/audio'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { Annotation } from '@/models/log'
+import { noop, uniqBy } from 'es-toolkit/compat'
 import { produce, setAutoFreeze } from 'immer'
-import { noop, uniqBy } from 'lodash-es'
 import { useParams, usePathname } from 'next/navigation'
 import {
   useCallback,
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 5f5faab240..9c27b61e1f 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -13,7 +13,7 @@ import type {
 import type { InputForm } from './type'
 import type { Emoji } from '@/app/components/tools/types'
 import type { AppData } from '@/models/share'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/base/chat/embedded-chatbot/context.tsx b/web/app/components/base/chat/embedded-chatbot/context.tsx
index 2738d25c75..97d3dd53cf 100644
--- a/web/app/components/base/chat/embedded-chatbot/context.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/context.tsx
@@ -13,7 +13,7 @@ import type {
   AppMeta,
   ConversationItem,
 } from '@/models/share'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { createContext, useContext } from 'use-context-selector'
 
 export type EmbeddedChatbotContextValue = {
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index 24df08f8a8..9e9125fc45 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -3,13 +3,14 @@ import type {
   ChatItem,
   Feedback,
 } from '../types'
+import type { Locale } from '@/i18n-config'
 import type {
   // AppData,
   ConversationItem,
 } from '@/models/share'
 import { useLocalStorageState } from 'ahooks'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import {
   useCallback,
   useEffect,
@@ -93,7 +94,7 @@ export const useEmbeddedChatbot = () => {
 
       if (localeParam) {
         // If locale parameter exists in URL, use it instead of default
-        await changeLanguage(localeParam)
+        await changeLanguage(localeParam as Locale)
       }
       else if (localeFromSysVar) {
         // If locale is set as a system variable, use that
diff --git a/web/app/components/base/chip/index.spec.tsx b/web/app/components/base/chip/index.spec.tsx
new file mode 100644
index 0000000000..c19cc77b39
--- /dev/null
+++ b/web/app/components/base/chip/index.spec.tsx
@@ -0,0 +1,394 @@
+import type { Item } from './index'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import Chip from './index'
+
+afterEach(cleanup)
+
+// Test data factory
+const createTestItems = (): Item[] => [
+  { value: 'all', name: 'All Items' },
+  { value: 'active', name: 'Active' },
+  { value: 'archived', name: 'Archived' },
+]
+
+describe('Chip', () => {
+  // Shared test props
+  let items: Item[]
+  let onSelect: (item: Item) => void
+  let onClear: () => void
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    items = createTestItems()
+    onSelect = vi.fn()
+    onClear = vi.fn()
+  })
+
+  // Helper function to render Chip with default props
+  const renderChip = (props: Partial<React.ComponentProps<typeof Chip>> = {}) => {
+    return render(
+      <Chip
+        value="all"
+        items={items}
+        onSelect={onSelect}
+        onClear={onClear}
+        {...props}
+      />,
+    )
+  }
+
+  // Helper function to get the trigger element
+  const getTrigger = (container: HTMLElement) => {
+    return container.querySelector('[data-state]')
+  }
+
+  // Helper function to open dropdown panel
+  const openPanel = (container: HTMLElement) => {
+    const trigger = getTrigger(container)
+    if (trigger)
+      fireEvent.click(trigger)
+  }
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderChip()
+
+      expect(screen.getByText('All Items')).toBeInTheDocument()
+    })
+
+    it('should display current selected item name', () => {
+      renderChip({ value: 'active' })
+
+      expect(screen.getByText('Active')).toBeInTheDocument()
+    })
+
+    it('should display empty content when value does not match any item', () => {
+      const { container } = renderChip({ value: 'nonexistent' })
+
+      // When value doesn't match, no text should be displayed in trigger
+      const trigger = getTrigger(container)
+      // Check that there's no item name text (only icons should be present)
+      expect(trigger?.textContent?.trim()).toBeFalsy()
+    })
+  })
+
+  describe('Props', () => {
+    it('should update displayed item name when value prop changes', () => {
+      const { rerender } = renderChip({ value: 'all' })
+      expect(screen.getByText('All Items')).toBeInTheDocument()
+
+      rerender(
+        <Chip
+          value="archived"
+          items={items}
+          onSelect={onSelect}
+          onClear={onClear}
+        />,
+      )
+      expect(screen.getByText('Archived')).toBeInTheDocument()
+    })
+
+    it('should show left icon by default', () => {
+      const { container } = renderChip()
+
+      // The filter icon should be visible
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should hide left icon when showLeftIcon is false', () => {
+      renderChip({ showLeftIcon: false })
+
+      // When showLeftIcon is false, there should be no filter icon before the text
+      const textElement = screen.getByText('All Items')
+      const parent = textElement.closest('div[data-state]')
+      const icons = parent?.querySelectorAll('svg')
+
+      // Should only have the arrow icon, not the filter icon
+      expect(icons?.length).toBe(1)
+    })
+
+    it('should render custom left icon', () => {
+      const CustomIcon = () => <span data-testid="custom-icon">★</span>
+
+      renderChip({ leftIcon: <CustomIcon /> })
+
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+
+    it('should apply custom className to trigger', () => {
+      const customClass = 'custom-chip-class'
+
+      const { container } = renderChip({ className: customClass })
+
+      const chipElement = container.querySelector(`.${customClass}`)
+      expect(chipElement).toBeInTheDocument()
+    })
+
+    it('should apply custom panelClassName to dropdown panel', () => {
+      const customPanelClass = 'custom-panel-class'
+
+      const { container } = renderChip({ panelClassName: customPanelClass })
+      openPanel(container)
+
+      // Panel is rendered in a portal, so check document.body
+      const panel = document.body.querySelector(`.${customPanelClass}`)
+      expect(panel).toBeInTheDocument()
+    })
+  })
+
+  describe('State Management', () => {
+    it('should toggle dropdown panel on trigger click', () => {
+      const { container } = renderChip()
+
+      // Initially closed - check data-state attribute
+      const trigger = getTrigger(container)
+      expect(trigger).toHaveAttribute('data-state', 'closed')
+
+      // Open panel
+      openPanel(container)
+      expect(trigger).toHaveAttribute('data-state', 'open')
+      // Panel items should be visible
+      expect(screen.getAllByText('All Items').length).toBeGreaterThan(1)
+
+      // Close panel
+      if (trigger)
+        fireEvent.click(trigger)
+      expect(trigger).toHaveAttribute('data-state', 'closed')
+    })
+
+    it('should close panel after selecting an item', () => {
+      const { container } = renderChip()
+
+      openPanel(container)
+      const trigger = getTrigger(container)
+      expect(trigger).toHaveAttribute('data-state', 'open')
+
+      // Click on an item in the dropdown panel
+      const activeItems = screen.getAllByText('Active')
+      // The second one should be in the dropdown
+      fireEvent.click(activeItems[activeItems.length - 1])
+
+      expect(trigger).toHaveAttribute('data-state', 'closed')
+    })
+  })
+
+  describe('Event Handlers', () => {
+    it('should call onSelect with correct item when item is clicked', () => {
+      const { container } = renderChip()
+
+      openPanel(container)
+      // Get all "Active" texts and click the one in the dropdown (should be the last one)
+      const activeItems = screen.getAllByText('Active')
+      fireEvent.click(activeItems[activeItems.length - 1])
+
+      expect(onSelect).toHaveBeenCalledTimes(1)
+      expect(onSelect).toHaveBeenCalledWith(items[1])
+    })
+
+    it('should call onClear when clear button is clicked', () => {
+      const { container } = renderChip({ value: 'active' })
+
+      // Find the close icon (last SVG in the trigger) and click its parent
+      const trigger = getTrigger(container)
+      const svgs = trigger?.querySelectorAll('svg')
+      // The close icon should be the last SVG element
+      const closeIcon = svgs?.[svgs.length - 1]
+      const clearButton = closeIcon?.parentElement
+
+      expect(clearButton).toBeInTheDocument()
+      if (clearButton)
+        fireEvent.click(clearButton)
+
+      expect(onClear).toHaveBeenCalledTimes(1)
+    })
+
+    it('should stop event propagation when clear button is clicked', () => {
+      const { container } = renderChip({ value: 'active' })
+
+      const trigger = getTrigger(container)
+      expect(trigger).toHaveAttribute('data-state', 'closed')
+
+      // Find the close icon (last SVG) and click its parent
+      const svgs = trigger?.querySelectorAll('svg')
+      const closeIcon = svgs?.[svgs.length - 1]
+      const clearButton = closeIcon?.parentElement
+
+      if (clearButton)
+        fireEvent.click(clearButton)
+
+      // Panel should remain closed
+      expect(trigger).toHaveAttribute('data-state', 'closed')
+      expect(onClear).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle multiple rapid clicks on trigger', () => {
+      const { container } = renderChip()
+
+      const trigger = getTrigger(container)
+
+      // Click 1: open
+      if (trigger)
+        fireEvent.click(trigger)
+      expect(trigger).toHaveAttribute('data-state', 'open')
+
+      // Click 2: close
+      if (trigger)
+        fireEvent.click(trigger)
+      expect(trigger).toHaveAttribute('data-state', 'closed')
+
+      // Click 3: open again
+      if (trigger)
+        fireEvent.click(trigger)
+      expect(trigger).toHaveAttribute('data-state', 'open')
+    })
+  })
+
+  describe('Conditional Rendering', () => {
+    it('should show arrow down icon when no value is selected', () => {
+      const { container } = renderChip({ value: '' })
+
+      // Should have SVG icons (filter icon and arrow down icon)
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs.length).toBeGreaterThan(0)
+    })
+
+    it('should show clear button when value is selected', () => {
+      const { container } = renderChip({ value: 'active' })
+
+      // When value is selected, there should be an icon (the close icon)
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs.length).toBeGreaterThan(0)
+    })
+
+    it('should not show clear button when no value is selected', () => {
+      const { container } = renderChip({ value: '' })
+
+      const trigger = getTrigger(container)
+
+      // When value is empty, the trigger should only have 2 SVGs (filter icon + arrow)
+      // When value is selected, it would have 2 SVGs (filter icon + close icon)
+      const svgs = trigger?.querySelectorAll('svg')
+      // Arrow icon should be present, close icon should not
+      expect(svgs?.length).toBe(2)
+
+      // Verify onClear hasn't been called
+      expect(onClear).not.toHaveBeenCalled()
+    })
+
+    it('should show dropdown content only when panel is open', () => {
+      const { container } = renderChip()
+
+      const trigger = getTrigger(container)
+
+      // Closed by default
+      expect(trigger).toHaveAttribute('data-state', 'closed')
+
+      openPanel(container)
+      expect(trigger).toHaveAttribute('data-state', 'open')
+      // Items should be duplicated (once in trigger, once in panel)
+      expect(screen.getAllByText('All Items').length).toBeGreaterThan(1)
+    })
+
+    it('should show check icon on selected item in dropdown', () => {
+      const { container } = renderChip({ value: 'active' })
+
+      openPanel(container)
+
+      // Find the dropdown panel items
+      const allActiveTexts = screen.getAllByText('Active')
+      // The dropdown item should be the last one
+      const dropdownItem = allActiveTexts[allActiveTexts.length - 1]
+      const parentContainer = dropdownItem.parentElement
+
+      // The check icon should be a sibling within the parent
+      const checkIcon = parentContainer?.querySelector('svg')
+      expect(checkIcon).toBeInTheDocument()
+    })
+
+    it('should render all items in dropdown when open', () => {
+      const { container } = renderChip()
+
+      openPanel(container)
+
+      // Each item should appear at least twice (once in potential selected state, once in dropdown)
+      // Use getAllByText to handle multiple occurrences
+      expect(screen.getAllByText('All Items').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('Active').length).toBeGreaterThan(0)
+      expect(screen.getAllByText('Archived').length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty items array', () => {
+      const { container } = renderChip({ items: [], value: '' })
+
+      // Trigger should still render
+      const trigger = container.querySelector('[data-state]')
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should handle value not in items list', () => {
+      const { container } = renderChip({ value: 'nonexistent' })
+
+      const trigger = getTrigger(container)
+      expect(trigger).toBeInTheDocument()
+
+      // The trigger should not display any item name text
+      expect(trigger?.textContent?.trim()).toBeFalsy()
+    })
+
+    it('should allow selecting already selected item', () => {
+      const { container } = renderChip({ value: 'active' })
+
+      openPanel(container)
+
+      // Click on the already selected item in the dropdown
+      const activeItems = screen.getAllByText('Active')
+      fireEvent.click(activeItems[activeItems.length - 1])
+
+      expect(onSelect).toHaveBeenCalledTimes(1)
+      expect(onSelect).toHaveBeenCalledWith(items[1])
+    })
+
+    it('should handle numeric values', () => {
+      const numericItems: Item[] = [
+        { value: 1, name: 'First' },
+        { value: 2, name: 'Second' },
+        { value: 3, name: 'Third' },
+      ]
+
+      const { container } = renderChip({ value: 2, items: numericItems })
+
+      expect(screen.getByText('Second')).toBeInTheDocument()
+
+      // Open panel and select Third
+      openPanel(container)
+
+      const thirdItems = screen.getAllByText('Third')
+      fireEvent.click(thirdItems[thirdItems.length - 1])
+
+      expect(onSelect).toHaveBeenCalledWith(numericItems[2])
+    })
+
+    it('should handle items with additional properties', () => {
+      const itemsWithExtra: Item[] = [
+        { value: 'a', name: 'Item A', customProp: 'extra1' },
+        { value: 'b', name: 'Item B', customProp: 'extra2' },
+      ]
+
+      const { container } = renderChip({ value: 'a', items: itemsWithExtra })
+
+      expect(screen.getByText('Item A')).toBeInTheDocument()
+
+      // Open panel and select Item B
+      openPanel(container)
+
+      const itemBs = screen.getAllByText('Item B')
+      fireEvent.click(itemBs[itemBs.length - 1])
+
+      expect(onSelect).toHaveBeenCalledWith(itemsWithExtra[1])
+    })
+  })
+})
diff --git a/web/app/components/base/copy-feedback/index.tsx b/web/app/components/base/copy-feedback/index.tsx
index bf809a2d18..bb71d62c11 100644
--- a/web/app/components/base/copy-feedback/index.tsx
+++ b/web/app/components/base/copy-feedback/index.tsx
@@ -4,7 +4,7 @@ import {
   RiClipboardLine,
 } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/copy-icon/index.tsx b/web/app/components/base/copy-icon/index.tsx
index 935444a3c1..73a0d80b45 100644
--- a/web/app/components/base/copy-icon/index.tsx
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import copy from 'copy-to-clipboard'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/date-and-time-picker/hooks.ts b/web/app/components/base/date-and-time-picker/hooks.ts
index f79f28053f..ba66873cc0 100644
--- a/web/app/components/base/date-and-time-picker/hooks.ts
+++ b/web/app/components/base/date-and-time-picker/hooks.ts
@@ -6,7 +6,7 @@ const YEAR_RANGE = 100
 
 export const useDaysOfWeek = () => {
   const { t } = useTranslation()
-  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => t(`time.daysInWeek.${day}`))
+  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => t(`time.daysInWeek.${day}` as any) as string)
 
   return daysOfWeek
 }
@@ -26,7 +26,7 @@ export const useMonths = () => {
     'October',
     'November',
     'December',
-  ].map(month => t(`time.months.${month}`))
+  ].map(month => t(`time.months.${month}` as any) as string)
 
   return months
 }
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 53bef278f6..4fc146ab59 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/encrypted-bottom/index.tsx b/web/app/components/base/encrypted-bottom/index.tsx
index ff75d53db6..75b3b8151d 100644
--- a/web/app/components/base/encrypted-bottom/index.tsx
+++ b/web/app/components/base/encrypted-bottom/index.tsx
@@ -16,7 +16,7 @@ export const EncryptedBottom = (props: Props) => {
   return (
     <div className={cn('system-xs-regular flex items-center justify-center rounded-b-2xl border-t-[0.5px] border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary', className)}>
       <RiLock2Fill className="mx-1 h-3 w-3 text-text-quaternary" />
-      {t(frontTextKey || 'common.provider.encrypted.front')}
+      {t((frontTextKey || 'common.provider.encrypted.front') as any) as string}
       <Link
         className="mx-1 text-text-accent"
         target="_blank"
@@ -25,7 +25,7 @@ export const EncryptedBottom = (props: Props) => {
       >
         PKCS1_OAEP
       </Link>
-      {t(backTextKey || 'common.provider.encrypted.back')}
+      {t((backTextKey || 'common.provider.encrypted.back') as any) as string}
     </div>
   )
 }
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index a1b66ae0fc..361f24465f 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -3,8 +3,8 @@ import type { InputVar } from '@/app/components/workflow/types'
 import type { PromptVariable } from '@/models/debug'
 import { RiAddLine, RiAsterisk, RiCloseLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index d1e6aba6b7..7de0119e59 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -2,7 +2,7 @@ import type { ChangeEvent, FC } from 'react'
 import type { CodeBasedExtensionItem } from '@/models/common'
 import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index fc1052e172..ca407a69ce 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -97,7 +97,7 @@ const VoiceParamConfig = ({
               className="h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6"
             >
               <span className={cn('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
-                {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
+                {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}` as any) as string : localLanguagePlaceholder}
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronDownIcon
@@ -128,7 +128,7 @@ const VoiceParamConfig = ({
                         <span
                           className={cn('block', selected && 'font-normal')}
                         >
-                          {t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}
+                          {t(`common.voice.language.${(item.value).toString().replace('-', '')}` as any) as string}
                         </span>
                         {(selected || item.value === text2speech?.language) && (
                           <span
diff --git a/web/app/components/base/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index 2e09f0aa62..6678368462 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -2,8 +2,8 @@ import type { ClipboardEvent } from 'react'
 import type { FileEntity } from './types'
 import type { FileUpload } from '@/app/components/base/features/types'
 import type { FileUploadConfigResponse } from '@/models/common'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import { useParams } from 'next/navigation'
 import {
   useCallback,
@@ -174,7 +174,7 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
           handleUpdateFile({ ...uploadingFile, uploadedId: res.id, progress: 100 })
         },
         onErrorCallback: (error?: any) => {
-          const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t)
+          const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t as any)
           notify({ type: 'error', message: errorMessage })
           handleUpdateFile({ ...uploadingFile, progress: -1 })
         },
@@ -287,7 +287,7 @@ export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
             handleUpdateFile({ ...uploadingFile, uploadedId: res.id, progress: 100 })
           },
           onErrorCallback: (error?: any) => {
-            const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t)
+            const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t as any)
             notify({ type: 'error', message: errorMessage })
             handleUpdateFile({ ...uploadingFile, progress: -1 })
           },
diff --git a/web/app/components/base/file-uploader/pdf-preview.tsx b/web/app/components/base/file-uploader/pdf-preview.tsx
index 04a90a414c..b4f057e91e 100644
--- a/web/app/components/base/file-uploader/pdf-preview.tsx
+++ b/web/app/components/base/file-uploader/pdf-preview.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { RiCloseLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
+import { noop } from 'es-toolkit/compat'
 import { t } from 'i18next'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useState } from 'react'
 import { createPortal } from 'react-dom'
diff --git a/web/app/components/base/file-uploader/store.tsx b/web/app/components/base/file-uploader/store.tsx
index db3e3622f9..2172733f20 100644
--- a/web/app/components/base/file-uploader/store.tsx
+++ b/web/app/components/base/file-uploader/store.tsx
@@ -1,7 +1,7 @@
 import type {
   FileEntity,
 } from './types'
-import { isEqual } from 'lodash-es'
+import { isEqual } from 'es-toolkit/compat'
 import {
   createContext,
   useContext,
diff --git a/web/app/components/base/form/components/field/input-type-select/hooks.tsx b/web/app/components/base/form/components/field/input-type-select/hooks.tsx
index 67621fef67..eb7da8d9d0 100644
--- a/web/app/components/base/form/components/field/input-type-select/hooks.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/hooks.tsx
@@ -44,7 +44,7 @@ export const useInputTypeOptions = (supportFile: boolean) => {
   return options.map((value) => {
     return {
       value,
-      label: t(`appDebug.variableConfig.${i18nFileTypeMap[value] || value}`),
+      label: t(`appDebug.variableConfig.${i18nFileTypeMap[value] || value}` as any),
       Icon: INPUT_TYPE_ICON[value],
       type: DATA_TYPE[value],
     }
diff --git a/web/app/components/base/fullscreen-modal/index.tsx b/web/app/components/base/fullscreen-modal/index.tsx
index b822d21921..cad91b2452 100644
--- a/web/app/components/base/fullscreen-modal/index.tsx
+++ b/web/app/components/base/fullscreen-modal/index.tsx
@@ -1,6 +1,6 @@
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
 import { RiCloseLargeLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { cn } from '@/utils/classnames'
 
 type IModal = {
diff --git a/web/app/components/base/icons/script.mjs b/web/app/components/base/icons/script.mjs
index 1cee66d1db..81566cc4cf 100644
--- a/web/app/components/base/icons/script.mjs
+++ b/web/app/components/base/icons/script.mjs
@@ -2,7 +2,7 @@ import { access, appendFile, mkdir, open, readdir, rm, writeFile } from 'node:fs
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { parseXml } from '@rgrove/parse-xml'
-import { camelCase, template } from 'lodash-es'
+import { camelCase, template } from 'es-toolkit/compat'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
diff --git a/web/app/components/base/image-uploader/hooks.ts b/web/app/components/base/image-uploader/hooks.ts
index 065a808d33..f098c378eb 100644
--- a/web/app/components/base/image-uploader/hooks.ts
+++ b/web/app/components/base/image-uploader/hooks.ts
@@ -82,7 +82,7 @@ export const useImageFiles = () => {
           setFiles(newFiles)
         },
         onErrorCallback: (error?: any) => {
-          const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t)
+          const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t as any)
           notify({ type: 'error', message: errorMessage })
           const newFiles = [...files.slice(0, index), { ...currentImageFile, progress: -1 }, ...files.slice(index + 1)]
           filesRef.current = newFiles
@@ -160,7 +160,7 @@ export const useLocalFileUploader = ({ limit, disabled = false, onUpload }: useL
             onUpload({ ...imageFile, fileId: res.id, progress: 100 })
           },
           onErrorCallback: (error?: any) => {
-            const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t)
+            const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t as any)
             notify({ type: 'error', message: errorMessage })
             onUpload({ ...imageFile, progress: -1 })
           },
diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
index bfabe5e247..519bed4d25 100644
--- a/web/app/components/base/image-uploader/image-preview.tsx
+++ b/web/app/components/base/image-uploader/image-preview.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { RiAddBoxLine, RiCloseLine, RiDownloadCloud2Line, RiFileCopyLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react'
+import { noop } from 'es-toolkit/compat'
 import { t } from 'i18next'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
diff --git a/web/app/components/base/input-with-copy/index.spec.tsx b/web/app/components/base/input-with-copy/index.spec.tsx
index 782b2bab25..a5fde4ea44 100644
--- a/web/app/components/base/input-with-copy/index.spec.tsx
+++ b/web/app/components/base/input-with-copy/index.spec.tsx
@@ -25,8 +25,8 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
-// Mock lodash-es debounce
-vi.mock('lodash-es', () => ({
+// Mock es-toolkit/compat debounce
+vi.mock('es-toolkit/compat', () => ({
   debounce: (fn: any) => fn,
 }))
 
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 151fa435e7..41bb8f3dec 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -2,7 +2,7 @@
 import type { InputProps } from '../input'
 import { RiClipboardFill, RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index 6c6a0c6a75..db7d1f0990 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -2,7 +2,7 @@ import type { VariantProps } from 'class-variance-authority'
 import type { ChangeEventHandler, CSSProperties, FocusEventHandler } from 'react'
 import { RiCloseCircleFill, RiErrorWarningLine, RiSearchLine } from '@remixicon/react'
 import { cva } from 'class-variance-authority'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index e698f3bebe..c487b20550 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactMarkdownWrapperProps, SimplePluginInfo } from './react-markdown-wrapper'
-import { flow } from 'lodash-es'
+import { flow } from 'es-toolkit/compat'
 import dynamic from 'next/dynamic'
 import { cn } from '@/utils/classnames'
 import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
diff --git a/web/app/components/base/markdown/markdown-utils.ts b/web/app/components/base/markdown/markdown-utils.ts
index 59326a7a19..94ad31d1de 100644
--- a/web/app/components/base/markdown/markdown-utils.ts
+++ b/web/app/components/base/markdown/markdown-utils.ts
@@ -3,7 +3,7 @@
  * These functions were extracted from the main markdown renderer for better separation of concerns.
  * Includes preprocessing for LaTeX and custom "think" tags.
  */
-import { flow } from 'lodash-es'
+import { flow } from 'es-toolkit/compat'
 import { ALLOW_UNSAFE_DATA_SCHEME } from '@/config'
 
 export const preprocessLaTeX = (content: string) => {
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 1b0ff22873..7270af1c77 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -1,6 +1,6 @@
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { Fragment } from 'react'
 import { cn } from '@/utils/classnames'
 // https://headlessui.com/react/dialog
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index 69bca1ccbb..6fa44d42d0 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@@ -1,6 +1,6 @@
 import type { ButtonProps } from '@/app/components/base/button'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/base/pagination/pagination.tsx b/web/app/components/base/pagination/pagination.tsx
index 25bdf5a31b..dafe0e4ab9 100644
--- a/web/app/components/base/pagination/pagination.tsx
+++ b/web/app/components/base/pagination/pagination.tsx
@@ -4,7 +4,7 @@ import type {
   IPaginationProps,
   PageButtonProps,
 } from './type'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
 import usePagination from './hook'
diff --git a/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
index 2d2a0b6263..c4a246c40d 100644
--- a/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/context-block-replacement-block.tsx
@@ -1,8 +1,8 @@
 import type { ContextBlockType } from '../../types'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister } from '@lexical/utils'
+import { noop } from 'es-toolkit/compat'
 import { $applyNodeReplacement } from 'lexical'
-import { noop } from 'lodash-es'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/base/prompt-editor/plugins/context-block/index.tsx b/web/app/components/base/prompt-editor/plugins/context-block/index.tsx
index 9f2102bc62..ce3ed4c210 100644
--- a/web/app/components/base/prompt-editor/plugins/context-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/context-block/index.tsx
@@ -1,12 +1,12 @@
 import type { ContextBlockType } from '../../types'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister } from '@lexical/utils'
+import { noop } from 'es-toolkit/compat'
 import {
   $insertNodes,
   COMMAND_PRIORITY_EDITOR,
   createCommand,
 } from 'lexical'
-import { noop } from 'lodash-es'
 import {
   memo,
   useEffect,
diff --git a/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx b/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
index ba695ec95d..f62fb6886b 100644
--- a/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
+++ b/web/app/components/base/prompt-editor/plugins/history-block/history-block-replacement-block.tsx
@@ -1,8 +1,8 @@
 import type { HistoryBlockType } from '../../types'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister } from '@lexical/utils'
+import { noop } from 'es-toolkit/compat'
 import { $applyNodeReplacement } from 'lexical'
-import { noop } from 'lodash-es'
 import {
   useCallback,
   useEffect,
diff --git a/web/app/components/base/prompt-editor/plugins/history-block/index.tsx b/web/app/components/base/prompt-editor/plugins/history-block/index.tsx
index a853de5162..dc75fc230d 100644
--- a/web/app/components/base/prompt-editor/plugins/history-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/history-block/index.tsx
@@ -1,12 +1,12 @@
 import type { HistoryBlockType } from '../../types'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister } from '@lexical/utils'
+import { noop } from 'es-toolkit/compat'
 import {
   $insertNodes,
   COMMAND_PRIORITY_EDITOR,
   createCommand,
 } from 'lexical'
-import { noop } from 'lodash-es'
 import {
   memo,
   useEffect,
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index ae8bb00099..678d5b6dee 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 3241543565..6fe0016a1b 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -127,7 +127,7 @@ const TagInput: FC<TagInputProps> = ({
                 setValue(e.target.value)
               }}
               onKeyDown={handleKeyDown}
-              placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
+              placeholder={t((placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord')) as any)}
             />
           </div>
         )
diff --git a/web/app/components/base/tag-management/panel.tsx b/web/app/components/base/tag-management/panel.tsx
index 854de012a5..0023a003c5 100644
--- a/web/app/components/base/tag-management/panel.tsx
+++ b/web/app/components/base/tag-management/panel.tsx
@@ -3,7 +3,7 @@ import type { HtmlContentProps } from '@/app/components/base/popover'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { RiAddLine, RiPriceTag3Line } from '@remixicon/react'
 import { useUnmount } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index 8e796f8e0f..8061cde5c1 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -2,7 +2,7 @@
 
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/base/toast/index.spec.tsx b/web/app/components/base/toast/index.spec.tsx
index d32619f59a..59314063dd 100644
--- a/web/app/components/base/toast/index.spec.tsx
+++ b/web/app/components/base/toast/index.spec.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { act, render, screen, waitFor } from '@testing-library/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import Toast, { ToastProvider, useToastContext } from '.'
 
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index a016778996..cf9e1cd909 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -7,7 +7,7 @@ import {
   RiErrorWarningFill,
   RiInformation2Fill,
 } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
diff --git a/web/app/components/base/with-input-validation/index.spec.tsx b/web/app/components/base/with-input-validation/index.spec.tsx
index c1a9d55f0a..b2e67ce056 100644
--- a/web/app/components/base/with-input-validation/index.spec.tsx
+++ b/web/app/components/base/with-input-validation/index.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { z } from 'zod'
 import withValidation from '.'
 
diff --git a/web/app/components/billing/apps-full-in-dialog/index.spec.tsx b/web/app/components/billing/apps-full-in-dialog/index.spec.tsx
new file mode 100644
index 0000000000..a11b582b0f
--- /dev/null
+++ b/web/app/components/billing/apps-full-in-dialog/index.spec.tsx
@@ -0,0 +1,274 @@
+import type { Mock } from 'vitest'
+import type { UsagePlanInfo } from '@/app/components/billing/type'
+import type { AppContextValue } from '@/context/app-context'
+import type { ProviderContextState } from '@/context/provider-context'
+import type { ICurrentWorkspace, LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
+import { render, screen } from '@testing-library/react'
+import { Plan } from '@/app/components/billing/type'
+import { mailToSupport } from '@/app/components/header/utils/util'
+import { useAppContext } from '@/context/app-context'
+import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
+import AppsFull from './index'
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+vi.mock('@/context/provider-context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/context/provider-context')>()
+  return {
+    ...actual,
+    useProviderContext: vi.fn(),
+  }
+})
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: vi.fn(),
+  }),
+}))
+
+vi.mock('@/app/components/header/utils/util', () => ({
+  mailToSupport: vi.fn(),
+}))
+
+const buildUsage = (overrides: Partial<UsagePlanInfo> = {}): UsagePlanInfo => ({
+  buildApps: 0,
+  teamMembers: 0,
+  annotatedResponse: 0,
+  documentsUploadQuota: 0,
+  apiRateLimit: 0,
+  triggerEvents: 0,
+  vectorSpace: 0,
+  ...overrides,
+})
+
+const buildProviderContext = (overrides: Partial<ProviderContextState> = {}): ProviderContextState => ({
+  ...baseProviderContextValue,
+  plan: {
+    ...baseProviderContextValue.plan,
+    type: Plan.sandbox,
+    usage: buildUsage({ buildApps: 2 }),
+    total: buildUsage({ buildApps: 10 }),
+    reset: {
+      apiRateLimit: null,
+      triggerEvents: null,
+    },
+  },
+  ...overrides,
+})
+
+const buildAppContext = (overrides: Partial<AppContextValue> = {}): AppContextValue => {
+  const userProfile: UserProfileResponse = {
+    id: 'user-id',
+    name: 'Test User',
+    email: 'user@example.com',
+    avatar: '',
+    avatar_url: '',
+    is_password_set: false,
+  }
+  const currentWorkspace: ICurrentWorkspace = {
+    id: 'workspace-id',
+    name: 'Workspace',
+    plan: '',
+    status: '',
+    created_at: 0,
+    role: 'normal',
+    providers: [],
+  }
+  const langGeniusVersionInfo: LangGeniusVersionResponse = {
+    current_env: '',
+    current_version: '1.0.0',
+    latest_version: '',
+    release_date: '',
+    release_notes: '',
+    version: '',
+    can_auto_update: false,
+  }
+  const base: Omit<AppContextValue, 'useSelector'> = {
+    userProfile,
+    currentWorkspace,
+    isCurrentWorkspaceManager: false,
+    isCurrentWorkspaceOwner: false,
+    isCurrentWorkspaceEditor: false,
+    isCurrentWorkspaceDatasetOperator: false,
+    mutateUserProfile: vi.fn(),
+    mutateCurrentWorkspace: vi.fn(),
+    langGeniusVersionInfo,
+    isLoadingCurrentWorkspace: false,
+  }
+  const useSelector: AppContextValue['useSelector'] = selector => selector({ ...base, useSelector })
+  return {
+    ...base,
+    useSelector,
+    ...overrides,
+  }
+}
+
+describe('AppsFull', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(useProviderContext as Mock).mockReturnValue(buildProviderContext())
+    ;(useAppContext as Mock).mockReturnValue(buildAppContext())
+    ;(mailToSupport as Mock).mockReturnValue('mailto:support@example.com')
+  })
+
+  // Rendering behavior for non-team plans.
+  describe('Rendering', () => {
+    it('should render the sandbox messaging and upgrade button', () => {
+      // Act
+      render(<AppsFull loc="billing_dialog" />)
+
+      // Assert
+      expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
+      expect(screen.getByText('billing.apps.fullTip1des')).toBeInTheDocument()
+      expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
+      expect(screen.getByText('2/10')).toBeInTheDocument()
+    })
+  })
+
+  // Prop-driven behavior for team plans and contact CTA.
+  describe('Props', () => {
+    it('should render team messaging and contact button for non-sandbox plans', () => {
+      // Arrange
+      ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
+        plan: {
+          ...baseProviderContextValue.plan,
+          type: Plan.team,
+          usage: buildUsage({ buildApps: 8 }),
+          total: buildUsage({ buildApps: 10 }),
+          reset: {
+            apiRateLimit: null,
+            triggerEvents: null,
+          },
+        },
+      }))
+      render(<AppsFull loc="billing_dialog" />)
+
+      // Assert
+      expect(screen.getByText('billing.apps.fullTip2')).toBeInTheDocument()
+      expect(screen.getByText('billing.apps.fullTip2des')).toBeInTheDocument()
+      expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
+      expect(screen.getByRole('link', { name: 'billing.apps.contactUs' })).toHaveAttribute('href', 'mailto:support@example.com')
+      expect(mailToSupport).toHaveBeenCalledWith('user@example.com', Plan.team, '1.0.0')
+    })
+
+    it('should render upgrade button for professional plans', () => {
+      // Arrange
+      ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
+        plan: {
+          ...baseProviderContextValue.plan,
+          type: Plan.professional,
+          usage: buildUsage({ buildApps: 4 }),
+          total: buildUsage({ buildApps: 10 }),
+          reset: {
+            apiRateLimit: null,
+            triggerEvents: null,
+          },
+        },
+      }))
+
+      // Act
+      render(<AppsFull loc="billing_dialog" />)
+
+      // Assert
+      expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
+      expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
+      expect(screen.queryByText('billing.apps.contactUs')).not.toBeInTheDocument()
+    })
+
+    it('should render contact button for enterprise plans', () => {
+      // Arrange
+      ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
+        plan: {
+          ...baseProviderContextValue.plan,
+          type: Plan.enterprise,
+          usage: buildUsage({ buildApps: 9 }),
+          total: buildUsage({ buildApps: 10 }),
+          reset: {
+            apiRateLimit: null,
+            triggerEvents: null,
+          },
+        },
+      }))
+
+      // Act
+      render(<AppsFull loc="billing_dialog" />)
+
+      // Assert
+      expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
+      expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
+      expect(screen.getByRole('link', { name: 'billing.apps.contactUs' })).toHaveAttribute('href', 'mailto:support@example.com')
+      expect(mailToSupport).toHaveBeenCalledWith('user@example.com', Plan.enterprise, '1.0.0')
+    })
+  })
+
+  // Edge cases for progress color thresholds.
+  describe('Edge Cases', () => {
+    it('should use the success color when usage is below 50%', () => {
+      // Arrange
+      ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
+        plan: {
+          ...baseProviderContextValue.plan,
+          type: Plan.sandbox,
+          usage: buildUsage({ buildApps: 2 }),
+          total: buildUsage({ buildApps: 5 }),
+          reset: {
+            apiRateLimit: null,
+            triggerEvents: null,
+          },
+        },
+      }))
+
+      // Act
+      render(<AppsFull loc="billing_dialog" />)
+
+      // Assert
+      expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-bar-progress-solid')
+    })
+
+    it('should use the warning color when usage is between 50% and 80%', () => {
+      // Arrange
+      ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
+        plan: {
+          ...baseProviderContextValue.plan,
+          type: Plan.sandbox,
+          usage: buildUsage({ buildApps: 6 }),
+          total: buildUsage({ buildApps: 10 }),
+          reset: {
+            apiRateLimit: null,
+            triggerEvents: null,
+          },
+        },
+      }))
+
+      // Act
+      render(<AppsFull loc="billing_dialog" />)
+
+      // Assert
+      expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-warning-progress')
+    })
+
+    it('should use the error color when usage is 80% or higher', () => {
+      // Arrange
+      ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
+        plan: {
+          ...baseProviderContextValue.plan,
+          type: Plan.sandbox,
+          usage: buildUsage({ buildApps: 8 }),
+          total: buildUsage({ buildApps: 10 }),
+          reset: {
+            apiRateLimit: null,
+            triggerEvents: null,
+          },
+        },
+      }))
+
+      // Act
+      render(<AppsFull loc="billing_dialog" />)
+
+      // Assert
+      expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-error-progress')
+    })
+  })
+})
diff --git a/web/app/components/billing/billing-page/index.spec.tsx b/web/app/components/billing/billing-page/index.spec.tsx
new file mode 100644
index 0000000000..2310baa4f4
--- /dev/null
+++ b/web/app/components/billing/billing-page/index.spec.tsx
@@ -0,0 +1,84 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Billing from './index'
+
+let currentBillingUrl: string | null = 'https://billing'
+let fetching = false
+let isManager = true
+let enableBilling = true
+
+const refetchMock = vi.fn()
+const openAsyncWindowMock = vi.fn()
+
+vi.mock('@/service/use-billing', () => ({
+  useBillingUrl: () => ({
+    data: currentBillingUrl,
+    isFetching: fetching,
+    refetch: refetchMock,
+  }),
+}))
+
+vi.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => openAsyncWindowMock,
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceManager: isManager,
+  }),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    enableBilling,
+  }),
+}))
+
+vi.mock('../plan', () => ({
+  __esModule: true,
+  default: ({ loc }: { loc: string }) => <div data-testid="plan-component" data-loc={loc} />,
+}))
+
+describe('Billing', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    currentBillingUrl = 'https://billing'
+    fetching = false
+    isManager = true
+    enableBilling = true
+    refetchMock.mockResolvedValue({ data: 'https://billing' })
+  })
+
+  it('hides the billing action when user is not manager or billing is disabled', () => {
+    isManager = false
+    render(<Billing />)
+    expect(screen.queryByRole('button', { name: /billing\.viewBillingTitle/ })).not.toBeInTheDocument()
+
+    vi.clearAllMocks()
+    isManager = true
+    enableBilling = false
+    render(<Billing />)
+    expect(screen.queryByRole('button', { name: /billing\.viewBillingTitle/ })).not.toBeInTheDocument()
+  })
+
+  it('opens the billing window with the immediate url when the button is clicked', async () => {
+    render(<Billing />)
+
+    const actionButton = screen.getByRole('button', { name: /billing\.viewBillingTitle/ })
+    fireEvent.click(actionButton)
+
+    await waitFor(() => expect(openAsyncWindowMock).toHaveBeenCalled())
+    const [, options] = openAsyncWindowMock.mock.calls[0]
+    expect(options).toMatchObject({
+      immediateUrl: currentBillingUrl,
+      features: 'noopener,noreferrer',
+    })
+  })
+
+  it('disables the button while billing url is fetching', () => {
+    fetching = true
+    render(<Billing />)
+
+    const actionButton = screen.getByRole('button', { name: /billing\.viewBillingTitle/ })
+    expect(actionButton).toBeDisabled()
+  })
+})
diff --git a/web/app/components/billing/header-billing-btn/index.spec.tsx b/web/app/components/billing/header-billing-btn/index.spec.tsx
new file mode 100644
index 0000000000..b87b733353
--- /dev/null
+++ b/web/app/components/billing/header-billing-btn/index.spec.tsx
@@ -0,0 +1,92 @@
+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', () => ({
+  __esModule: true,
+  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 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')
+
+    expect(badge).toHaveClass('cursor-pointer')
+
+    fireEvent.click(badge!)
+    expect(onClick).toHaveBeenCalledTimes(1)
+
+    rerender(<HeaderBillingBtn onClick={onClick} isDisplayOnly />)
+    expect(screen.getByText('pro').closest('div')).toHaveClass('cursor-default')
+
+    fireEvent.click(screen.getByText('pro').closest('div')!)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/billing/partner-stack/index.spec.tsx b/web/app/components/billing/partner-stack/index.spec.tsx
new file mode 100644
index 0000000000..7b4658cf0f
--- /dev/null
+++ b/web/app/components/billing/partner-stack/index.spec.tsx
@@ -0,0 +1,44 @@
+import { render } from '@testing-library/react'
+import PartnerStack from './index'
+
+let isCloudEdition = true
+
+const saveOrUpdate = vi.fn()
+const bind = vi.fn()
+
+vi.mock('@/config', () => ({
+  get IS_CLOUD_EDITION() {
+    return isCloudEdition
+  },
+}))
+
+vi.mock('./use-ps-info', () => ({
+  __esModule: true,
+  default: () => ({
+    saveOrUpdate,
+    bind,
+  }),
+}))
+
+describe('PartnerStack', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    isCloudEdition = true
+  })
+
+  it('does not call partner stack helpers when not in cloud edition', () => {
+    isCloudEdition = false
+
+    render(<PartnerStack />)
+
+    expect(saveOrUpdate).not.toHaveBeenCalled()
+    expect(bind).not.toHaveBeenCalled()
+  })
+
+  it('calls saveOrUpdate and bind once when running in cloud edition', () => {
+    render(<PartnerStack />)
+
+    expect(saveOrUpdate).toHaveBeenCalledTimes(1)
+    expect(bind).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/billing/partner-stack/use-ps-info.spec.tsx b/web/app/components/billing/partner-stack/use-ps-info.spec.tsx
new file mode 100644
index 0000000000..14215f2514
--- /dev/null
+++ b/web/app/components/billing/partner-stack/use-ps-info.spec.tsx
@@ -0,0 +1,197 @@
+import { act, renderHook } from '@testing-library/react'
+import { PARTNER_STACK_CONFIG } from '@/config'
+import usePSInfo from './use-ps-info'
+
+let searchParamsValues: Record<string, string | null> = {}
+const setSearchParams = (values: Record<string, string | null>) => {
+  searchParamsValues = values
+}
+
+type PartnerStackGlobal = typeof globalThis & {
+  __partnerStackCookieMocks?: {
+    get: ReturnType<typeof vi.fn>
+    set: ReturnType<typeof vi.fn>
+    remove: ReturnType<typeof vi.fn>
+  }
+  __partnerStackMutateAsync?: ReturnType<typeof vi.fn>
+}
+
+function getPartnerStackGlobal(): PartnerStackGlobal {
+  return globalThis as PartnerStackGlobal
+}
+
+const ensureCookieMocks = () => {
+  const globals = getPartnerStackGlobal()
+  if (!globals.__partnerStackCookieMocks)
+    throw new Error('Cookie mocks not initialized')
+  return globals.__partnerStackCookieMocks
+}
+
+const ensureMutateAsync = () => {
+  const globals = getPartnerStackGlobal()
+  if (!globals.__partnerStackMutateAsync)
+    throw new Error('Mutate mock not initialized')
+  return globals.__partnerStackMutateAsync
+}
+
+vi.mock('js-cookie', () => {
+  const get = vi.fn()
+  const set = vi.fn()
+  const remove = vi.fn()
+  const globals = getPartnerStackGlobal()
+  globals.__partnerStackCookieMocks = { get, set, remove }
+  const cookieApi = { get, set, remove }
+  return {
+    __esModule: true,
+    default: cookieApi,
+    get,
+    set,
+    remove,
+  }
+})
+vi.mock('next/navigation', () => ({
+  useSearchParams: () => ({
+    get: (key: string) => searchParamsValues[key] ?? null,
+  }),
+}))
+vi.mock('@/service/use-billing', () => {
+  const mutateAsync = vi.fn()
+  const globals = getPartnerStackGlobal()
+  globals.__partnerStackMutateAsync = mutateAsync
+  return {
+    useBindPartnerStackInfo: () => ({
+      mutateAsync,
+    }),
+  }
+})
+
+describe('usePSInfo', () => {
+  const originalLocationDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'location')
+
+  beforeAll(() => {
+    Object.defineProperty(globalThis, 'location', {
+      value: { hostname: 'cloud.dify.ai' },
+      configurable: true,
+    })
+  })
+
+  beforeEach(() => {
+    setSearchParams({})
+    const { get, set, remove } = ensureCookieMocks()
+    get.mockReset()
+    set.mockReset()
+    remove.mockReset()
+    const mutate = ensureMutateAsync()
+    mutate.mockReset()
+    mutate.mockResolvedValue(undefined)
+    get.mockReturnValue('{}')
+  })
+
+  afterAll(() => {
+    if (originalLocationDescriptor)
+      Object.defineProperty(globalThis, 'location', originalLocationDescriptor)
+  })
+
+  it('saves partner info when query params change', () => {
+    const { get, set } = ensureCookieMocks()
+    get.mockReturnValue(JSON.stringify({ partnerKey: 'old', clickId: 'old-click' }))
+    setSearchParams({
+      ps_partner_key: 'new-partner',
+      ps_xid: 'new-click',
+    })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    expect(result.current.psPartnerKey).toBe('new-partner')
+    expect(result.current.psClickId).toBe('new-click')
+
+    act(() => {
+      result.current.saveOrUpdate()
+    })
+
+    expect(set).toHaveBeenCalledWith(
+      PARTNER_STACK_CONFIG.cookieName,
+      JSON.stringify({
+        partnerKey: 'new-partner',
+        clickId: 'new-click',
+      }),
+      {
+        expires: PARTNER_STACK_CONFIG.saveCookieDays,
+        path: '/',
+        domain: '.dify.ai',
+      },
+    )
+  })
+
+  it('does not overwrite cookie when params do not change', () => {
+    setSearchParams({
+      ps_partner_key: 'existing',
+      ps_xid: 'existing-click',
+    })
+    const { get } = ensureCookieMocks()
+    get.mockReturnValue(JSON.stringify({
+      partnerKey: 'existing',
+      clickId: 'existing-click',
+    }))
+
+    const { result } = renderHook(() => usePSInfo())
+
+    act(() => {
+      result.current.saveOrUpdate()
+    })
+
+    const { set } = ensureCookieMocks()
+    expect(set).not.toHaveBeenCalled()
+  })
+
+  it('binds partner info and clears cookie once', async () => {
+    setSearchParams({
+      ps_partner_key: 'bind-partner',
+      ps_xid: 'bind-click',
+    })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    const mutate = ensureMutateAsync()
+    const { remove } = ensureCookieMocks()
+    await act(async () => {
+      await result.current.bind()
+    })
+
+    expect(mutate).toHaveBeenCalledWith({
+      partnerKey: 'bind-partner',
+      clickId: 'bind-click',
+    })
+    expect(remove).toHaveBeenCalledWith(PARTNER_STACK_CONFIG.cookieName, {
+      path: '/',
+      domain: '.dify.ai',
+    })
+
+    await act(async () => {
+      await result.current.bind()
+    })
+
+    expect(mutate).toHaveBeenCalledTimes(1)
+  })
+
+  it('still removes cookie when bind fails with status 400', async () => {
+    const mutate = ensureMutateAsync()
+    mutate.mockRejectedValueOnce({ status: 400 })
+    setSearchParams({
+      ps_partner_key: 'bind-partner',
+      ps_xid: 'bind-click',
+    })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    await act(async () => {
+      await result.current.bind()
+    })
+
+    const { remove } = ensureCookieMocks()
+    expect(remove).toHaveBeenCalledWith(PARTNER_STACK_CONFIG.cookieName, {
+      path: '/',
+      domain: '.dify.ai',
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/index.spec.tsx b/web/app/components/billing/plan/index.spec.tsx
new file mode 100644
index 0000000000..bcdb83b5df
--- /dev/null
+++ b/web/app/components/billing/plan/index.spec.tsx
@@ -0,0 +1,130 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
+import { Plan } from '../type'
+import PlanComp from './index'
+
+let currentPath = '/billing'
+
+const push = vi.fn()
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push }),
+  usePathname: () => currentPath,
+}))
+
+const setShowAccountSettingModalMock = vi.fn()
+vi.mock('@/context/modal-context', () => ({
+  // eslint-disable-next-line ts/no-explicit-any
+  useModalContextSelector: (selector: any) => selector({
+    setShowAccountSettingModal: setShowAccountSettingModalMock,
+  }),
+}))
+
+const providerContextMock = vi.fn()
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => providerContextMock(),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: { email: 'user@example.com' },
+    isCurrentWorkspaceManager: true,
+  }),
+}))
+
+const mutateAsyncMock = vi.fn()
+let isPending = false
+vi.mock('@/service/use-education', () => ({
+  useEducationVerify: () => ({
+    mutateAsync: mutateAsyncMock,
+    isPending,
+  }),
+}))
+
+const verifyStateModalMock = vi.fn(props => (
+  <div data-testid="verify-modal" data-is-show={props.isShow ? 'true' : 'false'}>
+    {props.isShow ? 'visible' : 'hidden'}
+  </div>
+))
+vi.mock('@/app/education-apply/verify-state-modal', () => ({
+  __esModule: true,
+  // eslint-disable-next-line ts/no-explicit-any
+  default: (props: any) => verifyStateModalMock(props),
+}))
+
+vi.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: () => <button data-testid="plan-upgrade-btn" type="button">Upgrade</button>,
+}))
+
+describe('PlanComp', () => {
+  const planMock = {
+    type: Plan.professional,
+    usage: {
+      teamMembers: 4,
+      documentsUploadQuota: 3,
+      vectorSpace: 8,
+      annotatedResponse: 5,
+      triggerEvents: 60,
+      apiRateLimit: 100,
+    },
+    total: {
+      teamMembers: 10,
+      documentsUploadQuota: 20,
+      vectorSpace: 10,
+      annotatedResponse: 500,
+      triggerEvents: 100,
+      apiRateLimit: 200,
+    },
+    reset: {
+      triggerEvents: 2,
+      apiRateLimit: 1,
+    },
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    currentPath = '/billing'
+    isPending = false
+    providerContextMock.mockReturnValue({
+      plan: planMock,
+      enableEducationPlan: true,
+      allowRefreshEducationVerify: false,
+      isEducationAccount: false,
+    })
+    mutateAsyncMock.mockReset()
+    mutateAsyncMock.mockResolvedValue({ token: 'token' })
+  })
+
+  it('renders plan info and handles education verify success', async () => {
+    render(<PlanComp loc="billing-page" />)
+
+    expect(screen.getByText('billing.plans.professional.name')).toBeInTheDocument()
+    expect(screen.getByTestId('plan-upgrade-btn')).toBeInTheDocument()
+
+    const verifyBtn = screen.getByText('education.toVerified')
+    fireEvent.click(verifyBtn)
+
+    await waitFor(() => expect(mutateAsyncMock).toHaveBeenCalled())
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/education-apply?token=token'))
+    expect(localStorage.removeItem).toHaveBeenCalledWith(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
+  })
+
+  it('shows modal when education verify fails', async () => {
+    mutateAsyncMock.mockRejectedValueOnce(new Error('boom'))
+    render(<PlanComp loc="billing-page" />)
+
+    const verifyBtn = screen.getByText('education.toVerified')
+    fireEvent.click(verifyBtn)
+
+    await waitFor(() => expect(mutateAsyncMock).toHaveBeenCalled())
+    await waitFor(() => expect(screen.getByTestId('verify-modal').getAttribute('data-is-show')).toBe('true'))
+  })
+
+  it('resets modal context when on education apply path', () => {
+    currentPath = '/education-apply/setup'
+    render(<PlanComp loc="billing-page" />)
+
+    expect(setShowAccountSettingModalMock).toHaveBeenCalledWith(null)
+  })
+})
diff --git a/web/app/components/billing/pricing/assets/index.spec.tsx b/web/app/components/billing/pricing/assets/index.spec.tsx
new file mode 100644
index 0000000000..7980f9a182
--- /dev/null
+++ b/web/app/components/billing/pricing/assets/index.spec.tsx
@@ -0,0 +1,64 @@
+import { render } from '@testing-library/react'
+import {
+  Cloud,
+  Community,
+  Enterprise,
+  EnterpriseNoise,
+  NoiseBottom,
+  NoiseTop,
+  Premium,
+  PremiumNoise,
+  Professional,
+  Sandbox,
+  SelfHosted,
+  Team,
+} from './index'
+
+describe('Pricing Assets', () => {
+  // Rendering: each asset should render an svg.
+  describe('Rendering', () => {
+    it('should render static assets without crashing', () => {
+      // Arrange
+      const assets = [
+        <Community key="community" />,
+        <Enterprise key="enterprise" />,
+        <EnterpriseNoise key="enterprise-noise" />,
+        <NoiseBottom key="noise-bottom" />,
+        <NoiseTop key="noise-top" />,
+        <Premium key="premium" />,
+        <PremiumNoise key="premium-noise" />,
+        <Professional key="professional" />,
+        <Sandbox key="sandbox" />,
+        <Team key="team" />,
+      ]
+
+      // Act / Assert
+      assets.forEach((asset) => {
+        const { container, unmount } = render(asset)
+        expect(container.querySelector('svg')).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+
+  // Props: active state should change fill color for selectable assets.
+  describe('Props', () => {
+    it('should render active state for Cloud', () => {
+      // Arrange
+      const { container } = render(<Cloud isActive />)
+
+      // Assert
+      const rects = Array.from(container.querySelectorAll('rect'))
+      expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-saas-dify-blue-accessible)')).toBe(true)
+    })
+
+    it('should render inactive state for SelfHosted', () => {
+      // Arrange
+      const { container } = render(<SelfHosted isActive={false} />)
+
+      // Assert
+      const rects = Array.from(container.querySelectorAll('rect'))
+      expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-text-primary)')).toBe(true)
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/footer.spec.tsx b/web/app/components/billing/pricing/footer.spec.tsx
new file mode 100644
index 0000000000..f8e7965f5e
--- /dev/null
+++ b/web/app/components/billing/pricing/footer.spec.tsx
@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { CategoryEnum } from '.'
+import Footer from './footer'
+
+let mockTranslations: Record<string, string> = {}
+
+vi.mock('next/link', () => ({
+  default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
+    <a href={href} className={className} target={target} data-testid="pricing-link">
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('react-i18next', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-i18next')>()
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => mockTranslations[key] ?? key,
+    }),
+  }
+})
+
+describe('Footer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTranslations = {}
+  })
+
+  // Rendering behavior
+  describe('Rendering', () => {
+    it('should render tax tips and comparison link when in cloud category', () => {
+      // Arrange
+      render(<Footer pricingPageURL="https://dify.ai/pricing#plans-and-features" currentCategory={CategoryEnum.CLOUD} />)
+
+      // Assert
+      expect(screen.getByText('billing.plansCommon.taxTip')).toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.taxTipSecond')).toBeInTheDocument()
+      expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/pricing#plans-and-features')
+      expect(screen.getByText('billing.plansCommon.comparePlanAndFeatures')).toBeInTheDocument()
+    })
+  })
+
+  // Prop-driven behavior
+  describe('Props', () => {
+    it('should hide tax tips when category is self-hosted', () => {
+      // Arrange
+      render(<Footer pricingPageURL="https://dify.ai/pricing#plans-and-features" currentCategory={CategoryEnum.SELF} />)
+
+      // Assert
+      expect(screen.queryByText('billing.plansCommon.taxTip')).not.toBeInTheDocument()
+      expect(screen.queryByText('billing.plansCommon.taxTipSecond')).not.toBeInTheDocument()
+    })
+  })
+
+  // Edge case rendering behavior
+  describe('Edge Cases', () => {
+    it('should render link even when pricing URL is empty', () => {
+      // Arrange
+      render(<Footer pricingPageURL="" currentCategory={CategoryEnum.CLOUD} />)
+
+      // Assert
+      expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', '')
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/header.spec.tsx b/web/app/components/billing/pricing/header.spec.tsx
new file mode 100644
index 0000000000..0395e5dd48
--- /dev/null
+++ b/web/app/components/billing/pricing/header.spec.tsx
@@ -0,0 +1,72 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import Header from './header'
+
+let mockTranslations: Record<string, string> = {}
+
+vi.mock('react-i18next', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-i18next')>()
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => mockTranslations[key] ?? key,
+    }),
+  }
+})
+
+describe('Header', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTranslations = {}
+  })
+
+  // Rendering behavior
+  describe('Rendering', () => {
+    it('should render title and description translations', () => {
+      // Arrange
+      const handleClose = vi.fn()
+
+      // Act
+      render(<Header onClose={handleClose} />)
+
+      // Assert
+      expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.title.description')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  // Prop-driven behavior
+  describe('Props', () => {
+    it('should invoke onClose when close button is clicked', () => {
+      // Arrange
+      const handleClose = vi.fn()
+      render(<Header onClose={handleClose} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(handleClose).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Edge case rendering behavior
+  describe('Edge Cases', () => {
+    it('should render structure when translations are empty strings', () => {
+      // Arrange
+      mockTranslations = {
+        'billing.plansCommon.title.plans': '',
+        'billing.plansCommon.title.description': '',
+      }
+
+      // Act
+      const { container } = render(<Header onClose={vi.fn()} />)
+
+      // Assert
+      expect(container.querySelector('span')).toBeInTheDocument()
+      expect(container.querySelector('p')).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/index.spec.tsx b/web/app/components/billing/pricing/index.spec.tsx
new file mode 100644
index 0000000000..141c2d9c96
--- /dev/null
+++ b/web/app/components/billing/pricing/index.spec.tsx
@@ -0,0 +1,119 @@
+import type { Mock } from 'vitest'
+import type { UsagePlanInfo } from '../type'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useKeyPress } from 'ahooks'
+import * as React from 'react'
+import { useAppContext } from '@/context/app-context'
+import { useGetPricingPageLanguage } from '@/context/i18n'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '../type'
+import Pricing from './index'
+
+let mockTranslations: Record<string, string> = {}
+let mockLanguage: string | null = 'en'
+
+vi.mock('next/link', () => ({
+  default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
+    <a href={href} className={className} target={target} data-testid="pricing-link">
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('ahooks', () => ({
+  useKeyPress: vi.fn(),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: vi.fn(),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetPricingPageLanguage: vi.fn(),
+}))
+
+vi.mock('react-i18next', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-i18next')>()
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string, options?: { returnObjects?: boolean }) => {
+        if (options?.returnObjects)
+          return mockTranslations[key] ?? []
+        return mockTranslations[key] ?? key
+      },
+    }),
+    Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
+  }
+})
+
+const buildUsage = (): UsagePlanInfo => ({
+  buildApps: 0,
+  teamMembers: 0,
+  annotatedResponse: 0,
+  documentsUploadQuota: 0,
+  apiRateLimit: 0,
+  triggerEvents: 0,
+  vectorSpace: 0,
+})
+
+describe('Pricing', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTranslations = {}
+    mockLanguage = 'en'
+    ;(useAppContext as Mock).mockReturnValue({ isCurrentWorkspaceManager: true })
+    ;(useProviderContext as Mock).mockReturnValue({
+      plan: {
+        type: Plan.sandbox,
+        usage: buildUsage(),
+        total: buildUsage(),
+      },
+    })
+    ;(useGetPricingPageLanguage as Mock).mockImplementation(() => mockLanguage)
+  })
+
+  // Rendering behavior
+  describe('Rendering', () => {
+    it('should render pricing header and localized footer link', () => {
+      // Arrange
+      render(<Pricing onCancel={vi.fn()} />)
+
+      // Assert
+      expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
+      expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/en/pricing#plans-and-features')
+    })
+  })
+
+  // Prop-driven behavior
+  describe('Props', () => {
+    it('should register esc key handler and allow switching categories', () => {
+      // Arrange
+      const handleCancel = vi.fn()
+      render(<Pricing onCancel={handleCancel} />)
+
+      // Act
+      fireEvent.click(screen.getByText('billing.plansCommon.self'))
+
+      // Assert
+      expect(useKeyPress).toHaveBeenCalledWith(['esc'], handleCancel)
+      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+    })
+  })
+
+  // Edge case rendering behavior
+  describe('Edge Cases', () => {
+    it('should fall back to default pricing URL when language is empty', () => {
+      // Arrange
+      mockLanguage = ''
+      render(<Pricing onCancel={vi.fn()} />)
+
+      // Assert
+      expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/pricing#plans-and-features')
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plan-switcher/index.spec.tsx b/web/app/components/billing/pricing/plan-switcher/index.spec.tsx
new file mode 100644
index 0000000000..641d359bfd
--- /dev/null
+++ b/web/app/components/billing/pricing/plan-switcher/index.spec.tsx
@@ -0,0 +1,109 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { CategoryEnum } from '../index'
+import PlanSwitcher from './index'
+import { PlanRange } from './plan-range-switcher'
+
+let mockTranslations: Record<string, string> = {}
+
+vi.mock('react-i18next', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-i18next')>()
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => mockTranslations[key] ?? key,
+    }),
+  }
+})
+
+describe('PlanSwitcher', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTranslations = {}
+  })
+
+  // Rendering behavior
+  describe('Rendering', () => {
+    it('should render category tabs and plan range switcher for cloud', () => {
+      // Arrange
+      render(
+        <PlanSwitcher
+          currentCategory={CategoryEnum.CLOUD}
+          currentPlanRange={PlanRange.monthly}
+          onChangeCategory={vi.fn()}
+          onChangePlanRange={vi.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('billing.plansCommon.cloud')).toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.self')).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+  })
+
+  // Prop-driven behavior
+  describe('Props', () => {
+    it('should call onChangeCategory when selecting a tab', () => {
+      // Arrange
+      const handleChangeCategory = vi.fn()
+      render(
+        <PlanSwitcher
+          currentCategory={CategoryEnum.CLOUD}
+          currentPlanRange={PlanRange.monthly}
+          onChangeCategory={handleChangeCategory}
+          onChangePlanRange={vi.fn()}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByText('billing.plansCommon.self'))
+
+      // Assert
+      expect(handleChangeCategory).toHaveBeenCalledTimes(1)
+      expect(handleChangeCategory).toHaveBeenCalledWith(CategoryEnum.SELF)
+    })
+
+    it('should hide plan range switcher when category is self-hosted', () => {
+      // Arrange
+      render(
+        <PlanSwitcher
+          currentCategory={CategoryEnum.SELF}
+          currentPlanRange={PlanRange.yearly}
+          onChangeCategory={vi.fn()}
+          onChangePlanRange={vi.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+    })
+  })
+
+  // Edge case rendering behavior
+  describe('Edge Cases', () => {
+    it('should render tabs when translation strings are empty', () => {
+      // Arrange
+      mockTranslations = {
+        'billing.plansCommon.cloud': '',
+        'billing.plansCommon.self': '',
+      }
+
+      // Act
+      const { container } = render(
+        <PlanSwitcher
+          currentCategory={CategoryEnum.SELF}
+          currentPlanRange={PlanRange.monthly}
+          onChangeCategory={vi.fn()}
+          onChangePlanRange={vi.fn()}
+        />,
+      )
+
+      // Assert
+      const labels = container.querySelectorAll('span')
+      expect(labels).toHaveLength(2)
+      expect(labels[0]?.textContent).toBe('')
+      expect(labels[1]?.textContent).toBe('')
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.spec.tsx b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.spec.tsx
new file mode 100644
index 0000000000..0b4c00603c
--- /dev/null
+++ b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.spec.tsx
@@ -0,0 +1,81 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import PlanRangeSwitcher, { PlanRange } from './plan-range-switcher'
+
+let mockTranslations: Record<string, string> = {}
+
+vi.mock('react-i18next', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-i18next')>()
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => mockTranslations[key] ?? key,
+    }),
+  }
+})
+
+describe('PlanRangeSwitcher', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockTranslations = {}
+  })
+
+  // Rendering behavior
+  describe('Rendering', () => {
+    it('should render the annual billing label', () => {
+      // Arrange
+      render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={vi.fn()} />)
+
+      // Assert
+      expect(screen.getByText('billing.plansCommon.annualBilling')).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false')
+    })
+  })
+
+  // Prop-driven behavior
+  describe('Props', () => {
+    it('should switch to yearly when toggled from monthly', () => {
+      // Arrange
+      const handleChange = vi.fn()
+      render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={handleChange} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('switch'))
+
+      // Assert
+      expect(handleChange).toHaveBeenCalledTimes(1)
+      expect(handleChange).toHaveBeenCalledWith(PlanRange.yearly)
+    })
+
+    it('should switch to monthly when toggled from yearly', () => {
+      // Arrange
+      const handleChange = vi.fn()
+      render(<PlanRangeSwitcher value={PlanRange.yearly} onChange={handleChange} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('switch'))
+
+      // Assert
+      expect(handleChange).toHaveBeenCalledTimes(1)
+      expect(handleChange).toHaveBeenCalledWith(PlanRange.monthly)
+    })
+  })
+
+  // Edge case rendering behavior
+  describe('Edge Cases', () => {
+    it('should render when the translation string is empty', () => {
+      // Arrange
+      mockTranslations = {
+        'billing.plansCommon.annualBilling': '',
+      }
+
+      // Act
+      const { container } = render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={vi.fn()} />)
+
+      // Assert
+      const label = container.querySelector('span')
+      expect(label).toBeInTheDocument()
+      expect(label?.textContent).toBe('')
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plan-switcher/tab.spec.tsx b/web/app/components/billing/pricing/plan-switcher/tab.spec.tsx
new file mode 100644
index 0000000000..5c335e0dd1
--- /dev/null
+++ b/web/app/components/billing/pricing/plan-switcher/tab.spec.tsx
@@ -0,0 +1,95 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import Tab from './tab'
+
+const Icon = ({ isActive }: { isActive: boolean }) => (
+  <svg data-testid="tab-icon" data-active={isActive ? 'true' : 'false'} />
+)
+
+describe('PlanSwitcherTab', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering behavior
+  describe('Rendering', () => {
+    it('should render label and icon', () => {
+      // Arrange
+      render(
+        <Tab
+          Icon={Icon}
+          value="cloud"
+          label="Cloud"
+          isActive={false}
+          onClick={vi.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Cloud')).toBeInTheDocument()
+      expect(screen.getByTestId('tab-icon')).toHaveAttribute('data-active', 'false')
+    })
+  })
+
+  // Prop-driven behavior
+  describe('Props', () => {
+    it('should call onClick with the provided value', () => {
+      // Arrange
+      const handleClick = vi.fn()
+      render(
+        <Tab
+          Icon={Icon}
+          value="self"
+          label="Self"
+          isActive={false}
+          onClick={handleClick}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByText('Self'))
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+      expect(handleClick).toHaveBeenCalledWith('self')
+    })
+
+    it('should apply active text class when isActive is true', () => {
+      // Arrange
+      render(
+        <Tab
+          Icon={Icon}
+          value="cloud"
+          label="Cloud"
+          isActive
+          onClick={vi.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Cloud')).toHaveClass('text-saas-dify-blue-accessible')
+      expect(screen.getByTestId('tab-icon')).toHaveAttribute('data-active', 'true')
+    })
+  })
+
+  // Edge case rendering behavior
+  describe('Edge Cases', () => {
+    it('should render when label is empty', () => {
+      // Arrange
+      const { container } = render(
+        <Tab
+          Icon={Icon}
+          value="cloud"
+          label=""
+          isActive={false}
+          onClick={vi.fn()}
+        />,
+      )
+
+      // Assert
+      const label = container.querySelector('span')
+      expect(label).toBeInTheDocument()
+      expect(label?.textContent).toBe('')
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
index 57c85cf297..345c915c2b 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
@@ -106,7 +106,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
           {ICON_MAP[plan]}
           <div className="flex min-h-[104px] flex-col gap-y-2">
             <div className="flex items-center gap-x-2.5">
-              <div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name`)}</div>
+              <div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name` as any) as string}</div>
               {
                 isMostPopularPlan && (
                   <div className="flex items-center justify-center bg-saas-dify-blue-static px-1.5 py-1">
@@ -117,7 +117,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
                 )
               }
             </div>
-            <div className="system-sm-regular text-text-secondary">{t(`${i18nPrefix}.description`)}</div>
+            <div className="system-sm-regular text-text-secondary">{t(`${i18nPrefix}.description` as any) as string}</div>
           </div>
         </div>
         {/* Price */}
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
index 544141a6a5..73c7f31cb5 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
@@ -42,7 +42,7 @@ const Button = ({
       onClick={handleGetPayUrl}
     >
       <div className="flex grow items-center gap-x-2">
-        <span>{t(`${i18nPrefix}.btnText`)}</span>
+        <span>{t(`${i18nPrefix}.btnText` as any) as string}</span>
         {isPremiumPlan && (
           <span className="pb-px pt-[7px]">
             <AwsMarketplace className="h-6" />
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
index b89d0c6941..a1880af523 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -85,16 +85,16 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
         <div className=" flex flex-col gap-y-6 px-1 pt-10">
           {STYLE_MAP[plan].icon}
           <div className="flex min-h-[104px] flex-col gap-y-2">
-            <div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name`)}</div>
-            <div className="system-md-regular line-clamp-2 text-text-secondary">{t(`${i18nPrefix}.description`)}</div>
+            <div className="text-[30px] font-medium leading-[1.2] text-text-primary">{t(`${i18nPrefix}.name` as any) as string}</div>
+            <div className="system-md-regular line-clamp-2 text-text-secondary">{t(`${i18nPrefix}.description` as any) as string}</div>
           </div>
         </div>
         {/* Price */}
         <div className="flex items-end gap-x-2 px-1 pb-8 pt-4">
-          <div className="title-4xl-semi-bold shrink-0 text-text-primary">{t(`${i18nPrefix}.price`)}</div>
+          <div className="title-4xl-semi-bold shrink-0 text-text-primary">{t(`${i18nPrefix}.price` as any) as string}</div>
           {!isFreePlan && (
             <span className="system-md-regular pb-0.5 text-text-tertiary">
-              {t(`${i18nPrefix}.priceTip`)}
+              {t(`${i18nPrefix}.priceTip` as any) as string}
             </span>
           )}
         </div>
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
index 4ed307d36e..e7828decb9 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx
@@ -12,13 +12,13 @@ const List = ({
 }: ListProps) => {
   const { t } = useTranslation()
   const i18nPrefix = `billing.plans.${plan}`
-  const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
+  const features = t(`${i18nPrefix}.features` as any, { returnObjects: true }) as unknown as string[]
 
   return (
     <div className="flex flex-col gap-y-[10px] p-6">
       <div className="system-md-semibold text-text-secondary">
         <Trans
-          i18nKey={t(`${i18nPrefix}.includesTitle`)}
+          i18nKey={t(`${i18nPrefix}.includesTitle` as any) as string}
           components={{ highlight: <span className="text-text-warning"></span> }}
         />
       </div>
diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index e5a6857078..b66fdc7ea9 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -31,7 +31,7 @@ const PriorityLabel = ({ className }: PriorityLabelProps) => {
   return (
     <Tooltip popupContent={(
       <div>
-        <div className="mb-1 text-xs font-semibold text-text-primary">{`${t('billing.plansCommon.documentProcessingPriority')}: ${t(`billing.plansCommon.priority.${priority}`)}`}</div>
+        <div className="mb-1 text-xs font-semibold text-text-primary">{`${t('billing.plansCommon.documentProcessingPriority')}: ${t(`billing.plansCommon.priority.${priority}` as any) as string}`}</div>
         {
           priority !== DocumentProcessingPriority.topPriority && (
             <div className="text-xs text-text-secondary">{t('billing.plansCommon.documentProcessingPriorityTip')}</div>
@@ -51,7 +51,7 @@ const PriorityLabel = ({ className }: PriorityLabelProps) => {
             <RiAedFill className="mr-0.5 size-3" />
           )
         }
-        <span>{t(`billing.plansCommon.priority.${priority}`)}</span>
+        <span>{t(`billing.plansCommon.priority.${priority}` as any) as string}</span>
       </div>
     </Tooltip>
   )
diff --git a/web/app/components/billing/progress-bar/index.spec.tsx b/web/app/components/billing/progress-bar/index.spec.tsx
new file mode 100644
index 0000000000..a9c91468de
--- /dev/null
+++ b/web/app/components/billing/progress-bar/index.spec.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+import ProgressBar from './index'
+
+describe('ProgressBar', () => {
+  it('renders with provided percent and color', () => {
+    render(<ProgressBar percent={42} color="bg-test-color" />)
+
+    const bar = screen.getByTestId('billing-progress-bar')
+    expect(bar).toHaveClass('bg-test-color')
+    expect(bar.getAttribute('style')).toContain('width: 42%')
+  })
+
+  it('caps width at 100% when percent exceeds max', () => {
+    render(<ProgressBar percent={150} color="bg-test-color" />)
+
+    const bar = screen.getByTestId('billing-progress-bar')
+    expect(bar.getAttribute('style')).toContain('width: 100%')
+  })
+
+  it('uses the default color when no color prop is provided', () => {
+    render(<ProgressBar percent={20} color={undefined as unknown as string} />)
+
+    expect(screen.getByTestId('billing-progress-bar')).toHaveClass('#2970FF')
+  })
+})
diff --git a/web/app/components/billing/progress-bar/index.tsx b/web/app/components/billing/progress-bar/index.tsx
index 383b516b61..c41fc53310 100644
--- a/web/app/components/billing/progress-bar/index.tsx
+++ b/web/app/components/billing/progress-bar/index.tsx
@@ -12,6 +12,7 @@ const ProgressBar = ({
   return (
     <div className="overflow-hidden rounded-[6px] bg-components-progress-bar-bg">
       <div
+        data-testid="billing-progress-bar"
         className={cn('h-1 rounded-[6px]', color)}
         style={{
           width: `${Math.min(percent, 100)}%`,
diff --git a/web/app/components/billing/trigger-events-limit-modal/index.spec.tsx b/web/app/components/billing/trigger-events-limit-modal/index.spec.tsx
new file mode 100644
index 0000000000..a3d04c6031
--- /dev/null
+++ b/web/app/components/billing/trigger-events-limit-modal/index.spec.tsx
@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react'
+import TriggerEventsLimitModal from './index'
+
+const mockOnClose = vi.fn()
+const mockOnUpgrade = vi.fn()
+
+const planUpgradeModalMock = vi.fn((props: { show: boolean, title: string, description: string, extraInfo?: React.ReactNode, onClose: () => void, onUpgrade: () => void }) => (
+  <div
+    data-testid="plan-upgrade-modal"
+    data-show={props.show}
+    data-title={props.title}
+    data-description={props.description}
+  >
+    {props.extraInfo}
+  </div>
+))
+
+vi.mock('@/app/components/billing/plan-upgrade-modal', () => ({
+  __esModule: true,
+  // eslint-disable-next-line ts/no-explicit-any
+  default: (props: any) => planUpgradeModalMock(props),
+}))
+
+describe('TriggerEventsLimitModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('passes the trigger usage props to the upgrade modal', () => {
+    render(
+      <TriggerEventsLimitModal
+        show
+        onClose={mockOnClose}
+        onUpgrade={mockOnUpgrade}
+        usage={12}
+        total={20}
+        resetInDays={5}
+      />,
+    )
+
+    const modal = screen.getByTestId('plan-upgrade-modal')
+    expect(modal.getAttribute('data-show')).toBe('true')
+    expect(modal.getAttribute('data-title')).toContain('billing.triggerLimitModal.title')
+    expect(modal.getAttribute('data-description')).toContain('billing.triggerLimitModal.description')
+    expect(planUpgradeModalMock).toHaveBeenCalled()
+
+    const passedProps = planUpgradeModalMock.mock.calls[0][0]
+    expect(passedProps.onClose).toBe(mockOnClose)
+    expect(passedProps.onUpgrade).toBe(mockOnUpgrade)
+
+    expect(screen.getByText('billing.triggerLimitModal.usageTitle')).toBeInTheDocument()
+    expect(screen.getByText('12')).toBeInTheDocument()
+    expect(screen.getByText('20')).toBeInTheDocument()
+  })
+
+  it('renders even when trigger modal is hidden', () => {
+    render(
+      <TriggerEventsLimitModal
+        show={false}
+        onClose={mockOnClose}
+        onUpgrade={mockOnUpgrade}
+        usage={0}
+        total={0}
+      />,
+    )
+
+    expect(planUpgradeModalMock).toHaveBeenCalled()
+    expect(screen.getByTestId('plan-upgrade-modal').getAttribute('data-show')).toBe('false')
+  })
+})
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index 0f23022b35..2a43090d84 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -46,8 +46,8 @@ const UpgradeBtn: FC<Props> = ({
     }
   }
 
-  const defaultBadgeLabel = t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)
-  const label = labelKey ? t(labelKey) : defaultBadgeLabel
+  const defaultBadgeLabel = t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}` as any) as string
+  const label = labelKey ? t(labelKey as any) as string : defaultBadgeLabel
 
   if (isPlain) {
     return (
@@ -56,7 +56,7 @@ const UpgradeBtn: FC<Props> = ({
         style={style}
         onClick={onClick}
       >
-        {labelKey ? label : t('billing.upgradeBtn.plain')}
+        {labelKey ? label : t('billing.upgradeBtn.plain' as any) as string}
       </Button>
     )
   }
diff --git a/web/app/components/billing/usage-info/apps-info.spec.tsx b/web/app/components/billing/usage-info/apps-info.spec.tsx
new file mode 100644
index 0000000000..7289b474e5
--- /dev/null
+++ b/web/app/components/billing/usage-info/apps-info.spec.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import { defaultPlan } from '../config'
+import AppsInfo from './apps-info'
+
+const appsUsage = 7
+const appsTotal = 15
+
+const mockPlan = {
+  ...defaultPlan,
+  usage: {
+    ...defaultPlan.usage,
+    buildApps: appsUsage,
+  },
+  total: {
+    ...defaultPlan.total,
+    buildApps: appsTotal,
+  },
+}
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: mockPlan,
+  }),
+}))
+
+describe('AppsInfo', () => {
+  it('renders build apps usage information with context data', () => {
+    render(<AppsInfo className="apps-info-class" />)
+
+    expect(screen.getByText('billing.usagePage.buildApps')).toBeInTheDocument()
+    expect(screen.getByText(`${appsUsage}`)).toBeInTheDocument()
+    expect(screen.getByText(`${appsTotal}`)).toBeInTheDocument()
+    expect(screen.getByText('billing.usagePage.buildApps').closest('.apps-info-class')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/billing/usage-info/index.spec.tsx b/web/app/components/billing/usage-info/index.spec.tsx
new file mode 100644
index 0000000000..3137c4865f
--- /dev/null
+++ b/web/app/components/billing/usage-info/index.spec.tsx
@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react'
+import { NUM_INFINITE } from '../config'
+import UsageInfo from './index'
+
+const TestIcon = () => <span data-testid="usage-icon" />
+
+describe('UsageInfo', () => {
+  it('renders the metric with a suffix unit and tooltip text', () => {
+    render(
+      <UsageInfo
+        Icon={TestIcon}
+        name="Apps"
+        usage={30}
+        total={100}
+        unit="GB"
+        tooltip="tooltip text"
+      />,
+    )
+
+    expect(screen.getByTestId('usage-icon')).toBeInTheDocument()
+    expect(screen.getByText('Apps')).toBeInTheDocument()
+    expect(screen.getByText('30')).toBeInTheDocument()
+    expect(screen.getByText('100')).toBeInTheDocument()
+    expect(screen.getByText('GB')).toBeInTheDocument()
+  })
+
+  it('renders inline unit when unitPosition is inline', () => {
+    render(
+      <UsageInfo
+        Icon={TestIcon}
+        name="Storage"
+        usage={20}
+        total={100}
+        unit="GB"
+        unitPosition="inline"
+      />,
+    )
+
+    expect(screen.getByText('100GB')).toBeInTheDocument()
+  })
+
+  it('shows reset hint text instead of the unit when resetHint is provided', () => {
+    const resetHint = 'Resets in 3 days'
+    render(
+      <UsageInfo
+        Icon={TestIcon}
+        name="Storage"
+        usage={20}
+        total={100}
+        unit="GB"
+        resetHint={resetHint}
+      />,
+    )
+
+    expect(screen.getByText(resetHint)).toBeInTheDocument()
+    expect(screen.queryByText('GB')).not.toBeInTheDocument()
+  })
+
+  it('displays unlimited text when total is infinite', () => {
+    render(
+      <UsageInfo
+        Icon={TestIcon}
+        name="Storage"
+        usage={10}
+        total={NUM_INFINITE}
+        unit="GB"
+      />,
+    )
+
+    expect(screen.getByText('billing.plansCommon.unlimited')).toBeInTheDocument()
+  })
+
+  it('applies warning color when usage is close to the limit', () => {
+    render(
+      <UsageInfo
+        Icon={TestIcon}
+        name="Storage"
+        usage={85}
+        total={100}
+      />,
+    )
+
+    const progressBar = screen.getByTestId('billing-progress-bar')
+    expect(progressBar).toHaveClass('bg-components-progress-warning-progress')
+  })
+
+  it('applies error color when usage exceeds the limit', () => {
+    render(
+      <UsageInfo
+        Icon={TestIcon}
+        name="Storage"
+        usage={120}
+        total={100}
+      />,
+    )
+
+    const progressBar = screen.getByTestId('billing-progress-bar')
+    expect(progressBar).toHaveClass('bg-components-progress-error-progress')
+  })
+
+  it('does not render the icon when hideIcon is true', () => {
+    render(
+      <UsageInfo
+        Icon={TestIcon}
+        name="Storage"
+        usage={5}
+        total={100}
+        hideIcon
+      />,
+    )
+
+    expect(screen.queryByTestId('usage-icon')).not.toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/billing/vector-space-full/index.spec.tsx b/web/app/components/billing/vector-space-full/index.spec.tsx
new file mode 100644
index 0000000000..de5607df41
--- /dev/null
+++ b/web/app/components/billing/vector-space-full/index.spec.tsx
@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react'
+import VectorSpaceFull from './index'
+
+type VectorProviderGlobal = typeof globalThis & {
+  __vectorProviderContext?: ReturnType<typeof vi.fn>
+}
+
+function getVectorGlobal(): VectorProviderGlobal {
+  return globalThis as VectorProviderGlobal
+}
+
+vi.mock('@/context/provider-context', () => {
+  const mock = vi.fn()
+  getVectorGlobal().__vectorProviderContext = mock
+  return {
+    useProviderContext: () => mock(),
+  }
+})
+
+vi.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: () => <button data-testid="vector-upgrade-btn" type="button">Upgrade</button>,
+}))
+
+describe('VectorSpaceFull', () => {
+  const planMock = {
+    type: 'team',
+    usage: {
+      vectorSpace: 8,
+    },
+    total: {
+      vectorSpace: 10,
+    },
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    const globals = getVectorGlobal()
+    globals.__vectorProviderContext?.mockReturnValue({
+      plan: planMock,
+    })
+  })
+
+  it('renders tip text and upgrade button', () => {
+    render(<VectorSpaceFull />)
+
+    expect(screen.getByText('billing.vectorSpace.fullTip')).toBeInTheDocument()
+    expect(screen.getByText('billing.vectorSpace.fullSolution')).toBeInTheDocument()
+    expect(screen.getByTestId('vector-upgrade-btn')).toBeInTheDocument()
+  })
+
+  it('shows vector usage and total', () => {
+    render(<VectorSpaceFull />)
+
+    expect(screen.getByText('8')).toBeInTheDocument()
+    expect(screen.getByText('10MB')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 3c6557dc63..6a86441bd4 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -68,7 +68,7 @@ const CustomWebAppBrand = () => {
         setFileId(res.id)
       },
       onErrorCallback: (error?: any) => {
-        const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t)
+        const errorMessage = getImageUploadErrorMessage(error, t('common.imageUploader.uploadFromComputerUploadError'), t as any)
         notify({ type: 'error', message: errorMessage })
         setUploadProgress(-1)
       },
diff --git a/web/app/components/datasets/common/document-status-with-action/index-failed.tsx b/web/app/components/datasets/common/document-status-with-action/index-failed.tsx
index 1635720037..f685eb1f2e 100644
--- a/web/app/components/datasets/common/document-status-with-action/index-failed.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/index-failed.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { IndexingStatusResponse } from '@/models/datasets'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts b/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts
index 7a0868b14c..44bde33a96 100644
--- a/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts
+++ b/web/app/components/datasets/common/image-uploader/hooks/use-upload.ts
@@ -145,7 +145,7 @@ export const useUpload = () => {
           handleUpdateFile({ ...uploadingFile, uploadedId: res.id, progress: 100 })
         },
         onErrorCallback: (error?: any) => {
-          const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t)
+          const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t as any)
           Toast.notify({ type: 'error', message: errorMessage })
           handleUpdateFile({ ...uploadingFile, progress: -1 })
         },
@@ -187,7 +187,7 @@ export const useUpload = () => {
             })
           },
           onErrorCallback: (error?: any) => {
-            const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t)
+            const errorMessage = getFileUploadErrorMessage(error, t('common.fileUploader.uploadFromComputerUploadError'), t as any)
             Toast.notify({ type: 'error', message: errorMessage })
             handleUpdateFile({ ...uploadingFile, progress: -1 })
           },
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 df8a93f666..3ab33e0278 100644
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -33,8 +33,8 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
     <div className="space-y-2">
       <RadioCard
         icon={icon}
-        title={t(`dataset.retrieval.${type}.title`)}
-        description={t(`dataset.retrieval.${type}.description`)}
+        title={t(`dataset.retrieval.${type}.title` as any) as string}
+        description={t(`dataset.retrieval.${type}.description` as any) as string}
         noRadio
         chosenConfigWrapClassName="!pb-3"
         chosenConfig={(
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
index d5955d9bc6..b8c413ba8f 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useDebounceFn, useKeyPress } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx
index 8452d20d2d..348ba88b82 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx
@@ -44,7 +44,7 @@ const Content = ({
             {name}
           </div>
           <div className="system-2xs-medium-uppercase text-text-tertiary">
-            {t(`dataset.chunkingMode.${DOC_FORM_TEXT[chunkStructure]}`)}
+            {t(`dataset.chunkingMode.${DOC_FORM_TEXT[chunkStructure]}` as any) as string}
           </div>
         </div>
       </div>
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 541eb62b60..d2050268aa 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -141,7 +141,7 @@ const RuleDetail: FC<{
       <FieldInfo
         label={t('datasetSettings.form.retrievalSetting.title')}
         // displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
-        displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title`) as string}
+        displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title` as any) as string}
         valueIcon={(
           <Image
             className="size-4"
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index 97d1625c10..08ce25a534 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -132,7 +132,7 @@ const FileUploader = ({
         return Promise.resolve({ ...completeFile })
       })
       .catch((e) => {
-        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t)
+        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t as any)
         notify({ type: 'error', message: errorMessage })
         onFileUpdate(fileItem, -2, fileListRef.current)
         return Promise.resolve({ ...fileItem })
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 981b6c5a8f..e0a330507c 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -9,7 +9,7 @@ import {
   RiArrowLeftLine,
   RiSearchEyeLine,
 } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Image from 'next/image'
 import Link from 'next/link'
 import * as React from 'react'
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index 3f30d9a8da..632ad3ab73 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -39,7 +39,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
       <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
         <Stepper
           steps={Array.from({ length: 3 }, (_, i) => ({
-            name: t(STEP_T_MAP[i + 1]),
+            name: t(STEP_T_MAP[i + 1] as any) as string,
           }))}
           {...rest}
         />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
index 31570ef4cf..c36155e104 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
@@ -155,7 +155,7 @@ const LocalFile = ({
         return Promise.resolve({ ...completeFile })
       })
       .catch((e) => {
-        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t)
+        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t as any)
         notify({ type: 'error', message: errorMessage })
         updateFile(fileItem, -2, fileListRef.current)
         return Promise.resolve({ ...fileItem })
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
index a16e284bcf..55590636a6 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/rule-detail.tsx
@@ -63,7 +63,7 @@ const RuleDetail = ({
       />
       <FieldInfo
         label={t('datasetSettings.form.retrievalSetting.title')}
-        displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title`) as string}
+        displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title` as any) as string}
         valueIcon={(
           <Image
             className="size-4"
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index 3e55da0a90..c6ab97a8da 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -75,7 +75,7 @@ const CSVUploader: FC<Props> = ({
         return Promise.resolve({ ...completeFile })
       })
       .catch((e) => {
-        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t)
+        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t as any)
         notify({ type: 'error', message: errorMessage })
         const errorFile = {
           ...fileItem,
diff --git a/web/app/components/datasets/documents/detail/batch-modal/index.tsx b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
index 091d5c493e..0d7199c6c6 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import type { ChunkingMode, FileItem } from '@/models/datasets'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
index 5f62bf0185..73b5cbdef9 100644
--- a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
 import Drawer from './drawer'
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index 4957104e25..114d713170 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { RiLoader2Line } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index 1b4aadfa50..e149125865 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -4,7 +4,7 @@ import type { Item } from '@/app/components/base/select'
 import type { FileEntity } from '@/app/components/datasets/common/image-uploader/types'
 import type { ChildChunkDetail, SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
 import { useDebounceFn } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index db83d89c40..2978ec5681 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -133,7 +133,7 @@ const RuleDetail: FC<IRuleDetailProps> = React.memo(({
       />
       <FieldInfo
         label={t('datasetSettings.form.retrievalSetting.title')}
-        displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title`) as string}
+        displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'keyword_search' : retrievalMethod}.title` as any) as string}
         valueIcon={(
           <Image
             className="size-4"
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 87d136c3fe..dbae76491e 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -4,7 +4,7 @@ import type { inputType, metadataType } from '@/hooks/use-metadata'
 import type { CommonResponse } from '@/models/common'
 import type { DocType, FullDocumentDetail } from '@/models/datasets'
 import { PencilIcon } from '@heroicons/react/24/outline'
-import { get } from 'lodash-es'
+import { get } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
index 2d71fa9e7d..2eac6b788d 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx
@@ -1,7 +1,7 @@
 import type { NotionPage } from '@/models/common'
 import type { CrawlResultItem, CustomFile, FileIndexingEstimateResponse } from '@/models/datasets'
 import type { OnlineDriveFile, PublishedPipelineRunPreviewResponse } from '@/models/pipeline'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index 0b06d5fe15..670cdd659c 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -9,7 +9,7 @@ import {
   RiGlobalLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import { pick, uniq } from 'lodash-es'
+import { pick, uniq } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
diff --git a/web/app/components/datasets/documents/operations.tsx b/web/app/components/datasets/documents/operations.tsx
index 825a315178..038a89b56e 100644
--- a/web/app/components/datasets/documents/operations.tsx
+++ b/web/app/components/datasets/documents/operations.tsx
@@ -11,7 +11,7 @@ import {
   RiPlayCircleLine,
 } from '@remixicon/react'
 import { useBoolean, useDebounceFn } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index 959e7f3425..92ad6d3b4a 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -228,7 +228,7 @@ const QueryInput = ({
                   className="flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg border-[0.5px] border-components-button-secondary-bg bg-components-button-secondary-bg px-1.5 shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover"
                 >
                   {icon}
-                  <div className="text-xs font-medium uppercase text-text-secondary">{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
+                  <div className="text-xs font-medium uppercase text-text-secondary">{t(`dataset.retrieval.${retrievalMethod}.title` as any) as string}</div>
                   <RiEqualizer2Line className="size-4 text-components-menu-item-text"></RiEqualizer2Line>
                 </div>
               )}
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index 8087b80fda..e72349db3a 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -217,17 +217,17 @@ const DatasetCard = ({
                   {dataset.doc_form && (
                     <span
                       className="min-w-0 max-w-full truncate"
-                      title={t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}
+                      title={t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}` as any) as string}
                     >
-                      {t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}
+                      {t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}` as any) as string}
                     </span>
                   )}
                   {dataset.indexing_technique && (
                     <span
                       className="min-w-0 max-w-full truncate"
-                      title={formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}
+                      title={formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method) as any}
                     >
-                      {formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}
+                      {formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method) as any}
                     </span>
                   )}
                   {dataset.is_multimodal && (
diff --git a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
index 66dfc0384f..4de18f6e50 100644
--- a/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
+++ b/web/app/components/datasets/metadata/hooks/use-metadata-document.ts
@@ -1,6 +1,6 @@
 import type { BuiltInMetadataItem, MetadataItemWithValue } from '../types'
 import type { FullDocumentDetail } from '@/models/datasets'
-import { get } from 'lodash-es'
+import { get } from 'es-toolkit/compat'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
index d31e9d7957..85fd01b2bb 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-content.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index 8b152b8f02..ef988fc9bc 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -4,7 +4,7 @@ import type { MouseEventHandler } from 'react'
 import type { AppIconSelection } from '../../base/app-icon-picker'
 import type { DataSet } from '@/models/datasets'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/explore/app-list/index.spec.tsx b/web/app/components/explore/app-list/index.spec.tsx
index e73fcdf0ad..c84da1931c 100644
--- a/web/app/components/explore/app-list/index.spec.tsx
+++ b/web/app/components/explore/app-list/index.spec.tsx
@@ -10,7 +10,9 @@ import AppList from './index'
 const allCategoriesEn = 'explore.apps.allCategories:{"lng":"en"}'
 let mockTabValue = allCategoriesEn
 const mockSetTab = vi.fn()
-let mockSWRData: { categories: string[], allList: App[] } = { categories: [], allList: [] }
+let mockExploreData: { categories: string[], allList: App[] } | undefined = { categories: [], allList: [] }
+let mockIsLoading = false
+let mockIsError = false
 const mockHandleImportDSL = vi.fn()
 const mockHandleImportDSLConfirm = vi.fn()
 
@@ -33,9 +35,12 @@ vi.mock('ahooks', async () => {
   }
 })
 
-vi.mock('swr', () => ({
-  __esModule: true,
-  default: () => ({ data: mockSWRData }),
+vi.mock('@/service/use-explore', () => ({
+  useExploreAppList: () => ({
+    data: mockExploreData,
+    isLoading: mockIsLoading,
+    isError: mockIsError,
+  }),
 }))
 
 vi.mock('@/service/explore', () => ({
@@ -135,14 +140,17 @@ describe('AppList', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockTabValue = allCategoriesEn
-    mockSWRData = { categories: [], allList: [] }
+    mockExploreData = { categories: [], allList: [] }
+    mockIsLoading = false
+    mockIsError = false
   })
 
   // Rendering: show loading when categories are not ready.
   describe('Rendering', () => {
-    it('should render loading when categories are empty', () => {
+    it('should render loading when the query is loading', () => {
       // Arrange
-      mockSWRData = { categories: [], allList: [] }
+      mockExploreData = undefined
+      mockIsLoading = true
 
       // Act
       renderWithContext()
@@ -153,7 +161,7 @@ describe('AppList', () => {
 
     it('should render app cards when data is available', () => {
       // Arrange
-      mockSWRData = {
+      mockExploreData = {
         categories: ['Writing', 'Translate'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Beta' }, category: 'Translate' })],
       }
@@ -172,7 +180,7 @@ describe('AppList', () => {
     it('should filter apps by selected category', () => {
       // Arrange
       mockTabValue = 'Writing'
-      mockSWRData = {
+      mockExploreData = {
         categories: ['Writing', 'Translate'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Beta' }, category: 'Translate' })],
       }
@@ -190,7 +198,7 @@ describe('AppList', () => {
   describe('User Interactions', () => {
     it('should filter apps by search keywords', async () => {
       // Arrange
-      mockSWRData = {
+      mockExploreData = {
         categories: ['Writing'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Gamma' } })],
       }
@@ -210,7 +218,7 @@ describe('AppList', () => {
     it('should handle create flow and confirm DSL when pending', async () => {
       // Arrange
       const onSuccess = vi.fn()
-      mockSWRData = {
+      mockExploreData = {
         categories: ['Writing'],
         allList: [createApp()],
       };
@@ -246,7 +254,7 @@ describe('AppList', () => {
   describe('Edge Cases', () => {
     it('should reset search results when clear icon is clicked', async () => {
       // Arrange
-      mockSWRData = {
+      mockExploreData = {
         categories: ['Writing'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Gamma' } })],
       }
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 585c4e60c1..5ab68f9b04 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -6,7 +6,6 @@ import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
 import Input from '@/app/components/base/input'
@@ -20,7 +19,8 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import {
   DSLImportMode,
 } from '@/models/app'
-import { fetchAppDetail, fetchAppList } from '@/service/explore'
+import { fetchAppDetail } from '@/service/explore'
+import { useExploreAppList } from '@/service/use-explore'
 import { cn } from '@/utils/classnames'
 import s from './style.module.css'
 
@@ -28,11 +28,6 @@ type AppsProps = {
   onSuccess?: () => void
 }
 
-export enum PageType {
-  EXPLORE = 'explore',
-  CREATE = 'create',
-}
-
 const Apps = ({
   onSuccess,
 }: AppsProps) => {
@@ -58,23 +53,16 @@ const Apps = ({
   })
 
   const {
-    data: { categories, allList },
-  } = useSWR(
-    ['/explore/apps'],
-    () =>
-      fetchAppList().then(({ categories, recommended_apps }) => ({
-        categories,
-        allList: recommended_apps.sort((a, b) => a.position - b.position),
-      })),
-    {
-      fallbackData: {
-        categories: [],
-        allList: [],
-      },
-    },
-  )
+    data,
+    isLoading,
+    isError,
+  } = useExploreAppList()
 
-  const filteredList = allList.filter(item => currCategory === allCategoriesEn || item.category === currCategory)
+  const filteredList = useMemo(() => {
+    if (!data)
+      return []
+    return data.allList.filter(item => currCategory === allCategoriesEn || item.category === currCategory)
+  }, [data, currCategory, allCategoriesEn])
 
   const searchFilteredList = useMemo(() => {
     if (!searchKeywords || !filteredList || filteredList.length === 0)
@@ -132,7 +120,7 @@ const Apps = ({
     })
   }, [handleImportDSLConfirm, onSuccess])
 
-  if (!categories || categories.length === 0) {
+  if (isLoading) {
     return (
       <div className="flex h-full items-center">
         <Loading type="area" />
@@ -140,6 +128,11 @@ const Apps = ({
     )
   }
 
+  if (isError || !data)
+    return null
+
+  const { categories } = data
+
   return (
     <div className={cn(
       'flex h-full flex-col border-l-[0.5px] border-divider-regular',
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index eba883d849..593ed8d938 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -50,7 +50,7 @@ const Category: FC<ICategoryProps> = ({
           className={itemClassName(name === value)}
           onClick={() => onChange(name)}
         >
-          {(categoryI18n as any)[name] ? t(`explore.category.${name}`) : name}
+          {(categoryI18n as any)[name] ? t(`explore.category.${name}` as any) as string : name}
         </div>
       ))}
     </div>
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index dac89bc776..b05188fe4d 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -2,7 +2,7 @@
 import type { AppIconType } from '@/types/app'
 import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/goto-anything/actions/commands/theme.tsx b/web/app/components/goto-anything/actions/commands/theme.tsx
index dc8ca46bc0..34df84e33b 100644
--- a/web/app/components/goto-anything/actions/commands/theme.tsx
+++ b/web/app/components/goto-anything/actions/commands/theme.tsx
@@ -36,13 +36,13 @@ const buildThemeCommands = (query: string, locale?: string): CommandSearchResult
   const q = query.toLowerCase()
   const list = THEME_ITEMS.filter(item =>
     !q
-    || i18n.t(item.titleKey, { lng: locale }).toLowerCase().includes(q)
+    || i18n.t(item.titleKey as any, { lng: locale }).toLowerCase().includes(q)
     || item.id.includes(q),
   )
   return list.map(item => ({
     id: item.id,
-    title: i18n.t(item.titleKey, { lng: locale }),
-    description: i18n.t(item.descKey, { lng: locale }),
+    title: i18n.t(item.titleKey as any, { lng: locale }),
+    description: i18n.t(item.descKey as any, { lng: locale }),
     type: 'command' as const,
     icon: (
       <div className="flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-panel-bg">
diff --git a/web/app/components/goto-anything/command-selector.tsx b/web/app/components/goto-anything/command-selector.tsx
index 0d89669ec8..f62a7a3829 100644
--- a/web/app/components/goto-anything/command-selector.tsx
+++ b/web/app/components/goto-anything/command-selector.tsx
@@ -117,7 +117,7 @@ const CommandSelector: FC<Props> = ({ actions, onCommandSelect, searchFilter, co
                         '/community': 'app.gotoAnything.actions.communityDesc',
                         '/zen': 'app.gotoAnything.actions.zenDesc',
                       }
-                      return t(slashKeyMap[item.key] || item.description)
+                      return t((slashKeyMap[item.key] || item.description) as any)
                     })()
                   )
                 : (
@@ -128,7 +128,7 @@ const CommandSelector: FC<Props> = ({ actions, onCommandSelect, searchFilter, co
                         '@knowledge': 'app.gotoAnything.actions.searchKnowledgeBasesDesc',
                         '@node': 'app.gotoAnything.actions.searchWorkflowNodesDesc',
                       }
-                      return t(keyMap[item.key])
+                      return t(keyMap[item.key] as any) as string
                     })()
                   )}
             </span>
diff --git a/web/app/components/goto-anything/index.tsx b/web/app/components/goto-anything/index.tsx
index 1c61cb9516..76c2e26ebd 100644
--- a/web/app/components/goto-anything/index.tsx
+++ b/web/app/components/goto-anything/index.tsx
@@ -243,7 +243,7 @@ const GotoAnything: FC<Props> = ({
                     knowledge: 'app.gotoAnything.emptyState.noKnowledgeBasesFound',
                     node: 'app.gotoAnything.emptyState.noWorkflowNodesFound',
                   }
-                  return t(keyMap[commandType] || 'app.gotoAnything.noResults')
+                  return t((keyMap[commandType] || 'app.gotoAnything.noResults') as any)
                 })()
               : t('app.gotoAnything.noResults')}
           </div>
@@ -410,7 +410,7 @@ const GotoAnything: FC<Props> = ({
                                 'workflow-node': 'app.gotoAnything.groups.workflowNodes',
                                 'command': 'app.gotoAnything.groups.commands',
                               }
-                              return t(typeMap[type] || `${type}s`)
+                              return t((typeMap[type] || `${type}s`) as any)
                             })()}
                             className="p-2 capitalize text-text-secondary"
                           >
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index d1f64f0d59..f691044bd3 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import type { ApiBasedExtension } from '@/models/common'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx
index d139ab39df..2766dc016c 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSourceNotion as TDataSourceNotion } from '@/models/common'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
index b98dd7933d..c57ef96bf9 100644
--- a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/header/account-setting/key-validator/hooks.ts b/web/app/components/header/account-setting/key-validator/hooks.ts
index eeb7b63955..4d4cf8d8a4 100644
--- a/web/app/components/header/account-setting/key-validator/hooks.ts
+++ b/web/app/components/header/account-setting/key-validator/hooks.ts
@@ -1,4 +1,4 @@
-import type { DebouncedFunc } from 'lodash-es'
+import type { DebouncedFunc } from 'es-toolkit/compat'
 import type { ValidateCallback, ValidatedStatusState, ValidateValue } from './declarations'
 import { useDebounceFn } from 'ahooks'
 import { useState } from 'react'
diff --git a/web/app/components/header/account-setting/language-page/index.tsx b/web/app/components/header/account-setting/language-page/index.tsx
index 00db4dbbaf..0568cb1ec9 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/language-page/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { Item } from '@/app/components/base/select'
+import type { Locale } from '@/i18n-config'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -32,7 +33,7 @@ export default function LanguagePage() {
       await updateUserProfile({ url, body: { [bodyKey]: item.value } })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
 
-      setLocaleOnClient(item.value.toString())
+      setLocaleOnClient(item.value.toString() as Locale)
     }
     catch (e) {
       notify({ type: 'error', message: (e as Error).message })
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index 7d609dba68..31f3fc0afe 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 9b80cd343d..93d88fc4ea 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -2,7 +2,7 @@
 import type { InvitationResult } from '@/models/common'
 import { RiCloseLine, RiErrorWarningFill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactMultiEmail } from 'react-multi-email'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
index 7d8169e4c4..07f89df24d 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -36,7 +36,7 @@ const RoleSelector = ({ value, onChange }: RoleSelectorProps) => {
           className="block"
         >
           <div className={cn('flex cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-3 py-2 hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
-            <div className="mr-2 grow text-sm leading-5 text-text-primary">{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}`) })}</div>
+            <div className="mr-2 grow text-sm leading-5 text-text-primary">{t('common.members.invitedAsRole', { role: t(`common.members.${toHump(value)}` as any) })}</div>
             <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-secondary" />
           </div>
         </PortalToFollowElemTrigger>
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
index 5fb6c410c4..829eb364a4 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -2,7 +2,7 @@ import type { InvitationResult } from '@/models/common'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import { RiQuestionLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/header/account-setting/members-page/operation/index.spec.tsx b/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
new file mode 100644
index 0000000000..fbe3959a0f
--- /dev/null
+++ b/web/app/components/header/account-setting/members-page/operation/index.spec.tsx
@@ -0,0 +1,91 @@
+import type { Member } from '@/models/common'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import { ToastContext } from '@/app/components/base/toast'
+import Operation from './index'
+
+const mockUpdateMemberRole = vi.fn()
+const mockDeleteMemberOrCancelInvitation = vi.fn()
+
+vi.mock('@/service/common', () => ({
+  deleteMemberOrCancelInvitation: () => mockDeleteMemberOrCancelInvitation(),
+  updateMemberRole: () => mockUpdateMemberRole(),
+}))
+
+const mockUseProviderContext = vi.fn(() => ({
+  datasetOperatorEnabled: false,
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockUseProviderContext(),
+}))
+
+const defaultMember: Member = {
+  id: 'member-id',
+  name: 'Test Member',
+  email: 'test@example.com',
+  avatar: '',
+  avatar_url: null,
+  status: 'active',
+  role: 'editor',
+  last_login_at: '',
+  last_active_at: '',
+  created_at: '',
+}
+
+const renderOperation = (propsOverride: Partial<Member> = {}, operatorRole = 'owner', onOperate?: () => void) => {
+  const mergedMember = { ...defaultMember, ...propsOverride }
+  return render(
+    <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() }}>
+      <Operation member={mergedMember} operatorRole={operatorRole} onOperate={onOperate ?? vi.fn()} />
+    </ToastContext.Provider>,
+  )
+}
+
+describe('Operation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseProviderContext.mockReturnValue({ datasetOperatorEnabled: false })
+  })
+
+  it('renders the current role label', () => {
+    renderOperation()
+
+    expect(screen.getByText('common.members.editor')).toBeInTheDocument()
+  })
+
+  it('shows dataset operator option when the feature flag is enabled', async () => {
+    mockUseProviderContext.mockReturnValue({ datasetOperatorEnabled: true })
+    renderOperation()
+
+    fireEvent.click(screen.getByText('common.members.editor'))
+
+    expect(await screen.findByText('common.members.datasetOperator')).toBeInTheDocument()
+  })
+
+  it('calls updateMemberRole and onOperate when selecting another role', async () => {
+    const onOperate = vi.fn()
+    renderOperation({}, 'owner', onOperate)
+
+    fireEvent.click(screen.getByText('common.members.editor'))
+    fireEvent.click(await screen.findByText('common.members.normal'))
+
+    await waitFor(() => {
+      expect(mockUpdateMemberRole).toHaveBeenCalled()
+      expect(onOperate).toHaveBeenCalled()
+    })
+  })
+
+  it('calls deleteMemberOrCancelInvitation when removing the member', async () => {
+    const onOperate = vi.fn()
+    renderOperation({}, 'owner', onOperate)
+
+    fireEvent.click(screen.getByText('common.members.editor'))
+    fireEvent.click(await screen.findByText('common.members.removeFromTeam'))
+
+    await waitFor(() => {
+      expect(mockDeleteMemberOrCancelInvitation).toHaveBeenCalled()
+      expect(onOperate).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index 2b3c9e350a..6effe8b058 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -1,10 +1,14 @@
 'use client'
 import type { Member } from '@/models/common'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
-import { Fragment, useMemo } from 'react'
+import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
 import { ToastContext } from '@/app/components/base/toast'
 import { useProviderContext } from '@/context/provider-context'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
@@ -21,6 +25,7 @@ const Operation = ({
   operatorRole,
   onOperate,
 }: IOperationProps) => {
+  const [open, setOpen] = useState(false)
   const { t } = useTranslation()
   const { datasetOperatorEnabled } = useProviderContext()
   const RoleMap = {
@@ -51,6 +56,7 @@ const Operation = ({
   const { notify } = useContext(ToastContext)
   const toHump = (name: string) => name.replace(/_(\w)/g, (all, letter) => letter.toUpperCase())
   const handleDeleteMemberOrCancelInvitation = async () => {
+    setOpen(false)
     try {
       await deleteMemberOrCancelInvitation({ url: `/workspaces/current/members/${member.id}` })
       onOperate()
@@ -61,6 +67,7 @@ const Operation = ({
     }
   }
   const handleUpdateMemberRole = async (role: string) => {
+    setOpen(false)
     try {
       await updateMemberRole({
         url: `/workspaces/current/members/${member.id}/update-role`,
@@ -75,63 +82,50 @@ const Operation = ({
   }
 
   return (
-    <Menu as="div" className="relative h-full w-full">
-      {
-        ({ open }) => (
-          <>
-            <MenuButton className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
-              {RoleMap[member.role] || RoleMap.normal}
-              <ChevronDownIcon className={cn('h-4 w-4 group-hover:block', open ? 'block' : 'hidden')} />
-            </MenuButton>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <MenuItems
-                className={cn('absolute right-0 top-[52px] z-10 origin-top-right rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm')}
-              >
-                <div className="p-1">
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement="bottom-end"
+      offset={{ mainAxis: 4 }}
+    >
+      <PortalToFollowElemTrigger asChild onClick={() => setOpen(prev => !prev)}>
+        <div className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+          {RoleMap[member.role] || RoleMap.normal}
+          <ChevronDownIcon className={cn('h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-[999]">
+        <div className={cn('inline-flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm')}>
+          <div className="p-1">
+            {
+              roleList.map(role => (
+                <div key={role} className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
                   {
-                    roleList.map(role => (
-                      <MenuItem key={role}>
-                        <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
-                          {
-                            role === member.role
-                              ? <CheckIcon className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
-                              : <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
-                          }
-                          <div>
-                            <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(`common.members.${toHump(role)}`)}</div>
-                            <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(`common.members.${toHump(role)}Tip`)}</div>
-                          </div>
-                        </div>
-                      </MenuItem>
-                    ))
+                    role === member.role
+                      ? <CheckIcon className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
+                      : <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
                   }
-                </div>
-                <MenuItem>
-                  <div className="border-t border-divider-subtle p-1">
-                    <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
-                      <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
-                      <div>
-                        <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('common.members.removeFromTeam')}</div>
-                        <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('common.members.removeFromTeamTip')}</div>
-                      </div>
-                    </div>
+                  <div>
+                    <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(`common.members.${toHump(role)}` as any)}</div>
+                    <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(`common.members.${toHump(role)}Tip` as any)}</div>
                   </div>
-                </MenuItem>
-              </MenuItems>
-            </Transition>
-          </>
-        )
-      }
-    </Menu>
+                </div>
+              ))
+            }
+          </div>
+          <div className="border-t border-divider-subtle p-1">
+            <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
+              <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
+              <div>
+                <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('common.members.removeFromTeam')}</div>
+                <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('common.members.removeFromTeamTip')}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 
-export default Operation
+export default memo(Operation)
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index 2c6a33dc1f..323e8f300c 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -1,5 +1,5 @@
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index 0b2d2208cd..cc5adbc18f 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { Fragment, useCallback, useEffect } from 'react'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
index d53467028c..9e8637ce49 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -44,7 +44,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
       text: (
         <div className="flex h-full items-center">
           {getToneIcon(tone.id)}
-          {t(`common.model.tone.${tone.name}`) as string}
+          {t(`common.model.tone.${tone.name}` as any) as string}
         </div>
       ),
     }
diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index ab567540d4..34d192de41 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -5,8 +5,8 @@ import {
   RiRobot2Fill,
   RiRobot2Line,
 } from '@remixicon/react'
+import { flatten } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { flatten } from 'lodash-es'
 import { useParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/header/app-selector/index.tsx b/web/app/components/header/app-selector/index.tsx
index c15ed3e79c..a9aab59356 100644
--- a/web/app/components/header/app-selector/index.tsx
+++ b/web/app/components/header/app-selector/index.tsx
@@ -2,7 +2,7 @@
 import type { AppDetailResponse } from '@/models/app'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index e1943a4ec2..4cdc259d67 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -6,7 +6,7 @@ import {
   RiBook2Fill,
   RiBook2Line,
 } from '@remixicon/react'
-import { flatten } from 'lodash-es'
+import { flatten } from 'es-toolkit/compat'
 import { useParams, useRouter } from 'next/navigation'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 905597f021..c12be7e035 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -6,7 +6,7 @@ import {
   RiArrowDownSLine,
   RiArrowRightSLine,
 } from '@remixicon/react'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import { Fragment, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index 8832c77961..efdd903883 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { RiAlertFill } from '@remixicon/react'
-import { camelCase } from 'lodash-es'
+import { camelCase } from 'es-toolkit/compat'
 import Link from 'next/link'
 import * as React from 'react'
 import { useMemo } from 'react'
@@ -82,7 +82,7 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
                   ),
                 }}
                 values={{
-                  deprecatedReason: t(`${i18nPrefix}.reason.${deprecatedReasonKey}`),
+                  deprecatedReason: t(`${i18nPrefix}.reason.${deprecatedReasonKey}` as any) as string,
                   alternativePluginId,
                 }}
               />
@@ -91,7 +91,7 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
           {
             hasValidDeprecatedReason && !alternativePluginId && (
               <span>
-                {t(`${i18nPrefix}.onlyReason`, { deprecatedReason: t(`${i18nPrefix}.reason.${deprecatedReasonKey}`) })}
+                {t(`${i18nPrefix}.onlyReason` as any, { deprecatedReason: t(`${i18nPrefix}.reason.${deprecatedReasonKey}` as any) as string }) as string}
               </span>
             )
           }
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index 1cb15bf70b..f063a8d572 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -1,11 +1,14 @@
 'use client'
 import type { Plugin } from '../types'
+import type { Locale } from '@/i18n-config'
 import { RiAlertFill } from '@remixicon/react'
 import * as React from 'react'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { useGetLanguage } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
-import { renderI18nObject } from '@/i18n-config'
+import {
+  renderI18nObject,
+} from '@/i18n-config'
 import { getLanguage } from '@/i18n-config/language'
 import { Theme } from '@/types/app'
 import { cn } from '@/utils/classnames'
@@ -30,7 +33,7 @@ export type Props = {
   footer?: React.ReactNode
   isLoading?: boolean
   loadingFileName?: string
-  locale?: string
+  locale?: Locale
   limitedInstall?: boolean
 }
 
diff --git a/web/app/components/plugins/hooks.ts b/web/app/components/plugins/hooks.ts
index 8303a4cc46..423ce1023c 100644
--- a/web/app/components/plugins/hooks.ts
+++ b/web/app/components/plugins/hooks.ts
@@ -20,7 +20,7 @@ export const useTags = (translateFromOut?: TFunction) => {
     return tagKeys.map((tag) => {
       return {
         name: tag,
-        label: t(`pluginTags.tags.${tag}`),
+        label: t(`pluginTags.tags.${tag}` as any) as string,
       }
     })
   }, [t])
@@ -66,14 +66,14 @@ export const useCategories = (translateFromOut?: TFunction, isSingle?: boolean)
       }
       return {
         name: category,
-        label: isSingle ? t(`plugin.categorySingle.${category}`) : t(`plugin.category.${category}s`),
+        label: isSingle ? t(`plugin.categorySingle.${category}` as any) as string : t(`plugin.category.${category}s` as any) as string,
       }
     })
   }, [t, isSingle])
 
   const categoriesMap = useMemo(() => {
     return categories.reduce((acc, category) => {
-      acc[category.name] = category
+      acc[category.name] = category as any
       return acc
     }, {} as Record<string, Category>)
   }, [categories])
diff --git a/web/app/components/plugins/install-plugin/utils.ts b/web/app/components/plugins/install-plugin/utils.ts
index 32d3e54225..549bdc6241 100644
--- a/web/app/components/plugins/install-plugin/utils.ts
+++ b/web/app/components/plugins/install-plugin/utils.ts
@@ -1,6 +1,6 @@
 import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../types'
 import type { GitHubUrlInfo } from '@/app/components/plugins/types'
-import { isEmpty } from 'lodash-es'
+import { isEmpty } from 'es-toolkit/compat'
 
 export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaration): Plugin => {
   return {
diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx
index ec76d3440f..4053c4a556 100644
--- a/web/app/components/plugins/marketplace/context.tsx
+++ b/web/app/components/plugins/marketplace/context.tsx
@@ -10,7 +10,7 @@ import type {
   SearchParams,
   SearchParamsFromCollection,
 } from './types'
-import { debounce, noop } from 'lodash-es'
+import { debounce, noop } from 'es-toolkit/compat'
 import {
   useCallback,
   useEffect,
diff --git a/web/app/components/plugins/marketplace/description/index.tsx b/web/app/components/plugins/marketplace/description/index.tsx
index 5b1ac6bb09..66a6368c08 100644
--- a/web/app/components/plugins/marketplace/description/index.tsx
+++ b/web/app/components/plugins/marketplace/description/index.tsx
@@ -1,10 +1,11 @@
+import type { Locale } from '@/i18n-config'
 import {
   getLocaleOnServer,
-  useTranslation as translate,
+  getTranslation as translate,
 } from '@/i18n-config/server'
 
 type DescriptionProps = {
-  locale?: string
+  locale?: Locale
 }
 const Description = async ({
   locale: localeFromProps,
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 47acb840e4..ff9a4d60bc 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,5 +1,6 @@
 import type { MarketplaceCollection, SearchParams } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
+import type { Locale } from '@/i18n-config'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { MarketplaceContextProvider } from './context'
 import Description from './description'
@@ -8,7 +9,7 @@ import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
 import { getMarketplaceCollectionsAndPlugins } from './utils'
 
 type MarketplaceProps = {
-  locale: string
+  locale: Locale
   showInstallButton?: boolean
   shouldExclude?: boolean
   searchParams?: SearchParams
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 159107eb97..ddc505b0d8 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { Plugin } from '@/app/components/plugins/types'
+import type { Locale } from '@/i18n-config'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useTheme } from 'next-themes'
@@ -17,7 +18,7 @@ import { getPluginDetailLinkInMarketplace, getPluginLinkInMarketplace } from '..
 type CardWrapperProps = {
   plugin: Plugin
   showInstallButton?: boolean
-  locale?: string
+  locale?: Locale
 }
 const CardWrapperComponent = ({
   plugin,
diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx
index 95f7cb37a8..54889b232f 100644
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { Plugin } from '../../types'
 import type { MarketplaceCollection } from '../types'
+import type { Locale } from '@/i18n-config'
 import { cn } from '@/utils/classnames'
 import Empty from '../empty'
 import CardWrapper from './card-wrapper'
@@ -11,7 +12,7 @@ type ListProps = {
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   plugins?: Plugin[]
   showInstallButton?: boolean
-  locale: string
+  locale: Locale
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
   onMoreClick?: () => void
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
index c401fbe3b9..2d246efb82 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -3,6 +3,7 @@
 import type { MarketplaceCollection } from '../types'
 import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import type { Plugin } from '@/app/components/plugins/types'
+import type { Locale } from '@/i18n-config'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { getLanguage } from '@/i18n-config/language'
@@ -13,7 +14,7 @@ type ListWithCollectionProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
-  locale: string
+  locale: Locale
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
   onMoreClick?: (searchParams?: SearchParamsFromCollection) => void
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index f2fbd085f0..650c8a7447 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { Plugin } from '../../types'
 import type { MarketplaceCollection } from '../types'
+import type { Locale } from '@/i18n-config'
 import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
@@ -12,7 +13,7 @@ type ListWrapperProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
-  locale: string
+  locale: Locale
 }
 const ListWrapper = ({
   marketplaceCollections,
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 142c781579..dee6ab1722 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -46,7 +46,7 @@ const PluginDetailPanel: FC<Props> = ({
           name: detail.name,
           id: detail.id,
         })
-  }, [detail])
+  }, [detail, setDetail])
 
   if (!detail)
     return null
@@ -69,7 +69,7 @@ const PluginDetailPanel: FC<Props> = ({
               <div className="flex-1">
                 {detail.declaration.category === PluginCategoryEnum.trigger && (
                   <>
-                    <SubscriptionList />
+                    <SubscriptionList pluginDetail={detail} />
                     <TriggerEventsList />
                   </>
                 )}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
index 16a789e67b..d0326f6b43 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
@@ -3,7 +3,7 @@ import type { FormRefObject } from '@/app/components/base/form/types'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import type { BuildTriggerSubscriptionPayload } from '@/service/use-triggers'
 import { RiLoader2Line } from '@remixicon/react'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,7 +20,7 @@ import {
   useCreateTriggerSubscriptionBuilder,
   useTriggerSubscriptionBuilderLogs,
   useUpdateTriggerSubscriptionBuilder,
-  useVerifyTriggerSubscriptionBuilder,
+  useVerifyAndUpdateTriggerSubscriptionBuilder,
 } from '@/service/use-triggers'
 import { parsePluginErrorMessage } from '@/utils/error-parser'
 import { isPrivateOrLocalAddress } from '@/utils/urlValidation'
@@ -40,6 +40,15 @@ const CREDENTIAL_TYPE_MAP: Record<SupportedCreationMethods, TriggerCredentialTyp
   [SupportedCreationMethods.MANUAL]: TriggerCredentialTypeEnum.Unauthorized,
 }
 
+const MODAL_TITLE_KEY_MAP: Record<
+  SupportedCreationMethods,
+  'pluginTrigger.modal.apiKey.title' | 'pluginTrigger.modal.oauth.title' | 'pluginTrigger.modal.manual.title'
+> = {
+  [SupportedCreationMethods.APIKEY]: 'pluginTrigger.modal.apiKey.title',
+  [SupportedCreationMethods.OAUTH]: 'pluginTrigger.modal.oauth.title',
+  [SupportedCreationMethods.MANUAL]: 'pluginTrigger.modal.manual.title',
+}
+
 enum ApiKeyStep {
   Verify = 'verify',
   Configuration = 'configuration',
@@ -104,7 +113,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
   const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>(builder)
   const isInitializedRef = useRef(false)
 
-  const { mutate: verifyCredentials, isPending: isVerifyingCredentials } = useVerifyTriggerSubscriptionBuilder()
+  const { mutate: verifyCredentials, isPending: isVerifyingCredentials } = useVerifyAndUpdateTriggerSubscriptionBuilder()
   const { mutateAsync: createBuilder /* isPending: isCreatingBuilder */ } = useCreateTriggerSubscriptionBuilder()
   const { mutate: buildSubscription, isPending: isBuilding } = useBuildTriggerSubscription()
   const { mutate: updateBuilder } = useUpdateTriggerSubscriptionBuilder()
@@ -117,13 +126,13 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
   const autoCommonParametersSchema = detail?.declaration.trigger?.subscription_constructor?.parameters || [] // apikey and oauth
   const autoCommonParametersFormRef = React.useRef<FormRefObject>(null)
 
-  const rawApiKeyCredentialsSchema = detail?.declaration.trigger?.subscription_constructor?.credentials_schema || []
   const apiKeyCredentialsSchema = useMemo(() => {
-    return rawApiKeyCredentialsSchema.map(schema => ({
+    const rawSchema = detail?.declaration?.trigger?.subscription_constructor?.credentials_schema || []
+    return rawSchema.map(schema => ({
       ...schema,
       tooltip: schema.help,
     }))
-  }, [rawApiKeyCredentialsSchema])
+  }, [detail?.declaration?.trigger?.subscription_constructor?.credentials_schema])
   const apiKeyCredentialsFormRef = React.useRef<FormRefObject>(null)
 
   const { data: logData } = useTriggerSubscriptionBuilderLogs(
@@ -163,7 +172,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
       if (form)
         form.setFieldValue('callback_url', subscriptionBuilder.endpoint)
       if (isPrivateOrLocalAddress(subscriptionBuilder.endpoint)) {
-        console.log('isPrivateOrLocalAddress', isPrivateOrLocalAddress(subscriptionBuilder.endpoint))
+        console.warn('callback_url is private or local address', subscriptionBuilder.endpoint)
         subscriptionFormRef.current?.setFields([{
           name: 'callback_url',
           warnings: [t('pluginTrigger.modal.form.callbackUrl.privateAddressWarning')],
@@ -179,7 +188,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
   }, [subscriptionBuilder?.endpoint, currentStep, t])
 
   const debouncedUpdate = useMemo(
-    () => debounce((provider: string, builderId: string, properties: Record<string, any>) => {
+    () => debounce((provider: string, builderId: string, properties: Record<string, unknown>) => {
       updateBuilder(
         {
           provider,
@@ -187,11 +196,12 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
           properties,
         },
         {
-          onError: (error: any) => {
+          onError: async (error: unknown) => {
+            const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.modal.errors.updateFailed')
             console.error('Failed to update subscription builder:', error)
             Toast.notify({
               type: 'error',
-              message: error?.message || t('pluginTrigger.modal.errors.updateFailed'),
+              message: errorMessage,
             })
           },
         },
@@ -246,7 +256,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
           })
           setCurrentStep(ApiKeyStep.Configuration)
         },
-        onError: async (error: any) => {
+        onError: async (error: unknown) => {
           const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.modal.apiKey.verify.error')
           apiKeyCredentialsFormRef.current?.setFields([{
             name: Object.keys(credentials)[0],
@@ -303,7 +313,7 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
           onClose()
           refetch?.()
         },
-        onError: async (error: any) => {
+        onError: async (error: unknown) => {
           const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.subscription.createFailed')
           Toast.notify({
             type: 'error',
@@ -328,14 +338,17 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
     }])
   }
 
+  const confirmButtonText = useMemo(() => {
+    if (currentStep === ApiKeyStep.Verify)
+      return isVerifyingCredentials ? t('pluginTrigger.modal.common.verifying') : t('pluginTrigger.modal.common.verify')
+
+    return isBuilding ? t('pluginTrigger.modal.common.creating') : t('pluginTrigger.modal.common.create')
+  }, [currentStep, isVerifyingCredentials, isBuilding, t])
+
   return (
     <Modal
-      title={t(`pluginTrigger.modal.${createType === SupportedCreationMethods.APIKEY ? 'apiKey' : createType.toLowerCase()}.title`)}
-      confirmButtonText={
-        currentStep === ApiKeyStep.Verify
-          ? isVerifyingCredentials ? t('pluginTrigger.modal.common.verifying') : t('pluginTrigger.modal.common.verify')
-          : isBuilding ? t('pluginTrigger.modal.common.creating') : t('pluginTrigger.modal.common.create')
-      }
+      title={t(MODAL_TITLE_KEY_MAP[createType])}
+      confirmButtonText={confirmButtonText}
       onClose={onClose}
       onCancel={onClose}
       onConfirm={handleConfirm}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index 39a5a99a46..5d5df968d1 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -208,7 +208,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
               )
             : (
                 <Tooltip
-                  popupContent={subscriptionCount >= MAX_COUNT ? t('pluginTrigger.subscription.maxCount', { num: MAX_COUNT }) : t(`pluginTrigger.subscription.addType.options.${methodType.toLowerCase()}.description`)}
+                  popupContent={subscriptionCount >= MAX_COUNT ? t('pluginTrigger.subscription.maxCount', { num: MAX_COUNT }) : t(`pluginTrigger.subscription.addType.options.${methodType.toLowerCase()}.description` as any)}
                   disabled={!(supportedMethods?.length === 1 || subscriptionCount >= MAX_COUNT)}
                 >
                   <ActionButton
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
index 6c1094559e..ff8a0d95af 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -19,7 +19,7 @@ import {
   useConfigureTriggerOAuth,
   useDeleteTriggerOAuth,
   useInitiateTriggerOAuth,
-  useVerifyTriggerSubscriptionBuilder,
+  useVerifyAndUpdateTriggerSubscriptionBuilder,
 } from '@/service/use-triggers'
 import { usePluginStore } from '../../store'
 
@@ -65,10 +65,29 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
 
   const providerName = detail?.provider || ''
   const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
-  const { mutate: verifyBuilder } = useVerifyTriggerSubscriptionBuilder()
+  const { mutate: verifyBuilder } = useVerifyAndUpdateTriggerSubscriptionBuilder()
   const { mutate: configureOAuth } = useConfigureTriggerOAuth()
   const { mutate: deleteOAuth } = useDeleteTriggerOAuth()
 
+  const confirmButtonText = useMemo(() => {
+    if (authorizationStatus === AuthorizationStatusEnum.Pending)
+      return t('pluginTrigger.modal.common.authorizing')
+    if (authorizationStatus === AuthorizationStatusEnum.Success)
+      return t('pluginTrigger.modal.oauth.authorization.waitingJump')
+    return t('plugin.auth.saveAndAuth')
+  }, [authorizationStatus, t])
+
+  const getErrorMessage = (error: unknown, fallback: string) => {
+    if (error instanceof Error && error.message)
+      return error.message
+    if (typeof error === 'object' && error && 'message' in error) {
+      const message = (error as { message?: string }).message
+      if (typeof message === 'string' && message)
+        return message
+    }
+    return fallback
+  }
+
   const handleAuthorization = () => {
     setAuthorizationStatus(AuthorizationStatusEnum.Pending)
     initiateOAuth(providerName, {
@@ -130,10 +149,10 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
           message: t('pluginTrigger.modal.oauth.remove.success'),
         })
       },
-      onError: (error: any) => {
+      onError: (error: unknown) => {
         Toast.notify({
           type: 'error',
-          message: error?.message || t('pluginTrigger.modal.oauth.remove.failed'),
+          message: getErrorMessage(error, t('pluginTrigger.modal.oauth.remove.failed')),
         })
       },
     })
@@ -179,9 +198,7 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
   return (
     <Modal
       title={t('pluginTrigger.modal.oauth.title')}
-      confirmButtonText={authorizationStatus === AuthorizationStatusEnum.Pending
-        ? t('pluginTrigger.modal.common.authorizing')
-        : authorizationStatus === AuthorizationStatusEnum.Success ? t('pluginTrigger.modal.oauth.authorization.waitingJump') : t('plugin.auth.saveAndAuth')}
+      confirmButtonText={confirmButtonText}
       cancelButtonText={t('plugin.auth.saveOnly')}
       extraButtonText={t('common.operation.cancel')}
       showExtraButton
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
new file mode 100644
index 0000000000..539544f435
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
@@ -0,0 +1,349 @@
+'use client'
+import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
+import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
+import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { isEqual } from 'es-toolkit/compat'
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
+import { BaseForm } from '@/app/components/base/form/components/base'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import Modal from '@/app/components/base/modal/modal'
+import Toast from '@/app/components/base/toast'
+import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
+import { useUpdateTriggerSubscription, useVerifyTriggerSubscription } from '@/service/use-triggers'
+import { parsePluginErrorMessage } from '@/utils/error-parser'
+import { ReadmeShowType } from '../../../readme-panel/store'
+import { usePluginStore } from '../../store'
+import { useSubscriptionList } from '../use-subscription-list'
+
+type Props = {
+  onClose: () => void
+  subscription: TriggerSubscription
+  pluginDetail?: PluginDetail
+}
+
+enum EditStep {
+  EditCredentials = 'edit_credentials',
+  EditConfiguration = 'edit_configuration',
+}
+
+const normalizeFormType = (type: string): FormTypeEnum => {
+  switch (type) {
+    case 'string':
+    case 'text':
+      return FormTypeEnum.textInput
+    case 'password':
+    case 'secret':
+      return FormTypeEnum.secretInput
+    case 'number':
+    case 'integer':
+      return FormTypeEnum.textNumber
+    case 'boolean':
+      return FormTypeEnum.boolean
+    case 'select':
+      return FormTypeEnum.select
+    default:
+      if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
+        return type as FormTypeEnum
+      return FormTypeEnum.textInput
+  }
+}
+
+const HIDDEN_SECRET_VALUE = '[__HIDDEN__]'
+
+// Check if all credential values are hidden (meaning nothing was changed)
+const areAllCredentialsHidden = (credentials: Record<string, unknown>): boolean => {
+  return Object.values(credentials).every(value => value === HIDDEN_SECRET_VALUE)
+}
+
+const StatusStep = ({ isActive, text, onClick, clickable }: {
+  isActive: boolean
+  text: string
+  onClick?: () => void
+  clickable?: boolean
+}) => {
+  return (
+    <div
+      className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
+        ? 'text-state-accent-solid'
+        : 'text-text-tertiary'} ${clickable ? 'cursor-pointer hover:text-text-secondary' : ''}`}
+      onClick={clickable ? onClick : undefined}
+    >
+      {isActive && (
+        <div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
+      )}
+      {text}
+    </div>
+  )
+}
+
+const MultiSteps = ({ currentStep, onStepClick }: { currentStep: EditStep, onStepClick?: (step: EditStep) => void }) => {
+  const { t } = useTranslation()
+  return (
+    <div className="mb-6 flex w-1/3 items-center gap-2">
+      <StatusStep
+        isActive={currentStep === EditStep.EditCredentials}
+        text={t('pluginTrigger.modal.steps.verify')}
+        onClick={() => onStepClick?.(EditStep.EditCredentials)}
+        clickable={currentStep === EditStep.EditConfiguration}
+      />
+      <div className="h-px w-3 shrink-0 bg-divider-deep"></div>
+      <StatusStep
+        isActive={currentStep === EditStep.EditConfiguration}
+        text={t('pluginTrigger.modal.steps.configuration')}
+      />
+    </div>
+  )
+}
+
+export const ApiKeyEditModal = ({ onClose, subscription, pluginDetail }: Props) => {
+  const { t } = useTranslation()
+  const detail = usePluginStore(state => state.detail)
+  const { refetch } = useSubscriptionList()
+
+  const [currentStep, setCurrentStep] = useState<EditStep>(EditStep.EditCredentials)
+  const [verifiedCredentials, setVerifiedCredentials] = useState<Record<string, unknown> | null>(null)
+
+  const { mutate: updateSubscription, isPending: isUpdating } = useUpdateTriggerSubscription()
+  const { mutate: verifyCredentials, isPending: isVerifying } = useVerifyTriggerSubscription()
+
+  const parametersSchema = useMemo<ParametersSchema[]>(
+    () => detail?.declaration?.trigger?.subscription_constructor?.parameters || [],
+    [detail?.declaration?.trigger?.subscription_constructor?.parameters],
+  )
+
+  const apiKeyCredentialsSchema = useMemo(() => {
+    const rawSchema = detail?.declaration?.trigger?.subscription_constructor?.credentials_schema || []
+    return rawSchema.map(schema => ({
+      ...schema,
+      tooltip: schema.help,
+    }))
+  }, [detail?.declaration?.trigger?.subscription_constructor?.credentials_schema])
+
+  const basicFormRef = useRef<FormRefObject>(null)
+  const parametersFormRef = useRef<FormRefObject>(null)
+  const credentialsFormRef = useRef<FormRefObject>(null)
+
+  const handleVerifyCredentials = () => {
+    const credentialsFormValues = credentialsFormRef.current?.getFormValues({
+      needTransformWhenSecretFieldIsPristine: true,
+    }) || { values: {}, isCheckValidated: false }
+
+    if (!credentialsFormValues.isCheckValidated)
+      return
+
+    const credentials = credentialsFormValues.values
+
+    verifyCredentials(
+      {
+        provider: subscription.provider,
+        subscriptionId: subscription.id,
+        credentials,
+      },
+      {
+        onSuccess: () => {
+          Toast.notify({
+            type: 'success',
+            message: t('pluginTrigger.modal.apiKey.verify.success'),
+          })
+          // Only save credentials if any field was modified (not all hidden)
+          setVerifiedCredentials(areAllCredentialsHidden(credentials) ? null : credentials)
+          setCurrentStep(EditStep.EditConfiguration)
+        },
+        onError: async (error: unknown) => {
+          const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.modal.apiKey.verify.error')
+          Toast.notify({
+            type: 'error',
+            message: errorMessage,
+          })
+        },
+      },
+    )
+  }
+
+  const handleUpdate = () => {
+    const basicFormValues = basicFormRef.current?.getFormValues({})
+    if (!basicFormValues?.isCheckValidated)
+      return
+
+    const name = basicFormValues.values.subscription_name as string
+
+    let parameters: Record<string, unknown> | undefined
+
+    if (parametersSchema.length > 0) {
+      const paramsFormValues = parametersFormRef.current?.getFormValues({
+        needTransformWhenSecretFieldIsPristine: true,
+      })
+      if (!paramsFormValues?.isCheckValidated)
+        return
+
+      // Only send parameters if changed
+      const hasChanged = !isEqual(paramsFormValues.values, subscription.parameters || {})
+      parameters = hasChanged ? paramsFormValues.values : undefined
+    }
+
+    updateSubscription(
+      {
+        subscriptionId: subscription.id,
+        name,
+        parameters,
+        credentials: verifiedCredentials || undefined,
+      },
+      {
+        onSuccess: () => {
+          Toast.notify({
+            type: 'success',
+            message: t('pluginTrigger.subscription.list.item.actions.edit.success'),
+          })
+          refetch?.()
+          onClose()
+        },
+        onError: async (error: unknown) => {
+          const errorMessage = await parsePluginErrorMessage(error) || t('pluginTrigger.subscription.list.item.actions.edit.error')
+          Toast.notify({
+            type: 'error',
+            message: errorMessage,
+          })
+        },
+      },
+    )
+  }
+
+  const handleConfirm = () => {
+    if (currentStep === EditStep.EditCredentials)
+      handleVerifyCredentials()
+    else
+      handleUpdate()
+  }
+
+  const basicFormSchemas: FormSchema[] = useMemo(() => [
+    {
+      name: 'subscription_name',
+      label: t('pluginTrigger.modal.form.subscriptionName.label'),
+      placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
+      type: FormTypeEnum.textInput,
+      required: true,
+      default: subscription.name,
+    },
+    {
+      name: 'callback_url',
+      label: t('pluginTrigger.modal.form.callbackUrl.label'),
+      placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
+      type: FormTypeEnum.textInput,
+      required: false,
+      default: subscription.endpoint || '',
+      disabled: true,
+      tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
+      showCopy: true,
+    },
+  ], [t, subscription.name, subscription.endpoint])
+
+  const credentialsFormSchemas: FormSchema[] = useMemo(() => {
+    return apiKeyCredentialsSchema.map(schema => ({
+      ...schema,
+      type: normalizeFormType(schema.type as string),
+      tooltip: schema.help,
+      default: subscription.credentials?.[schema.name] || schema.default,
+    }))
+  }, [apiKeyCredentialsSchema, subscription.credentials])
+
+  const parametersFormSchemas: FormSchema[] = useMemo(() => {
+    return parametersSchema.map((schema: ParametersSchema) => {
+      const normalizedType = normalizeFormType(schema.type as string)
+      return {
+        ...schema,
+        type: normalizedType,
+        tooltip: schema.description,
+        default: subscription.parameters?.[schema.name] || schema.default,
+        dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect
+          ? {
+              plugin_id: detail?.plugin_id || '',
+              provider: detail?.provider || '',
+              action: 'provider',
+              parameter: schema.name,
+              credential_id: subscription.id,
+              credentials: verifiedCredentials || undefined,
+            }
+          : undefined,
+        fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
+        labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
+      }
+    })
+  }, [parametersSchema, subscription.parameters, subscription.id, detail?.plugin_id, detail?.provider, verifiedCredentials])
+
+  const getConfirmButtonText = () => {
+    if (currentStep === EditStep.EditCredentials)
+      return isVerifying ? t('pluginTrigger.modal.common.verifying') : t('pluginTrigger.modal.common.verify')
+
+    return isUpdating ? t('common.operation.saving') : t('common.operation.save')
+  }
+
+  const handleBack = () => {
+    setCurrentStep(EditStep.EditCredentials)
+    setVerifiedCredentials(null)
+  }
+
+  return (
+    <Modal
+      title={t('pluginTrigger.subscription.list.item.actions.edit.title')}
+      confirmButtonText={getConfirmButtonText()}
+      onClose={onClose}
+      onCancel={onClose}
+      onConfirm={handleConfirm}
+      disabled={isUpdating || isVerifying}
+      showExtraButton={currentStep === EditStep.EditConfiguration}
+      extraButtonText={t('pluginTrigger.modal.common.back')}
+      extraButtonVariant="secondary"
+      onExtraButtonClick={handleBack}
+      clickOutsideNotClose
+      wrapperClassName="!z-[101]"
+      bottomSlot={currentStep === EditStep.EditCredentials ? <EncryptedBottom /> : null}
+    >
+      {pluginDetail && (
+        <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
+      )}
+
+      {/* Multi-step indicator */}
+      <MultiSteps currentStep={currentStep} onStepClick={handleBack} />
+
+      {/* Step 1: Edit Credentials */}
+      {currentStep === EditStep.EditCredentials && (
+        <div className="mb-4">
+          {credentialsFormSchemas.length > 0 && (
+            <BaseForm
+              formSchemas={credentialsFormSchemas}
+              ref={credentialsFormRef}
+              labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+              formClassName="space-y-4"
+              preventDefaultSubmit={true}
+            />
+          )}
+        </div>
+      )}
+
+      {/* Step 2: Edit Configuration */}
+      {currentStep === EditStep.EditConfiguration && (
+        <div className="max-h-[70vh]">
+          {/* Basic form: subscription name and callback URL */}
+          <BaseForm
+            formSchemas={basicFormSchemas}
+            ref={basicFormRef}
+            labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+            formClassName="space-y-4 mb-4"
+          />
+
+          {/* Parameters */}
+          {parametersFormSchemas.length > 0 && (
+            <BaseForm
+              formSchemas={parametersFormSchemas}
+              ref={parametersFormRef}
+              labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+              formClassName="space-y-4"
+            />
+          )}
+        </div>
+      )}
+    </Modal>
+  )
+}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx
new file mode 100644
index 0000000000..90e89d043a
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx
@@ -0,0 +1,28 @@
+'use client'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
+import { ApiKeyEditModal } from './apikey-edit-modal'
+import { ManualEditModal } from './manual-edit-modal'
+import { OAuthEditModal } from './oauth-edit-modal'
+
+type Props = {
+  onClose: () => void
+  subscription: TriggerSubscription
+  pluginDetail?: PluginDetail
+}
+
+export const EditModal = ({ onClose, subscription, pluginDetail }: Props) => {
+  const credentialType = subscription.credential_type
+
+  switch (credentialType) {
+    case TriggerCredentialTypeEnum.Unauthorized:
+      return <ManualEditModal onClose={onClose} subscription={subscription} pluginDetail={pluginDetail} />
+    case TriggerCredentialTypeEnum.Oauth2:
+      return <OAuthEditModal onClose={onClose} subscription={subscription} pluginDetail={pluginDetail} />
+    case TriggerCredentialTypeEnum.ApiKey:
+      return <ApiKeyEditModal onClose={onClose} subscription={subscription} pluginDetail={pluginDetail} />
+    default:
+      return null
+  }
+}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
new file mode 100644
index 0000000000..404766ae43
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
@@ -0,0 +1,164 @@
+'use client'
+import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
+import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
+import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { isEqual } from 'es-toolkit/compat'
+import { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BaseForm } from '@/app/components/base/form/components/base'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import Modal from '@/app/components/base/modal/modal'
+import Toast from '@/app/components/base/toast'
+import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
+import { useUpdateTriggerSubscription } from '@/service/use-triggers'
+import { ReadmeShowType } from '../../../readme-panel/store'
+import { usePluginStore } from '../../store'
+import { useSubscriptionList } from '../use-subscription-list'
+
+type Props = {
+  onClose: () => void
+  subscription: TriggerSubscription
+  pluginDetail?: PluginDetail
+}
+
+const normalizeFormType = (type: string): FormTypeEnum => {
+  switch (type) {
+    case 'string':
+    case 'text':
+      return FormTypeEnum.textInput
+    case 'password':
+    case 'secret':
+      return FormTypeEnum.secretInput
+    case 'number':
+    case 'integer':
+      return FormTypeEnum.textNumber
+    case 'boolean':
+      return FormTypeEnum.boolean
+    case 'select':
+      return FormTypeEnum.select
+    default:
+      if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
+        return type as FormTypeEnum
+      return FormTypeEnum.textInput
+  }
+}
+
+export const ManualEditModal = ({ onClose, subscription, pluginDetail }: Props) => {
+  const { t } = useTranslation()
+  const detail = usePluginStore(state => state.detail)
+  const { refetch } = useSubscriptionList()
+
+  const { mutate: updateSubscription, isPending: isUpdating } = useUpdateTriggerSubscription()
+
+  const getErrorMessage = (error: unknown, fallback: string) => {
+    if (error instanceof Error && error.message)
+      return error.message
+    if (typeof error === 'object' && error && 'message' in error) {
+      const message = (error as { message?: string }).message
+      if (typeof message === 'string' && message)
+        return message
+    }
+    return fallback
+  }
+
+  const propertiesSchema = useMemo<ParametersSchema[]>(
+    () => detail?.declaration?.trigger?.subscription_schema || [],
+    [detail?.declaration?.trigger?.subscription_schema],
+  )
+
+  const formRef = useRef<FormRefObject>(null)
+
+  const handleConfirm = () => {
+    const formValues = formRef.current?.getFormValues({
+      needTransformWhenSecretFieldIsPristine: true,
+    })
+    if (!formValues?.isCheckValidated)
+      return
+
+    const name = formValues.values.subscription_name as string
+
+    // Extract properties (exclude subscription_name and callback_url)
+    const newProperties = { ...formValues.values }
+    delete newProperties.subscription_name
+    delete newProperties.callback_url
+
+    // Only send properties if changed
+    const hasChanged = !isEqual(newProperties, subscription.properties || {})
+    const properties = hasChanged ? newProperties : undefined
+
+    updateSubscription(
+      {
+        subscriptionId: subscription.id,
+        name,
+        properties,
+      },
+      {
+        onSuccess: () => {
+          Toast.notify({
+            type: 'success',
+            message: t('pluginTrigger.subscription.list.item.actions.edit.success'),
+          })
+          refetch?.()
+          onClose()
+        },
+        onError: (error: unknown) => {
+          Toast.notify({
+            type: 'error',
+            message: getErrorMessage(error, t('pluginTrigger.subscription.list.item.actions.edit.error')),
+          })
+        },
+      },
+    )
+  }
+
+  const formSchemas: FormSchema[] = useMemo(() => [
+    {
+      name: 'subscription_name',
+      label: t('pluginTrigger.modal.form.subscriptionName.label'),
+      placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
+      type: FormTypeEnum.textInput,
+      required: true,
+      default: subscription.name,
+    },
+    {
+      name: 'callback_url',
+      label: t('pluginTrigger.modal.form.callbackUrl.label'),
+      placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
+      type: FormTypeEnum.textInput,
+      required: false,
+      default: subscription.endpoint || '',
+      disabled: true,
+      tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
+      showCopy: true,
+    },
+    ...propertiesSchema.map((schema: ParametersSchema) => ({
+      ...schema,
+      type: normalizeFormType(schema.type as string),
+      tooltip: schema.description,
+      default: subscription.properties?.[schema.name] || schema.default,
+    })),
+  ], [t, subscription.name, subscription.endpoint, subscription.properties, propertiesSchema])
+
+  return (
+    <Modal
+      title={t('pluginTrigger.subscription.list.item.actions.edit.title')}
+      confirmButtonText={isUpdating ? t('common.operation.saving') : t('common.operation.save')}
+      onClose={onClose}
+      onCancel={onClose}
+      onConfirm={handleConfirm}
+      disabled={isUpdating}
+      clickOutsideNotClose
+      wrapperClassName="!z-[101]"
+    >
+      {pluginDetail && (
+        <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
+      )}
+      <BaseForm
+        formSchemas={formSchemas}
+        ref={formRef}
+        labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+        formClassName="space-y-4"
+      />
+    </Modal>
+  )
+}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
new file mode 100644
index 0000000000..53bb6aa69d
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
@@ -0,0 +1,178 @@
+'use client'
+import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
+import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
+import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { isEqual } from 'es-toolkit/compat'
+import { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BaseForm } from '@/app/components/base/form/components/base'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import Modal from '@/app/components/base/modal/modal'
+import Toast from '@/app/components/base/toast'
+import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
+import { useUpdateTriggerSubscription } from '@/service/use-triggers'
+import { ReadmeShowType } from '../../../readme-panel/store'
+import { usePluginStore } from '../../store'
+import { useSubscriptionList } from '../use-subscription-list'
+
+type Props = {
+  onClose: () => void
+  subscription: TriggerSubscription
+  pluginDetail?: PluginDetail
+}
+
+const normalizeFormType = (type: string): FormTypeEnum => {
+  switch (type) {
+    case 'string':
+    case 'text':
+      return FormTypeEnum.textInput
+    case 'password':
+    case 'secret':
+      return FormTypeEnum.secretInput
+    case 'number':
+    case 'integer':
+      return FormTypeEnum.textNumber
+    case 'boolean':
+      return FormTypeEnum.boolean
+    case 'select':
+      return FormTypeEnum.select
+    default:
+      if (Object.values(FormTypeEnum).includes(type as FormTypeEnum))
+        return type as FormTypeEnum
+      return FormTypeEnum.textInput
+  }
+}
+
+export const OAuthEditModal = ({ onClose, subscription, pluginDetail }: Props) => {
+  const { t } = useTranslation()
+  const detail = usePluginStore(state => state.detail)
+  const { refetch } = useSubscriptionList()
+
+  const { mutate: updateSubscription, isPending: isUpdating } = useUpdateTriggerSubscription()
+
+  const getErrorMessage = (error: unknown, fallback: string) => {
+    if (error instanceof Error && error.message)
+      return error.message
+    if (typeof error === 'object' && error && 'message' in error) {
+      const message = (error as { message?: string }).message
+      if (typeof message === 'string' && message)
+        return message
+    }
+    return fallback
+  }
+
+  const parametersSchema = useMemo<ParametersSchema[]>(
+    () => detail?.declaration?.trigger?.subscription_constructor?.parameters || [],
+    [detail?.declaration?.trigger?.subscription_constructor?.parameters],
+  )
+
+  const formRef = useRef<FormRefObject>(null)
+
+  const handleConfirm = () => {
+    const formValues = formRef.current?.getFormValues({
+      needTransformWhenSecretFieldIsPristine: true,
+    })
+    if (!formValues?.isCheckValidated)
+      return
+
+    const name = formValues.values.subscription_name as string
+
+    // Extract parameters (exclude subscription_name and callback_url)
+    const newParameters = { ...formValues.values }
+    delete newParameters.subscription_name
+    delete newParameters.callback_url
+
+    // Only send parameters if changed
+    const hasChanged = !isEqual(newParameters, subscription.parameters || {})
+    const parameters = hasChanged ? newParameters : undefined
+
+    updateSubscription(
+      {
+        subscriptionId: subscription.id,
+        name,
+        parameters,
+      },
+      {
+        onSuccess: () => {
+          Toast.notify({
+            type: 'success',
+            message: t('pluginTrigger.subscription.list.item.actions.edit.success'),
+          })
+          refetch?.()
+          onClose()
+        },
+        onError: (error: unknown) => {
+          Toast.notify({
+            type: 'error',
+            message: getErrorMessage(error, t('pluginTrigger.subscription.list.item.actions.edit.error')),
+          })
+        },
+      },
+    )
+  }
+
+  const formSchemas: FormSchema[] = useMemo(() => [
+    {
+      name: 'subscription_name',
+      label: t('pluginTrigger.modal.form.subscriptionName.label'),
+      placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
+      type: FormTypeEnum.textInput,
+      required: true,
+      default: subscription.name,
+    },
+    {
+      name: 'callback_url',
+      label: t('pluginTrigger.modal.form.callbackUrl.label'),
+      placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
+      type: FormTypeEnum.textInput,
+      required: false,
+      default: subscription.endpoint || '',
+      disabled: true,
+      tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
+      showCopy: true,
+    },
+    ...parametersSchema.map((schema: ParametersSchema) => {
+      const normalizedType = normalizeFormType(schema.type as string)
+      return {
+        ...schema,
+        type: normalizedType,
+        tooltip: schema.description,
+        default: subscription.parameters?.[schema.name] || schema.default,
+        dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect
+          ? {
+              plugin_id: detail?.plugin_id || '',
+              provider: detail?.provider || '',
+              action: 'provider',
+              parameter: schema.name,
+              credential_id: subscription.id,
+            }
+          : undefined,
+        fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
+        labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
+      }
+    }),
+  ], [t, subscription.name, subscription.endpoint, subscription.parameters, subscription.id, parametersSchema, detail?.plugin_id, detail?.provider])
+
+  return (
+    <Modal
+      title={t('pluginTrigger.subscription.list.item.actions.edit.title')}
+      confirmButtonText={isUpdating ? t('common.operation.saving') : t('common.operation.save')}
+      onClose={onClose}
+      onCancel={onClose}
+      onConfirm={handleConfirm}
+      disabled={isUpdating}
+      clickOutsideNotClose
+      wrapperClassName="!z-[101]"
+    >
+      {pluginDetail && (
+        <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
+      )}
+      <BaseForm
+        formSchemas={formSchemas}
+        ref={formRef}
+        labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+        formClassName="space-y-4"
+      />
+    </Modal>
+  )
+}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx
index 9b7bcc461a..96ce983f38 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx
@@ -1,31 +1,27 @@
+import type { SimpleSubscription } from './types'
+import type { PluginDetail } from '@/app/components/plugins/types'
 import { withErrorBoundary } from '@/app/components/base/error-boundary'
 import Loading from '@/app/components/base/loading'
 import { SubscriptionListView } from './list-view'
 import { SubscriptionSelectorView } from './selector-view'
+import { SubscriptionListMode } from './types'
 import { useSubscriptionList } from './use-subscription-list'
 
-export enum SubscriptionListMode {
-  PANEL = 'panel',
-  SELECTOR = 'selector',
-}
-
-export type SimpleSubscription = {
-  id: string
-  name: string
-}
-
 type SubscriptionListProps = {
   mode?: SubscriptionListMode
   selectedId?: string
   onSelect?: (v: SimpleSubscription, callback?: () => void) => void
+  pluginDetail?: PluginDetail
 }
 
 export { SubscriptionSelectorEntry } from './selector-entry'
+export type { SimpleSubscription } from './types'
 
 export const SubscriptionList = withErrorBoundary(({
   mode = SubscriptionListMode.PANEL,
   selectedId,
   onSelect,
+  pluginDetail,
 }: SubscriptionListProps) => {
   const { isLoading, refetch } = useSubscriptionList()
   if (isLoading) {
@@ -47,5 +43,5 @@ export const SubscriptionList = withErrorBoundary(({
     )
   }
 
-  return <SubscriptionListView />
+  return <SubscriptionListView pluginDetail={pluginDetail} />
 })
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
index 628f561ca2..1238935fa3 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -1,4 +1,5 @@
 'use client'
+import type { PluginDetail } from '@/app/components/plugins/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
@@ -9,10 +10,12 @@ import { useSubscriptionList } from './use-subscription-list'
 
 type SubscriptionListViewProps = {
   showTopBorder?: boolean
+  pluginDetail?: PluginDetail
 }
 
 export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
   showTopBorder = false,
+  pluginDetail,
 }) => {
   const { t } = useTranslation()
   const { subscriptions } = useSubscriptionList()
@@ -41,6 +44,7 @@ export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
             <SubscriptionCard
               key={subscription.id}
               data={subscription}
+              pluginDetail={pluginDetail}
             />
           ))}
         </div>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
index a52e25e1d3..4bbad06b57 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
+import type { SimpleSubscription } from './types'
 import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,8 +8,9 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { SubscriptionList, SubscriptionListMode } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
+import { SubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import { cn } from '@/utils/classnames'
+import { SubscriptionListMode } from './types'
 import { useSubscriptionList } from './use-subscription-list'
 
 type SubscriptionTriggerButtonProps = {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
index af2ac50abf..61b510e05e 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
@@ -1,7 +1,9 @@
 'use client'
+import type { PluginDetail } from '@/app/components/plugins/types'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
 import {
   RiDeleteBinLine,
+  RiEditLine,
   RiWebhookLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
@@ -10,17 +12,23 @@ import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import { cn } from '@/utils/classnames'
 import { DeleteConfirm } from './delete-confirm'
+import { EditModal } from './edit'
 
 type Props = {
   data: TriggerSubscription
+  pluginDetail?: PluginDetail
 }
 
-const SubscriptionCard = ({ data }: Props) => {
+const SubscriptionCard = ({ data, pluginDetail }: Props) => {
   const { t } = useTranslation()
   const [isShowDeleteModal, {
     setTrue: showDeleteModal,
     setFalse: hideDeleteModal,
   }] = useBoolean(false)
+  const [isShowEditModal, {
+    setTrue: showEditModal,
+    setFalse: hideEditModal,
+  }] = useBoolean(false)
 
   return (
     <>
@@ -40,12 +48,20 @@ const SubscriptionCard = ({ data }: Props) => {
             </span>
           </div>
 
-          <ActionButton
-            onClick={showDeleteModal}
-            className="subscription-delete-btn hidden transition-colors hover:bg-state-destructive-hover hover:text-text-destructive group-hover:block"
-          >
-            <RiDeleteBinLine className="h-4 w-4" />
-          </ActionButton>
+          <div className="hidden items-center gap-1 group-hover:flex">
+            <ActionButton
+              onClick={showEditModal}
+              className="transition-colors hover:bg-state-base-hover"
+            >
+              <RiEditLine className="h-4 w-4" />
+            </ActionButton>
+            <ActionButton
+              onClick={showDeleteModal}
+              className="subscription-delete-btn transition-colors hover:bg-state-destructive-hover hover:text-text-destructive"
+            >
+              <RiDeleteBinLine className="h-4 w-4" />
+            </ActionButton>
+          </div>
         </div>
 
         <div className="mt-1 flex items-center justify-between">
@@ -78,6 +94,14 @@ const SubscriptionCard = ({ data }: Props) => {
           workflowsInUse={data.workflows_in_use}
         />
       )}
+
+      {isShowEditModal && (
+        <EditModal
+          onClose={hideEditModal}
+          subscription={data}
+          pluginDetail={pluginDetail}
+        />
+      )}
     </>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/types.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/types.ts
new file mode 100644
index 0000000000..adfda16547
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/types.ts
@@ -0,0 +1,9 @@
+export enum SubscriptionListMode {
+  PANEL = 'panel',
+  SELECTOR = 'selector',
+}
+
+export type SimpleSubscription = {
+  id: string
+  name: string
+}
diff --git a/web/app/components/plugins/plugin-page/context.tsx b/web/app/components/plugins/plugin-page/context.tsx
index 8a560ac90a..146353da4f 100644
--- a/web/app/components/plugins/plugin-page/context.tsx
+++ b/web/app/components/plugins/plugin-page/context.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode, RefObject } from 'react'
 import type { FilterState } from './filter-management'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import {
   useMemo,
   useRef,
diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx
index 4d8904d293..90854bda5d 100644
--- a/web/app/components/plugins/plugin-page/empty/index.tsx
+++ b/web/app/components/plugins/plugin-page/empty/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 2c6f90caa5..afa85d7010 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -7,7 +7,7 @@ import {
   RiEqualizer2Line,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import {
   useRouter,
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 60c18dca12..22ed35e95b 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts
index b50fdd2425..4aa0326cb4 100644
--- a/web/app/components/plugins/types.ts
+++ b/web/app/components/plugins/types.ts
@@ -131,7 +131,7 @@ export type ParametersSchema = {
   scope: any
   required: boolean
   multiple: boolean
-  default?: string[]
+  default?: string | string[]
   min: any
   max: any
   precision: any
@@ -260,9 +260,9 @@ export type Plugin = {
   icon: string
   icon_dark?: string
   verified: boolean
-  label: Record<Locale, string>
-  brief: Record<Locale, string>
-  description: Record<Locale, string>
+  label: Partial<Record<Locale, string>>
+  brief: Partial<Record<Locale, string>>
+  description: Partial<Record<Locale, string>>
   // Repo readme.md content
   introduction: string
   repository: string
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
index 3c4faad439..108f3a642f 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
@@ -1,6 +1,6 @@
 import type { SortableItem } from './types'
 import type { InputVar } from '@/models/pipeline'
-import { isEqual } from 'lodash-es'
+import { isEqual } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
index b11bae2449..303a8caaf5 100644
--- a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -2,7 +2,7 @@
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { IconInfo } from '@/models/datasets'
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx
index fff720469c..fe2490f281 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx
@@ -8,7 +8,6 @@ import Header from '@/app/components/workflow/header'
 import {
   useStore,
 } from '@/app/components/workflow/store'
-import { fetchWorkflowRunHistory } from '@/service/workflow'
 import InputFieldButton from './input-field-button'
 import Publisher from './publisher'
 import RunMode from './run-mode'
@@ -21,7 +20,6 @@ const RagPipelineHeader = () => {
   const viewHistoryProps = useMemo(() => {
     return {
       historyUrl: `/rag/pipelines/${pipelineId}/workflow-runs`,
-      historyFetcher: fetchWorkflowRunHistory,
     }
   }, [pipelineId])
 
diff --git a/web/app/components/rag-pipeline/hooks/use-available-nodes-meta-data.ts b/web/app/components/rag-pipeline/hooks/use-available-nodes-meta-data.ts
index 6464534c83..45c36196f5 100644
--- a/web/app/components/rag-pipeline/hooks/use-available-nodes-meta-data.ts
+++ b/web/app/components/rag-pipeline/hooks/use-available-nodes-meta-data.ts
@@ -36,8 +36,8 @@ export const useAvailableNodesMetaData = () => {
 
   const availableNodesMetaData = useMemo(() => mergedNodesMetaData.map((node) => {
     const { metaData } = node
-    const title = t(`workflow.blocks.${metaData.type}`)
-    const description = t(`workflow.blocksAbout.${metaData.type}`)
+    const title = t(`workflow.blocks.${metaData.type}` as any) as string
+    const description = t(`workflow.blocksAbout.${metaData.type}` as any) as string
     return {
       ...node,
       metaData: {
diff --git a/web/app/components/rag-pipeline/hooks/use-pipeline-template.ts b/web/app/components/rag-pipeline/hooks/use-pipeline-template.ts
index 5955ee5c45..fc64e6c8c7 100644
--- a/web/app/components/rag-pipeline/hooks/use-pipeline-template.ts
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-template.ts
@@ -14,7 +14,7 @@ export const usePipelineTemplate = () => {
     data: {
       ...knowledgeBaseDefault.defaultValue as KnowledgeBaseNodeType,
       type: knowledgeBaseDefault.metaData.type,
-      title: t(`workflow.blocks.${knowledgeBaseDefault.metaData.type}`),
+      title: t(`workflow.blocks.${knowledgeBaseDefault.metaData.type}` as any) as string,
       selected: true,
     },
     position: {
diff --git a/web/app/components/rag-pipeline/hooks/use-pipeline.tsx b/web/app/components/rag-pipeline/hooks/use-pipeline.tsx
index 779a38df99..c84bba660d 100644
--- a/web/app/components/rag-pipeline/hooks/use-pipeline.tsx
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline.tsx
@@ -1,6 +1,6 @@
 import type { DataSourceNodeType } from '../../workflow/nodes/data-source/types'
 import type { Node, ValueSelector } from '../../workflow/types'
-import { uniqBy } from 'lodash-es'
+import { uniqBy } from 'es-toolkit/compat'
 import { useCallback } from 'react'
 import { getOutgoers, useStoreApi } from 'reactflow'
 import { findUsedVarNodes, updateNodeVars } from '../../workflow/nodes/_base/components/variable/utils'
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index 157ed123d1..d28af7d766 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -26,7 +26,7 @@ import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Toast from '@/app/components/base/toast'
 import Res from '@/app/components/share/text-generation/result'
 import RunOnce from '@/app/components/share/text-generation/run-once'
-import { appDefaultIconBackground, DEFAULT_VALUE_MAX_LEN } from '@/config'
+import { appDefaultIconBackground, BATCH_CONCURRENCY, DEFAULT_VALUE_MAX_LEN } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
@@ -43,7 +43,7 @@ import MenuDropdown from './menu-dropdown'
 import RunBatch from './run-batch'
 import ResDownload from './run-batch/res-download'
 
-const GROUP_SIZE = 5 // to avoid RPM(Request per minute) limit. The group task finished then the next group.
+const GROUP_SIZE = BATCH_CONCURRENCY // to avoid RPM(Request per minute) limit. The group task finished then the next group.
 enum TaskStatus {
   pending = 'pending',
   running = 'running',
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.spec.tsx
new file mode 100644
index 0000000000..870263d83c
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.spec.tsx
@@ -0,0 +1,60 @@
+import type { Credential } from '@/app/components/tools/types'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
+import ConfigCredential from './config-credentials'
+
+describe('ConfigCredential', () => {
+  const baseCredential: Credential = {
+    auth_type: AuthType.none,
+  }
+  const mockOnChange = vi.fn()
+  const mockOnHide = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders and calls onHide when cancel is pressed', async () => {
+    await act(async () => {
+      render(
+        <ConfigCredential
+          credential={baseCredential}
+          onChange={mockOnChange}
+          onHide={mockOnHide}
+        />,
+      )
+    })
+
+    fireEvent.click(screen.getByText('common.operation.cancel'))
+
+    expect(mockOnHide).toHaveBeenCalledTimes(1)
+    expect(mockOnChange).not.toHaveBeenCalled()
+  })
+
+  it('allows selecting apiKeyHeader and submits the new credential', async () => {
+    await act(async () => {
+      render(
+        <ConfigCredential
+          credential={baseCredential}
+          onChange={mockOnChange}
+          onHide={mockOnHide}
+        />,
+      )
+    })
+
+    fireEvent.click(screen.getByText('tools.createTool.authMethod.types.api_key_header'))
+    const headerInput = screen.getByPlaceholderText('tools.createTool.authMethod.types.apiKeyPlaceholder')
+    const valueInput = screen.getByPlaceholderText('tools.createTool.authMethod.types.apiValuePlaceholder')
+    fireEvent.change(headerInput, { target: { value: 'X-Auth' } })
+    fireEvent.change(valueInput, { target: { value: 'sEcReT' } })
+    fireEvent.click(screen.getByText('common.operation.save'))
+
+    expect(mockOnChange).toHaveBeenCalledWith({
+      auth_type: AuthType.apiKeyHeader,
+      api_key_header: 'X-Auth',
+      api_key_header_prefix: AuthHeaderPrefix.custom,
+      api_key_value: 'sEcReT',
+    })
+    expect(mockOnHide).toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.spec.tsx
new file mode 100644
index 0000000000..de156ce68a
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.spec.tsx
@@ -0,0 +1,55 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { importSchemaFromURL } from '@/service/tools'
+import Toast from '../../base/toast'
+import examples from './examples'
+import GetSchema from './get-schema'
+
+vi.mock('@/service/tools', () => ({
+  importSchemaFromURL: vi.fn(),
+}))
+const importSchemaFromURLMock = vi.mocked(importSchemaFromURL)
+
+describe('GetSchema', () => {
+  const notifySpy = vi.spyOn(Toast, 'notify')
+  const mockOnChange = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    notifySpy.mockClear()
+    importSchemaFromURLMock.mockReset()
+    render(<GetSchema onChange={mockOnChange} />)
+  })
+
+  it('shows an error when the URL is not http', () => {
+    fireEvent.click(screen.getByText('tools.createTool.importFromUrl'))
+    const input = screen.getByPlaceholderText('tools.createTool.importFromUrlPlaceHolder')
+    // eslint-disable-next-line sonarjs/no-clear-text-protocols
+    fireEvent.change(input, { target: { value: 'ftp://invalid' } })
+    fireEvent.click(screen.getByText('common.operation.ok'))
+
+    expect(notifySpy).toHaveBeenCalledWith({
+      type: 'error',
+      message: 'tools.createTool.urlError',
+    })
+  })
+
+  it('imports schema from url when valid', async () => {
+    fireEvent.click(screen.getByText('tools.createTool.importFromUrl'))
+    const input = screen.getByPlaceholderText('tools.createTool.importFromUrlPlaceHolder')
+    fireEvent.change(input, { target: { value: 'https://example.com' } })
+    importSchemaFromURLMock.mockResolvedValueOnce({ schema: 'result-schema' })
+
+    fireEvent.click(screen.getByText('common.operation.ok'))
+
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalledWith('result-schema')
+    })
+  })
+
+  it('selects example schema when example option clicked', () => {
+    fireEvent.click(screen.getByText('tools.createTool.examples'))
+    fireEvent.click(screen.getByText(`tools.createTool.exampleOptions.${examples[0].key}`))
+
+    expect(mockOnChange).toHaveBeenCalledWith(examples[0].content)
+  })
+})
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index 4ecee282f9..5c85aee32c 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -111,7 +111,7 @@ const GetSchema: FC<Props> = ({
                 }}
                 className="system-sm-regular cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover"
               >
-                {t(`tools.createTool.exampleOptions.${item.key}`)}
+                {t(`tools.createTool.exampleOptions.${item.key}` as any) as string}
               </div>
             ))}
           </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/index.spec.tsx
new file mode 100644
index 0000000000..92c9cc3df2
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/index.spec.tsx
@@ -0,0 +1,154 @@
+import type { ModalContextState } from '@/context/modal-context'
+import type { ProviderContextState } from '@/context/provider-context'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Toast from '@/app/components/base/toast'
+import { Plan } from '@/app/components/billing/type'
+import { parseParamsSchema } from '@/service/tools'
+import EditCustomCollectionModal from './index'
+
+vi.mock('ahooks', async () => {
+  const actual = await vi.importActual<typeof import('ahooks')>('ahooks')
+  return {
+    ...actual,
+    useDebounce: (value: unknown) => value,
+  }
+})
+
+vi.mock('@/service/tools', () => ({
+  parseParamsSchema: vi.fn(),
+}))
+const parseParamsSchemaMock = vi.mocked(parseParamsSchema)
+
+const mockSetShowPricingModal = vi.fn()
+const mockSetShowAccountSettingModal = vi.fn()
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: (): ModalContextState => ({
+    setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    setShowApiBasedExtensionModal: vi.fn(),
+    setShowModerationSettingModal: vi.fn(),
+    setShowExternalDataToolModal: vi.fn(),
+    setShowPricingModal: mockSetShowPricingModal,
+    setShowAnnotationFullModal: vi.fn(),
+    setShowModelModal: vi.fn(),
+    setShowExternalKnowledgeAPIModal: vi.fn(),
+    setShowModelLoadBalancingModal: vi.fn(),
+    setShowOpeningModal: vi.fn(),
+    setShowUpdatePluginModal: vi.fn(),
+    setShowEducationExpireNoticeModal: vi.fn(),
+    setShowTriggerEventsLimitModal: vi.fn(),
+  }),
+}))
+
+const mockUseProviderContext = vi.fn()
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockUseProviderContext(),
+}))
+
+vi.mock('@/context/i18n', async () => {
+  const actual = await vi.importActual<typeof import('@/context/i18n')>('@/context/i18n')
+  return {
+    ...actual,
+    useDocLink: () => (path?: string) => `https://docs.example.com${path ?? ''}`,
+  }
+})
+
+describe('EditCustomCollectionModal', () => {
+  const mockOnHide = vi.fn()
+  const mockOnAdd = vi.fn()
+  const mockOnEdit = vi.fn()
+  const mockOnRemove = vi.fn()
+  const toastNotifySpy = vi.spyOn(Toast, 'notify')
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    toastNotifySpy.mockClear()
+    parseParamsSchemaMock.mockResolvedValue({
+      parameters_schema: [],
+      schema_type: 'openapi',
+    })
+    mockUseProviderContext.mockReturnValue({
+      plan: {
+        type: Plan.sandbox,
+      },
+      enableBilling: false,
+      webappCopyrightEnabled: true,
+    } as ProviderContextState)
+  })
+
+  const renderModal = () => render(
+    <EditCustomCollectionModal
+      payload={undefined}
+      onHide={mockOnHide}
+      onAdd={mockOnAdd}
+      onEdit={mockOnEdit}
+      onRemove={mockOnRemove}
+    />,
+  )
+
+  it('shows an error when the provider name is missing', async () => {
+    renderModal()
+
+    const schemaInput = screen.getByPlaceholderText('tools.createTool.schemaPlaceHolder')
+    fireEvent.change(schemaInput, { target: { value: '{}' } })
+    await waitFor(() => {
+      expect(parseParamsSchemaMock).toHaveBeenCalledWith('{}')
+    })
+
+    fireEvent.click(screen.getByText('common.operation.save'))
+
+    await waitFor(() => {
+      expect(toastNotifySpy).toHaveBeenCalledWith(expect.objectContaining({
+        message: 'common.errorMsg.fieldRequired:{"field":"tools.createTool.name"}',
+        type: 'error',
+      }))
+    })
+    expect(mockOnAdd).not.toHaveBeenCalled()
+  })
+
+  it('shows an error when the schema is missing', async () => {
+    renderModal()
+
+    const providerInput = screen.getByPlaceholderText('tools.createTool.toolNamePlaceHolder')
+    fireEvent.change(providerInput, { target: { value: 'provider' } })
+
+    fireEvent.click(screen.getByText('common.operation.save'))
+
+    await waitFor(() => {
+      expect(toastNotifySpy).toHaveBeenCalledWith(expect.objectContaining({
+        message: 'common.errorMsg.fieldRequired:{"field":"tools.createTool.schema"}',
+        type: 'error',
+      }))
+    })
+    expect(mockOnAdd).not.toHaveBeenCalled()
+  })
+
+  it('saves a valid custom collection', async () => {
+    renderModal()
+    const providerInput = screen.getByPlaceholderText('tools.createTool.toolNamePlaceHolder')
+    fireEvent.change(providerInput, { target: { value: 'provider' } })
+
+    const schemaInput = screen.getByPlaceholderText('tools.createTool.schemaPlaceHolder')
+    fireEvent.change(schemaInput, { target: { value: '{}' } })
+
+    await waitFor(() => {
+      expect(parseParamsSchemaMock).toHaveBeenCalledWith('{}')
+    })
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('common.operation.save'))
+    })
+
+    await waitFor(() => {
+      expect(mockOnAdd).toHaveBeenCalledWith(expect.objectContaining({
+        provider: 'provider',
+        schema: '{}',
+        schema_type: 'openapi',
+        credentials: {
+          auth_type: 'none',
+        },
+        labels: [],
+      }))
+      expect(toastNotifySpy).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 93ef9142d9..474c262010 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -292,7 +292,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               <div>
                 <div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authMethod.title')}</div>
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
-                  <div className="system-xs-regular text-text-primary">{t(`tools.createTool.authMethod.types.${credential.auth_type}`)}</div>
+                  <div className="system-xs-regular text-text-primary">{t(`tools.createTool.authMethod.types.${credential.auth_type}` as any) as string}</div>
                   <RiSettings2Line className="h-4 w-4 text-text-secondary" />
                 </div>
               </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.spec.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.spec.tsx
new file mode 100644
index 0000000000..2df967684a
--- /dev/null
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.spec.tsx
@@ -0,0 +1,87 @@
+import type { CustomCollectionBackend, CustomParamSchema } from '@/app/components/tools/types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { AuthType } from '@/app/components/tools/types'
+import I18n from '@/context/i18n'
+import { testAPIAvailable } from '@/service/tools'
+import TestApi from './test-api'
+
+vi.mock('@/service/tools', () => ({
+  testAPIAvailable: vi.fn(),
+}))
+const testAPIAvailableMock = vi.mocked(testAPIAvailable)
+
+describe('TestApi', () => {
+  const customCollection: CustomCollectionBackend = {
+    provider: 'custom',
+    credentials: {
+      auth_type: AuthType.none,
+    },
+    schema_type: 'openapi',
+    schema: '{ }',
+    icon: { background: '', content: '' },
+    privacy_policy: '',
+    custom_disclaimer: '',
+    id: 'test-id',
+    labels: [],
+  }
+  const tool: CustomParamSchema = {
+    operation_id: 'testOp',
+    summary: 'summary',
+    method: 'GET',
+    server_url: 'https://api.example.com',
+    parameters: [{
+      name: 'limit',
+      label: {
+        en_US: 'Limit',
+        zh_Hans: '限制',
+      },
+      // eslint-disable-next-line ts/no-explicit-any
+    } as any],
+  }
+
+  const renderTestApi = () => {
+    const providerValue = {
+      locale: 'en-US',
+      i18n: {},
+      setLocaleOnClient: vi.fn(),
+    }
+    return render(
+      <I18n.Provider value={providerValue as any}>
+        <TestApi
+          customCollection={customCollection}
+          tool={tool}
+          onHide={vi.fn()}
+        />
+      </I18n.Provider>,
+    )
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders parameters and runs the API test', async () => {
+    testAPIAvailableMock.mockResolvedValueOnce({ result: 'ok' })
+    renderTestApi()
+
+    const parameterInput = screen.getAllByRole('textbox')[0]
+    fireEvent.change(parameterInput, { target: { value: '5' } })
+    fireEvent.click(screen.getByRole('button', { name: 'tools.test.title' }))
+
+    await waitFor(() => {
+      expect(testAPIAvailableMock).toHaveBeenCalledWith({
+        provider_name: customCollection.provider,
+        tool_name: tool.operation_id,
+        credentials: {
+          auth_type: AuthType.none,
+        },
+        schema_type: customCollection.schema_type,
+        schema: customCollection.schema,
+        parameters: {
+          limit: '5',
+        },
+      })
+      expect(screen.getByText('ok')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 8aacb7ad07..30ead4425b 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -78,7 +78,7 @@ const TestApi: FC<Props> = ({
               <div>
                 <div className="system-sm-medium py-2 text-text-primary">{t('tools.createTool.authMethod.title')}</div>
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
-                  <div className="system-xs-regular text-text-primary">{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}`)}</div>
+                  <div className="system-xs-regular text-text-primary">{t(`tools.createTool.authMethod.types.${tempCredential.auth_type}` as any) as string}</div>
                   <RiSettings2Line className="h-4 w-4 text-text-secondary" />
                 </div>
               </div>
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index e3afea41a8..43143e5a05 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { Label } from '@/app/components/tools/labels/constant'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index eb8f280484..c5cde65674 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -5,7 +5,7 @@ import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppIconType } from '@/types/app'
 import { RiCloseLine, RiEditLine } from '@remixicon/react'
 import { useHover } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/tools/provider/empty.tsx b/web/app/components/tools/provider/empty.tsx
index 7e916ba62f..e79607751e 100644
--- a/web/app/components/tools/provider/empty.tsx
+++ b/web/app/components/tools/provider/empty.tsx
@@ -33,17 +33,17 @@ const Empty = ({
   const Comp = (hasLink ? Link : 'div') as any
   const linkProps = hasLink ? { href: getLink(type), target: '_blank' } : {}
   const renderType = isAgent ? 'agent' : type
-  const hasTitle = t(`tools.addToolModal.${renderType}.title`) !== `tools.addToolModal.${renderType}.title`
+  const hasTitle = t(`tools.addToolModal.${renderType}.title` as any) as string !== `tools.addToolModal.${renderType}.title`
 
   return (
     <div className="flex flex-col items-center justify-center">
       <NoToolPlaceholder className={theme === 'dark' ? 'invert' : ''} />
       <div className="mb-1 mt-2 text-[13px] font-medium leading-[18px] text-text-primary">
-        {hasTitle ? t(`tools.addToolModal.${renderType}.title`) : 'No tools available'}
+        {hasTitle ? t(`tools.addToolModal.${renderType}.title` as any) as string : 'No tools available'}
       </div>
       {(!isAgent && hasTitle) && (
         <Comp className={cn('flex items-center text-[13px] leading-[18px] text-text-tertiary', hasLink && 'cursor-pointer hover:text-text-accent')} {...linkProps}>
-          {t(`tools.addToolModal.${renderType}.tip`)}
+          {t(`tools.addToolModal.${renderType}.tip` as any) as string}
           {' '}
           {hasLink && <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />}
         </Comp>
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 43383cdb51..033052e8a1 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { Collection } from '../../types'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index f90774cb32..e1a7dff113 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { RiCloseLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index 1df6f10195..13fc6a5ce0 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -188,8 +188,8 @@ const FeaturesTrigger = () => {
       {isChatMode && (
         <Button
           className={cn(
-            'text-components-button-secondary-text',
-            theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            'rounded-lg border border-transparent text-components-button-secondary-text',
+            theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
           )}
           onClick={handleShowFeatures}
         >
diff --git a/web/app/components/workflow-app/components/workflow-header/index.spec.tsx b/web/app/components/workflow-app/components/workflow-header/index.spec.tsx
index 8eee878cd9..5563af01d3 100644
--- a/web/app/components/workflow-app/components/workflow-header/index.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/index.spec.tsx
@@ -1,6 +1,6 @@
 import type { HeaderProps } from '@/app/components/workflow/header'
 import type { App } from '@/types/app'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { AppModeEnum } from '@/types/app'
 import WorkflowHeader from './index'
 
@@ -9,8 +9,47 @@ const mockSetCurrentLogItem = vi.fn()
 const mockSetShowMessageLogModal = vi.fn()
 const mockResetWorkflowVersionHistory = vi.fn()
 
+const createMockApp = (overrides: Partial<App> = {}): App => ({
+  id: 'app-id',
+  name: 'Workflow App',
+  description: 'Workflow app description',
+  author_name: 'Workflow app author',
+  icon_type: 'emoji',
+  icon: 'app-icon',
+  icon_background: '#FFFFFF',
+  icon_url: null,
+  use_icon_as_answer_icon: false,
+  mode: AppModeEnum.COMPLETION,
+  enable_site: true,
+  enable_api: true,
+  api_rpm: 60,
+  api_rph: 3600,
+  is_demo: false,
+  model_config: {} as App['model_config'],
+  app_model_config: {} as App['app_model_config'],
+  created_at: 0,
+  updated_at: 0,
+  site: {
+    access_token: 'token',
+    app_base_url: 'https://example.com',
+  } as App['site'],
+  api_base_url: 'https://api.example.com',
+  tags: [],
+  access_mode: 'public_access' as App['access_mode'],
+  ...overrides,
+})
+
 let appDetail: App
 
+const mockAppStore = (overrides: Partial<App> = {}) => {
+  appDetail = createMockApp(overrides)
+  mockUseAppStoreSelector.mockImplementation(selector => selector({
+    appDetail,
+    setCurrentLogItem: mockSetCurrentLogItem,
+    setShowMessageLogModal: mockSetShowMessageLogModal,
+  }))
+}
+
 vi.mock('@/app/components/app/store', () => ({
   __esModule: true,
   useStore: (selector: (state: { appDetail?: App, setCurrentLogItem: typeof mockSetCurrentLogItem, setShowMessageLogModal: typeof mockSetShowMessageLogModal }) => unknown) => mockUseAppStoreSelector(selector),
@@ -19,16 +58,12 @@ vi.mock('@/app/components/app/store', () => ({
 vi.mock('@/app/components/workflow/header', () => ({
   __esModule: true,
   default: (props: HeaderProps) => {
-    const historyFetcher = props.normal?.runAndHistoryProps?.viewHistoryProps?.historyFetcher
-    const hasHistoryFetcher = typeof historyFetcher === 'function'
-
     return (
       <div
         data-testid="workflow-header"
         data-show-run={String(Boolean(props.normal?.runAndHistoryProps?.showRunButton))}
         data-show-preview={String(Boolean(props.normal?.runAndHistoryProps?.showPreviewButton))}
         data-history-url={props.normal?.runAndHistoryProps?.viewHistoryProps?.historyUrl ?? ''}
-        data-has-history-fetcher={String(hasHistoryFetcher)}
       >
         <button
           type="button"
@@ -47,11 +82,6 @@ vi.mock('@/app/components/workflow/header', () => ({
   },
 }))
 
-vi.mock('@/service/workflow', () => ({
-  __esModule: true,
-  fetchWorkflowRunHistory: vi.fn(),
-}))
-
 vi.mock('@/service/use-workflow', () => ({
   __esModule: true,
   useResetWorkflowVersionHistory: () => mockResetWorkflowVersionHistory,
@@ -60,13 +90,7 @@ vi.mock('@/service/use-workflow', () => ({
 describe('WorkflowHeader', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    appDetail = { id: 'app-id', mode: AppModeEnum.COMPLETION } as unknown as App
-
-    mockUseAppStoreSelector.mockImplementation(selector => selector({
-      appDetail,
-      setCurrentLogItem: mockSetCurrentLogItem,
-      setShowMessageLogModal: mockSetShowMessageLogModal,
-    }))
+    mockAppStore()
   })
 
   // Verifies the wrapper renders the workflow header shell.
@@ -84,12 +108,7 @@ describe('WorkflowHeader', () => {
   describe('Props', () => {
     it('should configure preview mode when app is in advanced chat mode', () => {
       // Arrange
-      appDetail = { id: 'app-id', mode: AppModeEnum.ADVANCED_CHAT } as unknown as App
-      mockUseAppStoreSelector.mockImplementation(selector => selector({
-        appDetail,
-        setCurrentLogItem: mockSetCurrentLogItem,
-        setShowMessageLogModal: mockSetShowMessageLogModal,
-      }))
+      mockAppStore({ mode: AppModeEnum.ADVANCED_CHAT })
 
       // Act
       render(<WorkflowHeader />)
@@ -99,17 +118,11 @@ describe('WorkflowHeader', () => {
       expect(header).toHaveAttribute('data-show-run', 'false')
       expect(header).toHaveAttribute('data-show-preview', 'true')
       expect(header).toHaveAttribute('data-history-url', '/apps/app-id/advanced-chat/workflow-runs')
-      expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
     })
 
     it('should configure run mode when app is not in advanced chat mode', () => {
       // Arrange
-      appDetail = { id: 'app-id', mode: AppModeEnum.COMPLETION } as unknown as App
-      mockUseAppStoreSelector.mockImplementation(selector => selector({
-        appDetail,
-        setCurrentLogItem: mockSetCurrentLogItem,
-        setShowMessageLogModal: mockSetShowMessageLogModal,
-      }))
+      mockAppStore({ mode: AppModeEnum.COMPLETION })
 
       // Act
       render(<WorkflowHeader />)
@@ -119,7 +132,6 @@ describe('WorkflowHeader', () => {
       expect(header).toHaveAttribute('data-show-run', 'true')
       expect(header).toHaveAttribute('data-show-preview', 'false')
       expect(header).toHaveAttribute('data-history-url', '/apps/app-id/workflow-runs')
-      expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
     })
   })
 
@@ -130,7 +142,7 @@ describe('WorkflowHeader', () => {
       render(<WorkflowHeader />)
 
       // Act
-      screen.getByRole('button', { name: 'clear-history' }).click()
+      fireEvent.click(screen.getByRole('button', { name: /clear-history/i }))
 
       // Assert
       expect(mockSetCurrentLogItem).toHaveBeenCalledWith()
@@ -145,7 +157,7 @@ describe('WorkflowHeader', () => {
       render(<WorkflowHeader />)
 
       // Assert
-      screen.getByRole('button', { name: 'restore-settled' }).click()
+      fireEvent.click(screen.getByRole('button', { name: /restore-settled/i }))
       expect(mockResetWorkflowVersionHistory).toHaveBeenCalled()
     })
   })
diff --git a/web/app/components/workflow-app/components/workflow-header/index.tsx b/web/app/components/workflow-app/components/workflow-header/index.tsx
index 4acb721487..3fe679925a 100644
--- a/web/app/components/workflow-app/components/workflow-header/index.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/index.tsx
@@ -8,9 +8,6 @@ import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import Header from '@/app/components/workflow/header'
 import { useResetWorkflowVersionHistory } from '@/service/use-workflow'
-import {
-  fetchWorkflowRunHistory,
-} from '@/service/workflow'
 import { useIsChatMode } from '../../hooks'
 import ChatVariableTrigger from './chat-variable-trigger'
 import FeaturesTrigger from './features-trigger'
@@ -33,7 +30,6 @@ const WorkflowHeader = () => {
     return {
       onClearLogAndMessageModal: handleClearLogAndMessageModal,
       historyUrl: isChatMode ? `/apps/${appDetail!.id}/advanced-chat/workflow-runs` : `/apps/${appDetail!.id}/workflow-runs`,
-      historyFetcher: fetchWorkflowRunHistory,
     }
   }, [appDetail, isChatMode, handleClearLogAndMessageModal])
 
diff --git a/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts b/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
index 24d862321d..7f08612234 100644
--- a/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
+++ b/web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts
@@ -42,8 +42,8 @@ export const useAvailableNodesMetaData = () => {
 
   const availableNodesMetaData = useMemo(() => mergedNodesMetaData.map((node) => {
     const { metaData } = node
-    const title = t(`workflow.blocks.${metaData.type}`)
-    const description = t(`workflow.blocksAbout.${metaData.type}`)
+    const title = t(`workflow.blocks.${metaData.type}` as any) as string
+    const description = t(`workflow.blocksAbout.${metaData.type}` as any) as string
     const helpLinkPath = `guides/workflow/node/${metaData.helpLinkUri}`
     return {
       ...node,
diff --git a/web/app/components/workflow-app/hooks/use-workflow-run.ts b/web/app/components/workflow-app/hooks/use-workflow-run.ts
index 16c7bab6d4..031e2949cb 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-run.ts
@@ -2,8 +2,8 @@ import type AudioPlayer from '@/app/components/base/audio-btn/audio'
 import type { Node } from '@/app/components/workflow/types'
 import type { IOtherOptions } from '@/service/base'
 import type { VersionHistory } from '@/types/workflow'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import { usePathname } from 'next/navigation'
 import { useCallback, useRef } from 'react'
 import {
diff --git a/web/app/components/workflow-app/hooks/use-workflow-template.ts b/web/app/components/workflow-app/hooks/use-workflow-template.ts
index b48a68e1eb..46f2c3e0a3 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-template.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-template.ts
@@ -18,7 +18,7 @@ export const useWorkflowTemplate = () => {
     data: {
       ...startDefault.defaultValue as StartNodeType,
       type: startDefault.metaData.type,
-      title: t(`workflow.blocks.${startDefault.metaData.type}`),
+      title: t(`workflow.blocks.${startDefault.metaData.type}` as any) as string,
     },
     position: START_INITIAL_POSITION,
   })
@@ -34,7 +34,7 @@ export const useWorkflowTemplate = () => {
         },
         selected: true,
         type: llmDefault.metaData.type,
-        title: t(`workflow.blocks.${llmDefault.metaData.type}`),
+        title: t(`workflow.blocks.${llmDefault.metaData.type}` as any) as string,
       },
       position: {
         x: START_INITIAL_POSITION.x + NODE_WIDTH_X_OFFSET,
@@ -48,7 +48,7 @@ export const useWorkflowTemplate = () => {
         ...answerDefault.defaultValue,
         answer: `{{#${llmNode.id}.text#}}`,
         type: answerDefault.metaData.type,
-        title: t(`workflow.blocks.${answerDefault.metaData.type}`),
+        title: t(`workflow.blocks.${answerDefault.metaData.type}` as any) as string,
       },
       position: {
         x: START_INITIAL_POSITION.x + NODE_WIDTH_X_OFFSET * 2,
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index e626073a3a..388532f7a2 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -1,5 +1,5 @@
 import type { NodeDefault } from '../types'
-import { groupBy } from 'lodash-es'
+import { groupBy } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
@@ -85,7 +85,7 @@ const Blocks = ({
         {
           classification !== '-' && !!filteredList.length && (
             <div className="flex h-[22px] items-start px-3 text-xs font-medium text-text-tertiary">
-              {t(`workflow.tabs.${classification}`)}
+              {t(`workflow.tabs.${classification}` as any) as string}
             </div>
           )
         }
diff --git a/web/app/components/workflow/block-selector/featured-tools.tsx b/web/app/components/workflow/block-selector/featured-tools.tsx
index 1e6b976739..343d56bd1a 100644
--- a/web/app/components/workflow/block-selector/featured-tools.tsx
+++ b/web/app/components/workflow/block-selector/featured-tools.tsx
@@ -2,6 +2,7 @@
 import type { ToolWithProvider } from '../types'
 import type { ToolDefaultValue, ToolValue } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
+import type { Locale } from '@/i18n-config'
 import { RiMoreLine } from '@remixicon/react'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
@@ -178,7 +179,7 @@ const FeaturedTools = ({
                       onInstallSuccess={async () => {
                         await onInstallSuccess?.()
                       }}
-                      t={t}
+                      t={t as any}
                     />
                   ))}
                 </div>
@@ -221,7 +222,7 @@ const FeaturedTools = ({
 
 type FeaturedToolUninstalledItemProps = {
   plugin: Plugin
-  language: string
+  language: Locale
   onInstallSuccess?: () => Promise<void> | void
   t: (key: string, options?: Record<string, any>) => string
 }
diff --git a/web/app/components/workflow/block-selector/featured-triggers.tsx b/web/app/components/workflow/block-selector/featured-triggers.tsx
index c986a8abc0..66705a9d06 100644
--- a/web/app/components/workflow/block-selector/featured-triggers.tsx
+++ b/web/app/components/workflow/block-selector/featured-triggers.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { TriggerDefaultValue, TriggerWithProvider } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
+import type { Locale } from '@/i18n-config'
 import { RiMoreLine } from '@remixicon/react'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
@@ -170,7 +171,7 @@ const FeaturedTriggers = ({
                       onInstallSuccess={async () => {
                         await onInstallSuccess?.()
                       }}
-                      t={t}
+                      t={t as any}
                     />
                   ))}
                 </div>
@@ -213,7 +214,7 @@ const FeaturedTriggers = ({
 
 type FeaturedTriggerUninstalledItemProps = {
   plugin: Plugin
-  language: string
+  language: Locale
   onInstallSuccess?: () => Promise<void> | void
   t: (key: string, options?: Record<string, any>) => string
 }
diff --git a/web/app/components/workflow/block-selector/hooks.ts b/web/app/components/workflow/block-selector/hooks.ts
index 075a0b7d38..462d58df9f 100644
--- a/web/app/components/workflow/block-selector/hooks.ts
+++ b/web/app/components/workflow/block-selector/hooks.ts
@@ -17,7 +17,7 @@ export const useBlocks = () => {
   return BLOCKS.map((block) => {
     return {
       ...block,
-      title: t(`workflow.blocks.${block.type}`),
+      title: t(`workflow.blocks.${block.type}` as any) as string,
     }
   })
 }
@@ -28,7 +28,7 @@ export const useStartBlocks = () => {
   return START_BLOCKS.map((block) => {
     return {
       ...block,
-      title: t(`workflow.blocks.${block.type}`),
+      title: t(`workflow.blocks.${block.type}` as any) as string,
     }
   })
 }
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 58724b4621..d6f3007b51 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -2,7 +2,7 @@
 import type { RefObject } from 'react'
 import type { Plugin, PluginCategoryEnum } from '@/app/components/plugins/types'
 import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/block-selector/start-blocks.tsx b/web/app/components/workflow/block-selector/start-blocks.tsx
index 5c4311b805..b6aaef84f9 100644
--- a/web/app/components/workflow/block-selector/start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/start-blocks.tsx
@@ -43,7 +43,7 @@ const StartBlocks = ({
       if (blockType === BlockEnumValues.TriggerWebhook)
         return t('workflow.customWebhook')
 
-      return t(`workflow.blocks.${blockType}`)
+      return t(`workflow.blocks.${blockType}` as any) as string
     }
 
     return START_BLOCKS.filter((block) => {
@@ -83,10 +83,10 @@ const StartBlocks = ({
           <div className="system-md-medium mb-1 text-text-primary">
             {block.type === BlockEnumValues.TriggerWebhook
               ? t('workflow.customWebhook')
-              : t(`workflow.blocks.${block.type}`)}
+              : t(`workflow.blocks.${block.type}` as any) as string}
           </div>
           <div className="system-xs-regular text-text-secondary">
-            {t(`workflow.blocksAbout.${block.type}`)}
+            {t(`workflow.blocksAbout.${block.type}` as any) as string}
           </div>
           {(block.type === BlockEnumValues.TriggerWebhook || block.type === BlockEnumValues.TriggerSchedule) && (
             <div className="system-xs-regular mb-1 mt-1 text-text-tertiary">
@@ -107,7 +107,7 @@ const StartBlocks = ({
           type={block.type}
         />
         <div className="flex w-0 grow items-center justify-between text-sm text-text-secondary">
-          <span className="truncate">{t(`workflow.blocks.${block.type}`)}</span>
+          <span className="truncate">{t(`workflow.blocks.${block.type}` as any) as string}</span>
           {block.type === BlockEnumValues.Start && (
             <span className="system-xs-regular ml-2 shrink-0 text-text-quaternary">{t('workflow.blocks.originalStartNode')}</span>
           )}
diff --git a/web/app/components/workflow/block-selector/types.ts b/web/app/components/workflow/block-selector/types.ts
index 6ed4d7f2d5..07efb0d02f 100644
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -39,9 +39,9 @@ export type TriggerDefaultValue = PluginCommonDefaultValue & {
   title: string
   plugin_unique_identifier: string
   is_team_authorization: boolean
-  params: Record<string, any>
-  paramSchemas: Record<string, any>[]
-  output_schema: Record<string, any>
+  params: Record<string, unknown>
+  paramSchemas: Record<string, unknown>[]
+  output_schema: Record<string, unknown>
   subscription_id?: string
   meta?: PluginMeta
 }
@@ -52,9 +52,9 @@ export type ToolDefaultValue = PluginCommonDefaultValue & {
   tool_description: string
   title: string
   is_team_authorization: boolean
-  params: Record<string, any>
-  paramSchemas: Record<string, any>[]
-  output_schema?: Record<string, any>
+  params: Record<string, unknown>
+  paramSchemas: Record<string, unknown>[]
+  output_schema?: Record<string, unknown>
   credential_id?: string
   meta?: PluginMeta
   plugin_id?: string
@@ -82,10 +82,10 @@ export type ToolValue = {
   tool_name: string
   tool_label: string
   tool_description?: string
-  settings?: Record<string, any>
-  parameters?: Record<string, any>
+  settings?: Record<string, unknown>
+  parameters?: Record<string, unknown>
   enabled?: boolean
-  extra?: Record<string, any>
+  extra?: { description?: string } & Record<string, unknown>
   credential_id?: string
 }
 
@@ -94,7 +94,7 @@ export type DataSourceItem = {
   plugin_unique_identifier: string
   provider: string
   declaration: {
-    credentials_schema: any[]
+    credentials_schema: unknown[]
     provider_type: string
     identity: {
       author: string
@@ -113,10 +113,10 @@ export type DataSourceItem = {
         name: string
         provider: string
       }
-      parameters: any[]
+      parameters: unknown[]
       output_schema?: {
         type: string
-        properties: Record<string, any>
+        properties: Record<string, unknown>
       }
     }[]
   }
@@ -133,15 +133,15 @@ export type TriggerParameter = {
     | 'model-selector' | 'app-selector' | 'object' | 'array' | 'dynamic-select'
   auto_generate?: {
     type: string
-    value?: any
+    value?: unknown
   } | null
   template?: {
     type: string
-    value?: any
+    value?: unknown
   } | null
   scope?: string | null
   required?: boolean
-  default?: any
+  default?: unknown
   min?: number | null
   max?: number | null
   precision?: number | null
@@ -158,7 +158,7 @@ export type TriggerCredentialField = {
   name: string
   scope?: string | null
   required: boolean
-  default?: string | number | boolean | Array<any> | null
+  default?: string | number | boolean | Array<unknown> | null
   options?: Array<{
     value: string
     label: TypeWithI18N
@@ -191,7 +191,7 @@ export type TriggerApiEntity = {
   identity: TriggerIdentity
   description: TypeWithI18N
   parameters: TriggerParameter[]
-  output_schema?: Record<string, any>
+  output_schema?: Record<string, unknown>
 }
 
 export type TriggerProviderApiEntity = {
@@ -237,32 +237,15 @@ type TriggerSubscriptionStructure = {
   name: string
   provider: string
   credential_type: TriggerCredentialTypeEnum
-  credentials: TriggerSubCredentials
+  credentials: Record<string, unknown>
   endpoint: string
-  parameters: TriggerSubParameters
-  properties: TriggerSubProperties
+  parameters: Record<string, unknown>
+  properties: Record<string, unknown>
   workflows_in_use: number
 }
 
 export type TriggerSubscription = TriggerSubscriptionStructure
 
-export type TriggerSubCredentials = {
-  access_tokens: string
-}
-
-export type TriggerSubParameters = {
-  repository: string
-  webhook_secret?: string
-}
-
-export type TriggerSubProperties = {
-  active: boolean
-  events: string[]
-  external_id: string
-  repository: string
-  webhook_secret?: string
-}
-
 export type TriggerSubscriptionBuilder = TriggerSubscriptionStructure
 
 // OAuth configuration types
@@ -275,7 +258,7 @@ export type TriggerOAuthConfig = {
   params: {
     client_id: string
     client_secret: string
-    [key: string]: any
+    [key: string]: string
   }
   system_configured: boolean
 }
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index 3b73e07536..6427520d81 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -3,7 +3,7 @@ import type {
   Edge,
   OnSelectBlock,
 } from './types'
-import { intersection } from 'lodash-es'
+import { intersection } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index b616ec5fb5..c5ae8e7cff 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { RiCloseLine, RiLock2Line } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 86c88969ca..c61db71757 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -23,8 +23,8 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   return (
     <Button
       className={cn(
-        'p-2',
-        theme === 'dark' && showChatVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        'rounded-lg border border-transparent p-2',
+        theme === 'dark' && showChatVariablePanel && 'border-black/5 bg-white/10 backdrop-blur-sm',
       )}
       disabled={disabled}
       onClick={handleClick}
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index 12dc193261..0690d58e79 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -26,8 +26,8 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
   return (
     <Button
       className={cn(
-        'p-2',
-        theme === 'dark' && showEnvPanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        'rounded-lg border border-transparent p-2',
+        theme === 'dark' && showEnvPanel && 'border-black/5 bg-white/10 backdrop-blur-sm',
       )}
       variant="ghost"
       disabled={disabled}
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index a2d78edc4b..d098eaf31a 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -26,8 +26,8 @@ const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
   return (
     <Button
       className={cn(
-        'p-2',
-        theme === 'dark' && showGlobalVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        'rounded-lg border border-transparent p-2',
+        theme === 'dark' && showGlobalVariablePanel && 'border-black/5 bg-white/10 backdrop-blur-sm',
       )}
       disabled={disabled}
       onClick={handleClick}
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index 2abe031b61..1b6a49e6e4 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -86,7 +86,8 @@ const HeaderInRestoring = ({
           disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
           variant="primary"
           className={cn(
-            theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            'rounded-lg border border-transparent',
+            theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
           )}
         >
           {t('workflow.common.restore')}
@@ -94,8 +95,8 @@ const HeaderInRestoring = ({
         <Button
           onClick={handleCancelRestore}
           className={cn(
-            'text-components-button-secondary-accent-text',
-            theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            'rounded-lg border border-transparent text-components-button-secondary-accent-text',
+            theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
           )}
         >
           <div className="flex items-center gap-x-0.5">
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 3be0cfbe32..ae3bd68b48 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -61,8 +61,8 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
     >
       <Button
         className={cn(
-          'p-2',
-          theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+          'p-2 rounded-lg border border-transparent',
+          theme === 'dark' && 'border-black/5 bg-white/10 backdrop-blur-sm',
         )}
         onClick={handleViewVersionHistory}
       >
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 63a2dd25ab..f6a2d207a4 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -1,17 +1,13 @@
-import type { Fetcher } from 'swr'
-import type { WorkflowRunHistoryResponse } from '@/types/workflow'
 import {
   RiCheckboxCircleLine,
   RiCloseLine,
   RiErrorWarningLine,
 } from '@remixicon/react'
-import { noop } from 'lodash-es'
 import {
   memo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import {
   ClockPlay,
@@ -30,6 +26,7 @@ import {
   useWorkflowStore,
 } from '@/app/components/workflow/store'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useWorkflowRunHistory } from '@/service/use-workflow'
 import { cn } from '@/utils/classnames'
 import {
   useIsChatMode,
@@ -44,13 +41,11 @@ export type ViewHistoryProps = {
   withText?: boolean
   onClearLogAndMessageModal?: () => void
   historyUrl?: string
-  historyFetcher?: Fetcher<WorkflowRunHistoryResponse, string>
 }
 const ViewHistory = ({
   withText,
   onClearLogAndMessageModal,
   historyUrl,
-  historyFetcher,
 }: ViewHistoryProps) => {
   const { t } = useTranslation()
   const isChatMode = useIsChatMode()
@@ -68,11 +63,11 @@ const ViewHistory = ({
   const { handleBackupDraft } = useWorkflowRun()
   const { closeAllInputFieldPanels } = useInputFieldPanel()
 
-  const fetcher = historyFetcher ?? (noop as Fetcher<WorkflowRunHistoryResponse, string>)
+  const shouldFetchHistory = open && !!historyUrl
   const {
     data,
     isLoading,
-  } = useSWR((open && historyUrl && historyFetcher) ? historyUrl : null, fetcher)
+  } = useWorkflowRunHistory(historyUrl, shouldFetchHistory)
 
   return (
     (
diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts
index 79cfb7dbce..3aa4ba3d91 100644
--- a/web/app/components/workflow/hooks-store/store.ts
+++ b/web/app/components/workflow/hooks-store/store.ts
@@ -12,7 +12,7 @@ import type { FlowType } from '@/types/common'
 import type { VarInInspect } from '@/types/workflow'
 import {
   noop,
-} from 'lodash-es'
+} from 'es-toolkit/compat'
 import { useContext } from 'react'
 import {
   useStore as useZustandStore,
diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index 6e49bfa0be..7cead40705 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -237,8 +237,8 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
         list.push({
           id: `${type}-need-added`,
           type,
-          title: t(`workflow.blocks.${type}`),
-          errorMessage: t('workflow.common.needAdd', { node: t(`workflow.blocks.${type}`) }),
+          title: t(`workflow.blocks.${type}` as any) as string,
+          errorMessage: t('workflow.common.needAdd', { node: t(`workflow.blocks.${type}` as any) as string }),
           canNavigate: false,
         })
       }
@@ -409,7 +409,7 @@ export const useChecklistBeforePublish = () => {
       const type = isRequiredNodesType[i]
 
       if (!filteredNodes.find(node => node.data.type === type)) {
-        notify({ type: 'error', message: t('workflow.common.needAdd', { node: t(`workflow.blocks.${type}`) }) })
+        notify({ type: 'error', message: t('workflow.common.needAdd', { node: t(`workflow.blocks.${type}` as any) as string }) })
         return false
       }
     }
diff --git a/web/app/components/workflow/hooks/use-nodes-layout.ts b/web/app/components/workflow/hooks/use-nodes-layout.ts
index 653b37008c..2ad89ff100 100644
--- a/web/app/components/workflow/hooks/use-nodes-layout.ts
+++ b/web/app/components/workflow/hooks/use-nodes-layout.ts
@@ -3,7 +3,7 @@ import type {
   Node,
 } from '../types'
 import ELK from 'elkjs/lib/elk.bundled.js'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import { useCallback } from 'react'
 import {
   useReactFlow,
diff --git a/web/app/components/workflow/hooks/use-shortcuts.ts b/web/app/components/workflow/hooks/use-shortcuts.ts
index 00ed25bad0..1b3d141d8d 100644
--- a/web/app/components/workflow/hooks/use-shortcuts.ts
+++ b/web/app/components/workflow/hooks/use-shortcuts.ts
@@ -63,6 +63,11 @@ export const useShortcuts = (): void => {
     return !isEventTargetInputArea(e.target as HTMLElement)
   }, [])
 
+  const shouldHandleCopy = useCallback(() => {
+    const selection = document.getSelection()
+    return !selection || selection.isCollapsed
+  }, [])
+
   useKeyPress(['delete', 'backspace'], (e) => {
     if (shouldHandleShortcut(e)) {
       e.preventDefault()
@@ -73,7 +78,7 @@ export const useShortcuts = (): void => {
 
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.c`, (e) => {
     const { showDebugAndPreviewPanel } = workflowStore.getState()
-    if (shouldHandleShortcut(e) && !showDebugAndPreviewPanel) {
+    if (shouldHandleShortcut(e) && shouldHandleCopy() && !showDebugAndPreviewPanel) {
       e.preventDefault()
       handleNodesCopy()
     }
diff --git a/web/app/components/workflow/hooks/use-workflow-history.ts b/web/app/components/workflow/hooks/use-workflow-history.ts
index 3e6043a1fd..0171271c3b 100644
--- a/web/app/components/workflow/hooks/use-workflow-history.ts
+++ b/web/app/components/workflow/hooks/use-workflow-history.ts
@@ -1,5 +1,5 @@
 import type { WorkflowHistoryEventMeta } from '../workflow-history-store'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import {
   useCallback,
   useRef,
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index c958bb6b83..990c8c950d 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -9,7 +9,7 @@ import type {
   Node,
   ValueSelector,
 } from '../types'
-import { uniqBy } from 'lodash-es'
+import { uniqBy } from 'es-toolkit/compat'
 import {
   useCallback,
 } from 'react'
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 1d0c594c23..b31c283550 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -13,8 +13,8 @@ import type { VarInInspect } from '@/types/workflow'
 import {
   useEventListener,
 } from 'ahooks'
+import { isEqual } from 'es-toolkit/compat'
 import { setAutoFreeze } from 'immer'
-import { isEqual } from 'lodash-es'
 import dynamic from 'next/dynamic'
 import {
   memo,
@@ -195,9 +195,11 @@ export const Workflow: FC<WorkflowProps> = memo(({
   const { nodesReadOnly } = useNodesReadOnly()
   const { eventEmitter } = useEventEmitterContextContext()
 
+  const store = useStoreApi()
   eventEmitter?.useSubscription((v: any) => {
     if (v.type === WORKFLOW_DATA_UPDATE) {
       setNodes(v.payload.nodes)
+      store.getState().setNodes(v.payload.nodes)
       setEdges(v.payload.edges)
 
       if (v.payload.viewport)
@@ -359,7 +361,6 @@ export const Workflow: FC<WorkflowProps> = memo(({
     }
   }, [schemaTypeDefinitions, fetchInspectVars, isLoadedVars, vars, customTools, buildInTools, workflowTools, mcpTools, dataSourceList])
 
-  const store = useStoreApi()
   if (process.env.NODE_ENV === 'development') {
     store.getState().onError = (code, message) => {
       if (code === '002')
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index d7592b3c6f..a390ccec3c 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -4,7 +4,7 @@ import type { NodeOutPutVar } from '../../../types'
 import type { ToolVarInputs } from '../../tool/types'
 import type { CredentialFormSchema, CredentialFormSchemaNumberInput, CredentialFormSchemaTextInput } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { PluginMeta } from '@/app/components/plugins/types'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index fa7aef90a5..ad5410986c 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import Editor, { loader } from '@monaco-editor/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index b354d35276..9498edba8f 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index 348bb23302..e0bb6f6df5 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -5,7 +5,7 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { useBoolean } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
index 0f23161261..b9a4404dbb 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
@@ -1,7 +1,7 @@
 import type {
   Node,
 } from '../../../../types'
-import { isEqual } from 'lodash-es'
+import { isEqual } from 'es-toolkit/compat'
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index 1b550f035d..906dad4bc9 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -3,7 +3,7 @@ import type {
   OnSelectBlock,
 } from '@/app/components/workflow/types'
 import { RiMoreFill } from '@remixicon/react'
-import { intersection } from 'lodash-es'
+import { intersection } from 'es-toolkit/compat'
 import {
   useCallback,
 } from 'react'
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
index 47e1c4b22b..9236c022b9 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
@@ -2,7 +2,7 @@ import type {
   Node,
   OnSelectBlock,
 } from '@/app/components/workflow/types'
-import { intersection } from 'lodash-es'
+import { intersection } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index 44df18ddf2..91f89b147e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
@@ -44,7 +44,7 @@ const OutputVarList: FC<Props> = ({
     if (!isValid) {
       setToastHandler(Toast.notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }),
       }))
       return
     }
diff --git a/web/app/components/workflow/nodes/_base/components/variable/utils.ts b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
index 5a5a9b826a..a7dc04e571 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/utils.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
@@ -33,8 +33,8 @@ import type {
 import type { PromptItem } from '@/models/debug'
 import type { RAGPipelineVariable } from '@/models/pipeline'
 import type { SchemaTypeDefinition } from '@/service/use-common'
+import { isArray, uniq } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { isArray, uniq } from 'lodash-es'
 import {
   AGENT_OUTPUT_STRUCT,
   FILE_STRUCT,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index 2d96baaf28..7b548c6afc 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -57,7 +57,7 @@ const VarList: FC<Props> = ({
     if (!isValid) {
       setToastHandle(Toast.notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }),
       }))
       return
     }
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 05e2c913ce..e92fc9a3b7 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -11,8 +11,8 @@ import {
   RiLoader4Line,
   RiMoreLine,
 } from '@remixicon/react'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index dd0dfa8682..078ba1ef4f 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -4,7 +4,7 @@ import type { StructuredOutput } from '../../../llm/types'
 import type { Field } from '@/app/components/workflow/nodes/llm/types'
 import type { NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { useHover } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
index 63b392482f..828f7e5ebe 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
@@ -3,7 +3,7 @@ import {
   RiErrorWarningFill,
   RiMoreLine,
 } from '@remixicon/react'
-import { capitalize } from 'lodash-es'
+import { capitalize } from 'es-toolkit/compat'
 import { memo } from 'react'
 import Tooltip from '@/app/components/base/tooltip'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 8e684afa87..2e25d029b4 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -6,7 +6,7 @@ import {
   RiCloseLine,
   RiPlayLargeLine,
 } from '@remixicon/react'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import * as React from 'react'
 import {
   cloneElement,
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
index 59774ab96a..d8fd4d2c57 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -1,9 +1,9 @@
 import type { CommonNodeType, InputVar, TriggerNodeType, ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import type { FlowType } from '@/types/common'
 import type { NodeRunResult, NodeTracing } from '@/types/workflow'
-import { produce } from 'immer'
+import { noop, unionBy } from 'es-toolkit/compat'
 
-import { noop, unionBy } from 'lodash-es'
+import { produce } from 'immer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index fd346e632d..0cc905ae06 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -72,7 +72,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
               className={`system-sm-regular overflow-hidden truncate text-ellipsis
                 ${selectedItem ? 'text-components-input-text-filled' : 'text-components-input-text-disabled'}`}
             >
-              {selectedItem?.name ? t(`${i18nPrefix}.operations.${selectedItem?.name}`) : t(`${i18nPrefix}.operations.title`)}
+              {selectedItem?.name ? t(`${i18nPrefix}.operations.${selectedItem?.name}` as any) as string : t(`${i18nPrefix}.operations.title` as any) as string}
             </span>
           </div>
           <RiArrowDownSLine className={`h-4 w-4 text-text-quaternary ${disabled && 'text-components-input-text-placeholder'} ${open && 'text-text-secondary'}`} />
@@ -83,7 +83,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
         <div className="flex w-[140px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
           <div className="flex flex-col items-start self-stretch p-1">
             <div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
-              <div className="system-xs-medium-uppercase flex grow text-text-tertiary">{t(`${i18nPrefix}.operations.title`)}</div>
+              <div className="system-xs-medium-uppercase flex grow text-text-tertiary">{t(`${i18nPrefix}.operations.title` as any) as string}</div>
             </div>
             {items.map(item => (
               item.value === 'divider'
@@ -100,7 +100,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                       }}
                     >
                       <div className="flex min-h-5 grow items-center gap-1 px-1">
-                        <span className="system-sm-medium flex grow text-text-secondary">{t(`${i18nPrefix}.operations.${item.name}`)}</span>
+                        <span className="system-sm-medium flex grow text-text-secondary">{t(`${i18nPrefix}.operations.${item.name}` as any) as string}</span>
                       </div>
                       {item.value === value && (
                         <div className="flex items-center justify-center">
diff --git a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
index 422cd5a486..f5ea45d60e 100644
--- a/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/index.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import type { AssignerNodeOperation } from '../../types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { RiDeleteBinLine } from '@remixicon/react'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/assigner/hooks.ts b/web/app/components/workflow/nodes/assigner/hooks.ts
index d708222868..a3a5db8bfb 100644
--- a/web/app/components/workflow/nodes/assigner/hooks.ts
+++ b/web/app/components/workflow/nodes/assigner/hooks.ts
@@ -2,7 +2,7 @@ import type {
   Node,
   Var,
 } from '../../types'
-import { uniqBy } from 'lodash-es'
+import { uniqBy } from 'es-toolkit/compat'
 import { useCallback } from 'react'
 import { useNodes } from 'reactflow'
 import {
diff --git a/web/app/components/workflow/nodes/assigner/node.tsx b/web/app/components/workflow/nodes/assigner/node.tsx
index be30104242..3eb9f0d620 100644
--- a/web/app/components/workflow/nodes/assigner/node.tsx
+++ b/web/app/components/workflow/nodes/assigner/node.tsx
@@ -73,7 +73,7 @@ const NodeComponent: FC<NodeProps<AssignerNodeType>> = ({
         nodeType={node?.data.type}
         nodeTitle={node?.data.title}
         rightSlot={
-          writeMode && <Badge className="!ml-auto shrink-0" text={t(`${i18nPrefix}.operations.${writeMode}`)} />
+          writeMode && <Badge className="!ml-auto shrink-0" text={t(`${i18nPrefix}.operations.${writeMode}` as any) as string} />
         }
       />
     </div>
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index c475f1234a..90c230b6bb 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import type { Body, BodyPayload, KeyValue as KeyValueType } from '../../types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { uniqueId } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { uniqueId } from 'lodash-es'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import InputWithVar from '@/app/components/workflow/nodes/_base/components/prompt/editor'
diff --git a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
index b174b7e6de..650ae47156 100644
--- a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
+++ b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
@@ -1,6 +1,6 @@
 import type { KeyValue } from '../types'
 import { useBoolean } from 'ahooks'
-import { uniqueId } from 'lodash-es'
+import { uniqueId } from 'es-toolkit/compat'
 import { useCallback, useEffect, useState } from 'react'
 
 const UNIQUE_ID_PREFIX = 'key-value-'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
index 53df68c337..0bb2245c71 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx
@@ -34,7 +34,7 @@ const ConditionValue = ({
 
   const variableSelector = variable_selector as ValueSelector
 
-  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
+  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}` as any) as string : operator
   const formatValue = useCallback((c: Condition) => {
     const notHasValue = comparisonOperatorNotRequireValue(c.comparison_operator)
     if (notHasValue)
@@ -59,7 +59,7 @@ const ConditionValue = ({
     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(`workflow.nodes.ifElse.optionName.${name.i18nKey}`).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
+        ? (t(`workflow.nodes.ifElse.optionName.${name.i18nKey}` as any) as string).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
             const arr: string[] = b.split('.')
             if (isSystemVar(arr))
               return `{{${b}}}`
@@ -91,9 +91,9 @@ const ConditionValue = ({
           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(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}`) : c.comparison_operator}</div>
+              <div className="system-xs-medium text-text-primary">{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}` as any) as string : 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 bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent">{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
+              {index !== sub_variable_condition.conditions.length - 1 && (<div className="absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent">{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}` as any) as string}</div>)}
             </div>
           ))
         }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index b323e65066..f49b8ef2fc 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -168,13 +168,13 @@ const ConditionItem = ({
     if (isSelect) {
       if (fileAttr?.key === 'type' || condition.comparison_operator === ComparisonOperator.allOf) {
         return FILE_TYPE_OPTIONS.map(item => ({
-          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}` as any) as string,
           value: item.value,
         }))
       }
       if (fileAttr?.key === 'transfer_method') {
         return TRANSFER_METHOD.map(item => ({
-          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}` as any) as string,
           value: item.value,
         }))
       }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index e2753ba6e7..64c6d35d8f 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -39,7 +39,7 @@ const ConditionOperator = ({
   const options = useMemo(() => {
     return getOperators(varType, file).map((o) => {
       return {
-        label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
+        label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}` as any) as string : o,
         value: o,
       }
     })
@@ -65,7 +65,7 @@ const ConditionOperator = ({
           {
             selectedOption
               ? selectedOption.label
-              : t(`${i18nPrefix}.select`)
+              : t(`${i18nPrefix}.select` as any) as string
           }
           <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
         </Button>
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index 29419be011..9133271161 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -4,7 +4,7 @@ import type {
 } from '@/app/components/workflow/types'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import { capitalize } from 'lodash-es'
+import { capitalize } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
index 376c3a670f..c0cd78e4c5 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
@@ -35,7 +35,7 @@ const ConditionValue = ({
   const { t } = useTranslation()
   const nodes = useNodes()
   const variableName = labelName || (isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.'))
-  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
+  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}` as any) as string : operator
   const notHasValue = comparisonOperatorNotRequireValue(operator)
   const node: Node<CommonNodeType> | undefined = nodes.find(n => n.id === variableSelector[0]) as Node<CommonNodeType>
   const isException = isExceptionVariable(variableName, node?.data.type)
@@ -63,7 +63,7 @@ const ConditionValue = ({
     if (isSelect) {
       const name = [...FILE_TYPE_OPTIONS, ...TRANSFER_METHOD].filter(item => item.value === (Array.isArray(value) ? value[0] : value))[0]
       return name
-        ? t(`workflow.nodes.ifElse.optionName.${name.i18nKey}`).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
+        ? (t(`workflow.nodes.ifElse.optionName.${name.i18nKey}` as any) as string).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
             const arr: string[] = b.split('.')
             if (isSystemVar(arr))
               return `{{${b}}}`
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index cdcd7561db..b829ebb040 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -7,7 +7,7 @@ import {
   RiDeleteBinLine,
   RiDraggable,
 } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/iteration/use-config.ts b/web/app/components/workflow/nodes/iteration/use-config.ts
index 50cee67f81..3106577085 100644
--- a/web/app/components/workflow/nodes/iteration/use-config.ts
+++ b/web/app/components/workflow/nodes/iteration/use-config.ts
@@ -2,8 +2,8 @@ import type { ErrorHandleMode, ValueSelector, Var } from '../../types'
 import type { IterationNodeType } from './types'
 import type { Item } from '@/app/components/base/select'
 import type { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
+import { isEqual } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { isEqual } from 'lodash-es'
 import { useCallback } from 'react'
 import {
   useAllBuiltInTools,
diff --git a/web/app/components/workflow/nodes/iteration/use-interactions.ts b/web/app/components/workflow/nodes/iteration/use-interactions.ts
index c6fddff5ad..87a4b8ad5d 100644
--- a/web/app/components/workflow/nodes/iteration/use-interactions.ts
+++ b/web/app/components/workflow/nodes/iteration/use-interactions.ts
@@ -135,7 +135,7 @@ export const useNodeIterationInteractions = () => {
           _isBundled: false,
           _connectedSourceHandleIds: [],
           _connectedTargetHandleIds: [],
-          title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${childNodeType}`)} ${childNodeTypeCount[childNodeType]}` : t(`workflow.blocks.${childNodeType}`),
+          title: nodesWithSameType.length > 0 ? `${t(`workflow.blocks.${childNodeType}` as any) as string} ${childNodeTypeCount[childNodeType]}` : t(`workflow.blocks.${childNodeType}` as any) as string,
           iteration_id: newNodeId,
           type: childNodeType,
         },
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index b3f2701524..5c764cba28 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -121,7 +121,7 @@ const DatasetItem: FC<Props> = ({
         payload.provider === 'external' && (
           <Badge
             className="shrink-0 group-hover/dataset-item:hidden"
-            text={t('dataset.externalTag') as string}
+            text={t('dataset.externalTag')}
           />
         )
       }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
index 815844d434..17fbd8ebca 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
@@ -62,8 +62,15 @@ const ConditionItem = ({
   }, [onRemoveCondition, condition.id])
 
   const currentMetadata = useMemo(() => {
+    // Try to match by metadata_id first (reliable reference)
+    if (condition.metadata_id) {
+      const found = metadataList.find(metadata => metadata.id === condition.metadata_id)
+      if (found)
+        return found
+    }
+    // Fallback to name matching for backward compatibility with old conditions
     return metadataList.find(metadata => metadata.name === condition.name)
-  }, [metadataList, condition.name])
+  }, [metadataList, condition.metadata_id, condition.name])
 
   const handleConditionOperatorChange = useCallback((operator: ComparisonOperator) => {
     onUpdateCondition?.(
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index 8f0430b655..d248d96dc0 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -42,7 +42,7 @@ const ConditionOperator = ({
   const options = useMemo(() => {
     return getOperators(variableType).map((o) => {
       return {
-        label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
+        label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}` as any) as string : o,
         value: o,
       }
     })
@@ -68,7 +68,7 @@ const ConditionOperator = ({
           {
             selectedOption
               ? selectedOption.label
-              : t(`${i18nPrefix}.select`)
+              : t(`${i18nPrefix}.select` as any) as string
           }
           <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
         </Button>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
index c930387c82..574501a27d 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
@@ -1,5 +1,5 @@
 import { RiArrowDownSLine } from '@remixicon/react'
-import { capitalize } from 'lodash-es'
+import { capitalize } from 'es-toolkit/compat'
 import { useState } from 'react'
 import Button from '@/app/components/base/button'
 import {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx
index 9b541b9ea6..8a90a8bf5d 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx
@@ -1,5 +1,5 @@
 import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import {
   useCallback,
   useState,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
index 3a8d96f8f2..82f0decc01 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
@@ -27,11 +27,17 @@ const MetadataTrigger = ({
   useEffect(() => {
     if (selectedDatasetsLoaded) {
       conditions.forEach((condition) => {
-        if (!metadataList.find(metadata => metadata.name === condition.name))
+        // First try to match by metadata_id for reliable reference
+        const foundById = condition.metadata_id && metadataList.find(metadata => metadata.id === condition.metadata_id)
+        // Fallback to name matching only for backward compatibility with old conditions
+        const foundByName = !condition.metadata_id && metadataList.find(metadata => metadata.name === condition.name)
+
+        // Only remove condition if both metadata_id and name matching fail
+        if (!foundById && !foundByName)
           handleRemoveCondition(condition.id)
       })
     }
-  }, [metadataList, handleRemoveCondition, selectedDatasetsLoaded])
+  }, [metadataFilteringConditions, metadataList, handleRemoveCondition, selectedDatasetsLoaded])
 
   return (
     <PortalToFollowElem
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index 02ae01ba16..610aaf5d63 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { ModelConfig } from '../../../types'
 import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
+import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
 import { RiEqualizer2Line } from '@remixicon/react'
@@ -28,8 +29,8 @@ type Props = {
   onRetrievalModeChange: (mode: RETRIEVE_TYPE) => void
   onMultipleRetrievalConfigChange: (config: MultipleRetrievalConfig) => void
   singleRetrievalModelConfig?: ModelConfig
-  onSingleRetrievalModelChange?: (config: ModelConfig) => void
-  onSingleRetrievalModelParamsChange?: (config: ModelConfig) => void
+  onSingleRetrievalModelChange?: ModelParameterModalProps['setModel']
+  onSingleRetrievalModelParamsChange?: ModelParameterModalProps['onCompletionParamsChange']
   readonly?: boolean
   rerankModalOpen: boolean
   onRerankModelOpenChange: (open: boolean) => void
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
index ff5a9e2292..1471be9741 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { KnowledgeRetrievalNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import { intersectionBy } from 'lodash-es'
+import { intersectionBy } from 'es-toolkit/compat'
 import {
   memo,
   useMemo,
@@ -104,7 +104,7 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
                 onRetrievalModeChange={handleRetrievalModeChange}
                 onMultipleRetrievalConfigChange={handleMultipleRetrievalConfigChange}
                 singleRetrievalModelConfig={inputs.single_retrieval_config?.model}
-                onSingleRetrievalModelChange={handleModelChanged as any}
+                onSingleRetrievalModelChange={handleModelChanged}
                 onSingleRetrievalModelParamsChange={handleCompletionParamsChange}
                 readonly={readOnly || !selectedDatasets.length}
                 rerankModalOpen={rerankModelOpen}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/types.ts b/web/app/components/workflow/nodes/knowledge-retrieval/types.ts
index 3b62a1e83f..b28c49bffb 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/types.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/types.ts
@@ -86,6 +86,7 @@ export enum MetadataFilteringVariableType {
 export type MetadataFilteringCondition = {
   id: string
   name: string
+  metadata_id?: string
   comparison_operator: ComparisonOperator
   value?: string | number
 }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
index d0846b3a34..5208200b25 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -9,8 +9,8 @@ import type {
   MultipleRetrievalConfig,
 } from './types'
 import type { DataSet } from '@/models/datasets'
+import { isEqual } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { isEqual } from 'lodash-es'
 import {
   useCallback,
   useEffect,
@@ -305,7 +305,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
     }))
   }, [setInputs])
 
-  const handleAddCondition = useCallback<HandleAddCondition>(({ name, type }) => {
+  const handleAddCondition = useCallback<HandleAddCondition>(({ id, name, type }) => {
     let operator: ComparisonOperator = ComparisonOperator.is
 
     if (type === MetadataFilteringVariableType.number)
@@ -313,6 +313,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
 
     const newCondition = {
       id: uuid4(),
+      metadata_id: id, // Save metadata.id for reliable reference
       name,
       comparison_operator: operator,
     }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/utils.ts b/web/app/components/workflow/nodes/knowledge-retrieval/utils.ts
index 12cf8c053c..d6cd69b39a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/utils.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/utils.ts
@@ -6,7 +6,7 @@ import type {
 import {
   uniq,
   xorBy,
-} from 'lodash-es'
+} from 'es-toolkit/compat'
 import { DATASET_DEFAULT } from '@/config'
 import {
   DEFAULT_WEIGHTED_SCORE,
diff --git a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
index 8dd817a5ad..1ca931d32c 100644
--- a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
@@ -66,13 +66,13 @@ const FilterCondition: FC<Props> = ({
     if (isSelect) {
       if (condition.key === 'type' || condition.comparison_operator === ComparisonOperator.allOf) {
         return FILE_TYPE_OPTIONS.map(item => ({
-          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}` as any) as string,
           value: item.value,
         }))
       }
       if (condition.key === 'transfer_method') {
         return TRANSFER_METHOD.map(item => ({
-          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}` as any) as string,
           value: item.value,
         }))
       }
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
index 776ad6804c..64d7a24a53 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx
@@ -121,7 +121,7 @@ const ConfigPromptItem: FC<Props> = ({
 
           <Tooltip
             popupContent={
-              <div className="max-w-[180px]">{t(`${i18nPrefix}.roleDescription.${payload.role}`)}</div>
+              <div className="max-w-[180px]">{t(`${i18nPrefix}.roleDescription.${payload.role}` as any) as string}</div>
             }
             triggerClassName="w-4 h-4"
           />
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx
index cfe63159d3..557cddfb61 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx
@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import {
   createContext,
   useContext,
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
index 84c28b236e..1673c80f4f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
@@ -1,8 +1,8 @@
 import type { VisualEditorProps } from '.'
 import type { Field } from '../../../types'
 import type { EditData } from './edit-card'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import Toast from '@/app/components/base/toast'
 import { ArrayType, Type } from '../../../types'
 import { findPropertyWithPath } from '../../../utils'
diff --git a/web/app/components/workflow/nodes/llm/use-single-run-form-params.ts b/web/app/components/workflow/nodes/llm/use-single-run-form-params.ts
index ae500074ff..f7cb609f0e 100644
--- a/web/app/components/workflow/nodes/llm/use-single-run-form-params.ts
+++ b/web/app/components/workflow/nodes/llm/use-single-run-form-params.ts
@@ -2,7 +2,7 @@ import type { RefObject } from 'react'
 import type { LLMNodeType } from './types'
 import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
 import type { InputVar, PromptItem, Var, Variable } from '@/app/components/workflow/types'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { InputVarType, VarType } from '@/app/components/workflow/types'
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
index e13832ed46..dfe16902fd 100644
--- 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
@@ -34,7 +34,7 @@ const ConditionValue = ({
 
   const variableSelector = variable_selector as ValueSelector
 
-  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
+  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}` as any) as string : operator
   const formatValue = useCallback((c: Condition) => {
     const notHasValue = comparisonOperatorNotRequireValue(c.comparison_operator)
     if (notHasValue)
@@ -59,7 +59,7 @@ const ConditionValue = ({
     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(`workflow.nodes.ifElse.optionName.${name.i18nKey}`).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
+        ? (t(`workflow.nodes.ifElse.optionName.${name.i18nKey}` as any) as string).replace(/\{\{#([^#]*)#\}\}/g, (a: string, b: string) => {
             const arr: string[] = b.split('.')
             if (isSystemVar(arr))
               return `{{${b}}}`
@@ -91,9 +91,9 @@ const ConditionValue = ({
           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(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}`) : c.comparison_operator}</div>
+              <div className="system-xs-medium text-text-primary">{isComparisonOperatorNeedTranslate(c.comparison_operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${c.comparison_operator}` as any) as string : 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 bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent">{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}`)}</div>)}
+              {index !== sub_variable_condition.conditions.length - 1 && (<div className="absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4 text-text-accent">{t(`${i18nPrefix}.${sub_variable_condition.logical_operator}` as any) as string}</div>)}
             </div>
           ))
         }
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
index ea3e2ef5be..95e7b58dd0 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
@@ -145,13 +145,13 @@ const ConditionItem = ({
     if (isSelect) {
       if (fileAttr?.key === 'type' || condition.comparison_operator === ComparisonOperator.allOf) {
         return FILE_TYPE_OPTIONS.map(item => ({
-          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}` as any) as string,
           value: item.value,
         }))
       }
       if (fileAttr?.key === 'transfer_method') {
         return TRANSFER_METHOD.map(item => ({
-          name: t(`${optionNameI18NPrefix}.${item.i18nKey}`),
+          name: t(`${optionNameI18NPrefix}.${item.i18nKey}` as any) as string,
           value: item.value,
         }))
       }
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
index a33b2b7727..9943109c2b 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
@@ -39,7 +39,7 @@ const ConditionOperator = ({
   const options = useMemo(() => {
     return getOperators(varType, file).map((o) => {
       return {
-        label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
+        label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}` as any) as string : o,
         value: o,
       }
     })
@@ -65,7 +65,7 @@ const ConditionOperator = ({
           {
             selectedOption
               ? selectedOption.label
-              : t(`${i18nPrefix}.select`)
+              : t(`${i18nPrefix}.select` as any) as string
           }
           <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
         </Button>
diff --git a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
index 29419be011..9133271161 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
@@ -4,7 +4,7 @@ import type {
 } from '@/app/components/workflow/types'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import { capitalize } from 'lodash-es'
+import { capitalize } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/workflow/nodes/loop/components/condition-value.tsx b/web/app/components/workflow/nodes/loop/components/condition-value.tsx
index c24a1a18a6..10fa2cef42 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-value.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-value.tsx
@@ -27,7 +27,7 @@ const ConditionValue = ({
   value,
 }: ConditionValueProps) => {
   const { t } = useTranslation()
-  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
+  const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}` as any) as string : operator
   const notHasValue = comparisonOperatorNotRequireValue(operator)
   const formatValue = useMemo(() => {
     if (notHasValue)
@@ -50,7 +50,7 @@ const ConditionValue = ({
     if (isSelect) {
       const name = [...FILE_TYPE_OPTIONS, ...TRANSFER_METHOD].filter(item => item.value === (Array.isArray(value) ? value[0] : value))[0]
       return name
-        ? t(`workflow.nodes.ifElse.optionName.${name.i18nKey}`).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
+        ? (t(`workflow.nodes.ifElse.optionName.${name.i18nKey}` as any) as string).replace(/\{\{#([^#]*)#\}\}/g, (a, b) => {
             const arr: string[] = b.split('.')
             if (isSystemVar(arr))
               return `{{${b}}}`
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
index 973e78ae73..949c53ca97 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx
@@ -30,7 +30,7 @@ const Item = ({
     if (!isValid) {
       Toast.notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: t('workflow.env.modal.name') }) as string,
       })
       return false
     }
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 288e486ea7..61921296d4 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -56,7 +56,7 @@ const AddExtractParameter: FC<Props> = ({
         if (!isValid) {
           Toast.notify({
             type: 'error',
-            message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+            message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }) as string,
           })
           return
         }
diff --git a/web/app/components/workflow/nodes/parameter-extractor/use-single-run-form-params.ts b/web/app/components/workflow/nodes/parameter-extractor/use-single-run-form-params.ts
index abf187d6e5..c53df96688 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/use-single-run-form-params.ts
+++ b/web/app/components/workflow/nodes/parameter-extractor/use-single-run-form-params.ts
@@ -2,7 +2,7 @@ import type { RefObject } from 'react'
 import type { ParameterExtractorNodeType } from './types'
 import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
 import type { InputVar, Var, Variable } from '@/app/components/workflow/types'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { InputVarType, VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
index 2af2f8036a..a33ba03550 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import type { Topic } from '../types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
-import { uniqueId } from 'lodash-es'
+import { uniqueId } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index 8e61f918a5..8527ce3ad3 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { RiDraggable } from '@remixicon/react'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/question-classifier/use-single-run-form-params.ts b/web/app/components/workflow/nodes/question-classifier/use-single-run-form-params.ts
index 095809eba2..9f2ad5fa39 100644
--- a/web/app/components/workflow/nodes/question-classifier/use-single-run-form-params.ts
+++ b/web/app/components/workflow/nodes/question-classifier/use-single-run-form-params.ts
@@ -2,7 +2,7 @@ import type { RefObject } from 'react'
 import type { QuestionClassifierNodeType } from './types'
 import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form'
 import type { InputVar, Var, Variable } from '@/app/components/workflow/types'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { InputVarType, VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index a506c51e31..83676ed21f 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -5,7 +5,7 @@ import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import { useBoolean, useHover } from 'ahooks'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index bda45ca5dd..4d3c6cd871 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -45,7 +45,7 @@ const VarList: FC<Props> = ({
       if (errorMsgKey) {
         Toast.notify({
           type: 'error',
-          message: t(errorMsgKey, { key: t(typeName) }),
+          message: t(errorMsgKey as any, { key: t(typeName as any) as string }) as string,
         })
         return false
       }
diff --git a/web/app/components/workflow/nodes/start/use-config.ts b/web/app/components/workflow/nodes/start/use-config.ts
index 8eed650f98..e563e710ce 100644
--- a/web/app/components/workflow/nodes/start/use-config.ts
+++ b/web/app/components/workflow/nodes/start/use-config.ts
@@ -99,7 +99,7 @@ const useConfig = (id: string, payload: StartNodeType) => {
     if (errorMsgKey) {
       Toast.notify({
         type: 'error',
-        message: t(errorMsgKey, { key: t(typeName) }),
+        message: t(errorMsgKey as any, { key: t(typeName as any) as string }) as string,
       })
       return false
     }
diff --git a/web/app/components/workflow/nodes/tool/components/copy-id.tsx b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
index 8e53970749..6a608fa0b6 100644
--- a/web/app/components/workflow/nodes/tool/components/copy-id.tsx
+++ b/web/app/components/workflow/nodes/tool/components/copy-id.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { RiFileCopyLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
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
index 8b1bd46eeb..23f3868c59 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -4,8 +4,8 @@ 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 { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/trigger-plugin/hooks/use-trigger-auth-flow.ts b/web/app/components/workflow/nodes/trigger-plugin/hooks/use-trigger-auth-flow.ts
index 36bcbf1cc7..f551f2f420 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/hooks/use-trigger-auth-flow.ts
+++ b/web/app/components/workflow/nodes/trigger-plugin/hooks/use-trigger-auth-flow.ts
@@ -4,11 +4,11 @@ import {
   useBuildTriggerSubscription,
   useCreateTriggerSubscriptionBuilder,
   useUpdateTriggerSubscriptionBuilder,
-  useVerifyTriggerSubscriptionBuilder,
+  useVerifyAndUpdateTriggerSubscriptionBuilder,
 } from '@/service/use-triggers'
 
 // Helper function to serialize complex values to strings for backend encryption
-const serializeFormValues = (values: Record<string, any>): Record<string, string> => {
+const serializeFormValues = (values: Record<string, unknown>): Record<string, string> => {
   const result: Record<string, string> = {}
 
   for (const [key, value] of Object.entries(values)) {
@@ -23,6 +23,17 @@ const serializeFormValues = (values: Record<string, any>): Record<string, string
   return result
 }
 
+const getErrorMessage = (error: unknown, fallback: string) => {
+  if (error instanceof Error && error.message)
+    return error.message
+  if (typeof error === 'object' && error && 'message' in error) {
+    const message = (error as { message?: string }).message
+    if (typeof message === 'string' && message)
+      return message
+  }
+  return fallback
+}
+
 export type AuthFlowStep = 'auth' | 'params' | 'complete'
 
 export type AuthFlowState = {
@@ -34,8 +45,8 @@ export type AuthFlowState = {
 
 export type AuthFlowActions = {
   startAuth: () => Promise<void>
-  verifyAuth: (credentials: Record<string, any>) => Promise<void>
-  completeConfig: (parameters: Record<string, any>, properties?: Record<string, any>, name?: string) => Promise<void>
+  verifyAuth: (credentials: Record<string, unknown>) => Promise<void>
+  completeConfig: (parameters: Record<string, unknown>, properties?: Record<string, unknown>, name?: string) => Promise<void>
   reset: () => void
 }
 
@@ -47,7 +58,7 @@ export const useTriggerAuthFlow = (provider: TriggerWithProvider): AuthFlowState
 
   const createBuilder = useCreateTriggerSubscriptionBuilder()
   const updateBuilder = useUpdateTriggerSubscriptionBuilder()
-  const verifyBuilder = useVerifyTriggerSubscriptionBuilder()
+  const verifyBuilder = useVerifyAndUpdateTriggerSubscriptionBuilder()
   const buildSubscription = useBuildTriggerSubscription()
 
   const startAuth = useCallback(async () => {
@@ -64,8 +75,8 @@ export const useTriggerAuthFlow = (provider: TriggerWithProvider): AuthFlowState
       setBuilderId(response.subscription_builder.id)
       setStep('auth')
     }
-    catch (err: any) {
-      setError(err.message || 'Failed to start authentication flow')
+    catch (err: unknown) {
+      setError(getErrorMessage(err, 'Failed to start authentication flow'))
       throw err
     }
     finally {
@@ -73,7 +84,7 @@ export const useTriggerAuthFlow = (provider: TriggerWithProvider): AuthFlowState
     }
   }, [provider.name, createBuilder, builderId])
 
-  const verifyAuth = useCallback(async (credentials: Record<string, any>) => {
+  const verifyAuth = useCallback(async (credentials: Record<string, unknown>) => {
     if (!builderId) {
       setError('No builder ID available')
       return
@@ -96,8 +107,8 @@ export const useTriggerAuthFlow = (provider: TriggerWithProvider): AuthFlowState
 
       setStep('params')
     }
-    catch (err: any) {
-      setError(err.message || 'Authentication verification failed')
+    catch (err: unknown) {
+      setError(getErrorMessage(err, 'Authentication verification failed'))
       throw err
     }
     finally {
@@ -106,8 +117,8 @@ export const useTriggerAuthFlow = (provider: TriggerWithProvider): AuthFlowState
   }, [provider.name, builderId, updateBuilder, verifyBuilder])
 
   const completeConfig = useCallback(async (
-    parameters: Record<string, any>,
-    properties: Record<string, any> = {},
+    parameters: Record<string, unknown>,
+    properties: Record<string, unknown> = {},
     name?: string,
   ) => {
     if (!builderId) {
@@ -134,8 +145,8 @@ export const useTriggerAuthFlow = (provider: TriggerWithProvider): AuthFlowState
 
       setStep('complete')
     }
-    catch (err: any) {
-      setError(err.message || 'Configuration failed')
+    catch (err: unknown) {
+      setError(getErrorMessage(err, 'Configuration failed'))
       throw err
     }
     finally {
diff --git a/web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx b/web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx
index 7c1f4e8f9d..de0ac01cb6 100644
--- a/web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx
+++ b/web/app/components/workflow/nodes/trigger-schedule/components/mode-switcher.tsx
@@ -15,12 +15,12 @@ const ModeSwitcher = ({ mode, onChange }: ModeSwitcherProps) => {
   const options = [
     {
       Icon: RiCalendarLine,
-      text: t('workflow.nodes.triggerSchedule.mode.visual'),
+      text: t('workflow.nodes.triggerSchedule.modeVisual'),
       value: 'visual' as const,
     },
     {
       Icon: RiCodeLine,
-      text: t('workflow.nodes.triggerSchedule.mode.cron'),
+      text: t('workflow.nodes.triggerSchedule.modeCron'),
       value: 'cron' as const,
     },
   ]
diff --git a/web/app/components/workflow/nodes/trigger-webhook/use-config.ts b/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
index dec79b8eaf..03cc72b237 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
+++ b/web/app/components/workflow/nodes/trigger-webhook/use-config.ts
@@ -103,9 +103,9 @@ const useConfig = (id: string, payload: WebhookTriggerNodeType) => {
       if (!isValid) {
         Toast.notify({
           type: 'error',
-          message: t(`appDebug.varKeyError.${errorMessageKey}`, {
+          message: t(`appDebug.varKeyError.${errorMessageKey}` as any, {
             key: t('appDebug.variableConfig.varName'),
-          }),
+          }) as string,
         })
         return false
       }
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
index d722c1d231..d1274ee65f 100644
--- 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
@@ -120,7 +120,7 @@ const NodeVariableItem = ({
         {VariableIcon}
         {VariableName}
       </div>
-      {writeMode && <Badge className="shrink-0" text={t(`${i18nPrefix}.operations.${writeMode}`)} />}
+      {writeMode && <Badge className="shrink-0" text={t(`${i18nPrefix}.operations.${writeMode}` as any) as string} />}
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
index 8fb1cfba61..f8b6298a9b 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-group-item.tsx
@@ -96,7 +96,7 @@ const VarGroupItem: FC<Props> = ({
     if (!isValid) {
       Toast.notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: errorKey }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: errorKey }) as string,
       })
       return
     }
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
index 19ead7ead1..85ff2def9a 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { noop } from 'es-toolkit/compat'
 import { produce } from 'immer'
-import { noop } from 'lodash-es'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/nodes/variable-assigner/hooks.ts b/web/app/components/workflow/nodes/variable-assigner/hooks.ts
index b20cee79c7..5c2fe36922 100644
--- a/web/app/components/workflow/nodes/variable-assigner/hooks.ts
+++ b/web/app/components/workflow/nodes/variable-assigner/hooks.ts
@@ -7,9 +7,9 @@ import type {
   VarGroupItem,
   VariableAssignerNodeType,
 } from './types'
-import { produce } from 'immer'
+import { uniqBy } from 'es-toolkit/compat'
 
-import { uniqBy } from 'lodash-es'
+import { produce } from 'immer'
 import { useCallback } from 'react'
 import {
   useNodes,
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index 3f5472ad56..d1b178ec4c 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -11,7 +11,7 @@ import {
   RiLinkUnlinkM,
 } from '@remixicon/react'
 import { useClickAway } from 'ahooks'
-import { escape } from 'lodash-es'
+import { escape } from 'es-toolkit/compat'
 import {
   memo,
   useEffect,
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
index 2c6e014b15..fb191bc05a 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/hooks.ts
@@ -5,11 +5,11 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import {
   mergeRegister,
 } from '@lexical/utils'
+import { escape } from 'es-toolkit/compat'
 import {
   CLICK_COMMAND,
   COMMAND_PRIORITY_LOW,
 } from 'lexical'
-import { escape } from 'lodash-es'
 import {
   useCallback,
   useEffect,
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
index a43179026e..9fec4f7d01 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
@@ -1,6 +1,6 @@
 import type { ConversationVariable } from '@/app/components/workflow/types'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
-import { capitalize } from 'lodash-es'
+import { capitalize } from 'es-toolkit/compat'
 import { memo, useState } from 'react'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 33e2e07376..aafeffb54a 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -127,7 +127,7 @@ const ChatVariableModal = ({
     if (!isValid) {
       notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: t('workflow.env.modal.name') }) as string,
       })
       return false
     }
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index 6e130180d0..4542e1fb90 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -5,7 +5,7 @@ import type {
 import { RiCloseLine } from '@remixicon/react'
 import { useMount } from 'ahooks'
 import copy from 'copy-to-clipboard'
-import { capitalize, noop } from 'lodash-es'
+import { capitalize, noop } from 'es-toolkit/compat'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks.ts b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
index 6eb1ea0b76..b771d97006 100644
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@@ -5,8 +5,8 @@ import type {
   Inputs,
 } from '@/app/components/base/chat/types'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import { uniqBy } from 'es-toolkit/compat'
 import { produce, setAutoFreeze } from 'immer'
-import { uniqBy } from 'lodash-es'
 import {
   useCallback,
   useEffect,
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index 3005b68a9c..2b63cf4751 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -1,7 +1,7 @@
 import type { StartNodeType } from '../../nodes/start/types'
 
 import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
-import { debounce, noop } from 'lodash-es'
+import { debounce, noop } from 'es-toolkit/compat'
 import {
   memo,
   useCallback,
diff --git a/web/app/components/workflow/panel/env-panel/env-item.tsx b/web/app/components/workflow/panel/env-panel/env-item.tsx
index 64d6610643..582539b85b 100644
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -1,6 +1,6 @@
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
-import { capitalize } from 'lodash-es'
+import { capitalize } from 'es-toolkit/compat'
 import { memo, useState } from 'react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index e253d6c27c..383e15f20b 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -37,7 +37,7 @@ const VariableModal = ({
     if (!isValid) {
       notify({
         type: 'error',
-        message: t(`appDebug.varKeyError.${errorMessageKey}`, { key: t('workflow.env.modal.name') }),
+        message: t(`appDebug.varKeyError.${errorMessageKey}` as any, { key: t('workflow.env.modal.name') }) as string,
       })
       return false
     }
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index f82579dedb..458dd27692 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -1,5 +1,5 @@
 import type { GlobalVariable } from '@/app/components/workflow/types'
-import { capitalize } from 'lodash-es'
+import { capitalize } from 'es-toolkit/compat'
 import { memo } from 'react'
 
 import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
diff --git a/web/app/components/workflow/run/loop-result-panel.tsx b/web/app/components/workflow/run/loop-result-panel.tsx
index 8238be82f3..6e37657057 100644
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-result-panel.tsx
@@ -43,7 +43,7 @@ const LoopResultPanel: FC<Props> = ({
       <div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
         <div className="flex h-8 shrink-0 items-center justify-between">
           <div className="system-xl-semibold truncate text-text-primary">
-            {t(`${i18nPrefix}.testRunLoop`)}
+            {t(`${i18nPrefix}.testRunLoop` as any) as string}
           </div>
           <div className="ml-2 shrink-0 cursor-pointer p-1" onClick={onHide}>
             <RiCloseLine className="h-4 w-4 text-text-tertiary" />
diff --git a/web/app/components/workflow/run/utils/format-log/agent/index.ts b/web/app/components/workflow/run/utils/format-log/agent/index.ts
index a4c1ea5167..f86e4b33bb 100644
--- a/web/app/components/workflow/run/utils/format-log/agent/index.ts
+++ b/web/app/components/workflow/run/utils/format-log/agent/index.ts
@@ -1,5 +1,5 @@
 import type { AgentLogItem, AgentLogItemWithChildren, NodeTracing } from '@/types/workflow'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import { BlockEnum } from '@/app/components/workflow/types'
 
 const supportedAgentLogNodes = [BlockEnum.Agent, BlockEnum.Tool]
diff --git a/web/app/components/workflow/run/utils/format-log/index.ts b/web/app/components/workflow/run/utils/format-log/index.ts
index 2c89e91571..1dbe8f1682 100644
--- a/web/app/components/workflow/run/utils/format-log/index.ts
+++ b/web/app/components/workflow/run/utils/format-log/index.ts
@@ -1,5 +1,5 @@
 import type { NodeTracing } from '@/types/workflow'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import { BlockEnum } from '../../../types'
 import formatAgentNode from './agent'
 import { addChildrenToIterationNode } from './iteration'
diff --git a/web/app/components/workflow/run/utils/format-log/iteration/index.spec.ts b/web/app/components/workflow/run/utils/format-log/iteration/index.spec.ts
index 855ac4c69d..8b4416f529 100644
--- a/web/app/components/workflow/run/utils/format-log/iteration/index.spec.ts
+++ b/web/app/components/workflow/run/utils/format-log/iteration/index.spec.ts
@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import format from '.'
 import graphToLogStruct from '../graph-to-log-struct'
 
diff --git a/web/app/components/workflow/run/utils/format-log/loop/index.spec.ts b/web/app/components/workflow/run/utils/format-log/loop/index.spec.ts
index aee2a432c3..3d31e43ba3 100644
--- a/web/app/components/workflow/run/utils/format-log/loop/index.spec.ts
+++ b/web/app/components/workflow/run/utils/format-log/loop/index.spec.ts
@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import format from '.'
 import graphToLogStruct from '../graph-to-log-struct'
 
diff --git a/web/app/components/workflow/store/workflow/workflow-draft-slice.ts b/web/app/components/workflow/store/workflow/workflow-draft-slice.ts
index 83792e84a6..68265a8eba 100644
--- a/web/app/components/workflow/store/workflow/workflow-draft-slice.ts
+++ b/web/app/components/workflow/store/workflow/workflow-draft-slice.ts
@@ -5,7 +5,7 @@ import type {
   EnvironmentVariable,
   Node,
 } from '@/app/components/workflow/types'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 
 type DebouncedFunc = {
   (fn: () => void): void
diff --git a/web/app/components/workflow/utils/elk-layout.ts b/web/app/components/workflow/utils/elk-layout.ts
index 05f81872bb..1a4bbf2d50 100644
--- a/web/app/components/workflow/utils/elk-layout.ts
+++ b/web/app/components/workflow/utils/elk-layout.ts
@@ -5,7 +5,7 @@ import type {
   Node,
 } from '@/app/components/workflow/types'
 import ELK from 'elkjs/lib/elk.bundled.js'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import {
   CUSTOM_NODE,
   NODE_LAYOUT_HORIZONTAL_PADDING,
diff --git a/web/app/components/workflow/utils/workflow-init.ts b/web/app/components/workflow/utils/workflow-init.ts
index 18ba643d30..fa211934e4 100644
--- a/web/app/components/workflow/utils/workflow-init.ts
+++ b/web/app/components/workflow/utils/workflow-init.ts
@@ -9,7 +9,7 @@ import type {
 } from '../types'
 import {
   cloneDeep,
-} from 'lodash-es'
+} from 'es-toolkit/compat'
 import {
   getConnectedEdges,
 } from 'reactflow'
diff --git a/web/app/components/workflow/utils/workflow.ts b/web/app/components/workflow/utils/workflow.ts
index 43fbd687c1..7fabc51a45 100644
--- a/web/app/components/workflow/utils/workflow.ts
+++ b/web/app/components/workflow/utils/workflow.ts
@@ -4,7 +4,7 @@ import type {
 } from '../types'
 import {
   uniqBy,
-} from 'lodash-es'
+} from 'es-toolkit/compat'
 import {
   getOutgoers,
 } from 'reactflow'
diff --git a/web/app/components/workflow/variable-inspect/index.tsx b/web/app/components/workflow/variable-inspect/index.tsx
index ced7861e00..775c761eca 100644
--- a/web/app/components/workflow/variable-inspect/index.tsx
+++ b/web/app/components/workflow/variable-inspect/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import {
   useCallback,
   useMemo,
diff --git a/web/app/components/workflow/workflow-history-store.tsx b/web/app/components/workflow/workflow-history-store.tsx
index 502cb733cb..6729fe50e3 100644
--- a/web/app/components/workflow/workflow-history-store.tsx
+++ b/web/app/components/workflow/workflow-history-store.tsx
@@ -3,8 +3,8 @@ import type { TemporalState } from 'zundo'
 import type { StoreApi } from 'zustand'
 import type { WorkflowHistoryEventT } from './hooks'
 import type { Edge, Node } from './types'
+import { noop } from 'es-toolkit/compat'
 import isDeepEqual from 'fast-deep-equal'
-import { noop } from 'lodash-es'
 import { createContext, useContext, useMemo, useState } from 'react'
 import { temporal } from 'zundo'
 import { create } from 'zustand'
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 5f2446352e..efd74d42d5 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { RiExternalLinkLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import {
   useRouter,
   useSearchParams,
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index 2b50c1c452..f06b952b68 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -108,7 +108,7 @@ const ForgotPasswordForm = () => {
                           {...register('email')}
                           placeholder={t('login.emailPlaceholder') || ''}
                         />
-                        {errors.email && <span className="text-sm text-red-400">{t(`${errors.email?.message}`)}</span>}
+                        {errors.email && <span className="text-sm text-red-400">{t(`${errors.email?.message}` as any) as string}</span>}
                       </div>
                     </div>
                   )}
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 60de8e0501..f0290cca50 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -138,7 +138,7 @@ const InstallForm = () => {
                         placeholder={t('login.emailPlaceholder') || ''}
                         className="system-sm-regular w-full appearance-none rounded-md border border-transparent bg-components-input-bg-normal px-3 py-[7px] text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
                       />
-                      {errors.email && <span className="text-sm text-red-400">{t(`${errors.email?.message}`)}</span>}
+                      {errors.email && <span className="text-sm text-red-400">{t(`${errors.email?.message}` as any) as string}</span>}
                     </div>
 
                   </div>
@@ -154,7 +154,7 @@ const InstallForm = () => {
                         className="system-sm-regular w-full appearance-none rounded-md border border-transparent bg-components-input-bg-normal px-3 py-[7px] text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
                       />
                     </div>
-                    {errors.name && <span className="text-sm text-red-400">{t(`${errors.name.message}`)}</span>}
+                    {errors.name && <span className="text-sm text-red-400">{t(`${errors.name.message}` as any) as string}</span>}
                   </div>
 
                   <div className="mb-5">
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 25752c54a5..3a62ba39a0 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -67,6 +67,7 @@ const LocaleLayout = async ({
     [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
     [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
     [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
+    [DatasetAttr.DATA_PUBLIC_BATCH_CONCURRENCY]: process.env.NEXT_PUBLIC_BATCH_CONCURRENCY,
   }
 
   return (
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index c7e15f8b3f..479f550ae9 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 9ab2d9314c..2e95ac8663 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -1,5 +1,5 @@
 import type { ResponseError } from '@/service/fetch'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index 9abd4366e1..c4923959ab 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -1,6 +1,7 @@
 'use client'
+import type { Locale } from '@/i18n-config'
 import { RiAccountCircleLine } from '@remixicon/react'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
@@ -123,7 +124,7 @@ export default function InviteSettingsPage() {
               defaultValue={LanguagesSupported[0]}
               items={languages.filter(item => item.supported)}
               onSelect={(item) => {
-                setLanguage(item.value as string)
+                setLanguage(item.value as Locale)
               }}
             />
           </div>
diff --git a/web/app/signup/components/input-mail.tsx b/web/app/signup/components/input-mail.tsx
index b001e1f8b0..26ac99d2c6 100644
--- a/web/app/signup/components/input-mail.tsx
+++ b/web/app/signup/components/input-mail.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { MailSendResponse } from '@/service/use-common'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import Link from 'next/link'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/config/index.ts b/web/config/index.ts
index 96e0f7bc4a..b225c8f62a 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -164,6 +164,13 @@ const COOKIE_DOMAIN = getStringConfig(
   DatasetAttr.DATA_PUBLIC_COOKIE_DOMAIN,
   '',
 ).trim()
+
+export const BATCH_CONCURRENCY = getNumberConfig(
+  process.env.NEXT_PUBLIC_BATCH_CONCURRENCY,
+  DatasetAttr.DATA_PUBLIC_BATCH_CONCURRENCY,
+  5, // default
+)
+
 export const CSRF_COOKIE_NAME = () => {
   if (COOKIE_DOMAIN)
     return 'csrf_token'
diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx
index b7a47048f3..cb4cab65b7 100644
--- a/web/context/app-context.tsx
+++ b/web/context/app-context.tsx
@@ -3,7 +3,7 @@
 import type { FC, ReactNode } from 'react'
 import type { ICurrentWorkspace, LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
 import { useQueryClient } from '@tanstack/react-query'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useCallback, useEffect, useMemo } from 'react'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import { setUserId, setUserProperties } from '@/app/components/base/amplitude'
diff --git a/web/context/datasets-context.tsx b/web/context/datasets-context.tsx
index 4ca7ad311e..f35767bc21 100644
--- a/web/context/datasets-context.tsx
+++ b/web/context/datasets-context.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { DataSet } from '@/models/datasets'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { createContext, useContext } from 'use-context-selector'
 
 export type DatasetsContextValue = {
diff --git a/web/context/debug-configuration.ts b/web/context/debug-configuration.ts
index 51ba4ab626..2518af6260 100644
--- a/web/context/debug-configuration.ts
+++ b/web/context/debug-configuration.ts
@@ -22,7 +22,7 @@ import type {
   TextToSpeechConfig,
 } from '@/models/debug'
 import type { VisionSettings } from '@/types/app'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { createContext, useContext } from 'use-context-selector'
 import { ANNOTATION_DEFAULT, DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import { PromptMode } from '@/models/debug'
diff --git a/web/context/explore-context.ts b/web/context/explore-context.ts
index 688b9036f9..1a7b35a09b 100644
--- a/web/context/explore-context.ts
+++ b/web/context/explore-context.ts
@@ -1,5 +1,5 @@
 import type { InstalledApp } from '@/models/explore'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { createContext } from 'use-context-selector'
 
 type IExplore = {
diff --git a/web/context/i18n.ts b/web/context/i18n.ts
index 773569fa21..92d66a1b2f 100644
--- a/web/context/i18n.ts
+++ b/web/context/i18n.ts
@@ -1,5 +1,5 @@
 import type { Locale } from '@/i18n-config'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import {
   createContext,
   useContext,
diff --git a/web/context/mitt-context.tsx b/web/context/mitt-context.tsx
index 6c6209b5a5..0fc160613a 100644
--- a/web/context/mitt-context.tsx
+++ b/web/context/mitt-context.tsx
@@ -1,4 +1,4 @@
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import { useMitt } from '@/hooks/use-mitt'
 
diff --git a/web/context/modal-context.tsx b/web/context/modal-context.tsx
index 2afd1b7b2f..5b417a64ff 100644
--- a/web/context/modal-context.tsx
+++ b/web/context/modal-context.tsx
@@ -22,7 +22,7 @@ import type {
   ExternalDataTool,
 } from '@/models/common'
 import type { ModerationConfig, PromptVariable } from '@/models/debug'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import dynamic from 'next/dynamic'
 import { useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
diff --git a/web/context/provider-context.tsx b/web/context/provider-context.tsx
index eb2a034f3b..3394ea20f6 100644
--- a/web/context/provider-context.tsx
+++ b/web/context/provider-context.tsx
@@ -5,7 +5,7 @@ import type { Model, ModelProvider } from '@/app/components/header/account-setti
 import type { RETRIEVE_METHOD } from '@/types/app'
 import { useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
diff --git a/web/hooks/use-format-time-from-now.ts b/web/hooks/use-format-time-from-now.ts
index 09d8db7321..970a64e7d5 100644
--- a/web/hooks/use-format-time-from-now.ts
+++ b/web/hooks/use-format-time-from-now.ts
@@ -1,8 +1,8 @@
-import type { Locale } from '@/i18n-config'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useCallback } from 'react'
 import { useI18N } from '@/context/i18n'
+import { localeMap } from '@/i18n-config/language'
 import 'dayjs/locale/de'
 import 'dayjs/locale/es'
 import 'dayjs/locale/fa'
@@ -26,30 +26,6 @@ import 'dayjs/locale/zh-tw'
 
 dayjs.extend(relativeTime)
 
-const localeMap: Record<Locale, string> = {
-  'en-US': 'en',
-  'zh-Hans': 'zh-cn',
-  'zh-Hant': 'zh-tw',
-  'pt-BR': 'pt-br',
-  'es-ES': 'es',
-  'fr-FR': 'fr',
-  'de-DE': 'de',
-  'ja-JP': 'ja',
-  'ko-KR': 'ko',
-  'ru-RU': 'ru',
-  'it-IT': 'it',
-  'th-TH': 'th',
-  'id-ID': 'id',
-  'uk-UA': 'uk',
-  'vi-VN': 'vi',
-  'ro-RO': 'ro',
-  'pl-PL': 'pl',
-  'hi-IN': 'hi',
-  'tr-TR': 'tr',
-  'fa-IR': 'fa',
-  'sl-SI': 'sl',
-}
-
 export const useFormatTimeFromNow = () => {
   const { locale } = useI18N()
   const formatTimeFromNow = useCallback((time: number) => {
diff --git a/web/hooks/use-knowledge.ts b/web/hooks/use-knowledge.ts
index 400d9722de..e3c2cd49d1 100644
--- a/web/hooks/use-knowledge.ts
+++ b/web/hooks/use-knowledge.ts
@@ -5,14 +5,14 @@ export const useKnowledge = () => {
   const { t } = useTranslation()
 
   const formatIndexingTechnique = useCallback((indexingTechnique: string) => {
-    return t(`dataset.indexingTechnique.${indexingTechnique}`)
+    return t(`dataset.indexingTechnique.${indexingTechnique}` as any) as string
   }, [t])
 
   const formatIndexingMethod = useCallback((indexingMethod: string, isEco?: boolean) => {
     if (isEco)
       return t('dataset.indexingMethod.invertedIndex')
 
-    return t(`dataset.indexingMethod.${indexingMethod}`)
+    return t(`dataset.indexingMethod.${indexingMethod}` as any) as string
   }, [t])
 
   const formatIndexingTechniqueAndMethod = useCallback((indexingTechnique: string, indexingMethod: string) => {
diff --git a/web/hooks/use-metadata.ts b/web/hooks/use-metadata.ts
index a51e6b150e..6b0946b68d 100644
--- a/web/hooks/use-metadata.ts
+++ b/web/hooks/use-metadata.ts
@@ -86,7 +86,7 @@ export const useMetadataMap = (): MetadataMap => {
         },
         'volume/issue/page_numbers': { label: t(`${fieldPrefix}.paper.volumeIssuePage`) },
         'doi': { label: t(`${fieldPrefix}.paper.DOI`) },
-        'topic/keywords': { label: t(`${fieldPrefix}.paper.topicKeywords`) },
+        'topic/keywords': { label: t(`${fieldPrefix}.paper.topicKeywords` as any) as string },
         'abstract': {
           label: t(`${fieldPrefix}.paper.abstract`),
           inputType: 'textarea',
@@ -160,7 +160,7 @@ export const useMetadataMap = (): MetadataMap => {
         'end_date': { label: t(`${fieldPrefix}.IMChat.endDate`) },
         'participants': { label: t(`${fieldPrefix}.IMChat.participants`) },
         'topicKeywords': {
-          label: t(`${fieldPrefix}.IMChat.topicKeywords`),
+          label: t(`${fieldPrefix}.IMChat.topicKeywords` as any) as string,
           inputType: 'textarea',
         },
         'fileType': { label: t(`${fieldPrefix}.IMChat.fileType`) },
@@ -193,7 +193,7 @@ export const useMetadataMap = (): MetadataMap => {
       allowEdit: false,
       subFieldsMap: {
         'title': { label: t(`${fieldPrefix}.notion.title`) },
-        'language': { label: t(`${fieldPrefix}.notion.lang`), inputType: 'select' },
+        'language': { label: t(`${fieldPrefix}.notion.lang` as any) as string, inputType: 'select' },
         'author/creator': { label: t(`${fieldPrefix}.notion.author`) },
         'creation_date': { label: t(`${fieldPrefix}.notion.createdTime`) },
         'last_modified_date': {
@@ -201,7 +201,7 @@ export const useMetadataMap = (): MetadataMap => {
         },
         'notion_page_link': { label: t(`${fieldPrefix}.notion.url`) },
         'category/tags': { label: t(`${fieldPrefix}.notion.tag`) },
-        'description': { label: t(`${fieldPrefix}.notion.desc`) },
+        'description': { label: t(`${fieldPrefix}.notion.desc` as any) as string },
       },
     },
     synced_from_github: {
@@ -241,7 +241,7 @@ export const useMetadataMap = (): MetadataMap => {
         },
         'data_source_type': {
           label: t(`${fieldPrefix}.originInfo.source`),
-          render: value => t(`datasetDocuments.metadata.source.${value === 'notion_import' ? 'notion' : value}`),
+          render: value => t(`datasetDocuments.metadata.source.${value === 'notion_import' ? 'notion' : value}` as any) as string,
         },
       },
     },
@@ -323,7 +323,7 @@ export const useLanguages = () => {
     cs: t(`${langPrefix}cs`),
     th: t(`${langPrefix}th`),
     id: t(`${langPrefix}id`),
-    ro: t(`${langPrefix}ro`),
+    ro: t(`${langPrefix}ro` as any) as string,
   }
 }
 
diff --git a/web/i18n-config/README.md b/web/i18n-config/README.md
index 0fe8922345..c724d94aa7 100644
--- a/web/i18n-config/README.md
+++ b/web/i18n-config/README.md
@@ -55,28 +55,9 @@ cp -r en-US id-ID
 
 1. Add type to new language in the `language.ts` file.
 
-```typescript
-export type I18nText = {
-  'en-US': string
-  'zh-Hans': string
-  'pt-BR': string
-  'es-ES': string
-  'fr-FR': string
-  'de-DE': string
-  'ja-JP': string
-  'ko-KR': string
-  'ru-RU': string
-  'it-IT': string
-  'uk-UA': string
-  'id-ID': string
-  'tr-TR': string
-  'fa-IR': string
-  'ar-TN': string
-  'YOUR_LANGUAGE_CODE': string
-}
-```
+> Note: `I18nText` type is now automatically derived from `LanguagesSupported`, so you don't need to manually add types.
 
-4. Add the new language to the `language.json` file.
+4. Add the new language to the `languages.ts` file.
 
 ```typescript
 export const languages = [
@@ -189,11 +170,10 @@ We have a list of languages that we support in the `language.ts` file. But some
 
 ## Utility scripts
 
-- Auto-fill translations: `pnpm run auto-gen-i18n -- --file app common --lang zh-Hans ja-JP [--dry-run]`
+- Auto-fill translations: `pnpm run auto-gen-i18n --file app common --lang zh-Hans ja-JP [--dry-run]`
   - Use space-separated values; repeat `--file` / `--lang` as needed. Defaults to all en-US files and all supported locales except en-US.
   - Protects placeholders (`{{var}}`, `${var}`, `<tag>`) before translation and restores them after.
-- Check missing/extra keys: `pnpm run check-i18n -- --file app billing --lang zh-Hans [--auto-remove]`
+- Check missing/extra keys: `pnpm run check-i18n --file app billing --lang zh-Hans [--auto-remove]`
   - Use space-separated values; repeat `--file` / `--lang` as needed. Returns non-zero on missing/extra keys (CI will fail); `--auto-remove` deletes extra keys automatically.
-- Generate types: `pnpm run gen:i18n-types`; verify sync: `pnpm run check:i18n-types`.
 
-Workflows: `.github/workflows/translate-i18n-base-on-english.yml` auto-runs the translation generator on en-US changes to main; `.github/workflows/web-tests.yml` checks i18n keys and type sync on web changes.
+Workflows: `.github/workflows/translate-i18n-base-on-english.yml` auto-runs the translation generator on en-US changes to main; `.github/workflows/web-tests.yml` checks i18n keys on web changes.
diff --git a/web/i18n-config/auto-gen-i18n.js b/web/i18n-config/auto-gen-i18n.js
index 561fa95869..6c8cb05bbd 100644
--- a/web/i18n-config/auto-gen-i18n.js
+++ b/web/i18n-config/auto-gen-i18n.js
@@ -6,11 +6,11 @@ import vm from 'node:vm'
 import { translate } from 'bing-translate-api'
 import { generateCode, loadFile, parseModule } from 'magicast'
 import { transpile } from 'typescript'
+import data from './languages'
 
 const require = createRequire(import.meta.url)
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
-const data = require('./languages.json')
 
 const targetLanguage = 'en-US'
 const i18nFolder = '../i18n' // Path to i18n folder relative to this script
@@ -117,8 +117,8 @@ Options:
   -h, --help        Show help
 
 Examples:
-  pnpm run auto-gen-i18n -- --file app common --lang zh-Hans ja-JP
-  pnpm run auto-gen-i18n -- --dry-run
+  pnpm run auto-gen-i18n --file app common --lang zh-Hans ja-JP
+  pnpm run auto-gen-i18n --dry-run
 `)
 }
 
diff --git a/web/i18n-config/check-i18n-sync.js b/web/i18n-config/check-i18n-sync.js
deleted file mode 100644
index af00d23875..0000000000
--- a/web/i18n-config/check-i18n-sync.js
+++ /dev/null
@@ -1,134 +0,0 @@
-#!/usr/bin/env node
-
-import fs from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import lodash from 'lodash'
-import ts from 'typescript'
-
-const { camelCase } = lodash
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-// Import the NAMESPACES array from i18next-config.ts
-function getNamespacesFromConfig() {
-  const configPath = path.join(__dirname, 'i18next-config.ts')
-  const configContent = fs.readFileSync(configPath, 'utf8')
-  const sourceFile = ts.createSourceFile(configPath, configContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS)
-
-  const namespaces = []
-
-  const visit = (node) => {
-    if (
-      ts.isVariableDeclaration(node)
-      && node.name.getText() === 'NAMESPACES'
-      && node.initializer
-      && ts.isArrayLiteralExpression(node.initializer)
-    ) {
-      node.initializer.elements.forEach((el) => {
-        if (ts.isStringLiteral(el))
-          namespaces.push(el.text)
-      })
-    }
-    ts.forEachChild(node, visit)
-  }
-
-  visit(sourceFile)
-
-  if (!namespaces.length)
-    throw new Error('Could not find NAMESPACES array in i18next-config.ts')
-
-  return namespaces
-}
-
-function getNamespacesFromTypes() {
-  const typesPath = path.join(__dirname, '../types/i18n.d.ts')
-
-  if (!fs.existsSync(typesPath)) {
-    return null
-  }
-
-  const typesContent = fs.readFileSync(typesPath, 'utf8')
-
-  // Extract namespaces from Messages type
-  const messagesMatch = typesContent.match(/export type Messages = \{([\s\S]*?)\}/)
-  if (!messagesMatch) {
-    return null
-  }
-
-  // Parse the properties
-  const propertiesStr = messagesMatch[1]
-  const properties = propertiesStr
-    .split('\n')
-    .map(line => line.trim())
-    .filter(line => line.includes(':'))
-    .map(line => line.split(':')[0].trim())
-    .filter(prop => prop.length > 0)
-
-  return properties
-}
-
-function main() {
-  try {
-    console.log('🔍 Checking i18n types synchronization...')
-
-    // Get namespaces from config
-    const configNamespaces = getNamespacesFromConfig()
-    console.log(`📦 Found ${configNamespaces.length} namespaces in config`)
-
-    // Convert to camelCase for comparison
-    const configCamelCase = configNamespaces.map(ns => camelCase(ns)).sort()
-
-    // Get namespaces from type definitions
-    const typeNamespaces = getNamespacesFromTypes()
-
-    if (!typeNamespaces) {
-      console.error('❌ Type definitions file not found or invalid')
-      console.error('   Run: pnpm run gen:i18n-types')
-      process.exit(1)
-    }
-
-    console.log(`🔧 Found ${typeNamespaces.length} namespaces in types`)
-
-    const typeCamelCase = typeNamespaces.sort()
-
-    // Compare arrays
-    const configSet = new Set(configCamelCase)
-    const typeSet = new Set(typeCamelCase)
-
-    // Find missing in types
-    const missingInTypes = configCamelCase.filter(ns => !typeSet.has(ns))
-
-    // Find extra in types
-    const extraInTypes = typeCamelCase.filter(ns => !configSet.has(ns))
-
-    let hasErrors = false
-
-    if (missingInTypes.length > 0) {
-      hasErrors = true
-      console.error('❌ Missing in type definitions:')
-      missingInTypes.forEach(ns => console.error(`   - ${ns}`))
-    }
-
-    if (extraInTypes.length > 0) {
-      hasErrors = true
-      console.error('❌ Extra in type definitions:')
-      extraInTypes.forEach(ns => console.error(`   - ${ns}`))
-    }
-
-    if (hasErrors) {
-      console.error('\n💡 To fix synchronization issues:')
-      console.error('   Run: pnpm run gen:i18n-types')
-      process.exit(1)
-    }
-
-    console.log('✅ i18n types are synchronized')
-  }
-  catch (error) {
-    console.error('❌ Error:', error.message)
-    process.exit(1)
-  }
-}
-
-main()
diff --git a/web/i18n-config/check-i18n.js b/web/i18n-config/check-i18n.js
index d69885e6f0..d70564556c 100644
--- a/web/i18n-config/check-i18n.js
+++ b/web/i18n-config/check-i18n.js
@@ -4,13 +4,13 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import vm from 'node:vm'
 import { transpile } from 'typescript'
+import data from './languages'
 
 const require = createRequire(import.meta.url)
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
 const targetLanguage = 'en-US'
-const data = require('./languages.json')
 
 const languages = data.languages.filter(language => language.supported).map(language => language.value)
 
@@ -103,8 +103,8 @@ Options:
   -h, --help        Show help
 
 Examples:
-  pnpm run check-i18n -- --file app billing --lang zh-Hans ja-JP
-  pnpm run check-i18n -- --auto-remove
+  pnpm run check-i18n --file app billing --lang zh-Hans ja-JP
+  pnpm run check-i18n --auto-remove
 `)
 }
 
diff --git a/web/i18n-config/generate-i18n-types.js b/web/i18n-config/generate-i18n-types.js
deleted file mode 100644
index 0b3c0195af..0000000000
--- a/web/i18n-config/generate-i18n-types.js
+++ /dev/null
@@ -1,149 +0,0 @@
-#!/usr/bin/env node
-
-import fs from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import lodash from 'lodash'
-import ts from 'typescript'
-
-const { camelCase } = lodash
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-// Import the NAMESPACES array from i18next-config.ts
-function getNamespacesFromConfig() {
-  const configPath = path.join(__dirname, 'i18next-config.ts')
-  const configContent = fs.readFileSync(configPath, 'utf8')
-  const sourceFile = ts.createSourceFile(configPath, configContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS)
-
-  const namespaces = []
-
-  const visit = (node) => {
-    if (
-      ts.isVariableDeclaration(node)
-      && node.name.getText() === 'NAMESPACES'
-      && node.initializer
-      && ts.isArrayLiteralExpression(node.initializer)
-    ) {
-      node.initializer.elements.forEach((el) => {
-        if (ts.isStringLiteral(el))
-          namespaces.push(el.text)
-      })
-    }
-    ts.forEachChild(node, visit)
-  }
-
-  visit(sourceFile)
-
-  if (!namespaces.length)
-    throw new Error('Could not find NAMESPACES array in i18next-config.ts')
-
-  return namespaces
-}
-
-function generateTypeDefinitions(namespaces) {
-  const header = `// TypeScript type definitions for Dify's i18next configuration
-// This file is auto-generated. Do not edit manually.
-// To regenerate, run: pnpm run gen:i18n-types
-import 'react-i18next'
-
-// Extract types from translation files using typeof import pattern`
-
-  // Generate individual type definitions
-  const typeDefinitions = namespaces.map((namespace) => {
-    const typeName = `${camelCase(namespace).replace(/^\w/, c => c.toUpperCase())}Messages`
-    return `type ${typeName} = typeof import('../i18n/en-US/${namespace}').default`
-  }).join('\n')
-
-  // Generate Messages interface
-  const messagesInterface = `
-// Complete type structure that matches i18next-config.ts camelCase conversion
-export type Messages = {
-${namespaces.map((namespace) => {
-  const camelCased = camelCase(namespace)
-  const typeName = `${camelCase(namespace).replace(/^\w/, c => c.toUpperCase())}Messages`
-  return `  ${camelCased}: ${typeName};`
-}).join('\n')}
-}`
-
-  const utilityTypes = `
-// Utility type to flatten nested object keys into dot notation
-type FlattenKeys<T> = T extends object
-  ? {
-      [K in keyof T]: T[K] extends object
-        ? \`\${K & string}.\${FlattenKeys<T[K]> & string}\`
-        : \`\${K & string}\`
-    }[keyof T]
-  : never
-
-export type ValidTranslationKeys = FlattenKeys<Messages>`
-
-  const moduleDeclarations = `
-// Extend react-i18next with Dify's type structure
-declare module 'react-i18next' {
-  interface CustomTypeOptions {
-    defaultNS: 'translation';
-    resources: {
-      translation: Messages;
-    };
-  }
-}
-
-// Extend i18next for complete type safety
-declare module 'i18next' {
-  interface CustomTypeOptions {
-    defaultNS: 'translation';
-    resources: {
-      translation: Messages;
-    };
-  }
-}`
-
-  return [header, typeDefinitions, messagesInterface, utilityTypes, moduleDeclarations].join('\n\n')
-}
-
-function main() {
-  const args = process.argv.slice(2)
-  const checkMode = args.includes('--check')
-
-  try {
-    console.log('📦 Generating i18n type definitions...')
-
-    // Get namespaces from config
-    const namespaces = getNamespacesFromConfig()
-    console.log(`✅ Found ${namespaces.length} namespaces`)
-
-    // Generate type definitions
-    const typeDefinitions = generateTypeDefinitions(namespaces)
-
-    const outputPath = path.join(__dirname, '../types/i18n.d.ts')
-
-    if (checkMode) {
-      // Check mode: compare with existing file
-      if (!fs.existsSync(outputPath)) {
-        console.error('❌ Type definitions file does not exist')
-        process.exit(1)
-      }
-
-      const existingContent = fs.readFileSync(outputPath, 'utf8')
-      if (existingContent.trim() !== typeDefinitions.trim()) {
-        console.error('❌ Type definitions are out of sync')
-        console.error('   Run: pnpm run gen:i18n-types')
-        process.exit(1)
-      }
-
-      console.log('✅ Type definitions are in sync')
-    }
-    else {
-      // Generate mode: write file
-      fs.writeFileSync(outputPath, typeDefinitions)
-      console.log(`✅ Generated type definitions: ${outputPath}`)
-    }
-  }
-  catch (error) {
-    console.error('❌ Error:', error.message)
-    process.exit(1)
-  }
-}
-
-main()
diff --git a/web/i18n-config/i18next-config.ts b/web/i18n-config/i18next-config.ts
index b310d380e2..8dce79a5e5 100644
--- a/web/i18n-config/i18next-config.ts
+++ b/web/i18n-config/i18next-config.ts
@@ -1,10 +1,10 @@
 'use client'
+import type { Locale } from '.'
+import { camelCase, kebabCase } from 'es-toolkit/compat'
 import i18n from 'i18next'
-import { camelCase } from 'lodash-es'
-import { initReactI18next } from 'react-i18next'
 
+import { initReactI18next } from 'react-i18next'
 import app from '../i18n/en-US/app'
-// Static imports for en-US (fallback language)
 import appAnnotation from '../i18n/en-US/app-annotation'
 import appApi from '../i18n/en-US/app-api'
 import appDebug from '../i18n/en-US/app-debug'
@@ -35,7 +35,56 @@ import time from '../i18n/en-US/time'
 import tools from '../i18n/en-US/tools'
 import workflow from '../i18n/en-US/workflow'
 
-const requireSilent = async (lang: string, namespace: string) => {
+// @keep-sorted
+export const messagesEN = {
+  app,
+  appAnnotation,
+  appApi,
+  appDebug,
+  appLog,
+  appOverview,
+  billing,
+  common,
+  custom,
+  dataset,
+  datasetCreation,
+  datasetDocuments,
+  datasetHitTesting,
+  datasetPipeline,
+  datasetSettings,
+  education,
+  explore,
+  layout,
+  login,
+  oauth,
+  pipeline,
+  plugin,
+  pluginTags,
+  pluginTrigger,
+  register,
+  runLog,
+  share,
+  time,
+  tools,
+  workflow,
+}
+
+// pluginTrigger -> plugin-trigger
+
+export type KebabCase<S extends string> = S extends `${infer T}${infer U}`
+  ? T extends Lowercase<T>
+    ? `${T}${KebabCase<U>}`
+    : `-${Lowercase<T>}${KebabCase<U>}`
+  : S
+
+export type CamelCase<S extends string> = S extends `${infer T}-${infer U}`
+  ? `${T}${Capitalize<CamelCase<U>>}`
+  : S
+
+export type KeyPrefix = keyof typeof messagesEN
+export type Namespace = KebabCase<KeyPrefix>
+
+const requireSilent = async (lang: Locale, namespace: Namespace) => {
   let res
   try {
     res = (await import(`../i18n/${lang}/${namespace}`)).default
@@ -47,40 +96,9 @@ const requireSilent = async (lang: string, namespace: string) => {
   return res
 }
 
-const NAMESPACES = [
-  'app-annotation',
-  'app-api',
-  'app-debug',
-  'app-log',
-  'app-overview',
-  'app',
-  'billing',
-  'common',
-  'custom',
-  'dataset-creation',
-  'dataset-documents',
-  'dataset-hit-testing',
-  'dataset-pipeline',
-  'dataset-settings',
-  'dataset',
-  'education',
-  'explore',
-  'layout',
-  'login',
-  'oauth',
-  'pipeline',
-  'plugin-tags',
-  'plugin-trigger',
-  'plugin',
-  'register',
-  'run-log',
-  'share',
-  'time',
-  'tools',
-  'workflow',
-]
+const NAMESPACES = Object.keys(messagesEN).map(kebabCase) as Namespace[]
 
-export const loadLangResources = async (lang: string) => {
+export const loadLangResources = async (lang: Locale) => {
   const modules = await Promise.all(
     NAMESPACES.map(ns => requireSilent(lang, ns)),
   )
@@ -93,41 +111,9 @@ export const loadLangResources = async (lang: string) => {
 
 // Load en-US resources first to make sure fallback works
 const getInitialTranslations = () => {
-  const en_USResources: Record<string, any> = {
-    appAnnotation,
-    appApi,
-    appDebug,
-    appLog,
-    appOverview,
-    app,
-    billing,
-    common,
-    custom,
-    datasetCreation,
-    datasetDocuments,
-    datasetHitTesting,
-    datasetPipeline,
-    datasetSettings,
-    dataset,
-    education,
-    explore,
-    layout,
-    login,
-    oauth,
-    pipeline,
-    pluginTags,
-    pluginTrigger,
-    plugin,
-    register,
-    runLog,
-    share,
-    time,
-    tools,
-    workflow,
-  }
   return {
     'en-US': {
-      translation: en_USResources,
+      translation: messagesEN,
     },
   }
 }
@@ -140,7 +126,7 @@ if (!i18n.isInitialized) {
   })
 }
 
-export const changeLanguage = async (lng?: string) => {
+export const changeLanguage = async (lng?: Locale) => {
   if (!lng)
     return
   if (!i18n.hasResourceBundle(lng, 'translation')) {
diff --git a/web/i18n-config/index.ts b/web/i18n-config/index.ts
index 8a0f712f2a..bb73ef4b71 100644
--- a/web/i18n-config/index.ts
+++ b/web/i18n-config/index.ts
@@ -1,5 +1,6 @@
-import Cookies from 'js-cookie'
+import type { Locale } from '@/i18n-config/language'
 
+import Cookies from 'js-cookie'
 import { LOCALE_COOKIE_NAME } from '@/config'
 import { changeLanguage } from '@/i18n-config/i18next-config'
 import { LanguagesSupported } from '@/i18n-config/language'
@@ -9,7 +10,7 @@ export const i18n = {
   locales: LanguagesSupported,
 } as const
 
-export type Locale = typeof i18n['locales'][number]
+export { Locale }
 
 export const setLocaleOnClient = async (locale: Locale, reloadPage = true) => {
   Cookies.set(LOCALE_COOKIE_NAME, locale, { expires: 365 })
diff --git a/web/i18n-config/language.ts b/web/i18n-config/language.ts
index a1fe6e790f..28afd9eabf 100644
--- a/web/i18n-config/language.ts
+++ b/web/i18n-config/language.ts
@@ -1,4 +1,4 @@
-import data from './languages.json'
+import data from './languages'
 
 export type Item = {
   value: number | string
@@ -6,40 +6,20 @@ export type Item = {
   example: string
 }
 
-export type I18nText = {
-  'en-US': string
-  'zh-Hans': string
-  'zh-Hant': string
-  'pt-BR': string
-  'es-ES': string
-  'fr-FR': string
-  'de-DE': string
-  'ja-JP': string
-  'ko-KR': string
-  'ru-RU': string
-  'it-IT': string
-  'th-TH': string
-  'id-ID': string
-  'uk-UA': string
-  'vi-VN': string
-  'ro-RO': string
-  'pl-PL': string
-  'hi-IN': string
-  'tr-TR': string
-  'fa-IR': string
-  'sl-SI': string
-  'ar-TN': string
-}
+export type I18nText = Record<typeof LanguagesSupported[number], string>
 
 export const languages = data.languages
 
-export const LanguagesSupported = languages.filter(item => item.supported).map(item => item.value)
+// for compatibility
+export type Locale = 'ja_JP' | 'zh_Hans' | 'en_US' | (typeof languages[number])['value']
 
-export const getLanguage = (locale: string) => {
+export const LanguagesSupported: Locale[] = languages.filter(item => item.supported).map(item => item.value)
+
+export const getLanguage = (locale: Locale): Locale => {
   if (['zh-Hans', 'ja-JP'].includes(locale))
-    return locale.replace('-', '_')
+    return locale.replace('-', '_') as Locale
 
-  return LanguagesSupported[0].replace('-', '_')
+  return LanguagesSupported[0].replace('-', '_') as Locale
 }
 
 const DOC_LANGUAGE: Record<string, string> = {
@@ -48,6 +28,34 @@ const DOC_LANGUAGE: Record<string, string> = {
   'en-US': 'en',
 }
 
+export const localeMap: Record<Locale, string> = {
+  'en-US': 'en',
+  'en_US': 'en',
+  'zh-Hans': 'zh-cn',
+  'zh_Hans': 'zh-cn',
+  'zh-Hant': 'zh-tw',
+  'pt-BR': 'pt-br',
+  'es-ES': 'es',
+  'fr-FR': 'fr',
+  'de-DE': 'de',
+  'ja-JP': 'ja',
+  'ja_JP': 'ja',
+  'ko-KR': 'ko',
+  'ru-RU': 'ru',
+  'it-IT': 'it',
+  'th-TH': 'th',
+  'id-ID': 'id',
+  'uk-UA': 'uk',
+  'vi-VN': 'vi',
+  'ro-RO': 'ro',
+  'pl-PL': 'pl',
+  'hi-IN': 'hi',
+  'tr-TR': 'tr',
+  'fa-IR': 'fa',
+  'sl-SI': 'sl',
+  'ar-TN': 'ar',
+}
+
 export const getDocLanguage = (locale: string) => {
   return DOC_LANGUAGE[locale] || 'en'
 }
diff --git a/web/i18n-config/languages.json b/web/i18n-config/languages.json
deleted file mode 100644
index 6e0025b8de..0000000000
--- a/web/i18n-config/languages.json
+++ /dev/null
@@ -1,158 +0,0 @@
-{
-  "languages": [
-    {
-      "value": "en-US",
-      "name": "English (United States)",
-      "prompt_name": "English",
-      "example": "Hello, Dify!",
-      "supported": true
-    },
-    {
-      "value": "zh-Hans",
-      "name": "简体中文",
-      "prompt_name": "Chinese Simplified",
-      "example": "你好，Dify！",
-      "supported": true
-    },
-    {
-      "value": "zh-Hant",
-      "name": "繁體中文",
-      "prompt_name": "Chinese Traditional",
-      "example": "你好，Dify！",
-      "supported": true
-    },
-    {
-      "value": "pt-BR",
-      "name": "Português (Brasil)",
-      "prompt_name": "Portuguese",
-      "example": "Olá, Dify!",
-      "supported": true
-    },
-    {
-      "value": "es-ES",
-      "name": "Español (España)",
-      "prompt_name": "Spanish",
-      "example": "¡Hola, Dify!",
-      "supported": true
-    },
-    {
-      "value": "fr-FR",
-      "name": "Français (France)",
-      "prompt_name": "French",
-      "example": "Bonjour, Dify!",
-      "supported": true
-    },
-    {
-      "value": "de-DE",
-      "name": "Deutsch (Deutschland)",
-      "prompt_name": "German",
-      "example": "Hallo, Dify!",
-      "supported": true
-    },
-    {
-      "value": "ja-JP",
-      "name": "日本語 (日本)",
-      "prompt_name": "Japanese",
-      "example": "こんにちは、Dify!",
-      "supported": true
-    },
-    {
-      "value": "ko-KR",
-      "name": "한국어 (대한민국)",
-      "prompt_name": "Korean",
-      "example": "안녕하세요, Dify!",
-      "supported": true
-    },
-    {
-      "value": "ru-RU",
-      "name": "Русский (Россия)",
-      "prompt_name": "Russian",
-      "example": " Привет, Dify!",
-      "supported": true
-    },
-    {
-      "value": "it-IT",
-      "name": "Italiano (Italia)",
-      "prompt_name": "Italian",
-      "example": "Ciao, Dify!",
-      "supported": true
-    },
-    {
-      "value": "th-TH",
-      "name": "ไทย (ประเทศไทย)",
-      "prompt_name": "Thai",
-      "example": "สวัสดี Dify!",
-      "supported": true
-    },
-    {
-      "value": "uk-UA",
-      "name": "Українська (Україна)",
-      "prompt_name": "Ukrainian",
-      "example": "Привет, Dify!",
-      "supported": true
-    },
-    {
-      "value": "vi-VN",
-      "name": "Tiếng Việt (Việt Nam)",
-      "prompt_name": "Vietnamese",
-      "example": "Xin chào, Dify!",
-      "supported": true
-    },
-    {
-      "value": "ro-RO",
-      "name": "Română (România)",
-      "prompt_name": "Romanian",
-      "example": "Salut, Dify!",
-      "supported": true
-    },
-    {
-      "value": "pl-PL",
-      "name": "Polski (Polish)",
-      "prompt_name": "Polish",
-      "example": "Cześć, Dify!",
-      "supported": true
-    },
-    {
-      "value": "hi-IN",
-      "name": "Hindi (India)",
-      "prompt_name": "Hindi",
-      "example": "नमस्ते, Dify!",
-      "supported": true
-    },
-    {
-      "value": "tr-TR",
-      "name": "Türkçe",
-      "prompt_name": "Türkçe",
-      "example": "Selam!",
-      "supported": true
-    },
-    {
-      "value": "fa-IR",
-      "name": "Farsi (Iran)",
-      "prompt_name": "Farsi",
-      "example": "سلام, دیفای!",
-      "supported": true
-    },
-    {
-      "value": "sl-SI",
-      "name": "Slovensko (Slovenija)",
-      "prompt_name": "Slovensko",
-      "example": "Zdravo, Dify!",
-      "supported": true
-    },
-    {
-      "value": "id-ID",
-      "name": "Bahasa Indonesia",
-      "prompt_name": "Indonesian",
-      "example": "Halo, Dify!",
-      "supported": true
-    },
-    {
-      "value": "ar-TN",
-      "name": "العربية (تونس)",
-      "prompt_name": "Tunisian Arabic",
-      "example": "مرحبا، Dify!",
-      "supported": true
-    }
-  ]
-}
diff --git a/web/i18n-config/languages.ts b/web/i18n-config/languages.ts
new file mode 100644
index 0000000000..5077aee1d2
--- /dev/null
+++ b/web/i18n-config/languages.ts
@@ -0,0 +1,160 @@
+const data = {
+  languages: [
+    {
+      value: 'en-US',
+      name: 'English (United States)',
+      prompt_name: 'English',
+      example: 'Hello, Dify!',
+      supported: true,
+    },
+    {
+      value: 'zh-Hans',
+      name: '简体中文',
+      prompt_name: 'Chinese Simplified',
+      example: '你好，Dify！',
+      supported: true,
+    },
+    {
+      value: 'zh-Hant',
+      name: '繁體中文',
+      prompt_name: 'Chinese Traditional',
+      example: '你好，Dify！',
+      supported: true,
+    },
+    {
+      value: 'pt-BR',
+      name: 'Português (Brasil)',
+      prompt_name: 'Portuguese',
+      example: 'Olá, Dify!',
+      supported: true,
+    },
+    {
+      value: 'es-ES',
+      name: 'Español (España)',
+      prompt_name: 'Spanish',
+      example: '¡Hola, Dify!',
+      supported: true,
+    },
+    {
+      value: 'fr-FR',
+      name: 'Français (France)',
+      prompt_name: 'French',
+      example: 'Bonjour, Dify!',
+      supported: true,
+    },
+    {
+      value: 'de-DE',
+      name: 'Deutsch (Deutschland)',
+      prompt_name: 'German',
+      example: 'Hallo, Dify!',
+      supported: true,
+    },
+    {
+      value: 'ja-JP',
+      name: '日本語 (日本)',
+      prompt_name: 'Japanese',
+      example: 'こんにちは、Dify!',
+      supported: true,
+    },
+    {
+      value: 'ko-KR',
+      name: '한국어 (대한민국)',
+      prompt_name: 'Korean',
+      example: '안녕하세요, Dify!',
+      supported: true,
+    },
+    {
+      value: 'ru-RU',
+      name: 'Русский (Россия)',
+      prompt_name: 'Russian',
+      example: ' Привет, Dify!',
+      supported: true,
+    },
+    {
+      value: 'it-IT',
+      name: 'Italiano (Italia)',
+      prompt_name: 'Italian',
+      example: 'Ciao, Dify!',
+      supported: true,
+    },
+    {
+      value: 'th-TH',
+      name: 'ไทย (ประเทศไทย)',
+      prompt_name: 'Thai',
+      example: 'สวัสดี Dify!',
+      supported: true,
+    },
+    {
+      value: 'uk-UA',
+      name: 'Українська (Україна)',
+      prompt_name: 'Ukrainian',
+      example: 'Привет, Dify!',
+      supported: true,
+    },
+    {
+      value: 'vi-VN',
+      name: 'Tiếng Việt (Việt Nam)',
+      prompt_name: 'Vietnamese',
+      example: 'Xin chào, Dify!',
+      supported: true,
+    },
+    {
+      value: 'ro-RO',
+      name: 'Română (România)',
+      prompt_name: 'Romanian',
+      example: 'Salut, Dify!',
+      supported: true,
+    },
+    {
+      value: 'pl-PL',
+      name: 'Polski (Polish)',
+      prompt_name: 'Polish',
+      example: 'Cześć, Dify!',
+      supported: true,
+    },
+    {
+      value: 'hi-IN',
+      name: 'Hindi (India)',
+      prompt_name: 'Hindi',
+      example: 'नमस्ते, Dify!',
+      supported: true,
+    },
+    {
+      value: 'tr-TR',
+      name: 'Türkçe',
+      prompt_name: 'Türkçe',
+      example: 'Selam!',
+      supported: true,
+    },
+    {
+      value: 'fa-IR',
+      name: 'Farsi (Iran)',
+      prompt_name: 'Farsi',
+      example: 'سلام, دیفای!',
+      supported: true,
+    },
+    {
+      value: 'sl-SI',
+      name: 'Slovensko (Slovenija)',
+      prompt_name: 'Slovensko',
+      example: 'Zdravo, Dify!',
+      supported: true,
+    },
+    {
+      value: 'id-ID',
+      name: 'Bahasa Indonesia',
+      prompt_name: 'Indonesian',
+      example: 'Halo, Dify!',
+      supported: true,
+    },
+    {
+      value: 'ar-TN',
+      name: 'العربية (تونس)',
+      prompt_name: 'Tunisian Arabic',
+      example: 'مرحبا، Dify!',
+      supported: true,
+    },
+  ],
+} as const
+
+export default data
diff --git a/web/i18n-config/server.ts b/web/i18n-config/server.ts
index c4e008cf84..736d76e2c7 100644
--- a/web/i18n-config/server.ts
+++ b/web/i18n-config/server.ts
@@ -1,7 +1,7 @@
 import type { Locale } from '.'
+import type { Namespace } from './i18next-config'
 import { match } from '@formatjs/intl-localematcher'
 import { createInstance } from 'i18next'
-
 import resourcesToBackend from 'i18next-resources-to-backend'
 import Negotiator from 'negotiator'
 import { cookies, headers } from 'next/headers'
@@ -9,11 +9,11 @@ import { initReactI18next } from 'react-i18next/initReactI18next'
 import { i18n } from '.'
 
 // https://locize.com/blog/next-13-app-dir-i18n/
-const initI18next = async (lng: Locale, ns: string) => {
+const initI18next = async (lng: Locale, ns: Namespace) => {
   const i18nInstance = createInstance()
   await i18nInstance
     .use(initReactI18next)
-    .use(resourcesToBackend((language: string, namespace: string) => import(`../i18n/${language}/${namespace}.ts`)))
+    .use(resourcesToBackend((language: Locale, namespace: Namespace) => import(`../i18n/${language}/${namespace}.ts`)))
     .init({
       lng: lng === 'zh-Hans' ? 'zh-Hans' : lng,
       ns,
@@ -22,9 +22,10 @@ const initI18next = async (lng: Locale, ns: string) => {
   return i18nInstance
 }
 
-export async function useTranslation(lng: Locale, ns = '', options: Record<string, any> = {}) {
+export async function getTranslation(lng: Locale, ns: Namespace, options: Record<string, any> = {}) {
   const i18nextInstance = await initI18next(lng, ns)
   return {
+    // @ts-expect-error types mismatch
     t: i18nextInstance.getFixedT(lng, ns, options.keyPrefix),
     i18n: i18nextInstance,
   }
diff --git a/web/i18n/de-DE/app-debug.ts b/web/i18n/de-DE/app-debug.ts
index 07c9d4be99..c12a1f5291 100644
--- a/web/i18n/de-DE/app-debug.ts
+++ b/web/i18n/de-DE/app-debug.ts
@@ -357,9 +357,7 @@ const translation = {
     visionSettings: {
       title: 'Vision-Einstellungen',
       resolution: 'Auflösung',
-      resolutionTooltip: `Niedrige Auflösung ermöglicht es dem Modell, eine Bildversion mit niedriger Auflösung von 512 x 512 zu erhalten und das Bild mit einem Budget von 65 Tokens darzustellen. Dies ermöglicht schnellere Antworten des API und verbraucht weniger Eingabetokens für Anwendungsfälle, die kein hohes Detail benötigen.
-      \n
-      Hohe Auflösung ermöglicht zunächst, dass das Modell das Bild mit niedriger Auflösung sieht und dann detaillierte Ausschnitte von Eingabebildern als 512px Quadrate basierend auf der Größe des Eingabebildes erstellt. Jeder der detaillierten Ausschnitte verwendet das doppelte Token-Budget für insgesamt 129 Tokens.`,
+      resolutionTooltip: 'Niedrige Auflösung ermöglicht es dem Modell, eine Bildversion mit niedriger Auflösung von 512 x 512 zu erhalten und das Bild mit einem Budget von 65 Tokens darzustellen. Dies ermöglicht schnellere Antworten des API und verbraucht weniger Eingabetokens für Anwendungsfälle, die kein hohes Detail benötigen.\nHohe Auflösung ermöglicht zunächst, dass das Modell das Bild mit niedriger Auflösung sieht und dann detaillierte Ausschnitte von Eingabebildern als 512px Quadrate basierend auf der Größe des Eingabebildes erstellt. Jeder der detaillierten Ausschnitte verwendet das doppelte Token-Budget für insgesamt 129 Tokens.',
       high: 'Hoch',
       low: 'Niedrig',
       uploadMethod: 'Upload-Methode',
diff --git a/web/i18n/en-US/app-api.ts b/web/i18n/en-US/app-api.ts
index 1fba63c977..17f1a06782 100644
--- a/web/i18n/en-US/app-api.ts
+++ b/web/i18n/en-US/app-api.ts
@@ -79,6 +79,7 @@ const translation = {
     pathParams: 'Path Params',
     query: 'Query',
     toc: 'Contents',
+    noContent: 'No content',
   },
 }
 
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 815c6d9aeb..9d69c36d83 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -32,6 +32,9 @@ const translation = {
     cancelDisagree: 'Cancel dislike',
     userAction: 'User ',
   },
+  code: {
+    instruction: 'Instruction',
+  },
   notSetAPIKey: {
     title: 'LLM provider key has not been set',
     trailFinished: 'Trail finished',
@@ -445,9 +448,7 @@ const translation = {
     visionSettings: {
       title: 'Vision Settings',
       resolution: 'Resolution',
-      resolutionTooltip: `low res will allow model receive a low-res 512 x 512 version of the image, and represent the image with a budget of 65 tokens. This allows the API to return faster responses and consume fewer input tokens for use cases that do not require high detail.
-      \n
-      high res will first allows the model to see the low res image and then creates detailed crops of input images as 512px squares based on the input image size. Each of the detailed crops uses twice the token budget for a total of 129 tokens.`,
+      resolutionTooltip: 'low res will allow model receive a low-res 512 x 512 version of the image, and represent the image with a budget of 65 tokens. This allows the API to return faster responses and consume fewer input tokens for use cases that do not require high detail.\nhigh res will first allows the model to see the low res image and then creates detailed crops of input images as 512px squares based on the input image size. Each of the detailed crops uses twice the token budget for a total of 129 tokens.',
       high: 'High',
       low: 'Low',
       uploadMethod: 'Upload Method',
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 1f41d3601e..45ebd61aec 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -1,4 +1,9 @@
 const translation = {
+  theme: {
+    switchDark: 'Switch to dark theme',
+    switchLight: 'Switch to light theme',
+  },
+  appNamePlaceholder: 'Give your app a name',
   createApp: 'CREATE APP',
   types: {
     all: 'All',
@@ -298,6 +303,7 @@ const translation = {
     commandHint: 'Type @ to browse by category',
     slashHint: 'Type / to see all available commands',
     actions: {
+      slashTitle: 'Commands',
       searchApplications: 'Search Applications',
       searchApplicationsDesc: 'Search and navigate to your applications',
       searchPlugins: 'Search Plugins',
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 92d24b1351..0117f2ae00 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -1,4 +1,6 @@
 const translation = {
+  loading: 'Loading',
+  error: 'Error',
   theme: {
     theme: 'Theme',
     light: 'light',
@@ -19,6 +21,7 @@ const translation = {
     cancel: 'Cancel',
     clear: 'Clear',
     save: 'Save',
+    saving: 'Saving...',
     yes: 'Yes',
     no: 'No',
     deleteConfirmTitle: 'Delete?',
@@ -71,6 +74,8 @@ const translation = {
     saveAndRegenerate: 'Save & Regenerate Child Chunks',
     view: 'View',
     viewMore: 'VIEW MORE',
+    back: 'Back',
+    imageDownloaded: 'Image downloaded',
     regenerate: 'Regenerate',
     submit: 'Submit',
     skip: 'Skip',
@@ -252,6 +257,7 @@ const translation = {
     feedbackPlaceholder: 'Optional',
     editWorkspaceInfo: 'Edit Workspace Info',
     workspaceName: 'Workspace Name',
+    workspaceNamePlaceholder: 'Enter workspace name',
     workspaceIcon: 'Workspace Icon',
     changeEmail: {
       title: 'Change Email',
@@ -515,6 +521,7 @@ const translation = {
     emptyProviderTip: 'Please install a model provider first.',
     auth: {
       unAuthorized: 'Unauthorized',
+      credentialRemoved: 'Credential removed',
       authRemoved: 'Auth removed',
       apiKeys: 'API Keys',
       addApiKey: 'Add API Key',
diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts
index 6ffd312fff..ee1997f699 100644
--- a/web/i18n/en-US/dataset.ts
+++ b/web/i18n/en-US/dataset.ts
@@ -245,6 +245,7 @@ const translation = {
     button: 'Drag and drop file or folder, or',
     browse: 'Browse',
     tip: '{{supportTypes}} (Max {{batchCount}}, {{size}}MB each)',
+    fileSizeLimitExceeded: 'File size exceeds the {{size}}MB limit',
   },
 }
 
diff --git a/web/i18n/en-US/login.ts b/web/i18n/en-US/login.ts
index dd923db217..3b0c8bbba1 100644
--- a/web/i18n/en-US/login.ts
+++ b/web/i18n/en-US/login.ts
@@ -64,6 +64,7 @@ const translation = {
     passwordInvalid: 'Password must contain letters and numbers, and the length must be greater than 8',
     registrationNotAllowed: 'Account not found. Please contact the system admin to register.',
     invalidEmailOrPassword: 'Invalid email or password.',
+    redirectUrlMissing: 'Redirect URL is missing',
   },
   license: {
     tip: 'Before starting Dify Community Edition, read the GitHub',
diff --git a/web/i18n/en-US/plugin-trigger.ts b/web/i18n/en-US/plugin-trigger.ts
index aedd0c6225..16ee1e1362 100644
--- a/web/i18n/en-US/plugin-trigger.ts
+++ b/web/i18n/en-US/plugin-trigger.ts
@@ -30,6 +30,11 @@ const translation = {
           unauthorized: 'Manual',
         },
         actions: {
+          edit: {
+            title: 'Edit Subscription',
+            success: 'Subscription updated successfully',
+            error: 'Failed to update subscription',
+          },
           delete: 'Delete',
           deleteConfirm: {
             title: 'Delete {{name}}?',
@@ -158,6 +163,7 @@ const translation = {
     },
     errors: {
       createFailed: 'Failed to create subscription',
+      updateFailed: 'Failed to update subscription',
       verifyFailed: 'Failed to verify credentials',
       authFailed: 'Authorization failed',
       networkError: 'Network error, please try again',
diff --git a/web/i18n/en-US/tools.ts b/web/i18n/en-US/tools.ts
index 86c225c1b2..b2753a5721 100644
--- a/web/i18n/en-US/tools.ts
+++ b/web/i18n/en-US/tools.ts
@@ -14,6 +14,7 @@ const translation = {
   },
   author: 'By',
   auth: {
+    unauthorized: 'Unauthorized',
     authorized: 'Authorized',
     setup: 'Set up authorization to use',
     setupModalTitle: 'Set Up Authorization',
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index a023ac2b91..2122c20aaa 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -1106,6 +1106,9 @@ const translation = {
       lastDay: 'Last day',
       lastDayTooltip: 'Not all months have 31 days. Use the \'last day\' option to select each month\'s final day.',
       mode: 'Mode',
+      modeVisual: 'Visual',
+      modeCron: 'Cron',
+      selectTime: 'Select time',
       timezone: 'Timezone',
       visualConfig: 'Visual Configuration',
       monthlyDay: 'Monthly Day',
diff --git a/web/i18n/es-ES/app-debug.ts b/web/i18n/es-ES/app-debug.ts
index 892e718d32..4252037e1f 100644
--- a/web/i18n/es-ES/app-debug.ts
+++ b/web/i18n/es-ES/app-debug.ts
@@ -353,9 +353,7 @@ const translation = {
     visionSettings: {
       title: 'Configuraciones de Visión',
       resolution: 'Resolución',
-      resolutionTooltip: `Baja resolución permitirá que el modelo reciba una versión de baja resolución de 512 x 512 de la imagen, y represente la imagen con un presupuesto de 65 tokens. Esto permite que la API devuelva respuestas más rápidas y consuma menos tokens de entrada para casos de uso que no requieren alta detalle.
-      \n
-      Alta resolución permitirá primero que el modelo vea la imagen de baja resolución y luego crea recortes detallados de las imágenes de entrada como cuadrados de 512px basados en el tamaño de la imagen de entrada. Cada uno de los recortes detallados usa el doble del presupuesto de tokens para un total de 129 tokens.`,
+      resolutionTooltip: 'Baja resolución permitirá que el modelo reciba una versión de baja resolución de 512 x 512 de la imagen, y represente la imagen con un presupuesto de 65 tokens. Esto permite que la API devuelva respuestas más rápidas y consuma menos tokens de entrada para casos de uso que no requieren alta detalle.\nAlta resolución permitirá primero que el modelo vea la imagen de baja resolución y luego crea recortes detallados de las imágenes de entrada como cuadrados de 512px basados en el tamaño de la imagen de entrada. Cada uno de los recortes detallados usa el doble del presupuesto de tokens para un total de 129 tokens.',
       high: 'Alta',
       low: 'Baja',
       uploadMethod: 'Método de carga',
diff --git a/web/i18n/fr-FR/app-debug.ts b/web/i18n/fr-FR/app-debug.ts
index 26ebeca68d..2e65e681ca 100644
--- a/web/i18n/fr-FR/app-debug.ts
+++ b/web/i18n/fr-FR/app-debug.ts
@@ -357,9 +357,7 @@ const translation = {
     visionSettings: {
       title: 'Paramètres de Vision',
       resolution: 'Résolution',
-      resolutionTooltip: `low res will allow model receive a low-res 512 x 512 version of the image, and represent the image with a budget of 65 tokens. This allows the API to return faster responses and consume fewer input tokens for use cases that do not require high detail.
-      \n
-      high res will first allows the model to see the low res image and then creates detailed crops of input images as 512px squares based on the input image size. Each of the detailed crops uses twice the token budget for a total of 129 tokens.`,
+      resolutionTooltip: 'low res will allow model receive a low-res 512 x 512 version of the image, and represent the image with a budget of 65 tokens. This allows the API to return faster responses and consume fewer input tokens for use cases that do not require high detail.\nhigh res will first allows the model to see the low res image and then creates detailed crops of input images as 512px squares based on the input image size. Each of the detailed crops uses twice the token budget for a total of 129 tokens.',
       high: 'Élevé',
       low: 'Faible',
       uploadMethod: 'Méthode de Téléchargement',
diff --git a/web/i18n/it-IT/app-debug.ts b/web/i18n/it-IT/app-debug.ts
index ecae1f3a2e..e81a83a3dd 100644
--- a/web/i18n/it-IT/app-debug.ts
+++ b/web/i18n/it-IT/app-debug.ts
@@ -384,9 +384,7 @@ const translation = {
     visionSettings: {
       title: 'Impostazioni di visione',
       resolution: 'Risoluzione',
-      resolutionTooltip: `La bassa risoluzione permetterà al modello di ricevere una versione a bassa risoluzione 512 x 512 dell\\'immagine e di rappresentare l\\'immagine con un budget di 65 token. Questo permette all\\'API di restituire risposte più veloci e di consumare meno token di input per casi d\\'uso che non richiedono alta definizione.
-      \n
-      L\\'alta risoluzione permetterà al modello di vedere prima l\\'immagine a bassa risoluzione e poi di creare ritagli dettagliati delle immagini di input come quadrati 512px basati sulla dimensione dell\\'immagine di input. Ciascuno dei ritagli dettagliati utilizza il doppio del budget dei token per un totale di 129 token.`,
+      resolutionTooltip: 'La bassa risoluzione permetterà al modello di ricevere una versione a bassa risoluzione 512 x 512 dell\'immagine e di rappresentare l\'immagine con un budget di 65 token. Questo permette all\'API di restituire risposte più veloci e di consumare meno token di input per casi d\'uso che non richiedono alta definizione.\nL\'alta risoluzione permetterà al modello di vedere prima l\'immagine a bassa risoluzione e poi di creare ritagli dettagliati delle immagini di input come quadrati 512px basati sulla dimensione dell\'immagine di input. Ciascuno dei ritagli dettagliati utilizza il doppio del budget dei token per un totale di 129 token.',
       high: 'Alta',
       low: 'Bassa',
       uploadMethod: 'Metodo di caricamento',
diff --git a/web/i18n/ja-JP/app-api.ts b/web/i18n/ja-JP/app-api.ts
index e344ad04a9..35203e53e0 100644
--- a/web/i18n/ja-JP/app-api.ts
+++ b/web/i18n/ja-JP/app-api.ts
@@ -78,6 +78,7 @@ const translation = {
     pathParams: 'パスパラメータ',
     query: 'クエリ',
     toc: '内容',
+    noContent: 'コンテンツなし',
   },
   regenerate: '再生',
 }
diff --git a/web/i18n/ja-JP/app-debug.ts b/web/i18n/ja-JP/app-debug.ts
index 77d991974f..06b47c1a47 100644
--- a/web/i18n/ja-JP/app-debug.ts
+++ b/web/i18n/ja-JP/app-debug.ts
@@ -32,6 +32,9 @@ const translation = {
     cancelDisagree: 'いいえをキャンセル',
     userAction: 'ユーザー',
   },
+  code: {
+    instruction: '指示',
+  },
   notSetAPIKey: {
     title: 'LLM プロバイダーキーが設定されていません',
     trailFinished: 'トライアル終了',
@@ -439,9 +442,7 @@ const translation = {
     visionSettings: {
       title: 'ビジョン設定',
       resolution: '解像度',
-      resolutionTooltip: `低解像度では、モデルに低解像度の 512 x 512 バージョンの画像を受け取らせ、画像を 65 トークンの予算で表現します。これにより、API がより迅速な応答を返し、高い詳細が必要なユースケースでは入力トークンを消費します。
-      \n
-      高解像度では、まずモデルに低解像度の画像を見せ、その後、入力画像サイズに基づいて 512px の正方形の詳細なクロップを作成します。詳細なクロップごとに 129 トークンの予算を使用します。`,
+      resolutionTooltip: '低解像度では、モデルに低解像度の 512 x 512 バージョンの画像を受け取らせ、画像を 65 トークンの予算で表現します。これにより、API がより迅速な応答を返し、高い詳細が必要なユースケースでは入力トークンを消費します。\n高解像度では、まずモデルに低解像度の画像を見せ、その後、入力画像サイズに基づいて 512px の正方形の詳細なクロップを作成します。詳細なクロップごとに 129 トークンの予算を使用します。',
       high: '高',
       low: '低',
       uploadMethod: 'アップロード方法',
diff --git a/web/i18n/ja-JP/app.ts b/web/i18n/ja-JP/app.ts
index f084fc3b8c..899405e8e7 100644
--- a/web/i18n/ja-JP/app.ts
+++ b/web/i18n/ja-JP/app.ts
@@ -1,4 +1,9 @@
 const translation = {
+  theme: {
+    switchDark: 'ダークテーマに切り替え',
+    switchLight: 'ライトテーマに切り替え',
+  },
+  appNamePlaceholder: 'アプリに名前を付ける',
   createApp: 'アプリを作成する',
   types: {
     all: '全て',
@@ -295,6 +300,7 @@ const translation = {
     commandHint: '@ を入力してカテゴリ別に参照',
     slashHint: '/ を入力してすべてのコマンドを表示',
     actions: {
+      slashTitle: 'コマンド',
       searchApplications: 'アプリケーションを検索',
       searchApplicationsDesc: 'アプリケーションを検索してナビゲート',
       searchPlugins: 'プラグインを検索',
diff --git a/web/i18n/ja-JP/common.ts b/web/i18n/ja-JP/common.ts
index bde00cb66b..87d9fa1fb1 100644
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@@ -1,4 +1,6 @@
 const translation = {
+  loading: '読み込み中',
+  error: 'エラー',
   theme: {
     theme: 'テーマ',
     light: '明るい',
@@ -68,6 +70,8 @@ const translation = {
     selectAll: 'すべて選択',
     deSelectAll: 'すべて選択解除',
     now: '今',
+    back: '戻る',
+    imageDownloaded: '画像がダウンロードされました',
     config: 'コンフィグ',
     yes: 'はい',
     no: 'いいえ',
@@ -248,6 +252,7 @@ const translation = {
     sendVerificationButton: '確認コードの送信',
     editWorkspaceInfo: 'ワークスペース情報を編集',
     workspaceName: 'ワークスペース名',
+    workspaceNamePlaceholder: 'ワークスペース名を入力',
     workspaceIcon: 'ワークスペースアイコン',
     changeEmail: {
       title: 'メールアドレスを変更',
@@ -512,6 +517,7 @@ const translation = {
       authorizationError: '認証エラー',
       apiKeys: 'APIキー',
       unAuthorized: '無許可',
+      credentialRemoved: '認証情報が削除されました',
       configModel: 'モデルを構成する',
       addApiKey: 'APIキーを追加してください',
       addCredential: '認証情報を追加する',
diff --git a/web/i18n/ja-JP/dataset.ts b/web/i18n/ja-JP/dataset.ts
index a880dd4f5a..b6c4e1d40c 100644
--- a/web/i18n/ja-JP/dataset.ts
+++ b/web/i18n/ja-JP/dataset.ts
@@ -245,6 +245,7 @@ const translation = {
     button: 'ファイルまたはフォルダをドラッグアンドドロップ、または',
     browse: '閲覧',
     tip: '{{supportTypes}}（最大 {{batchCount}}、各 {{size}}MB）',
+    fileSizeLimitExceeded: 'ファイルサイズが {{size}}MB の制限を超えています',
   },
 }
 
diff --git a/web/i18n/ja-JP/login.ts b/web/i18n/ja-JP/login.ts
index 7069315c9d..c9e0fe3e1e 100644
--- a/web/i18n/ja-JP/login.ts
+++ b/web/i18n/ja-JP/login.ts
@@ -57,6 +57,7 @@ const translation = {
     passwordInvalid: 'パスワードは文字と数字を含み、長さは 8 以上である必要があります',
     registrationNotAllowed: 'アカウントが見つかりません。登録するためにシステム管理者に連絡してください。',
     invalidEmailOrPassword: '無効なメールアドレスまたはパスワードです。',
+    redirectUrlMissing: 'リダイレクト URL が見つかりません',
   },
   license: {
     tip: 'GitHub のオープンソースライセンスを確認してから、Dify Community Edition を開始してください。',
diff --git a/web/i18n/ja-JP/plugin-trigger.ts b/web/i18n/ja-JP/plugin-trigger.ts
index c7453cff42..7dbd861909 100644
--- a/web/i18n/ja-JP/plugin-trigger.ts
+++ b/web/i18n/ja-JP/plugin-trigger.ts
@@ -165,6 +165,7 @@ const translation = {
       verifyFailed: '認証情報の検証に失敗しました',
       authFailed: '認証に失敗しました',
       networkError: 'ネットワークエラーです。再試行してください',
+      updateFailed: 'サブスクリプションの更新に失敗しました',
     },
   },
   events: {
diff --git a/web/i18n/ja-JP/tools.ts b/web/i18n/ja-JP/tools.ts
index 30f623575f..41dc30ac30 100644
--- a/web/i18n/ja-JP/tools.ts
+++ b/web/i18n/ja-JP/tools.ts
@@ -15,6 +15,7 @@ const translation = {
   author: '著者：',
   auth: {
     authorized: '認証済み',
+    unauthorized: '未認証',
     setup: '使用するための認証を設定する',
     setupModalTitle: '認証の設定',
     setupModalTitleDescription: '資格情報を構成した後、ワークスペース内のすべてのメンバーがアプリケーションのオーケストレーション時にこのツールを使用できます。',
diff --git a/web/i18n/ja-JP/workflow.ts b/web/i18n/ja-JP/workflow.ts
index 7f4e7a3009..24f05d6c31 100644
--- a/web/i18n/ja-JP/workflow.ts
+++ b/web/i18n/ja-JP/workflow.ts
@@ -1062,6 +1062,9 @@ const translation = {
       useVisualPicker: 'ビジュアル設定を使用',
       nodeTitle: 'スケジュールトリガー',
       mode: 'モード',
+      modeVisual: 'ビジュアル',
+      modeCron: 'Cron',
+      selectTime: '時間を選択',
       timezone: 'タイムゾーン',
       visualConfig: 'ビジュアル設定',
       monthlyDay: '月の日',
diff --git a/web/i18n/ko-KR/app-debug.ts b/web/i18n/ko-KR/app-debug.ts
index c9e048df0e..5258287285 100644
--- a/web/i18n/ko-KR/app-debug.ts
+++ b/web/i18n/ko-KR/app-debug.ts
@@ -353,9 +353,7 @@ const translation = {
     visionSettings: {
       title: '비전 설정',
       resolution: '해상도',
-      resolutionTooltip: `저해상도는 모델에게 512 x 512 해상도의 저해상도 이미지를 제공하여 65 토큰의 예산으로 이미지를 표현합니다. 이로 인해 API 는 더 빠른 응답을 제공하며 높은 세부 정보가 필요한 경우 토큰 소모를 늘립니다.
-      \n
-      고해상도는 먼저 모델에게 저해상도 이미지를 보여주고, 그 후 입력 이미지 크기에 따라 512px 의 정사각형 세부 사진을 만듭니다. 각 세부 사진에 대해 129 토큰의 예산을 사용합니다.`,
+      resolutionTooltip: '저해상도는 모델에게 512 x 512 해상도의 저해상도 이미지를 제공하여 65 토큰의 예산으로 이미지를 표현합니다. 이로 인해 API 는 더 빠른 응답을 제공하며 높은 세부 정보가 필요한 경우 토큰 소모를 늘립니다.\n고해상도는 먼저 모델에게 저해상도 이미지를 보여주고, 그 후 입력 이미지 크기에 따라 512px 의 정사각형 세부 사진을 만듭니다. 각 세부 사진에 대해 129 토큰의 예산을 사용합니다.',
       high: '고',
       low: '저',
       uploadMethod: '업로드 방식',
diff --git a/web/i18n/pl-PL/app-debug.ts b/web/i18n/pl-PL/app-debug.ts
index 262b4a204f..943896effc 100644
--- a/web/i18n/pl-PL/app-debug.ts
+++ b/web/i18n/pl-PL/app-debug.ts
@@ -379,9 +379,7 @@ const translation = {
     visionSettings: {
       title: 'Ustawienia Wizji',
       resolution: 'Rozdzielczość',
-      resolutionTooltip: `niska rozdzielczość pozwoli modelowi odbierać obrazy o rozdzielczości 512 x 512 i reprezentować obraz z limitem 65 tokenów. Pozwala to API na szybsze odpowiedzi i zużywa mniej tokenów wejściowych dla przypadków, które nie wymagają wysokiego szczegółu.
-        \n
-        wysoka rozdzielczość pozwala najpierw modelowi zobaczyć obraz niskiej rozdzielczości, a następnie tworzy szczegółowe przycięcia obrazów wejściowych jako 512px kwadratów w oparciu o rozmiar obrazu wejściowego. Każde z tych szczegółowych przycięć używa dwukrotności budżetu tokenów, co daje razem 129 tokenów.`,
+      resolutionTooltip: 'niska rozdzielczość pozwoli modelowi odbierać obrazy o rozdzielczości 512 x 512 i reprezentować obraz z limitem 65 tokenów. Pozwala to API na szybsze odpowiedzi i zużywa mniej tokenów wejściowych dla przypadków, które nie wymagają wysokiego szczegółu.\nwysoka rozdzielczość pozwala najpierw modelowi zobaczyć obraz niskiej rozdzielczości, a następnie tworzy szczegółowe przycięcia obrazów wejściowych jako 512px kwadratów w oparciu o rozmiar obrazu wejściowego. Każde z tych szczegółowych przycięć używa dwukrotności budżetu tokenów, co daje razem 129 tokenów.',
       high: 'Wysoka',
       low: 'Niska',
       uploadMethod: 'Metoda przesyłania',
diff --git a/web/i18n/pt-BR/app-debug.ts b/web/i18n/pt-BR/app-debug.ts
index d578cb5a84..30b9f59dd4 100644
--- a/web/i18n/pt-BR/app-debug.ts
+++ b/web/i18n/pt-BR/app-debug.ts
@@ -359,9 +359,7 @@ const translation = {
     visionSettings: {
       title: 'Configurações de Visão',
       resolution: 'Resolução',
-      resolutionTooltip: `Baixa resolução permitirá que o modelo receba uma versão de baixa resolução de 512 x 512 da imagem e represente a imagem com um orçamento de 65 tokens. Isso permite que a API retorne respostas mais rápidas e consuma menos tokens de entrada para casos de uso que não exigem alta precisão.
-                \n
-                Alta resolução permitirá que o modelo veja a imagem de baixa resolução e crie recortes detalhados das imagens de entrada como quadrados de 512px com base no tamanho da imagem de entrada. Cada um dos recortes detalhados usa o dobro do orçamento de tokens, totalizando 129 tokens.`,
+      resolutionTooltip: 'Baixa resolução permitirá que o modelo receba uma versão de baixa resolução de 512 x 512 da imagem e represente a imagem com um orçamento de 65 tokens. Isso permite que a API retorne respostas mais rápidas e consuma menos tokens de entrada para casos de uso que não exigem alta precisão.\nAlta resolução permitirá que o modelo veja a imagem de baixa resolução e crie recortes detalhados das imagens de entrada como quadrados de 512px com base no tamanho da imagem de entrada. Cada um dos recortes detalhados usa o dobro do orçamento de tokens, totalizando 129 tokens.',
       high: 'Alta',
       low: 'Baixa',
       uploadMethod: 'Método de Upload',
diff --git a/web/i18n/ro-RO/app-debug.ts b/web/i18n/ro-RO/app-debug.ts
index de8fd7a44f..8e36078be5 100644
--- a/web/i18n/ro-RO/app-debug.ts
+++ b/web/i18n/ro-RO/app-debug.ts
@@ -359,9 +359,7 @@ const translation = {
     visionSettings: {
       title: 'Setări Viziune',
       resolution: 'Rezoluție',
-      resolutionTooltip: `rezoluția joasă va permite modelului să primească o versiune de 512 x 512 pixeli a imaginii și să o reprezinte cu un buget de 65 de tokenuri. Acest lucru permite API-ului să returneze răspunsuri mai rapide și să consume mai puține tokenuri de intrare pentru cazurile de utilizare care nu necesită detalii ridicate.
-      \n
-      rezoluția ridicată va permite în primul rând modelului să vadă imaginea la rezoluție scăzută și apoi va crea decupaje detaliate ale imaginilor de intrare ca pătrate de 512 pixeli, în funcție de dimensiunea imaginii de intrare. Fiecare decupaj detaliat utilizează un buget de token dublu, pentru un total de 129 de tokenuri.`,
+      resolutionTooltip: 'rezoluția joasă va permite modelului să primească o versiune de 512 x 512 pixeli a imaginii și să o reprezinte cu un buget de 65 de tokenuri. Acest lucru permite API-ului să returneze răspunsuri mai rapide și să consume mai puține tokenuri de intrare pentru cazurile de utilizare care nu necesită detalii ridicate.\nrezoluția ridicată va permite în primul rând modelului să vadă imaginea la rezoluție scăzută și apoi va crea decupaje detaliate ale imaginilor de intrare ca pătrate de 512 pixeli, în funcție de dimensiunea imaginii de intrare. Fiecare decupaj detaliat utilizează un buget de token dublu, pentru un total de 129 de tokenuri.',
       high: 'Ridicat',
       low: 'Scăzut',
       uploadMethod: 'Metodă de încărcare',
diff --git a/web/i18n/ru-RU/app-debug.ts b/web/i18n/ru-RU/app-debug.ts
index 1d86e0778a..ea3b969df4 100644
--- a/web/i18n/ru-RU/app-debug.ts
+++ b/web/i18n/ru-RU/app-debug.ts
@@ -425,9 +425,7 @@ const translation = {
     visionSettings: {
       title: 'Настройки зрения',
       resolution: 'Разрешение',
-      resolutionTooltip: `Низкое разрешение позволит модели получать версию изображения с низким разрешением 512 x 512 и представлять изображение с бюджетом 65 токенов. Это позволяет API возвращать ответы быстрее и потреблять меньше входных токенов для случаев использования, не требующих высокой детализации.
-      \n
-      Высокое разрешение сначала позволит модели увидеть изображение с низким разрешением, а затем создаст детальные фрагменты входных изображений в виде квадратов 512 пикселей на основе размера входного изображения. Каждый из детальных фрагментов использует вдвое больший бюджет токенов, в общей сложности 129 токенов.`,
+      resolutionTooltip: 'Низкое разрешение позволит модели получать версию изображения с низким разрешением 512 x 512 и представлять изображение с бюджетом 65 токенов. Это позволяет API возвращать ответы быстрее и потреблять меньше входных токенов для случаев использования, не требующих высокой детализации.\nВысокое разрешение сначала позволит модели увидеть изображение с низким разрешением, а затем создаст детальные фрагменты входных изображений в виде квадратов 512 пикселей на основе размера входного изображения. Каждый из детальных фрагментов использует вдвое больший бюджет токенов, в общей сложности 129 токенов.',
       high: 'Высокое',
       low: 'Низкое',
       uploadMethod: 'Метод загрузки',
diff --git a/web/i18n/uk-UA/app-debug.ts b/web/i18n/uk-UA/app-debug.ts
index c593d2a730..18b4d32163 100644
--- a/web/i18n/uk-UA/app-debug.ts
+++ b/web/i18n/uk-UA/app-debug.ts
@@ -373,9 +373,7 @@ const translation = {
     visionSettings: {
       title: 'Налаштування зображень', // Vision Settings
       resolution: 'Роздільна здатність', // Resolution
-      resolutionTooltip: `низька роздільна здатність дозволить моделі отримати зображення з низькою роздільною здатністю 512 x 512 пікселів і представити зображення з обмеженням у 65 токенів. Це дозволяє API швидше повертати відповіді та споживати менше вхідних токенів для випадків використання, які не потребують високої деталізації.
-    \n
-    висока роздільна здатність спочатку дозволить моделі побачити зображення з низькою роздільною здатністю, а потім створити детальні фрагменти вхідних зображень у вигляді квадратів 512px на основі розміру вхідного зображення. Кожен із детальних фрагментів використовує подвійний запас токенів, загалом 129 токенів.`,
+      resolutionTooltip: 'низька роздільна здатність дозволить моделі отримати зображення з низькою роздільною здатністю 512 x 512 пікселів і представити зображення з обмеженням у 65 токенів. Це дозволяє API швидше повертати відповіді та споживати менше вхідних токенів для випадків використання, які не потребують високої деталізації.\nвисока роздільна здатність спочатку дозволить моделі побачити зображення з низькою роздільною здатністю, а потім створити детальні фрагменти вхідних зображень у вигляді квадратів 512px на основі розміру вхідного зображення. Кожен із детальних фрагментів використовує подвійний запас токенів, загалом 129 токенів.',
       high: 'Висока', // High
       low: 'Низька', // Low
       uploadMethod: 'Спосіб завантаження', // Upload Method
diff --git a/web/i18n/vi-VN/app-debug.ts b/web/i18n/vi-VN/app-debug.ts
index 150dfe488b..158a6b6ce9 100644
--- a/web/i18n/vi-VN/app-debug.ts
+++ b/web/i18n/vi-VN/app-debug.ts
@@ -353,9 +353,7 @@ const translation = {
     visionSettings: {
       title: 'Cài đặt thị giác',
       resolution: 'Độ phân giải',
-      resolutionTooltip: `Độ phân giải thấp sẽ cho phép mô hình nhận một phiên bản hình ảnh 512 x 512 thấp hơn, và đại diện cho hình ảnh với ngân sách 65 token. Điều này cho phép API trả về phản hồi nhanh hơn và tiêu thụ ít token đầu vào cho các trường hợp sử dụng không yêu cầu chi tiết cao.
-      \n
-      Độ phân giải cao sẽ đầu tiên cho phép mô hình nhìn thấy hình ảnh thấp hơn và sau đó tạo ra các cắt chi tiết của hình ảnh đầu vào dưới dạng hình vuông 512px dựa trên kích thước hình ảnh đầu vào. Mỗi cắt chi tiết sử dụng hai lần ngân sách token cho tổng cộng 129 token.`,
+      resolutionTooltip: 'Độ phân giải thấp sẽ cho phép mô hình nhận một phiên bản hình ảnh 512 x 512 thấp hơn, và đại diện cho hình ảnh với ngân sách 65 token. Điều này cho phép API trả về phản hồi nhanh hơn và tiêu thụ ít token đầu vào cho các trường hợp sử dụng không yêu cầu chi tiết cao.\nĐộ phân giải cao sẽ đầu tiên cho phép mô hình nhìn thấy hình ảnh thấp hơn và sau đó tạo ra các cắt chi tiết của hình ảnh đầu vào dưới dạng hình vuông 512px dựa trên kích thước hình ảnh đầu vào. Mỗi cắt chi tiết sử dụng hai lần ngân sách token cho tổng cộng 129 token.',
       high: 'Cao',
       low: 'Thấp',
       uploadMethod: 'Phương thức tải lên',
diff --git a/web/i18n/zh-Hans/app-api.ts b/web/i18n/zh-Hans/app-api.ts
index 4fe97f8231..70219e0cc6 100644
--- a/web/i18n/zh-Hans/app-api.ts
+++ b/web/i18n/zh-Hans/app-api.ts
@@ -79,6 +79,7 @@ const translation = {
     pathParams: 'Path Params',
     query: 'Query',
     toc: '目录',
+    noContent: '暂无内容',
   },
 }
 
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 33f563af99..5d6c2842a5 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -32,6 +32,9 @@ const translation = {
     cancelDisagree: '取消反对',
     userAction: '用户表示',
   },
+  code: {
+    instruction: '指令',
+  },
   notSetAPIKey: {
     title: 'LLM 提供者的密钥未设置',
     trailFinished: '试用已结束',
@@ -441,9 +444,7 @@ const translation = {
     visionSettings: {
       title: '视觉设置',
       resolution: '分辨率',
-      resolutionTooltip: `低分辨率模式将使模型接收图像的低分辨率版本，尺寸为 512 x 512，并使用 65 Tokens 来表示图像。这样可以使 API 更快地返回响应，并在不需要高细节的用例中消耗更少的输入。
-      \n
-      高分辨率模式将首先允许模型查看低分辨率图像，然后根据输入图像的大小创建 512 像素的详细裁剪图像。每个详细裁剪图像使用两倍的预算总共为 129 Tokens。`,
+      resolutionTooltip: '低分辨率模式将使模型接收图像的低分辨率版本，尺寸为 512 x 512，并使用 65 Tokens 来表示图像。这样可以使 API 更快地返回响应，并在不需要高细节的用例中消耗更少的输入。\n高分辨率模式将首先允许模型查看低分辨率图像，然后根据输入图像的大小创建 512 像素的详细裁剪图像。每个详细裁剪图像使用两倍的预算总共为 129 Tokens。',
       high: '高',
       low: '低',
       uploadMethod: '上传方式',
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index 517c41de10..71edaa1629 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -1,4 +1,9 @@
 const translation = {
+  theme: {
+    switchDark: '切换至深色主题',
+    switchLight: '切换至浅色主题',
+  },
+  appNamePlaceholder: '给你的应用起个名字',
   createApp: '创建应用',
   types: {
     all: '全部',
@@ -297,6 +302,7 @@ const translation = {
     commandHint: '输入 @ 按类别浏览',
     slashHint: '输入 / 查看所有可用命令',
     actions: {
+      slashTitle: '命令',
       searchApplications: '搜索应用程序',
       searchApplicationsDesc: '搜索并导航到您的应用程序',
       searchPlugins: '搜索插件',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index bd0e0e3ba4..977ffe1919 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -1,4 +1,6 @@
 const translation = {
+  loading: '加载中',
+  error: '错误',
   theme: {
     theme: '主题',
     light: '浅色',
@@ -78,6 +80,8 @@ const translation = {
     selectAll: '全选',
     deSelectAll: '取消全选',
     now: '现在',
+    back: '返回',
+    imageDownloaded: '图片已下载',
   },
   errorMsg: {
     fieldRequired: '{{field}} 为必填项',
@@ -252,6 +256,7 @@ const translation = {
     feedbackPlaceholder: '选填',
     editWorkspaceInfo: '编辑工作空间信息',
     workspaceName: '工作空间名称',
+    workspaceNamePlaceholder: '输入工作空间名称',
     workspaceIcon: '工作空间图标',
     changeEmail: {
       title: '更改邮箱',
@@ -509,6 +514,7 @@ const translation = {
     emptyProviderTip: '请安装模型供应商。',
     auth: {
       unAuthorized: '未授权',
+      credentialRemoved: '凭据已移除',
       authRemoved: '授权已移除',
       apiKeys: 'API 密钥',
       addApiKey: '添加 API 密钥',
diff --git a/web/i18n/zh-Hans/dataset.ts b/web/i18n/zh-Hans/dataset.ts
index 7399604762..781fb5aa94 100644
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@@ -245,6 +245,7 @@ const translation = {
     tip: '支持 {{supportTypes}} (最多 {{batchCount}} 个，每个大小不超过 {{size}}MB)',
     button: '拖拽文件或文件夹，或',
     browse: '浏览',
+    fileSizeLimitExceeded: '文件大小超过 {{size}}MB 限制',
   },
 }
 
diff --git a/web/i18n/zh-Hans/login.ts b/web/i18n/zh-Hans/login.ts
index 13a75eaaaa..d79005fbdd 100644
--- a/web/i18n/zh-Hans/login.ts
+++ b/web/i18n/zh-Hans/login.ts
@@ -64,6 +64,7 @@ const translation = {
     passwordLengthInValid: '密码必须至少为 8 个字符',
     registrationNotAllowed: '账户不存在，请联系系统管理员注册账户',
     invalidEmailOrPassword: '邮箱或密码错误',
+    redirectUrlMissing: '重定向 URL 缺失',
   },
   license: {
     tip: '启动 Dify 社区版之前，请阅读 GitHub 上的',
diff --git a/web/i18n/zh-Hans/plugin-trigger.ts b/web/i18n/zh-Hans/plugin-trigger.ts
index 304cdd47bd..4f31f517eb 100644
--- a/web/i18n/zh-Hans/plugin-trigger.ts
+++ b/web/i18n/zh-Hans/plugin-trigger.ts
@@ -161,6 +161,7 @@ const translation = {
       verifyFailed: '验证凭据失败',
       authFailed: '授权失败',
       networkError: '网络错误，请重试',
+      updateFailed: '更新订阅失败',
     },
   },
   events: {
diff --git a/web/i18n/zh-Hans/tools.ts b/web/i18n/zh-Hans/tools.ts
index 624fbb241a..7893a66f66 100644
--- a/web/i18n/zh-Hans/tools.ts
+++ b/web/i18n/zh-Hans/tools.ts
@@ -15,6 +15,7 @@ const translation = {
   author: '作者',
   auth: {
     authorized: '已授权',
+    unauthorized: '未授权',
     setup: '要使用请先授权',
     setupModalTitle: '设置授权',
     setupModalTitleDescription: '配置凭据后，工作区中的所有成员都可以在编排应用程序时使用此工具。',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index fd86292252..a6daa56667 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -1062,6 +1062,9 @@ const translation = {
       days: '天',
       notConfigured: '未配置',
       mode: '模式',
+      modeVisual: '可视化',
+      modeCron: 'Cron',
+      selectTime: '选择时间',
       timezone: '时区',
       visualConfig: '可视化配置',
       monthlyDay: '月份日期',
diff --git a/web/i18n/zh-Hant/app-debug.ts b/web/i18n/zh-Hant/app-debug.ts
index b66fcb9816..78b179097d 100644
--- a/web/i18n/zh-Hant/app-debug.ts
+++ b/web/i18n/zh-Hant/app-debug.ts
@@ -353,9 +353,7 @@ const translation = {
     visionSettings: {
       title: '視覺設定',
       resolution: '解析度',
-      resolutionTooltip: `低解析度模式將使模型接收影象的低解析度版本，尺寸為 512 x 512，並使用 65 Tokens 來表示影象。這樣可以使 API 更快地返回響應，並在不需要高細節的用例中消耗更少的輸入。
-      \n
-      高解析度模式將首先允許模型檢視低解析度影象，然後根據輸入影象的大小建立 512 畫素的詳細裁剪影象。每個詳細裁剪影象使用兩倍的預算總共為 129 Tokens。`,
+      resolutionTooltip: '低解析度模式將使模型接收影象的低解析度版本，尺寸為 512 x 512，並使用 65 Tokens 來表示影象。這樣可以使 API 更快地返回響應，並在不需要高細節的用例中消耗更少的輸入。\n高解析度模式將首先允許模型檢視低解析度影象，然後根據輸入影象的大小建立 512 畫素的詳細裁剪影象。每個詳細裁剪影象使用兩倍的預算總共為 129 Tokens。',
       high: '高',
       low: '低',
       uploadMethod: '上傳方式',
diff --git a/web/models/log.ts b/web/models/log.ts
index 8c022ee6b2..d15d6d6688 100644
--- a/web/models/log.ts
+++ b/web/models/log.ts
@@ -6,21 +6,6 @@ import type {
 } from '@/app/components/workflow/types'
 import type { VisionFile } from '@/types/app'
 
-// Log type contains key:string conversation_id:string created_at:string question:string answer:string
-export type Conversation = {
-  id: string
-  key: string
-  conversationId: string
-  question: string
-  answer: string
-  userRate: number
-  adminRate: number
-}
-
-export type ConversationListResponse = {
-  logs: Conversation[]
-}
-
 export const CompletionParams = ['temperature', 'top_p', 'presence_penalty', 'max_token', 'stop', 'frequency_penalty'] as const
 
 export type CompletionParamType = typeof CompletionParams[number]
diff --git a/web/package.json b/web/package.json
index ce2e59e022..fe6b8ec9f7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dify-web",
   "type": "module",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "private": true,
   "packageManager": "pnpm@10.26.1+sha512.664074abc367d2c9324fdc18037097ce0a8f126034160f709928e9e9f95d98714347044e5c3164d65bd5da6c59c6be362b107546292a8eecb7999196e5ce58fa",
   "engines": {
@@ -33,13 +33,13 @@
     "prepare": "cd ../ && node -e \"if (process.env.NODE_ENV !== 'production'){process.exit(1)} \" || husky ./web/.husky",
     "gen-icons": "node ./app/components/base/icons/script.mjs",
     "uglify-embed": "node ./bin/uglify-embed",
-    "check-i18n": "node ./i18n-config/check-i18n.js",
-    "auto-gen-i18n": "node ./i18n-config/auto-gen-i18n.js",
-    "gen:i18n-types": "node ./i18n-config/generate-i18n-types.js",
-    "check:i18n-types": "node ./i18n-config/check-i18n-sync.js",
+    "check-i18n": "tsx ./i18n-config/check-i18n.js",
+    "auto-gen-i18n": "tsx ./i18n-config/auto-gen-i18n.js",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest --watch",
-    "analyze-component": "node testing/analyze-component.js",
+    "analyze-component": "node ./scripts/analyze-component.js",
+    "refactor-component": "node ./scripts/refactor-component.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "preinstall": "npx only-allow pnpm",
@@ -86,6 +86,7 @@
     "echarts-for-react": "^3.0.5",
     "elkjs": "^0.9.3",
     "emoji-mart": "^5.6.0",
+    "es-toolkit": "^1.43.0",
     "fast-deep-equal": "^3.1.3",
     "html-entities": "^2.6.0",
     "html-to-image": "1.11.13",
@@ -101,7 +102,6 @@
     "lamejs": "^1.2.1",
     "lexical": "^0.38.2",
     "line-clamp": "^1.0.0",
-    "lodash-es": "^4.17.21",
     "mermaid": "~11.11.0",
     "mime": "^4.1.0",
     "mitt": "^3.0.1",
@@ -170,7 +170,6 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash-es": "^4.17.12",
     "@types/negotiator": "^0.6.4",
     "@types/node": "18.15.0",
     "@types/qs": "^6.14.0",
@@ -211,7 +210,7 @@
     "sass": "^1.93.2",
     "storybook": "9.1.17",
     "tailwindcss": "^3.4.18",
-    "ts-node": "^10.9.2",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "uglify-js": "^3.19.3",
     "vite": "^7.3.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 95d35c24d8..51f421e90b 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -174,6 +174,9 @@ importers:
       emoji-mart:
         specifier: ^5.6.0
         version: 5.6.0
+      es-toolkit:
+        specifier: ^1.43.0
+        version: 1.43.0
       fast-deep-equal:
         specifier: ^3.1.3
         version: 3.1.3
@@ -219,9 +222,6 @@ importers:
       line-clamp:
         specifier: ^1.0.0
         version: 1.0.0
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
       mermaid:
         specifier: ~11.11.0
         version: 11.11.0
@@ -421,9 +421,6 @@ importers:
       '@types/js-yaml':
         specifier: ^4.0.9
         version: 4.0.9
-      '@types/lodash-es':
-        specifier: ^4.17.12
-        version: 4.17.12
       '@types/negotiator':
         specifier: ^0.6.4
         version: 0.6.4
@@ -544,9 +541,9 @@ importers:
       tailwindcss:
         specifier: ^3.4.18
         version: 3.4.18(tsx@4.21.0)(yaml@2.8.2)
-      ts-node:
-        specifier: ^10.9.2
-        version: 10.9.2(@types/node@18.15.0)(typescript@5.9.3)
+      tsx:
+        specifier: ^4.21.0
+        version: 4.21.0
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -1360,10 +1357,6 @@ packages:
   '@code-inspector/webpack@1.2.9':
     resolution: {integrity: sha512-9YEykVrOIc0zMV7pyTyZhCprjScjn6gPPmxb4/OQXKCrP2fAm+NB188rg0s95e4sM7U3qRUpPA4NUH5F7Ogo+g==}
 
-  '@cspotcode/source-map-support@0.8.1':
-    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
-    engines: {node: '>=12'}
-
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
     engines: {node: '>=18'}
@@ -2175,9 +2168,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@jridgewell/trace-mapping@0.3.9':
-    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
-
   '@lexical/clipboard@0.38.2':
     resolution: {integrity: sha512-dDShUplCu8/o6BB9ousr3uFZ9bltR+HtleF/Tl8FXFNPpZ4AXhbLKUoJuucRuIr+zqT7RxEv/3M6pk/HEoE6NQ==}
 
@@ -3405,18 +3395,6 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
-  '@tsconfig/node10@1.0.12':
-    resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==}
-
-  '@tsconfig/node12@1.0.11':
-    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-
-  '@tsconfig/node14@1.0.3':
-    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-
-  '@tsconfig/node16@1.0.4':
-    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -3594,12 +3572,6 @@ packages:
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
-  '@types/lodash-es@4.17.12':
-    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
-
-  '@types/lodash@4.17.21':
-    resolution: {integrity: sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ==}
-
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -4094,9 +4066,6 @@ packages:
     resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
     engines: {node: '>=14'}
 
-  arg@4.1.3:
-    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -4624,9 +4593,6 @@ packages:
   create-hmac@1.1.7:
     resolution: {integrity: sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==}
 
-  create-require@1.1.1:
-    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-
   cron-parser@5.4.0:
     resolution: {integrity: sha512-HxYB8vTvnQFx4dLsZpGRa0uHp6X3qIzS3ZJgJ9v6l/5TJMgeWQbLkR5yiJ5hOxGbc9+jCADDnydIe15ReLZnJA==}
     engines: {node: '>=18'}
@@ -4936,10 +4902,6 @@ packages:
     resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  diff@4.0.2:
-    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
-    engines: {node: '>=0.3.1'}
-
   diffie-hellman@5.0.3:
     resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
 
@@ -5071,6 +5033,9 @@ packages:
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
+  es-toolkit@1.43.0:
+    resolution: {integrity: sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==}
+
   esast-util-from-estree@2.0.0:
     resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
 
@@ -6364,9 +6329,6 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  make-error@1.3.6:
-    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-
   markdown-extensions@2.0.0:
     resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
     engines: {node: '>=16'}
@@ -8159,20 +8121,6 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  ts-node@10.9.2:
-    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-
   ts-pattern@5.9.0:
     resolution: {integrity: sha512-6s5V71mX8qBUmlgbrfL33xDUwO0fq48rxAu2LBE11WBeGdpCPOsXksQbZJHvHwhrd3QjUusd3mAOM5Gg0mFBLg==}
 
@@ -8407,9 +8355,6 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
-  v8-compile-cache-lib@3.0.1:
-    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -8797,10 +8742,6 @@ packages:
     resolution: {integrity: sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==}
     engines: {node: '>=16.0.0', npm: '>=8.0.0'}
 
-  yn@3.1.1:
-    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
-    engines: {node: '>=6'}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -9954,10 +9895,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@cspotcode/source-map-support@0.8.1':
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.9
-
   '@csstools/color-helpers@5.1.0': {}
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -10600,11 +10537,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@jridgewell/trace-mapping@0.3.9':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
   '@lexical/clipboard@0.38.2':
     dependencies:
       '@lexical/html': 0.38.2
@@ -11923,14 +11855,6 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
-  '@tsconfig/node10@1.0.12': {}
-
-  '@tsconfig/node12@1.0.11': {}
-
-  '@tsconfig/node14@1.0.3': {}
-
-  '@tsconfig/node16@1.0.4': {}
-
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -12147,12 +12071,6 @@ snapshots:
     dependencies:
       '@types/node': 18.15.0
 
-  '@types/lodash-es@4.17.12':
-    dependencies:
-      '@types/lodash': 4.17.21
-
-  '@types/lodash@4.17.21': {}
-
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -12742,8 +12660,6 @@ snapshots:
 
   are-docs-informative@0.0.2: {}
 
-  arg@4.1.3: {}
-
   arg@5.0.2: {}
 
   argparse@2.0.1: {}
@@ -13291,8 +13207,6 @@ snapshots:
       safe-buffer: 5.2.1
       sha.js: 2.4.12
 
-  create-require@1.1.1: {}
-
   cron-parser@5.4.0:
     dependencies:
       luxon: 3.7.2
@@ -13625,8 +13539,6 @@ snapshots:
 
   diff-sequences@27.5.1: {}
 
-  diff@4.0.2: {}
-
   diffie-hellman@5.0.3:
     dependencies:
       bn.js: 4.12.2
@@ -13761,6 +13673,8 @@ snapshots:
 
   es-module-lexer@1.7.0: {}
 
+  es-toolkit@1.43.0: {}
+
   esast-util-from-estree@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -15350,8 +15264,6 @@ snapshots:
     dependencies:
       semver: 7.7.3
 
-  make-error@1.3.6: {}
-
   markdown-extensions@2.0.0: {}
 
   markdown-table@3.0.4: {}
@@ -17655,24 +17567,6 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-node@10.9.2(@types/node@18.15.0)(typescript@5.9.3):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.12
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 18.15.0
-      acorn: 8.15.0
-      acorn-walk: 8.3.4
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.9.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-
   ts-pattern@5.9.0: {}
 
   tsconfck@3.1.6(typescript@5.9.3):
@@ -17888,8 +17782,6 @@ snapshots:
 
   uuid@11.1.0: {}
 
-  v8-compile-cache-lib@3.0.1: {}
-
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -18312,8 +18204,6 @@ snapshots:
     dependencies:
       lib0: 0.2.115
 
-  yn@3.1.1: {}
-
   yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.2: {}
diff --git a/web/testing/analyze-component.js b/web/scripts/analyze-component.js
similarity index 64%
rename from web/testing/analyze-component.js
rename to web/scripts/analyze-component.js
index 3f70f3d1ec..8b01744b3d 100755
--- a/web/testing/analyze-component.js
+++ b/web/scripts/analyze-component.js
@@ -3,376 +3,13 @@
 import { spawnSync } from 'node:child_process'
 import fs from 'node:fs'
 import path from 'node:path'
-import tsParser from '@typescript-eslint/parser'
-import { Linter } from 'eslint'
-import sonarPlugin from 'eslint-plugin-sonarjs'
-
-// ============================================================================
-// Simple Analyzer
-// ============================================================================
-
-class ComponentAnalyzer {
-  analyze(code, filePath, absolutePath) {
-    const resolvedPath = absolutePath ?? path.resolve(process.cwd(), filePath)
-    const fileName = path.basename(filePath, path.extname(filePath))
-    const lineCount = code.split('\n').length
-
-    // Calculate complexity metrics
-    const { total: rawComplexity, max: rawMaxComplexity } = this.calculateCognitiveComplexity(code)
-    const complexity = this.normalizeComplexity(rawComplexity)
-    const maxComplexity = this.normalizeComplexity(rawMaxComplexity)
-
-    // Count usage references (may take a few seconds)
-    const usageCount = this.countUsageReferences(filePath, resolvedPath)
-
-    // Calculate test priority
-    const priority = this.calculateTestPriority(complexity, usageCount)
-
-    return {
-      name: fileName.charAt(0).toUpperCase() + fileName.slice(1),
-      path: filePath,
-      type: this.detectType(filePath, code),
-      hasProps: code.includes('Props') || code.includes('interface'),
-      hasState: code.includes('useState') || code.includes('useReducer'),
-      hasEffects: code.includes('useEffect'),
-      hasCallbacks: code.includes('useCallback'),
-      hasMemo: code.includes('useMemo'),
-      hasEvents: /on[A-Z]\w+/.test(code),
-      hasRouter: code.includes('useRouter') || code.includes('usePathname'),
-      hasAPI: code.includes('service/') || code.includes('fetch(') || code.includes('useSWR'),
-      hasForwardRef: code.includes('forwardRef'),
-      hasComponentMemo: /React\.memo|memo\(/.test(code),
-      hasSuspense: code.includes('Suspense') || /\blazy\(/.test(code),
-      hasPortal: code.includes('createPortal'),
-      hasImperativeHandle: code.includes('useImperativeHandle'),
-      hasSWR: code.includes('useSWR'),
-      hasReactQuery: code.includes('useQuery') || code.includes('useMutation'),
-      hasAhooks: code.includes('from \'ahooks\''),
-      complexity,
-      maxComplexity,
-      rawComplexity,
-      rawMaxComplexity,
-      lineCount,
-      usageCount,
-      priority,
-    }
-  }
-
-  detectType(filePath, code) {
-    const normalizedPath = filePath.replace(/\\/g, '/')
-    if (normalizedPath.includes('/hooks/'))
-      return 'hook'
-    if (normalizedPath.includes('/utils/'))
-      return 'util'
-    if (/\/page\.(t|j)sx?$/.test(normalizedPath))
-      return 'page'
-    if (/\/layout\.(t|j)sx?$/.test(normalizedPath))
-      return 'layout'
-    if (/\/providers?\//.test(normalizedPath))
-      return 'provider'
-    // Dify-specific types
-    if (normalizedPath.includes('/components/base/'))
-      return 'base-component'
-    if (normalizedPath.includes('/context/'))
-      return 'context'
-    if (normalizedPath.includes('/store/'))
-      return 'store'
-    if (normalizedPath.includes('/service/'))
-      return 'service'
-    if (/use[A-Z]\w+/.test(code))
-      return 'component'
-    return 'component'
-  }
-
-  /**
-   * Calculate Cognitive Complexity using SonarJS ESLint plugin
-   * Reference: https://www.sonarsource.com/blog/5-clean-code-tips-for-reducing-cognitive-complexity/
-   *
-   * Returns raw (unnormalized) complexity values:
-   *   - total: sum of all functions' complexity in the file
-   *   - max: highest single function complexity in the file
-   *
-   * Raw Score Thresholds (per function):
-   *   0-15: Simple | 16-30: Medium | 31-50: Complex | 51+: Very Complex
-   *
-   * @returns {{ total: number, max: number }} raw total and max complexity
-   */
-  calculateCognitiveComplexity(code) {
-    const linter = new Linter()
-    const baseConfig = {
-      languageOptions: {
-        parser: tsParser,
-        parserOptions: {
-          ecmaVersion: 'latest',
-          sourceType: 'module',
-          ecmaFeatures: { jsx: true },
-        },
-      },
-      plugins: { sonarjs: sonarPlugin },
-    }
-
-    try {
-      // Get total complexity using 'metric' option (more stable)
-      const totalConfig = {
-        ...baseConfig,
-        rules: { 'sonarjs/cognitive-complexity': ['error', 0, 'metric'] },
-      }
-      const totalMessages = linter.verify(code, totalConfig)
-      const totalMsg = totalMessages.find(
-        msg => msg.ruleId === 'sonarjs/cognitive-complexity'
-          && msg.messageId === 'fileComplexity',
-      )
-      const total = totalMsg ? Number.parseInt(totalMsg.message, 10) : 0
-
-      // Get max function complexity by analyzing each function
-      const maxConfig = {
-        ...baseConfig,
-        rules: { 'sonarjs/cognitive-complexity': ['error', 0] },
-      }
-      const maxMessages = linter.verify(code, maxConfig)
-      let max = 0
-      const complexityPattern = /reduce its Cognitive Complexity from (\d+)/
-
-      maxMessages.forEach((msg) => {
-        if (msg.ruleId === 'sonarjs/cognitive-complexity') {
-          const match = msg.message.match(complexityPattern)
-          if (match && match[1])
-            max = Math.max(max, Number.parseInt(match[1], 10))
-        }
-      })
-
-      return { total, max }
-    }
-    catch {
-      return { total: 0, max: 0 }
-    }
-  }
-
-  /**
-   * Normalize cognitive complexity to 0-100 scale
-   *
-   * Mapping (aligned with SonarJS thresholds):
-   *   Raw 0-15 (Simple)       -> Normalized 0-25
-   *   Raw 16-30 (Medium)      -> Normalized 25-50
-   *   Raw 31-50 (Complex)     -> Normalized 50-75
-   *   Raw 51+ (Very Complex)  -> Normalized 75-100 (asymptotic)
-   */
-  normalizeComplexity(rawComplexity) {
-    if (rawComplexity <= 15) {
-      // Linear: 0-15 -> 0-25
-      return Math.round((rawComplexity / 15) * 25)
-    }
-    else if (rawComplexity <= 30) {
-      // Linear: 16-30 -> 25-50
-      return Math.round(25 + ((rawComplexity - 15) / 15) * 25)
-    }
-    else if (rawComplexity <= 50) {
-      // Linear: 31-50 -> 50-75
-      return Math.round(50 + ((rawComplexity - 30) / 20) * 25)
-    }
-    else {
-      // Asymptotic: 51+ -> 75-100
-      // Formula ensures score approaches but never exceeds 100
-      return Math.round(75 + 25 * (1 - 1 / (1 + (rawComplexity - 50) / 100)))
-    }
-  }
-
-  /**
-   * Count how many times a component is referenced in the codebase
-   * Scans TypeScript sources for import statements referencing the component
-   */
-  countUsageReferences(filePath, absolutePath) {
-    try {
-      const resolvedComponentPath = absolutePath ?? path.resolve(process.cwd(), filePath)
-      const fileName = path.basename(resolvedComponentPath, path.extname(resolvedComponentPath))
-
-      let searchName = fileName
-      if (fileName === 'index') {
-        const parentDir = path.dirname(resolvedComponentPath)
-        searchName = path.basename(parentDir)
-      }
-
-      if (!searchName)
-        return 0
-
-      const searchRoots = this.collectSearchRoots(resolvedComponentPath)
-      if (searchRoots.length === 0)
-        return 0
-
-      const escapedName = ComponentAnalyzer.escapeRegExp(searchName)
-      const patterns = [
-        new RegExp(`from\\s+['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
-        new RegExp(`import\\s*\\(\\s*['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
-        new RegExp(`export\\s+(?:\\*|{[^}]*})\\s*from\\s+['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
-        new RegExp(`require\\(\\s*['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
-      ]
-
-      const visited = new Set()
-      let usageCount = 0
-
-      const stack = [...searchRoots]
-      while (stack.length > 0) {
-        const currentDir = stack.pop()
-        if (!currentDir || visited.has(currentDir))
-          continue
-        visited.add(currentDir)
-
-        const entries = fs.readdirSync(currentDir, { withFileTypes: true })
-
-        entries.forEach((entry) => {
-          const entryPath = path.join(currentDir, entry.name)
-
-          if (entry.isDirectory()) {
-            if (this.shouldSkipDir(entry.name))
-              return
-            stack.push(entryPath)
-            return
-          }
-
-          if (!this.shouldInspectFile(entry.name))
-            return
-
-          const normalizedEntryPath = path.resolve(entryPath)
-          if (normalizedEntryPath === path.resolve(resolvedComponentPath))
-            return
-
-          const source = fs.readFileSync(entryPath, 'utf-8')
-          if (!source.includes(searchName))
-            return
-
-          if (patterns.some((pattern) => {
-            pattern.lastIndex = 0
-            return pattern.test(source)
-          })) {
-            usageCount += 1
-          }
-        })
-      }
-
-      return usageCount
-    }
-    catch {
-      // If command fails, return 0
-      return 0
-    }
-  }
-
-  collectSearchRoots(resolvedComponentPath) {
-    const roots = new Set()
-
-    let currentDir = path.dirname(resolvedComponentPath)
-    const workspaceRoot = process.cwd()
-
-    while (currentDir && currentDir !== path.dirname(currentDir)) {
-      if (path.basename(currentDir) === 'app') {
-        roots.add(currentDir)
-        break
-      }
-
-      if (currentDir === workspaceRoot)
-        break
-      currentDir = path.dirname(currentDir)
-    }
-
-    const fallbackRoots = [
-      path.join(workspaceRoot, 'app'),
-      path.join(workspaceRoot, 'web', 'app'),
-      path.join(workspaceRoot, 'src'),
-    ]
-
-    fallbackRoots.forEach((root) => {
-      if (fs.existsSync(root) && fs.statSync(root).isDirectory())
-        roots.add(root)
-    })
-
-    return Array.from(roots)
-  }
-
-  shouldSkipDir(dirName) {
-    const normalized = dirName.toLowerCase()
-    return [
-      'node_modules',
-      '.git',
-      '.next',
-      'dist',
-      'out',
-      'coverage',
-      'build',
-      '__tests__',
-      '__mocks__',
-    ].includes(normalized)
-  }
-
-  shouldInspectFile(fileName) {
-    const normalized = fileName.toLowerCase()
-    if (!(/\.(ts|tsx)$/i.test(fileName)))
-      return false
-    if (normalized.endsWith('.d.ts'))
-      return false
-    if (/\.(spec|test)\.(ts|tsx)$/.test(normalized))
-      return false
-    if (normalized.endsWith('.stories.tsx'))
-      return false
-    return true
-  }
-
-  static escapeRegExp(value) {
-    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-  }
-
-  /**
-   * Calculate test priority based on cognitive complexity and usage
-   *
-   * Priority Score = 0.7 * Complexity + 0.3 * Usage Score (all normalized to 0-100)
-   * - Complexity Score: 0-100 (normalized from SonarJS)
-   * - Usage Score: 0-100 (based on reference count)
-   *
-   * Priority Levels (0-100):
-   * - 0-25: 🟢 LOW
-   * - 26-50: 🟡 MEDIUM
-   * - 51-75: 🟠 HIGH
-   * - 76-100: 🔴 CRITICAL
-   */
-  calculateTestPriority(complexity, usageCount) {
-    const complexityScore = complexity
-
-    // Normalize usage score to 0-100
-    let usageScore
-    if (usageCount === 0)
-      usageScore = 0
-    else if (usageCount <= 5)
-      usageScore = 20
-    else if (usageCount <= 20)
-      usageScore = 40
-    else if (usageCount <= 50)
-      usageScore = 70
-    else
-      usageScore = 100
-
-    // Weighted average: complexity (70%) + usage (30%)
-    const totalScore = Math.round(0.7 * complexityScore + 0.3 * usageScore)
-
-    return {
-      score: totalScore,
-      level: this.getPriorityLevel(totalScore),
-      usageScore,
-      complexityScore,
-    }
-  }
-
-  /**
-   * Get priority level based on score (0-100 scale)
-   */
-  getPriorityLevel(score) {
-    if (score > 75)
-      return '🔴 CRITICAL'
-    if (score > 50)
-      return '🟠 HIGH'
-    if (score > 25)
-      return '🟡 MEDIUM'
-    return '🟢 LOW'
-  }
-}
+import {
+  ComponentAnalyzer,
+  extractCopyContent,
+  getComplexityLevel,
+  listAnalyzableFiles,
+  resolveDirectoryEntry,
+} from './component-analyzer.js'
 
 // ============================================================================
 // Prompt Builder for AI Assistants
@@ -394,8 +31,8 @@ class TestPromptBuilder {
 📊 Component Analysis:
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 Type:               ${analysis.type}
-Total Complexity:   ${analysis.complexity}/100 ${this.getComplexityLevel(analysis.complexity)}
-Max Func Complexity: ${analysis.maxComplexity}/100 ${this.getComplexityLevel(analysis.maxComplexity)}
+Total Complexity:   ${analysis.complexity}/100 ${getComplexityLevel(analysis.complexity)}
+Max Func Complexity: ${analysis.maxComplexity}/100 ${getComplexityLevel(analysis.maxComplexity)}
 Lines:              ${analysis.lineCount}
 Usage:              ${analysis.usageCount} reference${analysis.usageCount !== 1 ? 's' : ''}
 Test Priority: ${analysis.priority.score} ${analysis.priority.level}
@@ -444,17 +81,6 @@ Create the test file at: ${testPath}
 `
   }
 
-  getComplexityLevel(score) {
-    // Normalized complexity thresholds (0-100 scale)
-    if (score <= 25)
-      return '🟢 Simple'
-    if (score <= 50)
-      return '🟡 Medium'
-    if (score <= 75)
-      return '🟠 Complex'
-    return '🔴 Very Complex'
-  }
-
   buildFocusPoints(analysis) {
     const points = []
 
@@ -730,94 +356,10 @@ Output format:
   }
 }
 
-function extractCopyContent(prompt) {
-  const marker = '📋 PROMPT FOR AI ASSISTANT'
-  const markerIndex = prompt.indexOf(marker)
-  if (markerIndex === -1)
-    return ''
-
-  const section = prompt.slice(markerIndex)
-  const lines = section.split('\n')
-  const firstDivider = lines.findIndex(line => line.includes('━━━━━━━━'))
-  if (firstDivider === -1)
-    return ''
-
-  const startIdx = firstDivider + 1
-  let endIdx = lines.length
-
-  for (let i = startIdx; i < lines.length; i++) {
-    if (lines[i].includes('━━━━━━━━')) {
-      endIdx = i
-      break
-    }
-  }
-
-  if (startIdx >= endIdx)
-    return ''
-
-  return lines.slice(startIdx, endIdx).join('\n').trim()
-}
-
 // ============================================================================
 // Main Function
 // ============================================================================
 
-/**
- * Resolve directory to entry file
- * Priority: index files > common entry files (node.tsx, panel.tsx, etc.)
- */
-function resolveDirectoryEntry(absolutePath, componentPath) {
-  // Entry files in priority order: index files first, then common entry files
-  const entryFiles = [
-    'index.tsx',
-    'index.ts', // Priority 1: index files
-    'node.tsx',
-    'panel.tsx',
-    'component.tsx',
-    'main.tsx',
-    'container.tsx', // Priority 2: common entry files
-  ]
-  for (const entryFile of entryFiles) {
-    const entryPath = path.join(absolutePath, entryFile)
-    if (fs.existsSync(entryPath)) {
-      return {
-        absolutePath: entryPath,
-        componentPath: path.join(componentPath, entryFile),
-      }
-    }
-  }
-
-  return null
-}
-
-/**
- * List analyzable files in directory (for user guidance)
- */
-function listAnalyzableFiles(dirPath) {
-  try {
-    const entries = fs.readdirSync(dirPath, { withFileTypes: true })
-    return entries
-      .filter(entry => !entry.isDirectory() && /\.(tsx?|jsx?)$/.test(entry.name) && !entry.name.endsWith('.d.ts'))
-      .map(entry => entry.name)
-      .sort((a, b) => {
-        // Prioritize common entry files
-        const priority = ['index.tsx', 'index.ts', 'node.tsx', 'panel.tsx', 'component.tsx', 'main.tsx', 'container.tsx']
-        const aIdx = priority.indexOf(a)
-        const bIdx = priority.indexOf(b)
-        if (aIdx !== -1 && bIdx !== -1)
-          return aIdx - bIdx
-        if (aIdx !== -1)
-          return -1
-        if (bIdx !== -1)
-          return 1
-        return a.localeCompare(b)
-      })
-  }
-  catch {
-    return []
-  }
-}
-
 function showHelp() {
   console.log(`
 📋 Component Analyzer - Generate test prompts for AI assistants
diff --git a/web/scripts/component-analyzer.js b/web/scripts/component-analyzer.js
new file mode 100644
index 0000000000..c53b652bc2
--- /dev/null
+++ b/web/scripts/component-analyzer.js
@@ -0,0 +1,484 @@
+/**
+ * Component Analyzer - Shared module for analyzing React component complexity
+ *
+ * This module is used by:
+ * - analyze-component.js (for test generation)
+ * - refactor-component.js (for refactoring suggestions)
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+import tsParser from '@typescript-eslint/parser'
+import { Linter } from 'eslint'
+import sonarPlugin from 'eslint-plugin-sonarjs'
+
+// ============================================================================
+// Component Analyzer
+// ============================================================================
+
+export class ComponentAnalyzer {
+  analyze(code, filePath, absolutePath) {
+    const resolvedPath = absolutePath ?? path.resolve(process.cwd(), filePath)
+    const fileName = path.basename(filePath, path.extname(filePath))
+    const lineCount = code.split('\n').length
+
+    // Calculate complexity metrics
+    const { total: rawComplexity, max: rawMaxComplexity } = this.calculateCognitiveComplexity(code)
+    const complexity = this.normalizeComplexity(rawComplexity)
+    const maxComplexity = this.normalizeComplexity(rawMaxComplexity)
+
+    // Count usage references (may take a few seconds)
+    const usageCount = this.countUsageReferences(filePath, resolvedPath)
+
+    // Calculate test priority
+    const priority = this.calculateTestPriority(complexity, usageCount)
+
+    return {
+      name: fileName.charAt(0).toUpperCase() + fileName.slice(1),
+      path: filePath,
+      type: this.detectType(filePath, code),
+      hasProps: code.includes('Props') || code.includes('interface'),
+      hasState: code.includes('useState') || code.includes('useReducer'),
+      hasEffects: code.includes('useEffect'),
+      hasCallbacks: code.includes('useCallback'),
+      hasMemo: code.includes('useMemo'),
+      hasEvents: /on[A-Z]\w+/.test(code),
+      hasRouter: code.includes('useRouter') || code.includes('usePathname'),
+      hasAPI: code.includes('service/') || code.includes('fetch(') || code.includes('useSWR'),
+      hasForwardRef: code.includes('forwardRef'),
+      hasComponentMemo: /React\.memo|memo\(/.test(code),
+      hasSuspense: code.includes('Suspense') || /\blazy\(/.test(code),
+      hasPortal: code.includes('createPortal'),
+      hasImperativeHandle: code.includes('useImperativeHandle'),
+      hasSWR: code.includes('useSWR'),
+      hasReactQuery: code.includes('useQuery') || code.includes('useMutation'),
+      hasAhooks: code.includes('from \'ahooks\''),
+      complexity,
+      maxComplexity,
+      rawComplexity,
+      rawMaxComplexity,
+      lineCount,
+      usageCount,
+      priority,
+    }
+  }
+
+  detectType(filePath, code) {
+    const normalizedPath = filePath.replace(/\\/g, '/')
+    if (normalizedPath.includes('/hooks/'))
+      return 'hook'
+    if (normalizedPath.includes('/utils/'))
+      return 'util'
+    if (/\/page\.(t|j)sx?$/.test(normalizedPath))
+      return 'page'
+    if (/\/layout\.(t|j)sx?$/.test(normalizedPath))
+      return 'layout'
+    if (/\/providers?\//.test(normalizedPath))
+      return 'provider'
+    // Dify-specific types
+    if (normalizedPath.includes('/components/base/'))
+      return 'base-component'
+    if (normalizedPath.includes('/context/'))
+      return 'context'
+    if (normalizedPath.includes('/store/'))
+      return 'store'
+    if (normalizedPath.includes('/service/'))
+      return 'service'
+    if (/use[A-Z]\w+/.test(code))
+      return 'component'
+    return 'component'
+  }
+
+  /**
+   * Calculate Cognitive Complexity using SonarJS ESLint plugin
+   * Reference: https://www.sonarsource.com/blog/5-clean-code-tips-for-reducing-cognitive-complexity/
+   *
+   * Returns raw (unnormalized) complexity values:
+   *   - total: sum of all functions' complexity in the file
+   *   - max: highest single function complexity in the file
+   *
+   * Raw Score Thresholds (per function):
+   *   0-15: Simple | 16-30: Medium | 31-50: Complex | 51+: Very Complex
+   *
+   * @returns {{ total: number, max: number }} raw total and max complexity
+   */
+  calculateCognitiveComplexity(code) {
+    const linter = new Linter()
+    const baseConfig = {
+      languageOptions: {
+        parser: tsParser,
+        parserOptions: {
+          ecmaVersion: 'latest',
+          sourceType: 'module',
+          ecmaFeatures: { jsx: true },
+        },
+      },
+      plugins: { sonarjs: sonarPlugin },
+    }
+
+    try {
+      // Get total complexity using 'metric' option (more stable)
+      const totalConfig = {
+        ...baseConfig,
+        rules: { 'sonarjs/cognitive-complexity': ['error', 0, 'metric'] },
+      }
+      const totalMessages = linter.verify(code, totalConfig)
+      const totalMsg = totalMessages.find(
+        msg => msg.ruleId === 'sonarjs/cognitive-complexity'
+          && msg.messageId === 'fileComplexity',
+      )
+      const total = totalMsg ? Number.parseInt(totalMsg.message, 10) : 0
+
+      // Get max function complexity by analyzing each function
+      const maxConfig = {
+        ...baseConfig,
+        rules: { 'sonarjs/cognitive-complexity': ['error', 0] },
+      }
+      const maxMessages = linter.verify(code, maxConfig)
+      let max = 0
+      const complexityPattern = /reduce its Cognitive Complexity from (\d+)/
+
+      maxMessages.forEach((msg) => {
+        if (msg.ruleId === 'sonarjs/cognitive-complexity') {
+          const match = msg.message.match(complexityPattern)
+          if (match && match[1])
+            max = Math.max(max, Number.parseInt(match[1], 10))
+        }
+      })
+
+      return { total, max }
+    }
+    catch {
+      return { total: 0, max: 0 }
+    }
+  }
+
+  /**
+   * Normalize cognitive complexity to 0-100 scale
+   *
+   * Mapping (aligned with SonarJS thresholds):
+   *   Raw 0-15 (Simple)       -> Normalized 0-25
+   *   Raw 16-30 (Medium)      -> Normalized 25-50
+   *   Raw 31-50 (Complex)     -> Normalized 50-75
+   *   Raw 51+ (Very Complex)  -> Normalized 75-100 (asymptotic)
+   */
+  normalizeComplexity(rawComplexity) {
+    if (rawComplexity <= 15) {
+      // Linear: 0-15 -> 0-25
+      return Math.round((rawComplexity / 15) * 25)
+    }
+    else if (rawComplexity <= 30) {
+      // Linear: 16-30 -> 25-50
+      return Math.round(25 + ((rawComplexity - 15) / 15) * 25)
+    }
+    else if (rawComplexity <= 50) {
+      // Linear: 31-50 -> 50-75
+      return Math.round(50 + ((rawComplexity - 30) / 20) * 25)
+    }
+    else {
+      // Asymptotic: 51+ -> 75-100
+      // Formula ensures score approaches but never exceeds 100
+      return Math.round(75 + 25 * (1 - 1 / (1 + (rawComplexity - 50) / 100)))
+    }
+  }
+
+  /**
+   * Count how many times a component is referenced in the codebase
+   * Scans TypeScript sources for import statements referencing the component
+   */
+  countUsageReferences(filePath, absolutePath) {
+    try {
+      const resolvedComponentPath = absolutePath ?? path.resolve(process.cwd(), filePath)
+      const fileName = path.basename(resolvedComponentPath, path.extname(resolvedComponentPath))
+
+      let searchName = fileName
+      if (fileName === 'index') {
+        const parentDir = path.dirname(resolvedComponentPath)
+        searchName = path.basename(parentDir)
+      }
+
+      if (!searchName)
+        return 0
+
+      const searchRoots = this.collectSearchRoots(resolvedComponentPath)
+      if (searchRoots.length === 0)
+        return 0
+
+      const escapedName = ComponentAnalyzer.escapeRegExp(searchName)
+      const patterns = [
+        new RegExp(`from\\s+['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
+        new RegExp(`import\\s*\\(\\s*['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
+        new RegExp(`export\\s+(?:\\*|{[^}]*})\\s*from\\s+['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
+        new RegExp(`require\\(\\s*['\"][^'\"]*(?:/|^)${escapedName}(?:['\"/]|$)`),
+      ]
+
+      const visited = new Set()
+      let usageCount = 0
+
+      const stack = [...searchRoots]
+      while (stack.length > 0) {
+        const currentDir = stack.pop()
+        if (!currentDir || visited.has(currentDir))
+          continue
+        visited.add(currentDir)
+
+        const entries = fs.readdirSync(currentDir, { withFileTypes: true })
+
+        entries.forEach((entry) => {
+          const entryPath = path.join(currentDir, entry.name)
+
+          if (entry.isDirectory()) {
+            if (this.shouldSkipDir(entry.name))
+              return
+            stack.push(entryPath)
+            return
+          }
+
+          if (!this.shouldInspectFile(entry.name))
+            return
+
+          const normalizedEntryPath = path.resolve(entryPath)
+          if (normalizedEntryPath === path.resolve(resolvedComponentPath))
+            return
+
+          const source = fs.readFileSync(entryPath, 'utf-8')
+          if (!source.includes(searchName))
+            return
+
+          if (patterns.some((pattern) => {
+            pattern.lastIndex = 0
+            return pattern.test(source)
+          })) {
+            usageCount += 1
+          }
+        })
+      }
+
+      return usageCount
+    }
+    catch {
+      // If command fails, return 0
+      return 0
+    }
+  }
+
+  collectSearchRoots(resolvedComponentPath) {
+    const roots = new Set()
+
+    let currentDir = path.dirname(resolvedComponentPath)
+    const workspaceRoot = process.cwd()
+
+    while (currentDir && currentDir !== path.dirname(currentDir)) {
+      if (path.basename(currentDir) === 'app') {
+        roots.add(currentDir)
+        break
+      }
+
+      if (currentDir === workspaceRoot)
+        break
+      currentDir = path.dirname(currentDir)
+    }
+
+    const fallbackRoots = [
+      path.join(workspaceRoot, 'app'),
+      path.join(workspaceRoot, 'web', 'app'),
+      path.join(workspaceRoot, 'src'),
+    ]
+
+    fallbackRoots.forEach((root) => {
+      if (fs.existsSync(root) && fs.statSync(root).isDirectory())
+        roots.add(root)
+    })
+
+    return Array.from(roots)
+  }
+
+  shouldSkipDir(dirName) {
+    const normalized = dirName.toLowerCase()
+    return [
+      'node_modules',
+      '.git',
+      '.next',
+      'dist',
+      'out',
+      'coverage',
+      'build',
+      '__tests__',
+      '__mocks__',
+    ].includes(normalized)
+  }
+
+  shouldInspectFile(fileName) {
+    const normalized = fileName.toLowerCase()
+    if (!(/\.(ts|tsx)$/i.test(fileName)))
+      return false
+    if (normalized.endsWith('.d.ts'))
+      return false
+    if (/\.(spec|test)\.(ts|tsx)$/.test(normalized))
+      return false
+    if (normalized.endsWith('.stories.tsx'))
+      return false
+    return true
+  }
+
+  static escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  }
+
+  /**
+   * Calculate test priority based on cognitive complexity and usage
+   *
+   * Priority Score = 0.7 * Complexity + 0.3 * Usage Score (all normalized to 0-100)
+   * - Complexity Score: 0-100 (normalized from SonarJS)
+   * - Usage Score: 0-100 (based on reference count)
+   *
+   * Priority Levels (0-100):
+   * - 0-25: 🟢 LOW
+   * - 26-50: 🟡 MEDIUM
+   * - 51-75: 🟠 HIGH
+   * - 76-100: 🔴 CRITICAL
+   */
+  calculateTestPriority(complexity, usageCount) {
+    const complexityScore = complexity
+
+    // Normalize usage score to 0-100
+    let usageScore
+    if (usageCount === 0)
+      usageScore = 0
+    else if (usageCount <= 5)
+      usageScore = 20
+    else if (usageCount <= 20)
+      usageScore = 40
+    else if (usageCount <= 50)
+      usageScore = 70
+    else
+      usageScore = 100
+
+    // Weighted average: complexity (70%) + usage (30%)
+    const totalScore = Math.round(0.7 * complexityScore + 0.3 * usageScore)
+
+    return {
+      score: totalScore,
+      level: this.getPriorityLevel(totalScore),
+      usageScore,
+      complexityScore,
+    }
+  }
+
+  /**
+   * Get priority level based on score (0-100 scale)
+   */
+  getPriorityLevel(score) {
+    if (score > 75)
+      return '🔴 CRITICAL'
+    if (score > 50)
+      return '🟠 HIGH'
+    if (score > 25)
+      return '🟡 MEDIUM'
+    return '🟢 LOW'
+  }
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Resolve directory to entry file
+ * Priority: index files > common entry files (node.tsx, panel.tsx, etc.)
+ */
+export function resolveDirectoryEntry(absolutePath, componentPath) {
+  // Entry files in priority order: index files first, then common entry files
+  const entryFiles = [
+    'index.tsx',
+    'index.ts', // Priority 1: index files
+    'node.tsx',
+    'panel.tsx',
+    'component.tsx',
+    'main.tsx',
+    'container.tsx', // Priority 2: common entry files
+  ]
+  for (const entryFile of entryFiles) {
+    const entryPath = path.join(absolutePath, entryFile)
+    if (fs.existsSync(entryPath)) {
+      return {
+        absolutePath: entryPath,
+        componentPath: path.join(componentPath, entryFile),
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * List analyzable files in directory (for user guidance)
+ */
+export function listAnalyzableFiles(dirPath) {
+  try {
+    const entries = fs.readdirSync(dirPath, { withFileTypes: true })
+    return entries
+      .filter(entry => !entry.isDirectory() && /\.(tsx?|jsx?)$/.test(entry.name) && !entry.name.endsWith('.d.ts'))
+      .map(entry => entry.name)
+      .sort((a, b) => {
+        // Prioritize common entry files
+        const priority = ['index.tsx', 'index.ts', 'node.tsx', 'panel.tsx', 'component.tsx', 'main.tsx', 'container.tsx']
+        const aIdx = priority.indexOf(a)
+        const bIdx = priority.indexOf(b)
+        if (aIdx !== -1 && bIdx !== -1)
+          return aIdx - bIdx
+        if (aIdx !== -1)
+          return -1
+        if (bIdx !== -1)
+          return 1
+        return a.localeCompare(b)
+      })
+  }
+  catch {
+    return []
+  }
+}
+
+/**
+ * Extract copy content from prompt (for clipboard)
+ */
+export function extractCopyContent(prompt) {
+  const marker = '📋 PROMPT FOR AI ASSISTANT (COPY THIS TO YOUR AI ASSISTANT):'
+  const markerIndex = prompt.indexOf(marker)
+  if (markerIndex === -1)
+    return ''
+
+  const section = prompt.slice(markerIndex)
+  const lines = section.split('\n')
+  const firstDivider = lines.findIndex(line => line.includes('━━━━━━━━'))
+  if (firstDivider === -1)
+    return ''
+
+  const startIdx = firstDivider + 1
+  let endIdx = lines.length
+
+  for (let i = startIdx; i < lines.length; i++) {
+    if (lines[i].includes('━━━━━━━━')) {
+      endIdx = i
+      break
+    }
+  }
+
+  if (startIdx >= endIdx)
+    return ''
+
+  return lines.slice(startIdx, endIdx).join('\n').trim()
+}
+
+/**
+ * Get complexity level label
+ */
+export function getComplexityLevel(score) {
+  if (score <= 25)
+    return '🟢 Simple'
+  if (score <= 50)
+    return '🟡 Medium'
+  if (score <= 75)
+    return '🟠 Complex'
+  return '🔴 Very Complex'
+}
diff --git a/web/scripts/refactor-component.js b/web/scripts/refactor-component.js
new file mode 100644
index 0000000000..f890540515
--- /dev/null
+++ b/web/scripts/refactor-component.js
@@ -0,0 +1,420 @@
+#!/usr/bin/env node
+
+import { spawnSync } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+import {
+  ComponentAnalyzer,
+  extractCopyContent,
+  getComplexityLevel,
+  listAnalyzableFiles,
+  resolveDirectoryEntry,
+} from './component-analyzer.js'
+
+// ============================================================================
+// Extended Analyzer for Refactoring
+// ============================================================================
+
+class RefactorAnalyzer extends ComponentAnalyzer {
+  analyze(code, filePath, absolutePath) {
+    // Get base analysis from parent class
+    const baseAnalysis = super.analyze(code, filePath, absolutePath)
+
+    // Add refactoring-specific metrics
+    // Note: These counts use regex matching which may include import statements.
+    // For most components this results in +1 over actual usage, which is acceptable
+    // for heuristic analysis. For precise AST-based counting, consider using
+    // @typescript-eslint/parser to traverse the AST.
+    const stateCount = (code.match(/useState\s*[(<]/g) || []).length
+    const effectCount = (code.match(/useEffect\s*\(/g) || []).length
+    const callbackCount = (code.match(/useCallback\s*\(/g) || []).length
+    const memoCount = (code.match(/useMemo\s*\(/g) || []).length
+    const conditionalBlocks = this.countConditionalBlocks(code)
+    const nestedTernaries = this.countNestedTernaries(code)
+    const hasContext = code.includes('useContext') || code.includes('createContext')
+    const hasReducer = code.includes('useReducer')
+    const hasModals = this.countModals(code)
+
+    return {
+      ...baseAnalysis,
+      stateCount,
+      effectCount,
+      callbackCount,
+      memoCount,
+      conditionalBlocks,
+      nestedTernaries,
+      hasContext,
+      hasReducer,
+      hasModals,
+    }
+  }
+
+  countModals(code) {
+    const modalPatterns = [
+      /Modal/g,
+      /Dialog/g,
+      /Drawer/g,
+      /Confirm/g,
+      /showModal|setShowModal|isShown|isShowing/g,
+    ]
+    let count = 0
+    modalPatterns.forEach((pattern) => {
+      const matches = code.match(pattern)
+      if (matches)
+        count += matches.length
+    })
+    return Math.floor(count / 3) // Rough estimate of actual modals
+  }
+
+  countConditionalBlocks(code) {
+    const ifBlocks = (code.match(/\bif\s*\(/g) || []).length
+    const ternaries = (code.match(/\?.*:/g) || []).length
+    const switchCases = (code.match(/\bswitch\s*\(/g) || []).length
+    return ifBlocks + ternaries + switchCases
+  }
+
+  countNestedTernaries(code) {
+    const nestedInTrueBranch = (code.match(/\?[^:?]*\?[^:]*:/g) || []).length
+    const nestedInFalseBranch = (code.match(/\?[^:?]*:[^?]*\?[^:]*:/g) || []).length
+
+    return nestedInTrueBranch + nestedInFalseBranch
+  }
+}
+
+// ============================================================================
+// Refactor Prompt Builder
+// ============================================================================
+
+class RefactorPromptBuilder {
+  build(analysis) {
+    const refactorActions = this.identifyRefactorActions(analysis)
+
+    return `
+╔════════════════════════════════════════════════════════════════════════════╗
+║                 🔧 REFACTOR DIFY COMPONENT                                  ║
+╚════════════════════════════════════════════════════════════════════════════╝
+
+📍 Component: ${analysis.name}
+📂 Path: ${analysis.path}
+
+📊 Complexity Analysis:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Total Complexity:    ${analysis.complexity}/100 ${getComplexityLevel(analysis.complexity)}
+Max Func Complexity: ${analysis.maxComplexity}/100 ${getComplexityLevel(analysis.maxComplexity)}
+Lines:               ${analysis.lineCount} ${analysis.lineCount > 300 ? '⚠️ TOO LARGE' : ''}
+Usage:               ${analysis.usageCount} reference${analysis.usageCount !== 1 ? 's' : ''}
+
+📈 Code Metrics:
+  useState calls:    ${analysis.stateCount}
+  useEffect calls:   ${analysis.effectCount}
+  useCallback calls: ${analysis.callbackCount}
+  useMemo calls:     ${analysis.memoCount}
+  Conditional blocks: ${analysis.conditionalBlocks}
+  Nested ternaries:  ${analysis.nestedTernaries}
+  Modal components:  ${analysis.hasModals}
+
+🔍 Features Detected:
+  ${analysis.hasState ? '✓' : '✗'} Local state (useState/useReducer)
+  ${analysis.hasEffects ? '✓' : '✗'} Side effects (useEffect)
+  ${analysis.hasCallbacks ? '✓' : '✗'} Callbacks (useCallback)
+  ${analysis.hasMemo ? '✓' : '✗'} Memoization (useMemo)
+  ${analysis.hasContext ? '✓' : '✗'} Context (useContext/createContext)
+  ${analysis.hasEvents ? '✓' : '✗'} Event handlers
+  ${analysis.hasRouter ? '✓' : '✗'} Next.js routing
+  ${analysis.hasAPI ? '✓' : '✗'} API calls
+  ${analysis.hasReactQuery ? '✓' : '✗'} React Query
+  ${analysis.hasSWR ? '✓' : '✗'} SWR (should migrate to React Query)
+  ${analysis.hasAhooks ? '✓' : '✗'} ahooks
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+🎯 RECOMMENDED REFACTORING ACTIONS:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+${refactorActions.map((action, i) => `${i + 1}. ${action}`).join('\n')}
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📋 PROMPT FOR AI ASSISTANT (COPY THIS TO YOUR AI ASSISTANT):
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Please refactor the component at @${analysis.path}
+
+Component metrics:
+- Complexity: ${analysis.complexity}/100 (target: < 50)
+- Lines: ${analysis.lineCount} (target: < 300)
+- useState: ${analysis.stateCount}, useEffect: ${analysis.effectCount}
+
+Refactoring tasks:
+${refactorActions.map(action => `- ${action}`).join('\n')}
+
+Requirements:
+${this.buildRequirements(analysis)}
+
+Follow Dify project conventions:
+- Place extracted hooks in \`hooks/\` subdirectory or as \`use-<feature>.ts\`
+- Use React Query (\`@tanstack/react-query\`) for data fetching, not SWR
+- Follow existing patterns in \`web/service/use-*.ts\` for API hooks
+- Keep each new file under 300 lines
+- Maintain TypeScript strict typing
+
+After refactoring, verify:
+- \`pnpm lint:fix\` passes
+- \`pnpm type-check:tsgo\` passes
+- Re-run \`pnpm refactor-component ${analysis.path}\` to confirm complexity < 50
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+`
+  }
+
+  identifyRefactorActions(analysis) {
+    const actions = []
+
+    // Priority 1: Extract hooks for complex state management
+    if (analysis.stateCount >= 3 || (analysis.stateCount >= 2 && analysis.effectCount >= 2)) {
+      actions.push(`🪝 EXTRACT CUSTOM HOOK: ${analysis.stateCount} useState + ${analysis.effectCount} useEffect detected. Extract related state and effects into a custom hook (e.g., \`use${analysis.name}State.ts\`)`)
+    }
+
+    // Priority 2: Extract API/data logic
+    if (analysis.hasAPI && (analysis.hasEffects || analysis.hasSWR)) {
+      if (analysis.hasSWR) {
+        actions.push('🔄 MIGRATE SWR TO REACT QUERY: Replace useSWR with useQuery from @tanstack/react-query')
+      }
+      actions.push('🌐 EXTRACT DATA HOOK: Move API calls and data fetching logic into a dedicated hook using React Query')
+    }
+
+    // Priority 3: Split large components
+    if (analysis.lineCount > 300) {
+      actions.push(`📦 SPLIT COMPONENT: ${analysis.lineCount} lines exceeds limit. Extract UI sections into sub-components`)
+    }
+
+    // Priority 4: Extract modal management
+    if (analysis.hasModals >= 2) {
+      actions.push(`🔲 EXTRACT MODAL MANAGEMENT: ${analysis.hasModals} modal-related patterns detected. Create a useModalState hook or separate modal components`)
+    }
+
+    // Priority 5: Simplify conditionals
+    if (analysis.conditionalBlocks > 10 || analysis.nestedTernaries >= 2) {
+      actions.push('🔀 SIMPLIFY CONDITIONALS: Use lookup tables, early returns, or extract complex conditions into named functions')
+    }
+
+    // Priority 6: Extract callbacks
+    if (analysis.callbackCount >= 4) {
+      actions.push(`⚡ CONSOLIDATE CALLBACKS: ${analysis.callbackCount} useCallback calls. Consider extracting related callbacks into a custom hook`)
+    }
+
+    // Priority 7: Context provider extraction
+    if (analysis.hasContext && analysis.complexity > 50) {
+      actions.push('🎯 EXTRACT CONTEXT LOGIC: Move context provider logic into separate files or split into domain-specific contexts')
+    }
+
+    // Priority 8: Memoization review
+    if (analysis.memoCount >= 3 && analysis.complexity > 50) {
+      actions.push(`📝 REVIEW MEMOIZATION: ${analysis.memoCount} useMemo calls. Extract complex computations into utility functions or hooks`)
+    }
+
+    // If no specific issues, provide general guidance
+    if (actions.length === 0) {
+      if (analysis.complexity > 50) {
+        actions.push('🔍 ANALYZE FUNCTIONS: Review individual functions for complexity and extract helper functions')
+      }
+      else {
+        actions.push('✅ Component complexity is acceptable. Consider minor improvements for maintainability')
+      }
+    }
+
+    return actions
+  }
+
+  buildRequirements(analysis) {
+    const requirements = []
+
+    if (analysis.stateCount >= 3) {
+      requirements.push('- Group related useState calls into a single custom hook')
+      requirements.push('- Move associated useEffect calls with the state they depend on')
+    }
+
+    if (analysis.hasAPI) {
+      requirements.push('- Create data fetching hook following web/service/use-*.ts patterns')
+      requirements.push('- Use useQuery with proper queryKey and enabled options')
+      requirements.push('- Export invalidation hook (useInvalidXxx) for cache management')
+    }
+
+    if (analysis.lineCount > 300) {
+      requirements.push('- Extract logical UI sections into separate components')
+      requirements.push('- Keep parent component focused on orchestration')
+      requirements.push('- Pass minimal props to child components')
+    }
+
+    if (analysis.hasModals >= 2) {
+      requirements.push('- Create unified modal state management')
+      requirements.push('- Consider extracting modals to separate file')
+    }
+
+    if (analysis.conditionalBlocks > 10) {
+      requirements.push('- Replace switch statements with lookup tables')
+      requirements.push('- Use early returns to reduce nesting')
+      requirements.push('- Extract complex boolean logic to named functions')
+    }
+
+    if (requirements.length === 0) {
+      requirements.push('- Maintain existing code structure')
+      requirements.push('- Focus on readability improvements')
+    }
+
+    return requirements.join('\n')
+  }
+}
+
+// ============================================================================
+// Main Function
+// ============================================================================
+
+function showHelp() {
+  console.log(`
+🔧 Component Refactor Tool - Generate refactoring prompts for AI assistants
+
+Usage:
+  node refactor-component.js <component-path> [options]
+  pnpm refactor-component <component-path> [options]
+
+Options:
+  --help      Show this help message
+  --json      Output analysis result as JSON (for programmatic use)
+
+Examples:
+  # Analyze and generate refactoring prompt
+  pnpm refactor-component app/components/app/configuration/index.tsx
+
+  # Output as JSON
+  pnpm refactor-component app/components/tools/mcp/modal.tsx --json
+
+Complexity Thresholds:
+  🟢 0-25:   Simple (no refactoring needed)
+  🟡 26-50:  Medium (consider minor refactoring)
+  🟠 51-75:  Complex (should refactor)
+  🔴 76-100: Very Complex (must refactor)
+
+For complete refactoring guidelines, see:
+  .claude/skills/component-refactoring/SKILL.md
+`)
+}
+
+function main() {
+  const rawArgs = process.argv.slice(2)
+
+  let isJsonMode = false
+  const args = []
+
+  rawArgs.forEach((arg) => {
+    if (arg === '--json') {
+      isJsonMode = true
+      return
+    }
+    if (arg === '--help' || arg === '-h') {
+      showHelp()
+      process.exit(0)
+    }
+    args.push(arg)
+  })
+
+  if (args.length === 0) {
+    showHelp()
+    process.exit(1)
+  }
+
+  let componentPath = args[0]
+  let absolutePath = path.resolve(process.cwd(), componentPath)
+
+  if (!fs.existsSync(absolutePath)) {
+    console.error(`❌ Error: Path not found: ${componentPath}`)
+    process.exit(1)
+  }
+
+  if (fs.statSync(absolutePath).isDirectory()) {
+    const resolvedFile = resolveDirectoryEntry(absolutePath, componentPath)
+    if (resolvedFile) {
+      absolutePath = resolvedFile.absolutePath
+      componentPath = resolvedFile.componentPath
+    }
+    else {
+      const availableFiles = listAnalyzableFiles(absolutePath)
+      console.error(`❌ Error: Directory does not contain a recognizable entry file: ${componentPath}`)
+      if (availableFiles.length > 0) {
+        console.error(`\n   Available files to analyze:`)
+        availableFiles.forEach(f => console.error(`   - ${path.join(componentPath, f)}`))
+        console.error(`\n   Please specify the exact file path, e.g.:`)
+        console.error(`   pnpm refactor-component ${path.join(componentPath, availableFiles[0])}`)
+      }
+      process.exit(1)
+    }
+  }
+
+  const sourceCode = fs.readFileSync(absolutePath, 'utf-8')
+
+  const analyzer = new RefactorAnalyzer()
+  const analysis = analyzer.analyze(sourceCode, componentPath, absolutePath)
+
+  // JSON output mode
+  if (isJsonMode) {
+    console.log(JSON.stringify(analysis, null, 2))
+    return
+  }
+
+  // Check if refactoring is needed
+  if (analysis.complexity <= 25 && analysis.lineCount <= 200) {
+    console.log(`
+╔════════════════════════════════════════════════════════════════════════════╗
+║                 ✅ COMPONENT IS WELL-STRUCTURED                             ║
+╚════════════════════════════════════════════════════════════════════════════╝
+
+📍 Component: ${analysis.name}
+📂 Path: ${analysis.path}
+
+📊 Metrics:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Complexity: ${analysis.complexity}/100 🟢 Simple
+Lines: ${analysis.lineCount} ✓ Within limits
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+This component has good structure. No immediate refactoring needed.
+You can proceed with testing using: pnpm analyze-component ${componentPath}
+`)
+    return
+  }
+
+  // Build refactoring prompt
+  const builder = new RefactorPromptBuilder()
+  const prompt = builder.build(analysis)
+
+  console.log(prompt)
+
+  // Copy to clipboard (macOS)
+  try {
+    const checkPbcopy = spawnSync('which', ['pbcopy'], { stdio: 'pipe' })
+    if (checkPbcopy.status !== 0)
+      return
+    const copyContent = extractCopyContent(prompt)
+    if (!copyContent)
+      return
+
+    const result = spawnSync('pbcopy', [], {
+      input: copyContent,
+      encoding: 'utf-8',
+    })
+
+    if (result.status === 0) {
+      console.log('\n📋 Refactoring prompt copied to clipboard!')
+      console.log('   Paste it in your AI assistant:')
+      console.log('   - Cursor: Cmd+L (Chat) or Cmd+I (Composer)')
+      console.log('   - GitHub Copilot Chat: Cmd+I')
+      console.log('   - Or any other AI coding tool\n')
+    }
+  }
+  catch {
+    // pbcopy failed, but don't break the script
+  }
+}
+
+// ============================================================================
+// Run
+// ============================================================================
+
+main()
diff --git a/web/service/explore.ts b/web/service/explore.ts
index 70d5de37f2..b4056da4ab 100644
--- a/web/service/explore.ts
+++ b/web/service/explore.ts
@@ -1,6 +1,6 @@
 import type { AccessMode } from '@/models/access-control'
 import type { App, AppCategory } from '@/models/explore'
-import { del, get, patch, post } from './base'
+import { del, get, patch } from './base'
 
 export const fetchAppList = () => {
   return get<{
@@ -17,14 +17,6 @@ export const fetchInstalledAppList = (app_id?: string | null) => {
   return get(`/installed-apps${app_id ? `?app_id=${app_id}` : ''}`)
 }
 
-export const installApp = (id: string) => {
-  return post('/installed-apps', {
-    body: {
-      app_id: id,
-    },
-  })
-}
-
 export const uninstallApp = (id: string) => {
   return del(`/installed-apps/${id}`)
 }
@@ -37,10 +29,6 @@ export const updatePinStatus = (id: string, isPinned: boolean) => {
   })
 }
 
-export const getToolProviders = () => {
-  return get('/workspaces/current/tool-providers')
-}
-
 export const getAppAccessModeByAppId = (appId: string) => {
   return get<{ accessMode: AccessMode }>(`/enterprise/webapp/app/access-mode?appId=${appId}`)
 }
diff --git a/web/service/knowledge/use-create-dataset.ts b/web/service/knowledge/use-create-dataset.ts
index eb656c2994..a0d55eeb99 100644
--- a/web/service/knowledge/use-create-dataset.ts
+++ b/web/service/knowledge/use-create-dataset.ts
@@ -18,7 +18,7 @@ import type {
   ProcessRuleResponse,
 } from '@/models/datasets'
 import { useMutation } from '@tanstack/react-query'
-import groupBy from 'lodash-es/groupBy'
+import { groupBy } from 'es-toolkit/compat'
 import { post } from '../base'
 import { createDocument, createFirstDocument, fetchDefaultProcessRule, fetchFileIndexingEstimate } from '../datasets'
 
diff --git a/web/service/log.ts b/web/service/log.ts
index aa0be7ac3b..a540cea22c 100644
--- a/web/service/log.ts
+++ b/web/service/log.ts
@@ -1,80 +1,38 @@
-import type { Fetcher } from 'swr'
 import type {
   AgentLogDetailRequest,
   AgentLogDetailResponse,
-  AnnotationsCountResponse,
-  ChatConversationFullDetailResponse,
-  ChatConversationsRequest,
-  ChatConversationsResponse,
   ChatMessagesRequest,
   ChatMessagesResponse,
-  CompletionConversationFullDetailResponse,
-  CompletionConversationsRequest,
-  CompletionConversationsResponse,
-  ConversationListResponse,
   LogMessageAnnotationsRequest,
   LogMessageAnnotationsResponse,
   LogMessageFeedbacksRequest,
   LogMessageFeedbacksResponse,
-  WorkflowLogsResponse,
   WorkflowRunDetailResponse,
 } from '@/models/log'
 import type { NodeTracingListResponse } from '@/types/workflow'
 import { get, post } from './base'
 
-export const fetchConversationList: Fetcher<ConversationListResponse, { name: string, appId: string, params?: Record<string, any> }> = ({ appId, params }) => {
-  return get<ConversationListResponse>(`/console/api/apps/${appId}/messages`, params)
-}
-
-// (Text Generation Application) Session List
-export const fetchCompletionConversations: Fetcher<CompletionConversationsResponse, { url: string, params?: CompletionConversationsRequest }> = ({ url, params }) => {
-  return get<CompletionConversationsResponse>(url, { params })
-}
-
-// (Text Generation Application) Session Detail
-export const fetchCompletionConversationDetail: Fetcher<CompletionConversationFullDetailResponse, { url: string }> = ({ url }) => {
-  return get<CompletionConversationFullDetailResponse>(url, {})
-}
-
-// (Chat Application) Session List
-export const fetchChatConversations: Fetcher<ChatConversationsResponse, { url: string, params?: ChatConversationsRequest }> = ({ url, params }) => {
-  return get<ChatConversationsResponse>(url, { params })
-}
-
-// (Chat Application) Session Detail
-export const fetchChatConversationDetail: Fetcher<ChatConversationFullDetailResponse, { url: string }> = ({ url }) => {
-  return get<ChatConversationFullDetailResponse>(url, {})
-}
-
 // (Chat Application) Message list in one session
-export const fetchChatMessages: Fetcher<ChatMessagesResponse, { url: string, params: ChatMessagesRequest }> = ({ url, params }) => {
+export const fetchChatMessages = ({ url, params }: { url: string, params: ChatMessagesRequest }): Promise<ChatMessagesResponse> => {
   return get<ChatMessagesResponse>(url, { params })
 }
 
-export const updateLogMessageFeedbacks: Fetcher<LogMessageFeedbacksResponse, { url: string, body: LogMessageFeedbacksRequest }> = ({ url, body }) => {
+export const updateLogMessageFeedbacks = ({ url, body }: { url: string, body: LogMessageFeedbacksRequest }): Promise<LogMessageFeedbacksResponse> => {
   return post<LogMessageFeedbacksResponse>(url, { body })
 }
 
-export const updateLogMessageAnnotations: Fetcher<LogMessageAnnotationsResponse, { url: string, body: LogMessageAnnotationsRequest }> = ({ url, body }) => {
+export const updateLogMessageAnnotations = ({ url, body }: { url: string, body: LogMessageAnnotationsRequest }): Promise<LogMessageAnnotationsResponse> => {
   return post<LogMessageAnnotationsResponse>(url, { body })
 }
 
-export const fetchAnnotationsCount: Fetcher<AnnotationsCountResponse, { url: string }> = ({ url }) => {
-  return get<AnnotationsCountResponse>(url)
-}
-
-export const fetchWorkflowLogs: Fetcher<WorkflowLogsResponse, { url: string, params: Record<string, any> }> = ({ url, params }) => {
-  return get<WorkflowLogsResponse>(url, { params })
-}
-
-export const fetchRunDetail = (url: string) => {
+export const fetchRunDetail = (url: string): Promise<WorkflowRunDetailResponse> => {
   return get<WorkflowRunDetailResponse>(url)
 }
 
-export const fetchTracingList: Fetcher<NodeTracingListResponse, { url: string }> = ({ url }) => {
+export const fetchTracingList = ({ url }: { url: string }): Promise<NodeTracingListResponse> => {
   return get<NodeTracingListResponse>(url)
 }
 
-export const fetchAgentLogDetail = ({ appID, params }: { appID: string, params: AgentLogDetailRequest }) => {
+export const fetchAgentLogDetail = ({ appID, params }: { appID: string, params: AgentLogDetailRequest }): Promise<AgentLogDetailResponse> => {
   return get<AgentLogDetailResponse>(`/apps/${appID}/agent/logs`, { params })
 }
diff --git a/web/service/use-explore.ts b/web/service/use-explore.ts
index 6e57599b69..68ddf966ab 100644
--- a/web/service/use-explore.ts
+++ b/web/service/use-explore.ts
@@ -1,11 +1,30 @@
+import type { App, AppCategory } from '@/models/explore'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode } from '@/models/access-control'
-import { fetchInstalledAppList, getAppAccessModeByAppId, uninstallApp, updatePinStatus } from './explore'
+import { fetchAppList, fetchInstalledAppList, getAppAccessModeByAppId, uninstallApp, updatePinStatus } from './explore'
 import { fetchAppMeta, fetchAppParams } from './share'
 
 const NAME_SPACE = 'explore'
 
+type ExploreAppListData = {
+  categories: AppCategory[]
+  allList: App[]
+}
+
+export const useExploreAppList = () => {
+  return useQuery<ExploreAppListData>({
+    queryKey: [NAME_SPACE, 'appList'],
+    queryFn: async () => {
+      const { categories, recommended_apps } = await fetchAppList()
+      return {
+        categories,
+        allList: [...recommended_apps].sort((a, b) => a.position - b.position),
+      }
+    },
+  })
+}
+
 export const useGetInstalledApps = () => {
   return useQuery({
     queryKey: [NAME_SPACE, 'installedApps'],
diff --git a/web/service/use-flow.ts b/web/service/use-flow.ts
index 30bec6dd23..74aa78ec10 100644
--- a/web/service/use-flow.ts
+++ b/web/service/use-flow.ts
@@ -1,5 +1,5 @@
 import type { FlowType } from '@/types/common'
-import { curry } from 'lodash-es'
+import { curry } from 'es-toolkit/compat'
 import {
   useDeleteAllInspectorVars as useDeleteAllInspectorVarsInner,
   useDeleteInspectVar as useDeleteInspectVarInner,
diff --git a/web/service/use-log.ts b/web/service/use-log.ts
new file mode 100644
index 0000000000..b120adda2f
--- /dev/null
+++ b/web/service/use-log.ts
@@ -0,0 +1,89 @@
+import type {
+  AnnotationsCountResponse,
+  ChatConversationFullDetailResponse,
+  ChatConversationsRequest,
+  ChatConversationsResponse,
+  CompletionConversationFullDetailResponse,
+  CompletionConversationsRequest,
+  CompletionConversationsResponse,
+  WorkflowLogsResponse,
+} from '@/models/log'
+import { useQuery } from '@tanstack/react-query'
+import { get } from './base'
+
+const NAME_SPACE = 'log'
+
+// ============ Annotations Count ============
+
+export const useAnnotationsCount = (appId: string) => {
+  return useQuery<AnnotationsCountResponse>({
+    queryKey: [NAME_SPACE, 'annotations-count', appId],
+    queryFn: () => get<AnnotationsCountResponse>(`/apps/${appId}/annotations/count`),
+    enabled: !!appId,
+  })
+}
+
+// ============ Chat Conversations ============
+
+type ChatConversationsParams = {
+  appId: string
+  params?: Partial<ChatConversationsRequest>
+}
+
+export const useChatConversations = ({ appId, params }: ChatConversationsParams) => {
+  return useQuery<ChatConversationsResponse>({
+    queryKey: [NAME_SPACE, 'chat-conversations', appId, params],
+    queryFn: () => get<ChatConversationsResponse>(`/apps/${appId}/chat-conversations`, { params }),
+    enabled: !!appId,
+  })
+}
+
+// ============ Completion Conversations ============
+
+type CompletionConversationsParams = {
+  appId: string
+  params?: Partial<CompletionConversationsRequest>
+}
+
+export const useCompletionConversations = ({ appId, params }: CompletionConversationsParams) => {
+  return useQuery<CompletionConversationsResponse>({
+    queryKey: [NAME_SPACE, 'completion-conversations', appId, params],
+    queryFn: () => get<CompletionConversationsResponse>(`/apps/${appId}/completion-conversations`, { params }),
+    enabled: !!appId,
+  })
+}
+
+// ============ Chat Conversation Detail ============
+
+export const useChatConversationDetail = (appId?: string, conversationId?: string) => {
+  return useQuery<ChatConversationFullDetailResponse>({
+    queryKey: [NAME_SPACE, 'chat-conversation-detail', appId, conversationId],
+    queryFn: () => get<ChatConversationFullDetailResponse>(`/apps/${appId}/chat-conversations/${conversationId}`),
+    enabled: !!appId && !!conversationId,
+  })
+}
+
+// ============ Completion Conversation Detail ============
+
+export const useCompletionConversationDetail = (appId?: string, conversationId?: string) => {
+  return useQuery<CompletionConversationFullDetailResponse>({
+    queryKey: [NAME_SPACE, 'completion-conversation-detail', appId, conversationId],
+    queryFn: () => get<CompletionConversationFullDetailResponse>(`/apps/${appId}/completion-conversations/${conversationId}`),
+    enabled: !!appId && !!conversationId,
+  })
+}
+
+// ============ Workflow Logs ============
+
+type WorkflowLogsParams = {
+  appId: string
+  params?: Record<string, string | number | boolean | undefined>
+}
+
+export const useWorkflowLogs = ({ appId, params }: WorkflowLogsParams) => {
+  return useQuery<WorkflowLogsResponse>({
+    queryKey: [NAME_SPACE, 'workflow-logs', appId, params],
+    queryFn: () => get<WorkflowLogsResponse>(`/apps/${appId}/workflow-app-logs`, { params }),
+    enabled: !!appId,
+  })
+}
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 58454125ed..32ea4f35fd 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -33,7 +33,7 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import { useCallback, useEffect, useState } from 'react'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
 import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
diff --git a/web/service/use-triggers.ts b/web/service/use-triggers.ts
index c21d1aa979..24717cc50b 100644
--- a/web/service/use-triggers.ts
+++ b/web/service/use-triggers.ts
@@ -1,3 +1,4 @@
+import type { FormOption } from '@/app/components/base/form/types'
 import type {
   TriggerLogEntity,
   TriggerOAuthClientParams,
@@ -149,9 +150,9 @@ export const useUpdateTriggerSubscriptionBuilder = () => {
       provider: string
       subscriptionBuilderId: string
       name?: string
-      properties?: Record<string, any>
-      parameters?: Record<string, any>
-      credentials?: Record<string, any>
+      properties?: Record<string, unknown>
+      parameters?: Record<string, unknown>
+      credentials?: Record<string, unknown>
     }) => {
       const { provider, subscriptionBuilderId, ...body } = payload
       return post<TriggerSubscriptionBuilder>(
@@ -162,17 +163,35 @@ export const useUpdateTriggerSubscriptionBuilder = () => {
   })
 }
 
-export const useVerifyTriggerSubscriptionBuilder = () => {
+export const useVerifyAndUpdateTriggerSubscriptionBuilder = () => {
   return useMutation({
-    mutationKey: [NAME_SPACE, 'verify-subscription-builder'],
+    mutationKey: [NAME_SPACE, 'verify-and-update-subscription-builder'],
     mutationFn: (payload: {
       provider: string
       subscriptionBuilderId: string
-      credentials?: Record<string, any>
+      credentials?: Record<string, unknown>
     }) => {
       const { provider, subscriptionBuilderId, ...body } = payload
       return post<{ verified: boolean }>(
-        `/workspaces/current/trigger-provider/${provider}/subscriptions/builder/verify/${subscriptionBuilderId}`,
+        `/workspaces/current/trigger-provider/${provider}/subscriptions/builder/verify-and-update/${subscriptionBuilderId}`,
+        { body },
+        { silent: true },
+      )
+    },
+  })
+}
+
+export const useVerifyTriggerSubscription = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'verify-subscription'],
+    mutationFn: (payload: {
+      provider: string
+      subscriptionId: string
+      credentials?: Record<string, unknown>
+    }) => {
+      const { provider, subscriptionId, ...body } = payload
+      return post<{ verified: boolean }>(
+        `/workspaces/current/trigger-provider/${provider}/subscriptions/verify/${subscriptionId}`,
         { body },
         { silent: true },
       )
@@ -184,7 +203,7 @@ export type BuildTriggerSubscriptionPayload = {
   provider: string
   subscriptionBuilderId: string
   name?: string
-  parameters?: Record<string, any>
+  parameters?: Record<string, unknown>
 }
 
 export const useBuildTriggerSubscription = () => {
@@ -211,6 +230,27 @@ export const useDeleteTriggerSubscription = () => {
   })
 }
 
+export type UpdateTriggerSubscriptionPayload = {
+  subscriptionId: string
+  name?: string
+  properties?: Record<string, unknown>
+  parameters?: Record<string, unknown>
+  credentials?: Record<string, unknown>
+}
+
+export const useUpdateTriggerSubscription = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'update-subscription'],
+    mutationFn: (payload: UpdateTriggerSubscriptionPayload) => {
+      const { subscriptionId, ...body } = payload
+      return post<{ result: string, id: string }>(
+        `/workspaces/current/trigger-provider/${subscriptionId}/subscriptions/update`,
+        { body },
+      )
+    },
+  })
+}
+
 export const useTriggerSubscriptionBuilderLogs = (
   provider: string,
   subscriptionBuilderId: string,
@@ -290,22 +330,49 @@ export const useTriggerPluginDynamicOptions = (payload: {
   action: string
   parameter: string
   credential_id: string
-  extra?: Record<string, any>
+  credentials?: Record<string, unknown>
+  extra?: Record<string, unknown>
 }, enabled = true) => {
-  return useQuery<{ options: Array<{ value: string, label: any }> }>({
-    queryKey: [NAME_SPACE, 'dynamic-options', payload.plugin_id, payload.provider, payload.action, payload.parameter, payload.credential_id, payload.extra],
-    queryFn: () => get<{ options: Array<{ value: string, label: any }> }>(
-      '/workspaces/current/plugin/parameters/dynamic-options',
-      {
-        params: {
-          ...payload,
-          provider_type: 'trigger', // Add required provider_type parameter
+  return useQuery<{ options: FormOption[] }>({
+    queryKey: [NAME_SPACE, 'dynamic-options', payload.plugin_id, payload.provider, payload.action, payload.parameter, payload.credential_id, payload.credentials, payload.extra],
+    queryFn: () => {
+      // Use new endpoint with POST when credentials provided (for edit mode)
+      if (payload.credentials) {
+        return post<{ options: FormOption[] }>(
+          '/workspaces/current/plugin/parameters/dynamic-options-with-credentials',
+          {
+            body: {
+              plugin_id: payload.plugin_id,
+              provider: payload.provider,
+              action: payload.action,
+              parameter: payload.parameter,
+              credential_id: payload.credential_id,
+              credentials: payload.credentials,
+            },
+          },
+          { silent: true },
+        )
+      }
+      // Use original GET endpoint for normal cases
+      return get<{ options: FormOption[] }>(
+        '/workspaces/current/plugin/parameters/dynamic-options',
+        {
+          params: {
+            plugin_id: payload.plugin_id,
+            provider: payload.provider,
+            action: payload.action,
+            parameter: payload.parameter,
+            credential_id: payload.credential_id,
+            provider_type: 'trigger',
+          },
         },
-      },
-      { silent: true },
-    ),
+        { silent: true },
+      )
+    },
     enabled: enabled && !!payload.plugin_id && !!payload.provider && !!payload.action && !!payload.parameter && !!payload.credential_id,
     retry: 0,
+    staleTime: 0,
+    gcTime: 0,
   })
 }
 
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index f5c3021c92..754fb6b003 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -9,6 +9,7 @@ import type {
   UpdateWorkflowParams,
   VarInInspect,
   WorkflowConfigResponse,
+  WorkflowRunHistoryResponse,
 } from '@/types/workflow'
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { del, get, patch, post, put } from './base'
@@ -25,6 +26,14 @@ export const useAppWorkflow = (appID: string) => {
   })
 }
 
+export const useWorkflowRunHistory = (url?: string, enabled = true) => {
+  return useQuery<WorkflowRunHistoryResponse>({
+    queryKey: [NAME_SPACE, 'runHistory', url],
+    queryFn: () => get<WorkflowRunHistoryResponse>(url as string),
+    enabled: !!url && enabled,
+  })
+}
+
 export const useInvalidateAppWorkflow = () => {
   const queryClient = useQueryClient()
   return (appID: string) => {
diff --git a/web/service/workflow.ts b/web/service/workflow.ts
index 96af869ba5..7571e804a9 100644
--- a/web/service/workflow.ts
+++ b/web/service/workflow.ts
@@ -1,14 +1,11 @@
-import type { Fetcher } from 'swr'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import type { CommonResponse } from '@/models/common'
 import type { FlowType } from '@/types/common'
 import type {
-  ChatRunHistoryResponse,
   ConversationVariableResponse,
   FetchWorkflowDraftResponse,
   NodesDefaultConfigsResponse,
   VarInInspect,
-  WorkflowRunHistoryResponse,
 } from '@/types/workflow'
 import { get, post } from './base'
 import { getFlowPrefix } from './utils'
@@ -24,18 +21,10 @@ export const syncWorkflowDraft = ({ url, params }: {
   return post<CommonResponse & { updated_at: number, hash: string }>(url, { body: params }, { silent: true })
 }
 
-export const fetchNodesDefaultConfigs: Fetcher<NodesDefaultConfigsResponse, string> = (url) => {
+export const fetchNodesDefaultConfigs = (url: string) => {
   return get<NodesDefaultConfigsResponse>(url)
 }
 
-export const fetchWorkflowRunHistory: Fetcher<WorkflowRunHistoryResponse, string> = (url) => {
-  return get<WorkflowRunHistoryResponse>(url)
-}
-
-export const fetchChatRunHistory: Fetcher<ChatRunHistoryResponse, string> = (url) => {
-  return get<ChatRunHistoryResponse>(url)
-}
-
 export const singleNodeRun = (flowType: FlowType, flowId: string, nodeId: string, params: object) => {
   return post(`${getFlowPrefix(flowType)}/${flowId}/workflows/draft/nodes/${nodeId}/run`, { body: params })
 }
@@ -48,7 +37,7 @@ export const getLoopSingleNodeRunUrl = (flowType: FlowType, isChatFlow: boolean,
   return `${getFlowPrefix(flowType)}/${flowId}/${isChatFlow ? 'advanced-chat/' : ''}workflows/draft/loop/nodes/${nodeId}/run`
 }
 
-export const fetchPublishedWorkflow: Fetcher<FetchWorkflowDraftResponse, string> = (url) => {
+export const fetchPublishedWorkflow = (url: string) => {
   return get<FetchWorkflowDraftResponse>(url)
 }
 
@@ -68,15 +57,13 @@ export const fetchPipelineNodeDefault = (pipelineId: string, blockType: BlockEnu
   })
 }
 
-// TODO: archived
-export const updateWorkflowDraftFromDSL = (appId: string, data: string) => {
-  return post<FetchWorkflowDraftResponse>(`apps/${appId}/workflows/draft/import`, { body: { data } })
-}
-
-export const fetchCurrentValueOfConversationVariable: Fetcher<ConversationVariableResponse, {
+export const fetchCurrentValueOfConversationVariable = ({
+  url,
+  params,
+}: {
   url: string
   params: { conversation_id: string }
-}> = ({ url, params }) => {
+}) => {
   return get<ConversationVariableResponse>(url, { params })
 }
 
diff --git a/web/testing/testing.md b/web/testing/testing.md
index a2c8399d45..1d578ae634 100644
--- a/web/testing/testing.md
+++ b/web/testing/testing.md
@@ -21,10 +21,10 @@ pnpm test
 pnpm test:watch
 
 # Generate coverage report
-pnpm test -- --coverage
+pnpm test:coverage
 
 # Run specific file
-pnpm test -- path/to/file.spec.tsx
+pnpm test path/to/file.spec.tsx
 ```
 
 ## Project Test Setup
@@ -33,7 +33,7 @@ pnpm test -- path/to/file.spec.tsx
 - **Global setup**: `vitest.setup.ts` already imports `@testing-library/jest-dom`, runs `cleanup()` after every test, and defines shared mocks (for example `react-i18next`, `next/image`). Add any environment-level mocks (for example `ResizeObserver`, `matchMedia`, `IntersectionObserver`, `TextEncoder`, `crypto`) here so they are shared consistently.
 - **Reusable mocks**: Place shared mock factories inside `web/__mocks__/` and use `vi.mock('module-name')` to point to them rather than redefining mocks in every spec.
 - **Mocking behavior**: Modules are not mocked automatically. Use `vi.mock(...)` in tests, or place global mocks in `vitest.setup.ts`.
-- **Script utilities**: `web/testing/analyze-component.js` analyzes component complexity and generates test prompts for AI assistants. Commands:
+- **Script utilities**: `web/scripts/analyze-component.js` analyzes component complexity and generates test prompts for AI assistants. Commands:
   - `pnpm analyze-component <path>` - Analyze and generate test prompt
   - `pnpm analyze-component <path> --json` - Output analysis as JSON
   - `pnpm analyze-component <path> --review` - Generate test review prompt
diff --git a/web/types/feature.ts b/web/types/feature.ts
index 4f8d92a774..bd331d4508 100644
--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@@ -131,4 +131,5 @@ export enum DatasetAttr {
   NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL = 'next-public-zendesk-field-id-email',
   NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID = 'next-public-zendesk-field-id-workspace-id',
   NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN = 'next-public-zendesk-field-id-plan',
+  DATA_PUBLIC_BATCH_CONCURRENCY = 'data-public-batch-concurrency',
 }
diff --git a/web/types/i18n.d.ts b/web/types/i18n.d.ts
index b5e5b39aa7..3e5b10674a 100644
--- a/web/types/i18n.d.ts
+++ b/web/types/i18n.d.ts
@@ -1,74 +1,8 @@
-// TypeScript type definitions for Dify's i18next configuration
-// This file is auto-generated. Do not edit manually.
-// To regenerate, run: pnpm run gen:i18n-types
+import type { messagesEN } from '../i18n-config/i18next-config'
 import 'react-i18next'
 
-// Extract types from translation files using typeof import pattern
-
-type AppAnnotationMessages = typeof import('../i18n/en-US/app-annotation').default
-type AppApiMessages = typeof import('../i18n/en-US/app-api').default
-type AppDebugMessages = typeof import('../i18n/en-US/app-debug').default
-type AppLogMessages = typeof import('../i18n/en-US/app-log').default
-type AppOverviewMessages = typeof import('../i18n/en-US/app-overview').default
-type AppMessages = typeof import('../i18n/en-US/app').default
-type BillingMessages = typeof import('../i18n/en-US/billing').default
-type CommonMessages = typeof import('../i18n/en-US/common').default
-type CustomMessages = typeof import('../i18n/en-US/custom').default
-type DatasetCreationMessages = typeof import('../i18n/en-US/dataset-creation').default
-type DatasetDocumentsMessages = typeof import('../i18n/en-US/dataset-documents').default
-type DatasetHitTestingMessages = typeof import('../i18n/en-US/dataset-hit-testing').default
-type DatasetPipelineMessages = typeof import('../i18n/en-US/dataset-pipeline').default
-type DatasetSettingsMessages = typeof import('../i18n/en-US/dataset-settings').default
-type DatasetMessages = typeof import('../i18n/en-US/dataset').default
-type EducationMessages = typeof import('../i18n/en-US/education').default
-type ExploreMessages = typeof import('../i18n/en-US/explore').default
-type LayoutMessages = typeof import('../i18n/en-US/layout').default
-type LoginMessages = typeof import('../i18n/en-US/login').default
-type OauthMessages = typeof import('../i18n/en-US/oauth').default
-type PipelineMessages = typeof import('../i18n/en-US/pipeline').default
-type PluginTagsMessages = typeof import('../i18n/en-US/plugin-tags').default
-type PluginTriggerMessages = typeof import('../i18n/en-US/plugin-trigger').default
-type PluginMessages = typeof import('../i18n/en-US/plugin').default
-type RegisterMessages = typeof import('../i18n/en-US/register').default
-type RunLogMessages = typeof import('../i18n/en-US/run-log').default
-type ShareMessages = typeof import('../i18n/en-US/share').default
-type TimeMessages = typeof import('../i18n/en-US/time').default
-type ToolsMessages = typeof import('../i18n/en-US/tools').default
-type WorkflowMessages = typeof import('../i18n/en-US/workflow').default
-
 // Complete type structure that matches i18next-config.ts camelCase conversion
-export type Messages = {
-  appAnnotation: AppAnnotationMessages
-  appApi: AppApiMessages
-  appDebug: AppDebugMessages
-  appLog: AppLogMessages
-  appOverview: AppOverviewMessages
-  app: AppMessages
-  billing: BillingMessages
-  common: CommonMessages
-  custom: CustomMessages
-  datasetCreation: DatasetCreationMessages
-  datasetDocuments: DatasetDocumentsMessages
-  datasetHitTesting: DatasetHitTestingMessages
-  datasetPipeline: DatasetPipelineMessages
-  datasetSettings: DatasetSettingsMessages
-  dataset: DatasetMessages
-  education: EducationMessages
-  explore: ExploreMessages
-  layout: LayoutMessages
-  login: LoginMessages
-  oauth: OauthMessages
-  pipeline: PipelineMessages
-  pluginTags: PluginTagsMessages
-  pluginTrigger: PluginTriggerMessages
-  plugin: PluginMessages
-  register: RegisterMessages
-  runLog: RunLogMessages
-  share: ShareMessages
-  time: TimeMessages
-  tools: ToolsMessages
-  workflow: WorkflowMessages
-}
+export type Messages = typeof messagesEN
 
 // Utility type to flatten nested object keys into dot notation
 type FlattenKeys<T> = T extends object
@@ -81,19 +15,9 @@ type FlattenKeys<T> = T extends object
 
 export type ValidTranslationKeys = FlattenKeys<Messages>
 
-// Extend react-i18next with Dify's type structure
-declare module 'react-i18next' {
-  type CustomTypeOptions = {
-    defaultNS: 'translation'
-    resources: {
-      translation: Messages
-    }
-  }
-}
-
-// Extend i18next for complete type safety
 declare module 'i18next' {
-  type CustomTypeOptions = {
+  // eslint-disable-next-line ts/consistent-type-definitions
+  interface CustomTypeOptions {
     defaultNS: 'translation'
     resources: {
       translation: Messages
diff --git a/web/utils/format.ts b/web/utils/format.ts
index a2c3ef9751..d087d690a2 100644
--- a/web/utils/format.ts
+++ b/web/utils/format.ts
@@ -1,5 +1,6 @@
 import type { Dayjs } from 'dayjs'
 import type { Locale } from '@/i18n-config'
+import { localeMap } from '@/i18n-config/language'
 import 'dayjs/locale/de'
 import 'dayjs/locale/es'
 import 'dayjs/locale/fa'
@@ -21,30 +22,6 @@ import 'dayjs/locale/vi'
 import 'dayjs/locale/zh-cn'
 import 'dayjs/locale/zh-tw'
 
-const localeMap: Record<Locale, string> = {
-  'en-US': 'en',
-  'zh-Hans': 'zh-cn',
-  'zh-Hant': 'zh-tw',
-  'pt-BR': 'pt-br',
-  'es-ES': 'es',
-  'fr-FR': 'fr',
-  'de-DE': 'de',
-  'ja-JP': 'ja',
-  'ko-KR': 'ko',
-  'ru-RU': 'ru',
-  'it-IT': 'it',
-  'th-TH': 'th',
-  'id-ID': 'id',
-  'uk-UA': 'uk',
-  'vi-VN': 'vi',
-  'ro-RO': 'ro',
-  'pl-PL': 'pl',
-  'hi-IN': 'hi',
-  'tr-TR': 'tr',
-  'fa-IR': 'fa',
-  'sl-SI': 'sl',
-}
-
 /**
  * Formats a number with comma separators.
  * @example formatNumber(1234567) will return '1,234,567'
@@ -149,6 +126,6 @@ export const formatNumberAbbreviated = (num: number) => {
   }
 }
 
-export const formatToLocalTime = (time: Dayjs, local: string, format: string) => {
+export const formatToLocalTime = (time: Dayjs, local: Locale, format: string) => {
   return time.locale(localeMap[local] ?? 'en').format(format)
 }
diff --git a/web/utils/index.ts b/web/utils/index.ts
index 263d415479..ebb8b90645 100644
--- a/web/utils/index.ts
+++ b/web/utils/index.ts
@@ -1,4 +1,4 @@
-import { escape } from 'lodash-es'
+import { escape } from 'es-toolkit/compat'
 
 export const sleep = (ms: number) => {
   return new Promise(resolve => setTimeout(resolve, ms))