feat(auth): implement credential management modals and hooks

- Added  component for handling delete confirmation and edit modals.
- Introduced  and  for displaying credentials.
- Created custom hooks  and  to manage credential actions and modal states.
- Refactored  component to utilize new hooks and components for improved readability and maintainability.

.agent/skills

@@ -1 +0,0 @@
-../.claude/skills

.claude/skills/orpc-contract-first/SKILL.md

@@ -1,46 +0,0 @@
----
-name: orpc-contract-first
-description: Guide for implementing oRPC contract-first API patterns in Dify frontend. Triggers when creating new API contracts, adding service endpoints, integrating TanStack Query with typed contracts, or migrating legacy service calls to oRPC. Use for all API layer work in web/contract and web/service directories.
----
-
-# oRPC Contract-First Development
-
-## Project Structure
-
-```
-web/contract/
-├── base.ts           # Base contract (inputStructure: 'detailed')
-├── router.ts         # Router composition & type exports
-├── marketplace.ts    # Marketplace contracts
-└── console/          # Console contracts by domain
-    ├── system.ts
-    └── billing.ts
-```
-
-## Workflow
-
-1. **Create contract** in `web/contract/console/{domain}.ts`
-   - Import `base` from `../base` and `type` from `@orpc/contract`
-   - Define route with `path`, `method`, `input`, `output`
-
-2. **Register in router** at `web/contract/router.ts`
-   - Import directly from domain file (no barrel files)
-   - Nest by API prefix: `billing: { invoices, bindPartnerStack }`
-
-3. **Create hooks** in `web/service/use-{domain}.ts`
-   - Use `consoleQuery.{group}.{contract}.queryKey()` for query keys
-   - Use `consoleClient.{group}.{contract}()` for API calls
-
-## Key Rules
-
-- **Input structure**: Always use `{ params, query?, body? }` format
-- **Path params**: Use `{paramName}` in path, match in `params` object
-- **Router nesting**: Group by API prefix (e.g., `/billing/*` → `billing: {}`)
-- **No barrel files**: Import directly from specific files
-- **Types**: Import from `@/types/`, use `type<T>()` helper
-
-## Type Export
-
-```typescript
-export type ConsoleInputs = InferContractRouterInputs<typeof consoleRouterContract>
-```

.github/workflows/style.yml

@@ -90,7 +90,7 @@ jobs:
         uses: actions/setup-node@v6
         if: steps.changed-files.outputs.any_changed == 'true'
         with:
-          node-version: 24
+          node-version: 22
           cache: pnpm
           cache-dependency-path: ./web/pnpm-lock.yaml
 

.github/workflows/tool-test-sdks.yaml

@@ -16,6 +16,10 @@ jobs:
     name: unit test for Node.js SDK
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [16, 18, 20, 22]
+
     defaults:
       run:
         working-directory: sdks/nodejs-client
@@ -25,10 +29,10 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Use Node.js
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v6
         with:
-          node-version: 24
+          node-version: ${{ matrix.node-version }}
           cache: ''
           cache-dependency-path: 'pnpm-lock.yaml'
 

.github/workflows/translate-i18n-claude.yml

@@ -57,7 +57,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 24
+          node-version: 'lts/*'
           cache: pnpm
           cache-dependency-path: ./web/pnpm-lock.yaml
 

.github/workflows/web-tests.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 24
+          node-version: 22
           cache: pnpm
           cache-dependency-path: ./web/pnpm-lock.yaml
 

api/.env.example

@@ -417,8 +417,6 @@ SMTP_USERNAME=123
 SMTP_PASSWORD=abc
 SMTP_USE_TLS=true
 SMTP_OPPORTUNISTIC_TLS=false
-# Optional: override the local hostname used for SMTP HELO/EHLO
-SMTP_LOCAL_HOSTNAME=
 # Sendgid configuration
 SENDGRID_API_KEY=
 # Sentry configuration
@@ -715,4 +713,3 @@ ANNOTATION_IMPORT_MAX_CONCURRENT=5
 SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
 SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
 SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
-

api/configs/feature/__init__.py

@@ -949,12 +949,6 @@ class MailConfig(BaseSettings):
         default=False,
     )
 
-    SMTP_LOCAL_HOSTNAME: str | None = Field(
-        description="Override the local hostname used in SMTP HELO/EHLO. "
-        "Useful behind NAT or when the default hostname causes rejections.",
-        default=None,
-    )
-
     EMAIL_SEND_IP_LIMIT_PER_MINUTE: PositiveInt = Field(
         description="Maximum number of emails allowed to be sent from the same IP address in a minute",
         default=50,

api/controllers/console/app/conversation.py

@@ -592,12 +592,9 @@ def _get_conversation(app_model, conversation_id):
     if not conversation:
         raise NotFound("Conversation Not Exists.")
 
-    db.session.execute(
-        sa.update(Conversation)
-        .where(Conversation.id == conversation_id, Conversation.read_at.is_(None))
-        .values(read_at=naive_utc_now(), read_account_id=current_user.id)
-    )
-    db.session.commit()
-    db.session.refresh(conversation)
+    if not conversation.read_at:
+        conversation.read_at = naive_utc_now()
+        conversation.read_account_id = current_user.id
+        db.session.commit()
 
     return conversation

api/controllers/console/datasets/external.py

@@ -81,7 +81,7 @@ class ExternalKnowledgeApiPayload(BaseModel):
 class ExternalDatasetCreatePayload(BaseModel):
     external_knowledge_api_id: str
     external_knowledge_id: str
-    name: str = Field(..., min_length=1, max_length=100)
+    name: str = Field(..., min_length=1, max_length=40)
     description: str | None = Field(None, max_length=400)
     external_retrieval_model: dict[str, object] | None = None
 

api/core/model_manager.py

@@ -21,7 +21,6 @@ from core.model_runtime.model_providers.__base.speech2text_model import Speech2T
 from core.model_runtime.model_providers.__base.text_embedding_model import TextEmbeddingModel
 from core.model_runtime.model_providers.__base.tts_model import TTSModel
 from core.provider_manager import ProviderManager
-from core.workflow.utils.generator_timeout import with_first_token_timeout
 from extensions.ext_redis import redis_client
 from models.provider import ProviderType
 from services.enterprise.plugin_manager_service import PluginCredentialType
@@ -110,7 +109,6 @@ class ModelInstance:
         stream: Literal[True] = True,
         user: str | None = None,
         callbacks: list[Callback] | None = None,
-        first_token_timeout: float | None = None,
     ) -> Generator: ...
 
     @overload
@@ -123,7 +121,6 @@ class ModelInstance:
         stream: Literal[False] = False,
         user: str | None = None,
         callbacks: list[Callback] | None = None,
-        first_token_timeout: float | None = None,
     ) -> LLMResult: ...
 
     @overload
@@ -136,7 +133,6 @@ class ModelInstance:
         stream: bool = True,
         user: str | None = None,
         callbacks: list[Callback] | None = None,
-        first_token_timeout: float | None = None,
     ) -> Union[LLMResult, Generator]: ...
 
     def invoke_llm(
@@ -148,7 +144,6 @@ class ModelInstance:
         stream: bool = True,
         user: str | None = None,
         callbacks: list[Callback] | None = None,
-        first_token_timeout: float | None = None,
     ) -> Union[LLMResult, Generator]:
         """
         Invoke large language model
@@ -160,31 +155,26 @@ class ModelInstance:
         :param stream: is stream response
         :param user: unique user id
         :param callbacks: callbacks
-        :param first_token_timeout: timeout in seconds for receiving first token (streaming only)
         :return: full response or stream response chunk generator result
         """
         if not isinstance(self.model_type_instance, LargeLanguageModel):
             raise Exception("Model type instance is not LargeLanguageModel")
-
-        result = self._round_robin_invoke(
-            function=self.model_type_instance.invoke,
-            model=self.model,
-            credentials=self.credentials,
-            prompt_messages=prompt_messages,
-            model_parameters=model_parameters,
-            tools=tools,
-            stop=stop,
-            stream=stream,
-            user=user,
-            callbacks=callbacks,
+        return cast(
+            Union[LLMResult, Generator],
+            self._round_robin_invoke(
+                function=self.model_type_instance.invoke,
+                model=self.model,
+                credentials=self.credentials,
+                prompt_messages=prompt_messages,
+                model_parameters=model_parameters,
+                tools=tools,
+                stop=stop,
+                stream=stream,
+                user=user,
+                callbacks=callbacks,
+            ),
         )
 
-        # Apply first token timeout wrapper for streaming responses
-        if stream and first_token_timeout and first_token_timeout > 0 and isinstance(result, Generator):
-            result = with_first_token_timeout(result, first_token_timeout)
-
-        return cast(Union[LLMResult, Generator], result)
-
     def get_llm_num_tokens(
         self, prompt_messages: Sequence[PromptMessage], tools: Sequence[PromptMessageTool] | None = None
     ) -> int:

api/core/plugin/impl/endpoint.py

@@ -1,6 +1,5 @@
 from core.plugin.entities.endpoint import EndpointEntityWithInstance
 from core.plugin.impl.base import BasePluginClient
-from core.plugin.impl.exc import PluginDaemonInternalServerError
 
 
 class PluginEndpointClient(BasePluginClient):
@@ -71,27 +70,18 @@ class PluginEndpointClient(BasePluginClient):
     def delete_endpoint(self, tenant_id: str, user_id: str, endpoint_id: str):
         """
         Delete the given endpoint.
-
-        This operation is idempotent: if the endpoint is already deleted (record not found),
-        it will return True instead of raising an error.
         """
-        try:
-            return self._request_with_plugin_daemon_response(
-                "POST",
-                f"plugin/{tenant_id}/endpoint/remove",
-                bool,
-                data={
-                    "endpoint_id": endpoint_id,
-                },
-                headers={
-                    "Content-Type": "application/json",
-                },
-            )
-        except PluginDaemonInternalServerError as e:
-            # Make delete idempotent: if record is not found, consider it a success
-            if "record not found" in str(e.description).lower():
-                return True
-            raise
+        return self._request_with_plugin_daemon_response(
+            "POST",
+            f"plugin/{tenant_id}/endpoint/remove",
+            bool,
+            data={
+                "endpoint_id": endpoint_id,
+            },
+            headers={
+                "Content-Type": "application/json",
+            },
+        )
 
     def enable_endpoint(self, tenant_id: str, user_id: str, endpoint_id: str):
         """

api/core/workflow/nodes/base/entities.py

@@ -23,22 +23,10 @@ class RetryConfig(BaseModel):
     retry_interval: int = 0  # retry interval in milliseconds
     retry_enabled: bool = False  # whether retry is enabled
 
-    # First token timeout for LLM nodes (milliseconds), 0 means no timeout
-    first_token_timeout: int = 0
-
-    @property
-    def first_token_timeout_seconds(self) -> float:
-        return self.first_token_timeout / 1000
-
     @property
     def retry_interval_seconds(self) -> float:
         return self.retry_interval / 1000
 
-    @property
-    def has_first_token_timeout(self) -> bool:
-        """Check if first token timeout should be applied (retry enabled and timeout > 0)."""
-        return self.retry_enabled and self.first_token_timeout > 0
-
 
 class VariableSelector(BaseModel):
     """

api/core/workflow/nodes/llm/node.py

@@ -237,13 +237,6 @@ class LLMNode(Node[LLMNodeData]):
             )
 
             # handle invoke result
-            # Get first token timeout from retry config if enabled (convert ms to seconds)
-            first_token_timeout = (
-                self.node_data.retry_config.first_token_timeout_seconds
-                if self.node_data.retry_config.has_first_token_timeout
-                else None
-            )
-
             generator = LLMNode.invoke_llm(
                 node_data_model=self.node_data.model,
                 model_instance=model_instance,
@@ -257,7 +250,6 @@ class LLMNode(Node[LLMNodeData]):
                 node_id=self._node_id,
                 node_type=self.node_type,
                 reasoning_format=self.node_data.reasoning_format,
-                first_token_timeout=first_token_timeout,
             )
 
             structured_output: LLMStructuredOutput | None = None
@@ -375,7 +367,6 @@ class LLMNode(Node[LLMNodeData]):
         node_id: str,
         node_type: NodeType,
         reasoning_format: Literal["separated", "tagged"] = "tagged",
-        first_token_timeout: float | None = None,
     ) -> Generator[NodeEventBase | LLMStructuredOutput, None, None]:
         model_schema = model_instance.model_type_instance.get_model_schema(
             node_data_model.name, model_instance.credentials
@@ -409,7 +400,6 @@ class LLMNode(Node[LLMNodeData]):
                 stop=list(stop or []),
                 stream=True,
                 user=user_id,
-                first_token_timeout=first_token_timeout,
             )
 
         return LLMNode.handle_invoke_result(

api/core/workflow/utils/generator_timeout.py

@@ -1,56 +0,0 @@
-"""
-Generator timeout utilities for workflow nodes.
-
-Provides timeout wrappers for streaming generators, primarily used for
-LLM response streaming where we need to enforce time-to-first-token limits.
-"""
-
-import time
-from collections.abc import Generator
-from typing import TypeVar
-
-T = TypeVar("T")
-
-
-class FirstTokenTimeoutError(Exception):
-    """Raised when a generator fails to yield its first item within the configured timeout."""
-
-    def __init__(self, timeout_ms: int):
-        self.timeout_ms = timeout_ms
-        super().__init__(f"Generator timed out after {timeout_ms}ms without yielding first item")
-
-
-def with_first_token_timeout(
-    generator: Generator[T, None, None],
-    timeout_seconds: float,
-) -> Generator[T, None, None]:
-    """
-    Wrap a generator with first token timeout monitoring.
-
-    Only monitors the time until the FIRST item is yielded.
-    Once the first item arrives, timeout monitoring stops and
-    subsequent items are yielded without timeout checks.
-
-    Args:
-        generator: The source generator to wrap
-        timeout_seconds: Maximum time to wait for first item (in seconds)
-
-    Yields:
-        Items from the source generator
-
-    Raises:
-        FirstTokenTimeoutError: If first item doesn't arrive within timeout
-    """
-    start_time = time.monotonic()
-
-    # Handle first item separately to check timeout only once
-    try:
-        first_item = next(generator)
-        if time.monotonic() - start_time > timeout_seconds:
-            raise FirstTokenTimeoutError(int(timeout_seconds * 1000))
-        yield first_item
-    except StopIteration:
-        return
-
-    # Yield remaining items without timeout checks
-    yield from generator

api/factories/file_factory.py

@@ -115,18 +115,7 @@ def build_from_mappings(
     # TODO(QuantumGhost): Performance concern - each mapping triggers a separate database query.
     # Implement batch processing to reduce database load when handling multiple files.
     # Filter out None/empty mappings to avoid errors
-    def is_valid_mapping(m: Mapping[str, Any]) -> bool:
-        if not m or not m.get("transfer_method"):
-            return False
-        # For REMOTE_URL transfer method, ensure url or remote_url is provided and not None
-        transfer_method = m.get("transfer_method")
-        if transfer_method == FileTransferMethod.REMOTE_URL:
-            url = m.get("url") or m.get("remote_url")
-            if not url:
-                return False
-        return True
-
-    valid_mappings = [m for m in mappings if is_valid_mapping(m)]
+    valid_mappings = [m for m in mappings if m and m.get("transfer_method")]
     files = [
         build_from_mapping(
             mapping=mapping,

api/fields/message_fields.py

@@ -2,7 +2,6 @@ from __future__ import annotations
 
 from datetime import datetime
 from typing import TypeAlias
-from uuid import uuid4
 
 from pydantic import BaseModel, ConfigDict, Field, field_validator
 
@@ -21,8 +20,8 @@ class SimpleFeedback(ResponseModel):
 
 
 class RetrieverResource(ResponseModel):
-    id: str = Field(default_factory=lambda: str(uuid4()))
-    message_id: str = Field(default_factory=lambda: str(uuid4()))
+    id: str
+    message_id: str
     position: int
     dataset_id: str | None = None
     dataset_name: str | None = None

api/libs/smtp.py

@@ -3,8 +3,6 @@ import smtplib
 from email.mime.multipart import MIMEMultipart
 from email.mime.text import MIMEText
 
-from configs import dify_config
-
 logger = logging.getLogger(__name__)
 
 
@@ -21,21 +19,20 @@ class SMTPClient:
         self.opportunistic_tls = opportunistic_tls
 
     def send(self, mail: dict):
-        smtp: smtplib.SMTP | None = None
-        local_host = dify_config.SMTP_LOCAL_HOSTNAME
+        smtp = None
         try:
-            if self.use_tls and not self.opportunistic_tls:
-                # SMTP with SSL (implicit TLS)
-                smtp = smtplib.SMTP_SSL(self.server, self.port, timeout=10, local_hostname=local_host)
+            if self.use_tls:
+                if self.opportunistic_tls:
+                    smtp = smtplib.SMTP(self.server, self.port, timeout=10)
+                    # Send EHLO command with the HELO domain name as the server address
+                    smtp.ehlo(self.server)
+                    smtp.starttls()
+                    # Resend EHLO command to identify the TLS session
+                    smtp.ehlo(self.server)
+                else:
+                    smtp = smtplib.SMTP_SSL(self.server, self.port, timeout=10)
             else:
-                # Plain SMTP or SMTP with STARTTLS (explicit TLS)
-                smtp = smtplib.SMTP(self.server, self.port, timeout=10, local_hostname=local_host)
-
-            assert smtp is not None
-            if self.use_tls and self.opportunistic_tls:
-                smtp.ehlo(self.server)
-                smtp.starttls()
-                smtp.ehlo(self.server)
+                smtp = smtplib.SMTP(self.server, self.port, timeout=10)
 
             # Only authenticate if both username and password are non-empty
             if self.username and self.password and self.username.strip() and self.password.strip():

api/models/dataset.py

@@ -1149,7 +1149,7 @@ class DatasetCollectionBinding(TypeBase):
     )
 
 
-class TidbAuthBinding(TypeBase):
+class TidbAuthBinding(Base):
     __tablename__ = "tidb_auth_bindings"
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="tidb_auth_bindings_pkey"),
@@ -1158,13 +1158,7 @@ class TidbAuthBinding(TypeBase):
         sa.Index("tidb_auth_bindings_created_at_idx", "created_at"),
         sa.Index("tidb_auth_bindings_status_idx", "status"),
     )
-    id: Mapped[str] = mapped_column(
-        StringUUID,
-        primary_key=True,
-        insert_default=lambda: str(uuid4()),
-        default_factory=lambda: str(uuid4()),
-        init=False,
-    )
+    id: Mapped[str] = mapped_column(StringUUID, primary_key=True, default=lambda: str(uuid4()))
     tenant_id: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
     cluster_id: Mapped[str] = mapped_column(String(255), nullable=False)
     cluster_name: Mapped[str] = mapped_column(String(255), nullable=False)
@@ -1172,9 +1166,7 @@ class TidbAuthBinding(TypeBase):
     status: Mapped[str] = mapped_column(sa.String(255), nullable=False, server_default=sa.text("'CREATING'"))
     account: Mapped[str] = mapped_column(String(255), nullable=False)
     password: Mapped[str] = mapped_column(String(255), nullable=False)
-    created_at: Mapped[datetime] = mapped_column(
-        DateTime, nullable=False, server_default=func.current_timestamp(), init=False
-    )
+    created_at: Mapped[datetime] = mapped_column(DateTime, nullable=False, server_default=func.current_timestamp())
 
 
 class Whitelist(TypeBase):

api/models/model.py

@@ -1447,7 +1447,7 @@ class MessageAnnotation(Base):
         return account
 
 
-class AppAnnotationHitHistory(TypeBase):
+class AppAnnotationHitHistory(Base):
     __tablename__ = "app_annotation_hit_histories"
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="app_annotation_hit_histories_pkey"),
@@ -1457,19 +1457,17 @@ class AppAnnotationHitHistory(TypeBase):
         sa.Index("app_annotation_hit_histories_message_idx", "message_id"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, default=lambda: str(uuid4()), init=False)
-    app_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
+    id = mapped_column(StringUUID, default=lambda: str(uuid4()))
+    app_id = mapped_column(StringUUID, nullable=False)
     annotation_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
-    source: Mapped[str] = mapped_column(LongText, nullable=False)
-    question: Mapped[str] = mapped_column(LongText, nullable=False)
-    account_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
-    created_at: Mapped[datetime] = mapped_column(
-        sa.DateTime, nullable=False, server_default=func.current_timestamp(), init=False
-    )
-    score: Mapped[float] = mapped_column(Float, nullable=False, server_default=sa.text("0"))
-    message_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
-    annotation_question: Mapped[str] = mapped_column(LongText, nullable=False)
-    annotation_content: Mapped[str] = mapped_column(LongText, nullable=False)
+    source = mapped_column(LongText, nullable=False)
+    question = mapped_column(LongText, nullable=False)
+    account_id = mapped_column(StringUUID, nullable=False)
+    created_at = mapped_column(sa.DateTime, nullable=False, server_default=func.current_timestamp())
+    score = mapped_column(Float, nullable=False, server_default=sa.text("0"))
+    message_id = mapped_column(StringUUID, nullable=False)
+    annotation_question = mapped_column(LongText, nullable=False)
+    annotation_content = mapped_column(LongText, nullable=False)
 
     @property
     def account(self):
@@ -2085,7 +2083,7 @@ class TraceAppConfig(TypeBase):
         }
 
 
-class TenantCreditPool(TypeBase):
+class TenantCreditPool(Base):
     __tablename__ = "tenant_credit_pools"
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="tenant_credit_pool_pkey"),
@@ -2093,20 +2091,14 @@ class TenantCreditPool(TypeBase):
         sa.Index("tenant_credit_pool_pool_type_idx", "pool_type"),
     )
 
-    id: Mapped[str] = mapped_column(StringUUID, primary_key=True, server_default=text("uuid_generate_v4()"), init=False)
-    tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
-    pool_type: Mapped[str] = mapped_column(String(40), nullable=False, default="trial", server_default="trial")
-    quota_limit: Mapped[int] = mapped_column(BigInteger, nullable=False, default=0)
-    quota_used: Mapped[int] = mapped_column(BigInteger, nullable=False, default=0)
-    created_at: Mapped[datetime] = mapped_column(
-        sa.DateTime, nullable=False, server_default=text("CURRENT_TIMESTAMP"), init=False
-    )
-    updated_at: Mapped[datetime] = mapped_column(
-        sa.DateTime,
-        nullable=False,
-        server_default=func.current_timestamp(),
-        onupdate=func.current_timestamp(),
-        init=False,
+    id = mapped_column(StringUUID, primary_key=True, server_default=text("uuid_generate_v4()"))
+    tenant_id = mapped_column(StringUUID, nullable=False)
+    pool_type = mapped_column(String(40), nullable=False, default="trial", server_default="trial")
+    quota_limit = mapped_column(BigInteger, nullable=False, default=0)
+    quota_used = mapped_column(BigInteger, nullable=False, default=0)
+    created_at = mapped_column(sa.DateTime, nullable=False, server_default=text("CURRENT_TIMESTAMP"))
+    updated_at = mapped_column(
+        sa.DateTime, nullable=False, server_default=func.current_timestamp(), onupdate=func.current_timestamp()
     )
 
     @property

api/schedule/create_tidb_serverless_task.py

@@ -50,13 +50,10 @@ def create_clusters(batch_size):
         )
         for new_cluster in new_clusters:
             tidb_auth_binding = TidbAuthBinding(
-                tenant_id=None,
                 cluster_id=new_cluster["cluster_id"],
                 cluster_name=new_cluster["cluster_name"],
                 account=new_cluster["account"],
                 password=new_cluster["password"],
-                active=False,
-                status="CREATING",
             )
             db.session.add(tidb_auth_binding)
         db.session.commit()

api/tests/integration_tests/.env.example

@@ -103,8 +103,6 @@ SMTP_USERNAME=123
 SMTP_PASSWORD=abc
 SMTP_USE_TLS=true
 SMTP_OPPORTUNISTIC_TLS=false
-# Optional: override the local hostname used for SMTP HELO/EHLO
-SMTP_LOCAL_HOSTNAME=
 
 # Sentry configuration
 SENTRY_DSN=

api/tests/unit_tests/controllers/console/datasets/__init__.py

@@ -1 +0,0 @@
-"""Unit tests for `controllers.console.datasets` controllers."""

api/tests/unit_tests/controllers/console/datasets/test_external_dataset_payload.py

@@ -1,49 +0,0 @@
-from __future__ import annotations
-
-"""
-Unit tests for the external dataset controller payload schemas.
-
-These tests focus on Pydantic validation rules so we can catch regressions
-in request constraints (e.g. max length changes) without exercising the
-full Flask/RESTX request stack.
-"""
-
-import pytest
-from pydantic import ValidationError
-
-from controllers.console.datasets.external import ExternalDatasetCreatePayload
-
-
-def test_external_dataset_create_payload_allows_name_length_100() -> None:
-    """Ensure the `name` field accepts up to 100 characters (inclusive)."""
-
-    # Build a request payload with a boundary-length name value.
-    name_100: str = "a" * 100
-    payload = {
-        "external_knowledge_api_id": "ek-api-1",
-        "external_knowledge_id": "ek-1",
-        "name": name_100,
-    }
-
-    model = ExternalDatasetCreatePayload.model_validate(payload)
-    assert model.name == name_100
-
-
-def test_external_dataset_create_payload_rejects_name_length_101() -> None:
-    """Ensure the `name` field rejects values longer than 100 characters."""
-
-    # Build a request payload that exceeds the max length by 1.
-    name_101: str = "a" * 101
-    payload: dict[str, object] = {
-        "external_knowledge_api_id": "ek-api-1",
-        "external_knowledge_id": "ek-1",
-        "name": name_101,
-    }
-
-    with pytest.raises(ValidationError) as exc_info:
-        ExternalDatasetCreatePayload.model_validate(payload)
-
-    errors = exc_info.value.errors()
-    assert errors[0]["loc"] == ("name",)
-    assert errors[0]["type"] == "string_too_long"
-    assert errors[0]["ctx"]["max_length"] == 100

api/tests/unit_tests/core/plugin/test_endpoint_client.py

@@ -1,279 +0,0 @@
-"""Unit tests for PluginEndpointClient functionality.
-
-This test module covers the endpoint client operations including:
-- Successful endpoint deletion
-- Idempotent delete behavior (record not found)
-- Non-idempotent delete behavior (other errors)
-
-Tests follow the Arrange-Act-Assert pattern for clarity.
-"""
-
-from unittest.mock import MagicMock, patch
-
-import pytest
-
-from core.plugin.impl.endpoint import PluginEndpointClient
-from core.plugin.impl.exc import PluginDaemonInternalServerError
-
-
-class TestPluginEndpointClientDelete:
-    """Unit tests for PluginEndpointClient delete_endpoint operation.
-
-    Tests cover:
-    - Successful endpoint deletion
-    - Idempotent behavior when endpoint is already deleted (record not found)
-    - Non-idempotent behavior for other errors
-    """
-
-    @pytest.fixture
-    def endpoint_client(self):
-        """Create a PluginEndpointClient instance for testing."""
-        return PluginEndpointClient()
-
-    @pytest.fixture
-    def mock_config(self):
-        """Mock plugin daemon configuration."""
-        with (
-            patch("core.plugin.impl.base.dify_config.PLUGIN_DAEMON_URL", "http://127.0.0.1:5002"),
-            patch("core.plugin.impl.base.dify_config.PLUGIN_DAEMON_KEY", "test-api-key"),
-        ):
-            yield
-
-    def test_delete_endpoint_success(self, endpoint_client, mock_config):
-        """Test successful endpoint deletion.
-
-        Given:
-            - A valid tenant_id, user_id, and endpoint_id
-            - The plugin daemon returns success response
-        When:
-            - delete_endpoint is called
-        Then:
-            - The method should return True
-            - The request should be made with correct parameters
-        """
-        # Arrange
-        tenant_id = "tenant-123"
-        user_id = "user-456"
-        endpoint_id = "endpoint-789"
-
-        mock_response = MagicMock()
-        mock_response.status_code = 200
-        mock_response.json.return_value = {
-            "code": 0,
-            "message": "success",
-            "data": True,
-        }
-
-        with patch("httpx.request", return_value=mock_response):
-            # Act
-            result = endpoint_client.delete_endpoint(
-                tenant_id=tenant_id,
-                user_id=user_id,
-                endpoint_id=endpoint_id,
-            )
-
-            # Assert
-            assert result is True
-
-    def test_delete_endpoint_idempotent_record_not_found(self, endpoint_client, mock_config):
-        """Test idempotent delete behavior when endpoint is already deleted.
-
-        Given:
-            - A valid tenant_id, user_id, and endpoint_id
-            - The plugin daemon returns "record not found" error
-        When:
-            - delete_endpoint is called
-        Then:
-            - The method should return True (idempotent behavior)
-            - No exception should be raised
-        """
-        # Arrange
-        tenant_id = "tenant-123"
-        user_id = "user-456"
-        endpoint_id = "endpoint-789"
-
-        mock_response = MagicMock()
-        mock_response.status_code = 200
-        mock_response.json.return_value = {
-            "code": -1,
-            "message": (
-                '{"error_type": "PluginDaemonInternalServerError", '
-                '"message": "failed to remove endpoint: record not found"}'
-            ),
-        }
-
-        with patch("httpx.request", return_value=mock_response):
-            # Act
-            result = endpoint_client.delete_endpoint(
-                tenant_id=tenant_id,
-                user_id=user_id,
-                endpoint_id=endpoint_id,
-            )
-
-            # Assert - should return True instead of raising an error
-            assert result is True
-
-    def test_delete_endpoint_non_idempotent_other_errors(self, endpoint_client, mock_config):
-        """Test non-idempotent delete behavior for other errors.
-
-        Given:
-            - A valid tenant_id, user_id, and endpoint_id
-            - The plugin daemon returns a different error (not "record not found")
-        When:
-            - delete_endpoint is called
-        Then:
-            - The method should raise PluginDaemonInternalServerError
-        """
-        # Arrange
-        tenant_id = "tenant-123"
-        user_id = "user-456"
-        endpoint_id = "endpoint-789"
-
-        mock_response = MagicMock()
-        mock_response.status_code = 200
-        mock_response.json.return_value = {
-            "code": -1,
-            "message": (
-                '{"error_type": "PluginDaemonInternalServerError", '
-                '"message": "failed to remove endpoint: internal server error"}'
-            ),
-        }
-
-        with patch("httpx.request", return_value=mock_response):
-            # Act & Assert
-            with pytest.raises(PluginDaemonInternalServerError) as exc_info:
-                endpoint_client.delete_endpoint(
-                    tenant_id=tenant_id,
-                    user_id=user_id,
-                    endpoint_id=endpoint_id,
-                )
-
-            # Assert - the error message should not be "record not found"
-            assert "record not found" not in str(exc_info.value.description)
-
-    def test_delete_endpoint_idempotent_case_insensitive(self, endpoint_client, mock_config):
-        """Test idempotent delete behavior with case-insensitive error message.
-
-        Given:
-            - A valid tenant_id, user_id, and endpoint_id
-            - The plugin daemon returns "Record Not Found" error (different case)
-        When:
-            - delete_endpoint is called
-        Then:
-            - The method should return True (idempotent behavior)
-        """
-        # Arrange
-        tenant_id = "tenant-123"
-        user_id = "user-456"
-        endpoint_id = "endpoint-789"
-
-        mock_response = MagicMock()
-        mock_response.status_code = 200
-        mock_response.json.return_value = {
-            "code": -1,
-            "message": '{"error_type": "PluginDaemonInternalServerError", "message": "Record Not Found"}',
-        }
-
-        with patch("httpx.request", return_value=mock_response):
-            # Act
-            result = endpoint_client.delete_endpoint(
-                tenant_id=tenant_id,
-                user_id=user_id,
-                endpoint_id=endpoint_id,
-            )
-
-            # Assert - should still return True
-            assert result is True
-
-    def test_delete_endpoint_multiple_calls_idempotent(self, endpoint_client, mock_config):
-        """Test that multiple delete calls are idempotent.
-
-        Given:
-            - A valid tenant_id, user_id, and endpoint_id
-            - The first call succeeds
-            - Subsequent calls return "record not found"
-        When:
-            - delete_endpoint is called multiple times
-        Then:
-            - All calls should return True
-        """
-        # Arrange
-        tenant_id = "tenant-123"
-        user_id = "user-456"
-        endpoint_id = "endpoint-789"
-
-        # First call - success
-        mock_response_success = MagicMock()
-        mock_response_success.status_code = 200
-        mock_response_success.json.return_value = {
-            "code": 0,
-            "message": "success",
-            "data": True,
-        }
-
-        # Second call - record not found
-        mock_response_not_found = MagicMock()
-        mock_response_not_found.status_code = 200
-        mock_response_not_found.json.return_value = {
-            "code": -1,
-            "message": (
-                '{"error_type": "PluginDaemonInternalServerError", '
-                '"message": "failed to remove endpoint: record not found"}'
-            ),
-        }
-
-        with patch("httpx.request") as mock_request:
-            # Act - first call
-            mock_request.return_value = mock_response_success
-            result1 = endpoint_client.delete_endpoint(
-                tenant_id=tenant_id,
-                user_id=user_id,
-                endpoint_id=endpoint_id,
-            )
-
-            # Act - second call (already deleted)
-            mock_request.return_value = mock_response_not_found
-            result2 = endpoint_client.delete_endpoint(
-                tenant_id=tenant_id,
-                user_id=user_id,
-                endpoint_id=endpoint_id,
-            )
-
-            # Assert - both should return True
-            assert result1 is True
-            assert result2 is True
-
-    def test_delete_endpoint_non_idempotent_unauthorized_error(self, endpoint_client, mock_config):
-        """Test that authorization errors are not treated as idempotent.
-
-        Given:
-            - A valid tenant_id, user_id, and endpoint_id
-            - The plugin daemon returns an unauthorized error
-        When:
-            - delete_endpoint is called
-        Then:
-            - The method should raise the appropriate error (not return True)
-        """
-        # Arrange
-        tenant_id = "tenant-123"
-        user_id = "user-456"
-        endpoint_id = "endpoint-789"
-
-        mock_response = MagicMock()
-        mock_response.status_code = 200
-        mock_response.json.return_value = {
-            "code": -1,
-            "message": '{"error_type": "PluginDaemonUnauthorizedError", "message": "unauthorized access"}',
-        }
-
-        with patch("httpx.request", return_value=mock_response):
-            # Act & Assert
-            with pytest.raises(Exception) as exc_info:
-                endpoint_client.delete_endpoint(
-                    tenant_id=tenant_id,
-                    user_id=user_id,
-                    endpoint_id=endpoint_id,
-                )
-
-            # Assert - should not return True for unauthorized errors
-            assert exc_info.value.__class__.__name__ == "PluginDaemonUnauthorizedError"

api/tests/unit_tests/core/workflow/nodes/llm/test_first_token_timeout.py

