feat(web): improve marketplace SSR prefetch and route loading

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

api/.vscode/launch.json.example

@@ -54,7 +54,7 @@
                 "--loglevel",
                 "DEBUG",
                 "-Q",
-                "dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
+                "dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,workflow_based_app_execution,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor"
             ]
         }
     ]

api/configs/middleware/__init__.py

@@ -259,11 +259,20 @@ class CeleryConfig(DatabaseConfig):
         description="Password of the Redis Sentinel master.",
         default=None,
     )
+
     CELERY_SENTINEL_SOCKET_TIMEOUT: PositiveFloat | None = Field(
         description="Timeout for Redis Sentinel socket operations in seconds.",
         default=0.1,
     )
 
+    CELERY_TASK_ANNOTATIONS: dict[str, Any] | None = Field(
+        description=(
+            "Annotations for Celery tasks as a JSON mapping of task name -> options "
+            "(for example, rate limits or other task-specific settings)."
+        ),
+        default=None,
+    )
+
     @computed_field
     def CELERY_RESULT_BACKEND(self) -> str | None:
         if self.CELERY_BACKEND in ("database", "rabbitmq"):

api/constants/languages.py

@@ -21,6 +21,7 @@ language_timezone_mapping = {
     "th-TH": "Asia/Bangkok",
     "id-ID": "Asia/Jakarta",
     "ar-TN": "Africa/Tunis",
+    "nl-NL": "Europe/Amsterdam",
 }
 
 languages = list(language_timezone_mapping.keys())

api/controllers/console/app/conversation.py

@@ -599,7 +599,12 @@ def _get_conversation(app_model, conversation_id):
     db.session.execute(
         sa.update(Conversation)
         .where(Conversation.id == conversation_id, Conversation.read_at.is_(None))
-        .values(read_at=naive_utc_now(), read_account_id=current_user.id)
+        # Keep updated_at unchanged when only marking a conversation as read.
+        .values(
+            read_at=naive_utc_now(),
+            read_account_id=current_user.id,
+            updated_at=Conversation.updated_at,
+        )
     )
     db.session.commit()
     db.session.refresh(conversation)

api/controllers/console/setup.py

@@ -42,7 +42,15 @@ class SetupResponse(BaseModel):
     tags=["console"],
 )
 def get_setup_status_api() -> SetupStatusResponse:
-    """Get system setup status."""
+    """Get system setup status.
+
+    NOTE: This endpoint is unauthenticated by design.
+
+    During first-time bootstrap there is no admin account yet, so frontend initialization must be
+    able to query setup progress before any login flow exists.
+
+    Only bootstrap-safe status information should be returned by this endpoint.
+    """
     if dify_config.EDITION == "SELF_HOSTED":
         setup_status = get_setup_status()
         if setup_status and not isinstance(setup_status, bool):
@@ -61,7 +69,12 @@ def get_setup_status_api() -> SetupStatusResponse:
 )
 @only_edition_self_hosted
 def setup_system(payload: SetupRequestPayload) -> SetupResponse:
-    """Initialize system setup with admin account."""
+    """Initialize system setup with admin account.
+
+    NOTE: This endpoint is unauthenticated by design for first-time bootstrap.
+    Access is restricted by deployment mode (`SELF_HOSTED`), one-time setup guards,
+    and init-password validation rather than user session authentication.
+    """
     if get_setup_status():
         raise AlreadySetupError()
 

api/core/app/apps/streaming_utils.py

