chore: bump Dify to 1.13.3 and sandbox to 0.2.13 (#34079)

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

api/controllers/inner_api/__init__.py

@@ -16,12 +16,14 @@ api = ExternalApi(
 inner_api_ns = Namespace("inner_api", description="Internal API operations", path="/")
 
 from . import mail as _mail
+from .app import dsl as _app_dsl
 from .plugin import plugin as _plugin
 from .workspace import workspace as _workspace
 
 api.add_namespace(inner_api_ns)
 
 __all__ = [
+    "_app_dsl",
     "_mail",
     "_plugin",
     "_workspace",

api/controllers/inner_api/app/__init__.py

@@ -0,0 +1 @@
+

api/controllers/inner_api/app/dsl.py

@@ -0,0 +1,110 @@
+"""Inner API endpoints for app DSL import/export.
+
+Called by the enterprise admin-api service. Import requires ``creator_email``
+to attribute the created app; workspace/membership validation is done by the
+Go admin-api caller.
+"""
+
+from flask import request
+from flask_restx import Resource
+from pydantic import BaseModel, Field
+from sqlalchemy.orm import Session
+
+from controllers.common.schema import register_schema_model
+from controllers.console.wraps import setup_required
+from controllers.inner_api import inner_api_ns
+from controllers.inner_api.wraps import enterprise_inner_api_only
+from extensions.ext_database import db
+from models import Account, App
+from models.account import AccountStatus
+from services.app_dsl_service import AppDslService, ImportMode, ImportStatus
+
+
+class InnerAppDSLImportPayload(BaseModel):
+    yaml_content: str = Field(description="YAML DSL content")
+    creator_email: str = Field(description="Email of the workspace member who will own the imported app")
+    name: str | None = Field(default=None, description="Override app name from DSL")
+    description: str | None = Field(default=None, description="Override app description from DSL")
+
+
+register_schema_model(inner_api_ns, InnerAppDSLImportPayload)
+
+
+@inner_api_ns.route("/enterprise/workspaces/<string:workspace_id>/dsl/import")
+class EnterpriseAppDSLImport(Resource):
+    @setup_required
+    @enterprise_inner_api_only
+    @inner_api_ns.doc("enterprise_app_dsl_import")
+    @inner_api_ns.expect(inner_api_ns.models[InnerAppDSLImportPayload.__name__])
+    @inner_api_ns.doc(
+        responses={
+            200: "Import completed",
+            202: "Import pending (DSL version mismatch requires confirmation)",
+            400: "Import failed (business error)",
+            404: "Creator account not found or inactive",
+        }
+    )
+    def post(self, workspace_id: str):
+        """Import a DSL into a workspace on behalf of a specified creator."""
+        args = InnerAppDSLImportPayload.model_validate(inner_api_ns.payload or {})
+
+        account = _get_active_account(args.creator_email)
+        if account is None:
+            return {"message": f"account '{args.creator_email}' not found or inactive"}, 404
+
+        account.set_tenant_id(workspace_id)
+
+        with Session(db.engine) as session:
+            dsl_service = AppDslService(session)
+            result = dsl_service.import_app(
+                account=account,
+                import_mode=ImportMode.YAML_CONTENT,
+                yaml_content=args.yaml_content,
+                name=args.name,
+                description=args.description,
+            )
+            session.commit()
+
+        if result.status == ImportStatus.FAILED:
+            return result.model_dump(mode="json"), 400
+        if result.status == ImportStatus.PENDING:
+            return result.model_dump(mode="json"), 202
+        return result.model_dump(mode="json"), 200
+
+
+@inner_api_ns.route("/enterprise/apps/<string:app_id>/dsl")
+class EnterpriseAppDSLExport(Resource):
+    @setup_required
+    @enterprise_inner_api_only
+    @inner_api_ns.doc(
+        "enterprise_app_dsl_export",
+        responses={
+            200: "Export successful",
+            404: "App not found",
+        },
+    )
+    def get(self, app_id: str):
+        """Export an app's DSL as YAML."""
+        include_secret = request.args.get("include_secret", "false").lower() == "true"
+
+        app_model = db.session.query(App).filter_by(id=app_id).first()
+        if not app_model:
+            return {"message": "app not found"}, 404
+
+        data = AppDslService.export_dsl(
+            app_model=app_model,
+            include_secret=include_secret,
+        )
+
+        return {"data": data}, 200
+
+
+def _get_active_account(email: str) -> Account | None:
+    """Look up an active account by email.
+
+    Workspace membership is already validated by the Go admin-api caller.
+    """
+    account = db.session.query(Account).filter_by(email=email).first()
+    if account is None or account.status != AccountStatus.ACTIVE:
+        return None
+    return account

api/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "dify-api"
-version = "1.13.2"
+version = "1.13.3"
 requires-python = ">=3.11,<3.13"
 
 dependencies = [

api/tests/test_containers_integration_tests/conftest.py

@@ -163,11 +163,9 @@ class DifyTestContainers:
         wait_for_logs(self.redis, "Ready to accept connections", timeout=30)
         logger.info("Redis container is ready and accepting connections")
 
-        # Start Dify Sandbox container for code execution environment
-        # Dify Sandbox provides a secure environment for executing user code
-        # Use pinned version 0.2.12 to match production docker-compose configuration
+        # Start Dify Sandbox container for code execution environment.
         logger.info("Initializing Dify Sandbox container...")
-        self.dify_sandbox = DockerContainer(image="langgenius/dify-sandbox:0.2.12").with_network(self.network)
+        self.dify_sandbox = DockerContainer(image="langgenius/dify-sandbox:0.2.14").with_network(self.network)
         self.dify_sandbox.with_exposed_ports(8194)
         self.dify_sandbox.env = {
             "API_KEY": "test_api_key",
@@ -187,7 +185,7 @@ class DifyTestContainers:
         # Start Dify Plugin Daemon container for plugin management
         # Dify Plugin Daemon provides plugin lifecycle management and execution
         logger.info("Initializing Dify Plugin Daemon container...")
-        self.dify_plugin_daemon = DockerContainer(image="langgenius/dify-plugin-daemon:0.5.4-local").with_network(
+        self.dify_plugin_daemon = DockerContainer(image="langgenius/dify-plugin-daemon:0.5.3-local").with_network(
             self.network
         )
         self.dify_plugin_daemon.with_exposed_ports(5002)

api/tests/unit_tests/controllers/inner_api/app/__init__.py

@@ -0,0 +1 @@
+

api/tests/unit_tests/controllers/inner_api/app/test_dsl.py

@@ -0,0 +1,245 @@
+"""Unit tests for inner_api app DSL import/export endpoints.
+
+Tests Pydantic model validation, endpoint handler logic, and the
+_get_active_account helper. Auth/setup decorators are tested separately
+in test_auth_wraps.py; handler tests use inspect.unwrap() to bypass them.
+"""
+
+import inspect
+from unittest.mock import MagicMock, patch
+
+import pytest
+from flask import Flask
+from pydantic import ValidationError
+
+from controllers.inner_api.app.dsl import (
+    EnterpriseAppDSLExport,
+    EnterpriseAppDSLImport,
+    InnerAppDSLImportPayload,
+    _get_active_account,
+)
+from services.app_dsl_service import ImportStatus
+
+
+class TestInnerAppDSLImportPayload:
+    """Test InnerAppDSLImportPayload Pydantic model validation."""
+
+    def test_valid_payload_all_fields(self):
+        data = {
+            "yaml_content": "version: 0.6.0\nkind: app\n",
+            "creator_email": "user@example.com",
+            "name": "My App",
+            "description": "A test app",
+        }
+        payload = InnerAppDSLImportPayload.model_validate(data)
+        assert payload.yaml_content == data["yaml_content"]
+        assert payload.creator_email == "user@example.com"
+        assert payload.name == "My App"
+        assert payload.description == "A test app"
+
+    def test_valid_payload_optional_fields_omitted(self):
+        data = {
+            "yaml_content": "version: 0.6.0\n",
+            "creator_email": "user@example.com",
+        }
+        payload = InnerAppDSLImportPayload.model_validate(data)
+        assert payload.name is None
+        assert payload.description is None
+
+    def test_missing_yaml_content_fails(self):
+        with pytest.raises(ValidationError) as exc_info:
+            InnerAppDSLImportPayload.model_validate({"creator_email": "a@b.com"})
+        assert "yaml_content" in str(exc_info.value)
+
+    def test_missing_creator_email_fails(self):
+        with pytest.raises(ValidationError) as exc_info:
+            InnerAppDSLImportPayload.model_validate({"yaml_content": "test"})
+        assert "creator_email" in str(exc_info.value)
+
+
+class TestGetActiveAccount:
+    """Test the _get_active_account helper function."""
+
+    @patch("controllers.inner_api.app.dsl.db")
+    def test_returns_active_account(self, mock_db):
+        mock_account = MagicMock()
+        mock_account.status = "active"
+        mock_db.session.query.return_value.filter_by.return_value.first.return_value = mock_account
+
+        result = _get_active_account("user@example.com")
+
+        assert result is mock_account
+        mock_db.session.query.return_value.filter_by.assert_called_once_with(email="user@example.com")
+
+    @patch("controllers.inner_api.app.dsl.db")
+    def test_returns_none_for_inactive_account(self, mock_db):
+        mock_account = MagicMock()
+        mock_account.status = "banned"
+        mock_db.session.query.return_value.filter_by.return_value.first.return_value = mock_account
+
+        result = _get_active_account("banned@example.com")
+
+        assert result is None
+
+    @patch("controllers.inner_api.app.dsl.db")
+    def test_returns_none_for_nonexistent_email(self, mock_db):
+        mock_db.session.query.return_value.filter_by.return_value.first.return_value = None
+
+        result = _get_active_account("missing@example.com")
+
+        assert result is None
+
+
+class TestEnterpriseAppDSLImport:
+    """Test EnterpriseAppDSLImport endpoint handler logic.
+
+    Uses inspect.unwrap() to bypass auth/setup decorators.
+    """
+
+    @pytest.fixture
+    def api_instance(self):
+        return EnterpriseAppDSLImport()
+
+    @pytest.fixture
+    def _mock_import_deps(self):
+        """Patch db, Session, and AppDslService for import handler tests."""
+        with (
+            patch("controllers.inner_api.app.dsl.db"),
+            patch("controllers.inner_api.app.dsl.Session") as mock_session,
+            patch("controllers.inner_api.app.dsl.AppDslService") as mock_dsl_cls,
+        ):
+            mock_session.return_value.__enter__ = MagicMock(return_value=MagicMock())
+            mock_session.return_value.__exit__ = MagicMock(return_value=False)
+            self._mock_dsl = MagicMock()
+            mock_dsl_cls.return_value = self._mock_dsl
+            yield
+
+    def _make_import_result(self, status: ImportStatus, **kwargs) -> "Import":
+        from services.app_dsl_service import Import
+
+        result = Import(
+            id="import-id",
+            status=status,
+            app_id=kwargs.get("app_id", "app-123"),
+            app_mode=kwargs.get("app_mode", "workflow"),
+        )
+        return result
+
+    @pytest.mark.usefixtures("_mock_import_deps")
+    @patch("controllers.inner_api.app.dsl._get_active_account")
+    def test_import_success_returns_200(self, mock_get_account, api_instance, app: Flask):
+        mock_account = MagicMock()
+        mock_get_account.return_value = mock_account
+        self._mock_dsl.import_app.return_value = self._make_import_result(ImportStatus.COMPLETED)
+
+        unwrapped = inspect.unwrap(api_instance.post)
+        with app.test_request_context():
+            with patch("controllers.inner_api.app.dsl.inner_api_ns") as mock_ns:
+                mock_ns.payload = {
+                    "yaml_content": "version: 0.6.0\n",
+                    "creator_email": "user@example.com",
+                }
+                result = unwrapped(api_instance, workspace_id="ws-123")
+
+        body, status_code = result
+        assert status_code == 200
+        assert body["status"] == "completed"
+        mock_account.set_tenant_id.assert_called_once_with("ws-123")
+
+    @pytest.mark.usefixtures("_mock_import_deps")
+    @patch("controllers.inner_api.app.dsl._get_active_account")
+    def test_import_pending_returns_202(self, mock_get_account, api_instance, app: Flask):
+        mock_get_account.return_value = MagicMock()
+        self._mock_dsl.import_app.return_value = self._make_import_result(ImportStatus.PENDING)
+
+        unwrapped = inspect.unwrap(api_instance.post)
+        with app.test_request_context():
+            with patch("controllers.inner_api.app.dsl.inner_api_ns") as mock_ns:
+                mock_ns.payload = {"yaml_content": "test", "creator_email": "u@e.com"}
+                body, status_code = unwrapped(api_instance, workspace_id="ws-123")
+
+        assert status_code == 202
+        assert body["status"] == "pending"
+
+    @pytest.mark.usefixtures("_mock_import_deps")
+    @patch("controllers.inner_api.app.dsl._get_active_account")
+    def test_import_failed_returns_400(self, mock_get_account, api_instance, app: Flask):
+        mock_get_account.return_value = MagicMock()
+        self._mock_dsl.import_app.return_value = self._make_import_result(ImportStatus.FAILED)
+
+        unwrapped = inspect.unwrap(api_instance.post)
+        with app.test_request_context():
+            with patch("controllers.inner_api.app.dsl.inner_api_ns") as mock_ns:
+                mock_ns.payload = {"yaml_content": "test", "creator_email": "u@e.com"}
+                body, status_code = unwrapped(api_instance, workspace_id="ws-123")
+
+        assert status_code == 400
+        assert body["status"] == "failed"
+
+    @patch("controllers.inner_api.app.dsl._get_active_account")
+    def test_import_account_not_found_returns_404(self, mock_get_account, api_instance, app: Flask):
+        mock_get_account.return_value = None
+
+        unwrapped = inspect.unwrap(api_instance.post)
+        with app.test_request_context():
+            with patch("controllers.inner_api.app.dsl.inner_api_ns") as mock_ns:
+                mock_ns.payload = {"yaml_content": "test", "creator_email": "missing@e.com"}
+                result = unwrapped(api_instance, workspace_id="ws-123")
+
+        body, status_code = result
+        assert status_code == 404
+        assert "missing@e.com" in body["message"]
+
+
+class TestEnterpriseAppDSLExport:
+    """Test EnterpriseAppDSLExport endpoint handler logic.
+
+    Uses inspect.unwrap() to bypass auth/setup decorators.
+    """
+
+    @pytest.fixture
+    def api_instance(self):
+        return EnterpriseAppDSLExport()
+
+    @patch("controllers.inner_api.app.dsl.AppDslService")
+    @patch("controllers.inner_api.app.dsl.db")
+    def test_export_success_returns_200(self, mock_db, mock_dsl_cls, api_instance, app: Flask):
+        mock_app = MagicMock()
+        mock_db.session.query.return_value.filter_by.return_value.first.return_value = mock_app
+        mock_dsl_cls.export_dsl.return_value = "version: 0.6.0\nkind: app\n"
+
+        unwrapped = inspect.unwrap(api_instance.get)
+        with app.test_request_context("?include_secret=false"):
+            result = unwrapped(api_instance, app_id="app-123")
+
+        body, status_code = result
+        assert status_code == 200
+        assert body["data"] == "version: 0.6.0\nkind: app\n"
+        mock_dsl_cls.export_dsl.assert_called_once_with(app_model=mock_app, include_secret=False)
+
+    @patch("controllers.inner_api.app.dsl.AppDslService")
+    @patch("controllers.inner_api.app.dsl.db")
+    def test_export_with_secret(self, mock_db, mock_dsl_cls, api_instance, app: Flask):
+        mock_app = MagicMock()
+        mock_db.session.query.return_value.filter_by.return_value.first.return_value = mock_app
+        mock_dsl_cls.export_dsl.return_value = "yaml-data"
+
+        unwrapped = inspect.unwrap(api_instance.get)
+        with app.test_request_context("?include_secret=true"):
+            result = unwrapped(api_instance, app_id="app-123")
+
+        body, status_code = result
+        assert status_code == 200
+        mock_dsl_cls.export_dsl.assert_called_once_with(app_model=mock_app, include_secret=True)
+
+    @patch("controllers.inner_api.app.dsl.db")
+    def test_export_app_not_found_returns_404(self, mock_db, api_instance, app: Flask):
+        mock_db.session.query.return_value.filter_by.return_value.first.return_value = None
+
+        unwrapped = inspect.unwrap(api_instance.get)
+        with app.test_request_context("?include_secret=false"):
+            result = unwrapped(api_instance, app_id="nonexistent")
+
+        body, status_code = result
+        assert status_code == 404
+        assert "app not found" in body["message"]

api/uv.lock

@@ -1457,7 +1457,7 @@ wheels = [
 
 [[package]]
 name = "dify-api"
-version = "1.13.2"
+version = "1.13.3"
 source = { virtual = "." }
 dependencies = [
     { name = "aliyun-log-python-sdk" },

docker/docker-compose-template.yaml

@@ -21,7 +21,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.13.2
+    image: langgenius/dify-api:1.13.3
     restart: always
     environment:
       # Use the shared environment variables.
@@ -63,7 +63,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.13.2
+    image: langgenius/dify-api:1.13.3
     restart: always
     environment:
       # Use the shared environment variables.
@@ -102,7 +102,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.13.2
+    image: langgenius/dify-api:1.13.3
     restart: always
     environment:
       # Use the shared environment variables.
@@ -132,7 +132,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.13.2
+    image: langgenius/dify-web:1.13.3
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}
@@ -245,7 +245,7 @@ services:
 
   # The DifySandbox
   sandbox:
-    image: langgenius/dify-sandbox:0.2.12
+    image: langgenius/dify-sandbox:0.2.14
     restart: always
     environment:
       # The DifySandbox configurations
@@ -269,7 +269,7 @@ services:
 
   # plugin daemon
   plugin_daemon:
-    image: langgenius/dify-plugin-daemon:0.5.4-local
+    image: langgenius/dify-plugin-daemon:0.5.3-local
     restart: always
     environment:
       # Use the shared environment variables.

docker/docker-compose.middleware.yaml

@@ -97,7 +97,7 @@ services:
 
   # The DifySandbox
   sandbox:
-    image: langgenius/dify-sandbox:0.2.12
+    image: langgenius/dify-sandbox:0.2.14
     restart: always
     env_file:
       - ./middleware.env
@@ -123,7 +123,7 @@ services:
 
   # plugin daemon
   plugin_daemon:
-    image: langgenius/dify-plugin-daemon:0.5.4-local
+    image: langgenius/dify-plugin-daemon:0.5.3-local
     restart: always
     env_file:
       - ./middleware.env

docker/docker-compose.yaml

@@ -731,7 +731,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.13.2
+    image: langgenius/dify-api:1.13.3
     restart: always
     environment:
       # Use the shared environment variables.
@@ -773,7 +773,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.13.2
+    image: langgenius/dify-api:1.13.3
     restart: always
     environment:
       # Use the shared environment variables.
@@ -812,7 +812,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.13.2
+    image: langgenius/dify-api:1.13.3
     restart: always
     environment:
       # Use the shared environment variables.
@@ -842,7 +842,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.13.2
+    image: langgenius/dify-web:1.13.3
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}
@@ -955,7 +955,7 @@ services:
 
   # The DifySandbox
   sandbox:
-    image: langgenius/dify-sandbox:0.2.12
+    image: langgenius/dify-sandbox:0.2.14
     restart: always
     environment:
       # The DifySandbox configurations
@@ -979,7 +979,7 @@ services:
 
   # plugin daemon
   plugin_daemon:
-    image: langgenius/dify-plugin-daemon:0.5.4-local
+    image: langgenius/dify-plugin-daemon:0.5.3-local
     restart: always
     environment:
       # Use the shared environment variables.

docker/volumes/sandbox/conf/config.yaml

@@ -5,7 +5,8 @@ app:
 max_workers: 4
 max_requests: 50
 worker_timeout: 5
-python_path: /usr/local/bin/python3
+python_path: /opt/python/bin/python3
+nodejs_path: /usr/local/bin/node
 enable_network: True # please make sure there is no network risk in your environment
 allowed_syscalls: # please leave it empty if you have no idea how seccomp works
 proxy:

docker/volumes/sandbox/conf/config.yaml.example

@@ -5,7 +5,7 @@ app:
 max_workers: 4
 max_requests: 50
 worker_timeout: 5
-python_path: /usr/local/bin/python3
+python_path: /opt/python/bin/python3
 python_lib_path:
   - /usr/local/lib/python3.10
   - /usr/lib/python3.10

web/.storybook/preview.tsx

@@ -7,7 +7,7 @@ import { I18nClientProvider as I18N } from '../app/components/provider/i18n'
 import commonEnUS from '../i18n/en-US/common.json'
 
 import '../app/styles/globals.css'
-import '../app/styles/markdown.scss'
+import '../app/styles/markdown.css'
 import './storybook.css'
 
 const queryClient = new QueryClient({

web/__tests__/check-i18n.test.ts

@@ -774,7 +774,7 @@ export default translation`
       const endTime = Date.now()
 
       expect(keys.length).toBe(1000)
-      expect(endTime - startTime).toBeLessThan(1000) // Should complete in under 1 second
+      expect(endTime - startTime).toBeLessThan(10000)
     })
 
     it('should handle multiple translation files concurrently', async () => {
@@ -796,7 +796,7 @@ export default translation`
       const endTime = Date.now()
 
       expect(keys.length).toBe(20) // 10 files * 2 keys each
-      expect(endTime - startTime).toBeLessThan(500)
+      expect(endTime - startTime).toBeLessThan(10000)
     })
   })
 

web/app/components/app/configuration/config/agent/agent-setting/index.spec.tsx

@@ -12,15 +12,15 @@ vi.mock('ahooks', async (importOriginal) => {
   }
 })
 
-vi.mock('react-slider', () => ({
-  default: (props: { className?: string, min?: number, max?: number, value: number, onChange: (value: number) => void }) => (
+vi.mock('@/app/components/base/ui/slider', () => ({
+  Slider: (props: { className?: string, min?: number, max?: number, value: number, onValueChange: (value: number) => void }) => (
     <input
       type="range"
-      className={props.className}
+      className={`slider ${props.className ?? ''}`}
       min={props.min}
       max={props.max}
       value={props.value}
-      onChange={e => props.onChange(Number(e.target.value))}
+      onChange={e => props.onValueChange(Number(e.target.value))}
     />
   ),
 }))

web/app/components/app/configuration/config/agent/agent-setting/index.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import { CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Unblur } from '@/app/components/base/icons/src/vender/solid/education'
-import Slider from '@/app/components/base/slider'
+import { Slider } from '@/app/components/base/ui/slider'
 import { DEFAULT_AGENT_PROMPT, MAX_ITERATIONS_NUM } from '@/config'
 import ItemPanel from './item-panel'
 
@@ -105,12 +105,13 @@ const AgentSetting: FC<Props> = ({
                 min={maxIterationsMin}
                 max={MAX_ITERATIONS_NUM}
                 value={tempPayload.max_iteration}
-                onChange={(value) => {
+                onValueChange={(value) => {
                   setTempPayload({
                     ...tempPayload,
                     max_iteration: value,
                   })
                 }}
+                aria-label={t('agent.setting.maximumIterations.name', { ns: 'appDebug' })}
               />
 
               <input

web/app/components/app/configuration/dataset-config/params-config/config-content.spec.tsx

@@ -288,10 +288,8 @@ describe('ConfigContent', () => {
         />,
       )
 
-      const weightedScoreSlider = screen.getAllByRole('slider')
-        .find(slider => slider.getAttribute('aria-valuemax') === '1')
-      expect(weightedScoreSlider).toBeDefined()
-      await user.click(weightedScoreSlider!)
+      const weightedScoreSlider = screen.getByLabelText('dataset.weightedScore.semantic')
+      weightedScoreSlider.focus()
       const callsBefore = onChange.mock.calls.length
       await user.keyboard('{ArrowRight}')
 

web/app/components/app/configuration/dataset-config/params-config/weighted-score.css

@@ -1,7 +0,0 @@
-.weightedScoreSliderTrack {
-  background: var(--color-util-colors-blue-light-blue-light-500) !important;
-}
-
-.weightedScoreSliderTrack-1 {
-  background: transparent !important;
-}

web/app/components/app/configuration/dataset-config/params-config/weighted-score.spec.tsx

@@ -3,6 +3,8 @@ import userEvent from '@testing-library/user-event'
 import WeightedScore from './weighted-score'
 
 describe('WeightedScore', () => {
+  const getSliderInput = () => screen.getByLabelText('dataset.weightedScore.semantic')
+
   beforeEach(() => {
     vi.clearAllMocks()
   })
@@ -48,8 +50,8 @@ describe('WeightedScore', () => {
       render(<WeightedScore value={value} onChange={onChange} />)
 
       // Act
-      await user.tab()
-      const slider = screen.getByRole('slider')
+      const slider = getSliderInput()
+      slider.focus()
       expect(slider).toHaveFocus()
       const callsBefore = onChange.mock.calls.length
       await user.keyboard('{ArrowRight}')
@@ -69,9 +71,8 @@ describe('WeightedScore', () => {
       render(<WeightedScore value={value} onChange={onChange} readonly />)
 
       // Act
-      await user.tab()
-      const slider = screen.getByRole('slider')
-      expect(slider).toHaveFocus()
+      const slider = getSliderInput()
+      expect(slider).toBeDisabled()
       await user.keyboard('{ArrowRight}')
 
       // Assert

web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx

@@ -1,9 +1,13 @@
+import type { CSSProperties } from 'react'
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Slider from '@/app/components/base/slider'
-import { cn } from '@/utils/classnames'
-import './weighted-score.css'
+import { Slider } from '@/app/components/base/ui/slider'
+
+const weightedScoreSliderStyle: CSSProperties & Record<'--slider-track' | '--slider-range', string> = {
+  '--slider-track': 'var(--color-util-colors-teal-teal-500)',
+  '--slider-range': 'var(--color-util-colors-blue-light-blue-light-500)',
+}
 
 const formatNumber = (value: number) => {
   if (value > 0 && value < 1)
@@ -33,24 +37,26 @@ const WeightedScore = ({
   return (
     <div>
       <div className="space-x-3 rounded-lg border border-components-panel-border px-3 pb-2 pt-5">
-        <Slider
-          className={cn('h-0.5 grow rounded-full !bg-util-colors-teal-teal-500')}
-          max={1.0}
-          min={0}
-          step={0.1}
-          value={value.value[0]}
-          onChange={v => !readonly && onChange({ value: [v, (10 - v * 10) / 10] })}
-          trackClassName="weightedScoreSliderTrack"
-          disabled={readonly}
-        />
+        <div className="grow" style={weightedScoreSliderStyle}>
+          <Slider
+            className="grow"
+            max={1.0}
+            min={0}
+            step={0.1}
+            value={value.value[0]}
+            onValueChange={v => !readonly && onChange({ value: [v, (10 - v * 10) / 10] })}
+            disabled={readonly}
+            aria-label={t('weightedScore.semantic', { ns: 'dataset' })}
+          />
+        </div>
         <div className="mt-3 flex justify-between">
-          <div className="system-xs-semibold-uppercase flex w-[90px] shrink-0 items-center text-util-colors-blue-light-blue-light-500">
+          <div className="flex w-[90px] shrink-0 items-center text-util-colors-blue-light-blue-light-500 system-xs-semibold-uppercase">
             <div className="mr-1 truncate uppercase" title={t('weightedScore.semantic', { ns: 'dataset' }) || ''}>
               {t('weightedScore.semantic', { ns: 'dataset' })}
             </div>
             {formatNumber(value.value[0])}
           </div>
-          <div className="system-xs-semibold-uppercase flex w-[90px] shrink-0 items-center justify-end text-util-colors-teal-teal-500">
+          <div className="flex w-[90px] shrink-0 items-center justify-end text-util-colors-teal-teal-500 system-xs-semibold-uppercase">
             {formatNumber(value.value[1])}
             <div className="ml-1 truncate uppercase" title={t('weightedScore.keyword', { ns: 'dataset' }) || ''}>
               {t('weightedScore.keyword', { ns: 'dataset' })}

web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx

@@ -93,7 +93,6 @@ const ConfigParamModal: FC<Props> = ({
             className="mt-1"
             value={(annotationConfig.score_threshold || ANNOTATION_DEFAULT.score_threshold) * 100}
             onChange={(val) => {
-              /* v8 ignore next -- callback dispatch depends on react-slider drag mechanics that are flaky in jsdom. @preserve */
               setAnnotationConfig({
                 ...annotationConfig,
                 score_threshold: val / 100,

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/__tests__/index.spec.tsx

@@ -1,20 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import ScoreSlider from '../index'
 
-vi.mock('@/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider', () => ({
-  default: ({ value, onChange, min, max }: { value: number, onChange: (v: number) => void, min: number, max: number }) => (
-    <input
-      type="range"
-      data-testid="slider"
-      value={value}
-      min={min}
-      max={max}
-      onChange={e => onChange(Number(e.target.value))}
-    />
-  ),
-}))
-
 describe('ScoreSlider', () => {
+  const getSliderInput = () => screen.getByLabelText('appDebug.feature.annotation.scoreThreshold.title')
+
   beforeEach(() => {
     vi.clearAllMocks()
   })
@@ -22,7 +11,7 @@ describe('ScoreSlider', () => {
   it('should render the slider', () => {
     render(<ScoreSlider value={90} onChange={vi.fn()} />)
 
-    expect(screen.getByTestId('slider')).toBeInTheDocument()
+    expect(getSliderInput()).toBeInTheDocument()
   })
 
   it('should display easy match and accurate match labels', () => {
@@ -37,14 +26,14 @@ describe('ScoreSlider', () => {
   it('should render with custom className', () => {
     const { container } = render(<ScoreSlider className="custom-class" value={90} onChange={vi.fn()} />)
 
-    // Verifying the component renders successfully with a custom className
-    expect(screen.getByTestId('slider')).toBeInTheDocument()
+    expect(getSliderInput()).toBeInTheDocument()
     expect(container.firstChild).toHaveClass('custom-class')
   })
 
   it('should pass value to the slider', () => {
     render(<ScoreSlider value={95} onChange={vi.fn()} />)
 
-    expect(screen.getByTestId('slider')).toHaveValue('95')
+    expect(getSliderInput()).toHaveValue('95')
+    expect(screen.getByText('0.95')).toBeInTheDocument()
   })
 })

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/__tests__/index.spec.tsx

@@ -1,50 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import Slider from '../index'
-
-describe('BaseSlider', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should render the slider component', () => {
-    render(<Slider value={50} onChange={vi.fn()} />)
-
-    expect(screen.getByRole('slider')).toBeInTheDocument()
-  })
-
-  it('should display the formatted value in the thumb', () => {
-    render(<Slider value={85} onChange={vi.fn()} />)
-
-    expect(screen.getByText('0.85')).toBeInTheDocument()
-  })
-
-  it('should use default min/max/step when not provided', () => {
-    render(<Slider value={50} onChange={vi.fn()} />)
-
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuemin', '0')
-    expect(slider).toHaveAttribute('aria-valuemax', '100')
-    expect(slider).toHaveAttribute('aria-valuenow', '50')
-  })
-
-  it('should use custom min/max/step when provided', () => {
-    render(<Slider value={90} min={80} max={100} step={5} onChange={vi.fn()} />)
-
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuemin', '80')
-    expect(slider).toHaveAttribute('aria-valuemax', '100')
-    expect(slider).toHaveAttribute('aria-valuenow', '90')
-  })
-
-  it('should handle NaN value as 0', () => {
-    render(<Slider value={Number.NaN} onChange={vi.fn()} />)
-
-    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0')
-  })
-
-  it('should pass disabled prop', () => {
-    render(<Slider value={50} disabled onChange={vi.fn()} />)
-
-    expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
-  })
-})

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx

@@ -1,40 +0,0 @@
-import ReactSlider from 'react-slider'
-import { cn } from '@/utils/classnames'
-import s from './style.module.css'
-
-type ISliderProps = {
-  className?: string
-  value: number
-  max?: number
-  min?: number
-  step?: number
-  disabled?: boolean
-  onChange: (value: number) => void
-}
-
-const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disabled, onChange }) => {
-  return (
-    <ReactSlider
-      disabled={disabled}
-      value={isNaN(value) ? 0 : value}
-      min={min || 0}
-      max={max || 100}
-      step={step || 1}
-      className={cn(className, s.slider)}
-      thumbClassName={cn(s['slider-thumb'], 'top-[-7px] h-[18px] w-2 cursor-pointer rounded-[36px] border !border-black/8 bg-white shadow-md')}
-      trackClassName={s['slider-track']}
-      onChange={onChange}
-      renderThumb={(props, state) => (
-        <div {...props}>
-          <div className="relative h-full w-full">
-            <div className="absolute left-[50%] top-[-16px] translate-x-[-50%] text-text-primary system-sm-semibold">
-              {(state.valueNow / 100).toFixed(2)}
-            </div>
-          </div>
-        </div>
-      )}
-    />
-  )
-}
-
-export default Slider

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/style.module.css

@@ -1,20 +0,0 @@
-.slider {
-    position: relative;
-}
-
-.slider.disabled {
-    opacity: 0.6;
-}
-
-.slider-thumb:focus {
-    outline: none;
-}
-
-.slider-track {
-    background-color: #528BFF;
-    height: 2px;
-}
-
-.slider-track-1 {
-    background-color: #E5E7EB;
-}

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Slider from '@/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider'
+import { Slider } from '@/app/components/base/ui/slider'
 
 type Props = {
   className?: string
@@ -10,23 +10,42 @@ type Props = {
   onChange: (value: number) => void
 }
 
+const clamp = (value: number, min: number, max: number) => {
+  if (!Number.isFinite(value))
+    return min
+
+  return Math.min(Math.max(value, min), max)
+}
+
 const ScoreSlider: FC<Props> = ({
   className,
   value,
   onChange,
 }) => {
   const { t } = useTranslation()
+  const safeValue = clamp(value, 80, 100)
 
   return (
     <div className={className}>
-      <div className="mt-[14px] h-px">
+      <div className="relative mt-[14px]">
         <Slider
-          max={100}
+          className="w-full"
+          value={safeValue}
           min={80}
+          max={100}
           step={1}
-          value={value}
-          onChange={onChange}
+          onValueChange={onChange}
+          aria-label={t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}
         />
+        <div
+          className="pointer-events-none absolute top-[-16px] text-text-primary system-sm-semibold"
+          style={{
+            left: `calc(4px + ${(safeValue - 80) / 20} * (100% - 8px))`,
+            transform: 'translateX(-50%)',
+          }}
+        >
+          {(safeValue / 100).toFixed(2)}
+        </div>
       </div>
       <div className="mt-[10px] flex items-center justify-between system-xs-semibold-uppercase">
         <div className="flex space-x-1 text-util-colors-cyan-cyan-500">

web/app/components/base/param-item/__tests__/index-slider.spec.tsx

@@ -14,12 +14,14 @@ describe('ParamItem Slider onChange', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('Test Param')
+
   it('should divide slider value by 100 when max < 5', async () => {
     const user = userEvent.setup()
     render(<ParamItem {...defaultProps} value={0.5} min={0} max={1} />)
-    const slider = screen.getByRole('slider')
+    const slider = getSlider()
 
-    await user.click(slider)
+    slider.focus()
     await user.keyboard('{ArrowRight}')
 
     // max=1 < 5, so slider value change (50->51) becomes 0.51
@@ -29,9 +31,9 @@ describe('ParamItem Slider onChange', () => {
   it('should not divide slider value when max >= 5', async () => {
     const user = userEvent.setup()
     render(<ParamItem {...defaultProps} value={5} min={1} max={10} />)
-    const slider = screen.getByRole('slider')
+    const slider = getSlider()
 
-    await user.click(slider)
+    slider.focus()
     await user.keyboard('{ArrowRight}')
 
     // max=10 >= 5, so value remains raw (5->6)

web/app/components/base/param-item/__tests__/index.spec.tsx

@@ -17,6 +17,8 @@ describe('ParamItem', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('Test Param')
+
   describe('Rendering', () => {
     it('should render the parameter name', () => {
       render(<ParamItem {...defaultProps} />)
@@ -54,7 +56,7 @@ describe('ParamItem', () => {
       render(<ParamItem {...defaultProps} />)
 
       expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getSlider()).toBeInTheDocument()
     })
   })
 
@@ -74,7 +76,7 @@ describe('ParamItem', () => {
     it('should disable Slider when enable is false', () => {
       render(<ParamItem {...defaultProps} enable={false} />)
 
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+      expect(getSlider()).toBeDisabled()
     })
 
     it('should set switch value based on enable prop', () => {
@@ -135,7 +137,7 @@ describe('ParamItem', () => {
       await user.clear(input)
 
       expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 0)
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0')
+      expect(getSlider()).toHaveAttribute('aria-valuenow', '0')
 
       await user.tab()
 
@@ -166,12 +168,12 @@ describe('ParamItem', () => {
       await user.type(input, '1.5')
 
       expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 1)
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '100')
+      expect(getSlider()).toHaveAttribute('aria-valuenow', '100')
     })
 
     it('should pass scaled value to slider when max < 5', () => {
       render(<ParamItem {...defaultProps} value={0.5} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
       // When max < 5, slider value = value * 100 = 50
       expect(slider).toHaveAttribute('aria-valuenow', '50')
@@ -179,7 +181,7 @@ describe('ParamItem', () => {
 
     it('should pass raw value to slider when max >= 5', () => {
       render(<ParamItem {...defaultProps} value={5} max={10} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
       // When max >= 5, slider value = value = 5
       expect(slider).toHaveAttribute('aria-valuenow', '5')
@@ -212,15 +214,15 @@ describe('ParamItem', () => {
       render(<ParamItem {...defaultProps} value={0.5} min={0} />)
 
       // Slider should get value * 100 = 50, min * 100 = 0, max * 100 = 100
-      const slider = screen.getByRole('slider')
-      expect(slider).toHaveAttribute('aria-valuemax', '100')
+      const slider = getSlider()
+      expect(slider).toHaveAttribute('max', '100')
     })
 
     it('should not scale slider value when max >= 5', () => {
       render(<ParamItem {...defaultProps} value={5} min={1} max={10} />)
 
-      const slider = screen.getByRole('slider')
-      expect(slider).toHaveAttribute('aria-valuemax', '10')
+      const slider = getSlider()
+      expect(slider).toHaveAttribute('max', '10')
     })
 
     it('should expose default minimum of 0 when min is not provided', () => {

web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx

@@ -14,6 +14,8 @@ describe('ScoreThresholdItem', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('appDebug.datasetConfig.score_threshold')
+
   describe('Rendering', () => {
     it('should render the translated parameter name', () => {
       render(<ScoreThresholdItem {...defaultProps} />)
@@ -32,7 +34,7 @@ describe('ScoreThresholdItem', () => {
       render(<ScoreThresholdItem {...defaultProps} />)
 
       expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getSlider()).toBeInTheDocument()
     })
   })
 
@@ -63,7 +65,7 @@ describe('ScoreThresholdItem', () => {
       render(<ScoreThresholdItem {...defaultProps} enable={false} />)
 
       expect(screen.getByRole('textbox')).toBeDisabled()
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+      expect(getSlider()).toBeDisabled()
     })
   })
 

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

@@ -19,6 +19,8 @@ describe('TopKItem', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('appDebug.datasetConfig.top_k')
+
   describe('Rendering', () => {
     it('should render the translated parameter name', () => {
       render(<TopKItem {...defaultProps} />)
@@ -37,7 +39,7 @@ describe('TopKItem', () => {
       render(<TopKItem {...defaultProps} />)
 
       expect(screen.getByRole('textbox')).toBeInTheDocument()
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getSlider()).toBeInTheDocument()
     })
   })
 
@@ -52,7 +54,7 @@ describe('TopKItem', () => {
       render(<TopKItem {...defaultProps} enable={false} />)
 
       expect(screen.getByRole('textbox')).toBeDisabled()
-      expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+      expect(getSlider()).toBeDisabled()
     })
   })
 
@@ -77,10 +79,10 @@ describe('TopKItem', () => {
 
     it('should render slider with max >= 5 so no scaling is applied', () => {
       render(<TopKItem {...defaultProps} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
       // max=10 >= 5 so slider shows raw values
-      expect(slider).toHaveAttribute('aria-valuemax', '10')
+      expect(slider).toHaveAttribute('max', '10')
     })
 
     it('should not render a switch (no hasSwitch prop)', () => {
@@ -116,9 +118,9 @@ describe('TopKItem', () => {
     it('should call onChange with integer value when slider changes', async () => {
       const user = userEvent.setup()
       render(<TopKItem {...defaultProps} value={2} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
 
-      await user.click(slider)
+      slider.focus()
       await user.keyboard('{ArrowRight}')
 
       expect(defaultProps.onChange).toHaveBeenLastCalledWith('top_k', 3)

web/app/components/base/param-item/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
-import Slider from '@/app/components/base/slider'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Slider } from '@/app/components/base/ui/slider'
 import {
   NumberField,
   NumberFieldControls,
@@ -78,7 +78,8 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             value={max < 5 ? value * 100 : value}
             min={min < 1 ? min * 100 : min}
             max={max < 5 ? max * 100 : max}
-            onChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+            onValueChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+            aria-label={name}
           />
         </div>
       </div>

web/app/components/base/prompt-editor/plugins/__tests__/on-blur-or-focus-block.spec.tsx

@@ -3,10 +3,13 @@ import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { act, render, waitFor } from '@testing-library/react'
 import {
   BLUR_COMMAND,
+  COMMAND_PRIORITY_EDITOR,
   FOCUS_COMMAND,
+  KEY_ESCAPE_COMMAND,
 } from 'lexical'
 import OnBlurBlock from '../on-blur-or-focus-block'
 import { CaptureEditorPlugin } from '../test-utils'
+import { CLEAR_HIDE_MENU_TIMEOUT } from '../workflow-variable-block'
 
 const renderOnBlurBlock = (props?: {
   onBlur?: () => void
@@ -72,7 +75,7 @@ describe('OnBlurBlock', () => {
       expect(onFocus).toHaveBeenCalledTimes(1)
     })
 
-    it('should call onBlur when blur target is not var-search-input', async () => {
+    it('should call onBlur and dispatch escape after delay when blur target is not var-search-input', async () => {
       const onBlur = vi.fn()
       const { getEditor } = renderOnBlurBlock({ onBlur })
 
@@ -82,6 +85,14 @@ describe('OnBlurBlock', () => {
 
       const editor = getEditor()
       expect(editor).not.toBeNull()
+      vi.useFakeTimers()
+
+      const onEscape = vi.fn(() => true)
+      const unregister = editor!.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        onEscape,
+        COMMAND_PRIORITY_EDITOR,
+      )
 
       let handled = false
       act(() => {
@@ -90,9 +101,18 @@ describe('OnBlurBlock', () => {
 
       expect(handled).toBe(true)
       expect(onBlur).toHaveBeenCalledTimes(1)
+      expect(onEscape).not.toHaveBeenCalled()
+
+      act(() => {
+        vi.advanceTimersByTime(200)
+      })
+
+      expect(onEscape).toHaveBeenCalledTimes(1)
+      unregister()
+      vi.useRealTimers()
     })
 
-    it('should handle blur when onBlur callback is not provided', async () => {
+    it('should dispatch delayed escape when onBlur callback is not provided', async () => {
       const { getEditor } = renderOnBlurBlock()
 
       await waitFor(() => {
@@ -101,16 +121,28 @@ describe('OnBlurBlock', () => {
 
       const editor = getEditor()
       expect(editor).not.toBeNull()
+      vi.useFakeTimers()
+
+      const onEscape = vi.fn(() => true)
+      const unregister = editor!.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        onEscape,
+        COMMAND_PRIORITY_EDITOR,
+      )
 
-      let handled = false
       act(() => {
-        handled = editor!.dispatchCommand(BLUR_COMMAND, createBlurEvent(document.createElement('div')))
+        editor!.dispatchCommand(BLUR_COMMAND, createBlurEvent(document.createElement('div')))
+      })
+      act(() => {
+        vi.advanceTimersByTime(200)
       })
 
-      expect(handled).toBe(true)
+      expect(onEscape).toHaveBeenCalledTimes(1)
+      unregister()
+      vi.useRealTimers()
     })
 
-    it('should skip onBlur when blur target is var-search-input', async () => {
+    it('should skip onBlur and delayed escape when blur target is var-search-input', async () => {
       const onBlur = vi.fn()
       const { getEditor } = renderOnBlurBlock({ onBlur })
 
@@ -120,17 +152,31 @@ describe('OnBlurBlock', () => {
 
       const editor = getEditor()
       expect(editor).not.toBeNull()
+      vi.useFakeTimers()
 
       const target = document.createElement('input')
       target.classList.add('var-search-input')
 
+      const onEscape = vi.fn(() => true)
+      const unregister = editor!.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        onEscape,
+        COMMAND_PRIORITY_EDITOR,
+      )
+
       let handled = false
       act(() => {
         handled = editor!.dispatchCommand(BLUR_COMMAND, createBlurEvent(target))
       })
+      act(() => {
+        vi.advanceTimersByTime(200)
+      })
 
       expect(handled).toBe(true)
       expect(onBlur).not.toHaveBeenCalled()
+      expect(onEscape).not.toHaveBeenCalled()
+      unregister()
+      vi.useRealTimers()
     })
 
     it('should handle focus command when onFocus callback is not provided', async () => {
@@ -152,6 +198,59 @@ describe('OnBlurBlock', () => {
     })
   })
 
+  describe('Clear timeout command', () => {
+    it('should clear scheduled escape timeout when clear command is dispatched', async () => {
+      const { getEditor } = renderOnBlurBlock({ onBlur: vi.fn() })
+
+      await waitFor(() => {
+        expect(getEditor()).not.toBeNull()
+      })
+
+      const editor = getEditor()
+      expect(editor).not.toBeNull()
+      vi.useFakeTimers()
+
+      const onEscape = vi.fn(() => true)
+      const unregister = editor!.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        onEscape,
+        COMMAND_PRIORITY_EDITOR,
+      )
+
+      act(() => {
+        editor!.dispatchCommand(BLUR_COMMAND, createBlurEvent(document.createElement('div')))
+      })
+      act(() => {
+        editor!.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
+      })
+      act(() => {
+        vi.advanceTimersByTime(200)
+      })
+
+      expect(onEscape).not.toHaveBeenCalled()
+      unregister()
+      vi.useRealTimers()
+    })
+
+    it('should handle clear command when no timeout is scheduled', async () => {
+      const { getEditor } = renderOnBlurBlock()
+
+      await waitFor(() => {
+        expect(getEditor()).not.toBeNull()
+      })
+
+      const editor = getEditor()
+      expect(editor).not.toBeNull()
+
+      let handled = false
+      act(() => {
+        handled = editor!.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
+      })
+
+      expect(handled).toBe(true)
+    })
+  })
+
   describe('Lifecycle cleanup', () => {
     it('should unregister commands when component unmounts', async () => {
       const { getEditor, unmount } = renderOnBlurBlock()
@@ -167,13 +266,16 @@ describe('OnBlurBlock', () => {
 
       let blurHandled = true
       let focusHandled = true
+      let clearHandled = true
       act(() => {
         blurHandled = editor!.dispatchCommand(BLUR_COMMAND, createBlurEvent(document.createElement('div')))
         focusHandled = editor!.dispatchCommand(FOCUS_COMMAND, createFocusEvent())
+        clearHandled = editor!.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
       })
 
       expect(blurHandled).toBe(false)
       expect(focusHandled).toBe(false)
+      expect(clearHandled).toBe(false)
     })
   })
 })

web/app/components/base/prompt-editor/plugins/__tests__/update-block.spec.tsx

@@ -1,13 +1,14 @@
 import type { LexicalEditor } from 'lexical'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { act, render, waitFor } from '@testing-library/react'
-import { $getRoot } from 'lexical'
+import { $getRoot, COMMAND_PRIORITY_EDITOR } from 'lexical'
 import { CustomTextNode } from '../custom-text/node'
 import { CaptureEditorPlugin } from '../test-utils'
 import UpdateBlock, {
   PROMPT_EDITOR_INSERT_QUICKLY,
   PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER,
 } from '../update-block'
+import { CLEAR_HIDE_MENU_TIMEOUT } from '../workflow-variable-block'
 
 const { mockUseEventEmitterContextContext } = vi.hoisted(() => ({
   mockUseEventEmitterContextContext: vi.fn(),
@@ -156,7 +157,7 @@ describe('UpdateBlock', () => {
   })
 
   describe('Quick insert event', () => {
-    it('should insert slash when quick insert event matches instance id', async () => {
+    it('should insert slash and dispatch clear command when quick insert event matches instance id', async () => {
       const { emit, getEditor } = setup({ instanceId: 'instance-1' })
 
       await waitFor(() => {
@@ -167,6 +168,13 @@ describe('UpdateBlock', () => {
 
       selectRootEnd(editor!)
 
+      const clearCommandHandler = vi.fn(() => true)
+      const unregister = editor!.registerCommand(
+        CLEAR_HIDE_MENU_TIMEOUT,
+        clearCommandHandler,
+        COMMAND_PRIORITY_EDITOR,
+      )
+
       emit({
         type: PROMPT_EDITOR_INSERT_QUICKLY,
         instanceId: 'instance-1',
@@ -175,6 +183,9 @@ describe('UpdateBlock', () => {
       await waitFor(() => {
         expect(readEditorText(editor!)).toBe('/')
       })
+      expect(clearCommandHandler).toHaveBeenCalledTimes(1)
+
+      unregister()
     })
 
     it('should ignore quick insert event when instance id does not match', async () => {

web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx

@@ -23,8 +23,6 @@ import {
   $createTextNode,
   $getRoot,
   $setSelection,
-  BLUR_COMMAND,
-  FOCUS_COMMAND,
   KEY_ESCAPE_COMMAND,
 } from 'lexical'
 import * as React from 'react'
@@ -633,180 +631,4 @@ describe('ComponentPicker (component-picker-block/index.tsx)', () => {
     // With a single option group, the only divider should be the workflow-var/options separator.
     expect(document.querySelectorAll('.bg-divider-subtle')).toHaveLength(1)
   })
-
-  describe('blur/focus menu visibility', () => {
-    it('hides the menu after a 200ms delay when blur command is dispatched', async () => {
-      const captures: Captures = { editor: null, eventEmitter: null }
-
-      render((
-        <MinimalEditor
-          triggerString="{"
-          contextBlock={makeContextBlock()}
-          captures={captures}
-        />
-      ))
-
-      const editor = await waitForEditor(captures)
-      await setEditorText(editor, '{', true)
-      expect(await screen.findByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useFakeTimers()
-
-      act(() => {
-        editor.dispatchCommand(BLUR_COMMAND, new FocusEvent('blur', { relatedTarget: document.createElement('button') }))
-      })
-
-      expect(screen.queryByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      act(() => {
-        vi.advanceTimersByTime(200)
-      })
-
-      expect(screen.queryByText('common.promptEditor.context.item.title')).not.toBeInTheDocument()
-
-      vi.useRealTimers()
-    })
-
-    it('restores menu visibility when focus command is dispatched after blur hides it', async () => {
-      const captures: Captures = { editor: null, eventEmitter: null }
-
-      render((
-        <MinimalEditor
-          triggerString="{"
-          contextBlock={makeContextBlock()}
-          captures={captures}
-        />
-      ))
-
-      const editor = await waitForEditor(captures)
-      await setEditorText(editor, '{', true)
-      expect(await screen.findByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useFakeTimers()
-
-      act(() => {
-        editor.dispatchCommand(BLUR_COMMAND, new FocusEvent('blur', { relatedTarget: document.createElement('button') }))
-      })
-      act(() => {
-        vi.advanceTimersByTime(200)
-      })
-
-      expect(screen.queryByText('common.promptEditor.context.item.title')).not.toBeInTheDocument()
-
-      act(() => {
-        editor.dispatchCommand(FOCUS_COMMAND, new FocusEvent('focus'))
-      })
-
-      vi.useRealTimers()
-
-      await setEditorText(editor, '{', true)
-      await waitFor(() => {
-        expect(screen.queryByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-      })
-    })
-
-    it('cancels the blur timer when focus arrives before the 200ms timeout', async () => {
-      const captures: Captures = { editor: null, eventEmitter: null }
-
-      render((
-        <MinimalEditor
-          triggerString="{"
-          contextBlock={makeContextBlock()}
-          captures={captures}
-        />
-      ))
-
-      const editor = await waitForEditor(captures)
-      await setEditorText(editor, '{', true)
-      expect(await screen.findByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useFakeTimers()
-
-      act(() => {
-        editor.dispatchCommand(BLUR_COMMAND, new FocusEvent('blur', { relatedTarget: document.createElement('button') }))
-      })
-
-      act(() => {
-        editor.dispatchCommand(FOCUS_COMMAND, new FocusEvent('focus'))
-      })
-
-      act(() => {
-        vi.advanceTimersByTime(200)
-      })
-
-      expect(screen.queryByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useRealTimers()
-    })
-
-    it('cancels a pending blur timer when a subsequent blur targets var-search-input', async () => {
-      const captures: Captures = { editor: null, eventEmitter: null }
-
-      render((
-        <MinimalEditor
-          triggerString="{"
-          contextBlock={makeContextBlock()}
-          captures={captures}
-        />
-      ))
-
-      const editor = await waitForEditor(captures)
-      await setEditorText(editor, '{', true)
-      expect(await screen.findByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useFakeTimers()
-
-      act(() => {
-        editor.dispatchCommand(BLUR_COMMAND, new FocusEvent('blur', { relatedTarget: document.createElement('button') }))
-      })
-
-      const varInput = document.createElement('input')
-      varInput.classList.add('var-search-input')
-
-      act(() => {
-        editor.dispatchCommand(BLUR_COMMAND, new FocusEvent('blur', { relatedTarget: varInput }))
-      })
-
-      act(() => {
-        vi.advanceTimersByTime(200)
-      })
-
-      expect(screen.queryByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useRealTimers()
-    })
-
-    it('does not hide the menu when blur target is var-search-input', async () => {
-      const captures: Captures = { editor: null, eventEmitter: null }
-
-      render((
-        <MinimalEditor
-          triggerString="{"
-          contextBlock={makeContextBlock()}
-          captures={captures}
-        />
-      ))
-
-      const editor = await waitForEditor(captures)
-      await setEditorText(editor, '{', true)
-      expect(await screen.findByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useFakeTimers()
-
-      const target = document.createElement('input')
-      target.classList.add('var-search-input')
-
-      act(() => {
-        editor.dispatchCommand(BLUR_COMMAND, new FocusEvent('blur', { relatedTarget: target }))
-      })
-
-      act(() => {
-        vi.advanceTimersByTime(200)
-      })
-
-      expect(screen.queryByText('common.promptEditor.context.item.title')).toBeInTheDocument()
-
-      vi.useRealTimers()
-    })
-  })
 })

web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx

@@ -21,19 +21,11 @@ import {
 } from '@floating-ui/react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
-import { mergeRegister } from '@lexical/utils'
-import {
-  BLUR_COMMAND,
-  COMMAND_PRIORITY_EDITOR,
-  FOCUS_COMMAND,
-  KEY_ESCAPE_COMMAND,
-} from 'lexical'
+import { KEY_ESCAPE_COMMAND } from 'lexical'
 import {
   Fragment,
   memo,
   useCallback,
-  useEffect,
-  useRef,
   useState,
 } from 'react'
 import ReactDOM from 'react-dom'
@@ -95,46 +87,6 @@ const ComponentPicker = ({
   })
 
   const [queryString, setQueryString] = useState<string | null>(null)
-  const [blurHidden, setBlurHidden] = useState(false)
-  const blurTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const clearBlurTimer = useCallback(() => {
-    if (blurTimerRef.current) {
-      clearTimeout(blurTimerRef.current)
-      blurTimerRef.current = null
-    }
-  }, [])
-
-  useEffect(() => {
-    const unregister = mergeRegister(
-      editor.registerCommand(
-        BLUR_COMMAND,
-        (event) => {
-          clearBlurTimer()
-          const target = event?.relatedTarget as HTMLElement
-          if (!target?.classList?.contains('var-search-input'))
-            blurTimerRef.current = setTimeout(() => setBlurHidden(true), 200)
-          return false
-        },
-        COMMAND_PRIORITY_EDITOR,
-      ),
-      editor.registerCommand(
-        FOCUS_COMMAND,
-        () => {
-          clearBlurTimer()
-          setBlurHidden(false)
-          return false
-        },
-        COMMAND_PRIORITY_EDITOR,
-      ),
-    )
-
-    return () => {
-      if (blurTimerRef.current)
-        clearTimeout(blurTimerRef.current)
-      unregister()
-    }
-  }, [editor, clearBlurTimer])
 
   eventEmitter?.useSubscription((v: any) => {
     if (v.type === INSERT_VARIABLE_VALUE_BLOCK_COMMAND)
@@ -207,8 +159,6 @@ const ComponentPicker = ({
     anchorElementRef,
     { options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
   ) => {
-    if (blurHidden)
-      return null
     if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
       return null
 
@@ -290,7 +240,7 @@ const ComponentPicker = ({
         }
       </>
     )
-  }, [blurHidden, allFlattenOptions.length, workflowVariableBlock?.show, floatingStyles, isPositioned, refs, workflowVariableOptions, isSupportFileVar, handleClose, currentBlock?.generatorType, handleSelectWorkflowVariable, queryString, workflowVariableBlock?.showManageInputField, workflowVariableBlock?.onManageInputField])
+  }, [allFlattenOptions.length, workflowVariableBlock?.show, floatingStyles, isPositioned, refs, workflowVariableOptions, isSupportFileVar, handleClose, currentBlock?.generatorType, handleSelectWorkflowVariable, queryString, workflowVariableBlock?.showManageInputField, workflowVariableBlock?.onManageInputField])
 
   return (
     <LexicalTypeaheadMenuPlugin

web/app/components/base/prompt-editor/plugins/on-blur-or-focus-block.tsx

@@ -5,8 +5,10 @@ import {
   BLUR_COMMAND,
   COMMAND_PRIORITY_EDITOR,
   FOCUS_COMMAND,
+  KEY_ESCAPE_COMMAND,
 } from 'lexical'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
+import { CLEAR_HIDE_MENU_TIMEOUT } from './workflow-variable-block'
 
 type OnBlurBlockProps = {
   onBlur?: () => void
@@ -18,13 +20,35 @@ const OnBlurBlock: FC<OnBlurBlockProps> = ({
 }) => {
   const [editor] = useLexicalComposerContext()
 
+  const ref = useRef<ReturnType<typeof setTimeout> | null>(null)
+
   useEffect(() => {
-    return mergeRegister(
+    const clearHideMenuTimeout = () => {
+      if (ref.current) {
+        clearTimeout(ref.current)
+        ref.current = null
+      }
+    }
+
+    const unregister = mergeRegister(
+      editor.registerCommand(
+        CLEAR_HIDE_MENU_TIMEOUT,
+        () => {
+          clearHideMenuTimeout()
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
       editor.registerCommand(
         BLUR_COMMAND,
         (event) => {
+          // Check if the clicked target element is var-search-input
           const target = event?.relatedTarget as HTMLElement
           if (!target?.classList?.contains('var-search-input')) {
+            clearHideMenuTimeout()
+            ref.current = setTimeout(() => {
+              editor.dispatchCommand(KEY_ESCAPE_COMMAND, new KeyboardEvent('keydown', { key: 'Escape' }))
+            }, 200)
             if (onBlur)
               onBlur()
           }
@@ -42,6 +66,11 @@ const OnBlurBlock: FC<OnBlurBlockProps> = ({
         COMMAND_PRIORITY_EDITOR,
       ),
     )
+
+    return () => {
+      clearHideMenuTimeout()
+      unregister()
+    }
   }, [editor, onBlur, onFocus])
 
   return null

web/app/components/base/prompt-editor/plugins/update-block.tsx

@@ -3,6 +3,7 @@ import { $insertNodes } from 'lexical'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { textToEditorState } from '../utils'
 import { CustomTextNode } from './custom-text/node'
+import { CLEAR_HIDE_MENU_TIMEOUT } from './workflow-variable-block'
 
 export const PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER = 'PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER'
 export const PROMPT_EDITOR_INSERT_QUICKLY = 'PROMPT_EDITOR_INSERT_QUICKLY'
@@ -29,6 +30,8 @@ const UpdateBlock = ({
       editor.update(() => {
         const textNode = new CustomTextNode('/')
         $insertNodes([textNode])
+
+        editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
       })
     }
   })

web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/index.spec.tsx

@@ -9,6 +9,7 @@ import { $insertNodes, COMMAND_PRIORITY_EDITOR } from 'lexical'
 import { Type } from '@/app/components/workflow/nodes/llm/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import {
+  CLEAR_HIDE_MENU_TIMEOUT,
   DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND,
   INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND,
   UPDATE_WORKFLOW_NODES_MAP,
@@ -133,6 +134,7 @@ describe('WorkflowVariableBlock', () => {
     const insertHandler = mockRegisterCommand.mock.calls[0][1] as (variables: string[]) => boolean
     const result = insertHandler(['node-1', 'answer'])
 
+    expect(mockDispatchCommand).toHaveBeenCalledWith(CLEAR_HIDE_MENU_TIMEOUT, undefined)
     expect($createWorkflowVariableBlockNode).toHaveBeenCalledWith(
       ['node-1', 'answer'],
       workflowNodesMap,

web/app/components/base/prompt-editor/plugins/workflow-variable-block/index.tsx

@@ -18,6 +18,7 @@ import {
 
 export const INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND = createCommand('INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND')
 export const DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND = createCommand('DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND')
+export const CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT')
 export const UPDATE_WORKFLOW_NODES_MAP = createCommand('UPDATE_WORKFLOW_NODES_MAP')
 
 export type WorkflowVariableBlockProps = {
@@ -48,6 +49,7 @@ const WorkflowVariableBlock = memo(({
       editor.registerCommand(
         INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND,
         (variables: string[]) => {
+          editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined)
           const workflowVariableBlockNode = $createWorkflowVariableBlockNode(variables, workflowNodesMap, getVarType)
 
           $insertNodes([workflowVariableBlockNode])

web/app/components/base/slider/__tests__/index.spec.tsx

@@ -1,77 +0,0 @@
-import { act, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import Slider from '../index'
-
-describe('Slider Component', () => {
-  it('should render with correct default ARIA limits and current value', () => {
-    render(<Slider value={50} onChange={vi.fn()} />)
-
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuemin', '0')
-    expect(slider).toHaveAttribute('aria-valuemax', '100')
-    expect(slider).toHaveAttribute('aria-valuenow', '50')
-  })
-
-  it('should apply custom min, max, and step values', () => {
-    render(<Slider value={10} min={5} max={20} step={5} onChange={vi.fn()} />)
-
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuemin', '5')
-    expect(slider).toHaveAttribute('aria-valuemax', '20')
-    expect(slider).toHaveAttribute('aria-valuenow', '10')
-  })
-
-  it('should default to 0 if the value prop is NaN', () => {
-    render(<Slider value={Number.NaN} onChange={vi.fn()} />)
-
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuenow', '0')
-  })
-
-  it('should call onChange when arrow keys are pressed', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-
-    render(<Slider value={20} onChange={onChange} />)
-
-    const slider = screen.getByRole('slider')
-
-    await act(async () => {
-      slider.focus()
-      await user.keyboard('{ArrowRight}')
-    })
-
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenCalledWith(21, 0)
-  })
-
-  it('should not trigger onChange when disabled', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(<Slider value={20} onChange={onChange} disabled />)
-
-    const slider = screen.getByRole('slider')
-
-    expect(slider).toHaveAttribute('aria-disabled', 'true')
-
-    await act(async () => {
-      slider.focus()
-      await user.keyboard('{ArrowRight}')
-    })
-
-    expect(onChange).not.toHaveBeenCalled()
-  })
-
-  it('should apply custom class names', () => {
-    render(
-      <Slider value={10} onChange={vi.fn()} className="outer-test" thumbClassName="thumb-test" />,
-    )
-
-    const sliderWrapper = screen.getByRole('slider').closest('.outer-test')
-    expect(sliderWrapper).toBeInTheDocument()
-
-    const thumb = screen.getByRole('slider')
-    expect(thumb).toHaveClass('thumb-test')
-  })
-})

web/app/components/base/slider/index.stories.tsx

@@ -1,635 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
-import Slider from '.'
-
-const meta = {
-  title: 'Base/Data Entry/Slider',
-  component: Slider,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Slider component for selecting a numeric value within a range. Built on react-slider with customizable min/max/step values.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    value: {
-      control: 'number',
-      description: 'Current slider value',
-    },
-    min: {
-      control: 'number',
-      description: 'Minimum value (default: 0)',
-    },
-    max: {
-      control: 'number',
-      description: 'Maximum value (default: 100)',
-    },
-    step: {
-      control: 'number',
-      description: 'Step increment (default: 1)',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state',
-    },
-  },
-  args: {
-    onChange: (value) => {
-      console.log('Slider value:', value)
-    },
-  },
-} satisfies Meta<typeof Slider>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// Interactive demo wrapper
-const SliderDemo = (args: any) => {
-  const [value, setValue] = useState(args.value || 50)
-
-  return (
-    <div style={{ width: '400px' }}>
-      <Slider
-        {...args}
-        value={value}
-        onChange={(v) => {
-          setValue(v)
-          console.log('Slider value:', v)
-        }}
-      />
-      <div className="mt-4 text-center text-sm text-gray-600">
-        Value:
-        {' '}
-        <span className="text-lg font-semibold">{value}</span>
-      </div>
-    </div>
-  )
-}
-
-// Default state
-export const Default: Story = {
-  render: args => <SliderDemo {...args} />,
-  args: {
-    value: 50,
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false,
-  },
-}
-
-// With custom range
-export const CustomRange: Story = {
-  render: args => <SliderDemo {...args} />,
-  args: {
-    value: 25,
-    min: 0,
-    max: 50,
-    step: 1,
-    disabled: false,
-  },
-}
-
-// With step increment
-export const WithStepIncrement: Story = {
-  render: args => <SliderDemo {...args} />,
-  args: {
-    value: 50,
-    min: 0,
-    max: 100,
-    step: 10,
-    disabled: false,
-  },
-}
-
-// Decimal values
-export const DecimalValues: Story = {
-  render: args => <SliderDemo {...args} />,
-  args: {
-    value: 2.5,
-    min: 0,
-    max: 5,
-    step: 0.5,
-    disabled: false,
-  },
-}
-
-// Disabled state
-export const Disabled: Story = {
-  render: args => <SliderDemo {...args} />,
-  args: {
-    value: 75,
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: true,
-  },
-}
-
-// Real-world example - Volume control
-const VolumeControlDemo = () => {
-  const [volume, setVolume] = useState(70)
-
-  const getVolumeIcon = (vol: number) => {
-    if (vol === 0)
-      return '🔇'
-    if (vol < 33)
-      return '🔈'
-    if (vol < 66)
-      return '🔉'
-    return '🔊'
-  }
-
-  return (
-    <div style={{ width: '400px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Volume Control</h3>
-        <span className="text-2xl">{getVolumeIcon(volume)}</span>
-      </div>
-      <Slider
-        value={volume}
-        min={0}
-        max={100}
-        step={1}
-        onChange={setVolume}
-      />
-      <div className="mt-4 flex items-center justify-between text-sm text-gray-600">
-        <span>Mute</span>
-        <span className="text-lg font-semibold">
-          {volume}
-          %
-        </span>
-        <span>Max</span>
-      </div>
-    </div>
-  )
-}
-
-export const VolumeControl: Story = {
-  render: () => <VolumeControlDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Brightness control
-const BrightnessControlDemo = () => {
-  const [brightness, setBrightness] = useState(80)
-
-  return (
-    <div style={{ width: '400px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Screen Brightness</h3>
-        <span className="text-2xl">☀️</span>
-      </div>
-      <Slider
-        value={brightness}
-        min={0}
-        max={100}
-        step={5}
-        onChange={setBrightness}
-      />
-      <div className="mt-4 rounded-lg bg-gray-50 p-4" style={{ opacity: brightness / 100 }}>
-        <div className="text-sm text-gray-700">
-          Preview at
-          {' '}
-          {brightness}
-          % brightness
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const BrightnessControl: Story = {
-  render: () => <BrightnessControlDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Price range filter
-const PriceRangeFilterDemo = () => {
-  const [maxPrice, setMaxPrice] = useState(500)
-  const minPrice = 0
-
-  const products = [
-    { name: 'Product A', price: 150 },
-    { name: 'Product B', price: 350 },
-    { name: 'Product C', price: 600 },
-    { name: 'Product D', price: 250 },
-    { name: 'Product E', price: 450 },
-  ]
-
-  const filteredProducts = products.filter(p => p.price >= minPrice && p.price <= maxPrice)
-
-  return (
-    <div style={{ width: '500px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Filter by Price</h3>
-      <div className="mb-2">
-        <div className="mb-2 flex items-center justify-between text-sm text-gray-600">
-          <span>Maximum Price</span>
-          <span className="font-semibold text-gray-900">
-            $
-            {maxPrice}
-          </span>
-        </div>
-        <Slider
-          value={maxPrice}
-          min={0}
-          max={1000}
-          step={50}
-          onChange={setMaxPrice}
-        />
-      </div>
-      <div className="mt-6">
-        <div className="mb-3 text-sm font-medium text-gray-700">
-          Showing
-          {' '}
-          {filteredProducts.length}
-          {' '}
-          of
-          {' '}
-          {products.length}
-          {' '}
-          products
-        </div>
-        <div className="space-y-2">
-          {filteredProducts.map(product => (
-            <div key={product.name} className="flex items-center justify-between rounded-lg bg-gray-50 p-3">
-              <span className="text-sm">{product.name}</span>
-              <span className="font-semibold text-gray-900">
-                $
-                {product.price}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const PriceRangeFilter: Story = {
-  render: () => <PriceRangeFilterDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Temperature selector
-const TemperatureSelectorDemo = () => {
-  const [temperature, setTemperature] = useState(22)
-  const fahrenheit = ((temperature * 9) / 5 + 32).toFixed(1)
-
-  return (
-    <div style={{ width: '400px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Thermostat Control</h3>
-      <div className="mb-6">
-        <Slider
-          value={temperature}
-          min={16}
-          max={30}
-          step={0.5}
-          onChange={setTemperature}
-        />
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="rounded-lg bg-blue-50 p-4 text-center">
-          <div className="mb-1 text-xs text-gray-600">Celsius</div>
-          <div className="text-3xl font-bold text-blue-600">
-            {temperature}
-            °C
-          </div>
-        </div>
-        <div className="rounded-lg bg-orange-50 p-4 text-center">
-          <div className="mb-1 text-xs text-gray-600">Fahrenheit</div>
-          <div className="text-3xl font-bold text-orange-600">
-            {fahrenheit}
-            °F
-          </div>
-        </div>
-      </div>
-      <div className="mt-4 text-center text-xs text-gray-500">
-        {temperature < 18 && '🥶 Too cold'}
-        {temperature >= 18 && temperature <= 24 && '😊 Comfortable'}
-        {temperature > 24 && '🥵 Too warm'}
-      </div>
-    </div>
-  )
-}
-
-export const TemperatureSelector: Story = {
-  render: () => <TemperatureSelectorDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Progress/completion slider
-const ProgressSliderDemo = () => {
-  const [progress, setProgress] = useState(65)
-
-  return (
-    <div style={{ width: '450px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Project Completion</h3>
-      <Slider
-        value={progress}
-        min={0}
-        max={100}
-        step={5}
-        onChange={setProgress}
-      />
-      <div className="mt-4">
-        <div className="mb-2 flex items-center justify-between">
-          <span className="text-sm text-gray-600">Progress</span>
-          <span className="text-lg font-bold text-blue-600">
-            {progress}
-            %
-          </span>
-        </div>
-        <div className="space-y-2 text-sm">
-          <div className="flex items-center gap-2">
-            <span className={progress >= 25 ? '✅' : '⏳'}>Planning</span>
-            <span className="text-xs text-gray-500">25%</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className={progress >= 50 ? '✅' : '⏳'}>Development</span>
-            <span className="text-xs text-gray-500">50%</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className={progress >= 75 ? '✅' : '⏳'}>Testing</span>
-            <span className="text-xs text-gray-500">75%</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className={progress >= 100 ? '✅' : '⏳'}>Deployment</span>
-            <span className="text-xs text-gray-500">100%</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const ProgressSlider: Story = {
-  render: () => <ProgressSliderDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Zoom control
-const ZoomControlDemo = () => {
-  const [zoom, setZoom] = useState(100)
-
-  return (
-    <div style={{ width: '500px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Zoom Level</h3>
-      <div className="flex items-center gap-4">
-        <button
-          className="rounded bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300"
-          onClick={() => setZoom(Math.max(50, zoom - 10))}
-        >
-          -
-        </button>
-        <div className="flex-1">
-          <Slider
-            value={zoom}
-            min={50}
-            max={200}
-            step={10}
-            onChange={setZoom}
-          />
-        </div>
-        <button
-          className="rounded bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300"
-          onClick={() => setZoom(Math.min(200, zoom + 10))}
-        >
-          +
-        </button>
-      </div>
-      <div className="mt-4 flex items-center justify-between text-sm text-gray-600">
-        <span>50%</span>
-        <span className="text-lg font-semibold">
-          {zoom}
-          %
-        </span>
-        <span>200%</span>
-      </div>
-      <div className="mt-4 rounded-lg bg-gray-50 p-4 text-center" style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'center' }}>
-        <div className="text-sm">Preview content</div>
-      </div>
-    </div>
-  )
-}
-
-export const ZoomControl: Story = {
-  render: () => <ZoomControlDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - AI model parameters
-const AIModelParametersDemo = () => {
-  const [temperature, setTemperature] = useState(0.7)
-  const [maxTokens, setMaxTokens] = useState(2000)
-  const [topP, setTopP] = useState(0.9)
-
-  return (
-    <div style={{ width: '500px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Model Configuration</h3>
-      <div className="space-y-6">
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <label className="text-sm font-medium text-gray-700">Temperature</label>
-            <span className="text-sm font-semibold">{temperature}</span>
-          </div>
-          <Slider
-            value={temperature}
-            min={0}
-            max={2}
-            step={0.1}
-            onChange={setTemperature}
-          />
-          <p className="mt-1 text-xs text-gray-500">
-            Controls randomness. Lower is more focused, higher is more creative.
-          </p>
-        </div>
-
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <label className="text-sm font-medium text-gray-700">Max Tokens</label>
-            <span className="text-sm font-semibold">{maxTokens}</span>
-          </div>
-          <Slider
-            value={maxTokens}
-            min={100}
-            max={4000}
-            step={100}
-            onChange={setMaxTokens}
-          />
-          <p className="mt-1 text-xs text-gray-500">
-            Maximum length of generated response.
-          </p>
-        </div>
-
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <label className="text-sm font-medium text-gray-700">Top P</label>
-            <span className="text-sm font-semibold">{topP}</span>
-          </div>
-          <Slider
-            value={topP}
-            min={0}
-            max={1}
-            step={0.05}
-            onChange={setTopP}
-          />
-          <p className="mt-1 text-xs text-gray-500">
-            Nucleus sampling threshold.
-          </p>
-        </div>
-      </div>
-      <div className="mt-6 rounded-lg bg-blue-50 p-4 text-xs text-gray-700">
-        <div>
-          <strong>Temperature:</strong>
-          {' '}
-          {temperature}
-        </div>
-        <div>
-          <strong>Max Tokens:</strong>
-          {' '}
-          {maxTokens}
-        </div>
-        <div>
-          <strong>Top P:</strong>
-          {' '}
-          {topP}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const AIModelParameters: Story = {
-  render: () => <AIModelParametersDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Image quality selector
-const ImageQualitySelectorDemo = () => {
-  const [quality, setQuality] = useState(80)
-
-  const getQualityLabel = (q: number) => {
-    if (q < 50)
-      return 'Low'
-    if (q < 70)
-      return 'Medium'
-    if (q < 90)
-      return 'High'
-    return 'Maximum'
-  }
-
-  const estimatedSize = Math.round((quality / 100) * 5)
-
-  return (
-    <div style={{ width: '450px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Image Export Quality</h3>
-      <Slider
-        value={quality}
-        min={10}
-        max={100}
-        step={10}
-        onChange={setQuality}
-      />
-      <div className="mt-4 grid grid-cols-2 gap-4">
-        <div className="rounded-lg bg-gray-50 p-3">
-          <div className="text-xs text-gray-600">Quality</div>
-          <div className="text-lg font-semibold">{getQualityLabel(quality)}</div>
-          <div className="text-xs text-gray-500">
-            {quality}
-            %
-          </div>
-        </div>
-        <div className="rounded-lg bg-gray-50 p-3">
-          <div className="text-xs text-gray-600">File Size</div>
-          <div className="text-lg font-semibold">
-            ~
-            {estimatedSize}
-            {' '}
-            MB
-          </div>
-          <div className="text-xs text-gray-500">Estimated</div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const ImageQualitySelector: Story = {
-  render: () => <ImageQualitySelectorDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Multiple sliders
-const MultipleSlidersDemo = () => {
-  const [red, setRed] = useState(128)
-  const [green, setGreen] = useState(128)
-  const [blue, setBlue] = useState(128)
-
-  const rgbColor = `rgb(${red}, ${green}, ${blue})`
-
-  return (
-    <div style={{ width: '450px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">RGB Color Picker</h3>
-      <div className="space-y-4">
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <label className="text-sm font-medium text-red-600">Red</label>
-            <span className="text-sm font-semibold">{red}</span>
-          </div>
-          <Slider value={red} min={0} max={255} step={1} onChange={setRed} />
-        </div>
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <label className="text-sm font-medium text-green-600">Green</label>
-            <span className="text-sm font-semibold">{green}</span>
-          </div>
-          <Slider value={green} min={0} max={255} step={1} onChange={setGreen} />
-        </div>
-        <div>
-          <div className="mb-2 flex items-center justify-between">
-            <label className="text-sm font-medium text-blue-600">Blue</label>
-            <span className="text-sm font-semibold">{blue}</span>
-          </div>
-          <Slider value={blue} min={0} max={255} step={1} onChange={setBlue} />
-        </div>
-      </div>
-      <div className="mt-6 flex items-center justify-between">
-        <div
-          className="h-24 w-24 rounded-lg border-2 border-gray-300"
-          style={{ backgroundColor: rgbColor }}
-        />
-        <div className="text-right">
-          <div className="mb-1 text-xs text-gray-600">Color Value</div>
-          <div className="font-mono text-sm font-semibold">{rgbColor}</div>
-          <div className="mt-1 font-mono text-xs text-gray-500">
-            #
-            {red.toString(16).padStart(2, '0')}
-            {green.toString(16).padStart(2, '0')}
-            {blue.toString(16).padStart(2, '0')}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const MultipleSliders: Story = {
-  render: () => <MultipleSlidersDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Interactive playground
-export const Playground: Story = {
-  render: args => <SliderDemo {...args} />,
-  args: {
-    value: 50,
-    min: 0,
-    max: 100,
-    step: 1,
-    disabled: false,
-  },
-}

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

@@ -1,43 +0,0 @@
-import ReactSlider from 'react-slider'
-import { cn } from '@/utils/classnames'
-import './style.css'
-
-type ISliderProps = {
-  className?: string
-  thumbClassName?: string
-  trackClassName?: string
-  value: number
-  max?: number
-  min?: number
-  step?: number
-  disabled?: boolean
-  onChange: (value: number) => void
-}
-
-const Slider: React.FC<ISliderProps> = ({
-  className,
-  thumbClassName,
-  trackClassName,
-  max,
-  min,
-  step,
-  value,
-  disabled,
-  onChange,
-}) => {
-  return (
-    <ReactSlider
-      disabled={disabled}
-      value={Number.isNaN(value) ? 0 : value}
-      min={min || 0}
-      max={max || 100}
-      step={step || 1}
-      className={cn('slider relative', className)}
-      thumbClassName={cn('absolute top-[-9px] h-5 w-2 rounded-[3px] border-[0.5px] border-components-slider-knob-border bg-components-slider-knob shadow-sm  focus:outline-none', !disabled && 'cursor-pointer', thumbClassName)}
-      trackClassName={cn('h-0.5 rounded-full', 'slider-track', trackClassName)}
-      onChange={onChange}
-    />
-  )
-}
-
-export default Slider

web/app/components/base/slider/style.css

@@ -1,11 +0,0 @@
-.slider.disabled {
-    opacity: 0.6;
-}
-
-.slider-track {
-    background-color: var(--color-components-slider-range);
-}
-
-.slider-track-1 {
-    background-color: var(--color-components-slider-track);
-}

web/app/components/base/ui/slider/__tests__/index.spec.tsx

@@ -0,0 +1,73 @@
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { Slider } from '../index'
+
+describe('Slider', () => {
+  const getSliderInput = () => screen.getByLabelText('Value')
+
+  it('should render with correct default ARIA limits and current value', () => {
+    render(<Slider value={50} onValueChange={vi.fn()} aria-label="Value" />)
+
+    const slider = getSliderInput()
+    expect(slider).toHaveAttribute('min', '0')
+    expect(slider).toHaveAttribute('max', '100')
+    expect(slider).toHaveAttribute('aria-valuenow', '50')
+  })
+
+  it('should apply custom min, max, and step values', () => {
+    render(<Slider value={10} min={5} max={20} step={5} onValueChange={vi.fn()} aria-label="Value" />)
+
+    const slider = getSliderInput()
+    expect(slider).toHaveAttribute('min', '5')
+    expect(slider).toHaveAttribute('max', '20')
+    expect(slider).toHaveAttribute('aria-valuenow', '10')
+  })
+
+  it('should clamp non-finite values to min', () => {
+    render(<Slider value={Number.NaN} min={5} onValueChange={vi.fn()} aria-label="Value" />)
+
+    expect(getSliderInput()).toHaveAttribute('aria-valuenow', '5')
+  })
+
+  it('should call onValueChange when arrow keys are pressed', async () => {
+    const user = userEvent.setup()
+    const onValueChange = vi.fn()
+
+    render(<Slider value={20} onValueChange={onValueChange} aria-label="Value" />)
+
+    const slider = getSliderInput()
+
+    await act(async () => {
+      slider.focus()
+      await user.keyboard('{ArrowRight}')
+    })
+
+    expect(onValueChange).toHaveBeenCalledTimes(1)
+    expect(onValueChange).toHaveBeenLastCalledWith(21, expect.anything())
+  })
+
+  it('should not trigger onValueChange when disabled', async () => {
+    const user = userEvent.setup()
+    const onValueChange = vi.fn()
+    render(<Slider value={20} onValueChange={onValueChange} disabled aria-label="Value" />)
+
+    const slider = getSliderInput()
+
+    expect(slider).toBeDisabled()
+
+    await act(async () => {
+      slider.focus()
+      await user.keyboard('{ArrowRight}')
+    })
+
+    expect(onValueChange).not.toHaveBeenCalled()
+  })
+
+  it('should apply custom class names on root', () => {
+    const { container } = render(<Slider value={10} onValueChange={vi.fn()} className="outer-test" aria-label="Value" />)
+
+    const sliderWrapper = container.querySelector('.outer-test')
+    expect(sliderWrapper).toBeInTheDocument()
+  })
+})

web/app/components/base/ui/slider/index.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type * as React from 'react'
+import { useState } from 'react'
+import { Slider } from '.'
+
+const meta = {
+  title: 'Base UI/Data Entry/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Single-value horizontal slider built on Base UI.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'number',
+    },
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Slider>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+function SliderDemo({
+  value: initialValue = 50,
+  defaultValue: _defaultValue,
+  ...args
+}: React.ComponentProps<typeof Slider>) {
+  const [value, setValue] = useState(initialValue)
+
+  return (
+    <div className="w-[320px] space-y-3">
+      <Slider
+        {...args}
+        value={value}
+        onValueChange={setValue}
+        aria-label="Demo slider"
+      />
+      <div className="text-center text-text-secondary system-sm-medium">
+        {value}
+      </div>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <SliderDemo {...args} />,
+  args: {
+    value: 50,
+    min: 0,
+    max: 100,
+    step: 1,
+  },
+}
+
+export const Decimal: Story = {
+  render: args => <SliderDemo {...args} />,
+  args: {
+    value: 0.5,
+    min: 0,
+    max: 1,
+    step: 0.1,
+  },
+}
+
+export const Disabled: Story = {
+  render: args => <SliderDemo {...args} />,
+  args: {
+    value: 75,
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: true,
+  },
+}

web/app/components/base/ui/slider/index.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { Slider as BaseSlider } from '@base-ui/react/slider'
+import * as React from 'react'
+import { cn } from '@/utils/classnames'
+
+type SliderRootProps = BaseSlider.Root.Props<number>
+type SliderThumbProps = BaseSlider.Thumb.Props
+
+type SliderBaseProps = Pick<
+  SliderRootProps,
+  'onValueChange' | 'min' | 'max' | 'step' | 'disabled' | 'name'
+> & Pick<SliderThumbProps, 'aria-label' | 'aria-labelledby'> & {
+  className?: string
+}
+
+type ControlledSliderProps = SliderBaseProps & {
+  value: number
+  defaultValue?: never
+}
+
+type UncontrolledSliderProps = SliderBaseProps & {
+  value?: never
+  defaultValue?: number
+}
+
+export type SliderProps = ControlledSliderProps | UncontrolledSliderProps
+
+const sliderRootClassName = 'group/slider relative inline-flex w-full data-[disabled]:opacity-30'
+const sliderControlClassName = cn(
+  'relative flex h-5 w-full touch-none select-none items-center',
+  'data-[disabled]:cursor-not-allowed',
+)
+const sliderTrackClassName = cn(
+  'relative h-1 w-full overflow-hidden rounded-full',
+  'bg-[var(--slider-track,var(--color-components-slider-track))]',
+)
+const sliderIndicatorClassName = cn(
+  'h-full rounded-full',
+  'bg-[var(--slider-range,var(--color-components-slider-range))]',
+)
+const sliderThumbClassName = cn(
+  'block h-5 w-2 shrink-0 rounded-[3px] border-[0.5px]',
+  'border-[var(--slider-knob-border,var(--color-components-slider-knob-border))]',
+  'bg-[var(--slider-knob,var(--color-components-slider-knob))] shadow-sm',
+  'transition-[background-color,border-color,box-shadow,opacity] motion-reduce:transition-none',
+  'hover:bg-[var(--slider-knob-hover,var(--color-components-slider-knob-hover))]',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-components-slider-knob-border-hover focus-visible:ring-offset-0',
+  'active:shadow-md',
+  'group-data-[disabled]/slider:bg-[var(--slider-knob-disabled,var(--color-components-slider-knob-disabled))]',
+  'group-data-[disabled]/slider:border-[var(--slider-knob-border,var(--color-components-slider-knob-border))]',
+  'group-data-[disabled]/slider:shadow-none',
+)
+
+const getSafeValue = (value: number | undefined, min: number) => {
+  if (value === undefined)
+    return undefined
+
+  return Number.isFinite(value) ? value : min
+}
+
+export function Slider({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  name,
+  className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+}: SliderProps) {
+  return (
+    <BaseSlider.Root
+      value={getSafeValue(value, min)}
+      defaultValue={getSafeValue(defaultValue, min)}
+      onValueChange={onValueChange}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      name={name}
+      thumbAlignment="edge"
+      className={cn(sliderRootClassName, className)}
+    >
+      <BaseSlider.Control className={sliderControlClassName}>
+        <BaseSlider.Track className={sliderTrackClassName}>
+          <BaseSlider.Indicator className={sliderIndicatorClassName} />
+        </BaseSlider.Track>
+        <BaseSlider.Thumb
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          className={sliderThumbClassName}
+        />
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  )
+}

web/app/components/billing/partner-stack/__tests__/cookie-recorder.spec.tsx

@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react'
+import PartnerStackCookieRecorder from '../cookie-recorder'
+
+let isCloudEdition = true
+
+const saveOrUpdate = vi.fn()
+
+vi.mock('@/config', () => ({
+  get IS_CLOUD_EDITION() {
+    return isCloudEdition
+  },
+}))
+
+vi.mock('../use-ps-info', () => ({
+  default: () => ({
+    saveOrUpdate,
+  }),
+}))
+
+describe('PartnerStackCookieRecorder', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    isCloudEdition = true
+  })
+
+  it('should call saveOrUpdate once on mount when running in cloud edition', () => {
+    render(<PartnerStackCookieRecorder />)
+
+    expect(saveOrUpdate).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not call saveOrUpdate when not running in cloud edition', () => {
+    isCloudEdition = false
+
+    render(<PartnerStackCookieRecorder />)
+
+    expect(saveOrUpdate).not.toHaveBeenCalled()
+  })
+
+  it('should render null', () => {
+    const { container } = render(<PartnerStackCookieRecorder />)
+
+    expect(container.innerHTML).toBe('')
+  })
+})

web/app/components/billing/partner-stack/cookie-recorder.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useEffect } from 'react'
+import { IS_CLOUD_EDITION } from '@/config'
+import usePSInfo from './use-ps-info'
+
+const PartnerStackCookieRecorder = () => {
+  const { saveOrUpdate } = usePSInfo()
+
+  useEffect(() => {
+    if (!IS_CLOUD_EDITION)
+      return
+    saveOrUpdate()
+  }, [])
+
+  return null
+}
+
+export default PartnerStackCookieRecorder

web/app/components/billing/partner-stack/use-ps-info.ts

@@ -24,7 +24,7 @@ const usePSInfo = () => {
   }] = useBoolean(false)
   const { mutateAsync } = useBindPartnerStackInfo()
   // Save to top domain. cloud.dify.ai => .dify.ai
-  const domain = globalThis.location.hostname.replace('cloud', '')
+  const domain = globalThis.location?.hostname.replace('cloud', '')
 
   const saveOrUpdate = useCallback(() => {
     if (!psPartnerKey || !psClickId)
@@ -39,7 +39,7 @@ const usePSInfo = () => {
       path: '/',
       domain,
     })
-  }, [psPartnerKey, psClickId, isPSChanged])
+  }, [psPartnerKey, psClickId, isPSChanged, domain])
 
   const bind = useCallback(async () => {
     if (psPartnerKey && psClickId && !hasBind) {
@@ -59,7 +59,7 @@ const usePSInfo = () => {
         Cookies.remove(PARTNER_STACK_CONFIG.cookieName, { path: '/', domain })
       setBind()
     }
-  }, [psPartnerKey, psClickId, mutateAsync, hasBind, setBind])
+  }, [psPartnerKey, psClickId, hasBind, domain, setBind, mutateAsync])
   return {
     psPartnerKey,
     psClickId,

web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx

@@ -14,6 +14,8 @@ describe('IndexMethod', () => {
     vi.clearAllMocks()
   })
 
+  const getKeywordSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords')
+
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<IndexMethod {...defaultProps} />)
@@ -123,8 +125,7 @@ describe('IndexMethod', () => {
   describe('KeywordNumber', () => {
     it('should render KeywordNumber component inside Economy option', () => {
       render(<IndexMethod {...defaultProps} />)
-      // KeywordNumber has a slider
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getKeywordSlider()).toBeInTheDocument()
     })
 
     it('should pass keywordNumber to KeywordNumber component', () => {

web/app/components/datasets/settings/index-method/__tests__/keyword-number.spec.tsx

@@ -11,6 +11,8 @@ describe('KeyWordNumber', () => {
     vi.clearAllMocks()
   })
 
+  const getSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords')
+
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<KeyWordNumber {...defaultProps} />)
@@ -31,8 +33,7 @@ describe('KeyWordNumber', () => {
 
     it('should render slider', () => {
       render(<KeyWordNumber {...defaultProps} />)
-      // Slider has a slider role
-      expect(screen.getByRole('slider')).toBeInTheDocument()
+      expect(getSlider()).toBeInTheDocument()
     })
 
     it('should render input number field', () => {
@@ -61,7 +62,7 @@ describe('KeyWordNumber', () => {
 
     it('should pass correct value to slider', () => {
       render(<KeyWordNumber {...defaultProps} keywordNumber={30} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
       expect(slider).toHaveAttribute('aria-valuenow', '30')
     })
   })
@@ -71,8 +72,7 @@ describe('KeyWordNumber', () => {
       const handleChange = vi.fn()
       render(<KeyWordNumber {...defaultProps} onKeywordNumberChange={handleChange} />)
 
-      const slider = screen.getByRole('slider')
-      // Verify slider is rendered and interactive
+      const slider = getSlider()
       expect(slider).toBeInTheDocument()
       expect(slider).not.toBeDisabled()
     })
@@ -109,14 +109,14 @@ describe('KeyWordNumber', () => {
   describe('Slider Configuration', () => {
     it('should have max value of 50', () => {
       render(<KeyWordNumber {...defaultProps} />)
-      const slider = screen.getByRole('slider')
-      expect(slider).toHaveAttribute('aria-valuemax', '50')
+      const slider = getSlider()
+      expect(slider).toHaveAttribute('max', '50')
     })
 
     it('should have min value of 0', () => {
       render(<KeyWordNumber {...defaultProps} />)
-      const slider = screen.getByRole('slider')
-      expect(slider).toHaveAttribute('aria-valuemin', '0')
+      const slider = getSlider()
+      expect(slider).toHaveAttribute('min', '0')
     })
   })
 
@@ -162,7 +162,7 @@ describe('KeyWordNumber', () => {
   describe('Accessibility', () => {
     it('should have accessible slider', () => {
       render(<KeyWordNumber {...defaultProps} />)
-      const slider = screen.getByRole('slider')
+      const slider = getSlider()
       expect(slider).toBeInTheDocument()
     })
 

web/app/components/datasets/settings/index-method/keyword-number.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Slider from '@/app/components/base/slider'
 import Tooltip from '@/app/components/base/tooltip'
 import {
   NumberField,
@@ -11,6 +10,7 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/app/components/base/ui/number-field'
+import { Slider } from '@/app/components/base/ui/slider'
 
 const MIN_KEYWORD_NUMBER = 0
 const MAX_KEYWORD_NUMBER = 50
@@ -47,7 +47,8 @@ const KeyWordNumber = ({
         value={keywordNumber}
         min={MIN_KEYWORD_NUMBER}
         max={MAX_KEYWORD_NUMBER}
-        onChange={onKeywordNumberChange}
+        onValueChange={onKeywordNumberChange}
+        aria-label={t('form.numberOfKeywords', { ns: 'datasetSettings' })}
       />
       <NumberField
         className="w-12 shrink-0"

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.spec.tsx

@@ -11,9 +11,9 @@ vi.mock('../../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
-vi.mock('@/app/components/base/slider', () => ({
-  default: ({ onChange }: { onChange: (v: number) => void }) => (
-    <button onClick={() => onChange(2)} data-testid="slider-btn">Slide 2</button>
+vi.mock('@/app/components/base/ui/slider', () => ({
+  Slider: ({ onValueChange }: { onValueChange: (v: number) => void }) => (
+    <button onClick={() => onValueChange(2)} data-testid="slider-btn">Slide 2</button>
   ),
 }))
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -7,10 +7,10 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import Radio from '@/app/components/base/radio'
-import Slider from '@/app/components/base/slider'
 import Switch from '@/app/components/base/switch'
 import TagInput from '@/app/components/base/tag-input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
+import { Slider } from '@/app/components/base/ui/slider'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { cn } from '@/utils/classnames'
@@ -78,6 +78,7 @@ function ParameterItem({
   }
 
   const renderValue = value ?? localValue ?? getDefaultValue()
+  const sliderLabel = parameterRule.label[language] || parameterRule.label.en_US
 
   const handleInputChange = (newValue: ParameterValue) => {
     setLocalValue(newValue)
@@ -170,7 +171,8 @@ function ParameterItem({
               min={parameterRule.min}
               max={parameterRule.max}
               step={step}
-              onChange={handleSlideChange}
+              onValueChange={handleSlideChange}
+              aria-label={sliderLabel}
             />
           )}
           <input
@@ -197,7 +199,8 @@ function ParameterItem({
               min={parameterRule.min}
               max={parameterRule.max}
               step={0.1}
-              onChange={handleSlideChange}
+              onValueChange={handleSlideChange}
+              aria-label={sliderLabel}
             />
           )}
           <input
@@ -337,9 +340,9 @@ function ParameterItem({
           }
           <div
             className="mr-0.5 truncate text-text-secondary system-xs-regular"
-            title={parameterRule.label[language] || parameterRule.label.en_US}
+            title={sliderLabel}
           >
-            {parameterRule.label[language] || parameterRule.label.en_US}
+            {sliderLabel}
           </div>
           {
             parameterRule.help && (

web/app/components/workflow-app/__tests__/index.spec.tsx

@@ -0,0 +1,350 @@
+import type { ReactNode } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import WorkflowApp from '../index'
+
+const mockSetTriggerStatuses = vi.fn()
+const mockSetInputs = vi.fn()
+const mockSetShowInputsPanel = vi.fn()
+const mockSetShowDebugAndPreviewPanel = vi.fn()
+const mockWorkflowStoreSetState = vi.fn()
+const mockDebouncedCancel = vi.fn()
+const mockFetchRunDetail = vi.fn()
+const mockInitialNodes = vi.fn()
+const mockInitialEdges = vi.fn()
+const mockGetWorkflowRunAndTraceUrl = vi.fn()
+
+let appStoreState: {
+  appDetail?: {
+    id: string
+    mode: string
+  }
+}
+
+let workflowInitState: {
+  data: {
+    graph: {
+      nodes: Array<Record<string, unknown>>
+      edges: Array<Record<string, unknown>>
+      viewport: { x: number, y: number, zoom: number }
+    }
+    features: Record<string, unknown>
+  } | null
+  isLoading: boolean
+  fileUploadConfigResponse: Record<string, unknown> | null
+}
+
+let appContextState: {
+  isLoadingCurrentWorkspace: boolean
+  currentWorkspace: {
+    id?: string
+  }
+}
+
+let appTriggersState: {
+  data?: {
+    data: Array<{
+      node_id: string
+      status: string
+    }>
+  }
+}
+
+let searchParamsValue: string | null = null
+
+const mockWorkflowStore = {
+  setState: mockWorkflowStoreSetState,
+  getState: () => ({
+    setInputs: mockSetInputs,
+    setShowInputsPanel: mockSetShowInputsPanel,
+    setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+    debouncedSyncWorkflowDraft: {
+      cancel: mockDebouncedCancel,
+    },
+  }),
+}
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: <T,>(selector: (state: typeof appStoreState) => T) => selector(appStoreState),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => mockWorkflowStore,
+}))
+
+vi.mock('@/app/components/workflow/store/trigger-status', () => ({
+  useTriggerStatusStore: () => ({
+    setTriggerStatuses: mockSetTriggerStatuses,
+  }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => appContextState,
+}))
+
+vi.mock('@/next/navigation', () => ({
+  useSearchParams: () => ({
+    get: (key: string) => (key === 'replayRunId' ? searchParamsValue : null),
+  }),
+}))
+
+vi.mock('@/service/log', () => ({
+  fetchRunDetail: (...args: unknown[]) => mockFetchRunDetail(...args),
+}))
+
+vi.mock('@/service/use-tools', () => ({
+  useAppTriggers: () => appTriggersState,
+}))
+
+vi.mock('@/app/components/workflow-app/hooks/use-workflow-init', () => ({
+  useWorkflowInit: () => workflowInitState,
+}))
+
+vi.mock('@/app/components/workflow-app/hooks/use-get-run-and-trace-url', () => ({
+  useGetRunAndTraceUrl: () => ({
+    getWorkflowRunAndTraceUrl: mockGetWorkflowRunAndTraceUrl,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/workflow/utils')>()
+  return {
+    ...actual,
+    initialNodes: (...args: unknown[]) => mockInitialNodes(...args),
+    initialEdges: (...args: unknown[]) => mockInitialEdges(...args),
+  }
+})
+
+vi.mock('@/app/components/base/loading', () => ({
+  default: () => <div data-testid="loading">loading</div>,
+}))
+
+vi.mock('@/app/components/base/features', () => ({
+  FeaturesProvider: ({
+    features,
+    children,
+  }: {
+    features: Record<string, unknown>
+    children: ReactNode
+  }) => (
+    <div data-testid="features-provider" data-features={JSON.stringify(features)}>
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+  default: ({
+    nodes,
+    edges,
+    children,
+  }: {
+    nodes: Array<Record<string, unknown>>
+    edges: Array<Record<string, unknown>>
+    children: ReactNode
+  }) => (
+    <div data-testid="workflow-default-context" data-nodes={JSON.stringify(nodes)} data-edges={JSON.stringify(edges)}>
+      {children}
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/context', () => ({
+  WorkflowContextProvider: ({
+    children,
+  }: {
+    injectWorkflowStoreSliceFn: unknown
+    children: ReactNode
+  }) => (
+    <div data-testid="workflow-context-provider">{children}</div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow-app/components/workflow-main', () => ({
+  default: ({
+    nodes,
+    edges,
+    viewport,
+  }: {
+    nodes: Array<Record<string, unknown>>
+    edges: Array<Record<string, unknown>>
+    viewport: Record<string, unknown>
+  }) => (
+    <div
+      data-testid="workflow-app-main"
+      data-nodes={JSON.stringify(nodes)}
+      data-edges={JSON.stringify(edges)}
+      data-viewport={JSON.stringify(viewport)}
+    />
+  ),
+}))
+
+describe('WorkflowApp', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    appStoreState = {
+      appDetail: {
+        id: 'app-1',
+        mode: 'workflow',
+      },
+    }
+    workflowInitState = {
+      data: {
+        graph: {
+          nodes: [{ id: 'raw-node' }],
+          edges: [{ id: 'raw-edge' }],
+          viewport: { x: 1, y: 2, zoom: 3 },
+        },
+        features: {
+          file_upload: {
+            enabled: true,
+          },
+        },
+      },
+      isLoading: false,
+      fileUploadConfigResponse: { enabled: true },
+    }
+    appContextState = {
+      isLoadingCurrentWorkspace: false,
+      currentWorkspace: { id: 'workspace-1' },
+    }
+    appTriggersState = {}
+    searchParamsValue = null
+    mockFetchRunDetail.mockResolvedValue({ inputs: null })
+    mockInitialNodes.mockReturnValue([{ id: 'node-1' }])
+    mockInitialEdges.mockReturnValue([{ id: 'edge-1' }])
+    mockGetWorkflowRunAndTraceUrl.mockReturnValue({ runUrl: '/runs/run-1' })
+  })
+
+  it('should render the loading shell while workflow data is still loading', () => {
+    workflowInitState = {
+      data: null,
+      isLoading: true,
+      fileUploadConfigResponse: null,
+    }
+
+    render(<WorkflowApp />)
+
+    expect(screen.getByTestId('loading')).toBeInTheDocument()
+    expect(screen.queryByTestId('workflow-app-main')).not.toBeInTheDocument()
+  })
+
+  it('should render the workflow app shell and sync trigger statuses when data is ready', () => {
+    appTriggersState = {
+      data: {
+        data: [
+          { node_id: 'trigger-enabled', status: 'enabled' },
+          { node_id: 'trigger-disabled', status: 'paused' },
+        ],
+      },
+    }
+
+    render(<WorkflowApp />)
+
+    expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-default-context')).toHaveAttribute('data-nodes', JSON.stringify([{ id: 'node-1' }]))
+    expect(screen.getByTestId('workflow-default-context')).toHaveAttribute('data-edges', JSON.stringify([{ id: 'edge-1' }]))
+    expect(screen.getByTestId('workflow-app-main')).toHaveAttribute('data-viewport', JSON.stringify({ x: 1, y: 2, zoom: 3 }))
+    expect(screen.getByTestId('features-provider')).toBeInTheDocument()
+    expect(mockSetTriggerStatuses).toHaveBeenCalledWith({
+      'trigger-enabled': 'enabled',
+      'trigger-disabled': 'disabled',
+    })
+  })
+
+  it('should not sync trigger statuses when trigger data is unavailable', () => {
+    render(<WorkflowApp />)
+
+    expect(screen.getByTestId('workflow-app-main')).toBeInTheDocument()
+    expect(mockSetTriggerStatuses).not.toHaveBeenCalled()
+  })
+
+  it('should replay workflow inputs from replayRunId and clean up workflow state on unmount', async () => {
+    searchParamsValue = 'run-1'
+    mockFetchRunDetail.mockResolvedValue({
+      inputs: '{"sys.query":"hidden","foo":"bar","count":2,"flag":true,"obj":{"nested":true},"nil":null}',
+    })
+
+    const { unmount } = render(<WorkflowApp />)
+
+    await waitFor(() => {
+      expect(mockFetchRunDetail).toHaveBeenCalledWith('/runs/run-1')
+      expect(mockSetInputs).toHaveBeenCalledWith({
+        foo: 'bar',
+        count: 2,
+        flag: true,
+        obj: '{"nested":true}',
+        nil: '',
+      })
+      expect(mockSetShowInputsPanel).toHaveBeenCalledWith(true)
+      expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    })
+
+    unmount()
+
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({ isWorkflowDataLoaded: false })
+    expect(mockDebouncedCancel).toHaveBeenCalled()
+  })
+
+  it('should skip replay lookups when replayRunId is missing', () => {
+    render(<WorkflowApp />)
+
+    expect(mockGetWorkflowRunAndTraceUrl).not.toHaveBeenCalled()
+    expect(mockFetchRunDetail).not.toHaveBeenCalled()
+    expect(mockSetInputs).not.toHaveBeenCalled()
+  })
+
+  it('should skip replay fetches when the resolved run url is empty', async () => {
+    searchParamsValue = 'run-1'
+    mockGetWorkflowRunAndTraceUrl.mockReturnValue({ runUrl: '' })
+
+    render(<WorkflowApp />)
+
+    await waitFor(() => {
+      expect(mockGetWorkflowRunAndTraceUrl).toHaveBeenCalledWith('run-1')
+    })
+
+    expect(mockFetchRunDetail).not.toHaveBeenCalled()
+    expect(mockSetInputs).not.toHaveBeenCalled()
+  })
+
+  it('should stop replay recovery when workflow run inputs cannot be parsed', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    searchParamsValue = 'run-1'
+    mockFetchRunDetail.mockResolvedValue({
+      inputs: '{invalid-json}',
+    })
+
+    render(<WorkflowApp />)
+
+    await waitFor(() => {
+      expect(mockFetchRunDetail).toHaveBeenCalledWith('/runs/run-1')
+    })
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'Failed to parse workflow run inputs',
+      expect.any(Error),
+    )
+    expect(mockSetInputs).not.toHaveBeenCalled()
+    expect(mockSetShowInputsPanel).not.toHaveBeenCalled()
+    expect(mockSetShowDebugAndPreviewPanel).not.toHaveBeenCalled()
+
+    consoleErrorSpy.mockRestore()
+  })
+
+  it('should ignore replay inputs when they only contain sys variables', async () => {
+    searchParamsValue = 'run-1'
+    mockFetchRunDetail.mockResolvedValue({
+      inputs: '{"sys.query":"hidden","sys.user_id":"u-1"}',
+    })
+
+    render(<WorkflowApp />)
+
+    await waitFor(() => {
+      expect(mockFetchRunDetail).toHaveBeenCalledWith('/runs/run-1')
+    })
+
+    expect(mockSetInputs).not.toHaveBeenCalled()
+    expect(mockSetShowInputsPanel).not.toHaveBeenCalled()
+    expect(mockSetShowDebugAndPreviewPanel).not.toHaveBeenCalled()
+  })
+})

web/app/components/workflow-app/__tests__/utils.spec.ts

@@ -0,0 +1,90 @@
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'
+import {
+  buildInitialFeatures,
+  buildTriggerStatusMap,
+  coerceReplayUserInputs,
+} from '../utils'
+
+describe('workflow-app utils', () => {
+  it('should map trigger statuses to enabled and disabled states', () => {
+    expect(buildTriggerStatusMap([
+      { node_id: 'node-1', status: 'enabled' },
+      { node_id: 'node-2', status: 'disabled' },
+      { node_id: 'node-3', status: 'paused' },
+    ])).toEqual({
+      'node-1': 'enabled',
+      'node-2': 'disabled',
+      'node-3': 'disabled',
+    })
+  })
+
+  it('should coerce replay run inputs, omit sys keys, and stringify complex values', () => {
+    expect(coerceReplayUserInputs({
+      'sys.query': 'hidden',
+      'query': 'hello',
+      'count': 3,
+      'enabled': true,
+      'nullable': null,
+      'metadata': { nested: true },
+    })).toEqual({
+      query: 'hello',
+      count: 3,
+      enabled: true,
+      nullable: '',
+      metadata: '{"nested":true}',
+    })
+    expect(coerceReplayUserInputs('invalid')).toBeNull()
+    expect(coerceReplayUserInputs(null)).toBeNull()
+  })
+
+  it('should build initial features with file-upload and feature fallbacks', () => {
+    const result = buildInitialFeatures({
+      file_upload: {
+        enabled: true,
+        allowed_file_types: [SupportUploadFileTypes.image],
+        allowed_file_extensions: ['.png'],
+        allowed_file_upload_methods: [TransferMethod.local_file],
+        number_limits: 2,
+        image: {
+          enabled: true,
+          number_limits: 5,
+          transfer_methods: [TransferMethod.remote_url],
+        },
+      },
+      opening_statement: 'hello',
+      suggested_questions: ['Q1'],
+      suggested_questions_after_answer: { enabled: true },
+      speech_to_text: { enabled: true },
+      text_to_speech: { enabled: true },
+      retriever_resource: { enabled: true },
+      sensitive_word_avoidance: { enabled: true },
+    }, { enabled: true } as never)
+
+    expect(result).toMatchObject({
+      file: {
+        enabled: true,
+        allowed_file_types: [SupportUploadFileTypes.image],
+        allowed_file_extensions: ['.png'],
+        allowed_file_upload_methods: [TransferMethod.local_file],
+        number_limits: 2,
+        fileUploadConfig: { enabled: true },
+        image: {
+          enabled: true,
+          number_limits: 5,
+          transfer_methods: [TransferMethod.remote_url],
+        },
+      },
+      opening: {
+        enabled: true,
+        opening_statement: 'hello',
+        suggested_questions: ['Q1'],
+      },
+      suggested: { enabled: true },
+      speech2text: { enabled: true },
+      text2speech: { enabled: true },
+      citation: { enabled: true },
+      moderation: { enabled: true },
+    })
+  })
+})

web/app/components/workflow-app/components/__tests__/workflow-children.spec.tsx

@@ -0,0 +1,494 @@
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
+import { BlockEnum } from '@/app/components/workflow/types'
+import WorkflowChildren from '../workflow-children'
+
+type WorkflowStoreState = {
+  showFeaturesPanel: boolean
+  showImportDSLModal: boolean
+  setShowImportDSLModal: (show: boolean) => void
+  showOnboarding: boolean
+  setShowOnboarding: (show: boolean) => void
+  setHasSelectedStartNode: (selected: boolean) => void
+  setShouldAutoOpenStartNodeSelector: (open: boolean) => void
+}
+
+type TriggerPluginConfig = {
+  plugin_id: string
+  provider_name: string
+  provider_type: string
+  event_name: string
+  event_label: string
+  event_description: string
+  output_schema: Record<string, unknown>
+  paramSchemas: Array<Record<string, unknown>>
+  params: Record<string, unknown>
+  subscription_id: string
+  plugin_unique_identifier: string
+  is_team_authorization: boolean
+  meta?: Record<string, unknown>
+}
+
+const mockSetShowImportDSLModal = vi.fn()
+const mockSetShowOnboarding = vi.fn()
+const mockSetHasSelectedStartNode = vi.fn()
+const mockSetShouldAutoOpenStartNodeSelector = vi.fn()
+const mockSetNodes = vi.fn()
+const mockSetEdges = vi.fn()
+const mockHandleSyncWorkflowDraft = vi.fn()
+const mockHandleOnboardingClose = vi.fn()
+const mockHandlePaneContextmenuCancel = vi.fn()
+const mockHandleExportDSL = vi.fn()
+const mockExportCheck = vi.fn()
+const mockAutoGenerateWebhookUrl = vi.fn()
+
+let workflowStoreState: WorkflowStoreState
+let eventSubscription: ((value: { type: string, payload: { data: Array<Record<string, unknown>> } }) => void) | null = null
+let lastGenerateNodeInput: Record<string, unknown> | null = null
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({
+    getState: () => ({
+      setNodes: mockSetNodes,
+      setEdges: mockSetEdges,
+    }),
+  }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: <T,>(selector: (state: WorkflowStoreState) => T) => selector(workflowStoreState),
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: () => ({
+    eventEmitter: {
+      useSubscription: (callback: typeof eventSubscription) => {
+        eventSubscription = callback
+      },
+    },
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useAutoGenerateWebhookUrl: () => mockAutoGenerateWebhookUrl,
+  useDSL: () => ({
+    exportCheck: mockExportCheck,
+    handleExportDSL: mockHandleExportDSL,
+  }),
+  usePanelInteractions: () => ({
+    handlePaneContextmenuCancel: mockHandlePaneContextmenuCancel,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    handleSyncWorkflowDraft: mockHandleSyncWorkflowDraft,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/workflow/utils')>()
+  return {
+    ...actual,
+    generateNewNode: (args: Record<string, unknown>) => {
+      lastGenerateNodeInput = args
+      return {
+        newNode: {
+          id: 'new-node-id',
+          position: args.position,
+          data: args.data,
+        },
+      }
+    },
+  }
+})
+
+vi.mock('@/app/components/workflow-app/hooks', () => ({
+  useAvailableNodesMetaData: () => ({
+    nodesMap: {
+      [BlockEnum.Start]: {
+        defaultValue: {
+          title: 'Start Title',
+          desc: 'Start description',
+          config: {
+            image: false,
+          },
+        },
+      },
+      [BlockEnum.TriggerPlugin]: {
+        defaultValue: {
+          title: 'Plugin title',
+          desc: 'Plugin description',
+          config: {
+            baseConfig: 'base',
+          },
+        },
+      },
+    },
+  }),
+}))
+
+vi.mock('@/app/components/workflow-app/hooks/use-auto-onboarding', () => ({
+  useAutoOnboarding: () => ({
+    handleOnboardingClose: mockHandleOnboardingClose,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/plugin-dependency', () => ({
+  default: () => <div data-testid="plugin-dependency">plugin-dependency</div>,
+}))
+
+vi.mock('@/app/components/workflow-app/components/workflow-header', () => ({
+  default: () => <div data-testid="workflow-header">workflow-header</div>,
+}))
+
+vi.mock('@/app/components/workflow-app/components/workflow-panel', () => ({
+  default: () => <div data-testid="workflow-panel">workflow-panel</div>,
+}))
+
+vi.mock('@/next/dynamic', async () => {
+  const ReactModule = await import('react')
+
+  return {
+    default: (
+      loader: () => Promise<{ default: React.ComponentType<Record<string, unknown>> }>,
+    ) => {
+      const DynamicComponent = (props: Record<string, unknown>) => {
+        const [Loaded, setLoaded] = ReactModule.useState<React.ComponentType<Record<string, unknown>> | null>(null)
+
+        ReactModule.useEffect(() => {
+          let mounted = true
+          loader().then((mod) => {
+            if (mounted)
+              setLoaded(() => mod.default)
+          })
+          return () => {
+            mounted = false
+          }
+        }, [])
+
+        return Loaded ? <Loaded {...props} /> : null
+      }
+
+      return DynamicComponent
+    },
+  }
+})
+
+vi.mock('@/app/components/workflow/features', () => ({
+  default: () => <div data-testid="workflow-features">features</div>,
+}))
+
+vi.mock('@/app/components/workflow/update-dsl-modal', () => ({
+  default: ({
+    onCancel,
+    onBackup,
+    onImport,
+  }: {
+    onCancel: () => void
+    onBackup: () => void
+    onImport: () => void
+  }) => (
+    <div data-testid="update-dsl-modal">
+      <button type="button" onClick={onCancel}>cancel-import-dsl</button>
+      <button type="button" onClick={onBackup}>backup-dsl</button>
+      <button type="button" onClick={onImport}>import-dsl</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/dsl-export-confirm-modal', () => ({
+  default: ({
+    envList,
+    onConfirm,
+    onClose,
+  }: {
+    envList: Array<Record<string, unknown>>
+    onConfirm: () => void
+    onClose: () => void
+  }) => (
+    <div data-testid="dsl-export-confirm-modal" data-env-count={String(envList.length)}>
+      <button type="button" onClick={onConfirm}>confirm-export-dsl</button>
+      <button type="button" onClick={onClose}>close-export-dsl</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow-app/components/workflow-onboarding-modal', () => ({
+  default: ({
+    onClose,
+    onSelectStartNode,
+  }: {
+    isShow: boolean
+    onClose: () => void
+    onSelectStartNode: (nodeType: BlockEnum, config?: TriggerPluginConfig) => void
+  }) => (
+    <div data-testid="workflow-onboarding-modal">
+      <button type="button" onClick={onClose}>close-onboarding</button>
+      <button type="button" onClick={() => onSelectStartNode(BlockEnum.Start)}>select-start-node</button>
+      <button
+        type="button"
+        onClick={() => onSelectStartNode(BlockEnum.Start, {
+          title: 'Configured Start Title',
+          desc: 'Configured Start Description',
+          config: { image: true, custom: 'config' },
+          extra: 'field',
+        } as never)}
+      >
+        select-start-node-with-config
+      </button>
+      <button
+        type="button"
+        onClick={() => onSelectStartNode(BlockEnum.TriggerPlugin, {
+          plugin_id: 'plugin-id',
+          provider_name: 'provider-name',
+          provider_type: 'tool',
+          event_name: 'event-name',
+          event_label: 'Event Label',
+          event_description: 'Event Description',
+          output_schema: { output: true },
+          paramSchemas: [{ name: 'api_key' }],
+          params: { token: 'abc' },
+          subscription_id: 'subscription-id',
+          plugin_unique_identifier: 'plugin-unique',
+          is_team_authorization: true,
+          meta: { source: 'plugin' },
+        })}
+      >
+        select-trigger-plugin
+      </button>
+      <button
+        type="button"
+        onClick={() => onSelectStartNode(BlockEnum.TriggerPlugin, {
+          plugin_id: 'plugin-id-2',
+          provider_name: 'provider-name-2',
+          provider_type: 'tool',
+          event_name: 'event-name-2',
+          event_label: '',
+          event_description: '',
+          output_schema: {},
+          paramSchemas: undefined,
+          params: {},
+          subscription_id: 'subscription-id-2',
+          plugin_unique_identifier: 'plugin-unique-2',
+          is_team_authorization: false,
+        } as never)}
+      >
+        select-trigger-plugin-fallback
+      </button>
+    </div>
+  ),
+}))
+
+describe('WorkflowChildren', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    workflowStoreState = {
+      showFeaturesPanel: false,
+      showImportDSLModal: false,
+      setShowImportDSLModal: mockSetShowImportDSLModal,
+      showOnboarding: false,
+      setShowOnboarding: mockSetShowOnboarding,
+      setHasSelectedStartNode: mockSetHasSelectedStartNode,
+      setShouldAutoOpenStartNodeSelector: mockSetShouldAutoOpenStartNodeSelector,
+    }
+    eventSubscription = null
+    lastGenerateNodeInput = null
+    mockHandleSyncWorkflowDraft.mockImplementation((_force?: boolean, _notRefresh?: boolean, callback?: { onSuccess?: () => void }) => {
+      callback?.onSuccess?.()
+    })
+  })
+
+  it('should render feature panel, import modal actions, and default workflow chrome', async () => {
+    const user = userEvent.setup()
+    workflowStoreState = {
+      ...workflowStoreState,
+      showFeaturesPanel: true,
+      showImportDSLModal: true,
+    }
+
+    render(<WorkflowChildren />)
+
+    expect(screen.getByTestId('plugin-dependency')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-header')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-panel')).toBeInTheDocument()
+    expect(await screen.findByTestId('workflow-features')).toBeInTheDocument()
+    expect(screen.getByTestId('update-dsl-modal')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: /cancel-import-dsl/i }))
+    await user.click(screen.getByRole('button', { name: /backup-dsl/i }))
+    await user.click(screen.getByRole('button', { name: /^import-dsl$/i }))
+
+    expect(mockSetShowImportDSLModal).toHaveBeenCalledWith(false)
+    expect(mockExportCheck).toHaveBeenCalled()
+    expect(mockHandlePaneContextmenuCancel).toHaveBeenCalled()
+  })
+
+  it('should react to DSL export check events by showing the confirm modal and closing it', async () => {
+    const user = userEvent.setup()
+
+    render(<WorkflowChildren />)
+
+    await act(async () => {
+      eventSubscription?.({
+        type: DSL_EXPORT_CHECK,
+        payload: {
+          data: [{ id: 'env-1' }, { id: 'env-2' }],
+        },
+      })
+    })
+
+    expect(await screen.findByTestId('dsl-export-confirm-modal')).toHaveAttribute('data-env-count', '2')
+
+    await user.click(screen.getByRole('button', { name: /confirm-export-dsl/i }))
+    await user.click(screen.getByRole('button', { name: /close-export-dsl/i }))
+
+    expect(mockHandleExportDSL).toHaveBeenCalled()
+    expect(screen.queryByTestId('dsl-export-confirm-modal')).not.toBeInTheDocument()
+  })
+
+  it('should ignore unrelated workflow events when listening for DSL export checks', async () => {
+    render(<WorkflowChildren />)
+
+    await act(async () => {
+      eventSubscription?.({
+        type: 'UNRELATED_EVENT',
+        payload: {
+          data: [{ id: 'env-1' }],
+        },
+      })
+    })
+
+    expect(screen.queryByTestId('dsl-export-confirm-modal')).not.toBeInTheDocument()
+  })
+
+  it('should close onboarding through the onboarding hook callback', async () => {
+    const user = userEvent.setup()
+    workflowStoreState = {
+      ...workflowStoreState,
+      showOnboarding: true,
+    }
+
+    render(<WorkflowChildren />)
+
+    expect(await screen.findByTestId('workflow-onboarding-modal')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: /close-onboarding/i }))
+
+    expect(mockHandleOnboardingClose).toHaveBeenCalled()
+  })
+
+  it('should create a start node, sync draft, and auto-generate webhook url after selecting a start node', async () => {
+    const user = userEvent.setup()
+    workflowStoreState = {
+      ...workflowStoreState,
+      showOnboarding: true,
+    }
+
+    render(<WorkflowChildren />)
+
+    await user.click(await screen.findByRole('button', { name: /^select-start-node$/i }))
+
+    expect(lastGenerateNodeInput).toMatchObject({
+      data: {
+        title: 'Start Title',
+        desc: 'Start description',
+        config: {
+          image: false,
+        },
+      },
+    })
+    expect(mockSetNodes).toHaveBeenCalledWith([expect.objectContaining({ id: 'new-node-id' })])
+    expect(mockSetEdges).toHaveBeenCalledWith([])
+    expect(mockSetShowOnboarding).toHaveBeenCalledWith(false)
+    expect(mockSetHasSelectedStartNode).toHaveBeenCalledWith(true)
+    expect(mockSetShouldAutoOpenStartNodeSelector).toHaveBeenCalledWith(true)
+    expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledWith(true, false, expect.any(Object))
+    expect(mockAutoGenerateWebhookUrl).toHaveBeenCalledWith('new-node-id')
+  })
+
+  it('should merge non-trigger start node config directly into the default node data', async () => {
+    const user = userEvent.setup()
+    workflowStoreState = {
+      ...workflowStoreState,
+      showOnboarding: true,
+    }
+
+    render(<WorkflowChildren />)
+
+    await user.click(await screen.findByRole('button', { name: /select-start-node-with-config/i }))
+
+    expect(lastGenerateNodeInput).toMatchObject({
+      data: {
+        title: 'Configured Start Title',
+        desc: 'Configured Start Description',
+        config: {
+          image: true,
+          custom: 'config',
+        },
+        extra: 'field',
+      },
+    })
+  })
+
+  it('should merge trigger plugin defaults and config before creating the node', async () => {
+    const user = userEvent.setup()
+    workflowStoreState = {
+      ...workflowStoreState,
+      showOnboarding: true,
+    }
+
+    render(<WorkflowChildren />)
+
+    await user.click(await screen.findByRole('button', { name: /^select-trigger-plugin$/i }))
+
+    expect(lastGenerateNodeInput).toMatchObject({
+      data: {
+        plugin_id: 'plugin-id',
+        provider_id: 'provider-name',
+        provider_name: 'provider-name',
+        provider_type: 'tool',
+        event_name: 'event-name',
+        event_label: 'Event Label',
+        event_description: 'Event Description',
+        title: 'Event Label',
+        desc: 'Event Description',
+        output_schema: { output: true },
+        parameters_schema: [{ name: 'api_key' }],
+        config: {
+          baseConfig: 'base',
+          token: 'abc',
+        },
+        subscription_id: 'subscription-id',
+        plugin_unique_identifier: 'plugin-unique',
+        is_team_authorization: true,
+        meta: { source: 'plugin' },
+      },
+    })
+  })
+
+  it('should fall back to plugin default title and description when trigger labels are missing', async () => {
+    const user = userEvent.setup()
+    workflowStoreState = {
+      ...workflowStoreState,
+      showOnboarding: true,
+    }
+
+    render(<WorkflowChildren />)
+
+    await user.click(await screen.findByRole('button', { name: /select-trigger-plugin-fallback/i }))
+
+    expect(lastGenerateNodeInput).toMatchObject({
+      data: {
+        title: 'Plugin title',
+        desc: 'Plugin description',
+        parameters_schema: [],
+        config: {
+          baseConfig: 'base',
+        },
+      },
+    })
+  })
+})

web/app/components/workflow-app/components/__tests__/workflow-main.spec.tsx

@@ -0,0 +1,277 @@
+import type { ReactNode } from 'react'
+import type { WorkflowProps } from '@/app/components/workflow'
+import { fireEvent, render, screen } from '@testing-library/react'
+import WorkflowMain from '../workflow-main'
+
+const mockSetFeatures = vi.fn()
+const mockSetConversationVariables = vi.fn()
+const mockSetEnvironmentVariables = vi.fn()
+
+const hookFns = {
+  doSyncWorkflowDraft: vi.fn(),
+  syncWorkflowDraftWhenPageClose: vi.fn(),
+  handleRefreshWorkflowDraft: vi.fn(),
+  handleBackupDraft: vi.fn(),
+  handleLoadBackupDraft: vi.fn(),
+  handleRestoreFromPublishedWorkflow: vi.fn(),
+  handleRun: vi.fn(),
+  handleStopRun: vi.fn(),
+  handleStartWorkflowRun: vi.fn(),
+  handleWorkflowStartRunInChatflow: vi.fn(),
+  handleWorkflowStartRunInWorkflow: vi.fn(),
+  handleWorkflowTriggerScheduleRunInWorkflow: vi.fn(),
+  handleWorkflowTriggerWebhookRunInWorkflow: vi.fn(),
+  handleWorkflowTriggerPluginRunInWorkflow: vi.fn(),
+  handleWorkflowRunAllTriggersInWorkflow: vi.fn(),
+  getWorkflowRunAndTraceUrl: vi.fn(),
+  exportCheck: vi.fn(),
+  handleExportDSL: vi.fn(),
+  fetchInspectVars: vi.fn(),
+  hasNodeInspectVars: vi.fn(),
+  hasSetInspectVar: vi.fn(),
+  fetchInspectVarValue: vi.fn(),
+  editInspectVarValue: vi.fn(),
+  renameInspectVarName: vi.fn(),
+  appendNodeInspectVars: vi.fn(),
+  deleteInspectVar: vi.fn(),
+  deleteNodeInspectorVars: vi.fn(),
+  deleteAllInspectorVars: vi.fn(),
+  isInspectVarEdited: vi.fn(),
+  resetToLastRunVar: vi.fn(),
+  invalidateSysVarValues: vi.fn(),
+  resetConversationVar: vi.fn(),
+  invalidateConversationVarValues: vi.fn(),
+}
+
+let capturedContextProps: Record<string, unknown> | null = null
+
+type MockWorkflowWithInnerContextProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport' | 'onWorkflowDataUpdate'> & {
+  hooksStore?: Record<string, unknown>
+  children?: ReactNode
+}
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeaturesStore: () => ({
+    getState: () => ({
+      setFeatures: mockSetFeatures,
+    }),
+  }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => ({
+      setConversationVariables: mockSetConversationVariables,
+      setEnvironmentVariables: mockSetEnvironmentVariables,
+    }),
+  }),
+}))
+
+vi.mock('@/app/components/workflow', () => ({
+  WorkflowWithInnerContext: ({
+    nodes,
+    edges,
+    viewport,
+    onWorkflowDataUpdate,
+    hooksStore,
+    children,
+  }: MockWorkflowWithInnerContextProps) => {
+    capturedContextProps = {
+      nodes,
+      edges,
+      viewport,
+      hooksStore,
+    }
+    return (
+      <div data-testid="workflow-inner-context">
+        <button
+          type="button"
+          onClick={() => onWorkflowDataUpdate?.({
+            features: { file: { enabled: true } },
+            conversation_variables: [{ id: 'conversation-1' }],
+            environment_variables: [{ id: 'env-1' }],
+          })}
+        >
+          update-workflow-data
+        </button>
+        <button
+          type="button"
+          onClick={() => onWorkflowDataUpdate?.({
+            conversation_variables: [{ id: 'conversation-only' }],
+          })}
+        >
+          update-conversation-only
+        </button>
+        <button
+          type="button"
+          onClick={() => onWorkflowDataUpdate?.({})}
+        >
+          update-empty-payload
+        </button>
+        {children}
+      </div>
+    )
+  },
+}))
+
+vi.mock('@/app/components/workflow-app/hooks', () => ({
+  useAvailableNodesMetaData: () => ({ nodes: [{ id: 'start' }], nodesMap: { start: { id: 'start' } } }),
+  useConfigsMap: () => ({ flowId: 'app-1', flowType: 'app-flow', fileSettings: { enabled: true } }),
+  useDSL: () => ({ exportCheck: hookFns.exportCheck, handleExportDSL: hookFns.handleExportDSL }),
+  useGetRunAndTraceUrl: () => ({ getWorkflowRunAndTraceUrl: hookFns.getWorkflowRunAndTraceUrl }),
+  useInspectVarsCrud: () => ({
+    hasNodeInspectVars: hookFns.hasNodeInspectVars,
+    hasSetInspectVar: hookFns.hasSetInspectVar,
+    fetchInspectVarValue: hookFns.fetchInspectVarValue,
+    editInspectVarValue: hookFns.editInspectVarValue,
+    renameInspectVarName: hookFns.renameInspectVarName,
+    appendNodeInspectVars: hookFns.appendNodeInspectVars,
+    deleteInspectVar: hookFns.deleteInspectVar,
+    deleteNodeInspectorVars: hookFns.deleteNodeInspectorVars,
+    deleteAllInspectorVars: hookFns.deleteAllInspectorVars,
+    isInspectVarEdited: hookFns.isInspectVarEdited,
+    resetToLastRunVar: hookFns.resetToLastRunVar,
+    invalidateSysVarValues: hookFns.invalidateSysVarValues,
+    resetConversationVar: hookFns.resetConversationVar,
+    invalidateConversationVarValues: hookFns.invalidateConversationVarValues,
+  }),
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: hookFns.doSyncWorkflowDraft,
+    syncWorkflowDraftWhenPageClose: hookFns.syncWorkflowDraftWhenPageClose,
+  }),
+  useSetWorkflowVarsWithValue: () => ({
+    fetchInspectVars: hookFns.fetchInspectVars,
+  }),
+  useWorkflowRefreshDraft: () => ({ handleRefreshWorkflowDraft: hookFns.handleRefreshWorkflowDraft }),
+  useWorkflowRun: () => ({
+    handleBackupDraft: hookFns.handleBackupDraft,
+    handleLoadBackupDraft: hookFns.handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow: hookFns.handleRestoreFromPublishedWorkflow,
+    handleRun: hookFns.handleRun,
+    handleStopRun: hookFns.handleStopRun,
+  }),
+  useWorkflowStartRun: () => ({
+    handleStartWorkflowRun: hookFns.handleStartWorkflowRun,
+    handleWorkflowStartRunInChatflow: hookFns.handleWorkflowStartRunInChatflow,
+    handleWorkflowStartRunInWorkflow: hookFns.handleWorkflowStartRunInWorkflow,
+    handleWorkflowTriggerScheduleRunInWorkflow: hookFns.handleWorkflowTriggerScheduleRunInWorkflow,
+    handleWorkflowTriggerWebhookRunInWorkflow: hookFns.handleWorkflowTriggerWebhookRunInWorkflow,
+    handleWorkflowTriggerPluginRunInWorkflow: hookFns.handleWorkflowTriggerPluginRunInWorkflow,
+    handleWorkflowRunAllTriggersInWorkflow: hookFns.handleWorkflowRunAllTriggersInWorkflow,
+  }),
+}))
+
+vi.mock('../workflow-children', () => ({
+  default: () => <div data-testid="workflow-children">workflow-children</div>,
+}))
+
+describe('WorkflowMain', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedContextProps = null
+  })
+
+  it('should render the inner workflow context with children and forwarded graph props', () => {
+    const nodes = [{ id: 'node-1' }]
+    const edges = [{ id: 'edge-1' }]
+    const viewport = { x: 1, y: 2, zoom: 1.5 }
+
+    render(
+      <WorkflowMain
+        nodes={nodes as never}
+        edges={edges as never}
+        viewport={viewport}
+      />,
+    )
+
+    expect(screen.getByTestId('workflow-inner-context')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-children')).toBeInTheDocument()
+    expect(capturedContextProps).toMatchObject({
+      nodes,
+      edges,
+      viewport,
+    })
+  })
+
+  it('should update features and workflow variables when workflow data changes', () => {
+    render(
+      <WorkflowMain
+        nodes={[]}
+        edges={[]}
+        viewport={{ x: 0, y: 0, zoom: 1 }}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /update-workflow-data/i }))
+
+    expect(mockSetFeatures).toHaveBeenCalledWith({ file: { enabled: true } })
+    expect(mockSetConversationVariables).toHaveBeenCalledWith([{ id: 'conversation-1' }])
+    expect(mockSetEnvironmentVariables).toHaveBeenCalledWith([{ id: 'env-1' }])
+  })
+
+  it('should only update the workflow store slices present in the payload', () => {
+    render(
+      <WorkflowMain
+        nodes={[]}
+        edges={[]}
+        viewport={{ x: 0, y: 0, zoom: 1 }}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /update-conversation-only/i }))
+
+    expect(mockSetConversationVariables).toHaveBeenCalledWith([{ id: 'conversation-only' }])
+    expect(mockSetFeatures).not.toHaveBeenCalled()
+    expect(mockSetEnvironmentVariables).not.toHaveBeenCalled()
+  })
+
+  it('should ignore empty workflow data updates', () => {
+    render(
+      <WorkflowMain
+        nodes={[]}
+        edges={[]}
+        viewport={{ x: 0, y: 0, zoom: 1 }}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /update-empty-payload/i }))
+
+    expect(mockSetFeatures).not.toHaveBeenCalled()
+    expect(mockSetConversationVariables).not.toHaveBeenCalled()
+    expect(mockSetEnvironmentVariables).not.toHaveBeenCalled()
+  })
+
+  it('should expose the composed workflow action hooks through hooksStore', () => {
+    render(
+      <WorkflowMain
+        nodes={[]}
+        edges={[]}
+        viewport={{ x: 0, y: 0, zoom: 1 }}
+      />,
+    )
+
+    expect(capturedContextProps?.hooksStore).toMatchObject({
+      syncWorkflowDraftWhenPageClose: hookFns.syncWorkflowDraftWhenPageClose,
+      doSyncWorkflowDraft: hookFns.doSyncWorkflowDraft,
+      handleRefreshWorkflowDraft: hookFns.handleRefreshWorkflowDraft,
+      handleBackupDraft: hookFns.handleBackupDraft,
+      handleLoadBackupDraft: hookFns.handleLoadBackupDraft,
+      handleRestoreFromPublishedWorkflow: hookFns.handleRestoreFromPublishedWorkflow,
+      handleRun: hookFns.handleRun,
+      handleStopRun: hookFns.handleStopRun,
+      handleStartWorkflowRun: hookFns.handleStartWorkflowRun,
+      handleWorkflowStartRunInChatflow: hookFns.handleWorkflowStartRunInChatflow,
+      handleWorkflowStartRunInWorkflow: hookFns.handleWorkflowStartRunInWorkflow,
+      handleWorkflowTriggerScheduleRunInWorkflow: hookFns.handleWorkflowTriggerScheduleRunInWorkflow,
+      handleWorkflowTriggerWebhookRunInWorkflow: hookFns.handleWorkflowTriggerWebhookRunInWorkflow,
+      handleWorkflowTriggerPluginRunInWorkflow: hookFns.handleWorkflowTriggerPluginRunInWorkflow,
+      handleWorkflowRunAllTriggersInWorkflow: hookFns.handleWorkflowRunAllTriggersInWorkflow,
+      availableNodesMetaData: { nodes: [{ id: 'start' }], nodesMap: { start: { id: 'start' } } },
+      getWorkflowRunAndTraceUrl: hookFns.getWorkflowRunAndTraceUrl,
+      exportCheck: hookFns.exportCheck,
+      handleExportDSL: hookFns.handleExportDSL,
+      fetchInspectVars: hookFns.fetchInspectVars,
+      configsMap: { flowId: 'app-1', flowType: 'app-flow', fileSettings: { enabled: true } },
+    })
+  })
+})

web/app/components/workflow-app/components/__tests__/workflow-panel.spec.tsx

@@ -0,0 +1,214 @@
+import type { ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import WorkflowPanel from '../workflow-panel'
+
+type AppStoreState = {
+  appDetail?: {
+    id?: string
+    workflow?: {
+      id?: string
+    }
+  }
+  currentLogItem?: { id: string }
+  setCurrentLogItem: (item?: { id: string }) => void
+  showMessageLogModal: boolean
+  setShowMessageLogModal: (show: boolean) => void
+  currentLogModalActiveTab?: string
+}
+
+type WorkflowStoreState = {
+  historyWorkflowData?: Record<string, unknown>
+  showDebugAndPreviewPanel: boolean
+  showChatVariablePanel: boolean
+  showGlobalVariablePanel: boolean
+}
+
+const mockUseIsChatMode = vi.fn()
+const mockSetCurrentLogItem = vi.fn()
+const mockSetShowMessageLogModal = vi.fn()
+
+let appStoreState: AppStoreState
+let workflowStoreState: WorkflowStoreState
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: <T,>(selector: (state: AppStoreState) => T) => selector(appStoreState),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: <T,>(selector: (state: WorkflowStoreState) => T) => selector(workflowStoreState),
+}))
+
+vi.mock('@/app/components/workflow/panel', () => ({
+  default: ({
+    components,
+    versionHistoryPanelProps,
+  }: {
+    components?: {
+      left?: ReactNode
+      right?: ReactNode
+    }
+    versionHistoryPanelProps?: {
+      getVersionListUrl: string
+      deleteVersionUrl: (versionId: string) => string
+      restoreVersionUrl: (versionId: string) => string
+      updateVersionUrl: (versionId: string) => string
+      latestVersionId?: string
+    }
+  }) => (
+    <div
+      data-testid="panel"
+      data-version-list-url={versionHistoryPanelProps?.getVersionListUrl ?? ''}
+      data-delete-version-url={versionHistoryPanelProps?.deleteVersionUrl('version-1') ?? ''}
+      data-restore-version-url={versionHistoryPanelProps?.restoreVersionUrl('version-1') ?? ''}
+      data-update-version-url={versionHistoryPanelProps?.updateVersionUrl('version-1') ?? ''}
+      data-latest-version-id={versionHistoryPanelProps?.latestVersionId ?? ''}
+    >
+      <div data-testid="panel-left">{components?.left}</div>
+      <div data-testid="panel-right">{components?.right}</div>
+    </div>
+  ),
+}))
+
+vi.mock('@/next/dynamic', () => ({
+  default: (loader: () => Promise<{ default: React.ComponentType<Record<string, unknown>> }>) => {
+    const LazyComp = React.lazy(loader)
+    return function DynamicWrapper(props: Record<string, unknown>) {
+      return React.createElement(
+        React.Suspense,
+        { fallback: null },
+        React.createElement(LazyComp, props),
+      )
+    }
+  },
+}))
+
+vi.mock('@/app/components/base/message-log-modal', () => ({
+  default: ({
+    currentLogItem,
+    defaultTab,
+    onCancel,
+  }: {
+    currentLogItem?: { id: string }
+    defaultTab?: string
+    onCancel: () => void
+  }) => (
+    <div data-testid="message-log-modal" data-current-log-id={currentLogItem?.id ?? ''} data-default-tab={defaultTab ?? ''}>
+      <button type="button" onClick={onCancel}>close-message-log</button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/panel/record', () => ({
+  default: () => <div data-testid="record-panel">record</div>,
+}))
+
+vi.mock('@/app/components/workflow/panel/chat-record', () => ({
+  default: () => <div data-testid="chat-record-panel">chat-record</div>,
+}))
+
+vi.mock('@/app/components/workflow/panel/debug-and-preview', () => ({
+  default: () => <div data-testid="debug-and-preview-panel">debug</div>,
+}))
+
+vi.mock('@/app/components/workflow/panel/workflow-preview', () => ({
+  default: () => <div data-testid="workflow-preview-panel">preview</div>,
+}))
+
+vi.mock('@/app/components/workflow/panel/chat-variable-panel', () => ({
+  default: () => <div data-testid="chat-variable-panel">chat-variable</div>,
+}))
+
+vi.mock('@/app/components/workflow/panel/global-variable-panel', () => ({
+  default: () => <div data-testid="global-variable-panel">global-variable</div>,
+}))
+
+vi.mock('@/app/components/workflow-app/hooks', () => ({
+  useIsChatMode: () => mockUseIsChatMode(),
+}))
+
+describe('WorkflowPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    appStoreState = {
+      appDetail: {
+        id: 'app-123',
+        workflow: {
+          id: 'workflow-version-id',
+        },
+      },
+      currentLogItem: { id: 'log-1' },
+      setCurrentLogItem: mockSetCurrentLogItem,
+      showMessageLogModal: false,
+      setShowMessageLogModal: mockSetShowMessageLogModal,
+      currentLogModalActiveTab: 'detail',
+    }
+    workflowStoreState = {
+      historyWorkflowData: undefined,
+      showDebugAndPreviewPanel: false,
+      showChatVariablePanel: false,
+      showGlobalVariablePanel: false,
+    }
+    mockUseIsChatMode.mockReturnValue(false)
+  })
+
+  it('should configure workflow version history urls and latest version id for the panel shell', async () => {
+    render(<WorkflowPanel />)
+
+    const panel = await screen.findByTestId('panel')
+    expect(panel).toHaveAttribute('data-version-list-url', '/apps/app-123/workflows')
+    expect(panel).toHaveAttribute('data-delete-version-url', '/apps/app-123/workflows/version-1')
+    expect(panel).toHaveAttribute('data-restore-version-url', '/apps/app-123/workflows/version-1/restore')
+    expect(panel).toHaveAttribute('data-update-version-url', '/apps/app-123/workflows/version-1')
+    expect(panel).toHaveAttribute('data-latest-version-id', 'workflow-version-id')
+  })
+
+  it('should render and close the message log modal from the left panel slot', async () => {
+    const user = userEvent.setup()
+    appStoreState = {
+      ...appStoreState,
+      showMessageLogModal: true,
+    }
+
+    render(<WorkflowPanel />)
+
+    expect(await screen.findByTestId('message-log-modal')).toHaveAttribute('data-current-log-id', 'log-1')
+    expect(screen.getByTestId('message-log-modal')).toHaveAttribute('data-default-tab', 'detail')
+
+    await user.click(screen.getByRole('button', { name: /close-message-log/i }))
+
+    expect(mockSetCurrentLogItem).toHaveBeenCalledWith()
+    expect(mockSetShowMessageLogModal).toHaveBeenCalledWith(false)
+  })
+
+  it('should switch right-side workflow panels based on chat mode and workflow state', async () => {
+    workflowStoreState = {
+      historyWorkflowData: { id: 'history-1' },
+      showDebugAndPreviewPanel: true,
+      showChatVariablePanel: true,
+      showGlobalVariablePanel: true,
+    }
+    mockUseIsChatMode.mockReturnValue(true)
+
+    const { unmount } = render(<WorkflowPanel />)
+
+    expect(await screen.findByTestId('chat-record-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('debug-and-preview-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('chat-variable-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('global-variable-panel')).toBeInTheDocument()
+    expect(screen.queryByTestId('record-panel')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('workflow-preview-panel')).not.toBeInTheDocument()
+
+    unmount()
+    mockUseIsChatMode.mockReturnValue(false)
+    render(<WorkflowPanel />)
+
+    expect(await screen.findByTestId('record-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-preview-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('global-variable-panel')).toBeInTheDocument()
+    expect(screen.queryByTestId('chat-record-panel')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('debug-and-preview-panel')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('chat-variable-panel')).not.toBeInTheDocument()
+  })
+})

web/app/components/workflow-app/components/workflow-header/__tests__/features-trigger.spec.tsx

@@ -149,6 +149,7 @@ const createProviderContext = ({
 
 const renderWithToast = (ui: ReactElement) => {
   return render(
+    // eslint-disable-next-line react/no-context-provider
     <ToastContext.Provider value={{ notify: mockNotify, close: vi.fn() }}>
       {ui}
     </ToastContext.Provider>,
@@ -445,6 +446,27 @@ describe('FeaturesTrigger', () => {
       })
     })
 
+    it('should skip success side effects when publish mutation returns no workflow version', async () => {
+      // Arrange
+      const user = userEvent.setup()
+      mockPublishWorkflow.mockResolvedValue(null)
+      renderWithToast(<FeaturesTrigger />)
+
+      // Act
+      await user.click(screen.getByRole('button', { name: 'publisher-publish' }))
+
+      // Assert
+      await waitFor(() => {
+        expect(mockPublishWorkflow).toHaveBeenCalled()
+      })
+      expect(mockNotify).not.toHaveBeenCalledWith({ type: 'success', message: 'common.api.actionSuccess' })
+      expect(mockUpdatePublishedWorkflow).not.toHaveBeenCalled()
+      expect(mockInvalidateAppTriggers).not.toHaveBeenCalled()
+      expect(mockSetPublishedAt).not.toHaveBeenCalled()
+      expect(mockSetLastPublishedHasUserInput).not.toHaveBeenCalled()
+      expect(mockResetWorkflowVersionHistory).not.toHaveBeenCalled()
+    })
+
     it('should log error when app detail refresh fails after publish', async () => {
       // Arrange
       const user = userEvent.setup()

web/app/components/workflow-app/hooks/__tests__/index.spec.ts

@@ -0,0 +1,18 @@
+import * as hooks from '../index'
+
+describe('workflow-app hooks index', () => {
+  it('should re-export workflow-app hooks', () => {
+    expect(hooks.useAvailableNodesMetaData).toBeTypeOf('function')
+    expect(hooks.useConfigsMap).toBeTypeOf('function')
+    expect(hooks.useDSL).toBeTypeOf('function')
+    expect(hooks.useGetRunAndTraceUrl).toBeTypeOf('function')
+    expect(hooks.useInspectVarsCrud).toBeTypeOf('function')
+    expect(hooks.useIsChatMode).toBeTypeOf('function')
+    expect(hooks.useNodesSyncDraft).toBeTypeOf('function')
+    expect(hooks.useWorkflowInit).toBeTypeOf('function')
+    expect(hooks.useWorkflowRefreshDraft).toBeTypeOf('function')
+    expect(hooks.useWorkflowRun).toBeTypeOf('function')
+    expect(hooks.useWorkflowStartRun).toBeTypeOf('function')
+    expect(hooks.useWorkflowTemplate).toBeTypeOf('function')
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-DSL.spec.ts

@@ -0,0 +1,206 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
+import { useDSL } from '../use-DSL'
+
+const mockNotify = vi.fn()
+const mockEmit = vi.fn()
+const mockDoSyncWorkflowDraft = vi.fn()
+const mockExportAppConfig = vi.fn()
+const mockFetchWorkflowDraft = vi.fn()
+const mockDownloadBlob = vi.fn()
+
+let appStoreState: {
+  appDetail?: {
+    id: string
+    name: string
+  }
+}
+
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({ notify: mockNotify }),
+}))
+
+vi.mock('@/context/event-emitter', () => ({
+  useEventEmitterContextContext: () => ({
+    eventEmitter: {
+      emit: mockEmit,
+    },
+  }),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: <T>(selector: (state: typeof appStoreState) => T) => selector(appStoreState),
+}))
+
+vi.mock('../use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: mockDoSyncWorkflowDraft,
+  }),
+}))
+
+vi.mock('@/service/apps', () => ({
+  exportAppConfig: (...args: unknown[]) => mockExportAppConfig(...args),
+}))
+
+vi.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: (...args: unknown[]) => mockFetchWorkflowDraft(...args),
+}))
+
+vi.mock('@/utils/download', () => ({
+  downloadBlob: (...args: unknown[]) => mockDownloadBlob(...args),
+}))
+
+const createDeferred = <T>() => {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((res) => {
+    resolve = res
+  })
+  return { promise, resolve }
+}
+
+describe('useDSL', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    appStoreState = {
+      appDetail: {
+        id: 'app-1',
+        name: 'Workflow App',
+      },
+    }
+    mockDoSyncWorkflowDraft.mockResolvedValue(undefined)
+    mockExportAppConfig.mockResolvedValue({ data: 'yaml-content' })
+    mockFetchWorkflowDraft.mockResolvedValue({ environment_variables: [] })
+  })
+
+  it('should export workflow dsl and download the yaml blob when no secret env is present', async () => {
+    const { result } = renderHook(() => useDSL())
+
+    await act(async () => {
+      await result.current.exportCheck()
+    })
+
+    expect(mockFetchWorkflowDraft).toHaveBeenCalledWith('/apps/app-1/workflows/draft')
+    expect(mockDoSyncWorkflowDraft).toHaveBeenCalled()
+    expect(mockExportAppConfig).toHaveBeenCalledWith({
+      appID: 'app-1',
+      include: false,
+      workflowID: undefined,
+    })
+    expect(mockDownloadBlob).toHaveBeenCalledWith(expect.objectContaining({
+      data: expect.any(Blob),
+      fileName: 'Workflow App.yml',
+    }))
+  })
+
+  it('should forward include and workflow id arguments when exporting dsl directly', async () => {
+    const { result } = renderHook(() => useDSL())
+
+    await act(async () => {
+      await result.current.handleExportDSL(true, 'workflow-1')
+    })
+
+    expect(mockExportAppConfig).toHaveBeenCalledWith({
+      appID: 'app-1',
+      include: true,
+      workflowID: 'workflow-1',
+    })
+  })
+
+  it('should emit DSL_EXPORT_CHECK when secret environment variables exist', async () => {
+    const secretVars = [{ id: 'env-1', value_type: 'secret', value: 'secret-token' }]
+    mockFetchWorkflowDraft.mockResolvedValue({ environment_variables: secretVars })
+
+    const { result } = renderHook(() => useDSL())
+
+    await act(async () => {
+      await result.current.exportCheck()
+    })
+
+    expect(mockEmit).toHaveBeenCalledWith({
+      type: DSL_EXPORT_CHECK,
+      payload: {
+        data: secretVars,
+      },
+    })
+    expect(mockExportAppConfig).not.toHaveBeenCalled()
+  })
+
+  it('should return early when app detail is unavailable', async () => {
+    appStoreState = {}
+
+    const { result } = renderHook(() => useDSL())
+
+    await act(async () => {
+      await result.current.exportCheck()
+      await result.current.handleExportDSL()
+    })
+
+    expect(mockFetchWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockExportAppConfig).not.toHaveBeenCalled()
+    expect(mockEmit).not.toHaveBeenCalled()
+  })
+
+  it('should notify when export fails', async () => {
+    mockExportAppConfig.mockRejectedValue(new Error('export failed'))
+
+    const { result } = renderHook(() => useDSL())
+
+    await act(async () => {
+      await result.current.handleExportDSL()
+    })
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'app.exportFailed',
+      })
+    })
+  })
+
+  it('should notify when exportCheck cannot load the workflow draft', async () => {
+    mockFetchWorkflowDraft.mockRejectedValue(new Error('draft fetch failed'))
+
+    const { result } = renderHook(() => useDSL())
+
+    await act(async () => {
+      await result.current.exportCheck()
+    })
+
+    await waitFor(() => {
+      expect(mockNotify).toHaveBeenCalledWith({
+        type: 'error',
+        message: 'app.exportFailed',
+      })
+    })
+    expect(mockExportAppConfig).not.toHaveBeenCalled()
+  })
+
+  it('should ignore repeated export attempts while an export is already in progress', async () => {
+    const deferred = createDeferred<{ data: string }>()
+    mockExportAppConfig.mockReturnValue(deferred.promise)
+
+    const { result } = renderHook(() => useDSL())
+    let firstExportPromise!: Promise<void>
+
+    act(() => {
+      firstExportPromise = result.current.handleExportDSL()
+    })
+
+    await waitFor(() => {
+      expect(mockDoSyncWorkflowDraft).toHaveBeenCalledTimes(1)
+      expect(mockExportAppConfig).toHaveBeenCalledTimes(1)
+    })
+
+    act(() => {
+      void result.current.handleExportDSL()
+    })
+
+    expect(mockExportAppConfig).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      deferred.resolve({ data: 'yaml-content' })
+      await firstExportPromise
+    })
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-auto-onboarding.spec.ts

@@ -0,0 +1,118 @@
+import { act, renderHook } from '@testing-library/react'
+import { useAutoOnboarding } from '../use-auto-onboarding'
+
+const mockGetNodes = vi.fn()
+const mockWorkflowStore = {
+  getState: vi.fn(),
+}
+
+const mockSetShowOnboarding = vi.fn()
+const mockSetHasShownOnboarding = vi.fn()
+const mockSetShouldAutoOpenStartNodeSelector = vi.fn()
+const mockSetHasSelectedStartNode = vi.fn()
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({
+    getState: () => ({
+      getNodes: mockGetNodes,
+    }),
+  }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => mockWorkflowStore,
+}))
+
+describe('useAutoOnboarding', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    mockGetNodes.mockReturnValue([])
+    mockWorkflowStore.getState.mockReturnValue({
+      showOnboarding: false,
+      hasShownOnboarding: false,
+      notInitialWorkflow: false,
+      setShowOnboarding: mockSetShowOnboarding,
+      setHasShownOnboarding: mockSetHasShownOnboarding,
+      setShouldAutoOpenStartNodeSelector: mockSetShouldAutoOpenStartNodeSelector,
+      hasSelectedStartNode: false,
+      setHasSelectedStartNode: mockSetHasSelectedStartNode,
+    })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should open onboarding after the delayed empty-canvas check on mount', () => {
+    renderHook(() => useAutoOnboarding())
+
+    act(() => {
+      vi.advanceTimersByTime(500)
+    })
+
+    expect(mockSetShowOnboarding).toHaveBeenCalledWith(true)
+    expect(mockSetHasShownOnboarding).toHaveBeenCalledWith(true)
+    expect(mockSetShouldAutoOpenStartNodeSelector).toHaveBeenCalledWith(true)
+  })
+
+  it('should skip auto onboarding when it is already visible or the workflow is not initial', () => {
+    mockWorkflowStore.getState.mockReturnValue({
+      showOnboarding: true,
+      hasShownOnboarding: false,
+      notInitialWorkflow: true,
+      setShowOnboarding: mockSetShowOnboarding,
+      setHasShownOnboarding: mockSetHasShownOnboarding,
+      setShouldAutoOpenStartNodeSelector: mockSetShouldAutoOpenStartNodeSelector,
+      hasSelectedStartNode: false,
+      setHasSelectedStartNode: mockSetHasSelectedStartNode,
+    })
+
+    renderHook(() => useAutoOnboarding())
+
+    act(() => {
+      vi.advanceTimersByTime(500)
+    })
+
+    expect(mockSetShowOnboarding).not.toHaveBeenCalled()
+    expect(mockSetHasShownOnboarding).not.toHaveBeenCalled()
+    expect(mockSetShouldAutoOpenStartNodeSelector).not.toHaveBeenCalled()
+  })
+
+  it('should close onboarding and reset selected start node state when one was chosen', () => {
+    mockWorkflowStore.getState.mockReturnValue({
+      showOnboarding: false,
+      hasShownOnboarding: true,
+      notInitialWorkflow: false,
+      setShowOnboarding: mockSetShowOnboarding,
+      setHasShownOnboarding: mockSetHasShownOnboarding,
+      setShouldAutoOpenStartNodeSelector: mockSetShouldAutoOpenStartNodeSelector,
+      hasSelectedStartNode: true,
+      setHasSelectedStartNode: mockSetHasSelectedStartNode,
+    })
+
+    const { result } = renderHook(() => useAutoOnboarding())
+
+    act(() => {
+      result.current.handleOnboardingClose()
+    })
+
+    expect(mockSetShowOnboarding).toHaveBeenCalledWith(false)
+    expect(mockSetHasShownOnboarding).toHaveBeenCalledWith(true)
+    expect(mockSetHasSelectedStartNode).toHaveBeenCalledWith(false)
+    expect(mockSetShouldAutoOpenStartNodeSelector).not.toHaveBeenCalled()
+  })
+
+  it('should close onboarding and disable auto-open when no start node was selected', () => {
+    const { result } = renderHook(() => useAutoOnboarding())
+
+    act(() => {
+      result.current.handleOnboardingClose()
+    })
+
+    expect(mockSetShowOnboarding).toHaveBeenCalledWith(false)
+    expect(mockSetHasShownOnboarding).toHaveBeenCalledWith(true)
+    expect(mockSetShouldAutoOpenStartNodeSelector).toHaveBeenCalledWith(false)
+    expect(mockSetHasSelectedStartNode).not.toHaveBeenCalled()
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-available-nodes-meta-data.spec.ts

@@ -0,0 +1,49 @@
+import { renderHook } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { useAvailableNodesMetaData } from '../use-available-nodes-meta-data'
+
+const mockUseIsChatMode = vi.fn()
+
+vi.mock('@/app/components/workflow-app/hooks/use-is-chat-mode', () => ({
+  useIsChatMode: () => mockUseIsChatMode(),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useDocLink: () => (path: string) => `/docs${path}`,
+}))
+
+describe('useAvailableNodesMetaData', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should include chat-specific nodes and make the start node undeletable in chat mode', () => {
+    mockUseIsChatMode.mockReturnValue(true)
+
+    const { result } = renderHook(() => useAvailableNodesMetaData())
+
+    expect(result.current.nodesMap?.[BlockEnum.Start]?.metaData.isUndeletable).toBe(true)
+    expect(result.current.nodesMap?.[BlockEnum.Answer]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.End]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerWebhook]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.VariableAssigner]).toBe(result.current.nodesMap?.[BlockEnum.VariableAggregator])
+    expect(result.current.nodesMap?.[BlockEnum.Start]?.metaData.helpLinkUri).toContain('/docs/use-dify/nodes/')
+  })
+
+  it('should include workflow-specific trigger and end nodes outside chat mode', () => {
+    mockUseIsChatMode.mockReturnValue(false)
+
+    const { result } = renderHook(() => useAvailableNodesMetaData())
+
+    expect(result.current.nodesMap?.[BlockEnum.Start]?.metaData.isUndeletable).toBe(false)
+    expect(result.current.nodesMap?.[BlockEnum.End]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerWebhook]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerSchedule]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.TriggerPlugin]).toBeDefined()
+    expect(result.current.nodesMap?.[BlockEnum.Answer]).toBeUndefined()
+    expect(result.current.nodesMap?.[BlockEnum.Start]?.defaultValue).toMatchObject({
+      type: BlockEnum.Start,
+      title: 'workflow.blocks.start',
+    })
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-configs-map.spec.ts

@@ -0,0 +1,40 @@
+import { renderHook } from '@testing-library/react'
+import { FlowType } from '@/types/common'
+import { useConfigsMap } from '../use-configs-map'
+
+const mockUseFeatures = vi.fn()
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeatures: (selector: (state: { features: { file: Record<string, unknown> } }) => unknown) => mockUseFeatures(selector),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: <T>(selector: (state: { appId: string }) => T) => selector({ appId: 'app-1' }),
+}))
+
+describe('useConfigsMap', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseFeatures.mockImplementation((selector: (state: { features: { file: Record<string, unknown> } }) => unknown) => selector({
+      features: {
+        file: {
+          enabled: true,
+          number_limits: 3,
+        },
+      },
+    }))
+  })
+
+  it('should map workflow app id and feature file settings into inspect-var configs', () => {
+    const { result } = renderHook(() => useConfigsMap())
+
+    expect(result.current).toEqual({
+      flowId: 'app-1',
+      flowType: FlowType.appFlow,
+      fileSettings: {
+        enabled: true,
+        number_limits: 3,
+      },
+    })
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-get-run-and-trace-url.spec.ts

@@ -0,0 +1,28 @@
+import { renderHook } from '@testing-library/react'
+import { useGetRunAndTraceUrl } from '../use-get-run-and-trace-url'
+
+const mockWorkflowStore = {
+  getState: vi.fn(),
+}
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => mockWorkflowStore,
+}))
+
+describe('useGetRunAndTraceUrl', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockWorkflowStore.getState.mockReturnValue({
+      appId: 'app-123',
+    })
+  })
+
+  it('should build workflow run and trace urls from the current app id', () => {
+    const { result } = renderHook(() => useGetRunAndTraceUrl())
+
+    expect(result.current.getWorkflowRunAndTraceUrl('run-1')).toEqual({
+      runUrl: '/apps/app-123/workflow-runs/run-1',
+      traceUrl: '/apps/app-123/workflow-runs/run-1/node-executions',
+    })
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-inspect-vars-crud.spec.ts

@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react'
+import { useInspectVarsCrud } from '../use-inspect-vars-crud'
+
+const mockUseInspectVarsCrudCommon = vi.fn()
+const mockUseConfigsMap = vi.fn()
+
+vi.mock('@/app/components/workflow/hooks/use-inspect-vars-crud-common', () => ({
+  useInspectVarsCrudCommon: (...args: unknown[]) => mockUseInspectVarsCrudCommon(...args),
+}))
+
+vi.mock('@/app/components/workflow-app/hooks/use-configs-map', () => ({
+  useConfigsMap: () => mockUseConfigsMap(),
+}))
+
+describe('useInspectVarsCrud', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseConfigsMap.mockReturnValue({
+      flowId: 'app-1',
+      flowType: 'app-flow',
+      fileSettings: { enabled: true },
+    })
+    mockUseInspectVarsCrudCommon.mockReturnValue({
+      fetchInspectVarValue: vi.fn(),
+      editInspectVarValue: vi.fn(),
+      deleteInspectVar: vi.fn(),
+    })
+  })
+
+  it('should call the shared inspect vars hook with workflow-app configs and return its api', () => {
+    const { result } = renderHook(() => useInspectVarsCrud())
+
+    expect(mockUseInspectVarsCrudCommon).toHaveBeenCalledWith({
+      flowId: 'app-1',
+      flowType: 'app-flow',
+      fileSettings: { enabled: true },
+    })
+    expect(result.current).toEqual({
+      fetchInspectVarValue: expect.any(Function),
+      editInspectVarValue: expect.any(Function),
+      deleteInspectVar: expect.any(Function),
+    })
+  })
+})

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

@@ -4,42 +4,57 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useNodesSyncDraft } from '../use-nodes-sync-draft'
 
 const mockGetNodes = vi.fn()
+const mockPostWithKeepalive = vi.fn()
+const mockSetSyncWorkflowDraftHash = vi.fn()
+const mockSetDraftUpdatedAt = vi.fn()
+const mockGetNodesReadOnly = vi.fn()
+
+let reactFlowState: {
+  getNodes: typeof mockGetNodes
+  edges: Array<Record<string, unknown>>
+  transform: [number, number, number]
+}
+
+let workflowStoreState: {
+  appId: string
+  isWorkflowDataLoaded: boolean
+  syncWorkflowDraftHash: string | null
+  environmentVariables: Array<Record<string, unknown>>
+  conversationVariables: Array<Record<string, unknown>>
+  setSyncWorkflowDraftHash: typeof mockSetSyncWorkflowDraftHash
+  setDraftUpdatedAt: typeof mockSetDraftUpdatedAt
+}
+
+let featuresState: {
+  features: {
+    opening: { enabled: boolean, opening_statement: string, suggested_questions: string[] }
+    suggested: Record<string, unknown>
+    text2speech: Record<string, unknown>
+    speech2text: Record<string, unknown>
+    citation: Record<string, unknown>
+    moderation: Record<string, unknown>
+    file: Record<string, unknown>
+  }
+}
+
 vi.mock('reactflow', () => ({
-  useStoreApi: () => ({ getState: () => ({ getNodes: mockGetNodes, edges: [], transform: [0, 0, 1] }) }),
+  useStoreApi: () => ({ getState: () => reactFlowState }),
 }))
 
 vi.mock('@/app/components/workflow/store', () => ({
   useWorkflowStore: () => ({
-    getState: () => ({
-      appId: 'app-1',
-      isWorkflowDataLoaded: true,
-      syncWorkflowDraftHash: 'hash-123',
-      environmentVariables: [],
-      conversationVariables: [],
-      setSyncWorkflowDraftHash: vi.fn(),
-      setDraftUpdatedAt: vi.fn(),
-    }),
+    getState: () => workflowStoreState,
   }),
 }))
 
 vi.mock('@/app/components/base/features/hooks', () => ({
   useFeaturesStore: () => ({
-    getState: () => ({
-      features: {
-        opening: { enabled: false, opening_statement: '', suggested_questions: [] },
-        suggested: {},
-        text2speech: {},
-        speech2text: {},
-        citation: {},
-        moderation: {},
-        file: {},
-      },
-    }),
+    getState: () => featuresState,
   }),
 }))
 
 vi.mock('@/app/components/workflow/hooks/use-workflow', () => ({
-  useNodesReadOnly: () => ({ getNodesReadOnly: () => false }),
+  useNodesReadOnly: () => ({ getNodesReadOnly: mockGetNodesReadOnly }),
 }))
 
 vi.mock('@/app/components/workflow/hooks/use-serial-async-callback', () => ({
@@ -55,7 +70,7 @@ vi.mock('@/service/workflow', () => ({
   syncWorkflowDraft: (p: unknown) => mockSyncWorkflowDraft(p),
 }))
 
-vi.mock('@/service/fetch', () => ({ postWithKeepalive: vi.fn() }))
+vi.mock('@/service/fetch', () => ({ postWithKeepalive: (...args: unknown[]) => mockPostWithKeepalive(...args) }))
 vi.mock('@/config', () => ({ API_PREFIX: '/api' }))
 
 const mockHandleRefreshWorkflowDraft = vi.fn()
@@ -66,6 +81,32 @@ vi.mock('@/app/components/workflow-app/hooks', () => ({
 describe('useNodesSyncDraft — handleRefreshWorkflowDraft(true) on 409', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    reactFlowState = {
+      getNodes: mockGetNodes,
+      edges: [],
+      transform: [0, 0, 1],
+    }
+    workflowStoreState = {
+      appId: 'app-1',
+      isWorkflowDataLoaded: true,
+      syncWorkflowDraftHash: 'hash-123',
+      environmentVariables: [],
+      conversationVariables: [],
+      setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+      setDraftUpdatedAt: mockSetDraftUpdatedAt,
+    }
+    featuresState = {
+      features: {
+        opening: { enabled: false, opening_statement: '', suggested_questions: [] },
+        suggested: {},
+        text2speech: {},
+        speech2text: {},
+        citation: {},
+        moderation: {},
+        file: {},
+      },
+    }
+    mockGetNodesReadOnly.mockReturnValue(false)
     mockGetNodes.mockReturnValue([{ id: 'n1', position: { x: 0, y: 0 }, data: { type: 'start' } }])
     mockSyncWorkflowDraft.mockResolvedValue({ hash: 'new', updated_at: 1 })
   })
@@ -122,4 +163,102 @@ describe('useNodesSyncDraft — handleRefreshWorkflowDraft(true) on 409', () =>
       }),
     }))
   })
+
+  it('should strip temp entities and private data, use the latest hash, and invoke success callbacks', async () => {
+    reactFlowState = {
+      ...reactFlowState,
+      edges: [
+        { id: 'edge-1', source: 'n1', target: 'n2', data: { _isTemp: false, _private: 'drop', stable: 'keep' } },
+        { id: 'temp-edge', source: 'n2', target: 'n3', data: { _isTemp: true } },
+      ],
+      transform: [10, 20, 1.5],
+    }
+    mockGetNodes.mockReturnValue([
+      { id: 'n1', position: { x: 0, y: 0 }, data: { type: 'start', _tempField: 'drop', label: 'Start' } },
+      { id: 'temp-node', position: { x: 1, y: 1 }, data: { type: 'answer', _isTempNode: true } },
+    ])
+    workflowStoreState = {
+      ...workflowStoreState,
+      syncWorkflowDraftHash: 'latest-hash',
+      environmentVariables: [{ id: 'env-1', value: 'env' }],
+      conversationVariables: [{ id: 'conversation-1', value: 'conversation' }],
+    }
+    featuresState = {
+      features: {
+        opening: { enabled: true, opening_statement: 'Hello', suggested_questions: ['Q1'] },
+        suggested: { enabled: true },
+        text2speech: { enabled: true },
+        speech2text: { enabled: true },
+        citation: { enabled: true },
+        moderation: { enabled: false },
+        file: { enabled: true },
+      },
+    }
+
+    const callbacks = {
+      onSuccess: vi.fn(),
+      onError: vi.fn(),
+      onSettled: vi.fn(),
+    }
+
+    const { result } = renderHook(() => useNodesSyncDraft())
+
+    await act(async () => {
+      await result.current.doSyncWorkflowDraft(false, callbacks)
+    })
+
+    expect(mockSyncWorkflowDraft).toHaveBeenCalledWith({
+      url: '/apps/app-1/workflows/draft',
+      params: {
+        graph: {
+          nodes: [{ id: 'n1', position: { x: 0, y: 0 }, data: { type: 'start', label: 'Start' } }],
+          edges: [{ id: 'edge-1', source: 'n1', target: 'n2', data: { stable: 'keep' } }],
+          viewport: { x: 10, y: 20, zoom: 1.5 },
+        },
+        features: {
+          opening_statement: 'Hello',
+          suggested_questions: ['Q1'],
+          suggested_questions_after_answer: { enabled: true },
+          text_to_speech: { enabled: true },
+          speech_to_text: { enabled: true },
+          retriever_resource: { enabled: true },
+          sensitive_word_avoidance: { enabled: false },
+          file_upload: { enabled: true },
+        },
+        environment_variables: [{ id: 'env-1', value: 'env' }],
+        conversation_variables: [{ id: 'conversation-1', value: 'conversation' }],
+        hash: 'latest-hash',
+      },
+    })
+    expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('new')
+    expect(mockSetDraftUpdatedAt).toHaveBeenCalledWith(1)
+    expect(callbacks.onSuccess).toHaveBeenCalled()
+    expect(callbacks.onError).not.toHaveBeenCalled()
+    expect(callbacks.onSettled).toHaveBeenCalled()
+  })
+
+  it('should post workflow draft with keepalive when the page closes', () => {
+    reactFlowState = {
+      ...reactFlowState,
+      transform: [1, 2, 3],
+    }
+    workflowStoreState = {
+      ...workflowStoreState,
+      environmentVariables: [{ id: 'env-1' }],
+      conversationVariables: [{ id: 'conversation-1' }],
+    }
+
+    const { result } = renderHook(() => useNodesSyncDraft())
+
+    act(() => {
+      result.current.syncWorkflowDraftWhenPageClose()
+    })
+
+    expect(mockPostWithKeepalive).toHaveBeenCalledWith('/api/apps/app-1/workflows/draft', expect.objectContaining({
+      graph: expect.objectContaining({
+        viewport: { x: 1, y: 2, zoom: 3 },
+      }),
+      hash: 'hash-123',
+    }))
+  })
 })

web/app/components/workflow-app/hooks/__tests__/use-workflow-init.spec.ts

@@ -1,5 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { BlockEnum } from '@/app/components/workflow/types'
 
 import { useWorkflowInit } from '../use-workflow-init'
 
@@ -11,6 +12,21 @@ const mockSetLastPublishedHasUserInput = vi.fn()
 const mockSetFileUploadConfig = vi.fn()
 const mockWorkflowStoreSetState = vi.fn()
 const mockWorkflowStoreGetState = vi.fn()
+const mockFetchNodesDefaultConfigs = vi.fn()
+const mockFetchPublishedWorkflow = vi.fn()
+
+let appStoreState: {
+  appDetail: {
+    id: string
+    name: string
+    mode: string
+  }
+}
+
+let workflowConfigState: {
+  data: Record<string, unknown> | null
+  isLoading: boolean
+}
 
 vi.mock('@/app/components/workflow/store', () => ({
   useStore: <T>(selector: (state: { setSyncWorkflowDraftHash: ReturnType<typeof vi.fn> }) => T): T =>
@@ -22,8 +38,8 @@ vi.mock('@/app/components/workflow/store', () => ({
 }))
 
 vi.mock('@/app/components/app/store', () => ({
-  useStore: <T>(selector: (state: { appDetail: { id: string, name: string, mode: string } }) => T): T =>
-    selector({ appDetail: { id: 'app-1', name: 'Test', mode: 'workflow' } }),
+  useStore: <T>(selector: (state: typeof appStoreState) => T): T =>
+    selector(appStoreState),
 }))
 
 vi.mock('../use-workflow-template', () => ({
@@ -31,7 +47,11 @@ vi.mock('../use-workflow-template', () => ({
 }))
 
 vi.mock('@/service/use-workflow', () => ({
-  useWorkflowConfig: () => ({ data: null, isLoading: false }),
+  useWorkflowConfig: (_url: string, onSuccess: (config: Record<string, unknown>) => void) => {
+    if (workflowConfigState.data)
+      onSuccess(workflowConfigState.data)
+    return workflowConfigState
+  },
 }))
 
 const mockFetchWorkflowDraft = vi.fn()
@@ -40,8 +60,8 @@ const mockSyncWorkflowDraft = vi.fn()
 vi.mock('@/service/workflow', () => ({
   fetchWorkflowDraft: (...args: unknown[]) => mockFetchWorkflowDraft(...args),
   syncWorkflowDraft: (...args: unknown[]) => mockSyncWorkflowDraft(...args),
-  fetchNodesDefaultConfigs: () => Promise.resolve([]),
-  fetchPublishedWorkflow: () => Promise.resolve({ created_at: 0, graph: { nodes: [], edges: [] } }),
+  fetchNodesDefaultConfigs: (...args: unknown[]) => mockFetchNodesDefaultConfigs(...args),
+  fetchPublishedWorkflow: (...args: unknown[]) => mockFetchPublishedWorkflow(...args),
 }))
 
 const notExistError = () => ({
@@ -68,6 +88,10 @@ const draftResponse = {
 describe('useWorkflowInit — hash fix (draft_workflow_not_exist)', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    appStoreState = {
+      appDetail: { id: 'app-1', name: 'Test', mode: 'workflow' },
+    }
+    workflowConfigState = { data: null, isLoading: false }
     mockWorkflowStoreGetState.mockReturnValue({
       setDraftUpdatedAt: mockSetDraftUpdatedAt,
       setToolPublished: mockSetToolPublished,
@@ -75,6 +99,8 @@ describe('useWorkflowInit — hash fix (draft_workflow_not_exist)', () => {
       setLastPublishedHasUserInput: mockSetLastPublishedHasUserInput,
       setFileUploadConfig: mockSetFileUploadConfig,
     })
+    mockFetchNodesDefaultConfigs.mockResolvedValue([])
+    mockFetchPublishedWorkflow.mockResolvedValue({ created_at: 0, graph: { nodes: [], edges: [] } })
     mockFetchWorkflowDraft
       .mockRejectedValueOnce(notExistError())
       .mockResolvedValueOnce(draftResponse)
@@ -104,4 +130,77 @@ describe('useWorkflowInit — hash fix (draft_workflow_not_exist)', () => {
     expect(order).toContain('hash:new-hash')
     expect(order.indexOf('hash:new-hash')).toBeLessThan(order.indexOf('fetch:2'))
   })
+
+  it('should hydrate draft state, preload defaults, and derive published workflow metadata on success', async () => {
+    workflowConfigState = {
+      data: { enabled: true, sizeLimit: 20 },
+      isLoading: false,
+    }
+    mockFetchWorkflowDraft.mockReset().mockResolvedValue({
+      ...draftResponse,
+      updated_at: 9,
+      tool_published: true,
+      environment_variables: [
+        { id: 'env-secret', value_type: 'secret', value: 'top-secret', name: 'SECRET' },
+        { id: 'env-plain', value_type: 'text', value: 'visible', name: 'PLAIN' },
+      ],
+      conversation_variables: [{ id: 'conversation-1' }],
+    })
+    mockFetchNodesDefaultConfigs.mockResolvedValue([
+      { type: 'start', config: { title: 'Start Config' } },
+      { type: 'start', config: { title: 'Ignored Duplicate' } },
+    ])
+    mockFetchPublishedWorkflow.mockResolvedValue({
+      created_at: 99,
+      graph: {
+        nodes: [{ id: 'start', data: { type: BlockEnum.Start } }],
+        edges: [{ source: 'start', target: 'end' }],
+      },
+    })
+
+    const { result } = renderHook(() => useWorkflowInit())
+
+    await waitFor(() => {
+      expect(result.current.data?.hash).toBe('server-hash')
+    })
+
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({ appId: 'app-1', appName: 'Test' })
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith(expect.objectContaining({
+      envSecrets: { 'env-secret': 'top-secret' },
+      environmentVariables: [
+        { id: 'env-secret', value_type: 'secret', value: '[__HIDDEN__]', name: 'SECRET' },
+        { id: 'env-plain', value_type: 'text', value: 'visible', name: 'PLAIN' },
+      ],
+      conversationVariables: [{ id: 'conversation-1' }],
+      isWorkflowDataLoaded: true,
+    }))
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({
+      nodesDefaultConfigs: {
+        start: { title: 'Start Config' },
+      },
+    })
+    expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('server-hash')
+    expect(mockSetDraftUpdatedAt).toHaveBeenCalledWith(9)
+    expect(mockSetToolPublished).toHaveBeenCalledWith(true)
+    expect(mockSetPublishedAt).toHaveBeenCalledWith(99)
+    expect(mockSetLastPublishedHasUserInput).toHaveBeenCalledWith(true)
+    expect(mockSetFileUploadConfig).toHaveBeenCalledWith({ enabled: true, sizeLimit: 20 })
+    expect(result.current.fileUploadConfigResponse).toEqual({ enabled: true, sizeLimit: 20 })
+    expect(result.current.isLoading).toBe(false)
+  })
+
+  it('should fall back to no published user input when preload requests fail', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    mockFetchWorkflowDraft.mockReset().mockResolvedValue(draftResponse)
+    mockFetchNodesDefaultConfigs.mockRejectedValue(new Error('preload failed'))
+
+    renderHook(() => useWorkflowInit())
+
+    await waitFor(() => {
+      expect(mockSetLastPublishedHasUserInput).toHaveBeenCalledWith(false)
+    })
+
+    expect(consoleErrorSpy).toHaveBeenCalled()
+    consoleErrorSpy.mockRestore()
+  })
 })

web/app/components/workflow-app/hooks/__tests__/use-workflow-refresh-draft.spec.ts

@@ -1,24 +1,32 @@
-import { act, renderHook } from '@testing-library/react'
+import { act, renderHook, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useWorkflowRefreshDraft } from '../use-workflow-refresh-draft'
 
 const mockHandleUpdateWorkflowCanvas = vi.fn()
 const mockSetSyncWorkflowDraftHash = vi.fn()
+const mockSetIsSyncingWorkflowDraft = vi.fn()
+const mockSetEnvironmentVariables = vi.fn()
+const mockSetEnvSecrets = vi.fn()
+const mockSetConversationVariables = vi.fn()
+const mockSetIsWorkflowDataLoaded = vi.fn()
+const mockCancel = vi.fn()
+
+let workflowStoreState: {
+  appId: string
+  isWorkflowDataLoaded: boolean
+  debouncedSyncWorkflowDraft?: { cancel: () => void }
+  setSyncWorkflowDraftHash: typeof mockSetSyncWorkflowDraftHash
+  setIsSyncingWorkflowDraft: typeof mockSetIsSyncingWorkflowDraft
+  setEnvironmentVariables: typeof mockSetEnvironmentVariables
+  setEnvSecrets: typeof mockSetEnvSecrets
+  setConversationVariables: typeof mockSetConversationVariables
+  setIsWorkflowDataLoaded: typeof mockSetIsWorkflowDataLoaded
+}
 
 vi.mock('@/app/components/workflow/store', () => ({
   useWorkflowStore: () => ({
-    getState: () => ({
-      appId: 'app-1',
-      isWorkflowDataLoaded: true,
-      debouncedSyncWorkflowDraft: undefined,
-      setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
-      setIsSyncingWorkflowDraft: vi.fn(),
-      setEnvironmentVariables: vi.fn(),
-      setEnvSecrets: vi.fn(),
-      setConversationVariables: vi.fn(),
-      setIsWorkflowDataLoaded: vi.fn(),
-    }),
+    getState: () => workflowStoreState,
   }),
 }))
 
@@ -41,6 +49,17 @@ const draftResponse = {
 describe('useWorkflowRefreshDraft — notUpdateCanvas parameter', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    workflowStoreState = {
+      appId: 'app-1',
+      isWorkflowDataLoaded: true,
+      debouncedSyncWorkflowDraft: undefined,
+      setSyncWorkflowDraftHash: mockSetSyncWorkflowDraftHash,
+      setIsSyncingWorkflowDraft: mockSetIsSyncingWorkflowDraft,
+      setEnvironmentVariables: mockSetEnvironmentVariables,
+      setEnvSecrets: mockSetEnvSecrets,
+      setConversationVariables: mockSetConversationVariables,
+      setIsWorkflowDataLoaded: mockSetIsWorkflowDataLoaded,
+    }
     mockFetchWorkflowDraft.mockResolvedValue(draftResponse)
   })
 
@@ -75,6 +94,67 @@ describe('useWorkflowRefreshDraft — notUpdateCanvas parameter', () => {
     await act(async () => {
       result.current.handleRefreshWorkflowDraft(true)
     })
-    expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('server-hash')
+    await waitFor(() => {
+      expect(mockSetSyncWorkflowDraftHash).toHaveBeenCalledWith('server-hash')
+    })
+  })
+
+  it('should cancel pending draft sync, use fallback viewport, and persist masked secrets', async () => {
+    workflowStoreState = {
+      ...workflowStoreState,
+      debouncedSyncWorkflowDraft: { cancel: mockCancel },
+    }
+    mockFetchWorkflowDraft.mockResolvedValue({
+      hash: 'server-hash',
+      graph: {
+        nodes: [{ id: 'n1' }],
+        edges: [],
+      },
+      environment_variables: [
+        { id: 'env-secret', value_type: 'secret', value: 'top-secret', name: 'SECRET' },
+        { id: 'env-plain', value_type: 'text', value: 'visible', name: 'PLAIN' },
+      ],
+      conversation_variables: [{ id: 'conversation-1' }],
+    })
+
+    const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+    act(() => {
+      result.current.handleRefreshWorkflowDraft()
+    })
+
+    await waitFor(() => {
+      expect(mockCancel).toHaveBeenCalled()
+      expect(mockHandleUpdateWorkflowCanvas).toHaveBeenCalledWith({
+        nodes: [{ id: 'n1' }],
+        edges: [],
+        viewport: { x: 0, y: 0, zoom: 1 },
+      })
+      expect(mockSetEnvSecrets).toHaveBeenCalledWith({
+        'env-secret': 'top-secret',
+      })
+      expect(mockSetEnvironmentVariables).toHaveBeenCalledWith([
+        { id: 'env-secret', value_type: 'secret', value: '[__HIDDEN__]', name: 'SECRET' },
+        { id: 'env-plain', value_type: 'text', value: 'visible', name: 'PLAIN' },
+      ])
+      expect(mockSetConversationVariables).toHaveBeenCalledWith([{ id: 'conversation-1' }])
+    })
+  })
+
+  it('should restore loaded state when refresh fails after workflow data was already loaded', async () => {
+    mockFetchWorkflowDraft.mockRejectedValue(new Error('refresh failed'))
+
+    const { result } = renderHook(() => useWorkflowRefreshDraft())
+
+    act(() => {
+      result.current.handleRefreshWorkflowDraft()
+    })
+
+    await waitFor(() => {
+      expect(mockSetIsWorkflowDataLoaded).toHaveBeenNthCalledWith(1, false)
+      expect(mockSetIsWorkflowDataLoaded).toHaveBeenNthCalledWith(2, true)
+      expect(mockSetIsSyncingWorkflowDraft).toHaveBeenCalledWith(true)
+      expect(mockSetIsSyncingWorkflowDraft).toHaveBeenLastCalledWith(false)
+    })
   })
 })

web/app/components/workflow-app/hooks/__tests__/use-workflow-run-callbacks.spec.ts

@@ -0,0 +1,451 @@
+import type AudioPlayer from '@/app/components/base/audio-btn/audio'
+import { createBaseWorkflowRunCallbacks, createFinalWorkflowRunCallbacks } from '../use-workflow-run-callbacks'
+
+const {
+  mockSseGet,
+  mockResetMsgId,
+} = vi.hoisted(() => ({
+  mockSseGet: vi.fn(),
+  mockResetMsgId: vi.fn(),
+}))
+
+vi.mock('@/service/base', () => ({
+  sseGet: mockSseGet,
+}))
+
+vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
+  AudioPlayerManager: {
+    getInstance: () => ({
+      resetMsgId: mockResetMsgId,
+    }),
+  },
+}))
+
+const createHandlers = () => ({
+  handleWorkflowStarted: vi.fn(),
+  handleWorkflowFinished: vi.fn(),
+  handleWorkflowFailed: vi.fn(),
+  handleWorkflowNodeStarted: vi.fn(),
+  handleWorkflowNodeFinished: vi.fn(),
+  handleWorkflowNodeHumanInputRequired: vi.fn(),
+  handleWorkflowNodeHumanInputFormFilled: vi.fn(),
+  handleWorkflowNodeHumanInputFormTimeout: vi.fn(),
+  handleWorkflowNodeIterationStarted: vi.fn(),
+  handleWorkflowNodeIterationNext: vi.fn(),
+  handleWorkflowNodeIterationFinished: vi.fn(),
+  handleWorkflowNodeLoopStarted: vi.fn(),
+  handleWorkflowNodeLoopNext: vi.fn(),
+  handleWorkflowNodeLoopFinished: vi.fn(),
+  handleWorkflowNodeRetry: vi.fn(),
+  handleWorkflowAgentLog: vi.fn(),
+  handleWorkflowTextChunk: vi.fn(),
+  handleWorkflowTextReplace: vi.fn(),
+  handleWorkflowPaused: vi.fn(),
+})
+
+const createUserCallbacks = () => ({
+  onWorkflowStarted: vi.fn(),
+  onWorkflowFinished: vi.fn(),
+  onNodeStarted: vi.fn(),
+  onNodeFinished: vi.fn(),
+  onIterationStart: vi.fn(),
+  onIterationNext: vi.fn(),
+  onIterationFinish: vi.fn(),
+  onLoopStart: vi.fn(),
+  onLoopNext: vi.fn(),
+  onLoopFinish: vi.fn(),
+  onNodeRetry: vi.fn(),
+  onAgentLog: vi.fn(),
+  onError: vi.fn(),
+  onWorkflowPaused: vi.fn(),
+  onHumanInputRequired: vi.fn(),
+  onHumanInputFormFilled: vi.fn(),
+  onHumanInputFormTimeout: vi.fn(),
+  onCompleted: vi.fn(),
+})
+
+describe('useWorkflowRun callbacks helpers', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should create base callbacks that wrap workflow events, errors, pause continuation, and lazy tts playback', () => {
+    const handlers = createHandlers()
+    const clearAbortController = vi.fn()
+    const clearListeningState = vi.fn()
+    const invalidateRunHistory = vi.fn()
+    const fetchInspectVars = vi.fn()
+    const invalidAllLastRun = vi.fn()
+    const trackWorkflowRunFailed = vi.fn()
+    const userOnWorkflowFinished = vi.fn()
+    const userOnError = vi.fn()
+    const userOnWorkflowPaused = vi.fn()
+    const player = {
+      playAudioWithAudio: vi.fn(),
+    } as unknown as AudioPlayer
+    const getOrCreatePlayer = vi.fn<() => AudioPlayer | null>(() => player)
+
+    const callbacks = createBaseWorkflowRunCallbacks({
+      clientWidth: 320,
+      clientHeight: 240,
+      runHistoryUrl: '/apps/app-1/workflow-runs',
+      isInWorkflowDebug: true,
+      fetchInspectVars,
+      invalidAllLastRun,
+      invalidateRunHistory,
+      clearAbortController,
+      clearListeningState,
+      trackWorkflowRunFailed,
+      handlers,
+      callbacks: {
+        onWorkflowFinished: userOnWorkflowFinished,
+        onError: userOnError,
+        onWorkflowPaused: userOnWorkflowPaused,
+      },
+      restCallback: {},
+      getOrCreatePlayer,
+    })
+
+    callbacks.onWorkflowFinished?.({ workflow_run_id: 'run-1' } as never)
+    expect(clearListeningState).toHaveBeenCalled()
+    expect(handlers.handleWorkflowFinished).toHaveBeenCalled()
+    expect(invalidateRunHistory).toHaveBeenCalledWith('/apps/app-1/workflow-runs')
+    expect(userOnWorkflowFinished).toHaveBeenCalled()
+    expect(fetchInspectVars).toHaveBeenCalledWith({})
+    expect(invalidAllLastRun).toHaveBeenCalled()
+
+    callbacks.onError?.({ error: 'failed', node_type: 'llm' } as never)
+    expect(clearAbortController).toHaveBeenCalled()
+    expect(handlers.handleWorkflowFailed).toHaveBeenCalled()
+    expect(userOnError).toHaveBeenCalled()
+    expect(trackWorkflowRunFailed).toHaveBeenCalledWith({ error: 'failed', node_type: 'llm' })
+
+    callbacks.onTTSChunk?.('message-1', 'audio-chunk')
+    expect(getOrCreatePlayer).toHaveBeenCalled()
+    expect(player.playAudioWithAudio).toHaveBeenCalledWith('audio-chunk', true)
+    expect(mockResetMsgId).toHaveBeenCalledWith('message-1')
+
+    callbacks.onWorkflowPaused?.({ workflow_run_id: 'run-2' } as never)
+    expect(handlers.handleWorkflowPaused).toHaveBeenCalled()
+    expect(userOnWorkflowPaused).toHaveBeenCalled()
+    expect(mockSseGet).toHaveBeenCalledWith('/workflow/run-2/events', {}, callbacks)
+  })
+
+  it('should create final callbacks that preserve rest callback override order and eager abort-controller wiring', () => {
+    const handlers = createHandlers()
+    const restOnNodeStarted = vi.fn()
+    const setAbortController = vi.fn()
+    const player = {
+      playAudioWithAudio: vi.fn(),
+    } as unknown as AudioPlayer
+
+    const baseSseOptions = createBaseWorkflowRunCallbacks({
+      clientWidth: 320,
+      clientHeight: 240,
+      runHistoryUrl: '/apps/app-1/workflow-runs',
+      isInWorkflowDebug: false,
+      fetchInspectVars: vi.fn(),
+      invalidAllLastRun: vi.fn(),
+      invalidateRunHistory: vi.fn(),
+      clearAbortController: vi.fn(),
+      clearListeningState: vi.fn(),
+      trackWorkflowRunFailed: vi.fn(),
+      handlers,
+      callbacks: {},
+      restCallback: {},
+      getOrCreatePlayer: vi.fn<() => AudioPlayer | null>(() => player),
+    })
+
+    const finalCallbacks = createFinalWorkflowRunCallbacks({
+      clientWidth: 320,
+      clientHeight: 240,
+      runHistoryUrl: '/apps/app-1/workflow-runs',
+      isInWorkflowDebug: false,
+      fetchInspectVars: vi.fn(),
+      invalidAllLastRun: vi.fn(),
+      invalidateRunHistory: vi.fn(),
+      clearAbortController: vi.fn(),
+      clearListeningState: vi.fn(),
+      trackWorkflowRunFailed: vi.fn(),
+      handlers,
+      callbacks: {},
+      restCallback: {
+        onNodeStarted: restOnNodeStarted,
+      },
+      baseSseOptions,
+      player,
+      setAbortController,
+    })
+
+    const controller = new AbortController()
+    finalCallbacks.getAbortController?.(controller)
+    expect(setAbortController).toHaveBeenCalledWith(controller)
+
+    finalCallbacks.onNodeStarted?.({ node_id: 'node-1' } as never)
+    expect(restOnNodeStarted).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeStarted).not.toHaveBeenCalled()
+
+    finalCallbacks.onTTSChunk?.('message-2', 'audio-chunk')
+    expect(player.playAudioWithAudio).toHaveBeenCalledWith('audio-chunk', true)
+    expect(mockResetMsgId).toHaveBeenCalledWith('message-2')
+  })
+
+  it('should route base workflow events through handlers, user callbacks, and pause continuation with the same callback object', async () => {
+    const handlers = createHandlers()
+    const userCallbacks = createUserCallbacks()
+    const clearAbortController = vi.fn()
+    const clearListeningState = vi.fn()
+    const invalidateRunHistory = vi.fn()
+    const fetchInspectVars = vi.fn()
+    const invalidAllLastRun = vi.fn()
+    const trackWorkflowRunFailed = vi.fn()
+    const player = {
+      playAudioWithAudio: vi.fn(),
+    } as unknown as AudioPlayer
+
+    const callbacks = createBaseWorkflowRunCallbacks({
+      clientWidth: 640,
+      clientHeight: 360,
+      runHistoryUrl: '/apps/app-1/workflow-runs',
+      isInWorkflowDebug: true,
+      fetchInspectVars,
+      invalidAllLastRun,
+      invalidateRunHistory,
+      clearAbortController,
+      clearListeningState,
+      trackWorkflowRunFailed,
+      handlers,
+      callbacks: userCallbacks,
+      restCallback: {},
+      getOrCreatePlayer: vi.fn<() => AudioPlayer | null>(() => player),
+    })
+
+    callbacks.onWorkflowStarted?.({ workflow_run_id: 'run-1' } as never)
+    callbacks.onNodeStarted?.({ node_id: 'node-1' } as never)
+    callbacks.onNodeFinished?.({ node_id: 'node-1' } as never)
+    callbacks.onIterationStart?.({ node_id: 'node-1' } as never)
+    callbacks.onIterationNext?.({ node_id: 'node-1' } as never)
+    callbacks.onIterationFinish?.({ node_id: 'node-1' } as never)
+    callbacks.onLoopStart?.({ node_id: 'node-1' } as never)
+    callbacks.onLoopNext?.({ node_id: 'node-1' } as never)
+    callbacks.onLoopFinish?.({ node_id: 'node-1' } as never)
+    callbacks.onNodeRetry?.({ node_id: 'node-1' } as never)
+    callbacks.onAgentLog?.({ node_id: 'node-1' } as never)
+    callbacks.onTextChunk?.({ data: 'chunk' } as never)
+    callbacks.onTextReplace?.({ text: 'replacement' } as never)
+    callbacks.onHumanInputRequired?.({ node_id: 'node-1' } as never)
+    callbacks.onHumanInputFormFilled?.({ node_id: 'node-1' } as never)
+    callbacks.onHumanInputFormTimeout?.({ node_id: 'node-1' } as never)
+    callbacks.onWorkflowFinished?.({ workflow_run_id: 'run-1' } as never)
+    await callbacks.onCompleted?.(false, '')
+    callbacks.onTTSChunk?.('message-1', 'audio-chunk')
+    callbacks.onTTSEnd?.('message-1', 'audio-finished')
+    callbacks.onWorkflowPaused?.({ workflow_run_id: 'run-2' } as never)
+    callbacks.onError?.({ error: 'failed', node_type: 'llm' } as never, '500')
+
+    expect(handlers.handleWorkflowStarted).toHaveBeenCalled()
+    expect(userCallbacks.onWorkflowStarted).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeStarted).toHaveBeenCalledWith(
+      { node_id: 'node-1' },
+      { clientWidth: 640, clientHeight: 360 },
+    )
+    expect(userCallbacks.onNodeStarted).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeFinished).toHaveBeenCalled()
+    expect(userCallbacks.onNodeFinished).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeIterationStarted).toHaveBeenCalledWith(
+      { node_id: 'node-1' },
+      { clientWidth: 640, clientHeight: 360 },
+    )
+    expect(userCallbacks.onIterationStart).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeIterationNext).toHaveBeenCalled()
+    expect(userCallbacks.onIterationNext).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeIterationFinished).toHaveBeenCalled()
+    expect(userCallbacks.onIterationFinish).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeLoopStarted).toHaveBeenCalledWith(
+      { node_id: 'node-1' },
+      { clientWidth: 640, clientHeight: 360 },
+    )
+    expect(userCallbacks.onLoopStart).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeLoopNext).toHaveBeenCalled()
+    expect(userCallbacks.onLoopNext).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeLoopFinished).toHaveBeenCalled()
+    expect(userCallbacks.onLoopFinish).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeRetry).toHaveBeenCalled()
+    expect(userCallbacks.onNodeRetry).toHaveBeenCalled()
+    expect(handlers.handleWorkflowAgentLog).toHaveBeenCalled()
+    expect(userCallbacks.onAgentLog).toHaveBeenCalled()
+    expect(handlers.handleWorkflowTextChunk).toHaveBeenCalled()
+    expect(handlers.handleWorkflowTextReplace).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeHumanInputRequired).toHaveBeenCalled()
+    expect(userCallbacks.onHumanInputRequired).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeHumanInputFormFilled).toHaveBeenCalled()
+    expect(userCallbacks.onHumanInputFormFilled).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeHumanInputFormTimeout).toHaveBeenCalled()
+    expect(userCallbacks.onHumanInputFormTimeout).toHaveBeenCalled()
+    expect(clearListeningState).toHaveBeenCalled()
+    expect(handlers.handleWorkflowFinished).toHaveBeenCalled()
+    expect(userCallbacks.onWorkflowFinished).toHaveBeenCalled()
+    expect(fetchInspectVars).toHaveBeenCalledWith({})
+    expect(invalidAllLastRun).toHaveBeenCalled()
+    expect(userCallbacks.onCompleted).toHaveBeenCalledWith(false, '')
+    expect(player.playAudioWithAudio).toHaveBeenCalledWith('audio-chunk', true)
+    expect(player.playAudioWithAudio).toHaveBeenCalledWith('audio-finished', false)
+    expect(mockResetMsgId).toHaveBeenCalledWith('message-1')
+    expect(handlers.handleWorkflowPaused).toHaveBeenCalled()
+    expect(userCallbacks.onWorkflowPaused).toHaveBeenCalled()
+    expect(mockSseGet).toHaveBeenCalledWith('/workflow/run-2/events', {}, callbacks)
+    expect(clearAbortController).toHaveBeenCalled()
+    expect(handlers.handleWorkflowFailed).toHaveBeenCalled()
+    expect(userCallbacks.onError).toHaveBeenCalledWith({ error: 'failed', node_type: 'llm' }, '500')
+    expect(trackWorkflowRunFailed).toHaveBeenCalledWith({ error: 'failed', node_type: 'llm' })
+    expect(invalidateRunHistory).toHaveBeenCalledWith('/apps/app-1/workflow-runs')
+  })
+
+  it('should skip base debug-only side effects and audio playback when debug mode is off or audio is empty', () => {
+    const handlers = createHandlers()
+    const fetchInspectVars = vi.fn()
+    const invalidAllLastRun = vi.fn()
+    const getOrCreatePlayer = vi.fn<() => AudioPlayer | null>(() => null)
+
+    const callbacks = createBaseWorkflowRunCallbacks({
+      clientWidth: 320,
+      clientHeight: 240,
+      runHistoryUrl: '/apps/app-1/workflow-runs',
+      isInWorkflowDebug: false,
+      fetchInspectVars,
+      invalidAllLastRun,
+      invalidateRunHistory: vi.fn(),
+      clearAbortController: vi.fn(),
+      clearListeningState: vi.fn(),
+      trackWorkflowRunFailed: vi.fn(),
+      handlers,
+      callbacks: {},
+      restCallback: {},
+      getOrCreatePlayer,
+    })
+
+    callbacks.onWorkflowFinished?.({ workflow_run_id: 'run-1' } as never)
+    callbacks.onTTSChunk?.('message-1', '')
+    callbacks.onTTSEnd?.('message-1', 'audio-finished')
+
+    expect(fetchInspectVars).not.toHaveBeenCalled()
+    expect(invalidAllLastRun).not.toHaveBeenCalled()
+    expect(getOrCreatePlayer).toHaveBeenCalledTimes(1)
+    expect(mockResetMsgId).not.toHaveBeenCalled()
+  })
+
+  it('should route final workflow events through handlers and continue paused runs with final callbacks', async () => {
+    const handlers = createHandlers()
+    const userCallbacks = createUserCallbacks()
+    const fetchInspectVars = vi.fn()
+    const invalidAllLastRun = vi.fn()
+    const invalidateRunHistory = vi.fn()
+    const setAbortController = vi.fn()
+    const player = {
+      playAudioWithAudio: vi.fn(),
+    } as unknown as AudioPlayer
+
+    const baseSseOptions = createBaseWorkflowRunCallbacks({
+      clientWidth: 480,
+      clientHeight: 320,
+      runHistoryUrl: '/apps/app-1/workflow-runs',
+      isInWorkflowDebug: false,
+      fetchInspectVars: vi.fn(),
+      invalidAllLastRun: vi.fn(),
+      invalidateRunHistory: vi.fn(),
+      clearAbortController: vi.fn(),
+      clearListeningState: vi.fn(),
+      trackWorkflowRunFailed: vi.fn(),
+      handlers,
+      callbacks: {},
+      restCallback: {},
+      getOrCreatePlayer: vi.fn<() => AudioPlayer | null>(() => player),
+    })
+
+    const finalCallbacks = createFinalWorkflowRunCallbacks({
+      clientWidth: 480,
+      clientHeight: 320,
+      runHistoryUrl: '/apps/app-1/workflow-runs',
+      isInWorkflowDebug: true,
+      fetchInspectVars,
+      invalidAllLastRun,
+      invalidateRunHistory,
+      clearAbortController: vi.fn(),
+      clearListeningState: vi.fn(),
+      trackWorkflowRunFailed: vi.fn(),
+      handlers,
+      callbacks: userCallbacks,
+      restCallback: {},
+      baseSseOptions,
+      player,
+      setAbortController,
+    })
+
+    finalCallbacks.getAbortController?.(new AbortController())
+    finalCallbacks.onWorkflowFinished?.({ workflow_run_id: 'run-1' } as never)
+    finalCallbacks.onNodeStarted?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onNodeFinished?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onIterationStart?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onIterationNext?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onIterationFinish?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onLoopStart?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onLoopNext?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onLoopFinish?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onNodeRetry?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onAgentLog?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onTextChunk?.({ data: 'chunk' } as never)
+    finalCallbacks.onTextReplace?.({ text: 'replacement' } as never)
+    finalCallbacks.onHumanInputRequired?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onHumanInputFormFilled?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onHumanInputFormTimeout?.({ node_id: 'node-1' } as never)
+    finalCallbacks.onWorkflowPaused?.({ workflow_run_id: 'run-2' } as never)
+    finalCallbacks.onTTSChunk?.('message-2', 'audio-chunk')
+    finalCallbacks.onTTSEnd?.('message-2', 'audio-finished')
+    await finalCallbacks.onCompleted?.(true, 'done')
+    finalCallbacks.onError?.({ error: 'failed' } as never, '500')
+
+    expect(setAbortController).toHaveBeenCalled()
+    expect(handlers.handleWorkflowFinished).toHaveBeenCalled()
+    expect(userCallbacks.onWorkflowFinished).toHaveBeenCalled()
+    expect(fetchInspectVars).toHaveBeenCalledWith({})
+    expect(invalidAllLastRun).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeStarted).toHaveBeenCalledWith(
+      { node_id: 'node-1' },
+      { clientWidth: 480, clientHeight: 320 },
+    )
+    expect(handlers.handleWorkflowNodeIterationStarted).toHaveBeenCalledWith(
+      { node_id: 'node-1' },
+      { clientWidth: 480, clientHeight: 320 },
+    )
+    expect(handlers.handleWorkflowNodeLoopStarted).toHaveBeenCalledWith(
+      { node_id: 'node-1' },
+      { clientWidth: 480, clientHeight: 320 },
+    )
+    expect(userCallbacks.onNodeStarted).toHaveBeenCalled()
+    expect(userCallbacks.onNodeFinished).toHaveBeenCalled()
+    expect(userCallbacks.onIterationStart).toHaveBeenCalled()
+    expect(userCallbacks.onIterationNext).toHaveBeenCalled()
+    expect(userCallbacks.onIterationFinish).toHaveBeenCalled()
+    expect(userCallbacks.onLoopStart).toHaveBeenCalled()
+    expect(userCallbacks.onLoopNext).toHaveBeenCalled()
+    expect(userCallbacks.onLoopFinish).toHaveBeenCalled()
+    expect(userCallbacks.onNodeRetry).toHaveBeenCalled()
+    expect(userCallbacks.onAgentLog).toHaveBeenCalled()
+    expect(handlers.handleWorkflowTextChunk).toHaveBeenCalled()
+    expect(handlers.handleWorkflowTextReplace).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeHumanInputRequired).toHaveBeenCalled()
+    expect(userCallbacks.onHumanInputRequired).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeHumanInputFormFilled).toHaveBeenCalled()
+    expect(userCallbacks.onHumanInputFormFilled).toHaveBeenCalled()
+    expect(handlers.handleWorkflowNodeHumanInputFormTimeout).toHaveBeenCalled()
+    expect(userCallbacks.onHumanInputFormTimeout).toHaveBeenCalled()
+    expect(handlers.handleWorkflowPaused).toHaveBeenCalled()
+    expect(userCallbacks.onWorkflowPaused).toHaveBeenCalled()
+    expect(mockSseGet).toHaveBeenCalledWith('/workflow/run-2/events', {}, finalCallbacks)
+    expect(player.playAudioWithAudio).toHaveBeenCalledWith('audio-chunk', true)
+    expect(player.playAudioWithAudio).toHaveBeenCalledWith('audio-finished', false)
+    expect(handlers.handleWorkflowFailed).toHaveBeenCalled()
+    expect(userCallbacks.onError).toHaveBeenCalledWith({ error: 'failed' }, '500')
+    expect(invalidateRunHistory).toHaveBeenCalledWith('/apps/app-1/workflow-runs')
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-workflow-run-utils.spec.ts

@@ -0,0 +1,431 @@
+import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { AppModeEnum } from '@/types/app'
+import {
+  applyRunningStateForMode,
+  applyStoppedState,
+  buildListeningTriggerNodeIds,
+  buildRunHistoryUrl,
+  buildTTSConfig,
+  buildWorkflowRunRequestBody,
+  clearListeningState,
+  clearWindowDebugControllers,
+  createFailedWorkflowState,
+  createRunningWorkflowState,
+  createStoppedWorkflowState,
+  mapPublishedWorkflowFeatures,
+  normalizePublishedWorkflowNodes,
+  resolveWorkflowRunUrl,
+  runTriggerDebug,
+  validateWorkflowRunRequest,
+} from '../use-workflow-run-utils'
+
+const {
+  mockPost,
+  mockHandleStream,
+  mockToastError,
+} = vi.hoisted(() => ({
+  mockPost: vi.fn(),
+  mockHandleStream: vi.fn(),
+  mockToastError: vi.fn(),
+}))
+
+vi.mock('@/service/base', () => ({
+  post: mockPost,
+  handleStream: mockHandleStream,
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: mockToastError,
+  },
+}))
+
+const createListeningActions = () => ({
+  setWorkflowRunningData: vi.fn(),
+  setIsListening: vi.fn(),
+  setShowVariableInspectPanel: vi.fn(),
+  setListeningTriggerType: vi.fn(),
+  setListeningTriggerNodeIds: vi.fn(),
+  setListeningTriggerIsAll: vi.fn(),
+  setListeningTriggerNodeId: vi.fn(),
+})
+
+describe('useWorkflowRun utils', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should resolve run history urls and run endpoints for workflow modes', () => {
+    expect(buildRunHistoryUrl({ id: 'app-1', mode: AppModeEnum.WORKFLOW })).toBe('/apps/app-1/workflow-runs')
+    expect(buildRunHistoryUrl({ id: 'app-1', mode: AppModeEnum.ADVANCED_CHAT })).toBe('/apps/app-1/advanced-chat/workflow-runs')
+
+    expect(resolveWorkflowRunUrl({ id: 'app-1', mode: AppModeEnum.WORKFLOW }, TriggerType.UserInput, true)).toBe('/apps/app-1/workflows/draft/run')
+    expect(resolveWorkflowRunUrl({ id: 'app-1', mode: AppModeEnum.ADVANCED_CHAT }, TriggerType.UserInput, false)).toBe('/apps/app-1/advanced-chat/workflows/draft/run')
+    expect(resolveWorkflowRunUrl({ id: 'app-1', mode: AppModeEnum.WORKFLOW }, TriggerType.Schedule, true)).toBe('/apps/app-1/workflows/draft/trigger/run')
+    expect(resolveWorkflowRunUrl({ id: 'app-1', mode: AppModeEnum.WORKFLOW }, TriggerType.All, true)).toBe('/apps/app-1/workflows/draft/trigger/run-all')
+  })
+
+  it('should build request bodies and validation errors for trigger runs', () => {
+    expect(buildWorkflowRunRequestBody(TriggerType.Schedule, {}, { scheduleNodeId: 'schedule-1' })).toEqual({ node_id: 'schedule-1' })
+    expect(buildWorkflowRunRequestBody(TriggerType.Webhook, {}, { webhookNodeId: 'webhook-1' })).toEqual({ node_id: 'webhook-1' })
+    expect(buildWorkflowRunRequestBody(TriggerType.Plugin, {}, { pluginNodeId: 'plugin-1' })).toEqual({ node_id: 'plugin-1' })
+    expect(buildWorkflowRunRequestBody(TriggerType.All, {}, { allNodeIds: ['trigger-1', 'trigger-2'] })).toEqual({ node_ids: ['trigger-1', 'trigger-2'] })
+    expect(buildWorkflowRunRequestBody(TriggerType.UserInput, { inputs: { query: 'hello' } })).toEqual({ inputs: { query: 'hello' } })
+
+    expect(validateWorkflowRunRequest(TriggerType.Schedule)).toBe('handleRun: schedule trigger run requires node id')
+    expect(validateWorkflowRunRequest(TriggerType.Webhook)).toBe('handleRun: webhook trigger run requires node id')
+    expect(validateWorkflowRunRequest(TriggerType.Plugin)).toBe('handleRun: plugin trigger run requires node id')
+    expect(validateWorkflowRunRequest(TriggerType.All)).toBe('')
+    expect(validateWorkflowRunRequest(TriggerType.All, { allNodeIds: [] })).toBe('')
+  })
+
+  it('should return empty trigger urls when app id is missing and keep user-input urls empty outside workflow debug', () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    expect(resolveWorkflowRunUrl(undefined, TriggerType.Plugin, true)).toBe('')
+    expect(resolveWorkflowRunUrl(undefined, TriggerType.All, true)).toBe('')
+    expect(resolveWorkflowRunUrl({ id: 'app-1', mode: AppModeEnum.WORKFLOW }, TriggerType.UserInput, false)).toBe('')
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith('handleRun: missing app id for trigger plugin run')
+    expect(consoleErrorSpy).toHaveBeenCalledWith('handleRun: missing app id for trigger run all')
+
+    consoleErrorSpy.mockRestore()
+  })
+
+  it('should configure listening state for trigger and non-trigger modes', () => {
+    const triggerActions = createListeningActions()
+
+    applyRunningStateForMode(triggerActions, TriggerType.All, { allNodeIds: ['trigger-1', 'trigger-2'] })
+
+    expect(triggerActions.setIsListening).toHaveBeenCalledWith(true)
+    expect(triggerActions.setShowVariableInspectPanel).toHaveBeenCalledWith(true)
+    expect(triggerActions.setListeningTriggerIsAll).toHaveBeenCalledWith(true)
+    expect(triggerActions.setListeningTriggerNodeIds).toHaveBeenCalledWith(['trigger-1', 'trigger-2'])
+    expect(triggerActions.setWorkflowRunningData).toHaveBeenCalledWith(createRunningWorkflowState())
+
+    const normalActions = createListeningActions()
+    applyRunningStateForMode(normalActions, TriggerType.UserInput)
+
+    expect(normalActions.setIsListening).toHaveBeenCalledWith(false)
+    expect(normalActions.setListeningTriggerType).toHaveBeenCalledWith(null)
+    expect(normalActions.setListeningTriggerNodeId).toHaveBeenCalledWith(null)
+    expect(normalActions.setListeningTriggerNodeIds).toHaveBeenCalledWith([])
+    expect(normalActions.setListeningTriggerIsAll).toHaveBeenCalledWith(false)
+    expect(normalActions.setWorkflowRunningData).toHaveBeenCalledWith(createRunningWorkflowState())
+  })
+
+  it('should clear listening state, stop state, and remove debug controllers', () => {
+    const listeningActions = createListeningActions()
+    clearListeningState(listeningActions)
+
+    expect(listeningActions.setIsListening).toHaveBeenCalledWith(false)
+    expect(listeningActions.setListeningTriggerType).toHaveBeenCalledWith(null)
+    expect(listeningActions.setListeningTriggerNodeId).toHaveBeenCalledWith(null)
+    expect(listeningActions.setListeningTriggerNodeIds).toHaveBeenCalledWith([])
+    expect(listeningActions.setListeningTriggerIsAll).toHaveBeenCalledWith(false)
+
+    const stoppedActions = createListeningActions()
+    applyStoppedState(stoppedActions)
+
+    expect(stoppedActions.setWorkflowRunningData).toHaveBeenCalledWith(createStoppedWorkflowState())
+    expect(stoppedActions.setShowVariableInspectPanel).toHaveBeenCalledWith(true)
+
+    const controllerTarget = {
+      __webhookDebugAbortController: { abort: vi.fn() },
+      __pluginDebugAbortController: { abort: vi.fn() },
+      __scheduleDebugAbortController: { abort: vi.fn() },
+      __allTriggersDebugAbortController: { abort: vi.fn() },
+    }
+    clearWindowDebugControllers(controllerTarget)
+    expect(controllerTarget).toEqual({})
+  })
+
+  it('should derive listening node ids, tts config, and published workflow mappings', () => {
+    expect(buildListeningTriggerNodeIds(TriggerType.Webhook, { webhookNodeId: 'webhook-1' })).toEqual(['webhook-1'])
+    expect(buildListeningTriggerNodeIds(TriggerType.Schedule, { scheduleNodeId: 'schedule-1' })).toEqual(['schedule-1'])
+    expect(buildListeningTriggerNodeIds(TriggerType.Plugin, { pluginNodeId: 'plugin-1' })).toEqual(['plugin-1'])
+    expect(buildListeningTriggerNodeIds(TriggerType.All, { allNodeIds: ['trigger-1', 'trigger-2'] })).toEqual(['trigger-1', 'trigger-2'])
+
+    expect(buildTTSConfig({ token: 'public-token' }, '/apps/app-1')).toEqual({
+      ttsUrl: '/text-to-audio',
+      ttsIsPublic: true,
+    })
+    expect(buildTTSConfig({ appId: 'app-1' }, '/explore/installed/app-1')).toEqual({
+      ttsUrl: '/installed-apps/app-1/text-to-audio',
+      ttsIsPublic: false,
+    })
+    expect(buildTTSConfig({ appId: 'app-1' }, '/apps/app-1/workflow')).toEqual({
+      ttsUrl: '/apps/app-1/text-to-audio',
+      ttsIsPublic: false,
+    })
+
+    const publishedWorkflow = {
+      graph: {
+        nodes: [{ id: 'node-1', selected: true, data: { selected: true, title: 'Start' } }],
+        edges: [],
+        viewport: { x: 0, y: 0, zoom: 1 },
+      },
+      features: {
+        opening_statement: 'hello',
+        suggested_questions: ['Q1'],
+        suggested_questions_after_answer: { enabled: true },
+        text_to_speech: { enabled: true },
+        speech_to_text: { enabled: true },
+        retriever_resource: { enabled: true },
+        sensitive_word_avoidance: { enabled: true },
+        file_upload: { enabled: true },
+      },
+    } as never
+
+    expect(normalizePublishedWorkflowNodes(publishedWorkflow)).toEqual([
+      { id: 'node-1', selected: false, data: { selected: false, title: 'Start' } },
+    ])
+    expect(mapPublishedWorkflowFeatures(publishedWorkflow)).toMatchObject({
+      opening: {
+        enabled: true,
+        opening_statement: 'hello',
+        suggested_questions: ['Q1'],
+      },
+      suggested: { enabled: true },
+      text2speech: { enabled: true },
+      speech2text: { enabled: true },
+      citation: { enabled: true },
+      moderation: { enabled: true },
+      file: { enabled: true },
+    })
+  })
+
+  it('should handle trigger debug null and invalid json responses as request failures', async () => {
+    const clearAbortController = vi.fn()
+    const clearListeningStateSpy = vi.fn()
+    const setAbortController = vi.fn()
+    const setWorkflowRunningData = vi.fn()
+    const controllerTarget: Record<string, unknown> = {}
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    mockPost.mockResolvedValueOnce(null)
+
+    await runTriggerDebug({
+      debugType: TriggerType.Webhook,
+      url: '/apps/app-1/workflows/draft/trigger/run',
+      requestBody: { node_id: 'webhook-1' },
+      baseSseOptions: {},
+      controllerTarget,
+      setAbortController,
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    expect(mockToastError).toHaveBeenCalledWith('Webhook debug request failed')
+    expect(clearAbortController).toHaveBeenCalledTimes(1)
+    expect(clearListeningStateSpy).not.toHaveBeenCalled()
+
+    mockPost.mockResolvedValueOnce(new Response('{invalid-json}', {
+      headers: { 'content-type': 'application/json' },
+    }))
+
+    await runTriggerDebug({
+      debugType: TriggerType.Schedule,
+      url: '/apps/app-1/workflows/draft/trigger/run',
+      requestBody: { node_id: 'schedule-1' },
+      baseSseOptions: {},
+      controllerTarget,
+      setAbortController,
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'handleRun: schedule debug response parse error',
+      expect.any(Error),
+    )
+    expect(mockToastError).toHaveBeenCalledWith('Schedule debug request failed')
+    expect(clearAbortController).toHaveBeenCalledTimes(2)
+    expect(clearListeningStateSpy).toHaveBeenCalledTimes(1)
+    expect(setWorkflowRunningData).not.toHaveBeenCalled()
+
+    consoleErrorSpy.mockRestore()
+  })
+
+  it('should handle trigger debug json failures and stream responses', async () => {
+    const clearAbortController = vi.fn()
+    const clearListeningStateSpy = vi.fn()
+    const setAbortController = vi.fn()
+    const setWorkflowRunningData = vi.fn()
+    const controllerTarget: Record<string, unknown> = {}
+    const baseSseOptions = {
+      onData: vi.fn(),
+      onCompleted: vi.fn(),
+    }
+
+    mockPost.mockResolvedValueOnce(new Response(JSON.stringify({ message: 'Webhook failed' }), {
+      headers: { 'content-type': 'application/json' },
+    }))
+
+    await runTriggerDebug({
+      debugType: TriggerType.Webhook,
+      url: '/apps/app-1/workflows/draft/trigger/run',
+      requestBody: { node_id: 'webhook-1' },
+      baseSseOptions,
+      controllerTarget,
+      setAbortController,
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    expect(setAbortController).toHaveBeenCalledTimes(1)
+    expect(mockToastError).toHaveBeenCalledWith('Webhook failed')
+    expect(clearAbortController).toHaveBeenCalled()
+    expect(clearListeningStateSpy).toHaveBeenCalled()
+    expect(setWorkflowRunningData).toHaveBeenCalledWith(createFailedWorkflowState('Webhook failed'))
+
+    mockPost.mockResolvedValueOnce(new Response('data: ok', {
+      headers: { 'content-type': 'text/event-stream' },
+    }))
+
+    await runTriggerDebug({
+      debugType: TriggerType.Plugin,
+      url: '/apps/app-1/workflows/draft/trigger/run',
+      requestBody: { node_id: 'plugin-1' },
+      baseSseOptions,
+      controllerTarget,
+      setAbortController,
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    expect(clearListeningStateSpy).toHaveBeenCalledTimes(2)
+    expect(mockHandleStream).toHaveBeenCalledTimes(1)
+  })
+
+  it('should retry waiting trigger debug responses until a stream is returned', async () => {
+    vi.useFakeTimers()
+    const clearAbortController = vi.fn()
+    const clearListeningStateSpy = vi.fn()
+    const setAbortController = vi.fn()
+    const setWorkflowRunningData = vi.fn()
+    const controllerTarget: Record<string, unknown> = {}
+    const baseSseOptions = {
+      onData: vi.fn(),
+      onCompleted: vi.fn(),
+    }
+
+    mockPost
+      .mockResolvedValueOnce(new Response(JSON.stringify({ status: 'waiting', retry_in: 1 }), {
+        headers: { 'content-type': 'application/json' },
+      }))
+      .mockResolvedValueOnce(new Response('data: ok', {
+        headers: { 'content-type': 'text/event-stream' },
+      }))
+
+    const runPromise = runTriggerDebug({
+      debugType: TriggerType.All,
+      url: '/apps/app-1/workflows/draft/trigger/run-all',
+      requestBody: { node_ids: ['trigger-1'] },
+      baseSseOptions,
+      controllerTarget,
+      setAbortController,
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    await vi.advanceTimersByTimeAsync(1)
+    await runPromise
+
+    expect(mockPost).toHaveBeenCalledTimes(2)
+    expect(clearListeningStateSpy).toHaveBeenCalledTimes(1)
+    expect(mockHandleStream).toHaveBeenCalledTimes(1)
+
+    vi.useRealTimers()
+  })
+
+  it('should stop trigger debug processing when the controller aborts before handling the response', async () => {
+    const clearAbortController = vi.fn()
+    const clearListeningStateSpy = vi.fn()
+    const setWorkflowRunningData = vi.fn()
+    const controllerTarget: Record<string, unknown> = {}
+
+    mockPost.mockResolvedValueOnce(new Response('data: ok', {
+      headers: { 'content-type': 'text/event-stream' },
+    }))
+
+    await runTriggerDebug({
+      debugType: TriggerType.Plugin,
+      url: '/apps/app-1/workflows/draft/trigger/run',
+      requestBody: { node_id: 'plugin-1' },
+      baseSseOptions: {},
+      controllerTarget,
+      setAbortController: (controller) => {
+        controller?.abort()
+      },
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    expect(mockHandleStream).not.toHaveBeenCalled()
+    expect(mockToastError).not.toHaveBeenCalled()
+    expect(clearAbortController).not.toHaveBeenCalled()
+    expect(clearListeningStateSpy).not.toHaveBeenCalled()
+    expect(setWorkflowRunningData).not.toHaveBeenCalled()
+  })
+
+  it('should handle Response and non-Response trigger debug exceptions correctly', async () => {
+    const clearAbortController = vi.fn()
+    const clearListeningStateSpy = vi.fn()
+    const setAbortController = vi.fn()
+    const setWorkflowRunningData = vi.fn()
+    const controllerTarget: Record<string, unknown> = {}
+
+    mockPost.mockRejectedValueOnce(new Response(JSON.stringify({ error: 'Plugin failed' }), {
+      headers: { 'content-type': 'application/json' },
+    }))
+
+    await runTriggerDebug({
+      debugType: TriggerType.Plugin,
+      url: '/apps/app-1/workflows/draft/trigger/run',
+      requestBody: { node_id: 'plugin-1' },
+      baseSseOptions: {},
+      controllerTarget,
+      setAbortController,
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    expect(mockToastError).toHaveBeenCalledWith('Plugin failed')
+    expect(clearAbortController).toHaveBeenCalledTimes(1)
+    expect(setWorkflowRunningData).toHaveBeenCalledWith(createFailedWorkflowState('Plugin failed'))
+    expect(clearListeningStateSpy).toHaveBeenCalledTimes(1)
+
+    mockPost.mockRejectedValueOnce(new Error('network failed'))
+
+    await runTriggerDebug({
+      debugType: TriggerType.Plugin,
+      url: '/apps/app-1/workflows/draft/trigger/run',
+      requestBody: { node_id: 'plugin-1' },
+      baseSseOptions: {},
+      controllerTarget,
+      setAbortController,
+      clearAbortController,
+      clearListeningState: clearListeningStateSpy,
+      setWorkflowRunningData,
+    })
+
+    expect(clearAbortController).toHaveBeenCalledTimes(1)
+    expect(setWorkflowRunningData).toHaveBeenCalledTimes(1)
+    expect(clearListeningStateSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should expose the canonical workflow state factories', () => {
+    expect(createRunningWorkflowState().result.status).toBe(WorkflowRunningStatus.Running)
+    expect(createStoppedWorkflowState().result.status).toBe(WorkflowRunningStatus.Stopped)
+    expect(createFailedWorkflowState('failed').result.status).toBe(WorkflowRunningStatus.Failed)
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-workflow-run.spec.ts

@@ -0,0 +1,592 @@
+import { act, renderHook } from '@testing-library/react'
+import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { useWorkflowRun } from '../use-workflow-run'
+
+type DebugAbortControllerRef = {
+  abort: () => void
+}
+
+type DebugControllerWindow = Window & {
+  __webhookDebugAbortController?: DebugAbortControllerRef
+  __pluginDebugAbortController?: DebugAbortControllerRef
+  __scheduleDebugAbortController?: DebugAbortControllerRef
+  __allTriggersDebugAbortController?: DebugAbortControllerRef
+}
+
+type WorkflowStoreState = {
+  backupDraft?: unknown
+  environmentVariables?: unknown
+  setBackupDraft?: (value: unknown) => void
+  setEnvironmentVariables?: (value: unknown) => void
+  setWorkflowRunningData?: (value: unknown) => void
+  setIsListening?: (value: boolean) => void
+  setShowVariableInspectPanel?: (value: boolean) => void
+  setListeningTriggerType?: (value: unknown) => void
+  setListeningTriggerNodeIds?: (value: string[]) => void
+  setListeningTriggerIsAll?: (value: boolean) => void
+  setListeningTriggerNodeId?: (value: string | null) => void
+}
+
+const mocks = vi.hoisted(() => {
+  const appStoreState = {
+    appDetail: {
+      id: 'app-1',
+      mode: 'workflow',
+      name: 'Workflow App',
+    },
+  }
+  const reactFlowStoreState = {
+    edges: [{ id: 'edge-1' }],
+    getNodes: vi.fn(),
+    setNodes: vi.fn(),
+  }
+  const workflowStoreState: WorkflowStoreState = {}
+  const workflowStoreSetState = vi.fn((partial: Record<string, unknown>) => {
+    Object.assign(workflowStoreState, partial)
+  })
+  const featuresStoreState = {
+    features: {
+      file: {
+        enabled: true,
+      },
+    },
+  }
+  const featuresStoreSetState = vi.fn((partial: Record<string, unknown>) => {
+    Object.assign(featuresStoreState, partial)
+  })
+
+  return {
+    appStoreState,
+    reactFlowStoreState,
+    workflowStoreState,
+    workflowStoreSetState,
+    featuresStoreState,
+    featuresStoreSetState,
+    mockGetViewport: vi.fn(),
+    mockDoSyncWorkflowDraft: vi.fn(),
+    mockHandleUpdateWorkflowCanvas: vi.fn(),
+    mockFetchInspectVars: vi.fn(),
+    mockInvalidateAllLastRun: vi.fn(),
+    mockInvalidateRunHistory: vi.fn(),
+    mockSsePost: vi.fn(),
+    mockSseGet: vi.fn(),
+    mockHandleStream: vi.fn(),
+    mockPost: vi.fn(),
+    mockStopWorkflowRun: vi.fn(),
+    mockTrackEvent: vi.fn(),
+    mockGetAudioPlayer: vi.fn(),
+    mockResetMsgId: vi.fn(),
+    mockCreateBaseWorkflowRunCallbacks: vi.fn(),
+    mockCreateFinalWorkflowRunCallbacks: vi.fn(),
+    runEventHandlers: {
+      handleWorkflowStarted: vi.fn(),
+      handleWorkflowFinished: vi.fn(),
+      handleWorkflowFailed: vi.fn(),
+      handleWorkflowNodeStarted: vi.fn(),
+      handleWorkflowNodeFinished: vi.fn(),
+      handleWorkflowNodeHumanInputRequired: vi.fn(),
+      handleWorkflowNodeHumanInputFormFilled: vi.fn(),
+      handleWorkflowNodeHumanInputFormTimeout: vi.fn(),
+      handleWorkflowNodeIterationStarted: vi.fn(),
+      handleWorkflowNodeIterationNext: vi.fn(),
+      handleWorkflowNodeIterationFinished: vi.fn(),
+      handleWorkflowNodeLoopStarted: vi.fn(),
+      handleWorkflowNodeLoopNext: vi.fn(),
+      handleWorkflowNodeLoopFinished: vi.fn(),
+      handleWorkflowNodeRetry: vi.fn(),
+      handleWorkflowAgentLog: vi.fn(),
+      handleWorkflowTextChunk: vi.fn(),
+      handleWorkflowTextReplace: vi.fn(),
+      handleWorkflowPaused: vi.fn(),
+    },
+  }
+})
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({
+    getState: () => mocks.reactFlowStoreState,
+  }),
+  useReactFlow: () => ({
+    getViewport: mocks.mockGetViewport,
+  }),
+}))
+
+vi.mock('@/app/components/app/store', () => {
+  const useStore = Object.assign(vi.fn(), {
+    getState: () => mocks.appStoreState,
+  })
+
+  return {
+    useStore,
+  }
+})
+
+vi.mock('@/app/components/base/amplitude', () => ({
+  trackEvent: mocks.mockTrackEvent,
+}))
+
+vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
+  AudioPlayerManager: {
+    getInstance: () => ({
+      getAudioPlayer: mocks.mockGetAudioPlayer,
+      resetMsgId: mocks.mockResetMsgId,
+    }),
+  },
+}))
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeaturesStore: () => ({
+    getState: () => mocks.featuresStoreState,
+    setState: mocks.featuresStoreSetState,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-workflow-interactions', () => ({
+  useWorkflowUpdate: () => ({
+    handleUpdateWorkflowCanvas: mocks.mockHandleUpdateWorkflowCanvas,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-workflow-run-event/use-workflow-run-event', () => ({
+  useWorkflowRunEvent: () => mocks.runEventHandlers,
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => mocks.workflowStoreState,
+    setState: mocks.workflowStoreSetState,
+  }),
+}))
+
+vi.mock('@/next/navigation', () => ({
+  usePathname: () => '/apps/app-1/workflow',
+}))
+
+vi.mock('@/service/base', () => ({
+  ssePost: mocks.mockSsePost,
+  sseGet: mocks.mockSseGet,
+  post: mocks.mockPost,
+  handleStream: mocks.mockHandleStream,
+}))
+
+vi.mock('@/service/use-workflow', () => ({
+  useInvalidAllLastRun: () => mocks.mockInvalidateAllLastRun,
+  useInvalidateWorkflowRunHistory: () => mocks.mockInvalidateRunHistory,
+  useInvalidateConversationVarValues: () => vi.fn(),
+  useInvalidateSysVarValues: () => vi.fn(),
+}))
+
+vi.mock('@/service/workflow', () => ({
+  stopWorkflowRun: mocks.mockStopWorkflowRun,
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars', () => ({
+  useSetWorkflowVarsWithValue: () => ({
+    fetchInspectVars: mocks.mockFetchInspectVars,
+  }),
+}))
+
+vi.mock('../use-configs-map', () => ({
+  useConfigsMap: () => ({
+    flowId: 'flow-1',
+    flowType: 'workflow',
+  }),
+}))
+
+vi.mock('../use-nodes-sync-draft', () => ({
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: mocks.mockDoSyncWorkflowDraft,
+  }),
+}))
+
+vi.mock('../use-workflow-run-callbacks', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../use-workflow-run-callbacks')>()
+
+  return {
+    ...actual,
+    createBaseWorkflowRunCallbacks: vi.fn((params) => {
+      mocks.mockCreateBaseWorkflowRunCallbacks(params)
+      return actual.createBaseWorkflowRunCallbacks(params)
+    }),
+    createFinalWorkflowRunCallbacks: vi.fn((params) => {
+      mocks.mockCreateFinalWorkflowRunCallbacks(params)
+      return actual.createFinalWorkflowRunCallbacks(params)
+    }),
+  }
+})
+
+const createWorkflowStoreState = () => ({
+  backupDraft: undefined,
+  environmentVariables: [{ id: 'env-current', value: 'secret' }],
+  setBackupDraft: vi.fn((value: unknown) => {
+    mocks.workflowStoreState.backupDraft = value
+  }),
+  setEnvironmentVariables: vi.fn((value: unknown) => {
+    mocks.workflowStoreState.environmentVariables = value
+  }),
+  setWorkflowRunningData: vi.fn(),
+  setIsListening: vi.fn(),
+  setShowVariableInspectPanel: vi.fn(),
+  setListeningTriggerType: vi.fn(),
+  setListeningTriggerNodeIds: vi.fn(),
+  setListeningTriggerIsAll: vi.fn(),
+  setListeningTriggerNodeId: vi.fn(),
+})
+
+describe('useWorkflowRun', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.body.innerHTML = '<div id="workflow-container"></div>'
+    const workflowContainer = document.getElementById('workflow-container')!
+    Object.defineProperty(workflowContainer, 'clientWidth', { value: 960, configurable: true })
+    Object.defineProperty(workflowContainer, 'clientHeight', { value: 540, configurable: true })
+
+    mocks.reactFlowStoreState.getNodes.mockReturnValue([
+      { id: 'node-1', data: { selected: true, _runningStatus: 'running' } },
+    ])
+    mocks.mockGetViewport.mockReturnValue({ x: 1, y: 2, zoom: 1.5 })
+    mocks.mockDoSyncWorkflowDraft.mockResolvedValue(undefined)
+    mocks.mockPost.mockResolvedValue(new Response('data: ok', {
+      headers: { 'content-type': 'text/event-stream' },
+    }))
+    mocks.mockGetAudioPlayer.mockReturnValue({
+      playAudioWithAudio: vi.fn(),
+    })
+    mocks.workflowStoreState.backupDraft = undefined
+    Object.assign(mocks.workflowStoreState, createWorkflowStoreState())
+    mocks.workflowStoreSetState.mockImplementation((partial: Record<string, unknown>) => {
+      Object.assign(mocks.workflowStoreState, partial)
+    })
+    mocks.featuresStoreState.features = {
+      file: {
+        enabled: true,
+      },
+    }
+  })
+
+  it('should backup the current draft once and skip subsequent backups until it is cleared', () => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    act(() => {
+      result.current.handleBackupDraft()
+      result.current.handleBackupDraft()
+    })
+
+    expect(mocks.workflowStoreState.setBackupDraft).toHaveBeenCalledTimes(1)
+    expect(mocks.workflowStoreState.setBackupDraft).toHaveBeenCalledWith({
+      nodes: [{ id: 'node-1', data: { selected: true, _runningStatus: 'running' } }],
+      edges: [{ id: 'edge-1' }],
+      viewport: { x: 1, y: 2, zoom: 1.5 },
+      features: { file: { enabled: true } },
+      environmentVariables: [{ id: 'env-current', value: 'secret' }],
+    })
+    expect(mocks.mockDoSyncWorkflowDraft).toHaveBeenCalledTimes(1)
+  })
+
+  it('should load a backup draft into canvas, environment variables, and features state', () => {
+    mocks.workflowStoreState.backupDraft = {
+      nodes: [{ id: 'backup-node' }],
+      edges: [{ id: 'backup-edge' }],
+      viewport: { x: 0, y: 0, zoom: 2 },
+      features: { opening: { enabled: true } },
+      environmentVariables: [{ id: 'env-backup', value: 'value' }],
+    }
+
+    const { result } = renderHook(() => useWorkflowRun())
+
+    act(() => {
+      result.current.handleLoadBackupDraft()
+    })
+
+    expect(mocks.mockHandleUpdateWorkflowCanvas).toHaveBeenCalledWith({
+      nodes: [{ id: 'backup-node' }],
+      edges: [{ id: 'backup-edge' }],
+      viewport: { x: 0, y: 0, zoom: 2 },
+    })
+    expect(mocks.workflowStoreState.setEnvironmentVariables).toHaveBeenCalledWith([{ id: 'env-backup', value: 'value' }])
+    expect(mocks.featuresStoreSetState).toHaveBeenCalledWith({
+      features: { opening: { enabled: true } },
+    })
+    expect(mocks.workflowStoreState.setBackupDraft).toHaveBeenCalledWith(undefined)
+  })
+
+  it('should prepare the graph and dispatch a workflow run through ssePost for user-input mode', async () => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    await act(async () => {
+      await result.current.handleRun({ inputs: { query: 'hello' } })
+    })
+
+    expect(mocks.reactFlowStoreState.setNodes).toHaveBeenCalledWith([
+      { id: 'node-1', data: { selected: false, _runningStatus: undefined } },
+    ])
+    expect(mocks.mockDoSyncWorkflowDraft).toHaveBeenCalled()
+    expect(mocks.workflowStoreSetState).toHaveBeenCalledWith({ historyWorkflowData: undefined })
+    expect(mocks.workflowStoreState.setIsListening).toHaveBeenCalledWith(false)
+    expect(mocks.workflowStoreState.setListeningTriggerType).toHaveBeenCalledWith(null)
+    expect(mocks.workflowStoreState.setListeningTriggerNodeId).toHaveBeenCalledWith(null)
+    expect(mocks.workflowStoreState.setListeningTriggerNodeIds).toHaveBeenCalledWith([])
+    expect(mocks.workflowStoreState.setListeningTriggerIsAll).toHaveBeenCalledWith(false)
+    expect(mocks.workflowStoreState.setWorkflowRunningData).toHaveBeenCalledWith(expect.objectContaining({
+      result: expect.objectContaining({
+        status: WorkflowRunningStatus.Running,
+      }),
+    }))
+    expect(mocks.mockSsePost).toHaveBeenCalledWith(
+      '/apps/app-1/workflows/draft/run',
+      { body: { inputs: { query: 'hello' } } },
+      expect.objectContaining({
+        getAbortController: expect.any(Function),
+      }),
+    )
+  })
+
+  it.each([
+    {
+      title: 'schedule',
+      params: {},
+      options: { mode: TriggerType.Schedule, scheduleNodeId: 'schedule-1' },
+      expectedUrl: '/apps/app-1/workflows/draft/trigger/run',
+      expectedBody: { node_id: 'schedule-1' },
+      expectedNodeIds: ['schedule-1'],
+      expectedIsAll: false,
+    },
+    {
+      title: 'webhook',
+      params: { node_id: 'webhook-1' },
+      options: { mode: TriggerType.Webhook, webhookNodeId: 'webhook-1' },
+      expectedUrl: '/apps/app-1/workflows/draft/trigger/run',
+      expectedBody: { node_id: 'webhook-1' },
+      expectedNodeIds: ['webhook-1'],
+      expectedIsAll: false,
+    },
+    {
+      title: 'plugin',
+      params: { node_id: 'plugin-1' },
+      options: { mode: TriggerType.Plugin, pluginNodeId: 'plugin-1' },
+      expectedUrl: '/apps/app-1/workflows/draft/trigger/run',
+      expectedBody: { node_id: 'plugin-1' },
+      expectedNodeIds: ['plugin-1'],
+      expectedIsAll: false,
+    },
+    {
+      title: 'all',
+      params: { node_ids: ['trigger-1', 'trigger-2'] },
+      options: { mode: TriggerType.All, allNodeIds: ['trigger-1', 'trigger-2'] },
+      expectedUrl: '/apps/app-1/workflows/draft/trigger/run-all',
+      expectedBody: { node_ids: ['trigger-1', 'trigger-2'] },
+      expectedNodeIds: ['trigger-1', 'trigger-2'],
+      expectedIsAll: true,
+    },
+  ])('should dispatch $title trigger runs through the debug runner integration', async ({
+    params,
+    options,
+    expectedUrl,
+    expectedBody,
+    expectedNodeIds,
+    expectedIsAll,
+  }) => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    await act(async () => {
+      await result.current.handleRun(params, undefined, options)
+    })
+
+    expect(mocks.mockPost).toHaveBeenCalledWith(
+      expectedUrl,
+      expect.objectContaining({
+        body: expectedBody,
+        signal: expect.any(AbortSignal),
+      }),
+      { needAllResponseContent: true },
+    )
+    expect(mocks.workflowStoreState.setIsListening).toHaveBeenCalledWith(true)
+    expect(mocks.workflowStoreState.setListeningTriggerNodeIds).toHaveBeenCalledWith(expectedNodeIds)
+    expect(mocks.workflowStoreState.setListeningTriggerIsAll).toHaveBeenCalledWith(expectedIsAll)
+    expect(mocks.mockSsePost).not.toHaveBeenCalled()
+  })
+
+  it('should expose the workflow-failed tracker through the callback factory context', async () => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    await act(async () => {
+      await result.current.handleRun({ inputs: { query: 'hello' } })
+    })
+
+    const baseCallbackFactoryContext = mocks.mockCreateBaseWorkflowRunCallbacks.mock.calls.at(-1)?.[0] as {
+      trackWorkflowRunFailed: (params: { error?: string, node_type?: string }) => void
+    }
+
+    baseCallbackFactoryContext.trackWorkflowRunFailed({ error: 'failed', node_type: 'llm' })
+
+    expect(mocks.mockTrackEvent).toHaveBeenCalledWith('workflow_run_failed', {
+      workflow_id: 'flow-1',
+      reason: 'failed',
+      node_type: 'llm',
+    })
+  })
+
+  it('should lazily create audio players with the correct public and private tts urls', async () => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    await act(async () => {
+      await result.current.handleRun({ token: 'public-token' })
+    })
+
+    const publicBaseCallbackFactoryContext = mocks.mockCreateBaseWorkflowRunCallbacks.mock.calls.at(-1)?.[0] as {
+      getOrCreatePlayer: () => unknown
+    }
+
+    publicBaseCallbackFactoryContext.getOrCreatePlayer()
+
+    expect(mocks.mockGetAudioPlayer).toHaveBeenCalledWith(
+      '/text-to-audio',
+      true,
+      expect.any(String),
+      'none',
+      'none',
+      expect.any(Function),
+    )
+
+    mocks.mockSsePost.mockClear()
+    mocks.mockGetAudioPlayer.mockClear()
+
+    await act(async () => {
+      await result.current.handleRun({ appId: 'app-2' })
+    })
+
+    const privateBaseCallbackFactoryContext = mocks.mockCreateBaseWorkflowRunCallbacks.mock.calls.at(-1)?.[0] as {
+      getOrCreatePlayer: () => unknown
+    }
+
+    privateBaseCallbackFactoryContext.getOrCreatePlayer()
+
+    expect(mocks.mockGetAudioPlayer).toHaveBeenCalledWith(
+      '/apps/app-2/text-to-audio',
+      false,
+      expect.any(String),
+      'none',
+      'none',
+      expect.any(Function),
+    )
+  })
+
+  it('should stop workflow runs by task id or by aborting active debug controllers', async () => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    await act(async () => {
+      await result.current.handleRun({ inputs: { query: 'hello' } })
+    })
+
+    act(() => {
+      result.current.handleStopRun('task-1')
+    })
+
+    expect(mocks.mockStopWorkflowRun).toHaveBeenCalledWith('/apps/app-1/workflow-runs/tasks/task-1/stop')
+    expect(mocks.workflowStoreState.setWorkflowRunningData).toHaveBeenCalledWith(expect.objectContaining({
+      result: expect.objectContaining({
+        status: WorkflowRunningStatus.Stopped,
+      }),
+    }))
+
+    const webhookAbort = vi.fn()
+    const pluginAbort = vi.fn()
+    const scheduleAbort = vi.fn()
+    const allTriggersAbort = vi.fn()
+    const windowWithDebugControllers = window as DebugControllerWindow
+    windowWithDebugControllers.__webhookDebugAbortController = { abort: webhookAbort }
+    windowWithDebugControllers.__pluginDebugAbortController = { abort: pluginAbort }
+    windowWithDebugControllers.__scheduleDebugAbortController = { abort: scheduleAbort }
+    windowWithDebugControllers.__allTriggersDebugAbortController = { abort: allTriggersAbort }
+    const refController = new AbortController()
+    const refAbortSpy = vi.spyOn(refController, 'abort')
+    const { getAbortController } = mocks.mockSsePost.mock.calls.at(-1)?.[2] as {
+      getAbortController?: (controller: AbortController) => void
+    }
+    getAbortController?.(refController)
+
+    act(() => {
+      result.current.handleStopRun('')
+    })
+
+    expect(webhookAbort).toHaveBeenCalled()
+    expect(pluginAbort).toHaveBeenCalled()
+    expect(scheduleAbort).toHaveBeenCalled()
+    expect(allTriggersAbort).toHaveBeenCalled()
+    expect(refAbortSpy).toHaveBeenCalled()
+  })
+
+  it('should restore published workflow graph, features, and environment variables', () => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    act(() => {
+      result.current.handleRestoreFromPublishedWorkflow({
+        graph: {
+          nodes: [{ id: 'published-node', selected: true, data: { selected: true, label: 'Published' } }],
+          edges: [{ id: 'published-edge' }],
+          viewport: { x: 10, y: 20, zoom: 0.8 },
+        },
+        features: {
+          opening_statement: 'hello',
+          suggested_questions: ['Q1'],
+          suggested_questions_after_answer: { enabled: true },
+          text_to_speech: { enabled: true },
+          speech_to_text: { enabled: true },
+          retriever_resource: { enabled: true },
+          sensitive_word_avoidance: { enabled: true },
+          file_upload: { enabled: true },
+        },
+        environment_variables: [{ id: 'env-published', value: 'value' }],
+      } as never)
+    })
+
+    expect(mocks.mockHandleUpdateWorkflowCanvas).toHaveBeenCalledWith({
+      nodes: [{ id: 'published-node', selected: false, data: { selected: false, label: 'Published' } }],
+      edges: [{ id: 'published-edge' }],
+      viewport: { x: 10, y: 20, zoom: 0.8 },
+    })
+    expect(mocks.featuresStoreSetState).toHaveBeenCalledWith({
+      features: expect.objectContaining({
+        opening: expect.objectContaining({
+          enabled: true,
+          opening_statement: 'hello',
+        }),
+        file: { enabled: true },
+      }),
+    })
+    expect(mocks.workflowStoreState.setEnvironmentVariables).toHaveBeenCalledWith([{ id: 'env-published', value: 'value' }])
+  })
+
+  it('should restore published workflows with empty environment variables as an empty list', () => {
+    const { result } = renderHook(() => useWorkflowRun())
+
+    act(() => {
+      result.current.handleRestoreFromPublishedWorkflow({
+        graph: {
+          nodes: [{ id: 'published-node', selected: true, data: { selected: true, label: 'Published' } }],
+          edges: [],
+          viewport: { x: 0, y: 0, zoom: 1 },
+        },
+        features: {
+          opening_statement: '',
+          suggested_questions: [],
+          suggested_questions_after_answer: { enabled: false },
+          text_to_speech: { enabled: false },
+          speech_to_text: { enabled: false },
+          retriever_resource: { enabled: false },
+          sensitive_word_avoidance: { enabled: false },
+          file_upload: { enabled: false },
+        },
+      } as never)
+    })
+
+    expect(mocks.featuresStoreSetState).toHaveBeenCalledWith({
+      features: expect.objectContaining({
+        opening: expect.objectContaining({ enabled: false }),
+        file: { enabled: false },
+      }),
+    })
+    expect(mocks.workflowStoreState.setEnvironmentVariables).toHaveBeenCalledWith([])
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-workflow-start-run.spec.tsx

@@ -0,0 +1,391 @@
+import { act, renderHook } from '@testing-library/react'
+import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
+import {
+  BlockEnum,
+  WorkflowRunningStatus,
+} from '@/app/components/workflow/types'
+import { useWorkflowStartRun } from '../use-workflow-start-run'
+
+const mockGetNodes = vi.fn()
+const mockGetFeaturesState = vi.fn()
+const mockHandleCancelDebugAndPreviewPanel = vi.fn()
+const mockHandleRun = vi.fn()
+const mockDoSyncWorkflowDraft = vi.fn()
+const mockUseIsChatMode = vi.fn()
+
+const mockSetShowDebugAndPreviewPanel = vi.fn()
+const mockSetShowInputsPanel = vi.fn()
+const mockSetShowEnvPanel = vi.fn()
+const mockSetShowGlobalVariablePanel = vi.fn()
+const mockSetShowChatVariablePanel = vi.fn()
+const mockSetListeningTriggerType = vi.fn()
+const mockSetListeningTriggerNodeId = vi.fn()
+const mockSetListeningTriggerNodeIds = vi.fn()
+const mockSetListeningTriggerIsAll = vi.fn()
+const mockSetHistoryWorkflowData = vi.fn()
+
+let workflowStoreState: Record<string, unknown>
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => ({
+    getState: () => ({
+      getNodes: mockGetNodes,
+    }),
+  }),
+}))
+
+vi.mock('@/app/components/base/features/hooks', () => ({
+  useFeaturesStore: () => ({
+    getState: mockGetFeaturesState,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useWorkflowInteractions: () => ({
+    handleCancelDebugAndPreviewPanel: mockHandleCancelDebugAndPreviewPanel,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useWorkflowStore: () => ({
+    getState: () => workflowStoreState,
+  }),
+}))
+
+vi.mock('@/app/components/workflow-app/hooks', () => ({
+  useIsChatMode: () => mockUseIsChatMode(),
+  useNodesSyncDraft: () => ({
+    doSyncWorkflowDraft: mockDoSyncWorkflowDraft,
+  }),
+  useWorkflowRun: () => ({
+    handleRun: mockHandleRun,
+  }),
+}))
+
+const createWorkflowStoreState = (overrides: Record<string, unknown> = {}) => ({
+  workflowRunningData: undefined,
+  showDebugAndPreviewPanel: false,
+  setShowDebugAndPreviewPanel: mockSetShowDebugAndPreviewPanel,
+  setShowInputsPanel: mockSetShowInputsPanel,
+  setShowEnvPanel: mockSetShowEnvPanel,
+  setShowGlobalVariablePanel: mockSetShowGlobalVariablePanel,
+  setShowChatVariablePanel: mockSetShowChatVariablePanel,
+  setListeningTriggerType: mockSetListeningTriggerType,
+  setListeningTriggerNodeId: mockSetListeningTriggerNodeId,
+  setListeningTriggerNodeIds: mockSetListeningTriggerNodeIds,
+  setListeningTriggerIsAll: mockSetListeningTriggerIsAll,
+  setHistoryWorkflowData: mockSetHistoryWorkflowData,
+  ...overrides,
+})
+
+describe('useWorkflowStartRun', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    workflowStoreState = createWorkflowStoreState()
+    mockGetNodes.mockReturnValue([
+      { id: 'start-1', data: { type: BlockEnum.Start, variables: [] } },
+    ])
+    mockGetFeaturesState.mockReturnValue({
+      features: {
+        file: {
+          image: {
+            enabled: false,
+          },
+        },
+      },
+    })
+    mockDoSyncWorkflowDraft.mockResolvedValue(undefined)
+    mockUseIsChatMode.mockReturnValue(false)
+  })
+
+  it('should run the workflow immediately when there are no start variables and no image upload input', async () => {
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowEnvPanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowGlobalVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockDoSyncWorkflowDraft).toHaveBeenCalled()
+    expect(mockHandleRun).toHaveBeenCalledWith({ inputs: {}, files: [] })
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(false)
+  })
+
+  it('should open the input panel instead of running immediately when start inputs are required', async () => {
+    mockGetNodes.mockReturnValue([
+      { id: 'start-1', data: { type: BlockEnum.Start, variables: [{ name: 'query' }] } },
+    ])
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(true)
+  })
+
+  it('should open the input panel when image upload is enabled even without start variables', async () => {
+    mockGetFeaturesState.mockReturnValue({
+      features: {
+        file: {
+          image: {
+            enabled: true,
+          },
+        },
+      },
+    })
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(true)
+  })
+
+  it('should cancel the current debug panel instead of starting another workflow when one is already open', async () => {
+    workflowStoreState = createWorkflowStoreState({
+      showDebugAndPreviewPanel: true,
+    })
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockHandleCancelDebugAndPreviewPanel).toHaveBeenCalled()
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+
+  it('should short-circuit workflow start when a run is already in progress', async () => {
+    workflowStoreState = createWorkflowStoreState({
+      workflowRunningData: {
+        result: {
+          status: WorkflowRunningStatus.Running,
+        },
+      },
+    })
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowStartRunInWorkflow()
+    })
+
+    expect(mockSetShowEnvPanel).not.toHaveBeenCalled()
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+
+  it('should configure schedule trigger runs and execute the workflow with schedule options', async () => {
+    mockGetNodes.mockReturnValue([
+      { id: 'schedule-1', data: { type: BlockEnum.TriggerSchedule } },
+    ])
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowTriggerScheduleRunInWorkflow('schedule-1')
+    })
+
+    expect(mockSetShowEnvPanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowGlobalVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockSetListeningTriggerType).toHaveBeenCalledWith(BlockEnum.TriggerSchedule)
+    expect(mockSetListeningTriggerNodeId).toHaveBeenCalledWith('schedule-1')
+    expect(mockSetListeningTriggerNodeIds).toHaveBeenCalledWith(['schedule-1'])
+    expect(mockSetListeningTriggerIsAll).toHaveBeenCalledWith(false)
+    expect(mockDoSyncWorkflowDraft).toHaveBeenCalled()
+    expect(mockHandleRun).toHaveBeenCalledWith(
+      {},
+      undefined,
+      {
+        mode: TriggerType.Schedule,
+        scheduleNodeId: 'schedule-1',
+      },
+    )
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(false)
+  })
+
+  it('should cancel schedule trigger execution when the debug panel is already open', async () => {
+    workflowStoreState = createWorkflowStoreState({
+      showDebugAndPreviewPanel: true,
+    })
+    mockGetNodes.mockReturnValue([
+      { id: 'schedule-1', data: { type: BlockEnum.TriggerSchedule } },
+    ])
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowTriggerScheduleRunInWorkflow('schedule-1')
+    })
+
+    expect(mockHandleCancelDebugAndPreviewPanel).toHaveBeenCalled()
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    {
+      title: 'schedule',
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerScheduleRunInWorkflow(undefined),
+    },
+    {
+      title: 'webhook',
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerWebhookRunInWorkflow({ nodeId: '' }),
+    },
+    {
+      title: 'plugin',
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerPluginRunInWorkflow(''),
+    },
+  ])('should ignore $title trigger execution when the node id is empty', async ({ invoke }) => {
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await invoke(result.current)
+    })
+
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    {
+      title: 'schedule',
+      warnMessage: 'handleWorkflowTriggerScheduleRunInWorkflow: schedule node not found',
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerScheduleRunInWorkflow('schedule-missing'),
+    },
+    {
+      title: 'webhook',
+      warnMessage: 'handleWorkflowTriggerWebhookRunInWorkflow: webhook node not found',
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerWebhookRunInWorkflow({ nodeId: 'webhook-missing' }),
+    },
+    {
+      title: 'plugin',
+      warnMessage: 'handleWorkflowTriggerPluginRunInWorkflow: plugin node not found',
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerPluginRunInWorkflow('plugin-missing'),
+    },
+  ])('should warn when the $title trigger node cannot be found', async ({ warnMessage, invoke }) => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mockGetNodes.mockReturnValue([{ id: 'other-node', data: { type: BlockEnum.Start } }])
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await invoke(result.current)
+    })
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(warnMessage, expect.stringContaining('missing'))
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+
+    consoleWarnSpy.mockRestore()
+  })
+
+  it.each([
+    {
+      title: 'webhook',
+      nodeId: 'webhook-1',
+      nodeType: BlockEnum.TriggerWebhook,
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerWebhookRunInWorkflow({ nodeId: 'webhook-1' }),
+      expectedParams: { node_id: 'webhook-1' },
+      expectedOptions: { mode: TriggerType.Webhook, webhookNodeId: 'webhook-1' },
+    },
+    {
+      title: 'plugin',
+      nodeId: 'plugin-1',
+      nodeType: BlockEnum.TriggerPlugin,
+      invoke: (hook: ReturnType<typeof useWorkflowStartRun>) => hook.handleWorkflowTriggerPluginRunInWorkflow('plugin-1'),
+      expectedParams: { node_id: 'plugin-1' },
+      expectedOptions: { mode: TriggerType.Plugin, pluginNodeId: 'plugin-1' },
+    },
+  ])('should configure $title trigger runs with node-specific options', async ({ nodeId, nodeType, invoke, expectedParams, expectedOptions }) => {
+    mockGetNodes.mockReturnValue([
+      { id: nodeId, data: { type: nodeType } },
+    ])
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await invoke(result.current)
+    })
+
+    expect(mockSetShowEnvPanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowGlobalVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(false)
+    expect(mockSetListeningTriggerType).toHaveBeenCalledWith(nodeType)
+    expect(mockSetListeningTriggerNodeId).toHaveBeenCalledWith(nodeId)
+    expect(mockSetListeningTriggerNodeIds).toHaveBeenCalledWith([nodeId])
+    expect(mockSetListeningTriggerIsAll).toHaveBeenCalledWith(false)
+    expect(mockDoSyncWorkflowDraft).toHaveBeenCalled()
+    expect(mockHandleRun).toHaveBeenCalledWith(expectedParams, undefined, expectedOptions)
+  })
+
+  it('should run all triggers and mark the listener state as global', async () => {
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowRunAllTriggersInWorkflow(['trigger-1', 'trigger-2'])
+    })
+
+    expect(mockSetShowEnvPanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowGlobalVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowInputsPanel).toHaveBeenCalledWith(false)
+    expect(mockSetListeningTriggerIsAll).toHaveBeenCalledWith(true)
+    expect(mockSetListeningTriggerNodeIds).toHaveBeenCalledWith(['trigger-1', 'trigger-2'])
+    expect(mockSetListeningTriggerNodeId).toHaveBeenCalledWith(null)
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockDoSyncWorkflowDraft).toHaveBeenCalled()
+    expect(mockHandleRun).toHaveBeenCalledWith(
+      { node_ids: ['trigger-1', 'trigger-2'] },
+      undefined,
+      {
+        mode: TriggerType.All,
+        allNodeIds: ['trigger-1', 'trigger-2'],
+      },
+    )
+  })
+
+  it('should ignore run-all requests when there are no trigger nodes', async () => {
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      await result.current.handleWorkflowRunAllTriggersInWorkflow([])
+    })
+
+    expect(mockSetListeningTriggerIsAll).not.toHaveBeenCalled()
+    expect(mockDoSyncWorkflowDraft).not.toHaveBeenCalled()
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+
+  it('should route handleStartWorkflowRun to the chatflow path when chat mode is enabled', async () => {
+    mockUseIsChatMode.mockReturnValue(true)
+
+    const { result } = renderHook(() => useWorkflowStartRun())
+
+    await act(async () => {
+      result.current.handleStartWorkflowRun()
+    })
+
+    expect(mockSetShowEnvPanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowChatVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowGlobalVariablePanel).toHaveBeenCalledWith(false)
+    expect(mockSetShowDebugAndPreviewPanel).toHaveBeenCalledWith(true)
+    expect(mockSetHistoryWorkflowData).toHaveBeenCalledWith(undefined)
+    expect(mockHandleRun).not.toHaveBeenCalled()
+  })
+})

web/app/components/workflow-app/hooks/__tests__/use-workflow-template.spec.ts

@@ -0,0 +1,82 @@
+import { renderHook } from '@testing-library/react'
+import { useWorkflowTemplate } from '../use-workflow-template'
+
+const mockUseIsChatMode = vi.fn()
+let generateNewNodeCalls: Array<Record<string, unknown>> = []
+
+vi.mock('@/app/components/workflow-app/hooks/use-is-chat-mode', () => ({
+  useIsChatMode: () => mockUseIsChatMode(),
+}))
+
+vi.mock('@/app/components/workflow/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/app/components/workflow/utils')>()
+  return {
+    ...actual,
+    generateNewNode: (args: { id?: string, data: Record<string, unknown>, position: Record<string, unknown> }) => {
+      generateNewNodeCalls.push(args)
+      return {
+        newNode: {
+          id: args.id ?? `generated-${generateNewNodeCalls.length}`,
+          data: args.data,
+          position: args.position,
+        },
+      }
+    },
+  }
+})
+
+describe('useWorkflowTemplate', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    generateNewNodeCalls = []
+  })
+
+  it('should return only the start node template in workflow mode', () => {
+    mockUseIsChatMode.mockReturnValue(false)
+
+    const { result } = renderHook(() => useWorkflowTemplate())
+
+    expect(result.current.nodes).toHaveLength(1)
+    expect(result.current.edges).toEqual([])
+    expect(generateNewNodeCalls).toHaveLength(1)
+  })
+
+  it('should build start, llm, and answer templates with linked edges in chat mode', () => {
+    mockUseIsChatMode.mockReturnValue(true)
+
+    const { result } = renderHook(() => useWorkflowTemplate())
+
+    expect(result.current.nodes).toHaveLength(3)
+    expect(result.current.nodes.map(node => node.id)).toEqual(['generated-1', 'llm', 'answer'])
+    expect(result.current.edges).toEqual([
+      {
+        id: 'generated-1-llm',
+        source: 'generated-1',
+        sourceHandle: 'source',
+        target: 'llm',
+        targetHandle: 'target',
+      },
+      {
+        id: 'llm-answer',
+        source: 'llm',
+        sourceHandle: 'source',
+        target: 'answer',
+        targetHandle: 'target',
+      },
+    ])
+    expect(generateNewNodeCalls).toHaveLength(3)
+    expect(generateNewNodeCalls[0].data).toMatchObject({
+      type: 'start',
+      title: 'workflow.blocks.start',
+    })
+    expect(generateNewNodeCalls[1].data).toMatchObject({
+      type: 'llm',
+      title: 'workflow.blocks.llm',
+    })
+    expect(generateNewNodeCalls[2].data).toMatchObject({
+      type: 'answer',
+      title: 'workflow.blocks.answer',
+      answer: '{{#llm.text#}}',
+    })
+  })
+})

web/app/components/workflow-app/hooks/use-workflow-run-callbacks.ts

@@ -0,0 +1,470 @@
+import type AudioPlayer from '@/app/components/base/audio-btn/audio'
+import type { IOtherOptions } from '@/service/base'
+import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
+import { sseGet } from '@/service/base'
+
+type ContainerSize = {
+  clientWidth: number
+  clientHeight: number
+}
+
+type WorkflowRunEventHandlers = {
+  handleWorkflowStarted: NonNullable<IOtherOptions['onWorkflowStarted']>
+  handleWorkflowFinished: NonNullable<IOtherOptions['onWorkflowFinished']>
+  handleWorkflowFailed: () => void
+  handleWorkflowNodeStarted: (params: Parameters<NonNullable<IOtherOptions['onNodeStarted']>>[0], containerParams: ContainerSize) => void
+  handleWorkflowNodeFinished: NonNullable<IOtherOptions['onNodeFinished']>
+  handleWorkflowNodeHumanInputRequired: NonNullable<IOtherOptions['onHumanInputRequired']>
+  handleWorkflowNodeHumanInputFormFilled: NonNullable<IOtherOptions['onHumanInputFormFilled']>
+  handleWorkflowNodeHumanInputFormTimeout: NonNullable<IOtherOptions['onHumanInputFormTimeout']>
+  handleWorkflowNodeIterationStarted: (params: Parameters<NonNullable<IOtherOptions['onIterationStart']>>[0], containerParams: ContainerSize) => void
+  handleWorkflowNodeIterationNext: NonNullable<IOtherOptions['onIterationNext']>
+  handleWorkflowNodeIterationFinished: NonNullable<IOtherOptions['onIterationFinish']>
+  handleWorkflowNodeLoopStarted: (params: Parameters<NonNullable<IOtherOptions['onLoopStart']>>[0], containerParams: ContainerSize) => void
+  handleWorkflowNodeLoopNext: NonNullable<IOtherOptions['onLoopNext']>
+  handleWorkflowNodeLoopFinished: NonNullable<IOtherOptions['onLoopFinish']>
+  handleWorkflowNodeRetry: NonNullable<IOtherOptions['onNodeRetry']>
+  handleWorkflowAgentLog: NonNullable<IOtherOptions['onAgentLog']>
+  handleWorkflowTextChunk: NonNullable<IOtherOptions['onTextChunk']>
+  handleWorkflowTextReplace: NonNullable<IOtherOptions['onTextReplace']>
+  handleWorkflowPaused: () => void
+}
+
+type UserCallbackHandlers = {
+  onWorkflowStarted?: IOtherOptions['onWorkflowStarted']
+  onWorkflowFinished?: IOtherOptions['onWorkflowFinished']
+  onNodeStarted?: IOtherOptions['onNodeStarted']
+  onNodeFinished?: IOtherOptions['onNodeFinished']
+  onIterationStart?: IOtherOptions['onIterationStart']
+  onIterationNext?: IOtherOptions['onIterationNext']
+  onIterationFinish?: IOtherOptions['onIterationFinish']
+  onLoopStart?: IOtherOptions['onLoopStart']
+  onLoopNext?: IOtherOptions['onLoopNext']
+  onLoopFinish?: IOtherOptions['onLoopFinish']
+  onNodeRetry?: IOtherOptions['onNodeRetry']
+  onAgentLog?: IOtherOptions['onAgentLog']
+  onError?: IOtherOptions['onError']
+  onWorkflowPaused?: IOtherOptions['onWorkflowPaused']
+  onHumanInputRequired?: IOtherOptions['onHumanInputRequired']
+  onHumanInputFormFilled?: IOtherOptions['onHumanInputFormFilled']
+  onHumanInputFormTimeout?: IOtherOptions['onHumanInputFormTimeout']
+  onCompleted?: IOtherOptions['onCompleted']
+}
+
+type CallbackContext = {
+  clientWidth: number
+  clientHeight: number
+  runHistoryUrl: string
+  isInWorkflowDebug: boolean
+  fetchInspectVars: (params: Record<string, never>) => void
+  invalidAllLastRun: () => void
+  invalidateRunHistory: (url: string) => void
+  clearAbortController: () => void
+  clearListeningState: () => void
+  trackWorkflowRunFailed: (params: unknown) => void
+  handlers: WorkflowRunEventHandlers
+  callbacks: UserCallbackHandlers
+  restCallback: IOtherOptions
+}
+
+type BaseCallbacksContext = CallbackContext & {
+  getOrCreatePlayer: () => AudioPlayer | null
+}
+
+type FinalCallbacksContext = CallbackContext & {
+  baseSseOptions: IOtherOptions
+  player: AudioPlayer | null
+  setAbortController: (controller: AbortController) => void
+}
+
+export const createBaseWorkflowRunCallbacks = ({
+  clientWidth,
+  clientHeight,
+  runHistoryUrl,
+  isInWorkflowDebug,
+  fetchInspectVars,
+  invalidAllLastRun,
+  invalidateRunHistory,
+  clearAbortController,
+  clearListeningState,
+  trackWorkflowRunFailed,
+  handlers,
+  callbacks,
+  restCallback,
+  getOrCreatePlayer,
+}: BaseCallbacksContext): IOtherOptions => {
+  const {
+    handleWorkflowStarted,
+    handleWorkflowFinished,
+    handleWorkflowFailed,
+    handleWorkflowNodeStarted,
+    handleWorkflowNodeFinished,
+    handleWorkflowNodeHumanInputRequired,
+    handleWorkflowNodeHumanInputFormFilled,
+    handleWorkflowNodeHumanInputFormTimeout,
+    handleWorkflowNodeIterationStarted,
+    handleWorkflowNodeIterationNext,
+    handleWorkflowNodeIterationFinished,
+    handleWorkflowNodeLoopStarted,
+    handleWorkflowNodeLoopNext,
+    handleWorkflowNodeLoopFinished,
+    handleWorkflowNodeRetry,
+    handleWorkflowAgentLog,
+    handleWorkflowTextChunk,
+    handleWorkflowTextReplace,
+    handleWorkflowPaused,
+  } = handlers
+  const {
+    onWorkflowStarted,
+    onWorkflowFinished,
+    onNodeStarted,
+    onNodeFinished,
+    onIterationStart,
+    onIterationNext,
+    onIterationFinish,
+    onLoopStart,
+    onLoopNext,
+    onLoopFinish,
+    onNodeRetry,
+    onAgentLog,
+    onError,
+    onWorkflowPaused,
+    onHumanInputRequired,
+    onHumanInputFormFilled,
+    onHumanInputFormTimeout,
+    onCompleted,
+  } = callbacks
+
+  const wrappedOnError: IOtherOptions['onError'] = (params, code) => {
+    clearAbortController()
+    handleWorkflowFailed()
+    invalidateRunHistory(runHistoryUrl)
+    clearListeningState()
+
+    if (onError)
+      onError(params, code)
+
+    trackWorkflowRunFailed(params)
+  }
+
+  const wrappedOnCompleted: IOtherOptions['onCompleted'] = async (hasError, errorMessage) => {
+    clearAbortController()
+    clearListeningState()
+    if (onCompleted)
+      onCompleted(hasError, errorMessage)
+  }
+
+  const baseSseOptions: IOtherOptions = {
+    ...restCallback,
+    onWorkflowStarted: (params) => {
+      handleWorkflowStarted(params)
+      invalidateRunHistory(runHistoryUrl)
+
+      if (onWorkflowStarted)
+        onWorkflowStarted(params)
+    },
+    onWorkflowFinished: (params) => {
+      clearListeningState()
+      handleWorkflowFinished(params)
+      invalidateRunHistory(runHistoryUrl)
+
+      if (onWorkflowFinished)
+        onWorkflowFinished(params)
+      if (isInWorkflowDebug) {
+        fetchInspectVars({})
+        invalidAllLastRun()
+      }
+    },
+    onNodeStarted: (params) => {
+      handleWorkflowNodeStarted(params, { clientWidth, clientHeight })
+
+      if (onNodeStarted)
+        onNodeStarted(params)
+    },
+    onNodeFinished: (params) => {
+      handleWorkflowNodeFinished(params)
+
+      if (onNodeFinished)
+        onNodeFinished(params)
+    },
+    onIterationStart: (params) => {
+      handleWorkflowNodeIterationStarted(params, { clientWidth, clientHeight })
+
+      if (onIterationStart)
+        onIterationStart(params)
+    },
+    onIterationNext: (params) => {
+      handleWorkflowNodeIterationNext(params)
+
+      if (onIterationNext)
+        onIterationNext(params)
+    },
+    onIterationFinish: (params) => {
+      handleWorkflowNodeIterationFinished(params)
+
+      if (onIterationFinish)
+        onIterationFinish(params)
+    },
+    onLoopStart: (params) => {
+      handleWorkflowNodeLoopStarted(params, { clientWidth, clientHeight })
+
+      if (onLoopStart)
+        onLoopStart(params)
+    },
+    onLoopNext: (params) => {
+      handleWorkflowNodeLoopNext(params)
+
+      if (onLoopNext)
+        onLoopNext(params)
+    },
+    onLoopFinish: (params) => {
+      handleWorkflowNodeLoopFinished(params)
+
+      if (onLoopFinish)
+        onLoopFinish(params)
+    },
+    onNodeRetry: (params) => {
+      handleWorkflowNodeRetry(params)
+
+      if (onNodeRetry)
+        onNodeRetry(params)
+    },
+    onAgentLog: (params) => {
+      handleWorkflowAgentLog(params)
+
+      if (onAgentLog)
+        onAgentLog(params)
+    },
+    onTextChunk: (params) => {
+      handleWorkflowTextChunk(params)
+    },
+    onTextReplace: (params) => {
+      handleWorkflowTextReplace(params)
+    },
+    onTTSChunk: (messageId: string, audio: string) => {
+      if (!audio || audio === '')
+        return
+      const audioPlayer = getOrCreatePlayer()
+      if (audioPlayer) {
+        audioPlayer.playAudioWithAudio(audio, true)
+        AudioPlayerManager.getInstance().resetMsgId(messageId)
+      }
+    },
+    onTTSEnd: (_messageId: string, audio: string) => {
+      const audioPlayer = getOrCreatePlayer()
+      if (audioPlayer)
+        audioPlayer.playAudioWithAudio(audio, false)
+    },
+    onWorkflowPaused: (params) => {
+      handleWorkflowPaused()
+      invalidateRunHistory(runHistoryUrl)
+      if (onWorkflowPaused)
+        onWorkflowPaused(params)
+      const url = `/workflow/${params.workflow_run_id}/events`
+      sseGet(url, {}, baseSseOptions)
+    },
+    onHumanInputRequired: (params) => {
+      handleWorkflowNodeHumanInputRequired(params)
+      if (onHumanInputRequired)
+        onHumanInputRequired(params)
+    },
+    onHumanInputFormFilled: (params) => {
+      handleWorkflowNodeHumanInputFormFilled(params)
+      if (onHumanInputFormFilled)
+        onHumanInputFormFilled(params)
+    },
+    onHumanInputFormTimeout: (params) => {
+      handleWorkflowNodeHumanInputFormTimeout(params)
+      if (onHumanInputFormTimeout)
+        onHumanInputFormTimeout(params)
+    },
+    onError: wrappedOnError,
+    onCompleted: wrappedOnCompleted,
+  }
+
+  return baseSseOptions
+}
+
+export const createFinalWorkflowRunCallbacks = ({
+  clientWidth,
+  clientHeight,
+  runHistoryUrl,
+  isInWorkflowDebug,
+  fetchInspectVars,
+  invalidAllLastRun,
+  invalidateRunHistory,
+  clearAbortController: _clearAbortController,
+  clearListeningState: _clearListeningState,
+  trackWorkflowRunFailed: _trackWorkflowRunFailed,
+  handlers,
+  callbacks,
+  restCallback,
+  baseSseOptions,
+  player,
+  setAbortController,
+}: FinalCallbacksContext): IOtherOptions => {
+  const {
+    handleWorkflowFinished,
+    handleWorkflowFailed,
+    handleWorkflowNodeStarted,
+    handleWorkflowNodeFinished,
+    handleWorkflowNodeHumanInputRequired,
+    handleWorkflowNodeHumanInputFormFilled,
+    handleWorkflowNodeHumanInputFormTimeout,
+    handleWorkflowNodeIterationStarted,
+    handleWorkflowNodeIterationNext,
+    handleWorkflowNodeIterationFinished,
+    handleWorkflowNodeLoopStarted,
+    handleWorkflowNodeLoopNext,
+    handleWorkflowNodeLoopFinished,
+    handleWorkflowNodeRetry,
+    handleWorkflowAgentLog,
+    handleWorkflowTextChunk,
+    handleWorkflowTextReplace,
+    handleWorkflowPaused,
+  } = handlers
+  const {
+    onWorkflowFinished,
+    onNodeStarted,
+    onNodeFinished,
+    onIterationStart,
+    onIterationNext,
+    onIterationFinish,
+    onLoopStart,
+    onLoopNext,
+    onLoopFinish,
+    onNodeRetry,
+    onAgentLog,
+    onError,
+    onWorkflowPaused,
+    onHumanInputRequired,
+    onHumanInputFormFilled,
+    onHumanInputFormTimeout,
+  } = callbacks
+
+  const finalCallbacks: IOtherOptions = {
+    ...baseSseOptions,
+    getAbortController: (controller: AbortController) => {
+      setAbortController(controller)
+    },
+    onWorkflowFinished: (params) => {
+      handleWorkflowFinished(params)
+      invalidateRunHistory(runHistoryUrl)
+
+      if (onWorkflowFinished)
+        onWorkflowFinished(params)
+      if (isInWorkflowDebug) {
+        fetchInspectVars({})
+        invalidAllLastRun()
+      }
+    },
+    onError: (params, code) => {
+      handleWorkflowFailed()
+      invalidateRunHistory(runHistoryUrl)
+
+      if (onError)
+        onError(params, code)
+    },
+    onNodeStarted: (params) => {
+      handleWorkflowNodeStarted(params, { clientWidth, clientHeight })
+
+      if (onNodeStarted)
+        onNodeStarted(params)
+    },
+    onNodeFinished: (params) => {
+      handleWorkflowNodeFinished(params)
+
+      if (onNodeFinished)
+        onNodeFinished(params)
+    },
+    onIterationStart: (params) => {
+      handleWorkflowNodeIterationStarted(params, { clientWidth, clientHeight })
+
+      if (onIterationStart)
+        onIterationStart(params)
+    },
+    onIterationNext: (params) => {
+      handleWorkflowNodeIterationNext(params)
+
+      if (onIterationNext)
+        onIterationNext(params)
+    },
+    onIterationFinish: (params) => {
+      handleWorkflowNodeIterationFinished(params)
+
+      if (onIterationFinish)
+        onIterationFinish(params)
+    },
+    onLoopStart: (params) => {
+      handleWorkflowNodeLoopStarted(params, { clientWidth, clientHeight })
+
+      if (onLoopStart)
+        onLoopStart(params)
+    },
+    onLoopNext: (params) => {
+      handleWorkflowNodeLoopNext(params)
+
+      if (onLoopNext)
+        onLoopNext(params)
+    },
+    onLoopFinish: (params) => {
+      handleWorkflowNodeLoopFinished(params)
+
+      if (onLoopFinish)
+        onLoopFinish(params)
+    },
+    onNodeRetry: (params) => {
+      handleWorkflowNodeRetry(params)
+
+      if (onNodeRetry)
+        onNodeRetry(params)
+    },
+    onAgentLog: (params) => {
+      handleWorkflowAgentLog(params)
+
+      if (onAgentLog)
+        onAgentLog(params)
+    },
+    onTextChunk: (params) => {
+      handleWorkflowTextChunk(params)
+    },
+    onTextReplace: (params) => {
+      handleWorkflowTextReplace(params)
+    },
+    onTTSChunk: (messageId: string, audio: string) => {
+      if (!audio || audio === '')
+        return
+      player?.playAudioWithAudio(audio, true)
+      AudioPlayerManager.getInstance().resetMsgId(messageId)
+    },
+    onTTSEnd: (_messageId: string, audio: string) => {
+      player?.playAudioWithAudio(audio, false)
+    },
+    onWorkflowPaused: (params) => {
+      handleWorkflowPaused()
+      invalidateRunHistory(runHistoryUrl)
+      if (onWorkflowPaused)
+        onWorkflowPaused(params)
+      const url = `/workflow/${params.workflow_run_id}/events`
+      sseGet(url, {}, finalCallbacks)
+    },
+    onHumanInputRequired: (params) => {
+      handleWorkflowNodeHumanInputRequired(params)
+      if (onHumanInputRequired)
+        onHumanInputRequired(params)
+    },
+    onHumanInputFormFilled: (params) => {
+      handleWorkflowNodeHumanInputFormFilled(params)
+      if (onHumanInputFormFilled)
+        onHumanInputFormFilled(params)
+    },
+    onHumanInputFormTimeout: (params) => {
+      handleWorkflowNodeHumanInputFormTimeout(params)
+      if (onHumanInputFormTimeout)
+        onHumanInputFormTimeout(params)
+    },
+    ...restCallback,
+  }
+
+  return finalCallbacks
+}

web/app/components/workflow-app/hooks/use-workflow-run-utils.ts

@@ -0,0 +1,443 @@
+import type { Features as FeaturesData } from '@/app/components/base/features/types'
+import type { TriggerNodeType } from '@/app/components/workflow/types'
+import type { IOtherOptions } from '@/service/base'
+import type { VersionHistory } from '@/types/workflow'
+import { noop } from 'es-toolkit/function'
+import { toast } from '@/app/components/base/ui/toast'
+import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import { handleStream, post } from '@/service/base'
+import { ContentType } from '@/service/fetch'
+import { AppModeEnum } from '@/types/app'
+
+export type HandleRunMode = TriggerType
+export type HandleRunOptions = {
+  mode?: HandleRunMode
+  scheduleNodeId?: string
+  webhookNodeId?: string
+  pluginNodeId?: string
+  allNodeIds?: string[]
+}
+
+export type DebuggableTriggerType = Exclude<TriggerType, TriggerType.UserInput>
+
+type AppDetailLike = {
+  id?: string
+  mode?: AppModeEnum
+}
+
+type TTSParamsLike = {
+  token?: string
+  appId?: string
+}
+
+type ListeningStateActions = {
+  setWorkflowRunningData: (data: ReturnType<typeof createRunningWorkflowState> | ReturnType<typeof createFailedWorkflowState> | ReturnType<typeof createStoppedWorkflowState>) => void
+  setIsListening: (value: boolean) => void
+  setShowVariableInspectPanel: (value: boolean) => void
+  setListeningTriggerType: (value: TriggerNodeType | null) => void
+  setListeningTriggerNodeIds: (value: string[]) => void
+  setListeningTriggerIsAll: (value: boolean) => void
+  setListeningTriggerNodeId: (value: string | null) => void
+}
+
+type TriggerDebugRunnerOptions = {
+  debugType: DebuggableTriggerType
+  url: string
+  requestBody: unknown
+  baseSseOptions: IOtherOptions
+  controllerTarget: Record<string, unknown>
+  setAbortController: (controller: AbortController | null) => void
+  clearAbortController: () => void
+  clearListeningState: () => void
+  setWorkflowRunningData: ListeningStateActions['setWorkflowRunningData']
+}
+
+export const controllerKeyMap: Record<DebuggableTriggerType, string> = {
+  [TriggerType.Webhook]: '__webhookDebugAbortController',
+  [TriggerType.Plugin]: '__pluginDebugAbortController',
+  [TriggerType.All]: '__allTriggersDebugAbortController',
+  [TriggerType.Schedule]: '__scheduleDebugAbortController',
+}
+
+export const debugLabelMap: Record<DebuggableTriggerType, string> = {
+  [TriggerType.Webhook]: 'Webhook',
+  [TriggerType.Plugin]: 'Plugin',
+  [TriggerType.All]: 'All',
+  [TriggerType.Schedule]: 'Schedule',
+}
+
+export const createRunningWorkflowState = () => {
+  return {
+    result: {
+      status: WorkflowRunningStatus.Running,
+      inputs_truncated: false,
+      process_data_truncated: false,
+      outputs_truncated: false,
+    },
+    tracing: [],
+    resultText: '',
+  }
+}
+
+export const createStoppedWorkflowState = () => {
+  return {
+    result: {
+      status: WorkflowRunningStatus.Stopped,
+      inputs_truncated: false,
+      process_data_truncated: false,
+      outputs_truncated: false,
+    },
+    tracing: [],
+    resultText: '',
+  }
+}
+
+export const createFailedWorkflowState = (error: string) => {
+  return {
+    result: {
+      status: WorkflowRunningStatus.Failed,
+      error,
+      inputs_truncated: false,
+      process_data_truncated: false,
+      outputs_truncated: false,
+    },
+    tracing: [],
+  }
+}
+
+export const buildRunHistoryUrl = (appDetail?: AppDetailLike) => {
+  return appDetail?.mode === AppModeEnum.ADVANCED_CHAT
+    ? `/apps/${appDetail.id}/advanced-chat/workflow-runs`
+    : `/apps/${appDetail?.id}/workflow-runs`
+}
+
+export const resolveWorkflowRunUrl = (
+  appDetail: AppDetailLike | undefined,
+  runMode: HandleRunMode,
+  isInWorkflowDebug: boolean,
+) => {
+  if (runMode === TriggerType.Plugin || runMode === TriggerType.Webhook || runMode === TriggerType.Schedule) {
+    if (!appDetail?.id) {
+      console.error('handleRun: missing app id for trigger plugin run')
+      return ''
+    }
+
+    return `/apps/${appDetail.id}/workflows/draft/trigger/run`
+  }
+
+  if (runMode === TriggerType.All) {
+    if (!appDetail?.id) {
+      console.error('handleRun: missing app id for trigger run all')
+      return ''
+    }
+
+    return `/apps/${appDetail.id}/workflows/draft/trigger/run-all`
+  }
+
+  if (appDetail?.mode === AppModeEnum.ADVANCED_CHAT)
+    return `/apps/${appDetail.id}/advanced-chat/workflows/draft/run`
+
+  if (isInWorkflowDebug && appDetail?.id)
+    return `/apps/${appDetail.id}/workflows/draft/run`
+
+  return ''
+}
+
+export const buildWorkflowRunRequestBody = (
+  runMode: HandleRunMode,
+  resolvedParams: Record<string, unknown>,
+  options?: HandleRunOptions,
+) => {
+  if (runMode === TriggerType.Schedule)
+    return { node_id: options?.scheduleNodeId }
+
+  if (runMode === TriggerType.Webhook)
+    return { node_id: options?.webhookNodeId }
+
+  if (runMode === TriggerType.Plugin)
+    return { node_id: options?.pluginNodeId }
+
+  if (runMode === TriggerType.All)
+    return { node_ids: options?.allNodeIds }
+
+  return resolvedParams
+}
+
+export const validateWorkflowRunRequest = (
+  runMode: HandleRunMode,
+  options?: HandleRunOptions,
+) => {
+  if (runMode === TriggerType.Schedule && !options?.scheduleNodeId)
+    return 'handleRun: schedule trigger run requires node id'
+
+  if (runMode === TriggerType.Webhook && !options?.webhookNodeId)
+    return 'handleRun: webhook trigger run requires node id'
+
+  if (runMode === TriggerType.Plugin && !options?.pluginNodeId)
+    return 'handleRun: plugin trigger run requires node id'
+
+  if (runMode === TriggerType.All && !options?.allNodeIds && options?.allNodeIds?.length === 0)
+    return 'handleRun: all trigger run requires node ids'
+
+  return ''
+}
+
+export const isDebuggableTriggerType = (
+  runMode: HandleRunMode,
+): runMode is DebuggableTriggerType => {
+  return (
+    runMode === TriggerType.Schedule
+    || runMode === TriggerType.Webhook
+    || runMode === TriggerType.Plugin
+    || runMode === TriggerType.All
+  )
+}
+
+export const buildListeningTriggerNodeIds = (
+  runMode: DebuggableTriggerType,
+  options?: HandleRunOptions,
+) => {
+  if (runMode === TriggerType.All)
+    return options?.allNodeIds ?? []
+
+  if (runMode === TriggerType.Webhook && options?.webhookNodeId)
+    return [options.webhookNodeId]
+
+  if (runMode === TriggerType.Schedule && options?.scheduleNodeId)
+    return [options.scheduleNodeId]
+
+  if (runMode === TriggerType.Plugin && options?.pluginNodeId)
+    return [options.pluginNodeId]
+
+  return []
+}
+
+export const applyRunningStateForMode = (
+  actions: ListeningStateActions,
+  runMode: HandleRunMode,
+  options?: HandleRunOptions,
+) => {
+  if (isDebuggableTriggerType(runMode)) {
+    actions.setIsListening(true)
+    actions.setShowVariableInspectPanel(true)
+    actions.setListeningTriggerIsAll(runMode === TriggerType.All)
+    actions.setListeningTriggerNodeIds(buildListeningTriggerNodeIds(runMode, options))
+    actions.setWorkflowRunningData(createRunningWorkflowState())
+    return
+  }
+
+  actions.setIsListening(false)
+  actions.setListeningTriggerType(null)
+  actions.setListeningTriggerNodeId(null)
+  actions.setListeningTriggerNodeIds([])
+  actions.setListeningTriggerIsAll(false)
+  actions.setWorkflowRunningData(createRunningWorkflowState())
+}
+
+export const clearListeningState = (actions: Pick<ListeningStateActions, 'setIsListening' | 'setListeningTriggerType' | 'setListeningTriggerNodeId' | 'setListeningTriggerNodeIds' | 'setListeningTriggerIsAll'>) => {
+  actions.setIsListening(false)
+  actions.setListeningTriggerType(null)
+  actions.setListeningTriggerNodeId(null)
+  actions.setListeningTriggerNodeIds([])
+  actions.setListeningTriggerIsAll(false)
+}
+
+export const applyStoppedState = (actions: Pick<ListeningStateActions, 'setWorkflowRunningData' | 'setIsListening' | 'setShowVariableInspectPanel' | 'setListeningTriggerType' | 'setListeningTriggerNodeId'>) => {
+  actions.setWorkflowRunningData(createStoppedWorkflowState())
+  actions.setIsListening(false)
+  actions.setListeningTriggerType(null)
+  actions.setListeningTriggerNodeId(null)
+  actions.setShowVariableInspectPanel(true)
+}
+
+export const clearWindowDebugControllers = (controllerTarget: Record<string, unknown>) => {
+  delete controllerTarget.__webhookDebugAbortController
+  delete controllerTarget.__pluginDebugAbortController
+  delete controllerTarget.__scheduleDebugAbortController
+  delete controllerTarget.__allTriggersDebugAbortController
+}
+
+export const buildTTSConfig = (resolvedParams: TTSParamsLike, pathname: string) => {
+  let ttsUrl = ''
+  let ttsIsPublic = false
+
+  if (resolvedParams.token) {
+    ttsUrl = '/text-to-audio'
+    ttsIsPublic = true
+  }
+  else if (resolvedParams.appId) {
+    if (pathname.search('explore/installed') > -1)
+      ttsUrl = `/installed-apps/${resolvedParams.appId}/text-to-audio`
+    else
+      ttsUrl = `/apps/${resolvedParams.appId}/text-to-audio`
+  }
+
+  return {
+    ttsUrl,
+    ttsIsPublic,
+  }
+}
+
+export const mapPublishedWorkflowFeatures = (publishedWorkflow: VersionHistory): FeaturesData => {
+  return {
+    opening: {
+      enabled: !!publishedWorkflow.features.opening_statement || !!publishedWorkflow.features.suggested_questions.length,
+      opening_statement: publishedWorkflow.features.opening_statement,
+      suggested_questions: publishedWorkflow.features.suggested_questions,
+    },
+    suggested: publishedWorkflow.features.suggested_questions_after_answer,
+    text2speech: publishedWorkflow.features.text_to_speech,
+    speech2text: publishedWorkflow.features.speech_to_text,
+    citation: publishedWorkflow.features.retriever_resource,
+    moderation: publishedWorkflow.features.sensitive_word_avoidance,
+    file: publishedWorkflow.features.file_upload,
+  }
+}
+
+export const normalizePublishedWorkflowNodes = (publishedWorkflow: VersionHistory) => {
+  return publishedWorkflow.graph.nodes.map(node => ({
+    ...node,
+    selected: false,
+    data: {
+      ...node.data,
+      selected: false,
+    },
+  }))
+}
+
+export const waitWithAbort = (signal: AbortSignal, delay: number) => new Promise<void>((resolve) => {
+  const timer = window.setTimeout(resolve, delay)
+  signal.addEventListener('abort', () => {
+    clearTimeout(timer)
+    resolve()
+  }, { once: true })
+})
+
+export const runTriggerDebug = async ({
+  debugType,
+  url,
+  requestBody,
+  baseSseOptions,
+  controllerTarget,
+  setAbortController,
+  clearAbortController,
+  clearListeningState,
+  setWorkflowRunningData,
+}: TriggerDebugRunnerOptions) => {
+  const controller = new AbortController()
+  setAbortController(controller)
+
+  const controllerKey = controllerKeyMap[debugType]
+  controllerTarget[controllerKey] = controller
+
+  const debugLabel = debugLabelMap[debugType]
+
+  const poll = async (): Promise<void> => {
+    try {
+      const response = await post<Response>(url, {
+        body: requestBody,
+        signal: controller.signal,
+      }, {
+        needAllResponseContent: true,
+      })
+
+      if (controller.signal.aborted)
+        return
+
+      if (!response) {
+        const message = `${debugLabel} debug request failed`
+        toast.error(message)
+        clearAbortController()
+        return
+      }
+
+      const contentType = response.headers.get('content-type') || ''
+
+      if (contentType.includes(ContentType.json)) {
+        let data: Record<string, unknown> | null = null
+        try {
+          data = await response.json() as Record<string, unknown>
+        }
+        catch (jsonError) {
+          console.error(`handleRun: ${debugLabel.toLowerCase()} debug response parse error`, jsonError)
+          toast.error(`${debugLabel} debug request failed`)
+          clearAbortController()
+          clearListeningState()
+          return
+        }
+
+        if (controller.signal.aborted)
+          return
+
+        if (data?.status === 'waiting') {
+          const delay = Number(data.retry_in) || 2000
+          await waitWithAbort(controller.signal, delay)
+          if (controller.signal.aborted)
+            return
+          await poll()
+          return
+        }
+
+        const errorMessage = typeof data?.message === 'string' ? data.message : `${debugLabel} debug failed`
+        toast.error(errorMessage)
+        clearAbortController()
+        setWorkflowRunningData(createFailedWorkflowState(errorMessage))
+        clearListeningState()
+        return
+      }
+
+      clearListeningState()
+      handleStream(
+        response,
+        baseSseOptions.onData ?? noop,
+        baseSseOptions.onCompleted,
+        baseSseOptions.onThought,
+        baseSseOptions.onMessageEnd,
+        baseSseOptions.onMessageReplace,
+        baseSseOptions.onFile,
+        baseSseOptions.onWorkflowStarted,
+        baseSseOptions.onWorkflowFinished,
+        baseSseOptions.onNodeStarted,
+        baseSseOptions.onNodeFinished,
+        baseSseOptions.onIterationStart,
+        baseSseOptions.onIterationNext,
+        baseSseOptions.onIterationFinish,
+        baseSseOptions.onLoopStart,
+        baseSseOptions.onLoopNext,
+        baseSseOptions.onLoopFinish,
+        baseSseOptions.onNodeRetry,
+        baseSseOptions.onParallelBranchStarted,
+        baseSseOptions.onParallelBranchFinished,
+        baseSseOptions.onTextChunk,
+        baseSseOptions.onTTSChunk,
+        baseSseOptions.onTTSEnd,
+        baseSseOptions.onTextReplace,
+        baseSseOptions.onAgentLog,
+        baseSseOptions.onHumanInputRequired,
+        baseSseOptions.onHumanInputFormFilled,
+        baseSseOptions.onHumanInputFormTimeout,
+        baseSseOptions.onWorkflowPaused,
+        baseSseOptions.onDataSourceNodeProcessing,
+        baseSseOptions.onDataSourceNodeCompleted,
+        baseSseOptions.onDataSourceNodeError,
+      )
+    }
+    catch (error) {
+      if (controller.signal.aborted)
+        return
+
+      if (error instanceof Response) {
+        const data = await error.clone().json() as Record<string, unknown>
+        const errorMessage = typeof data?.error === 'string' ? data.error : ''
+        toast.error(errorMessage)
+        clearAbortController()
+        setWorkflowRunningData(createFailedWorkflowState(errorMessage))
+      }
+
+      clearListeningState()
+    }
+  }
+
+  await poll()
+}

web/app/components/workflow-app/hooks/use-workflow-run.ts

@@ -1,3 +1,4 @@
+import type { HandleRunOptions } from './use-workflow-run-utils'
 import type AudioPlayer from '@/app/components/base/audio-btn/audio'
 import type { Node } from '@/app/components/workflow/types'
 import type { IOtherOptions } from '@/service/base'
@@ -14,46 +15,38 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { trackEvent } from '@/app/components/base/amplitude'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
-import Toast from '@/app/components/base/toast'
 import { TriggerType } from '@/app/components/workflow/header/test-run-menu'
 import { useWorkflowUpdate } from '@/app/components/workflow/hooks/use-workflow-interactions'
 import { useWorkflowRunEvent } from '@/app/components/workflow/hooks/use-workflow-run-event/use-workflow-run-event'
 import { useWorkflowStore } from '@/app/components/workflow/store'
-import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { usePathname } from '@/next/navigation'
-import { handleStream, post, sseGet, ssePost } from '@/service/base'
-import { ContentType } from '@/service/fetch'
+import { ssePost } from '@/service/base'
 import { useInvalidAllLastRun, useInvalidateWorkflowRunHistory } from '@/service/use-workflow'
 import { stopWorkflowRun } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { useSetWorkflowVarsWithValue } from '../../workflow/hooks/use-fetch-workflow-inspect-vars'
 import { useConfigsMap } from './use-configs-map'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
+import {
+  createBaseWorkflowRunCallbacks,
+  createFinalWorkflowRunCallbacks,
+} from './use-workflow-run-callbacks'
+import {
+  applyRunningStateForMode,
+  applyStoppedState,
+  buildRunHistoryUrl,
+  buildTTSConfig,
+  buildWorkflowRunRequestBody,
+  clearListeningState,
+  clearWindowDebugControllers,
 
-type HandleRunMode = TriggerType
-type HandleRunOptions = {
-  mode?: HandleRunMode
-  scheduleNodeId?: string
-  webhookNodeId?: string
-  pluginNodeId?: string
-  allNodeIds?: string[]
-}
-
-type DebuggableTriggerType = Exclude<TriggerType, TriggerType.UserInput>
-
-const controllerKeyMap: Record<DebuggableTriggerType, string> = {
-  [TriggerType.Webhook]: '__webhookDebugAbortController',
-  [TriggerType.Plugin]: '__pluginDebugAbortController',
-  [TriggerType.All]: '__allTriggersDebugAbortController',
-  [TriggerType.Schedule]: '__scheduleDebugAbortController',
-}
-
-const debugLabelMap: Record<DebuggableTriggerType, string> = {
-  [TriggerType.Webhook]: 'Webhook',
-  [TriggerType.Plugin]: 'Plugin',
-  [TriggerType.All]: 'All',
-  [TriggerType.Schedule]: 'Schedule',
-}
+  isDebuggableTriggerType,
+  mapPublishedWorkflowFeatures,
+  normalizePublishedWorkflowNodes,
+  resolveWorkflowRunUrl,
+  runTriggerDebug,
+  validateWorkflowRunRequest,
+} from './use-workflow-run-utils'
 
 export const useWorkflowRun = () => {
   const store = useStoreApi()
@@ -152,7 +145,7 @@ export const useWorkflowRun = () => {
     callback?: IOtherOptions,
     options?: HandleRunOptions,
   ) => {
-    const runMode: HandleRunMode = options?.mode ?? TriggerType.UserInput
+    const runMode = options?.mode ?? TriggerType.UserInput
     const resolvedParams = params ?? {}
     const {
       getNodes,
@@ -190,9 +183,7 @@ export const useWorkflowRun = () => {
     } = callback || {}
     workflowStore.setState({ historyWorkflowData: undefined })
     const appDetail = useAppStore.getState().appDetail
-    const runHistoryUrl = appDetail?.mode === AppModeEnum.ADVANCED_CHAT
-      ? `/apps/${appDetail.id}/advanced-chat/workflow-runs`
-      : `/apps/${appDetail?.id}/workflow-runs`
+    const runHistoryUrl = buildRunHistoryUrl(appDetail)
     const workflowContainer = document.getElementById('workflow-container')
 
     const {
@@ -202,65 +193,15 @@ export const useWorkflowRun = () => {
 
     const isInWorkflowDebug = appDetail?.mode === AppModeEnum.WORKFLOW
 
-    let url = ''
-    if (runMode === TriggerType.Plugin || runMode === TriggerType.Webhook || runMode === TriggerType.Schedule) {
-      if (!appDetail?.id) {
-        console.error('handleRun: missing app id for trigger plugin run')
-        return
-      }
-      url = `/apps/${appDetail.id}/workflows/draft/trigger/run`
-    }
-    else if (runMode === TriggerType.All) {
-      if (!appDetail?.id) {
-        console.error('handleRun: missing app id for trigger run all')
-        return
-      }
-      url = `/apps/${appDetail.id}/workflows/draft/trigger/run-all`
-    }
-    else if (appDetail?.mode === AppModeEnum.ADVANCED_CHAT) {
-      url = `/apps/${appDetail.id}/advanced-chat/workflows/draft/run`
-    }
-    else if (isInWorkflowDebug && appDetail?.id) {
-      url = `/apps/${appDetail.id}/workflows/draft/run`
-    }
-
-    let requestBody = {}
-
-    if (runMode === TriggerType.Schedule)
-      requestBody = { node_id: options?.scheduleNodeId }
-
-    else if (runMode === TriggerType.Webhook)
-      requestBody = { node_id: options?.webhookNodeId }
-
-    else if (runMode === TriggerType.Plugin)
-      requestBody = { node_id: options?.pluginNodeId }
-
-    else if (runMode === TriggerType.All)
-      requestBody = { node_ids: options?.allNodeIds }
-
-    else
-      requestBody = resolvedParams
+    const url = resolveWorkflowRunUrl(appDetail, runMode, isInWorkflowDebug)
+    const requestBody = buildWorkflowRunRequestBody(runMode, resolvedParams, options)
 
     if (!url)
       return
 
-    if (runMode === TriggerType.Schedule && !options?.scheduleNodeId) {
-      console.error('handleRun: schedule trigger run requires node id')
-      return
-    }
-
-    if (runMode === TriggerType.Webhook && !options?.webhookNodeId) {
-      console.error('handleRun: webhook trigger run requires node id')
-      return
-    }
-
-    if (runMode === TriggerType.Plugin && !options?.pluginNodeId) {
-      console.error('handleRun: plugin trigger run requires node id')
-      return
-    }
-
-    if (runMode === TriggerType.All && !options?.allNodeIds && options?.allNodeIds?.length === 0) {
-      console.error('handleRun: all trigger run requires node ids')
+    const validationMessage = validateWorkflowRunRequest(runMode, options)
+    if (validationMessage) {
+      console.error(validationMessage)
       return
     }
 
@@ -277,66 +218,17 @@ export const useWorkflowRun = () => {
       setListeningTriggerNodeId,
     } = workflowStore.getState()
 
-    if (
-      runMode === TriggerType.Webhook
-      || runMode === TriggerType.Plugin
-      || runMode === TriggerType.All
-      || runMode === TriggerType.Schedule
-    ) {
-      setIsListening(true)
-      setShowVariableInspectPanel(true)
-      setListeningTriggerIsAll(runMode === TriggerType.All)
-      if (runMode === TriggerType.All)
-        setListeningTriggerNodeIds(options?.allNodeIds ?? [])
-      else if (runMode === TriggerType.Webhook && options?.webhookNodeId)
-        setListeningTriggerNodeIds([options.webhookNodeId])
-      else if (runMode === TriggerType.Schedule && options?.scheduleNodeId)
-        setListeningTriggerNodeIds([options.scheduleNodeId])
-      else if (runMode === TriggerType.Plugin && options?.pluginNodeId)
-        setListeningTriggerNodeIds([options.pluginNodeId])
-      else
-        setListeningTriggerNodeIds([])
-      setWorkflowRunningData({
-        result: {
-          status: WorkflowRunningStatus.Running,
-          inputs_truncated: false,
-          process_data_truncated: false,
-          outputs_truncated: false,
-        },
-        tracing: [],
-        resultText: '',
-      })
-    }
-    else {
-      setIsListening(false)
-      setListeningTriggerType(null)
-      setListeningTriggerNodeId(null)
-      setListeningTriggerNodeIds([])
-      setListeningTriggerIsAll(false)
-      setWorkflowRunningData({
-        result: {
-          status: WorkflowRunningStatus.Running,
-          inputs_truncated: false,
-          process_data_truncated: false,
-          outputs_truncated: false,
-        },
-        tracing: [],
-        resultText: '',
-      })
-    }
+    applyRunningStateForMode({
+      setWorkflowRunningData,
+      setIsListening,
+      setShowVariableInspectPanel,
+      setListeningTriggerType,
+      setListeningTriggerNodeIds,
+      setListeningTriggerIsAll,
+      setListeningTriggerNodeId,
+    }, runMode, options)
 
-    let ttsUrl = ''
-    let ttsIsPublic = false
-    if (resolvedParams.token) {
-      ttsUrl = '/text-to-audio'
-      ttsIsPublic = true
-    }
-    else if (resolvedParams.appId) {
-      if (pathname.search('explore/installed') > -1)
-        ttsUrl = `/installed-apps/${resolvedParams.appId}/text-to-audio`
-      else
-        ttsUrl = `/apps/${resolvedParams.appId}/text-to-audio`
-    }
+    const { ttsUrl, ttsIsPublic } = buildTTSConfig(resolvedParams, pathname)
     // Lazy initialization: Only create AudioPlayer when TTS is actually needed
     // This prevents opening audio channel unnecessarily
     let player: AudioPlayer | null = null
@@ -349,497 +241,121 @@ export const useWorkflowRun = () => {
 
     const clearAbortController = () => {
       abortControllerRef.current = null
-      delete (window as any).__webhookDebugAbortController
-      delete (window as any).__pluginDebugAbortController
-      delete (window as any).__scheduleDebugAbortController
-      delete (window as any).__allTriggersDebugAbortController
+      clearWindowDebugControllers(window as unknown as Record<string, unknown>)
     }
 
-    const clearListeningState = () => {
+    const clearListeningStateInStore = () => {
       const state = workflowStore.getState()
-      state.setIsListening(false)
-      state.setListeningTriggerType(null)
-      state.setListeningTriggerNodeId(null)
-      state.setListeningTriggerNodeIds([])
-      state.setListeningTriggerIsAll(false)
+      clearListeningState({
+        setIsListening: state.setIsListening,
+        setListeningTriggerType: state.setListeningTriggerType,
+        setListeningTriggerNodeId: state.setListeningTriggerNodeId,
+        setListeningTriggerNodeIds: state.setListeningTriggerNodeIds,
+        setListeningTriggerIsAll: state.setListeningTriggerIsAll,
+      })
     }
 
-    const wrappedOnError = (params: any) => {
-      clearAbortController()
-      handleWorkflowFailed()
-      invalidateRunHistory(runHistoryUrl)
-      clearListeningState()
-
-      if (onError)
-        onError(params)
-      trackEvent('workflow_run_failed', { workflow_id: flowId, reason: params.error, node_type: params.node_type })
+    const workflowRunEventHandlers = {
+      handleWorkflowStarted,
+      handleWorkflowFinished,
+      handleWorkflowFailed,
+      handleWorkflowNodeStarted,
+      handleWorkflowNodeFinished,
+      handleWorkflowNodeHumanInputRequired,
+      handleWorkflowNodeHumanInputFormFilled,
+      handleWorkflowNodeHumanInputFormTimeout,
+      handleWorkflowNodeIterationStarted,
+      handleWorkflowNodeIterationNext,
+      handleWorkflowNodeIterationFinished,
+      handleWorkflowNodeLoopStarted,
+      handleWorkflowNodeLoopNext,
+      handleWorkflowNodeLoopFinished,
+      handleWorkflowNodeRetry,
+      handleWorkflowAgentLog,
+      handleWorkflowTextChunk,
+      handleWorkflowTextReplace,
+      handleWorkflowPaused,
+    }
+    const userCallbacks = {
+      onWorkflowStarted,
+      onWorkflowFinished,
+      onNodeStarted,
+      onNodeFinished,
+      onIterationStart,
+      onIterationNext,
+      onIterationFinish,
+      onLoopStart,
+      onLoopNext,
+      onLoopFinish,
+      onNodeRetry,
+      onAgentLog,
+      onError,
+      onWorkflowPaused,
+      onHumanInputRequired,
+      onHumanInputFormFilled,
+      onHumanInputFormTimeout,
+      onCompleted,
     }
 
-    const wrappedOnCompleted: IOtherOptions['onCompleted'] = async (hasError?: boolean, errorMessage?: string) => {
-      clearAbortController()
-      clearListeningState()
-      if (onCompleted)
-        onCompleted(hasError, errorMessage)
+    const trackWorkflowRunFailed = (eventParams: unknown) => {
+      const payload = eventParams as { error?: string, node_type?: string }
+      trackEvent('workflow_run_failed', { workflow_id: flowId, reason: payload?.error, node_type: payload?.node_type })
     }
 
-    const baseSseOptions: IOtherOptions = {
-      ...restCallback,
-      onWorkflowStarted: (params) => {
-        handleWorkflowStarted(params)
-        invalidateRunHistory(runHistoryUrl)
-
-        if (onWorkflowStarted)
-          onWorkflowStarted(params)
-      },
-      onWorkflowFinished: (params) => {
-        clearListeningState()
-        handleWorkflowFinished(params)
-        invalidateRunHistory(runHistoryUrl)
-
-        if (onWorkflowFinished)
-          onWorkflowFinished(params)
-        if (isInWorkflowDebug) {
-          fetchInspectVars({})
-          invalidAllLastRun()
-        }
-      },
-      onNodeStarted: (params) => {
-        handleWorkflowNodeStarted(
-          params,
-          {
-            clientWidth,
-            clientHeight,
-          },
-        )
-
-        if (onNodeStarted)
-          onNodeStarted(params)
-      },
-      onNodeFinished: (params) => {
-        handleWorkflowNodeFinished(params)
-
-        if (onNodeFinished)
-          onNodeFinished(params)
-      },
-      onIterationStart: (params) => {
-        handleWorkflowNodeIterationStarted(
-          params,
-          {
-            clientWidth,
-            clientHeight,
-          },
-        )
-
-        if (onIterationStart)
-          onIterationStart(params)
-      },
-      onIterationNext: (params) => {
-        handleWorkflowNodeIterationNext(params)
-
-        if (onIterationNext)
-          onIterationNext(params)
-      },
-      onIterationFinish: (params) => {
-        handleWorkflowNodeIterationFinished(params)
-
-        if (onIterationFinish)
-          onIterationFinish(params)
-      },
-      onLoopStart: (params) => {
-        handleWorkflowNodeLoopStarted(
-          params,
-          {
-            clientWidth,
-            clientHeight,
-          },
-        )
-
-        if (onLoopStart)
-          onLoopStart(params)
-      },
-      onLoopNext: (params) => {
-        handleWorkflowNodeLoopNext(params)
-
-        if (onLoopNext)
-          onLoopNext(params)
-      },
-      onLoopFinish: (params) => {
-        handleWorkflowNodeLoopFinished(params)
-
-        if (onLoopFinish)
-          onLoopFinish(params)
-      },
-      onNodeRetry: (params) => {
-        handleWorkflowNodeRetry(params)
-
-        if (onNodeRetry)
-          onNodeRetry(params)
-      },
-      onAgentLog: (params) => {
-        handleWorkflowAgentLog(params)
-
-        if (onAgentLog)
-          onAgentLog(params)
-      },
-      onTextChunk: (params) => {
-        handleWorkflowTextChunk(params)
-      },
-      onTextReplace: (params) => {
-        handleWorkflowTextReplace(params)
-      },
-      onTTSChunk: (messageId: string, audio: string) => {
-        if (!audio || audio === '')
-          return
-        const audioPlayer = getOrCreatePlayer()
-        if (audioPlayer) {
-          audioPlayer.playAudioWithAudio(audio, true)
-          AudioPlayerManager.getInstance().resetMsgId(messageId)
-        }
-      },
-      onTTSEnd: (messageId: string, audio: string) => {
-        const audioPlayer = getOrCreatePlayer()
-        if (audioPlayer)
-          audioPlayer.playAudioWithAudio(audio, false)
-      },
-      onWorkflowPaused: (params) => {
-        handleWorkflowPaused()
-        invalidateRunHistory(runHistoryUrl)
-        if (onWorkflowPaused)
-          onWorkflowPaused(params)
-        const url = `/workflow/${params.workflow_run_id}/events`
-        sseGet(
-          url,
-          {},
-          baseSseOptions,
-        )
-      },
-      onHumanInputRequired: (params) => {
-        handleWorkflowNodeHumanInputRequired(params)
-        if (onHumanInputRequired)
-          onHumanInputRequired(params)
-      },
-      onHumanInputFormFilled: (params) => {
-        handleWorkflowNodeHumanInputFormFilled(params)
-        if (onHumanInputFormFilled)
-          onHumanInputFormFilled(params)
-      },
-      onHumanInputFormTimeout: (params) => {
-        handleWorkflowNodeHumanInputFormTimeout(params)
-        if (onHumanInputFormTimeout)
-          onHumanInputFormTimeout(params)
-      },
-      onError: wrappedOnError,
-      onCompleted: wrappedOnCompleted,
-    }
-
-    const waitWithAbort = (signal: AbortSignal, delay: number) => new Promise<void>((resolve) => {
-      const timer = window.setTimeout(resolve, delay)
-      signal.addEventListener('abort', () => {
-        clearTimeout(timer)
-        resolve()
-      }, { once: true })
+    const baseSseOptions = createBaseWorkflowRunCallbacks({
+      clientWidth,
+      clientHeight,
+      runHistoryUrl,
+      isInWorkflowDebug,
+      fetchInspectVars,
+      invalidAllLastRun,
+      invalidateRunHistory,
+      clearAbortController,
+      clearListeningState: clearListeningStateInStore,
+      trackWorkflowRunFailed,
+      handlers: workflowRunEventHandlers,
+      callbacks: userCallbacks,
+      restCallback,
+      getOrCreatePlayer,
     })
 
-    const runTriggerDebug = async (debugType: DebuggableTriggerType) => {
-      const controller = new AbortController()
-      abortControllerRef.current = controller
-
-      const controllerKey = controllerKeyMap[debugType]
-
-        ; (window as any)[controllerKey] = controller
-
-      const debugLabel = debugLabelMap[debugType]
-
-      const poll = async (): Promise<void> => {
-        try {
-          const response = await post<Response>(url, {
-            body: requestBody,
-            signal: controller.signal,
-          }, {
-            needAllResponseContent: true,
-          })
-
-          if (controller.signal.aborted)
-            return
-
-          if (!response) {
-            const message = `${debugLabel} debug request failed`
-            Toast.notify({ type: 'error', message })
-            clearAbortController()
-            return
-          }
-
-          const contentType = response.headers.get('content-type') || ''
-
-          if (contentType.includes(ContentType.json)) {
-            let data: any = null
-            try {
-              data = await response.json()
-            }
-            catch (jsonError) {
-              console.error(`handleRun: ${debugLabel.toLowerCase()} debug response parse error`, jsonError)
-              Toast.notify({ type: 'error', message: `${debugLabel} debug request failed` })
-              clearAbortController()
-              clearListeningState()
-              return
-            }
-
-            if (controller.signal.aborted)
-              return
-
-            if (data?.status === 'waiting') {
-              const delay = Number(data.retry_in) || 2000
-              await waitWithAbort(controller.signal, delay)
-              if (controller.signal.aborted)
-                return
-              await poll()
-              return
-            }
-
-            const errorMessage = data?.message || `${debugLabel} debug failed`
-            Toast.notify({ type: 'error', message: errorMessage })
-            clearAbortController()
-            setWorkflowRunningData({
-              result: {
-                status: WorkflowRunningStatus.Failed,
-                error: errorMessage,
-                inputs_truncated: false,
-                process_data_truncated: false,
-                outputs_truncated: false,
-              },
-              tracing: [],
-            })
-            clearListeningState()
-            return
-          }
-
-          clearListeningState()
-          handleStream(
-            response,
-            baseSseOptions.onData ?? noop,
-            baseSseOptions.onCompleted,
-            baseSseOptions.onThought,
-            baseSseOptions.onMessageEnd,
-            baseSseOptions.onMessageReplace,
-            baseSseOptions.onFile,
-            baseSseOptions.onWorkflowStarted,
-            baseSseOptions.onWorkflowFinished,
-            baseSseOptions.onNodeStarted,
-            baseSseOptions.onNodeFinished,
-            baseSseOptions.onIterationStart,
-            baseSseOptions.onIterationNext,
-            baseSseOptions.onIterationFinish,
-            baseSseOptions.onLoopStart,
-            baseSseOptions.onLoopNext,
-            baseSseOptions.onLoopFinish,
-            baseSseOptions.onNodeRetry,
-            baseSseOptions.onParallelBranchStarted,
-            baseSseOptions.onParallelBranchFinished,
-            baseSseOptions.onTextChunk,
-            baseSseOptions.onTTSChunk,
-            baseSseOptions.onTTSEnd,
-            baseSseOptions.onTextReplace,
-            baseSseOptions.onAgentLog,
-            baseSseOptions.onHumanInputRequired,
-            baseSseOptions.onHumanInputFormFilled,
-            baseSseOptions.onHumanInputFormTimeout,
-            baseSseOptions.onWorkflowPaused,
-            baseSseOptions.onDataSourceNodeProcessing,
-            baseSseOptions.onDataSourceNodeCompleted,
-            baseSseOptions.onDataSourceNodeError,
-          )
-        }
-        catch (error) {
-          if (controller.signal.aborted)
-            return
-          if (error instanceof Response) {
-            const data = await error.clone().json() as Record<string, any>
-            const { error: respError } = data || {}
-            Toast.notify({ type: 'error', message: respError })
-            clearAbortController()
-            setWorkflowRunningData({
-              result: {
-                status: WorkflowRunningStatus.Failed,
-                error: respError,
-                inputs_truncated: false,
-                process_data_truncated: false,
-                outputs_truncated: false,
-              },
-              tracing: [],
-            })
-          }
-          clearListeningState()
-        }
-      }
-
-      await poll()
-    }
-
-    if (runMode === TriggerType.Schedule) {
-      await runTriggerDebug(TriggerType.Schedule)
+    if (isDebuggableTriggerType(runMode)) {
+      await runTriggerDebug({
+        debugType: runMode,
+        url,
+        requestBody,
+        baseSseOptions,
+        controllerTarget: window as unknown as Record<string, unknown>,
+        setAbortController: (controller) => {
+          abortControllerRef.current = controller
+        },
+        clearAbortController,
+        clearListeningState: clearListeningStateInStore,
+        setWorkflowRunningData,
+      })
       return
     }
 
-    if (runMode === TriggerType.Webhook) {
-      await runTriggerDebug(TriggerType.Webhook)
-      return
-    }
-
-    if (runMode === TriggerType.Plugin) {
-      await runTriggerDebug(TriggerType.Plugin)
-      return
-    }
-
-    if (runMode === TriggerType.All) {
-      await runTriggerDebug(TriggerType.All)
-      return
-    }
-
-    const finalCallbacks: IOtherOptions = {
-      ...baseSseOptions,
-      getAbortController: (controller: AbortController) => {
+    const finalCallbacks = createFinalWorkflowRunCallbacks({
+      clientWidth,
+      clientHeight,
+      runHistoryUrl,
+      isInWorkflowDebug,
+      fetchInspectVars,
+      invalidAllLastRun,
+      invalidateRunHistory,
+      clearAbortController,
+      clearListeningState: clearListeningStateInStore,
+      trackWorkflowRunFailed,
+      handlers: workflowRunEventHandlers,
+      callbacks: userCallbacks,
+      restCallback,
+      baseSseOptions,
+      player,
+      setAbortController: (controller) => {
         abortControllerRef.current = controller
       },
-      onWorkflowFinished: (params) => {
-        handleWorkflowFinished(params)
-        invalidateRunHistory(runHistoryUrl)
-
-        if (onWorkflowFinished)
-          onWorkflowFinished(params)
-        if (isInWorkflowDebug) {
-          fetchInspectVars({})
-          invalidAllLastRun()
-        }
-      },
-      onError: (params) => {
-        handleWorkflowFailed()
-        invalidateRunHistory(runHistoryUrl)
-
-        if (onError)
-          onError(params)
-      },
-      onNodeStarted: (params) => {
-        handleWorkflowNodeStarted(
-          params,
-          {
-            clientWidth,
-            clientHeight,
-          },
-        )
-
-        if (onNodeStarted)
-          onNodeStarted(params)
-      },
-      onNodeFinished: (params) => {
-        handleWorkflowNodeFinished(params)
-
-        if (onNodeFinished)
-          onNodeFinished(params)
-      },
-      onIterationStart: (params) => {
-        handleWorkflowNodeIterationStarted(
-          params,
-          {
-            clientWidth,
-            clientHeight,
-          },
-        )
-
-        if (onIterationStart)
-          onIterationStart(params)
-      },
-      onIterationNext: (params) => {
-        handleWorkflowNodeIterationNext(params)
-
-        if (onIterationNext)
-          onIterationNext(params)
-      },
-      onIterationFinish: (params) => {
-        handleWorkflowNodeIterationFinished(params)
-
-        if (onIterationFinish)
-          onIterationFinish(params)
-      },
-      onLoopStart: (params) => {
-        handleWorkflowNodeLoopStarted(
-          params,
-          {
-            clientWidth,
-            clientHeight,
-          },
-        )
-
-        if (onLoopStart)
-          onLoopStart(params)
-      },
-      onLoopNext: (params) => {
-        handleWorkflowNodeLoopNext(params)
-
-        if (onLoopNext)
-          onLoopNext(params)
-      },
-      onLoopFinish: (params) => {
-        handleWorkflowNodeLoopFinished(params)
-
-        if (onLoopFinish)
-          onLoopFinish(params)
-      },
-      onNodeRetry: (params) => {
-        handleWorkflowNodeRetry(params)
-
-        if (onNodeRetry)
-          onNodeRetry(params)
-      },
-      onAgentLog: (params) => {
-        handleWorkflowAgentLog(params)
-
-        if (onAgentLog)
-          onAgentLog(params)
-      },
-      onTextChunk: (params) => {
-        handleWorkflowTextChunk(params)
-      },
-      onTextReplace: (params) => {
-        handleWorkflowTextReplace(params)
-      },
-      onTTSChunk: (messageId: string, audio: string) => {
-        if (!audio || audio === '')
-          return
-        player?.playAudioWithAudio(audio, true)
-        AudioPlayerManager.getInstance().resetMsgId(messageId)
-      },
-      onTTSEnd: (messageId: string, audio: string) => {
-        player?.playAudioWithAudio(audio, false)
-      },
-      onWorkflowPaused: (params) => {
-        handleWorkflowPaused()
-        invalidateRunHistory(runHistoryUrl)
-        if (onWorkflowPaused)
-          onWorkflowPaused(params)
-        const url = `/workflow/${params.workflow_run_id}/events`
-        sseGet(
-          url,
-          {},
-          finalCallbacks,
-        )
-      },
-      onHumanInputRequired: (params) => {
-        handleWorkflowNodeHumanInputRequired(params)
-        if (onHumanInputRequired)
-          onHumanInputRequired(params)
-      },
-      onHumanInputFormFilled: (params) => {
-        handleWorkflowNodeHumanInputFormFilled(params)
-        if (onHumanInputFormFilled)
-          onHumanInputFormFilled(params)
-      },
-      onHumanInputFormTimeout: (params) => {
-        handleWorkflowNodeHumanInputFormTimeout(params)
-        if (onHumanInputFormTimeout)
-          onHumanInputFormTimeout(params)
-      },
-      ...restCallback,
-    }
+    })
 
     ssePost(
       url,
@@ -860,20 +376,13 @@ export const useWorkflowRun = () => {
         setListeningTriggerNodeId,
       } = workflowStore.getState()
 
-      setWorkflowRunningData({
-        result: {
-          status: WorkflowRunningStatus.Stopped,
-          inputs_truncated: false,
-          process_data_truncated: false,
-          outputs_truncated: false,
-        },
-        tracing: [],
-        resultText: '',
+      applyStoppedState({
+        setWorkflowRunningData,
+        setIsListening,
+        setShowVariableInspectPanel,
+        setListeningTriggerType,
+        setListeningTriggerNodeId,
       })
-      setIsListening(false)
-      setListeningTriggerType(null)
-      setListeningTriggerNodeId(null)
-      setShowVariableInspectPanel(true)
     }
 
     if (taskId) {
@@ -909,7 +418,7 @@ export const useWorkflowRun = () => {
   }, [workflowStore])
 
   const handleRestoreFromPublishedWorkflow = useCallback((publishedWorkflow: VersionHistory) => {
-    const nodes = publishedWorkflow.graph.nodes.map(node => ({ ...node, selected: false, data: { ...node.data, selected: false } }))
+    const nodes = normalizePublishedWorkflowNodes(publishedWorkflow)
     const edges = publishedWorkflow.graph.edges
     const viewport = publishedWorkflow.graph.viewport!
     handleUpdateWorkflowCanvas({
@@ -917,21 +426,7 @@ export const useWorkflowRun = () => {
       edges,
       viewport,
     })
-    const mappedFeatures = {
-      opening: {
-        enabled: !!publishedWorkflow.features.opening_statement || !!publishedWorkflow.features.suggested_questions.length,
-        opening_statement: publishedWorkflow.features.opening_statement,
-        suggested_questions: publishedWorkflow.features.suggested_questions,
-      },
-      suggested: publishedWorkflow.features.suggested_questions_after_answer,
-      text2speech: publishedWorkflow.features.text_to_speech,
-      speech2text: publishedWorkflow.features.speech_to_text,
-      citation: publishedWorkflow.features.retriever_resource,
-      moderation: publishedWorkflow.features.sensitive_word_avoidance,
-      file: publishedWorkflow.features.file_upload,
-    }
-
-    featuresStore?.setState({ features: mappedFeatures })
+    featuresStore?.setState({ features: mapPublishedWorkflowFeatures(publishedWorkflow) })
     workflowStore.getState().setEnvironmentVariables(publishedWorkflow.environment_variables || [])
   }, [featuresStore, handleUpdateWorkflowCanvas, workflowStore])
 

web/app/components/workflow-app/index.tsx

@@ -9,16 +9,12 @@ import {
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FeaturesProvider } from '@/app/components/base/features'
 import Loading from '@/app/components/base/loading'
-import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import WorkflowWithDefaultContext from '@/app/components/workflow'
 import {
   WorkflowContextProvider,
 } from '@/app/components/workflow/context'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useTriggerStatusStore } from '@/app/components/workflow/store/trigger-status'
-import {
-  SupportUploadFileTypes,
-} from '@/app/components/workflow/types'
 import {
   initialEdges,
   initialNodes,
@@ -35,6 +31,11 @@ import {
   useWorkflowInit,
 } from './hooks/use-workflow-init'
 import { createWorkflowSlice } from './store/workflow/workflow-slice'
+import {
+  buildInitialFeatures,
+  buildTriggerStatusMap,
+  coerceReplayUserInputs,
+} from './utils'
 
 const WorkflowAppWithAdditionalContext = () => {
   const {
@@ -58,13 +59,7 @@ const WorkflowAppWithAdditionalContext = () => {
   // Sync trigger statuses to store when data loads
   useEffect(() => {
     if (triggersResponse?.data) {
-      // Map API status to EntryNodeStatus: 'enabled' stays 'enabled', all others become 'disabled'
-      const statusMap = triggersResponse.data.reduce((acc, trigger) => {
-        acc[trigger.node_id] = trigger.status === 'enabled' ? 'enabled' : 'disabled'
-        return acc
-      }, {} as Record<string, 'enabled' | 'disabled'>)
-
-      setTriggerStatuses(statusMap)
+      setTriggerStatuses(buildTriggerStatusMap(triggersResponse.data))
     }
   }, [triggersResponse?.data, setTriggerStatuses])
 
@@ -108,49 +103,21 @@ const WorkflowAppWithAdditionalContext = () => {
     fetchRunDetail(runUrl).then((res) => {
       const { setInputs, setShowInputsPanel, setShowDebugAndPreviewPanel } = workflowStore.getState()
       const rawInputs = res.inputs
-      let parsedInputs: Record<string, unknown> | null = null
+      let parsedInputs: unknown = rawInputs
 
       if (typeof rawInputs === 'string') {
         try {
-          const maybeParsed = JSON.parse(rawInputs) as unknown
-          if (maybeParsed && typeof maybeParsed === 'object' && !Array.isArray(maybeParsed))
-            parsedInputs = maybeParsed as Record<string, unknown>
+          parsedInputs = JSON.parse(rawInputs) as unknown
         }
         catch (error) {
           console.error('Failed to parse workflow run inputs', error)
+          return
         }
       }
-      else if (rawInputs && typeof rawInputs === 'object' && !Array.isArray(rawInputs)) {
-        parsedInputs = rawInputs as Record<string, unknown>
-      }
 
-      if (!parsedInputs)
-        return
+      const userInputs = coerceReplayUserInputs(parsedInputs)
 
-      const userInputs: Record<string, string | number | boolean> = {}
-      Object.entries(parsedInputs).forEach(([key, value]) => {
-        if (key.startsWith('sys.'))
-          return
-
-        if (value == null) {
-          userInputs[key] = ''
-          return
-        }
-
-        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-          userInputs[key] = value
-          return
-        }
-
-        try {
-          userInputs[key] = JSON.stringify(value)
-        }
-        catch {
-          userInputs[key] = String(value)
-        }
-      })
-
-      if (!Object.keys(userInputs).length)
+      if (!userInputs || !Object.keys(userInputs).length)
         return
 
       setInputs(userInputs)
@@ -167,32 +134,7 @@ const WorkflowAppWithAdditionalContext = () => {
     )
   }
 
-  const features = data.features || {}
-  const initialFeatures: 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,
-      fileUploadConfig: fileUploadConfigResponse,
-    },
-    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 },
-  }
+  const initialFeatures: FeaturesData = buildInitialFeatures(data.features, fileUploadConfigResponse)
 
   return (
     <WorkflowWithDefaultContext

web/app/components/workflow-app/store/workflow/__tests__/workflow-slice.spec.ts

@@ -0,0 +1,44 @@
+import { createStore } from 'zustand/vanilla'
+import { createWorkflowSlice } from '../workflow-slice'
+
+describe('createWorkflowSlice', () => {
+  it('should initialize workflow slice state with expected defaults', () => {
+    const store = createStore(createWorkflowSlice)
+    const state = store.getState()
+
+    expect(state.appId).toBe('')
+    expect(state.appName).toBe('')
+    expect(state.notInitialWorkflow).toBe(false)
+    expect(state.shouldAutoOpenStartNodeSelector).toBe(false)
+    expect(state.nodesDefaultConfigs).toEqual({})
+    expect(state.showOnboarding).toBe(false)
+    expect(state.hasSelectedStartNode).toBe(false)
+    expect(state.hasShownOnboarding).toBe(false)
+  })
+
+  it('should update every workflow slice field through its setters', () => {
+    const store = createStore(createWorkflowSlice)
+
+    store.setState({
+      appId: 'app-1',
+      appName: 'Workflow App',
+    })
+    store.getState().setNotInitialWorkflow(true)
+    store.getState().setShouldAutoOpenStartNodeSelector(true)
+    store.getState().setNodesDefaultConfigs({ start: { title: 'Start' } })
+    store.getState().setShowOnboarding(true)
+    store.getState().setHasSelectedStartNode(true)
+    store.getState().setHasShownOnboarding(true)
+
+    expect(store.getState()).toMatchObject({
+      appId: 'app-1',
+      appName: 'Workflow App',
+      notInitialWorkflow: true,
+      shouldAutoOpenStartNodeSelector: true,
+      nodesDefaultConfigs: { start: { title: 'Start' } },
+      showOnboarding: true,
+      hasSelectedStartNode: true,
+      hasShownOnboarding: true,
+    })
+  })
+})

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

@@ -0,0 +1,107 @@
+import type { Features as FeaturesData } from '@/app/components/base/features/types'
+import type { FileUploadConfigResponse } from '@/models/common'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'
+
+type TriggerStatusLike = {
+  node_id: string
+  status: string
+}
+
+type FileUploadFeatureLike = {
+  enabled?: boolean
+  allowed_file_types?: SupportUploadFileTypes[]
+  allowed_file_extensions?: string[]
+  allowed_file_upload_methods?: TransferMethod[]
+  number_limits?: number
+  image?: {
+    enabled?: boolean
+    number_limits?: number
+    transfer_methods?: TransferMethod[]
+  }
+}
+
+type WorkflowFeaturesLike = {
+  file_upload?: FileUploadFeatureLike
+  opening_statement?: string
+  suggested_questions?: string[]
+  suggested_questions_after_answer?: { enabled?: boolean }
+  speech_to_text?: { enabled?: boolean }
+  text_to_speech?: { enabled?: boolean }
+  retriever_resource?: { enabled?: boolean }
+  sensitive_word_avoidance?: { enabled?: boolean }
+}
+
+export const buildTriggerStatusMap = (triggers: TriggerStatusLike[]) => {
+  return triggers.reduce<Record<string, 'enabled' | 'disabled'>>((acc, trigger) => {
+    acc[trigger.node_id] = trigger.status === 'enabled' ? 'enabled' : 'disabled'
+    return acc
+  }, {})
+}
+
+export const coerceReplayUserInputs = (rawInputs: unknown): Record<string, string | number | boolean> | null => {
+  if (!rawInputs || typeof rawInputs !== 'object' || Array.isArray(rawInputs))
+    return null
+
+  const userInputs: Record<string, string | number | boolean> = {}
+
+  Object.entries(rawInputs as Record<string, unknown>).forEach(([key, value]) => {
+    if (key.startsWith('sys.'))
+      return
+
+    if (value == null) {
+      userInputs[key] = ''
+      return
+    }
+
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      userInputs[key] = value
+      return
+    }
+
+    try {
+      userInputs[key] = JSON.stringify(value)
+    }
+    catch {
+      userInputs[key] = String(value)
+    }
+  })
+
+  return userInputs
+}
+
+export const buildInitialFeatures = (
+  featuresSource: WorkflowFeaturesLike | null | undefined,
+  fileUploadConfigResponse: FileUploadConfigResponse | undefined,
+): FeaturesData => {
+  const features = featuresSource || {}
+  const fileUpload = features.file_upload
+  const imageUpload = fileUpload?.image
+
+  return {
+    file: {
+      image: {
+        enabled: !!imageUpload?.enabled,
+        number_limits: imageUpload?.number_limits || 3,
+        transfer_methods: imageUpload?.transfer_methods || [TransferMethod.local_file, TransferMethod.remote_url],
+      },
+      enabled: !!(fileUpload?.enabled || imageUpload?.enabled),
+      allowed_file_types: fileUpload?.allowed_file_types || [SupportUploadFileTypes.image],
+      allowed_file_extensions: fileUpload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`),
+      allowed_file_upload_methods: fileUpload?.allowed_file_upload_methods || imageUpload?.transfer_methods || [TransferMethod.local_file, TransferMethod.remote_url],
+      number_limits: fileUpload?.number_limits || imageUpload?.number_limits || 3,
+      fileUploadConfig: fileUploadConfigResponse,
+    },
+    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 },
+  }
+}

web/app/components/workflow/__tests__/candidate-node-main.spec.tsx

@@ -0,0 +1,260 @@
+import { render, screen } from '@testing-library/react'
+import CandidateNodeMain from '../candidate-node-main'
+import { CUSTOM_NODE } from '../constants'
+import { CUSTOM_NOTE_NODE } from '../note-node/constants'
+import { BlockEnum } from '../types'
+import { createNode } from './fixtures'
+
+const mockUseEventListener = vi.hoisted(() => vi.fn())
+const mockUseStoreApi = vi.hoisted(() => vi.fn())
+const mockUseReactFlow = vi.hoisted(() => vi.fn())
+const mockUseViewport = vi.hoisted(() => vi.fn())
+const mockUseStore = vi.hoisted(() => vi.fn())
+const mockUseWorkflowStore = vi.hoisted(() => vi.fn())
+const mockUseHooks = vi.hoisted(() => vi.fn())
+const mockCustomNode = vi.hoisted(() => vi.fn())
+const mockCustomNoteNode = vi.hoisted(() => vi.fn())
+const mockGetIterationStartNode = vi.hoisted(() => vi.fn())
+const mockGetLoopStartNode = vi.hoisted(() => vi.fn())
+
+vi.mock('ahooks', () => ({
+  useEventListener: (...args: unknown[]) => mockUseEventListener(...args),
+}))
+
+vi.mock('reactflow', () => ({
+  useStoreApi: () => mockUseStoreApi(),
+  useReactFlow: () => mockUseReactFlow(),
+  useViewport: () => mockUseViewport(),
+  Position: {
+    Left: 'left',
+    Right: 'right',
+  },
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: { mousePosition: {
+    pageX: number
+    pageY: number
+    elementX: number
+    elementY: number
+  } }) => unknown) => mockUseStore(selector),
+  useWorkflowStore: () => mockUseWorkflowStore(),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesInteractions: () => mockUseHooks().useNodesInteractions(),
+  useNodesSyncDraft: () => mockUseHooks().useNodesSyncDraft(),
+  useWorkflowHistory: () => mockUseHooks().useWorkflowHistory(),
+  useAutoGenerateWebhookUrl: () => mockUseHooks().useAutoGenerateWebhookUrl(),
+  WorkflowHistoryEvent: {
+    NodeAdd: 'NodeAdd',
+    NoteAdd: 'NoteAdd',
+  },
+}))
+
+vi.mock('@/app/components/workflow/nodes', () => ({
+  __esModule: true,
+  default: (props: { id: string }) => {
+    mockCustomNode(props)
+    return <div data-testid="candidate-custom-node">{props.id}</div>
+  },
+}))
+
+vi.mock('@/app/components/workflow/note-node', () => ({
+  __esModule: true,
+  default: (props: { id: string }) => {
+    mockCustomNoteNode(props)
+    return <div data-testid="candidate-note-node">{props.id}</div>
+  },
+}))
+
+vi.mock('@/app/components/workflow/utils', () => ({
+  getIterationStartNode: (...args: unknown[]) => mockGetIterationStartNode(...args),
+  getLoopStartNode: (...args: unknown[]) => mockGetLoopStartNode(...args),
+}))
+
+describe('CandidateNodeMain', () => {
+  const mockSetNodes = vi.fn()
+  const mockHandleNodeSelect = vi.fn()
+  const mockSaveStateToHistory = vi.fn()
+  const mockHandleSyncWorkflowDraft = vi.fn()
+  const mockAutoGenerateWebhookUrl = vi.fn()
+  const mockWorkflowStoreSetState = vi.fn()
+  const createNodesInteractions = () => ({
+    handleNodeSelect: mockHandleNodeSelect,
+  })
+  const createWorkflowHistory = () => ({
+    saveStateToHistory: mockSaveStateToHistory,
+  })
+  const createNodesSyncDraft = () => ({
+    handleSyncWorkflowDraft: mockHandleSyncWorkflowDraft,
+  })
+  const createAutoGenerateWebhookUrl = () => mockAutoGenerateWebhookUrl
+  const eventHandlers: Partial<Record<'click' | 'contextmenu', (event: { preventDefault: () => void }) => void>> = {}
+  let nodes = [createNode({ id: 'existing-node' })]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    nodes = [createNode({ id: 'existing-node' })]
+    eventHandlers.click = undefined
+    eventHandlers.contextmenu = undefined
+
+    mockUseEventListener.mockImplementation((event: 'click' | 'contextmenu', handler: (event: { preventDefault: () => void }) => void) => {
+      eventHandlers[event] = handler
+    })
+    mockUseStoreApi.mockReturnValue({
+      getState: () => ({
+        getNodes: () => nodes,
+        setNodes: mockSetNodes,
+      }),
+    })
+    mockUseReactFlow.mockReturnValue({
+      screenToFlowPosition: ({ x, y }: { x: number, y: number }) => ({ x: x + 10, y: y + 20 }),
+    })
+    mockUseViewport.mockReturnValue({ zoom: 1.5 })
+    mockUseStore.mockImplementation((selector: (state: { mousePosition: {
+      pageX: number
+      pageY: number
+      elementX: number
+      elementY: number
+    } }) => unknown) => selector({
+      mousePosition: {
+        pageX: 100,
+        pageY: 200,
+        elementX: 30,
+        elementY: 40,
+      },
+    }))
+    mockUseWorkflowStore.mockReturnValue({
+      setState: mockWorkflowStoreSetState,
+    })
+    mockUseHooks.mockReturnValue({
+      useNodesInteractions: createNodesInteractions,
+      useWorkflowHistory: createWorkflowHistory,
+      useNodesSyncDraft: createNodesSyncDraft,
+      useAutoGenerateWebhookUrl: createAutoGenerateWebhookUrl,
+    })
+    mockHandleSyncWorkflowDraft.mockImplementation((_isSync: boolean, _force: boolean, options?: { onSuccess?: () => void }) => {
+      options?.onSuccess?.()
+    })
+    mockGetIterationStartNode.mockReturnValue(createNode({ id: 'iteration-start' }))
+    mockGetLoopStartNode.mockReturnValue(createNode({ id: 'loop-start' }))
+  })
+
+  it('should render the candidate node and commit a webhook node on click', () => {
+    const candidateNode = createNode({
+      id: 'candidate-webhook',
+      type: CUSTOM_NODE,
+      data: {
+        type: BlockEnum.TriggerWebhook,
+        title: 'Webhook Candidate',
+        _isCandidate: true,
+      },
+    })
+
+    const { container } = render(<CandidateNodeMain candidateNode={candidateNode} />)
+
+    expect(screen.getByTestId('candidate-custom-node')).toHaveTextContent('candidate-webhook')
+    expect(container.firstChild).toHaveStyle({
+      left: '30px',
+      top: '40px',
+      transform: 'scale(1.5)',
+    })
+
+    eventHandlers.click?.({ preventDefault: vi.fn() })
+
+    expect(mockSetNodes).toHaveBeenCalledWith(expect.arrayContaining([
+      expect.objectContaining({ id: 'existing-node' }),
+      expect.objectContaining({
+        id: 'candidate-webhook',
+        position: { x: 110, y: 220 },
+        data: expect.objectContaining({ _isCandidate: false }),
+      }),
+    ]))
+    expect(mockSaveStateToHistory).toHaveBeenCalledWith('NodeAdd', { nodeId: 'candidate-webhook' })
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({ candidateNode: undefined })
+    expect(mockHandleSyncWorkflowDraft).toHaveBeenCalledWith(true, true, expect.objectContaining({
+      onSuccess: expect.any(Function),
+    }))
+    expect(mockAutoGenerateWebhookUrl).toHaveBeenCalledWith('candidate-webhook')
+    expect(mockHandleNodeSelect).not.toHaveBeenCalled()
+  })
+
+  it('should save note candidates as notes and select the inserted note', () => {
+    const candidateNode = createNode({
+      id: 'candidate-note',
+      type: CUSTOM_NOTE_NODE,
+      data: {
+        type: BlockEnum.Code,
+        title: 'Note Candidate',
+        _isCandidate: true,
+      },
+    })
+
+    render(<CandidateNodeMain candidateNode={candidateNode} />)
+
+    expect(screen.getByTestId('candidate-note-node')).toHaveTextContent('candidate-note')
+
+    eventHandlers.click?.({ preventDefault: vi.fn() })
+
+    expect(mockSaveStateToHistory).toHaveBeenCalledWith('NoteAdd', { nodeId: 'candidate-note' })
+    expect(mockHandleNodeSelect).toHaveBeenCalledWith('candidate-note')
+  })
+
+  it('should append iteration and loop start helper nodes for control-flow candidates', () => {
+    const iterationNode = createNode({
+      id: 'candidate-iteration',
+      type: CUSTOM_NODE,
+      data: {
+        type: BlockEnum.Iteration,
+        title: 'Iteration Candidate',
+        _isCandidate: true,
+      },
+    })
+    const loopNode = createNode({
+      id: 'candidate-loop',
+      type: CUSTOM_NODE,
+      data: {
+        type: BlockEnum.Loop,
+        title: 'Loop Candidate',
+        _isCandidate: true,
+      },
+    })
+
+    const { rerender } = render(<CandidateNodeMain candidateNode={iterationNode} />)
+
+    eventHandlers.click?.({ preventDefault: vi.fn() })
+    expect(mockGetIterationStartNode).toHaveBeenCalledWith('candidate-iteration')
+    expect(mockSetNodes.mock.calls[0][0]).toEqual(expect.arrayContaining([
+      expect.objectContaining({ id: 'candidate-iteration' }),
+      expect.objectContaining({ id: 'iteration-start' }),
+    ]))
+
+    rerender(<CandidateNodeMain candidateNode={loopNode} />)
+    eventHandlers.click?.({ preventDefault: vi.fn() })
+
+    expect(mockGetLoopStartNode).toHaveBeenCalledWith('candidate-loop')
+    expect(mockSetNodes.mock.calls[1][0]).toEqual(expect.arrayContaining([
+      expect.objectContaining({ id: 'candidate-loop' }),
+      expect.objectContaining({ id: 'loop-start' }),
+    ]))
+  })
+
+  it('should clear the candidate node on contextmenu', () => {
+    const candidateNode = createNode({
+      id: 'candidate-context',
+      type: CUSTOM_NODE,
+      data: {
+        type: BlockEnum.Code,
+        title: 'Context Candidate',
+        _isCandidate: true,
+      },
+    })
+
+    render(<CandidateNodeMain candidateNode={candidateNode} />)
+
+    eventHandlers.contextmenu?.({ preventDefault: vi.fn() })
+
+    expect(mockWorkflowStoreSetState).toHaveBeenCalledWith({ candidateNode: undefined })
+  })
+})

web/app/components/workflow/__tests__/custom-edge.spec.tsx

@@ -0,0 +1,235 @@
+import type { ReactNode } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Position } from 'reactflow'
+import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
+import CustomEdge from '../custom-edge'
+import { BlockEnum, NodeRunningStatus } from '../types'
+
+const mockUseAvailableBlocks = vi.hoisted(() => vi.fn())
+const mockUseNodesInteractions = vi.hoisted(() => vi.fn())
+const mockBlockSelector = vi.hoisted(() => vi.fn())
+const mockGradientRender = vi.hoisted(() => vi.fn())
+
+vi.mock('reactflow', () => ({
+  BaseEdge: (props: {
+    id: string
+    path: string
+    style: {
+      stroke: string
+      strokeWidth: number
+      opacity: number
+      strokeDasharray?: string
+    }
+  }) => (
+    <div
+      data-testid="base-edge"
+      data-id={props.id}
+      data-path={props.path}
+      data-stroke={props.style.stroke}
+      data-stroke-width={props.style.strokeWidth}
+      data-opacity={props.style.opacity}
+      data-dasharray={props.style.strokeDasharray}
+    />
+  ),
+  EdgeLabelRenderer: ({ children }: { children?: ReactNode }) => <div data-testid="edge-label">{children}</div>,
+  getBezierPath: () => ['M 0 0', 24, 48],
+  Position: {
+    Right: 'right',
+    Left: 'left',
+  },
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useAvailableBlocks: (...args: unknown[]) => mockUseAvailableBlocks(...args),
+  useNodesInteractions: () => mockUseNodesInteractions(),
+}))
+
+vi.mock('@/app/components/workflow/block-selector', () => ({
+  __esModule: true,
+  default: (props: {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onSelect: (nodeType: string, pluginDefaultValue?: Record<string, unknown>) => void
+    availableBlocksTypes: string[]
+    triggerClassName?: () => string
+  }) => {
+    mockBlockSelector(props)
+    return (
+      <button
+        type="button"
+        data-testid="block-selector"
+        data-trigger-class={props.triggerClassName?.()}
+        onClick={() => {
+          props.onOpenChange(true)
+          props.onSelect('llm', { provider: 'openai' })
+        }}
+      >
+        {props.availableBlocksTypes.join(',')}
+      </button>
+    )
+  },
+}))
+
+vi.mock('@/app/components/workflow/custom-edge-linear-gradient-render', () => ({
+  __esModule: true,
+  default: (props: {
+    id: string
+    startColor: string
+    stopColor: string
+  }) => {
+    mockGradientRender(props)
+    return <div data-testid="edge-gradient">{props.id}</div>
+  },
+}))
+
+describe('CustomEdge', () => {
+  const mockHandleNodeAdd = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseNodesInteractions.mockReturnValue({
+      handleNodeAdd: mockHandleNodeAdd,
+    })
+    mockUseAvailableBlocks.mockImplementation((nodeType: BlockEnum) => {
+      if (nodeType === BlockEnum.Code)
+        return { availablePrevBlocks: ['code', 'llm'] }
+
+      return { availableNextBlocks: ['llm', 'tool'] }
+    })
+  })
+
+  it('should render a gradient edge and insert a node between the source and target', () => {
+    render(
+      <CustomEdge
+        id="edge-1"
+        source="source-node"
+        sourceHandleId="source"
+        target="target-node"
+        targetHandleId="target"
+        sourceX={100}
+        sourceY={120}
+        sourcePosition={Position.Right}
+        targetX={300}
+        targetY={220}
+        targetPosition={Position.Left}
+        selected={false}
+        data={{
+          sourceType: BlockEnum.Start,
+          targetType: BlockEnum.Code,
+          _sourceRunningStatus: NodeRunningStatus.Succeeded,
+          _targetRunningStatus: NodeRunningStatus.Failed,
+          _hovering: true,
+          _waitingRun: true,
+          _dimmed: true,
+          _isTemp: true,
+          isInIteration: true,
+          isInLoop: true,
+        } as never}
+      />,
+    )
+
+    expect(screen.getByTestId('edge-gradient')).toHaveTextContent('edge-1')
+    expect(mockGradientRender).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'edge-1',
+      startColor: 'var(--color-workflow-link-line-success-handle)',
+      stopColor: 'var(--color-workflow-link-line-error-handle)',
+    }))
+    expect(screen.getByTestId('base-edge')).toHaveAttribute('data-stroke', 'url(#edge-1)')
+    expect(screen.getByTestId('base-edge')).toHaveAttribute('data-opacity', '0.3')
+    expect(screen.getByTestId('base-edge')).toHaveAttribute('data-dasharray', '8 8')
+    expect(screen.getByTestId('block-selector')).toHaveTextContent('llm')
+    expect(screen.getByTestId('block-selector').parentElement).toHaveStyle({
+      transform: 'translate(-50%, -50%) translate(24px, 48px)',
+      opacity: '0.7',
+    })
+
+    fireEvent.click(screen.getByTestId('block-selector'))
+
+    expect(mockHandleNodeAdd).toHaveBeenCalledWith(
+      {
+        nodeType: 'llm',
+        pluginDefaultValue: { provider: 'openai' },
+      },
+      {
+        prevNodeId: 'source-node',
+        prevNodeSourceHandle: 'source',
+        nextNodeId: 'target-node',
+        nextNodeTargetHandle: 'target',
+      },
+    )
+  })
+
+  it('should prefer the running stroke color when the edge is selected', () => {
+    render(
+      <CustomEdge
+        id="edge-selected"
+        source="source-node"
+        target="target-node"
+        sourceX={0}
+        sourceY={0}
+        sourcePosition={Position.Right}
+        targetX={100}
+        targetY={100}
+        targetPosition={Position.Left}
+        selected
+        data={{
+          sourceType: BlockEnum.Start,
+          targetType: BlockEnum.Code,
+          _sourceRunningStatus: NodeRunningStatus.Succeeded,
+          _targetRunningStatus: NodeRunningStatus.Running,
+        } as never}
+      />,
+    )
+
+    expect(screen.getByTestId('base-edge')).toHaveAttribute('data-stroke', 'var(--color-workflow-link-line-handle)')
+  })
+
+  it('should use the fail-branch running color while the connected node is hovering', () => {
+    render(
+      <CustomEdge
+        id="edge-hover"
+        source="source-node"
+        sourceHandleId={ErrorHandleTypeEnum.failBranch}
+        target="target-node"
+        sourceX={0}
+        sourceY={0}
+        sourcePosition={Position.Right}
+        targetX={100}
+        targetY={100}
+        targetPosition={Position.Left}
+        selected={false}
+        data={{
+          sourceType: BlockEnum.Start,
+          targetType: BlockEnum.Code,
+          _connectedNodeIsHovering: true,
+        } as never}
+      />,
+    )
+
+    expect(screen.getByTestId('base-edge')).toHaveAttribute('data-stroke', 'var(--color-workflow-link-line-failure-handle)')
+  })
+
+  it('should fall back to the default edge color when no highlight state is active', () => {
+    render(
+      <CustomEdge
+        id="edge-default"
+        source="source-node"
+        target="target-node"
+        sourceX={0}
+        sourceY={0}
+        sourcePosition={Position.Right}
+        targetX={100}
+        targetY={100}
+        targetPosition={Position.Left}
+        selected={false}
+        data={{
+          sourceType: BlockEnum.Start,
+          targetType: BlockEnum.Code,
+        } as never}
+      />,
+    )
+
+    expect(screen.getByTestId('base-edge')).toHaveAttribute('data-stroke', 'var(--color-workflow-link-line-normal)')
+    expect(screen.getByTestId('block-selector')).toHaveAttribute('data-trigger-class', 'hover:scale-150 transition-all')
+  })
+})

web/app/components/workflow/__tests__/node-contextmenu.spec.tsx

@@ -0,0 +1,114 @@
+import type { Node } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import NodeContextmenu from '../node-contextmenu'
+
+const mockUseClickAway = vi.hoisted(() => vi.fn())
+const mockUseNodes = vi.hoisted(() => vi.fn())
+const mockUsePanelInteractions = vi.hoisted(() => vi.fn())
+const mockUseStore = vi.hoisted(() => vi.fn())
+const mockPanelOperatorPopup = vi.hoisted(() => vi.fn())
+
+vi.mock('ahooks', () => ({
+  useClickAway: (...args: unknown[]) => mockUseClickAway(...args),
+}))
+
+vi.mock('@/app/components/workflow/store/workflow/use-nodes', () => ({
+  __esModule: true,
+  default: () => mockUseNodes(),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  usePanelInteractions: () => mockUsePanelInteractions(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: { nodeMenu?: { nodeId: string, left: number, top: number } }) => unknown) => mockUseStore(selector),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup', () => ({
+  __esModule: true,
+  default: (props: {
+    id: string
+    data: Node['data']
+    showHelpLink: boolean
+    onClosePopup: () => void
+  }) => {
+    mockPanelOperatorPopup(props)
+    return (
+      <button type="button" onClick={props.onClosePopup}>
+        {props.id}
+        :
+        {props.data.title}
+      </button>
+    )
+  },
+}))
+
+describe('NodeContextmenu', () => {
+  const mockHandleNodeContextmenuCancel = vi.fn()
+  let nodeMenu: { nodeId: string, left: number, top: number } | undefined
+  let nodes: Node[]
+  let clickAwayHandler: (() => void) | undefined
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    nodeMenu = undefined
+    nodes = [{
+      id: 'node-1',
+      type: 'custom',
+      position: { x: 0, y: 0 },
+      data: {
+        title: 'Node 1',
+        desc: '',
+        type: 'code' as never,
+      },
+    } as Node]
+    clickAwayHandler = undefined
+
+    mockUseClickAway.mockImplementation((handler: () => void) => {
+      clickAwayHandler = handler
+    })
+    mockUseNodes.mockImplementation(() => nodes)
+    mockUsePanelInteractions.mockReturnValue({
+      handleNodeContextmenuCancel: mockHandleNodeContextmenuCancel,
+    })
+    mockUseStore.mockImplementation((selector: (state: { nodeMenu?: { nodeId: string, left: number, top: number } }) => unknown) => selector({ nodeMenu }))
+  })
+
+  it('should stay hidden when the node menu is absent', () => {
+    render(<NodeContextmenu />)
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    expect(mockPanelOperatorPopup).not.toHaveBeenCalled()
+  })
+
+  it('should stay hidden when the referenced node cannot be found', () => {
+    nodeMenu = { nodeId: 'missing-node', left: 80, top: 120 }
+
+    render(<NodeContextmenu />)
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    expect(mockPanelOperatorPopup).not.toHaveBeenCalled()
+  })
+
+  it('should render the popup at the stored position and close on popup/click-away actions', () => {
+    nodeMenu = { nodeId: 'node-1', left: 80, top: 120 }
+    const { container } = render(<NodeContextmenu />)
+
+    expect(screen.getByRole('button')).toHaveTextContent('node-1:Node 1')
+    expect(mockPanelOperatorPopup).toHaveBeenCalledWith(expect.objectContaining({
+      id: 'node-1',
+      data: expect.objectContaining({ title: 'Node 1' }),
+      showHelpLink: true,
+    }))
+    expect(container.firstChild).toHaveStyle({
+      left: '80px',
+      top: '120px',
+    })
+
+    fireEvent.click(screen.getByRole('button'))
+    clickAwayHandler?.()
+
+    expect(mockHandleNodeContextmenuCancel).toHaveBeenCalledTimes(2)
+  })
+})

web/app/components/workflow/__tests__/panel-contextmenu.spec.tsx

@@ -0,0 +1,151 @@
+import type { ReactNode } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import PanelContextmenu from '../panel-contextmenu'
+
+const mockUseClickAway = vi.hoisted(() => vi.fn())
+const mockUseTranslation = vi.hoisted(() => vi.fn())
+const mockUseStore = vi.hoisted(() => vi.fn())
+const mockUseNodesInteractions = vi.hoisted(() => vi.fn())
+const mockUsePanelInteractions = vi.hoisted(() => vi.fn())
+const mockUseWorkflowStartRun = vi.hoisted(() => vi.fn())
+const mockUseOperator = vi.hoisted(() => vi.fn())
+const mockUseDSL = vi.hoisted(() => vi.fn())
+
+vi.mock('ahooks', () => ({
+  useClickAway: (...args: unknown[]) => mockUseClickAway(...args),
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => mockUseTranslation(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: {
+    panelMenu?: { left: number, top: number }
+    clipboardElements: unknown[]
+    setShowImportDSLModal: (visible: boolean) => void
+  }) => unknown) => mockUseStore(selector),
+}))
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesInteractions: () => mockUseNodesInteractions(),
+  usePanelInteractions: () => mockUsePanelInteractions(),
+  useWorkflowStartRun: () => mockUseWorkflowStartRun(),
+  useDSL: () => mockUseDSL(),
+}))
+
+vi.mock('@/app/components/workflow/operator/hooks', () => ({
+  useOperator: () => mockUseOperator(),
+}))
+
+vi.mock('@/app/components/workflow/operator/add-block', () => ({
+  __esModule: true,
+  default: ({ renderTrigger }: { renderTrigger: () => ReactNode }) => (
+    <div data-testid="add-block">{renderTrigger()}</div>
+  ),
+}))
+
+vi.mock('@/app/components/base/divider', () => ({
+  __esModule: true,
+  default: ({ className }: { className?: string }) => <div data-testid="divider" className={className} />,
+}))
+
+vi.mock('@/app/components/workflow/shortcuts-name', () => ({
+  __esModule: true,
+  default: ({ keys }: { keys: string[] }) => <span data-testid={`shortcut-${keys.join('-')}`}>{keys.join('+')}</span>,
+}))
+
+describe('PanelContextmenu', () => {
+  const mockHandleNodesPaste = vi.fn()
+  const mockHandlePaneContextmenuCancel = vi.fn()
+  const mockHandleStartWorkflowRun = vi.fn()
+  const mockHandleAddNote = vi.fn()
+  const mockExportCheck = vi.fn()
+  const mockSetShowImportDSLModal = vi.fn()
+  let panelMenu: { left: number, top: number } | undefined
+  let clipboardElements: unknown[]
+  let clickAwayHandler: (() => void) | undefined
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    panelMenu = undefined
+    clipboardElements = []
+    clickAwayHandler = undefined
+
+    mockUseClickAway.mockImplementation((handler: () => void) => {
+      clickAwayHandler = handler
+    })
+    mockUseTranslation.mockReturnValue({
+      t: (key: string) => key,
+    })
+    mockUseStore.mockImplementation((selector: (state: {
+      panelMenu?: { left: number, top: number }
+      clipboardElements: unknown[]
+      setShowImportDSLModal: (visible: boolean) => void
+    }) => unknown) => selector({
+      panelMenu,
+      clipboardElements,
+      setShowImportDSLModal: mockSetShowImportDSLModal,
+    }))
+    mockUseNodesInteractions.mockReturnValue({
+      handleNodesPaste: mockHandleNodesPaste,
+    })
+    mockUsePanelInteractions.mockReturnValue({
+      handlePaneContextmenuCancel: mockHandlePaneContextmenuCancel,
+    })
+    mockUseWorkflowStartRun.mockReturnValue({
+      handleStartWorkflowRun: mockHandleStartWorkflowRun,
+    })
+    mockUseOperator.mockReturnValue({
+      handleAddNote: mockHandleAddNote,
+    })
+    mockUseDSL.mockReturnValue({
+      exportCheck: mockExportCheck,
+    })
+  })
+
+  it('should stay hidden when the panel menu is absent', () => {
+    render(<PanelContextmenu />)
+
+    expect(screen.queryByTestId('add-block')).not.toBeInTheDocument()
+  })
+
+  it('should keep paste disabled when the clipboard is empty', () => {
+    panelMenu = { left: 24, top: 48 }
+
+    render(<PanelContextmenu />)
+
+    fireEvent.click(screen.getByText('common.pasteHere'))
+
+    expect(mockHandleNodesPaste).not.toHaveBeenCalled()
+    expect(mockHandlePaneContextmenuCancel).not.toHaveBeenCalled()
+  })
+
+  it('should render actions, position the menu, and execute each action', () => {
+    panelMenu = { left: 24, top: 48 }
+    clipboardElements = [{ id: 'copied-node' }]
+    const { container } = render(<PanelContextmenu />)
+
+    expect(screen.getByTestId('add-block')).toHaveTextContent('common.addBlock')
+    expect(screen.getByTestId('shortcut-alt-r')).toHaveTextContent('alt+r')
+    expect(screen.getByTestId('shortcut-ctrl-v')).toHaveTextContent('ctrl+v')
+    expect(container.firstChild).toHaveStyle({
+      left: '24px',
+      top: '48px',
+    })
+
+    fireEvent.click(screen.getByText('nodes.note.addNote'))
+    fireEvent.click(screen.getByText('common.run'))
+    fireEvent.click(screen.getByText('common.pasteHere'))
+    fireEvent.click(screen.getByText('export'))
+    fireEvent.click(screen.getByText('common.importDSL'))
+    clickAwayHandler?.()
+
+    expect(mockHandleAddNote).toHaveBeenCalledTimes(1)
+    expect(mockHandleStartWorkflowRun).toHaveBeenCalledTimes(1)
+    expect(mockHandleNodesPaste).toHaveBeenCalledTimes(1)
+    expect(mockExportCheck).toHaveBeenCalledTimes(1)
+    expect(mockSetShowImportDSLModal).toHaveBeenCalledWith(true)
+    expect(mockHandlePaneContextmenuCancel).toHaveBeenCalledTimes(4)
+  })
+})

web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx

@@ -0,0 +1,275 @@
+import type { Edge, Node } from '../types'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { useEffect } from 'react'
+import { useNodes } from 'reactflow'
+import SelectionContextmenu from '../selection-contextmenu'
+import { useWorkflowHistoryStore } from '../workflow-history-store'
+import { createEdge, createNode } from './fixtures'
+import { renderWorkflowFlowComponent } from './workflow-test-env'
+
+let latestNodes: Node[] = []
+let latestHistoryEvent: string | undefined
+const mockGetNodesReadOnly = vi.fn()
+
+vi.mock('../hooks', async () => {
+  const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
+  return {
+    ...actual,
+    useNodesReadOnly: () => ({
+      getNodesReadOnly: mockGetNodesReadOnly,
+    }),
+  }
+})
+
+const RuntimeProbe = () => {
+  latestNodes = useNodes() as Node[]
+  const { store } = useWorkflowHistoryStore()
+
+  useEffect(() => {
+    latestHistoryEvent = store.getState().workflowHistoryEvent
+    return store.subscribe((state) => {
+      latestHistoryEvent = state.workflowHistoryEvent
+    })
+  }, [store])
+
+  return null
+}
+
+const hooksStoreProps = {
+  doSyncWorkflowDraft: vi.fn().mockResolvedValue(undefined),
+}
+
+const renderSelectionMenu = (options?: {
+  nodes?: Node[]
+  edges?: Edge[]
+  initialStoreState?: Record<string, unknown>
+}) => {
+  latestNodes = []
+  latestHistoryEvent = undefined
+
+  const nodes = options?.nodes ?? []
+  const edges = options?.edges ?? []
+
+  return renderWorkflowFlowComponent(
+    <div id="workflow-container" style={{ width: 800, height: 600 }}>
+      <RuntimeProbe />
+      <SelectionContextmenu />
+    </div>,
+    {
+      nodes,
+      edges,
+      hooksStoreProps,
+      historyStore: { nodes, edges },
+      initialStoreState: options?.initialStoreState,
+      reactFlowProps: { fitView: false },
+    },
+  )
+}
+
+describe('SelectionContextmenu', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    latestNodes = []
+    latestHistoryEvent = undefined
+    mockGetNodesReadOnly.mockReset()
+    mockGetNodesReadOnly.mockReturnValue(false)
+  })
+
+  it('should not render when selectionMenu is absent', () => {
+    renderSelectionMenu()
+
+    expect(screen.queryByText('operator.vertical')).not.toBeInTheDocument()
+  })
+
+  it('should keep the menu inside the workflow container bounds', () => {
+    const nodes = [
+      createNode({ id: 'n1', selected: true, width: 80, height: 40 }),
+      createNode({ id: 'n2', selected: true, position: { x: 140, y: 0 }, width: 80, height: 40 }),
+    ]
+    const { store } = renderSelectionMenu({ nodes })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 780, top: 590 } })
+    })
+
+    const menu = screen.getByTestId('selection-contextmenu')
+    expect(menu).toHaveStyle({ left: '540px', top: '210px' })
+  })
+
+  it('should close itself when only one node is selected', async () => {
+    const nodes = [
+      createNode({ id: 'n1', selected: true, width: 80, height: 40 }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 120, top: 120 } })
+    })
+
+    await waitFor(() => {
+      expect(store.getState().selectionMenu).toBeUndefined()
+    })
+  })
+
+  it('should align selected nodes to the left and save history', async () => {
+    vi.useFakeTimers()
+    const nodes = [
+      createNode({ id: 'n1', selected: true, position: { x: 20, y: 40 }, width: 40, height: 20 }),
+      createNode({ id: 'n2', selected: true, position: { x: 140, y: 90 }, width: 60, height: 30 }),
+    ]
+
+    const { store } = renderSelectionMenu({
+      nodes,
+      edges: [createEdge({ source: 'n1', target: 'n2' })],
+      initialStoreState: {
+        helpLineHorizontal: { y: 10 } as never,
+        helpLineVertical: { x: 10 } as never,
+      },
+    })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 100, top: 100 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-left'))
+
+    expect(latestNodes.find(node => node.id === 'n1')?.position.x).toBe(20)
+    expect(latestNodes.find(node => node.id === 'n2')?.position.x).toBe(20)
+    expect(store.getState().selectionMenu).toBeUndefined()
+    expect(store.getState().helpLineHorizontal).toBeUndefined()
+    expect(store.getState().helpLineVertical).toBeUndefined()
+
+    act(() => {
+      store.getState().flushPendingSync()
+      vi.advanceTimersByTime(600)
+    })
+
+    expect(hooksStoreProps.doSyncWorkflowDraft).toHaveBeenCalled()
+    expect(latestHistoryEvent).toBe('NodeDragStop')
+    vi.useRealTimers()
+  })
+
+  it('should distribute selected nodes horizontally', async () => {
+    const nodes = [
+      createNode({ id: 'n1', selected: true, position: { x: 0, y: 10 }, width: 20, height: 20 }),
+      createNode({ id: 'n2', selected: true, position: { x: 100, y: 20 }, width: 20, height: 20 }),
+      createNode({ id: 'n3', selected: true, position: { x: 300, y: 30 }, width: 20, height: 20 }),
+    ]
+
+    const { store } = renderSelectionMenu({
+      nodes,
+    })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 160, top: 120 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-distributeHorizontal'))
+
+    expect(latestNodes.find(node => node.id === 'n2')?.position.x).toBe(150)
+  })
+
+  it('should ignore child nodes when the selected container is aligned', async () => {
+    const nodes = [
+      createNode({
+        id: 'container',
+        selected: true,
+        position: { x: 200, y: 0 },
+        width: 100,
+        height: 80,
+        data: { _children: [{ nodeId: 'child', nodeType: 'code' as never }] },
+      }),
+      createNode({
+        id: 'child',
+        selected: true,
+        position: { x: 210, y: 10 },
+        width: 30,
+        height: 20,
+      }),
+      createNode({
+        id: 'other',
+        selected: true,
+        position: { x: 40, y: 60 },
+        width: 40,
+        height: 20,
+      }),
+    ]
+
+    const { store } = renderSelectionMenu({
+      nodes,
+    })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 180, top: 120 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-left'))
+
+    expect(latestNodes.find(node => node.id === 'container')?.position.x).toBe(40)
+    expect(latestNodes.find(node => node.id === 'other')?.position.x).toBe(40)
+    expect(latestNodes.find(node => node.id === 'child')?.position.x).toBe(210)
+  })
+
+  it('should cancel when align bounds cannot be resolved', () => {
+    const nodes = [
+      createNode({ id: 'n1', selected: true }),
+      createNode({ id: 'n2', selected: true, position: { x: 80, y: 20 } }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 100, top: 100 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-left'))
+
+    expect(store.getState().selectionMenu).toBeUndefined()
+  })
+
+  it('should cancel without aligning when nodes are read only', () => {
+    mockGetNodesReadOnly.mockReturnValue(true)
+    const nodes = [
+      createNode({ id: 'n1', selected: true, width: 40, height: 20 }),
+      createNode({ id: 'n2', selected: true, position: { x: 80, y: 20 }, width: 40, height: 20 }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 100, top: 100 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-left'))
+
+    expect(store.getState().selectionMenu).toBeUndefined()
+    expect(latestNodes.find(node => node.id === 'n1')?.position.x).toBe(0)
+    expect(latestNodes.find(node => node.id === 'n2')?.position.x).toBe(80)
+  })
+
+  it('should cancel when alignable nodes shrink to one item', () => {
+    const nodes = [
+      createNode({
+        id: 'container',
+        selected: true,
+        width: 40,
+        height: 20,
+        data: { _children: [{ nodeId: 'child', nodeType: 'code' as never }] },
+      }),
+      createNode({ id: 'child', selected: true, position: { x: 80, y: 20 }, width: 40, height: 20 }),
+    ]
+
+    const { store } = renderSelectionMenu({ nodes })
+
+    act(() => {
+      store.setState({ selectionMenu: { left: 100, top: 100 } })
+    })
+
+    fireEvent.click(screen.getByTestId('selection-contextmenu-item-left'))
+
+    expect(store.getState().selectionMenu).toBeUndefined()
+    expect(latestNodes.find(node => node.id === 'container')?.position.x).toBe(0)
+    expect(latestNodes.find(node => node.id === 'child')?.position.x).toBe(80)
+  })
+})

web/app/components/workflow/__tests__/update-dsl-modal.helpers.spec.ts

@@ -0,0 +1,79 @@
+import { DSLImportStatus } from '@/models/app'
+import { AppModeEnum } from '@/types/app'
+import { BlockEnum } from '../types'
+import {
+  getInvalidNodeTypes,
+  isImportCompleted,
+  normalizeWorkflowFeatures,
+  validateDSLContent,
+} from '../update-dsl-modal.helpers'
+
+describe('update-dsl-modal helpers', () => {
+  describe('dsl validation', () => {
+    it('should reject advanced chat dsl content with disallowed trigger nodes', () => {
+      const content = `
+workflow:
+  graph:
+    nodes:
+      - data:
+          type: trigger-webhook
+`
+
+      expect(validateDSLContent(content, AppModeEnum.ADVANCED_CHAT)).toBe(false)
+    })
+
+    it('should reject malformed yaml and answer nodes in non-advanced mode', () => {
+      expect(validateDSLContent('[', AppModeEnum.CHAT)).toBe(false)
+      expect(validateDSLContent(`
+workflow:
+  graph:
+    nodes:
+      - data:
+          type: answer
+`, AppModeEnum.CHAT)).toBe(false)
+    })
+
+    it('should accept valid node types for advanced chat mode', () => {
+      expect(validateDSLContent(`
+workflow:
+  graph:
+    nodes:
+      - data:
+          type: tool
+`, AppModeEnum.ADVANCED_CHAT)).toBe(true)
+    })
+
+    it('should expose the invalid node sets per mode', () => {
+      expect(getInvalidNodeTypes(AppModeEnum.ADVANCED_CHAT)).toEqual(
+        expect.arrayContaining([BlockEnum.End, BlockEnum.TriggerWebhook]),
+      )
+      expect(getInvalidNodeTypes(AppModeEnum.CHAT)).toEqual([BlockEnum.Answer])
+    })
+  })
+
+  describe('status and feature normalization', () => {
+    it('should treat completed statuses as successful imports', () => {
+      expect(isImportCompleted(DSLImportStatus.COMPLETED)).toBe(true)
+      expect(isImportCompleted(DSLImportStatus.COMPLETED_WITH_WARNINGS)).toBe(true)
+      expect(isImportCompleted(DSLImportStatus.PENDING)).toBe(false)
+    })
+
+    it('should normalize workflow features with defaults', () => {
+      const features = normalizeWorkflowFeatures({
+        file_upload: {
+          image: {
+            enabled: true,
+          },
+        },
+        opening_statement: 'hello',
+        suggested_questions: ['what can you do?'],
+      })
+
+      expect(features.file.enabled).toBe(true)
+      expect(features.file.number_limits).toBe(3)
+      expect(features.opening.enabled).toBe(true)
+      expect(features.suggested).toEqual({ enabled: false })
+      expect(features.text2speech).toEqual({ enabled: false })
+    })
+  })
+})

web/app/components/workflow/__tests__/update-dsl-modal.spec.tsx

@@ -0,0 +1,365 @@
+import type { EventEmitter } from 'ahooks/lib/useEventEmitter'
+import type { EventEmitterValue } from '@/context/event-emitter'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { toast } from '@/app/components/base/ui/toast'
+import { EventEmitterContext } from '@/context/event-emitter'
+import { DSLImportStatus } from '@/models/app'
+import UpdateDSLModal from '../update-dsl-modal'
+
+class MockFileReader {
+  onload: ((this: FileReader, event: ProgressEvent<FileReader>) => void) | null = null
+
+  readAsText(_file: Blob) {
+    const event = { target: { result: 'workflow:\n  graph:\n    nodes:\n      - data:\n          type: tool\n' } } as unknown as ProgressEvent<FileReader>
+    this.onload?.call(this as unknown as FileReader, event)
+  }
+}
+
+vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
+const mockEmit = vi.fn()
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+  toast: {
+    error: vi.fn(),
+    info: vi.fn(),
+    success: vi.fn(),
+    warning: vi.fn(),
+  },
+}))
+
+const mockImportDSL = vi.fn()
+const mockImportDSLConfirm = vi.fn()
+vi.mock('@/service/apps', () => ({
+  importDSL: (payload: unknown) => mockImportDSL(payload),
+  importDSLConfirm: (payload: unknown) => mockImportDSLConfirm(payload),
+}))
+
+const mockFetchWorkflowDraft = vi.fn()
+vi.mock('@/service/workflow', () => ({
+  fetchWorkflowDraft: (path: string) => mockFetchWorkflowDraft(path),
+}))
+
+const mockHandleCheckPluginDependencies = vi.fn()
+vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
+  usePluginDependencies: () => ({
+    handleCheckPluginDependencies: mockHandleCheckPluginDependencies,
+  }),
+}))
+
+vi.mock('@/app/components/app/store', () => ({
+  useStore: (selector: (state: { appDetail: { id: string, mode: string } }) => unknown) => selector({
+    appDetail: {
+      id: 'app-1',
+      mode: 'chat',
+    },
+  }),
+}))
+
+vi.mock('@/app/components/app/create-from-dsl-modal/uploader', () => ({
+  default: ({ updateFile }: { updateFile: (file?: File) => void }) => (
+    <input
+      data-testid="dsl-file-input"
+      type="file"
+      onChange={event => updateFile(event.target.files?.[0])}
+    />
+  ),
+}))
+
+describe('UpdateDSLModal', () => {
+  const mockToastError = vi.mocked(toast.error)
+  const defaultProps = {
+    onCancel: vi.fn(),
+    onBackup: vi.fn(),
+    onImport: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+    mockFetchWorkflowDraft.mockResolvedValue({
+      graph: { nodes: [], edges: [], viewport: { x: 0, y: 0, zoom: 1 } },
+      features: {},
+      hash: 'hash-1',
+      conversation_variables: [],
+      environment_variables: [],
+    })
+    mockImportDSL.mockResolvedValue({
+      id: 'import-1',
+      status: DSLImportStatus.COMPLETED,
+      app_id: 'app-1',
+    })
+    mockImportDSLConfirm.mockResolvedValue({
+      status: DSLImportStatus.COMPLETED,
+      app_id: 'app-1',
+    })
+    mockHandleCheckPluginDependencies.mockResolvedValue(undefined)
+  })
+
+  const renderModal = (props = defaultProps) => {
+    const eventEmitter = { emit: mockEmit } as unknown as EventEmitter<EventEmitterValue>
+
+    return render(
+      <EventEmitterContext.Provider value={{ eventEmitter }}>
+        <UpdateDSLModal {...props} />
+      </EventEmitterContext.Provider>,
+    )
+  }
+
+  it('should keep import disabled until a file is selected', () => {
+    renderModal()
+
+    expect(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' })).toBeDisabled()
+  })
+
+  it('should call backup handler from the warning area', () => {
+    renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.backupCurrentDraft' }))
+
+    expect(defaultProps.onBackup).toHaveBeenCalledTimes(1)
+  })
+
+  it('should import a valid file and emit workflow update payload', async () => {
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(mockImportDSL).toHaveBeenCalledWith(expect.objectContaining({
+        app_id: 'app-1',
+        yaml_content: expect.stringContaining('workflow:'),
+      }))
+    })
+
+    expect(mockEmit).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'WORKFLOW_DATA_UPDATE',
+    }))
+    expect(defaultProps.onImport).toHaveBeenCalledTimes(1)
+    expect(defaultProps.onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should show an error notification when import fails', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-1',
+      status: DSLImportStatus.FAILED,
+      app_id: 'app-1',
+    })
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['invalid'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalled()
+    })
+  })
+
+  it('should open the version warning modal for pending imports and confirm them', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-2',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'app.newApp.Confirm' })).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Confirm' }))
+
+    await waitFor(() => {
+      expect(mockImportDSLConfirm).toHaveBeenCalledWith({ import_id: 'import-2' })
+    })
+  })
+
+  it('should open the pending modal after the timeout and allow dismissing it', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-5',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(mockImportDSL).toHaveBeenCalled()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'app.newApp.Cancel' })).toBeInTheDocument()
+    }, { timeout: 1000 })
+
+    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Cancel' }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'app.newApp.Confirm' })).not.toBeInTheDocument()
+    })
+  })
+
+  it('should show an error when the selected file content is invalid for the current app mode', async () => {
+    class InvalidDSLFileReader extends MockFileReader {
+      readAsText(_file: Blob) {
+        const event = { target: { result: 'workflow:\n  graph:\n    nodes:\n      - data:\n          type: answer\n' } } as unknown as ProgressEvent<FileReader>
+        this.onload?.call(this as unknown as FileReader, event)
+      }
+    }
+
+    vi.stubGlobal('FileReader', InvalidDSLFileReader as unknown as typeof FileReader)
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalled()
+    })
+    expect(mockImportDSL).not.toHaveBeenCalled()
+
+    vi.stubGlobal('FileReader', MockFileReader as unknown as typeof FileReader)
+  })
+
+  it('should show an error notification when import throws', async () => {
+    mockImportDSL.mockRejectedValue(new Error('boom'))
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalled()
+    })
+  })
+
+  it('should show an error when completed import does not return an app id', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-3',
+      status: DSLImportStatus.COMPLETED,
+    })
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalled()
+    })
+  })
+
+  it('should show an error when confirming a pending import fails', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-4',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+    mockImportDSLConfirm.mockResolvedValue({
+      status: DSLImportStatus.FAILED,
+    })
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'app.newApp.Confirm' })).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Confirm' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalled()
+    })
+  })
+
+  it('should show an error when confirming a pending import throws', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-6',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+    mockImportDSLConfirm.mockRejectedValue(new Error('boom'))
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'app.newApp.Confirm' })).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Confirm' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalled()
+    })
+  })
+
+  it('should show an error when a confirmed pending import completes without an app id', async () => {
+    mockImportDSL.mockResolvedValue({
+      id: 'import-7',
+      status: DSLImportStatus.PENDING,
+      imported_dsl_version: '1.0.0',
+      current_dsl_version: '2.0.0',
+    })
+    mockImportDSLConfirm.mockResolvedValue({
+      status: DSLImportStatus.COMPLETED,
+    })
+
+    renderModal()
+
+    fireEvent.change(screen.getByTestId('dsl-file-input'), {
+      target: { files: [new File(['workflow'], 'workflow.yml', { type: 'text/yaml' })] },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'workflow.common.overwriteAndImport' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'app.newApp.Confirm' })).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'app.newApp.Confirm' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalled()
+    })
+  })
+})

web/app/components/workflow/help-line/__tests__/index.spec.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react'
+import HelpLine from '../index'
+
+const mockUseViewport = vi.hoisted(() => vi.fn())
+const mockUseStore = vi.hoisted(() => vi.fn())
+
+vi.mock('reactflow', () => ({
+  useViewport: () => mockUseViewport(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: {
+    helpLineHorizontal?: { top: number, left: number, width: number }
+    helpLineVertical?: { top: number, left: number, height: number }
+  }) => unknown) => mockUseStore(selector),
+}))
+
+describe('HelpLine', () => {
+  let helpLineHorizontal: { top: number, left: number, width: number } | undefined
+  let helpLineVertical: { top: number, left: number, height: number } | undefined
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    helpLineHorizontal = undefined
+    helpLineVertical = undefined
+
+    mockUseViewport.mockReturnValue({ x: 10, y: 20, zoom: 2 })
+    mockUseStore.mockImplementation((selector: (state: {
+      helpLineHorizontal?: { top: number, left: number, width: number }
+      helpLineVertical?: { top: number, left: number, height: number }
+    }) => unknown) => selector({
+      helpLineHorizontal,
+      helpLineVertical,
+    }))
+  })
+
+  it('should render nothing when both help lines are absent', () => {
+    const { container } = render(<HelpLine />)
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render the horizontal and vertical guide lines using viewport offsets and zoom', () => {
+    helpLineHorizontal = { top: 30, left: 40, width: 50 }
+    helpLineVertical = { top: 60, left: 70, height: 80 }
+
+    const { container } = render(<HelpLine />)
+    const [horizontal, vertical] = Array.from(container.querySelectorAll('div'))
+
+    expect(horizontal).toHaveStyle({
+      top: '80px',
+      left: '90px',
+      width: '100px',
+    })
+    expect(vertical).toHaveStyle({
+      top: '140px',
+      left: '150px',
+      height: '160px',
+    })
+  })
+})

web/app/components/workflow/hooks/__tests__/use-config-vision.spec.ts

@@ -0,0 +1,171 @@
+import type { ModelConfig, VisionSetting } from '@/app/components/workflow/types'
+import { act, renderHook } from '@testing-library/react'
+import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { Resolution } from '@/types/app'
+import useConfigVision from '../use-config-vision'
+
+const mockUseTextGenerationCurrentProviderAndModelAndModelList = vi.hoisted(() => vi.fn())
+const mockUseIsChatMode = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useTextGenerationCurrentProviderAndModelAndModelList: (...args: unknown[]) =>
+    mockUseTextGenerationCurrentProviderAndModelAndModelList(...args),
+}))
+
+vi.mock('../use-workflow', () => ({
+  useIsChatMode: () => mockUseIsChatMode(),
+}))
+
+const createModel = (overrides: Partial<ModelConfig> = {}): ModelConfig => ({
+  provider: 'openai',
+  name: 'gpt-4o',
+  mode: 'chat',
+  completion_params: [],
+  ...overrides,
+})
+
+const createVisionPayload = (overrides: Partial<{ enabled: boolean, configs?: VisionSetting }> = {}) => ({
+  enabled: false,
+  ...overrides,
+})
+
+describe('useConfigVision', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseIsChatMode.mockReturnValue(false)
+    mockUseTextGenerationCurrentProviderAndModelAndModelList.mockReturnValue({
+      currentModel: {
+        features: [],
+      },
+    })
+  })
+
+  it('should expose vision capability and enable default chat configs for vision models', () => {
+    const onChange = vi.fn()
+    mockUseIsChatMode.mockReturnValue(true)
+    mockUseTextGenerationCurrentProviderAndModelAndModelList.mockReturnValue({
+      currentModel: {
+        features: [ModelFeatureEnum.vision],
+      },
+    })
+
+    const { result } = renderHook(() => useConfigVision(createModel(), {
+      payload: createVisionPayload(),
+      onChange,
+    }))
+
+    expect(result.current.isVisionModel).toBe(true)
+
+    act(() => {
+      result.current.handleVisionResolutionEnabledChange(true)
+    })
+
+    expect(onChange).toHaveBeenCalledWith({
+      enabled: true,
+      configs: {
+        detail: Resolution.high,
+        variable_selector: ['sys', 'files'],
+      },
+    })
+  })
+
+  it('should clear configs when disabling vision resolution', () => {
+    const onChange = vi.fn()
+
+    const { result } = renderHook(() => useConfigVision(createModel(), {
+      payload: createVisionPayload({
+        enabled: true,
+        configs: {
+          detail: Resolution.low,
+          variable_selector: ['node', 'files'],
+        },
+      }),
+      onChange,
+    }))
+
+    act(() => {
+      result.current.handleVisionResolutionEnabledChange(false)
+    })
+
+    expect(onChange).toHaveBeenCalledWith({
+      enabled: false,
+    })
+  })
+
+  it('should update the resolution config payload directly', () => {
+    const onChange = vi.fn()
+    const config: VisionSetting = {
+      detail: Resolution.low,
+      variable_selector: ['upstream', 'images'],
+    }
+
+    const { result } = renderHook(() => useConfigVision(createModel(), {
+      payload: createVisionPayload({ enabled: true }),
+      onChange,
+    }))
+
+    act(() => {
+      result.current.handleVisionResolutionChange(config)
+    })
+
+    expect(onChange).toHaveBeenCalledWith({
+      enabled: true,
+      configs: config,
+    })
+  })
+
+  it('should disable vision settings when the selected model is no longer a vision model', () => {
+    const onChange = vi.fn()
+
+    const { result } = renderHook(() => useConfigVision(createModel(), {
+      payload: createVisionPayload({
+        enabled: true,
+        configs: {
+          detail: Resolution.high,
+          variable_selector: ['sys', 'files'],
+        },
+      }),
+      onChange,
+    }))
+
+    act(() => {
+      result.current.handleModelChanged()
+    })
+
+    expect(onChange).toHaveBeenCalledWith({
+      enabled: false,
+    })
+  })
+
+  it('should reset enabled vision configs when the model changes but still supports vision', () => {
+    const onChange = vi.fn()
+    mockUseTextGenerationCurrentProviderAndModelAndModelList.mockReturnValue({
+      currentModel: {
+        features: [ModelFeatureEnum.vision],
+      },
+    })
+
+    const { result } = renderHook(() => useConfigVision(createModel(), {
+      payload: createVisionPayload({
+        enabled: true,
+        configs: {
+          detail: Resolution.low,
+          variable_selector: ['old', 'files'],
+        },
+      }),
+      onChange,
+    }))
+
+    act(() => {
+      result.current.handleModelChanged()
+    })
+
+    expect(onChange).toHaveBeenCalledWith({
+      enabled: true,
+      configs: {
+        detail: Resolution.high,
+        variable_selector: [],
+      },
+    })
+  })
+})

web/app/components/workflow/hooks/__tests__/use-dynamic-test-run-options.spec.tsx

@@ -0,0 +1,146 @@
+import { renderHook } from '@testing-library/react'
+import { BlockEnum } from '../../types'
+import { useDynamicTestRunOptions } from '../use-dynamic-test-run-options'
+
+const mockUseTranslation = vi.hoisted(() => vi.fn())
+const mockUseNodes = vi.hoisted(() => vi.fn())
+const mockUseStore = vi.hoisted(() => vi.fn())
+const mockUseAllTriggerPlugins = vi.hoisted(() => vi.fn())
+const mockGetWorkflowEntryNode = vi.hoisted(() => vi.fn())
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => mockUseTranslation(),
+}))
+
+vi.mock('@/app/components/workflow/store/workflow/use-nodes', () => ({
+  __esModule: true,
+  default: () => mockUseNodes(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+  useStore: (selector: (state: {
+    buildInTools: unknown[]
+    customTools: unknown[]
+    workflowTools: unknown[]
+    mcpTools: unknown[]
+  }) => unknown) => mockUseStore(selector),
+}))
+
+vi.mock('@/service/use-triggers', () => ({
+  useAllTriggerPlugins: () => mockUseAllTriggerPlugins(),
+}))
+
+vi.mock('@/app/components/workflow/utils/workflow-entry', () => ({
+  getWorkflowEntryNode: (...args: unknown[]) => mockGetWorkflowEntryNode(...args),
+}))
+
+describe('useDynamicTestRunOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseTranslation.mockReturnValue({
+      t: (key: string) => key,
+    })
+    mockUseStore.mockImplementation((selector: (state: {
+      buildInTools: unknown[]
+      customTools: unknown[]
+      workflowTools: unknown[]
+      mcpTools: unknown[]
+    }) => unknown) => selector({
+      buildInTools: [],
+      customTools: [],
+      workflowTools: [],
+      mcpTools: [],
+    }))
+    mockUseAllTriggerPlugins.mockReturnValue({
+      data: [{
+        name: 'plugin-provider',
+        icon: '/plugin-icon.png',
+      }],
+    })
+  })
+
+  it('should build user input, trigger options, and a run-all option from workflow nodes', () => {
+    mockUseNodes.mockReturnValue([
+      {
+        id: 'start-1',
+        data: { type: BlockEnum.Start, title: 'User Input' },
+      },
+      {
+        id: 'schedule-1',
+        data: { type: BlockEnum.TriggerSchedule, title: 'Daily Schedule' },
+      },
+      {
+        id: 'webhook-1',
+        data: { type: BlockEnum.TriggerWebhook, title: 'Webhook Trigger' },
+      },
+      {
+        id: 'plugin-1',
+        data: {
+          type: BlockEnum.TriggerPlugin,
+          title: '',
+          plugin_name: 'Plugin Trigger',
+          provider_id: 'plugin-provider',
+        },
+      },
+    ])
+
+    const { result } = renderHook(() => useDynamicTestRunOptions())
+
+    expect(result.current.userInput).toEqual(expect.objectContaining({
+      id: 'start-1',
+      type: 'user_input',
+      name: 'User Input',
+      nodeId: 'start-1',
+      enabled: true,
+    }))
+    expect(result.current.triggers).toEqual([
+      expect.objectContaining({
+        id: 'schedule-1',
+        type: 'schedule',
+        name: 'Daily Schedule',
+        nodeId: 'schedule-1',
+      }),
+      expect.objectContaining({
+        id: 'webhook-1',
+        type: 'webhook',
+        name: 'Webhook Trigger',
+        nodeId: 'webhook-1',
+      }),
+      expect.objectContaining({
+        id: 'plugin-1',
+        type: 'plugin',
+        name: 'Plugin Trigger',
+        nodeId: 'plugin-1',
+      }),
+    ])
+    expect(result.current.runAll).toEqual(expect.objectContaining({
+      id: 'run-all',
+      type: 'all',
+      relatedNodeIds: ['schedule-1', 'webhook-1', 'plugin-1'],
+    }))
+  })
+
+  it('should fall back to the workflow entry node and omit run-all when only one trigger exists', () => {
+    mockUseNodes.mockReturnValue([
+      {
+        id: 'webhook-1',
+        data: { type: BlockEnum.TriggerWebhook, title: 'Webhook Trigger' },
+      },
+    ])
+    mockGetWorkflowEntryNode.mockReturnValue({
+      id: 'fallback-start',
+      data: { type: BlockEnum.Start, title: '' },
+    })
+
+    const { result } = renderHook(() => useDynamicTestRunOptions())
+
+    expect(result.current.userInput).toEqual(expect.objectContaining({
+      id: 'fallback-start',
+      type: 'user_input',
+      name: 'blocks.start',
+      nodeId: 'fallback-start',
+    }))
+    expect(result.current.triggers).toHaveLength(1)
+    expect(result.current.runAll).toBeUndefined()
+  })
+})

web/app/components/workflow/hooks/use-nodes-interactions.ts

@@ -1820,21 +1820,26 @@ export const useNodesInteractions = () => {
           newChildren.push(newLoopStartNode!)
         }
         else {
-          // single node paste
+          // Paste a single regular node. Loop/Iteration nodes are handled above.
           const selectedNode = nodes.find(node => node.selected)
           let pastedToNestedBlock = false
 
           if (selectedNode) {
+            // Keep this list aligned with availableBlocksFilter(inContainer)
+            // in use-available-blocks.ts.
             const commonNestedDisallowPasteNodes = [
-              // end node only can be placed outermost layer
               BlockEnum.End,
+              BlockEnum.Iteration,
+              BlockEnum.Loop,
+              BlockEnum.DataSource,
+              BlockEnum.KnowledgeBase,
+              BlockEnum.HumanInput,
             ]
 
-            // handle disallow paste node
             if (commonNestedDisallowPasteNodes.includes(nodeToPaste.data.type))
               return
 
-            // handle paste to nested block
+            // If a Loop/Iteration container is selected, paste into it as a child.
             if (selectedNode.data.type === BlockEnum.Iteration || selectedNode.data.type === BlockEnum.Loop) {
               const isIteration = selectedNode.data.type === BlockEnum.Iteration
 
@@ -1849,10 +1854,10 @@ export const useNodesInteractions = () => {
                 x: newNode.position.x,
                 y: newNode.position.y,
               }
-              // set position base on parent node
+              // Rebase position into the selected container coordinate system.
               newNode.position = getNestedNodePosition(newNode, selectedNode)
 
-              // update parent children array like native add
+              // Mirror native add behavior by appending parent._children.
               parentChildrenToAppend.push({ parentId: selectedNode.id, childId: newNode.id, childType: newNode.data.type })
 
               pastedToNestedBlock = true

web/app/components/workflow/nodes/_base/__tests__/node-sections.spec.tsx

@@ -0,0 +1,135 @@
+import type { TFunction } from 'i18next'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { BlockEnum, NodeRunningStatus } from '@/app/components/workflow/types'
+import { NodeBody, NodeDescription, NodeHeaderMeta } from '../node-sections'
+
+describe('node sections', () => {
+  it('should render loop and loading metadata in the header section', () => {
+    const t = ((key: string) => key) as unknown as TFunction
+
+    render(
+      <NodeHeaderMeta
+        data={{
+          type: BlockEnum.Loop,
+          _loopIndex: 2,
+          _runningStatus: NodeRunningStatus.Running,
+        } as never}
+        hasVarValue={false}
+        isLoading
+        loopIndex={<div>loop-index</div>}
+        t={t}
+      />,
+    )
+
+    expect(screen.getByText('loop-index')).toBeInTheDocument()
+    expect(document.querySelector('.i-ri-loader-2-line')).toBeInTheDocument()
+  })
+
+  it('should render the container node body and description branches', () => {
+    const { rerender } = render(
+      <NodeBody
+        data={{ type: BlockEnum.Loop } as never}
+        child={<div>body-content</div>}
+      />,
+    )
+
+    expect(screen.getByText('body-content').parentElement).toHaveClass('grow')
+
+    rerender(<NodeDescription data={{ type: BlockEnum.Tool, desc: 'node description' } as never} />)
+    expect(screen.getByText('node description')).toBeInTheDocument()
+  })
+
+  it('should render iteration parallel metadata and running progress', async () => {
+    const t = ((key: string) => key) as unknown as TFunction
+    const user = userEvent.setup()
+
+    render(
+      <NodeHeaderMeta
+        data={{
+          type: BlockEnum.Iteration,
+          is_parallel: true,
+          _iterationLength: 3,
+          _iterationIndex: 5,
+          _runningStatus: NodeRunningStatus.Running,
+        } as never}
+        hasVarValue={false}
+        isLoading={false}
+        loopIndex={null}
+        t={t}
+      />,
+    )
+
+    expect(screen.getByText('nodes.iteration.parallelModeUpper')).toBeInTheDocument()
+    await user.hover(screen.getByText('nodes.iteration.parallelModeUpper'))
+    expect(await screen.findByText('nodes.iteration.parallelModeEnableTitle')).toBeInTheDocument()
+    expect(screen.getByText('nodes.iteration.parallelModeEnableDesc')).toBeInTheDocument()
+    expect(screen.getByText('3/3')).toBeInTheDocument()
+  })
+
+  it('should render failed, exception, success and paused status icons', () => {
+    const t = ((key: string) => key) as unknown as TFunction
+    const { rerender } = render(
+      <NodeHeaderMeta
+        data={{ type: BlockEnum.Tool, _runningStatus: NodeRunningStatus.Failed } as never}
+        hasVarValue={false}
+        isLoading={false}
+        loopIndex={null}
+        t={t}
+      />,
+    )
+
+    expect(document.querySelector('.i-ri-error-warning-fill')).toBeInTheDocument()
+
+    rerender(
+      <NodeHeaderMeta
+        data={{ type: BlockEnum.Tool, _runningStatus: NodeRunningStatus.Exception } as never}
+        hasVarValue={false}
+        isLoading={false}
+        loopIndex={null}
+        t={t}
+      />,
+    )
+    expect(document.querySelector('.i-ri-alert-fill')).toBeInTheDocument()
+
+    rerender(
+      <NodeHeaderMeta
+        data={{ type: BlockEnum.Tool, _runningStatus: NodeRunningStatus.Succeeded } as never}
+        hasVarValue={false}
+        isLoading={false}
+        loopIndex={null}
+        t={t}
+      />,
+    )
+    expect(document.querySelector('.i-ri-checkbox-circle-fill')).toBeInTheDocument()
+
+    rerender(
+      <NodeHeaderMeta
+        data={{ type: BlockEnum.Tool, _runningStatus: NodeRunningStatus.Paused } as never}
+        hasVarValue={false}
+        isLoading={false}
+        loopIndex={null}
+        t={t}
+      />,
+    )
+    expect(document.querySelector('.i-ri-pause-circle-fill')).toBeInTheDocument()
+  })
+
+  it('should render success icon when inspect vars exist without running status and hide description for loop nodes', () => {
+    const t = ((key: string) => key) as unknown as TFunction
+    const { rerender } = render(
+      <NodeHeaderMeta
+        data={{ type: BlockEnum.Tool } as never}
+        hasVarValue
+        isLoading={false}
+        loopIndex={null}
+        t={t}
+      />,
+    )
+
+    expect(document.querySelector('.i-ri-checkbox-circle-fill')).toBeInTheDocument()
+
+    rerender(<NodeDescription data={{ type: BlockEnum.Loop, desc: 'hidden' } as never} />)
+    expect(screen.queryByText('hidden')).not.toBeInTheDocument()
+  })
+})

web/app/components/workflow/nodes/_base/__tests__/node.helpers.spec.ts

@@ -0,0 +1,34 @@
+import { BlockEnum, NodeRunningStatus } from '@/app/components/workflow/types'
+import {
+  getLoopIndexTextKey,
+  getNodeStatusBorders,
+  isContainerNode,
+  isEntryWorkflowNode,
+} from '../node.helpers'
+
+describe('node helpers', () => {
+  it('should derive node border states from running status and selection state', () => {
+    expect(getNodeStatusBorders(NodeRunningStatus.Running, false, false).showRunningBorder).toBe(true)
+    expect(getNodeStatusBorders(NodeRunningStatus.Succeeded, false, false).showSuccessBorder).toBe(true)
+    expect(getNodeStatusBorders(NodeRunningStatus.Failed, false, false).showFailedBorder).toBe(true)
+    expect(getNodeStatusBorders(NodeRunningStatus.Exception, false, false).showExceptionBorder).toBe(true)
+    expect(getNodeStatusBorders(NodeRunningStatus.Succeeded, false, true).showSuccessBorder).toBe(false)
+  })
+
+  it('should expose the correct loop translation key per running status', () => {
+    expect(getLoopIndexTextKey(NodeRunningStatus.Running)).toBe('nodes.loop.currentLoopCount')
+    expect(getLoopIndexTextKey(NodeRunningStatus.Succeeded)).toBe('nodes.loop.totalLoopCount')
+    expect(getLoopIndexTextKey(NodeRunningStatus.Failed)).toBe('nodes.loop.totalLoopCount')
+    expect(getLoopIndexTextKey(NodeRunningStatus.Paused)).toBeUndefined()
+  })
+
+  it('should identify entry and container nodes', () => {
+    expect(isEntryWorkflowNode(BlockEnum.Start)).toBe(true)
+    expect(isEntryWorkflowNode(BlockEnum.TriggerWebhook)).toBe(true)
+    expect(isEntryWorkflowNode(BlockEnum.Tool)).toBe(false)
+
+    expect(isContainerNode(BlockEnum.Iteration)).toBe(true)
+    expect(isContainerNode(BlockEnum.Loop)).toBe(true)
+    expect(isContainerNode(BlockEnum.Tool)).toBe(false)
+  })
+})

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

@@ -0,0 +1,218 @@
+import type { PropsWithChildren } from 'react'
+import type { CommonNodeType } from '@/app/components/workflow/types'
+import { fireEvent, screen } from '@testing-library/react'
+import { renderWorkflowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
+import { BlockEnum, NodeRunningStatus } from '@/app/components/workflow/types'
+import BaseNode from '../node'
+
+const mockHasNodeInspectVars = vi.fn()
+const mockUseNodePluginInstallation = vi.fn()
+const mockHandleNodeIterationChildSizeChange = vi.fn()
+const mockHandleNodeLoopChildSizeChange = vi.fn()
+const mockUseNodeResizeObserver = vi.fn()
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+  useNodesReadOnly: () => ({ nodesReadOnly: false }),
+  useToolIcon: () => undefined,
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-inspect-vars-crud', () => ({
+  default: () => ({
+    hasNodeInspectVars: mockHasNodeInspectVars,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/hooks/use-node-plugin-installation', () => ({
+  useNodePluginInstallation: (...args: unknown[]) => mockUseNodePluginInstallation(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/iteration/use-interactions', () => ({
+  useNodeIterationInteractions: () => ({
+    handleNodeIterationChildSizeChange: mockHandleNodeIterationChildSizeChange,
+  }),
+}))
+
+vi.mock('@/app/components/workflow/nodes/loop/use-interactions', () => ({
+  useNodeLoopInteractions: () => ({
+    handleNodeLoopChildSizeChange: mockHandleNodeLoopChildSizeChange,
+  }),
+}))
+
+vi.mock('../use-node-resize-observer', () => ({
+  default: (options: { enabled: boolean, onResize: () => void }) => {
+    mockUseNodeResizeObserver(options)
+    if (options.enabled)
+      options.onResize()
+  },
+}))
+
+vi.mock('../components/add-variable-popup-with-position', () => ({
+  default: () => <div data-testid="add-var-popup" />,
+}))
+vi.mock('../components/entry-node-container', () => ({
+  __esModule: true,
+  StartNodeTypeEnum: { Start: 'start', Trigger: 'trigger' },
+  default: ({ children }: PropsWithChildren) => <div data-testid="entry-node-container">{children}</div>,
+}))
+vi.mock('../components/error-handle/error-handle-on-node', () => ({
+  default: () => <div data-testid="error-handle-node" />,
+}))
+vi.mock('../components/node-control', () => ({
+  default: () => <div data-testid="node-control" />,
+}))
+vi.mock('../components/node-handle', () => ({
+  NodeSourceHandle: () => <div data-testid="node-source-handle" />,
+  NodeTargetHandle: () => <div data-testid="node-target-handle" />,
+}))
+vi.mock('../components/node-resizer', () => ({
+  default: () => <div data-testid="node-resizer" />,
+}))
+vi.mock('../components/retry/retry-on-node', () => ({
+  default: () => <div data-testid="retry-node" />,
+}))
+vi.mock('@/app/components/workflow/block-icon', () => ({
+  default: () => <div data-testid="block-icon" />,
+}))
+vi.mock('@/app/components/workflow/nodes/tool/components/copy-id', () => ({
+  default: ({ content }: { content: string }) => <div>{content}</div>,
+}))
+
+const createData = (overrides: Record<string, unknown> = {}) => ({
+  type: BlockEnum.Tool,
+  title: 'Node title',
+  desc: 'Node description',
+  selected: false,
+  width: 280,
+  height: 180,
+  provider_type: 'builtin',
+  provider_id: 'tool-1',
+  _runningStatus: undefined,
+  _singleRunningStatus: undefined,
+  ...overrides,
+})
+
+const toNodeData = (data: ReturnType<typeof createData>) => data as CommonNodeType
+
+describe('BaseNode', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockHasNodeInspectVars.mockReturnValue(false)
+    mockUseNodeResizeObserver.mockReset()
+    mockUseNodePluginInstallation.mockReturnValue({
+      shouldDim: false,
+      isChecking: false,
+      isMissing: false,
+      canInstall: false,
+      uniqueIdentifier: undefined,
+    })
+  })
+
+  it('should render content, handles and description for a regular node', () => {
+    renderWorkflowComponent(
+      <BaseNode id="node-1" data={toNodeData(createData())}>
+        <div>Body</div>
+      </BaseNode>,
+    )
+
+    expect(screen.getByText('Node title')).toBeInTheDocument()
+    expect(screen.getByText('Node description')).toBeInTheDocument()
+    expect(screen.getByTestId('node-control')).toBeInTheDocument()
+    expect(screen.getByTestId('node-source-handle')).toBeInTheDocument()
+    expect(screen.getByTestId('node-target-handle')).toBeInTheDocument()
+  })
+
+  it('should render entry nodes inside the entry container', () => {
+    renderWorkflowComponent(
+      <BaseNode id="node-1" data={toNodeData(createData({ type: BlockEnum.Start }))}>
+        <div>Body</div>
+      </BaseNode>,
+    )
+
+    expect(screen.getByTestId('entry-node-container')).toBeInTheDocument()
+  })
+
+  it('should block interaction when plugin installation is required', () => {
+    mockUseNodePluginInstallation.mockReturnValue({
+      shouldDim: false,
+      isChecking: false,
+      isMissing: true,
+      canInstall: true,
+      uniqueIdentifier: 'plugin-1',
+    })
+
+    renderWorkflowComponent(
+      <BaseNode id="node-1" data={toNodeData(createData())}>
+        <div>Body</div>
+      </BaseNode>,
+    )
+
+    const overlay = screen.getByTestId('workflow-node-install-overlay')
+    expect(overlay).toBeInTheDocument()
+    fireEvent.click(overlay)
+  })
+
+  it('should render running status indicators for loop nodes', () => {
+    renderWorkflowComponent(
+      <BaseNode
+        id="node-1"
+        data={toNodeData(createData({
+          type: BlockEnum.Loop,
+          _loopIndex: 3,
+          _runningStatus: NodeRunningStatus.Running,
+          width: 320,
+          height: 220,
+        }))}
+      >
+        <div>Loop body</div>
+      </BaseNode>,
+    )
+
+    expect(screen.getByText(/workflow\.nodes\.loop\.currentLoopCount/)).toBeInTheDocument()
+    expect(screen.getByTestId('node-resizer')).toBeInTheDocument()
+  })
+
+  it('should render an iteration node resizer and dimmed overlay', () => {
+    mockUseNodePluginInstallation.mockReturnValue({
+      shouldDim: true,
+      isChecking: false,
+      isMissing: false,
+      canInstall: false,
+      uniqueIdentifier: undefined,
+    })
+
+    renderWorkflowComponent(
+      <BaseNode
+        id="node-1"
+        data={toNodeData(createData({
+          type: BlockEnum.Iteration,
+          selected: true,
+          isInIteration: true,
+        }))}
+      >
+        <div>Iteration body</div>
+      </BaseNode>,
+    )
+
+    expect(screen.getByTestId('node-resizer')).toBeInTheDocument()
+    expect(screen.getByTestId('workflow-node-install-overlay')).toBeInTheDocument()
+    expect(mockHandleNodeIterationChildSizeChange).toHaveBeenCalledWith('node-1')
+  })
+
+  it('should trigger loop resize updates when the selected node is inside a loop', () => {
+    renderWorkflowComponent(
+      <BaseNode
+        id="node-2"
+        data={toNodeData(createData({
+          type: BlockEnum.Loop,
+          selected: true,
+          isInLoop: true,
+        }))}
+      >
+        <div>Loop body</div>
+      </BaseNode>,
+    )
+
+    expect(mockHandleNodeLoopChildSizeChange).toHaveBeenCalledWith('node-2')
+    expect(mockUseNodeResizeObserver).toHaveBeenCalledTimes(2)
+  })
+})

web/app/components/workflow/nodes/_base/__tests__/use-node-resize-observer.spec.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react'
+import useNodeResizeObserver from '../use-node-resize-observer'
+
+describe('useNodeResizeObserver', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+  it('should observe and disconnect when enabled with a mounted node ref', () => {
+    const observe = vi.fn()
+    const disconnect = vi.fn()
+    const onResize = vi.fn()
+    let resizeCallback: (() => void) | undefined
+
+    vi.stubGlobal('ResizeObserver', class {
+      constructor(callback: () => void) {
+        resizeCallback = callback
+      }
+
+      observe = observe
+      disconnect = disconnect
+      unobserve = vi.fn()
+    })
+
+    const node = document.createElement('div')
+    const nodeRef = { current: node }
+
+    const { unmount } = renderHook(() => useNodeResizeObserver({
+      enabled: true,
+      nodeRef,
+      onResize,
+    }))
+
+    expect(observe).toHaveBeenCalledWith(node)
+    resizeCallback?.()
+    expect(onResize).toHaveBeenCalledTimes(1)
+
+    unmount()
+    expect(disconnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('should do nothing when disabled', () => {
+    const observe = vi.fn()
+
+    vi.stubGlobal('ResizeObserver', class {
+      observe = observe
+      disconnect = vi.fn()
+      unobserve = vi.fn()
+    })
+
+    renderHook(() => useNodeResizeObserver({
+      enabled: false,
+      nodeRef: { current: document.createElement('div') },
+      onResize: vi.fn(),
+    }))
+
+    expect(observe).not.toHaveBeenCalled()
+  })
+})

web/app/components/workflow/nodes/_base/components/__tests__/agent-strategy.spec.tsx

@@ -145,7 +145,7 @@ describe('AgentStrategy', () => {
       />,
     )
 
-    expect(screen.getByRole('slider')).toBeInTheDocument()
+    expect(screen.getByLabelText('Count')).toBeInTheDocument()
     expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
 

web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.branches.spec.tsx

@@ -0,0 +1,410 @@
+import type { ComponentProps } from 'react'
+import type { CredentialFormSchema, FormOption } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { PluginCategoryEnum } from '@/app/components/plugins/types'
+import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
+import { VarKindType } from '../../types'
+import FormInputItem from '../form-input-item'
+
+const {
+  mockFetchDynamicOptions,
+  mockTriggerDynamicOptionsState,
+} = vi.hoisted(() => ({
+  mockFetchDynamicOptions: vi.fn(),
+  mockTriggerDynamicOptionsState: {
+    data: undefined as { options: FormOption[] } | undefined,
+    isLoading: false,
+  },
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+  useLanguage: () => 'en_US',
+}))
+
+vi.mock('@/service/use-plugins', () => ({
+  useFetchDynamicOptions: () => ({
+    mutateAsync: mockFetchDynamicOptions,
+  }),
+}))
+
+vi.mock('@/service/use-triggers', () => ({
+  useTriggerPluginDynamicOptions: () => mockTriggerDynamicOptionsState,
+}))
+
+vi.mock('@/app/components/plugins/plugin-detail-panel/app-selector', () => ({
+  default: ({ onSelect }: { onSelect: (value: string) => void }) => (
+    <button onClick={() => onSelect('app-1')}>app-selector</button>
+  ),
+}))
+
+vi.mock('@/app/components/plugins/plugin-detail-panel/model-selector', () => ({
+  default: ({ setModel }: { setModel: (value: string) => void }) => (
+    <button onClick={() => setModel('model-1')}>model-selector</button>
+  ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/tool/components/mixed-variable-text-input', () => ({
+  default: ({ onChange, value }: { onChange: (value: string) => void, value: string }) => (
+    <input aria-label="mixed-variable-input" value={value} onChange={e => onChange(e.target.value)} />
+  ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
+  default: ({ onChange, value }: { onChange: (value: string) => void, value: string }) => (
+    <textarea aria-label="json-editor" value={value} onChange={e => onChange(e.target.value)} />
+  ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
+  default: ({ onChange }: { onChange: (value: string[]) => void }) => (
+    <button onClick={() => onChange(['node-2', 'asset'])}>variable-picker</button>
+  ),
+}))
+
+const createSchema = (
+  overrides: Partial<CredentialFormSchema & {
+    _type?: FormTypeEnum
+    multiple?: boolean
+    options?: FormOption[]
+  }> = {},
+) => ({
+  label: { en_US: 'Field', zh_Hans: '字段' },
+  name: 'field',
+  required: false,
+  show_on: [],
+  type: FormTypeEnum.textInput,
+  variable: 'field',
+  ...overrides,
+}) as CredentialFormSchema & {
+  _type?: FormTypeEnum
+  multiple?: boolean
+  options?: FormOption[]
+}
+
+const createOption = (
+  value: string,
+  overrides: Partial<FormOption> = {},
+): FormOption => ({
+  label: { en_US: value, zh_Hans: value },
+  show_on: [],
+  value,
+  ...overrides,
+})
+
+const renderFormInputItem = (props: Partial<ComponentProps<typeof FormInputItem>> = {}) => {
+  const onChange = vi.fn()
+  const result = renderWorkflowFlowComponent(
+    <FormInputItem
+      readOnly={false}
+      nodeId="node-1"
+      schema={createSchema()}
+      value={{
+        field: {
+          type: VarKindType.constant,
+          value: '',
+        },
+      }}
+      onChange={onChange}
+      {...props}
+    />,
+    {
+      edges: [],
+      hooksStoreProps: {},
+      nodes: [],
+    },
+  )
+
+  return { ...result, onChange }
+}
+
+describe('FormInputItem branches', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetchDynamicOptions.mockResolvedValue({ options: [] })
+    mockTriggerDynamicOptionsState.data = undefined
+    mockTriggerDynamicOptionsState.isLoading = false
+  })
+
+  it('should update mixed string inputs via the shared text input', () => {
+    const { onChange } = renderFormInputItem()
+
+    fireEvent.change(screen.getByLabelText('mixed-variable-input'), { target: { value: 'hello world' } })
+
+    expect(onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.mixed,
+        value: 'hello world',
+      },
+    })
+  })
+
+  it('should switch from variable mode back to constant mode with the schema default value', () => {
+    const { container, onChange } = renderFormInputItem({
+      schema: createSchema({
+        default: 7 as never,
+        type: FormTypeEnum.textNumber,
+      }),
+      value: {
+        field: {
+          type: VarKindType.variable,
+          value: ['node-1', 'count'],
+        },
+      },
+    })
+
+    const switchRoot = container.querySelector('.inline-flex.h-8.shrink-0.gap-px')
+    const clickableItems = switchRoot?.querySelectorAll('.cursor-pointer') ?? []
+    fireEvent.click(clickableItems[1] as HTMLElement)
+
+    expect(onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: 7,
+      },
+    })
+  })
+
+  it('should render static select options with icons and update the selected item', () => {
+    const { onChange } = renderFormInputItem({
+      schema: createSchema({
+        type: FormTypeEnum.select,
+        options: [
+          createOption('basic', { icon: '/basic.svg' }),
+          createOption('pro'),
+        ],
+      }),
+      value: {
+        field: {
+          type: VarKindType.constant,
+          value: '',
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(document.querySelector('img[src="/basic.svg"]')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('basic'))
+
+    expect(onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: 'basic',
+      },
+    })
+  })
+
+  it('should render static multi-select values and update selected labels', () => {
+    const { onChange } = renderFormInputItem({
+      schema: createSchema({
+        multiple: true,
+        type: FormTypeEnum.select,
+        options: [
+          createOption('alpha'),
+          createOption('beta'),
+        ],
+      }),
+      value: {
+        field: {
+          type: VarKindType.constant,
+          value: ['alpha'],
+        },
+      },
+    })
+
+    expect(screen.getByText('alpha')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getByText('beta'))
+
+    expect(onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: ['alpha', 'beta'],
+      },
+    })
+  })
+
+  it('should fetch tool dynamic options, render them, and update the value', async () => {
+    mockFetchDynamicOptions.mockResolvedValueOnce({
+      options: [
+        createOption('remote', { icon: '/remote.svg' }),
+      ],
+    })
+    const { onChange } = renderFormInputItem({
+      schema: createSchema({
+        type: FormTypeEnum.dynamicSelect,
+      }),
+      currentProvider: { plugin_id: 'provider-1', name: 'provider-1' } as never,
+      currentTool: { name: 'tool-1' } as never,
+      providerType: PluginCategoryEnum.tool,
+      value: {
+        field: {
+          type: VarKindType.constant,
+          value: '',
+        },
+      },
+    })
+
+    await waitFor(() => {
+      expect(mockFetchDynamicOptions).toHaveBeenCalledTimes(1)
+    })
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(document.querySelector('img[src="/remote.svg"]')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('remote'))
+
+    expect(onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: 'remote',
+      },
+    })
+  })
+
+  it('should recover when fetching dynamic tool options fails', async () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockFetchDynamicOptions.mockRejectedValueOnce(new Error('network'))
+
+    renderFormInputItem({
+      schema: createSchema({
+        type: FormTypeEnum.dynamicSelect,
+      }),
+      currentProvider: { plugin_id: 'provider-1', name: 'provider-1' } as never,
+      currentTool: { name: 'tool-1' } as never,
+      providerType: PluginCategoryEnum.tool,
+    })
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalled()
+    })
+
+    consoleSpy.mockRestore()
+  })
+
+  it('should use trigger dynamic options for multi-select values', async () => {
+    mockTriggerDynamicOptionsState.data = {
+      options: [
+        createOption('trigger-option'),
+      ],
+    }
+
+    const { onChange } = renderFormInputItem({
+      schema: createSchema({
+        multiple: true,
+        type: FormTypeEnum.dynamicSelect,
+      }),
+      currentProvider: { plugin_id: 'provider-2', name: 'provider-2', credential_id: 'credential-1' } as never,
+      currentTool: { name: 'trigger-tool' } as never,
+      providerType: PluginCategoryEnum.trigger,
+      value: {
+        field: {
+          type: VarKindType.constant,
+          value: [],
+        },
+      },
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('button')).not.toBeDisabled()
+    })
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.click(screen.getByText('trigger-option'))
+
+    expect(onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: ['trigger-option'],
+      },
+    })
+  })
+
+  it('should delegate app and model selection to their dedicated controls', () => {
+    const app = renderFormInputItem({
+      schema: createSchema({ type: FormTypeEnum.appSelector }),
+    })
+    fireEvent.click(screen.getByText('app-selector'))
+    expect(app.onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: 'app-1',
+      },
+    })
+
+    app.unmount()
+
+    const model = renderFormInputItem({
+      schema: createSchema({ type: FormTypeEnum.modelSelector }),
+    })
+    fireEvent.click(screen.getByText('model-selector'))
+    expect(model.onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: 'model-1',
+      },
+    })
+  })
+
+  it('should render the JSON editor and variable picker specialized branches', () => {
+    const json = renderFormInputItem({
+      schema: createSchema({ type: FormTypeEnum.object }),
+      value: {
+        field: {
+          type: VarKindType.constant,
+          value: '{"enabled":false}',
+        },
+      },
+    })
+
+    fireEvent.change(screen.getByLabelText('json-editor'), { target: { value: '{"enabled":true}' } })
+    expect(json.onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.constant,
+        value: '{"enabled":true}',
+      },
+    })
+
+    json.unmount()
+
+    const picker = renderFormInputItem({
+      schema: createSchema({ type: FormTypeEnum.file }),
+      value: {
+        field: {
+          type: VarKindType.constant,
+          value: '',
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByText('variable-picker'))
+    expect(picker.onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.variable,
+        value: ['node-2', 'asset'],
+      },
+    })
+  })
+
+  it('should render variable selectors for boolean variable inputs', () => {
+    const { onChange } = renderFormInputItem({
+      schema: createSchema({
+        _type: FormTypeEnum.boolean,
+        type: FormTypeEnum.textInput,
+      }),
+      value: {
+        field: {
+          type: VarKindType.variable,
+          value: ['node-3', 'flag'],
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByText('variable-picker'))
+
+    expect(onChange).toHaveBeenCalledWith({
+      field: {
+        type: VarKindType.variable,
+        value: ['node-2', 'asset'],
+      },
+    })
+  })
+})

web/app/components/workflow/nodes/_base/components/__tests__/form-input-item.helpers.spec.ts

@@ -0,0 +1,166 @@
+import type { CredentialFormSchema, FormOption } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { Var } from '@/app/components/workflow/types'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { VarType } from '@/app/components/workflow/types'
+import { VarKindType } from '../../types'
+import {
+  filterVisibleOptions,
+  getCheckboxListOptions,
+  getCheckboxListValue,
+  getFilterVar,
+  getFormInputState,
+  getNumberInputValue,
+  getSelectedLabels,
+  getTargetVarType,
+  getVarKindType,
+  hasOptionIcon,
+  mapSelectItems,
+  normalizeVariableSelectorValue,
+} from '../form-input-item.helpers'
+
+const createSchema = (
+  overrides: Partial<CredentialFormSchema & {
+    _type?: FormTypeEnum
+    multiple?: boolean
+    options?: FormOption[]
+  }> = {},
+) => ({
+  label: { en_US: 'Field', zh_Hans: '字段' },
+  name: 'field',
+  required: false,
+  show_on: [],
+  type: FormTypeEnum.textInput,
+  variable: 'field',
+  ...overrides,
+}) as CredentialFormSchema & {
+  _type?: FormTypeEnum
+  multiple?: boolean
+  options?: FormOption[]
+}
+
+const createOption = (
+  value: string,
+  overrides: Partial<FormOption> = {},
+): FormOption => ({
+  label: { en_US: value, zh_Hans: value },
+  show_on: [],
+  value,
+  ...overrides,
+})
+
+describe('form-input-item helpers', () => {
+  it('should derive field state and target var type', () => {
+    const numberState = getFormInputState(
+      createSchema({ type: FormTypeEnum.textNumber }),
+      { type: VarKindType.constant, value: 1 },
+    )
+    const filesState = getFormInputState(
+      createSchema({ type: FormTypeEnum.files }),
+      { type: VarKindType.variable, value: ['node', 'files'] },
+    )
+
+    expect(numberState.isNumber).toBe(true)
+    expect(numberState.showTypeSwitch).toBe(true)
+    expect(getTargetVarType(numberState)).toBe(VarType.number)
+    expect(filesState.isFile).toBe(true)
+    expect(filesState.showVariableSelector).toBe(true)
+    expect(getTargetVarType(filesState)).toBe(VarType.arrayFile)
+  })
+
+  it('should return filter functions and var kind types by schema mode', () => {
+    const stringFilter = getFilterVar(getFormInputState(createSchema(), { type: VarKindType.mixed, value: '' }))
+    const booleanState = getFormInputState(
+      createSchema({ _type: FormTypeEnum.boolean, type: FormTypeEnum.textInput }),
+      { type: VarKindType.constant, value: true },
+    )
+
+    expect(stringFilter?.({ type: VarType.secret } as Var)).toBe(true)
+    expect(stringFilter?.({ type: VarType.file } as Var)).toBe(false)
+    expect(getVarKindType(booleanState)).toBe(VarKindType.constant)
+    expect(getFilterVar(booleanState)?.({ type: VarType.boolean } as Var)).toBe(false)
+
+    const fileState = getFormInputState(
+      createSchema({ type: FormTypeEnum.file }),
+      { type: VarKindType.variable, value: ['node', 'file'] },
+    )
+    const objectState = getFormInputState(
+      createSchema({ type: FormTypeEnum.object }),
+      { type: VarKindType.constant, value: '{}' },
+    )
+    const arrayState = getFormInputState(
+      createSchema({ type: FormTypeEnum.array }),
+      { type: VarKindType.constant, value: '[]' },
+    )
+    const dynamicState = getFormInputState(
+      createSchema({ type: FormTypeEnum.dynamicSelect }),
+      { type: VarKindType.constant, value: 'selected' },
+    )
+
+    expect(getFilterVar(fileState)?.({ type: VarType.file } as Var)).toBe(true)
+    expect(getFilterVar(objectState)?.({ type: VarType.object } as Var)).toBe(true)
+    expect(getFilterVar(arrayState)?.({ type: VarType.arrayString } as Var)).toBe(true)
+    expect(getVarKindType(fileState)).toBe(VarKindType.variable)
+    expect(getVarKindType(dynamicState)).toBe(VarKindType.constant)
+    expect(getVarKindType(getFormInputState(createSchema({ type: FormTypeEnum.appSelector }), undefined))).toBeUndefined()
+  })
+
+  it('should filter and map visible options using show_on rules', () => {
+    const options = [
+      createOption('always'),
+      createOption('premium', {
+        show_on: [{ variable: 'mode', value: 'pro' }],
+      }),
+    ]
+    const values = {
+      mode: {
+        type: VarKindType.constant,
+        value: 'pro',
+      },
+    }
+
+    const visibleOptions = filterVisibleOptions(options, values)
+    expect(visibleOptions).toHaveLength(2)
+    expect(mapSelectItems(visibleOptions, 'en_US')).toEqual([
+      { name: 'always', value: 'always' },
+      { name: 'premium', value: 'premium' },
+    ])
+    expect(hasOptionIcon(visibleOptions)).toBe(false)
+  })
+
+  it('should compute selected labels and checkbox state from visible options', () => {
+    const options = [
+      createOption('alpha'),
+      createOption('beta'),
+      createOption('gamma'),
+    ]
+
+    expect(getSelectedLabels(['alpha', 'beta'], options, 'en_US')).toBe('alpha, beta')
+    expect(getSelectedLabels(['alpha', 'beta', 'gamma'], options, 'en_US')).toBe('3 selected')
+    expect(getCheckboxListOptions(options, 'en_US')).toEqual([
+      { label: 'alpha', value: 'alpha' },
+      { label: 'beta', value: 'beta' },
+      { label: 'gamma', value: 'gamma' },
+    ])
+    expect(getCheckboxListValue(['alpha', 'missing'], ['beta'], options)).toEqual(['alpha'])
+  })
+
+  it('should normalize number and variable selector values', () => {
+    expect(getNumberInputValue(Number.NaN)).toBe('')
+    expect(getNumberInputValue(2)).toBe(2)
+    expect(getNumberInputValue('3')).toBe('3')
+    expect(getNumberInputValue(undefined)).toBe('')
+    expect(normalizeVariableSelectorValue([])).toEqual([])
+    expect(normalizeVariableSelectorValue(['node', 'answer'])).toEqual(['node', 'answer'])
+    expect(normalizeVariableSelectorValue('')).toBe('')
+  })
+
+  it('should derive remaining target variable types and label states', () => {
+    const objectState = getFormInputState(createSchema({ type: FormTypeEnum.object }), undefined)
+    const arrayState = getFormInputState(createSchema({ type: FormTypeEnum.array }), undefined)
+
+    expect(getTargetVarType(objectState)).toBe(VarType.object)
+    expect(getTargetVarType(arrayState)).toBe(VarType.arrayObject)
+    expect(getSelectedLabels(undefined, [], 'en_US')).toBe('')
+    expect(getCheckboxListValue('alpha', [], [createOption('alpha')])).toEqual(['alpha'])
+  })
+})