@@ -1,395 +0,0 @@
-"""Tests for LLM Node first token timeout retry functionality."""
-
-import time
-from collections.abc import Generator
-from unittest import mock
-
-import pytest
-
-from core.model_runtime.entities.llm_entities import LLMResultChunk, LLMResultChunkDelta
-from core.model_runtime.entities.message_entities import AssistantPromptMessage
-from core.workflow.nodes.base.entities import RetryConfig
-from core.workflow.utils.generator_timeout import FirstTokenTimeoutError, with_first_token_timeout
-
-
-class TestRetryConfigFirstTokenTimeout:
-    """Test cases for RetryConfig first token timeout fields."""
-
-    def test_default_values(self):
-        """Test that first token timeout fields have correct default values."""
-        config = RetryConfig()
-
-        assert config.first_token_timeout == 0
-        assert config.has_first_token_timeout is False
-
-    def test_has_first_token_timeout_when_retry_enabled_and_positive(self):
-        """Test has_first_token_timeout returns True when retry enabled with positive timeout."""
-        config = RetryConfig(
-            retry_enabled=True,
-            first_token_timeout=3000,  # 3000ms = 3s
-        )
-
-        assert config.has_first_token_timeout is True
-        assert config.first_token_timeout_seconds == 3.0
-
-    def test_has_first_token_timeout_when_retry_disabled(self):
-        """Test has_first_token_timeout returns False when retry is disabled."""
-        config = RetryConfig(
-            retry_enabled=False,
-            first_token_timeout=60,
-        )
-
-        assert config.has_first_token_timeout is False
-
-    def test_has_first_token_timeout_when_zero_timeout(self):
-        """Test has_first_token_timeout returns False when timeout is 0."""
-        config = RetryConfig(
-            retry_enabled=True,
-            first_token_timeout=0,
-        )
-
-        assert config.has_first_token_timeout is False
-
-    def test_backward_compatibility(self):
-        """Test that existing workflows without first_token_timeout work correctly."""
-        old_config_data = {
-            "max_retries": 3,
-            "retry_interval": 1000,
-            "retry_enabled": True,
-        }
-
-        config = RetryConfig.model_validate(old_config_data)
-
-        assert config.max_retries == 3
-        assert config.retry_interval == 1000
-        assert config.retry_enabled is True
-        assert config.first_token_timeout == 0
-        # has_first_token_timeout is False because timeout is 0
-        assert config.has_first_token_timeout is False
-
-    def test_full_config_serialization(self):
-        """Test that full config can be serialized and deserialized."""
-        config = RetryConfig(
-            max_retries=5,
-            retry_interval=2000,
-            retry_enabled=True,
-            first_token_timeout=120,
-        )
-
-        config_dict = config.model_dump()
-        restored_config = RetryConfig.model_validate(config_dict)
-
-        assert restored_config.max_retries == 5
-        assert restored_config.retry_interval == 2000
-        assert restored_config.retry_enabled is True
-        assert restored_config.first_token_timeout == 120
-        assert restored_config.has_first_token_timeout is True
-
-
-class TestWithFirstTokenTimeout:
-    """Test cases for with_first_token_timeout function."""
-
-    @staticmethod
-    def _create_mock_chunk(text: str = "test") -> LLMResultChunk:
-        """Helper to create a mock LLMResultChunk."""
-        return LLMResultChunk(
-            model="test-model",
-            prompt_messages=[],
-            delta=LLMResultChunkDelta(
-                index=0,
-                message=AssistantPromptMessage(content=text),
-            ),
-        )
-
-    def test_first_token_arrives_within_timeout(self):
-        """Test that chunks are yielded normally when first token arrives in time."""
-
-        def mock_generator() -> Generator[LLMResultChunk, None, None]:
-            yield self._create_mock_chunk("Hello")
-            yield self._create_mock_chunk(" world")
-
-        wrapped = with_first_token_timeout(mock_generator(), timeout_seconds=10)
-        chunks = list(wrapped)
-
-        assert len(chunks) == 2
-
-    def test_first_token_timeout_raises_error(self, monkeypatch):
-        """Test that timeout error is raised when first token doesn't arrive in time."""
-        call_count = 0
-
-        def mock_monotonic():
-            nonlocal call_count
-            call_count += 1
-            # First call: start_time = 0
-            # Second call (when checking): current_time = 11 (exceeds 10 second timeout)
-            if call_count == 1:
-                return 0.0
-            return 11.0
-
-        monkeypatch.setattr(time, "monotonic", mock_monotonic)
-
-        def slow_generator() -> Generator[LLMResultChunk, None, None]:
-            # This chunk arrives "after timeout"
-            yield self._create_mock_chunk("Late token")
-
-        wrapped = with_first_token_timeout(slow_generator(), timeout_seconds=10)
-
-        with pytest.raises(FirstTokenTimeoutError) as exc_info:
-            list(wrapped)
-
-        # Error message shows milliseconds (10 seconds = 10000ms)
-        assert "10000ms" in str(exc_info.value)
-
-    def test_no_timeout_check_after_first_token(self, monkeypatch):
-        """Test that subsequent chunks are not subject to timeout after first token received."""
-        call_count = 0
-
-        def mock_monotonic():
-            nonlocal call_count
-            call_count += 1
-            if call_count == 1:
-                return 0.0  # start_time
-            elif call_count == 2:
-                return 5.0  # first token arrives at 5s (within 10s timeout)
-            else:
-                # Subsequent calls simulate long delays for remaining chunks
-                # These should NOT trigger timeout because first token already received
-                return 100.0 + call_count
-
-        monkeypatch.setattr(time, "monotonic", mock_monotonic)
-
-        def generator_with_slow_subsequent_chunks() -> Generator[LLMResultChunk, None, None]:
-            yield self._create_mock_chunk("First")
-            yield self._create_mock_chunk("Second")
-            yield self._create_mock_chunk("Third")
-
-        wrapped = with_first_token_timeout(
-            generator_with_slow_subsequent_chunks(),
-            timeout_seconds=10,
-        )
-
-        # Should not raise, even though "time" passes beyond timeout after first token
-        chunks = list(wrapped)
-        assert len(chunks) == 3
-
-    def test_empty_generator_no_error(self):
-        """Test that empty generator doesn't raise timeout error (no chunks to check)."""
-
-        def empty_generator() -> Generator[LLMResultChunk, None, None]:
-            return
-            yield  # unreachable, but makes this a generator
-
-        wrapped = with_first_token_timeout(empty_generator(), timeout_seconds=10)
-        chunks = list(wrapped)
-
-        assert chunks == []
-
-    def test_exact_timeout_boundary(self, monkeypatch):
-        """Test behavior at exact timeout boundary (should not raise when equal)."""
-        call_count = 0
-
-        def mock_monotonic():
-            nonlocal call_count
-            call_count += 1
-            if call_count == 1:
-                return 0.0
-            # Exactly at boundary: current_time - start_time = 10, timeout_seconds = 10
-            # Since we check > not >=, this should NOT raise
-            return 10.0
-
-        monkeypatch.setattr(time, "monotonic", mock_monotonic)
-
-        def generator() -> Generator[LLMResultChunk, None, None]:
-            yield self._create_mock_chunk("Token at boundary")
-
-        wrapped = with_first_token_timeout(generator(), timeout_seconds=10)
-
-        # Should not raise because 10 is not > 10
-        chunks = list(wrapped)
-        assert len(chunks) == 1
-
-    def test_just_over_timeout_boundary(self, monkeypatch):
-        """Test behavior just over timeout boundary (should raise)."""
-        call_count = 0
-
-        def mock_monotonic():
-            nonlocal call_count
-            call_count += 1
-            if call_count == 1:
-                return 0.0
-            # Just over boundary
-            return 10.001
-
-        monkeypatch.setattr(time, "monotonic", mock_monotonic)
-
-        def generator() -> Generator[LLMResultChunk, None, None]:
-            yield self._create_mock_chunk("Late token")
-
-        wrapped = with_first_token_timeout(generator(), timeout_seconds=10)
-
-        with pytest.raises(FirstTokenTimeoutError):
-            list(wrapped)
-
-
-class TestLLMNodeInvokeLLMWithTimeout:
-    """Test cases for LLMNode.invoke_llm with first_token_timeout parameter."""
-
-    def test_invoke_llm_without_timeout(self):
-        """Test invoke_llm works normally when first_token_timeout is None."""
-        from core.workflow.nodes.llm.node import LLMNode
-
-        with mock.patch.object(LLMNode, "handle_invoke_result") as mock_handle:
-            mock_handle.return_value = iter([])
-
-            # Mock model_instance.invoke_llm to return empty generator
-            mock_model_instance = mock.MagicMock()
-            mock_model_instance.invoke_llm.return_value = iter([])
-            mock_model_instance.model_type_instance.get_model_schema.return_value = mock.MagicMock()
-
-            mock_node_data_model = mock.MagicMock()
-            mock_node_data_model.completion_params = {}
-
-            result = LLMNode.invoke_llm(
-                node_data_model=mock_node_data_model,
-                model_instance=mock_model_instance,
-                prompt_messages=[],
-                user_id="test-user",
-                structured_output_enabled=False,
-                structured_output=None,
-                file_saver=mock.MagicMock(),
-                file_outputs=[],
-                node_id="test-node",
-                node_type=mock.MagicMock(),
-                first_token_timeout=None,  # No timeout
-            )
-
-            list(result)  # Consume generator
-            mock_handle.assert_called_once()
-
-    def test_invoke_llm_with_timeout_passes_to_model_instance(self):
-        """Test invoke_llm passes first_token_timeout to model_instance.invoke_llm."""
-        from core.workflow.nodes.llm.node import LLMNode
-
-        with mock.patch.object(LLMNode, "handle_invoke_result") as mock_handle:
-            mock_handle.return_value = iter([])
-
-            mock_model_instance = mock.MagicMock()
-            mock_model_instance.invoke_llm.return_value = iter([])
-            mock_model_instance.model_type_instance.get_model_schema.return_value = mock.MagicMock()
-
-            mock_node_data_model = mock.MagicMock()
-            mock_node_data_model.completion_params = {}
-
-            result = LLMNode.invoke_llm(
-                node_data_model=mock_node_data_model,
-                model_instance=mock_model_instance,
-                prompt_messages=[],
-                user_id="test-user",
-                structured_output_enabled=False,
-                structured_output=None,
-                file_saver=mock.MagicMock(),
-                file_outputs=[],
-                node_id="test-node",
-                node_type=mock.MagicMock(),
-                first_token_timeout=60,  # With timeout
-            )
-
-            list(result)  # Consume generator
-
-            # Verify model_instance.invoke_llm was called with first_token_timeout
-            mock_model_instance.invoke_llm.assert_called_once()
-            call_kwargs = mock_model_instance.invoke_llm.call_args.kwargs
-            assert call_kwargs.get("first_token_timeout") == 60
-
-    def test_invoke_llm_with_zero_timeout_passes_zero(self):
-        """Test invoke_llm passes zero timeout to model_instance."""
-        from core.workflow.nodes.llm.node import LLMNode
-
-        with mock.patch.object(LLMNode, "handle_invoke_result") as mock_handle:
-            mock_handle.return_value = iter([])
-
-            mock_model_instance = mock.MagicMock()
-            mock_model_instance.invoke_llm.return_value = iter([])
-            mock_model_instance.model_type_instance.get_model_schema.return_value = mock.MagicMock()
-
-            mock_node_data_model = mock.MagicMock()
-            mock_node_data_model.completion_params = {}
-
-            result = LLMNode.invoke_llm(
-                node_data_model=mock_node_data_model,
-                model_instance=mock_model_instance,
-                prompt_messages=[],
-                user_id="test-user",
-                structured_output_enabled=False,
-                structured_output=None,
-                file_saver=mock.MagicMock(),
-                file_outputs=[],
-                node_id="test-node",
-                node_type=mock.MagicMock(),
-                first_token_timeout=0,  # Zero timeout
-            )
-
-            list(result)  # Consume generator
-
-            # Verify model_instance.invoke_llm was called with zero timeout
-            mock_model_instance.invoke_llm.assert_called_once()
-            call_kwargs = mock_model_instance.invoke_llm.call_args.kwargs
-            assert call_kwargs.get("first_token_timeout") == 0
-
-
-class TestRetryConfigIntegration:
-    """Integration tests for RetryConfig with LLM node data."""
-
-    def test_retry_config_in_node_data(self):
-        """Test RetryConfig can be properly configured in LLMNodeData."""
-        from core.model_runtime.entities.llm_entities import LLMMode
-        from core.workflow.nodes.llm.entities import ContextConfig, LLMNodeData, ModelConfig
-
-        node_data = LLMNodeData(
-            title="Test LLM",
-            model=ModelConfig(
-                provider="openai",
-                name="gpt-4",
-                mode=LLMMode.CHAT,
-                completion_params={},
-            ),
-            prompt_template=[],
-            context=ContextConfig(enabled=False),
-            structured_output_enabled=False,
-            retry_config=RetryConfig(
-                max_retries=3,
-                retry_interval=1000,
-                retry_enabled=True,
-                first_token_timeout=3000,  # 3000ms = 3s
-            ),
-        )
-
-        assert node_data.retry_config.max_retries == 3
-        assert node_data.retry_config.retry_enabled is True
-        assert node_data.retry_config.first_token_timeout == 3000
-        assert node_data.retry_config.first_token_timeout_seconds == 3.0
-        assert node_data.retry_config.has_first_token_timeout is True
-
-    def test_default_retry_config_in_node_data(self):
-        """Test default RetryConfig in LLMNodeData."""
-        from core.model_runtime.entities.llm_entities import LLMMode
-        from core.workflow.nodes.llm.entities import ContextConfig, LLMNodeData, ModelConfig
-
-        node_data = LLMNodeData(
-            title="Test LLM",
-            model=ModelConfig(
-                provider="openai",
-                name="gpt-4",
-                mode=LLMMode.CHAT,
-                completion_params={},
-            ),
-            prompt_template=[],
-            context=ContextConfig(enabled=False),
-            structured_output_enabled=False,
-        )
-
-        # Should have default RetryConfig
-        assert node_data.retry_config.max_retries == 0
-        assert node_data.retry_config.retry_enabled is False
-        assert node_data.retry_config.first_token_timeout == 0
-        assert node_data.retry_config.has_first_token_timeout is False

api/tests/unit_tests/libs/test_smtp_client.py

@@ -1,4 +1,4 @@
-from unittest.mock import ANY, MagicMock, patch
+from unittest.mock import MagicMock, patch
 
 import pytest
 
@@ -17,7 +17,7 @@ def test_smtp_plain_success(mock_smtp_cls: MagicMock):
     client = SMTPClient(server="smtp.example.com", port=25, username="", password="", _from="noreply@example.com")
     client.send(_mail())
 
-    mock_smtp_cls.assert_called_once_with("smtp.example.com", 25, timeout=10, local_hostname=ANY)
+    mock_smtp_cls.assert_called_once_with("smtp.example.com", 25, timeout=10)
     mock_smtp.sendmail.assert_called_once()
     mock_smtp.quit.assert_called_once()
 
@@ -38,7 +38,7 @@ def test_smtp_tls_opportunistic_success(mock_smtp_cls: MagicMock):
     )
     client.send(_mail())
 
-    mock_smtp_cls.assert_called_once_with("smtp.example.com", 587, timeout=10, local_hostname=ANY)
+    mock_smtp_cls.assert_called_once_with("smtp.example.com", 587, timeout=10)
     assert mock_smtp.ehlo.call_count == 2
     mock_smtp.starttls.assert_called_once()
     mock_smtp.login.assert_called_once_with("user", "pass")

api/tests/unit_tests/tasks/test_mail_send_task.py

