diff --git a/api/.env.example b/api/.env.example
index b1ac15d25b..24f496a7b1 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -33,6 +33,9 @@ TRIGGER_URL=http://localhost:5001
 # The time in seconds after the signature is rejected
 FILES_ACCESS_TIMEOUT=300
 
+# Collaboration mode toggle
+ENABLE_COLLABORATION_MODE=false
+
 # Access token expiration time in minutes
 ACCESS_TOKEN_EXPIRE_MINUTES=60
 
diff --git a/api/app.py b/api/app.py
index 99f70f32d5..ee0f91de3b 100644
--- a/api/app.py
+++ b/api/app.py
@@ -1,3 +1,4 @@
+import os
 import sys
 
 
@@ -8,10 +9,16 @@ def is_db_command() -> bool:
 
 
 # create app
+celery = None
+flask_app = None
+socketio_app = None
+
 if is_db_command():
     from app_factory import create_migrations_app
 
     app = create_migrations_app()
+    socketio_app = app
+    flask_app = app
 else:
     # Gunicorn and Celery handle monkey patching automatically in production by
     # specifying the `gevent` worker class. Manual monkey patching is not required here.
@@ -22,8 +29,15 @@ else:
 
     from app_factory import create_app
 
-    app = create_app()
-    celery = app.extensions["celery"]
+    socketio_app, flask_app = create_app()
+    app = flask_app
+    celery = flask_app.extensions["celery"]
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=5001)
+    from gevent import pywsgi
+    from geventwebsocket.handler import WebSocketHandler
+
+    host = os.environ.get("HOST", "0.0.0.0")
+    port = int(os.environ.get("PORT", 5001))
+    server = pywsgi.WSGIServer((host, port), socketio_app, handler_class=WebSocketHandler)
+    server.serve_forever()
diff --git a/api/app_factory.py b/api/app_factory.py
index 17c376de77..449e67971d 100644
--- a/api/app_factory.py
+++ b/api/app_factory.py
@@ -31,14 +31,22 @@ def create_flask_app_with_configs() -> DifyApp:
     return dify_app
 
 
-def create_app() -> DifyApp:
+def create_app() -> tuple[any, DifyApp]:
     start_time = time.perf_counter()
     app = create_flask_app_with_configs()
     initialize_extensions(app)
+
+    import socketio
+
+    from extensions.ext_socketio import sio
+
+    sio.app = app
+    socketio_app = socketio.WSGIApp(sio, app)
+
     end_time = time.perf_counter()
     if dify_config.DEBUG:
         logger.info("Finished create_app (%s ms)", round((end_time - start_time) * 1000, 2))
-    return app
+    return socketio_app, app
 
 
 def initialize_extensions(app: DifyApp):
diff --git a/api/configs/feature/__init__.py b/api/configs/feature/__init__.py
index ff1f983f94..1ba3eb4ffb 100644
--- a/api/configs/feature/__init__.py
+++ b/api/configs/feature/__init__.py
@@ -1150,6 +1150,13 @@ class PositionConfig(BaseSettings):
         return {item.strip() for item in self.POSITION_TOOL_EXCLUDES.split(",") if item.strip() != ""}
 
 
+class CollaborationConfig(BaseSettings):
+    ENABLE_COLLABORATION_MODE: bool = Field(
+        description="Whether to enable collaboration mode features across the workspace",
+        default=False,
+    )
+
+
 class LoginConfig(BaseSettings):
     ENABLE_EMAIL_CODE_LOGIN: bool = Field(
         description="whether to enable email code login",
@@ -1248,6 +1255,7 @@ class FeatureConfig(
     WorkflowConfig,
     WorkflowNodeExecutionConfig,
     WorkspaceConfig,
+    CollaborationConfig,
     LoginConfig,
     AccountConfig,
     SwaggerUIConfig,
diff --git a/api/controllers/console/__init__.py b/api/controllers/console/__init__.py
index ad878fc266..b341b18778 100644
--- a/api/controllers/console/__init__.py
+++ b/api/controllers/console/__init__.py
@@ -58,11 +58,13 @@ from .app import (
     mcp_server,
     message,
     model_config,
+    online_user,
     ops_trace,
     site,
     statistic,
     workflow,
     workflow_app_log,
+    workflow_comment,
     workflow_draft_variable,
     workflow_run,
     workflow_statistic,
diff --git a/api/controllers/console/app/online_user.py b/api/controllers/console/app/online_user.py
new file mode 100644
index 0000000000..ae829681ce
--- /dev/null
+++ b/api/controllers/console/app/online_user.py
@@ -0,0 +1,339 @@
+import json
+import time
+
+from werkzeug.wrappers import Request as WerkzeugRequest
+
+from extensions.ext_redis import redis_client
+from extensions.ext_socketio import sio
+from libs.passport import PassportService
+from libs.token import extract_access_token
+from services.account_service import AccountService
+
+SESSION_STATE_TTL_SECONDS = 3600
+WORKFLOW_ONLINE_USERS_PREFIX = "workflow_online_users:"
+WORKFLOW_LEADER_PREFIX = "workflow_leader:"
+WS_SID_MAP_PREFIX = "ws_sid_map:"
+
+
+def _workflow_key(workflow_id: str) -> str:
+    return f"{WORKFLOW_ONLINE_USERS_PREFIX}{workflow_id}"
+
+
+def _leader_key(workflow_id: str) -> str:
+    return f"{WORKFLOW_LEADER_PREFIX}{workflow_id}"
+
+
+def _sid_key(sid: str) -> str:
+    return f"{WS_SID_MAP_PREFIX}{sid}"
+
+
+def _refresh_session_state(workflow_id: str, sid: str) -> None:
+    """
+    Refresh TTLs for workflow + session keys so healthy sessions do not linger forever after crashes.
+    """
+    workflow_key = _workflow_key(workflow_id)
+    sid_key = _sid_key(sid)
+    if redis_client.exists(workflow_key):
+        redis_client.expire(workflow_key, SESSION_STATE_TTL_SECONDS)
+    if redis_client.exists(sid_key):
+        redis_client.expire(sid_key, SESSION_STATE_TTL_SECONDS)
+
+
+@sio.on("connect")
+def socket_connect(sid, environ, auth):
+    """
+    WebSocket connect event, do authentication here.
+    """
+    token = None
+    if auth and isinstance(auth, dict):
+        token = auth.get("token")
+
+    if not token:
+        try:
+            request_environ = WerkzeugRequest(environ)
+            token = extract_access_token(request_environ)
+        except Exception:
+            token = None
+
+    if not token:
+        return False
+
+    try:
+        decoded = PassportService().verify(token)
+        user_id = decoded.get("user_id")
+        if not user_id:
+            return False
+
+        with sio.app.app_context():
+            user = AccountService.load_logged_in_account(account_id=user_id)
+            if not user:
+                return False
+
+            sio.save_session(sid, {"user_id": user.id, "username": user.name, "avatar": user.avatar})
+
+            return True
+
+    except Exception:
+        return False
+
+
+@sio.on("user_connect")
+def handle_user_connect(sid, data):
+    """
+    Handle user connect event. Each session (tab) is treated as an independent collaborator.
+    """
+
+    workflow_id = data.get("workflow_id")
+    if not workflow_id:
+        return {"msg": "workflow_id is required"}, 400
+
+    session = sio.get_session(sid)
+    user_id = session.get("user_id")
+
+    if not user_id:
+        return {"msg": "unauthorized"}, 401
+
+    # Each session is stored independently with sid as key
+    session_info = {
+        "user_id": user_id,
+        "username": session.get("username", "Unknown"),
+        "avatar": session.get("avatar", None),
+        "sid": sid,
+        "connected_at": int(time.time()),  # Add timestamp to differentiate tabs
+    }
+
+    workflow_key = _workflow_key(workflow_id)
+    # Store session info with sid as key
+    redis_client.hset(workflow_key, sid, json.dumps(session_info))
+    redis_client.set(
+        _sid_key(sid),
+        json.dumps({"workflow_id": workflow_id, "user_id": user_id}),
+        ex=SESSION_STATE_TTL_SECONDS,
+    )
+    _refresh_session_state(workflow_id, sid)
+
+    # Leader election: first session becomes the leader
+    leader_sid = get_or_set_leader(workflow_id, sid)
+    is_leader = leader_sid == sid
+
+    sio.enter_room(sid, workflow_id)
+    broadcast_online_users(workflow_id)
+
+    # Notify this session of their leader status
+    sio.emit("status", {"isLeader": is_leader}, room=sid)
+
+    return {"msg": "connected", "user_id": user_id, "sid": sid, "isLeader": is_leader}
+
+
+@sio.on("disconnect")
+def handle_disconnect(sid):
+    """
+    Handle session disconnect event. Remove the specific session from online users.
+    """
+    mapping = redis_client.get(_sid_key(sid))
+    if mapping:
+        data = json.loads(mapping)
+        workflow_id = data["workflow_id"]
+
+        # Remove this specific session
+        redis_client.hdel(_workflow_key(workflow_id), sid)
+        redis_client.delete(_sid_key(sid))
+
+        # Handle leader re-election if the leader session disconnected
+        handle_leader_disconnect(workflow_id, sid)
+
+        broadcast_online_users(workflow_id)
+
+
+def _clear_session_state(workflow_id: str, sid: str) -> None:
+    redis_client.hdel(_workflow_key(workflow_id), sid)
+    redis_client.delete(_sid_key(sid))
+
+
+def _is_session_active(workflow_id: str, sid: str) -> bool:
+    if not sid:
+        return False
+
+    try:
+        if not sio.manager.is_connected(sid, "/"):
+            return False
+    except AttributeError:
+        return False
+
+    if not redis_client.hexists(_workflow_key(workflow_id), sid):
+        return False
+
+    if not redis_client.exists(_sid_key(sid)):
+        return False
+
+    return True
+
+
+def get_or_set_leader(workflow_id: str, sid: str) -> str:
+    """
+    Get current leader session or set this session as leader if no valid leader exists.
+    Returns the leader session id (sid).
+    """
+    raw_leader = redis_client.get(_leader_key(workflow_id))
+    current_leader = raw_leader.decode("utf-8") if isinstance(raw_leader, bytes) else raw_leader
+    leader_replaced = False
+
+    if current_leader and not _is_session_active(workflow_id, current_leader):
+        _clear_session_state(workflow_id, current_leader)
+        redis_client.delete(_leader_key(workflow_id))
+        current_leader = None
+        leader_replaced = True
+
+    if not current_leader:
+        redis_client.set(_leader_key(workflow_id), sid, ex=SESSION_STATE_TTL_SECONDS)  # Expire in 1 hour
+        if leader_replaced:
+            broadcast_leader_change(workflow_id, sid)
+        return sid
+
+    return current_leader
+
+
+def handle_leader_disconnect(workflow_id, disconnected_sid):
+    """
+    Handle leader re-election when a session disconnects.
+    If the disconnected session was the leader, elect a new leader from remaining sessions.
+    """
+    current_leader = redis_client.get(_leader_key(workflow_id))
+
+    if current_leader:
+        current_leader = current_leader.decode("utf-8") if isinstance(current_leader, bytes) else current_leader
+
+        if current_leader == disconnected_sid:
+            # Leader session disconnected, elect a new leader
+            sessions_json = redis_client.hgetall(_workflow_key(workflow_id))
+
+            if sessions_json:
+                # Get the first remaining session as new leader
+                new_leader_sid = list(sessions_json.keys())[0]
+                if isinstance(new_leader_sid, bytes):
+                    new_leader_sid = new_leader_sid.decode("utf-8")
+
+                redis_client.set(_leader_key(workflow_id), new_leader_sid, ex=SESSION_STATE_TTL_SECONDS)
+
+                # Notify all sessions about the new leader
+                broadcast_leader_change(workflow_id, new_leader_sid)
+            else:
+                # No sessions left, remove leader
+                redis_client.delete(_leader_key(workflow_id))
+
+
+def broadcast_leader_change(workflow_id, new_leader_sid):
+    """
+    Broadcast leader change to all sessions in the workflow.
+    """
+    sessions_json = redis_client.hgetall(_workflow_key(workflow_id))
+
+    for sid, session_info_json in sessions_json.items():
+        try:
+            sid_str = sid.decode("utf-8") if isinstance(sid, bytes) else sid
+            is_leader = sid_str == new_leader_sid
+            # Emit to each session whether they are the new leader
+            sio.emit("status", {"isLeader": is_leader}, room=sid_str)
+        except Exception:
+            continue
+
+
+def get_current_leader(workflow_id):
+    """
+    Get the current leader for a workflow.
+    """
+    leader = redis_client.get(_leader_key(workflow_id))
+    return leader.decode("utf-8") if leader and isinstance(leader, bytes) else leader
+
+
+def broadcast_online_users(workflow_id):
+    """
+    Broadcast online users to the workflow room.
+    Each session is shown as a separate user (even if same person has multiple tabs).
+    """
+    sessions_json = redis_client.hgetall(_workflow_key(workflow_id))
+    users = []
+
+    for sid, session_info_json in sessions_json.items():
+        try:
+            session_info = json.loads(session_info_json)
+            # Each session appears as a separate "user" in the UI
+            users.append(
+                {
+                    "user_id": session_info["user_id"],
+                    "username": session_info["username"],
+                    "avatar": session_info.get("avatar"),
+                    "sid": session_info["sid"],
+                    "connected_at": session_info.get("connected_at"),
+                }
+            )
+        except Exception:
+            continue
+
+    # Sort by connection time to maintain consistent order
+    users.sort(key=lambda x: x.get("connected_at") or 0)
+
+    # Get current leader session
+    leader_sid = get_current_leader(workflow_id)
+
+    sio.emit("online_users", {"workflow_id": workflow_id, "users": users, "leader": leader_sid}, room=workflow_id)
+
+
+@sio.on("collaboration_event")
+def handle_collaboration_event(sid, data):
+    """
+    Handle general collaboration events, include:
+    1. mouse_move
+    2. vars_and_features_update
+    3. sync_request (ask leader to update graph)
+    4. app_state_update
+    5. mcp_server_update
+    6. workflow_update
+    7. comments_update
+    8. node_panel_presence
+
+    """
+    mapping = redis_client.get(_sid_key(sid))
+
+    if not mapping:
+        return {"msg": "unauthorized"}, 401
+
+    mapping_data = json.loads(mapping)
+    workflow_id = mapping_data["workflow_id"]
+    user_id = mapping_data["user_id"]
+    _refresh_session_state(workflow_id, sid)
+
+    event_type = data.get("type")
+    event_data = data.get("data")
+    timestamp = data.get("timestamp", int(time.time()))
+
+    if not event_type:
+        return {"msg": "invalid event type"}, 400
+
+    sio.emit(
+        "collaboration_update",
+        {"type": event_type, "userId": user_id, "data": event_data, "timestamp": timestamp},
+        room=workflow_id,
+        skip_sid=sid,
+    )
+
+    return {"msg": "event_broadcasted"}
+
+
+@sio.on("graph_event")
+def handle_graph_event(sid, data):
+    """
+    Handle graph events - simple broadcast relay.
+    """
+    mapping = redis_client.get(_sid_key(sid))
+
+    if not mapping:
+        return {"msg": "unauthorized"}, 401
+
+    mapping_data = json.loads(mapping)
+    workflow_id = mapping_data["workflow_id"]
+    _refresh_session_state(workflow_id, sid)
+
+    sio.emit("graph_update", data, room=workflow_id, skip_sid=sid)
+
+    return {"msg": "graph_update_broadcasted"}
diff --git a/api/controllers/console/app/workflow.py b/api/controllers/console/app/workflow.py
index 8c451cd08c..bfd3edb41d 100644
--- a/api/controllers/console/app/workflow.py
+++ b/api/controllers/console/app/workflow.py
@@ -9,6 +9,7 @@ from sqlalchemy.orm import Session
 from werkzeug.exceptions import Forbidden, InternalServerError, NotFound
 
 import services
+from configs import dify_config
 from controllers.console import api, console_ns
 from controllers.console.app.error import ConversationCompletedError, DraftWorkflowNotExist, DraftWorkflowNotSync
 from controllers.console.app.wraps import get_app_model
@@ -31,7 +32,9 @@ from core.trigger.debug.event_selectors import (
 from core.workflow.enums import NodeType
 from core.workflow.graph_engine.manager import GraphEngineManager
 from extensions.ext_database import db
+from extensions.ext_redis import redis_client
 from factories import file_factory, variable_factory
+from fields.online_user_fields import online_user_list_fields
 from fields.workflow_fields import workflow_fields, workflow_pagination_fields
 from fields.workflow_run_fields import workflow_run_node_execution_fields
 from libs import helper
@@ -144,6 +147,7 @@ class DraftWorkflowApi(Resource):
                 .add_argument("hash", type=str, required=False, location="json")
                 .add_argument("environment_variables", type=list, required=True, location="json")
                 .add_argument("conversation_variables", type=list, required=False, location="json")
+                .add_argument("force_upload", type=bool, required=False, default=False, location="json")
             )
             args = parser.parse_args()
         elif "text/plain" in content_type:
@@ -161,6 +165,7 @@ class DraftWorkflowApi(Resource):
                     "hash": data.get("hash"),
                     "environment_variables": data.get("environment_variables"),
                     "conversation_variables": data.get("conversation_variables"),
+                    "force_upload": data.get("force_upload", False),
                 }
             except json.JSONDecodeError:
                 return {"message": "Invalid JSON data"}, 400
@@ -185,6 +190,7 @@ class DraftWorkflowApi(Resource):
                 account=current_user,
                 environment_variables=environment_variables,
                 conversation_variables=conversation_variables,
+                force_upload=args.get("force_upload", False),
             )
         except WorkflowHashNotEqualError:
             raise DraftWorkflowNotSync()
@@ -756,6 +762,46 @@ class ConvertToWorkflowApi(Resource):
         }
 
 
+@console_ns.route("/apps/<uuid:app_id>/workflows/draft/config")
+class WorkflowConfigApi(Resource):
+    """Resource for workflow configuration."""
+
+    @api.doc("get_workflow_config")
+    @api.doc(description="Get workflow configuration")
+    @api.doc(params={"app_id": "Application ID"})
+    @api.response(200, "Workflow configuration retrieved successfully")
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
+    def get(self, app_model: App):
+        return {
+            "parallel_depth_limit": dify_config.WORKFLOW_PARALLEL_DEPTH_LIMIT,
+        }
+
+
+@console_ns.route("/apps/<uuid:app_id>/workflows/draft/features")
+class WorkflowFeaturesApi(Resource):
+    """Update draft workflow features."""
+
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
+    def post(self, app_model: App):
+        current_user, _ = current_account_with_tenant()
+
+        parser = reqparse.RequestParser().add_argument("features", type=dict, required=True, location="json")
+        args = parser.parse_args()
+
+        features = args.get("features")
+
+        workflow_service = WorkflowService()
+        workflow_service.update_draft_workflow_features(app_model=app_model, features=features, account=current_user)
+
+        return {"result": "success"}
+
+
 @console_ns.route("/apps/<uuid:app_id>/workflows")
 class PublishedAllWorkflowApi(Resource):
     @api.doc("get_all_published_workflows")
@@ -1168,3 +1214,30 @@ class DraftWorkflowTriggerRunAllApi(Resource):
                     "status": "error",
                 }
             ), 400
+
+
+@console_ns.route("/apps/workflows/online-users")
+class WorkflowOnlineUsersApi(Resource):
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @marshal_with(online_user_list_fields)
+    def get(self):
+        parser = reqparse.RequestParser().add_argument("workflow_ids", type=str, required=True, location="args")
+        args = parser.parse_args()
+
+        workflow_ids = [workflow_id.strip() for workflow_id in args["workflow_ids"].split(",")]
+
+        results = []
+        for workflow_id in workflow_ids:
+            users_json = redis_client.hgetall(f"workflow_online_users:{workflow_id}")
+
+            users = []
+            for _, user_info_json in users_json.items():
+                try:
+                    users.append(json.loads(user_info_json))
+                except Exception:
+                    continue
+            results.append({"workflow_id": workflow_id, "users": users})
+
+        return {"data": results}
diff --git a/api/controllers/console/app/workflow_comment.py b/api/controllers/console/app/workflow_comment.py
new file mode 100644
index 0000000000..4e3a311de2
--- /dev/null
+++ b/api/controllers/console/app/workflow_comment.py
@@ -0,0 +1,240 @@
+import logging
+
+from flask_restx import Resource, fields, marshal_with, reqparse
+
+from controllers.console import api
+from controllers.console.app.wraps import get_app_model
+from controllers.console.wraps import account_initialization_required, setup_required
+from fields.member_fields import account_with_role_fields
+from fields.workflow_comment_fields import (
+    workflow_comment_basic_fields,
+    workflow_comment_create_fields,
+    workflow_comment_detail_fields,
+    workflow_comment_reply_create_fields,
+    workflow_comment_reply_update_fields,
+    workflow_comment_resolve_fields,
+    workflow_comment_update_fields,
+)
+from libs.login import current_user, login_required
+from models import App
+from services.account_service import TenantService
+from services.workflow_comment_service import WorkflowCommentService
+
+logger = logging.getLogger(__name__)
+
+
+class WorkflowCommentListApi(Resource):
+    """API for listing and creating workflow comments."""
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with(workflow_comment_basic_fields, envelope="data")
+    def get(self, app_model: App):
+        """Get all comments for a workflow."""
+        comments = WorkflowCommentService.get_comments(tenant_id=current_user.current_tenant_id, app_id=app_model.id)
+
+        return comments
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with(workflow_comment_create_fields)
+    def post(self, app_model: App):
+        """Create a new workflow comment."""
+        parser = reqparse.RequestParser()
+        parser.add_argument("position_x", type=float, required=True, location="json")
+        parser.add_argument("position_y", type=float, required=True, location="json")
+        parser.add_argument("content", type=str, required=True, location="json")
+        parser.add_argument("mentioned_user_ids", type=list, location="json", default=[])
+        args = parser.parse_args()
+
+        result = WorkflowCommentService.create_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            created_by=current_user.id,
+            content=args.content,
+            position_x=args.position_x,
+            position_y=args.position_y,
+            mentioned_user_ids=args.mentioned_user_ids,
+        )
+
+        return result, 201
+
+
+class WorkflowCommentDetailApi(Resource):
+    """API for managing individual workflow comments."""
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with(workflow_comment_detail_fields)
+    def get(self, app_model: App, comment_id: str):
+        """Get a specific workflow comment."""
+        comment = WorkflowCommentService.get_comment(
+            tenant_id=current_user.current_tenant_id, app_id=app_model.id, comment_id=comment_id
+        )
+
+        return comment
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with(workflow_comment_update_fields)
+    def put(self, app_model: App, comment_id: str):
+        """Update a workflow comment."""
+        parser = reqparse.RequestParser()
+        parser.add_argument("content", type=str, required=True, location="json")
+        parser.add_argument("position_x", type=float, required=False, location="json")
+        parser.add_argument("position_y", type=float, required=False, location="json")
+        parser.add_argument("mentioned_user_ids", type=list, location="json", default=[])
+        args = parser.parse_args()
+
+        result = WorkflowCommentService.update_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            user_id=current_user.id,
+            content=args.content,
+            position_x=args.position_x,
+            position_y=args.position_y,
+            mentioned_user_ids=args.mentioned_user_ids,
+        )
+
+        return result
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    def delete(self, app_model: App, comment_id: str):
+        """Delete a workflow comment."""
+        WorkflowCommentService.delete_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            user_id=current_user.id,
+        )
+
+        return {"result": "success"}, 204
+
+
+class WorkflowCommentResolveApi(Resource):
+    """API for resolving and reopening workflow comments."""
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with(workflow_comment_resolve_fields)
+    def post(self, app_model: App, comment_id: str):
+        """Resolve a workflow comment."""
+        comment = WorkflowCommentService.resolve_comment(
+            tenant_id=current_user.current_tenant_id,
+            app_id=app_model.id,
+            comment_id=comment_id,
+            user_id=current_user.id,
+        )
+
+        return comment
+
+
+class WorkflowCommentReplyApi(Resource):
+    """API for managing comment replies."""
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with(workflow_comment_reply_create_fields)
+    def post(self, app_model: App, comment_id: str):
+        """Add a reply to a workflow comment."""
+        # Validate comment access first
+        WorkflowCommentService.validate_comment_access(
+            comment_id=comment_id, tenant_id=current_user.current_tenant_id, app_id=app_model.id
+        )
+
+        parser = reqparse.RequestParser()
+        parser.add_argument("content", type=str, required=True, location="json")
+        parser.add_argument("mentioned_user_ids", type=list, location="json", default=[])
+        args = parser.parse_args()
+
+        result = WorkflowCommentService.create_reply(
+            comment_id=comment_id,
+            content=args.content,
+            created_by=current_user.id,
+            mentioned_user_ids=args.mentioned_user_ids,
+        )
+
+        return result, 201
+
+
+class WorkflowCommentReplyDetailApi(Resource):
+    """API for managing individual comment replies."""
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with(workflow_comment_reply_update_fields)
+    def put(self, app_model: App, comment_id: str, reply_id: str):
+        """Update a comment reply."""
+        # Validate comment access first
+        WorkflowCommentService.validate_comment_access(
+            comment_id=comment_id, tenant_id=current_user.current_tenant_id, app_id=app_model.id
+        )
+
+        parser = reqparse.RequestParser()
+        parser.add_argument("content", type=str, required=True, location="json")
+        parser.add_argument("mentioned_user_ids", type=list, location="json", default=[])
+        args = parser.parse_args()
+
+        reply = WorkflowCommentService.update_reply(
+            reply_id=reply_id, user_id=current_user.id, content=args.content, mentioned_user_ids=args.mentioned_user_ids
+        )
+
+        return reply
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    def delete(self, app_model: App, comment_id: str, reply_id: str):
+        """Delete a comment reply."""
+        # Validate comment access first
+        WorkflowCommentService.validate_comment_access(
+            comment_id=comment_id, tenant_id=current_user.current_tenant_id, app_id=app_model.id
+        )
+
+        WorkflowCommentService.delete_reply(reply_id=reply_id, user_id=current_user.id)
+
+        return {"result": "success"}, 204
+
+
+class WorkflowCommentMentionUsersApi(Resource):
+    """API for getting mentionable users for workflow comments."""
+
+    @login_required
+    @setup_required
+    @account_initialization_required
+    @get_app_model
+    @marshal_with({"users": fields.List(fields.Nested(account_with_role_fields))})
+    def get(self, app_model: App):
+        """Get all users in current tenant for mentions."""
+        members = TenantService.get_tenant_members(current_user.current_tenant)
+        return {"users": members}
+
+
+# Register API routes
+api.add_resource(WorkflowCommentListApi, "/apps/<uuid:app_id>/workflow/comments")
+api.add_resource(WorkflowCommentDetailApi, "/apps/<uuid:app_id>/workflow/comments/<string:comment_id>")
+api.add_resource(WorkflowCommentResolveApi, "/apps/<uuid:app_id>/workflow/comments/<string:comment_id>/resolve")
+api.add_resource(WorkflowCommentReplyApi, "/apps/<uuid:app_id>/workflow/comments/<string:comment_id>/replies")
+api.add_resource(
+    WorkflowCommentReplyDetailApi, "/apps/<uuid:app_id>/workflow/comments/<string:comment_id>/replies/<string:reply_id>"
+)
+api.add_resource(WorkflowCommentMentionUsersApi, "/apps/<uuid:app_id>/workflow/comments/mention-users")
diff --git a/api/controllers/console/app/workflow_draft_variable.py b/api/controllers/console/app/workflow_draft_variable.py
index 0722eb40d2..694f413d92 100644
--- a/api/controllers/console/app/workflow_draft_variable.py
+++ b/api/controllers/console/app/workflow_draft_variable.py
@@ -19,8 +19,8 @@ from core.variables.segments import ArrayFileSegment, FileSegment, Segment
 from core.variables.types import SegmentType
 from core.workflow.constants import CONVERSATION_VARIABLE_NODE_ID, SYSTEM_VARIABLE_NODE_ID
 from extensions.ext_database import db
+from factories import variable_factory
 from factories.file_factory import build_from_mapping, build_from_mappings
-from factories.variable_factory import build_segment_with_type
 from libs.login import current_user, login_required
 from models import Account, App, AppMode
 from models.workflow import WorkflowDraftVariable
@@ -355,7 +355,7 @@ class VariableApi(Resource):
                 if len(raw_value) > 0 and not isinstance(raw_value[0], dict):
                     raise InvalidArgumentError(description=f"expected dict for files[0], got {type(raw_value)}")
                 raw_value = build_from_mappings(mappings=raw_value, tenant_id=app_model.tenant_id)
-            new_value = build_segment_with_type(variable.value_type, raw_value)
+            new_value = variable_factory.build_segment_with_type(variable.value_type, raw_value)
         draft_var_srv.update_variable(variable, name=new_name, value=new_value)
         db.session.commit()
         return variable
@@ -448,8 +448,35 @@ class ConversationVariableCollectionApi(Resource):
         db.session.commit()
         return _get_variable_list(app_model, CONVERSATION_VARIABLE_NODE_ID)
 
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_app_model(mode=AppMode.ADVANCED_CHAT)
+    def post(self, app_model: App):
+        # The role of the current user in the ta table must be admin, owner, or editor
+        if not current_user.is_editor:
+            raise Forbidden()
+
+        parser = reqparse.RequestParser()
+        parser.add_argument("conversation_variables", type=list, required=True, location="json")
+        args = parser.parse_args()
+
+        workflow_service = WorkflowService()
+
+        conversation_variables_list = args.get("conversation_variables") or []
+        conversation_variables = [
+            variable_factory.build_conversation_variable_from_mapping(obj) for obj in conversation_variables_list
+        ]
+
+        workflow_service.update_draft_workflow_conversation_variables(
+            app_model=app_model,
+            account=current_user,
+            conversation_variables=conversation_variables,
+        )
+
+        return {"result": "success"}
+
 
-@console_ns.route("/apps/<uuid:app_id>/workflows/draft/system-variables")
 class SystemVariableCollectionApi(Resource):
     @api.doc("get_system_variables")
     @api.doc(description="Get system variables for workflow")
@@ -499,3 +526,44 @@ class EnvironmentVariableCollectionApi(Resource):
             )
 
         return {"items": env_vars_list}
+
+    @setup_required
+    @login_required
+    @account_initialization_required
+    @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
+    def post(self, app_model: App):
+        # The role of the current user in the ta table must be admin, owner, or editor
+        if not current_user.is_editor:
+            raise Forbidden()
+
+        parser = reqparse.RequestParser()
+        parser.add_argument("environment_variables", type=list, required=True, location="json")
+        args = parser.parse_args()
+
+        workflow_service = WorkflowService()
+
+        environment_variables_list = args.get("environment_variables") or []
+        environment_variables = [
+            variable_factory.build_environment_variable_from_mapping(obj) for obj in environment_variables_list
+        ]
+
+        workflow_service.update_draft_workflow_environment_variables(
+            app_model=app_model,
+            account=current_user,
+            environment_variables=environment_variables,
+        )
+
+        return {"result": "success"}
+
+
+api.add_resource(
+    WorkflowVariableCollectionApi,
+    "/apps/<uuid:app_id>/workflows/draft/variables",
+)
+api.add_resource(NodeVariableCollectionApi, "/apps/<uuid:app_id>/workflows/draft/nodes/<string:node_id>/variables")
+api.add_resource(VariableApi, "/apps/<uuid:app_id>/workflows/draft/variables/<uuid:variable_id>")
+api.add_resource(VariableResetApi, "/apps/<uuid:app_id>/workflows/draft/variables/<uuid:variable_id>/reset")
+
+api.add_resource(ConversationVariableCollectionApi, "/apps/<uuid:app_id>/workflows/draft/conversation-variables")
+api.add_resource(SystemVariableCollectionApi, "/apps/<uuid:app_id>/workflows/draft/system-variables")
+api.add_resource(EnvironmentVariableCollectionApi, "/apps/<uuid:app_id>/workflows/draft/environment-variables")
diff --git a/api/controllers/console/workspace/account.py b/api/controllers/console/workspace/account.py
index 499a52370f..3543f12c16 100644
--- a/api/controllers/console/workspace/account.py
+++ b/api/controllers/console/workspace/account.py
@@ -32,6 +32,7 @@ from controllers.console.wraps import (
     only_edition_cloud,
     setup_required,
 )
+from core.file import helpers as file_helpers
 from extensions.ext_database import db
 from fields.member_fields import account_fields
 from libs.datetime_utils import naive_utc_now
@@ -128,6 +129,17 @@ class AccountNameApi(Resource):
 
 @console_ns.route("/account/avatar")
 class AccountAvatarApi(Resource):
+    @setup_required
+    @login_required
+    @account_initialization_required
+    def get(self):
+        parser = reqparse.RequestParser()
+        parser.add_argument("avatar", type=str, required=True, location="args")
+        args = parser.parse_args()
+
+        avatar_url = file_helpers.get_signed_file_url(args["avatar"])
+        return {"avatar_url": avatar_url}
+    
     @setup_required
     @login_required
     @account_initialization_required
diff --git a/api/core/rag/datasource/vdb/oracle/oraclevector.py b/api/core/rag/datasource/vdb/oracle/oraclevector.py
index d289cde9e4..2f9eaf145f 100644
--- a/api/core/rag/datasource/vdb/oracle/oraclevector.py
+++ b/api/core/rag/datasource/vdb/oracle/oraclevector.py
@@ -289,7 +289,8 @@ class OracleVector(BaseVector):
                 words = pseg.cut(query)
                 current_entity = ""
                 for word, pos in words:
-                    if pos in {"nr", "Ng", "eng", "nz", "n", "ORG", "v"}:  # nr: 人名，ns: 地名，nt: 机构名
+                    # nr: person name, ns: place name, nt: organization name
+                    if pos in {"nr", "Ng", "eng", "nz", "n", "ORG", "v"}:
                         current_entity += word
                     else:
                         if current_entity:
diff --git a/api/core/rag/datasource/vdb/pyvastbase/vastbase_vector.py b/api/core/rag/datasource/vdb/pyvastbase/vastbase_vector.py
index 86b6ace3f6..282e83865d 100644
--- a/api/core/rag/datasource/vdb/pyvastbase/vastbase_vector.py
+++ b/api/core/rag/datasource/vdb/pyvastbase/vastbase_vector.py
@@ -213,7 +213,7 @@ class VastbaseVector(BaseVector):
 
             with self._get_cursor() as cur:
                 cur.execute(SQL_CREATE_TABLE.format(table_name=self.table_name, dimension=dimension))
-                # Vastbase 支持的向量维度取值范围为 [1,16000]
+                # Vastbase supports vector dimensions in range [1, 16000]
                 if dimension <= 16000:
                     cur.execute(SQL_CREATE_INDEX.format(table_name=self.table_name))
             redis_client.set(collection_exist_cache_key, 1, ex=3600)
diff --git a/api/docker/entrypoint.sh b/api/docker/entrypoint.sh
index 6313085e64..7c1edcd075 100755
--- a/api/docker/entrypoint.sh
+++ b/api/docker/entrypoint.sh
@@ -71,14 +71,16 @@ elif [[ "${MODE}" == "beat" ]]; then
   exec celery -A app.celery beat --loglevel ${LOG_LEVEL:-INFO}
 else
   if [[ "${DEBUG}" == "true" ]]; then
-    exec flask run --host=${DIFY_BIND_ADDRESS:-0.0.0.0} --port=${DIFY_PORT:-5001} --debug
+    export HOST=${DIFY_BIND_ADDRESS:-0.0.0.0}
+    export PORT=${DIFY_PORT:-5001}
+    exec python -m app
   else
     exec gunicorn \
       --bind "${DIFY_BIND_ADDRESS:-0.0.0.0}:${DIFY_PORT:-5001}" \
       --workers ${SERVER_WORKER_AMOUNT:-1} \
-      --worker-class ${SERVER_WORKER_CLASS:-gevent} \
+      --worker-class ${SERVER_WORKER_CLASS:-geventwebsocket.gunicorn.workers.GeventWebSocketWorker} \
       --worker-connections ${SERVER_WORKER_CONNECTIONS:-10} \
       --timeout ${GUNICORN_TIMEOUT:-200} \
-      app:app
+      app:socketio_app
   fi
 fi
diff --git a/api/extensions/ext_socketio.py b/api/extensions/ext_socketio.py
new file mode 100644
index 0000000000..d898f795b1
--- /dev/null
+++ b/api/extensions/ext_socketio.py
@@ -0,0 +1,3 @@
+import socketio
+
+sio = socketio.Server(async_mode="gevent", cors_allowed_origins="*")
diff --git a/api/fields/online_user_fields.py b/api/fields/online_user_fields.py
new file mode 100644
index 0000000000..8fe0dc6a64
--- /dev/null
+++ b/api/fields/online_user_fields.py
@@ -0,0 +1,17 @@
+from flask_restx import fields
+
+online_user_partial_fields = {
+    "user_id": fields.String,
+    "username": fields.String,
+    "avatar": fields.String,
+    "sid": fields.String,
+}
+
+workflow_online_users_fields = {
+    "workflow_id": fields.String,
+    "users": fields.List(fields.Nested(online_user_partial_fields)),
+}
+
+online_user_list_fields = {
+    "data": fields.List(fields.Nested(workflow_online_users_fields)),
+}
diff --git a/api/fields/workflow_comment_fields.py b/api/fields/workflow_comment_fields.py
new file mode 100644
index 0000000000..c708dd3460
--- /dev/null
+++ b/api/fields/workflow_comment_fields.py
@@ -0,0 +1,96 @@
+from flask_restx import fields
+
+from libs.helper import AvatarUrlField, TimestampField
+
+# basic account fields for comments
+account_fields = {
+    "id": fields.String,
+    "name": fields.String,
+    "email": fields.String,
+    "avatar_url": AvatarUrlField,
+}
+
+# Comment mention fields
+workflow_comment_mention_fields = {
+    "mentioned_user_id": fields.String,
+    "mentioned_user_account": fields.Nested(account_fields, allow_null=True),
+    "reply_id": fields.String,
+}
+
+# Comment reply fields
+workflow_comment_reply_fields = {
+    "id": fields.String,
+    "content": fields.String,
+    "created_by": fields.String,
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
+    "created_at": TimestampField,
+}
+
+# Basic comment fields (for list views)
+workflow_comment_basic_fields = {
+    "id": fields.String,
+    "position_x": fields.Float,
+    "position_y": fields.Float,
+    "content": fields.String,
+    "created_by": fields.String,
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
+    "created_at": TimestampField,
+    "updated_at": TimestampField,
+    "resolved": fields.Boolean,
+    "resolved_at": TimestampField,
+    "resolved_by": fields.String,
+    "resolved_by_account": fields.Nested(account_fields, allow_null=True),
+    "reply_count": fields.Integer,
+    "mention_count": fields.Integer,
+    "participants": fields.List(fields.Nested(account_fields)),
+}
+
+# Detailed comment fields (for single comment view)
+workflow_comment_detail_fields = {
+    "id": fields.String,
+    "position_x": fields.Float,
+    "position_y": fields.Float,
+    "content": fields.String,
+    "created_by": fields.String,
+    "created_by_account": fields.Nested(account_fields, allow_null=True),
+    "created_at": TimestampField,
+    "updated_at": TimestampField,
+    "resolved": fields.Boolean,
+    "resolved_at": TimestampField,
+    "resolved_by": fields.String,
+    "resolved_by_account": fields.Nested(account_fields, allow_null=True),
+    "replies": fields.List(fields.Nested(workflow_comment_reply_fields)),
+    "mentions": fields.List(fields.Nested(workflow_comment_mention_fields)),
+}
+
+# Comment creation response fields (simplified)
+workflow_comment_create_fields = {
+    "id": fields.String,
+    "created_at": TimestampField,
+}
+
+# Comment update response fields (simplified)
+workflow_comment_update_fields = {
+    "id": fields.String,
+    "updated_at": TimestampField,
+}
+
+# Comment resolve response fields
+workflow_comment_resolve_fields = {
+    "id": fields.String,
+    "resolved": fields.Boolean,
+    "resolved_at": TimestampField,
+    "resolved_by": fields.String,
+}
+
+# Reply creation response fields (simplified)
+workflow_comment_reply_create_fields = {
+    "id": fields.String,
+    "created_at": TimestampField,
+}
+
+# Reply update response fields
+workflow_comment_reply_update_fields = {
+    "id": fields.String,
+    "updated_at": TimestampField,
+}
diff --git a/api/migrations/versions/2025_09_18_1726-227822d22895_add_workflow_comments_table.py b/api/migrations/versions/2025_09_18_1726-227822d22895_add_workflow_comments_table.py
new file mode 100644
index 0000000000..b9f91ca141
--- /dev/null
+++ b/api/migrations/versions/2025_09_18_1726-227822d22895_add_workflow_comments_table.py
@@ -0,0 +1,90 @@
+"""Add workflow comments table
+
+Revision ID: 227822d22895
+Revises: 68519ad5cd18
+Create Date: 2025-08-22 17:26:15.255980
+
+"""
+from alembic import op
+import models as models
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '227822d22895'
+down_revision = '68519ad5cd18'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('workflow_comments',
+    sa.Column('id', models.types.StringUUID(), server_default=sa.text('uuid_generate_v4()'), nullable=False),
+    sa.Column('tenant_id', models.types.StringUUID(), nullable=False),
+    sa.Column('app_id', models.types.StringUUID(), nullable=False),
+    sa.Column('position_x', sa.Float(), nullable=False),
+    sa.Column('position_y', sa.Float(), nullable=False),
+    sa.Column('content', sa.Text(), nullable=False),
+    sa.Column('created_by', models.types.StringUUID(), nullable=False),
+    sa.Column('created_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.Column('updated_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.Column('resolved', sa.Boolean(), server_default=sa.text('false'), nullable=False),
+    sa.Column('resolved_at', sa.DateTime(), nullable=True),
+    sa.Column('resolved_by', models.types.StringUUID(), nullable=True),
+    sa.PrimaryKeyConstraint('id', name='workflow_comments_pkey')
+    )
+    with op.batch_alter_table('workflow_comments', schema=None) as batch_op:
+        batch_op.create_index('workflow_comments_app_idx', ['tenant_id', 'app_id'], unique=False)
+        batch_op.create_index('workflow_comments_created_at_idx', ['created_at'], unique=False)
+
+    op.create_table('workflow_comment_replies',
+    sa.Column('id', models.types.StringUUID(), server_default=sa.text('uuid_generate_v4()'), nullable=False),
+    sa.Column('comment_id', models.types.StringUUID(), nullable=False),
+    sa.Column('content', sa.Text(), nullable=False),
+    sa.Column('created_by', models.types.StringUUID(), nullable=False),
+    sa.Column('created_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.Column('updated_at', sa.DateTime(), server_default=sa.text('CURRENT_TIMESTAMP'), nullable=False),
+    sa.ForeignKeyConstraint(['comment_id'], ['workflow_comments.id'], name=op.f('workflow_comment_replies_comment_id_fkey'), ondelete='CASCADE'),
+    sa.PrimaryKeyConstraint('id', name='workflow_comment_replies_pkey')
+    )
+    with op.batch_alter_table('workflow_comment_replies', schema=None) as batch_op:
+        batch_op.create_index('comment_replies_comment_idx', ['comment_id'], unique=False)
+        batch_op.create_index('comment_replies_created_at_idx', ['created_at'], unique=False)
+
+    op.create_table('workflow_comment_mentions',
+    sa.Column('id', models.types.StringUUID(), server_default=sa.text('uuid_generate_v4()'), nullable=False),
+    sa.Column('comment_id', models.types.StringUUID(), nullable=False),
+    sa.Column('reply_id', models.types.StringUUID(), nullable=True),
+    sa.Column('mentioned_user_id', models.types.StringUUID(), nullable=False),
+    sa.ForeignKeyConstraint(['comment_id'], ['workflow_comments.id'], name=op.f('workflow_comment_mentions_comment_id_fkey'), ondelete='CASCADE'),
+    sa.ForeignKeyConstraint(['reply_id'], ['workflow_comment_replies.id'], name=op.f('workflow_comment_mentions_reply_id_fkey'), ondelete='CASCADE'),
+    sa.PrimaryKeyConstraint('id', name='workflow_comment_mentions_pkey')
+    )
+    with op.batch_alter_table('workflow_comment_mentions', schema=None) as batch_op:
+        batch_op.create_index('comment_mentions_comment_idx', ['comment_id'], unique=False)
+        batch_op.create_index('comment_mentions_reply_idx', ['reply_id'], unique=False)
+        batch_op.create_index('comment_mentions_user_idx', ['mentioned_user_id'], unique=False)
+
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('workflow_comment_mentions', schema=None) as batch_op:
+        batch_op.drop_index('comment_mentions_user_idx')
+        batch_op.drop_index('comment_mentions_reply_idx')
+        batch_op.drop_index('comment_mentions_comment_idx')
+
+    op.drop_table('workflow_comment_mentions')
+    with op.batch_alter_table('workflow_comment_replies', schema=None) as batch_op:
+        batch_op.drop_index('comment_replies_created_at_idx')
+        batch_op.drop_index('comment_replies_comment_idx')
+
+    op.drop_table('workflow_comment_replies')
+    with op.batch_alter_table('workflow_comments', schema=None) as batch_op:
+        batch_op.drop_index('workflow_comments_created_at_idx')
+        batch_op.drop_index('workflow_comments_app_idx')
+
+    op.drop_table('workflow_comments')
+    # ### end Alembic commands ###
diff --git a/api/models/__init__.py b/api/models/__init__.py
index 906bc3198e..b94f26fa11 100644
--- a/api/models/__init__.py
+++ b/api/models/__init__.py
@@ -9,6 +9,11 @@ from .account import (
     TenantStatus,
 )
 from .api_based_extension import APIBasedExtension, APIBasedExtensionPoint
+from .comment import (
+    WorkflowComment,
+    WorkflowCommentMention,
+    WorkflowCommentReply,
+)
 from .dataset import (
     AppDatasetJoin,
     Dataset,
@@ -195,6 +200,9 @@ __all__ = [
     "Workflow",
     "WorkflowAppLog",
     "WorkflowAppLogCreatedFrom",
+    "WorkflowComment",
+    "WorkflowCommentMention",
+    "WorkflowCommentReply",
     "WorkflowNodeExecutionModel",
     "WorkflowNodeExecutionOffload",
     "WorkflowNodeExecutionTriggeredFrom",
diff --git a/api/models/comment.py b/api/models/comment.py
new file mode 100644
index 0000000000..059f974dc7
--- /dev/null
+++ b/api/models/comment.py
@@ -0,0 +1,189 @@
+"""Workflow comment models."""
+
+from datetime import datetime
+from typing import TYPE_CHECKING, Optional
+
+from sqlalchemy import Index, func
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+
+from .account import Account
+from .base import Base
+from .engine import db
+from .types import StringUUID
+
+if TYPE_CHECKING:
+    pass
+
+
+class WorkflowComment(Base):
+    """Workflow comment model for canvas commenting functionality.
+
+    Comments are associated with apps rather than specific workflow versions,
+    since an app has only one draft workflow at a time and comments should persist
+    across workflow version changes.
+
+    Attributes:
+        id: Comment ID
+        tenant_id: Workspace ID
+        app_id: App ID (primary association, comments belong to apps)
+        position_x: X coordinate on canvas
+        position_y: Y coordinate on canvas
+        content: Comment content
+        created_by: Creator account ID
+        created_at: Creation time
+        updated_at: Last update time
+        resolved: Whether comment is resolved
+        resolved_at: Resolution time
+        resolved_by: Resolver account ID
+    """
+
+    __tablename__ = "workflow_comments"
+    __table_args__ = (
+        db.PrimaryKeyConstraint("id", name="workflow_comments_pkey"),
+        Index("workflow_comments_app_idx", "tenant_id", "app_id"),
+        Index("workflow_comments_created_at_idx", "created_at"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuid_generate_v4()"))
+    tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    app_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    position_x: Mapped[float] = mapped_column(db.Float)
+    position_y: Mapped[float] = mapped_column(db.Float)
+    content: Mapped[str] = mapped_column(db.Text, nullable=False)
+    created_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    created_at: Mapped[datetime] = mapped_column(db.DateTime, nullable=False, server_default=func.current_timestamp())
+    updated_at: Mapped[datetime] = mapped_column(
+        db.DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+    )
+    resolved: Mapped[bool] = mapped_column(db.Boolean, nullable=False, server_default=db.text("false"))
+    resolved_at: Mapped[Optional[datetime]] = mapped_column(db.DateTime)
+    resolved_by: Mapped[Optional[str]] = mapped_column(StringUUID)
+
+    # Relationships
+    replies: Mapped[list["WorkflowCommentReply"]] = relationship(
+        "WorkflowCommentReply", back_populates="comment", cascade="all, delete-orphan"
+    )
+    mentions: Mapped[list["WorkflowCommentMention"]] = relationship(
+        "WorkflowCommentMention", back_populates="comment", cascade="all, delete-orphan"
+    )
+
+    @property
+    def created_by_account(self):
+        """Get creator account."""
+        return db.session.get(Account, self.created_by)
+
+    @property
+    def resolved_by_account(self):
+        """Get resolver account."""
+        if self.resolved_by:
+            return db.session.get(Account, self.resolved_by)
+        return None
+
+    @property
+    def reply_count(self):
+        """Get reply count."""
+        return len(self.replies)
+
+    @property
+    def mention_count(self):
+        """Get mention count."""
+        return len(self.mentions)
+
+    @property
+    def participants(self):
+        """Get all participants (creator + repliers + mentioned users)."""
+        participant_ids = set()
+
+        # Add comment creator
+        participant_ids.add(self.created_by)
+
+        # Add reply creators
+        participant_ids.update(reply.created_by for reply in self.replies)
+
+        # Add mentioned users
+        participant_ids.update(mention.mentioned_user_id for mention in self.mentions)
+
+        # Get account objects
+        participants = []
+        for user_id in participant_ids:
+            account = db.session.get(Account, user_id)
+            if account:
+                participants.append(account)
+
+        return participants
+
+
+class WorkflowCommentReply(Base):
+    """Workflow comment reply model.
+
+    Attributes:
+        id: Reply ID
+        comment_id: Parent comment ID
+        content: Reply content
+        created_by: Creator account ID
+        created_at: Creation time
+    """
+
+    __tablename__ = "workflow_comment_replies"
+    __table_args__ = (
+        db.PrimaryKeyConstraint("id", name="workflow_comment_replies_pkey"),
+        Index("comment_replies_comment_idx", "comment_id"),
+        Index("comment_replies_created_at_idx", "created_at"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuid_generate_v4()"))
+    comment_id: Mapped[str] = mapped_column(
+        StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
+    )
+    content: Mapped[str] = mapped_column(db.Text, nullable=False)
+    created_by: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    created_at: Mapped[datetime] = mapped_column(db.DateTime, nullable=False, server_default=func.current_timestamp())
+    updated_at: Mapped[datetime] = mapped_column(
+        db.DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
+    )
+    # Relationships
+    comment: Mapped["WorkflowComment"] = relationship("WorkflowComment", back_populates="replies")
+
+    @property
+    def created_by_account(self):
+        """Get creator account."""
+        return db.session.get(Account, self.created_by)
+
+
+class WorkflowCommentMention(Base):
+    """Workflow comment mention model.
+
+    Mentions are only for internal accounts since end users
+    cannot access workflow canvas and commenting features.
+
+    Attributes:
+        id: Mention ID
+        comment_id: Parent comment ID
+        mentioned_user_id: Mentioned account ID
+    """
+
+    __tablename__ = "workflow_comment_mentions"
+    __table_args__ = (
+        db.PrimaryKeyConstraint("id", name="workflow_comment_mentions_pkey"),
+        Index("comment_mentions_comment_idx", "comment_id"),
+        Index("comment_mentions_reply_idx", "reply_id"),
+        Index("comment_mentions_user_idx", "mentioned_user_id"),
+    )
+
+    id: Mapped[str] = mapped_column(StringUUID, server_default=db.text("uuid_generate_v4()"))
+    comment_id: Mapped[str] = mapped_column(
+        StringUUID, db.ForeignKey("workflow_comments.id", ondelete="CASCADE"), nullable=False
+    )
+    reply_id: Mapped[Optional[str]] = mapped_column(
+        StringUUID, db.ForeignKey("workflow_comment_replies.id", ondelete="CASCADE"), nullable=True
+    )
+    mentioned_user_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+
+    # Relationships
+    comment: Mapped["WorkflowComment"] = relationship("WorkflowComment", back_populates="mentions")
+    reply: Mapped[Optional["WorkflowCommentReply"]] = relationship("WorkflowCommentReply")
+
+    @property
+    def mentioned_user_account(self):
+        """Get mentioned account."""
+        return db.session.get(Account, self.mentioned_user_id)
diff --git a/api/models/workflow.py b/api/models/workflow.py
index 4eff16dda2..5420bc2a4d 100644
--- a/api/models/workflow.py
+++ b/api/models/workflow.py
@@ -392,7 +392,7 @@ class Workflow(Base):
 
         :return: hash
         """
-        entity = {"graph": self.graph_dict, "features": self.features_dict}
+        entity = {"graph": self.graph_dict}
 
         return helper.generate_text_hash(json.dumps(entity, sort_keys=True))
 
diff --git a/api/pyproject.toml b/api/pyproject.toml
index 5d72b18204..70a6786b66 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -20,6 +20,7 @@ dependencies = [
     "flask-orjson~=2.0.0",
     "flask-sqlalchemy~=3.1.1",
     "gevent~=25.9.1",
+    "gevent-websocket~=0.10.1",
     "gmpy2~=2.2.1",
     "google-api-core==2.18.0",
     "google-api-python-client==2.90.0",
@@ -69,6 +70,7 @@ dependencies = [
     "pypdfium2==4.30.0",
     "python-docx~=1.1.0",
     "python-dotenv==1.0.1",
+    "python-socketio~=5.13.0",
     "pyyaml~=6.0.1",
     "readabilipy~=0.3.0",
     "redis[hiredis]~=6.1.0",
diff --git a/api/services/feature_service.py b/api/services/feature_service.py
index 44bea57769..a3a0930b00 100644
--- a/api/services/feature_service.py
+++ b/api/services/feature_service.py
@@ -152,6 +152,7 @@ class SystemFeatureModel(BaseModel):
     enable_email_code_login: bool = False
     enable_email_password_login: bool = True
     enable_social_oauth_login: bool = False
+    enable_collaboration_mode: bool = False
     is_allow_register: bool = False
     is_allow_create_workspace: bool = False
     is_email_setup: bool = False
@@ -213,6 +214,7 @@ class FeatureService:
         system_features.enable_email_code_login = dify_config.ENABLE_EMAIL_CODE_LOGIN
         system_features.enable_email_password_login = dify_config.ENABLE_EMAIL_PASSWORD_LOGIN
         system_features.enable_social_oauth_login = dify_config.ENABLE_SOCIAL_OAUTH_LOGIN
+        system_features.enable_collaboration_mode = dify_config.ENABLE_COLLABORATION_MODE
         system_features.is_allow_register = dify_config.ALLOW_REGISTER
         system_features.is_allow_create_workspace = dify_config.ALLOW_CREATE_WORKSPACE
         system_features.is_email_setup = dify_config.MAIL_TYPE is not None and dify_config.MAIL_TYPE != ""
diff --git a/api/services/workflow_comment_service.py b/api/services/workflow_comment_service.py
new file mode 100644
index 0000000000..4b5fbf7a05
--- /dev/null
+++ b/api/services/workflow_comment_service.py
@@ -0,0 +1,311 @@
+import logging
+from typing import Optional
+
+from sqlalchemy import desc, select
+from sqlalchemy.orm import Session, selectinload
+from werkzeug.exceptions import Forbidden, NotFound
+
+from extensions.ext_database import db
+from libs.datetime_utils import naive_utc_now
+from libs.helper import uuid_value
+from models import WorkflowComment, WorkflowCommentMention, WorkflowCommentReply
+
+logger = logging.getLogger(__name__)
+
+
+class WorkflowCommentService:
+    """Service for managing workflow comments."""
+
+    @staticmethod
+    def _validate_content(content: str) -> None:
+        if len(content.strip()) == 0:
+            raise ValueError("Comment content cannot be empty")
+
+        if len(content) > 1000:
+            raise ValueError("Comment content cannot exceed 1000 characters")
+
+    @staticmethod
+    def get_comments(tenant_id: str, app_id: str) -> list[WorkflowComment]:
+        """Get all comments for a workflow."""
+        with Session(db.engine) as session:
+            # Get all comments with eager loading
+            stmt = (
+                select(WorkflowComment)
+                .options(selectinload(WorkflowComment.replies), selectinload(WorkflowComment.mentions))
+                .where(WorkflowComment.tenant_id == tenant_id, WorkflowComment.app_id == app_id)
+                .order_by(desc(WorkflowComment.created_at))
+            )
+
+            comments = session.scalars(stmt).all()
+            return comments
+
+    @staticmethod
+    def get_comment(tenant_id: str, app_id: str, comment_id: str, session: Session = None) -> WorkflowComment:
+        """Get a specific comment."""
+
+        def _get_comment(session: Session) -> WorkflowComment:
+            stmt = (
+                select(WorkflowComment)
+                .options(selectinload(WorkflowComment.replies), selectinload(WorkflowComment.mentions))
+                .where(
+                    WorkflowComment.id == comment_id,
+                    WorkflowComment.tenant_id == tenant_id,
+                    WorkflowComment.app_id == app_id,
+                )
+            )
+            comment = session.scalar(stmt)
+
+            if not comment:
+                raise NotFound("Comment not found")
+
+            return comment
+
+        if session is not None:
+            return _get_comment(session)
+        else:
+            with Session(db.engine, expire_on_commit=False) as session:
+                return _get_comment(session)
+
+    @staticmethod
+    def create_comment(
+        tenant_id: str,
+        app_id: str,
+        created_by: str,
+        content: str,
+        position_x: float,
+        position_y: float,
+        mentioned_user_ids: Optional[list[str]] = None,
+    ) -> WorkflowComment:
+        """Create a new workflow comment."""
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine) as session:
+            comment = WorkflowComment(
+                tenant_id=tenant_id,
+                app_id=app_id,
+                position_x=position_x,
+                position_y=position_y,
+                content=content,
+                created_by=created_by,
+            )
+
+            session.add(comment)
+            session.flush()  # Get the comment ID for mentions
+
+            # Create mentions if specified
+            mentioned_user_ids = mentioned_user_ids or []
+            for user_id in mentioned_user_ids:
+                if isinstance(user_id, str) and uuid_value(user_id):
+                    mention = WorkflowCommentMention(
+                        comment_id=comment.id,
+                        reply_id=None,  # This is a comment mention, not reply mention
+                        mentioned_user_id=user_id,
+                    )
+                    session.add(mention)
+
+            session.commit()
+
+            # Return only what we need - id and created_at
+            return {"id": comment.id, "created_at": comment.created_at}
+
+    @staticmethod
+    def update_comment(
+        tenant_id: str,
+        app_id: str,
+        comment_id: str,
+        user_id: str,
+        content: str,
+        position_x: Optional[float] = None,
+        position_y: Optional[float] = None,
+        mentioned_user_ids: Optional[list[str]] = None,
+    ) -> dict:
+        """Update a workflow comment."""
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            # Get comment with validation
+            stmt = select(WorkflowComment).where(
+                WorkflowComment.id == comment_id,
+                WorkflowComment.tenant_id == tenant_id,
+                WorkflowComment.app_id == app_id,
+            )
+            comment = session.scalar(stmt)
+
+            if not comment:
+                raise NotFound("Comment not found")
+
+            # Only the creator can update the comment
+            if comment.created_by != user_id:
+                raise Forbidden("Only the comment creator can update it")
+
+            # Update comment fields
+            comment.content = content
+            if position_x is not None:
+                comment.position_x = position_x
+            if position_y is not None:
+                comment.position_y = position_y
+
+            # Update mentions - first remove existing mentions for this comment only (not replies)
+            existing_mentions = session.scalars(
+                select(WorkflowCommentMention).where(
+                    WorkflowCommentMention.comment_id == comment.id,
+                    WorkflowCommentMention.reply_id.is_(None),  # Only comment mentions, not reply mentions
+                )
+            ).all()
+            for mention in existing_mentions:
+                session.delete(mention)
+
+            # Add new mentions
+            mentioned_user_ids = mentioned_user_ids or []
+            for user_id_str in mentioned_user_ids:
+                if isinstance(user_id_str, str) and uuid_value(user_id_str):
+                    mention = WorkflowCommentMention(
+                        comment_id=comment.id,
+                        reply_id=None,  # This is a comment mention
+                        mentioned_user_id=user_id_str,
+                    )
+                    session.add(mention)
+
+            session.commit()
+
+            return {"id": comment.id, "updated_at": comment.updated_at}
+
+    @staticmethod
+    def delete_comment(tenant_id: str, app_id: str, comment_id: str, user_id: str) -> None:
+        """Delete a workflow comment."""
+        with Session(db.engine, expire_on_commit=False) as session:
+            comment = WorkflowCommentService.get_comment(tenant_id, app_id, comment_id, session)
+
+            # Only the creator can delete the comment
+            if comment.created_by != user_id:
+                raise Forbidden("Only the comment creator can delete it")
+
+            # Delete associated mentions (both comment and reply mentions)
+            mentions = session.scalars(
+                select(WorkflowCommentMention).where(WorkflowCommentMention.comment_id == comment_id)
+            ).all()
+            for mention in mentions:
+                session.delete(mention)
+
+            # Delete associated replies
+            replies = session.scalars(
+                select(WorkflowCommentReply).where(WorkflowCommentReply.comment_id == comment_id)
+            ).all()
+            for reply in replies:
+                session.delete(reply)
+
+            session.delete(comment)
+            session.commit()
+
+    @staticmethod
+    def resolve_comment(tenant_id: str, app_id: str, comment_id: str, user_id: str) -> WorkflowComment:
+        """Resolve a workflow comment."""
+        with Session(db.engine, expire_on_commit=False) as session:
+            comment = WorkflowCommentService.get_comment(tenant_id, app_id, comment_id, session)
+            if comment.resolved:
+                return comment
+
+            comment.resolved = True
+            comment.resolved_at = naive_utc_now()
+            comment.resolved_by = user_id
+            session.commit()
+
+        return comment
+
+    @staticmethod
+    def create_reply(
+        comment_id: str, content: str, created_by: str, mentioned_user_ids: Optional[list[str]] = None
+    ) -> dict:
+        """Add a reply to a workflow comment."""
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            # Check if comment exists
+            comment = session.get(WorkflowComment, comment_id)
+            if not comment:
+                raise NotFound("Comment not found")
+
+            reply = WorkflowCommentReply(comment_id=comment_id, content=content, created_by=created_by)
+
+            session.add(reply)
+            session.flush()  # Get the reply ID for mentions
+
+            # Create mentions if specified
+            mentioned_user_ids = mentioned_user_ids or []
+            for user_id in mentioned_user_ids:
+                if isinstance(user_id, str) and uuid_value(user_id):
+                    # Create mention linking to specific reply
+                    mention = WorkflowCommentMention(
+                        comment_id=comment_id, reply_id=reply.id, mentioned_user_id=user_id
+                    )
+                    session.add(mention)
+
+            session.commit()
+
+            return {"id": reply.id, "created_at": reply.created_at}
+
+    @staticmethod
+    def update_reply(
+        reply_id: str, user_id: str, content: str, mentioned_user_ids: Optional[list[str]] = None
+    ) -> WorkflowCommentReply:
+        """Update a comment reply."""
+        WorkflowCommentService._validate_content(content)
+
+        with Session(db.engine, expire_on_commit=False) as session:
+            reply = session.get(WorkflowCommentReply, reply_id)
+            if not reply:
+                raise NotFound("Reply not found")
+
+            # Only the creator can update the reply
+            if reply.created_by != user_id:
+                raise Forbidden("Only the reply creator can update it")
+
+            reply.content = content
+
+            # Update mentions - first remove existing mentions for this reply
+            existing_mentions = session.scalars(
+                select(WorkflowCommentMention).where(WorkflowCommentMention.reply_id == reply.id)
+            ).all()
+            for mention in existing_mentions:
+                session.delete(mention)
+
+            # Add mentions
+            mentioned_user_ids = mentioned_user_ids or []
+            for user_id_str in mentioned_user_ids:
+                if isinstance(user_id_str, str) and uuid_value(user_id_str):
+                    mention = WorkflowCommentMention(
+                        comment_id=reply.comment_id, reply_id=reply.id, mentioned_user_id=user_id_str
+                    )
+                    session.add(mention)
+
+            session.commit()
+            session.refresh(reply)  # Refresh to get updated timestamp
+
+            return {"id": reply.id, "updated_at": reply.updated_at}
+
+    @staticmethod
+    def delete_reply(reply_id: str, user_id: str) -> None:
+        """Delete a comment reply."""
+        with Session(db.engine, expire_on_commit=False) as session:
+            reply = session.get(WorkflowCommentReply, reply_id)
+            if not reply:
+                raise NotFound("Reply not found")
+
+            # Only the creator can delete the reply
+            if reply.created_by != user_id:
+                raise Forbidden("Only the reply creator can delete it")
+
+            # Delete associated mentions first
+            mentions = session.scalars(
+                select(WorkflowCommentMention).where(WorkflowCommentMention.reply_id == reply_id)
+            ).all()
+            for mention in mentions:
+                session.delete(mention)
+
+            session.delete(reply)
+            session.commit()
+
+    @staticmethod
+    def validate_comment_access(comment_id: str, tenant_id: str, app_id: str) -> WorkflowComment:
+        """Validate that a comment belongs to the specified tenant and app."""
+        return WorkflowCommentService.get_comment(tenant_id, app_id, comment_id)
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index b6d64d95da..ae9cb5825d 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -200,15 +200,17 @@ class WorkflowService:
         account: Account,
         environment_variables: Sequence[Variable],
         conversation_variables: Sequence[Variable],
+        force_upload: bool = False,
     ) -> Workflow:
         """
         Sync draft workflow
+        :param force_upload: Skip hash validation when True (for restore operations)
         :raises WorkflowHashNotEqualError
         """
         # fetch draft workflow by app_model
         workflow = self.get_draft_workflow(app_model=app_model)
 
-        if workflow and workflow.unique_hash != unique_hash:
+        if workflow and workflow.unique_hash != unique_hash and not force_upload:
             raise WorkflowHashNotEqualError()
 
         # validate features structure
@@ -249,6 +251,78 @@ class WorkflowService:
         # return draft workflow
         return workflow
 
+    def update_draft_workflow_environment_variables(
+        self,
+        *,
+        app_model: App,
+        environment_variables: Sequence[Variable],
+        account: Account,
+    ):
+        """
+        Update draft workflow environment variables
+        """
+        # fetch draft workflow by app_model
+        workflow = self.get_draft_workflow(app_model=app_model)
+
+        if not workflow:
+            raise ValueError("No draft workflow found.")
+
+        workflow.environment_variables = environment_variables
+        workflow.updated_by = account.id
+        workflow.updated_at = naive_utc_now()
+
+        # commit db session changes
+        db.session.commit()
+
+    def update_draft_workflow_conversation_variables(
+        self,
+        *,
+        app_model: App,
+        conversation_variables: Sequence[Variable],
+        account: Account,
+    ):
+        """
+        Update draft workflow conversation variables
+        """
+        # fetch draft workflow by app_model
+        workflow = self.get_draft_workflow(app_model=app_model)
+
+        if not workflow:
+            raise ValueError("No draft workflow found.")
+
+        workflow.conversation_variables = conversation_variables
+        workflow.updated_by = account.id
+        workflow.updated_at = naive_utc_now()
+
+        # commit db session changes
+        db.session.commit()
+
+    def update_draft_workflow_features(
+        self,
+        *,
+        app_model: App,
+        features: dict,
+        account: Account,
+    ):
+        """
+        Update draft workflow features
+        """
+        # fetch draft workflow by app_model
+        workflow = self.get_draft_workflow(app_model=app_model)
+
+        if not workflow:
+            raise ValueError("No draft workflow found.")
+
+        # validate features structure
+        self.validate_features_structure(app_model=app_model, features=features)
+
+        workflow.features = json.dumps(features)
+        workflow.updated_by = account.id
+        workflow.updated_at = naive_utc_now()
+
+        # commit db session changes
+        db.session.commit()
+
     def publish_workflow(
         self,
         *,
diff --git a/api/tests/test_containers_integration_tests/services/test_feature_service.py b/api/tests/test_containers_integration_tests/services/test_feature_service.py
index 40380b09d2..8dca879e27 100644
--- a/api/tests/test_containers_integration_tests/services/test_feature_service.py
+++ b/api/tests/test_containers_integration_tests/services/test_feature_service.py
@@ -268,6 +268,7 @@ class TestFeatureService:
             mock_config.ENABLE_EMAIL_CODE_LOGIN = True
             mock_config.ENABLE_EMAIL_PASSWORD_LOGIN = True
             mock_config.ENABLE_SOCIAL_OAUTH_LOGIN = False
+            mock_config.ENABLE_COLLABORATION_MODE = True
             mock_config.ALLOW_REGISTER = False
             mock_config.ALLOW_CREATE_WORKSPACE = False
             mock_config.MAIL_TYPE = "smtp"
@@ -292,6 +293,7 @@ class TestFeatureService:
         # Verify authentication settings
         assert result.enable_email_code_login is True
         assert result.enable_email_password_login is False
+        assert result.enable_collaboration_mode is True
         assert result.is_allow_register is False
         assert result.is_allow_create_workspace is False
 
@@ -341,6 +343,7 @@ class TestFeatureService:
             mock_config.ENABLE_EMAIL_CODE_LOGIN = True
             mock_config.ENABLE_EMAIL_PASSWORD_LOGIN = True
             mock_config.ENABLE_SOCIAL_OAUTH_LOGIN = False
+            mock_config.ENABLE_COLLABORATION_MODE = False
             mock_config.ALLOW_REGISTER = True
             mock_config.ALLOW_CREATE_WORKSPACE = True
             mock_config.MAIL_TYPE = "smtp"
@@ -362,6 +365,7 @@ class TestFeatureService:
             assert result.enable_email_code_login is True
             assert result.enable_email_password_login is True
             assert result.enable_social_oauth_login is False
+            assert result.enable_collaboration_mode is False
             assert result.is_allow_register is True
             assert result.is_allow_create_workspace is True
             assert result.is_email_setup is True
diff --git a/api/uv.lock b/api/uv.lock
index db4827e143..5ba0eda03e 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -562,6 +562,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/57/f4/a69c20ee4f660081a7dedb1ac57f29be9378e04edfcb90c526b923d4bebc/beautifulsoup4-4.12.2-py3-none-any.whl", hash = "sha256:bd2520ca0d9d7d12694a53d44ac482d181b4ec1888909b035a3dbf40d0f57d4a", size = 142979, upload-time = "2023-04-07T15:02:50.77Z" },
 ]
 
+[[package]]
+name = "bidict"
+version = "0.23.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/9a/6e/026678aa5a830e07cd9498a05d3e7e650a4f56a42f267a53d22bcda1bdc9/bidict-0.23.1.tar.gz", hash = "sha256:03069d763bc387bbd20e7d49914e75fc4132a41937fa3405417e1a5a2d006d71", size = 29093, upload-time = "2024-02-18T19:09:05.748Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/99/37/e8730c3587a65eb5645d4aba2d27aae48e8003614d6aaf15dda67f702f1f/bidict-0.23.1-py3-none-any.whl", hash = "sha256:5dae8d4d79b552a71cbabc7deb25dfe8ce710b17ff41711e13010ead2abfc3e5", size = 32764, upload-time = "2024-02-18T19:09:04.156Z" },
+]
+
 [[package]]
 name = "billiard"
 version = "4.2.2"
@@ -1322,6 +1331,7 @@ dependencies = [
     { name = "flask-restx" },
     { name = "flask-sqlalchemy" },
     { name = "gevent" },
+    { name = "gevent-websocket" },
     { name = "gmpy2" },
     { name = "google-api-core" },
     { name = "google-api-python-client" },
@@ -1370,6 +1380,7 @@ dependencies = [
     { name = "pypdfium2" },
     { name = "python-docx" },
     { name = "python-dotenv" },
+    { name = "python-socketio" },
     { name = "pyyaml" },
     { name = "readabilipy" },
     { name = "redis", extra = ["hiredis"] },
@@ -1516,6 +1527,7 @@ requires-dist = [
     { name = "flask-restx", specifier = "~=1.3.0" },
     { name = "flask-sqlalchemy", specifier = "~=3.1.1" },
     { name = "gevent", specifier = "~=25.9.1" },
+    { name = "gevent-websocket", specifier = "~=0.10.1" },
     { name = "gmpy2", specifier = "~=2.2.1" },
     { name = "google-api-core", specifier = "==2.18.0" },
     { name = "google-api-python-client", specifier = "==2.90.0" },
@@ -1564,6 +1576,7 @@ requires-dist = [
     { name = "pypdfium2", specifier = "==4.30.0" },
     { name = "python-docx", specifier = "~=1.1.0" },
     { name = "python-dotenv", specifier = "==1.0.1" },
+    { name = "python-socketio", specifier = "~=5.13.0" },
     { name = "pyyaml", specifier = "~=6.0.1" },
     { name = "readabilipy", specifier = "~=0.3.0" },
     { name = "redis", extras = ["hiredis"], specifier = "~=6.1.0" },
@@ -2119,6 +2132,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/d5/98/caf06d5d22a7c129c1fb2fc1477306902a2c8ddfd399cd26bbbd4caf2141/gevent-25.9.1-cp312-cp312-win_amd64.whl", hash = "sha256:4acd6bcd5feabf22c7c5174bd3b9535ee9f088d2bbce789f740ad8d6554b18f3", size = 1682837, upload-time = "2025-09-17T19:48:47.318Z" },
 ]
 
+[[package]]
+name = "gevent-websocket"
+version = "0.10.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "gevent" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/98/d2/6fa19239ff1ab072af40ebf339acd91fb97f34617c2ee625b8e34bf42393/gevent-websocket-0.10.1.tar.gz", hash = "sha256:7eaef32968290c9121f7c35b973e2cc302ffb076d018c9068d2f5ca8b2d85fb0", size = 18366, upload-time = "2017-03-12T22:46:05.68Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/7b/84/2dc373eb6493e00c884cc11e6c059ec97abae2678d42f06bf780570b0193/gevent_websocket-0.10.1-py3-none-any.whl", hash = "sha256:17b67d91282f8f4c973eba0551183fc84f56f1c90c8f6b6b30256f31f66f5242", size = 22987, upload-time = "2017-03-12T22:46:03.611Z" },
+]
+
 [[package]]
 name = "gitdb"
 version = "4.0.12"
@@ -5078,6 +5103,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/6a/3e/b68c118422ec867fa7ab88444e1274aa40681c606d59ac27de5a5588f082/python_dotenv-1.0.1-py3-none-any.whl", hash = "sha256:f7b63ef50f1b690dddf550d03497b66d609393b40b564ed0d674909a68ebf16a", size = 19863, upload-time = "2024-01-23T06:32:58.246Z" },
 ]
 
+[[package]]
+name = "python-engineio"
+version = "4.12.3"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "simple-websocket" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c9/d8/63e5535ab21dc4998ba1cfe13690ccf122883a38f025dca24d6e56c05eba/python_engineio-4.12.3.tar.gz", hash = "sha256:35633e55ec30915e7fc8f7e34ca8d73ee0c080cec8a8cd04faf2d7396f0a7a7a", size = 91910, upload-time = "2025-09-28T06:31:36.765Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/d8/f0/c5aa0a69fd9326f013110653543f36ece4913c17921f3e1dbd78e1b423ee/python_engineio-4.12.3-py3-none-any.whl", hash = "sha256:7c099abb2a27ea7ab429c04da86ab2d82698cdd6c52406cb73766fe454feb7e1", size = 59637, upload-time = "2025-09-28T06:31:35.354Z" },
+]
+
 [[package]]
 name = "python-http-client"
 version = "3.3.7"
@@ -5134,6 +5171,19 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/d9/4f/00be2196329ebbff56ce564aa94efb0fbc828d00de250b1980de1a34ab49/python_pptx-1.0.2-py3-none-any.whl", hash = "sha256:160838e0b8565a8b1f67947675886e9fea18aa5e795db7ae531606d68e785cba", size = 472788, upload-time = "2024-08-07T17:33:28.192Z" },
 ]
 
+[[package]]
+name = "python-socketio"
+version = "5.13.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "bidict" },
+    { name = "python-engineio" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/21/1a/396d50ccf06ee539fa758ce5623b59a9cb27637fc4b2dc07ed08bf495e77/python_socketio-5.13.0.tar.gz", hash = "sha256:ac4e19a0302ae812e23b712ec8b6427ca0521f7c582d6abb096e36e24a263029", size = 121125, upload-time = "2025-04-12T15:46:59.933Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3c/32/b4fb8585d1be0f68bde7e110dffbcf354915f77ad8c778563f0ad9655c02/python_socketio-5.13.0-py3-none-any.whl", hash = "sha256:51f68d6499f2df8524668c24bcec13ba1414117cfb3a90115c559b601ab10caf", size = 77800, upload-time = "2025-04-12T15:46:58.412Z" },
+]
+
 [[package]]
 name = "pytz"
 version = "2025.2"
@@ -5639,6 +5689,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e0/f9/0595336914c5619e5f28a1fb793285925a8cd4b432c9da0a987836c7f822/shellingham-1.5.4-py2.py3-none-any.whl", hash = "sha256:7ecfff8f2fd72616f7481040475a65b2bf8af90a56c89140852d1120324e8686", size = 9755, upload-time = "2023-10-24T04:13:38.866Z" },
 ]
 
+[[package]]
+name = "simple-websocket"
+version = "1.1.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "wsproto" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/b0/d4/bfa032f961103eba93de583b161f0e6a5b63cebb8f2c7d0c6e6efe1e3d2e/simple_websocket-1.1.0.tar.gz", hash = "sha256:7939234e7aa067c534abdab3a9ed933ec9ce4691b0713c78acb195560aa52ae4", size = 17300, upload-time = "2024-10-10T22:39:31.412Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/52/59/0782e51887ac6b07ffd1570e0364cf901ebc36345fea669969d2084baebb/simple_websocket-1.1.0-py3-none-any.whl", hash = "sha256:4af6069630a38ed6c561010f0e11a5bc0d4ca569b36306eb257cd9a192497c8c", size = 13842, upload-time = "2024-10-10T22:39:29.645Z" },
+]
+
 [[package]]
 name = "six"
 version = "1.17.0"
@@ -7038,6 +7100,18 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/1f/f6/a933bd70f98e9cf3e08167fc5cd7aaaca49147e48411c0bd5ae701bb2194/wrapt-1.17.3-py3-none-any.whl", hash = "sha256:7171ae35d2c33d326ac19dd8facb1e82e5fd04ef8c6c0e394d7af55a55051c22", size = 23591, upload-time = "2025-08-12T05:53:20.674Z" },
 ]
 
+[[package]]
+name = "wsproto"
+version = "1.2.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "h11" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/c9/4a/44d3c295350d776427904d73c189e10aeae66d7f555bb2feee16d1e4ba5a/wsproto-1.2.0.tar.gz", hash = "sha256:ad565f26ecb92588a3e43bc3d96164de84cd9902482b130d0ddbaa9664a85065", size = 53425, upload-time = "2022-08-23T19:58:21.447Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/78/58/e860788190eba3bcce367f74d29c4675466ce8dddfba85f7827588416f01/wsproto-1.2.0-py3-none-any.whl", hash = "sha256:b9acddd652b585d75b20477888c56642fdade28bdfd3579aa24a4d2c037dd736", size = 24226, upload-time = "2022-08-23T19:58:19.96Z" },
+]
+
 [[package]]
 name = "xinference-client"
 version = "1.2.2"
diff --git a/docker/.env.example b/docker/.env.example
index 519f4aa3e0..f39b85db76 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -127,6 +127,10 @@ MIGRATION_ENABLED=true
 # The default value is 300 seconds.
 FILES_ACCESS_TIMEOUT=300
 
+# Collaboration mode toggle
+# To open collaboration features, you also need to set SERVER_WORKER_CLASS=geventwebsocket.gunicorn.workers.GeventWebSocketWorker
+ENABLE_COLLABORATION_MODE=false
+
 # Access token expiration time in minutes
 ACCESS_TOKEN_EXPIRE_MINUTES=60
 
@@ -160,6 +164,7 @@ SERVER_WORKER_AMOUNT=1
 # Modifying it may also decrease throughput.
 #
 # It is strongly discouraged to change this parameter.
+# If enable collaboration mode, it must be set to geventwebsocket.gunicorn.workers.GeventWebSocketWorker
 SERVER_WORKER_CLASS=gevent
 
 # Default number of worker connections, the default is 10.
diff --git a/docker/nginx/conf.d/default.conf.template b/docker/nginx/conf.d/default.conf.template
index 1d63c1b97d..94a748290f 100644
--- a/docker/nginx/conf.d/default.conf.template
+++ b/docker/nginx/conf.d/default.conf.template
@@ -14,6 +14,14 @@ server {
       include proxy.conf;
     }
 
+    location /socket.io/ {
+      proxy_pass http://api:5001;
+      include proxy.conf;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_cache_bypass $http_upgrade;
+    }
+
     location /v1 {
       proxy_pass http://api:5001;
       include proxy.conf;
diff --git a/docker/nginx/proxy.conf.template b/docker/nginx/proxy.conf.template
index 117f806146..3c39e507ff 100644
--- a/docker/nginx/proxy.conf.template
+++ b/docker/nginx/proxy.conf.template
@@ -5,7 +5,7 @@ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 proxy_set_header X-Forwarded-Port $server_port;
 proxy_http_version 1.1;
-proxy_set_header Connection "";
+# proxy_set_header Connection "";
 proxy_buffering off;
 proxy_read_timeout ${NGINX_PROXY_READ_TIMEOUT};
 proxy_send_timeout ${NGINX_PROXY_SEND_TIMEOUT};
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
index 7e592729a5..b7292b0acb 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import AppCard from '@/app/components/app/overview/app-card'
@@ -24,6 +24,8 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppWorkflow } from '@/service/use-workflow'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import { isTriggerNode } from '@/app/components/workflow/types'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 
 export type ICardViewProps = {
   appId: string
@@ -63,15 +65,44 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
 
     message ||= (type === 'success' ? 'modifiedSuccessfully' : 'modifiedUnsuccessfully')
 
-    if (type === 'success')
+    if (type === 'success') {
       updateAppDetail()
 
+      // Emit collaboration event to notify other clients of app state changes
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'app_state_update',
+          data: { timestamp: Date.now() },
+          timestamp: Date.now(),
+        })
+      }
+    }
+
     notify({
       type,
       message: t(`common.actionMsg.${message}`),
     })
   }
 
+  // Listen for collaborative app state updates from other clients
+  useEffect(() => {
+    if (!appId) return
+
+    const unsubscribe = collaborationManager.onAppStateUpdate(async (update: any) => {
+      try {
+        console.log('Received app state update from collaboration:', update)
+        // Update app detail when other clients modify app state
+        await updateAppDetail()
+      }
+      catch (error) {
+        console.error('app state update failed:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId])
+
   const onChangeSiteStatus = async (value: boolean) => {
     const [err] = await asyncRunSafe<App>(
       updateAppSiteStatus({
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index c2bda8d8fc..4384673f02 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -16,7 +16,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
-import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
+import { copyApp, deleteApp, exportAppConfig, fetchAppDetail, updateAppInfo } from '@/service/apps'
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -31,6 +31,8 @@ import AppOperations from './app-operations'
 import dynamic from 'next/dynamic'
 import cn from '@/utils/classnames'
 import { AppModeEnum } from '@/types/app'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), {
   ssr: false,
@@ -74,6 +76,19 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
   const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
   const [showExportWarning, setShowExportWarning] = useState(false)
 
+  const emitAppMetaUpdate = useCallback(() => {
+    if (!appDetail?.id)
+      return
+    const socket = webSocketClient.getSocket(appDetail.id)
+    if (socket) {
+      socket.emit('collaboration_event', {
+        type: 'app_meta_update',
+        data: { timestamp: Date.now() },
+        timestamp: Date.now(),
+      })
+    }
+  }, [appDetail?.id])
+
   const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
     icon_type,
@@ -102,11 +117,12 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
         message: t('app.editDone'),
       })
       setAppDetail(app)
+      emitAppMetaUpdate()
     }
     catch {
       notify({ type: 'error', message: t('app.editFailed') })
     }
-  }, [appDetail, notify, setAppDetail, t])
+  }, [appDetail, notify, setAppDetail, t, emitAppMetaUpdate])
 
   const onCopy: DuplicateAppModalProps['onConfirm'] = async ({ name, icon_type, icon, icon_background }) => {
     if (!appDetail)
@@ -203,6 +219,23 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     setShowConfirmDelete(false)
   }, [appDetail, notify, onPlanInfoChanged, replace, setAppDetail, t])
 
+  useEffect(() => {
+    if (!appDetail?.id)
+      return
+
+    const unsubscribe = collaborationManager.onAppMetaUpdate(async () => {
+      try {
+        const res = await fetchAppDetail({ url: '/apps', id: appDetail.id })
+        setAppDetail({ ...res })
+      }
+      catch (error) {
+        console.error('failed to refresh app detail from collaboration update:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appDetail?.id, setAppDetail])
+
   const { isCurrentWorkspaceEditor } = useAppContext()
 
   if (!appDetail)
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 64ce869c5d..d153d76c68 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -42,6 +42,9 @@ import type { InputVar } from '@/app/components/workflow/types'
 import { appDefaultIconBackground } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { useInvalidateAppWorkflow } from '@/service/use-workflow'
 import { AccessMode } from '@/models/access-control'
 import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
 import { fetchAppDetailDirect } from '@/service/apps'
@@ -148,6 +151,7 @@ const AppPublisher = ({
 
   const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
   const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
+  const invalidateAppWorkflow = useInvalidateAppWorkflow()
 
   const noAccessPermission = useMemo(() => systemFeatures.webapp_auth.enabled && appDetail && appDetail.access_mode !== AccessMode.EXTERNAL_MEMBERS && !userCanAccessApp?.result, [systemFeatures, appDetail, userCanAccessApp])
   const disabledFunctionButton = useMemo(() => (!publishedAt || missingStartNode || noAccessPermission), [publishedAt, missingStartNode, noAccessPermission])
@@ -182,11 +186,27 @@ const AppPublisher = ({
     try {
       await onPublish?.(params)
       setPublished(true)
+
+      const appId = appDetail?.id
+      const socket = appId ? webSocketClient.getSocket(appId) : null
+      if (appId)
+        invalidateAppWorkflow(appId)
+      if (socket) {
+        const timestamp = Date.now()
+        socket.emit('collaboration_event', {
+          type: 'app_publish_update',
+          data: {
+            action: 'published',
+            timestamp,
+          },
+          timestamp,
+        })
+      }
     }
     catch {
       setPublished(false)
     }
-  }, [onPublish])
+  }, [appDetail?.id, onPublish, invalidateAppWorkflow])
 
   const handleRestore = useCallback(async () => {
     try {
@@ -243,6 +263,18 @@ const AppPublisher = ({
     handlePublish()
   }, { exactMatch: true, useCapture: true })
 
+  useEffect(() => {
+    const appId = appDetail?.id
+    if (!appId) return
+
+    const unsubscribe = collaborationManager.onAppPublishUpdate((update: any) => {
+      if (update?.data?.action === 'published')
+        invalidateAppWorkflow(appId)
+    })
+
+    return unsubscribe
+  }, [appDetail?.id, invalidateAppWorkflow])
+
   const hasPublishedVersion = !!publishedAt
   const workflowToolDisabled = !hasPublishedVersion || !workflowToolAvailable
   const workflowToolMessage = workflowToolDisabled ? t('workflow.common.workflowAsToolDisabledHint') : undefined
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 564eb493e5..31c196f0df 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -32,6 +32,8 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { formatTime } from '@/utils/time'
 import { useGetUserCanAccessApp } from '@/service/access-control'
 import dynamic from 'next/dynamic'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import type { WorkflowOnlineUser } from '@/models/app'
 
 const EditAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), {
   ssr: false,
@@ -55,9 +57,10 @@ const AccessControl = dynamic(() => import('@/app/components/app/app-access-cont
 export type AppCardProps = {
   app: App
   onRefresh?: () => void
+  onlineUsers?: WorkflowOnlineUser[]
 }
 
-const AppCard = ({ app, onRefresh }: AppCardProps) => {
+const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@@ -333,6 +336,19 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     return `${t('datasetDocuments.segment.editedAt')} ${timeText}`
   }, [app.updated_at, app.created_at])
 
+  const onlineUserAvatars = useMemo(() => {
+    if (!onlineUsers.length)
+      return []
+
+    return onlineUsers
+      .map(user => ({
+        id: user.user_id || user.sid || '',
+        name: user.username || 'User',
+        avatar_url: user.avatar || undefined,
+      }))
+      .filter(user => !!user.id)
+  }, [onlineUsers])
+
   return (
     <>
       <div
@@ -377,6 +393,11 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
               <RiVerifiedBadgeLine className='h-4 w-4 text-text-quaternary' />
             </Tooltip>}
           </div>
+          <div>
+            {onlineUserAvatars.length > 0 && (
+              <UserAvatarList users={onlineUserAvatars} maxVisible={3} size={20} />
+            )}
+          </div>
         </div>
         <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>
           <div
diff --git a/web/app/components/apps/list.tsx b/web/app/components/apps/list.tsx
index 6b18928bee..6bc5433115 100644
--- a/web/app/components/apps/list.tsx
+++ b/web/app/components/apps/list.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   useRouter,
 } from 'next/navigation'
 import useSWRInfinite from 'swr/infinite'
+import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import {
@@ -19,8 +20,8 @@ import AppCard from './app-card'
 import NewAppCard from './new-app-card'
 import useAppsQueryState from './hooks/use-apps-query-state'
 import { useDSLDragDrop } from './hooks/use-dsl-drag-drop'
-import type { AppListResponse } from '@/models/app'
-import { fetchAppList } from '@/service/apps'
+import type { AppListResponse, WorkflowOnlineUser } from '@/models/app'
+import { fetchAppList, fetchWorkflowOnlineUsers } from '@/service/apps'
 import { useAppContext } from '@/context/app-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { CheckModal } from '@/hooks/use-pay'
@@ -113,6 +114,36 @@ const List = () => {
     },
   )
 
+  const apps = useMemo(() => data?.flatMap(page => page.data) ?? [], [data])
+
+  const workflowIds = useMemo(() => {
+    const ids = new Set<string>()
+    apps.forEach((appItem) => {
+      const workflowId = appItem.id
+      if (!workflowId)
+        return
+
+      if (appItem.mode === 'workflow' || appItem.mode === 'advanced-chat')
+        ids.add(workflowId)
+    })
+    return Array.from(ids)
+  }, [apps])
+
+  const { data: onlineUsersByWorkflow, mutate: refreshOnlineUsers } = useSWR<Record<string, WorkflowOnlineUser[]>>(
+    workflowIds.length ? { workflowIds } : null,
+    fetchWorkflowOnlineUsers,
+  )
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      mutate()
+      if (workflowIds.length)
+        refreshOnlineUsers()
+    }, 10000)
+
+    return () => window.clearInterval(timer)
+  }, [workflowIds.join(','), mutate, refreshOnlineUsers])
+
   const anchorRef = useRef<HTMLDivElement>(null)
   const options = [
     { value: 'all', text: t('app.types.all'), icon: <RiApps2Line className='mr-1 h-[14px] w-[14px]' /> },
@@ -222,7 +253,12 @@ const List = () => {
             {isCurrentWorkspaceEditor
               && <NewAppCard ref={newAppCardRef} onSuccess={mutate} selectedAppType={activeTab} />}
             {data.map(({ data: apps }) => apps.map(app => (
-              <AppCard key={app.id} app={app} onRefresh={mutate} />
+              <AppCard
+                key={app.id}
+                app={app}
+                onRefresh={mutate}
+                onlineUsers={onlineUsersByWorkflow?.[app.id] ?? []}
+              />
             )))}
           </div>
           : <div className='relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
diff --git a/web/app/components/base/avatar/index.tsx b/web/app/components/base/avatar/index.tsx
index 89019a19b0..8226320c2a 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -9,6 +9,7 @@ export type AvatarProps = {
   className?: string
   textClassName?: string
   onError?: (x: boolean) => void
+  backgroundColor?: string
 }
 const Avatar = ({
   name,
@@ -17,9 +18,18 @@ const Avatar = ({
   className,
   textClassName,
   onError,
+  backgroundColor,
 }: AvatarProps) => {
-  const avatarClassName = 'shrink-0 flex items-center rounded-full bg-primary-600'
-  const style = { width: `${size}px`, height: `${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
+  const avatarClassName = backgroundColor
+    ? 'shrink-0 flex items-center rounded-full'
+    : 'shrink-0 flex items-center rounded-full bg-primary-600'
+  const style = {
+    width: `${size}px`,
+    height: `${size}px`,
+    fontSize: `${size}px`,
+    lineHeight: `${size}px`,
+    ...(backgroundColor && !avatar ? { backgroundColor } : {}),
+  }
   const [imgError, setImgError] = useState(false)
 
   const handleError = () => {
@@ -35,14 +45,18 @@ const Avatar = ({
 
   if (avatar && !imgError) {
     return (
-      <img
+      <span
         className={cn(avatarClassName, className)}
         style={style}
-        alt={name}
-        src={avatar}
-        onError={handleError}
-        onLoad={() => onError?.(false)}
-      />
+      >
+        <img
+          className='h-full w-full rounded-full object-cover'
+          alt={name}
+          src={avatar}
+          onError={handleError}
+          onLoad={() => onError?.(false)}
+        />
+      </span>
     )
   }
 
diff --git a/web/app/components/base/content-dialog/index.tsx b/web/app/components/base/content-dialog/index.tsx
index 5efab57a40..588ef67bc1 100644
--- a/web/app/components/base/content-dialog/index.tsx
+++ b/web/app/components/base/content-dialog/index.tsx
@@ -15,11 +15,12 @@ const ContentDialog = ({
   onClose,
   children,
 }: ContentDialogProps) => {
+  // z-[70]: Ensures dialog appears above workflow operators (z-[60]) and other UI elements
   return (
     <Transition
       show={show}
       as='div'
-      className='absolute left-0 top-0 z-30 box-border h-full w-full p-2'
+      className='absolute left-0 top-0 z-[70] box-border h-full w-full p-2'
     >
       <TransitionChild>
         <div
diff --git a/web/app/components/base/icons/assets/public/common/enter-key.svg b/web/app/components/base/icons/assets/public/common/enter-key.svg
new file mode 100644
index 0000000000..edfddfc188
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/common/enter-key.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z" fill="white" fill-opacity="0.12"/>
+<path d="M3.42756 8.7358V7.62784H10.8764C11.2003 7.62784 11.4957 7.5483 11.7628 7.3892C12.0298 7.23011 12.2415 7.01705 12.3977 6.75C12.5568 6.48295 12.6364 6.1875 12.6364 5.86364C12.6364 5.53977 12.5568 5.24574 12.3977 4.98153C12.2386 4.71449 12.0256 4.50142 11.7585 4.34233C11.4943 4.18324 11.2003 4.10369 10.8764 4.10369H10.3991V3H10.8764C11.4048 3 11.8849 3.12926 12.3168 3.38778C12.7486 3.64631 13.0938 3.99148 13.3523 4.4233C13.6108 4.85511 13.7401 5.33523 13.7401 5.86364C13.7401 6.25852 13.6648 6.62926 13.5142 6.97585C13.3665 7.32244 13.1619 7.62784 12.9006 7.89205C12.6392 8.15625 12.3352 8.36364 11.9886 8.5142C11.642 8.66193 11.2713 8.7358 10.8764 8.7358H3.42756ZM6.16761 12.0554L2.29403 8.18182L6.16761 4.30824L6.9304 5.07102L3.81534 8.18182L6.9304 11.2926L6.16761 12.0554Z" fill="white"/>
+</svg>
diff --git a/web/app/components/base/icons/assets/public/other/comment.svg b/web/app/components/base/icons/assets/public/other/comment.svg
new file mode 100644
index 0000000000..7f48f22fbd
--- /dev/null
+++ b/web/app/components/base/icons/assets/public/other/comment.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
+<path d="M12.3334 4C12.3334 2.52725 11.1395 1.33333 9.66671 1.33333H4.33337C2.86062 1.33333 1.66671 2.52724 1.66671 4V10.6667H9.66671C11.1395 10.6667 12.3334 9.47274 12.3334 8V4ZM7.66671 6.66667V8H4.33337V6.66667H7.66671ZM9.66671 4V5.33333H4.33337V4H9.66671ZM13.6667 8C13.6667 10.2091 11.8758 12 9.66671 12H0.333374V4C0.333374 1.79086 2.12424 0 4.33337 0H9.66671C11.8758 0 13.6667 1.79086 13.6667 4V8Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/public/common/EnterKey.json b/web/app/components/base/icons/src/public/common/EnterKey.json
new file mode 100644
index 0000000000..17c8e645ae
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/EnterKey.json
@@ -0,0 +1,36 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
+					"fill": "white",
+					"fill-opacity": "0.12"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M3.42756 8.7358V7.62784H10.8764C11.2003 7.62784 11.4957 7.5483 11.7628 7.3892C12.0298 7.23011 12.2415 7.01705 12.3977 6.75C12.5568 6.48295 12.6364 6.1875 12.6364 5.86364C12.6364 5.53977 12.5568 5.24574 12.3977 4.98153C12.2386 4.71449 12.0256 4.50142 11.7585 4.34233C11.4943 4.18324 11.2003 4.10369 10.8764 4.10369H10.3991V3H10.8764C11.4048 3 11.8849 3.12926 12.3168 3.38778C12.7486 3.64631 13.0938 3.99148 13.3523 4.4233C13.6108 4.85511 13.7401 5.33523 13.7401 5.86364C13.7401 6.25852 13.6648 6.62926 13.5142 6.97585C13.3665 7.32244 13.1619 7.62784 12.9006 7.89205C12.6392 8.15625 12.3352 8.36364 11.9886 8.5142C11.642 8.66193 11.2713 8.7358 10.8764 8.7358H3.42756ZM6.16761 12.0554L2.29403 8.18182L6.16761 4.30824L6.9304 5.07102L3.81534 8.18182L6.9304 11.2926L6.16761 12.0554Z",
+					"fill": "white"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "EnterKey"
+}
diff --git a/web/app/components/base/icons/src/public/common/EnterKey.tsx b/web/app/components/base/icons/src/public/common/EnterKey.tsx
new file mode 100644
index 0000000000..5365f48344
--- /dev/null
+++ b/web/app/components/base/icons/src/public/common/EnterKey.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './EnterKey.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'EnterKey'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/common/index.ts b/web/app/components/base/icons/src/public/common/index.ts
index e672e52613..f4769d42de 100644
--- a/web/app/components/base/icons/src/public/common/index.ts
+++ b/web/app/components/base/icons/src/public/common/index.ts
@@ -1,6 +1,7 @@
 export { default as D } from './D'
 export { default as DiagonalDividingLine } from './DiagonalDividingLine'
 export { default as Dify } from './Dify'
+export { default as EnterKey } from './EnterKey'
 export { default as Gdpr } from './Gdpr'
 export { default as Github } from './Github'
 export { default as Highlight } from './Highlight'
diff --git a/web/app/components/base/icons/src/public/other/Comment.json b/web/app/components/base/icons/src/public/other/Comment.json
new file mode 100644
index 0000000000..c4865a010c
--- /dev/null
+++ b/web/app/components/base/icons/src/public/other/Comment.json
@@ -0,0 +1,26 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"xmlns": "http://www.w3.org/2000/svg",
+			"width": "14",
+			"height": "12",
+			"viewBox": "0 0 14 12",
+			"fill": "none"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M12.3334 4C12.3334 2.52725 11.1395 1.33333 9.66671 1.33333H4.33337C2.86062 1.33333 1.66671 2.52724 1.66671 4V10.6667H9.66671C11.1395 10.6667 12.3334 9.47274 12.3334 8V4ZM7.66671 6.66667V8H4.33337V6.66667H7.66671ZM9.66671 4V5.33333H4.33337V4H9.66671ZM13.6667 8C13.6667 10.2091 11.8758 12 9.66671 12H0.333374V4C0.333374 1.79086 2.12424 0 4.33337 0H9.66671C11.8758 0 13.6667 1.79086 13.6667 4V8Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Comment"
+}
diff --git a/web/app/components/base/icons/src/public/other/Comment.tsx b/web/app/components/base/icons/src/public/other/Comment.tsx
new file mode 100644
index 0000000000..85c2559b76
--- /dev/null
+++ b/web/app/components/base/icons/src/public/other/Comment.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Comment.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'Comment'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/public/other/index.ts b/web/app/components/base/icons/src/public/other/index.ts
index a7558ca0ab..3637525202 100644
--- a/web/app/components/base/icons/src/public/other/index.ts
+++ b/web/app/components/base/icons/src/public/other/index.ts
@@ -1,4 +1,5 @@
 export { default as Icon3Dots } from './Icon3Dots'
+export { default as Comment } from './Comment'
 export { default as DefaultToolIcon } from './DefaultToolIcon'
 export { default as Message3Fill } from './Message3Fill'
 export { default as RowStruct } from './RowStruct'
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 50fdc1f920..0b73a7b8c9 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -2,6 +2,7 @@
 
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import type {
   EditorState,
 } from 'lexical'
@@ -80,6 +81,29 @@ import {
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import cn from '@/utils/classnames'
 
+const ValueSyncPlugin: FC<{ value?: string }> = ({ value }) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (value === undefined)
+      return
+
+    const incomingValue = value ?? ''
+    const shouldUpdate = editor.getEditorState().read(() => {
+      const currentText = $getRoot().getChildren().map(node => node.getTextContent()).join('\n')
+      return currentText !== incomingValue
+    })
+
+    if (!shouldUpdate)
+      return
+
+    const editorState = editor.parseEditorState(textToEditorState(incomingValue))
+    editor.setEditorState(editorState)
+  }, [editor, value])
+
+  return null
+}
+
 export type PromptEditorProps = {
   instanceId?: string
   compact?: boolean
@@ -293,6 +317,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
             <VariableValueBlock />
           )
         }
+        <ValueSyncPlugin value={value} />
         <OnChangePlugin onChange={handleEditorChange} />
         <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
         <UpdateBlock instanceId={instanceId} />
diff --git a/web/app/components/base/user-avatar-list/index.tsx b/web/app/components/base/user-avatar-list/index.tsx
new file mode 100644
index 0000000000..b0d1989521
--- /dev/null
+++ b/web/app/components/base/user-avatar-list/index.tsx
@@ -0,0 +1,77 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
+import { useAppContext } from '@/context/app-context'
+import Avatar from '@/app/components/base/avatar'
+
+type User = {
+  id: string
+  name: string
+  avatar_url?: string | null
+}
+
+type UserAvatarListProps = {
+  users: User[]
+  maxVisible?: number
+  size?: number
+  className?: string
+  showCount?: boolean
+}
+
+export const UserAvatarList: FC<UserAvatarListProps> = memo(({
+  users,
+  maxVisible = 3,
+  size = 24,
+  className = '',
+  showCount = true,
+}) => {
+  const { userProfile } = useAppContext()
+  if (!users.length) return null
+
+  const shouldShowCount = showCount && users.length > maxVisible
+  const actualMaxVisible = shouldShowCount ? Math.max(1, maxVisible - 1) : maxVisible
+  const visibleUsers = users.slice(0, actualMaxVisible)
+  const remainingCount = users.length - actualMaxVisible
+
+  const currentUserId = userProfile?.id
+
+  return (
+    <div className={`flex items-center -space-x-1 ${className}`}>
+      {visibleUsers.map((user, index) => {
+        const isCurrentUser = user.id === currentUserId
+        const userColor = isCurrentUser ? undefined : getUserColor(user.id)
+        return (
+          <div
+            key={`${user.id}-${index}`}
+            className='relative'
+            style={{ zIndex: visibleUsers.length - index }}
+          >
+            <Avatar
+              name={user.name}
+              avatar={user.avatar_url || null}
+              size={size}
+              className='ring-2 ring-components-panel-bg'
+              backgroundColor={userColor}
+            />
+          </div>
+        )
+      },
+
+      )}
+      {shouldShowCount && remainingCount > 0 && (
+        <div
+          className={'flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg'}
+          style={{
+            zIndex: 0,
+            width: size,
+            height: size,
+          }}
+        >
+          +{remainingCount}
+        </div>
+      )}
+    </div>
+  )
+})
+
+UserAvatarList.displayName = 'UserAvatarList'
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index ffda65e671..8bc33371cd 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -49,7 +49,7 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
 
-  const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>() // 初始化记录为空数组
+  const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>() // Initialize records as empty array
   const [externalHitResult, setExternalHitResult] = useState<ExternalKnowledgeBaseHitTestingResponse | undefined>()
   const [submitLoading, setSubmitLoading] = useState(false)
   const [text, setText] = useState('')
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index ad3a1e7109..c0f89c3c7d 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -35,7 +35,7 @@ const MenuDialog = ({
 
   return (
     <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-[60]" onClose={noop}>
+      <Dialog as="div" className="relative z-[70]" onClose={noop}>
         <div className="fixed inset-0">
           <div className="flex min-h-full flex-col items-center justify-center">
             <TransitionChild>
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 11af81ec1a..659db2d737 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -16,6 +16,7 @@ import {
   useUpdateMCPServer,
 } from '@/service/use-tools'
 import cn from '@/utils/classnames'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
 
 export type ModalProps = {
   appID: string
@@ -59,6 +60,21 @@ const MCPServerModal = ({
     return res
   }
 
+  const emitMcpServerUpdate = (action: 'created' | 'updated') => {
+    const socket = webSocketClient.getSocket(appID)
+    if (!socket) return
+
+    const timestamp = Date.now()
+    socket.emit('collaboration_event', {
+      type: 'mcp_server_update',
+      data: {
+        action,
+        timestamp,
+      },
+      timestamp,
+    })
+  }
+
   const submit = async () => {
     if (!data) {
       const payload: any = {
@@ -71,6 +87,7 @@ const MCPServerModal = ({
 
       await createMCPServer(payload)
       invalidateMCPServerDetail(appID)
+      emitMcpServerUpdate('created')
       onHide()
     }
     else {
@@ -83,6 +100,7 @@ const MCPServerModal = ({
       payload.description = description
       await updateMCPServer(payload)
       invalidateMCPServerDetail(appID)
+      emitMcpServerUpdate('updated')
       onHide()
     }
   }
@@ -92,6 +110,7 @@ const MCPServerModal = ({
       isShow={show}
       onClose={onHide}
       className={cn('relative !max-w-[520px] !p-0')}
+      highPriority
     >
       <div className='absolute right-5 top-5 z-10 cursor-pointer p-1.5' onClick={onHide}>
         <RiCloseLine className='h-5 w-5 text-text-tertiary' />
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 1f40b1e4b3..de027ce453 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -27,6 +27,8 @@ import { BlockEnum } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 import { fetchAppDetail } from '@/service/apps'
 import { useDocLink } from '@/context/i18n'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 
 export type IAppCardProps = {
   appInfo: AppDetailResponse & Partial<AppSSO>
@@ -97,6 +99,19 @@ function MCPServiceCard({
   const onGenCode = async () => {
     await refreshMCPServerCode(detail?.id || '')
     invalidateMCPServerDetail(appId)
+
+    // Emit collaboration event to notify other clients of MCP server changes
+    const socket = webSocketClient.getSocket(appId)
+    if (socket) {
+      socket.emit('collaboration_event', {
+        type: 'mcp_server_update',
+        data: {
+          action: 'codeRegenerated',
+          timestamp: Date.now(),
+        },
+        timestamp: Date.now(),
+      })
+    }
   }
 
   const onChangeStatus = async (state: boolean) => {
@@ -126,6 +141,20 @@ function MCPServiceCard({
       })
       invalidateMCPServerDetail(appId)
     }
+
+    // Emit collaboration event to notify other clients of MCP server status change
+    const socket = webSocketClient.getSocket(appId)
+    if (socket) {
+      socket.emit('collaboration_event', {
+        type: 'mcp_server_update',
+        data: {
+          action: 'statusChanged',
+          status: state ? 'active' : 'inactive',
+          timestamp: Date.now(),
+        },
+        timestamp: Date.now(),
+      })
+    }
   }
 
   const handleServerModalHide = () => {
@@ -138,6 +167,23 @@ function MCPServiceCard({
     setActivated(serverActivated)
   }, [serverActivated])
 
+  // Listen for collaborative MCP server updates from other clients
+  useEffect(() => {
+    if (!appId) return
+
+    const unsubscribe = collaborationManager.onMcpServerUpdate(async (update: any) => {
+      try {
+        console.log('Received MCP server update from collaboration:', update)
+        invalidateMCPServerDetail(appId)
+      }
+      catch (error) {
+        console.error('MCP server update failed:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId, invalidateMCPServerDetail])
+
   if (!currentWorkflow && isAdvancedApp)
     return null
 
diff --git a/web/app/components/workflow-app/components/workflow-main.tsx b/web/app/components/workflow-app/components/workflow-main.tsx
index e90b2904c9..d63c717947 100644
--- a/web/app/components/workflow-app/components/workflow-main.tsx
+++ b/web/app/components/workflow-app/components/workflow-main.tsx
@@ -1,11 +1,18 @@
 import {
   useCallback,
+  useEffect,
   useMemo,
+  useRef,
+  useState,
 } from 'react'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { Features as FeaturesData } from '@/app/components/base/features/types'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import type { WorkflowProps } from '@/app/components/workflow'
 import WorkflowChildren from './workflow-children'
+
 import {
   useAvailableNodesMetaData,
   useConfigsMap,
@@ -18,7 +25,12 @@ import {
   useWorkflowRun,
   useWorkflowStartRun,
 } from '../hooks'
-import { useWorkflowStore } from '@/app/components/workflow/store'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-interactions'
+import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
+import { useCollaboration } from '@/app/components/workflow/collaboration'
+import { collaborationManager } from '@/app/components/workflow/collaboration'
+import { fetchWorkflowDraft } from '@/service/workflow'
+import { useReactFlow, useStoreApi } from 'reactflow'
 
 type WorkflowMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
 const WorkflowMain = ({
@@ -28,6 +40,43 @@ const WorkflowMain = ({
 }: WorkflowMainProps) => {
   const featuresStore = useFeaturesStore()
   const workflowStore = useWorkflowStore()
+  const appId = useStore(s => s.appId)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const reactFlow = useReactFlow()
+
+  const store = useStoreApi()
+  const {
+    startCursorTracking,
+    stopCursorTracking,
+    onlineUsers,
+    cursors,
+    isConnected,
+    isEnabled: isCollaborationEnabled,
+  } = useCollaboration(appId || '', store)
+  const [myUserId, setMyUserId] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (isCollaborationEnabled && isConnected)
+      setMyUserId('current-user')
+    else
+      setMyUserId(null)
+  }, [isCollaborationEnabled, isConnected])
+
+  const filteredCursors = Object.fromEntries(
+    Object.entries(cursors).filter(([userId]) => userId !== myUserId),
+  )
+
+  useEffect(() => {
+    if (!isCollaborationEnabled)
+      return
+
+    if (containerRef.current)
+      startCursorTracking(containerRef as React.RefObject<HTMLElement>, reactFlow)
+
+    return () => {
+      stopCursorTracking()
+    }
+  }, [startCursorTracking, stopCursorTracking, reactFlow, isCollaborationEnabled])
 
   const handleWorkflowDataUpdate = useCallback((payload: any) => {
     const {
@@ -38,7 +87,33 @@ const WorkflowMain = ({
     if (features && featuresStore) {
       const { setFeatures } = featuresStore.getState()
 
-      setFeatures(features)
+      const transformedFeatures: FeaturesData = {
+        file: {
+          image: {
+            enabled: !!features.file_upload?.image?.enabled,
+            number_limits: features.file_upload?.image?.number_limits || 3,
+            transfer_methods: features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
+          },
+          enabled: !!(features.file_upload?.enabled || features.file_upload?.image?.enabled),
+          allowed_file_types: features.file_upload?.allowed_file_types || [SupportUploadFileTypes.image],
+          allowed_file_extensions: features.file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`),
+          allowed_file_upload_methods: features.file_upload?.allowed_file_upload_methods || features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
+          number_limits: features.file_upload?.number_limits || features.file_upload?.image?.number_limits || 3,
+        },
+        opening: {
+          enabled: !!features.opening_statement,
+          opening_statement: features.opening_statement,
+          suggested_questions: features.suggested_questions,
+        },
+        suggested: features.suggested_questions_after_answer || { enabled: false },
+        speech2text: features.speech_to_text || { enabled: false },
+        text2speech: features.text_to_speech || { enabled: false },
+        citation: features.retriever_resource || { enabled: false },
+        moderation: features.sensitive_word_avoidance || { enabled: false },
+        annotationReply: features.annotation_reply || { enabled: false },
+      }
+
+      setFeatures(transformedFeatures)
     }
     if (conversation_variables) {
       const { setConversationVariables } = workflowStore.getState()
@@ -55,6 +130,7 @@ const WorkflowMain = ({
     syncWorkflowDraftWhenPageClose,
   } = useNodesSyncDraft()
   const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
   const {
     handleBackupDraft,
     handleLoadBackupDraft,
@@ -62,6 +138,63 @@ const WorkflowMain = ({
     handleRun,
     handleStopRun,
   } = useWorkflowRun()
+
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled) return
+
+    const unsubscribe = collaborationManager.onVarsAndFeaturesUpdate(async (update: any) => {
+      try {
+        const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
+        handleWorkflowDataUpdate(response)
+      }
+      catch (error) {
+        console.error('workflow vars and features update failed:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId, handleWorkflowDataUpdate, isCollaborationEnabled])
+
+  // Listen for workflow updates from other users
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled) return
+
+    const unsubscribe = collaborationManager.onWorkflowUpdate(async () => {
+      console.log('Received workflow update from collaborator, fetching latest workflow data')
+      try {
+        const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
+
+        // Handle features, variables etc.
+        handleWorkflowDataUpdate(response)
+
+        // Update workflow canvas (nodes, edges, viewport)
+        if (response.graph) {
+          handleUpdateWorkflowCanvas({
+            nodes: response.graph.nodes || [],
+            edges: response.graph.edges || [],
+            viewport: response.graph.viewport || { x: 0, y: 0, zoom: 1 },
+          })
+        }
+      }
+      catch (error) {
+        console.error('Failed to fetch updated workflow:', error)
+      }
+    })
+
+    return unsubscribe
+  }, [appId, handleWorkflowDataUpdate, handleUpdateWorkflowCanvas, isCollaborationEnabled])
+
+  // Listen for sync requests from other users (only processed by leader)
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled) return
+
+    const unsubscribe = collaborationManager.onSyncRequest(() => {
+      console.log('Leader received sync request, performing sync')
+      doSyncWorkflowDraft()
+    })
+
+    return unsubscribe
+  }, [appId, doSyncWorkflowDraft, isCollaborationEnabled])
   const {
     handleStartWorkflowRun,
     handleWorkflowStartRunInChatflow,
@@ -79,6 +212,7 @@ const WorkflowMain = ({
   } = useDSL()
 
   const configsMap = useConfigsMap()
+
   const { fetchInspectVars } = useSetWorkflowVarsWithValue({
     ...configsMap,
   })
@@ -176,15 +310,23 @@ const WorkflowMain = ({
   ])
 
   return (
-    <WorkflowWithInnerContext
-      nodes={nodes}
-      edges={edges}
-      viewport={viewport}
-      onWorkflowDataUpdate={handleWorkflowDataUpdate}
-      hooksStore={hooksStore as any}
+    <div
+      ref={containerRef}
+      className="relative h-full w-full"
     >
-      <WorkflowChildren />
-    </WorkflowWithInnerContext>
+      <WorkflowWithInnerContext
+        nodes={nodes}
+        edges={edges}
+        viewport={viewport}
+        onWorkflowDataUpdate={handleWorkflowDataUpdate}
+        hooksStore={hooksStore as any}
+        cursors={filteredCursors}
+        myUserId={myUserId}
+        onlineUsers={onlineUsers}
+      >
+        <WorkflowChildren />
+      </WorkflowWithInnerContext>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow-app/components/workflow-panel.tsx b/web/app/components/workflow-app/components/workflow-panel.tsx
index 6e0504710e..693e6e78cb 100644
--- a/web/app/components/workflow-app/components/workflow-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-panel.tsx
@@ -7,6 +7,7 @@ import { useStore } from '@/app/components/workflow/store'
 import {
   useIsChatMode,
 } from '../hooks'
+import CommentsPanel from '@/app/components/workflow/panel/comments-panel'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import type { PanelProps } from '@/app/components/workflow/panel'
 import Panel from '@/app/components/workflow/panel'
@@ -67,6 +68,7 @@ const WorkflowPanelOnRight = () => {
   const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
   const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
+  const controlMode = useStore(s => s.controlMode)
 
   return (
     <>
@@ -100,6 +102,7 @@ const WorkflowPanelOnRight = () => {
           <GlobalVariablePanel />
         )
       }
+      {controlMode === 'comment' && <CommentsPanel />}
     </>
   )
 }
diff --git a/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts b/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts
index 56d9021feb..beac3d327e 100644
--- a/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts
@@ -1,13 +1,16 @@
 import { useCallback } from 'react'
 import { produce } from 'immer'
 import { useStoreApi } from 'reactflow'
+import { useParams } from 'next/navigation'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useNodesReadOnly } from '@/app/components/workflow/hooks/use-workflow'
 import { useSerialAsyncCallback } from '@/app/components/workflow/hooks/use-serial-async-callback'
-import { syncWorkflowDraft } from '@/service/workflow'
+import { type WorkflowDraftFeaturesPayload, syncWorkflowDraft } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { API_PREFIX } from '@/config'
 import { useWorkflowRefreshDraft } from '.'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export const useNodesSyncDraft = () => {
   const store = useStoreApi()
@@ -15,6 +18,8 @@ export const useNodesSyncDraft = () => {
   const featuresStore = useFeaturesStore()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
+  const params = useParams()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
 
   const getPostParams = useCallback(() => {
     const {
@@ -52,7 +57,16 @@ export const useNodesSyncDraft = () => {
         })
       })
     })
-    const viewport = { x, y, zoom }
+    const featuresPayload: WorkflowDraftFeaturesPayload = {
+      opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+      suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
+      suggested_questions_after_answer: features.suggested,
+      text_to_speech: features.text2speech,
+      speech_to_text: features.speech2text,
+      retriever_resource: features.citation,
+      sensitive_word_avoidance: features.moderation,
+      file_upload: features.file,
+    }
 
     return {
       url: `/apps/${appId}/workflows/draft`,
@@ -60,33 +74,44 @@ export const useNodesSyncDraft = () => {
         graph: {
           nodes: producedNodes,
           edges: producedEdges,
-          viewport,
-        },
-        features: {
-          opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
-          suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
-          suggested_questions_after_answer: features.suggested,
-          text_to_speech: features.text2speech,
-          speech_to_text: features.speech2text,
-          retriever_resource: features.citation,
-          sensitive_word_avoidance: features.moderation,
-          file_upload: features.file,
+          viewport: {
+            x,
+            y,
+            zoom,
+          },
         },
+        features: featuresPayload,
         environment_variables: environmentVariables,
         conversation_variables: conversationVariables,
         hash: syncWorkflowDraftHash,
+        _is_collaborative: isCollaborationEnabled,
       },
     }
-  }, [store, featuresStore, workflowStore])
+  }, [store, featuresStore, workflowStore, isCollaborationEnabled])
 
   const syncWorkflowDraftWhenPageClose = useCallback(() => {
     if (getNodesReadOnly())
       return
+
+    // Check leader status at sync time
+    const currentIsLeader = isCollaborationEnabled ? collaborationManager.getIsLeader() : true
+
+    // Only allow leader to sync data
+    if (isCollaborationEnabled && !currentIsLeader) {
+      console.log('Not leader, skipping sync on page close')
+      return
+    }
+
     const postParams = getPostParams()
 
-    if (postParams)
-      navigator.sendBeacon(`${API_PREFIX}${postParams.url}`, JSON.stringify(postParams.params))
-  }, [getPostParams, getNodesReadOnly])
+    if (postParams) {
+      console.log('Leader syncing workflow draft on page close')
+      navigator.sendBeacon(
+        `${API_PREFIX}/apps/${params.appId}/workflows/draft`,
+        JSON.stringify(postParams.params),
+      )
+    }
+  }, [getPostParams, params.appId, getNodesReadOnly, isCollaborationEnabled])
 
   const performSync = useCallback(async (
     notRefreshWhenSyncError?: boolean,
@@ -95,9 +120,24 @@ export const useNodesSyncDraft = () => {
       onError?: () => void
       onSettled?: () => void
     },
+    forceUpload?: boolean,
   ) => {
     if (getNodesReadOnly())
       return
+
+    // Check leader status at sync time
+    const currentIsLeader = isCollaborationEnabled ? collaborationManager.getIsLeader() : true
+
+    // If not leader and not forcing upload, request the leader to sync
+    if (isCollaborationEnabled && !currentIsLeader && !forceUpload) {
+      console.log('Not leader, requesting leader to sync workflow draft')
+      if (isCollaborationEnabled)
+        collaborationManager.emitSyncRequest()
+      callback?.onSettled?.()
+      return
+    }
+
+    console.log(forceUpload ? 'Force uploading workflow draft' : 'Leader performing workflow draft sync')
     const postParams = getPostParams()
 
     if (postParams) {
@@ -105,17 +145,31 @@ export const useNodesSyncDraft = () => {
         setSyncWorkflowDraftHash,
         setDraftUpdatedAt,
       } = workflowStore.getState()
+
+      // Add force_upload parameter if needed
+      const finalParams = {
+        ...postParams.params,
+        ...(forceUpload && { force_upload: true }),
+      }
+
       try {
-        const res = await syncWorkflowDraft(postParams)
+        const res = await syncWorkflowDraft({
+          url: postParams.url,
+          params: finalParams,
+        })
         setSyncWorkflowDraftHash(res.hash)
         setDraftUpdatedAt(res.updated_at)
+        console.log('Leader successfully synced workflow draft')
         callback?.onSuccess?.()
       }
       catch (error: any) {
+        console.error('Leader failed to sync workflow draft:', error)
         if (error && error.json && !error.bodyUsed) {
           error.json().then((err: any) => {
-            if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError)
+            if (err.code === 'draft_workflow_not_sync' && !notRefreshWhenSyncError) {
+              console.error('draft_workflow_not_sync', err)
               handleRefreshWorkflowDraft()
+            }
           })
         }
         callback?.onError?.()
@@ -124,7 +178,7 @@ export const useNodesSyncDraft = () => {
         callback?.onSettled?.()
       }
     }
-  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft])
+  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft, isCollaborationEnabled])
 
   const doSyncWorkflowDraft = useSerialAsyncCallback(performSync, getNodesReadOnly)
 
diff --git a/web/app/components/workflow-app/index.tsx b/web/app/components/workflow-app/index.tsx
index fcd247ef22..d5242c76e4 100644
--- a/web/app/components/workflow-app/index.tsx
+++ b/web/app/components/workflow-app/index.tsx
@@ -30,6 +30,7 @@ import {
 import type { InjectWorkflowStoreSliceFn } from '@/app/components/workflow/store'
 import { createWorkflowSlice } from './store/workflow/workflow-slice'
 import WorkflowAppMain from './components/workflow-main'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import { useSearchParams } from 'next/navigation'
 
 import { fetchRunDetail } from '@/service/log'
@@ -83,15 +84,20 @@ const WorkflowAppWithAdditionalContext = () => {
   }, [workflowStore])
 
   const nodesData = useMemo(() => {
-    if (data)
-      return initialNodes(data.graph.nodes, data.graph.edges)
-
+    if (data) {
+      const processedNodes = initialNodes(data.graph.nodes, data.graph.edges)
+      collaborationManager.setNodes([], processedNodes)
+      return processedNodes
+    }
     return []
   }, [data])
-  const edgesData = useMemo(() => {
-    if (data)
-      return initialEdges(data.graph.edges, data.graph.nodes)
 
+  const edgesData = useMemo(() => {
+    if (data) {
+      const processedEdges = initialEdges(data.graph.edges, data.graph.nodes)
+      collaborationManager.setEdges([], processedEdges)
+      return processedEdges
+    }
     return []
   }, [data])
 
diff --git a/web/app/components/workflow/candidate-node.tsx b/web/app/components/workflow/candidate-node.tsx
index 54daf13ebc..e2e70add69 100644
--- a/web/app/components/workflow/candidate-node.tsx
+++ b/web/app/components/workflow/candidate-node.tsx
@@ -4,7 +4,6 @@ import {
 import { produce } from 'immer'
 import {
   useReactFlow,
-  useStoreApi,
   useViewport,
 } from 'reactflow'
 import { useEventListener } from 'ahooks'
@@ -19,9 +18,9 @@ import CustomNode from './nodes'
 import CustomNoteNode from './note-node'
 import { CUSTOM_NOTE_NODE } from './note-node/constants'
 import { BlockEnum } from './types'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 const CandidateNode = () => {
-  const store = useStoreApi()
   const reactflow = useReactFlow()
   const workflowStore = useWorkflowStore()
   const candidateNode = useStore(s => s.candidateNode)
@@ -31,18 +30,15 @@ const CandidateNode = () => {
   const { saveStateToHistory } = useWorkflowHistory()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const autoGenerateWebhookUrl = useAutoGenerateWebhookUrl()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   useEventListener('click', (e) => {
     const { candidateNode, mousePosition } = workflowStore.getState()
 
     if (candidateNode) {
       e.preventDefault()
-      const {
-        getNodes,
-        setNodes,
-      } = store.getState()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
       const { screenToFlowPosition } = reactflow
-      const nodes = getNodes()
       const { x, y } = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY })
       const newNodes = produce(nodes, (draft) => {
         draft.push({
diff --git a/web/app/components/workflow/collaboration/components/user-cursors.tsx b/web/app/components/workflow/collaboration/components/user-cursors.tsx
new file mode 100644
index 0000000000..fff4d5bb8c
--- /dev/null
+++ b/web/app/components/workflow/collaboration/components/user-cursors.tsx
@@ -0,0 +1,78 @@
+import type { FC } from 'react'
+import { useViewport } from 'reactflow'
+import type { CursorPosition, OnlineUser } from '@/app/components/workflow/collaboration/types'
+import { getUserColor } from '../utils/user-color'
+
+type UserCursorsProps = {
+  cursors: Record<string, CursorPosition>
+  myUserId: string | null
+  onlineUsers: OnlineUser[]
+}
+
+const UserCursors: FC<UserCursorsProps> = ({
+  cursors,
+  myUserId,
+  onlineUsers,
+}) => {
+  const viewport = useViewport()
+
+  const convertToScreenCoordinates = (cursor: CursorPosition) => {
+    // Convert world coordinates to screen coordinates using current viewport
+    const screenX = cursor.x * viewport.zoom + viewport.x
+    const screenY = cursor.y * viewport.zoom + viewport.y
+
+    return { x: screenX, y: screenY }
+  }
+  return (
+    <>
+      {Object.entries(cursors || {}).map(([userId, cursor]) => {
+        if (userId === myUserId)
+          return null
+
+        const userInfo = onlineUsers.find(user => user.user_id === userId)
+        const userName = userInfo?.username || `User ${userId.slice(-4)}`
+        const userColor = getUserColor(userId)
+        const screenPos = convertToScreenCoordinates(cursor)
+
+        return (
+          <div
+            key={userId}
+            className="pointer-events-none absolute z-[8] transition-all duration-150 ease-out"
+            style={{
+              left: screenPos.x,
+              top: screenPos.y,
+            }}
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="drop-shadow-md"
+            >
+              <path
+                d="M5 3L5 15L8 11.5L11 16L13 15L10 10.5L14 10.5L5 3Z"
+                fill={userColor}
+                stroke="white"
+                strokeWidth="1.5"
+                strokeLinejoin="round"
+              />
+            </svg>
+
+            <div
+              className="absolute left-4 top-4 max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap rounded px-1.5 py-0.5 text-[11px] font-medium text-white shadow-sm"
+              style={{
+                backgroundColor: userColor,
+              }}
+            >
+              {userName}
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default UserCursors
diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.merge-behavior.test.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.merge-behavior.test.ts
new file mode 100644
index 0000000000..7893ed74a4
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.merge-behavior.test.ts
@@ -0,0 +1,239 @@
+import { LoroDoc } from 'loro-crdt'
+import { CollaborationManager } from '../collaboration-manager'
+import type { Node } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+const NODE_ID = 'node-1'
+const LLM_NODE_ID = 'llm-node'
+const PARAM_NODE_ID = 'parameter-node'
+
+const createNode = (variables: string[]): Node => ({
+  id: NODE_ID,
+  type: 'custom',
+  position: { x: 0, y: 0 },
+  data: {
+    type: BlockEnum.Start,
+    title: 'Start',
+    desc: '',
+    variables: variables.map(name => ({
+      variable: name,
+      label: name,
+      type: 'text-input',
+      required: true,
+      default: '',
+      max_length: 48,
+      placeholder: '',
+      options: [],
+      hint: '',
+    })),
+  },
+})
+
+const createLLMNode = (templates: Array<{ id: string; role: string; text: string }>): Node => ({
+  id: LLM_NODE_ID,
+  type: 'custom',
+  position: { x: 200, y: 200 },
+  data: {
+    type: BlockEnum.LLM,
+    title: 'LLM',
+    selected: false,
+    model: {
+      mode: 'chat',
+      name: 'gemini-2.5-pro',
+      provider: 'langgenius/gemini/google',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    context: {
+      enabled: false,
+      variable_selector: [],
+    },
+    vision: {
+      enabled: false,
+    },
+    prompt_template: templates,
+  },
+})
+
+const createParameterExtractorNode = (parameters: Array<{ description: string; name: string; required: boolean; type: string }>): Node => ({
+  id: PARAM_NODE_ID,
+  type: 'custom',
+  position: { x: 400, y: 120 },
+  data: {
+    type: BlockEnum.ParameterExtractor,
+    title: 'ParameterExtractor',
+    selected: true,
+    model: {
+      mode: 'chat',
+      name: '',
+      provider: '',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    query: [],
+    reasoning_mode: 'prompt',
+    parameters,
+    vision: {
+      enabled: false,
+    },
+  },
+})
+
+const getManager = (doc: LoroDoc) => {
+  const manager = new CollaborationManager()
+  ;(manager as any).doc = doc
+  ;(manager as any).nodesMap = doc.getMap('nodes')
+  ;(manager as any).edgesMap = doc.getMap('edges')
+  return manager
+}
+
+const deepClone = <T>(value: T): T => JSON.parse(JSON.stringify(value))
+
+const exportNodes = (manager: CollaborationManager) => manager.getNodes()
+
+describe('Loro merge behavior smoke test', () => {
+  it('inspects concurrent edits after merge', () => {
+    const docA = new LoroDoc()
+    const managerA = getManager(docA)
+    managerA.syncNodes([], [createNode(['a'])])
+
+    const snapshot = docA.export({ mode: 'snapshot' })
+
+    const docB = LoroDoc.fromSnapshot(snapshot)
+    const managerB = getManager(docB)
+
+    managerA.syncNodes([createNode(['a'])], [createNode(['a', 'b'])])
+    managerB.syncNodes([createNode(['a'])], [createNode(['a', 'c'])])
+
+    const updateForA = docB.export({ mode: 'update', from: docA.version() })
+    docA.import(updateForA)
+
+    const updateForB = docA.export({ mode: 'update', from: docB.version() })
+    docB.import(updateForB)
+
+    const finalA = exportNodes(managerA)
+    const finalB = exportNodes(managerB)
+
+    console.log('Final nodes on docA:', JSON.stringify(finalA, null, 2))
+
+    console.log('Final nodes on docB:', JSON.stringify(finalB, null, 2))
+    expect(finalA.length).toBe(1)
+    expect(finalB.length).toBe(1)
+  })
+
+  it('merges prompt template insertions and edits across replicas', () => {
+    const baseTemplate = [
+      {
+        id: 'system-1',
+        role: 'system',
+        text: 'base instruction',
+      },
+    ]
+
+    const docA = new LoroDoc()
+    const managerA = getManager(docA)
+    managerA.syncNodes([], [createLLMNode(deepClone(baseTemplate))])
+
+    const snapshot = docA.export({ mode: 'snapshot' })
+    const docB = LoroDoc.fromSnapshot(snapshot)
+    const managerB = getManager(docB)
+
+    const additionTemplate = [
+      ...baseTemplate,
+      {
+        id: 'user-1',
+        role: 'user',
+        text: 'hello from docA',
+      },
+    ]
+    managerA.syncNodes([createLLMNode(deepClone(baseTemplate))], [createLLMNode(deepClone(additionTemplate))])
+
+    const editedTemplate = [
+      {
+        id: 'system-1',
+        role: 'system',
+        text: 'updated by docB',
+      },
+    ]
+    managerB.syncNodes([createLLMNode(deepClone(baseTemplate))], [createLLMNode(deepClone(editedTemplate))])
+
+    const updateForA = docB.export({ mode: 'update', from: docA.version() })
+    docA.import(updateForA)
+
+    const updateForB = docA.export({ mode: 'update', from: docB.version() })
+    docB.import(updateForB)
+
+    const finalA = exportNodes(managerA).find(node => node.id === LLM_NODE_ID)
+    const finalB = exportNodes(managerB).find(node => node.id === LLM_NODE_ID)
+
+    expect(finalA).toBeDefined()
+    expect(finalB).toBeDefined()
+
+    const expectedTemplates = [
+      {
+        id: 'system-1',
+        role: 'system',
+        text: 'updated by docB',
+      },
+      {
+        id: 'user-1',
+        role: 'user',
+        text: 'hello from docA',
+      },
+    ]
+
+    expect((finalA!.data as any).prompt_template).toEqual(expectedTemplates)
+    expect((finalB!.data as any).prompt_template).toEqual(expectedTemplates)
+  })
+
+  it('converges when parameter lists are edited concurrently', () => {
+    const baseParameters = [
+      { description: 'bb', name: 'aa', required: false, type: 'string' },
+      { description: 'dd', name: 'cc', required: false, type: 'string' },
+    ]
+
+    const docA = new LoroDoc()
+    const managerA = getManager(docA)
+    managerA.syncNodes([], [createParameterExtractorNode(deepClone(baseParameters))])
+
+    const snapshot = docA.export({ mode: 'snapshot' })
+    const docB = LoroDoc.fromSnapshot(snapshot)
+    const managerB = getManager(docB)
+
+    const docAUpdate = [
+      { description: 'bb updated by A', name: 'aa', required: true, type: 'string' },
+      { description: 'dd', name: 'cc', required: false, type: 'string' },
+      { description: 'new from A', name: 'ee', required: false, type: 'number' },
+    ]
+    managerA.syncNodes([createParameterExtractorNode(deepClone(baseParameters))], [createParameterExtractorNode(deepClone(docAUpdate))])
+
+    const docBUpdate = [
+      { description: 'bb', name: 'aa', required: false, type: 'string' },
+      { description: 'dd updated by B', name: 'cc', required: true, type: 'string' },
+    ]
+    managerB.syncNodes([createParameterExtractorNode(deepClone(baseParameters))], [createParameterExtractorNode(deepClone(docBUpdate))])
+
+    const updateForA = docB.export({ mode: 'update', from: docA.version() })
+    docA.import(updateForA)
+
+    const updateForB = docA.export({ mode: 'update', from: docB.version() })
+    docB.import(updateForB)
+
+    const finalA = exportNodes(managerA).find(node => node.id === PARAM_NODE_ID)
+    const finalB = exportNodes(managerB).find(node => node.id === PARAM_NODE_ID)
+
+    expect(finalA).toBeDefined()
+    expect(finalB).toBeDefined()
+
+    const expectedParameters = [
+      { description: 'bb updated by A', name: 'aa', required: true, type: 'string' },
+      { description: 'dd updated by B', name: 'cc', required: true, type: 'string' },
+      { description: 'new from A', name: 'ee', required: false, type: 'number' },
+    ]
+
+    expect((finalA!.data as any).parameters).toEqual(expectedParameters)
+    expect((finalB!.data as any).parameters).toEqual(expectedParameters)
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.test.ts b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.test.ts
new file mode 100644
index 0000000000..e15e7e17e3
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/collaboration-manager.test.ts
@@ -0,0 +1,659 @@
+import { LoroDoc } from 'loro-crdt'
+import { CollaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import type { NodePanelPresenceMap, NodePanelPresenceUser } from '@/app/components/workflow/collaboration/types/collaboration'
+
+const NODE_ID = '1760342909316'
+
+type WorkflowVariable = {
+  default: string
+  hint: string
+  label: string
+  max_length: number
+  options: string[]
+  placeholder: string
+  required: boolean
+  type: string
+  variable: string
+}
+
+type PromptTemplateItem = {
+  id: string
+  role: string
+  text: string
+}
+
+type ParameterItem = {
+  description: string
+  name: string
+  required: boolean
+  type: string
+}
+
+const createVariable = (name: string, overrides: Partial<WorkflowVariable> = {}): WorkflowVariable => ({
+  default: '',
+  hint: '',
+  label: name,
+  max_length: 48,
+  options: [],
+  placeholder: '',
+  required: true,
+  type: 'text-input',
+  variable: name,
+  ...overrides,
+})
+
+const deepClone = <T>(value: T): T => JSON.parse(JSON.stringify(value))
+
+const createNodeSnapshot = (variableNames: string[]): Node<{ variables: WorkflowVariable[] }> => ({
+  id: NODE_ID,
+  type: 'custom',
+  position: { x: 0, y: 24 },
+  positionAbsolute: { x: 0, y: 24 },
+  height: 88,
+  width: 242,
+  selected: true,
+  selectable: true,
+  draggable: true,
+  sourcePosition: 'right',
+  targetPosition: 'left',
+  data: {
+    selected: true,
+    title: '开始',
+    desc: '',
+    type: BlockEnum.Start,
+    variables: variableNames.map(createVariable),
+  },
+})
+
+const LLM_NODE_ID = 'llm-node'
+const PARAM_NODE_ID = 'param-extractor-node'
+
+const createLLMNodeSnapshot = (promptTemplates: PromptTemplateItem[]): Node<any> => ({
+  id: LLM_NODE_ID,
+  type: 'custom',
+  position: { x: 200, y: 120 },
+  positionAbsolute: { x: 200, y: 120 },
+  height: 320,
+  width: 460,
+  selected: false,
+  selectable: true,
+  draggable: true,
+  sourcePosition: 'right',
+  targetPosition: 'left',
+  data: {
+    type: 'llm',
+    title: 'LLM',
+    selected: false,
+    context: {
+      enabled: false,
+      variable_selector: [],
+    },
+    model: {
+      mode: 'chat',
+      name: 'gemini-2.5-pro',
+      provider: 'langgenius/gemini/google',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    vision: {
+      enabled: false,
+    },
+    prompt_template: promptTemplates,
+  },
+})
+
+const createParameterExtractorNodeSnapshot = (parameters: ParameterItem[]): Node<any> => ({
+  id: PARAM_NODE_ID,
+  type: 'custom',
+  position: { x: 420, y: 220 },
+  positionAbsolute: { x: 420, y: 220 },
+  height: 260,
+  width: 420,
+  selected: true,
+  selectable: true,
+  draggable: true,
+  sourcePosition: 'right',
+  targetPosition: 'left',
+  data: {
+    type: 'parameter-extractor',
+    title: '参数提取器',
+    selected: true,
+    model: {
+      mode: 'chat',
+      name: '',
+      provider: '',
+      completion_params: {
+        temperature: 0.7,
+      },
+    },
+    reasoning_mode: 'prompt',
+    parameters,
+    query: [],
+    vision: {
+      enabled: false,
+    },
+  },
+})
+
+const getVariables = (node: Node): string[] => {
+  const variables = (node.data as any)?.variables ?? []
+  return variables.map((item: WorkflowVariable) => item.variable)
+}
+
+const getVariableObject = (node: Node, name: string): WorkflowVariable | undefined => {
+  const variables = (node.data as any)?.variables ?? []
+  return variables.find((item: WorkflowVariable) => item.variable === name)
+}
+
+const getPromptTemplates = (node: Node): PromptTemplateItem[] => {
+  return ((node.data as any)?.prompt_template ?? []) as PromptTemplateItem[]
+}
+
+const getParameters = (node: Node): ParameterItem[] => {
+  return ((node.data as any)?.parameters ?? []) as ParameterItem[]
+}
+
+describe('CollaborationManager syncNodes', () => {
+  let manager: CollaborationManager
+
+  beforeEach(() => {
+    manager = new CollaborationManager()
+    // Bypass private guards for targeted unit testing
+    const doc = new LoroDoc()
+    ;(manager as any).doc = doc
+    ;(manager as any).nodesMap = doc.getMap('nodes')
+    ;(manager as any).edgesMap = doc.getMap('edges')
+
+    const initialNode = createNodeSnapshot(['a'])
+    ;(manager as any).syncNodes([], [deepClone(initialNode)])
+  })
+
+  it('updates collaborators map when a single client adds a variable', () => {
+    const base = [createNodeSnapshot(['a'])]
+    const next = [createNodeSnapshot(['a', 'b'])]
+
+    ;(manager as any).syncNodes(base, next)
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    expect(stored).toBeDefined()
+    expect(getVariables(stored!)).toEqual(['a', 'b'])
+  })
+
+  it('applies the latest parallel additions derived from the same base snapshot', () => {
+    const base = [createNodeSnapshot(['a'])]
+    const userA = [createNodeSnapshot(['a', 'b'])]
+    const userB = [createNodeSnapshot(['a', 'c'])]
+
+    ;(manager as any).syncNodes(base, userA)
+
+    const afterUserA = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    expect(getVariables(afterUserA!)).toEqual(['a', 'b'])
+
+    ;(manager as any).syncNodes(base, userB)
+
+    const finalNode = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    const finalVariables = getVariables(finalNode!)
+
+    expect(finalVariables).toEqual(['a', 'c'])
+  })
+
+  it('prefers the incoming mutation when the same variable is edited concurrently', () => {
+    const base = [createNodeSnapshot(['a'])]
+    const userA = [
+      {
+        ...createNodeSnapshot(['a']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a', { label: 'A from userA', hint: 'hintA' }),
+          ],
+        },
+      },
+    ]
+    const userB = [
+      {
+        ...createNodeSnapshot(['a']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a', { label: 'A from userB', hint: 'hintB' }),
+          ],
+        },
+      },
+    ]
+
+    ;(manager as any).syncNodes(base, userA)
+    ;(manager as any).syncNodes(base, userB)
+
+    const finalNode = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    const finalVariable = getVariableObject(finalNode!, 'a')
+
+    expect(finalVariable?.label).toBe('A from userB')
+    expect(finalVariable?.hint).toBe('hintB')
+  })
+
+  it('reflects the last writer when concurrent removal and edits happen', () => {
+    const base = [createNodeSnapshot(['a', 'b'])]
+    ;(manager as any).syncNodes([], [deepClone(base[0])])
+    const userA = [
+      {
+        ...createNodeSnapshot(['a']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a', { label: 'A after deletion' }),
+          ],
+        },
+      },
+    ]
+    const userB = [
+      {
+        ...createNodeSnapshot(['a', 'b']),
+        data: {
+          ...createNodeSnapshot(['a']).data,
+          variables: [
+            createVariable('a'),
+            createVariable('b', { label: 'B edited but should vanish' }),
+          ],
+        },
+      },
+    ]
+
+    ;(manager as any).syncNodes(base, userA)
+    ;(manager as any).syncNodes(base, userB)
+
+    const finalNode = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)
+    const finalVariables = getVariables(finalNode!)
+    expect(finalVariables).toEqual(['a', 'b'])
+    expect(getVariableObject(finalNode!, 'b')).toBeDefined()
+  })
+
+  it('synchronizes prompt_template list updates across collaborators', () => {
+    const promptManager = new CollaborationManager()
+    const doc = new LoroDoc()
+    ;(promptManager as any).doc = doc
+    ;(promptManager as any).nodesMap = doc.getMap('nodes')
+    ;(promptManager as any).edgesMap = doc.getMap('edges')
+
+    const baseTemplate = [
+      {
+        id: 'abcfa5f9-3c44-4252-aeba-4b6eaf0acfc4',
+        role: 'system',
+        text: 'avc',
+      },
+    ]
+
+    const baseNode = createLLMNodeSnapshot(baseTemplate)
+    ;(promptManager as any).syncNodes([], [deepClone(baseNode)])
+
+    const updatedTemplates = [
+      ...baseTemplate,
+      {
+        id: 'user-1',
+        role: 'user',
+        text: 'hello world',
+      },
+    ]
+
+    const updatedNode = createLLMNodeSnapshot(updatedTemplates)
+    ;(promptManager as any).syncNodes([deepClone(baseNode)], [deepClone(updatedNode)])
+
+    const stored = (promptManager.getNodes() as Node[]).find(node => node.id === LLM_NODE_ID)
+    expect(stored).toBeDefined()
+
+    const storedTemplates = getPromptTemplates(stored!)
+    expect(storedTemplates).toHaveLength(2)
+    expect(storedTemplates[0]).toEqual(baseTemplate[0])
+    expect(storedTemplates[1]).toEqual(updatedTemplates[1])
+
+    const editedTemplates = [
+      {
+        id: 'abcfa5f9-3c44-4252-aeba-4b6eaf0acfc4',
+        role: 'system',
+        text: 'updated system prompt',
+      },
+    ]
+    const editedNode = createLLMNodeSnapshot(editedTemplates)
+
+    ;(promptManager as any).syncNodes([deepClone(updatedNode)], [deepClone(editedNode)])
+
+    const final = (promptManager.getNodes() as Node[]).find(node => node.id === LLM_NODE_ID)
+    const finalTemplates = getPromptTemplates(final!)
+    expect(finalTemplates).toHaveLength(1)
+    expect(finalTemplates[0].text).toBe('updated system prompt')
+  })
+
+  it('keeps parameter list in sync when nodes add, edit, or remove parameters', () => {
+    const parameterManager = new CollaborationManager()
+    const doc = new LoroDoc()
+    ;(parameterManager as any).doc = doc
+    ;(parameterManager as any).nodesMap = doc.getMap('nodes')
+    ;(parameterManager as any).edgesMap = doc.getMap('edges')
+
+    const baseParameters: ParameterItem[] = [
+      { description: 'bb', name: 'aa', required: false, type: 'string' },
+      { description: 'dd', name: 'cc', required: false, type: 'string' },
+    ]
+
+    const baseNode = createParameterExtractorNodeSnapshot(baseParameters)
+    ;(parameterManager as any).syncNodes([], [deepClone(baseNode)])
+
+    const updatedParameters: ParameterItem[] = [
+      ...baseParameters,
+      { description: 'ff', name: 'ee', required: true, type: 'number' },
+    ]
+
+    const updatedNode = createParameterExtractorNodeSnapshot(updatedParameters)
+    ;(parameterManager as any).syncNodes([deepClone(baseNode)], [deepClone(updatedNode)])
+
+    const stored = (parameterManager.getNodes() as Node[]).find(node => node.id === PARAM_NODE_ID)
+    expect(stored).toBeDefined()
+    expect(getParameters(stored!)).toEqual(updatedParameters)
+
+    const editedParameters: ParameterItem[] = [
+      { description: 'bb edited', name: 'aa', required: true, type: 'string' },
+    ]
+    const editedNode = createParameterExtractorNodeSnapshot(editedParameters)
+
+    ;(parameterManager as any).syncNodes([deepClone(updatedNode)], [deepClone(editedNode)])
+
+    const final = (parameterManager.getNodes() as Node[]).find(node => node.id === PARAM_NODE_ID)
+    expect(getParameters(final!)).toEqual(editedParameters)
+  })
+
+  it('handles nodes without data gracefully', () => {
+    const emptyNode: Node = {
+      id: 'empty-node',
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: undefined as any,
+    }
+
+    ;(manager as any).syncNodes([], [deepClone(emptyNode)])
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === 'empty-node')
+    expect(stored).toBeDefined()
+    expect(stored?.data).toEqual({})
+  })
+
+  it('preserves CRDT list instances when synchronizing parsed state back into the manager', () => {
+    const promptManager = new CollaborationManager()
+    const doc = new LoroDoc()
+    ;(promptManager as any).doc = doc
+    ;(promptManager as any).nodesMap = doc.getMap('nodes')
+    ;(promptManager as any).edgesMap = doc.getMap('edges')
+
+    const base = createLLMNodeSnapshot([
+      { id: 'system', role: 'system', text: 'base' },
+    ])
+    ;(promptManager as any).syncNodes([], [deepClone(base)])
+
+    const storedBefore = promptManager.getNodes().find(node => node.id === LLM_NODE_ID)
+    const firstTemplate = (storedBefore?.data as any).prompt_template?.[0]
+    expect(firstTemplate?.text).toBe('base')
+
+    // simulate consumer mutating the plain JSON array and syncing back
+    const mutatedNode = deepClone(storedBefore!)
+    mutatedNode.data.prompt_template.push({
+      id: 'user',
+      role: 'user',
+      text: 'mutated',
+    })
+
+    ;(promptManager as any).syncNodes([storedBefore], [mutatedNode])
+
+    const storedAfter = promptManager.getNodes().find(node => node.id === LLM_NODE_ID)
+    const templatesAfter = (storedAfter?.data as any).prompt_template
+    expect(Array.isArray(templatesAfter)).toBe(true)
+    expect(templatesAfter).toHaveLength(2)
+  })
+
+  it('reuses CRDT list when syncing parameters repeatedly', () => {
+    const parameterManager = new CollaborationManager()
+    const doc = new LoroDoc()
+    ;(parameterManager as any).doc = doc
+    ;(parameterManager as any).nodesMap = doc.getMap('nodes')
+    ;(parameterManager as any).edgesMap = doc.getMap('edges')
+
+    const initialParameters: ParameterItem[] = [
+      { description: 'desc', name: 'param', required: false, type: 'string' },
+    ]
+    const node = createParameterExtractorNodeSnapshot(initialParameters)
+    ;(parameterManager as any).syncNodes([], [deepClone(node)])
+
+    const stored = parameterManager.getNodes().find(n => n.id === PARAM_NODE_ID)!
+    const mutatedNode = deepClone(stored)
+    mutatedNode.data.parameters[0].description = 'updated'
+
+    ;(parameterManager as any).syncNodes([stored], [mutatedNode])
+
+    const storedAfter = parameterManager.getNodes().find(n => n.id === PARAM_NODE_ID)!
+    const params = (storedAfter.data as any).parameters
+    expect(params).toHaveLength(1)
+    expect(params[0].description).toBe('updated')
+  })
+
+  it('filters out transient/private data keys while keeping allowlisted ones', () => {
+    const nodeWithPrivate: Node = {
+      id: 'private-node',
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: {
+        type: BlockEnum.Start,
+        _foo: 'should disappear',
+        _children: ['child-a'],
+        selected: true,
+        variables: [],
+      },
+    }
+
+    ;(manager as any).syncNodes([], [deepClone(nodeWithPrivate)])
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === 'private-node')!
+    expect((stored.data as any)._foo).toBeUndefined()
+    expect((stored.data as any)._children).toEqual(['child-a'])
+    expect((stored.data as any).selected).toBeUndefined()
+  })
+
+  it('removes list fields when they are omitted in the update snapshot', () => {
+    const baseNode = createNodeSnapshot(['alpha'])
+    ;(manager as any).syncNodes([], [deepClone(baseNode)])
+
+    const withoutVariables: Node = {
+      ...deepClone(baseNode),
+      data: {
+        ...deepClone(baseNode).data,
+      },
+    }
+    delete (withoutVariables.data as any).variables
+
+    ;(manager as any).syncNodes([deepClone(baseNode)], [withoutVariables])
+
+    const stored = (manager.getNodes() as Node[]).find(node => node.id === NODE_ID)!
+    expect((stored.data as any).variables).toBeUndefined()
+  })
+
+  it('treats non-array list inputs as empty lists during synchronization', () => {
+    const promptManager = new CollaborationManager()
+    const doc = new LoroDoc()
+    ;(promptManager as any).doc = doc
+    ;(promptManager as any).nodesMap = doc.getMap('nodes')
+    ;(promptManager as any).edgesMap = doc.getMap('edges')
+
+    const nodeWithInvalidTemplate = createLLMNodeSnapshot([] as any)
+    ;(promptManager as any).syncNodes([], [deepClone(nodeWithInvalidTemplate)])
+
+    const mutated = deepClone(nodeWithInvalidTemplate)
+    ;(mutated.data as any).prompt_template = 'not-an-array'
+
+    ;(promptManager as any).syncNodes([deepClone(nodeWithInvalidTemplate)], [mutated])
+
+    const stored = promptManager.getNodes().find(node => node.id === LLM_NODE_ID)!
+    expect(Array.isArray((stored.data as any).prompt_template)).toBe(true)
+    expect((stored.data as any).prompt_template).toHaveLength(0)
+  })
+
+  it('updates edges map when edges are added, modified, and removed', () => {
+    const edgeManager = new CollaborationManager()
+    const doc = new LoroDoc()
+    ;(edgeManager as any).doc = doc
+    ;(edgeManager as any).nodesMap = doc.getMap('nodes')
+    ;(edgeManager as any).edgesMap = doc.getMap('edges')
+
+    const edge: Edge = {
+      id: 'edge-1',
+      source: 'node-a',
+      target: 'node-b',
+      type: 'default',
+      data: { label: 'initial' },
+    } as Edge
+
+    ;(edgeManager as any).setEdges([], [edge])
+    expect(edgeManager.getEdges()).toHaveLength(1)
+    expect((edgeManager.getEdges()[0].data as any).label).toBe('initial')
+
+    const updatedEdge: Edge = {
+      ...edge,
+      data: { label: 'updated' },
+    }
+    ;(edgeManager as any).setEdges([edge], [updatedEdge])
+    expect(edgeManager.getEdges()).toHaveLength(1)
+    expect((edgeManager.getEdges()[0].data as any).label).toBe('updated')
+
+    ;(edgeManager as any).setEdges([updatedEdge], [])
+    expect(edgeManager.getEdges()).toHaveLength(0)
+  })
+})
+
+describe('CollaborationManager public API wrappers', () => {
+  let manager: CollaborationManager
+  const baseNodes: Node[] = []
+  const updatedNodes: Node[] = [
+    { id: 'new-node', type: 'custom', position: { x: 0, y: 0 }, data: {} } as Node,
+  ]
+  const baseEdges: Edge[] = []
+  const updatedEdges: Edge[] = [
+    { id: 'edge-1', source: 'source', target: 'target', type: 'default', data: {} } as Edge,
+  ]
+
+  beforeEach(() => {
+    manager = new CollaborationManager()
+  })
+
+  it('setNodes delegates to syncNodes and commits the CRDT document', () => {
+    const commit = jest.fn()
+    ;(manager as any).doc = { commit }
+    const syncSpy = jest.spyOn(manager as any, 'syncNodes').mockImplementation(() => undefined)
+
+    manager.setNodes(baseNodes, updatedNodes)
+
+    expect(syncSpy).toHaveBeenCalledWith(baseNodes, updatedNodes)
+    expect(commit).toHaveBeenCalled()
+    syncSpy.mockRestore()
+  })
+
+  it('setNodes skips syncing when undo/redo replay is running', () => {
+    const commit = jest.fn()
+    ;(manager as any).doc = { commit }
+    ;(manager as any).isUndoRedoInProgress = true
+    const syncSpy = jest.spyOn(manager as any, 'syncNodes').mockImplementation(() => undefined)
+
+    manager.setNodes(baseNodes, updatedNodes)
+
+    expect(syncSpy).not.toHaveBeenCalled()
+    expect(commit).not.toHaveBeenCalled()
+    syncSpy.mockRestore()
+  })
+
+  it('setEdges delegates to syncEdges and commits the CRDT document', () => {
+    const commit = jest.fn()
+    ;(manager as any).doc = { commit }
+    const syncSpy = jest.spyOn(manager as any, 'syncEdges').mockImplementation(() => undefined)
+
+    manager.setEdges(baseEdges, updatedEdges)
+
+    expect(syncSpy).toHaveBeenCalledWith(baseEdges, updatedEdges)
+    expect(commit).toHaveBeenCalled()
+    syncSpy.mockRestore()
+  })
+
+  it('disconnect tears down the collaboration state only when last connection closes', () => {
+    const forceSpy = jest.spyOn(manager as any, 'forceDisconnect').mockImplementation(() => undefined)
+    ;(manager as any).activeConnections.add('conn-a')
+    ;(manager as any).activeConnections.add('conn-b')
+
+    manager.disconnect('conn-a')
+    expect(forceSpy).not.toHaveBeenCalled()
+
+    manager.disconnect('conn-b')
+    expect(forceSpy).toHaveBeenCalledTimes(1)
+    forceSpy.mockRestore()
+  })
+
+  it('applyNodePanelPresenceUpdate keeps a client visible on a single node at a time', () => {
+    const updates: NodePanelPresenceMap[] = []
+    manager.onNodePanelPresenceUpdate((presence) => {
+      updates.push(presence)
+    })
+
+    const user: NodePanelPresenceUser = { userId: 'user-1', username: 'Dana' }
+
+    ;(manager as any).applyNodePanelPresenceUpdate({
+      nodeId: 'node-a',
+      action: 'open',
+      user,
+      clientId: 'client-1',
+      timestamp: 100,
+    })
+
+    ;(manager as any).applyNodePanelPresenceUpdate({
+      nodeId: 'node-b',
+      action: 'open',
+      user,
+      clientId: 'client-1',
+      timestamp: 200,
+    })
+
+    const finalSnapshot = updates[updates.length - 1]!
+    expect(finalSnapshot).toEqual({
+      'node-b': {
+        'client-1': {
+          userId: 'user-1',
+          username: 'Dana',
+          clientId: 'client-1',
+          timestamp: 200,
+        },
+      },
+    })
+  })
+
+  it('applyNodePanelPresenceUpdate clears node entries when last viewer closes the panel', () => {
+    const updates: NodePanelPresenceMap[] = []
+    manager.onNodePanelPresenceUpdate((presence) => {
+      updates.push(presence)
+    })
+
+    const user: NodePanelPresenceUser = { userId: 'user-2', username: 'Kai' }
+
+    ;(manager as any).applyNodePanelPresenceUpdate({
+      nodeId: 'node-a',
+      action: 'open',
+      user,
+      clientId: 'client-9',
+      timestamp: 300,
+    })
+
+    ;(manager as any).applyNodePanelPresenceUpdate({
+      nodeId: 'node-a',
+      action: 'close',
+      user,
+      clientId: 'client-9',
+      timestamp: 301,
+    })
+
+    expect(updates[updates.length - 1]).toEqual({})
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/crdt-provider.test.ts b/web/app/components/workflow/collaboration/core/__tests__/crdt-provider.test.ts
new file mode 100644
index 0000000000..b5fc3ca69e
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/crdt-provider.test.ts
@@ -0,0 +1,121 @@
+import type { Socket } from 'socket.io-client'
+import { CRDTProvider } from '../crdt-provider'
+
+type FakeDoc = {
+  export: jest.Mock<Uint8Array, [options?: { mode?: string }]>
+  import: jest.Mock<void, [Uint8Array]>
+  subscribe: jest.Mock<void, [(payload: any) => void]>
+  trigger: (event: any) => void
+}
+
+const createFakeDoc = (): FakeDoc => {
+  let handler: ((payload: any) => void) | null = null
+
+  return {
+    export: jest.fn(() => new Uint8Array([1, 2, 3])),
+    import: jest.fn(),
+    subscribe: jest.fn((cb: (payload: any) => void) => {
+      handler = cb
+    }),
+    trigger: (event: any) => {
+      handler?.(event)
+    },
+  }
+}
+
+const createMockSocket = () => {
+  const handlers = new Map<string, (...args: any[]) => void>()
+
+  const socket: any = {
+    emit: jest.fn(),
+    on: jest.fn((event: string, handler: (...args: any[]) => void) => {
+      handlers.set(event, handler)
+    }),
+    off: jest.fn((event: string) => {
+      handlers.delete(event)
+    }),
+    trigger: (event: string, ...args: any[]) => {
+      const handler = handlers.get(event)
+      if (handler)
+        handler(...args)
+    },
+  }
+
+  return socket as Socket & { trigger: (event: string, ...args: any[]) => void }
+}
+
+describe('CRDTProvider', () => {
+  it('emits graph_event when local changes happen', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket, doc as unknown as any)
+    expect(provider).toBeInstanceOf(CRDTProvider)
+
+    doc.trigger({ by: 'local' })
+
+    expect(socket.emit).toHaveBeenCalledWith(
+      'graph_event',
+      expect.any(Uint8Array),
+    )
+    expect(doc.export).toHaveBeenCalledWith({ mode: 'update' })
+  })
+
+  it('ignores non-local events', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket, doc as unknown as any)
+
+    doc.trigger({ by: 'remote' })
+
+    expect(socket.emit).not.toHaveBeenCalled()
+    provider.destroy()
+  })
+
+  it('imports remote updates on graph_update', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket, doc as unknown as any)
+
+    const payload = new Uint8Array([9, 9, 9])
+    socket.trigger('graph_update', payload)
+
+    expect(doc.import).toHaveBeenCalledWith(expect.any(Uint8Array))
+    expect(Array.from(doc.import.mock.calls[0][0])).toEqual([9, 9, 9])
+    provider.destroy()
+  })
+
+  it('removes graph_update listener on destroy', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+
+    const provider = new CRDTProvider(socket, doc as unknown as any)
+    provider.destroy()
+
+    expect(socket.off).toHaveBeenCalledWith('graph_update')
+  })
+
+  it('logs an error when graph_update import fails but continues operating', () => {
+    const doc = createFakeDoc()
+    const socket = createMockSocket()
+    doc.import.mockImplementation(() => {
+      throw new Error('boom')
+    })
+
+    const provider = new CRDTProvider(socket, doc as unknown as any)
+
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => undefined)
+
+    socket.trigger('graph_update', new Uint8Array([1]))
+    expect(errorSpy).toHaveBeenCalledWith('Error importing graph update:', expect.any(Error))
+
+    doc.import.mockReset()
+    socket.trigger('graph_update', new Uint8Array([2, 3]))
+    expect(doc.import).toHaveBeenCalled()
+
+    provider.destroy()
+    errorSpy.mockRestore()
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/event-emitter.test.ts b/web/app/components/workflow/collaboration/core/__tests__/event-emitter.test.ts
new file mode 100644
index 0000000000..b57350209e
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/event-emitter.test.ts
@@ -0,0 +1,93 @@
+import { EventEmitter } from '../event-emitter'
+
+describe('EventEmitter', () => {
+  it('registers and invokes handlers via on/emit', () => {
+    const emitter = new EventEmitter()
+    const handler = jest.fn()
+
+    emitter.on('test', handler)
+    emitter.emit('test', { value: 42 })
+
+    expect(handler).toHaveBeenCalledWith({ value: 42 })
+  })
+
+  it('removes specific handler with off', () => {
+    const emitter = new EventEmitter()
+    const handlerA = jest.fn()
+    const handlerB = jest.fn()
+
+    emitter.on('test', handlerA)
+    emitter.on('test', handlerB)
+
+    emitter.off('test', handlerA)
+    emitter.emit('test', 'payload')
+
+    expect(handlerA).not.toHaveBeenCalled()
+    expect(handlerB).toHaveBeenCalledWith('payload')
+  })
+
+  it('clears all listeners when off is called without handler', () => {
+    const emitter = new EventEmitter()
+    const handlerA = jest.fn()
+    const handlerB = jest.fn()
+
+    emitter.on('trigger', handlerA)
+    emitter.on('trigger', handlerB)
+
+    emitter.off('trigger')
+    emitter.emit('trigger', 'payload')
+
+    expect(handlerA).not.toHaveBeenCalled()
+    expect(handlerB).not.toHaveBeenCalled()
+    expect(emitter.getListenerCount('trigger')).toBe(0)
+  })
+
+  it('removeAllListeners clears every registered event', () => {
+    const emitter = new EventEmitter()
+    emitter.on('one', jest.fn())
+    emitter.on('two', jest.fn())
+
+    emitter.removeAllListeners()
+
+    expect(emitter.getListenerCount('one')).toBe(0)
+    expect(emitter.getListenerCount('two')).toBe(0)
+  })
+
+  it('returns an unsubscribe function from on', () => {
+    const emitter = new EventEmitter()
+    const handler = jest.fn()
+
+    const unsubscribe = emitter.on('detach', handler)
+    unsubscribe()
+
+    emitter.emit('detach', 'value')
+
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('continues emitting when a handler throws', () => {
+    const emitter = new EventEmitter()
+    const errorHandler = jest
+      .spyOn(console, 'error')
+      .mockImplementation()
+
+    const failingHandler = jest.fn(() => {
+      throw new Error('boom')
+    })
+    const succeedingHandler = jest.fn()
+
+    emitter.on('safe', failingHandler)
+    emitter.on('safe', succeedingHandler)
+
+    emitter.emit('safe', 7)
+
+    expect(failingHandler).toHaveBeenCalledWith(7)
+    expect(succeedingHandler).toHaveBeenCalledWith(7)
+    expect(errorHandler).toHaveBeenCalledWith(
+      expect.stringContaining('Error in event handler for safe:'),
+      expect.any(Error),
+    )
+
+    errorHandler.mockRestore()
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/__tests__/websocket-manager.test.ts b/web/app/components/workflow/collaboration/core/__tests__/websocket-manager.test.ts
new file mode 100644
index 0000000000..c7b26d1bd3
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/__tests__/websocket-manager.test.ts
@@ -0,0 +1,165 @@
+import type { Socket } from 'socket.io-client'
+
+const ioMock = jest.fn()
+
+jest.mock('socket.io-client', () => ({
+  io: (...args: any[]) => ioMock(...args),
+}))
+
+const createMockSocket = (id: string): Socket & {
+  trigger: (event: string, ...args: any[]) => void
+} => {
+  const handlers = new Map<string, (...args: any[]) => void>()
+
+  const socket: any = {
+    id,
+    connected: true,
+    emit: jest.fn(),
+    disconnect: jest.fn(() => {
+      socket.connected = false
+    }),
+    on: jest.fn((event: string, handler: (...args: any[]) => void) => {
+      handlers.set(event, handler)
+    }),
+    trigger: (event: string, ...args: any[]) => {
+      const handler = handlers.get(event)
+      if (handler)
+        handler(...args)
+    },
+  }
+
+  return socket as Socket & { trigger: (event: string, ...args: any[]) => void }
+}
+
+describe('WebSocketClient', () => {
+  let originalWindow: typeof window | undefined
+
+  beforeEach(() => {
+    jest.resetModules()
+    ioMock.mockReset()
+    originalWindow = globalThis.window
+  })
+
+  afterEach(() => {
+    if (originalWindow)
+      globalThis.window = originalWindow
+    else
+      delete (globalThis as any).window
+  })
+
+  it('connects with fallback url and registers base listeners when window is undefined', async () => {
+    delete (globalThis as any).window
+
+    const mockSocket = createMockSocket('socket-fallback')
+    ioMock.mockImplementation(() => mockSocket)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    const socket = client.connect('app-1')
+
+    expect(ioMock).toHaveBeenCalledWith(
+      'ws://localhost:5001',
+      expect.objectContaining({
+        path: '/socket.io',
+        transports: ['websocket'],
+        withCredentials: true,
+      }),
+    )
+    expect(socket).toBe(mockSocket)
+    expect(mockSocket.on).toHaveBeenCalledWith('connect', expect.any(Function))
+    expect(mockSocket.on).toHaveBeenCalledWith('disconnect', expect.any(Function))
+    expect(mockSocket.on).toHaveBeenCalledWith('connect_error', expect.any(Function))
+  })
+
+  it('reuses existing connected socket and avoids duplicate connections', async () => {
+    const mockSocket = createMockSocket('socket-reuse')
+    ioMock.mockImplementation(() => mockSocket)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+
+    const first = client.connect('app-reuse')
+    const second = client.connect('app-reuse')
+
+    expect(ioMock).toHaveBeenCalledTimes(1)
+    expect(second).toBe(first)
+  })
+
+  it('attaches auth token from localStorage and emits user_connect on connect', async () => {
+    const mockSocket = createMockSocket('socket-auth')
+    ioMock.mockImplementation((url, options) => {
+      expect(options.auth).toEqual({ token: 'secret-token' })
+      return mockSocket
+    })
+
+    globalThis.window = {
+      location: { protocol: 'https:', host: 'example.com' },
+      localStorage: {
+        getItem: jest.fn(() => 'secret-token'),
+      },
+    } as unknown as typeof window
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-auth')
+
+    const connectHandler = mockSocket.on.mock.calls.find(call => call[0] === 'connect')?.[1] as () => void
+    expect(connectHandler).toBeDefined()
+    connectHandler()
+
+    expect(mockSocket.emit).toHaveBeenCalledWith('user_connect', { workflow_id: 'app-auth' })
+  })
+
+  it('disconnects a specific app and clears internal maps', async () => {
+    const mockSocket = createMockSocket('socket-disconnect-one')
+    ioMock.mockImplementation(() => mockSocket)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-disconnect')
+
+    expect(client.isConnected('app-disconnect')).toBe(true)
+    client.disconnect('app-disconnect')
+
+    expect(mockSocket.disconnect).toHaveBeenCalled()
+    expect(client.getSocket('app-disconnect')).toBeNull()
+    expect(client.isConnected('app-disconnect')).toBe(false)
+  })
+
+  it('disconnects all apps when no id is provided', async () => {
+    const socketA = createMockSocket('socket-a')
+    const socketB = createMockSocket('socket-b')
+    ioMock.mockImplementationOnce(() => socketA).mockImplementationOnce(() => socketB)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-a')
+    client.connect('app-b')
+
+    client.disconnect()
+
+    expect(socketA.disconnect).toHaveBeenCalled()
+    expect(socketB.disconnect).toHaveBeenCalled()
+    expect(client.getConnectedApps()).toEqual([])
+  })
+
+  it('reports connected apps, sockets, and debug info correctly', async () => {
+    const socketA = createMockSocket('socket-debug-a')
+    const socketB = createMockSocket('socket-debug-b')
+    socketB.connected = false
+    ioMock.mockImplementationOnce(() => socketA).mockImplementationOnce(() => socketB)
+
+    const { WebSocketClient } = await import('../websocket-manager')
+    const client = new WebSocketClient()
+    client.connect('app-a')
+    client.connect('app-b')
+
+    expect(client.getConnectedApps()).toEqual(['app-a'])
+
+    const debugInfo = client.getDebugInfo()
+    expect(debugInfo).toMatchObject({
+      'app-a': { connected: true, socketId: 'socket-debug-a' },
+      'app-b': { connected: false, socketId: 'socket-debug-b' },
+    })
+  })
+})
diff --git a/web/app/components/workflow/collaboration/core/collaboration-manager.ts b/web/app/components/workflow/collaboration/core/collaboration-manager.ts
new file mode 100644
index 0000000000..669601e819
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/collaboration-manager.ts
@@ -0,0 +1,1073 @@
+import { LoroDoc, LoroList, LoroMap, UndoManager } from 'loro-crdt'
+import { cloneDeep, isEqual } from 'lodash-es'
+import type { Socket } from 'socket.io-client'
+import { emitWithAuthGuard, webSocketClient } from './websocket-manager'
+import { CRDTProvider } from './crdt-provider'
+import { EventEmitter } from './event-emitter'
+import type {
+  CommonNodeType,
+  Edge,
+  Node,
+} from '../../types'
+import type {
+  CollaborationState,
+  CursorPosition,
+  NodePanelPresenceMap,
+  NodePanelPresenceUser,
+  OnlineUser,
+} from '../types/collaboration'
+
+type NodePanelPresenceEventData = {
+  nodeId: string
+  action: 'open' | 'close'
+  user: NodePanelPresenceUser
+  clientId: string
+  timestamp?: number
+}
+
+export class CollaborationManager {
+  private doc: LoroDoc | null = null
+  private undoManager: UndoManager | null = null
+  private provider: CRDTProvider | null = null
+  private nodesMap: any = null
+  private edgesMap: any = null
+  private eventEmitter = new EventEmitter()
+  private currentAppId: string | null = null
+  private reactFlowStore: any = null
+  private isLeader = false
+  private leaderId: string | null = null
+  private cursors: Record<string, CursorPosition> = {}
+  private nodePanelPresence: NodePanelPresenceMap = {}
+  private activeConnections = new Set<string>()
+  private isUndoRedoInProgress = false
+  private pendingInitialSync = false
+  private rejoinInProgress = false
+
+  private getActiveSocket(): Socket | null {
+    if (!this.currentAppId)
+      return null
+    return webSocketClient.getSocket(this.currentAppId)
+  }
+
+  private handleSessionUnauthorized = (): void => {
+    if (this.rejoinInProgress)
+      return
+    if (!this.currentAppId)
+      return
+
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    this.rejoinInProgress = true
+    console.warn('Collaboration session expired, attempting to rejoin workflow.')
+    emitWithAuthGuard(
+      socket,
+      'user_connect',
+      { workflow_id: this.currentAppId },
+      {
+        onAck: () => {
+          this.rejoinInProgress = false
+        },
+        onUnauthorized: () => {
+          this.rejoinInProgress = false
+          console.error('Rejoin failed due to authorization error, forcing disconnect.')
+          this.forceDisconnect()
+        },
+      },
+    )
+  }
+
+  private sendCollaborationEvent(payload: any): void {
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    emitWithAuthGuard(socket, 'collaboration_event', payload, { onUnauthorized: this.handleSessionUnauthorized })
+  }
+
+  private sendGraphEvent(payload: any): void {
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    emitWithAuthGuard(socket, 'graph_event', payload, { onUnauthorized: this.handleSessionUnauthorized })
+  }
+
+  private getNodeContainer(nodeId: string): LoroMap<any> {
+    if (!this.nodesMap)
+      throw new Error('Nodes map not initialized')
+
+    let container = this.nodesMap.get(nodeId) as any
+
+    if (!container || typeof container.kind !== 'function' || container.kind() !== 'Map') {
+      const previousValue = container
+      const newContainer = this.nodesMap.setContainer(nodeId, new LoroMap())
+      container = typeof newContainer.getAttached === 'function' ? newContainer.getAttached() ?? newContainer : newContainer
+      if (previousValue && typeof previousValue === 'object')
+        this.populateNodeContainer(container, previousValue as Node)
+    }
+    else {
+      container = typeof container.getAttached === 'function' ? container.getAttached() ?? container : container
+    }
+
+    return container
+  }
+
+  private ensureDataContainer(nodeContainer: LoroMap<any>): LoroMap<any> {
+    let dataContainer = nodeContainer.get('data') as any
+
+    if (!dataContainer || typeof dataContainer.kind !== 'function' || dataContainer.kind() !== 'Map')
+      dataContainer = nodeContainer.setContainer('data', new LoroMap())
+
+    return typeof dataContainer.getAttached === 'function' ? dataContainer.getAttached() ?? dataContainer : dataContainer
+  }
+
+  private ensureList(nodeContainer: LoroMap<any>, key: string): LoroList<any> {
+    const dataContainer = this.ensureDataContainer(nodeContainer)
+    let list = dataContainer.get(key) as any
+
+    if (!list || typeof list.kind !== 'function' || list.kind() !== 'List')
+      list = dataContainer.setContainer(key, new LoroList())
+
+    return typeof list.getAttached === 'function' ? list.getAttached() ?? list : list
+  }
+
+  private exportNode(nodeId: string): Node {
+    const container = this.getNodeContainer(nodeId)
+    const json = container.toJSON() as any
+    return {
+      ...json,
+      data: json.data || {},
+    }
+  }
+
+  private populateNodeContainer(container: LoroMap<any>, node: Node): void {
+    const listFields = new Set(['variables', 'prompt_template', 'parameters'])
+    container.set('id', node.id)
+    container.set('type', node.type)
+    container.set('position', cloneDeep(node.position))
+    container.set('sourcePosition', node.sourcePosition)
+    container.set('targetPosition', node.targetPosition)
+
+    if (node.width === undefined) container.delete('width')
+    else container.set('width', node.width)
+
+    if (node.height === undefined) container.delete('height')
+    else container.set('height', node.height)
+
+    if (node.selected === undefined) container.delete('selected')
+    else container.set('selected', node.selected)
+
+    const optionalProps: Array<keyof Node> = [
+      'parentId',
+      'positionAbsolute',
+      'extent',
+      'zIndex',
+      'draggable',
+      'selectable',
+      'dragHandle',
+      'dragging',
+      'connectable',
+      'expandParent',
+      'focusable',
+      'hidden',
+      'style',
+      'className',
+      'ariaLabel',
+      'resizing',
+      'deletable',
+    ]
+
+    optionalProps.forEach((prop) => {
+      const value = node[prop]
+      if (value === undefined)
+        container.delete(prop as string)
+      else
+        container.set(prop as string, cloneDeep(value as any))
+    })
+
+    const dataContainer = this.ensureDataContainer(container)
+    const handledKeys = new Set<string>()
+
+    Object.entries(node.data || {}).forEach(([key, value]) => {
+      if (!this.shouldSyncDataKey(key)) return
+      handledKeys.add(key)
+
+      if (listFields.has(key))
+        this.syncList(container, key, Array.isArray(value) ? value : [])
+      else
+        dataContainer.set(key, cloneDeep(value))
+    })
+
+    const existingData = dataContainer.toJSON() || {}
+    Object.keys(existingData).forEach((key) => {
+      if (!this.shouldSyncDataKey(key)) return
+      if (handledKeys.has(key)) return
+
+      dataContainer.delete(key)
+    })
+  }
+
+  private shouldSyncDataKey(key: string): boolean {
+    const syncDataAllowList = new Set(['_children', '_connectedSourceHandleIds', '_connectedTargetHandleIds', '_targetBranches'])
+    return (syncDataAllowList.has(key) || !key.startsWith('_')) && key !== 'selected'
+  }
+
+  private syncList(nodeContainer: LoroMap<any>, key: string, desired: any[]): void {
+    const list = this.ensureList(nodeContainer, key)
+    const current = list.toJSON() as any[]
+    const target = Array.isArray(desired) ? desired : []
+    const minLength = Math.min(current.length, target.length)
+
+    for (let i = 0; i < minLength; i += 1) {
+      if (!isEqual(current[i], target[i])) {
+        list.delete(i, 1)
+        list.insert(i, cloneDeep(target[i]))
+      }
+    }
+
+    if (current.length > target.length) {
+      list.delete(target.length, current.length - target.length)
+    }
+    else if (target.length > current.length) {
+      for (let i = current.length; i < target.length; i += 1)
+        list.insert(i, cloneDeep(target[i]))
+    }
+  }
+
+  private getNodePanelPresenceSnapshot(): NodePanelPresenceMap {
+    const snapshot: NodePanelPresenceMap = {}
+    Object.entries(this.nodePanelPresence).forEach(([nodeId, viewers]) => {
+      snapshot[nodeId] = { ...viewers }
+    })
+    return snapshot
+  }
+
+  private applyNodePanelPresenceUpdate(update: NodePanelPresenceEventData): void {
+    const { nodeId, action, clientId, user, timestamp } = update
+
+    if (action === 'open') {
+      // ensure a client only appears on a single node at a time
+      Object.entries(this.nodePanelPresence).forEach(([id, viewers]) => {
+        if (viewers[clientId]) {
+          delete viewers[clientId]
+          if (Object.keys(viewers).length === 0)
+            delete this.nodePanelPresence[id]
+        }
+      })
+
+      if (!this.nodePanelPresence[nodeId])
+        this.nodePanelPresence[nodeId] = {}
+
+      this.nodePanelPresence[nodeId][clientId] = {
+        ...user,
+        clientId,
+        timestamp: timestamp || Date.now(),
+      }
+    }
+    else {
+      const viewers = this.nodePanelPresence[nodeId]
+      if (viewers) {
+        delete viewers[clientId]
+        if (Object.keys(viewers).length === 0)
+          delete this.nodePanelPresence[nodeId]
+      }
+    }
+
+    this.eventEmitter.emit('nodePanelPresence', this.getNodePanelPresenceSnapshot())
+  }
+
+  private cleanupNodePanelPresence(activeClientIds: Set<string>, activeUserIds: Set<string>): void {
+    let hasChanges = false
+
+    Object.entries(this.nodePanelPresence).forEach(([nodeId, viewers]) => {
+      Object.keys(viewers).forEach((clientId) => {
+        const viewer = viewers[clientId]
+        const clientActive = activeClientIds.has(clientId)
+        const userActive = viewer?.userId ? activeUserIds.has(viewer.userId) : false
+
+        if (!clientActive && !userActive) {
+          delete viewers[clientId]
+          hasChanges = true
+        }
+      })
+
+      if (Object.keys(viewers).length === 0)
+        delete this.nodePanelPresence[nodeId]
+    })
+
+    if (hasChanges)
+      this.eventEmitter.emit('nodePanelPresence', this.getNodePanelPresenceSnapshot())
+  }
+
+  init = (appId: string, reactFlowStore: any): void => {
+    if (!reactFlowStore) {
+      console.warn('CollaborationManager.init called without reactFlowStore, deferring to connect()')
+      return
+    }
+    this.connect(appId, reactFlowStore)
+  }
+
+  setNodes = (oldNodes: Node[], newNodes: Node[]): void => {
+    if (!this.doc) return
+
+    // Don't track operations during undo/redo to prevent loops
+    if (this.isUndoRedoInProgress) {
+      console.log('Skipping setNodes during undo/redo')
+      return
+    }
+
+    console.log('Setting nodes with tracking')
+    this.syncNodes(oldNodes, newNodes)
+    this.doc.commit()
+  }
+
+  setEdges = (oldEdges: Edge[], newEdges: Edge[]): void => {
+    if (!this.doc) return
+
+    // Don't track operations during undo/redo to prevent loops
+    if (this.isUndoRedoInProgress) {
+      console.log('Skipping setEdges during undo/redo')
+      return
+    }
+
+    console.log('Setting edges with tracking')
+    this.syncEdges(oldEdges, newEdges)
+    this.doc.commit()
+  }
+
+  destroy = (): void => {
+    this.disconnect()
+  }
+
+  async connect(appId: string, reactFlowStore?: any): Promise<string> {
+    const connectionId = Math.random().toString(36).substring(2, 11)
+
+    this.activeConnections.add(connectionId)
+
+    if (this.currentAppId === appId && this.doc) {
+      // Already connected to the same app, only update store if provided and we don't have one
+      if (reactFlowStore && !this.reactFlowStore)
+        this.reactFlowStore = reactFlowStore
+
+      return connectionId
+    }
+
+    // Only disconnect if switching to a different app
+    if (this.currentAppId && this.currentAppId !== appId)
+      this.forceDisconnect()
+
+    this.currentAppId = appId
+    // Only set store if provided
+    if (reactFlowStore)
+      this.reactFlowStore = reactFlowStore
+
+    const socket = webSocketClient.connect(appId)
+
+    // Setup event listeners BEFORE any other operations
+    this.setupSocketEventListeners(socket)
+
+    this.doc = new LoroDoc()
+    this.nodesMap = this.doc.getMap('nodes')
+    this.edgesMap = this.doc.getMap('edges')
+
+    // Initialize UndoManager for collaborative undo/redo
+    this.undoManager = new UndoManager(this.doc, {
+      maxUndoSteps: 100,
+      mergeInterval: 500, // Merge operations within 500ms
+      excludeOriginPrefixes: [], // Don't exclude anything - let UndoManager track all local operations
+      onPush: (isUndo, range, event) => {
+        console.log('UndoManager onPush:', { isUndo, range, event })
+        // Store current selection state when an operation is pushed
+        const selectedNode = this.reactFlowStore?.getState().getNodes().find((n: Node) => n.data?.selected)
+
+        // Emit event to update UI button states when new operation is pushed
+        setTimeout(() => {
+          this.eventEmitter.emit('undoRedoStateChange', {
+            canUndo: this.undoManager?.canUndo() || false,
+            canRedo: this.undoManager?.canRedo() || false,
+          })
+        }, 0)
+
+        return {
+          value: {
+            selectedNodeId: selectedNode?.id || null,
+            timestamp: Date.now(),
+          },
+          cursors: [],
+        }
+      },
+      onPop: (isUndo, value, counterRange) => {
+        console.log('UndoManager onPop:', { isUndo, value, counterRange })
+        // Restore selection state when undoing/redoing
+        if (value?.value && typeof value.value === 'object' && 'selectedNodeId' in value.value && this.reactFlowStore) {
+          const selectedNodeId = (value.value as any).selectedNodeId
+          if (selectedNodeId) {
+            const { setNodes } = this.reactFlowStore.getState()
+            const nodes = this.reactFlowStore.getState().getNodes()
+            const newNodes = nodes.map((n: Node) => ({
+              ...n,
+              data: {
+                ...n.data,
+                selected: n.id === selectedNodeId,
+              },
+            }))
+            setNodes(newNodes)
+          }
+        }
+      },
+    })
+
+    this.provider = new CRDTProvider(socket, this.doc, this.handleSessionUnauthorized)
+
+    this.setupSubscriptions()
+
+    // Force user_connect if already connected
+    if (socket.connected)
+      emitWithAuthGuard(socket, 'user_connect', { workflow_id: appId }, { onUnauthorized: this.handleSessionUnauthorized })
+
+    return connectionId
+  }
+
+  disconnect = (connectionId?: string): void => {
+    if (connectionId)
+      this.activeConnections.delete(connectionId)
+
+    // Only disconnect when no more connections
+    if (this.activeConnections.size === 0)
+      this.forceDisconnect()
+  }
+
+  private forceDisconnect = (): void => {
+    if (this.currentAppId)
+      webSocketClient.disconnect(this.currentAppId)
+
+    this.provider?.destroy()
+    this.undoManager = null
+    this.doc = null
+    this.provider = null
+    this.nodesMap = null
+    this.edgesMap = null
+    this.currentAppId = null
+    this.reactFlowStore = null
+    this.cursors = {}
+    this.nodePanelPresence = {}
+    this.isUndoRedoInProgress = false
+    this.rejoinInProgress = false
+
+    // Only reset leader status when actually disconnecting
+    const wasLeader = this.isLeader
+    this.isLeader = false
+    this.leaderId = null
+
+    if (wasLeader)
+      this.eventEmitter.emit('leaderChange', false)
+
+    this.activeConnections.clear()
+    this.eventEmitter.removeAllListeners()
+  }
+
+  isConnected(): boolean {
+    return this.currentAppId ? webSocketClient.isConnected(this.currentAppId) : false
+  }
+
+  getNodes(): Node[] {
+    if (!this.nodesMap) return []
+    return Array.from(this.nodesMap.keys()).map(id => this.exportNode(id as string))
+  }
+
+  getEdges(): Edge[] {
+    return this.edgesMap ? Array.from(this.edgesMap.values()) : []
+  }
+
+  emitCursorMove(position: CursorPosition): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
+
+    const socket = this.getActiveSocket()
+    if (!socket)
+      return
+
+    this.sendCollaborationEvent({
+      type: 'mouse_move',
+      userId: socket.id,
+      data: { x: position.x, y: position.y },
+      timestamp: Date.now(),
+    })
+  }
+
+  emitSyncRequest(): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
+
+    console.log('Emitting sync request to leader')
+    this.sendCollaborationEvent({
+      type: 'sync_request',
+      data: { timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  emitWorkflowUpdate(appId: string): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
+
+    console.log('Emitting Workflow update event')
+    this.sendCollaborationEvent({
+      type: 'workflow_update',
+      data: { appId, timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  emitNodePanelPresence(nodeId: string, isOpen: boolean, user: NodePanelPresenceUser): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
+
+    const socket = this.getActiveSocket()
+    if (!socket || !nodeId || !user?.userId) return
+
+    const payload: NodePanelPresenceEventData = {
+      nodeId,
+      action: isOpen ? 'open' : 'close',
+      user,
+      clientId: socket.id as string,
+      timestamp: Date.now(),
+    }
+
+    this.sendCollaborationEvent({
+      type: 'node_panel_presence',
+      data: payload,
+      timestamp: payload.timestamp,
+    })
+
+    this.applyNodePanelPresenceUpdate(payload)
+  }
+
+  onSyncRequest(callback: () => void): () => void {
+    return this.eventEmitter.on('syncRequest', callback)
+  }
+
+  onStateChange(callback: (state: Partial<CollaborationState>) => void): () => void {
+    return this.eventEmitter.on('stateChange', callback)
+  }
+
+  onCursorUpdate(callback: (cursors: Record<string, CursorPosition>) => void): () => void {
+    return this.eventEmitter.on('cursors', callback)
+  }
+
+  onOnlineUsersUpdate(callback: (users: OnlineUser[]) => void): () => void {
+    return this.eventEmitter.on('onlineUsers', callback)
+  }
+
+  onWorkflowUpdate(callback: (update: { appId: string; timestamp: number }) => void): () => void {
+    return this.eventEmitter.on('workflowUpdate', callback)
+  }
+
+  onVarsAndFeaturesUpdate(callback: (update: any) => void): () => void {
+    return this.eventEmitter.on('varsAndFeaturesUpdate', callback)
+  }
+
+  onAppStateUpdate(callback: (update: any) => void): () => void {
+    return this.eventEmitter.on('appStateUpdate', callback)
+  }
+
+  onAppPublishUpdate(callback: (update: any) => void): () => void {
+    return this.eventEmitter.on('appPublishUpdate', callback)
+  }
+
+  onAppMetaUpdate(callback: (update: any) => void): () => void {
+    return this.eventEmitter.on('appMetaUpdate', callback)
+  }
+
+  onMcpServerUpdate(callback: (update: any) => void): () => void {
+    return this.eventEmitter.on('mcpServerUpdate', callback)
+  }
+
+  onNodePanelPresenceUpdate(callback: (presence: NodePanelPresenceMap) => void): () => void {
+    const off = this.eventEmitter.on('nodePanelPresence', callback)
+    callback(this.getNodePanelPresenceSnapshot())
+    return off
+  }
+
+  onLeaderChange(callback: (isLeader: boolean) => void): () => void {
+    return this.eventEmitter.on('leaderChange', callback)
+  }
+
+  onCommentsUpdate(callback: (update: { appId: string; timestamp: number }) => void): () => void {
+    return this.eventEmitter.on('commentsUpdate', callback)
+  }
+
+  emitCommentsUpdate(appId: string): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
+
+    console.log('Emitting Comments update event')
+    this.sendCollaborationEvent({
+      type: 'comments_update',
+      data: { appId, timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  onUndoRedoStateChange(callback: (state: { canUndo: boolean; canRedo: boolean }) => void): () => void {
+    return this.eventEmitter.on('undoRedoStateChange', callback)
+  }
+
+  getLeaderId(): string | null {
+    return this.leaderId
+  }
+
+  getIsLeader(): boolean {
+    return this.isLeader
+  }
+
+  // Collaborative undo/redo methods
+  undo(): boolean {
+    if (!this.undoManager) {
+      console.log('UndoManager not initialized')
+      return false
+    }
+
+    const canUndo = this.undoManager.canUndo()
+    console.log('Can undo:', canUndo)
+
+    if (canUndo) {
+      this.isUndoRedoInProgress = true
+      const result = this.undoManager.undo()
+
+      // After undo, manually update React state from CRDT without triggering collaboration
+      if (result && this.reactFlowStore) {
+        requestAnimationFrame(() => {
+          // Get ReactFlow's native setters, not the collaborative ones
+          const state = this.reactFlowStore.getState()
+          const updatedNodes = Array.from(this.nodesMap.values())
+          const updatedEdges = Array.from(this.edgesMap.values())
+          console.log('Manually updating React state after undo')
+
+          // Call ReactFlow's native setters directly to avoid triggering collaboration
+          state.setNodes(updatedNodes)
+          state.setEdges(updatedEdges)
+
+          this.isUndoRedoInProgress = false
+
+          // Emit event to update UI button states
+          this.eventEmitter.emit('undoRedoStateChange', {
+            canUndo: this.undoManager?.canUndo() || false,
+            canRedo: this.undoManager?.canRedo() || false,
+          })
+        })
+      }
+      else {
+        this.isUndoRedoInProgress = false
+      }
+
+      console.log('Undo result:', result)
+      return result
+    }
+
+    return false
+  }
+
+  redo(): boolean {
+    if (!this.undoManager) {
+      console.log('RedoManager not initialized')
+      return false
+    }
+
+    const canRedo = this.undoManager.canRedo()
+    console.log('Can redo:', canRedo)
+
+    if (canRedo) {
+      this.isUndoRedoInProgress = true
+      const result = this.undoManager.redo()
+
+      // After redo, manually update React state from CRDT without triggering collaboration
+      if (result && this.reactFlowStore) {
+        requestAnimationFrame(() => {
+          // Get ReactFlow's native setters, not the collaborative ones
+          const state = this.reactFlowStore.getState()
+          const updatedNodes = Array.from(this.nodesMap.values())
+          const updatedEdges = Array.from(this.edgesMap.values())
+          console.log('Manually updating React state after redo')
+
+          // Call ReactFlow's native setters directly to avoid triggering collaboration
+          state.setNodes(updatedNodes)
+          state.setEdges(updatedEdges)
+
+          this.isUndoRedoInProgress = false
+
+          // Emit event to update UI button states
+          this.eventEmitter.emit('undoRedoStateChange', {
+            canUndo: this.undoManager?.canUndo() || false,
+            canRedo: this.undoManager?.canRedo() || false,
+          })
+        })
+      }
+      else {
+        this.isUndoRedoInProgress = false
+      }
+
+      console.log('Redo result:', result)
+      return result
+    }
+
+    return false
+  }
+
+  canUndo(): boolean {
+    if (!this.undoManager) return false
+    return this.undoManager.canUndo()
+  }
+
+  canRedo(): boolean {
+    if (!this.undoManager) return false
+    return this.undoManager.canRedo()
+  }
+
+  clearUndoStack(): void {
+    if (!this.undoManager) return
+    this.undoManager.clear()
+  }
+
+  debugLeaderStatus(): void {
+    console.log('=== Leader Status Debug ===')
+    console.log('Current leader status:', this.isLeader)
+    console.log('Current leader ID:', this.leaderId)
+    console.log('Active connections:', this.activeConnections.size)
+    console.log('Connected:', this.isConnected())
+    console.log('Current app ID:', this.currentAppId)
+    console.log('Has ReactFlow store:', !!this.reactFlowStore)
+    console.log('========================')
+  }
+
+  private syncNodes(oldNodes: Node[], newNodes: Node[]): void {
+    if (!this.nodesMap || !this.doc) return
+
+    const newIdSet = new Set(newNodes.map(node => node.id))
+
+    oldNodes.forEach((oldNode) => {
+      if (!newIdSet.has(oldNode.id))
+        this.nodesMap.delete(oldNode.id)
+    })
+
+    newNodes.forEach((newNode) => {
+      const nodeContainer = this.getNodeContainer(newNode.id)
+      this.populateNodeContainer(nodeContainer, newNode)
+    })
+  }
+
+  private syncEdges(oldEdges: Edge[], newEdges: Edge[]): void {
+    if (!this.edgesMap) return
+
+    const oldEdgesMap = new Map(oldEdges.map(edge => [edge.id, edge]))
+    const newEdgesMap = new Map(newEdges.map(edge => [edge.id, edge]))
+
+    oldEdges.forEach((oldEdge) => {
+      if (!newEdgesMap.has(oldEdge.id))
+        this.edgesMap.delete(oldEdge.id)
+    })
+
+    newEdges.forEach((newEdge) => {
+      const oldEdge = oldEdgesMap.get(newEdge.id)
+      if (!oldEdge) {
+        const clonedEdge = cloneDeep(newEdge)
+        this.edgesMap.set(newEdge.id, clonedEdge)
+      }
+      else if (!isEqual(oldEdge, newEdge)) {
+        const clonedEdge = cloneDeep(newEdge)
+        this.edgesMap.set(newEdge.id, clonedEdge)
+      }
+    })
+  }
+
+  private setupSubscriptions(): void {
+    this.nodesMap?.subscribe((event: any) => {
+      console.log('nodesMap subscription event:', event)
+      if (event.by === 'import' && this.reactFlowStore) {
+        // Don't update React nodes during undo/redo to prevent loops
+        if (this.isUndoRedoInProgress) {
+          console.log('Skipping nodes subscription update during undo/redo')
+          return
+        }
+
+        requestAnimationFrame(() => {
+          const state = this.reactFlowStore.getState()
+          const previousNodes: Node[] = state.getNodes()
+          const previousNodeMap = new Map(previousNodes.map(node => [node.id, node]))
+          const selectedIds = new Set(
+            previousNodes
+              .filter(node => node.data?.selected)
+              .map(node => node.id),
+          )
+
+          this.pendingInitialSync = false
+
+          const updatedNodes = Array
+            .from(this.nodesMap.keys())
+            .map((nodeId) => {
+              const node = this.exportNode(nodeId as string)
+              const clonedNode: Node = {
+                ...node,
+                data: {
+                  ...(node.data || {}),
+                },
+              }
+              const clonedNodeData = clonedNode.data as (CommonNodeType & Record<string, unknown>)
+              // Keep the previous node's private data properties (starting with _)
+              const previousNode = previousNodeMap.get(clonedNode.id)
+              if (previousNode?.data) {
+                const previousData = previousNode.data as Record<string, unknown>
+                Object.entries(previousData)
+                  .filter(([key]) => key.startsWith('_'))
+                  .forEach(([key, value]) => {
+                    if (!(key in clonedNodeData))
+                      clonedNodeData[key] = value
+                  })
+              }
+
+              if (selectedIds.has(clonedNode.id))
+                clonedNode.data.selected = true
+
+              return clonedNode
+            })
+
+          console.log('Updating React nodes from subscription')
+
+          // Call ReactFlow's native setter directly to avoid triggering collaboration
+          state.setNodes(updatedNodes)
+        })
+      }
+    })
+
+    this.edgesMap?.subscribe((event: any) => {
+      console.log('edgesMap subscription event:', event)
+      if (event.by === 'import' && this.reactFlowStore) {
+        // Don't update React edges during undo/redo to prevent loops
+        if (this.isUndoRedoInProgress) {
+          console.log('Skipping edges subscription update during undo/redo')
+          return
+        }
+
+        requestAnimationFrame(() => {
+          // Get ReactFlow's native setters, not the collaborative ones
+          const state = this.reactFlowStore.getState()
+          const updatedEdges = Array.from(this.edgesMap.values())
+          console.log('Updating React edges from subscription')
+
+          this.pendingInitialSync = false
+
+          // Call ReactFlow's native setter directly to avoid triggering collaboration
+          state.setEdges(updatedEdges)
+        })
+      }
+    })
+  }
+
+  private setupSocketEventListeners(socket: any): void {
+    console.log('Setting up socket event listeners for collaboration')
+
+    socket.on('collaboration_update', (update: any) => {
+      if (update.type === 'mouse_move') {
+        // Update cursor state for this user
+        this.cursors[update.userId] = {
+          x: update.data.x,
+          y: update.data.y,
+          userId: update.userId,
+          timestamp: update.timestamp,
+        }
+
+        this.eventEmitter.emit('cursors', { ...this.cursors })
+      }
+      else if (update.type === 'vars_and_features_update') {
+        console.log('Processing vars_and_features_update event:', update)
+        this.eventEmitter.emit('varsAndFeaturesUpdate', update)
+      }
+      else if (update.type === 'app_state_update') {
+        console.log('Processing app_state_update event:', update)
+        this.eventEmitter.emit('appStateUpdate', update)
+      }
+      else if (update.type === 'app_meta_update') {
+        console.log('Processing app_meta_update event:', update)
+        this.eventEmitter.emit('appMetaUpdate', update)
+      }
+      else if (update.type === 'app_publish_update') {
+        console.log('Processing app_publish_update event:', update)
+        this.eventEmitter.emit('appPublishUpdate', update)
+      }
+      else if (update.type === 'mcp_server_update') {
+        console.log('Processing mcp_server_update event:', update)
+        this.eventEmitter.emit('mcpServerUpdate', update)
+      }
+      else if (update.type === 'workflow_update') {
+        console.log('Processing workflow_update event:', update)
+        this.eventEmitter.emit('workflowUpdate', update.data)
+      }
+      else if (update.type === 'comments_update') {
+        console.log('Processing comments_update event:', update)
+        this.eventEmitter.emit('commentsUpdate', update.data)
+      }
+      else if (update.type === 'node_panel_presence') {
+        console.log('Processing node_panel_presence event:', update)
+        this.applyNodePanelPresenceUpdate(update.data as NodePanelPresenceEventData)
+      }
+      else if (update.type === 'sync_request') {
+        console.log('Received sync request from another user')
+        // Only process if we are the leader
+        if (this.isLeader) {
+          console.log('Leader received sync request, triggering sync')
+          this.eventEmitter.emit('syncRequest', {})
+        }
+      }
+      else if (update.type === 'graph_resync_request') {
+        console.log('Received graph resync request from collaborator')
+        if (this.isLeader)
+          this.broadcastCurrentGraph()
+      }
+    })
+
+    socket.on('online_users', (data: { users: OnlineUser[]; leader?: string }) => {
+      try {
+        if (!data || !Array.isArray(data.users)) {
+          console.warn('Invalid online_users data structure:', data)
+          return
+        }
+
+        const onlineUserIds = new Set(data.users.map((user: OnlineUser) => user.user_id))
+        const onlineClientIds = new Set(
+          data.users
+            .map((user: OnlineUser) => user.sid)
+            .filter((sid): sid is string => typeof sid === 'string' && sid.length > 0),
+        )
+
+        // Remove cursors for offline users
+        Object.keys(this.cursors).forEach((userId) => {
+          if (!onlineUserIds.has(userId))
+            delete this.cursors[userId]
+        })
+
+        this.cleanupNodePanelPresence(onlineClientIds, onlineUserIds)
+
+        // Update leader information
+        if (data.leader && typeof data.leader === 'string')
+          this.leaderId = data.leader
+
+        this.eventEmitter.emit('onlineUsers', data.users)
+        this.eventEmitter.emit('cursors', { ...this.cursors })
+      }
+      catch (error) {
+        console.error('Error processing online_users update:', error)
+      }
+    })
+
+    socket.on('status', (data: any) => {
+      try {
+        if (!data || typeof data.isLeader !== 'boolean') {
+          console.warn('Invalid status data:', data)
+          return
+        }
+
+        const wasLeader = this.isLeader
+        this.isLeader = data.isLeader
+
+        if (this.isLeader)
+          this.pendingInitialSync = false
+        else
+          this.requestInitialSyncIfNeeded()
+
+        if (wasLeader !== this.isLeader)
+          this.eventEmitter.emit('leaderChange', this.isLeader)
+      }
+      catch (error) {
+        console.error('Error processing status update:', error)
+      }
+    })
+
+    socket.on('status', (data: { isLeader: boolean }) => {
+      if (this.isLeader !== data.isLeader) {
+        this.isLeader = data.isLeader
+        console.log(`Collaboration: I am now the ${this.isLeader ? 'Leader' : 'Follower'}.`)
+        this.eventEmitter.emit('leaderChange', this.isLeader)
+      }
+      if (this.isLeader)
+        this.pendingInitialSync = false
+      else
+        this.requestInitialSyncIfNeeded()
+    })
+
+    socket.on('status', (data: { isLeader: boolean }) => {
+      if (this.isLeader !== data.isLeader) {
+        this.isLeader = data.isLeader
+        console.log(`Collaboration: I am now the ${this.isLeader ? 'Leader' : 'Follower'}.`)
+        this.eventEmitter.emit('leaderChange', this.isLeader)
+      }
+      if (this.isLeader)
+        this.pendingInitialSync = false
+      else
+        this.requestInitialSyncIfNeeded()
+    })
+
+    socket.on('connect', () => {
+      console.log('WebSocket connected successfully')
+      this.eventEmitter.emit('stateChange', { isConnected: true })
+      this.pendingInitialSync = true
+    })
+
+    socket.on('disconnect', (reason: string) => {
+      console.log('WebSocket disconnected:', reason)
+      this.cursors = {}
+      this.isLeader = false
+      this.leaderId = null
+      this.pendingInitialSync = false
+      this.eventEmitter.emit('stateChange', { isConnected: false })
+      this.eventEmitter.emit('cursors', {})
+    })
+
+    socket.on('connect_error', (error: any) => {
+      console.error('WebSocket connection error:', error)
+      this.eventEmitter.emit('stateChange', { isConnected: false, error: error.message })
+    })
+
+    socket.on('error', (error: any) => {
+      console.error('WebSocket error:', error)
+    })
+  }
+
+  // We currently only relay CRDT updates; the server doesn't persist them.
+  // When a follower joins mid-session, it might miss earlier broadcasts and render stale data.
+  // This lightweight checkpoint asks the leader to rebroadcast the latest graph snapshot once.
+  private requestInitialSyncIfNeeded(): void {
+    if (!this.pendingInitialSync) return
+    if (this.isLeader) {
+      this.pendingInitialSync = false
+      return
+    }
+
+    this.emitGraphResyncRequest()
+    this.pendingInitialSync = false
+  }
+
+  private emitGraphResyncRequest(): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
+
+    this.sendCollaborationEvent({
+      type: 'graph_resync_request',
+      data: { timestamp: Date.now() },
+      timestamp: Date.now(),
+    })
+  }
+
+  private broadcastCurrentGraph(): void {
+    if (!this.currentAppId || !webSocketClient.isConnected(this.currentAppId)) return
+    if (!this.doc) return
+
+    const socket = webSocketClient.getSocket(this.currentAppId)
+    if (!socket) return
+
+    try {
+      const snapshot = this.doc.export({ mode: 'snapshot' })
+      this.sendGraphEvent(snapshot)
+    }
+    catch (error) {
+      console.error('Failed to broadcast graph snapshot:', error)
+    }
+  }
+}
+
+export const collaborationManager = new CollaborationManager()
diff --git a/web/app/components/workflow/collaboration/core/crdt-provider.ts b/web/app/components/workflow/collaboration/core/crdt-provider.ts
new file mode 100644
index 0000000000..fbe4b13e02
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/crdt-provider.ts
@@ -0,0 +1,39 @@
+import type { LoroDoc } from 'loro-crdt'
+import type { Socket } from 'socket.io-client'
+import { emitWithAuthGuard } from './websocket-manager'
+
+export class CRDTProvider {
+  private doc: LoroDoc
+  private socket: Socket
+  private onUnauthorized?: () => void
+
+  constructor(socket: Socket, doc: LoroDoc, onUnauthorized?: () => void) {
+    this.socket = socket
+    this.doc = doc
+    this.onUnauthorized = onUnauthorized
+    this.setupEventListeners()
+  }
+
+  private setupEventListeners(): void {
+    this.doc.subscribe((event: any) => {
+      if (event.by === 'local') {
+        const update = this.doc.export({ mode: 'update' })
+        emitWithAuthGuard(this.socket, 'graph_event', update, { onUnauthorized: this.onUnauthorized })
+      }
+    })
+
+    this.socket.on('graph_update', (updateData: Uint8Array) => {
+      try {
+        const data = new Uint8Array(updateData)
+        this.doc.import(data)
+      }
+      catch (error) {
+        console.error('Error importing graph update:', error)
+      }
+    })
+  }
+
+  destroy(): void {
+    this.socket.off('graph_update')
+  }
+}
diff --git a/web/app/components/workflow/collaboration/core/event-emitter.ts b/web/app/components/workflow/collaboration/core/event-emitter.ts
new file mode 100644
index 0000000000..250b344b12
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/event-emitter.ts
@@ -0,0 +1,49 @@
+export type EventHandler<T = any> = (data: T) => void
+
+export class EventEmitter {
+  private events: Map<string, Set<EventHandler>> = new Map()
+
+  on<T = any>(event: string, handler: EventHandler<T>): () => void {
+    if (!this.events.has(event))
+      this.events.set(event, new Set())
+
+    this.events.get(event)!.add(handler)
+
+    return () => this.off(event, handler)
+  }
+
+  off<T = any>(event: string, handler?: EventHandler<T>): void {
+    if (!this.events.has(event)) return
+
+    const handlers = this.events.get(event)!
+    if (handler)
+      handlers.delete(handler)
+    else
+      handlers.clear()
+
+    if (handlers.size === 0)
+      this.events.delete(event)
+  }
+
+  emit<T = any>(event: string, data: T): void {
+    if (!this.events.has(event)) return
+
+    const handlers = this.events.get(event)!
+    handlers.forEach((handler) => {
+      try {
+        handler(data)
+      }
+      catch (error) {
+        console.error(`Error in event handler for ${event}:`, error)
+      }
+    })
+  }
+
+  removeAllListeners(): void {
+    this.events.clear()
+  }
+
+  getListenerCount(event: string): number {
+    return this.events.get(event)?.size || 0
+  }
+}
diff --git a/web/app/components/workflow/collaboration/core/websocket-manager.ts b/web/app/components/workflow/collaboration/core/websocket-manager.ts
new file mode 100644
index 0000000000..bef68e5269
--- /dev/null
+++ b/web/app/components/workflow/collaboration/core/websocket-manager.ts
@@ -0,0 +1,168 @@
+import type { Socket } from 'socket.io-client'
+import { io } from 'socket.io-client'
+import { ACCESS_TOKEN_LOCAL_STORAGE_NAME } from '@/config'
+import type { DebugInfo, WebSocketConfig } from '../types/websocket'
+
+const isUnauthorizedAck = (...ackArgs: any[]): boolean => {
+  const [first, second] = ackArgs
+
+  if (second === 401 || first === 401)
+    return true
+
+  if (first && typeof first === 'object' && first.msg === 'unauthorized')
+    return true
+
+  return false
+}
+
+export type EmitAckOptions = {
+  onAck?: (...ackArgs: any[]) => void
+  onUnauthorized?: (...ackArgs: any[]) => void
+}
+
+export const emitWithAuthGuard = (
+  socket: Socket | null | undefined,
+  event: string,
+  payload: any,
+  options?: EmitAckOptions,
+): void => {
+  if (!socket)
+    return
+
+  socket.emit(
+    event,
+    payload,
+    (...ackArgs: any[]) => {
+      options?.onAck?.(...ackArgs)
+      if (isUnauthorizedAck(...ackArgs))
+        options?.onUnauthorized?.(...ackArgs)
+    },
+  )
+}
+
+export class WebSocketClient {
+  private connections: Map<string, Socket> = new Map()
+  private connecting: Set<string> = new Set()
+  private config: WebSocketConfig
+
+  constructor(config: WebSocketConfig = {}) {
+    const inferUrl = () => {
+      if (typeof window === 'undefined')
+        return 'ws://localhost:5001'
+      const scheme = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+      return `${scheme}//${window.location.host}`
+    }
+    this.config = {
+      url: config.url || process.env.NEXT_PUBLIC_SOCKET_URL || inferUrl(),
+      transports: config.transports || ['websocket'],
+      withCredentials: config.withCredentials !== false,
+      ...config,
+    }
+  }
+
+  connect(appId: string): Socket {
+    const existingSocket = this.connections.get(appId)
+    if (existingSocket?.connected)
+      return existingSocket
+
+    if (this.connecting.has(appId)) {
+      const pendingSocket = this.connections.get(appId)
+      if (pendingSocket)
+        return pendingSocket
+    }
+
+    if (existingSocket && !existingSocket.connected) {
+      existingSocket.disconnect()
+      this.connections.delete(appId)
+    }
+
+    this.connecting.add(appId)
+
+    const authToken = typeof window === 'undefined'
+      ? undefined
+      : window.localStorage.getItem(ACCESS_TOKEN_LOCAL_STORAGE_NAME) ?? undefined
+
+    const socketOptions: {
+      path: string
+      transports: WebSocketConfig['transports']
+      withCredentials?: boolean
+      auth?: { token: string }
+    } = {
+      path: '/socket.io',
+      transports: this.config.transports,
+      withCredentials: this.config.withCredentials,
+    }
+
+    if (authToken)
+      socketOptions.auth = { token: authToken }
+
+    const socket = io(this.config.url!, socketOptions)
+
+    this.connections.set(appId, socket)
+    this.setupBaseEventListeners(socket, appId)
+
+    return socket
+  }
+
+  disconnect(appId?: string): void {
+    if (appId) {
+      const socket = this.connections.get(appId)
+      if (socket) {
+        socket.disconnect()
+        this.connections.delete(appId)
+        this.connecting.delete(appId)
+      }
+    }
+    else {
+      this.connections.forEach(socket => socket.disconnect())
+      this.connections.clear()
+      this.connecting.clear()
+    }
+  }
+
+  getSocket(appId: string): Socket | null {
+    return this.connections.get(appId) || null
+  }
+
+  isConnected(appId: string): boolean {
+    return this.connections.get(appId)?.connected || false
+  }
+
+  getConnectedApps(): string[] {
+    const connectedApps: string[] = []
+    this.connections.forEach((socket, appId) => {
+      if (socket.connected)
+        connectedApps.push(appId)
+    })
+    return connectedApps
+  }
+
+  getDebugInfo(): DebugInfo {
+    const info: DebugInfo = {}
+    this.connections.forEach((socket, appId) => {
+      info[appId] = {
+        connected: socket.connected,
+        connecting: this.connecting.has(appId),
+        socketId: socket.id,
+      }
+    })
+    return info
+  }
+
+  private setupBaseEventListeners(socket: Socket, appId: string): void {
+    socket.on('connect', () => {
+      this.connecting.delete(appId)
+      emitWithAuthGuard(socket, 'user_connect', { workflow_id: appId })
+    })
+
+    socket.on('disconnect', () => {
+      this.connecting.delete(appId)
+    })
+
+    socket.on('connect_error', () => {
+      this.connecting.delete(appId)
+    })
+  }
+}
+
+export const webSocketClient = new WebSocketClient()
diff --git a/web/app/components/workflow/collaboration/hooks/use-collaboration.ts b/web/app/components/workflow/collaboration/hooks/use-collaboration.ts
new file mode 100644
index 0000000000..3aec92a2e6
--- /dev/null
+++ b/web/app/components/workflow/collaboration/hooks/use-collaboration.ts
@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from 'react'
+import type { ReactFlowInstance } from 'reactflow'
+import { collaborationManager } from '../core/collaboration-manager'
+import { CursorService } from '../services/cursor-service'
+import type { CollaborationState } from '../types/collaboration'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export function useCollaboration(appId: string, reactFlowStore?: any) {
+  const [state, setState] = useState<Partial<CollaborationState & { isLeader: boolean }>>({
+    isConnected: false,
+    onlineUsers: [],
+    cursors: {},
+    nodePanelPresence: {},
+    isLeader: false,
+  })
+
+  const cursorServiceRef = useRef<CursorService | null>(null)
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
+
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled) {
+      setState({
+        isConnected: false,
+        onlineUsers: [],
+        cursors: {},
+        nodePanelPresence: {},
+        isLeader: false,
+      })
+      return
+    }
+
+    let connectionId: string | null = null
+    let isUnmounted = false
+
+    if (!cursorServiceRef.current)
+      cursorServiceRef.current = new CursorService()
+
+    const initCollaboration = async () => {
+      try {
+        const id = await collaborationManager.connect(appId, reactFlowStore)
+        if (isUnmounted) {
+          collaborationManager.disconnect(id)
+          return
+        }
+        connectionId = id
+        setState((prev: any) => ({ ...prev, appId, isConnected: collaborationManager.isConnected() }))
+      }
+      catch (error) {
+        console.error('Failed to initialize collaboration:', error)
+      }
+    }
+
+    initCollaboration()
+
+    const unsubscribeStateChange = collaborationManager.onStateChange((newState: any) => {
+      console.log('Collaboration state change:', newState)
+      setState((prev: any) => ({ ...prev, ...newState }))
+    })
+
+    const unsubscribeCursors = collaborationManager.onCursorUpdate((cursors: any) => {
+      setState((prev: any) => ({ ...prev, cursors }))
+    })
+
+    const unsubscribeUsers = collaborationManager.onOnlineUsersUpdate((users: any) => {
+      console.log('Online users update:', users)
+      setState((prev: any) => ({ ...prev, onlineUsers: users }))
+    })
+
+    const unsubscribeNodePanelPresence = collaborationManager.onNodePanelPresenceUpdate((presence) => {
+      setState((prev: any) => ({ ...prev, nodePanelPresence: presence }))
+    })
+
+    const unsubscribeLeaderChange = collaborationManager.onLeaderChange((isLeader: boolean) => {
+      console.log('Leader status changed:', isLeader)
+      setState((prev: any) => ({ ...prev, isLeader }))
+    })
+
+    return () => {
+      isUnmounted = true
+      unsubscribeStateChange()
+      unsubscribeCursors()
+      unsubscribeUsers()
+      unsubscribeNodePanelPresence()
+      unsubscribeLeaderChange()
+      cursorServiceRef.current?.stopTracking()
+      if (connectionId)
+        collaborationManager.disconnect(connectionId)
+    }
+  }, [appId, reactFlowStore, isCollaborationEnabled])
+
+  const startCursorTracking = (containerRef: React.RefObject<HTMLElement>, reactFlowInstance?: ReactFlowInstance) => {
+    if (!isCollaborationEnabled || !cursorServiceRef.current)
+      return
+
+    if (cursorServiceRef.current) {
+      cursorServiceRef.current.startTracking(containerRef, (position) => {
+        collaborationManager.emitCursorMove(position)
+      }, reactFlowInstance)
+    }
+  }
+
+  const stopCursorTracking = () => {
+    cursorServiceRef.current?.stopTracking()
+  }
+
+  const result = {
+    isConnected: state.isConnected || false,
+    onlineUsers: state.onlineUsers || [],
+    cursors: state.cursors || {},
+    nodePanelPresence: state.nodePanelPresence || {},
+    isLeader: state.isLeader || false,
+    leaderId: collaborationManager.getLeaderId(),
+    isEnabled: isCollaborationEnabled,
+    startCursorTracking,
+    stopCursorTracking,
+  }
+
+  return result
+}
diff --git a/web/app/components/workflow/collaboration/index.ts b/web/app/components/workflow/collaboration/index.ts
new file mode 100644
index 0000000000..89cbb3aa43
--- /dev/null
+++ b/web/app/components/workflow/collaboration/index.ts
@@ -0,0 +1,5 @@
+export { collaborationManager } from './core/collaboration-manager'
+export { webSocketClient } from './core/websocket-manager'
+export { CursorService } from './services/cursor-service'
+export { useCollaboration } from './hooks/use-collaboration'
+export * from './types'
diff --git a/web/app/components/workflow/collaboration/services/cursor-service.ts b/web/app/components/workflow/collaboration/services/cursor-service.ts
new file mode 100644
index 0000000000..3fa976a90d
--- /dev/null
+++ b/web/app/components/workflow/collaboration/services/cursor-service.ts
@@ -0,0 +1,88 @@
+import type { RefObject } from 'react'
+import type { CursorPosition } from '../types/collaboration'
+import type { ReactFlowInstance } from 'reactflow'
+
+const CURSOR_MIN_MOVE_DISTANCE = 10
+const CURSOR_THROTTLE_MS = 500
+
+export class CursorService {
+  private containerRef: RefObject<HTMLElement> | null = null
+  private reactFlowInstance: ReactFlowInstance | null = null
+  private isTracking = false
+  private onCursorUpdate: ((cursors: Record<string, CursorPosition>) => void) | null = null
+  private onEmitPosition: ((position: CursorPosition) => void) | null = null
+  private lastEmitTime = 0
+  private lastPosition: { x: number; y: number } | null = null
+
+  startTracking(
+    containerRef: RefObject<HTMLElement>,
+    onEmitPosition: (position: CursorPosition) => void,
+    reactFlowInstance?: ReactFlowInstance,
+  ): void {
+    if (this.isTracking) this.stopTracking()
+
+    this.containerRef = containerRef
+    this.onEmitPosition = onEmitPosition
+    this.reactFlowInstance = reactFlowInstance || null
+    this.isTracking = true
+
+    if (containerRef.current)
+      containerRef.current.addEventListener('mousemove', this.handleMouseMove)
+  }
+
+  stopTracking(): void {
+    if (this.containerRef?.current)
+      this.containerRef.current.removeEventListener('mousemove', this.handleMouseMove)
+
+    this.containerRef = null
+    this.reactFlowInstance = null
+    this.onEmitPosition = null
+    this.isTracking = false
+    this.lastPosition = null
+  }
+
+  setCursorUpdateHandler(handler: (cursors: Record<string, CursorPosition>) => void): void {
+    this.onCursorUpdate = handler
+  }
+
+  updateCursors(cursors: Record<string, CursorPosition>): void {
+    if (this.onCursorUpdate)
+      this.onCursorUpdate(cursors)
+  }
+
+  private handleMouseMove = (event: MouseEvent): void => {
+    if (!this.containerRef?.current || !this.onEmitPosition) return
+
+    const rect = this.containerRef.current.getBoundingClientRect()
+    let x = event.clientX - rect.left
+    let y = event.clientY - rect.top
+
+    // Transform coordinates to ReactFlow world coordinates if ReactFlow instance is available
+    if (this.reactFlowInstance) {
+      const viewport = this.reactFlowInstance.getViewport()
+      // Convert screen coordinates to world coordinates
+      // World coordinates = (screen coordinates - viewport translation) / zoom
+      x = (x - viewport.x) / viewport.zoom
+      y = (y - viewport.y) / viewport.zoom
+    }
+
+    // Always emit cursor position (remove boundary check since world coordinates can be negative)
+    const now = Date.now()
+    const timeThrottled = now - this.lastEmitTime > CURSOR_THROTTLE_MS
+    const minDistance = CURSOR_MIN_MOVE_DISTANCE / (this.reactFlowInstance?.getZoom() || 1)
+    const distanceThrottled = !this.lastPosition
+        || (Math.abs(x - this.lastPosition.x) > minDistance)
+        || (Math.abs(y - this.lastPosition.y) > minDistance)
+
+    if (timeThrottled && distanceThrottled) {
+      this.lastPosition = { x, y }
+      this.lastEmitTime = now
+      this.onEmitPosition({
+        x,
+        y,
+        userId: '',
+        timestamp: now,
+      })
+    }
+  }
+}
diff --git a/web/app/components/workflow/collaboration/types/collaboration.ts b/web/app/components/workflow/collaboration/types/collaboration.ts
new file mode 100644
index 0000000000..4e74d8fbda
--- /dev/null
+++ b/web/app/components/workflow/collaboration/types/collaboration.ts
@@ -0,0 +1,57 @@
+import type { Edge, Node } from '../../types'
+
+export type OnlineUser = {
+  user_id: string
+  username: string
+  avatar: string
+  sid: string
+}
+
+export type WorkflowOnlineUsers = {
+  workflow_id: string
+  users: OnlineUser[]
+}
+
+export type OnlineUserListResponse = {
+  data: WorkflowOnlineUsers[]
+}
+
+export type CursorPosition = {
+  x: number
+  y: number
+  userId: string
+  timestamp: number
+}
+
+export type NodePanelPresenceUser = {
+  userId: string
+  username: string
+  avatar?: string | null
+}
+
+export type NodePanelPresenceInfo = NodePanelPresenceUser & {
+  clientId: string
+  timestamp: number
+}
+
+export type NodePanelPresenceMap = Record<string, Record<string, NodePanelPresenceInfo>>
+
+export type CollaborationState = {
+  appId: string
+  isConnected: boolean
+  onlineUsers: OnlineUser[]
+  cursors: Record<string, CursorPosition>
+  nodePanelPresence: NodePanelPresenceMap
+}
+
+export type GraphSyncData = {
+  nodes: Node[]
+  edges: Edge[]
+}
+
+export type CollaborationUpdate = {
+  type: 'mouse_move' | 'vars_and_features_update' | 'sync_request' | 'app_state_update' | 'app_meta_update' | 'mcp_server_update' | 'workflow_update' | 'comments_update' | 'node_panel_presence' | 'app_publish_update'
+  userId: string
+  data: any
+  timestamp: number
+}
diff --git a/web/app/components/workflow/collaboration/types/events.ts b/web/app/components/workflow/collaboration/types/events.ts
new file mode 100644
index 0000000000..e995f9e876
--- /dev/null
+++ b/web/app/components/workflow/collaboration/types/events.ts
@@ -0,0 +1,38 @@
+export type CollaborationEvent = {
+  type: string
+  data: any
+  timestamp: number
+}
+
+export type GraphUpdateEvent = {
+  type: 'graph_update'
+  data: Uint8Array
+} & CollaborationEvent
+
+export type CursorMoveEvent = {
+  type: 'cursor_move'
+  data: {
+    x: number
+    y: number
+    userId: string
+  }
+} & CollaborationEvent
+
+export type UserConnectEvent = {
+  type: 'user_connect'
+  data: {
+    workflow_id: string
+  }
+} & CollaborationEvent
+
+export type OnlineUsersEvent = {
+  type: 'online_users'
+  data: {
+    users: Array<{
+      user_id: string
+      username: string
+      avatar: string
+      sid: string
+    }>
+  }
+} & CollaborationEvent
diff --git a/web/app/components/workflow/collaboration/types/index.ts b/web/app/components/workflow/collaboration/types/index.ts
new file mode 100644
index 0000000000..e79ed35da0
--- /dev/null
+++ b/web/app/components/workflow/collaboration/types/index.ts
@@ -0,0 +1,3 @@
+export * from './websocket'
+export * from './collaboration'
+export * from './events'
diff --git a/web/app/components/workflow/collaboration/types/websocket.ts b/web/app/components/workflow/collaboration/types/websocket.ts
new file mode 100644
index 0000000000..37b3a8ad17
--- /dev/null
+++ b/web/app/components/workflow/collaboration/types/websocket.ts
@@ -0,0 +1,16 @@
+export type WebSocketConfig = {
+  url?: string
+  token?: string
+  transports?: string[]
+  withCredentials?: boolean
+}
+
+export type ConnectionInfo = {
+  connected: boolean
+  connecting: boolean
+  socketId?: string
+}
+
+export type DebugInfo = {
+  [appId: string]: ConnectionInfo
+}
diff --git a/web/app/components/workflow/collaboration/utils/user-color.ts b/web/app/components/workflow/collaboration/utils/user-color.ts
new file mode 100644
index 0000000000..51aee6a038
--- /dev/null
+++ b/web/app/components/workflow/collaboration/utils/user-color.ts
@@ -0,0 +1,12 @@
+/**
+ * Generate a consistent color for a user based on their ID
+ * Used for cursor colors and avatar backgrounds
+ */
+export const getUserColor = (id: string): string => {
+  const colors = ['#155AEF', '#0BA5EC', '#444CE7', '#7839EE', '#4CA30D', '#0E9384', '#DD2590', '#FF4405', '#D92D20', '#F79009', '#828DAD']
+  const hash = id.split('').reduce((a, b) => {
+    a = ((a << 5) - a) + b.charCodeAt(0)
+    return a & a
+  }, 0)
+  return colors[Math.abs(hash) % colors.length]
+}
diff --git a/web/app/components/workflow/comment-manager.tsx b/web/app/components/workflow/comment-manager.tsx
new file mode 100644
index 0000000000..e5817eb6b1
--- /dev/null
+++ b/web/app/components/workflow/comment-manager.tsx
@@ -0,0 +1,34 @@
+import { useEventListener } from 'ahooks'
+import { useWorkflowStore } from './store'
+import { useWorkflowComment } from './hooks/use-workflow-comment'
+
+const CommentManager = () => {
+  const workflowStore = useWorkflowStore()
+  const { handleCreateComment, handleCommentCancel } = useWorkflowComment()
+
+  useEventListener('click', (e) => {
+    const { controlMode, mousePosition, pendingComment } = workflowStore.getState()
+
+    if (controlMode === 'comment') {
+      const target = e.target as HTMLElement
+      const isInDropdown = target.closest('[data-mention-dropdown]')
+      const isInCommentInput = target.closest('[data-comment-input]')
+      const isOnCanvasPane = target.closest('.react-flow__pane')
+
+      // Only when clicking on the React Flow canvas pane (background),
+      // and not inside comment input or its dropdown
+      if (!isInDropdown && !isInCommentInput && isOnCanvasPane) {
+        e.preventDefault()
+        e.stopPropagation()
+        if (pendingComment)
+          handleCommentCancel()
+        else
+          handleCreateComment(mousePosition)
+      }
+    }
+  })
+
+  return null
+}
+
+export default CommentManager
diff --git a/web/app/components/workflow/comment/comment-icon.tsx b/web/app/components/workflow/comment/comment-icon.tsx
new file mode 100644
index 0000000000..f2b3a785b1
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@@ -0,0 +1,265 @@
+'use client'
+
+import type { FC, PointerEvent as ReactPointerEvent } from 'react'
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
+import { useReactFlow, useViewport } from 'reactflow'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import CommentPreview from './comment-preview'
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { useAppContext } from '@/context/app-context'
+
+type CommentIconProps = {
+  comment: WorkflowCommentList
+  onClick: () => void
+  isActive?: boolean
+  onPositionUpdate?: (position: { x: number; y: number }) => void
+}
+
+export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isActive = false, onPositionUpdate }) => {
+  const { flowToScreenPosition, screenToFlowPosition } = useReactFlow()
+  const viewport = useViewport()
+  const { userProfile } = useAppContext()
+  const isAuthor = comment.created_by_account?.id === userProfile?.id
+  const [showPreview, setShowPreview] = useState(false)
+  const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const dragStateRef = useRef<{
+    offsetX: number
+    offsetY: number
+    startX: number
+    startY: number
+    hasMoved: boolean
+  } | null>(null)
+
+  const workflowContainerRect = typeof document !== 'undefined'
+    ? document.getElementById('workflow-container')?.getBoundingClientRect()
+    : null
+  const containerLeft = workflowContainerRect?.left ?? 0
+  const containerTop = workflowContainerRect?.top ?? 0
+
+  const screenPosition = useMemo(() => {
+    return flowToScreenPosition({
+      x: comment.position_x,
+      y: comment.position_y,
+    })
+  }, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
+
+  const effectiveScreenPosition = dragPosition ?? screenPosition
+  const canvasPosition = useMemo(() => ({
+    x: effectiveScreenPosition.x - containerLeft,
+    y: effectiveScreenPosition.y - containerTop,
+  }), [effectiveScreenPosition.x, effectiveScreenPosition.y, containerLeft, containerTop])
+  const cursorClass = useMemo(() => {
+    if (!isAuthor)
+      return 'cursor-pointer'
+    if (isActive)
+      return isDragging ? 'cursor-grabbing' : ''
+    return isDragging ? 'cursor-grabbing' : 'cursor-pointer'
+  }, [isActive, isAuthor, isDragging])
+
+  const handlePointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0)
+      return
+
+    event.stopPropagation()
+    event.preventDefault()
+
+    if (!isAuthor) {
+      if (event.currentTarget.dataset.role !== 'comment-preview')
+        setShowPreview(false)
+      return
+    }
+
+    dragStateRef.current = {
+      offsetX: event.clientX - screenPosition.x,
+      offsetY: event.clientY - screenPosition.y,
+      startX: event.clientX,
+      startY: event.clientY,
+      hasMoved: false,
+    }
+
+    setDragPosition(screenPosition)
+    setIsDragging(false)
+
+    if (event.currentTarget.dataset.role !== 'comment-preview')
+      setShowPreview(false)
+
+    if (event.currentTarget.setPointerCapture)
+      event.currentTarget.setPointerCapture(event.pointerId)
+  }, [isAuthor, screenPosition])
+
+  const handlePointerMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const dragState = dragStateRef.current
+    if (!dragState)
+      return
+
+    event.stopPropagation()
+    event.preventDefault()
+
+    const nextX = event.clientX - dragState.offsetX
+    const nextY = event.clientY - dragState.offsetY
+
+    if (!dragState.hasMoved) {
+      const distance = Math.hypot(event.clientX - dragState.startX, event.clientY - dragState.startY)
+      if (distance > 4) {
+        dragState.hasMoved = true
+        setIsDragging(true)
+      }
+    }
+
+    setDragPosition({ x: nextX, y: nextY })
+  }, [])
+
+  const finishDrag = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const dragState = dragStateRef.current
+    if (!dragState)
+      return false
+
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId))
+      event.currentTarget.releasePointerCapture(event.pointerId)
+
+    dragStateRef.current = null
+    setDragPosition(null)
+    setIsDragging(false)
+    return dragState.hasMoved
+  }, [])
+
+  const handlePointerUp = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+
+    const finalScreenPosition = dragPosition ?? screenPosition
+    const didDrag = finishDrag(event)
+
+    setShowPreview(false)
+
+    if (didDrag) {
+      if (onPositionUpdate) {
+        const flowPosition = screenToFlowPosition({
+          x: finalScreenPosition.x,
+          y: finalScreenPosition.y,
+        })
+        onPositionUpdate(flowPosition)
+      }
+    }
+    else if (!isActive) {
+      onClick()
+    }
+  }, [dragPosition, finishDrag, isActive, onClick, onPositionUpdate, screenPosition, screenToFlowPosition])
+
+  const handlePointerCancel = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    event.preventDefault()
+    finishDrag(event)
+  }, [finishDrag])
+
+  const handleMouseEnter = useCallback(() => {
+    if (isActive || isDragging)
+      return
+    setShowPreview(true)
+  }, [isActive, isDragging])
+
+  const handleMouseLeave = useCallback(() => {
+    setShowPreview(false)
+  }, [])
+
+  const participants = useMemo(() => {
+    const list = comment.participants ?? []
+    const author = comment.created_by_account
+    if (!author)
+      return [...list]
+    const rest = list.filter(user => user.id !== author.id)
+    return [author, ...rest]
+  }, [comment.created_by_account, comment.participants])
+
+  // Calculate dynamic width based on number of participants
+  const participantCount = participants.length
+  const maxVisible = Math.min(3, participantCount)
+  const showCount = participantCount > 3
+  const avatarSize = 24
+  const avatarSpacing = 4 // -space-x-1 is about 4px overlap
+
+  // Width calculation: first avatar + (additional avatars * (size - spacing)) + padding
+  const dynamicWidth = Math.max(40, // minimum width
+    8 + avatarSize + Math.max(0, (showCount ? 2 : maxVisible - 1)) * (avatarSize - avatarSpacing) + 8,
+  )
+
+  const pointerEventHandlers = useMemo(() => ({
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+  }), [handlePointerCancel, handlePointerDown, handlePointerMove, handlePointerUp])
+
+  return (
+    <>
+      <div
+        className="absolute z-10"
+        style={{
+          left: canvasPosition.x,
+          top: canvasPosition.y,
+          transform: 'translate(-50%, -50%)',
+        }}
+        data-role='comment-marker'
+        {...pointerEventHandlers}
+      >
+        <div
+          className={cursorClass}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <div
+            className={'relative h-10 rounded-br-full rounded-tl-full rounded-tr-full'}
+            style={{ width: dynamicWidth }}
+          >
+            <div className={`absolute inset-[6px] overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full border bg-components-panel-bg transition-shadow ${
+              isActive
+                ? 'border-primary-500 ring-1 ring-primary-500'
+                : 'border-components-panel-border'
+            }`}>
+              <div className="flex h-full w-full items-center justify-center px-1">
+                <UserAvatarList
+                  users={participants}
+                  maxVisible={3}
+                  size={24}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Preview panel */}
+      {showPreview && !isActive && (
+        <div
+          className="absolute z-20"
+          style={{
+            left: (effectiveScreenPosition.x - containerLeft) - dynamicWidth / 2,
+            top: (effectiveScreenPosition.y - containerTop) + 20,
+            transform: 'translateY(-100%)',
+          }}
+          data-role='comment-preview'
+          {...pointerEventHandlers}
+          onMouseEnter={() => setShowPreview(true)}
+          onMouseLeave={() => setShowPreview(false)}
+        >
+          <CommentPreview comment={comment} onClick={() => {
+            setShowPreview(false)
+            onClick()
+          }} />
+        </div>
+      )}
+    </>
+  )
+}, (prevProps, nextProps) => {
+  return (
+    prevProps.comment.id === nextProps.comment.id
+    && prevProps.comment.position_x === nextProps.comment.position_x
+    && prevProps.comment.position_y === nextProps.comment.position_y
+    && prevProps.onClick === nextProps.onClick
+    && prevProps.isActive === nextProps.isActive
+    && prevProps.onPositionUpdate === nextProps.onPositionUpdate
+  )
+})
+
+CommentIcon.displayName = 'CommentIcon'
diff --git a/web/app/components/workflow/comment/comment-input.tsx b/web/app/components/workflow/comment/comment-input.tsx
new file mode 100644
index 0000000000..f8c96a0595
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-input.tsx
@@ -0,0 +1,87 @@
+import type { FC } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Avatar from '@/app/components/base/avatar'
+import { useAppContext } from '@/context/app-context'
+import { MentionInput } from './mention-input'
+import cn from '@/utils/classnames'
+
+type CommentInputProps = {
+  position: { x: number; y: number }
+  onSubmit: (content: string, mentionedUserIds: string[]) => void
+  onCancel: () => void
+}
+
+export const CommentInput: FC<CommentInputProps> = memo(({ position, onSubmit, onCancel }) => {
+  const [content, setContent] = useState('')
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        onCancel()
+      }
+    }
+
+    document.addEventListener('keydown', handleGlobalKeyDown, true)
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyDown, true)
+    }
+  }, [onCancel])
+
+  const handleMentionSubmit = useCallback((content: string, mentionedUserIds: string[]) => {
+    onSubmit(content, mentionedUserIds)
+    setContent('')
+  }, [onSubmit])
+
+  return (
+    <div
+      className="absolute z-[60] w-96"
+      style={{
+        left: position.x,
+        top: position.y,
+      }}
+      data-comment-input
+    >
+      <div className="flex items-center gap-3">
+        <div className="relative shrink-0">
+          <div className="relative h-8 w-8 overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full bg-primary-500">
+            <div className="absolute inset-[2px] overflow-hidden rounded-br-full rounded-tl-full rounded-tr-full bg-white">
+              <div className="flex h-full w-full items-center justify-center">
+                <div className="h-6 w-6 overflow-hidden rounded-full">
+                  <Avatar
+                    avatar={userProfile.avatar_url}
+                    name={userProfile.name}
+                    size={24}
+                    className="h-full w-full"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'relative z-10 flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[4px] shadow-md',
+          )}
+        >
+          <div className='relative px-[9px] pt-[4px]'>
+            <MentionInput
+              value={content}
+              onChange={setContent}
+              onSubmit={handleMentionSubmit}
+              placeholder={t('workflow.comments.placeholder.add')}
+              autoFocus
+              className="relative"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+CommentInput.displayName = 'CommentInput'
diff --git a/web/app/components/workflow/comment/comment-preview.tsx b/web/app/components/workflow/comment/comment-preview.tsx
new file mode 100644
index 0000000000..be43434dd5
--- /dev/null
+++ b/web/app/components/workflow/comment/comment-preview.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import type { FC } from 'react'
+import { memo, useEffect, useMemo } from 'react'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useStore } from '../store'
+
+type CommentPreviewProps = {
+  comment: WorkflowCommentList
+  onClick?: () => void
+}
+
+const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+  const setCommentPreviewHovering = useStore(s => s.setCommentPreviewHovering)
+  const participants = useMemo(() => {
+    const list = comment.participants ?? []
+    const author = comment.created_by_account
+    if (!author)
+      return [...list]
+    const rest = list.filter(user => user.id !== author.id)
+    return [author, ...rest]
+  }, [comment.created_by_account, comment.participants])
+  useEffect(() => () => {
+    setCommentPreviewHovering(false)
+  }, [setCommentPreviewHovering])
+
+  return (
+    <div
+      className="w-80 cursor-pointer rounded-3xl rounded-bl-[3px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4 shadow-lg backdrop-blur-[10px] transition-colors hover:bg-components-panel-on-panel-item-bg-hover"
+      onClick={onClick}
+      onMouseEnter={() => setCommentPreviewHovering(true)}
+      onMouseLeave={() => setCommentPreviewHovering(false)}
+    >
+      <div className="mb-3 flex items-center justify-between">
+        <UserAvatarList
+          users={participants}
+          maxVisible={3}
+          size={24}
+        />
+      </div>
+
+      <div className="mb-2 flex items-start">
+        <div className="flex min-w-0 items-center gap-2">
+          <div className="system-sm-medium truncate text-text-primary">{comment.created_by_account.name}</div>
+          <div className="system-2xs-regular shrink-0 text-text-tertiary">
+            {formatTimeFromNow(comment.updated_at * 1000)}
+          </div>
+        </div>
+      </div>
+
+      <div className="system-sm-regular break-words text-text-secondary">{comment.content}</div>
+    </div>
+  )
+}
+
+export default memo(CommentPreview)
diff --git a/web/app/components/workflow/comment/cursor.tsx b/web/app/components/workflow/comment/cursor.tsx
new file mode 100644
index 0000000000..56b5c24f16
--- /dev/null
+++ b/web/app/components/workflow/comment/cursor.tsx
@@ -0,0 +1,28 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import { useStore } from '../store'
+import { ControlMode } from '../types'
+import { Comment } from '@/app/components/base/icons/src/public/other'
+
+export const CommentCursor: FC = memo(() => {
+  const controlMode = useStore(s => s.controlMode)
+  const mousePosition = useStore(s => s.mousePosition)
+
+  if (controlMode !== ControlMode.Comment)
+    return null
+
+  return (
+    <div
+      className="pointer-events-none absolute z-50 flex h-6 w-6 items-center justify-center"
+      style={{
+        left: mousePosition.elementX,
+        top: mousePosition.elementY,
+        transform: 'translate(-50%, -50%)',
+      }}
+    >
+      <Comment className="text-text-primary" />
+    </div>
+  )
+})
+
+CommentCursor.displayName = 'CommentCursor'
diff --git a/web/app/components/workflow/comment/index.tsx b/web/app/components/workflow/comment/index.tsx
new file mode 100644
index 0000000000..f80ddac5bf
--- /dev/null
+++ b/web/app/components/workflow/comment/index.tsx
@@ -0,0 +1,5 @@
+export { CommentCursor } from './cursor'
+export { CommentInput } from './comment-input'
+export { CommentIcon } from './comment-icon'
+export { CommentThread } from './thread'
+export { MentionInput } from './mention-input'
diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
new file mode 100644
index 0000000000..18810e9ad1
--- /dev/null
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -0,0 +1,649 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { useParams } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import { RiArrowUpLine, RiAtLine, RiLoader2Line } from '@remixicon/react'
+import Textarea from 'react-textarea-autosize'
+import Button from '@/app/components/base/button'
+import Avatar from '@/app/components/base/avatar'
+import cn from '@/utils/classnames'
+import { type UserProfile, fetchMentionableUsers } from '@/service/workflow-comment'
+import { useStore, useWorkflowStore } from '../store'
+import { EnterKey } from '@/app/components/base/icons/src/public/common'
+
+type MentionInputProps = {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: (content: string, mentionedUserIds: string[]) => void
+  onCancel?: () => void
+  placeholder?: string
+  disabled?: boolean
+  loading?: boolean
+  className?: string
+  isEditing?: boolean
+  autoFocus?: boolean
+}
+
+const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder,
+  disabled = false,
+  loading = false,
+  className,
+  isEditing = false,
+  autoFocus = false,
+}, forwardedRef) => {
+  const params = useParams()
+  const { t } = useTranslation()
+  const appId = params.appId as string
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const highlightContentRef = useRef<HTMLDivElement>(null)
+  const actionContainerRef = useRef<HTMLDivElement | null>(null)
+  const actionRightRef = useRef<HTMLDivElement | null>(null)
+  const baseTextareaHeightRef = useRef<number | null>(null)
+
+  // Expose textarea ref to parent component
+  useImperativeHandle(forwardedRef, () => textareaRef.current!, [])
+
+  const workflowStore = useWorkflowStore()
+  const mentionUsersFromStore = useStore(state => (
+    appId ? state.mentionableUsersCache[appId] : undefined
+  ))
+  const mentionUsers = mentionUsersFromStore ?? []
+
+  const [showMentionDropdown, setShowMentionDropdown] = useState(false)
+  const [mentionQuery, setMentionQuery] = useState('')
+  const [mentionPosition, setMentionPosition] = useState(0)
+  const [selectedMentionIndex, setSelectedMentionIndex] = useState(0)
+  const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([])
+  const resolvedPlaceholder = placeholder ?? t('workflow.comments.placeholder.add')
+  const BASE_PADDING = 4
+  const [shouldReserveButtonGap, setShouldReserveButtonGap] = useState(isEditing)
+  const [shouldReserveHorizontalSpace, setShouldReserveHorizontalSpace] = useState(() => !isEditing)
+  const [paddingRight, setPaddingRight] = useState(() => BASE_PADDING + (isEditing ? 0 : 48))
+  const [paddingBottom, setPaddingBottom] = useState(() => BASE_PADDING + (isEditing ? 32 : 0))
+
+  const mentionNameList = useMemo(() => {
+    const names = mentionUsers
+      .map(user => user.name?.trim())
+      .filter((name): name is string => Boolean(name))
+
+    const uniqueNames = Array.from(new Set(names))
+    uniqueNames.sort((a, b) => b.length - a.length)
+    return uniqueNames
+  }, [mentionUsers])
+
+  const highlightedValue = useMemo<ReactNode>(() => {
+    if (!value)
+      return ''
+
+    if (mentionNameList.length === 0)
+      return value
+
+    const segments: ReactNode[] = []
+    let cursor = 0
+    let hasMention = false
+
+    while (cursor < value.length) {
+      let nextMatchStart = -1
+      let matchedName = ''
+
+      for (const name of mentionNameList) {
+        const searchStart = value.indexOf(`@${name}`, cursor)
+        if (searchStart === -1)
+          continue
+
+        const previousChar = searchStart > 0 ? value[searchStart - 1] : ''
+        if (searchStart > 0 && !/\s/.test(previousChar))
+          continue
+
+        if (
+          nextMatchStart === -1
+          || searchStart < nextMatchStart
+          || (searchStart === nextMatchStart && name.length > matchedName.length)
+        ) {
+          nextMatchStart = searchStart
+          matchedName = name
+        }
+      }
+
+      if (nextMatchStart === -1)
+        break
+
+      if (nextMatchStart > cursor)
+        segments.push(<span key={`text-${cursor}`}>{value.slice(cursor, nextMatchStart)}</span>)
+
+      const mentionEnd = nextMatchStart + matchedName.length + 1
+      segments.push(
+        <span key={`mention-${nextMatchStart}`} className='text-primary-600'>
+          {value.slice(nextMatchStart, mentionEnd)}
+        </span>,
+      )
+
+      hasMention = true
+      cursor = mentionEnd
+    }
+
+    if (!hasMention)
+      return value
+
+    if (cursor < value.length)
+      segments.push(<span key={`text-${cursor}`}>{value.slice(cursor)}</span>)
+
+    return segments
+  }, [value, mentionNameList])
+
+  const loadMentionableUsers = useCallback(async () => {
+    if (!appId)
+      return
+
+    const state = workflowStore.getState()
+    if (state.mentionableUsersCache[appId] !== undefined)
+      return
+
+    if (state.mentionableUsersLoading[appId])
+      return
+
+    state.setMentionableUsersLoading(appId, true)
+    try {
+      const users = await fetchMentionableUsers(appId)
+      workflowStore.getState().setMentionableUsersCache(appId, users)
+    }
+    catch (error) {
+      console.error('Failed to load mentionable users:', error)
+    }
+    finally {
+      workflowStore.getState().setMentionableUsersLoading(appId, false)
+    }
+  }, [appId, workflowStore])
+
+  useEffect(() => {
+    loadMentionableUsers()
+  }, [loadMentionableUsers])
+  const syncHighlightScroll = useCallback(() => {
+    const textarea = textareaRef.current
+    const highlightContent = highlightContentRef.current
+    if (!textarea || !highlightContent)
+      return
+
+    const { scrollTop, scrollLeft } = textarea
+    highlightContent.style.transform = `translate(${-scrollLeft}px, ${-scrollTop}px)`
+  }, [])
+
+  const evaluateContentLayout = useCallback(() => {
+    const textarea = textareaRef.current
+    if (!textarea)
+      return
+
+    const extraBottom = Math.max(0, paddingBottom - BASE_PADDING)
+    const effectiveClientHeight = textarea.clientHeight - extraBottom
+
+    if (baseTextareaHeightRef.current === null)
+      baseTextareaHeightRef.current = effectiveClientHeight
+
+    const baseHeight = baseTextareaHeightRef.current ?? effectiveClientHeight
+    const hasMultiline = effectiveClientHeight > baseHeight + 1
+    const shouldReserveVertical = isEditing ? true : hasMultiline
+
+    setShouldReserveButtonGap(shouldReserveVertical)
+    setShouldReserveHorizontalSpace(!hasMultiline)
+  }, [isEditing, paddingBottom])
+
+  const updateLayoutPadding = useCallback(() => {
+    const actionEl = actionContainerRef.current
+    const rect = actionEl?.getBoundingClientRect()
+    const rightRect = actionRightRef.current?.getBoundingClientRect()
+    let actionWidth = 0
+    if (rightRect)
+      actionWidth = Math.ceil(rightRect.width)
+    else if (rect)
+      actionWidth = Math.ceil(rect.width)
+
+    const actionHeight = rect ? Math.ceil(rect.height) : 0
+    const fallbackWidth = Math.max(0, paddingRight - BASE_PADDING)
+    const fallbackHeight = Math.max(0, paddingBottom - BASE_PADDING)
+    const effectiveWidth = actionWidth > 0 ? actionWidth : fallbackWidth
+    const effectiveHeight = actionHeight > 0 ? actionHeight : fallbackHeight
+
+    const nextRight = BASE_PADDING + (shouldReserveHorizontalSpace ? effectiveWidth : 0)
+    const nextBottom = BASE_PADDING + (shouldReserveButtonGap ? effectiveHeight : 0)
+
+    setPaddingRight(prev => (prev === nextRight ? prev : nextRight))
+    setPaddingBottom(prev => (prev === nextBottom ? prev : nextBottom))
+  }, [shouldReserveButtonGap, shouldReserveHorizontalSpace, paddingRight, paddingBottom])
+
+  const setActionContainerRef = useCallback((node: HTMLDivElement | null) => {
+    actionContainerRef.current = node
+
+    if (!isEditing)
+      actionRightRef.current = node
+    else if (!node)
+      actionRightRef.current = null
+
+    if (node && typeof window !== 'undefined')
+      window.requestAnimationFrame(() => updateLayoutPadding())
+  }, [isEditing, updateLayoutPadding])
+
+  const setActionRightRef = useCallback((node: HTMLDivElement | null) => {
+    actionRightRef.current = node
+
+    if (node && typeof window !== 'undefined')
+      window.requestAnimationFrame(() => updateLayoutPadding())
+  }, [updateLayoutPadding])
+
+  useLayoutEffect(() => {
+    syncHighlightScroll()
+  }, [value, syncHighlightScroll])
+
+  useLayoutEffect(() => {
+    evaluateContentLayout()
+  }, [value, evaluateContentLayout])
+
+  useLayoutEffect(() => {
+    updateLayoutPadding()
+  }, [updateLayoutPadding, isEditing, shouldReserveButtonGap])
+
+  useEffect(() => {
+    const handleResize = () => {
+      evaluateContentLayout()
+      updateLayoutPadding()
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [evaluateContentLayout, updateLayoutPadding])
+
+  useEffect(() => {
+    baseTextareaHeightRef.current = null
+    evaluateContentLayout()
+    setShouldReserveHorizontalSpace(!isEditing)
+  }, [isEditing, evaluateContentLayout])
+
+  const filteredMentionUsers = useMemo(() => {
+    if (!mentionQuery) return mentionUsers
+    return mentionUsers.filter(user =>
+      user.name.toLowerCase().includes(mentionQuery.toLowerCase())
+      || user.email.toLowerCase().includes(mentionQuery.toLowerCase()),
+    )
+  }, [mentionUsers, mentionQuery])
+
+  const shouldDisableMentionButton = useMemo(() => {
+    if (showMentionDropdown)
+      return true
+
+    const textarea = textareaRef.current
+    if (!textarea)
+      return false
+
+    const cursorPosition = textarea.selectionStart || 0
+    const textBeforeCursor = value.slice(0, cursorPosition)
+    return /@\w*$/.test(textBeforeCursor)
+  }, [showMentionDropdown, value])
+
+  const dropdownPosition = useMemo(() => {
+    if (!showMentionDropdown || !textareaRef.current)
+      return { x: 0, y: 0, placement: 'bottom' as const }
+
+    const textareaRect = textareaRef.current.getBoundingClientRect()
+    const dropdownHeight = 160 // max-h-40 = 10rem = 160px
+    const viewportHeight = window.innerHeight
+    const spaceBelow = viewportHeight - textareaRect.bottom
+    const spaceAbove = textareaRect.top
+
+    const shouldPlaceAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow
+
+    return {
+      x: textareaRect.left,
+      y: shouldPlaceAbove ? textareaRect.top - 4 : textareaRect.bottom + 4,
+      placement: shouldPlaceAbove ? 'top' as const : 'bottom' as const,
+    }
+  }, [showMentionDropdown])
+
+  const handleContentChange = useCallback((newValue: string) => {
+    onChange(newValue)
+
+    setTimeout(() => {
+      const cursorPosition = textareaRef.current?.selectionStart || 0
+      const textBeforeCursor = newValue.slice(0, cursorPosition)
+      const mentionMatch = textBeforeCursor.match(/@(\w*)$/)
+
+      if (mentionMatch) {
+        setMentionQuery(mentionMatch[1])
+        setMentionPosition(cursorPosition - mentionMatch[0].length)
+        setShowMentionDropdown(true)
+        setSelectedMentionIndex(0)
+      }
+      else {
+        setShowMentionDropdown(false)
+      }
+
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          evaluateContentLayout()
+          syncHighlightScroll()
+        })
+      }
+    }, 0)
+  }, [onChange, evaluateContentLayout, syncHighlightScroll])
+
+  const handleMentionButtonClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const textarea = textareaRef.current
+    if (!textarea)
+      return
+
+    const cursorPosition = textarea.selectionStart || 0
+    const textBeforeCursor = value.slice(0, cursorPosition)
+
+    if (showMentionDropdown)
+      return
+
+    if (/@\w*$/.test(textBeforeCursor))
+      return
+
+    const newContent = `${value.slice(0, cursorPosition)}@${value.slice(cursorPosition)}`
+
+    onChange(newContent)
+
+    setTimeout(() => {
+      const newCursorPos = cursorPosition + 1
+      textarea.setSelectionRange(newCursorPos, newCursorPos)
+      textarea.focus()
+
+      setMentionQuery('')
+      setMentionPosition(cursorPosition)
+      setShowMentionDropdown(true)
+      setSelectedMentionIndex(0)
+
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          evaluateContentLayout()
+          syncHighlightScroll()
+        })
+      }
+    }, 0)
+  }, [value, onChange, evaluateContentLayout, syncHighlightScroll, showMentionDropdown])
+
+  const insertMention = useCallback((user: UserProfile) => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+
+    const beforeMention = value.slice(0, mentionPosition)
+    const afterMention = value.slice(textarea.selectionStart || 0)
+
+    const needsSpaceBefore = mentionPosition > 0 && !/\s/.test(value[mentionPosition - 1])
+    const prefix = needsSpaceBefore ? ' ' : ''
+    const newContent = `${beforeMention}${prefix}@${user.name} ${afterMention}`
+
+    onChange(newContent)
+    setShowMentionDropdown(false)
+
+    const newMentionedUserIds = [...mentionedUserIds, user.id]
+    setMentionedUserIds(newMentionedUserIds)
+
+    setTimeout(() => {
+      const extraSpace = needsSpaceBefore ? 1 : 0
+      const newCursorPos = mentionPosition + extraSpace + user.name.length + 2 // (space) + @ + name + space
+      textarea.setSelectionRange(newCursorPos, newCursorPos)
+      textarea.focus()
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          evaluateContentLayout()
+          syncHighlightScroll()
+        })
+      }
+    }, 0)
+  }, [value, mentionPosition, onChange, mentionedUserIds, evaluateContentLayout, syncHighlightScroll])
+
+  const handleSubmit = useCallback(async (e?: React.MouseEvent) => {
+    if (e) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    if (value.trim()) {
+      try {
+        await onSubmit(value.trim(), mentionedUserIds)
+        setMentionedUserIds([])
+        setShowMentionDropdown(false)
+      }
+      catch (error) {
+        console.error('Failed to submit', error)
+      }
+    }
+  }, [value, mentionedUserIds, onSubmit])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    // Ignore key events during IME composition (e.g., Chinese, Japanese input)
+    if (e.nativeEvent.isComposing)
+      return
+
+    if (showMentionDropdown) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setSelectedMentionIndex(prev =>
+          prev < filteredMentionUsers.length - 1 ? prev + 1 : 0,
+        )
+      }
+      else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setSelectedMentionIndex(prev =>
+          prev > 0 ? prev - 1 : filteredMentionUsers.length - 1,
+        )
+      }
+      else if (e.key === 'Enter') {
+        e.preventDefault()
+        if (filteredMentionUsers[selectedMentionIndex])
+          insertMention(filteredMentionUsers[selectedMentionIndex])
+
+        return
+      }
+      else if (e.key === 'Escape') {
+        e.preventDefault()
+        setShowMentionDropdown(false)
+        return
+      }
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey && !showMentionDropdown) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }, [showMentionDropdown, filteredMentionUsers, selectedMentionIndex, insertMention, handleSubmit])
+
+  const resetMentionState = useCallback(() => {
+    setMentionedUserIds([])
+    setShowMentionDropdown(false)
+    setMentionQuery('')
+    setMentionPosition(0)
+    setSelectedMentionIndex(0)
+  }, [])
+
+  useEffect(() => {
+    if (!value)
+      resetMentionState()
+  }, [value, resetMentionState])
+
+  useEffect(() => {
+    if (autoFocus && textareaRef.current) {
+      const textarea = textareaRef.current
+      setTimeout(() => {
+        textarea.focus()
+        const length = textarea.value.length
+        textarea.setSelectionRange(length, length)
+      }, 0)
+    }
+  }, [autoFocus])
+
+  return (
+    <>
+      <div className={cn('relative flex items-center', className)}>
+        <div
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-0 z-0 overflow-hidden whitespace-pre-wrap break-words p-1 leading-6',
+            'body-lg-regular text-text-primary',
+          )}
+          style={{ paddingRight, paddingBottom }}
+        >
+          <div
+            ref={highlightContentRef}
+            className="min-h-full"
+            style={{ willChange: 'transform' }}
+          >
+            {highlightedValue}
+            {'​'}
+          </div>
+        </div>
+        <Textarea
+          ref={textareaRef}
+          className={cn(
+            'body-lg-regular relative z-10 w-full resize-none bg-transparent p-1 leading-6 text-transparent caret-primary-500 outline-none',
+            'placeholder:text-text-tertiary',
+          )}
+          style={{ paddingRight, paddingBottom }}
+          placeholder={resolvedPlaceholder}
+          autoFocus={autoFocus}
+          minRows={isEditing ? 4 : 1}
+          maxRows={4}
+          value={value}
+          disabled={disabled || loading}
+          onChange={e => handleContentChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onScroll={syncHighlightScroll}
+        />
+
+        {!isEditing && (
+          <div
+            ref={setActionContainerRef}
+            className="absolute bottom-0 right-1 z-20 flex items-end gap-1"
+          >
+            <div
+              className={cn(
+                'z-20 flex h-8 w-8 items-center justify-center rounded-lg transition-opacity',
+                shouldDisableMentionButton
+                  ? 'cursor-not-allowed opacity-40'
+                  : 'cursor-pointer hover:bg-state-base-hover',
+              )}
+              onClick={shouldDisableMentionButton ? undefined : handleMentionButtonClick}
+            >
+              <RiAtLine className="h-4 w-4 text-text-tertiary" />
+            </div>
+            <Button
+              className='z-20 ml-2 w-8 px-0'
+              variant='primary'
+              disabled={!value.trim() || disabled || loading}
+              onClick={handleSubmit}
+            >
+              {loading
+                ? <RiLoader2Line className='h-4 w-4 animate-spin text-components-button-primary-text' />
+                : <RiArrowUpLine className='h-4 w-4 text-components-button-primary-text' />}
+            </Button>
+          </div>
+        )}
+
+        {isEditing && (
+          <div
+            ref={setActionContainerRef}
+            className="absolute bottom-0 left-1 right-1 z-20 flex items-end justify-between"
+          >
+            <div
+              className={cn(
+                'z-20 flex h-8 w-8 items-center justify-center rounded-lg transition-opacity',
+                shouldDisableMentionButton
+                  ? 'cursor-not-allowed opacity-40'
+                  : 'cursor-pointer hover:bg-state-base-hover',
+              )}
+              onClick={shouldDisableMentionButton ? undefined : handleMentionButtonClick}
+            >
+              <RiAtLine className="h-4 w-4 text-text-tertiary" />
+            </div>
+            <div
+              ref={setActionRightRef}
+              className='flex items-center gap-2'
+            >
+              <Button variant='secondary' size='small' onClick={onCancel} disabled={loading}>
+                {t('common.operation.cancel')}
+              </Button>
+              <Button
+                variant='primary'
+                size='small'
+                disabled={loading || !value.trim()}
+                onClick={() => handleSubmit()}
+                className='gap-1'
+              >
+                {loading && <RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />}
+                <span>{t('common.operation.save')}</span>
+                {!loading && (
+                  <EnterKey className='h-4 w-4' />
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {showMentionDropdown && filteredMentionUsers.length > 0 && typeof document !== 'undefined' && createPortal(
+        <div
+          className="bg-components-panel-bg/95 fixed z-[9999] max-h-[248px] w-[280px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border shadow-lg backdrop-blur-[10px]"
+          style={{
+            left: dropdownPosition.x,
+            [dropdownPosition.placement === 'top' ? 'bottom' : 'top']: dropdownPosition.placement === 'top'
+              ? window.innerHeight - dropdownPosition.y
+              : dropdownPosition.y,
+          }}
+          data-mention-dropdown
+        >
+          {filteredMentionUsers.map((user, index) => (
+            <div
+              key={user.id}
+              className={cn(
+                'flex cursor-pointer items-center gap-2 rounded-md py-1 pl-2 pr-3 hover:bg-state-base-hover',
+                index === selectedMentionIndex && 'bg-state-base-hover',
+              )}
+              onClick={() => insertMention(user)}
+            >
+              <Avatar
+                avatar={user.avatar_url || null}
+                name={user.name}
+                size={24}
+                className="shrink-0"
+              />
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-sm font-medium text-text-primary">
+                  {user.name}
+                </div>
+                <div className="truncate text-xs text-text-tertiary">
+                  {user.email}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>,
+        document.body,
+      )}
+    </>
+  )
+})
+
+MentionInputInner.displayName = 'MentionInputInner'
+
+export const MentionInput = memo(MentionInputInner)
diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
new file mode 100644
index 0000000000..80aa02521d
--- /dev/null
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -0,0 +1,618 @@
+'use client'
+
+import type { FC, ReactNode } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { useReactFlow, useViewport } from 'reactflow'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine, RiArrowUpSLine, RiCheckboxCircleFill, RiCheckboxCircleLine, RiCloseLine, RiDeleteBinLine, RiMoreFill } from '@remixicon/react'
+import Avatar from '@/app/components/base/avatar'
+import Divider from '@/app/components/base/divider'
+import Tooltip from '@/app/components/base/tooltip'
+import InlineDeleteConfirm from '@/app/components/base/inline-delete-confirm'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import type { WorkflowCommentDetail, WorkflowCommentDetailReply } from '@/service/workflow-comment'
+import { useAppContext } from '@/context/app-context'
+import { MentionInput } from './mention-input'
+import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
+import { useStore } from '../store'
+
+type CommentThreadProps = {
+  comment: WorkflowCommentDetail
+  loading?: boolean
+  replySubmitting?: boolean
+  replyUpdating?: boolean
+  onClose: () => void
+  onDelete?: () => void
+  onResolve?: () => void
+  onPrev?: () => void
+  onNext?: () => void
+  canGoPrev?: boolean
+  canGoNext?: boolean
+  onReply?: (content: string, mentionedUserIds?: string[]) => Promise<void> | void
+  onReplyEdit?: (replyId: string, content: string, mentionedUserIds?: string[]) => Promise<void> | void
+  onReplyDelete?: (replyId: string) => void
+  onReplyDeleteDirect?: (replyId: string) => Promise<void> | void
+}
+
+const ThreadMessage: FC<{
+  authorId: string
+  authorName: string
+  avatarUrl?: string | null
+  createdAt: number
+  content: string
+  mentionableNames: string[]
+  className?: string
+}> = ({ authorId, authorName, avatarUrl, createdAt, content, mentionableNames, className }) => {
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+  const { userProfile } = useAppContext()
+  const currentUserId = userProfile?.id
+  const isCurrentUser = authorId === currentUserId
+  const userColor = isCurrentUser ? undefined : getUserColor(authorId)
+
+  const highlightedContent = useMemo<ReactNode>(() => {
+    if (!content)
+      return ''
+
+    // Extract valid user names from mentionableNames, sorted by length (longest first)
+    const normalizedNames = Array.from(new Set(mentionableNames
+      .map(name => name.trim())
+      .filter(Boolean)))
+    normalizedNames.sort((a, b) => b.length - a.length)
+
+    if (normalizedNames.length === 0)
+      return content
+
+    const segments: ReactNode[] = []
+    let hasMention = false
+    let cursor = 0
+
+    while (cursor < content.length) {
+      let nextMatchStart = -1
+      let matchedName = ''
+
+      for (const name of normalizedNames) {
+        const searchStart = content.indexOf(`@${name}`, cursor)
+        if (searchStart === -1)
+          continue
+
+        const previousChar = searchStart > 0 ? content[searchStart - 1] : ''
+        if (searchStart > 0 && !/\s/.test(previousChar))
+          continue
+
+        if (
+          nextMatchStart === -1
+          || searchStart < nextMatchStart
+          || (searchStart === nextMatchStart && name.length > matchedName.length)
+        ) {
+          nextMatchStart = searchStart
+          matchedName = name
+        }
+      }
+
+      if (nextMatchStart === -1)
+        break
+
+      if (nextMatchStart > cursor)
+        segments.push(<span key={`text-${cursor}`}>{content.slice(cursor, nextMatchStart)}</span>)
+
+      const mentionEnd = nextMatchStart + matchedName.length + 1
+      segments.push(
+        <span key={`mention-${nextMatchStart}`} className='text-primary-600'>
+          {content.slice(nextMatchStart, mentionEnd)}
+        </span>,
+      )
+      hasMention = true
+      cursor = mentionEnd
+    }
+
+    if (!hasMention)
+      return content
+
+    if (cursor < content.length)
+      segments.push(<span key={`text-${cursor}`}>{content.slice(cursor)}</span>)
+
+    return segments
+  }, [content, mentionableNames])
+
+  return (
+    <div className={cn('flex gap-3 pt-1', className)}>
+      <div className='shrink-0'>
+        <Avatar
+          name={authorName}
+          avatar={avatarUrl || null}
+          size={24}
+          className={cn('h-8 w-8 rounded-full')}
+          backgroundColor={userColor}
+        />
+      </div>
+      <div className='min-w-0 flex-1 pb-4 text-text-primary last:pb-0'>
+        <div className='flex flex-wrap items-center gap-x-2 gap-y-1'>
+          <span className='system-sm-medium text-text-primary'>{authorName}</span>
+          <span className='system-2xs-regular text-text-tertiary'>{formatTimeFromNow(createdAt * 1000)}</span>
+        </div>
+        <div className='system-sm-regular mt-1 whitespace-pre-wrap break-words text-text-secondary'>
+          {highlightedContent}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const CommentThread: FC<CommentThreadProps> = memo(({
+  comment,
+  loading = false,
+  replySubmitting = false,
+  replyUpdating = false,
+  onClose,
+  onDelete,
+  onResolve,
+  onPrev,
+  onNext,
+  canGoPrev,
+  canGoNext,
+  onReply,
+  onReplyEdit,
+  onReplyDelete,
+  onReplyDeleteDirect,
+}) => {
+  const params = useParams()
+  const appId = params.appId as string
+  const { flowToScreenPosition } = useReactFlow()
+  const viewport = useViewport()
+  const { userProfile } = useAppContext()
+  const { t } = useTranslation()
+  const [replyContent, setReplyContent] = useState('')
+  const [activeReplyMenuId, setActiveReplyMenuId] = useState<string | null>(null)
+  const [editingReply, setEditingReply] = useState<{ id: string; content: string }>({ id: '', content: '' })
+  const [deletingReplyId, setDeletingReplyId] = useState<string | null>(null)
+  const [isSubmittingEdit, setIsSubmittingEdit] = useState(false)
+
+  // Focus management refs
+  const replyInputRef = useRef<HTMLTextAreaElement>(null)
+  const threadRef = useRef<HTMLDivElement>(null)
+
+  // Get mentionable users from store
+  const mentionUsersFromStore = useStore(state => (
+    appId ? state.mentionableUsersCache[appId] : undefined
+  ))
+  const mentionUsers = mentionUsersFromStore ?? []
+
+  // Extract all mentionable names for highlighting
+  const mentionableNames = useMemo(() => {
+    const names = mentionUsers
+      .map(user => user.name?.trim())
+      .filter((name): name is string => Boolean(name))
+    return Array.from(new Set(names))
+  }, [mentionUsers])
+
+  useEffect(() => {
+    setReplyContent('')
+  }, [comment.id])
+
+  // P0: Auto-focus reply input when thread opens or comment changes
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (replyInputRef.current && !editingReply.id && onReply)
+        replyInputRef.current.focus()
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [comment.id, editingReply.id, onReply])
+
+  // P2: Handle Esc key to close thread
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't intercept if actively editing a reply
+      if (editingReply.id) return
+
+      // Don't intercept if mention dropdown is open (let MentionInput handle it)
+      if (document.querySelector('[data-mention-dropdown]')) return
+
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        onClose()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [onClose, editingReply.id])
+
+  const handleReplySubmit = useCallback(async (content: string, mentionedUserIds: string[]) => {
+    if (!onReply || replySubmitting) return
+
+    setReplyContent('')
+
+    try {
+      await onReply(content, mentionedUserIds)
+
+      // P0: Restore focus to reply input after successful submission
+      setTimeout(() => {
+        replyInputRef.current?.focus()
+      }, 0)
+    }
+    catch (error) {
+      console.error('Failed to send reply', error)
+      setReplyContent(content)
+    }
+  }, [onReply, replySubmitting])
+
+  const screenPosition = useMemo(() => {
+    return flowToScreenPosition({
+      x: comment.position_x,
+      y: comment.position_y,
+    })
+  }, [comment.position_x, comment.position_y, viewport.x, viewport.y, viewport.zoom, flowToScreenPosition])
+  const workflowContainerRect = typeof document !== 'undefined'
+    ? document.getElementById('workflow-container')?.getBoundingClientRect()
+    : null
+  const containerLeft = workflowContainerRect?.left ?? 0
+  const containerTop = workflowContainerRect?.top ?? 0
+  const canvasPosition = useMemo(() => ({
+    x: screenPosition.x - containerLeft,
+    y: screenPosition.y - containerTop,
+  }), [screenPosition.x, screenPosition.y, containerLeft, containerTop])
+
+  const handleStartEdit = useCallback((reply: WorkflowCommentDetailReply) => {
+    setEditingReply({ id: reply.id, content: reply.content })
+    setActiveReplyMenuId(null)
+  }, [])
+
+  const handleCancelEdit = useCallback(() => {
+    setEditingReply({ id: '', content: '' })
+
+    // P1: Restore focus to reply input after canceling edit
+    setTimeout(() => {
+      replyInputRef.current?.focus()
+    }, 0)
+  }, [])
+
+  const handleEditSubmit = useCallback(async (content: string, mentionedUserIds: string[]) => {
+    if (!onReplyEdit || !editingReply) return
+    const trimmed = content.trim()
+    if (!trimmed) return
+
+    setIsSubmittingEdit(true)
+    try {
+      await onReplyEdit(editingReply.id, trimmed, mentionedUserIds)
+      setEditingReply({ id: '', content: '' })
+
+      // P1: Restore focus to reply input after saving edit
+      setTimeout(() => {
+        replyInputRef.current?.focus()
+      }, 0)
+    }
+    catch (error) {
+      console.error('Failed to edit reply', error)
+    }
+    finally {
+      setIsSubmittingEdit(false)
+    }
+  }, [editingReply, onReplyEdit])
+
+  const replies = comment.replies || []
+  const messageListRef = useRef<HTMLDivElement>(null)
+  const previousReplyCountRef = useRef<number | undefined>(undefined)
+  const previousCommentIdRef = useRef<string | undefined>(undefined)
+
+  // Close dropdown when scrolling
+  useEffect(() => {
+    const container = messageListRef.current
+    if (!container || !activeReplyMenuId)
+      return
+
+    const handleScroll = () => {
+      setActiveReplyMenuId(null)
+    }
+
+    container.addEventListener('scroll', handleScroll)
+    return () => container.removeEventListener('scroll', handleScroll)
+  }, [activeReplyMenuId])
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    const container = messageListRef.current
+    if (!container)
+      return
+
+    const isFirstRender = previousCommentIdRef.current === undefined
+    const isNewComment = comment.id !== previousCommentIdRef.current
+    const hasNewReply = previousReplyCountRef.current !== undefined
+      && replies.length > previousReplyCountRef.current
+
+    // Scroll on first render, new comment, or new reply
+    if (isFirstRender || isNewComment || hasNewReply) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: 'smooth',
+      })
+    }
+
+    previousCommentIdRef.current = comment.id
+    previousReplyCountRef.current = replies.length
+  }, [comment.id, replies.length])
+
+  return (
+    <div
+      className='absolute z-50 w-[360px] max-w-[360px]'
+      style={{
+        left: canvasPosition.x + 40,
+        top: canvasPosition.y,
+        transform: 'translateY(-20%)',
+      }}
+    >
+      <div
+        ref={threadRef}
+        className='relative flex h-[360px] flex-col overflow-hidden rounded-2xl border border-components-panel-border bg-components-panel-bg shadow-xl'
+        role='dialog'
+        aria-modal='true'
+        aria-labelledby='comment-thread-title'
+      >
+        <div className='flex items-center justify-between rounded-t-2xl border-b border-components-panel-border bg-components-panel-bg-blur px-4 py-3'>
+          <div
+            id='comment-thread-title'
+            className='font-semibold uppercase text-text-primary'
+          >
+            {t('workflow.comments.panelTitle')}
+          </div>
+          <div className='flex items-center gap-1'>
+            <Tooltip
+              popupContent={t('workflow.comments.aria.deleteComment')}
+              position='top'
+              popupClassName='!px-2 !py-1.5'
+            >
+              <button
+                type='button'
+                disabled={loading}
+                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                onClick={onDelete}
+                aria-label={t('workflow.comments.aria.deleteComment')}
+              >
+                <RiDeleteBinLine className='h-4 w-4' />
+              </button>
+            </Tooltip>
+            <Tooltip
+              popupContent={t('workflow.comments.aria.resolveComment')}
+              position='top'
+              popupClassName='!px-2 !py-1.5'
+            >
+              <button
+                type='button'
+                disabled={comment.resolved || loading}
+                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                onClick={onResolve}
+                aria-label={t('workflow.comments.aria.resolveComment')}
+              >
+                {comment.resolved ? <RiCheckboxCircleFill className='h-4 w-4' /> : <RiCheckboxCircleLine className='h-4 w-4' />}
+              </button>
+            </Tooltip>
+            <Divider type='vertical' className='h-3.5' />
+            <Tooltip
+              popupContent={t('workflow.comments.aria.previousComment')}
+              position='top'
+              popupClassName='!px-2 !py-1.5'
+            >
+              <button
+                type='button'
+                disabled={!canGoPrev || loading}
+                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                onClick={onPrev}
+                aria-label={t('workflow.comments.aria.previousComment')}
+              >
+                <RiArrowUpSLine className='h-4 w-4' />
+              </button>
+            </Tooltip>
+            <Tooltip
+              popupContent={t('workflow.comments.aria.nextComment')}
+              position='top'
+              popupClassName='!px-2 !py-1.5'
+            >
+              <button
+                type='button'
+                disabled={!canGoNext || loading}
+                className={cn('flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled')}
+                onClick={onNext}
+                aria-label={t('workflow.comments.aria.nextComment')}
+              >
+                <RiArrowDownSLine className='h-4 w-4' />
+              </button>
+            </Tooltip>
+            <button
+              type='button'
+              className='flex h-6 w-6 items-center justify-center rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
+              onClick={onClose}
+              aria-label={t('workflow.comments.aria.closeComment')}
+            >
+              <RiCloseLine className='h-4 w-4' />
+            </button>
+          </div>
+        </div>
+        <div
+          ref={messageListRef}
+          className='relative mt-2 flex-1 overflow-y-auto px-4 pb-4'
+        >
+          <div className='-mx-4 rounded-lg px-4 py-2 transition-colors hover:bg-components-panel-on-panel-item-bg-hover'>
+            <ThreadMessage
+              authorId={comment.created_by_account?.id || ''}
+              authorName={comment.created_by_account?.name || t('workflow.comments.fallback.user')}
+              avatarUrl={comment.created_by_account?.avatar_url || null}
+              createdAt={comment.created_at}
+              content={comment.content}
+              mentionableNames={mentionableNames}
+            />
+          </div>
+          {replies.length > 0 && (
+            <div className='mt-2 space-y-3 pt-3'>
+              {replies.map((reply) => {
+                const isReplyEditing = editingReply?.id === reply.id
+                const isOwnReply = reply.created_by_account?.id === userProfile?.id
+                return (
+                  <div
+                    key={reply.id}
+                    className='group relative -mx-4 rounded-lg px-4 py-2 transition-colors hover:bg-components-panel-on-panel-item-bg-hover'
+                  >
+                    {isOwnReply && !isReplyEditing && (
+                      <PortalToFollowElem
+                        placement='bottom-end'
+                        open={activeReplyMenuId === reply.id}
+                        onOpenChange={(open) => {
+                          if (!open) {
+                            setDeletingReplyId(null)
+                            setActiveReplyMenuId(null)
+                          }
+                        }}
+                      >
+                        <div
+                          className={cn(
+                            'absolute right-1 top-1 gap-1',
+                            activeReplyMenuId === reply.id ? 'flex' : 'hidden group-hover:flex',
+                          )}
+                          data-reply-menu
+                        >
+                          <PortalToFollowElemTrigger asChild>
+                            <button
+                              type='button'
+                              className='flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                setDeletingReplyId(null)
+                                setActiveReplyMenuId(prev => prev === reply.id ? null : reply.id)
+                              }}
+                              aria-label={t('workflow.comments.aria.replyActions')}
+                            >
+                              <RiMoreFill className='h-4 w-4' />
+                            </button>
+                          </PortalToFollowElemTrigger>
+                        </div>
+                        <PortalToFollowElemContent
+                          className='z-[100] w-36 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[10px]'
+                          data-reply-menu
+                        >
+                          {/* Menu buttons - hidden when showing delete confirm */}
+                          <div className={cn(deletingReplyId === reply.id ? 'hidden' : 'block')}>
+                            <button
+                              className='flex w-full items-center justify-start rounded-t-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover'
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                handleStartEdit(reply)
+                              }}
+                            >
+                              {t('workflow.comments.actions.editReply')}
+                            </button>
+                            <button
+                              className='text-negative flex w-full items-center justify-start rounded-b-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover'
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                e.preventDefault()
+                                if (onReplyDeleteDirect) {
+                                  setDeletingReplyId(reply.id)
+                                }
+                                else {
+                                  setActiveReplyMenuId(null)
+                                  onReplyDelete?.(reply.id)
+                                }
+                              }}
+                            >
+                              {t('workflow.comments.actions.deleteReply')}
+                            </button>
+                          </div>
+
+                          {/* Delete confirmation - shown when deletingReplyId matches */}
+                          <div className={cn(deletingReplyId === reply.id ? 'block' : 'hidden')}>
+                            <InlineDeleteConfirm
+                              title={t('workflow.comments.actions.deleteReply')}
+                              onConfirm={() => {
+                                setDeletingReplyId(null)
+                                setActiveReplyMenuId(null)
+                                onReplyDeleteDirect?.(reply.id)
+                              }}
+                              onCancel={() => {
+                                setDeletingReplyId(null)
+                              }}
+                              className='m-0 w-full border-0 shadow-none'
+                            />
+                          </div>
+                        </PortalToFollowElemContent>
+                      </PortalToFollowElem>
+                    )}
+                    {isReplyEditing ? (
+                      <div className='flex gap-3 pt-1'>
+                        <div className='shrink-0'>
+                          <Avatar
+                            name={reply.created_by_account?.name || t('workflow.comments.fallback.user')}
+                            avatar={reply.created_by_account?.avatar_url || null}
+                            size={24}
+                            className='h-8 w-8 rounded-full'
+                          />
+                        </div>
+                        <div className='min-w-0 flex-1'>
+                          <div className='rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1 shadow-md backdrop-blur-[10px]'>
+                            <MentionInput
+                              value={editingReply?.content ?? ''}
+                              onChange={newContent => setEditingReply(prev => prev ? { ...prev, content: newContent } : prev)}
+                              onSubmit={handleEditSubmit}
+                              onCancel={handleCancelEdit}
+                              placeholder={t('workflow.comments.placeholder.editReply')}
+                              disabled={loading}
+                              loading={replyUpdating || isSubmittingEdit}
+                              isEditing={true}
+                              className="system-sm-regular"
+                              autoFocus
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <ThreadMessage
+                        authorId={reply.created_by_account?.id || ''}
+                        authorName={reply.created_by_account?.name || t('workflow.comments.fallback.user')}
+                        avatarUrl={reply.created_by_account?.avatar_url || null}
+                        createdAt={reply.created_at}
+                        content={reply.content}
+                        mentionableNames={mentionableNames}
+                      />
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+        {loading && (
+          <div className='bg-components-panel-bg/70 absolute inset-0 z-30 flex items-center justify-center text-sm text-text-tertiary'>
+            {t('workflow.comments.loading')}
+          </div>
+        )}
+        {onReply && (
+          <div className='border-t border-components-panel-border px-4 py-3'>
+            <div className='flex items-center gap-3'>
+              <Avatar
+                avatar={userProfile?.avatar_url || null}
+                name={userProfile?.name || t('common.you')}
+                size={24}
+                className='h-8 w-8'
+              />
+              <div className='flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-[2px] shadow-sm'>
+                <MentionInput
+                  ref={replyInputRef}
+                  value={replyContent}
+                  onChange={setReplyContent}
+                  onSubmit={handleReplySubmit}
+                  placeholder={t('workflow.comments.placeholder.reply')}
+                  disabled={loading}
+                  loading={replySubmitting}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+})
+
+CommentThread.displayName = 'CommentThread'
diff --git a/web/app/components/workflow/features.tsx b/web/app/components/workflow/features.tsx
index b54ffdf167..fd8a63ba97 100644
--- a/web/app/components/workflow/features.tsx
+++ b/web/app/components/workflow/features.tsx
@@ -7,21 +7,23 @@ import { useStore } from './store'
 import {
   useIsChatMode,
   useNodesReadOnly,
-  useNodesSyncDraft,
 } from './hooks'
 import { type CommonNodeType, type InputVar, InputVarType, type Node } from './types'
 import useConfig from './nodes/start/use-config'
 import type { StartNodeType } from './nodes/start/types'
 import type { PromptVariable } from '@/models/debug'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { type WorkflowDraftFeaturesPayload, updateFeatures } from '@/service/workflow'
 
 const Features = () => {
   const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
+  const appId = useStore(s => s.appId)
   const isChatMode = useIsChatMode()
   const { nodesReadOnly } = useNodesReadOnly()
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const featuresStore = useFeaturesStore()
   const nodes = useNodes<CommonNodeType>()
-
   const startNode = nodes.find(node => node.data.type === 'start')
   const { id, data } = startNode as Node<StartNodeType>
   const { handleAddVariable } = useConfig(id, data)
@@ -39,10 +41,45 @@ const Features = () => {
     handleAddVariable(startNodeVariable)
   }
 
-  const handleFeaturesChange = useCallback(() => {
-    handleSyncWorkflowDraft()
+  const handleFeaturesChange = useCallback(async () => {
+    if (!appId || !featuresStore) return
+
+    try {
+      const currentFeatures = featuresStore.getState().features
+
+      // Transform features to match the expected server format (same as doSyncWorkflowDraft)
+      const transformedFeatures: WorkflowDraftFeaturesPayload = {
+        opening_statement: currentFeatures.opening?.enabled ? (currentFeatures.opening?.opening_statement || '') : '',
+        suggested_questions: currentFeatures.opening?.enabled ? (currentFeatures.opening?.suggested_questions || []) : [],
+        suggested_questions_after_answer: currentFeatures.suggested,
+        text_to_speech: currentFeatures.text2speech,
+        speech_to_text: currentFeatures.speech2text,
+        retriever_resource: currentFeatures.citation,
+        sensitive_word_avoidance: currentFeatures.moderation,
+        file_upload: currentFeatures.file,
+      }
+
+      console.log('Sending features to server:', transformedFeatures)
+
+      await updateFeatures({
+        appId,
+        features: transformedFeatures,
+      })
+
+      // Emit update event to other connected clients
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+    }
+    catch (error) {
+      console.error('Failed to update features:', error)
+    }
+
     setShowFeaturesPanel(true)
-  }, [handleSyncWorkflowDraft, setShowFeaturesPanel])
+  }, [appId, featuresStore, setShowFeaturesPanel])
 
   return (
     <NewFeaturePanel
diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 20fdafaff5..81e5e45d45 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -18,6 +18,7 @@ import RunAndHistory from './run-and-history'
 import EditingTitle from './editing-title'
 import EnvButton from './env-button'
 import VersionHistoryButton from './version-history-button'
+import OnlineUsers from './online-users'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import ScrollToSelectedNodeButton from './scroll-to-selected-node-button'
 import GlobalVariableButton from './global-variable-button'
@@ -72,8 +73,11 @@ const HeaderInNormal = ({
         <ScrollToSelectedNodeButton />
       </div>
       <div className='flex items-center gap-2'>
+        <OnlineUsers />
         {components?.left}
         <Divider type='vertical' className='mx-auto h-3.5' />
+        <EnvButton disabled={nodesReadOnly} />
+        <Divider type='vertical' className='mx-auto h-3.5' />
         <RunAndHistory {...runAndHistoryProps} />
         <div className='shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]'>
           {components?.chatVariableTrigger}
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index 3844232531..0f0bdcc86a 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -19,8 +19,10 @@ import RestoringTitle from './restoring-title'
 import Button from '@/app/components/base/button'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { useHooksStore } from '../hooks-store'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import useTheme from '@/hooks/use-theme'
 import cn from '@/utils/classnames'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
 
 export type HeaderInRestoringProps = {
   onRestoreSettled?: () => void
@@ -31,6 +33,7 @@ const HeaderInRestoring = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
+  const appDetail = useAppStore.getState().appDetail
   const configsMap = useHooksStore(s => s.configsMap)
   const invalidAllLastRun = useInvalidAllLastRun(configsMap?.flowType, configsMap?.flowId)
   const {
@@ -60,6 +63,9 @@ const HeaderInRestoring = ({
           type: 'success',
           message: t('workflow.versionHistory.action.restoreSuccess'),
         })
+        // Notify other collaboration clients about the workflow restore
+        if (appDetail)
+          collaborationManager.emitWorkflowUpdate(appDetail.id)
       },
       onError: () => {
         Toast.notify({
@@ -70,10 +76,10 @@ const HeaderInRestoring = ({
       onSettled: () => {
         onRestoreSettled?.()
       },
-    })
+    }, true) // Enable forceUpload for restore operation
     deleteAllInspectVars()
     invalidAllLastRun()
-  }, [setShowWorkflowVersionHistoryPanel, workflowStore, handleSyncWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled])
+  }, [setShowWorkflowVersionHistoryPanel, workflowStore, handleSyncWorkflowDraft, deleteAllInspectVars, invalidAllLastRun, t, onRestoreSettled, appDetail])
 
   return (
     <>
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
new file mode 100644
index 0000000000..8bcbcf0fea
--- /dev/null
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -0,0 +1,238 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useReactFlow } from 'reactflow'
+import Avatar from '@/app/components/base/avatar'
+import { useCollaboration } from '../collaboration/hooks/use-collaboration'
+import { useStore } from '../store'
+import cn from '@/utils/classnames'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { getUserColor } from '../collaboration/utils/user-color'
+import Tooltip from '@/app/components/base/tooltip'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useAppContext } from '@/context/app-context'
+import { getAvatar } from '@/service/common'
+
+const useAvatarUrls = (users: any[]) => {
+  const [avatarUrls, setAvatarUrls] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    const fetchAvatars = async () => {
+      const newAvatarUrls: Record<string, string> = {}
+
+      await Promise.all(
+        users.map(async (user) => {
+          if (user.avatar) {
+            try {
+              const response = await getAvatar({ avatar: user.avatar })
+              newAvatarUrls[user.sid] = response.avatar_url
+            }
+            catch (error) {
+              console.error('Failed to fetch avatar:', error)
+              newAvatarUrls[user.sid] = user.avatar
+            }
+          }
+        }),
+      )
+
+      setAvatarUrls(newAvatarUrls)
+    }
+
+    if (users.length > 0)
+      fetchAvatars()
+  }, [users])
+
+  return avatarUrls
+}
+
+const OnlineUsers = () => {
+  const appId = useStore(s => s.appId)
+  const { onlineUsers, cursors, isEnabled: isCollaborationEnabled } = useCollaboration(appId as string)
+  const { userProfile } = useAppContext()
+  const reactFlow = useReactFlow()
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const avatarUrls = useAvatarUrls(onlineUsers || [])
+
+  const currentUserId = userProfile?.id
+
+  const renderDisplayName = (
+    user: any,
+    baseClassName: string,
+    suffixClassName: string,
+  ) => {
+    const baseName = user.username || 'User'
+    const isCurrentUser = user.user_id === currentUserId
+
+    return (
+      <span className={cn('inline-flex items-center gap-1', baseClassName)}>
+        <span>{baseName}</span>
+        {isCurrentUser && (
+          <span className={suffixClassName}>
+            (You)
+          </span>
+        )}
+      </span>
+    )
+  }
+
+  // Function to jump to user's cursor position
+  const jumpToUserCursor = (userId: string) => {
+    const cursor = cursors[userId]
+    if (!cursor) return
+
+    // Convert world coordinates to center the view on the cursor
+    reactFlow.setCenter(cursor.x, cursor.y, { zoom: 1, duration: 800 })
+  }
+
+  if (!isCollaborationEnabled || !onlineUsers || onlineUsers.length === 0)
+    return null
+
+  // Display logic:
+  // 1-3 users: show all avatars
+  // 4+ users: show 2 avatars + count + arrow
+  const shouldShowCount = onlineUsers.length >= 4
+  const maxVisible = shouldShowCount ? 2 : 3
+  const visibleUsers = onlineUsers.slice(0, maxVisible)
+  const remainingCount = onlineUsers.length - maxVisible
+
+  const getAvatarUrl = (user: any) => {
+    return avatarUrls[user.sid] || user.avatar
+  }
+
+  const hasCounter = remainingCount > 0
+
+  return (
+    <div
+      className={cn(
+        'flex h-8 items-center rounded-full border-[0.5px] border-components-panel-border',
+        'bg-components-panel-bg py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]',
+        hasCounter ? 'min-w-[87px] gap-px pl-1 pr-1.5' : 'gap-1 px-1.5',
+      )}
+    >
+      <div className="flex h-6 items-center">
+        <div className="flex items-center">
+          {visibleUsers.map((user, index) => {
+            const isCurrentUser = user.user_id === currentUserId
+            const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+            return (
+              <Tooltip
+                key={`${user.sid}-${index}`}
+                popupContent={renderDisplayName(
+                  user,
+                  'system-xs-medium text-text-secondary',
+                  'text-text-quaternary',
+                )}
+                position="bottom"
+                triggerMethod="hover"
+                needsDelay={false}
+                asChild
+                popupClassName="flex h-[28px] w-[85px] items-center justify-center gap-1 rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
+                noDecoration
+              >
+                <div
+                  className={cn(
+                    'relative flex size-6 items-center justify-center',
+                    index > 0 && '-ml-1.5',
+                    !isCurrentUser && 'cursor-pointer transition-transform hover:scale-110',
+                  )}
+                  style={{ zIndex: visibleUsers.length - index }}
+                  onClick={() => !isCurrentUser && jumpToUserCursor(user.user_id)}
+                >
+                  <Avatar
+                    name={user.username || 'User'}
+                    avatar={getAvatarUrl(user)}
+                    size={24}
+                    className="ring-1 ring-components-panel-bg"
+                    backgroundColor={userColor}
+                  />
+                </div>
+              </Tooltip>
+            )
+          })}
+          {remainingCount > 0 && (
+            <PortalToFollowElem
+              open={dropdownOpen}
+              onOpenChange={setDropdownOpen}
+              placement="bottom-start"
+              offset={{
+                mainAxis: 8,
+                crossAxis: -48,
+              }}
+            >
+              <PortalToFollowElemTrigger
+                onClick={() => setDropdownOpen(prev => !prev)}
+                asChild
+              >
+                <div className="flex items-center gap-1">
+                  <div
+                    className={cn(
+                      'flex h-6 w-6 cursor-pointer select-none items-center justify-center rounded-full bg-components-icon-bg-midnight-solid text-[10px] font-semibold uppercase leading-[12px] text-white ring-1 ring-components-panel-bg',
+                      visibleUsers.length > 0 && '-ml-1',
+                    )}
+                  >
+                    +{remainingCount}
+                  </div>
+                  <ChevronDownIcon className="h-3 w-3 cursor-pointer text-gray-500" />
+                </div>
+              </PortalToFollowElemTrigger>
+              <PortalToFollowElemContent
+                className="z-[9999]"
+              >
+                <div
+                  className={cn(
+                    'mt-1.5',
+                    'flex flex-col',
+                    'max-h-[200px] w-[240px] overflow-y-auto',
+                    'rounded-xl border-[0.5px] border-components-panel-border',
+                    'bg-components-panel-bg-blur p-1',
+                    'shadow-lg shadow-shadow-shadow-5',
+                    'backdrop-blur-[10px]',
+                  )}
+                >
+                  {onlineUsers.map((user) => {
+                    const isCurrentUser = user.user_id === currentUserId
+                    const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+                    return (
+                      <div
+                        key={user.sid}
+                        className={cn(
+                          'flex items-center gap-2 rounded-lg px-3 py-1.5',
+                          !isCurrentUser && 'cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover',
+                        )}
+                        onClick={() => {
+                          if (!isCurrentUser) {
+                            jumpToUserCursor(user.user_id)
+                            setDropdownOpen(false)
+                          }
+                        }}
+                      >
+                        <div className="relative">
+                          <Avatar
+                            name={user.username || 'User'}
+                            avatar={getAvatarUrl(user)}
+                            size={24}
+                            backgroundColor={userColor}
+                          />
+                        </div>
+                        {renderDisplayName(
+                          user,
+                          'system-xs-medium text-text-secondary',
+                          'text-text-tertiary',
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </PortalToFollowElemContent>
+            </PortalToFollowElem>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OnlineUsers
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index fa276a67d3..2e3ea8bffd 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -6,27 +6,39 @@ import {
   RiArrowGoForwardFill,
 } from '@remixicon/react'
 import TipPopup from '../operator/tip-popup'
-import { useWorkflowHistoryStore } from '../workflow-history-store'
 import Divider from '../../base/divider'
 import { useNodesReadOnly } from '@/app/components/workflow/hooks'
 import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
 import classNames from '@/utils/classnames'
 
 export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
 const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
   const { t } = useTranslation()
-  const { store } = useWorkflowHistoryStore()
   const [buttonsDisabled, setButtonsDisabled] = useState({ undo: true, redo: true })
 
   useEffect(() => {
-    const unsubscribe = store.temporal.subscribe((state) => {
+    // Update button states based on Loro's UndoManager
+    const updateButtonStates = () => {
       setButtonsDisabled({
-        undo: state.pastStates.length === 0,
-        redo: state.futureStates.length === 0,
+        undo: !collaborationManager.canUndo(),
+        redo: !collaborationManager.canRedo(),
+      })
+    }
+
+    // Initial state
+    updateButtonStates()
+
+    // Listen for undo/redo state changes
+    const unsubscribe = collaborationManager.onUndoRedoStateChange((state) => {
+      setButtonsDisabled({
+        undo: !state.canUndo,
+        redo: !state.canRedo,
       })
     })
+
     return () => unsubscribe()
-  }, [store])
+  }, [])
 
   const { nodesReadOnly } = useNodesReadOnly()
 
diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts
index 3e205f9521..7b1468990c 100644
--- a/web/app/components/workflow/hooks-store/store.ts
+++ b/web/app/components/workflow/hooks-store/store.ts
@@ -32,8 +32,9 @@ export type CommonHooksFnMap = {
     callback?: {
       onSuccess?: () => void
       onError?: () => void
-      onSettled?: () => void,
+      onSettled?: () => void
     },
+    forceUpload?: boolean,
   ) => Promise<void>
   syncWorkflowDraftWhenPageClose: () => void
   handleRefreshWorkflowDraft: () => void
diff --git a/web/app/components/workflow/hooks/index.ts b/web/app/components/workflow/hooks/index.ts
index 1131836b35..8f9967399a 100644
--- a/web/app/components/workflow/hooks/index.ts
+++ b/web/app/components/workflow/hooks/index.ts
@@ -24,3 +24,4 @@ export * from './use-set-workflow-vars-with-value'
 export * from './use-workflow-search'
 export * from './use-auto-generate-webhook-url'
 export * from './use-serial-async-callback'
+export * from './use-workflow-comment'
diff --git a/web/app/components/workflow/hooks/use-checklist.ts b/web/app/components/workflow/hooks/use-checklist.ts
index 8c4ec7299e..2fec64bbe9 100644
--- a/web/app/components/workflow/hooks/use-checklist.ts
+++ b/web/app/components/workflow/hooks/use-checklist.ts
@@ -157,6 +157,9 @@ export const useChecklist = (nodes: Node[], edges: Edge[]) => {
         const checkData = getCheckData(node.data)
         const validator = nodesExtraData?.[node.data.type as BlockEnum]?.checkValid
         let errorMessage = validator ? validator(checkData, t, moreDataForCheckValid).errorMessage : undefined
+        // temp fix nodeMetaData is undefined
+        // const nodeMetaData = nodesExtraData?.[node.data.type]
+        // let { errorMessage } = nodeMetaData?.checkValid ? nodeMetaData.checkValid(checkData, t, moreDataForCheckValid) : { errorMessage: undefined }
 
         if (!errorMessage) {
           const availableVars = map[node.id].availableVars
diff --git a/web/app/components/workflow/hooks/use-collaborative-workflow.ts b/web/app/components/workflow/hooks/use-collaborative-workflow.ts
new file mode 100644
index 0000000000..fe032d22bc
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-collaborative-workflow.ts
@@ -0,0 +1,84 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import type { Edge, Node } from '../types'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
+
+const sanitizeNodeForBroadcast = (node: Node): Node => {
+  if (!node.data)
+    return node
+
+  if (!Object.prototype.hasOwnProperty.call(node.data, 'selected'))
+    return node
+
+  const sanitizedData = { ...node.data }
+  delete (sanitizedData as Record<string, unknown>).selected
+
+  return {
+    ...node,
+    data: sanitizedData,
+  }
+}
+
+const sanitizeEdgeForBroadcast = (edge: Edge): Edge => {
+  if (!edge.data)
+    return edge
+
+  if (!Object.prototype.hasOwnProperty.call(edge.data, '_connectedNodeIsSelected'))
+    return edge
+
+  const sanitizedData = { ...edge.data }
+  delete (sanitizedData as Record<string, unknown>)._connectedNodeIsSelected
+
+  return {
+    ...edge,
+    data: sanitizedData,
+  }
+}
+
+export const useCollaborativeWorkflow = () => {
+  const store = useStoreApi()
+  const { setNodes: collabSetNodes, setEdges: collabSetEdges } = collaborationManager
+
+  const setNodes = useCallback((newNodes: Node[], shouldBroadcast: boolean = true) => {
+    const { getNodes, setNodes: reactFlowSetNodes } = store.getState()
+    if (shouldBroadcast) {
+      const oldNodes = getNodes()
+      collabSetNodes(
+        oldNodes.map(sanitizeNodeForBroadcast),
+        newNodes.map(sanitizeNodeForBroadcast),
+      )
+    }
+    reactFlowSetNodes(newNodes)
+  }, [store, collabSetNodes])
+
+  const setEdges = useCallback((newEdges: Edge[], shouldBroadcast: boolean = true) => {
+    const { edges, setEdges: reactFlowSetEdges } = store.getState()
+    if (shouldBroadcast) {
+      collabSetEdges(
+        edges.map(sanitizeEdgeForBroadcast),
+        newEdges.map(sanitizeEdgeForBroadcast),
+      )
+    }
+
+    reactFlowSetEdges(newEdges)
+  }, [store, collabSetEdges])
+
+  const collaborativeStore = useCallback(() => {
+    const state = store.getState()
+    return {
+
+      nodes: state.getNodes(),
+      edges: state.edges,
+
+      setNodes,
+      setEdges,
+
+    }
+  }, [store, setNodes, setEdges])
+
+  return {
+    getState: collaborativeStore,
+    setNodes,
+    setEdges,
+  }
+}
diff --git a/web/app/components/workflow/hooks/use-edges-interactions.ts b/web/app/components/workflow/hooks/use-edges-interactions.ts
index 297535ac24..d19709269c 100644
--- a/web/app/components/workflow/hooks/use-edges-interactions.ts
+++ b/web/app/components/workflow/hooks/use-edges-interactions.ts
@@ -4,9 +4,7 @@ import type {
   EdgeMouseHandler,
   OnEdgesChange,
 } from 'reactflow'
-import {
-  useStoreApi,
-} from 'reactflow'
+
 import type {
   Node,
 } from '../types'
@@ -14,61 +12,55 @@ import { getNodesConnectedSourceOrTargetHandleIdsMap } from '../utils'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useNodesReadOnly } from './use-workflow'
 import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 
 export const useEdgesInteractions = () => {
-  const store = useStoreApi()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { saveStateToHistory } = useWorkflowHistory()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const handleEdgeEnter = useCallback<EdgeMouseHandler>((_, edge) => {
     if (getNodesReadOnly())
       return
 
-    const {
-      edges,
-      setEdges,
-    } = store.getState()
+    const { edges, setEdges } = collaborativeWorkflow.getState()
     const newEdges = produce(edges, (draft) => {
       const currentEdge = draft.find(e => e.id === edge.id)!
 
       currentEdge.data._hovering = true
     })
-    setEdges(newEdges)
-  }, [store, getNodesReadOnly])
+    setEdges(newEdges, false)
+  }, [collaborativeWorkflow, getNodesReadOnly])
 
   const handleEdgeLeave = useCallback<EdgeMouseHandler>((_, edge) => {
     if (getNodesReadOnly())
       return
 
-    const {
-      edges,
-      setEdges,
-    } = store.getState()
+    const { edges, setEdges } = collaborativeWorkflow.getState()
     const newEdges = produce(edges, (draft) => {
       const currentEdge = draft.find(e => e.id === edge.id)!
 
       currentEdge.data._hovering = false
     })
-    setEdges(newEdges)
-  }, [store, getNodesReadOnly])
+    setEdges(newEdges, false)
+  }, [collaborativeWorkflow, getNodesReadOnly])
 
   const handleEdgeDeleteByDeleteBranch = useCallback((nodeId: string, branchId: string) => {
     if (getNodesReadOnly())
       return
 
     const {
-      getNodes,
+      nodes,
       setNodes,
       edges,
       setEdges,
-    } = store.getState()
+    } = collaborativeWorkflow.getState()
     const edgeWillBeDeleted = edges.filter(edge => edge.source === nodeId && edge.sourceHandle === branchId)
 
     if (!edgeWillBeDeleted.length)
       return
 
-    const nodes = getNodes()
     const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
       edgeWillBeDeleted.map(edge => ({ type: 'remove', edge })),
       nodes,
@@ -90,24 +82,23 @@ export const useEdgesInteractions = () => {
     setEdges(newEdges)
     handleSyncWorkflowDraft()
     saveStateToHistory(WorkflowHistoryEvent.EdgeDeleteByDeleteBranch)
-  }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
+  }, [getNodesReadOnly, collaborativeWorkflow, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleEdgeDelete = useCallback(() => {
     if (getNodesReadOnly())
       return
 
     const {
-      getNodes,
+      nodes,
       setNodes,
       edges,
       setEdges,
-    } = store.getState()
+    } = collaborativeWorkflow.getState()
     const currentEdgeIndex = edges.findIndex(edge => edge.selected)
 
     if (currentEdgeIndex < 0)
       return
     const currentEdge = edges[currentEdgeIndex]
-    const nodes = getNodes()
     const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
       [
         { type: 'remove', edge: currentEdge },
@@ -131,7 +122,7 @@ export const useEdgesInteractions = () => {
     setEdges(newEdges)
     handleSyncWorkflowDraft()
     saveStateToHistory(WorkflowHistoryEvent.EdgeDelete)
-  }, [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory])
+  }, [getNodesReadOnly, collaborativeWorkflow, handleSyncWorkflowDraft, saveStateToHistory])
 
   const handleEdgesChange = useCallback<OnEdgesChange>((changes) => {
     if (getNodesReadOnly())
@@ -140,7 +131,7 @@ export const useEdgesInteractions = () => {
     const {
       edges,
       setEdges,
-    } = store.getState()
+    } = collaborativeWorkflow.getState()
 
     const newEdges = produce(edges, (draft) => {
       changes.forEach((change) => {
@@ -149,7 +140,7 @@ export const useEdgesInteractions = () => {
       })
     })
     setEdges(newEdges)
-  }, [store, getNodesReadOnly])
+  }, [collaborativeWorkflow, getNodesReadOnly])
 
   return {
     handleEdgeEnter,
diff --git a/web/app/components/workflow/hooks/use-node-data-update.ts b/web/app/components/workflow/hooks/use-node-data-update.ts
index ac7dca9e4c..9b863f1a93 100644
--- a/web/app/components/workflow/hooks/use-node-data-update.ts
+++ b/web/app/components/workflow/hooks/use-node-data-update.ts
@@ -4,6 +4,7 @@ import { useStoreApi } from 'reactflow'
 import type { SyncCallback } from './use-nodes-sync-draft'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useNodesReadOnly } from './use-workflow'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 
 type NodeDataUpdatePayload = {
   id: string
@@ -14,13 +15,11 @@ export const useNodeDataUpdate = () => {
   const store = useStoreApi()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { getNodesReadOnly } = useNodesReadOnly()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const handleNodeDataUpdate = useCallback(({ id, data }: NodeDataUpdatePayload) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
-    const newNodes = produce(getNodes(), (draft) => {
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
+    const newNodes = produce(nodes, (draft) => {
       const currentNode = draft.find(node => node.id === id)!
 
       if (currentNode)
diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index 3cbdf08e43..c4319d0a1f 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -14,11 +14,10 @@ import {
   getConnectedEdges,
   getOutgoers,
   useReactFlow,
-  useStoreApi,
 } from 'reactflow'
 import type { PluginDefaultValue } from '../block-selector/types'
 import type { Edge, Node, OnNodeAdd } from '../types'
-import { BlockEnum, isTriggerNode } from '../types'
+import { BlockEnum, ControlMode, isTriggerNode } from '../types'
 import { useWorkflowStore } from '../store'
 import {
   CUSTOM_EDGE,
@@ -46,7 +45,7 @@ import { CUSTOM_LOOP_START_NODE } from '../nodes/loop-start/constants'
 import type { VariableAssignerNodeType } from '../nodes/variable-assigner/types'
 import { useNodeIterationInteractions } from '../nodes/iteration/use-interactions'
 import { useNodeLoopInteractions } from '../nodes/loop/use-interactions'
-import { useWorkflowHistoryStore } from '../workflow-history-store'
+import { collaborationManager } from '../collaboration/core/collaboration-manager'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { useHelpline } from './use-helpline'
 import {
@@ -62,6 +61,7 @@ import { useNodesMetaData } from './use-nodes-meta-data'
 import type { RAGPipelineVariables } from '@/models/pipeline'
 import useInspectVarsCrud from './use-inspect-vars-crud'
 import { getNodeUsedVars } from '../nodes/_base/components/variable/utils'
+import { useCollaborativeWorkflow } from './use-collaborative-workflow'
 
 // Entry node deletion restriction has been removed to allow empty workflows
 
@@ -74,10 +74,9 @@ const ENTRY_NODE_WRAPPER_OFFSET = {
 
 export const useNodesInteractions = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
-  const { store: workflowHistoryStore } = useWorkflowHistoryStore()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const { getAfterNodesInSameBranch } = useWorkflow()
   const { getNodesReadOnly } = useNodesReadOnly()
@@ -93,7 +92,7 @@ export const useNodesInteractions = () => {
   })
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
 
-  const { saveStateToHistory, undo, redo } = useWorkflowHistory()
+  const { saveStateToHistory } = useWorkflowHistory()
 
   const handleNodeDragStart = useCallback<NodeDragHandler>(
     (_, node) => {
@@ -129,10 +128,9 @@ export const useNodesInteractions = () => {
 
       if (node.type === CUSTOM_LOOP_START_NODE) return
 
-      const { getNodes, setNodes } = store.getState()
       e.stopPropagation()
 
-      const nodes = getNodes()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
 
       const { restrictPosition } = handleNodeIterationChildDrag(node)
       const { restrictPosition: restrictLoopPosition }
@@ -194,15 +192,7 @@ export const useNodesInteractions = () => {
         }
       })
       setNodes(newNodes)
-    },
-    [
-      getNodesReadOnly,
-      store,
-      handleNodeIterationChildDrag,
-      handleNodeLoopChildDrag,
-      handleSetHelpline,
-    ],
-  )
+    }, [getNodesReadOnly, collaborativeWorkflow, handleNodeIterationChildDrag, handleNodeLoopChildDrag, handleSetHelpline])
 
   const handleNodeDragStop = useCallback<NodeDragHandler>(
     (_, node) => {
@@ -249,11 +239,11 @@ export const useNodesInteractions = () => {
       )
         return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
-      const { connectingNodePayload, setEnteringNodePayload }
-        = workflowStore.getState()
-
+      const { nodes, edges, setNodes, setEdges } = collaborativeWorkflow.getState()
+      const {
+        connectingNodePayload,
+        setEnteringNodePayload,
+      } = workflowStore.getState()
       if (connectingNodePayload) {
         if (connectingNodePayload.nodeId === node.id) return
         const connectingNode: Node = nodes.find(
@@ -272,25 +262,25 @@ export const useNodesInteractions = () => {
             draft.forEach((n) => {
               if (
                 n.id === node.id
-                && fromType === 'source'
-                && (node.data.type === BlockEnum.VariableAssigner
-                  || node.data.type === BlockEnum.VariableAggregator)
+              && fromType === 'source'
+              && (node.data.type === BlockEnum.VariableAssigner
+                || node.data.type === BlockEnum.VariableAggregator)
               ) {
                 if (!node.data.advanced_settings?.group_enabled)
                   n.data._isEntering = true
               }
               if (
                 n.id === node.id
-                && fromType === 'target'
-                && (connectingNode.data.type === BlockEnum.VariableAssigner
-                  || connectingNode.data.type === BlockEnum.VariableAggregator)
-                && node.data.type !== BlockEnum.IfElse
-                && node.data.type !== BlockEnum.QuestionClassifier
+              && fromType === 'target'
+              && (connectingNode.data.type === BlockEnum.VariableAssigner
+                || connectingNode.data.type === BlockEnum.VariableAggregator)
+              && node.data.type !== BlockEnum.IfElse
+              && node.data.type !== BlockEnum.QuestionClassifier
               )
                 n.data._isEntering = true
             })
           })
-          setNodes(newNodes)
+          setNodes(newNodes, false)
         }
       }
       const newEdges = produce(edges, (draft) => {
@@ -301,9 +291,9 @@ export const useNodesInteractions = () => {
           if (currentEdge) currentEdge.data._connectedNodeIsHovering = true
         })
       })
-      setEdges(newEdges)
+      setEdges(newEdges, false)
     },
-    [store, workflowStore, getNodesReadOnly],
+    [collaborativeWorkflow, workflowStore, getNodesReadOnly],
   )
 
   const handleNodeLeave = useCallback<NodeMouseHandler>(
@@ -324,21 +314,21 @@ export const useNodesInteractions = () => {
 
       const { setEnteringNodePayload } = workflowStore.getState()
       setEnteringNodePayload(undefined)
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const newNodes = produce(getNodes(), (draft) => {
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
+      const newNodes = produce(nodes, (draft) => {
         draft.forEach((node) => {
           node.data._isEntering = false
         })
       })
-      setNodes(newNodes)
+      setNodes(newNodes, false)
       const newEdges = produce(edges, (draft) => {
         draft.forEach((edge) => {
           edge.data._connectedNodeIsHovering = false
         })
       })
-      setEdges(newEdges)
+      setEdges(newEdges, false)
     },
-    [store, workflowStore, getNodesReadOnly],
+    [collaborativeWorkflow, workflowStore, getNodesReadOnly],
   )
 
   const handleNodeSelect = useCallback(
@@ -349,9 +339,7 @@ export const useNodesInteractions = () => {
     ) => {
       if (initShowLastRunTab)
         workflowStore.setState({ initShowLastRunTab: true })
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const selectedNode = nodes.find(node => node.data.selected)
 
       if (!cancelSelection && selectedNode?.id === nodeId) return
@@ -362,7 +350,7 @@ export const useNodesInteractions = () => {
           else node.data.selected = false
         })
       })
-      setNodes(newNodes)
+      setNodes(newNodes, false)
 
       const connectedEdges = getConnectedEdges(
         [{ id: nodeId } as Node],
@@ -384,22 +372,20 @@ export const useNodesInteractions = () => {
           }
         })
       })
-      setEdges(newEdges)
-
-      handleSyncWorkflowDraft()
-    },
-    [store, handleSyncWorkflowDraft],
-  )
+      setEdges(newEdges, false)
+    }, [collaborativeWorkflow])
 
   const handleNodeClick = useCallback<NodeMouseHandler>(
     (_, node) => {
+      const { controlMode } = workflowStore.getState()
+      if (controlMode === ControlMode.Comment) return
       if (node.type === CUSTOM_ITERATION_START_NODE) return
       if (node.type === CUSTOM_LOOP_START_NODE) return
       if (node.data.type === BlockEnum.DataSourceEmpty) return
       if (node.data._pluginInstallLocked) return
       handleNodeSelect(node.id)
     },
-    [handleNodeSelect],
+    [handleNodeSelect, workflowStore],
   )
 
   const handleNodeConnect = useCallback<OnConnect>(
@@ -407,8 +393,7 @@ export const useNodesInteractions = () => {
       if (source === target) return
       if (getNodesReadOnly()) return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, edges, setNodes, setEdges } = collaborativeWorkflow.getState()
       const targetNode = nodes.find(node => node.id === target!)
       const sourceNode = nodes.find(node => node.id === source!)
 
@@ -486,7 +471,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       workflowStore,
       handleSyncWorkflowDraft,
       saveStateToHistory,
@@ -499,8 +484,8 @@ export const useNodesInteractions = () => {
 
       if (nodeId && handleType) {
         const { setConnectingNodePayload } = workflowStore.getState()
-        const { getNodes } = store.getState()
-        const node = getNodes().find(n => n.id === nodeId)!
+        const { nodes } = collaborativeWorkflow.getState()
+        const node = nodes.find(n => n.id === nodeId)!
 
         if (node.type === CUSTOM_NOTE_NODE) return
 
@@ -517,9 +502,7 @@ export const useNodesInteractions = () => {
           handleId,
         })
       }
-    },
-    [store, workflowStore, getNodesReadOnly],
-  )
+    }, [collaborativeWorkflow, workflowStore, getNodesReadOnly])
 
   const handleNodeConnectEnd = useCallback<OnConnectEnd>(
     (e: any) => {
@@ -535,8 +518,7 @@ export const useNodesInteractions = () => {
         const { setShowAssignVariablePopup, hoveringAssignVariableGroupId }
           = workflowStore.getState()
         const { screenToFlowPosition } = reactflow
-        const { getNodes, setNodes } = store.getState()
-        const nodes = getNodes()
+        const { nodes, setNodes } = collaborativeWorkflow.getState()
         const fromHandleType = connectingNodePayload.handleType
         const fromHandleId = connectingNodePayload.handleId
         const fromNode = nodes.find(
@@ -593,7 +575,7 @@ export const useNodesInteractions = () => {
       setConnectingNodePayload(undefined)
       setEnteringNodePayload(undefined)
     },
-    [store, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow],
+    [collaborativeWorkflow, handleNodeConnect, getNodesReadOnly, workflowStore, reactflow],
   )
 
   const { deleteNodeInspectorVars } = useInspectVarsCrud()
@@ -602,9 +584,7 @@ export const useNodesInteractions = () => {
     (nodeId: string) => {
       if (getNodesReadOnly()) return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const currentNodeIndex = nodes.findIndex(node => node.id === nodeId)
       const currentNode = nodes[currentNodeIndex]
 
@@ -759,7 +739,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       handleSyncWorkflowDraft,
       saveStateToHistory,
       workflowStore,
@@ -781,8 +761,7 @@ export const useNodesInteractions = () => {
     ) => {
       if (getNodesReadOnly()) return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const nodesWithSameType = nodes.filter(
         node => node.data.type === nodeType,
       )
@@ -1312,7 +1291,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       handleSyncWorkflowDraft,
       saveStateToHistory,
       workflowStore,
@@ -1330,8 +1309,7 @@ export const useNodesInteractions = () => {
     ) => {
       if (getNodesReadOnly()) return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const currentNode = nodes.find(node => node.id === currentNodeId)!
       const connectedEdges = getConnectedEdges([currentNode], edges)
       const nodesWithSameType = nodes.filter(
@@ -1409,7 +1387,7 @@ export const useNodesInteractions = () => {
     },
     [
       getNodesReadOnly,
-      store,
+      collaborativeWorkflow,
       handleSyncWorkflowDraft,
       saveStateToHistory,
       nodesMetaDataMap,
@@ -1417,16 +1395,14 @@ export const useNodesInteractions = () => {
   )
 
   const handleNodesCancelSelected = useCallback(() => {
-    const { getNodes, setNodes } = store.getState()
-
-    const nodes = getNodes()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const newNodes = produce(nodes, (draft) => {
       draft.forEach((node) => {
         node.data.selected = false
       })
     })
     setNodes(newNodes)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeContextMenu = useCallback(
     (e: MouseEvent, node: Node) => {
@@ -1463,9 +1439,7 @@ export const useNodesInteractions = () => {
 
       const { setClipboardElements } = workflowStore.getState()
 
-      const { getNodes } = store.getState()
-
-      const nodes = getNodes()
+      const { nodes } = collaborativeWorkflow.getState()
 
       if (nodeId) {
         // If nodeId is provided, copy that specific node
@@ -1506,7 +1480,7 @@ export const useNodesInteractions = () => {
         if (selectedNode) setClipboardElements([selectedNode])
       }
     },
-    [getNodesReadOnly, store, workflowStore],
+    [getNodesReadOnly, collaborativeWorkflow, workflowStore],
   )
 
   const handleNodesPaste = useCallback(() => {
@@ -1514,11 +1488,10 @@ export const useNodesInteractions = () => {
 
     const { clipboardElements, mousePosition } = workflowStore.getState()
 
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
 
     const nodesToPaste: Node[] = []
     const edgesToPaste: Edge[] = []
-    const nodes = getNodes()
 
     if (clipboardElements.length) {
       const { x, y } = getTopLeftNodePosition(clipboardElements)
@@ -1670,7 +1643,7 @@ export const useNodesInteractions = () => {
   }, [
     getNodesReadOnly,
     workflowStore,
-    store,
+    collaborativeWorkflow,
     reactflow,
     saveStateToHistory,
     handleSyncWorkflowDraft,
@@ -1692,9 +1665,8 @@ export const useNodesInteractions = () => {
   const handleNodesDelete = useCallback(() => {
     if (getNodesReadOnly()) return
 
-    const { getNodes, edges } = store.getState()
+    const { nodes, edges } = collaborativeWorkflow.getState()
 
-    const nodes = getNodes()
     const bundledNodes = nodes.filter(
       node => node.data._isBundled,
     )
@@ -1713,16 +1685,15 @@ export const useNodesInteractions = () => {
     )
 
     if (selectedNode) handleNodeDelete(selectedNode.id)
-  }, [store, getNodesReadOnly, handleNodeDelete])
+  }, [collaborativeWorkflow, getNodesReadOnly, handleNodeDelete])
 
   const handleNodeResize = useCallback(
     (nodeId: string, params: ResizeParamsWithDirection) => {
       if (getNodesReadOnly()) return
 
-      const { getNodes, setNodes } = store.getState()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
       const { x, y, width, height } = params
 
-      const nodes = getNodes()
       const currentNode = nodes.find(n => n.id === nodeId)!
       const childrenNodes = nodes.filter(n =>
         currentNode.data._children?.find((c: any) => c.nodeId === n.id),
@@ -1781,15 +1752,14 @@ export const useNodesInteractions = () => {
       handleSyncWorkflowDraft()
       saveStateToHistory(WorkflowHistoryEvent.NodeResize, { nodeId })
     },
-    [getNodesReadOnly, store, handleSyncWorkflowDraft, saveStateToHistory],
+    [getNodesReadOnly, collaborativeWorkflow, handleSyncWorkflowDraft, saveStateToHistory],
   )
 
   const handleNodeDisconnect = useCallback(
     (nodeId: string) => {
       if (getNodesReadOnly()) return
 
-      const { getNodes, setNodes, edges, setEdges } = store.getState()
-      const nodes = getNodes()
+      const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
       const currentNode = nodes.find(node => node.id === nodeId)!
       const connectedEdges = getConnectedEdges([currentNode], edges)
       const nodesConnectedSourceOrTargetHandleIdsMap
@@ -1820,24 +1790,24 @@ export const useNodesInteractions = () => {
       handleSyncWorkflowDraft()
       saveStateToHistory(WorkflowHistoryEvent.EdgeDelete)
     },
-    [store, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory],
+    [collaborativeWorkflow, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory],
   )
 
   const handleHistoryBack = useCallback(() => {
     if (getNodesReadOnly() || getWorkflowReadOnly()) return
 
-    const { setEdges, setNodes } = store.getState()
-    undo()
+    // Use collaborative undo from Loro
+    const undoResult = collaborationManager.undo()
 
-    const { edges, nodes } = workflowHistoryStore.getState()
-    if (edges.length === 0 && nodes.length === 0) return
-
-    setEdges(edges)
-    setNodes(nodes)
+    if (undoResult) {
+      // The undo operation will automatically trigger subscriptions
+      // which will update the nodes and edges through setupSubscriptions
+      console.log('Collaborative undo performed')
+    }
+    else {
+      console.log('Nothing to undo')
+    }
   }, [
-    store,
-    undo,
-    workflowHistoryStore,
     getNodesReadOnly,
     getWorkflowReadOnly,
   ])
@@ -1845,18 +1815,18 @@ export const useNodesInteractions = () => {
   const handleHistoryForward = useCallback(() => {
     if (getNodesReadOnly() || getWorkflowReadOnly()) return
 
-    const { setEdges, setNodes } = store.getState()
-    redo()
+    // Use collaborative redo from Loro
+    const redoResult = collaborationManager.redo()
 
-    const { edges, nodes } = workflowHistoryStore.getState()
-    if (edges.length === 0 && nodes.length === 0) return
-
-    setEdges(edges)
-    setNodes(nodes)
+    if (redoResult) {
+      // The redo operation will automatically trigger subscriptions
+      // which will update the nodes and edges through setupSubscriptions
+      console.log('Collaborative redo performed')
+    }
+    else {
+      console.log('Nothing to redo')
+    }
   }, [
-    redo,
-    store,
-    workflowHistoryStore,
     getNodesReadOnly,
     getWorkflowReadOnly,
   ])
@@ -1865,8 +1835,7 @@ export const useNodesInteractions = () => {
   /** Add opacity-30 to all nodes except the nodeId */
   const dimOtherNodes = useCallback(() => {
     if (isDimming) return
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
-    const nodes = getNodes()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
 
     const selectedNode = nodes.find(n => n.data.selected)
     if (!selectedNode) return
@@ -1959,12 +1928,11 @@ export const useNodesInteractions = () => {
       draft.push(...tempEdges)
     })
     setEdges(newEdges)
-  }, [isDimming, store])
+  }, [isDimming, collaborativeWorkflow])
 
   /** Restore all nodes to full opacity */
   const undimAllNodes = useCallback(() => {
-    const { getNodes, setNodes, edges, setEdges } = store.getState()
-    const nodes = getNodes()
+    const { nodes, setNodes, edges, setEdges } = collaborativeWorkflow.getState()
     setIsDimming(false)
 
     const newNodes = produce(nodes, (draft) => {
@@ -1984,7 +1952,7 @@ export const useNodesInteractions = () => {
       },
     )
     setEdges(newEdges)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   return {
     handleNodeDragStart,
diff --git a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
index a4c9a45542..cb1d3b4c55 100644
--- a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
@@ -18,13 +18,18 @@ export const useNodesSyncDraft = () => {
   const handleSyncWorkflowDraft = useCallback((
     sync?: boolean,
     notRefreshWhenSyncError?: boolean,
-    callback?: SyncCallback,
+    callback?: {
+      onSuccess?: () => void
+      onError?: () => void
+      onSettled?: () => void
+    },
+    forceUpload?: boolean,
   ) => {
     if (getNodesReadOnly())
       return
 
     if (sync)
-      doSyncWorkflowDraft(notRefreshWhenSyncError, callback)
+      doSyncWorkflowDraft(notRefreshWhenSyncError, callback, forceUpload)
     else
       debouncedSyncWorkflowDraft(doSyncWorkflowDraft)
   }, [debouncedSyncWorkflowDraft, doSyncWorkflowDraft, getNodesReadOnly])
diff --git a/web/app/components/workflow/hooks/use-shortcuts.ts b/web/app/components/workflow/hooks/use-shortcuts.ts
index fa9b019011..91d8de5a32 100644
--- a/web/app/components/workflow/hooks/use-shortcuts.ts
+++ b/web/app/components/workflow/hooks/use-shortcuts.ts
@@ -34,6 +34,8 @@ export const useShortcuts = (): void => {
   const {
     handleModeHand,
     handleModePointer,
+    handleModeComment,
+    isCommentModeAvailable,
   } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
   const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize()
@@ -145,6 +147,16 @@ export const useShortcuts = (): void => {
     useCapture: true,
   })
 
+  useKeyPress('c', (e) => {
+    if (shouldHandleShortcut(e) && isCommentModeAvailable) {
+      e.preventDefault()
+      handleModeComment()
+    }
+  }, {
+    exactMatch: true,
+    useCapture: true,
+  })
+
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.o`, (e) => {
     if (shouldHandleShortcut(e)) {
       e.preventDefault()
diff --git a/web/app/components/workflow/hooks/use-workflow-comment.ts b/web/app/components/workflow/hooks/use-workflow-comment.ts
new file mode 100644
index 0000000000..94eab66b91
--- /dev/null
+++ b/web/app/components/workflow/hooks/use-workflow-comment.ts
@@ -0,0 +1,516 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { useParams } from 'next/navigation'
+import { useReactFlow } from 'reactflow'
+import { useStore } from '../store'
+import { ControlMode } from '../types'
+import type { WorkflowCommentDetail, WorkflowCommentList } from '@/service/workflow-comment'
+import { createWorkflowComment, createWorkflowCommentReply, deleteWorkflowComment, deleteWorkflowCommentReply, fetchWorkflowComment, fetchWorkflowComments, resolveWorkflowComment, updateWorkflowComment, updateWorkflowCommentReply } from '@/service/workflow-comment'
+import { collaborationManager } from '@/app/components/workflow/collaboration'
+import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export const useWorkflowComment = () => {
+  const params = useParams()
+  const appId = params.appId as string
+  const reactflow = useReactFlow()
+  const controlMode = useStore(s => s.controlMode)
+  const pendingComment = useStore(s => s.pendingComment)
+  const setPendingComment = useStore(s => s.setPendingComment)
+  const setActiveCommentId = useStore(s => s.setActiveCommentId)
+  const activeCommentId = useStore(s => s.activeCommentId)
+  const comments = useStore(s => s.comments)
+  const setComments = useStore(s => s.setComments)
+  const loading = useStore(s => s.commentsLoading)
+  const setCommentsLoading = useStore(s => s.setCommentsLoading)
+  const activeComment = useStore(s => s.activeCommentDetail)
+  const setActiveComment = useStore(s => s.setActiveCommentDetail)
+  const activeCommentLoading = useStore(s => s.activeCommentDetailLoading)
+  const setActiveCommentLoading = useStore(s => s.setActiveCommentDetailLoading)
+  const replySubmitting = useStore(s => s.replySubmitting)
+  const setReplySubmitting = useStore(s => s.setReplySubmitting)
+  const replyUpdating = useStore(s => s.replyUpdating)
+  const setReplyUpdating = useStore(s => s.setReplyUpdating)
+  const commentDetailCache = useStore(s => s.commentDetailCache)
+  const setCommentDetailCache = useStore(s => s.setCommentDetailCache)
+  const rightPanelWidth = useStore(s => s.rightPanelWidth)
+  const nodePanelWidth = useStore(s => s.nodePanelWidth)
+  const mentionableUsers = useStore(state => (
+    appId ? state.mentionableUsersCache[appId] ?? [] : []
+  ))
+  const { userProfile } = useAppContext()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
+  const commentDetailCacheRef = useRef<Record<string, WorkflowCommentDetail>>(commentDetailCache)
+  const activeCommentIdRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    activeCommentIdRef.current = activeCommentId ?? null
+  }, [activeCommentId])
+
+  useEffect(() => {
+    commentDetailCacheRef.current = commentDetailCache
+  }, [commentDetailCache])
+
+  const refreshActiveComment = useCallback(async (commentId: string) => {
+    if (!appId) return
+
+    const detailResponse = await fetchWorkflowComment(appId, commentId)
+    const detail = (detailResponse as any)?.data ?? detailResponse
+
+    commentDetailCacheRef.current = {
+      ...commentDetailCacheRef.current,
+      [commentId]: detail,
+    }
+    setCommentDetailCache(commentDetailCacheRef.current)
+    setActiveComment(detail)
+  }, [appId, setActiveComment, setCommentDetailCache])
+
+  const loadComments = useCallback(async () => {
+    if (!appId || !isCollaborationEnabled) return
+
+    setCommentsLoading(true)
+    try {
+      const commentsData = await fetchWorkflowComments(appId)
+      setComments(commentsData)
+    }
+    catch (error) {
+      console.error('Failed to fetch comments:', error)
+    }
+    finally {
+      setCommentsLoading(false)
+    }
+  }, [appId, isCollaborationEnabled, setComments, setCommentsLoading])
+
+  // Setup collaboration
+  useEffect(() => {
+    if (!appId || !isCollaborationEnabled) return
+
+    const unsubscribe = collaborationManager.onCommentsUpdate(() => {
+      loadComments()
+      if (activeCommentIdRef.current)
+        refreshActiveComment(activeCommentIdRef.current)
+    })
+
+    return unsubscribe
+  }, [appId, isCollaborationEnabled, loadComments, refreshActiveComment])
+
+  useEffect(() => {
+    loadComments()
+  }, [loadComments])
+
+  const handleCommentSubmit = useCallback(async (content: string, mentionedUserIds: string[] = []) => {
+    if (!pendingComment) return
+
+    console.log('Submitting comment:', { appId, pendingComment, content, mentionedUserIds })
+
+    if (!appId) {
+      console.error('AppId is missing')
+      return
+    }
+
+    try {
+      // Convert screen position to flow position when submitting
+      const { screenToFlowPosition } = reactflow
+      const flowPosition = screenToFlowPosition({
+        x: pendingComment.pageX,
+        y: pendingComment.pageY,
+      })
+
+      const newComment = await createWorkflowComment(appId, {
+        position_x: flowPosition.x,
+        position_y: flowPosition.y,
+        content,
+        mentioned_user_ids: mentionedUserIds,
+      })
+
+      console.log('Comment created successfully:', newComment)
+
+      const createdAt = (newComment as any)?.created_at
+      const createdByAccount = {
+        id: userProfile?.id ?? '',
+        name: userProfile?.name ?? '',
+        email: userProfile?.email ?? '',
+        avatar_url: userProfile?.avatar_url || userProfile?.avatar || undefined,
+      }
+      const mentionedUsers = mentionedUserIds
+        .map(mentionedId => mentionableUsers.find(user => user.id === mentionedId))
+        .filter((user): user is NonNullable<typeof user> => Boolean(user))
+      const uniqueParticipantsMap = new Map<string, typeof createdByAccount>()
+      if (createdByAccount.id)
+        uniqueParticipantsMap.set(createdByAccount.id, createdByAccount)
+      for (const user of mentionedUsers) {
+        if (!uniqueParticipantsMap.has(user.id)) {
+          uniqueParticipantsMap.set(user.id, {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            avatar_url: user.avatar_url,
+          })
+        }
+      }
+      const participants = Array.from(uniqueParticipantsMap.values())
+
+      const composedComment: WorkflowCommentList = {
+        id: newComment.id,
+        position_x: flowPosition.x,
+        position_y: flowPosition.y,
+        content,
+        created_by: createdByAccount.id,
+        created_by_account: createdByAccount,
+        created_at: createdAt,
+        updated_at: createdAt,
+        resolved: false,
+        mention_count: mentionedUserIds.length,
+        reply_count: 0,
+        participants,
+      }
+
+      const composedDetail: WorkflowCommentDetail = {
+        id: newComment.id,
+        position_x: flowPosition.x,
+        position_y: flowPosition.y,
+        content,
+        created_by: createdByAccount.id,
+        created_by_account: createdByAccount,
+        created_at: createdAt,
+        updated_at: createdAt,
+        resolved: false,
+        replies: [],
+        mentions: mentionedUserIds.map(mentionedId => ({
+          mentioned_user_id: mentionedId,
+          mentioned_user_account: mentionableUsers.find(user => user.id === mentionedId) ?? null,
+          reply_id: null,
+        })),
+      }
+
+      setComments([...comments, composedComment])
+      commentDetailCacheRef.current = {
+        ...commentDetailCacheRef.current,
+        [newComment.id]: composedDetail,
+      }
+      setCommentDetailCache(commentDetailCacheRef.current)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      setPendingComment(null)
+    }
+    catch (error) {
+      console.error('Failed to create comment:', error)
+      setPendingComment(null)
+    }
+  }, [appId, pendingComment, setPendingComment, reactflow, comments, setComments, userProfile, setCommentDetailCache, mentionableUsers])
+
+  const handleCommentCancel = useCallback(() => {
+    setPendingComment(null)
+  }, [setPendingComment])
+
+  useEffect(() => {
+    if (controlMode !== ControlMode.Comment)
+      setPendingComment(null)
+  }, [controlMode, setPendingComment])
+
+  const handleCommentIconClick = useCallback(async (comment: WorkflowCommentList) => {
+    setPendingComment(null)
+
+    activeCommentIdRef.current = comment.id
+    setActiveCommentId(comment.id)
+
+    const cachedDetail = commentDetailCacheRef.current[comment.id]
+    setActiveComment(cachedDetail || comment)
+
+    const hasSelectedNode = reactflow.getNodes().some(node => node.data?.selected)
+    const commentPanelWidth = controlMode === ControlMode.Comment ? 420 : 0
+    const fallbackPanelWidth = (hasSelectedNode ? nodePanelWidth : 0) + commentPanelWidth
+    const effectivePanelWidth = Math.max(rightPanelWidth ?? 0, fallbackPanelWidth)
+
+    const baseHorizontalOffsetPx = 220
+    const panelCompensationPx = effectivePanelWidth / 2
+    const desiredHorizontalOffsetPx = baseHorizontalOffsetPx + panelCompensationPx
+    const maxOffset = Math.max(0, (window.innerWidth / 2) - 60)
+    const horizontalOffsetPx = Math.min(desiredHorizontalOffsetPx, maxOffset)
+
+    reactflow.setCenter(
+      comment.position_x + horizontalOffsetPx,
+      comment.position_y,
+      { zoom: 1, duration: 600 },
+    )
+
+    if (!appId) return
+
+    setActiveCommentLoading(!cachedDetail)
+
+    try {
+      const detailResponse = await fetchWorkflowComment(appId, comment.id)
+      const detail = (detailResponse as any)?.data ?? detailResponse
+
+      commentDetailCacheRef.current = {
+        ...commentDetailCacheRef.current,
+        [comment.id]: detail,
+      }
+      setCommentDetailCache(commentDetailCacheRef.current)
+
+      if (activeCommentIdRef.current === comment.id)
+        setActiveComment(detail)
+    }
+    catch (e) {
+      console.warn('Failed to load workflow comment detail', e)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [
+    appId,
+    controlMode,
+    nodePanelWidth,
+    reactflow,
+    rightPanelWidth,
+    setActiveComment,
+    setActiveCommentId,
+    setActiveCommentLoading,
+    setCommentDetailCache,
+    setPendingComment,
+  ])
+
+  const handleCommentResolve = useCallback(async (commentId: string) => {
+    if (!appId) return
+
+    setActiveCommentLoading(true)
+    try {
+      await resolveWorkflowComment(appId, commentId)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to resolve comment:', error)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setActiveCommentLoading])
+
+  const handleCommentDelete = useCallback(async (commentId: string) => {
+    if (!appId) return
+
+    setActiveCommentLoading(true)
+    try {
+      await deleteWorkflowComment(appId, commentId)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      const updatedCache = { ...commentDetailCacheRef.current }
+      delete updatedCache[commentId]
+      commentDetailCacheRef.current = updatedCache
+      setCommentDetailCache(updatedCache)
+
+      const currentComments = comments.filter(c => c.id !== commentId)
+      const commentIndex = comments.findIndex(c => c.id === commentId)
+      const fallbackTarget = commentIndex >= 0 ? comments[commentIndex + 1] ?? comments[commentIndex - 1] : undefined
+
+      await loadComments()
+
+      if (fallbackTarget) {
+        handleCommentIconClick(fallbackTarget)
+      }
+      else if (currentComments.length > 0) {
+        const nextComment = currentComments[0]
+        handleCommentIconClick(nextComment)
+      }
+      else {
+        setActiveComment(null)
+        setActiveCommentId(null)
+        activeCommentIdRef.current = null
+      }
+    }
+    catch (error) {
+      console.error('Failed to delete comment:', error)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [appId, comments, handleCommentIconClick, loadComments, setActiveComment, setActiveCommentId, setActiveCommentLoading, setCommentDetailCache])
+
+  const handleCommentPositionUpdate = useCallback(async (commentId: string, position: { x: number; y: number }) => {
+    if (!appId) return
+
+    const targetComment = comments.find(c => c.id === commentId)
+    if (!targetComment) return
+
+    const nextPosition = {
+      position_x: position.x,
+      position_y: position.y,
+    }
+
+    const previousComments = comments
+    const updatedComments = comments.map(c =>
+      c.id === commentId
+        ? { ...c, ...nextPosition }
+        : c,
+    )
+    setComments(updatedComments)
+
+    const cachedDetail = commentDetailCacheRef.current[commentId]
+    const updatedDetail = cachedDetail ? { ...cachedDetail, ...nextPosition } : null
+    if (updatedDetail) {
+      commentDetailCacheRef.current = {
+        ...commentDetailCacheRef.current,
+        [commentId]: updatedDetail,
+      }
+      setCommentDetailCache(commentDetailCacheRef.current)
+
+      if (activeCommentIdRef.current === commentId)
+        setActiveComment(updatedDetail)
+    }
+    else if (activeComment?.id === commentId) {
+      setActiveComment({ ...activeComment, ...nextPosition })
+    }
+
+    try {
+      await updateWorkflowComment(appId, commentId, {
+        content: targetComment.content,
+        position_x: nextPosition.position_x,
+        position_y: nextPosition.position_y,
+      })
+      collaborationManager.emitCommentsUpdate(appId)
+    }
+    catch (error) {
+      console.error('Failed to update comment position:', error)
+      setComments(previousComments)
+
+      if (cachedDetail) {
+        commentDetailCacheRef.current = {
+          ...commentDetailCacheRef.current,
+          [commentId]: cachedDetail,
+        }
+        setCommentDetailCache(commentDetailCacheRef.current)
+
+        if (activeCommentIdRef.current === commentId)
+          setActiveComment(cachedDetail)
+      }
+      else if (activeComment?.id === commentId) {
+        setActiveComment(activeComment)
+      }
+    }
+  }, [activeComment, appId, comments, setComments, setCommentDetailCache, setActiveComment])
+
+  const handleCommentReply = useCallback(async (commentId: string, content: string, mentionedUserIds: string[] = []) => {
+    if (!appId) return
+    const trimmed = content.trim()
+    if (!trimmed) return
+
+    setReplySubmitting(true)
+    try {
+      await createWorkflowCommentReply(appId, commentId, { content: trimmed, mentioned_user_ids: mentionedUserIds })
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to create reply:', error)
+    }
+    finally {
+      setReplySubmitting(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setReplySubmitting])
+
+  const handleCommentReplyUpdate = useCallback(async (commentId: string, replyId: string, content: string, mentionedUserIds: string[] = []) => {
+    if (!appId) return
+    const trimmed = content.trim()
+    if (!trimmed) return
+
+    setReplyUpdating(true)
+    try {
+      await updateWorkflowCommentReply(appId, commentId, replyId, { content: trimmed, mentioned_user_ids: mentionedUserIds })
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to update reply:', error)
+    }
+    finally {
+      setReplyUpdating(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setReplyUpdating])
+
+  const handleCommentReplyDelete = useCallback(async (commentId: string, replyId: string) => {
+    if (!appId) return
+
+    setActiveCommentLoading(true)
+    try {
+      await deleteWorkflowCommentReply(appId, commentId, replyId)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await refreshActiveComment(commentId)
+      await loadComments()
+    }
+    catch (error) {
+      console.error('Failed to delete reply:', error)
+    }
+    finally {
+      setActiveCommentLoading(false)
+    }
+  }, [appId, loadComments, refreshActiveComment, setActiveCommentLoading])
+
+  const handleCommentNavigate = useCallback((direction: 'prev' | 'next') => {
+    const currentId = activeCommentIdRef.current
+    if (!currentId) return
+    const idx = comments.findIndex(c => c.id === currentId)
+    if (idx === -1) return
+    const target = direction === 'prev' ? comments[idx - 1] : comments[idx + 1]
+    if (target)
+      handleCommentIconClick(target)
+  }, [comments, handleCommentIconClick])
+
+  const handleActiveCommentClose = useCallback(() => {
+    setActiveComment(null)
+    setActiveCommentLoading(false)
+    setActiveCommentId(null)
+    activeCommentIdRef.current = null
+  }, [setActiveComment, setActiveCommentId, setActiveCommentLoading])
+
+  const handleCreateComment = useCallback((mousePosition: {
+    pageX: number
+    pageY: number
+    elementX: number
+    elementY: number
+  }) => {
+    if (controlMode === ControlMode.Comment) {
+      console.log('Setting pending comment at screen position:', mousePosition)
+      setPendingComment(mousePosition)
+    }
+    else {
+      console.log('Control mode is not Comment:', controlMode)
+    }
+  }, [controlMode, setPendingComment])
+
+  return {
+    comments,
+    loading,
+    pendingComment,
+    activeComment,
+    activeCommentLoading,
+    replySubmitting,
+    replyUpdating,
+    handleCommentSubmit,
+    handleCommentCancel,
+    handleCommentIconClick,
+    handleActiveCommentClose,
+    handleCommentResolve,
+    handleCommentDelete,
+    handleCommentNavigate,
+    handleCommentReply,
+    handleCommentReplyUpdate,
+    handleCommentReplyDelete,
+    handleCommentPositionUpdate,
+    refreshActiveComment,
+    handleCreateComment,
+    loadComments,
+  }
+}
diff --git a/web/app/components/workflow/hooks/use-workflow-interactions.ts b/web/app/components/workflow/hooks/use-workflow-interactions.ts
index e56c39d51e..717da08689 100644
--- a/web/app/components/workflow/hooks/use-workflow-interactions.ts
+++ b/web/app/components/workflow/hooks/use-workflow-interactions.ts
@@ -1,7 +1,7 @@
 import {
   useCallback,
 } from 'react'
-import { useReactFlow, useStoreApi } from 'reactflow'
+import { useReactFlow } from 'reactflow'
 import { produce } from 'immer'
 import { useStore, useWorkflowStore } from '../store'
 import {
@@ -29,6 +29,9 @@ import { useNodesInteractionsWithoutSync } from './use-nodes-interactions-withou
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export const useWorkflowInteractions = () => {
   const workflowStore = useWorkflowStore()
@@ -55,6 +58,9 @@ export const useWorkflowMoveMode = () => {
     getNodesReadOnly,
   } = useNodesReadOnly()
   const { handleSelectionCancel } = useSelectionInteractions()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
+  const appDetail = useAppStore(state => state.appDetail)
+  const isCommentModeAvailable = isCollaborationEnabled && (appDetail?.mode === 'workflow' || appDetail?.mode === 'advanced-chat')
 
   const handleModePointer = useCallback(() => {
     if (getNodesReadOnly())
@@ -71,31 +77,40 @@ export const useWorkflowMoveMode = () => {
     handleSelectionCancel()
   }, [getNodesReadOnly, setControlMode, handleSelectionCancel])
 
+  const handleModeComment = useCallback(() => {
+    if (getNodesReadOnly() || !isCommentModeAvailable)
+      return
+
+    setControlMode(ControlMode.Comment)
+    handleSelectionCancel()
+  }, [getNodesReadOnly, setControlMode, handleSelectionCancel, isCommentModeAvailable])
+
   return {
     handleModePointer,
     handleModeHand,
+    handleModeComment,
+    isCommentModeAvailable,
   }
 }
 
 export const useWorkflowOrganize = () => {
   const workflowStore = useWorkflowStore()
-  const store = useStoreApi()
   const reactflow = useReactFlow()
   const { getNodesReadOnly } = useNodesReadOnly()
   const { saveStateToHistory } = useWorkflowHistory()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const handleLayout = useCallback(async () => {
     if (getNodesReadOnly())
       return
     workflowStore.setState({ nodeAnimation: true })
     const {
-      getNodes,
+      nodes,
       edges,
       setNodes,
-    } = store.getState()
+    } = collaborativeWorkflow.getState()
     const { setViewport } = reactflow
-    const nodes = getNodes()
 
     const loopAndIterationNodes = nodes.filter(
       node => (node.data.type === BlockEnum.Loop || node.data.type === BlockEnum.Iteration)
@@ -232,7 +247,7 @@ export const useWorkflowOrganize = () => {
     setTimeout(() => {
       handleSyncWorkflowDraft()
     })
-  }, [getNodesReadOnly, store, reactflow, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
+  }, [getNodesReadOnly, collaborativeWorkflow, reactflow, workflowStore, handleSyncWorkflowDraft, saveStateToHistory])
 
   return {
     handleLayout,
diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts
index e6746085b8..8022d6205c 100644
--- a/web/app/components/workflow/hooks/use-workflow.ts
+++ b/web/app/components/workflow/hooks/use-workflow.ts
@@ -5,7 +5,6 @@ import { uniqBy } from 'lodash-es'
 import {
   getIncomers,
   getOutgoers,
-  useStoreApi,
 } from 'reactflow'
 import type {
   Connection,
@@ -37,6 +36,8 @@ import { findUsedVarNodes, getNodeOutputVars, updateNodeVars } from '../nodes/_b
 import { useAvailableBlocks } from './use-available-blocks'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
+
 import { CUSTOM_ITERATION_START_NODE } from '@/app/components/workflow/nodes/iteration-start/constants'
 import { CUSTOM_LOOP_START_NODE } from '@/app/components/workflow/nodes/loop-start/constants'
 import { useNodesMetaData } from '.'
@@ -49,26 +50,18 @@ export const useIsChatMode = () => {
 }
 
 export const useWorkflow = () => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const { getAvailableBlocks } = useAvailableBlocks()
   const { nodesMap } = useNodesMetaData()
 
   const getNodeById = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
     return currentNode
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getTreeLeafNodes = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
-    // let startNode = getWorkflowEntryNode(nodes)
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
 
     let startNodes = nodes.filter(node => nodesMap?.[node.data.type as BlockEnum]?.metaData.isStart) || []
@@ -111,14 +104,11 @@ export const useWorkflow = () => {
     return uniqBy(list, 'id').filter((item: Node) => {
       return SUPPORT_OUTPUT_VARS_NODE.includes(item.data.type)
     })
-  }, [store, nodesMap])
+  }, [collaborativeWorkflow, nodesMap])
 
   const getBeforeNodesInSameBranch = useCallback((nodeId: string, newNodes?: Node[], newEdges?: Edge[]) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = newNodes || getNodes()
+    const { nodes: oldNodes, edges } = collaborativeWorkflow.getState()
+    const nodes = newNodes || oldNodes
     const currentNode = nodes.find(node => node.id === nodeId)
 
     const list: Node[] = []
@@ -161,14 +151,11 @@ export const useWorkflow = () => {
     }
 
     return []
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getBeforeNodesInSameBranchIncludeParent = useCallback((nodeId: string, newNodes?: Node[], newEdges?: Edge[]) => {
     const nodes = getBeforeNodesInSameBranch(nodeId, newNodes, newEdges)
-    const {
-      getNodes,
-    } = store.getState()
-    const allNodes = getNodes()
+    const { nodes: allNodes } = collaborativeWorkflow.getState()
     const node = allNodes.find(n => n.id === nodeId)
     const parentNodeId = node?.parentId
     const parentNode = allNodes.find(n => n.id === parentNodeId)
@@ -176,14 +163,10 @@ export const useWorkflow = () => {
       nodes.push(parentNode)
 
     return nodes
-  }, [getBeforeNodesInSameBranch, store])
+  }, [getBeforeNodesInSameBranch, collaborativeWorkflow])
 
   const getAfterNodesInSameBranch = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)!
 
     if (!currentNode)
@@ -207,40 +190,29 @@ export const useWorkflow = () => {
     })
 
     return uniqBy(list, 'id')
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getBeforeNodeById = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const node = nodes.find(node => node.id === nodeId)!
 
     return getIncomers(node, nodes, edges)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getIterationNodeChildren = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return nodes.filter(node => node.parentId === nodeId)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getLoopNodeChildren = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return nodes.filter(node => node.parentId === nodeId)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const isFromStartNode = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
 
     if (!currentNode)
@@ -263,11 +235,10 @@ export const useWorkflow = () => {
     }
 
     return checkPreviousNodes(currentNode)
-  }, [store, getBeforeNodeById])
+  }, [collaborativeWorkflow, getBeforeNodeById])
 
   const handleOutVarRenameChange = useCallback((nodeId: string, oldValeSelector: ValueSelector, newVarSelector: ValueSelector) => {
-    const { getNodes, setNodes } = store.getState()
-    const allNodes = getNodes()
+    const { nodes: allNodes, setNodes } = collaborativeWorkflow.getState()
     const affectedNodes = findUsedVarNodes(oldValeSelector, allNodes)
     if (affectedNodes.length > 0) {
       const newNodes = allNodes.map((node) => {
@@ -278,7 +249,7 @@ export const useWorkflow = () => {
       })
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const isVarUsedInNodes = useCallback((varSelector: ValueSelector) => {
     const nodeId = varSelector[0]
@@ -289,11 +260,11 @@ export const useWorkflow = () => {
 
   const removeUsedVarInNodes = useCallback((varSelector: ValueSelector) => {
     const nodeId = varSelector[0]
-    const { getNodes, setNodes } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const afterNodes = getAfterNodesInSameBranch(nodeId)
     const effectNodes = findUsedVarNodes(varSelector, afterNodes)
     if (effectNodes.length > 0) {
-      const newNodes = getNodes().map((node) => {
+      const newNodes = nodes.map((node) => {
         if (effectNodes.find(n => n.id === node.id))
           return updateNodeVars(node, varSelector, [])
 
@@ -301,7 +272,7 @@ export const useWorkflow = () => {
       })
       setNodes(newNodes)
     }
-  }, [getAfterNodesInSameBranch, store])
+  }, [getAfterNodesInSameBranch, collaborativeWorkflow])
 
   const isNodeVarsUsedInNodes = useCallback((node: Node, isChatMode: boolean) => {
     const outputVars = getNodeOutputVars(node, isChatMode)
@@ -312,11 +283,7 @@ export const useWorkflow = () => {
   }, [isVarUsedInNodes])
 
   const getRootNodesById = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      edges,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(node => node.id === nodeId)
 
     const rootNodes: Node[] = []
@@ -356,7 +323,7 @@ export const useWorkflow = () => {
       return uniqBy(rootNodes, 'id')
 
     return []
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const getStartNodes = useCallback((nodes: Node[], currentNode?: Node) => {
     const { id, parentId } = currentNode || {}
@@ -382,11 +349,7 @@ export const useWorkflow = () => {
   }, [nodesMap, getRootNodesById])
 
   const isValidConnection = useCallback(({ source, sourceHandle: _sourceHandle, target }: Connection) => {
-    const {
-      edges,
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes, edges } = collaborativeWorkflow.getState()
     const sourceNode: Node = nodes.find(node => node.id === source)!
     const targetNode: Node = nodes.find(node => node.id === target)!
 
@@ -422,14 +385,13 @@ export const useWorkflow = () => {
     }
 
     return !hasCycle(targetNode)
-  }, [store, getAvailableBlocks])
+  }, [collaborativeWorkflow, getAvailableBlocks])
 
   const getNode = useCallback((nodeId?: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     return nodes.find(node => node.id === nodeId) || getWorkflowEntryNode(nodes)
-  }, [store])
+  }, [collaborativeWorkflow])
 
   return {
     getNodeById,
@@ -489,13 +451,10 @@ export const useNodesReadOnly = () => {
 }
 
 export const useIsNodeInIteration = (iterationId: string) => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const isNodeInIteration = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const node = nodes.find(node => node.id === nodeId)
 
     if (!node)
@@ -505,20 +464,17 @@ export const useIsNodeInIteration = (iterationId: string) => {
       return true
 
     return false
-  }, [iterationId, store])
+  }, [iterationId, collaborativeWorkflow])
   return {
     isNodeInIteration,
   }
 }
 
 export const useIsNodeInLoop = (loopId: string) => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const isNodeInLoop = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const node = nodes.find(node => node.id === nodeId)
 
     if (!node)
@@ -528,7 +484,7 @@ export const useIsNodeInLoop = (loopId: string) => {
       return true
 
     return false
-  }, [loopId, store])
+  }, [loopId, collaborativeWorkflow])
   return {
     isNodeInLoop,
   }
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 86c6bf153e..234f89912e 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -2,6 +2,7 @@
 
 import type { FC } from 'react'
 import {
+  Fragment,
   memo,
   useCallback,
   useEffect,
@@ -9,6 +10,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import { setAutoFreeze } from 'immer'
 import {
   useEventListener,
@@ -66,11 +68,15 @@ import CustomEdge from './custom-edge'
 import CustomConnectionLine from './custom-connection-line'
 import HelpLine from './help-line'
 import CandidateNode from './candidate-node'
+import CommentManager from './comment-manager'
 import PanelContextmenu from './panel-contextmenu'
 import NodeContextmenu from './node-contextmenu'
 import SelectionContextmenu from './selection-contextmenu'
 import SyncingDataModal from './syncing-data-modal'
 import { setupScrollToNodeListener } from './utils/node-navigation'
+import { CommentCursor, CommentIcon, CommentInput, CommentThread } from './comment'
+import { useWorkflowComment } from './hooks/use-workflow-comment'
+import UserCursors from './collaboration/components/user-cursors'
 import {
   useStore,
   useWorkflowStore,
@@ -120,6 +126,9 @@ export type WorkflowProps = {
   viewport?: Viewport
   children?: React.ReactNode
   onWorkflowDataUpdate?: (v: any) => void
+  cursors?: Record<string, any>
+  myUserId?: string | null
+  onlineUsers?: any[]
 }
 export const Workflow: FC<WorkflowProps> = memo(({
   nodes: originalNodes,
@@ -127,10 +136,14 @@ export const Workflow: FC<WorkflowProps> = memo(({
   viewport,
   children,
   onWorkflowDataUpdate,
+  cursors,
+  myUserId,
+  onlineUsers,
 }) => {
   const workflowContainerRef = useRef<HTMLDivElement>(null)
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
+  const [isMouseOverCanvas, setIsMouseOverCanvas] = useState(false)
   const [nodes, setNodes] = useNodesState(originalNodes)
   const [edges, setEdges] = useEdgesState(originalEdges)
   const controlMode = useStore(s => s.controlMode)
@@ -175,6 +188,29 @@ export const Workflow: FC<WorkflowProps> = memo(({
   const { workflowReadOnly } = useWorkflowReadOnly()
   const { nodesReadOnly } = useNodesReadOnly()
   const { eventEmitter } = useEventEmitterContextContext()
+  const {
+    comments,
+    pendingComment,
+    activeComment,
+    activeCommentLoading,
+    replySubmitting,
+    replyUpdating,
+    handleCommentSubmit,
+    handleCommentCancel,
+    handleCommentIconClick,
+    handleActiveCommentClose,
+    handleCommentResolve,
+    handleCommentDelete,
+    handleCommentNavigate,
+    handleCommentReply,
+    handleCommentReplyUpdate,
+    handleCommentReplyDelete,
+    handleCommentPositionUpdate,
+  } = useWorkflowComment()
+  const showUserComments = useStore(s => s.showUserComments)
+  const showUserCursors = useStore(s => s.showUserCursors)
+  const isCommentPreviewHovering = useStore(s => s.isCommentPreviewHovering)
+  const { t } = useTranslation()
 
   eventEmitter?.useSubscription((v: any) => {
     if (v.type === WORKFLOW_DATA_UPDATE) {
@@ -215,6 +251,33 @@ export const Workflow: FC<WorkflowProps> = memo(({
       setTimeout(() => handleRefreshWorkflowDraft(), 500)
   }, [syncWorkflowDraftWhenPageClose, handleRefreshWorkflowDraft])
 
+  // Optimized comment deletion using showConfirm
+  const handleCommentDeleteClick = useCallback((commentId: string) => {
+    if (!showConfirm) {
+      setShowConfirm({
+        title: t('workflow.comments.confirm.deleteThreadTitle'),
+        desc: t('workflow.comments.confirm.deleteThreadDesc'),
+        onConfirm: async () => {
+          await handleCommentDelete(commentId)
+          setShowConfirm(undefined)
+        },
+      })
+    }
+  }, [showConfirm, setShowConfirm, handleCommentDelete, t])
+
+  const handleCommentReplyDeleteClick = useCallback((commentId: string, replyId: string) => {
+    if (!showConfirm) {
+      setShowConfirm({
+        title: t('workflow.comments.confirm.deleteReplyTitle'),
+        desc: t('workflow.comments.confirm.deleteReplyDesc'),
+        onConfirm: async () => {
+          await handleCommentReplyDelete(commentId, replyId)
+          setShowConfirm(undefined)
+        },
+      })
+    }
+  }, [showConfirm, setShowConfirm, handleCommentReplyDelete, t])
+
   useEffect(() => {
     document.addEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)
 
@@ -245,6 +308,9 @@ export const Workflow: FC<WorkflowProps> = memo(({
           elementY: e.clientY - containerClientRect.top,
         },
       })
+      const target = e.target as HTMLElement
+      const onPane = !!target?.closest('.react-flow__pane')
+      setIsMouseOverCanvas(onPane)
     }
   })
 
@@ -345,7 +411,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
     <div
       id='workflow-container'
       className={cn(
-        'relative h-full w-full min-w-[960px]',
+        'relative h-full w-full min-w-[960px] overflow-hidden',
         workflowReadOnly && 'workflow-panel-animation',
         nodeAnimation && 'workflow-node-animation',
       )}
@@ -353,8 +419,9 @@ export const Workflow: FC<WorkflowProps> = memo(({
     >
       <SyncingDataModal />
       <CandidateNode />
+      <CommentManager />
       <div
-        className='pointer-events-none absolute left-0 top-0 z-10 flex w-12 items-center justify-center p-1 pl-2'
+        className='pointer-events-none absolute left-0 top-0 z-[65] flex w-12 items-center justify-center p-1 pl-2'
         style={{ height: controlHeight }}
       >
         <Control />
@@ -364,23 +431,81 @@ export const Workflow: FC<WorkflowProps> = memo(({
       <NodeContextmenu />
       <SelectionContextmenu />
       <HelpLine />
-      {
-        !!showConfirm && (
-          <Confirm
-            isShow
-            onCancel={() => setShowConfirm(undefined)}
-            onConfirm={showConfirm.onConfirm}
-            title={showConfirm.title}
-            content={showConfirm.desc}
+      {!!showConfirm && (
+        <Confirm
+          isShow
+          onCancel={() => setShowConfirm(undefined)}
+          onConfirm={showConfirm.onConfirm}
+          title={showConfirm.title}
+          content={showConfirm.desc}
+        />
+      )}
+      {controlMode === ControlMode.Comment && isMouseOverCanvas && (
+        <CommentCursor />
+      )}
+      {pendingComment && (
+        <CommentInput
+          position={{
+            x: pendingComment.elementX,
+            y: pendingComment.elementY,
+          }}
+          onSubmit={handleCommentSubmit}
+          onCancel={handleCommentCancel}
+        />
+      )}
+      {comments.map((comment, index) => {
+        const isActive = activeComment?.id === comment.id
+
+        if (isActive && activeComment) {
+          const canGoPrev = index > 0
+          const canGoNext = index < comments.length - 1
+          return (
+            <Fragment key={comment.id}>
+              <CommentIcon
+                key={`${comment.id}-icon`}
+                comment={comment}
+                onClick={() => handleCommentIconClick(comment)}
+                isActive={true}
+                onPositionUpdate={position => handleCommentPositionUpdate(comment.id, position)}
+              />
+              <CommentThread
+                key={`${comment.id}-thread`}
+                comment={activeComment}
+                loading={activeCommentLoading}
+                replySubmitting={replySubmitting}
+                replyUpdating={replyUpdating}
+                onClose={handleActiveCommentClose}
+                onResolve={() => handleCommentResolve(comment.id)}
+                onDelete={() => handleCommentDeleteClick(comment.id)}
+                onPrev={canGoPrev ? () => handleCommentNavigate('prev') : undefined}
+                onNext={canGoNext ? () => handleCommentNavigate('next') : undefined}
+                onReply={(content, ids) => handleCommentReply(comment.id, content, ids ?? [])}
+                onReplyEdit={(replyId, content, ids) => handleCommentReplyUpdate(comment.id, replyId, content, ids ?? [])}
+                onReplyDelete={replyId => handleCommentReplyDeleteClick(comment.id, replyId)}
+                onReplyDeleteDirect={replyId => handleCommentReplyDelete(comment.id, replyId)}
+                canGoPrev={canGoPrev}
+                canGoNext={canGoNext}
+              />
+            </Fragment>
+          )
+        }
+
+        return (showUserComments || controlMode === ControlMode.Comment) ? (
+          <CommentIcon
+            key={comment.id}
+            comment={comment}
+            onClick={() => handleCommentIconClick(comment)}
+            onPositionUpdate={position => handleCommentPositionUpdate(comment.id, position)}
           />
-        )
-      }
+        ) : null
+      })}
       {children}
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         nodes={nodes}
         edges={edges}
+        className={controlMode === ControlMode.Comment ? 'comment-mode-flow' : ''}
         onNodeDragStart={handleNodeDragStart}
         onNodeDrag={handleNodeDrag}
         onNodeDragStop={handleNodeDragStop}
@@ -405,13 +530,13 @@ export const Workflow: FC<WorkflowProps> = memo(({
         defaultViewport={viewport}
         multiSelectionKeyCode={null}
         deleteKeyCode={null}
-        nodesDraggable={!nodesReadOnly}
+        nodesDraggable={!nodesReadOnly && controlMode !== ControlMode.Comment}
         nodesConnectable={!nodesReadOnly}
         nodesFocusable={!nodesReadOnly}
         edgesFocusable={!nodesReadOnly}
         panOnScroll={false}
         panOnDrag={controlMode === ControlMode.Hand}
-        zoomOnPinch={true}
+        zoomOnPinch={!isCommentPreviewHovering}
         zoomOnScroll={true}
         zoomOnDoubleClick={true}
         isValidConnection={isValidConnection}
@@ -426,6 +551,13 @@ export const Workflow: FC<WorkflowProps> = memo(({
           className="bg-workflow-canvas-workflow-bg"
           color='var(--color-workflow-canvas-workflow-dot-color)'
         />
+        {showUserCursors && cursors && (
+          <UserCursors
+            cursors={cursors}
+            myUserId={myUserId || null}
+            onlineUsers={onlineUsers || []}
+          />
+        )}
       </ReactFlow>
     </div>
   )
@@ -433,14 +565,25 @@ export const Workflow: FC<WorkflowProps> = memo(({
 
 type WorkflowWithInnerContextProps = WorkflowProps & {
   hooksStore?: Partial<HooksStoreShape>
+  cursors?: Record<string, any>
+  myUserId?: string | null
+  onlineUsers?: any[]
 }
 export const WorkflowWithInnerContext = memo(({
   hooksStore,
+  cursors,
+  myUserId,
+  onlineUsers,
   ...restProps
 }: WorkflowWithInnerContextProps) => {
   return (
     <HooksStoreContextProvider {...hooksStore}>
-      <Workflow {...restProps} />
+      <Workflow
+        {...restProps}
+        cursors={cursors}
+        myUserId={myUserId}
+        onlineUsers={onlineUsers}
+      />
     </HooksStoreContextProvider>
   )
 })
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts b/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts
index 06eb4fc48f..01f13e6293 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/hooks.ts
@@ -30,8 +30,15 @@ export const useDefaultValue = (
     const index = default_value.findIndex(form => form.key === key)
 
     if (index > -1) {
-      const newDefaultValue = [...default_value]
-      newDefaultValue[index].value = value
+      const newDefaultValue = default_value.map((form) => {
+        if (form.key !== key)
+          return form
+        // clone the entry so we do not mutate the original reference (which would block CRDT diffs)
+        return {
+          ...form,
+          value,
+        }
+      })
       handleNodeDataUpdateWithSyncDraft({
         id,
         data: {
diff --git a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
index 062190aee9..4a5c3fe400 100644
--- a/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/title-description-input.tsx
@@ -1,6 +1,7 @@
 import {
   memo,
   useCallback,
+  useEffect,
   useState,
 } from 'react'
 import Textarea from 'react-textarea-autosize'
@@ -28,10 +29,27 @@ export const TitleInput = memo(({
     onBlur(localValue)
   }
 
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalValue(e.target.value)
+  }, [])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      ;(e.target as HTMLInputElement).blur()
+    }
+  }, [])
+
+  // Sync local state with incoming collaborative updates so remote title edits appear immediately.
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
   return (
     <input
       value={localValue}
-      onChange={e => setLocalValue(e.target.value)}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
       className={`
         system-xl-semibold mr-2 h-7 min-w-0 grow appearance-none rounded-md border border-transparent bg-transparent px-1 text-text-primary
         outline-none focus:shadow-xs
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index eaafab550e..03753e5e3f 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -1,14 +1,6 @@
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import Tooltip from '@/app/components/base/tooltip'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import {
-  AuthCategory,
-  AuthorizedInDataSourceNode,
-  AuthorizedInNode,
-  PluginAuth,
-  PluginAuthInDataSourceNode,
-} from '@/app/components/plugins/plugin-auth'
 import { usePluginStore } from '@/app/components/plugins/plugin-detail-panel/store'
 import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
@@ -23,14 +15,7 @@ import {
   useToolIcon,
   useWorkflowHistory,
 } from '@/app/components/workflow/hooks'
-import { useHooksStore } from '@/app/components/workflow/hooks-store'
-import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
-import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form'
-import type { CustomRunFormProps } from '@/app/components/workflow/nodes/data-source/types'
-import { DataSourceClassification } from '@/app/components/workflow/nodes/data-source/types'
-import { useLogs } from '@/app/components/workflow/run/hooks'
-import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum, type Node, NodeRunningStatus } from '@/app/components/workflow/types'
 import {
@@ -39,18 +24,14 @@ import {
   hasRetryNode,
   isSupportCustomRunForm,
 } from '@/app/components/workflow/utils'
-import { useModalContext } from '@/context/modal-context'
 import { useAllBuiltInTools } from '@/service/use-tools'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
-import { FlowType } from '@/types/common'
-import { canFindTool } from '@/utils'
 import cn from '@/utils/classnames'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import {
   RiCloseLine,
   RiPlayLargeLine,
 } from '@remixicon/react'
-import { debounce } from 'lodash-es'
 import type { FC, ReactNode } from 'react'
 import React, {
   cloneElement,
@@ -64,8 +45,6 @@ import React, {
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { useResizePanel } from '../../hooks/use-resize-panel'
-import BeforeRunForm from '../before-run-form'
-import PanelWrap from '../before-run-form/panel-wrap'
 import ErrorHandleOnPanel from '../error-handle/error-handle-on-panel'
 import HelpLink from '../help-link'
 import NextStep from '../next-step'
@@ -76,6 +55,31 @@ import LastRun from './last-run'
 import useLastRun from './last-run/use-last-run'
 import Tab, { TabType } from './tab'
 import { TriggerSubscription } from './trigger-subscription'
+import BeforeRunForm from '../before-run-form'
+import { debounce } from 'lodash-es'
+import { useLogs } from '@/app/components/workflow/run/hooks'
+import PanelWrap from '../before-run-form/panel-wrap'
+import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
+import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
+import { FlowType } from '@/types/common'
+import {
+  AuthorizedInDataSourceNode,
+  AuthorizedInNode,
+  PluginAuth,
+  PluginAuthInDataSourceNode,
+} from '@/app/components/plugins/plugin-auth'
+import { AuthCategory } from '@/app/components/plugins/plugin-auth'
+import { canFindTool } from '@/utils'
+import type { CustomRunFormProps } from '@/app/components/workflow/nodes/data-source/types'
+import { DataSourceClassification } from '@/app/components/workflow/nodes/data-source/types'
+import { useModalContext } from '@/context/modal-context'
+import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form'
+import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
+import { useCollaboration } from '@/app/components/workflow/collaboration/hooks/use-collaboration'
+import { collaborationManager } from '@/app/components/workflow/collaboration/core/collaboration-manager'
+import { useAppContext } from '@/context/app-context'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 
 const getCustomRunForm = (params: CustomRunFormProps): React.JSX.Element => {
   const nodeType = params.payload.type
@@ -100,11 +104,51 @@ const BasePanel: FC<BasePanelProps> = ({
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
+  const appId = useStore(s => s.appId)
+  const { userProfile } = useAppContext()
+  const { isConnected, nodePanelPresence } = useCollaboration(appId as string)
   const { showMessageLogModal } = useAppStore(useShallow(state => ({
     showMessageLogModal: state.showMessageLogModal,
   })))
   const isSingleRunning = data._singleRunningStatus === NodeRunningStatus.Running
 
+  const currentUserPresence = useMemo(() => {
+    const userId = userProfile?.id || ''
+    const username = userProfile?.name || userProfile?.email || 'User'
+    const avatar = userProfile?.avatar_url || userProfile?.avatar || null
+
+    return {
+      userId,
+      username,
+      avatar,
+    }
+  }, [userProfile?.avatar, userProfile?.avatar_url, userProfile?.email, userProfile?.id, userProfile?.name])
+
+  useEffect(() => {
+    if (!isConnected || !currentUserPresence.userId)
+      return
+
+    collaborationManager.emitNodePanelPresence(id, true, currentUserPresence)
+
+    return () => {
+      collaborationManager.emitNodePanelPresence(id, false, currentUserPresence)
+    }
+  }, [id, isConnected, currentUserPresence])
+
+  const viewingUsers = useMemo(() => {
+    const presence = nodePanelPresence?.[id]
+    if (!presence)
+      return []
+
+    return Object.values(presence)
+      .filter(viewer => viewer.userId && viewer.userId !== currentUserPresence.userId)
+      .map(viewer => ({
+        id: viewer.userId,
+        name: viewer.username,
+        avatar_url: viewer.avatar || null,
+      }))
+  }, [currentUserPresence.userId, id, nodePanelPresence])
+
   const showSingleRunPanel = useStore(s => s.showSingleRunPanel)
   const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
   const nodePanelWidth = useStore(s => s.nodePanelWidth)
@@ -475,6 +519,15 @@ const BasePanel: FC<BasePanelProps> = ({
               value={data.title || ''}
               onBlur={handleTitleBlur}
             />
+            {viewingUsers.length > 0 && (
+              <div className='ml-3 shrink-0'>
+                <UserAvatarList
+                  users={viewingUsers}
+                  maxVisible={3}
+                  size={24}
+                />
+              </div>
+            )}
             <div className='flex shrink-0 items-center text-text-tertiary'>
               {
                 isSupportSingleRun && !nodesReadOnly && (
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 73f78401ac..77a869154b 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next'
 import type { NodeProps } from '@/app/components/workflow/types'
 import {
   BlockEnum,
+  ControlMode,
   NodeRunningStatus,
   isTriggerNode,
 } from '@/app/components/workflow/types'
@@ -41,8 +42,12 @@ import EntryNodeContainer, { StartNodeTypeEnum } from './components/entry-node-c
 import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
-import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
-import { ToolTypeEnum } from '@/app/components/workflow/block-selector/types'
+import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
+import { ToolTypeEnum } from '../../block-selector/types'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import { useAppContext } from '@/context/app-context'
+import { useStore } from '@/app/components/workflow/store'
+import { useCollaboration } from '@/app/components/workflow/collaboration/hooks/use-collaboration'
 
 type NodeChildProps = {
   id: string
@@ -67,6 +72,36 @@ const BaseNode: FC<BaseNodeProps> = ({
   const { handleNodeIterationChildSizeChange } = useNodeIterationInteractions()
   const { handleNodeLoopChildSizeChange } = useNodeLoopInteractions()
   const toolIcon = useToolIcon(data)
+  const { userProfile } = useAppContext()
+  const appId = useStore(s => s.appId)
+  const { nodePanelPresence } = useCollaboration(appId as string)
+  const controlMode = useStore(s => s.controlMode)
+
+  const currentUserPresence = useMemo(() => {
+    const userId = userProfile?.id || ''
+    const username = userProfile?.name || userProfile?.email || 'User'
+    const avatar = userProfile?.avatar_url || userProfile?.avatar || null
+
+    return {
+      userId,
+      username,
+      avatar,
+    }
+  }, [userProfile?.avatar, userProfile?.avatar_url, userProfile?.email, userProfile?.id, userProfile?.name])
+
+  const viewingUsers = useMemo(() => {
+    const presence = nodePanelPresence?.[id]
+    if (!presence)
+      return []
+
+    return Object.values(presence)
+      .filter(viewer => viewer.userId && viewer.userId !== currentUserPresence.userId)
+      .map(viewer => ({
+        id: viewer.userId,
+        name: viewer.username,
+        avatar_url: viewer.avatar || null,
+      }))
+  }, [currentUserPresence.userId, id, nodePanelPresence])
 
   useEffect(() => {
     if (nodeRef.current && data.selected && data.isInIteration) {
@@ -176,6 +211,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         className={cn(
           'group relative pb-1 shadow-xs',
           'rounded-[15px] border border-transparent',
+          (controlMode === ControlMode.Comment) && 'hover:cursor-none',
           (data.type !== BlockEnum.Iteration && data.type !== BlockEnum.Loop) && 'w-[240px] bg-workflow-block-bg',
           (data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) && 'flex h-full w-full flex-col border-workflow-block-border bg-workflow-block-bg-transparent',
           !data._runningStatus && 'hover:shadow-lg',
@@ -250,7 +286,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='system-sm-semibold-uppercase mr-1 flex grow items-center justify-between truncate text-text-primary'
           >
             <div>
               {data.title}
@@ -271,6 +307,15 @@ const BaseNode: FC<BaseNodeProps> = ({
                 </Tooltip>
               )
             }
+            {viewingUsers.length > 0 && (
+              <div className='ml-3 shrink-0'>
+                <UserAvatarList
+                  users={viewingUsers}
+                  maxVisible={3}
+                  size={24}
+                />
+              </div>
+            )}
           </div>
           {
             data._iterationLength && data._iterationIndex && data._runningStatus === NodeRunningStatus.Running && (
diff --git a/web/app/components/workflow/nodes/code/code-parser.ts b/web/app/components/workflow/nodes/code/code-parser.ts
index 216e13eaca..4dea2a05dc 100644
--- a/web/app/components/workflow/nodes/code/code-parser.ts
+++ b/web/app/components/workflow/nodes/code/code-parser.ts
@@ -31,7 +31,7 @@ export const extractReturnType = (code: string, language: CodeLanguage): OutputV
   if (returnIndex === -1)
     return {}
 
-  // return から始まる部分文字列を取得
+  // Extract substring starting from return statement
   const codeAfterReturn = codeWithoutComments.slice(returnIndex)
 
   let bracketCount = 0
diff --git a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
index 44774074dc..251fb8d9d9 100644
--- a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
+++ b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
@@ -15,30 +15,48 @@ const strToKeyValueList = (value: string) => {
   })
 }
 
+const normalizeList = (items: KeyValue[]) => {
+  return items.map(item => ({
+    ...item,
+    id: item.id || uniqueId(UNIQUE_ID_PREFIX),
+  }))
+}
+
+const stringifyList = (items: KeyValue[], noFilter?: boolean) => {
+  const source = noFilter ? items : items.filter(item => item.key && item.value)
+  return source.map(item => `${item.key}:${item.value}`).join('\n')
+}
+
 const useKeyValueList = (value: string, onChange: (value: string) => void, noFilter?: boolean) => {
   const [list, doSetList] = useState<KeyValue[]>(() => value ? strToKeyValueList(value) : [])
-  const setList = (l: KeyValue[]) => {
-    doSetList(l.map((item) => {
-      return {
-        ...item,
-        id: item.id || uniqueId(UNIQUE_ID_PREFIX),
-      }
-    }))
-  }
-  useEffect(() => {
+  const setList = useCallback((nextList: KeyValue[]) => {
+    const normalized = normalizeList(nextList)
+    doSetList(normalized)
     if (noFilter)
       return
-    const newValue = list.filter(item => item.key && item.value).map(item => `${item.key}:${item.value}`).join('\n')
+
+    const newValue = stringifyList(normalized, noFilter)
     if (newValue !== value)
       onChange(newValue)
-  }, [list, noFilter])
+  }, [noFilter, onChange, value])
+
+  useEffect(() => {
+    doSetList((prev) => {
+      const targetItems = value ? strToKeyValueList(value) : []
+      const currentValue = stringifyList(prev, noFilter)
+      const targetValue = stringifyList(targetItems, noFilter)
+      if (currentValue === targetValue)
+        return prev
+      return normalizeList(targetItems)
+    })
+  }, [value, noFilter])
   const addItem = useCallback(() => {
     setList([...list, {
       id: uniqueId(UNIQUE_ID_PREFIX),
       key: '',
       value: '',
     }])
-  }, [list])
+  }, [list, setList])
 
   const [isKeyValueEdit, {
     toggle: toggleIsKeyValueEdit,
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 59b96b1e2d..c59fb9b599 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -60,7 +60,7 @@ const Node: FC<NodeProps<IterationNodeType>> = ({
         )
       }
       {
-        data._children!.length === 1 && (
+        data._children?.length === 1 && (
           <AddBlock
             iterationNodeId={id}
             iterationNodeData={data}
diff --git a/web/app/components/workflow/nodes/iteration/use-interactions.ts b/web/app/components/workflow/nodes/iteration/use-interactions.ts
index 3bbbaf252f..eb880bbf01 100644
--- a/web/app/components/workflow/nodes/iteration/use-interactions.ts
+++ b/web/app/components/workflow/nodes/iteration/use-interactions.ts
@@ -1,7 +1,6 @@
 import { useCallback } from 'react'
 import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
-import { useStoreApi } from 'reactflow'
 import type {
   BlockEnum,
   ChildNodeTypeCount,
@@ -16,21 +15,20 @@ import {
 } from '../../constants'
 import { CUSTOM_ITERATION_START_NODE } from '../iteration-start/constants'
 import { useNodesMetaData } from '@/app/components/workflow/hooks'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 export const useNodeIterationInteractions = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const handleNodeIterationRerender = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
 
-    const nodes = getNodes()
     const currentNode = nodes.find(n => n.id === nodeId)!
-    const childrenNodes = nodes.filter(n => n.parentId === nodeId)
+    const childrenNodes = nodes.filter(n => n.parentId === nodeId && n.type !== CUSTOM_ITERATION_START_NODE)
+    if (!childrenNodes.length)
+      return
     let rightNode: Node
     let bottomNode: Node
 
@@ -72,11 +70,10 @@ export const useNodeIterationInteractions = () => {
 
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeIterationChildDrag = useCallback((node: Node) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     const restrictPosition: { x?: number; y?: number } = { x: undefined, y: undefined }
 
@@ -98,21 +95,19 @@ export const useNodeIterationInteractions = () => {
     return {
       restrictPosition,
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeIterationChildSizeChange = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const parentId = currentNode.parentId
 
     if (parentId)
       handleNodeIterationRerender(parentId)
-  }, [store, handleNodeIterationRerender])
+  }, [collaborativeWorkflow, handleNodeIterationRerender])
 
   const handleNodeIterationChildrenCopy = useCallback((nodeId: string, newNodeId: string, idMapping: Record<string, string>) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const childrenNodes = nodes.filter(n => n.parentId === nodeId && n.type !== CUSTOM_ITERATION_START_NODE)
     const newIdMapping = { ...idMapping }
     const childNodeTypeCount: ChildNodeTypeCount = {}
@@ -154,7 +149,7 @@ export const useNodeIterationInteractions = () => {
       copyChildren,
       newIdMapping,
     }
-  }, [store, t])
+  }, [collaborativeWorkflow, t])
 
   return {
     handleNodeIterationRerender,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
index 73d1c15872..25b7aa6f85 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -215,21 +215,39 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
 
   const [selectedDatasetsLoaded, setSelectedDatasetsLoaded] = useState(false)
   // datasets
+  // Fetch details whenever dataset IDs change so create/delete stays consistent across collaborators.
   useEffect(() => {
-    (async () => {
-      const inputs = inputRef.current
-      const datasetIds = inputs.dataset_ids
-      if (datasetIds?.length > 0) {
-        const { data: dataSetsWithDetail } = await fetchDatasets({ url: '/datasets', params: { page: 1, ids: datasetIds } as any })
-        setSelectedDatasets(dataSetsWithDetail)
+    let aborted = false
+    const datasetIds = inputs.dataset_ids
+    const loadDatasets = async () => {
+      if (!datasetIds || datasetIds.length === 0) {
+        if (!aborted) {
+          setSelectedDatasets([])
+          setSelectedDatasetsLoaded(true)
+        }
+        return
       }
-      const newInputs = produce(inputs, (draft) => {
-        draft.dataset_ids = datasetIds
-      })
-      setInputs(newInputs)
-      setSelectedDatasetsLoaded(true)
-    })()
-  }, [])
+      setSelectedDatasetsLoaded(false)
+      try {
+        const { data: dataSetsWithDetail } = await fetchDatasets({
+          url: '/datasets',
+          params: { page: 1, ids: datasetIds } as any,
+        })
+        if (aborted)
+          return
+        setSelectedDatasets(dataSetsWithDetail)
+        updateDatasetsDetail(dataSetsWithDetail)
+      }
+      finally {
+        if (!aborted)
+          setSelectedDatasetsLoaded(true)
+      }
+    }
+    loadDatasets()
+    return () => {
+      aborted = true
+    }
+  }, [inputs.dataset_ids, updateDatasetsDetail])
 
   useEffect(() => {
     const inputs = inputRef.current
diff --git a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
index e4cc13835f..4f4b9d23b0 100644
--- a/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx
@@ -41,6 +41,9 @@ const FormItem = ({
 }: FormItemProps) => {
   const { t } = useTranslation()
   const { value_type, var_type, value } = item
+  const normalizedVarValue = useMemo(() => {
+    return Array.isArray(value) ? value : []
+  }, [value])
 
   const handleInputChange = useCallback((e: any) => {
     onChange(e.target.value)
@@ -79,7 +82,7 @@ const FormItem = ({
             readonly={false}
             nodeId={nodeId}
             isShowNodeName
-            value={value}
+            value={normalizedVarValue}
             onChange={handleChange}
             filterVar={filterVar}
             placeholder={t('workflow.nodes.assigner.setParameter') as string}
diff --git a/web/app/components/workflow/nodes/loop/node.tsx b/web/app/components/workflow/nodes/loop/node.tsx
index 57be10be6e..b1e1befeed 100644
--- a/web/app/components/workflow/nodes/loop/node.tsx
+++ b/web/app/components/workflow/nodes/loop/node.tsx
@@ -46,7 +46,7 @@ const Node: FC<NodeProps<LoopNodeType>> = ({
         )
       }
       {
-        data._children!.length === 1 && (
+        data._children?.length === 1 && (
           <AddBlock
             loopNodeId={id}
             loopNodeData={data}
diff --git a/web/app/components/workflow/nodes/loop/use-config.ts b/web/app/components/workflow/nodes/loop/use-config.ts
index e8504fb5e9..a98eb8e42f 100644
--- a/web/app/components/workflow/nodes/loop/use-config.ts
+++ b/web/app/components/workflow/nodes/loop/use-config.ts
@@ -1,5 +1,6 @@
 import {
   useCallback,
+  useEffect,
   useRef,
 } from 'react'
 import { produce } from 'immer'
@@ -41,6 +42,9 @@ const useConfig = (id: string, payload: LoopNodeType) => {
 
   const { inputs, setInputs } = useNodeCrud<LoopNodeType>(id, payload)
   const inputsRef = useRef(inputs)
+  useEffect(() => {
+    inputsRef.current = inputs
+  }, [inputs])
   const handleInputsChange = useCallback((newInputs: LoopNodeType) => {
     inputsRef.current = newInputs
     setInputs(newInputs)
diff --git a/web/app/components/workflow/nodes/loop/use-interactions.ts b/web/app/components/workflow/nodes/loop/use-interactions.ts
index 737da404a0..c8c2cf069c 100644
--- a/web/app/components/workflow/nodes/loop/use-interactions.ts
+++ b/web/app/components/workflow/nodes/loop/use-interactions.ts
@@ -1,6 +1,5 @@
 import { useCallback } from 'react'
 import { produce } from 'immer'
-import { useStoreApi } from 'reactflow'
 import type {
   BlockEnum,
   Node,
@@ -14,20 +13,18 @@ import {
 } from '../../constants'
 import { CUSTOM_LOOP_START_NODE } from '../loop-start/constants'
 import { useNodesMetaData } from '@/app/components/workflow/hooks'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 export const useNodeLoopInteractions = () => {
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const { nodesMap: nodesMetaDataMap } = useNodesMetaData()
 
   const handleNodeLoopRerender = useCallback((nodeId: string) => {
-    const {
-      getNodes,
-      setNodes,
-    } = store.getState()
-
-    const nodes = getNodes()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(n => n.id === nodeId)!
-    const childrenNodes = nodes.filter(n => n.parentId === nodeId)
+    const childrenNodes = nodes.filter(n => n.parentId === nodeId && n.type !== CUSTOM_LOOP_START_NODE)
+    if (!childrenNodes.length)
+      return
     let rightNode: Node
     let bottomNode: Node
 
@@ -69,11 +66,10 @@ export const useNodeLoopInteractions = () => {
 
       setNodes(newNodes)
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeLoopChildDrag = useCallback((node: Node) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
 
     const restrictPosition: { x?: number; y?: number } = { x: undefined, y: undefined }
 
@@ -95,21 +91,19 @@ export const useNodeLoopInteractions = () => {
     return {
       restrictPosition,
     }
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const handleNodeLoopChildSizeChange = useCallback((nodeId: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const currentNode = nodes.find(n => n.id === nodeId)!
     const parentId = currentNode.parentId
 
     if (parentId)
       handleNodeLoopRerender(parentId)
-  }, [store, handleNodeLoopRerender])
+  }, [collaborativeWorkflow, handleNodeLoopRerender])
 
   const handleNodeLoopChildrenCopy = useCallback((nodeId: string, newNodeId: string) => {
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
+    const { nodes } = collaborativeWorkflow.getState()
     const childrenNodes = nodes.filter(n => n.parentId === nodeId && n.type !== CUSTOM_LOOP_START_NODE)
 
     return childrenNodes.map((child, index) => {
@@ -140,7 +134,7 @@ export const useNodeLoopInteractions = () => {
       newNode.id = `${newNodeId}${newNode.id + index}`
       return newNode
     })
-  }, [store, nodesMetaDataMap])
+  }, [collaborativeWorkflow, nodesMetaDataMap])
 
   return {
     handleNodeLoopRerender,
diff --git a/web/app/components/workflow/note-node/note-editor/context.tsx b/web/app/components/workflow/note-node/note-editor/context.tsx
index c9e7eb56c8..4288ec57c0 100644
--- a/web/app/components/workflow/note-node/note-editor/context.tsx
+++ b/web/app/components/workflow/note-node/note-editor/context.tsx
@@ -3,22 +3,73 @@
 import {
   createContext,
   memo,
+  useEffect,
   useRef,
 } from 'react'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { LinkNode } from '@lexical/link'
 import {
   ListItemNode,
   ListNode,
 } from '@lexical/list'
+import { $getRoot } from 'lexical'
 import { createNoteEditorStore } from './store'
 import theme from './theme'
 
+const NoteEditorContentSynchronizer = ({ value }: { value?: string }) => {
+  const [editor] = useLexicalComposerContext()
+  const lastSyncedValueRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    const normalizedValue = normalizeEditorState(value)
+    if (normalizedValue === lastSyncedValueRef.current)
+      return
+
+    const currentSerializedState = JSON.stringify(editor.getEditorState().toJSON())
+    if (normalizedValue === currentSerializedState) {
+      lastSyncedValueRef.current = normalizedValue
+      return
+    }
+
+    if (!normalizedValue) {
+      let hasContent = false
+      editor.getEditorState().read(() => {
+        hasContent = !$getRoot().isEmpty()
+      })
+
+      if (!hasContent) {
+        lastSyncedValueRef.current = normalizedValue
+        return
+      }
+
+      editor.update(() => {
+        const root = $getRoot()
+        root.clear()
+        root.select()
+      })
+      lastSyncedValueRef.current = normalizedValue
+      return
+    }
+
+    try {
+      const nextState = editor.parseEditorState(normalizedValue)
+      editor.setEditorState(nextState)
+      lastSyncedValueRef.current = normalizedValue
+    }
+    catch {
+      lastSyncedValueRef.current = ''
+    }
+  }, [editor, value])
+
+  return null
+}
+
 type NoteEditorStore = ReturnType<typeof createNoteEditorStore>
 const NoteEditorContext = createContext<NoteEditorStore | null>(null)
 
 type NoteEditorContextProviderProps = {
-  value: string
+  value?: string
   children: React.JSX.Element | string | (React.JSX.Element | string)[]
   editable?: boolean
 }
@@ -34,7 +85,8 @@ export const NoteEditorContextProvider = memo(({
 
   let initialValue = null
   try {
-    initialValue = JSON.parse(value)
+    if (value)
+      initialValue = JSON.parse(value)
   }
   catch {
 
@@ -58,6 +110,7 @@ export const NoteEditorContextProvider = memo(({
   return (
     <NoteEditorContext.Provider value={storeRef.current}>
       <LexicalComposer initialConfig={{ ...initialConfig }}>
+        <NoteEditorContentSynchronizer value={value} />
         {children}
       </LexicalComposer>
     </NoteEditorContext.Provider>
@@ -66,3 +119,19 @@ export const NoteEditorContextProvider = memo(({
 NoteEditorContextProvider.displayName = 'NoteEditorContextProvider'
 
 export default NoteEditorContext
+
+function normalizeEditorState(value?: string): string {
+  if (!value)
+    return ''
+
+  try {
+    const parsed = JSON.parse(value)
+    if (!parsed || typeof parsed !== 'object' || !parsed.root)
+      return ''
+
+    return JSON.stringify(parsed)
+  }
+  catch {
+    return ''
+  }
+}
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index 7f1225de86..6b4e0d0e4a 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -11,6 +11,7 @@ import {
   RiHand,
   RiStickyNoteAddLine,
 } from '@remixicon/react'
+import { Comment } from '@/app/components/base/icons/src/public/other'
 import {
   useNodesReadOnly,
   useWorkflowCanvasMaximize,
@@ -32,7 +33,12 @@ const Control = () => {
   const { t } = useTranslation()
   const controlMode = useStore(s => s.controlMode)
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
-  const { handleModePointer, handleModeHand } = useWorkflowMoveMode()
+  const {
+    handleModePointer,
+    handleModeHand,
+    handleModeComment,
+    isCommentModeAvailable,
+  } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
   const { handleAddNote } = useOperator()
   const {
@@ -88,6 +94,20 @@ const Control = () => {
           <RiHand className='h-4 w-4' />
         </div>
       </TipPopup>
+      {isCommentModeAvailable && (
+        <TipPopup title={t('workflow.common.commentMode')} shortcuts={['c']}>
+          <div
+            className={cn(
+              'ml-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+              controlMode === ControlMode.Comment ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+              `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+            )}
+            onClick={handleModeComment}
+          >
+            <Comment className='h-4 w-4' />
+          </div>
+        </TipPopup>
+      )}
       <Divider className='my-1 w-3.5' />
       <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
         <div
diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index b4fcf184a7..e1de853a18 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { Node } from 'reactflow'
 import { MiniMap } from 'reactflow'
 import UndoRedo from '../header/undo-redo'
@@ -6,6 +6,7 @@ import ZoomInOut from './zoom-in-out'
 import VariableTrigger from '../variable-inspect/trigger'
 import VariableInspectPanel from '../variable-inspect'
 import { useStore } from '../store'
+import { ControlMode } from '../types'
 
 export type OperatorProps = {
   handleUndo: () => void
@@ -14,6 +15,26 @@ export type OperatorProps = {
 
 const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
   const bottomPanelRef = useRef<HTMLDivElement>(null)
+  const [showMiniMap, setShowMiniMap] = useState(true)
+  const showUserCursors = useStore(s => s.showUserCursors)
+  const setShowUserCursors = useStore(s => s.setShowUserCursors)
+  const showUserComments = useStore(s => s.showUserComments)
+  const setShowUserComments = useStore(s => s.setShowUserComments)
+  const controlMode = useStore(s => s.controlMode)
+  const isCommentMode = controlMode === ControlMode.Comment
+
+  const handleToggleMiniMap = useCallback(() => {
+    setShowMiniMap(prev => !prev)
+  }, [])
+
+  const handleToggleUserCursors = useCallback(() => {
+    setShowUserCursors(!showUserCursors)
+  }, [showUserCursors, setShowUserCursors])
+
+  const handleToggleUserComments = useCallback(() => {
+    setShowUserComments(!showUserComments)
+  }, [showUserComments, setShowUserComments])
+
   const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
   const rightPanelWidth = useStore(s => s.rightPanelWidth)
   const setBottomPanelWidth = useStore(s => s.setBottomPanelWidth)
@@ -51,7 +72,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
   return (
     <div
       ref={bottomPanelRef}
-      className='absolute bottom-0 left-0 right-0 z-10 px-1'
+      className='absolute bottom-0 left-0 right-0 z-[60] px-1'
       style={
         {
           width: bottomPanelWidth,
@@ -64,20 +85,30 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
         </div>
         <VariableTrigger />
         <div className='relative'>
-          <MiniMap
-            pannable
-            zoomable
-            style={{
-              width: 102,
-              height: 72,
-            }}
-            maskColor='var(--color-workflow-minimap-bg)'
-            nodeClassName={getMiniMapNodeClassName}
-            nodeStrokeWidth={3}
-            className='!absolute !bottom-10 z-[9] !m-0 !h-[73px] !w-[103px] !rounded-lg !border-[0.5px]
-            !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
+          {showMiniMap && (
+            <MiniMap
+              pannable
+              zoomable
+              style={{
+                width: 102,
+                height: 72,
+              }}
+              maskColor='var(--color-workflow-minimap-bg)'
+              nodeClassName={getMiniMapNodeClassName}
+              nodeStrokeWidth={3}
+              className='!absolute !bottom-10 z-[9] !m-0 !h-[73px] !w-[103px] !rounded-lg !border-[0.5px]
+              !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
+            />
+          )}
+          <ZoomInOut
+            showMiniMap={showMiniMap}
+            onToggleMiniMap={handleToggleMiniMap}
+            showUserCursors={showUserCursors}
+            onToggleUserCursors={handleToggleUserCursors}
+            showUserComments={showUserComments}
+            onToggleUserComments={handleToggleUserComments}
+            isCommentMode={isCommentMode}
           />
-          <ZoomInOut />
         </div>
       </div>
       <VariableInspectPanel />
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 19d8eef463..5d2400bc92 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -6,6 +6,8 @@ import {
   useState,
 } from 'react'
 import {
+  RiCheckLine,
+  RiFullscreenLine,
   RiZoomInLine,
   RiZoomOutLine,
 } from '@remixicon/react'
@@ -28,6 +30,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 enum ZoomType {
   zoomIn = 'zoomIn',
@@ -38,9 +41,30 @@ enum ZoomType {
   zoomTo75 = 'zoomTo75',
   zoomTo100 = 'zoomTo100',
   zoomTo200 = 'zoomTo200',
+  toggleUserComments = 'toggleUserComments',
+  toggleUserCursors = 'toggleUserCursors',
+  toggleMiniMap = 'toggleMiniMap',
 }
 
-const ZoomInOut: FC = () => {
+type ZoomInOutProps = {
+  showMiniMap?: boolean
+  onToggleMiniMap?: () => void
+  showUserCursors?: boolean
+  onToggleUserCursors?: () => void
+  showUserComments?: boolean
+  onToggleUserComments?: () => void
+  isCommentMode?: boolean
+}
+
+const ZoomInOut: FC<ZoomInOutProps> = ({
+  showMiniMap = true,
+  onToggleMiniMap,
+  showUserCursors = true,
+  onToggleUserCursors,
+  showUserComments = true,
+  onToggleUserComments,
+  isCommentMode = false,
+}) => {
   const { t } = useTranslation()
   const {
     zoomIn,
@@ -55,6 +79,7 @@ const ZoomInOut: FC = () => {
     workflowReadOnly,
     getWorkflowReadOnly,
   } = useWorkflowReadOnly()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
 
   const ZOOM_IN_OUT_OPTIONS = [
     [
@@ -78,13 +103,32 @@ const ZoomInOut: FC = () => {
         key: ZoomType.zoomTo25,
         text: '25%',
       },
-    ],
-    [
       {
         key: ZoomType.zoomToFit,
         text: t('workflow.operator.zoomToFit'),
       },
     ],
+    isCollaborationEnabled
+      ? [
+        {
+          key: ZoomType.toggleUserComments,
+          text: t('workflow.operator.showUserComments'),
+        },
+        {
+          key: ZoomType.toggleUserCursors,
+          text: t('workflow.operator.showUserCursors'),
+        },
+        {
+          key: ZoomType.toggleMiniMap,
+          text: t('workflow.operator.showMiniMap'),
+        },
+      ]
+      : [
+        {
+          key: ZoomType.toggleMiniMap,
+          text: t('workflow.operator.showMiniMap'),
+        },
+      ],
   ]
 
   const handleZoom = (type: string) => {
@@ -109,6 +153,23 @@ const ZoomInOut: FC = () => {
     if (type === ZoomType.zoomTo200)
       zoomTo(2)
 
+    if (type === ZoomType.toggleUserComments) {
+      if (!isCommentMode)
+        onToggleUserComments?.()
+
+      return
+    }
+
+    if (type === ZoomType.toggleUserCursors) {
+      onToggleUserCursors?.()
+      return
+    }
+
+    if (type === ZoomType.toggleMiniMap) {
+      onToggleMiniMap?.()
+      return
+    }
+
     handleSyncWorkflowDraft()
   }
 
@@ -177,8 +238,8 @@ const ZoomInOut: FC = () => {
           </div>
         </div>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-10'>
-        <div className='w-[145px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
+      <PortalToFollowElemContent className='z-[60]'>
+        <div className='w-[192px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
           {
             ZOOM_IN_OUT_OPTIONS.map((options, i) => (
               <Fragment key={i}>
@@ -192,10 +253,43 @@ const ZoomInOut: FC = () => {
                     options.map(option => (
                       <div
                         key={option.key}
-                        className='system-md-regular flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg py-1.5 pl-3 pr-2 text-text-secondary hover:bg-state-base-hover'
+                        className={`system-md-regular flex h-8 cursor-pointer items-center justify-between space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover ${
+                          option.key === ZoomType.toggleUserComments && isCommentMode
+                            ? 'cursor-not-allowed opacity-50'
+                            : ''
+                        }`}
                         onClick={() => handleZoom(option.key)}
                       >
-                        <span>{option.text}</span>
+                        <div className='flex items-center space-x-2'>
+                          {option.key === ZoomType.toggleUserComments && showUserComments && (
+                            <RiCheckLine className='h-4 w-4 text-text-accent' />
+                          )}
+                          {option.key === ZoomType.toggleUserComments && !showUserComments && (
+                            <div className='h-4 w-4' />
+                          )}
+                          {option.key === ZoomType.toggleUserCursors && showUserCursors && (
+                            <RiCheckLine className='h-4 w-4 text-text-accent' />
+                          )}
+                          {option.key === ZoomType.toggleUserCursors && !showUserCursors && (
+                            <div className='h-4 w-4' />
+                          )}
+                          {option.key === ZoomType.toggleMiniMap && showMiniMap && (
+                            <RiCheckLine className='h-4 w-4 text-text-accent' />
+                          )}
+                          {option.key === ZoomType.toggleMiniMap && !showMiniMap && (
+                            <div className='h-4 w-4' />
+                          )}
+                          {option.key === ZoomType.zoomToFit && (
+                            <RiFullscreenLine className='h-4 w-4 text-text-tertiary' />
+                          )}
+                          {option.key !== ZoomType.toggleUserComments
+                           && option.key !== ZoomType.toggleUserCursors
+                           && option.key !== ZoomType.toggleMiniMap
+                           && option.key !== ZoomType.zoomToFit && (
+                            <div className='h-4 w-4' />
+                          )}
+                          <span>{option.text}</span>
+                        </div>
                         <div className='flex items-center space-x-0.5'>
                           {
                             option.key === ZoomType.zoomToFit && (
diff --git a/web/app/components/workflow/panel/chat-variable-panel/index.tsx b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
index 7006c18cc5..b7c654066b 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -3,9 +3,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import {
-  useStoreApi,
-} from 'reactflow'
 import { RiBookOpenLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/workflow/store'
@@ -19,30 +16,24 @@ import type {
   ConversationVariable,
 } from '@/app/components/workflow/types'
 import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
 import { BlockEnum } from '@/app/components/workflow/types'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
 import { useDocLink } from '@/context/i18n'
 import cn from '@/utils/classnames'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
+import { updateConversationVariables } from '@/service/workflow'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 const ChatVariablePanel = () => {
   const { t } = useTranslation()
   const docLink = useDocLink()
-  const store = useStoreApi()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const varList = useStore(s => s.conversationVariables) as ConversationVariable[]
   const updateChatVarList = useStore(s => s.setConversationVariables)
-  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+  const appId = useStore(s => s.appId) as string
   const {
     invalidateConversationVarValues,
   } = useInspectVarsCrud()
-  const handleVarChanged = useCallback(() => {
-    doSyncWorkflowDraft(false, {
-      onSuccess() {
-        invalidateConversationVarValues()
-      },
-    })
-  }, [doSyncWorkflowDraft, invalidateConversationVarValues])
 
   const [showTip, setShowTip] = useState(true)
   const [showVariableModal, setShowVariableModal] = useState(false)
@@ -50,40 +41,63 @@ const ChatVariablePanel = () => {
 
   const [showRemoveVarConfirm, setShowRemoveConfirm] = useState(false)
   const [cacheForDelete, setCacheForDelete] = useState<ConversationVariable>()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   const getEffectedNodes = useCallback((chatVar: ConversationVariable) => {
-    const { getNodes } = store.getState()
-    const allNodes = getNodes()
+    const { nodes: allNodes } = collaborativeWorkflow.getState()
     return findUsedVarNodes(
       ['conversation', chatVar.name],
       allNodes,
     )
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const removeUsedVarInNodes = useCallback((chatVar: ConversationVariable) => {
-    const { getNodes, setNodes } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const effectedNodes = getEffectedNodes(chatVar)
-    const newNodes = getNodes().map((node) => {
+    const newNodes = nodes.map((node) => {
       if (effectedNodes.find(n => n.id === node.id))
         return updateNodeVars(node, ['conversation', chatVar.name], [])
 
       return node
     })
     setNodes(newNodes)
-  }, [getEffectedNodes, store])
+  }, [getEffectedNodes, collaborativeWorkflow])
 
   const handleEdit = (chatVar: ConversationVariable) => {
     setCurrentVar(chatVar)
     setShowVariableModal(true)
   }
 
-  const handleDelete = useCallback((chatVar: ConversationVariable) => {
+  const handleDelete = useCallback(async (chatVar: ConversationVariable) => {
     removeUsedVarInNodes(chatVar)
-    updateChatVarList(varList.filter(v => v.id !== chatVar.id))
+    const newVarList = varList.filter(v => v.id !== chatVar.id)
+    updateChatVarList(newVarList)
     setCacheForDelete(undefined)
     setShowRemoveConfirm(false)
-    handleVarChanged()
-  }, [handleVarChanged, removeUsedVarInNodes, updateChatVarList, varList])
+
+    // Use new dedicated conversation variables API instead of workflow draft sync
+    try {
+      await updateConversationVariables({
+        appId,
+        conversationVariables: newVarList,
+      })
+
+      // Emit update event to other connected clients
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+
+      invalidateConversationVarValues()
+    }
+    catch (error) {
+      console.error('Failed to update conversation variables:', error)
+      // Revert local state on error
+      updateChatVarList(varList)
+    }
+  }, [removeUsedVarInNodes, updateChatVarList, varList, appId, invalidateConversationVarValues])
 
   const deleteCheck = useCallback((chatVar: ConversationVariable) => {
     const effectedNodes = getEffectedNodes(chatVar)
@@ -97,21 +111,46 @@ const ChatVariablePanel = () => {
   }, [getEffectedNodes, handleDelete])
 
   const handleSave = useCallback(async (chatVar: ConversationVariable) => {
-    // add chatVar
+    let newList: ConversationVariable[]
+
     if (!currentVar) {
-      const newList = [chatVar, ...varList]
+      // Adding new conversation variable
+      newList = [chatVar, ...varList]
       updateChatVarList(newList)
-      handleVarChanged()
+
+      // Use new dedicated conversation variables API
+      try {
+        await updateConversationVariables({
+          appId,
+          conversationVariables: newList,
+        })
+
+        const socket = webSocketClient.getSocket(appId)
+        if (socket) {
+          socket.emit('collaboration_event', {
+            type: 'vars_and_features_update',
+          })
+        }
+
+        invalidateConversationVarValues()
+      }
+      catch (error) {
+        console.error('Failed to update conversation variables:', error)
+        // Revert local state on error
+        updateChatVarList(varList)
+      }
       return
     }
-    // edit chatVar
-    const newList = varList.map(v => v.id === currentVar.id ? chatVar : v)
+
+    // Updating existing conversation variable
+    newList = varList.map(v => v.id === currentVar.id ? chatVar : v)
     updateChatVarList(newList)
-    // side effects of rename env
+
+    // side effects of rename conversation variable
     if (currentVar.name !== chatVar.name) {
-      const { getNodes, setNodes } = store.getState()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
       const effectedNodes = getEffectedNodes(currentVar)
-      const newNodes = getNodes().map((node) => {
+      const newNodes = nodes.map((node) => {
         if (effectedNodes.find(n => n.id === node.id))
           return updateNodeVars(node, ['conversation', currentVar.name], ['conversation', chatVar.name])
 
@@ -119,8 +158,29 @@ const ChatVariablePanel = () => {
       })
       setNodes(newNodes)
     }
-    handleVarChanged()
-  }, [currentVar, getEffectedNodes, handleVarChanged, store, updateChatVarList, varList])
+
+    // Use new dedicated conversation variables API
+    try {
+      await updateConversationVariables({
+        appId,
+        conversationVariables: newList,
+      })
+
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+
+      invalidateConversationVarValues()
+    }
+    catch (error) {
+      console.error('Failed to update conversation variables:', error)
+      // Revert local state on error
+      updateChatVarList(varList)
+    }
+  }, [currentVar, getEffectedNodes, collaborativeWorkflow, updateChatVarList, varList, appId, invalidateConversationVarValues])
 
   return (
     <div
diff --git a/web/app/components/workflow/panel/comments-panel/index.tsx b/web/app/components/workflow/panel/comments-panel/index.tsx
new file mode 100644
index 0000000000..9321d48f49
--- /dev/null
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@@ -0,0 +1,197 @@
+import { memo, useCallback, useMemo, useState } from 'react'
+import { RiCheckLine, RiCheckboxCircleFill, RiCheckboxCircleLine, RiCloseLine, RiFilter3Line } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@/app/components/workflow/store'
+import type { WorkflowCommentList } from '@/service/workflow-comment'
+import { useWorkflowComment } from '@/app/components/workflow/hooks/use-workflow-comment'
+import { UserAvatarList } from '@/app/components/base/user-avatar-list'
+import cn from '@/utils/classnames'
+import { ControlMode } from '@/app/components/workflow/types'
+import { resolveWorkflowComment } from '@/service/workflow-comment'
+import { useParams } from 'next/navigation'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
+import { useAppContext } from '@/context/app-context'
+import { collaborationManager } from '@/app/components/workflow/collaboration'
+import Divider from '@/app/components/base/divider'
+import Switch from '@/app/components/base/switch'
+
+const CommentsPanel = () => {
+  const { t } = useTranslation()
+  const activeCommentId = useStore(s => s.activeCommentId)
+  const setActiveCommentId = useStore(s => s.setActiveCommentId)
+  const setControlMode = useStore(s => s.setControlMode)
+  const { comments, loading, loadComments, handleCommentIconClick } = useWorkflowComment()
+  const params = useParams()
+  const appId = params.appId as string
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+
+  const [showOnlyMine, setShowOnlyMine] = useState(false)
+  const [showOnlyUnresolved, setShowOnlyUnresolved] = useState(false)
+  const [showFilter, setShowFilter] = useState(false)
+
+  const handleSelect = useCallback((comment: WorkflowCommentList) => {
+    handleCommentIconClick(comment)
+  }, [handleCommentIconClick])
+
+  const { userProfile } = useAppContext()
+
+  const filteredSorted = useMemo(() => {
+    let data = comments
+    if (showOnlyUnresolved)
+      data = data.filter(c => !c.resolved)
+    if (showOnlyMine)
+      data = data.filter(c => c.created_by === userProfile?.id)
+    return data
+  }, [comments, showOnlyMine, showOnlyUnresolved, userProfile?.id])
+
+  const handleResolve = useCallback(async (comment: WorkflowCommentList) => {
+    if (comment.resolved) return
+    if (!appId) return
+    try {
+      await resolveWorkflowComment(appId, comment.id)
+
+      collaborationManager.emitCommentsUpdate(appId)
+
+      await loadComments()
+      setActiveCommentId(comment.id)
+    }
+    catch (e) {
+      console.error('Resolve comment failed', e)
+    }
+  }, [appId, loadComments, setActiveCommentId])
+
+  const hasActiveFilter = showOnlyMine || !showOnlyUnresolved
+
+  return (
+    <div className={cn('relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg')}>
+      <div className='flex items-center justify-between p-4 pb-2'>
+        <div className='system-xl-semibold font-semibold leading-6 text-text-primary'>{t('workflow.comments.panelTitle')}</div>
+        <div className='relative flex items-center gap-2'>
+          <button
+            className={cn(
+              'group flex h-6 w-6 items-center justify-center rounded-md hover:bg-state-accent-active',
+              hasActiveFilter && 'bg-state-accent-active',
+            )}
+            aria-label='Filter comments'
+            onClick={() => setShowFilter(v => !v)}
+          >
+            <RiFilter3Line className={cn(
+              'h-4 w-4 text-text-secondary group-hover:text-text-accent',
+              hasActiveFilter && 'text-text-accent',
+            )} />
+          </button>
+          {showFilter && (
+            <div className='absolute right-10 top-9 z-50 min-w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[10px]'>
+              <button
+                className={cn('flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', !showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
+                onClick={() => {
+                  setShowOnlyMine(false)
+                  setShowFilter(false)
+                }}
+              >
+                <span className='text-text-secondary'>All</span>
+                {!showOnlyMine && <RiCheckLine className='h-4 w-4 text-primary-600' />}
+              </button>
+              <button
+                className={cn('mt-1 flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm hover:bg-state-base-hover', showOnlyMine && 'bg-components-panel-on-panel-item-bg')}
+                onClick={() => {
+                  setShowOnlyMine(true)
+                  setShowFilter(false)
+                }}
+              >
+                <span className='text-text-secondary'>Only your threads</span>
+                {showOnlyMine && <RiCheckLine className='h-4 w-4 text-primary-600' />}
+              </button>
+              <Divider type='horizontal' className='my-1' />
+              <div
+                className='flex w-full items-center justify-between rounded-md px-2 py-2'
+                onClick={(e) => {
+                  e.stopPropagation()
+                }}
+              >
+                <span className='text-sm text-text-secondary'>Show resolved</span>
+                <Switch
+                  size='md'
+                  defaultValue={!showOnlyUnresolved}
+                  onChange={(checked) => {
+                    setShowOnlyUnresolved(!checked)
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          <Divider type='vertical' className='h-3.5' />
+          <div
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+            onClick={() => {
+              setControlMode(ControlMode.Pointer)
+              setActiveCommentId(null)
+            }}
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='grow overflow-y-auto px-1'>
+        {filteredSorted.map((c) => {
+          const isActive = activeCommentId === c.id
+          return (
+            <div
+              key={c.id}
+              className={cn('group mb-2 cursor-pointer rounded-xl bg-components-panel-bg p-3 transition-colors hover:bg-components-panel-on-panel-item-bg-hover', isActive && 'bg-components-panel-on-panel-item-bg-hover')}
+              onClick={() => handleSelect(c)}
+            >
+              <div className='min-w-0'>
+                <div className='mb-1 flex items-center justify-between'>
+                  <UserAvatarList
+                    users={c.participants}
+                    maxVisible={3}
+                    size={24}
+                  />
+                  <div className='ml-2 flex items-center'>
+                    {c.resolved ? (
+                      <RiCheckboxCircleFill className='h-4 w-4 text-text-secondary'/>
+                    ) : (
+                      <RiCheckboxCircleLine
+                        className='h-4 w-4 cursor-pointer text-text-tertiary hover:text-text-secondary'
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          handleResolve(c)
+                        }}
+                      />
+                    )}
+                  </div>
+                </div>
+                {/* Header row: creator + time */}
+                <div className='flex items-start'>
+                  <div className='flex min-w-0 items-center gap-2'>
+                    <div className='system-sm-medium truncate text-text-primary'>{c.created_by_account.name}</div>
+                    <div className='system-2xs-regular shrink-0 text-text-tertiary'>
+                      {formatTimeFromNow(c.updated_at * 1000)}
+                    </div>
+                  </div>
+                </div>
+                {/* Content */}
+                <div className='system-sm-regular mt-1 line-clamp-3 break-words text-text-secondary'>{c.content}</div>
+                {/* Footer */}
+                {c.reply_count > 0 && (
+                  <div className='mt-2 flex items-center justify-between'>
+                    <div className='system-2xs-regular text-text-tertiary'>
+                      {c.reply_count} {t('workflow.comments.reply')}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+        {!loading && filteredSorted.length === 0 && (
+          <div className='system-sm-regular mt-6 text-center text-text-tertiary'>{t('workflow.comments.noComments')}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default memo(CommentsPanel)
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index 135f5814ec..1d6a7fff11 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -3,9 +3,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import {
-  useStoreApi,
-} from 'reactflow'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/workflow/store'
@@ -17,17 +14,20 @@ import type {
 import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
 import cn from '@/utils/classnames'
-import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
+import { webSocketClient } from '@/app/components/workflow/collaboration/core/websocket-manager'
+import { useStore as useWorkflowStore } from '@/app/components/workflow/store'
+import { updateEnvironmentVariables } from '@/service/workflow'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 const EnvPanel = () => {
   const { t } = useTranslation()
-  const store = useStoreApi()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
   const envList = useStore(s => s.environmentVariables) as EnvironmentVariable[]
   const envSecrets = useStore(s => s.envSecrets)
   const updateEnvList = useStore(s => s.setEnvironmentVariables)
   const setEnvSecrets = useStore(s => s.setEnvSecrets)
-  const { doSyncWorkflowDraft } = useNodesSyncDraft()
+  const appId = useWorkflowStore(s => s.appId) as string
 
   const [showVariableModal, setShowVariableModal] = useState(false)
   const [currentVar, setCurrentVar] = useState<EnvironmentVariable>()
@@ -40,43 +40,65 @@ const EnvPanel = () => {
   }
 
   const getEffectedNodes = useCallback((env: EnvironmentVariable) => {
-    const { getNodes } = store.getState()
-    const allNodes = getNodes()
+    const { nodes: allNodes } = collaborativeWorkflow.getState()
     return findUsedVarNodes(
       ['env', env.name],
       allNodes,
     )
-  }, [store])
+  }, [collaborativeWorkflow])
 
   const removeUsedVarInNodes = useCallback((env: EnvironmentVariable) => {
-    const { getNodes, setNodes } = store.getState()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
     const effectedNodes = getEffectedNodes(env)
-    const newNodes = getNodes().map((node) => {
+    const newNodes = nodes.map((node) => {
       if (effectedNodes.find(n => n.id === node.id))
         return updateNodeVars(node, ['env', env.name], [])
 
       return node
     })
     setNodes(newNodes)
-  }, [getEffectedNodes, store])
+  }, [getEffectedNodes, collaborativeWorkflow])
 
   const handleEdit = (env: EnvironmentVariable) => {
     setCurrentVar(env)
     setShowVariableModal(true)
   }
 
-  const handleDelete = useCallback((env: EnvironmentVariable) => {
+  const handleDelete = useCallback(async (env: EnvironmentVariable) => {
     removeUsedVarInNodes(env)
-    updateEnvList(envList.filter(e => e.id !== env.id))
+    const newEnvList = envList.filter(e => e.id !== env.id)
+    updateEnvList(newEnvList)
     setCacheForDelete(undefined)
     setShowRemoveConfirm(false)
-    doSyncWorkflowDraft()
+
+    // Use new dedicated environment variables API instead of workflow draft sync
+    try {
+      await updateEnvironmentVariables({
+        appId,
+        environmentVariables: newEnvList,
+      })
+
+      // Emit update event to other connected clients
+      const socket = webSocketClient.getSocket(appId)
+      if (socket?.connected) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+          timestamp: Date.now(),
+        })
+      }
+    }
+    catch (error) {
+      console.error('Failed to update environment variables:', error)
+      // Revert local state on error
+      updateEnvList(envList)
+    }
+
     if (env.value_type === 'secret') {
       const newMap = { ...envSecrets }
       delete newMap[env.id]
       setEnvSecrets(newMap)
     }
-  }, [doSyncWorkflowDraft, envList, envSecrets, removeUsedVarInNodes, setEnvSecrets, updateEnvList])
+  }, [envList, envSecrets, removeUsedVarInNodes, setEnvSecrets, updateEnvList, appId])
 
   const deleteCheck = useCallback((env: EnvironmentVariable) => {
     const effectedNodes = getEffectedNodes(env)
@@ -92,20 +114,46 @@ const EnvPanel = () => {
   const handleSave = useCallback(async (env: EnvironmentVariable) => {
     // add env
     let newEnv = env
+    let newList: EnvironmentVariable[]
+
     if (!currentVar) {
+      // Adding new environment variable
       if (env.value_type === 'secret') {
         setEnvSecrets({
           ...envSecrets,
           [env.id]: formatSecret(env.value),
         })
       }
-      const newList = [env, ...envList]
+      newList = [env, ...envList]
       updateEnvList(newList)
-      await doSyncWorkflowDraft()
-      updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
+
+      // Use new dedicated environment variables API
+      try {
+        await updateEnvironmentVariables({
+          appId,
+          environmentVariables: newList,
+        })
+
+        const socket = webSocketClient.getSocket(appId)
+        if (socket) {
+          socket.emit('collaboration_event', {
+            type: 'vars_and_features_update',
+          })
+        }
+
+        // Hide secret values in UI
+        updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
+      }
+      catch (error) {
+        console.error('Failed to update environment variables:', error)
+        // Revert local state on error
+        updateEnvList(envList)
+      }
       return
     }
-    else if (currentVar.value_type === 'secret') {
+
+    // Updating existing environment variable
+    if (currentVar.value_type === 'secret') {
       if (env.value_type === 'secret') {
         if (envSecrets[currentVar.id] !== env.value) {
           newEnv = env
@@ -128,13 +176,15 @@ const EnvPanel = () => {
         })
       }
     }
-    const newList = envList.map(e => e.id === currentVar.id ? newEnv : e)
+
+    newList = envList.map(e => e.id === currentVar.id ? newEnv : e)
     updateEnvList(newList)
+
     // side effects of rename env
     if (currentVar.name !== env.name) {
-      const { getNodes, setNodes } = store.getState()
+      const { nodes, setNodes } = collaborativeWorkflow.getState()
       const effectedNodes = getEffectedNodes(currentVar)
-      const newNodes = getNodes().map((node) => {
+      const newNodes = nodes.map((node) => {
         if (effectedNodes.find(n => n.id === node.id))
           return updateNodeVars(node, ['env', currentVar.name], ['env', env.name])
 
@@ -142,9 +192,30 @@ const EnvPanel = () => {
       })
       setNodes(newNodes)
     }
-    await doSyncWorkflowDraft()
-    updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
-  }, [currentVar, doSyncWorkflowDraft, envList, envSecrets, getEffectedNodes, setEnvSecrets, store, updateEnvList])
+
+    // Use new dedicated environment variables API
+    try {
+      await updateEnvironmentVariables({
+        appId,
+        environmentVariables: newList,
+      })
+
+      const socket = webSocketClient.getSocket(appId)
+      if (socket) {
+        socket.emit('collaboration_event', {
+          type: 'vars_and_features_update',
+        })
+      }
+
+      // Hide secret values in UI
+      updateEnvList(newList.map(e => (e.id === env.id && env.value_type === 'secret') ? { ...e, value: '[__HIDDEN__]' } : e))
+    }
+    catch (error) {
+      console.error('Failed to update environment variables:', error)
+      // Revert local state on error
+      updateEnvList(envList)
+    }
+  }, [currentVar, envList, envSecrets, getEffectedNodes, setEnvSecrets, collaborativeWorkflow, updateEnvList, appId])
 
   return (
     <div
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 53392f2cd3..b46265fbfc 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -7,7 +7,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
-import { useStore as useReactFlowStore, useStoreApi } from 'reactflow'
+import { useStore as useReactFlowStore } from 'reactflow'
 import {
   RiAlignBottom,
   RiAlignCenter,
@@ -22,6 +22,7 @@ import { WorkflowHistoryEvent, useWorkflowHistory } from './hooks/use-workflow-h
 import { useStore } from './store'
 import { useSelectionInteractions } from './hooks/use-selection-interactions'
 import { useWorkflowStore } from './store'
+import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
 
 enum AlignType {
   Left = 'left',
@@ -42,8 +43,8 @@ const SelectionContextmenu = () => {
   const selectionMenu = useStore(s => s.selectionMenu)
 
   // Access React Flow methods
-  const store = useStoreApi()
   const workflowStore = useWorkflowStore()
+  const collaborativeWorkflow = useCollaborativeWorkflow()
 
   // Get selected nodes for alignment logic
   const selectedNodes = useReactFlowStore(state =>
@@ -256,7 +257,7 @@ const SelectionContextmenu = () => {
     workflowStore.setState({ nodeAnimation: false })
 
     // Get all current nodes
-    const nodes = store.getState().getNodes()
+    const { nodes, setNodes } = collaborativeWorkflow.getState()
 
     // Get all selected nodes
     const selectedNodeIds = selectedNodes.map(node => node.id)
@@ -312,7 +313,7 @@ const SelectionContextmenu = () => {
       const distributeNodes = handleDistributeNodes(nodesToAlign, nodes, alignType)
       if (distributeNodes) {
         // Apply node distribution updates
-        store.getState().setNodes(distributeNodes)
+        setNodes(distributeNodes)
         handleSelectionContextmenuCancel()
 
         // Clear guide lines
@@ -347,7 +348,7 @@ const SelectionContextmenu = () => {
     // Apply node position updates - consistent with handleNodeDrag and handleNodeDragStop
     try {
       // Directly use setNodes to update nodes - consistent with handleNodeDrag
-      store.getState().setNodes(newNodes)
+      setNodes(newNodes)
 
       // Close popup
       handleSelectionContextmenuCancel()
@@ -366,7 +367,7 @@ const SelectionContextmenu = () => {
     catch (err) {
       console.error('Failed to update nodes:', err)
     }
-  }, [store, workflowStore, selectedNodes, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory, handleSelectionContextmenuCancel, handleAlignNode, handleDistributeNodes])
+  }, [collaborativeWorkflow, workflowStore, selectedNodes, getNodesReadOnly, handleSyncWorkflowDraft, saveStateToHistory, handleSelectionContextmenuCancel, handleAlignNode, handleDistributeNodes])
 
   if (!selectionMenu)
     return null
diff --git a/web/app/components/workflow/store/workflow/comment-slice.ts b/web/app/components/workflow/store/workflow/comment-slice.ts
new file mode 100644
index 0000000000..01bc0dad29
--- /dev/null
+++ b/web/app/components/workflow/store/workflow/comment-slice.ts
@@ -0,0 +1,54 @@
+import type { StateCreator } from 'zustand'
+import type { UserProfile, WorkflowCommentDetail, WorkflowCommentList } from '@/service/workflow-comment'
+
+export type CommentSliceShape = {
+  comments: WorkflowCommentList[]
+  setComments: (comments: WorkflowCommentList[]) => void
+  commentsLoading: boolean
+  setCommentsLoading: (loading: boolean) => void
+  activeCommentDetail: WorkflowCommentDetail | null
+  setActiveCommentDetail: (comment: WorkflowCommentDetail | null) => void
+  activeCommentDetailLoading: boolean
+  setActiveCommentDetailLoading: (loading: boolean) => void
+  replySubmitting: boolean
+  setReplySubmitting: (loading: boolean) => void
+  replyUpdating: boolean
+  setReplyUpdating: (loading: boolean) => void
+  commentDetailCache: Record<string, WorkflowCommentDetail>
+  setCommentDetailCache: (cache: Record<string, WorkflowCommentDetail>) => void
+  mentionableUsersCache: Record<string, UserProfile[]>
+  setMentionableUsersCache: (appId: string, users: UserProfile[]) => void
+  mentionableUsersLoading: Record<string, boolean>
+  setMentionableUsersLoading: (appId: string, loading: boolean) => void
+}
+
+export const createCommentSlice: StateCreator<CommentSliceShape> = set => ({
+  comments: [],
+  setComments: comments => set({ comments }),
+  commentsLoading: false,
+  setCommentsLoading: commentsLoading => set({ commentsLoading }),
+  activeCommentDetail: null,
+  setActiveCommentDetail: activeCommentDetail => set({ activeCommentDetail }),
+  activeCommentDetailLoading: false,
+  setActiveCommentDetailLoading: activeCommentDetailLoading => set({ activeCommentDetailLoading }),
+  replySubmitting: false,
+  setReplySubmitting: replySubmitting => set({ replySubmitting }),
+  replyUpdating: false,
+  setReplyUpdating: replyUpdating => set({ replyUpdating }),
+  commentDetailCache: {},
+  setCommentDetailCache: commentDetailCache => set({ commentDetailCache }),
+  mentionableUsersCache: {},
+  setMentionableUsersCache: (appId, users) => set(state => ({
+    mentionableUsersCache: {
+      ...state.mentionableUsersCache,
+      [appId]: users,
+    },
+  })),
+  mentionableUsersLoading: {},
+  setMentionableUsersLoading: (appId, loading) => set(state => ({
+    mentionableUsersLoading: {
+      ...state.mentionableUsersLoading,
+      [appId]: loading,
+    },
+  })),
+})
diff --git a/web/app/components/workflow/store/workflow/index.ts b/web/app/components/workflow/store/workflow/index.ts
index da857fd0f2..3f8f0682eb 100644
--- a/web/app/components/workflow/store/workflow/index.ts
+++ b/web/app/components/workflow/store/workflow/index.ts
@@ -20,6 +20,8 @@ import type { NodeSliceShape } from './node-slice'
 import { createNodeSlice } from './node-slice'
 import type { PanelSliceShape } from './panel-slice'
 import { createPanelSlice } from './panel-slice'
+import type { CommentSliceShape } from './comment-slice'
+import { createCommentSlice } from './comment-slice'
 import type { ToolSliceShape } from './tool-slice'
 import { createToolSlice } from './tool-slice'
 import type { VersionSliceShape } from './version-slice'
@@ -49,6 +51,7 @@ export type Shape
   & HistorySliceShape
   & NodeSliceShape
   & PanelSliceShape
+  & CommentSliceShape
   & ToolSliceShape
   & VersionSliceShape
   & WorkflowDraftSliceShape
@@ -74,6 +77,7 @@ export const createWorkflowStore = (params: CreateWorkflowStoreParams) => {
     ...createHistorySlice(...args),
     ...createNodeSlice(...args),
     ...createPanelSlice(...args),
+    ...createCommentSlice(...args),
     ...createToolSlice(...args),
     ...createVersionSlice(...args),
     ...createWorkflowDraftSlice(...args),
diff --git a/web/app/components/workflow/store/workflow/panel-slice.ts b/web/app/components/workflow/store/workflow/panel-slice.ts
index 4848beeac5..c248e791b2 100644
--- a/web/app/components/workflow/store/workflow/panel-slice.ts
+++ b/web/app/components/workflow/store/workflow/panel-slice.ts
@@ -10,6 +10,12 @@ export type PanelSliceShape = {
   setShowInputsPanel: (showInputsPanel: boolean) => void
   showDebugAndPreviewPanel: boolean
   setShowDebugAndPreviewPanel: (showDebugAndPreviewPanel: boolean) => void
+  showCommentsPanel: boolean
+  setShowCommentsPanel: (showCommentsPanel: boolean) => void
+  showUserComments: boolean
+  setShowUserComments: (showUserComments: boolean) => void
+  showUserCursors: boolean
+  setShowUserCursors: (showUserCursors: boolean) => void
   panelMenu?: {
     top: number
     left: number
@@ -24,6 +30,8 @@ export type PanelSliceShape = {
   setShowVariableInspectPanel: (showVariableInspectPanel: boolean) => void
   initShowLastRunTab: boolean
   setInitShowLastRunTab: (initShowLastRunTab: boolean) => void
+  activeCommentId?: string | null
+  setActiveCommentId: (commentId: string | null) => void
 }
 
 export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
@@ -36,6 +44,12 @@ export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
   setShowInputsPanel: showInputsPanel => set(() => ({ showInputsPanel })),
   showDebugAndPreviewPanel: false,
   setShowDebugAndPreviewPanel: showDebugAndPreviewPanel => set(() => ({ showDebugAndPreviewPanel })),
+  showCommentsPanel: false,
+  setShowCommentsPanel: showCommentsPanel => set(() => ({ showCommentsPanel })),
+  showUserComments: true,
+  setShowUserComments: showUserComments => set(() => ({ showUserComments })),
+  showUserCursors: true,
+  setShowUserCursors: showUserCursors => set(() => ({ showUserCursors })),
   panelMenu: undefined,
   setPanelMenu: panelMenu => set(() => ({ panelMenu })),
   selectionMenu: undefined,
@@ -44,4 +58,6 @@ export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
   setShowVariableInspectPanel: showVariableInspectPanel => set(() => ({ showVariableInspectPanel })),
   initShowLastRunTab: false,
   setInitShowLastRunTab: initShowLastRunTab => set(() => ({ initShowLastRunTab })),
+  activeCommentId: null,
+  setActiveCommentId: (commentId: string | null) => set(() => ({ activeCommentId: commentId })),
 })
diff --git a/web/app/components/workflow/store/workflow/workflow-slice.ts b/web/app/components/workflow/store/workflow/workflow-slice.ts
index 35eeff07a7..8b0132aba1 100644
--- a/web/app/components/workflow/store/workflow/workflow-slice.ts
+++ b/web/app/components/workflow/store/workflow/workflow-slice.ts
@@ -11,6 +11,13 @@ type PreviewRunningData = WorkflowRunningData & {
   resultText?: string
 }
 
+type MousePosition = {
+  pageX: number
+  pageY: number
+  elementX: number
+  elementY: number
+}
+
 export type WorkflowSliceShape = {
   workflowRunningData?: PreviewRunningData
   setWorkflowRunningData: (workflowData: PreviewRunningData) => void
@@ -30,10 +37,14 @@ export type WorkflowSliceShape = {
   setSelection: (selection: WorkflowSliceShape['selection']) => void
   bundleNodeSize: { width: number; height: number } | null
   setBundleNodeSize: (bundleNodeSize: WorkflowSliceShape['bundleNodeSize']) => void
-  controlMode: 'pointer' | 'hand'
+  controlMode: 'pointer' | 'hand' | 'comment'
   setControlMode: (controlMode: WorkflowSliceShape['controlMode']) => void
-  mousePosition: { pageX: number; pageY: number; elementX: number; elementY: number }
+  pendingComment: MousePosition | null
+  setPendingComment: (pendingComment: WorkflowSliceShape['pendingComment']) => void
+  mousePosition: MousePosition
   setMousePosition: (mousePosition: WorkflowSliceShape['mousePosition']) => void
+  isCommentPreviewHovering: boolean
+  setCommentPreviewHovering: (hovering: boolean) => void
   showConfirm?: { title: string; desc?: string; onConfirm: () => void }
   setShowConfirm: (showConfirm: WorkflowSliceShape['showConfirm']) => void
   controlPromptEditorRerenderKey: number
@@ -63,13 +74,23 @@ export const createWorkflowSlice: StateCreator<WorkflowSliceShape> = set => ({
   setSelection: selection => set(() => ({ selection })),
   bundleNodeSize: null,
   setBundleNodeSize: bundleNodeSize => set(() => ({ bundleNodeSize })),
-  controlMode: localStorage.getItem('workflow-operation-mode') === 'pointer' ? 'pointer' : 'hand',
+  controlMode: (() => {
+    const storedControlMode = localStorage.getItem('workflow-operation-mode')
+    if (storedControlMode === 'pointer' || storedControlMode === 'hand' || storedControlMode === 'comment')
+      return storedControlMode
+
+    return 'pointer'
+  })(),
   setControlMode: (controlMode) => {
     set(() => ({ controlMode }))
     localStorage.setItem('workflow-operation-mode', controlMode)
   },
+  pendingComment: null,
+  setPendingComment: pendingComment => set(() => ({ pendingComment })),
   mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
   setMousePosition: mousePosition => set(() => ({ mousePosition })),
+  isCommentPreviewHovering: false,
+  setCommentPreviewHovering: hovering => set(() => ({ isCommentPreviewHovering: hovering })),
   showConfirm: undefined,
   setShowConfirm: showConfirm => set(() => ({ showConfirm })),
   controlPromptEditorRerenderKey: 0,
diff --git a/web/app/components/workflow/style.css b/web/app/components/workflow/style.css
index 9d88ac2644..e0ad764986 100644
--- a/web/app/components/workflow/style.css
+++ b/web/app/components/workflow/style.css
@@ -6,6 +6,12 @@
   transition: transform 0.2s ease-in-out;
 }
 
+/* Comment mode cursor override */
+.comment-mode-flow .react-flow__pane,
+.comment-mode-flow .react-flow__viewport {
+  cursor: none !important;
+}
+
 #workflow-container .react-flow__nodesselection-rect {
   border: 1px solid #528BFF;
   background: rgba(21, 94, 239, 0.05);
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 5ae8d530a8..bdf519f826 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -55,6 +55,7 @@ export enum BlockEnum {
 export enum ControlMode {
   Pointer = 'pointer',
   Hand = 'hand',
+  Comment = 'comment',
 }
 export enum ErrorHandleMode {
   Terminated = 'terminated',
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 00c36cce90..bc52049ae8 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -39,6 +39,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
+import { collaborationManager } from './collaboration/core/collaboration-manager'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -201,6 +202,8 @@ const UpdateDSLModal = ({
           return
         }
         handleWorkflowUpdate(app_id)
+        // Notify other collaboration clients about the workflow update
+        collaborationManager.emitWorkflowUpdate(app_id)
         await handleCheckPluginDependencies(app_id)
         if (onImport)
           onImport()
diff --git a/web/docker/entrypoint.sh b/web/docker/entrypoint.sh
index b32e648922..041c7a1af3 100755
--- a/web/docker/entrypoint.sh
+++ b/web/docker/entrypoint.sh
@@ -19,6 +19,7 @@ export NEXT_PUBLIC_API_PREFIX=${CONSOLE_API_URL}/console/api
 export NEXT_PUBLIC_PUBLIC_API_PREFIX=${APP_API_URL}/api
 export NEXT_PUBLIC_MARKETPLACE_API_PREFIX=${MARKETPLACE_API_URL}/api/v1
 export NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=${MARKETPLACE_URL}
+export NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL}
 
 export NEXT_PUBLIC_SENTRY_DSN=${SENTRY_DSN}
 export NEXT_PUBLIC_SITE_ABOUT=${SITE_ABOUT}
diff --git a/web/i18n/de-DE/workflow.ts b/web/i18n/de-DE/workflow.ts
index 28aa8bdc19..afaee365b1 100644
--- a/web/i18n/de-DE/workflow.ts
+++ b/web/i18n/de-DE/workflow.ts
@@ -203,6 +203,38 @@ const translation = {
     nodeDragStop: 'Knoten verschoben',
     nodeDelete: 'Knoten gelöscht',
   },
+  comments: {
+    panelTitle: 'Kommentar',
+    loading: 'Laden…',
+    reply: 'Antworten',
+    noComments: 'Noch keine Kommentare',
+    placeholder: {
+      add: 'Kommentar hinzufügen',
+      reply: 'Antworten',
+      editReply: 'Antwort bearbeiten',
+    },
+    confirm: {
+      deleteThreadTitle: 'Diesen Thread löschen?',
+      deleteThreadDesc: 'Dadurch werden der Thread und alle Antworten dauerhaft gelöscht. Dies kann nicht rückgängig gemacht werden.',
+      deleteReplyTitle: 'Diese Antwort löschen?',
+      deleteReplyDesc: 'Diese Antwort wird dauerhaft entfernt.',
+    },
+    aria: {
+      deleteComment: 'Kommentar löschen',
+      resolveComment: 'Kommentar abschließen',
+      previousComment: 'Vorheriger Kommentar',
+      nextComment: 'Nächster Kommentar',
+      closeComment: 'Kommentar schließen',
+      replyActions: 'Antwortaktionen',
+    },
+    actions: {
+      editReply: 'Antwort bearbeiten',
+      deleteReply: 'Antwort löschen',
+    },
+    fallback: {
+      user: 'Benutzer',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} ist erforderlich',
     authRequired: 'Autorisierung ist erforderlich',
@@ -307,6 +339,9 @@ const translation = {
     zoomTo50: 'Auf 50% vergrößern',
     zoomTo100: 'Auf 100% vergrößern',
     zoomToFit: 'An Bildschirm anpassen',
+    showUserComments: 'Kommentare',
+    showUserCursors: 'Cursor von Mitarbeitenden',
+    showMiniMap: 'Minikarte',
     selectionAlignment: 'Ausrichtung der Auswahl',
     alignLeft: 'Links',
     alignTop: 'Nach oben',
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 92a0b110c7..4a90aa9b6a 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -75,6 +75,7 @@ const translation = {
     pasteHere: 'Paste Here',
     pointerMode: 'Pointer Mode',
     handMode: 'Hand Mode',
+    commentMode: 'Comment Mode',
     exportImage: 'Export Image',
     exportPNG: 'Export as PNG',
     exportJPEG: 'Export as JPEG',
@@ -216,6 +217,38 @@ const translation = {
     noteDelete: 'Note deleted',
     edgeDelete: 'Node disconnected',
   },
+  comments: {
+    panelTitle: 'Comment',
+    loading: 'Loading…',
+    reply: 'Reply',
+    noComments: 'No comments yet',
+    placeholder: {
+      add: 'Add a comment',
+      reply: 'Reply',
+      editReply: 'Edit reply',
+    },
+    confirm: {
+      deleteThreadTitle: 'Delete this thread?',
+      deleteThreadDesc: 'This action will permanently delete the thread and all its replies. This cannot be undone.',
+      deleteReplyTitle: 'Delete this reply?',
+      deleteReplyDesc: 'This reply will be removed permanently.',
+    },
+    aria: {
+      deleteComment: 'Delete thread',
+      resolveComment: 'Resolve',
+      previousComment: 'Previous comment',
+      nextComment: 'Next comment',
+      closeComment: 'Close comment',
+      replyActions: 'Reply actions',
+    },
+    actions: {
+      editReply: 'Edit reply',
+      deleteReply: 'Delete reply',
+    },
+    fallback: {
+      user: 'User',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} is required',
     rerankModelRequired: 'A configured Rerank Model is required',
@@ -354,6 +387,9 @@ const translation = {
     zoomTo50: 'Zoom to 50%',
     zoomTo100: 'Zoom to 100%',
     zoomToFit: 'Zoom to Fit',
+    showUserComments: 'Comments',
+    showUserCursors: 'Collaborator cursors',
+    showMiniMap: 'Minimap',
     alignNodes: 'Align Nodes',
     alignLeft: 'Left',
     alignCenter: 'Center',
diff --git a/web/i18n/es-ES/workflow.ts b/web/i18n/es-ES/workflow.ts
index dd9519b68f..f206f8cd16 100644
--- a/web/i18n/es-ES/workflow.ts
+++ b/web/i18n/es-ES/workflow.ts
@@ -203,6 +203,38 @@ const translation = {
     nodeDescriptionChange: 'Descripción del nodo cambiada',
     nodeResize: 'Nodo redimensionado',
   },
+  comments: {
+    panelTitle: 'Comentario',
+    loading: 'Cargando…',
+    reply: 'Responder',
+    noComments: 'Aún no hay comentarios',
+    placeholder: {
+      add: 'Añadir un comentario',
+      reply: 'Responder',
+      editReply: 'Editar respuesta',
+    },
+    confirm: {
+      deleteThreadTitle: '¿Eliminar esta conversación?',
+      deleteThreadDesc: 'Esta acción eliminará permanentemente la conversación y todas sus respuestas. No se puede deshacer.',
+      deleteReplyTitle: '¿Eliminar esta respuesta?',
+      deleteReplyDesc: 'Esta respuesta se eliminará de forma permanente.',
+    },
+    aria: {
+      deleteComment: 'Eliminar comentario',
+      resolveComment: 'Resolver comentario',
+      previousComment: 'Comentario anterior',
+      nextComment: 'Comentario siguiente',
+      closeComment: 'Cerrar comentario',
+      replyActions: 'Acciones de respuesta',
+    },
+    actions: {
+      editReply: 'Editar respuesta',
+      deleteReply: 'Eliminar respuesta',
+    },
+    fallback: {
+      user: 'Usuario',
+    },
+  },
   errorMsg: {
     fieldRequired: 'Se requiere {{field}}',
     authRequired: 'Se requiere autorización',
@@ -307,6 +339,9 @@ const translation = {
     zoomTo50: 'Zoom al 50%',
     zoomTo100: 'Zoom al 100%',
     zoomToFit: 'Ajustar al tamaño',
+    showUserComments: 'Comentarios',
+    showUserCursors: 'Cursores de colaboradores',
+    showMiniMap: 'Minimapa',
     alignTop: 'Arriba',
     alignBottom: 'Abajo',
     alignNodes: 'Alinear nodos',
diff --git a/web/i18n/fa-IR/workflow.ts b/web/i18n/fa-IR/workflow.ts
index e27b8934e2..349db1ac0d 100644
--- a/web/i18n/fa-IR/workflow.ts
+++ b/web/i18n/fa-IR/workflow.ts
@@ -203,6 +203,38 @@ const translation = {
     nodeDescriptionChange: 'شرح نود تغییر کرد',
     nodeChange: 'نود تغییر کرد',
   },
+  comments: {
+    panelTitle: 'دیدگاه',
+    loading: 'در حال بارگذاری…',
+    reply: 'پاسخ',
+    noComments: 'هنوز دیدگاهی ثبت نشده است',
+    placeholder: {
+      add: 'افزودن دیدگاه',
+      reply: 'پاسخ',
+      editReply: 'ویرایش پاسخ',
+    },
+    confirm: {
+      deleteThreadTitle: 'این گفتگو حذف شود؟',
+      deleteThreadDesc: 'این عملیات گفتگو و تمام پاسخ‌های آن را برای همیشه حذف می‌کند و قابل بازگردانی نیست.',
+      deleteReplyTitle: 'این پاسخ حذف شود؟',
+      deleteReplyDesc: 'این پاسخ برای همیشه حذف خواهد شد.',
+    },
+    aria: {
+      deleteComment: 'حذف دیدگاه',
+      resolveComment: 'حل‌کردن دیدگاه',
+      previousComment: 'دیدگاه قبلی',
+      nextComment: 'دیدگاه بعدی',
+      closeComment: 'بستن دیدگاه',
+      replyActions: 'عملیات پاسخ',
+    },
+    actions: {
+      editReply: 'ویرایش پاسخ',
+      deleteReply: 'حذف پاسخ',
+    },
+    fallback: {
+      user: 'کاربر',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} الزامی است',
     authRequired: 'احراز هویت ضروری است',
@@ -307,6 +339,9 @@ const translation = {
     zoomTo50: 'بزرگ‌نمایی به 50%',
     zoomTo100: 'بزرگ‌نمایی به 100%',
     zoomToFit: 'تناسب با اندازه',
+    showUserComments: 'نظرات',
+    showUserCursors: 'نشانگرهای همکاران',
+    showMiniMap: 'نقشه کوچک',
     horizontal: 'افقی',
     alignBottom: 'پایین',
     alignRight: 'راست',
diff --git a/web/i18n/fr-FR/workflow.ts b/web/i18n/fr-FR/workflow.ts
index c6405e0851..ba826a2ba7 100644
--- a/web/i18n/fr-FR/workflow.ts
+++ b/web/i18n/fr-FR/workflow.ts
@@ -203,6 +203,38 @@ const translation = {
     nodeAdd: 'Nœud ajouté',
     nodeDescriptionChange: 'La description du nœud a changé',
   },
+  comments: {
+    panelTitle: 'Commentaire',
+    loading: 'Chargement…',
+    reply: 'Répondre',
+    noComments: 'Aucun commentaire pour l’instant',
+    placeholder: {
+      add: 'Ajouter un commentaire',
+      reply: 'Répondre',
+      editReply: 'Modifier la réponse',
+    },
+    confirm: {
+      deleteThreadTitle: 'Supprimer cette conversation ?',
+      deleteThreadDesc: 'Cette action supprimera définitivement la conversation et toutes ses réponses. Cette opération est irréversible.',
+      deleteReplyTitle: 'Supprimer cette réponse ?',
+      deleteReplyDesc: 'Cette réponse sera supprimée définitivement.',
+    },
+    aria: {
+      deleteComment: 'Supprimer le commentaire',
+      resolveComment: 'Résoudre le commentaire',
+      previousComment: 'Commentaire précédent',
+      nextComment: 'Commentaire suivant',
+      closeComment: 'Fermer le commentaire',
+      replyActions: 'Actions de réponse',
+    },
+    actions: {
+      editReply: 'Modifier la réponse',
+      deleteReply: 'Supprimer la réponse',
+    },
+    fallback: {
+      user: 'Utilisateur',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} est requis',
     authRequired: 'Autorisation requise',
@@ -307,6 +339,9 @@ const translation = {
     zoomTo50: 'Zoomer à 50%',
     zoomTo100: 'Zoomer à 100%',
     zoomToFit: 'Zoomer pour ajuster',
+    showUserComments: 'Commentaires',
+    showUserCursors: 'Curseurs des collaborateurs',
+    showMiniMap: 'Mini-carte',
     alignBottom: 'Bas',
     alignLeft: 'Gauche',
     alignCenter: 'Centre',
diff --git a/web/i18n/hi-IN/workflow.ts b/web/i18n/hi-IN/workflow.ts
index f739f64cf0..996fb9a298 100644
--- a/web/i18n/hi-IN/workflow.ts
+++ b/web/i18n/hi-IN/workflow.ts
@@ -206,6 +206,38 @@ const translation = {
     nodePaste: 'नोड चिपका हुआ',
     nodeDescriptionChange: 'नोड का वर्णन बदल गया',
   },
+  comments: {
+    panelTitle: 'टिप्पणी',
+    loading: 'लोड हो रहा है…',
+    reply: 'जवाब दें',
+    noComments: 'अभी तक कोई टिप्पणी नहीं',
+    placeholder: {
+      add: 'टिप्पणी जोड़ें',
+      reply: 'जवाब दें',
+      editReply: 'जवाब संपादित करें',
+    },
+    confirm: {
+      deleteThreadTitle: 'इस थ्रेड को हटाएं?',
+      deleteThreadDesc: 'यह क्रिया थ्रेड और उसकी सभी प्रतिक्रियाओं को स्थायी रूप से हटा देगी। इसे पूर्ववत नहीं किया जा सकता।',
+      deleteReplyTitle: 'इस जवाब को हटाएं?',
+      deleteReplyDesc: 'यह जवाब हमेशा के लिए हटा दिया जाएगा।',
+    },
+    aria: {
+      deleteComment: 'टिप्पणी हटाएं',
+      resolveComment: 'टिप्पणी समाधान करें',
+      previousComment: 'पिछली टिप्पणी',
+      nextComment: 'अगली टिप्पणी',
+      closeComment: 'टिप्पणी बंद करें',
+      replyActions: 'जवाब क्रियाएं',
+    },
+    actions: {
+      editReply: 'जवाब संपादित करें',
+      deleteReply: 'जवाब हटाएं',
+    },
+    fallback: {
+      user: 'उपयोगकर्ता',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} आवश्यक है',
     authRequired: 'प्राधिकरण आवश्यक है',
@@ -318,6 +350,9 @@ const translation = {
     zoomTo50: '50% पर ज़ूम करें',
     zoomTo100: '100% पर ज़ूम करें',
     zoomToFit: 'फिट करने के लिए ज़ूम करें',
+    showUserComments: 'टिप्पणियाँ',
+    showUserCursors: 'सहयोगी कर्सर',
+    showMiniMap: 'मिनी मानचित्र',
     alignRight: 'दाएं',
     alignLeft: 'बाएं',
     alignTop: 'शीर्ष',
diff --git a/web/i18n/id-ID/workflow.ts b/web/i18n/id-ID/workflow.ts
index 506b17d925..6ecd17c2a9 100644
--- a/web/i18n/id-ID/workflow.ts
+++ b/web/i18n/id-ID/workflow.ts
@@ -199,6 +199,38 @@ const translation = {
     edgeDelete: 'Node terputus',
     nodeChange: 'Node diubah',
   },
+  comments: {
+    panelTitle: 'Komentar',
+    loading: 'Memuat…',
+    reply: 'Balas',
+    noComments: 'Belum ada komentar',
+    placeholder: {
+      add: 'Tambahkan komentar',
+      reply: 'Balas',
+      editReply: 'Edit balasan',
+    },
+    confirm: {
+      deleteThreadTitle: 'Hapus percakapan ini?',
+      deleteThreadDesc: 'Tindakan ini akan menghapus percakapan dan semua balasannya secara permanen. Tidak dapat dibatalkan.',
+      deleteReplyTitle: 'Hapus balasan ini?',
+      deleteReplyDesc: 'Balasan ini akan dihapus secara permanen.',
+    },
+    aria: {
+      deleteComment: 'Hapus komentar',
+      resolveComment: 'Selesaikan komentar',
+      previousComment: 'Komentar sebelumnya',
+      nextComment: 'Komentar berikutnya',
+      closeComment: 'Tutup komentar',
+      replyActions: 'Aksi balasan',
+    },
+    actions: {
+      editReply: 'Edit balasan',
+      deleteReply: 'Hapus balasan',
+    },
+    fallback: {
+      user: 'Pengguna',
+    },
+  },
   errorMsg: {
     fields: {
       variable: 'Nama Variabel',
@@ -298,6 +330,9 @@ const translation = {
     alignCenter: 'Pusat',
     zoomOut: 'Perkecil',
     zoomToFit: 'Perbesar agar sesuai',
+    showUserComments: 'Komentar',
+    showUserCursors: 'Kursor kolaborator',
+    showMiniMap: 'Peta mini',
     vertical: 'Vertikal',
     alignTop: 'Puncak',
     alignMiddle: 'Tengah',
diff --git a/web/i18n/it-IT/workflow.ts b/web/i18n/it-IT/workflow.ts
index b188bc3666..c7627d10f4 100644
--- a/web/i18n/it-IT/workflow.ts
+++ b/web/i18n/it-IT/workflow.ts
@@ -208,6 +208,38 @@ const translation = {
     nodeDragStop: 'Nodo spostato',
     nodeConnect: 'Nodo connesso',
   },
+  comments: {
+    panelTitle: 'Commento',
+    loading: 'Caricamento…',
+    reply: 'Rispondi',
+    noComments: 'Ancora nessun commento',
+    placeholder: {
+      add: 'Aggiungi un commento',
+      reply: 'Rispondi',
+      editReply: 'Modifica risposta',
+    },
+    confirm: {
+      deleteThreadTitle: 'Eliminare questa conversazione?',
+      deleteThreadDesc: 'Questa azione eliminerà in modo permanente la conversazione e tutte le risposte. Non sarà possibile annullare.',
+      deleteReplyTitle: 'Eliminare questa risposta?',
+      deleteReplyDesc: 'Questa risposta verrà rimossa definitivamente.',
+    },
+    aria: {
+      deleteComment: 'Elimina commento',
+      resolveComment: 'Risolvi commento',
+      previousComment: 'Commento precedente',
+      nextComment: 'Commento successivo',
+      closeComment: 'Chiudi commento',
+      replyActions: 'Azioni di risposta',
+    },
+    actions: {
+      editReply: 'Modifica risposta',
+      deleteReply: 'Elimina risposta',
+    },
+    fallback: {
+      user: 'Utente',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} è richiesto',
     authRequired: 'È richiesta l\'autorizzazione',
@@ -321,6 +353,9 @@ const translation = {
     zoomTo50: 'Zoom al 50%',
     zoomTo100: 'Zoom al 100%',
     zoomToFit: 'Zoom per Adattare',
+    showUserComments: 'Commenti',
+    showUserCursors: 'Cursori dei collaboratori',
+    showMiniMap: 'Mini mappa',
     alignRight: 'A destra',
     selectionAlignment: 'Allineamento della selezione',
     alignBottom: 'In basso',
diff --git a/web/i18n/ja-JP/workflow.ts b/web/i18n/ja-JP/workflow.ts
index 07241b8c4f..ea09db45ed 100644
--- a/web/i18n/ja-JP/workflow.ts
+++ b/web/i18n/ja-JP/workflow.ts
@@ -212,6 +212,38 @@ const translation = {
     noteDelete: '注釈が削除されました',
     edgeDelete: 'ブロックの接続が解除されました',
   },
+  comments: {
+    panelTitle: 'コメント',
+    loading: '読み込み中…',
+    reply: '返信',
+    noComments: 'まだコメントがありません',
+    placeholder: {
+      add: 'コメントを追加',
+      reply: '返信',
+      editReply: '返信を編集',
+    },
+    confirm: {
+      deleteThreadTitle: 'このスレッドを削除しますか？',
+      deleteThreadDesc: 'この操作によりスレッドとその返信がすべて完全に削除され、元に戻せません。',
+      deleteReplyTitle: 'この返信を削除しますか？',
+      deleteReplyDesc: 'この返信は完全に削除されます。',
+    },
+    aria: {
+      deleteComment: 'スレッドを削除',
+      resolveComment: '解決',
+      previousComment: '前のコメント',
+      nextComment: '次のコメント',
+      closeComment: 'コメントを閉じる',
+      replyActions: '返信アクション',
+    },
+    actions: {
+      editReply: '返信を編集',
+      deleteReply: '返信を削除',
+    },
+    fallback: {
+      user: 'ユーザー',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} は必須です',
     rerankModelRequired: 'Rerank モデルが設定されていません',
@@ -343,6 +375,9 @@ const translation = {
     zoomTo50: '50% サイズ',
     zoomTo100: '等倍表示',
     zoomToFit: '画面に合わせる',
+    showUserComments: 'コメント',
+    showUserCursors: '協働者のカーソル',
+    showMiniMap: 'ミニマップ',
     horizontal: '水平',
     alignBottom: '下',
     alignNodes: 'ノードを整列',
diff --git a/web/i18n/ko-KR/workflow.ts b/web/i18n/ko-KR/workflow.ts
index e661b6b340..1214b74ae5 100644
--- a/web/i18n/ko-KR/workflow.ts
+++ b/web/i18n/ko-KR/workflow.ts
@@ -211,6 +211,38 @@ const translation = {
     edgeDelete: '노드가 연결이 끊어졌습니다.',
     nodeTitleChange: '노드 제목이 변경됨',
   },
+  comments: {
+    panelTitle: '댓글',
+    loading: '불러오는 중…',
+    reply: '답글',
+    noComments: '아직 댓글이 없습니다',
+    placeholder: {
+      add: '댓글 추가',
+      reply: '답글',
+      editReply: '답글 편집',
+    },
+    confirm: {
+      deleteThreadTitle: '이 스레드를 삭제하시겠습니까?',
+      deleteThreadDesc: '이 작업을 수행하면 스레드와 모든 답글이 영구적으로 삭제되며 되돌릴 수 없습니다.',
+      deleteReplyTitle: '이 답글을 삭제하시겠습니까?',
+      deleteReplyDesc: '이 답글은 영구적으로 삭제됩니다.',
+    },
+    aria: {
+      deleteComment: '댓글 삭제',
+      resolveComment: '댓글 해결',
+      previousComment: '이전 댓글',
+      nextComment: '다음 댓글',
+      closeComment: '댓글 닫기',
+      replyActions: '답글 작업',
+    },
+    actions: {
+      editReply: '답글 편집',
+      deleteReply: '답글 삭제',
+    },
+    fallback: {
+      user: '사용자',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}}가 필요합니다',
     authRequired: '인증이 필요합니다',
@@ -328,6 +360,9 @@ const translation = {
     zoomTo50: '50% 로 확대',
     zoomTo100: '100% 로 확대',
     zoomToFit: '화면에 맞게 확대',
+    showUserComments: '댓글',
+    showUserCursors: '협업자 커서',
+    showMiniMap: '미니맵',
     alignCenter: '중앙',
     alignRight: '오른쪽',
     alignLeft: '왼쪽',
diff --git a/web/i18n/pl-PL/workflow.ts b/web/i18n/pl-PL/workflow.ts
index f30e9350f7..81cfdf85f5 100644
--- a/web/i18n/pl-PL/workflow.ts
+++ b/web/i18n/pl-PL/workflow.ts
@@ -313,6 +313,9 @@ const translation = {
     alignCenter: 'Centrum',
     alignRight: 'Prawy',
     alignNodes: 'Wyrównywanie węzłów',
+    showUserComments: 'Komentarze',
+    showUserCursors: 'Kursory współpracowników',
+    showMiniMap: 'Minimapa',
     selectionAlignment: 'Wyrównanie zaznaczenia',
     horizontal: 'Poziomy',
     distributeVertical: 'Rozmieść pionowo',
diff --git a/web/i18n/pt-BR/workflow.ts b/web/i18n/pt-BR/workflow.ts
index 265274c979..cc535acf8d 100644
--- a/web/i18n/pt-BR/workflow.ts
+++ b/web/i18n/pt-BR/workflow.ts
@@ -313,6 +313,9 @@ const translation = {
     alignLeft: 'Esquerda',
     alignBottom: 'Inferior',
     distributeHorizontal: 'Distribuir horizontalmente',
+    showUserComments: 'Comentários',
+    showUserCursors: 'Cursores dos colaboradores',
+    showMiniMap: 'Minimapa',
     alignMiddle: 'Meio',
     alignRight: 'Direita',
     horizontal: 'Horizontal',
diff --git a/web/i18n/ro-RO/workflow.ts b/web/i18n/ro-RO/workflow.ts
index 8d55033929..998d779dd5 100644
--- a/web/i18n/ro-RO/workflow.ts
+++ b/web/i18n/ro-RO/workflow.ts
@@ -315,6 +315,9 @@ const translation = {
     alignMiddle: 'Mijloc',
     distributeVertical: 'Distribuie vertical',
     alignCenter: 'Centru',
+    showUserComments: 'Comentarii',
+    showUserCursors: 'Cursoarele colaboratorilor',
+    showMiniMap: 'Mini-hartă',
     distributeHorizontal: 'Distribuie orizontal',
     alignBottom: 'Jos',
     alignTop: 'Sus',
diff --git a/web/i18n/ru-RU/workflow.ts b/web/i18n/ru-RU/workflow.ts
index 9d7c99acea..ad376e77fd 100644
--- a/web/i18n/ru-RU/workflow.ts
+++ b/web/i18n/ru-RU/workflow.ts
@@ -311,6 +311,9 @@ const translation = {
     alignBottom: 'Вниз',
     alignRight: 'Вправо',
     distributeHorizontal: 'Распределить по горизонтали',
+    showUserComments: 'Комментарии',
+    showUserCursors: 'Курсоры участников',
+    showMiniMap: 'Мини-карта',
     alignMiddle: 'По центру',
     vertical: 'Вертикальный',
     alignCenter: 'Центр',
diff --git a/web/i18n/sl-SI/workflow.ts b/web/i18n/sl-SI/workflow.ts
index fb1f709162..b4eb33234c 100644
--- a/web/i18n/sl-SI/workflow.ts
+++ b/web/i18n/sl-SI/workflow.ts
@@ -311,6 +311,9 @@ const translation = {
     alignBottom: 'Spodaj',
     alignCenter: 'Center',
     distributeVertical: 'Razporedi navpično',
+    showUserComments: 'Komentarji',
+    showUserCursors: 'Kazalci sodelavcev',
+    showMiniMap: 'Mini zemljevid',
     alignRight: 'Desno',
     alignTop: 'Vrh',
     vertical: 'Navpičen',
diff --git a/web/i18n/th-TH/workflow.ts b/web/i18n/th-TH/workflow.ts
index 51e9b4d088..eb67eeed4c 100644
--- a/web/i18n/th-TH/workflow.ts
+++ b/web/i18n/th-TH/workflow.ts
@@ -313,6 +313,9 @@ const translation = {
     horizontal: 'แนวนอน',
     vertical: 'แนวตั้ง',
     alignTop: 'ด้านบน',
+    showUserComments: 'ความคิดเห็น',
+    showUserCursors: 'เคอร์เซอร์ของผู้ร่วมงาน',
+    showMiniMap: 'แผนที่ย่อ',
     distributeVertical: 'ระยะห่างแนวตั้ง',
     alignLeft: 'ซ้าย',
     selectionAlignment: 'การจัดตําแหน่งการเลือก',
diff --git a/web/i18n/tr-TR/workflow.ts b/web/i18n/tr-TR/workflow.ts
index df4f9c8093..28c67c9f33 100644
--- a/web/i18n/tr-TR/workflow.ts
+++ b/web/i18n/tr-TR/workflow.ts
@@ -312,6 +312,9 @@ const translation = {
     alignLeft: 'Sol',
     alignNodes: 'Düğümleri Hizala',
     vertical: 'Dikey',
+    showUserComments: 'Yorumlar',
+    showUserCursors: 'İşbirlikçi imleçleri',
+    showMiniMap: 'Mini harita',
     alignRight: 'Sağ',
     alignTop: 'Üst',
     alignBottom: 'Alt',
diff --git a/web/i18n/uk-UA/workflow.ts b/web/i18n/uk-UA/workflow.ts
index 95425f0a32..7ce4ecbd43 100644
--- a/web/i18n/uk-UA/workflow.ts
+++ b/web/i18n/uk-UA/workflow.ts
@@ -313,6 +313,9 @@ const translation = {
     alignBottom: 'Низ',
     alignLeft: 'Ліворуч',
     alignTop: 'Верх',
+    showUserComments: 'Коментарі',
+    showUserCursors: 'Курсори співучасників',
+    showMiniMap: 'Мінікарта',
     horizontal: 'Горизонтальний',
     alignMiddle: 'По центру',
     distributeVertical: 'Розподілити по вертикалі',
diff --git a/web/i18n/vi-VN/workflow.ts b/web/i18n/vi-VN/workflow.ts
index 4fe45a8cc6..e250dcd415 100644
--- a/web/i18n/vi-VN/workflow.ts
+++ b/web/i18n/vi-VN/workflow.ts
@@ -311,6 +311,9 @@ const translation = {
     alignMiddle: 'Giữa',
     alignRight: 'Phải',
     alignNodes: 'Căn chỉnh các nút',
+    showUserComments: 'Bình luận',
+    showUserCursors: 'Con trỏ của cộng tác viên',
+    showMiniMap: 'Bản đồ nhỏ',
     alignLeft: 'Trái',
     horizontal: 'Ngang',
     alignCenter: 'Giữa',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 18e76caa64..c202babcfd 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -73,6 +73,7 @@ const translation = {
     pasteHere: '粘贴到这里',
     pointerMode: '指针模式',
     handMode: '手模式',
+    commentMode: '评论模式',
     exportImage: '导出图片',
     exportPNG: '导出为 PNG',
     exportJPEG: '导出为 JPEG',
@@ -215,6 +216,38 @@ const translation = {
     noteDelete: '注释已删除',
     edgeDelete: '块已断开连接',
   },
+  comments: {
+    panelTitle: '评论',
+    loading: '加载中…',
+    reply: '回复',
+    noComments: '暂无评论',
+    placeholder: {
+      add: '添加评论',
+      reply: '回复',
+      editReply: '编辑回复',
+    },
+    confirm: {
+      deleteThreadTitle: '删除此讨论？',
+      deleteThreadDesc: '此操作会永久删除该讨论及其所有回复，且无法恢复。',
+      deleteReplyTitle: '删除此回复？',
+      deleteReplyDesc: '此回复将被永久删除。',
+    },
+    aria: {
+      deleteComment: '删除讨论',
+      resolveComment: '解决',
+      previousComment: '上一条评论',
+      nextComment: '下一条评论',
+      closeComment: '关闭评论',
+      replyActions: '回复操作',
+    },
+    actions: {
+      editReply: '编辑回复',
+      deleteReply: '删除回复',
+    },
+    fallback: {
+      user: '用户',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} 不能为空',
     rerankModelRequired: '未配置 Rerank 模型',
@@ -353,6 +386,9 @@ const translation = {
     zoomTo50: '缩放到 50%',
     zoomTo100: '放大到 100%',
     zoomToFit: '自适应视图',
+    showUserComments: '评论',
+    showUserCursors: '协作者光标',
+    showMiniMap: '小地图',
     alignNodes: '对齐节点',
     alignLeft: '左对齐',
     alignCenter: '居中对齐',
diff --git a/web/i18n/zh-Hant/workflow.ts b/web/i18n/zh-Hant/workflow.ts
index ce053d6e5b..22d2ad2534 100644
--- a/web/i18n/zh-Hant/workflow.ts
+++ b/web/i18n/zh-Hant/workflow.ts
@@ -205,6 +205,38 @@ const translation = {
     edgeDelete: '區塊已斷開連接',
     noteDelete: '註釋已刪除',
   },
+  comments: {
+    panelTitle: '評論',
+    loading: '載入中…',
+    reply: '回覆',
+    noComments: '暫無評論',
+    placeholder: {
+      add: '新增評論',
+      reply: '回覆',
+      editReply: '編輯回覆',
+    },
+    confirm: {
+      deleteThreadTitle: '刪除此討論串？',
+      deleteThreadDesc: '此操作會永久刪除該討論串及其所有回覆，且無法復原。',
+      deleteReplyTitle: '刪除此回覆？',
+      deleteReplyDesc: '此回覆將被永久刪除。',
+    },
+    aria: {
+      deleteComment: '刪除評論',
+      resolveComment: '解決評論',
+      previousComment: '上一則評論',
+      nextComment: '下一則評論',
+      closeComment: '關閉評論',
+      replyActions: '回覆操作',
+    },
+    actions: {
+      editReply: '編輯回覆',
+      deleteReply: '刪除回覆',
+    },
+    fallback: {
+      user: '使用者',
+    },
+  },
   errorMsg: {
     fieldRequired: '{{field}} 不能為空',
     authRequired: '請先授權',
@@ -313,6 +345,9 @@ const translation = {
     zoomTo50: '縮放到 50%',
     zoomTo100: '放大到 100%',
     zoomToFit: '自適應視圖',
+    showUserComments: '評論',
+    showUserCursors: '協作者游標',
+    showMiniMap: '小地圖',
     alignNodes: '對齊節點',
     distributeVertical: '垂直等間距',
     alignLeft: '左對齊',
diff --git a/web/middleware.ts b/web/middleware.ts
index 3fee535ea4..7dae6b7244 100644
--- a/web/middleware.ts
+++ b/web/middleware.ts
@@ -33,7 +33,7 @@ export function middleware(request: NextRequest) {
   const cspHeader = `
     default-src 'self' ${scheme_source} ${csp} ${whiteList};
     connect-src 'self' ${scheme_source} ${csp} ${whiteList};
-    script-src 'self' ${scheme_source} ${csp} ${whiteList};
+    script-src 'self' 'wasm-unsafe-eval' ${scheme_source} ${csp} ${whiteList};
     style-src 'self' 'unsafe-inline' ${scheme_source} ${whiteList};
     worker-src 'self' ${scheme_source} ${csp} ${whiteList};
     media-src 'self' ${scheme_source} ${csp} ${whiteList};
diff --git a/web/models/app.ts b/web/models/app.ts
index e0f31ff26e..b2bc2b98c6 100644
--- a/web/models/app.ts
+++ b/web/models/app.ts
@@ -112,6 +112,20 @@ export type AppVoicesListResponse = [{
   value: string
 }]
 
+export type WorkflowOnlineUser = {
+  user_id?: string
+  username?: string
+  avatar?: string | null
+  sid?: string
+}
+
+export type WorkflowOnlineUsersResponse = {
+  data: Record<string, WorkflowOnlineUser[]> | Array<{
+    workflow_id: string
+    users: WorkflowOnlineUser[]
+  }>
+}
+
 export type TracingStatus = {
   enabled: boolean
   tracing_provider: TracingProvider | null
diff --git a/web/next.config.js b/web/next.config.js
index 212bed0a9c..c86e9868d7 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -94,12 +94,24 @@ const remoteImageURLs = [hasSetWebPrefix ? new URL(`${process.env.NEXT_PUBLIC_WE
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
-  transpilePackages: ['echarts', 'zrender'],
   turbopack: {
     rules: codeInspectorPlugin({
       bundler: 'turbopack'
     })
   },
+  webpack: (config, { dev, isServer }) => {
+    config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }))
+
+    config.experiments = {
+      asyncWebAssembly: true,
+      layers: true,
+    }
+    config.output.environment = {
+      asyncFunction: true,
+    }
+
+    return config
+  },
   productionBrowserSourceMaps: false, // enable browser source map generation during the production build
   // Configure pageExtensions to include md and mdx
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
@@ -117,6 +129,10 @@ const nextConfig = {
     optimizePackageImports: [
       '@heroicons/react'
     ],
+    optimizePackageImports: [
+      '@remixicon/react',
+      '@heroicons/react'
+    ],
   },
   // fix all before production. Now it slow the develop speed.
   eslint: {
diff --git a/web/package.json b/web/package.json
index 7e5a84048b..7e47e2584a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -95,6 +95,7 @@
     "lexical": "^0.36.2",
     "line-clamp": "^1.0.0",
     "lodash-es": "^4.17.21",
+    "loro-crdt": "^1.8.2",
     "mermaid": "~11.11.0",
     "mime": "^4.1.0",
     "mitt": "^3.0.1",
@@ -130,6 +131,7 @@
     "scheduler": "^0.26.0",
     "semver": "^7.7.3",
     "sharp": "^0.33.5",
+    "socket.io-client": "^4.8.1",
     "sortablejs": "^1.15.6",
     "swr": "^2.3.6",
     "tailwind-merge": "^2.6.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 8e638ed2df..951a4995e3 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -101,7 +101,7 @@ importers:
         version: 0.37.0
       '@monaco-editor/react':
         specifier: ^4.7.0
-        version: 4.7.0(monaco-editor@0.54.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 4.7.0(monaco-editor@0.52.2)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@octokit/core':
         specifier: ^6.1.6
         version: 6.1.6
@@ -213,6 +213,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      loro-crdt:
+        specifier: ^1.8.2
+        version: 1.8.9
       mermaid:
         specifier: ~11.11.0
         version: 11.11.0
@@ -318,6 +321,9 @@ importers:
       sharp:
         specifier: ^0.33.5
         version: 0.33.5
+      socket.io-client:
+        specifier: ^4.8.1
+        version: 4.8.1
       sortablejs:
         specifier: ^1.15.6
         version: 1.15.6
@@ -348,7 +354,7 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^5.4.1
-        version: 5.4.1(@eslint-react/eslint-plugin@1.53.1(eslint@9.38.0(jiti@1.21.7))(ts-api-utils@2.1.0(typescript@5.9.3))(typescript@5.9.3))(@next/eslint-plugin-next@15.5.4)(@vue/compiler-sfc@3.5.22)(eslint-plugin-react-hooks@5.2.0(eslint@9.38.0(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.38.0(jiti@1.21.7)))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+        version: 5.4.1(@eslint-react/eslint-plugin@1.53.1(eslint@9.38.0(jiti@1.21.7))(ts-api-utils@2.1.0(typescript@5.9.3))(typescript@5.9.3))(@next/eslint-plugin-next@15.5.4)(@vue/compiler-sfc@3.5.17)(eslint-plugin-react-hooks@5.2.0(eslint@9.38.0(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.38.0(jiti@1.21.7)))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@babel/core':
         specifier: ^7.28.4
         version: 7.28.4
@@ -495,7 +501,7 @@ importers:
         version: 29.7.0(@types/node@18.15.0)(ts-node@10.9.2(@types/node@18.15.0)(typescript@5.9.3))
       knip:
         specifier: ^5.66.1
-        version: 5.66.2(@types/node@18.15.0)(typescript@5.9.3)
+        version: 5.66.1(@types/node@18.15.0)(typescript@5.9.3)
       lint-staged:
         specifier: ^15.5.2
         version: 15.5.2
@@ -1308,11 +1314,11 @@ packages:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
-  '@emnapi/core@1.6.0':
-    resolution: {integrity: sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==}
+  '@emnapi/core@1.5.0':
+    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
 
-  '@emnapi/runtime@1.6.0':
-    resolution: {integrity: sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==}
+  '@emnapi/runtime@1.5.0':
+    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
@@ -1564,8 +1570,8 @@ packages:
     resolution: {integrity: sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/markdown@7.4.1':
-    resolution: {integrity: sha512-fhcQcylVqgb7GLPr2+6hlDQXK4J3d/fPY6qzk9/i7IYtQkIr15NKI5Zg39Dv2cV/bn5J0Znm69rmu9vJI/7Tlw==}
+  '@eslint/markdown@7.4.0':
+    resolution: {integrity: sha512-VQykmMjBb4tQoJOXVWXa+oQbQeCZlE7W3rAsOpmtpKLvJd75saZZ04PVVs7+zgMDJGghd4/gyFV6YlvdJFaeNQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.7':
@@ -1576,6 +1582,10 @@ packages:
     resolution: {integrity: sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/plugin-kit@0.3.5':
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
@@ -1707,144 +1717,170 @@ packages:
     resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm64@1.2.3':
     resolution: {integrity: sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.0.5':
     resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.3':
     resolution: {integrity: sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.3':
     resolution: {integrity: sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.0.4':
     resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.3':
     resolution: {integrity: sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.0.4':
     resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.3':
     resolution: {integrity: sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
     resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.3':
     resolution: {integrity: sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.0.4':
     resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.3':
     resolution: {integrity: sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.33.5':
     resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm64@0.34.4':
     resolution: {integrity: sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.33.5':
     resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.4':
     resolution: {integrity: sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.4':
     resolution: {integrity: sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.33.5':
     resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.4':
     resolution: {integrity: sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.33.5':
     resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.4':
     resolution: {integrity: sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.33.5':
     resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-arm64@0.34.4':
     resolution: {integrity: sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.33.5':
     resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.4':
     resolution: {integrity: sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.33.5':
     resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
@@ -2162,24 +2198,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@15.5.6':
     resolution: {integrity: sha512-FsbGVw3SJz1hZlvnWD+T6GFgV9/NYDeLTNQB2MXoPN5u9VA9OEDy6fJEfePfsUKAhJufFbZLgp0cPxMuV6SV0w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-linux-x64-gnu@15.5.6':
     resolution: {integrity: sha512-3QnHGFWlnvAgyxFxt2Ny8PTpXtQD7kVEeaFat5oPAHHI192WKYB+VIKZijtHLGdBBvc16tiAkPTDmQNOQ0dyrA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-x64-musl@15.5.6':
     resolution: {integrity: sha512-OsGX148sL+TqMK9YFaPFPoIaJKbFJJxFzkXZljIgA9hjMjdruKht6xDCEv1HLtlLNfkx3c5w2GLKhj7veBQizQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@15.5.6':
     resolution: {integrity: sha512-ONOMrqWxdzXDJNh2n60H6gGyKed42Ieu6UTVPZteXpuKbLZTH4G4eBMsr5qWgOBA+s7F+uB4OJbZnrkEDnZ5Fg==}
@@ -2297,98 +2337,106 @@ packages:
   '@octokit/types@14.1.0':
     resolution: {integrity: sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.11.0':
-    resolution: {integrity: sha512-aN0UJg1xr0N1dADQ135z4p3bP9AYAUN1Ey2VvLMK6IwWYIJGWpKT+cr1l3AiyBeLK8QZyFDb4IDU8LHgjO9TDQ==}
+  '@oxc-resolver/binding-android-arm-eabi@11.10.0':
+    resolution: {integrity: sha512-qvSSjeeBvYh3KlpMwDbLr0m/bmEfEzaAv2yW4RnYDGrsFVgTHlNc3WzQSji0+Bf2g3kLgyZ5pwylaJpS9baUIA==}
     cpu: [arm]
     os: [android]
 
-  '@oxc-resolver/binding-android-arm64@11.11.0':
-    resolution: {integrity: sha512-FckvvMclo8CSJqQjKpHueIIbKrg9L638NKWQTiJQaD8W9F61h8hTjF8+QFLlCHh6R9RcE5roVHdkkiBKHlB2Zw==}
+  '@oxc-resolver/binding-android-arm64@11.10.0':
+    resolution: {integrity: sha512-rjiCqkhH1di5Sb/KpOmuC/1OCGZVDdUyVIxxPsmzkdgrTgS6Of5cwOHTBVNxXuVdlIMz0swN8wrmqUM9jspPAQ==}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-resolver/binding-darwin-arm64@11.11.0':
-    resolution: {integrity: sha512-7ZcpgaXSBnwRHM1YR8Vazq7mCTtGdYRvM7k46CscA+oipCVqmI4LbW2wLsc6HVjqX+SM/KPOfFGoGjEgmQPFTQ==}
+  '@oxc-resolver/binding-darwin-arm64@11.10.0':
+    resolution: {integrity: sha512-qr2+vw0BKxZVuaw3Ssbzfe0999FYs5BkKqezP8ocwYE9pJUC4hNlWUWhGLDxj0tBSjMEFvWQNF7IxCeZk6nzKw==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-resolver/binding-darwin-x64@11.11.0':
-    resolution: {integrity: sha512-Wsd1JWORokMmOKrR4t4jxpwYEWG11+AHWu9bdzjCO5EIyi0AuNpPIAEcEFCP9FNd0h8c+VUYbMRU/GooD2zOIg==}
+  '@oxc-resolver/binding-darwin-x64@11.10.0':
+    resolution: {integrity: sha512-2XFEd89yVnnkk7u0LACdXsiHDN3rMthzcdSHj2VROaItiAW6qfKy+SJwLK94lYCVv9nFjxJUVHiVJUsKIn70tQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-resolver/binding-freebsd-x64@11.11.0':
-    resolution: {integrity: sha512-YX+W10kHrMouu/+Y+rqJdCWO3dFBKM1DIils30PHsmXWp1v+ZZvhibaST2BP6zrWkWquZ8pMmsObD6N10lLgiA==}
+  '@oxc-resolver/binding-freebsd-x64@11.10.0':
+    resolution: {integrity: sha512-EHapmlf+bg92Pf3+0E0nYSKQgQ5u2V++KXB0WTushFJSU+k6gXEL/P/y1QwKqzJ986Q14YWHh7IiT/nQvpaz4Q==}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.11.0':
-    resolution: {integrity: sha512-UAhlhVkW2ui98bClmEkDLKQz4XBSccxMahG7rMeX2RepS2QByAWxYFFThaNbHtBSB+B4Rc1hudkihq8grQkU3g==}
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.10.0':
+    resolution: {integrity: sha512-NhSAeelg0EU4ymM8XrUfGJL74jBHs2Q3WdVbXIve+ROge0UAB7yXpk40u7quIOmbyqAEUp/QPlhtEmWc+lWcPg==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.11.0':
-    resolution: {integrity: sha512-5pEliabSEiimXz/YyPxzyBST82q8PbM6BoEMS8kOyaDbEBuzTr7pWU1U0F7ILGBFjJmHaj3N7IAhQgeXdpdySg==}
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.10.0':
+    resolution: {integrity: sha512-9rjZigo5/92O3jayjucIdhhq4eJBgf61K9UZZF1r1uoIhS4i0wz7W29gMWkCVYbwZAfkHxfmTn3zu8Vv34NvUQ==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.11.0':
-    resolution: {integrity: sha512-CiyufPFIOJrW/HovAMGsH0AbV7BSCb0oE0KDtt7z1+e+qsDo7HRlTSnqE3JbNuhJRg3Cz/j7qEYzgGqco9SE4Q==}
+  '@oxc-resolver/binding-linux-arm64-gnu@11.10.0':
+    resolution: {integrity: sha512-73pz+sYfPfMzl8OVdjsWJXu5LO868LBpy8M/a/m4a7HUREwBz1/CK59ifxhbIkIeAv2ZkhwKiouFxsKmCsQRrw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.11.0':
-    resolution: {integrity: sha512-w07MfGtDLZV0rISdXl2cGASxD/sRrrR93Qd4q27O2Hsky4MGbLw94trbzhmAkc7OKoJI0iDg1217i3jfxmVk1Q==}
+  '@oxc-resolver/binding-linux-arm64-musl@11.10.0':
+    resolution: {integrity: sha512-s8AMNkiguFn2XJtnAaSHl+ak97Zwkq6biouUNuApDRZh34ckAjWxPTQRhUZLCFybNxgZtwVbglVQv0BJYieIXg==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.11.0':
-    resolution: {integrity: sha512-gzM+ZfIjfcCofwX/m1eLCoTT+3T70QLWaKDOW5Hf3+ddLlxMEVRIQtUoRsp0e/VFanr7u7VKS57TxhkRubseNg==}
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.10.0':
+    resolution: {integrity: sha512-70eHfsX9Xw+wGqmwFhlIxT/LhzGDlnI4ECQ7w0VLZsYpAUjRiQPUQCDKkfP65ikzHPSLeY8pARKVIc2gdC0HEA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.11.0':
-    resolution: {integrity: sha512-oCR0ImJQhIwmqwNShsRT0tGIgKF5/H4nhtIEkQAQ9bLzMgjtRqIrZ3DtGHqd7w58zhXWfIZdyPNF9IrSm+J/fQ==}
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.10.0':
+    resolution: {integrity: sha512-geibi+L5hKmDwZ9iLEUzuvRG4o6gZWB8shlNBLiKnGtYD5SMAvCcJiHpz1Sf6ESm8laXjiIf6T/pTZZpaeStyw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.11.0':
-    resolution: {integrity: sha512-MjCEqsUzXMfWPfsEUX+UXttzXz6xiNU11r7sj00C5og/UCyqYw1OjrbC/B1f/dloDpTn0rd4xy6c/LTvVQl2tg==}
+  '@oxc-resolver/binding-linux-riscv64-musl@11.10.0':
+    resolution: {integrity: sha512-oL1B0jGu9vYoQKyJiMvjtuxDzmV9P8M/xdu6wjUjvaGC/gIwvhILzlHgD3SMtFJJhzLVf4HPmYAF7BsLWvTugA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.11.0':
-    resolution: {integrity: sha512-4TaTX7gT3357vWQsTe3IfDtWyJNe0FejypQ4ngwxB3v1IVaW6KAUt0huSvx/tmj+YWxd3zzXdWd8AzW0jo6dpg==}
+  '@oxc-resolver/binding-linux-s390x-gnu@11.10.0':
+    resolution: {integrity: sha512-Sj6ooR4RZ+04SSc/iV7oK8C2TxoWzJbD5yirsF64ULFukTvQHz99ImjtwgauBUnR+3loyca3s6o8DiAmqHaxAw==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.11.0':
-    resolution: {integrity: sha512-ch1o3+tBra9vmrgXqrufVmYnvRPFlyUb7JWs/VXndBmyNSuP2KP+guAUrC0fr2aSGoOQOasAiZza7MTFU7Vrxg==}
+  '@oxc-resolver/binding-linux-x64-gnu@11.10.0':
+    resolution: {integrity: sha512-wH5nPRgIaEhuOD9M70NujV91FscboRkNf38wKAYiy9xuKeVsc43JzFqvmgxU1vXsKwUJBc/qMt4nFNluLXwVzw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
-  '@oxc-resolver/binding-linux-x64-musl@11.11.0':
-    resolution: {integrity: sha512-llTdl2gJAqXaGV7iV1w5BVlqXACcoT1YD3o840pCQx1ZmKKAAz7ydPnTjYVdkGImXNWPOIWJixHW0ryDm4Mx7w==}
+  '@oxc-resolver/binding-linux-x64-musl@11.10.0':
+    resolution: {integrity: sha512-rDrv1Joh6hAidV/hixAA1+6keNr1aJA3rUU6VD8mqTedbUMV1CdQJ55f9UmQZn0nO35tQvwF0eLBNmumErCNLw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
-  '@oxc-resolver/binding-wasm32-wasi@11.11.0':
-    resolution: {integrity: sha512-cROavohP0nX91NtIVVgOTugqoxlUSNxI9j7MD+B7fmD3gEFl8CVyTamR0/p6loDxLv51bQYTHRKn/ZYTd3ENzw==}
+  '@oxc-resolver/binding-wasm32-wasi@11.10.0':
+    resolution: {integrity: sha512-VE+fuYPMqObhwEoLOUp9UgebrMFBBCuvCBY+auk+o3bFWOYXLpvCa5PzC4ttF7gOotQD/TWqbVWtfOh0CdBSHw==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.11.0':
-    resolution: {integrity: sha512-6amVs34yHmxE6Q3CtTPXnSvIYGqwQJ/lVVRYccLzg9smge3WJ1knyBV5jpKKayp0n316uPYzB4EgEbgcuRvrPw==}
+  '@oxc-resolver/binding-win32-arm64-msvc@11.10.0':
+    resolution: {integrity: sha512-M70Fr5P1SnQY4vm7ZTeodE27mDV6zqxLkQMHF4t43xt55dIFIlHiRTgCzykiI9ggan3M1YWffLeB97Q3X2yxSg==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-resolver/binding-win32-ia32-msvc@11.11.0':
-    resolution: {integrity: sha512-v/IZ5s2/3auHUoi0t6Ea1CDsWxrE9BvgvbDcJ04QX+nEbmTBazWPZeLsH8vWkRAh8EUKCZHXxjQsPhEH5Yk5pQ==}
+  '@oxc-resolver/binding-win32-ia32-msvc@11.10.0':
+    resolution: {integrity: sha512-UJfRwzXAAIduNJa0cZlwT8L8eAOSX85VfKQ0i0NCJWNjwFzjeeOpvd/vNXMd1jmYU22a8fulFX3k8AzdwI7wYw==}
     cpu: [ia32]
     os: [win32]
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.11.0':
-    resolution: {integrity: sha512-qvm+IQ6r2q4HZitSV69O+OmvCD1y4pH7SbhR6lPwLsfZS5QRHS8V20VHxmG1jJzSPPw7S8Bb1rdNcxDSqc4bYA==}
+  '@oxc-resolver/binding-win32-x64-msvc@11.10.0':
+    resolution: {integrity: sha512-Q8gwXHjDeEokECEFCECkJW1OEOEgfFUGoLZs88jDpZ/QmdBklH/SbMLKJdYeIPztQ6HD069GAVPnP3WcXyHoUA==}
     cpu: [x64]
     os: [win32]
 
@@ -2421,36 +2469,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -2838,6 +2892,9 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
+  '@socket.io/component-emitter@3.1.2':
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
+
   '@storybook/addon-docs@9.1.13':
     resolution: {integrity: sha512-V1nCo7bfC3kQ5VNVq0VDcHsIhQf507m+BxMA5SIYiwdJHljH2BXpW2fL3FFn9gv9Wp57AEEzhm+wh4zANaJgkg==}
     peerDependencies:
@@ -3084,8 +3141,8 @@ packages:
   '@types/cacheable-request@6.0.3':
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
 
-  '@types/chai@5.2.3':
-    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+  '@types/chai@5.2.2':
+    resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
@@ -3342,63 +3399,63 @@ packages:
   '@types/yargs@17.0.33':
     resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
 
-  '@typescript-eslint/eslint-plugin@8.46.2':
-    resolution: {integrity: sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==}
+  '@typescript-eslint/eslint-plugin@8.46.1':
+    resolution: {integrity: sha512-rUsLh8PXmBjdiPY+Emjz9NX2yHvhS11v0SR6xNJkm5GM1MO9ea/1GoDKlHHZGrOJclL/cZ2i/vRUYVtjRhrHVQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.46.2
+      '@typescript-eslint/parser': ^8.46.1
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.46.2':
-    resolution: {integrity: sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==}
+  '@typescript-eslint/parser@8.46.1':
+    resolution: {integrity: sha512-6JSSaBZmsKvEkbRUkf7Zj7dru/8ZCrJxAqArcLaVMee5907JdtEbKGsZ7zNiIm/UAkpGUkaSMZEXShnN2D1HZA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.46.2':
-    resolution: {integrity: sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==}
+  '@typescript-eslint/project-service@8.46.1':
+    resolution: {integrity: sha512-FOIaFVMHzRskXr5J4Jp8lFVV0gz5ngv3RHmn+E4HYxSJ3DgDzU7fVI1/M7Ijh1zf6S7HIoaIOtln1H5y8V+9Zg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.46.2':
-    resolution: {integrity: sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==}
+  '@typescript-eslint/scope-manager@8.46.1':
+    resolution: {integrity: sha512-weL9Gg3/5F0pVQKiF8eOXFZp8emqWzZsOJuWRUNtHT+UNV2xSJegmpCNQHy37aEQIbToTq7RHKhWvOsmbM680A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.46.2':
-    resolution: {integrity: sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==}
+  '@typescript-eslint/tsconfig-utils@8.46.1':
+    resolution: {integrity: sha512-X88+J/CwFvlJB+mK09VFqx5FE4H5cXD+H/Bdza2aEWkSb8hnWIQorNcscRl4IEo1Cz9VI/+/r/jnGWkbWPx54g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.46.2':
-    resolution: {integrity: sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==}
+  '@typescript-eslint/type-utils@8.46.1':
+    resolution: {integrity: sha512-+BlmiHIiqufBxkVnOtFwjah/vrkF4MtKKvpXrKSPLCkCtAp8H01/VV43sfqA98Od7nJpDcFnkwgyfQbOG0AMvw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.46.2':
-    resolution: {integrity: sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==}
+  '@typescript-eslint/types@8.46.1':
+    resolution: {integrity: sha512-C+soprGBHwWBdkDpbaRC4paGBrkIXxVlNohadL5o0kfhsXqOC6GYH2S/Obmig+I0HTDl8wMaRySwrfrXVP8/pQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.46.2':
-    resolution: {integrity: sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==}
+  '@typescript-eslint/typescript-estree@8.46.1':
+    resolution: {integrity: sha512-uIifjT4s8cQKFQ8ZBXXyoUODtRoAd7F7+G8MKmtzj17+1UbdzFl52AzRyZRyKqPHhgzvXunnSckVu36flGy8cg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.46.2':
-    resolution: {integrity: sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==}
+  '@typescript-eslint/utils@8.46.1':
+    resolution: {integrity: sha512-vkYUy6LdZS7q1v/Gxb2Zs7zziuXN0wxqsetJdeZdRe/f5dwJFglmuvZBfTUivCtjH725C1jWCDfpadadD95EDQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.46.2':
-    resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
+  '@typescript-eslint/visitor-keys@8.46.1':
+    resolution: {integrity: sha512-ptkmIf2iDkNUjdeu2bQqhFPV1m6qTnFFjg7PPDjxKWaMaP0Z6I9l30Jr3g5QqbZGdw8YdYvLp+XnqnWWZOg/NA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -3440,17 +3497,26 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
+  '@vue/compiler-core@3.5.17':
+    resolution: {integrity: sha512-Xe+AittLbAyV0pabcN7cP7/BenRBNcteM4aSDCtRvGw0d9OL+HG1u/XHLY/kt1q4fyMeZYXyIYrsHuPSiDPosA==}
+
   '@vue/compiler-core@3.5.22':
     resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
 
+  '@vue/compiler-dom@3.5.17':
+    resolution: {integrity: sha512-+2UgfLKoaNLhgfhV5Ihnk6wB4ljyW1/7wUIog2puUqajiC29Lp5R/IKDdkebh9jTbTogTbsgB+OY9cEWzG95JQ==}
+
   '@vue/compiler-dom@3.5.22':
     resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
 
-  '@vue/compiler-sfc@3.5.22':
-    resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
+  '@vue/compiler-sfc@3.5.17':
+    resolution: {integrity: sha512-rQQxbRJMgTqwRugtjw0cnyQv9cP4/4BxWfTdRBkqsTfLOHWykLzbOc3C4GGzAmdMDxhzU/1Ija5bTjMVrddqww==}
 
-  '@vue/compiler-ssr@3.5.22':
-    resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
+  '@vue/compiler-ssr@3.5.17':
+    resolution: {integrity: sha512-hkDbA0Q20ZzGgpj5uZjb9rBzQtIHLS78mMilwrlpWk2Ep37DYntUz0PonQ6kr113vfOEdM+zTBuJDaceNIW0tQ==}
+
+  '@vue/shared@3.5.17':
+    resolution: {integrity: sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==}
 
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
@@ -4411,6 +4477,15 @@ packages:
   debounce@1.2.1:
     resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
 
+  debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -4555,9 +4630,6 @@ packages:
     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
     engines: {node: '>= 4'}
 
-  dompurify@3.1.7:
-    resolution: {integrity: sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==}
-
   dompurify@3.3.0:
     resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
@@ -4621,6 +4693,13 @@ packages:
   endent@2.1.0:
     resolution: {integrity: sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==}
 
+  engine.io-client@6.6.3:
+    resolution: {integrity: sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==}
+
+  engine.io-parser@5.2.3:
+    resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
+    engines: {node: '>=10.0.0'}
+
   enhanced-resolve@5.18.3:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
@@ -5948,8 +6027,8 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
-  knip@5.66.2:
-    resolution: {integrity: sha512-5wvsdc17C5bMxjuGfN9KVS/tW5KIvzP1RClfpTMdLYm8IXIsfWsiHlFkTvZIca9skwoVDyTyXmbRq4w1Poim+A==}
+  knip@5.66.1:
+    resolution: {integrity: sha512-Ad3VUPIk9GZYovKuwKtGMheupek7IoPGaDEBAvnCYLKJXnwmqNLyXqMp+l5r3OOpFVjF7DdkFIZFVrXESDNylQ==}
     engines: {node: '>=18.18.0'}
     hasBin: true
     peerDependencies:
@@ -6068,6 +6147,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loro-crdt@1.8.9:
+    resolution: {integrity: sha512-5x71XLJ1etIOgSO8T/fA48j9yTWkRtVD0uCCIK+koChn4doKpPe25vrCJ6m770ARair3Cz4sg6iWtw5cWeJJMg==}
+
   loupe@3.2.1:
     resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
 
@@ -6128,11 +6210,6 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  marked@14.0.0:
-    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
-    engines: {node: '>= 18'}
-    hasBin: true
-
   marked@15.0.12:
     resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
     engines: {node: '>= 18'}
@@ -6408,8 +6485,8 @@ packages:
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
-  monaco-editor@0.54.0:
-    resolution: {integrity: sha512-hx45SEUoLatgWxHKCmlLJH81xBo0uXP4sRkESUpmDQevfi+e7K1VuiSprK6UpQ8u4zOcKNiH0pMvHvlMWA/4cw==}
+  monaco-editor@0.52.2:
+    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
 
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
@@ -6570,8 +6647,8 @@ packages:
   os-browserify@0.3.0:
     resolution: {integrity: sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==}
 
-  oxc-resolver@11.11.0:
-    resolution: {integrity: sha512-vVeBJf77zBeqOA/LBCTO/pr0/ETHGSleCRsI5Kmsf2OsfB5opzhhZptt6VxkqjKWZH+eF1se88fYDG5DGRLjkg==}
+  oxc-resolver@11.10.0:
+    resolution: {integrity: sha512-LNJkji0qsBvZ7+yze3S1qsWufZ3VBcyU1wAnC5bBP0QzHsKf4rrNhG5I4c0RIDQGKsKDpVWh8vhUAGE3cb53kA==}
 
   p-cancelable@2.1.1:
     resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
@@ -6713,10 +6790,6 @@ packages:
     resolution: {integrity: sha512-wfRLBZ0feWRhCIkoMB6ete7czJcnNnqRpcoWQBLqatqXXmelSRqfdDK4F3u9T2s2cXas/hQJcryI/4lAL+XTlA==}
     engines: {node: '>=0.12'}
 
-  pbkdf2@3.1.5:
-    resolution: {integrity: sha512-Q3CG/cYvCO1ye4QKkuH7EXxs3VC/rI1/trd+qX2+PolbaKG0H+bgcZzrTt96mMyRtejk+JMCiLUn3y29W8qmFQ==}
-    engines: {node: '>= 0.10'}
-
   pdfjs-dist@4.4.168:
     resolution: {integrity: sha512-MbkAjpwka/dMHaCfQ75RY1FXX3IewBVu6NGZOcxerRFlaBiIkZmUoR0jotX5VUzYZEXAGzSFtknWs5xRKliXPA==}
     engines: {node: '>=18'}
@@ -7334,8 +7407,8 @@ packages:
     resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
     engines: {node: '>=10'}
 
-  resolve@1.22.11:
-    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
     engines: {node: '>= 0.4'}
     hasBin: true
 
@@ -7531,6 +7604,14 @@ packages:
     resolution: {integrity: sha512-rInDH6lCNiEyn3+hH8KVGFdbjc099j47+OSgbMrfDYX1CmXLfdKd7qi6IfcWj2wFxvSVkuI46M+wPGYfEOEj6g==}
     engines: {node: '>= 18'}
 
+  socket.io-client@4.8.1:
+    resolution: {integrity: sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==}
+    engines: {node: '>=10.0.0'}
+
+  socket.io-parser@4.2.4:
+    resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
+    engines: {node: '>=10.0.0'}
+
   sortablejs@1.15.6:
     resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
 
@@ -8340,6 +8421,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.17.1:
+    resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   ws@8.18.3:
     resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
     engines: {node: '>=10.0.0'}
@@ -8356,6 +8449,10 @@ packages:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  xmlhttprequest-ssl@2.1.2:
+    resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
+    engines: {node: '>=0.4.0'}
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -8442,15 +8539,15 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@antfu/eslint-config@5.4.1(@eslint-react/eslint-plugin@1.53.1(eslint@9.38.0(jiti@1.21.7))(ts-api-utils@2.1.0(typescript@5.9.3))(typescript@5.9.3))(@next/eslint-plugin-next@15.5.4)(@vue/compiler-sfc@3.5.22)(eslint-plugin-react-hooks@5.2.0(eslint@9.38.0(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.38.0(jiti@1.21.7)))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@antfu/eslint-config@5.4.1(@eslint-react/eslint-plugin@1.53.1(eslint@9.38.0(jiti@1.21.7))(ts-api-utils@2.1.0(typescript@5.9.3))(typescript@5.9.3))(@next/eslint-plugin-next@15.5.4)(@vue/compiler-sfc@3.5.17)(eslint-plugin-react-hooks@5.2.0(eslint@9.38.0(jiti@1.21.7)))(eslint-plugin-react-refresh@0.4.24(eslint@9.38.0(jiti@1.21.7)))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
       '@clack/prompts': 0.11.0
       '@eslint-community/eslint-plugin-eslint-comments': 4.5.0(eslint@9.38.0(jiti@1.21.7))
-      '@eslint/markdown': 7.4.1
+      '@eslint/markdown': 7.4.0
       '@stylistic/eslint-plugin': 5.5.0(eslint@9.38.0(jiti@1.21.7))
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@vitest/eslint-plugin': 1.3.23(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       ansis: 4.2.0
       cac: 6.7.14
@@ -8470,10 +8567,10 @@ snapshots:
       eslint-plugin-regexp: 2.10.0(eslint@9.38.0(jiti@1.21.7))
       eslint-plugin-toml: 0.12.0(eslint@9.38.0(jiti@1.21.7))
       eslint-plugin-unicorn: 61.0.2(eslint@9.38.0(jiti@1.21.7))
-      eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))
-      eslint-plugin-vue: 10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7)))
+      eslint-plugin-unused-imports: 4.3.0(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))
+      eslint-plugin-vue: 10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7)))
       eslint-plugin-yml: 1.19.0(eslint@9.38.0(jiti@1.21.7))
-      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.22)(eslint@9.38.0(jiti@1.21.7))
+      eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.17)(eslint@9.38.0(jiti@1.21.7))
       globals: 16.4.0
       jsonc-eslint-parser: 2.4.1
       local-pkg: 1.1.2
@@ -8582,7 +8679,7 @@ snapshots:
       '@babel/helper-plugin-utils': 7.27.1
       debug: 4.4.3
       lodash.debounce: 4.0.8
-      resolve: 1.22.11
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
@@ -9424,13 +9521,13 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
-  '@emnapi/core@1.6.0':
+  '@emnapi/core@1.5.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.6.0':
+  '@emnapi/runtime@1.5.0':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -9447,7 +9544,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.50.2':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.1
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 4.1.0
@@ -9455,7 +9552,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.58.0':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.1
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 5.4.0
@@ -9551,9 +9648,9 @@ snapshots:
   '@eslint-react/ast@1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint-react/eff': 1.53.1
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       string-ts: 2.2.1
       ts-pattern: 5.8.0
     transitivePeerDependencies:
@@ -9568,10 +9665,10 @@ snapshots:
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/var': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       birecord: 0.1.1
       ts-pattern: 5.8.0
     transitivePeerDependencies:
@@ -9586,10 +9683,10 @@ snapshots:
       '@eslint-react/eff': 1.53.1
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       eslint-plugin-react-debug: 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint-plugin-react-dom: 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
@@ -9606,7 +9703,7 @@ snapshots:
   '@eslint-react/kit@1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint-react/eff': 1.53.1
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       ts-pattern: 5.8.0
       zod: 4.1.12
     transitivePeerDependencies:
@@ -9618,7 +9715,7 @@ snapshots:
     dependencies:
       '@eslint-react/eff': 1.53.1
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       ts-pattern: 5.8.0
       zod: 4.1.12
     transitivePeerDependencies:
@@ -9630,9 +9727,9 @@ snapshots:
     dependencies:
       '@eslint-react/ast': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/eff': 1.53.1
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       string-ts: 2.2.1
       ts-pattern: 5.8.0
     transitivePeerDependencies:
@@ -9682,10 +9779,10 @@ snapshots:
 
   '@eslint/js@9.38.0': {}
 
-  '@eslint/markdown@7.4.1':
+  '@eslint/markdown@7.4.0':
     dependencies:
       '@eslint/core': 0.16.0
-      '@eslint/plugin-kit': 0.3.4
+      '@eslint/plugin-kit': 0.3.5
       github-slugger: 2.0.0
       mdast-util-from-markdown: 2.0.2
       mdast-util-frontmatter: 2.0.1
@@ -9703,6 +9800,11 @@ snapshots:
       '@eslint/core': 0.15.2
       levn: 0.4.1
 
+  '@eslint/plugin-kit@0.3.5':
+    dependencies:
+      '@eslint/core': 0.15.2
+      levn: 0.4.1
+
   '@floating-ui/core@1.7.3':
     dependencies:
       '@floating-ui/utils': 0.2.10
@@ -9933,12 +10035,12 @@ snapshots:
 
   '@img/sharp-wasm32@0.33.5':
     dependencies:
-      '@emnapi/runtime': 1.6.0
+      '@emnapi/runtime': 1.5.0
     optional: true
 
   '@img/sharp-wasm32@0.34.4':
     dependencies:
-      '@emnapi/runtime': 1.6.0
+      '@emnapi/runtime': 1.5.0
     optional: true
 
   '@img/sharp-win32-arm64@0.34.4':
@@ -10431,17 +10533,17 @@ snapshots:
     dependencies:
       state-local: 1.0.7
 
-  '@monaco-editor/react@4.7.0(monaco-editor@0.54.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+  '@monaco-editor/react@4.7.0(monaco-editor@0.52.2)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@monaco-editor/loader': 1.5.0
-      monaco-editor: 0.54.0
+      monaco-editor: 0.52.2
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
   '@napi-rs/wasm-runtime@1.0.7':
     dependencies:
-      '@emnapi/core': 1.6.0
-      '@emnapi/runtime': 1.6.0
+      '@emnapi/core': 1.5.0
+      '@emnapi/runtime': 1.5.0
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -10594,63 +10696,63 @@ snapshots:
     dependencies:
       '@octokit/openapi-types': 25.1.0
 
-  '@oxc-resolver/binding-android-arm-eabi@11.11.0':
+  '@oxc-resolver/binding-android-arm-eabi@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-android-arm64@11.11.0':
+  '@oxc-resolver/binding-android-arm64@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-darwin-arm64@11.11.0':
+  '@oxc-resolver/binding-darwin-arm64@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-darwin-x64@11.11.0':
+  '@oxc-resolver/binding-darwin-x64@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-freebsd-x64@11.11.0':
+  '@oxc-resolver/binding-freebsd-x64@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.11.0':
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.11.0':
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.11.0':
+  '@oxc-resolver/binding-linux-arm64-gnu@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.11.0':
+  '@oxc-resolver/binding-linux-arm64-musl@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.11.0':
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.11.0':
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.11.0':
+  '@oxc-resolver/binding-linux-riscv64-musl@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.11.0':
+  '@oxc-resolver/binding-linux-s390x-gnu@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.11.0':
+  '@oxc-resolver/binding-linux-x64-gnu@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-musl@11.11.0':
+  '@oxc-resolver/binding-linux-x64-musl@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.11.0':
+  '@oxc-resolver/binding-wasm32-wasi@11.10.0':
     dependencies:
       '@napi-rs/wasm-runtime': 1.0.7
     optional: true
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.11.0':
+  '@oxc-resolver/binding-win32-arm64-msvc@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-win32-ia32-msvc@11.11.0':
+  '@oxc-resolver/binding-win32-ia32-msvc@11.10.0':
     optional: true
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.11.0':
+  '@oxc-resolver/binding-win32-x64-msvc@11.10.0':
     optional: true
 
   '@parcel/watcher-android-arm64@2.5.1':
@@ -11032,7 +11134,7 @@ snapshots:
       builtin-modules: 3.3.0
       deepmerge: 4.3.1
       is-module: 1.0.0
-      resolve: 1.22.11
+      resolve: 1.22.10
       rollup: 2.79.2
 
   '@rollup/plugin-replace@2.4.2(rollup@2.79.2)':
@@ -11095,6 +11197,8 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
+  '@socket.io/component-emitter@3.1.2': {}
+
   '@storybook/addon-docs@9.1.13(@types/react@19.1.17)(storybook@9.1.13(@testing-library/dom@10.4.1))':
     dependencies:
       '@mdx-js/react': 3.1.1(@types/react@19.1.17)(react@19.1.1)
@@ -11238,7 +11342,7 @@ snapshots:
       react: 19.1.1
       react-docgen: 7.1.1
       react-dom: 19.1.1(react@19.1.1)
-      resolve: 1.22.11
+      resolve: 1.22.10
       semver: 7.7.3
       storybook: 9.1.13(@testing-library/dom@10.4.1)
       tsconfig-paths: 4.2.0
@@ -11285,7 +11389,7 @@ snapshots:
   '@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7))':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@1.21.7))
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.1
       eslint: 9.38.0(jiti@1.21.7)
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -11444,10 +11548,9 @@ snapshots:
       '@types/node': 18.15.0
       '@types/responselike': 1.0.3
 
-  '@types/chai@5.2.3':
+  '@types/chai@5.2.2':
     dependencies:
       '@types/deep-eql': 4.0.2
-      assertion-error: 2.0.1
 
   '@types/d3-array@3.2.2': {}
 
@@ -11726,14 +11829,14 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/parser': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.1
       eslint: 9.38.0(jiti@1.21.7)
       graphemer: 1.4.0
       ignore: 7.0.5
@@ -11743,41 +11846,41 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.1
       debug: 4.4.3
       eslint: 9.38.0(jiti@1.21.7)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.46.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/tsconfig-utils': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.46.2':
+  '@typescript-eslint/scope-manager@8.46.1':
     dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/visitor-keys': 8.46.1
 
-  '@typescript-eslint/tsconfig-utils@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.46.1(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.38.0(jiti@1.21.7)
       ts-api-utils: 2.1.0(typescript@5.9.3)
@@ -11785,14 +11888,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.46.2': {}
+  '@typescript-eslint/types@8.46.1': {}
 
-  '@typescript-eslint/typescript-estree@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.46.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/project-service': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/visitor-keys': 8.46.1
       debug: 4.4.3
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -11803,28 +11906,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@1.21.7))
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.46.2':
+  '@typescript-eslint/visitor-keys@8.46.1':
     dependencies:
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.1
       eslint-visitor-keys: 4.2.1
 
   '@ungap/structured-clone@1.3.0': {}
 
   '@vitest/eslint-plugin@1.3.23(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
     optionalDependencies:
       typescript: 5.9.3
@@ -11833,7 +11936,7 @@ snapshots:
 
   '@vitest/expect@3.2.4':
     dependencies:
-      '@types/chai': 5.2.3
+      '@types/chai': 5.2.2
       '@vitest/spy': 3.2.4
       '@vitest/utils': 3.2.4
       chai: 5.3.3
@@ -11859,6 +11962,14 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
+  '@vue/compiler-core@3.5.17':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/shared': 3.5.17
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-core@3.5.22':
     dependencies:
       '@babel/parser': 7.28.4
@@ -11867,27 +11978,34 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-dom@3.5.17':
+    dependencies:
+      '@vue/compiler-core': 3.5.17
+      '@vue/shared': 3.5.17
+
   '@vue/compiler-dom@3.5.22':
     dependencies:
       '@vue/compiler-core': 3.5.22
       '@vue/shared': 3.5.22
 
-  '@vue/compiler-sfc@3.5.22':
+  '@vue/compiler-sfc@3.5.17':
     dependencies:
       '@babel/parser': 7.28.5
-      '@vue/compiler-core': 3.5.22
-      '@vue/compiler-dom': 3.5.22
-      '@vue/compiler-ssr': 3.5.22
-      '@vue/shared': 3.5.22
+      '@vue/compiler-core': 3.5.17
+      '@vue/compiler-dom': 3.5.17
+      '@vue/compiler-ssr': 3.5.17
+      '@vue/shared': 3.5.17
       estree-walker: 2.0.2
       magic-string: 0.30.21
       postcss: 8.5.6
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.22':
+  '@vue/compiler-ssr@3.5.17':
     dependencies:
-      '@vue/compiler-dom': 3.5.22
-      '@vue/shared': 3.5.22
+      '@vue/compiler-dom': 3.5.17
+      '@vue/shared': 3.5.17
+
+  '@vue/shared@3.5.17': {}
 
   '@vue/shared@3.5.22': {}
 
@@ -12948,6 +13066,10 @@ snapshots:
 
   debounce@1.2.1: {}
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -13063,8 +13185,6 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.1.7: {}
-
   dompurify@3.3.0:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -13134,6 +13254,20 @@ snapshots:
       fast-json-parse: 1.0.3
       objectorarray: 1.0.5
 
+  engine.io-client@6.6.3:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+      engine.io-parser: 5.2.3
+      ws: 8.17.1
+      xmlhttprequest-ssl: 2.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  engine.io-parser@5.2.3: {}
+
   enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
@@ -13266,7 +13400,7 @@ snapshots:
   eslint-plugin-import-lite@0.3.0(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@1.21.7))
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.1
       eslint: 9.38.0(jiti@1.21.7)
     optionalDependencies:
       typescript: 5.9.3
@@ -13326,8 +13460,8 @@ snapshots:
 
   eslint-plugin-perfectionist@4.15.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       natural-orderby: 5.0.0
     transitivePeerDependencies:
@@ -13352,10 +13486,10 @@ snapshots:
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/var': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       string-ts: 2.2.1
       ts-pattern: 5.8.0
@@ -13372,9 +13506,9 @@ snapshots:
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/var': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       compare-versions: 6.1.1
       eslint: 9.38.0(jiti@1.21.7)
       string-ts: 2.2.1
@@ -13392,10 +13526,10 @@ snapshots:
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/var': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       string-ts: 2.2.1
       ts-pattern: 5.8.0
@@ -13416,10 +13550,10 @@ snapshots:
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/var': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       string-ts: 2.2.1
       ts-pattern: 5.8.0
@@ -13440,9 +13574,9 @@ snapshots:
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/var': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       string-ts: 2.2.1
       ts-pattern: 5.8.0
@@ -13459,10 +13593,10 @@ snapshots:
       '@eslint-react/kit': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/shared': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       '@eslint-react/var': 1.53.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.1
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       compare-versions: 6.1.1
       eslint: 9.38.0(jiti@1.21.7)
       is-immutable-type: 5.0.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
@@ -13501,7 +13635,7 @@ snapshots:
 
   eslint-plugin-storybook@9.1.13(eslint@9.38.0(jiti@1.21.7))(storybook@9.1.13(@testing-library/dom@10.4.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       storybook: 9.1.13(@testing-library/dom@10.4.1)
     transitivePeerDependencies:
@@ -13546,13 +13680,13 @@ snapshots:
       semver: 7.7.3
       strip-indent: 4.1.1
 
-  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7)):
+  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7)):
     dependencies:
       eslint: 9.38.0(jiti@1.21.7)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.46.1(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
 
-  eslint-plugin-vue@10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7))):
+  eslint-plugin-vue@10.5.1(@stylistic/eslint-plugin@5.5.0(eslint@9.38.0(jiti@1.21.7)))(@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3))(eslint@9.38.0(jiti@1.21.7))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@1.21.7))):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@1.21.7))
       eslint: 9.38.0(jiti@1.21.7)
@@ -13564,7 +13698,7 @@ snapshots:
       xml-name-validator: 4.0.0
     optionalDependencies:
       '@stylistic/eslint-plugin': 5.5.0(eslint@9.38.0(jiti@1.21.7))
-      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
 
   eslint-plugin-yml@1.19.0(eslint@9.38.0(jiti@1.21.7)):
     dependencies:
@@ -13578,9 +13712,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.22)(eslint@9.38.0(jiti@1.21.7)):
+  eslint-processor-vue-blocks@2.0.0(@vue/compiler-sfc@3.5.17)(eslint@9.38.0(jiti@1.21.7)):
     dependencies:
-      '@vue/compiler-sfc': 3.5.22
+      '@vue/compiler-sfc': 3.5.17
       eslint: 9.38.0(jiti@1.21.7)
 
   eslint-scope@5.1.1:
@@ -13606,7 +13740,7 @@ snapshots:
       '@eslint/core': 0.16.0
       '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.38.0
-      '@eslint/plugin-kit': 0.3.4
+      '@eslint/plugin-kit': 0.3.5
       '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
@@ -14387,7 +14521,7 @@ snapshots:
 
   is-immutable-type@5.0.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@1.21.7))(typescript@5.9.3)
       eslint: 9.38.0(jiti@1.21.7)
       ts-api-utils: 2.1.0(typescript@5.9.3)
       ts-declaration-location: 1.0.7(typescript@5.9.3)
@@ -14661,7 +14795,7 @@ snapshots:
       jest-pnp-resolver: 1.2.3(jest-resolve@29.7.0)
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      resolve: 1.22.11
+      resolve: 1.22.10
       resolve.exports: 2.0.3
       slash: 3.0.0
 
@@ -14879,7 +15013,7 @@ snapshots:
 
   kleur@3.0.3: {}
 
-  knip@5.66.2(@types/node@18.15.0)(typescript@5.9.3):
+  knip@5.66.1(@types/node@18.15.0)(typescript@5.9.3):
     dependencies:
       '@nodelib/fs.walk': 1.2.8
       '@types/node': 18.15.0
@@ -14888,7 +15022,7 @@ snapshots:
       jiti: 2.6.1
       js-yaml: 4.1.0
       minimist: 1.2.8
-      oxc-resolver: 11.11.0
+      oxc-resolver: 11.10.0
       picocolors: 1.1.1
       picomatch: 4.0.3
       smol-toml: 1.4.2
@@ -15016,6 +15150,8 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  loro-crdt@1.8.9: {}
+
   loupe@3.2.1: {}
 
   lower-case@2.0.2:
@@ -15075,8 +15211,6 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  marked@14.0.0: {}
-
   marked@15.0.12: {}
 
   md5.js@1.3.5:
@@ -15658,10 +15792,7 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.1
 
-  monaco-editor@0.54.0:
-    dependencies:
-      dompurify: 3.1.7
-      marked: 14.0.0
+  monaco-editor@0.52.2: {}
 
   mrmime@2.0.1: {}
 
@@ -15846,27 +15977,27 @@ snapshots:
 
   os-browserify@0.3.0: {}
 
-  oxc-resolver@11.11.0:
+  oxc-resolver@11.10.0:
     optionalDependencies:
-      '@oxc-resolver/binding-android-arm-eabi': 11.11.0
-      '@oxc-resolver/binding-android-arm64': 11.11.0
-      '@oxc-resolver/binding-darwin-arm64': 11.11.0
-      '@oxc-resolver/binding-darwin-x64': 11.11.0
-      '@oxc-resolver/binding-freebsd-x64': 11.11.0
-      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.11.0
-      '@oxc-resolver/binding-linux-arm-musleabihf': 11.11.0
-      '@oxc-resolver/binding-linux-arm64-gnu': 11.11.0
-      '@oxc-resolver/binding-linux-arm64-musl': 11.11.0
-      '@oxc-resolver/binding-linux-ppc64-gnu': 11.11.0
-      '@oxc-resolver/binding-linux-riscv64-gnu': 11.11.0
-      '@oxc-resolver/binding-linux-riscv64-musl': 11.11.0
-      '@oxc-resolver/binding-linux-s390x-gnu': 11.11.0
-      '@oxc-resolver/binding-linux-x64-gnu': 11.11.0
-      '@oxc-resolver/binding-linux-x64-musl': 11.11.0
-      '@oxc-resolver/binding-wasm32-wasi': 11.11.0
-      '@oxc-resolver/binding-win32-arm64-msvc': 11.11.0
-      '@oxc-resolver/binding-win32-ia32-msvc': 11.11.0
-      '@oxc-resolver/binding-win32-x64-msvc': 11.11.0
+      '@oxc-resolver/binding-android-arm-eabi': 11.10.0
+      '@oxc-resolver/binding-android-arm64': 11.10.0
+      '@oxc-resolver/binding-darwin-arm64': 11.10.0
+      '@oxc-resolver/binding-darwin-x64': 11.10.0
+      '@oxc-resolver/binding-freebsd-x64': 11.10.0
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.10.0
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.10.0
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.10.0
+      '@oxc-resolver/binding-linux-arm64-musl': 11.10.0
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.10.0
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.10.0
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.10.0
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.10.0
+      '@oxc-resolver/binding-linux-x64-gnu': 11.10.0
+      '@oxc-resolver/binding-linux-x64-musl': 11.10.0
+      '@oxc-resolver/binding-wasm32-wasi': 11.10.0
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.10.0
+      '@oxc-resolver/binding-win32-ia32-msvc': 11.10.0
+      '@oxc-resolver/binding-win32-x64-msvc': 11.10.0
 
   p-cancelable@2.1.1: {}
 
@@ -15920,7 +16051,7 @@ snapshots:
       asn1.js: 4.10.1
       browserify-aes: 1.2.0
       evp_bytestokey: 1.0.3
-      pbkdf2: 3.1.5
+      pbkdf2: 3.1.3
       safe-buffer: 5.2.1
 
   parse-entities@2.0.0:
@@ -16007,15 +16138,6 @@ snapshots:
       sha.js: 2.4.12
       to-buffer: 1.2.2
 
-  pbkdf2@3.1.5:
-    dependencies:
-      create-hash: 1.2.0
-      create-hmac: 1.1.7
-      ripemd160: 2.0.3
-      safe-buffer: 5.2.1
-      sha.js: 2.4.12
-      to-buffer: 1.2.2
-
   pdfjs-dist@4.4.168:
     optionalDependencies:
       canvas: 3.2.0
@@ -16088,7 +16210,7 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.11
+      resolve: 1.22.10
 
   postcss-js@4.1.0(postcss@8.5.6):
     dependencies:
@@ -16310,7 +16432,7 @@ snapshots:
       '@types/doctrine': 0.0.9
       '@types/resolve': 1.20.6
       doctrine: 3.0.0
-      resolve: 1.22.11
+      resolve: 1.22.10
       strip-indent: 4.1.1
     transitivePeerDependencies:
       - supports-color
@@ -16733,7 +16855,7 @@ snapshots:
 
   resolve.exports@2.0.3: {}
 
-  resolve@1.22.11:
+  resolve@1.22.10:
     dependencies:
       is-core-module: '@nolyfill/is-core-module@1.0.39'
       path-parse: 1.0.7
@@ -16969,6 +17091,24 @@ snapshots:
 
   smol-toml@1.4.2: {}
 
+  socket.io-client@4.8.1:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+      engine.io-client: 6.6.3
+      socket.io-parser: 4.2.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  socket.io-parser@4.2.4:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+
   sortablejs@1.15.6: {}
 
   source-list-map@2.0.1: {}
@@ -17201,7 +17341,7 @@ snapshots:
       postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.1)
       postcss-nested: 6.2.0(postcss@8.5.6)
       postcss-selector-parser: 6.1.2
-      resolve: 1.22.11
+      resolve: 1.22.10
       sucrase: 3.35.0
     transitivePeerDependencies:
       - tsx
@@ -17868,10 +18008,14 @@ snapshots:
 
   ws@7.5.10: {}
 
+  ws@8.17.1: {}
+
   ws@8.18.3: {}
 
   xml-name-validator@4.0.0: {}
 
+  xmlhttprequest-ssl@2.1.2: {}
+
   xtend@4.0.2: {}
 
   y18n@5.0.8: {}
diff --git a/web/service/apps.ts b/web/service/apps.ts
index b1124767ad..ae56381c50 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -1,6 +1,6 @@
 import type { Fetcher } from 'swr'
 import { del, get, patch, post, put } from './base'
-import type { ApiKeysListResponse, AppDailyConversationsResponse, AppDailyEndUsersResponse, AppDailyMessagesResponse, AppDetailResponse, AppListResponse, AppStatisticsResponse, AppTemplatesResponse, AppTokenCostsResponse, AppVoicesListResponse, CreateApiKeyResponse, DSLImportMode, DSLImportResponse, GenerationIntroductionResponse, TracingConfig, TracingStatus, UpdateAppModelConfigResponse, UpdateAppSiteCodeResponse, UpdateOpenAIKeyResponse, ValidateOpenAIKeyResponse, WebhookTriggerResponse, WorkflowDailyConversationsResponse } from '@/models/app'
+import type { ApiKeysListResponse, AppDailyConversationsResponse, AppDailyEndUsersResponse, AppDailyMessagesResponse, AppDetailResponse, AppListResponse, AppStatisticsResponse, AppTemplatesResponse, AppTokenCostsResponse, AppVoicesListResponse, CreateApiKeyResponse, DSLImportMode, DSLImportResponse, GenerationIntroductionResponse, TracingConfig, TracingStatus, UpdateAppModelConfigResponse, UpdateAppSiteCodeResponse, UpdateOpenAIKeyResponse, ValidateOpenAIKeyResponse, WebhookTriggerResponse, WorkflowDailyConversationsResponse, WorkflowOnlineUser, WorkflowOnlineUsersResponse } from '@/models/app'
 import type { CommonResponse } from '@/models/common'
 import type { AppIconType, AppModeEnum, ModelConfig } from '@/types/app'
 import type { TracingProvider } from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/type'
@@ -9,6 +9,31 @@ export const fetchAppList: Fetcher<AppListResponse, { url: string; params?: Reco
   return get<AppListResponse>(url, { params })
 }
 
+export const fetchWorkflowOnlineUsers: Fetcher<Record<string, WorkflowOnlineUser[]>, { workflowIds: string[] }> = async ({ workflowIds }) => {
+  if (!workflowIds.length)
+    return {}
+
+  const params = { workflow_ids: workflowIds.join(',') }
+  const response = await get<WorkflowOnlineUsersResponse>('apps/workflows/online-users', { params })
+
+  if (!response || !response.data)
+    return {}
+
+  if (Array.isArray(response.data)) {
+    return response.data.reduce<Record<string, WorkflowOnlineUser[]>>((acc, item) => {
+      if (item?.workflow_id)
+        acc[item.workflow_id] = item.users || []
+      return acc
+    }, {})
+  }
+
+  return Object.entries(response.data).reduce<Record<string, WorkflowOnlineUser[]>>((acc, [workflowId, users]) => {
+    if (workflowId)
+      acc[workflowId] = users || []
+    return acc
+  }, {})
+}
+
 export const fetchAppDetail: Fetcher<AppDetailResponse, { url: string; id: string }> = ({ url, id }) => {
   return get<AppDetailResponse>(`${url}/${id}`)
 }
diff --git a/web/service/common.ts b/web/service/common.ts
index 55dec33cb5..269385b27c 100644
--- a/web/service/common.ts
+++ b/web/service/common.ts
@@ -389,3 +389,7 @@ export const resetEmail = (body: { new_email: string; token: string }) =>
 
 export const checkEmailExisted = (body: { email: string }) =>
   post<CommonResponse>('/account/change-email/check-email-unique', { body }, { silent: true })
+
+export const getAvatar: Fetcher<{ avatar_url: string }, { avatar: string }> = ({ avatar }) => {
+  return get<{ avatar_url: string }>(`/account/avatar?avatar=${avatar}`)
+}
diff --git a/web/service/workflow-comment.ts b/web/service/workflow-comment.ts
new file mode 100644
index 0000000000..4eec0f0662
--- /dev/null
+++ b/web/service/workflow-comment.ts
@@ -0,0 +1,152 @@
+import { del, get, post, put } from './base'
+import type { CommonResponse } from '@/models/common'
+
+export type UserProfile = {
+  id: string
+  name: string
+  email: string
+  avatar_url?: string
+}
+
+export type WorkflowCommentList = {
+  id: string
+  position_x: number
+  position_y: number
+  content: string
+  created_by: string
+  created_by_account: UserProfile
+  created_at: number
+  updated_at: number
+  resolved: boolean
+  resolved_by?: string
+  resolved_by_account?: UserProfile
+  resolved_at?: number
+  mention_count: number
+  reply_count: number
+  participants: UserProfile[]
+}
+
+export type WorkflowCommentDetailMention = {
+  mentioned_user_id: string
+  mentioned_user_account?: UserProfile | null
+  reply_id: string | null
+}
+
+export type WorkflowCommentDetailReply = {
+  id: string
+  content: string
+  created_by: string
+  created_by_account?: UserProfile | null
+  created_at: number
+}
+
+export type WorkflowCommentDetail = {
+  id: string
+  position_x: number
+  position_y: number
+  content: string
+  created_by: string
+  created_by_account: UserProfile
+  created_at: number
+  updated_at: number
+  resolved: boolean
+  resolved_by?: string
+  resolved_by_account?: UserProfile
+  resolved_at?: number
+  replies: WorkflowCommentDetailReply[]
+  mentions: WorkflowCommentDetailMention[]
+}
+
+export type WorkflowCommentCreateRes = {
+  id: string
+  created_at: string
+}
+
+export type WorkflowCommentUpdateRes = {
+  id: string
+  updated_at: string
+}
+
+export type WorkflowCommentResolveRes = {
+  id: string
+  resolved: boolean
+  resolved_by: string
+  resolved_at: number
+}
+
+export type WorkflowCommentReply = {
+  id: string
+  comment_id: string
+  content: string
+  created_by: string
+  created_at: string
+  updated_at: string
+  mentioned_user_ids: string[]
+  author: {
+    id: string
+    name: string
+    email: string
+    avatar?: string
+  }
+}
+
+export type CreateCommentParams = {
+  position_x: number
+  position_y: number
+  content: string
+  mentioned_user_ids?: string[]
+}
+
+export type UpdateCommentParams = {
+  content: string
+  position_x?: number
+  position_y?: number
+  mentioned_user_ids?: string[]
+}
+
+export type CreateReplyParams = {
+  content: string
+  mentioned_user_ids?: string[]
+}
+
+export const fetchWorkflowComments = async (appId: string): Promise<WorkflowCommentList[]> => {
+  const response = await get<{ data: WorkflowCommentList[] }>(`apps/${appId}/workflow/comments`)
+  return response.data
+}
+
+export const createWorkflowComment = async (appId: string, params: CreateCommentParams): Promise<WorkflowCommentCreateRes> => {
+  return post<WorkflowCommentCreateRes>(`apps/${appId}/workflow/comments`, { body: params })
+}
+
+export const fetchWorkflowComment = async (appId: string, commentId: string): Promise<WorkflowCommentDetail> => {
+  return get<WorkflowCommentDetail>(`apps/${appId}/workflow/comments/${commentId}`)
+}
+
+export const updateWorkflowComment = async (appId: string, commentId: string, params: UpdateCommentParams): Promise<WorkflowCommentUpdateRes> => {
+  return put<WorkflowCommentUpdateRes>(`apps/${appId}/workflow/comments/${commentId}`, { body: params })
+}
+
+export const deleteWorkflowComment = async (appId: string, commentId: string): Promise<CommonResponse> => {
+  return del<CommonResponse>(`apps/${appId}/workflow/comments/${commentId}`)
+}
+
+export const resolveWorkflowComment = async (appId: string, commentId: string): Promise<WorkflowCommentResolveRes> => {
+  return post<WorkflowCommentResolveRes>(`apps/${appId}/workflow/comments/${commentId}/resolve`)
+}
+
+export const createWorkflowCommentReply = async (appId: string, commentId: string, params: CreateReplyParams): Promise<WorkflowCommentReply> => {
+  return post<WorkflowCommentReply>(`apps/${appId}/workflow/comments/${commentId}/replies`, { body: params })
+}
+
+export const updateWorkflowCommentReply = async (appId: string, commentId: string, replyId: string, params: CreateReplyParams): Promise<WorkflowCommentReply> => {
+  return put<WorkflowCommentReply>(`apps/${appId}/workflow/comments/${commentId}/replies/${replyId}`, { body: params })
+}
+
+export const deleteWorkflowCommentReply = async (appId: string, commentId: string, replyId: string): Promise<CommonResponse> => {
+  return del<CommonResponse>(`apps/${appId}/workflow/comments/${commentId}/replies/${replyId}`)
+}
+
+export const fetchMentionableUsers = async (appId: string) => {
+  const response = await get<{ users: Array<UserProfile> }>(`apps/${appId}/workflow/comments/mention-users`)
+  return response.users
+}
diff --git a/web/service/workflow.ts b/web/service/workflow.ts
index 654fe3d01a..568014717e 100644
--- a/web/service/workflow.ts
+++ b/web/service/workflow.ts
@@ -12,6 +12,26 @@ import type { BlockEnum } from '@/app/components/workflow/types'
 import type { VarInInspect } from '@/types/workflow'
 import type { FlowType } from '@/types/common'
 import { getFlowPrefix } from './utils'
+import type { ConversationVariable, EnvironmentVariable } from '@/app/components/workflow/types'
+import type {
+  FileUpload,
+  RetrieverResource,
+  SensitiveWordAvoidance,
+  SpeechToText,
+  SuggestedQuestionsAfterAnswer,
+  TextToSpeech,
+} from '@/app/components/base/features/types'
+
+export type WorkflowDraftFeaturesPayload = {
+  opening_statement: string
+  suggested_questions: string[]
+  suggested_questions_after_answer?: SuggestedQuestionsAfterAnswer
+  text_to_speech?: TextToSpeech
+  speech_to_text?: SpeechToText
+  retriever_resource?: RetrieverResource
+  sensitive_word_avoidance?: SensitiveWordAvoidance
+  file_upload?: FileUpload
+}
 
 export const fetchWorkflowDraft = (url: string) => {
   return get(url, {}, { silent: true }) as Promise<FetchWorkflowDraftResponse>
@@ -107,3 +127,36 @@ export const fetchNodeInspectVars = async (flowType: FlowType, flowId: string, n
   const { items } = (await get(`${getFlowPrefix(flowType)}/${flowId}/workflows/draft/nodes/${nodeId}/variables`)) as { items: VarInInspect[] }
   return items
 }
+
+// Environment Variables API
+export const fetchEnvironmentVariables = async (appId: string): Promise<EnvironmentVariable[]> => {
+  const { items } = (await get(`apps/${appId}/workflows/draft/environment-variables`)) as { items: EnvironmentVariable[] }
+  return items
+}
+
+export const updateEnvironmentVariables = ({ appId, environmentVariables }: {
+  appId: string
+  environmentVariables: EnvironmentVariable[]
+}) => {
+  return post<CommonResponse>(`apps/${appId}/workflows/draft/environment-variables`, {
+    body: { environment_variables: environmentVariables },
+  })
+}
+
+export const updateConversationVariables = ({ appId, conversationVariables }: {
+  appId: string
+  conversationVariables: ConversationVariable[]
+}) => {
+  return post<CommonResponse>(`apps/${appId}/workflows/draft/conversation-variables`, {
+    body: { conversation_variables: conversationVariables },
+  })
+}
+
+export const updateFeatures = ({ appId, features }: {
+  appId: string
+  features: WorkflowDraftFeaturesPayload
+}) => {
+  return post<CommonResponse>(`apps/${appId}/workflows/draft/features`, {
+    body: { features },
+  })
+}
diff --git a/web/types/feature.ts b/web/types/feature.ts
index 05421f53c3..88efe9d1f7 100644
--- a/web/types/feature.ts
+++ b/web/types/feature.ts
@@ -39,6 +39,7 @@ export type SystemFeatures = {
   enable_email_code_login: boolean
   enable_email_password_login: boolean
   enable_social_oauth_login: boolean
+  enable_collaboration_mode: boolean
   is_allow_create_workspace: boolean
   is_allow_register: boolean
   is_email_setup: boolean
@@ -75,6 +76,7 @@ export const defaultSystemFeatures: SystemFeatures = {
   enable_email_code_login: false,
   enable_email_password_login: false,
   enable_social_oauth_login: false,
+  enable_collaboration_mode: false,
   is_allow_create_workspace: false,
   is_allow_register: false,
   is_email_setup: false,