diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000000..7d42234cae
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,8 @@
+{
+  "enabledPlugins": {
+    "feature-dev@claude-plugins-official": true,
+    "context7@claude-plugins-official": true,
+    "typescript-lsp@claude-plugins-official": true,
+    "pyright-lsp@claude-plugins-official": true
+  }
+}
diff --git a/.claude/settings.json.example b/.claude/settings.json.example
deleted file mode 100644
index 1149895340..0000000000
--- a/.claude/settings.json.example
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-    "permissions": {
-      "allow": [],
-      "deny": []
-    },
-    "env": {
-      "__comment": "Environment variables for MCP servers. Override in .claude/settings.local.json with actual values.",
-      "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-    },
-    "enabledMcpjsonServers": [
-      "context7",
-      "sequential-thinking",
-      "github",
-      "fetch",
-      "playwright",
-      "ide"
-    ],
-    "enableAllProjectMcpServers": true
-  }
\ No newline at end of file
diff --git a/.claude/skills/component-refactoring/SKILL.md b/.claude/skills/component-refactoring/SKILL.md
new file mode 100644
index 0000000000..7006c382c8
--- /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.
+
+```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 65602c92eb..dd9677a78e 100644
--- a/.claude/skills/frontend-testing/SKILL.md
+++ b/.claude/skills/frontend-testing/SKILL.md
@@ -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/.github/workflows/api-tests.yml b/.github/workflows/api-tests.yml
index 76cbf64fca..152a9caee8 100644
--- a/.github/workflows/api-tests.yml
+++ b/.github/workflows/api-tests.yml
@@ -22,12 +22,12 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           enable-cache: true
           python-version: ${{ matrix.python-version }}
@@ -57,7 +57,7 @@ jobs:
         run: sh .github/workflows/expose_service_ports.sh
 
       - name: Set up Sandbox
-        uses: hoverkraft-tech/compose-action@v2.0.2
+        uses: hoverkraft-tech/compose-action@v2
         with:
           compose-file: |
             docker/docker-compose.middleware.yaml
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index dbced47988..5413f83c27 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -12,12 +12,28 @@ jobs:
     if: github.repository == 'langgenius/dify'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - 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
+      - uses: astral-sh/setup-uv@v7
+
+      - name: Generate Docker Compose
+        if: steps.docker-compose-changes.outputs.any_changed == 'true'
+        run: |
+          cd docker
+          ./generate_docker_compose
 
       - run: |
           cd api
diff --git a/.github/workflows/build-push.yml b/.github/workflows/build-push.yml
index f7f464a601..bbf89236de 100644
--- a/.github/workflows/build-push.yml
+++ b/.github/workflows/build-push.yml
@@ -90,7 +90,7 @@ jobs:
           touch "/tmp/digests/${sanitized_digest}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: digests-${{ matrix.context }}-${{ env.PLATFORM_PAIR }}
           path: /tmp/digests/*
diff --git a/.github/workflows/db-migration-test.yml b/.github/workflows/db-migration-test.yml
index 101d973466..e20cf9850b 100644
--- a/.github/workflows/db-migration-test.yml
+++ b/.github/workflows/db-migration-test.yml
@@ -13,13 +13,13 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           enable-cache: true
           python-version: "3.12"
@@ -63,13 +63,13 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           enable-cache: true
           python-version: "3.12"
diff --git a/.github/workflows/main-ci.yml b/.github/workflows/main-ci.yml
index 876ec23a3d..d6653de950 100644
--- a/.github/workflows/main-ci.yml
+++ b/.github/workflows/main-ci.yml
@@ -27,7 +27,7 @@ jobs:
       vdb-changed: ${{ steps.changes.outputs.vdb }}
       migration-changed: ${{ steps.changes.outputs.migration }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - uses: dorny/paths-filter@v3
         id: changes
         with:
@@ -38,6 +38,7 @@ jobs:
               - '.github/workflows/api-tests.yml'
             web:
               - 'web/**'
+              - '.github/workflows/web-tests.yml'
             vdb:
               - 'api/core/rag/datasource/**'
               - 'docker/**'
diff --git a/.github/workflows/style.yml b/.github/workflows/style.yml
index 2fb8121f74..d463349686 100644
--- a/.github/workflows/style.yml
+++ b/.github/workflows/style.yml
@@ -19,13 +19,13 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
       - name: Check changed files
         id: changed-files
-        uses: tj-actions/changed-files@v46
+        uses: tj-actions/changed-files@v47
         with:
           files: |
             api/**
@@ -33,7 +33,7 @@ jobs:
 
       - name: Setup UV and Python
         if: steps.changed-files.outputs.any_changed == 'true'
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           enable-cache: false
           python-version: "3.12"
@@ -68,15 +68,17 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
       - name: Check changed files
         id: changed-files
-        uses: tj-actions/changed-files@v46
+        uses: tj-actions/changed-files@v47
         with:
-          files: web/**
+          files: |
+            web/**
+            .github/workflows/style.yml
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -85,7 +87,7 @@ jobs:
           run_install: false
 
       - name: Setup NodeJS
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         if: steps.changed-files.outputs.any_changed == 'true'
         with:
           node-version: 22
@@ -108,50 +110,20 @@ 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
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: Check changed files
         id: changed-files
-        uses: tj-actions/changed-files@v46
+        uses: tj-actions/changed-files@v47
         with:
           files: |
             **.sh
diff --git a/.github/workflows/tool-test-sdks.yaml b/.github/workflows/tool-test-sdks.yaml
index b1ccd7417a..0259ef2232 100644
--- a/.github/workflows/tool-test-sdks.yaml
+++ b/.github/workflows/tool-test-sdks.yaml
@@ -25,12 +25,12 @@ jobs:
         working-directory: sdks/nodejs-client
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           persist-credentials: false
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node-version }}
           cache: ''
diff --git a/.github/workflows/translate-i18n-base-on-english.yml b/.github/workflows/translate-i18n-base-on-english.yml
index 87e24a4f90..58cd18371f 100644
--- a/.github/workflows/translate-i18n-base-on-english.yml
+++ b/.github/workflows/translate-i18n-base-on-english.yml
@@ -18,7 +18,7 @@ jobs:
       run:
         working-directory: web
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -51,7 +51,7 @@ jobs:
 
       - name: Set up Node.js
         if: env.FILES_CHANGED == 'true'
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 'lts/*'
           cache: pnpm
diff --git a/.github/workflows/vdb-tests.yml b/.github/workflows/vdb-tests.yml
index 291171e5c7..7735afdaca 100644
--- a/.github/workflows/vdb-tests.yml
+++ b/.github/workflows/vdb-tests.yml
@@ -19,19 +19,19 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
       - name: Free Disk Space
-        uses: endersonmenezes/free-disk-space@v2
+        uses: endersonmenezes/free-disk-space@v3
         with:
           remove_dotnet: true
           remove_haskell: true
           remove_tool_cache: true
 
       - name: Setup UV and Python
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           enable-cache: true
           python-version: ${{ matrix.python-version }}
diff --git a/.github/workflows/web-tests.yml b/.github/workflows/web-tests.yml
index 1a8925e38d..0fd1d5d22b 100644
--- a/.github/workflows/web-tests.yml
+++ b/.github/workflows/web-tests.yml
@@ -18,7 +18,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
@@ -29,7 +29,7 @@ jobs:
           run_install: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: pnpm
@@ -360,7 +360,7 @@ jobs:
 
       - name: Upload Coverage Artifact
         if: steps.coverage-summary.outputs.has_coverage == 'true'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: web-coverage-report
           path: web/coverage
diff --git a/.mcp.json b/.mcp.json
deleted file mode 100644
index 8eceaf9ead..0000000000
--- a/.mcp.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-    "mcpServers": {
-      "context7": {
-        "type": "http",
-        "url": "https://mcp.context7.com/mcp"
-      },
-      "sequential-thinking": {
-        "type": "stdio",
-        "command": "npx",
-        "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"],
-        "env": {}
-      },
-      "github": {
-        "type": "stdio",
-        "command": "npx",
-        "args": ["-y", "@modelcontextprotocol/server-github"],
-        "env": {
-          "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_PERSONAL_ACCESS_TOKEN}"
-        }
-      },
-      "fetch": {
-        "type": "stdio",
-        "command": "uvx",
-        "args": ["mcp-server-fetch"],
-        "env": {}
-      },
-      "playwright": {
-        "type": "stdio",
-        "command": "npx",
-        "args": ["-y", "@playwright/mcp@latest"],
-        "env": {}
-      }
-    }
-  }
\ No newline at end of file
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/app/apps/base_app_queue_manager.py b/api/core/app/apps/base_app_queue_manager.py
index 698eee9894..b41bedbea4 100644
--- a/api/core/app/apps/base_app_queue_manager.py
+++ b/api/core/app/apps/base_app_queue_manager.py
@@ -90,6 +90,7 @@ class AppQueueManager:
         """
         self._clear_task_belong_cache()
         self._q.put(None)
+        self._graph_runtime_state = None  # Release reference to allow GC to reclaim memory
 
     def _clear_task_belong_cache(self) -> None:
         """
diff --git a/api/core/helper/code_executor/jinja2/jinja2_transformer.py b/api/core/helper/code_executor/jinja2/jinja2_transformer.py
index 969125d2f7..5e4807401e 100644
--- a/api/core/helper/code_executor/jinja2/jinja2_transformer.py
+++ b/api/core/helper/code_executor/jinja2/jinja2_transformer.py
@@ -1,9 +1,14 @@
+from collections.abc import Mapping
 from textwrap import dedent
+from typing import Any
 
 from core.helper.code_executor.template_transformer import TemplateTransformer
 
 
 class Jinja2TemplateTransformer(TemplateTransformer):
+    # Use separate placeholder for base64-encoded template to avoid confusion
+    _template_b64_placeholder: str = "{{template_b64}}"
+
     @classmethod
     def transform_response(cls, response: str):
         """
@@ -13,18 +18,35 @@ class Jinja2TemplateTransformer(TemplateTransformer):
         """
         return {"result": cls.extract_result_str_from_response(response)}
 
+    @classmethod
+    def assemble_runner_script(cls, code: str, inputs: Mapping[str, Any]) -> str:
+        """
+        Override base class to use base64 encoding for template code.
+        This prevents issues with special characters (quotes, newlines) in templates
+        breaking the generated Python script. Fixes #26818.
+        """
+        script = cls.get_runner_script()
+        # Encode template as base64 to safely embed any content including quotes
+        code_b64 = cls.serialize_code(code)
+        script = script.replace(cls._template_b64_placeholder, code_b64)
+        inputs_str = cls.serialize_inputs(inputs)
+        script = script.replace(cls._inputs_placeholder, inputs_str)
+        return script
+
     @classmethod
     def get_runner_script(cls) -> str:
         runner_script = dedent(f"""
-            # declare main function
-            def main(**inputs):
-                import jinja2
-                template = jinja2.Template('''{cls._code_placeholder}''')
-                return template.render(**inputs)
-
+            import jinja2
             import json
             from base64 import b64decode
 
+            # declare main function
+            def main(**inputs):
+                # Decode base64-encoded template to handle special characters safely
+                template_code = b64decode('{cls._template_b64_placeholder}').decode('utf-8')
+                template = jinja2.Template(template_code)
+                return template.render(**inputs)
+
             # decode and prepare input dict
             inputs_obj = json.loads(b64decode('{cls._inputs_placeholder}').decode('utf-8'))
 
diff --git a/api/core/helper/code_executor/template_transformer.py b/api/core/helper/code_executor/template_transformer.py
index 3965f8cb31..6fda073913 100644
--- a/api/core/helper/code_executor/template_transformer.py
+++ b/api/core/helper/code_executor/template_transformer.py
@@ -13,6 +13,15 @@ class TemplateTransformer(ABC):
     _inputs_placeholder: str = "{{inputs}}"
     _result_tag: str = "<<RESULT>>"
 
+    @classmethod
+    def serialize_code(cls, code: str) -> str:
+        """
+        Serialize template code to base64 to safely embed in generated script.
+        This prevents issues with special characters like quotes breaking the script.
+        """
+        code_bytes = code.encode("utf-8")
+        return b64encode(code_bytes).decode("utf-8")
+
     @classmethod
     def transform_caller(cls, code: str, inputs: Mapping[str, Any]) -> tuple[str, str]:
         """
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/mcp/client/streamable_client.py b/api/core/mcp/client/streamable_client.py
index f81e7cead8..5c3cd0d8f8 100644
--- a/api/core/mcp/client/streamable_client.py
+++ b/api/core/mcp/client/streamable_client.py
@@ -313,17 +313,20 @@ class StreamableHTTPTransport:
             if is_initialization:
                 self._maybe_extract_session_id_from_response(response)
 
-            content_type = cast(str, response.headers.get(CONTENT_TYPE, "").lower())
+            # Per https://modelcontextprotocol.io/specification/2025-06-18/basic#notifications:
+            # The server MUST NOT send a response to notifications.
+            if isinstance(message.root, JSONRPCRequest):
+                content_type = cast(str, response.headers.get(CONTENT_TYPE, "").lower())
 
-            if content_type.startswith(JSON):
-                self._handle_json_response(response, ctx.server_to_client_queue)
-            elif content_type.startswith(SSE):
-                self._handle_sse_response(response, ctx)
-            else:
-                self._handle_unexpected_content_type(
-                    content_type,
-                    ctx.server_to_client_queue,
-                )
+                if content_type.startswith(JSON):
+                    self._handle_json_response(response, ctx.server_to_client_queue)
+                elif content_type.startswith(SSE):
+                    self._handle_sse_response(response, ctx)
+                else:
+                    self._handle_unexpected_content_type(
+                        content_type,
+                        ctx.server_to_client_queue,
+                    )
 
     def _handle_json_response(
         self,
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/rag/datasource/retrieval_service.py b/api/core/rag/datasource/retrieval_service.py
index 9807cb4e6a..43912cd75d 100644
--- a/api/core/rag/datasource/retrieval_service.py
+++ b/api/core/rag/datasource/retrieval_service.py
@@ -13,7 +13,7 @@ from core.model_runtime.entities.model_entities import ModelType
 from core.rag.data_post_processor.data_post_processor import DataPostProcessor
 from core.rag.datasource.keyword.keyword_factory import Keyword
 from core.rag.datasource.vdb.vector_factory import Vector
-from core.rag.embedding.retrieval import RetrievalSegments
+from core.rag.embedding.retrieval import RetrievalChildChunk, RetrievalSegments
 from core.rag.entities.metadata_entities import MetadataCondition
 from core.rag.index_processor.constant.doc_type import DocType
 from core.rag.index_processor.constant.index_type import IndexStructureType
@@ -381,10 +381,9 @@ class RetrievalService:
             records = []
             include_segment_ids = set()
             segment_child_map = {}
-            segment_file_map = {}
 
             valid_dataset_documents = {}
-            image_doc_ids = []
+            image_doc_ids: list[Any] = []
             child_index_node_ids = []
             index_node_ids = []
             doc_to_document_map = {}
@@ -417,28 +416,39 @@ class RetrievalService:
             child_index_node_ids = [i for i in child_index_node_ids if i]
             index_node_ids = [i for i in index_node_ids if i]
 
-            segment_ids = []
+            segment_ids: list[str] = []
             index_node_segments: list[DocumentSegment] = []
             segments: list[DocumentSegment] = []
-            attachment_map = {}
-            child_chunk_map = {}
-            doc_segment_map = {}
+            attachment_map: dict[str, list[dict[str, Any]]] = {}
+            child_chunk_map: dict[str, list[ChildChunk]] = {}
+            doc_segment_map: dict[str, list[str]] = {}
 
             with session_factory.create_session() as session:
                 attachments = cls.get_segment_attachment_infos(image_doc_ids, session)
 
                 for attachment in attachments:
                     segment_ids.append(attachment["segment_id"])
-                    attachment_map[attachment["segment_id"]] = attachment
-                    doc_segment_map[attachment["segment_id"]] = attachment["attachment_id"]
-
+                    if attachment["segment_id"] in attachment_map:
+                        attachment_map[attachment["segment_id"]].append(attachment["attachment_info"])
+                    else:
+                        attachment_map[attachment["segment_id"]] = [attachment["attachment_info"]]
+                    if attachment["segment_id"] in doc_segment_map:
+                        doc_segment_map[attachment["segment_id"]].append(attachment["attachment_id"])
+                    else:
+                        doc_segment_map[attachment["segment_id"]] = [attachment["attachment_id"]]
                 child_chunk_stmt = select(ChildChunk).where(ChildChunk.index_node_id.in_(child_index_node_ids))
                 child_index_nodes = session.execute(child_chunk_stmt).scalars().all()
 
                 for i in child_index_nodes:
                     segment_ids.append(i.segment_id)
-                    child_chunk_map[i.segment_id] = i
-                    doc_segment_map[i.segment_id] = i.index_node_id
+                    if i.segment_id in child_chunk_map:
+                        child_chunk_map[i.segment_id].append(i)
+                    else:
+                        child_chunk_map[i.segment_id] = [i]
+                    if i.segment_id in doc_segment_map:
+                        doc_segment_map[i.segment_id].append(i.index_node_id)
+                    else:
+                        doc_segment_map[i.segment_id] = [i.index_node_id]
 
                 if index_node_ids:
                     document_segment_stmt = select(DocumentSegment).where(
@@ -448,7 +458,7 @@ class RetrievalService:
                     )
                     index_node_segments = session.execute(document_segment_stmt).scalars().all()  # type: ignore
                     for index_node_segment in index_node_segments:
-                        doc_segment_map[index_node_segment.id] = index_node_segment.index_node_id
+                        doc_segment_map[index_node_segment.id] = [index_node_segment.index_node_id]
                 if segment_ids:
                     document_segment_stmt = select(DocumentSegment).where(
                         DocumentSegment.enabled == True,
@@ -461,95 +471,86 @@ class RetrievalService:
                     segments.extend(index_node_segments)
 
             for segment in segments:
-                doc_id = doc_segment_map.get(segment.id)
-                child_chunk = child_chunk_map.get(segment.id)
-                attachment_info = attachment_map.get(segment.id)
+                child_chunks: list[ChildChunk] = child_chunk_map.get(segment.id, [])
+                attachment_infos: list[dict[str, Any]] = attachment_map.get(segment.id, [])
+                ds_dataset_document: DatasetDocument | None = valid_dataset_documents.get(segment.document_id)
 
-                if doc_id:
-                    document = doc_to_document_map[doc_id]
-                    ds_dataset_document: DatasetDocument | None = valid_dataset_documents.get(
-                        document.metadata.get("document_id")
-                    )
-
-                    if ds_dataset_document and ds_dataset_document.doc_form == IndexStructureType.PARENT_CHILD_INDEX:
-                        if segment.id not in include_segment_ids:
-                            include_segment_ids.add(segment.id)
-                            if child_chunk:
+                if ds_dataset_document and ds_dataset_document.doc_form == IndexStructureType.PARENT_CHILD_INDEX:
+                    if segment.id not in include_segment_ids:
+                        include_segment_ids.add(segment.id)
+                        if child_chunks or attachment_infos:
+                            child_chunk_details = []
+                            max_score = 0.0
+                            for child_chunk in child_chunks:
+                                document = doc_to_document_map[child_chunk.index_node_id]
                                 child_chunk_detail = {
                                     "id": child_chunk.id,
                                     "content": child_chunk.content,
                                     "position": child_chunk.position,
                                     "score": document.metadata.get("score", 0.0) if document else 0.0,
                                 }
-                                map_detail = {
-                                    "max_score": document.metadata.get("score", 0.0) if document else 0.0,
-                                    "child_chunks": [child_chunk_detail],
-                                }
-                                segment_child_map[segment.id] = map_detail
-                            record = {
-                                "segment": segment,
+                                child_chunk_details.append(child_chunk_detail)
+                                max_score = max(max_score, document.metadata.get("score", 0.0) if document else 0.0)
+                            for attachment_info in attachment_infos:
+                                file_document = doc_to_document_map[attachment_info["id"]]
+                                max_score = max(
+                                    max_score, file_document.metadata.get("score", 0.0) if file_document else 0.0
+                                )
+
+                            map_detail = {
+                                "max_score": max_score,
+                                "child_chunks": child_chunk_details,
                             }
-                            if attachment_info:
-                                segment_file_map[segment.id] = [attachment_info]
-                            records.append(record)
-                        else:
-                            if child_chunk:
-                                child_chunk_detail = {
-                                    "id": child_chunk.id,
-                                    "content": child_chunk.content,
-                                    "position": child_chunk.position,
-                                    "score": document.metadata.get("score", 0.0),
-                                }
-                                if segment.id in segment_child_map:
-                                    segment_child_map[segment.id]["child_chunks"].append(child_chunk_detail)  # type: ignore
-                                    segment_child_map[segment.id]["max_score"] = max(
-                                        segment_child_map[segment.id]["max_score"],
-                                        document.metadata.get("score", 0.0) if document else 0.0,
-                                    )
-                                else:
-                                    segment_child_map[segment.id] = {
-                                        "max_score": document.metadata.get("score", 0.0) if document else 0.0,
-                                        "child_chunks": [child_chunk_detail],
-                                    }
-                            if attachment_info:
-                                if segment.id in segment_file_map:
-                                    segment_file_map[segment.id].append(attachment_info)
-                                else:
-                                    segment_file_map[segment.id] = [attachment_info]
-                    else:
-                        if segment.id not in include_segment_ids:
-                            include_segment_ids.add(segment.id)
-                            record = {
-                                "segment": segment,
-                                "score": document.metadata.get("score", 0.0),  # type: ignore
-                            }
-                            if attachment_info:
-                                segment_file_map[segment.id] = [attachment_info]
-                            records.append(record)
-                        else:
-                            if attachment_info:
-                                attachment_infos = segment_file_map.get(segment.id, [])
-                                if attachment_info not in attachment_infos:
-                                    attachment_infos.append(attachment_info)
-                                segment_file_map[segment.id] = attachment_infos
+                            segment_child_map[segment.id] = map_detail
+                        record: dict[str, Any] = {
+                            "segment": segment,
+                        }
+                        records.append(record)
+                else:
+                    if segment.id not in include_segment_ids:
+                        include_segment_ids.add(segment.id)
+                        max_score = 0.0
+                        segment_document = doc_to_document_map.get(segment.index_node_id)
+                        if segment_document:
+                            max_score = max(max_score, segment_document.metadata.get("score", 0.0))
+                        for attachment_info in attachment_infos:
+                            file_doc = doc_to_document_map.get(attachment_info["id"])
+                            if file_doc:
+                                max_score = max(max_score, file_doc.metadata.get("score", 0.0))
+                        record = {
+                            "segment": segment,
+                            "score": max_score,
+                        }
+                        records.append(record)
 
             # Add child chunks information to records
             for record in records:
                 if record["segment"].id in segment_child_map:
                     record["child_chunks"] = segment_child_map[record["segment"].id].get("child_chunks")  # type: ignore
                     record["score"] = segment_child_map[record["segment"].id]["max_score"]  # type: ignore
-                if record["segment"].id in segment_file_map:
-                    record["files"] = segment_file_map[record["segment"].id]  # type: ignore[assignment]
+                if record["segment"].id in attachment_map:
+                    record["files"] = attachment_map[record["segment"].id]  # type: ignore[assignment]
 
-            result = []
+            result: list[RetrievalSegments] = []
             for record in records:
                 # Extract segment
                 segment = record["segment"]
 
                 # Extract child_chunks, ensuring it's a list or None
-                child_chunks = record.get("child_chunks")
-                if not isinstance(child_chunks, list):
-                    child_chunks = None
+                raw_child_chunks = record.get("child_chunks")
+                child_chunks_list: list[RetrievalChildChunk] | None = None
+                if isinstance(raw_child_chunks, list):
+                    # Sort by score descending
+                    sorted_chunks = sorted(raw_child_chunks, key=lambda x: x.get("score", 0.0), reverse=True)
+                    child_chunks_list = [
+                        RetrievalChildChunk(
+                            id=chunk["id"],
+                            content=chunk["content"],
+                            score=chunk.get("score", 0.0),
+                            position=chunk["position"],
+                        )
+                        for chunk in sorted_chunks
+                    ]
 
                 # Extract files, ensuring it's a list or None
                 files = record.get("files")
@@ -566,11 +567,11 @@ class RetrievalService:
 
                 # Create RetrievalSegments object
                 retrieval_segment = RetrievalSegments(
-                    segment=segment, child_chunks=child_chunks, score=score, files=files
+                    segment=segment, child_chunks=child_chunks_list, score=score, files=files
                 )
                 result.append(retrieval_segment)
 
-            return result
+            return sorted(result, key=lambda x: x.score if x.score is not None else 0.0, reverse=True)
         except Exception as e:
             db.session.rollback()
             raise e
diff --git a/api/core/rag/datasource/vdb/pgvector/pgvector.py b/api/core/rag/datasource/vdb/pgvector/pgvector.py
index 445a0a7f8b..0615b8312c 100644
--- a/api/core/rag/datasource/vdb/pgvector/pgvector.py
+++ b/api/core/rag/datasource/vdb/pgvector/pgvector.py
@@ -255,7 +255,10 @@ class PGVector(BaseVector):
                 return
 
             with self._get_cursor() as cur:
-                cur.execute("CREATE EXTENSION IF NOT EXISTS vector")
+                cur.execute("SELECT 1 FROM pg_extension WHERE extname = 'vector'")
+                if not cur.fetchone():
+                    cur.execute("CREATE EXTENSION vector")
+
                 cur.execute(SQL_CREATE_TABLE.format(table_name=self.table_name, dimension=dimension))
                 # PG hnsw index only support 2000 dimension or less
                 # ref: https://github.com/pgvector/pgvector?tab=readme-ov-file#indexing
diff --git a/api/core/rag/retrieval/dataset_retrieval.py b/api/core/rag/retrieval/dataset_retrieval.py
index baf879df95..2c3fc5ab75 100644
--- a/api/core/rag/retrieval/dataset_retrieval.py
+++ b/api/core/rag/retrieval/dataset_retrieval.py
@@ -7,7 +7,7 @@ from collections.abc import Generator, Mapping
 from typing import Any, Union, cast
 
 from flask import Flask, current_app
-from sqlalchemy import and_, or_, select
+from sqlalchemy import and_, literal, or_, select
 from sqlalchemy.orm import Session
 
 from core.app.app_config.entities import (
@@ -1036,7 +1036,7 @@ class DatasetRetrieval:
             if automatic_metadata_filters:
                 conditions = []
                 for sequence, filter in enumerate(automatic_metadata_filters):
-                    self._process_metadata_filter_func(
+                    self.process_metadata_filter_func(
                         sequence,
                         filter.get("condition"),  # type: ignore
                         filter.get("metadata_name"),  # type: ignore
@@ -1072,7 +1072,7 @@ class DatasetRetrieval:
                             value=expected_value,
                         )
                     )
-                    filters = self._process_metadata_filter_func(
+                    filters = self.process_metadata_filter_func(
                         sequence,
                         condition.comparison_operator,
                         metadata_name,
@@ -1168,8 +1168,9 @@ class DatasetRetrieval:
             return None
         return automatic_metadata_filters
 
-    def _process_metadata_filter_func(
-        self, sequence: int, condition: str, metadata_name: str, value: Any | None, filters: list
+    @classmethod
+    def process_metadata_filter_func(
+        cls, sequence: int, condition: str, metadata_name: str, value: Any | None, filters: list
     ):
         if value is None and condition not in ("empty", "not empty"):
             return filters
@@ -1218,6 +1219,20 @@ class DatasetRetrieval:
 
             case "≥" | ">=":
                 filters.append(DatasetDocument.doc_metadata[metadata_name].as_float() >= value)
+            case "in" | "not in":
+                if isinstance(value, str):
+                    value_list = [v.strip() for v in value.split(",") if v.strip()]
+                elif isinstance(value, (list, tuple)):
+                    value_list = [str(v) for v in value if v is not None]
+                else:
+                    value_list = [str(value)] if value is not None else []
+
+                if not value_list:
+                    # `field in []` is False, `field not in []` is True
+                    filters.append(literal(condition == "not in"))
+                else:
+                    op = json_field.in_ if condition == "in" else json_field.notin_
+                    filters.append(op(value_list))
             case _:
                 pass
 
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/mcp_tool/tool.py b/api/core/tools/mcp_tool/tool.py
index fbaf31ad09..96917045e3 100644
--- a/api/core/tools/mcp_tool/tool.py
+++ b/api/core/tools/mcp_tool/tool.py
@@ -6,7 +6,15 @@ from typing import Any
 
 from core.mcp.auth_client import MCPClientWithAuthRetry
 from core.mcp.error import MCPConnectionError
-from core.mcp.types import AudioContent, CallToolResult, ImageContent, TextContent
+from core.mcp.types import (
+    AudioContent,
+    BlobResourceContents,
+    CallToolResult,
+    EmbeddedResource,
+    ImageContent,
+    TextContent,
+    TextResourceContents,
+)
 from core.tools.__base.tool import Tool
 from core.tools.__base.tool_runtime import ToolRuntime
 from core.tools.entities.tool_entities import ToolEntity, ToolInvokeMessage, ToolProviderType
@@ -53,10 +61,19 @@ class MCPTool(Tool):
         for content in result.content:
             if isinstance(content, TextContent):
                 yield from self._process_text_content(content)
-            elif isinstance(content, ImageContent):
-                yield self._process_image_content(content)
-            elif isinstance(content, AudioContent):
-                yield self._process_audio_content(content)
+            elif isinstance(content, ImageContent | AudioContent):
+                yield self.create_blob_message(
+                    blob=base64.b64decode(content.data), meta={"mime_type": content.mimeType}
+                )
+            elif isinstance(content, EmbeddedResource):
+                resource = content.resource
+                if isinstance(resource, TextResourceContents):
+                    yield self.create_text_message(resource.text)
+                elif isinstance(resource, BlobResourceContents):
+                    mime_type = resource.mimeType or "application/octet-stream"
+                    yield self.create_blob_message(blob=base64.b64decode(resource.blob), meta={"mime_type": mime_type})
+                else:
+                    raise ToolInvokeError(f"Unsupported embedded resource type: {type(resource)}")
             else:
                 logger.warning("Unsupported content type=%s", type(content))
 
@@ -101,14 +118,6 @@ class MCPTool(Tool):
         for item in json_list:
             yield self.create_json_message(item)
 
-    def _process_image_content(self, content: ImageContent) -> ToolInvokeMessage:
-        """Process image content and return a blob message."""
-        return self.create_blob_message(blob=base64.b64decode(content.data), meta={"mime_type": content.mimeType})
-
-    def _process_audio_content(self, content: AudioContent) -> ToolInvokeMessage:
-        """Process audio content and return a blob message."""
-        return self.create_blob_message(blob=base64.b64decode(content.data), meta={"mime_type": content.mimeType})
-
     def fork_tool_runtime(self, runtime: ToolRuntime) -> "MCPTool":
         return MCPTool(
             entity=self.entity,
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/knowledge_retrieval/knowledge_retrieval_node.py b/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
index adc474bd60..8670a71aa3 100644
--- a/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
+++ b/api/core/workflow/nodes/knowledge_retrieval/knowledge_retrieval_node.py
@@ -6,7 +6,7 @@ from collections import defaultdict
 from collections.abc import Mapping, Sequence
 from typing import TYPE_CHECKING, Any, cast
 
-from sqlalchemy import and_, func, literal, or_, select
+from sqlalchemy import and_, func, or_, select
 from sqlalchemy.orm import sessionmaker
 
 from core.app.app_config.entities import DatasetRetrieveConfigEntity
@@ -460,7 +460,7 @@ class KnowledgeRetrievalNode(LLMUsageTrackingMixin, Node[KnowledgeRetrievalNodeD
             if automatic_metadata_filters:
                 conditions = []
                 for sequence, filter in enumerate(automatic_metadata_filters):
-                    self._process_metadata_filter_func(
+                    DatasetRetrieval.process_metadata_filter_func(
                         sequence,
                         filter.get("condition", ""),
                         filter.get("metadata_name", ""),
@@ -504,7 +504,7 @@ class KnowledgeRetrievalNode(LLMUsageTrackingMixin, Node[KnowledgeRetrievalNodeD
                             value=expected_value,
                         )
                     )
-                    filters = self._process_metadata_filter_func(
+                    filters = DatasetRetrieval.process_metadata_filter_func(
                         sequence,
                         condition.comparison_operator,
                         metadata_name,
@@ -603,87 +603,6 @@ class KnowledgeRetrievalNode(LLMUsageTrackingMixin, Node[KnowledgeRetrievalNodeD
             return [], usage
         return automatic_metadata_filters, usage
 
-    def _process_metadata_filter_func(
-        self, sequence: int, condition: str, metadata_name: str, value: Any, filters: list[Any]
-    ) -> list[Any]:
-        if value is None and condition not in ("empty", "not empty"):
-            return filters
-
-        json_field = Document.doc_metadata[metadata_name].as_string()
-
-        match condition:
-            case "contains":
-                filters.append(json_field.like(f"%{value}%"))
-
-            case "not contains":
-                filters.append(json_field.notlike(f"%{value}%"))
-
-            case "start with":
-                filters.append(json_field.like(f"{value}%"))
-
-            case "end with":
-                filters.append(json_field.like(f"%{value}"))
-            case "in":
-                if isinstance(value, str):
-                    value_list = [v.strip() for v in value.split(",") if v.strip()]
-                elif isinstance(value, (list, tuple)):
-                    value_list = [str(v) for v in value if v is not None]
-                else:
-                    value_list = [str(value)] if value is not None else []
-
-                if not value_list:
-                    filters.append(literal(False))
-                else:
-                    filters.append(json_field.in_(value_list))
-
-            case "not in":
-                if isinstance(value, str):
-                    value_list = [v.strip() for v in value.split(",") if v.strip()]
-                elif isinstance(value, (list, tuple)):
-                    value_list = [str(v) for v in value if v is not None]
-                else:
-                    value_list = [str(value)] if value is not None else []
-
-                if not value_list:
-                    filters.append(literal(True))
-                else:
-                    filters.append(json_field.notin_(value_list))
-
-            case "is" | "=":
-                if isinstance(value, str):
-                    filters.append(json_field == value)
-                elif isinstance(value, (int, float)):
-                    filters.append(Document.doc_metadata[metadata_name].as_float() == value)
-
-            case "is not" | "≠":
-                if isinstance(value, str):
-                    filters.append(json_field != value)
-                elif isinstance(value, (int, float)):
-                    filters.append(Document.doc_metadata[metadata_name].as_float() != value)
-
-            case "empty":
-                filters.append(Document.doc_metadata[metadata_name].is_(None))
-
-            case "not empty":
-                filters.append(Document.doc_metadata[metadata_name].isnot(None))
-
-            case "before" | "<":
-                filters.append(Document.doc_metadata[metadata_name].as_float() < value)
-
-            case "after" | ">":
-                filters.append(Document.doc_metadata[metadata_name].as_float() > value)
-
-            case "≤" | "<=":
-                filters.append(Document.doc_metadata[metadata_name].as_float() <= value)
-
-            case "≥" | ">=":
-                filters.append(Document.doc_metadata[metadata_name].as_float() >= value)
-
-            case _:
-                pass
-
-        return filters
-
     @classmethod
     def _extract_variable_selector_to_variable_mapping(
         cls,
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/app_generate_service.py b/api/services/app_generate_service.py
index 4514c86f7c..cc58899dc4 100644
--- a/api/services/app_generate_service.py
+++ b/api/services/app_generate_service.py
@@ -14,7 +14,8 @@ from enums.quota_type import QuotaType, unlimited
 from extensions.otel import AppGenerateHandler, trace_span
 from models.model import Account, App, AppMode, EndUser
 from models.workflow import Workflow
-from services.errors.app import InvokeRateLimitError, QuotaExceededError, WorkflowIdFormatError, WorkflowNotFoundError
+from services.errors.app import QuotaExceededError, WorkflowIdFormatError, WorkflowNotFoundError
+from services.errors.llm import InvokeRateLimitError
 from services.workflow_service import WorkflowService
 
 
diff --git a/api/services/async_workflow_service.py b/api/services/async_workflow_service.py
index e100582511..bc73b7c8c2 100644
--- a/api/services/async_workflow_service.py
+++ b/api/services/async_workflow_service.py
@@ -21,7 +21,7 @@ from models.model import App, EndUser
 from models.trigger import WorkflowTriggerLog
 from models.workflow import Workflow
 from repositories.sqlalchemy_workflow_trigger_log_repository import SQLAlchemyWorkflowTriggerLogRepository
-from services.errors.app import InvokeRateLimitError, QuotaExceededError, WorkflowNotFoundError
+from services.errors.app import QuotaExceededError, WorkflowNotFoundError, WorkflowQuotaLimitError
 from services.workflow.entities import AsyncTriggerResponse, TriggerData, WorkflowTaskData
 from services.workflow.queue_dispatcher import QueueDispatcherManager, QueuePriority
 from services.workflow_service import WorkflowService
@@ -141,7 +141,7 @@ class AsyncWorkflowService:
             trigger_log_repo.update(trigger_log)
             session.commit()
 
-            raise InvokeRateLimitError(
+            raise WorkflowQuotaLimitError(
                 f"Workflow execution quota limit reached for tenant {trigger_data.tenant_id}"
             ) from e
 
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/enterprise/enterprise_service.py b/api/services/enterprise/enterprise_service.py
index 83d0fcf296..c0cc0e5233 100644
--- a/api/services/enterprise/enterprise_service.py
+++ b/api/services/enterprise/enterprise_service.py
@@ -110,5 +110,5 @@ class EnterpriseService:
             if not app_id:
                 raise ValueError("app_id must be provided.")
 
-            body = {"appId": app_id}
-            EnterpriseRequest.send_request("DELETE", "/webapp/clean", json=body)
+            params = {"appId": app_id}
+            EnterpriseRequest.send_request("DELETE", "/webapp/clean", params=params)
diff --git a/api/services/errors/app.py b/api/services/errors/app.py
index 24e4760acc..60e59e97dc 100644
--- a/api/services/errors/app.py
+++ b/api/services/errors/app.py
@@ -18,8 +18,8 @@ class WorkflowIdFormatError(Exception):
     pass
 
 
-class InvokeRateLimitError(Exception):
-    """Raised when rate limit is exceeded for workflow invocations."""
+class WorkflowQuotaLimitError(Exception):
+    """Raised when workflow execution quota is exceeded (for async/background workflows)."""
 
     pass
 
diff --git a/api/services/plugin/plugin_parameter_service.py b/api/services/plugin/plugin_parameter_service.py
index c517d9f966..40565c56ed 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,
+                original_subscription.credential_type or CredentialType.UNAUTHORIZED.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..ef77c33c1b 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,188 @@ 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")
+
+        # Use distributed lock to prevent race conditions on the same subscription
+        lock_key = f"trigger_subscription_rebuild_lock:{tenant_id}_{subscription_id}"
+        with redis_client.lock(lock_key, timeout=20):
+            with Session(db.engine, expire_on_commit=False) as session:
+                try:
+                    # Get subscription within the transaction
+                    subscription: TriggerSubscription | None = (
+                        session.query(TriggerSubscription).filter_by(tenant_id=tenant_id, id=subscription_id).first()
+                    )
+                    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")
+
+                    # Decrypt existing credentials for merging
+                    credential_encrypter, _ = create_trigger_provider_encrypter_for_subscription(
+                        tenant_id=tenant_id,
+                        controller=provider_controller,
+                        subscription=subscription,
+                    )
+                    decrypted_credentials = dict(credential_encrypter.decrypt(subscription.credentials))
+
+                    # Merge credentials: if caller passed HIDDEN_VALUE, retain existing decrypted value
+                    merged_credentials: dict[str, Any] = {
+                        key: value if value != HIDDEN_VALUE else decrypted_credentials.get(key, UNKNOWN_VALUE)
+                        for key, value in credentials.items()
+                    }
+
+                    user_id = subscription.user_id
+
+                    # 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
+
+                    # Unsubscribe the previous subscription (external call, but we'll handle errors)
+                    try:
+                        TriggerManager.unsubscribe_trigger(
+                            tenant_id=tenant_id,
+                            user_id=user_id,
+                            provider_id=provider_id,
+                            subscription=subscription.to_entity(),
+                            credentials=decrypted_credentials,
+                            credential_type=credential_type,
+                        )
+                    except Exception as e:
+                        logger.exception("Error unsubscribing trigger during rebuild", exc_info=e)
+                        # Continue anyway - the subscription might already be deleted externally
+
+                    # Create a new subscription with the same subscription_id and endpoint_id (external call)
+                    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=merged_credentials,
+                        credential_type=credential_type,
+                    )
+
+                    # Update the subscription in the same transaction
+                    # Inline update logic to reuse the same session
+                    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 and existing.id != subscription.id:
+                            raise ValueError(f"Subscription name '{name}' already exists for this provider")
+                        subscription.name = name
+
+                    # Update parameters
+                    subscription.parameters = dict(parameters)
+
+                    # Update credentials with merged (and encrypted) values
+                    subscription.credentials = dict(credential_encrypter.encrypt(merged_credentials))
+
+                    # Update properties
+                    if new_subscription.properties:
+                        properties_encrypter, _ = create_provider_encrypter(
+                            tenant_id=tenant_id,
+                            config=provider_controller.get_properties_schema(),
+                            cache=NoOpProviderCredentialCache(),
+                        )
+                        subscription.properties = dict(properties_encrypter.encrypt(dict(new_subscription.properties)))
+
+                    # Update expiration timestamp
+                    if new_subscription.expires_at is not None:
+                        subscription.expires_at = new_subscription.expires_at
+
+                    # Commit the transaction
+                    session.commit()
+
+                    # Clear subscription cache
+                    delete_cache_for_subscription(
+                        tenant_id=tenant_id,
+                        provider_id=subscription.provider_id,
+                        subscription_id=subscription.id,
+                    )
+
+                except Exception as e:
+                    # Rollback on any error
+                    session.rollback()
+                    logger.exception("Failed to rebuild trigger subscription", exc_info=e)
+                    raise
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/services/trigger/webhook_service.py b/api/services/trigger/webhook_service.py
index 5c4607d400..4159f5f8f4 100644
--- a/api/services/trigger/webhook_service.py
+++ b/api/services/trigger/webhook_service.py
@@ -863,10 +863,18 @@ class WebhookService:
                 not_found_in_cache.append(node_id)
                 continue
 
-        with Session(db.engine) as session:
-            try:
-                # lock the concurrent webhook trigger creation
-                redis_client.lock(f"{cls.__WEBHOOK_NODE_CACHE_KEY__}:apps:{app.id}:lock", timeout=10)
+        lock_key = f"{cls.__WEBHOOK_NODE_CACHE_KEY__}:apps:{app.id}:lock"
+        lock = redis_client.lock(lock_key, timeout=10)
+        lock_acquired = False
+
+        try:
+            # acquire the lock with blocking and timeout
+            lock_acquired = lock.acquire(blocking=True, blocking_timeout=10)
+            if not lock_acquired:
+                logger.warning("Failed to acquire lock for webhook sync, app %s", app.id)
+                raise RuntimeError("Failed to acquire lock for webhook trigger synchronization")
+
+            with Session(db.engine) as session:
                 # fetch the non-cached nodes from DB
                 all_records = session.scalars(
                     select(WorkflowWebhookTrigger).where(
@@ -903,11 +911,16 @@ class WebhookService:
                         session.delete(nodes_id_in_db[node_id])
                         redis_client.delete(f"{cls.__WEBHOOK_NODE_CACHE_KEY__}:{app.id}:{node_id}")
                 session.commit()
-            except Exception:
-                logger.exception("Failed to sync webhook relationships for app %s", app.id)
-                raise
-            finally:
-                redis_client.delete(f"{cls.__WEBHOOK_NODE_CACHE_KEY__}:apps:{app.id}:lock")
+        except Exception:
+            logger.exception("Failed to sync webhook relationships for app %s", app.id)
+            raise
+        finally:
+            # release the lock only if it was acquired
+            if lock_acquired:
+                try:
+                    lock.release()
+                except Exception:
+                    logger.exception("Failed to release lock for webhook sync, app %s", app.id)
 
     @classmethod
     def generate_webhook_id(cls) -> str:
diff --git a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py b/api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
index 94903cf796..c8eb9ec3e4 100644
--- a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
+++ b/api/tests/integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
@@ -7,11 +7,14 @@ CODE_LANGUAGE = CodeLanguage.JINJA2
 
 
 def test_jinja2():
+    """Test basic Jinja2 template rendering."""
     template = "Hello {{template}}"
+    # Template must be base64 encoded to match the new safe embedding approach
+    template_b64 = base64.b64encode(template.encode("utf-8")).decode("utf-8")
     inputs = base64.b64encode(b'{"template": "World"}').decode("utf-8")
     code = (
         Jinja2TemplateTransformer.get_runner_script()
-        .replace(Jinja2TemplateTransformer._code_placeholder, template)
+        .replace(Jinja2TemplateTransformer._template_b64_placeholder, template_b64)
         .replace(Jinja2TemplateTransformer._inputs_placeholder, inputs)
     )
     result = CodeExecutor.execute_code(
@@ -21,6 +24,7 @@ def test_jinja2():
 
 
 def test_jinja2_with_code_template():
+    """Test template rendering via the high-level workflow API."""
     result = CodeExecutor.execute_workflow_code_template(
         language=CODE_LANGUAGE, code="Hello {{template}}", inputs={"template": "World"}
     )
@@ -28,7 +32,64 @@ def test_jinja2_with_code_template():
 
 
 def test_jinja2_get_runner_script():
+    """Test that runner script contains required placeholders."""
     runner_script = Jinja2TemplateTransformer.get_runner_script()
-    assert runner_script.count(Jinja2TemplateTransformer._code_placeholder) == 1
+    assert runner_script.count(Jinja2TemplateTransformer._template_b64_placeholder) == 1
     assert runner_script.count(Jinja2TemplateTransformer._inputs_placeholder) == 1
     assert runner_script.count(Jinja2TemplateTransformer._result_tag) == 2
+
+
+def test_jinja2_template_with_special_characters():
+    """
+    Test that templates with special characters (quotes, newlines) render correctly.
+    This is a regression test for issue #26818 where textarea pre-fill values
+    containing special characters would break template rendering.
+    """
+    # Template with triple quotes, single quotes, double quotes, and newlines
+    template = """<html>
+<body>
+    <input value="{{ task.get('Task ID', '') }}"/>
+    <textarea>{{ task.get('Issues', 'No issues reported') }}</textarea>
+    <p>Status: "{{ status }}"</p>
+    <pre>'''code block'''</pre>
+</body>
+</html>"""
+    inputs = {"task": {"Task ID": "TASK-123", "Issues": "Line 1\nLine 2\nLine 3"}, "status": "completed"}
+
+    result = CodeExecutor.execute_workflow_code_template(language=CODE_LANGUAGE, code=template, inputs=inputs)
+
+    # Verify the template rendered correctly with all special characters
+    output = result["result"]
+    assert 'value="TASK-123"' in output
+    assert "<textarea>Line 1\nLine 2\nLine 3</textarea>" in output
+    assert 'Status: "completed"' in output
+    assert "'''code block'''" in output
+
+
+def test_jinja2_template_with_html_textarea_prefill():
+    """
+    Specific test for HTML textarea with Jinja2 variable pre-fill.
+    Verifies fix for issue #26818.
+    """
+    template = "<textarea name='notes'>{{ notes }}</textarea>"
+    notes_content = "This is a multi-line note.\nWith special chars: 'single' and \"double\" quotes."
+    inputs = {"notes": notes_content}
+
+    result = CodeExecutor.execute_workflow_code_template(language=CODE_LANGUAGE, code=template, inputs=inputs)
+
+    expected_output = f"<textarea name='notes'>{notes_content}</textarea>"
+    assert result["result"] == expected_output
+
+
+def test_jinja2_assemble_runner_script_encodes_template():
+    """Test that assemble_runner_script properly base64 encodes the template."""
+    template = "Hello {{ name }}!"
+    inputs = {"name": "World"}
+
+    script = Jinja2TemplateTransformer.assemble_runner_script(template, inputs)
+
+    # The template should be base64 encoded in the script
+    template_b64 = base64.b64encode(template.encode("utf-8")).decode("utf-8")
+    assert template_b64 in script
+    # The raw template should NOT appear in the script (it's encoded)
+    assert "Hello {{ name }}!" not in script
diff --git a/api/tests/test_containers_integration_tests/services/test_trigger_provider_service.py b/api/tests/test_containers_integration_tests/services/test_trigger_provider_service.py
new file mode 100644
index 0000000000..8322b9414e
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/services/test_trigger_provider_service.py
@@ -0,0 +1,682 @@
+from unittest.mock import MagicMock, patch
+
+import pytest
+from faker import Faker
+
+from constants import HIDDEN_VALUE, UNKNOWN_VALUE
+from core.plugin.entities.plugin_daemon import CredentialType
+from core.trigger.entities.entities import Subscription as TriggerSubscriptionEntity
+from extensions.ext_database import db
+from models.provider_ids import TriggerProviderID
+from models.trigger import TriggerSubscription
+from services.trigger.trigger_provider_service import TriggerProviderService
+
+
+class TestTriggerProviderService:
+    """Integration tests for TriggerProviderService using testcontainers."""
+
+    @pytest.fixture
+    def mock_external_service_dependencies(self):
+        """Mock setup for external service dependencies."""
+        with (
+            patch("services.trigger.trigger_provider_service.TriggerManager") as mock_trigger_manager,
+            patch("services.trigger.trigger_provider_service.redis_client") as mock_redis_client,
+            patch("services.trigger.trigger_provider_service.delete_cache_for_subscription") as mock_delete_cache,
+            patch("services.account_service.FeatureService") as mock_account_feature_service,
+        ):
+            # Setup default mock returns
+            mock_provider_controller = MagicMock()
+            mock_provider_controller.get_credential_schema_config.return_value = MagicMock()
+            mock_provider_controller.get_properties_schema.return_value = MagicMock()
+            mock_trigger_manager.get_trigger_provider.return_value = mock_provider_controller
+
+            # Mock redis lock
+            mock_lock = MagicMock()
+            mock_lock.__enter__ = MagicMock(return_value=None)
+            mock_lock.__exit__ = MagicMock(return_value=None)
+            mock_redis_client.lock.return_value = mock_lock
+
+            # Setup account feature service mock
+            mock_account_feature_service.get_system_features.return_value.is_allow_register = True
+
+            yield {
+                "trigger_manager": mock_trigger_manager,
+                "redis_client": mock_redis_client,
+                "delete_cache": mock_delete_cache,
+                "provider_controller": mock_provider_controller,
+                "account_feature_service": mock_account_feature_service,
+            }
+
+    def _create_test_account_and_tenant(self, db_session_with_containers, mock_external_service_dependencies):
+        """
+        Helper method to create a test account and tenant for testing.
+
+        Args:
+            db_session_with_containers: Database session from testcontainers infrastructure
+            mock_external_service_dependencies: Mock dependencies
+
+        Returns:
+            tuple: (account, tenant) - Created account and tenant instances
+        """
+        fake = Faker()
+
+        from services.account_service import AccountService, TenantService
+
+        # Setup mocks for account creation
+        mock_external_service_dependencies[
+            "account_feature_service"
+        ].get_system_features.return_value.is_allow_register = True
+        mock_external_service_dependencies[
+            "trigger_manager"
+        ].get_trigger_provider.return_value = mock_external_service_dependencies["provider_controller"]
+
+        # Create account and tenant
+        account = AccountService.create_account(
+            email=fake.email(),
+            name=fake.name(),
+            interface_language="en-US",
+            password=fake.password(length=12),
+        )
+        TenantService.create_owner_tenant_if_not_exist(account, name=fake.company())
+        tenant = account.current_tenant
+
+        return account, tenant
+
+    def _create_test_subscription(
+        self,
+        db_session_with_containers,
+        tenant_id,
+        user_id,
+        provider_id,
+        credential_type,
+        credentials,
+        mock_external_service_dependencies,
+    ):
+        """
+        Helper method to create a test trigger subscription.
+
+        Args:
+            db_session_with_containers: Database session
+            tenant_id: Tenant ID
+            user_id: User ID
+            provider_id: Provider ID
+            credential_type: Credential type
+            credentials: Credentials dict
+            mock_external_service_dependencies: Mock dependencies
+
+        Returns:
+            TriggerSubscription: Created subscription instance
+        """
+        fake = Faker()
+        from core.helper.provider_cache import NoOpProviderCredentialCache
+        from core.helper.provider_encryption import create_provider_encrypter
+
+        # Use mock provider controller to encrypt credentials
+        provider_controller = mock_external_service_dependencies["provider_controller"]
+
+        # Create encrypter for credentials
+        credential_encrypter, _ = create_provider_encrypter(
+            tenant_id=tenant_id,
+            config=provider_controller.get_credential_schema_config(credential_type),
+            cache=NoOpProviderCredentialCache(),
+        )
+
+        subscription = TriggerSubscription(
+            name=fake.word(),
+            tenant_id=tenant_id,
+            user_id=user_id,
+            provider_id=str(provider_id),
+            endpoint_id=fake.uuid4(),
+            parameters={"param1": "value1"},
+            properties={"prop1": "value1"},
+            credentials=dict(credential_encrypter.encrypt(credentials)),
+            credential_type=credential_type.value,
+            credential_expires_at=-1,
+            expires_at=-1,
+        )
+
+        db.session.add(subscription)
+        db.session.commit()
+        db.session.refresh(subscription)
+
+        return subscription
+
+    def test_rebuild_trigger_subscription_success_with_merged_credentials(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test successful rebuild with credential merging (HIDDEN_VALUE handling).
+
+        This test verifies:
+        - Credentials are properly merged (HIDDEN_VALUE replaced with existing values)
+        - Single transaction wraps all operations
+        - Merged credentials are used for subscribe and update
+        - Database state is correctly updated
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.API_KEY
+
+        # Create initial subscription with credentials
+        original_credentials = {"api_key": "original-secret-key", "api_secret": "original-secret"}
+        subscription = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            original_credentials,
+            mock_external_service_dependencies,
+        )
+
+        # Prepare new credentials with HIDDEN_VALUE for api_key (should keep original)
+        # and new value for api_secret (should update)
+        new_credentials = {
+            "api_key": HIDDEN_VALUE,  # Should be replaced with original
+            "api_secret": "new-secret-value",  # Should be updated
+        }
+
+        # Mock subscribe_trigger to return a new subscription entity
+        new_subscription_entity = TriggerSubscriptionEntity(
+            endpoint=subscription.endpoint_id,
+            parameters={"param1": "value1"},
+            properties={"prop1": "new_prop_value"},
+            expires_at=1234567890,
+        )
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.return_value = new_subscription_entity
+
+        # Mock unsubscribe_trigger
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.return_value = MagicMock()
+
+        # Execute rebuild
+        TriggerProviderService.rebuild_trigger_subscription(
+            tenant_id=tenant.id,
+            provider_id=provider_id,
+            subscription_id=subscription.id,
+            credentials=new_credentials,
+            parameters={"param1": "updated_value"},
+            name="updated_name",
+        )
+
+        # Verify unsubscribe was called with decrypted original credentials
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.assert_called_once()
+        unsubscribe_call_args = mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.call_args
+        assert unsubscribe_call_args.kwargs["tenant_id"] == tenant.id
+        assert unsubscribe_call_args.kwargs["provider_id"] == provider_id
+        assert unsubscribe_call_args.kwargs["credential_type"] == credential_type
+
+        # Verify subscribe was called with merged credentials (api_key from original, api_secret new)
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.assert_called_once()
+        subscribe_call_args = mock_external_service_dependencies["trigger_manager"].subscribe_trigger.call_args
+        subscribe_credentials = subscribe_call_args.kwargs["credentials"]
+        assert subscribe_credentials["api_key"] == original_credentials["api_key"]  # Merged from original
+        assert subscribe_credentials["api_secret"] == "new-secret-value"  # New value
+
+        # Verify database state was updated
+        db.session.refresh(subscription)
+        assert subscription.name == "updated_name"
+        assert subscription.parameters == {"param1": "updated_value"}
+
+        # Verify credentials in DB were updated with merged values (decrypt to check)
+        from core.helper.provider_cache import NoOpProviderCredentialCache
+        from core.helper.provider_encryption import create_provider_encrypter
+
+        # Use mock provider controller to decrypt credentials
+        provider_controller = mock_external_service_dependencies["provider_controller"]
+        credential_encrypter, _ = create_provider_encrypter(
+            tenant_id=tenant.id,
+            config=provider_controller.get_credential_schema_config(credential_type),
+            cache=NoOpProviderCredentialCache(),
+        )
+        decrypted_db_credentials = dict(credential_encrypter.decrypt(subscription.credentials))
+        assert decrypted_db_credentials["api_key"] == original_credentials["api_key"]
+        assert decrypted_db_credentials["api_secret"] == "new-secret-value"
+
+        # Verify cache was cleared
+        mock_external_service_dependencies["delete_cache"].assert_called_once_with(
+            tenant_id=tenant.id,
+            provider_id=subscription.provider_id,
+            subscription_id=subscription.id,
+        )
+
+    def test_rebuild_trigger_subscription_with_all_new_credentials(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test rebuild when all credentials are new (no HIDDEN_VALUE).
+
+        This test verifies:
+        - All new credentials are used when no HIDDEN_VALUE is present
+        - Merged credentials contain only new values
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.API_KEY
+
+        # Create initial subscription
+        original_credentials = {"api_key": "original-key", "api_secret": "original-secret"}
+        subscription = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            original_credentials,
+            mock_external_service_dependencies,
+        )
+
+        # All new credentials (no HIDDEN_VALUE)
+        new_credentials = {
+            "api_key": "completely-new-key",
+            "api_secret": "completely-new-secret",
+        }
+
+        new_subscription_entity = TriggerSubscriptionEntity(
+            endpoint=subscription.endpoint_id,
+            parameters={},
+            properties={},
+            expires_at=-1,
+        )
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.return_value = new_subscription_entity
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.return_value = MagicMock()
+
+        # Execute rebuild
+        TriggerProviderService.rebuild_trigger_subscription(
+            tenant_id=tenant.id,
+            provider_id=provider_id,
+            subscription_id=subscription.id,
+            credentials=new_credentials,
+            parameters={},
+        )
+
+        # Verify subscribe was called with all new credentials
+        subscribe_call_args = mock_external_service_dependencies["trigger_manager"].subscribe_trigger.call_args
+        subscribe_credentials = subscribe_call_args.kwargs["credentials"]
+        assert subscribe_credentials["api_key"] == "completely-new-key"
+        assert subscribe_credentials["api_secret"] == "completely-new-secret"
+
+    def test_rebuild_trigger_subscription_with_all_hidden_values(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test rebuild when all credentials are HIDDEN_VALUE (preserve all existing).
+
+        This test verifies:
+        - All HIDDEN_VALUE credentials are replaced with existing values
+        - Original credentials are preserved
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.API_KEY
+
+        original_credentials = {"api_key": "original-key", "api_secret": "original-secret"}
+        subscription = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            original_credentials,
+            mock_external_service_dependencies,
+        )
+
+        # All HIDDEN_VALUE (should preserve all original)
+        new_credentials = {
+            "api_key": HIDDEN_VALUE,
+            "api_secret": HIDDEN_VALUE,
+        }
+
+        new_subscription_entity = TriggerSubscriptionEntity(
+            endpoint=subscription.endpoint_id,
+            parameters={},
+            properties={},
+            expires_at=-1,
+        )
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.return_value = new_subscription_entity
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.return_value = MagicMock()
+
+        # Execute rebuild
+        TriggerProviderService.rebuild_trigger_subscription(
+            tenant_id=tenant.id,
+            provider_id=provider_id,
+            subscription_id=subscription.id,
+            credentials=new_credentials,
+            parameters={},
+        )
+
+        # Verify subscribe was called with all original credentials
+        subscribe_call_args = mock_external_service_dependencies["trigger_manager"].subscribe_trigger.call_args
+        subscribe_credentials = subscribe_call_args.kwargs["credentials"]
+        assert subscribe_credentials["api_key"] == original_credentials["api_key"]
+        assert subscribe_credentials["api_secret"] == original_credentials["api_secret"]
+
+    def test_rebuild_trigger_subscription_with_missing_key_uses_unknown_value(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test rebuild when HIDDEN_VALUE is used for a key that doesn't exist in original.
+
+        This test verifies:
+        - UNKNOWN_VALUE is used when HIDDEN_VALUE key doesn't exist in original credentials
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.API_KEY
+
+        # Original has only api_key
+        original_credentials = {"api_key": "original-key"}
+        subscription = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            original_credentials,
+            mock_external_service_dependencies,
+        )
+
+        # HIDDEN_VALUE for non-existent key should use UNKNOWN_VALUE
+        new_credentials = {
+            "api_key": HIDDEN_VALUE,
+            "non_existent_key": HIDDEN_VALUE,  # This key doesn't exist in original
+        }
+
+        new_subscription_entity = TriggerSubscriptionEntity(
+            endpoint=subscription.endpoint_id,
+            parameters={},
+            properties={},
+            expires_at=-1,
+        )
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.return_value = new_subscription_entity
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.return_value = MagicMock()
+
+        # Execute rebuild
+        TriggerProviderService.rebuild_trigger_subscription(
+            tenant_id=tenant.id,
+            provider_id=provider_id,
+            subscription_id=subscription.id,
+            credentials=new_credentials,
+            parameters={},
+        )
+
+        # Verify subscribe was called with original api_key and UNKNOWN_VALUE for missing key
+        subscribe_call_args = mock_external_service_dependencies["trigger_manager"].subscribe_trigger.call_args
+        subscribe_credentials = subscribe_call_args.kwargs["credentials"]
+        assert subscribe_credentials["api_key"] == original_credentials["api_key"]
+        assert subscribe_credentials["non_existent_key"] == UNKNOWN_VALUE
+
+    def test_rebuild_trigger_subscription_rollback_on_error(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test that transaction is rolled back on error.
+
+        This test verifies:
+        - Database transaction is rolled back when an error occurs
+        - Original subscription state is preserved
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.API_KEY
+
+        original_credentials = {"api_key": "original-key"}
+        subscription = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            original_credentials,
+            mock_external_service_dependencies,
+        )
+
+        original_name = subscription.name
+        original_parameters = subscription.parameters.copy()
+
+        # Make subscribe_trigger raise an error
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.side_effect = ValueError(
+            "Subscribe failed"
+        )
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.return_value = MagicMock()
+
+        # Execute rebuild and expect error
+        with pytest.raises(ValueError, match="Subscribe failed"):
+            TriggerProviderService.rebuild_trigger_subscription(
+                tenant_id=tenant.id,
+                provider_id=provider_id,
+                subscription_id=subscription.id,
+                credentials={"api_key": "new-key"},
+                parameters={},
+            )
+
+        # Verify subscription state was not changed (rolled back)
+        db.session.refresh(subscription)
+        assert subscription.name == original_name
+        assert subscription.parameters == original_parameters
+
+    def test_rebuild_trigger_subscription_unsubscribe_error_continues(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test that unsubscribe errors are handled gracefully and operation continues.
+
+        This test verifies:
+        - Unsubscribe errors are caught and logged but don't stop the rebuild
+        - Rebuild continues even if unsubscribe fails
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.API_KEY
+
+        original_credentials = {"api_key": "original-key"}
+        subscription = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            original_credentials,
+            mock_external_service_dependencies,
+        )
+
+        # Make unsubscribe_trigger raise an error (should be caught and continue)
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.side_effect = ValueError(
+            "Unsubscribe failed"
+        )
+
+        new_subscription_entity = TriggerSubscriptionEntity(
+            endpoint=subscription.endpoint_id,
+            parameters={},
+            properties={},
+            expires_at=-1,
+        )
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.return_value = new_subscription_entity
+
+        # Execute rebuild - should succeed despite unsubscribe error
+        TriggerProviderService.rebuild_trigger_subscription(
+            tenant_id=tenant.id,
+            provider_id=provider_id,
+            subscription_id=subscription.id,
+            credentials={"api_key": "new-key"},
+            parameters={},
+        )
+
+        # Verify subscribe was still called (operation continued)
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.assert_called_once()
+
+        # Verify subscription was updated
+        db.session.refresh(subscription)
+        assert subscription.parameters == {}
+
+    def test_rebuild_trigger_subscription_subscription_not_found(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test error when subscription is not found.
+
+        This test verifies:
+        - Proper error is raised when subscription doesn't exist
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        fake_subscription_id = fake.uuid4()
+
+        with pytest.raises(ValueError, match="not found"):
+            TriggerProviderService.rebuild_trigger_subscription(
+                tenant_id=tenant.id,
+                provider_id=provider_id,
+                subscription_id=fake_subscription_id,
+                credentials={},
+                parameters={},
+            )
+
+    def test_rebuild_trigger_subscription_provider_not_found(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test error when provider is not found.
+
+        This test verifies:
+        - Proper error is raised when provider doesn't exist
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("non_existent_org/non_existent_plugin/non_existent_provider")
+
+        # Make get_trigger_provider return None
+        mock_external_service_dependencies["trigger_manager"].get_trigger_provider.return_value = None
+
+        with pytest.raises(ValueError, match="Provider.*not found"):
+            TriggerProviderService.rebuild_trigger_subscription(
+                tenant_id=tenant.id,
+                provider_id=provider_id,
+                subscription_id=fake.uuid4(),
+                credentials={},
+                parameters={},
+            )
+
+    def test_rebuild_trigger_subscription_unsupported_credential_type(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test error when credential type is not supported for rebuild.
+
+        This test verifies:
+        - Proper error is raised for unsupported credential types (not OAUTH2 or API_KEY)
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.UNAUTHORIZED  # Not supported
+
+        subscription = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            {},
+            mock_external_service_dependencies,
+        )
+
+        with pytest.raises(ValueError, match="Credential type not supported for rebuild"):
+            TriggerProviderService.rebuild_trigger_subscription(
+                tenant_id=tenant.id,
+                provider_id=provider_id,
+                subscription_id=subscription.id,
+                credentials={},
+                parameters={},
+            )
+
+    def test_rebuild_trigger_subscription_name_uniqueness_check(
+        self, db_session_with_containers, mock_external_service_dependencies
+    ):
+        """
+        Test that name uniqueness is checked when updating name.
+
+        This test verifies:
+        - Error is raised when new name conflicts with existing subscription
+        """
+        fake = Faker()
+        account, tenant = self._create_test_account_and_tenant(
+            db_session_with_containers, mock_external_service_dependencies
+        )
+
+        provider_id = TriggerProviderID("test_org/test_plugin/test_provider")
+        credential_type = CredentialType.API_KEY
+
+        # Create first subscription
+        subscription1 = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            {"api_key": "key1"},
+            mock_external_service_dependencies,
+        )
+
+        # Create second subscription with different name
+        subscription2 = self._create_test_subscription(
+            db_session_with_containers,
+            tenant.id,
+            account.id,
+            provider_id,
+            credential_type,
+            {"api_key": "key2"},
+            mock_external_service_dependencies,
+        )
+
+        new_subscription_entity = TriggerSubscriptionEntity(
+            endpoint=subscription2.endpoint_id,
+            parameters={},
+            properties={},
+            expires_at=-1,
+        )
+        mock_external_service_dependencies["trigger_manager"].subscribe_trigger.return_value = new_subscription_entity
+        mock_external_service_dependencies["trigger_manager"].unsubscribe_trigger.return_value = MagicMock()
+
+        # Try to rename subscription2 to subscription1's name (should fail)
+        with pytest.raises(ValueError, match="already exists"):
+            TriggerProviderService.rebuild_trigger_subscription(
+                tenant_id=tenant.id,
+                provider_id=provider_id,
+                subscription_id=subscription2.id,
+                credentials={"api_key": "new-key"},
+                parameters={},
+                name=subscription1.name,  # Conflicting name
+            )
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/test_containers_integration_tests/workflow/nodes/code_executor/test_code_jinja2.py b/api/tests/test_containers_integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
index c764801170..ddb079f00c 100644
--- a/api/tests/test_containers_integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
+++ b/api/tests/test_containers_integration_tests/workflow/nodes/code_executor/test_code_jinja2.py
@@ -12,10 +12,12 @@ class TestJinja2CodeExecutor(CodeExecutorTestMixin):
         _, Jinja2TemplateTransformer = self.jinja2_imports
 
         template = "Hello {{template}}"
+        # Template must be base64 encoded to match the new safe embedding approach
+        template_b64 = base64.b64encode(template.encode("utf-8")).decode("utf-8")
         inputs = base64.b64encode(b'{"template": "World"}').decode("utf-8")
         code = (
             Jinja2TemplateTransformer.get_runner_script()
-            .replace(Jinja2TemplateTransformer._code_placeholder, template)
+            .replace(Jinja2TemplateTransformer._template_b64_placeholder, template_b64)
             .replace(Jinja2TemplateTransformer._inputs_placeholder, inputs)
         )
         result = CodeExecutor.execute_code(
@@ -37,6 +39,34 @@ class TestJinja2CodeExecutor(CodeExecutorTestMixin):
         _, Jinja2TemplateTransformer = self.jinja2_imports
 
         runner_script = Jinja2TemplateTransformer.get_runner_script()
-        assert runner_script.count(Jinja2TemplateTransformer._code_placeholder) == 1
+        assert runner_script.count(Jinja2TemplateTransformer._template_b64_placeholder) == 1
         assert runner_script.count(Jinja2TemplateTransformer._inputs_placeholder) == 1
         assert runner_script.count(Jinja2TemplateTransformer._result_tag) == 2
+
+    def test_jinja2_template_with_special_characters(self, flask_app_with_containers):
+        """
+        Test that templates with special characters (quotes, newlines) render correctly.
+        This is a regression test for issue #26818 where textarea pre-fill values
+        containing special characters would break template rendering.
+        """
+        CodeExecutor, CodeLanguage = self.code_executor_imports
+
+        # Template with triple quotes, single quotes, double quotes, and newlines
+        template = """<html>
+<body>
+    <input value="{{ task.get('Task ID', '') }}"/>
+    <textarea>{{ task.get('Issues', 'No issues reported') }}</textarea>
+    <p>Status: "{{ status }}"</p>
+    <pre>'''code block'''</pre>
+</body>
+</html>"""
+        inputs = {"task": {"Task ID": "TASK-123", "Issues": "Line 1\nLine 2\nLine 3"}, "status": "completed"}
+
+        result = CodeExecutor.execute_workflow_code_template(language=CodeLanguage.JINJA2, code=template, inputs=inputs)
+
+        # Verify the template rendered correctly with all special characters
+        output = result["result"]
+        assert 'value="TASK-123"' in output
+        assert "<textarea>Line 1\nLine 2\nLine 3</textarea>" in output
+        assert 'Status: "completed"' in output
+        assert "'''code block'''" in output
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/core/rag/datasource/vdb/pgvector/__init__.py b/api/tests/unit_tests/core/rag/datasource/vdb/pgvector/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/unit_tests/core/rag/datasource/vdb/pgvector/test_pgvector.py b/api/tests/unit_tests/core/rag/datasource/vdb/pgvector/test_pgvector.py
new file mode 100644
index 0000000000..4998a9858f
--- /dev/null
+++ b/api/tests/unit_tests/core/rag/datasource/vdb/pgvector/test_pgvector.py
@@ -0,0 +1,327 @@
+import unittest
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from core.rag.datasource.vdb.pgvector.pgvector import (
+    PGVector,
+    PGVectorConfig,
+)
+
+
+class TestPGVector(unittest.TestCase):
+    def setUp(self):
+        self.config = PGVectorConfig(
+            host="localhost",
+            port=5432,
+            user="test_user",
+            password="test_password",
+            database="test_db",
+            min_connection=1,
+            max_connection=5,
+            pg_bigm=False,
+        )
+        self.collection_name = "test_collection"
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    def test_init(self, mock_pool_class):
+        """Test PGVector initialization."""
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        pgvector = PGVector(self.collection_name, self.config)
+
+        assert pgvector._collection_name == self.collection_name
+        assert pgvector.table_name == f"embedding_{self.collection_name}"
+        assert pgvector.get_type() == "pgvector"
+        assert pgvector.pool is not None
+        assert pgvector.pg_bigm is False
+        assert pgvector.index_hash is not None
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    def test_init_with_pg_bigm(self, mock_pool_class):
+        """Test PGVector initialization with pg_bigm enabled."""
+        config = PGVectorConfig(
+            host="localhost",
+            port=5432,
+            user="test_user",
+            password="test_password",
+            database="test_db",
+            min_connection=1,
+            max_connection=5,
+            pg_bigm=True,
+        )
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        pgvector = PGVector(self.collection_name, config)
+
+        assert pgvector.pg_bigm is True
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.redis_client")
+    def test_create_collection_basic(self, mock_redis, mock_pool_class):
+        """Test basic collection creation."""
+        # Mock Redis operations
+        mock_lock = MagicMock()
+        mock_lock.__enter__ = MagicMock()
+        mock_lock.__exit__ = MagicMock()
+        mock_redis.lock.return_value = mock_lock
+        mock_redis.get.return_value = None
+        mock_redis.set.return_value = None
+
+        # Mock the connection pool
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        # Mock connection and cursor
+        mock_conn = MagicMock()
+        mock_cursor = MagicMock()
+        mock_pool.getconn.return_value = mock_conn
+        mock_conn.cursor.return_value = mock_cursor
+        mock_cursor.fetchone.return_value = [1]  # vector extension exists
+
+        pgvector = PGVector(self.collection_name, self.config)
+        pgvector._create_collection(1536)
+
+        # Verify SQL execution calls
+        assert mock_cursor.execute.called
+
+        # Check that CREATE TABLE was called with correct dimension
+        create_table_calls = [call for call in mock_cursor.execute.call_args_list if "CREATE TABLE" in str(call)]
+        assert len(create_table_calls) == 1
+        assert "vector(1536)" in create_table_calls[0][0][0]
+
+        # Check that CREATE INDEX was called (dimension <= 2000)
+        create_index_calls = [
+            call for call in mock_cursor.execute.call_args_list if "CREATE INDEX" in str(call) and "hnsw" in str(call)
+        ]
+        assert len(create_index_calls) == 1
+
+        # Verify Redis cache was set
+        mock_redis.set.assert_called_once()
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.redis_client")
+    def test_create_collection_with_large_dimension(self, mock_redis, mock_pool_class):
+        """Test collection creation with dimension > 2000 (no HNSW index)."""
+        # Mock Redis operations
+        mock_lock = MagicMock()
+        mock_lock.__enter__ = MagicMock()
+        mock_lock.__exit__ = MagicMock()
+        mock_redis.lock.return_value = mock_lock
+        mock_redis.get.return_value = None
+        mock_redis.set.return_value = None
+
+        # Mock the connection pool
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        # Mock connection and cursor
+        mock_conn = MagicMock()
+        mock_cursor = MagicMock()
+        mock_pool.getconn.return_value = mock_conn
+        mock_conn.cursor.return_value = mock_cursor
+        mock_cursor.fetchone.return_value = [1]  # vector extension exists
+
+        pgvector = PGVector(self.collection_name, self.config)
+        pgvector._create_collection(3072)  # Dimension > 2000
+
+        # Check that CREATE TABLE was called
+        create_table_calls = [call for call in mock_cursor.execute.call_args_list if "CREATE TABLE" in str(call)]
+        assert len(create_table_calls) == 1
+        assert "vector(3072)" in create_table_calls[0][0][0]
+
+        # Check that HNSW index was NOT created (dimension > 2000)
+        hnsw_index_calls = [call for call in mock_cursor.execute.call_args_list if "hnsw" in str(call)]
+        assert len(hnsw_index_calls) == 0
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.redis_client")
+    def test_create_collection_with_pg_bigm(self, mock_redis, mock_pool_class):
+        """Test collection creation with pg_bigm enabled."""
+        config = PGVectorConfig(
+            host="localhost",
+            port=5432,
+            user="test_user",
+            password="test_password",
+            database="test_db",
+            min_connection=1,
+            max_connection=5,
+            pg_bigm=True,
+        )
+
+        # Mock Redis operations
+        mock_lock = MagicMock()
+        mock_lock.__enter__ = MagicMock()
+        mock_lock.__exit__ = MagicMock()
+        mock_redis.lock.return_value = mock_lock
+        mock_redis.get.return_value = None
+        mock_redis.set.return_value = None
+
+        # Mock the connection pool
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        # Mock connection and cursor
+        mock_conn = MagicMock()
+        mock_cursor = MagicMock()
+        mock_pool.getconn.return_value = mock_conn
+        mock_conn.cursor.return_value = mock_cursor
+        mock_cursor.fetchone.return_value = [1]  # vector extension exists
+
+        pgvector = PGVector(self.collection_name, config)
+        pgvector._create_collection(1536)
+
+        # Check that pg_bigm index was created
+        bigm_index_calls = [call for call in mock_cursor.execute.call_args_list if "gin_bigm_ops" in str(call)]
+        assert len(bigm_index_calls) == 1
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.redis_client")
+    def test_create_collection_creates_vector_extension(self, mock_redis, mock_pool_class):
+        """Test that vector extension is created if it doesn't exist."""
+        # Mock Redis operations
+        mock_lock = MagicMock()
+        mock_lock.__enter__ = MagicMock()
+        mock_lock.__exit__ = MagicMock()
+        mock_redis.lock.return_value = mock_lock
+        mock_redis.get.return_value = None
+        mock_redis.set.return_value = None
+
+        # Mock the connection pool
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        # Mock connection and cursor
+        mock_conn = MagicMock()
+        mock_cursor = MagicMock()
+        mock_pool.getconn.return_value = mock_conn
+        mock_conn.cursor.return_value = mock_cursor
+        # First call: vector extension doesn't exist
+        mock_cursor.fetchone.return_value = None
+
+        pgvector = PGVector(self.collection_name, self.config)
+        pgvector._create_collection(1536)
+
+        # Check that CREATE EXTENSION was called
+        create_extension_calls = [
+            call for call in mock_cursor.execute.call_args_list if "CREATE EXTENSION vector" in str(call)
+        ]
+        assert len(create_extension_calls) == 1
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.redis_client")
+    def test_create_collection_with_cache_hit(self, mock_redis, mock_pool_class):
+        """Test that collection creation is skipped when cache exists."""
+        # Mock Redis operations - cache exists
+        mock_lock = MagicMock()
+        mock_lock.__enter__ = MagicMock()
+        mock_lock.__exit__ = MagicMock()
+        mock_redis.lock.return_value = mock_lock
+        mock_redis.get.return_value = 1  # Cache exists
+
+        # Mock the connection pool
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        # Mock connection and cursor
+        mock_conn = MagicMock()
+        mock_cursor = MagicMock()
+        mock_pool.getconn.return_value = mock_conn
+        mock_conn.cursor.return_value = mock_cursor
+
+        pgvector = PGVector(self.collection_name, self.config)
+        pgvector._create_collection(1536)
+
+        # Check that no SQL was executed (early return due to cache)
+        assert mock_cursor.execute.call_count == 0
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.redis_client")
+    def test_create_collection_with_redis_lock(self, mock_redis, mock_pool_class):
+        """Test that Redis lock is used during collection creation."""
+        # Mock Redis operations
+        mock_lock = MagicMock()
+        mock_lock.__enter__ = MagicMock()
+        mock_lock.__exit__ = MagicMock()
+        mock_redis.lock.return_value = mock_lock
+        mock_redis.get.return_value = None
+        mock_redis.set.return_value = None
+
+        # Mock the connection pool
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        # Mock connection and cursor
+        mock_conn = MagicMock()
+        mock_cursor = MagicMock()
+        mock_pool.getconn.return_value = mock_conn
+        mock_conn.cursor.return_value = mock_cursor
+        mock_cursor.fetchone.return_value = [1]  # vector extension exists
+
+        pgvector = PGVector(self.collection_name, self.config)
+        pgvector._create_collection(1536)
+
+        # Verify Redis lock was acquired with correct lock name
+        mock_redis.lock.assert_called_once_with("vector_indexing_test_collection_lock", timeout=20)
+
+        # Verify lock context manager was entered and exited
+        mock_lock.__enter__.assert_called_once()
+        mock_lock.__exit__.assert_called_once()
+
+    @patch("core.rag.datasource.vdb.pgvector.pgvector.psycopg2.pool.SimpleConnectionPool")
+    def test_get_cursor_context_manager(self, mock_pool_class):
+        """Test that _get_cursor properly manages connection lifecycle."""
+        mock_pool = MagicMock()
+        mock_pool_class.return_value = mock_pool
+
+        mock_conn = MagicMock()
+        mock_cursor = MagicMock()
+        mock_pool.getconn.return_value = mock_conn
+        mock_conn.cursor.return_value = mock_cursor
+
+        pgvector = PGVector(self.collection_name, self.config)
+
+        with pgvector._get_cursor() as cur:
+            assert cur == mock_cursor
+
+        # Verify connection lifecycle methods were called
+        mock_pool.getconn.assert_called_once()
+        mock_cursor.close.assert_called_once()
+        mock_conn.commit.assert_called_once()
+        mock_pool.putconn.assert_called_once_with(mock_conn)
+
+
+@pytest.mark.parametrize(
+    "invalid_config_override",
+    [
+        {"host": ""},  # Test empty host
+        {"port": 0},  # Test invalid port
+        {"user": ""},  # Test empty user
+        {"password": ""},  # Test empty password
+        {"database": ""},  # Test empty database
+        {"min_connection": 0},  # Test invalid min_connection
+        {"max_connection": 0},  # Test invalid max_connection
+        {"min_connection": 10, "max_connection": 5},  # Test min > max
+    ],
+)
+def test_config_validation_parametrized(invalid_config_override):
+    """Test configuration validation for various invalid inputs using parametrize."""
+    config = {
+        "host": "localhost",
+        "port": 5432,
+        "user": "test_user",
+        "password": "test_password",
+        "database": "test_db",
+        "min_connection": 1,
+        "max_connection": 5,
+    }
+    config.update(invalid_config_override)
+
+    with pytest.raises(ValueError):
+        PGVectorConfig(**config)
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_metadata_filter.py b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_metadata_filter.py
new file mode 100644
index 0000000000..07d6e51e4b
--- /dev/null
+++ b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_metadata_filter.py
@@ -0,0 +1,873 @@
+"""
+Unit tests for DatasetRetrieval.process_metadata_filter_func.
+
+This module provides comprehensive test coverage for the process_metadata_filter_func
+method in the DatasetRetrieval class, which is responsible for building SQLAlchemy
+filter expressions based on metadata filtering conditions.
+
+Conditions Tested:
+==================
+1. **String Conditions**: contains, not contains, start with, end with
+2. **Equality Conditions**: is / =, is not / ≠
+3. **Null Conditions**: empty, not empty
+4. **Numeric Comparisons**: before / <, after / >, ≤ / <=, ≥ / >=
+5. **List Conditions**: in
+6. **Edge Cases**: None values, different data types (str, int, float)
+
+Test Architecture:
+==================
+- Direct instantiation of DatasetRetrieval
+- Mocking of DatasetDocument model attributes
+- Verification of SQLAlchemy filter expressions
+- Follows Arrange-Act-Assert (AAA) pattern
+
+Running Tests:
+==============
+    # Run all tests in this module
+    uv run --project api pytest \
+        api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_metadata_filter.py -v
+
+    # Run a specific test
+    uv run --project api pytest \
+        api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_metadata_filter.py::\
+TestProcessMetadataFilterFunc::test_contains_condition -v
+"""
+
+from unittest.mock import MagicMock
+
+import pytest
+
+from core.rag.retrieval.dataset_retrieval import DatasetRetrieval
+
+
+class TestProcessMetadataFilterFunc:
+    """
+    Comprehensive test suite for process_metadata_filter_func method.
+
+    This test class validates all metadata filtering conditions supported by
+    the DatasetRetrieval class, including string operations, numeric comparisons,
+    null checks, and list operations.
+
+    Method Signature:
+    ==================
+    def process_metadata_filter_func(
+        self, sequence: int, condition: str, metadata_name: str, value: Any | None, filters: list
+    ) -> list:
+
+    The method builds SQLAlchemy filter expressions by:
+    1. Validating value is not None (except for empty/not empty conditions)
+    2. Using DatasetDocument.doc_metadata JSON field operations
+    3. Adding appropriate SQLAlchemy expressions to the filters list
+    4. Returning the updated filters list
+
+    Mocking Strategy:
+    ==================
+    - Mock DatasetDocument.doc_metadata to avoid database dependencies
+    - Verify filter expressions are created correctly
+    - Test with various data types (str, int, float, list)
+    """
+
+    @pytest.fixture
+    def retrieval(self):
+        """
+        Create a DatasetRetrieval instance for testing.
+
+        Returns:
+            DatasetRetrieval: Instance to test process_metadata_filter_func
+        """
+        return DatasetRetrieval()
+
+    @pytest.fixture
+    def mock_doc_metadata(self):
+        """
+        Mock the DatasetDocument.doc_metadata JSON field.
+
+        The method uses DatasetDocument.doc_metadata[metadata_name] to access
+        JSON fields. We mock this to avoid database dependencies.
+
+        Returns:
+            Mock: Mocked doc_metadata attribute
+        """
+        mock_metadata_field = MagicMock()
+
+        # Create mock for string access
+        mock_string_access = MagicMock()
+        mock_string_access.like = MagicMock()
+        mock_string_access.notlike = MagicMock()
+        mock_string_access.__eq__ = MagicMock(return_value=MagicMock())
+        mock_string_access.__ne__ = MagicMock(return_value=MagicMock())
+        mock_string_access.in_ = MagicMock(return_value=MagicMock())
+
+        # Create mock for float access (for numeric comparisons)
+        mock_float_access = MagicMock()
+        mock_float_access.__eq__ = MagicMock(return_value=MagicMock())
+        mock_float_access.__ne__ = MagicMock(return_value=MagicMock())
+        mock_float_access.__lt__ = MagicMock(return_value=MagicMock())
+        mock_float_access.__gt__ = MagicMock(return_value=MagicMock())
+        mock_float_access.__le__ = MagicMock(return_value=MagicMock())
+        mock_float_access.__ge__ = MagicMock(return_value=MagicMock())
+
+        # Create mock for null checks
+        mock_null_access = MagicMock()
+        mock_null_access.is_ = MagicMock(return_value=MagicMock())
+        mock_null_access.isnot = MagicMock(return_value=MagicMock())
+
+        # Setup __getitem__ to return appropriate mock based on usage
+        def getitem_side_effect(name):
+            if name in ["author", "title", "category"]:
+                return mock_string_access
+            elif name in ["year", "price", "rating"]:
+                return mock_float_access
+            else:
+                return mock_string_access
+
+        mock_metadata_field.__getitem__ = MagicMock(side_effect=getitem_side_effect)
+        mock_metadata_field.as_string.return_value = mock_string_access
+        mock_metadata_field.as_float.return_value = mock_float_access
+        mock_metadata_field[metadata_name:str].is_ = mock_null_access.is_
+        mock_metadata_field[metadata_name:str].isnot = mock_null_access.isnot
+
+        return mock_metadata_field
+
+    # ==================== String Condition Tests ====================
+
+    def test_contains_condition_string_value(self, retrieval):
+        """
+        Test 'contains' condition with string value.
+
+        Verifies:
+        - Filters list is populated with LIKE expression
+        - Pattern matching uses %value% syntax
+        """
+        filters = []
+        sequence = 0
+        condition = "contains"
+        metadata_name = "author"
+        value = "John"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_not_contains_condition(self, retrieval):
+        """
+        Test 'not contains' condition.
+
+        Verifies:
+        - Filters list is populated with NOT LIKE expression
+        - Pattern matching uses %value% syntax with negation
+        """
+        filters = []
+        sequence = 0
+        condition = "not contains"
+        metadata_name = "title"
+        value = "banned"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_start_with_condition(self, retrieval):
+        """
+        Test 'start with' condition.
+
+        Verifies:
+        - Filters list is populated with LIKE expression
+        - Pattern matching uses value% syntax
+        """
+        filters = []
+        sequence = 0
+        condition = "start with"
+        metadata_name = "category"
+        value = "tech"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_end_with_condition(self, retrieval):
+        """
+        Test 'end with' condition.
+
+        Verifies:
+        - Filters list is populated with LIKE expression
+        - Pattern matching uses %value syntax
+        """
+        filters = []
+        sequence = 0
+        condition = "end with"
+        metadata_name = "filename"
+        value = ".pdf"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    # ==================== Equality Condition Tests ====================
+
+    def test_is_condition_with_string_value(self, retrieval):
+        """
+        Test 'is' (=) condition with string value.
+
+        Verifies:
+        - Filters list is populated with equality expression
+        - String comparison is used
+        """
+        filters = []
+        sequence = 0
+        condition = "is"
+        metadata_name = "author"
+        value = "Jane Doe"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_equals_condition_with_string_value(self, retrieval):
+        """
+        Test '=' condition with string value.
+
+        Verifies:
+        - Same behavior as 'is' condition
+        - String comparison is used
+        """
+        filters = []
+        sequence = 0
+        condition = "="
+        metadata_name = "category"
+        value = "technology"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_is_condition_with_int_value(self, retrieval):
+        """
+        Test 'is' condition with integer value.
+
+        Verifies:
+        - Numeric comparison is used
+        - as_float() is called on the metadata field
+        """
+        filters = []
+        sequence = 0
+        condition = "is"
+        metadata_name = "year"
+        value = 2023
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_is_condition_with_float_value(self, retrieval):
+        """
+        Test 'is' condition with float value.
+
+        Verifies:
+        - Numeric comparison is used
+        - as_float() is called on the metadata field
+        """
+        filters = []
+        sequence = 0
+        condition = "is"
+        metadata_name = "price"
+        value = 19.99
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_is_not_condition_with_string_value(self, retrieval):
+        """
+        Test 'is not' (≠) condition with string value.
+
+        Verifies:
+        - Filters list is populated with inequality expression
+        - String comparison is used
+        """
+        filters = []
+        sequence = 0
+        condition = "is not"
+        metadata_name = "author"
+        value = "Unknown"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_not_equals_condition(self, retrieval):
+        """
+        Test '≠' condition with string value.
+
+        Verifies:
+        - Same behavior as 'is not' condition
+        - Inequality expression is used
+        """
+        filters = []
+        sequence = 0
+        condition = "≠"
+        metadata_name = "category"
+        value = "archived"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_is_not_condition_with_numeric_value(self, retrieval):
+        """
+        Test 'is not' condition with numeric value.
+
+        Verifies:
+        - Numeric inequality comparison is used
+        - as_float() is called on the metadata field
+        """
+        filters = []
+        sequence = 0
+        condition = "is not"
+        metadata_name = "year"
+        value = 2000
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    # ==================== Null Condition Tests ====================
+
+    def test_empty_condition(self, retrieval):
+        """
+        Test 'empty' condition (null check).
+
+        Verifies:
+        - Filters list is populated with IS NULL expression
+        - Value can be None for this condition
+        """
+        filters = []
+        sequence = 0
+        condition = "empty"
+        metadata_name = "author"
+        value = None
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_not_empty_condition(self, retrieval):
+        """
+        Test 'not empty' condition (not null check).
+
+        Verifies:
+        - Filters list is populated with IS NOT NULL expression
+        - Value can be None for this condition
+        """
+        filters = []
+        sequence = 0
+        condition = "not empty"
+        metadata_name = "description"
+        value = None
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    # ==================== Numeric Comparison Tests ====================
+
+    def test_before_condition(self, retrieval):
+        """
+        Test 'before' (<) condition.
+
+        Verifies:
+        - Filters list is populated with less than expression
+        - Numeric comparison is used
+        """
+        filters = []
+        sequence = 0
+        condition = "before"
+        metadata_name = "year"
+        value = 2020
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_less_than_condition(self, retrieval):
+        """
+        Test '<' condition.
+
+        Verifies:
+        - Same behavior as 'before' condition
+        - Less than expression is used
+        """
+        filters = []
+        sequence = 0
+        condition = "<"
+        metadata_name = "price"
+        value = 100.0
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_after_condition(self, retrieval):
+        """
+        Test 'after' (>) condition.
+
+        Verifies:
+        - Filters list is populated with greater than expression
+        - Numeric comparison is used
+        """
+        filters = []
+        sequence = 0
+        condition = "after"
+        metadata_name = "year"
+        value = 2020
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_greater_than_condition(self, retrieval):
+        """
+        Test '>' condition.
+
+        Verifies:
+        - Same behavior as 'after' condition
+        - Greater than expression is used
+        """
+        filters = []
+        sequence = 0
+        condition = ">"
+        metadata_name = "rating"
+        value = 4.5
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_less_than_or_equal_condition_unicode(self, retrieval):
+        """
+        Test '≤' condition.
+
+        Verifies:
+        - Filters list is populated with less than or equal expression
+        - Numeric comparison is used
+        """
+        filters = []
+        sequence = 0
+        condition = "≤"
+        metadata_name = "price"
+        value = 50.0
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_less_than_or_equal_condition_ascii(self, retrieval):
+        """
+        Test '<=' condition.
+
+        Verifies:
+        - Same behavior as '≤' condition
+        - Less than or equal expression is used
+        """
+        filters = []
+        sequence = 0
+        condition = "<="
+        metadata_name = "year"
+        value = 2023
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_greater_than_or_equal_condition_unicode(self, retrieval):
+        """
+        Test '≥' condition.
+
+        Verifies:
+        - Filters list is populated with greater than or equal expression
+        - Numeric comparison is used
+        """
+        filters = []
+        sequence = 0
+        condition = "≥"
+        metadata_name = "rating"
+        value = 3.5
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_greater_than_or_equal_condition_ascii(self, retrieval):
+        """
+        Test '>=' condition.
+
+        Verifies:
+        - Same behavior as '≥' condition
+        - Greater than or equal expression is used
+        """
+        filters = []
+        sequence = 0
+        condition = ">="
+        metadata_name = "year"
+        value = 2000
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    # ==================== List/In Condition Tests ====================
+
+    def test_in_condition_with_comma_separated_string(self, retrieval):
+        """
+        Test 'in' condition with comma-separated string value.
+
+        Verifies:
+        - String is split into list
+        - Whitespace is trimmed from each value
+        - IN expression is created
+        """
+        filters = []
+        sequence = 0
+        condition = "in"
+        metadata_name = "category"
+        value = "tech, science,  AI  "
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_in_condition_with_list_value(self, retrieval):
+        """
+        Test 'in' condition with list value.
+
+        Verifies:
+        - List is processed correctly
+        - None values are filtered out
+        - IN expression is created with valid values
+        """
+        filters = []
+        sequence = 0
+        condition = "in"
+        metadata_name = "tags"
+        value = ["python", "javascript", None, "golang"]
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_in_condition_with_tuple_value(self, retrieval):
+        """
+        Test 'in' condition with tuple value.
+
+        Verifies:
+        - Tuple is processed like a list
+        - IN expression is created
+        """
+        filters = []
+        sequence = 0
+        condition = "in"
+        metadata_name = "category"
+        value = ("tech", "science", "ai")
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_in_condition_with_empty_string(self, retrieval):
+        """
+        Test 'in' condition with empty string value.
+
+        Verifies:
+        - Empty string results in literal(False) filter
+        - No valid values to match
+        """
+        filters = []
+        sequence = 0
+        condition = "in"
+        metadata_name = "category"
+        value = ""
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+        # Verify it's a literal(False) expression
+        # This is a bit tricky to test without access to the actual expression
+
+    def test_in_condition_with_only_whitespace(self, retrieval):
+        """
+        Test 'in' condition with whitespace-only string value.
+
+        Verifies:
+        - Whitespace-only string results in literal(False) filter
+        - All values are stripped and filtered out
+        """
+        filters = []
+        sequence = 0
+        condition = "in"
+        metadata_name = "category"
+        value = "   ,   ,   "
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_in_condition_with_single_string(self, retrieval):
+        """
+        Test 'in' condition with single non-comma string.
+
+        Verifies:
+        - Single string is treated as single-item list
+        - IN expression is created with one value
+        """
+        filters = []
+        sequence = 0
+        condition = "in"
+        metadata_name = "category"
+        value = "technology"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    # ==================== Edge Case Tests ====================
+
+    def test_none_value_with_non_empty_condition(self, retrieval):
+        """
+        Test None value with conditions that require value.
+
+        Verifies:
+        - Original filters list is returned unchanged
+        - No filter is added for None values (except empty/not empty)
+        """
+        filters = []
+        sequence = 0
+        condition = "contains"
+        metadata_name = "author"
+        value = None
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 0  # No filter added
+
+    def test_none_value_with_equals_condition(self, retrieval):
+        """
+        Test None value with 'is' (=) condition.
+
+        Verifies:
+        - Original filters list is returned unchanged
+        - No filter is added for None values
+        """
+        filters = []
+        sequence = 0
+        condition = "is"
+        metadata_name = "author"
+        value = None
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 0
+
+    def test_none_value_with_numeric_condition(self, retrieval):
+        """
+        Test None value with numeric comparison condition.
+
+        Verifies:
+        - Original filters list is returned unchanged
+        - No filter is added for None values
+        """
+        filters = []
+        sequence = 0
+        condition = ">"
+        metadata_name = "year"
+        value = None
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 0
+
+    def test_existing_filters_preserved(self, retrieval):
+        """
+        Test that existing filters are preserved.
+
+        Verifies:
+        - Existing filters in the list are not removed
+        - New filters are appended to the list
+        """
+        existing_filter = MagicMock()
+        filters = [existing_filter]
+        sequence = 0
+        condition = "contains"
+        metadata_name = "author"
+        value = "test"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 2
+        assert filters[0] == existing_filter
+
+    def test_multiple_filters_accumulated(self, retrieval):
+        """
+        Test multiple calls to accumulate filters.
+
+        Verifies:
+        - Each call adds a new filter to the list
+        - All filters are preserved across calls
+        """
+        filters = []
+
+        # First filter
+        retrieval.process_metadata_filter_func(0, "contains", "author", "John", filters)
+        assert len(filters) == 1
+
+        # Second filter
+        retrieval.process_metadata_filter_func(1, ">", "year", 2020, filters)
+        assert len(filters) == 2
+
+        # Third filter
+        retrieval.process_metadata_filter_func(2, "is", "category", "tech", filters)
+        assert len(filters) == 3
+
+    def test_unknown_condition(self, retrieval):
+        """
+        Test unknown/unsupported condition.
+
+        Verifies:
+        - Original filters list is returned unchanged
+        - No filter is added for unknown conditions
+        """
+        filters = []
+        sequence = 0
+        condition = "unknown_condition"
+        metadata_name = "author"
+        value = "test"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 0
+
+    def test_empty_string_value_with_contains(self, retrieval):
+        """
+        Test empty string value with 'contains' condition.
+
+        Verifies:
+        - Filter is added even with empty string
+        - LIKE expression is created
+        """
+        filters = []
+        sequence = 0
+        condition = "contains"
+        metadata_name = "author"
+        value = ""
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_special_characters_in_value(self, retrieval):
+        """
+        Test special characters in value string.
+
+        Verifies:
+        - Special characters are handled in value
+        - LIKE expression is created correctly
+        """
+        filters = []
+        sequence = 0
+        condition = "contains"
+        metadata_name = "title"
+        value = "C++ & Python's features"
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_zero_value_with_numeric_condition(self, retrieval):
+        """
+        Test zero value with numeric comparison condition.
+
+        Verifies:
+        - Zero is treated as valid value
+        - Numeric comparison is performed
+        """
+        filters = []
+        sequence = 0
+        condition = ">"
+        metadata_name = "price"
+        value = 0
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_negative_value_with_numeric_condition(self, retrieval):
+        """
+        Test negative value with numeric comparison condition.
+
+        Verifies:
+        - Negative numbers are handled correctly
+        - Numeric comparison is performed
+        """
+        filters = []
+        sequence = 0
+        condition = "<"
+        metadata_name = "temperature"
+        value = -10.5
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
+
+    def test_float_value_with_integer_comparison(self, retrieval):
+        """
+        Test float value with numeric comparison condition.
+
+        Verifies:
+        - Float values work correctly
+        - Numeric comparison is performed
+        """
+        filters = []
+        sequence = 0
+        condition = ">="
+        metadata_name = "rating"
+        value = 4.5
+
+        result = retrieval.process_metadata_filter_func(sequence, condition, metadata_name, value, filters)
+
+        assert result == filters
+        assert len(filters) == 1
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/tests/unit_tests/tools/test_mcp_tool.py b/api/tests/unit_tests/tools/test_mcp_tool.py
new file mode 100644
index 0000000000..a527773e4e
--- /dev/null
+++ b/api/tests/unit_tests/tools/test_mcp_tool.py
@@ -0,0 +1,122 @@
+import base64
+from unittest.mock import Mock, patch
+
+import pytest
+
+from core.mcp.types import (
+    AudioContent,
+    BlobResourceContents,
+    CallToolResult,
+    EmbeddedResource,
+    ImageContent,
+    TextResourceContents,
+)
+from core.tools.__base.tool_runtime import ToolRuntime
+from core.tools.entities.common_entities import I18nObject
+from core.tools.entities.tool_entities import ToolEntity, ToolIdentity, ToolInvokeMessage
+from core.tools.mcp_tool.tool import MCPTool
+
+
+def _make_mcp_tool(output_schema: dict | None = None) -> MCPTool:
+    identity = ToolIdentity(
+        author="test",
+        name="test_mcp_tool",
+        label=I18nObject(en_US="Test MCP Tool", zh_Hans="测试MCP工具"),
+        provider="test_provider",
+    )
+    entity = ToolEntity(identity=identity, output_schema=output_schema or {})
+    runtime = Mock(spec=ToolRuntime)
+    runtime.credentials = {}
+    return MCPTool(
+        entity=entity,
+        runtime=runtime,
+        tenant_id="test_tenant",
+        icon="",
+        server_url="https://server.invalid",
+        provider_id="provider_1",
+        headers={},
+    )
+
+
+class TestMCPToolInvoke:
+    @pytest.mark.parametrize(
+        ("content_factory", "mime_type"),
+        [
+            (
+                lambda b64, mt: ImageContent(type="image", data=b64, mimeType=mt),
+                "image/png",
+            ),
+            (
+                lambda b64, mt: AudioContent(type="audio", data=b64, mimeType=mt),
+                "audio/mpeg",
+            ),
+        ],
+    )
+    def test_invoke_image_or_audio_yields_blob(self, content_factory, mime_type) -> None:
+        tool = _make_mcp_tool()
+        raw = b"\x00\x01test-bytes\x02"
+        b64 = base64.b64encode(raw).decode()
+        content = content_factory(b64, mime_type)
+        result = CallToolResult(content=[content])
+
+        with patch.object(tool, "invoke_remote_mcp_tool", return_value=result):
+            messages = list(tool._invoke(user_id="test_user", tool_parameters={}))
+
+        assert len(messages) == 1
+        msg = messages[0]
+        assert msg.type == ToolInvokeMessage.MessageType.BLOB
+        assert isinstance(msg.message, ToolInvokeMessage.BlobMessage)
+        assert msg.message.blob == raw
+        assert msg.meta == {"mime_type": mime_type}
+
+    def test_invoke_embedded_text_resource_yields_text(self) -> None:
+        tool = _make_mcp_tool()
+        text_resource = TextResourceContents(uri="file://test.txt", mimeType="text/plain", text="hello world")
+        content = EmbeddedResource(type="resource", resource=text_resource)
+        result = CallToolResult(content=[content])
+
+        with patch.object(tool, "invoke_remote_mcp_tool", return_value=result):
+            messages = list(tool._invoke(user_id="test_user", tool_parameters={}))
+
+        assert len(messages) == 1
+        msg = messages[0]
+        assert msg.type == ToolInvokeMessage.MessageType.TEXT
+        assert isinstance(msg.message, ToolInvokeMessage.TextMessage)
+        assert msg.message.text == "hello world"
+
+    @pytest.mark.parametrize(
+        ("mime_type", "expected_mime"),
+        [("application/pdf", "application/pdf"), (None, "application/octet-stream")],
+    )
+    def test_invoke_embedded_blob_resource_yields_blob(self, mime_type, expected_mime) -> None:
+        tool = _make_mcp_tool()
+        raw = b"binary-data"
+        b64 = base64.b64encode(raw).decode()
+        blob_resource = BlobResourceContents(uri="file://doc.bin", mimeType=mime_type, blob=b64)
+        content = EmbeddedResource(type="resource", resource=blob_resource)
+        result = CallToolResult(content=[content])
+
+        with patch.object(tool, "invoke_remote_mcp_tool", return_value=result):
+            messages = list(tool._invoke(user_id="test_user", tool_parameters={}))
+
+        assert len(messages) == 1
+        msg = messages[0]
+        assert msg.type == ToolInvokeMessage.MessageType.BLOB
+        assert isinstance(msg.message, ToolInvokeMessage.BlobMessage)
+        assert msg.message.blob == raw
+        assert msg.meta == {"mime_type": expected_mime}
+
+    def test_invoke_yields_variables_when_structured_content_and_schema(self) -> None:
+        tool = _make_mcp_tool(output_schema={"type": "object"})
+        result = CallToolResult(content=[], structuredContent={"a": 1, "b": "x"})
+
+        with patch.object(tool, "invoke_remote_mcp_tool", return_value=result):
+            messages = list(tool._invoke(user_id="test_user", tool_parameters={}))
+
+        # Expect two variable messages corresponding to keys a and b
+        assert len(messages) == 2
+        var_msgs = [m for m in messages if isinstance(m.message, ToolInvokeMessage.VariableMessage)]
+        assert {m.message.variable_name for m in var_msgs} == {"a", "b"}
+        # Validate values
+        values = {m.message.variable_name: m.message.variable_value for m in var_msgs}
+        assert values == {"a": 1, "b": "x"}
diff --git a/api/uv.lock b/api/uv.lock
index 4c2cb3c3f1..4ccd229eec 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" },
@@ -3072,11 +3072,11 @@ wheels = [
 
 [[package]]
 name = "json-repair"
-version = "0.54.1"
+version = "0.54.3"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/00/46/d3a4d9a3dad39bb4a2ad16b8adb9fe2e8611b20b71197fe33daa6768e85d/json_repair-0.54.1.tar.gz", hash = "sha256:d010bc31f1fc66e7c36dc33bff5f8902674498ae5cb8e801ad455a53b455ad1d", size = 38555, upload-time = "2025-11-19T14:55:24.265Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/b5/86/48b12ac02032f121ac7e5f11a32143edca6c1e3d19ffc54d6fb9ca0aafd0/json_repair-0.54.3.tar.gz", hash = "sha256:e50feec9725e52ac91f12184609754684ac1656119dfbd31de09bdaf9a1d8bf6", size = 38626, upload-time = "2025-12-15T09:41:58.594Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/db/96/c9aad7ee949cc1bf15df91f347fbc2d3bd10b30b80c7df689ce6fe9332b5/json_repair-0.54.1-py3-none-any.whl", hash = "sha256:016160c5db5d5fe443164927bb58d2dfbba5f43ad85719fa9bc51c713a443ab1", size = 29311, upload-time = "2025-11-19T14:55:22.886Z" },
+    { url = "https://files.pythonhosted.org/packages/e9/08/abe317237add63c3e62f18a981bccf92112b431835b43d844aedaf61f4a0/json_repair-0.54.3-py3-none-any.whl", hash = "sha256:4cdc132ee27d4780576f71bf27a113877046224a808bfc17392e079cb344fb81", size = 29357, upload-time = "2025-12-15T09:41:57.436Z" },
 ]
 
 [[package]]
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/sdks/nodejs-client/package.json b/sdks/nodejs-client/package.json
index 554cb909ef..afbb58fee1 100644
--- a/sdks/nodejs-client/package.json
+++ b/sdks/nodejs-client/package.json
@@ -54,17 +54,17 @@
     "publish:npm": "./scripts/publish.sh"
   },
   "dependencies": {
-    "axios": "^1.3.5"
+    "axios": "^1.13.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.2.0",
-    "@types/node": "^20.11.30",
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^25.0.3",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
-    "@vitest/coverage-v8": "1.6.1",
-    "eslint": "^9.2.0",
+    "@vitest/coverage-v8": "4.0.16",
+    "eslint": "^9.39.2",
     "tsup": "^8.5.1",
-    "typescript": "^5.4.5",
-    "vitest": "^1.5.0"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16"
   }
 }
diff --git a/sdks/nodejs-client/pnpm-lock.yaml b/sdks/nodejs-client/pnpm-lock.yaml
index 3e4011c580..6febed2ea6 100644
--- a/sdks/nodejs-client/pnpm-lock.yaml
+++ b/sdks/nodejs-client/pnpm-lock.yaml
@@ -9,15 +9,15 @@ importers:
   .:
     dependencies:
       axios:
-        specifier: ^1.3.5
+        specifier: ^1.13.2
         version: 1.13.2
     devDependencies:
       '@eslint/js':
-        specifier: ^9.2.0
+        specifier: ^9.39.2
         version: 9.39.2
       '@types/node':
-        specifier: ^20.11.30
-        version: 20.19.27
+        specifier: ^25.0.3
+        version: 25.0.3
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.50.1
         version: 8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2)(typescript@5.9.3))(eslint@9.39.2)(typescript@5.9.3)
@@ -25,27 +25,23 @@ importers:
         specifier: ^8.50.1
         version: 8.50.1(eslint@9.39.2)(typescript@5.9.3)
       '@vitest/coverage-v8':
-        specifier: 1.6.1
-        version: 1.6.1(vitest@1.6.1(@types/node@20.19.27))
+        specifier: 4.0.16
+        version: 4.0.16(vitest@4.0.16(@types/node@25.0.3))
       eslint:
-        specifier: ^9.2.0
+        specifier: ^9.39.2
         version: 9.39.2
       tsup:
         specifier: ^8.5.1
         version: 8.5.1(postcss@8.5.6)(typescript@5.9.3)
       typescript:
-        specifier: ^5.4.5
+        specifier: ^5.9.3
         version: 5.9.3
       vitest:
-        specifier: ^1.5.0
-        version: 1.6.1(@types/node@20.19.27)
+        specifier: ^4.0.16
+        version: 4.0.16(@types/node@25.0.3)
 
 packages:
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -63,14 +59,9 @@ packages:
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
-  '@bcoe/v8-coverage@0.2.3':
-    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
-
-  '@esbuild/aix-ppc64@0.21.5':
-    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [aix]
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
 
   '@esbuild/aix-ppc64@0.27.2':
     resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==}
@@ -78,192 +69,96 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.21.5':
-    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
   '@esbuild/android-arm64@0.27.2':
     resolution: {integrity: sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.21.5':
-    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
   '@esbuild/android-arm@0.27.2':
     resolution: {integrity: sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.21.5':
-    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
   '@esbuild/android-x64@0.27.2':
     resolution: {integrity: sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.21.5':
-    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@esbuild/darwin-arm64@0.27.2':
     resolution: {integrity: sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.21.5':
-    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
   '@esbuild/darwin-x64@0.27.2':
     resolution: {integrity: sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.21.5':
-    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
   '@esbuild/freebsd-arm64@0.27.2':
     resolution: {integrity: sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.21.5':
-    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@esbuild/freebsd-x64@0.27.2':
     resolution: {integrity: sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.21.5':
-    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
   '@esbuild/linux-arm64@0.27.2':
     resolution: {integrity: sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
   '@esbuild/linux-arm@0.27.2':
     resolution: {integrity: sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.21.5':
-    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
   '@esbuild/linux-ia32@0.27.2':
     resolution: {integrity: sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.21.5':
-    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
   '@esbuild/linux-loong64@0.27.2':
     resolution: {integrity: sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.21.5':
-    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
   '@esbuild/linux-mips64el@0.27.2':
     resolution: {integrity: sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.21.5':
-    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
   '@esbuild/linux-ppc64@0.27.2':
     resolution: {integrity: sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.21.5':
-    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
   '@esbuild/linux-riscv64@0.27.2':
     resolution: {integrity: sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.21.5':
-    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
   '@esbuild/linux-s390x@0.27.2':
     resolution: {integrity: sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.21.5':
-    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
   '@esbuild/linux-x64@0.27.2':
     resolution: {integrity: sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==}
     engines: {node: '>=18'}
@@ -276,12 +171,6 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.21.5':
-    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-
   '@esbuild/netbsd-x64@0.27.2':
     resolution: {integrity: sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==}
     engines: {node: '>=18'}
@@ -294,12 +183,6 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.21.5':
-    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-
   '@esbuild/openbsd-x64@0.27.2':
     resolution: {integrity: sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==}
     engines: {node: '>=18'}
@@ -312,48 +195,24 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.21.5':
-    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-
   '@esbuild/sunos-x64@0.27.2':
     resolution: {integrity: sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.21.5':
-    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
   '@esbuild/win32-arm64@0.27.2':
     resolution: {integrity: sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.21.5':
-    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
   '@esbuild/win32-ia32@0.27.2':
     resolution: {integrity: sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-
   '@esbuild/win32-x64@0.27.2':
     resolution: {integrity: sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==}
     engines: {node: '>=18'}
@@ -414,14 +273,6 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@istanbuljs/schema@0.1.3':
-    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
-    engines: {node: '>=8'}
-
-  '@jest/schemas@29.6.3':
-    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -545,8 +396,14 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@sinclair/typebox@0.27.8':
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
@@ -554,8 +411,8 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/node@20.19.27':
-    resolution: {integrity: sha512-N2clP5pJhB2YnZJ3PIHFk5RkygRX5WO/5f0WC08tp0wd+sv0rsJk3MqWn3CbNmT2J505a5336jaQj4ph1AdMug==}
+  '@types/node@25.0.3':
+    resolution: {integrity: sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==}
 
   '@typescript-eslint/eslint-plugin@8.50.1':
     resolution: {integrity: sha512-PKhLGDq3JAg0Jk/aK890knnqduuI/Qj+udH7wCf0217IGi4gt+acgCyPVe79qoT+qKUvHMDQkwJeKW9fwl8Cyw==}
@@ -616,35 +473,49 @@ packages:
     resolution: {integrity: sha512-IrDKrw7pCRUR94zeuCSUWQ+w8JEf5ZX5jl/e6AHGSLi1/zIr0lgutfn/7JpfCey+urpgQEdrZVYzCaVVKiTwhQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@vitest/coverage-v8@1.6.1':
-    resolution: {integrity: sha512-6YeRZwuO4oTGKxD3bijok756oktHSIm3eczVVzNe3scqzuhLwltIF3S9ZL/vwOVIpURmU6SnZhziXXAfw8/Qlw==}
+  '@vitest/coverage-v8@4.0.16':
+    resolution: {integrity: sha512-2rNdjEIsPRzsdu6/9Eq0AYAzYdpP6Bx9cje9tL3FE5XzXRQF1fNU9pe/1yE8fCrS0HD+fBtt6gLPh6LI57tX7A==}
     peerDependencies:
-      vitest: 1.6.1
+      '@vitest/browser': 4.0.16
+      vitest: 4.0.16
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
 
-  '@vitest/expect@1.6.1':
-    resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
+  '@vitest/expect@4.0.16':
+    resolution: {integrity: sha512-eshqULT2It7McaJkQGLkPjPjNph+uevROGuIMJdG3V+0BSR2w9u6J9Lwu+E8cK5TETlfou8GRijhafIMhXsimA==}
 
-  '@vitest/runner@1.6.1':
-    resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
+  '@vitest/mocker@4.0.16':
+    resolution: {integrity: sha512-yb6k4AZxJTB+q9ycAvsoxGn+j/po0UaPgajllBgt1PzoMAAmJGYFdDk0uCcRcxb3BrME34I6u8gHZTQlkqSZpg==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
 
-  '@vitest/snapshot@1.6.1':
-    resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
+  '@vitest/pretty-format@4.0.16':
+    resolution: {integrity: sha512-eNCYNsSty9xJKi/UdVD8Ou16alu7AYiS2fCPRs0b1OdhJiV89buAXQLpTbe+X8V9L6qrs9CqyvU7OaAopJYPsA==}
 
-  '@vitest/spy@1.6.1':
-    resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
+  '@vitest/runner@4.0.16':
+    resolution: {integrity: sha512-VWEDm5Wv9xEo80ctjORcTQRJ539EGPB3Pb9ApvVRAY1U/WkHXmmYISqU5E79uCwcW7xYUV38gwZD+RV755fu3Q==}
 
-  '@vitest/utils@1.6.1':
-    resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
+  '@vitest/snapshot@4.0.16':
+    resolution: {integrity: sha512-sf6NcrYhYBsSYefxnry+DR8n3UV4xWZwWxYbCJUt2YdvtqzSPR7VfGrY0zsv090DAbjFZsi7ZaMi1KnSRyK1XA==}
+
+  '@vitest/spy@4.0.16':
+    resolution: {integrity: sha512-4jIOWjKP0ZUaEmJm00E0cOBLU+5WE0BpeNr3XN6TEF05ltro6NJqHWxXD0kA8/Zc8Nh23AT8WQxwNG+WeROupw==}
+
+  '@vitest/utils@4.0.16':
+    resolution: {integrity: sha512-h8z9yYhV3e1LEfaQ3zdypIrnAg/9hguReGZoS7Gl0aBG5xgA410zBqECqmaF/+RkTggRsfnzc1XaAHA6bmUufA==}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@8.3.4:
-    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
-    engines: {node: '>=0.4.0'}
-
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
@@ -657,18 +528,18 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  ansi-styles@5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
-
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  assertion-error@1.1.0:
-    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-v8-to-istanbul@0.3.10:
+    resolution: {integrity: sha512-p4K7vMz2ZSk3wN8l5o3y2bJAoZXT3VuJI5OLTATY/01CYWumWvwkUw0SqDBnNq6IiTO3qDa1eSQDibAV8g7XOQ==}
 
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
@@ -703,17 +574,14 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  chai@4.5.0:
-    resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
-    engines: {node: '>=4'}
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
 
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  check-error@1.0.3:
-    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
-
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
@@ -756,10 +624,6 @@ packages:
       supports-color:
         optional: true
 
-  deep-eql@4.1.4:
-    resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
-    engines: {node: '>=6'}
-
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -767,10 +631,6 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
-  diff-sequences@29.6.3:
-    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -783,6 +643,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -791,11 +654,6 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
-    hasBin: true
-
   esbuild@0.27.2:
     resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
     engines: {node: '>=18'}
@@ -850,9 +708,9 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
 
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -903,9 +761,6 @@ packages:
     resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
     engines: {node: '>= 6'}
 
-  fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -914,9 +769,6 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  get-func-name@2.0.2:
-    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
-
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -925,18 +777,10 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
-
   glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -964,10 +808,6 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
-
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -984,13 +824,6 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -999,10 +832,6 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-stream@3.0.0:
-    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1060,10 +889,6 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  local-pkg@0.5.1:
-    resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
-    engines: {node: '>=14'}
-
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1071,14 +896,11 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  loupe@2.3.7:
-    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  magicast@0.3.5:
-    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+  magicast@0.5.1:
+    resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
 
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
@@ -1088,9 +910,6 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -1099,10 +918,6 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  mimic-fn@4.0.0:
-    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
-    engines: {node: '>=12'}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1127,20 +942,12 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  npm-run-path@5.3.0:
-    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-
-  onetime@6.0.0:
-    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
-    engines: {node: '>=12'}
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
@@ -1150,10 +957,6 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@5.0.0:
-    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
-    engines: {node: '>=18'}
-
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -1166,27 +969,13 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-key@4.0.0:
-    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
-    engines: {node: '>=12'}
-
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  pathval@1.1.1:
-    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1227,10 +1016,6 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  pretty-format@29.7.0:
-    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -1238,9 +1023,6 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
-
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
@@ -1274,10 +1056,6 @@ packages:
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
-  signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -1292,17 +1070,10 @@ packages:
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
-  strip-final-newline@3.0.0:
-    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
-    engines: {node: '>=12'}
-
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  strip-literal@2.1.1:
-    resolution: {integrity: sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==}
-
   sucrase@3.35.1:
     resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1312,10 +1083,6 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
-  test-exclude@6.0.0:
-    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
-    engines: {node: '>=8'}
-
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -1329,16 +1096,16 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
-  tinypool@0.8.4:
-    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
-    engines: {node: '>=14.0.0'}
-
-  tinyspy@2.2.1:
-    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
     engines: {node: '>=14.0.0'}
 
   tree-kill@1.2.2:
@@ -1377,10 +1144,6 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-detect@4.1.0:
-    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==}
-    engines: {node: '>=4'}
-
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -1389,33 +1152,33 @@ packages:
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  vite-node@1.6.1:
-    resolution: {integrity: sha512-YAXkfvGtuTzwWbDSACdJSg4A4DZiAqckWe90Zapc/sEX3XvHcw1NdurM/6od8J207tSDqNbSsgdCacBgvJKFuA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-
-  vite@5.4.21:
-    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vite@7.3.0:
+    resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
       lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
     peerDependenciesMeta:
       '@types/node':
         optional: true
+      jiti:
+        optional: true
       less:
         optional: true
       lightningcss:
@@ -1430,24 +1193,37 @@ packages:
         optional: true
       terser:
         optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
-  vitest@1.6.1:
-    resolution: {integrity: sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vitest@4.0.16:
+    resolution: {integrity: sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 1.6.1
-      '@vitest/ui': 1.6.1
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.0.16
+      '@vitest/browser-preview': 4.0.16
+      '@vitest/browser-webdriverio': 4.0.16
+      '@vitest/ui': 4.0.16
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
+      '@opentelemetry/api':
+        optional: true
       '@types/node':
         optional: true
-      '@vitest/browser':
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
         optional: true
       '@vitest/ui':
         optional: true
@@ -1470,24 +1246,12 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
-  wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.2.2:
-    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
-    engines: {node: '>=12.20'}
-
 snapshots:
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
@@ -1501,152 +1265,83 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@bcoe/v8-coverage@0.2.3': {}
-
-  '@esbuild/aix-ppc64@0.21.5':
-    optional: true
+  '@bcoe/v8-coverage@1.0.2': {}
 
   '@esbuild/aix-ppc64@0.27.2':
     optional: true
 
-  '@esbuild/android-arm64@0.21.5':
-    optional: true
-
   '@esbuild/android-arm64@0.27.2':
     optional: true
 
-  '@esbuild/android-arm@0.21.5':
-    optional: true
-
   '@esbuild/android-arm@0.27.2':
     optional: true
 
-  '@esbuild/android-x64@0.21.5':
-    optional: true
-
   '@esbuild/android-x64@0.27.2':
     optional: true
 
-  '@esbuild/darwin-arm64@0.21.5':
-    optional: true
-
   '@esbuild/darwin-arm64@0.27.2':
     optional: true
 
-  '@esbuild/darwin-x64@0.21.5':
-    optional: true
-
   '@esbuild/darwin-x64@0.27.2':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.21.5':
-    optional: true
-
   '@esbuild/freebsd-arm64@0.27.2':
     optional: true
 
-  '@esbuild/freebsd-x64@0.21.5':
-    optional: true
-
   '@esbuild/freebsd-x64@0.27.2':
     optional: true
 
-  '@esbuild/linux-arm64@0.21.5':
-    optional: true
-
   '@esbuild/linux-arm64@0.27.2':
     optional: true
 
-  '@esbuild/linux-arm@0.21.5':
-    optional: true
-
   '@esbuild/linux-arm@0.27.2':
     optional: true
 
-  '@esbuild/linux-ia32@0.21.5':
-    optional: true
-
   '@esbuild/linux-ia32@0.27.2':
     optional: true
 
-  '@esbuild/linux-loong64@0.21.5':
-    optional: true
-
   '@esbuild/linux-loong64@0.27.2':
     optional: true
 
-  '@esbuild/linux-mips64el@0.21.5':
-    optional: true
-
   '@esbuild/linux-mips64el@0.27.2':
     optional: true
 
-  '@esbuild/linux-ppc64@0.21.5':
-    optional: true
-
   '@esbuild/linux-ppc64@0.27.2':
     optional: true
 
-  '@esbuild/linux-riscv64@0.21.5':
-    optional: true
-
   '@esbuild/linux-riscv64@0.27.2':
     optional: true
 
-  '@esbuild/linux-s390x@0.21.5':
-    optional: true
-
   '@esbuild/linux-s390x@0.27.2':
     optional: true
 
-  '@esbuild/linux-x64@0.21.5':
-    optional: true
-
   '@esbuild/linux-x64@0.27.2':
     optional: true
 
   '@esbuild/netbsd-arm64@0.27.2':
     optional: true
 
-  '@esbuild/netbsd-x64@0.21.5':
-    optional: true
-
   '@esbuild/netbsd-x64@0.27.2':
     optional: true
 
   '@esbuild/openbsd-arm64@0.27.2':
     optional: true
 
-  '@esbuild/openbsd-x64@0.21.5':
-    optional: true
-
   '@esbuild/openbsd-x64@0.27.2':
     optional: true
 
   '@esbuild/openharmony-arm64@0.27.2':
     optional: true
 
-  '@esbuild/sunos-x64@0.21.5':
-    optional: true
-
   '@esbuild/sunos-x64@0.27.2':
     optional: true
 
-  '@esbuild/win32-arm64@0.21.5':
-    optional: true
-
   '@esbuild/win32-arm64@0.27.2':
     optional: true
 
-  '@esbuild/win32-ia32@0.21.5':
-    optional: true
-
   '@esbuild/win32-ia32@0.27.2':
     optional: true
 
-  '@esbuild/win32-x64@0.21.5':
-    optional: true
-
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
@@ -1707,12 +1402,6 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@istanbuljs/schema@0.1.3': {}
-
-  '@jest/schemas@29.6.3':
-    dependencies:
-      '@sinclair/typebox': 0.27.8
-
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -1793,15 +1482,22 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.54.0':
     optional: true
 
-  '@sinclair/typebox@0.27.8': {}
+  '@standard-schema/spec@1.1.0': {}
+
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
 
   '@types/estree@1.0.8': {}
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/node@20.19.27':
+  '@types/node@25.0.3':
     dependencies:
-      undici-types: 6.21.0
+      undici-types: 7.16.0
 
   '@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2)(typescript@5.9.3))(eslint@9.39.2)(typescript@5.9.3)':
     dependencies:
@@ -1894,62 +1590,66 @@ snapshots:
       '@typescript-eslint/types': 8.50.1
       eslint-visitor-keys: 4.2.1
 
-  '@vitest/coverage-v8@1.6.1(vitest@1.6.1(@types/node@20.19.27))':
+  '@vitest/coverage-v8@4.0.16(vitest@4.0.16(@types/node@25.0.3))':
     dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@bcoe/v8-coverage': 0.2.3
-      debug: 4.4.3
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.0.16
+      ast-v8-to-istanbul: 0.3.10
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.2.0
-      magic-string: 0.30.21
-      magicast: 0.3.5
-      picocolors: 1.1.1
+      magicast: 0.5.1
+      obug: 2.1.1
       std-env: 3.10.0
-      strip-literal: 2.1.1
-      test-exclude: 6.0.0
-      vitest: 1.6.1(@types/node@20.19.27)
+      tinyrainbow: 3.0.3
+      vitest: 4.0.16(@types/node@25.0.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/expect@1.6.1':
+  '@vitest/expect@4.0.16':
     dependencies:
-      '@vitest/spy': 1.6.1
-      '@vitest/utils': 1.6.1
-      chai: 4.5.0
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.0.16
+      '@vitest/utils': 4.0.16
+      chai: 6.2.2
+      tinyrainbow: 3.0.3
 
-  '@vitest/runner@1.6.1':
+  '@vitest/mocker@4.0.16(vite@7.3.0(@types/node@25.0.3))':
     dependencies:
-      '@vitest/utils': 1.6.1
-      p-limit: 5.0.0
-      pathe: 1.1.2
-
-  '@vitest/snapshot@1.6.1':
-    dependencies:
-      magic-string: 0.30.21
-      pathe: 1.1.2
-      pretty-format: 29.7.0
-
-  '@vitest/spy@1.6.1':
-    dependencies:
-      tinyspy: 2.2.1
-
-  '@vitest/utils@1.6.1':
-    dependencies:
-      diff-sequences: 29.6.3
+      '@vitest/spy': 4.0.16
       estree-walker: 3.0.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.0(@types/node@25.0.3)
+
+  '@vitest/pretty-format@4.0.16':
+    dependencies:
+      tinyrainbow: 3.0.3
+
+  '@vitest/runner@4.0.16':
+    dependencies:
+      '@vitest/utils': 4.0.16
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.0.16':
+    dependencies:
+      '@vitest/pretty-format': 4.0.16
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.0.16': {}
+
+  '@vitest/utils@4.0.16':
+    dependencies:
+      '@vitest/pretty-format': 4.0.16
+      tinyrainbow: 3.0.3
 
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
 
-  acorn-walk@8.3.4:
-    dependencies:
-      acorn: 8.15.0
-
   acorn@8.15.0: {}
 
   ajv@6.12.6:
@@ -1963,13 +1663,17 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  ansi-styles@5.2.0: {}
-
   any-promise@1.3.0: {}
 
   argparse@2.0.1: {}
 
-  assertion-error@1.1.0: {}
+  assertion-error@2.0.1: {}
+
+  ast-v8-to-istanbul@0.3.10:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 9.0.1
 
   asynckit@0.4.0: {}
 
@@ -2006,25 +1710,13 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  chai@4.5.0:
-    dependencies:
-      assertion-error: 1.1.0
-      check-error: 1.0.3
-      deep-eql: 4.1.4
-      get-func-name: 2.0.2
-      loupe: 2.3.7
-      pathval: 1.1.1
-      type-detect: 4.1.0
+  chai@6.2.2: {}
 
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  check-error@1.0.3:
-    dependencies:
-      get-func-name: 2.0.2
-
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
@@ -2057,16 +1749,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  deep-eql@4.1.4:
-    dependencies:
-      type-detect: 4.1.0
-
   deep-is@0.1.4: {}
 
   delayed-stream@1.0.0: {}
 
-  diff-sequences@29.6.3: {}
-
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -2077,6 +1763,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@1.7.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -2088,32 +1776,6 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  esbuild@0.21.5:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.21.5
-      '@esbuild/android-arm': 0.21.5
-      '@esbuild/android-arm64': 0.21.5
-      '@esbuild/android-x64': 0.21.5
-      '@esbuild/darwin-arm64': 0.21.5
-      '@esbuild/darwin-x64': 0.21.5
-      '@esbuild/freebsd-arm64': 0.21.5
-      '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
-      '@esbuild/linux-arm64': 0.21.5
-      '@esbuild/linux-ia32': 0.21.5
-      '@esbuild/linux-loong64': 0.21.5
-      '@esbuild/linux-mips64el': 0.21.5
-      '@esbuild/linux-ppc64': 0.21.5
-      '@esbuild/linux-riscv64': 0.21.5
-      '@esbuild/linux-s390x': 0.21.5
-      '@esbuild/linux-x64': 0.21.5
-      '@esbuild/netbsd-x64': 0.21.5
-      '@esbuild/openbsd-x64': 0.21.5
-      '@esbuild/sunos-x64': 0.21.5
-      '@esbuild/win32-arm64': 0.21.5
-      '@esbuild/win32-ia32': 0.21.5
-      '@esbuild/win32-x64': 0.21.5
-
   esbuild@0.27.2:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.27.2
@@ -2215,17 +1877,7 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  execa@8.0.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.3.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
+  expect-type@1.3.0: {}
 
   fast-deep-equal@3.1.3: {}
 
@@ -2269,15 +1921,11 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
-  fs.realpath@1.0.0: {}
-
   fsevents@2.3.3:
     optional: true
 
   function-bind@1.1.2: {}
 
-  get-func-name@2.0.2: {}
-
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -2296,21 +1944,10 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  get-stream@8.0.1: {}
-
   glob-parent@6.0.2:
     dependencies:
       is-glob: 4.0.3
 
-  glob@7.2.3:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-
   globals@14.0.0: {}
 
   gopd@1.2.0: {}
@@ -2329,8 +1966,6 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
-  human-signals@5.0.0: {}
-
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -2342,21 +1977,12 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  inflight@1.0.6:
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-
-  inherits@2.0.4: {}
-
   is-extglob@2.1.1: {}
 
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
-  is-stream@3.0.0: {}
-
   isexe@2.0.0: {}
 
   istanbul-lib-coverage@3.2.2: {}
@@ -2409,26 +2035,17 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
-  local-pkg@0.5.1:
-    dependencies:
-      mlly: 1.8.0
-      pkg-types: 1.3.1
-
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
   lodash.merge@4.6.2: {}
 
-  loupe@2.3.7:
-    dependencies:
-      get-func-name: 2.0.2
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  magicast@0.3.5:
+  magicast@0.5.1:
     dependencies:
       '@babel/parser': 7.28.5
       '@babel/types': 7.28.5
@@ -2440,16 +2057,12 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  merge-stream@2.0.0: {}
-
   mime-db@1.52.0: {}
 
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
 
-  mimic-fn@4.0.0: {}
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -2477,19 +2090,9 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  npm-run-path@5.3.0:
-    dependencies:
-      path-key: 4.0.0
-
   object-assign@4.1.1: {}
 
-  once@1.4.0:
-    dependencies:
-      wrappy: 1.0.2
-
-  onetime@6.0.0:
-    dependencies:
-      mimic-fn: 4.0.0
+  obug@2.1.1: {}
 
   optionator@0.9.4:
     dependencies:
@@ -2504,10 +2107,6 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@5.0.0:
-    dependencies:
-      yocto-queue: 1.2.2
-
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
@@ -2518,18 +2117,10 @@ snapshots:
 
   path-exists@4.0.0: {}
 
-  path-is-absolute@1.0.1: {}
-
   path-key@3.1.1: {}
 
-  path-key@4.0.0: {}
-
-  pathe@1.1.2: {}
-
   pathe@2.0.3: {}
 
-  pathval@1.1.1: {}
-
   picocolors@1.1.1: {}
 
   picomatch@4.0.3: {}
@@ -2556,18 +2147,10 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  pretty-format@29.7.0:
-    dependencies:
-      '@jest/schemas': 29.6.3
-      ansi-styles: 5.2.0
-      react-is: 18.3.1
-
   proxy-from-env@1.1.0: {}
 
   punycode@2.3.1: {}
 
-  react-is@18.3.1: {}
-
   readdirp@4.1.2: {}
 
   resolve-from@4.0.0: {}
@@ -2612,8 +2195,6 @@ snapshots:
 
   siginfo@2.0.0: {}
 
-  signal-exit@4.1.0: {}
-
   source-map-js@1.2.1: {}
 
   source-map@0.7.6: {}
@@ -2622,14 +2203,8 @@ snapshots:
 
   std-env@3.10.0: {}
 
-  strip-final-newline@3.0.0: {}
-
   strip-json-comments@3.1.1: {}
 
-  strip-literal@2.1.1:
-    dependencies:
-      js-tokens: 9.0.1
-
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -2644,12 +2219,6 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  test-exclude@6.0.0:
-    dependencies:
-      '@istanbuljs/schema': 0.1.3
-      glob: 7.2.3
-      minimatch: 3.1.2
-
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -2662,14 +2231,14 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
+  tinyexec@1.0.2: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
-  tinypool@0.8.4: {}
-
-  tinyspy@2.2.1: {}
+  tinyrainbow@3.0.3: {}
 
   tree-kill@1.2.2: {}
 
@@ -2711,78 +2280,64 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-detect@4.1.0: {}
-
   typescript@5.9.3: {}
 
   ufo@1.6.1: {}
 
-  undici-types@6.21.0: {}
+  undici-types@7.16.0: {}
 
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
-  vite-node@1.6.1(@types/node@20.19.27):
+  vite@7.3.0(@types/node@25.0.3):
     dependencies:
-      cac: 6.7.14
-      debug: 4.4.3
-      pathe: 1.1.2
-      picocolors: 1.1.1
-      vite: 5.4.21(@types/node@20.19.27)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-
-  vite@5.4.21(@types/node@20.19.27):
-    dependencies:
-      esbuild: 0.21.5
+      esbuild: 0.27.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
       postcss: 8.5.6
       rollup: 4.54.0
+      tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 20.19.27
+      '@types/node': 25.0.3
       fsevents: 2.3.3
 
-  vitest@1.6.1(@types/node@20.19.27):
+  vitest@4.0.16(@types/node@25.0.3):
     dependencies:
-      '@vitest/expect': 1.6.1
-      '@vitest/runner': 1.6.1
-      '@vitest/snapshot': 1.6.1
-      '@vitest/spy': 1.6.1
-      '@vitest/utils': 1.6.1
-      acorn-walk: 8.3.4
-      chai: 4.5.0
-      debug: 4.4.3
-      execa: 8.0.1
-      local-pkg: 0.5.1
+      '@vitest/expect': 4.0.16
+      '@vitest/mocker': 4.0.16(vite@7.3.0(@types/node@25.0.3))
+      '@vitest/pretty-format': 4.0.16
+      '@vitest/runner': 4.0.16
+      '@vitest/snapshot': 4.0.16
+      '@vitest/spy': 4.0.16
+      '@vitest/utils': 4.0.16
+      es-module-lexer: 1.7.0
+      expect-type: 1.3.0
       magic-string: 0.30.21
-      pathe: 1.1.2
-      picocolors: 1.1.1
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
       std-env: 3.10.0
-      strip-literal: 2.1.1
       tinybench: 2.9.0
-      tinypool: 0.8.4
-      vite: 5.4.21(@types/node@20.19.27)
-      vite-node: 1.6.1(@types/node@20.19.27)
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.3.0(@types/node@25.0.3)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.19.27
+      '@types/node': 25.0.3
     transitivePeerDependencies:
+      - jiti
       - less
       - lightningcss
+      - msw
       - sass
       - sass-embedded
       - stylus
       - sugarss
-      - supports-color
       - terser
+      - tsx
+      - yaml
 
   which@2.0.2:
     dependencies:
@@ -2795,8 +2350,4 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  wrappy@1.0.2: {}
-
   yocto-queue@0.1.0: {}
-
-  yocto-queue@1.2.2: {}
diff --git a/sdks/nodejs-client/pnpm-workspace.yaml b/sdks/nodejs-client/pnpm-workspace.yaml
new file mode 100644
index 0000000000..efc037aa84
--- /dev/null
+++ b/sdks/nodejs-client/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild
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/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)/layout.tsx b/web/app/(commonLayout)/layout.tsx
index 91bdb3f99a..a0ccde957d 100644
--- a/web/app/(commonLayout)/layout.tsx
+++ b/web/app/(commonLayout)/layout.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import * as React from 'react'
+import { AppInitializer } from '@/app/components/app-initializer'
 import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import Zendesk from '@/app/components/base/zendesk'
@@ -7,7 +8,6 @@ import GotoAnything from '@/app/components/goto-anything'
 import Header from '@/app/components/header'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
 import ReadmePanel from '@/app/components/plugins/readme-panel'
-import SwrInitializer from '@/app/components/swr-initializer'
 import { AppContextProvider } from '@/context/app-context'
 import { EventEmitterContextProvider } from '@/context/event-emitter'
 import { ModalContextProvider } from '@/context/modal-context'
@@ -20,7 +20,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
     <>
       <GA gaType={GaType.admin} />
       <AmplitudeProvider />
-      <SwrInitializer>
+      <AppInitializer>
         <AppContextProvider>
           <EventEmitterContextProvider>
             <ProviderContextProvider>
@@ -38,7 +38,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
           </EventEmitterContextProvider>
         </AppContextProvider>
         <Zendesk />
-      </SwrInitializer>
+      </AppInitializer>
     </>
   )
 }
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/account/(commonLayout)/layout.tsx b/web/app/account/(commonLayout)/layout.tsx
index f264441b86..e4125015d9 100644
--- a/web/app/account/(commonLayout)/layout.tsx
+++ b/web/app/account/(commonLayout)/layout.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
 import * as React from 'react'
+import { AppInitializer } from '@/app/components/app-initializer'
 import AmplitudeProvider from '@/app/components/base/amplitude'
 import GA, { GaType } from '@/app/components/base/ga'
 import HeaderWrapper from '@/app/components/header/header-wrapper'
-import SwrInitor from '@/app/components/swr-initializer'
 import { AppContextProvider } from '@/context/app-context'
 import { EventEmitterContextProvider } from '@/context/event-emitter'
 import { ModalContextProvider } from '@/context/modal-context'
@@ -15,7 +15,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
     <>
       <GA gaType={GaType.admin} />
       <AmplitudeProvider />
-      <SwrInitor>
+      <AppInitializer>
         <AppContextProvider>
           <EventEmitterContextProvider>
             <ProviderContextProvider>
@@ -30,7 +30,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
             </ProviderContextProvider>
           </EventEmitterContextProvider>
         </AppContextProvider>
-      </SwrInitor>
+      </AppInitializer>
     </>
   )
 }
diff --git a/web/app/components/swr-initializer.tsx b/web/app/components/app-initializer.tsx
similarity index 80%
rename from web/app/components/swr-initializer.tsx
rename to web/app/components/app-initializer.tsx
index 31be6d62b5..0f710abf39 100644
--- a/web/app/components/swr-initializer.tsx
+++ b/web/app/components/app-initializer.tsx
@@ -3,7 +3,6 @@
 import type { ReactNode } from 'react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
-import { SWRConfig } from 'swr'
 import {
   EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
@@ -11,12 +10,13 @@ import {
 import { fetchSetupStatus } from '@/service/common'
 import { resolvePostLoginRedirect } from '../signin/utils/post-login-redirect'
 
-type SwrInitializerProps = {
+type AppInitializerProps = {
   children: ReactNode
 }
-const SwrInitializer = ({
+
+export const AppInitializer = ({
   children,
-}: SwrInitializerProps) => {
+}: AppInitializerProps) => {
   const router = useRouter()
   const searchParams = useSearchParams()
   // Tokens are now stored in cookies, no need to check localStorage
@@ -69,20 +69,5 @@ const SwrInitializer = ({
     })()
   }, [isSetupFinished, router, pathname, searchParams])
 
-  return init
-    ? (
-        <SWRConfig value={{
-          shouldRetryOnError: false,
-          revalidateOnFocus: false,
-          dedupingInterval: 60000,
-          focusThrottleInterval: 5000,
-          provider: () => new Map(),
-        }}
-        >
-          {children}
-        </SWRConfig>
-      )
-    : null
+  return init ? children : null
 }
-
-export default SwrInitializer
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/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 b1d8e8cd19..380a96fd3a 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
@@ -47,6 +47,12 @@ const getCheckboxDefaultSelectValue = (value: InputVar['default']) => {
 const parseCheckboxSelectValue = (value: string) =>
   value === CHECKBOX_DEFAULT_TRUE_VALUE
 
+const normalizeSelectDefaultValue = (inputVar: InputVar) => {
+  if (inputVar.type === InputVarType.select && inputVar.default === '')
+    return { ...inputVar, default: undefined }
+  return inputVar
+}
+
 export type IConfigModalProps = {
   isCreate?: boolean
   payload?: InputVar
@@ -67,7 +73,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
 }) => {
   const { modelConfig } = useContext(ConfigContext)
   const { t } = useTranslation()
-  const [tempPayload, setTempPayload] = useState<InputVar>(() => payload || getNewVarInWorkflow('') as any)
+  const [tempPayload, setTempPayload] = useState<InputVar>(() => normalizeSelectDefaultValue(payload || getNewVarInWorkflow('') as any))
   const { type, label, variable, options, max_length } = tempPayload
   const modalRef = useRef<HTMLDivElement>(null)
   const appDetail = useAppStore(state => state.appDetail)
@@ -182,6 +188,8 @@ const ConfigModal: FC<IConfigModalProps> = ({
 
     const newPayload = produce(tempPayload, (draft) => {
       draft.type = type
+      if (type === InputVarType.select)
+        draft.default = undefined
       if ([InputVarType.singleFile, InputVarType.multiFiles].includes(type)) {
         (Object.keys(DEFAULT_FILE_UPLOAD_SETTING)).forEach((key) => {
           if (key !== 'max_length')
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/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/select-dataset/index.spec.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.spec.tsx
new file mode 100644
index 0000000000..e7c3d4a3c9
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.spec.tsx
@@ -0,0 +1,141 @@
+import type { DataSet } from '@/models/datasets'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+
+import { describe, expect, it, vi } from 'vitest'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import { DatasetPermission } from '@/models/datasets'
+import { RETRIEVE_METHOD } from '@/types/app'
+import SelectDataSet from './index'
+
+vi.mock('@/i18n-config/i18next-config', () => ({
+  __esModule: true,
+  default: {
+    changeLanguage: vi.fn(),
+    addResourceBundle: vi.fn(),
+    use: vi.fn().mockReturnThis(),
+    init: vi.fn(),
+    addResource: vi.fn(),
+    hasResourceBundle: vi.fn().mockReturnValue(true),
+  },
+}))
+const mockUseInfiniteScroll = vi.fn()
+vi.mock('ahooks', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(typeof actual === 'object' && actual !== null ? actual : {}),
+    useInfiniteScroll: (...args: any[]) => mockUseInfiniteScroll(...args),
+  }
+})
+
+const mockUseInfiniteDatasets = vi.fn()
+vi.mock('@/service/knowledge/use-dataset', () => ({
+  useInfiniteDatasets: (...args: any[]) => mockUseInfiniteDatasets(...args),
+}))
+
+vi.mock('@/hooks/use-knowledge', () => ({
+  useKnowledge: () => ({
+    formatIndexingTechniqueAndMethod: (tech: string, method: string) => `${tech}:${method}`,
+  }),
+}))
+
+const baseProps = {
+  isShow: true,
+  onClose: vi.fn(),
+  selectedIds: [] as string[],
+  onSelect: vi.fn(),
+}
+
+const makeDataset = (overrides: Partial<DataSet>): DataSet => ({
+  id: 'dataset-id',
+  name: 'Dataset Name',
+  provider: 'internal',
+  icon_info: {
+    icon_type: 'emoji',
+    icon: '💾',
+    icon_background: '#fff',
+    icon_url: '',
+  },
+  embedding_available: true,
+  is_multimodal: false,
+  description: '',
+  permission: DatasetPermission.allTeamMembers,
+  indexing_technique: IndexingType.ECONOMICAL,
+  retrieval_model_dict: {
+    search_method: RETRIEVE_METHOD.fullText,
+    top_k: 5,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_model_name: '',
+      reranking_provider_name: '',
+    },
+    score_threshold_enabled: false,
+    score_threshold: 0,
+  },
+  ...overrides,
+} as DataSet)
+
+describe('SelectDataSet', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders dataset entries, allows selection, and fires onSelect', async () => {
+    const datasetOne = makeDataset({
+      id: 'set-1',
+      name: 'Dataset One',
+      is_multimodal: true,
+      indexing_technique: IndexingType.ECONOMICAL,
+    })
+    const datasetTwo = makeDataset({
+      id: 'set-2',
+      name: 'Hidden Dataset',
+      embedding_available: false,
+      provider: 'external',
+    })
+    mockUseInfiniteDatasets.mockReturnValue({
+      data: { pages: [{ data: [datasetOne, datasetTwo] }] },
+      isLoading: false,
+      isFetchingNextPage: false,
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+    })
+
+    const onSelect = vi.fn()
+    await act(async () => {
+      render(<SelectDataSet {...baseProps} onSelect={onSelect} selectedIds={[]} />)
+    })
+
+    expect(screen.getByText('Dataset One')).toBeInTheDocument()
+    expect(screen.getByText('Hidden Dataset')).toBeInTheDocument()
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Dataset One'))
+    })
+    expect(screen.getByText('1 appDebug.feature.dataSet.selected')).toBeInTheDocument()
+
+    const addButton = screen.getByRole('button', { name: 'common.operation.add' })
+    await act(async () => {
+      fireEvent.click(addButton)
+    })
+    expect(onSelect).toHaveBeenCalledWith([datasetOne])
+  })
+
+  it('shows empty state when no datasets are available and disables add', async () => {
+    mockUseInfiniteDatasets.mockReturnValue({
+      data: { pages: [{ data: [] }] },
+      isLoading: false,
+      isFetchingNextPage: false,
+      fetchNextPage: vi.fn(),
+      hasNextPage: false,
+    })
+
+    await act(async () => {
+      render(<SelectDataSet {...baseProps} onSelect={vi.fn()} selectedIds={[]} />)
+    })
+
+    expect(screen.getByText('appDebug.feature.dataSet.noDataSet')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'appDebug.feature.dataSet.toCreate' })).toHaveAttribute('href', '/datasets/create')
+    expect(screen.getByRole('button', { name: 'common.operation.add' })).toBeDisabled()
+  })
+})
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 243aafdbdd..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'
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/prompt-value-panel/index.spec.tsx b/web/app/components/app/configuration/prompt-value-panel/index.spec.tsx
new file mode 100644
index 0000000000..039ed078d7
--- /dev/null
+++ b/web/app/components/app/configuration/prompt-value-panel/index.spec.tsx
@@ -0,0 +1,125 @@
+import type { IPromptValuePanelProps } from './index'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useStore } from '@/app/components/app/store'
+import ConfigContext from '@/context/debug-configuration'
+import { AppModeEnum, ModelModeType, Resolution } from '@/types/app'
+import PromptValuePanel from './index'
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: vi.fn(),
+}))
+vi.mock('@/app/components/base/features/new-feature-panel/feature-bar', () => ({
+  __esModule: true,
+  default: ({ onFeatureBarClick }: { onFeatureBarClick: () => void }) => (
+    <button type="button" onClick={onFeatureBarClick}>
+      feature bar
+    </button>
+  ),
+}))
+
+const mockSetShowAppConfigureFeaturesModal = vi.fn()
+const mockUseStore = vi.mocked(useStore)
+const mockSetInputs = vi.fn()
+const mockOnSend = vi.fn()
+
+const promptVariables = [
+  { key: 'textVar', name: 'Text Var', type: 'string', required: true },
+  { key: 'boolVar', name: 'Boolean Var', type: 'checkbox' },
+] as const
+
+const baseContextValue: any = {
+  modelModeType: ModelModeType.completion,
+  modelConfig: {
+    configs: {
+      prompt_template: 'prompt template',
+      prompt_variables: promptVariables,
+    },
+  },
+  setInputs: mockSetInputs,
+  mode: AppModeEnum.COMPLETION,
+  isAdvancedMode: false,
+  completionPromptConfig: {
+    prompt: { text: 'completion' },
+    conversation_histories_role: { user_prefix: 'user', assistant_prefix: 'assistant' },
+  },
+  chatPromptConfig: { prompt: [] },
+} as any
+
+const defaultProps: IPromptValuePanelProps = {
+  appType: AppModeEnum.COMPLETION,
+  onSend: mockOnSend,
+  inputs: { textVar: 'initial', boolVar: false },
+  visionConfig: { enabled: false, number_limits: 0, detail: Resolution.low, transfer_methods: [] },
+  onVisionFilesChange: vi.fn(),
+}
+
+const renderPanel = (options: {
+  context?: Partial<typeof baseContextValue>
+  props?: Partial<IPromptValuePanelProps>
+} = {}) => {
+  const contextValue = { ...baseContextValue, ...options.context }
+  const props = { ...defaultProps, ...options.props }
+  return render(
+    <ConfigContext.Provider value={contextValue}>
+      <PromptValuePanel {...props} />
+    </ConfigContext.Provider>,
+  )
+}
+
+describe('PromptValuePanel', () => {
+  beforeEach(() => {
+    mockUseStore.mockImplementation(selector => selector({
+      setShowAppConfigureFeaturesModal: mockSetShowAppConfigureFeaturesModal,
+      appSidebarExpand: '',
+      currentLogModalActiveTab: 'prompt',
+      showPromptLogModal: false,
+      showAgentLogModal: false,
+      setShowPromptLogModal: vi.fn(),
+      setShowAgentLogModal: vi.fn(),
+      showMessageLogModal: false,
+      showAppConfigureFeaturesModal: false,
+    } as any))
+    mockSetInputs.mockClear()
+    mockOnSend.mockClear()
+    mockSetShowAppConfigureFeaturesModal.mockClear()
+  })
+
+  it('updates inputs, clears values, and triggers run when ready', async () => {
+    renderPanel()
+
+    const textInput = screen.getByPlaceholderText('Text Var')
+    fireEvent.change(textInput, { target: { value: 'updated' } })
+    expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({ textVar: 'updated' }))
+
+    const clearButton = screen.getByRole('button', { name: 'common.operation.clear' })
+    fireEvent.click(clearButton)
+
+    expect(mockSetInputs).toHaveBeenLastCalledWith({
+      textVar: '',
+      boolVar: '',
+    })
+
+    const runButton = screen.getByRole('button', { name: 'appDebug.inputs.run' })
+    expect(runButton).not.toBeDisabled()
+    fireEvent.click(runButton)
+    await waitFor(() => expect(mockOnSend).toHaveBeenCalledTimes(1))
+  })
+
+  it('disables run when mode is not completion', () => {
+    renderPanel({
+      context: {
+        mode: AppModeEnum.CHAT,
+      },
+      props: {
+        appType: AppModeEnum.CHAT,
+      },
+    })
+
+    const runButton = screen.getByRole('button', { name: 'appDebug.inputs.run' })
+    expect(runButton).toBeDisabled()
+    fireEvent.click(runButton)
+    expect(mockOnSend).not.toHaveBeenCalled()
+  })
+})
diff --git a/web/app/components/app/configuration/prompt-value-panel/utils.spec.ts b/web/app/components/app/configuration/prompt-value-panel/utils.spec.ts
new file mode 100644
index 0000000000..7a7e0da9a9
--- /dev/null
+++ b/web/app/components/app/configuration/prompt-value-panel/utils.spec.ts
@@ -0,0 +1,29 @@
+import type { PromptVariable } from '@/models/debug'
+
+import { describe, expect, it } from 'vitest'
+import { replaceStringWithValues } from './utils'
+
+const promptVariables: PromptVariable[] = [
+  { key: 'user', name: 'User', type: 'string' },
+  { key: 'topic', name: 'Topic', type: 'string' },
+]
+
+describe('replaceStringWithValues', () => {
+  it('should replace placeholders when inputs have values', () => {
+    const template = 'Hello {{user}} talking about {{topic}}'
+    const result = replaceStringWithValues(template, promptVariables, { user: 'Alice', topic: 'cats' })
+    expect(result).toBe('Hello Alice talking about cats')
+  })
+
+  it('should use prompt variable name when value is missing', () => {
+    const template = 'Hi {{user}} from {{topic}}'
+    const result = replaceStringWithValues(template, promptVariables, {})
+    expect(result).toBe('Hi {{User}} from {{Topic}}')
+  })
+
+  it('should leave placeholder untouched when no variable is defined', () => {
+    const template = 'Unknown {{missing}} placeholder'
+    const result = replaceStringWithValues(template, promptVariables, {})
+    expect(result).toBe('Unknown {{missing}} placeholder')
+  })
+})
diff --git a/web/app/components/app/configuration/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..ff0ab7db9c
--- /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('nuqs', () => ({
+  useQueryState: () => ['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..d991f7b8ef 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'
@@ -21,10 +20,10 @@ import { usePluginDependencies } from '@/app/components/workflow/plugin-dependen
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 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'
@@ -64,29 +63,17 @@ const Apps = ({
   }
 
   const [currentType, setCurrentType] = useState<AppModeEnum[]>([])
-  const [currCategory, setCurrCategory] = useTabSearchParams({
-    defaultTab: allCategoriesEn,
-    disableSearchParams: true,
-  })
+  const [currCategory, setCurrCategory] = useState<AppCategories | string>(allCategoriesEn)
 
   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 +94,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 +156,7 @@ const Apps = ({
     }
   }
 
-  if (!categories || categories.length === 0) {
+  if (isLoading) {
     return (
       <div className="flex h-full items-center">
         <Loading type="area" />
@@ -203,7 +190,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-app-modal/index.spec.tsx b/web/app/components/app/create-app-modal/index.spec.tsx
new file mode 100644
index 0000000000..02c00ed3fd
--- /dev/null
+++ b/web/app/components/app/create-app-modal/index.spec.tsx
@@ -0,0 +1,162 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { useRouter } from 'next/navigation'
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { trackEvent } from '@/app/components/base/amplitude'
+
+import { ToastContext } from '@/app/components/base/toast'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { useAppContext } from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { createApp } from '@/service/apps'
+import { AppModeEnum } from '@/types/app'
+import { getRedirection } from '@/utils/app-redirection'
+import CreateAppModal from './index'
+
+vi.mock('ahooks', () => ({
+  useDebounceFn: (fn: (...args: any[]) => any) => {
+    const run = (...args: any[]) => fn(...args)
+    const cancel = vi.fn()
+    const flush = vi.fn()
+    return { run, cancel, flush }
+  },
+  useKeyPress: vi.fn(),
+  useHover: () => false,
+}))
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(),
+}))
+vi.mock('@/app/components/base/amplitude', () => ({
+  trackEvent: vi.fn(),
+}))
+vi.mock('@/service/apps', () => ({
+  createApp: vi.fn(),
+}))
+vi.mock('@/utils/app-redirection', () => ({
+  getRedirection: vi.fn(),
+}))
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: vi.fn(),
+}))
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+vi.mock('@/context/i18n', () => ({
+  useDocLink: () => () => '/guides',
+}))
+vi.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => ({ theme: 'light' }),
+}))
+
+const mockNotify = vi.fn()
+const mockUseRouter = vi.mocked(useRouter)
+const mockPush = vi.fn()
+const mockCreateApp = vi.mocked(createApp)
+const mockTrackEvent = vi.mocked(trackEvent)
+const mockGetRedirection = vi.mocked(getRedirection)
+const mockUseProviderContext = vi.mocked(useProviderContext)
+const mockUseAppContext = vi.mocked(useAppContext)
+
+const defaultPlanUsage = {
+  buildApps: 0,
+  teamMembers: 0,
+  annotatedResponse: 0,
+  documentsUploadQuota: 0,
+  apiRateLimit: 0,
+  triggerEvents: 0,
+  vectorSpace: 0,
+}
+
+const renderModal = () => {
+  const onClose = vi.fn()
+  const onSuccess = vi.fn()
+  render(
+    <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
+      <CreateAppModal show onClose={onClose} onSuccess={onSuccess} defaultAppMode={AppModeEnum.ADVANCED_CHAT} />
+    </ToastContext.Provider>,
+  )
+  return { onClose, onSuccess }
+}
+
+describe('CreateAppModal', () => {
+  const mockSetItem = vi.fn()
+  const originalLocalStorage = window.localStorage
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseRouter.mockReturnValue({ push: mockPush } as any)
+    mockUseProviderContext.mockReturnValue({
+      plan: {
+        type: AppModeEnum.ADVANCED_CHAT,
+        usage: defaultPlanUsage,
+        total: { ...defaultPlanUsage, buildApps: 1 },
+        reset: {},
+      },
+      enableBilling: true,
+    } as any)
+    mockUseAppContext.mockReturnValue({
+      isCurrentWorkspaceEditor: true,
+    } as any)
+    mockSetItem.mockClear()
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        setItem: mockSetItem,
+        getItem: vi.fn(),
+        removeItem: vi.fn(),
+        clear: vi.fn(),
+        key: vi.fn(),
+        length: 0,
+      },
+      writable: true,
+    })
+  })
+
+  afterAll(() => {
+    Object.defineProperty(window, 'localStorage', {
+      value: originalLocalStorage,
+      writable: true,
+    })
+  })
+
+  it('creates an app, notifies success, and fires callbacks', async () => {
+    const mockApp = { id: 'app-1', mode: AppModeEnum.ADVANCED_CHAT }
+    mockCreateApp.mockResolvedValue(mockApp as any)
+    const { onClose, onSuccess } = renderModal()
+
+    const nameInput = screen.getByPlaceholderText('app.newApp.appNamePlaceholder')
+    fireEvent.change(nameInput, { target: { value: 'My App' } })
+    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Create' }))
+
+    await waitFor(() => expect(mockCreateApp).toHaveBeenCalledWith({
+      name: 'My App',
+      description: '',
+      icon_type: 'emoji',
+      icon: '🤖',
+      icon_background: '#FFEAD5',
+      mode: AppModeEnum.ADVANCED_CHAT,
+    }))
+
+    expect(mockTrackEvent).toHaveBeenCalledWith('create_app', {
+      app_mode: AppModeEnum.ADVANCED_CHAT,
+      description: '',
+    })
+    expect(mockNotify).toHaveBeenCalledWith({ type: 'success', message: 'app.newApp.appCreated' })
+    expect(onSuccess).toHaveBeenCalled()
+    expect(onClose).toHaveBeenCalled()
+    await waitFor(() => expect(mockSetItem).toHaveBeenCalledWith(NEED_REFRESH_APP_LIST_KEY, '1'))
+    await waitFor(() => expect(mockGetRedirection).toHaveBeenCalledWith(true, mockApp, mockPush))
+  })
+
+  it('shows error toast when creation fails', async () => {
+    mockCreateApp.mockRejectedValue(new Error('boom'))
+    const { onClose } = renderModal()
+
+    const nameInput = screen.getByPlaceholderText('app.newApp.appNamePlaceholder')
+    fireEvent.change(nameInput, { target: { value: 'My App' } })
+    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Create' }))
+
+    await waitFor(() => expect(mockCreateApp).toHaveBeenCalled())
+    expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'boom' })
+    expect(onClose).not.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/index.tsx b/web/app/components/app/log/index.tsx
index 0e6e4bba2d..52485f5dd2 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -3,7 +3,7 @@ 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'
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 2b13a09b3a..e13ddf21e6 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -12,7 +12,7 @@ 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'
@@ -139,14 +139,14 @@ const getFormattedChatList = (messages: ChatMessage[], conversationId: string, t
         id: item.id,
         content: item.answer,
         agent_thoughts: addFileInfos(item.agent_thoughts ? sortAgentSorts(item.agent_thoughts) : item.agent_thoughts, item.message_files),
-        feedback: item.feedbacks.find(item => item.from_source === 'user'), // user feedback
-        adminFeedback: item.feedbacks.find(item => item.from_source === 'admin'), // admin feedback
+        feedback: item.feedbacks?.find(item => item.from_source === 'user'), // user feedback
+        adminFeedback: item.feedbacks?.find(item => item.from_source === 'admin'), // admin feedback
         feedbackDisabled: false,
         isAnswer: true,
         message_files: getProcessedFilesFromResponse(answerFiles.map((item: any) => ({ ...item, related_id: item.id }))),
         log: [
-          ...item.message,
-          ...(item.message[item.message.length - 1]?.role !== 'assistant'
+          ...(item.message ?? []),
+          ...(item.message?.[item.message.length - 1]?.role !== 'assistant'
             ? [
                 {
                   role: 'assistant',
@@ -165,7 +165,7 @@ const getFormattedChatList = (messages: ChatMessage[], conversationId: string, t
         more: {
           time: dayjs.unix(item.created_at).tz(timezone).format(format),
           tokens: item.answer_tokens + item.message_tokens,
-          latency: item.provider_response_latency.toFixed(2),
+          latency: (item.provider_response_latency ?? 0).toFixed(2),
         },
         citation: item.metadata?.retriever_resources,
         annotation: (() => {
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/embedded/index.spec.tsx b/web/app/components/app/overview/embedded/index.spec.tsx
new file mode 100644
index 0000000000..36f2e980c4
--- /dev/null
+++ b/web/app/components/app/overview/embedded/index.spec.tsx
@@ -0,0 +1,121 @@
+import type { SiteInfo } from '@/models/share'
+import { fireEvent, render, screen } from '@testing-library/react'
+import copy from 'copy-to-clipboard'
+import * as React from 'react'
+
+import { act } from 'react'
+import { afterAll, afterEach, describe, expect, it, vi } from 'vitest'
+import Embedded from './index'
+
+vi.mock('./style.module.css', () => ({
+  __esModule: true,
+  default: {
+    option: 'option',
+    active: 'active',
+    iframeIcon: 'iframeIcon',
+    scriptsIcon: 'scriptsIcon',
+    chromePluginIcon: 'chromePluginIcon',
+    pluginInstallIcon: 'pluginInstallIcon',
+  },
+}))
+const mockThemeBuilder = {
+  buildTheme: vi.fn(),
+  theme: {
+    primaryColor: '#123456',
+  },
+}
+const mockUseAppContext = vi.fn(() => ({
+  langGeniusVersionInfo: {
+    current_env: 'PRODUCTION',
+    current_version: '',
+    latest_version: '',
+    release_date: '',
+    release_notes: '',
+    version: '',
+    can_auto_update: false,
+  },
+}))
+
+vi.mock('copy-to-clipboard', () => ({
+  __esModule: true,
+  default: vi.fn(),
+}))
+vi.mock('@/app/components/base/chat/embedded-chatbot/theme/theme-context', () => ({
+  useThemeContext: () => mockThemeBuilder,
+}))
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => mockUseAppContext(),
+}))
+const mockWindowOpen = vi.spyOn(window, 'open').mockImplementation(() => null)
+const mockedCopy = vi.mocked(copy)
+
+const siteInfo: SiteInfo = {
+  title: 'test site',
+  chat_color_theme: '#000000',
+  chat_color_theme_inverted: false,
+}
+
+const baseProps = {
+  isShow: true,
+  siteInfo,
+  onClose: vi.fn(),
+  appBaseUrl: 'https://app.example.com',
+  accessToken: 'token',
+  className: 'custom-modal',
+}
+
+const getCopyButton = () => {
+  const buttons = screen.getAllByRole('button')
+  const actionButton = buttons.find(button => button.className.includes('action-btn'))
+  expect(actionButton).toBeDefined()
+  return actionButton!
+}
+
+describe('Embedded', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+    mockWindowOpen.mockClear()
+  })
+
+  afterAll(() => {
+    mockWindowOpen.mockRestore()
+  })
+
+  it('builds theme and copies iframe snippet', async () => {
+    await act(async () => {
+      render(<Embedded {...baseProps} />)
+    })
+
+    const actionButton = getCopyButton()
+    const innerDiv = actionButton.querySelector('div')
+    act(() => {
+      fireEvent.click(innerDiv ?? actionButton)
+    })
+
+    expect(mockThemeBuilder.buildTheme).toHaveBeenCalledWith(siteInfo.chat_color_theme, siteInfo.chat_color_theme_inverted)
+    expect(mockedCopy).toHaveBeenCalledWith(expect.stringContaining('/chatbot/token'))
+  })
+
+  it('opens chrome plugin store link when chrome option selected', async () => {
+    await act(async () => {
+      render(<Embedded {...baseProps} />)
+    })
+
+    const optionButtons = document.body.querySelectorAll('[class*="option"]')
+    expect(optionButtons.length).toBeGreaterThanOrEqual(3)
+    act(() => {
+      fireEvent.click(optionButtons[2])
+    })
+
+    const [chromeText] = screen.getAllByText('appOverview.overview.appInfo.embedded.chromePlugin')
+    act(() => {
+      fireEvent.click(chromeText)
+    })
+
+    expect(mockWindowOpen).toHaveBeenCalledWith(
+      'https://chrome.google.com/webstore/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf',
+      '_blank',
+      'noopener,noreferrer',
+    )
+  })
+})
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/text-generate/saved-items/index.spec.tsx b/web/app/components/app/text-generate/saved-items/index.spec.tsx
new file mode 100644
index 0000000000..b83c812c19
--- /dev/null
+++ b/web/app/components/app/text-generate/saved-items/index.spec.tsx
@@ -0,0 +1,67 @@
+import type { ISavedItemsProps } from './index'
+import { fireEvent, render, screen } from '@testing-library/react'
+import copy from 'copy-to-clipboard'
+
+import * as React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Toast from '@/app/components/base/toast'
+import SavedItems from './index'
+
+vi.mock('copy-to-clipboard', () => ({
+  __esModule: true,
+  default: vi.fn(),
+}))
+vi.mock('next/navigation', () => ({
+  useParams: () => ({}),
+  usePathname: () => '/',
+}))
+
+const mockCopy = vi.mocked(copy)
+const toastNotifySpy = vi.spyOn(Toast, 'notify')
+
+const baseProps: ISavedItemsProps = {
+  list: [
+    { id: '1', answer: 'hello world' },
+  ],
+  isShowTextToSpeech: true,
+  onRemove: vi.fn(),
+  onStartCreateContent: vi.fn(),
+}
+
+describe('SavedItems', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    toastNotifySpy.mockClear()
+  })
+
+  it('renders saved answers with metadata and controls', () => {
+    const { container } = render(<SavedItems {...baseProps} />)
+
+    const markdownElement = container.querySelector('.markdown-body')
+    expect(markdownElement).toBeInTheDocument()
+    expect(screen.getByText('11 common.unit.char')).toBeInTheDocument()
+
+    const actionArea = container.querySelector('[class*="bg-components-actionbar-bg"]')
+    const actionButtons = actionArea?.querySelectorAll('button') ?? []
+    expect(actionButtons.length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('copies content and notifies, and triggers remove callback', () => {
+    const handleRemove = vi.fn()
+    const { container } = render(<SavedItems {...baseProps} onRemove={handleRemove} />)
+
+    const actionArea = container.querySelector('[class*="bg-components-actionbar-bg"]')
+    const actionButtons = actionArea?.querySelectorAll('button') ?? []
+    expect(actionButtons.length).toBeGreaterThanOrEqual(3)
+
+    const copyButton = actionButtons[1]
+    const deleteButton = actionButtons[2]
+
+    fireEvent.click(copyButton)
+    expect(mockCopy).toHaveBeenCalledWith('hello world')
+    expect(toastNotifySpy).toHaveBeenCalledWith({ type: 'success', message: 'common.actionMsg.copySuccessfully' })
+
+    fireEvent.click(deleteButton)
+    expect(handleRemove).toHaveBeenCalledWith('1')
+  })
+})
diff --git a/web/app/components/app/text-generate/saved-items/no-data/index.spec.tsx b/web/app/components/app/text-generate/saved-items/no-data/index.spec.tsx
new file mode 100644
index 0000000000..59b950054c
--- /dev/null
+++ b/web/app/components/app/text-generate/saved-items/no-data/index.spec.tsx
@@ -0,0 +1,22 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import NoData from './index'
+
+describe('NoData', () => {
+  it('renders title/description and calls callback when button clicked', () => {
+    const handleStart = vi.fn()
+    render(<NoData onStartCreateContent={handleStart} />)
+
+    const title = screen.getByText('share.generation.savedNoData.title')
+    const description = screen.getByText('share.generation.savedNoData.description')
+    const button = screen.getByRole('button', { name: 'share.generation.savedNoData.startCreateContent' })
+
+    expect(title).toBeInTheDocument()
+    expect(description).toBeInTheDocument()
+    expect(button).toBeInTheDocument()
+
+    fireEvent.click(button)
+    expect(handleStart).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx
index 12438d6d17..5aa467d03d 100644
--- a/web/app/components/app/workflow-log/index.tsx
+++ b/web/app/components/app/workflow-log/index.tsx
@@ -5,7 +5,7 @@ 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'
diff --git a/web/app/components/apps/hooks/use-apps-query-state.spec.ts b/web/app/components/apps/hooks/use-apps-query-state.spec.ts
deleted file mode 100644
index c0a188d7c3..0000000000
--- a/web/app/components/apps/hooks/use-apps-query-state.spec.ts
+++ /dev/null
@@ -1,363 +0,0 @@
-/**
- * Test suite for useAppsQueryState hook
- *
- * This hook manages app filtering state through URL search parameters, enabling:
- * - Bookmarkable filter states (users can share URLs with specific filters active)
- * - Browser history integration (back/forward buttons work with filters)
- * - Multiple filter types: tagIDs, keywords, isCreatedByMe
- *
- * The hook syncs local filter state with URL search parameters, making filter
- * navigation persistent and shareable across sessions.
- */
-import { act, renderHook } from '@testing-library/react'
-
-// Import the hook after mocks are set up
-import useAppsQueryState from './use-apps-query-state'
-
-// Mock Next.js navigation hooks
-const mockPush = vi.fn()
-const mockPathname = '/apps'
-let mockSearchParams = new URLSearchParams()
-
-vi.mock('next/navigation', () => ({
-  usePathname: vi.fn(() => mockPathname),
-  useRouter: vi.fn(() => ({
-    push: mockPush,
-  })),
-  useSearchParams: vi.fn(() => mockSearchParams),
-}))
-
-describe('useAppsQueryState', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockSearchParams = new URLSearchParams()
-  })
-
-  describe('Basic functionality', () => {
-    it('should return query object and setQuery function', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query).toBeDefined()
-      expect(typeof result.current.setQuery).toBe('function')
-    })
-
-    it('should initialize with empty query when no search params exist', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.tagIDs).toBeUndefined()
-      expect(result.current.query.keywords).toBeUndefined()
-      expect(result.current.query.isCreatedByMe).toBe(false)
-    })
-  })
-
-  describe('Parsing search params', () => {
-    it('should parse tagIDs from URL', () => {
-      mockSearchParams.set('tagIDs', 'tag1;tag2;tag3')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2', 'tag3'])
-    })
-
-    it('should parse single tagID from URL', () => {
-      mockSearchParams.set('tagIDs', 'single-tag')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.tagIDs).toEqual(['single-tag'])
-    })
-
-    it('should parse keywords from URL', () => {
-      mockSearchParams.set('keywords', 'search term')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.keywords).toBe('search term')
-    })
-
-    it('should parse isCreatedByMe as true from URL', () => {
-      mockSearchParams.set('isCreatedByMe', 'true')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.isCreatedByMe).toBe(true)
-    })
-
-    it('should parse isCreatedByMe as false for other values', () => {
-      mockSearchParams.set('isCreatedByMe', 'false')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.isCreatedByMe).toBe(false)
-    })
-
-    it('should parse all params together', () => {
-      mockSearchParams.set('tagIDs', 'tag1;tag2')
-      mockSearchParams.set('keywords', 'test')
-      mockSearchParams.set('isCreatedByMe', 'true')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
-      expect(result.current.query.keywords).toBe('test')
-      expect(result.current.query.isCreatedByMe).toBe(true)
-    })
-  })
-
-  describe('Updating query state', () => {
-    it('should update keywords via setQuery', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ keywords: 'new search' })
-      })
-
-      expect(result.current.query.keywords).toBe('new search')
-    })
-
-    it('should update tagIDs via setQuery', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
-      })
-
-      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
-    })
-
-    it('should update isCreatedByMe via setQuery', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ isCreatedByMe: true })
-      })
-
-      expect(result.current.query.isCreatedByMe).toBe(true)
-    })
-
-    it('should support partial updates via callback', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ keywords: 'initial' })
-      })
-
-      act(() => {
-        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
-      })
-
-      expect(result.current.query.keywords).toBe('initial')
-      expect(result.current.query.isCreatedByMe).toBe(true)
-    })
-  })
-
-  describe('URL synchronization', () => {
-    it('should sync keywords to URL', async () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ keywords: 'search' })
-      })
-
-      // Wait for useEffect to run
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 0))
-      })
-
-      expect(mockPush).toHaveBeenCalledWith(
-        expect.stringContaining('keywords=search'),
-        { scroll: false },
-      )
-    })
-
-    it('should sync tagIDs to URL with semicolon separator', async () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
-      })
-
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 0))
-      })
-
-      expect(mockPush).toHaveBeenCalledWith(
-        expect.stringContaining('tagIDs=tag1%3Btag2'),
-        { scroll: false },
-      )
-    })
-
-    it('should sync isCreatedByMe to URL', async () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ isCreatedByMe: true })
-      })
-
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 0))
-      })
-
-      expect(mockPush).toHaveBeenCalledWith(
-        expect.stringContaining('isCreatedByMe=true'),
-        { scroll: false },
-      )
-    })
-
-    it('should remove keywords from URL when empty', async () => {
-      mockSearchParams.set('keywords', 'existing')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ keywords: '' })
-      })
-
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 0))
-      })
-
-      // Should be called without keywords param
-      expect(mockPush).toHaveBeenCalled()
-    })
-
-    it('should remove tagIDs from URL when empty array', async () => {
-      mockSearchParams.set('tagIDs', 'tag1;tag2')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ tagIDs: [] })
-      })
-
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 0))
-      })
-
-      expect(mockPush).toHaveBeenCalled()
-    })
-
-    it('should remove isCreatedByMe from URL when false', async () => {
-      mockSearchParams.set('isCreatedByMe', 'true')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ isCreatedByMe: false })
-      })
-
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 0))
-      })
-
-      expect(mockPush).toHaveBeenCalled()
-    })
-  })
-
-  describe('Edge cases', () => {
-    it('should handle empty tagIDs string in URL', () => {
-      // NOTE: This test documents current behavior where ''.split(';') returns ['']
-      // This could potentially cause filtering issues as it's treated as a tag with empty name
-      // rather than absence of tags. Consider updating parseParams if this is problematic.
-      mockSearchParams.set('tagIDs', '')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.tagIDs).toEqual([''])
-    })
-
-    it('should handle empty keywords', () => {
-      mockSearchParams.set('keywords', '')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.keywords).toBeUndefined()
-    })
-
-    it('should handle undefined tagIDs', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ tagIDs: undefined })
-      })
-
-      expect(result.current.query.tagIDs).toBeUndefined()
-    })
-
-    it('should handle special characters in keywords', () => {
-      // Use URLSearchParams constructor to properly simulate URL decoding behavior
-      // URLSearchParams.get() decodes URL-encoded characters
-      mockSearchParams = new URLSearchParams('keywords=test%20with%20spaces')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      expect(result.current.query.keywords).toBe('test with spaces')
-    })
-  })
-
-  describe('Memoization', () => {
-    it('should return memoized object reference when query unchanged', () => {
-      const { result, rerender } = renderHook(() => useAppsQueryState())
-
-      const firstResult = result.current
-      rerender()
-      const secondResult = result.current
-
-      expect(firstResult.query).toBe(secondResult.query)
-    })
-
-    it('should return new object reference when query changes', () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      const firstQuery = result.current.query
-
-      act(() => {
-        result.current.setQuery({ keywords: 'changed' })
-      })
-
-      expect(result.current.query).not.toBe(firstQuery)
-    })
-  })
-
-  describe('Integration scenarios', () => {
-    it('should handle sequential updates', async () => {
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({ keywords: 'first' })
-      })
-
-      act(() => {
-        result.current.setQuery(prev => ({ ...prev, tagIDs: ['tag1'] }))
-      })
-
-      act(() => {
-        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
-      })
-
-      expect(result.current.query.keywords).toBe('first')
-      expect(result.current.query.tagIDs).toEqual(['tag1'])
-      expect(result.current.query.isCreatedByMe).toBe(true)
-    })
-
-    it('should clear all filters', () => {
-      mockSearchParams.set('tagIDs', 'tag1;tag2')
-      mockSearchParams.set('keywords', 'search')
-      mockSearchParams.set('isCreatedByMe', 'true')
-
-      const { result } = renderHook(() => useAppsQueryState())
-
-      act(() => {
-        result.current.setQuery({
-          tagIDs: undefined,
-          keywords: undefined,
-          isCreatedByMe: false,
-        })
-      })
-
-      expect(result.current.query.tagIDs).toBeUndefined()
-      expect(result.current.query.keywords).toBeUndefined()
-      expect(result.current.query.isCreatedByMe).toBe(false)
-    })
-  })
-})
diff --git a/web/app/components/apps/hooks/use-apps-query-state.spec.tsx b/web/app/components/apps/hooks/use-apps-query-state.spec.tsx
new file mode 100644
index 0000000000..29f2e17556
--- /dev/null
+++ b/web/app/components/apps/hooks/use-apps-query-state.spec.tsx
@@ -0,0 +1,248 @@
+import type { UrlUpdateEvent } from 'nuqs/adapters/testing'
+import type { ReactNode } from 'react'
+/**
+ * Test suite for useAppsQueryState hook
+ *
+ * This hook manages app filtering state through URL search parameters, enabling:
+ * - Bookmarkable filter states (users can share URLs with specific filters active)
+ * - Browser history integration (back/forward buttons work with filters)
+ * - Multiple filter types: tagIDs, keywords, isCreatedByMe
+ */
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
+import useAppsQueryState from './use-apps-query-state'
+
+const renderWithAdapter = (searchParams = '') => {
+  const onUrlUpdate = vi.fn<(event: UrlUpdateEvent) => void>()
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <NuqsTestingAdapter searchParams={searchParams} onUrlUpdate={onUrlUpdate}>
+      {children}
+    </NuqsTestingAdapter>
+  )
+  const { result } = renderHook(() => useAppsQueryState(), { wrapper })
+  return { result, onUrlUpdate }
+}
+
+// Groups scenarios for useAppsQueryState behavior.
+describe('useAppsQueryState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Covers the hook return shape and default values.
+  describe('Initialization', () => {
+    it('should expose query and setQuery when initialized', () => {
+      const { result } = renderWithAdapter()
+
+      expect(result.current.query).toBeDefined()
+      expect(typeof result.current.setQuery).toBe('function')
+    })
+
+    it('should default to empty filters when search params are missing', () => {
+      const { result } = renderWithAdapter()
+
+      expect(result.current.query.tagIDs).toBeUndefined()
+      expect(result.current.query.keywords).toBeUndefined()
+      expect(result.current.query.isCreatedByMe).toBe(false)
+    })
+  })
+
+  // Covers parsing of existing URL search params.
+  describe('Parsing search params', () => {
+    it('should parse tagIDs when URL includes tagIDs', () => {
+      const { result } = renderWithAdapter('?tagIDs=tag1;tag2;tag3')
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2', 'tag3'])
+    })
+
+    it('should parse keywords when URL includes keywords', () => {
+      const { result } = renderWithAdapter('?keywords=search+term')
+
+      expect(result.current.query.keywords).toBe('search term')
+    })
+
+    it('should parse isCreatedByMe when URL includes true value', () => {
+      const { result } = renderWithAdapter('?isCreatedByMe=true')
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should parse all params when URL includes multiple filters', () => {
+      const { result } = renderWithAdapter(
+        '?tagIDs=tag1;tag2&keywords=test&isCreatedByMe=true',
+      )
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+      expect(result.current.query.keywords).toBe('test')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  // Covers updates driven by setQuery.
+  describe('Updating query state', () => {
+    it('should update keywords when setQuery receives keywords', () => {
+      const { result } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ keywords: 'new search' })
+      })
+
+      expect(result.current.query.keywords).toBe('new search')
+    })
+
+    it('should update tagIDs when setQuery receives tagIDs', () => {
+      const { result } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      expect(result.current.query.tagIDs).toEqual(['tag1', 'tag2'])
+    })
+
+    it('should update isCreatedByMe when setQuery receives true', () => {
+      const { result } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+
+    it('should support partial updates when setQuery uses callback', () => {
+      const { result } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ keywords: 'initial' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('initial')
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+
+  // Covers URL updates triggered by query changes.
+  describe('URL synchronization', () => {
+    it('should sync keywords to URL when keywords change', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ keywords: 'search' })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('keywords')).toBe('search')
+      expect(update.options.history).toBe('push')
+    })
+
+    it('should sync tagIDs to URL when tagIDs change', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ tagIDs: ['tag1', 'tag2'] })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('tagIDs')).toBe('tag1;tag2')
+    })
+
+    it('should sync isCreatedByMe to URL when enabled', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: true })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('isCreatedByMe')).toBe('true')
+    })
+
+    it('should remove keywords from URL when keywords are cleared', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter('?keywords=existing')
+
+      act(() => {
+        result.current.setQuery({ keywords: '' })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('keywords')).toBe(false)
+    })
+
+    it('should remove tagIDs from URL when tagIDs are empty', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter('?tagIDs=tag1;tag2')
+
+      act(() => {
+        result.current.setQuery({ tagIDs: [] })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('tagIDs')).toBe(false)
+    })
+
+    it('should remove isCreatedByMe from URL when disabled', async () => {
+      const { result, onUrlUpdate } = renderWithAdapter('?isCreatedByMe=true')
+
+      act(() => {
+        result.current.setQuery({ isCreatedByMe: false })
+      })
+
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('isCreatedByMe')).toBe(false)
+    })
+  })
+
+  // Covers decoding and empty values.
+  describe('Edge cases', () => {
+    it('should treat empty tagIDs as empty list when URL param is empty', () => {
+      const { result } = renderWithAdapter('?tagIDs=')
+
+      expect(result.current.query.tagIDs).toEqual([])
+    })
+
+    it('should treat empty keywords as undefined when URL param is empty', () => {
+      const { result } = renderWithAdapter('?keywords=')
+
+      expect(result.current.query.keywords).toBeUndefined()
+    })
+
+    it('should decode keywords with spaces when URL contains encoded spaces', () => {
+      const { result } = renderWithAdapter('?keywords=test+with+spaces')
+
+      expect(result.current.query.keywords).toBe('test with spaces')
+    })
+  })
+
+  // Covers multi-step updates that mimic real usage.
+  describe('Integration scenarios', () => {
+    it('should keep accumulated filters when updates are sequential', () => {
+      const { result } = renderWithAdapter()
+
+      act(() => {
+        result.current.setQuery({ keywords: 'first' })
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, tagIDs: ['tag1'] }))
+      })
+
+      act(() => {
+        result.current.setQuery(prev => ({ ...prev, isCreatedByMe: true }))
+      })
+
+      expect(result.current.query.keywords).toBe('first')
+      expect(result.current.query.tagIDs).toEqual(['tag1'])
+      expect(result.current.query.isCreatedByMe).toBe(true)
+    })
+  })
+})
diff --git a/web/app/components/apps/hooks/use-apps-query-state.ts b/web/app/components/apps/hooks/use-apps-query-state.ts
index f142b9e97e..ecf7707e8a 100644
--- a/web/app/components/apps/hooks/use-apps-query-state.ts
+++ b/web/app/components/apps/hooks/use-apps-query-state.ts
@@ -1,6 +1,5 @@
-import type { ReadonlyURLSearchParams } from 'next/navigation'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { parseAsArrayOf, parseAsBoolean, parseAsString, useQueryStates } from 'nuqs'
+import { useCallback, useMemo } from 'react'
 
 type AppsQuery = {
   tagIDs?: string[]
@@ -8,54 +7,51 @@ type AppsQuery = {
   isCreatedByMe?: boolean
 }
 
-// Parse the query parameters from the URL search string.
-function parseParams(params: ReadonlyURLSearchParams): AppsQuery {
-  const tagIDs = params.get('tagIDs')?.split(';')
-  const keywords = params.get('keywords') || undefined
-  const isCreatedByMe = params.get('isCreatedByMe') === 'true'
-  return { tagIDs, keywords, isCreatedByMe }
-}
-
-// Update the URL search string with the given query parameters.
-function updateSearchParams(query: AppsQuery, current: URLSearchParams) {
-  const { tagIDs, keywords, isCreatedByMe } = query || {}
-
-  if (tagIDs && tagIDs.length > 0)
-    current.set('tagIDs', tagIDs.join(';'))
-  else
-    current.delete('tagIDs')
-
-  if (keywords)
-    current.set('keywords', keywords)
-  else
-    current.delete('keywords')
-
-  if (isCreatedByMe)
-    current.set('isCreatedByMe', 'true')
-  else
-    current.delete('isCreatedByMe')
-}
+const normalizeKeywords = (value: string | null) => value || undefined
 
 function useAppsQueryState() {
-  const searchParams = useSearchParams()
-  const [query, setQuery] = useState<AppsQuery>(() => parseParams(searchParams))
+  const [urlQuery, setUrlQuery] = useQueryStates(
+    {
+      tagIDs: parseAsArrayOf(parseAsString, ';'),
+      keywords: parseAsString,
+      isCreatedByMe: parseAsBoolean,
+    },
+    {
+      history: 'push',
+    },
+  )
 
-  const router = useRouter()
-  const pathname = usePathname()
-  const syncSearchParams = useCallback((params: URLSearchParams) => {
-    const search = params.toString()
-    const query = search ? `?${search}` : ''
-    router.push(`${pathname}${query}`, { scroll: false })
-  }, [router, pathname])
+  const query = useMemo<AppsQuery>(() => ({
+    tagIDs: urlQuery.tagIDs ?? undefined,
+    keywords: normalizeKeywords(urlQuery.keywords),
+    isCreatedByMe: urlQuery.isCreatedByMe ?? false,
+  }), [urlQuery.isCreatedByMe, urlQuery.keywords, urlQuery.tagIDs])
 
-  // Update the URL search string whenever the query changes.
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams)
-    updateSearchParams(query, params)
-    syncSearchParams(params)
-  }, [query, searchParams, syncSearchParams])
+  const setQuery = useCallback((next: AppsQuery | ((prev: AppsQuery) => AppsQuery)) => {
+    const buildPatch = (patch: AppsQuery) => {
+      const result: Partial<typeof urlQuery> = {}
+      if ('tagIDs' in patch)
+        result.tagIDs = patch.tagIDs && patch.tagIDs.length > 0 ? patch.tagIDs : null
+      if ('keywords' in patch)
+        result.keywords = patch.keywords ? patch.keywords : null
+      if ('isCreatedByMe' in patch)
+        result.isCreatedByMe = patch.isCreatedByMe ? true : null
+      return result
+    }
 
-  return useMemo(() => ({ query, setQuery }), [query])
+    if (typeof next === 'function') {
+      setUrlQuery(prev => buildPatch(next({
+        tagIDs: prev.tagIDs ?? undefined,
+        keywords: normalizeKeywords(prev.keywords),
+        isCreatedByMe: prev.isCreatedByMe ?? false,
+      })))
+      return
+    }
+
+    setUrlQuery(buildPatch(next))
+  }, [setUrlQuery])
+
+  return useMemo(() => ({ query, setQuery }), [query, setQuery])
 }
 
 export default useAppsQueryState
diff --git a/web/app/components/apps/list.spec.tsx b/web/app/components/apps/list.spec.tsx
index 244a8d997d..cde601d61f 100644
--- a/web/app/components/apps/list.spec.tsx
+++ b/web/app/components/apps/list.spec.tsx
@@ -57,8 +57,13 @@ vi.mock('./hooks/use-dsl-drag-drop', () => ({
 }))
 
 const mockSetActiveTab = vi.fn()
-vi.mock('@/hooks/use-tab-searchparams', () => ({
-  useTabSearchParams: () => ['all', mockSetActiveTab],
+vi.mock('nuqs', () => ({
+  useQueryState: () => ['all', mockSetActiveTab],
+  parseAsString: {
+    withDefault: () => ({
+      withOptions: () => ({}),
+    }),
+  },
 }))
 
 // Mock service hooks - use object for mutable state (vi.mock is hoisted)
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index cee0f892f2..839b0dd50f 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -13,6 +13,7 @@ import dynamic from 'next/dynamic'
 import {
   useRouter,
 } from 'next/navigation'
+import { parseAsString, useQueryState } from 'nuqs'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
@@ -24,7 +25,6 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { CheckModal } from '@/hooks/use-pay'
-import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum } from '@/types/app'
 import AppCard from './app-card'
@@ -47,9 +47,10 @@ const List = () => {
   const router = useRouter()
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
   const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
-  const [activeTab, setActiveTab] = useTabSearchParams({
-    defaultTab: 'all',
-  })
+  const [activeTab, setActiveTab] = useQueryState(
+    'category',
+    parseAsString.withDefault('all').withOptions({ history: 'push' }),
+  )
   const { query: { tagIDs = [], keywords = '', isCreatedByMe: queryIsCreatedByMe = false }, setQuery } = useAppsQueryState()
   const [isCreatedByMe, setIsCreatedByMe] = useState(queryIsCreatedByMe)
   const [tagFilterValue, setTagFilterValue] = useState<string[]>(tagIDs)
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/avatar/index.spec.tsx b/web/app/components/base/avatar/index.spec.tsx
new file mode 100644
index 0000000000..e85690880b
--- /dev/null
+++ b/web/app/components/base/avatar/index.spec.tsx
@@ -0,0 +1,308 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Avatar from './index'
+
+describe('Avatar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests - verify component renders correctly in different states
+  describe('Rendering', () => {
+    it('should render img element with correct alt and src when avatar URL is provided', () => {
+      const avatarUrl = 'https://example.com/avatar.jpg'
+      const props = { name: 'John Doe', avatar: avatarUrl }
+
+      render(<Avatar {...props} />)
+
+      const img = screen.getByRole('img', { name: 'John Doe' })
+      expect(img).toBeInTheDocument()
+      expect(img).toHaveAttribute('src', avatarUrl)
+    })
+
+    it('should render fallback div with uppercase initial when avatar is null', () => {
+      const props = { name: 'alice', avatar: null }
+
+      render(<Avatar {...props} />)
+
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.getByText('A')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests - verify all props are applied correctly
+  describe('Props', () => {
+    describe('size prop', () => {
+      it.each([
+        { size: undefined, expected: '30px', label: 'default (30px)' },
+        { size: 50, expected: '50px', label: 'custom (50px)' },
+      ])('should apply $label size to img element', ({ size, expected }) => {
+        const props = { name: 'Test', avatar: 'https://example.com/avatar.jpg', size }
+
+        render(<Avatar {...props} />)
+
+        expect(screen.getByRole('img')).toHaveStyle({
+          width: expected,
+          height: expected,
+          fontSize: expected,
+          lineHeight: expected,
+        })
+      })
+
+      it('should apply size to fallback div when avatar is null', () => {
+        const props = { name: 'Test', avatar: null, size: 40 }
+
+        render(<Avatar {...props} />)
+
+        const textElement = screen.getByText('T')
+        const outerDiv = textElement.parentElement as HTMLElement
+        expect(outerDiv).toHaveStyle({ width: '40px', height: '40px' })
+      })
+    })
+
+    describe('className prop', () => {
+      it('should merge className with default avatar classes on img', () => {
+        const props = {
+          name: 'Test',
+          avatar: 'https://example.com/avatar.jpg',
+          className: 'custom-class',
+        }
+
+        render(<Avatar {...props} />)
+
+        const img = screen.getByRole('img')
+        expect(img).toHaveClass('custom-class')
+        expect(img).toHaveClass('shrink-0', 'flex', 'items-center', 'rounded-full', 'bg-primary-600')
+      })
+
+      it('should merge className with default avatar classes on fallback div', () => {
+        const props = {
+          name: 'Test',
+          avatar: null,
+          className: 'my-custom-class',
+        }
+
+        render(<Avatar {...props} />)
+
+        const textElement = screen.getByText('T')
+        const outerDiv = textElement.parentElement as HTMLElement
+        expect(outerDiv).toHaveClass('my-custom-class')
+        expect(outerDiv).toHaveClass('shrink-0', 'flex', 'items-center', 'rounded-full', 'bg-primary-600')
+      })
+    })
+
+    describe('textClassName prop', () => {
+      it('should apply textClassName to the initial text element', () => {
+        const props = {
+          name: 'Test',
+          avatar: null,
+          textClassName: 'custom-text-class',
+        }
+
+        render(<Avatar {...props} />)
+
+        const textElement = screen.getByText('T')
+        expect(textElement).toHaveClass('custom-text-class')
+        expect(textElement).toHaveClass('scale-[0.4]', 'text-center', 'text-white')
+      })
+    })
+  })
+
+  // State Management tests - verify useState and useEffect behavior
+  describe('State Management', () => {
+    it('should switch to fallback when image fails to load', async () => {
+      const props = { name: 'John', avatar: 'https://example.com/broken.jpg' }
+      render(<Avatar {...props} />)
+      const img = screen.getByRole('img')
+
+      fireEvent.error(img)
+
+      await waitFor(() => {
+        expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      })
+      expect(screen.getByText('J')).toBeInTheDocument()
+    })
+
+    it('should reset error state when avatar URL changes', async () => {
+      const initialProps = { name: 'John', avatar: 'https://example.com/broken.jpg' }
+      const { rerender } = render(<Avatar {...initialProps} />)
+      const img = screen.getByRole('img')
+
+      // First, trigger error
+      fireEvent.error(img)
+      await waitFor(() => {
+        expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      })
+      expect(screen.getByText('J')).toBeInTheDocument()
+
+      rerender(<Avatar name="John" avatar="https://example.com/new-avatar.jpg" />)
+
+      await waitFor(() => {
+        expect(screen.getByRole('img')).toBeInTheDocument()
+      })
+      expect(screen.queryByText('J')).not.toBeInTheDocument()
+    })
+
+    it('should not reset error state if avatar becomes null', async () => {
+      const initialProps = { name: 'John', avatar: 'https://example.com/broken.jpg' }
+      const { rerender } = render(<Avatar {...initialProps} />)
+
+      // Trigger error
+      fireEvent.error(screen.getByRole('img'))
+      await waitFor(() => {
+        expect(screen.getByText('J')).toBeInTheDocument()
+      })
+
+      rerender(<Avatar name="John" avatar={null} />)
+
+      await waitFor(() => {
+        expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      })
+      expect(screen.getByText('J')).toBeInTheDocument()
+    })
+  })
+
+  // Event Handlers tests - verify onError callback behavior
+  describe('Event Handlers', () => {
+    it('should call onError with true when image fails to load', () => {
+      const onErrorMock = vi.fn()
+      const props = {
+        name: 'John',
+        avatar: 'https://example.com/broken.jpg',
+        onError: onErrorMock,
+      }
+      render(<Avatar {...props} />)
+
+      fireEvent.error(screen.getByRole('img'))
+
+      expect(onErrorMock).toHaveBeenCalledTimes(1)
+      expect(onErrorMock).toHaveBeenCalledWith(true)
+    })
+
+    it('should call onError with false when image loads successfully', () => {
+      const onErrorMock = vi.fn()
+      const props = {
+        name: 'John',
+        avatar: 'https://example.com/avatar.jpg',
+        onError: onErrorMock,
+      }
+      render(<Avatar {...props} />)
+
+      fireEvent.load(screen.getByRole('img'))
+
+      expect(onErrorMock).toHaveBeenCalledTimes(1)
+      expect(onErrorMock).toHaveBeenCalledWith(false)
+    })
+
+    it('should not throw when onError is not provided', async () => {
+      const props = { name: 'John', avatar: 'https://example.com/broken.jpg' }
+      render(<Avatar {...props} />)
+
+      expect(() => fireEvent.error(screen.getByRole('img'))).not.toThrow()
+      await waitFor(() => {
+        expect(screen.getByText('J')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Edge Cases tests - verify handling of unusual inputs
+  describe('Edge Cases', () => {
+    it('should handle empty string name gracefully', () => {
+      const props = { name: '', avatar: null }
+
+      const { container } = render(<Avatar {...props} />)
+
+      // Note: Using querySelector here because empty name produces no visible text,
+      // making semantic queries (getByRole, getByText) impossible
+      const textElement = container.querySelector('.text-white') as HTMLElement
+      expect(textElement).toBeInTheDocument()
+      expect(textElement.textContent).toBe('')
+    })
+
+    it.each([
+      { name: '中文名', expected: '中', label: 'Chinese characters' },
+      { name: '123User', expected: '1', label: 'number' },
+    ])('should display first character when name starts with $label', ({ name, expected }) => {
+      const props = { name, avatar: null }
+
+      render(<Avatar {...props} />)
+
+      expect(screen.getByText(expected)).toBeInTheDocument()
+    })
+
+    it('should handle empty string avatar as falsy value', () => {
+      const props = { name: 'Test', avatar: '' as string | null }
+
+      render(<Avatar {...props} />)
+
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
+      expect(screen.getByText('T')).toBeInTheDocument()
+    })
+
+    it('should handle undefined className and textClassName', () => {
+      const props = { name: 'Test', avatar: null }
+
+      render(<Avatar {...props} />)
+
+      const textElement = screen.getByText('T')
+      const outerDiv = textElement.parentElement as HTMLElement
+      expect(outerDiv).toHaveClass('shrink-0', 'flex', 'items-center', 'rounded-full', 'bg-primary-600')
+    })
+
+    it.each([
+      { size: 0, expected: '0px', label: 'zero' },
+      { size: 1000, expected: '1000px', label: 'very large' },
+    ])('should handle $label size value', ({ size, expected }) => {
+      const props = { name: 'Test', avatar: null, size }
+
+      render(<Avatar {...props} />)
+
+      const textElement = screen.getByText('T')
+      const outerDiv = textElement.parentElement as HTMLElement
+      expect(outerDiv).toHaveStyle({ width: expected, height: expected })
+    })
+  })
+
+  // Combined props tests - verify props work together correctly
+  describe('Combined Props', () => {
+    it('should apply all props correctly when used together', () => {
+      const onErrorMock = vi.fn()
+      const props = {
+        name: 'Test User',
+        avatar: 'https://example.com/avatar.jpg',
+        size: 64,
+        className: 'custom-avatar',
+        onError: onErrorMock,
+      }
+
+      render(<Avatar {...props} />)
+
+      const img = screen.getByRole('img')
+      expect(img).toHaveAttribute('alt', 'Test User')
+      expect(img).toHaveAttribute('src', 'https://example.com/avatar.jpg')
+      expect(img).toHaveStyle({ width: '64px', height: '64px' })
+      expect(img).toHaveClass('custom-avatar')
+
+      // Trigger load to verify onError callback
+      fireEvent.load(img)
+      expect(onErrorMock).toHaveBeenCalledWith(false)
+    })
+
+    it('should apply all fallback props correctly when used together', () => {
+      const props = {
+        name: 'Fallback User',
+        avatar: null,
+        size: 48,
+        className: 'fallback-custom',
+        textClassName: 'custom-text-style',
+      }
+
+      render(<Avatar {...props} />)
+
+      const textElement = screen.getByText('F')
+      const outerDiv = textElement.parentElement as HTMLElement
+      expect(outerDiv).toHaveClass('fallback-custom')
+      expect(outerDiv).toHaveStyle({ width: '48px', height: '48px' })
+      expect(textElement).toHaveClass('custom-text-style')
+    })
+  })
+})
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/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.spec.tsx b/web/app/components/base/chat/chat-with-history/hooks.spec.tsx
new file mode 100644
index 0000000000..32ef133453
--- /dev/null
+++ b/web/app/components/base/chat/chat-with-history/hooks.spec.tsx
@@ -0,0 +1,270 @@
+import type { ReactNode } from 'react'
+import type { ChatConfig } from '../types'
+import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { ToastProvider } from '@/app/components/base/toast'
+import {
+  fetchChatList,
+  fetchConversations,
+  generationConversationName,
+} from '@/service/share'
+import { shareQueryKeys } from '@/service/use-share'
+import { CONVERSATION_ID_INFO } from '../constants'
+import { useChatWithHistory } from './hooks'
+
+vi.mock('@/hooks/use-app-favicon', () => ({
+  useAppFavicon: vi.fn(),
+}))
+
+vi.mock('@/i18n-config/i18next-config', () => ({
+  changeLanguage: vi.fn().mockResolvedValue(undefined),
+}))
+
+const mockStoreState: {
+  appInfo: AppData | null
+  appMeta: AppMeta | null
+  appParams: ChatConfig | null
+} = {
+  appInfo: null,
+  appMeta: null,
+  appParams: null,
+}
+
+const useWebAppStoreMock = vi.fn((selector?: (state: typeof mockStoreState) => unknown) => {
+  return selector ? selector(mockStoreState) : mockStoreState
+})
+
+vi.mock('@/context/web-app-context', () => ({
+  useWebAppStore: (selector?: (state: typeof mockStoreState) => unknown) => useWebAppStoreMock(selector),
+}))
+
+vi.mock('../utils', async () => {
+  const actual = await vi.importActual<typeof import('../utils')>('../utils')
+  return {
+    ...actual,
+    getProcessedSystemVariablesFromUrlParams: vi.fn().mockResolvedValue({ user_id: 'user-1' }),
+    getRawInputsFromUrlParams: vi.fn().mockResolvedValue({}),
+    getRawUserVariablesFromUrlParams: vi.fn().mockResolvedValue({}),
+  }
+})
+
+vi.mock('@/service/share', () => ({
+  fetchChatList: vi.fn(),
+  fetchConversations: vi.fn(),
+  generationConversationName: vi.fn(),
+  fetchAppInfo: vi.fn(),
+  fetchAppMeta: vi.fn(),
+  fetchAppParams: vi.fn(),
+  getAppAccessModeByAppCode: vi.fn(),
+  delConversation: vi.fn(),
+  pinConversation: vi.fn(),
+  renameConversation: vi.fn(),
+  unpinConversation: vi.fn(),
+  updateFeedback: vi.fn(),
+}))
+
+const mockFetchConversations = vi.mocked(fetchConversations)
+const mockFetchChatList = vi.mocked(fetchChatList)
+const mockGenerationConversationName = vi.mocked(generationConversationName)
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const createWrapper = (queryClient: QueryClient) => {
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <ToastProvider>{children}</ToastProvider>
+    </QueryClientProvider>
+  )
+}
+
+const renderWithClient = <T,>(hook: () => T) => {
+  const queryClient = createQueryClient()
+  const wrapper = createWrapper(queryClient)
+  return {
+    queryClient,
+    ...renderHook(hook, { wrapper }),
+  }
+}
+
+const createConversationItem = (overrides: Partial<ConversationItem> = {}): ConversationItem => ({
+  id: 'conversation-1',
+  name: 'Conversation 1',
+  inputs: null,
+  introduction: '',
+  ...overrides,
+})
+
+const createConversationData = (overrides: Partial<AppConversationData> = {}): AppConversationData => ({
+  data: [createConversationItem()],
+  has_more: false,
+  limit: 100,
+  ...overrides,
+})
+
+const setConversationIdInfo = (appId: string, conversationId: string) => {
+  const value = {
+    [appId]: {
+      'user-1': conversationId,
+      'DEFAULT': conversationId,
+    },
+  }
+  localStorage.setItem(CONVERSATION_ID_INFO, JSON.stringify(value))
+}
+
+// Scenario: useChatWithHistory integrates share queries for conversations and chat list.
+describe('useChatWithHistory', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.removeItem(CONVERSATION_ID_INFO)
+    mockStoreState.appInfo = {
+      app_id: 'app-1',
+      custom_config: null,
+      site: {
+        title: 'Test App',
+        default_language: 'en-US',
+      },
+    }
+    mockStoreState.appMeta = {
+      tool_icons: {},
+    }
+    mockStoreState.appParams = null
+    setConversationIdInfo('app-1', 'conversation-1')
+  })
+
+  afterEach(() => {
+    localStorage.removeItem(CONVERSATION_ID_INFO)
+  })
+
+  // Scenario: share query results populate conversation lists and trigger chat list fetch.
+  describe('Share queries', () => {
+    it('should load pinned, unpinned, and chat list data from share queries', async () => {
+      // Arrange
+      const pinnedData = createConversationData({
+        data: [createConversationItem({ id: 'pinned-1', name: 'Pinned' })],
+      })
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      mockFetchConversations.mockImplementation(async (_isInstalledApp, _appId, _lastId, pinned) => {
+        return pinned ? pinnedData : listData
+      })
+      mockFetchChatList.mockResolvedValue({ data: [] })
+
+      // Act
+      const { result } = renderWithClient(() => useChatWithHistory())
+
+      // Assert
+      await waitFor(() => {
+        expect(mockFetchConversations).toHaveBeenCalledWith(false, 'app-1', undefined, true, 100)
+      })
+      await waitFor(() => {
+        expect(mockFetchConversations).toHaveBeenCalledWith(false, 'app-1', undefined, false, 100)
+      })
+      await waitFor(() => {
+        expect(mockFetchChatList).toHaveBeenCalledWith('conversation-1', false, 'app-1')
+      })
+      expect(result.current.pinnedConversationList).toEqual(pinnedData.data)
+      expect(result.current.conversationList).toEqual(listData.data)
+    })
+  })
+
+  // Scenario: completion invalidates share caches and merges generated names.
+  describe('New conversation completion', () => {
+    it('should invalidate share conversations and apply generated name', async () => {
+      // Arrange
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      const generatedConversation = createConversationItem({
+        id: 'conversation-new',
+        name: 'Generated',
+      })
+      mockFetchConversations.mockResolvedValue(listData)
+      mockFetchChatList.mockResolvedValue({ data: [] })
+      mockGenerationConversationName.mockResolvedValue(generatedConversation)
+
+      const { result, queryClient } = renderWithClient(() => useChatWithHistory())
+      const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries')
+
+      // Act
+      act(() => {
+        result.current.handleNewConversationCompleted('conversation-new')
+      })
+
+      // Assert
+      await waitFor(() => {
+        expect(mockGenerationConversationName).toHaveBeenCalledWith(false, 'app-1', 'conversation-new')
+      })
+      await waitFor(() => {
+        expect(result.current.conversationList[0]).toEqual(generatedConversation)
+      })
+      expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: shareQueryKeys.conversations })
+    })
+  })
+
+  // Scenario: chat list queries stop when reload key is cleared.
+  describe('Chat list gating', () => {
+    it('should not refetch chat list when newConversationId matches current conversation', async () => {
+      // Arrange
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      mockFetchConversations.mockResolvedValue(listData)
+      mockFetchChatList.mockResolvedValue({ data: [] })
+      mockGenerationConversationName.mockResolvedValue(createConversationItem({ id: 'conversation-1' }))
+
+      const { result } = renderWithClient(() => useChatWithHistory())
+
+      await waitFor(() => {
+        expect(mockFetchChatList).toHaveBeenCalledTimes(1)
+      })
+
+      // Act
+      act(() => {
+        result.current.handleNewConversationCompleted('conversation-1')
+      })
+
+      // Assert
+      await waitFor(() => {
+        expect(result.current.chatShouldReloadKey).toBe('')
+      })
+      expect(mockFetchChatList).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Scenario: conversation id updates persist to localStorage.
+  describe('Conversation id persistence', () => {
+    it('should store new conversation id in localStorage after completion', async () => {
+      // Arrange
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      mockFetchConversations.mockResolvedValue(listData)
+      mockFetchChatList.mockResolvedValue({ data: [] })
+      mockGenerationConversationName.mockResolvedValue(createConversationItem({ id: 'conversation-new' }))
+
+      const { result } = renderWithClient(() => useChatWithHistory())
+
+      // Act
+      act(() => {
+        result.current.handleNewConversationCompleted('conversation-new')
+      })
+
+      // Assert
+      await waitFor(() => {
+        const storedValue = localStorage.getItem(CONVERSATION_ID_INFO)
+        const parsed = storedValue ? JSON.parse(storedValue) : {}
+        const storedUserId = parsed['app-1']?.['user-1']
+        const storedDefaultId = parsed['app-1']?.DEFAULT
+        expect([storedUserId, storedDefaultId]).toContain('conversation-new')
+      })
+    })
+  })
+})
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..8a3617129e 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,
@@ -20,7 +20,6 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
 import { useToastContext } from '@/app/components/base/toast'
 import { InputVarType } from '@/app/components/workflow/types'
@@ -29,14 +28,17 @@ import { useAppFavicon } from '@/hooks/use-app-favicon'
 import { changeLanguage } from '@/i18n-config/i18next-config'
 import {
   delConversation,
-  fetchChatList,
-  fetchConversations,
-  generationConversationName,
   pinConversation,
   renameConversation,
   unpinConversation,
   updateFeedback,
 } from '@/service/share'
+import {
+  useInvalidateShareConversations,
+  useShareChatList,
+  useShareConversationName,
+  useShareConversations,
+} from '@/service/use-share'
 import { TransferMethod } from '@/types/app'
 import { addFileInfos, sortAgentSorts } from '../../../tools/utils'
 import { CONVERSATION_ID_INFO } from '../constants'
@@ -174,21 +176,42 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     return currentConversationId
   }, [currentConversationId, newConversationId])
 
-  const { data: appPinnedConversationData, mutate: mutateAppPinnedConversationData } = useSWR(
-    appId ? ['appConversationData', isInstalledApp, appId, true] : null,
-    () => fetchConversations(isInstalledApp, appId, undefined, true, 100),
-    { revalidateOnFocus: false, revalidateOnReconnect: false },
-  )
-  const { data: appConversationData, isLoading: appConversationDataLoading, mutate: mutateAppConversationData } = useSWR(
-    appId ? ['appConversationData', isInstalledApp, appId, false] : null,
-    () => fetchConversations(isInstalledApp, appId, undefined, false, 100),
-    { revalidateOnFocus: false, revalidateOnReconnect: false },
-  )
-  const { data: appChatListData, isLoading: appChatListDataLoading } = useSWR(
-    chatShouldReloadKey ? ['appChatList', chatShouldReloadKey, isInstalledApp, appId] : null,
-    () => fetchChatList(chatShouldReloadKey, isInstalledApp, appId),
-    { revalidateOnFocus: false, revalidateOnReconnect: false },
-  )
+  const { data: appPinnedConversationData } = useShareConversations({
+    isInstalledApp,
+    appId,
+    pinned: true,
+    limit: 100,
+  }, {
+    enabled: !!appId,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+  const {
+    data: appConversationData,
+    isLoading: appConversationDataLoading,
+  } = useShareConversations({
+    isInstalledApp,
+    appId,
+    pinned: false,
+    limit: 100,
+  }, {
+    enabled: !!appId,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+  const {
+    data: appChatListData,
+    isLoading: appChatListDataLoading,
+  } = useShareChatList({
+    conversationId: chatShouldReloadKey,
+    isInstalledApp,
+    appId,
+  }, {
+    enabled: !!chatShouldReloadKey,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+  const invalidateShareConversations = useInvalidateShareConversations()
 
   const [clearChatList, setClearChatList] = useState(false)
   const [isResponding, setIsResponding] = useState(false)
@@ -309,7 +332,13 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     handleNewConversationInputsChange(conversationInputs)
   }, [handleNewConversationInputsChange, inputsForms])
 
-  const { data: newConversation } = useSWR(newConversationId ? [isInstalledApp, appId, newConversationId] : null, () => generationConversationName(isInstalledApp, appId, newConversationId), { revalidateOnFocus: false })
+  const { data: newConversation } = useShareConversationName({
+    conversationId: newConversationId,
+    isInstalledApp,
+    appId,
+  }, {
+    refetchOnWindowFocus: false,
+  })
   const [originConversationList, setOriginConversationList] = useState<ConversationItem[]>([])
   useEffect(() => {
     if (appConversationData?.data && !appConversationDataLoading)
@@ -429,9 +458,8 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     setClearChatList(true)
   }, [handleChangeConversation, setShowNewConversationItemInList, handleNewConversationInputsChange, setClearChatList, inputsForms])
   const handleUpdateConversationList = useCallback(() => {
-    mutateAppConversationData()
-    mutateAppPinnedConversationData()
-  }, [mutateAppConversationData, mutateAppPinnedConversationData])
+    invalidateShareConversations()
+  }, [invalidateShareConversations])
 
   const handlePinConversation = useCallback(async (conversationId: string) => {
     await pinConversation(isInstalledApp, appId, conversationId)
@@ -518,8 +546,8 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     setNewConversationId(newConversationId)
     handleConversationIdInfoChange(newConversationId)
     setShowNewConversationItemInList(false)
-    mutateAppConversationData()
-  }, [mutateAppConversationData, handleConversationIdInfoChange])
+    invalidateShareConversations()
+  }, [handleConversationIdInfoChange, invalidateShareConversations])
 
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
     await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, isInstalledApp, appId)
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.spec.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx
new file mode 100644
index 0000000000..ca6a90c4d8
--- /dev/null
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx
@@ -0,0 +1,257 @@
+import type { ReactNode } from 'react'
+import type { ChatConfig } from '../types'
+import type { AppConversationData, AppData, AppMeta, ConversationItem } from '@/models/share'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { ToastProvider } from '@/app/components/base/toast'
+import {
+  fetchChatList,
+  fetchConversations,
+  generationConversationName,
+} from '@/service/share'
+import { shareQueryKeys } from '@/service/use-share'
+import { CONVERSATION_ID_INFO } from '../constants'
+import { useEmbeddedChatbot } from './hooks'
+
+vi.mock('@/i18n-config/i18next-config', () => ({
+  changeLanguage: vi.fn().mockResolvedValue(undefined),
+}))
+
+const mockStoreState: {
+  appInfo: AppData | null
+  appMeta: AppMeta | null
+  appParams: ChatConfig | null
+  embeddedConversationId: string | null
+  embeddedUserId: string | null
+} = {
+  appInfo: null,
+  appMeta: null,
+  appParams: null,
+  embeddedConversationId: null,
+  embeddedUserId: null,
+}
+
+const useWebAppStoreMock = vi.fn((selector?: (state: typeof mockStoreState) => unknown) => {
+  return selector ? selector(mockStoreState) : mockStoreState
+})
+
+vi.mock('@/context/web-app-context', () => ({
+  useWebAppStore: (selector?: (state: typeof mockStoreState) => unknown) => useWebAppStoreMock(selector),
+}))
+
+vi.mock('../utils', async () => {
+  const actual = await vi.importActual<typeof import('../utils')>('../utils')
+  return {
+    ...actual,
+    getProcessedInputsFromUrlParams: vi.fn().mockResolvedValue({}),
+    getProcessedSystemVariablesFromUrlParams: vi.fn().mockResolvedValue({}),
+    getProcessedUserVariablesFromUrlParams: vi.fn().mockResolvedValue({}),
+  }
+})
+
+vi.mock('@/service/share', () => ({
+  fetchChatList: vi.fn(),
+  fetchConversations: vi.fn(),
+  generationConversationName: vi.fn(),
+  fetchAppInfo: vi.fn(),
+  fetchAppMeta: vi.fn(),
+  fetchAppParams: vi.fn(),
+  getAppAccessModeByAppCode: vi.fn(),
+  updateFeedback: vi.fn(),
+}))
+
+const mockFetchConversations = vi.mocked(fetchConversations)
+const mockFetchChatList = vi.mocked(fetchChatList)
+const mockGenerationConversationName = vi.mocked(generationConversationName)
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const createWrapper = (queryClient: QueryClient) => {
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <ToastProvider>{children}</ToastProvider>
+    </QueryClientProvider>
+  )
+}
+
+const renderWithClient = <T,>(hook: () => T) => {
+  const queryClient = createQueryClient()
+  const wrapper = createWrapper(queryClient)
+  return {
+    queryClient,
+    ...renderHook(hook, { wrapper }),
+  }
+}
+
+const createConversationItem = (overrides: Partial<ConversationItem> = {}): ConversationItem => ({
+  id: 'conversation-1',
+  name: 'Conversation 1',
+  inputs: null,
+  introduction: '',
+  ...overrides,
+})
+
+const createConversationData = (overrides: Partial<AppConversationData> = {}): AppConversationData => ({
+  data: [createConversationItem()],
+  has_more: false,
+  limit: 100,
+  ...overrides,
+})
+
+// Scenario: useEmbeddedChatbot integrates share queries for conversations and chat list.
+describe('useEmbeddedChatbot', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.removeItem(CONVERSATION_ID_INFO)
+    mockStoreState.appInfo = {
+      app_id: 'app-1',
+      custom_config: null,
+      site: {
+        title: 'Test App',
+        default_language: 'en-US',
+      },
+    }
+    mockStoreState.appMeta = {
+      tool_icons: {},
+    }
+    mockStoreState.appParams = null
+    mockStoreState.embeddedConversationId = 'conversation-1'
+    mockStoreState.embeddedUserId = 'embedded-user-1'
+  })
+
+  afterEach(() => {
+    localStorage.removeItem(CONVERSATION_ID_INFO)
+  })
+
+  // Scenario: share query results populate conversation lists and trigger chat list fetch.
+  describe('Share queries', () => {
+    it('should load pinned, unpinned, and chat list data from share queries', async () => {
+      // Arrange
+      const pinnedData = createConversationData({
+        data: [createConversationItem({ id: 'pinned-1', name: 'Pinned' })],
+      })
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      mockFetchConversations.mockImplementation(async (_isInstalledApp, _appId, _lastId, pinned) => {
+        return pinned ? pinnedData : listData
+      })
+      mockFetchChatList.mockResolvedValue({ data: [] })
+
+      // Act
+      const { result } = renderWithClient(() => useEmbeddedChatbot())
+
+      // Assert
+      await waitFor(() => {
+        expect(mockFetchConversations).toHaveBeenCalledWith(false, 'app-1', undefined, true, 100)
+      })
+      await waitFor(() => {
+        expect(mockFetchConversations).toHaveBeenCalledWith(false, 'app-1', undefined, false, 100)
+      })
+      await waitFor(() => {
+        expect(mockFetchChatList).toHaveBeenCalledWith('conversation-1', false, 'app-1')
+      })
+      expect(result.current.pinnedConversationList).toEqual(pinnedData.data)
+      expect(result.current.conversationList).toEqual(listData.data)
+    })
+  })
+
+  // Scenario: completion invalidates share caches and merges generated names.
+  describe('New conversation completion', () => {
+    it('should invalidate share conversations and apply generated name', async () => {
+      // Arrange
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      const generatedConversation = createConversationItem({
+        id: 'conversation-new',
+        name: 'Generated',
+      })
+      mockFetchConversations.mockResolvedValue(listData)
+      mockFetchChatList.mockResolvedValue({ data: [] })
+      mockGenerationConversationName.mockResolvedValue(generatedConversation)
+
+      const { result, queryClient } = renderWithClient(() => useEmbeddedChatbot())
+      const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries')
+
+      // Act
+      act(() => {
+        result.current.handleNewConversationCompleted('conversation-new')
+      })
+
+      // Assert
+      await waitFor(() => {
+        expect(mockGenerationConversationName).toHaveBeenCalledWith(false, 'app-1', 'conversation-new')
+      })
+      await waitFor(() => {
+        expect(result.current.conversationList[0]).toEqual(generatedConversation)
+      })
+      expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: shareQueryKeys.conversations })
+    })
+  })
+
+  // Scenario: chat list queries stop when reload key is cleared.
+  describe('Chat list gating', () => {
+    it('should not refetch chat list when newConversationId matches current conversation', async () => {
+      // Arrange
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      mockFetchConversations.mockResolvedValue(listData)
+      mockFetchChatList.mockResolvedValue({ data: [] })
+      mockGenerationConversationName.mockResolvedValue(createConversationItem({ id: 'conversation-1' }))
+
+      const { result } = renderWithClient(() => useEmbeddedChatbot())
+
+      await waitFor(() => {
+        expect(mockFetchChatList).toHaveBeenCalledTimes(1)
+      })
+
+      // Act
+      act(() => {
+        result.current.handleNewConversationCompleted('conversation-1')
+      })
+
+      // Assert
+      await waitFor(() => {
+        expect(result.current.chatShouldReloadKey).toBe('')
+      })
+      expect(mockFetchChatList).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Scenario: conversation id updates persist to localStorage.
+  describe('Conversation id persistence', () => {
+    it('should store new conversation id in localStorage after completion', async () => {
+      // Arrange
+      const listData = createConversationData({
+        data: [createConversationItem({ id: 'conversation-1', name: 'First' })],
+      })
+      mockFetchConversations.mockResolvedValue(listData)
+      mockFetchChatList.mockResolvedValue({ data: [] })
+      mockGenerationConversationName.mockResolvedValue(createConversationItem({ id: 'conversation-new' }))
+
+      const { result } = renderWithClient(() => useEmbeddedChatbot())
+
+      // Act
+      act(() => {
+        result.current.handleNewConversationCompleted('conversation-new')
+      })
+
+      // Assert
+      await waitFor(() => {
+        const storedValue = localStorage.getItem(CONVERSATION_ID_INFO)
+        const parsed = storedValue ? JSON.parse(storedValue) : {}
+        const storedUserId = parsed['app-1']?.['embedded-user-1']
+        const storedDefaultId = parsed['app-1']?.DEFAULT
+        expect([storedUserId, storedDefaultId]).toContain('conversation-new')
+      })
+    })
+  })
+})
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index 3c7fd576a3..678590cde2 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -9,8 +9,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,
@@ -19,18 +19,18 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { useToastContext } from '@/app/components/base/toast'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { changeLanguage } from '@/i18n-config/i18next-config'
+import { updateFeedback } from '@/service/share'
 import {
-  fetchChatList,
-  fetchConversations,
-  generationConversationName,
-  updateFeedback,
-} from '@/service/share'
+  useInvalidateShareConversations,
+  useShareChatList,
+  useShareConversationName,
+  useShareConversations,
+} from '@/service/use-share'
 import { TransferMethod } from '@/types/app'
 import { getProcessedFilesFromResponse } from '../../file-uploader/utils'
 import { CONVERSATION_ID_INFO } from '../constants'
@@ -137,9 +137,30 @@ export const useEmbeddedChatbot = () => {
     return currentConversationId
   }, [currentConversationId, newConversationId])
 
-  const { data: appPinnedConversationData } = useSWR(['appConversationData', isInstalledApp, appId, true], () => fetchConversations(isInstalledApp, appId, undefined, true, 100))
-  const { data: appConversationData, isLoading: appConversationDataLoading, mutate: mutateAppConversationData } = useSWR(['appConversationData', isInstalledApp, appId, false], () => fetchConversations(isInstalledApp, appId, undefined, false, 100))
-  const { data: appChatListData, isLoading: appChatListDataLoading } = useSWR(chatShouldReloadKey ? ['appChatList', chatShouldReloadKey, isInstalledApp, appId] : null, () => fetchChatList(chatShouldReloadKey, isInstalledApp, appId))
+  const { data: appPinnedConversationData } = useShareConversations({
+    isInstalledApp,
+    appId,
+    pinned: true,
+    limit: 100,
+  })
+  const {
+    data: appConversationData,
+    isLoading: appConversationDataLoading,
+  } = useShareConversations({
+    isInstalledApp,
+    appId,
+    pinned: false,
+    limit: 100,
+  })
+  const {
+    data: appChatListData,
+    isLoading: appChatListDataLoading,
+  } = useShareChatList({
+    conversationId: chatShouldReloadKey,
+    isInstalledApp,
+    appId,
+  })
+  const invalidateShareConversations = useInvalidateShareConversations()
 
   const [clearChatList, setClearChatList] = useState(false)
   const [isResponding, setIsResponding] = useState(false)
@@ -259,7 +280,13 @@ export const useEmbeddedChatbot = () => {
     handleNewConversationInputsChange(conversationInputs)
   }, [handleNewConversationInputsChange, inputsForms])
 
-  const { data: newConversation } = useSWR(newConversationId ? [isInstalledApp, appId, newConversationId] : null, () => generationConversationName(isInstalledApp, appId, newConversationId), { revalidateOnFocus: false })
+  const { data: newConversation } = useShareConversationName({
+    conversationId: newConversationId,
+    isInstalledApp,
+    appId,
+  }, {
+    refetchOnWindowFocus: false,
+  })
   const [originConversationList, setOriginConversationList] = useState<ConversationItem[]>([])
   useEffect(() => {
     if (appConversationData?.data && !appConversationDataLoading)
@@ -379,8 +406,8 @@ export const useEmbeddedChatbot = () => {
     setNewConversationId(newConversationId)
     handleConversationIdInfoChange(newConversationId)
     setShowNewConversationItemInList(false)
-    mutateAppConversationData()
-  }, [mutateAppConversationData, handleConversationIdInfoChange])
+    invalidateShareConversations()
+  }, [handleConversationIdInfoChange, invalidateShareConversations])
 
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
     await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, isInstalledApp, appId)
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/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/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/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index e62addee2d..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,
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/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/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-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/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/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/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/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.spec.tsx b/web/app/components/custom/custom-web-app-brand/index.spec.tsx
new file mode 100644
index 0000000000..e50ca4e9b2
--- /dev/null
+++ b/web/app/components/custom/custom-web-app-brand/index.spec.tsx
@@ -0,0 +1,147 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { getImageUploadErrorMessage, imageUpload } from '@/app/components/base/image-uploader/utils'
+import { useToastContext } from '@/app/components/base/toast'
+import { Plan } from '@/app/components/billing/type'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useProviderContext } from '@/context/provider-context'
+import { updateCurrentWorkspace } from '@/service/common'
+import CustomWebAppBrand from './index'
+
+vi.mock('@/app/components/base/toast', () => ({
+  useToastContext: vi.fn(),
+}))
+vi.mock('@/service/common', () => ({
+  updateCurrentWorkspace: vi.fn(),
+}))
+vi.mock('@/context/app-context', () => ({
+  useAppContext: vi.fn(),
+}))
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: vi.fn(),
+}))
+vi.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: vi.fn(),
+}))
+vi.mock('@/app/components/base/image-uploader/utils', () => ({
+  imageUpload: vi.fn(),
+  getImageUploadErrorMessage: vi.fn(),
+}))
+
+const mockNotify = vi.fn()
+const mockUseToastContext = vi.mocked(useToastContext)
+const mockUpdateCurrentWorkspace = vi.mocked(updateCurrentWorkspace)
+const mockUseAppContext = vi.mocked(useAppContext)
+const mockUseProviderContext = vi.mocked(useProviderContext)
+const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
+const mockImageUpload = vi.mocked(imageUpload)
+const mockGetImageUploadErrorMessage = vi.mocked(getImageUploadErrorMessage)
+
+const defaultPlanUsage = {
+  buildApps: 0,
+  teamMembers: 0,
+  annotatedResponse: 0,
+  documentsUploadQuota: 0,
+  apiRateLimit: 0,
+  triggerEvents: 0,
+  vectorSpace: 0,
+}
+
+const renderComponent = () => render(<CustomWebAppBrand />)
+
+describe('CustomWebAppBrand', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseToastContext.mockReturnValue({ notify: mockNotify } as any)
+    mockUpdateCurrentWorkspace.mockResolvedValue({} as any)
+    mockUseAppContext.mockReturnValue({
+      currentWorkspace: {
+        custom_config: {
+          replace_webapp_logo: 'https://example.com/replace.png',
+          remove_webapp_brand: false,
+        },
+      },
+      mutateCurrentWorkspace: vi.fn(),
+      isCurrentWorkspaceManager: true,
+    } as any)
+    mockUseProviderContext.mockReturnValue({
+      plan: {
+        type: Plan.professional,
+        usage: defaultPlanUsage,
+        total: defaultPlanUsage,
+        reset: {},
+      },
+      enableBilling: false,
+    } as any)
+    const systemFeaturesState = {
+      branding: {
+        enabled: true,
+        workspace_logo: 'https://example.com/workspace-logo.png',
+      },
+    }
+    mockUseGlobalPublicStore.mockImplementation(selector => selector ? selector({ systemFeatures: systemFeaturesState } as any) : { systemFeatures: systemFeaturesState })
+    mockGetImageUploadErrorMessage.mockReturnValue('upload error')
+  })
+
+  it('disables upload controls when the user cannot manage the workspace', () => {
+    mockUseAppContext.mockReturnValue({
+      currentWorkspace: {
+        custom_config: {
+          replace_webapp_logo: '',
+          remove_webapp_brand: false,
+        },
+      },
+      mutateCurrentWorkspace: vi.fn(),
+      isCurrentWorkspaceManager: false,
+    } as any)
+
+    const { container } = renderComponent()
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
+    expect(fileInput).toBeDisabled()
+  })
+
+  it('toggles remove brand switch and calls the backend + mutate', async () => {
+    const mutateMock = vi.fn()
+    mockUseAppContext.mockReturnValue({
+      currentWorkspace: {
+        custom_config: {
+          replace_webapp_logo: '',
+          remove_webapp_brand: false,
+        },
+      },
+      mutateCurrentWorkspace: mutateMock,
+      isCurrentWorkspaceManager: true,
+    } as any)
+
+    renderComponent()
+    const switchInput = screen.getByRole('switch')
+    fireEvent.click(switchInput)
+
+    await waitFor(() => expect(mockUpdateCurrentWorkspace).toHaveBeenCalledWith({
+      url: '/workspaces/custom-config',
+      body: { remove_webapp_brand: true },
+    }))
+    await waitFor(() => expect(mutateMock).toHaveBeenCalled())
+  })
+
+  it('shows cancel/apply buttons after successful upload and cancels properly', async () => {
+    mockImageUpload.mockImplementation(({ onProgressCallback, onSuccessCallback }) => {
+      onProgressCallback(50)
+      onSuccessCallback({ id: 'new-logo' })
+    })
+
+    const { container } = renderComponent()
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement
+    const testFile = new File(['content'], 'logo.png', { type: 'image/png' })
+    fireEvent.change(fileInput, { target: { files: [testFile] } })
+
+    await waitFor(() => expect(mockImageUpload).toHaveBeenCalled())
+    await waitFor(() => screen.getByRole('button', { name: 'custom.apply' }))
+
+    const cancelButton = screen.getByRole('button', { name: 'common.operation.cancel' })
+    fireEvent.click(cancelButton)
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'custom.apply' })).toBeNull())
+  })
+})
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/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/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/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/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 6cc60453dd..bf43e41dee 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine, RiDraftLine } from '@remixicon/react'
+import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine, RiDraftLine, RiRefreshLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,6 +17,7 @@ type IBatchActionProps = {
   onBatchDelete: () => Promise<void>
   onArchive?: () => void
   onEditMetadata?: () => void
+  onBatchReIndex?: () => void
   onCancel: () => void
 }
 
@@ -28,6 +29,7 @@ const BatchAction: FC<IBatchActionProps> = ({
   onArchive,
   onBatchDelete,
   onEditMetadata,
+  onBatchReIndex,
   onCancel,
 }) => {
   const { t } = useTranslation()
@@ -91,6 +93,16 @@ const BatchAction: FC<IBatchActionProps> = ({
             <span className="px-0.5">{t(`${i18nPrefix}.archive`)}</span>
           </Button>
         )}
+        {onBatchReIndex && (
+          <Button
+            variant="ghost"
+            className="gap-x-0.5 px-3"
+            onClick={onBatchReIndex}
+          >
+            <RiRefreshLine className="size-4" />
+            <span className="px-0.5">{t(`${i18nPrefix}.reIndex`)}</span>
+          </Button>
+        )}
         <Button
           variant="ghost"
           destructive
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/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..348ecb271e 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'
@@ -26,7 +26,7 @@ import { useDatasetDetailContextWithSelector as useDatasetDetailContext } from '
 import useTimestamp from '@/hooks/use-timestamp'
 import { ChunkingMode, DataSourceType, DocumentActionType } from '@/models/datasets'
 import { DatasourceType } from '@/models/pipeline'
-import { useDocumentArchive, useDocumentDelete, useDocumentDisable, useDocumentEnable } from '@/service/knowledge/use-document'
+import { useDocumentArchive, useDocumentBatchRetryIndex, useDocumentDelete, useDocumentDisable, useDocumentEnable } from '@/service/knowledge/use-document'
 import { asyncRunSafe } from '@/utils'
 import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
@@ -220,6 +220,7 @@ const DocumentList: FC<IDocumentListProps> = ({
   const { mutateAsync: enableDocument } = useDocumentEnable()
   const { mutateAsync: disableDocument } = useDocumentDisable()
   const { mutateAsync: deleteDocument } = useDocumentDelete()
+  const { mutateAsync: retryIndexDocument } = useDocumentBatchRetryIndex()
 
   const handleAction = (actionName: DocumentActionType) => {
     return async () => {
@@ -250,6 +251,22 @@ const DocumentList: FC<IDocumentListProps> = ({
     }
   }
 
+  const handleBatchReIndex = async () => {
+    const [e] = await asyncRunSafe<CommonResponse>(retryIndexDocument({ datasetId, documentIds: selectedIds }))
+    if (!e) {
+      onSelectedIdChange([])
+      Toast.notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      onUpdate()
+    }
+    else {
+      Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+    }
+  }
+
+  const hasErrorDocumentsSelected = useMemo(() => {
+    return localDocs.some(doc => selectedIds.includes(doc.id) && doc.display_status === 'error')
+  }, [localDocs, selectedIds])
+
   const getFileExtension = useCallback((fileName: string): string => {
     if (!fileName)
       return ''
@@ -447,6 +464,7 @@ const DocumentList: FC<IDocumentListProps> = ({
           onBatchDisable={handleAction(DocumentActionType.disable)}
           onBatchDelete={handleAction(DocumentActionType.delete)}
           onEditMetadata={showEditModal}
+          onBatchReIndex={hasErrorDocumentsSelected ? handleBatchReIndex : undefined}
           onCancel={() => {
             onSelectedIdChange([])
           }}
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/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index e75ef48abf..d810442704 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -34,7 +34,6 @@ import Records from './components/records'
 import ResultItem from './components/result-item'
 import ResultItemExternal from './components/result-item-external'
 import ModifyRetrievalModal from './modify-retrieval-modal'
-import s from './style.module.css'
 
 const limit = 10
 
@@ -115,8 +114,8 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
   }, [isMobile, setShowRightPanel])
 
   return (
-    <div className={s.container}>
-      <div className="flex flex-col px-6 py-3">
+    <div className="relative flex h-full w-full gap-x-6 overflow-y-auto pl-6">
+      <div className="flex min-w-0 flex-1 flex-col py-3">
         <div className="mb-4 flex flex-col justify-center">
           <h1 className="text-base font-semibold text-text-primary">{t('datasetHitTesting.title')}</h1>
           <p className="mt-0.5 text-[13px] font-normal leading-4 text-text-tertiary">{t('datasetHitTesting.desc')}</p>
@@ -161,7 +160,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
         onClose={hideRightPanel}
         footer={null}
       >
-        <div className="flex flex-col pt-3">
+        <div className="flex min-w-0 flex-1 flex-col pt-3">
           {isRetrievalLoading
             ? (
                 <div className="flex h-full flex-col rounded-tl-2xl bg-background-body px-4 py-3">
diff --git a/web/app/components/datasets/hit-testing/style.module.css b/web/app/components/datasets/hit-testing/style.module.css
deleted file mode 100644
index a421962f48..0000000000
--- a/web/app/components/datasets/hit-testing/style.module.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.container {
-  @apply flex h-full w-full relative overflow-y-auto;
-}
-
-.container>div {
-  @apply flex-1 h-full;
-}
-
-.commonIcon {
-  @apply w-3.5 h-3.5 inline-block align-middle;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: contain;
-}
-
-.app_icon {
-  background-image: url(./assets/grid.svg);
-}
-
-.hit_testing_icon {
-  background-image: url(../documents/assets/target.svg);
-}
-
-.plugin_icon {
-  background-image: url(./assets/plugin.svg);
-}
-
-.cardWrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(284px, auto));
-  grid-gap: 16px;
-  grid-auto-rows: 216px;
-}
-
-.clockWrapper {
-  border: 0.5px solid #eaecf5;
-  @apply rounded-lg w-11 h-11 flex justify-center items-center;
-}
-
-.clockIcon {
-  mask-image: url(./assets/clock.svg);
-  @apply bg-gray-500;
-}
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/devtools.tsx b/web/app/components/devtools.tsx
new file mode 100644
index 0000000000..e5415ca751
--- /dev/null
+++ b/web/app/components/devtools.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import * as React from 'react'
+
+export function TanStackDevtoolsWrapper() {
+  return (
+    <TanStackDevtools
+      plugins={[
+        // Query Devtools (Official Plugin)
+        {
+          name: 'React Query',
+          render: () => <ReactQueryDevtoolsPanel />,
+        },
+
+        // Form Devtools (Official Plugin)
+        formDevtoolsPlugin(),
+      ]}
+    />
+  )
+}
diff --git a/web/app/components/explore/app-list/index.spec.tsx b/web/app/components/explore/app-list/index.spec.tsx
index e73fcdf0ad..e6ffc937f7 100644
--- a/web/app/components/explore/app-list/index.spec.tsx
+++ b/web/app/components/explore/app-list/index.spec.tsx
@@ -10,12 +10,14 @@ 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()
 
-vi.mock('@/hooks/use-tab-searchparams', () => ({
-  useTabSearchParams: () => [mockTabValue, mockSetTab],
+vi.mock('nuqs', () => ({
+  useQueryState: () => [mockTabValue, mockSetTab],
 }))
 
 vi.mock('ahooks', async () => {
@@ -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..da48139e4c 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -3,10 +3,10 @@
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { App } from '@/models/explore'
 import { useDebounceFn } from 'ahooks'
+import { useQueryState } from 'nuqs'
 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'
@@ -16,11 +16,11 @@ import Category from '@/app/components/explore/category'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
 import ExploreContext from '@/context/explore-context'
 import { useImportDSL } from '@/hooks/use-import-dsl'
-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) => {
@@ -52,29 +47,21 @@ const Apps = ({
     handleSearch()
   }
 
-  const [currCategory, setCurrCategory] = useTabSearchParams({
-    defaultTab: allCategoriesEn,
-    disableSearchParams: false,
+  const [currCategory, setCurrCategory] = useQueryState('category', {
+    defaultValue: allCategoriesEn,
   })
 
   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 +119,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 +127,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/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/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/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/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 da61746685..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)}` as any)}</div>
-                            <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(`common.members.${toHump(role)}Tip` as any)}</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/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 76d64a45f4..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'
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..536b9c9fc3 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,
@@ -22,6 +22,7 @@ import {
   createContext,
   useContextSelector,
 } from 'use-context-selector'
+import { useMarketplaceFilters } from '@/hooks/use-query-params'
 import { useInstalledPluginList } from '@/service/use-plugins'
 import {
   getValidCategoryKeys,
@@ -37,7 +38,6 @@ import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
 import {
   getMarketplaceListCondition,
   getMarketplaceListFilterType,
-  updateSearchParams,
 } from './utils'
 
 export type MarketplaceContextValue = {
@@ -107,16 +107,22 @@ export const MarketplaceContextProvider = ({
   scrollContainerId,
   showSearchParams,
 }: MarketplaceContextProviderProps) => {
+  // Use nuqs hook for URL-based filter state
+  const [urlFilters, setUrlFilters] = useMarketplaceFilters()
+
   const { data, isSuccess } = useInstalledPluginList(!shouldExclude)
   const exclude = useMemo(() => {
     if (shouldExclude)
       return data?.plugins.map(plugin => plugin.plugin_id)
   }, [data?.plugins, shouldExclude])
-  const queryFromSearchParams = searchParams?.q || ''
-  const tagsFromSearchParams = searchParams?.tags ? getValidTagKeys(searchParams.tags.split(',')) : []
+
+  // Initialize from URL params (legacy support) or use nuqs state
+  const queryFromSearchParams = searchParams?.q || urlFilters.q
+  const tagsFromSearchParams = getValidTagKeys(urlFilters.tags)
   const hasValidTags = !!tagsFromSearchParams.length
-  const hasValidCategory = getValidCategoryKeys(searchParams?.category)
+  const hasValidCategory = getValidCategoryKeys(urlFilters.category)
   const categoryFromSearchParams = hasValidCategory || PLUGIN_TYPE_SEARCH_MAP.all
+
   const [searchPluginText, setSearchPluginText] = useState(queryFromSearchParams)
   const searchPluginTextRef = useRef(searchPluginText)
   const [filterPluginTags, setFilterPluginTags] = useState<string[]>(tagsFromSearchParams)
@@ -158,10 +164,6 @@ export const MarketplaceContextProvider = ({
         sortOrder: sortRef.current.sortOrder,
         type: getMarketplaceListFilterType(activePluginTypeRef.current),
       })
-      const url = new URL(window.location.href)
-      if (searchParams?.language)
-        url.searchParams.set('language', searchParams?.language)
-      history.replaceState({}, '', url)
     }
     else {
       if (shouldExclude && isSuccess) {
@@ -183,28 +185,32 @@ export const MarketplaceContextProvider = ({
     resetPlugins()
   }, [exclude, queryMarketplaceCollectionsAndPlugins, resetPlugins])
 
-  const debouncedUpdateSearchParams = useMemo(() => debounce(() => {
-    updateSearchParams({
-      query: searchPluginTextRef.current,
-      category: activePluginTypeRef.current,
-      tags: filterPluginTagsRef.current,
-    })
-  }, 500), [])
-
-  const handleUpdateSearchParams = useCallback((debounced?: boolean) => {
+  const applyUrlFilters = useCallback(() => {
     if (!showSearchParams)
       return
+    const nextFilters = {
+      q: searchPluginTextRef.current,
+      category: activePluginTypeRef.current,
+      tags: filterPluginTagsRef.current,
+    }
+    const categoryChanged = urlFilters.category !== nextFilters.category
+    setUrlFilters(nextFilters, {
+      history: categoryChanged ? 'push' : 'replace',
+    })
+  }, [setUrlFilters, showSearchParams, urlFilters.category])
+
+  const debouncedUpdateSearchParams = useMemo(() => debounce(() => {
+    applyUrlFilters()
+  }, 500), [applyUrlFilters])
+
+  const handleUpdateSearchParams = useCallback((debounced?: boolean) => {
     if (debounced) {
       debouncedUpdateSearchParams()
     }
     else {
-      updateSearchParams({
-        query: searchPluginTextRef.current,
-        category: activePluginTypeRef.current,
-        tags: filterPluginTagsRef.current,
-      })
+      applyUrlFilters()
     }
-  }, [debouncedUpdateSearchParams, showSearchParams])
+  }, [applyUrlFilters, debouncedUpdateSearchParams])
 
   const handleQueryPlugins = useCallback((debounced?: boolean) => {
     handleUpdateSearchParams(debounced)
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index 963a7de9a9..bb4a419335 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -84,12 +84,14 @@ const PluginTypeSwitch = ({
   const handlePopState = useCallback(() => {
     if (!showSearchParams)
       return
+    // nuqs handles popstate automatically
     const url = new URL(window.location.href)
     const category = url.searchParams.get('category') || PLUGIN_TYPE_SEARCH_MAP.all
     handleActivePluginTypeChange(category)
   }, [showSearchParams, handleActivePluginTypeChange])
 
   useEffect(() => {
+    // nuqs manages popstate internally, but we keep this for URL sync
     window.addEventListener('popstate', handlePopState)
     return () => {
       window.removeEventListener('popstate', handlePopState)
diff --git a/web/app/components/plugins/marketplace/utils.ts b/web/app/components/plugins/marketplace/utils.ts
index 82af4b65c8..e51c9b76a6 100644
--- a/web/app/components/plugins/marketplace/utils.ts
+++ b/web/app/components/plugins/marketplace/utils.ts
@@ -1,7 +1,6 @@
 import type {
   CollectionsAndPluginsSearchParams,
   MarketplaceCollection,
-  PluginsSearchParams,
 } from '@/app/components/plugins/marketplace/types'
 import type { Plugin } from '@/app/components/plugins/types'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
@@ -152,22 +151,3 @@ export const getMarketplaceListFilterType = (category: string) => {
 
   return 'plugin'
 }
-
-export const updateSearchParams = (pluginsSearchParams: PluginsSearchParams) => {
-  const { query, category, tags } = pluginsSearchParams
-  const url = new URL(window.location.href)
-  const categoryChanged = url.searchParams.get('category') !== category
-  if (query)
-    url.searchParams.set('q', query)
-  else
-    url.searchParams.delete('q')
-  if (category)
-    url.searchParams.set('category', category)
-  else
-    url.searchParams.delete('category')
-  if (tags && tags.length)
-    url.searchParams.set('tags', tags.join(','))
-  else
-    url.searchParams.delete('tags')
-  history[`${categoryChanged ? 'pushState' : 'replaceState'}`]({}, '', url)
-}
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 31e0bd6a85..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` as any)}
-      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/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..3d420ca1ab 100644
--- a/web/app/components/plugins/plugin-page/context.tsx
+++ b/web/app/components/plugins/plugin-page/context.tsx
@@ -2,7 +2,8 @@
 
 import type { ReactNode, RefObject } from 'react'
 import type { FilterState } from './filter-management'
-import { noop } from 'lodash-es'
+import { noop } from 'es-toolkit/compat'
+import { useQueryState } from 'nuqs'
 import {
   useMemo,
   useRef,
@@ -13,7 +14,6 @@ import {
   useContextSelector,
 } from 'use-context-selector'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { PLUGIN_PAGE_TABS_MAP, usePluginPageTabs } from '../hooks'
 
 export type PluginPageContextValue = {
@@ -68,8 +68,8 @@ export const PluginPageContextProvider = ({
   const options = useMemo(() => {
     return enable_marketplace ? tabs : tabs.filter(tab => tab.value !== PLUGIN_PAGE_TABS_MAP.marketplace)
   }, [tabs, enable_marketplace])
-  const [activeTab, setActiveTab] = useTabSearchParams({
-    defaultTab: options[0].value,
+  const [activeTab, setActiveTab] = useQueryState('category', {
+    defaultValue: options[0].value,
   })
 
   return (
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..047d1fb8cf 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -7,12 +7,8 @@ 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,
-  useSearchParams,
-} from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -25,6 +21,7 @@ import { MARKETPLACE_API_PREFIX, SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import I18n from '@/context/i18n'
 import useDocumentTitle from '@/hooks/use-document-title'
+import { usePluginInstallation } from '@/hooks/use-query-params'
 import { fetchBundleInfoFromMarketPlace, fetchManifestFromMarketPlace } from '@/service/plugins'
 import { sleep } from '@/utils'
 import { cn } from '@/utils/classnames'
@@ -42,9 +39,6 @@ import PluginTasks from './plugin-tasks'
 import useReferenceSetting from './use-reference-setting'
 import { useUploader } from './use-uploader'
 
-const PACKAGE_IDS_KEY = 'package-ids'
-const BUNDLE_INFO_KEY = 'bundle-info'
-
 export type PluginPageProps = {
   plugins: React.ReactNode
   marketplace: React.ReactNode
@@ -55,33 +49,13 @@ const PluginPage = ({
 }: PluginPageProps) => {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
-  const searchParams = useSearchParams()
-  const { replace } = useRouter()
   useDocumentTitle(t('plugin.metadata.title'))
 
-  // just support install one package now
-  const packageId = useMemo(() => {
-    const idStrings = searchParams.get(PACKAGE_IDS_KEY)
-    try {
-      return idStrings ? JSON.parse(idStrings)[0] : ''
-    }
-    catch {
-      return ''
-    }
-  }, [searchParams])
+  // Use nuqs hook for installation state
+  const [{ packageId, bundleInfo }, setInstallState] = usePluginInstallation()
 
   const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
-
   const [dependencies, setDependencies] = useState<Dependency[]>([])
-  const bundleInfo = useMemo(() => {
-    const info = searchParams.get(BUNDLE_INFO_KEY)
-    try {
-      return info ? JSON.parse(info) : undefined
-    }
-    catch {
-      return undefined
-    }
-  }, [searchParams])
 
   const [isShowInstallFromMarketplace, {
     setTrue: showInstallFromMarketplace,
@@ -90,11 +64,9 @@ const PluginPage = ({
 
   const hideInstallFromMarketplace = () => {
     doHideInstallFromMarketplace()
-    const url = new URL(window.location.href)
-    url.searchParams.delete(PACKAGE_IDS_KEY)
-    url.searchParams.delete(BUNDLE_INFO_KEY)
-    replace(url.toString())
+    setInstallState(null)
   }
+
   const [manifest, setManifest] = useState<PluginDeclaration | PluginManifestInMarket | null>(null)
 
   useEffect(() => {
@@ -114,12 +86,17 @@ const PluginPage = ({
         return
       }
       if (bundleInfo) {
-        const { data } = await fetchBundleInfoFromMarketPlace(bundleInfo)
-        setDependencies(data.version.dependencies)
-        showInstallFromMarketplace()
+        try {
+          const { data } = await fetchBundleInfoFromMarketPlace(bundleInfo)
+          setDependencies(data.version.dependencies)
+          showInstallFromMarketplace()
+        }
+        catch (error) {
+          console.error('Failed to load bundle info:', error)
+        }
       }
     })()
-  }, [packageId, bundleInfo])
+  }, [packageId, bundleInfo, showInstallFromMarketplace])
 
   const {
     referenceSetting,
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 818c2a0388..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
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-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/sentry-initializer.tsx b/web/app/components/sentry-initializer.tsx
index e88de2d699..ee161647e3 100644
--- a/web/app/components/sentry-initializer.tsx
+++ b/web/app/components/sentry-initializer.tsx
@@ -3,14 +3,14 @@
 import * as Sentry from '@sentry/react'
 import { useEffect } from 'react'
 
-const isDevelopment = process.env.NODE_ENV === 'development'
+import { IS_DEV } from '@/config'
 
 const SentryInitializer = ({
   children,
 }: { children: React.ReactElement }) => {
   useEffect(() => {
     const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
-    if (!isDevelopment && SENTRY_DSN) {
+    if (!IS_DEV && SENTRY_DSN) {
       Sentry.init({
         dsn: SENTRY_DSN,
         integrations: [
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/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 474c262010..a468af7257 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -48,6 +48,7 @@ const EditCustomCollectionModal: FC<Props> = ({
 
   const [editFirst, setEditFirst] = useState(!isAdd)
   const [paramsSchemas, setParamsSchemas] = useState<CustomParamSchema[]>(payload?.tools || [])
+  const [labels, setLabels] = useState<string[]>(payload?.labels || [])
   const [customCollection, setCustomCollection, getCustomCollection] = useGetState<CustomCollectionBackend>(isAdd
     ? {
         provider: '',
@@ -67,6 +68,15 @@ const EditCustomCollectionModal: FC<Props> = ({
 
   const originalProvider = isEdit ? payload.provider : ''
 
+  // Sync customCollection state when payload changes
+  useEffect(() => {
+    if (isEdit) {
+      setCustomCollection(payload)
+      setParamsSchemas(payload.tools || [])
+      setLabels(payload.labels || [])
+    }
+  }, [isEdit, payload])
+
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const emoji = customCollection.icon
   const setEmoji = (emoji: Emoji) => {
@@ -124,7 +134,6 @@ const EditCustomCollectionModal: FC<Props> = ({
   const [currTool, setCurrTool] = useState<CustomParamSchema | null>(null)
   const [isShowTestApi, setIsShowTestApi] = useState(false)
 
-  const [labels, setLabels] = useState<string[]>(payload?.labels || [])
   const handleLabelSelect = (value: string[]) => {
     setLabels(value)
   }
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/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-list.tsx b/web/app/components/tools/provider-list.tsx
index 648ecb9802..95f36afcc3 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { Collection } from './types'
+import { useQueryState } from 'nuqs'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
@@ -14,7 +15,6 @@ import CustomCreateCard from '@/app/components/tools/provider/custom-create-card
 import ProviderDetail from '@/app/components/tools/provider/detail'
 import WorkflowToolEmpty from '@/app/components/tools/provider/empty'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import { useCheckInstalled, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useAllToolProviders } from '@/service/use-tools'
 import { cn } from '@/utils/classnames'
@@ -45,8 +45,8 @@ const ProviderList = () => {
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const [activeTab, setActiveTab] = useTabSearchParams({
-    defaultTab: 'builtin',
+  const [activeTab, setActiveTab] = useQueryState('category', {
+    defaultValue: 'builtin',
   })
   const options = [
     { value: 'builtin', text: t('tools.type.builtIn') },
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index c4b65f353d..e0a2281696 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -100,9 +100,28 @@ const ProviderDetail = ({
   const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [deleteAction, setDeleteAction] = useState('')
+
+  const getCustomProvider = useCallback(async () => {
+    setIsDetailLoading(true)
+    const res = await fetchCustomCollection(collection.name)
+    if (res.credentials.auth_type === AuthType.apiKey && !res.credentials.api_key_header_prefix) {
+      if (res.credentials.api_key_value)
+        res.credentials.api_key_header_prefix = AuthHeaderPrefix.custom
+    }
+    setCustomCollection({
+      ...res,
+      labels: collection.labels,
+      provider: collection.name,
+    })
+    setIsDetailLoading(false)
+  }, [collection.labels, collection.name])
+
   const doUpdateCustomToolCollection = async (data: CustomCollectionBackend) => {
     await updateCustomCollection(data)
     onRefreshData()
+    await getCustomProvider()
+    // Use fresh data from form submission to avoid race condition with collection.labels
+    setCustomCollection(prev => prev ? { ...prev, labels: data.labels } : null)
     Toast.notify({
       type: 'success',
       message: t('common.api.actionSuccess'),
@@ -118,20 +137,6 @@ const ProviderDetail = ({
     })
     setIsShowEditCustomCollectionModal(false)
   }
-  const getCustomProvider = useCallback(async () => {
-    setIsDetailLoading(true)
-    const res = await fetchCustomCollection(collection.name)
-    if (res.credentials.auth_type === AuthType.apiKey && !res.credentials.api_key_header_prefix) {
-      if (res.credentials.api_key_value)
-        res.credentials.api_key_header_prefix = AuthHeaderPrefix.custom
-    }
-    setCustomCollection({
-      ...res,
-      labels: collection.labels,
-      provider: collection.name,
-    })
-    setIsDetailLoading(false)
-  }, [collection.labels, collection.name])
   // workflow provider
   const [isShowEditWorkflowToolModal, setIsShowEditWorkflowToolModal] = useState(false)
   const getWorkflowToolProvider = useCallback(async () => {
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-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/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index 51d08d15df..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,
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/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..9ec9e6934e 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',
+          'rounded-lg border border-transparent p-2',
+          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-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..8eeab43d7e 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,
@@ -35,6 +35,7 @@ import ReactFlow, {
   useReactFlow,
   useStoreApi,
 } from 'reactflow'
+import { IS_DEV } from '@/config'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
   useAllBuiltInTools,
@@ -195,9 +196,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,8 +362,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
     }
   }, [schemaTypeDefinitions, fetchInspectVars, isLoadedVars, vars, customTools, buildInTools, workflowTools, mcpTools, dataSourceList])
 
-  const store = useStoreApi()
-  if (process.env.NODE_ENV === 'development') {
+  if (IS_DEV) {
     store.getState().onError = (code, message) => {
       if (code === '002')
         return
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/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-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/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/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-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-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/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-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/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-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/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/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/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/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/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/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/dev-preview/page.tsx b/web/app/dev-preview/page.tsx
deleted file mode 100644
index 90090acdd0..0000000000
--- a/web/app/dev-preview/page.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client'
-import BaseForm from '../components/base/form/form-scenarios/base'
-import { BaseFieldType } from '../components/base/form/form-scenarios/base/types'
-
-export default function Page() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center p-20">
-      <div className="w-[400px] rounded-lg border border-components-panel-border bg-components-panel-bg">
-        <BaseForm
-          initialData={{
-            type: 'option_1',
-            variable: 'test',
-            label: 'Test',
-            maxLength: 48,
-            required: true,
-          }}
-          configurations={[
-            {
-              type: BaseFieldType.textInput,
-              variable: 'variable',
-              label: 'Variable',
-              required: true,
-              showConditions: [],
-            },
-            {
-              type: BaseFieldType.textInput,
-              variable: 'label',
-              label: 'Label',
-              required: true,
-              showConditions: [],
-            },
-            {
-              type: BaseFieldType.numberInput,
-              variable: 'maxLength',
-              label: 'Max Length',
-              required: true,
-              showConditions: [],
-              max: 100,
-              min: 1,
-            },
-            {
-              type: BaseFieldType.checkbox,
-              variable: 'required',
-              label: 'Required',
-              required: true,
-              showConditions: [],
-            },
-            {
-              type: BaseFieldType.select,
-              variable: 'type',
-              label: 'Type',
-              required: true,
-              showConditions: [],
-              options: [
-                { label: 'Option 1', value: 'option_1' },
-                { label: 'Option 2', value: 'option_2' },
-                { label: 'Option 3', value: 'option_3' },
-              ],
-            },
-          ]}
-          onSubmit={(value) => {
-            console.log('onSubmit', value)
-          }}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/web/app/education-apply/constants.ts b/web/app/education-apply/constants.ts
index 2c42d2b263..cfe80556c6 100644
--- a/web/app/education-apply/constants.ts
+++ b/web/app/education-apply/constants.ts
@@ -1,4 +1,3 @@
 export const EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION = 'getEducationVerify'
 export const EDUCATION_VERIFYING_LOCALSTORAGE_ITEM = 'educationVerifying'
-export const EDUCATION_PRICING_SHOW_ACTION = 'educationPricing'
 export const EDUCATION_RE_VERIFY_ACTION = 'educationReVerify'
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/education-apply/hooks.ts b/web/app/education-apply/hooks.ts
index 27895b89be..52acde2975 100644
--- a/web/app/education-apply/hooks.ts
+++ b/web/app/education-apply/hooks.ts
@@ -15,7 +15,6 @@ import { useModalContextSelector } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useEducationAutocomplete, useEducationVerify } from '@/service/use-education'
 import {
-  EDUCATION_PRICING_SHOW_ACTION,
   EDUCATION_RE_VERIFY_ACTION,
   EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
@@ -133,7 +132,6 @@ const useEducationReverifyNotice = ({
 
 export const useEducationInit = () => {
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
-  const setShowPricingModal = useModalContextSelector(s => s.setShowPricingModal)
   const setShowEducationExpireNoticeModal = useModalContextSelector(s => s.setShowEducationExpireNoticeModal)
   const educationVerifying = localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
   const searchParams = useSearchParams()
@@ -160,8 +158,6 @@ export const useEducationInit = () => {
       if (educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION)
         localStorage.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
     }
-    if (educationVerifyAction === EDUCATION_PRICING_SHOW_ACTION)
-      setShowPricingModal()
     if (educationVerifyAction === EDUCATION_RE_VERIFY_ACTION)
       handleVerify()
   }, [setShowAccountSettingModal, educationVerifying, educationVerifyAction])
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 25752c54a5..c182f12dc9 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Viewport } from 'next'
 import { ThemeProvider } from 'next-themes'
 import { Instrument_Serif } from 'next/font/google'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { getLocaleOnServer } from '@/i18n-config/server'
@@ -67,6 +68,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 (
@@ -96,17 +98,19 @@ const LocaleLayout = async ({
           disableTransitionOnChange
           enableColorScheme={false}
         >
-          <BrowserInitializer>
-            <SentryInitializer>
-              <TanstackQueryInitializer>
-                <I18nServer>
-                  <GlobalPublicStoreProvider>
-                    {children}
-                  </GlobalPublicStoreProvider>
-                </I18nServer>
-              </TanstackQueryInitializer>
-            </SentryInitializer>
-          </BrowserInitializer>
+          <NuqsAdapter>
+            <BrowserInitializer>
+              <SentryInitializer>
+                <TanstackQueryInitializer>
+                  <I18nServer>
+                    <GlobalPublicStoreProvider>
+                      {children}
+                    </GlobalPublicStoreProvider>
+                  </I18nServer>
+                </TanstackQueryInitializer>
+              </SentryInitializer>
+            </BrowserInitializer>
+          </NuqsAdapter>
         </ThemeProvider>
         <RoutePrefixHandle />
       </body>
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 e3bbe420bc..c4923959ab 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -1,7 +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'
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.test.tsx b/web/context/modal-context.test.tsx
index 4f41c19df6..245ac027ac 100644
--- a/web/context/modal-context.test.tsx
+++ b/web/context/modal-context.test.tsx
@@ -1,4 +1,5 @@
 import { act, render, screen, waitFor } from '@testing-library/react'
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
 import * as React from 'react'
 import { defaultPlan } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
@@ -72,9 +73,11 @@ const createPlan = (overrides: PlanOverrides = {}): PlanShape => ({
 })
 
 const renderProvider = () => render(
-  <ModalContextProvider>
-    <div data-testid="modal-context-test-child" />
-  </ModalContextProvider>,
+  <NuqsTestingAdapter>
+    <ModalContextProvider>
+      <div data-testid="modal-context-test-child" />
+    </ModalContextProvider>
+  </NuqsTestingAdapter>,
 )
 
 describe('ModalContextProvider trigger events limit modal', () => {
diff --git a/web/context/modal-context.tsx b/web/context/modal-context.tsx
index 2afd1b7b2f..dce7b9f6e1 100644
--- a/web/context/modal-context.tsx
+++ b/web/context/modal-context.tsx
@@ -22,23 +22,24 @@ 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'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import {
-  ACCOUNT_SETTING_MODAL_ACTION,
   DEFAULT_ACCOUNT_SETTING_TAB,
   isValidAccountSettingTab,
 } from '@/app/components/header/account-setting/constants'
 import {
-  EDUCATION_PRICING_SHOW_ACTION,
   EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
 } from '@/app/education-apply/constants'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
-import { removeSpecificQueryParam } from '@/utils'
+import {
+  useAccountSettingModal,
+  usePricingModal,
+} from '@/hooks/use-query-params'
+
 import {
 
   useTriggerEventsLimitModal,
@@ -125,8 +126,6 @@ export type ModalContextState = {
   setShowEducationExpireNoticeModal: Dispatch<SetStateAction<ModalState<ExpireNoticeModalPayloadProps> | null>>
   setShowTriggerEventsLimitModal: Dispatch<SetStateAction<ModalState<TriggerEventsLimitModalPayload> | null>>
 }
-const PRICING_MODAL_QUERY_PARAM = 'pricing'
-const PRICING_MODAL_QUERY_VALUE = 'open'
 
 const ModalContext = createContext<ModalContextState>({
   setShowAccountSettingModal: noop,
@@ -157,16 +156,16 @@ type ModalContextProviderProps = {
 export const ModalContextProvider = ({
   children,
 }: ModalContextProviderProps) => {
-  const searchParams = useSearchParams()
+  // Use nuqs hooks for URL-based modal state management
+  const [showPricingModal, setPricingModalOpen] = usePricingModal()
+  const [urlAccountModalState, setUrlAccountModalState] = useAccountSettingModal<AccountSettingTab>()
 
-  const [showAccountSettingModal, setShowAccountSettingModal] = useState<ModalState<AccountSettingTab> | null>(() => {
-    if (searchParams.get('action') === ACCOUNT_SETTING_MODAL_ACTION) {
-      const tabParam = searchParams.get('tab')
-      const tab = isValidAccountSettingTab(tabParam) ? tabParam : DEFAULT_ACCOUNT_SETTING_TAB
-      return { payload: tab }
-    }
-    return null
-  })
+  const accountSettingCallbacksRef = useRef<Omit<ModalState<AccountSettingTab>, 'payload'> | null>(null)
+  const accountSettingTab = urlAccountModalState.isOpen
+    ? (isValidAccountSettingTab(urlAccountModalState.payload)
+        ? urlAccountModalState.payload
+        : DEFAULT_ACCOUNT_SETTING_TAB)
+    : null
   const [showApiBasedExtensionModal, setShowApiBasedExtensionModal] = useState<ModalState<ApiBasedExtension> | null>(null)
   const [showModerationSettingModal, setShowModerationSettingModal] = useState<ModalState<ModerationConfig> | null>(null)
   const [showExternalDataToolModal, setShowExternalDataToolModal] = useState<ModalState<ExternalDataTool> | null>(null)
@@ -182,9 +181,6 @@ export const ModalContextProvider = ({
   const [showEducationExpireNoticeModal, setShowEducationExpireNoticeModal] = useState<ModalState<ExpireNoticeModalPayloadProps> | null>(null)
   const { currentWorkspace } = useAppContext()
 
-  const [showPricingModal, setShowPricingModal] = useState(
-    searchParams.get(PRICING_MODAL_QUERY_PARAM) === PRICING_MODAL_QUERY_VALUE,
-  )
   const [showAnnotationFullModal, setShowAnnotationFullModal] = useState(false)
   const handleCancelAccountSettingModal = () => {
     const educationVerifying = localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
@@ -192,54 +188,34 @@ export const ModalContextProvider = ({
     if (educationVerifying === 'yes')
       localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
 
-    removeSpecificQueryParam('action')
-    removeSpecificQueryParam('tab')
-    setShowAccountSettingModal(null)
-    if (showAccountSettingModal?.onCancelCallback)
-      showAccountSettingModal?.onCancelCallback()
+    accountSettingCallbacksRef.current?.onCancelCallback?.()
+    accountSettingCallbacksRef.current = null
+    setUrlAccountModalState(null)
   }
 
   const handleAccountSettingTabChange = useCallback((tab: AccountSettingTab) => {
-    setShowAccountSettingModal((prev) => {
-      if (!prev)
-        return { payload: tab }
-      if (prev.payload === tab)
-        return prev
-      return { ...prev, payload: tab }
-    })
-  }, [setShowAccountSettingModal])
+    setUrlAccountModalState({ payload: tab })
+  }, [setUrlAccountModalState])
+
+  const setShowAccountSettingModal = useCallback((next: SetStateAction<ModalState<AccountSettingTab> | null>) => {
+    const currentState = accountSettingTab
+      ? { payload: accountSettingTab, ...(accountSettingCallbacksRef.current ?? {}) }
+      : null
+    const resolvedState = typeof next === 'function' ? next(currentState) : next
+    if (!resolvedState) {
+      accountSettingCallbacksRef.current = null
+      setUrlAccountModalState(null)
+      return
+    }
+    const { payload, ...callbacks } = resolvedState
+    accountSettingCallbacksRef.current = callbacks
+    setUrlAccountModalState({ payload })
+  }, [accountSettingTab, setUrlAccountModalState])
 
   useEffect(() => {
-    if (typeof window === 'undefined')
-      return
-    const url = new URL(window.location.href)
-    if (!showAccountSettingModal?.payload) {
-      if (url.searchParams.get('action') !== ACCOUNT_SETTING_MODAL_ACTION)
-        return
-      url.searchParams.delete('action')
-      url.searchParams.delete('tab')
-      window.history.replaceState(null, '', url.toString())
-      return
-    }
-    url.searchParams.set('action', ACCOUNT_SETTING_MODAL_ACTION)
-    url.searchParams.set('tab', showAccountSettingModal.payload)
-    window.history.replaceState(null, '', url.toString())
-  }, [showAccountSettingModal])
-
-  useEffect(() => {
-    if (typeof window === 'undefined')
-      return
-    const url = new URL(window.location.href)
-    if (showPricingModal) {
-      url.searchParams.set(PRICING_MODAL_QUERY_PARAM, PRICING_MODAL_QUERY_VALUE)
-    }
-    else {
-      url.searchParams.delete(PRICING_MODAL_QUERY_PARAM)
-      if (url.searchParams.get('action') === EDUCATION_PRICING_SHOW_ACTION)
-        url.searchParams.delete('action')
-    }
-    window.history.replaceState(null, '', url.toString())
-  }, [showPricingModal])
+    if (!urlAccountModalState.isOpen)
+      accountSettingCallbacksRef.current = null
+  }, [urlAccountModalState.isOpen])
 
   const { plan, isFetchedPlan } = useProviderContext()
   const {
@@ -337,12 +313,12 @@ export const ModalContextProvider = ({
   }
 
   const handleShowPricingModal = useCallback(() => {
-    setShowPricingModal(true)
-  }, [])
+    setPricingModalOpen(true)
+  }, [setPricingModalOpen])
 
   const handleCancelPricingModal = useCallback(() => {
-    setShowPricingModal(false)
-  }, [])
+    setPricingModalOpen(false)
+  }, [setPricingModalOpen])
 
   return (
     <ModalContext.Provider value={{
@@ -364,9 +340,9 @@ export const ModalContextProvider = ({
       <>
         {children}
         {
-          !!showAccountSettingModal && (
+          accountSettingTab && (
             <AccountSetting
-              activeTab={showAccountSettingModal.payload}
+              activeTab={accountSettingTab}
               onCancel={handleCancelAccountSettingModal}
               onTabChange={handleAccountSettingTabChange}
             />
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/context/query-client.tsx b/web/context/query-client.tsx
index da95491630..8882048a63 100644
--- a/web/context/query-client.tsx
+++ b/web/context/query-client.tsx
@@ -2,7 +2,14 @@
 
 import type { FC, PropsWithChildren } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { lazy, Suspense } from 'react'
+import { IS_DEV } from '@/config'
+
+const TanStackDevtoolsWrapper = lazy(() =>
+  import('@/app/components/devtools').then(module => ({
+    default: module.TanStackDevtoolsWrapper,
+  })),
+)
 
 const STALE_TIME = 1000 * 60 * 30 // 30 minutes
 
@@ -19,7 +26,11 @@ export const TanstackQueryInitializer: FC<PropsWithChildren> = (props) => {
   return (
     <QueryClientProvider client={client}>
       {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+      {IS_DEV && (
+        <Suspense fallback={null}>
+          <TanStackDevtoolsWrapper />
+        </Suspense>
+      )}
     </QueryClientProvider>
   )
 }
diff --git a/web/hooks/use-query-params.spec.tsx b/web/hooks/use-query-params.spec.tsx
new file mode 100644
index 0000000000..2aa6b7998f
--- /dev/null
+++ b/web/hooks/use-query-params.spec.tsx
@@ -0,0 +1,647 @@
+import type { UrlUpdateEvent } from 'nuqs/adapters/testing'
+import type { ReactNode } from 'react'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
+import { ACCOUNT_SETTING_MODAL_ACTION } from '@/app/components/header/account-setting/constants'
+import {
+  clearQueryParams,
+  PRICING_MODAL_QUERY_PARAM,
+  PRICING_MODAL_QUERY_VALUE,
+  useAccountSettingModal,
+  useMarketplaceFilters,
+  usePluginInstallation,
+  usePricingModal,
+} from './use-query-params'
+
+const renderWithAdapter = <T,>(hook: () => T, searchParams = '') => {
+  const onUrlUpdate = vi.fn<(event: UrlUpdateEvent) => void>()
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <NuqsTestingAdapter searchParams={searchParams} onUrlUpdate={onUrlUpdate}>
+      {children}
+    </NuqsTestingAdapter>
+  )
+  const { result } = renderHook(hook, { wrapper })
+  return { result, onUrlUpdate }
+}
+
+// Query param hooks: defaults, parsing, and URL sync behavior.
+describe('useQueryParams hooks', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Pricing modal query behavior.
+  describe('usePricingModal', () => {
+    it('should return closed state when query param is missing', () => {
+      // Arrange
+      const { result } = renderWithAdapter(() => usePricingModal())
+
+      // Act
+      const [isOpen] = result.current
+
+      // Assert
+      expect(isOpen).toBe(false)
+    })
+
+    it('should return open state when query param matches open value', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => usePricingModal(),
+        `?${PRICING_MODAL_QUERY_PARAM}=${PRICING_MODAL_QUERY_VALUE}`,
+      )
+
+      // Act
+      const [isOpen] = result.current
+
+      // Assert
+      expect(isOpen).toBe(true)
+    })
+
+    it('should return closed state when query param has unexpected value', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => usePricingModal(),
+        `?${PRICING_MODAL_QUERY_PARAM}=closed`,
+      )
+
+      // Act
+      const [isOpen] = result.current
+
+      // Assert
+      expect(isOpen).toBe(false)
+    })
+
+    it('should set pricing param when opening', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => usePricingModal())
+
+      // Act
+      act(() => {
+        result.current[1](true)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get(PRICING_MODAL_QUERY_PARAM)).toBe(PRICING_MODAL_QUERY_VALUE)
+    })
+
+    it('should use push history when opening', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => usePricingModal())
+
+      // Act
+      act(() => {
+        result.current[1](true)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.options.history).toBe('push')
+    })
+
+    it('should clear pricing param when closing', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => usePricingModal(),
+        `?${PRICING_MODAL_QUERY_PARAM}=${PRICING_MODAL_QUERY_VALUE}`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1](false)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has(PRICING_MODAL_QUERY_PARAM)).toBe(false)
+    })
+
+    it('should use push history when closing', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => usePricingModal(),
+        `?${PRICING_MODAL_QUERY_PARAM}=${PRICING_MODAL_QUERY_VALUE}`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1](false)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.options.history).toBe('push')
+    })
+
+    it('should respect explicit history options when provided', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => usePricingModal())
+
+      // Act
+      act(() => {
+        result.current[1](true, { history: 'replace' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.options.history).toBe('replace')
+    })
+  })
+
+  // Account settings modal query behavior.
+  describe('useAccountSettingModal', () => {
+    it('should return closed state with null payload when query params are missing', () => {
+      // Arrange
+      const { result } = renderWithAdapter(() => useAccountSettingModal())
+
+      // Act
+      const [state] = result.current
+
+      // Assert
+      expect(state.isOpen).toBe(false)
+      expect(state.payload).toBeNull()
+    })
+
+    it('should return open state when action matches', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => useAccountSettingModal(),
+        `?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
+      )
+
+      // Act
+      const [state] = result.current
+
+      // Assert
+      expect(state.isOpen).toBe(true)
+      expect(state.payload).toBe('billing')
+    })
+
+    it('should return closed state when action does not match', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => useAccountSettingModal(),
+        '?action=other&tab=billing',
+      )
+
+      // Act
+      const [state] = result.current
+
+      // Assert
+      expect(state.isOpen).toBe(false)
+      expect(state.payload).toBeNull()
+    })
+
+    it('should set action and tab when opening', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => useAccountSettingModal())
+
+      // Act
+      act(() => {
+        result.current[1]({ payload: 'members' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('action')).toBe(ACCOUNT_SETTING_MODAL_ACTION)
+      expect(update.searchParams.get('tab')).toBe('members')
+    })
+
+    it('should use push history when opening from closed state', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => useAccountSettingModal())
+
+      // Act
+      act(() => {
+        result.current[1]({ payload: 'members' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.options.history).toBe('push')
+    })
+
+    it('should update tab when switching while open', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useAccountSettingModal(),
+        `?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1]({ payload: 'provider' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('tab')).toBe('provider')
+    })
+
+    it('should use replace history when switching tabs while open', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useAccountSettingModal(),
+        `?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1]({ payload: 'provider' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.options.history).toBe('replace')
+    })
+
+    it('should clear action and tab when closing', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useAccountSettingModal(),
+        `?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1](null)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('action')).toBe(false)
+      expect(update.searchParams.has('tab')).toBe(false)
+    })
+
+    it('should use replace history when closing', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useAccountSettingModal(),
+        `?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1](null)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.options.history).toBe('replace')
+    })
+  })
+
+  // Marketplace filters query behavior.
+  describe('useMarketplaceFilters', () => {
+    it('should return default filters when query params are missing', () => {
+      // Arrange
+      const { result } = renderWithAdapter(() => useMarketplaceFilters())
+
+      // Act
+      const [filters] = result.current
+
+      // Assert
+      expect(filters.q).toBe('')
+      expect(filters.category).toBe('all')
+      expect(filters.tags).toEqual([])
+    })
+
+    it('should parse filters when query params are present', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => useMarketplaceFilters(),
+        '?q=prompt&category=tool&tags=ai,ml',
+      )
+
+      // Act
+      const [filters] = result.current
+
+      // Assert
+      expect(filters.q).toBe('prompt')
+      expect(filters.category).toBe('tool')
+      expect(filters.tags).toEqual(['ai', 'ml'])
+    })
+
+    it('should treat empty tags param as empty array', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => useMarketplaceFilters(),
+        '?tags=',
+      )
+
+      // Act
+      const [filters] = result.current
+
+      // Assert
+      expect(filters.tags).toEqual([])
+    })
+
+    it('should preserve other filters when updating a single field', async () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => useMarketplaceFilters(),
+        '?category=tool&tags=ai,ml',
+      )
+
+      // Act
+      act(() => {
+        result.current[1]({ q: 'search' })
+      })
+
+      // Assert
+      await waitFor(() => expect(result.current[0].q).toBe('search'))
+      expect(result.current[0].category).toBe('tool')
+      expect(result.current[0].tags).toEqual(['ai', 'ml'])
+    })
+
+    it('should clear q param when q is empty', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useMarketplaceFilters(),
+        '?q=search',
+      )
+
+      // Act
+      act(() => {
+        result.current[1]({ q: '' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('q')).toBe(false)
+    })
+
+    it('should serialize tags as comma-separated values', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => useMarketplaceFilters())
+
+      // Act
+      act(() => {
+        result.current[1]({ tags: ['ai', 'ml'] })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('tags')).toBe('ai,ml')
+    })
+
+    it('should remove tags param when list is empty', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useMarketplaceFilters(),
+        '?tags=ai,ml',
+      )
+
+      // Act
+      act(() => {
+        result.current[1]({ tags: [] })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('tags')).toBe(false)
+    })
+
+    it('should keep category in the URL when set to default', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useMarketplaceFilters(),
+        '?category=tool',
+      )
+
+      // Act
+      act(() => {
+        result.current[1]({ category: 'all' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('category')).toBe('all')
+    })
+
+    it('should clear all marketplace filters when set to null', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => useMarketplaceFilters(),
+        '?q=search&category=tool&tags=ai,ml',
+      )
+
+      // Act
+      act(() => {
+        result.current[1](null)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('q')).toBe(false)
+      expect(update.searchParams.has('category')).toBe(false)
+      expect(update.searchParams.has('tags')).toBe(false)
+    })
+
+    it('should use replace history when updating filters', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => useMarketplaceFilters())
+
+      // Act
+      act(() => {
+        result.current[1]({ q: 'search' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.options.history).toBe('replace')
+    })
+  })
+
+  // Plugin installation query behavior.
+  describe('usePluginInstallation', () => {
+    it('should parse package ids from JSON arrays', () => {
+      // Arrange
+      const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
+      const { result } = renderWithAdapter(
+        () => usePluginInstallation(),
+        `?package-ids=%5B%22org%2Fplugin%22%5D&bundle-info=${encodeURIComponent(JSON.stringify(bundleInfo))}`,
+      )
+
+      // Act
+      const [state] = result.current
+
+      // Assert
+      expect(state.packageId).toBe('org/plugin')
+      expect(state.bundleInfo).toEqual(bundleInfo)
+    })
+
+    it('should return raw package id when JSON parsing fails', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => usePluginInstallation(),
+        '?package-ids=org/plugin',
+      )
+
+      // Act
+      const [state] = result.current
+
+      // Assert
+      expect(state.packageId).toBe('org/plugin')
+    })
+
+    it('should return raw package id when JSON is not an array', () => {
+      // Arrange
+      const { result } = renderWithAdapter(
+        () => usePluginInstallation(),
+        '?package-ids=%22org%2Fplugin%22',
+      )
+
+      // Act
+      const [state] = result.current
+
+      // Assert
+      expect(state.packageId).toBe('"org/plugin"')
+    })
+
+    it('should write package ids as JSON arrays when setting packageId', async () => {
+      // Arrange
+      const { result, onUrlUpdate } = renderWithAdapter(() => usePluginInstallation())
+
+      // Act
+      act(() => {
+        result.current[1]({ packageId: 'org/plugin' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('package-ids')).toBe('["org/plugin"]')
+    })
+
+    it('should set bundle info when provided', async () => {
+      // Arrange
+      const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
+      const { result, onUrlUpdate } = renderWithAdapter(() => usePluginInstallation())
+
+      // Act
+      act(() => {
+        result.current[1]({ bundleInfo })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('bundle-info')).toBe(JSON.stringify(bundleInfo))
+    })
+
+    it('should clear installation params when state is null', async () => {
+      // Arrange
+      const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => usePluginInstallation(),
+        `?package-ids=%5B%22org%2Fplugin%22%5D&bundle-info=${encodeURIComponent(JSON.stringify(bundleInfo))}`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1](null)
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.has('package-ids')).toBe(false)
+      expect(update.searchParams.has('bundle-info')).toBe(false)
+    })
+
+    it('should preserve bundle info when only packageId is updated', async () => {
+      // Arrange
+      const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
+      const { result, onUrlUpdate } = renderWithAdapter(
+        () => usePluginInstallation(),
+        `?bundle-info=${encodeURIComponent(JSON.stringify(bundleInfo))}`,
+      )
+
+      // Act
+      act(() => {
+        result.current[1]({ packageId: 'org/plugin' })
+      })
+
+      // Assert
+      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
+      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
+      expect(update.searchParams.get('bundle-info')).toBe(JSON.stringify(bundleInfo))
+    })
+  })
+})
+
+// Utility to clear query params from the current URL.
+describe('clearQueryParams', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.history.replaceState(null, '', '/')
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('should remove a single key when provided one key', () => {
+    // Arrange
+    const replaceSpy = vi.spyOn(window.history, 'replaceState')
+    window.history.pushState(null, '', '/?foo=1&bar=2')
+
+    // Act
+    clearQueryParams('foo')
+
+    // Assert
+    expect(replaceSpy).toHaveBeenCalled()
+    const params = new URLSearchParams(window.location.search)
+    expect(params.has('foo')).toBe(false)
+    expect(params.get('bar')).toBe('2')
+    replaceSpy.mockRestore()
+  })
+
+  it('should remove multiple keys when provided an array', () => {
+    // Arrange
+    const replaceSpy = vi.spyOn(window.history, 'replaceState')
+    window.history.pushState(null, '', '/?foo=1&bar=2&baz=3')
+
+    // Act
+    clearQueryParams(['foo', 'baz'])
+
+    // Assert
+    expect(replaceSpy).toHaveBeenCalled()
+    const params = new URLSearchParams(window.location.search)
+    expect(params.has('foo')).toBe(false)
+    expect(params.has('baz')).toBe(false)
+    expect(params.get('bar')).toBe('2')
+    replaceSpy.mockRestore()
+  })
+
+  it('should no-op when window is undefined', () => {
+    // Arrange
+    const replaceSpy = vi.spyOn(window.history, 'replaceState')
+    vi.stubGlobal('window', undefined)
+
+    // Act
+    expect(() => clearQueryParams('foo')).not.toThrow()
+
+    // Assert
+    expect(replaceSpy).not.toHaveBeenCalled()
+    replaceSpy.mockRestore()
+  })
+})
diff --git a/web/hooks/use-query-params.ts b/web/hooks/use-query-params.ts
new file mode 100644
index 0000000000..e0d7cc3c02
--- /dev/null
+++ b/web/hooks/use-query-params.ts
@@ -0,0 +1,222 @@
+'use client'
+
+/**
+ * Centralized URL query parameter management hooks using nuqs
+ *
+ * This file provides type-safe, performant query parameter management
+ * that doesn't trigger full page refreshes (shallow routing).
+ *
+ * Best practices from nuqs documentation:
+ * - Use useQueryState for single parameters
+ * - Use useQueryStates for multiple related parameters (atomic updates)
+ * - Always provide parsers with defaults for type safety
+ * - Use shallow routing to avoid unnecessary re-renders
+ */
+
+import {
+  createParser,
+  parseAsArrayOf,
+  parseAsString,
+  useQueryState,
+  useQueryStates,
+} from 'nuqs'
+import { useCallback } from 'react'
+import { ACCOUNT_SETTING_MODAL_ACTION } from '@/app/components/header/account-setting/constants'
+
+/**
+ * Modal State Query Parameters
+ * Manages modal visibility and configuration via URL
+ */
+export const PRICING_MODAL_QUERY_PARAM = 'pricing'
+export const PRICING_MODAL_QUERY_VALUE = 'open'
+const parseAsPricingModal = createParser<boolean>({
+  parse: value => (value === PRICING_MODAL_QUERY_VALUE ? true : null),
+  serialize: value => (value ? PRICING_MODAL_QUERY_VALUE : ''),
+})
+  .withDefault(false)
+  .withOptions({ history: 'push' })
+
+/**
+ * Hook to manage pricing modal state via URL
+ * @returns [isOpen, setIsOpen] - Tuple like useState
+ *
+ * @example
+ * const [isOpen, setIsOpen] = usePricingModal()
+ * setIsOpen(true) // Sets ?pricing=open
+ * setIsOpen(false) // Removes ?pricing
+ */
+export function usePricingModal() {
+  return useQueryState(
+    PRICING_MODAL_QUERY_PARAM,
+    parseAsPricingModal,
+  )
+}
+
+/**
+ * Hook to manage account setting modal state via URL
+ * @returns [state, setState] - Object with isOpen + payload (tab) and setter
+ *
+ * @example
+ * const [accountModalState, setAccountModalState] = useAccountSettingModal()
+ * setAccountModalState({ payload: 'billing' }) // Sets ?action=showSettings&tab=billing
+ * setAccountModalState(null) // Removes both params
+ */
+export function useAccountSettingModal<T extends string = string>() {
+  const [accountState, setAccountState] = useQueryStates(
+    {
+      action: parseAsString,
+      tab: parseAsString,
+    },
+    {
+      history: 'replace',
+    },
+  )
+
+  const setState = useCallback(
+    (state: { payload: T } | null) => {
+      if (!state) {
+        setAccountState({ action: null, tab: null }, { history: 'replace' })
+        return
+      }
+      const shouldPush = accountState.action !== ACCOUNT_SETTING_MODAL_ACTION
+      setAccountState(
+        { action: ACCOUNT_SETTING_MODAL_ACTION, tab: state.payload },
+        { history: shouldPush ? 'push' : 'replace' },
+      )
+    },
+    [accountState.action, setAccountState],
+  )
+
+  const isOpen = accountState.action === ACCOUNT_SETTING_MODAL_ACTION
+  const currentTab = (isOpen ? accountState.tab : null) as T | null
+
+  return [{ isOpen, payload: currentTab }, setState] as const
+}
+
+/**
+ * Marketplace Search Query Parameters
+ */
+export type MarketplaceFilters = {
+  q: string // search query
+  category: string // plugin category
+  tags: string[] // array of tags
+}
+
+/**
+ * Hook to manage marketplace search/filter state via URL
+ * Provides atomic updates - all params update together
+ *
+ * @example
+ * const [filters, setFilters] = useMarketplaceFilters()
+ * setFilters({ q: 'search', category: 'tool', tags: ['ai'] }) // Updates all at once
+ * setFilters({ q: '' }) // Only updates q, keeps others
+ * setFilters(null) // Clears all marketplace params
+ */
+export function useMarketplaceFilters() {
+  return useQueryStates(
+    {
+      q: parseAsString.withDefault(''),
+      category: parseAsString.withDefault('all').withOptions({ clearOnDefault: false }),
+      tags: parseAsArrayOf(parseAsString).withDefault([]),
+    },
+    {
+      // Update URL without pushing to history (replaceState behavior)
+      history: 'replace',
+    },
+  )
+}
+
+/**
+ * Plugin Installation Query Parameters
+ */
+const PACKAGE_IDS_PARAM = 'package-ids'
+const BUNDLE_INFO_PARAM = 'bundle-info'
+type BundleInfoQuery = {
+  org: string
+  name: string
+  version: string
+}
+
+const parseAsPackageId = createParser<string>({
+  parse: (value) => {
+    try {
+      const parsed = JSON.parse(value)
+      if (Array.isArray(parsed)) {
+        const first = parsed[0]
+        return typeof first === 'string' ? first : null
+      }
+      return value
+    }
+    catch {
+      return value
+    }
+  },
+  serialize: value => JSON.stringify([value]),
+})
+
+const parseAsBundleInfo = createParser<BundleInfoQuery>({
+  parse: (value) => {
+    try {
+      const parsed = JSON.parse(value) as Partial<BundleInfoQuery>
+      if (parsed
+        && typeof parsed.org === 'string'
+        && typeof parsed.name === 'string'
+        && typeof parsed.version === 'string') {
+        return { org: parsed.org, name: parsed.name, version: parsed.version }
+      }
+    }
+    catch {
+      return null
+    }
+    return null
+  },
+  serialize: value => JSON.stringify(value),
+})
+
+/**
+ * Hook to manage plugin installation state via URL
+ * @returns [installState, setInstallState] - installState includes parsed packageId and bundleInfo
+ *
+ * @example
+ * const [installState, setInstallState] = usePluginInstallation()
+ * setInstallState({ packageId: 'org/plugin' }) // Sets ?package-ids=["org/plugin"]
+ * setInstallState({ bundleInfo: { org: 'org', name: 'bundle', version: '1.0.0' } }) // Sets ?bundle-info=...
+ * setInstallState(null) // Clears installation params
+ */
+export function usePluginInstallation() {
+  return useQueryStates(
+    {
+      packageId: parseAsPackageId,
+      bundleInfo: parseAsBundleInfo,
+    },
+    {
+      urlKeys: {
+        packageId: PACKAGE_IDS_PARAM,
+        bundleInfo: BUNDLE_INFO_PARAM,
+      },
+    },
+  )
+}
+
+/**
+ * Utility to clear specific query parameters from URL
+ * This is a client-side utility that should be called from client components
+ *
+ * @param keys - Single key or array of keys to remove from URL
+ *
+ * @example
+ * // In a client component
+ * clearQueryParams('param1')
+ * clearQueryParams(['param1', 'param2'])
+ */
+export function clearQueryParams(keys: string | string[]) {
+  if (typeof window === 'undefined')
+    return
+
+  const url = new URL(window.location.href)
+  const keysArray = Array.isArray(keys) ? keys : [keys]
+
+  keysArray.forEach(key => url.searchParams.delete(key))
+
+  window.history.replaceState(null, '', url.toString())
+}
diff --git a/web/hooks/use-tab-searchparams.spec.ts b/web/hooks/use-tab-searchparams.spec.ts
deleted file mode 100644
index e724f323af..0000000000
--- a/web/hooks/use-tab-searchparams.spec.ts
+++ /dev/null
@@ -1,545 +0,0 @@
-import type { Mock } from 'vitest'
-/**
- * Test suite for useTabSearchParams hook
- *
- * This hook manages tab state through URL search parameters, enabling:
- * - Bookmarkable tab states (users can share URLs with specific tabs active)
- * - Browser history integration (back/forward buttons work with tabs)
- * - Configurable routing behavior (push vs replace)
- * - Optional search parameter syncing (can disable URL updates)
- *
- * The hook syncs a local tab state with URL search parameters, making tab
- * navigation persistent and shareable across sessions.
- */
-import { act, renderHook } from '@testing-library/react'
-// Import after mocks
-import { usePathname } from 'next/navigation'
-
-import { useTabSearchParams } from './use-tab-searchparams'
-
-// Mock Next.js navigation hooks
-const mockPush = vi.fn()
-const mockReplace = vi.fn()
-const mockPathname = '/test-path'
-const mockSearchParams = new URLSearchParams()
-
-vi.mock('next/navigation', () => ({
-  usePathname: vi.fn(() => mockPathname),
-  useRouter: vi.fn(() => ({
-    push: mockPush,
-    replace: mockReplace,
-  })),
-  useSearchParams: vi.fn(() => mockSearchParams),
-}))
-
-describe('useTabSearchParams', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockSearchParams.delete('category')
-    mockSearchParams.delete('tab')
-  })
-
-  describe('Basic functionality', () => {
-    /**
-     * Test that the hook returns a tuple with activeTab and setActiveTab
-     * This is the primary interface matching React's useState pattern
-     */
-    it('should return activeTab and setActiveTab function', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      const [activeTab, setActiveTab] = result.current
-
-      expect(typeof activeTab).toBe('string')
-      expect(typeof setActiveTab).toBe('function')
-    })
-
-    /**
-     * Test that the hook initializes with the default tab
-     * When no search param is present, should use defaultTab
-     */
-    it('should initialize with default tab when no search param exists', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('overview')
-    })
-
-    /**
-     * Test that the hook reads from URL search parameters
-     * When a search param exists, it should take precedence over defaultTab
-     */
-    it('should initialize with search param value when present', () => {
-      mockSearchParams.set('category', 'settings')
-
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('settings')
-    })
-
-    /**
-     * Test that setActiveTab updates the local state
-     * The active tab should change when setActiveTab is called
-     */
-    it('should update active tab when setActiveTab is called', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings')
-      })
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('settings')
-    })
-  })
-
-  describe('Routing behavior', () => {
-    /**
-     * Test default push routing behavior
-     * By default, tab changes should use router.push (adds to history)
-     */
-    it('should use push routing by default', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings')
-      })
-
-      expect(mockPush).toHaveBeenCalledWith('/test-path?category=settings', { scroll: false })
-      expect(mockReplace).not.toHaveBeenCalled()
-    })
-
-    /**
-     * Test replace routing behavior
-     * When routingBehavior is 'replace', should use router.replace (no history)
-     */
-    it('should use replace routing when specified', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          routingBehavior: 'replace',
-        }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings')
-      })
-
-      expect(mockReplace).toHaveBeenCalledWith('/test-path?category=settings', { scroll: false })
-      expect(mockPush).not.toHaveBeenCalled()
-    })
-
-    /**
-     * Test that URL encoding is applied to tab values
-     * Special characters in tab names should be properly encoded
-     */
-    it('should encode special characters in tab values', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings & config')
-      })
-
-      expect(mockPush).toHaveBeenCalledWith(
-        '/test-path?category=settings%20%26%20config',
-        { scroll: false },
-      )
-    })
-
-    /**
-     * Test that URL decoding is applied when reading from search params
-     * Encoded values in the URL should be properly decoded
-     */
-    it('should decode encoded values from search params', () => {
-      mockSearchParams.set('category', 'settings%20%26%20config')
-
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('settings & config')
-    })
-  })
-
-  describe('Custom search parameter name', () => {
-    /**
-     * Test using a custom search parameter name
-     * Should support different param names instead of default 'category'
-     */
-    it('should use custom search param name', () => {
-      mockSearchParams.set('tab', 'profile')
-
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          searchParamName: 'tab',
-        }),
-      )
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('profile')
-    })
-
-    /**
-     * Test that setActiveTab uses the custom param name in the URL
-     */
-    it('should update URL with custom param name', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          searchParamName: 'tab',
-        }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('profile')
-      })
-
-      expect(mockPush).toHaveBeenCalledWith('/test-path?tab=profile', { scroll: false })
-    })
-  })
-
-  describe('Disabled search params mode', () => {
-    /**
-     * Test that disableSearchParams prevents URL updates
-     * When disabled, tab state should be local only
-     */
-    it('should not update URL when disableSearchParams is true', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          disableSearchParams: true,
-        }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings')
-      })
-
-      expect(mockPush).not.toHaveBeenCalled()
-      expect(mockReplace).not.toHaveBeenCalled()
-    })
-
-    /**
-     * Test that local state still updates when search params are disabled
-     * The tab state should work even without URL syncing
-     */
-    it('should still update local state when search params disabled', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          disableSearchParams: true,
-        }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings')
-      })
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('settings')
-    })
-
-    /**
-     * Test that disabled mode always uses defaultTab
-     * Search params should be ignored when disabled
-     */
-    it('should use defaultTab when search params disabled even if URL has value', () => {
-      mockSearchParams.set('category', 'settings')
-
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          disableSearchParams: true,
-        }),
-      )
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('overview')
-    })
-  })
-
-  describe('Edge cases', () => {
-    /**
-     * Test handling of empty string tab values
-     * Empty strings should be handled gracefully
-     */
-    it('should handle empty string tab values', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('')
-      })
-
-      const [activeTab] = result.current
-      expect(activeTab).toBe('')
-      expect(mockPush).toHaveBeenCalledWith('/test-path?category=', { scroll: false })
-    })
-
-    /**
-     * Test that special characters in tab names are properly encoded
-     * This ensures URLs remain valid even with unusual tab names
-     */
-    it('should handle tabs with various special characters', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      // Test tab with slashes
-      act(() => result.current[1]('tab/with/slashes'))
-      expect(result.current[0]).toBe('tab/with/slashes')
-
-      // Test tab with question marks
-      act(() => result.current[1]('tab?with?questions'))
-      expect(result.current[0]).toBe('tab?with?questions')
-
-      // Test tab with hash symbols
-      act(() => result.current[1]('tab#with#hash'))
-      expect(result.current[0]).toBe('tab#with#hash')
-
-      // Test tab with equals signs
-      act(() => result.current[1]('tab=with=equals'))
-      expect(result.current[0]).toBe('tab=with=equals')
-    })
-
-    /**
-     * Test fallback when pathname is not available
-     * Should use window.location.pathname as fallback
-     */
-    it('should fallback to window.location.pathname when hook pathname is null', () => {
-      ;(usePathname as Mock).mockReturnValue(null)
-
-      // Mock window.location.pathname
-      Object.defineProperty(window, 'location', {
-        value: { pathname: '/fallback-path' },
-        writable: true,
-      })
-
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings')
-      })
-
-      expect(mockPush).toHaveBeenCalledWith('/fallback-path?category=settings', { scroll: false })
-
-      // Restore mock
-      ;(usePathname as Mock).mockReturnValue(mockPathname)
-    })
-  })
-
-  describe('Multiple instances', () => {
-    /**
-     * Test that multiple instances with different param names work independently
-     * Different hooks should not interfere with each other
-     */
-    it('should support multiple independent tab states', () => {
-      mockSearchParams.set('category', 'overview')
-      mockSearchParams.set('subtab', 'details')
-
-      const { result: result1 } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'home',
-          searchParamName: 'category',
-        }),
-      )
-
-      const { result: result2 } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'info',
-          searchParamName: 'subtab',
-        }),
-      )
-
-      const [activeTab1] = result1.current
-      const [activeTab2] = result2.current
-
-      expect(activeTab1).toBe('overview')
-      expect(activeTab2).toBe('details')
-    })
-  })
-
-  describe('Integration scenarios', () => {
-    /**
-     * Test typical usage in a tabbed interface
-     * Simulates real-world tab switching behavior
-     */
-    it('should handle sequential tab changes', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      // Change to settings tab
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('settings')
-      })
-
-      expect(result.current[0]).toBe('settings')
-      expect(mockPush).toHaveBeenCalledWith('/test-path?category=settings', { scroll: false })
-
-      // Change to profile tab
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('profile')
-      })
-
-      expect(result.current[0]).toBe('profile')
-      expect(mockPush).toHaveBeenCalledWith('/test-path?category=profile', { scroll: false })
-
-      // Verify push was called twice
-      expect(mockPush).toHaveBeenCalledTimes(2)
-    })
-
-    /**
-     * Test that the hook works with complex pathnames
-     * Should handle nested routes and existing query params
-     */
-    it('should work with complex pathnames', () => {
-      ;(usePathname as Mock).mockReturnValue('/app/123/settings')
-
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('advanced')
-      })
-
-      expect(mockPush).toHaveBeenCalledWith('/app/123/settings?category=advanced', { scroll: false })
-
-      // Restore mock
-      ;(usePathname as Mock).mockReturnValue(mockPathname)
-    })
-  })
-
-  describe('Type safety', () => {
-    /**
-     * Test that the return type is a const tuple
-     * TypeScript should infer [string, (tab: string) => void] as const
-     */
-    it('should return a const tuple type', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      // The result should be a tuple with exactly 2 elements
-      expect(result.current).toHaveLength(2)
-      expect(typeof result.current[0]).toBe('string')
-      expect(typeof result.current[1]).toBe('function')
-    })
-  })
-
-  describe('Performance', () => {
-    /**
-     * Test that the hook creates a new function on each render
-     * Note: The current implementation doesn't use useCallback,
-     * so setActiveTab is recreated on each render. This could lead to
-     * unnecessary re-renders in child components that depend on this function.
-     * TODO: Consider memoizing setActiveTab with useCallback for better performance.
-     */
-    it('should create new setActiveTab function on each render', () => {
-      const { result, rerender } = renderHook(() =>
-        useTabSearchParams({ defaultTab: 'overview' }),
-      )
-
-      const [, firstSetActiveTab] = result.current
-      rerender()
-      const [, secondSetActiveTab] = result.current
-
-      // Function reference changes on re-render (not memoized)
-      expect(firstSetActiveTab).not.toBe(secondSetActiveTab)
-
-      // But both functions should work correctly
-      expect(typeof firstSetActiveTab).toBe('function')
-      expect(typeof secondSetActiveTab).toBe('function')
-    })
-  })
-
-  describe('Browser history integration', () => {
-    /**
-     * Test that push behavior adds to browser history
-     * This enables back/forward navigation through tabs
-     */
-    it('should add to history with push behavior', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          routingBehavior: 'push',
-        }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('tab1')
-      })
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('tab2')
-      })
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('tab3')
-      })
-
-      // Each tab change should create a history entry
-      expect(mockPush).toHaveBeenCalledTimes(3)
-    })
-
-    /**
-     * Test that replace behavior doesn't add to history
-     * This prevents cluttering browser history with tab changes
-     */
-    it('should not add to history with replace behavior', () => {
-      const { result } = renderHook(() =>
-        useTabSearchParams({
-          defaultTab: 'overview',
-          routingBehavior: 'replace',
-        }),
-      )
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('tab1')
-      })
-
-      act(() => {
-        const [, setActiveTab] = result.current
-        setActiveTab('tab2')
-      })
-
-      // Should use replace instead of push
-      expect(mockReplace).toHaveBeenCalledTimes(2)
-      expect(mockPush).not.toHaveBeenCalled()
-    })
-  })
-})
diff --git a/web/hooks/use-tab-searchparams.ts b/web/hooks/use-tab-searchparams.ts
deleted file mode 100644
index 427da16eef..0000000000
--- a/web/hooks/use-tab-searchparams.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { useState } from 'react'
-
-type UseTabSearchParamsOptions = {
-  defaultTab: string
-  routingBehavior?: 'push' | 'replace'
-  searchParamName?: string
-  disableSearchParams?: boolean
-}
-
-/**
- * Custom hook to manage tab state via URL search parameters in a Next.js application.
- * This hook allows for syncing the active tab with the browser's URL, enabling bookmarking and sharing of URLs with a specific tab activated.
- *
- * @param {UseTabSearchParamsOptions} options Configuration options for the hook:
- * - `defaultTab`: The tab to default to when no tab is specified in the URL.
- * - `routingBehavior`: Optional. Determines how changes to the active tab update the browser's history ('push' or 'replace'). Default is 'push'.
- * - `searchParamName`: Optional. The name of the search parameter that holds the tab state in the URL. Default is 'category'.
- * @returns A tuple where the first element is the active tab and the second element is a function to set the active tab.
- */
-export const useTabSearchParams = ({
-  defaultTab,
-  routingBehavior = 'push',
-  searchParamName = 'category',
-  disableSearchParams = false,
-}: UseTabSearchParamsOptions) => {
-  const pathnameFromHook = usePathname()
-  const router = useRouter()
-  const pathName = pathnameFromHook || window?.location?.pathname
-  const searchParams = useSearchParams()
-  const searchParamValue = searchParams.has(searchParamName) ? decodeURIComponent(searchParams.get(searchParamName)!) : defaultTab
-  const [activeTab, setTab] = useState<string>(
-    !disableSearchParams
-      ? searchParamValue
-      : defaultTab,
-  )
-
-  const setActiveTab = (newActiveTab: string) => {
-    setTab(newActiveTab)
-    if (disableSearchParams)
-      return
-    router[`${routingBehavior}`](`${pathName}?${searchParamName}=${encodeURIComponent(newActiveTab)}`, { scroll: false })
-  }
-
-  return [activeTab, setActiveTab] as const
-}
diff --git a/web/i18n-config/i18next-config.ts b/web/i18n-config/i18next-config.ts
index e82f5f2acb..8dce79a5e5 100644
--- a/web/i18n-config/i18next-config.ts
+++ b/web/i18n-config/i18next-config.ts
@@ -1,7 +1,7 @@
 'use client'
 import type { Locale } from '.'
+import { camelCase, kebabCase } from 'es-toolkit/compat'
 import i18n from 'i18next'
-import { camelCase, kebabCase } from 'lodash-es'
 
 import { initReactI18next } from 'react-i18next'
 import app from '../i18n/en-US/app'
diff --git a/web/i18n-config/server.ts b/web/i18n-config/server.ts
index 75a5f3943b..736d76e2c7 100644
--- a/web/i18n-config/server.ts
+++ b/web/i18n-config/server.ts
@@ -1,9 +1,8 @@
 import type { Locale } from '.'
-import type { KeyPrefix, Namespace } from './i18next-config'
+import type { Namespace } from './i18next-config'
 import { match } from '@formatjs/intl-localematcher'
 import { createInstance } from 'i18next'
 import resourcesToBackend from 'i18next-resources-to-backend'
-import { camelCase } from 'lodash-es'
 import Negotiator from 'negotiator'
 import { cookies, headers } from 'next/headers'
 import { initReactI18next } from 'react-i18next/initReactI18next'
@@ -23,10 +22,11 @@ const initI18next = async (lng: Locale, ns: Namespace) => {
   return i18nInstance
 }
 
-export async function getTranslation(lng: Locale, ns: Namespace) {
+export async function getTranslation(lng: Locale, ns: Namespace, options: Record<string, any> = {}) {
   const i18nextInstance = await initI18next(lng, ns)
   return {
-    t: i18nextInstance.getFixedT(lng, 'translation', camelCase(ns) as KeyPrefix),
+    // @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-debug.ts b/web/i18n/en-US/app-debug.ts
index 5604de3dd1..9d69c36d83 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -448,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/common.ts b/web/i18n/en-US/common.ts
index 2e378afeda..0117f2ae00 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -21,6 +21,7 @@ const translation = {
     cancel: 'Cancel',
     clear: 'Clear',
     save: 'Save',
+    saving: 'Saving...',
     yes: 'Yes',
     no: 'No',
     deleteConfirmTitle: 'Delete?',
diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts
index ee1997f699..af14426690 100644
--- a/web/i18n/en-US/dataset.ts
+++ b/web/i18n/en-US/dataset.ts
@@ -170,6 +170,7 @@ const translation = {
     enable: 'Enable',
     disable: 'Disable',
     archive: 'Archive',
+    reIndex: 'Re-index',
     delete: 'Delete',
     cancel: 'Cancel',
   },
diff --git a/web/i18n/en-US/plugin-trigger.ts b/web/i18n/en-US/plugin-trigger.ts
index f1d697e507..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}}?',
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-debug.ts b/web/i18n/ja-JP/app-debug.ts
index 9d1deb47eb..06b47c1a47 100644
--- a/web/i18n/ja-JP/app-debug.ts
+++ b/web/i18n/ja-JP/app-debug.ts
@@ -442,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/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-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index e3df0ea9ea..5d6c2842a5 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -444,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/dataset.ts b/web/i18n/zh-Hans/dataset.ts
index 781fb5aa94..7abd208edf 100644
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@@ -170,6 +170,7 @@ const translation = {
     enable: '启用',
     disable: '禁用',
     archive: '归档',
+    reIndex: '重新索引',
     delete: '删除',
     cancel: '取消',
   },
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/knip.config.ts b/web/knip.config.ts
index 6151a78af7..a63f742a21 100644
--- a/web/knip.config.ts
+++ b/web/knip.config.ts
@@ -76,7 +76,7 @@ const config: KnipConfig = {
     // Browser initialization (runs on client startup)
     'app/components/browser-initializer.tsx!',
     'app/components/sentry-initializer.tsx!',
-    'app/components/swr-initializer.tsx!',
+    'app/components/app-initializer.tsx!',
 
     // i18n initialization (server and client)
     'app/components/i18n.tsx!',
diff --git a/web/package.json b/web/package.json
index f3cc095811..00b4c7498c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,9 +1,9 @@
 {
   "name": "dify-web",
   "type": "module",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "private": true,
-  "packageManager": "pnpm@10.26.1+sha512.664074abc367d2c9324fdc18037097ce0a8f126034160f709928e9e9f95d98714347044e5c3164d65bd5da6c59c6be362b107546292a8eecb7999196e5ce58fa",
+  "packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6",
   "engines": {
     "node": ">=v22.11.0"
   },
@@ -38,7 +38,8 @@
     "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",
@@ -70,7 +71,6 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-form": "^1.23.7",
     "@tanstack/react-query": "^5.90.5",
-    "@tanstack/react-query-devtools": "^5.90.2",
     "abcjs": "^6.5.2",
     "ahooks": "^3.9.5",
     "class-variance-authority": "^0.7.1",
@@ -85,6 +85,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",
@@ -100,7 +101,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",
@@ -108,6 +108,7 @@
     "next": "~15.5.9",
     "next-pwa": "^5.6.0",
     "next-themes": "^0.4.6",
+    "nuqs": "^2.8.6",
     "pinyin-pro": "^3.27.0",
     "qrcode.react": "^4.2.0",
     "qs": "^6.14.0",
@@ -133,11 +134,10 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "scheduler": "^0.26.0",
+    "scheduler": "^0.27.0",
     "semver": "^7.7.3",
     "sharp": "^0.33.5",
     "sortablejs": "^1.15.6",
-    "swr": "^2.3.6",
     "tailwind-merge": "^2.6.0",
     "tldts": "^7.0.17",
     "use-context-selector": "^2.0.0",
@@ -163,13 +163,15 @@
     "@storybook/addon-themes": "9.1.13",
     "@storybook/nextjs": "9.1.13",
     "@storybook/react": "9.1.13",
+    "@tanstack/react-devtools": "^0.9.0",
+    "@tanstack/react-form-devtools": "^0.2.9",
+    "@tanstack/react-query-devtools": "^5.90.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@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",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 24e710534f..3ec415c183 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -129,9 +129,6 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.90.5
         version: 5.90.12(react@19.2.3)
-      '@tanstack/react-query-devtools':
-        specifier: ^5.90.2
-        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
       abcjs:
         specifier: ^6.5.2
         version: 6.5.2
@@ -174,6 +171,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 +219,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
@@ -243,6 +240,9 @@ importers:
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      nuqs:
+        specifier: ^2.8.6
+        version: 2.8.6(next@15.5.9(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0))(react@19.2.3)
       pinyin-pro:
         specifier: ^3.27.0
         version: 3.27.0
@@ -319,8 +319,8 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0
       scheduler:
-        specifier: ^0.26.0
-        version: 0.26.0
+        specifier: ^0.27.0
+        version: 0.27.0
       semver:
         specifier: ^7.7.3
         version: 7.7.3
@@ -330,9 +330,6 @@ importers:
       sortablejs:
         specifier: ^1.15.6
         version: 1.15.6
-      swr:
-        specifier: ^2.3.6
-        version: 2.3.7(react@19.2.3)
       tailwind-merge:
         specifier: ^2.6.0
         version: 2.6.0
@@ -341,7 +338,7 @@ importers:
         version: 7.0.19
       use-context-selector:
         specifier: ^2.0.0
-        version: 2.0.0(react@19.2.3)(scheduler@0.26.0)
+        version: 2.0.0(react@19.2.3)(scheduler@0.27.0)
       uuid:
         specifier: ^10.0.0
         version: 10.0.0
@@ -403,6 +400,15 @@ importers:
       '@storybook/react':
         specifier: 9.1.13
         version: 9.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.1.17(@testing-library/dom@10.4.1)(vite@7.3.0(@types/node@18.15.0)(jiti@1.21.7)(sass@1.95.0)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)))(typescript@5.9.3)
+      '@tanstack/react-devtools':
+        specifier: ^0.9.0
+        version: 0.9.0(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)
+      '@tanstack/react-form-devtools':
+        specifier: ^0.2.9
+        version: 0.2.9(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.90.2
+        version: 5.91.1(@tanstack/react-query@5.90.12(react@19.2.3))(react@19.2.3)
       '@testing-library/dom':
         specifier: ^10.4.1
         version: 10.4.1
@@ -421,9 +427,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
@@ -3172,6 +3175,39 @@ packages:
     resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
     engines: {node: '>=10'}
 
+  '@solid-primitives/event-listener@2.4.3':
+    resolution: {integrity: sha512-h4VqkYFv6Gf+L7SQj+Y6puigL/5DIi7x5q07VZET7AWcS+9/G3WfIE9WheniHWJs51OEkRB43w6lDys5YeFceg==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/keyboard@1.3.3':
+    resolution: {integrity: sha512-9dQHTTgLBqyAI7aavtO+HnpTVJgWQA1ghBSrmLtMu1SMxLPDuLfuNr+Tk5udb4AL4Ojg7h9JrKOGEEDqsJXWJA==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/resize-observer@2.1.3':
+    resolution: {integrity: sha512-zBLje5E06TgOg93S7rGPldmhDnouNGhvfZVKOp+oG2XU8snA+GoCSSCz1M+jpNAg5Ek2EakU5UVQqL152WmdXQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/rootless@1.5.2':
+    resolution: {integrity: sha512-9HULb0QAzL2r47CCad0M+NKFtQ+LrGGNHZfteX/ThdGvKIg2o2GYhBooZubTCd/RTu2l2+Nw4s+dEfiDGvdrrQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/static-store@0.1.2':
+    resolution: {integrity: sha512-ReK+5O38lJ7fT+L6mUFvUr6igFwHBESZF+2Ug842s7fvlVeBdIVEdTCErygff6w7uR6+jrr7J8jQo+cYrEq4Iw==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/utils@6.3.2':
+    resolution: {integrity: sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
@@ -3311,13 +3347,67 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tanstack/devtools-client@0.0.5':
+    resolution: {integrity: sha512-hsNDE3iu4frt9cC2ppn1mNRnLKo2uc1/1hXAyY9z4UYb+o40M2clFAhiFoo4HngjfGJDV3x18KVVIq7W4Un+zA==}
+    engines: {node: '>=18'}
+
+  '@tanstack/devtools-event-bus@0.4.0':
+    resolution: {integrity: sha512-1t+/csFuDzi+miDxAOh6Xv7VDE80gJEItkTcAZLjV5MRulbO/W8ocjHLI2Do/p2r2/FBU0eKCRTpdqvXaYoHpQ==}
+    engines: {node: '>=18'}
+
   '@tanstack/devtools-event-client@0.3.5':
     resolution: {integrity: sha512-RL1f5ZlfZMpghrCIdzl6mLOFLTuhqmPNblZgBaeKfdtk5rfbjykurv+VfYydOFXj0vxVIoA2d/zT7xfD7Ph8fw==}
     engines: {node: '>=18'}
 
+  '@tanstack/devtools-event-client@0.4.0':
+    resolution: {integrity: sha512-RPfGuk2bDZgcu9bAJodvO2lnZeHuz4/71HjZ0bGb/SPg8+lyTA+RLSKQvo7fSmPSi8/vcH3aKQ8EM9ywf1olaw==}
+    engines: {node: '>=18'}
+
+  '@tanstack/devtools-ui@0.4.4':
+    resolution: {integrity: sha512-5xHXFyX3nom0UaNfiOM92o6ziaHjGo3mcSGe2HD5Xs8dWRZNpdZ0Smd0B9ddEhy0oB+gXyMzZgUJb9DmrZV0Mg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      solid-js: '>=1.9.7'
+
+  '@tanstack/devtools-utils@0.0.9':
+    resolution: {integrity: sha512-tCObM6wbEjuHeGNs3JDhrqBhoMxpJpVuVIg5Kc33EmUI1ZO7KLpC1277Qf6AmSWy3aVOreGwn3y5bJzxmAJNXg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': ~19.2.7
+      react: '>=17.0.0'
+      solid-js: '>=1.9.7'
+      vue: '>=3.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      solid-js:
+        optional: true
+      vue:
+        optional: true
+
+  '@tanstack/devtools@0.10.1':
+    resolution: {integrity: sha512-1gtPmCDXV4Pl1nVtoqwjV0tc4E9GMuFtlkBX1Lz1KfqI3W9JojT5YsVifOQ/g8BTQ5w5+tyIANwHU7WYgLq/MQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      solid-js: '>=1.9.7'
+
   '@tanstack/form-core@1.27.1':
     resolution: {integrity: sha512-hPM+0tUnZ2C2zb2TE1lar1JJ0S0cbnQHlUwFcCnVBpMV3rjtUzkoM766gUpWrlmTGCzNad0GbJ0aTxVsjT6J8g==}
 
+  '@tanstack/form-core@1.27.6':
+    resolution: {integrity: sha512-1C4PUpOcCpivddKxtAeqdeqncxnPKiPpTVDRknDExCba+6zCsAjxgL+p3qYA3hu+EFyUAdW71rU+uqYbEa7qqA==}
+
+  '@tanstack/form-devtools@0.2.9':
+    resolution: {integrity: sha512-KOJiwvlFPsHeuWXvHUXRVdciXG1OPhg1c476MsLre0YLdaw1jeMlDYSlqq7sdEULX+2Sg/lhNpX86QbQuxzd2A==}
+    peerDependencies:
+      solid-js: '>=1.9.9'
+
+  '@tanstack/pacer-lite@0.1.1':
+    resolution: {integrity: sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==}
+    engines: {node: '>=18'}
+
   '@tanstack/pacer@0.15.4':
     resolution: {integrity: sha512-vGY+CWsFZeac3dELgB6UZ4c7OacwsLb8hvL2gLS6hTgy8Fl0Bm/aLokHaeDIP+q9F9HUZTnp360z9uv78eg8pg==}
     engines: {node: '>=18'}
@@ -3328,6 +3418,20 @@ packages:
   '@tanstack/query-devtools@5.91.1':
     resolution: {integrity: sha512-l8bxjk6BMsCaVQH6NzQEE/bEgFy1hAs5qbgXl0xhzezlaQbPk6Mgz9BqEg2vTLPOHD8N4k+w/gdgCbEzecGyNg==}
 
+  '@tanstack/react-devtools@0.9.0':
+    resolution: {integrity: sha512-Lq0svXOTG5N61SHgx8F0on6zz2GB0kmFjN/yyfNLrJyRgJ+U3jYFRd9ti3uBPABsXzHQMHYYujnTXrOYp/OaUg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': ~19.2.7
+      '@types/react-dom': ~19.2.3
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/react-form-devtools@0.2.9':
+    resolution: {integrity: sha512-wg0xrcVY8evIFGVHrnl9s+/9ENzuVbqv5Ru4HyAJjjL4uECtl6KdDJsi0lZdOyoM1UYEQoVdcN8jfBbxkA3q1g==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/react-form@1.27.1':
     resolution: {integrity: sha512-HKP0Ew2ae9AL5vU1PkJ+oAC2p+xBtA905u0fiNLzlfn1vLkBxenfg5L6TOA+rZITHpQsSo10tqwc5Yw6qn8Mpg==}
     peerDependencies:
@@ -3575,12 +3679,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==}
 
@@ -5042,6 +5140,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==}
 
@@ -5635,6 +5736,11 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
+  goober@2.1.18:
+    resolution: {integrity: sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw==}
+    peerDependencies:
+      csstype: ^3.0.10
+
   got@11.8.6:
     resolution: {integrity: sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==}
     engines: {node: '>=10.19.0'}
@@ -6737,6 +6843,27 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nuqs@2.8.6:
+    resolution: {integrity: sha512-aRxeX68b4ULmhio8AADL2be1FWDy0EPqaByPvIYWrA7Pm07UjlrICp/VPlSnXJNAG0+3MQwv3OporO2sOXMVGA==}
+    peerDependencies:
+      '@remix-run/react': '>=2'
+      '@tanstack/react-router': ^1
+      next: '>=14.2.0'
+      react: '>=18.2.0 || ^19.0.0-0'
+      react-router: ^5 || ^6 || ^7
+      react-router-dom: ^5 || ^6 || ^7
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@tanstack/react-router':
+        optional: true
+      next:
+        optional: true
+      react-router:
+        optional: true
+      react-router-dom:
+        optional: true
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -7647,9 +7774,6 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
-
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -7693,6 +7817,16 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
+  seroval-plugins@1.3.3:
+    resolution: {integrity: sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.3.2:
+    resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
+    engines: {node: '>=10'}
+
   setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
 
@@ -7759,6 +7893,9 @@ packages:
     resolution: {integrity: sha512-QlaZEqcAH3/RtNyet1IPIYPsEWAaYyXXv1Krsi+1L/QHppjX4Ifm8MQsBISz9vE8cHicIq3clogsheili5vhaQ==}
     engines: {node: '>= 18'}
 
+  solid-js@1.9.10:
+    resolution: {integrity: sha512-Coz956cos/EPDlhs6+jsdTxKuJDPT7B5SVIWgABwROyxjY7Xbr8wkzD68Et+NxnV7DLJ3nJdAC2r9InuV/4Jew==}
+
   sortablejs@1.15.6:
     resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
 
@@ -7956,11 +8093,6 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  swr@2.3.7:
-    resolution: {integrity: sha512-ZEquQ82QvalqTxhBVv/DlAg2mbmUjF4UgpPg9wwk4ufb9rQnZXh1iKyyKBqV6bQGu1Ie7L1QwSYO07qFIa1p+g==}
-    peerDependencies:
-      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -11545,6 +11677,42 @@ snapshots:
 
   '@sindresorhus/is@4.6.0': {}
 
+  '@solid-primitives/event-listener@2.4.3(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/keyboard@1.3.3(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.3(solid-js@1.9.10)
+      '@solid-primitives/rootless': 1.5.2(solid-js@1.9.10)
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/resize-observer@2.1.3(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.3(solid-js@1.9.10)
+      '@solid-primitives/rootless': 1.5.2(solid-js@1.9.10)
+      '@solid-primitives/static-store': 0.1.2(solid-js@1.9.10)
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/rootless@1.5.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/static-store@0.1.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/utils@6.3.2(solid-js@1.9.10)':
+    dependencies:
+      solid-js: 1.9.10
+
+  '@standard-schema/spec@1.0.0': {}
+
   '@standard-schema/spec@1.1.0': {}
 
   '@standard-schema/utils@0.3.0': {}
@@ -11772,14 +11940,84 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.18(tsx@4.21.0)(yaml@2.8.2)
 
+  '@tanstack/devtools-client@0.0.5':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.0
+
+  '@tanstack/devtools-event-bus@0.4.0':
+    dependencies:
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@tanstack/devtools-event-client@0.3.5': {}
 
+  '@tanstack/devtools-event-client@0.4.0': {}
+
+  '@tanstack/devtools-ui@0.4.4(csstype@3.2.3)(solid-js@1.9.10)':
+    dependencies:
+      clsx: 2.1.1
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - csstype
+
+  '@tanstack/devtools-utils@0.0.9(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      react: 19.2.3
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - csstype
+
+  '@tanstack/devtools@0.10.1(csstype@3.2.3)(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.3(solid-js@1.9.10)
+      '@solid-primitives/keyboard': 1.3.3(solid-js@1.9.10)
+      '@solid-primitives/resize-observer': 2.1.3(solid-js@1.9.10)
+      '@tanstack/devtools-client': 0.0.5
+      '@tanstack/devtools-event-bus': 0.4.0
+      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
+      clsx: 2.1.1
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - utf-8-validate
+
   '@tanstack/form-core@1.27.1':
     dependencies:
       '@tanstack/devtools-event-client': 0.3.5
       '@tanstack/pacer': 0.15.4
       '@tanstack/store': 0.7.7
 
+  '@tanstack/form-core@1.27.6':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.0
+      '@tanstack/pacer-lite': 0.1.1
+      '@tanstack/store': 0.7.7
+
+  '@tanstack/form-devtools@0.2.9(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
+      '@tanstack/devtools-utils': 0.0.9(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)
+      '@tanstack/form-core': 1.27.6
+      clsx: 2.1.1
+      dayjs: 1.11.19
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - '@types/react'
+      - csstype
+      - react
+      - vue
+
+  '@tanstack/pacer-lite@0.1.1': {}
+
   '@tanstack/pacer@0.15.4':
     dependencies:
       '@tanstack/devtools-event-client': 0.3.5
@@ -11789,6 +12027,30 @@ snapshots:
 
   '@tanstack/query-devtools@5.91.1': {}
 
+  '@tanstack/react-devtools@0.9.0(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/devtools': 0.10.1(csstype@3.2.3)(solid-js@1.9.10)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - solid-js
+      - utf-8-validate
+
+  '@tanstack/react-form-devtools@0.2.9(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/devtools-utils': 0.0.9(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)
+      '@tanstack/form-devtools': 0.2.9(@types/react@19.2.7)(csstype@3.2.3)(react@19.2.3)(solid-js@1.9.10)
+      react: 19.2.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - csstype
+      - solid-js
+      - vue
+
   '@tanstack/react-form@1.27.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/form-core': 1.27.1
@@ -12077,12 +12339,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
@@ -13685,6 +13941,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
@@ -14496,6 +14754,10 @@ snapshots:
 
   globrex@0.1.2: {}
 
+  goober@2.1.18(csstype@3.2.3):
+    dependencies:
+      csstype: 3.2.3
+
   got@11.8.6:
     dependencies:
       '@sindresorhus/is': 4.6.0
@@ -16003,6 +16265,13 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  nuqs@2.8.6(next@15.5.9(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0))(react@19.2.3):
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      react: 19.2.3
+    optionalDependencies:
+      next: 15.5.9(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.95.0)
+
   object-assign@4.1.1: {}
 
   object-deep-merge@2.0.0: {}
@@ -17054,8 +17323,6 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.26.0: {}
-
   scheduler@0.27.0: {}
 
   schema-utils@2.7.1:
@@ -17099,6 +17366,12 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  seroval-plugins@1.3.3(seroval@1.3.2):
+    dependencies:
+      seroval: 1.3.2
+
+  seroval@1.3.2: {}
+
   setimmediate@1.0.5: {}
 
   sha.js@2.4.12:
@@ -17213,6 +17486,12 @@ snapshots:
 
   smol-toml@1.5.2: {}
 
+  solid-js@1.9.10:
+    dependencies:
+      csstype: 3.2.3
+      seroval: 1.3.2
+      seroval-plugins: 1.3.3(seroval@1.3.2)
+
   sortablejs@1.15.6: {}
 
   source-list-map@2.0.1: {}
@@ -17395,12 +17674,6 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  swr@2.3.7(react@19.2.3):
-    dependencies:
-      dequal: 2.0.3
-      react: 19.2.3
-      use-sync-external-store: 1.6.0(react@19.2.3)
-
   symbol-tree@3.2.4: {}
 
   synckit@0.11.11:
@@ -17744,10 +18017,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
-  use-context-selector@2.0.0(react@19.2.3)(scheduler@0.26.0):
+  use-context-selector@2.0.0(react@19.2.3)(scheduler@0.27.0):
     dependencies:
       react: 19.2.3
-      scheduler: 0.26.0
+      scheduler: 0.27.0
 
   use-isomorphic-layout-effect@1.2.1(@types/react@19.2.7)(react@19.2.3):
     dependencies:
diff --git a/web/testing/analyze-component.js b/web/scripts/analyze-component.js
similarity index 63%
rename from web/testing/analyze-component.js
rename to web/scripts/analyze-component.js
index 3f70f3d1ec..9347a82fa5 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}
@@ -409,7 +46,6 @@ Features Detected:
   ${analysis.hasEvents ? '✓' : '✗'} Event handlers
   ${analysis.hasRouter ? '✓' : '✗'} Next.js routing
   ${analysis.hasAPI ? '✓' : '✗'} API calls
-  ${analysis.hasSWR ? '✓' : '✗'} SWR data fetching
   ${analysis.hasReactQuery ? '✓' : '✗'} React Query
   ${analysis.hasAhooks ? '✓' : '✗'} ahooks
   ${analysis.hasForwardRef ? '✓' : '✗'} Ref forwarding (forwardRef)
@@ -444,17 +80,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 = []
 
@@ -610,7 +235,7 @@ Create the test file at: ${testPath}
     // ===== API Calls =====
     if (analysis.hasAPI) {
       guidelines.push('🌐 API calls detected:')
-      guidelines.push('   - Mock API calls/hooks (useSWR, useQuery, fetch, etc.)')
+      guidelines.push('   - Mock API calls/hooks (useQuery, useMutation, fetch, etc.)')
       guidelines.push('   - Test loading, success, and error states')
       guidelines.push('   - Focus on component behavior, not the data fetching lib')
     }
@@ -730,94 +355,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..8bd3dc4409
--- /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
+    const hasReactQuery = /\buse(?:Query|Queries|InfiniteQuery|SuspenseQuery|SuspenseInfiniteQuery|Mutation)\b/.test(code)
+
+    // 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(') || hasReactQuery,
+      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'),
+      hasReactQuery,
+      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..a054650ba3
--- /dev/null
+++ b/web/scripts/refactor-component.js
@@ -0,0 +1,415 @@
+#!/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.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
+- 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)
+      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/annotation.ts b/web/service/annotation.ts
index acdb944386..8a19425044 100644
--- a/web/service/annotation.ts
+++ b/web/service/annotation.ts
@@ -1,4 +1,3 @@
-import type { Fetcher } from 'swr'
 import type { AnnotationCreateResponse, AnnotationEnableStatus, AnnotationItemBasic, EmbeddingModelConfig } from '@/app/components/app/annotation/type'
 import { ANNOTATION_DEFAULT } from '@/config'
 import { del, get, post } from './base'
@@ -44,11 +43,11 @@ export const addAnnotation = (appId: string, body: AnnotationItemBasic) => {
   return post<AnnotationCreateResponse>(`apps/${appId}/annotations`, { body })
 }
 
-export const annotationBatchImport: Fetcher<{ job_id: string, job_status: string }, { url: string, body: FormData }> = ({ url, body }) => {
+export const annotationBatchImport = ({ url, body }: { url: string, body: FormData }): Promise<{ job_id: string, job_status: string }> => {
   return post<{ job_id: string, job_status: string }>(url, { body }, { bodyStringify: false, deleteContentType: true })
 }
 
-export const checkAnnotationBatchImportProgress: Fetcher<{ job_id: string, job_status: string }, { jobID: string, appId: string }> = ({ jobID, appId }) => {
+export const checkAnnotationBatchImportProgress = ({ jobID, appId }: { jobID: string, appId: string }): Promise<{ job_id: string, job_status: string }> => {
   return get<{ job_id: string, job_status: string }>(`/apps/${appId}/annotations/batch-import-status/${jobID}`)
 }
 
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 1e3c93a33a..db79141ec6 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -12,7 +12,6 @@ export const fetchAppDetail = ({ url, id }: { url: string, id: string }): Promis
   return get<AppDetailResponse>(`${url}/${id}`)
 }
 
-// Direct API call function for non-SWR usage
 export const fetchAppDetailDirect = async ({ url, id }: { url: string, id: string }): Promise<AppDetailResponse> => {
   return get<AppDetailResponse>(`${url}/${id}`)
 }
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/knowledge/use-document.ts b/web/service/knowledge/use-document.ts
index 476f3534bc..63713130d9 100644
--- a/web/service/knowledge/use-document.ts
+++ b/web/service/knowledge/use-document.ts
@@ -7,7 +7,7 @@ import {
 } from '@tanstack/react-query'
 import { normalizeStatusForQuery } from '@/app/components/datasets/documents/status-filter'
 import { DocumentActionType } from '@/models/datasets'
-import { del, get, patch } from '../base'
+import { del, get, patch, post } from '../base'
 import { pauseDocIndexing, resumeDocIndexing } from '../datasets'
 import { useInvalid } from '../use-base'
 
@@ -163,3 +163,15 @@ export const useDocumentResume = () => {
     },
   })
 }
+
+export const useDocumentBatchRetryIndex = () => {
+  return useMutation({
+    mutationFn: ({ datasetId, documentIds }: { datasetId: string, documentIds: string[] }) => {
+      return post<CommonResponse>(`/datasets/${datasetId}/retry`, {
+        body: {
+          document_ids: documentIds,
+        },
+      })
+    },
+  })
+}
diff --git a/web/service/plugins.ts b/web/service/plugins.ts
index afaebf4fb5..cf05d8c20d 100644
--- a/web/service/plugins.ts
+++ b/web/service/plugins.ts
@@ -1,4 +1,3 @@
-import type { Fetcher } from 'swr'
 import type {
   MarketplaceCollectionPluginsResponse,
   MarketplaceCollectionsResponse,
@@ -82,11 +81,11 @@ export const fetchPluginInfoFromMarketPlace = async ({
   return getMarketplace<{ data: { plugin: PluginInfoFromMarketPlace, version: { version: string } } }>(`/plugins/${org}/${name}`)
 }
 
-export const fetchMarketplaceCollections: Fetcher<MarketplaceCollectionsResponse, { url: string }> = ({ url }) => {
+export const fetchMarketplaceCollections = ({ url }: { url: string }): Promise<MarketplaceCollectionsResponse> => {
   return get<MarketplaceCollectionsResponse>(url)
 }
 
-export const fetchMarketplaceCollectionPlugins: Fetcher<MarketplaceCollectionPluginsResponse, { url: string }> = ({ url }) => {
+export const fetchMarketplaceCollectionPlugins = ({ url }: { url: string }): Promise<MarketplaceCollectionPluginsResponse> => {
   return get<MarketplaceCollectionPluginsResponse>(url)
 }
 
diff --git a/web/service/use-common.ts b/web/service/use-common.ts
index 7db65caccb..77bb2a11fa 100644
--- a/web/service/use-common.ts
+++ b/web/service/use-common.ts
@@ -55,7 +55,7 @@ export const commonQueryKeys = {
   ] as const,
   notionBinding: (code?: string | null) => [NAME_SPACE, 'notion-binding', code] as const,
   modelParameterRules: (provider?: string, model?: string) => [NAME_SPACE, 'model-parameter-rules', provider, model] as const,
-  langGeniusVersion: (currentVersion?: string | null) => [NAME_SPACE, 'lang-genius-version', currentVersion] as const,
+  langGeniusVersion: (currentVersion?: string | null) => [NAME_SPACE, 'langgenius-version', currentVersion] as const,
   forgotPasswordValidity: (token?: string | null) => [NAME_SPACE, 'forgot-password-validity', token] as const,
   dataSourceIntegrates: [NAME_SPACE, 'data-source-integrates'] as const,
 }
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-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-share.spec.tsx b/web/service/use-share.spec.tsx
new file mode 100644
index 0000000000..d0202ed140
--- /dev/null
+++ b/web/service/use-share.spec.tsx
@@ -0,0 +1,231 @@
+import type { ReactNode } from 'react'
+import type { AppConversationData, ConversationItem } from '@/models/share'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import {
+  fetchChatList,
+  fetchConversations,
+  generationConversationName,
+} from './share'
+import {
+  shareQueryKeys,
+  useInvalidateShareConversations,
+  useShareChatList,
+  useShareConversationName,
+  useShareConversations,
+} from './use-share'
+
+vi.mock('./share', () => ({
+  fetchChatList: vi.fn(),
+  fetchConversations: vi.fn(),
+  generationConversationName: vi.fn(),
+  fetchAppInfo: vi.fn(),
+  fetchAppMeta: vi.fn(),
+  fetchAppParams: vi.fn(),
+  getAppAccessModeByAppCode: vi.fn(),
+}))
+
+const mockFetchConversations = vi.mocked(fetchConversations)
+const mockFetchChatList = vi.mocked(fetchChatList)
+const mockGenerationConversationName = vi.mocked(generationConversationName)
+
+const createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+})
+
+const createWrapper = (queryClient: QueryClient) => {
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+const renderShareHook = <T,>(hook: () => T) => {
+  const queryClient = createQueryClient()
+  const wrapper = createWrapper(queryClient)
+  return {
+    queryClient,
+    ...renderHook(hook, { wrapper }),
+  }
+}
+
+const createConversationItem = (overrides: Partial<ConversationItem> = {}): ConversationItem => ({
+  id: 'conversation-1',
+  name: 'Conversation 1',
+  inputs: null,
+  introduction: 'Intro',
+  ...overrides,
+})
+
+const createConversationData = (overrides: Partial<AppConversationData> = {}): AppConversationData => ({
+  data: [createConversationItem()],
+  has_more: false,
+  limit: 20,
+  ...overrides,
+})
+
+// Scenario: share conversation list queries behave consistently with params and enablement.
+describe('useShareConversations', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should fetch conversations when enabled for non-installed apps', async () => {
+    // Arrange
+    const params = {
+      isInstalledApp: false,
+      appId: undefined,
+      pinned: true,
+      limit: 50,
+    }
+    const response = createConversationData()
+    mockFetchConversations.mockResolvedValueOnce(response)
+
+    // Act
+    const { result, queryClient } = renderShareHook(() => useShareConversations(params))
+
+    // Assert
+    await waitFor(() => {
+      expect(mockFetchConversations).toHaveBeenCalledWith(false, undefined, undefined, true, 50)
+    })
+    await waitFor(() => {
+      expect(result.current.data).toEqual(response)
+    })
+    expect(queryClient.getQueryCache().find({ queryKey: shareQueryKeys.conversationList(params) })).toBeDefined()
+  })
+
+  it('should not fetch conversations when installed app lacks appId', async () => {
+    // Arrange
+    const params = {
+      isInstalledApp: true,
+      appId: undefined,
+    }
+
+    // Act
+    const { result } = renderShareHook(() => useShareConversations(params))
+
+    // Assert
+    await waitFor(() => {
+      expect(result.current.fetchStatus).toBe('idle')
+    })
+    expect(mockFetchConversations).not.toHaveBeenCalled()
+  })
+})
+
+// Scenario: chat list queries respect conversation ID and app installation rules.
+describe('useShareChatList', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should fetch chat list when conversationId is provided', async () => {
+    // Arrange
+    const params = {
+      conversationId: 'conversation-1',
+      isInstalledApp: true,
+      appId: 'app-1',
+    }
+    const response = { data: [] }
+    mockFetchChatList.mockResolvedValueOnce(response)
+
+    // Act
+    const { result } = renderShareHook(() => useShareChatList(params))
+
+    // Assert
+    await waitFor(() => {
+      expect(mockFetchChatList).toHaveBeenCalledWith('conversation-1', true, 'app-1')
+    })
+    await waitFor(() => {
+      expect(result.current.data).toEqual(response)
+    })
+  })
+
+  it('should not fetch chat list when conversationId is empty', async () => {
+    // Arrange
+    const params = {
+      conversationId: '',
+      isInstalledApp: false,
+      appId: undefined,
+    }
+
+    // Act
+    const { result } = renderShareHook(() => useShareChatList(params))
+
+    // Assert
+    await waitFor(() => {
+      expect(result.current.fetchStatus).toBe('idle')
+    })
+    expect(mockFetchChatList).not.toHaveBeenCalled()
+  })
+})
+
+// Scenario: conversation name queries follow enabled flags and installation constraints.
+describe('useShareConversationName', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should fetch conversation name when enabled and conversationId exists', async () => {
+    // Arrange
+    const params = {
+      conversationId: 'conversation-2',
+      isInstalledApp: false,
+      appId: undefined,
+    }
+    const response = createConversationItem({ id: 'conversation-2', name: 'Generated' })
+    mockGenerationConversationName.mockResolvedValueOnce(response)
+
+    // Act
+    const { result } = renderShareHook(() => useShareConversationName(params))
+
+    // Assert
+    await waitFor(() => {
+      expect(mockGenerationConversationName).toHaveBeenCalledWith(false, undefined, 'conversation-2')
+    })
+    await waitFor(() => {
+      expect(result.current.data).toEqual(response)
+    })
+  })
+
+  it('should not fetch conversation name when disabled via options', async () => {
+    // Arrange
+    const params = {
+      conversationId: 'conversation-3',
+      isInstalledApp: false,
+      appId: undefined,
+    }
+
+    // Act
+    const { result } = renderShareHook(() => useShareConversationName(params, { enabled: false }))
+
+    // Assert
+    await waitFor(() => {
+      expect(result.current.fetchStatus).toBe('idle')
+    })
+    expect(mockGenerationConversationName).not.toHaveBeenCalled()
+  })
+})
+
+// Scenario: invalidation helper clears share conversation caches.
+describe('useInvalidateShareConversations', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should invalidate share conversations query key when invoked', () => {
+    // Arrange
+    const { result, queryClient } = renderShareHook(() => useInvalidateShareConversations())
+    const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries')
+
+    // Act
+    act(() => {
+      result.current()
+    })
+
+    // Assert
+    expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: shareQueryKeys.conversations })
+  })
+})
diff --git a/web/service/use-share.ts b/web/service/use-share.ts
index a5e0a11100..4dd43e06aa 100644
--- a/web/service/use-share.ts
+++ b/web/service/use-share.ts
@@ -1,11 +1,58 @@
+import type { AppConversationData, ConversationItem } from '@/models/share'
 import { useQuery } from '@tanstack/react-query'
-import { fetchAppInfo, fetchAppMeta, fetchAppParams, getAppAccessModeByAppCode } from './share'
+import {
+  fetchAppInfo,
+  fetchAppMeta,
+  fetchAppParams,
+  fetchChatList,
+  fetchConversations,
+  generationConversationName,
+  getAppAccessModeByAppCode,
+} from './share'
+import { useInvalid } from './use-base'
 
 const NAME_SPACE = 'webapp'
 
+type ShareConversationsParams = {
+  isInstalledApp: boolean
+  appId?: string
+  lastId?: string
+  pinned?: boolean
+  limit?: number
+}
+
+type ShareChatListParams = {
+  conversationId: string
+  isInstalledApp: boolean
+  appId?: string
+}
+
+type ShareConversationNameParams = {
+  conversationId: string
+  isInstalledApp: boolean
+  appId?: string
+}
+
+type ShareQueryOptions = {
+  enabled?: boolean
+  refetchOnWindowFocus?: boolean
+  refetchOnReconnect?: boolean
+}
+
+export const shareQueryKeys = {
+  appAccessMode: (code: string | null) => [NAME_SPACE, 'appAccessMode', code] as const,
+  appInfo: [NAME_SPACE, 'appInfo'] as const,
+  appParams: [NAME_SPACE, 'appParams'] as const,
+  appMeta: [NAME_SPACE, 'appMeta'] as const,
+  conversations: [NAME_SPACE, 'conversations'] as const,
+  conversationList: (params: ShareConversationsParams) => [NAME_SPACE, 'conversations', params] as const,
+  chatList: (params: ShareChatListParams) => [NAME_SPACE, 'chatList', params] as const,
+  conversationName: (params: ShareConversationNameParams) => [NAME_SPACE, 'conversationName', params] as const,
+}
+
 export const useGetWebAppAccessModeByCode = (code: string | null) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'appAccessMode', code],
+    queryKey: shareQueryKeys.appAccessMode(code),
     queryFn: () => getAppAccessModeByAppCode(code!),
     enabled: !!code,
     staleTime: 0, // backend change the access mode may cause the logic error. Because /permission API is no cached.
@@ -15,7 +62,7 @@ export const useGetWebAppAccessModeByCode = (code: string | null) => {
 
 export const useGetWebAppInfo = () => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'appInfo'],
+    queryKey: shareQueryKeys.appInfo,
     queryFn: () => {
       return fetchAppInfo()
     },
@@ -24,7 +71,7 @@ export const useGetWebAppInfo = () => {
 
 export const useGetWebAppParams = () => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'appParams'],
+    queryKey: shareQueryKeys.appParams,
     queryFn: () => {
       return fetchAppParams(false)
     },
@@ -33,9 +80,67 @@ export const useGetWebAppParams = () => {
 
 export const useGetWebAppMeta = () => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'appMeta'],
+    queryKey: shareQueryKeys.appMeta,
     queryFn: () => {
       return fetchAppMeta(false)
     },
   })
 }
+
+export const useShareConversations = (params: ShareConversationsParams, options: ShareQueryOptions = {}) => {
+  const {
+    enabled = true,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+  } = options
+  const isEnabled = enabled && (!params.isInstalledApp || !!params.appId)
+  return useQuery<AppConversationData>({
+    queryKey: shareQueryKeys.conversationList(params),
+    queryFn: () => fetchConversations(
+      params.isInstalledApp,
+      params.appId,
+      params.lastId,
+      params.pinned,
+      params.limit,
+    ),
+    enabled: isEnabled,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+  })
+}
+
+export const useShareChatList = (params: ShareChatListParams, options: ShareQueryOptions = {}) => {
+  const {
+    enabled = true,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+  } = options
+  const isEnabled = enabled && (!params.isInstalledApp || !!params.appId) && !!params.conversationId
+  return useQuery({
+    queryKey: shareQueryKeys.chatList(params),
+    queryFn: () => fetchChatList(params.conversationId, params.isInstalledApp, params.appId),
+    enabled: isEnabled,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+  })
+}
+
+export const useShareConversationName = (params: ShareConversationNameParams, options: ShareQueryOptions = {}) => {
+  const {
+    enabled = true,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+  } = options
+  const isEnabled = enabled && (!params.isInstalledApp || !!params.appId) && !!params.conversationId
+  return useQuery<ConversationItem>({
+    queryKey: shareQueryKeys.conversationName(params),
+    queryFn: () => generationConversationName(params.isInstalledApp, params.appId, params.conversationId),
+    enabled: isEnabled,
+    refetchOnReconnect,
+    refetchOnWindowFocus,
+  })
+}
+
+export const useInvalidateShareConversations = () => {
+  return useInvalid(shareQueryKeys.conversations)
+}
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 08fc716cf3..1d578ae634 100644
--- a/web/testing/testing.md
+++ b/web/testing/testing.md
@@ -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/utils/index.spec.ts b/web/utils/index.spec.ts
index 7eb6c32eca..a99e0ad134 100644
--- a/web/utils/index.spec.ts
+++ b/web/utils/index.spec.ts
@@ -1,4 +1,3 @@
-import type { Mock } from 'vitest'
 import {
   asyncRunSafe,
   canFindTool,
@@ -8,7 +7,6 @@ import {
   getPurifyHref,
   getTextWidthWithCanvas,
   randomString,
-  removeSpecificQueryParam,
   sleep,
 } from './index'
 
@@ -231,72 +229,6 @@ describe('canFindTool', () => {
   })
 })
 
-describe('removeSpecificQueryParam', () => {
-  let originalLocation: Location
-  let originalReplaceState: typeof window.history.replaceState
-
-  beforeEach(() => {
-    originalLocation = window.location
-    originalReplaceState = window.history.replaceState
-
-    const mockUrl = new URL('https://example.com?param1=value1&param2=value2&param3=value3')
-
-    // Mock window.location using defineProperty to handle URL properly
-    delete (window as any).location
-    Object.defineProperty(window, 'location', {
-      configurable: true,
-      writable: true,
-      value: {
-        ...originalLocation,
-        href: mockUrl.href,
-        search: mockUrl.search,
-        toString: () => mockUrl.toString(),
-      },
-    })
-
-    window.history.replaceState = vi.fn()
-  })
-
-  afterEach(() => {
-    Object.defineProperty(window, 'location', {
-      configurable: true,
-      writable: true,
-      value: originalLocation,
-    })
-    window.history.replaceState = originalReplaceState
-  })
-
-  it('should remove a single query parameter', () => {
-    removeSpecificQueryParam('param2')
-    expect(window.history.replaceState).toHaveBeenCalledTimes(1)
-    const replaceStateCall = (window.history.replaceState as Mock).mock.calls[0]
-    expect(replaceStateCall[0]).toBe(null)
-    expect(replaceStateCall[1]).toBe('')
-    expect(replaceStateCall[2]).toMatch(/param1=value1/)
-    expect(replaceStateCall[2]).toMatch(/param3=value3/)
-    expect(replaceStateCall[2]).not.toMatch(/param2=value2/)
-  })
-
-  it('should remove multiple query parameters', () => {
-    removeSpecificQueryParam(['param1', 'param3'])
-    expect(window.history.replaceState).toHaveBeenCalledTimes(1)
-    const replaceStateCall = (window.history.replaceState as Mock).mock.calls[0]
-    expect(replaceStateCall[2]).toMatch(/param2=value2/)
-    expect(replaceStateCall[2]).not.toMatch(/param1=value1/)
-    expect(replaceStateCall[2]).not.toMatch(/param3=value3/)
-  })
-
-  it('should handle non-existent parameters gracefully', () => {
-    removeSpecificQueryParam('nonexistent')
-
-    expect(window.history.replaceState).toHaveBeenCalledTimes(1)
-    const replaceStateCall = (window.history.replaceState as Mock).mock.calls[0]
-    expect(replaceStateCall[2]).toMatch(/param1=value1/)
-    expect(replaceStateCall[2]).toMatch(/param2=value2/)
-    expect(replaceStateCall[2]).toMatch(/param3=value3/)
-  })
-})
-
 describe('sleep', () => {
   it('should resolve after specified milliseconds', async () => {
     const start = Date.now()
@@ -560,47 +492,3 @@ describe('canFindTool extended', () => {
     expect(canFindTool('openai', undefined)).toBe(false)
   })
 })
-
-describe('removeSpecificQueryParam extended', () => {
-  beforeEach(() => {
-    // Reset window.location
-    delete (window as any).location
-    window.location = {
-      href: 'https://example.com?param1=value1&param2=value2&param3=value3',
-    } as any
-  })
-
-  it('should remove single query parameter', () => {
-    const mockReplaceState = vi.fn()
-    window.history.replaceState = mockReplaceState
-
-    removeSpecificQueryParam('param1')
-
-    expect(mockReplaceState).toHaveBeenCalled()
-    const newUrl = mockReplaceState.mock.calls[0][2]
-    expect(newUrl).not.toContain('param1')
-  })
-
-  it('should remove multiple query parameters', () => {
-    const mockReplaceState = vi.fn()
-    window.history.replaceState = mockReplaceState
-
-    removeSpecificQueryParam(['param1', 'param2'])
-
-    expect(mockReplaceState).toHaveBeenCalled()
-    const newUrl = mockReplaceState.mock.calls[0][2]
-    expect(newUrl).not.toContain('param1')
-    expect(newUrl).not.toContain('param2')
-  })
-
-  it('should preserve other parameters', () => {
-    const mockReplaceState = vi.fn()
-    window.history.replaceState = mockReplaceState
-
-    removeSpecificQueryParam('param1')
-
-    const newUrl = mockReplaceState.mock.calls[0][2]
-    expect(newUrl).toContain('param2')
-    expect(newUrl).toContain('param3')
-  })
-})
diff --git a/web/utils/index.ts b/web/utils/index.ts
index 263d415479..5704e82d87 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))
@@ -90,12 +90,3 @@ export const canFindTool = (providerId: string, oldToolId?: string) => {
     || providerId === `langgenius/${oldToolId}/${oldToolId}`
     || providerId === `langgenius/${oldToolId}_tool/${oldToolId}`
 }
-
-export const removeSpecificQueryParam = (key: string | string[]) => {
-  const url = new URL(window.location.href)
-  if (Array.isArray(key))
-    key.forEach(k => url.searchParams.delete(k))
-  else
-    url.searchParams.delete(key)
-  window.history.replaceState(null, '', url.toString())
-}