@@ -9,7 +9,7 @@ This module tests the mail sending functionality including:
 """
 
 import smtplib
-from unittest.mock import ANY, MagicMock, patch
+from unittest.mock import MagicMock, patch
 
 import pytest
 
@@ -151,7 +151,7 @@ class TestSMTPIntegration:
         client.send(mail_data)
 
         # Assert
-        mock_smtp_ssl.assert_called_once_with("smtp.example.com", 465, timeout=10, local_hostname=ANY)
+        mock_smtp_ssl.assert_called_once_with("smtp.example.com", 465, timeout=10)
         mock_server.login.assert_called_once_with("user@example.com", "password123")
         mock_server.sendmail.assert_called_once()
         mock_server.quit.assert_called_once()
@@ -181,7 +181,7 @@ class TestSMTPIntegration:
         client.send(mail_data)
 
         # Assert
-        mock_smtp.assert_called_once_with("smtp.example.com", 587, timeout=10, local_hostname=ANY)
+        mock_smtp.assert_called_once_with("smtp.example.com", 587, timeout=10)
         mock_server.ehlo.assert_called()
         mock_server.starttls.assert_called_once()
         assert mock_server.ehlo.call_count == 2  # Before and after STARTTLS
@@ -213,7 +213,7 @@ class TestSMTPIntegration:
         client.send(mail_data)
 
         # Assert
-        mock_smtp.assert_called_once_with("smtp.example.com", 25, timeout=10, local_hostname=ANY)
+        mock_smtp.assert_called_once_with("smtp.example.com", 25, timeout=10)
         mock_server.login.assert_called_once()
         mock_server.sendmail.assert_called_once()
         mock_server.quit.assert_called_once()

docker/.env.example

@@ -968,8 +968,6 @@ SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_USE_TLS=true
 SMTP_OPPORTUNISTIC_TLS=false
-# Optional: override the local hostname used for SMTP HELO/EHLO
-SMTP_LOCAL_HOSTNAME=
 
 # Sendgid configuration
 SENDGRID_API_KEY=

docker/docker-compose.yaml

@@ -425,7 +425,6 @@ x-shared-env: &shared-api-worker-env
   SMTP_PASSWORD: ${SMTP_PASSWORD:-}
   SMTP_USE_TLS: ${SMTP_USE_TLS:-true}
   SMTP_OPPORTUNISTIC_TLS: ${SMTP_OPPORTUNISTIC_TLS:-false}
-  SMTP_LOCAL_HOSTNAME: ${SMTP_LOCAL_HOSTNAME:-}
   SENDGRID_API_KEY: ${SENDGRID_API_KEY:-}
   INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-4000}
   INVITE_EXPIRY_HOURS: ${INVITE_EXPIRY_HOURS:-72}

web/.nvmrc

@@ -1 +1 @@
-24
+22.21.1

web/Dockerfile

@@ -1,5 +1,5 @@
 # base image
-FROM node:24-alpine AS base
+FROM node:22.21.1-alpine3.23 AS base
 LABEL maintainer="takatost@gmail.com"
 
 # if you located in China, you can use aliyun mirror to speed up

web/README.md

@@ -8,8 +8,8 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 Before starting the web frontend service, please make sure the following environment is ready.
 
-- [Node.js](https://nodejs.org)
-- [pnpm](https://pnpm.io)
+- [Node.js](https://nodejs.org) >= v22.11.x
+- [pnpm](https://pnpm.io) v10.x
 
 > [!TIP]
 > It is recommended to install and enable Corepack to manage package manager versions automatically:

web/app/(shareLayout)/webapp-signin/check-code/page.tsx

@@ -66,9 +66,7 @@ export default function CheckCode() {
       setIsLoading(true)
       const ret = await webAppEmailLoginWithCode({ email, code: encryptVerificationCode(code), token })
       if (ret.result === 'success') {
-        if (ret?.data?.access_token) {
-          setWebAppAccessToken(ret.data.access_token)
-        }
+        setWebAppAccessToken(ret.data.access_token)
         const { access_token } = await fetchAccessToken({
           appCode: appCode!,
           userId: embeddedUserId || undefined,

web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx

@@ -82,9 +82,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
         body: loginData,
       })
       if (res.result === 'success') {
-        if (res?.data?.access_token) {
-          setWebAppAccessToken(res.data.access_token)
-        }
+        setWebAppAccessToken(res.data.access_token)
 
         const { access_token } = await fetchAccessToken({
           appCode: appCode!,

web/app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx

@@ -27,9 +27,7 @@ vi.mock('@/service/billing', () => ({
 
 vi.mock('@/service/client', () => ({
   consoleClient: {
-    billing: {
-      invoices: vi.fn(),
-    },
+    billingUrl: vi.fn(),
   },
 }))
 
@@ -45,7 +43,7 @@ vi.mock('../../assets', () => ({
 
 const mockUseAppContext = useAppContext as Mock
 const mockUseAsyncWindowOpen = useAsyncWindowOpen as Mock
-const mockBillingInvoices = consoleClient.billing.invoices as Mock
+const mockBillingUrl = consoleClient.billingUrl as Mock
 const mockFetchSubscriptionUrls = fetchSubscriptionUrls as Mock
 const mockToastNotify = Toast.notify as Mock
 
@@ -77,7 +75,7 @@ beforeEach(() => {
   vi.clearAllMocks()
   mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
   mockUseAsyncWindowOpen.mockReturnValue(vi.fn(async open => await open()))
-  mockBillingInvoices.mockResolvedValue({ url: 'https://billing.example' })
+  mockBillingUrl.mockResolvedValue({ url: 'https://billing.example' })
   mockFetchSubscriptionUrls.mockResolvedValue({ url: 'https://subscription.example' })
   assignedHref = ''
 })
@@ -151,7 +149,7 @@ describe('CloudPlanItem', () => {
         type: 'error',
         message: 'billing.buyPermissionDeniedTip',
       }))
-      expect(mockBillingInvoices).not.toHaveBeenCalled()
+      expect(mockBillingUrl).not.toHaveBeenCalled()
     })
 
     it('should open billing portal when upgrading current paid plan', async () => {
@@ -170,7 +168,7 @@ describe('CloudPlanItem', () => {
       fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' }))
 
       await waitFor(() => {
-        expect(mockBillingInvoices).toHaveBeenCalledTimes(1)
+        expect(mockBillingUrl).toHaveBeenCalledTimes(1)
       })
       expect(openWindow).toHaveBeenCalledTimes(1)
     })

web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx

@@ -77,7 +77,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
     try {
       if (isCurrentPaidPlan) {
         await openAsyncWindow(async () => {
-          const res = await consoleClient.billing.invoices()
+          const res = await consoleClient.billingUrl()
           if (res.url)
             return res.url
           throw new Error('Failed to open billing page')

web/app/components/datasets/common/document-picker/preview-document-picker.spec.tsx

@@ -362,18 +362,6 @@ describe('PreviewDocumentPicker', () => {
       expect(screen.getByText('--')).toBeInTheDocument()
     })
 
-    it('should render when value prop is omitted (optional)', () => {
-      const files = createMockDocumentList(2)
-      const onChange = vi.fn()
-      // Do not pass `value` at all to verify optional behavior
-      render(<PreviewDocumentPicker files={files} onChange={onChange} />)
-
-      // Renders placeholder for missing name
-      expect(screen.getByText('--')).toBeInTheDocument()
-      // Portal wrapper renders
-      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
-    })
-
     it('should handle empty files array', () => {
       renderComponent({ files: [] })
 

web/app/components/datasets/common/document-picker/preview-document-picker.tsx

@@ -18,7 +18,7 @@ import DocumentList from './document-list'
 
 type Props = {
   className?: string
-  value?: DocumentItem
+  value: DocumentItem
   files: DocumentItem[]
   onChange: (value: DocumentItem) => void
 }
@@ -30,8 +30,7 @@ const PreviewDocumentPicker: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const name = value?.name || ''
-  const extension = value?.extension
+  const { name, extension } = value
 
   const [open, {
     set: setOpen,

web/app/components/datasets/documents/components/documents-header.tsx

@@ -1,201 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import type { Item } from '@/app/components/base/select'
-import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '@/app/components/datasets/metadata/types'
-import type { SortType } from '@/service/datasets'
-import { PlusIcon } from '@heroicons/react/24/solid'
-import { RiDraftLine, RiExternalLinkLine } from '@remixicon/react'
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import Chip from '@/app/components/base/chip'
-import Input from '@/app/components/base/input'
-import Sort from '@/app/components/base/sort'
-import AutoDisabledDocument from '@/app/components/datasets/common/document-status-with-action/auto-disabled-document'
-import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
-import StatusWithAction from '@/app/components/datasets/common/document-status-with-action/status-with-action'
-import DatasetMetadataDrawer from '@/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer'
-import { useDocLink } from '@/context/i18n'
-import { DataSourceType } from '@/models/datasets'
-import { useIndexStatus } from '../status-item/hooks'
-
-type DocumentsHeaderProps = {
-  // Dataset info
-  datasetId: string
-  dataSourceType?: DataSourceType
-  embeddingAvailable: boolean
-  isFreePlan: boolean
-
-  // Filter & sort
-  statusFilterValue: string
-  sortValue: SortType
-  inputValue: string
-  onStatusFilterChange: (value: string) => void
-  onStatusFilterClear: () => void
-  onSortChange: (value: string) => void
-  onInputChange: (value: string) => void
-
-  // Metadata modal
-  isShowEditMetadataModal: boolean
-  showEditMetadataModal: () => void
-  hideEditMetadataModal: () => void
-  datasetMetaData?: MetadataItemWithValueLength[]
-  builtInMetaData?: BuiltInMetadataItem[]
-  builtInEnabled: boolean
-  onAddMetaData: (payload: BuiltInMetadataItem) => Promise<void>
-  onRenameMetaData: (payload: MetadataItemWithValueLength) => Promise<void>
-  onDeleteMetaData: (metaDataId: string) => Promise<void>
-  onBuiltInEnabledChange: (enabled: boolean) => void
-
-  // Actions
-  onAddDocument: () => void
-}
-
-const DocumentsHeader: FC<DocumentsHeaderProps> = ({
-  datasetId,
-  dataSourceType,
-  embeddingAvailable,
-  isFreePlan,
-  statusFilterValue,
-  sortValue,
-  inputValue,
-  onStatusFilterChange,
-  onStatusFilterClear,
-  onSortChange,
-  onInputChange,
-  isShowEditMetadataModal,
-  showEditMetadataModal,
-  hideEditMetadataModal,
-  datasetMetaData,
-  builtInMetaData,
-  builtInEnabled,
-  onAddMetaData,
-  onRenameMetaData,
-  onDeleteMetaData,
-  onBuiltInEnabledChange,
-  onAddDocument,
-}) => {
-  const { t } = useTranslation()
-  const docLink = useDocLink()
-  const DOC_INDEX_STATUS_MAP = useIndexStatus()
-
-  const isDataSourceNotion = dataSourceType === DataSourceType.NOTION
-  const isDataSourceWeb = dataSourceType === DataSourceType.WEB
-
-  const statusFilterItems: Item[] = useMemo(() => [
-    { value: 'all', name: t('list.index.all', { ns: 'datasetDocuments' }) as string },
-    { value: 'queuing', name: DOC_INDEX_STATUS_MAP.queuing.text },
-    { value: 'indexing', name: DOC_INDEX_STATUS_MAP.indexing.text },
-    { value: 'paused', name: DOC_INDEX_STATUS_MAP.paused.text },
-    { value: 'error', name: DOC_INDEX_STATUS_MAP.error.text },
-    { value: 'available', name: DOC_INDEX_STATUS_MAP.available.text },
-    { value: 'enabled', name: DOC_INDEX_STATUS_MAP.enabled.text },
-    { value: 'disabled', name: DOC_INDEX_STATUS_MAP.disabled.text },
-    { value: 'archived', name: DOC_INDEX_STATUS_MAP.archived.text },
-  ], [DOC_INDEX_STATUS_MAP, t])
-
-  const sortItems: Item[] = useMemo(() => [
-    { value: 'created_at', name: t('list.sort.uploadTime', { ns: 'datasetDocuments' }) as string },
-    { value: 'hit_count', name: t('list.sort.hitCount', { ns: 'datasetDocuments' }) as string },
-  ], [t])
-
-  // Determine add button text based on data source type
-  const addButtonText = useMemo(() => {
-    if (isDataSourceNotion)
-      return t('list.addPages', { ns: 'datasetDocuments' })
-    if (isDataSourceWeb)
-      return t('list.addUrl', { ns: 'datasetDocuments' })
-    return t('list.addFile', { ns: 'datasetDocuments' })
-  }, [isDataSourceNotion, isDataSourceWeb, t])
-
-  return (
-    <>
-      {/* Title section */}
-      <div className="flex flex-col justify-center gap-1 px-6 pt-4">
-        <h1 className="text-base font-semibold text-text-primary">
-          {t('list.title', { ns: 'datasetDocuments' })}
-        </h1>
-        <div className="flex items-center space-x-0.5 text-sm font-normal text-text-tertiary">
-          <span>{t('list.desc', { ns: 'datasetDocuments' })}</span>
-          <a
-            className="flex items-center text-text-accent"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={docLink('/guides/knowledge-base/integrate-knowledge-within-application')}
-          >
-            <span>{t('list.learnMore', { ns: 'datasetDocuments' })}</span>
-            <RiExternalLinkLine className="h-3 w-3" />
-          </a>
-        </div>
-      </div>
-
-      {/* Toolbar section */}
-      <div className="flex flex-wrap items-center justify-between px-6 pt-4">
-        {/* Left: Filters */}
-        <div className="flex items-center gap-2">
-          <Chip
-            className="w-[160px]"
-            showLeftIcon={false}
-            value={statusFilterValue}
-            items={statusFilterItems}
-            onSelect={item => onStatusFilterChange(item?.value ? String(item.value) : '')}
-            onClear={onStatusFilterClear}
-          />
-          <Input
-            showLeftIcon
-            showClearIcon
-            wrapperClassName="!w-[200px]"
-            value={inputValue}
-            onChange={e => onInputChange(e.target.value)}
-            onClear={() => onInputChange('')}
-          />
-          <div className="h-3.5 w-px bg-divider-regular"></div>
-          <Sort
-            order={sortValue.startsWith('-') ? '-' : ''}
-            value={sortValue.replace('-', '')}
-            items={sortItems}
-            onSelect={value => onSortChange(String(value))}
-          />
-        </div>
-
-        {/* Right: Actions */}
-        <div className="flex !h-8 items-center justify-center gap-2">
-          {!isFreePlan && <AutoDisabledDocument datasetId={datasetId} />}
-          <IndexFailed datasetId={datasetId} />
-          {!embeddingAvailable && (
-            <StatusWithAction
-              type="warning"
-              description={t('embeddingModelNotAvailable', { ns: 'dataset' })}
-            />
-          )}
-          {embeddingAvailable && (
-            <Button variant="secondary" className="shrink-0" onClick={showEditMetadataModal}>
-              <RiDraftLine className="mr-1 size-4" />
-              {t('metadata.metadata', { ns: 'dataset' })}
-            </Button>
-          )}
-          {isShowEditMetadataModal && (
-            <DatasetMetadataDrawer
-              userMetadata={datasetMetaData ?? []}
-              onClose={hideEditMetadataModal}
-              onAdd={onAddMetaData}
-              onRename={onRenameMetaData}
-              onRemove={onDeleteMetaData}
-              builtInMetadata={builtInMetaData ?? []}
-              isBuiltInEnabled={builtInEnabled}
-              onIsBuiltInEnabledChange={onBuiltInEnabledChange}
-            />
-          )}
-          {embeddingAvailable && (
-            <Button variant="primary" onClick={onAddDocument} className="shrink-0">
-              <PlusIcon className="mr-2 h-4 w-4 stroke-current" />
-              {addButtonText}
-            </Button>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default DocumentsHeader

web/app/components/datasets/documents/components/empty-element.tsx

@@ -1,41 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import { PlusIcon } from '@heroicons/react/24/solid'
-import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import s from '../style.module.css'
-import { FolderPlusIcon, NotionIcon, ThreeDotsIcon } from './icons'
-
-type EmptyElementProps = {
-  canAdd: boolean
-  onClick: () => void
-  type?: 'upload' | 'sync'
-}
-
-const EmptyElement: FC<EmptyElementProps> = ({ canAdd = true, onClick, type = 'upload' }) => {
-  const { t } = useTranslation()
-  return (
-    <div className={s.emptyWrapper}>
-      <div className={s.emptyElement}>
-        <div className={s.emptySymbolIconWrapper}>
-          {type === 'upload' ? <FolderPlusIcon /> : <NotionIcon />}
-        </div>
-        <span className={s.emptyTitle}>
-          {t('list.empty.title', { ns: 'datasetDocuments' })}
-          <ThreeDotsIcon className="relative -left-1.5 -top-3 inline" />
-        </span>
-        <div className={s.emptyTip}>
-          {t(`list.empty.${type}.tip`, { ns: 'datasetDocuments' })}
-        </div>
-        {type === 'upload' && canAdd && (
-          <Button onClick={onClick} className={s.addFileBtn} variant="secondary-accent">
-            <PlusIcon className={s.plusIcon} />
-            {t('list.addFile', { ns: 'datasetDocuments' })}
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default EmptyElement

web/app/components/datasets/documents/components/icons.tsx

@@ -1,34 +0,0 @@
-import type * as React from 'react'
-
-export const FolderPlusIcon = ({ className }: React.SVGProps<SVGElement>) => {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
-      <path d="M10.8332 5.83333L9.90355 3.9741C9.63601 3.439 9.50222 3.17144 9.30265 2.97597C9.12615 2.80311 8.91344 2.67164 8.6799 2.59109C8.41581 2.5 8.11668 2.5 7.51841 2.5H4.33317C3.39975 2.5 2.93304 2.5 2.57652 2.68166C2.26292 2.84144 2.00795 3.09641 1.84816 3.41002C1.6665 3.76654 1.6665 4.23325 1.6665 5.16667V5.83333M1.6665 5.83333H14.3332C15.7333 5.83333 16.4334 5.83333 16.9681 6.10582C17.4386 6.3455 17.821 6.72795 18.0607 7.19836C18.3332 7.73314 18.3332 8.4332 18.3332 9.83333V13.5C18.3332 14.9001 18.3332 15.6002 18.0607 16.135C17.821 16.6054 17.4386 16.9878 16.9681 17.2275C16.4334 17.5 15.7333 17.5 14.3332 17.5H5.6665C4.26637 17.5 3.56631 17.5 3.03153 17.2275C2.56112 16.9878 2.17867 16.6054 1.93899 16.135C1.6665 15.6002 1.6665 14.9001 1.6665 13.5V5.83333ZM9.99984 14.1667V9.16667M7.49984 11.6667H12.4998" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  )
-}
-
-export const ThreeDotsIcon = ({ className }: React.SVGProps<SVGElement>) => {
-  return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
-      <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  )
-}
-
-export const NotionIcon = ({ className }: React.SVGProps<SVGElement>) => {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
-      <g clipPath="url(#clip0_2164_11263)">
-        <path fillRule="evenodd" clipRule="evenodd" d="M3.5725 18.2611L1.4229 15.5832C0.905706 14.9389 0.625 14.1466 0.625 13.3312V3.63437C0.625 2.4129 1.60224 1.39936 2.86295 1.31328L12.8326 0.632614C13.5569 0.583164 14.2768 0.775682 14.8717 1.17794L18.3745 3.5462C19.0015 3.97012 19.375 4.66312 19.375 5.40266V16.427C19.375 17.6223 18.4141 18.6121 17.1798 18.688L6.11458 19.3692C5.12958 19.4298 4.17749 19.0148 3.5725 18.2611Z" fill="white" />
-        <path d="M7.03006 8.48669V8.35974C7.03006 8.03794 7.28779 7.77104 7.61997 7.74886L10.0396 7.58733L13.3857 12.5147V8.19009L12.5244 8.07528V8.01498C12.5244 7.68939 12.788 7.42074 13.1244 7.4035L15.326 7.29073V7.60755C15.326 7.75628 15.2154 7.88349 15.0638 7.90913L14.534 7.99874V15.0023L13.8691 15.231C13.3136 15.422 12.6952 15.2175 12.3772 14.7377L9.12879 9.83574V14.5144L10.1287 14.7057L10.1147 14.7985C10.0711 15.089 9.82028 15.3087 9.51687 15.3222L7.03006 15.4329C6.99718 15.1205 7.23132 14.841 7.55431 14.807L7.88143 14.7727V8.53453L7.03006 8.48669Z" fill="black" />
-        <path fillRule="evenodd" clipRule="evenodd" d="M12.9218 1.85424L2.95217 2.53491C2.35499 2.57568 1.89209 3.05578 1.89209 3.63437V13.3312C1.89209 13.8748 2.07923 14.403 2.42402 14.8325L4.57362 17.5104C4.92117 17.9434 5.46812 18.1818 6.03397 18.147L17.0991 17.4658C17.6663 17.4309 18.1078 16.9762 18.1078 16.427V5.40266C18.1078 5.06287 17.9362 4.74447 17.6481 4.54969L14.1453 2.18143C13.7883 1.94008 13.3564 1.82457 12.9218 1.85424ZM3.44654 3.78562C3.30788 3.68296 3.37387 3.46909 3.54806 3.4566L12.9889 2.77944C13.2897 2.75787 13.5886 2.8407 13.8318 3.01305L15.7261 4.35508C15.798 4.40603 15.7642 4.51602 15.6752 4.52086L5.67742 5.0646C5.37485 5.08106 5.0762 4.99217 4.83563 4.81406L3.44654 3.78562ZM5.20848 6.76919C5.20848 6.4444 5.47088 6.1761 5.80642 6.15783L16.3769 5.58216C16.7039 5.56435 16.9792 5.81583 16.9792 6.13239V15.6783C16.9792 16.0025 16.7177 16.2705 16.3829 16.2896L5.8793 16.8872C5.51537 16.9079 5.20848 16.6283 5.20848 16.2759V6.76919Z" fill="black" />
-      </g>
-      <defs>
-        <clipPath id="clip0_2164_11263">
-          <rect width="20" height="20" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}

web/app/components/datasets/documents/create-from-pipeline/hooks.ts

@@ -1,12 +1,69 @@
+import type { DataSourceOption } from '@/app/components/rag-pipeline/components/panel/test-run/types'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import type { Node } from '@/app/components/workflow/types'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace } from '@/models/common'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
+import { BlockEnum } from '@/app/components/workflow/types'
 import { CrawlStep } from '@/models/datasets'
-import { useDataSourceStore, useDataSourceStoreWithSelector } from '../data-source/store'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from './data-source/store'
+import { AddDocumentsStep } from './types'
+
+export const useAddDocumentsSteps = () => {
+  const { t } = useTranslation()
+  const [currentStep, setCurrentStep] = useState(1)
+
+  const handleNextStep = useCallback(() => {
+    setCurrentStep(preStep => preStep + 1)
+  }, [])
+
+  const handleBackStep = useCallback(() => {
+    setCurrentStep(preStep => preStep - 1)
+  }, [])
+
+  const steps = [
+    {
+      label: t('addDocuments.steps.chooseDatasource', { ns: 'datasetPipeline' }),
+      value: AddDocumentsStep.dataSource,
+    },
+    {
+      label: t('addDocuments.steps.processDocuments', { ns: 'datasetPipeline' }),
+      value: AddDocumentsStep.processDocuments,
+    },
+    {
+      label: t('addDocuments.steps.processingDocuments', { ns: 'datasetPipeline' }),
+      value: AddDocumentsStep.processingDocuments,
+    },
+  ]
+
+  return {
+    steps,
+    currentStep,
+    handleNextStep,
+    handleBackStep,
+  }
+}
+
+export const useDatasourceOptions = (pipelineNodes: Node<DataSourceNodeType>[]) => {
+  const datasourceNodes = pipelineNodes.filter(node => node.data.type === BlockEnum.DataSource)
+
+  const options = useMemo(() => {
+    const options: DataSourceOption[] = []
+    datasourceNodes.forEach((node) => {
+      const label = node.data.title
+      options.push({
+        label,
+        value: node.id,
+        data: node.data,
+      })
+    })
+    return options
+  }, [datasourceNodes])
+
+  return options
+}
 
-/**
- * Hook for local file datasource store operations
- */
 export const useLocalFile = () => {
   const {
     localFileList,
@@ -32,9 +89,6 @@ export const useLocalFile = () => {
   }
 }
 
-/**
- * Hook for online document datasource store operations
- */
 export const useOnlineDocument = () => {
   const {
     documentsData,
@@ -93,9 +147,6 @@ export const useOnlineDocument = () => {
   }
 }
 
-/**
- * Hook for website crawl datasource store operations
- */
 export const useWebsiteCrawl = () => {
   const {
     websitePages,
@@ -135,9 +186,6 @@ export const useWebsiteCrawl = () => {
   }
 }
 
-/**
- * Hook for online drive datasource store operations
- */
 export const useOnlineDrive = () => {
   const {
     onlineDriveFileList,

web/app/components/datasets/documents/create-from-pipeline/hooks/index.ts

@@ -1,5 +0,0 @@
-export { useAddDocumentsSteps } from './use-add-documents-steps'
-export { useDatasourceActions } from './use-datasource-actions'
-export { useDatasourceOptions } from './use-datasource-options'
-export { useLocalFile, useOnlineDocument, useOnlineDrive, useWebsiteCrawl } from './use-datasource-store'
-export { useDatasourceUIState } from './use-datasource-ui-state'

web/app/components/datasets/documents/create-from-pipeline/hooks/use-add-documents-steps.ts

@@ -1,41 +0,0 @@
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { AddDocumentsStep } from '../types'
-
-/**
- * Hook for managing add documents wizard steps
- */
-export const useAddDocumentsSteps = () => {
-  const { t } = useTranslation()
-  const [currentStep, setCurrentStep] = useState(1)
-
-  const handleNextStep = useCallback(() => {
-    setCurrentStep(preStep => preStep + 1)
-  }, [])
-
-  const handleBackStep = useCallback(() => {
-    setCurrentStep(preStep => preStep - 1)
-  }, [])
-
-  const steps = [
-    {
-      label: t('addDocuments.steps.chooseDatasource', { ns: 'datasetPipeline' }),
-      value: AddDocumentsStep.dataSource,
-    },
-    {
-      label: t('addDocuments.steps.processDocuments', { ns: 'datasetPipeline' }),
-      value: AddDocumentsStep.processDocuments,
-    },
-    {
-      label: t('addDocuments.steps.processingDocuments', { ns: 'datasetPipeline' }),
-      value: AddDocumentsStep.processingDocuments,
-    },
-  ]
-
-  return {
-    steps,
-    currentStep,
-    handleNextStep,
-    handleBackStep,
-  }
-}

web/app/components/datasets/documents/create-from-pipeline/hooks/use-datasource-actions.ts

@@ -1,321 +0,0 @@
-import type { StoreApi } from 'zustand'
-import type { DataSourceShape } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
-import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
-import type { DataSourceNotionPageMap, NotionPage } from '@/models/common'
-import type { CrawlResultItem, DocumentItem, CustomFile as File, FileIndexingEstimateResponse } from '@/models/datasets'
-import type {
-  OnlineDriveFile,
-  PublishedPipelineRunPreviewResponse,
-  PublishedPipelineRunResponse,
-} from '@/models/pipeline'
-import { useCallback, useRef } from 'react'
-import { trackEvent } from '@/app/components/base/amplitude'
-import { DatasourceType } from '@/models/pipeline'
-import { useRunPublishedPipeline } from '@/service/use-pipeline'
-import {
-  buildLocalFileDatasourceInfo,
-  buildOnlineDocumentDatasourceInfo,
-  buildOnlineDriveDatasourceInfo,
-  buildWebsiteCrawlDatasourceInfo,
-} from '../utils/datasource-info-builder'
-
-type DatasourceActionsParams = {
-  datasource: Datasource | undefined
-  datasourceType: string | undefined
-  pipelineId: string | undefined
-  dataSourceStore: StoreApi<DataSourceShape>
-  setEstimateData: (data: FileIndexingEstimateResponse | undefined) => void
-  setBatchId: (id: string) => void
-  setDocuments: (docs: PublishedPipelineRunResponse['documents']) => void
-  handleNextStep: () => void
-  PagesMapAndSelectedPagesId: DataSourceNotionPageMap
-  currentWorkspacePages: { page_id: string }[] | undefined
-  clearOnlineDocumentData: () => void
-  clearWebsiteCrawlData: () => void
-  clearOnlineDriveData: () => void
-  setDatasource: (ds: Datasource) => void
-}
-
-/**
- * Hook for datasource-related actions (preview, process, etc.)
- */
-export const useDatasourceActions = ({
-  datasource,
-  datasourceType,
-  pipelineId,
-  dataSourceStore,
-  setEstimateData,
-  setBatchId,
-  setDocuments,
-  handleNextStep,
-  PagesMapAndSelectedPagesId,
-  currentWorkspacePages,
-  clearOnlineDocumentData,
-  clearWebsiteCrawlData,
-  clearOnlineDriveData,
-  setDatasource,
-}: DatasourceActionsParams) => {
-  const isPreview = useRef(false)
-  const formRef = useRef<{ submit: () => void } | null>(null)
-
-  const { mutateAsync: runPublishedPipeline, isIdle, isPending } = useRunPublishedPipeline()
-
-  // Build datasource info for preview (single item)
-  const buildPreviewDatasourceInfo = useCallback(() => {
-    const {
-      previewLocalFileRef,
-      previewOnlineDocumentRef,
-      previewWebsitePageRef,
-      previewOnlineDriveFileRef,
-      currentCredentialId,
-      bucket,
-    } = dataSourceStore.getState()
-
-    const datasourceInfoList: Record<string, unknown>[] = []
-
-    if (datasourceType === DatasourceType.localFile && previewLocalFileRef.current) {
-      datasourceInfoList.push(buildLocalFileDatasourceInfo(
-        previewLocalFileRef.current as File,
-        currentCredentialId,
-      ))
-    }
-
-    if (datasourceType === DatasourceType.onlineDocument && previewOnlineDocumentRef.current) {
-      datasourceInfoList.push(buildOnlineDocumentDatasourceInfo(
-        previewOnlineDocumentRef.current,
-        currentCredentialId,
-      ))
-    }
-
-    if (datasourceType === DatasourceType.websiteCrawl && previewWebsitePageRef.current) {
-      datasourceInfoList.push(buildWebsiteCrawlDatasourceInfo(
-        previewWebsitePageRef.current,
-        currentCredentialId,
-      ))
-    }
-
-    if (datasourceType === DatasourceType.onlineDrive && previewOnlineDriveFileRef.current) {
-      datasourceInfoList.push(buildOnlineDriveDatasourceInfo(
-        previewOnlineDriveFileRef.current,
-        bucket,
-        currentCredentialId,
-      ))
-    }
-
-    return datasourceInfoList
-  }, [dataSourceStore, datasourceType])
-
-  // Build datasource info for processing (all items)
-  const buildProcessDatasourceInfo = useCallback(() => {
-    const {
-      currentCredentialId,
-      localFileList,
-      onlineDocuments,
-      websitePages,
-      bucket,
-      selectedFileIds,
-      onlineDriveFileList,
-    } = dataSourceStore.getState()
-
-    const datasourceInfoList: Record<string, unknown>[] = []
-
-    if (datasourceType === DatasourceType.localFile) {
-      localFileList.forEach((file) => {
-        datasourceInfoList.push(buildLocalFileDatasourceInfo(file.file, currentCredentialId))
-      })
-    }
-
-    if (datasourceType === DatasourceType.onlineDocument) {
-      onlineDocuments.forEach((page) => {
-        datasourceInfoList.push(buildOnlineDocumentDatasourceInfo(page, currentCredentialId))
-      })
-    }
-
-    if (datasourceType === DatasourceType.websiteCrawl) {
-      websitePages.forEach((page) => {
-        datasourceInfoList.push(buildWebsiteCrawlDatasourceInfo(page, currentCredentialId))
-      })
-    }
-
-    if (datasourceType === DatasourceType.onlineDrive) {
-      selectedFileIds.forEach((id) => {
-        const file = onlineDriveFileList.find(f => f.id === id)
-        if (file)
-          datasourceInfoList.push(buildOnlineDriveDatasourceInfo(file, bucket, currentCredentialId))
-      })
-    }
-
-    return datasourceInfoList
-  }, [dataSourceStore, datasourceType])
-
-  // Handle chunk preview
-  const handlePreviewChunks = useCallback(async (data: Record<string, unknown>) => {
-    if (!datasource || !pipelineId)
-      return
-
-    const datasourceInfoList = buildPreviewDatasourceInfo()
-    await runPublishedPipeline({
-      pipeline_id: pipelineId,
-      inputs: data,
-      start_node_id: datasource.nodeId,
-      datasource_type: datasourceType as DatasourceType,
-      datasource_info_list: datasourceInfoList,
-      is_preview: true,
-    }, {
-      onSuccess: (res) => {
-        setEstimateData((res as PublishedPipelineRunPreviewResponse).data.outputs)
-      },
-    })
-  }, [datasource, pipelineId, datasourceType, buildPreviewDatasourceInfo, runPublishedPipeline, setEstimateData])
-
-  // Handle document processing
-  const handleProcess = useCallback(async (data: Record<string, unknown>) => {
-    if (!datasource || !pipelineId)
-      return
-
-    const datasourceInfoList = buildProcessDatasourceInfo()
-    await runPublishedPipeline({
-      pipeline_id: pipelineId,
-      inputs: data,
-      start_node_id: datasource.nodeId,
-      datasource_type: datasourceType as DatasourceType,
-      datasource_info_list: datasourceInfoList,
-      is_preview: false,
-    }, {
-      onSuccess: (res) => {
-        setBatchId((res as PublishedPipelineRunResponse).batch || '')
-        setDocuments((res as PublishedPipelineRunResponse).documents || [])
-        handleNextStep()
-        trackEvent('dataset_document_added', {
-          data_source_type: datasourceType,
-          indexing_technique: 'pipeline',
-        })
-      },
-    })
-  }, [datasource, pipelineId, datasourceType, buildProcessDatasourceInfo, runPublishedPipeline, setBatchId, setDocuments, handleNextStep])
-
-  // Form submission handlers
-  const onClickProcess = useCallback(() => {
-    isPreview.current = false
-    formRef.current?.submit()
-  }, [])
-
-  const onClickPreview = useCallback(() => {
-    isPreview.current = true
-    formRef.current?.submit()
-  }, [])
-
-  const handleSubmit = useCallback((data: Record<string, unknown>) => {
-    if (isPreview.current)
-      handlePreviewChunks(data)
-    else
-      handleProcess(data)
-  }, [handlePreviewChunks, handleProcess])
-
-  // Preview change handlers
-  const handlePreviewFileChange = useCallback((file: DocumentItem) => {
-    const { previewLocalFileRef } = dataSourceStore.getState()
-    previewLocalFileRef.current = file
-    onClickPreview()
-  }, [dataSourceStore, onClickPreview])
-
-  const handlePreviewOnlineDocumentChange = useCallback((page: NotionPage) => {
-    const { previewOnlineDocumentRef } = dataSourceStore.getState()
-    previewOnlineDocumentRef.current = page
-    onClickPreview()
-  }, [dataSourceStore, onClickPreview])
-
-  const handlePreviewWebsiteChange = useCallback((website: CrawlResultItem) => {
-    const { previewWebsitePageRef } = dataSourceStore.getState()
-    previewWebsitePageRef.current = website
-    onClickPreview()
-  }, [dataSourceStore, onClickPreview])
-
-  const handlePreviewOnlineDriveFileChange = useCallback((file: OnlineDriveFile) => {
-    const { previewOnlineDriveFileRef } = dataSourceStore.getState()
-    previewOnlineDriveFileRef.current = file
-    onClickPreview()
-  }, [dataSourceStore, onClickPreview])
-
-  // Select all handler
-  const handleSelectAll = useCallback(() => {
-    const {
-      onlineDocuments,
-      onlineDriveFileList,
-      selectedFileIds,
-      setOnlineDocuments,
-      setSelectedFileIds,
-      setSelectedPagesId,
-    } = dataSourceStore.getState()
-
-    if (datasourceType === DatasourceType.onlineDocument) {
-      const allIds = currentWorkspacePages?.map(page => page.page_id) || []
-      if (onlineDocuments.length < allIds.length) {
-        const selectedPages = Array.from(allIds).map(pageId => PagesMapAndSelectedPagesId[pageId])
-        setOnlineDocuments(selectedPages)
-        setSelectedPagesId(new Set(allIds))
-      }
-      else {
-        setOnlineDocuments([])
-        setSelectedPagesId(new Set())
-      }
-    }
-
-    if (datasourceType === DatasourceType.onlineDrive) {
-      const allKeys = onlineDriveFileList.filter(item => item.type !== 'bucket').map(file => file.id)
-      if (selectedFileIds.length < allKeys.length)
-        setSelectedFileIds(allKeys)
-      else
-        setSelectedFileIds([])
-    }
-  }, [PagesMapAndSelectedPagesId, currentWorkspacePages, dataSourceStore, datasourceType])
-
-  // Clear datasource data based on type
-  const clearDataSourceData = useCallback((dataSource: Datasource) => {
-    const providerType = dataSource.nodeData.provider_type
-    const clearFunctions: Record<string, () => void> = {
-      [DatasourceType.onlineDocument]: clearOnlineDocumentData,
-      [DatasourceType.websiteCrawl]: clearWebsiteCrawlData,
-      [DatasourceType.onlineDrive]: clearOnlineDriveData,
-      [DatasourceType.localFile]: () => {},
-    }
-    clearFunctions[providerType]?.()
-  }, [clearOnlineDocumentData, clearOnlineDriveData, clearWebsiteCrawlData])
-
-  // Switch datasource handler
-  const handleSwitchDataSource = useCallback((dataSource: Datasource) => {
-    const {
-      setCurrentCredentialId,
-      currentNodeIdRef,
-    } = dataSourceStore.getState()
-    clearDataSourceData(dataSource)
-    setCurrentCredentialId('')
-    currentNodeIdRef.current = dataSource.nodeId
-    setDatasource(dataSource)
-  }, [clearDataSourceData, dataSourceStore, setDatasource])
-
-  // Credential change handler
-  const handleCredentialChange = useCallback((credentialId: string) => {
-    const { setCurrentCredentialId } = dataSourceStore.getState()
-    if (datasource)
-      clearDataSourceData(datasource)
-    setCurrentCredentialId(credentialId)
-  }, [clearDataSourceData, dataSourceStore, datasource])
-
-  return {
-    isPreview,
-    formRef,
-    isIdle,
-    isPending,
-    onClickProcess,
-    onClickPreview,
-    handleSubmit,
-    handlePreviewFileChange,
-    handlePreviewOnlineDocumentChange,
-    handlePreviewWebsiteChange,
-    handlePreviewOnlineDriveFileChange,
-    handleSelectAll,
-    handleSwitchDataSource,
-    handleCredentialChange,
-  }
-}

web/app/components/datasets/documents/create-from-pipeline/hooks/use-datasource-options.ts

@@ -1,27 +0,0 @@
-import type { DataSourceOption } from '@/app/components/rag-pipeline/components/panel/test-run/types'
-import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
-import type { Node } from '@/app/components/workflow/types'
-import { useMemo } from 'react'
-import { BlockEnum } from '@/app/components/workflow/types'
-
-/**
- * Hook for getting datasource options from pipeline nodes
- */
-export const useDatasourceOptions = (pipelineNodes: Node<DataSourceNodeType>[]) => {
-  const datasourceNodes = pipelineNodes.filter(node => node.data.type === BlockEnum.DataSource)
-
-  const options = useMemo(() => {
-    const options: DataSourceOption[] = []
-    datasourceNodes.forEach((node) => {
-      const label = node.data.title
-      options.push({
-        label,
-        value: node.id,
-        data: node.data,
-      })
-    })
-    return options
-  }, [datasourceNodes])
-
-  return options
-}

web/app/components/datasets/documents/create-from-pipeline/hooks/use-datasource-ui-state.ts

@@ -1,132 +0,0 @@
-import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
-import type { OnlineDriveFile } from '@/models/pipeline'
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { DatasourceType } from '@/models/pipeline'
-
-type DatasourceUIStateParams = {
-  datasource: Datasource | undefined
-  allFileLoaded: boolean
-  localFileListLength: number
-  onlineDocumentsLength: number
-  websitePagesLength: number
-  selectedFileIdsLength: number
-  onlineDriveFileList: OnlineDriveFile[]
-  isVectorSpaceFull: boolean
-  enableBilling: boolean
-  currentWorkspacePagesLength: number
-  fileUploadConfig: { file_size_limit: number, batch_count_limit: number }
-}
-
-/**
- * Hook for computing datasource UI state based on datasource type
- */
-export const useDatasourceUIState = ({
-  datasource,
-  allFileLoaded,
-  localFileListLength,
-  onlineDocumentsLength,
-  websitePagesLength,
-  selectedFileIdsLength,
-  onlineDriveFileList,
-  isVectorSpaceFull,
-  enableBilling,
-  currentWorkspacePagesLength,
-  fileUploadConfig,
-}: DatasourceUIStateParams) => {
-  const { t } = useTranslation()
-  const datasourceType = datasource?.nodeData.provider_type
-
-  const isShowVectorSpaceFull = useMemo(() => {
-    if (!datasource || !datasourceType)
-      return false
-
-    // Lookup table for vector space full condition check
-    const vectorSpaceFullConditions: Record<string, boolean> = {
-      [DatasourceType.localFile]: allFileLoaded,
-      [DatasourceType.onlineDocument]: onlineDocumentsLength > 0,
-      [DatasourceType.websiteCrawl]: websitePagesLength > 0,
-      [DatasourceType.onlineDrive]: onlineDriveFileList.length > 0,
-    }
-
-    const condition = vectorSpaceFullConditions[datasourceType]
-    return condition && isVectorSpaceFull && enableBilling
-  }, [datasource, datasourceType, allFileLoaded, onlineDocumentsLength, websitePagesLength, onlineDriveFileList.length, isVectorSpaceFull, enableBilling])
-
-  // Lookup table for next button disabled conditions
-  const nextBtnDisabled = useMemo(() => {
-    if (!datasource || !datasourceType)
-      return true
-
-    const disabledConditions: Record<string, boolean> = {
-      [DatasourceType.localFile]: isShowVectorSpaceFull || localFileListLength === 0 || !allFileLoaded,
-      [DatasourceType.onlineDocument]: isShowVectorSpaceFull || onlineDocumentsLength === 0,
-      [DatasourceType.websiteCrawl]: isShowVectorSpaceFull || websitePagesLength === 0,
-      [DatasourceType.onlineDrive]: isShowVectorSpaceFull || selectedFileIdsLength === 0,
-    }
-
-    return disabledConditions[datasourceType] ?? true
-  }, [datasource, datasourceType, isShowVectorSpaceFull, localFileListLength, allFileLoaded, onlineDocumentsLength, websitePagesLength, selectedFileIdsLength])
-
-  // Check if select all should be shown
-  const showSelect = useMemo(() => {
-    if (datasourceType === DatasourceType.onlineDocument)
-      return currentWorkspacePagesLength > 0
-
-    if (datasourceType === DatasourceType.onlineDrive) {
-      const nonBucketItems = onlineDriveFileList.filter(item => item.type !== 'bucket')
-      const isBucketList = onlineDriveFileList.some(file => file.type === 'bucket')
-      return !isBucketList && nonBucketItems.length > 0
-    }
-
-    return false
-  }, [currentWorkspacePagesLength, datasourceType, onlineDriveFileList])
-
-  // Total selectable options count
-  const totalOptions = useMemo(() => {
-    if (datasourceType === DatasourceType.onlineDocument)
-      return currentWorkspacePagesLength
-
-    if (datasourceType === DatasourceType.onlineDrive)
-      return onlineDriveFileList.filter(item => item.type !== 'bucket').length
-
-    return undefined
-  }, [currentWorkspacePagesLength, datasourceType, onlineDriveFileList])
-
-  // Selected options count
-  const selectedOptions = useMemo(() => {
-    if (datasourceType === DatasourceType.onlineDocument)
-      return onlineDocumentsLength
-
-    if (datasourceType === DatasourceType.onlineDrive)
-      return selectedFileIdsLength
-
-    return undefined
-  }, [datasourceType, onlineDocumentsLength, selectedFileIdsLength])
-
-  // Tip message for selection
-  const tip = useMemo(() => {
-    if (datasourceType === DatasourceType.onlineDocument)
-      return t('addDocuments.selectOnlineDocumentTip', { ns: 'datasetPipeline', count: 50 })
-
-    if (datasourceType === DatasourceType.onlineDrive) {
-      return t('addDocuments.selectOnlineDriveTip', {
-        ns: 'datasetPipeline',
-        count: fileUploadConfig.batch_count_limit,
-        fileSize: fileUploadConfig.file_size_limit,
-      })
-    }
-
-    return ''
-  }, [datasourceType, fileUploadConfig.batch_count_limit, fileUploadConfig.file_size_limit, t])
-
-  return {
-    datasourceType,
-    isShowVectorSpaceFull,
-    nextBtnDisabled,
-    showSelect,
-    totalOptions,
-    selectedOptions,
-    tip,
-  }
-}

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

@@ -2,71 +2,75 @@
 import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import type { Node } from '@/app/components/workflow/types'
-import type { FileIndexingEstimateResponse } from '@/models/datasets'
-import type { InitialDocumentDetail } from '@/models/pipeline'
+import type { NotionPage } from '@/models/common'
+import type { CrawlResultItem, DocumentItem, CustomFile as File, FileIndexingEstimateResponse } from '@/models/datasets'
+import type {
+  InitialDocumentDetail,
+  OnlineDriveFile,
+  PublishedPipelineRunPreviewResponse,
+  PublishedPipelineRunResponse,
+} from '@/models/pipeline'
 import { useBoolean } from 'ahooks'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { trackEvent } from '@/app/components/base/amplitude'
+import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
+import VectorSpaceFull from '@/app/components/billing/vector-space-full'
+import LocalFile from '@/app/components/datasets/documents/create-from-pipeline/data-source/local-file'
+import OnlineDocuments from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-documents'
+import OnlineDrive from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-drive'
+import WebsiteCrawl from '@/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useProviderContextSelector } from '@/context/provider-context'
 import { DatasourceType } from '@/models/pipeline'
 import { useFileUploadConfig } from '@/service/use-common'
-import { usePublishedPipelineInfo } from '@/service/use-pipeline'
+import { usePublishedPipelineInfo, useRunPublishedPipeline } from '@/service/use-pipeline'
+import { TransferMethod } from '@/types/app'
+import UpgradeCard from '../../create/step-one/upgrade-card'
+import Actions from './actions'
+import DataSourceOptions from './data-source-options'
 import { useDataSourceStore } from './data-source/store'
 import DataSourceProvider from './data-source/store/provider'
-import {
-  useAddDocumentsSteps,
-  useDatasourceActions,
-  useDatasourceUIState,
-  useLocalFile,
-  useOnlineDocument,
-  useOnlineDrive,
-  useWebsiteCrawl,
-} from './hooks'
+import { useAddDocumentsSteps, useLocalFile, useOnlineDocument, useOnlineDrive, useWebsiteCrawl } from './hooks'
 import LeftHeader from './left-header'
-import { StepOneContent, StepThreeContent, StepTwoContent } from './steps'
-import { StepOnePreview, StepTwoPreview } from './steps/preview-panel'
+import ChunkPreview from './preview/chunk-preview'
+import FilePreview from './preview/file-preview'
+import OnlineDocumentPreview from './preview/online-document-preview'
+import WebsitePreview from './preview/web-preview'
+import ProcessDocuments from './process-documents'
+import Processing from './processing'
 
 const CreateFormPipeline = () => {
   const { t } = useTranslation()
   const plan = useProviderContextSelector(state => state.plan)
   const enableBilling = useProviderContextSelector(state => state.enableBilling)
   const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
-  const dataSourceStore = useDataSourceStore()
-
-  // Core state
   const [datasource, setDatasource] = useState<Datasource>()
   const [estimateData, setEstimateData] = useState<FileIndexingEstimateResponse | undefined>(undefined)
   const [batchId, setBatchId] = useState('')
   const [documents, setDocuments] = useState<InitialDocumentDetail[]>([])
+  const dataSourceStore = useDataSourceStore()
+
+  const isPreview = useRef(false)
+  const formRef = useRef<any>(null)
 
-  // Data fetching
   const { data: pipelineInfo, isFetching: isFetchingPipelineInfo } = usePublishedPipelineInfo(pipelineId || '')
   const { data: fileUploadConfigResponse } = useFileUploadConfig()
 
-  const fileUploadConfig = useMemo(() => fileUploadConfigResponse ?? {
-    file_size_limit: 15,
-    batch_count_limit: 5,
-  }, [fileUploadConfigResponse])
-
-  // Steps management
   const {
     steps,
     currentStep,
     handleNextStep: doHandleNextStep,
     handleBackStep,
   } = useAddDocumentsSteps()
-
-  // Datasource-specific hooks
   const {
     localFileList,
     allFileLoaded,
     currentLocalFile,
     hidePreviewLocalFile,
   } = useLocalFile()
-
   const {
     currentWorkspace,
     onlineDocuments,
@@ -75,14 +79,12 @@ const CreateFormPipeline = () => {
     hidePreviewOnlineDocument,
     clearOnlineDocumentData,
   } = useOnlineDocument()
-
   const {
     websitePages,
     currentWebsite,
     hideWebsitePreview,
     clearWebsiteCrawlData,
   } = useWebsiteCrawl()
-
   const {
     onlineDriveFileList,
     selectedFileIds,
@@ -90,50 +92,43 @@ const CreateFormPipeline = () => {
     clearOnlineDriveData,
   } = useOnlineDrive()
 
-  // Computed values
+  const datasourceType = useMemo(() => datasource?.nodeData.provider_type, [datasource])
   const isVectorSpaceFull = plan.usage.vectorSpace >= plan.total.vectorSpace
+  const isShowVectorSpaceFull = useMemo(() => {
+    if (!datasource)
+      return false
+    if (datasourceType === DatasourceType.localFile)
+      return allFileLoaded && isVectorSpaceFull && enableBilling
+    if (datasourceType === DatasourceType.onlineDocument)
+      return onlineDocuments.length > 0 && isVectorSpaceFull && enableBilling
+    if (datasourceType === DatasourceType.websiteCrawl)
+      return websitePages.length > 0 && isVectorSpaceFull && enableBilling
+    if (datasourceType === DatasourceType.onlineDrive)
+      return onlineDriveFileList.length > 0 && isVectorSpaceFull && enableBilling
+    return false
+  }, [allFileLoaded, datasource, datasourceType, enableBilling, isVectorSpaceFull, onlineDocuments.length, onlineDriveFileList.length, websitePages.length])
   const supportBatchUpload = !enableBilling || plan.type !== 'sandbox'
 
-  // UI state
-  const {
-    datasourceType,
-    isShowVectorSpaceFull,
-    nextBtnDisabled,
-    showSelect,
-    totalOptions,
-    selectedOptions,
-    tip,
-  } = useDatasourceUIState({
-    datasource,
-    allFileLoaded,
-    localFileListLength: localFileList.length,
-    onlineDocumentsLength: onlineDocuments.length,
-    websitePagesLength: websitePages.length,
-    selectedFileIdsLength: selectedFileIds.length,
-    onlineDriveFileList,
-    isVectorSpaceFull,
-    enableBilling,
-    currentWorkspacePagesLength: currentWorkspace?.pages.length ?? 0,
-    fileUploadConfig,
-  })
-
-  // Plan upgrade modal
   const [isShowPlanUpgradeModal, {
     setTrue: showPlanUpgradeModal,
     setFalse: hidePlanUpgradeModal,
   }] = useBoolean(false)
-
-  // Next step with batch upload check
   const handleNextStep = useCallback(() => {
     if (!supportBatchUpload) {
-      const multipleCheckMap: Record<string, number> = {
-        [DatasourceType.localFile]: localFileList.length,
-        [DatasourceType.onlineDocument]: onlineDocuments.length,
-        [DatasourceType.websiteCrawl]: websitePages.length,
-        [DatasourceType.onlineDrive]: selectedFileIds.length,
-      }
-      const count = datasourceType ? multipleCheckMap[datasourceType] : 0
-      if (count > 1) {
+      let isMultiple = false
+      if (datasourceType === DatasourceType.localFile && localFileList.length > 1)
+        isMultiple = true
+
+      if (datasourceType === DatasourceType.onlineDocument && onlineDocuments.length > 1)
+        isMultiple = true
+
+      if (datasourceType === DatasourceType.websiteCrawl && websitePages.length > 1)
+        isMultiple = true
+
+      if (datasourceType === DatasourceType.onlineDrive && selectedFileIds.length > 1)
+        isMultiple = true
+
+      if (isMultiple) {
         showPlanUpgradeModal()
         return
       }
@@ -141,44 +136,334 @@ const CreateFormPipeline = () => {
     doHandleNextStep()
   }, [datasourceType, doHandleNextStep, localFileList.length, onlineDocuments.length, selectedFileIds.length, showPlanUpgradeModal, supportBatchUpload, websitePages.length])
 
-  // Datasource actions
-  const {
-    isPreview,
-    formRef,
-    isIdle,
-    isPending,
-    onClickProcess,
-    onClickPreview,
-    handleSubmit,
-    handlePreviewFileChange,
-    handlePreviewOnlineDocumentChange,
-    handlePreviewWebsiteChange,
-    handlePreviewOnlineDriveFileChange,
-    handleSelectAll,
-    handleSwitchDataSource,
-    handleCredentialChange,
-  } = useDatasourceActions({
-    datasource,
-    datasourceType,
-    pipelineId,
-    dataSourceStore,
-    setEstimateData,
-    setBatchId,
-    setDocuments,
-    handleNextStep,
-    PagesMapAndSelectedPagesId,
-    currentWorkspacePages: currentWorkspace?.pages,
-    clearOnlineDocumentData,
-    clearWebsiteCrawlData,
-    clearOnlineDriveData,
-    setDatasource,
-  })
+  const nextBtnDisabled = useMemo(() => {
+    if (!datasource)
+      return true
+    if (datasourceType === DatasourceType.localFile)
+      return isShowVectorSpaceFull || !localFileList.length || !allFileLoaded
+    if (datasourceType === DatasourceType.onlineDocument)
+      return isShowVectorSpaceFull || !onlineDocuments.length
+    if (datasourceType === DatasourceType.websiteCrawl)
+      return isShowVectorSpaceFull || !websitePages.length
+    if (datasourceType === DatasourceType.onlineDrive)
+      return isShowVectorSpaceFull || !selectedFileIds.length
+    return false
+  }, [datasource, datasourceType, isShowVectorSpaceFull, localFileList.length, allFileLoaded, onlineDocuments.length, websitePages.length, selectedFileIds.length])
 
-  if (isFetchingPipelineInfo)
-    return <Loading type="app" />
+  const fileUploadConfig = useMemo(() => fileUploadConfigResponse ?? {
+    file_size_limit: 15,
+    batch_count_limit: 5,
+  }, [fileUploadConfigResponse])
+
+  const showSelect = useMemo(() => {
+    if (datasourceType === DatasourceType.onlineDocument) {
+      const pagesCount = currentWorkspace?.pages.length ?? 0
+      return pagesCount > 0
+    }
+    if (datasourceType === DatasourceType.onlineDrive) {
+      const isBucketList = onlineDriveFileList.some(file => file.type === 'bucket')
+      return !isBucketList && onlineDriveFileList.filter((item) => {
+        return item.type !== 'bucket'
+      }).length > 0
+    }
+    return false
+  }, [currentWorkspace?.pages.length, datasourceType, onlineDriveFileList])
+
+  const totalOptions = useMemo(() => {
+    if (datasourceType === DatasourceType.onlineDocument)
+      return currentWorkspace?.pages.length
+    if (datasourceType === DatasourceType.onlineDrive) {
+      return onlineDriveFileList.filter((item) => {
+        return item.type !== 'bucket'
+      }).length
+    }
+  }, [currentWorkspace?.pages.length, datasourceType, onlineDriveFileList])
+
+  const selectedOptions = useMemo(() => {
+    if (datasourceType === DatasourceType.onlineDocument)
+      return onlineDocuments.length
+    if (datasourceType === DatasourceType.onlineDrive)
+      return selectedFileIds.length
+  }, [datasourceType, onlineDocuments.length, selectedFileIds.length])
+
+  const tip = useMemo(() => {
+    if (datasourceType === DatasourceType.onlineDocument)
+      return t('addDocuments.selectOnlineDocumentTip', { ns: 'datasetPipeline', count: 50 })
+    if (datasourceType === DatasourceType.onlineDrive) {
+      return t('addDocuments.selectOnlineDriveTip', {
+        ns: 'datasetPipeline',
+        count: fileUploadConfig.batch_count_limit,
+        fileSize: fileUploadConfig.file_size_limit,
+      })
+    }
+    return ''
+  }, [datasourceType, fileUploadConfig.batch_count_limit, fileUploadConfig.file_size_limit, t])
+
+  const { mutateAsync: runPublishedPipeline, isIdle, isPending } = useRunPublishedPipeline()
+
+  const handlePreviewChunks = useCallback(async (data: Record<string, any>) => {
+    if (!datasource)
+      return
+    const {
+      previewLocalFileRef,
+      previewOnlineDocumentRef,
+      previewWebsitePageRef,
+      previewOnlineDriveFileRef,
+      currentCredentialId,
+    } = dataSourceStore.getState()
+    const datasourceInfoList: Record<string, any>[] = []
+    if (datasourceType === DatasourceType.localFile) {
+      const { id, name, type, size, extension, mime_type } = previewLocalFileRef.current as File
+      const documentInfo = {
+        related_id: id,
+        name,
+        type,
+        size,
+        extension,
+        mime_type,
+        url: '',
+        transfer_method: TransferMethod.local_file,
+        credential_id: currentCredentialId,
+      }
+      datasourceInfoList.push(documentInfo)
+    }
+    if (datasourceType === DatasourceType.onlineDocument) {
+      const { workspace_id, ...rest } = previewOnlineDocumentRef.current!
+      const documentInfo = {
+        workspace_id,
+        page: rest,
+        credential_id: currentCredentialId,
+      }
+      datasourceInfoList.push(documentInfo)
+    }
+    if (datasourceType === DatasourceType.websiteCrawl) {
+      datasourceInfoList.push({
+        ...previewWebsitePageRef.current!,
+        credential_id: currentCredentialId,
+      })
+    }
+    if (datasourceType === DatasourceType.onlineDrive) {
+      const { bucket } = dataSourceStore.getState()
+      const { id, type, name } = previewOnlineDriveFileRef.current!
+      datasourceInfoList.push({
+        bucket,
+        id,
+        name,
+        type,
+        credential_id: currentCredentialId,
+      })
+    }
+    await runPublishedPipeline({
+      pipeline_id: pipelineId!,
+      inputs: data,
+      start_node_id: datasource.nodeId,
+      datasource_type: datasourceType as DatasourceType,
+      datasource_info_list: datasourceInfoList,
+      is_preview: true,
+    }, {
+      onSuccess: (res) => {
+        setEstimateData((res as PublishedPipelineRunPreviewResponse).data.outputs)
+      },
+    })
+  }, [datasource, datasourceType, runPublishedPipeline, pipelineId, dataSourceStore])
+
+  const handleProcess = useCallback(async (data: Record<string, any>) => {
+    if (!datasource)
+      return
+    const { currentCredentialId } = dataSourceStore.getState()
+    const datasourceInfoList: Record<string, any>[] = []
+    if (datasourceType === DatasourceType.localFile) {
+      const {
+        localFileList,
+      } = dataSourceStore.getState()
+      localFileList.forEach((file) => {
+        const { id, name, type, size, extension, mime_type } = file.file
+        const documentInfo = {
+          related_id: id,
+          name,
+          type,
+          size,
+          extension,
+          mime_type,
+          url: '',
+          transfer_method: TransferMethod.local_file,
+          credential_id: currentCredentialId,
+        }
+        datasourceInfoList.push(documentInfo)
+      })
+    }
+    if (datasourceType === DatasourceType.onlineDocument) {
+      const {
+        onlineDocuments,
+      } = dataSourceStore.getState()
+      onlineDocuments.forEach((page) => {
+        const { workspace_id, ...rest } = page
+        const documentInfo = {
+          workspace_id,
+          page: rest,
+          credential_id: currentCredentialId,
+        }
+        datasourceInfoList.push(documentInfo)
+      })
+    }
+    if (datasourceType === DatasourceType.websiteCrawl) {
+      const {
+        websitePages,
+      } = dataSourceStore.getState()
+      websitePages.forEach((websitePage) => {
+        datasourceInfoList.push({
+          ...websitePage,
+          credential_id: currentCredentialId,
+        })
+      })
+    }
+    if (datasourceType === DatasourceType.onlineDrive) {
+      const {
+        bucket,
+        selectedFileIds,
+        onlineDriveFileList,
+      } = dataSourceStore.getState()
+      selectedFileIds.forEach((id) => {
+        const file = onlineDriveFileList.find(file => file.id === id)
+        datasourceInfoList.push({
+          bucket,
+          id: file?.id,
+          name: file?.name,
+          type: file?.type,
+          credential_id: currentCredentialId,
+        })
+      })
+    }
+    await runPublishedPipeline({
+      pipeline_id: pipelineId!,
+      inputs: data,
+      start_node_id: datasource.nodeId,
+      datasource_type: datasourceType as DatasourceType,
+      datasource_info_list: datasourceInfoList,
+      is_preview: false,
+    }, {
+      onSuccess: (res) => {
+        setBatchId((res as PublishedPipelineRunResponse).batch || '')
+        setDocuments((res as PublishedPipelineRunResponse).documents || [])
+        handleNextStep()
+        trackEvent('dataset_document_added', {
+          data_source_type: datasourceType,
+          indexing_technique: 'pipeline',
+        })
+      },
+    })
+  }, [dataSourceStore, datasource, datasourceType, handleNextStep, pipelineId, runPublishedPipeline])
+
+  const onClickProcess = useCallback(() => {
+    isPreview.current = false
+    formRef.current?.submit()
+  }, [])
+
+  const onClickPreview = useCallback(() => {
+    isPreview.current = true
+    formRef.current?.submit()
+  }, [])
+
+  const handleSubmit = useCallback((data: Record<string, any>) => {
+    if (isPreview.current)
+      handlePreviewChunks(data)
+    else
+      handleProcess(data)
+  }, [handlePreviewChunks, handleProcess])
+
+  const handlePreviewFileChange = useCallback((file: DocumentItem) => {
+    const { previewLocalFileRef } = dataSourceStore.getState()
+    previewLocalFileRef.current = file
+    onClickPreview()
+  }, [dataSourceStore, onClickPreview])
+
+  const handlePreviewOnlineDocumentChange = useCallback((page: NotionPage) => {
+    const { previewOnlineDocumentRef } = dataSourceStore.getState()
+    previewOnlineDocumentRef.current = page
+    onClickPreview()
+  }, [dataSourceStore, onClickPreview])
+
+  const handlePreviewWebsiteChange = useCallback((website: CrawlResultItem) => {
+    const { previewWebsitePageRef } = dataSourceStore.getState()
+    previewWebsitePageRef.current = website
+    onClickPreview()
+  }, [dataSourceStore, onClickPreview])
+
+  const handlePreviewOnlineDriveFileChange = useCallback((file: OnlineDriveFile) => {
+    const { previewOnlineDriveFileRef } = dataSourceStore.getState()
+    previewOnlineDriveFileRef.current = file
+    onClickPreview()
+  }, [dataSourceStore, onClickPreview])
+
+  const handleSelectAll = useCallback(() => {
+    const {
+      onlineDocuments,
+      onlineDriveFileList,
+      selectedFileIds,
+      setOnlineDocuments,
+      setSelectedFileIds,
+      setSelectedPagesId,
+    } = dataSourceStore.getState()
+    if (datasourceType === DatasourceType.onlineDocument) {
+      const allIds = currentWorkspace?.pages.map(page => page.page_id) || []
+      if (onlineDocuments.length < allIds.length) {
+        const selectedPages = Array.from(allIds).map(pageId => PagesMapAndSelectedPagesId[pageId])
+        setOnlineDocuments(selectedPages)
+        setSelectedPagesId(new Set(allIds))
+      }
+      else {
+        setOnlineDocuments([])
+        setSelectedPagesId(new Set())
+      }
+    }
+    if (datasourceType === DatasourceType.onlineDrive) {
+      const allKeys = onlineDriveFileList.filter((item) => {
+        return item.type !== 'bucket'
+      }).map(file => file.id)
+      if (selectedFileIds.length < allKeys.length)
+        setSelectedFileIds(allKeys)
+      else
+        setSelectedFileIds([])
+    }
+  }, [PagesMapAndSelectedPagesId, currentWorkspace?.pages, dataSourceStore, datasourceType])
+
+  const clearDataSourceData = useCallback((dataSource: Datasource) => {
+    const providerType = dataSource.nodeData.provider_type
+    if (providerType === DatasourceType.onlineDocument)
+      clearOnlineDocumentData()
+    else if (providerType === DatasourceType.websiteCrawl)
+      clearWebsiteCrawlData()
+    else if (providerType === DatasourceType.onlineDrive)
+      clearOnlineDriveData()
+  }, [clearOnlineDocumentData, clearOnlineDriveData, clearWebsiteCrawlData])
+
+  const handleSwitchDataSource = useCallback((dataSource: Datasource) => {
+    const {
+      setCurrentCredentialId,
+      currentNodeIdRef,
+    } = dataSourceStore.getState()
+    clearDataSourceData(dataSource)
+    setCurrentCredentialId('')
+    currentNodeIdRef.current = dataSource.nodeId
+    setDatasource(dataSource)
+  }, [clearDataSourceData, dataSourceStore])
+
+  const handleCredentialChange = useCallback((credentialId: string) => {
+    const { setCurrentCredentialId } = dataSourceStore.getState()
+    clearDataSourceData(datasource!)
+    setCurrentCredentialId(credentialId)
+  }, [clearDataSourceData, dataSourceStore, datasource])
+
+  if (isFetchingPipelineInfo) {
+    return (
+      <Loading type="app" />
+    )
+  }
 
   return (
-    <div className="relative flex h-[calc(100vh-56px)] w-full min-w-[1024px] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle">
+    <div
+      className="relative flex h-[calc(100vh-56px)] w-full min-w-[1024px] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle"
+    >
       <div className="h-full min-w-0 flex-1">
         <div className="flex h-full flex-col px-14">
           <LeftHeader
@@ -187,77 +472,139 @@ const CreateFormPipeline = () => {
             currentStep={currentStep}
           />
           <div className="grow overflow-y-auto">
-            {currentStep === 1 && (
-              <StepOneContent
-                datasource={datasource}
-                datasourceType={datasourceType}
-                pipelineNodes={(pipelineInfo?.graph.nodes || []) as Node<DataSourceNodeType>[]}
-                supportBatchUpload={supportBatchUpload}
-                localFileListLength={localFileList.length}
-                isShowVectorSpaceFull={isShowVectorSpaceFull}
-                showSelect={showSelect}
-                totalOptions={totalOptions}
-                selectedOptions={selectedOptions}
-                tip={tip}
-                nextBtnDisabled={nextBtnDisabled}
-                onSelectDataSource={handleSwitchDataSource}
-                onCredentialChange={handleCredentialChange}
-                onSelectAll={handleSelectAll}
-                onNextStep={handleNextStep}
-              />
-            )}
-            {currentStep === 2 && (
-              <StepTwoContent
-                formRef={formRef}
-                dataSourceNodeId={datasource!.nodeId}
-                isRunning={isPending}
-                onProcess={onClickProcess}
-                onPreview={onClickPreview}
-                onSubmit={handleSubmit}
-                onBack={handleBackStep}
-              />
-            )}
-            {currentStep === 3 && (
-              <StepThreeContent
-                batchId={batchId}
-                documents={documents}
-              />
-            )}
+            {
+              currentStep === 1 && (
+                <div className="flex flex-col gap-y-5 pt-4">
+                  <DataSourceOptions
+                    datasourceNodeId={datasource?.nodeId || ''}
+                    onSelect={handleSwitchDataSource}
+                    pipelineNodes={(pipelineInfo?.graph.nodes || []) as Node<DataSourceNodeType>[]}
+                  />
+                  {datasourceType === DatasourceType.localFile && (
+                    <LocalFile
+                      allowedExtensions={datasource!.nodeData.fileExtensions || []}
+                      supportBatchUpload={supportBatchUpload}
+                    />
+                  )}
+                  {datasourceType === DatasourceType.onlineDocument && (
+                    <OnlineDocuments
+                      nodeId={datasource!.nodeId}
+                      nodeData={datasource!.nodeData}
+                      onCredentialChange={handleCredentialChange}
+                    />
+                  )}
+                  {datasourceType === DatasourceType.websiteCrawl && (
+                    <WebsiteCrawl
+                      nodeId={datasource!.nodeId}
+                      nodeData={datasource!.nodeData}
+                      onCredentialChange={handleCredentialChange}
+                    />
+                  )}
+                  {datasourceType === DatasourceType.onlineDrive && (
+                    <OnlineDrive
+                      nodeId={datasource!.nodeId}
+                      nodeData={datasource!.nodeData}
+                      onCredentialChange={handleCredentialChange}
+                    />
+                  )}
+                  {isShowVectorSpaceFull && (
+                    <VectorSpaceFull />
+                  )}
+                  <Actions
+                    showSelect={showSelect}
+                    totalOptions={totalOptions}
+                    selectedOptions={selectedOptions}
+                    onSelectAll={handleSelectAll}
+                    disabled={nextBtnDisabled}
+                    handleNextStep={handleNextStep}
+                    tip={tip}
+                  />
+                  {
+                    !supportBatchUpload && datasourceType === DatasourceType.localFile && localFileList.length > 0 && (
+                      <>
+                        <Divider type="horizontal" className="my-4 h-px bg-divider-subtle" />
+                        <UpgradeCard />
+                      </>
+                    )
+                  }
+                </div>
+              )
+            }
+            {
+              currentStep === 2 && (
+                <ProcessDocuments
+                  ref={formRef}
+                  dataSourceNodeId={datasource!.nodeId}
+                  isRunning={isPending}
+                  onProcess={onClickProcess}
+                  onPreview={onClickPreview}
+                  onSubmit={handleSubmit}
+                  onBack={handleBackStep}
+                />
+              )
+            }
+            {
+              currentStep === 3 && (
+                <Processing
+                  batchId={batchId}
+                  documents={documents}
+                />
+              )
+            }
           </div>
         </div>
       </div>
-
-      {/* Preview Panel */}
-      {currentStep === 1 && (
-        <StepOnePreview
-          datasource={datasource}
-          currentLocalFile={currentLocalFile}
-          currentDocument={currentDocument}
-          currentWebsite={currentWebsite}
-          hidePreviewLocalFile={hidePreviewLocalFile}
-          hidePreviewOnlineDocument={hidePreviewOnlineDocument}
-          hideWebsitePreview={hideWebsitePreview}
-        />
-      )}
-      {currentStep === 2 && (
-        <StepTwoPreview
-          datasourceType={datasourceType}
-          localFileList={localFileList}
-          onlineDocuments={onlineDocuments}
-          websitePages={websitePages}
-          selectedOnlineDriveFileList={selectedOnlineDriveFileList}
-          isIdle={isIdle}
-          isPendingPreview={isPending && isPreview.current}
-          estimateData={estimateData}
-          onPreview={onClickPreview}
-          handlePreviewFileChange={handlePreviewFileChange}
-          handlePreviewOnlineDocumentChange={handlePreviewOnlineDocumentChange}
-          handlePreviewWebsitePageChange={handlePreviewWebsiteChange}
-          handlePreviewOnlineDriveFileChange={handlePreviewOnlineDriveFileChange}
-        />
-      )}
-
-      {/* Plan Upgrade Modal */}
+      {/* Preview */}
+      {
+        currentStep === 1 && (
+          <div className="h-full min-w-0 flex-1">
+            <div className="flex h-full flex-col pl-2 pt-2">
+              {currentLocalFile && (
+                <FilePreview
+                  file={currentLocalFile}
+                  hidePreview={hidePreviewLocalFile}
+                />
+              )}
+              {currentDocument && (
+                <OnlineDocumentPreview
+                  datasourceNodeId={datasource!.nodeId}
+                  currentPage={currentDocument}
+                  hidePreview={hidePreviewOnlineDocument}
+                />
+              )}
+              {currentWebsite && (
+                <WebsitePreview
+                  currentWebsite={currentWebsite}
+                  hidePreview={hideWebsitePreview}
+                />
+              )}
+            </div>
+          </div>
+        )
+      }
+      {
+        currentStep === 2 && (
+          <div className="h-full min-w-0 flex-1">
+            <div className="flex h-full flex-col pl-2 pt-2">
+              <ChunkPreview
+                dataSourceType={datasourceType as DatasourceType}
+                localFiles={localFileList.map(file => file.file)}
+                onlineDocuments={onlineDocuments}
+                websitePages={websitePages}
+                onlineDriveFiles={selectedOnlineDriveFileList}
+                isIdle={isIdle}
+                isPending={isPending && isPreview.current}
+                estimateData={estimateData}
+                onPreview={onClickPreview}
+                handlePreviewFileChange={handlePreviewFileChange}
+                handlePreviewOnlineDocumentChange={handlePreviewOnlineDocumentChange}
+                handlePreviewWebsitePageChange={handlePreviewWebsiteChange}
+                handlePreviewOnlineDriveFileChange={handlePreviewOnlineDriveFileChange}
+              />
+            </div>
+          </div>
+        )
+      }
       {isShowPlanUpgradeModal && (
         <PlanUpgradeModal
           show

web/app/components/datasets/documents/create-from-pipeline/steps/index.ts

@@ -1,3 +0,0 @@
-export { default as StepOneContent } from './step-one-content'
-export { default as StepThreeContent } from './step-three-content'
-export { default as StepTwoContent } from './step-two-content'

web/app/components/datasets/documents/create-from-pipeline/steps/preview-panel.tsx

@@ -1,112 +0,0 @@
-'use client'
-import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
-import type { NotionPage } from '@/models/common'
-import type { CrawlResultItem, CustomFile, DocumentItem, FileIndexingEstimateResponse, FileItem } from '@/models/datasets'
-import type { DatasourceType, OnlineDriveFile } from '@/models/pipeline'
-import { memo } from 'react'
-import ChunkPreview from '../preview/chunk-preview'
-import FilePreview from '../preview/file-preview'
-import OnlineDocumentPreview from '../preview/online-document-preview'
-import WebsitePreview from '../preview/web-preview'
-
-type StepOnePreviewProps = {
-  datasource: Datasource | undefined
-  currentLocalFile: CustomFile | undefined
-  currentDocument: (NotionPage & { workspace_id: string }) | undefined
-  currentWebsite: CrawlResultItem | undefined
-  hidePreviewLocalFile: () => void
-  hidePreviewOnlineDocument: () => void
-  hideWebsitePreview: () => void
-}
-
-export const StepOnePreview = memo(({
-  datasource,
-  currentLocalFile,
-  currentDocument,
-  currentWebsite,
-  hidePreviewLocalFile,
-  hidePreviewOnlineDocument,
-  hideWebsitePreview,
-}: StepOnePreviewProps) => {
-  return (
-    <div className="h-full min-w-0 flex-1">
-      <div className="flex h-full flex-col pl-2 pt-2">
-        {currentLocalFile && (
-          <FilePreview
-            file={currentLocalFile}
-            hidePreview={hidePreviewLocalFile}
-          />
-        )}
-        {currentDocument && (
-          <OnlineDocumentPreview
-            datasourceNodeId={datasource!.nodeId}
-            currentPage={currentDocument}
-            hidePreview={hidePreviewOnlineDocument}
-          />
-        )}
-        {currentWebsite && (
-          <WebsitePreview
-            currentWebsite={currentWebsite}
-            hidePreview={hideWebsitePreview}
-          />
-        )}
-      </div>
-    </div>
-  )
-})
-StepOnePreview.displayName = 'StepOnePreview'
-
-type StepTwoPreviewProps = {
-  datasourceType: string | undefined
-  localFileList: FileItem[]
-  onlineDocuments: (NotionPage & { workspace_id: string })[]
-  websitePages: CrawlResultItem[]
-  selectedOnlineDriveFileList: OnlineDriveFile[]
-  isIdle: boolean
-  isPendingPreview: boolean
-  estimateData: FileIndexingEstimateResponse | undefined
-  onPreview: () => void
-  handlePreviewFileChange: (file: DocumentItem) => void
-  handlePreviewOnlineDocumentChange: (page: NotionPage) => void
-  handlePreviewWebsitePageChange: (website: CrawlResultItem) => void
-  handlePreviewOnlineDriveFileChange: (file: OnlineDriveFile) => void
-}
-
-export const StepTwoPreview = memo(({
-  datasourceType,
-  localFileList,
-  onlineDocuments,
-  websitePages,
-  selectedOnlineDriveFileList,
-  isIdle,
-  isPendingPreview,
-  estimateData,
-  onPreview,
-  handlePreviewFileChange,
-  handlePreviewOnlineDocumentChange,
-  handlePreviewWebsitePageChange,
-  handlePreviewOnlineDriveFileChange,
-}: StepTwoPreviewProps) => {
-  return (
-    <div className="h-full min-w-0 flex-1">
-      <div className="flex h-full flex-col pl-2 pt-2">
-        <ChunkPreview
-          dataSourceType={datasourceType as DatasourceType}
-          localFiles={localFileList.map(file => file.file)}
-          onlineDocuments={onlineDocuments}
-          websitePages={websitePages}
-          onlineDriveFiles={selectedOnlineDriveFileList}
-          isIdle={isIdle}
-          isPending={isPendingPreview}
-          estimateData={estimateData}
-          onPreview={onPreview}
-          handlePreviewFileChange={handlePreviewFileChange}
-          handlePreviewOnlineDocumentChange={handlePreviewOnlineDocumentChange}
-          handlePreviewWebsitePageChange={handlePreviewWebsitePageChange}
-          handlePreviewOnlineDriveFileChange={handlePreviewOnlineDriveFileChange}
-        />
-      </div>
-    </div>
-  )
-})
-StepTwoPreview.displayName = 'StepTwoPreview'

web/app/components/datasets/documents/create-from-pipeline/steps/step-one-content.tsx

@@ -1,110 +0,0 @@
-'use client'
-import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
-import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
-import type { Node } from '@/app/components/workflow/types'
-import { memo } from 'react'
-import Divider from '@/app/components/base/divider'
-import VectorSpaceFull from '@/app/components/billing/vector-space-full'
-import LocalFile from '@/app/components/datasets/documents/create-from-pipeline/data-source/local-file'
-import OnlineDocuments from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-documents'
-import OnlineDrive from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-drive'
-import WebsiteCrawl from '@/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl'
-import { DatasourceType } from '@/models/pipeline'
-import UpgradeCard from '../../../create/step-one/upgrade-card'
-import Actions from '../actions'
-import DataSourceOptions from '../data-source-options'
-
-type StepOneContentProps = {
-  datasource: Datasource | undefined
-  datasourceType: string | undefined
-  pipelineNodes: Node<DataSourceNodeType>[]
-  supportBatchUpload: boolean
-  localFileListLength: number
-  isShowVectorSpaceFull: boolean
-  showSelect: boolean
-  totalOptions: number | undefined
-  selectedOptions: number | undefined
-  tip: string
-  nextBtnDisabled: boolean
-  onSelectDataSource: (dataSource: Datasource) => void
-  onCredentialChange: (credentialId: string) => void
-  onSelectAll: () => void
-  onNextStep: () => void
-}
-
-const StepOneContent = ({
-  datasource,
-  datasourceType,
-  pipelineNodes,
-  supportBatchUpload,
-  localFileListLength,
-  isShowVectorSpaceFull,
-  showSelect,
-  totalOptions,
-  selectedOptions,
-  tip,
-  nextBtnDisabled,
-  onSelectDataSource,
-  onCredentialChange,
-  onSelectAll,
-  onNextStep,
-}: StepOneContentProps) => {
-  const showUpgradeCard = !supportBatchUpload
-    && datasourceType === DatasourceType.localFile
-    && localFileListLength > 0
-
-  return (
-    <div className="flex flex-col gap-y-5 pt-4">
-      <DataSourceOptions
-        datasourceNodeId={datasource?.nodeId || ''}
-        onSelect={onSelectDataSource}
-        pipelineNodes={pipelineNodes}
-      />
-      {datasourceType === DatasourceType.localFile && (
-        <LocalFile
-          allowedExtensions={datasource!.nodeData.fileExtensions || []}
-          supportBatchUpload={supportBatchUpload}
-        />
-      )}
-      {datasourceType === DatasourceType.onlineDocument && (
-        <OnlineDocuments
-          nodeId={datasource!.nodeId}
-          nodeData={datasource!.nodeData}
-          onCredentialChange={onCredentialChange}
-        />
-      )}
-      {datasourceType === DatasourceType.websiteCrawl && (
-        <WebsiteCrawl
-          nodeId={datasource!.nodeId}
-          nodeData={datasource!.nodeData}
-          onCredentialChange={onCredentialChange}
-        />
-      )}
-      {datasourceType === DatasourceType.onlineDrive && (
-        <OnlineDrive
-          nodeId={datasource!.nodeId}
-          nodeData={datasource!.nodeData}
-          onCredentialChange={onCredentialChange}
-        />
-      )}
-      {isShowVectorSpaceFull && <VectorSpaceFull />}
-      <Actions
-        showSelect={showSelect}
-        totalOptions={totalOptions}
-        selectedOptions={selectedOptions}
-        onSelectAll={onSelectAll}
-        disabled={nextBtnDisabled}
-        handleNextStep={onNextStep}
-        tip={tip}
-      />
-      {showUpgradeCard && (
-        <>
-          <Divider type="horizontal" className="my-4 h-px bg-divider-subtle" />
-          <UpgradeCard />
-        </>
-      )}
-    </div>
-  )
-}
-
-export default memo(StepOneContent)

web/app/components/datasets/documents/create-from-pipeline/steps/step-three-content.tsx

@@ -1,23 +0,0 @@
-'use client'
-import type { InitialDocumentDetail } from '@/models/pipeline'
-import { memo } from 'react'
-import Processing from '../processing'
-
-type StepThreeContentProps = {
-  batchId: string
-  documents: InitialDocumentDetail[]
-}
-
-const StepThreeContent = ({
-  batchId,
-  documents,
-}: StepThreeContentProps) => {
-  return (
-    <Processing
-      batchId={batchId}
-      documents={documents}
-    />
-  )
-}
-
-export default memo(StepThreeContent)

web/app/components/datasets/documents/create-from-pipeline/steps/step-two-content.tsx

@@ -1,38 +0,0 @@
-'use client'
-import type { RefObject } from 'react'
-import { memo } from 'react'
-import ProcessDocuments from '../process-documents'
-
-type StepTwoContentProps = {
-  formRef: RefObject<{ submit: () => void } | null>
-  dataSourceNodeId: string
-  isRunning: boolean
-  onProcess: () => void
-  onPreview: () => void
-  onSubmit: (data: Record<string, unknown>) => void
-  onBack: () => void
-}
-
-const StepTwoContent = ({
-  formRef,
-  dataSourceNodeId,
-  isRunning,
-  onProcess,
-  onPreview,
-  onSubmit,
-  onBack,
-}: StepTwoContentProps) => {
-  return (
-    <ProcessDocuments
-      ref={formRef}
-      dataSourceNodeId={dataSourceNodeId}
-      isRunning={isRunning}
-      onProcess={onProcess}
-      onPreview={onPreview}
-      onSubmit={onSubmit}
-      onBack={onBack}
-    />
-  )
-}
-
-export default memo(StepTwoContent)

web/app/components/datasets/documents/create-from-pipeline/utils/datasource-info-builder.ts

@@ -1,63 +0,0 @@
-import type { NotionPage } from '@/models/common'
-import type { CrawlResultItem, CustomFile as File } from '@/models/datasets'
-import type { OnlineDriveFile } from '@/models/pipeline'
-import { TransferMethod } from '@/types/app'
-
-/**
- * Build datasource info for local files
- */
-export const buildLocalFileDatasourceInfo = (
-  file: File,
-  credentialId: string,
-): Record<string, unknown> => ({
-  related_id: file.id,
-  name: file.name,
-  type: file.type,
-  size: file.size,
-  extension: file.extension,
-  mime_type: file.mime_type,
-  url: '',
-  transfer_method: TransferMethod.local_file,
-  credential_id: credentialId,
-})
-
-/**
- * Build datasource info for online documents
- */
-export const buildOnlineDocumentDatasourceInfo = (
-  page: NotionPage & { workspace_id: string },
-  credentialId: string,
-): Record<string, unknown> => {
-  const { workspace_id, ...rest } = page
-  return {
-    workspace_id,
-    page: rest,
-    credential_id: credentialId,
-  }
-}
-
-/**
- * Build datasource info for website crawl
- */
-export const buildWebsiteCrawlDatasourceInfo = (
-  page: CrawlResultItem,
-  credentialId: string,
-): Record<string, unknown> => ({
-  ...page,
-  credential_id: credentialId,
-})
-
-/**
- * Build datasource info for online drive
- */
-export const buildOnlineDriveDatasourceInfo = (
-  file: OnlineDriveFile,
-  bucket: string,
-  credentialId: string,
-): Record<string, unknown> => ({
-  bucket,
-  id: file.id,
-  name: file.name,
-  type: file.type,
-  credential_id: credentialId,
-})

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

@@ -18,7 +18,7 @@ import { useDocumentDetail, useDocumentMetadata, useInvalidDocumentList } from '
 import { useCheckSegmentBatchImportProgress, useChildSegmentListKey, useSegmentBatchImport, useSegmentListKey } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
 import { cn } from '@/utils/classnames'
-import Operations from '../components/operations'
+import Operations from '../operations'
 import StatusItem from '../status-item'
 import BatchModal from './batch-modal'
 import Completed from './completed'

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

@@ -1,197 +0,0 @@
-import type { DocumentListResponse } from '@/models/datasets'
-import type { SortType } from '@/service/datasets'
-import { useDebounce, useDebounceFn } from 'ahooks'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { normalizeStatusForQuery, sanitizeStatusValue } from '../status-filter'
-import useDocumentListQueryState from './use-document-list-query-state'
-
-/**
- * Custom hook to manage documents page state including:
- * - Search state (input value, debounced search value)
- * - Filter state (status filter, sort value)
- * - Pagination state (current page, limit)
- * - Selection state (selected document ids)
- * - Polling state (timer control for auto-refresh)
- */
-export function useDocumentsPageState() {
-  const { query, updateQuery } = useDocumentListQueryState()
-
-  // Search state
-  const [inputValue, setInputValue] = useState<string>('')
-  const [searchValue, setSearchValue] = useState<string>('')
-  const debouncedSearchValue = useDebounce(searchValue, { wait: 500 })
-
-  // Filter & sort state
-  const [statusFilterValue, setStatusFilterValue] = useState<string>(() => sanitizeStatusValue(query.status))
-  const [sortValue, setSortValue] = useState<SortType>(query.sort)
-  const normalizedStatusFilterValue = useMemo(
-    () => normalizeStatusForQuery(statusFilterValue),
-    [statusFilterValue],
-  )
-
-  // Pagination state
-  const [currPage, setCurrPage] = useState<number>(query.page - 1)
-  const [limit, setLimit] = useState<number>(query.limit)
-
-  // Selection state
-  const [selectedIds, setSelectedIds] = useState<string[]>([])
-
-  // Polling state
-  const [timerCanRun, setTimerCanRun] = useState(true)
-
-  // Initialize search value from URL on mount
-  useEffect(() => {
-    if (query.keyword) {
-      setInputValue(query.keyword)
-      setSearchValue(query.keyword)
-    }
-  }, []) // Only run on mount
-
-  // Sync local state with URL query changes
-  useEffect(() => {
-    setCurrPage(query.page - 1)
-    setLimit(query.limit)
-    if (query.keyword !== searchValue) {
-      setInputValue(query.keyword)
-      setSearchValue(query.keyword)
-    }
-    setStatusFilterValue((prev) => {
-      const nextValue = sanitizeStatusValue(query.status)
-      return prev === nextValue ? prev : nextValue
-    })
-    setSortValue(query.sort)
-  }, [query])
-
-  // Update URL when search changes
-  useEffect(() => {
-    if (debouncedSearchValue !== query.keyword) {
-      setCurrPage(0)
-      updateQuery({ keyword: debouncedSearchValue, page: 1 })
-    }
-  }, [debouncedSearchValue, query.keyword, updateQuery])
-
-  // Clear selection when search changes
-  useEffect(() => {
-    if (searchValue !== query.keyword)
-      setSelectedIds([])
-  }, [searchValue, query.keyword])
-
-  // Clear selection when status filter changes
-  useEffect(() => {
-    setSelectedIds([])
-  }, [normalizedStatusFilterValue])
-
-  // Page change handler
-  const handlePageChange = useCallback((newPage: number) => {
-    setCurrPage(newPage)
-    updateQuery({ page: newPage + 1 })
-  }, [updateQuery])
-
-  // Limit change handler
-  const handleLimitChange = useCallback((newLimit: number) => {
-    setLimit(newLimit)
-    setCurrPage(0)
-    updateQuery({ limit: newLimit, page: 1 })
-  }, [updateQuery])
-
-  // Debounced search handler
-  const { run: handleSearch } = useDebounceFn(() => {
-    setSearchValue(inputValue)
-  }, { wait: 500 })
-
-  // Input change handler
-  const handleInputChange = useCallback((value: string) => {
-    setInputValue(value)
-    handleSearch()
-  }, [handleSearch])
-
-  // Status filter change handler
-  const handleStatusFilterChange = useCallback((value: string) => {
-    const selectedValue = sanitizeStatusValue(value)
-    setStatusFilterValue(selectedValue)
-    setCurrPage(0)
-    updateQuery({ status: selectedValue, page: 1 })
-  }, [updateQuery])
-
-  // Status filter clear handler
-  const handleStatusFilterClear = useCallback(() => {
-    if (statusFilterValue === 'all')
-      return
-    setStatusFilterValue('all')
-    setCurrPage(0)
-    updateQuery({ status: 'all', page: 1 })
-  }, [statusFilterValue, updateQuery])
-
-  // Sort change handler
-  const handleSortChange = useCallback((value: string) => {
-    const next = value as SortType
-    if (next === sortValue)
-      return
-    setSortValue(next)
-    setCurrPage(0)
-    updateQuery({ sort: next, page: 1 })
-  }, [sortValue, updateQuery])
-
-  // Update polling state based on documents response
-  const updatePollingState = useCallback((documentsRes: DocumentListResponse | undefined) => {
-    if (!documentsRes?.data)
-      return
-
-    let completedNum = 0
-    documentsRes.data.forEach((documentItem) => {
-      const { indexing_status } = documentItem
-      const isEmbedded = indexing_status === 'completed' || indexing_status === 'paused' || indexing_status === 'error'
-      if (isEmbedded)
-        completedNum++
-    })
-
-    const hasIncompleteDocuments = completedNum !== documentsRes.data.length
-    const transientStatuses = ['queuing', 'indexing', 'paused']
-    const shouldForcePolling = normalizedStatusFilterValue === 'all'
-      ? false
-      : transientStatuses.includes(normalizedStatusFilterValue)
-    setTimerCanRun(shouldForcePolling || hasIncompleteDocuments)
-  }, [normalizedStatusFilterValue])
-
-  // Adjust page when total pages change
-  const adjustPageForTotal = useCallback((documentsRes: DocumentListResponse | undefined) => {
-    if (!documentsRes)
-      return
-    const totalPages = Math.ceil(documentsRes.total / limit)
-    if (currPage > 0 && currPage + 1 > totalPages)
-      handlePageChange(totalPages > 0 ? totalPages - 1 : 0)
-  }, [limit, currPage, handlePageChange])
-
-  return {
-    // Search state
-    inputValue,
-    searchValue,
-    debouncedSearchValue,
-    handleInputChange,
-
-    // Filter & sort state
-    statusFilterValue,
-    sortValue,
-    normalizedStatusFilterValue,
-    handleStatusFilterChange,
-    handleStatusFilterClear,
-    handleSortChange,
-
-    // Pagination state
-    currPage,
-    limit,
-    handlePageChange,
-    handleLimitChange,
-
-    // Selection state
-    selectedIds,
-    setSelectedIds,
-
-    // Polling state
-    timerCanRun,
-    updatePollingState,
-    adjustPageForTotal,
-  }
-}
-
-export default useDocumentsPageState

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

@@ -1,55 +1,185 @@
 'use client'
 import type { FC } from 'react'
+import type { Item } from '@/app/components/base/select'
+import type { SortType } from '@/service/datasets'
+import { PlusIcon } from '@heroicons/react/24/solid'
+import { RiDraftLine, RiExternalLinkLine } from '@remixicon/react'
+import { useDebounce, useDebounceFn } from 'ahooks'
 import { useRouter } from 'next/navigation'
-import { useCallback, useEffect } from 'react'
+import * as React from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
+import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { useDocLink } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
 import { DataSourceType } from '@/models/datasets'
 import { useDocumentList, useInvalidDocumentDetail, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { useChildSegmentListKey, useSegmentListKey } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
+import { cn } from '@/utils/classnames'
+import Chip from '../../base/chip'
+import Sort from '../../base/sort'
+import AutoDisabledDocument from '../common/document-status-with-action/auto-disabled-document'
+import StatusWithAction from '../common/document-status-with-action/status-with-action'
 import useEditDocumentMetadata from '../metadata/hooks/use-edit-dataset-metadata'
-import DocumentsHeader from './components/documents-header'
-import EmptyElement from './components/empty-element'
-import List from './components/list'
-import useDocumentsPageState from './hooks/use-documents-page-state'
+import DatasetMetadataDrawer from '../metadata/metadata-dataset/dataset-metadata-drawer'
+import useDocumentListQueryState from './hooks/use-document-list-query-state'
+import List from './list'
+import { normalizeStatusForQuery, sanitizeStatusValue } from './status-filter'
+import { useIndexStatus } from './status-item/hooks'
+import s from './style.module.css'
+
+const FolderPlusIcon = ({ className }: React.SVGProps<SVGElement>) => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
+      <path d="M10.8332 5.83333L9.90355 3.9741C9.63601 3.439 9.50222 3.17144 9.30265 2.97597C9.12615 2.80311 8.91344 2.67164 8.6799 2.59109C8.41581 2.5 8.11668 2.5 7.51841 2.5H4.33317C3.39975 2.5 2.93304 2.5 2.57652 2.68166C2.26292 2.84144 2.00795 3.09641 1.84816 3.41002C1.6665 3.76654 1.6665 4.23325 1.6665 5.16667V5.83333M1.6665 5.83333H14.3332C15.7333 5.83333 16.4334 5.83333 16.9681 6.10582C17.4386 6.3455 17.821 6.72795 18.0607 7.19836C18.3332 7.73314 18.3332 8.4332 18.3332 9.83333V13.5C18.3332 14.9001 18.3332 15.6002 18.0607 16.135C17.821 16.6054 17.4386 16.9878 16.9681 17.2275C16.4334 17.5 15.7333 17.5 14.3332 17.5H5.6665C4.26637 17.5 3.56631 17.5 3.03153 17.2275C2.56112 16.9878 2.17867 16.6054 1.93899 16.135C1.6665 15.6002 1.6665 14.9001 1.6665 13.5V5.83333ZM9.99984 14.1667V9.16667M7.49984 11.6667H12.4998" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+const ThreeDotsIcon = ({ className }: React.SVGProps<SVGElement>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
+      <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
+const NotionIcon = ({ className }: React.SVGProps<SVGElement>) => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
+      <g clipPath="url(#clip0_2164_11263)">
+        <path fillRule="evenodd" clipRule="evenodd" d="M3.5725 18.2611L1.4229 15.5832C0.905706 14.9389 0.625 14.1466 0.625 13.3312V3.63437C0.625 2.4129 1.60224 1.39936 2.86295 1.31328L12.8326 0.632614C13.5569 0.583164 14.2768 0.775682 14.8717 1.17794L18.3745 3.5462C19.0015 3.97012 19.375 4.66312 19.375 5.40266V16.427C19.375 17.6223 18.4141 18.6121 17.1798 18.688L6.11458 19.3692C5.12958 19.4298 4.17749 19.0148 3.5725 18.2611Z" fill="white" />
+        <path d="M7.03006 8.48669V8.35974C7.03006 8.03794 7.28779 7.77104 7.61997 7.74886L10.0396 7.58733L13.3857 12.5147V8.19009L12.5244 8.07528V8.01498C12.5244 7.68939 12.788 7.42074 13.1244 7.4035L15.326 7.29073V7.60755C15.326 7.75628 15.2154 7.88349 15.0638 7.90913L14.534 7.99874V15.0023L13.8691 15.231C13.3136 15.422 12.6952 15.2175 12.3772 14.7377L9.12879 9.83574V14.5144L10.1287 14.7057L10.1147 14.7985C10.0711 15.089 9.82028 15.3087 9.51687 15.3222L7.03006 15.4329C6.99718 15.1205 7.23132 14.841 7.55431 14.807L7.88143 14.7727V8.53453L7.03006 8.48669Z" fill="black" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M12.9218 1.85424L2.95217 2.53491C2.35499 2.57568 1.89209 3.05578 1.89209 3.63437V13.3312C1.89209 13.8748 2.07923 14.403 2.42402 14.8325L4.57362 17.5104C4.92117 17.9434 5.46812 18.1818 6.03397 18.147L17.0991 17.4658C17.6663 17.4309 18.1078 16.9762 18.1078 16.427V5.40266C18.1078 5.06287 17.9362 4.74447 17.6481 4.54969L14.1453 2.18143C13.7883 1.94008 13.3564 1.82457 12.9218 1.85424ZM3.44654 3.78562C3.30788 3.68296 3.37387 3.46909 3.54806 3.4566L12.9889 2.77944C13.2897 2.75787 13.5886 2.8407 13.8318 3.01305L15.7261 4.35508C15.798 4.40603 15.7642 4.51602 15.6752 4.52086L5.67742 5.0646C5.37485 5.08106 5.0762 4.99217 4.83563 4.81406L3.44654 3.78562ZM5.20848 6.76919C5.20848 6.4444 5.47088 6.1761 5.80642 6.15783L16.3769 5.58216C16.7039 5.56435 16.9792 5.81583 16.9792 6.13239V15.6783C16.9792 16.0025 16.7177 16.2705 16.3829 16.2896L5.8793 16.8872C5.51537 16.9079 5.20848 16.6283 5.20848 16.2759V6.76919Z" fill="black" />
+      </g>
+      <defs>
+        <clipPath id="clip0_2164_11263">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+const EmptyElement: FC<{ canAdd: boolean, onClick: () => void, type?: 'upload' | 'sync' }> = ({ canAdd = true, onClick, type = 'upload' }) => {
+  const { t } = useTranslation()
+  return (
+    <div className={s.emptyWrapper}>
+      <div className={s.emptyElement}>
+        <div className={s.emptySymbolIconWrapper}>
+          {type === 'upload' ? <FolderPlusIcon /> : <NotionIcon />}
+        </div>
+        <span className={s.emptyTitle}>
+          {t('list.empty.title', { ns: 'datasetDocuments' })}
+          <ThreeDotsIcon className="relative -left-1.5 -top-3 inline" />
+        </span>
+        <div className={s.emptyTip}>
+          {t(`list.empty.${type}.tip`, { ns: 'datasetDocuments' })}
+        </div>
+        {type === 'upload' && canAdd && (
+          <Button onClick={onClick} className={s.addFileBtn} variant="secondary-accent">
+            <PlusIcon className={s.plusIcon} />
+            {t('list.addFile', { ns: 'datasetDocuments' })}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
 
 type IDocumentsProps = {
   datasetId: string
 }
 
 const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
-  const router = useRouter()
+  const { t } = useTranslation()
+  const docLink = useDocLink()
   const { plan } = useProviderContext()
   const isFreePlan = plan.type === 'sandbox'
+  const { query, updateQuery } = useDocumentListQueryState()
+  const [inputValue, setInputValue] = useState<string>('') // the input value
+  const [searchValue, setSearchValue] = useState<string>('')
+  const [statusFilterValue, setStatusFilterValue] = useState<string>(() => sanitizeStatusValue(query.status))
+  const [sortValue, setSortValue] = useState<SortType>(query.sort)
+  const DOC_INDEX_STATUS_MAP = useIndexStatus()
+  const [currPage, setCurrPage] = React.useState<number>(query.page - 1) // Convert to 0-based index
+  const [limit, setLimit] = useState<number>(query.limit)
 
+  const router = useRouter()
   const dataset = useDatasetDetailContextWithSelector(s => s.dataset)
+  const [timerCanRun, setTimerCanRun] = useState(true)
+  const isDataSourceNotion = dataset?.data_source_type === DataSourceType.NOTION
+  const isDataSourceWeb = dataset?.data_source_type === DataSourceType.WEB
+  const isDataSourceFile = dataset?.data_source_type === DataSourceType.FILE
   const embeddingAvailable = !!dataset?.embedding_available
+  const debouncedSearchValue = useDebounce(searchValue, { wait: 500 })
 
-  // Use custom hook for page state management
-  const {
-    inputValue,
-    debouncedSearchValue,
-    handleInputChange,
-    statusFilterValue,
-    sortValue,
-    normalizedStatusFilterValue,
-    handleStatusFilterChange,
-    handleStatusFilterClear,
-    handleSortChange,
-    currPage,
-    limit,
-    handlePageChange,
-    handleLimitChange,
-    selectedIds,
-    setSelectedIds,
-    timerCanRun,
-    updatePollingState,
-    adjustPageForTotal,
-  } = useDocumentsPageState()
+  const statusFilterItems: Item[] = useMemo(() => [
+    { value: 'all', name: t('list.index.all', { ns: 'datasetDocuments' }) as string },
+    { value: 'queuing', name: DOC_INDEX_STATUS_MAP.queuing.text },
+    { value: 'indexing', name: DOC_INDEX_STATUS_MAP.indexing.text },
+    { value: 'paused', name: DOC_INDEX_STATUS_MAP.paused.text },
+    { value: 'error', name: DOC_INDEX_STATUS_MAP.error.text },
+    { value: 'available', name: DOC_INDEX_STATUS_MAP.available.text },
+    { value: 'enabled', name: DOC_INDEX_STATUS_MAP.enabled.text },
+    { value: 'disabled', name: DOC_INDEX_STATUS_MAP.disabled.text },
+    { value: 'archived', name: DOC_INDEX_STATUS_MAP.archived.text },
+  ], [DOC_INDEX_STATUS_MAP, t])
+  const normalizedStatusFilterValue = useMemo(() => normalizeStatusForQuery(statusFilterValue), [statusFilterValue])
+  const sortItems: Item[] = useMemo(() => [
+    { value: 'created_at', name: t('list.sort.uploadTime', { ns: 'datasetDocuments' }) as string },
+    { value: 'hit_count', name: t('list.sort.hitCount', { ns: 'datasetDocuments' }) as string },
+  ], [t])
+
+  // Initialize search value from URL on mount
+  useEffect(() => {
+    if (query.keyword) {
+      setInputValue(query.keyword)
+      setSearchValue(query.keyword)
+    }
+  }, []) // Only run on mount
+
+  // Sync local state with URL query changes
+  useEffect(() => {
+    setCurrPage(query.page - 1)
+    setLimit(query.limit)
+    if (query.keyword !== searchValue) {
+      setInputValue(query.keyword)
+      setSearchValue(query.keyword)
+    }
+    setStatusFilterValue((prev) => {
+      const nextValue = sanitizeStatusValue(query.status)
+      return prev === nextValue ? prev : nextValue
+    })
+    setSortValue(query.sort)
+  }, [query])
+
+  // Update URL when pagination changes
+  const handlePageChange = (newPage: number) => {
+    setCurrPage(newPage)
+    updateQuery({ page: newPage + 1 }) // Pagination emits 0-based page, convert to 1-based for URL
+  }
+
+  // Update URL when limit changes
+  const handleLimitChange = (newLimit: number) => {
+    setLimit(newLimit)
+    setCurrPage(0) // Reset to first page when limit changes
+    updateQuery({ limit: newLimit, page: 1 })
+  }
+
+  // Update URL when search changes
+  useEffect(() => {
+    if (debouncedSearchValue !== query.keyword) {
+      setCurrPage(0) // Reset to first page when search changes
+      updateQuery({ keyword: debouncedSearchValue, page: 1 })
+    }
+  }, [debouncedSearchValue, query.keyword, updateQuery])
 
-  // Fetch document list
   const { data: documentsRes, isLoading: isListLoading } = useDocumentList({
     datasetId,
     query: {
@@ -62,18 +192,16 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
     refetchInterval: timerCanRun ? 2500 : 0,
   })
 
-  // Update polling state when documents change
-  useEffect(() => {
-    updatePollingState(documentsRes)
-  }, [documentsRes, updatePollingState])
-
-  // Adjust page when total changes
-  useEffect(() => {
-    adjustPageForTotal(documentsRes)
-  }, [documentsRes, adjustPageForTotal])
-
-  // Invalidation hooks
   const invalidDocumentList = useInvalidDocumentList(datasetId)
+
+  useEffect(() => {
+    if (documentsRes) {
+      const totalPages = Math.ceil(documentsRes.total / limit)
+      if (totalPages < currPage + 1)
+        setCurrPage(totalPages === 0 ? 0 : totalPages - 1)
+    }
+  }, [documentsRes])
+
   const invalidDocumentDetail = useInvalidDocumentDetail()
   const invalidChunkList = useInvalid(useSegmentListKey)
   const invalidChildChunkList = useInvalid(useChildSegmentListKey)
@@ -85,9 +213,73 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
       invalidChunkList()
       invalidChildChunkList()
     }, 5000)
-  }, [invalidDocumentList, invalidDocumentDetail, invalidChunkList, invalidChildChunkList])
+  }, [])
+
+  useEffect(() => {
+    let completedNum = 0
+    let percent = 0
+    documentsRes?.data?.forEach((documentItem) => {
+      const { indexing_status, completed_segments, total_segments } = documentItem
+      const isEmbedded = indexing_status === 'completed' || indexing_status === 'paused' || indexing_status === 'error'
+
+      if (isEmbedded)
+        completedNum++
+
+      const completedCount = completed_segments || 0
+      const totalCount = total_segments || 0
+      if (totalCount === 0 && completedCount === 0) {
+        percent = isEmbedded ? 100 : 0
+      }
+      else {
+        const per = Math.round(completedCount * 100 / totalCount)
+        percent = per > 100 ? 100 : per
+      }
+      return {
+        ...documentItem,
+        percent,
+      }
+    })
+
+    const hasIncompleteDocuments = completedNum !== documentsRes?.data?.length
+    const transientStatuses = ['queuing', 'indexing', 'paused']
+    const shouldForcePolling = normalizedStatusFilterValue === 'all'
+      ? false
+      : transientStatuses.includes(normalizedStatusFilterValue)
+    setTimerCanRun(shouldForcePolling || hasIncompleteDocuments)
+  }, [documentsRes, normalizedStatusFilterValue])
+  const total = documentsRes?.total || 0
+
+  const routeToDocCreate = () => {
+    // if dataset is created from pipeline, go to create from pipeline page
+    if (dataset?.runtime_mode === 'rag_pipeline') {
+      router.push(`/datasets/${datasetId}/documents/create-from-pipeline`)
+      return
+    }
+    router.push(`/datasets/${datasetId}/documents/create`)
+  }
+
+  const documentsList = documentsRes?.data
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+
+  // Clear selection when search changes to avoid confusion
+  useEffect(() => {
+    if (searchValue !== query.keyword)
+      setSelectedIds([])
+  }, [searchValue, query.keyword])
+
+  useEffect(() => {
+    setSelectedIds([])
+  }, [normalizedStatusFilterValue])
+
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchValue(inputValue)
+  }, { wait: 500 })
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value)
+    handleSearch()
+  }
 
-  // Metadata editing hook
   const {
     isShowEditModal: isShowEditMetadataModal,
     showEditModal: showEditMetadataModal,
@@ -105,84 +297,130 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
     onUpdateDocList: invalidDocumentList,
   })
 
-  // Route to document creation page
-  const routeToDocCreate = useCallback(() => {
-    if (dataset?.runtime_mode === 'rag_pipeline') {
-      router.push(`/datasets/${datasetId}/documents/create-from-pipeline`)
-      return
-    }
-    router.push(`/datasets/${datasetId}/documents/create`)
-  }, [dataset?.runtime_mode, datasetId, router])
-
-  const total = documentsRes?.total || 0
-  const documentsList = documentsRes?.data
-
-  // Render content based on loading and data state
-  const renderContent = () => {
-    if (isListLoading)
-      return <Loading type="app" />
-
-    if (total > 0) {
-      return (
-        <List
-          embeddingAvailable={embeddingAvailable}
-          documents={documentsList || []}
-          datasetId={datasetId}
-          onUpdate={handleUpdate}
-          selectedIds={selectedIds}
-          onSelectedIdChange={setSelectedIds}
-          statusFilterValue={normalizedStatusFilterValue}
-          remoteSortValue={sortValue}
-          pagination={{
-            total,
-            limit,
-            onLimitChange: handleLimitChange,
-            current: currPage,
-            onChange: handlePageChange,
-          }}
-          onManageMetadata={showEditMetadataModal}
-        />
-      )
-    }
-
-    const isDataSourceNotion = dataset?.data_source_type === DataSourceType.NOTION
-    return (
-      <EmptyElement
-        canAdd={embeddingAvailable}
-        onClick={routeToDocCreate}
-        type={isDataSourceNotion ? 'sync' : 'upload'}
-      />
-    )
-  }
-
   return (
     <div className="flex h-full flex-col">
-      <DocumentsHeader
-        datasetId={datasetId}
-        dataSourceType={dataset?.data_source_type}
-        embeddingAvailable={embeddingAvailable}
-        isFreePlan={isFreePlan}
-        statusFilterValue={statusFilterValue}
-        sortValue={sortValue}
-        inputValue={inputValue}
-        onStatusFilterChange={handleStatusFilterChange}
-        onStatusFilterClear={handleStatusFilterClear}
-        onSortChange={handleSortChange}
-        onInputChange={handleInputChange}
-        isShowEditMetadataModal={isShowEditMetadataModal}
-        showEditMetadataModal={showEditMetadataModal}
-        hideEditMetadataModal={hideEditMetadataModal}
-        datasetMetaData={datasetMetaData}
-        builtInMetaData={builtInMetaData}
-        builtInEnabled={!!builtInEnabled}
-        onAddMetaData={handleAddMetaData}
-        onRenameMetaData={handleRename}
-        onDeleteMetaData={handleDeleteMetaData}
-        onBuiltInEnabledChange={setBuiltInEnabled}
-        onAddDocument={routeToDocCreate}
-      />
+      <div className="flex flex-col justify-center gap-1 px-6 pt-4">
+        <h1 className="text-base font-semibold text-text-primary">{t('list.title', { ns: 'datasetDocuments' })}</h1>
+        <div className="flex items-center space-x-0.5 text-sm font-normal text-text-tertiary">
+          <span>{t('list.desc', { ns: 'datasetDocuments' })}</span>
+          <a
+            className="flex items-center text-text-accent"
+            target="_blank"
+            href={docLink('/guides/knowledge-base/integrate-knowledge-within-application')}
+          >
+            <span>{t('list.learnMore', { ns: 'datasetDocuments' })}</span>
+            <RiExternalLinkLine className="h-3 w-3" />
+          </a>
+        </div>
+      </div>
       <div className="flex h-0 grow flex-col px-6 pt-4">
-        {renderContent()}
+        <div className="flex flex-wrap items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Chip
+              className="w-[160px]"
+              showLeftIcon={false}
+              value={statusFilterValue}
+              items={statusFilterItems}
+              onSelect={(item) => {
+                const selectedValue = sanitizeStatusValue(item?.value ? String(item.value) : '')
+                setStatusFilterValue(selectedValue)
+                setCurrPage(0)
+                updateQuery({ status: selectedValue, page: 1 })
+              }}
+              onClear={() => {
+                if (statusFilterValue === 'all')
+                  return
+                setStatusFilterValue('all')
+                setCurrPage(0)
+                updateQuery({ status: 'all', page: 1 })
+              }}
+            />
+            <Input
+              showLeftIcon
+              showClearIcon
+              wrapperClassName="!w-[200px]"
+              value={inputValue}
+              onChange={e => handleInputChange(e.target.value)}
+              onClear={() => handleInputChange('')}
+            />
+            <div className="h-3.5 w-px bg-divider-regular"></div>
+            <Sort
+              order={sortValue.startsWith('-') ? '-' : ''}
+              value={sortValue.replace('-', '')}
+              items={sortItems}
+              onSelect={(value) => {
+                const next = String(value) as SortType
+                if (next === sortValue)
+                  return
+                setSortValue(next)
+                setCurrPage(0)
+                updateQuery({ sort: next, page: 1 })
+              }}
+            />
+          </div>
+          <div className="flex !h-8 items-center justify-center gap-2">
+            {!isFreePlan && <AutoDisabledDocument datasetId={datasetId} />}
+            <IndexFailed datasetId={datasetId} />
+            {!embeddingAvailable && <StatusWithAction type="warning" description={t('embeddingModelNotAvailable', { ns: 'dataset' })} />}
+            {embeddingAvailable && (
+              <Button variant="secondary" className="shrink-0" onClick={showEditMetadataModal}>
+                <RiDraftLine className="mr-1 size-4" />
+                {t('metadata.metadata', { ns: 'dataset' })}
+              </Button>
+            )}
+            {isShowEditMetadataModal && (
+              <DatasetMetadataDrawer
+                userMetadata={datasetMetaData || []}
+                onClose={hideEditMetadataModal}
+                onAdd={handleAddMetaData}
+                onRename={handleRename}
+                onRemove={handleDeleteMetaData}
+                builtInMetadata={builtInMetaData || []}
+                isBuiltInEnabled={!!builtInEnabled}
+                onIsBuiltInEnabledChange={setBuiltInEnabled}
+              />
+            )}
+            {embeddingAvailable && (
+              <Button variant="primary" onClick={routeToDocCreate} className="shrink-0">
+                <PlusIcon className={cn('mr-2 h-4 w-4 stroke-current')} />
+                {isDataSourceNotion && t('list.addPages', { ns: 'datasetDocuments' })}
+                {isDataSourceWeb && t('list.addUrl', { ns: 'datasetDocuments' })}
+                {(!dataset?.data_source_type || isDataSourceFile) && t('list.addFile', { ns: 'datasetDocuments' })}
+              </Button>
+            )}
+          </div>
+        </div>
+        {isListLoading
+          ? <Loading type="app" />
+          // eslint-disable-next-line sonarjs/no-nested-conditional
+          : total > 0
+            ? (
+                <List
+                  embeddingAvailable={embeddingAvailable}
+                  documents={documentsList || []}
+                  datasetId={datasetId}
+                  onUpdate={handleUpdate}
+                  selectedIds={selectedIds}
+                  onSelectedIdChange={setSelectedIds}
+                  statusFilterValue={normalizedStatusFilterValue}
+                  remoteSortValue={sortValue}
+                  pagination={{
+                    total,
+                    limit,
+                    onLimitChange: handleLimitChange,
+                    current: currPage,
+                    onChange: handlePageChange,
+                  }}
+                  onManageMetadata={showEditMetadataModal}
+                />
+              )
+            : (
+                <EmptyElement
+                  canAdd={embeddingAvailable}
+                  onClick={routeToDocCreate}
+                  type={isDataSourceNotion ? 'sync' : 'upload'}
+                />
+              )}
       </div>
     </div>
   )

web/app/components/datasets/documents/list.tsx

@@ -16,16 +16,13 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
-import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import NotionIcon from '@/app/components/base/notion-icon'
 import Pagination from '@/app/components/base/pagination'
 import Toast from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
-import ChunkingModeLabel from '@/app/components/datasets/common/chunking-mode-label'
 import { normalizeStatusForQuery } from '@/app/components/datasets/documents/status-filter'
 import { extensionToFileType } from '@/app/components/datasets/hit-testing/utils/extension-to-file-type'
 import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch/modal'
-import useBatchEditDocumentMetadata from '@/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata'
 import { useDatasetDetailContextWithSelector as useDatasetDetailContext } from '@/context/dataset-detail'
 import useTimestamp from '@/hooks/use-timestamp'
 import { ChunkingMode, DataSourceType, DocumentActionType } from '@/models/datasets'
@@ -34,11 +31,14 @@ import { useDocumentArchive, useDocumentBatchRetryIndex, useDocumentDelete, useD
 import { asyncRunSafe } from '@/utils'
 import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
-import BatchAction from '../detail/completed/common/batch-action'
-import StatusItem from '../status-item'
-import s from '../style.module.css'
+import FileTypeIcon from '../../base/file-uploader/file-type-icon'
+import ChunkingModeLabel from '../common/chunking-mode-label'
+import useBatchEditDocumentMetadata from '../metadata/hooks/use-batch-edit-document-metadata'
+import BatchAction from './detail/completed/common/batch-action'
 import Operations from './operations'
 import RenameModal from './rename-modal'
+import StatusItem from './status-item'
+import s from './style.module.css'
 
 export const renderTdValue = (value: string | number | null, isEmptyStyle = false) => {
   return (

web/app/components/datasets/documents/operations.tsx

@@ -1,4 +1,4 @@
-import type { OperationName } from '../types'
+import type { OperationName } from './types'
 import type { CommonResponse } from '@/models/common'
 import {
   RiArchive2Line,
@@ -17,12 +17,6 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import Confirm from '@/app/components/base/confirm'
-import Divider from '@/app/components/base/divider'
-import CustomPopover from '@/app/components/base/popover'
-import Switch from '@/app/components/base/switch'
-import { ToastContext } from '@/app/components/base/toast'
-import Tooltip from '@/app/components/base/tooltip'
 import { DataSourceType, DocumentActionType } from '@/models/datasets'
 import {
   useDocumentArchive,
@@ -37,8 +31,14 @@ import {
 } from '@/service/knowledge/use-document'
 import { asyncRunSafe } from '@/utils'
 import { cn } from '@/utils/classnames'
-import s from '../style.module.css'
+import Confirm from '../../base/confirm'
+import Divider from '../../base/divider'
+import CustomPopover from '../../base/popover'
+import Switch from '../../base/switch'
+import { ToastContext } from '../../base/toast'
+import Tooltip from '../../base/tooltip'
 import RenameModal from './rename-modal'
+import s from './style.module.css'
 
 type OperationsProps = {
   embeddingAvailable: boolean

web/app/components/datasets/documents/rename-modal.tsx

@@ -7,8 +7,8 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
-import Toast from '@/app/components/base/toast'
 import { renameDocumentName } from '@/service/datasets'
+import Toast from '../../base/toast'
 
 type Props = {
   datasetId: string

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -30,7 +30,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
   onSave,
 }) => {
   const { t } = useTranslation()
-  const docLink = useDocLink('https://docs.dify.ai/versions/3-0-x')
+  const docLink = useDocLink()
   const [localeData, setLocaleData] = useState(data)
   const [loading, setLoading] = useState(false)
   const { notify } = useToastContext()
@@ -102,7 +102,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
         <div className="flex h-9 items-center justify-between text-sm font-medium text-text-primary">
           {t('apiBasedExtension.modal.apiEndpoint.title', { ns: 'common' })}
           <a
-            href={docLink('/user-guide/extension/api-based-extension/README#api-based-extension')}
+            href={docLink('/guides/extension/api-based-extension/README')}
             target="_blank"
             rel="noopener noreferrer"
             className="group flex items-center text-xs font-normal text-text-accent"

web/app/components/plugins/card/index.spec.tsx

@@ -897,58 +897,6 @@ describe('Icon', () => {
       const iconDiv = container.firstChild as HTMLElement
       expect(iconDiv).toHaveStyle({ backgroundImage: 'url(/icon?name=test&size=large)' })
     })
-
-    it('should not render status indicators when src is object with installed=true', () => {
-      render(<Icon src={{ content: '🎉', background: '#fff' }} installed={true} />)
-
-      // Status indicators should not render for object src
-      expect(screen.queryByTestId('ri-check-line')).not.toBeInTheDocument()
-    })
-
-    it('should not render status indicators when src is object with installFailed=true', () => {
-      render(<Icon src={{ content: '🎉', background: '#fff' }} installFailed={true} />)
-
-      // Status indicators should not render for object src
-      expect(screen.queryByTestId('ri-close-line')).not.toBeInTheDocument()
-    })
-
-    it('should render object src with all size variants', () => {
-      const sizes: Array<'xs' | 'tiny' | 'small' | 'medium' | 'large'> = ['xs', 'tiny', 'small', 'medium', 'large']
-
-      sizes.forEach((size) => {
-        const { unmount } = render(<Icon src={{ content: '🔗', background: '#fff' }} size={size} />)
-        expect(screen.getByTestId('app-icon')).toHaveAttribute('data-size', size)
-        unmount()
-      })
-    })
-
-    it('should render object src with custom className', () => {
-      const { container } = render(
-        <Icon src={{ content: '🎉', background: '#fff' }} className="custom-object-icon" />,
-      )
-
-      expect(container.querySelector('.custom-object-icon')).toBeInTheDocument()
-    })
-
-    it('should pass correct props to AppIcon for object src', () => {
-      render(<Icon src={{ content: '😀', background: '#123456' }} />)
-
-      const appIcon = screen.getByTestId('app-icon')
-      expect(appIcon).toHaveAttribute('data-icon', '😀')
-      expect(appIcon).toHaveAttribute('data-background', '#123456')
-      expect(appIcon).toHaveAttribute('data-icon-type', 'emoji')
-    })
-
-    it('should render inner icon only when shouldUseMcpIcon returns true', () => {
-      // Test with MCP icon content
-      const { unmount } = render(<Icon src={{ content: '🔗', background: '#fff' }} />)
-      expect(screen.getByTestId('inner-icon')).toBeInTheDocument()
-      unmount()
-
-      // Test without MCP icon content
-      render(<Icon src={{ content: '🎉', background: '#fff' }} />)
-      expect(screen.queryByTestId('inner-icon')).not.toBeInTheDocument()
-    })
   })
 })
 

web/app/components/plugins/plugin-auth/authorized/authorized-modals.tsx

@@ -0,0 +1,65 @@
+import type { PluginPayload } from '../types'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Confirm from '@/app/components/base/confirm'
+import ApiKeyModal from '../authorize/api-key-modal'
+
+type AuthorizedModalsProps = {
+  pluginPayload: PluginPayload
+  // Delete confirmation
+  deleteCredentialId: string | null
+  doingAction: boolean
+  onDeleteConfirm: () => void
+  onDeleteCancel: () => void
+  // Edit modal
+  editValues: Record<string, unknown> | null
+  disabled?: boolean
+  onEditClose: () => void
+  onRemove: () => void
+  onUpdate?: () => void
+}
+
+/**
+ * Component for managing authorized modals (delete confirmation and edit modal)
+ * Extracted to reduce complexity in the main Authorized component
+ */
+const AuthorizedModals = ({
+  pluginPayload,
+  deleteCredentialId,
+  doingAction,
+  onDeleteConfirm,
+  onDeleteCancel,
+  editValues,
+  disabled,
+  onEditClose,
+  onRemove,
+  onUpdate,
+}: AuthorizedModalsProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      {deleteCredentialId && (
+        <Confirm
+          isShow
+          title={t('list.delete.title', { ns: 'datasetDocuments' })}
+          isDisabled={doingAction}
+          onCancel={onDeleteCancel}
+          onConfirm={onDeleteConfirm}
+        />
+      )}
+      {!!editValues && (
+        <ApiKeyModal
+          pluginPayload={pluginPayload}
+          editValues={editValues}
+          onClose={onEditClose}
+          onRemove={onRemove}
+          disabled={disabled || doingAction}
+          onUpdate={onUpdate}
+        />
+      )}
+    </>
+  )
+}
+
+export default memo(AuthorizedModals)

web/app/components/plugins/plugin-auth/authorized/credential-section.tsx

@@ -0,0 +1,123 @@
+import type { Credential } from '../types'
+import { memo } from 'react'
+import { cn } from '@/utils/classnames'
+import Item from './item'
+
+type CredentialItemHandlers = {
+  onDelete?: (id: string) => void
+  onEdit?: (id: string, values: Record<string, unknown>) => void
+  onSetDefault?: (id: string) => void
+  onRename?: (payload: { credential_id: string, name: string }) => void
+  onItemClick?: (id: string) => void
+}
+
+type CredentialSectionProps = CredentialItemHandlers & {
+  title: string
+  credentials: Credential[]
+  disabled?: boolean
+  disableRename?: boolean
+  disableEdit?: boolean
+  disableDelete?: boolean
+  disableSetDefault?: boolean
+  showSelectedIcon?: boolean
+  selectedCredentialId?: string
+}
+
+/**
+ * Reusable component for rendering a section of credentials
+ * Used for OAuth, API Key, and extra authorization items
+ */
+const CredentialSection = ({
+  title,
+  credentials,
+  disabled,
+  disableRename,
+  disableEdit,
+  disableDelete,
+  disableSetDefault,
+  showSelectedIcon,
+  selectedCredentialId,
+  onDelete,
+  onEdit,
+  onSetDefault,
+  onRename,
+  onItemClick,
+}: CredentialSectionProps) => {
+  if (!credentials.length)
+    return null
+
+  return (
+    <div className="p-1">
+      <div className={cn(
+        'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
+        showSelectedIcon && 'pl-7',
+      )}
+      >
+        {title}
+      </div>
+      {credentials.map(credential => (
+        <Item
+          key={credential.id}
+          credential={credential}
+          disabled={disabled}
+          disableRename={disableRename}
+          disableEdit={disableEdit}
+          disableDelete={disableDelete}
+          disableSetDefault={disableSetDefault}
+          showSelectedIcon={showSelectedIcon}
+          selectedCredentialId={selectedCredentialId}
+          onDelete={onDelete}
+          onEdit={onEdit}
+          onSetDefault={onSetDefault}
+          onRename={onRename}
+          onItemClick={onItemClick}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default memo(CredentialSection)
+
+type ExtraCredentialSectionProps = {
+  credentials?: Credential[]
+  disabled?: boolean
+  onItemClick?: (id: string) => void
+  showSelectedIcon?: boolean
+  selectedCredentialId?: string
+}
+
+/**
+ * Specialized section for extra authorization items (read-only)
+ */
+export const ExtraCredentialSection = memo(({
+  credentials,
+  disabled,
+  onItemClick,
+  showSelectedIcon,
+  selectedCredentialId,
+}: ExtraCredentialSectionProps) => {
+  if (!credentials?.length)
+    return null
+
+  return (
+    <div className="p-1">
+      {credentials.map(credential => (
+        <Item
+          key={credential.id}
+          credential={credential}
+          disabled={disabled}
+          onItemClick={onItemClick}
+          disableRename
+          disableEdit
+          disableDelete
+          disableSetDefault
+          showSelectedIcon={showSelectedIcon}
+          selectedCredentialId={selectedCredentialId}
+        />
+      ))}
+    </div>
+  )
+})
+
+ExtraCredentialSection.displayName = 'ExtraCredentialSection'

web/app/components/plugins/plugin-auth/authorized/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCredentialActions } from './use-credential-actions'
+export { useModalState } from './use-modal-state'

web/app/components/plugins/plugin-auth/authorized/hooks/use-credential-actions.ts

@@ -0,0 +1,116 @@
+import type { MutableRefObject } from 'react'
+import type { PluginPayload } from '../../types'
+import {
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToastContext } from '@/app/components/base/toast'
+import {
+  useDeletePluginCredentialHook,
+  useSetPluginDefaultCredentialHook,
+  useUpdatePluginCredentialHook,
+} from '../../hooks/use-credential'
+
+type UseCredentialActionsOptions = {
+  pluginPayload: PluginPayload
+  onUpdate?: () => void
+}
+
+type UseCredentialActionsReturn = {
+  doingAction: boolean
+  doingActionRef: MutableRefObject<boolean>
+  pendingOperationCredentialIdRef: MutableRefObject<string | null>
+  handleSetDoingAction: (doing: boolean) => void
+  handleDelete: (credentialId: string) => Promise<void>
+  handleSetDefault: (id: string) => Promise<void>
+  handleRename: (payload: { credential_id: string, name: string }) => Promise<void>
+}
+
+/**
+ * Custom hook for credential CRUD operations
+ * Consolidates delete, setDefault, rename actions with shared loading state
+ */
+export const useCredentialActions = ({
+  pluginPayload,
+  onUpdate,
+}: UseCredentialActionsOptions): UseCredentialActionsReturn => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+
+  const [doingAction, setDoingAction] = useState(false)
+  const doingActionRef = useRef(doingAction)
+  const pendingOperationCredentialIdRef = useRef<string | null>(null)
+
+  const handleSetDoingAction = useCallback((doing: boolean) => {
+    doingActionRef.current = doing
+    setDoingAction(doing)
+  }, [])
+
+  const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
+  const { mutateAsync: setPluginDefaultCredential } = useSetPluginDefaultCredentialHook(pluginPayload)
+  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
+
+  const showSuccessNotification = useCallback(() => {
+    notify({
+      type: 'success',
+      message: t('api.actionSuccess', { ns: 'common' }),
+    })
+  }, [notify, t])
+
+  const handleDelete = useCallback(async (credentialId: string) => {
+    if (doingActionRef.current)
+      return
+    try {
+      handleSetDoingAction(true)
+      await deletePluginCredential({ credential_id: credentialId })
+      showSuccessNotification()
+      onUpdate?.()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [deletePluginCredential, onUpdate, showSuccessNotification, handleSetDoingAction])
+
+  const handleSetDefault = useCallback(async (id: string) => {
+    if (doingActionRef.current)
+      return
+    try {
+      handleSetDoingAction(true)
+      await setPluginDefaultCredential(id)
+      showSuccessNotification()
+      onUpdate?.()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [setPluginDefaultCredential, onUpdate, showSuccessNotification, handleSetDoingAction])
+
+  const handleRename = useCallback(async (payload: {
+    credential_id: string
+    name: string
+  }) => {
+    if (doingActionRef.current)
+      return
+    try {
+      handleSetDoingAction(true)
+      await updatePluginCredential(payload)
+      showSuccessNotification()
+      onUpdate?.()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [updatePluginCredential, showSuccessNotification, handleSetDoingAction, onUpdate])
+
+  return {
+    doingAction,
+    doingActionRef,
+    pendingOperationCredentialIdRef,
+    handleSetDoingAction,
+    handleDelete,
+    handleSetDefault,
+    handleRename,
+  }
+}

web/app/components/plugins/plugin-auth/authorized/hooks/use-modal-state.ts

@@ -0,0 +1,71 @@
+import type { MutableRefObject } from 'react'
+import {
+  useCallback,
+  useState,
+} from 'react'
+
+type CredentialValues = Record<string, unknown>
+
+type UseModalStateOptions = {
+  pendingOperationCredentialIdRef: MutableRefObject<string | null>
+}
+
+type UseModalStateReturn = {
+  // Delete modal state
+  deleteCredentialId: string | null
+  openDeleteConfirm: (credentialId?: string) => void
+  closeDeleteConfirm: () => void
+  // Edit modal state
+  editValues: CredentialValues | null
+  openEditModal: (id: string, values: CredentialValues) => void
+  closeEditModal: () => void
+  // Remove action (used from edit modal)
+  handleRemoveFromEdit: () => void
+}
+
+/**
+ * Custom hook for managing modal states
+ * Handles delete confirmation and edit modal with shared pending credential tracking
+ */
+export const useModalState = ({
+  pendingOperationCredentialIdRef,
+}: UseModalStateOptions): UseModalStateReturn => {
+  const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
+  const [editValues, setEditValues] = useState<CredentialValues | null>(null)
+
+  const openDeleteConfirm = useCallback((credentialId?: string) => {
+    if (credentialId)
+      pendingOperationCredentialIdRef.current = credentialId
+
+    setDeleteCredentialId(pendingOperationCredentialIdRef.current)
+  }, [pendingOperationCredentialIdRef])
+
+  const closeDeleteConfirm = useCallback(() => {
+    setDeleteCredentialId(null)
+    pendingOperationCredentialIdRef.current = null
+  }, [pendingOperationCredentialIdRef])
+
+  const openEditModal = useCallback((id: string, values: CredentialValues) => {
+    pendingOperationCredentialIdRef.current = id
+    setEditValues(values)
+  }, [pendingOperationCredentialIdRef])
+
+  const closeEditModal = useCallback(() => {
+    setEditValues(null)
+    pendingOperationCredentialIdRef.current = null
+  }, [pendingOperationCredentialIdRef])
+
+  const handleRemoveFromEdit = useCallback(() => {
+    setDeleteCredentialId(pendingOperationCredentialIdRef.current)
+  }, [pendingOperationCredentialIdRef])
+
+  return {
+    deleteCredentialId,
+    openDeleteConfirm,
+    closeDeleteConfirm,
+    editValues,
+    openEditModal,
+    closeEditModal,
+    handleRemoveFromEdit,
+  }
+}

web/app/components/plugins/plugin-auth/authorized/index.tsx

@@ -8,29 +8,23 @@ import {
 import {
   memo,
   useCallback,
-  useRef,
+  useMemo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useToastContext } from '@/app/components/base/toast'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Authorize from '../authorize'
-import ApiKeyModal from '../authorize/api-key-modal'
-import {
-  useDeletePluginCredentialHook,
-  useSetPluginDefaultCredentialHook,
-  useUpdatePluginCredentialHook,
-} from '../hooks/use-credential'
 import { CredentialTypeEnum } from '../types'
-import Item from './item'
+import AuthorizedModals from './authorized-modals'
+import CredentialSection, { ExtraCredentialSection } from './credential-section'
+import { useCredentialActions, useModalState } from './hooks'
 
 type AuthorizedProps = {
   pluginPayload: PluginPayload
@@ -53,6 +47,7 @@ type AuthorizedProps = {
   onUpdate?: () => void
   notAllowCustomCredential?: boolean
 }
+
 const Authorized = ({
   pluginPayload,
   credentials,
@@ -75,105 +70,55 @@ const Authorized = ({
   notAllowCustomCredential,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
+
+  // Dropdown open state
   const [isLocalOpen, setIsLocalOpen] = useState(false)
   const mergedIsOpen = isOpen ?? isLocalOpen
   const setMergedIsOpen = useCallback((open: boolean) => {
-    if (onOpenChange)
-      onOpenChange(open)
-
+    onOpenChange?.(open)
     setIsLocalOpen(open)
   }, [onOpenChange])
-  const oAuthCredentials = credentials.filter(credential => credential.credential_type === CredentialTypeEnum.OAUTH2)
-  const apiKeyCredentials = credentials.filter(credential => credential.credential_type === CredentialTypeEnum.API_KEY)
-  const pendingOperationCredentialId = useRef<string | null>(null)
-  const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
-  const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
-  const openConfirm = useCallback((credentialId?: string) => {
-    if (credentialId)
-      pendingOperationCredentialId.current = credentialId
 
-    setDeleteCredentialId(pendingOperationCredentialId.current)
-  }, [])
-  const closeConfirm = useCallback(() => {
-    setDeleteCredentialId(null)
-    pendingOperationCredentialId.current = null
-  }, [])
-  const [doingAction, setDoingAction] = useState(false)
-  const doingActionRef = useRef(doingAction)
-  const handleSetDoingAction = useCallback((doing: boolean) => {
-    doingActionRef.current = doing
-    setDoingAction(doing)
-  }, [])
-  const handleConfirm = useCallback(async () => {
-    if (doingActionRef.current)
+  // Credential actions hook
+  const {
+    doingAction,
+    doingActionRef,
+    pendingOperationCredentialIdRef,
+    handleSetDefault,
+    handleRename,
+    handleDelete,
+  } = useCredentialActions({ pluginPayload, onUpdate })
+
+  // Modal state management hook
+  const {
+    deleteCredentialId,
+    openDeleteConfirm,
+    closeDeleteConfirm,
+    editValues,
+    openEditModal,
+    closeEditModal,
+    handleRemoveFromEdit,
+  } = useModalState({ pendingOperationCredentialIdRef })
+
+  // Handle delete confirmation
+  const handleDeleteConfirm = useCallback(async () => {
+    if (doingActionRef.current || !pendingOperationCredentialIdRef.current)
       return
-    if (!pendingOperationCredentialId.current) {
-      setDeleteCredentialId(null)
-      return
-    }
-    try {
-      handleSetDoingAction(true)
-      await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
-      onUpdate?.()
-      setDeleteCredentialId(null)
-      pendingOperationCredentialId.current = null
-    }
-    finally {
-      handleSetDoingAction(false)
-    }
-  }, [deletePluginCredential, onUpdate, notify, t, handleSetDoingAction])
-  const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
-  const handleEdit = useCallback((id: string, values: Record<string, any>) => {
-    pendingOperationCredentialId.current = id
-    setEditValues(values)
-  }, [])
-  const handleRemove = useCallback(() => {
-    setDeleteCredentialId(pendingOperationCredentialId.current)
-  }, [])
-  const { mutateAsync: setPluginDefaultCredential } = useSetPluginDefaultCredentialHook(pluginPayload)
-  const handleSetDefault = useCallback(async (id: string) => {
-    if (doingActionRef.current)
-      return
-    try {
-      handleSetDoingAction(true)
-      await setPluginDefaultCredential(id)
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
-      onUpdate?.()
-    }
-    finally {
-      handleSetDoingAction(false)
-    }
-  }, [setPluginDefaultCredential, onUpdate, notify, t, handleSetDoingAction])
-  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
-  const handleRename = useCallback(async (payload: {
-    credential_id: string
-    name: string
-  }) => {
-    if (doingActionRef.current)
-      return
-    try {
-      handleSetDoingAction(true)
-      await updatePluginCredential(payload)
-      notify({
-        type: 'success',
-        message: t('api.actionSuccess', { ns: 'common' }),
-      })
-      onUpdate?.()
-    }
-    finally {
-      handleSetDoingAction(false)
-    }
-  }, [updatePluginCredential, notify, t, handleSetDoingAction, onUpdate])
-  const unavailableCredentials = credentials.filter(credential => credential.not_allowed_to_use)
-  const unavailableCredential = credentials.find(credential => credential.not_allowed_to_use && credential.is_default)
+    await handleDelete(pendingOperationCredentialIdRef.current)
+    closeDeleteConfirm()
+  }, [doingActionRef, pendingOperationCredentialIdRef, handleDelete, closeDeleteConfirm])
+
+  // Filter credentials by type
+  const { oAuthCredentials, apiKeyCredentials } = useMemo(() => ({
+    oAuthCredentials: credentials.filter(c => c.credential_type === CredentialTypeEnum.OAUTH2),
+    apiKeyCredentials: credentials.filter(c => c.credential_type === CredentialTypeEnum.API_KEY),
+  }), [credentials])
+
+  // Unavailable credentials info
+  const { unavailableCredentials, hasUnavailableDefault } = useMemo(() => ({
+    unavailableCredentials: credentials.filter(c => c.not_allowed_to_use),
+    hasUnavailableDefault: credentials.some(c => c.not_allowed_to_use && c.is_default),
+  }), [credentials])
 
   return (
     <>
@@ -188,33 +133,27 @@ const Authorized = ({
           onClick={() => setMergedIsOpen(!mergedIsOpen)}
           asChild
         >
-          {
-            renderTrigger
-              ? renderTrigger(mergedIsOpen)
-              : (
-                  <Button
-                    className={cn(
-                      'w-full',
-                      isOpen && 'bg-components-button-secondary-bg-hover',
-                    )}
-                  >
-                    <Indicator className="mr-2" color={unavailableCredential ? 'gray' : 'green'} />
-                    {credentials.length}
-&nbsp;
-                    {
-                      credentials.length > 1
-                        ? t('auth.authorizations', { ns: 'plugin' })
-                        : t('auth.authorization', { ns: 'plugin' })
-                    }
-                    {
-                      !!unavailableCredentials.length && (
-                        ` (${unavailableCredentials.length} ${t('auth.unavailable', { ns: 'plugin' })})`
-                      )
-                    }
-                    <RiArrowDownSLine className="ml-0.5 h-4 w-4" />
-                  </Button>
-                )
-          }
+          {renderTrigger
+            ? renderTrigger(mergedIsOpen)
+            : (
+                <Button
+                  className={cn(
+                    'w-full',
+                    isOpen && 'bg-components-button-secondary-bg-hover',
+                  )}
+                >
+                  <Indicator className="mr-2" color={hasUnavailableDefault ? 'gray' : 'green'} />
+                  {credentials.length}
+                  &nbsp;
+                  {credentials.length > 1
+                    ? t('auth.authorizations', { ns: 'plugin' })
+                    : t('auth.authorization', { ns: 'plugin' })}
+                  {!!unavailableCredentials.length && (
+                    ` (${unavailableCredentials.length} ${t('auth.unavailable', { ns: 'plugin' })})`
+                  )}
+                  <RiArrowDownSLine className="ml-0.5 h-4 w-4" />
+                </Button>
+              )}
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[100]">
           <div className={cn(
@@ -223,137 +162,72 @@ const Authorized = ({
           )}
           >
             <div className="py-1">
-              {
-                !!extraAuthorizationItems?.length && (
-                  <div className="p-1">
-                    {
-                      extraAuthorizationItems.map(credential => (
-                        <Item
-                          key={credential.id}
-                          credential={credential}
-                          disabled={disabled}
-                          onItemClick={onItemClick}
-                          disableRename
-                          disableEdit
-                          disableDelete
-                          disableSetDefault
-                          showSelectedIcon={showItemSelectedIcon}
-                          selectedCredentialId={selectedCredentialId}
-                        />
-                      ))
-                    }
-                  </div>
-                )
-              }
-              {
-                !!oAuthCredentials.length && (
-                  <div className="p-1">
-                    <div className={cn(
-                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
-                      showItemSelectedIcon && 'pl-7',
-                    )}
-                    >
-                      OAuth
-                    </div>
-                    {
-                      oAuthCredentials.map(credential => (
-                        <Item
-                          key={credential.id}
-                          credential={credential}
-                          disabled={disabled}
-                          disableEdit
-                          onDelete={openConfirm}
-                          onSetDefault={handleSetDefault}
-                          onRename={handleRename}
-                          disableSetDefault={disableSetDefault}
-                          onItemClick={onItemClick}
-                          showSelectedIcon={showItemSelectedIcon}
-                          selectedCredentialId={selectedCredentialId}
-                        />
-                      ))
-                    }
-                  </div>
-                )
-              }
-              {
-                !!apiKeyCredentials.length && (
-                  <div className="p-1">
-                    <div className={cn(
-                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
-                      showItemSelectedIcon && 'pl-7',
-                    )}
-                    >
-                      API Keys
-                    </div>
-                    {
-                      apiKeyCredentials.map(credential => (
-                        <Item
-                          key={credential.id}
-                          credential={credential}
-                          disabled={disabled}
-                          onDelete={openConfirm}
-                          onEdit={handleEdit}
-                          onSetDefault={handleSetDefault}
-                          disableSetDefault={disableSetDefault}
-                          disableRename
-                          onItemClick={onItemClick}
-                          onRename={handleRename}
-                          showSelectedIcon={showItemSelectedIcon}
-                          selectedCredentialId={selectedCredentialId}
-                        />
-                      ))
-                    }
-                  </div>
-                )
-              }
+              <ExtraCredentialSection
+                credentials={extraAuthorizationItems}
+                disabled={disabled}
+                onItemClick={onItemClick}
+                showSelectedIcon={showItemSelectedIcon}
+                selectedCredentialId={selectedCredentialId}
+              />
+              <CredentialSection
+                title="OAuth"
+                credentials={oAuthCredentials}
+                disabled={disabled}
+                disableEdit
+                disableSetDefault={disableSetDefault}
+                showSelectedIcon={showItemSelectedIcon}
+                selectedCredentialId={selectedCredentialId}
+                onDelete={openDeleteConfirm}
+                onSetDefault={handleSetDefault}
+                onRename={handleRename}
+                onItemClick={onItemClick}
+              />
+              <CredentialSection
+                title="API Keys"
+                credentials={apiKeyCredentials}
+                disabled={disabled}
+                disableRename
+                disableSetDefault={disableSetDefault}
+                showSelectedIcon={showItemSelectedIcon}
+                selectedCredentialId={selectedCredentialId}
+                onDelete={openDeleteConfirm}
+                onEdit={openEditModal}
+                onSetDefault={handleSetDefault}
+                onRename={handleRename}
+                onItemClick={onItemClick}
+              />
             </div>
-            {
-              !notAllowCustomCredential && (
-                <>
-                  <div className="h-[1px] bg-divider-subtle"></div>
-                  <div className="p-2">
-                    <Authorize
-                      pluginPayload={pluginPayload}
-                      theme="secondary"
-                      showDivider={false}
-                      canOAuth={canOAuth}
-                      canApiKey={canApiKey}
-                      disabled={disabled}
-                      onUpdate={onUpdate}
-                    />
-                  </div>
-                </>
-              )
-            }
+            {!notAllowCustomCredential && (
+              <>
+                <div className="h-[1px] bg-divider-subtle"></div>
+                <div className="p-2">
+                  <Authorize
+                    pluginPayload={pluginPayload}
+                    theme="secondary"
+                    showDivider={false}
+                    canOAuth={canOAuth}
+                    canApiKey={canApiKey}
+                    disabled={disabled}
+                    onUpdate={onUpdate}
+                  />
+                </div>
+              </>
+            )}
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
-      {
-        deleteCredentialId && (
-          <Confirm
-            isShow
-            title={t('list.delete.title', { ns: 'datasetDocuments' })}
-            isDisabled={doingAction}
-            onCancel={closeConfirm}
-            onConfirm={handleConfirm}
-          />
-        )
-      }
-      {
-        !!editValues && (
-          <ApiKeyModal
-            pluginPayload={pluginPayload}
-            editValues={editValues}
-            onClose={() => {
-              setEditValues(null)
-              pendingOperationCredentialId.current = null
-            }}
-            onRemove={handleRemove}
-            disabled={disabled || doingAction}
-            onUpdate={onUpdate}
-          />
-        )
-      }
+      <AuthorizedModals
+        pluginPayload={pluginPayload}
+        deleteCredentialId={deleteCredentialId}
+        doingAction={doingAction}
+        onDeleteConfirm={handleDeleteConfirm}
+        onDeleteCancel={closeDeleteConfirm}
+        editValues={editValues}
+        disabled={disabled}
+        onEditClose={closeEditModal}
+        onRemove={handleRemoveFromEdit}
+        onUpdate={onUpdate}
+      />
     </>
   )
 }

web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx

@@ -180,14 +180,7 @@ const AppPicker: FC<Props> = ({
                   background={app.icon_background}
                   imageUrl={app.icon_url}
                 />
-                <div title={`${app.name} (${app.id})`} className="system-sm-medium grow text-components-input-text-filled">
-                  <span className="mr-1">{app.name}</span>
-                  <span className="text-text-tertiary">
-                    (
-                    {app.id.slice(0, 8)}
-                    )
-                  </span>
-                </div>
+                <div title={app.name} className="system-sm-medium grow text-components-input-text-filled">{app.name}</div>
                 <div className="system-2xs-medium-uppercase shrink-0 text-text-tertiary">{getAppType(app)}</div>
               </div>
             ))}

web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx

@@ -16,7 +16,7 @@ import {
 import AppInputsPanel from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel'
 import AppPicker from '@/app/components/plugins/plugin-detail-panel/app-selector/app-picker'
 import AppTrigger from '@/app/components/plugins/plugin-detail-panel/app-selector/app-trigger'
-import { useAppDetail, useInfiniteAppList } from '@/service/use-apps'
+import { useInfiniteAppList } from '@/service/use-apps'
 
 const PAGE_SIZE = 20
 
@@ -70,30 +70,6 @@ const AppSelector: FC<Props> = ({
     return pages.flatMap(({ data: apps }) => apps)
   }, [pages])
 
-  // fetch selected app by id to avoid pagination gaps
-  const { data: selectedAppDetail } = useAppDetail(value?.app_id || '')
-
-  // Ensure the currently selected app is available for display and in the picker options
-  const currentAppInfo = useMemo(() => {
-    if (!value?.app_id)
-      return undefined
-    return selectedAppDetail || displayedApps.find(app => app.id === value.app_id)
-  }, [value?.app_id, selectedAppDetail, displayedApps])
-
-  const appsForPicker = useMemo(() => {
-    if (!currentAppInfo)
-      return displayedApps
-
-    const appIndex = displayedApps.findIndex(a => a.id === currentAppInfo.id)
-
-    if (appIndex === -1)
-      return [currentAppInfo, ...displayedApps]
-
-    const updatedApps = [...displayedApps]
-    updatedApps[appIndex] = currentAppInfo
-    return updatedApps
-  }, [currentAppInfo, displayedApps])
-
   const hasMore = hasNextPage ?? true
 
   const handleLoadMore = useCallback(async () => {
@@ -151,6 +127,12 @@ const AppSelector: FC<Props> = ({
     }
   }, [value])
 
+  const currentAppInfo = useMemo(() => {
+    if (!displayedApps || !value)
+      return undefined
+    return displayedApps.find(app => app.id === value.app_id)
+  }, [displayedApps, value])
+
   return (
     <>
       <PortalToFollowElem
@@ -186,7 +168,7 @@ const AppSelector: FC<Props> = ({
                 disabled={false}
                 onSelect={handleSelectApp}
                 scope={scope || 'all'}
-                apps={appsForPicker}
+                apps={displayedApps}
                 isLoading={isLoading || isLoadingMore || isFetchingNextPage}
                 hasMore={hasMore}
                 onLoadMore={handleLoadMore}

web/app/components/plugins/plugin-page/context.spec.tsx

@@ -1,123 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-// Import mocks
-import { useGlobalPublicStore } from '@/context/global-public-context'
-
-import { PluginPageContext, PluginPageContextProvider, usePluginPageContext } from './context'
-
-// Mock dependencies
-vi.mock('nuqs', () => ({
-  useQueryState: vi.fn(() => ['plugins', vi.fn()]),
-}))
-
-vi.mock('@/context/global-public-context', () => ({
-  useGlobalPublicStore: vi.fn(),
-}))
-
-vi.mock('../hooks', () => ({
-  PLUGIN_PAGE_TABS_MAP: {
-    plugins: 'plugins',
-    marketplace: 'discover',
-  },
-  usePluginPageTabs: () => [
-    { value: 'plugins', text: 'Plugins' },
-    { value: 'discover', text: 'Explore Marketplace' },
-  ],
-}))
-
-// Helper function to mock useGlobalPublicStore with marketplace setting
-const mockGlobalPublicStore = (enableMarketplace: boolean) => {
-  vi.mocked(useGlobalPublicStore).mockImplementation((selector) => {
-    const state = { systemFeatures: { enable_marketplace: enableMarketplace } }
-    return selector(state as Parameters<typeof selector>[0])
-  })
-}
-
-// Test component that uses the context
-const TestConsumer = () => {
-  const containerRef = usePluginPageContext(v => v.containerRef)
-  const options = usePluginPageContext(v => v.options)
-  const activeTab = usePluginPageContext(v => v.activeTab)
-
-  return (
-    <div>
-      <span data-testid="has-container-ref">{containerRef ? 'true' : 'false'}</span>
-      <span data-testid="options-count">{options.length}</span>
-      <span data-testid="active-tab">{activeTab}</span>
-      {options.map((opt: { value: string, text: string }) => (
-        <span key={opt.value} data-testid={`option-${opt.value}`}>{opt.text}</span>
-      ))}
-    </div>
-  )
-}
-
-describe('PluginPageContext', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('PluginPageContextProvider', () => {
-    it('should provide context values to children', () => {
-      mockGlobalPublicStore(true)
-
-      render(
-        <PluginPageContextProvider>
-          <TestConsumer />
-        </PluginPageContextProvider>,
-      )
-
-      expect(screen.getByTestId('has-container-ref')).toHaveTextContent('true')
-      expect(screen.getByTestId('options-count')).toHaveTextContent('2')
-    })
-
-    it('should include marketplace tab when enable_marketplace is true', () => {
-      mockGlobalPublicStore(true)
-
-      render(
-        <PluginPageContextProvider>
-          <TestConsumer />
-        </PluginPageContextProvider>,
-      )
-
-      expect(screen.getByTestId('option-plugins')).toBeInTheDocument()
-      expect(screen.getByTestId('option-discover')).toBeInTheDocument()
-    })
-
-    it('should filter out marketplace tab when enable_marketplace is false', () => {
-      mockGlobalPublicStore(false)
-
-      render(
-        <PluginPageContextProvider>
-          <TestConsumer />
-        </PluginPageContextProvider>,
-      )
-
-      expect(screen.getByTestId('option-plugins')).toBeInTheDocument()
-      expect(screen.queryByTestId('option-discover')).not.toBeInTheDocument()
-      expect(screen.getByTestId('options-count')).toHaveTextContent('1')
-    })
-  })
-
-  describe('usePluginPageContext', () => {
-    it('should select specific context values', () => {
-      mockGlobalPublicStore(true)
-
-      render(
-        <PluginPageContextProvider>
-          <TestConsumer />
-        </PluginPageContextProvider>,
-      )
-
-      // activeTab should be 'plugins' from the mock
-      expect(screen.getByTestId('active-tab')).toHaveTextContent('plugins')
-    })
-  })
-
-  describe('Default Context Values', () => {
-    it('should have empty options by default from context', () => {
-      // Test that the context has proper default values by checking the exported constant
-      // The PluginPageContext is created with default values including empty options array
-      expect(PluginPageContext).toBeDefined()
-    })
-  })
-})

web/app/components/plugins/plugin-page/index.tsx

@@ -207,7 +207,6 @@ const PluginPage = ({
                   popupContent={t('privilege.title', { ns: 'plugin' })}
                 >
                   <Button
-                    data-testid="plugin-settings-button"
                     className="group h-full w-full p-2 text-components-button-secondary-text"
                     onClick={setShowPluginSettingModal}
                   >

web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx

@@ -1,219 +0,0 @@
-import type { FC, ReactNode } from 'react'
-import type { PluginStatus } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n-config'
-import {
-  RiCheckboxCircleFill,
-  RiErrorWarningFill,
-  RiLoaderLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import CardIcon from '@/app/components/plugins/card/base/card-icon'
-import { useGetLanguage } from '@/context/i18n'
-
-// Types
-type PluginItemProps = {
-  plugin: PluginStatus
-  getIconUrl: (icon: string) => string
-  language: Locale
-  statusIcon: ReactNode
-  statusText: string
-  statusClassName?: string
-  action?: ReactNode
-}
-
-type PluginSectionProps = {
-  title: string
-  count: number
-  plugins: PluginStatus[]
-  getIconUrl: (icon: string) => string
-  language: Locale
-  statusIcon: ReactNode
-  defaultStatusText: string
-  statusClassName?: string
-  headerAction?: ReactNode
-  renderItemAction?: (plugin: PluginStatus) => ReactNode
-}
-
-type PluginTaskListProps = {
-  runningPlugins: PluginStatus[]
-  successPlugins: PluginStatus[]
-  errorPlugins: PluginStatus[]
-  getIconUrl: (icon: string) => string
-  onClearAll: () => void
-  onClearErrors: () => void
-  onClearSingle: (taskId: string, pluginId: string) => void
-}
-
-// Plugin Item Component
-const PluginItem: FC<PluginItemProps> = ({
-  plugin,
-  getIconUrl,
-  language,
-  statusIcon,
-  statusText,
-  statusClassName,
-  action,
-}) => {
-  return (
-    <div className="flex items-center rounded-lg p-2 hover:bg-state-base-hover">
-      <div className="relative mr-2 flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
-        {statusIcon}
-        <CardIcon
-          size="tiny"
-          src={getIconUrl(plugin.icon)}
-        />
-      </div>
-      <div className="grow">
-        <div className="system-md-regular truncate text-text-secondary">
-          {plugin.labels[language]}
-        </div>
-        <div className={`system-xs-regular ${statusClassName || 'text-text-tertiary'}`}>
-          {statusText}
-        </div>
-      </div>
-      {action}
-    </div>
-  )
-}
-
-// Plugin Section Component
-const PluginSection: FC<PluginSectionProps> = ({
-  title,
-  count,
-  plugins,
-  getIconUrl,
-  language,
-  statusIcon,
-  defaultStatusText,
-  statusClassName,
-  headerAction,
-  renderItemAction,
-}) => {
-  if (plugins.length === 0)
-    return null
-
-  return (
-    <>
-      <div className="system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary">
-        {title}
-        {' '}
-        (
-        {count}
-        )
-        {headerAction}
-      </div>
-      <div className="max-h-[200px] overflow-y-auto">
-        {plugins.map(plugin => (
-          <PluginItem
-            key={plugin.plugin_unique_identifier}
-            plugin={plugin}
-            getIconUrl={getIconUrl}
-            language={language}
-            statusIcon={statusIcon}
-            statusText={plugin.message || defaultStatusText}
-            statusClassName={statusClassName}
-            action={renderItemAction?.(plugin)}
-          />
-        ))}
-      </div>
-    </>
-  )
-}
-
-// Main Plugin Task List Component
-const PluginTaskList: FC<PluginTaskListProps> = ({
-  runningPlugins,
-  successPlugins,
-  errorPlugins,
-  getIconUrl,
-  onClearAll,
-  onClearErrors,
-  onClearSingle,
-}) => {
-  const { t } = useTranslation()
-  const language = useGetLanguage()
-
-  return (
-    <div className="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-      {/* Running Plugins Section */}
-      {runningPlugins.length > 0 && (
-        <PluginSection
-          title={t('task.installing', { ns: 'plugin' })}
-          count={runningPlugins.length}
-          plugins={runningPlugins}
-          getIconUrl={getIconUrl}
-          language={language}
-          statusIcon={
-            <RiLoaderLine className="absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 animate-spin text-text-accent" />
-          }
-          defaultStatusText={t('task.installing', { ns: 'plugin' })}
-        />
-      )}
-
-      {/* Success Plugins Section */}
-      {successPlugins.length > 0 && (
-        <PluginSection
-          title={t('task.installed', { ns: 'plugin' })}
-          count={successPlugins.length}
-          plugins={successPlugins}
-          getIconUrl={getIconUrl}
-          language={language}
-          statusIcon={
-            <RiCheckboxCircleFill className="absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 text-text-success" />
-          }
-          defaultStatusText={t('task.installed', { ns: 'plugin' })}
-          statusClassName="text-text-success"
-          headerAction={(
-            <Button
-              className="shrink-0"
-              size="small"
-              variant="ghost"
-              onClick={onClearAll}
-            >
-              {t('task.clearAll', { ns: 'plugin' })}
-            </Button>
-          )}
-        />
-      )}
-
-      {/* Error Plugins Section */}
-      {errorPlugins.length > 0 && (
-        <PluginSection
-          title={t('task.installError', { ns: 'plugin', errorLength: errorPlugins.length })}
-          count={errorPlugins.length}
-          plugins={errorPlugins}
-          getIconUrl={getIconUrl}
-          language={language}
-          statusIcon={
-            <RiErrorWarningFill className="absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 text-text-destructive" />
-          }
-          defaultStatusText={t('task.installError', { ns: 'plugin', errorLength: errorPlugins.length })}
-          statusClassName="text-text-destructive break-all"
-          headerAction={(
-            <Button
-              className="shrink-0"
-              size="small"
-              variant="ghost"
-              onClick={onClearErrors}
-            >
-              {t('task.clearAll', { ns: 'plugin' })}
-            </Button>
-          )}
-          renderItemAction={plugin => (
-            <Button
-              className="shrink-0"
-              size="small"
-              variant="ghost"
-              onClick={() => onClearSingle(plugin.taskId, plugin.plugin_unique_identifier)}
-            >
-              {t('operation.clear', { ns: 'common' })}
-            </Button>
-          )}
-        />
-      )}
-    </div>
-  )
-}
-
-export default PluginTaskList

web/app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx

@@ -1,96 +0,0 @@
-import type { FC } from 'react'
-import {
-  RiCheckboxCircleFill,
-  RiErrorWarningFill,
-  RiInstallLine,
-} from '@remixicon/react'
-import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
-import Tooltip from '@/app/components/base/tooltip'
-import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon'
-import { cn } from '@/utils/classnames'
-
-export type TaskStatusIndicatorProps = {
-  tip: string
-  isInstalling: boolean
-  isInstallingWithSuccess: boolean
-  isInstallingWithError: boolean
-  isSuccess: boolean
-  isFailed: boolean
-  successPluginsLength: number
-  runningPluginsLength: number
-  totalPluginsLength: number
-  onClick: () => void
-}
-
-const TaskStatusIndicator: FC<TaskStatusIndicatorProps> = ({
-  tip,
-  isInstalling,
-  isInstallingWithSuccess,
-  isInstallingWithError,
-  isSuccess,
-  isFailed,
-  successPluginsLength,
-  runningPluginsLength,
-  totalPluginsLength,
-  onClick,
-}) => {
-  const showDownloadingIcon = isInstalling || isInstallingWithError
-  const showErrorStyle = isInstallingWithError || isFailed
-  const showSuccessIcon = isSuccess || (successPluginsLength > 0 && runningPluginsLength === 0)
-
-  return (
-    <Tooltip
-      popupContent={tip}
-      asChild
-      offset={8}
-    >
-      <div
-        className={cn(
-          'relative flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
-          showErrorStyle && 'cursor-pointer border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
-          (isInstalling || isInstallingWithSuccess || isSuccess) && 'cursor-pointer hover:bg-components-button-secondary-bg-hover',
-        )}
-        id="plugin-task-trigger"
-        onClick={onClick}
-      >
-        {/* Main Icon */}
-        {showDownloadingIcon
-          ? <DownloadingIcon />
-          : (
-              <RiInstallLine
-                className={cn(
-                  'h-4 w-4 text-components-button-secondary-text',
-                  showErrorStyle && 'text-components-button-destructive-secondary-text',
-                )}
-              />
-            )}
-
-        {/* Status Indicator Badge */}
-        <div className="absolute -right-1 -top-1">
-          {(isInstalling || isInstallingWithSuccess) && (
-            <ProgressCircle
-              percentage={(totalPluginsLength > 0 ? successPluginsLength / totalPluginsLength : 0) * 100}
-              circleFillColor="fill-components-progress-brand-bg"
-            />
-          )}
-          {isInstallingWithError && (
-            <ProgressCircle
-              percentage={(totalPluginsLength > 0 ? runningPluginsLength / totalPluginsLength : 0) * 100}
-              circleFillColor="fill-components-progress-brand-bg"
-              sectorFillColor="fill-components-progress-error-border"
-              circleStrokeColor="stroke-components-progress-error-border"
-            />
-          )}
-          {showSuccessIcon && !isInstalling && !isInstallingWithSuccess && !isInstallingWithError && (
-            <RiCheckboxCircleFill className="h-3.5 w-3.5 text-text-success" />
-          )}
-          {isFailed && (
-            <RiErrorWarningFill className="h-3.5 w-3.5 text-text-destructive" />
-          )}
-        </div>
-      </div>
-    </Tooltip>
-  )
-}
-
-export default TaskStatusIndicator

web/app/components/plugins/plugin-page/plugin-tasks/index.spec.tsx

@@ -1,856 +0,0 @@
-import type { PluginStatus } from '@/app/components/plugins/types'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { TaskStatus } from '@/app/components/plugins/types'
-// Import mocked modules
-import { useMutationClearTaskPlugin, usePluginTaskList } from '@/service/use-plugins'
-import PluginTaskList from './components/plugin-task-list'
-import TaskStatusIndicator from './components/task-status-indicator'
-import { usePluginTaskStatus } from './hooks'
-
-import PluginTasks from './index'
-
-// Mock external dependencies
-vi.mock('@/service/use-plugins', () => ({
-  usePluginTaskList: vi.fn(),
-  useMutationClearTaskPlugin: vi.fn(),
-}))
-
-vi.mock('@/app/components/plugins/install-plugin/base/use-get-icon', () => ({
-  default: () => ({
-    getIconUrl: (icon: string) => `https://example.com/${icon}`,
-  }),
-}))
-
-vi.mock('@/context/i18n', () => ({
-  useGetLanguage: () => 'en_US',
-}))
-
-// Helper to create mock plugin
-const createMockPlugin = (overrides: Partial<PluginStatus> = {}): PluginStatus => ({
-  plugin_unique_identifier: `plugin-${Math.random().toString(36).substr(2, 9)}`,
-  plugin_id: 'test-plugin',
-  status: TaskStatus.running,
-  message: '',
-  icon: 'test-icon.png',
-  labels: {
-    en_US: 'Test Plugin',
-    zh_Hans: '测试插件',
-  } as Record<string, string>,
-  taskId: 'task-1',
-  ...overrides,
-})
-
-// Helper to setup mock hook returns
-const setupMocks = (plugins: PluginStatus[] = []) => {
-  const mockMutateAsync = vi.fn().mockResolvedValue({})
-  const mockHandleRefetch = vi.fn()
-
-  vi.mocked(usePluginTaskList).mockReturnValue({
-    pluginTasks: plugins.length > 0
-      ? [{ id: 'task-1', plugins, created_at: '', updated_at: '', status: 'running', total_plugins: plugins.length, completed_plugins: 0 }]
-      : [],
-    handleRefetch: mockHandleRefetch,
-  } as any)
-
-  vi.mocked(useMutationClearTaskPlugin).mockReturnValue({
-    mutateAsync: mockMutateAsync,
-  } as any)
-
-  return { mockMutateAsync, mockHandleRefetch }
-}
-
-// ============================================================================
-// usePluginTaskStatus Hook Tests
-// ============================================================================
-describe('usePluginTaskStatus Hook', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Plugin categorization', () => {
-    it('should categorize running plugins correctly', () => {
-      const runningPlugin = createMockPlugin({ status: TaskStatus.running })
-      setupMocks([runningPlugin])
-
-      const TestComponent = () => {
-        const { runningPlugins, runningPluginsLength } = usePluginTaskStatus()
-        return (
-          <div>
-            <span data-testid="running-count">{runningPluginsLength}</span>
-            <span data-testid="running-id">{runningPlugins[0]?.plugin_unique_identifier}</span>
-          </div>
-        )
-      }
-
-      render(<TestComponent />)
-
-      expect(screen.getByTestId('running-count')).toHaveTextContent('1')
-      expect(screen.getByTestId('running-id')).toHaveTextContent(runningPlugin.plugin_unique_identifier)
-    })
-
-    it('should categorize success plugins correctly', () => {
-      const successPlugin = createMockPlugin({ status: TaskStatus.success })
-      setupMocks([successPlugin])
-
-      const TestComponent = () => {
-        const { successPlugins, successPluginsLength } = usePluginTaskStatus()
-        return (
-          <div>
-            <span data-testid="success-count">{successPluginsLength}</span>
-            <span data-testid="success-id">{successPlugins[0]?.plugin_unique_identifier}</span>
-          </div>
-        )
-      }
-
-      render(<TestComponent />)
-
-      expect(screen.getByTestId('success-count')).toHaveTextContent('1')
-      expect(screen.getByTestId('success-id')).toHaveTextContent(successPlugin.plugin_unique_identifier)
-    })
-
-    it('should categorize error plugins correctly', () => {
-      const errorPlugin = createMockPlugin({ status: TaskStatus.failed, message: 'Install failed' })
-      setupMocks([errorPlugin])
-
-      const TestComponent = () => {
-        const { errorPlugins, errorPluginsLength } = usePluginTaskStatus()
-        return (
-          <div>
-            <span data-testid="error-count">{errorPluginsLength}</span>
-            <span data-testid="error-id">{errorPlugins[0]?.plugin_unique_identifier}</span>
-          </div>
-        )
-      }
-
-      render(<TestComponent />)
-
-      expect(screen.getByTestId('error-count')).toHaveTextContent('1')
-      expect(screen.getByTestId('error-id')).toHaveTextContent(errorPlugin.plugin_unique_identifier)
-    })
-
-    it('should categorize mixed plugins correctly', () => {
-      const plugins = [
-        createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'running-1' }),
-        createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
-        createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'error-1' }),
-      ]
-      setupMocks(plugins)
-
-      const TestComponent = () => {
-        const { runningPluginsLength, successPluginsLength, errorPluginsLength, totalPluginsLength } = usePluginTaskStatus()
-        return (
-          <div>
-            <span data-testid="running">{runningPluginsLength}</span>
-            <span data-testid="success">{successPluginsLength}</span>
-            <span data-testid="error">{errorPluginsLength}</span>
-            <span data-testid="total">{totalPluginsLength}</span>
-          </div>
-        )
-      }
-
-      render(<TestComponent />)
-
-      expect(screen.getByTestId('running')).toHaveTextContent('1')
-      expect(screen.getByTestId('success')).toHaveTextContent('1')
-      expect(screen.getByTestId('error')).toHaveTextContent('1')
-      expect(screen.getByTestId('total')).toHaveTextContent('3')
-    })
-  })
-
-  describe('Status flags', () => {
-    it('should set isInstalling when only running plugins exist', () => {
-      setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-      const TestComponent = () => {
-        const { isInstalling, isInstallingWithSuccess, isInstallingWithError, isSuccess, isFailed } = usePluginTaskStatus()
-        return (
-          <div>
-            <span data-testid="isInstalling">{String(isInstalling)}</span>
-            <span data-testid="isInstallingWithSuccess">{String(isInstallingWithSuccess)}</span>
-            <span data-testid="isInstallingWithError">{String(isInstallingWithError)}</span>
-            <span data-testid="isSuccess">{String(isSuccess)}</span>
-            <span data-testid="isFailed">{String(isFailed)}</span>
-          </div>
-        )
-      }
-
-      render(<TestComponent />)
-
-      expect(screen.getByTestId('isInstalling')).toHaveTextContent('true')
-      expect(screen.getByTestId('isInstallingWithSuccess')).toHaveTextContent('false')
-      expect(screen.getByTestId('isInstallingWithError')).toHaveTextContent('false')
-      expect(screen.getByTestId('isSuccess')).toHaveTextContent('false')
-      expect(screen.getByTestId('isFailed')).toHaveTextContent('false')
-    })
-
-    it('should set isInstallingWithSuccess when running and success plugins exist', () => {
-      setupMocks([
-        createMockPlugin({ status: TaskStatus.running }),
-        createMockPlugin({ status: TaskStatus.success }),
-      ])
-
-      const TestComponent = () => {
-        const { isInstallingWithSuccess } = usePluginTaskStatus()
-        return <span data-testid="flag">{String(isInstallingWithSuccess)}</span>
-      }
-
-      render(<TestComponent />)
-      expect(screen.getByTestId('flag')).toHaveTextContent('true')
-    })
-
-    it('should set isInstallingWithError when running and error plugins exist', () => {
-      setupMocks([
-        createMockPlugin({ status: TaskStatus.running }),
-        createMockPlugin({ status: TaskStatus.failed }),
-      ])
-
-      const TestComponent = () => {
-        const { isInstallingWithError } = usePluginTaskStatus()
-        return <span data-testid="flag">{String(isInstallingWithError)}</span>
-      }
-
-      render(<TestComponent />)
-      expect(screen.getByTestId('flag')).toHaveTextContent('true')
-    })
-
-    it('should set isSuccess when all plugins succeeded', () => {
-      setupMocks([
-        createMockPlugin({ status: TaskStatus.success }),
-        createMockPlugin({ status: TaskStatus.success }),
-      ])
-
-      const TestComponent = () => {
-        const { isSuccess } = usePluginTaskStatus()
-        return <span data-testid="flag">{String(isSuccess)}</span>
-      }
-
-      render(<TestComponent />)
-      expect(screen.getByTestId('flag')).toHaveTextContent('true')
-    })
-
-    it('should set isFailed when no running plugins and some failed', () => {
-      setupMocks([
-        createMockPlugin({ status: TaskStatus.success }),
-        createMockPlugin({ status: TaskStatus.failed }),
-      ])
-
-      const TestComponent = () => {
-        const { isFailed } = usePluginTaskStatus()
-        return <span data-testid="flag">{String(isFailed)}</span>
-      }
-
-      render(<TestComponent />)
-      expect(screen.getByTestId('flag')).toHaveTextContent('true')
-    })
-  })
-
-  describe('handleClearErrorPlugin', () => {
-    it('should call mutateAsync and handleRefetch', async () => {
-      const { mockMutateAsync, mockHandleRefetch } = setupMocks([
-        createMockPlugin({ status: TaskStatus.failed }),
-      ])
-
-      const TestComponent = () => {
-        const { handleClearErrorPlugin } = usePluginTaskStatus()
-        return (
-          <button onClick={() => handleClearErrorPlugin('task-1', 'plugin-1')}>
-            Clear
-          </button>
-        )
-      }
-
-      render(<TestComponent />)
-      fireEvent.click(screen.getByRole('button'))
-
-      await waitFor(() => {
-        expect(mockMutateAsync).toHaveBeenCalledWith({
-          taskId: 'task-1',
-          pluginId: 'plugin-1',
-        })
-        expect(mockHandleRefetch).toHaveBeenCalled()
-      })
-    })
-  })
-})
-
-// ============================================================================
-// TaskStatusIndicator Component Tests
-// ============================================================================
-describe('TaskStatusIndicator Component', () => {
-  const defaultProps = {
-    tip: 'Test tooltip',
-    isInstalling: false,
-    isInstallingWithSuccess: false,
-    isInstallingWithError: false,
-    isSuccess: false,
-    isFailed: false,
-    successPluginsLength: 0,
-    runningPluginsLength: 0,
-    totalPluginsLength: 1,
-    onClick: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<TaskStatusIndicator {...defaultProps} />)
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should render with correct id', () => {
-      render(<TaskStatusIndicator {...defaultProps} />)
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-  })
-
-  describe('Icon display', () => {
-    it('should show downloading icon when installing', () => {
-      render(<TaskStatusIndicator {...defaultProps} isInstalling />)
-      // DownloadingIcon is rendered when isInstalling is true
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show downloading icon when installing with error', () => {
-      render(<TaskStatusIndicator {...defaultProps} isInstallingWithError />)
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show install icon when not installing', () => {
-      render(<TaskStatusIndicator {...defaultProps} isSuccess />)
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-  })
-
-  describe('Status badge', () => {
-    it('should show progress circle when installing', () => {
-      render(
-        <TaskStatusIndicator
-          {...defaultProps}
-          isInstalling
-          successPluginsLength={1}
-          totalPluginsLength={3}
-        />,
-      )
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show progress circle when installing with success', () => {
-      render(
-        <TaskStatusIndicator
-          {...defaultProps}
-          isInstallingWithSuccess
-          successPluginsLength={2}
-          totalPluginsLength={3}
-        />,
-      )
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show error progress circle when installing with error', () => {
-      render(
-        <TaskStatusIndicator
-          {...defaultProps}
-          isInstallingWithError
-          runningPluginsLength={1}
-          totalPluginsLength={3}
-        />,
-      )
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show success icon when all completed successfully', () => {
-      render(
-        <TaskStatusIndicator
-          {...defaultProps}
-          isSuccess
-          successPluginsLength={3}
-          runningPluginsLength={0}
-          totalPluginsLength={3}
-        />,
-      )
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show error icon when failed', () => {
-      render(<TaskStatusIndicator {...defaultProps} isFailed />)
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-  })
-
-  describe('Styling', () => {
-    it('should apply error styles when installing with error', () => {
-      render(<TaskStatusIndicator {...defaultProps} isInstallingWithError />)
-      const trigger = document.getElementById('plugin-task-trigger')
-      expect(trigger).toHaveClass('bg-state-destructive-hover')
-    })
-
-    it('should apply error styles when failed', () => {
-      render(<TaskStatusIndicator {...defaultProps} isFailed />)
-      const trigger = document.getElementById('plugin-task-trigger')
-      expect(trigger).toHaveClass('bg-state-destructive-hover')
-    })
-
-    it('should apply cursor-pointer when clickable', () => {
-      render(<TaskStatusIndicator {...defaultProps} isInstalling />)
-      const trigger = document.getElementById('plugin-task-trigger')
-      expect(trigger).toHaveClass('cursor-pointer')
-    })
-  })
-
-  describe('User interactions', () => {
-    it('should call onClick when clicked', () => {
-      const handleClick = vi.fn()
-      render(<TaskStatusIndicator {...defaultProps} onClick={handleClick} />)
-
-      fireEvent.click(document.getElementById('plugin-task-trigger')!)
-
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-  })
-})
-
-// ============================================================================
-// PluginTaskList Component Tests
-// ============================================================================
-describe('PluginTaskList Component', () => {
-  const defaultProps = {
-    runningPlugins: [] as PluginStatus[],
-    successPlugins: [] as PluginStatus[],
-    errorPlugins: [] as PluginStatus[],
-    getIconUrl: (icon: string) => `https://example.com/${icon}`,
-    onClearAll: vi.fn(),
-    onClearErrors: vi.fn(),
-    onClearSingle: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing with empty lists', () => {
-      render(<PluginTaskList {...defaultProps} />)
-      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
-    })
-
-    it('should render running plugins section when plugins exist', () => {
-      const runningPlugins = [createMockPlugin({ status: TaskStatus.running })]
-      render(<PluginTaskList {...defaultProps} runningPlugins={runningPlugins} />)
-
-      // Translation key is returned as text in tests, multiple matches expected (title + status)
-      expect(screen.getAllByText(/task\.installing/i).length).toBeGreaterThan(0)
-      // Verify section container is rendered
-      expect(document.querySelector('.max-h-\\[200px\\]')).toBeInTheDocument()
-    })
-
-    it('should render success plugins section when plugins exist', () => {
-      const successPlugins = [createMockPlugin({ status: TaskStatus.success })]
-      render(<PluginTaskList {...defaultProps} successPlugins={successPlugins} />)
-
-      // Translation key is returned as text in tests, multiple matches expected
-      expect(screen.getAllByText(/task\.installed/i).length).toBeGreaterThan(0)
-    })
-
-    it('should render error plugins section when plugins exist', () => {
-      const errorPlugins = [createMockPlugin({ status: TaskStatus.failed, message: 'Error occurred' })]
-      render(<PluginTaskList {...defaultProps} errorPlugins={errorPlugins} />)
-
-      expect(screen.getByText('Error occurred')).toBeInTheDocument()
-    })
-
-    it('should render all sections when all types exist', () => {
-      render(
-        <PluginTaskList
-          {...defaultProps}
-          runningPlugins={[createMockPlugin({ status: TaskStatus.running })]}
-          successPlugins={[createMockPlugin({ status: TaskStatus.success })]}
-          errorPlugins={[createMockPlugin({ status: TaskStatus.failed })]}
-        />,
-      )
-
-      // All sections should be present
-      expect(document.querySelectorAll('.max-h-\\[200px\\]').length).toBe(3)
-    })
-  })
-
-  describe('User interactions', () => {
-    it('should call onClearAll when clear all button is clicked in success section', () => {
-      const handleClearAll = vi.fn()
-      const successPlugins = [createMockPlugin({ status: TaskStatus.success })]
-
-      render(
-        <PluginTaskList
-          {...defaultProps}
-          successPlugins={successPlugins}
-          onClearAll={handleClearAll}
-        />,
-      )
-
-      fireEvent.click(screen.getByRole('button', { name: /task\.clearAll/i }))
-
-      expect(handleClearAll).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClearErrors when clear all button is clicked in error section', () => {
-      const handleClearErrors = vi.fn()
-      const errorPlugins = [createMockPlugin({ status: TaskStatus.failed })]
-
-      render(
-        <PluginTaskList
-          {...defaultProps}
-          errorPlugins={errorPlugins}
-          onClearErrors={handleClearErrors}
-        />,
-      )
-
-      const clearButtons = screen.getAllByRole('button')
-      fireEvent.click(clearButtons.find(btn => btn.textContent?.includes('task.clearAll'))!)
-
-      expect(handleClearErrors).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClearSingle with correct args when individual clear is clicked', () => {
-      const handleClearSingle = vi.fn()
-      const errorPlugin = createMockPlugin({
-        status: TaskStatus.failed,
-        plugin_unique_identifier: 'error-plugin-1',
-        taskId: 'task-123',
-      })
-
-      render(
-        <PluginTaskList
-          {...defaultProps}
-          errorPlugins={[errorPlugin]}
-          onClearSingle={handleClearSingle}
-        />,
-      )
-
-      // The individual clear button has the text 'operation.clear'
-      fireEvent.click(screen.getByRole('button', { name: /operation\.clear/i }))
-
-      expect(handleClearSingle).toHaveBeenCalledWith('task-123', 'error-plugin-1')
-    })
-  })
-
-  describe('Plugin display', () => {
-    it('should display plugin name from labels', () => {
-      const plugin = createMockPlugin({
-        status: TaskStatus.running,
-        labels: { en_US: 'My Test Plugin' } as Record<string, string>,
-      })
-
-      render(<PluginTaskList {...defaultProps} runningPlugins={[plugin]} />)
-
-      expect(screen.getByText('My Test Plugin')).toBeInTheDocument()
-    })
-
-    it('should display plugin message when available', () => {
-      const plugin = createMockPlugin({
-        status: TaskStatus.success,
-        message: 'Successfully installed!',
-      })
-
-      render(<PluginTaskList {...defaultProps} successPlugins={[plugin]} />)
-
-      expect(screen.getByText('Successfully installed!')).toBeInTheDocument()
-    })
-
-    it('should display multiple plugins in each section', () => {
-      const runningPlugins = [
-        createMockPlugin({ status: TaskStatus.running, labels: { en_US: 'Plugin A' } as Record<string, string> }),
-        createMockPlugin({ status: TaskStatus.running, labels: { en_US: 'Plugin B' } as Record<string, string> }),
-      ]
-
-      render(<PluginTaskList {...defaultProps} runningPlugins={runningPlugins} />)
-
-      expect(screen.getByText('Plugin A')).toBeInTheDocument()
-      expect(screen.getByText('Plugin B')).toBeInTheDocument()
-      // Count is rendered, verify multiple items are in list
-      expect(document.querySelectorAll('.hover\\:bg-state-base-hover').length).toBe(2)
-    })
-  })
-})
-
-// ============================================================================
-// PluginTasks Main Component Tests
-// ============================================================================
-describe('PluginTasks Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should return null when no plugins exist', () => {
-      setupMocks([])
-
-      const { container } = render(<PluginTasks />)
-
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should render when plugins exist', () => {
-      setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-      render(<PluginTasks />)
-
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-  })
-
-  describe('Tooltip text (tip memoization)', () => {
-    it('should show installing tip when isInstalling', () => {
-      setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-      render(<PluginTasks />)
-
-      // The component renders with a tooltip, we verify it exists
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show success tip when all succeeded', () => {
-      setupMocks([createMockPlugin({ status: TaskStatus.success })])
-
-      render(<PluginTasks />)
-
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should show error tip when some failed', () => {
-      setupMocks([
-        createMockPlugin({ status: TaskStatus.success }),
-        createMockPlugin({ status: TaskStatus.failed }),
-      ])
-
-      render(<PluginTasks />)
-
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-  })
-
-  describe('Popover interaction', () => {
-    it('should toggle popover when trigger is clicked and status allows', () => {
-      setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-      render(<PluginTasks />)
-
-      // Click to open
-      fireEvent.click(document.getElementById('plugin-task-trigger')!)
-
-      // The popover content should be visible (PluginTaskList)
-      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
-    })
-
-    it('should not toggle when status does not allow', () => {
-      // Setup with no actionable status (edge case - should not happen in practice)
-      setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-      render(<PluginTasks />)
-
-      // Component should still render
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-  })
-
-  describe('Clear handlers', () => {
-    it('should clear all completed plugins when onClearAll is called', async () => {
-      const { mockMutateAsync } = setupMocks([
-        createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'success-1' }),
-        createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'error-1' }),
-      ])
-
-      render(<PluginTasks />)
-
-      // Open popover
-      fireEvent.click(document.getElementById('plugin-task-trigger')!)
-
-      // Wait for popover content to render
-      await waitFor(() => {
-        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
-      })
-
-      // Find and click clear all button
-      const clearButtons = screen.getAllByRole('button')
-      const clearAllButton = clearButtons.find(btn => btn.textContent?.includes('clearAll'))
-      if (clearAllButton)
-        fireEvent.click(clearAllButton)
-
-      // Verify mutateAsync was called for each completed plugin
-      await waitFor(() => {
-        expect(mockMutateAsync).toHaveBeenCalled()
-      })
-    })
-
-    it('should clear only error plugins when onClearErrors is called', async () => {
-      const { mockMutateAsync } = setupMocks([
-        createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'error-1' }),
-      ])
-
-      render(<PluginTasks />)
-
-      // Open popover
-      fireEvent.click(document.getElementById('plugin-task-trigger')!)
-
-      await waitFor(() => {
-        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
-      })
-
-      // Find and click the clear all button in error section
-      const clearButtons = screen.getAllByRole('button')
-      if (clearButtons.length > 0)
-        fireEvent.click(clearButtons[0])
-
-      await waitFor(() => {
-        expect(mockMutateAsync).toHaveBeenCalled()
-      })
-    })
-
-    it('should clear single plugin when onClearSingle is called', async () => {
-      const { mockMutateAsync } = setupMocks([
-        createMockPlugin({
-          status: TaskStatus.failed,
-          plugin_unique_identifier: 'error-plugin',
-          taskId: 'task-1',
-        }),
-      ])
-
-      render(<PluginTasks />)
-
-      // Open popover
-      fireEvent.click(document.getElementById('plugin-task-trigger')!)
-
-      await waitFor(() => {
-        expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
-      })
-
-      // Find and click individual clear button (usually the last one)
-      const clearButtons = screen.getAllByRole('button')
-      const individualClearButton = clearButtons[clearButtons.length - 1]
-      fireEvent.click(individualClearButton)
-
-      await waitFor(() => {
-        expect(mockMutateAsync).toHaveBeenCalledWith({
-          taskId: 'task-1',
-          pluginId: 'error-plugin',
-        })
-      })
-    })
-  })
-
-  describe('Edge cases', () => {
-    it('should handle empty plugin tasks array', () => {
-      setupMocks([])
-
-      const { container } = render(<PluginTasks />)
-
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('should handle single running plugin', () => {
-      setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-      render(<PluginTasks />)
-
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should handle many plugins', () => {
-      const manyPlugins = Array.from({ length: 10 }, (_, i) =>
-        createMockPlugin({
-          status: i % 3 === 0 ? TaskStatus.running : i % 3 === 1 ? TaskStatus.success : TaskStatus.failed,
-          plugin_unique_identifier: `plugin-${i}`,
-        }))
-      setupMocks(manyPlugins)
-
-      render(<PluginTasks />)
-
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should handle plugins with empty labels', () => {
-      const plugin = createMockPlugin({
-        status: TaskStatus.running,
-        labels: {} as Record<string, string>,
-      })
-      setupMocks([plugin])
-
-      render(<PluginTasks />)
-
-      expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-    })
-
-    it('should handle plugins with long messages', () => {
-      const plugin = createMockPlugin({
-        status: TaskStatus.failed,
-        message: 'A'.repeat(500),
-      })
-      setupMocks([plugin])
-
-      render(<PluginTasks />)
-
-      // Open popover
-      fireEvent.click(document.getElementById('plugin-task-trigger')!)
-
-      expect(document.querySelector('.w-\\[360px\\]')).toBeInTheDocument()
-    })
-  })
-})
-
-// ============================================================================
-// Integration Tests
-// ============================================================================
-describe('PluginTasks Integration', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should show correct UI flow from installing to success', async () => {
-    // Start with installing state
-    setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-    const { rerender } = render(<PluginTasks />)
-
-    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-
-    // Simulate completion by re-rendering with success
-    setupMocks([createMockPlugin({ status: TaskStatus.success })])
-    rerender(<PluginTasks />)
-
-    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-  })
-
-  it('should show correct UI flow from installing to failure', async () => {
-    // Start with installing state
-    setupMocks([createMockPlugin({ status: TaskStatus.running })])
-
-    const { rerender } = render(<PluginTasks />)
-
-    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-
-    // Simulate failure by re-rendering with failed
-    setupMocks([createMockPlugin({ status: TaskStatus.failed, message: 'Network error' })])
-    rerender(<PluginTasks />)
-
-    expect(document.getElementById('plugin-task-trigger')).toBeInTheDocument()
-  })
-
-  it('should handle mixed status during installation', () => {
-    setupMocks([
-      createMockPlugin({ status: TaskStatus.running, plugin_unique_identifier: 'p1' }),
-      createMockPlugin({ status: TaskStatus.success, plugin_unique_identifier: 'p2' }),
-      createMockPlugin({ status: TaskStatus.failed, plugin_unique_identifier: 'p3' }),
-    ])
-
-    render(<PluginTasks />)
-
-    // Open popover
-    fireEvent.click(document.getElementById('plugin-task-trigger')!)
-
-    // All sections should be visible
-    const sections = document.querySelectorAll('.max-h-\\[200px\\]')
-    expect(sections.length).toBe(3)
-  })
-})

web/app/components/plugins/plugin-page/plugin-tasks/index.tsx

@@ -1,21 +1,33 @@
+import {
+  RiCheckboxCircleFill,
+  RiErrorWarningFill,
+  RiInstallLine,
+  RiLoaderLine,
+} from '@remixicon/react'
 import {
   useCallback,
   useMemo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import Tooltip from '@/app/components/base/tooltip'
+import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon'
+import CardIcon from '@/app/components/plugins/card/base/card-icon'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
-import PluginTaskList from './components/plugin-task-list'
-import TaskStatusIndicator from './components/task-status-indicator'
+import { useGetLanguage } from '@/context/i18n'
+import { cn } from '@/utils/classnames'
 import { usePluginTaskStatus } from './hooks'
 
 const PluginTasks = () => {
   const { t } = useTranslation()
+  const language = useGetLanguage()
   const [open, setOpen] = useState(false)
   const {
     errorPlugins,
@@ -34,7 +46,35 @@ const PluginTasks = () => {
   } = usePluginTaskStatus()
   const { getIconUrl } = useGetIcon()
 
-  // Generate tooltip text based on status
+  const handleClearAllWithModal = useCallback(async () => {
+    // Clear all completed plugins (success and error) but keep running ones
+    const completedPlugins = [...successPlugins, ...errorPlugins]
+
+    // Clear all completed plugins individually
+    for (const plugin of completedPlugins)
+      await handleClearErrorPlugin(plugin.taskId, plugin.plugin_unique_identifier)
+
+    // Only close modal if no plugins are still installing
+    if (runningPluginsLength === 0)
+      setOpen(false)
+  }, [successPlugins, errorPlugins, handleClearErrorPlugin, runningPluginsLength])
+
+  const handleClearErrorsWithModal = useCallback(async () => {
+    // Clear only error plugins, not all plugins
+    for (const plugin of errorPlugins)
+      await handleClearErrorPlugin(plugin.taskId, plugin.plugin_unique_identifier)
+    // Only close modal if no plugins are still installing
+    if (runningPluginsLength === 0)
+      setOpen(false)
+  }, [errorPlugins, handleClearErrorPlugin, runningPluginsLength])
+
+  const handleClearSingleWithModal = useCallback(async (taskId: string, pluginId: string) => {
+    await handleClearErrorPlugin(taskId, pluginId)
+    // Only close modal if no plugins are still installing
+    if (runningPluginsLength === 0)
+      setOpen(false)
+  }, [handleClearErrorPlugin, runningPluginsLength])
+
   const tip = useMemo(() => {
     if (isInstallingWithError)
       return t('task.installingWithError', { ns: 'plugin', installingLength: runningPluginsLength, successLength: successPluginsLength, errorLength: errorPluginsLength })
@@ -59,38 +99,8 @@ const PluginTasks = () => {
     t,
   ])
 
-  // Generic clear function that handles clearing and modal closing
-  const clearPluginsAndClose = useCallback(async (
-    plugins: Array<{ taskId: string, plugin_unique_identifier: string }>,
-  ) => {
-    for (const plugin of plugins)
-      await handleClearErrorPlugin(plugin.taskId, plugin.plugin_unique_identifier)
-    if (runningPluginsLength === 0)
-      setOpen(false)
-  }, [handleClearErrorPlugin, runningPluginsLength])
-
-  // Clear handlers using the generic function
-  const handleClearAll = useCallback(
-    () => clearPluginsAndClose([...successPlugins, ...errorPlugins]),
-    [clearPluginsAndClose, successPlugins, errorPlugins],
-  )
-
-  const handleClearErrors = useCallback(
-    () => clearPluginsAndClose(errorPlugins),
-    [clearPluginsAndClose, errorPlugins],
-  )
-
-  const handleClearSingle = useCallback(
-    (taskId: string, pluginId: string) => clearPluginsAndClose([{ taskId, plugin_unique_identifier: pluginId }]),
-    [clearPluginsAndClose],
-  )
-
-  const handleTriggerClick = useCallback(() => {
-    if (isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess)
-      setOpen(v => !v)
-  }, [isFailed, isInstalling, isInstallingWithSuccess, isInstallingWithError, isSuccess])
-
-  // Hide when no plugin tasks
+  // Show icon if there are any plugin tasks (completed, running, or failed)
+  // Only hide when there are absolutely no plugin tasks
   if (totalPluginsLength === 0)
     return null
 
@@ -105,30 +115,206 @@ const PluginTasks = () => {
           crossAxis: 79,
         }}
       >
-        <PortalToFollowElemTrigger onClick={handleTriggerClick}>
-          <TaskStatusIndicator
-            tip={tip}
-            isInstalling={isInstalling}
-            isInstallingWithSuccess={isInstallingWithSuccess}
-            isInstallingWithError={isInstallingWithError}
-            isSuccess={isSuccess}
-            isFailed={isFailed}
-            successPluginsLength={successPluginsLength}
-            runningPluginsLength={runningPluginsLength}
-            totalPluginsLength={totalPluginsLength}
-            onClick={() => {}}
-          />
+        <PortalToFollowElemTrigger
+          onClick={() => {
+            if (isFailed || isInstalling || isInstallingWithSuccess || isInstallingWithError || isSuccess)
+              setOpen(v => !v)
+          }}
+        >
+          <Tooltip
+            popupContent={tip}
+            asChild
+            offset={8}
+          >
+            <div
+              className={cn(
+                'relative flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
+                (isInstallingWithError || isFailed) && 'cursor-pointer border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
+                (isInstalling || isInstallingWithSuccess || isSuccess) && 'cursor-pointer hover:bg-components-button-secondary-bg-hover',
+              )}
+              id="plugin-task-trigger"
+            >
+              {
+                (isInstalling || isInstallingWithError) && (
+                  <DownloadingIcon />
+                )
+              }
+              {
+                !(isInstalling || isInstallingWithError) && (
+                  <RiInstallLine
+                    className={cn(
+                      'h-4 w-4 text-components-button-secondary-text',
+                      (isInstallingWithError || isFailed) && 'text-components-button-destructive-secondary-text',
+                    )}
+                  />
+                )
+              }
+              <div className="absolute -right-1 -top-1">
+                {
+                  (isInstalling || isInstallingWithSuccess) && (
+                    <ProgressCircle
+                      percentage={successPluginsLength / totalPluginsLength * 100}
+                      circleFillColor="fill-components-progress-brand-bg"
+                    />
+                  )
+                }
+                {
+                  isInstallingWithError && (
+                    <ProgressCircle
+                      percentage={runningPluginsLength / totalPluginsLength * 100}
+                      circleFillColor="fill-components-progress-brand-bg"
+                      sectorFillColor="fill-components-progress-error-border"
+                      circleStrokeColor="stroke-components-progress-error-border"
+                    />
+                  )
+                }
+                {
+                  (isSuccess || (successPluginsLength > 0 && runningPluginsLength === 0 && errorPluginsLength === 0)) && (
+                    <RiCheckboxCircleFill className="h-3.5 w-3.5 text-text-success" />
+                  )
+                }
+                {
+                  isFailed && (
+                    <RiErrorWarningFill className="h-3.5 w-3.5 text-text-destructive" />
+                  )
+                }
+              </div>
+            </div>
+          </Tooltip>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[11]">
-          <PluginTaskList
-            runningPlugins={runningPlugins}
-            successPlugins={successPlugins}
-            errorPlugins={errorPlugins}
-            getIconUrl={getIconUrl}
-            onClearAll={handleClearAll}
-            onClearErrors={handleClearErrors}
-            onClearSingle={handleClearSingle}
-          />
+          <div className="w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
+            {/* Running Plugins */}
+            {runningPlugins.length > 0 && (
+              <>
+                <div className="system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary">
+                  {t('task.installing', { ns: 'plugin' })}
+                  {' '}
+                  (
+                  {runningPlugins.length}
+                  )
+                </div>
+                <div className="max-h-[200px] overflow-y-auto">
+                  {runningPlugins.map(runningPlugin => (
+                    <div
+                      key={runningPlugin.plugin_unique_identifier}
+                      className="flex items-center rounded-lg p-2 hover:bg-state-base-hover"
+                    >
+                      <div className="relative mr-2 flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
+                        <RiLoaderLine className="absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 animate-spin text-text-accent" />
+                        <CardIcon
+                          size="tiny"
+                          src={getIconUrl(runningPlugin.icon)}
+                        />
+                      </div>
+                      <div className="grow">
+                        <div className="system-md-regular truncate text-text-secondary">
+                          {runningPlugin.labels[language]}
+                        </div>
+                        <div className="system-xs-regular text-text-tertiary">
+                          {t('task.installing', { ns: 'plugin' })}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+
+            {/* Success Plugins */}
+            {successPlugins.length > 0 && (
+              <>
+                <div className="system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary">
+                  {t('task.installed', { ns: 'plugin' })}
+                  {' '}
+                  (
+                  {successPlugins.length}
+                  )
+                  <Button
+                    className="shrink-0"
+                    size="small"
+                    variant="ghost"
+                    onClick={() => handleClearAllWithModal()}
+                  >
+                    {t('task.clearAll', { ns: 'plugin' })}
+                  </Button>
+                </div>
+                <div className="max-h-[200px] overflow-y-auto">
+                  {successPlugins.map(successPlugin => (
+                    <div
+                      key={successPlugin.plugin_unique_identifier}
+                      className="flex items-center rounded-lg p-2 hover:bg-state-base-hover"
+                    >
+                      <div className="relative mr-2 flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
+                        <RiCheckboxCircleFill className="absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 text-text-success" />
+                        <CardIcon
+                          size="tiny"
+                          src={getIconUrl(successPlugin.icon)}
+                        />
+                      </div>
+                      <div className="grow">
+                        <div className="system-md-regular truncate text-text-secondary">
+                          {successPlugin.labels[language]}
+                        </div>
+                        <div className="system-xs-regular text-text-success">
+                          {successPlugin.message || t('task.installed', { ns: 'plugin' })}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+
+            {/* Error Plugins */}
+            {errorPlugins.length > 0 && (
+              <>
+                <div className="system-sm-semibold-uppercase sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary">
+                  {t('task.installError', { ns: 'plugin', errorLength: errorPlugins.length })}
+                  <Button
+                    className="shrink-0"
+                    size="small"
+                    variant="ghost"
+                    onClick={() => handleClearErrorsWithModal()}
+                  >
+                    {t('task.clearAll', { ns: 'plugin' })}
+                  </Button>
+                </div>
+                <div className="max-h-[200px] overflow-y-auto">
+                  {errorPlugins.map(errorPlugin => (
+                    <div
+                      key={errorPlugin.plugin_unique_identifier}
+                      className="flex items-center rounded-lg p-2 hover:bg-state-base-hover"
+                    >
+                      <div className="relative mr-2 flex h-6 w-6 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
+                        <RiErrorWarningFill className="absolute -bottom-0.5 -right-0.5 z-10 h-3 w-3 text-text-destructive" />
+                        <CardIcon
+                          size="tiny"
+                          src={getIconUrl(errorPlugin.icon)}
+                        />
+                      </div>
+                      <div className="grow">
+                        <div className="system-md-regular truncate text-text-secondary">
+                          {errorPlugin.labels[language]}
+                        </div>
+                        <div className="system-xs-regular break-all text-text-destructive">
+                          {errorPlugin.message}
+                        </div>
+                      </div>
+                      <Button
+                        className="shrink-0"
+                        size="small"
+                        variant="ghost"
+                        onClick={() => handleClearSingleWithModal(errorPlugin.taskId, errorPlugin.plugin_unique_identifier)}
+                      >
+                        {t('operation.clear', { ns: 'common' })}
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
     </div>

web/app/components/plugins/plugin-page/use-reference-setting.spec.ts

@@ -1,388 +0,0 @@
-import { renderHook, waitFor } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-// Import mocks for assertions
-import { useAppContext } from '@/context/app-context'
-import { useGlobalPublicStore } from '@/context/global-public-context'
-
-import { useInvalidateReferenceSettings, useMutationReferenceSettings, useReferenceSettings } from '@/service/use-plugins'
-import Toast from '../../base/toast'
-import { PermissionType } from '../types'
-import useReferenceSetting, { useCanInstallPluginFromMarketplace } from './use-reference-setting'
-
-// Mock dependencies
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
-
-vi.mock('@/context/app-context', () => ({
-  useAppContext: vi.fn(),
-}))
-
-vi.mock('@/context/global-public-context', () => ({
-  useGlobalPublicStore: vi.fn(),
-}))
-
-vi.mock('@/service/use-plugins', () => ({
-  useReferenceSettings: vi.fn(),
-  useMutationReferenceSettings: vi.fn(),
-  useInvalidateReferenceSettings: vi.fn(),
-}))
-
-vi.mock('../../base/toast', () => ({
-  default: {
-    notify: vi.fn(),
-  },
-}))
-
-describe('useReferenceSetting Hook', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    // Default mocks
-    vi.mocked(useAppContext).mockReturnValue({
-      isCurrentWorkspaceManager: false,
-      isCurrentWorkspaceOwner: false,
-    } as ReturnType<typeof useAppContext>)
-
-    vi.mocked(useReferenceSettings).mockReturnValue({
-      data: {
-        permission: {
-          install_permission: PermissionType.everyone,
-          debug_permission: PermissionType.everyone,
-        },
-      },
-    } as ReturnType<typeof useReferenceSettings>)
-
-    vi.mocked(useMutationReferenceSettings).mockReturnValue({
-      mutate: vi.fn(),
-      isPending: false,
-    } as unknown as ReturnType<typeof useMutationReferenceSettings>)
-
-    vi.mocked(useInvalidateReferenceSettings).mockReturnValue(vi.fn())
-  })
-
-  describe('hasPermission logic', () => {
-    it('should return false when permission is undefined', () => {
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: {
-          permission: {
-            install_permission: undefined,
-            debug_permission: undefined,
-          },
-        },
-      } as unknown as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canManagement).toBe(false)
-      expect(result.current.canDebugger).toBe(false)
-    })
-
-    it('should return false when permission is noOne', () => {
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: {
-          permission: {
-            install_permission: PermissionType.noOne,
-            debug_permission: PermissionType.noOne,
-          },
-        },
-      } as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canManagement).toBe(false)
-      expect(result.current.canDebugger).toBe(false)
-    })
-
-    it('should return true when permission is everyone', () => {
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: {
-          permission: {
-            install_permission: PermissionType.everyone,
-            debug_permission: PermissionType.everyone,
-          },
-        },
-      } as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canManagement).toBe(true)
-      expect(result.current.canDebugger).toBe(true)
-    })
-
-    it('should return isAdmin when permission is admin and user is manager', () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceManager: true,
-        isCurrentWorkspaceOwner: false,
-      } as ReturnType<typeof useAppContext>)
-
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: {
-          permission: {
-            install_permission: PermissionType.admin,
-            debug_permission: PermissionType.admin,
-          },
-        },
-      } as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canManagement).toBe(true)
-      expect(result.current.canDebugger).toBe(true)
-    })
-
-    it('should return isAdmin when permission is admin and user is owner', () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceManager: false,
-        isCurrentWorkspaceOwner: true,
-      } as ReturnType<typeof useAppContext>)
-
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: {
-          permission: {
-            install_permission: PermissionType.admin,
-            debug_permission: PermissionType.admin,
-          },
-        },
-      } as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canManagement).toBe(true)
-      expect(result.current.canDebugger).toBe(true)
-    })
-
-    it('should return false when permission is admin and user is not admin', () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceManager: false,
-        isCurrentWorkspaceOwner: false,
-      } as ReturnType<typeof useAppContext>)
-
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: {
-          permission: {
-            install_permission: PermissionType.admin,
-            debug_permission: PermissionType.admin,
-          },
-        },
-      } as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canManagement).toBe(false)
-      expect(result.current.canDebugger).toBe(false)
-    })
-  })
-
-  describe('canSetPermissions', () => {
-    it('should be true when user is workspace manager', () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceManager: true,
-        isCurrentWorkspaceOwner: false,
-      } as ReturnType<typeof useAppContext>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canSetPermissions).toBe(true)
-    })
-
-    it('should be true when user is workspace owner', () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceManager: false,
-        isCurrentWorkspaceOwner: true,
-      } as ReturnType<typeof useAppContext>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canSetPermissions).toBe(true)
-    })
-
-    it('should be false when user is neither manager nor owner', () => {
-      vi.mocked(useAppContext).mockReturnValue({
-        isCurrentWorkspaceManager: false,
-        isCurrentWorkspaceOwner: false,
-      } as ReturnType<typeof useAppContext>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canSetPermissions).toBe(false)
-    })
-  })
-
-  describe('setReferenceSettings callback', () => {
-    it('should call invalidateReferenceSettings and show toast on success', async () => {
-      const mockInvalidate = vi.fn()
-      vi.mocked(useInvalidateReferenceSettings).mockReturnValue(mockInvalidate)
-
-      let onSuccessCallback: (() => void) | undefined
-      vi.mocked(useMutationReferenceSettings).mockImplementation((options) => {
-        onSuccessCallback = options?.onSuccess as () => void
-        return {
-          mutate: vi.fn(),
-          isPending: false,
-        } as unknown as ReturnType<typeof useMutationReferenceSettings>
-      })
-
-      renderHook(() => useReferenceSetting())
-
-      // Trigger the onSuccess callback
-      if (onSuccessCallback)
-        onSuccessCallback()
-
-      await waitFor(() => {
-        expect(mockInvalidate).toHaveBeenCalled()
-        expect(Toast.notify).toHaveBeenCalledWith({
-          type: 'success',
-          message: 'api.actionSuccess',
-        })
-      })
-    })
-  })
-
-  describe('returned values', () => {
-    it('should return referenceSetting data', () => {
-      const mockData = {
-        permission: {
-          install_permission: PermissionType.everyone,
-          debug_permission: PermissionType.everyone,
-        },
-      }
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: mockData,
-      } as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.referenceSetting).toEqual(mockData)
-    })
-
-    it('should return isUpdatePending from mutation', () => {
-      vi.mocked(useMutationReferenceSettings).mockReturnValue({
-        mutate: vi.fn(),
-        isPending: true,
-      } as unknown as ReturnType<typeof useMutationReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.isUpdatePending).toBe(true)
-    })
-
-    it('should handle null data', () => {
-      vi.mocked(useReferenceSettings).mockReturnValue({
-        data: null,
-      } as unknown as ReturnType<typeof useReferenceSettings>)
-
-      const { result } = renderHook(() => useReferenceSetting())
-
-      expect(result.current.canManagement).toBe(false)
-      expect(result.current.canDebugger).toBe(false)
-    })
-  })
-})
-
-describe('useCanInstallPluginFromMarketplace Hook', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    vi.mocked(useAppContext).mockReturnValue({
-      isCurrentWorkspaceManager: true,
-      isCurrentWorkspaceOwner: false,
-    } as ReturnType<typeof useAppContext>)
-
-    vi.mocked(useReferenceSettings).mockReturnValue({
-      data: {
-        permission: {
-          install_permission: PermissionType.everyone,
-          debug_permission: PermissionType.everyone,
-        },
-      },
-    } as ReturnType<typeof useReferenceSettings>)
-
-    vi.mocked(useMutationReferenceSettings).mockReturnValue({
-      mutate: vi.fn(),
-      isPending: false,
-    } as unknown as ReturnType<typeof useMutationReferenceSettings>)
-
-    vi.mocked(useInvalidateReferenceSettings).mockReturnValue(vi.fn())
-  })
-
-  it('should return true when marketplace is enabled and canManagement is true', () => {
-    vi.mocked(useGlobalPublicStore).mockImplementation((selector) => {
-      const state = {
-        systemFeatures: {
-          enable_marketplace: true,
-        },
-      }
-      return selector(state as Parameters<typeof selector>[0])
-    })
-
-    const { result } = renderHook(() => useCanInstallPluginFromMarketplace())
-
-    expect(result.current.canInstallPluginFromMarketplace).toBe(true)
-  })
-
-  it('should return false when marketplace is disabled', () => {
-    vi.mocked(useGlobalPublicStore).mockImplementation((selector) => {
-      const state = {
-        systemFeatures: {
-          enable_marketplace: false,
-        },
-      }
-      return selector(state as Parameters<typeof selector>[0])
-    })
-
-    const { result } = renderHook(() => useCanInstallPluginFromMarketplace())
-
-    expect(result.current.canInstallPluginFromMarketplace).toBe(false)
-  })
-
-  it('should return false when canManagement is false', () => {
-    vi.mocked(useGlobalPublicStore).mockImplementation((selector) => {
-      const state = {
-        systemFeatures: {
-          enable_marketplace: true,
-        },
-      }
-      return selector(state as Parameters<typeof selector>[0])
-    })
-
-    vi.mocked(useReferenceSettings).mockReturnValue({
-      data: {
-        permission: {
-          install_permission: PermissionType.noOne,
-          debug_permission: PermissionType.noOne,
-        },
-      },
-    } as ReturnType<typeof useReferenceSettings>)
-
-    const { result } = renderHook(() => useCanInstallPluginFromMarketplace())
-
-    expect(result.current.canInstallPluginFromMarketplace).toBe(false)
-  })
-
-  it('should return false when both marketplace is disabled and canManagement is false', () => {
-    vi.mocked(useGlobalPublicStore).mockImplementation((selector) => {
-      const state = {
-        systemFeatures: {
-          enable_marketplace: false,
-        },
-      }
-      return selector(state as Parameters<typeof selector>[0])
-    })
-
-    vi.mocked(useReferenceSettings).mockReturnValue({
-      data: {
-        permission: {
-          install_permission: PermissionType.noOne,
-          debug_permission: PermissionType.noOne,
-        },
-      },
-    } as ReturnType<typeof useReferenceSettings>)
-
-    const { result } = renderHook(() => useCanInstallPluginFromMarketplace())
-
-    expect(result.current.canInstallPluginFromMarketplace).toBe(false)
-  })
-})

web/app/components/plugins/plugin-page/use-uploader.spec.ts

@@ -1,487 +0,0 @@
-import type { RefObject } from 'react'
-import { act, renderHook } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useUploader } from './use-uploader'
-
-describe('useUploader Hook', () => {
-  let mockContainerRef: RefObject<HTMLDivElement | null>
-  let mockOnFileChange: (file: File | null) => void
-  let mockContainer: HTMLDivElement
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    mockContainer = document.createElement('div')
-    document.body.appendChild(mockContainer)
-
-    mockContainerRef = { current: mockContainer }
-    mockOnFileChange = vi.fn()
-  })
-
-  afterEach(() => {
-    if (mockContainer.parentNode)
-      document.body.removeChild(mockContainer)
-  })
-
-  describe('Initial State', () => {
-    it('should return initial state with dragging false', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      expect(result.current.dragging).toBe(false)
-      expect(result.current.fileUploader.current).toBeNull()
-      expect(result.current.fileChangeHandle).not.toBeNull()
-      expect(result.current.removeFile).not.toBeNull()
-    })
-
-    it('should return null handlers when disabled', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-          enabled: false,
-        }),
-      )
-
-      expect(result.current.dragging).toBe(false)
-      expect(result.current.fileChangeHandle).toBeNull()
-      expect(result.current.removeFile).toBeNull()
-    })
-  })
-
-  describe('Drag Events', () => {
-    it('should handle dragenter and set dragging to true', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      const dragEnterEvent = new Event('dragenter', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
-        value: { types: ['Files'] },
-      })
-
-      act(() => {
-        mockContainer.dispatchEvent(dragEnterEvent)
-      })
-
-      expect(result.current.dragging).toBe(true)
-    })
-
-    it('should not set dragging when dragenter without Files type', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      const dragEnterEvent = new Event('dragenter', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
-        value: { types: ['text/plain'] },
-      })
-
-      act(() => {
-        mockContainer.dispatchEvent(dragEnterEvent)
-      })
-
-      expect(result.current.dragging).toBe(false)
-    })
-
-    it('should handle dragover event', () => {
-      renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
-
-      act(() => {
-        mockContainer.dispatchEvent(dragOverEvent)
-      })
-
-      // dragover should prevent default and stop propagation
-      expect(mockContainer).toBeInTheDocument()
-    })
-
-    it('should handle dragleave when relatedTarget is null', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      // First set dragging to true
-      const dragEnterEvent = new Event('dragenter', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
-        value: { types: ['Files'] },
-      })
-      act(() => {
-        mockContainer.dispatchEvent(dragEnterEvent)
-      })
-      expect(result.current.dragging).toBe(true)
-
-      // Then trigger dragleave with null relatedTarget
-      const dragLeaveEvent = new Event('dragleave', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragLeaveEvent, 'relatedTarget', {
-        value: null,
-      })
-
-      act(() => {
-        mockContainer.dispatchEvent(dragLeaveEvent)
-      })
-
-      expect(result.current.dragging).toBe(false)
-    })
-
-    it('should handle dragleave when relatedTarget is outside container', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      // First set dragging to true
-      const dragEnterEvent = new Event('dragenter', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
-        value: { types: ['Files'] },
-      })
-      act(() => {
-        mockContainer.dispatchEvent(dragEnterEvent)
-      })
-      expect(result.current.dragging).toBe(true)
-
-      // Create element outside container
-      const outsideElement = document.createElement('div')
-      document.body.appendChild(outsideElement)
-
-      // Trigger dragleave with relatedTarget outside container
-      const dragLeaveEvent = new Event('dragleave', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragLeaveEvent, 'relatedTarget', {
-        value: outsideElement,
-      })
-
-      act(() => {
-        mockContainer.dispatchEvent(dragLeaveEvent)
-      })
-
-      expect(result.current.dragging).toBe(false)
-      document.body.removeChild(outsideElement)
-    })
-
-    it('should not set dragging to false when relatedTarget is inside container', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      // First set dragging to true
-      const dragEnterEvent = new Event('dragenter', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
-        value: { types: ['Files'] },
-      })
-      act(() => {
-        mockContainer.dispatchEvent(dragEnterEvent)
-      })
-      expect(result.current.dragging).toBe(true)
-
-      // Create element inside container
-      const insideElement = document.createElement('div')
-      mockContainer.appendChild(insideElement)
-
-      // Trigger dragleave with relatedTarget inside container
-      const dragLeaveEvent = new Event('dragleave', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragLeaveEvent, 'relatedTarget', {
-        value: insideElement,
-      })
-
-      act(() => {
-        mockContainer.dispatchEvent(dragLeaveEvent)
-      })
-
-      // Should still be dragging since relatedTarget is inside container
-      expect(result.current.dragging).toBe(true)
-    })
-  })
-
-  describe('Drop Events', () => {
-    it('should handle drop event with files', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      // First set dragging to true
-      const dragEnterEvent = new Event('dragenter', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
-        value: { types: ['Files'] },
-      })
-      act(() => {
-        mockContainer.dispatchEvent(dragEnterEvent)
-      })
-
-      // Create mock file
-      const file = new File(['content'], 'test.difypkg', { type: 'application/octet-stream' })
-
-      // Trigger drop event
-      const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
-      Object.defineProperty(dropEvent, 'dataTransfer', {
-        value: { files: [file] },
-      })
-
-      act(() => {
-        mockContainer.dispatchEvent(dropEvent)
-      })
-
-      expect(result.current.dragging).toBe(false)
-      expect(mockOnFileChange).toHaveBeenCalledWith(file)
-    })
-
-    it('should not call onFileChange when drop has no dataTransfer', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      // Set dragging first
-      const dragEnterEvent = new Event('dragenter', { bubbles: true, cancelable: true })
-      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
-        value: { types: ['Files'] },
-      })
-      act(() => {
-        mockContainer.dispatchEvent(dragEnterEvent)
-      })
-
-      // Drop without dataTransfer
-      const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
-      // No dataTransfer property
-
-      act(() => {
-        mockContainer.dispatchEvent(dropEvent)
-      })
-
-      expect(result.current.dragging).toBe(false)
-      expect(mockOnFileChange).not.toHaveBeenCalled()
-    })
-
-    it('should not call onFileChange when drop has empty files array', () => {
-      renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
-      Object.defineProperty(dropEvent, 'dataTransfer', {
-        value: { files: [] },
-      })
-
-      act(() => {
-        mockContainer.dispatchEvent(dropEvent)
-      })
-
-      expect(mockOnFileChange).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('File Change Handler', () => {
-    it('should call onFileChange with file from input', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      const file = new File(['content'], 'test.difypkg', { type: 'application/octet-stream' })
-      const mockEvent = {
-        target: {
-          files: [file],
-        },
-      } as unknown as React.ChangeEvent<HTMLInputElement>
-
-      act(() => {
-        result.current.fileChangeHandle?.(mockEvent)
-      })
-
-      expect(mockOnFileChange).toHaveBeenCalledWith(file)
-    })
-
-    it('should call onFileChange with null when no files', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      const mockEvent = {
-        target: {
-          files: null,
-        },
-      } as unknown as React.ChangeEvent<HTMLInputElement>
-
-      act(() => {
-        result.current.fileChangeHandle?.(mockEvent)
-      })
-
-      expect(mockOnFileChange).toHaveBeenCalledWith(null)
-    })
-  })
-
-  describe('Remove File', () => {
-    it('should call onFileChange with null', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      act(() => {
-        result.current.removeFile?.()
-      })
-
-      expect(mockOnFileChange).toHaveBeenCalledWith(null)
-    })
-
-    it('should handle removeFile when fileUploader has a value', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      // Create a mock input element with value property
-      const mockInput = {
-        value: 'test.difypkg',
-      }
-
-      // Override the fileUploader ref
-      Object.defineProperty(result.current.fileUploader, 'current', {
-        value: mockInput,
-        writable: true,
-      })
-
-      act(() => {
-        result.current.removeFile?.()
-      })
-
-      expect(mockOnFileChange).toHaveBeenCalledWith(null)
-      expect(mockInput.value).toBe('')
-    })
-
-    it('should handle removeFile when fileUploader is null', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-        }),
-      )
-
-      // fileUploader.current is null by default
-      act(() => {
-        result.current.removeFile?.()
-      })
-
-      expect(mockOnFileChange).toHaveBeenCalledWith(null)
-    })
-  })
-
-  describe('Enabled/Disabled State', () => {
-    it('should not add event listeners when disabled', () => {
-      const addEventListenerSpy = vi.spyOn(mockContainer, 'addEventListener')
-
-      renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-          enabled: false,
-        }),
-      )
-
-      expect(addEventListenerSpy).not.toHaveBeenCalled()
-    })
-
-    it('should add event listeners when enabled', () => {
-      const addEventListenerSpy = vi.spyOn(mockContainer, 'addEventListener')
-
-      renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-          enabled: true,
-        }),
-      )
-
-      expect(addEventListenerSpy).toHaveBeenCalledWith('dragenter', expect.any(Function))
-      expect(addEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function))
-      expect(addEventListenerSpy).toHaveBeenCalledWith('dragleave', expect.any(Function))
-      expect(addEventListenerSpy).toHaveBeenCalledWith('drop', expect.any(Function))
-    })
-
-    it('should remove event listeners on cleanup', () => {
-      const removeEventListenerSpy = vi.spyOn(mockContainer, 'removeEventListener')
-
-      const { unmount } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-          enabled: true,
-        }),
-      )
-
-      unmount()
-
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragenter', expect.any(Function))
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function))
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('dragleave', expect.any(Function))
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('drop', expect.any(Function))
-    })
-
-    it('should return false for dragging when disabled', () => {
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: mockContainerRef,
-          enabled: false,
-        }),
-      )
-
-      expect(result.current.dragging).toBe(false)
-    })
-  })
-
-  describe('Container Ref Edge Cases', () => {
-    it('should handle null containerRef.current', () => {
-      const nullRef: RefObject<HTMLDivElement | null> = { current: null }
-
-      const { result } = renderHook(() =>
-        useUploader({
-          onFileChange: mockOnFileChange,
-          containerRef: nullRef,
-        }),
-      )
-
-      expect(result.current.dragging).toBe(false)
-    })
-  })
-})

web/app/components/rag-pipeline/index.spec.tsx

@@ -1,550 +0,0 @@
-import type { FetchWorkflowDraftResponse } from '@/types/workflow'
-import { cleanup, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { BlockEnum } from '@/app/components/workflow/types'
-
-// Import real utility functions (pure functions, no side effects)
-
-// Import mocked modules for manipulation
-import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
-import { usePipelineInit } from './hooks'
-import RagPipelineWrapper from './index'
-import { processNodesWithoutDataSource } from './utils'
-
-// Mock: Context - need to control return values
-vi.mock('@/context/dataset-detail', () => ({
-  useDatasetDetailContextWithSelector: vi.fn(),
-}))
-
-// Mock: Hook with API calls
-vi.mock('./hooks', () => ({
-  usePipelineInit: vi.fn(),
-}))
-
-// Mock: Store creator
-vi.mock('./store', () => ({
-  createRagPipelineSliceSlice: vi.fn(() => ({})),
-}))
-
-// Mock: Utility with complex workflow dependencies (generateNewNode, etc.)
-vi.mock('./utils', () => ({
-  processNodesWithoutDataSource: vi.fn((nodes, viewport) => ({
-    nodes,
-    viewport,
-  })),
-}))
-
-// Mock: Complex component with useParams, Toast, API calls
-vi.mock('./components/conversion', () => ({
-  default: () => <div data-testid="conversion-component">Conversion Component</div>,
-}))
-
-// Mock: Complex component with many hooks and workflow dependencies
-vi.mock('./components/rag-pipeline-main', () => ({
-  default: ({ nodes, edges, viewport }: any) => (
-    <div data-testid="rag-pipeline-main">
-      <span data-testid="nodes-count">{nodes?.length ?? 0}</span>
-      <span data-testid="edges-count">{edges?.length ?? 0}</span>
-      <span data-testid="viewport-zoom">{viewport?.zoom ?? 'none'}</span>
-    </div>
-  ),
-}))
-
-// Mock: Complex component with ReactFlow and many providers
-vi.mock('@/app/components/workflow', () => ({
-  default: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="workflow-default-context">{children}</div>
-  ),
-}))
-
-// Mock: Context provider
-vi.mock('@/app/components/workflow/context', () => ({
-  WorkflowContextProvider: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="workflow-context-provider">{children}</div>
-  ),
-}))
-
-// Type assertions for mocked functions
-const mockUseDatasetDetailContextWithSelector = vi.mocked(useDatasetDetailContextWithSelector)
-const mockUsePipelineInit = vi.mocked(usePipelineInit)
-const mockProcessNodesWithoutDataSource = vi.mocked(processNodesWithoutDataSource)
-
-// Helper to mock selector with actual execution (increases function coverage)
-// This executes the real selector function: s => s.dataset?.pipeline_id
-const mockSelectorWithDataset = (pipelineId: string | null | undefined) => {
-  mockUseDatasetDetailContextWithSelector.mockImplementation((selector: (state: any) => any) => {
-    const mockState = { dataset: pipelineId ? { pipeline_id: pipelineId } : null }
-    return selector(mockState)
-  })
-}
-
-// Test data factory
-const createMockWorkflowData = (overrides?: Partial<FetchWorkflowDraftResponse>): FetchWorkflowDraftResponse => ({
-  graph: {
-    nodes: [
-      { id: 'node-1', type: 'custom', data: { type: BlockEnum.Start, title: 'Start' }, position: { x: 100, y: 100 } },
-      { id: 'node-2', type: 'custom', data: { type: BlockEnum.End, title: 'End' }, position: { x: 300, y: 100 } },
-    ],
-    edges: [
-      { id: 'edge-1', source: 'node-1', target: 'node-2', type: 'custom' },
-    ],
-    viewport: { x: 0, y: 0, zoom: 1 },
-  },
-  hash: 'test-hash-123',
-  updated_at: 1234567890,
-  tool_published: false,
-  environment_variables: [],
-  ...overrides,
-} as FetchWorkflowDraftResponse)
-
-afterEach(() => {
-  cleanup()
-  vi.clearAllMocks()
-})
-
-describe('RagPipelineWrapper', () => {
-  describe('Rendering', () => {
-    it('should render Conversion component when pipelineId is null', () => {
-      mockSelectorWithDataset(null)
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('conversion-component')).toBeInTheDocument()
-      expect(screen.queryByTestId('workflow-context-provider')).not.toBeInTheDocument()
-    })
-
-    it('should render Conversion component when pipelineId is undefined', () => {
-      mockSelectorWithDataset(undefined)
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('conversion-component')).toBeInTheDocument()
-    })
-
-    it('should render Conversion component when pipelineId is empty string', () => {
-      mockSelectorWithDataset('')
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('conversion-component')).toBeInTheDocument()
-    })
-
-    it('should render WorkflowContextProvider when pipelineId exists', () => {
-      mockSelectorWithDataset('pipeline-123')
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: true })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
-      expect(screen.queryByTestId('conversion-component')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Props Variations', () => {
-    it('should pass injectWorkflowStoreSliceFn to WorkflowContextProvider', () => {
-      mockSelectorWithDataset('pipeline-456')
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: true })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('workflow-context-provider')).toBeInTheDocument()
-    })
-  })
-})
-
-describe('RagPipeline', () => {
-  beforeEach(() => {
-    // Default setup for RagPipeline tests - execute real selector function
-    mockSelectorWithDataset('pipeline-123')
-  })
-
-  describe('Loading State', () => {
-    it('should render Loading component when isLoading is true', () => {
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: true })
-
-      render(<RagPipelineWrapper />)
-
-      // Real Loading component has role="status"
-      expect(screen.getByRole('status')).toBeInTheDocument()
-    })
-
-    it('should render Loading component when data is undefined', () => {
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByRole('status')).toBeInTheDocument()
-    })
-
-    it('should render Loading component when both data is undefined and isLoading is true', () => {
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: true })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByRole('status')).toBeInTheDocument()
-    })
-  })
-
-  describe('Data Loaded State', () => {
-    it('should render RagPipelineMain when data is loaded', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('rag-pipeline-main')).toBeInTheDocument()
-      expect(screen.queryByTestId('loading-component')).not.toBeInTheDocument()
-    })
-
-    it('should pass processed nodes to RagPipelineMain', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('nodes-count').textContent).toBe('2')
-    })
-
-    it('should pass edges to RagPipelineMain', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('edges-count').textContent).toBe('1')
-    })
-
-    it('should pass viewport to RagPipelineMain', () => {
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: [],
-          edges: [],
-          viewport: { x: 100, y: 200, zoom: 1.5 },
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('viewport-zoom').textContent).toBe('1.5')
-    })
-  })
-
-  describe('Memoization Logic', () => {
-    it('should process nodes through initialNodes when data is loaded', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      // initialNodes is a real function - verify nodes are rendered
-      // The real initialNodes processes nodes and adds position data
-      expect(screen.getByTestId('rag-pipeline-main')).toBeInTheDocument()
-    })
-
-    it('should process edges through initialEdges when data is loaded', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      // initialEdges is a real function - verify component renders with edges
-      expect(screen.getByTestId('edges-count').textContent).toBe('1')
-    })
-
-    it('should call processNodesWithoutDataSource with nodesData and viewport', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(mockProcessNodesWithoutDataSource).toHaveBeenCalled()
-    })
-
-    it('should not process nodes when data is undefined', () => {
-      mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      // When data is undefined, Loading is shown, processNodesWithoutDataSource is not called
-      expect(mockProcessNodesWithoutDataSource).not.toHaveBeenCalled()
-    })
-
-    it('should use memoized values when data reference is same', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      const { rerender } = render(<RagPipelineWrapper />)
-
-      // Clear mock call count after initial render
-      mockProcessNodesWithoutDataSource.mockClear()
-
-      // Rerender with same data reference (no change to mockUsePipelineInit)
-      rerender(<RagPipelineWrapper />)
-
-      // processNodesWithoutDataSource should not be called again due to useMemo
-      // Note: React strict mode may cause double render, so we check it's not excessive
-      expect(mockProcessNodesWithoutDataSource.mock.calls.length).toBeLessThanOrEqual(1)
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle empty nodes array', () => {
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: [],
-          edges: [],
-          viewport: { x: 0, y: 0, zoom: 1 },
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('nodes-count').textContent).toBe('0')
-    })
-
-    it('should handle empty edges array', () => {
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: [{ id: 'node-1', type: 'custom', data: { type: BlockEnum.Start, title: 'Start', desc: '' }, position: { x: 0, y: 0 } }],
-          edges: [],
-          viewport: { x: 0, y: 0, zoom: 1 },
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('edges-count').textContent).toBe('0')
-    })
-
-    it('should handle undefined viewport', () => {
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: [],
-          edges: [],
-          viewport: undefined as any,
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('rag-pipeline-main')).toBeInTheDocument()
-    })
-
-    it('should handle null viewport', () => {
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: [],
-          edges: [],
-          viewport: null as any,
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('rag-pipeline-main')).toBeInTheDocument()
-    })
-
-    it('should handle large number of nodes', () => {
-      const largeNodesArray = Array.from({ length: 100 }, (_, i) => ({
-        id: `node-${i}`,
-        type: 'custom',
-        data: { type: BlockEnum.Start, title: `Node ${i}`, desc: '' },
-        position: { x: i * 100, y: 0 },
-      }))
-
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: largeNodesArray,
-          edges: [],
-          viewport: { x: 0, y: 0, zoom: 1 },
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('nodes-count').textContent).toBe('100')
-    })
-
-    it('should handle viewport with edge case zoom values', () => {
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: [],
-          edges: [],
-          viewport: { x: -1000, y: -1000, zoom: 0.25 },
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('viewport-zoom').textContent).toBe('0.25')
-    })
-
-    it('should handle viewport with maximum zoom', () => {
-      const mockData = createMockWorkflowData({
-        graph: {
-          nodes: [],
-          edges: [],
-          viewport: { x: 0, y: 0, zoom: 4 },
-        },
-      })
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('viewport-zoom').textContent).toBe('4')
-    })
-  })
-
-  describe('Component Integration', () => {
-    it('should render WorkflowWithDefaultContext as wrapper', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      expect(screen.getByTestId('workflow-default-context')).toBeInTheDocument()
-    })
-
-    it('should nest RagPipelineMain inside WorkflowWithDefaultContext', () => {
-      const mockData = createMockWorkflowData()
-      mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-      render(<RagPipelineWrapper />)
-
-      const workflowContext = screen.getByTestId('workflow-default-context')
-      const ragPipelineMain = screen.getByTestId('rag-pipeline-main')
-
-      expect(workflowContext).toContainElement(ragPipelineMain)
-    })
-  })
-})
-
-describe('processNodesWithoutDataSource utility integration', () => {
-  beforeEach(() => {
-    mockSelectorWithDataset('pipeline-123')
-  })
-
-  it('should process nodes through processNodesWithoutDataSource', () => {
-    const mockData = createMockWorkflowData()
-    mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-    mockProcessNodesWithoutDataSource.mockReturnValue({
-      nodes: [{ id: 'processed-node', type: 'custom', data: { type: BlockEnum.Start, title: 'Processed', desc: '' }, position: { x: 0, y: 0 } }] as any,
-      viewport: { x: 0, y: 0, zoom: 2 },
-    })
-
-    render(<RagPipelineWrapper />)
-
-    expect(mockProcessNodesWithoutDataSource).toHaveBeenCalled()
-    expect(screen.getByTestId('nodes-count').textContent).toBe('1')
-    expect(screen.getByTestId('viewport-zoom').textContent).toBe('2')
-  })
-
-  it('should handle processNodesWithoutDataSource returning modified viewport', () => {
-    const mockData = createMockWorkflowData()
-    mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-    mockProcessNodesWithoutDataSource.mockReturnValue({
-      nodes: [],
-      viewport: { x: 500, y: 500, zoom: 0.5 },
-    })
-
-    render(<RagPipelineWrapper />)
-
-    expect(screen.getByTestId('viewport-zoom').textContent).toBe('0.5')
-  })
-})
-
-describe('Conditional Rendering Flow', () => {
-  it('should transition from loading to loaded state', () => {
-    mockSelectorWithDataset('pipeline-123')
-
-    // Start with loading state
-    mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: true })
-    const { rerender } = render(<RagPipelineWrapper />)
-
-    // Real Loading component has role="status"
-    expect(screen.getByRole('status')).toBeInTheDocument()
-
-    // Transition to loaded state
-    const mockData = createMockWorkflowData()
-    mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-    rerender(<RagPipelineWrapper />)
-
-    expect(screen.getByTestId('rag-pipeline-main')).toBeInTheDocument()
-  })
-
-  it('should switch from Conversion to Pipeline when pipelineId becomes available', () => {
-    // Start without pipelineId
-    mockSelectorWithDataset(null)
-    mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: false })
-
-    const { rerender } = render(<RagPipelineWrapper />)
-
-    expect(screen.getByTestId('conversion-component')).toBeInTheDocument()
-
-    // PipelineId becomes available
-    mockSelectorWithDataset('new-pipeline-id')
-    mockUsePipelineInit.mockReturnValue({ data: undefined, isLoading: true })
-    rerender(<RagPipelineWrapper />)
-
-    expect(screen.queryByTestId('conversion-component')).not.toBeInTheDocument()
-    // Real Loading component has role="status"
-    expect(screen.getByRole('status')).toBeInTheDocument()
-  })
-})
-
-describe('Error Handling', () => {
-  beforeEach(() => {
-    mockSelectorWithDataset('pipeline-123')
-  })
-
-  it('should throw when graph nodes is null', () => {
-    const mockData = {
-      graph: {
-        nodes: null as any,
-        edges: null as any,
-        viewport: { x: 0, y: 0, zoom: 1 },
-      },
-      hash: 'test',
-      updated_at: 123,
-    } as FetchWorkflowDraftResponse
-
-    mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-    // Suppress console.error for expected error
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    // Real initialNodes will throw when nodes is null
-    // This documents the component's current behavior - it requires valid nodes array
-    expect(() => render(<RagPipelineWrapper />)).toThrow()
-
-    consoleSpy.mockRestore()
-  })
-
-  it('should throw when graph property is missing', () => {
-    const mockData = {
-      hash: 'test',
-      updated_at: 123,
-    } as unknown as FetchWorkflowDraftResponse
-
-    mockUsePipelineInit.mockReturnValue({ data: mockData, isLoading: false })
-
-    // Suppress console.error for expected error
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    // When graph is undefined, component throws because data.graph.nodes is accessed
-    // This documents the component's current behavior - it requires graph to be present
-    expect(() => render(<RagPipelineWrapper />)).toThrow()
-
-    consoleSpy.mockRestore()
-  })
-})

web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx

@@ -9,10 +9,6 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { useRetryConfig } from './hooks'
 import s from './style.module.css'
 
-// Nodes that support first token timeout configuration
-// These nodes internally call LLM and have streaming response characteristics
-const LLM_RELATED_NODE_TYPES = ['llm', 'agent', 'parameter-extractor', 'question-classifier']
-
 type RetryOnPanelProps = Pick<Node, 'id' | 'data'>
 const RetryOnPanel = ({
   id,
@@ -20,14 +16,10 @@ const RetryOnPanel = ({
 }: RetryOnPanelProps) => {
   const { t } = useTranslation()
   const { handleRetryConfigChange } = useRetryConfig(id)
-  const { retry_config, type } = data
-
-  // Check if this is an LLM-related node that supports first token timeout
-  const isLLMRelatedNode = LLM_RELATED_NODE_TYPES.includes(type)
+  const { retry_config } = data
 
   const handleRetryEnabledChange = (value: boolean) => {
     handleRetryConfigChange({
-      ...retry_config,
       retry_enabled: value,
       max_retries: retry_config?.max_retries || 3,
       retry_interval: retry_config?.retry_interval || 1000,
@@ -40,7 +32,6 @@ const RetryOnPanel = ({
     else if (value < 1)
       value = 1
     handleRetryConfigChange({
-      ...retry_config,
       retry_enabled: true,
       max_retries: value,
       retry_interval: retry_config?.retry_interval || 1000,
@@ -53,27 +44,12 @@ const RetryOnPanel = ({
     else if (value < 100)
       value = 100
     handleRetryConfigChange({
-      ...retry_config,
       retry_enabled: true,
       max_retries: retry_config?.max_retries || 3,
       retry_interval: value,
     })
   }
 
-  const handleFirstTokenTimeoutChange = (value: number) => {
-    if (value > 60000)
-      value = 60000
-    else if (value < 0)
-      value = 0
-    handleRetryConfigChange({
-      ...retry_config,
-      retry_enabled: true,
-      max_retries: retry_config?.max_retries || 3,
-      retry_interval: retry_config?.retry_interval || 1000,
-      first_token_timeout: value,
-    })
-  }
-
   return (
     <>
       <div className="pt-2">
@@ -86,76 +62,54 @@ const RetryOnPanel = ({
             onChange={v => handleRetryEnabledChange(v)}
           />
         </div>
-        {retry_config?.retry_enabled && (
-          <div className="px-4 pb-2">
-            <div className="mb-1 flex w-full items-center">
-              <div className="system-xs-medium-uppercase mr-2 grow text-text-secondary">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
-              <Slider
-                className="mr-3 w-[108px]"
-                value={retry_config?.max_retries || 3}
-                onChange={handleMaxRetriesChange}
-                min={1}
-                max={10}
-              />
-              <Input
-                type="number"
-                wrapperClassName="w-[100px]"
-                value={retry_config?.max_retries || 3}
-                onChange={e =>
-                  handleMaxRetriesChange(Number.parseInt(e.currentTarget.value, 10) || 3)}
-                min={1}
-                max={10}
-                unit={t('nodes.common.retry.times', { ns: 'workflow' }) || ''}
-                className={s.input}
-              />
-            </div>
-            <div className="mb-1 flex w-full items-center">
-              <div className="system-xs-medium-uppercase mr-2 grow text-text-secondary">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
-              <Slider
-                className="mr-3 w-[108px]"
-                value={retry_config?.retry_interval || 1000}
-                onChange={handleRetryIntervalChange}
-                min={100}
-                max={5000}
-              />
-              <Input
-                type="number"
-                wrapperClassName="w-[100px]"
-                value={retry_config?.retry_interval || 1000}
-                onChange={e =>
-                  handleRetryIntervalChange(Number.parseInt(e.currentTarget.value, 10) || 1000)}
-                min={100}
-                max={5000}
-                unit={t('nodes.common.retry.ms', { ns: 'workflow' }) || ''}
-                className={s.input}
-              />
-            </div>
-            {/* First token timeout - only for LLM-related nodes */}
-            {isLLMRelatedNode && (
-              <div className="flex w-full items-center">
-                <div className="system-xs-medium-uppercase mr-2 grow text-text-secondary">{t('nodes.common.retry.firstTokenTimeout', { ns: 'workflow' })}</div>
+        {
+          retry_config?.retry_enabled && (
+            <div className="px-4 pb-2">
+              <div className="mb-1 flex w-full items-center">
+                <div className="system-xs-medium-uppercase mr-2 grow text-text-secondary">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
                 <Slider
                   className="mr-3 w-[108px]"
-                  value={retry_config?.first_token_timeout ?? 3000}
-                  onChange={handleFirstTokenTimeoutChange}
-                  min={0}
-                  max={60000}
+                  value={retry_config?.max_retries || 3}
+                  onChange={handleMaxRetriesChange}
+                  min={1}
+                  max={10}
                 />
                 <Input
                   type="number"
                   wrapperClassName="w-[100px]"
-                  value={retry_config?.first_token_timeout ?? 3000}
+                  value={retry_config?.max_retries || 3}
                   onChange={e =>
-                    handleFirstTokenTimeoutChange(Number.parseInt(e.currentTarget.value, 10) || 0)}
-                  min={0}
-                  max={60000}
+                    handleMaxRetriesChange(Number.parseInt(e.currentTarget.value, 10) || 3)}
+                  min={1}
+                  max={10}
+                  unit={t('nodes.common.retry.times', { ns: 'workflow' }) || ''}
+                  className={s.input}
+                />
+              </div>
+              <div className="flex items-center">
+                <div className="system-xs-medium-uppercase mr-2 grow text-text-secondary">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
+                <Slider
+                  className="mr-3 w-[108px]"
+                  value={retry_config?.retry_interval || 1000}
+                  onChange={handleRetryIntervalChange}
+                  min={100}
+                  max={5000}
+                />
+                <Input
+                  type="number"
+                  wrapperClassName="w-[100px]"
+                  value={retry_config?.retry_interval || 1000}
+                  onChange={e =>
+                    handleRetryIntervalChange(Number.parseInt(e.currentTarget.value, 10) || 1000)}
+                  min={100}
+                  max={5000}
                   unit={t('nodes.common.retry.ms', { ns: 'workflow' }) || ''}
                   className={s.input}
                 />
               </div>
-            )}
-          </div>
-        )}
+            </div>
+          )
+        }
       </div>
       <Split className="mx-4 mt-2" />
     </>

web/app/components/workflow/nodes/_base/components/retry/types.ts

@@ -2,6 +2,4 @@ export type WorkflowRetryConfig = {
   max_retries: number
   retry_interval: number
   retry_enabled: boolean
-  // First token timeout for LLM nodes (seconds), 0 means no timeout
-  first_token_timeout?: number
 }

web/app/signin/components/mail-and-password-auth.tsx

@@ -65,10 +65,8 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
         body: loginData,
       })
       if (res.result === 'success') {
-        if (res?.data?.access_token) {
-          // Track login success event
-          setWebAppAccessToken(res.data.access_token)
-        }
+        // Track login success event
+        setWebAppAccessToken(res.data.access_token)
         trackEvent('user_login_success', {
           method: 'email_password',
           is_invite: isInvite,

web/app/sw.ts

@@ -21,7 +21,6 @@ const offlineUrl = `${basePath}/_offline.html`
 const serwist = new Serwist({
   precacheEntries: self.__SW_MANIFEST,
   skipWaiting: true,
-  disableDevLogs: true,
   clientsClaim: true,
   navigationPreload: true,
   runtimeCaching: [

web/contract/console.ts

@@ -1,7 +1,16 @@
+import type { SystemFeatures } from '@/types/feature'
 import { type } from '@orpc/contract'
-import { base } from '../base'
+import { base } from './base'
 
-export const invoicesContract = base
+export const systemFeaturesContract = base
+  .route({
+    path: '/system-features',
+    method: 'GET',
+  })
+  .input(type<unknown>())
+  .output(type<SystemFeatures>())
+
+export const billingUrlContract = base
   .route({
     path: '/billing/invoices',
     method: 'GET',

web/contract/console/system.ts

@@ -1,11 +0,0 @@
-import type { SystemFeatures } from '@/types/feature'
-import { type } from '@orpc/contract'
-import { base } from '../base'
-
-export const systemFeaturesContract = base
-  .route({
-    path: '/system-features',
-    method: 'GET',
-  })
-  .input(type<unknown>())
-  .output(type<SystemFeatures>())

web/contract/router.ts

@@ -1,6 +1,5 @@
 import type { InferContractRouterInputs } from '@orpc/contract'
-import { bindPartnerStackContract, invoicesContract } from './console/billing'
-import { systemFeaturesContract } from './console/system'
+import { billingUrlContract, bindPartnerStackContract, systemFeaturesContract } from './console'
 import { collectionPluginsContract, collectionsContract, searchAdvancedContract } from './marketplace'
 
 export const marketplaceRouterContract = {
@@ -13,10 +12,8 @@ export type MarketPlaceInputs = InferContractRouterInputs<typeof marketplaceRout
 
 export const consoleRouterContract = {
   systemFeatures: systemFeaturesContract,
-  billing: {
-    invoices: invoicesContract,
-    bindPartnerStack: bindPartnerStackContract,
-  },
+  billingUrl: billingUrlContract,
+  bindPartnerStack: bindPartnerStackContract,
 }
 
 export type ConsoleInputs = InferContractRouterInputs<typeof consoleRouterContract>

web/i18n/en-US/workflow.json

@@ -433,7 +433,6 @@
   "nodes.common.memory.windowSize": "Window Size",
   "nodes.common.outputVars": "Output Variables",
   "nodes.common.pluginNotInstalled": "Plugin is not installed",
-  "nodes.common.retry.firstTokenTimeout": "First token timeout",
   "nodes.common.retry.maxRetries": "max retries",
   "nodes.common.retry.ms": "ms",
   "nodes.common.retry.retries": "{{num}} Retries",
@@ -445,8 +444,6 @@
   "nodes.common.retry.retrySuccessful": "Retry successful",
   "nodes.common.retry.retryTimes": "Retry {{times}} times on failure",
   "nodes.common.retry.retrying": "Retrying...",
-  "nodes.common.retry.seconds": "s",
-  "nodes.common.retry.timeoutDuration": "Timeout duration",
   "nodes.common.retry.times": "times",
   "nodes.common.typeSwitch.input": "Input value",
   "nodes.common.typeSwitch.variable": "Use variable",

web/i18n/zh-Hans/workflow.json

@@ -433,7 +433,6 @@
   "nodes.common.memory.windowSize": "记忆窗口",
   "nodes.common.outputVars": "输出变量",
   "nodes.common.pluginNotInstalled": "插件未安装",
-  "nodes.common.retry.firstTokenTimeout": "首个 Token 超时",
   "nodes.common.retry.maxRetries": "最大重试次数",
   "nodes.common.retry.ms": "毫秒",
   "nodes.common.retry.retries": "{{num}} 重试次数",
@@ -445,8 +444,6 @@
   "nodes.common.retry.retrySuccessful": "重试成功",
   "nodes.common.retry.retryTimes": "失败时重试 {{times}} 次",
   "nodes.common.retry.retrying": "重试中...",
-  "nodes.common.retry.seconds": "秒",
-  "nodes.common.retry.timeoutDuration": "超时时长",
   "nodes.common.retry.times": "次",
   "nodes.common.typeSwitch.input": "输入值",
   "nodes.common.typeSwitch.variable": "使用变量",

web/package.json

@@ -10,6 +10,9 @@
       "default": "./i18n-config/lib.client.ts"
     }
   },
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "browserslist": [
     "last 1 Chrome version",
     "last 1 Firefox version",

web/service/common.ts

@@ -38,7 +38,7 @@ import { del, get, patch, post, put } from './base'
 
 type LoginSuccess = {
   result: 'success'
-  data?: { access_token?: string }
+  data: { access_token: string }
 }
 type LoginFail = {
   result: 'fail'

web/service/demo/index.tsx

@@ -0,0 +1,153 @@
+'use client'
+import type { FC } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import * as React from 'react'
+import Loading from '@/app/components/base/loading'
+import { AppModeEnum } from '@/types/app'
+import { createApp, updateAppApiStatus, updateAppModelConfig, updateAppRateLimit, updateAppSiteAccessToken, updateAppSiteConfig, updateAppSiteStatus } from '../apps'
+import {
+  useAppDailyConversations,
+  useAppDailyEndUsers,
+  useAppDetail,
+  useAppList,
+} from '../use-apps'
+
+const Service: FC = () => {
+  const appId = '1'
+  const queryClient = useQueryClient()
+
+  const { data: appList, error: appListError, isLoading: isAppListLoading } = useAppList({ page: 1, limit: 30, name: '' })
+  const { data: firstApp, error: appDetailError, isLoading: isAppDetailLoading } = useAppDetail(appId)
+
+  const { data: updateAppSiteStatusRes, error: err1, isLoading: isUpdatingSiteStatus } = useQuery({
+    queryKey: ['demo', 'updateAppSiteStatus', appId],
+    queryFn: () => updateAppSiteStatus({ url: '/apps', body: { enable_site: false } }),
+  })
+  const { data: updateAppApiStatusRes, error: err2, isLoading: isUpdatingApiStatus } = useQuery({
+    queryKey: ['demo', 'updateAppApiStatus', appId],
+    queryFn: () => updateAppApiStatus({ url: '/apps', body: { enable_api: true } }),
+  })
+  const { data: updateAppRateLimitRes, error: err3, isLoading: isUpdatingRateLimit } = useQuery({
+    queryKey: ['demo', 'updateAppRateLimit', appId],
+    queryFn: () => updateAppRateLimit({ url: '/apps', body: { api_rpm: 10, api_rph: 20 } }),
+  })
+  const { data: updateAppSiteCodeRes, error: err4, isLoading: isUpdatingSiteCode } = useQuery({
+    queryKey: ['demo', 'updateAppSiteAccessToken', appId],
+    queryFn: () => updateAppSiteAccessToken({ url: '/apps' }),
+  })
+  const { data: updateAppSiteConfigRes, error: err5, isLoading: isUpdatingSiteConfig } = useQuery({
+    queryKey: ['demo', 'updateAppSiteConfig', appId],
+    queryFn: () => updateAppSiteConfig({ url: '/apps', body: { title: 'title test', author: 'author test' } }),
+  })
+
+  const { data: getAppDailyConversationsRes, error: err6, isLoading: isConversationsLoading } = useAppDailyConversations(appId, { start: '1', end: '2' })
+  const { data: getAppDailyEndUsersRes, error: err7, isLoading: isEndUsersLoading } = useAppDailyEndUsers(appId, { start: '1', end: '2' })
+
+  const { data: updateAppModelConfigRes, error: err8, isLoading: isUpdatingModelConfig } = useQuery({
+    queryKey: ['demo', 'updateAppModelConfig', appId],
+    queryFn: () => updateAppModelConfig({ url: '/apps', body: { model_id: 'gpt-100' } }),
+  })
+
+  const { mutateAsync: mutateCreateApp } = useMutation({
+    mutationKey: ['demo', 'createApp'],
+    mutationFn: () => createApp({
+      name: `new app${Math.round(Math.random() * 100)}`,
+      mode: AppModeEnum.CHAT,
+    }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['apps', 'list'],
+      })
+    },
+  })
+
+  const handleCreateApp = async () => {
+    await mutateCreateApp()
+  }
+
+  if (appListError || appDetailError || err1 || err2 || err3 || err4 || err5 || err6 || err7 || err8)
+    return <div>{JSON.stringify(appListError ?? appDetailError ?? err1 ?? err2 ?? err3 ?? err4 ?? err5 ?? err6 ?? err7 ?? err8)}</div>
+
+  const isLoading = isAppListLoading
+    || isAppDetailLoading
+    || isUpdatingSiteStatus
+    || isUpdatingApiStatus
+    || isUpdatingRateLimit
+    || isUpdatingSiteCode
+    || isUpdatingSiteConfig
+    || isConversationsLoading
+    || isEndUsersLoading
+    || isUpdatingModelConfig
+
+  if (isLoading || !appList || !firstApp || !updateAppSiteStatusRes || !updateAppApiStatusRes || !updateAppRateLimitRes || !updateAppSiteCodeRes || !updateAppSiteConfigRes || !getAppDailyConversationsRes || !getAppDailyEndUsersRes || !updateAppModelConfigRes)
+    return <Loading />
+
+  return (
+    <div>
+      <div className="flex flex-col gap-3">
+        <div>
+          <div>1.App list</div>
+          <div>
+            {appList.data.map(item => (
+              <div key={item.id}>
+                {item.id}
+                {' '}
+                {item.name}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <div>2.First app detail</div>
+          <div>{JSON.stringify(firstApp)}</div>
+        </div>
+
+        <div>
+          <button type="button" onClick={handleCreateApp}>Click me to Create App</button>
+        </div>
+
+        <div>
+          <div>4.updateAppSiteStatusRes</div>
+          <div>{JSON.stringify(updateAppSiteStatusRes)}</div>
+        </div>
+
+        <div>
+          <div>5.updateAppApiStatusRes</div>
+          <div>{JSON.stringify(updateAppApiStatusRes)}</div>
+        </div>
+
+        <div>
+          <div>6.updateAppRateLimitRes</div>
+          <div>{JSON.stringify(updateAppRateLimitRes)}</div>
+        </div>
+
+        <div>
+          <div>7.updateAppSiteCodeRes</div>
+          <div>{JSON.stringify(updateAppSiteCodeRes)}</div>
+        </div>
+
+        <div>
+          <div>8.updateAppSiteConfigRes</div>
+          <div>{JSON.stringify(updateAppSiteConfigRes)}</div>
+        </div>
+
+        <div>
+          <div>9.getAppDailyConversationsRes</div>
+          <div>{JSON.stringify(getAppDailyConversationsRes)}</div>
+        </div>
+
+        <div>
+          <div>10.getAppDailyEndUsersRes</div>
+          <div>{JSON.stringify(getAppDailyEndUsersRes)}</div>
+        </div>
+
+        <div>
+          <div>11.updateAppModelConfigRes</div>
+          <div>{JSON.stringify(updateAppModelConfigRes)}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(Service)

web/service/fetch.ts

@@ -127,25 +127,8 @@ export const getBaseOptions = (): RequestInit => ({
 })
 
 async function base<T>(url: string, options: FetchOptionType = {}, otherOptions: IOtherOptions = {}): Promise<T> {
-  // In fetchCompat mode, skip baseOptions to avoid overriding Request object's method, headers,
-  const baseOptions = otherOptions.fetchCompat
-    ? {
-        mode: 'cors',
-        credentials: 'include', // always send cookies、HTTP Basic authentication.
-        redirect: 'follow',
-      }
-    : {
-        mode: 'cors',
-        credentials: 'include', // always send cookies、HTTP Basic authentication.
-        headers: new Headers({
-          'Content-Type': ContentType.json,
-        }),
-        method: 'GET',
-        redirect: 'follow',
-      }
-  const { params, body, headers: headersFromProps, ...init } = Object.assign({}, baseOptions, options)
-  const headers = new Headers(headersFromProps || {})
-
+  const baseOptions = getBaseOptions()
+  const { params, body, headers, ...init } = Object.assign({}, baseOptions, options)
   const {
     isPublicAPI = false,
     isMarketplaceAPI = false,
@@ -173,14 +156,14 @@ async function base<T>(url: string, options: FetchOptionType = {}, otherOptions:
 
   const fetchPathname = base + (url.startsWith('/') ? url : `/${url}`)
   if (!isMarketplaceAPI)
-    headers.set(CSRF_HEADER_NAME, Cookies.get(CSRF_COOKIE_NAME()) || '')
+    (headers as any).set(CSRF_HEADER_NAME, Cookies.get(CSRF_COOKIE_NAME()) || '')
 
   if (deleteContentType)
-    headers.delete('Content-Type')
+    (headers as any).delete('Content-Type')
 
   // ! For Marketplace API, help to filter tags added in new version
   if (isMarketplaceAPI)
-    headers.set('X-Dify-Version', !IS_MARKETPLACE ? APP_VERSION : '999.0.0')
+    (headers as any).set('X-Dify-Version', !IS_MARKETPLACE ? APP_VERSION : '999.0.0')
 
   const client = baseClient.extend({
     hooks: {

web/service/use-billing.ts

@@ -3,8 +3,8 @@ import { consoleClient, consoleQuery } from '@/service/client'
 
 export const useBindPartnerStackInfo = () => {
   return useMutation({
-    mutationKey: consoleQuery.billing.bindPartnerStack.mutationKey(),
-    mutationFn: (data: { partnerKey: string, clickId: string }) => consoleClient.billing.bindPartnerStack({
+    mutationKey: consoleQuery.bindPartnerStack.mutationKey(),
+    mutationFn: (data: { partnerKey: string, clickId: string }) => consoleClient.bindPartnerStack({
       params: { partnerKey: data.partnerKey },
       body: { click_id: data.clickId },
     }),
@@ -13,10 +13,10 @@ export const useBindPartnerStackInfo = () => {
 
 export const useBillingUrl = (enabled: boolean) => {
   return useQuery({
-    queryKey: consoleQuery.billing.invoices.queryKey(),
+    queryKey: consoleQuery.billingUrl.queryKey(),
     enabled,
     queryFn: async () => {
-      const res = await consoleClient.billing.invoices()
+      const res = await consoleClient.billingUrl()
       return res.url
     },
   })