@@ -34,7 +34,7 @@ def stream_topic_events(
             on_subscribe()
         while True:
             try:
-                msg = sub.receive(timeout=0.1)
+                msg = sub.receive(timeout=1)
             except SubscriptionClosedError:
                 return
             if msg is None:

api/core/app/task_pipeline/easy_ui_based_generate_task_pipeline.py

@@ -45,6 +45,8 @@ from core.app.entities.task_entities import (
 from core.app.task_pipeline.based_generate_task_pipeline import BasedGenerateTaskPipeline
 from core.app.task_pipeline.message_cycle_manager import MessageCycleManager
 from core.base.tts import AppGeneratorTTSPublisher, AudioTrunk
+from core.file import helpers as file_helpers
+from core.file.enums import FileTransferMethod
 from core.model_manager import ModelInstance
 from core.model_runtime.entities.llm_entities import LLMResult, LLMResultChunk, LLMResultChunkDelta, LLMUsage
 from core.model_runtime.entities.message_entities import (
@@ -56,10 +58,11 @@ from core.ops.entities.trace_entity import TraceTaskName
 from core.ops.ops_trace_manager import TraceQueueManager, TraceTask
 from core.prompt.utils.prompt_message_util import PromptMessageUtil
 from core.prompt.utils.prompt_template_parser import PromptTemplateParser
+from core.tools.signature import sign_tool_file
 from events.message_event import message_was_created
 from extensions.ext_database import db
 from libs.datetime_utils import naive_utc_now
-from models.model import AppMode, Conversation, Message, MessageAgentThought
+from models.model import AppMode, Conversation, Message, MessageAgentThought, MessageFile, UploadFile
 
 logger = logging.getLogger(__name__)
 
@@ -463,6 +466,85 @@ class EasyUIBasedGenerateTaskPipeline(BasedGenerateTaskPipeline):
             metadata=metadata_dict,
         )
 
+    def _record_files(self):
+        with Session(db.engine, expire_on_commit=False) as session:
+            message_files = session.scalars(select(MessageFile).where(MessageFile.message_id == self._message_id)).all()
+            if not message_files:
+                return None
+
+            files_list = []
+            upload_file_ids = [
+                mf.upload_file_id
+                for mf in message_files
+                if mf.transfer_method == FileTransferMethod.LOCAL_FILE and mf.upload_file_id
+            ]
+            upload_files_map = {}
+            if upload_file_ids:
+                upload_files = session.scalars(select(UploadFile).where(UploadFile.id.in_(upload_file_ids))).all()
+                upload_files_map = {uf.id: uf for uf in upload_files}
+
+            for message_file in message_files:
+                upload_file = None
+                if message_file.transfer_method == FileTransferMethod.LOCAL_FILE and message_file.upload_file_id:
+                    upload_file = upload_files_map.get(message_file.upload_file_id)
+
+                url = None
+                filename = "file"
+                mime_type = "application/octet-stream"
+                size = 0
+                extension = ""
+
+                if message_file.transfer_method == FileTransferMethod.REMOTE_URL:
+                    url = message_file.url
+                    if message_file.url:
+                        filename = message_file.url.split("/")[-1].split("?")[0]  # Remove query params
+                elif message_file.transfer_method == FileTransferMethod.LOCAL_FILE:
+                    if upload_file:
+                        url = file_helpers.get_signed_file_url(upload_file_id=str(upload_file.id))
+                        filename = upload_file.name
+                        mime_type = upload_file.mime_type or "application/octet-stream"
+                        size = upload_file.size or 0
+                        extension = f".{upload_file.extension}" if upload_file.extension else ""
+                    elif message_file.upload_file_id:
+                        # Fallback: generate URL even if upload_file not found
+                        url = file_helpers.get_signed_file_url(upload_file_id=str(message_file.upload_file_id))
+                elif message_file.transfer_method == FileTransferMethod.TOOL_FILE and message_file.url:
+                    # For tool files, use URL directly if it's HTTP, otherwise sign it
+                    if message_file.url.startswith("http"):
+                        url = message_file.url
+                        filename = message_file.url.split("/")[-1].split("?")[0]
+                    else:
+                        # Extract tool file id and extension from URL
+                        url_parts = message_file.url.split("/")
+                        if url_parts:
+                            file_part = url_parts[-1].split("?")[0]  # Remove query params first
+                            # Use rsplit to correctly handle filenames with multiple dots
+                            if "." in file_part:
+                                tool_file_id, ext = file_part.rsplit(".", 1)
+                                extension = f".{ext}"
+                            else:
+                                tool_file_id = file_part
+                                extension = ".bin"
+                            url = sign_tool_file(tool_file_id=tool_file_id, extension=extension)
+                            filename = file_part
+
+                transfer_method_value = message_file.transfer_method
+                remote_url = message_file.url if message_file.transfer_method == FileTransferMethod.REMOTE_URL else ""
+                file_dict = {
+                    "related_id": message_file.id,
+                    "extension": extension,
+                    "filename": filename,
+                    "size": size,
+                    "mime_type": mime_type,
+                    "transfer_method": transfer_method_value,
+                    "type": message_file.type,
+                    "url": url or "",
+                    "upload_file_id": message_file.upload_file_id or message_file.id,
+                    "remote_url": remote_url,
+                }
+                files_list.append(file_dict)
+            return files_list or None
+
     def _agent_message_to_stream_response(self, answer: str, message_id: str) -> AgentMessageStreamResponse:
         """
         Agent message to stream response.

api/core/app/task_pipeline/message_cycle_manager.py

@@ -64,7 +64,13 @@ class MessageCycleManager:
 
         # Use SQLAlchemy 2.x style session.scalar(select(...))
         with session_factory.create_session() as session:
-            message_file = session.scalar(select(MessageFile).where(MessageFile.message_id == message_id))
+            message_file = session.scalar(
+                select(MessageFile)
+                .where(
+                    MessageFile.message_id == message_id,
+                )
+                .where(MessageFile.belongs_to == "assistant")
+            )
 
         if message_file:
             self._message_has_file.add(message_id)

api/core/tools/__base/tool.py

@@ -5,7 +5,7 @@ from collections.abc import Generator
 from copy import deepcopy
 from typing import TYPE_CHECKING, Any
 
-if TYPE_CHECKING:
+if TYPE_CHECKING:  # pragma: no cover
     from models.model import File
 
 from core.tools.__base.tool_runtime import ToolRuntime
@@ -171,7 +171,7 @@ class Tool(ABC):
     def create_file_message(self, file: File) -> ToolInvokeMessage:
         return ToolInvokeMessage(
             type=ToolInvokeMessage.MessageType.FILE,
-            message=ToolInvokeMessage.FileMessage(),
+            message=ToolInvokeMessage.FileMessage(file_marker="file_marker"),
             meta={"file": file},
         )
 

api/extensions/ext_celery.py

@@ -80,8 +80,14 @@ def init_app(app: DifyApp) -> Celery:
         worker_hijack_root_logger=False,
         timezone=pytz.timezone(dify_config.LOG_TZ or "UTC"),
         task_ignore_result=True,
+        task_annotations=dify_config.CELERY_TASK_ANNOTATIONS,
     )
 
+    if dify_config.CELERY_BACKEND == "redis":
+        celery_app.conf.update(
+            result_backend_transport_options=broker_transport_options,
+        )
+
     # Apply SSL configuration if enabled
     ssl_options = _get_celery_ssl_options()
     if ssl_options:

api/extensions/ext_redis.py

@@ -119,7 +119,7 @@ class RedisClientWrapper:
 
 
 redis_client: RedisClientWrapper = RedisClientWrapper()
-pubsub_redis_client: RedisClientWrapper = RedisClientWrapper()
+_pubsub_redis_client: redis.Redis | RedisCluster | None = None
 
 
 def _get_ssl_configuration() -> tuple[type[Union[Connection, SSLConnection]], dict[str, Any]]:
@@ -232,7 +232,7 @@ def _create_standalone_client(redis_params: dict[str, Any]) -> Union[redis.Redis
     return client
 
 
-def _create_pubsub_client(pubsub_url: str, use_clusters: bool) -> Union[redis.Redis, RedisCluster]:
+def _create_pubsub_client(pubsub_url: str, use_clusters: bool) -> redis.Redis | RedisCluster:
     if use_clusters:
         return RedisCluster.from_url(pubsub_url)
     return redis.Redis.from_url(pubsub_url)
@@ -256,23 +256,19 @@ def init_app(app: DifyApp):
     redis_client.initialize(client)
     app.extensions["redis"] = redis_client
 
-    pubsub_client = client
+    global _pubsub_redis_client
+    _pubsub_redis_client = client
     if dify_config.normalized_pubsub_redis_url:
-        pubsub_client = _create_pubsub_client(
+        _pubsub_redis_client = _create_pubsub_client(
             dify_config.normalized_pubsub_redis_url, dify_config.PUBSUB_REDIS_USE_CLUSTERS
         )
-    pubsub_redis_client.initialize(pubsub_client)
-
-
-def get_pubsub_redis_client() -> RedisClientWrapper:
-    return pubsub_redis_client
 
 
 def get_pubsub_broadcast_channel() -> BroadcastChannelProtocol:
-    redis_conn = get_pubsub_redis_client()
+    assert _pubsub_redis_client is not None, "PubSub redis Client should be initialized here."
     if dify_config.PUBSUB_REDIS_CHANNEL_TYPE == "sharded":
-        return ShardedRedisBroadcastChannel(redis_conn)  # pyright: ignore[reportArgumentType]
-    return RedisBroadcastChannel(redis_conn)  # pyright: ignore[reportArgumentType]
+        return ShardedRedisBroadcastChannel(_pubsub_redis_client)
+    return RedisBroadcastChannel(_pubsub_redis_client)
 
 
 P = ParamSpec("P")

api/extensions/otel/decorators/base.py

@@ -1,6 +1,6 @@
 import functools
 from collections.abc import Callable
-from typing import Any, TypeVar, cast
+from typing import ParamSpec, TypeVar, cast
 
 from opentelemetry.trace import get_tracer
 
@@ -8,7 +8,8 @@ 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])
+P = ParamSpec("P")
+R = TypeVar("R")
 
 _HANDLER_INSTANCES: dict[type[SpanHandler], SpanHandler] = {SpanHandler: SpanHandler()}
 
@@ -20,7 +21,7 @@ def _get_handler_instance(handler_class: type[SpanHandler]) -> SpanHandler:
     return _HANDLER_INSTANCES[handler_class]
 
 
-def trace_span(handler_class: type[SpanHandler] | None = None) -> Callable[[T], T]:
+def trace_span(handler_class: type[SpanHandler] | None = None) -> Callable[[Callable[P, R]], Callable[P, R]]:
     """
     Decorator that traces a function with an OpenTelemetry span.
 
@@ -30,9 +31,9 @@ def trace_span(handler_class: type[SpanHandler] | None = None) -> Callable[[T],
     :param handler_class: Optional handler class to use for this span. If None, uses the default SpanHandler.
     """
 
-    def decorator(func: T) -> T:
+    def decorator(func: Callable[P, R]) -> Callable[P, R]:
         @functools.wraps(func)
-        def wrapper(*args: Any, **kwargs: Any) -> Any:
+        def wrapper(*args: P.args, **kwargs: P.kwargs) -> R:
             if not (dify_config.ENABLE_OTEL or is_instrument_flag_enabled()):
                 return func(*args, **kwargs)
 
@@ -46,6 +47,6 @@ def trace_span(handler_class: type[SpanHandler] | None = None) -> Callable[[T],
                 kwargs=kwargs,
             )
 
-        return cast(T, wrapper)
+        return cast(Callable[P, R], wrapper)
 
     return decorator

api/extensions/otel/decorators/handler.py

@@ -1,9 +1,11 @@
 import inspect
 from collections.abc import Callable, Mapping
-from typing import Any
+from typing import Any, TypeVar
 
 from opentelemetry.trace import SpanKind, Status, StatusCode
 
+R = TypeVar("R")
+
 
 class SpanHandler:
     """
@@ -31,9 +33,9 @@ class SpanHandler:
 
     def _extract_arguments(
         self,
-        wrapped: Callable[..., Any],
-        args: tuple[Any, ...],
-        kwargs: Mapping[str, Any],
+        wrapped: Callable[..., R],
+        args: tuple[object, ...],
+        kwargs: Mapping[str, object],
     ) -> dict[str, Any] | None:
         """
         Extract function arguments using inspect.signature.
@@ -62,10 +64,10 @@ class SpanHandler:
     def wrapper(
         self,
         tracer: Any,
-        wrapped: Callable[..., Any],
-        args: tuple[Any, ...],
-        kwargs: Mapping[str, Any],
-    ) -> Any:
+        wrapped: Callable[..., R],
+        args: tuple[object, ...],
+        kwargs: Mapping[str, object],
+    ) -> R:
         """
         Fully control the wrapper behavior.
 

api/extensions/otel/decorators/handlers/generate_handler.py

@@ -1,6 +1,6 @@
 import logging
 from collections.abc import Callable, Mapping
-from typing import Any
+from typing import Any, TypeVar
 
 from opentelemetry.trace import SpanKind, Status, StatusCode
 from opentelemetry.util.types import AttributeValue
@@ -12,16 +12,19 @@ from models.model import Account
 logger = logging.getLogger(__name__)
 
 
+R = TypeVar("R")
+
+
 class AppGenerateHandler(SpanHandler):
     """Span handler for ``AppGenerateService.generate``."""
 
     def wrapper(
         self,
         tracer: Any,
-        wrapped: Callable[..., Any],
-        args: tuple[Any, ...],
-        kwargs: Mapping[str, Any],
-    ) -> Any:
+        wrapped: Callable[..., R],
+        args: tuple[object, ...],
+        kwargs: Mapping[str, object],
+    ) -> R:
         try:
             arguments = self._extract_arguments(wrapped, args, kwargs)
             if not arguments:

api/libs/broadcast_channel/redis/_subscription.py

@@ -152,7 +152,7 @@ class RedisSubscriptionBase(Subscription):
         """Iterator for consuming messages from the subscription."""
         while not self._closed.is_set():
             try:
-                item = self._queue.get(timeout=0.1)
+                item = self._queue.get(timeout=1)
             except queue.Empty:
                 continue
 

api/libs/broadcast_channel/redis/channel.py

@@ -1,7 +1,7 @@
 from __future__ import annotations
 
 from libs.broadcast_channel.channel import Producer, Subscriber, Subscription
-from redis import Redis
+from redis import Redis, RedisCluster
 
 from ._subscription import RedisSubscriptionBase
 
@@ -18,7 +18,7 @@ class BroadcastChannel:
 
     def __init__(
         self,
-        redis_client: Redis,
+        redis_client: Redis | RedisCluster,
     ):
         self._client = redis_client
 
@@ -27,7 +27,7 @@ class BroadcastChannel:
 
 
 class Topic:
-    def __init__(self, redis_client: Redis, topic: str):
+    def __init__(self, redis_client: Redis | RedisCluster, topic: str):
         self._client = redis_client
         self._topic = topic
 

api/libs/broadcast_channel/redis/sharded_channel.py

@@ -70,8 +70,9 @@ class _RedisShardedSubscription(RedisSubscriptionBase):
         # Since we have already filtered at the caller's site, we can safely set
         # `ignore_subscribe_messages=False`.
         if isinstance(self._client, RedisCluster):
-            # NOTE(QuantumGhost): due to an issue in upstream code, calling `get_sharded_message`
-            # would use busy-looping to wait for incoming message, consuming excessive CPU quota.
+            # NOTE(QuantumGhost): due to an issue in upstream code, calling `get_sharded_message` without
+            # specifying the `target_node` argument would use busy-looping to wait
+            # for incoming message, consuming excessive CPU quota.
             #
             # Here we specify the `target_node` to mitigate this problem.
             node = self._client.get_node_from_key(self._topic)
@@ -80,8 +81,10 @@ class _RedisShardedSubscription(RedisSubscriptionBase):
                 timeout=1,
                 target_node=node,
             )
-        else:
+        elif isinstance(self._client, Redis):
             return self._pubsub.get_sharded_message(ignore_subscribe_messages=False, timeout=1)  # type: ignore[attr-defined]
+        else:
+            raise AssertionError("client should be either Redis or RedisCluster.")
 
     def _get_message_type(self) -> str:
         return "smessage"

api/migrations/versions/2026_02_10_1507-f55813ffe2c8_fix_tenant_default_model_unique.py

@@ -0,0 +1,59 @@
+"""add unique constraint to tenant_default_models
+
+Revision ID: fix_tenant_default_model_unique
+Revises: 9d77545f524e
+Create Date: 2026-01-19 15:07:00.000000
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+def _is_pg(conn):
+    return conn.dialect.name == "postgresql"
+
+
+# revision identifiers, used by Alembic.
+revision = 'f55813ffe2c8'
+down_revision = 'c3df22613c99'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # First, remove duplicate records keeping only the most recent one per (tenant_id, model_type)
+    # This is necessary before adding the unique constraint
+    conn = op.get_bind()
+    
+    # Delete duplicates: keep the record with the latest updated_at for each (tenant_id, model_type)
+    # If updated_at is the same, keep the one with the largest id as tiebreaker
+    if _is_pg(conn):
+        # PostgreSQL: Use DISTINCT ON for efficient deduplication
+        conn.execute(sa.text("""
+            DELETE FROM tenant_default_models
+            WHERE id NOT IN (
+                SELECT DISTINCT ON (tenant_id, model_type) id
+                FROM tenant_default_models
+                ORDER BY tenant_id, model_type, updated_at DESC, id DESC
+            )
+        """))
+    else:
+        # MySQL: Use self-join to find and delete duplicates
+        # Keep the record with latest updated_at (or largest id if updated_at is equal)
+        conn.execute(sa.text("""
+            DELETE t1 FROM tenant_default_models t1
+            INNER JOIN tenant_default_models t2
+            ON t1.tenant_id = t2.tenant_id 
+               AND t1.model_type = t2.model_type 
+               AND (t1.updated_at < t2.updated_at 
+                    OR (t1.updated_at = t2.updated_at AND t1.id < t2.id))
+        """))
+    
+    # Now add the unique constraint
+    with op.batch_alter_table('tenant_default_models', schema=None) as batch_op:
+        batch_op.create_unique_constraint('unique_tenant_default_model_type', ['tenant_id', 'model_type'])
+
+
+def downgrade():
+    with op.batch_alter_table('tenant_default_models', schema=None) as batch_op:
+        batch_op.drop_constraint('unique_tenant_default_model_type', type_='unique')

api/models/model.py

@@ -227,7 +227,7 @@ class App(Base):
         with Session(db.engine) as session:
             if api_provider_ids:
                 existing_api_providers = [
-                    api_provider.id
+                    str(api_provider.id)
                     for api_provider in session.execute(
                         text("SELECT id FROM tool_api_providers WHERE id IN :provider_ids"),
                         {"provider_ids": tuple(api_provider_ids)},

api/models/provider.py

@@ -181,6 +181,7 @@ class TenantDefaultModel(TypeBase):
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="tenant_default_model_pkey"),
         sa.Index("tenant_default_model_tenant_id_provider_type_idx", "tenant_id", "provider_name", "model_type"),
+        sa.UniqueConstraint("tenant_id", "model_type", name="unique_tenant_default_model_type"),
     )
 
     id: Mapped[str] = mapped_column(

api/services/account_service.py

@@ -1225,7 +1225,12 @@ class TenantService:
 
     @staticmethod
     def remove_member_from_tenant(tenant: Tenant, account: Account, operator: Account):
-        """Remove member from tenant"""
+        """Remove member from tenant.
+
+        If the removed member has ``AccountStatus.PENDING`` (invited but never
+        activated) and no remaining workspace memberships, the orphaned account
+        record is deleted as well.
+        """
         if operator.id == account.id:
             raise CannotOperateSelfError("Cannot operate self.")
 
@@ -1235,9 +1240,31 @@ class TenantService:
         if not ta:
             raise MemberNotInTenantError("Member not in tenant.")
 
+        # Capture identifiers before any deletions; attribute access on the ORM
+        # object may fail after commit() expires the instance.
+        account_id = account.id
+        account_email = account.email
+
         db.session.delete(ta)
+
+        # Clean up orphaned pending accounts (invited but never activated)
+        should_delete_account = False
+        if account.status == AccountStatus.PENDING:
+            # autoflush flushes ta deletion before this query, so 0 means no remaining joins
+            remaining_joins = db.session.query(TenantAccountJoin).filter_by(account_id=account_id).count()
+            if remaining_joins == 0:
+                db.session.delete(account)
+                should_delete_account = True
+
         db.session.commit()
 
+        if should_delete_account:
+            logger.info(
+                "Deleted orphaned pending account: account_id=%s, email=%s",
+                account_id,
+                account_email,
+            )
+
         if dify_config.BILLING_ENABLED:
             BillingService.clean_billing_info_cache(tenant.id)
 
@@ -1245,13 +1272,13 @@ class TenantService:
         from services.enterprise.account_deletion_sync import sync_workspace_member_removal
 
         sync_success = sync_workspace_member_removal(
-            workspace_id=tenant.id, member_id=account.id, source="workspace_member_removed"
+            workspace_id=tenant.id, member_id=account_id, source="workspace_member_removed"
         )
         if not sync_success:
             logger.warning(
                 "Enterprise workspace member removal sync failed: workspace_id=%s, member_id=%s",
                 tenant.id,
-                account.id,
+                account_id,
             )
 
     @staticmethod

api/services/human_input_service.py

@@ -22,7 +22,7 @@ from libs.exception import BaseHTTPException
 from models.human_input import RecipientType
 from models.model import App, AppMode
 from repositories.factory import DifyAPIRepositoryFactory
-from tasks.app_generate.workflow_execute_task import WORKFLOW_BASED_APP_EXECUTION_QUEUE, resume_app_execution
+from tasks.app_generate.workflow_execute_task import resume_app_execution
 
 
 class Form:
@@ -230,7 +230,6 @@ class HumanInputService:
             try:
                 resume_app_execution.apply_async(
                     kwargs={"payload": payload},
-                    queue=WORKFLOW_BASED_APP_EXECUTION_QUEUE,
                 )
             except Exception:  # pragma: no cover
                 logger.exception("Failed to enqueue resume task for workflow run %s", workflow_run_id)

api/services/workflow_event_snapshot_service.py

@@ -129,15 +129,15 @@ def build_workflow_event_stream(
                         return
 
                     try:
-                        event = buffer_state.queue.get(timeout=0.1)
+                        event = buffer_state.queue.get(timeout=1)
                     except queue.Empty:
                         current_time = time.time()
                         if current_time - last_msg_time > idle_timeout:
                             logger.debug(
-                                "No workflow events received for %s seconds, keeping stream open",
+                                "Idle timeout of %s seconds reached, closing workflow event stream.",
                                 idle_timeout,
                             )
-                            last_msg_time = current_time
+                            return
                         if current_time - last_ping_time >= ping_interval:
                             yield StreamEvent.PING.value
                             last_ping_time = current_time
@@ -405,7 +405,7 @@ def _start_buffering(subscription) -> BufferState:
         dropped_count = 0
         try:
             while not buffer_state.stop_event.is_set():
-                msg = subscription.receive(timeout=0.1)
+                msg = subscription.receive(timeout=1)
                 if msg is None:
                     continue
                 event = _parse_event_message(msg)

api/services/workspace_service.py

@@ -1,6 +1,7 @@
 from flask_login import current_user
 
 from configs import dify_config
+from enums.cloud_plan import CloudPlan
 from extensions.ext_database import db
 from models.account import Tenant, TenantAccountJoin, TenantAccountRole
 from services.account_service import TenantService
@@ -53,7 +54,12 @@ class WorkspaceService:
             from services.credit_pool_service import CreditPoolService
 
             paid_pool = CreditPoolService.get_pool(tenant_id=tenant.id, pool_type="paid")
-            if paid_pool:
+            # if the tenant is not on the sandbox plan and the paid pool is not full, use the paid pool
+            if (
+                feature.billing.subscription.plan != CloudPlan.SANDBOX
+                and paid_pool is not None
+                and (paid_pool.quota_limit == -1 or paid_pool.quota_limit > paid_pool.quota_used)
+            ):
                 tenant_info["trial_credits"] = paid_pool.quota_limit
                 tenant_info["trial_credits_used"] = paid_pool.quota_used
             else:

api/tests/unit_tests/conftest.py

@@ -51,7 +51,7 @@ def _patch_redis_clients_on_loaded_modules():
             continue
         if hasattr(module, "redis_client"):
             module.redis_client = redis_mock
-        if hasattr(module, "pubsub_redis_client"):
+        if hasattr(module, "_pubsub_redis_client"):
             module.pubsub_redis_client = redis_mock
 
 
@@ -72,7 +72,7 @@ def _patch_redis_clients():
 
     with (
         patch.object(ext_redis, "redis_client", redis_mock),
-        patch.object(ext_redis, "pubsub_redis_client", redis_mock),
+        patch.object(ext_redis, "_pubsub_redis_client", redis_mock),
     ):
         _patch_redis_clients_on_loaded_modules()
         yield

api/tests/unit_tests/controllers/console/app/test_conversation_read_timestamp.py

@@ -0,0 +1,34 @@
+from datetime import datetime
+from types import SimpleNamespace
+from unittest.mock import MagicMock, patch
+
+from controllers.console.app.conversation import _get_conversation
+
+
+def test_get_conversation_mark_read_keeps_updated_at_unchanged():
+    app_model = SimpleNamespace(id="app-id")
+    account = SimpleNamespace(id="account-id")
+    conversation = MagicMock()
+    conversation.id = "conversation-id"
+
+    with (
+        patch("controllers.console.app.conversation.current_account_with_tenant", return_value=(account, None)),
+        patch("controllers.console.app.conversation.naive_utc_now", return_value=datetime(2026, 2, 9, 0, 0, 0)),
+        patch("controllers.console.app.conversation.db.session") as mock_session,
+    ):
+        mock_session.query.return_value.where.return_value.first.return_value = conversation
+
+        _get_conversation(app_model, "conversation-id")
+
+        statement = mock_session.execute.call_args[0][0]
+        compiled = statement.compile()
+        sql_text = str(compiled).lower()
+        compact_sql_text = sql_text.replace(" ", "")
+        params = compiled.params
+
+        assert "updated_at=current_timestamp" not in compact_sql_text
+        assert "updated_at=conversations.updated_at" in compact_sql_text
+        assert "read_at=:read_at" in compact_sql_text
+        assert "read_account_id=:read_account_id" in compact_sql_text
+        assert params["read_at"] == datetime(2026, 2, 9, 0, 0, 0)
+        assert params["read_account_id"] == "account-id"

api/tests/unit_tests/core/app/task_pipeline/test_message_cycle_manager_optimization.py

@@ -25,15 +25,19 @@ class TestMessageCycleManagerOptimization:
         task_state = Mock()
         return MessageCycleManager(application_generate_entity=mock_application_generate_entity, task_state=task_state)
 
-    def test_get_message_event_type_with_message_file(self, message_cycle_manager):
-        """Test get_message_event_type returns MESSAGE_FILE when message has files."""
+    def test_get_message_event_type_with_assistant_file(self, message_cycle_manager):
+        """Test get_message_event_type returns MESSAGE_FILE when message has assistant-generated files.
+
+        This ensures that AI-generated images (belongs_to='assistant') trigger the MESSAGE_FILE event,
+        allowing the frontend to properly display generated image files with url field.
+        """
         with patch("core.app.task_pipeline.message_cycle_manager.session_factory") as mock_session_factory:
             # Setup mock session and message file
             mock_session = Mock()
             mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
 
             mock_message_file = Mock()
-            # Current implementation uses session.scalar(select(...))
+            mock_message_file.belongs_to = "assistant"
             mock_session.scalar.return_value = mock_message_file
 
             # Execute
@@ -44,6 +48,31 @@ class TestMessageCycleManagerOptimization:
             assert result == StreamEvent.MESSAGE_FILE
             mock_session.scalar.assert_called_once()
 
+    def test_get_message_event_type_with_user_file(self, message_cycle_manager):
+        """Test get_message_event_type returns MESSAGE when message only has user-uploaded files.
+
+        This is a regression test for the issue where user-uploaded images (belongs_to='user')
+        caused the LLM text response to be incorrectly tagged with MESSAGE_FILE event,
+        resulting in broken images in the chat UI. The query filters for belongs_to='assistant',
+        so when only user files exist, the database query returns None, resulting in MESSAGE event type.
+        """
+        with patch("core.app.task_pipeline.message_cycle_manager.session_factory") as mock_session_factory:
+            # Setup mock session and message file
+            mock_session = Mock()
+            mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
+
+            # When querying for assistant files with only user files present, return None
+            # (simulates database query with belongs_to='assistant' filter returning no results)
+            mock_session.scalar.return_value = None
+
+            # Execute
+            with current_app.app_context():
+                result = message_cycle_manager.get_message_event_type("test-message-id")
+
+            # Assert
+            assert result == StreamEvent.MESSAGE
+            mock_session.scalar.assert_called_once()
+
     def test_get_message_event_type_without_message_file(self, message_cycle_manager):
         """Test get_message_event_type returns MESSAGE when message has no files."""
         with patch("core.app.task_pipeline.message_cycle_manager.session_factory") as mock_session_factory:
@@ -69,7 +98,7 @@ class TestMessageCycleManagerOptimization:
             mock_session_factory.create_session.return_value.__enter__.return_value = mock_session
 
             mock_message_file = Mock()
-            # Current implementation uses session.scalar(select(...))
+            mock_message_file.belongs_to = "assistant"
             mock_session.scalar.return_value = mock_message_file
 
             # Execute: compute event type once, then pass to message_to_stream_response

api/tests/unit_tests/core/tools/test_base_tool.py

@@ -0,0 +1,211 @@
+from __future__ import annotations
+
+from collections.abc import Generator
+from dataclasses import dataclass
+from typing import Any, cast
+
+from core.app.entities.app_invoke_entities import InvokeFrom
+from core.tools.__base.tool import Tool
+from core.tools.__base.tool_runtime import ToolRuntime
+from core.tools.entities.common_entities import I18nObject
+from core.tools.entities.tool_entities import ToolEntity, ToolIdentity, ToolInvokeMessage, ToolProviderType
+
+
+class DummyCastType:
+    def cast_value(self, value: Any) -> str:
+        return f"cast:{value}"
+
+
+@dataclass
+class DummyParameter:
+    name: str
+    type: DummyCastType
+    form: str = "llm"
+    required: bool = False
+    default: Any = None
+    options: list[Any] | None = None
+    llm_description: str | None = None
+
+
+class DummyTool(Tool):
+    def __init__(self, entity: ToolEntity, runtime: ToolRuntime):
+        super().__init__(entity=entity, runtime=runtime)
+        self.result: ToolInvokeMessage | list[ToolInvokeMessage] | Generator[ToolInvokeMessage, None, None] = (
+            self.create_text_message("default")
+        )
+        self.runtime_parameter_overrides: list[Any] | None = None
+        self.last_invocation: dict[str, Any] | None = None
+
+    def tool_provider_type(self) -> ToolProviderType:
+        return ToolProviderType.BUILT_IN
+
+    def _invoke(
+        self,
+        user_id: str,
+        tool_parameters: dict[str, Any],
+        conversation_id: str | None = None,
+        app_id: str | None = None,
+        message_id: str | None = None,
+    ) -> ToolInvokeMessage | list[ToolInvokeMessage] | Generator[ToolInvokeMessage, None, None]:
+        self.last_invocation = {
+            "user_id": user_id,
+            "tool_parameters": tool_parameters,
+            "conversation_id": conversation_id,
+            "app_id": app_id,
+            "message_id": message_id,
+        }
+        return self.result
+
+    def get_runtime_parameters(
+        self,
+        conversation_id: str | None = None,
+        app_id: str | None = None,
+        message_id: str | None = None,
+    ):
+        if self.runtime_parameter_overrides is not None:
+            return self.runtime_parameter_overrides
+        return super().get_runtime_parameters(
+            conversation_id=conversation_id,
+            app_id=app_id,
+            message_id=message_id,
+        )
+
+
+def _build_tool(runtime: ToolRuntime | None = None) -> DummyTool:
+    entity = ToolEntity(
+        identity=ToolIdentity(author="test", name="dummy", label=I18nObject(en_US="dummy"), provider="test"),
+        parameters=[],
+        description=None,
+        has_runtime_parameters=False,
+    )
+    runtime = runtime or ToolRuntime(tenant_id="tenant-1", invoke_from=InvokeFrom.DEBUGGER, runtime_parameters={})
+    return DummyTool(entity=entity, runtime=runtime)
+
+
+def test_invoke_supports_single_message_and_parameter_casting():
+    runtime = ToolRuntime(
+        tenant_id="tenant-1",
+        invoke_from=InvokeFrom.DEBUGGER,
+        runtime_parameters={"from_runtime": "runtime-value"},
+    )
+    tool = _build_tool(runtime)
+    tool.entity.parameters = cast(
+        Any,
+        [
+            DummyParameter(name="unused", type=DummyCastType()),
+            DummyParameter(name="age", type=DummyCastType()),
+        ],
+    )
+    tool.result = tool.create_text_message("ok")
+
+    messages = list(
+        tool.invoke(
+            user_id="user-1",
+            tool_parameters={"age": "18", "raw": "keep"},
+            conversation_id="conv-1",
+            app_id="app-1",
+            message_id="msg-1",
+        )
+    )
+
+    assert len(messages) == 1
+    assert messages[0].message.text == "ok"
+    assert tool.last_invocation == {
+        "user_id": "user-1",
+        "tool_parameters": {"age": "cast:18", "raw": "keep", "from_runtime": "runtime-value"},
+        "conversation_id": "conv-1",
+        "app_id": "app-1",
+        "message_id": "msg-1",
+    }
+
+
+def test_invoke_supports_list_and_generator_results():
+    tool = _build_tool()
+    tool.result = [tool.create_text_message("a"), tool.create_text_message("b")]
+    list_messages = list(tool.invoke(user_id="user-1", tool_parameters={}))
+    assert [msg.message.text for msg in list_messages] == ["a", "b"]
+
+    def _message_generator() -> Generator[ToolInvokeMessage, None, None]:
+        yield tool.create_text_message("g1")
+        yield tool.create_text_message("g2")
+
+    tool.result = _message_generator()
+    generated_messages = list(tool.invoke(user_id="user-2", tool_parameters={}))
+    assert [msg.message.text for msg in generated_messages] == ["g1", "g2"]
+
+
+def test_fork_tool_runtime_returns_new_tool_with_copied_entity():
+    tool = _build_tool()
+    new_runtime = ToolRuntime(tenant_id="tenant-2", invoke_from=InvokeFrom.EXPLORE, runtime_parameters={})
+
+    forked = tool.fork_tool_runtime(new_runtime)
+
+    assert isinstance(forked, DummyTool)
+    assert forked is not tool
+    assert forked.runtime == new_runtime
+    assert forked.entity == tool.entity
+    assert forked.entity is not tool.entity
+
+
+def test_get_runtime_parameters_and_merge_runtime_parameters():
+    tool = _build_tool()
+    original = DummyParameter(name="temperature", type=DummyCastType(), form="schema", required=True, default="0.7")
+    tool.entity.parameters = cast(Any, [original])
+
+    default_runtime_parameters = tool.get_runtime_parameters()
+    assert default_runtime_parameters == [original]
+
+    override = DummyParameter(name="temperature", type=DummyCastType(), form="llm", required=False, default="0.5")
+    appended = DummyParameter(name="new_param", type=DummyCastType(), form="form", required=False, default="x")
+    tool.runtime_parameter_overrides = [override, appended]
+
+    merged = tool.get_merged_runtime_parameters()
+    assert len(merged) == 2
+    assert merged[0].name == "temperature"
+    assert merged[0].form == "llm"
+    assert merged[0].required is False
+    assert merged[0].default == "0.5"
+    assert merged[1].name == "new_param"
+
+
+def test_message_factory_helpers():
+    tool = _build_tool()
+
+    image_message = tool.create_image_message("https://example.com/image.png")
+    assert image_message.type == ToolInvokeMessage.MessageType.IMAGE
+    assert image_message.message.text == "https://example.com/image.png"
+
+    file_obj = object()
+    file_message = tool.create_file_message(file_obj)  # type: ignore[arg-type]
+    assert file_message.type == ToolInvokeMessage.MessageType.FILE
+    assert file_message.message.file_marker == "file_marker"
+    assert file_message.meta == {"file": file_obj}
+
+    link_message = tool.create_link_message("https://example.com")
+    assert link_message.type == ToolInvokeMessage.MessageType.LINK
+    assert link_message.message.text == "https://example.com"
+
+    text_message = tool.create_text_message("hello")
+    assert text_message.type == ToolInvokeMessage.MessageType.TEXT
+    assert text_message.message.text == "hello"
+
+    blob_message = tool.create_blob_message(b"blob", meta={"source": "unit-test"})
+    assert blob_message.type == ToolInvokeMessage.MessageType.BLOB
+    assert blob_message.message.blob == b"blob"
+    assert blob_message.meta == {"source": "unit-test"}
+
+    json_message = tool.create_json_message({"k": "v"}, suppress_output=True)
+    assert json_message.type == ToolInvokeMessage.MessageType.JSON
+    assert json_message.message.json_object == {"k": "v"}
+    assert json_message.message.suppress_output is True
+
+    variable_message = tool.create_variable_message("answer", 42, stream=False)
+    assert variable_message.type == ToolInvokeMessage.MessageType.VARIABLE
+    assert variable_message.message.variable_name == "answer"
+    assert variable_message.message.variable_value == 42
+    assert variable_message.message.stream is False
+
+
+def test_base_abstract_invoke_placeholder_returns_none():
+    tool = _build_tool()
+    assert Tool._invoke(tool, user_id="u", tool_parameters={}) is None

api/tests/unit_tests/core/tools/workflow_as_tool/test_tool.py

@@ -255,6 +255,32 @@ def test_create_variable_message():
         assert message.message.stream is False
 
 
+def test_create_file_message_should_include_file_marker():
+    entity = ToolEntity(
+        identity=ToolIdentity(author="test", name="test tool", label=I18nObject(en_US="test tool"), provider="test"),
+        parameters=[],
+        description=None,
+        has_runtime_parameters=False,
+    )
+    runtime = ToolRuntime(tenant_id="test_tool", invoke_from=InvokeFrom.EXPLORE)
+    tool = WorkflowTool(
+        workflow_app_id="",
+        workflow_as_tool_id="",
+        version="1",
+        workflow_entities={},
+        workflow_call_depth=1,
+        entity=entity,
+        runtime=runtime,
+    )
+
+    file_obj = object()
+    message = tool.create_file_message(file_obj)  # type: ignore[arg-type]
+
+    assert message.type == ToolInvokeMessage.MessageType.FILE
+    assert message.message.file_marker == "file_marker"
+    assert message.meta == {"file": file_obj}
+
+
 def test_resolve_user_from_database_falls_back_to_end_user(monkeypatch: pytest.MonkeyPatch):
     """Ensure worker context can resolve EndUser when Account is missing."""
 

api/tests/unit_tests/libs/broadcast_channel/redis/test_channel_unit_tests.py

@@ -198,6 +198,15 @@ class SubscriptionTestCase:
     description: str = ""
 
 
+class FakeRedisClient:
+    """Minimal fake Redis client for unit tests."""
+
+    def __init__(self) -> None:
+        self.publish = MagicMock()
+        self.spublish = MagicMock()
+        self.pubsub = MagicMock(return_value=MagicMock())
+
+
 class TestRedisSubscription:
     """Test cases for the _RedisSubscription class."""
 
@@ -619,10 +628,13 @@ class TestRedisSubscription:
 class TestRedisShardedSubscription:
     """Test cases for the _RedisShardedSubscription class."""
 
+    @pytest.fixture(autouse=True)
+    def patch_sharded_redis_type(self, monkeypatch):
+        monkeypatch.setattr("libs.broadcast_channel.redis.sharded_channel.Redis", FakeRedisClient)
+
     @pytest.fixture
-    def mock_redis_client(self) -> MagicMock:
-        client = MagicMock()
-        return client
+    def mock_redis_client(self) -> FakeRedisClient:
+        return FakeRedisClient()
 
     @pytest.fixture
     def mock_pubsub(self) -> MagicMock:
@@ -636,7 +648,7 @@ class TestRedisShardedSubscription:
 
     @pytest.fixture
     def sharded_subscription(
-        self, mock_pubsub: MagicMock, mock_redis_client: MagicMock
+        self, mock_pubsub: MagicMock, mock_redis_client: FakeRedisClient
     ) -> Generator[_RedisShardedSubscription, None, None]:
         """Create a _RedisShardedSubscription instance for testing."""
         subscription = _RedisShardedSubscription(
@@ -657,7 +669,7 @@ class TestRedisShardedSubscription:
 
     # ==================== Lifecycle Tests ====================
 
-    def test_sharded_subscription_initialization(self, mock_pubsub: MagicMock, mock_redis_client: MagicMock):
+    def test_sharded_subscription_initialization(self, mock_pubsub: MagicMock, mock_redis_client: FakeRedisClient):
         """Test that sharded subscription is properly initialized."""
         subscription = _RedisShardedSubscription(
             client=mock_redis_client,
@@ -970,7 +982,7 @@ class TestRedisShardedSubscription:
         ],
     )
     def test_sharded_subscription_scenarios(
-        self, test_case: SubscriptionTestCase, mock_pubsub: MagicMock, mock_redis_client: MagicMock
+        self, test_case: SubscriptionTestCase, mock_pubsub: MagicMock, mock_redis_client: FakeRedisClient
     ):
         """Test various sharded subscription scenarios using table-driven approach."""
         subscription = _RedisShardedSubscription(
@@ -1058,7 +1070,7 @@ class TestRedisShardedSubscription:
         # Close should still work
         sharded_subscription.close()  # Should not raise
 
-    def test_channel_name_variations(self, mock_pubsub: MagicMock, mock_redis_client: MagicMock):
+    def test_channel_name_variations(self, mock_pubsub: MagicMock, mock_redis_client: FakeRedisClient):
         """Test various sharded channel name formats."""
         channel_names = [
             "simple",
@@ -1120,10 +1132,13 @@ class TestRedisSubscriptionCommon:
         """Parameterized fixture providing subscription type and class."""
         return request.param
 
+    @pytest.fixture(autouse=True)
+    def patch_sharded_redis_type(self, monkeypatch):
+        monkeypatch.setattr("libs.broadcast_channel.redis.sharded_channel.Redis", FakeRedisClient)
+
     @pytest.fixture
-    def mock_redis_client(self) -> MagicMock:
-        client = MagicMock()
-        return client
+    def mock_redis_client(self) -> FakeRedisClient:
+        return FakeRedisClient()
 
     @pytest.fixture
     def mock_pubsub(self) -> MagicMock:
@@ -1140,7 +1155,7 @@ class TestRedisSubscriptionCommon:
         return pubsub
 
     @pytest.fixture
-    def subscription(self, subscription_params, mock_pubsub: MagicMock, mock_redis_client: MagicMock):
+    def subscription(self, subscription_params, mock_pubsub: MagicMock, mock_redis_client: FakeRedisClient):
         """Create a subscription instance based on parameterized type."""
         subscription_type, subscription_class = subscription_params
         topic_name = f"test-{subscription_type}-topic"

api/tests/unit_tests/services/test_account_service.py

@@ -698,6 +698,132 @@ class TestTenantService:
 
         self._assert_database_operations_called(mock_db_dependencies["db"])
 
+    # ==================== Member Removal Tests ====================
+
+    def test_remove_pending_member_deletes_orphaned_account(self):
+        """Test that removing a pending member with no other workspaces deletes the account."""
+        # Arrange
+        mock_tenant = MagicMock()
+        mock_tenant.id = "tenant-456"
+        mock_operator = TestAccountAssociatedDataFactory.create_account_mock(account_id="operator-123", role="owner")
+        mock_pending_member = TestAccountAssociatedDataFactory.create_account_mock(
+            account_id="pending-user-789", email="pending@example.com", status=AccountStatus.PENDING
+        )
+
+        mock_ta = TestAccountAssociatedDataFactory.create_tenant_join_mock(
+            tenant_id="tenant-456", account_id="pending-user-789", role="normal"
+        )
+
+        with patch("services.account_service.db") as mock_db:
+            mock_operator_join = TestAccountAssociatedDataFactory.create_tenant_join_mock(
+                tenant_id="tenant-456", account_id="operator-123", role="owner"
+            )
+
+            query_mock_permission = MagicMock()
+            query_mock_permission.filter_by.return_value.first.return_value = mock_operator_join
+
+            query_mock_ta = MagicMock()
+            query_mock_ta.filter_by.return_value.first.return_value = mock_ta
+
+            query_mock_count = MagicMock()
+            query_mock_count.filter_by.return_value.count.return_value = 0
+
+            mock_db.session.query.side_effect = [query_mock_permission, query_mock_ta, query_mock_count]
+
+            with patch("services.enterprise.account_deletion_sync.sync_workspace_member_removal") as mock_sync:
+                mock_sync.return_value = True
+
+                # Act
+                TenantService.remove_member_from_tenant(mock_tenant, mock_pending_member, mock_operator)
+
+                # Assert: enterprise sync still receives the correct member ID
+                mock_sync.assert_called_once_with(
+                    workspace_id="tenant-456",
+                    member_id="pending-user-789",
+                    source="workspace_member_removed",
+                )
+
+            # Assert: both join record and account should be deleted
+            mock_db.session.delete.assert_any_call(mock_ta)
+            mock_db.session.delete.assert_any_call(mock_pending_member)
+            assert mock_db.session.delete.call_count == 2
+
+    def test_remove_pending_member_keeps_account_with_other_workspaces(self):
+        """Test that removing a pending member who belongs to other workspaces preserves the account."""
+        # Arrange
+        mock_tenant = MagicMock()
+        mock_tenant.id = "tenant-456"
+        mock_operator = TestAccountAssociatedDataFactory.create_account_mock(account_id="operator-123", role="owner")
+        mock_pending_member = TestAccountAssociatedDataFactory.create_account_mock(
+            account_id="pending-user-789", email="pending@example.com", status=AccountStatus.PENDING
+        )
+
+        mock_ta = TestAccountAssociatedDataFactory.create_tenant_join_mock(
+            tenant_id="tenant-456", account_id="pending-user-789", role="normal"
+        )
+
+        with patch("services.account_service.db") as mock_db:
+            mock_operator_join = TestAccountAssociatedDataFactory.create_tenant_join_mock(
+                tenant_id="tenant-456", account_id="operator-123", role="owner"
+            )
+
+            query_mock_permission = MagicMock()
+            query_mock_permission.filter_by.return_value.first.return_value = mock_operator_join
+
+            query_mock_ta = MagicMock()
+            query_mock_ta.filter_by.return_value.first.return_value = mock_ta
+
+            # Remaining join count = 1 (still in another workspace)
+            query_mock_count = MagicMock()
+            query_mock_count.filter_by.return_value.count.return_value = 1
+
+            mock_db.session.query.side_effect = [query_mock_permission, query_mock_ta, query_mock_count]
+
+            with patch("services.enterprise.account_deletion_sync.sync_workspace_member_removal") as mock_sync:
+                mock_sync.return_value = True
+
+                # Act
+                TenantService.remove_member_from_tenant(mock_tenant, mock_pending_member, mock_operator)
+
+            # Assert: only the join record should be deleted, not the account
+            mock_db.session.delete.assert_called_once_with(mock_ta)
+
+    def test_remove_active_member_preserves_account(self):
+        """Test that removing an active member never deletes the account, even with no other workspaces."""
+        # Arrange
+        mock_tenant = MagicMock()
+        mock_tenant.id = "tenant-456"
+        mock_operator = TestAccountAssociatedDataFactory.create_account_mock(account_id="operator-123", role="owner")
+        mock_active_member = TestAccountAssociatedDataFactory.create_account_mock(
+            account_id="active-user-789", email="active@example.com", status=AccountStatus.ACTIVE
+        )
+
+        mock_ta = TestAccountAssociatedDataFactory.create_tenant_join_mock(
+            tenant_id="tenant-456", account_id="active-user-789", role="normal"
+        )
+
+        with patch("services.account_service.db") as mock_db:
+            mock_operator_join = TestAccountAssociatedDataFactory.create_tenant_join_mock(
+                tenant_id="tenant-456", account_id="operator-123", role="owner"
+            )
+
+            query_mock_permission = MagicMock()
+            query_mock_permission.filter_by.return_value.first.return_value = mock_operator_join
+
+            query_mock_ta = MagicMock()
+            query_mock_ta.filter_by.return_value.first.return_value = mock_ta
+
+            mock_db.session.query.side_effect = [query_mock_permission, query_mock_ta]
+
+            with patch("services.enterprise.account_deletion_sync.sync_workspace_member_removal") as mock_sync:
+                mock_sync.return_value = True
+
+                # Act
+                TenantService.remove_member_from_tenant(mock_tenant, mock_active_member, mock_operator)
+
+            # Assert: only the join record should be deleted
+            mock_db.session.delete.assert_called_once_with(mock_ta)
+
     # ==================== Tenant Switching Tests ====================
 
     def test_switch_tenant_success(self):

api/tests/unit_tests/services/test_human_input_service.py

@@ -17,7 +17,6 @@ from core.workflow.nodes.human_input.entities import (
 from core.workflow.nodes.human_input.enums import FormInputType, HumanInputFormKind, HumanInputFormStatus
 from models.human_input import RecipientType
 from services.human_input_service import Form, FormExpiredError, HumanInputService, InvalidFormDataError
-from tasks.app_generate.workflow_execute_task import WORKFLOW_BASED_APP_EXECUTION_QUEUE
 
 
 @pytest.fixture
@@ -88,7 +87,6 @@ def test_enqueue_resume_dispatches_task_for_workflow(mocker, mock_session_factor
 
     resume_task.apply_async.assert_called_once()
     call_kwargs = resume_task.apply_async.call_args.kwargs
-    assert call_kwargs["queue"] == WORKFLOW_BASED_APP_EXECUTION_QUEUE
     assert call_kwargs["kwargs"]["payload"]["workflow_run_id"] == "workflow-run-id"
 
 
@@ -130,7 +128,6 @@ def test_enqueue_resume_dispatches_task_for_advanced_chat(mocker, mock_session_f
 
     resume_task.apply_async.assert_called_once()
     call_kwargs = resume_task.apply_async.call_args.kwargs
-    assert call_kwargs["queue"] == WORKFLOW_BASED_APP_EXECUTION_QUEUE
     assert call_kwargs["kwargs"]["payload"]["workflow_run_id"] == "workflow-run-id"
 
 

dev/start-worker

@@ -106,10 +106,10 @@ if [[ -z "${QUEUES}" ]]; then
   # Configure queues based on edition
   if [[ "${EDITION}" == "CLOUD" ]]; then
     # Cloud edition: separate queues for dataset and trigger tasks
-    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
+    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow_professional,workflow_team,workflow_sandbox,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention,workflow_based_app_execution"
   else
     # Community edition (SELF_HOSTED): dataset and workflow have separate queues
-    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention"
+    QUEUES="dataset,priority_dataset,priority_pipeline,pipeline,mail,ops_trace,app_deletion,plugin,workflow_storage,conversation,workflow,schedule_poller,schedule_executor,triggered_workflow_dispatcher,trigger_refresh_executor,retention,workflow_based_app_execution"
   fi
 
   echo "No queues specified, using edition-based defaults: ${QUEUES}"

docker/.env.example

@@ -62,6 +62,9 @@ LANG=C.UTF-8
 LC_ALL=C.UTF-8
 PYTHONIOENCODING=utf-8
 
+# Set UV cache directory to avoid permission issues with non-existent home directory
+UV_CACHE_DIR=/tmp/.uv-cache
+
 # ------------------------------
 # Server Configuration
 # ------------------------------
@@ -384,6 +387,8 @@ CELERY_USE_SENTINEL=false
 CELERY_SENTINEL_MASTER_NAME=
 CELERY_SENTINEL_PASSWORD=
 CELERY_SENTINEL_SOCKET_TIMEOUT=0.1
+# e.g. {"tasks.add": {"rate_limit": "10/s"}}
+CELERY_TASK_ANNOTATIONS=null
 
 # ------------------------------
 # CORS Configuration

docker/docker-compose.yaml

@@ -16,6 +16,7 @@ x-shared-env: &shared-api-worker-env
   LANG: ${LANG:-C.UTF-8}
   LC_ALL: ${LC_ALL:-C.UTF-8}
   PYTHONIOENCODING: ${PYTHONIOENCODING:-utf-8}
+  UV_CACHE_DIR: ${UV_CACHE_DIR:-/tmp/.uv-cache}
   LOG_LEVEL: ${LOG_LEVEL:-INFO}
   LOG_OUTPUT_FORMAT: ${LOG_OUTPUT_FORMAT:-text}
   LOG_FILE: ${LOG_FILE:-/app/logs/server.log}
@@ -105,6 +106,7 @@ x-shared-env: &shared-api-worker-env
   CELERY_SENTINEL_MASTER_NAME: ${CELERY_SENTINEL_MASTER_NAME:-}
   CELERY_SENTINEL_PASSWORD: ${CELERY_SENTINEL_PASSWORD:-}
   CELERY_SENTINEL_SOCKET_TIMEOUT: ${CELERY_SENTINEL_SOCKET_TIMEOUT:-0.1}
+  CELERY_TASK_ANNOTATIONS: ${CELERY_TASK_ANNOTATIONS:-null}
   WEB_API_CORS_ALLOW_ORIGINS: ${WEB_API_CORS_ALLOW_ORIGINS:-*}
   CONSOLE_CORS_ALLOW_ORIGINS: ${CONSOLE_CORS_ALLOW_ORIGINS:-*}
   COOKIE_DOMAIN: ${COOKIE_DOMAIN:-}

sdks/nodejs-client/pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       axios:
         specifier: ^1.13.2
-        version: 1.13.2
+        version: 1.13.5
     devDependencies:
       '@eslint/js':
         specifier: ^9.39.2
@@ -544,8 +544,8 @@ packages:
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
-  axios@1.13.2:
-    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+  axios@1.13.5:
+    resolution: {integrity: sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1677,7 +1677,7 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  axios@1.13.2:
+  axios@1.13.5:
     dependencies:
       follow-redirects: 1.15.11
       form-data: 4.0.5

web/__tests__/workflow-parallel-limit.test.tsx

@@ -1,261 +0,0 @@
-/**
- * MAX_PARALLEL_LIMIT Configuration Bug Test
- *
- * This test reproduces and verifies the fix for issue #23083:
- * MAX_PARALLEL_LIMIT environment variable does not take effect in iteration panel
- */
-
-import { render, screen } from '@testing-library/react'
-import * as React from 'react'
-
-// Mock environment variables before importing constants
-const originalEnv = process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
-
-// Test with different environment values
-function setupEnvironment(value?: string) {
-  if (value)
-    process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT = value
-  else
-    delete process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
-
-  // Clear module cache to force re-evaluation
-  vi.resetModules()
-}
-
-function restoreEnvironment() {
-  if (originalEnv)
-    process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT = originalEnv
-  else
-    delete process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
-
-  vi.resetModules()
-}
-
-// Mock i18next with proper implementation
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => {
-      if (key.includes('MaxParallelismTitle'))
-        return 'Max Parallelism'
-      if (key.includes('MaxParallelismDesc'))
-        return 'Maximum number of parallel executions'
-      if (key.includes('parallelMode'))
-        return 'Parallel Mode'
-      if (key.includes('parallelPanelDesc'))
-        return 'Enable parallel execution'
-      if (key.includes('errorResponseMethod'))
-        return 'Error Response Method'
-      return key
-    },
-  }),
-  initReactI18next: {
-    type: '3rdParty',
-    init: vi.fn(),
-  },
-}))
-
-// Mock i18next module completely to prevent initialization issues
-vi.mock('i18next', () => ({
-  use: vi.fn().mockReturnThis(),
-  init: vi.fn().mockReturnThis(),
-  t: vi.fn(key => key),
-  isInitialized: true,
-}))
-
-// Mock the useConfig hook
-vi.mock('@/app/components/workflow/nodes/iteration/use-config', () => ({
-  default: () => ({
-    inputs: {
-      is_parallel: true,
-      parallel_nums: 5,
-      error_handle_mode: 'terminated',
-    },
-    changeParallel: vi.fn(),
-    changeParallelNums: vi.fn(),
-    changeErrorHandleMode: vi.fn(),
-  }),
-}))
-
-// Mock other components
-vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
-  default: function MockVarReferencePicker() {
-    return <div data-testid="var-reference-picker">VarReferencePicker</div>
-  },
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/split', () => ({
-  default: function MockSplit() {
-    return <div data-testid="split">Split</div>
-  },
-}))
-
-vi.mock('@/app/components/workflow/nodes/_base/components/field', () => ({
-  default: function MockField({ title, children }: { title: string, children: React.ReactNode }) {
-    return (
-      <div data-testid="field">
-        <label>{title}</label>
-        {children}
-      </div>
-    )
-  },
-}))
-
-const getParallelControls = () => ({
-  numberInput: screen.getByRole('spinbutton'),
-  slider: screen.getByRole('slider'),
-})
-
-describe('MAX_PARALLEL_LIMIT Configuration Bug', () => {
-  const mockNodeData = {
-    id: 'test-iteration-node',
-    type: 'iteration' as const,
-    data: {
-      title: 'Test Iteration',
-      desc: 'Test iteration node',
-      iterator_selector: ['test'],
-      output_selector: ['output'],
-      is_parallel: true,
-      parallel_nums: 5,
-      error_handle_mode: 'terminated' as const,
-    },
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  afterEach(() => {
-    restoreEnvironment()
-  })
-
-  afterAll(() => {
-    restoreEnvironment()
-  })
-
-  describe('Environment Variable Parsing', () => {
-    it('should parse MAX_PARALLEL_LIMIT from NEXT_PUBLIC_MAX_PARALLEL_LIMIT environment variable', async () => {
-      setupEnvironment('25')
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-      expect(MAX_PARALLEL_LIMIT).toBe(25)
-    })
-
-    it('should fallback to default when environment variable is not set', async () => {
-      setupEnvironment() // No environment variable
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-      expect(MAX_PARALLEL_LIMIT).toBe(10)
-    })
-
-    it('should handle invalid environment variable values', async () => {
-      setupEnvironment('invalid')
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-
-      // Should fall back to default when parsing fails
-      expect(MAX_PARALLEL_LIMIT).toBe(10)
-    })
-
-    it('should handle empty environment variable', async () => {
-      setupEnvironment('')
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-
-      // Should fall back to default when empty
-      expect(MAX_PARALLEL_LIMIT).toBe(10)
-    })
-
-    // Edge cases for boundary values
-    it('should clamp MAX_PARALLEL_LIMIT to MIN when env is 0 or negative', async () => {
-      setupEnvironment('0')
-      let { MAX_PARALLEL_LIMIT } = await import('@/config')
-      expect(MAX_PARALLEL_LIMIT).toBe(10) // Falls back to default
-
-      setupEnvironment('-5')
-      ;({ MAX_PARALLEL_LIMIT } = await import('@/config'))
-      expect(MAX_PARALLEL_LIMIT).toBe(10) // Falls back to default
-    })
-
-    it('should handle float numbers by parseInt behavior', async () => {
-      setupEnvironment('12.7')
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-      // parseInt truncates to integer
-      expect(MAX_PARALLEL_LIMIT).toBe(12)
-    })
-  })
-
-  describe('UI Component Integration (Main Fix Verification)', () => {
-    it('should render iteration panel with environment-configured max value', async () => {
-      // Set environment variable to a different value
-      setupEnvironment('30')
-
-      // Import Panel after setting environment
-      const Panel = await import('@/app/components/workflow/nodes/iteration/panel').then(mod => mod.default)
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-
-      render(
-        <Panel
-          id="test-node"
-          // @ts-expect-error  key type mismatch
-          data={mockNodeData.data}
-        />,
-      )
-
-      // Behavior-focused assertion: UI max should equal MAX_PARALLEL_LIMIT
-      const { numberInput, slider } = getParallelControls()
-      expect(numberInput).toHaveAttribute('max', String(MAX_PARALLEL_LIMIT))
-      expect(slider).toHaveAttribute('aria-valuemax', String(MAX_PARALLEL_LIMIT))
-
-      // Verify the actual values
-      expect(MAX_PARALLEL_LIMIT).toBe(30)
-      expect(numberInput.getAttribute('max')).toBe('30')
-      expect(slider.getAttribute('aria-valuemax')).toBe('30')
-    })
-
-    it('should maintain UI consistency with different environment values', async () => {
-      setupEnvironment('15')
-      const Panel = await import('@/app/components/workflow/nodes/iteration/panel').then(mod => mod.default)
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-
-      render(
-        <Panel
-          id="test-node"
-          // @ts-expect-error  key type mismatch
-          data={mockNodeData.data}
-        />,
-      )
-
-      // Both input and slider should use the same max value from MAX_PARALLEL_LIMIT
-      const { numberInput, slider } = getParallelControls()
-
-      expect(numberInput.getAttribute('max')).toBe(slider.getAttribute('aria-valuemax'))
-      expect(numberInput.getAttribute('max')).toBe(String(MAX_PARALLEL_LIMIT))
-    })
-  })
-
-  describe('Legacy Constant Verification (For Transition Period)', () => {
-    // Marked as transition/deprecation tests
-    it('should maintain MAX_ITERATION_PARALLEL_NUM for backward compatibility', async () => {
-      const { MAX_ITERATION_PARALLEL_NUM } = await import('@/app/components/workflow/constants')
-      expect(typeof MAX_ITERATION_PARALLEL_NUM).toBe('number')
-      expect(MAX_ITERATION_PARALLEL_NUM).toBe(10) // Hardcoded legacy value
-    })
-
-    it('should demonstrate MAX_PARALLEL_LIMIT vs legacy constant difference', async () => {
-      setupEnvironment('50')
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-      const { MAX_ITERATION_PARALLEL_NUM } = await import('@/app/components/workflow/constants')
-
-      // MAX_PARALLEL_LIMIT is configurable, MAX_ITERATION_PARALLEL_NUM is not
-      expect(MAX_PARALLEL_LIMIT).toBe(50)
-      expect(MAX_ITERATION_PARALLEL_NUM).toBe(10)
-      expect(MAX_PARALLEL_LIMIT).not.toBe(MAX_ITERATION_PARALLEL_NUM)
-    })
-  })
-
-  describe('Constants Validation', () => {
-    it('should validate that required constants exist and have correct types', async () => {
-      const { MAX_PARALLEL_LIMIT } = await import('@/config')
-      const { MIN_ITERATION_PARALLEL_NUM } = await import('@/app/components/workflow/constants')
-      expect(typeof MAX_PARALLEL_LIMIT).toBe('number')
-      expect(typeof MIN_ITERATION_PARALLEL_NUM).toBe('number')
-      expect(MAX_PARALLEL_LIMIT).toBeGreaterThanOrEqual(MIN_ITERATION_PARALLEL_NUM)
-    })
-  })
-})

web/app/(commonLayout)/plugins/loading.tsx

@@ -0,0 +1,7 @@
+import Loading from '@/app/components/base/loading'
+
+const PluginsLoading = () => {
+  return <Loading type="app" />
+}
+
+export default PluginsLoading

web/app/(commonLayout)/plugins/page.tsx

@@ -1,12 +1,17 @@
+import type { SearchParams } from 'nuqs'
 import Marketplace from '@/app/components/plugins/marketplace'
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 
-const PluginList = () => {
+type PluginListProps = {
+  searchParams: Promise<SearchParams>
+}
+
+const PluginList = ({ searchParams }: PluginListProps) => {
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" />}
+      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" searchParams={searchParams} />}
     />
   )
 }

web/app/components/base/badge/index.tsx

@@ -3,7 +3,6 @@ import type { CSSProperties, ReactNode } from 'react'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
-import './index.css'
 
 enum BadgeState {
   Warning = 'warning',

web/app/components/base/chat/chat/answer/human-input-content/utils.ts

@@ -8,6 +8,7 @@ import { UserActionButtonType } from '@/app/components/workflow/nodes/human-inpu
 import 'dayjs/locale/en'
 import 'dayjs/locale/zh-cn'
 import 'dayjs/locale/ja'
+import 'dayjs/locale/nl'
 
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
@@ -45,6 +46,7 @@ const localeMap: Record<string, string> = {
   'en-US': 'en',
   'zh-Hans': 'zh-cn',
   'ja-JP': 'ja',
+  'nl-NL': 'nl',
 }
 
 export const getRelativeTime = (

web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx

@@ -98,7 +98,9 @@ const VoiceParamConfig = ({
               className="h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6"
             >
               <span className={cn('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
-                {languageItem?.name ? t(`voice.language.${replace(languageItem?.value, '-', '')}`, { ns: 'common' }) : localLanguagePlaceholder}
+                {languageItem?.name
+                  ? t(`voice.language.${replace(languageItem?.value ?? '', '-', '')}`, languageItem?.name, { ns: 'common' as const })
+                  : localLanguagePlaceholder}
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronDownIcon
@@ -129,7 +131,7 @@ const VoiceParamConfig = ({
                         <span
                           className={cn('block', selected && 'font-normal')}
                         >
-                          {t(`voice.language.${replace((item.value), '-', '')}`, { ns: 'common' })}
+                          {t(`voice.language.${replace((item.value), '-', '')}`, item.name, { ns: 'common' as const })}
                         </span>
                         {(selected || item.value === text2speech?.language) && (
                           <span

web/app/components/base/form/components/field/input-type-select/types.tsx

@@ -1,5 +1,5 @@
 import type { RemixiconComponentType } from '@remixicon/react'
-import { z } from 'zod'
+import * as z from 'zod'
 
 export const InputTypeEnum = z.enum([
   'text-input',

web/app/components/base/form/form-scenarios/base/utils.ts

@@ -1,6 +1,6 @@
 import type { ZodNumber, ZodSchema, ZodString } from 'zod'
 import type { BaseConfiguration } from './types'
-import { z } from 'zod'
+import * as z from 'zod'
 import { BaseFieldType } from './types'
 
 export const generateZodSchema = (fields: BaseConfiguration[]) => {

web/app/components/base/form/form-scenarios/demo/types.ts

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 
 const ContactMethod = z.union([
   z.literal('email'),
@@ -22,10 +22,10 @@ export const UserSchema = z.object({
     .min(3, 'Surname must be at least 3 characters long')
     .regex(/^[A-Z]/, 'Surname must start with a capital letter'),
   isAcceptingTerms: z.boolean().refine(val => val, {
-    message: 'You must accept the terms and conditions',
+    error: 'You must accept the terms and conditions',
   }),
   contact: z.object({
-    email: z.string().email('Invalid email address'),
+    email: z.email('Invalid email address'),
     phone: z.string().optional(),
     preferredContactMethod: ContactMethod,
   }),

web/app/components/base/form/form-scenarios/input-field/utils.ts

@@ -1,6 +1,6 @@
 import type { ZodSchema, ZodString } from 'zod'
 import type { InputFieldConfiguration } from './types'
-import { z } from 'zod'
+import * as z from 'zod'
 import { SupportedFileTypes, TransferMethod } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/schema'
 import { InputFieldType } from './types'
 

web/app/components/base/param-item/top-k-item.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { env } from '@/env'
 import ParamItem from '.'
 
 type Props = {
@@ -11,12 +12,7 @@ type Props = {
   enable: boolean
 }
 
-const maxTopK = (() => {
-  const configValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-top-k-max-value') || '', 10)
-  if (configValue && !isNaN(configValue))
-    return configValue
-  return 10
-})()
+const maxTopK = env.NEXT_PUBLIC_TOP_K_MAX_VALUE
 const VALUE_LIMIT = {
   default: 2,
   step: 1,

web/app/components/base/premium-badge/index.tsx

@@ -4,7 +4,6 @@ import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
 import { cn } from '@/utils/classnames'
-import './index.css'
 
 const PremiumBadgeVariants = cva(
   'premium-badge',

web/app/components/base/with-input-validation/index.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { noop } from 'es-toolkit/function'
-import { z } from 'zod'
+import * as z from 'zod'
 import withValidation from '.'
 
 describe('withValidation HOC', () => {

web/app/components/base/with-input-validation/index.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { z } from 'zod'
+import * as z from 'zod'
 import withValidation from '.'
 
 // Sample components to wrap with validation
@@ -65,7 +65,7 @@ const ProductCard = ({ name, price, category, inStock }: ProductCardProps) => {
 // Create validated versions
 const userSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email'),
+  email: z.email('Invalid email'),
   age: z.number().min(0).max(150),
 })
 
@@ -371,7 +371,7 @@ export const ConfigurationValidation: Story = {
     )
 
     const configSchema = z.object({
-      apiUrl: z.string().url('Must be valid URL'),
+      apiUrl: z.url('Must be valid URL'),
       timeout: z.number().min(0).max(30000),
       retries: z.number().min(0).max(5),
       debug: z.boolean(),
@@ -430,7 +430,7 @@ export const UsageDocumentation: Story = {
         <div>
           <h4 className="mb-2 text-sm font-semibold text-gray-900">Usage Example</h4>
           <pre className="overflow-x-auto rounded-lg bg-gray-900 p-4 text-xs text-gray-100">
-            {`import { z } from 'zod'
+            {`import * as z from 'zod'
 import withValidation from './withValidation'
 
 // Define your component

web/app/components/datasets/create/step-two/components/inputs.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { InputNumber } from '@/app/components/base/input-number'
 import Tooltip from '@/app/components/base/tooltip'
+import { env } from '@/env'
 
 const TextLabel: FC<PropsWithChildren> = (props) => {
   return <label className="text-xs font-semibold leading-none text-text-secondary">{props.children}</label>
@@ -46,7 +47,7 @@ export const DelimiterInput: FC<InputProps & { tooltip?: string }> = (props) =>
 }
 
 export const MaxLengthInput: FC<InputNumberProps> = (props) => {
-  const maxValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-indexing-max-segmentation-tokens-length') || '4000', 10)
+  const maxValue = env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH
 
   const { t } = useTranslation()
   return (

web/app/components/datasets/create/step-two/hooks/use-segmentation-state.ts

@@ -1,5 +1,6 @@
 import type { ParentMode, PreProcessingRule, ProcessRule, Rules, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import { useCallback, useRef, useState } from 'react'
+import { env } from '@/env'
 import { ChunkingMode, ProcessMode } from '@/models/datasets'
 import escape from './escape'
 import unescape from './unescape'
@@ -8,10 +9,7 @@ import unescape from './unescape'
 export const DEFAULT_SEGMENT_IDENTIFIER = '\\n\\n'
 export const DEFAULT_MAXIMUM_CHUNK_LENGTH = 1024
 export const DEFAULT_OVERLAP = 50
-export const MAXIMUM_CHUNK_TOKEN_LENGTH = Number.parseInt(
-  globalThis.document?.body?.getAttribute('data-public-indexing-max-segmentation-tokens-length') || '4000',
-  10,
-)
+export const MAXIMUM_CHUNK_TOKEN_LENGTH = env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH
 
 export type ParentChildConfig = {
   chunkForContext: ParentMode

web/app/components/datasets/documents/create-from-pipeline/process-documents/components.spec.tsx

@@ -1,7 +1,7 @@
 import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { z } from 'zod'
+import * as z from 'zod'
 import { BaseFieldType } from '@/app/components/base/form/form-scenarios/base/types'
 import Toast from '@/app/components/base/toast'
 import Actions from './actions'
@@ -53,7 +53,7 @@ const createFailingSchema = () => {
         issues: [{ path: ['field1'], message: 'is required' }],
       },
     }),
-  } as unknown as z.ZodSchema
+  } as unknown as z.ZodType
 }
 
 // ==========================================

web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx

@@ -0,0 +1,129 @@
+'use client'
+import type { FC } from 'react'
+import type { DocType } from '@/models/datasets'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Radio from '@/app/components/base/radio'
+import Tooltip from '@/app/components/base/tooltip'
+import { useMetadataMap } from '@/hooks/use-metadata'
+import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
+import { cn } from '@/utils/classnames'
+import s from '../style.module.css'
+
+const TypeIcon: FC<{ iconName: string, className?: string }> = ({ iconName, className = '' }) => {
+  return <div className={cn(s.commonIcon, s[`${iconName}Icon`], className)} />
+}
+
+const IconButton: FC<{ type: DocType, isChecked: boolean }> = ({ type, isChecked = false }) => {
+  const metadataMap = useMetadataMap()
+  return (
+    <Tooltip popupContent={metadataMap[type].text}>
+      <button type="button" className={cn(s.iconWrapper, 'group', isChecked ? s.iconCheck : '')}>
+        <TypeIcon
+          iconName={metadataMap[type].iconName || ''}
+          className={`group-hover:bg-primary-600 ${isChecked ? '!bg-primary-600' : ''}`}
+        />
+      </button>
+    </Tooltip>
+  )
+}
+
+type DocTypeSelectorProps = {
+  docType: DocType | ''
+  documentType?: DocType | ''
+  tempDocType: DocType | ''
+  onTempDocTypeChange: (type: DocType | '') => void
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+const DocTypeSelector: FC<DocTypeSelectorProps> = ({
+  docType,
+  documentType,
+  tempDocType,
+  onTempDocTypeChange,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const isFirstTime = !docType && !documentType
+  const currValue = tempDocType ?? documentType
+
+  return (
+    <>
+      {isFirstTime && (
+        <div className={s.desc}>{t('metadata.desc', { ns: 'datasetDocuments' })}</div>
+      )}
+      <div className={s.operationWrapper}>
+        {isFirstTime && (
+          <span className={s.title}>{t('metadata.docTypeSelectTitle', { ns: 'datasetDocuments' })}</span>
+        )}
+        {documentType && (
+          <>
+            <span className={s.title}>{t('metadata.docTypeChangeTitle', { ns: 'datasetDocuments' })}</span>
+            <span className={s.changeTip}>{t('metadata.docTypeSelectWarning', { ns: 'datasetDocuments' })}</span>
+          </>
+        )}
+        <Radio.Group value={currValue ?? ''} onChange={onTempDocTypeChange} className={s.radioGroup}>
+          {CUSTOMIZABLE_DOC_TYPES.map(type => (
+            <Radio key={type} value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
+              <IconButton type={type} isChecked={currValue === type} />
+            </Radio>
+          ))}
+        </Radio.Group>
+        {isFirstTime && (
+          <Button variant="primary" onClick={onConfirm} disabled={!tempDocType}>
+            {t('metadata.firstMetaAction', { ns: 'datasetDocuments' })}
+          </Button>
+        )}
+        {documentType && (
+          <div className={s.opBtnWrapper}>
+            <Button onClick={onConfirm} className={`${s.opBtn} ${s.opSaveBtn}`} variant="primary">
+              {t('operation.save', { ns: 'common' })}
+            </Button>
+            <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+type DocumentTypeDisplayProps = {
+  displayType: DocType | ''
+  showChangeLink?: boolean
+  onChangeClick?: () => void
+}
+
+export const DocumentTypeDisplay: FC<DocumentTypeDisplayProps> = ({
+  displayType,
+  showChangeLink = false,
+  onChangeClick,
+}) => {
+  const { t } = useTranslation()
+  const metadataMap = useMetadataMap()
+  const effectiveType = displayType || 'book'
+
+  return (
+    <div className={s.documentTypeShow}>
+      {(displayType || !showChangeLink) && (
+        <>
+          <TypeIcon iconName={metadataMap[effectiveType]?.iconName || ''} className={s.iconShow} />
+          {metadataMap[effectiveType].text}
+          {showChangeLink && (
+            <div className="ml-1 inline-flex items-center gap-1">
+              ·
+              <div onClick={onChangeClick} className="cursor-pointer hover:text-text-accent">
+                {t('operation.change', { ns: 'common' })}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default DocTypeSelector

web/app/components/datasets/documents/detail/metadata/components/field-info.tsx

@@ -0,0 +1,89 @@
+'use client'
+import type { FC, ReactNode } from 'react'
+import type { inputType } from '@/hooks/use-metadata'
+import { useTranslation } from 'react-i18next'
+import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
+import Input from '@/app/components/base/input'
+import { SimpleSelect } from '@/app/components/base/select'
+import { getTextWidthWithCanvas } from '@/utils'
+import { cn } from '@/utils/classnames'
+import s from '../style.module.css'
+
+type FieldInfoProps = {
+  label: string
+  value?: string
+  valueIcon?: ReactNode
+  displayedValue?: string
+  defaultValue?: string
+  showEdit?: boolean
+  inputType?: inputType
+  selectOptions?: Array<{ value: string, name: string }>
+  onUpdate?: (v: string) => void
+}
+
+const FieldInfo: FC<FieldInfoProps> = ({
+  label,
+  value = '',
+  valueIcon,
+  displayedValue = '',
+  defaultValue,
+  showEdit = false,
+  inputType = 'input',
+  selectOptions = [],
+  onUpdate,
+}) => {
+  const { t } = useTranslation()
+  const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190
+  const editAlignTop = showEdit && inputType === 'textarea'
+  const readAlignTop = !showEdit && textNeedWrap
+
+  const renderContent = () => {
+    if (!showEdit)
+      return displayedValue
+
+    if (inputType === 'select') {
+      return (
+        <SimpleSelect
+          onSelect={({ value }) => onUpdate?.(value as string)}
+          items={selectOptions}
+          defaultValue={value}
+          className={s.select}
+          wrapperClassName={s.selectWrapper}
+          placeholder={`${t('metadata.placeholder.select', { ns: 'datasetDocuments' })}${label}`}
+        />
+      )
+    }
+
+    if (inputType === 'textarea') {
+      return (
+        <AutoHeightTextarea
+          onChange={e => onUpdate?.(e.target.value)}
+          value={value}
+          className={s.textArea}
+          placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
+        />
+      )
+    }
+
+    return (
+      <Input
+        onChange={e => onUpdate?.(e.target.value)}
+        value={value}
+        defaultValue={defaultValue}
+        placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
+      />
+    )
+  }
+
+  return (
+    <div className={cn('flex min-h-5 items-center gap-1 py-0.5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
+      <div className={cn('w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary', editAlignTop && 'pt-1')}>{label}</div>
+      <div className="flex grow items-center gap-1 text-text-secondary">
+        {valueIcon}
+        {renderContent()}
+      </div>
+    </div>
+  )
+}
+
+export default FieldInfo

web/app/components/datasets/documents/detail/metadata/components/metadata-field-list.tsx

@@ -0,0 +1,88 @@
+'use client'
+import type { FC } from 'react'
+import type { metadataType } from '@/hooks/use-metadata'
+import type { FullDocumentDetail } from '@/models/datasets'
+import { get } from 'es-toolkit/compat'
+import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
+import FieldInfo from './field-info'
+
+const map2Options = (map: Record<string, string>) => {
+  return Object.keys(map).map(key => ({ value: key, name: map[key] }))
+}
+
+function useCategoryMapResolver(mainField: metadataType | '') {
+  const languageMap = useLanguages()
+  const bookCategoryMap = useBookCategories()
+  const personalDocCategoryMap = usePersonalDocCategories()
+  const businessDocCategoryMap = useBusinessDocCategories()
+
+  return (field: string): Record<string, string> => {
+    if (field === 'language')
+      return languageMap
+    if (field === 'category' && mainField === 'book')
+      return bookCategoryMap
+    if (field === 'document_type') {
+      if (mainField === 'personal_document')
+        return personalDocCategoryMap
+      if (mainField === 'business_document')
+        return businessDocCategoryMap
+    }
+    return {}
+  }
+}
+
+type MetadataFieldListProps = {
+  mainField: metadataType | ''
+  canEdit?: boolean
+  metadata?: Record<string, string>
+  docDetail?: FullDocumentDetail
+  onFieldUpdate?: (field: string, value: string) => void
+}
+
+const MetadataFieldList: FC<MetadataFieldListProps> = ({
+  mainField,
+  canEdit = false,
+  metadata,
+  docDetail,
+  onFieldUpdate,
+}) => {
+  const metadataMap = useMetadataMap()
+  const getCategoryMap = useCategoryMapResolver(mainField)
+
+  if (!mainField)
+    return null
+
+  const fieldMap = metadataMap[mainField]?.subFieldsMap
+  const isFixedField = ['originInfo', 'technicalParameters'].includes(mainField)
+  const sourceData = isFixedField ? docDetail : metadata
+
+  const getDisplayValue = (field: string) => {
+    const val = get(sourceData, field, '')
+    if (!val && val !== 0)
+      return '-'
+    if (fieldMap[field]?.inputType === 'select')
+      return getCategoryMap(field)[val]
+    if (fieldMap[field]?.render)
+      return fieldMap[field]?.render?.(val, field === 'hit_count' ? get(sourceData, 'segment_count', 0) as number : undefined)
+    return val
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      {Object.keys(fieldMap).map(field => (
+        <FieldInfo
+          key={fieldMap[field]?.label}
+          label={fieldMap[field]?.label}
+          displayedValue={getDisplayValue(field)}
+          value={get(sourceData, field, '')}
+          inputType={fieldMap[field]?.inputType || 'input'}
+          showEdit={canEdit}
+          onUpdate={val => onFieldUpdate?.(field, val)}
+          selectOptions={map2Options(getCategoryMap(field))}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default MetadataFieldList

web/app/components/datasets/documents/detail/metadata/hooks/use-metadata-state.ts

@@ -0,0 +1,137 @@
+'use client'
+import type { CommonResponse } from '@/models/common'
+import type { DocType, FullDocumentDetail } from '@/models/datasets'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { ToastContext } from '@/app/components/base/toast'
+import { modifyDocMetadata } from '@/service/datasets'
+import { asyncRunSafe } from '@/utils'
+import { useDocumentContext } from '../../context'
+
+type MetadataState = {
+  documentType?: DocType | ''
+  metadata: Record<string, string>
+}
+
+/**
+ * Normalize raw doc_type: treat 'others' as empty string.
+ */
+const normalizeDocType = (rawDocType: string): DocType | '' => {
+  return rawDocType === 'others' ? '' : rawDocType as DocType | ''
+}
+
+type UseMetadataStateOptions = {
+  docDetail?: FullDocumentDetail
+  onUpdate?: () => void
+}
+
+export function useMetadataState({ docDetail, onUpdate }: UseMetadataStateOptions) {
+  const { doc_metadata = {} } = docDetail || {}
+  const rawDocType = docDetail?.doc_type ?? ''
+  const docType = normalizeDocType(rawDocType)
+
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const datasetId = useDocumentContext(s => s.datasetId)
+  const documentId = useDocumentContext(s => s.documentId)
+
+  // If no documentType yet, start in editing + showDocTypes mode
+  const [editStatus, setEditStatus] = useState(!docType)
+  const [metadataParams, setMetadataParams] = useState<MetadataState>(
+    docType
+      ? { documentType: docType, metadata: (doc_metadata || {}) as Record<string, string> }
+      : { metadata: {} },
+  )
+  const [showDocTypes, setShowDocTypes] = useState(!docType)
+  const [tempDocType, setTempDocType] = useState<DocType | ''>('')
+  const [saveLoading, setSaveLoading] = useState(false)
+
+  // Sync local state when the upstream docDetail changes (e.g. after save or navigation).
+  // These setters are intentionally called together to batch-reset multiple pieces
+  // of derived editing state that cannot be expressed as pure derived values.
+  useEffect(() => {
+    if (docDetail?.doc_type) {
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setEditStatus(false)
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setShowDocTypes(false)
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setTempDocType(docType)
+      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+      setMetadataParams({
+        documentType: docType,
+        metadata: (docDetail?.doc_metadata || {}) as Record<string, string>,
+      })
+    }
+  }, [docDetail?.doc_type, docDetail?.doc_metadata, docType])
+
+  const confirmDocType = () => {
+    if (!tempDocType)
+      return
+    setMetadataParams({
+      documentType: tempDocType,
+      // Clear metadata when switching to a different doc type
+      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {},
+    })
+    setEditStatus(true)
+    setShowDocTypes(false)
+  }
+
+  const cancelDocType = () => {
+    setTempDocType(metadataParams.documentType ?? '')
+    setEditStatus(true)
+    setShowDocTypes(false)
+  }
+
+  const enableEdit = () => {
+    setEditStatus(true)
+  }
+
+  const cancelEdit = () => {
+    setMetadataParams({ documentType: docType || '', metadata: { ...(docDetail?.doc_metadata || {}) } })
+    setEditStatus(!docType)
+    if (!docType)
+      setShowDocTypes(true)
+  }
+
+  const saveMetadata = async () => {
+    setSaveLoading(true)
+    const [e] = await asyncRunSafe<CommonResponse>(modifyDocMetadata({
+      datasetId,
+      documentId,
+      body: {
+        doc_type: metadataParams.documentType || docType || '',
+        doc_metadata: metadataParams.metadata,
+      },
+    }) as Promise<CommonResponse>)
+    if (!e)
+      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
+    else
+      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
+    onUpdate?.()
+    setEditStatus(false)
+    setSaveLoading(false)
+  }
+
+  const updateMetadataField = (field: string, value: string) => {
+    setMetadataParams(prev => ({ ...prev, metadata: { ...prev.metadata, [field]: value } }))
+  }
+
+  return {
+    docType,
+    editStatus,
+    showDocTypes,
+    tempDocType,
+    saveLoading,
+    metadataParams,
+    setTempDocType,
+    setShowDocTypes,
+    confirmDocType,
+    cancelDocType,
+    enableEdit,
+    cancelEdit,
+    saveMetadata,
+    updateMetadataField,
+  }
+}

web/app/components/datasets/documents/detail/metadata/index.spec.tsx

@@ -1,7 +1,6 @@
 import type { FullDocumentDetail } from '@/models/datasets'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-
 import Metadata, { FieldInfo } from './index'
 
 // Mock document context
@@ -121,7 +120,6 @@ vi.mock('@/hooks/use-metadata', () => ({
   }),
 }))
 
-// Mock getTextWidthWithCanvas
 vi.mock('@/utils', () => ({
   asyncRunSafe: async (promise: Promise<unknown>) => {
     try {
@@ -135,33 +133,32 @@ vi.mock('@/utils', () => ({
   getTextWidthWithCanvas: () => 100,
 }))
 
+const createMockDocDetail = (overrides = {}): FullDocumentDetail => ({
+  id: 'doc-1',
+  name: 'Test Document',
+  doc_type: 'book',
+  doc_metadata: {
+    title: 'Test Book',
+    author: 'Test Author',
+    language: 'en',
+  },
+  data_source_type: 'upload_file',
+  segment_count: 10,
+  hit_count: 5,
+  ...overrides,
+} as FullDocumentDetail)
+
 describe('Metadata', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  const createMockDocDetail = (overrides = {}): FullDocumentDetail => ({
-    id: 'doc-1',
-    name: 'Test Document',
-    doc_type: 'book',
-    doc_metadata: {
-      title: 'Test Book',
-      author: 'Test Author',
-      language: 'en',
-    },
-    data_source_type: 'upload_file',
-    segment_count: 10,
-    hit_count: 5,
-    ...overrides,
-  } as FullDocumentDetail)
-
   const defaultProps = {
     docDetail: createMockDocDetail(),
     loading: false,
     onUpdate: vi.fn(),
   }
 
-  // Rendering tests
   describe('Rendering', () => {
     it('should render without crashing', () => {
       // Arrange & Act
@@ -191,7 +188,7 @@ describe('Metadata', () => {
       // Arrange & Act
       render(<Metadata {...defaultProps} loading={true} />)
 
-      // Assert - Loading component should be rendered
+      // Assert - Loading component should be rendered, title should not
       expect(screen.queryByText(/metadata\.title/i)).not.toBeInTheDocument()
     })
 
@@ -204,7 +201,7 @@ describe('Metadata', () => {
     })
   })
 
-  // Edit mode tests
+  // Edit mode (tests useMetadataState hook integration)
   describe('Edit Mode', () => {
     it('should enter edit mode when edit button is clicked', () => {
       // Arrange
@@ -303,7 +300,7 @@ describe('Metadata', () => {
     })
   })
 
-  // Document type selection
+  // Document type selection (tests DocTypeSelector sub-component integration)
   describe('Document Type Selection', () => {
     it('should show doc type selection when no doc_type exists', () => {
       // Arrange
@@ -353,13 +350,13 @@ describe('Metadata', () => {
     })
   })
 
-  // Origin info and technical parameters
+  // Fixed fields (tests MetadataFieldList sub-component integration)
   describe('Fixed Fields', () => {
     it('should render origin info fields', () => {
       // Arrange & Act
       render(<Metadata {...defaultProps} />)
 
-      // Assert - Origin info fields should be displayed
+      // Assert
       expect(screen.getByText('Data Source Type')).toBeInTheDocument()
     })
 
@@ -382,7 +379,7 @@ describe('Metadata', () => {
       // Act
       const { container } = render(<Metadata {...defaultProps} docDetail={docDetail} />)
 
-      // Assert - should render without crashing
+      // Assert
       expect(container.firstChild).toBeInTheDocument()
     })
 
@@ -390,7 +387,7 @@ describe('Metadata', () => {
       // Arrange & Act
       const { container } = render(<Metadata {...defaultProps} docDetail={undefined} loading={false} />)
 
-      // Assert - should render without crashing
+      // Assert
       expect(container.firstChild).toBeInTheDocument()
     })
 
@@ -425,7 +422,6 @@ describe('Metadata', () => {
   })
 })
 
-// FieldInfo component tests
 describe('FieldInfo', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -543,3 +539,149 @@ describe('FieldInfo', () => {
     })
   })
 })
+
+// --- useMetadataState hook coverage tests (via component interactions) ---
+describe('useMetadataState coverage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const defaultProps = {
+    docDetail: createMockDocDetail(),
+    loading: false,
+    onUpdate: vi.fn(),
+  }
+
+  describe('cancelDocType', () => {
+    it('should cancel doc type change and return to edit mode', () => {
+      // Arrange
+      render(<Metadata {...defaultProps} />)
+
+      // Enter edit mode → click change to open doc type selector
+      fireEvent.click(screen.getByText(/operation\.edit/i))
+      fireEvent.click(screen.getByText(/operation\.change/i))
+
+      // Now in doc type selector mode — should show cancel button
+      expect(screen.getByText(/operation\.cancel/i)).toBeInTheDocument()
+
+      // Act — cancel the doc type change
+      fireEvent.click(screen.getByText(/operation\.cancel/i))
+
+      // Assert — should be back to edit mode (cancel + save buttons visible)
+      expect(screen.getByText(/operation\.save/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('confirmDocType', () => {
+    it('should confirm same doc type and return to edit mode keeping metadata', () => {
+      // Arrange — useEffect syncs tempDocType='book' from docDetail
+      render(<Metadata {...defaultProps} />)
+
+      // Enter edit mode → click change to open doc type selector
+      fireEvent.click(screen.getByText(/operation\.edit/i))
+      fireEvent.click(screen.getByText(/operation\.change/i))
+
+      // DocTypeSelector shows save/cancel buttons
+      expect(screen.getByText(/metadata\.docTypeChangeTitle/i)).toBeInTheDocument()
+
+      // Act — click save to confirm same doc type (tempDocType='book')
+      fireEvent.click(screen.getByText(/operation\.save/i))
+
+      // Assert — should return to edit mode with metadata fields visible
+      expect(screen.getByText(/operation\.cancel/i)).toBeInTheDocument()
+      expect(screen.getByText(/operation\.save/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('cancelEdit when no docType', () => {
+    it('should show doc type selection when cancel is clicked with doc_type others', () => {
+      // Arrange — doc with 'others' type normalizes to '' internally.
+      // The useEffect sees doc_type='others' (truthy) and syncs state,
+      // so the component initially shows view mode. Enter edit → cancel to trigger cancelEdit.
+      const docDetail = createMockDocDetail({ doc_type: 'others' })
+      render(<Metadata {...defaultProps} docDetail={docDetail} />)
+
+      // 'others' is normalized to '' → useEffect fires (doc_type truthy) → view mode
+      // The rendered type uses default 'book' fallback for display
+      expect(screen.getByText(/operation\.edit/i)).toBeInTheDocument()
+
+      // Enter edit mode
+      fireEvent.click(screen.getByText(/operation\.edit/i))
+      expect(screen.getByText(/operation\.cancel/i)).toBeInTheDocument()
+
+      // Act — cancel edit; internally docType is '' so cancelEdit goes to showDocTypes
+      fireEvent.click(screen.getByText(/operation\.cancel/i))
+
+      // Assert — should show doc type selection since normalized docType was ''
+      expect(screen.getByText(/metadata\.docTypeSelectTitle/i)).toBeInTheDocument()
+    })
+  })
+
+  describe('updateMetadataField', () => {
+    it('should update metadata field value via input', () => {
+      // Arrange
+      render(<Metadata {...defaultProps} />)
+
+      // Enter edit mode
+      fireEvent.click(screen.getByText(/operation\.edit/i))
+
+      // Act — find an input and change its value (Title field)
+      const inputs = screen.getAllByRole('textbox')
+      expect(inputs.length).toBeGreaterThan(0)
+      fireEvent.change(inputs[0], { target: { value: 'Updated Title' } })
+
+      // Assert — the input should have the new value
+      expect(inputs[0]).toHaveValue('Updated Title')
+    })
+  })
+
+  describe('saveMetadata calls modifyDocMetadata with correct body', () => {
+    it('should pass doc_type and doc_metadata in save request', async () => {
+      // Arrange
+      mockModifyDocMetadata.mockResolvedValueOnce({})
+      render(<Metadata {...defaultProps} />)
+
+      // Enter edit mode
+      fireEvent.click(screen.getByText(/operation\.edit/i))
+
+      // Act — save
+      fireEvent.click(screen.getByText(/operation\.save/i))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockModifyDocMetadata).toHaveBeenCalledWith(
+          expect.objectContaining({
+            datasetId: 'test-dataset-id',
+            documentId: 'test-document-id',
+            body: expect.objectContaining({
+              doc_type: 'book',
+            }),
+          }),
+        )
+      })
+    })
+  })
+
+  describe('useEffect sync', () => {
+    it('should handle doc_metadata being null in effect sync', () => {
+      // Arrange — first render with null metadata
+      const { rerender } = render(
+        <Metadata
+          {...defaultProps}
+          docDetail={createMockDocDetail({ doc_metadata: null })}
+        />,
+      )
+
+      // Act — rerender with a different doc_type to trigger useEffect sync
+      rerender(
+        <Metadata
+          {...defaultProps}
+          docDetail={createMockDocDetail({ doc_type: 'paper', doc_metadata: null })}
+        />,
+      )
+
+      // Assert — should render without crashing, showing Paper type
+      expect(screen.getByText('Paper')).toBeInTheDocument()
+    })
+  })
+})

web/app/components/datasets/documents/detail/metadata/index.tsx

@@ -1,422 +1,124 @@
 'use client'
-import type { FC, ReactNode } from 'react'
-import type { inputType, metadataType } from '@/hooks/use-metadata'
-import type { CommonResponse } from '@/models/common'
-import type { DocType, FullDocumentDetail } from '@/models/datasets'
+import type { FC } from 'react'
+import type { FullDocumentDetail } from '@/models/datasets'
 import { PencilIcon } from '@heroicons/react/24/outline'
-import { get } from 'es-toolkit/compat'
-import * as React from 'react'
-import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
-import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
-import Radio from '@/app/components/base/radio'
-import { SimpleSelect } from '@/app/components/base/select'
-import { ToastContext } from '@/app/components/base/toast'
-import Tooltip from '@/app/components/base/tooltip'
-import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
-import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
-import { modifyDocMetadata } from '@/service/datasets'
-import { asyncRunSafe, getTextWidthWithCanvas } from '@/utils'
-import { cn } from '@/utils/classnames'
-import { useDocumentContext } from '../context'
+import { useMetadataMap } from '@/hooks/use-metadata'
+import DocTypeSelector, { DocumentTypeDisplay } from './components/doc-type-selector'
+import MetadataFieldList from './components/metadata-field-list'
+import { useMetadataState } from './hooks/use-metadata-state'
 import s from './style.module.css'
 
-const map2Options = (map: { [key: string]: string }) => {
-  return Object.keys(map).map(key => ({ value: key, name: map[key] }))
-}
+export { default as FieldInfo } from './components/field-info'
 
-type IFieldInfoProps = {
-  label: string
-  value?: string
-  valueIcon?: ReactNode
-  displayedValue?: string
-  defaultValue?: string
-  showEdit?: boolean
-  inputType?: inputType
-  selectOptions?: Array<{ value: string, name: string }>
-  onUpdate?: (v: any) => void
-}
-
-export const FieldInfo: FC<IFieldInfoProps> = ({
-  label,
-  value = '',
-  valueIcon,
-  displayedValue = '',
-  defaultValue,
-  showEdit = false,
-  inputType = 'input',
-  selectOptions = [],
-  onUpdate,
-}) => {
-  const { t } = useTranslation()
-  const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190
-  const editAlignTop = showEdit && inputType === 'textarea'
-  const readAlignTop = !showEdit && textNeedWrap
-
-  const renderContent = () => {
-    if (!showEdit)
-      return displayedValue
-
-    if (inputType === 'select') {
-      return (
-        <SimpleSelect
-          onSelect={({ value }) => onUpdate?.(value as string)}
-          items={selectOptions}
-          defaultValue={value}
-          className={s.select}
-          wrapperClassName={s.selectWrapper}
-          placeholder={`${t('metadata.placeholder.select', { ns: 'datasetDocuments' })}${label}`}
-        />
-      )
-    }
-
-    if (inputType === 'textarea') {
-      return (
-        <AutoHeightTextarea
-          onChange={e => onUpdate?.(e.target.value)}
-          value={value}
-          className={s.textArea}
-          placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
-        />
-      )
-    }
-
-    return (
-      <Input
-        onChange={e => onUpdate?.(e.target.value)}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={`${t('metadata.placeholder.add', { ns: 'datasetDocuments' })}${label}`}
-      />
-    )
-  }
-
-  return (
-    <div className={cn('flex min-h-5 items-center gap-1 py-0.5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
-      <div className={cn('w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary', editAlignTop && 'pt-1')}>{label}</div>
-      <div className="flex grow items-center gap-1 text-text-secondary">
-        {valueIcon}
-        {renderContent()}
-      </div>
-    </div>
-  )
-}
-
-const TypeIcon: FC<{ iconName: string, className?: string }> = ({ iconName, className = '' }) => {
-  return (
-    <div className={cn(s.commonIcon, s[`${iconName}Icon`], className)} />
-  )
-}
-
-const IconButton: FC<{
-  type: DocType
-  isChecked: boolean
-}> = ({ type, isChecked = false }) => {
-  const metadataMap = useMetadataMap()
-
-  return (
-    <Tooltip
-      popupContent={metadataMap[type].text}
-    >
-      <button type="button" className={cn(s.iconWrapper, 'group', isChecked ? s.iconCheck : '')}>
-        <TypeIcon
-          iconName={metadataMap[type].iconName || ''}
-          className={`group-hover:bg-primary-600 ${isChecked ? '!bg-primary-600' : ''}`}
-        />
-      </button>
-    </Tooltip>
-  )
-}
-
-type IMetadataProps = {
+type MetadataProps = {
   docDetail?: FullDocumentDetail
   loading: boolean
   onUpdate: () => void
 }
 
-type MetadataState = {
-  documentType?: DocType | ''
-  metadata: Record<string, string>
-}
-
-const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
-  const { doc_metadata = {} } = docDetail || {}
-  const rawDocType = docDetail?.doc_type ?? ''
-  const doc_type = rawDocType === 'others' ? '' : rawDocType
-
+const Metadata: FC<MetadataProps> = ({ docDetail, loading, onUpdate }) => {
   const { t } = useTranslation()
   const metadataMap = useMetadataMap()
-  const languageMap = useLanguages()
-  const bookCategoryMap = useBookCategories()
-  const personalDocCategoryMap = usePersonalDocCategories()
-  const businessDocCategoryMap = useBusinessDocCategories()
-  const [editStatus, setEditStatus] = useState(!doc_type) // if no documentType, in editing status by default
-  // the initial values are according to the documentType
-  const [metadataParams, setMetadataParams] = useState<MetadataState>(
-    doc_type
-      ? {
-          documentType: doc_type as DocType,
-          metadata: (doc_metadata || {}) as Record<string, string>,
-        }
-      : { metadata: {} },
-  )
-  const [showDocTypes, setShowDocTypes] = useState(!doc_type) // whether show doc types
-  const [tempDocType, setTempDocType] = useState<DocType | ''>('') // for remember icon click
-  const [saveLoading, setSaveLoading] = useState(false)
 
-  const { notify } = useContext(ToastContext)
-  const datasetId = useDocumentContext(s => s.datasetId)
-  const documentId = useDocumentContext(s => s.documentId)
-
-  useEffect(() => {
-    if (docDetail?.doc_type) {
-      setEditStatus(false)
-      setShowDocTypes(false)
-      setTempDocType(doc_type as DocType | '')
-      setMetadataParams({
-        documentType: doc_type as DocType | '',
-        metadata: (docDetail?.doc_metadata || {}) as Record<string, string>,
-      })
-    }
-  }, [docDetail?.doc_type, docDetail?.doc_metadata, doc_type])
-
-  // confirm doc type
-  const confirmDocType = () => {
-    if (!tempDocType)
-      return
-    setMetadataParams({
-      documentType: tempDocType,
-      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {} as Record<string, string>, // change doc type, clear metadata
-    })
-    setEditStatus(true)
-    setShowDocTypes(false)
-  }
-
-  // cancel doc type
-  const cancelDocType = () => {
-    setTempDocType(metadataParams.documentType ?? '')
-    setEditStatus(true)
-    setShowDocTypes(false)
-  }
-
-  // show doc type select
-  const renderSelectDocType = () => {
-    const { documentType } = metadataParams
+  const {
+    docType,
+    editStatus,
+    showDocTypes,
+    tempDocType,
+    saveLoading,
+    metadataParams,
+    setTempDocType,
+    setShowDocTypes,
+    confirmDocType,
+    cancelDocType,
+    enableEdit,
+    cancelEdit,
+    saveMetadata,
+    updateMetadataField,
+  } = useMetadataState({ docDetail, onUpdate })
 
+  if (loading) {
     return (
-      <>
-        {!doc_type && !documentType && (
-          <>
-            <div className={s.desc}>{t('metadata.desc', { ns: 'datasetDocuments' })}</div>
-          </>
-        )}
-        <div className={s.operationWrapper}>
-          {!doc_type && !documentType && (
-            <>
-              <span className={s.title}>{t('metadata.docTypeSelectTitle', { ns: 'datasetDocuments' })}</span>
-            </>
-          )}
-          {documentType && (
-            <>
-              <span className={s.title}>{t('metadata.docTypeChangeTitle', { ns: 'datasetDocuments' })}</span>
-              <span className={s.changeTip}>{t('metadata.docTypeSelectWarning', { ns: 'datasetDocuments' })}</span>
-            </>
-          )}
-          <Radio.Group value={tempDocType ?? documentType ?? ''} onChange={setTempDocType} className={s.radioGroup}>
-            {CUSTOMIZABLE_DOC_TYPES.map((type, index) => {
-              const currValue = tempDocType ?? documentType
-              return (
-                <Radio key={index} value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
-                  <IconButton
-                    type={type}
-                    isChecked={currValue === type}
-                  />
-                </Radio>
-              )
-            })}
-          </Radio.Group>
-          {!doc_type && !documentType && (
-            <Button
-              variant="primary"
-              onClick={confirmDocType}
-              disabled={!tempDocType}
-            >
-              {t('metadata.firstMetaAction', { ns: 'datasetDocuments' })}
-            </Button>
-          )}
-          {documentType && (
-            <div className={s.opBtnWrapper}>
-              <Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} variant="primary">{t('operation.save', { ns: 'common' })}</Button>
-              <Button onClick={cancelDocType} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('operation.cancel', { ns: 'common' })}</Button>
-            </div>
-          )}
-        </div>
-      </>
-    )
-  }
-
-  // show metadata info and edit
-  const renderFieldInfos = ({ mainField = 'book', canEdit }: { mainField?: metadataType | '', canEdit?: boolean }) => {
-    if (!mainField)
-      return null
-    const fieldMap = metadataMap[mainField]?.subFieldsMap
-    const sourceData = ['originInfo', 'technicalParameters'].includes(mainField) ? docDetail : metadataParams.metadata
-
-    const getTargetMap = (field: string) => {
-      if (field === 'language')
-        return languageMap
-      if (field === 'category' && mainField === 'book')
-        return bookCategoryMap
-
-      if (field === 'document_type') {
-        if (mainField === 'personal_document')
-          return personalDocCategoryMap
-        if (mainField === 'business_document')
-          return businessDocCategoryMap
-      }
-      return {} as any
-    }
-
-    const getTargetValue = (field: string) => {
-      const val = get(sourceData, field, '')
-      if (!val && val !== 0)
-        return '-'
-      if (fieldMap[field]?.inputType === 'select')
-        return getTargetMap(field)[val]
-      if (fieldMap[field]?.render)
-        return fieldMap[field]?.render?.(val, field === 'hit_count' ? get(sourceData, 'segment_count', 0) as number : undefined)
-      return val
-    }
-
-    return (
-      <div className="flex flex-col gap-1">
-        {Object.keys(fieldMap).map((field) => {
-          return (
-            <FieldInfo
-              key={fieldMap[field]?.label}
-              label={fieldMap[field]?.label}
-              displayedValue={getTargetValue(field)}
-              value={get(sourceData, field, '')}
-              inputType={fieldMap[field]?.inputType || 'input'}
-              showEdit={canEdit}
-              onUpdate={(val) => {
-                setMetadataParams(pre => ({ ...pre, metadata: { ...pre.metadata, [field]: val } }))
-              }}
-              selectOptions={map2Options(getTargetMap(field))}
-            />
-          )
-        })}
+      <div className={`${s.main} bg-gray-25`}>
+        <Loading type="app" />
       </div>
     )
   }
 
-  const enabledEdit = () => {
-    setEditStatus(true)
-  }
-
-  const onCancel = () => {
-    setMetadataParams({ documentType: doc_type || '', metadata: { ...docDetail?.doc_metadata } })
-    setEditStatus(!doc_type)
-    if (!doc_type)
-      setShowDocTypes(true)
-  }
-
-  const onSave = async () => {
-    setSaveLoading(true)
-    const [e] = await asyncRunSafe<CommonResponse>(modifyDocMetadata({
-      datasetId,
-      documentId,
-      body: {
-        doc_type: metadataParams.documentType || doc_type || '',
-        doc_metadata: metadataParams.metadata,
-      },
-    }) as Promise<CommonResponse>)
-    if (!e)
-      notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
-    else
-      notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
-    onUpdate?.()
-    setEditStatus(false)
-    setSaveLoading(false)
-  }
-
   return (
     <div className={`${s.main} ${editStatus ? 'bg-white' : 'bg-gray-25'}`}>
-      {loading
-        ? (<Loading type="app" />)
-        : (
-            <>
-              <div className={s.titleWrapper}>
-                <span className={s.title}>{t('metadata.title', { ns: 'datasetDocuments' })}</span>
-                {!editStatus
-                  ? (
-                      <Button onClick={enabledEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
-                        <PencilIcon className={s.opIcon} />
-                        {t('operation.edit', { ns: 'common' })}
-                      </Button>
-                    )
-                  : showDocTypes
-                    ? null
-                    : (
-                        <div className={s.opBtnWrapper}>
-                          <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('operation.cancel', { ns: 'common' })}</Button>
-                          <Button
-                            onClick={onSave}
-                            className={`${s.opBtn} ${s.opSaveBtn}`}
-                            variant="primary"
-                            loading={saveLoading}
-                          >
-                            {t('operation.save', { ns: 'common' })}
-                          </Button>
-                        </div>
-                      )}
+      {/* Header: title + action buttons */}
+      <div className={s.titleWrapper}>
+        <span className={s.title}>{t('metadata.title', { ns: 'datasetDocuments' })}</span>
+        {!editStatus
+          ? (
+              <Button onClick={enableEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
+                <PencilIcon className={s.opIcon} />
+                {t('operation.edit', { ns: 'common' })}
+              </Button>
+            )
+          : !showDocTypes && (
+              <div className={s.opBtnWrapper}>
+                <Button onClick={cancelEdit} className={`${s.opBtn} ${s.opCancelBtn}`}>
+                  {t('operation.cancel', { ns: 'common' })}
+                </Button>
+                <Button onClick={saveMetadata} className={`${s.opBtn} ${s.opSaveBtn}`} variant="primary" loading={saveLoading}>
+                  {t('operation.save', { ns: 'common' })}
+                </Button>
               </div>
-              {/* show selected doc type and changing entry */}
-              {!editStatus
-                ? (
-                    <div className={s.documentTypeShow}>
-                      <TypeIcon iconName={metadataMap[doc_type || 'book']?.iconName || ''} className={s.iconShow} />
-                      {metadataMap[doc_type || 'book'].text}
-                    </div>
-                  )
-                : showDocTypes
-                  ? null
-                  : (
-                      <div className={s.documentTypeShow}>
-                        {metadataParams.documentType && (
-                          <>
-                            <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
-                            {metadataMap[metadataParams.documentType || 'book'].text}
-                            {editStatus && (
-                              <div className="ml-1 inline-flex items-center gap-1">
-                                ·
-                                <div
-                                  onClick={() => { setShowDocTypes(true) }}
-                                  className="cursor-pointer hover:text-text-accent"
-                                >
-                                  {t('operation.change', { ns: 'common' })}
-                                </div>
-                              </div>
-                            )}
-                          </>
-                        )}
-                      </div>
-                    )}
-              {(!doc_type && showDocTypes) ? null : <Divider />}
-              {showDocTypes ? renderSelectDocType() : renderFieldInfos({ mainField: metadataParams.documentType, canEdit: editStatus })}
-              {/* show fixed fields */}
-              <Divider />
-              {renderFieldInfos({ mainField: 'originInfo', canEdit: false })}
-              <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
-              <Divider />
-              {renderFieldInfos({ mainField: 'technicalParameters', canEdit: false })}
-            </>
+            )}
+      </div>
+
+      {/* Document type display / selector */}
+      {!editStatus
+        ? <DocumentTypeDisplay displayType={docType} />
+        : showDocTypes
+          ? null
+          : (
+              <DocumentTypeDisplay
+                displayType={metadataParams.documentType || ''}
+                showChangeLink={editStatus}
+                onChangeClick={() => setShowDocTypes(true)}
+              />
+            )}
+
+      {/* Divider between type display and fields (skip when in first-time selection) */}
+      {(!docType && showDocTypes) ? null : <Divider />}
+
+      {/* Doc type selector or editable metadata fields */}
+      {showDocTypes
+        ? (
+            <DocTypeSelector
+              docType={docType}
+              documentType={metadataParams.documentType}
+              tempDocType={tempDocType}
+              onTempDocTypeChange={setTempDocType}
+              onConfirm={confirmDocType}
+              onCancel={cancelDocType}
+            />
+          )
+        : (
+            <MetadataFieldList
+              mainField={metadataParams.documentType || ''}
+              canEdit={editStatus}
+              metadata={metadataParams.metadata}
+              docDetail={docDetail}
+              onFieldUpdate={updateMetadataField}
+            />
           )}
+
+      {/* Fixed fields: origin info */}
+      <Divider />
+      <MetadataFieldList mainField="originInfo" docDetail={docDetail} />
+
+      {/* Fixed fields: technical parameters */}
+      <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
+      <Divider />
+      <MetadataFieldList mainField="technicalParameters" docDetail={docDetail} />
     </div>
   )
 }

web/app/components/header/account-dropdown/index.tsx

@@ -28,6 +28,7 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { env } from '@/env'
 import { useLogout } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 import AccountAbout from '../account-about'
@@ -178,7 +179,7 @@ export default function AppSelector() {
                           </Link>
                         </MenuItem>
                         {
-                          document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
+                          env.NEXT_PUBLIC_SITE_ABOUT !== 'hide' && (
                             <MenuItem>
                               <div
                                 className={cn(itemClassName, 'justify-between', 'data-[active]:bg-state-base-hover')}

web/app/components/plugins/marketplace/hydration-server.spec.tsx

@@ -0,0 +1,134 @@
+import type { SearchParams } from 'nuqs'
+import type { ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const {
+  mockDehydrate,
+  mockGetCollectionsParams,
+  mockGetMarketplaceCollectionsAndPlugins,
+  mockGetMarketplaceListFilterType,
+  mockGetMarketplacePlugins,
+  mockPrefetchInfiniteQuery,
+  mockPrefetchQuery,
+} = vi.hoisted(() => ({
+  mockDehydrate: vi.fn(() => ({ dehydrated: true })),
+  mockGetCollectionsParams: vi.fn((category: string) => ({ category })),
+  mockGetMarketplaceCollectionsAndPlugins: vi.fn(async () => ({ marketplaceCollections: [], marketplaceCollectionPluginsMap: {} })),
+  mockGetMarketplaceListFilterType: vi.fn((category: string) => (category === 'bundle' ? 'bundle' : undefined)),
+  mockGetMarketplacePlugins: vi.fn(async () => ({ plugins: [], total: 0, page: 1, page_size: 40 })),
+  mockPrefetchInfiniteQuery: vi.fn(async (options: {
+    queryFn: (context: { pageParam: number, signal: AbortSignal }) => Promise<unknown>
+  }) => options.queryFn({ pageParam: 1, signal: new AbortController().signal })),
+  mockPrefetchQuery: vi.fn(async (options: { queryFn: () => Promise<unknown> }) => options.queryFn()),
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+  dehydrate: mockDehydrate,
+  HydrationBoundary: ({ children }: { children: ReactNode }) => <>{children}</>,
+}))
+
+vi.mock('@/context/query-client-server', () => ({
+  getQueryClientServer: () => ({
+    prefetchQuery: mockPrefetchQuery,
+    prefetchInfiniteQuery: mockPrefetchInfiniteQuery,
+  }),
+}))
+
+vi.mock('@/service/client', () => ({
+  marketplaceQuery: {
+    collections: {
+      queryKey: vi.fn((input: unknown) => ['collections', input]),
+    },
+    searchAdvanced: {
+      queryKey: vi.fn((input: unknown) => ['searchAdvanced', input]),
+    },
+  },
+}))
+
+vi.mock('./utils', () => ({
+  getCollectionsParams: mockGetCollectionsParams,
+  getMarketplaceCollectionsAndPlugins: mockGetMarketplaceCollectionsAndPlugins,
+  getMarketplaceListFilterType: mockGetMarketplaceListFilterType,
+  getMarketplacePlugins: mockGetMarketplacePlugins,
+}))
+
+const renderHydration = async (searchParams?: SearchParams) => {
+  const { HydrateQueryClient } = await import('./hydration-server')
+  return HydrateQueryClient({
+    searchParams: searchParams ? Promise.resolve(searchParams) : undefined,
+    children: <div>children</div>,
+  })
+}
+
+describe('HydrateQueryClient', () => {
+  beforeEach(() => {
+    mockDehydrate.mockClear()
+    mockGetCollectionsParams.mockClear()
+    mockGetMarketplaceCollectionsAndPlugins.mockClear()
+    mockGetMarketplaceListFilterType.mockClear()
+    mockGetMarketplacePlugins.mockClear()
+    mockPrefetchInfiniteQuery.mockClear()
+    mockPrefetchQuery.mockClear()
+  })
+
+  it('should prefetch collections query for default non-search mode', async () => {
+    await renderHydration({ category: 'all' })
+
+    expect(mockPrefetchQuery).toHaveBeenCalledTimes(1)
+    expect(mockPrefetchInfiniteQuery).not.toHaveBeenCalled()
+    expect(mockGetCollectionsParams).toHaveBeenCalledWith('all')
+    expect(mockGetMarketplaceCollectionsAndPlugins).toHaveBeenCalledTimes(1)
+    expect(mockGetMarketplacePlugins).not.toHaveBeenCalled()
+    expect(mockDehydrate).toHaveBeenCalledTimes(1)
+  })
+
+  it('should prefetch searchAdvanced query when query text exists', async () => {
+    await renderHydration({ category: 'all', q: 'search-term' })
+
+    expect(mockPrefetchQuery).not.toHaveBeenCalled()
+    expect(mockPrefetchInfiniteQuery).toHaveBeenCalledTimes(1)
+    expect(mockGetMarketplaceCollectionsAndPlugins).not.toHaveBeenCalled()
+    expect(mockGetMarketplacePlugins).toHaveBeenCalledWith(
+      {
+        query: 'search-term',
+        category: undefined,
+        tags: [],
+        sort_by: 'install_count',
+        sort_order: 'DESC',
+        type: undefined,
+      },
+      1,
+      expect.any(AbortSignal),
+    )
+    expect(mockDehydrate).toHaveBeenCalledTimes(1)
+  })
+
+  it('should prefetch searchAdvanced query for non-collection category', async () => {
+    await renderHydration({ category: 'model' })
+
+    expect(mockPrefetchQuery).not.toHaveBeenCalled()
+    expect(mockPrefetchInfiniteQuery).toHaveBeenCalledTimes(1)
+    expect(mockGetMarketplaceCollectionsAndPlugins).not.toHaveBeenCalled()
+    expect(mockGetMarketplaceListFilterType).toHaveBeenCalledWith('model')
+    expect(mockGetMarketplacePlugins).toHaveBeenCalledWith(
+      {
+        query: '',
+        category: 'model',
+        tags: [],
+        sort_by: 'install_count',
+        sort_order: 'DESC',
+        type: undefined,
+      },
+      1,
+      expect.any(AbortSignal),
+    )
+  })
+
+  it('should skip prefetch when search params are missing', async () => {
+    await renderHydration()
+
+    expect(mockPrefetchQuery).not.toHaveBeenCalled()
+    expect(mockPrefetchInfiniteQuery).not.toHaveBeenCalled()
+    expect(mockDehydrate).not.toHaveBeenCalled()
+  })
+})

web/app/components/plugins/marketplace/hydration-server.tsx

@@ -1,11 +1,17 @@
 import type { SearchParams } from 'nuqs'
+import type { PluginsSearchParams } from './types'
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { createLoader } from 'nuqs/server'
 import { getQueryClientServer } from '@/context/query-client-server'
 import { marketplaceQuery } from '@/service/client'
-import { PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
+import { DEFAULT_SORT, PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
 import { marketplaceSearchParamsParsers } from './search-params'
-import { getCollectionsParams, getMarketplaceCollectionsAndPlugins } from './utils'
+import {
+  getCollectionsParams,
+  getMarketplaceCollectionsAndPlugins,
+  getMarketplaceListFilterType,
+  getMarketplacePlugins,
+} from './utils'
 
 // The server side logic should move to marketplace's codebase so that we can get rid of Next.js
 
@@ -13,19 +19,49 @@ async function getDehydratedState(searchParams?: Promise<SearchParams>) {
   if (!searchParams) {
     return
   }
+
   const loadSearchParams = createLoader(marketplaceSearchParamsParsers)
   const params = await loadSearchParams(searchParams)
+  const queryClient = getQueryClientServer()
+  const isSearchMode = !!params.q
+    || params.tags.length > 0
+    || !PLUGIN_CATEGORY_WITH_COLLECTIONS.has(params.category)
+  const prefetchTasks: Array<Promise<unknown>> = []
 
-  if (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(params.category)) {
+  if (!isSearchMode && PLUGIN_CATEGORY_WITH_COLLECTIONS.has(params.category)) {
+    prefetchTasks.push(queryClient.prefetchQuery({
+      queryKey: marketplaceQuery.collections.queryKey({ input: { query: getCollectionsParams(params.category) } }),
+      queryFn: () => getMarketplaceCollectionsAndPlugins(getCollectionsParams(params.category)),
+    }))
+  }
+
+  if (isSearchMode) {
+    const queryParams: PluginsSearchParams = {
+      query: params.q,
+      category: params.category === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : params.category,
+      tags: params.tags,
+      sort_by: DEFAULT_SORT.sortBy,
+      sort_order: DEFAULT_SORT.sortOrder,
+      type: getMarketplaceListFilterType(params.category),
+    }
+
+    prefetchTasks.push(queryClient.prefetchInfiniteQuery({
+      queryKey: marketplaceQuery.searchAdvanced.queryKey({
+        input: {
+          body: queryParams,
+          params: { kind: queryParams.type === 'bundle' ? 'bundles' : 'plugins' },
+        },
+      }),
+      queryFn: ({ pageParam = 1, signal }) => getMarketplacePlugins(queryParams, Number(pageParam), signal),
+      initialPageParam: 1,
+    }))
+  }
+
+  if (!prefetchTasks.length) {
     return
   }
 
-  const queryClient = getQueryClientServer()
-
-  await queryClient.prefetchQuery({
-    queryKey: marketplaceQuery.collections.queryKey({ input: { query: getCollectionsParams(params.category) } }),
-    queryFn: () => getMarketplaceCollectionsAndPlugins(getCollectionsParams(params.category)),
-  })
+  await Promise.all(prefetchTasks)
   return dehydrate(queryClient)
 }
 

web/app/components/plugins/marketplace/query.ts

@@ -4,12 +4,18 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 import { marketplaceQuery } from '@/service/client'
 import { getMarketplaceCollectionsAndPlugins, getMarketplacePlugins } from './utils'
 
+type CollectionsQueryOptions = {
+  enabled?: boolean
+}
+
 export function useMarketplaceCollectionsAndPlugins(
   collectionsParams: MarketPlaceInputs['collections']['query'],
+  options?: CollectionsQueryOptions,
 ) {
   return useQuery({
     queryKey: marketplaceQuery.collections.queryKey({ input: { query: collectionsParams } }),
     queryFn: ({ signal }) => getMarketplaceCollectionsAndPlugins(collectionsParams, { signal }),
+    enabled: options?.enabled ?? true,
   })
 }
 

web/app/components/plugins/marketplace/search-params.ts

@@ -3,7 +3,7 @@ import { parseAsArrayOf, parseAsString, parseAsStringEnum } from 'nuqs/server'
 import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
 
 export const marketplaceSearchParamsParsers = {
-  category: parseAsStringEnum<ActivePluginType>(Object.values(PLUGIN_TYPE_SEARCH_MAP) as ActivePluginType[]).withDefault('all').withOptions({ history: 'replace', clearOnDefault: false }),
+  category: parseAsStringEnum<ActivePluginType>(Object.values(PLUGIN_TYPE_SEARCH_MAP) as ActivePluginType[]).withDefault('all').withOptions({ history: 'replace' }),
   q: parseAsString.withDefault('').withOptions({ history: 'replace' }),
   tags: parseAsArrayOf(parseAsString).withDefault([]).withOptions({ history: 'replace' }),
 }

web/app/components/plugins/marketplace/state.ts

@@ -2,7 +2,7 @@ import type { PluginsSearchParams } from './types'
 import { useDebounce } from 'ahooks'
 import { useCallback, useMemo } from 'react'
 import { useActivePluginType, useFilterPluginTags, useMarketplaceSearchMode, useMarketplaceSortValue, useSearchPluginText } from './atoms'
-import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
+import { PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
 import { useMarketplaceContainerScroll } from './hooks'
 import { useMarketplaceCollectionsAndPlugins, useMarketplacePlugins } from './query'
 import { getCollectionsParams, getMarketplaceListFilterType } from './utils'
@@ -12,13 +12,16 @@ export function useMarketplaceData() {
   const searchPluginText = useDebounce(searchPluginTextOriginal, { wait: 500 })
   const [filterPluginTags] = useFilterPluginTags()
   const [activePluginType] = useActivePluginType()
+  const isSearchMode = useMarketplaceSearchMode()
 
   const collectionsQuery = useMarketplaceCollectionsAndPlugins(
     getCollectionsParams(activePluginType),
+    {
+      enabled: !isSearchMode && PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginType),
+    },
   )
 
   const sort = useMarketplaceSortValue()
-  const isSearchMode = useMarketplaceSearchMode()
   const queryParams = useMemo((): PluginsSearchParams | undefined => {
     if (!isSearchMode)
       return undefined
@@ -49,7 +52,7 @@ export function useMarketplaceData() {
     plugins: pluginsQuery.data?.pages.flatMap(page => page.plugins),
     pluginsTotal: pluginsQuery.data?.pages[0]?.total,
     page: pluginsQuery.data?.pages.length || 1,
-    isLoading: collectionsQuery.isLoading || pluginsQuery.isLoading,
+    isLoading: (isSearchMode ? false : collectionsQuery.isLoading) || pluginsQuery.isLoading,
     isFetchingNextPage,
   }
 }

web/app/components/provider/serwist.tsx

@@ -3,6 +3,7 @@
 import { SerwistProvider } from '@serwist/turbopack/react'
 import { useEffect } from 'react'
 import { IS_DEV } from '@/config'
+import { env } from '@/env'
 import { isClient } from '@/utils/client'
 
 export function PWAProvider({ children }: { children: React.ReactNode }) {
@@ -10,7 +11,7 @@ export function PWAProvider({ children }: { children: React.ReactNode }) {
     return <DisabledPWAProvider>{children}</DisabledPWAProvider>
   }
 
-  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+  const basePath = env.NEXT_PUBLIC_BASE_PATH
   const swUrl = `${basePath}/serwist/sw.js`
 
   return (

web/app/components/rag-pipeline/components/panel/input-field/editor/form/schema.ts

@@ -1,6 +1,6 @@
 import type { TFunction } from 'i18next'
 import type { SchemaOptions } from './types'
-import { z } from 'zod'
+import * as z from 'zod'
 import { InputTypeEnum } from '@/app/components/base/form/components/field/input-type-select/types'
 import { MAX_VAR_KEY_LENGTH } from '@/config'
 import { PipelineInputVarType } from '@/models/pipeline'

web/app/components/rag-pipeline/components/update-dsl-modal.spec.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react'
-import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { DSLImportStatus } from '@/models/app'
 import UpdateDSLModal from './update-dsl-modal'
 
@@ -145,11 +145,6 @@ vi.mock('@/app/components/workflow/constants', () => ({
   WORKFLOW_DATA_UPDATE: 'WORKFLOW_DATA_UPDATE',
 }))
 
-afterEach(() => {
-  cleanup()
-  vi.clearAllMocks()
-})
-
 describe('UpdateDSLModal', () => {
   const mockOnCancel = vi.fn()
   const mockOnBackup = vi.fn()

web/app/components/rag-pipeline/components/update-dsl-modal.tsx

@@ -1,40 +1,17 @@
 'use client'
 
-import type { MouseEventHandler } from 'react'
 import {
   RiAlertFill,
   RiCloseLine,
   RiFileDownloadLine,
 } from '@remixicon/react'
-import {
-  memo,
-  useCallback,
-  useRef,
-  useState,
-} from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import { ToastContext } from '@/app/components/base/toast'
-import { WORKFLOW_DATA_UPDATE } from '@/app/components/workflow/constants'
-import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
-import { useWorkflowStore } from '@/app/components/workflow/store'
-import {
-  initialEdges,
-  initialNodes,
-} from '@/app/components/workflow/utils'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
-import {
-  DSLImportMode,
-  DSLImportStatus,
-} from '@/models/app'
-import {
-  useImportPipelineDSL,
-  useImportPipelineDSLConfirm,
-} from '@/service/use-pipeline'
-import { fetchWorkflowDraft } from '@/service/workflow'
+import { useUpdateDSLModal } from '../hooks/use-update-dsl-modal'
+import VersionMismatchModal from './version-mismatch-modal'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -48,146 +25,17 @@ const UpdateDSLModal = ({
   onImport,
 }: UpdateDSLModalProps) => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-  const [currentFile, setDSLFile] = useState<File>()
-  const [fileContent, setFileContent] = useState<string>()
-  const [loading, setLoading] = useState(false)
-  const { eventEmitter } = useEventEmitterContextContext()
-  const [show, setShow] = useState(true)
-  const [showErrorModal, setShowErrorModal] = useState(false)
-  const [versions, setVersions] = useState<{ importedVersion: string, systemVersion: string }>()
-  const [importId, setImportId] = useState<string>()
-  const { handleCheckPluginDependencies } = usePluginDependencies()
-  const { mutateAsync: importDSL } = useImportPipelineDSL()
-  const { mutateAsync: importDSLConfirm } = useImportPipelineDSLConfirm()
-  const workflowStore = useWorkflowStore()
-
-  const readFile = (file: File) => {
-    const reader = new FileReader()
-    reader.onload = function (event) {
-      const content = event.target?.result
-      setFileContent(content as string)
-    }
-    reader.readAsText(file)
-  }
-
-  const handleFile = (file?: File) => {
-    setDSLFile(file)
-    if (file)
-      readFile(file)
-    if (!file)
-      setFileContent('')
-  }
-
-  const handleWorkflowUpdate = useCallback(async (pipelineId: string) => {
-    const {
-      graph,
-      hash,
-      rag_pipeline_variables,
-    } = await fetchWorkflowDraft(`/rag/pipelines/${pipelineId}/workflows/draft`)
-
-    const { nodes, edges, viewport } = graph
-
-    eventEmitter?.emit({
-      type: WORKFLOW_DATA_UPDATE,
-      payload: {
-        nodes: initialNodes(nodes, edges),
-        edges: initialEdges(edges, nodes),
-        viewport,
-        hash,
-        rag_pipeline_variables: rag_pipeline_variables || [],
-      },
-    } as any)
-  }, [eventEmitter])
-
-  const isCreatingRef = useRef(false)
-  const handleImport: MouseEventHandler = useCallback(async () => {
-    const { pipelineId } = workflowStore.getState()
-    if (isCreatingRef.current)
-      return
-    isCreatingRef.current = true
-    if (!currentFile)
-      return
-    try {
-      if (pipelineId && fileContent) {
-        setLoading(true)
-        const response = await importDSL({ mode: DSLImportMode.YAML_CONTENT, yaml_content: fileContent, pipeline_id: pipelineId })
-        const { id, status, pipeline_id, imported_dsl_version, current_dsl_version } = response
-
-        if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
-          if (!pipeline_id) {
-            notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-            return
-          }
-          handleWorkflowUpdate(pipeline_id)
-          if (onImport)
-            onImport()
-          notify({
-            type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
-            message: t(status === DSLImportStatus.COMPLETED ? 'common.importSuccess' : 'common.importWarning', { ns: 'workflow' }),
-            children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('common.importWarningDetails', { ns: 'workflow' }),
-          })
-          await handleCheckPluginDependencies(pipeline_id, true)
-          setLoading(false)
-          onCancel()
-        }
-        else if (status === DSLImportStatus.PENDING) {
-          setShow(false)
-          setTimeout(() => {
-            setShowErrorModal(true)
-          }, 300)
-          setVersions({
-            importedVersion: imported_dsl_version ?? '',
-            systemVersion: current_dsl_version ?? '',
-          })
-          setImportId(id)
-        }
-        else {
-          setLoading(false)
-          notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-        }
-      }
-    }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
-      setLoading(false)
-      notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-    }
-    isCreatingRef.current = false
-  }, [currentFile, fileContent, onCancel, notify, t, onImport, handleWorkflowUpdate, handleCheckPluginDependencies, workflowStore, importDSL])
-
-  const onUpdateDSLConfirm: MouseEventHandler = async () => {
-    try {
-      if (!importId)
-        return
-      const response = await importDSLConfirm(importId)
-
-      const { status, pipeline_id } = response
-
-      if (status === DSLImportStatus.COMPLETED) {
-        if (!pipeline_id) {
-          notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-          return
-        }
-        handleWorkflowUpdate(pipeline_id)
-        await handleCheckPluginDependencies(pipeline_id, true)
-        if (onImport)
-          onImport()
-        notify({ type: 'success', message: t('common.importSuccess', { ns: 'workflow' }) })
-        setLoading(false)
-        onCancel()
-      }
-      else if (status === DSLImportStatus.FAILED) {
-        setLoading(false)
-        notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-      }
-    }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
-      setLoading(false)
-      notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
-    }
-  }
+  const {
+    currentFile,
+    handleFile,
+    show,
+    showErrorModal,
+    setShowErrorModal,
+    loading,
+    versions,
+    handleImport,
+    onUpdateDSLConfirm,
+  } = useUpdateDSLModal({ onCancel, onImport })
 
   return (
     <>
@@ -250,32 +98,12 @@ const UpdateDSLModal = ({
           </Button>
         </div>
       </Modal>
-      <Modal
+      <VersionMismatchModal
         isShow={showErrorModal}
+        versions={versions}
         onClose={() => setShowErrorModal(false)}
-        className="w-[480px]"
-      >
-        <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="system-md-regular flex grow flex-col text-text-secondary">
-            <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
-            <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
-            <br />
-            <div>
-              {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
-              <span className="system-md-medium">{versions?.importedVersion}</span>
-            </div>
-            <div>
-              {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
-              <span className="system-md-medium">{versions?.systemVersion}</span>
-            </div>
-          </div>
-        </div>
-        <div className="flex items-start justify-end gap-2 self-stretch pt-6">
-          <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button variant="primary" destructive onClick={onUpdateDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
-        </div>
-      </Modal>
+        onConfirm={onUpdateDSLConfirm}
+      />
     </>
   )
 }

web/app/components/rag-pipeline/components/version-mismatch-modal.spec.tsx

@@ -0,0 +1,117 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import VersionMismatchModal from './version-mismatch-modal'
+
+describe('VersionMismatchModal', () => {
+  const mockOnClose = vi.fn()
+  const mockOnConfirm = vi.fn()
+
+  const defaultVersions = {
+    importedVersion: '0.8.0',
+    systemVersion: '1.0.0',
+  }
+
+  const defaultProps = {
+    isShow: true,
+    versions: defaultVersions,
+    onClose: mockOnClose,
+    onConfirm: mockOnConfirm,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('rendering', () => {
+    it('should render dialog when isShow is true', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('should not render dialog when isShow is false', () => {
+      render(<VersionMismatchModal {...defaultProps} isShow={false} />)
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+
+    it('should render error title', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      expect(screen.getByText('app.newApp.appCreateDSLErrorTitle')).toBeInTheDocument()
+    })
+
+    it('should render all error description parts', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      expect(screen.getByText('app.newApp.appCreateDSLErrorPart1')).toBeInTheDocument()
+      expect(screen.getByText('app.newApp.appCreateDSLErrorPart2')).toBeInTheDocument()
+      expect(screen.getByText('app.newApp.appCreateDSLErrorPart3')).toBeInTheDocument()
+      expect(screen.getByText('app.newApp.appCreateDSLErrorPart4')).toBeInTheDocument()
+    })
+
+    it('should display imported and system version numbers', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      expect(screen.getByText('0.8.0')).toBeInTheDocument()
+      expect(screen.getByText('1.0.0')).toBeInTheDocument()
+    })
+
+    it('should render cancel and confirm buttons', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      expect(screen.getByRole('button', { name: /app\.newApp\.Cancel/ })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /app\.newApp\.Confirm/ })).toBeInTheDocument()
+    })
+  })
+
+  describe('user interactions', () => {
+    it('should call onClose when cancel button is clicked', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      fireEvent.click(screen.getByRole('button', { name: /app\.newApp\.Cancel/ }))
+
+      expect(mockOnClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onConfirm when confirm button is clicked', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      fireEvent.click(screen.getByRole('button', { name: /app\.newApp\.Confirm/ }))
+
+      expect(mockOnConfirm).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('button variants', () => {
+    it('should render cancel button with secondary variant', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      const cancelBtn = screen.getByRole('button', { name: /app\.newApp\.Cancel/ })
+      expect(cancelBtn).toHaveClass('btn-secondary')
+    })
+
+    it('should render confirm button with primary destructive variant', () => {
+      render(<VersionMismatchModal {...defaultProps} />)
+
+      const confirmBtn = screen.getByRole('button', { name: /app\.newApp\.Confirm/ })
+      expect(confirmBtn).toHaveClass('btn-primary')
+      expect(confirmBtn).toHaveClass('btn-destructive')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle undefined versions gracefully', () => {
+      render(<VersionMismatchModal {...defaultProps} versions={undefined} />)
+
+      expect(screen.getByText('app.newApp.appCreateDSLErrorTitle')).toBeInTheDocument()
+    })
+
+    it('should handle empty version strings', () => {
+      const emptyVersions = { importedVersion: '', systemVersion: '' }
+      render(<VersionMismatchModal {...defaultProps} versions={emptyVersions} />)
+
+      expect(screen.getByText('app.newApp.appCreateDSLErrorTitle')).toBeInTheDocument()
+    })
+  })
+})

web/app/components/rag-pipeline/components/version-mismatch-modal.tsx

@@ -0,0 +1,54 @@
+import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Modal from '@/app/components/base/modal'
+
+type VersionMismatchModalProps = {
+  isShow: boolean
+  versions?: {
+    importedVersion: string
+    systemVersion: string
+  }
+  onClose: () => void
+  onConfirm: MouseEventHandler
+}
+
+const VersionMismatchModal = ({
+  isShow,
+  versions,
+  onClose,
+  onConfirm,
+}: VersionMismatchModalProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      isShow={isShow}
+      onClose={onClose}
+      className="w-[480px]"
+    >
+      <div className="flex flex-col items-start gap-2 self-stretch pb-4">
+        <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+        <div className="system-md-regular flex grow flex-col text-text-secondary">
+          <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
+          <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
+          <br />
+          <div>
+            {t('newApp.appCreateDSLErrorPart3', { ns: 'app' })}
+            <span className="system-md-medium">{versions?.importedVersion}</span>
+          </div>
+          <div>
+            {t('newApp.appCreateDSLErrorPart4', { ns: 'app' })}
+            <span className="system-md-medium">{versions?.systemVersion}</span>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-start justify-end gap-2 self-stretch pt-6">
+        <Button variant="secondary" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
+        <Button variant="primary" destructive onClick={onConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default VersionMismatchModal

web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.spec.ts

@@ -68,23 +68,20 @@ vi.mock('@/config', () => ({
   API_PREFIX: '/api',
 }))
 
+// Mock postWithKeepalive from service/fetch
+const mockPostWithKeepalive = vi.fn()
+vi.mock('@/service/fetch', () => ({
+  postWithKeepalive: (...args: unknown[]) => mockPostWithKeepalive(...args),
+}))
+
 // ============================================================================
 // Tests
 // ============================================================================
 
 describe('useNodesSyncDraft', () => {
-  const mockSendBeacon = vi.fn()
-
   beforeEach(() => {
     vi.clearAllMocks()
 
-    // Setup navigator.sendBeacon mock
-    Object.defineProperty(navigator, 'sendBeacon', {
-      value: mockSendBeacon,
-      writable: true,
-      configurable: true,
-    })
-
     // Default store state
     mockStoreGetState.mockReturnValue({
       getNodes: mockGetNodes,
@@ -134,7 +131,7 @@ describe('useNodesSyncDraft', () => {
   })
 
   describe('syncWorkflowDraftWhenPageClose', () => {
-    it('should not call sendBeacon when nodes are read only', () => {
+    it('should not call postWithKeepalive when nodes are read only', () => {
       mockGetNodesReadOnly.mockReturnValue(true)
 
       const { result } = renderHook(() => useNodesSyncDraft())
@@ -143,10 +140,10 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockSendBeacon).not.toHaveBeenCalled()
+      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
     })
 
-    it('should call sendBeacon with correct URL and params', () => {
+    it('should call postWithKeepalive with correct URL and params', () => {
       mockGetNodesReadOnly.mockReturnValue(false)
       mockGetNodes.mockReturnValue([
         { id: 'node-1', data: { type: 'start' }, position: { x: 0, y: 0 } },
@@ -158,13 +155,16 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockSendBeacon).toHaveBeenCalledWith(
+      expect(mockPostWithKeepalive).toHaveBeenCalledWith(
         '/api/rag/pipelines/test-pipeline-id/workflows/draft',
-        expect.any(String),
+        expect.objectContaining({
+          graph: expect.any(Object),
+          hash: 'test-hash',
+        }),
       )
     })
 
-    it('should not call sendBeacon when pipelineId is missing', () => {
+    it('should not call postWithKeepalive when pipelineId is missing', () => {
       mockWorkflowStoreGetState.mockReturnValue({
         pipelineId: undefined,
         environmentVariables: [],
@@ -178,10 +178,10 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockSendBeacon).not.toHaveBeenCalled()
+      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
     })
 
-    it('should not call sendBeacon when nodes array is empty', () => {
+    it('should not call postWithKeepalive when nodes array is empty', () => {
       mockGetNodes.mockReturnValue([])
 
       const { result } = renderHook(() => useNodesSyncDraft())
@@ -190,7 +190,7 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockSendBeacon).not.toHaveBeenCalled()
+      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
     })
 
     it('should filter out temp nodes', () => {
@@ -204,8 +204,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      // Should not call sendBeacon because after filtering temp nodes, array is empty
-      expect(mockSendBeacon).not.toHaveBeenCalled()
+      // Should not call postWithKeepalive because after filtering temp nodes, array is empty
+      expect(mockPostWithKeepalive).not.toHaveBeenCalled()
     })
 
     it('should remove underscore-prefixed data keys from nodes', () => {
@@ -219,9 +219,9 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      expect(mockSendBeacon).toHaveBeenCalled()
-      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
-      expect(sentData.graph.nodes[0].data._privateData).toBeUndefined()
+      expect(mockPostWithKeepalive).toHaveBeenCalled()
+      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
+      expect(sentParams.graph.nodes[0].data._privateData).toBeUndefined()
     })
   })
 
@@ -395,8 +395,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
-      expect(sentData.graph.viewport).toEqual({ x: 100, y: 200, zoom: 1.5 })
+      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
+      expect(sentParams.graph.viewport).toEqual({ x: 100, y: 200, zoom: 1.5 })
     })
 
     it('should include environment variables in params', () => {
@@ -418,8 +418,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
-      expect(sentData.environment_variables).toEqual([{ key: 'API_KEY', value: 'secret' }])
+      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
+      expect(sentParams.environment_variables).toEqual([{ key: 'API_KEY', value: 'secret' }])
     })
 
     it('should include rag pipeline variables in params', () => {
@@ -441,8 +441,8 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
-      expect(sentData.rag_pipeline_variables).toEqual([{ variable: 'input', type: 'text-input' }])
+      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
+      expect(sentParams.rag_pipeline_variables).toEqual([{ variable: 'input', type: 'text-input' }])
     })
 
     it('should remove underscore-prefixed keys from edges', () => {
@@ -461,9 +461,9 @@ describe('useNodesSyncDraft', () => {
         result.current.syncWorkflowDraftWhenPageClose()
       })
 
-      const sentData = JSON.parse(mockSendBeacon.mock.calls[0][1])
-      expect(sentData.graph.edges[0].data._hidden).toBeUndefined()
-      expect(sentData.graph.edges[0].data.visible).toBe(false)
+      const sentParams = mockPostWithKeepalive.mock.calls[0][1]
+      expect(sentParams.graph.edges[0].data._hidden).toBeUndefined()
+      expect(sentParams.graph.edges[0].data.visible).toBe(false)
     })
   })
 })

web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts

@@ -9,6 +9,7 @@ import {
   useWorkflowStore,
 } from '@/app/components/workflow/store'
 import { API_PREFIX } from '@/config'
+import { postWithKeepalive } from '@/service/fetch'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { usePipelineRefreshDraft } from '.'
 
@@ -76,12 +77,8 @@ export const useNodesSyncDraft = () => {
       return
     const postParams = getPostParams()
 
-    if (postParams) {
-      navigator.sendBeacon(
-        `${API_PREFIX}${postParams.url}`,
-        JSON.stringify(postParams.params),
-      )
-    }
+    if (postParams)
+      postWithKeepalive(`${API_PREFIX}${postParams.url}`, postParams.params)
   }, [getPostParams, getNodesReadOnly])
 
   const performSync = useCallback(async (

web/app/components/rag-pipeline/hooks/use-update-dsl-modal.spec.ts

@@ -0,0 +1,551 @@
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DSLImportMode, DSLImportStatus } from '@/models/app'
+import { useUpdateDSLModal } from './use-update-dsl-modal'
+
+// --- FileReader stub ---
+class MockFileReader {
+  onload: ((this: FileReader, event: ProgressEvent<FileReader>) => void) | null = null
+
+  readAsText(_file: Blob) {
+    const event = { target: { result: 'test content' } } as unknown as ProgressEvent<FileReader>
+    this.onload?.call(this as unknown as FileReader, event)
+  }
+}
+vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
+
+// --- Module-level mock functions ---
+const mockNotify = vi.fn()
+const mockEmit = vi.fn()
+const mockImportDSL = vi.fn()
+const mockImportDSLConfirm = vi.fn()
+const mockHandleCheckPluginDependencies = vi.fn()
+
+// --- Mocks ---
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('use-context-selector', () => ({
+  useContext: () => ({ notify: mockNotify }),
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  ToastContext: {},
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: () => ({
+    eventEmitter: { emit: mockEmit },
+  }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => ({ pipelineId: 'test-pipeline-id' }),
+  }),
+}))
+
+vi.mock('@/app/components/workflow/utils', () => ({
+  initialNodes: (nodes: unknown[]) => nodes,
+  initialEdges: (edges: unknown[]) => edges,
+}))
+
+vi.mock('@/app/components/workflow/constants', () => ({
+  WORKFLOW_DATA_UPDATE: 'WORKFLOW_DATA_UPDATE',
+}))
+
+vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
+  usePluginDependencies: () => ({
+    handleCheckPluginDependencies: mockHandleCheckPluginDependencies,
+  }),
+}))
+
+vi.mock('@/service/use-pipeline', () => ({
+  useImportPipelineDSL: () => ({ mutateAsync: mockImportDSL }),
+  useImportPipelineDSLConfirm: () => ({ mutateAsync: mockImportDSLConfirm }),
+}))
+
+vi.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: vi.fn().mockResolvedValue({
+    graph: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
+    hash: 'test-hash',
+    rag_pipeline_variables: [],
+  }),
+}))
+
+// --- Helpers ---
+const createFile = () => new File(['test content'], 'test.pipeline', { type: 'text/yaml' })
+
+// Cast MouseEventHandler to a plain callable for tests (event param is unused)
+type AsyncFn = () => Promise<void>
+
+describe('useUpdateDSLModal', () => {
+  const mockOnCancel = vi.fn()
+  const mockOnImport = vi.fn()
+
+  const renderUpdateDSLModal = (overrides?: { onImport?: () => void }) =>
+    renderHook(() =>
+      useUpdateDSLModal({
+        onCancel: mockOnCancel,
+        onImport: overrides?.onImport ?? mockOnImport,
+      }),
+    )
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockImportDSL.mockResolvedValue({
+      id: 'import-id',
+      status: DSLImportStatus.COMPLETED,
+      pipeline_id: 'test-pipeline-id',
+    })
+    mockHandleCheckPluginDependencies.mockResolvedValue(undefined)
+  })
+
+  // Initial state values
+  describe('initial state', () => {
+    it('should return correct defaults', () => {
+      const { result } = renderUpdateDSLModal()
+
+      expect(result.current.currentFile).toBeUndefined()
+      expect(result.current.show).toBe(true)
+      expect(result.current.showErrorModal).toBe(false)
+      expect(result.current.loading).toBe(false)
+      expect(result.current.versions).toBeUndefined()
+    })
+  })
+
+  // File handling
+  describe('handleFile', () => {
+    it('should set currentFile when file is provided', () => {
+      const { result } = renderUpdateDSLModal()
+      const file = createFile()
+
+      act(() => {
+        result.current.handleFile(file)
+      })
+
+      expect(result.current.currentFile).toBe(file)
+    })
+
+    it('should clear currentFile when called with undefined', () => {
+      const { result } = renderUpdateDSLModal()
+
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+      act(() => {
+        result.current.handleFile(undefined)
+      })
+
+      expect(result.current.currentFile).toBeUndefined()
+    })
+  })
+
+  // Modal state management
+  describe('modal state', () => {
+    it('should allow toggling showErrorModal', () => {
+      const { result } = renderUpdateDSLModal()
+
+      expect(result.current.showErrorModal).toBe(false)
+
+      act(() => {
+        result.current.setShowErrorModal(true)
+      })
+      expect(result.current.showErrorModal).toBe(true)
+
+      act(() => {
+        result.current.setShowErrorModal(false)
+      })
+      expect(result.current.showErrorModal).toBe(false)
+    })
+  })
+
+  // Import flow
+  describe('handleImport', () => {
+    it('should call importDSL with correct parameters', async () => {
+      const { result } = renderUpdateDSLModal()
+
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockImportDSL).toHaveBeenCalledWith({
+        mode: DSLImportMode.YAML_CONTENT,
+        yaml_content: 'test content',
+        pipeline_id: 'test-pipeline-id',
+      })
+    })
+
+    it('should not call importDSL when no file is selected', async () => {
+      const { result } = renderUpdateDSLModal()
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockImportDSL).not.toHaveBeenCalled()
+    })
+
+    // COMPLETED status
+    it('should notify success on COMPLETED status', async () => {
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'success' }))
+    })
+
+    it('should call onImport on successful import', async () => {
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockOnImport).toHaveBeenCalled()
+    })
+
+    it('should call onCancel on successful import', async () => {
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+
+    it('should emit workflow update event on success', async () => {
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockEmit).toHaveBeenCalled()
+    })
+
+    it('should call handleCheckPluginDependencies on success', async () => {
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockHandleCheckPluginDependencies).toHaveBeenCalledWith('test-pipeline-id', true)
+    })
+
+    // COMPLETED_WITH_WARNINGS status
+    it('should notify warning on COMPLETED_WITH_WARNINGS status', async () => {
+      mockImportDSL.mockResolvedValue({
+        id: 'import-id',
+        status: DSLImportStatus.COMPLETED_WITH_WARNINGS,
+        pipeline_id: 'test-pipeline-id',
+      })
+
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'warning' }))
+    })
+
+    // PENDING status (version mismatch)
+    it('should switch to version mismatch modal on PENDING status', async () => {
+      vi.useFakeTimers({ shouldAdvanceTime: true })
+
+      mockImportDSL.mockResolvedValue({
+        id: 'import-id',
+        status: DSLImportStatus.PENDING,
+        pipeline_id: 'test-pipeline-id',
+        imported_dsl_version: '0.8.0',
+        current_dsl_version: '1.0.0',
+      })
+
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+        await vi.advanceTimersByTimeAsync(350)
+      })
+
+      expect(result.current.show).toBe(false)
+      expect(result.current.showErrorModal).toBe(true)
+      expect(result.current.versions).toEqual({
+        importedVersion: '0.8.0',
+        systemVersion: '1.0.0',
+      })
+
+      vi.useRealTimers()
+    })
+
+    it('should default version strings to empty when undefined', async () => {
+      vi.useFakeTimers({ shouldAdvanceTime: true })
+
+      mockImportDSL.mockResolvedValue({
+        id: 'import-id',
+        status: DSLImportStatus.PENDING,
+        pipeline_id: 'test-pipeline-id',
+        imported_dsl_version: undefined,
+        current_dsl_version: undefined,
+      })
+
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+        await vi.advanceTimersByTimeAsync(350)
+      })
+
+      expect(result.current.versions).toEqual({
+        importedVersion: '',
+        systemVersion: '',
+      })
+
+      vi.useRealTimers()
+    })
+
+    // FAILED / unknown status
+    it('should notify error on FAILED status', async () => {
+      mockImportDSL.mockResolvedValue({
+        id: 'import-id',
+        status: DSLImportStatus.FAILED,
+        pipeline_id: 'test-pipeline-id',
+      })
+
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    // Exception
+    it('should notify error when importDSL throws', async () => {
+      mockImportDSL.mockRejectedValue(new Error('Network error'))
+
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    // Missing pipeline_id
+    it('should notify error when pipeline_id is missing on success', async () => {
+      mockImportDSL.mockResolvedValue({
+        id: 'import-id',
+        status: DSLImportStatus.COMPLETED,
+        pipeline_id: undefined,
+      })
+
+      const { result } = renderUpdateDSLModal()
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+  })
+
+  // Confirm flow (after PENDING → version mismatch)
+  describe('onUpdateDSLConfirm', () => {
+    // Helper: drive the hook into PENDING state so importId is set
+    const setupPendingState = async (result: { current: ReturnType<typeof useUpdateDSLModal> }) => {
+      vi.useFakeTimers({ shouldAdvanceTime: true })
+
+      mockImportDSL.mockResolvedValue({
+        id: 'import-id',
+        status: DSLImportStatus.PENDING,
+        pipeline_id: 'test-pipeline-id',
+        imported_dsl_version: '0.8.0',
+        current_dsl_version: '1.0.0',
+      })
+
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+        await vi.advanceTimersByTimeAsync(350)
+      })
+
+      vi.useRealTimers()
+      vi.clearAllMocks()
+      mockHandleCheckPluginDependencies.mockResolvedValue(undefined)
+    }
+
+    it('should call importDSLConfirm with the stored importId', async () => {
+      mockImportDSLConfirm.mockResolvedValue({
+        status: DSLImportStatus.COMPLETED,
+        pipeline_id: 'test-pipeline-id',
+      })
+
+      const { result } = renderUpdateDSLModal()
+      await setupPendingState(result)
+
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(mockImportDSLConfirm).toHaveBeenCalledWith('import-id')
+    })
+
+    it('should notify success and call onCancel after successful confirm', async () => {
+      mockImportDSLConfirm.mockResolvedValue({
+        status: DSLImportStatus.COMPLETED,
+        pipeline_id: 'test-pipeline-id',
+      })
+
+      const { result } = renderUpdateDSLModal()
+      await setupPendingState(result)
+
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'success' }))
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+
+    it('should call onImport after successful confirm', async () => {
+      mockImportDSLConfirm.mockResolvedValue({
+        status: DSLImportStatus.COMPLETED,
+        pipeline_id: 'test-pipeline-id',
+      })
+
+      const { result } = renderUpdateDSLModal()
+      await setupPendingState(result)
+
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(mockOnImport).toHaveBeenCalled()
+    })
+
+    it('should notify error on FAILED confirm status', async () => {
+      mockImportDSLConfirm.mockResolvedValue({
+        status: DSLImportStatus.FAILED,
+        pipeline_id: 'test-pipeline-id',
+      })
+
+      const { result } = renderUpdateDSLModal()
+      await setupPendingState(result)
+
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should notify error when confirm throws exception', async () => {
+      mockImportDSLConfirm.mockRejectedValue(new Error('Confirm failed'))
+
+      const { result } = renderUpdateDSLModal()
+      await setupPendingState(result)
+
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should notify error when confirm succeeds but pipeline_id is missing', async () => {
+      mockImportDSLConfirm.mockResolvedValue({
+        status: DSLImportStatus.COMPLETED,
+        pipeline_id: undefined,
+      })
+
+      const { result } = renderUpdateDSLModal()
+      await setupPendingState(result)
+
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({ type: 'error' }))
+    })
+
+    it('should not call importDSLConfirm when importId is not set', async () => {
+      const { result } = renderUpdateDSLModal()
+
+      // No pending state → importId is undefined
+      await act(async () => {
+        await (result.current.onUpdateDSLConfirm as unknown as AsyncFn)()
+      })
+
+      expect(mockImportDSLConfirm).not.toHaveBeenCalled()
+    })
+  })
+
+  // Optional onImport callback
+  describe('optional onImport', () => {
+    it('should work without onImport callback', async () => {
+      const { result } = renderHook(() =>
+        useUpdateDSLModal({ onCancel: mockOnCancel }),
+      )
+
+      act(() => {
+        result.current.handleFile(createFile())
+      })
+
+      await act(async () => {
+        await (result.current.handleImport as unknown as AsyncFn)()
+      })
+
+      // Should succeed without throwing
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+  })
+})

web/app/components/rag-pipeline/hooks/use-update-dsl-modal.ts

@@ -0,0 +1,205 @@
+import type { MouseEventHandler } from 'react'
+import {
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { ToastContext } from '@/app/components/base/toast'
+import { WORKFLOW_DATA_UPDATE } from '@/app/components/workflow/constants'
+import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import {
+  initialEdges,
+  initialNodes,
+} from '@/app/components/workflow/utils'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import {
+  DSLImportMode,
+  DSLImportStatus,
+} from '@/models/app'
+import {
+  useImportPipelineDSL,
+  useImportPipelineDSLConfirm,
+} from '@/service/use-pipeline'
+import { fetchWorkflowDraft } from '@/service/workflow'
+
+type VersionInfo = {
+  importedVersion: string
+  systemVersion: string
+}
+
+type UseUpdateDSLModalParams = {
+  onCancel: () => void
+  onImport?: () => void
+}
+
+const isCompletedStatus = (status: DSLImportStatus): boolean =>
+  status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS
+
+export const useUpdateDSLModal = ({ onCancel, onImport }: UseUpdateDSLModalParams) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { eventEmitter } = useEventEmitterContextContext()
+  const workflowStore = useWorkflowStore()
+  const { handleCheckPluginDependencies } = usePluginDependencies()
+  const { mutateAsync: importDSL } = useImportPipelineDSL()
+  const { mutateAsync: importDSLConfirm } = useImportPipelineDSLConfirm()
+
+  // File state
+  const [currentFile, setDSLFile] = useState<File>()
+  const [fileContent, setFileContent] = useState<string>()
+
+  // Modal state
+  const [show, setShow] = useState(true)
+  const [showErrorModal, setShowErrorModal] = useState(false)
+
+  // Import state
+  const [loading, setLoading] = useState(false)
+  const [versions, setVersions] = useState<VersionInfo>()
+  const [importId, setImportId] = useState<string>()
+  const isCreatingRef = useRef(false)
+
+  const readFile = (file: File) => {
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      setFileContent(event.target?.result as string)
+    }
+    reader.readAsText(file)
+  }
+
+  const handleFile = (file?: File) => {
+    setDSLFile(file)
+    if (file)
+      readFile(file)
+    if (!file)
+      setFileContent('')
+  }
+
+  const notifyError = useCallback(() => {
+    setLoading(false)
+    notify({ type: 'error', message: t('common.importFailure', { ns: 'workflow' }) })
+  }, [notify, t])
+
+  const updateWorkflow = useCallback(async (pipelineId: string) => {
+    const { graph, hash, rag_pipeline_variables } = await fetchWorkflowDraft(
+      `/rag/pipelines/${pipelineId}/workflows/draft`,
+    )
+    const { nodes, edges, viewport } = graph
+
+    eventEmitter?.emit({
+      type: WORKFLOW_DATA_UPDATE,
+      payload: {
+        nodes: initialNodes(nodes, edges),
+        edges: initialEdges(edges, nodes),
+        viewport,
+        hash,
+        rag_pipeline_variables: rag_pipeline_variables || [],
+      },
+    })
+  }, [eventEmitter])
+
+  const completeImport = useCallback(async (
+    pipelineId: string | undefined,
+    status: DSLImportStatus = DSLImportStatus.COMPLETED,
+  ) => {
+    if (!pipelineId) {
+      notifyError()
+      return
+    }
+
+    updateWorkflow(pipelineId)
+    onImport?.()
+
+    const isWarning = status === DSLImportStatus.COMPLETED_WITH_WARNINGS
+    notify({
+      type: isWarning ? 'warning' : 'success',
+      message: t(isWarning ? 'common.importWarning' : 'common.importSuccess', { ns: 'workflow' }),
+      children: isWarning && t('common.importWarningDetails', { ns: 'workflow' }),
+    })
+
+    await handleCheckPluginDependencies(pipelineId, true)
+    setLoading(false)
+    onCancel()
+  }, [updateWorkflow, onImport, notify, t, handleCheckPluginDependencies, onCancel, notifyError])
+
+  const showVersionMismatch = useCallback((
+    id: string,
+    importedVersion?: string,
+    systemVersion?: string,
+  ) => {
+    setShow(false)
+    setTimeout(() => setShowErrorModal(true), 300)
+    setVersions({
+      importedVersion: importedVersion ?? '',
+      systemVersion: systemVersion ?? '',
+    })
+    setImportId(id)
+  }, [])
+
+  const handleImport: MouseEventHandler = useCallback(async () => {
+    const { pipelineId } = workflowStore.getState()
+    if (isCreatingRef.current)
+      return
+    isCreatingRef.current = true
+    if (!currentFile)
+      return
+
+    try {
+      if (!pipelineId || !fileContent)
+        return
+
+      setLoading(true)
+      const response = await importDSL({
+        mode: DSLImportMode.YAML_CONTENT,
+        yaml_content: fileContent,
+        pipeline_id: pipelineId,
+      })
+      const { id, status, pipeline_id, imported_dsl_version, current_dsl_version } = response
+
+      if (isCompletedStatus(status))
+        await completeImport(pipeline_id, status)
+      else if (status === DSLImportStatus.PENDING)
+        showVersionMismatch(id, imported_dsl_version, current_dsl_version)
+      else
+        notifyError()
+    }
+    catch {
+      notifyError()
+    }
+    isCreatingRef.current = false
+  }, [currentFile, fileContent, workflowStore, importDSL, completeImport, showVersionMismatch, notifyError])
+
+  const onUpdateDSLConfirm: MouseEventHandler = useCallback(async () => {
+    if (!importId)
+      return
+
+    try {
+      const { status, pipeline_id } = await importDSLConfirm(importId)
+
+      if (status === DSLImportStatus.COMPLETED) {
+        await completeImport(pipeline_id)
+        return
+      }
+
+      if (status === DSLImportStatus.FAILED)
+        notifyError()
+    }
+    catch {
+      notifyError()
+    }
+  }, [importId, importDSLConfirm, completeImport, notifyError])
+
+  return {
+    currentFile,
+    handleFile,
+    show,
+    showErrorModal,
+    setShowErrorModal,
+    loading,
+    versions,
+    handleImport,
+    onUpdateDSLConfirm,
+  }
+}

web/app/components/sentry-initializer.tsx

@@ -4,12 +4,13 @@ import * as Sentry from '@sentry/react'
 import { useEffect } from 'react'
 
 import { IS_DEV } from '@/config'
+import { env } from '@/env'
 
 const SentryInitializer = ({
   children,
 }: { children: React.ReactElement }) => {
   useEffect(() => {
-    const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
+    const SENTRY_DSN = env.NEXT_PUBLIC_SENTRY_DSN
     if (!IS_DEV && SENTRY_DSN) {
       Sentry.init({
         dsn: SENTRY_DSN,

web/app/components/tools/workflow-tool/utils.test.ts

@@ -13,6 +13,54 @@ describe('buildWorkflowOutputParameters', () => {
     expect(result).toBe(params)
   })
 
+  it('fills missing output description and type from schema when array input exists', () => {
+    const params: WorkflowToolProviderOutputParameter[] = [
+      { name: 'answer', description: '', type: undefined },
+      { name: 'files', description: 'keep this description', type: VarType.arrayFile },
+    ]
+    const schema: WorkflowToolProviderOutputSchema = {
+      type: 'object',
+      properties: {
+        answer: {
+          type: VarType.string,
+          description: 'Generated answer',
+        },
+        files: {
+          type: VarType.arrayFile,
+          description: 'Schema files description',
+        },
+      },
+    }
+
+    const result = buildWorkflowOutputParameters(params, schema)
+
+    expect(result).toEqual([
+      { name: 'answer', description: 'Generated answer', type: VarType.string },
+      { name: 'files', description: 'keep this description', type: VarType.arrayFile },
+    ])
+  })
+
+  it('falls back to empty description when both payload and schema descriptions are missing', () => {
+    const params: WorkflowToolProviderOutputParameter[] = [
+      { name: 'missing_desc', description: '', type: undefined },
+    ]
+    const schema: WorkflowToolProviderOutputSchema = {
+      type: 'object',
+      properties: {
+        other_field: {
+          type: VarType.string,
+          description: 'Other',
+        },
+      },
+    }
+
+    const result = buildWorkflowOutputParameters(params, schema)
+
+    expect(result).toEqual([
+      { name: 'missing_desc', description: '', type: undefined },
+    ])
+  })
+
   it('derives parameters from schema when explicit array missing', () => {
     const schema: WorkflowToolProviderOutputSchema = {
       type: 'object',
@@ -44,4 +92,56 @@ describe('buildWorkflowOutputParameters', () => {
   it('returns empty array when no source information is provided', () => {
     expect(buildWorkflowOutputParameters(null, null)).toEqual([])
   })
+
+  it('derives parameters from schema when explicit array is empty', () => {
+    const schema: WorkflowToolProviderOutputSchema = {
+      type: 'object',
+      properties: {
+        output_text: {
+          type: VarType.string,
+          description: 'Output text',
+        },
+      },
+    }
+
+    const result = buildWorkflowOutputParameters([], schema)
+
+    expect(result).toEqual([
+      { name: 'output_text', description: 'Output text', type: VarType.string },
+    ])
+  })
+
+  it('returns undefined type when schema output type is missing', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        answer: {
+          description: 'Answer without type',
+        },
+      },
+    } as unknown as WorkflowToolProviderOutputSchema
+
+    const result = buildWorkflowOutputParameters(undefined, schema)
+
+    expect(result).toEqual([
+      { name: 'answer', description: 'Answer without type', type: undefined },
+    ])
+  })
+
+  it('falls back to empty description when schema-derived description is missing', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        answer: {
+          type: VarType.string,
+        },
+      },
+    } as unknown as WorkflowToolProviderOutputSchema
+
+    const result = buildWorkflowOutputParameters(undefined, schema)
+
+    expect(result).toEqual([
+      { name: 'answer', description: '', type: VarType.string },
+    ])
+  })
 })

web/app/components/tools/workflow-tool/utils.ts

@@ -14,15 +14,28 @@ export const buildWorkflowOutputParameters = (
   outputParameters: WorkflowToolProviderOutputParameter[] | null | undefined,
   outputSchema?: WorkflowToolProviderOutputSchema | null,
 ): WorkflowToolProviderOutputParameter[] => {
-  if (Array.isArray(outputParameters))
-    return outputParameters
+  const schemaProperties = outputSchema?.properties
 
-  if (!outputSchema?.properties)
+  if (Array.isArray(outputParameters) && outputParameters.length > 0) {
+    if (!schemaProperties)
+      return outputParameters
+
+    return outputParameters.map((item) => {
+      const schema = schemaProperties[item.name]
+      return {
+        ...item,
+        description: item.description || schema?.description || '',
+        type: normalizeVarType(item.type || schema?.type),
+      }
+    })
+  }
+
+  if (!schemaProperties)
     return []
 
-  return Object.entries(outputSchema.properties).map(([name, schema]) => ({
+  return Object.entries(schemaProperties).map(([name, schema]) => ({
     name,
-    description: schema.description,
+    description: schema.description || '',
     type: normalizeVarType(schema.type),
   }))
 }

web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts

@@ -6,6 +6,7 @@ import { useSerialAsyncCallback } from '@/app/components/workflow/hooks/use-seri
 import { useNodesReadOnly } from '@/app/components/workflow/hooks/use-workflow'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { API_PREFIX } from '@/config'
+import { postWithKeepalive } from '@/service/fetch'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useWorkflowRefreshDraft } from '.'
 
@@ -85,7 +86,7 @@ export const useNodesSyncDraft = () => {
     const postParams = getPostParams()
 
     if (postParams)
-      navigator.sendBeacon(`${API_PREFIX}${postParams.url}`, JSON.stringify(postParams.params))
+      postWithKeepalive(`${API_PREFIX}${postParams.url}`, postParams.params)
   }, [getPostParams, getNodesReadOnly])
 
   const performSync = useCallback(async (

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts

@@ -159,6 +159,9 @@ const useLastRun = <T>({
     if (!warningForNode)
       return false
 
+    if (warningForNode.unConnected && !warningForNode.errorMessage)
+      return false
+
     const message = warningForNode.errorMessage || 'This node has unresolved checklist issues'
     Toast.notify({ type: 'error', message })
     return true

web/app/components/workflow/nodes/_base/node.tsx

@@ -4,13 +4,6 @@ import type {
 } from 'react'
 import type { IterationNodeType } from '@/app/components/workflow/nodes/iteration/types'
 import type { NodeProps } from '@/app/components/workflow/types'
-import {
-  RiAlertFill,
-  RiCheckboxCircleFill,
-  RiErrorWarningFill,
-  RiLoader2Line,
-  RiPauseCircleFill,
-} from '@remixicon/react'
 import {
   cloneElement,
   memo,
@@ -109,7 +102,7 @@ const BaseNode: FC<BaseNodeProps> = ({
   } = useMemo(() => {
     return {
       showRunningBorder: (data._runningStatus === NodeRunningStatus.Running || data._runningStatus === NodeRunningStatus.Paused) && !showSelectedBorder,
-      showSuccessBorder: (data._runningStatus === NodeRunningStatus.Succeeded || hasVarValue) && !showSelectedBorder,
+      showSuccessBorder: (data._runningStatus === NodeRunningStatus.Succeeded || (hasVarValue && !data._runningStatus)) && !showSelectedBorder,
       showFailedBorder: data._runningStatus === NodeRunningStatus.Failed && !showSelectedBorder,
       showExceptionBorder: data._runningStatus === NodeRunningStatus.Exception && !showSelectedBorder,
     }
@@ -127,7 +120,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       return (
         <div
           className={cn(
-            'system-xs-medium mr-2 text-text-tertiary',
+            'mr-2 text-text-tertiary system-xs-medium',
             data._runningStatus === NodeRunningStatus.Running && 'text-text-accent',
           )}
         >
@@ -167,7 +160,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       {
         data.type === BlockEnum.DataSource && (
           <div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
-            <div className="system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary">
+            <div className="flex h-5 items-center px-2.5 text-text-tertiary system-2xs-semibold-uppercase">
               {t('blocks.datasource', { ns: 'workflow' })}
             </div>
           </div>
@@ -252,7 +245,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           />
           <div
             title={data.title}
-            className="system-sm-semibold-uppercase mr-1 flex grow items-center truncate text-text-primary"
+            className="mr-1 flex grow items-center truncate text-text-primary system-sm-semibold-uppercase"
           >
             <div>
               {data.title}
@@ -268,7 +261,7 @@ const BaseNode: FC<BaseNodeProps> = ({
                   </div>
                 )}
                 >
-                  <div className="system-2xs-medium-uppercase ml-1 flex items-center justify-center rounded-[5px] border-[1px] border-text-warning px-[5px] py-[3px] text-text-warning ">
+                  <div className="ml-1 flex items-center justify-center rounded-[5px] border-[1px] border-text-warning px-[5px] py-[3px] text-text-warning system-2xs-medium-uppercase">
                     {t('nodes.iteration.parallelModeUpper', { ns: 'workflow' })}
                   </div>
                 </Tooltip>
@@ -288,26 +281,26 @@ const BaseNode: FC<BaseNodeProps> = ({
             !!(data.type === BlockEnum.Loop && data._loopIndex) && LoopIndex
           }
           {
-            isLoading && <RiLoader2Line className="h-3.5 w-3.5 animate-spin text-text-accent" />
+            isLoading && <span className="i-ri-loader-2-line h-3.5 w-3.5 animate-spin text-text-accent" />
           }
           {
             !isLoading && data._runningStatus === NodeRunningStatus.Failed && (
-              <RiErrorWarningFill className="h-3.5 w-3.5 text-text-destructive" />
+              <span className="i-ri-error-warning-fill h-3.5 w-3.5 text-text-destructive" />
             )
           }
           {
             !isLoading && data._runningStatus === NodeRunningStatus.Exception && (
-              <RiAlertFill className="h-3.5 w-3.5 text-text-warning-secondary" />
+              <span className="i-ri-alert-fill h-3.5 w-3.5 text-text-warning-secondary" />
             )
           }
           {
-            !isLoading && (data._runningStatus === NodeRunningStatus.Succeeded || hasVarValue) && (
-              <RiCheckboxCircleFill className="h-3.5 w-3.5 text-text-success" />
+            !isLoading && (data._runningStatus === NodeRunningStatus.Succeeded || (hasVarValue && !data._runningStatus)) && (
+              <span className="i-ri-checkbox-circle-fill h-3.5 w-3.5 text-text-success" />
             )
           }
           {
             !isLoading && data._runningStatus === NodeRunningStatus.Paused && (
-              <RiPauseCircleFill className="h-3.5 w-3.5 text-text-warning-secondary" />
+              <span className="i-ri-pause-circle-fill h-3.5 w-3.5 text-text-warning-secondary" />
             )
           }
         </div>
@@ -341,7 +334,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         }
         {
           !!(data.desc && data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop) && (
-            <div className="system-xs-regular whitespace-pre-line break-words px-3 pb-2 pt-1 text-text-tertiary">
+            <div className="whitespace-pre-line break-words px-3 pb-2 pt-1 text-text-tertiary system-xs-regular">
               {data.desc}
             </div>
           )

web/app/components/workflow/nodes/human-input/__tests__/human-input.test.tsx

@@ -0,0 +1,567 @@
+import type { ReactNode } from 'react'
+import type { HumanInputNodeType } from '@/app/components/workflow/nodes/human-input/types'
+import type {
+  Edge,
+  Node,
+} from '@/app/components/workflow/types'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { WORKFLOW_COMMON_NODES } from '@/app/components/workflow/constants/node'
+import humanInputDefault from '@/app/components/workflow/nodes/human-input/default'
+import HumanInputNode from '@/app/components/workflow/nodes/human-input/node'
+import {
+  DeliveryMethodType,
+  UserActionButtonType,
+} from '@/app/components/workflow/nodes/human-input/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { initialNodes, preprocessNodesAndEdges } from '@/app/components/workflow/utils/workflow-init'
+
+// Mock reactflow which is needed by initialNodes and NodeSourceHandle
+vi.mock('reactflow', async () => {
+  const reactflow = await vi.importActual('reactflow')
+  return {
+    ...reactflow,
+    Handle: ({ children }: { children?: ReactNode }) => <div data-testid="handle">{children}</div>,
+  }
+})
+
+// Minimal store state mirroring the fields that NodeSourceHandle selects
+const mockStoreState = {
+  shouldAutoOpenStartNodeSelector: false,
+  setShouldAutoOpenStartNodeSelector: vi.fn(),
+  setHasSelectedStartNode: vi.fn(),
+}
+
+// Mock workflow store used by NodeSourceHandle
+// useStore accepts a selector and applies it to the state, so tests break
+// if the component starts selecting fields that aren't provided here.
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: vi.fn((selector?: (s: typeof mockStoreState) => unknown) =>
+    selector ? selector(mockStoreState) : mockStoreState,
+  ),
+  useWorkflowStore: vi.fn(() => ({
+    getState: () => ({
+      getNodes: () => [],
+    }),
+  })),
+}))
+
+// Mock workflow hooks barrel (used by NodeSourceHandle via ../../../hooks)
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesInteractions: () => ({
+    handleNodeAdd: vi.fn(),
+  }),
+  useNodesReadOnly: () => ({
+    getNodesReadOnly: () => false,
+    nodesReadOnly: false,
+  }),
+  useAvailableBlocks: () => ({
+    availableNextBlocks: [],
+    availablePrevBlocks: [],
+  }),
+  useIsChatMode: () => false,
+}))
+
+// ── Factory: Build a realistic human-input node as it would appear after DSL import ──
+const createHumanInputNode = (overrides?: Partial<HumanInputNodeType>): Node => ({
+  id: 'human-input-1',
+  type: 'custom',
+  position: { x: 400, y: 200 },
+  data: {
+    type: BlockEnum.HumanInput,
+    title: 'Human Input',
+    desc: 'Wait for human input',
+    delivery_methods: [
+      {
+        id: 'dm-1',
+        type: DeliveryMethodType.WebApp,
+        enabled: true,
+      },
+      {
+        id: 'dm-2',
+        type: DeliveryMethodType.Email,
+        enabled: true,
+        config: {
+          recipients: { whole_workspace: false, items: [] },
+          subject: 'Please review',
+          body: 'Please review the form',
+          debug_mode: false,
+        },
+      },
+    ],
+    form_content: '# Review Form\nPlease fill in the details below.',
+    inputs: [
+      {
+        type: 'text-input',
+        output_variable_name: 'review_result',
+        default: { selector: [], type: 'constant' as const, value: '' },
+      },
+    ],
+    user_actions: [
+      {
+        id: 'approve',
+        title: 'Approve',
+        button_style: UserActionButtonType.Primary,
+      },
+      {
+        id: 'reject',
+        title: 'Reject',
+        button_style: UserActionButtonType.Default,
+      },
+    ],
+    timeout: 3,
+    timeout_unit: 'day' as const,
+    ...overrides,
+  } as HumanInputNodeType,
+})
+
+const createStartNode = (): Node => ({
+  id: 'start-1',
+  type: 'custom',
+  position: { x: 100, y: 200 },
+  data: {
+    type: BlockEnum.Start,
+    title: 'Start',
+    desc: '',
+  } as Node['data'],
+})
+
+const createEdge = (source: string, target: string, sourceHandle = 'source', targetHandle = 'target'): Edge => ({
+  id: `${source}-${sourceHandle}-${target}-${targetHandle}`,
+  type: 'custom',
+  source,
+  sourceHandle,
+  target,
+  targetHandle,
+  data: {},
+} as Edge)
+
+describe('DSL Import with Human Input Node', () => {
+  // ── preprocessNodesAndEdges: human-input nodes pass through without error ──
+  describe('preprocessNodesAndEdges', () => {
+    it('should pass through a workflow containing a human-input node unchanged', () => {
+      const humanInputNode = createHumanInputNode()
+      const startNode = createStartNode()
+      const nodes = [startNode, humanInputNode]
+      const edges = [createEdge('start-1', 'human-input-1')]
+
+      const result = preprocessNodesAndEdges(nodes as Node[], edges as Edge[])
+
+      expect(result.nodes).toHaveLength(2)
+      expect(result.edges).toHaveLength(1)
+      expect(result.nodes).toEqual(nodes)
+      expect(result.edges).toEqual(edges)
+    })
+
+    it('should not treat human-input node as an iteration or loop node', () => {
+      const humanInputNode = createHumanInputNode()
+      const nodes = [humanInputNode]
+
+      const result = preprocessNodesAndEdges(nodes as Node[], [])
+
+      // No extra iteration/loop start nodes should be injected
+      expect(result.nodes).toHaveLength(1)
+      expect(result.nodes[0].data.type).toBe(BlockEnum.HumanInput)
+    })
+  })
+
+  // ── initialNodes: human-input nodes are properly initialized ──
+  describe('initialNodes', () => {
+    it('should initialize a human-input node with connected handle IDs', () => {
+      const humanInputNode = createHumanInputNode()
+      const startNode = createStartNode()
+      const nodes = [startNode, humanInputNode]
+      const edges = [createEdge('start-1', 'human-input-1')]
+
+      const result = initialNodes(nodes as Node[], edges as Edge[])
+
+      const processedHumanInput = result.find(n => n.id === 'human-input-1')
+      expect(processedHumanInput).toBeDefined()
+      expect(processedHumanInput!.data.type).toBe(BlockEnum.HumanInput)
+      // initialNodes sets _connectedSourceHandleIds and _connectedTargetHandleIds
+      expect(processedHumanInput!.data._connectedSourceHandleIds).toBeDefined()
+      expect(processedHumanInput!.data._connectedTargetHandleIds).toBeDefined()
+    })
+
+    it('should preserve human-input node data after initialization', () => {
+      const humanInputNode = createHumanInputNode()
+      const nodes = [humanInputNode]
+
+      const result = initialNodes(nodes as Node[], [])
+
+      const processed = result[0]
+      const nodeData = processed.data as HumanInputNodeType
+      expect(nodeData.delivery_methods).toHaveLength(2)
+      expect(nodeData.user_actions).toHaveLength(2)
+      expect(nodeData.form_content).toBe('# Review Form\nPlease fill in the details below.')
+      expect(nodeData.timeout).toBe(3)
+      expect(nodeData.timeout_unit).toBe('day')
+    })
+
+    it('should set node type to custom if not set', () => {
+      const humanInputNode = createHumanInputNode()
+      delete (humanInputNode as Record<string, unknown>).type
+
+      const result = initialNodes([humanInputNode] as Node[], [])
+
+      expect(result[0].type).toBe('custom')
+    })
+  })
+
+  // ── Node component: renders without crashing for all data variations ──
+  describe('HumanInputNode Component', () => {
+    it('should render without crashing with full DSL data', () => {
+      const node = createHumanInputNode()
+
+      expect(() => {
+        render(
+          <HumanInputNode
+            id={node.id}
+            data={node.data as HumanInputNodeType}
+          />,
+        )
+      }).not.toThrow()
+    })
+
+    it('should display delivery method labels when methods are present', () => {
+      const node = createHumanInputNode()
+
+      render(
+        <HumanInputNode
+          id={node.id}
+          data={node.data as HumanInputNodeType}
+        />,
+      )
+
+      // Delivery method type labels are rendered in lowercase
+      expect(screen.getByText('webapp')).toBeInTheDocument()
+      expect(screen.getByText('email')).toBeInTheDocument()
+    })
+
+    it('should display user action IDs', () => {
+      const node = createHumanInputNode()
+
+      render(
+        <HumanInputNode
+          id={node.id}
+          data={node.data as HumanInputNodeType}
+        />,
+      )
+
+      expect(screen.getByText('approve')).toBeInTheDocument()
+      expect(screen.getByText('reject')).toBeInTheDocument()
+    })
+
+    it('should always display Timeout handle', () => {
+      const node = createHumanInputNode()
+
+      render(
+        <HumanInputNode
+          id={node.id}
+          data={node.data as HumanInputNodeType}
+        />,
+      )
+
+      expect(screen.getByText('Timeout')).toBeInTheDocument()
+    })
+
+    it('should render without crashing when delivery_methods is empty', () => {
+      const node = createHumanInputNode({ delivery_methods: [] })
+
+      expect(() => {
+        render(
+          <HumanInputNode
+            id={node.id}
+            data={node.data as HumanInputNodeType}
+          />,
+        )
+      }).not.toThrow()
+
+      // Delivery method section should not be rendered
+      expect(screen.queryByText('webapp')).not.toBeInTheDocument()
+      expect(screen.queryByText('email')).not.toBeInTheDocument()
+    })
+
+    it('should render without crashing when user_actions is empty', () => {
+      const node = createHumanInputNode({ user_actions: [] })
+
+      expect(() => {
+        render(
+          <HumanInputNode
+            id={node.id}
+            data={node.data as HumanInputNodeType}
+          />,
+        )
+      }).not.toThrow()
+
+      // Timeout handle should still exist
+      expect(screen.getByText('Timeout')).toBeInTheDocument()
+    })
+
+    it('should render without crashing when both delivery_methods and user_actions are empty', () => {
+      const node = createHumanInputNode({
+        delivery_methods: [],
+        user_actions: [],
+        form_content: '',
+        inputs: [],
+      })
+
+      expect(() => {
+        render(
+          <HumanInputNode
+            id={node.id}
+            data={node.data as HumanInputNodeType}
+          />,
+        )
+      }).not.toThrow()
+    })
+
+    it('should render with only webapp delivery method', () => {
+      const node = createHumanInputNode({
+        delivery_methods: [
+          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
+        ],
+      })
+
+      render(
+        <HumanInputNode
+          id={node.id}
+          data={node.data as HumanInputNodeType}
+        />,
+      )
+
+      expect(screen.getByText('webapp')).toBeInTheDocument()
+      expect(screen.queryByText('email')).not.toBeInTheDocument()
+    })
+
+    it('should render with multiple user actions', () => {
+      const node = createHumanInputNode({
+        user_actions: [
+          { id: 'action_1', title: 'Approve', button_style: UserActionButtonType.Primary },
+          { id: 'action_2', title: 'Reject', button_style: UserActionButtonType.Default },
+          { id: 'action_3', title: 'Escalate', button_style: UserActionButtonType.Accent },
+        ],
+      })
+
+      render(
+        <HumanInputNode
+          id={node.id}
+          data={node.data as HumanInputNodeType}
+        />,
+      )
+
+      expect(screen.getByText('action_1')).toBeInTheDocument()
+      expect(screen.getByText('action_2')).toBeInTheDocument()
+      expect(screen.getByText('action_3')).toBeInTheDocument()
+    })
+  })
+
+  // ── Node registration: human-input is included in the workflow node registry ──
+  // Verify via WORKFLOW_COMMON_NODES (lightweight metadata-only imports) instead
+  // of NodeComponentMap/PanelComponentMap which pull in every node's heavy UI deps.
+  describe('Node Registration', () => {
+    it('should have HumanInput included in WORKFLOW_COMMON_NODES', () => {
+      const entry = WORKFLOW_COMMON_NODES.find(
+        n => n.metaData.type === BlockEnum.HumanInput,
+      )
+      expect(entry).toBeDefined()
+    })
+  })
+
+  // ── Default config & validation ──
+  describe('HumanInput Default Configuration', () => {
+    it('should provide default values for a new human-input node', () => {
+      const defaultValue = humanInputDefault.defaultValue
+
+      expect(defaultValue.delivery_methods).toEqual([])
+      expect(defaultValue.user_actions).toEqual([])
+      expect(defaultValue.form_content).toBe('')
+      expect(defaultValue.inputs).toEqual([])
+      expect(defaultValue.timeout).toBe(3)
+      expect(defaultValue.timeout_unit).toBe('day')
+    })
+
+    it('should validate that delivery methods are required', () => {
+      const t = (key: string) => key
+      const payload = {
+        ...humanInputDefault.defaultValue,
+        delivery_methods: [],
+      } as HumanInputNodeType
+
+      const result = humanInputDefault.checkValid(payload, t)
+
+      expect(result.isValid).toBe(false)
+      expect(result.errorMessage).toBeTruthy()
+    })
+
+    it('should validate that at least one delivery method is enabled', () => {
+      const t = (key: string) => key
+      const payload = {
+        ...humanInputDefault.defaultValue,
+        delivery_methods: [
+          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: false },
+        ],
+        user_actions: [
+          { id: 'approve', title: 'Approve', button_style: UserActionButtonType.Primary },
+        ],
+      } as HumanInputNodeType
+
+      const result = humanInputDefault.checkValid(payload, t)
+
+      expect(result.isValid).toBe(false)
+    })
+
+    it('should validate that user actions are required', () => {
+      const t = (key: string) => key
+      const payload = {
+        ...humanInputDefault.defaultValue,
+        delivery_methods: [
+          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
+        ],
+        user_actions: [],
+      } as HumanInputNodeType
+
+      const result = humanInputDefault.checkValid(payload, t)
+
+      expect(result.isValid).toBe(false)
+    })
+
+    it('should validate that user action IDs are not duplicated', () => {
+      const t = (key: string) => key
+      const payload = {
+        ...humanInputDefault.defaultValue,
+        delivery_methods: [
+          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
+        ],
+        user_actions: [
+          { id: 'approve', title: 'Approve', button_style: UserActionButtonType.Primary },
+          { id: 'approve', title: 'Also Approve', button_style: UserActionButtonType.Default },
+        ],
+      } as HumanInputNodeType
+
+      const result = humanInputDefault.checkValid(payload, t)
+
+      expect(result.isValid).toBe(false)
+    })
+
+    it('should pass validation with correct configuration', () => {
+      const t = (key: string) => key
+      const payload = {
+        ...humanInputDefault.defaultValue,
+        delivery_methods: [
+          { id: 'dm-1', type: DeliveryMethodType.WebApp, enabled: true },
+        ],
+        user_actions: [
+          { id: 'approve', title: 'Approve', button_style: UserActionButtonType.Primary },
+          { id: 'reject', title: 'Reject', button_style: UserActionButtonType.Default },
+        ],
+      } as HumanInputNodeType
+
+      const result = humanInputDefault.checkValid(payload, t)
+
+      expect(result.isValid).toBe(true)
+      expect(result.errorMessage).toBe('')
+    })
+  })
+
+  // ── Output variables generation ──
+  describe('HumanInput Output Variables', () => {
+    it('should generate output variables from form inputs', () => {
+      const payload = {
+        ...humanInputDefault.defaultValue,
+        inputs: [
+          { type: 'text-input', output_variable_name: 'review_result', default: { selector: [], type: 'constant' as const, value: '' } },
+          { type: 'text-input', output_variable_name: 'comment', default: { selector: [], type: 'constant' as const, value: '' } },
+        ],
+      } as HumanInputNodeType
+
+      const outputVars = humanInputDefault.getOutputVars!(payload, {}, [])
+
+      expect(outputVars).toEqual([
+        { variable: 'review_result', type: 'string' },
+        { variable: 'comment', type: 'string' },
+      ])
+    })
+
+    it('should return empty output variables when no form inputs exist', () => {
+      const payload = {
+        ...humanInputDefault.defaultValue,
+        inputs: [],
+      } as HumanInputNodeType
+
+      const outputVars = humanInputDefault.getOutputVars!(payload, {}, [])
+
+      expect(outputVars).toEqual([])
+    })
+  })
+
+  // ── Full DSL import simulation: start → human-input → end ──
+  describe('Full Workflow with Human Input Node', () => {
+    it('should process a start → human-input → end workflow without errors', () => {
+      const startNode = createStartNode()
+      const humanInputNode = createHumanInputNode()
+      const endNode: Node = {
+        id: 'end-1',
+        type: 'custom',
+        position: { x: 700, y: 200 },
+        data: {
+          type: BlockEnum.End,
+          title: 'End',
+          desc: '',
+          outputs: [],
+        } as Node['data'],
+      }
+
+      const nodes = [startNode, humanInputNode, endNode]
+      const edges = [
+        createEdge('start-1', 'human-input-1'),
+        createEdge('human-input-1', 'end-1', 'approve', 'target'),
+      ]
+
+      const processed = preprocessNodesAndEdges(nodes as Node[], edges as Edge[])
+      expect(processed.nodes).toHaveLength(3)
+      expect(processed.edges).toHaveLength(2)
+
+      const initialized = initialNodes(nodes as Node[], edges as Edge[])
+      expect(initialized).toHaveLength(3)
+
+      // All node types should be preserved
+      const types = initialized.map(n => n.data.type)
+      expect(types).toContain(BlockEnum.Start)
+      expect(types).toContain(BlockEnum.HumanInput)
+      expect(types).toContain(BlockEnum.End)
+    })
+
+    it('should handle multiple branches from human-input user actions', () => {
+      const startNode = createStartNode()
+      const humanInputNode = createHumanInputNode()
+      const approveEndNode: Node = {
+        id: 'approve-end',
+        type: 'custom',
+        position: { x: 700, y: 100 },
+        data: { type: BlockEnum.End, title: 'Approve End', desc: '', outputs: [] } as Node['data'],
+      }
+      const rejectEndNode: Node = {
+        id: 'reject-end',
+        type: 'custom',
+        position: { x: 700, y: 300 },
+        data: { type: BlockEnum.End, title: 'Reject End', desc: '', outputs: [] } as Node['data'],
+      }
+
+      const nodes = [startNode, humanInputNode, approveEndNode, rejectEndNode]
+      const edges = [
+        createEdge('start-1', 'human-input-1'),
+        createEdge('human-input-1', 'approve-end', 'approve', 'target'),
+        createEdge('human-input-1', 'reject-end', 'reject', 'target'),
+      ]
+
+      const initialized = initialNodes(nodes as Node[], edges as Edge[])
+      expect(initialized).toHaveLength(4)
+
+      // Human input node should still have correct data
+      const hiNode = initialized.find(n => n.id === 'human-input-1')!
+      expect((hiNode.data as HumanInputNodeType).user_actions).toHaveLength(2)
+      expect((hiNode.data as HumanInputNodeType).delivery_methods).toHaveLength(2)
+    })
+  })
+})

web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { InputNumber } from '@/app/components/base/input-number'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { env } from '@/env'
 
 export type TopKAndScoreThresholdProps = {
   topK: number
@@ -15,12 +16,7 @@ export type TopKAndScoreThresholdProps = {
   hiddenScoreThreshold?: boolean
 }
 
-const maxTopK = (() => {
-  const configValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-top-k-max-value') || '', 10)
-  if (configValue && !isNaN(configValue))
-    return configValue
-  return 10
-})()
+const maxTopK = env.NEXT_PUBLIC_TOP_K_MAX_VALUE
 const TOP_K_VALUE_LIMIT = {
   amount: 1,
   min: 1,

web/app/components/workflow/nodes/llm/utils.ts

@@ -1,6 +1,6 @@
 import type { ValidationError } from 'jsonschema'
 import type { ArrayItems, Field, LLMNodeType } from './types'
-import { z } from 'zod'
+import * as z from 'zod'
 import { draft07Validator, forbidBooleanProperties } from '@/utils/validators'
 import { ArrayType, Type } from './types'
 

web/app/components/workflow/run/status-container.tsx

@@ -18,25 +18,25 @@ const StatusContainer: FC<Props> = ({
   return (
     <div
       className={cn(
-        'system-xs-regular relative break-all rounded-lg border px-3 py-2.5',
+        'relative break-all rounded-lg border px-3 py-2.5 system-xs-regular',
         status === 'succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
         status === 'succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
-        status === 'succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
+        status === 'succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24,24,27,0.95)]',
         status === 'partial-succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
         status === 'partial-succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
-        status === 'partial-succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
+        status === 'partial-succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24,24,27,0.95)]',
         status === 'failed' && 'border-[rgba(240,68,56,0.8)] bg-workflow-display-error-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-error.svg)] text-text-warning',
         status === 'failed' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(240,68,56,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
-        status === 'failed' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(240,68,56,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
+        status === 'failed' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(240,68,56,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24,24,27,0.95)]',
         (status === 'stopped' || status === 'paused') && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
         (status === 'stopped' || status === 'paused') && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
-        (status === 'stopped' || status === 'paused') && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
+        (status === 'stopped' || status === 'paused') && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24,24,27,0.95)]',
         status === 'exception' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] text-text-destructive',
         status === 'exception' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
-        status === 'exception' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
+        status === 'exception' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(247,144,9,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24,24,27,0.95)]',
         status === 'running' && 'border-[rgba(11,165,236,0.8)] bg-workflow-display-normal-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-running.svg)] text-util-colors-blue-light-blue-light-600',
         status === 'running' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(11,165,236,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
-        status === 'running' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(11,165,236,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
+        status === 'running' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(11,165,236,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24,24,27,0.95)]',
       )}
     >
       <div className={cn(

web/app/components/workflow/variable-inspect/utils.tsx

@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import * as z from 'zod'
 
 const arrayStringSchemaParttern = z.array(z.string())
 const arrayNumberSchemaParttern = z.array(z.number())
@@ -7,7 +7,7 @@ const arrayNumberSchemaParttern = z.array(z.number())
 const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()])
 type Literal = z.infer<typeof literalSchema>
 type Json = Literal | { [key: string]: Json } | Json[]
-const jsonSchema: z.ZodType<Json> = z.lazy(() => z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]))
+const jsonSchema: z.ZodType<Json> = z.lazy(() => z.union([literalSchema, z.array(jsonSchema), z.record(z.string(), jsonSchema)]))
 const arrayJsonSchema: z.ZodType<Json[]> = z.lazy(() => z.array(jsonSchema))
 
 export const validateJSONSchema = (schema: any, type: string) => {

web/app/forgot-password/ForgotPasswordForm.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { z } from 'zod'
+import * as z from 'zod'
 import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
@@ -22,10 +22,10 @@ import Input from '../components/base/input'
 import Loading from '../components/base/loading'
 
 const accountFormSchema = z.object({
-  email: z
-    .string()
-    .min(1, { message: 'error.emailInValid' })
-    .email('error.emailInValid'),
+  email: z.email('error.emailInValid')
+    .min(1, {
+      error: 'error.emailInValid',
+    }),
 })
 
 const ForgotPasswordForm = () => {

web/app/install/installForm.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { z } from 'zod'
+import * as z from 'zod'
 import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
@@ -22,13 +22,15 @@ import { encryptPassword as encodePassword } from '@/utils/encryption'
 import Loading from '../components/base/loading'
 
 const accountFormSchema = z.object({
-  email: z
-    .string()
-    .min(1, { message: 'error.emailInValid' })
-    .email('error.emailInValid'),
-  name: z.string().min(1, { message: 'error.nameEmpty' }),
+  email: z.email('error.emailInValid')
+    .min(1, {
+      error: 'error.emailInValid',
+    }),
+  name: z.string().min(1, {
+    error: 'error.nameEmpty',
+  }),
   password: z.string().min(8, {
-    message: 'error.passwordLengthInValid',
+    error: 'error.passwordLengthInValid',
   }).regex(validPassword, 'error.passwordInvalid'),
 })
 
@@ -197,7 +199,7 @@ const InstallForm = () => {
                       </div>
 
                       <div className={cn('mt-1 text-xs text-text-secondary', {
-                        'text-red-400 !text-sm': passwordErrors && passwordErrors.length > 0,
+                        '!text-sm text-red-400': passwordErrors && passwordErrors.length > 0,
                       })}
                       >
                         {t('error.passwordInvalid', { ns: 'login' })}

web/app/layout.tsx

@@ -5,8 +5,8 @@ import { Instrument_Serif } from 'next/font/google'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
+import { getDatasetMap } from '@/env'
 import { getLocaleOnServer } from '@/i18n-config/server'
-import { DatasetAttr } from '@/types/feature'
 import { cn } from '@/utils/classnames'
 import { ToastProvider } from './components/base/toast'
 import BrowserInitializer from './components/browser-initializer'
@@ -39,40 +39,7 @@ const LocaleLayout = async ({
   children: React.ReactNode
 }) => {
   const locale = await getLocaleOnServer()
-
-  const datasetMap: Record<DatasetAttr, string | undefined> = {
-    [DatasetAttr.DATA_API_PREFIX]: process.env.NEXT_PUBLIC_API_PREFIX,
-    [DatasetAttr.DATA_PUBLIC_API_PREFIX]: process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX,
-    [DatasetAttr.DATA_MARKETPLACE_API_PREFIX]: process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX,
-    [DatasetAttr.DATA_MARKETPLACE_URL_PREFIX]: process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX,
-    [DatasetAttr.DATA_PUBLIC_EDITION]: process.env.NEXT_PUBLIC_EDITION,
-    [DatasetAttr.DATA_PUBLIC_AMPLITUDE_API_KEY]: process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
-    [DatasetAttr.DATA_PUBLIC_COOKIE_DOMAIN]: process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
-    [DatasetAttr.DATA_PUBLIC_SUPPORT_MAIL_LOGIN]: process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN,
-    [DatasetAttr.DATA_PUBLIC_SENTRY_DSN]: process.env.NEXT_PUBLIC_SENTRY_DSN,
-    [DatasetAttr.DATA_PUBLIC_MAINTENANCE_NOTICE]: process.env.NEXT_PUBLIC_MAINTENANCE_NOTICE,
-    [DatasetAttr.DATA_PUBLIC_SITE_ABOUT]: process.env.NEXT_PUBLIC_SITE_ABOUT,
-    [DatasetAttr.DATA_PUBLIC_TEXT_GENERATION_TIMEOUT_MS]: process.env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS,
-    [DatasetAttr.DATA_PUBLIC_MAX_TOOLS_NUM]: process.env.NEXT_PUBLIC_MAX_TOOLS_NUM,
-    [DatasetAttr.DATA_PUBLIC_MAX_PARALLEL_LIMIT]: process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT,
-    [DatasetAttr.DATA_PUBLIC_TOP_K_MAX_VALUE]: process.env.NEXT_PUBLIC_TOP_K_MAX_VALUE,
-    [DatasetAttr.DATA_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH]: process.env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH,
-    [DatasetAttr.DATA_PUBLIC_LOOP_NODE_MAX_COUNT]: process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT,
-    [DatasetAttr.DATA_PUBLIC_MAX_ITERATIONS_NUM]: process.env.NEXT_PUBLIC_MAX_ITERATIONS_NUM,
-    [DatasetAttr.DATA_PUBLIC_MAX_TREE_DEPTH]: process.env.NEXT_PUBLIC_MAX_TREE_DEPTH,
-    [DatasetAttr.DATA_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME]: process.env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME,
-    [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER,
-    [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
-    [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
-    [DatasetAttr.DATA_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX]: process.env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX,
-    [DatasetAttr.NEXT_PUBLIC_ZENDESK_WIDGET_KEY]: process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
-    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
-    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
-    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
-    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
-    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
-    [DatasetAttr.DATA_PUBLIC_BATCH_CONCURRENCY]: process.env.NEXT_PUBLIC_BATCH_CONCURRENCY,
-  }
+  const datasetMap = getDatasetMap()
 
   return (
     <html lang={locale ?? 'en'} className={cn('h-full', instrumentSerif.variable)} suppressHydrationWarning>

web/app/serwist/[path]/route.ts

@@ -1,6 +1,7 @@
 import { createSerwistRoute } from '@serwist/turbopack'
+import { env } from '@/env'
 
-const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''
+const basePath = env.NEXT_PUBLIC_BASE_PATH
 
 export const { dynamic, dynamicParams, revalidate, generateStaticParams, GET } = createSerwistRoute({
   swSrc: 'app/sw.ts',

web/config/index.ts

@@ -1,101 +1,51 @@
 import type { ModelParameterRule } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { InputVarType } from '@/app/components/workflow/types'
+import { env } from '@/env'
 import { PromptRole } from '@/models/debug'
 import { PipelineInputVarType } from '@/models/pipeline'
 import { AgentStrategy } from '@/types/app'
-import { DatasetAttr } from '@/types/feature'
 import pkg from '../package.json'
 
-const getBooleanConfig = (
-  envVar: string | undefined,
-  dataAttrKey: DatasetAttr,
-  defaultValue: boolean = true,
-) => {
-  if (envVar !== undefined && envVar !== '')
-    return envVar === 'true'
-  const attrValue = globalThis.document?.body?.getAttribute(dataAttrKey)
-  if (attrValue !== undefined && attrValue !== '')
-    return attrValue === 'true'
-  return defaultValue
-}
-
-const getNumberConfig = (
-  envVar: string | undefined,
-  dataAttrKey: DatasetAttr,
-  defaultValue: number,
-) => {
-  if (envVar) {
-    const parsed = Number.parseInt(envVar)
-    if (!Number.isNaN(parsed) && parsed > 0)
-      return parsed
-  }
-
-  const attrValue = globalThis.document?.body?.getAttribute(dataAttrKey)
-  if (attrValue) {
-    const parsed = Number.parseInt(attrValue)
-    if (!Number.isNaN(parsed) && parsed > 0)
-      return parsed
-  }
-  return defaultValue
-}
-
 const getStringConfig = (
   envVar: string | undefined,
-  dataAttrKey: DatasetAttr,
   defaultValue: string,
 ) => {
   if (envVar)
     return envVar
-
-  const attrValue = globalThis.document?.body?.getAttribute(dataAttrKey)
-  if (attrValue)
-    return attrValue
   return defaultValue
 }
 
 export const API_PREFIX = getStringConfig(
-  process.env.NEXT_PUBLIC_API_PREFIX,
-  DatasetAttr.DATA_API_PREFIX,
+  env.NEXT_PUBLIC_API_PREFIX,
   'http://localhost:5001/console/api',
 )
 export const PUBLIC_API_PREFIX = getStringConfig(
-  process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX,
-  DatasetAttr.DATA_PUBLIC_API_PREFIX,
+  env.NEXT_PUBLIC_PUBLIC_API_PREFIX,
   'http://localhost:5001/api',
 )
 export const MARKETPLACE_API_PREFIX = getStringConfig(
-  process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX,
-  DatasetAttr.DATA_MARKETPLACE_API_PREFIX,
+  env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX,
   'http://localhost:5002/api',
 )
 export const MARKETPLACE_URL_PREFIX = getStringConfig(
-  process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX,
-  DatasetAttr.DATA_MARKETPLACE_URL_PREFIX,
+  env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX,
   '',
 )
 
-const EDITION = getStringConfig(
-  process.env.NEXT_PUBLIC_EDITION,
-  DatasetAttr.DATA_PUBLIC_EDITION,
-  'SELF_HOSTED',
-)
+const EDITION = env.NEXT_PUBLIC_EDITION
 
 export const IS_CE_EDITION = EDITION === 'SELF_HOSTED'
 export const IS_CLOUD_EDITION = EDITION === 'CLOUD'
 
 export const AMPLITUDE_API_KEY = getStringConfig(
-  process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
-  DatasetAttr.DATA_PUBLIC_AMPLITUDE_API_KEY,
+  env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
   '',
 )
 
-export const IS_DEV = process.env.NODE_ENV === 'development'
-export const IS_PROD = process.env.NODE_ENV === 'production'
+export const IS_DEV = env.NODE_ENV === 'development'
+export const IS_PROD = env.NODE_ENV === 'production'
 
-export const SUPPORT_MAIL_LOGIN = !!(
-  process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN
-  || globalThis.document?.body?.getAttribute('data-public-support-mail-login')
-)
+export const SUPPORT_MAIL_LOGIN = env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN
 
 export const TONE_LIST = [
   {
@@ -161,16 +111,11 @@ export const getMaxToken = (modelId: string) => {
 export const LOCALE_COOKIE_NAME = 'locale'
 
 const COOKIE_DOMAIN = getStringConfig(
-  process.env.NEXT_PUBLIC_COOKIE_DOMAIN,
-  DatasetAttr.DATA_PUBLIC_COOKIE_DOMAIN,
+  env.NEXT_PUBLIC_COOKIE_DOMAIN,
   '',
 ).trim()
 
-export const BATCH_CONCURRENCY = getNumberConfig(
-  process.env.NEXT_PUBLIC_BATCH_CONCURRENCY,
-  DatasetAttr.DATA_PUBLIC_BATCH_CONCURRENCY,
-  5, // default
-)
+export const BATCH_CONCURRENCY = env.NEXT_PUBLIC_BATCH_CONCURRENCY
 
 export const CSRF_COOKIE_NAME = () => {
   if (COOKIE_DOMAIN)
@@ -344,112 +289,62 @@ export const resetReg = () => (VAR_REGEX.lastIndex = 0)
 export const HITL_INPUT_REG = /\{\{(#\$output\.(?:[a-z_]\w{0,29}){1,10}#)\}\}/gi
 export const resetHITLInputReg = () => HITL_INPUT_REG.lastIndex = 0
 
-export const DISABLE_UPLOAD_IMAGE_AS_ICON = process.env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON === 'true'
+export const DISABLE_UPLOAD_IMAGE_AS_ICON = env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON
 
 export const GITHUB_ACCESS_TOKEN
-  = process.env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN || ''
+  = env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN
 
 export const SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS = '.difypkg,.difybndl'
 export const FULL_DOC_PREVIEW_LENGTH = 50
 
 export const JSON_SCHEMA_MAX_DEPTH = 10
 
-export const MAX_TOOLS_NUM = getNumberConfig(
-  process.env.NEXT_PUBLIC_MAX_TOOLS_NUM,
-  DatasetAttr.DATA_PUBLIC_MAX_TOOLS_NUM,
-  10,
-)
-export const MAX_PARALLEL_LIMIT = getNumberConfig(
-  process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT,
-  DatasetAttr.DATA_PUBLIC_MAX_PARALLEL_LIMIT,
-  10,
-)
-export const TEXT_GENERATION_TIMEOUT_MS = getNumberConfig(
-  process.env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS,
-  DatasetAttr.DATA_PUBLIC_TEXT_GENERATION_TIMEOUT_MS,
-  60000,
-)
-export const LOOP_NODE_MAX_COUNT = getNumberConfig(
-  process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT,
-  DatasetAttr.DATA_PUBLIC_LOOP_NODE_MAX_COUNT,
-  100,
-)
-export const MAX_ITERATIONS_NUM = getNumberConfig(
-  process.env.NEXT_PUBLIC_MAX_ITERATIONS_NUM,
-  DatasetAttr.DATA_PUBLIC_MAX_ITERATIONS_NUM,
-  99,
-)
-export const MAX_TREE_DEPTH = getNumberConfig(
-  process.env.NEXT_PUBLIC_MAX_TREE_DEPTH,
-  DatasetAttr.DATA_PUBLIC_MAX_TREE_DEPTH,
-  50,
-)
+export const MAX_TOOLS_NUM = env.NEXT_PUBLIC_MAX_TOOLS_NUM
+export const MAX_PARALLEL_LIMIT = env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT
+export const TEXT_GENERATION_TIMEOUT_MS = env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS
+export const LOOP_NODE_MAX_COUNT = env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT
+export const MAX_ITERATIONS_NUM = env.NEXT_PUBLIC_MAX_ITERATIONS_NUM
+export const MAX_TREE_DEPTH = env.NEXT_PUBLIC_MAX_TREE_DEPTH
 
-export const ALLOW_UNSAFE_DATA_SCHEME = getBooleanConfig(
-  process.env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME,
-  DatasetAttr.DATA_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME,
-  false,
-)
-export const ENABLE_WEBSITE_JINAREADER = getBooleanConfig(
-  process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER,
-  DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER,
-  true,
-)
-export const ENABLE_WEBSITE_FIRECRAWL = getBooleanConfig(
-  process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
-  DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
-  true,
-)
-export const ENABLE_WEBSITE_WATERCRAWL = getBooleanConfig(
-  process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
-  DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
-  false,
-)
-export const ENABLE_SINGLE_DOLLAR_LATEX = getBooleanConfig(
-  process.env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX,
-  DatasetAttr.DATA_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX,
-  false,
-)
+export const ALLOW_UNSAFE_DATA_SCHEME = env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME
+export const ENABLE_WEBSITE_JINAREADER = env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER
+export const ENABLE_WEBSITE_FIRECRAWL = env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL
+export const ENABLE_WEBSITE_WATERCRAWL = env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL
+export const ENABLE_SINGLE_DOLLAR_LATEX = env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX
 
 export const VALUE_SELECTOR_DELIMITER = '@@@'
 
 export const validPassword = /^(?=.*[a-z])(?=.*\d)\S{8,}$/i
 
 export const ZENDESK_WIDGET_KEY = getStringConfig(
-  process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
-  DatasetAttr.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
+  env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
   '',
 )
 export const ZENDESK_FIELD_IDS = {
   ENVIRONMENT: getStringConfig(
-    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
-    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
+    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
     '',
   ),
   VERSION: getStringConfig(
-    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
-    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
+    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
     '',
   ),
   EMAIL: getStringConfig(
-    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
-    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
+    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
     '',
   ),
   WORKSPACE_ID: getStringConfig(
-    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
-    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
+    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
     '',
   ),
   PLAN: getStringConfig(
-    process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
-    DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
+    env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
     '',
   ),
 }
 export const APP_VERSION = pkg.version
 
-export const IS_MARKETPLACE = globalThis.document?.body?.getAttribute('data-is-marketplace') === 'true'
+export const IS_MARKETPLACE = env.NEXT_PUBLIC_IS_MARKETPLACE
 
 export const RAG_PIPELINE_PREVIEW_CHUNK_NUM = 20
 

web/context/app-context.tsx

@@ -10,6 +10,7 @@ import { setUserId, setUserProperties } from '@/app/components/base/amplitude'
 import { setZendeskConversationFields } from '@/app/components/base/zendesk/utils'
 import MaintenanceNotice from '@/app/components/header/maintenance-notice'
 import { ZENDESK_FIELD_IDS } from '@/config'
+import { env } from '@/env'
 import {
   useCurrentWorkspace,
   useLangGeniusVersion,
@@ -204,7 +205,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
     }}
     >
       <div className="flex h-full flex-col overflow-y-auto">
-        {globalThis.document?.body?.getAttribute('data-public-maintenance-notice') && <MaintenanceNotice />}
+        {env.NEXT_PUBLIC_MAINTENANCE_NOTICE && <MaintenanceNotice />}
         <div className="relative flex grow flex-col overflow-y-auto overflow-x-hidden bg-background-body">
           {children}
         </div>

web/context/event-emitter.tsx

@@ -4,7 +4,19 @@ import type { EventEmitter } from 'ahooks/lib/useEventEmitter'
 import { useEventEmitter } from 'ahooks'
 import { createContext, useContext } from 'use-context-selector'
 
-const EventEmitterContext = createContext<{ eventEmitter: EventEmitter<string> | null }>({
+/**
+ * Typed event object emitted via the shared EventEmitter.
+ * Covers workflow updates, prompt-editor commands, DSL export checks, etc.
+ */
+export type EventEmitterMessage = {
+  type: string
+  payload?: unknown
+  instanceId?: string
+}
+
+export type EventEmitterValue = string | EventEmitterMessage
+
+const EventEmitterContext = createContext<{ eventEmitter: EventEmitter<EventEmitterValue> | null }>({
   eventEmitter: null,
 })
 
@@ -16,7 +28,7 @@ type EventEmitterContextProviderProps = {
 export const EventEmitterContextProvider = ({
   children,
 }: EventEmitterContextProviderProps) => {
-  const eventEmitter = useEventEmitter<string>()
+  const eventEmitter = useEventEmitter<EventEmitterValue>()
 
   return (
     <EventEmitterContext.Provider value={{ eventEmitter }}>

web/env.ts

@@ -0,0 +1,235 @@
+import type { CamelCase, Replace } from 'string-ts'
+import { createEnv } from '@t3-oss/env-nextjs'
+import { concat, kebabCase, length, slice } from 'string-ts'
+import * as z from 'zod'
+import { isClient, isServer } from './utils/client'
+import { ObjectFromEntries, ObjectKeys } from './utils/object'
+
+const CLIENT_ENV_PREFIX = 'NEXT_PUBLIC_'
+type ClientSchema = Record<`${typeof CLIENT_ENV_PREFIX}${string}`, z.ZodType>
+
+const coercedBoolean = z.string()
+  .refine(s => s === 'true' || s === 'false' || s === '0' || s === '1')
+  .transform(s => s === 'true' || s === '1')
+const coercedNumber = z.coerce.number().int().positive()
+
+/// keep-sorted
+const clientSchema = {
+  /**
+   * Default is not allow to embed into iframe to prevent Clickjacking: https://owasp.org/www-community/attacks/Clickjacking
+   */
+  NEXT_PUBLIC_ALLOW_EMBED: coercedBoolean.default(false),
+  /**
+   * Allow rendering unsafe URLs which have "data:" scheme.
+   */
+  NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME: coercedBoolean.default(false),
+  /**
+   * The API key of amplitude
+   */
+  NEXT_PUBLIC_AMPLITUDE_API_KEY: z.string().optional(),
+  /**
+   * The base URL of console application, refers to the Console base URL of WEB service if console domain is
+   * different from api or web app domain.
+   * example: http://cloud.dify.ai/console/api
+   */
+  NEXT_PUBLIC_API_PREFIX: z.string().optional(),
+  /**
+   * The base path for the application
+   */
+  NEXT_PUBLIC_BASE_PATH: z.string().regex(/^\/.*[^/]$/).or(z.literal('')).default(''),
+  /**
+   * number of concurrency
+   */
+  NEXT_PUBLIC_BATCH_CONCURRENCY: coercedNumber.default(5),
+  /**
+   * When the frontend and backend run on different subdomains, set NEXT_PUBLIC_COOKIE_DOMAIN=1.
+   */
+  NEXT_PUBLIC_COOKIE_DOMAIN: z.string().optional(),
+  /**
+   * CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+   */
+  NEXT_PUBLIC_CSP_WHITELIST: z.string().optional(),
+  /**
+   * For production release, change this to PRODUCTION
+   */
+  NEXT_PUBLIC_DEPLOY_ENV: z.enum(['DEVELOPMENT', 'PRODUCTION', 'TESTING']).optional(),
+  NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON: coercedBoolean.default(false),
+  /**
+   * The deployment edition, SELF_HOSTED
+   */
+  NEXT_PUBLIC_EDITION: z.enum(['SELF_HOSTED', 'CLOUD']).default('SELF_HOSTED'),
+  /**
+   * Enable inline LaTeX rendering with single dollar signs ($...$)
+   * Default is false for security reasons to prevent conflicts with regular text
+   */
+  NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX: coercedBoolean.default(false),
+  NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL: coercedBoolean.default(true),
+  NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER: coercedBoolean.default(true),
+  NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL: coercedBoolean.default(false),
+  /**
+   * Github Access Token, used for invoking Github API
+   */
+  NEXT_PUBLIC_GITHUB_ACCESS_TOKEN: z.string().optional(),
+  /**
+   * The maximum number of tokens for segmentation
+   */
+  NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: coercedNumber.default(4000),
+  NEXT_PUBLIC_IS_MARKETPLACE: coercedBoolean.default(false),
+  /**
+   * Maximum loop count in the workflow
+   */
+  NEXT_PUBLIC_LOOP_NODE_MAX_COUNT: coercedNumber.default(100),
+  NEXT_PUBLIC_MAINTENANCE_NOTICE: z.string().optional(),
+  /**
+   * The API PREFIX for MARKETPLACE
+   */
+  NEXT_PUBLIC_MARKETPLACE_API_PREFIX: z.url().optional(),
+  /**
+   * The URL for MARKETPLACE
+   */
+  NEXT_PUBLIC_MARKETPLACE_URL_PREFIX: z.url().optional(),
+  /**
+   * The maximum number of iterations for agent setting
+   */
+  NEXT_PUBLIC_MAX_ITERATIONS_NUM: coercedNumber.default(99),
+  /**
+   * Maximum number of Parallelism branches in the workflow
+   */
+  NEXT_PUBLIC_MAX_PARALLEL_LIMIT: coercedNumber.default(10),
+  /**
+   * Maximum number of tools in the agent/workflow
+   */
+  NEXT_PUBLIC_MAX_TOOLS_NUM: coercedNumber.default(10),
+  /**
+   * The maximum number of tree node depth for workflow
+   */
+  NEXT_PUBLIC_MAX_TREE_DEPTH: coercedNumber.default(50),
+  /**
+   * The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from
+   * console or api domain.
+   * example: http://udify.app/api
+   */
+  NEXT_PUBLIC_PUBLIC_API_PREFIX: z.string().optional(),
+  /**
+   * SENTRY
+   */
+  NEXT_PUBLIC_SENTRY_DSN: z.string().optional(),
+  NEXT_PUBLIC_SITE_ABOUT: z.string().optional(),
+  NEXT_PUBLIC_SUPPORT_MAIL_LOGIN: coercedBoolean.default(false),
+  /**
+   * The timeout for the text generation in millisecond
+   */
+  NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS: coercedNumber.default(60000),
+  /**
+   * The maximum number of top-k value for RAG.
+   */
+  NEXT_PUBLIC_TOP_K_MAX_VALUE: coercedNumber.default(10),
+  /**
+   * Disable Upload Image as WebApp icon default is false
+   */
+  NEXT_PUBLIC_UPLOAD_IMAGE_AS_ICON: coercedBoolean.default(false),
+  NEXT_PUBLIC_WEB_PREFIX: z.url().optional(),
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL: z.string().optional(),
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT: z.string().optional(),
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN: z.string().optional(),
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION: z.string().optional(),
+  NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID: z.string().optional(),
+  NEXT_PUBLIC_ZENDESK_WIDGET_KEY: z.string().optional(),
+} satisfies ClientSchema
+
+export const env = createEnv({
+  server: {
+    /**
+     * Maximum length of segmentation tokens for indexing
+     */
+    INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: coercedNumber.default(4000),
+    /**
+     * Disable Next.js Telemetry (https://nextjs.org/telemetry)
+     */
+    NEXT_TELEMETRY_DISABLED: coercedBoolean.optional(),
+    PORT: coercedNumber.default(3000),
+    /**
+     * The timeout for the text generation in millisecond
+     */
+    TEXT_GENERATION_TIMEOUT_MS: coercedNumber.default(60000),
+  },
+  shared: {
+    NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
+  },
+  client: clientSchema,
+  experimental__runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    NEXT_PUBLIC_ALLOW_EMBED: isServer ? process.env.NEXT_PUBLIC_ALLOW_EMBED : getRuntimeEnvFromBody('allowEmbed'),
+    NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME: isServer ? process.env.NEXT_PUBLIC_ALLOW_UNSAFE_DATA_SCHEME : getRuntimeEnvFromBody('allowUnsafeDataScheme'),
+    NEXT_PUBLIC_AMPLITUDE_API_KEY: isServer ? process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY : getRuntimeEnvFromBody('amplitudeApiKey'),
+    NEXT_PUBLIC_API_PREFIX: isServer ? process.env.NEXT_PUBLIC_API_PREFIX : getRuntimeEnvFromBody('apiPrefix'),
+    NEXT_PUBLIC_BASE_PATH: isServer ? process.env.NEXT_PUBLIC_BASE_PATH : getRuntimeEnvFromBody('basePath'),
+    NEXT_PUBLIC_BATCH_CONCURRENCY: isServer ? process.env.NEXT_PUBLIC_BATCH_CONCURRENCY : getRuntimeEnvFromBody('batchConcurrency'),
+    NEXT_PUBLIC_COOKIE_DOMAIN: isServer ? process.env.NEXT_PUBLIC_COOKIE_DOMAIN : getRuntimeEnvFromBody('cookieDomain'),
+    NEXT_PUBLIC_CSP_WHITELIST: isServer ? process.env.NEXT_PUBLIC_CSP_WHITELIST : getRuntimeEnvFromBody('cspWhitelist'),
+    NEXT_PUBLIC_DEPLOY_ENV: isServer ? process.env.NEXT_PUBLIC_DEPLOY_ENV : getRuntimeEnvFromBody('deployEnv'),
+    NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON: isServer ? process.env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON : getRuntimeEnvFromBody('disableUploadImageAsIcon'),
+    NEXT_PUBLIC_EDITION: isServer ? process.env.NEXT_PUBLIC_EDITION : getRuntimeEnvFromBody('edition'),
+    NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX: isServer ? process.env.NEXT_PUBLIC_ENABLE_SINGLE_DOLLAR_LATEX : getRuntimeEnvFromBody('enableSingleDollarLatex'),
+    NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL: isServer ? process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL : getRuntimeEnvFromBody('enableWebsiteFirecrawl'),
+    NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER: isServer ? process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER : getRuntimeEnvFromBody('enableWebsiteJinareader'),
+    NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL: isServer ? process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL : getRuntimeEnvFromBody('enableWebsiteWatercrawl'),
+    NEXT_PUBLIC_GITHUB_ACCESS_TOKEN: isServer ? process.env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN : getRuntimeEnvFromBody('githubAccessToken'),
+    NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: isServer ? process.env.NEXT_PUBLIC_INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH : getRuntimeEnvFromBody('indexingMaxSegmentationTokensLength'),
+    NEXT_PUBLIC_IS_MARKETPLACE: isServer ? process.env.NEXT_PUBLIC_IS_MARKETPLACE : getRuntimeEnvFromBody('isMarketplace'),
+    NEXT_PUBLIC_LOOP_NODE_MAX_COUNT: isServer ? process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT : getRuntimeEnvFromBody('loopNodeMaxCount'),
+    NEXT_PUBLIC_MAINTENANCE_NOTICE: isServer ? process.env.NEXT_PUBLIC_MAINTENANCE_NOTICE : getRuntimeEnvFromBody('maintenanceNotice'),
+    NEXT_PUBLIC_MARKETPLACE_API_PREFIX: isServer ? process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX : getRuntimeEnvFromBody('marketplaceApiPrefix'),
+    NEXT_PUBLIC_MARKETPLACE_URL_PREFIX: isServer ? process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX : getRuntimeEnvFromBody('marketplaceUrlPrefix'),
+    NEXT_PUBLIC_MAX_ITERATIONS_NUM: isServer ? process.env.NEXT_PUBLIC_MAX_ITERATIONS_NUM : getRuntimeEnvFromBody('maxIterationsNum'),
+    NEXT_PUBLIC_MAX_PARALLEL_LIMIT: isServer ? process.env.NEXT_PUBLIC_MAX_PARALLEL_LIMIT : getRuntimeEnvFromBody('maxParallelLimit'),
+    NEXT_PUBLIC_MAX_TOOLS_NUM: isServer ? process.env.NEXT_PUBLIC_MAX_TOOLS_NUM : getRuntimeEnvFromBody('maxToolsNum'),
+    NEXT_PUBLIC_MAX_TREE_DEPTH: isServer ? process.env.NEXT_PUBLIC_MAX_TREE_DEPTH : getRuntimeEnvFromBody('maxTreeDepth'),
+    NEXT_PUBLIC_PUBLIC_API_PREFIX: isServer ? process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX : getRuntimeEnvFromBody('publicApiPrefix'),
+    NEXT_PUBLIC_SENTRY_DSN: isServer ? process.env.NEXT_PUBLIC_SENTRY_DSN : getRuntimeEnvFromBody('sentryDsn'),
+    NEXT_PUBLIC_SITE_ABOUT: isServer ? process.env.NEXT_PUBLIC_SITE_ABOUT : getRuntimeEnvFromBody('siteAbout'),
+    NEXT_PUBLIC_SUPPORT_MAIL_LOGIN: isServer ? process.env.NEXT_PUBLIC_SUPPORT_MAIL_LOGIN : getRuntimeEnvFromBody('supportMailLogin'),
+    NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS: isServer ? process.env.NEXT_PUBLIC_TEXT_GENERATION_TIMEOUT_MS : getRuntimeEnvFromBody('textGenerationTimeoutMs'),
+    NEXT_PUBLIC_TOP_K_MAX_VALUE: isServer ? process.env.NEXT_PUBLIC_TOP_K_MAX_VALUE : getRuntimeEnvFromBody('topKMaxValue'),
+    NEXT_PUBLIC_UPLOAD_IMAGE_AS_ICON: isServer ? process.env.NEXT_PUBLIC_UPLOAD_IMAGE_AS_ICON : getRuntimeEnvFromBody('uploadImageAsIcon'),
+    NEXT_PUBLIC_WEB_PREFIX: isServer ? process.env.NEXT_PUBLIC_WEB_PREFIX : getRuntimeEnvFromBody('webPrefix'),
+    NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL : getRuntimeEnvFromBody('zendeskFieldIdEmail'),
+    NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT : getRuntimeEnvFromBody('zendeskFieldIdEnvironment'),
+    NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN : getRuntimeEnvFromBody('zendeskFieldIdPlan'),
+    NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION : getRuntimeEnvFromBody('zendeskFieldIdVersion'),
+    NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID: isServer ? process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID : getRuntimeEnvFromBody('zendeskFieldIdWorkspaceId'),
+    NEXT_PUBLIC_ZENDESK_WIDGET_KEY: isServer ? process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY : getRuntimeEnvFromBody('zendeskWidgetKey'),
+  },
+  emptyStringAsUndefined: true,
+})
+
+type ClientEnvKey = keyof typeof clientSchema
+type DatasetKey = CamelCase<Replace<ClientEnvKey, typeof CLIENT_ENV_PREFIX>>
+
+/**
+ * Browser-only function to get runtime env value from HTML body dataset.
+ */
+function getRuntimeEnvFromBody(key: DatasetKey) {
+  if (typeof window === 'undefined') {
+    throw new TypeError('getRuntimeEnvFromBody can only be called in the browser')
+  }
+
+  const value = document.body.dataset[key]
+  return value || undefined
+}
+
+/**
+ * Server-only function to get dataset map for embedding into the HTML body.
+ */
+export function getDatasetMap() {
+  if (isClient) {
+    throw new TypeError('getDatasetMap can only be called on the server')
+  }
+  return ObjectFromEntries(
+    ObjectKeys(clientSchema)
+      .map(envKey => [
+        concat('data-', kebabCase(slice(envKey, length(CLIENT_ENV_PREFIX)))),
+        env[envKey],
+      ]),
+  )
+}

web/eslint-rules/index.js

@@ -2,9 +2,7 @@ import consistentPlaceholders from './rules/consistent-placeholders.js'
 import noAsAnyInT from './rules/no-as-any-in-t.js'
 import noExtraKeys from './rules/no-extra-keys.js'
 import noLegacyNamespacePrefix from './rules/no-legacy-namespace-prefix.js'
-import noVersionPrefix from './rules/no-version-prefix.js'
 import requireNsOption from './rules/require-ns-option.js'
-import validI18nKeys from './rules/valid-i18n-keys.js'
 
 /** @type {import('eslint').ESLint.Plugin} */
 const plugin = {
@@ -17,9 +15,7 @@ const plugin = {
     'no-as-any-in-t': noAsAnyInT,
     'no-extra-keys': noExtraKeys,
     'no-legacy-namespace-prefix': noLegacyNamespacePrefix,
-    'no-version-prefix': noVersionPrefix,
     'require-ns-option': requireNsOption,
-    'valid-i18n-keys': validI18nKeys,
   },
 }
 

web/eslint-rules/rules/no-version-prefix.js

@@ -1,45 +0,0 @@
-const DEPENDENCY_KEYS = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']
-const VERSION_PREFIXES = ['^', '~']
-
-/** @type {import('eslint').Rule.RuleModule} */
-export default {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: `Ensure package.json dependencies do not use version prefixes (${VERSION_PREFIXES.join(' or ')})`,
-    },
-    fixable: 'code',
-  },
-  create(context) {
-    const { filename } = context
-
-    if (!filename.endsWith('package.json'))
-      return {}
-
-    const selector = `JSONProperty:matches(${DEPENDENCY_KEYS.map(k => `[key.value="${k}"]`).join(', ')}) > JSONObjectExpression > JSONProperty`
-
-    return {
-      [selector](node) {
-        const versionNode = node.value
-
-        if (versionNode && versionNode.type === 'JSONLiteral' && typeof versionNode.value === 'string') {
-          const version = versionNode.value
-          const foundPrefix = VERSION_PREFIXES.find(prefix => version.startsWith(prefix))
-
-          if (foundPrefix) {
-            const packageName = node.key.value || node.key.name
-            const cleanVersion = version.substring(1)
-            const canAutoFix = /^\d+\.\d+\.\d+$/.test(cleanVersion)
-            context.report({
-              node: versionNode,
-              message: `Dependency "${packageName}" has version prefix "${foundPrefix}" that should be removed (found: "${version}", expected: "${cleanVersion}")`,
-              fix: canAutoFix
-                ? fixer => fixer.replaceText(versionNode, `"${cleanVersion}"`)
-                : undefined,
-            })
-          }
-        }
-      },
-    }
-  },
-}

web/eslint-rules/rules/valid-i18n-keys.js

@@ -1,61 +0,0 @@
-import { cleanJsonText } from '../utils.js'
-
-/** @type {import('eslint').Rule.RuleModule} */
-export default {
-  meta: {
-    type: 'problem',
-    docs: {
-      description: 'Ensure i18n JSON keys are flat and valid as object paths',
-    },
-  },
-  create(context) {
-    return {
-      Program(node) {
-        const { filename, sourceCode } = context
-
-        if (!filename.endsWith('.json'))
-          return
-
-        let json
-        try {
-          json = JSON.parse(cleanJsonText(sourceCode.text))
-        }
-        catch {
-          context.report({
-            node,
-            message: 'Invalid JSON format',
-          })
-          return
-        }
-
-        const keys = Object.keys(json)
-        const keyPrefixes = new Set()
-
-        for (const key of keys) {
-          if (key.includes('.')) {
-            const parts = key.split('.')
-            for (let i = 1; i < parts.length; i++) {
-              const prefix = parts.slice(0, i).join('.')
-              if (keys.includes(prefix)) {
-                context.report({
-                  node,
-                  message: `Invalid key structure: '${key}' conflicts with '${prefix}'`,
-                })
-              }
-              keyPrefixes.add(prefix)
-            }
-          }
-        }
-
-        for (const key of keys) {
-          if (keyPrefixes.has(key)) {
-            context.report({
-              node,
-              message: `Invalid key structure: '${key}' is a prefix of another key`,
-            })
-          }
-        }
-      },
-    }
-  },
-}

web/eslint.config.mjs

@@ -1,11 +1,16 @@
 // @ts-check
-import antfu from '@antfu/eslint-config'
+import antfu, { GLOB_TESTS, GLOB_TS, GLOB_TSX } from '@antfu/eslint-config'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import tailwindcss from 'eslint-plugin-better-tailwindcss'
+import hyoban from 'eslint-plugin-hyoban'
 import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
 import dify from './eslint-rules/index.js'
 
+// Enable Tailwind CSS IntelliSense mode for ESLint runs
+// See: tailwind-css-plugin.ts
+process.env.TAILWIND_MODE ??= 'ESLINT'
+
 export default antfu(
   {
     react: {
@@ -67,7 +72,8 @@ export default antfu(
     },
   },
   {
-    files: ['**/*.{ts,tsx}'],
+    files: [GLOB_TS, GLOB_TSX],
+    ignores: GLOB_TESTS,
     plugins: {
       tailwindcss,
     },
@@ -79,7 +85,47 @@ export default antfu(
     },
   },
   {
-    plugins: { dify },
+    name: 'dify/custom/setup',
+    plugins: {
+      dify,
+      hyoban,
+    },
+  },
+  {
+    files: ['**/*.tsx'],
+    rules: {
+      'hyoban/prefer-tailwind-icons': ['warn', {
+        prefix: 'i-',
+        propMappings: {
+          size: 'size',
+          width: 'w',
+          height: 'h',
+        },
+        libraries: [
+          {
+            prefix: 'i-custom-',
+            source: '^@/app/components/base/icons/src/(?<set>(?:public|vender)(?:/.*)?)$',
+            name: '^(?<name>.*)$',
+          },
+          {
+            source: '^@remixicon/react$',
+            name: '^(?<set>Ri)(?<name>.+)$',
+          },
+          {
+            source: '^@(?<set>heroicons)/react/24/outline$',
+            name: '^(?<name>.*)Icon$',
+          },
+          {
+            source: '^@(?<set>heroicons)/react/24/(?<variant>solid)$',
+            name: '^(?<name>.*)Icon$',
+          },
+          {
+            source: '^@(?<set>heroicons)/react/(?<variant>\\d+/(?:solid|outline))$',
+            name: '^(?<name>.*)Icon$',
+          },
+        ],
+      }],
+    },
   },
   {
     files: ['i18n/**/*.json'],
@@ -88,7 +134,7 @@ export default antfu(
       'max-lines': 'off',
       'jsonc/sort-keys': 'error',
 
-      'dify/valid-i18n-keys': 'error',
+      'hyoban/i18n-flat-key': 'error',
       'dify/no-extra-keys': 'error',
       'dify/consistent-placeholders': 'error',
     },
@@ -96,7 +142,7 @@ export default antfu(
   {
     files: ['**/package.json'],
     rules: {
-      'dify/no-version-prefix': 'error',
+      'hyoban/no-dependency-version-prefix': 'error',
     },
   },
 )